/* dejardeapostar.org, hoja común.
   Las reglas están en DESIGN.md y mandan sobre este fichero.
   Móvil primero: lo base es 360px, las @media solo añaden. */

/* --- Tokens ------------------------------------------------------------ */

:root {
  --paper:      #FBFBFA;
  --surface:    #EEF2F1;
  --ink:        #12191B;
  --muted:      #59696C;
  --rule:       #DDE3E2;
  --rule-2:     #B6C1C0;

  --brand:      #0E4A4F;
  --brand-2:    #17696F;
  --brand-3:    #3E5C63;
  --brand-tint: #E1EDEC;
  --on-brand:   #FBFBFA;

  --signal:     #A81E17;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px; --s10: 120px;

  --sans: "Chivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #0B0F10;
    --surface:    #141A1B;
    --ink:        #E6EBEA;
    --muted:      #93A2A4;
    --rule:       #232C2E;
    --rule-2:     #384446;
    --brand:      #5CB8B2;
    --brand-2:    #7FCEC8;
    --brand-3:    #8FB0B5;
    --brand-tint: #12292B;
    --on-brand:   #06181A;
    --signal:     #F0867E;
  }
}

:root[data-theme="dark"] {
  --paper:      #0B0F10;
  --surface:    #141A1B;
  --ink:        #E6EBEA;
  --muted:      #93A2A4;
  --rule:       #232C2E;
  --rule-2:     #384446;
  --brand:      #5CB8B2;
  --brand-2:    #7FCEC8;
  --brand-3:    #8FB0B5;
  --brand-tint: #12292B;
  --on-brand:   #06181A;
  --signal:     #F0867E;
}

/* --- Base -------------------------------------------------------------- */

* { box-sizing: border-box; }

/* Un `display` explícito le gana al `display: none` que el navegador aplica a
   [hidden], y en esta hoja casi todo lleva `display` explícito. Sin esta línea
   lo que se esconde con JS se sigue viendo: pasaba con «Atrás» y «Ver el
   resultado» desde la pregunta 1 del test, con la barra de progreso encima del
   resultado, y con «Volver a empezar» antes de arrancar el reloj. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(14, 74, 79, .12);
  overflow-x: hidden;
}
@media (min-width: 640px) { body { font-size: 18px; line-height: 1.58; } }

.wrap { max-width: 680px; margin: 0 auto; padding: 0 var(--s5); }
@media (min-width: 640px) { .wrap { padding: 0 var(--s6); } }

.band { border-top: 1px solid var(--rule); }
.band:first-child { border-top: none; }
.band.tint { background: var(--brand-tint); border-top-color: transparent; }
.band.surface { background: var(--surface); border-top-color: transparent; }

.block {
  padding: var(--s7) 0;
  display: flex; flex-direction: column;
  gap: var(--s5);
  align-items: flex-start;
}
@media (min-width: 640px) { .block { padding: var(--s8) 0; } }

.hero { padding-top: var(--s8); padding-bottom: var(--s7); }
@media (min-width: 640px) { .hero { padding-top: var(--s9); padding-bottom: var(--s8); } }

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

h1, h2, h3 { margin: 0; text-wrap: balance; }

h1 {
  font-size: clamp(2rem, 8vw, 3.25rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
h2 {
  font-size: clamp(1.45rem, 5.2vw, 2rem);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.022em;
  max-width: 24ch;
}
h3 {
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.012em;
}

p { margin: 0; }
.lede { font-size: clamp(1.05rem, 3.6vw, 1.2rem); }
.muted { color: var(--muted); }
.sm { font-size: .94rem; }
.xs { font-size: .85rem; }
.measure { max-width: 70ch; }
strong, b { font-weight: 700; }

.meta, .mono {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-2); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.pull {
  border-left: 2px solid var(--brand-3);
  padding-left: var(--s4);
  font-size: 1.14rem;
  font-weight: 600;
  font-style: italic;
}

/* --- Cabecera ---------------------------------------------------------- */

