/* ═══════════════════════════════════════════════════════════════════════════
   Prospera Latam — sistema visual

   Principio: la estructura la hacen el espacio y la tipografía, no las cajas.
   Nada de sombras, degradados ni animación decorativa. Cada línea que se
   dibuja separa dos cosas que de verdad son distintas.

   Un solo mundo de color: verde profundo de fondo, crema para leer, oro para
   lo que se toca. Cada herramienta tiñe su pantalla con su propio acento.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Escala tipográfica — razón 1.25, seis pasos y ninguno más */
  --t-xs:   0.75rem;
  --t-s:    0.875rem;
  --t-base: 1rem;
  --t-m:    1.25rem;
  --t-l:    1.75rem;
  --t-xl:   2.5rem;

  /* Escala de espacio — base 4, sin valores sueltos */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 48px;  --e-8: 72px;

  --medida: 34em;         /* ancho de lectura cómodo */

  /* ── EL MUNDO DE COLOR ─────────────────────────────────────────────────
     Un solo tema, a propósito. Verde profundo de fondo —el color del billete
     y del campo— y oro para lo que se toca. Todo lo demás es crema: ninguna
     letra es blanca pura, ningún fondo es negro puro. Eso es lo que separa
     "oscuro" de "caro". */
  --fondo:        #0C1F19;
  --fondo-2:      #10261F;                 /* bandas de sección */
  --superficie:   #16312A;                 /* cartas, cosas que se agarran */
  --superficie-2: #1C3B33;                 /* la misma, al pasar el mouse */
  --tinta:        #F4EFE3;
  --tinta-2:      #C8C2B2;
  --tenue:        #8C9A91;
  --linea:        rgba(244, 239, 227, 0.12);
  --linea-fuerte: rgba(244, 239, 227, 0.38);

  /* Oro: el color de la acción. Solo los botones principales lo llevan. */
  --oro:      #E4B44A;
  --oro-alto: #F0C765;
  --oro-piso: rgba(228, 180, 74, 0.14);

  /* Los seis acentos, uno por herramienta, todos calibrados sobre el verde. */
  --verde:      #5FD3A5;  --verde-alto: #86E3BF;  --verde-piso: rgba(95, 211, 165, 0.14);
  --ambar:      #E9B25A;  --ambar-alto: #F3C777;  --ambar-piso: rgba(233, 178, 90, 0.14);
  --azul:       #7FB2EC;  --azul-alto:  #A6CBF4;  --azul-piso:  rgba(127, 178, 236, 0.14);
  --barro:      #E89C82;  --barro-alto: #F2B9A5;  --barro-piso: rgba(232, 156, 130, 0.14);
  --alerta:     #F08A7C;  --alerta-alto: #F6A89D; --alerta-piso: rgba(240, 138, 124, 0.14);

  /* El acento vivo. En la puerta es oro; dentro, el de la herramienta. */
  --acento:      var(--oro);
  --acento-alto: var(--oro-alto);
  --acento-piso: var(--oro-piso);

  --velo: rgba(12, 31, 25, 0.74);
  --sombra-1: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px -14px rgba(0,0,0,.65);
  --sombra-2: 0 2px 6px rgba(0,0,0,.45), 0 24px 56px -20px rgba(0,0,0,.8);

  /* Movimiento: una curva y dos tiempos. Nada más. */
  --curva:  cubic-bezier(.22,.80,.28,1);
  --rapido: 140ms;
  --medio:  300ms;
  --radio:   16px;
  --radio-s: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, .marca, .btn, .titulo, .sub-titulo, .seccion-titulo {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

a { color: var(--acento); text-underline-offset: 3px; }

.app { max-width: 46rem; margin: 0 auto; padding: 0 var(--e-4) var(--e-8); }

/* ── barra superior ───────────────────────────────────────────────────── */
/* Cristal: el contenido pasa por debajo en vez de cortarse contra un bloque
   opaco. Es la unica pieza del sitio que se desenfoca, y solo por eso. */
.barra {
  position: sticky; top: 0; z-index: 20;
  background: var(--velo);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  padding: calc(var(--e-3) + env(safe-area-inset-top)) 0 var(--e-3);
  border-bottom: 1px solid var(--linea);
}
/* La barra cruza toda la pantalla; su contenido se alinea con la columna. */
.barra-int { padding-top: 0; padding-bottom: 0; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barra { background: var(--fondo); }
}
/* Arriba del todo la barra no dibuja su linea: no hay nada que separar
   todavia. Aparece en cuanto empiezas a bajar, cuando si hay algo pasando por
   debajo. El cristal, en cambio, no se apaga nunca: sin el, el texto que pasa
   por detras se vuelve ilegible. */
.barra { border-bottom-color: transparent; }
body.desplazado .barra { border-bottom-color: var(--linea); }
.barra-fila { display: flex; align-items: center; gap: var(--e-4); min-height: 44px; }
.marca {
  display: flex; align-items: center; gap: var(--e-2);
  color: var(--tinta); text-decoration: none; flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.marca .logo { display: block; flex: 0 0 auto; }
.wordmark {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1; white-space: nowrap;
}
.wordmark b { color: var(--oro); font-weight: 800; }
.wordmark-chico { font-size: 1.05rem; }
.wordmark-grande { font-size: clamp(1.5rem, 6vw, 2rem); }

.nav { display: flex; gap: var(--e-4); margin-left: auto; }
.nav a {
  font-size: var(--t-s); font-weight: 700; color: var(--tinta-2);
  text-decoration: none; padding: var(--e-2) 0; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.nav a:hover { color: var(--tinta); }
.nav a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--oro); }
/* Dentro de una herramienta la navegación se va y entra el rastro. */
body[data-ruta="dentro"] .nav { display: none; }
.rastro { display: none; align-items: center; gap: var(--e-2); margin-left: auto; min-width: 0; }
body[data-ruta="dentro"] .rastro { display: flex; }
.rastro-salir { white-space: nowrap; }
.rastro-nombre {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  font-size: var(--t-s); color: var(--tinta); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
body[data-ruta="puerta"] .paso-num,
body[data-ruta="seccion"] .paso-num { display: none; }
/* En el telefono, dentro de una herramienta, el nombre escrito de la marca
   cede su sitio al rastro; el logo se queda como ancla para volver. */
@media (max-width: 59.99rem) {
  body[data-ruta="dentro"] .wordmark { display: none; }
}
.paso-num {
  font-size: var(--t-xs); color: var(--tenue);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Barra de avance: dos píxeles, sin transición. Informa, no decora. */
.riel { height: 2px; background: var(--linea); margin-top: var(--e-3); }
.riel[hidden] { display: none; }
.riel > i {
  display: block; height: 100%; background: var(--acento);
  transition: width var(--medio) var(--curva);
}

/* ── ritmo vertical ───────────────────────────────────────────────────── */
.vista { padding-top: var(--e-6); }
.vista > * + * { margin-top: var(--e-4); }

.sobretitulo {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--acento); margin: 0;
}
.titulo { font-size: var(--t-l); font-weight: 800; line-height: 1.12; }
.portada-titulo { font-size: var(--t-xl); line-height: 1.05; }
.bajada { color: var(--tinta-2); margin: 0; max-width: var(--medida); }
.portada-bajada { font-size: var(--t-m); }

/* Un título de sección es una regla más una palabra: separa sin encajonar. */
.seccion-titulo {
  font-size: var(--t-m); font-weight: 800;
  margin-top: var(--e-7) !important; padding-top: var(--e-3);
  border-top: 1px solid var(--linea-fuerte);
}
.sub-titulo { font-size: var(--t-base); font-weight: 700; margin-top: var(--e-5) !important; }
.seccion-nota {
  font-size: var(--t-s); color: var(--tenue);
  margin: var(--e-1) 0 var(--e-4); max-width: var(--medida);
}
.consigna {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--tenue); font-weight: 700; margin: 0;
}

/* ── inicio ───────────────────────────────────────────────────────────── */
.hero-inicio > * + * { margin-top: var(--e-4); }
.promesas {
  list-style: none; margin: var(--e-5) 0 0; padding: 0;
  border-top: 1px solid var(--linea);
}
.promesas li {
  padding: var(--e-3) 0; border-bottom: 1px solid var(--linea);
  font-size: var(--t-s); color: var(--tinta-2);
}
.promesas li b { color: var(--tinta); font-weight: 700; }

/* ── herramientas pendientes ──────────────────────────────────────────── */
.herramientas-grilla { border-top: 1px solid var(--linea); }
.herramienta { padding: var(--e-5) 0; border-bottom: 1px solid var(--linea); }
.herramienta h3 { font-size: var(--t-base); font-weight: 800; margin-bottom: var(--e-1); }
.herramienta .fila-top {
  display: flex; gap: var(--e-2); align-items: baseline;
  font-size: var(--t-xs); color: var(--tenue); margin-bottom: var(--e-2);
}
.pronto-chip {
  font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tenue);
}
.pronto-chip + .anios::before { content: "· "; }
.herramienta .hace { margin: 0 0 var(--e-3); font-size: var(--t-s); color: var(--tinta-2); }

