/* ============================================================================
 * tokens.css · Sistema visual IPEA
 * ----------------------------------------------------------------------------
 * La paleta mantiene el azul institucional profundo + cyan de interacción
 * definidos para esta experiencia. El logo oficial circular ya está cargado
 * como asset independiente y no se altera para extraer nuevos colores.
 *
 * REGLA DE COLOR
 *   --azul   = acción e institución. Si algo es azul sólido, se toca.
 *   --cyan   = descubrimiento y confirmación. Si aparece cyan, ALGO PASÓ:
 *              algo se abrió, algo quedó elegido, un paso se completó.
 *              Nunca decora. Nunca es fondo de sección porque sí.
 *   Sin gris para texto: el secundario es --tinta-suave (6,8:1), porque un
 *   gris de 4,5:1 no se lee en un celular al sol, y de ahí viene el tráfico.
 * ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: optional; /* 2026-09-20: swap generaba CLS 0,08–0,10 medido */
  src: url('/assets/fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: optional; /* 2026-09-20: swap generaba CLS 0,08–0,10 medido */
  src: url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* --- Color institucional (medido del logo) ---------------------------- */
  --azul: #0b3b8f;          /* anillo del logo · acción · 10,2:1 con blanco */
  --azul-hondo: #06255c;    /* presionado, paneles profundos               */
  --azul-tenue: #e4ecfa;    /* lavado para fondos de bloque activo          */
  --cyan: #23ace3;          /* chevrón del logo · descubrimiento            */
  --cyan-hondo: #0a6e9e;    /* cyan que sí sirve para texto (5,7:1)         */
  --cyan-tenue: #dbf2fc;

  /* --- Papel y tinta ----------------------------------------------------- */
  --papel: #eef2f7;         /* gris azulado, deliberadamente NO crema       */
  --papel-hondo: #dde5ef;
  --linea: #c6d2e2;
  --hoja: #ffffff;
  --tinta: #0c2445;         /* 13,8:1 sobre papel                           */
  --tinta-suave: #3a5578;   /* 6,8:1 sobre papel                            */
  --tinta-sobre-azul: #c6d8f5; /* 7,1:1 sobre --azul                        */

  /* --- Señales ----------------------------------------------------------- */
  --ok: #12704f;            /* confirmado                                    */
  --alerta: #8a5a00;        /* próxima apertura, atención                    */
  --error: #a3202b;
  --error-tenue: #fbeaec;

  /* --- Tipografía --------------------------------------------------------
   * Una familia, tres voces sacadas de los ejes de la variable.
   *   afiche       ancho 118 · peso 800 · mayúsculas · interlínea 0,92
   *   conversación ancho 100 · peso 400 · 17px · interlínea 1,55
   *   dato         ancho 87  · peso 600 · cifras tabulares
   * ---------------------------------------------------------------------- */
  --font: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --t-afiche: clamp(2rem, 8.6vw, 3.4rem);
  --t-h2: clamp(1.6rem, 6.6vw, 2.6rem);
  --t-h3: 1.25rem;
  --t-cuerpo: 1.0625rem;
  --t-dato: 0.9375rem;
  --t-chip: 0.8125rem;

  /* --- Espacio ------------------------------------------------------------ */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 20px;  --e6: 24px;  --e7: 32px;  --e8: 48px;
  --e9: 64px;  --e10: 96px;

  --gutter: 20px;
  --medida: 34em;           /* menos de 80 caracteres */

  /* --- Forma ---------------------------------------------------------------
   * Redondeado = se toca. El papel no se redondea.
   * ---------------------------------------------------------------------- */
  --r-papel: 2px;
  --r-toca: 10px;
  --r-chip: 999px;

  /* Única sombra del sistema: separa la barra fija del contenido. */
  --sombra-barra: 0 -1px 0 var(--linea), 0 -8px 24px rgba(12, 36, 69, 0.08);

  /* --- Movimiento --------------------------------------------------------- */
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-rapido: 90ms;
  --t-medio: 180ms;
  --t-lento: 320ms;
  --t-entrada: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-rapido: 0.01ms;
    --t-medio: 0.01ms;
    --t-lento: 0.01ms;
    --t-entrada: 0.01ms;
  }
}


/* ============================================================================
 * app.css · Base y componentes · mobile first (360–430 px)
 * ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--font);
  font-size: var(--t-cuerpo);
  line-height: 1.55;
  font-variation-settings: 'wdth' 100;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

img {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none !important;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--azul);
  color: #fff;
  padding: var(--e3) var(--e4);
  z-index: 100;
}
.saltar:focus {
  left: var(--e4);
  top: var(--e4);
}

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--hoja);
  border-radius: var(--r-toca);
}

/* --- Tipografía ----------------------------------------------------------- */

h1,
h2,
h3 {
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0 0 var(--e4);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-afiche);
}
h2 {
  font-size: var(--t-h2);
}
h3 {
  font-size: var(--t-h3);
  line-height: 1.15;
}

p {
  margin: 0 0 var(--e4);
  max-width: var(--medida);
}

s {
  color: var(--tinta-suave);
  text-decoration-thickness: 2px;
}

a {
  color: var(--azul);
}

/* --- Estructura ----------------------------------------------------------- */

main {
  display: block;
}

.hero,
.paso,
.promo,
.porton,
.galeria,
.salidas,
.pie,
.bloques {
  padding-inline: var(--gutter);
}

.hero {
  padding-block: var(--e7) var(--e8);
}

.paso,
.promo,
.porton,
.galeria {
  padding-block: var(--e8);
  border-top: 1px solid var(--linea);
}

.paso__titulo {
  margin-bottom: var(--e3);
}

.paso__bajada {
  color: var(--tinta-suave);
  margin-bottom: var(--e6);
}

/* --- Barra superior ------------------------------------------------------- */

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--gutter);
  padding-top: calc(var(--e3) + env(safe-area-inset-top, 0px));
  background: var(--hoja);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 40;
}

.barra__marca {
  text-decoration: none;
  color: inherit;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--e2);
}

.marca__texto {
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--azul);
  letter-spacing: 0.02em;
}

.marca__datos {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.marca__nombre {
  font-size: 0.6875rem;
  color: var(--tinta-suave);
  max-width: 18ch;
}

.marca__diegep {
  font-variation-settings: 'wdth' 87;
  font-weight: 600;
  font-size: 0.6875rem;
  color: var(--tinta-suave);
}

.barra__asesor {
  font-variation-settings: 'wdth' 87;
  font-weight: 600;
  font-size: var(--t-dato);
  color: var(--azul);
  text-decoration: none;
  border: 1.5px solid var(--azul);
  border-radius: var(--r-toca);
  padding: var(--e2) var(--e3);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* --- Botones -------------------------------------------------------------- */

.cta {
  font-family: inherit;
  font-variation-settings: 'wdth' 87;
  font-weight: 700;
  font-size: var(--t-dato);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  min-height: 52px;
  padding: var(--e3) var(--e5);
  border-radius: var(--r-toca);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--t-rapido) var(--curva), transform var(--t-rapido) var(--curva);
}

.cta--ancho {
  display: flex;
  width: 100%;
  margin-block: var(--e4);
}

.cta--principal {
  background: var(--azul);
  color: #fff;
}
.cta--principal:active {
  background: var(--azul-hondo);
  transform: translateY(1px);
}

.cta--secundario {
  background: transparent;
  color: var(--azul);
  border-color: var(--azul);
}
.cta--secundario:active {
  background: var(--azul-tenue);
}

.cta--suave {
  background: var(--hoja);
  color: var(--tinta);
  border-color: var(--linea);
}

/* --- Chips ---------------------------------------------------------------- */

.hero__chips,
.promo__beneficios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-bottom: var(--e5);
}

.chip {
  font-variation-settings: 'wdth' 87;
  font-weight: 600;
  font-size: var(--t-chip);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 6px var(--e3);
  border-radius: var(--r-chip);
  border: 1.5px solid var(--linea);
  background: var(--hoja);
  color: var(--tinta-suave);
  display: inline-block;
}

.chip--marca {
  border-color: var(--azul);
  color: var(--azul);
  background: var(--azul-tenue);
}

.chip--abierto {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--tinta);
}

.chip--espera {
  background: transparent;
  border-color: var(--alerta);
  color: var(--alerta);
}

/* --- Hero ----------------------------------------------------------------- */

.hero__saludo {
  font-variation-settings: 'wdth' 87;
  font-weight: 600;
  font-size: var(--t-dato);
  color: var(--tinta-suave);
  margin-bottom: var(--e2);
}

.hero__titulo {
  margin-bottom: var(--e4);
}

.hero__bajada {
  font-size: 1.125rem;
  color: var(--tinta-suave);
}

/* --- Elección ------------------------------------------------------------- */

.eleccion {
  border: 0;
  padding: 0;
  margin: 0 0 var(--e6);
}

.eleccion__leyenda {
  font-variation-settings: 'wdth' 87;
  font-weight: 700;
  font-size: var(--t-dato);
  text-transform: uppercase;
  color: var(--tinta);
  padding: 0;
  margin-bottom: var(--e3);
}

.eleccion__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e2);
}

.opcion {
  font-family: inherit;
  font-size: var(--t-cuerpo);
  text-align: left;
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--hoja);
  border: 1.5px solid var(--linea);
  border-radius: var(--r-toca);
  color: var(--tinta);
  cursor: pointer;
  transition: border-color var(--t-medio) var(--curva), background-color var(--t-medio) var(--curva);
}

.opcion:active {
  background: var(--azul-tenue);
}

.opcion.esta-elegida {
  border-color: var(--cyan-hondo);
  border-width: 2px;
  background: var(--cyan-tenue);
}

.opcion__emoji {
  font-size: 1.25rem;
  flex: none;
}

.opcion__texto {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.opcion__etiqueta {
  font-weight: 600;
  line-height: 1.3;
}

.opcion__detalle {
  font-size: var(--t-dato);
  color: var(--tinta-suave);
  line-height: 1.35;
  margin-top: 2px;
}

.opcion__nota {
  font-variation-settings: 'wdth' 87;
  font-size: var(--t-chip);
  text-transform: uppercase;
  color: var(--cyan-hondo);
  flex: none;
}

.opcion__marca {
  flex: none;
  width: 24px;
  text-align: center;
  color: var(--cyan-hondo);
  font-weight: 800;
}

.eleccion__tranquilizador {
  font-size: var(--t-dato);
  color: var(--tinta-suave);
  margin-top: var(--e3);
}

/* --- Microrrecompensa y microcierre --------------------------------------- */

.micro {
  background: var(--hoja);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r-papel);
  padding: var(--e4) var(--e5);
  margin-block: var(--e5);
  animation: aparecer var(--t-entrada) var(--curva) both;
}

.micro__titulo {
  font-variation-settings: 'wdth' 87;
  font-weight: 700;
  font-size: 1.0625rem;
  margin-bottom: var(--e2);
}

.micro__detalle,
.micro__cuerpo p:last-child {
  margin-bottom: 0;
}

.micro__detalle {
  font-size: var(--t-dato);
  color: var(--tinta-suave);
}

.microcierre {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--linea);
}

.microcierre__pregunta {
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  font-size: 1.1875rem;
  margin-bottom: var(--e3);
}

