@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --color_banner: #30398D;
  --Color_bannerfont:  whitesmoke;
  --color_barra: #CCCCCC;
  --color_barrafont: white;
  --color_background:  #CCCCCC;
  --color_texto:#777;
  --color_textoh2: #30398D;
  --color_textoh3: black ;
  --color_textoh4: black ;
  --color_bullet:#30398D;
  --lp-primary:#26256a;
  --lp-secondary:#4b49b6;
  --lp-accent:#00b2a9;
  --lp-light:#f4f5fb;
  --lp-surface: rgba(255,255,255,.68);
  --lp-surface-strong: rgba(255,255,255,.82);
  --lp-border: rgba(255,255,255,.28);
  --lp-gradient: linear-gradient(135deg,#4b49b6 0%,#00b2a9 45%,#38d6c9 100%);
}

/* ESTILO CSS HEADER INDEX*/

/* ZONA SUPERIOR FRANJA GRIS -MENU PRINCIPAL */

/*Define el tamaño del Logo de LP */
.logo { 
  height: 72px; 
}

/* Define la posición y elimina las viñetas de la franja superior en donde esta el LOGO y los links de acceso a las paginas adicionales*/
*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
  font-family:'Plus Jakarta Sans','Montserrat','Segoe UI',sans-serif;
}

/* Define el color de la franja superior en donde esta el LOGO y los links de acceso a las paginas adicionales*/
nav{
  width:100%;
}

nav ul{
  display:flex;
  justify-content:center;
  gap:1rem;
}

nav ul li{
  margin:0;
}

nav ul li a{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.4rem 0;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:inherit;
}

/* ZONA SUPERIOR BANNER */

/*Define el tamaño del banner y el fondo afecta la posición del boton contactenos*/

.banner{
  background: 
  linear-gradient(to right, rgba(0,0,144,0.2),
  var(--color_banner)
  ), url(fondo.jpg);
  background-size: cover;
  background-position: center center;
  height: calc(50vh - 40px);
  display: flex;
  justify-content: center;
  flex-direction: column;    
  text-align: center;
}

/*Define el tamaño de la letra en el banner principal, el color y la posición*/
.banner .banner_principal h2{ 
  text-align: center;
  font-size: 3rem;
}
.banner .banner_principal h3 {
  text-align: right;
  color: var(--Color_bannerfont);
  height: 60px;
  font-size: auto;
  margin: 0rem 2rem 2rem 4rem;  
}

/*Define el tamaño de la letra del boton contactenos del banner */
.banner .boton_Contactenos{
  margin-top: 3rem;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 1.3rem;
}
.banner .boton_Contactenos{
  background: var(--color_banner);
  background-size: cover;
  background-position: center center;
  color: var(--color_barrafont);
  padding: 15px 25px;
  border-radius: 50px;
  font-size: 1.5rem;       
}

/*Controla las transiciones del texto en el banner */

.change{
  display: inline-block;
  vertical-align: bottom;
  animation: blinker 2s linear infinite;
  animation-delay: -1s;
  margin-top: 100px;
}

.change span{
  color: var(--Color_bannerfont);
  float: left;
  overflow: hidden;
  animation: hideShow 12s linear infinite;
}
.change span:nth-child(1) {animation-delay: -0s;}
.change span:nth-child(2) {animation-delay: -2s;}
.change span:nth-child(3) {animation-delay: -4s;}
.change span:nth-child(4) {animation-delay: -6s;}
.change span:nth-child(5) {animation-delay: -8s;}

@keyframes blinker {
  50%{opacity: 0;}
}

@keyframes hideShow {
  0%, 16.6%, 33.33%, 100% {width: 0;}
  16.66%, 33.3% {width: auto;}      
}

@media (max-width:952px){
  nav ul li a{
      font-size: 16px;
  }
  .logo {
      height: 100px;
  }
  .banner{
      height: calc(40vh - 20px);
  }
  .banner .banner_principal h2 {
      font-size: 2.5rem;
  }
  .banner .boton_Contactenos {
      font-size: 1.2rem;
      padding: 10px 20px;
  }
}

@media (max-width:768px){
  nav{
      flex-direction: column;
      height: auto;
      padding: 20px;
  }
  nav ul {
      flex-direction: column;
      gap: 10px;
  }
  .banner{
      height: calc(35vh - 20px);
  }
  .banner .banner_principal h2 {
      font-size: 2rem;
  }
  .banner .boton_Contactenos {
      font-size: 1rem;
      padding: 8px 16px;
  }
  .flex_article {
      flex-direction: column;
      align-items: center;
  }
}

@media (max-width:600px){
  .banner{
      height: calc(30vh - 20px);
  }
  .banner .banner_principal h2 {
      font-size: 1.5rem;
  }
  .banner .banner_principal h3 {
      text-align: center;
      margin: 1rem;
  }
  .banner .boton_Contactenos {
      font-size: 0.9rem;
      padding: 6px 12px;
  }
  .flex_article {
      flex-direction: column;
      align-items: center;
  }
}

