/* ============================================================================
   GEW 2026 · República Dominicana — enlata.do/gew
   Línea gráfica IAvanza. Página autónoma: no hereda nada del CSS de enlata.do.

   Orden del archivo:
     1. Tokens        6. Secciones      11. Comunidad
     2. Reset/base    7. Tarjetas       12. Preguntas
     3. Tipografía    8. Tablas         13. Pie
     4. Cabecera      9. Calendario     14. Barra fija móvil
     5. Hero         10. Aliados        15. Responsive / movimiento reducido
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────
   Los azules NO son decorativos: están elegidos por contraste medido.
   #0572DD (el azul de marca) solo da 4.71:1 contra blanco — pasa AA para texto
   grande pero NO para texto normal. Por eso los fondos y textos pequeños usan
   #0458AC (7:1) y el azul de marca queda para el hero, botones y acentos.  */
:root {
  --ia:          #0572DD;   /* azul principal IAvanza */
  --ia-700:      #0458AC;   /* 7:1 sobre blanco — texto pequeño y fondos amplios */
  --ia-900:      #06346A;
  --ia-950:      #041F41;
  --ink:         #1A1D21;   /* texto principal: 15.8:1 sobre blanco */
  --ink-2:       #353535;   /* «ink» de la marca IAvanza */
  --muted:       #5A6472;   /* 6.00:1 sobre blanco */
  --mist:        #F1F7FE;
  --line:        #D6E6F9;
  --safety:      #00BBDA;   /* división SAFETY: solo como acento gráfico */
  --safety-lt:   #8FE3F2;   /* aclarado a 4.82:1 para TEXTO sobre azul medio */
  --ok:          #147A32;   /* FINANCE oscurecido a 5.44:1 para texto */
  /* Ámbar de urgencia. El #B45309 de antes daba 4.73:1 sobre --amber-bg: pasaba
     AA por 0.23 de margen. Este da 5.50:1 y se ve igual de cálido. */
  --amber:       #A34C08;   /* 5.50:1 sobre --amber-bg, 5.84:1 sobre blanco */
  --amber-bg:    #FFF7ED;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texto:   "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radio:   14px;
  --sombra:  0 1px 2px rgba(6, 52, 106, .06), 0 8px 24px -8px rgba(6, 52, 106, .14);
  --sombra-alta: 0 2px 4px rgba(6, 52, 106, .08), 0 20px 48px -12px rgba(6, 52, 106, .22);
  --ease:    cubic-bezier(.4, 0, .2, 1);

  --cabecera: 62px;         /* alto de la cabecera fija — lo usa scroll-margin */
  --ancho:    1180px;

  /* ── Espectro oficial de la GEW ──────────────────────────────────────────
     Los 31 colores del anillo del logotipo, EN EL ORDEN EN QUE APARECEN
     alrededor del círculo. No están elegidos a ojo ni copiados de una guía:
     se muestrearon del vector oficial (GEW2026_logos_y_fotos/gew-ring.png)
     recorriendo la circunferencia grado a grado y cortando donde el color
     cambia. Si algún día hay que rehacerlo, ese es el método.

     Va con paradas duras (cada color ocupa su tramo y no se funde con el
     siguiente): un degradado suave convertiría el espectro en un arcoíris
     genérico y perdería lo que lo hace reconocible como la GEW. */
  --gew-espectro:
    #8E81B4 0%     3.23%,  #FACACC 3.23%  6.45%,  #95D8E7 6.45%  9.68%,
    #A8016F 9.68%  12.9%,  #B1C0C9 12.9%  16.13%, #039CC9 16.13% 19.35%,
    #4997AD 19.35% 22.58%, #E2E3E4 22.58% 25.81%, #F5EB2A 25.81% 29.03%,
    #D5DF24 29.03% 32.26%, #F6EC29 32.26% 35.48%, #E2E3E2 35.48% 38.71%,
    #78411A 38.71% 41.94%, #562F0C 41.94% 45.16%, #8EA3AE 45.16% 48.39%,
    #C61D23 48.39% 51.61%, #ED6A56 51.61% 54.84%, #CF6636 54.84% 58.06%,
    #D1BD26 58.06% 61.29%, #ED2924 61.29% 64.52%, #F8E1AF 64.52% 67.74%,
    #F99D1C 67.74% 70.97%, #D7861D 70.97% 74.19%, #EE2924 74.19% 77.42%,
    #F89C1C 77.42% 80.65%, #D8861C 80.65% 83.87%, #F5C7A2 83.87% 87.1%,
    #F6A2B7 87.1%  90.32%, #F8BAC8 90.32% 93.55%, #5772B6 93.55% 96.77%,
    #8599CE 96.77% 100%;
}

