/*
  Rediseño visual de /inicio (dirección "sector energía B2B sobrio").
  Este archivo SOLO se carga desde inicio.php: no afecta a ninguna otra
  página del sitio. Reutiliza el HTML/PHP existente (header_menu(),
  Footer(), secciones dinámicas) y lo restyle vía CSS, incluyendo el
  posicionamiento absoluto de .linea_servicios y de las tarjetas de
  especialistas (reemplazado por !important a un layout estático).
*/

body{
  background:#faf9f6;
  font-family:'IBM Plex Sans', Arial, sans-serif;
  color:#1c211d;
}

/* el diseño viejo le agregaba un recuadro semitransparente propio al caption
   (.carousel-caption{background:#06060682}) en varios breakpoints, además
   del degradado sobre la foto — se ve como un "cuadrado" detrás del texto.
   Lo anulamos: el oscurecimiento lo da únicamente .carrusel-capa. */
.carousel-caption{
  background:transparent !important;
}
h1,h2,h3,h4,h5,h6,
.Montserrat-ExtraBold,.Montserrat-Light,.Montserrat-ExtraLigh{
  font-family:'Archivo', Arial, sans-serif !important;
}
.container-fluid h4.Montserrat-ExtraBold{
  font-weight:800;
  letter-spacing:-.01em;
  color:#1c211d;
}

/* ---------- eyebrow: rótulo numerado sobre cada título de sección ---------- */
.eyebrow-v2{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#1f6a33;
  margin-bottom:14px;
  font-family:'IBM Plex Sans', Arial, sans-serif;
}
.eyebrow-v2::before{
  content:"";
  width:22px;
  height:2px;
  background:#1f6a33;
  display:block;
  flex-shrink:0;
}
/* el mockup alinea los encabezados de sección a la izquierda, no al centro */
.titulo-seccion,
.titulo-seccion .col-sm-12,
.linea_servicios .titulo,
.linea_servicios{
  text-align:left !important;
}
.titulo-seccion img.img-fluid{
  display:none !important; /* línea decorativa reemplazada por el eyebrow */
}
.titulo-seccion h4.Montserrat-ExtraBold{
  max-width:640px;
}
.titulo-seccion p{
  max-width:640px;
}
.titulo-seccion{
  max-width:1240px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box;
  width:100%;
}
.linea_servicios .titulo,
.linea_servicios .eyebrow-v2{
  max-width:1240px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:40px;
  padding-right:40px;
  box-sizing:border-box;
  width:100%;
}

/* ---------- utility top bar ---------- */
.menu_secundario{
  background:#12201a;
  box-shadow:none;
}
.menu_secundario a{
  color:#c7d0ca;
}
.menu_secundario a:hover,
.menu_secundario a:focus{
  background:rgba(255,255,255,.12);
  color:#fff;
}
.menu_secundario .activo{
  background:#1f6a33;
}
@media (min-width:992px){
  .menu_secundario{
    padding-right:max(40px, calc(50vw - 620px)) !important;
  }
}
.topbar-contact-v2{
  /* Comparte la misma franja/fila que .menu_secundario (telefono/email a la
     izquierda, links a la derecha) mediante position:absolute — PERO con
     width:auto (no 100%) para que el area clickeable de este div termine
     justo donde termina su propio contenido, en vez de cubrir tambien el
     lado derecho de la franja donde estan los links de .menu_secundario
     (ese ancho completo era lo que antes tapaba los clics de esos links). */
  position:absolute;
  top:0;
  left:0;
  width:auto;
  height:40px;
  display:flex;
  align-items:center;
  gap:14px;
  padding-left:max(40px, calc(50% - 620px));
  font-size:13px;
  z-index:20;
  box-sizing:border-box;
}
.topbar-contact-v2 a{
  color:#c7d0ca;
  text-decoration:none;
}
.topbar-contact-v2 a:hover{
  color:#fff;
}
.topbar-contact-v2-sep{
  color:#33443a;
}
@media (max-width:700px){
  .topbar-contact-v2{ display:none; }
}

