/* =============================================================
   PDP AGUASCALIENTES — CAPA "CANVA"
   Replica la propuesta del micrositio (Canva DAHRLsF6J5g, pág. 1):
   fondos fotográficos por sección, títulos display a dos tonos
   y tarjetas con borde neón.
   Cargar DESPUÉS de glass.css.
   ============================================================= */

:root {
  --cv-cyan: #22d3ee;
  --cv-cyan-2: #67e8f9;
  --cv-blue: #3b82f6;
  --cv-blue-2: #60a5fa;
  --cv-magenta: #D6006E;
  --cv-magenta-2: #ff4fa0;
  --cv-violet: #8b5cf6;
  --cv-green: #22c55e;
  --cv-green-2: #4ade80;
}

/* =============================================================
   1. FONDOS FOTOGRÁFICOS POR SECCIÓN
   Cada sección con .cv-bg pinta su imagen en una capa ::before
   con un velo (scrim) que garantiza el contraste del texto y
   funde los bordes con el fondo global oscuro.
   ============================================================= */

body.index-page .cv-bg {
  position: relative;
  isolation: isolate;
}

body.index-page .cv-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--cv-scrim), var(--cv-fondo);
  background-size: cover, cover;
  background-position: center, var(--cv-pos, center);
  background-repeat: no-repeat, no-repeat;
  opacity: var(--cv-op, 1);
  pointer-events: none;
}

/* Velo por defecto: oscurece arriba y abajo para fundir secciones */
body.index-page .cv-bg {
  --cv-scrim: linear-gradient(180deg,
      rgba(5, 8, 28, .96) 0%,
      rgba(5, 8, 28, .68) 18%,
      rgba(5, 8, 28, .62) 82%,
      rgba(5, 8, 28, .96) 100%);
}

/* Velo reforzado para secciones con mucho texto sobre la imagen */
body.index-page .cv-bg--dense {
  --cv-scrim: linear-gradient(180deg,
      rgba(5, 8, 28, .97) 0%,
      rgba(5, 8, 28, .84) 20%,
      rgba(5, 8, 28, .80) 80%,
      rgba(5, 8, 28, .97) 100%);
}

/* --- Asignación de fondos (carpeta assets/img/fondos) --- */

/* Hero automotriz */
body.index-page #hero {
  --cv-fondo: url('../img/fondos/Fondo 01 - Hero automotriz (sin texto).webp');
}

/* Bloque institucional: ¿Qué es? / Objetivos / Pilares */
body.index-page #about {
  --cv-fondo: url('../img/fondos/Fondo 02 - Institucional puerto y globo (sin texto).webp');
  --cv-pos: center top;
}

body.index-page #objetivos,
body.index-page #pilares {
  --cv-fondo: url('../img/fondos/Fondo 02 - Institucional puerto y globo (sin texto).webp');
  --cv-pos: center bottom;
  --cv-op: .75;
}

/* Beneficios: robot + buque + red */
body.index-page #beneficios {
  --cv-fondo: url('../img/fondos/Fondo 03 - Beneficios robot buque y red (sin texto).webp');
}

/* Programas y resultados: misma familia industrial, encuadre invertido */
body.index-page #programas {
  --cv-fondo: url('../img/fondos/Fondo 03 - Beneficios robot buque y red (sin texto).webp');
  --cv-pos: center 30%;
}

body.index-page #programas::before {
  transform: scaleX(-1);
}

/* Ecosistema: auto wireframe */
body.index-page #ecosistema {
  --cv-fondo: url('../img/fondos/Fondo 05 - Ecosistema auto wireframe (sin texto).webp');
}

/* Alcance y vinculaciones: mapa mundial */
body.index-page #alcance,
body.index-page #vinculaciones,
body.index-page #incorporate {
  --cv-fondo: url('../img/fondos/Fondo 06 - Alcance y vinculaciones mapa mundial (sin texto).webp');
}

/* Convocatorias, eventos y destacados: abstracto */
body.index-page #convocatorias,
body.index-page #noticias {
  --cv-fondo: url('../img/fondos/Fondo 08 - Abstracto convocatorias y eventos (sin texto).webp');
}

body.index-page #noticias {
  --cv-pos: center 70%;
}

/* glass.css neutraliza el ::before de #about/#participa con
   `background: transparent !important`; aquí lo recuperamos para
   poder pintar el fondo fotográfico. */
body.index-page #about.dark-background.cv-bg::before,
body.index-page #participa.dark-background.cv-bg::before {
  background-image: var(--cv-scrim), var(--cv-fondo) !important;
  background-size: cover, cover !important;
  background-position: center, var(--cv-pos, center) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-color: transparent !important;
}

/* Hero: la imagen queda como base bajo el video (y como poster) */
body.index-page #hero.cv-bg::before {
  --cv-scrim: linear-gradient(180deg,
      rgba(5, 8, 28, .55) 0%,
      rgba(5, 8, 28, .45) 55%,
      rgba(5, 8, 28, .95) 100%);
  z-index: 0;
}

/* =============================================================
   2. TÍTULOS DE SECCIÓN ESTILO CANVA
   Se conserva el texto existente y su jerarquía semántica
   (h2 = antetítulo, p = título). Solo se reordena y reviste:
   el título grande a dos tonos arriba y el antetítulo debajo
   en versalitas, con la guía horizontal con punto del Canva.
   ============================================================= */

body.index-page .cv-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 34px;
}

/* Título grande (el <p> del markup original) */
body.index-page .cv-title p {
  order: 1;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem) !important;
  font-weight: 800 !important;
  line-height: 1.08;
  letter-spacing: -.015em !important;
  text-transform: uppercase;
  color: #fff !important;
  margin: 0 0 12px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .55);
}

body.index-page .cv-title .cv-accent {
  background: linear-gradient(100deg, var(--cv-cyan-2), var(--cv-blue-2) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--cv-cyan);
}

