/* Las páginas de dentro, en la puerta de la nevera de la portada (a/nevera.css): el mismo verde agua, las letras, la placa
   del logo, el imán rojo para crear y lo que se lee en papel. Va encima de a/estilo.css y le cambia los tokens; la
   estructura de cada página (pasos, demos, el libro, los precios) sigue siendo la de estilo.css. No la carga la portada
   anterior (/v2, el libro), que se queda en el sistema «Tinta» (construir.py). */
@font-face { font-family: "M PLUS Rounded 1c"; font-weight: 800; font-display: swap; src: url("letras/mplus-rounded-800.woff2") format("woff2"); }
@font-face { font-family: "M PLUS Rounded 1c"; font-weight: 900; font-display: swap; src: url("letras/mplus-rounded-900.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400 700; font-display: swap; src: url("letras/atkinson-next.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 400; font-display: swap; src: url("letras/atkinson-next-italic.woff2") format("woff2"); }
@font-face { font-family: "Shantell Sans"; font-weight: 400 700; font-display: swap; src: url("letras/shantell-sans.woff2") format("woff2"); }

/* La paleta de la nevera (los mismos valores que a/nevera.css). */
:root {
  --puerta: #a3d6c8;
  --puerta-brillo: rgba(255, 255, 255, .26);
  --puerta-sombra: #82bdaf;
  --puerta-tinta: #0f3a33;
  --puerta-tinta-2: #2a5850;
  --puerta-raya: rgba(15, 58, 51, .22);
  --goma: #6aa497;
  --papel: #fdfdfb;
  --papel-linea: #d3e0ee;
  --tinta: #1c2a31;
  --tinta-2: #4b5a62;
  --boli: #2546a6;
  --posit: #ffe36e;
  --cinta: #ecdcb8;
  --azul: #1f5fd1;
  --amarillo: #f7b500;
  --verde: #1e8442;
  --violeta: #7547d0;
  --rojo: #d42f28;
  --rojo-hondo: #9c2018;
  --rejilla: #22302d;
  --sombra: rgba(12, 52, 45, .42);
  --foco: #0b3fa8;
  --enlace: var(--boli);
  /* El azul de bolígrafo, no el del imán: sobre la puerta, el del imán (#1f5fd1) se queda en 3,6:1. */
  --acento: var(--boli);
  --f-iman: "M PLUS Rounded 1c", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  --f-texto: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mano: "Shantell Sans", "Comic Neue", "Segoe Print", "Bradley Hand", cursive;
  --sombra-papel: 0 1px 1px rgba(0, 0, 0, .07), 0 14px 24px -14px var(--sombra);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --puerta: #1d4b44; --puerta-brillo: rgba(255, 255, 255, .07); --puerta-sombra: #153934;
    --puerta-tinta: #e2f3ed; --puerta-tinta-2: #a8cfc5; --puerta-raya: rgba(226, 243, 237, .22); --goma: #0f2c28;
    --papel: #eceee9; --papel-linea: #c2cedb; --posit: #f0d25a; --cinta: #d6c49e; --rejilla: #0d1513;
    --sombra: rgba(0, 0, 0, .62); --foco: #ffe36e; --enlace: #8fb4ff; --acento: #8fb4ff;
  }
}
:root[data-theme="dark"] {
  --puerta: #1d4b44; --puerta-brillo: rgba(255, 255, 255, .07); --puerta-sombra: #153934;
  --puerta-tinta: #e2f3ed; --puerta-tinta-2: #a8cfc5; --puerta-raya: rgba(226, 243, 237, .22); --goma: #0f2c28;
  --papel: #eceee9; --papel-linea: #c2cedb; --posit: #f0d25a; --cinta: #d6c49e; --rejilla: #0d1513;
  --sombra: rgba(0, 0, 0, .62); --foco: #ffe36e; --enlace: #8fb4ff; --acento: #8fb4ff;
}

/* Los tokens de estilo.css, sacados de la paleta. Con la misma especificidad que sus temas (claro y oscuro), para
   ganarles; el tema solo cambia la paleta de arriba. */