.microcierre__hecho {
  font-variation-settings: 'wdth' 87;
  font-weight: 600;
  color: var(--ok);
  margin-top: var(--e4);
}
.microcierre__hecho::before {
  content: '✓ ';
}

/* --- Bloques que se abren -------------------------------------------------- */

.bloques {
  padding-inline: 0;
  display: grid;
  gap: var(--e6);
  margin-top: var(--e6);
}

.bloque {
  background: var(--hoja);
  border: 1px solid var(--linea);
  border-radius: var(--r-papel);
  padding: var(--e5);
}

.bloque.esta-confirmado {
  border-left: 3px solid var(--ok);
}

.bloque__titulo {
  margin-bottom: var(--e2);
}

.bloque__adelanto {
  color: var(--tinta-suave);
  margin-bottom: var(--e4);
}

/* La entrada alterna de lado: acompaña la comprensión, no secuestra nada.
   No bloquea el scroll ni hace esperar a nadie. */
.bloque.esta-abierto .bloque__cuerpo {
  animation: entrar-izq var(--t-entrada) var(--curva) both;
}
.bloque--der.esta-abierto .bloque__cuerpo {
  animation-name: entrar-der;
}

@keyframes entrar-izq {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes entrar-der {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bloque.esta-abierto .bloque__cuerpo,
  .bloque--der.esta-abierto .bloque__cuerpo,
  .micro {
    animation: none;
  }
}

.clave {
  font-variation-settings: 'wdth' 87;
  font-weight: 700;
  color: var(--azul);
  background: var(--azul-tenue);
  border-radius: var(--r-papel);
  padding: var(--e3) var(--e4);
  max-width: none;
}

.lista-puntos {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e4);
  display: grid;
  gap: var(--e2);
}

.lista-puntos li {
  padding-left: var(--e5);
  position: relative;
  max-width: var(--medida);
}

.lista-puntos li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
}

.lista-puntos--dos {
  grid-template-columns: 1fr;
}

.lista-puntos--destacada li {
  font-size: 1.0625rem;
}

/* --- Mensaje madre --------------------------------------------------------- */

.mensaje-madre {
  background: var(--azul);
  color: #fff;
  border-radius: var(--r-papel);
  padding: var(--e6) var(--e5);
  margin-bottom: var(--e6);
}

.mensaje-madre h3 {
  color: #fff;
  margin-bottom: var(--e4);
}

.mensaje-madre p {
  color: var(--tinta-sobre-azul);
}

.mensaje-madre__remate {
  color: #fff !important;
  font-variation-settings: 'wdth' 87;
  font-weight: 700;
  margin-bottom: 0;
}

/* --- Comparación 11 vs 3 ---------------------------------------------------- */

.comparacion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e3);
  margin-block: var(--e5);
}

.comparacion__lado {
  border: 1px solid var(--linea);
  border-radius: var(--r-papel);
  padding: var(--e4);
  text-align: center;
}

.comparacion__lado--ipea {
  border-color: var(--cyan-hondo);
  border-width: 2px;
  background: var(--cyan-tenue);
}

.comparacion__rotulo {
  font-variation-settings: 'wdth' 87;
  font-weight: 600;
  font-size: var(--t-chip);
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: var(--e2);
}

.comparacion__numero {
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  margin: 0 0 var(--e1);
  font-variant-numeric: tabular-nums;
}

.comparacion__pie {
  font-size: var(--t-chip);
  color: var(--tinta-suave);
  margin-bottom: var(--e3);
}

.comparacion__puntos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.comparacion__punto {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--papel-hondo);
  border: 1px solid var(--linea);
}

.comparacion__punto--ipea {
  background: var(--cyan);
  border-color: var(--cyan-hondo);
}

/* --- Progreso --------------------------------------------------------------- */

.progreso {
  list-style: none;
  display: flex;
  gap: var(--e2);
  margin: 0;
  padding: var(--e4) var(--gutter);
  background: var(--hoja);
  border-bottom: 1px solid var(--linea);
}

.progreso__paso {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-variation-settings: 'wdth' 87;
  font-size: var(--t-chip);
  color: var(--tinta-suave);
  text-transform: uppercase;
}

.progreso__punto {
  height: 4px;
  border-radius: 2px;
  background: var(--papel-hondo);
  display: block;
  font-size: 0;
}

.progreso__paso--hecho .progreso__punto {
  background: var(--ok);
}
.progreso__paso--ahora .progreso__punto {
  background: var(--cyan);
}
.progreso__paso--ahora .progreso__etiqueta {
  color: var(--tinta);
  font-weight: 700;
}

/* --- Medios ----------------------------------------------------------------- */

.medio {
  display: block;
  width: 100%;
  border-radius: var(--r-papel);
  margin-block: var(--e4);
}

.medio--falta {
  background: repeating-linear-gradient(
    135deg,
    var(--papel-hondo),
    var(--papel-hondo) 8px,
    var(--papel) 8px,
    var(--papel) 16px
  );
  border: 1px dashed var(--linea);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
  text-align: center;
  padding: var(--e4);
  color: var(--tinta-suave);
  font-variation-settings: 'wdth' 87;
  font-size: var(--t-chip);
  text-transform: uppercase;
}

/* --- Promoción --------------------------------------------------------------- */

.promo__tarjeta {
  background: var(--hoja);
  border: 1px solid var(--linea);
  border-radius: var(--r-papel);
  padding: var(--e5);
  margin-bottom: var(--e5);
}

.promo__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e3);
  padding-block: var(--e3);
  border-bottom: 1px solid var(--linea);
}

.promo__fila--total {
  border-bottom: 0;
}

.promo__rotulo {
  font-variation-settings: 'wdth' 87;
  font-size: var(--t-dato);
  color: var(--tinta-suave);
  text-transform: uppercase;
}

.promo__valores {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  font-variant-numeric: tabular-nums;
}

.promo__destacado {
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--azul);
}

.promo__nota,
.promo__legal,
.promo__medios {
  font-size: var(--t-dato);
  color: var(--tinta-suave);
}

.promo__requisitos {
  font-variation-settings: 'wdth' 87;
  font-weight: 600;
  background: var(--azul-tenue);
  border-radius: var(--r-papel);
  padding: var(--e3) var(--e4);
  max-width: none;
}

.objetivo {
  margin: 0 0 var(--e5);
  padding-left: var(--e6);
}

.objetivo li {
  font-variation-settings: 'wdth' 87;
  font-weight: 600;
  margin-bottom: var(--e1);
}

/* --- Cursos ------------------------------------------------------------------ */

.lista-cursos {
  list-style: none;
  margin: 0 0 var(--e5);
  padding: 0;
  display: grid;
  gap: var(--e2);
}

.tarjeta-mini {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 60px;
  padding: var(--e3) var(--e4);
  background: var(--hoja);
  border: 1.5px solid var(--linea);
  border-radius: var(--r-toca);
  text-decoration: none;
  color: var(--tinta);
  font-size: 1.25rem;
}

.tarjeta-mini > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  font-size: var(--t-cuerpo);
}

.tarjeta-mini__nota {
  font-size: var(--t-dato);
  color: var(--tinta-suave);
  line-height: 1.35;
}

.dos-caminos {
  display: grid;
  gap: var(--e4);
}

.camino {
  background: var(--hoja);
  border: 1px solid var(--linea);
  border-radius: var(--r-papel);
  padding: var(--e5);
}

.camino h3 {
  margin-bottom: var(--e3);
}

/* --- Galería ------------------------------------------------------------------ */

.galeria__lista {
  list-style: none;
  margin: 0 0 var(--e5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e3);
}

.galeria__nombre {
  font-variation-settings: 'wdth' 87;
  font-weight: 600;
  font-size: var(--t-dato);
}

.galeria__futuro {
  font-size: var(--t-dato);
  color: var(--tinta-suave);
}

/* --- Salidas humanas ----------------------------------------------------------- */

.salidas {
  background: var(--hoja);
  border-top: 1px solid var(--linea);
  padding-block: var(--e7);
}

.salidas__titulo {
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.1875rem;
  margin-bottom: var(--e4);
}

.salidas__opciones {
  display: grid;
  gap: var(--e3);
  margin-bottom: var(--e4);
}

.salidas__opciones .cta {
  margin-block: 0;
  width: 100%;
}

.salidas__sede {
  font-size: var(--t-dato);
  color: var(--tinta-suave);
  margin-bottom: 0;
}

/* --- Avisos --------------------------------------------------------------------- */

.aviso {
  border-left: 3px solid var(--linea);
  padding: var(--e3) var(--e4);
  font-size: var(--t-dato);
  color: var(--tinta-suave);
  background: var(--hoja);
  border-radius: var(--r-papel);
  max-width: none;
}

.aviso--espera {
  border-left-color: var(--alerta);
  color: var(--alerta);
}

/* --- Retomar ---------------------------------------------------------------------- */

.retomar {
  background: var(--cyan-tenue);
  border-bottom: 1px solid var(--linea);
  padding: var(--e4) var(--gutter);
}

.retomar__texto {
  margin-bottom: var(--e3);
  font-size: var(--t-dato);
}

.retomar__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
}

.retomar__acciones .cta {
  margin-block: 0;
}

.retomar__descartar {
  background: none;
  border: 0;
  color: var(--tinta-suave);
  font-family: inherit;
  font-size: var(--t-dato);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
  padding-inline: var(--e2);
}

/* --- Flotante ----------------------------------------------------------------------- */

.flotante {
  position: fixed;
  right: var(--e4);
  bottom: calc(var(--e4) + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 52px;
  padding: var(--e3) var(--e5);
  background: var(--azul);
  color: #fff;
  border-radius: var(--r-chip);
  text-decoration: none;
  font-variation-settings: 'wdth' 87;
  font-weight: 700;
  font-size: var(--t-dato);
  box-shadow: 0 6px 20px rgba(12, 36, 69, 0.22);
}

.flotante--arriba {
  bottom: calc(var(--e4) + 64px + env(safe-area-inset-bottom, 0px));
}

/* En celular el flotante es sólo el ícono: con el texto tapa las opciones
   que la persona tiene que poder tocar, y el punto 27 lo prohíbe. */
@media (max-width: 560px) {
  .flotante {
    width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 0;
    justify-content: center;
    font-size: 1.375rem;
  }
  .flotante__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --- Pie ------------------------------------------------------------------------------ */

.pie {
  background: var(--azul-hondo);
  color: var(--tinta-sobre-azul);
  padding-block: var(--e7) calc(var(--e9) + env(safe-area-inset-bottom, 0px));
  font-size: var(--t-dato);
}

.pie__nombre {
  font-variation-settings: 'wdth' 87;
  font-weight: 700;
  color: #fff;
}

.pie__dato {
  margin-bottom: var(--e1);
}

.pie__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
  margin-top: var(--e5);
}

.pie__links a {
  color: #fff;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ============================================================================
 * Desktop: el mismo contenido, en el mismo orden. No se rearma la página.
 * ========================================================================== */

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }

  .hero,
  .paso,
  .promo,
  .porton,
  .galeria,
  .salidas,
  .pie,
  .progreso,
  .barra,
  .retomar {
    padding-inline: max(var(--gutter), calc((100% - 1040px) / 2));
  }

  .bloques {
    grid-template-columns: repeat(2, 1fr);
  }

  .lista-puntos--dos {
    grid-template-columns: 1fr 1fr;
  }

  .lista-cursos {
    grid-template-columns: repeat(2, 1fr);
  }

  .dos-caminos {
    grid-template-columns: 1fr 1fr;
  }

  .galeria__lista {
    grid-template-columns: repeat(4, 1fr);
  }

  .cta--ancho {
    width: auto;
    min-width: 280px;
  }

  .salidas__opciones {
    grid-auto-flow: column;
    justify-content: start;
  }
}