/* Antetítulo (el <h2> del markup original) */
body.index-page .cv-title h2 {
  order: 2;
  font-size: clamp(.7rem, 1.3vw, .86rem) !important;
  font-weight: 700 !important;
  letter-spacing: 2.8px !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72) !important;
  margin: 0;
}

/* Anula el subrayado heredado de glass.css */
body.index-page .cv-title h2::after {
  content: none !important;
}

body.index-page .cv-title .cv-rule { order: 3; }

/* Guías horizontales con punto, como en la propuesta */
body.index-page .cv-title .cv-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px auto 0;
  width: 100%;
  max-width: 380px;
}

body.index-page .cv-title .cv-rule span {
  height: 2px;
  flex: 1;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .95));
  box-shadow: 0 0 8px rgba(34, 211, 238, .45);
}

body.index-page .cv-title .cv-rule span:last-child {
  background: linear-gradient(90deg, rgba(34, 211, 238, .95), transparent);
}

body.index-page .cv-title .cv-rule i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cv-cyan);
  box-shadow: 0 0 12px 2px rgba(34, 211, 238, .8);
  flex-shrink: 0;
}

/* =============================================================
   3. TARJETAS CON BORDE NEÓN (paneles de la propuesta)
   ============================================================= */

body.index-page .cv-panel {
  position: relative;
  background: linear-gradient(160deg, rgba(9, 16, 48, .78), rgba(5, 8, 28, .72));
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1.5px solid rgba(59, 130, 246, .40);
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, .10),
    0 0 34px rgba(37, 99, 235, .22),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

body.index-page .cv-panel:hover {
  transform: translateY(-4px);
  border-color: rgba(103, 232, 249, .65);
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, .18),
    0 0 46px rgba(34, 211, 238, .32),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}

body.index-page .cv-panel--cyan {
  border-color: rgba(34, 211, 238, .45);
  box-shadow: 0 0 34px rgba(34, 211, 238, .20), inset 0 1px 0 rgba(255, 255, 255, .07);
}

body.index-page .cv-panel--green {
  border-color: rgba(34, 197, 94, .45);
  box-shadow: 0 0 34px rgba(34, 197, 94, .20), inset 0 1px 0 rgba(255, 255, 255, .07);
}

body.index-page .cv-panel--mag {
  border-color: rgba(214, 0, 110, .48);
  box-shadow: 0 0 34px rgba(214, 0, 110, .24), inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* Cabecera tipo "pestaña" de los paneles del Canva */
body.index-page .cv-panel__tab {
  position: absolute;
  top: -17px;
  left: 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 22px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(120deg, #0b1a4a, #123a7a);
  border: 1.5px solid rgba(96, 165, 250, .6);
  box-shadow: 0 0 22px rgba(37, 99, 235, .45);
  white-space: nowrap;
}

body.index-page .cv-panel--green .cv-panel__tab {
  background: linear-gradient(120deg, #06251b, #0a4a35);
  border-color: rgba(74, 222, 128, .6);
  box-shadow: 0 0 22px rgba(34, 197, 94, .40);
}

body.index-page .cv-panel--mag .cv-panel__tab {
  background: linear-gradient(120deg, #3a0224, #6d0a45);
  border-color: rgba(255, 79, 160, .6);
  box-shadow: 0 0 22px rgba(214, 0, 110, .40);
}

/* =============================================================
   4. BENEFICIOS — dos paneles neón como en la propuesta
   ============================================================= */

body.index-page #beneficios .cv-panel {
  padding: 38px 30px 30px;
  height: 100%;
}

body.index-page #beneficios .cv-benef-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

body.index-page #beneficios .cv-benef-head i {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  flex-shrink: 0;
  color: var(--cv-magenta-2);
  background: rgba(214, 0, 110, .14);
  border: 1px solid rgba(214, 0, 110, .35);
}

body.index-page #beneficios .cv-panel--cyan .cv-benef-head i {
  color: var(--cv-cyan-2);
  background: rgba(34, 211, 238, .12);
  border-color: rgba(34, 211, 238, .35);
}

body.index-page #beneficios .cv-benef-head h4 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--cv-magenta-2);
}

body.index-page #beneficios .cv-panel--cyan .cv-benef-head h4 {
  color: var(--cv-cyan-2);
}

body.index-page #beneficios .beneficio-check--cyan {
  background: rgba(34, 211, 238, .12) !important;
  border-color: rgba(34, 211, 238, .35) !important;
  color: var(--cv-cyan-2) !important;
}

/* =============================================================
   3a. BARRA DE NAVEGACIÓN
   El problema: el contenedor topaba en 1320px mientras logo (348)
   + menú (929) ya sumaban 1277, así que el botón "Regístrate aquí"
   se salía del contenedor y se partía en tres renglones.
   Solución: dar ancho real al header, impedir que el botón se
   parta o se encoja, y apretar un poco el menú.
   ============================================================= */

