/* GENERADO por build.mjs: no editar a mano. Se edita cada .css de base/ y sections/. */
/* ── base/fuentes.css ── */
/* Fuentes alojadas en el sitio (antes: fonts.googleapis.com, una hoja de OTRO dominio que bloqueaba
   la primera pintura ~870 ms en un móvil con 4G). Son las declaraciones exactas que servía Google
   para el subconjunto «latin» (cubre el español: tildes, ñ, ¿¡, comillas), con los archivos acá.
   Cada archivo es variable: uno solo trae todos los pesos. Licencia: SIL Open Font License 1.1
   (assets/fonts/OFL.txt). Para cambiar familias o pesos: bajar el CSS de Google y repetir esto. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/montserrat-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(assets/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/open-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/open-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/open-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/open-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── base/base.css ── */
/* base — generado por refactor modular (verbatim de styles.css) */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  /* ── Contrato de marca (Bravo) ───────────────────────────────────────
     Los únicos tokens que el cliente va a poder cambiar desde el panel,
     nombrados por ROL (no por color): fase 0 de
     bravo/docs/PLAN-variantes-y-tokens-2026-09-07.md, que señala este
     repo por nombre como el que quedó con tokens por color (--green).
     Valores medidos sobre el prototipo XD del tema "marco y contrato"
     (docs/ADR/0001-tema-marco-y-contrato.md) — el mismo sistema visual
     que ya implementó landings/agente-ia/base/base.css.
     Contrato completo: bravo/docs/CONTRATO-tokens-de-marca.md */
  /* Valores del panel de specs del XD (modo desarrollo habilitado 2026-09-09),
     no medidos a pixel — reemplazan las estimaciones anteriores. */
  --marca-acento:         #06E547; /* verde puro — antes #30E4B1 (menta), no es lo que usa el XD */
  --marca-acento-fuerte:  #00C93D; /* hover/borde: oscurecido del acento, NO está en el spec del XD */
  --marca-titular:        #46F3E4; /* cian del titular del hero: sin match en el spec todavía, queda igual */
  --marca-fondo:          #03130D; /* spec confirmada en docs/xd-ref/ANALISIS-Y-PLAN-PROYECTO-NUEVO.md §3
                                       (panel /specs, cierre de ronda 2026-09-10) — reemplaza #011918, que
                                       divergía del valor que ya usaba hero__strip (rgba(3,19,13,…)) */
  --marca-fondo-alt:      #F3F4F8; /* el sexto rol del contrato, que faltaba: confirmado clickeando en
                                       /specs el "Rectángulo 14145" que da fondo a prog+banner+cert de un
                                       tirón (top 4712px, alto 2244px, ancho completo) — NO es --marca-nav
                                       (#F5F7FA), que es solo el fondo de la barra de navegación. */
  --marca-texto:          #FFFFFF;
  --marca-texto-suave:    rgba(255, 255, 255, 0.75);
  --marca-nav:            #F5F7FA; /* nav clara sobre el fondo oscuro — ya coincidía con el XD */
  --marca-cta:            #F52424; /* rojo del CTA del nav: relleno del "Rectángulo 14102" del AGC y el color que
                                       sale en la referencia del XD. #D51B1B es el tachado del $500 de inv, no esto */
  --marca-navy:           #163960; /* wordmark GOBERNA: el spec da 4 azules (#002072/#1E3C72/#0A132F/#253054)
                                       sin decir cuál es el del wordmark — queda igual hasta confirmar */
  --marca-gold:           #FFC901; /* detalle dorado del escudo — antes #E8BE23 */

  /* ── Tokens del tema, por rol ─────────────────────────────────────── */
  --color-acento: var(--marca-acento);
  --color-acento-fuerte: var(--marca-acento-fuerte);
  --color-titular: var(--marca-titular);
  --color-fondo: var(--marca-fondo);
  --color-fondo-alt: var(--marca-fondo-alt);
  --color-fondo-tinte: rgba(6, 229, 71, 0.06);
  --color-texto: var(--marca-texto);
  --color-texto-suave: var(--marca-texto-suave);
  --color-texto-tenue: rgba(255, 255, 255, 0.5);
  --color-texto-10: rgba(255, 255, 255, 0.1);
  --color-texto-oscuro: #081819; /* antes #10231F — valor del spec del XD */
  --color-nav: var(--marca-nav);
  --color-nav-rgb: 245, 247, 250;
  --color-cta: var(--marca-cta);
  --color-cta-fuerte: #A81212; /* hover/borde oscurecido del CTA — NO está en el spec del XD */
  --brand-navy: var(--marca-navy);
  --brand-gold: var(--marca-gold);

  /* ── Alias de compatibilidad ──────────────────────────────────────────
     67 usos vivos en sections/ (sobre todo inv.css y docentes.css) todavía
     referencian estos nombres por color en vez de los tokens de rol de
     arriba. Se retiran en un PR de limpieza aparte, auditando primero con
     `grep -rn -- '--green\|--bg)\|--white' sections/` — no antes, no sea
     que una sección quede sin sus colores. */
  --green: var(--color-acento);
  --green-dark: var(--color-acento-fuerte);
  --dark-text: var(--color-texto-oscuro);
  --bg: var(--color-fondo);
  --bg-tint: var(--color-fondo-tinte);
  --white: var(--color-texto);
  --white-75: var(--color-texto-suave);
  --white-50: var(--color-texto-tenue);
  --white-10: var(--color-texto-10);

  /* El XD (modo desarrollo, specs reales) usa Montserrat + Open Sans + Inter —
     Sora NO existe en el diseño. --font-sora/--font-mont quedan como alias de
     compatibilidad (67+ usos en sections/) pero con el VALOR correcto: Sora
     apuntaba a títulos → pasa a Montserrat; Montserrat apuntaba a cuerpo →
     pasa a Open Sans, que es lo que el XD usa ahí. --font-ui es Inter, para
     lo que se identifique puntualmente como UI (no todo lo que hoy usa
     --font-sora es necesariamente Inter en el XD — el CTA del nav, por
     ejemplo, es Montserrat). */
  --font-titulo: 'Montserrat', sans-serif;
  --font-cuerpo: 'Open Sans', sans-serif;
  --font-ui: 'Inter', sans-serif;
  --font-sora: var(--font-titulo);
  --font-mont: var(--font-cuerpo);
  --gutter: clamp(calc(20 * var(--e)), 10.76vw, calc(147 * var(--e)));
  --sp: clamp(calc(52 * var(--e)), 7vw, calc(96 * var(--e))); /* el tope escala: con 96 fijos el padding de sección valía igual a 1920 que a 1440 y desalineaba banner/porque/doblecert */
  --header-h: calc(110 * var(--e)); /* spec exacta del panel de specs del XD: nav 0..110, hero 110..1081 — antes 145, medición por pixel con error */
  /* ── ESCALA LAPTOP ──────────────────────────────────────────────────────────
     El artboard "Laptop 1440" del Figma (página «Laptop», nodo 49:3) NO es una
     composición nueva: es el de 1920 al 75% EXACTO. Se verificó nodo por nodo —
     gutter 200→150, nav 110→82.5, wrap 1520→1140, lockup del hero 737×144→
     552.75×108, barra de la bajada 7×78→5.25×58.5, botones 266×56→199.5×42,
     bajada 27/37→20.25/27.75, info 22→16.5, íconos 64→48, tarjeta de banner
     1520×311→1140×233.25, diploma de cert 754×732→565.5×549. Ni un valor se sale
     de ×0.75.
     Por eso el laptop no se escribe como un breakpoint de números nuevos (serían
     cientos, y cada uno una oportunidad de que el diseño derive): se escribe como
     una escala. `--e` es esa escala expresada como longitud —1px a 1920, bajando
     proporcional— así que cada medida se sigue leyendo con el número del diseño
     de 1920, `calc(737 * var(--e))`, y a 1440 cae sola en la del artboard laptop.
     0.0520833vw = 100vw/1920. El tope de 1px la clava de 1920 para arriba: el
     escritorio no cambia en absoluto.
     El piso es 1100/1920 = 0.5729, ni más ni menos: por encima de 1100 la escala
     es pura y el diseño entra exacto (la columna del .wrap mide 1520·e y el
     contenido necesita 1520·e), y en 1100 es donde arrancan los bloques
     `@media (max-width: 1100px)` que reflowean a tablet. Un piso más alto —se
     probó con 0.66— deja de encoger las medidas mientras el viewport sigue
     bajando, y abre una banda (901–1267) donde el diseño escalado ya NO entra en
     su columna: desborde garantizado en toda sección que use el ancho completo. */
  --e: clamp(0.5729px, 0.0520833vw, 1px);
}
/* Abajo de 900 mandan los bloques de tablet/móvil, que tienen composición propia
   (no son el escritorio escalado): ahí `--e` vuelve a 1 para que ningún
   `calc(N * var(--e))` suelto siga encogiendo por debajo de su breakpoint. */
@media (max-width: 900px) { :root { --e: 1px; } }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-mont);
  background: var(--color-fondo);
  color: var(--color-texto);
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sora); }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
.text-green, .text-acento { color: var(--color-acento); }
.text-titular { color: var(--color-titular); }
.wrap {
  box-sizing: border-box; /* el padding queda DENTRO del max-width — si no, el contenido real
    medía 1480px (max-width 1520 + padding 20+20 de MÁS), corrido 20px — bug encontrado por
    landings-17 con getBoundingClientRect, afectaba a toda sección con .wrap de las dos mitades */
  width: 100%;
  max-width: 1920px; /* antes 1560 — 1520 de contenido + 200+200 de margen lateral */
  margin-left: auto;
  margin-right: auto;
  /* El gutter escala con `--e`: 200 a 1920, 150 a 1440 como el artboard laptop.
     Es el cambio que más arrastra — con 200 fijos, a 1440 la columna medía 1040
     en vez de 1140 (factor 0.684) y TODA sección heredaba esa deformación. */
  padding-left: calc(200 * var(--e));
  padding-right: calc(200 * var(--e));
}
/* Tarjetas/paneles de ancho completo (ej. el panel de 3 solapas de `porque`):
   no comparten el .wrap de texto y columnas — medido en el XD: 1720px, x=100..1820. */
.wrap--panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(100 * var(--e)); /* 100, no 200: con 200 la tarjeta de porque medía 1520 en vez de 1720 */
  padding-right: calc(100 * var(--e));
}
html, body { max-width: 100%; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--e));
  height: calc(56 * var(--e)); /* spec /specs/: 266×56, antes 48 */
  padding: 0 calc(26 * var(--e));
  border-radius: calc(32 * var(--e)); /* spec /specs/: pill completo (32 > mitad de 56), antes 8 */
  font-family: var(--font-ui); /* spec /specs/: texto del botón en Inter SemiBold 18px, no Sora/Montserrat */
  font-weight: 600;
  font-size: calc(18 * var(--e));
  border: calc(1.5 * var(--e)) solid transparent;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn__arrow { flex-shrink: 0; }