/* ---------- main nav ---------- */
.navbar{
  background:#fff;
  box-shadow:none;
  border-bottom:1px solid #e5e3d8;
}
@media (min-width:992px){
  .navbar{
    padding-left:max(40px, calc(50% - 620px)) !important;
  }
}
.navbar .menuvar:hover,
.navbar .menuvar:focus{
  color:#1f6a33 !important;
}
.navbar .menuvarActive{
  color:#1f6a33 !important;
}
@media (min-width:992px){
  .navbar .nav-link{
    padding:.5rem .55rem;
  }
  #menu .navbar-collapse{
    margin-right:calc(max(40px, calc(50vw - 620px)) + 146px);
  }
}
.nav-cta-v2{
  display:none;
}
@media (min-width:992px){
  .nav-cta-v2{
    display:flex;
    align-items:center;
    position:absolute;
    top:57px;
    right:max(40px, calc(50% - 620px));
    background:#1f6a33;
    color:#fff !important;
    text-decoration:none !important;
    font-size:13.5px;
    font-weight:600;
    padding:11px 20px;
    border-radius:2px;
    z-index:10000;
    font-family:'IBM Plex Sans', Arial, sans-serif;
  }
  .nav-cta-v2:hover{
    background:#154a24;
  }
}

/* ---------- carrusel duplicado y legado que vive dentro de header_menu() para categoria="inicio" ---------- */
#carouselExampleIndicators{
  display:none !important;
}

/* ---------- hero overlay (desktop only — mobile keeps its tuned layout) ---------- */
.carrusel{
  position:relative !important;
  overflow:hidden !important;
  margin-top:0 !important; /* anula el margin-top negativo legado (pensado para el caption corto viejo) */
}
@media (min-width: 992px){
  #carouselExampleControls .carousel-item{
    position:relative;
    min-height:640px;
    display:flex;
    align-items:center;
  }
  #carouselExampleControls .carousel-item img.d-block{
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;
    object-fit:cover;
  }
  .carrusel-capa{
    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none;
    background:linear-gradient(100deg, rgba(18,32,26,.88) 0%, rgba(18,32,26,.78) 40%, rgba(18,32,26,.55) 65%, rgba(18,32,26,.3) 100%);
  }
  .carousel-caption{
    z-index:6;
    position:static !important;
    left:auto;
    right:auto;
    bottom:auto;
    top:auto;
    transform:none;
    width:auto;
    max-width:560px;
    margin-left:max(40px, calc(50% - 620px));
    text-align:left !important;
    padding:0;
  }
  .carousel-caption h2{
    text-shadow:0 2px 10px rgba(0,0,0,.5);
    font-size:2.6em;
    line-height:1.15;
    font-weight:800;
    letter-spacing:-.01em;
    text-align:left !important;
  }
}

/* ---------- hero: eyebrow, subtítulo, CTAs, franja de credibilidad ---------- */
.hero-eyebrow-v2{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8fd6a3;
  margin-bottom:16px;
  font-family:'IBM Plex Sans', Arial, sans-serif;
}
.hero-eyebrow-v2::before{
  content:"";
  width:22px;
  height:2px;
  background:#8fd6a3;
  display:block;
  flex-shrink:0;
}
.hero-sub-v2{
  color:#d7ddd8;
  font-size:16px;
  line-height:1.6;
  margin-top:18px;
  max-width:480px;
  font-family:'IBM Plex Sans', Arial, sans-serif;
}
.hero-cta-v2{
  display:flex;
  gap:14px;
  margin-top:26px;
  flex-wrap:wrap;
}
.hero-btn-solid-v2,
.hero-btn-ghost-v2{
  display:inline-flex;
  align-items:center;
  font-weight:600;
  font-size:14px;
  padding:13px 24px;
  border-radius:2px;
  text-decoration:none !important;
  font-family:'IBM Plex Sans', Arial, sans-serif;
}
.hero-btn-solid-v2{
  background:#1f6a33;
  color:#fff !important;
}
.hero-btn-solid-v2:hover{
  background:#154a24;
  color:#fff !important;
}
.hero-btn-ghost-v2{
  background:transparent;
  border:1px solid rgba(255,255,255,.55);
  color:#fff !important;
}
.hero-btn-ghost-v2:hover{
  border-color:#fff;
  color:#fff !important;
}
.hero-foot-v2{
  display:flex;
  gap:26px;
  margin-top:30px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:12.5px;
  color:#aeb8b1;
  flex-wrap:wrap;
  font-family:'IBM Plex Sans', Arial, sans-serif;
}
@media (max-width:991px){
  .hero-sub-v2{ font-size:14px; max-width:100%; }
  .hero-cta-v2{ margin-top:18px; }
  .hero-btn-solid-v2, .hero-btn-ghost-v2{ padding:11px 18px; font-size:13px; }
  .hero-foot-v2{ margin-top:18px; padding-top:14px; gap:6px; flex-direction:column; }
}