@media (min-width: 1100px) {
  .lista-cursos {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Marca oficial --------------------------------------------------------- */
.marca__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: none;
  filter: drop-shadow(0 1px 2px rgba(12, 36, 69, 0.18));
}

@media (max-width: 430px) {
  .marca__logo {
    width: 44px;
    height: 44px;
  }
}

/* --- Confianza persistente: oficialidad visible sin competir con el flujo --- */
.barra__confianza {
  font-variation-settings: 'wdth' 87;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--azul);
  border: 1px solid var(--linea);
  border-radius: var(--r-chip);
  padding: 7px 10px;
  white-space: nowrap;
}

@media (max-width: 430px) {
  .barra__confianza-sede {
    display: none;
  }
}

/* --- Evidencia viva: foco por tap, nunca autozoom ------------------------- */
.evidencia,
.microvideo-wrap {
  margin: var(--e6) 0 0;
  max-width: 760px;
}

.evidencia__boton {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}

.evidencia img,
.evidencia__boton img,
.microvideo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-toca);
}

.evidencia__boton img {
  transform-origin: var(--foco-x, 50%) var(--foco-y, 50%);
  transition: transform 520ms var(--curva), filter 240ms ease-out;
}

.evidencia__foco {
  position: absolute;
  left: calc(var(--foco-x, 50%) - 28px);
  top: calc(var(--foco-y, 50%) - 28px);
  width: 56px;
  height: 56px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(6, 37, 92, 0.18);
  opacity: 0;
  transition: opacity 220ms ease-out;
  pointer-events: none;
}

.evidencia.esta-ampliada .evidencia__boton {
  cursor: zoom-out;
}

.evidencia.esta-ampliada .evidencia__boton img {
  transform: scale(var(--foco-escala, 1.05));
}

.evidencia.esta-ampliada .evidencia__foco {
  opacity: 1;
}

.evidencia figcaption {
  font-size: var(--t-dato);
  color: var(--tinta-suave);
  margin-top: var(--e2);
}

.microvideo-wrap {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .evidencia__boton img,
  .evidencia__foco {
    transition: none;
  }
}

/* ==========================================================================
 * FINAL EXPERIENCE LAYER · visuales, cursos, recomendador, leads
 * --------------------------------------------------------------------------
 * Mantiene una sola identidad IPEA. Cada oficio recibe un acento, no una
 * marca paralela. Mobile-first; los layouts se abren recién en escritorio.
 * ========================================================================== */

.marca__logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: none;
}

.barra__confianza {
  font-variation-settings: 'wdth' 87;
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--azul);
  text-transform: uppercase;
  letter-spacing: .02em;
  text-align: right;
}

.hero > .medio,
.hero__contenido + .medio,
.curso-media,
.evidencia,
.microvideo-wrap {
  margin-top: var(--e6);
}

.medio {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--papel-hondo);
  box-shadow: 0 12px 34px rgba(11, 59, 143, 0.09);
}

.medio__pie--portada,
.curso-media__pie,
.galeria__nota {
  color: var(--tinta-suave);
  font-size: var(--t-chip);
  margin: var(--e2) 0 0;
}