.btn-votar {
  background: none; border: none; padding: 0;
  font: inherit; font-size: var(--t-s); font-weight: 700;
  color: var(--acento); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-votar:hover:not(:disabled) { color: var(--acento-alto); }
.btn-votar.votada { color: var(--tenue); text-decoration: none; cursor: default; }

/* ── ítems del test ───────────────────────────────────────────────────── */
.leyenda {
  display: flex; justify-content: space-between;
  font-size: var(--t-xs); color: var(--tenue); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: var(--e-2) !important;
}
.item {
  padding: var(--e-4) 0;
  border-top: 1px solid var(--linea);
  margin-top: 0 !important;
}
.item:last-of-type { border-bottom: 1px solid var(--linea); }
.item p { margin: 0 0 var(--e-3); font-size: var(--t-base); line-height: 1.35; }
.item.falta { border-top-color: var(--alerta); }
.item.falta p { color: var(--alerta); font-weight: 700; }

.escala { display: flex; gap: var(--e-2); }
.punto {
  flex: 1; min-height: 50px; min-width: 44px;
  border: 1px solid var(--linea); background: transparent;
  font: inherit; font-size: var(--t-s); font-weight: 700; color: var(--tenue);
  cursor: pointer; border-radius: var(--radio-s);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--rapido) var(--curva),
              background-color var(--rapido) var(--curva),
              border-color var(--rapido) var(--curva),
              color var(--rapido) var(--curva);
}
.punto:hover { border-color: var(--tinta-2); color: var(--tinta); }
.punto:active { transform: scale(.94); }
.punto[aria-pressed="true"] {
  background: var(--acento-piso); border-color: var(--acento);
  color: var(--acento); font-weight: 800;
}

/* ── botones ──────────────────────────────────────────────────────────── */
.acciones {
  display: flex; gap: var(--e-3); align-items: center;
  margin-top: var(--e-6) !important; flex-wrap: wrap;
}
.btn {
  min-height: 54px; padding: var(--e-3) var(--e-5);
  border: 1px solid transparent; border-radius: 999px;
  font-size: var(--t-base); font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--rapido) var(--curva),
              background-color var(--rapido) var(--curva),
              border-color var(--rapido) var(--curva);
}
.btn:active { transform: scale(.965); }
.btn-principal { flex: 1 1 auto; background: var(--acento); color: var(--fondo); }
.btn-principal:hover { background: var(--acento-alto); }
.btn-atras { color: var(--tinta); border-color: var(--linea-fuerte); }
.btn-atras {
  background: transparent; color: var(--tinta-2); border-color: var(--linea);
}
.btn-atras:hover { border-color: var(--tinta-2); color: var(--tinta); }
.btn-texto {
  background: none; border: none; padding: var(--e-2) 0;
  font: inherit; font-size: var(--t-s); color: var(--tenue);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.btn-texto:hover { color: var(--tinta); }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: var(--radio-s); }

.error {
  border-left: 3px solid var(--alerta); padding: var(--e-2) 0 var(--e-2) var(--e-3);
  font-size: var(--t-s); font-weight: 700; color: var(--alerta);
}

/* ── retomar ──────────────────────────────────────────────────────────── */
.retomar { border-top: 2px solid var(--linea-fuerte); padding-top: var(--e-4); }
.retomar p { margin: 0 0 var(--e-4); }

/* ── resultado ────────────────────────────────────────────────────────── */
.lista-carreras {
  list-style: none; counter-reset: c; margin: var(--e-5) 0 0; padding: 0;
  border-top: 1px solid var(--linea-fuerte);
}
.carrera {
  counter-increment: c;
  padding: var(--e-4) 0 var(--e-4) var(--e-6);
  border-bottom: 1px solid var(--linea);
  position: relative;
}
.carrera::before {
  content: counter(c);
  position: absolute; left: 0; top: var(--e-4);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: var(--t-m); font-weight: 800; color: var(--tenue);
  font-variant-numeric: tabular-nums;
}
.carrera h3 { font-size: var(--t-m); font-weight: 800; line-height: 1.2; }
.meta-carrera {
  margin: var(--e-1) 0 0; font-size: var(--t-xs); color: var(--tenue);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.carrera .hace { margin: var(--e-2) 0 0; font-size: var(--t-s); color: var(--tinta-2); }
.carrera .sueldo { margin: var(--e-2) 0 0; font-size: var(--t-s); font-weight: 700; }
.carrera .sueldo .fuente {
  display: block; font-size: var(--t-xs); color: var(--tenue); font-weight: 400;
}

/* Contraste: dos columnas separadas por una regla, sin recuadro. */
.contraste { border-top: 1px solid var(--linea); }
.contraste-cab { display: none; }
.contraste-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
.col-c { padding: var(--e-4) 0; }
.col-c + .col-c { border-left: 1px solid var(--linea); padding-left: var(--e-4); }
.col-c .chip {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tenue);
}
.col-c h4 { font-size: var(--t-base); font-weight: 800; margin: var(--e-1) 0 0; line-height: 1.25; }
.col-c dl { margin: var(--e-4) 0 0; display: flex; flex-direction: column; gap: var(--e-3); }
.col-c dt {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tenue); font-weight: 700;
}
.col-c dd { margin: 0; font-size: var(--t-base); font-weight: 700; font-variant-numeric: tabular-nums; }
.contraste-pie {
  border-top: 1px solid var(--linea); padding: var(--e-4) 0 0;
  font-size: var(--t-s); color: var(--tinta-2); max-width: var(--medida);
}
.contraste-pie b { color: var(--tinta); }