.topbar { border-bottom: 1px solid var(--rule); }
.topbar .wrap {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s1) var(--s5);
  padding-top: var(--s4); padding-bottom: var(--s4);
}
.topbar .home {
  font-weight: 900; letter-spacing: -0.028em; text-decoration: none;
  color: var(--ink); font-size: 1.02rem;
}
.topbar nav { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: .9rem; }
.topbar nav a { color: var(--muted); text-decoration: none; }
.topbar nav a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* Acción en la cabecera. Es la misma acción primaria de la página que lleva la
   barra fija, subida a la cabecera para escritorio, y por eso no es un cuarto
   CTA: es el mismo. El relevo es limpio y no se solapan nunca: por debajo de
   1024px manda la barra fija y esta no existe; a partir de 1024 desaparece la
   barra y aparece esta. En escritorio no había ninguna acción a la vista y la
   página parecía un artículo. */
.topbar .accion { display: none; }

/* La cabecera se queda pegada arriba, pero solo en escritorio, que es donde no
   hay barra fija abajo. Así la acción está siempre a la vista sin duplicarla:
   en móvil la lleva la barra, en escritorio la lleva la cabecera. Necesita
   fondo propio: hasta ahora era transparente y el contenido pasaría por debajo.
   `scroll-padding-top` evita que la cabecera tape el destino de un ancla
   (/guia-familias/#cap-04 quedaba medio escondido debajo). */
@media (min-width: 1024px) {
  :root { --topbar: 73px; }
  html { scroll-padding-top: calc(var(--topbar) + var(--s4)); }
  .topbar {
    position: sticky; top: 0; z-index: 50;
    background: var(--paper);
  }
  .tally { top: var(--topbar); }
  /* El aire del ancla ya lo pone `scroll-padding-top`; sumarle el suyo lo
     dejaba demasiado abajo. */
  .chapter { scroll-margin-top: 0; }
}

@media (min-width: 1024px) {
  .topbar .accion {
    display: inline-flex; align-self: center; margin-left: auto;
    min-height: 40px; padding: var(--s2) var(--s4);
    font-size: .92rem; white-space: nowrap;
  }
}

/* --- Botones y llamadas a la acción ------------------------------------ */

button, .btn {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  min-height: 52px;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--brand);
  border-radius: 0;
  background: var(--brand);
  color: var(--on-brand);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
}
button:hover, .btn:hover { background: var(--brand-2); border-color: var(--brand-2); color: var(--on-brand); }

button.ghost, .btn.ghost {
  background: transparent; color: var(--ink); border-color: var(--rule-2);
}
button.ghost:hover, .btn.ghost:hover {
  background: transparent; color: var(--brand); border-color: var(--brand);
}
button[disabled] { opacity: .38; cursor: default; }


/* Bloque de llamada a la acción: botón + la línea que quita miedo */
.cta { width: 100%; display: flex; flex-direction: column; gap: var(--s3); }
.cta .row { display: flex; flex-direction: column; gap: var(--s3); width: 100%; }
.cta .btn, .cta button { width: 100%; }
.cta .fine { font-size: .88rem; color: var(--muted); }
@media (min-width: 560px) {
  .cta .row { flex-direction: row; flex-wrap: wrap; }
  .cta .btn, .cta button { width: auto; }
}

/* Barra fija de compra, solo móvil */
.ctabar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--surface);
  border-top: 1px solid var(--rule-2);
  padding: var(--s3) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--s4);
}
.ctabar .what { flex: 1 1 auto; font-size: .85rem; line-height: 1.3; color: var(--muted); }
.ctabar .what strong { display: block; color: var(--ink); font-size: .98rem; }
.ctabar .btn { flex: 0 0 auto; min-height: 48px; padding: var(--s3) var(--s5); }
body.has-ctabar { padding-bottom: 96px; }
@media (min-width: 1024px) { .ctabar { display: none !important; } body.has-ctabar { padding-bottom: 0; } }

/* --- Reloj de 20 minutos ----------------------------------------------- */

.clock {
  font-family: var(--mono);
  font-size: clamp(3.6rem, 22vw, 6.5rem);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.depletion { width: 100%; height: 2px; background: var(--rule); position: relative; }
.depletion span { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--brand); transition: width .5s linear; }
@media (prefers-reduced-motion: reduce) { .depletion span { transition: none; } }