/* ---------- carrusel de aliados (.responsive2): flechas verdes ---------- */
.slick-prev,.slick-next{
  background:#1f6a33;
}
.slick-prev:hover,.slick-prev:focus,
.slick-next:hover,.slick-next:focus{
  background:#154a24;
}

/* ---------- beneficios: grid hairline apilado (igual al mockup) ---------- */
.beneficios-grid-v2{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  border-top:1px solid #e5e3d8;
  border-left:1px solid #e5e3d8;
  max-width:1240px;
  margin-left:auto;
  margin-right:auto;
}
.beneficios{
  display:block !important;
  padding:30px 26px !important;
  margin-right:0 !important;
  border-radius:0 !important;
  border-right:1px solid #e5e3d8;
  border-bottom:1px solid #e5e3d8;
  background:transparent !important;
  box-shadow:none !important;
}
.beneficios:hover{
  background:transparent !important;
  box-shadow:none !important;
}
.beneficios .imagen{
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  display:block !important;
}
.beneficios:hover .imagen{
  background:transparent !important;
}
.beneficios .imagen img.card-img-beneficio{
  object-fit:contain;
}
.beneficios:hover .imagen img.card-img-beneficio{
  filter:none !important;
}
.beneficios .texto{
  margin-top:16px;
}
.beneficios .texto h6{
  font-size:15.5px;
  font-weight:700;
  color:#1c211d !important;
  padding:0 !important;
  margin:0;
}
.beneficios .texto p{
  margin-top:8px;
  font-size:13.5px;
  color:#5b6560 !important;
  padding:0 !important;
  font-weight:400 !important;
  line-height:1.5;
}
@media (max-width:900px){
  .beneficios-grid-v2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:560px){
  .beneficios-grid-v2{ grid-template-columns:1fr; }
}

/* ---------- sub-sectores: grid hairline en vez de banda con foto de fondo ---------- */
.linea_servicios{
  position:static !important;
  height:auto !important;
  width:auto !important;
  background:#f1f0e9 !important;
  padding:70px 0 80px !important;
  overflow:visible !important;
}
.linea_servicios .transparencia{display:none !important;}
.linea_servicios .titulo{
  position:static !important;
  text-align:center;
  font-size:1.5em !important;
  font-weight:800;
  margin-bottom:44px;
  padding:0 20px;
}
.linea_servicios .item.wrap{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  position:static !important;
  width:auto !important;
  max-width:1240px;
  margin:0 auto !important;
  padding:0 40px !important;
  opacity:1 !important;
  bottom:auto !important;
  right:auto !important;
  left:auto !important;
  z-index:auto !important;
  gap:0;
  border-top:1px solid #dedcd0;
  border-left:1px solid #dedcd0;
}
.linea_servicios .item.wrap > a{
  border-right:1px solid #dedcd0;
  border-bottom:1px solid #dedcd0;
  padding:32px 26px !important;
  display:block !important;
  text-decoration:none;
  width:auto !important;
  height:auto !important;
  float:none !important;
  margin-right:0 !important;
  color:inherit !important;
  text-align:left !important;
}
.linea_servicios .item .carousel-caption-a{
  position:static !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  text-align:left !important;
  width:100% !important;
}
.linea_servicios .item .icono-areas{
  width:56px !important;
  height:56px !important;
  object-fit:contain;
  margin-bottom:18px;
}
.linea_servicios .item .sub-titulo{
  padding:0 !important;
  text-align:left !important;
  width:100% !important;
}
.linea_servicios .item .sub-titulo h6{
  font-size:1.05em;
  font-weight:700;
  color:#1c211d;
  margin:0;
}
@media (max-width:900px){
  .linea_servicios .item.wrap{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;}
}