/* ── divulgación progresiva ───────────────────────────────────────────── */
.detalle { border-top: 1px solid var(--linea-fuerte); margin-top: var(--e-6) !important; }
.detalle > summary {
  padding: var(--e-4) 0; cursor: pointer; list-style: none;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: var(--t-base); font-weight: 800;
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-3);
}
.detalle > summary::-webkit-details-marker { display: none; }
.detalle > summary::after { content: "Ver"; font-size: var(--t-s); font-weight: 700; color: var(--acento); }
.detalle[open] > summary::after { content: "Ocultar"; }
.detalle-cuerpo { padding-bottom: var(--e-5); }
.detalle-cuerpo > * + * { margin-top: var(--e-4); }
.perfil-linea { margin: 0; font-size: var(--t-base); color: var(--tinta-2); max-width: var(--medida); }
.perfil-linea b { color: var(--tinta); }

.mezcla { display: flex; flex-direction: column; }
.parte {
  display: flex; gap: var(--e-3); align-items: baseline;
  padding: var(--e-3) 0; border-top: 1px solid var(--linea);
}
.parte .lugar {
  flex: 0 0 5.5em; font-size: var(--t-xs); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--tenue);
}
.parte h3 { font-size: var(--t-s); font-weight: 800; }
.parte p { margin: var(--e-1) 0 0; font-size: var(--t-s); color: var(--tinta-2); }

/* Barras: una serie, top-3 en ámbar. Todas etiquetadas, ninguna depende del color. */
.barras { display: flex; flex-direction: column; gap: var(--e-3); }
.barra-fila-dato { display: grid; grid-template-columns: 1fr auto; gap: var(--e-1) var(--e-3); align-items: baseline; }
.barra-fila-dato .nom { font-size: var(--t-s); font-weight: 700; }
.barra-fila-dato .val { font-size: var(--t-xs); color: var(--tenue); font-variant-numeric: tabular-nums; }
.pista { grid-column: 1 / -1; height: 6px; background: var(--linea); }
.pista > i { display: block; height: 100%; background: var(--tenue); }
.pista.top > i { background: var(--acento); }

.fuentes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.fuentes li { padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); font-size: var(--t-s); }
.fuentes span { display: block; color: var(--tenue); font-size: var(--t-xs); }

.encuadre {
  border-left: 2px solid var(--linea-fuerte); padding: 0 0 0 var(--e-4);
  font-size: var(--t-s); color: var(--tinta-2); max-width: var(--medida);
  margin-top: var(--e-6) !important;
}
.encuadre b { color: var(--tinta); }

/* ── tarjeta compartible ──────────────────────────────────────────────── */
.tarjeta-caja { display: flex; flex-direction: column; gap: var(--e-3); max-width: 22rem; }
.tarjeta-vista { border: 1px solid var(--linea); min-height: 8rem; }
.tarjeta-vista img { display: block; width: 100%; height: auto; }
.tarjeta-vista .cargando {
  display: block; padding: var(--e-6) var(--e-4);
  font-size: var(--t-s); color: var(--tenue); text-align: center;
}
.tarjeta-botones { display: flex; gap: var(--e-3); }
.tarjeta-aviso {
  margin: 0; font-size: var(--t-s); color: var(--acento);
  border-left: 2px solid var(--acento); padding-left: var(--e-3);
}

/* ── colegios ─────────────────────────────────────────────────────────── */
.colegios { border-top: 2px solid var(--linea-fuerte); padding-top: var(--e-4); margin-top: var(--e-7); }
.colegios h3 { font-size: var(--t-base); font-weight: 800; }
.colegios p { margin: var(--e-2) 0 var(--e-4); font-size: var(--t-s); color: var(--tinta-2); max-width: var(--medida); }

.formulario { display: flex; flex-direction: column; max-width: var(--medida); }
.etiqueta {
  display: block; font-size: var(--t-s); font-weight: 700;
  color: var(--tinta); margin: var(--e-5) 0 var(--e-2);
}
.campo {
  min-height: 48px; padding: var(--e-3);
  background: transparent; color: var(--tinta);
  border: 1px solid var(--linea); border-radius: var(--radio-s);
  font: inherit; font-size: var(--t-base); width: 100%;
  transition: border-color var(--rapido) var(--curva);
}
.campo:focus { border-color: var(--acento); }
.campo-mal { border-color: var(--alerta); }
.campo-error { margin: var(--e-2) 0 0; font-size: var(--t-s); font-weight: 700; color: var(--alerta); }
.envio-botones { display: flex; gap: var(--e-3); margin-top: var(--e-5); }
.warn-config {
  border-left: 3px solid var(--alerta); padding: var(--e-2) 0 var(--e-2) var(--e-3);
  font-size: var(--t-s); color: var(--tinta-2); max-width: var(--medida);
}
.warn-config b { color: var(--alerta); }
.warn-config code { font-family: ui-monospace, Menlo, monospace; font-size: 0.9em; }

.portada-pie { font-size: var(--t-xs); color: var(--tenue); margin: var(--e-5) 0 0; }

/* ── pie ──────────────────────────────────────────────────────────────── */
.pie {
  margin-top: var(--e-8); padding-top: var(--e-6);
  border-top: 1px solid var(--linea);
  font-size: var(--t-xs); color: var(--tenue); line-height: 1.8;
  display: grid; gap: var(--e-4);
}
.pie-marca { display: flex; align-items: center; gap: var(--e-2); color: var(--tinta); }
.pie-lema { color: var(--tinta-2); font-size: var(--t-s); margin: 0; max-width: 28rem; }
.pie-enlaces { display: flex; gap: var(--e-4); flex-wrap: wrap; }
.pie-enlaces a { color: var(--tinta-2); text-decoration: none; font-weight: 700; }
.pie-enlaces a:hover { color: var(--oro); }
.pie-nota { margin: 0; }
.pie .btn-texto { padding: 0; }
@media (min-width: 60rem) {
  .pie { grid-template-columns: 1fr auto; align-items: start; }
  .pie-nota { grid-column: 1 / -1; }
}

/* ── escritorio ───────────────────────────────────────────────────────── */
@media (min-width: 60rem) {
  body { font-size: 18px; }
  .app { max-width: 60rem; padding: 0 var(--e-6) var(--e-8); }
  .vista { padding-top: var(--e-7); }
  .portada-titulo { font-size: 3.25rem; }

  /* El test se mantiene angosto: leer 30 preguntas a lo ancho cansa. */
  .item, .leyenda, .consigna, .error { max-width: 38rem; }
  .vista > .acciones { max-width: 38rem; }
  .vista > .acciones .btn-principal { flex: 0 0 auto; min-width: 15rem; }

  .promesas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--e-5); }
  .promesas li:first-child { border-top: none; }
  .herramientas-grilla { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--e-6); }
  .lista-carreras, .contraste, .detalle, .colegios { max-width: 44rem; }
  .btn-principal { flex: 0 0 auto; min-width: 14rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── Luz Clara ────────────────────────────────────────────────────────── */
.escala-envuelta { flex-wrap: wrap; }
.escala-envuelta .punto { flex: 0 1 auto; padding: 0 var(--e-3); min-width: 4.5rem; }
.punto-ancho { padding: 0 var(--e-4) !important; }

.aparatos { list-style: none; margin: var(--e-5) 0 0; padding: 0; border-top: 1px solid var(--linea); }
.aparato { border-bottom: 1px solid var(--linea); }
.aparato-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: var(--e-3); padding: var(--e-4) 0; min-height: 56px;
  background: none; border: none; font: inherit; cursor: pointer; text-align: left;
  color: var(--tinta); border-radius: var(--radio-s);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--rapido) var(--curva), background-color var(--rapido) var(--curva);
}
.aparato-btn:active { transform: scale(.985); background: var(--acento-piso); }
.aparato-nombre { font-size: var(--t-base); }
.aparato-marca {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--acento); white-space: nowrap;
}
.aparato-btn[aria-pressed="true"] .aparato-nombre { font-weight: 800; }
.aparato-btn[aria-pressed="true"] .aparato-marca { color: var(--ambar); }
.aparatos .item { border-top: none; border-bottom: 1px solid var(--linea); }
.al-dia { color: var(--tenue); font-size: var(--t-s); }
.opcional {
  font-weight: 400; color: var(--tenue); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.06em;
}