:root:not([data-theme="light"]), :root[data-theme="light"] {
  --paper: var(--puerta);
  --surface: var(--papel);
  --surface-2: var(--papel);
  --line: var(--puerta-raya);
  --line-strong: var(--puerta-tinta-2);
  --ink: var(--puerta-tinta);
  --ink-2: var(--puerta-tinta-2);
  --ink-3: var(--puerta-tinta-2);
  --accent: var(--acento);
  --accent-hover: #174cad;
  --accent-soft: #dfe8fb;
  --accent-ink: var(--enlace);
  --on-accent: #fff;
  --mark: var(--posit);
  --mark-line: var(--amarillo);
  --mark-ink: var(--tinta);
  --book-paper: var(--papel);
  --book-ink: var(--tinta);
  --shadow-lift: var(--sombra-papel);
  --shadow-deep: 0 2px 4px rgba(0, 0, 0, .1), 0 28px 44px -20px var(--sombra);
  --f-display: var(--f-iman);
  --f-ui: var(--f-texto);
  --f-read: var(--f-texto);
  --t-h2: clamp(28px, 3.6vw, 46px);
  --t-h3: clamp(22px, 2.2vw, 28px);
  --t-body: clamp(17px, 1.25vw, 19px);
  --radius: 2px;
}

html { scroll-padding-top: 16px; scrollbar-color: var(--puerta-sombra) var(--puerta); }
body {
  background:
    linear-gradient(90deg, transparent 0, var(--puerta-brillo) 12%, transparent 24%, transparent 72%, var(--puerta-brillo) 84%, transparent 94%) fixed,
    var(--puerta);
  line-height: 1.55;
}
::selection { background: var(--posit); color: var(--tinta); }
a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
:focus-visible, .top :focus-visible, .mbar :focus-visible { outline-color: var(--foco); border-radius: 4px; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }

/* Lo que se lee en papel: las tarjetas, los precios, las fechas, las demos y las preguntas. El papel es claro también de
   noche (como en la portada), así que lleva su propia tinta. */
.more a, .plan:not(.gift), .date, .board, .maker, .table-wrap, .cuaderno, .compare, .snap, .sheet, .faq, .finale-in {
  --ink: var(--tinta);
  --ink-2: var(--tinta-2);
  --ink-3: var(--tinta-2);
  --line: var(--papel-linea);
  --line-strong: #9fb0c2;
  --accent: var(--azul);
  --accent-ink: var(--boli);
  --enlace: var(--boli);
  --surface: #fff;
  --surface-2: #f5f7f9;
  --foco: #0b3fa8;
  /* El foco de las secciones .night se resuelve en la sección (amarillo de noche): en el papel, el suyo. */
  --night-accent: var(--foco);
  /* El verde de «Sin personas» (la foto del peluche): el del día, que el de la puerta de noche no se lee en el papel. */
  --ok: #2b7349;
  color: var(--ink);
}
.more a, .plan:not(.gift), .date, .board, .maker, .table-wrap, .faq {
  background: var(--papel);
  border: 0;
  border-radius: 2px;
  box-shadow: var(--sombra-papel);
}
/* Un imán redondo, como los de la portada (`.iman`). */
.plan:not(.gift)::after, .faq::before, .finale-in::before, .page-hero-visual:has(> img)::before {
  content: "";
  position: absolute;
  left: var(--ix, 50%);
  top: -12px;
  width: 30px; height: 30px;
  margin-left: -15px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .6), transparent 42%), var(--c, var(--azul));
  box-shadow: 0 3px 0 color-mix(in oklab, var(--c, var(--azul)), black 32%), 0 9px 10px -4px var(--sombra);
  z-index: 2;
}