@media (min-width: 1200px) {

  /* El header usa el ancho de la ventana, no el tope de 1320px */
  body.index-page .header > .container-xl,
  body.index-page .header > .container-fluid {
    max-width: none;
    width: 100%;
    padding-left: clamp(16px, 2.2vw, 40px);
    padding-right: clamp(16px, 2.2vw, 40px);
    gap: 18px;
  }

  /* Orden explícito: el menú traía order:3 heredado y empujaba el
     botón entre el logo y los enlaces. */
  body.index-page .header .logo        { order: 1 !important; }
  body.index-page .header #navmenu     { order: 2 !important; }
  body.index-page .header .lang-toggle { order: 3 !important; }
  body.index-page .header .btn-getstarted { order: 4 !important; }

  /* El logo cede espacio antes que el menú */
  body.index-page .header .logo {
    flex: 0 1 auto;
    min-width: 0;
    margin-right: auto;
  }

  body.index-page .header .logo img {
    max-height: 84px !important;
    width: auto;
  }

  /* Menú: mismo aire, menos ancho */
  body.index-page .navmenu > ul {
    flex-wrap: nowrap;
  }

  body.index-page .navmenu > ul > li > a {
    padding: 18px clamp(8px, .78vw, 15px);
    font-size: clamp(13.5px, .82vw, 15.5px);
    white-space: nowrap;
  }

  /* Los dos botones nunca se parten ni se encogen */
  body.index-page .navmenu .nav-btn-contacto,
  body.index-page .header .btn-getstarted {
    white-space: nowrap;
    flex: 0 0 auto;
    line-height: 1.2;
  }

  body.index-page .header .btn-getstarted {
    padding: 10px clamp(14px, 1.2vw, 24px);
    font-size: clamp(13px, .8vw, 14px);
    margin-left: 4px;
  }
}

/* glass.css escondía "Regístrate aquí" entre 1200 y 1499px porque
   el menú no cabía. Con el header a ancho completo ya sobra sitio,
   así que se recupera: es la acción principal del sitio. */
@media (min-width: 1200px) and (max-width: 1499px) {
  body.index-page .btn-getstarted { display: inline-block !important; }
}

/* Entre 1200 y 1450 el menú es lo primero que aprieta */
@media (min-width: 1200px) and (max-width: 1450px) {
  body.index-page .header .logo img { max-height: 84px !important; }
  body.index-page .navmenu > ul > li > a {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 13.5px;
  }
  body.index-page .header .btn-getstarted {
    padding: 9px 16px;
    font-size: 12.5px;
  }
  body.index-page .navmenu .nav-btn-contacto {
    padding: 6px 14px !important;
    font-size: 12.5px !important;
  }
}

/* =============================================================
   3b. BARRA DE MÉTRICAS — iconos en cian
   ============================================================= */

body.index-page .g-metric i {
  color: var(--cv-cyan) !important;
  text-shadow: 0 0 14px rgba(34, 211, 238, .55);
}

/* =============================================================
   4. INVERSIÓN INTERNACIONAL — banderas en PNG
   Windows no renderiza los emoji de bandera, así que el listado
   usa imágenes; se les da un canto suave para que no floten
   sobre el vidrio como recortes planos.
   ============================================================= */

body.index-page .eco-pais__flag--img {
  width: 34px;
  height: 26px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

body.index-page .eco-pais__flag--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =============================================================
   4a. ALIANZAS ESTRATÉGICAS — logos de los aliados
   Los PNG de assets/img/logos vienen con fondo blanco opaco,
   así que van sobre una placa clara redondeada para que se
   integren con la tarjeta oscura en lugar de recortarse.
   ============================================================= */

body.index-page .progres-list--allies li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  line-height: 1.35;
}

/* Sin placa: los logos van directos sobre la tarjeta oscura.
   Los archivos ya están recortados a su contenido y con la tinta
   oscura aclarada, así que se leen sin necesidad de fondo. */
body.index-page .ally-logo {
  flex: 0 0 auto;
  width: 68px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

body.index-page .ally-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Aliado sin archivo de logo: recuadro discreto con icono */
body.index-page .ally-logo--empty {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(34, 211, 238, .35);
  border-radius: 8px;
  color: var(--cv-cyan-2);
  font-size: 17px;
}

body.index-page .ally-logo--empty img { display: none; }

@media (max-width: 575px) {
  body.index-page .ally-logo { width: 56px; height: 36px; }
}

/* =============================================================
   4b. OBJETIVOS — lista numerada vertical
   Deliberadamente distinta de la retícula de tarjetas de
   #pilares, que va justo debajo: aquí manda el numeral grande
   con un raíl vertical que encadena los tres objetivos.
   ============================================================= */

body.index-page .obj-list {
  max-width: 940px;
  margin: 0 auto;
  position: relative;
}

/* Raíl que conecta los numerales */
body.index-page .obj-list::before {
  content: '';
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 47px;
  width: 2px;
  background: linear-gradient(180deg,
      rgba(34, 211, 238, .55),
      rgba(59, 130, 246, .35) 55%,
      transparent);
}

body.index-page .obj-row {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 26px;
  padding: 24px 28px 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  transition: transform .35s var(--ease-glass, ease), border-color .35s ease;
}

body.index-page .obj-row:last-child { border-bottom: none; }

body.index-page .obj-row:hover { transform: translateX(6px); }

/* Numeral: aro con el número, sobre el raíl */
body.index-page .obj-row__num {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: 'Poppins', sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--cv-cyan-2) !important;
  background: radial-gradient(circle at 50% 40%, rgba(9, 26, 62, .95), rgba(5, 8, 28, .92));
  border: 2px solid rgba(34, 211, 238, .45) !important;
  box-shadow: 0 0 26px rgba(34, 211, 238, .22), inset 0 0 22px rgba(34, 211, 238, .10);
  transition: border-color .35s ease, box-shadow .35s ease, color .35s ease;
}

body.index-page .obj-row:hover .obj-row__num {
  color: #fff !important;
  border-color: rgba(103, 232, 249, .9) !important;
  box-shadow: 0 0 40px rgba(34, 211, 238, .45), inset 0 0 26px rgba(34, 211, 238, .18);
}

body.index-page .obj-row__body h4 {
  font-size: 1.22rem;
  font-weight: 800;
  color: #fff !important;
  letter-spacing: -.01em;
  margin: 0 0 8px;
}

body.index-page .obj-row__body p {
  font-size: .95rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, .70) !important;
  margin: 0;
  max-width: 62ch;
}

/* Icono de apoyo, discreto, al extremo derecho */
body.index-page .obj-row__icon {
  font-size: 30px;
  color: rgba(103, 232, 249, .38) !important;
  transition: color .35s ease, transform .35s ease;
}