.controls { display: flex; flex-wrap: wrap; gap: var(--s3); width: 100%; }
.controls button { flex: 1 1 auto; }
@media (min-width: 560px) { .controls button { flex: 0 0 auto; } }

/* --- Listas estructurales ---------------------------------------------- */

.paths { width: 100%; display: flex; flex-direction: column; }
.path {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s5) 0;
  border-top: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  min-height: 48px;
}
.path:last-child { border-bottom: 1px solid var(--rule); }
.path h3 { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.path:hover h3 { text-decoration-thickness: 2px; color: var(--brand-2); }

ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; width: 100%; display: flex; flex-direction: column; }
ol.steps li {
  counter-increment: s;
  display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--s1) var(--s3);
  padding: var(--s5) 0; border-top: 1px solid var(--rule);
}
ol.steps li:last-child { border-bottom: 1px solid var(--rule); }
ol.steps li::before {
  content: counter(s, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--mono); font-size: .82rem; font-weight: 500; color: var(--brand-3);
  font-variant-numeric: tabular-nums; padding-top: .35rem;
}

.claims { width: 100%; display: flex; flex-direction: column; }
.claim { padding: var(--s5) 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: var(--s1); }
.claim:last-child { border-bottom: 1px solid var(--rule); }
.claim q { font-weight: 600; font-style: italic; }
.claim q::before, .claim q::after { content: ""; }

.reg { width: 100%; display: flex; flex-direction: column; }
.reg-item { padding: var(--s5) 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: var(--s2); }
.reg-item:last-child { border-bottom: 1px solid var(--rule); }
/* Bandera del registro. Dibujada en un sprite SVG, nunca emoji: el emoji lo
   pinta el sistema y cambia de tamaño y de estilo en cada aparato. El filete
   la sostiene contra el papel, que si no las mitades blancas se derraman. */
.pais { display: flex; align-items: center; gap: var(--s3); }
.flag {
  width: 24px; height: 16px; flex: none; display: block;
  outline: 1px solid var(--rule-2); outline-offset: -1px;
}

.reg-item .meta { font-family: var(--mono); font-size: .8rem; line-height: 1.55; color: var(--muted); letter-spacing: 0; }
.reg-item ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.reg-item ul li { display: flex; flex-direction: column; gap: var(--s1); }
.warn { border-left: 2px solid var(--signal); padding-left: var(--s4); }

.qs { display: flex; flex-direction: column; gap: var(--s3); width: 100%; }
.qs p { padding-left: var(--s4); border-left: 2px solid var(--brand-3); }

/* --- Formularios -------------------------------------------------------- */

fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); width: 100%; }
legend { padding: 0; font-family: var(--mono); font-size: .78rem; letter-spacing: .02em; color: var(--muted); }
.opts { display: flex; flex-direction: column; width: 100%; }
.opt {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) 0; min-height: 48px;
  border-top: 1px solid var(--rule); cursor: pointer;
}
.opt:last-child { border-bottom: 1px solid var(--rule); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.mark { width: 16px; height: 16px; border: 1px solid var(--rule-2); flex: none; }
.opt input:checked + .mark { background: var(--brand); border-color: var(--brand); box-shadow: inset 0 0 0 3px var(--paper); }
.opt input:focus-visible + .mark { outline: 2px solid var(--brand); outline-offset: 3px; }

/* El formulario es hijo de un .block con align-items:flex-start, así que sin
   width se encogía a su contenido: 355px dentro de un contenedor de 1104. */
.lista { width: 100%; max-width: 38rem; }

.field { display: flex; flex-direction: column; gap: var(--s3); width: 100%; }
@media (min-width: 560px) { .field { flex-direction: row; flex-wrap: wrap; } }

input[type="email"] {
  flex: 1 1 220px;
  font-family: var(--sans);
  font-size: 16px;                 /* menos de 16 y iOS hace zoom al enfocar */
  min-height: 52px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule-2); border-radius: 0;
  background: var(--paper); color: var(--ink);
}
input[type="email"]:focus { border-color: var(--brand); outline: none; box-shadow: inset 0 0 0 1px var(--brand); }
input[type="email"]::placeholder { color: var(--muted); }

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