.dato-grande {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: var(--t-xl); font-weight: 800; line-height: 1; margin: 0;
  font-variant-numeric: tabular-nums;
}
.dato-grande span {
  display: block; font-size: var(--t-s); font-weight: 500;
  color: var(--tenue); margin-top: var(--e-2); letter-spacing: 0;
}

.consumos { list-style: none; margin: 0; padding: 0; }
.fila-consumo { padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); }
.fila-consumo:first-child { border-top: 1px solid var(--linea); }

.ahorros { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea-fuerte); }
.ahorro { padding: var(--e-4) 0; border-bottom: 1px solid var(--linea); }
.ahorro-accion { margin: 0; font-size: var(--t-base); font-weight: 700; }
.ahorro-cifra {
  margin: var(--e-1) 0 0; font-size: var(--t-s); color: var(--acento);
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.ahorro-cifra span { color: var(--tenue); font-weight: 500; }

.herramienta-activa { padding-bottom: var(--e-5); }
.herramienta-activa .btn { margin-top: var(--e-3); }
.herramientas-grilla { list-style: none; padding: 0; margin: var(--e-4) 0 0; }

/* ── SalDeuda ─────────────────────────────────────────────────────────── */
.deudas { list-style: none; margin: var(--e-5) 0 0; padding: 0; }
.deuda-fila { padding: var(--e-4) 0; border-top: 1px solid var(--linea); }
.deuda-fila:last-child { border-bottom: 1px solid var(--linea); }
.deuda-fila.falta { border-top-color: var(--alerta); }
.deuda-cab { display: flex; align-items: center; gap: var(--e-3); }
.deuda-num {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  color: var(--tenue); font-size: var(--t-m); font-variant-numeric: tabular-nums;
}
.campo-nombre { flex: 1; min-height: 44px; font-weight: 700; }
.btn-quitar {
  background: none; border: none; padding: var(--e-2);
  font: inherit; font-size: var(--t-xs); font-weight: 700;
  color: var(--tenue); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; white-space: nowrap;
}
.btn-quitar:hover { color: var(--alerta); }
.deuda-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); margin-top: var(--e-3); }
.deuda-campos label {
  display: flex; flex-direction: column; gap: var(--e-1);
  font-size: var(--t-xs); font-weight: 700; color: var(--tinta-2);
}
.deuda-campos .campo { min-height: 44px; font-size: var(--t-s); }
.btn-agregar {
  width: 100%; min-height: 48px; margin-top: var(--e-4);
  background: none; border: 1px dashed var(--linea); border-radius: var(--radio);
  font: inherit; font-size: var(--t-s); font-weight: 700;
  color: var(--acento); cursor: pointer;
}
.btn-agregar:hover { border-color: var(--acento); border-style: solid; }