body.index-page .obj-row:hover .obj-row__icon {
  color: var(--cv-cyan-2) !important;
  transform: scale(1.08);
}

@media (max-width: 767px) {
  body.index-page .obj-list::before { display: none; }

  body.index-page .obj-row {
    grid-template-columns: 62px 1fr;
    gap: 16px;
    padding: 20px 0;
  }

  body.index-page .obj-row__num {
    width: 62px;
    height: 62px;
    font-size: 1.25rem;
    align-self: start;
  }

  body.index-page .obj-row__icon { display: none; }

  body.index-page .obj-row:hover { transform: none; }
}

/* =============================================================
   5. TÍTULOS: SE RETIRA EL ROSA/MAGENTA
   Los encabezados pasan al cian→azul del Canva, que es el acento
   que ya usan los títulos de sección. El magenta se conserva
   fuera de los títulos (botones, badges, panel de proveedoras).
   ============================================================= */

/* Degradado de los titulares (hero, ¿qué es?, pilares).
   Se cambia solo la imagen de fondo: usar el atajo `background`
   con !important reseteaba `background-clip` a border-box y el
   degradado se pintaba como bloque sólido sobre el texto. */
body.index-page .hero-grad {
  background-image: linear-gradient(115deg, #67e8f9 0%, #22d3ee 34%, #3b82f6 70%, #93b4ff 100%) !important;
  background-size: 220% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent;
}

/* Titular de Vinculaciones */
body.index-page .vinc-gradient-text {
  background-image: linear-gradient(135deg, #22d3ee, #67e8f9 45%, #60a5fa) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent;
}

/* Antetítulos */
body.index-page .pilares-eyebrow {
  color: var(--cv-cyan-2) !important;
}

/* =============================================================
   6. AJUSTES FINOS
   ============================================================= */

/* En móvil las imágenes de fondo pesan menos y se oscurecen más */
@media (max-width: 767px) {
  body.index-page .cv-bg {
    --cv-scrim: linear-gradient(180deg,
        rgba(5, 8, 28, .97) 0%,
        rgba(5, 8, 28, .82) 22%,
        rgba(5, 8, 28, .80) 78%,
        rgba(5, 8, 28, .97) 100%);
  }

  body.index-page .cv-panel__tab {
    left: 18px;
    font-size: 11px;
    padding: 7px 16px;
  }

  body.index-page .cv-title { padding-bottom: 26px; }
}

/* =============================================================
   13. RENDIMIENTO
   Diagnóstico: 33 superficies con backdrop-filter sobre un fondo
   fijo que se anima sin parar (aurora + orbes + retícula). Cada
   fotograma obligaba a volver a desenfocar áreas de 300-680k px²,
   de forma continua aunque nadie tocara la página.

   Sobre un fondo oscuro y casi uniforme el desenfoque no aporta
   nada perceptible, así que se sustituye por un relleno oscuro
   translúcido. Se conserva solo donde el contenido realmente
   pasa por detrás: header pegajoso, modales, panel lateral y
   el menú desplegable.
   ============================================================= */

body.index-page .g-metrics__grid,
body.index-page .participa-card,
body.index-page .material-item,
body.index-page .tipo-empresa-card,
body.index-page .avance-item,
body.index-page .proceso-step .step-content,
body.index-page .faq .faq-item,
body.index-page .contact .info-item,
body.index-page .stats .stats-item,
body.index-page .convocatorias-card .card-icon,
body.index-page .material-item .material-icon,
body.index-page .tipo-icon-wrap,
body.index-page .beneficio-item .beneficio-check,
body.index-page .participa-card .btn-participa,
body.index-page .tabs .nav-tabs .nav-link,
body.index-page .hero-eyebrow,
body.index-page .g-btn--ghost,
body.index-page .hic-tag,
body.index-page .hic-icon-wrap,
body.index-page .vinc-badge,
body.index-page .vinc-country-chip,
body.index-page .vinc-cta-bar,
body.index-page .noticias-slide .ns-content::before,
body.index-page .jica-glass__shell,
body.index-page .jica-chip,
body.index-page .jica-pill,
body.index-page .jica-meta__item,
body.index-page .pdp-col,
body.index-page .pdp-col__title,
body.index-page .pdp-tier__icon,
body.index-page .pdp-hub-ring,
body.index-page .pdp-benefit,
body.index-page .contact .php-email-form,
body.index-page .contact .form-control,
body.index-page .cta-final .container,
body.index-page .cta-final .btn-cta-secondary,
body.index-page .part-panel,
body.index-page .alc-panel,
body.index-page .eco-card,
body.index-page .convoc-card,
body.index-page .cv-panel,
body.index-page .dest-card,
body.index-page .footer {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* Relleno que reemplaza al desenfoque en las superficies grandes.
   Va como background-color, así el degradado blanco de --glass-fill
   se sigue viendo encima y el canto de vidrio no cambia. */
body.index-page .g-metrics__grid,
body.index-page .participa-card,
body.index-page .faq .faq-item,
body.index-page .contact .info-item,
body.index-page .contact .php-email-form,
body.index-page .jica-glass__shell,
body.index-page .pdp-col,
body.index-page .part-panel,
body.index-page .alc-panel,
body.index-page .eco-card,
body.index-page .convoc-card,
body.index-page .footer {
  background-color: rgba(9, 15, 42, .62) !important;
}

body.index-page .cv-panel,
body.index-page .dest-card {
  background-color: rgba(7, 12, 34, .55) !important;
}

/* will-change reserva memoria de vídeo y crea una capa por elemento.
   Solo tiene sentido en lo que se anima de forma continua (las capas
   del fondo global); en el resto se retira. */
body.index-page .hero-info-card::after,
body.index-page .vinc-cta-bar::before,
body.index-page .vinc-country-chip,
body.index-page .convoc-card,
body.index-page .eco-card,
body.index-page .alc-panel,
body.index-page .pdp-col,
body.index-page .part-panel,
body.index-page .participa-card,
body.index-page .noticias-slide,
body.index-page .pilar,
body.index-page .cv-panel,
body.index-page .obj-row {
  will-change: auto !important;
}

/* Las secciones de abajo no se rasterizan hasta acercarse a la
   pantalla. La altura declarada evita que la barra de scroll salte. */
body.index-page #convocatorias,
body.index-page #jica,
body.index-page #noticias,
body.index-page #incorporate,
body.index-page #participa,
body.index-page #faq,
body.index-page #contact {
  content-visibility: auto;
}

/* Altura estimada de cada una, medida sobre el contenido real.
   Un valor genérico de 900px dejaba el documento 1584px más corto
   de la cuenta y el scroll saltaba al ir renderizando. La palabra
   clave `auto` hace que, tras el primer render, el navegador use
   la altura real y se autocorrija en otros anchos. */
body.index-page #convocatorias { contain-intrinsic-size: auto 1545px; }
body.index-page #jica          { contain-intrinsic-size: auto 849px; }
body.index-page #noticias      { contain-intrinsic-size: auto 1178px; }
body.index-page #incorporate   { contain-intrinsic-size: auto 1371px; }
body.index-page #participa     { contain-intrinsic-size: auto 1119px; }
body.index-page #faq           { contain-intrinsic-size: auto 724px; }
body.index-page #contact       { contain-intrinsic-size: auto 1097px; }

/* Estas tres traían el desenfoque con !important y, en el caso de
   Beneficios, con selector de ID, así que ganaban a las reglas de
   arriba. Se neutralizan con la misma o mayor especificidad. */
body.index-page #beneficios .col-lg-6 > div,
body.index-page #beneficios .cv-panel,
body.index-page .hero-info-card,
body.index-page .eco-summary {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

body.index-page .hero-info-card {
  background-color: rgba(9, 15, 42, .78) !important;
}

body.index-page .eco-summary {
  background-color: rgba(9, 15, 42, .62) !important;
}

/* 27 botones flotaban en bucle infinito, cada uno con su propia capa
   de composición y sin parar nunca. Se sigue el mismo criterio que
   glass.css ya aplicó a .vinc-country-chip: el movimiento ocurre al
   pasar el cursor, no de forma perpetua. */
body.index-page .g-btn,
body.index-page .hic-btn,
body.index-page .btn-getstarted,
body.index-page .navmenu .nav-btn-contacto {
  animation: none !important;
}

body.index-page .g-btn:hover,
body.index-page .hic-btn:hover {
  animation: g-float 3s ease-in-out infinite !important;
}

body.index-page .btn-getstarted:hover,
body.index-page .navmenu .nav-btn-contacto:hover {
  animation: g-float-soft 3.6s ease-in-out infinite !important;
}

/* =============================================================
   14. ANIMACIONES QUE REPINTAN
   Auditoría: de 47 animaciones infinitas, solo 4 fuerzan repintado
   en el hilo principal. El resto anima transform/opacity y va al
   compositor, que es prácticamente gratis. Se corrigen las caras.
   ============================================================= */

/* 1. chain-flow — la peor con diferencia.
   Animaba stroke-dashoffset sobre dos trazos SVG de 495k px² en
   #about: re-rasteriza el SVG completo en cada fotograma. Se deja
   la cadena dibujada, quieta. */
body.index-page .about-chain .chain-path {
  animation: none !important;
}

/* 2. g-grad-slide — anima background-position sobre texto recortado
   con background-clip:text, así que repinta el texto cada fotograma.
   Se conserva en el hero, que es donde se ve al entrar y da la
   identidad; se retira en las dos secciones interiores. */
body.index-page #about .hero-grad,
body.index-page .pilares-title .hero-grad {
  animation: none !important;
}

/* 3. Orbes de sección: 13 capas desenfocadas a 70-75px que suman
   1.69M px² y repiten el color que ya aporta la aurora global.
   Se quedan los 4 orbes globales, que son los del sistema. */
body.index-page .about-orb,
body.index-page .pilares-orb,
body.index-page .eco-orb,
body.index-page .alcance-orb,
body.index-page .convoc-orb,
body.index-page .part-orb {
  display: none !important;
}

/* =============================================================
   15. FICHA OEM — NISSAN MEXICANA (lámina 6 del Canva)
   Ya no es una sección aparte: se muestra dentro del panel
   deslizante del ecosistema al hacer clic en "OEM" (mismo panel
   que usan los niveles y los países), inyectada por
   assets/js/ecosistema.js. Por eso las reglas de aquí están
   pensadas para el ancho angosto de ese panel (~560px), en una
   sola columna, y no para una sección a todo lo ancho.
   ============================================================= */

body.index-page .oem-panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

body.index-page .oem-tagrow {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Pastilla con el corte diagonal de la propuesta */
body.index-page .oem-badge {
  display: inline-block;
  padding: 8px 34px 8px 22px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(120deg, #0b1a4a, #1d4ed8);
  border: 1px solid rgba(96, 165, 250, .55);
  box-shadow: 0 0 24px rgba(37, 99, 235, .45);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

body.index-page .oem-sep {
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, .28);
}

body.index-page .oem-full {
  font-size: clamp(.78rem, 1.2vw, 1rem);
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

/* --- Ficha de datos --- */

body.index-page .oem-datos { padding: 6px 22px; }

body.index-page .oem-dato {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

body.index-page .oem-dato:last-child { border-bottom: none; }

body.index-page .oem-dato__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--cv-cyan-2);
  background: rgba(9, 26, 62, .85);
  border: 1.5px solid rgba(34, 211, 238, .40);
  box-shadow: 0 0 18px rgba(34, 211, 238, .18);
}

body.index-page .oem-dato__label {
  display: block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--cv-blue-2);
  margin-bottom: 5px;
}

body.index-page .oem-dato__val {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .86) !important;
}

/* --- Foto de la planta --- */

body.index-page .oem-foto {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid rgba(96, 165, 250, .35);
  box-shadow: 0 0 34px rgba(37, 99, 235, .22);
  line-height: 0;
}

body.index-page .oem-foto img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Pilar + valores --- */

body.index-page .oem-pilar { padding: 22px; }

body.index-page .oem-pilar__title {
  display: block;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cv-blue-2);
  margin-bottom: 10px;
}

body.index-page .oem-pilar__text {
  font-size: .95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .82) !important;
  margin: 0 0 22px;
}

body.index-page .oem-valores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

body.index-page .oem-valor {
  text-align: center;
  padding: 0 6px;
}

body.index-page .oem-valor i {
  display: block;
  font-size: 26px;
  margin-bottom: 10px;
  color: var(--cv-cyan-2);
}

body.index-page .oem-valor span {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .8px;
  line-height: 1.35;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

/* --- Adaptable --- */

@media (max-width: 575px) {
  body.index-page .oem-datos { padding: 6px 14px; }
  body.index-page .oem-pilar { padding: 18px 14px; }
  body.index-page .oem-dato__icon { width: 40px; height: 40px; font-size: 17px; }
}

/* La ficha de OEM sustituye al listado filtrable: se oculta el
   buscador y el contador de empresas, que no aplican aquí. */
body.index-page .eco-panel--ficha .eco-panel__filter,
body.index-page .eco-panel--ficha .eco-panel__count {
  display: none;
}

/* =============================================================
   16. MAPA DE AGUASCALIENTES (sección ¿Qué es?)
   Sustituye a los cuatro recuadros de iconos, cuyo contenido ya
   estaba en Beneficios > Empresas compradoras internacionales.
   El contorno procede de geometría real del estado, no es un
   trazo aproximado.
   ============================================================= */

body.index-page .ags-map {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

body.index-page .ags-map__svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 34px rgba(34, 211, 238, .22));
}

body.index-page .ags-map__shape {
  fill: url(#agsFill);
  stroke: url(#agsStroke);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

/* Punto de la capital */
body.index-page .ags-map__dot {
  fill: #fff;
  stroke: var(--cv-cyan);
  stroke-width: 2.5;
}

body.index-page .ags-map__halo {
  fill: rgba(34, 211, 238, .30);
  transform-origin: center;
  animation: ags-pulse 3.2s ease-in-out infinite;
}

@keyframes ags-pulse {
  0%, 100% { transform: scale(.7); opacity: .75; }
  50%      { transform: scale(1.25); opacity: .15; }
}

body.index-page .ags-map__label {
  fill: rgba(255, 255, 255, .88);
  font-family: 'Poppins', sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .4px;
}

/* Pie */
body.index-page .ags-map__caption {
  max-width: 420px;
  text-align: center;
  font-size: .92rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .70);
}

body.index-page .ags-map__eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--cv-cyan-2);
  margin-bottom: 8px;
}

@media (max-width: 767px) {
  body.index-page .ags-map__svg { max-width: 300px; }
  body.index-page .ags-map__label { font-size: 22px; }
}

/* =============================================================
   17. LOGOS EN PLACA OSCURA (tarjeta de convocatoria y sección JICA)
   .convoc-logo y .jica-chip fuerzan placa blanca + mix-blend-mode:
   multiply, pensado para logos con fondo blanco opaco. Con el
   fondo ya quitado de los archivos esto ya no hace falta, y para
   SEDECYT (tinta blanca) directamente rompía el logo. Se unifica
   todo a placa oscura, sin blend, igual que en la lista de aliados.
   ============================================================= */

body.index-page .convoc-logo,
body.index-page .jica-chip:has(img) {
  background: linear-gradient(160deg, rgba(15, 23, 58, .95), rgba(6, 10, 30, .95)) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: #fff;
}

body.index-page .convoc-logo img,
body.index-page .jica-chip img,
body.index-page #convocatorias img[alt="JICA"] {
  mix-blend-mode: normal !important;
}