/* Franja del espectro. Es el único elemento de la línea gráfica de la GEW que
   se repite por toda la página: separa bloques y firma cada sección sin robarle
   protagonismo al azul de IAvanza.
   aria-hidden en el HTML — es decoración pura, no información. */
.espectro { height: 5px; background: linear-gradient(90deg, var(--gew-espectro)); }
.espectro--fino { height: 3px; }

/* ── 2. Reset y base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Con cabecera fija, el destino de un ancla queda debajo de ella. Van los dos:
     scroll-padding en el contenedor de scroll y scroll-margin en los destinos,
     porque el primero no aplica cuando el salto lo hace .focus() desde el JS. */
  scroll-padding-top: calc(var(--cabecera) + 16px);
}

body {
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;   /* red de seguridad: nada debe desbordar de todos modos */
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--ia-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ia-900); }

ul, ol { padding: 0; list-style: none; }

/* Foco visible. El mínimo para AA es §2.4.7 (que exista); §2.4.13 «Focus
   Appearance», que fija grosor y contraste, es AAA — esto lo cumple, pero no
   es obligación de conformidad AA.
   Anillo doble: el blanco interior garantiza contraste sobre fondos azules y
   oscuros, el azul exterior sobre fondos claros. Así un solo estilo funciona
   en toda la página sin excepciones por sección.
   El `outline` va SIEMPRE además del `box-shadow`: el modo de alto contraste
   de Windows suprime las sombras y dejaría el foco invisible. */
:focus-visible {
  outline: 3px solid var(--ia);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 2px #fff;
}
.s--blue :focus-visible,
.s--dark :focus-visible,
.gew-hero :focus-visible,
.site-footer :focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 2px var(--ia-950);
}

/* WCAG 2.2 §2.4.11 «Focus Not Obscured»: con cabecera fija, un ancla deja el
   elemento enfocado debajo de ella. El margen de scroll lo empuja hacia abajo. */
:target, section[id], .gew-ancla { scroll-margin-top: calc(var(--cabecera) + 16px); }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }

/* Solo para lectores de pantalla */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Salto al contenido — aparece al tabular */
.saltar {
  position: absolute; top: -100px; left: 12px; z-index: 200;
  background: var(--ia-950); color: #fff;
  padding: 12px 20px; border-radius: 0 0 10px 10px;
  font-weight: 600; text-decoration: none;
  transition: top .18s var(--ease);
}
.saltar:focus { top: 0; color: #fff; }

/* ── 3. Tipografía ─────────────────────────────────────────────────────────
   Archivo viene con LOS DOS ejes ya fijados dentro del propio .woff2: ancho
   SemiExpanded (wdth 112.5, el del logotipo IAvanza) y peso 800, el único que
   usa la página. Por eso aquí no hace falta `font-stretch` —que algunos
   navegadores manejan mal en fuentes variables— y el archivo pesa 14 KB en vez
   de 88 KB. Si algún día hace falta otro grosor, hay que regenerarlo con
   fuentes/build_fonts.py; NO basta con pedir otro font-weight aquí. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-semiexp-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-400-latin.woff2") format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-600-latin.woff2") format("woff2");
  font-weight: 600; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* Métricas del respaldo ajustadas a Poppins: mientras la fuente real carga, el
   texto ocupa casi el mismo alto, así el swap no mueve el layout (CLS ≈ 0). */
@font-face {
  font-family: "Poppins-respaldo";
  src: local("Helvetica Neue"), local("Arial");
  ascent-override: 105%; descent-override: 35%; line-gap-override: 0%;
  size-adjust: 96%;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.015em;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: manual;        /* en mayúsculas grandes, la partición automática es horrible */
}

h1 { font-size: clamp(2.25rem, 6.4vw, 4.4rem); line-height: .97; letter-spacing: -.025em; }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.85rem); }
/* h3 y h4 comparten aspecto a propósito. En la sección de «qué incluye», el
   rótulo del grupo es un h3 y los títulos de las tarjetas cuelgan de él como h4:
   la jerarquía es real para el lector de pantalla y visualmente no cambia nada. */
h3, h4 {
  font-family: var(--texto);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

p { text-wrap: pretty; }
strong, b { font-weight: 600; }

.rotulo {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--texto);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ia-700);
  margin-bottom: .7em;
}
/* Guion del espectro delante de cada rótulo de sección. Es lo que hace que la
   línea gráfica de la GEW se sienta en toda la página y no solo en el logo. */
