/* Hallmark · genre: playful · macrostructure: Feature Stack · theme: custom (Porcelain, from the app's own Palette)
 * enrichment: none (the real screen recording is the hero) · nav: N1b · footer: Ft5
 * anchor hue: 255 (cool porcelain) · accents: mint 178° = free, amber 75° = locked
 * pre-emit critique: P4 H4 E4 S4 R4 V4
 */

*, *::before, *::after { box-sizing: border-box; }
/* GRANO. Chrome divide la página en bloques y, si un bloque es de un único color liso, lo
   pinta como color plano sin corrección de color; los bloques con texto sí la llevan. En un
   fondo casi negro esa diferencia (unos 2 niveles) se ve como franjas horizontales de otro
   tono. Un grano imperceptible (alfa 0–6/255) hace que ningún bloque sea liso. */
:root { --grain: url("../assets/grain.png"); }
/* El fondo va también en <html>: es lo que se ve por encima de la página con el rebote
   elástico del Mac, y sin él ahí sale el color base del navegador (otra tonalidad).
   Además se quita ese rebote arriba y abajo. */
html { background: var(--color-paper) var(--grain); overscroll-behavior-y: none; overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--space-md)); }
body {
  margin: 0; overflow-x: clip;
  background: none; color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; margin: 0; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: var(--space-md); top: -4rem; background: var(--color-ink); color: var(--color-paper); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm); z-index: calc(var(--z-nav) + 1); }
.skip:focus { top: var(--space-sm); }

/* ── Botones y enlaces: una sola línea, siempre ─────────────────────────── */
.btn, .nav__link, .foot__link, .lang { white-space: nowrap; }
.btn {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 44px; padding: 0 1.25rem; border-radius: var(--radius-pill);
  font: 600 var(--text-sm)/1 var(--font-body); text-decoration: none; cursor: pointer;
  border: var(--rule-hair) solid transparent;
  transition: transform var(--dur-micro) var(--ease-out), background var(--dur-short) var(--ease-out);
}
.btn--ink { background: var(--color-ink); color: var(--color-paper); }
.btn--ghost { color: var(--color-ink); border-color: var(--color-rule); background: var(--color-paper-2); }
.btn[aria-disabled="true"] { cursor: default; }
.btn__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-mint); flex: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
}

/* ── Nav (N1b): sale con la página, no se queda fija ────────────────────
   Una barra `position: fixed` es una capa propia del navegador y, en pantallas de
   gama ancha, se pintaba con otro tono que el fondo (una franja visible de 64 px).
   Sin capa propia no hay dos tonos. */
.nav { position: absolute; inset: 0 0 auto; z-index: var(--z-nav); }
.nav__inner { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--page-gutter); height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-md); }
.nav__brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; justify-self: start;
  font: 700 1.15rem/1 var(--font-display); letter-spacing: -0.02em; }
.nav__brand img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 var(--rule-hair) var(--color-rule); }
.nav__center { display: none; }
.nav__right { display: flex; align-items: center; gap: var(--space-md); justify-self: end; }
.nav__link, .lang { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center; padding-inline: var(--space-xs); transition: color var(--dur-micro) var(--ease-out); }
.nav__link:hover, .lang:hover { color: var(--color-ink); }
@media (min-width: 60rem) {
  .nav__inner { grid-template-columns: 1fr auto 1fr; }
  .nav__center { display: flex; gap: var(--space-xs); justify-self: center; }
}

/* ── Feature Stack ──────────────────────────────────────────────────────── */
.stack { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--page-gutter); padding-top: var(--nav-h);
  display: grid; grid-template-columns: minmax(0, 1fr); }
.stack__stage { order: -1; position: sticky; top: 0; z-index: var(--z-sticky);
  height: calc(44dvh + var(--nav-h)); padding-block: calc(var(--nav-h) + var(--space-sm)) var(--space-sm); display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: var(--space-sm);
  background: var(--color-paper) var(--grain); }