.btn--primary {
  background: var(--color-acento);
  color: #0A132F; /* AGC: el texto del CTA es #0A132F, no el #081819 del texto oscuro general */
  border-color: var(--color-acento);
}
.btn--primary:hover { background: var(--brand-gold); color: var(--color-texto-oscuro); }
.btn--ghost {
  background: transparent;
  color: #F5F7FA; /* AGC: #F5F7FA, no blanco puro */
  border-color: var(--color-nav);
  transition: background 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out;
}
.btn--ghost:hover { background: var(--brand-gold); color: var(--color-texto-oscuro); border-color: var(--brand-gold); }
.img-ph {
  position: relative;
  background: #6f7e7a;
  overflow: hidden;
}
.img-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.8'/%3E%3Cpath d='M21 15l-5-5L4 21'/%3E%3C/svg%3E") center / calc(52 * var(--e)) no-repeat;
  opacity: 0.55;
}
.caro-arrow {
  flex-shrink: 0;
  width: calc(44 * var(--e));
  height: calc(44 * var(--e));
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-texto);
  transition: background .2s, color .2s;
}
.caro-arrow--green, .caro-arrow--acento { background: var(--color-acento); color: var(--color-texto-oscuro); }
.caro-arrow:hover { background: var(--color-acento); color: var(--color-texto-oscuro); }
@media (max-width: 600px) {
  .wrap, .wrap--panel { padding-left: 16px; padding-right: 16px; } /* --panel también: con 100px la tarjeta de porque quedaba en 190px */
  /* 1px del artboard mobile del XD ("INTELIGENCIA-430x932", docs/xd-ref/mobile/). Lo que se mide
     de ese artboard se escribe calc(N * var(--xd-m)): exacto a 430 y proporcional en 360–600, como
     lo muestra el visor del XD. vw y no cqw: container-type en una sección vuelve a sus hijos
     `position: fixed` (el WhatsApp vive dentro del hero) relativos a la sección. */
  :root { --xd-m: calc(100vw / 430); }
}
@keyframes spyHalo {
  0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.07); }
}
@keyframes spyPlatform {
  0%, 100% { opacity: .65; transform: translateX(-50%) scale(1); }
  50% { opacity: .95; transform: translateX(-50%) scale(1.05); }
}
@keyframes linkFlow { to { stroke-dashoffset: -14; } }
@keyframes spyBreath {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(calc(-9 * var(--e))); }
}
@keyframes spyEyes { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes nodePop { 0% { transform: scale(.84); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes spyFloat {
  0%, 100% { transform: translate(-50%, calc(-50% - calc(4 * var(--e)))); }
  50% { transform: translate(-50%, calc(-50% + calc(4 * var(--e)))); }
}
@keyframes ringPulse { 50% { stroke-opacity: .5; } }
@keyframes enrollPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 226, 152, .45); }
  50% { box-shadow: 0 0 calc(24 * var(--e)) calc(2 * var(--e)) rgba(46, 226, 152, .55); }
}
@keyframes espiasSwap { 0% { opacity: 0; transform: translateY(12px) scale(1.04); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes espiasRise { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes espSpark { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }
@keyframes espDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }

/* ── Encuadre y posición de imágenes (Bravo, Contrato 10 R12/R13) ─────────────
   render/marcas.mjs pone las variables SÓLO en las imágenes que el cliente ajustó, y en
   `data-bravo-foco` / `data-bravo-mueve` los tamaños que tienen ajuste ("d t m"). Sin ajuste no hay
   atributo y estas reglas no aplican a nada: el sitio sale idéntico. Un tamaño no hereda de otro.
   Propiedades individuales `translate`/`scale`: se suman al `transform` de las animaciones del tema
   en vez de pisarlo. Nunca `position` ni top/left: el lugar que ocupa en la página no cambia. */
@media (min-width: 1101px) {
  [data-bravo-foco~="d"] { object-position: var(--bravo-foco-d) !important; transform-origin: var(--bravo-foco-d) !important; scale: var(--bravo-zoom-d, 1) !important; }
  [data-bravo-mueve~="d"] { translate: var(--bravo-mover-d) !important; scale: calc(var(--bravo-zoom-d, 1) * var(--bravo-escala-d, 1)) !important; transform-origin: center !important; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  [data-bravo-foco~="t"] { object-position: var(--bravo-foco-t) !important; transform-origin: var(--bravo-foco-t) !important; scale: var(--bravo-zoom-t, 1) !important; }
  [data-bravo-mueve~="t"] { translate: var(--bravo-mover-t) !important; scale: calc(var(--bravo-zoom-t, 1) * var(--bravo-escala-t, 1)) !important; transform-origin: center !important; }
}
@media (max-width: 600px) {
  [data-bravo-foco~="m"] { object-position: var(--bravo-foco-m) !important; transform-origin: var(--bravo-foco-m) !important; scale: var(--bravo-zoom-m, 1) !important; }
  [data-bravo-mueve~="m"] { translate: var(--bravo-mover-m) !important; scale: calc(var(--bravo-zoom-m, 1) * var(--bravo-escala-m, 1)) !important; transform-origin: center !important; }
}

/* ── Velo sobre una imagen (Bravo, Contrato 10 R14) ───────────────────────────
   Una capa entre la foto y el texto, para que el texto se lea. `render/marcas.mjs` pone
   `--bravo-velo-<v>` —un `background` ya compuesto y validado: el contenido nunca llega crudo al
   CSS— sólo en las capas que el cliente ajustó, y los tamaños en `data-bravo-velado` ("d t m"). Sin
   velo no hay atributo: la capa queda transparente y el sitio sale idéntico. Un tamaño no hereda
   de otro; dónde va la capa en el apilado lo decide cada sección. */
.bravo-velo { position: absolute; inset: 0; pointer-events: none; }
@media (min-width: 1101px) { [data-bravo-velado~="d"] { background: var(--bravo-velo-d) !important; } }
@media (min-width: 601px) and (max-width: 1100px) { [data-bravo-velado~="t"] { background: var(--bravo-velo-t) !important; } }
@media (max-width: 600px) { [data-bravo-velado~="m"] { background: var(--bravo-velo-m) !important; } }

/* ── Ajustes de una imagen (Bravo, Contrato 10 R15) ───────────────────────────
   Brillo, contraste, saturación y desenfoque. `render/marcas.mjs` pone `--bravo-filtro-<v>` —un
   `filter` ya compuesto con cuatro números acotados: el contenido nunca llega crudo al CSS— sólo en
   las imágenes que el cliente ajustó, y los tamaños en `data-bravo-filtrado` ("d t m"). Sin ajuste
   no hay atributo y el sitio sale idéntico. `filter` no toca el flujo ni el lugar que ocupa la
   imagen, así que convive con el encuadre y con el velo sin pelearles ninguna propiedad. */
@media (min-width: 1101px) { [data-bravo-filtrado~="d"] { filter: var(--bravo-filtro-d) !important; } }
@media (min-width: 601px) and (max-width: 1100px) { [data-bravo-filtrado~="t"] { filter: var(--bravo-filtro-t) !important; } }
@media (max-width: 600px) { [data-bravo-filtrado~="m"] { filter: var(--bravo-filtro-m) !important; } }

/* ── base/wsp.css ── */
/* wsp — generado por refactor modular (verbatim de styles.css) */

.wsp {
  position: fixed;
  right: calc(24 * var(--e));
  bottom: calc(24 * var(--e));
  z-index: 90;
  width: calc(56 * var(--e));
  height: calc(56 * var(--e));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 calc(8 * var(--e)) calc(24 * var(--e)) rgba(0, 0, 0, 0.35);
  transition: transform .2s ease;
}
.wsp:hover { transform: scale(1.06); }
@media (max-width: 600px) { /* XD mobile, "Grupo 30678" (fijo): círculo de 56 a 16 del borde derecho y 19 del inferior
                               (pantalla de 932), degradado #00FB73 → #00B25B en diagonal, sin sombra; logo #F5F7FA de 32.8 */
  .wsp {
    right: calc(16 * var(--xd-m));
    bottom: calc(19 * var(--xd-m));
    width: calc(56 * var(--xd-m));
    height: calc(56 * var(--xd-m));
    background: linear-gradient(135deg, #00FB73 14.64%, #00B25B 85.36%);
    color: #F5F7FA;
    box-shadow: none;
  }
  .wsp svg { width: calc(32.8 * var(--xd-m)); height: calc(32.8 * var(--xd-m)); }
}

/* ── base/nav.css ── */
/* nav — medida con las capas del XD (componente "Componente 13 – 10", ver docs/xd-ref/README.md).
   A 1920: barra 1920×110 #F5F7FA con sombra 0 3px 3px rgba(0,0,0,.16); logo 290×72 en (200, 19);
   "Hor Nav" = 4 links Inter Medium 20 tracking 100 (2px) #081819, cada uno centrado en una caja de 55
   de alto, cajas pegadas (158/330/224/180 → 26.5 de padding por lado) de x=549 a 1441; CTA 266×56
   radio 32 en x=1453 con "Inscribete ahora" Inter Medium 20 #F5F7FA. Debajo de 1920 todo escala con
   el ancho (clamp) y entra en una fila hasta 1081; en 1080 o menos, menú hamburguesa.

   Cambio posterior al XD (2026-09-21): la barra ya no es #F5F7FA. Es TRANSPARENTE y deja ver la portada
   (el hero arranca en y=0 y ya reserva el alto del nav con padding-top), con logo y links claros. Al
   bajar de la portada, core.js pone .nav--scrolled: fondo verde oscuro de la marca para que los links
   claros no se pierdan sobre las secciones blancas.
   Escala (2026-09-21): en desktop el contenido va ~40% más chico que el XD, a pedido, siguiendo la
   referencia de la landing hermana «Consultor Político»: a 1920 logo 175, links 15.5px con tracking 1,
   CTA 200×46 con 16px (el XD daba 290 / 20px con tracking 2 / 266×56). Sigue siendo lineal con vw. */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.nav--scrolled,
.nav--menu-open {
  background: rgba(1, 25, 24, 0.92); /* #011918: el verde con el que cierra la portada (hero__strip) */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
}
.nav__wrap {
  max-width: 1920px;
  height: 100%;
  margin: 0 auto;
  padding: 0 calc(200 * var(--e)); /* misma fórmula que .wrap (base.css): logo y CTA quedan sobre los mismos
    bordes que el contenido de la portada a cualquier ancho (200 a 1920, 150 a 1440, 115 a 1081). Antes
    era clamp(24px, 31.62vw − 407px, 200px), pensado cuando el header era más grande y a 1366 el CTA
    salía de la pantalla; con el contenido actual entra de sobra y esa fórmula lo despegaba de los bordes. */
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.nav__logo img { width: clamp(130px, 9.1vw, 175px); height: auto; aspect-ratio: 290 / 72; max-width: none; }
.nav__center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* los links van pegados al CTA (12px), como el XD */
  min-width: 0;
  padding-left: 24px;
}
.nav__links {
  display: flex;
  align-items: center;
  padding-top: 3px; /* cajas de los links en y=29..84 del XD, 1.5px más abajo que el centro de la barra */
} /* siempre visibles: el XD no tiene estado compacto al scrollear (se sacó la fila de íconos) */
.nav__link {
  display: flex;
  align-items: center;
  height: 55px;
  padding: 0 clamp(8px, 0.9vw, 17px);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(12px, 0.8vw, 15.5px);
  line-height: 1.2;
  letter-spacing: clamp(0.5px, 0.052vw, 1px);
  color: #F5F7FA;
  transition: color .25s ease, transform .3s ease-out;
  white-space: nowrap;
}
.nav__link:hover { color: var(--color-acento); transform: translateY(-3px); }
.nav__cta {
  flex-shrink: 0;
  width: clamp(150px, 10.4vw, 200px);
  height: clamp(38px, 2.4vw, 46px);
  margin-left: 12px;
  padding: 0;
  border-radius: 32px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(12px, 0.833vw, 16px);
  background: var(--color-cta);
  color: #F5F7FA;
  border-color: var(--color-cta);
  transition: background 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out, transform 0.3s ease-out;
}
.nav__cta:hover { background: var(--color-cta-fuerte); border-color: var(--color-cta-fuerte); }
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav__toggle span { width: 22px; height: 2px; background: #F5F7FA; border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.nav--menu-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav--menu-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px 20px 22px;
  background: transparent; /* el fondo lo pone .nav--menu-open en la barra entera */
  border-bottom: 1px solid rgba(245, 247, 250, 0.12);
}
.nav__mobile-link {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: #F5F7FA;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(245, 247, 250, 0.1);
}
.nav__mobile-link:last-of-type { border-bottom: none; }
.nav__mobile-link.nav__link--active { color: var(--color-acento); }
.nav__mobile-cta { margin-top: 14px; width: 100%; }
@media (max-width: 1080px) { /* por debajo, logo (210) + links (≈585) + CTA (200) ya no entran en una fila */
  .nav__center { display: none; }
  .nav__toggle { display: flex; margin-left: 16px; }
  .nav__cta { margin-left: auto; }
  .nav { height: auto; min-height: 72px; }
  .nav__wrap { min-height: 72px; padding: 12px 16px; }
  .nav--menu-open .nav__mobile { display: flex; }
}
@media (max-width: 600px) { /* XD mobile, "Grupo 30689": barra 430×50 #FFFFFF sin sombra; logo 161.3×40 en (16, 5);
                               hamburguesa de tres barras 24×2 cada 8, en x=390..414, y=16..34 (el XD las da #000 sobre la barra
                               blanca; con la barra transparente van claras) */
  .nav { min-height: 0; box-shadow: none; }
  .nav--scrolled, .nav--menu-open { box-shadow: none; }
  .nav__wrap { min-height: 0; height: calc(50 * var(--xd-m)); padding: 0 calc(8 * var(--xd-m)) 0 calc(16 * var(--xd-m)); }
  .nav__logo img { width: calc(161.3 * var(--xd-m)); height: calc(40 * var(--xd-m)); }
  .nav__cta { display: none; }
  .nav__toggle { margin-left: auto; width: calc(40 * var(--xd-m)); height: calc(40 * var(--xd-m)); gap: calc(6 * var(--xd-m)); } /* caja de toque de 40 centrada en las barras */
  .nav__toggle span { width: calc(24 * var(--xd-m)); height: calc(2 * var(--xd-m)); border-radius: calc(1 * var(--xd-m)); background: #F5F7FA; }
  .nav--menu-open .nav__toggle span:nth-child(1) { transform: translateY(calc(8 * var(--xd-m))) rotate(45deg); }
  .nav--menu-open .nav__toggle span:nth-child(3) { transform: translateY(calc(-8 * var(--xd-m))) rotate(-45deg); }
}

/* ── sections/hero/hero.css ── */
/* hero — generado por refactor modular (verbatim de styles.css) */

.hero {
  position: relative;
  width: 100%;
  height: clamp(600px, 56.25vw, 1080px); /* banda "FONDO" del AGC del XD: nav 0..110 + hero 110..1080.
                                            La medición vieja (969) venía de un round anterior y dejaba
                                            el bloque 111px corto: el contenido centrado subía ~110px
                                            respecto del diseño. 1080/1920 = 56.25vw. */
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}
/* R14: sobre el fondo (mismo z-index, pero posterior en el DOM), debajo del personaje y del texto. */
.hero__velo { z-index: 1; }
.hero__character {
  position: absolute;
  bottom: 0;
  right: -2%;
  height: 94%;
  width: auto;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}
.hero__strip {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, transparent 0%, rgba(3, 19, 13, 0.75) 55%, var(--bg) 100%);
  z-index: 3;
}
.hero__wrap {
  position: relative;
  z-index: 4;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h);
}
.hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0; /* el XD no espacia parejo: 11px título→bajada y 78px bajada→botones (ver márgenes abajo) */
  padding-top: 96px; /* el bloque del XD no está centrado en la caja: arranca en y=408, y el centro
                        geométrico daría 360. Media caja de padding lo baja los 48px que faltan y
                        conserva el centrado cuando el hero se achica. */
  max-width: 900px; /* antes 600px — no dejaba crecer al titular en pantallas anchas */
}
.hero__title {
  width: 737px; /* spec exacta del panel del XD: An 737 · Al 144 · X 200 · Y 408 — antes fijo en 582 */
  max-width: 100%;
  height: auto;
}
.hero__subtitle {
  font-family: var(--font-cuerpo); /* spec: Open Sans Regular — antes Sora/Montserrat */
  font-weight: 400;
  font-size: 27px; /* spec exacta: An 698 · Al 74 · X 223 · Y 592, Open Sans Regular 27px */
  line-height: 37px; /* el AGC da lh 37 exacto; 1.4 daba 37.8 y estiraba el bloque a 76 (XD: 74) */
  margin: 11px 0 0; /* separación real título→bajada en el XD (552 → 563) */
  color: #F5F7FA; /* XD #F5F7FA, no blanco puro */
  max-width: 698px;
  border-left: 7px solid var(--color-acento); /* la barra verde del XD: rectángulo 7×78 #06E547 en x=200 (gutter
                                                  del texto x=223). Antes 3px — quedaba más delgada que el diseño. */
  padding-left: 16px; /* 7 de barra + 16 de separación = 23, igual que el gutter del XD */
}
.hero__buttons {
  display: flex;
  gap: 24px; /* XD: botón 1 termina en 466, botón 2 arranca en 490 */
  margin-top: 78px; /* separación real bajada→botones en el XD (637 → 715) */
  flex-wrap: wrap;
}
.hero__buttons .btn { min-width: 266px; } /* XD: dos cajas de 266×56 en x=200 y x=490 */
.hero__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* XD: la fila va de 973 (la línea) a 1080, con los íconos en 987..1051 */
  padding: 14px 0 29px;
  margin: 0 81px 0 26px; /* la fila no ocupa todo el gutter: arranca en 226 y termina en 1639 */
  position: relative;
}
.hero__info::before {
  content: '';
  position: absolute;
  top: 0;
  left: -107px; /* la línea del XD arranca en x=119; la fila ahora arranca en 226 */
  right: 0;
  border-top: 1px solid #A1B5D369;
}
.hero__info-item { display: flex; align-items: center; gap: 12px; }
.hero__info-item:not(:first-child) { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, 0.2); } /* divisores del XD, ausentes en el tema original */
.hero__info-icon { width: 64px; height: 64px; flex-shrink: 0; } /* XD: 64×64 (rect 226..290 × 987..1051) */
.hero__info-text { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.hero__info-label { font-family: var(--font-ui); font-weight: 700; font-size: 22px; line-height: 26px; color: #F5F7FA; }
.hero__info-value { font-family: var(--font-ui); font-weight: 400; font-size: 22px; line-height: 26px; color: #F5F7FA; }
@media (max-width: 900px) {
  .hero { height: auto; min-height: 600px; }
  .hero__wrap { padding-bottom: 24px; }
  .hero__character { opacity: 0.45; right: -22%; }
  .hero__info { flex-wrap: wrap; gap: 18px 30px; }
  /* Los valores de arriba reproducen la composición fija del XD a 1920 (bloque bajado 96px,
     separaciones 11/78, fila info metida 26/81, íconos de 64). Acá la caja deja de tener alto
     fijo, así que vuelven al espaciado fluido que ya tenía el tema. */
  .hero__content { padding-top: 0; gap: 28px; }
  .hero__subtitle { margin-top: 0; }
  .hero__buttons { margin-top: 0; }
  .hero__info { margin: 0; }
  .hero__info-icon { width: 48px; height: 48px; }
}
@media (max-width: 600px) {
  /* Mobile = artboard "INTELIGENCIA-430x932" del XD mobile, medido capa por capa en su AGC
     (docs/xd-ref/mobile/). Las coordenadas de los comentarios son px de ese artboard, con y=0 en el
     tope de la página: el header fijo ocupa 0..50 y el hero se ve de 50 a 932, así que la sección
     arranca debajo del header igual que en desktop. var(--xd-m) = 1px de diseño (base/base.css). */
  .hero {
    height: auto;
    min-height: 0;
    background: #011918; /* si un texto largo estira el hero, lo que sobra abajo es del tono del degradado */
  } /* sin isolation ni z-index: el WhatsApp (fijo, z 90) vive adentro y quedaría debajo de las secciones siguientes */
  .hero__bg { /* "FONDO": 1867.7×882 en (-793.6, 50) — la foto de desktop entera, recortada por el hero */
    inset: auto;
    top: calc(50 * var(--xd-m));
    left: calc(-793.56 * var(--xd-m));
    width: calc(1867.72 * var(--xd-m));
    height: calc(882 * var(--xd-m));
    max-width: none;
    object-fit: fill;
  }
  .hero__character { /* "PERSONAJE": la imagen de desktop, 897×688 en (-104, 300); la máscara corta en 932 */
    top: calc(300 * var(--xd-m));
    left: calc(-104 * var(--xd-m));
    right: auto;
    bottom: auto;
    width: calc(897 * var(--xd-m));
    height: calc(688 * var(--xd-m));
    max-width: none;
    opacity: 1;
    transform: none;
    object-fit: fill;
    clip-path: inset(0 0 calc(56 * var(--xd-m)) 0);
  }
  /* Con imagen de teléfono (fondo_telefono / personaje_telefono en Bravo) la imagen ya es el recorte que se
     ve acá —el de la franja de 430 que dejan las cajas de arriba—, así que va a lo ancho del hero en
     vez de desbordarlo. Mismo alto y mismo top: se ve igual y baja mucho menos. `cover` y no `fill`:
     si el cliente sube otro recorte, no se deforma. */
  .hero__bg.hero__bg--con-movil { left: 0; width: calc(430 * var(--xd-m)); object-fit: cover; }
  .hero__character.hero__character--con-movil {
    left: 0;
    width: calc(430 * var(--xd-m));
    height: calc(632 * var(--xd-m));
    clip-path: none;
    object-fit: cover;
  }
  .hero__strip { /* "Rectángulo 14282": 430×421 en y=511, #011918 opaco a 36.6 del borde inferior y
                    transparente a 316.5, opacidad 88.1% en multiplicar */
    top: calc(511 * var(--xd-m));
    bottom: auto;
    height: calc(421 * var(--xd-m));
    background: linear-gradient(to top, #011918 calc(36.59 * var(--xd-m)), rgba(1, 25, 24, 0) calc(316.49 * var(--xd-m)));
    opacity: 0.881;
    mix-blend-mode: multiply;
  }
  .hero__wrap {
    min-height: calc(932 * var(--xd-m));
    padding: calc(114 * var(--xd-m)) 0 0; /* el titular arranca en y=114 */
  }
  .hero__content {
    flex: none;
    max-width: none;
    padding-top: 0;
    gap: 0;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .hero__title { /* "Imagen 68": 386×75.4 en (22, 114) */
    width: calc(386 * var(--xd-m));
    max-width: none;
    margin-left: calc(22 * var(--xd-m));
  }
  .hero__subtitle { /* barra 4×41 #06E547 en (28, 204) y texto Open Sans 16/19 #FFFFFF en x=40, caja de 339,
                       líneas base en 221 y 240 */
    width: calc(351 * var(--xd-m));
    max-width: none;
    margin: calc(14.61 * var(--xd-m)) 0 0 calc(28 * var(--xd-m));
    padding: calc(2 * var(--xd-m)) 0 calc(1 * var(--xd-m)) calc(8 * var(--xd-m)); /* 2 arriba: la línea de 19 de CSS deja la base 0.7 más alta que el XD */
    border-left-width: calc(4 * var(--xd-m));
    font-size: calc(16 * var(--xd-m));
    line-height: calc(19 * var(--xd-m));
    color: #FFFFFF;
  }
  .hero__buttons { /* "Componente 36": dos cajas de 210×40 en x=28, y=269 y 319 */
    flex-direction: column;
    flex-wrap: nowrap;
    gap: calc(10 * var(--xd-m));
    margin: calc(24 * var(--xd-m)) 0 0 calc(28 * var(--xd-m));
  }
  .hero__buttons .btn { /* texto Open Sans SemiBold 14 a 24 del borde izquierdo; flecha 12.9×10.8 a 24 del derecho */
    justify-content: space-between;
    width: calc(210 * var(--xd-m));
    min-width: 0;
    height: calc(40 * var(--xd-m));
    padding: calc(1 * var(--xd-m)) calc(24 * var(--xd-m) - 1px) 0; /* el borde de 1px va dentro de los 24; el 1 de arriba baja la base a 26 del tope */
    border-width: 1px;
    border-radius: calc(20 * var(--xd-m));
    font-family: var(--font-cuerpo);
    font-weight: 600;
    font-size: calc(14 * var(--xd-m));
    line-height: calc(19 * var(--xd-m));
  }
  .hero__buttons .btn--primary { color: #081819; }
  .hero__buttons .btn--ghost { background: transparent; border-color: #F5F7FA; color: #F5F7FA; }
  .hero__buttons .btn__arrow { /* flecha en y=283.3..294.2 de una caja 269..309: 0.75 arriba del centro */
    width: calc(12.89 * var(--xd-m));
    height: calc(10.84 * var(--xd-m));
    margin-top: calc(-1.5 * var(--xd-m));
  }
  .hero__buttons .btn--ghost .btn__arrow { width: calc(14.45 * var(--xd-m)); height: calc(14.45 * var(--xd-m)); } /* ícono de descarga: mismo alto visible que la flecha */
  .hero__info { /* al pie del hero: filas de 70/70/73/86 separadas por líneas de 382 en x=16, y=703/773/846 */
    display: block;
    width: calc(382 * var(--xd-m));
    margin: auto 0 0 calc(16 * var(--xd-m));
    padding: 0;
  }
  .hero__info::before { content: none; }
  .hero__info .hero__info-item {
    --texto-y: 13.8; /* de la línea de arriba al tope de la etiqueta: el XD no espacia parejo (13.8/14.2/15.5/16.1) */
    display: grid;
    grid-template-columns: calc(58 * var(--xd-m)) minmax(0, 1fr); /* íconos en x=33, textos en x=91 */
    align-items: start;
    gap: 0;
    height: calc(70 * var(--xd-m));
    padding: calc(var(--texto-y) * var(--xd-m)) 0 0 calc(17 * var(--xd-m));
    border-left: none;
  }
  .hero__info .hero__info-item + .hero__info-item {
    padding-top: calc(var(--texto-y) * var(--xd-m) - 1px);
    border-top: 1px solid #344055;
  }
  .hero__info .hero__info-item:nth-child(2) { --texto-y: 14.2; }
  .hero__info .hero__info-item:nth-child(3) { --texto-y: 15.5; height: calc(73 * var(--xd-m)); }
  .hero__info .hero__info-item:nth-child(4) { --texto-y: 16.1; }
  .hero__info .hero__info-item:last-child { height: calc(86 * var(--xd-m)); }
  /* Íconos: los SVG de assets/icons/header/ traen el marco de 64×64 de DESKTOP (dibujo alineado a la derecha,
     como en el XD de 1920). El XD mobile los achica cada uno distinto (Modalidad 72.1%, Fecha 72.4%, Hora 79.3%,
     Duración 82.9%): --ico-s es el marco a esa escala y --ico-x/--ico-y lo corren para que el dibujo caiga en
     su bbox mobile (33,650.6 · 33,719.6 · 33,790 · 37,862.5), medidos desde la columna (x=33) y el tope de la etiqueta. */
  .hero__info .hero__info-item { --ico-s: 46.13; --ico-x: 0.61; --ico-y: -2.09; }
  .hero__info .hero__info-item:nth-child(2) { --ico-s: 46.36; --ico-x: -8.35; --ico-y: -2.71; }
  .hero__info .hero__info-item:nth-child(3) { --ico-s: 50.76; --ico-x: -14.39; --ico-y: -6.43; }
  .hero__info .hero__info-item:nth-child(4) { --ico-s: 53.06; --ico-x: -20.69; --ico-y: -7.93; }
  .hero__info .hero__info-icon {
    width: calc(var(--ico-s) * var(--xd-m));
    height: calc(var(--ico-s) * var(--xd-m));
    margin: calc(var(--ico-y) * var(--xd-m)) 0 0 calc(var(--ico-x) * var(--xd-m));
  }
  .hero__info-text { white-space: nowrap; min-width: 0; }
  .hero__info-label { /* Open Sans Bold 17/23 #F5F7FA */
    font-family: var(--font-cuerpo);
    font-size: calc(17 * var(--xd-m));
    line-height: calc(23 * var(--xd-m));
  }
  .hero__info-value { /* Inter 18pt Regular 17/20, línea base 18.3 debajo de la etiqueta */
    font-size: calc(17 * var(--xd-m));
    line-height: calc(20 * var(--xd-m));
    margin-top: calc(-2.7 * var(--xd-m));
  }
  .hero__info-item:nth-child(3) .hero__info-value { margin-top: calc(-1.1 * var(--xd-m)); } /* en Hora el XD la baja 19.9, no 18.3 */
}
@media (min-width: 901px) and (max-height: 820px) {
  .hero { height: auto; }
  .hero__wrap { height: auto; padding-top: 116px; padding-bottom: 12px; } /* nav pasó de 80 a 110px (spec real del XD) */
  .hero__content { flex: 0 1 auto; justify-content: flex-start; gap: 14px; }
  .hero__title { width: clamp(360px, 35vw, 500px); }
  .hero__subtitle { font-size: 16px; max-width: 560px; }
  .hero__buttons { gap: 12px; }
  .hero__info { padding: 16px 0 18px; }
  .hero__info-icon { width: 44px; height: 44px; }
  .hero__info-label { font-size: 22px; line-height: 26px; }
  .hero__info-value { font-size: 22px; line-height: 26px; color: #F5F7FA; }
}
/* Laptop baja (1366×620 y 1440×620): artboard «Laptop 1440» del Figma, nodo 49:4. Ese artboard es el
   de 1920 a ×0.75, así que cada medida va como calc(N * var(--e)) con N = px del 1440 / 0.75. Pisa el
   bloque de max-height de arriba, que con px fijos dejaba íconos y textos del doble del diseño. */
@media (min-width: 1280px) and (max-width: 1440px) and (max-height: 700px) {
  .hero { height: 100vh; }
  .hero__strip { /* "Rectángulo 14282": 40% de abajo, #011918 al 9% → transparente al 75%, multiplicar 88% */
    height: 39.5%;
    background: linear-gradient(to top, #011918 9%, rgba(1, 25, 24, 0) 75%);
    opacity: 0.88;
    mix-blend-mode: multiply;
    z-index: 2;
  }
  .hero__character { top: 6.2%; bottom: auto; right: 3%; height: 95.2%; z-index: 3; } /* PERSONAJE va encima del degradado */
  .hero__wrap { height: 100%; padding-top: var(--header-h); padding-bottom: calc(14.7 * var(--e)); }
  .hero__content { flex: 1; justify-content: center; gap: 0; padding-top: 0; }
  .hero__title { width: calc(737 * var(--e)); } /* 552.75 */
  .hero__subtitle { /* barra 5.25×58.5, texto Open Sans 20.25/27.75 a 17.25 de la barra, caja 523.5 */
    margin-top: calc(34.5 * var(--e));
    padding: calc(2 * var(--e)) 0 calc(2 * var(--e)) calc(16 * var(--e));
    border-left-width: calc(7 * var(--e));
    font-size: calc(27 * var(--e));
    line-height: calc(37 * var(--e));
    max-width: calc(698 * var(--e));
  }
  .hero__buttons { gap: calc(24 * var(--e)); margin-top: calc(45 * var(--e)); } /* botones 199.5×42 separados 18 */
  .hero__buttons .btn { min-width: 0; width: calc(266 * var(--e)); }
  .hero__buttons .btn__arrow { width: calc(13.9 * var(--e)); height: calc(11.7 * var(--e)); } /* "Trazado 1": 10.4×8.8 */
  .hero__buttons .btn--ghost .btn__arrow { width: calc(16.5 * var(--e)); height: calc(16.5 * var(--e)); } /* "Trazado 39692": 12.3 */
  .hero__info { /* fila de 1140×64.9: línea arriba y 3 divisores 37.5 de alto desde y=27.4 */
    display: grid;
    grid-template-columns: 298fr 359fr 437fr 426fr;
    align-items: start;
    gap: 0;
    height: calc(86.5 * var(--e));
    margin: 0;
    padding: 0;
  }
  .hero__info::before { left: 0; }
  .hero__info .hero__info-item { position: relative; align-items: flex-start; gap: calc(15 * var(--e)); padding-left: calc(80.5 * var(--e)); border-left: none; }
  .hero__info .hero__info-item:first-child { padding-left: calc(25.5 * var(--e)); }
  .hero__info .hero__info-item:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(36.5 * var(--e));
    height: calc(50 * var(--e));
    border-left: 1px solid rgba(161, 181, 211, 0.41);
  }
  /* íconos: Modalidad 48, Fecha 40, Hora 34.4, Duración 25.7×37 — con su tope en y 10.5/15.6/18/18 */
  .hero__info .hero__info-icon { width: auto; height: calc(64 * var(--e)); margin-top: calc(14 * var(--e)); }
  .hero__info .hero__info-item:nth-child(2) .hero__info-icon { height: calc(53.2 * var(--e)); margin-top: calc(20.9 * var(--e)); }
  .hero__info .hero__info-item:nth-child(3) .hero__info-icon { height: calc(45.9 * var(--e)); margin-top: calc(24 * var(--e)); }
  .hero__info .hero__info-item:nth-child(4) .hero__info-icon { height: calc(49.4 * var(--e)); margin-top: calc(24 * var(--e)); }
  .hero__info-text { padding-top: calc(21 * var(--e)); }
  .hero__info-label,
  .hero__info-value { font-size: calc(22 * var(--e)); line-height: calc(24 * var(--e)); } /* Inter 16.5, valor 18 debajo */
}

/* ── sections/desafio/desafio.css ── */
/* desafio — reconstruida desde el XD, medida sobre docs/xd-ref/pantalla-0.png (0.5x: diseño = ×2)
   y calibrada contra el render: a 72px el ancho de tinta del título coincide al píxel con el XD
   ("Formamos" 396, "estrategas que" 556), así que estos números son del diseño, no a ojo.
   Coordenadas de diseño a 1920, con la sección arrancando en y=1082:
   - fondo: degradé vertical #011918 → #011213 (+722px). NO el #03130D plano de las demás
     secciones oscuras: es lo que dan los píxeles de toda la franja, igual en x=40 que en x=1760.
   - resplandor: ver .desafio::before (spec del XD: top 1074, left 419, 1080×329).
   - eyebrow Open Sans Light 15px, tracking 2px (tinta de 250px de ancho; de las variantes que dan
     ese ancho es la de menor diff contra la referencia), línea base en 1190.
   - título Montserrat Bold 72/64 en la columna de 587px → corta en 4 líneas como el XD.
   - subrayado 78×7 en y=1568; tags: caja 479×88 en x=203, y=1610 (spec) — Open Sans 22px, 3 por
     fila, filas cada 58px, punto verde de 8px.
   - tarjeta 820×461 en x=900..1720, y=1264; la tarjeta de porque arranca en y=1826. */

.desafio {
  position: relative;
  overflow-x: clip; /* el resplandor mide 1080px: en mobile no tiene que abrir scroll horizontal */
  color: var(--white);
  background: linear-gradient(to bottom, #011918 0, #011213 722px) #011213;
}
/* Resplandor "Enmascarar grupo 107" — spec del XD: top 1074 (8px ANTES del tope de la sección:
   pisa el pie del hero), left 419, 1080×329. El panel dice opacity 0.36, pero el PNG exportado ya
   la trae aplicada: medido contra la referencia, con 0.36 el diff de la franja da 8.24 y el verde
   queda a la mitad; sin opacidad extra da 0.69. Por eso no lleva opacity.
   z-index 3: encima del degradé del hero (.hero__strip, también 3 pero antes en el DOM) y debajo
   de su contenido (.hero__wrap, 4); .desafio__inner repite el 3 para quedar encima del resplandor. */
.desafio::before {
  content: "";
  position: absolute;
  top: -8px;
  left: calc(50% - 541px);
  width: 1080px;
  height: 329px;
  background: url("assets/images/desafio-resplandor.webp") 0 0 / 100% 100% no-repeat;
  z-index: 3;
  pointer-events: none;
}
.desafio__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 587fr) 113px minmax(0, 820fr);
  align-items: start;
  padding-top: 90px;
  padding-bottom: 5px; /* + los 96px de padding-top de .porque = su tarjeta a 101px de esta, como
    el XD (1725→1826). Solo arriba/abajo: los laterales los pone .wrap */
}
.desafio__left {
  grid-column: 1;
  min-width: 0;
  container-type: inline-size; /* el título escala con la columna (ver .desafio__title) */
}
.desafio__label {
  font-family: var(--font-cuerpo);
  font-weight: 300;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 1.5px; /* AGC: charSpacing 100/1000 em sobre 15px = 1.5, no 2 */
  color: var(--green);
  margin-bottom: 83px;
}
.desafio__title {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: min(72px, 12.266cqi); /* 72/587: 72px exactos a 1920; en laptops la columna se angosta y
    el título la acompaña en vez de desbordar ("estrategas" solo ya mide 400px a 72) */
  line-height: 0.889; /* 64px a 72 */
  color: #F5F7FA; /* el blanco del XD, no #FFF: con la misma cobertura que el verde da el mismo tono */
  margin-bottom: 35px;
}
.desafio__title-destacado { color: var(--green); }
.desafio__underline {
  display: block;
  width: 78px;
  height: 7px;
  border-radius: 4px;
  background: var(--green);
  margin-bottom: 35px;
}
.desafio__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  column-gap: min(28px, 4.77cqi);
  margin-left: 3px; /* spec del XD: la caja de tags va en x=203, 3px adentro del título */
}
/* Siempre 3 por fila (XD: 3 arriba, 3 abajo). La plantilla mete un <li> vacío y oculto cada 3 que
   ocupa el 100% de la línea y fuerza el salto; su alto es la separación entre filas (58 − 30).
   Tamaños en cqi de la columna, como el título, para que en laptops las 3 sigan entrando. */
.desafio__tags li {
  font-family: var(--font-cuerpo);
  font-size: clamp(14px, 3.748cqi, 22px);
  line-height: 1.5; /* 33px a 22 — el AGC da lineHeight 33, no 30 */
  color: #F5F7FA; /* el AGC da el fill exacto: #F5F7FA. El #A6B2BA venía de medir la tinta sobre el
                     PNG a 0.5x, donde el antialias del trazo apaga el tono. */
  display: flex;
  align-items: center;
  gap: min(26px, 4.43cqi); /* palabra→punto; punto→palabra lo da el column-gap. Antes el gap y el
    margin-left del punto se sumaban (48px) y el punto quedaba lejos de su palabra */
}
.desafio__tags li:not(:last-child)::after {
  content: "";
  flex-shrink: 0;
  width: min(8px, 1.363cqi);
  height: min(8px, 1.363cqi);
  border-radius: 50%;
  background: var(--green);
}
.desafio__tags li.desafio__tags-salto { flex-basis: 100%; height: min(28px, 4.77cqi); }
.desafio__tags li.desafio__tags-salto::after { content: none; }
.desafio__media {
  grid-column: 3;
  position: relative;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 820 / 461;
  margin-top: 92px; /* y=1264: 92px debajo del tope del eyebrow */
  border-radius: 18px;
  overflow: hidden;
  container-type: inline-size; /* el lockup del póster escala con la tarjeta (unidades cqi) */
  background: #0C1320;
  border: 1px solid rgba(6, 229, 71, 0.2); /* se mezcla con el azul de la tarjeta, no con el fondo */
  border-bottom-color: #3F7550; /* el filo de abajo es más claro, con un hilo dorado encima (en el póster) */
}
.desafio__media iframe { display: block; width: 100%; height: 100%; border: 0; }
.desafio__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Sin póster cargado, la tarjeta dibuja la del XD: azul noche (no verde), puntos cada 50px con
   líneas tenues cada 100, halo cálido detrás del logo y el lockup de Goberna Escuela — escudo
   108×124 en y=1374, GOBERNA con tope de mayúscula en 1532, ESCUELA en 1588. Las medidas van en
   cqi sobre los 818px de contenido de la tarjeta (1cqi = 8.18px a 1920).
   El escudo es el vector real (assets/icons/escudo.svg). GOBERNA/ESCUELA van en Montserrat como
   reemplazo del logotipo. El póster REAL del XD ya está en assets/images/desafio-poster.webp (recurso
   671be6da del AGC, recortado a la tarjeta: en desktop y mobile el XD lo recorta igual) y sale por
   `poster` del contenido; este dibujo queda de respaldo si el contenido no trae póster. */
.desafio__poster--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 13.325cqi; /* 109px */
  background:
    linear-gradient(to top, rgba(190, 175, 40, 0.25) 0 2px, rgba(255, 255, 255, 0.075) 2px 4px, transparent 4px),
    radial-gradient(ellipse 15.9% 26.1% at 50% 47%, rgba(235, 220, 180, 0.09), transparent),
    radial-gradient(ellipse 20% 14% at 0 0, rgba(6, 229, 71, 0.03), transparent),
    radial-gradient(ellipse 22% 30% at 4% 32%, rgba(3, 5, 9, 0.45), transparent),
    radial-gradient(circle, rgba(210, 220, 200, 0.2) 0 1px, transparent 1.5px) 10px 10px / 50px 50px,
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 10px 0 / 100px 100%,
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 10px / 100% 100px,
    linear-gradient(to bottom, transparent 55%, rgba(4, 8, 22, 0.5)),
    linear-gradient(to right, #0C121D, #111723 35%, #131A26 65%, #0F1622);
}
.desafio__poster-escudo {
  flex-shrink: 0;
  width: 13.203cqi; /* 108px */
  height: 15.159cqi; /* 124px */
  background: #EFC744; /* el dorado del XD; el SVG trae #E8BE23, por eso va de máscara y no de <img> */
  -webkit-mask: url("assets/icons/escudo.svg") center / contain no-repeat;
  mask: url("assets/icons/escudo.svg") center / contain no-repeat;
}
.desafio__poster-word {
  margin-top: 3.423cqi; /* 28px */
  padding-left: 1.170cqi; /* compensa el tracking que sobra después de la última letra */
  font-family: var(--font-titulo);
  font-weight: 800; /* el logotipo del XD es más grueso que un 700 */
  font-size: 4.523cqi; /* 37px */
  line-height: 1;
  letter-spacing: 1.170cqi; /* 9.57px: tinta de 256px de ancho, la del XD */
  color: #CCCDD1;
}
.desafio__poster-sub {
  margin-top: 2.689cqi; /* 22px */
  padding-left: 0.990cqi;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 2.078cqi; /* 17px */
  line-height: 1;
  letter-spacing: 0.990cqi; /* 8.1px: tinta de 130px de ancho, la del XD */
  color: #C2A64C;
}
.desafio__media-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #0a1410;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.desafio__media-play svg { width: 30px; height: 30px; margin-left: 3px; }
.desafio__media-play:hover { transform: scale(1.08); }
/* Con marcas el play se dibuja si hay algo en `video_url`; si no era una URL https (un <iframe> sin src,
   un esquema ejecutable), `data-video-src` sale vacío y el botón no se muestra: nada de play roto. */
.desafio__media[data-video-src=""] .desafio__media-play { display: none; }
@media (max-width: 1100px) { /* no 900: a 1024 la columna de texto quedaba en 213px (título a 26px,
  un tag por renglón) — apilado se ve como el XD, con el título a 72px en 4 líneas */
  .desafio__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 0;
    padding-left: 200px;
    padding-right: 200px;
  }
  .desafio__left { grid-column: 1; }
  .desafio__label { margin-bottom: 28px; }
  .desafio__media { grid-column: 1; max-width: none; margin-top: 0; }
}
@media (max-width: 600px) {
  /* Mobile = XD mobile "INTELIGENCIA-430x932" (docs/xd-ref/mobile/), y=932..1494: arranca donde
     termina el hero y termina donde arranca la tarjeta de porque (esta sección pone esos 64 de aire;
     .porque va sin padding arriba). Coordenadas en px del artboard; var(--xd-m) = 1px de diseño. */
  .desafio { /* "Rectángulo 14244": 430×2855 desde y=932, #011918 → #000105; sigue detrás de porque */
    background: linear-gradient(to bottom, #011918 0, #000105 calc(2855 * var(--xd-m))) #011918;
  }
  .desafio::before { /* "Elipse 310" (404×246 en 13,788.7; radial r 48.1%, 61.9% de opacidad, grupo al 80%)
                        recortada por su máscara a 404×123 desde y=931: el resplandor no pisa el hero */
    top: calc(-1 * var(--xd-m));
    left: calc(13 * var(--xd-m));
    width: calc(404 * var(--xd-m));
    height: calc(123 * var(--xd-m));
    background: radial-gradient(calc(194.31 * var(--xd-m)) calc(118.34 * var(--xd-m)) at calc(202 * var(--xd-m)) calc(-19.27 * var(--xd-m)),
      rgb(48, 228, 177) 0, rgba(48, 228, 177, 0.1098) 78.82%, rgba(48, 228, 177, 0) 100%);
    opacity: 0.495;
  }
  .desafio__inner {
    gap: 0;
    padding: calc(27.23 * var(--xd-m)) calc(16 * var(--xd-m)) calc(64 * var(--xd-m));
  }
  .desafio__label { /* Open Sans Light 11/37, tracking 100, #06E547, línea base en 982 */
    font-size: calc(11 * var(--xd-m));
    line-height: calc(37 * var(--xd-m));
    letter-spacing: calc(1.1 * var(--xd-m));
    margin-bottom: calc(27.95 * var(--xd-m));
  }
  .desafio__title { /* Montserrat Bold 26/33, líneas base en 1050 y 1083 */
    font-size: calc(26 * var(--xd-m));
    line-height: calc(33 * var(--xd-m));
    margin-bottom: calc(9.82 * var(--xd-m));
  }
  .desafio__underline { /* "Rectángulo 14246": 40×4 #06E547 en (16, 1100), sin radio */
    width: calc(40 * var(--xd-m));
    height: calc(4 * var(--xd-m));
    border-radius: 0;
    margin-bottom: calc(13.07 * var(--xd-m));
  }
  .desafio__tags { /* Open Sans 14 #F5F7FA en columnas x=14/130/256 (2 antes del título), bases en 1136 y 1163;
                      puntos de 4 a 24 del arranque de la columna siguiente */
    display: grid;
    grid-template-columns: calc(116 * var(--xd-m)) calc(126 * var(--xd-m)) auto;
    column-gap: 0;
    margin-left: calc(-2 * var(--xd-m));
  }
  .desafio__tags li {
    position: relative;
    display: block;
    font-size: calc(14 * var(--xd-m));
    line-height: calc(27 * var(--xd-m));
  }
  .desafio__tags li.desafio__tags-salto { display: none; } /* la grilla ya corta de a 3 */
  /* la plantilla intercala un <li> de salto cada 3: columnas 1 y 2 = hijos 4n+1 y 4n+2 */
  .desafio__tags li:nth-child(4n+1)::after,
  .desafio__tags li:nth-child(4n+2)::after {
    content: "";
    position: absolute;
    top: calc(9.93 * var(--xd-m)); /* fila 1: centro del punto 7 arriba de la línea base */
    right: calc(24 * var(--xd-m));
    width: calc(4 * var(--xd-m));
    height: calc(4 * var(--xd-m));
  }
  .desafio__tags li:nth-child(4n+3)::after,
  .desafio__tags li:last-child::after { content: none; }
  .desafio__tags li:nth-child(n+5)::after { top: calc(11.93 * var(--xd-m)); } /* fila 2: 5 arriba de la base, no 7 */
  .desafio__media { /* tarjeta 398×224 en (16, 1206): imagen con máscara de radio 17 y borde #FFC901 1px al 26.7% */
    width: calc(398 * var(--xd-m));
    height: calc(224 * var(--xd-m));
    margin-top: calc(34.93 * var(--xd-m));
    border: 0;
    border-radius: calc(17 * var(--xd-m));
  }
  .desafio__media::after { /* el borde del XD va POR ENCIMA de la imagen, no la corre: anillo interior */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: calc(18 * var(--xd-m));
    box-shadow: inset 0 0 0 1px rgba(255, 201, 1, 0.267);
    pointer-events: none;
  }
}

/* ── sections/porque/porque.css ── */
/* porque — panel de pestañas. Medido sobre docs/xd-ref/pantalla-{0,1,2}.png (una por pestaña
   activa) y calibrado en el navegador contra el ancho de tinta de cada texto: el título a 56px
   da 760 de tinta, el XD 762; los textos a 19px, 537 contra 537. Coordenadas de diseño a 1920,
   con la tarjeta en x=100, y=1826:
   - tarjeta 1720×993 (hasta y=2820), #F3F4F8, radio 20; 88 arriba, 200 a los lados, 80 abajo.
   - título Montserrat Bold 56/54 #081819, las dos líneas del mismo color; subrayado 78×7 en 2043.
   - pestañas: pills de 48 de alto en y=2098, Open Sans 17px, 33 de padding y 48 de gap. En el
     XD la fila no está centrada: va de x=574 a 1315 (centro 944.5, no 960).
   - divisor #DFE5EF de x=300 a 1620, en y=2174.
   - panel: foto 620×500 en x=300, y=2240, radio 10; columna de texto en x=1001, de 619.
   - ícono de ~44px en y=2246; título del panel Montserrat 34px (negrita primero), tope de
     mayúscula en 2312; textos Open Sans 19px — con medida de línea distinta en cada patrón. */

.porque { padding: var(--sp, calc(80 * var(--e))) 0 0; } /* abajo 0: la separación con metodo la pone metodo */
.porque__card {
  background: #F3F4F8;
  color: #081819;
  border-radius: calc(20 * var(--e));
  padding: calc(88 * var(--e)) clamp(calc(40 * var(--e)), 10.42vw, calc(200 * var(--e))) calc(80 * var(--e)); /* 200 a 1920 */
  box-shadow: 0 calc(10 * var(--e)) calc(17 * var(--e)) rgba(0, 0, 0, 0.36);
}
.porque__title {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: calc(56 * var(--e));
  line-height: calc(54 * var(--e));
  text-align: center;
  color: #081819;
}
.porque__underline { width: calc(78 * var(--e)); height: calc(7 * var(--e)); border-radius: calc(4 * var(--e)); background: var(--color-acento); margin: calc(21 * var(--e)) auto 0; }

.porque__tabs-wrap { margin-top: calc(48 * var(--e)); padding-bottom: calc(28 * var(--e)); border-bottom: calc(2 * var(--e)) solid #DFE5EF; }
.porque__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(12 * var(--e)) calc(48 * var(--e));
  margin-left: calc(-31 * var(--e)); /* corre el centro 15.5px a la izquierda, como el XD */
}
.porque__tab {
  height: calc(48 * var(--e));
  padding: 0 calc(33 * var(--e));
  font-family: var(--font-cuerpo);
  font-weight: 400;
  font-size: calc(17 * var(--e));
  color: #081819;
  background: transparent;
  border: none;
  border-radius: calc(24 * var(--e));
  cursor: pointer;
  transition: background .2s, color .2s;
}
.porque__tab--active { background: var(--color-acento); }
.porque__tab-ic { width: calc(16 * var(--e)); height: calc(16 * var(--e)); margin-right: calc(8 * var(--e)); vertical-align: calc(-3 * var(--e)); }

.porque__panel {
  display: none;
  grid-template-columns: minmax(0, 620fr) minmax(0, 619fr);
  column-gap: calc(81 * var(--e));
  align-items: start;
  margin-top: calc(64 * var(--e));
}
.porque__panel--active { display: grid; }
.porque__img { display: block; width: 100%; aspect-ratio: 620 / 500; border-radius: calc(10 * var(--e)); object-fit: cover; }
.porque__content { min-width: 0; }
.porque__heading-ic { display: block; width: calc(60 * var(--e)); height: calc(44 * var(--e)); object-fit: none; object-position: left bottom; margin: calc(6 * var(--e)) 0 0 calc(7 * var(--e)); } /* SVG del XD a tamaño real, apoyados abajo: en el XD los tres terminan en y=2290 */
.porque__heading {
  margin-top: calc(12 * var(--e));
  font-family: var(--font-titulo);
  font-weight: 400;
  font-size: calc(32 * var(--e)); /* AGC de las 3 pantallas: Montserrat 32/64 en los tres paneles, no 34/43 */
  line-height: calc(64 * var(--e));
  color: #042221;
}
.porque__panel[data-panel="t1"] .porque__heading { color: #253054; } /* en el XD solo la primera va en azul */
.porque__heading-destacado { font-weight: 800; } /* AGC: ExtraBold, no Bold */

.porque__parrafo, .porque__items-intro, .porque__items-inline, .porque__list li {
  font-family: var(--font-cuerpo);
  font-size: calc(19 * var(--e));
  color: #0A0F15;
}
.porque__parrafo strong, .porque__items-inline strong { font-weight: 700; }
.porque__items-inline { color: #042221; } /* AGC: la línea de salidas va en #042221, no en el #0A0F15 de los párrafos */

/* --parrafos: 19/32, en una caja de ~518 (el XD corta "…contrainteligencia" antes de "que") */
.porque__content--parrafos .porque__parrafo { max-width: calc(518 * var(--e)); line-height: calc(32 * var(--e)); }
/* Los paneles y los párrafos van dentro de un contenedor de la lista (Contrato 10: `data-lista`) que no
   pinta nada: `display: contents` los deja como hijos directos de su caja, igual que antes de la
   plantilla de marcas. Por eso el «después del título» se escribe hasta el primer párrafo del contenedor. */
.porque__panels, .porque__parrafos { display: contents; }
.porque__content--parrafos .porque__heading + .porque__parrafos > .porque__parrafo:first-child { margin-top: calc(21 * var(--e)); }
.porque__parrafo--con-divisor { margin-top: calc(16 * var(--e)); padding-top: calc(16 * var(--e)); border-top: calc(2 * var(--e)) solid #DFE5EF; }

/* --lista: Open Sans 19/28 con 26 entre ítems (marcos del XD en y=2370/2452/2506/2560/2614/2696); la
   flecha es "Trazado 39723" del XD, rellena, 14.71×14.71 a 5px del tope de la línea, y el texto arranca
   25px adentro. */
.porque__list { margin-top: calc(24 * var(--e)); list-style: none; display: flex; flex-direction: column; gap: calc(26 * var(--e)); }
.porque__list li { position: relative; padding-left: calc(25 * var(--e)); line-height: calc(28 * var(--e)); } /* sin color propio: hereda el #0A0F15 del bloque de cuerpo de arriba, que es lo que dice Figma. Antes pisaba con #1B1F25, el único de los tres colores de la sección sin nota que lo justificara */
.porque__list li::before {
  content: "";
  position: absolute; left: 0; top: calc(4.95 * var(--e)); width: calc(14.71 * var(--e)); height: calc(14.71 * var(--e));
  background: var(--color-acento);
  -webkit-mask: url("assets/icons/xd/porque-flecha.svg") center / 100% 100% no-repeat;
  mask: url("assets/icons/xd/porque-flecha.svg") center / 100% 100% no-repeat;
}

/* --inline: 19/28 en una caja de ~586 (corta "Análisis de" antes de "riesgos") */
.porque__content--inline .porque__parrafo,
.porque__content--inline .porque__items-intro,
.porque__content--inline .porque__items-inline { max-width: calc(586 * var(--e)); line-height: calc(28 * var(--e)); }
.porque__content--inline .porque__heading + .porque__parrafos > .porque__parrafo:first-child { margin-top: calc(24 * var(--e)); }
.porque__content--inline .porque__items-intro { margin-top: calc(21 * var(--e)); }
.porque__content--inline .porque__items-inline { margin-top: calc(17 * var(--e)); }

.porque__nota {
  margin-top: calc(18 * var(--e));
  padding: calc(14 * var(--e)) calc(16 * var(--e));
  border: 1px solid rgba(8, 24, 25, 0.14);
  border-radius: calc(10 * var(--e));
  font-family: var(--font-cuerpo);
  font-size: calc(13 * var(--e));
  line-height: 1.5;
  color: #3a4a44;
}
.porque__nota strong { color: #081819; }

@media (max-width: 1100px) { /* apila foto y texto, como desafio */
  .porque__panel { grid-template-columns: 1fr; row-gap: 32px; }
  .porque__tabs { margin-left: 0; gap: 10px 16px; }
}

/* ── MÓVIL ────────────────────────────────────────────────────────────────────
   XD 430×932: tarjeta 398×961 en (16,1494), o sea de 1494 a 2455. Números del
   .agc, verificados con `node tools/xd-diff.mjs porque`. Los 64 de aire con
   desafío los pone desafío (su padding-bottom), así que acá arriba va 0.
   El artboard tiene abierta la 3ª solapa (Perfil del egresado) y el sitio abre la
   1ª: lo que se puede calzar al píxel es la caja, el título, las pastillas, la
   imagen y el ícono — el largo del cuerpo depende de qué panel esté abierto. */
@media (max-width: 600px) {
  .porque { padding: 0; }
  .porque__card {
    padding: 40px 16px 35px; /* título en 1534; el pie de la tarjeta cae en 2455 */
    border-radius: 10px;
    background: #FFFFFF; /* en el móvil la tarjeta es blanca, no el #F3F4F8 de escritorio */
    overflow: hidden; /* la imagen del panel se sale 16px por la derecha, el XD la recorta */
  }
  .porque__title { font-size: 26px; line-height: 32px; }
  .porque__underline { width: 40px; height: 4px; border-radius: 0; margin: 8px auto 0; }
  /* La línea divisoria es de la referencia, no del artboard (el .agc no la dibuja),
     pero entra dentro de los mismos 24px que el XD deja entre las solapas y la
     foto: 12 de aire, el filete, y los 11 que pone la imagen. */
  .porque__tabs-wrap {
    margin-top: 36px;
    padding-bottom: 12px;
    border-bottom: 1px solid #DFE5EF;
  }
  /* Las tres pastillas y sus gaps ocupaban 374px contra los 366 disponibles de la
     tarjeta (32..398), así que "Perfil del egresado" —la de mayor tinta— caía sola
     a un segundo renglón a 430. Se achica tipografía (13→12.7 a 430) y padding
     (16→14) para que a 430 la fila entre de a tres con margen (~16px de aire).
     Por debajo de ~400 la fuente pisa el piso de 11px y la fila vuelve a partir
     en dos renglones — same behavior que antes de este cambio. */
  .porque__tabs {
    gap: 6px 2px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: 0;
  }
  .porque__tab {
    height: 40px;
    padding: 0 clamp(8px, 3.26vw, 14px);
    font-size: clamp(11px, 2.95vw, 12.7px);
    border-radius: 20px;
    white-space: nowrap;
  }
  /* minmax(0,1fr) y no el `minmax(0,620fr)` heredado: con la imagen de 410 adentro,
     la columna del panel crecía a 410 y se llevaba puesto el padding de la tarjeta
     — el texto terminaba midiendo 398 de ancho y cortando en menos líneas. */
  .porque__panel { grid-template-columns: minmax(0, 1fr); margin-top: 11px; row-gap: 0; }
  /* La foto va DENTRO de la tarjeta, con su margen y sus esquinas redondeadas, como
     la referencia. En el artboard mide 410 en x=20 —o sea que se sale 16px por la
     derecha y la tarjeta la recorta—; acá manda la referencia. */
  .porque__img {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 366 / 273; /* el alto del XD (273) sobre el ancho útil de la tarjeta */
    margin-left: 0;
    border-radius: 10px;
  }
  .porque__heading-ic {
    width: 36.8px;
    height: 35.8px;
    object-fit: contain;
    object-position: left top;
    margin: 22px 0 0;
  }
  /* AGC 430: el título del panel es Montserrat-ExtraBold 24 (#253054 para t3 en
     el artboard). El .heading base es 400 y el segundo término sale así en
     Thin — en el móvil todo el rótulo es ExtraBold. La caja sigue en 29 (el
     line-height 64 del marco XD no aplica a una línea sola). */
  .porque__heading { margin-top: 16px; font-size: 24px; line-height: 29px; font-weight: 800; }
  .porque__panel[data-panel="t3"] .porque__heading { color: #253054; }
  /* AGC 430: la línea de salidas va en Inter Bold #0A0F15 (el base #042221 es del XD desktop). */
  .porque__items-inline { color: #0A0F15; }
  /* En el móvil el cuerpo de la tarjeta es Inter, no el Open Sans de escritorio
     (el .agc da Inter18pt-Regular/Bold 16/28): con Open Sans la misma línea de
     salidas entra en 5 renglones en vez de 4 y estira la tarjeta 28px. */
  .porque__parrafo, .porque__items-intro, .porque__items-inline, .porque__list li {
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 28px;
  }
  /* XD: el marco de texto mide 341, no los 366 de la columna — con 366 el párrafo
     entra en 4 líneas en vez de 5 y la tarjeta queda 15px corta. Va con el prefijo
     del patrón porque las reglas de arriba (--inline, --parrafos) son más
     específicas y, sin él, el max-width de escritorio gana igual. */
  .porque__content--inline .porque__parrafo,
  .porque__content--inline .porque__items-intro,
  .porque__content--inline .porque__items-inline,
  .porque__content--parrafos .porque__parrafo,
  .porque__list li { max-width: 341px; }
  /* En el XD el párrafo, el renglón en blanco y el intro son UN solo bloque de
     texto de 7 renglones: por eso el aire antes del intro es exactamente una
     línea (28) y no un margen suelto. */
  .porque__content--inline .porque__heading + .porque__parrafos > .porque__parrafo:first-child { margin-top: 13.6px; }
  .porque__content--inline .porque__items-intro { margin-top: 28px; }
  .porque__content--inline .porque__items-inline { margin-top: 12.6px; }
  .porque__list { gap: 12px; }
  .porque__list li::before { top: 3.5px; }
}
/* Laptop baja (1366×620 y 1440×620), mismo rango que hero y metodo. La caja del ícono escala con --e
   (45×33 a 1440) pero `object-fit: none` deja el SVG a su tamaño del XD (54×36 y 45×45), así que se
   recortaba arriba y a la derecha. `contain` lo achica en proporción, apoyado abajo como a 1920
   (Figma Laptop, nodo 49:445: 32.4 a 1440). */
@media (min-width: 1280px) and (max-width: 1440px) and (max-height: 700px) {
  .porque__heading-ic { object-fit: contain; }
}

/* ── sections/metodo/metodo.css ── */
/* metodo — "De la información a la acción estratégica". Medido sobre docs/xd-ref/pantalla-0.png
   (0.5x) y calibrado en el navegador contra el ancho de tinta: "La acción estratégica." a 56px
   da 629, el XD 630; el párrafo a 20px, 560 contra 560; el título de paso a 24px, 327 contra 327.
   Coordenadas de diseño a 1920, con la sección arrancando en y=2820 (pie de la tarjeta de porque):
   - fondo: degradé casi negro #00090B → #000105 (+884), NO el #03130D.
   - resplandor: mismo PNG que desafio (mismo pico #0F5141 y la misma caída de 240px), centrado
     y pegado al tope; lo que arriba se ve más oscuro es la sombra de la tarjeta de porque.
   - título Montserrat Bold 56/54 #F5F7FA + verde en x=200, y=2922; subrayado 78×7 en 3054.
   - foto 845×566 en x=200, y=3081: es la máscara "Enmascarar grupo 139" del XD sobre la imagen
     original de 1634×1157 (recortada ya así en metodo-ajedrez.webp); cierre Open Sans 19px
     verde en mayúscula, tope en 3686.
   - columna derecha desde x=1120 (los divisores van de 1120 a 1640): párrafo Open Sans 20/32
     #F5F7FA en x=1130, y=2938; pasos cada 151px con ícono de 46 en x=1132, título Montserrat
     Bold 24 #F5F7FA (mayúscula en 3127) y texto Open Sans 17/30 #B6B9BC en x=1190. */

.metodo {
  position: relative;
  overflow-x: clip; /* el resplandor mide 1080px */
  background: linear-gradient(to bottom, #00090B 0, #000105 calc(884 * var(--e))) #000105;
  padding: calc(102 * var(--e)) 0 calc(127 * var(--e)); /* abajo: + los 80 de docentes = su título en y=3912 (spec) */
}
.metodo::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 540 * var(--e));
  width: calc(1080 * var(--e));
  height: calc(329 * var(--e));
  background: url("assets/images/desafio-resplandor.webp") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.metodo__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 845fr) minmax(0, 600fr); /* 845 de foto + 75 + 600 = 1520 */
  column-gap: calc(75 * var(--e));
  align-items: start;
}
.metodo__media { min-width: 0; container-type: inline-size; }
.metodo__title {
  font-family: var(--font-titulo);
  font-weight: 700;
  /* Pedido explícito: los valores del XD en px literales, NO escalados por --e.
     El título deja de achicarse con el resto de la sección (el párrafo y los
     pasos de al lado sí siguen escalando). Ver la nota de colisión abajo. */
  font-size: 56px;
  line-height: 54px;
  width: 636px;
  letter-spacing: 0;
  color: #F5F7FA;
}
/* `font-weight: 700` explícito, no decorativo: la hoja del navegador le da a
   <strong> un `bolder`, que es RELATIVO al padre — con el h2 en 700 computaba
   900, y el renglón verde salía más pesado que el blanco. El Figma (nodo 7:17)
   tiene los dos en Montserrat Bold. */
.metodo__title strong { font-weight: 700; color: var(--color-acento); white-space: nowrap; }
.metodo__underline { width: calc(78 * var(--e)); height: calc(7 * var(--e)); border-radius: calc(4 * var(--e)); background: var(--color-acento); margin-top: calc(24 * var(--e)); }
.metodo__img { display: block; width: 100%; height: auto; aspect-ratio: 845 / 566; object-fit: cover; margin-top: calc(20 * var(--e)); }
/* El prototipo del XD hacía que al scrollear la foto pasara POR ENCIMA del header fijo
   (.metodo__img en z-index 101 contra los 100 del .nav). Se sacó a pedido: tapaba el logo
   y los links del nav al cruzarlos, y se leía como un bug antes que como un efecto. La
   foto ahora scrollea por debajo del header, como el resto de las secciones. */
.metodo__cierre {
  margin-top: calc(32 * var(--e));
  font-family: var(--font-ui); /* AGC: Inter, no Open Sans */
  font-weight: 400;
  font-size: calc(18 * var(--e)); /* AGC: 18, no 19 */
  text-transform: uppercase;
  color: var(--color-acento);
}

.metodo__panel { min-width: 0; padding-top: calc(16 * var(--e)); }
.metodo__text {
  max-width: calc(580 * var(--e)); /* el XD corta "…inteligencia con" antes de "aplicación" */
  margin-left: calc(10 * var(--e));
  font-family: var(--font-cuerpo);
  font-size: calc(20 * var(--e));
  line-height: calc(32 * var(--e));
  color: #F5F7FA;
}
.metodo__pasos { list-style: none; margin: calc(55 * var(--e)) 0 0; padding: 0; }
.metodo__paso { position: relative; display: flex; align-items: flex-start; gap: calc(12 * var(--e)); padding: calc(39 * var(--e)) 0 calc(11 * var(--e)) calc(12 * var(--e)); }
.metodo__paso:first-child { padding-top: 0; }
.metodo__paso:last-child { padding-bottom: 0; }
.metodo__paso:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(calc(520 * var(--e)), 100%);
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.metodo__paso-ic { flex-shrink: 0; width: calc(46 * var(--e)); height: calc(46 * var(--e)); margin-top: calc(5 * var(--e)); object-fit: none; object-position: left top; } /* los SVG del XD traen su tamaño real: sin escalar */
.metodo__paso-title { margin: 0; font-family: var(--font-titulo); font-weight: 700; font-size: calc(24 * var(--e)); line-height: calc(29 * var(--e)); color: #F5F7FA; }
/* 515 = el ancho del marco de texto en el Figma (nodo 7:102), y es lo que hace que
   los cuatro pasos corten donde corta el Figma. Con los 505 de antes, "inteligencia"
   se caía al segundo renglón: el `letter-spacing` de abajo suma ~10px en esa línea
   (63 caracteres × 0.17) y la dejaba en 509.5, apenas por encima del tope. La
   ventana que reproduce los cuatro cortes es 509.5–522.9. */
.metodo__paso-text { max-width: calc(515 * var(--e)); margin: calc(11 * var(--e)) 0 0; font-family: var(--font-cuerpo); font-size: calc(17 * var(--e)); line-height: calc(28 * var(--e)); letter-spacing: calc(0.17 * var(--e)); color: #F5F7FA; } /* AGC: lh 28 y fill #F5F7FA (el #B6B9BC salía de medir la tinta sobre el PNG a 0.5x) */

/* El título va en 56px LITERALES (no escalados), así que no encoge con la
   columna: su tinta mide 636px —el mismo ancho que le da el XD al marco— y la
   columna izquierda, que sí escala (845 · --e), recién lo aloja desde 1446px de
   viewport. Abajo de ese ancho la sección pasa a una columna; si no, el título
   se monta sobre el párrafo del panel.
   El umbral depende del peso: con el `bolder` heredado de <strong> la línea
   verde salía en 900 y medía 665px, que empujaba el corte hasta 1511. */
@media (max-width: 1445px) {
  .metodo__inner { grid-template-columns: 1fr; row-gap: 40px; }
  .metodo__panel { padding-top: 0; }
  .metodo__text { margin-left: 0; }
  /* Apilada, la fila es el ancho entero del wrap: los topes del artboard 1920
     (580/505/520 · --e) dejaban el texto en el tercio izquierdo y lo partían en
     dos renglones. Se sueltan para que cada bajada entre en una sola línea —
     misma familia, mismo cuerpo, misma interlínea. */
  .metodo__text { max-width: none; }
  .metodo__paso-text { max-width: none; }
  .metodo__paso:not(:last-child)::after { width: 100%; }
}
@media (max-width: 1100px) {
  .metodo { padding: 72px 0 80px; }
}
/* Banda 601–900: acá `--e` ya vale 1px (ver base.css), así que el gutter del
   .wrap se clava en 200px POR LADO y el ancho útil cae a `100vw - 400` — 201px
   a 601, 500px a 900. El título de 636px fijos no entra en ningún punto de esa
   banda, y como la sección va con `overflow-x: clip` no desbordaba: se cortaba
   a mitad de palabra ("La acción estratégic"). Arriba de 900 `--e` baja y los
   636 entran; abajo de 601 manda el bloque móvil.
   El cuerpo se calcula para que la tinta ocupe el ancho útil: 636 de tinta a
   56px dan 0.0880 px de tinta por px de cuerpo, y se toma 0.086 para dejar
   ~12px de aire. El piso de 22 es legibilidad — abajo de ~655 no alcanza y la
   línea verde pasa a partirse, por eso el `white-space: normal`. */
@media (min-width: 601px) and (max-width: 900px) {
  .metodo__title {
    width: auto;
    font-size: clamp(22px, calc((100vw - 400px) * 0.086), 56px);
    line-height: 1.07;
  }
  .metodo__title strong { white-space: normal; }
}
/* ── MÓVIL ────────────────────────────────────────────────────────────────────
   XD 430×932, sección de 2455 a 3681. Números del .agc, verificados con
   `node tools/xd-diff.mjs metodo`. El fondo es la tajada 53.3%..96.3% de la
   franja #011918 → #000105 que arranca en 932 y mide 2855 (ver desafio.css). */
@media (max-width: 600px) {
  .metodo {
    background: linear-gradient(to bottom, #010C0C, #000201);
    padding: 64px 0 65px; /* 2455+64 = título en 2519; 3616+65 = docentes en 3681 */
  }
  .metodo::before { display: none; } /* sin resplandor en el artboard móvil */
  .metodo__inner { row-gap: 0; } /* el aire entre la foto y el cuerpo lo pone .metodo__text */
  .metodo__title { font-size: 26px; line-height: 33px; width: auto; } /* el 636 del XD es del artboard 1920 */
  .metodo__underline { width: 40px; height: 4px; border-radius: 0; margin-top: 9px; }
  .metodo__img {
    /* XD: 466.5×311 en x=-25 — la foto se sale de los dos lados, no es full-width */
    width: calc(100% + 68.5px); /* 398 + 68.5 = los 466.5 del XD a 430, y escala abajo */
    max-width: none;
    height: auto;
    aspect-ratio: 466.5 / 311;
    margin: 14px 0 0 -41px;
  }
  .metodo__cierre {
    margin-top: 13px;
    font-family: var(--font-cuerpo); /* en el móvil es Open Sans 13 sin versalitas */
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
  }
  .metodo__text {
    max-width: 385px; /* XD: marco de texto de 385, no los 398 de la caja */
    margin: 48px 0 0;
    font-size: 15px;
    line-height: 28px;
  }
  .metodo__pasos { margin-top: 20.5px; }
  .metodo__paso {
    gap: 11.5px;
    /* 44 es el promedio: en el XD los cuatro pasos están puestos a mano y el aire
       entre uno y otro da 42, 52 y 51. Con 44 los tres quedan a ±6, que es la
       tolerancia con la que están cargados en tools/xd/specs-430.json. */
    padding: 44px 0 0 13px; /* XD: los íconos arrancan en x=29 y el texto en 86.5 */
  }
  .metodo__paso:first-child { padding-top: 0; }
  /* el XD deja menos aire después del primer paso (el único con tres renglones de
     texto): 42 contra los 52 y 51 de los otros dos saltos */
  .metodo__paso:nth-child(2) { padding-top: 34.5px; }
  .metodo__paso:nth-child(4) { padding-top: 51px; }
  /* Divisores del XD (Línea 712/713/714): 1px #A1B5D3 al 30%, de 16..414 (todo el
     ancho útil). Caen a la mitad del aire entre el texto del paso anterior y el
     título del siguiente (17.25, 22 y 25.5 = las mitades de los saltos 34.5/44/51). */
  .metodo__paso:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    background: rgba(161, 181, 211, 0.3);
    pointer-events: none;
  }
  .metodo__paso:nth-child(1)::after { top: calc(100% + 17.25px); }
  .metodo__paso:nth-child(2)::after { top: calc(100% + 22px); }
  .metodo__paso:nth-child(3)::after { top: calc(100% + 25.5px); }
  .metodo__paso-ic {
    width: 46px;
    height: 46px;
    margin-top: 0;
    object-fit: none; /* los SVG del XD ya vienen a la medida buena (44.7, 34.9, 35.1, 44.5) */
    object-position: left top;
  }
  .metodo__paso-title { font-size: 20px; line-height: 24px; }
  .metodo__paso-text { max-width: none; font-size: 15px; line-height: 24px; letter-spacing: 0.15px; margin-top: 3px; }
}
/* Laptop baja (1366×620 y 1440×620): artboard «Laptop 1440» del Figma, nodo 49:402. Es el de 1920 a
   ×0.75, así que va en calc(N * var(--e)) con N = px del 1440 / 0.75 — mismo criterio que el hero.
   Acá la sección vuelve a dos columnas: el apilado de max-width 1445 existe sólo porque el título va
   en 56px literales; escalado con --e mide 636·e y entra en la columna de 845·e. */
@media (min-width: 1280px) and (max-width: 1440px) and (max-height: 700px) {
  .metodo__inner { grid-template-columns: minmax(0, 845fr) minmax(0, 600fr); row-gap: 0; }
  .metodo__title { font-size: calc(56 * var(--e)); line-height: calc(54 * var(--e)); width: calc(636 * var(--e)); } /* Montserrat Bold 42/40.5, marco 477 */
  .metodo__underline { width: calc(78 * var(--e)); height: calc(7 * var(--e)); border-radius: 0; margin-top: calc(21 * var(--e)); } /* 58.5×5.25 en y=96.75 */
  .metodo__img { margin-top: calc(-48 * var(--e)); } /* la foto (633.75×424.5) arranca en y=66, debajo del subrayado: su borde es difuso */
  .metodo__cierre { margin-top: calc(101 * var(--e)); opacity: 0.5; } /* Inter 13.5 al 50%, en y=566.25 */
  .metodo__panel { padding-top: calc(11.5 * var(--e)); } /* columna en (689.6, 8.6) */
  /* Open Sans 15/24, marco 418.5. Con 418.5 el navegador lo arma en 4 renglones: los cortes del Figma
     (…con / …War / …capacidades / …escenarios / complejos.) salen entre 404 y 414 a 1440, y entre 396
     y 408 a 1366 — el render de la letra no escala lineal y no hay un N común, de ahí el segundo valor. */
  .metodo__text { max-width: calc(545 * var(--e)); margin-left: calc(9.5 * var(--e)); }
  .metodo__pasos { margin-top: calc(28.5 * var(--e)); } /* primer título en y=141.4 */
  /* pasos cada 111.75: divisor 1px #A1B5D3 al 30% de 392.25, a ~13 del texto y ~30 del título siguiente */
  .metodo__paso { gap: calc(10.5 * var(--e)); padding: calc(40 * var(--e)) 0 calc(17.5 * var(--e)) calc(13 * var(--e)); }
  .metodo__paso:first-child { padding-top: 0; }
  .metodo__paso:last-child { padding-bottom: 0; }
  .metodo__paso:not(:last-child)::after { width: calc(523 * var(--e)); background: rgba(161, 181, 211, 0.3); }
  /* íconos: 33.5×22.2, 30.3×30, 26.3×31.6 y 35.3×35.4, alineados a la izquierda con su tope a -0.4/2.3/3.4/3.7 del título */
  .metodo__paso-ic { width: calc(47 * var(--e)); height: calc(29.5 * var(--e)); margin-top: calc(-0.5 * var(--e)); object-fit: contain; object-position: left top; }
  .metodo__paso:nth-child(2) .metodo__paso-ic { height: calc(40 * var(--e)); margin-top: calc(3 * var(--e)); }
  .metodo__paso:nth-child(3) .metodo__paso-ic { height: calc(42 * var(--e)); margin-top: calc(4.5 * var(--e)); }
  .metodo__paso:nth-child(4) .metodo__paso-ic { height: calc(47 * var(--e)); margin-top: calc(5 * var(--e)); }
  .metodo__paso-text { max-width: calc(515 * var(--e)); margin-top: calc(6.5 * var(--e)); opacity: 0.8; } /* Open Sans 12.75/21 al 80%, 26.6 debajo del título */
}
@media (min-width: 1280px) and (max-width: 1400px) and (max-height: 700px) {
  .metodo__text { max-width: calc(565 * var(--e)); } /* 402 a 1366: ver el comentario de arriba */
}

/* ── sections/docentes/docentes.css ── */
/* docentes — reconstruida con las capas del documento del XD (graphicContent.agc, ver
   docs/xd-ref/README.md), no a ojo. Coordenadas de diseño a 1920; la sección mide 900 desde y=3812:
   - fondo #000105 + textura "Fondo-verde" (1920×1022 en el XD) estirada a 1503×800 en x=-52, al
     54% (la opacidad ya viene aplicada en docentes-fondo.webp) + degradé de 378px arriba, de
     rgba(0,2,6,.82) a transparente.
   - título Montserrat Bold 56/56 centrado en una caja de 1118, blanco + verde; subrayado 78×7 en +239.
   - 3 fotos de 322×406 cada 350.5px (x=448..1471) en +346, con un degradé de 183px al pie. Sobre
     la foto, a 57px del borde: bandera 20×20 + país Montserrat 10, nombre Montserrat Bold 13 y
     cargo Montserrat 11/12, todo #F1F7F7.
   - flechas de 56px a 32px de las fotos: la izquierda con borde verde de 1px y flecha verde, la
     derecha rellena en verde con la flecha oscura.
   - puntos de 14px a 34px de las fotos: el activo verde, el resto blanco al 20%.
   - franja verde de 9px en y=4712, sobre el arranque de prog. */

.docentes {
  position: relative;
  padding: calc(100 * var(--e)) 0;
  color: #F1F7F7;
  background:
    linear-gradient(to bottom, rgba(0, 2, 6, 0.816) 0, rgba(0, 2, 6, 0) 378px),
    url("assets/images/docentes-fondo.webp") calc(50% - 1012px) 0 / 1503px 800px no-repeat,
    #000105;
}
.docentes::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-9 * var(--e));
  height: calc(9 * var(--e));
  background: var(--color-acento);
  z-index: 2; /* pinta encima del fondo claro de prog, que viene después en el DOM */
}
.docentes__title {
  max-width: calc(1118 * var(--e));
  margin: 0 auto;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: clamp(calc(34 * var(--e)), 2.917vw, calc(56 * var(--e))); /* 56 a 1920 */
  line-height: 1;
  text-align: center;
  color: #F5F7FA;
}
.docentes__underline { display: block; width: calc(78 * var(--e)); height: calc(7 * var(--e)); border-radius: calc(4 * var(--e)); background: var(--color-acento); margin: calc(27 * var(--e)) auto 0; }

.docentes__carousel { display: flex; align-items: center; justify-content: center; gap: calc(32 * var(--e)); margin-top: calc(100 * var(--e)); }
.docentes__track {
  display: flex;
  gap: calc(28.5 * var(--e));
  width: calc(1023 * var(--e));
  min-width: 0;
  overflow: hidden;
  scroll-behavior: smooth;
}
.doc-card {
  position: relative;
  flex: 0 0 calc((100% - 57 * var(--e)) / 3);
  aspect-ratio: 322 / 406;
  overflow: hidden;
  background: #0B1A1A;
}
.doc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.doc-card__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45.07%; /* 183 de 406 */
  background: linear-gradient(to bottom, rgba(5, 48, 44, 0) 0%, rgba(4, 28, 27, 0.592) 32.2%, rgba(4, 27, 26, 0.62) 50%, #030F0F 83.9%);
}
.doc-card__info { position: absolute; top: 47%; left: 17.7%; right: calc(16 * var(--e)); } /* % del degradé (183 de alto, desde 223): la bandera va a 309 de la ficha · 57 de 322 */
.doc-card__pais { display: flex; align-items: center; gap: calc(4 * var(--e)); height: calc(20 * var(--e)); margin: 0; }
.doc-card__bandera { width: calc(20 * var(--e)); height: calc(20 * var(--e)); border-radius: 50%; object-fit: cover; }
.doc-card__flag { font-family: var(--font-titulo); font-weight: 400; font-size: calc(10 * var(--e)); line-height: 1; text-transform: uppercase; }
.doc-card__name { margin: calc(-2 * var(--e)) 0 0; font-family: var(--font-titulo); font-weight: 700; font-size: calc(13 * var(--e)); line-height: calc(16 * var(--e)); text-transform: uppercase; }
.doc-card__role { margin: calc(10 * var(--e)) 0 0; font-family: var(--font-titulo); font-weight: 400; font-size: calc(11 * var(--e)); line-height: calc(12 * var(--e)); }

.docentes__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(56 * var(--e));
  height: calc(56 * var(--e));
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--color-acento);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.docentes__arrow::before {
  content: "";
  width: calc(21 * var(--e)); /* el glifo del XD: 21×18, centrado en el círculo */
  height: calc(18 * var(--e));
  background: currentColor;
  -webkit-mask: var(--flecha) center / contain no-repeat;
  mask: var(--flecha) center / contain no-repeat;
}
.docentes__prev { --flecha: url("assets/icons/xd/flecha-izq.svg"); background: transparent; color: var(--color-acento); }
.docentes__next { --flecha: url("assets/icons/xd/flecha-der.svg"); background: var(--color-acento); color: #011918; }
.docentes__prev:hover { background: var(--color-acento); color: #011918; }
.docentes__next:hover { background: var(--brand-gold); border-color: var(--brand-gold); }

.docentes__dots { display: flex; justify-content: center; gap: calc(7 * var(--e)); margin-top: calc(34 * var(--e)); }
.docentes__dot { width: calc(14 * var(--e)); height: calc(14 * var(--e)); padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.2); cursor: pointer; transition: background .3s ease; }
.docentes__dot--on { background: var(--color-acento); }

/* ── MÓVIL ────────────────────────────────────────────────────────────────────
   XD 430×932, sección de 3681 a 4422. Números del .agc, verificados con
   `node tools/xd-diff.mjs docentes`. Tres diferencias de fondo con el de
   escritorio: el título va alineado a la izquierda y sin subrayado, se ve UNA
   sola foto (321×406 centrada) y las flechas no se esconden — se montan sobre
   los bordes de la foto. */
@media (max-width: 600px) {
  .docentes {
    padding: 37px 0 79px; /* 3681+37 = título en 3718; los puntos cierran en 4343 */
    /* La banda oscura de arriba no es un degradé: es un rectángulo opaco #000206
       de 163px que arranca 35px abajo del tope y es el fondo del título. */
    background:
      linear-gradient(#000206, #000206) 0 35px / 100% 163px no-repeat,
      url("assets/images/docentes-fondo.webp") -348px 0 / 1366px 800px no-repeat,
      #000105;
  }
  /* la franja verde del XD son 6px que van ENTRE las dos secciones (4422..4428):
     se dibujan sobre el arranque de prog, que lo compensa con su padding-top */
  .docentes::after { bottom: -6px; height: 6px; }
  .docentes__title {
    max-width: 366px; /* el marco de texto del XD; con los 398 de la caja entra en 2 líneas */
    margin: 0;
    font-size: 26px;
    line-height: 33px;
    text-align: left;
  }
  .docentes__underline { display: none; } /* no está en el artboard móvil */
  /* En el móvil el título corre libre en 3 renglones ("en" arranca el segundo):
     el salto duro que usa el escritorio lo partiría en 4. El espacio que queda
     entre los dos <span> es el que el escritorio se come al final de la línea. */
  .docentes__title-br { display: none; }
  .docentes__carousel {
    position: relative;
    gap: 0;
    margin-top: 80px; /* título hasta 3816 → la foto en 3896 */
  }
  .docentes__track {
    width: 100%;
    gap: 14px;
    /* la foto queda centrada sea cual sea el ancho: a 430 da los 38.5 del XD */
    padding: 0 max(0px, calc((100% - 321px) / 2));
    scroll-padding: 0 max(0px, calc((100% - 321px) / 2));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .docentes__track::-webkit-scrollbar { display: none; }
  .doc-card { flex: 0 0 min(321px, 100%); scroll-snap-align: center; }
  .docentes__arrow {
    display: flex;
    position: absolute;
    top: 50%;
    width: 56px;
    height: 56px;
    margin-top: -28px;
    z-index: 2; /* XD: las flechas pisan el borde de la foto (x=10 y x=364) */
  }
  .docentes__prev { left: -6px; }
  .docentes__next { right: -6px; }
  .docentes__dots { margin-top: 27px; gap: 7px; }
  .docentes__dots button { width: 14px; height: 14px; }
}

/* ── sections/prog/prog.css ── */
/* prog — programa académico. Medida con las capas del documento del XD (graphicContent.agc, ver
   docs/xd-ref/README.md) y contrastada contra pantalla-0.png. Coordenadas de diseño a 1920, con la
   sección arrancando en y=4712 (fondo claro #F3F4F8 compartido con banner y cert):
   - retícula 619 | 167 | 734: texto en x=200, tarjetas en x=986.
   - etiqueta Inter 16 mayúscula, tracking 1.44px, #081819, línea base en 4828.
   - título Montserrat Bold 56/54 #081819 en una caja de 619 (3 líneas), tope de mayúscula en 4922;
     subrayado 78×7 en 5104; texto Open Sans 18/32 #0A0F15 en una caja de 523, línea base en 5161.
   - estadísticas: cuadro #042222 de 80×80 con radio 6 en 5229 e ícono centrado; cifra Montserrat
     Bold 48 (base 5360), unidad Montserrat Bold 14 en mayúscula (base 5382) y nota Montserrat 14
     (base 5404), centradas en x=251 / 420 / 600, con divisores #A1B5D3 de 178.5 en x=328 y 512.
   - botón 266×64 pill verde en 5448: Open Sans SemiBold 18 + ícono de descarga.
   - tarjetas de módulo 733×80, blancas, radio 6, sombra 0 2px 2px rgba(0,0,0,.12), cada 103px desde
     4812: número Inter Bold 22 verde centrado en x+28, divisor verde 2×38 en x+56, título Open Sans
     SemiBold 20 #081819 en x+71 y "+" de 16×16 con trazo de 3px centrado en x+701. */

.prog { background: var(--color-fondo-alt, #F3F4F8); padding: calc(100 * var(--e)) 0 calc(4 * var(--e)); } /* abajo 4: + los 96 de padding de
  .banner = su tarjeta a 100px de la última tarjeta de módulo, como el XD (5613 → 5713) */
.prog__inner { display: grid; grid-template-columns: minmax(0, 619fr) minmax(0, 167fr) minmax(0, 734fr); align-items: start; }
.prog__side { grid-column: 1; min-width: 0; container-type: inline-size; }
.prog__acc { grid-column: 3; min-width: 0; display: flex; flex-direction: column; gap: calc(23 * var(--e)); }

.prog__label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: calc(16 * var(--e));
  line-height: calc(20 * var(--e));
  letter-spacing: calc(1.44 * var(--e));
  text-transform: uppercase;
  color: #081819;
}
.prog__title {
  margin-top: calc(82 * var(--e));
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: min(calc(56 * var(--e)), 9.047cqi); /* 56 en la columna de 619; en laptops achica y corta igual */
  line-height: 0.964; /* 54 a 56 */
  color: #081819;
}
.prog__underline { display: block; width: calc(78 * var(--e)); height: calc(7 * var(--e)); border-radius: calc(4 * var(--e)); background: var(--color-acento); margin-top: calc(28 * var(--e)); }
.prog__text { max-width: calc(523 * var(--e)); margin-top: calc(27 * var(--e)); font-family: var(--font-cuerpo); font-size: calc(18 * var(--e)); line-height: calc(32 * var(--e)); color: #0A0F15; }

.prog__stats { display: flex; align-items: flex-start; margin-top: calc(27 * var(--e)); }
.prog__stat { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 calc(23 * var(--e)); }
.prog__stat:first-child { padding: 0 calc(26 * var(--e)) 0 0; }
.prog__stat + .prog__stat { border-left: 1px solid #A1B5D3; }
.prog__stat:nth-child(2) { width: calc(184 * var(--e)); padding: 0; }
.prog__stat-box { display: flex; align-items: center; justify-content: center; width: calc(80 * var(--e)); height: calc(80 * var(--e)); border-radius: calc(6 * var(--e)); background: #042222; }
.prog__stat-ic { display: block; width: auto; height: calc(32 * var(--e)); max-width: calc(60 * var(--e)); } /* alto explícito: con solo `max-width` el SVG se dibujaba a su tamaño intrínseco (42×32) y no escalaba */
.prog__stat-val { margin-top: calc(7 * var(--e)); font-family: var(--font-titulo); font-weight: 700; font-size: calc(48 * var(--e)); line-height: calc(54 * var(--e)); color: #081819; }
.prog__stat-unidad { margin-top: calc(-2 * var(--e)); font-family: var(--font-titulo); font-weight: 700; font-size: calc(14 * var(--e)); line-height: calc(19 * var(--e)); text-transform: uppercase; color: #081819; }
.prog__stat-nota { margin-top: calc(3 * var(--e)); font-family: var(--font-titulo); font-weight: 400; font-size: calc(14 * var(--e)); line-height: calc(19 * var(--e)); color: #081819; }

.prog__brochure {
  display: inline-flex;
  align-items: center;
  gap: calc(15 * var(--e)); /* ícono de descarga 18×18 en x=414 */
  height: calc(64 * var(--e));
  width: calc(266 * var(--e));
  margin-top: calc(40 * var(--e));
  padding-left: calc(35 * var(--e));
  border-radius: calc(32 * var(--e));
  background: var(--color-acento);
  font-family: var(--font-cuerpo);
  font-weight: 600;
  font-size: calc(18 * var(--e));
  color: #081819;
  transition: background .25s ease;
}
.prog__brochure:hover { background: var(--brand-gold); }
.prog__brochure-ic { display: block; width: calc(18 * var(--e)); height: auto; } /* ídem: sin medida CSS el SVG se quedaba en sus 18px intrínsecos */

.prog-item { background: #fff; border-radius: calc(6 * var(--e)); box-shadow: 0 calc(2 * var(--e)) calc(2 * var(--e)) rgba(0, 0, 0, 0.12); }
.prog-item__head {
  width: 100%;
  min-height: calc(80 * var(--e));
  display: grid;
  /* 3ª columna de 40, no 48: Figma pone el ícono del acordeón en x=693 (1920) y deja
     al nombre 622px de caja. Con 48 el nombre se quedaba en 614, y ese 1.3% de menos
     era justo lo que hacía saltar a dos líneas el módulo 08 al escalar —el texto a
     tamaño chico rinde algo más ancho que 0.75× por redondeo de avance de glifo. */
  grid-template-columns: calc(56 * var(--e)) minmax(0, 1fr) calc(40 * var(--e));
  align-items: center;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.prog-item__etapa { font-family: var(--font-ui); font-weight: 700; font-size: calc(22 * var(--e)); line-height: calc(26 * var(--e)); text-align: center; color: var(--color-acento); }
.prog-item__name {
  position: relative;
  padding: calc(10 * var(--e)) 0 calc(10 * var(--e)) calc(15 * var(--e)); /* texto en x+71: 56 de la columna del número + 2 del divisor + 13 */
  font-family: var(--font-ui); /* AGC: Inter, no Open Sans */
  font-weight: 600;
  font-size: calc(20 * var(--e));
  line-height: calc(24 * var(--e)); /* AGC: 24, no 27 */
  letter-spacing: calc(0.2 * var(--e));
  color: #081819;
}
.prog-item__name::before { content: ""; position: absolute; left: 0; top: 50%; width: calc(2 * var(--e)); height: calc(38 * var(--e)); margin-top: calc(-19 * var(--e)); background: var(--color-acento); }
.prog-item__icon { position: relative; justify-self: start; width: calc(16 * var(--e)); height: calc(16 * var(--e)); font-size: 0; margin-left: 0; transition: transform .34s cubic-bezier(.22, .61, .36, 1); } /* la columna de 40 ya deja el ícono en x=693 */
.prog-item--open .prog-item__icon { transform: rotate(180deg); }
.prog-item__icon::before, .prog-item__icon::after { content: ""; position: absolute; background: var(--color-acento); transition: transform .28s cubic-bezier(.22, .61, .36, 1); }
.prog-item__icon::before { left: 0; top: calc(6.5 * var(--e)); width: calc(16 * var(--e)); height: calc(3 * var(--e)); }
.prog-item__icon::after { left: calc(6.5 * var(--e)); top: 0; width: calc(3 * var(--e)); height: calc(16 * var(--e)); }
.prog-item--open .prog-item__icon::after { transform: scaleY(0); }
.prog-item__full {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 calc(48 * var(--e)) 0 calc(71 * var(--e));
  transition: grid-template-rows .38s cubic-bezier(.22, .61, .36, 1), padding-bottom .38s cubic-bezier(.22, .61, .36, 1);
}
.prog-item--open .prog-item__full { grid-template-rows: 1fr; padding-bottom: calc(24 * var(--e)); }
.prog-item__full p { min-height: 0; overflow: hidden; font-family: var(--font-cuerpo); font-size: calc(16 * var(--e)); line-height: calc(26 * var(--e)); color: #0A0F15; opacity: 0; transform: translateY(calc(-6 * var(--e))); transition: opacity .26s ease, transform .3s cubic-bezier(.22, .61, .36, 1); }
.prog-item--open .prog-item__full p { opacity: 1; transform: none; transition-delay: .1s; }

@media (max-width: 1500px) {
  .prog__stat, .prog__stat:first-child, .prog__stat:nth-child(2) { width: auto; padding: 0 calc(18 * var(--e)); }
  .prog__stat:first-child { padding-left: 0; }
}
@media (max-width: 1100px) {
  .prog__inner { grid-template-columns: 1fr; }
  .prog__side, .prog__acc { grid-column: 1; }
  .prog__side { margin-bottom: 48px; }
}
/* ── MÓVIL ────────────────────────────────────────────────────────────────────
   XD 430×932, sección de 4428 a 5542 (la franja clara #F2F4F8 sigue abajo: es la
   misma para prog, banner y cert, de 4428 a 6891). Números del .agc, verificados
   con `node tools/xd-diff.mjs prog`. */
@media (max-width: 600px) {
  .prog {
    background: #F2F4F8;
    /* 45 y no 39: la franja verde de 6px que cierra docentes va POR ENCIMA del
       arranque de esta sección, así que la caja empieza en 4422 y no en 4428. */
    padding: 45px 0 28px; /* el eyebrow cae en 4467; la última tarjeta cierra en 5514 */
  }
  .prog__label {
    font-family: var(--font-cuerpo); /* en el móvil el eyebrow es Open Sans Light 11, no Inter 16 */
    font-weight: 300;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: 1.1px;
    color: #081819;
  }
  .prog__title { margin-top: 48px; font-size: 26px; line-height: 33px; }
  .prog__underline { width: 40px; height: 4px; border-radius: 0; margin-top: 9px; }
  .prog__text { max-width: none; margin-top: 20px; font-size: 15px; line-height: 28px; }
  /* Tres columnas parejas y sin divisores: el XD no dibuja las líneas verticales
     que sí tiene el de escritorio. Las cajas caen en x=36, 177 y 325. */
  .prog__stats {
    display: grid;
    grid-template-columns: minmax(0, 96fr) minmax(0, 186fr) minmax(0, 116fr); /* centros en x=64, 205 y 353 a 430 */
    margin-top: 28px;
  }
  .prog__stat,
  .prog__stat:first-child,
  .prog__stat:nth-child(2) { width: auto; padding: 0; }
  .prog__stat + .prog__stat { border-left: none; }
  .prog__stat-box { width: 56px; height: 56px; }
  .prog__stat-ic { max-width: 36px; max-height: 32px; }
  .prog__stat-val { margin-top: 5.6px; font-size: 32px; line-height: 39px; }
  .prog__stat-unidad {
    margin-top: 0;
    font-family: var(--font-cuerpo);
    font-weight: 700;
    font-size: 11px;
    line-height: 15px;
  }
  .prog__stat-nota {
    margin-top: 0;
    font-family: var(--font-cuerpo);
    font-weight: 400;
    font-size: 11px;
    line-height: 15px;
  }
  .prog__brochure {
    display: flex;
    width: 360px;
    max-width: 100%;
    height: 64px;
    margin: 56px auto 0; /* XD: pastilla de 360×64 en x=35, o sea centrada */
    font-size: 16px;
  }
  .prog__side { margin-bottom: 0; } /* el aire con el acordeón lo pone .prog__acc */
  .prog__acc { gap: 5px; margin-top: 40px; }
  /* XD: número centrado en una columna de 56 (cae en x=44), la barrita verde en
     x=72 y el texto en 87; el "+" mide 16 y termina a 16 del borde derecho. */
  .prog-item__head {
    grid-template-columns: 56px minmax(0, 1fr) 16px;
    min-height: 64px;
    padding-right: 16px;
  }
  .prog-item__etapa { font-size: 20px; line-height: 27px; }
  .prog-item__name { font-family: var(--font-cuerpo); font-weight: 400; font-size: 15px; line-height: 19px; padding-left: 15px; letter-spacing: 0.15px; }
  .prog-item__name::before { height: 38px; margin-top: -19px; width: 2px; }
  .prog-item__full { padding: 0 20px 0 71px; }
  .prog-item--open .prog-item__full { padding-bottom: 18px; }
  .prog-item__full p { transform: translateY(-6px); }
  .prog-item__full p { font-size: 14px; line-height: 22px; }
}

/* Sin animación para quien la desactiva en el sistema. */
@media (prefers-reduced-motion: reduce) {
  .prog-item__icon, .prog-item__icon::before, .prog-item__icon::after, .prog-item__full, .prog-item__full p { transition: none; }
}

/* ── sections/banner/banner.css ── */
/* banner — tarjeta CTA intermedia, medida con las capas del documento del XD (ver
   docs/xd-ref/README.md). A 1920 la tarjeta mide 1520×311 en x=200, y=5713, radio 20. La foto es
   "Imagen 38" (1717×916 en el XD) recortada por la máscara de la tarjeta, ya exportada así en
   banner-caballo.webp. Encima, a 80px del borde:
   - título Montserrat Bold 44/46 #F5F7FA, las dos líneas del mismo color (tope de caja +49);
   - bajada Inter 24 verde con tracking .24px (línea base +171);
   - botón pill verde de 266×64 en +217: "Quiero información" Open Sans SemiBold 18 #0A132F a 32px
     del borde y la flecha del XD 16px después.
   La tarjeta arranca 100px debajo de la última tarjeta de prog, y la foto de cert 100px debajo de
   esta. El fondo claro es el rectángulo que corre detrás de prog+banner+cert (ver prog.css). */

.banner { background: var(--color-fondo-alt, #F3F4F8); padding: var(--sp, calc(40 * var(--e))) 0 calc(30 * var(--e)); } /* abajo 30 + los 70 de .cert = 100 */
.banner__card { position: relative; height: calc(311 * var(--e)); border-radius: calc(20 * var(--e)); overflow: hidden; background: #0A0F14; }
.banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.banner__panel { position: relative; padding: calc(49 * var(--e)) 0 0 calc(80 * var(--e)); }
.banner__title { font-family: var(--font-titulo); font-weight: 700; font-size: calc(44 * var(--e)); line-height: calc(46 * var(--e)); color: #F5F7FA; }
.banner__subtitle { margin-top: calc(5 * var(--e)); font-family: var(--font-ui); font-weight: 400; font-size: calc(24 * var(--e)); line-height: calc(32 * var(--e)); letter-spacing: calc(0.24 * var(--e)); color: var(--color-acento); }
.banner__cta {
  display: inline-flex;
  align-items: center;
  gap: calc(16 * var(--e));
  width: calc(266 * var(--e));
  height: calc(64 * var(--e));
  margin-top: calc(39 * var(--e));
  padding: 0 0 0 calc(32 * var(--e));
  border: 0;
  border-radius: calc(32 * var(--e));
  background: var(--color-acento);
  font-family: var(--font-cuerpo);
  font-weight: 600;
  font-size: calc(18 * var(--e));
  color: #0A132F;
  cursor: pointer;
  transition: background .25s ease;
}
.banner__cta:hover { background: var(--brand-gold); }

@media (max-width: 1100px) {
  .banner__card { height: auto; min-height: 311px; }
  .banner__panel { padding: 44px 40px 44px 56px; }
}
/* ── MÓVIL ────────────────────────────────────────────────────────────────────
   XD 430×932: tarjeta 398×328 en (16,5578), radio 14. Números del .agc,
   verificados con `node tools/xd-diff.mjs banner`. El panel no lleva velo: lo que
   oscurece el texto ya viene en la foto (en el XD es una imagen de 1175×627
   recortada por la máscara de la tarjeta). */
@media (max-width: 600px) {
  .banner { padding: 36px 0 36px; } /* 36 + 328 de tarjeta + 36 = los 400 que mide la sección */
  .banner__card { height: 328px; min-height: 0; border-radius: 14px; }
  .banner__img { object-position: 43% center; } /* la máscara del XD deja ver el centro-izquierda */
  /* con `imagen_movil` cargada no hay que reencuadrar en horizontal: el asset ya
     viene a los 398 de ancho de la tarjeta. Mide 390 de alto contra los 328 de la
     tarjeta, así que el `cover` corta 62: anclado abajo, para que queden enteros
     el piso y la base del caballo, y lo que se pierde sea el borde superior del
     mapa, que ahí es sólo textura detrás del título. */
  .banner__img--con-movil { object-position: center bottom; }
  .banner__panel { padding: 36px 16px 0; background: none; }
  /* el XD corta los dos textos a mano ("La estrategia no se / aprende solo en /
     teoría."): acá el corte lo da la medida de línea, 280 y 190 */
  .banner__title { max-width: 280px; font-size: 28px; line-height: 28px; }
  .banner__subtitle {
    max-width: 190px;
    margin-top: 15px;
    font-family: var(--font-cuerpo); /* en el móvil es Open Sans 16/24, no Inter 24 */
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.16px;
  }
  .banner__cta {
    width: 219px;
    height: 48px;
    margin-top: 25px;
    padding: 0 16px;
    gap: 8px; /* con los 16 del escritorio el rótulo no entra en los 219 de ancho */
    font-size: 15px;
  }
}

/* ── sections/cert/cert.css ── */
/* cert — medida con las capas del documento del XD (ver docs/xd-ref/README.md) y contrastada contra
   pantalla-0.png. Coordenadas de diseño a 1920; la foto arranca en y=6124, 100px debajo de la
   tarjeta de banner, y la sección termina en 6956, donde empieza el fondo oscuro de inv:
   - fondo #F3F4F8: el rectángulo continuo detrás de prog+banner+cert (no el #F5F7FA del nav).
   - foto del diploma 754×732, radio 20, sin borde ni sombra, en x=200 (máscara del XD; la imagen es
     la misma que cert/diploma.webp).
   - columna de texto en x=1035, 41px debajo del tope de la foto: título Montserrat Bold 56/61
     #042222, corte natural en 3 líneas (sin <br>); subrayado 78×7 en 6370; texto Open Sans 20/32
     #042222 en una caja de 654, con una frase en negrita.
   - características: cuadro #042222 de 56×56 radio 4 con el ícono verde del XD centrado; texto
     Open Sans 17/32 en x=1116 (título en negrita y mayúscula, descripción regular con una frase en
     negrita); divisor #DEDEDE entre las dos. */

.cert { background: var(--color-fondo-alt, #F3F4F8); padding: calc(70 * var(--e)) 0 calc(100 * var(--e)); }
.cert__row { display: grid; grid-template-columns: minmax(0, 754fr) minmax(0, 81fr) minmax(0, 685fr); align-items: start; }
.cert__media { grid-column: 1; aspect-ratio: 754 / 732; border-radius: calc(20 * var(--e)); overflow: hidden; }
.cert__diploma { display: block; width: 100%; height: 100%; object-fit: cover; }
/* El diploma abre #cert-modal (js/core.js, data-open-cert). El botón no agrega caja: ocupa la foto entera. */
.cert__zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.cert__zoom:focus-visible { outline: 3px solid var(--color-acento); outline-offset: -3px; }
.cert__panel { grid-column: 3; min-width: 0; padding-top: calc(41 * var(--e)); color: #042222; container-type: inline-size; }
.cert__title { font-family: var(--font-titulo); font-weight: 700; font-size: min(calc(56 * var(--e)), 8.175cqi); line-height: 1.089; color: #042222; } /* 56/61; 8.175cqi = 56 en la columna de 685 */
.cert__underline { display: block; width: calc(78 * var(--e)); height: calc(7 * var(--e)); border-radius: calc(4 * var(--e)); background: var(--color-acento); margin-top: calc(22 * var(--e)); }
.cert__text { max-width: calc(654 * var(--e)); margin-top: calc(29 * var(--e)); font-family: var(--font-cuerpo); font-size: calc(20 * var(--e)); line-height: calc(32 * var(--e)); color: #042222; }
.cert__text strong, .cert__feat-desc strong { font-weight: 700; }
.cert__feats { margin-top: calc(37 * var(--e)); }
.cert__feat { display: flex; align-items: flex-start; gap: calc(25 * var(--e)); }
.cert__feat + .cert__feat { margin-top: calc(33 * var(--e)); padding-top: calc(39 * var(--e)); border-top: 1px solid #DEDEDE; }
.cert__feat-box { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: calc(56 * var(--e)); height: calc(56 * var(--e)); border-radius: calc(4 * var(--e)); background: #042222; }
.cert__feat-ic { display: block; width: calc(34 * var(--e)); height: auto; }
.cert__feat-body { min-width: 0; max-width: calc(528 * var(--e)); margin-top: calc(-5.5 * var(--e)); }
.cert__feat-title { font-family: var(--font-cuerpo); font-weight: 700; font-size: calc(17 * var(--e)); line-height: calc(32 * var(--e)); text-transform: uppercase; color: #042222; }
.cert__feat-desc { font-family: var(--font-cuerpo); font-weight: 400; font-size: calc(17 * var(--e)); line-height: calc(32 * var(--e)); color: #042222; }

@media (max-width: 1100px) {
  .cert__row { grid-template-columns: 1fr; row-gap: 40px; }
  .cert__media, .cert__panel { grid-column: 1; }
  .cert__panel { padding-top: 0; }
}
/* ── MÓVIL ────────────────────────────────────────────────────────────────────
   XD 430×932, sección de 5942 a 7094. Números del .agc, verificados con
   `node tools/xd-diff.mjs cert`. Dos cambios de fondo contra el de escritorio: el
   diploma va ABAJO del texto (en el escritorio es la columna izquierda) y los dos
   ítems no llevan la línea divisoria. */
@media (max-width: 600px) {
  .cert { background: #F2F4F8; padding: 60px 0 57px; }
  /* `align-items: stretch` es obligatorio: la fila de escritorio alinea a `start`
     y el panel tiene `container-type: inline-size`, que lo hace independiente de
     su contenido — sin estirarlo, la columna de texto resuelve a 0 de ancho. */
  .cert__row { display: flex; flex-direction: column; align-items: stretch; row-gap: 0; } /* el row-gap de 40 del breakpoint de 1100 se suma al margen del diploma: acá la separación la pone una sola cosa */
  .cert__panel { order: 1; padding-top: 0; }
  .cert__media {
    order: 2;
    width: calc(100% + 16px); /* 398 + 16 = los 414 del XD a 430, 8px por fuera de cada gutter */
    max-width: none;
    margin: 36px 0 0 -8px; /* 6600 → 6636 del XD, con la 2ª característica en sus 3 líneas */
    aspect-ratio: 414 / 401;
    border-radius: 8px;
  }
  .cert__title { font-size: 26px; line-height: 33px; }
  .cert__underline { width: 40px; height: 4px; border-radius: 0; margin-top: 29px; }
  .cert__text { max-width: none; margin-top: 35px; font-size: 15px; line-height: 28px; }
  .cert__feats { margin-top: 15px; }
  .cert__feat { gap: 10px; }
  .cert__feat + .cert__feat { margin-top: 57px; padding-top: 0; border-top: none; }
  .cert__feat-box { width: 46px; height: 45px; margin-top: 4px; } /* el XD apoya la caja en la tinta del texto, no en su caja de línea */
  .cert__feat-body { margin-top: 0; }
  .cert__feat-title, .cert__feat-desc { font-size: 15px; line-height: 28px; margin: 0; }
}

/* ── sections/inv/inv.css ── */
/* inv — medida con las capas del documento del XD (ver docs/xd-ref/README.md) y contrastada contra
   pantalla-0.png. Coordenadas de diseño a 1920; la sección va de y=6956 a 7987 (1031):
   - fondo #081819 + textura "cuadrilla" al 46% (ya aplicada en inv-fondo.webp) + resplandor verde
     arriba: elipse 1367×888 con centro 69px por encima de la sección, degradé radial al 48% del
     tamaño, al 44% de opacidad.
   - dos columnas 822 | 698 sin separación (x=200..1022..1720).
   - izquierda, desde x=230: etiqueta Inter 16 mayúscula verde (base 7123); título Montserrat Bold
     50/61, línea 1 #F9FBFD y línea 2 verde (base 7207).
   - caja de precio 620×148 en x=238, y=7347, #F5F9FF borde #CFE0FF radio 10, partida en x+270 y en
     y+104.6: "PRECIO REGULAR:" / "PÚBLICO EN GENERAL" Inter 11 mayúscula #606A78; $500.00 Montserrat
     Bold 35 tachado con una línea roja de 4px; $199.00 USD. Montserrat ExtraBold 48 + .00 en 25 +
     USD. en 37; al pie "ALUMNOS CON DOS CURSOS…" Inter Medium 14 mayúscula #002072.
   - contador: cifras Montserrat Bold 52 #F9FBFD (base 7586) y etiquetas Open Sans 15 mayúscula
     #A1B5D3 (base 7625), divisores #707070 al 49% en x=367 / 520 / 669.
   - "Pagar ahora" 620×64 pill con borde verde en 7683; barra de progreso 619×10 en 7807.
   - derecha: tarjeta 698×812 #F5F7FA, borde 1px #707070, radio 20, en y=7065. Título Montserrat
     Bold 38/42 en dos líneas, subrayado en +168, cinco campos cada 98px (etiqueta Open Sans 15
     mayúscula #253054 y línea #A1B5D3 de 538) y "Enviar" 540×64 en +704.
   El consentimiento de datos (Ley 29733) no está en el XD pero no se saca: va chico debajo del botón. */

.inv {
  position: relative;
  padding: calc(109 * var(--e)) 0 calc(110 * var(--e));
  color: #F9FBFD;
  background:
    radial-gradient(ellipse 657px 427px at 50% -69px, rgba(6, 229, 71, 0.44) 0%, rgba(48, 228, 177, 0) 100%),
    url("assets/images/inv-fondo.webp") center top / cover no-repeat,
    #081819;
}
.inv__cards { display: grid; grid-template-columns: minmax(0, 822fr) minmax(0, 698fr); align-items: start; }

/* ── columna izquierda ── */
.inv__left { min-width: 0; padding: calc(42 * var(--e)) 0 0 calc(30 * var(--e)); }
.inv__label { display: block; font-family: var(--font-ui); font-weight: 400; font-size: calc(16 * var(--e)); line-height: calc(20 * var(--e)); letter-spacing: calc(1.44 * var(--e)); text-transform: uppercase; color: var(--color-acento); }
.inv__title { margin-top: calc(31.6 * var(--e)); font-family: var(--font-titulo); font-weight: 700; font-size: calc(50 * var(--e)); line-height: calc(61 * var(--e)); color: #F9FBFD; }
.inv__title-destacado { color: var(--color-acento); }
/* El subrayado verde existe sólo en el artboard móvil: en el de 1920 el bloque de
   inversión no lo tiene, así que acá nace apagado y se enciende en el breakpoint. */
.inv__underline { display: none; background: var(--color-acento); }

.inv__price-box {
  display: grid;
  grid-template-columns: calc(270 * var(--e)) minmax(0, 1fr);
  grid-template-rows: calc(103.6 * var(--e)) auto; /* + 42.75 de la nota + 2 de borde = 148.35 */
  width: calc(620 * var(--e));
  max-width: 100%;
  margin: calc(66.4 * var(--e)) 0 0 calc(8 * var(--e));
  background: #F5F9FF;
  border: 1px solid #CFE0FF;
  border-radius: calc(10 * var(--e));
  color: #081819;
}
.inv__price-col { position: relative; min-width: 0; padding-top: calc(16.5 * var(--e)); }
.inv__price-col--old { text-align: center; padding-left: calc(39 * var(--e)); } /* "$500" centrado en x+133 */
.inv__price-col--new { padding-left: calc(42 * var(--e)); }
.inv__price-col--new::before { content: ""; position: absolute; left: calc(-1 * var(--e)); top: calc(14.5 * var(--e)); width: 1px; height: calc(89.2 * var(--e)); background: #A1B8E2; }
.inv__price-label { display: block; font-family: var(--font-ui); font-weight: 400; font-size: calc(11 * var(--e)); line-height: calc(13 * var(--e)); letter-spacing: calc(0.99 * var(--e)); text-transform: uppercase; color: #606A78; }
.inv__price-old, .inv__price-new { display: inline-flex; align-items: baseline; font-family: var(--font-titulo); font-weight: 700; }
.inv__price-old { position: relative; margin-top: calc(18.5 * var(--e)); font-size: calc(35 * var(--e)); line-height: calc(45 * var(--e)); letter-spacing: calc(-0.7 * var(--e)); }
.inv__price-old::after { content: ""; position: absolute; left: calc(-7 * var(--e)); right: calc(-4 * var(--e)); top: calc(19.75 * var(--e)); height: calc(4 * var(--e)); background: #D51B1B; }
.inv__price-new { margin: calc(8.8 * var(--e)) 0 0 calc(10 * var(--e)); }
.inv__price-num { font-weight: 800; font-size: calc(48 * var(--e)); line-height: calc(53 * var(--e)); letter-spacing: calc(-0.96 * var(--e)); }
.inv__price-dec { position: relative; top: calc(-8 * var(--e)); font-weight: 700; font-size: calc(25 * var(--e)); line-height: calc(32 * var(--e)); letter-spacing: calc(-0.5 * var(--e)); margin-left: calc(12 * var(--e)); }
.inv__price-dec--old { top: calc(-8 * var(--e)); font-size: calc(19 * var(--e)); line-height: calc(24 * var(--e)); letter-spacing: calc(-0.38 * var(--e)); margin-left: calc(2 * var(--e)); }
.inv__price-cur { position: relative; top: 1px; font-weight: 700; font-size: calc(37 * var(--e)); line-height: calc(52 * var(--e)); letter-spacing: calc(-1.48 * var(--e)); margin-left: calc(11 * var(--e)); }
.inv__price-nota {
  grid-column: 1 / -1;
  margin: 0;
  border-top: 1px solid #CCCCCC;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(14 * var(--e));
  line-height: calc(41.75 * var(--e)); /* + 1 de borde superior = la franja de 42.75 del XD */
  letter-spacing: calc(-0.28 * var(--e));
  text-align: center;
  text-transform: uppercase;
  color: #002072;
}

.countdown--inv { display: grid; grid-template-columns: calc(129 * var(--e)) calc(153 * var(--e)) calc(149 * var(--e)) calc(188 * var(--e)); width: calc(619 * var(--e)); max-width: 100%; margin: calc(36 * var(--e)) 0 0 calc(8 * var(--e)); }
.countdown--inv .countdown__item { position: relative; display: flex; flex-direction: column; align-items: center; }
.countdown--inv .countdown__item + .countdown__item::before { content: ""; position: absolute; left: 0; top: calc(21 * var(--e)); width: 1px; height: calc(86 * var(--e)); background: rgba(112, 112, 112, 0.49); }
.countdown--inv .countdown__number { font-family: var(--font-titulo); font-weight: 700; font-size: calc(52 * var(--e)); line-height: calc(72 * var(--e)); color: #F9FBFD; }
.countdown--inv .countdown__label { margin-top: calc(5.8 * var(--e)); font-family: var(--font-ui); /* AGC: Inter */ font-size: calc(15 * var(--e)); line-height: calc(20 * var(--e)); letter-spacing: calc(1.35 * var(--e)); text-transform: uppercase; color: #A1B5D3; }
.countdown--disabled .countdown__number { color: rgba(249, 251, 253, 0.5); }

.inv__pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(620 * var(--e));
  max-width: 100%;
  height: calc(64 * var(--e));
  margin: calc(53.8 * var(--e)) 0 0 calc(8 * var(--e));
  border: 1px solid var(--color-acento);
  border-radius: calc(32 * var(--e));
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: calc(24 * var(--e));
  color: var(--color-acento);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.inv__pay-btn:hover { background: var(--brand-gold); border-color: var(--brand-gold); color: #081819; }
.inv__bar { width: calc(619 * var(--e)); max-width: 100%; height: calc(10 * var(--e)); margin: calc(60.3 * var(--e)) 0 0 calc(8 * var(--e)); border: 1px solid #CFE0FF; border-radius: calc(16 * var(--e)); background: #F5F9FF; overflow: hidden; }
.inv__bar span { display: block; width: 13.1%; height: 100%; border-radius: calc(16 * var(--e)); background: linear-gradient(to right, #00A22F -6.4%, #06E547 67.3%); }

/* ── columna derecha: formulario de lead (mismo circuito que el modal: .contact-form, mismos name) ── */
.inv__form-card {
  min-width: 0;
  min-height: calc(812 * var(--e));
  padding: calc(65.4 * var(--e)) calc(79 * var(--e)) calc(44 * var(--e)); /* + 1 de borde: contenido de 538 desde x=1102, como las líneas */
  background: #F5F7FA;
  border: 1px solid #707070;
  border-radius: calc(20 * var(--e));
  color: #081819;
}
.inv__form-title { max-width: calc(420 * var(--e)); margin-left: calc(1.75 * var(--e)); font-family: var(--font-titulo); font-weight: 700; font-size: calc(38 * var(--e)); line-height: calc(42 * var(--e)); color: #081819; }
.inv__form-underline { display: block; width: calc(78 * var(--e)); height: calc(7 * var(--e)); border-radius: calc(4 * var(--e)); background: var(--color-acento); margin: calc(17.6 * var(--e)) 0 0 calc(2 * var(--e)); }
.inv .inv__form { display: block; } /* .inv delante: base/modal.css (.mform flex con gap 10) se enlaza después y ganaba */
.inv__form .mform__hp { position: absolute; left: calc(-9999 * var(--e)); width: 1px; height: 1px; overflow: hidden; }
.inv__field { display: block; margin-top: calc(38.7 * var(--e)); } /* campos cada 98 */
.inv__field:first-of-type { margin-top: calc(37.2 * var(--e)); }
.inv__field-label { display: block; margin-left: calc(1.75 * var(--e)); font-family: var(--font-cuerpo); font-weight: 400; font-size: calc(15 * var(--e)); line-height: calc(20 * var(--e)); letter-spacing: calc(1.35 * var(--e)); text-transform: uppercase; color: #253054; }
.inv__form .mform__field {
  display: block;
  width: calc(538 * var(--e));
  max-width: 100%;
  height: calc(39.3 * var(--e));
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #A1B5D3;
  border-radius: 0;
  font-family: var(--font-cuerpo);
  font-size: calc(17 * var(--e));
  color: #081819;
  outline: none;
  transition: border-color .2s ease;
}
.inv__form .mform__field:focus { border-color: var(--color-acento); }
.inv__form .mform__select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: none; }
.inv__form .mform__select option { background: #fff; color: #081819; }
.inv__form-submit {
  display: block;
  width: calc(540 * var(--e));
  max-width: calc(100% + 2px);
  height: calc(64 * var(--e));
  margin: calc(40.5 * var(--e)) 0 0 calc(-2 * var(--e));
  border: 0;
  border-radius: calc(32 * var(--e));
  background: var(--color-acento);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: calc(24 * var(--e));
  color: #0A132F;
  cursor: pointer;
  transition: background .25s ease;
}
.inv__form-submit:hover { background: var(--brand-gold); }
.inv .inv__form-privacy { display: flex; gap: calc(10 * var(--e)); align-items: flex-start; margin-top: calc(18 * var(--e)); cursor: pointer; }
.inv .inv__form-privacy input { width: calc(14 * var(--e)); height: calc(14 * var(--e)); margin-top: calc(2 * var(--e)); flex-shrink: 0; accent-color: var(--color-acento); }
.inv .inv__form-privacy span { font-family: var(--font-cuerpo); font-size: calc(11 * var(--e)); line-height: 1.5; color: #5A6570; text-align: left; }

@media (max-width: 1100px) {
  .inv { padding: 72px 0 80px; }
  .inv__cards { grid-template-columns: 1fr; row-gap: 48px; }
  .inv__left { padding: 0; }
  .inv__price-box, .countdown--inv, .inv__pay-btn, .inv__bar { margin-left: 0; }
  .countdown--inv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .inv__form-card { min-height: 0; }
}
/* 601–900 no sale de ningún XD, y ahí `--e` vale 1px (base.css): el .wrap quedaba con 200px de cada
   lado y la tarjeta con 79px más, o sea un formulario de 100px a 660 de ancho, con el botón más
   angosto que su propio texto. */
@media (min-width: 601px) and (max-width: 900px) {
  .inv .wrap { padding-left: 32px; padding-right: 32px; }
  .inv__form-card { padding-left: 40px; padding-right: 40px; }
}
/* ── MÓVIL────────────────────────────────────────────────────────────────────
   XD 430×932, sección de 7094 a 8338 (fondo #081819). Números del .agc,
   verificados con `node tools/xd-diff.mjs inv`. Las tipografías del recuadro de
   precio son chicas de verdad en el móvil (Inter 7 y 9 en las notas): no es un
   error de medición, es lo que trae el artboard. */
@media (max-width: 600px) {
  .inv { padding: 39px 0 0; }
  .inv__cards { row-gap: 0; } /* el aire con la tarjeta del formulario lo pone ella misma */
  .inv__label { font-size: 11px; line-height: 14px; letter-spacing: 0.99px; }
  /* Sin el salto duro: el XD corre el título en 3 renglones ("Anticípate a las /
     amenazas. Decide / con inteligencia") y con el <br> quedan 4. */
  .inv__title-br { display: none; }
  .inv__title { max-width: 340px; margin-top: 17.75px; font-size: 34px; line-height: 37px; }
  .inv__underline { display: block; width: 40px; height: 4px; border-radius: 0; margin-top: 16.25px; }
  .inv__price-box {
    grid-template-columns: 47% minmax(0, 1fr);
    grid-template-rows: auto auto;
    height: 105.5px;
    margin-top: 45.5px;
    border-radius: 10px;
  }
  .inv__price-col--old { padding-left: 0; }
  .inv__price-col--new { padding-left: 16px; }
  .inv__price-col--new::before { height: 76px; }
  .inv__price-label { font-size: 7px; letter-spacing: 0.63px; }
  .inv__price-old { margin-top: 6px; font-size: 24px; line-height: 29px; }
  .inv__price-old::after { top: 13px; height: 3px; }
  .inv__price-new { margin: 2px 0 0; }
  /* Los tres cuerpos del precio dan las medidas del XD a 430 y bajan con el ancho:
     en un teléfono de 320 "$199.00 USD." no entra en su columna y se sale. */
  .inv__price-num { font-size: clamp(26px, 7.674vw, 33px); line-height: 40px; letter-spacing: -0.66px; }
  .inv__price-dec { font-size: clamp(13px, 3.953vw, 17px); margin-left: 2px; top: -8px; }
  .inv__price-dec--old { font-size: clamp(11px, 3.023vw, 13px); }
  .inv__price-cur { font-size: clamp(20px, 6.047vw, 26px); margin-left: 4px; letter-spacing: -1.04px; }
  .inv__price-nota { font-size: 9px; line-height: 22px; }
  .countdown--inv { margin-top: 28.7px; }
  .countdown--inv .countdown__item + .countdown__item::before { top: 12px; height: 60px; }
  .countdown--inv .countdown__number { font-size: 36px; line-height: 44px; }
  .countdown--inv .countdown__label { font-size: 10px; line-height: 12px; letter-spacing: 0.9px; }
  .inv__pay-btn {
    width: 360px;
    max-width: 100%;
    height: 64px;
    margin: 41.5px auto 0;
    font-size: 17px;
  }
  .inv__bar { width: 391.7px; max-width: 100%; height: 7.1px; margin: 30.7px auto 0; border-radius: 16px; }
  .inv__form-card { margin-top: 50.2px; padding: 40px 24px 19px; border-radius: 16px; }
  .inv__form-title { font-size: 27px; line-height: 30px; }
  .inv__form-underline { width: 56px; height: 5px; margin-top: 13px; }
  /* XD: etiqueta cada 56.7 (etiqueta 12 + campo 34 + 10.7 de aire) */
  .inv__field { margin-top: 10.7px; padding-left: 16.6px; }
  .inv__field:first-of-type { margin-top: 34.1px; }
  .inv__field .mform__field { height: 34px; }
  .inv__field-label { font-size: 10px; line-height: 12px; letter-spacing: 0.9px; }
  /* 350 de caja + 10 = los 360 del XD, 5px por fuera de cada lado de la tarjeta */
  .inv__form-submit { width: calc(100% + 10px); max-width: none; height: 64px; margin: 33.5px 0 0 -5px; font-size: 18px; }
}

/* ── sections/doblecert/doblecert.css ── */
/* doblecert — medida con las capas del documento del XD (ver docs/xd-ref/README.md). A 1920 la
   tarjeta mide 1520×269 en x=200, y=8087 (100px debajo del fondo oscuro de inv), radio 20; la foto
   es "banne-unmsm" recortada por la máscara (doblecert-fondo.webp). Posiciones relativas a la tarjeta:
   - texto desde x+130: etiqueta Inter 14 mayúscula dorada (base +57); título Montserrat Bold 53/48
     tracking .5 #F5F7FA en dos líneas (base +124); texto Inter 17/24 #F5F7FA en caja de 473 (+185).
   - caja 262×174 con borde dorado 1px radio 10 en (+629, +61), con la pestaña "ADICIONAL" del XD
     (179×30, Inter Bold 15 #2B0D0B) montada sobre el borde; "$" Montserrat SemiBold 61 dorado (base
     +161, x+661), "35" Montserrat Bold Italic 123 #F5F7FA (base +185, x+705) y "-DÓLARES-" Inter 19
     tracking 1.71 dorado (base +213), centrado.
   - logo de San Marcos 293×93 en (+1063, +48) y botón dorado 331×56 en (+1059, +164) con "Pagar con
     doble certificación" Inter SemiBold 18 #0A132F y la flecha del XD.
   Las columnas flexibles valen 1px por fr a 1520 (130/499/168/130 = el XD exacto) y se achican hasta
   sus mínimos; con menos de 1200 de contenido los tres bloques no entran en una fila y la tarjeta pasa
   a dos (texto | caja, logo | botón) — se decide con container queries sobre el .wrap, no con el
   ancho de la ventana. */

.doblecert { background: var(--color-fondo-alt, #F3F4F8); padding: calc(100 * var(--e)) 0 0; }
.doblecert > .wrap { container-type: inline-size; }
.doblecert__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(calc(40 * var(--e)), 130fr) minmax(calc(430 * var(--e)), 499fr) calc(262 * var(--e)) minmax(calc(32 * var(--e)), 168fr) calc(331 * var(--e)) minmax(calc(24 * var(--e)), 130fr);
  align-items: start;
  height: calc(269 * var(--e));
  border-radius: calc(20 * var(--e));
  overflow: hidden;
  background: #2A0E0B;
}
.doblecert__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.doblecert__text { grid-column: 2; position: relative; min-width: 0; padding-top: calc(41.9 * var(--e)); }
.doblecert__label { display: block; font-family: var(--font-ui); font-weight: 400; font-size: calc(14 * var(--e)); line-height: calc(20 * var(--e)); letter-spacing: calc(1.26 * var(--e)); text-transform: uppercase; color: var(--brand-gold); }
.doblecert__title { margin-top: calc(19.1 * var(--e)); font-family: var(--font-titulo); font-weight: 700; font-size: calc(53 * var(--e)); line-height: calc(48 * var(--e)); letter-spacing: calc(0.5 * var(--e)); color: #F5F7FA; }
.doblecert__desc { max-width: calc(473 * var(--e)); margin-top: calc(8 * var(--e)); font-family: var(--font-ui); font-weight: 400; font-size: calc(17 * var(--e)); line-height: calc(24 * var(--e)); color: #F5F7FA; }

.doblecert__price { grid-column: 3; position: relative; height: calc(174 * var(--e)); margin-top: calc(61 * var(--e)); border: 1px solid var(--brand-gold); border-radius: calc(10 * var(--e)); color: var(--brand-gold); }
.doblecert__price-tag {
  position: absolute;
  left: calc(41 * var(--e));
  top: calc(-15 * var(--e));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(179 * var(--e));
  height: calc(30 * var(--e));
  background: url("assets/icons/xd/doblecert-pestana.svg") center / 100% 100% no-repeat;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: calc(15 * var(--e));
  letter-spacing: calc(1.35 * var(--e));
  text-transform: uppercase;
  color: #2B0D0B;
}
.doblecert__price-symbol { position: absolute; left: calc(31 * var(--e)); top: calc(46.7 * var(--e)); font-family: var(--font-titulo); font-weight: 600; font-size: calc(61 * var(--e)); line-height: calc(61 * var(--e)); }
.doblecert__price-num { position: absolute; left: calc(75 * var(--e)); top: calc(17.4 * var(--e)); font-family: var(--font-titulo); font-style: italic; font-weight: 700; font-size: calc(123 * var(--e)); line-height: calc(123 * var(--e)); letter-spacing: calc(1.15 * var(--e)); color: #F5F7FA; }
.doblecert__price-unit { position: absolute; left: 0; right: 0; top: calc(134.6 * var(--e)); font-family: var(--font-ui); font-weight: 400; font-size: calc(19 * var(--e)); line-height: calc(19 * var(--e)); letter-spacing: calc(1.71 * var(--e)); text-align: center; text-transform: uppercase; }

.doblecert__aside { grid-column: 5; position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.doblecert__logo { display: block; width: calc(293 * var(--e)); height: calc(93 * var(--e)); margin: calc(48 * var(--e)) 0 0 calc(4 * var(--e)); object-fit: contain; }
.doblecert__cta {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--e));
  width: calc(331 * var(--e));
  height: calc(56 * var(--e));
  margin-top: calc(23 * var(--e));
  padding-left: calc(32 * var(--e));
  border-radius: calc(32 * var(--e));
  background: var(--brand-gold);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: calc(18 * var(--e));
  color: #0A132F;
  transition: background .25s ease;
}
.doblecert__cta:hover { background: #ECC045; }

/* Umbrales recalibrados para el mundo escalado: el contenedor es el .wrap, que
   ahora mide 1520·e, así que en ancho de DISEÑO vale 1520 constante mientras la
   escala sea pura (viewport ≥ 1100) — y ahí la composición ancha tiene que
   aguantar, como en el artboard laptop, donde doblecert conserva las 4 columnas.
   Los 1199.98 de antes estaban calibrados contra un contenedor de `viewport-400`
   y disparaban a 1440, apilando una sección que Figma dibuja ancha. 870 es lo que
   mide el contenedor justo en 1100, el punto donde entra el reflow de tablet. */
@container (max-width: 870px) {
  .doblecert__card { grid-template-columns: minmax(0, 1fr) calc(262 * var(--e)); align-items: center; gap: calc(36 * var(--e)) calc(48 * var(--e)); height: auto; padding: calc(48 * var(--e)) calc(64 * var(--e)) calc(44 * var(--e)); }
  .doblecert__text { grid-column: 1; grid-row: 1; padding-top: 0; }
  .doblecert__price { grid-column: 2; grid-row: 1; margin-top: calc(15 * var(--e)); }
  .doblecert__aside { grid-column: 1 / -1; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(24 * var(--e)); }
  .doblecert__logo { margin: 0; }
  .doblecert__cta { margin-top: 0; }
}
@container (max-width: 464px) { /* 640 escalado al mismo criterio que los 870 de arriba */
  .doblecert__card { grid-template-columns: minmax(0, 1fr); gap: calc(36 * var(--e)); padding: calc(32 * var(--e)) calc(22 * var(--e)) calc(36 * var(--e)); }
  .doblecert__title { margin-top: calc(12 * var(--e)); font-size: calc(34 * var(--e)); line-height: calc(36 * var(--e)); }
  .doblecert__desc { font-size: calc(15 * var(--e)); line-height: calc(22 * var(--e)); }
  .doblecert__price { grid-column: 1; grid-row: 2; justify-self: center; width: calc(262 * var(--e)); margin-top: calc(8 * var(--e)); }
  .doblecert__aside { grid-row: 3; flex-direction: column; align-items: stretch; gap: calc(23 * var(--e)); }
  .doblecert__logo { width: calc(220 * var(--e)); height: auto; }
  .doblecert__cta { width: 100%; justify-content: center; padding-left: 0; font-size: calc(16 * var(--e)); }
}
/* ── MÓVIL ────────────────────────────────────────────────────────────────────
   XD 430×932, sección de 8338 a 8900. La tarjeta deja de tener gutter: la foto
   del XD mide 942 de ancho en x=-291, o sea que la tarjeta va de borde a borde y
   sin radio. Números del .agc, verificados con `node tools/xd-diff.mjs doblecert`. */
@media (max-width: 600px) {
  .doblecert { background: #F2F4F8; padding: 59px 0 16px; }
  .doblecert > .wrap { padding-left: 0; padding-right: 0; }
  .doblecert__card {
    display: block;
    height: auto;
    padding: 37px 0 30px;
    border-radius: 0;
  }
  .doblecert__text { padding: 0 40px; }
  .doblecert__label { font-size: 11px; line-height: 14px; letter-spacing: 0.99px; }
  .doblecert__title-br { display: none; } /* en el móvil "Doble Certificación" va en un renglón */
  .doblecert__title { margin-top: 8px; font-size: 32px; line-height: 39px; letter-spacing: 0.3px; }
  .doblecert__desc { max-width: 360px; margin-top: 4px; font-size: 16px; line-height: 20px; }
  .doblecert__price {
    width: 171px;
    height: 113.5px;
    margin: 30.8px auto 0;
    margin-left: calc(50% - 93.8px); /* el XD no lo centra exacto: lo deja 8px a la izquierda */
    margin-right: auto;
  }
  .doblecert__price-tag { left: 50%; transform: translateX(-50%); }
  .doblecert__aside { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .doblecert__logo { width: 205px; height: 65px; margin: 31.7px 0 0; }
  .doblecert__cta { width: 232px; height: 39px; margin-top: 15px; font-size: 12px; }
}
/* OCULTA a pedido (2026-09-14): el banner de doble certificación San Marcos no se muestra en ningún
   ancho. Va al final y sin media query para ganarle a todo lo de arriba. El contenido sigue en Bravo:
   para volver a mostrarla, borrar esta regla. */
.doblecert { display: none; }

/* ── sections/faqsec/faqsec.css ── */
/* faqsec — medida con las capas del documento del XD (ver docs/xd-ref/README.md). A 1920 el
   contenido arranca en y=8467 (111px debajo de la tarjeta de doblecert) y la sección termina en 9204,
   100px debajo de la última pregunta, donde empieza el footer. Fondo #F3F4F8.
   - capitolio (1321×1191 en el XD) de 723×652 en x=0, y=8552, al 13%.
   - columna izquierda (711) desde x=200: etiqueta Inter 16 mayúscula #081819 (base 8483); título
     Montserrat Bold 56/61 en tres líneas (base 8567); subrayado 78×7 en 8718; texto Inter 22/32 en
     una caja de 473 desde 8759.
   - columna derecha (809) desde x=911: tarjetas #F5F7FA radio 6, sombra 0 2px 2px rgba(0,0,0,.12),
     92 de alto y 13 de separación; barra verde de 4px a la izquierda; número Inter Bold 22 verde
     centrado en x+47; pregunta Inter SemiBold 20 tracking .2 en x+86; "+" de 20×20 con trazo de 3
     centrado en (x+759, +47.5). La respuesta abierta suma 125: Inter 17/32 #0A0F15 en x+83, caja
     de 666. */

.faqsec { position: relative; overflow-x: clip; background: var(--color-fondo-alt, #F3F4F8); padding: calc(111 * var(--e)) 0 calc(100 * var(--e)); }
.faqsec::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(196 * var(--e));
  width: calc(723 * var(--e));
  height: calc(652 * var(--e));
  background: url("assets/images/faq-capitolio.webp") 0 0 / 100% 100% no-repeat;
  opacity: 0.13;
  pointer-events: none;
}
.faqsec__inner { position: relative; display: grid; grid-template-columns: minmax(0, 711fr) minmax(0, 809fr); align-items: start; }
.faqsec__side { min-width: 0; container-type: inline-size; }
.faqsec__label { display: block; font-family: var(--font-ui); font-weight: 400; font-size: calc(16 * var(--e)); line-height: calc(20 * var(--e)); letter-spacing: calc(1.44 * var(--e)); text-transform: uppercase; color: #081819; }
/* El XD corta "Resolvemos tus / dudas antes de / que decidas.": con 8.93em (500px a 56) el texto de
   Bravo cae igual sin <br> — "Resolvemos tus dudas" (658) y "dudas antes de que" (576) no entran. En
   laptops el título escala con la columna (7.877cqi = 56px en 711) y el corte se mantiene. */
.faqsec__title { max-width: 8.93em; margin-top: calc(30 * var(--e)); font-family: var(--font-titulo); font-weight: 700; font-size: min(calc(56 * var(--e)), 7.877cqi); line-height: 1.0893; color: #081819; }
.faqsec__underline { display: block; width: calc(78 * var(--e)); height: calc(7 * var(--e)); border-radius: calc(4 * var(--e)); background: var(--color-acento); margin-top: calc(18 * var(--e)); }
.faqsec__text { max-width: calc(473 * var(--e)); margin-top: calc(34 * var(--e)); font-family: var(--font-ui); font-weight: 400; font-size: calc(22 * var(--e)); line-height: calc(32 * var(--e)); color: #081819; }

.faq { display: flex; flex-direction: column; gap: calc(13 * var(--e)); min-width: 0; }
.faq__item { background: #F5F7FA; border-radius: calc(6 * var(--e)); box-shadow: 0 calc(2 * var(--e)) calc(2 * var(--e)) rgba(0, 0, 0, 0.12); overflow: hidden; }
.faq__question {
  position: relative;
  display: grid;
  grid-template-columns: calc(86 * var(--e)) minmax(0, 1fr) calc(80 * var(--e));
  align-items: center;
  width: 100%;
  min-height: calc(92 * var(--e));
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: inset calc(4 * var(--e)) 0 0 var(--color-acento);
  text-align: left;
  cursor: pointer;
}
.faq__num { padding-left: calc(8 * var(--e)); text-align: center; font-family: var(--font-ui); font-weight: 700; font-size: calc(22 * var(--e)); line-height: calc(26 * var(--e)); color: var(--color-acento); }
.faq__q { font-family: var(--font-ui); font-weight: 600; font-size: calc(20 * var(--e)); line-height: calc(24 * var(--e)); letter-spacing: calc(0.2 * var(--e)); color: #081819; }
.faq__icon { position: absolute; right: calc(40 * var(--e)); top: calc(37.5 * var(--e)); width: calc(20 * var(--e)); height: calc(20 * var(--e)); font-size: 0; transition: transform .34s cubic-bezier(.22, .61, .36, 1); }
.faq__item--open .faq__icon { transform: rotate(180deg); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--color-acento); transition: transform .28s cubic-bezier(.22, .61, .36, 1); }
.faq__icon::before { left: 0; top: calc(8.5 * var(--e)); width: calc(20 * var(--e)); height: calc(3 * var(--e)); }
.faq__icon::after { left: calc(8.5 * var(--e)); top: 0; width: calc(3 * var(--e)); height: calc(20 * var(--e)); }
.faq__item--open .faq__icon::after { transform: scaleY(0); }
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 calc(60 * var(--e)) 0 calc(83 * var(--e));
  transition: grid-template-rows .38s cubic-bezier(.22, .61, .36, 1), padding-top .38s cubic-bezier(.22, .61, .36, 1), padding-bottom .38s cubic-bezier(.22, .61, .36, 1);
}
.faq__item--open .faq__answer { grid-template-rows: 1fr; padding-top: calc(32 * var(--e)); padding-bottom: calc(29 * var(--e)); }
.faq__answer p { min-height: 0; overflow: hidden; max-width: calc(666 * var(--e)); font-family: var(--font-ui); font-weight: 400; font-size: calc(17 * var(--e)); line-height: calc(32 * var(--e)); color: #0A0F15; opacity: 0; transform: translateY(calc(-6 * var(--e))); transition: opacity .26s ease, transform .3s cubic-bezier(.22, .61, .36, 1); }
.faq__item--open .faq__answer p { opacity: 1; transform: none; transition-delay: .1s; }

@media (max-width: 1100px) {
  .faqsec { padding-top: 80px; }
  .faqsec__inner { grid-template-columns: 1fr; row-gap: 40px; }
}
/* ── MÓVIL ────────────────────────────────────────────────────────────────────
   XD 430×932, sección de 8900 a 10040. Números del .agc, verificados con
   `node tools/xd-diff.mjs faqsec`. OJO: en el artboard las tarjetas no miden
   todas lo mismo (la primera, que tiene la pregunta en dos renglones, mide 80 y
   las otras 92). Acá van todas a 92 —que es la medida consistente— y por eso las
   de abajo quedan ~12px más abajo que el XD; está anotado en la spec. */
@media (max-width: 600px) {
  .faqsec { background: #F2F4F8; padding: 42px 0 246px; } /* abajo: lo que ocupa el capitolio bajo la última tarjeta */
  .faqsec__inner { row-gap: 0; } /* el aire con la lista lo pone .faq */
  .faqsec::before { width: 100%; height: 388px; top: auto; bottom: 0; left: 0; }
  .faqsec__label { font-size: 11px; line-height: 14px; letter-spacing: 0.99px; }
  .faqsec__title { max-width: 390px; margin-top: 27px; font-size: 26px; line-height: 37px; }
  .faqsec__underline { width: 40px; height: 4px; border-radius: 0; margin-top: 5px; }
  .faqsec__text { max-width: 340px; margin-top: 31px; font-size: 16px; line-height: 32px; }
  .faq { gap: 10px; margin-top: 29px; }
  .faq__item { border-radius: 6px; }
  .faq__question { grid-template-columns: 59px minmax(0, 1fr) 40px; min-height: 92px; }
  .faq__num { padding-left: 0; font-size: 22px; line-height: 26px; text-align: center; }
  .faq__q { font-size: 20px; line-height: 24px; letter-spacing: 0.2px; padding: 0; }
  .faq__icon { right: 17px; width: 20px; height: 20px; }
  .faq__icon::before { top: 8.5px; width: 20px; height: 3px; }
  .faq__icon::after { left: 8.5px; height: 20px; width: 3px; }
  .faq__answer { padding: 0 20px 0 59px; }
  .faq__item--open .faq__answer { padding-top: 0; padding-bottom: 20px; }
  .faq__answer p { transform: translateY(-6px); }
  .faq__answer p { font-size: 16px; line-height: 28px; }
}

/* Sin animación para quien la desactiva en el sistema. */
@media (prefers-reduced-motion: reduce) {
  .faq__icon, .faq__icon::before, .faq__icon::after, .faq__answer, .faq__answer p { transition: none; }
}

/* ── base/footer.css ── */
/* footer — tema "marco y contrato": 6 países (docs/ADR/0001)
 *
 * Medido sobre el footer del Figma (Desktop 1920, nodo 10:48 — en Laptop 1440 es
 * el mismo nodo al 0.75, 49:72). OJO: en el Figma el footer NO es un frame con
 * estructura, es una imagen aplanada pegada al artboard, así que no hay tokens ni
 * capas de texto que leer: los números de abajo salen de medir la tinta del PNG
 * píxel a píxel y de calibrar el cuerpo contra el ancho de tinta en el navegador
 * (mismo método que la nota de metodo.css).
 *
 * Bandas de tinta del PNG a 1920 (y): nombre 115..150 · teléfono 174..193 ·
 * correo 213..233 · web 251..270 · dirección 291..305 / 318..336 / 349..363 ·
 * barra legal 533..582 · borde 622. Columnas (x): 134, 414, 696, 977, 1258, 1539
 * — paso 281, contenido 245.
 *
 * Dos cosas del PNG que NO se copian, a propósito:
 *  - Los márgenes laterales. La imagen arranca las columnas en x=134 y el texto
 *    legal en x=218 (dos gutters distintos: es el screenshot de un footer ya
 *    renderizado, no un artboard). Acá los dos van al `.wrap` del sitio (200·e),
 *    que es lo que alinea al footer con el nav y con todas las secciones.
 *  - El ancho total: el PNG ocupa 134..1768 (1634) y el `.wrap` da 1520, así que
 *    el paso de columna es 253 en vez de 281. El cuerpo del texto se respeta.
 */

.footer { background: #000000; padding: calc(115 * var(--e)) 0 calc(40 * var(--e)); }
.footer__paises {
  /* 6 columnas × 1 fila en desktop — confirmado con el PNG del Figma y con la
     captura completa del visor XD. Se colapsa a 3/2/1 por breakpoint, que ni el
     Figma ni el XD cubren (los dos traen solo el frame de escritorio). */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: calc(36 * var(--e));
  row-gap: calc(48 * var(--e));
  /* 149 = del pie de la columna más alta (384) a la barra legal (533) */
  padding-bottom: calc(149 * var(--e));
}
.footer__pais { display: flex; flex-direction: column; gap: calc(9.5 * var(--e)); } /* paso de renglón 38.5 = 29 de caja + 9.5 */
.footer__pais-nombre {
  display: flex;
  align-items: center;
  gap: calc(30 * var(--e));
  font-family: var(--font-sora);
  font-weight: 700;
  font-size: calc(24 * var(--e)); /* calibrado: "Mexico" en Montserrat Bold da los 90px de tinta del PNG */
  line-height: 1.15;
  color: var(--color-texto);
  margin-bottom: calc(11.5 * var(--e));
}
.footer__bandera { width: calc(34 * var(--e)); height: calc(34 * var(--e)); border-radius: 50%; flex-shrink: 0; }
.footer__pais a,
.footer__direccion {
  display: flex;
  align-items: flex-start;
  gap: calc(18 * var(--e));
  font-family: var(--font-mont);
  font-size: calc(17 * var(--e)); /* calibrado: "(+52) 156 1056 6612" en Open Sans da los 160px de tinta */
  line-height: calc(29 * var(--e)); /* el interlineado de la dirección en el PNG: 291→318→349 */
  color: var(--color-texto-suave);
}
.footer__pais a { align-items: center; transition: color .2s ease; }
.footer__pais a:hover { color: var(--color-acento); }
/* El dorado NO se pone acá: estos íconos entran por <img>, así que `color` no los
   alcanza y el `stroke="currentColor"` de los SVG resolvía a negro — invisibles
   sobre el fondo negro del footer. El color vive ahora dentro de los cuatro .svg
   de assets/icons/footer/ (#FFC901, el --marca-gold; en el PNG del Figma se mide
   rgb(170,130,5), que es ese mismo dorado antialiasado sobre negro). */
.footer__ico { width: calc(13 * var(--e)); height: calc(13 * var(--e)); flex-shrink: 0; margin-top: calc(8 * var(--e)); }
.footer__pais a .footer__ico { margin-top: 0; }
.footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--e));
  flex-wrap: wrap;
  /* Sin shorthand `padding`: pisaba el padding-left/right del .wrap (200·e) y
     dejaba el texto legal pegado al borde de la ventana. */
  padding-block: 0;
}
.footer__copy {
  max-width: calc(682 * var(--e)); /* el bloque legal del PNG va de x=218 a ~900: parte en 3 renglones */
  font-family: var(--font-mont);
  font-size: calc(14.5 * var(--e)); /* calibrado contra los 430px de tinta del primer renglón */
  line-height: 1.15; /* 3 renglones en 50px de banda (533..582) */
  color: var(--color-texto-tenue);
}
.footer__redes { display: flex; align-items: center; gap: calc(33 * var(--e)); flex-shrink: 0; } /* paso de 54 en el PNG */
.footer__redes a { color: var(--color-texto-suave); transition: color .2s ease; display: flex; }
.footer__redes svg { width: calc(21 * var(--e)); height: calc(21 * var(--e)); } /* los SVG traen width/height en el HTML: sin regla CSS no escalaban */
.footer__redes a:hover { color: var(--color-acento); }

@media (max-width: 1100px) {
  .footer__paises { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  /* Desde acá `--e` queda clavado en 1px (ver base.css), así que los números del
     artboard 1920 pasan a ser px crudos: 115 de respiro arriba, 149 de separación
     a la barra legal y el nombre en 24 — en una pantalla de 900 el footer saltaba
     a 1334px de alto. El Figma no trae footer de tablet ni de móvil: esto es
     criterio, no medición. */
  .footer { padding: 56px 0 32px; }
  .footer__paises { grid-template-columns: repeat(2, 1fr); row-gap: 32px; padding-bottom: 48px; }
  .footer__pais-nombre { font-size: 19px; gap: 14px; margin-bottom: 6px; }
  .footer__bandera { width: 24px; height: 24px; }
  .footer__pais a,
  .footer__direccion { font-size: 15px; line-height: 24px; gap: 12px; }
  .footer__ico { width: 13px; height: 13px; margin-top: 5px; }
  .footer__copy { max-width: none; font-size: 12.5px; line-height: 1.5; }
  .footer__redes { gap: 20px; }
  .footer__redes svg { width: 21px; height: 21px; }
}
@media (max-width: 600px) {
  .footer__paises { grid-template-columns: 1fr; }
  .footer__base { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ── base/modal.css ── */
/* modal — generado por refactor modular (verbatim de styles.css) */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24 * var(--e));
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 12, 8, 0.55);
  backdrop-filter: blur(calc(10 * var(--e)));
  -webkit-backdrop-filter: blur(calc(10 * var(--e)));
}
.modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(560 * var(--e));
  max-height: 92vh;
  overflow-y: auto;
  background: #0d1714;
  border: 1px solid rgba(46, 226, 152, 0.18);
  border-radius: calc(16 * var(--e));
  padding: calc(44 * var(--e)) calc(40 * var(--e));
  transform: translateY(calc(12 * var(--e))) scale(0.97);
  transition: transform .3s ease;
}
.modal.is-open .modal__card { transform: none; }
.modal__close {
  position: absolute;
  top: calc(16 * var(--e));
  right: calc(18 * var(--e));
  width: calc(34 * var(--e));
  height: calc(34 * var(--e));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: var(--white);
  font-size: calc(22 * var(--e));
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.modal__close:hover { background: var(--green); color: var(--dark-text); }
.modal__card--image { max-width: min(calc(1100 * var(--e)), 96vw); width: auto; padding: 0; background: transparent; border: 0; overflow: visible; }
.cert-modal__img { display: block; width: 100%; max-height: 92vh; object-fit: contain; border-radius: calc(12 * var(--e)); }
.modal__card--image .modal__close { top: calc(12 * var(--e)); right: calc(12 * var(--e)); z-index: 3; background: rgba(0, 0, 0, 0.6); }
.historia-modal__text { font-family: var(--font-mont); font-size: calc(16 * var(--e)); line-height: 1.7; color: var(--white-75); }
.historia-modal__author { font-family: var(--font-sora); font-weight: 600; font-size: calc(15 * var(--e)); color: var(--white); margin-top: calc(18 * var(--e)); }
.historia-modal__author strong { color: var(--green); }
.modal__head { text-align: center; margin-bottom: calc(28 * var(--e)); }
.modal__title { font-family: var(--font-sora); font-weight: 600; font-size: calc(24 * var(--e)); }
.modal__subtitle { font-family: var(--font-sora); font-size: calc(16 * var(--e)); color: var(--white-75); margin-top: calc(5 * var(--e)); }
.mform { display: flex; flex-direction: column; gap: calc(10 * var(--e)); }
.mform__hp { position: absolute; left: calc(-9999 * var(--e)); width: 1px; height: 1px; overflow: hidden; }
.mform__row { display: flex; gap: calc(20 * var(--e)); }
.mform__row .mform__field { flex: 1; min-width: 0; }
.mform__field {
  width: 100%;
  height: calc(44 * var(--e));
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(10, 226, 148, 0.5);
  border-radius: calc(8 * var(--e));
  padding: 0 calc(14 * var(--e));
  font-family: var(--font-sora);
  font-size: calc(16 * var(--e));
  color: var(--white);
  outline: none;
  transition: border-color .2s ease;
}
.mform__field::placeholder { color: rgba(255, 255, 255, 0.55); }
.mform__field:focus { border-color: var(--green); }
.mform__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: calc(38 * var(--e));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%232EE298' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(14 * var(--e)) center;
}
.mform__select option { background: #0d1714; color: var(--white); }
.mform__actions { display: flex; gap: calc(20 * var(--e)); margin-top: calc(14 * var(--e)); }
.mform__actions .btn { flex: 1; height: calc(50 * var(--e)); }
.mform__privacy { display: flex; gap: calc(10 * var(--e)); align-items: flex-start; margin-top: calc(8 * var(--e)); cursor: pointer; }
.mform__privacy input { width: calc(16 * var(--e)); height: calc(16 * var(--e)); margin-top: calc(2 * var(--e)); flex-shrink: 0; accent-color: var(--green); }
.mform__privacy span { font-family: var(--font-mont); font-size: calc(12 * var(--e)); line-height: 1.5; color: var(--white-75); text-align: justify; }
@media (max-width: 600px) {
  .modal__card { padding: 40px 22px 28px; }
  .mform__row { flex-direction: column; gap: 10px; }
  .mform__row .mform__field { flex: 0 0 auto; }
  .mform__actions { flex-direction: column; gap: 12px; }
  .mform__actions .btn { flex: 0 0 auto; }
  .modal__title { font-size: 20px; }
}