/*CONTAINER */

/*Controla el color del container principal */
.container_web {
  background-color: var(--color_background);
  color: var(--color_texto);
  padding: 30px;
  margin: 30px;
}

.flex_article{
  display: flex;    
  justify-content: center;
  gap: 20px;
  flex-wrap: nowrap;
}

.auditoria_img img,
.nosotros_img img{   
  margin: 2px 0px 0px 0px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.actualidad_img img{   
  margin: 2px 0px 0px 0px;
  height: 80%;
  width: 80%;
  object-fit: cover;
}

.nosotros_img,
.actualidad_img,
.auditoria_img{
  margin: 4px 20px 0px 20px;
  width: 100%;
  max-width: 400px;
  height: auto;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.nosotros_img:hover,
.actualidad_img:hover,
.auditoria_img:hover,
.ser h3:hover{
  transform: scale(1.05);
}

@media (max-width:768px){
  .nosotros_img,
  .actualidad_img,
  .auditoria_img{
      max-width: 300px;
  }
}

@media (max-width:600px){
  .nosotros_img,
  .actualidad_img,
  .auditoria_img{
      max-width: 100%;
      padding: 10px;
  }
}

.float{
  position:fixed;
  bottom:26px;
  right:26px;
  width:64px;
  height:64px;
  border-radius:999px;
  background:linear-gradient(135deg,#1ebe5d 0%,#25d366 55%,#5cf28d 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  box-shadow:0 20px 40px rgba(30,190,93,.32);
  z-index:120;
  transition:transform .25s ease, box-shadow .25s ease;
  border:1px solid rgba(255,255,255,.4);
}

.float::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(255,255,255,.22);
  opacity:0;
  transition:opacity .25s ease;
}

.float:hover{
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 26px 52px rgba(30,190,93,.38);
}

.float:hover::after{
  opacity:.35;
}

.my-float{
  margin:0;
  font-size:1.5rem;
}

/*FOOTER*/
.footer_container {
  background-color: var(--color_barra);
  padding: 20px;
  text-align: center;
  color: var(--color_barrafont);
}

.footer_container .contact_info h4 {
  font-size: 18px;
  margin-bottom: 10px;
}

.footer_container .contact_info ul {
  list-style: none;
  padding: 0;
  margin-bottom: 10px;
}

.footer_container .contact_info ul li {
  margin-bottom: 5px;
}

.footer_container .contact_info ul li a {
  color: var(--color_barrafont);
  text-decoration: none;
}

.footer_container .contact_info ul li a:hover {
  text-decoration: underline;
}

/* CSS PARA LA PAGINA NOSOTROS*/

section.nosotros {
  background-color: var(--color_background);
  color: var(--color_texto);
  line-height: 1.5;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  column-count: 3;
  column-gap: 30px;
  padding: 30px;
  margin: 30px;
}

section.nosotros h1 {
  font-size: 30px;
  color: var(--color_textoh2);
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
section.nosotros h2 {
  font-size: 28px;
  color: var(--color_textoh2);
  margin-bottom: 20px;
}

section.nosotros h3 {
  font-size: 24px;
  color: var(--color_textoh3);
  margin-bottom: 10px;
}

section.nosotros p {
  margin-bottom: 15px;
}
section.nosotros p[data-starts-with="Estabilidad"],
section.nosotros p[data-starts-with="Calidad"],
section.nosotros p[data-starts-with="Experiencia"] {
  position: relative;
  padding-left: 20px;
}

section.nosotros p[data-starts-with="Estabilidad"]::before,
section.nosotros p[data-starts-with="Calidad"]::before,
section.nosotros p[data-starts-with="Experiencia"]::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--color_bullet);
  font-size: 18px;
}

section.nosotros a {
  color: #007bff;
  text-decoration: none;
  transition: color 0.3s ease;
}

section.nosotros a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* Modern layout shared styles */
body{
  background:radial-gradient(160% 160% at 20% 20%,rgba(75,73,182,.18) 0%,transparent 45%),radial-gradient(140% 140% at 80% 10%,rgba(0,178,169,.16) 0%,transparent 50%),#f5f6ff;
  color:#202236;
  margin:0;
  line-height:1.65;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

body::before,
body::after{
  content:"";
  position:fixed;
  width:420px;
  height:420px;
  filter:blur(140px);
  opacity:.55;
  z-index:-2;
  pointer-events:none;
}

body::before{
  top:-120px;
  left:-160px;
  background:rgba(75,73,182,.6);
}

body::after{
  bottom:-160px;
  right:-120px;
  background:rgba(0,178,169,.45);
}

header{
  position:sticky;
  top:0;
  z-index:80;
  padding:1.4rem 0;
  backdrop-filter:saturate(180%) blur(18px);
  background:rgba(245,247,255,.65);
  border-bottom:1px solid rgba(255,255,255,.4);
  box-shadow:0 12px 28px rgba(15,16,51,.08);
}

header nav{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:.75rem 1.9rem;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.6rem;
  background:var(--lp-surface);
  border:1px solid var(--lp-border);
  border-radius:999px;
  box-shadow:0 20px 45px rgba(38,37,106,.12);
}

header nav ul{
  display:flex;
  align-items:center;
  gap:1.4rem;
  justify-content:flex-end;
}

header nav ul li{
  margin:0;
}

header nav ul li a{
  color:rgba(38,37,106,.78);
  font-size:.92rem;
  padding:.3rem 0;
  text-transform:none;
  transition:color .2s ease, opacity .2s ease;
}

header nav ul li a:hover{
  color:var(--lp-primary);
}

header nav ul li a.active{
  color:var(--lp-accent);
}

.logo{
  height:72px;
}

header nav ul li:last-child a{
  padding:.55rem 1.15rem;
  background:var(--lp-gradient);
  color:#fff;
  border-radius:999px;
  box-shadow:0 16px 32px rgba(38,37,106,.22);
  text-transform:none;
  font-weight:700;
  letter-spacing:0;
}

header nav ul li:last-child a:hover{
  opacity:.92;
  box-shadow:0 20px 42px rgba(38,37,106,.28);
}

main{
  max-width:1200px;
  margin:0 auto;
  padding:1rem 1.6rem 4.5rem;
}

main > section{
  scroll-margin-top:140px;
}

.hero{
  position:relative;
  overflow:hidden;
  padding:4.2rem 3rem;
  color:#fff;
  border-radius:26px;
  margin-top:2rem;
  box-shadow:0 26px 56px rgba(38,37,106,.18);
  border:1px solid var(--lp-border);
  backdrop-filter:blur(12px);
  isolation:isolate;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-30% -10% 40%;
  background:radial-gradient(120% 120% at 20% 30%,rgba(255,255,255,.56) 0%,rgba(255,255,255,0) 60%);
  opacity:.45;
  z-index:0;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(14,16,40,.4);
  pointer-events:none;
  z-index:1;
}

.hero .hero-content{
  position:relative;
  max-width:760px;
  z-index:2;
}

.hero h1{
  font-size:clamp(2.4rem,2.1rem + 1.2vw,3.3rem);
  line-height:1.25;
  font-weight:800;
  margin:0 0 1rem;
  letter-spacing:-.01em;
}

.hero p{
  font-size:1.05rem;
  color:rgba(255,255,255,.86);
  margin:0 0 1.9rem;
  max-width:620px;
  line-height:1.8;
}

.hero-tag{
  display:inline-block;
  padding:10px 24px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.hero-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

.cta-primary,
.cta-outline,
.hero .cta{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.9rem 1.9rem;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}

.cta-primary{
  background:var(--lp-gradient);
  color:#fff;
  box-shadow:0 22px 38px rgba(38,37,106,.28);
  border:none;
}

.cta-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 48px rgba(38,37,106,.32);
}

.cta-outline{
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  background:transparent;
}

.cta-outline:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.12);
}