/* ——— Cabecera: la de la portada, con la placa del logo ——— */
.top { position: relative; top: auto; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; color: var(--ink); }
.top-in { min-height: 0; padding-block: 24px 8px; gap: clamp(16px, 2.4vw, 32px); }
.brand { transform: rotate(-2deg); transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.brand:hover { transform: rotate(-1deg) translateY(-1px); }
.brand img { height: clamp(46px, 4.6vw, 64px); filter: drop-shadow(0 6px 7px var(--sombra)); }
.nav { margin-left: auto; gap: clamp(16px, 2.2vw, 28px); }
.nav a { color: var(--ink); font-weight: 700; font-size: 16px; padding-block: 10px; white-space: nowrap; }
.nav a:hover { color: var(--ink); text-decoration: underline; }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.top-end { margin-left: 0; gap: 12px; white-space: nowrap; }
.entrar { display: inline-flex; align-items: center; min-height: 44px; border: 2px solid currentColor; border-radius: 10px; padding: 6px 14px; color: var(--ink); font-weight: 700; font-size: 16px; text-decoration: none; }
.entrar:hover { color: var(--ink); background: rgba(0, 0, 0, .05); }
@media (max-width: 1099px) { .nav { display: none; } .top-end { margin-left: auto; } }
/* En el móvil, la placa y «Entrar», como la portada; el botón de crear va en el cuento de arriba y en la barra de abajo. */
@media (max-width: 599px) { .top .btn { display: none; } }

/* ——— Botones: el imán rojo es solo para crear el cuento (los enlaces con data-cta) ——— */
.btn { min-height: 48px; padding: 11px 20px 13px; border: 2px solid transparent; border-radius: 12px; font: 800 17px/1.1 var(--f-iman); transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s, background-color .2s; }
.btn.lg { min-height: 56px; padding: 14px 26px 16px; font-size: clamp(19px, 1.45vw, 21px); border-radius: 14px; }
.btn.sm { min-height: 44px; padding: 9px 16px 11px; font-size: 16px; }
.btn-night, .btn-accent { background: var(--tinta); color: var(--papel); }
.btn-night:hover, .btn-accent:hover { background: #2c3c44; }
.btn-ghost-n, .btn-line { background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost-n:hover, .btn-line:hover { background: rgba(0, 0, 0, .05); border-color: currentColor; }
.btn[data-cta] {
  background: var(--rojo);
  color: #fff;
  border-color: transparent;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), 0 4px 0 var(--rojo-hondo), 0 14px 18px -8px var(--sombra);
}
.btn[data-cta]:hover { background: var(--rojo); transform: translateY(-2px) rotate(-.6deg); }
.btn[data-cta]:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), 0 1px 0 var(--rojo-hondo), 0 6px 10px -6px var(--sombra); }
/* Un imán rojo por pantalla: el de crear de la cabecera y los de las tarjetas que no son el plan gratis (el de pago, el
   libro) van con borde, aunque lleven también a la app. */
.top .btn[data-cta], .plan .btn-line[data-cta] { background: transparent; color: inherit; border-color: currentColor; box-shadow: none; }
.top .btn[data-cta]:hover, .plan .btn-line[data-cta]:hover { background: rgba(0, 0, 0, .05); transform: none; }