.rotulo::before {
  content: ""; flex: 0 0 auto;
  width: 30px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gew-espectro));
}
.entrada { font-size: clamp(1.02rem, 1.7vw, 1.22rem); color: var(--muted); line-height: 1.6; }
.mini    { font-size: .87rem; color: var(--muted); }
.cifra   { font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: -.02em; }

/* ── Botones ───────────────────────────────────────────────────────────────
   Alto mínimo 48px: cumple de sobra WCAG 2.2 §2.5.8 (24×24 px) y el objetivo
   táctil cómodo de 44px de las guías de Apple y Google. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 12px 26px;
  font-family: var(--texto); font-weight: 600; font-size: .97rem;
  border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--g { min-height: 56px; padding: 15px 34px; font-size: 1.04rem; }

.btn--azul  { background: var(--ia); color: #fff; }
.btn--azul:hover { background: var(--ia-700); color: #fff; }
.btn--linea { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn--linea:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.btn--marco { background: #fff; color: var(--ia-700); border-color: var(--line); }
.btn--marco:hover { border-color: var(--ia); color: var(--ia-700); }
.btn--blanco { background: #fff; color: var(--ia-700); }
.btn--blanco:hover { background: var(--mist); color: var(--ia-900); }

.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ── 4. Cabecera ───────────────────────────────────────────────────────────
   Fija, compacta y de un solo nivel: la página tiene UN objetivo, así que la
   navegación no compite con la llamada a la acción. */
.cabecera {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--cabecera);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.cabecera.pegada { border-bottom-color: var(--line); box-shadow: 0 2px 14px rgba(6, 52, 106, .07); }
.cabecera__in {
  height: 100%; display: flex; align-items: center; gap: 20px;
  max-width: var(--ancho); margin: 0 auto; padding: 0 20px;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.marca img { height: 30px; width: auto; }
.marca__txt {
  font-family: var(--display); font-weight: 800; font-size: .95rem;
  letter-spacing: -.01em; color: var(--ia-950); text-transform: uppercase; line-height: 1.05;
}
.marca__txt small {
  display: block; font-family: var(--texto); font-weight: 500;
  font-size: .63rem; letter-spacing: .1em; color: var(--muted);
}
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
/* El :not(.btn) es obligatorio. Sin él, `.nav a` (0,1,1) le gana en
   especificidad a `.btn--azul` (0,1,0) y el botón de la cabecera se queda con
   el texto gris oscuro sobre fondo azul: 2.6:1, muy por debajo de AA. */
.nav a:not(.btn) {
  font-size: .89rem; font-weight: 500; color: var(--ink-2);
  text-decoration: none; padding: 9px 12px; border-radius: 8px;
  white-space: nowrap; transition: background .18s var(--ease), color .18s var(--ease);
}
.nav a:not(.btn):hover { background: var(--mist); color: var(--ia-700); }
.nav .btn { margin-left: 8px; min-height: 42px; padding: 9px 20px; font-size: .9rem; }

/* ── 5. Hero ───────────────────────────────────────────────────────────────
   La foto va como <img> absoluto, NO como background-image: así el escáner de
   precarga del navegador la descubre en el HTML y la pide de inmediato. Es el
   elemento LCP de la página y ese detalle vale medio segundo. */
.gew-hero {
  position: relative;
  background: var(--ia-950);
  overflow: hidden;
  isolation: isolate;
}
.gew-hero__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 32%;
  z-index: -2;
}
/* El velo. Más opaco a la izquierda, donde vive el texto, y más transparente a
   la derecha, para que la foto respire. Medido: el texto blanco sobre la zona
   más clara del velo da 8.9:1. */
.gew-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(4, 31, 65, .95) 0%, rgba(4, 31, 65, .88) 38%,
                            rgba(5, 52, 106, .74) 66%, rgba(5, 114, 221, .58) 100%),
    radial-gradient(1000px 620px at 88% 8%, rgba(0, 187, 218, .28), transparent 64%);
}
.gew-hero__anillo {
  position: absolute; top: -70px; right: -60px; width: min(38vw, 360px);
  opacity: .13; z-index: -1; filter: brightness(0) invert(1);
  pointer-events: none;
}
/* padding-block y NO el atajo `padding`: este elemento lleva también
   .contenedor, y el atajo le pondría el padding horizontal en 0 — en móvil el
   texto quedaría pegado al borde de la pantalla. */