.hero .cta{
  background:var(--lp-gradient);
  color:#fff;
  box-shadow:0 18px 34px rgba(0,178,169,.35);
  padding:.85rem 1.8rem;
  border:none;
}

.hero-pillars{
  margin-top:2.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  color:rgba(255,255,255,.9);
}

.hero-pillars li{
  list-style:none;
  flex:1 1 170px;
  background:rgba(255,255,255,.08);
  padding:1rem 1.2rem;
  border-radius:15px;
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  gap:.75rem;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.hero-pillars li:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.16);
  box-shadow:0 18px 34px rgba(15,16,51,.18);
}

.hero-pillars i{
  font-size:1.2rem;
  color:var(--lp-accent);
}

.hero-badges{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  margin-top:1.6rem;
}

.hero-badges span{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.55rem 1.25rem;
  border-radius:999px;
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.35);
  font-weight:600;
  letter-spacing:.04em;
  transition:transform .2s ease, background .2s ease;
}

.hero-badges span:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.32);
}

.feature-section{
  background:var(--lp-surface);
  padding:3.6rem 3rem;
  margin:4rem 0;
  border-radius:26px;
  box-shadow:0 22px 44px rgba(38,37,106,.12);
  border:1px solid var(--lp-border);
  backdrop-filter:blur(14px);
}

.feature-section h2{
  text-align:center;
  font-weight:800;
  color:var(--lp-primary);
  margin-bottom:2.1rem;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.6rem;
}