/* --- Líneas de ayuda: el único sitio con rojo -------------------------- */

.help { background: var(--ink); color: var(--paper); }
.help .block { gap: var(--s4); }
.help h2, .help p { color: var(--paper); }
.help a { color: var(--paper); }
.lines { width: 100%; display: flex; flex-direction: column; }
.line {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s1) var(--s4);
  padding: var(--s4) 0; border-top: 1px solid rgba(150,150,150,.32);
  min-height: 48px;
}
.line:last-child { border-bottom: 1px solid rgba(150,150,150,.32); }
.line .where { font-family: var(--mono); font-size: .8rem; opacity: .75; min-width: 7.5rem; color: var(--paper); }
.line .num {
  font-family: var(--mono); font-size: 1.45rem; font-weight: 500;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  color: var(--signal); text-decoration: none;
}
a.num:hover { text-decoration: underline; text-underline-offset: 4px; color: var(--signal); }
.line .who { font-size: .85rem; opacity: .75; width: 100%; }

/* --- Artículos largos --------------------------------------------------- */

.prose { width: 100%; display: flex; flex-direction: column; gap: var(--s4); }
.prose > * { max-width: 70ch; }
.prose h3 { margin-top: var(--s3); }
.prose ul { margin: 0; padding-left: 1.15em; display: flex; flex-direction: column; gap: var(--s2); }
.prose li { padding-left: .2em; }
.prose li::marker { color: var(--brand-3); }

.toc { width: 100%; display: flex; flex-direction: column; }
.toc a {
  padding: var(--s4) 0; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--s3);
  text-decoration: none; font-weight: 600; color: var(--ink);
  min-height: 48px; align-items: center;
}
.toc a:last-child { border-bottom: 1px solid var(--rule); }
.toc a span:first-child { font-family: var(--mono); color: var(--brand-3); font-weight: 500; font-size: .82rem; font-variant-numeric: tabular-nums; }
.toc a:hover span:last-child { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* --- Producto ----------------------------------------------------------- */

.chapters { width: 100%; display: flex; flex-direction: column; }
.chapter {
  padding: var(--s5) 0; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--s1) var(--s3);
}
.chapter:last-child { border-bottom: 1px solid var(--rule); }
.chapter .n {
  grid-row: span 2; font-family: var(--mono); color: var(--brand-3);
  font-weight: 500; font-size: .82rem; font-variant-numeric: tabular-nums; padding-top: .35rem;
}
/* Se llega a un capítulo concreto desde /familiares/. Aire arriba para que no
   quede pegado al borde, y el número en principal para que se vea a cuál se
   llegó. Sin caja y sin desplazarlo: el borde izquierdo es el mismo para todos. */
.chapter { scroll-margin-top: var(--s5); }
.chapter:target .n { color: var(--brand); }

/* Empalme al capítulo que continúa la sección. Es una llamada terciaria, de las
   que van dentro del texto, no un CTA: por eso puede haber una por sección sin
   romper el máximo de tres. Nunca en la sección de riesgo. */
.empalme { font-size: .94rem; color: var(--muted); }

/* Marca de capítulo con material. Distingue lo que se usa de lo que se lee, que
   es lo único que la página gratis no puede dar. Sin caja: mono y secundario,
   detrás del título y nunca encima, que las etiquetas encima están prohibidas. */
.material {
  font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .02em;
  color: var(--brand-3); white-space: nowrap;
}