.ruta-orden {
  margin: var(--e-3) 0 0; font-size: var(--t-xs); color: var(--tenue); line-height: 1.5;
}
.hitos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.hito {
  display: flex; gap: var(--e-4); align-items: baseline;
  padding: var(--e-3) 0; border-bottom: 1px solid var(--linea);
}
.hito-mes {
  flex: 0 0 5rem; font-size: var(--t-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.hito-nombre { font-size: var(--t-s); font-weight: 700; }
.fuentes li b { color: var(--tinta); }

@media (max-width: 26rem) {
  .deuda-campos { grid-template-columns: 1fr 1fr; }
  .deuda-campos label:last-child { grid-column: 1 / -1; }
}

/* ── ¿Es Estafa? ──────────────────────────────────────────────────────── */
.situacion-para {
  display: block; font-size: var(--t-xs); color: var(--tenue); margin-top: var(--e-1);
}
.aparato-btn > span:first-child { display: block; }

.nivel {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: var(--t-l); font-weight: 800; line-height: 1.15;
  margin: 0; padding-left: var(--e-4); border-left: 4px solid var(--tenue);
}
.nivel-alto    { border-left-color: var(--alerta); color: var(--alerta); }
.nivel-medio   { border-left-color: var(--ambar); color: var(--ambar); }
.nivel-bajo    { border-left-color: var(--tenue); }
.nivel-ninguno { border-left-color: var(--verde); color: var(--verde); }

.regla-oro {
  border-top: 2px solid var(--alerta); border-bottom: 2px solid var(--alerta);
  padding: var(--e-4) 0; margin-top: var(--e-5) !important;
}
.regla-oro p {
  margin: 0; font-family: "Bricolage Grotesque", sans-serif;
  font-size: var(--t-m); font-weight: 800; line-height: 1.25; color: var(--alerta);
}

.senales { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.senal { padding: var(--e-4) 0; border-bottom: 1px solid var(--linea); }
.senal-pregunta { margin: 0; font-size: var(--t-base); font-weight: 700; }
.senal-explica { margin: var(--e-2) 0 0; font-size: var(--t-s); color: var(--tinta-2); }
.senal-fuente {
  margin: var(--e-2) 0 0; font-size: var(--t-xs); color: var(--tenue);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}

.pasos-hacer { margin: 0; padding-left: var(--e-5); }
.pasos-hacer li { margin-bottom: var(--e-3); font-size: var(--t-s); color: var(--tinta-2); }
.pasos-hacer li::marker { color: var(--verde); font-weight: 800; }

/* ── Cierra la Venta ──────────────────────────────────────────────────── */
.guion {
  border-left: 3px solid var(--acento); padding: var(--e-4);
  background: transparent; font-size: var(--t-base); line-height: 1.55;
  white-space: pre-wrap;
}
.guion-pendiente {
  margin: var(--e-2) 0 0; font-size: var(--t-s); color: var(--ambar);
}
.guion-pendiente b { font-family: ui-monospace, Menlo, monospace; font-weight: 700; }
.evitar-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.evitar-lista li {
  padding: var(--e-3) 0 var(--e-3) var(--e-5); border-bottom: 1px solid var(--linea);
  font-size: var(--t-s); color: var(--tinta-2); position: relative;
}
.evitar-lista li::before {
  content: "—"; position: absolute; left: 0; color: var(--tenue); font-weight: 700;
}

/* ── Olla Llena ───────────────────────────────────────────────────────── */
.opcion-linea {
  display: flex; gap: var(--e-3); align-items: center;
  padding: var(--e-4) 0; border-top: 1px solid var(--linea);
  margin-top: var(--e-5) !important; font-size: var(--t-s); cursor: pointer;
}
.opcion-linea input { width: 22px; height: 22px; accent-color: var(--acento); }

.compras { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea-fuerte); }
.compra {
  display: grid; grid-template-columns: 5.5rem 1fr auto; gap: var(--e-3);
  align-items: baseline; padding: var(--e-3) 0; border-bottom: 1px solid var(--linea);
}
.compra-cant {
  font-size: var(--t-s); font-weight: 800; color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.compra-nombre { font-size: var(--t-s); }
.compra-precio {
  font-size: var(--t-s); color: var(--tenue); font-variant-numeric: tabular-nums;
}

.dias { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.dia {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--e-3);
  padding: var(--e-4) 0; border-bottom: 1px solid var(--linea);
}
.dia-nombre {
  font-size: var(--t-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--tenue);
}
.dia-plato { margin: 0; font-size: var(--t-base); font-weight: 800; }
.dia-meta {
  margin: var(--e-1) 0 0; font-size: var(--t-xs); color: var(--acento); font-weight: 700;
}
.dia-pista { margin: var(--e-2) 0 0; font-size: var(--t-s); color: var(--tinta-2); }

@media (max-width: 26rem) {
  .compra { grid-template-columns: 4.5rem 1fr auto; }
  .dia { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA PUERTA, EL RIEL Y EL TACTO

   Tres piezas nuevas y una regla que las une: nada se mueve por adorno. La
   puerta existe porque llegar a una lista de seis cosas sin saber dónde estás
   es entrar por la ventana. El riel existe porque seis opciones en columna se
   leen como un formulario, y de costado se sienten como objetos que puedes
   agarrar. El tacto existe porque un botón que no se hunde no parece un botón.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── el acento por herramienta ─────────────────────────────────────────────
   Entrar tiñe toda la pantalla: barra, avance, botones, respuestas marcadas.
   Es cómo sabes en cuál estás sin volver a leer el título. */
body[data-herramienta="mi-camino"]      { --acento: var(--verde);  --acento-alto: var(--verde-alto);  --acento-piso: var(--verde-piso); }
body[data-herramienta="luz-clara"]      { --acento: var(--ambar);  --acento-alto: var(--ambar-alto);  --acento-piso: var(--ambar-piso); }
body[data-herramienta="saldeuda"]       { --acento: var(--azul);   --acento-alto: var(--azul-alto);   --acento-piso: var(--azul-piso); }
body[data-herramienta="olla-llena"]     { --acento: var(--barro);  --acento-alto: var(--barro-alto);  --acento-piso: var(--barro-piso); }
body[data-herramienta="es-estafa"]      { --acento: var(--alerta); --acento-alto: var(--alerta-alto); --acento-piso: var(--alerta-piso); }
body[data-herramienta="cierra-la-venta"]{ --acento: var(--verde);  --acento-alto: var(--verde-alto);  --acento-piso: var(--verde-piso); }

/* ── la puerta ────────────────────────────────────────────────────────────
   Un lienzo a sangre listo para una foto. Sin foto no se ve un hueco: se ve
   un campo de líneas finas, que es el mismo material del resto del sitio. */
.puerta { margin: calc(var(--e-6) * -1) calc(var(--e-4) * -1) 0; padding: 0; }
.puerta-lienzo {
  position: relative; isolation: isolate;
  min-height: min(80vh, 38rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--e-7) var(--e-4) var(--e-5);
  background-color: var(--acento-piso);
  border-bottom: 1px solid var(--linea);
  overflow: hidden;
}
/* Las lineas del lienzo vacio se desvanecen arriba y abajo. Sin eso parecen
   papel rayado y el titulo se lee encima de un renglon. Con eso, el texto cae
   sobre un fondo limpio y la trama se queda donde no estorba. */
.puerta-lienzo::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, var(--linea) 0 1px, transparent 1px 2.25rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 46%, transparent 78%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 46%, transparent 78%);
}
.puerta-lienzo.con-foto::after { display: none; }
/* Cuando la foto exista, manda la foto y las líneas se van. La ruta va
   inline en el elemento, no en una variable: un url() dentro de una variable
   se resuelve relativo a ESTA hoja (src/), y la foto vive en assets/. */
.puerta-lienzo.con-foto { background-size: cover; background-position: center; }
.puerta-lienzo.con-foto::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(12,31,25,.96) 0%, rgba(12,31,25,.72) 38%, rgba(12,31,25,.18) 70%, rgba(12,31,25,.05) 100%);
}
.puerta-marca { display: flex; align-items: center; gap: var(--e-3); margin: 0 0 var(--e-5); }
.puerta-marca .logo { filter: drop-shadow(0 4px 12px rgba(0,0,0,.35)); }
.puerta-lienzo { border-bottom: 1px solid var(--oro); }
.puerta-lienzo.con-foto .puerta-titulo { color: var(--tinta); text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.puerta-lienzo.con-foto .puerta-bajada { color: var(--tinta-2); }
.puerta-lienzo.con-foto .puerta-sello { color: var(--oro); }
.puerta-sello {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--acento); margin: 0 0 var(--e-4);
}
.puerta-titulo {
  font-size: clamp(2.25rem, 10.5vw, 3rem); font-weight: 800; line-height: 1.02;
  margin: 0; max-width: 15ch;
}
.puerta-bajada {
  margin: var(--e-4) 0 0; font-size: var(--t-m); color: var(--tinta-2);
  max-width: 28ch; line-height: 1.35;
}
.puerta-acciones {
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-5) 0 0;
}
.puerta-lienzo.con-foto .puerta-pie { color: var(--tinta-2); }
.btn-puerta {
  width: 100%; min-height: 60px; font-size: var(--t-m);
  background: var(--oro); color: var(--fondo);
  box-shadow: 0 10px 30px -12px rgba(228,180,74,.55);
  border: none; border-radius: 999px; cursor: pointer;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--rapido) var(--curva), background-color var(--rapido) var(--curva);
}
.btn-puerta:hover { background: var(--oro-alto); }
.btn-puerta:active { transform: scale(.97); }
.puerta-pie { margin: 0; font-size: var(--t-xs); color: var(--tenue); text-align: center; }
.puerta-retomar { align-self: center; }

/* ── el riel de herramientas ──────────────────────────────────────────────
   Se arrastra de costado. Cada carta se detiene sola donde debe. */
.riel-zona { margin-top: var(--e-7) !important; scroll-margin-top: 4.5rem; }
.riel-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-3); padding-top: var(--e-3);
  border-top: 1px solid var(--linea-fuerte);
}
.riel-cab h2 { font-size: var(--t-m); font-weight: 800; margin: 0; }
.riel-flechas { display: none; gap: var(--e-2); }
.flecha {
  width: 42px; height: 42px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linea); background: transparent; color: var(--tinta);
  font-size: 1rem; line-height: 1; display: grid; place-items: center;
  transition: transform var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.flecha:hover:not([disabled]) { border-color: var(--tinta-2); }
.flecha:active:not([disabled]) { transform: scale(.9); }
.flecha[disabled] { opacity: .3; cursor: default; }

.riel-pista {
  display: flex; gap: var(--e-4);
  margin: var(--e-4) calc(var(--e-4) * -1) 0;
  padding: var(--e-2) var(--e-4) var(--e-5);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--e-4);
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.riel-pista::-webkit-scrollbar { display: none; }
.riel-pista.arrastrando { cursor: grabbing; scroll-snap-type: none; }
.riel-pista.arrastrando .carta { pointer-events: none; }

.carta {
  flex: 0 0 clamp(15rem, 78vw, 19rem);
  scroll-snap-align: start;
  display: flex; flex-direction: column; text-align: left;
  padding: 0; overflow: hidden;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra-1);
  font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--medio) var(--curva),
              box-shadow var(--medio) var(--curva),
              border-color var(--medio) var(--curva);
}
.carta:hover { box-shadow: var(--sombra-2); border-color: var(--carta-color); background: var(--superficie-2); }
.carta:active { transform: scale(.97); box-shadow: var(--sombra-1); }

/* La franja superior es el sitio de la foto de cada herramienta. Sin foto,
   queda el color de la herramienta y su inicial: no un rectángulo vacío. */