body.index-page #convocatorias img[alt="JICA"] {
  background: transparent !important;
}

/* =============================================================
   18. FRASE DE CIERRE DE BENEFICIOS — centrada
   ============================================================= */

body.index-page .benef-claim {
  justify-content: center;
  text-align: center;
}

/* =============================================================
   19. CONTROLES DE CIERRE DE MODALES Y PANELES
   Problemas detectados en la auditoría a 375px y 768px:
   · Los botones "✕" medían 36x36 y los de texto 40px de alto,
     por debajo del mínimo táctil recomendado de 44x44.
   · En los tres modales el "✕" se iba con el scroll: el de la
     convocatoria JICA quedaba a ~7800px por encima del usuario,
     obligando a volver hasta arriba para cerrar.
   El anclaje se aplica en todos los anchos, no solo en móvil:
   el modal es igual de largo en escritorio.
   ============================================================= */

/* El backdrop-filter del modal y de su tarjeta interior los
   convierte en bloque contenedor de los descendientes 'fixed',
   lo que hacía que el botón se desplazara con el scroll en vez de
   quedarse anclado a la pantalla. La tarjeta tiene fondo blanco
   opaco, así que ese desenfoque nunca se vio: solo estorbaba. */
body.index-page #modalJICA,
body.index-page #modalOportunidad,
body.index-page #modalNoticia,
body.index-page #modalJICA .modal-inner,
body.index-page #modalOportunidad .op-inner,
body.index-page #modalNoticia .mn-inner {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