/* El respiro superior está calibrado, no elegido a ojo: con 104px el botón
   principal terminaba 12px POR DEBAJO del pliegue en una pantalla de 1280×800,
   que es la más común en escritorio. Con 78px queda dentro con margen. */
.gew-hero__in {
  position: relative;
  padding-block: clamp(44px, 6.5vw, 78px) clamp(40px, 5.5vw, 76px);
  max-width: 900px;
}
.gew-hero h1 { color: #fff; margin-bottom: .38em; }
.gew-hero .entrada { color: rgba(255, 255, 255, .93); max-width: 660px; }
.gew-hero .entrada strong { color: #fff; }

/* El rótulo vive DENTRO del h1, así que hay que deshacerle todo lo que el h1
   le impone: mayúsculas, tracking negativo, interlineado de titular y la
   familia display. Si no, la pastilla sale gritada y apretada. */
.ojo {
  display: inline-flex; align-items: center; gap: 11px; flex-wrap: nowrap;
  background: rgba(4, 31, 65, .34);
  border: 1px solid rgba(255, 255, 255, .34);
  padding: 8px 18px 8px 10px; border-radius: 999px;
  margin-bottom: 22px;
  font-family: var(--texto); font-size: .84rem; font-weight: 600;
  line-height: 1.4; letter-spacing: 0; text-transform: none; color: #fff;
}
.ojo img { height: 22px; width: auto; filter: brightness(0) invert(1); flex: 0 0 auto; }
.h1-linea { display: block; }

.confianza {
  margin-top: 24px; font-size: .87rem; color: rgba(255, 255, 255, .82);
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.confianza span { display: inline-flex; align-items: center; gap: 7px; }
.confianza span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--safety-lt); flex: 0 0 auto;
}

/* ── Franja de fechas ──────────────────────────────────────────────────────
   Va pegada bajo el hero, sin separación: es la continuación del titular. */
.franja { background: var(--ia-950); border-top: 1px solid rgba(255, 255, 255, .13); }
.franja__fila {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(255, 255, 255, .13);
}
.franja__c { background: var(--ia-950); padding: 20px 16px; text-align: center; }
.franja__v { font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 2.1vw, 1.42rem); color: #fff; letter-spacing: -.01em; }
.franja__k { font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--safety-lt); margin-top: 5px; }
.franja__c--alerta .franja__v { color: #FFD9A8; }
.franja__c--alerta .franja__k { color: #FFD9A8; }

/* ── Aviso de fecha límite ─────────────────────────────────────────────────
   Ámbar, no rojo: comunica urgencia sin parecer una alerta de error ni un
   anuncio de descuento. Cuenta los días con JS; si el JS no corre, el texto
   base sigue siendo verdadero. */
.limite {
  /* La cabecera es `fixed`, o sea que está fuera del flujo: sin este margen la
     franja se dibujaría DEBAJO de ella y solo se vería una banda en blanco.
     El margen va aquí, en el primer elemento del flujo, y NO en el hero. */
  margin-top: var(--cabecera);
  background: var(--amber-bg); border-bottom: 1px solid #FDE4C8;
  padding: 11px 0; font-size: .9rem; color: #7C3D07;
}
.limite__in { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; }
.limite b { color: var(--amber); font-weight: 600; }
.limite a { color: #7C3D07; font-weight: 600; }

/* ── 6. Secciones ──────────────────────────────────────────────────────────
   Un solo tamaño de respiro vertical para todas: el ritmo constante es lo que
   hace que una página larga se lea como una sola pieza. */
.s { padding: clamp(58px, 8vw, 104px) 0; }
.s--mist { background: var(--mist); }
.s--blue { background: linear-gradient(160deg, var(--ia-700) 0%, var(--ia-900) 100%); color: #fff; }
.s--dark { background: var(--ia-950); color: #fff; }
.s--blue h2, .s--dark h2 { color: #fff; }
.s--blue .entrada, .s--dark .entrada { color: rgba(255, 255, 255, .92); }
.s--blue .rotulo, .s--dark .rotulo { color: var(--safety-lt); }
.s--blue a:not(.btn), .s--dark a:not(.btn) { color: var(--safety-lt); }

.encabezado { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.encabezado h2 { margin-bottom: .45em; }
.centrado { text-align: center; }
.centrado .encabezado { margin-left: auto; margin-right: auto; }

/* ── 7. Rejilla de tarjetas ────────────────────────────────────────────────
   auto-fit + minmax en vez de puntos de corte fijos: la rejilla se reacomoda
   sola y no hace falta una media query por cada número de columnas. */
.rej { display: grid; gap: 18px; }
.rej--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rej--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.rej--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* auto-fit reacomoda solo, pero en pantalla ancha mete CUATRO columnas de 268px
   y las secciones de seis tarjetas quedaban 4+2, que se ve desbalanceado.
   A partir de 1000px se fija a tres y quedan 3+3. */
@media (min-width: 1000px) {
  .rej--3 { grid-template-columns: repeat(3, 1fr); }
}

.tar {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radio); padding: 26px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.tar h3, .tar h4 { margin-bottom: .5em; color: var(--ink); }
.tar p { color: var(--muted); font-size: .95rem; }
.s--mist .tar { background: #fff; }
.s--blue .tar, .s--dark .tar {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
}
.s--blue .tar h3, .s--dark .tar h3,
.s--blue .tar h4, .s--dark .tar h4 { color: #fff; }
.s--blue .tar p, .s--dark .tar p { color: rgba(255, 255, 255, .87); }

.tar--num { padding-top: 22px; }
.num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--mist); color: var(--ia-700);
  font-family: var(--display); font-weight: 800; font-size: 1.02rem;
  margin-bottom: 14px;
}
.s--blue .num, .s--dark .num { background: rgba(255, 255, 255, .15); color: #fff; }

.tar--dato { text-align: center; padding: 24px 16px; }
.tar--dato .cifra { font-size: clamp(1.75rem, 3.4vw, 2.3rem); color: var(--ia-700); }
.tar--dato p { margin-top: 8px; font-size: .89rem; }

.nota {
  border-left: 3px solid var(--ia);
  background: var(--mist);
  padding: 18px 22px; border-radius: 0 10px 10px 0;
  font-size: .95rem; color: var(--ink-2);
}
.s--blue .nota, .s--dark .nota {
  background: rgba(255, 255, 255, .09);
  border-left-color: var(--safety-lt);
  color: rgba(255, 255, 255, .92);
}
.nota strong { color: var(--ia-700); }
.s--blue .nota strong, .s--dark .nota strong { color: #fff; }

/* Lista de «no» — lo que la articulación NO hace */
/* Rejilla de tres columnas: aspa · rótulo · descripción.
   Antes iba en `flex` y el rótulo y la descripción compartían un mismo flujo de texto:
   cuando el rótulo ocupaba dos líneas, la descripción arrancaba justo donde él terminaba,
   así que las cinco filas empezaban en cinco sitios distintos. Con la columna del rótulo
   fija, todas las descripciones caen a la misma altura. */
.noes { display: grid; gap: 12px; }
.noes li {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 14px; row-gap: 4px; align-items: start;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 12px; padding: 16px 20px;
  color: rgba(255, 255, 255, .9); font-size: .96rem;
}
.noes li::before {
  content: "✕";
  grid-column: 1; grid-row: 1 / span 2;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff;
  display: grid; place-items: center; font-size: .72rem; margin-top: 1px;
}
/* Debajo de 760px sólo hay sitio para dos columnas: el rótulo va encima de su
   descripción, que es como se lee bien en un teléfono. */
.noes li strong { grid-column: 2; color: #fff; }
.noes li span   { grid-column: 2; }

@media (min-width: 760px) {
  .noes li { grid-template-columns: 24px 250px 1fr; row-gap: 0; column-gap: 18px; }
  .noes li::before { grid-row: 1; }
  .noes li strong { grid-column: 2; }
  .noes li span   { grid-column: 3; }
}

/* ── Mosaico de fotos ──────────────────────────────────────────────────────
   Seis fotos reales de actividades del ecosistema. Sirven para una cosa muy
   concreta: la página promete un movimiento y quien no conoce a Enlata necesita
   ver que esto ya pasa en salas de verdad.
   aspect-ratio fijo en el contenedor + object-fit en la imagen: así el hueco
   está reservado desde el primer pintado y el CLS no se mueve aunque las fotos
   lleguen tarde (van todas con loading="lazy"). */
.mosaico { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mosaico figure { margin: 0; }
.mosaico img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 12px; background: var(--mist);
}
.mosaico figcaption { margin-top: 9px; font-size: .84rem; color: var(--muted); line-height: 1.4; }

/* ── Niveles de acompañamiento ─────────────────────────────────────────────
   Antes era una tabla de 4 columnas. En móvil obligaba a leer por atributo
   («quién captura → nivel 1, nivel 2, nivel 3») cuando la pregunta real del
   lector es por nivel: «si entro con Nivel 1, ¿qué recibo?». Una tarjeta por
   nivel responde esa pregunta de una sola lectura, en cualquier ancho. */
.niveles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nivel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radio);
  overflow: hidden; display: flex; flex-direction: column;
}
.nivel__top { background: var(--ia-950); color: #fff; padding: 18px 22px; }
.nivel__n {
  font-family: var(--display); font-weight: 800; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: -.01em; line-height: 1.1;
}
.nivel__q { display: block; font-family: var(--texto); font-weight: 500; font-size: .84rem; color: var(--safety-lt); margin-top: 3px; }
.nivel__l { padding: 6px 22px 22px; display: grid; }
.nivel__l > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.nivel__l > div:last-child { border-bottom: none; }
.nivel__k { display: block; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.nivel__v { font-size: .95rem; color: var(--ink); font-weight: 500; }
.nivel__v.no { color: var(--muted); font-weight: 400; }
/* El nivel 1 es el que recibe TODA actividad aprobada: se marca porque es la
   respuesta a «¿y si no me dan cobertura?», que es la duda que frena. */
.nivel--base { border-color: var(--ia); box-shadow: var(--sombra); }
.nivel--base .nivel__top { background: var(--ia-700); }

/* Subtítulo que agrupa tarjetas dentro de una misma sección */
.grupo-sub {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--texto); font-weight: 600; font-size: .84rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2);
  margin: 0 0 16px;
}
.grupo-sub::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.grupo-sub + .rej { margin-bottom: 34px; }

/* ── Marcas oficiales del programa global ──────────────────────────────────
   Fondo blanco a propósito: los lockups oficiales vienen con fondo blanco y su
   tipografía es gris oscuro. Sobre el azul del pie serían ilegibles, y
   recolorear el logotipo de otra organización no se hace. */
.oficial { background: #fff; padding: 30px 0; border-top: 1px solid var(--line); }
.oficial__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 36px; }
.oficial__t { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.oficial img { height: 42px; width: auto; }

/* ── 8. Tablas ─────────────────────────────────────────────────────────────
   En móvil se convierten en tarjetas apiladas con la etiqueta de la columna
   delante (data-n). Un scroll horizontal dentro de la página no se descubre. */
.tabla-caja { border: 1px solid var(--line); border-radius: var(--radio); overflow: hidden; background: #fff; }
.tabla { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabla th, .tabla td { padding: 15px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tabla thead th {
  background: var(--ia-950); color: #fff;
  font-family: var(--texto); font-weight: 600; font-size: .87rem;
  border-bottom: none; line-height: 1.35;
}
.tabla thead th b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.02rem; text-transform: uppercase; letter-spacing: -.01em; }
.tabla tbody th { font-weight: 600; color: var(--ink); width: 30%; background: #FAFCFF; }
.tabla tbody tr:last-child th, .tabla tbody tr:last-child td { border-bottom: none; }
.tabla td { color: var(--muted); }
.tabla .si { color: var(--ok); font-weight: 600; }
/* Gris de marca (6.4:1), no un gris claro: #9AA3B0 daba 2.55:1 sobre blanco.
   La diferencia con las celdas afirmativas se sostiene en que no va en negrita,
   no en que esté más apagado. */
.tabla .no { color: var(--muted); }

/* ── 9. Calendario ────────────────────────────────────────────────────────── */
.cal { display: grid; gap: 10px; }
.cal li {
  display: grid; grid-template-columns: 156px 1fr auto;
  gap: 18px; align-items: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 17px 20px;
}
.cal__f { font-family: var(--display); font-weight: 800; font-size: .95rem; color: var(--ia-700); text-transform: uppercase; letter-spacing: -.005em; }
.cal__n { font-weight: 600; color: var(--ink); font-size: .99rem; line-height: 1.35; }
.cal__o { display: block; font-weight: 400; font-size: .87rem; color: var(--muted); margin-top: 2px; }
.pastilla-ok {
  display: inline-flex; align-items: center; gap: 6px;
  background: #E8F6ED; color: var(--ok);
  font-size: .78rem; font-weight: 600;
  padding: 5px 13px; border-radius: 999px; white-space: nowrap;
}
.pastilla-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* ── 10. Muro de aliados ───────────────────────────────────────────────────
   p-elhueco.png y logo-rdemprende.png son RGB sin canal alfa (fondo blanco
   quemado), así que TODOS los logos van sobre tarjeta blanca: si no, esos dos
   salen con un rectángulo visible y el resto no. */
.muro { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.muro__l {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 22px; display: grid; place-items: center;
  min-width: 132px; min-height: 76px;
}
.muro__l img { width: auto; }
.muro__p {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 24px; min-height: 76px;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  color: var(--ia-900); text-transform: uppercase; letter-spacing: -.01em;
}

/* ── Bloque del formulario ────────────────────────────────────────────────── */
/* El primer tramo del degradado arrancaba en el azul de marca puro (#0572DD).
   Ahí cae el párrafo de entrada, y blanco al 93% sobre ese azul da 4.29:1:
   por debajo del 4.5:1 que AA exige para texto normal. El azul puro se corre
   hacia abajo y el texto pasa a blanco sólido; el peor caso queda en 6.27:1. */
.form-caja {
  background: linear-gradient(150deg, var(--ia-700) 0%, var(--ia) 30%, var(--ia-900) 100%);
  border-radius: 22px; padding: clamp(34px, 5vw, 62px);
  text-align: center; color: #fff; position: relative; overflow: hidden;
}
.form-caja::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .1) 1.3px, transparent 1.3px);
  background-size: 26px 26px; opacity: .55; pointer-events: none;
}
.form-caja > * { position: relative; }
.form-caja .rotulo { color: #fff; }
.form-caja h2 { color: #fff; margin-bottom: .4em; }
/* Blanco sólido, no translúcido: sobre el azul de marca puro, el blanco al 93%
   cae a 4.29:1 y el del 80% a 3.58:1 — los dos por debajo de AA. En sólido el
   peor caso de toda la caja es 4.71:1. */
.form-caja .entrada { color: #fff; max-width: 620px; margin: 0 auto; }
.form-caja .acciones { justify-content: center; }
.form-caja .mini { color: #fff; margin-top: 20px; }

/* Expectativa antes del salto: qué te vas a encontrar del otro lado.
   Es lo que baja el abandono al saltar a un formulario externo. */
.previo {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 24px;
}
.previo span {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24);
  padding: 7px 15px; border-radius: 999px; font-size: .84rem; font-weight: 500;
}

/* ── 11. Comunidad ────────────────────────────────────────────────────────── */
.com { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.com__lockup { height: 34px; width: auto; margin-bottom: 20px; filter: brightness(0) invert(1); }
.com__cad { display: grid; gap: 11px; margin-top: 22px; }
.com__cad li { display: flex; gap: 11px; align-items: flex-start; font-size: .95rem; color: rgba(255, 255, 255, .9); }
.com__cad .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--safety-lt); margin-top: 9px; flex: 0 0 auto; }
.com__cad b { color: #fff; }
.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }

/* ── 12. Preguntas frecuentes ──────────────────────────────────────────────
   <details>/<summary> nativo: en 2026 el soporte de lector de pantalla es
   mejor que el de un acordeón con ARIA hecho a mano, y funciona sin JS. */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; transition: border-color .2s var(--ease);
}
.faq details[open] { border-color: var(--ia); }
.faq summary {
  padding: 18px 52px 18px 22px; cursor: pointer; position: relative;
  font-weight: 600; font-size: 1rem; color: var(--ink);
  list-style: none; min-height: 56px; display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2.5px solid var(--ia); border-bottom: 2.5px solid var(--ia);
  transform: rotate(45deg); transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--ia-700); }
.faq .cuerpo { padding: 0 22px 20px; color: var(--muted); font-size: .95rem; }
.faq .cuerpo p + p { margin-top: .8em; }

/* ── 13. Pie ───────────────────────────────────────────────────────────────── */
.site-footer { background: var(--ia-950); color: rgba(255, 255, 255, .74); padding: 56px 0 28px; font-size: .91rem; }
.pie-rej { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
/* h2 y no h3: dentro del pie no hay ningún h2, así que empezar en h3 rompía el
   esquema de encabezados del documento. El aspecto es el mismo. */
.site-footer h2 { color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--texto); font-weight: 600; margin-bottom: 14px; }
.site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer li { margin-bottom: 8px; }

/* WCAG 2.2 §2.5.8: 24×24 px es el mínimo de área táctil para AA. Un enlace de
   texto suelto dentro de una lista mide unos 21px de alto y no llega. La
   excepción de «objetivo en línea» NO aplica aquí porque no van dentro de una
   frase, sino como elementos de una lista de navegación. */
.site-footer li a,
.contacto-lista a {
  display: inline-flex; align-items: center; min-height: 24px;
}
.pie-logos { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.pie-logos img { height: 30px; width: auto; }
.pie-bajo {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: .84rem; color: rgba(255, 255, 255, .6);
}

/* ── 14. Barra fija móvil ──────────────────────────────────────────────────
   Aparece cuando el botón del hero ya se fue de pantalla, no antes: una barra
   que tapa contenido desde el segundo cero molesta más de lo que convierte. */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 20px rgba(6, 52, 106, .1);
  /* `visibility` además del `transform`: solo desplazada, la barra sigue siendo
     enfocable con el tabulador aunque esté fuera de pantalla, y el foco se iría
     a un botón que no se ve. `visibility:hidden` la saca del orden de tabulación
     y se anima igual porque es una propiedad transicionable. */
  visibility: hidden;
  transform: translateY(110%);
  transition: transform .28s var(--ease), visibility 0s linear .28s;
}
.barra.visible { visibility: visible; transform: translateY(0); transition-delay: 0s; }
.barra__t { flex: 1; min-width: 0; font-size: .8rem; line-height: 1.3; color: var(--muted); }
.barra__t b { display: block; color: var(--ink); font-size: .88rem; font-weight: 600; }
.barra .btn { flex: 0 0 auto; min-height: 44px; padding: 10px 20px; font-size: .9rem; }

/* ── Utilidades ────────────────────────────────────────────────────────────── */
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.ancho-medio { max-width: 780px; margin-left: auto; margin-right: auto; }

/* Aparición al hacer scroll — puramente decorativa */
.rev { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.rev.dentro { opacity: 1; transform: none; }

/* ── 15. Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .com { grid-template-columns: 1fr; }
  .pie-rej { grid-template-columns: 1fr 1fr; }
  .niveles { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* La navegación de anclas desaparece: en móvil compite con el CTA y el menú
     hamburguesa para 4 enlaces es más fricción que ayuda. Queda el botón. */
  .nav a:not(.btn) { display: none; }
  .franja__fila { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  :root { --cabecera: 56px; }

  .limite { padding: 9px 0; font-size: .86rem; }
  .limite__extra { display: none; }

  .tabla-caja { border: none; background: transparent; }
  .tabla, .tabla tbody, .tabla tr, .tabla th, .tabla td { display: block; width: 100%; }
  /* NO `display:none` en el thead. Eso lo saca del árbol de accesibilidad y el
     lector de pantalla se queda sin encabezados de columna: oye tres celdas
     seguidas sin saber a qué columna pertenece cada una. El contenido generado
     con `content: attr(data-n)` resuelve lo visual pero NO se expone de forma
     fiable a la tecnología asistiva. Se oculta solo a la vista, con la misma
     técnica de la clase .sr, y los <th scope="col"> reales siguen ahí. */
  .tabla thead {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .tabla tr {
    background: #fff; border: 1px solid var(--line);
    border-radius: 12px; margin-bottom: 12px; overflow: hidden;
  }
  .tabla tbody th {
    width: 100%; background: var(--ia-950); color: #fff;
    font-size: .93rem; border-bottom: none;
  }
  .tabla td { display: flex; gap: 12px; align-items: baseline; border-bottom: 1px solid var(--line); }
  .tabla tr td:last-child { border-bottom: none; }
  .tabla td[data-n]::before {
    content: attr(data-n); flex: 0 0 40%;
    font-weight: 600; font-size: .83rem; color: var(--ia-700);
  }

  .cal li { grid-template-columns: 1fr; gap: 8px; }
  .cal li .pastilla-ok { justify-self: start; }

  .mosaico { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mosaico figcaption { font-size: .78rem; }
  .niveles { grid-template-columns: 1fr; }
  .oficial__in { gap: 14px 24px; }
  .oficial img { height: 34px; }

  .fotos { grid-template-columns: repeat(3, 1fr); }
  .pie-rej { grid-template-columns: 1fr; gap: 28px; }

  .barra { display: flex; }
  /* Espacio para que la barra fija no tape el final de la página */
  body { padding-bottom: 76px; }
}

@media (max-width: 400px) {
  .franja__fila { grid-template-columns: 1fr; }
  .acciones .btn { width: 100%; }
}

/* Quien pide menos movimiento, no recibe ninguno */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rev { opacity: 1; transform: none; }
  .barra { transition: none; }
}

/* Impresión: que una convocatoria se pueda imprimir y repartir */
@media print {
  .cabecera, .barra, .gew-hero__anillo, .rev { display: none !important; }
  .rev { opacity: 1 !important; transform: none !important; }
  body { padding-bottom: 0; }
  .s--blue, .s--dark, .form-caja { background: #fff !important; color: #000 !important; }
  .s--blue h2, .s--dark h2, .form-caja h2 { color: #000 !important; }
  .faq details { break-inside: avoid; }
  .faq .cuerpo { display: block !important; }
}