.carta-foto {
  position: relative; height: 8.5rem; flex: 0 0 auto;
  background-color: var(--carta-piso);
  background-size: cover; background-position: center;
  border-bottom: 1px solid var(--linea);
  display: grid; place-items: center;
}
.carta-inicial {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 3.5rem; font-weight: 800; line-height: 1;
  color: var(--carta-color); opacity: .30;
}
.carta-foto.con-foto .carta-inicial { display: none; }
.carta-cuerpo { padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-2); flex: 1; }
.carta-para {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--carta-color); margin: 0;
}
.carta-nombre {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: var(--t-m); font-weight: 800; line-height: 1.15; margin: 0;
}
.carta-promesa { margin: 0; font-size: var(--t-s); color: var(--tinta-2); line-height: 1.45; flex: 1; }
.carta-ir {
  display: flex; align-items: center; gap: var(--e-2);
  margin: var(--e-2) 0 0; font-size: var(--t-s); font-weight: 800;
  color: var(--carta-color);
}
.carta-ir i { font-style: normal; transition: transform var(--medio) var(--curva); }
.carta:hover .carta-ir i { transform: translateX(4px); }

.riel-puntos { display: flex; gap: var(--e-2); justify-content: center; margin-top: 0 !important; }
.riel-punto {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 999px;
  background: var(--linea); cursor: pointer;
  transition: width var(--medio) var(--curva), background-color var(--medio) var(--curva);
}
.riel-punto[aria-current="true"] { width: 22px; background: var(--oro); }
.riel-nota { margin: var(--e-3) 0 0 !important; font-size: var(--t-xs); color: var(--tenue); text-align: center; }

/* ── entrar y salir ───────────────────────────────────────────────────────
   Adelante entra desde la derecha, atrás desde la izquierda. El sentido del
   movimiento dice si avanzaste o retrocediste, sin escribirlo. */
@keyframes entrar-adelante {
  from { opacity: 0; transform: translate3d(20px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes entrar-atras {
  from { opacity: 0; transform: translate3d(-20px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes entrar-fondo {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: none; }
}
.vista[data-entra="adelante"] { animation: entrar-adelante var(--medio) var(--curva); }
.vista[data-entra="atras"]    { animation: entrar-atras    var(--medio) var(--curva); }
.vista[data-entra="dentro"]   { animation: entrar-fondo    var(--medio) var(--curva); }

/* ── el rastro: dónde estás dentro del sitio ──────────────────────────────
   Reemplaza al número de paso suelto. Se toca y sales de la herramienta. */
.rastro { font-size: var(--t-xs); color: var(--tenue); }
.rastro-salir {
  background: none; border: none; padding: var(--e-1) 0; margin: 0;
  font: inherit; font-weight: 800; color: var(--acento); cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--rapido) var(--curva);
}
.rastro-salir:active { transform: scale(.94); }

/* ── barra de acción fija ─────────────────────────────────────────────────
   Dentro de un paso largo el botón de avanzar queda al alcance del pulgar
   en vez de al final de treinta preguntas. */
.acciones-fijas {
  position: sticky; bottom: 0; z-index: 15;
  margin: var(--e-6) calc(var(--e-4) * -1) 0 !important;
  padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom));
  background: var(--velo);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--linea);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .acciones-fijas { background: var(--fondo); }
}
.acciones-fijas .btn-principal { flex: 1 1 auto; }

/* ── escritorio ───────────────────────────────────────────────────────── */
@media (min-width: 60rem) {
  /* A sangre completa: la puerta se sale de la columna y cruza la pantalla.
     html lleva overflow-x: clip para que el ancho de la barra de scroll no
     produzca un desplazamiento lateral fantasma. */
  .puerta { margin: calc(var(--e-7) * -1) 0 0; width: 100vw; margin-left: calc(50% - 50vw); }
  .puerta-lienzo {
    min-height: min(72vh, 40rem);
    padding: var(--e-8) max(var(--e-7), calc(50vw - 30rem + var(--e-6))) var(--e-7);
  }
  /* La foto se queda a la izquierda, el texto va a la derecha: asi la persona
     de la foto y el titulo no se pisan. */
  .puerta-lienzo > * { margin-left: auto; width: min(50%, 34rem); }
  .puerta-lienzo.con-foto::before {
    background:
      linear-gradient(to left, rgba(12,31,25,.94) 0%, rgba(12,31,25,.80) 42%, rgba(12,31,25,.30) 62%, rgba(12,31,25,.04) 100%),
      linear-gradient(to top, rgba(12,31,25,.85) 0%, rgba(12,31,25,0) 45%);
  }
  .puerta-acciones {
    flex-direction: row; align-items: center; gap: var(--e-5);
    padding: var(--e-6) 0 0; justify-content: flex-start; flex-wrap: wrap;
  }
  .puerta-lienzo::after {
    background-image: repeating-linear-gradient(to bottom, var(--linea) 0 1px, transparent 1px 3rem);
  }
  .puerta-titulo { font-size: 3.5rem; max-width: 16ch; }
  .puerta-bajada { font-size: 1.25rem; max-width: 42ch; }
  .btn-puerta { width: auto; min-width: 17rem; }
  .puerta-pie { text-align: left; }
  .puerta-retomar { align-self: auto; }

  .riel-flechas { display: flex; }
  .riel-pista {
    margin: var(--e-4) calc(var(--e-6) * -1) 0;
    padding: var(--e-2) var(--e-6) var(--e-6);
    scroll-padding-left: var(--e-6);
  }
  .carta { flex: 0 0 20rem; }
  .carta-foto { height: 9.5rem; }

  .acciones-fijas {
    margin: var(--e-6) calc(var(--e-6) * -1) 0 !important;
    padding: var(--e-3) var(--e-6) var(--e-3);
    max-width: none;
  }
  .acciones-fijas .btn-principal { flex: 0 0 auto; min-width: 15rem; }
}

/* Sin movimiento: se respeta y punto. */
@media (prefers-reduced-motion: reduce) {
  .riel-pista { scroll-behavior: auto !important; }
  html { scroll-behavior: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIERRA LA VENTA · LA ESTRUCTURA POR PAÍS

   País → estructura → nivel. Cada escalón es un objeto que se toca: el país
   es una carta grande, cada nivel una fila entera que se hunde al dedo.
   El número del nivel es información, no adorno: los doce van en orden y el
   orden importa.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── elegir país ─────────────────────────────────────────────────────── */
.pais-grid {
  list-style: none; padding: 0; margin: var(--e-6) 0 0 !important;
  display: grid; gap: var(--e-3);
}
.pais-btn {
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-5); border-radius: var(--radio);
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--linea); box-shadow: var(--sombra-1);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--rapido) var(--curva), border-color var(--medio) var(--curva),
              background-color var(--medio) var(--curva);
}
.pais-btn:hover { border-color: var(--acento); background: var(--superficie-2); }
.pais-btn:active { transform: scale(.98); }
.pais-btn[aria-current="true"] { border-color: var(--acento); }
.pais-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.pais-nombre {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  font-size: var(--t-l); line-height: 1.1; letter-spacing: -0.02em;
}
.pais-dato { font-size: var(--t-s); color: var(--tinta-2); display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--e-2); align-items: baseline; }
.pais-dato b {
  display: block; color: var(--tenue);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800;
}
.pais-btn .carta-ir { color: var(--acento); margin-top: var(--e-2); }
.pais-btn:hover .carta-ir i { transform: translateX(4px); }

.puerta-extra {
  margin-top: var(--e-7) !important; padding-top: var(--e-5);
  border-top: 1px solid var(--linea-fuerte);
  display: flex; flex-direction: column; gap: var(--e-4); align-items: flex-start;
}
.puerta-extra-titulo { font-size: var(--t-m); font-weight: 800; }
.puerta-extra p { margin: var(--e-2) 0 0; font-size: var(--t-s); color: var(--tinta-2); max-width: var(--medida); }