.screen { position: relative; height: 100%; max-height: 100%; aspect-ratio: 780 / 1696; border-radius: 15% / 6.9%; overflow: hidden;
  background: var(--color-paper-2); box-shadow: 0 0 0 var(--rule-hair) var(--color-rule), var(--shadow-lift); isolation: isolate; }
.screen__zoom { position: absolute; inset: 0; transform-origin: 50% 50%;
  transform: scale(var(--s, 1)) translate(var(--tx, 0%), var(--ty, 0%)); will-change: transform; }
.screen video { width: 100%; height: 100%; object-fit: cover; }
.screen__empty { position: absolute; inset: 0; display: none; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: var(--space-md);
  padding: var(--space-lg); text-align: center; color: var(--color-muted); font-size: var(--text-sm); }
.screen__empty img { width: 42%; aspect-ratio: 1; object-fit: cover; border-radius: 22%; box-shadow: 0 0 0 var(--rule-hair) var(--color-rule); }
.screen[data-state="empty"] .screen__zoom { display: none; }
.screen[data-state="empty"] .screen__empty { display: grid; }
.stage__chapters { display: flex; gap: var(--space-xs); }
.stage__chapters button { appearance: none; border: 0; padding: 0; cursor: pointer; width: 26px; height: 28px; background: transparent; position: relative; }
.stage__chapters button::after { content: ""; position: absolute; inset: 12px 0; border-radius: 4px; background: var(--color-rule);
  transition: background var(--dur-short) var(--ease-out), inset var(--dur-short) var(--ease-out); }
.stage__chapters button[aria-current="true"]::after { background: var(--color-ink); inset: 10px 0; }

.stack__steps { display: grid; }
.step { --step-min: clamp(62dvh, calc(var(--len, 4) * 12dvh), 150dvh); min-height: var(--step-min); display: grid; align-content: center; gap: var(--space-md); padding-block: var(--space-xl);
  opacity: 0.38; transition: opacity var(--dur-long) var(--ease-out); }
.step.is-active { opacity: 1; }
.step--hero { min-height: calc(100dvh - var(--nav-h) - 44dvh); opacity: 1; align-content: start; padding-top: var(--space-lg); }
.step h1 { font-size: var(--text-display); }
.step h2 { font-size: var(--text-2xl); max-width: 16ch; }
.step p { max-width: 34rem; color: var(--color-muted); font-size: var(--text-lg); line-height: 1.5; }
.step--hero p { color: var(--color-ink); }
.step .note { font-size: var(--text-sm); color: var(--color-muted); max-width: 30rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
.hero__meta { font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0.01em; }

/* Métodos de verificación (paso 4): una lista, no tres tarjetas iguales */
.methods { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; gap: 0; max-width: 34rem; border-top: var(--rule-hair) solid var(--color-rule); }
.methods li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.methods b { font: 700 var(--text-base)/1.25 var(--font-display); color: var(--color-ink); letter-spacing: -0.01em; }

/* Escalera de la salida de emergencia (paso 6): la fricción hecha visible */
.ladder { display: flex; align-items: flex-end; gap: var(--space-sm); margin-top: var(--space-xs); height: 5.5rem; max-width: 22rem; }
.ladder__bar { flex: 1 1 0; min-width: 0; border-radius: var(--radius-sm) var(--radius-sm) 4px 4px; background: var(--color-amber);
  height: calc(var(--h) * 1%); min-height: 1.75rem; display: grid; align-content: end; justify-items: center; padding-bottom: 6px;
  font: 700 var(--text-xs)/1 var(--font-body); color: #11141a; }
.ladder__caption { font-size: var(--text-sm); color: var(--color-muted); max-width: 30rem; }

@media (min-width: 60rem) {
  .stack { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: var(--space-2xl); padding-top: 0; }
  .stack__stage { order: 0; height: 100dvh; padding-block: var(--space-lg); background: none; gap: var(--space-md); grid-template-rows: auto auto; align-content: center; }
  .screen { height: auto; max-height: calc(100dvh - 9rem); width: min(100%, 22rem); }
  .step { --step-min: clamp(80dvh, calc(var(--len, 4) * 16dvh), 190dvh); padding-block: var(--space-2xl); }
  .step--hero { min-height: calc(100dvh - var(--nav-h)); align-content: center; padding-top: var(--space-xl); }
}

/* ── Preguntas: una conversación, no una tabla de precios ───────────────── */
.faq { max-width: var(--page-max); margin: 0 auto; padding: var(--space-3xl) var(--page-gutter) var(--space-2xl);
  display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); }
.faq h2 { font-size: var(--text-2xl); max-width: 14ch; }
.faq__list { display: grid; border-top: var(--rule-hair) solid var(--color-rule); max-width: 46rem; }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { list-style: none; cursor: pointer; padding: var(--space-lg) 0; font: 700 var(--text-lg)/1.25 var(--font-display); letter-spacing: -0.015em;
  display: flex; justify-content: space-between; gap: var(--space-md); align-items: baseline; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-body); font-weight: 400; color: var(--color-muted); flex: none; transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 var(--space-lg); color: var(--color-muted); max-width: 40rem; }