/* ---------- especialistas: grid hairline estático (igual al mockup) ---------- */
.sec-sub-v2{
  max-width:640px;
  margin:16px 0 0 !important;
  font-size:16px;
  line-height:1.6;
  color:#5b6560;
  text-align:left !important;
  font-family:'IBM Plex Sans', Arial, sans-serif;
}
.especialistas-grid-v2{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1px;
  background:#e5e3d8;
  border:1px solid #e5e3d8;
  max-width:1240px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.especialista-v2{
  background:#fff;
  padding:36px 28px;
  text-align:left;
}
.especialista-v2-foto{
  width:76px;
  height:76px;
  border-radius:50%;
  object-fit:cover;
  object-position:top center;
}
.especialista-v2 h3{
  font-size:18px;
  font-weight:700;
  margin-top:22px;
  color:#1c211d;
}
.especialista-v2 p{
  margin-top:6px;
  font-size:14px;
  color:#5b6560;
  line-height:1.5;
}
.especialista-v2-rule{
  margin-top:20px;
  height:1px;
  background:#e5e3d8;
}
.especialista-v2-link{
  display:inline-block;
  margin-top:18px;
  font-size:13.5px;
  font-weight:600;
  color:#1f6a33;
  text-decoration:none;
}
.especialista-v2-link:hover{
  color:#154a24;
}
@media (max-width:991px){
  .especialistas-grid-v2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:600px){
  .especialistas-grid-v2{ grid-template-columns:1fr; }
}

/* Mas espacio arriba en movil solo para "02 — Nuestro equipo" y
   "05 — Alianzas académicas" (marcadas con .sec-pad-top-mobile-v2 en el
   HTML) — el resto de las secciones (01, 03, 04) no se tocan. */
@media (max-width:991px){
  .sec-pad-top-mobile-v2{
    padding-top:48px;
  }
}

/* ---------- confían en nosotros: tira de logos "trusted by" ---------- */
.logo-wall-v2{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:1px;
  background:#e5e3d8;
  border:1px solid #e5e3d8;
  margin-bottom:52px;
  max-width:1240px;
  margin-left:auto;
  margin-right:auto;
}
.logo-wall-v2-item{
  background:#fff;
  height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.logo-wall-v2-item img{
  max-height:32px;
  max-width:100%;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.8;
  transition:opacity .2s ease, filter .2s ease;
}
.logo-wall-v2-item:hover img{
  filter:grayscale(0);
  opacity:1;
}
@media (max-width:900px){
  .logo-wall-v2{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:520px){
  .logo-wall-v2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ---------- confían en nosotros: roster en lista (igual al mockup) ---------- */
.roster-v2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0 60px;
  max-width:1240px;
  margin-left:auto;
  margin-right:auto;
}
.roster-v2-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
  padding:18px 0;
  border-bottom:1px solid #e5e3d8;
}
.roster-v2-name{
  font-weight:700;
  font-size:15px;
  color:#1c211d;
  margin:0;
}
.roster-v2-cargo{
  margin:4px 0 0;
  font-size:13.5px;
  color:#5b6560;
}
.roster-v2-empresa{
  font-size:13px;
  color:#7c847e;
  white-space:nowrap;
  flex-shrink:0;
}
@media (max-width:700px){
  .roster-v2{ grid-template-columns:1fr; }
}

/* ---------- hero: overlay también en mobile (mismo posicionamiento de texto ya existente) ---------- */
@media (max-width:991px){
  #carouselExampleControls .carousel-item{
    /* Fondo oscuro de base: el degradado de .carrusel-capa usa transparencia
       (rgba), y debajo de la foto (en la zona del texto) no hay ninguna
       imagen — sin este fondo, ahi se veia el fondo claro de la pagina
       (#faf9f6) mezclado con la capa semitransparente, dando un verde
       lavado de bajo contraste en vez de oscuro solido, y el texto (claro)
       quedaba dificil de leer. */
    background:#12201a;
    position:relative;
    min-height:0;
    display:block;
  }
  #carouselExampleControls .carousel-item img.d-block{
    position:static;
    width:100% !important;
    height:auto !important;
  }
  .carrusel-capa{
    /* Antes el degradado iba de .1 a .92 de opacidad a lo largo de TODO el
       alto de .carousel-item (foto + texto juntos, via inset:0), con los
       puntos de corte en porcentaje (55%/100%). Como el texto suele ocupar
       mas alto que la foto, la oscuridad real solo se notaba recien muy
       abajo — se veia como un corte duro entre la foto (casi sin oscurecer)
       y un bloque negro solido, en vez de una transicion pareja. Ahora
       llega a un color solido (el mismo #12201a de las franjas oscuras del
       resto del sitio) bien temprano (60%), para que la foto se oscurezca
       de forma gradual y el texto quede sobre un fondo parejo sin costura
       visible, sin importar cuanto texto tenga el banner. */
    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none;
    background:linear-gradient(180deg,
      rgba(18,32,26,.15) 0%,
      rgba(18,32,26,.55) 30%,
      rgba(18,32,26,.9) 45%,
      #12201a 60%,
      #12201a 100%);
  }
  .carousel-caption{
    /* IMPORTANTE: z-index NO tiene ningun efecto en elementos position:static
       (se ignora por completo segun la spec de CSS) — con "static" aca, este
       z-index:6 era inerte, y la capa oscura semitransparente de
       .carrusel-capa (position:absolute, z-index:5, que SI es un elemento
       posicionado) terminaba pintandose ENCIMA del texto en vez de detras,
       oscureciendolo/opacandolo (confirmado sampleando pixeles reales del
       texto: en vez del verde menta configurado, se veia un verde oliva
       apagado — la mezcla del texto con la capa oscura por encima).
       position:relative si respeta z-index, sin mover nada (no tiene
       ningun offset propio), asi que el texto queda correctamente por
       delante de la capa oscura. */
    z-index:6;
    position:relative !important;
    left:auto;
    right:auto;
    bottom:auto;
    top:auto;
    transform:none;
    width:auto;
    max-width:none;
    margin:0;
    padding:26px 20px 30px !important;
    text-align:left !important;
  }
  .carousel-caption h2{
    text-align:left !important;
    text-shadow:none;
  }
  /* El contenido del banner (tabla edu_banner) trae un <span style="color:
     #33cc33"> hardcodeado para el titulo — un verde lima muy saturado que
     desentona con la paleta del sitio (#1f6a33 / #8fd6a3). Se fuerza aca al
     verde suave que ya se usa para el "eyebrow" sobre fondo oscuro, sin
     tocar el contenido de la base de datos. */
  .carousel-caption span[style*="33cc33"]{
    color:#8fd6a3 !important;
  }
  #carouselExampleControls .carousel-control-prev,
  #carouselExampleControls .carousel-control-next{
    display:none;
  }
}