.feature-card{
  background:var(--lp-surface-strong);
  border-radius:20px;
  padding:2.1rem;
  box-shadow:0 20px 38px rgba(38,37,106,.12);
  border:1px solid var(--lp-border);
  transition:transform .15s ease, box-shadow .15s ease;
  display:flex;
  flex-direction:column;
  gap:1rem;
  backdrop-filter:blur(18px);
}

.feature-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 46px rgba(38,37,106,.18);
  border-color:rgba(255,255,255,.4);
}

.feature-card h3{
  color:var(--lp-primary);
  font-weight:700;
}

.feature-card p{
  font-size:.98rem;
  line-height:1.45;
  color:#494b5e;
}

.feature-card a{
  align-self:flex-start;
  color:var(--lp-primary);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(38,37,106,.3);
  padding-bottom:.2rem;
}

.metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1.4rem;
  margin-top:2.7rem;
}

.metric{
  text-align:center;
  padding:1.6rem;
  border-radius:18px;
  background:var(--lp-surface-strong);
  border:1px solid var(--lp-border);
  box-shadow:0 18px 34px rgba(38,37,106,.12);
  backdrop-filter:blur(16px);
  transition:transform .2s ease, box-shadow .2s ease;
}

.metric strong{
  display:block;
  font-size:2rem;
  color:var(--lp-primary);
  font-weight:800;
}

.metric span{
  color:#6b6d84;
  font-size:.95rem;
}

.metric:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 42px rgba(38,37,106,.16);
}

.actualidad-preview{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  gap:1.8rem;
  align-items:center;
  margin:4rem 0;
  background:var(--lp-surface);
  border-radius:24px;
  padding:3rem;
  border:1px solid var(--lp-border);
  box-shadow:0 22px 44px rgba(38,37,106,.14);
  backdrop-filter:blur(16px);
}

.actualidad-media{
  margin:0;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 20px 44px rgba(38,37,106,.12);
  order:2;
}

.actualidad-media img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

.actualidad-preview article{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  order:1;
}

.actualidad-preview h3{
  color:var(--lp-primary);
  font-weight:700;
  margin:0;
}

.actualidad-preview p{
  color:#4d4f61;
  line-height:1.55;
  margin:0;
}

.actualidad-preview a{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:var(--lp-accent);
  font-weight:600;
  text-decoration:none;
}

.about-wrapper{
  margin:4rem 0;
  background:var(--lp-surface);
  border-radius:28px;
  padding:3rem 3.2rem;
  box-shadow:0 26px 58px rgba(38,37,106,.15);
  position:relative;
  z-index:2;
  border:1px solid var(--lp-border);
  backdrop-filter:blur(14px);
}

.about-wrapper h2{
  color:var(--lp-primary);
  font-weight:700;
  margin:0 0 1rem;
}

.about-wrapper > p{
  color:#46486a;
  line-height:1.6;
  margin:0;
}

.about-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.8rem;
  margin-top:2rem;
}

.stat-card{
  background:var(--lp-surface-strong);
  border-radius:18px;
  padding:1.8rem;
  border:1px solid var(--lp-border);
  box-shadow:0 16px 30px rgba(38,37,106,.12);
  backdrop-filter:blur(16px);
  transition:transform .2s ease, box-shadow .2s ease;
}

.stat-card h3{
  color:var(--lp-primary);
  font-weight:700;
  margin-bottom:.4rem;
}

.stat-card p{
  color:#53546a;
  line-height:1.5;
  font-size:.98rem;
}

.stat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 42px rgba(38,37,106,.16);
}

.timeline{
  margin:4rem 0;
  border-left:3px solid rgba(38,37,106,.2);
  padding-left:1.6rem;
}

.timeline h2{
  color:var(--lp-primary);
  font-weight:700;
  margin-bottom:1.2rem;
}

.timeline-item{
  position:relative;
  margin-bottom:1.8rem;
}

.timeline-item::before{
  content:"";
  position:absolute;
  left:-1.85rem;
  top:.25rem;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--lp-accent);
  box-shadow:0 0 0 6px rgba(0,178,169,.15);
}

.timeline-item h4{
  font-weight:700;
  color:var(--lp-secondary);
  margin-bottom:.35rem;
}

.timeline-item p{
  margin:0;
  color:#50516a;
}

.team-section{
  margin-top:4rem;
}

.team-section h2{
  color:var(--lp-primary);
  font-weight:700;
  margin-bottom:1.2rem;
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.6rem;
}

.team-card{
  background:var(--lp-surface-strong);
  border-radius:18px;
  padding:1.8rem;
  border:1px solid var(--lp-border);
  box-shadow:0 16px 32px rgba(38,37,106,.14);
  backdrop-filter:blur(16px);
  transition:transform .2s ease, box-shadow .2s ease;
}

.team-card h3{
  color:var(--lp-secondary);
  font-weight:700;
  margin-bottom:.35rem;
}