@media (min-width: 60rem) { .faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: var(--space-2xl); } }

/* ── Footer (Ft5): una frase de cierre ──────────────────────────────────── */
.foot { max-width: var(--page-max); margin: 0 auto; padding: var(--space-3xl) var(--page-gutter) var(--space-xl); display: grid; gap: var(--space-xl); }
.foot__line { font: 700 clamp(2rem, 1rem + 5vw, 4.25rem)/1 var(--font-display); letter-spacing: -0.03em; max-width: 16ch; text-wrap: balance; }
.foot__line span { color: var(--color-mint-ink); }
.foot__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm) var(--space-lg);
  padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.foot__link { color: var(--color-muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.foot__link:hover { color: var(--color-ink); }

/* ── Política de privacidad ─────────────────────────────────────────────── */
.legal { max-width: 46rem; margin: 0 auto; padding: calc(var(--nav-h) + var(--space-2xl)) var(--page-gutter) var(--space-2xl); }
.legal h1 { font-size: clamp(2.2rem, 1.2rem + 4vw, 3.6rem); margin-bottom: var(--space-md); }
.legal .updated { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-xl); }
.legal .lead { font-size: var(--text-lg); line-height: 1.5; padding: var(--space-lg); border-left: 3px solid var(--color-mint); background: var(--color-paper-2); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-bottom: var(--space-xl); }
.legal h2 { font-size: var(--text-xl); margin: var(--space-2xl) 0 var(--space-sm); letter-spacing: -0.02em; }
.legal p, .legal li { color: color-mix(in oklch, var(--color-ink) 82%, var(--color-paper)); }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: var(--space-md); }
.legal ul { padding-left: 1.2rem; display: grid; gap: var(--space-xs); }
.legal a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal dl { display: grid; gap: 0; border-top: var(--rule-hair) solid var(--color-rule); margin: var(--space-md) 0 0; }
.legal dt, .legal dd { margin: 0; }
.legal dl > div { display: grid; gap: var(--space-2xs); padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.legal dt { font: 700 var(--text-base)/1.3 var(--font-display); letter-spacing: -0.01em; }
.legal dd { color: var(--color-muted); }
@media (min-width: 40rem) { .legal dl > div { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--space-lg); } }
mark.todo { background: #f0d777; color: #2e1e01; padding: 0 0.3em; border-radius: 4px; }

/* ── Movimiento reducido: el zoom se corta, el contenido no se mueve ───── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .step, .btn, .stage__chapters button::after { transition-duration: 1ms; }
}