body.index-page #modalJICA,
body.index-page #modalOportunidad,
body.index-page #modalNoticia {
  background: rgba(0, 0, 0, .82) !important;
}

/* Botón de cerrar anclado a la pantalla mientras el modal esté
   abierto, no al inicio del contenido. */
body.index-page #modalJICA .modal-close,
body.index-page #modalOportunidad .modal-close,
body.index-page #modalNoticia .mn-close {
  position: fixed !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  width: 46px !important;
  height: 46px !important;
  font-size: 21px !important;
  z-index: 20 !important;
  background: rgba(8, 12, 36, .88) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .30) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55) !important;
}

/* Área táctil mínima */
body.index-page .eco-panel__close,
body.index-page .modal-close,
body.index-page .mn-close {
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 767px) {
  /* Botones de texto tipo "Cerrar" / "Cancelar" */
  body.index-page .mn-btn-close,
  body.index-page #modalJICA .modal-footer button,
  body.index-page #modalOportunidad .op-footer button {
    min-height: 46px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Cierre del panel lateral del ecosistema */
  body.index-page .eco-panel__close {
    width: 46px !important;
    height: 46px !important;
    font-size: 30px !important;
  }
}

/* =============================================================
   20. MENÚ MÓVIL — el desplegable se quedaba en una franja
   El #header lleva backdrop-filter para el efecto de vidrio, y eso
   lo convierte en bloque contenedor de sus descendientes 'fixed'.
   Resultado: el `position:fixed; inset:0` del menú se resolvía
   contra el header (375x97) en vez de la pantalla, dejando la
   lista reducida a ~22px de alto en lugar de ocupar todo.
   Mientras el menú está abierto se retira ese desenfoque para que
   el menú vuelva a anclarse al viewport.
   ============================================================= */