.team-card span{
  display:block;
  color:#6b6d84;
  margin-bottom:.6rem;
  font-size:.95rem;
  font-weight:600;
}

.team-card p{
  color:#4a4c63;
  font-size:.97rem;
  line-height:1.5;
}

.team-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 44px rgba(38,37,106,.18);
}

.values{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.5rem;
  margin:4rem 0;
}

.value-card{
  background:var(--lp-surface-strong);
  border-radius:18px;
  padding:1.7rem;
  border:1px solid var(--lp-border);
  box-shadow:0 12px 28px rgba(38,37,106,.12);
  backdrop-filter:blur(14px);
  transition:transform .2s ease, box-shadow .2s ease;
}

.value-card h3{
  color:var(--lp-primary);
  font-weight:700;
  margin-bottom:.5rem;
}

.value-card p{
  color:#555772;
  font-size:.96rem;
  line-height:1.48;
}

.value-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 36px rgba(38,37,106,.16);
}

.why-section{
  margin:4rem 0 0;
  background:var(--lp-surface);
  border-radius:24px;
  padding:2.6rem 3rem;
  border:1px solid var(--lp-border);
  box-shadow:0 22px 44px rgba(38,37,106,.14);
  backdrop-filter:blur(14px);
}

.why-section h2{
  color:var(--lp-primary);
  font-weight:700;
  margin:0 0 1rem;
}

.why-section p{
  color:#484a63;
  line-height:1.6;
  margin:0;
}

.services-wrapper{
  margin:4rem 0;
  background:var(--lp-surface);
  border-radius:28px;
  padding:3rem 3.2rem;
  box-shadow:0 26px 56px rgba(38,37,106,.18);
  position:relative;
  z-index:2;
  border:1px solid var(--lp-border);
  backdrop-filter:blur(14px);
}

.intro{
  color:#46486a;
  line-height:1.6;
  margin:0;
}

.categories{
  margin:2.6rem 0 2rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.5rem;
}

.category-card{
  background:var(--lp-surface-strong);
  border-radius:18px;
  padding:1.6rem;
  border:1px solid var(--lp-border);
  box-shadow:0 14px 30px rgba(38,37,106,.12);
  backdrop-filter:blur(14px);
}

.category-card h3{
  color:var(--lp-primary);
  font-weight:700;
  margin-bottom:.5rem;
}

.category-card p{
  color:#54556d;
  font-size:.95rem;
  line-height:1.45;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.6rem;
  margin-top:2.5rem;
}

.service-card{
  background:var(--lp-surface-strong);
  border-radius:20px;
  padding:1.9rem;
  border:1px solid var(--lp-border);
  box-shadow:0 18px 38px rgba(38,37,106,.14);
  display:flex;
  flex-direction:column;
  gap:.85rem;
  backdrop-filter:blur(16px);
  transition:transform .2s ease, box-shadow .2s ease;
}

.service-card h4{
  color:var(--lp-secondary);
  font-weight:700;
}

.service-card p{
  color:#4a4c63;
  font-size:.97rem;
  line-height:1.5;
}

.service-card ul{
  padding-left:1.2rem;
  color:#4a4c63;
  font-size:.95rem;
  line-height:1.45;
}

.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 44px rgba(38,37,106,.18);
}

.cta-panel{
  margin-top:3.2rem;
  padding:2.3rem;
  background:linear-gradient(135deg,rgba(38,37,106,.92),rgba(0,178,169,.85));
  border-radius:24px;
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:flex-start;
}

.cta-panel h2{
  font-size:1.6rem;
  font-weight:700;
  margin:0;
}

.cta-panel p{
  max-width:620px;
  line-height:1.6;
  margin:0;
}

.cta-panel a{
  background:#fff;
  color:var(--lp-primary);
  padding:.85rem 1.6rem;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 16px 30px rgba(255,255,255,.22);
}

.cta-panel a:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 40px rgba(255,255,255,.28);
}

.actualidad-layout{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1.2fr);
  gap:2.4rem;
  align-items:flex-start;
  margin:4rem 0 0;
}

.bulletins{
  background:var(--lp-surface);
  border-radius:28px;
  padding:2.4rem;
  box-shadow:0 26px 58px rgba(38,37,106,.16);
  border:1px solid var(--lp-border);
  backdrop-filter:blur(16px);
}

.bulletins-head h2{
  margin:0;
  font-size:1.85rem;
  color:var(--lp-primary);
  font-weight:800;
}

.bulletins-head p{
  margin:.6rem 0 0;
  color:#555672;
  font-size:1.05rem;
}

.bulletins-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.4rem;
  margin-top:1.6rem;
}

.boletin-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:space-between;
  align-items:center;
  margin-top:1.6rem;
}

.boletin-filter{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}