/* ——— Arriba de cada página: la puerta, sin cielo ——— */
.night {
  --night-ink: var(--ink);
  --night-ink-2: var(--ink-2);
  --night-ink-3: var(--ink-2);
  --night-line: var(--line);
  --night-accent: var(--foco);
  --gold: var(--enlace);
  background: none;
  color: var(--ink);
}
.page-hero { overflow: visible; }
/* La goma de la puerta separa la parte de arriba del resto, como en la portada. */
.page-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 16px;
  background: linear-gradient(180deg, var(--puerta-sombra), var(--goma) 35%, var(--goma) 65%, var(--puerta-sombra));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 0 var(--puerta-brillo);
}
.page-hero h1 { font-size: clamp(34px, 1.4rem + 2.8vw, 60px); line-height: 1.06; }
/* Lo que va en cursiva en los títulos, apuntado a mano con boli. */
.page-hero h1 em, .finale h2 em { font: 600 1.02em/1.1 var(--f-mano); color: var(--enlace); }
.lede { color: var(--ink-2); }
.crumbs { font-size: 15px; color: var(--ink-2); }
.crumbs a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; }
.countdown {
  background: var(--cinta);
  color: var(--tinta);
  border: 0;
  border-radius: 0;
  padding: 5px 12px 6px;
  font: 500 15px/1.3 var(--f-mano);
  transform: rotate(-1.5deg);
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .25);
  clip-path: polygon(0 6%, 3% 0, 97% 4%, 100% 0, 99% 95%, 96% 100%, 3% 96%, 0 100%);
}
/* La ilustración, como una lámina pegada con un imán. */
.page-hero-visual { position: relative; }
.page-hero-visual > img { margin-inline: auto; background: #fff; padding: clamp(8px, 1.2vw, 14px); border-radius: 2px; box-shadow: var(--shadow-deep); rotate: 1.8deg; }
.page-hero-visual:has(> img)::before { --c: var(--verde); top: -10px; }
.compare { border: clamp(8px, 1.2vw, 14px) solid #fff; border-radius: 2px; box-shadow: var(--shadow-deep); }
/* El estreno de Tomasa se ve en una pantalla oscura, como en la app. */
.night .player {
  --night-ink: #E7E9EE; --night-ink-2: #B3B9C5; --night-ink-3: #8F96A4; --night-line: #2F3542;
  --night-accent: #8D9BFF; --gold: #F0D07A; --foco: #F0D07A;
  background: var(--night);
  color: var(--night-ink);
  padding: clamp(16px, 3vw, 26px);
  border-radius: 20px;
  box-shadow: var(--shadow-deep);
}

/* ——— Debajo, en la puerta ——— */
.band { background: none; border: 0; }
.eyebrow { font: 600 19px/1.2 var(--f-mano); letter-spacing: 0; text-transform: none; color: var(--accent-ink); }
.k { background: linear-gradient(transparent 12%, var(--posit) 12%, var(--posit) 88%, transparent 88%); box-shadow: none; color: var(--tinta); }
.prose p a:not([class]), .fuentes a { color: var(--accent-ink); text-decoration-thickness: 2px; }
.linkish { font-family: var(--f-texto); font-weight: 700; }
/* Las viñetas de estrella eran la marca antigua: ahora son imanes de colores. */
.tips li::before, .frases li::before {
  clip-path: none;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .6), transparent 45%), var(--c, var(--azul));
  box-shadow: 0 2px 0 color-mix(in oklab, var(--c, var(--azul)), black 32%);
}
.tips li:nth-child(4n + 2)::before, .frases li:nth-child(4n + 2)::before { --c: var(--amarillo); }
.tips li:nth-child(4n + 3)::before, .frases li:nth-child(4n + 3)::before { --c: var(--verde); }
.tips li:nth-child(4n + 4)::before, .frases li:nth-child(4n + 4)::before { --c: var(--violeta); }
.tips b, .timeline b { font-weight: 700; }
.timeline .when { font-size: 1.35rem; }
.timeline li { grid-template-columns: 8em minmax(0, 1fr); }
@media (max-width: 520px) { .timeline li { grid-template-columns: minmax(0, 1fr); } }
/* Lo que se dice en voz alta (los ejemplos, la charla, las frases), escrito a mano. */
.frases li, .ej, .charla dd, .kara.end, .sheet figcaption { font-family: var(--f-mano); font-style: normal; font-weight: 600; }
.frases li { font-size: clamp(21px, 1.9vw, 25px); line-height: 1.3; color: var(--enlace); }
.ej { border-left: 0; padding-left: 0; font-size: 1.25rem; color: var(--enlace) !important; }
.ej span { font: 400 1rem/1.4 var(--f-texto); color: var(--ink-2); margin-top: 4px; }
.charla dd { color: var(--enlace); }
/* Con más fuerza que `.prose p` (la tinta de la puerta, que de noche no se lee en el pósit). */
.notice, .prose .notice {
  background: var(--posit);
  color: var(--tinta);
  border: 0;
  border-radius: 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .07), 0 14px 20px -12px var(--sombra);
  transform: rotate(-.6deg);
}
.cuaderno { border-radius: 2px; box-shadow: var(--sombra-papel); }