/* ---------- íconos de beneficios: set consistente dibujado a mano ---------- */

/* ---------- footer: charcoal-green instead of neutral grey ---------- */
.general{
  background:#12201a !important;
}
.titulo_footer{
  color:#8fd6a3 !important;
  letter-spacing:.06em;
  font-size:.85em !important;
  text-transform:uppercase;
}
.texto2_footer{
  color:#c7d0ca !important;
}
.Caja-contact a,
.Caja-contact a:hover{
  color:#c7d0ca !important;
}
.Caja-contact hr{
  background:#33443a !important;
}
.beneficios .imagen img[src*="ballot"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h9l3 3v13H6z'/%3E%3Cpath d='M15 4v3h3'/%3E%3Cpath d='M9 12h6M9 16h6M9 8h3'/%3E%3C/svg%3E") !important; width:28px !important; height:28px !important;}
.beneficios .imagen img[src*="professor"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11.5V17c0 1.4 2.7 3 6 3s6-1.6 6-3v-5.5'/%3E%3Cpath d='M22 9v6'/%3E%3C/svg%3E") !important; width:28px !important; height:28px !important;}
.beneficios .imagen img[src*="classroom"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='12' rx='1'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3Cpath d='M10 9.5l4 2.2-4 2.2z'/%3E%3C/svg%3E") !important; width:28px !important; height:28px !important;}
.beneficios .imagen img[src*="relationship"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='8' r='2.6'/%3E%3Ccircle cx='17' cy='8' r='2.3'/%3E%3Cpath d='M2 19c0-3 2.2-5 4.5-5s4.5 2 4.5 5'/%3E%3Cpath d='M13.5 19c.2-2.3 1.9-4.3 4-4.3 1.8 0 3.3 1.2 3.9 3'/%3E%3C/svg%3E") !important; width:28px !important; height:28px !important;}
.beneficios .imagen img[src*="network"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='7' r='2.2'/%3E%3Ccircle cx='18' cy='7' r='2.2'/%3E%3Ccircle cx='12' cy='17' r='2.2'/%3E%3Cpath d='M7.7 8.6 10.5 15M16.3 8.6 13.5 15M8.2 7h7.6'/%3E%3C/svg%3E") !important; width:28px !important; height:28px !important;}
.beneficios .imagen img[src*="interview"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='12' rx='1.5'/%3E%3Cpath d='M8 8V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E") !important; width:28px !important; height:28px !important;}
.beneficios .imagen img[src*="winner"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='M9 13.5 7.5 21 12 18.5 16.5 21 15 13.5'/%3E%3C/svg%3E") !important; width:28px !important; height:28px !important;}
.beneficios .imagen img[src*="video"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.5l6 3.5-6 3.5z'/%3E%3C/svg%3E") !important; width:28px !important; height:28px !important;}
.beneficios .imagen img[src*="lecture"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V10l8-4 8 4v9'/%3E%3Cpath d='M2 19h20'/%3E%3Cpath d='M9 19v-5h6v5'/%3E%3C/svg%3E") !important; width:28px !important; height:28px !important;}
.beneficios .imagen img[src*="newsletter"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1.5'/%3E%3Cpath d='M3.5 6.5 12 13 20.5 6.5'/%3E%3C/svg%3E") !important; width:28px !important; height:28px !important;}
.beneficios .imagen img[src*="tag"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3H5a2 2 0 0 0-2 2v6l10 10 8-8L11 3z'/%3E%3Ccircle cx='8' cy='8' r='1.4'/%3E%3C/svg%3E") !important; width:28px !important; height:28px !important;}
/* ---------- aliados estratégicos: cajas de texto (igual al mockup) ---------- */
.aliados-grid-v2{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  max-width:1240px;
  margin-left:auto;
  margin-right:auto;
}
.aliado-v2{
  border:1px solid #e5e3d8;
  padding:30px 26px;
  text-align:left;
}
.aliado-v2-logo{
  max-height:42px;
  max-width:160px;
  object-fit:contain;
  display:block;
  margin-bottom:18px;
}
.aliado-v2-nombre{
  font-family:'Archivo', Arial, sans-serif;
  font-weight:800;
  font-size:15px;
  letter-spacing:.01em;
  color:#1c211d;
  margin:0;
}
.aliado-v2-rubro{
  margin-top:10px;
  font-size:13.5px;
  color:#5b6560;
  line-height:1.5;
}
@media (max-width:900px){
  .aliados-grid-v2{ grid-template-columns:1fr; }
}

/* ---------- alternar fondo de sección para que no se vea todo blanco seguido ---------- */
.section-alt-v2{
  background:#f1f0e9;
  padding-top:70px;
  padding-bottom:70px;
}
.container-fluid.section-alt-v2{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box;
}

/* ---------- footer propio de /inicio (igual al mockup) ---------- */
.footer-v2{
  background:#2b3830;
  color:#c7d0ca;
  padding:80px 40px 0;
  font-family:'IBM Plex Sans', Arial, sans-serif;
}
.footer-v2-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:40px;
  max-width:1240px;
  margin:0 auto;
  padding-bottom:56px;
  border-bottom:1px solid #33443a;
}
.footer-v2-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer-v2-logo-crop{
  width:38px;
  height:38px;
  overflow:hidden;
  position:relative;
  flex-shrink:0;
}
.footer-v2-logo-crop img{
  height:38px;
  width:auto;
  position:absolute;
  left:0;
  top:0;
}
.footer-v2-logo-full{
  height:40px;
  width:auto;
  max-width:200px;
}
.footer-v2-brand span{
  font-family:'Archivo', Arial, sans-serif;
  font-weight:800;
  font-size:18px;
  color:#fff;
  letter-spacing:.01em;
}
.footer-v2-blurb{
  margin-top:18px;
  font-size:13.5px;
  line-height:1.6;
  color:#9fada6;
  max-width:260px;
}
.footer-v2-social{
  display:flex;
  gap:14px;
  margin-top:24px;
}
.footer-v2-social a{
  width:32px;
  height:32px;
  border:1px solid #33443a;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#c7d0ca;
  transition:color .2s ease, border-color .2s ease;
}
.footer-v2-social a:hover{
  color:#fff;
  border-color:#c7d0ca;
}
.footer-v2-heading{
  font-weight:700;
  color:#fff;
  font-size:13.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:0 0 20px;
}
.footer-v2-links{
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:14px;
}
.footer-v2-links a{
  color:#c7d0ca;
  text-decoration:none;
}
.footer-v2-links a:hover{
  color:#fff;
}
.footer-v2-text{
  font-size:13.5px;
  line-height:1.6;
  color:#c7d0ca;
  margin:0;
}
.footer-v2-text-mt{
  margin-top:10px !important;
}
.footer-v2-text-mt2{
  margin-top:14px !important;
}
.footer-v2-bottom{
  max-width:1240px;
  margin:0 auto;
  padding:26px 0;
  font-size:12.5px;
  color:#8b968f;
}
@media (max-width:900px){
  .footer-v2-grid{ grid-template-columns:1fr 1fr; row-gap:36px; }
}
@media (max-width:520px){
  .footer-v2-grid{ grid-template-columns:1fr; }
  .footer-v2{ padding-left:24px; padding-right:24px; }
}