/* ── la estructura de un país ────────────────────────────────────────── */
.pais-hechos {
  list-style: none; padding: 0; margin: var(--e-5) 0 0 !important;
  display: grid; gap: var(--e-2);
  border-top: 1px solid var(--linea); padding-top: var(--e-3);
}
.pais-hechos li { font-size: var(--t-s); color: var(--tinta-2); display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--e-2); align-items: baseline; }
.pais-hechos b {
  display: block; color: var(--tenue);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800;
}

.dx-tarjeta {
  margin-top: var(--e-6) !important; padding: var(--e-5);
  border-radius: var(--radio); background: var(--acento-piso);
  border: 1px solid var(--acento);
}
.dx-eyebrow {
  margin: 0; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--acento);
}
.dx-cifra {
  margin: var(--e-2) 0 0; font-family: "Bricolage Grotesque", sans-serif;
  font-size: var(--t-xl); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.dx-cifra span { font-size: var(--t-base); font-weight: 600; color: var(--tinta-2); margin-left: var(--e-2); }
.dx-texto { margin: var(--e-3) 0 0; color: var(--tinta-2); }
.dx-texto b { color: var(--tinta); }
.dx-texto-grande {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  font-size: var(--t-m); line-height: 1.25; color: var(--tinta);
}
.dx-botones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-4); }
.dx-botones .btn { flex: 1 1 12rem; }

.bloque-venta { margin-top: var(--e-7) !important; }
.bloque-cab {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 var(--e-3);
  padding-top: var(--e-3); border-top: 1px solid var(--linea-fuerte);
}
.bloque-num {
  grid-column: 1 / -1; margin: 0; font-size: var(--t-xs); font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--acento);
}
.bloque-titulo { font-size: var(--t-l); font-weight: 800; line-height: 1.1; }
.bloque-cuenta {
  margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  color: var(--tinta-2); font-variant-numeric: tabular-nums;
}

/* ── fila de nivel: toda la fila se toca ─────────────────────────────── */
.nivel-lista { list-style: none; padding: 0; margin: var(--e-3) 0 0 !important; display: grid; gap: var(--e-2); }
.nivel-btn {
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--tinta);
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-4); align-items: center;
  padding: var(--e-4); border-radius: var(--radio);
  background: var(--superficie); border: 1px solid var(--linea);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--rapido) var(--curva), border-color var(--medio) var(--curva),
              background-color var(--medio) var(--curva);
}
.nivel-btn:hover { border-color: var(--linea-fuerte); background: var(--superficie-2); }
.nivel-btn:active { transform: scale(.985); }
.nivel-destacado { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
.nivel-num {
  width: 2.5rem; height: 2.5rem; border-radius: 999px; display: grid; place-items: center;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: var(--t-base);
  background: var(--acento-piso); color: var(--acento); font-variant-numeric: tabular-nums;
}
.nivel-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nivel-etapa {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tenue);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2);
}
.nivel-etapa .estado-chip { text-transform: none; letter-spacing: 0.02em; }
.nivel-nombre { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: var(--t-m); line-height: 1.2; }
.nivel-logra {
  font-size: var(--t-s); color: var(--tinta-2); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nivel-lado { display: flex; flex-direction: column; align-items: flex-end; gap: var(--e-2); }
.nivel-flecha { font-style: normal; font-size: 1.5rem; line-height: 1; color: var(--tenue);
  transition: transform var(--medio) var(--curva); }
.nivel-btn:hover .nivel-flecha { transform: translateX(3px); color: var(--acento); }

.estado-chip {
  font-size: var(--t-xs); font-weight: 800; white-space: nowrap;
  padding: 2px var(--e-2); border-radius: 999px; letter-spacing: 0.02em;
}
.estado-hecho { background: var(--verde-piso); color: var(--verde); }
.estado-falta { background: var(--oro-piso); color: var(--oro); }

/* ── diagnóstico ─────────────────────────────────────────────────────── */
.dx-n {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: var(--e-2);
  border-radius: 999px; background: var(--acento-piso); color: var(--acento);
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: var(--t-xs);
  vertical-align: 1px;
}
.aparatos .item p { line-height: 1.45; }

/* ── un nivel ────────────────────────────────────────────────────────── */
.nivel-aviso {
  margin: var(--e-4) 0 0 !important; font-size: var(--t-s); color: var(--verde);
  border-left: 2px solid var(--verde); padding-left: var(--e-3);
}
.nivel-aviso-falta { color: var(--oro); border-left-color: var(--oro); }

.caja-pais {
  margin-top: var(--e-6) !important; padding: var(--e-5);
  border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--linea);
}
.caja-pais > * + * { margin-top: var(--e-3); }
.caja-pais h3 { font-size: var(--t-l); font-weight: 800; }
.caja-pais p { margin-bottom: 0; color: var(--tinta-2); font-size: var(--t-s); }
.caja-pais p b { color: var(--tinta); }
.caja-pais-eyebrow {
  margin: 0 !important; font-size: var(--t-xs) !important; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento) !important;
}
.caja-pais .fuentes { border-top: none; }

.cascada {
  list-style: none; padding: 0; margin: var(--e-3) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; counter-reset: c;
}
.cascada li {
  counter-increment: c; font-size: var(--t-s); font-weight: 700; color: var(--tinta);
  padding: var(--e-2) var(--e-3); border-radius: 999px;
  background: var(--acento-piso); border: 1px solid var(--linea);
}
.cascada li::before { content: counter(c) " "; color: var(--acento); font-weight: 800; }


.encuadre-alerta { border-left-color: var(--oro); }
.encuadre-alerta b { color: var(--oro); }

.nav-niveles {
  margin-top: var(--e-7) !important; display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3);
}
.nav-nivel {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer; font: inherit;
  padding: var(--e-4); border-radius: var(--radio); color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--linea);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--rapido) var(--curva), border-color var(--medio) var(--curva);
}
.nav-nivel:hover { border-color: var(--acento); }
.nav-nivel:active { transform: scale(.98); }
.nav-nivel span { font-size: var(--t-xs); font-weight: 800; color: var(--acento); letter-spacing: 0.04em; }
.nav-nivel b { font-family: "Bricolage Grotesque", sans-serif; font-size: var(--t-base); line-height: 1.2; }
.nav-nivel-sig { text-align: right; align-items: flex-end; }

@media (min-width: 40rem) {
  .pais-grid { grid-template-columns: 1fr 1fr; }
  .puerta-extra { flex-direction: row; align-items: center; justify-content: space-between; }
  .pais-hechos { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 60rem) {
  .pais-grid { grid-template-columns: repeat(3, 1fr); }
  .bloque-venta, .dx-tarjeta, .caja-pais, .nav-niveles, .pais-hechos { max-width: 44rem; }
}

/* ── kit de atención y plantillas extra ───────────────────────────────── */
.nivel-btn.sin-num { grid-template-columns: 1fr auto; }

.copiable { margin-top: var(--e-6) !important; }
.copiable > * + * { margin-top: var(--e-3); }
.copiable .sub-titulo { margin-top: 0 !important; }
.copiable .seccion-nota { margin: var(--e-1) 0 0; }

/* Tabla del kit: en el teléfono se desplaza de lado dentro de su caja,
   la página nunca. */
.tabla-envoltura {
  overflow-x: auto; margin-top: var(--e-3) !important;
  border: 1px solid var(--linea); border-radius: var(--radio);
  -webkit-overflow-scrolling: touch;
}
.tabla-kit { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--t-s); }
.tabla-kit th, .tabla-kit td {
  text-align: left; vertical-align: top; padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--linea); line-height: 1.45;
}
.tabla-kit thead th {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tenue); background: var(--superficie);
}
.tabla-kit tbody th { color: var(--tinta); font-weight: 800; white-space: nowrap; }
.tabla-kit td { color: var(--tinta-2); }
.tabla-kit tbody tr:last-child th, .tabla-kit tbody tr:last-child td { border-bottom: none; }