/* --- Profesiones: primero imaginar, después elegir ----------------------- */
.galeria__ventana {
  overflow: hidden;
  width: 100%;
  margin-block: var(--e5);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.galeria__lista--movil {
  display: flex;
  width: max-content;
  gap: var(--e3);
  margin: 0;
  animation: galeria-corre 42s linear infinite;
  will-change: transform;
}

.galeria__ventana:hover .galeria__lista--movil,
.galeria__ventana:focus-within .galeria__lista--movil {
  animation-play-state: paused;
}

.galeria__item {
  width: min(58vw, 260px);
  aspect-ratio: 3 / 4;
  flex: none;
  border-radius: 18px;
  overflow: hidden;
  background: var(--papel-hondo);
}

.galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes galeria-corre {
  to { transform: translateX(calc(-50% - var(--e2))); }
}

.censo__paso {
  margin-block: var(--e7);
  scroll-margin-top: 92px;
}

.recomendaciones {
  display: grid;
  gap: var(--e4);
  margin-block: var(--e6);
}

.recomendacion {
  display: grid;
  grid-template-columns: 112px 1fr;
  overflow: hidden;
  background: var(--hoja);
  border: 1.5px solid var(--linea);
  border-radius: 18px;
  text-decoration: none;
  color: var(--tinta);
  min-height: 144px;
  transition: transform 180ms var(--curva), border-color 180ms var(--curva), box-shadow 180ms var(--curva);
}

.recomendacion:active {
  transform: translateY(1px);
}

.recomendacion--primera {
  border-color: var(--azul);
  box-shadow: 0 10px 28px rgba(11, 59, 143, .12);
}

.recomendacion img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recomendacion__cuerpo {
  padding: var(--e4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e2);
  line-height: 1.35;
}

.recomendacion__cuerpo strong {
  font-size: 1.05rem;
}

.recomendacion__etiqueta {
  font-variation-settings: 'wdth' 87;
  font-weight: 700;
  color: var(--azul);
  font-size: var(--t-chip);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.catalogo-secundario {
  margin-top: var(--e7);
  animation: aparecer var(--t-entrada) var(--curva) both;
}

/* --- Curso: una identidad, distintos acentos ----------------------------- */
.curso-page {
  --curso-acento: var(--cyan-hondo);
  --curso-tinte: var(--cyan-tenue);
}

.curso-page[data-curso='reparacion-celulares'] { --curso-acento: #0d84a7; --curso-tinte: #e7f7fb; }
.curso-page[data-curso='smart-tv'] { --curso-acento: #254c9d; --curso-tinte: #edf2ff; }
.curso-page[data-curso='peluqueria-canina'] { --curso-acento: #397a59; --curso-tinte: #edf8f1; }
.curso-page[data-curso='gestoria-automotor'] { --curso-acento: #9a611c; --curso-tinte: #fff6e8; }
.curso-page[data-curso='infracciones-transito'] { --curso-acento: #8e4b2d; --curso-tinte: #fff1ec; }
.curso-page[data-curso='veraz'] { --curso-acento: #4c4a91; --curso-tinte: #f1f0ff; }
.curso-page[data-curso='mecanica-dental'],
.curso-page[data-curso='protesis-flexibles'] { --curso-acento: #1e708b; --curso-tinte: #eaf8fb; }

.hero--curso {
  background: linear-gradient(180deg, var(--curso-tinte) 0, var(--papel) 82%);
}

.hero--curso .hero__titulo::after {
  content: '';
  display: block;
  width: 74px;
  height: 5px;
  border-radius: 4px;
  background: var(--curso-acento);
  margin-top: var(--e4);
}

.curso-media {
  max-width: 860px;
}

.curso-media .evidencia,
.curso-media .microvideo-wrap {
  margin: 0;
}

.curso-media img,
.curso-media video {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.paso--decision {
  background: var(--curso-tinte);
}

.camino:first-child {
  border-top: 4px solid var(--curso-acento);
}

/* --- Lead: último paso humano, no formulario administrativo -------------- */
.lead-form {
  background: var(--azul-hondo);
  color: #fff;
  border-radius: 18px;
  padding: var(--e5);
  margin-block: var(--e5);
  text-align: left;
}

.lead-form--compacto {
  margin-block: var(--e4) 0;
}

.lead-form__titulo {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: var(--e2);
}

.lead-form__bajada,
.lead-form__seguridad {
  color: rgba(255,255,255,.78);
  font-size: var(--t-dato);
}

.lead-form__campos {
  display: grid;
  gap: var(--e3);
  margin-block: var(--e4);
}

.lead-form label:not(.lead-form__consentimiento) {
  display: grid;
  gap: 6px;
  font-size: var(--t-dato);
  font-weight: 700;
}

.lead-form input[type='text'],
.lead-form input[type='tel'],
.lead-form input:not([type]) {
  width: 100%;
  min-height: 54px;
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: var(--r-toca);
  padding: 0 var(--e4);
  background: #fff;
  color: var(--tinta);
  font: inherit;
  font-size: 1rem;
}

.lead-form__consentimiento {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--e3);
  align-items: start;
  font-size: var(--t-chip);
  color: rgba(255,255,255,.86);
  margin-block: var(--e4);
}

.lead-form__consentimiento input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--cyan);
}

.lead-form__error {
  background: #fff2f0;
  color: #8b2f24;
  padding: var(--e3);
  border-radius: var(--r-toca);
  font-size: var(--t-dato);
  max-width: none;
}

.lead-form .cta--principal {
  background: #fff;
  color: var(--azul-hondo);
}

.lead-form__seguridad {
  margin: var(--e3) 0 0;
}

/* --- Evidencia viva ------------------------------------------------------- */
.evidencia,
.microvideo-wrap {
  width: 100%;
  margin-inline: 0;
}

.evidencia img,
.microvideo {
  border-radius: 16px;
  background: var(--papel-hondo);
  box-shadow: 0 10px 30px rgba(11,59,143,.09);
}

/* --- Desktop -------------------------------------------------------------- */
@media (min-width: 860px) {
  .hero {
    max-width: 1180px;
    margin-inline: auto;
  }

  .hero--curso,
  .hero--combo,
  .hero--profesiones,
  .hero--puerta,
  .hero--secundario {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, .92fr);
    column-gap: clamp(40px, 6vw, 86px);
    align-items: center;
  }

  .hero--curso > .hero__titulo,
  .hero--curso > .hero__bajada,
  .hero--curso > .hero__chips,
  .hero--combo > .hero__titulo,
  .hero--combo > .hero__bajada,
  .hero--combo > .hero__chips,
  .hero--combo > .lista-puntos,
  .hero--combo > .microcierre,
  .hero--combo > .micro,
  .hero--secundario > :not(.medio),
  .hero--puerta > :not(.medio) {
    grid-column: 1;
  }

  .hero--curso > .curso-media,
  .hero--combo > .medio,
  .hero--secundario > .medio,
  .hero--puerta > .medio {
    grid-column: 2;
    grid-row: 1 / span 6;
    margin-top: 0;
  }

  .hero--profesiones .hero__contenido { grid-column: 1; }
  .hero--profesiones > .medio { grid-column: 2; margin-top: 0; }

  .lead-form__campos {
    grid-template-columns: 1fr 1fr;
  }

  .recomendaciones {
    grid-template-columns: 1.25fr .9fr .9fr;
    align-items: stretch;
  }

  .recomendacion {
    grid-template-columns: 1fr;
    grid-template-rows: 220px 1fr;
  }

  .recomendacion--primera {
    transform: translateY(-8px);
  }

  .recomendacion--primera:hover {
    transform: translateY(-11px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .galeria__lista--movil,
  .catalogo-secundario {
    animation: none !important;
    transform: none !important;
  }
  .galeria__ventana { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
}

.practica-ruta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block: var(--e5);
}
.practica-ruta span:nth-child(odd) {
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--curso-tinte, var(--azul-tenue));
  color: var(--curso-acento, var(--azul));
  font-weight: 700;
  font-size: var(--t-dato);
}
.practica-ruta span:nth-child(even) { color: var(--tinta-suave); }

.paso--acompanamiento-curso {
  background: var(--azul-hondo);
  color: #fff;
}
.paso--acompanamiento-curso .paso__titulo { color: #fff; }
.paso--acompanamiento-curso p { color: var(--tinta-sobre-azul); }

/* Promoción combo: mientras la inscripción esté marcada para revisión no se
   muestra un monto potencialmente vencido ni se habilita un pago incorrecto. */
.promo__aviso {
  display: grid;
  gap: .45rem;
  margin: 1rem 0;
  padding: 1rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--marca-cyan, #23ace3) 42%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--marca-cyan, #23ace3) 8%, white);
  color: var(--texto, #0a1830);
  line-height: 1.45;
}
.promo__aviso strong { font-size: 1.02rem; }


/* FINAL hosting pass */
.hero--gracias { min-height: min(72vh, 720px); display: flex; flex-direction: column; justify-content: center; }
.hero--gracias .cta { align-self: flex-start; margin-top: var(--e5); }
@media (max-width: 767px) {
  main { padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
  .hero--gracias .cta { width: 100%; }
}


/* ============================================================================
 * recorrido.css · La experiencia del secundario · página modelo
 * ----------------------------------------------------------------------------
 * Ritmo lento y respirado. Nada aparece solo: todo entra cuando la persona
 * toca. En celular sube desde abajo, que es de donde viene el pulgar; en
 * escritorio alterna de lado.
 * ========================================================================== */

/* --- Portada: limpia, humana, una cosa por vez ---------------------------- */

.portada {
  padding: var(--e9) var(--gutter) var(--e8);
  background: var(--hoja);
  border-bottom: 1px solid var(--linea);
}

/* 10vw y no 12: a 375 px, "SECUNDARIO" en ancho 118 se sale de la pantalla.
   Medido, no estimado. */
.portada__titulo {
  font-size: clamp(2.1rem, 10vw, 4.5rem);
  line-height: 0.94;
  margin-bottom: var(--e6);
  max-width: 14ch;
  overflow-wrap: break-word;
}

.portada__remate {
  display: block;
  color: var(--azul);
}

.portada__linea {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  max-width: 30ch;
  margin-bottom: var(--e4);
}

.portada__linea--fuerte {
  color: var(--tinta);
  font-weight: 700;
  font-size: 1.3125rem;
}

.portada__oficial {
  font-variation-settings: 'wdth' 87;
  font-weight: 600;
  font-size: var(--t-chip);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--azul);
  border-top: 2px solid var(--cyan);
  padding-top: var(--e3);
  margin-top: var(--e7);
  max-width: none;
}

/* --- Actos y capítulos ---------------------------------------------------- */

.acto,
.capitulo,
.madre,
.pausa,
.final {
  padding: var(--e9) var(--gutter);
}

.acto,
.capitulo {
  border-top: 1px solid var(--linea);
}

.acto__entrada,
.capitulo__entrada {
  font-variation-settings: 'wdth' 87;
  font-weight: 600;
  font-size: var(--t-chip);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cyan-hondo);
  margin-bottom: var(--e3);
}

.acto__titulo,
.capitulo__titulo {
  font-size: clamp(1.75rem, 7.4vw, 2.75rem);
  margin-bottom: var(--e4);
}

.capitulo__titulo {
  padding-bottom: var(--e4);
  border-bottom: 3px solid var(--cyan);
  display: inline-block;
}

.acto__bajada {
  color: var(--tinta-suave);
  font-size: 1.0625rem;
  margin-bottom: var(--e7);
}

.capitulo.esta-cerrado .capitulo__titulo {
  border-bottom-color: var(--ok);
}

/* El progreso se siente porque los capítulos cerrados quedan escritos atrás.
   Sin barra, sin "paso 4 de 12". */
.sello {
  font-variation-settings: 'wdth' 87;
  font-weight: 600;
  font-size: var(--t-dato);
  color: var(--ok);
  border-top: 1px solid var(--linea);
  padding-top: var(--e4);
  margin-top: var(--e7);
  max-width: none;
  animation: asomar 420ms var(--curva) both;
}

.sello::before {
  content: '✓ ';
  font-weight: 800;
}

/* --- Devolución personalizada --------------------------------------------- */

.devolucion {
  background: var(--hoja);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r-papel);
  padding: var(--e6) var(--e5);
  margin-top: var(--e6);
  animation: asomar 420ms var(--curva) both;
}

.devolucion__intro {
  font-size: var(--t-dato);
  color: var(--tinta-suave);
  margin-bottom: var(--e2);
}

.devolucion__cifra {
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 6vw, 2rem);
  line-height: 1.05;
  margin-bottom: var(--e4);
}

.devolucion__cifra strong {
  color: var(--azul);
  display: block;
}

.devolucion__cuenta {
  font-size: var(--t-dato);
  margin-bottom: var(--e2);
}

.devolucion__letra {
  font-size: var(--t-chip);
  color: var(--tinta-suave);
  margin-bottom: 0;
}

.devolucion__lista {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e4);
  display: grid;
  gap: var(--e3);
}

.devolucion__lista li {
  padding-left: var(--e5);
  position: relative;
}

.devolucion__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
}

/* --- Microcierre ---------------------------------------------------------- */

.cierre {
  margin-top: var(--e7);
  padding-top: var(--e5);
  border-top: 1px solid var(--linea);
}

.cierre__pregunta {
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.08;
  font-size: clamp(1.25rem, 5.4vw, 1.75rem);
  margin-bottom: var(--e5);
  max-width: 22ch;
}

.cierre--final .cierre__pregunta {
  color: #fff;
}

/* --- Mensaje madre -------------------------------------------------------- */

.madre {
  background: var(--azul);
  color: #fff;
}

.madre__titulo {
  color: #fff;
  font-size: clamp(1.75rem, 7.4vw, 2.75rem);
  margin-bottom: var(--e5);
}

.madre__parrafo {
  color: var(--tinta-sobre-azul);
  font-size: 1.0625rem;
}

.lemas {
  list-style: none;
  padding: 0;
  margin: var(--e7) 0;
  display: grid;
  gap: var(--e3);
}

.lemas li {
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 5.6vw, 1.75rem);
  line-height: 1.05;
  color: #fff;
  padding-left: var(--e5);
  border-left: 3px solid var(--cyan);
}

.madre .cta--principal {
  background: #fff;
  color: var(--azul);
}

/* --- Descubrimientos: siete formas, ninguna repetida ---------------------- */

.desc {
  margin-top: var(--e8);
  animation: subir 440ms var(--curva) both;
}

.desc__titulo {
  font-size: clamp(1.35rem, 5.6vw, 1.875rem);
  line-height: 1.08;
  margin-bottom: var(--e4);
  max-width: 20ch;
}

.desc__texto p {
  font-size: 1.0625rem;
  color: var(--tinta-suave);
}

.desc__aclaracion {
  font-variation-settings: 'wdth' 87;
  font-weight: 700;
  color: var(--azul);
  background: var(--azul-tenue);
  border-radius: var(--r-papel);
  padding: var(--e4);
  max-width: none;
  margin-top: var(--e4);
}

.desc__puntos {
  list-style: none;
  padding: 0;
  margin: var(--e5) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.desc__puntos li {
  font-variation-settings: 'wdth' 87;
  font-weight: 600;
  font-size: var(--t-chip);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 8px var(--e3);
  border: 1.5px solid var(--linea);
  border-radius: var(--r-chip);
  color: var(--tinta-suave);
}

/* declaración · hoja blanca */
.desc--declaracion {
  background: var(--hoja);
  border-radius: var(--r-papel);
  padding: var(--e6) var(--e5);
}

/* palabra · la palabra es la noticia */
.desc__palabra {
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 15vw, 5.5rem);
  line-height: 0.88;
  color: var(--azul);
  margin: var(--e4) 0 var(--e5);
  max-width: none;
  border-bottom: 6px solid var(--cyan);
  display: inline-block;
  padding-bottom: var(--e2);
}

/* tranquila · sin caja, sin ruido, medida corta */
.desc--tranquila {
  border-left: 2px solid var(--linea);
  padding-left: var(--e5);
}

.desc--tranquila .desc__texto p {
  max-width: 28ch;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--tinta);
}

.desc--tranquila .desc__aclaracion {
  background: none;
  padding: 0;
  font-variation-settings: 'wdth' 118;
  font-size: 1.25rem;
  text-transform: uppercase;
}

/* humano y evolución · fondo azul, sin imagen: es sobre personas */
.desc--humano,
.desc--evolucion {
  background: var(--azul-hondo);
  color: #fff;
  border-radius: var(--r-papel);
  padding: var(--e7) var(--e5);
}

.desc--humano .desc__titulo,
.desc--evolucion .desc__titulo {
  color: #fff;
}

.desc--humano .desc__texto p,
.desc--evolucion .desc__texto p {
  color: var(--tinta-sobre-azul);
}

.desc--humano .desc__puntos li,
.desc--evolucion .desc__puntos li {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* conversación · un diálogo, no una lista */
.dialogo {
  list-style: none;
  padding: 0;
  margin: var(--e5) 0 0;
  display: grid;
  gap: var(--e3);
}

.dialogo__linea {
  padding: var(--e3) var(--e4);
  border-radius: 16px;
  font-size: 1.0625rem;
  max-width: 86%;
  line-height: 1.4;
}

.dialogo__linea--persona {
  background: var(--papel-hondo);
  border-bottom-left-radius: 4px;
  justify-self: start;
}

.dialogo__linea--sistema {
  background: var(--azul);
  color: #fff;
  border-bottom-right-radius: 4px;
  justify-self: end;
}

/* --- La comparación: el momento del recorrido ---------------------------- */

.comp {
  margin: var(--e6) 0;
  display: grid;
  gap: var(--e3);
  text-align: center;
}

.comp__lado {
  border-radius: var(--r-papel);
  padding: var(--e5) var(--e4);
  background: var(--hoja);
  border: 1px solid var(--linea);
}

.comp__lado--ipea {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}

.comp__rotulo {
  font-variation-settings: 'wdth' 87;
  font-weight: 600;
  font-size: var(--t-chip);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
  margin-bottom: var(--e2);
  max-width: none;
}

.comp__lado--ipea .comp__rotulo {
  color: var(--tinta-sobre-azul);
}

.comp__numero {
  font-variation-settings: 'wdth' 118;
  font-weight: 800;
  font-size: clamp(3.5rem, 20vw, 6rem);
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--e2);
  max-width: none;
}

.comp__pie {
  font-size: var(--t-dato);
  color: var(--tinta-suave);
  margin-bottom: var(--e4);
  max-width: none;
}

.comp__lado--ipea .comp__pie {
  color: var(--tinta-sobre-azul);
}

.comp__puntos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.comp__punto {
  width: 14px;
  height: 18px;
  border-radius: 2px;
  background: var(--papel-hondo);
  border: 1px solid var(--linea);
}

.comp__punto--ipea {
  background: var(--cyan);
  border-color: var(--cyan);
}

.comp__flecha {
  font-size: 1.75rem;
  color: var(--cyan-hondo);
  margin: 0;
  max-width: none;
  line-height: 1;
}

/* --- La pausa ------------------------------------------------------------- */

.pausa {
  background: var(--cyan-tenue);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

.pausa__titulo {
  font-size: clamp(1.75rem, 7.4vw, 2.75rem);
  margin-bottom: var(--e3);
}

.pausa__recordatorio {
  color: var(--tinta-suave);
  margin-bottom: var(--e6);
}

/* --- El final -------------------------------------------------------------- */

.final {
  background: var(--azul);
  color: #fff;
}

.final__titulo {
  color: #fff;
  font-size: clamp(1.75rem, 7.4vw, 2.75rem);
  margin-bottom: var(--e5);
}

.final__parrafo {
  color: var(--tinta-sobre-azul);
  font-size: 1.125rem;
}

.final .cierre {
  border-top-color: rgba(255, 255, 255, 0.24);
}

.final .cta--principal {
  background: #fff;
  color: var(--azul);
}

/* --- Punto de fuga: discreto, persistente, y no te saca de la página ------ */

.fuga {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--e4) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 48px;
  padding: var(--e2) var(--e4) var(--e2) var(--e3);
  background: var(--hoja);
  color: var(--tinta);
  border: 1.5px solid var(--linea);
  border-radius: var(--r-chip);
  font-family: inherit;
  font-size: var(--t-dato);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(12, 36, 69, 0.14);
}

.fuga__icono {
  font-size: 1.25rem;
}


.hoja {
  position: fixed;
  inset: 0;
  z-index: 90;
}

.hoja__fondo {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(6, 37, 92, 0.45);
  cursor: pointer;
  animation: fundir 240ms ease-out both;
}

.hoja__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--hoja);
  border-radius: 20px 20px 0 0;
  padding: var(--e3) var(--gutter) calc(var(--e7) + env(safe-area-inset-bottom, 0px));
  max-height: 88vh;
  overflow-y: auto;
  animation: hoja-sube 320ms var(--curva) both;
}