/* Tarjetas de papel, un poco torcidas, como en la nevera. */
.more a { padding: 10px; }
.more a:nth-child(odd) { rotate: -.6deg; }
.more a:nth-child(even) { rotate: .5deg; }
.more a:hover { transform: translateY(-2px); }
.more img { border-radius: 0; }
.more b { font: 800 17px/1.25 var(--f-iman); }
.plan:not(.gift):nth-child(odd) { rotate: -.5deg; --c: var(--amarillo); }
.plan:not(.gift):nth-child(even) { rotate: .5deg; --c: var(--verde); }
/* El libro: un pósit en la puerta (como el ex libris de la app), no una tapa azul marino de catálogo. Claro también de
   noche, con su tinta. */
.plan.gift {
  --ink: var(--tinta); --ink-2: var(--tinta-2); --ink-3: var(--tinta-2); --line: rgba(28, 42, 49, .2);
  --night-ink: var(--tinta); --night-ink-2: var(--tinta-2); --night-ink-3: var(--tinta-2); --gold: var(--tinta);
  --enlace: var(--boli); --foco: #0b3fa8; --night-accent: #0b3fa8;
  background: var(--posit);
  color: var(--tinta);
  border: 0;
  border-radius: 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .07), 0 14px 20px -12px var(--sombra);
  rotate: .8deg;
}
.plan .badge { background: var(--posit); color: var(--tinta); font-family: var(--f-texto); }
.date:nth-child(odd) { rotate: -.6deg; }
.date:nth-child(even) { rotate: .5deg; }
.date.next { background: var(--posit); }

/* Las preguntas, en una hoja con su imán, como en la portada. */
.faq { position: relative; padding: 10px clamp(18px, 3vw, 34px); border: 0; --c: var(--azul); --ix: 12%; }
.faq details { border-bottom: 2px dashed var(--papel-linea); }
.faq details:last-of-type { border-bottom: 0; }
.faq summary { font: 800 clamp(18px, 1.6vw, 21px)/1.3 var(--f-iman); min-height: 60px; padding-block: 16px; }
.faq summary::after { border-color: var(--tinta-2); }
.faq details p { color: var(--tinta-2); }

/* ——— El final de cada página: una nota con su imán y el botón de crear ——— */
.finale { padding-block: clamp(72px, 9vw, 128px); }
.finale .finale-in {
  width: auto;
  max-width: min(680px, calc(100% - 32px));
  margin-inline: auto;
  padding: clamp(36px, 5vw, 56px) clamp(22px, 4vw, 48px);
  background: var(--papel);
  box-shadow: var(--shadow-deep);
  transform: rotate(-.6deg);
  --c: var(--rojo);
}
.finale h2 { font-size: clamp(30px, 3.6vw, 46px); }
.finale p { color: var(--tinta-2); }

/* ——— Pie: la rejilla de abajo de la nevera ——— */
footer {
  --night-ink: #e6f1ee; --night-ink-3: #b2c8c2; --night-line: rgba(255, 255, 255, .14);
  background:
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(255, 255, 255, .06) 14px 18px),
    var(--rejilla);
  color: var(--night-ink-3);
  border-top: 0;
  font-size: 15px;
}
footer :focus-visible { outline-color: var(--posit); }
.foot-in .brand img { height: 52px; filter: none; }
.foot-brand p { color: var(--night-ink-3); }
.foot-cols b { font-family: var(--f-iman); font-weight: 800; letter-spacing: .08em; }
.foot-cols a, .foot-legal a { color: #cfe0db; padding-block: 4px; }

/* ——— Barra fija del móvil ——— */
.mbar {
  background: color-mix(in srgb, var(--puerta) 94%, transparent);
  border-top: 0;
  box-shadow: 0 -1px 0 var(--puerta-sombra), 0 -12px 24px -14px var(--sombra);
}
.mbar .btn { min-height: 52px; }

@media (prefers-reduced-motion: reduce) {
  .brand, .btn { transition: none; }
}

/* Solo para lectores de pantalla (como `.sr` de la portada): el título de una sección que ya se ve por su contenido. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sin palabras sueltas al final de un párrafo (la crítica del 28-10-2026 las contó en casi todas las páginas) y la
   entradilla a un ancho de lectura: a dos columnas pasaba de 100 caracteres por línea. */
p, li, dd, figcaption, summary { text-wrap: pretty; }
.lede { max-width: 62ch; }
.fuentes { max-width: 56ch; }