.price { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s8); align-items: baseline; width: 100%; }
.price .amount {
  font-family: var(--mono); font-size: clamp(2.2rem, 11vw, 3.2rem);
  font-weight: 500; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.price .where { font-family: var(--mono); font-size: .78rem; letter-spacing: .02em; color: var(--muted); }

/* --- Preguntas frecuentes ---------------------------------------------- */

/* Qué entra en el precio. Lista escueta, que es lo que se lee al decidir. */
.incluye { width: 100%; margin: 0; padding-left: 1.15em; display: flex; flex-direction: column; gap: var(--s2); max-width: 70ch; }
.incluye li::marker { color: var(--brand-3); }

.faq { width: 100%; display: flex; flex-direction: column; }
.faq > div { padding: var(--s5) 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: var(--s1); }
.faq > div:last-child { border-bottom: 1px solid var(--rule); }

/* --- Tablas y bloques anchos ------------------------------------------- */

.tablewrap { width: 100%; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .94rem; }
th, td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--rule); }
th { font-weight: 700; border-bottom: 1px solid var(--rule-2); }

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

footer {
  border-top: 1px solid var(--rule);
  padding: var(--s6) 0 var(--s9);
  color: var(--muted); font-size: .85rem;
}
footer p + p { margin-top: var(--s3); }
footer a { color: var(--muted); }
footer a:hover { color: var(--brand); }

/* =======================================================================
   ESCRITORIO: UN SOLO ANCHO
   Todo cuelga del mismo contenedor y comparte el mismo borde izquierdo:
   títulos, párrafos, listas, formularios y pie. Nada se sale y nada se
   estrecha por su cuenta. Lo único que varía es dónde termina una línea de
   texto, porque pasados ~70 caracteres el ojo pierde el renglón al volver;
   eso deja aire a la derecha del párrafo y es correcto.
   Prohibido: raíles laterales, breakouts con `grid-column: 1 / -1` y
   contenedores propios por sección. Ya se probó y quedó descosido.
   ======================================================================= */

@media (min-width: 1024px) {
  /* 980, no 1100. El contenedor tiene que estar en proporción con la medida de
     lectura, que es lo único que no se puede tocar: si el texto se para a los 70
     caracteres, un contenedor mucho más ancho no da aire, da un agujero. Con
     1100 el sitio se veía escorado a la izquierda en todas las páginas. */
  .wrap { max-width: 980px; padding: 0 var(--s7); }

  body { font-size: 19px; line-height: 1.6; }

  .block { padding: var(--s8) 0; row-gap: var(--s5); }

  /* Tope de lectura. Alineado a la izquierda, nunca centrado ni desplazado. */
  p, .lede, .prose > *, .stem, .band-name { max-width: 70ch; }
  h1 { max-width: 16ch; }
  h2 { max-width: 24ch; }

  /* Las listas ocupan el ancho entero del contenedor, en dos columnas.
     Mismo borde izquierdo que el texto, mismo borde derecho que el resto. */
  .paths, .claims, .reg, .chapters, .faq, .toc, .next {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s7);
    align-items: start;
    border-bottom: 1px solid var(--rule);
  }
  .path, .claim, .reg-item, .chapter, .faq > div, .toc a, .next a { border-top: 1px solid var(--rule); }
  .path:last-child, .claim:last-child, .reg-item:last-child, .chapter:last-child,
  .faq > div:last-child, .toc a:last-child, .next > :last-child { border-bottom: none; }

  /* El índice del artículo largo entra en tres de un vistazo */
  .toc { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s6); }

  /* Las líneas de crisis no son un listado: una sola columna */
  .lines { display: flex; border-bottom: none; }

  .hero { padding-top: var(--s9); padding-bottom: var(--s8); }

  .cta .row { flex-wrap: nowrap; }
}

/* No hay escalón a 1200: ensanchar el contenedor en pantallas grandes solo
   agranda el hueco de la derecha, porque el texto sigue parándose a los 70
   caracteres. Medido: a 1104 de contenedor, un párrafo ocupaba 757 y sobraban
   347; a 884 ocupa lo mismo y sobran 127. */

/* La barra fija de acción, solo en móvil. Se esconde sola cuando el bloque
   de crisis entra en pantalla (DESIGN.md). */
.ctabar { transition: transform .2s ease-out; }
.ctabar.away { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) { .ctabar { transition: none; } }

/* Y la acción de la cabecera se retira por lo mismo y a la vez: quien está
   leyendo un teléfono de crisis no es un cliente (DESIGN.md, regla 6). Se va
   solo el botón; la navegación se queda, que no es una llamada a la acción. */