.hoja__asa {
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--linea);
  margin: 0 auto var(--e5);
}

.hoja__titulo {
  font-size: 1.375rem;
  margin-bottom: var(--e2);
}

.hoja__bajada {
  color: var(--tinta-suave);
  font-size: var(--t-dato);
  margin-bottom: var(--e5);
}

.hoja__opciones {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e3);
}

.hoja__opcion {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  min-height: 64px;
  padding: var(--e4);
  border: 1.5px solid var(--azul);
  border-radius: var(--r-toca);
  background: var(--hoja);
  color: var(--tinta);
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
}

.hoja__opcion--seguir {
  border-color: var(--linea);
}

.hoja__opcion-titulo {
  font-variation-settings: 'wdth' 87;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--azul);
}

.hoja__opcion--seguir .hoja__opcion-titulo {
  color: var(--tinta);
}

.hoja__opcion-detalle {
  font-size: var(--t-dato);
  color: var(--tinta-suave);
  line-height: 1.4;
}

/* --- Movimiento ------------------------------------------------------------ */

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes asomar {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hoja-sube {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}

@keyframes fundir {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes entrar-desde-izq {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes entrar-desde-der {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desc,
  .devolucion,
  .sello,
  .hoja__panel,
  .hoja__fondo {
    animation: none;
  }
}

/* --- Escritorio: alterna de lado ------------------------------------------ */

@media (min-width: 768px) {
  .portada,
  .acto,
  .capitulo,
  .madre,
  .pausa,
  .final {
    padding-inline: max(var(--gutter), calc((100% - 1040px) / 2));
  }

  .portada {
    padding-block: var(--e10);
  }

  .desc {
    max-width: 760px;
  }

  .desc--der {
    margin-left: auto;
  }

  .desc--izq {
    animation-name: entrar-desde-izq;
  }

  .desc--der {
    animation-name: entrar-desde-der;
  }

  .comp {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .comp__flecha {
    transform: rotate(-90deg);
  }

  .hoja__panel {
    left: 50%;
    right: auto;
    bottom: 50%;
    transform: translate(-50%, 50%);
    width: min(520px, calc(100% - 2 * var(--gutter)));
    border-radius: 20px;
    animation-name: asomar;
  }

  .hoja__asa {
    display: none;
  }

}

/* --- Afinado V2: recompensa de duración + transparencia sin sobrecarga --- */
.devolucion--duracion {
  position: relative;
  overflow: hidden;
}

.devolucion--duracion::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--cyan), var(--azul));
  pointer-events: none;
}

.devolucion__detalle-calculo {
  margin-top: var(--e5);
  border-top: 1px solid var(--linea);
  padding-top: var(--e4);
  color: var(--tinta-suave);
  font-size: var(--t-dato);
}

.devolucion__detalle-calculo summary {
  cursor: pointer;
  color: var(--azul);
  font-weight: 700;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.devolucion__detalle-calculo p {
  margin: var(--e2) 0 0;
  font-size: var(--t-dato);
}

/* El check seleccionado es también una microrrecompensa de estado. */
.opcion.esta-elegida .opcion__marca {
  animation: confirmar-opcion 220ms var(--curva) both;
}

@keyframes confirmar-opcion {
  0% { transform: scale(0.72); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .opcion.esta-elegida .opcion__marca {
    animation: none;
  }
}


/* Portada final: en escritorio la prueba visual acompaña al mensaje, sin
   convertir el hero en un afiche publicitario. */
.medio__pie--portada {
  padding-inline: var(--gutter);
  margin-top: calc(-1 * var(--e5));
  margin-bottom: var(--e6);
}

@media (min-width: 860px) {
  .portada {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr);
    column-gap: clamp(44px, 6vw, 90px);
    align-items: center;
  }
  .portada > :not(.medio) { grid-column: 1; }
  .portada > .medio {
    grid-column: 2;
    grid-row: 1 / span 5;
    margin-block: 0;
  }
  .medio__pie--portada {
    max-width: 1040px;
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
}

/* ========================================================================== 
   UX FINAL CORREGIDA · 2026-09-19
   Control del usuario, motion no invasivo y mobile-first.
   ========================================================================== */

/* Galería aspiracional: el movimiento lo controla la persona. */
.galeria__ventana {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.galeria__lista--movil {
  animation: none !important;
  will-change: auto;
  padding-inline: var(--e3);
}
.galeria__item { scroll-snap-align: start; }
.galeria__item--futuro {
  display: grid;
  place-content: center;
  gap: var(--e3);
  text-align: center;
  padding: var(--e5);
  background: linear-gradient(160deg, var(--azul-hondo), #0c5a99 70%, var(--cyan-hondo));
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
}
.galeria__item--futuro strong { font-size: clamp(1.15rem, 5vw, 1.55rem); }
.galeria__item--futuro span:last-child { font-size: var(--t-chip); color: rgba(255,255,255,.8); }
.galeria__emoji { font-size: 3.2rem; line-height: 1; }
.resumen-personalizado {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: 0 0 var(--e3);
  padding: 0;
  list-style: none;
}
.resumen-personalizado li {
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(11,59,143,.08);
  color: var(--azul);
  font-weight: 700;
  font-size: var(--t-chip);
}

/* Microvideos: una reproducción y el control vuelve al usuario. */
.microvideo-wrap { position: relative; }
.microvideo__replay {
  position: absolute;
  right: var(--e3);
  bottom: var(--e3);
  min-height: 44px;
  padding: .65rem .9rem;
  border: 0;
  border-radius: 999px;
  background: rgba(5,28,63,.9);
  color: #fff;
  font: inherit;
  font-weight: 800;
  box-shadow: 0 5px 18px rgba(5,28,63,.25);
  cursor: pointer;
}
.microvideo__replay:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* Cursos: pequeños hitos de decisión para que no sean folletos largos. */
.paso--curso-entrada,
.paso--microcierre-curso {
  background: linear-gradient(180deg, #fff, var(--curso-tinte, var(--azul-tenue)));
}
.paso--microcierre-curso .cta { margin-top: var(--e4); }
.camino--combo {
  border-top: 4px solid var(--curso-acento, var(--cyan-hondo));
  box-shadow: 0 10px 28px rgba(11,59,143,.09);
}


/* Resumen semántico visible para personas y asistentes de IA. */
.aeo-summary {
  max-width: 960px;
  margin: var(--e8) auto;
  padding: 0 var(--gutter) var(--e8);
}
.aeo-summary details {
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: #fff;
  padding: var(--e4) var(--e5);
}
.aeo-summary summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--azul);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.aeo-summary__contenido { margin-top: var(--e3); }
.aeo-summary__contenido h2 { font-size: 1.2rem; margin-top: var(--e4); }
.aeo-summary__contenido p,
.aeo-summary__contenido li { max-width: 72ch; }

@media (prefers-reduced-motion: reduce) {
  .microvideo__replay { transition: none !important; }
  .galeria__ventana { scroll-behavior: auto; }
}


/* ========================================================================== 
   UX + CRM FINAL · cierre de experiencia mobile y handoff humano
   ========================================================================== */
@media (max-width: 767px) {
  .hero--puerta > .medio,
  .portada > .medio,
  .medio__pie--portada { display: none !important; }
  .hero--puerta,
  .portada {
    padding-top: clamp(28px, 7vw, 44px);
    padding-bottom: clamp(24px, 6vw, 36px);
  }
  .hero--puerta .hero__bajada { margin-bottom: 0; }
}
.evidencia.esta-ampliada .evidencia__boton img {
  transform: scale(var(--foco-escala, 1.25));
}
.ritmo-opciones {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e4);
}
.ritmo-opciones > .cta { margin-top: 0; }
@media (min-width: 620px) {
  .ritmo-opciones--doble { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lead-form--exito {
  text-align: center;
  border: 1px solid rgba(35,172,227,.45);
  box-shadow: 0 14px 34px rgba(5,28,63,.18);
}
.lead-form__check {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--e3);
  border-radius: 50%;
  background: var(--cyan);
  color: var(--azul-hondo);
  font-size: 1.6rem;
  font-weight: 900;
}
.lead-form__referencia {
  margin: var(--e3) 0;
  padding: .65rem .85rem;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: var(--t-dato);
}
.hoja__crm { margin-top: var(--e3); }
.hoja__crm .lead-form { margin: 0; border-radius: 14px; }
.hoja__volver {
  min-height: 44px;
  margin: 0 0 var(--e2);
  padding: .4rem .7rem;
  border: 0;
  background: transparent;
  color: var(--azul);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.censo__paso > .cta { margin-top: var(--e4); }
@media (prefers-reduced-motion: reduce) {
  .evidencia.esta-ampliada .evidencia__boton img { transform: none; }
}


/* ========================================================================== 
   GEMINI BUYER-JOURNEY HARDENING · UX/CRO/CRM
   ========================================================================== */

/* La microrrecompensa cambia de estado visual: no es sólo otro párrafo. */
.micro {
  position: relative;
  padding-left: calc(var(--e5) + 30px);
  box-shadow: 0 8px 22px rgba(11,59,143,.06);
  transition: border-color 180ms var(--curva), box-shadow 180ms var(--curva), transform 180ms var(--curva);
}
.micro::before {
  content: '✓';
  position: absolute;
  left: var(--e4);
  top: var(--e4);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cyan-tenue);
  color: var(--cyan-hondo);
  font-weight: 900;
  animation: confirmar-opcion 220ms var(--curva) both;
}

/* Personas con baja alfabetización digital: la evidencia dice explícitamente que se toca. */
.evidencia__ayuda {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(5,28,63,.86);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.15;
  box-shadow: 0 4px 14px rgba(5,28,63,.22);
  pointer-events: none;
}
.evidencia.esta-ampliada .evidencia__ayuda { background: rgba(255,255,255,.92); color: var(--azul-hondo); }

/* En ahorro de datos / 2G / reduced-motion no descargamos video hasta que la persona lo pide. */
.microvideo-wrap--poster { position: relative; }
.microvideo__manual {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  min-height: 48px;
  max-width: calc(100% - 24px);
  padding: 9px 15px;
  border: 0;
  border-radius: 999px;
  background: rgba(5,28,63,.9);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

/* El recomendador toma postura sin decidir por la persona. */
.recomendacion--primera {
  grid-template-columns: 1fr;
  border-width: 2px;
  box-shadow: 0 14px 34px rgba(11,59,143,.16);
}
.recomendacion--primera img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 8;
  object-fit: cover;
}
.recomendacion--primera .recomendacion__cuerpo { padding: var(--e5); }
.recomendacion--primera .recomendacion__cuerpo strong { font-size: clamp(1.25rem, 5vw, 1.65rem); }
.recomendacion--primera .recomendacion__etiqueta {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--azul-tenue);
}
@media (min-width: 760px) {
  .recomendacion--primera { grid-template-columns: minmax(280px, 46%) 1fr; }
  .recomendacion--primera img { height: 100%; aspect-ratio: auto; }
}

/* Antes del número, la persona recapitula valor adquirido. */
.value-stack {
  margin: var(--e5) 0;
  padding: var(--e5);
  border: 1.5px solid var(--linea);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, var(--azul-tenue));
}
.value-stack__intro { font-weight: 800; color: var(--azul-hondo); margin-bottom: var(--e3); }
.value-stack__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.value-stack__lista li { position: relative; padding-left: 28px; }
.value-stack__lista li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 900; }
.promo__trust {
  margin: var(--e4) 0 0;
  padding: var(--e3) var(--e4);
  border-radius: 12px;
  background: var(--azul-tenue);
  color: var(--azul-hondo);
  font-size: var(--t-dato);
  font-weight: 800;
  text-align: center;
}

@media (max-width: 360px) {
  .barra { padding-inline: 12px; gap: 8px; }
  .marca__logo { width: 40px; height: 40px; }
  .barra__confianza { font-size: .64rem; padding: 6px 8px; }
  .cta { min-height: 54px; }
  .opcion { min-height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .micro::before { animation: none; }
}

/* ==========================================================================
   PUBLICACION FINAL · ergonomia mobile + CRM consistente
   ========================================================================== */
.lead-form__consentimiento {
  font-size: var(--t-dato);
  line-height: 1.45;
}
@media (max-width: 360px) {
  .lead-form__consentimiento { font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fuga { transition: none !important; }
}

/* ==========================================================================
   PATCH 2026-09-20 · punto humano estructural, Home puerta, formulario
   ========================================================================== */
/* Punto humano: en mobile vive en la barra (texto "Asesor"), nunca flota
   sobre el contenido. En escritorio se mantiene la pastilla flotante. */
.barra__ayuda {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--azul); border-radius: 999px;
  color: var(--azul); background: var(--hoja, #fff);
  font-weight: 800; font-size: .8125rem; letter-spacing: .02em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.barra__ayuda:focus-visible { outline: 3px solid var(--cyan, #1ea7e1); outline-offset: 2px; }
.barra__ayuda-punto { width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; }
@media (max-width: 767px) {
  .fuga { display: none; }
  .barra__confianza { display: none; }
  main { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) {
  .barra__ayuda { display: none; }
  .fuga { transition: opacity 180ms ease-out; }
  .fuga--oculta { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .fuga { transition: none; } }
/* Home: una pregunta fuerte + 3 puertas dentro del primer viewport */
.medio--picture { overflow: hidden; }
.medio--picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
  .hero--puerta { padding-bottom: 8px; }
  .hero--puerta .hero__titulo { margin-bottom: 8px; }
  .paso--puerta { padding-top: 12px; }
  .paso--puerta .eleccion__leyenda { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
/* Entrevista presencial discreta */
.entrevista-discreta { margin: 12px 0 0; font-size: var(--t-dato); color: var(--tinta-suave); }
.entrevista-discreta a { color: var(--azul); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* Formulario: privacidad + honeypot */
.lead-form__privacidad { margin: 4px 0 12px; font-size: var(--t-dato); }
.lead-form__privacidad a { color: inherit; text-decoration: underline; }
.lead-form__trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Letra aumentada (200 %): la barra no crece más de 2 líneas de texto. */
@media (max-width: 767px) {
  .marca__datos { min-width: 0; }
  .marca__diegep { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Release final: barra robusta en pantallas angostas y texto ampliado. */
@media (max-width: 340px) {
  .barra { gap: 6px; padding-inline: 8px; }
  .marca { gap: 6px; min-width: 0; }
  .marca__logo { width: 40px; height: 40px; flex: 0 0 40px; }
  .marca__datos { min-width: 0; }
  .marca__diegep { font-size: .625rem; line-height: 1.15; max-width: 18ch; }
  .barra__ayuda { min-height: 44px; padding-inline: 9px; font-size: .72rem; gap: 5px; flex: 0 0 auto; }
  .barra__ayuda-punto { width: 7px; height: 7px; }
}

/* === IPEA PREMIUM PASS START === */
/* IPEA PREMIUM PASS · additive layer
   Goal: product-quality polish without changing the information architecture.
   Motion rule: explain, focus, respond or reward — otherwise static. */

html.ipea-premium {
  --premium-ink: #0f172a;
  --premium-muted: #475569;
  --premium-blue: #0b3b8f;
  --premium-blue-2: #174ea6;
  --premium-blue-soft: #eff6ff;
  --premium-line: #dbe4f0;
  --premium-surface: #ffffff;
  --premium-surface-2: #f8fafc;
  --premium-radius-sm: 14px;
  --premium-radius: 20px;
  --premium-radius-lg: 28px;
  --premium-shadow-1: 0 1px 2px rgb(15 23 42 / .04), 0 8px 24px rgb(15 23 42 / .06);
  --premium-shadow-2: 0 10px 30px rgb(15 23 42 / .09), 0 2px 8px rgb(15 23 42 / .06);
  --premium-focus: 0 0 0 4px rgb(29 78 216 / .20);
  --premium-fast: var(--t-medio, 160ms);
  --premium-base: var(--t-lento, 260ms);
  --premium-slow: var(--t-entrada, 420ms);
  --premium-ease: cubic-bezier(.22,1,.36,1);
  color-scheme: light;
}

/* ── Global coherence, not a redesign ───────────────────────────── */
html.ipea-premium body {
  color: var(--premium-ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html.ipea-premium main {
  isolation: isolate;
}

html.ipea-premium main > section,
html.ipea-premium main > article,
html.ipea-premium main > aside {
  scroll-margin-top: 112px;
}

html.ipea-premium :where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
  box-shadow: var(--premium-focus);
}

html.ipea-premium :where(button, .cta, .opcion, .tarjeta-mini, a[class*="btn"], a[class*="cta"]) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html.ipea-premium :where(button, .cta, .opcion, .tarjeta-mini, a[class*="btn"], a[class*="cta"]):active {
  transform: translateY(1px) scale(.992);
  transition-duration: 90ms;
}

@media (hover:hover) and (pointer:fine) {
  html.ipea-premium :where(.opcion, .tarjeta-mini, .cta, a[class*="btn"], button):not(:disabled) {
    transition: transform var(--premium-fast) var(--premium-ease),
                box-shadow var(--premium-base) var(--premium-ease),
                border-color var(--premium-base) var(--premium-ease),
                background-color var(--premium-base) var(--premium-ease);
  }
  html.ipea-premium :where(.opcion, .tarjeta-mini):hover {
    transform: translateY(-2px);
    box-shadow: var(--premium-shadow-1);
  }
}

/* Do not dim alternatives after a selection. The chosen option rises instead. */
html.ipea-premium .opcion {
  min-height: 56px;
  border-radius: var(--premium-radius-sm);
}
html.ipea-premium .opcion[aria-pressed="false"] {
  opacity: 1;
  color: var(--premium-ink);
}
html.ipea-premium .opcion[aria-pressed="true"],
html.ipea-premium .opcion.premium-confirmed {
  background: var(--premium-blue-soft);
  border-color: #1d4ed8;
  color: var(--premium-ink);
  box-shadow: 0 5px 16px rgb(29 78 216 / .10);
  transform: translateY(-2px);
}
html.ipea-premium .opcion[aria-pressed="true"] .opcion__marca,
html.ipea-premium .opcion.premium-confirmed .opcion__marca {
  transform: scale(1);
  opacity: 1;
}


/* Home: the physical address remains in the footer, but it does not compete with the first decision. */
html:has(.hero--puerta) .salidas__sede { display: none; }

/* ── Narrative progress ─────────────────────────────────────────── */
html.ipea-premium .premium-progress {
  position: fixed;
  z-index: 80;
  inset: 0 0 auto 0;
  height: 3px;
  pointer-events: none;
  background: rgb(219 228 240 / .50);
}
html.ipea-premium .premium-progress__bar {
  width: 100%;
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--premium-progress, 0));
  background: #1d4ed8;
  transition: transform 90ms linear;
  will-change: transform;
}
html.ipea-premium .premium-journey {
  position: sticky;
  z-index: 35;
  top: 62px;
  margin: 0 auto 8px;
  width: min(760px, calc(100% - 28px));
  pointer-events: none;
  display: flex;
  justify-content: center;
}
html.ipea-premium .premium-journey__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgb(203 213 225 / .88);
  border-radius: 999px;
  background: rgb(255 255 255 / .96);
  box-shadow: 0 4px 18px rgb(15 23 42 / .08);
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.ipea-premium .premium-journey__label {
  color: var(--premium-blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
html.ipea-premium .premium-journey__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.ipea-premium .premium-journey__dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
  flex: 0 0 auto;
}
html.ipea-premium .premium-journey__dots i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: width var(--premium-base) var(--premium-ease), background-color var(--premium-base) var(--premium-ease);
}
html.ipea-premium .premium-journey__dots i.is-done { background: #93b4e8; }
html.ipea-premium .premium-journey__dots i.is-current { width: 14px; background: var(--premium-blue); }

/* ── Micro rewards: readable even before reveal ───────────────── */
html.ipea-premium.premium-motion-ready .premium-reveal {
  opacity: .92;
  transform: translateY(8px);
  transition: opacity var(--premium-slow) var(--premium-ease),
              transform var(--premium-slow) var(--premium-ease),
              box-shadow var(--premium-slow) var(--premium-ease);
}
html.ipea-premium.premium-motion-ready .premium-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
html.ipea-premium .premium-tap {
  animation: premiumTap var(--premium-fast) var(--premium-ease) both;
}
@keyframes premiumTap {
  45% { transform: translateY(1px) scale(.988); }
}

html.ipea-premium .premium-confirmed {
  animation: premiumConfirm 320ms var(--premium-ease) both;
}
@keyframes premiumConfirm {
  0% { box-shadow: 0 0 0 0 rgb(29 78 216 / .20); }
  100% { box-shadow: 0 0 0 8px rgb(29 78 216 / 0); }
}

/* ── Micro closures: bridge, not a new blocky landing section ─── */
html.ipea-premium .premium-microclose {
  width: min(680px, calc(100% - 32px));
  margin: 2px auto 30px;
  padding: 14px 2px 0;
  border-top: 1px solid var(--premium-line);
  background: transparent;
}
html.ipea-premium .premium-microclose__eyebrow {
  margin: 0 0 5px;
  color: var(--premium-blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html.ipea-premium .premium-microclose__text {
  margin: 0;
  color: #334155;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.5;
}
html.ipea-premium .premium-microclose__next {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 46px;
  margin-top: 7px;
  padding: 8px 2px;
  border: 0;
  background: transparent;
  color: #123d80;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
}
html.ipea-premium .premium-microclose__next::after {
  content: "→";
  margin-left: 8px;
  transition: transform var(--premium-fast) var(--premium-ease);
}
@media (hover:hover) {
  html.ipea-premium .premium-microclose__next:hover::after { transform: translateX(3px); }
}

/* ── Real-photo treatment: evidence, not stock-style decoration ─ */
html.ipea-premium .premium-real-media {
  overflow: hidden;
  border: 1px solid rgb(203 213 225 / .78);
  border-radius: var(--premium-radius-lg);
  background: #e2e8f0;
  box-shadow: var(--premium-shadow-2);
}
html.ipea-premium .premium-real-media img,
html.ipea-premium img.premium-real-media {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
html.ipea-premium .premium-evidence-strip {
  width: min(1040px, calc(100% - 32px));
  margin: 26px auto 34px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, .9fr);
  gap: 16px;
  align-items: stretch;
}
html.ipea-premium .premium-evidence-strip__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 3.5vw, 38px);
  border: 1px solid var(--premium-line);
  border-radius: var(--premium-radius-lg);
  background: #fff;
  box-shadow: var(--premium-shadow-1);
}
html.ipea-premium .premium-evidence-strip__copy small {
  color: var(--premium-blue);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
html.ipea-premium .premium-evidence-strip__copy strong {
  margin-top: 8px;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.08;
  letter-spacing: -.025em;
}
html.ipea-premium .premium-evidence-strip__copy p {
  margin: 12px 0 0;
  color: var(--premium-muted);
  line-height: 1.55;
}
html.ipea-premium .premium-evidence-strip__photo {
  min-height: 310px;
}
html.ipea-premium .premium-evidence-strip__photo img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Existing main media gets more editorial framing without changing content. */
html.ipea-premium :where(.hero, .portada) .medio,
html.ipea-premium :where(.hero, .portada) .medio--picture {
  border-radius: clamp(18px, 3vw, 30px);
  box-shadow: 0 16px 42px rgb(15 23 42 / .12);
}
html.ipea-premium .medio__pie {
  color: #64748b;
}

/* Improve cards as one system. */
html.ipea-premium :where(.paso, .capitulo, .bloque, .tarjeta, .tarjeta-mini, .salidas) {
  --local-line: #dbe4f0;
}
html.ipea-premium :where(.tarjeta, .tarjeta-mini, .salidas, .microrecompensa, [class*="recompensa"]) {
  border-color: var(--local-line, var(--premium-line));
}

/* Primary CTAs feel tactile but not promotional/flashy. */
html.ipea-premium :where(.cta, button[class*="cta"], a[class*="cta"]) {
  min-height: 48px;
  border-radius: 13px;
}
html.ipea-premium .fuga {
  min-height: 52px;
  box-shadow: 0 12px 30px rgb(15 23 42 / .16);
}

/* ── Mobile: composition, not desktop squeezed smaller ─────────── */
@media (max-width: 767px) {
  html.ipea-premium .premium-journey { top: 58px; width: calc(100% - 20px); }
  html.ipea-premium .premium-journey__pill { font-size: 11px; min-height: 32px; }
  html.ipea-premium :where(button, a.cta, .opcion, .tarjeta-mini, input, select) { min-height: 48px; }
  html.ipea-premium :where(.hero, .portada) { overflow: clip; }
  html.ipea-premium :where(.hero, .portada) .medio,
  html.ipea-premium :where(.hero, .portada) .medio--picture {
    width: calc(100% + 8px);
    margin-left: -4px;
    border-radius: 20px;
  }
  html.ipea-premium .premium-evidence-strip {
    grid-template-columns: 1fr;
    width: calc(100% - 24px);
    gap: 10px;
  }
  html.ipea-premium .premium-evidence-strip__photo { min-height: 260px; order: -1; }
  html.ipea-premium .premium-microclose { width: calc(100% - 24px); margin-bottom: 22px; }
  html.ipea-premium .premium-microclose__next { width: auto; }
  html.ipea-premium .premium-evidence-strip__copy {
    border: 0;
    box-shadow: none;
    padding: 14px 4px 2px;
    background: transparent;
  }
  html.ipea-premium .fuga { max-width: calc(100vw - 24px); }

}

/* Large text must reflow instead of clipping. */
@media (max-width: 767px) {
  html.ipea-premium .barra,
  html.ipea-premium .barra__marca,
  html.ipea-premium .barra__confianza { min-width: 0; }
  html.ipea-premium .premium-journey__pill { max-width: calc(100vw - 28px); }
}

/* Reduced motion: every enhancement becomes static; no information disappears. */
@media (prefers-reduced-motion: reduce) {
  html.ipea-premium *,
  html.ipea-premium *::before,
  html.ipea-premium *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html.ipea-premium.premium-motion-ready .premium-reveal,
  html.ipea-premium.premium-motion-ready .premium-reveal.is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* === IPEA PREMIUM PASS END === */


/* --- IPEA premium comparison refinement --- */
.desc--comparacion .desc__titulo {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variation-settings: normal;
  font-weight: 720;
  font-size: clamp(1.55rem, 6vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-transform: none;
  max-width: 24ch;
  color: #102a43;
}

.comp {
  gap: 12px;
  margin: 28px 0 24px;
}

.comp__lado {
  border-radius: 18px;
  padding: 22px 20px;
  background: #ffffff;
  border: 1px solid rgba(16, 42, 67, 0.10);
  box-shadow: 0 8px 28px rgba(16, 42, 67, 0.06);
}

.comp__lado--ipea {
  background: #f2f7ff;
  border-color: rgba(20, 76, 166, 0.22);
  color: #102a43;
  box-shadow: 0 10px 30px rgba(20, 76, 166, 0.08);
}

.comp__rotulo,
.comp__lado--ipea .comp__rotulo {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variation-settings: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 650;
  font-size: 0.82rem;
  color: #52606d;
}

.comp__numero {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variation-settings: normal;
  font-weight: 760;
  font-size: clamp(3rem, 14vw, 4.6rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: #102a43;
}

.comp__lado--ipea .comp__numero {
  color: #144ca6;
}

.comp__pie,
.comp__lado--ipea .comp__pie {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.98rem;
  line-height: 1.35;
  color: #52606d;
  margin-bottom: 16px;
}

.comp__punto {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #d9e2ec;
  border: 0;
}

.comp__punto--ipea {
  background: #2eb7e5;
  border: 0;
}

.comp__flecha {
  color: #7b8794;
  font-size: 1.4rem;
}

.desc--comparacion .desc__texto p {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.04rem;
  line-height: 1.62;
  color: #334e68;
}

.desc--comparacion .desc__aclaracion {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variation-settings: normal;
  font-weight: 650;
  color: #144ca6;
  background: transparent;
  border-left: 3px solid #2eb7e5;
  border-radius: 0;
  padding: 2px 0 2px 14px;
  margin-top: 20px;
}

/* ========================================================================
   IPEA · PREMIUM 10K FINAL VISUAL SYSTEM · 2026-09-20
   Canon: producto digital premium, humano, institucional y mobile-first.
   ======================================================================== */
:root {
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --papel: #f6f8fb;
  --papel-hondo: #edf2f7;
  --hoja: #ffffff;
  --tinta: #13233a;
  --tinta-suave: #52647a;
  --linea: #dbe3ec;
  --azul: #164f9f;
  --azul-hondo: #0d356d;
  --azul-tenue: #edf4ff;
  --cyan: #35b6d8;
  --cyan-hondo: #147c98;
  --cyan-tenue: #edfafd;
  --r-papel: 18px;
  --r-toca: 14px;
  --gutter: clamp(20px, 5vw, 32px);
  --medida: 38em;
  --t-afiche: clamp(2.35rem, 8vw, 4.4rem);
  --t-h2: clamp(1.72rem, 6vw, 2.7rem);
  --t-h3: clamp(1.28rem, 4.8vw, 1.65rem);
  --t-cuerpo: 1.0625rem;
}

html { scroll-padding-top: 82px; }
body {
  font-family: var(--font);
  font-variation-settings: normal;
  background: var(--papel);
  color: var(--tinta);
  letter-spacing: -0.006em;
}

h1,h2,h3,.portada__titulo,.acto__titulo,.capitulo__titulo,.desc__titulo,.madre__titulo,.final__titulo,.cierre__pregunta {
  font-family: var(--font);
  font-variation-settings: normal;
  text-transform: none;
  letter-spacing: -0.035em;
  line-height: 1.06;
  font-weight: 720;
}
h1 { font-size: var(--t-afiche); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p { line-height: 1.62; }

.barra {
  padding-block: 10px;
  background: rgba(255,255,255,.96);
  border-bottom-color: rgba(19,35,58,.08);
  box-shadow: 0 8px 24px rgba(20,42,70,.035);
  backdrop-filter: blur(10px);
}
.marca__diegep,.marca__nombre,.barra__asesor {
  font-family: var(--font); font-variation-settings: normal; letter-spacing: 0; text-transform: none;
}
.marca__diegep { font-weight: 650; color: #40546d; }
.barra__asesor {
  border-width: 1px; border-color: rgba(22,79,159,.55); border-radius: 999px;
  padding-inline: 16px; min-height: 44px; font-weight: 680;
}

.portada {
  padding: clamp(48px, 8vw, 86px) var(--gutter) clamp(44px, 7vw, 74px);
  background: linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
  border-bottom-color: rgba(19,35,58,.07);
}
.portada__titulo {
  font-size: clamp(2.35rem, 9vw, 4.5rem);
  max-width: 12ch;
  margin-bottom: 22px;
}
.portada__remate { color: var(--azul); }
.portada__linea { font-size: clamp(1.06rem, 3.8vw, 1.2rem); color: var(--tinta-suave); max-width: 38ch; }
.portada__linea--fuerte { font-size: 1.12rem; color: var(--tinta); font-weight: 650; }
.portada__oficial {
  text-transform: none; letter-spacing: 0; font-family: var(--font); font-variation-settings: normal;
  border-top: 0; padding: 10px 14px; margin-top: 24px; display: inline-flex;
  background: #edf4ff; border-radius: 999px; color: #174984; font-weight: 680;
}

.acto,.capitulo,.madre,.pausa,.final { padding: clamp(54px, 10vw, 92px) var(--gutter); }
.acto,.capitulo { border-top-color: rgba(19,35,58,.07); }
.acto__entrada,.capitulo__entrada {
  font-family: var(--font); font-variation-settings: normal; font-weight: 700;
  text-transform: none; letter-spacing: .015em; color: #237c96; font-size: .86rem;
}
.acto__titulo,.capitulo__titulo { font-size: clamp(1.8rem, 6.4vw, 2.75rem); max-width: 22ch; }
.capitulo__titulo { border-bottom: 0; padding-bottom: 0; display: block; }
.acto__bajada { font-size: 1.04rem; color: var(--tinta-suave); max-width: 40ch; }

.devolucion {
  background: #fff; border: 1px solid rgba(19,35,58,.08); border-left: 0;
  border-radius: 20px; padding: clamp(22px,5vw,34px); box-shadow: 0 16px 44px rgba(20,42,70,.065);
}
.devolucion__cifra {
  font-family: var(--font); font-variation-settings: normal; text-transform: none; letter-spacing: -.035em;
  font-size: clamp(1.65rem,6vw,2.35rem); line-height: 1.08; font-weight: 720;
}
.devolucion__cifra strong { display: inline; color: var(--azul); }
.devolucion__letra { font-size: .98rem; line-height: 1.55; }

.cierre { margin-top: 32px; padding-top: 26px; border-top-color: rgba(19,35,58,.09); }
.cierre__pregunta {
  text-transform: none; font-variation-settings: normal; font-size: clamp(1.3rem,4.8vw,1.72rem);
  font-weight: 700; line-height: 1.18; max-width: 30ch;
}

.cta {
  font-family: var(--font); font-variation-settings: normal; text-transform: none; letter-spacing: 0;
  border-radius: 14px; min-height: 54px; font-weight: 700; font-size: 1rem;
  box-shadow: none;
}
.cta--principal,.cta--secundario { background: var(--azul); }
@media (hover:hover) { .cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(22,79,159,.14); } }

.madre,.final {
  background: linear-gradient(145deg,#103f82,#0c3269);
  border-radius: 0;
}
.madre__titulo,.final__titulo { font-size: clamp(1.85rem,6.2vw,2.75rem); }
.lemas { gap: 10px; }
.lemas li {
  font-family: var(--font); font-variation-settings: normal; text-transform: none; letter-spacing: 0;
  font-size: 1.12rem; line-height: 1.3; font-weight: 650; border-left-width: 2px;
}

.desc { margin-top: clamp(34px,8vw,64px); }
.desc__titulo { font-size: clamp(1.4rem,5.2vw,1.9rem); max-width: 27ch; margin-bottom: 16px; }
.desc__texto p { font-size: 1.04rem; color: var(--tinta-suave); max-width: 40ch; }
.desc--declaracion {
  background: #fff; border: 1px solid rgba(19,35,58,.075); border-radius: 20px;
  padding: clamp(22px,5vw,34px); box-shadow: 0 14px 38px rgba(20,42,70,.045);
}
.desc__palabra {
  font-family: var(--font); font-variation-settings: normal; text-transform: none; letter-spacing: -.04em;
  font-weight: 740; font-size: clamp(2.05rem,9vw,3.65rem); line-height: .98; color: var(--azul);
  border-bottom: 0; padding-bottom: 0; margin: 14px 0 20px;
}
.desc__puntos li {
  font-family: var(--font); font-variation-settings: normal; text-transform: none; letter-spacing: 0;
  font-size: .9rem; font-weight: 620; padding: 9px 13px; border-width: 1px; background: rgba(255,255,255,.72);
}
.desc__aclaracion {
  font-family: var(--font); font-variation-settings: normal; font-weight: 650; background: transparent;
  border-left: 3px solid var(--cyan); border-radius: 0; padding: 2px 0 2px 14px;
}
.desc--tranquila { border-left-color: #cbd6e3; }
.desc--tranquila .desc__aclaracion { text-transform: none; font-size: 1.05rem; }
.desc--humano,.desc--evolucion {
  background: #fff; color: var(--tinta); border: 1px solid rgba(19,35,58,.075);
  border-radius: 20px; padding: clamp(24px,5vw,38px); box-shadow: 0 14px 38px rgba(20,42,70,.045);
}
.desc--humano .desc__titulo,.desc--evolucion .desc__titulo { color: var(--tinta); }
.desc--humano .desc__texto p,.desc--evolucion .desc__texto p { color: var(--tinta-suave); }
.desc--humano .desc__puntos li,.desc--evolucion .desc__puntos li { border-color: #dbe3ec; color: var(--tinta-suave); }

.comp { gap: 12px; margin: 26px 0 22px; text-align: left; }
.comp__lado {
  border-radius: 18px; padding: 20px; background: #fff; border: 1px solid rgba(19,35,58,.09);
  box-shadow: 0 10px 30px rgba(20,42,70,.04);
}
.comp__lado--ipea { background: #f0f6ff; border-color: rgba(22,79,159,.18); color: var(--tinta); }
.comp__rotulo,.comp__lado--ipea .comp__rotulo {
  font-family: var(--font); font-variation-settings: normal; text-transform: none; letter-spacing: 0;
  font-size: .87rem; font-weight: 700; color: #52647a;
}
.comp__numero {
  font-family: var(--font); font-variation-settings: normal; font-size: clamp(2.55rem,11vw,3.55rem);
  font-weight: 760; letter-spacing: -.05em; color: var(--tinta); line-height: .95;
}
.comp__lado--ipea .comp__numero { color: var(--azul); }
.comp__pie,.comp__lado--ipea .comp__pie { font-size: 1rem; color: #52647a; margin-bottom: 13px; }
.comp__punto { width: 10px; height: 10px; border-radius: 999px; }
.comp__flecha { text-align: center; color: #6f8095; font-size: 1.15rem; }

.evidencia,.microvideo-wrap {
  margin: 24px 0 0; border: 1px solid rgba(19,35,58,.08); border-radius: 22px;
  overflow: hidden; background: #fff; box-shadow: 0 16px 42px rgba(20,42,70,.07);
}
.evidencia img,.microvideo { display:block; width:100%; height:auto; }
.evidencia figcaption {
  font-family: var(--font); font-size: .9rem; color: #6a7a8e; padding: 11px 14px 14px;
  background: #fff;
}
.evidencia__ayuda {
  font-family: var(--font); font-size: .78rem; border-radius: 999px; background: rgba(12,35,69,.82);
  color:#fff; padding: 7px 10px;
}

.pausa { background: #f0f8fb; border-color: rgba(19,35,58,.07); }
.sello {
  font-family: var(--font); font-variation-settings: normal; font-weight: 650; font-size: .9rem;
  border-top-color: rgba(19,35,58,.08);
}

/* Mobile: no afiche gigante, no caja dentro de caja, lectura adulta. */
@media (max-width: 767px) {
  :root { --gutter: 22px; }
  .portada { padding-top: 42px; }
  .portada__titulo { font-size: clamp(2.2rem,10.8vw,3.2rem); }
  .acto,.capitulo,.madre,.pausa,.final { padding-block: 56px; }
  .desc { margin-top: 38px; }
  .desc__palabra { font-size: clamp(2rem,10vw,2.85rem); max-width: 10ch; }
  .comp__numero { font-size: 3rem; }
  .evidencia,.microvideo-wrap { border-radius: 18px; }
  .premium-journey { display:none !important; }
}

@media (min-width: 820px) {
  .portada,.acto,.capitulo,.madre,.pausa,.final { padding-inline: max(var(--gutter), calc((100vw - 1080px)/2)); }
  .comp { grid-template-columns: 1fr auto 1fr; align-items: stretch; }
  .comp__flecha { align-self:center; transform: rotate(-90deg); }
}

/* ── Institutional proof + real stories ───────────────────────────────── */
.premium-proof-stack { display: contents; }
.premium-eyebrow {
  margin: 0 0 10px; color: #1c7894; font: 700 .84rem/1.2 var(--font);
  letter-spacing: .02em; text-transform: none;
}
.premium-official,.premium-stories {
  padding: clamp(56px,10vw,92px) var(--gutter);
  border-top: 1px solid rgba(19,35,58,.07);
}
.premium-official { background: #fff; }
.premium-official h2,.premium-stories h2 {
  max-width: 20ch; margin-bottom: 14px; font-size: clamp(1.85rem,6vw,2.8rem);
}
.premium-official__lead,.premium-stories__lead { color: var(--tinta-suave); max-width: 42ch; }
.premium-official__grid {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 28px 0 22px;
}
.premium-official__grid > div {
  padding: 17px 16px; border: 1px solid rgba(19,35,58,.08); border-radius: 16px; background: #f8fafc;
}
.premium-official__grid span { display:block; color:#6a7a8e; font-size:.8rem; margin-bottom:3px; }
.premium-official__grid strong { display:block; color:var(--tinta); font-size:1.12rem; letter-spacing:-.015em; }
.premium-text-link { color:var(--azul); font-weight:700; text-decoration-thickness:1px; text-underline-offset:4px; }

.premium-stories { background: #f7f9fc; }
.premium-stories__grid { display:grid; grid-template-columns:1fr; gap:12px; margin-top:26px; }
.premium-stories figure {
  margin:0; overflow:hidden; border-radius:20px; background:#fff; border:1px solid rgba(19,35,58,.08);
  box-shadow:0 14px 38px rgba(20,42,70,.05);
}
.premium-stories img { width:100%; aspect-ratio: 4/3; object-fit:cover; display:block; }
.premium-stories figure:nth-child(1) img,.premium-stories figure:nth-child(2) img { aspect-ratio:1/1; }
.premium-stories figcaption { padding:13px 15px 15px; color:#52647a; font-size:.9rem; }
.premium-socials { display:grid; gap:9px; margin-top:18px; }
.premium-socials a {
  display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px;
  padding:13px 15px; border:1px solid rgba(19,35,58,.09); border-radius:15px; background:#fff;
  color:var(--tinta); text-decoration:none;
}
.premium-socials span { color:#6a7a8e; font-size:.82rem; }
.premium-socials strong { color:var(--azul); font-size:.9rem; text-align:right; }

@media (min-width:760px) {
  .premium-stories__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .premium-official__grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .premium-socials { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .premium-socials a { display:block; }
  .premium-socials strong { display:block; text-align:left; margin-top:6px; }
}

/* V11 (2026-10-08) · Secundario: oferta única de capacitación antes del precio. */
.oferta-unica__botones { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 760px) { .oferta-unica__botones { grid-template-columns: 1fr 1fr; } }