/* C.A.R.E.: la inicial de cada paso es la sigla, así que va grande. */
.care { list-style: none; padding: 0; margin: var(--e-3) 0 0 !important; display: grid; gap: var(--e-2); }
.care li {
  display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--e-3); align-items: center;
  padding: var(--e-4); border-radius: var(--radio);
  background: var(--superficie); border: 1px solid var(--linea);
}
.care-letra {
  width: 2.75rem; height: 2.75rem; border-radius: 999px; display: grid; place-items: center;
  font-family: "Bricolage Grotesque", sans-serif; font-size: var(--t-m); font-weight: 800;
  background: var(--acento-piso); color: var(--acento);
}
.care-texto { display: flex; flex-direction: column; gap: 2px; }
.care-texto b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; color: var(--tinta); }
.care-texto span { color: var(--tinta-2); font-size: var(--t-s); }

@media (min-width: 60rem) {
  .tabla-envoltura, .care, .copiable { max-width: 44rem; }
}

/* En el teléfono la tabla del kit se lee como tarjetas: una fila, un bloque. */
@media (max-width: 39.99rem) {
  .tabla-envoltura { overflow: visible; border: none; border-radius: 0; }
  .tabla-kit { min-width: 0; }
  .tabla-kit thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-kit, .tabla-kit tbody, .tabla-kit tr, .tabla-kit th, .tabla-kit td { display: block; }
  .tabla-kit tr {
    padding: var(--e-4); margin-bottom: var(--e-2); border-radius: var(--radio);
    background: var(--superficie); border: 1px solid var(--linea);
  }
  .tabla-kit tbody th, .tabla-kit td { padding: 0; border: none; white-space: normal; }
  .tabla-kit tbody th { font-family: "Bricolage Grotesque", sans-serif; font-size: var(--t-base); color: var(--acento); }
  .tabla-kit td { margin-top: var(--e-2); }
  .tabla-kit td::before {
    content: attr(data-col); display: block; margin-bottom: 2px;
    font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tenue);
  }
}

/* ── ¿Es Estafa?: guías y directorio ─────────────────────────────────── */
.chat { margin-top: var(--e-3) !important; display: flex; }
.chat-burbuja {
  margin: 0; max-width: 30rem; padding: var(--e-3) var(--e-4);
  border-radius: var(--radio) var(--radio) var(--radio) 4px;
  background: var(--superficie-2); border: 1px solid var(--linea);
  color: var(--tinta); font-size: var(--t-base); line-height: 1.45;
}
.chat-burbuja::before {
  content: "Mensaje del «comprador»"; display: block; margin-bottom: var(--e-1);
  font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--alerta);
}
.canales li { display: grid; gap: 2px; }
.canales .canal {
  font-family: "Bricolage Grotesque", sans-serif; font-size: var(--t-m); font-weight: 800;
  color: var(--acento); word-break: break-word;
}
.canales li > span:last-child { color: var(--tinta-2); }

/* ── Mi Camino: hacia 2027 ───────────────────────────────────────────── */
.c2027 {
  margin-top: var(--e-3); padding-top: var(--e-3);
  border-top: 1px dashed var(--linea);
  display: grid; gap: var(--e-2); justify-items: start;
}
.c2027 p { margin: 0; font-size: var(--t-s); }
.c2027-capa { color: var(--tinta); }
.c2027-capa b { color: var(--acento); }
.c2027-nota { color: var(--tinta-2); }
.c2027-cautela { color: var(--tinta-2); border-left: 2px solid var(--oro); padding-left: var(--e-3); }
.c2027-cautela b { color: var(--oro); }
.escalera + .escalera { margin-top: var(--e-5); }
.escalera h4 { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: var(--t-base); font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════════════════
   CELULAR

   Medido a 320 y 360 px. Tres arreglos que se notan en la mano:
   · todo lo que se toca mide al menos 44 px de alto, aunque se vea más chico;
   · ningún campo de texto baja de 16 px, o el iPhone hace zoom al escribir;
   · la puerta usa la altura real de la pantalla, sin saltar cuando aparece
     o desaparece la barra del navegador.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Los puntos del riel se ven de 7 px, pero se tocan en 44. */
.riel-puntos { gap: 0; }
.riel-punto {
  width: 30px; height: 44px; background: transparent; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.riel-punto::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; border-radius: 999px; background: var(--linea);
  transform: translate(-50%, -50%);
  transition: width var(--medio) var(--curva), background-color var(--medio) var(--curva);
}
.riel-punto[aria-current="true"] { width: 44px; background: transparent; }
.riel-punto[aria-current="true"]::before { width: 22px; background: var(--oro); }

/* Enlaces y botones de texto: área de toque completa. */
.marca, .rastro-salir, .nav a, .pie-enlaces a {
  min-height: 44px; display: inline-flex; align-items: center;
}
.btn-texto, .btn-quitar { min-height: 44px; }
.pie .btn-texto { display: inline-flex; align-items: center; }

/* Ningún campo por debajo de 16 px: el iPhone no amplía la pantalla. */
input, select, textarea { font-size: max(16px, 1em); }
.deuda-campos .campo { font-size: 16px; }

/* La puerta con la altura visible de verdad. */
@supports (height: 1svh) {
  .puerta-lienzo { min-height: min(80svh, 38rem); }
}
@media (min-width: 60rem) {
  @supports (height: 1svh) {
    .puerta-lienzo { min-height: min(72svh, 40rem); }
  }
}

/* En pantallas de 320 px la cabecera y el hero respiran un poco menos. */
@media (max-width: 22.5rem) {
  .app { padding-left: var(--e-3); padding-right: var(--e-3); }
  .puerta { margin-left: calc(var(--e-3) * -1); margin-right: calc(var(--e-3) * -1); }
  .puerta-lienzo { padding-left: var(--e-3); padding-right: var(--e-3); }
  .riel-pista { margin-left: calc(var(--e-3) * -1); margin-right: calc(var(--e-3) * -1);
    padding-left: var(--e-3); padding-right: var(--e-3); scroll-padding-left: var(--e-3); }
  .acciones-fijas { margin-left: calc(var(--e-3) * -1) !important; margin-right: calc(var(--e-3) * -1) !important;
    padding-left: var(--e-3); padding-right: var(--e-3); }
  .nav { gap: var(--e-3); }
  .wordmark-chico { font-size: 0.95rem; }
  .puerta-titulo { font-size: 2.1rem; }
}

/* Quien pidió ahorro de datos no necesita las transiciones de entrada. */
@media (prefers-reduced-data: reduce) {
  .vista[data-entra] { animation: none; }
}

/* Hasta 384 px la cabecera de la portada no entra con logo, nombre y dos enlaces:
   el nombre escrito se esconde en la barra —la puerta ya lo muestra en
   grande justo debajo— y queda el logo como ancla para volver al inicio. */
@media (max-width: 24rem) {
  body[data-ruta="puerta"] .barra .wordmark,
  body[data-ruta="seccion"] .barra .wordmark { display: none; }
}