.boletin-filter button{
  padding:.45rem 1rem;
  border-radius:999px;
  border:1px solid var(--lp-border);
  background:var(--lp-surface-strong);
  color:var(--lp-primary);
  font-weight:600;
  font-size:.85rem;
  cursor:pointer;
  transition:all .2s ease;
  box-shadow:0 12px 30px rgba(38,37,106,.12);
}

.boletin-filter button:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 45px rgba(38,37,106,.15);
}

.boletin-filter button.is-active{
  background:var(--lp-primary);
  color:#fff;
  border-color:var(--lp-primary);
  box-shadow:0 18px 45px rgba(38,37,106,.25);
}

.boletin-search{
  position:relative;
}

.boletin-search input{
  padding:.55rem 2.5rem .55rem 1rem;
  border-radius:12px;
  border:1px solid var(--lp-border);
  min-width:220px;
  font-size:.9rem;
  background:var(--lp-surface-strong);
  box-shadow:0 14px 30px rgba(38,37,106,.12);
  transition:border .2s ease,box-shadow .2s ease;
}

.boletin-search input:focus{
  outline:none;
  border-color:var(--lp-primary);
  box-shadow:0 20px 48px rgba(38,37,106,.2);
}

.boletin-search i{
  position:absolute;
  right:.9rem;
  top:50%;
  transform:translateY(-50%);
  color:#65708f;
  pointer-events:none;
}

.boletin-card{
  border:1px solid var(--lp-border);
  border-radius:20px;
  padding:1.6rem;
  background:var(--lp-surface-strong);
  box-shadow:0 18px 45px rgba(15,23,42,.16);
  display:flex;
  flex-direction:column;
  gap:.85rem;
  transition:transform .2s ease, box-shadow .2s ease;
  backdrop-filter:blur(18px);
}

.boletin-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 60px rgba(15,23,42,.15);
}

.boletin-card .badge{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.35rem .8rem;
  border-radius:999px;
  background:rgba(38,37,106,.12);
  color:var(--lp-primary);
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.boletin-card h3{
  margin:0;
  font-size:1.05rem;
  color:var(--lp-primary);
  font-weight:700;
}

.boletin-card .boletin-meta{
  font-size:.85rem;
  color:#65708f;
  font-weight:600;
}

.boletin-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:.4rem;
}

.boletin-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem 1.1rem;
  border-radius:12px;
  font-weight:600;
  font-size:.9rem;
  text-decoration:none;
  border:1px solid var(--lp-border);
  color:var(--lp-primary);
  background:var(--lp-surface-strong);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:0 12px 26px rgba(38,37,106,.12);
}

.boletin-actions a:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 32px rgba(38,37,106,.18);
  border-color:rgba(255,255,255,.4);
}

.boletin-actions a.primary{
  background:var(--lp-primary);
  color:#fff;
  border-color:var(--lp-primary);
}

.boletin-detail{
  background:var(--lp-surface);
  border:1px solid var(--lp-border);
  border-radius:24px;
  padding:2.2rem;
  box-shadow:0 18px 45px rgba(15,23,42,.16);
  backdrop-filter:blur(18px);
}

.boletin-detail h3{
  margin:0 0 .5rem;
  font-size:1.6rem;
  color:var(--lp-primary);
  font-weight:800;
}

.boletin-detail .muted{
  color:#65708f;
  margin-bottom:1.1rem;
}

.boletin-detail .btn-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border:none;
  background:none;
  color:var(--lp-primary);
  font-weight:600;
  padding:.35rem 0;
  margin-bottom:1.1rem;
  cursor:pointer;
}

.boletin-detail .btn-link i{
  font-size:.9rem;
}

.boletin-detail .download{
  margin:1.4rem 0;
}

.boletin-detail .download a{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.65rem 1.25rem;
  border-radius:12px;
  background:var(--lp-primary);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 16px 35px rgba(38,37,106,.24);
  transition:transform .2s ease, box-shadow .2s ease;
}

.boletin-detail .download a:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 48px rgba(38,37,106,.32);
}

.boletin-share{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:1.2rem 0 1.6rem;
}

.boletin-share button{
  padding:.55rem 1.1rem;
  border-radius:12px;
  border:1px solid var(--lp-border);
  background:var(--lp-surface-strong);
  color:var(--lp-primary);
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:0 12px 26px rgba(38,37,106,.12);
}

.boletin-share button.primary{
  background:var(--lp-primary);
  color:#fff;
  border-color:var(--lp-primary);
}

.boletin-share button:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 32px rgba(38,37,106,.2);
  border-color:rgba(255,255,255,.4);
}

.boletin-share span.muted{
  font-size:.82rem;
  align-self:center;
}

.boletin-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1.4rem;
}