.topbar .accion { transition: opacity .2s ease-out; }
.topbar .accion.away { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .topbar .accion { transition: none; } }

/* --- Listas de comprobación --------------------------------------------
   Marcar es la acción principal de la página, así que la fila entera es
   zona táctil y el estado se ve sin leer. */

.tally {
  width: 100%;
  display: flex; flex-direction: column; gap: var(--s2);
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
.tally .count {
  font-family: var(--mono); font-size: .82rem; letter-spacing: .02em;
  color: var(--muted); font-variant-numeric: tabular-nums;
  display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline;
}
.tally .count b { color: var(--ink); font-weight: 500; }
.tally .track { width: 100%; height: 2px; background: var(--rule); position: relative; }
.tally .track span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brand); transition: width .2s ease-out; }
@media (prefers-reduced-motion: reduce) { .tally .track span { transition: none; } }
.tally .wipe {
  background: none; border: none; padding: 0; min-height: 0;
  font-family: var(--mono); font-size: .82rem; letter-spacing: .02em;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.tally .wipe:hover { background: none; color: var(--signal); }

.checklist { width: 100%; display: flex; flex-direction: column; gap: var(--s6); }
.checkgroup { width: 100%; display: flex; flex-direction: column; gap: var(--s3); }
.checkgroup h3 { color: var(--muted); font-weight: 700; }

.checks { width: 100%; display: flex; flex-direction: column; }
.check {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4) 0; min-height: 52px;
  border-top: 1px solid var(--rule);
  cursor: pointer;
}
.check:last-child { border-bottom: 1px solid var(--rule); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  width: 17px; height: 17px; flex: none; margin-top: .3em;
  border: 1px solid var(--rule-2); background: var(--paper);
}
.check input:checked + .box { background: var(--brand); border-color: var(--brand); box-shadow: inset 0 0 0 3px var(--paper); }
.check input:focus-visible + .box { outline: 2px solid var(--brand); outline-offset: 3px; }
.check input:checked ~ .txt { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.check .txt strong { font-weight: 700; }

@media print {
  .topbar, .ctabar, .cta, .tally .wipe, .help { display: none !important; }
  .check .box { box-shadow: none !important; background: none !important; }
  .check input:checked ~ .txt { text-decoration: none; color: inherit; }
}

/* --- Campos de texto y desplegables ------------------------------------ */

textarea, select {
  font-family: var(--sans);
  font-size: 16px;                 /* menos de 16 y iOS hace zoom al enfocar */
  width: 100%;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule-2); border-radius: 0;
  background: var(--paper); color: var(--ink);
  line-height: 1.5;
}
textarea { min-height: 92px; resize: vertical; }
select { min-height: 52px; }
textarea:focus, select:focus { border-color: var(--brand); outline: none; box-shadow: inset 0 0 0 1px var(--brand); }
textarea::placeholder { color: var(--muted); }

.paso { width: 100%; display: flex; flex-direction: column; gap: var(--s3); }
.paso > .n {
  font-family: var(--mono); font-size: .82rem; letter-spacing: .02em;
  color: var(--brand-3); font-variant-numeric: tabular-nums;
}

/* --- Guion generado ----------------------------------------------------- */

.guion { width: 100%; display: flex; flex-direction: column; gap: var(--s5); }
.guion .parte { display: flex; flex-direction: column; gap: var(--s2); }
.guion .rotulo {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .02em;
  color: var(--muted); text-transform: none;
}
.guion .dicho {
  border-left: 2px solid var(--brand);
  padding-left: var(--s4);
  font-size: 1.14rem; line-height: 1.5;
}
.guion .apunte { font-size: .94rem; color: var(--muted); }
.guion ul { margin: 0; padding-left: 1.15em; display: flex; flex-direction: column; gap: var(--s2); }
.guion li::marker { color: var(--brand-3); }