body.index-page.mobile-nav-active .header {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* El área táctil del botón hamburguesa era de 28x34 */
body.index-page .mobile-nav-toggle {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pastilla de "Contacto" dentro del menú desplegado */
@media (max-width: 1199px) {
  body.index-page .navmenu .nav-btn-contacto {
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 10px 20px 4px !important;
  }
}

/* =============================================================
   21. ACCESOS DE REGISTRO EN EL HERO
   Van en la franja superior del hero, justo debajo del menú:
   Comprador (azul) y Proveedor (verde), con el mismo código de
   color que el sitio usa para esos perfiles en "Incorpórate".
   ============================================================= */

body.index-page .hero-ctas {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 38px;
  padding-right: clamp(0px, 4vw, 60px);
}

@media (max-width: 767px) {
  body.index-page .hero-ctas {
    justify-content: center;
    padding-right: 0;
  }
}

body.index-page .hero-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 11px 20px 11px 13px;
  border-radius: 999px;
  text-decoration: none !important;
  line-height: 1.15;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .34);
  transition: transform .3s var(--ease-glass, ease), box-shadow .3s ease, filter .3s ease;
}

body.index-page .hero-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: 18px;
  color: #fff;
  background: rgba(255, 255, 255, .20);
  border: 1px solid rgba(255, 255, 255, .32);
}

body.index-page .hero-cta__txt {
  display: flex;
  flex-direction: column;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .2px;
}

body.index-page .hero-cta__txt small {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  opacity: .86;
  margin-bottom: 1px;
}

body.index-page .hero-cta__go {
  font-size: 24px;
  color: #fff;
  margin-left: -3px;
  transition: transform .3s var(--ease-glass, ease);
}

body.index-page .hero-cta--comp {
  background: linear-gradient(120deg, #1d4ed8, #3b82f6 55%, #22d3ee);
  box-shadow: 0 8px 26px rgba(37, 99, 235, .48);
}

body.index-page .hero-cta--prov {
  background: linear-gradient(120deg, #15803d, #22c55e 55%, #4ade80);
  box-shadow: 0 8px 26px rgba(34, 197, 94, .45);
}

body.index-page .hero-cta:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
}

body.index-page .hero-cta--comp:hover { box-shadow: 0 14px 38px rgba(37, 99, 235, .68); }
body.index-page .hero-cta--prov:hover { box-shadow: 0 14px 38px rgba(34, 197, 94, .65); }
body.index-page .hero-cta:hover .hero-cta__go { transform: translateX(4px); }

/* Botón único de registro: reemplaza a los dos botones separados
   de comprador/proveedor con uno solo que va al mismo destino que
   "Regístrate aquí" del header, así que usa el mismo magenta de
   marca en vez de los colores azul/verde que distinguían perfiles. */
body.index-page .hero-ctas--unico { justify-content: center; }

body.index-page .hero-cta--unico {
  white-space: normal;
  max-width: 460px;
  background: linear-gradient(120deg, #D6006E, #ff4fa0 60%, #ff8fc4);
  box-shadow: 0 8px 26px rgba(214, 0, 110, .48);
}
body.index-page .hero-cta--unico:hover { box-shadow: 0 14px 38px rgba(214, 0, 110, .68); }
body.index-page .hero-cta--unico .hero-cta__txt { font-size: 14px; line-height: 1.3; }

@media (max-width: 767px) {
  body.index-page .hero-cta--unico { max-width: 100%; }
}

/* Destello al pasar el cursor. Solo en hover: sin animaciones
   perpetuas, que fue lo que ralentizaba la página. */
body.index-page .hero-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .40), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}

body.index-page .hero-cta:hover::after {
  animation: hero-cta-brillo .75s ease forwards;
}

@keyframes hero-cta-brillo {
  from { left: -60%; opacity: 1; }
  to   { left: 115%; opacity: 0; }
}

@media (max-width: 767px) {
  body.index-page .hero-ctas {
    gap: 10px;
    margin-bottom: 26px;
  }
  body.index-page .hero-cta {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    padding: 9px 12px;
    gap: 9px;
  }
  body.index-page .hero-cta__txt {
    font-size: 12.5px;
    white-space: normal;
  }
  body.index-page .hero-cta__txt small { font-size: 9px; letter-spacing: .8px; }
  body.index-page .hero-cta__go { display: none; }
}