.boletin-tags span{
  padding:.35rem .8rem;
  background:rgba(0,178,169,.12);
  color:var(--lp-accent);
  border-radius:999px;
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.admin-empty{
  padding:1.4rem;
  border-radius:18px;
  background:rgba(242,244,255,.7);
  color:#404978;
  text-align:center;
  font-weight:500;
}

.boletin-error{
  padding:1.2rem;
  border-radius:14px;
  background:rgba(255,230,234,.7);
  color:#8a1c1c;
  font-weight:600;
  text-align:center;
  margin-top:2rem;
}

.feature-article{
  background:var(--lp-surface);
  border-radius:28px;
  padding:2.6rem;
  box-shadow:0 24px 56px rgba(38,37,106,.16);
  position:sticky;
  top:2rem;
  border:1px solid var(--lp-border);
  backdrop-filter:blur(18px);
}

.feature-article img{
  width:100%;
  border-radius:20px;
  box-shadow:0 20px 48px rgba(38,37,106,.12);
  margin-bottom:2rem;
}

.feature-article h2{
  color:var(--lp-primary);
  font-weight:700;
  margin-top:2.5rem;
  margin-bottom:.9rem;
}

.feature-article p{
  line-height:1.7;
  margin-bottom:1.4rem;
  color:#44465a;
  font-size:1.02rem;
}

.feature-article blockquote{
  margin:2rem 0;
  padding:1.5rem 1.8rem;
  border-left:4px solid var(--lp-accent);
  background:rgba(0,178,169,.1);
  border-radius:12px;
  color:#1f4b49;
  font-weight:600;
}

.feature-article footer{
  margin-top:2.5rem;
  font-size:.9rem;
  color:#6c6f84;
}

.tag{
  display:inline-block;
  margin-bottom:1.4rem;
  padding:.55rem 1.2rem;
  border-radius:999px;
  background:rgba(38,37,106,.08);
  color:var(--lp-primary);
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.hidden{
  display:none!important;
}

.contact-wrapper{
  margin:4rem 0;
  background:var(--lp-surface);
  border-radius:28px;
  padding:3rem 3.2rem;
  box-shadow:0 24px 50px rgba(38,37,106,.18);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:2.2rem;
  border:1px solid var(--lp-border);
  backdrop-filter:blur(16px);
}

.info-card{
  background:var(--lp-surface-strong);
  border-radius:20px;
  padding:2.1rem;
  border:1px solid var(--lp-border);
  box-shadow:0 16px 30px rgba(38,37,106,.12);
  backdrop-filter:blur(16px);
}

.info-card h2{
  color:var(--lp-primary);
  font-weight:700;
  margin-bottom:1.1rem;
}

.info-card ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}

.info-card li{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  color:#4a4c63;
  font-size:.97rem;
}

.info-card li i{
  font-size:1.1rem;
  color:var(--lp-accent);
  margin-top:.25rem;
}

.info-card a{
  color:var(--lp-secondary);
  font-weight:600;
  text-decoration:none;
}

.form-card{
  border-radius:20px;
  border:1px solid var(--lp-border);
  box-shadow:0 16px 34px rgba(38,37,106,.14);
  padding:2.2rem;
  background:var(--lp-surface-strong);
  backdrop-filter:blur(16px);
}

.form-card h2{
  color:var(--lp-primary);
  font-weight:700;
  margin-bottom:1rem;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.2rem;
}

.form-card input,
.form-card textarea{
  width:100%;
  border:1px solid #d6d8f2;
  border-radius:12px;
  padding:.85rem 1rem;
  font-size:.96rem;
  font-family:inherit;
  transition:border .2s ease, box-shadow .2s ease;
}

.form-card textarea{
  min-height:150px;
  resize:vertical;
}

.form-card input:focus,
.form-card textarea:focus{
  outline:none;
  border-color:var(--lp-accent);
  box-shadow:0 0 0 3px rgba(0,178,169,.18);
}

.form-card button{
  margin-top:1rem;
  background:var(--lp-primary);
  color:#fff;
  border:none;
  padding:.95rem 1.8rem;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}

.form-card button:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 30px rgba(38,37,106,.2);
}

.footer_container{
  background:#0f1033;
  color:#fff;
}

.footer_container .contact_info a{
  color:#86f0e8;
}