@media print {
  .topbar, .ctabar, .cta, .help, footer, #formulario, #acciones, .hero .lede, .hero p { display: none !important; }
  .hero h1 { font-size: 1.6rem; }
  .band { border: none; }
  .block { padding: 0 0 var(--s5); }
  .guion .dicho { border-left-color: #000; }
}

/* --- Página de las ganas ------------------------------------------------ */

.urgencia { padding-top: var(--s6); }
.urgencia .clock { font-size: clamp(4.4rem, 26vw, 8rem); }

.razones { width: 100%; display: flex; flex-direction: column; gap: var(--s3); }
.razones .escritas {
  border-left: 2px solid var(--brand);
  padding-left: var(--s4);
  font-size: 1.14rem; line-height: 1.5;
  white-space: pre-wrap;
}
.razones .fila { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.razones .fila button { min-height: 44px; padding: var(--s2) var(--s4); font-size: .94rem; }

/* --- Dibujos que llevan información ------------------------------------
   No son ilustración. Cada uno sustituye párrafos que nadie iba a leer, y
   por eso están permitidos donde una ilustración decorativa no lo estaría:
   la regla de DESIGN.md es que la página no parezca una clínica vendiendo
   tratamiento, no que no pueda haber dibujo. Si un bloque de estos no
   afirma nada que no esté escrito al lado, sobra. */

/* La curva del impulso. La forma es el argumento: sube, hace cresta y baja
   sola, y la de trazo discontinuo es lo que pasa si la alimentas. El SVG se
   estira a lo ancho (preserveAspectRatio="none") y los trazos se mantienen
   en píxeles de pantalla con vector-effect, así que no engorda ni adelgaza
   con el ancho. Los rótulos van en HTML, no dentro del SVG: el texto de un
   SVG estirado sale de un tamaño distinto en cada pantalla. */

.curva { width: 100%; margin: 0; display: flex; flex-direction: column; gap: var(--s3); }
.curva svg { display: block; width: 100%; height: 132px; }
/* Los trazos se mantienen en píxeles de pantalla con vector-effect, así que
   estirar el dibujo a lo ancho no los engorda. Los colores viven aquí y no
   en el atributo del SVG, que es donde manda la hoja. */
.curva .area      { fill: var(--brand-tint); }
.curva .base      { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.curva .cresta    { stroke: var(--rule-2); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.curva .trazo     { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.curva .ola-alimentada { fill: none; stroke: var(--brand-3); stroke-width: 2; stroke-dasharray: 6 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (min-width: 640px) { .curva svg { height: 180px; } }
@media (min-width: 1024px) { .curva svg { height: 210px; } }

.curva .eje {
  display: flex; justify-content: space-between; gap: var(--s4);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .02em; color: var(--muted);
  border-top: 1px solid var(--rule); padding-top: var(--s2);
}
.curva .eje span:last-child { text-align: right; }

.curva figcaption { display: flex; flex-direction: column; gap: var(--s2); }
.curva .clave { display: flex; align-items: baseline; gap: var(--s3); font-size: .88rem; color: var(--muted); }
.curva .clave b { font-weight: 400; color: var(--ink); }
.curva .clave i {
  flex: none; display: block; width: 26px; height: 0; position: relative; top: -.35em;
  border-top: 2px solid var(--brand);
}
.curva .clave.alimentado i { border-top: 2px dashed var(--brand-3); }

/* Matriz de comparación. En móvil se apila: cada método es un bloque y cada
   fila una pregunta con su respuesta a la derecha, que es como se lee una
   ficha técnica. A partir de 768px vuelve a ser una tabla de verdad. */

.matriz { width: 100%; }
.matriz table, .matriz thead, .matriz tbody, .matriz tr, .matriz th, .matriz td { display: block; }
.matriz thead { display: none; }
.matriz caption { text-align: left; }
.matriz tbody tr { border-top: 1px solid var(--rule); padding: var(--s5) 0; }
.matriz tbody tr:last-child { border-bottom: 1px solid var(--rule); }
.matriz th[scope="row"] {
  font-size: 1.05rem; line-height: 1.35; font-weight: 700; letter-spacing: -0.012em;
  padding: 0 0 var(--s3); border: none;
}
.matriz td {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding: var(--s2) 0; border: none;
}
.matriz td::before {
  content: attr(data-q);
  font-family: var(--mono); font-size: .76rem; letter-spacing: .02em; line-height: 1.5;
  color: var(--muted);
}

/* Las marcas se dibujan, no se escriben con emoji, por lo mismo que las
   banderas. El «no» va en gris y nunca en rojo: el rojo es de las líneas de
   crisis y en cuanto aparece en otro sitio deja de significar lo que
   significa. La palabra queda al lado porque una marca sola no se lee. */
.mk { display: inline-flex; align-items: center; gap: var(--s2); flex: none; font-family: var(--mono); font-size: .8rem; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.mk.si { color: var(--ink); }
.mk i { width: 13px; height: 13px; flex: none; position: relative; display: block; }
.mk.si i::before {
  content: ""; position: absolute; left: 4px; top: 0; width: 6px; height: 12px;
  border: solid var(--brand); border-width: 0 2px 2px 0; transform: rotate(40deg);
}
.mk.no i::before, .mk.no i::after {
  content: ""; position: absolute; left: 0; top: 5.5px; width: 13px; height: 2px;
  background: var(--muted);
}
.mk.no i::before { transform: rotate(45deg); }
.mk.no i::after { transform: rotate(-45deg); }
.mk.mitad i::before {
  content: ""; position: absolute; left: 0; top: 5.5px; width: 13px; height: 2px;
  background: var(--muted);
}

@media (min-width: 768px) {
  .matriz table { display: table; width: 100%; border-collapse: collapse; }
  .matriz thead { display: table-header-group; }
  .matriz tbody { display: table-row-group; }
  .matriz tr { display: table-row; padding: 0; border: none; }
  .matriz th, .matriz td { display: table-cell; }
  .matriz td::before { content: none; }
  .matriz thead th {
    font-family: var(--mono); font-size: .74rem; font-weight: 400; letter-spacing: .02em;
    line-height: 1.45; color: var(--muted);
    vertical-align: bottom; padding: 0 var(--s4) var(--s3) 0;
    border-bottom: 1px solid var(--rule-2);
  }
  .matriz thead th:first-child { width: 30%; }
  .matriz tbody th[scope="row"] {
    font-size: 1rem; padding: var(--s4) var(--s5) var(--s4) 0;
    border-bottom: 1px solid var(--rule); vertical-align: top;
  }
  .matriz tbody td { padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
  .matriz tbody tr:last-child th, .matriz tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
}

/* Cifras. La familia mono ya estaba en el diseño para datos y casi no se
   usaba; es lo más barato que rompe el gris de una página de puro párrafo.
   Ninguna cifra entra aquí si no está sostenida en el texto de al lado:
   la regla de «nunca un número sin fuente» vale doble cuando el número es
   lo primero que se ve. */

.cifras {
  width: 100%; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5) var(--s5);
}
.cifras li { display: flex; flex-direction: column; gap: var(--s1); border-top: 1px solid var(--rule); padding-top: var(--s3); }
.cifras b {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.5rem, 7vw, 2rem); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.cifras span { font-size: .85rem; line-height: 1.45; color: var(--muted); }
@media (min-width: 768px) { .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s6); } }

/* Ficha de un registro: lo que se busca de un vistazo (qué cuesta, cuánto
   dura, si se hace por internet) sin tener que leer el párrafo entero.
   Filetes verticales, no cajas. */

/* `ul.datos` y no `.datos`: dentro de un registro ya hay una regla
   `.reg-item ul` que pone la lista en columna, y con la misma especificidad
   gana la última. Esta lo es, pero conviene que no dependa de eso. */
ul.datos {
  width: 100%; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--s1);
  font-family: var(--mono); font-size: .76rem; letter-spacing: .02em; line-height: 1.5;
  color: var(--ink);
}
/* Clave y valor en dos columnas, como una ficha técnica. Se probó en fila con
   filetes verticales y a 390px cada dato caía en su propia línea: filetes
   sueltos y el valor sangrado bajo la clave. */
ul.datos li { display: flex; flex-direction: row; gap: var(--s3); align-items: baseline; }
ul.datos li span { flex: 0 0 6.4rem; color: var(--muted); }
ul.datos li b { font-weight: 500; }