@media (max-width: 420px) {
  body.index-page .hero-cta__icon { width: 30px; height: 30px; font-size: 15px; }
  body.index-page .hero-cta__txt { font-size: 11.5px; }
}

/* =============================================================
   22. VISTA PREVIA DE EVENTOS EN EL CARRUSEL DEL HERO
   Nueva diapositiva con una captura real de la sección Eventos,
   a todo el recuadro como la de Alemania, pero como enlace directo
   a #noticias en vez de abrir un modal.
   ============================================================= */

body.index-page a.hic-preview {
  position: relative;
  display: block;
  text-decoration: none !important;
  border-radius: var(--r-xl, 30px) !important;
  cursor: pointer;
  background: #05081c;
}

/* La captura es una pantalla completa (1312x658, muy panorámica)
   dentro de un recuadro casi cuadrado: con "cover" se recortaban
   los bordes y se perdía texto (títulos y tarjetas cortados).
   Con "contain" se ve completa, con una franja del fondo oscuro
   del sitio arriba/abajo en vez de recortar contenido. */
body.index-page .hic-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--r-xl, 30px);
  display: block;
  transition: transform .5s var(--ease-glass, ease);
}

body.index-page a.hic-preview:hover img {
  transform: scale(1.04);
}

/* El video trae texto y gráficos superpuestos (preguntas, subtítulos,
   logos, el banner "Gobierno del Estado de Aguascalientes"), no es
   solo cámara: con "cover" se recortaban esos textos por los bordes,
   igual que pasó antes con la captura de Eventos. Con "contain" se
   ve completo, con el fondo oscuro del sitio rellenando los lados. */
body.index-page .hic-preview__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--r-xl, 30px);
  display: block;
  transition: transform .5s var(--ease-glass, ease);
  background: #05081c;
}

body.index-page a.hic-preview:hover .hic-preview__video {
  transform: scale(1.04);
}

body.index-page .hic-preview__caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 34px 20px 16px;
  border-radius: 0 0 var(--r-xl, 30px) var(--r-xl, 30px);
  background: linear-gradient(0deg, rgba(5, 8, 28, .92) 0%, rgba(5, 8, 28, .55) 60%, transparent 100%);
}

body.index-page .hic-preview__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}

body.index-page .hic-preview__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #D6006E;
  color: #fff;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .3s ease, transform .3s ease;
}

body.index-page a.hic-preview:hover .hic-preview__cta {
  background: #E8338A;
  transform: translateX(2px);
}

@media (max-width: 480px) {
  body.index-page .hic-preview__caption {
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 16px 14px;
  }
}

/* =============================================================
   23. BOTÓN DE TRADUCCIÓN (Google Translate)
   El widget de Google trae su propia barra superior, un tooltip
   ámbar feísimo y sombras raras en los textos traducidos; todo
   eso se oculta y se sustituye por un botón EN/ES propio en el
   header, del mismo estilo que el resto de los controles.
   ============================================================= */

/* Oculta la barra superior de Google y el hueco que empuja el body.
   Esta barra es notoriamente inestable de tapar solo con CSS —
   a veces Google la reinserta o la reposiciona después de cargar,
   por eso además hay un MutationObserver de respaldo en el <script>
   del final del documento que la oculta apenas aparece. */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
body > .skiptranslate:first-child {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
}
html, body,
body.index-page,
body.index-page.index-page {
  top: 0 !important;
  position: static !important;
}

/* Tooltip ámbar que Google pone sobre el texto traducido al pasar
   el cursor, y el resaltado de fondo del texto activo */
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }

/* El combo real de Google queda invisible: solo lo usamos por script */
#google_translate_element {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* --- Botón propio --- */

body.index-page .lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 14px;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .30);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .4px;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

body.index-page .lang-toggle:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .5);
  transform: translateY(-1px);
}

body.index-page .lang-toggle.is-active {
  background: linear-gradient(120deg, #1d4ed8, #22d3ee);
  border-color: rgba(255, 255, 255, .5);
}

body.index-page .lang-toggle__icon {
  display: flex;
  font-size: 15px;
  line-height: 1;
}

@media (max-width: 1199px) {
  body.index-page .lang-toggle {
    margin-left: 8px;
    padding: 7px 13px;
  }
}

@media (max-width: 480px) {
  body.index-page .lang-toggle__txt { display: none; }
  body.index-page .lang-toggle {
    padding: 8px 10px;
    margin-left: 6px;
  }
}

/* =============================================================
   24. "PROGRAMAS DE FORMACIÓN" — lista más grande
   Con solo 4 renglones cortos, la tarjeta se veía casi vacía en
   comparación con "Alianzas estratégicas" (5 filas con logo) o las
   cifras grandes de las otras dos. Se agranda el ícono a una
   insignia circular, se sube el tamaño de letra y se reparte el
   espacio disponible para que ocupe el mismo alto visual.
   ============================================================= */

body.index-page .progres-list--formacion {
  flex: 1;
  justify-content: space-evenly;
  gap: 4px;
}

body.index-page .progres-list--formacion li {
  align-items: center;
  gap: 14px;
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff;
}

body.index-page .progres-list--formacion i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  margin-top: 0;
  border-radius: 50%;
  font-size: 17px;
  color: var(--cv-magenta-2);
  background: rgba(214, 0, 110, .14);
  border: 1px solid rgba(214, 0, 110, .35);
}

@media (max-width: 575px) {
  body.index-page .progres-list--formacion li { font-size: .95rem; }
  body.index-page .progres-list--formacion i { width: 30px; height: 30px; font-size: 15px; }
}