@media (max-width:1024px){
  .actualidad-layout{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .feature-article{
    position:static;
  }
}

@media (max-width:768px){
  header nav{
    padding:1.1rem 1.4rem;
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
    border-radius:24px;
    box-shadow:0 16px 34px rgba(38,37,106,.16);
  }
  header nav ul{
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    gap:.4rem;
  }
  .hero{
    padding:3.6rem 1.8rem;
  }
  .hero h1{
    font-size:2rem;
  }
  .hero-pillars{
    flex-direction:column;
  }
  .feature-section{
    padding:3rem 1.8rem;
  }
  .actualidad-preview{
    padding:2rem 1.8rem;
    grid-template-columns:minmax(0,1fr);
  }
  .actualidad-media{
    order:1;
  }
  .actualidad-preview article{
    order:2;
  }
  main{
    padding:0 1.2rem 3rem;
  }
  .about-wrapper{
    margin:3rem 0;
    padding:2.2rem;
  }
  .why-section{
    padding:2.2rem 2rem;
  }
  .services-wrapper{
    margin:3rem 0;
    padding:2.4rem;
  }
  .contact-wrapper{
    margin:3rem 0;
    padding:2.4rem;
  }
  .bulletins{
    padding:2rem;
  }
  .feature-article{
    padding:2.2rem;
  }
  .float{
    right:18px;
    bottom:18px;
    width:58px;
    height:58px;
  }
  .my-float{
    font-size:1.4rem;
  }
}

.page-home .hero{
  background:linear-gradient(125deg,rgba(38,37,106,.92),rgba(75,73,182,.9)),url('../nosotros.jpg') center/cover no-repeat;
}

.page-about .hero{
  background:linear-gradient(120deg,rgba(38,37,106,.92),rgba(75,73,182,.88)),url('../nosotros.jpg') center/cover no-repeat;
}

.page-services .hero{
  background:linear-gradient(120deg,rgba(38,37,106,.92),rgba(75,73,182,.88)),url('../servicios.jpg') center/cover no-repeat;
}

.page-news .hero{
  background:linear-gradient(125deg,rgba(38,37,106,.94),rgba(75,73,182,.86)),url('../actualidad.jpg') center/cover no-repeat;
}

.page-contact .hero{
  background:linear-gradient(120deg,rgba(38,37,106,.92),rgba(0,178,169,.85)),url('contacto.jpg') center/cover no-repeat;
}

@media (max-width:768px) {
  section.nosotros {
      column-count: 1;
      padding: 20px;
  }
}

/* CSS PARA LA PAGINA SERVICIOS*/
/* Estilos para la sección de servicios */
.servicios {
  background-color: var(--color_background);
  padding: 30px;
  margin: 30px;
  column-count: 3;
  column-gap: 30px;
  text-align: justify;
}

.servicios h2 {
  font-size: 28px;
  color: var(--color_textoh2);
  margin-bottom: 20px;
  text-align: center;
}

.servicios h3 {
  font-size: 20px;
  color: var(--color_textoh3);
  margin-top: 30px;
  margin-bottom: 10px;
  position: relative;
}

.servicios h3::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -15px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: var(--color_bullet);
  border-radius: 50%;
}

.servicios p {
  font-size: 16px;
  color: var(--color_texto);
  line-height: 1.5;
  margin-bottom: 15px;
}

.servicios a {
  color: var(--color_link);
  text-decoration: none;
}

.servicios a:hover {
  text-decoration: underline;
}

@media (max-width:768px) {
  .servicios {
      column-count: 1;
  }
}

/* CSS PARA LA PAGINA ACTUALIDAD*/

section.actualidad {
  background-color: var(--color_background);
  color: var(--color_texto);
  line-height: 1.5;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  column-count: 2;
  column-gap: 30px;
  padding: 30px;
  margin: 30px;
}

section.actualidad h1 {
  font-size: 30px;
  color: var(--color_textoh2);
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

section.actualidad h2 {
  font-size: 28px;
  color: var(--color_textoh2);
  margin-bottom: 20px;
}

section.actualidad h3 {
  font-size: 24px;
  color: var(--color_textoh3);
  margin-bottom: 10px;
}

section.actualidad h4 {
  color: var(--color_textoh2);
}
section.actualidad p {
  margin-bottom: 15px;
}

img.actualidad_IA {
  display: block;
  max-width: 80%;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  transition: transform .2s;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

@media screen and (max-width:600px) {
  img.actualidad_IA {
      width: 100%;
      border-radius: 0;
  }
}

/* BANNER CONTACTENOS*/

.banner2{
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background-color: var(--color_background);
  padding: 30px;
  margin: 30px;
}

.form_container{
  margin: 150px 200px;
  width: 500px;
  margin-top: 100px;
  height: 500px;
}

@media (max-width:768px){
  .form_container{
      margin: 50px 20px;
      width: 90%;
      height: auto;
  }
}

input{
  margin: 12px;
  padding: 8px;
  width: 460px;
  border-radius: 5px;
  font-size: 1rem;
}

input[type='submit']{
  background: var(--color_banner);
  background-size: cover;
  background-position: center center;
  color: white;
  padding: 10px 25px;
  border-radius: 50px;
  font-size: 1rem;
  width: auto;
  height: auto;
}

textarea{
  margin: 12px;
  padding: 8px;
  min-height: 200px;
  max-height: 300px;
  min-width: 460px;
  max-width: 460px;
  font-size: 1rem;
}

@media (max-width:768px){
  input{
      width: 100%;
  }
  textarea{
      min-width: 100%;
      max-width: 100%;
  }
}

.smartLP h1 {
  font-size: 36px;
  text-align: center;
  color: red;
}