/*
 * Monorean Quiz Solver: sistema de diseño, propuesta 7 (ver docs/design-tokens.md).
 * La de la 6 (organización de la 5 y piel de la 2: noche azulada, azul eléctrico, sombras suaves y neón con mesura)
 * con el duende de la familia Monorean: el genio de monorean.com/404 y cheatsheet.monorean.com en un cielo nocturno o
 * de día según el tema, que "concede" la respuesta en el hero; un trazo de rotulador hecho a mano y radios más amables.
 * Sin halos genéricos: el neón queda en el plan recomendado y en el contorno de la tarjeta de respuesta.
 * <html data-theme="light|dark"> (claro por defecto desde la 7.1.2), elegido con el selector de la cabecera y recordado en localStorage.
 * Todos los colores salen de los tokens; ningún componente lleva colores sueltos. Open Sans; mono solo en <kbd>.
 */

/* ---------- Tokens (valores de la propuesta 2) ---------- */
:root[data-theme="dark"] {
  --paper: #141b2d;
  --chrome-icon: #c7c7c7;
  --chrome-hover: rgb(227 227 227 / 10%);
  --chrome-press: rgb(227 227 227 / 18%);
  --chrome-menu: #282a2c;
  --chrome-text: #e3e3e3;
  --chrome-divider: #444746;
  --chrome-blue: #a8c7fa;
  --sheet: #1c2539;
  --sheet-line: #2c3750;
  --sheet-shadow: 0 1px 2px rgb(4 8 20 / 30%), 0 10px 26px rgb(4 8 20 / 32%);
  --grid-line: rgb(159 199 239 / 7%);
  --marker-cyan: rgb(95 174 218 / 42%);
  --marker-sky: rgb(59 141 224 / 35%);
  --sticker: #f2c9a5;
  --sticker-text: #3b1f05;
  --pen: #9cc7ef;
  --squiggle: #3a4762;
  --bg: var(--paper);
  --bg-raised: #172034;
  --surface: var(--sheet);
  --surface-2: #222c42;
  --border: var(--sheet-line);
  --border-strong: #3a4762;
  --text: #f2f8ff;
  --heading: #f2f8ff;
  --text-soft: #a9b8cf;
  --text-muted: #8a98b0;
  --brand: #0eb7e5;
  --brand-text: #0eb7e5;
  --action: #0869ca;
  --action-hover: #0b78e0;
  --action-text: #ffffff;
  --link: #5faeda;
  --link-hover: #8cc8ea;
  --neon: #5faeda;
  --glow: rgb(95 174 218 / 35%);
  --halo-1: rgb(8 105 202 / 38%);
  --halo-2: rgb(34 70 160 / 30%);
  --numeral: #2c3750;
  --navy: #253057;
  --success: #4cc38a;
  --warning: #e3b341;
  --danger: #f07a7a;
  --shadow: 0 1px 2px rgb(4 8 20 / 30%), 0 12px 30px rgb(4 8 20 / 35%);
  --kbd-bg: #222c42;
  --kbd-border: #3a4762;
  --header-bg: #000000;
  --sky-top: #0a1022;
  --sky-bottom: #101930;
  --hero-sky-top: #24345c;
  --hero-sky-bottom: #141b2d;
  --hero-sky-bottom-alpha: 0;
  --hero-sky-cloud: #26355a;
  --hero-sky-star: #c9dbf2;
  --sky-cloud: #1f2d4a;
  --star: #c9dbf2;
  --genie-ink: #0eb7e5;
  --genie-face: #f2f8ff;
  --genie-seat: #e8f1fb;
  --genie-cloud: #2a3d5c;
  --marker: var(--marker-cyan);
  --smoke-a: #bfeaf8;
  --smoke-b: #f2fbff;
  --smoke-alpha: .4;
  --answer-cloud: #eef5ff;
  --answer-cloud-label: #0a6585;
  --answer-cloud-text: #161616;
  --answer-marker: #a9dcf0;
  --answer-cloud-shadow: rgb(0 0 0 / 35%);
  --step-bg: #0869ca;
  --divider-cloud: #263049;
  color-scheme: dark;
}
:root, :root[data-theme="light"] {
  --paper: #faf7f1;
  /* Los grises de la barra de Chrome, para el botón de extensiones simulado. */
  --chrome-icon: #474747;
  --chrome-hover: rgb(31 31 31 / 8%);
  --chrome-press: rgb(31 31 31 / 16%);
  --chrome-menu: #ffffff;
  --chrome-text: #1f1f1f;
  --chrome-divider: #e3e3e3;
  --chrome-blue: #0b57d0;
  --sheet: #ffffff;
  --sheet-line: #e9e3d7;
  --sheet-shadow: 0 1px 2px rgb(70 55 30 / 7%), 0 10px 26px rgb(70 55 30 / 9%);
  --grid-line: rgb(0 62 126 / 6%);
  --marker-cyan: #bfe9f6;
  --marker-sky: #d6e6fb;
  --sticker: #ffe2c8;
  --sticker-text: #6e3500;
  --pen: #2a5fa8;
  --squiggle: #d9d0bf;
  --bg: var(--paper);
  --bg-raised: #f4efe5;
  --surface: var(--sheet);
  --surface-2: #f6f2ea;
  --border: var(--sheet-line);
  --border-strong: #d5ccbb;
  --text: #161616;
  --heading: #161616;
  --text-soft: #4a5263;
  --text-muted: #687180;
  --brand: #0a8ab5;
  --brand-text: #087294;
  --action: #025dad;
  --action-hover: #014b8c;
  --action-text: #ffffff;
  --link: #025dad;
  --link-hover: #014b8c;
  --neon: #0a8ab5;
  --glow: rgb(14 167 214 / 22%);
  --halo-1: rgb(14 167 214 / 12%);
  --halo-2: rgb(2 93 173 / 8%);
  --numeral: #e3e7ed;
  --navy: #253057;
  --success: #23864a;
  --warning: #8f6a00;
  --danger: #c03a3a;
  --shadow: 0 1px 2px rgb(22 22 22 / 5%), 0 14px 32px rgb(22 22 22 / 9%);
  --kbd-bg: #f4f6f9;
  --kbd-border: #cdd3dc;
  --header-bg: #ffffff;
  --sky-top: #2b93dc;
  --sky-bottom: #4aa8e6;
  --hero-sky-top: #a9d8f5;
  --hero-sky-bottom: #eef4f3;
  --hero-sky-bottom-alpha: .6;
  --hero-sky-cloud: #ffffff;
  --hero-sky-star: transparent;
  --sky-cloud: #ffffff;
  --star: transparent;
  --genie-ink: #003e7e;
  --genie-face: #ffffff;
  --genie-seat: #ffffff;
  --genie-cloud: #ffffff;
  --marker: var(--marker-cyan);
  --smoke-a: #9fdcf2;
  --smoke-b: #effaff;
  --smoke-alpha: .95;
  --answer-cloud: #ffffff;
  --answer-cloud-label: #087294;
  --answer-cloud-text: #161616;
  --answer-marker: #9fdcf1;
  --answer-cloud-shadow: rgb(0 62 126 / 16%);
  --step-bg: #003e7e;
  --divider-cloud: #e3eef8;
  color-scheme: light;
}
:root {
  --font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Caveat", "Segoe Print", cursive;
  --mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 16px;
  --wrap: 1160px;
  --read: 50rem;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand);
}

/* Protección: ninguna regla display debe anular el atributo hidden (estados de los controladores Stimulus). */
[hidden] { display: none !important; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  font: 400 16px/1.6 var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; width: 100%; max-width: var(--read); margin: 0 auto; padding: 3.5rem 1.25rem 5rem; }
main.main--wide { max-width: var(--wrap); }
main.main--medium { max-width: 64rem; }
main.main--landing { max-width: none; padding: 0; }

h1, h2, h3 { color: var(--heading); line-height: 1.15; margin: 0 0 .75rem; letter-spacing: -.02em; }
h1 { font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; }
h1, .display { text-wrap: balance; }
h2 { font-size: 1.35rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }
strong, b { font-weight: 700; color: var(--heading); }
small { font-size: .85rem; }
a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
code { font: 500 .85em var(--mono); }
hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }
::selection { background: color-mix(in srgb, var(--brand) 30%, transparent); }

.lead { font-size: 1.125rem; color: var(--text-soft); margin-top: 0; }
.muted { color: var(--text-muted); }
.ok { color: var(--success); }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.eyebrow { display: inline-block; margin-bottom: .6rem; font-size: .9rem; font-weight: 600; color: var(--brand-text); }

kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: .05em .45em;
  font: 500 .8em/1.6 var(--mono);
  text-align: center;
  color: var(--heading);
  background: var(--kbd-bg);
  border: 1px solid var(--kbd-border);
  border-bottom-width: 2px;
  border-radius: 6px;
  white-space: nowrap;
  vertical-align: .05em;
}

/* ---------- La firma: el recuadro de selección ---------- */
/* Borde discontinuo cian fino y cuatro asas: dos con ::before/::after del recuadro y dos con su hijo .sel__h. */
.sel, .sel-box { position: relative; border: 1.5px dashed var(--brand); border-radius: 3px; }
.sel { display: inline-block; padding: 0 .08em; margin: 0 -.02em; line-height: 1.05; }
.sel::before, .sel::after, .sel__h::before, .sel__h::after,
.sel-box::before, .sel-box::after {
  content: ""; position: absolute; width: 7px; height: 7px; background: var(--bg); border: 1.5px solid var(--brand); border-radius: 2px;
}
.sel::before, .sel-box::before { left: -4.5px; top: -4.5px; }
.sel::after, .sel-box::after { right: -4.5px; bottom: -4.5px; }
.sel__h::before { right: -4.5px; top: -4.5px; }
.sel__h::after { left: -4.5px; bottom: -4.5px; }
.sel__h { position: static; }

/* La tarjeta de respuesta, el contrapunto: contorno de neón de la propuesta 2 (sin brillo) y su sombra. */
.answer-card { position: relative; background: var(--surface); border: 1px solid var(--neon); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--neon), var(--shadow); }
.answer-card__label { display: block; font-size: .78rem; font-weight: 600; color: var(--brand-text); margin-bottom: .15rem; }
.answer-card__text { display: block; font-weight: 700; color: var(--heading); }

/* ---------- Marca: lockup en dos líneas ---------- */
.mqs-logo { display: block; height: 100%; width: auto; }
:root:not([data-theme="dark"]) .mqs-logo--dark, :root[data-theme="dark"] .mqs-logo--light { display: none; }
.brand { --logo-h: 26px; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; color: var(--heading); text-decoration: none; }
.brand:hover { color: var(--heading); }

/* ---------- Cabecera (no fija) ---------- */
.site-header { background: var(--header-bg); border-bottom: 1px solid var(--border); }
.site-header__inner { max-width: var(--wrap); margin: 0 auto; padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; }
.site-header .brand { margin-right: auto; }
.nav { display: flex; align-items: center; gap: 1.5rem; font-size: .93rem; }
.nav a { color: var(--text-soft); text-decoration: none; }
.nav a:hover, .nav a[aria-current=page] { color: var(--heading); }
.nav form { margin: 0; }
.nav button.link { color: var(--text-soft); text-decoration: none; font-size: .93rem; }
.nav button.link:hover { color: var(--heading); }

/* Sin barra de menú: el lockup pequeño a la izquierda y las acciones sueltas a la derecha. */
.topbar { display: flex; align-items: center; gap: 1rem; max-width: var(--wrap); margin: 0 auto; padding: 1.25rem 1.5rem; width: 100%; }
.topbar .brand { margin-right: auto; }
.topbar--landing { justify-content: flex-end; }
.topbar__actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; font-size: .92rem; }
.topbar__actions form { margin: 0; }
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .85rem; color: var(--text); background: var(--sheet); border: 1px solid var(--sheet-line); border-radius: 999px; text-decoration: none; box-shadow: var(--sheet-shadow); }
a.pill:hover { color: var(--heading); border-color: var(--border-strong); }
.pill a { font-weight: 700; }
.topbar__link { color: var(--text-soft); }
button.link.topbar__link { color: var(--text-soft); font-size: .92rem; }

/* Selector de tema: sol y luna. */
.theme-toggle {
  display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; flex: none;
  color: var(--text-soft); background: transparent; border: 1px solid var(--border); border-radius: 999px;
}
.theme-toggle:hover { color: var(--heading); background: var(--surface-2); border-color: var(--border-strong); box-shadow: none; }
.theme-toggle svg { width: 1rem; height: 1rem; }
:root[data-theme="dark"] .theme-toggle__moon, :root:not([data-theme="dark"]) .theme-toggle__sun { display: none; }

/* ---------- Pie ---------- */
.site-footer { background: var(--bg-raised); border-top: 1px solid var(--border); color: var(--text-muted); font-size: .9rem; }
.site-footer__inner { max-width: var(--wrap); margin: 0 auto; padding: 2.5rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.site-footer .brand { --logo-h: 24px; margin-right: auto; }
.site-footer .lockup__name { color: var(--heading); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.site-footer a { color: var(--text-soft); text-decoration: none; }
.site-footer a:hover { color: var(--heading); }
.site-footer__legal { flex-basis: 100%; margin: 0; font-size: .82rem; }
.site-footer__motto { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: var(--brand-text); }
.site-footer__motto sup { font-size: .7em; }

/* Cambio de tema (theme_controller): la página nueva se destapa con un círculo que sale del botón; sin el fundido por
   defecto de las View Transitions. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 1; }
.theme-switching, .theme-switching * { transition: none !important; }

/* ---------- Botones: los de la propuesta 2 (azul eléctrico; contorno de neón en hover) ---------- */
button, input[type=submit], .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1.2rem;
  font: 600 .95rem/1.3 var(--font);
  color: var(--action-text);
  background: var(--action);
  border: 1px solid var(--action);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .2s ease, color .15s ease;
}
/* Una etiqueta con el nombre de la marca va en un solo <span>: así no se separa en piezas del flex (con el gap entre
   ellas) y, si no cabe, se parte en líneas centradas en vez de salirse del botón. */
button > span, .button > span { min-width: 0; text-align: center; }
button:hover, input[type=submit]:hover, .button:hover {
  color: var(--action-text); background: var(--action-hover); border-color: var(--neon);
  box-shadow: 0 0 0 1px var(--neon), 0 0 18px var(--glow);
}
.button--big { padding: .85rem 1.55rem; font-size: 1.05rem; }
.button--ghost { color: var(--heading); background: transparent; border-color: var(--border-strong); }
.button--ghost:hover { color: var(--heading); background: var(--surface-2); border-color: var(--border-strong); box-shadow: none; }
button.link, .button.link {
  background: none; border: 0; padding: 0; color: var(--link); font-weight: 400; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px; box-shadow: none;
}
button.link:hover { background: none; color: var(--link-hover); box-shadow: none; }
.button--danger { color: var(--danger); background: transparent; border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.button--danger:hover { color: #fff; background: var(--danger); border-color: var(--danger); box-shadow: none; }
button:disabled, input[type=submit]:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
form.button_to { display: inline; }

/* ---------- Formularios ---------- */
input[type=email], input[type=text], input[type=search], input[type=date], select {
  width: 100%;
  max-width: 30rem;
  padding: .6rem .75rem;
  font: 400 1rem var(--font);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder { color: var(--text-muted); }
input:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
label { color: var(--heading); font-weight: 600; font-size: .95rem; }
.email-form label { display: block; margin-bottom: .4rem; }
.email-form p { margin: .9rem 0 0; }

/* ---------- Avisos ---------- */
.notice, .alert, .error { padding: .65rem .9rem; border-radius: var(--radius); border: 1px solid; font-size: .95rem; }
.notice { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.alert, .error { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
/* Avisos de una acción (flash, en el layout): un toast pequeño, centrado bajo la cabecera y flotando sobre la página,
   como una hoja de papel con un punto de color; el de éxito se va solo (toast_controller). */
.toasts { position: fixed; z-index: 50; left: 50%; top: 4.6rem; transform: translateX(-50%); display: grid; justify-items: center; gap: .5rem; width: max-content; max-width: calc(100vw - 2rem); pointer-events: none; }
.toast { display: flex; align-items: center; gap: .6rem; padding: .5rem .5rem .5rem .85rem; border: 1px solid var(--sheet-line); border-radius: 999px;
  background: var(--sheet); box-shadow: var(--sheet-shadow); color: var(--text); font-size: .88rem; pointer-events: auto;
  animation: toast-in .35s cubic-bezier(.2, .8, .3, 1) both; }
.toast.is-leaving { animation: toast-out .3s ease-in both; }
.toast__dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--success); }
.toast--alert .toast__dot { background: var(--danger); }
.toast__text { margin: 0; line-height: 1.35; }
.toast__close { all: unset; flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; color: var(--text-muted); cursor: pointer; }
.toast__close:hover { background: var(--surface-2); color: var(--text); }
.toast__close:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.toast__close svg { width: .7rem; height: .7rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.is-leaving { animation: none; } }
p.alert, p.notice { margin-bottom: 1.25rem; }

/* ---------- Tarjetas ---------- */
.card { background: var(--sheet); border: 1px solid var(--sheet-line); border-radius: var(--radius-lg); box-shadow: var(--sheet-shadow); padding: 1.35rem 1.5rem; margin: 1.25rem 0; }
.card h2 { font-size: 1.1rem; margin: 0 0 .9rem; }
.card > :last-child { margin-bottom: 0; }
.offer { border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon), 0 0 24px var(--glow); }
.offer__price { font-size: 1.5rem; margin: 0 0 .5rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.badge {
  display: inline-block; padding: .08rem .5rem; font-size: .72rem; font-weight: 600; line-height: 1.5;
  color: var(--brand-text); background: color-mix(in srgb, var(--brand) 12%, transparent); border-radius: 999px; vertical-align: middle;
}

/* ---------- Estados ---------- */
.state {
  display: inline-flex; align-items: center; gap: .35rem; padding: 0 .5rem;
  font-size: .82rem; font-weight: 600; line-height: 1.7; white-space: nowrap;
  color: var(--text-soft); background: var(--surface-2); border-radius: 999px;
}
.state--renewing, .state--payment-succeeded, .state--run-succeeded, .state--item-succeeded { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.state--due_soon, .state--ending, .state--payment-review, .state--payment-pending, .state--run-queued, .state--run-running,
.state--run-partial, .state--item-pending { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.state--overdue, .state--past_due, .state--payment-failed, .state--run-failed, .state--item-declined, .state--item-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.state--payment-expired, .state--none, .state--run-skipped, .state--item-expired, .state--item-skipped { color: var(--text-muted); }

/* ---------- Pasos ---------- */
.howto { padding-left: 1.4rem; }
.howto li { margin-bottom: .65rem; padding-left: .25rem; }
.howto li::marker { font-weight: 600; color: var(--brand-text); }
.tutorial-title { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
/* Navegadores compatibles (shared/_supported_browsers): una línea en pequeño o una lista con enlaces. */
.supported-browsers { margin: .45rem 0 0; color: var(--text-muted); }
.browser-list { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: .25rem 0 1rem; padding: 0; list-style: none; }
.browser-list a { display: inline-block; padding: .3rem .75rem; border: 1px solid var(--border-strong); border-radius: 999px; text-decoration: none; font-size: .92rem; }
.browser-list a:hover { border-color: var(--brand); }
.install-recheck { display: block; margin-top: .4rem; font-size: .88rem; }
.install-before__link { display: inline-block; margin: .4rem 0 0; padding: .35rem .9rem; font-size: .9rem; }
/* «Fija el icono» (shared/_pin_hint): una barra de navegador simulada que señala el puzle (1) y la chincheta (2). */
/* Flecha a mano desde el botón ① del paso 1 hasta el botón de extensiones del navegador (shared/_pin_arrow): un SVG fijo
   del tamaño de la ventana; la curva, la punta y el sitio de la frase los calcula pin_arrow_controller. */
.pin-arrow { position: fixed; z-index: 40; inset: 0; pointer-events: none; }
.pin-arrow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pin-arrow__line { fill: none; stroke: var(--brand); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.pin-arrow__text { position: absolute; width: 13rem; margin: 0; font: 600 1.35rem/1.15 var(--font-hand); color: var(--brand-text); transform: rotate(-3deg);
  text-shadow: 0 0 6px var(--paper), 0 0 2px var(--paper); }
/* El botón de extensiones de Chrome: puzle de contorno gris en un botón redondo, con el gris claro de su hover. */
.puzzle-icon { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin: 0 .1rem; vertical-align: -.3em; border-radius: 50%;
  color: var(--chrome-icon); background: var(--chrome-hover); }
.puzzle-icon svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
@media (max-width: 640px) { .pin-arrow { display: none; } }
.pin-hint__ref { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--brand); color: #ffffff; font-size: .7rem; font-weight: 700; line-height: 1; vertical-align: .1em; }
.pin-hint { --pin-cycle: 8s; position: relative; max-width: 22rem; margin: .7rem 0 .2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; font-size: .82rem; }
.pin-hint__bar { display: flex; align-items: center; gap: .35rem; padding: .45rem .55rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.pin-hint__url { flex: 1; height: 1.5rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.pin-hint__btn { position: relative; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; color: var(--text-soft); }
.pin-hint__btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.pin-hint__btn--target { color: var(--brand); box-shadow: 0 0 0 2px var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.pin-hint__btn .pin-hint__ref { position: absolute; top: -.45rem; right: -.5rem; width: 1rem; height: 1rem; font-size: .6rem; }
/* El menú de extensiones de Chrome: panel con sus grises, título, la fila de la extensión y "Manage extensions". */
.pin-hint__menu { display: grid; margin: .4rem .55rem .6rem auto; width: 88%; padding: .45rem 0 .3rem; border-radius: 8px; color: var(--chrome-text);
  background: var(--chrome-menu); box-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%); font-family: system-ui, "Segoe UI", Roboto, sans-serif; }
.pin-hint__menu-title { padding: .1rem .8rem .45rem; font-weight: 500; color: var(--chrome-text); font-size: .82rem; }
.pin-hint__item { display: flex; align-items: center; gap: .55rem; padding: .25rem .4rem .25rem .8rem; }
.pin-hint__btn--more { width: 1.4rem; height: 1.4rem; color: var(--chrome-icon); }
.pin-hint__btn--more svg { width: .95rem; height: .95rem; }
.pin-hint__menu-foot { display: flex; align-items: center; gap: .6rem; margin-top: .3rem; padding: .45rem .8rem .25rem; border-top: 1px solid var(--chrome-divider); font-size: .78rem; color: var(--chrome-text); }
.pin-hint__menu-foot svg { width: 1rem; height: 1rem; fill: var(--chrome-icon); }
.pin-hint__icon { display: block; flex: none; width: 1.1rem; height: 1.1rem; }
.pin-hint__name { flex: 1; min-width: 0; font-size: .78rem; color: var(--chrome-text); }
.pin-hint__btn--pin { width: 1.5rem; height: 1.5rem; color: var(--chrome-icon); }
.pin-hint__keep { position: absolute; inset: 0; margin: auto; }
.pin-hint__btn .pin-hint__keep--on { opacity: 0; fill: var(--chrome-blue); animation: pin-keep-on var(--pin-cycle) ease infinite; }
.pin-hint__btn--pin .pin-hint__keep:not(.pin-hint__keep--on) { animation: pin-keep-off var(--pin-cycle) ease infinite; }
/* La animación (bucle de 8 s): el cursor va al puzle y lo pulsa (10–25 %), se abre el menú (27 %), el cursor pulsa la
   chincheta (35–50 %), que se rellena, el icono de la extensión aparece fijado en la barra (55 %) y el menú se cierra
   (66 %); quieto, y vuelta. */
.pin-hint__pinned { display: inline-grid; place-items: center; width: 0; overflow: hidden; opacity: 0; animation: pin-pinned var(--pin-cycle) ease infinite; }
.pin-hint__pinned .pin-hint__icon { width: 1rem; height: 1rem; }
.pin-hint__menu { transform-origin: top right; animation: pin-menu var(--pin-cycle) ease infinite; }
/* El puzle, como el botón de Chrome: contorno gris, sin color de marca; al pulsarlo, el círculo gris de su hover. */
.pin-hint__btn--puzzle { color: var(--chrome-icon); box-shadow: none; background: transparent; animation: pin-press-1 var(--pin-cycle) ease infinite; }
.pin-hint__btn--pin { animation: pin-press-2 var(--pin-cycle) ease infinite; }
.pin-hint__cursor { position: absolute; z-index: 2; width: .85rem; height: auto; fill: #161616; stroke: #ffffff; stroke-width: 1.3; stroke-linejoin: round;
  pointer-events: none; left: 40%; top: 70%; animation: pin-cursor var(--pin-cycle) ease-in-out infinite; }
@keyframes pin-cursor {
  0%, 8% { left: 40%; top: 72%; opacity: 0; }
  10% { left: 40%; top: 72%; opacity: 1; }
  23%, 28% { left: 79%; top: 14%; opacity: 1; }
  47%, 52% { left: 82.5%; top: 58%; opacity: 1; }
  62% { left: 72%; top: 14%; opacity: 1; }
  70%, 100% { left: 72%; top: 14%; opacity: 0; }
}
@keyframes pin-press-1 {
  0%, 20% { transform: none; background: transparent; }
  23% { background: var(--chrome-hover); }
  25.5% { transform: scale(.9); background: var(--chrome-press); }
  27%, 64% { transform: none; background: var(--chrome-hover); }
  68%, 100% { background: transparent; }
}
@keyframes pin-press-2 {
  0%, 44% { transform: none; background: transparent; }
  47% { background: var(--chrome-hover); }
  50% { transform: scale(.9); background: var(--chrome-press); }
  52%, 62% { transform: none; background: var(--chrome-hover); }
  66%, 100% { background: transparent; }
}
@keyframes pin-keep-on { 0%, 50% { opacity: 0; } 52%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes pin-keep-off { 0%, 50% { opacity: 1; } 52%, 92% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes pin-menu {
  0%, 26% { opacity: 0; transform: translateY(-4px) scale(.97); }
  29%, 64% { opacity: 1; transform: none; }
  68%, 100% { opacity: 0; transform: translateY(-4px) scale(.97); }
}
@keyframes pin-pinned { 0%, 53% { width: 0; opacity: 0; } 57%, 92% { width: 1.4rem; opacity: 1; } 96%, 100% { width: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pin-hint__cursor, .pin-hint__pinned, .pin-hint__menu, .pin-hint__btn--puzzle, .pin-hint__btn--pin, .pin-hint__keep { animation: none !important; }
  .pin-hint__cursor { display: none; }
}
.install-step--important { background: color-mix(in srgb, var(--brand) 9%, transparent); border-left: 2px solid var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: .4rem .65rem; }
.open-popup-hint--highlight { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: var(--radius-sm); padding: .5rem .75rem; }
.screen h1 { margin-bottom: .5rem; }
.screen .lead { margin-bottom: 1.5rem; }

/* ---------- Cuenta: cabecera y pestañas ---------- */
.account-head { margin-bottom: 1.75rem; }
.account-head p { margin: 0 0 .75rem; font-size: .9rem; color: var(--text-soft); }
.tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--border); }
.tabs__item { padding: .55rem .85rem; color: var(--text-soft); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: .95rem; }
.tabs__item:hover { color: var(--heading); }
.tabs__item[aria-current=page] { color: var(--heading); border-bottom-color: var(--brand); font-weight: 600; }

/* ---------- Planes ---------- */
.billing-toggle { display: inline-flex; padding: 3px; margin: .5rem 0 1.5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }
.billing-toggle__item { padding: .35rem 1rem; border-radius: 999px; color: var(--text-soft); text-decoration: none; font-size: .9rem; font-weight: 600; }
.billing-toggle__item:hover { color: var(--heading); }
.billing-toggle__item[aria-current=page] { background: var(--surface); color: var(--heading); box-shadow: 0 0 0 1px var(--border-strong); }
.billing-toggle__item .badge { margin-left: .3rem; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.plans .plan { margin: 0; display: flex; flex-direction: column; padding: 1.4rem; }
.plan h3 { margin: 0 0 1rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.plan--recommended { border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon), var(--sheet-shadow); }
/* La pegatina pastel del plan recomendado. */
.plan--recommended h3 .badge { color: var(--sticker-text); background: var(--sticker); border-radius: 3px; transform: rotate(2deg); font-size: .74rem; padding: .12rem .5rem; }
.plan__price { font-size: .95rem; color: var(--text-muted); margin: 0; }
.plan__price strong { display: block; font-size: 1.9rem; line-height: 1.15; font-weight: 700; letter-spacing: -.03em; }
.plan__equivalent { margin: .15rem 0 0; }
.plan__features { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; flex: 1; font-size: .95rem; color: var(--text-soft); }
.plan__features li { padding: .4rem 0 .4rem 1.6rem; position: relative; border-top: 1px solid var(--border); }
.plan__features li::before {
  content: ""; position: absolute; left: .1rem; top: .85rem; width: .7rem; height: .4rem;
  border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg);
}
.plan .button, .plan button { width: 100%; }
.plan__current { margin: 0; font-size: .9rem; font-weight: 600; color: var(--success); text-align: center; padding: .6rem 0; }
.plan__current strong { color: inherit; }

/* ---------- Tablas ---------- */
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: .55rem .6rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: .85rem; font-weight: 600; color: var(--text-muted); }
.table-scroll { overflow-x: auto; max-width: 100%; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; margin: 0; }
/* Actividad (cuenta y admin): gráficas de uso (shared/_usage_chart) e historial de preguntas (shared/_answer_log). */
.usage-chart { margin: 1.25rem 0 0; }
.usage-chart__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .5rem; }
.usage-chart__title { font-weight: 600; color: var(--heading); }
.usage-chart__summary { color: var(--text-muted); font-size: .85rem; }
/* row-reverse: si las barras no caben, la gráfica se desplaza y arranca en el final (lo más reciente); si caben, el
   margen automático la deja a la izquierda. */
.usage-chart__scroll { display: flex; flex-direction: row-reverse; overflow-x: auto; scrollbar-width: thin; }
.usage-chart__body { flex: none; width: 100%; margin-right: auto; }
.usage-chart--month .usage-chart__body { width: calc(var(--bars) * 2.75rem); min-width: 2.75rem; }
.usage-chart__bars { display: block; width: 100%; height: 5.5rem; border-bottom: 1px solid var(--border-strong); overflow: visible; }
.usage-chart__bar rect:not(.usage-chart__hit) { fill: color-mix(in srgb, var(--brand) 55%, transparent); }
.usage-chart__bar.is-current rect:not(.usage-chart__hit) { fill: var(--brand); }
.usage-chart__bar:hover rect:not(.usage-chart__hit) { fill: var(--brand-text); }
.usage-chart__hit { fill: transparent; }
.usage-chart__months { display: grid; grid-template-columns: repeat(var(--bars), 1fr); margin-top: .3rem; }
.usage-chart__months span, .usage-chart__ends { color: var(--text-muted); font-size: .75rem; }
.usage-chart__months span { text-align: center; white-space: nowrap; }
.usage-chart__ends { display: flex; justify-content: space-between; margin-top: .3rem; }
.usage-chart + p { margin-top: 1.1rem; }
.answer-log__day + .answer-log__day { margin-top: 1.25rem; }
.answer-log__date { margin: 1rem 0 .5rem; font-size: .95rem; }
.answer-log__date .muted { font-weight: 400; }
.answer-log { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.answer-log__entry { padding: .7rem 0; border-bottom: 1px solid var(--border); }
.answer-log__entry p { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.answer-log__meta { color: var(--text-muted); font-size: .8rem; }
.answer-log__question { margin-top: .2rem !important; color: var(--text-soft); }
.answer-log__answer { margin-top: .3rem !important; color: var(--heading); font-weight: 700; }
.answer-log__pages { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.answer-log__pages a:only-child { margin-left: auto; }
.answer-log__clear { margin-top: 1.5rem; }
/* Actividad global del admin: llegada en tiempo real. */
.admin-activity__recent { margin: 0; }
.admin-activity__status { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: 0 0 .75rem; font-size: .9rem; }
.admin-activity__live { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--brand-text); }
.admin-activity__live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand); animation: live-pulse 1.8s ease-in-out infinite; }
#admin-activity-entries:has(li) + .admin-activity__empty { display: none; }
.admin-activity__entry.is-fresh { animation: entry-arrive 2.4s ease-out; }
@keyframes live-pulse { 50% { opacity: .35; } }
@keyframes entry-arrive { from { background: color-mix(in srgb, var(--brand) 18%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .admin-activity__live::before, .admin-activity__entry.is-fresh { animation: none; } }
.answer-log__clear summary { cursor: pointer; color: var(--text-muted); font-size: .9rem; }
.answer-log__clear p { margin: .6rem 0; }
.facts dt { color: var(--text-muted); font-size: .9rem; }
.facts dd { margin: 0; }

/* ---------- Pago con tarjeta (CardCorp) ---------- */
/* Sus iframes heredan el esquema de color: siempre en claro, sobre blanco, para que se lea lo que se escribe. */
.wpwl-container, .wpwl-container iframe, .wpwl-form { color-scheme: light; }
.wpwl-container { color: #1a2130; background: #ffffff; border-radius: var(--radius); padding: 1rem; }

.prose { max-width: 68ch; }

/* =====================================================================
   Administración: la densidad original, solo con los tokens y sin efectos.
   ===================================================================== */
.is-admin main { padding-top: 2rem; }
.is-admin h1 { font-size: 1.6rem; }
.is-admin .card { padding: 1rem 1.25rem; margin: 1rem 0; }
.is-admin th, .is-admin td { padding: .4rem; }
.admin-table td, .admin-table th { white-space: nowrap; }
.admin-table tr:hover td { background: var(--surface); }
.admin-table td.wrap { white-space: normal; min-width: 14rem; }
.admin-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table--compact td, .admin-table--compact th { white-space: normal; vertical-align: top; font-size: .92rem; }
.admin-table--compact td.num, .admin-table--compact th.num { white-space: nowrap; text-align: right; }
.admin-table--compact .line { display: block; }
.admin-table--compact .wrap-any { overflow-wrap: anywhere; min-width: 9rem; }
.admin-table--compact td.nowrap { white-space: nowrap; }
.admin-table--compact .state { white-space: nowrap; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat { display: flex; flex-direction: column; margin: 0; color: inherit; text-decoration: none; }
.stat:hover { color: inherit; border-color: var(--border-strong); }
.stat__value { font-size: 1.75rem; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.stat__label { color: var(--text-muted); font-size: .9rem; }
.stat--alert { border-color: var(--danger); }
.admin-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.admin-filters input[type=search] { padding: .5rem; flex: 1; min-width: 12rem; max-width: none; }
.admin-filters select { padding: .45rem; width: auto; }
.admin-filters input[type=submit], .admin-filters button { padding: .5rem 1rem; }
.admin-filters__date { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-muted); font-weight: 400; }
.admin-filters__date input { padding: .4rem; width: auto; }
.filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; gap: .4rem; align-items: center; border: 1px solid var(--border-strong); border-radius: 999px; padding: .1rem .6rem; }
.chip__remove { text-decoration: none; font-weight: 700; }
.transactions-summary { font-size: 1.05rem; }
.pager { display: flex; gap: 1rem; }
.billing-alert { border: 1px solid var(--danger); border-left-width: 3px; border-radius: var(--radius-sm); padding: .5rem .75rem; font-weight: 700; color: var(--danger); }
.test-clock-banner { border: 1px dashed var(--warning); border-radius: var(--radius-sm); padding: .5rem .75rem; font-weight: 700; color: var(--warning); margin-bottom: 1rem; }
.dev-tools { border-style: dashed; }

/* =====================================================================
   Portada (landing): composición editorial
   ===================================================================== */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 5rem 0; }
.section--tight { padding: 2.5rem 0 4rem; }
.section--raised { background: var(--bg-raised); }
.display { font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin-bottom: 1rem; }
.kicker-line { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; font-size: .9rem; font-weight: 600; color: var(--text-muted); }
.kicker-line::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Hero asimétrico: texto a la izquierda y, a la derecha, el escenario del genio. */
/* overflow-x: clip: la tarjeta de la pregunta entra deslizándose desde la derecha y el cielo se sale de la columna;
   sin recorte, en móvil la página tendría scroll horizontal. clip (no hidden) no crea un contenedor de scroll. */
.hero { position: relative; padding: 1rem 0 3rem; overflow-x: clip; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 11.5fr); gap: 3rem; align-items: center; }

/* El título de la portada es el lockup grande: logo de Monorean y debajo "QUIZ SOLVER", girado y con rotulador. */
.lockup { display: inline-flex; flex-direction: column; align-items: flex-start; margin: 0; color: var(--heading); text-decoration: none; }
.lockup:hover { color: var(--heading); }
.lockup--large { margin: 0 0 2.25rem; --logo-h: 78px; }
/* La versión pequeña (cabecera y pie): el mismo trazo, algo más contenido para que se lea a ese tamaño. */
.lockup--small { --logo-h: 26px; }
.lockup--small .lockup__name { margin-top: 2px; letter-spacing: .06em; transform: rotate(-3deg); }
.lockup__logo { display: block; height: var(--logo-h); }
.lockup__name {
  position: relative; isolation: isolate; display: inline-block; margin: .1rem 0 0 calc(var(--logo-h) * 1.24);
  font-size: calc(var(--logo-h) * .56); font-weight: 800; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  color: var(--heading); transform: rotate(-3.5deg); transform-origin: 0 50%;
}
.lockup__name::after {
  content: ""; position: absolute; z-index: -1; left: -.25em; right: -.3em; bottom: -.08em; height: .62em;
  background: var(--marker-cyan); transform: rotate(1deg);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15c40-6 92-9 148-8 52 1 98 3 145-1 3 0 3 4 0 5-48 6-96 4-146 4-52 0-104 3-145 8-4 1-6-7-2-8z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* El lema, debajo: grande pero por debajo del lockup. */
.tagline {
  margin: .4rem 0 1.25rem; max-width: 15em; font-size: clamp(1.75rem, 2.7vw, 2.4rem); font-weight: 800; line-height: 1.12;
  letter-spacing: -.03em; color: var(--heading); text-wrap: balance;
}
.tagline .sel { margin: 0 .02em 0 .04em; }
/* Detalle hecho a mano: trazo de rotulador bajo una palabra, como el de cheatsheet.monorean.com. */
.marker { position: relative; isolation: isolate; white-space: nowrap; }
.marker::after {
  content: ""; position: absolute; z-index: -1; left: -.12em; right: -.1em; bottom: .02em; height: .42em;
  background: var(--marker); transform: rotate(-1.2deg);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15c40-6 92-9 148-8 52 1 98 3 145-1 3 0 3 4 0 5-48 6-96 4-146 4-52 0-104 3-145 8-4 1-6-7-2-8z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hero__sub { max-width: 31rem; margin: 0 0 2.25rem; font-size: 1.15rem; color: var(--text-soft); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.hero__meta { font-size: .9rem; color: var(--text-muted); margin: 0; }
.hero__shortcut { margin: 1.5rem 0 0; font-size: .95rem; line-height: 1.9; color: var(--text-soft); }
.hero__shortcut em { font-style: normal; font-weight: 600; color: var(--text); }
/* El interruptor de Always on de la extensión, encendido (como .switch .track en su brand.css), en línea con el texto. */
.toggle-icon {
  display: inline-block; position: relative; width: 1.75em; height: 1em; margin: 0; padding: 0; border: 0; border-radius: 999px;
  font: inherit; vertical-align: -.15em; cursor: pointer; background: var(--border-strong); transition: background-color .15s;
}
.toggle-icon::after {
  content: ""; position: absolute; top: .12em; left: .12em; width: .76em; height: .76em; border-radius: 50%; background: #ffffff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%); transition: transform .18s ease;
}
.toggle-icon[aria-checked="true"] { background: var(--brand); }
.toggle-icon[aria-checked="true"]::after { transform: translateX(.75em); }
.toggle-icon:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.toggle-icon--static { cursor: default; }
/* Mi cuenta: la línea de Always on, separada de la del atajo. */
.account-shortcut__always { display: block; margin-top: .7rem; }
/* La broma de Always on: al encenderlo, un trazo de rotulador tacha el atajo (se dibuja de izquierda a derecha, también
   si el texto ocupa dos líneas) y el texto se apaga. */
.always-on-demo__struck {
  background: linear-gradient(var(--brand), var(--brand)) no-repeat 0 58% / 0 2px;
  transition: background-size .5s ease, color .3s, opacity .3s;
}
.always-on-demo:has(.toggle-icon[aria-checked="true"]) .always-on-demo__struck { background-size: 100% 2px; color: var(--text-muted); }
.always-on-demo:has(.toggle-icon[aria-checked="true"]) .always-on-demo__struck kbd { opacity: .55; }

/* El escenario del hero (7.1.4): una ilustración que escala entera (container queries). El genio, en primer plano,
   grande, abajo a la izquierda; arriba a la derecha, el cielo con la tarjeta de la pregunta. De su mano sale el humo,
   que baja, hace un remolino y sube hasta convertirse en la nube blanca de la respuesta, justo debajo de la pregunta.
   Un ciclo de 8 s por pregunta (--cycle), sin parar; hero_stage_controller cambia la pregunta en cada vuelta. Todos
   los keyframes van en % del mismo ciclo y animan solo transform y opacity:
     0-10,6 %   entra la tarjeta de la pregunta desde la derecha (ease-out, con un pequeño asentamiento)
     10,6-18 %  en cuanto llega, se dibuja el recuadro de selección, con el genio aún dormido
     18,8-25 %  ya seleccionada, el genio se despierta (respingo, abre los ojos con el "pop" y parpadea)
     26-40 %    inclina la cabeza y hace dos veces el gesto de abracadabra (brazos desde el hombro, muñecas)
     40-54 %    el humo crece desde su mano a lo largo del trayecto (bocanadas con retardo; chispas que destellan)
     54-62 %    el humo se convierte en la nube y dentro aparece la respuesta, con la cara pilla; el genio asiente
     84-93 %    la pregunta sale hacia la izquierda, el humo y la nube se disipan y el genio vuelve a dormirse
   Con prefers-reduced-motion se ve el estado de reposo de cada pieza, que es el fotograma final de la primera
   pregunta: despierto, con el humo, la pregunta marcada y la respuesta en su nube. */
.stage { --cycle: 8s; --t0: 0s; position: relative; width: 100%; aspect-ratio: 10 / 9.2; container-type: inline-size; }
.stage.is-paused, .stage.is-paused * { animation-play-state: paused !important; }
/* El cuadro de la pregunta es un cielo que se funde con el papel: sin marco ni sombra, con los bordes difuminados por
   una máscara radial estática. La tarjeta de la pregunta flota en él, sin máscara. */
.demo-sheet { position: absolute; right: 0; top: 0; width: 62%; z-index: 1; }
.demo { position: relative; aspect-ratio: 4 / 3.25; }
/* El cielo: un área amplia de la columna derecha (de la altura del genio hasta encima de la tarjeta), con forma de
   acuarela; la máscara está dentro del SVG y es estática. Las nubes van aparte, sin deformar. */
.hero-sky { position: absolute; left: -16%; right: -5%; top: -10%; bottom: -46%; width: auto; height: auto; overflow: visible; pointer-events: none; }
.hero-sky .hero-sky__top { stop-color: var(--hero-sky-top); }
.hero-sky .hero-sky__bottom { stop-color: var(--hero-sky-bottom); stop-opacity: var(--hero-sky-bottom-alpha); }
.hero-sky__star { fill: var(--hero-sky-star); }
.hero-sky__clouds { position: absolute; left: -16%; top: -10%; width: 121%; height: auto; aspect-ratio: 1; overflow: visible; pointer-events: none; }
.hero-sky__cloud { fill: var(--hero-sky-cloud); }
.demo__page {
  position: absolute; right: 3cqw; top: 3cqw; width: 68%; padding: 2.4cqw 2.6cqw 2.8cqw;
  background: var(--surface); border: 1px solid var(--border); border-radius: 1.8cqw; box-shadow: var(--shadow);
  animation: q-card var(--cycle) var(--t0) infinite;
}
/* La pregunta ocupa siempre dos líneas, para que la tarjeta mida lo mismo con todas. */
.demo__q { margin: 0 0 1.8cqw; min-height: 2.7em; font-size: 2.55cqw; font-weight: 600; color: var(--heading); line-height: 1.35; }
.demo__opts { display: grid; gap: 1cqw; margin: 0; padding: 0; list-style: none; font-size: 2.2cqw; color: var(--text-soft); }
.demo__opts li { padding: .7cqw 1.4cqw; border: 1px solid var(--border); border-radius: 1.1cqw; white-space: nowrap; }
.demo__select { position: absolute; left: 1.3cqw; top: 1.3cqw; right: 1.3cqw; bottom: 1.3cqw; transform-origin: 0 0; animation: demo-select var(--cycle) ease-in-out var(--t0) infinite; }
/* Rotulador sobre la respuesta concedida (un pseudoelemento que crece con scaleX). */
/* Trazo de rotulador pastel bajo la respuesta, del ancho del texto y con los extremos irregulares, como el de
   "superintelligence" (la misma máscara); se dibuja de izquierda a derecha. */
.answer-card__hl { position: relative; display: inline-block; isolation: isolate; }
.answer-card__hl::before {
  content: ""; position: absolute; z-index: -1; left: -.04em; right: -.04em; bottom: -.06em; height: .34em; background: var(--answer-marker);
  transform: rotate(-1.2deg); transform-origin: 0 50%; animation: answer-mark var(--cycle) ease-in-out var(--t0) infinite;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15c40-6 92-9 148-8 52 1 98 3 145-1 3 0 3 4 0 5-48 6-96 4-146 4-52 0-104 3-145 8-4 1-6-7-2-8z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* El genio manda: primer plano, el 72 % del alto del escenario. Sus nubes, fuera del cielo, en cielo pastel. */
.stage__genie {
  position: absolute; left: -1%; bottom: -2%; height: 72%; width: auto; z-index: 3; overflow: visible;
  animation: genie-lift var(--cycle) ease-in-out var(--t0) infinite;
}
:root:not([data-theme="dark"]) .stage__genie {
  --genie-seat: #d4e8f8; --genie-cloud: #cfe4f7; filter: drop-shadow(0 1px 1.5px rgb(0 62 126 / 12%));
}

/* Las piezas del genio (GenieRigHelper). Los orígenes van en coordenadas de su viewBox (336,8 x 410,8). */
.mqs-rig * { transform-box: view-box; }
.mqs-rig__cloud { transform-box: fill-box; animation: rig-cloud 7s ease-in-out infinite alternate; }
.mqs-rig__c1 { animation-duration: 5.5s; animation-delay: -2s; }
.mqs-rig__c2 { animation-duration: 8s; animation-delay: -4s; }
.mqs-rig__c3 { animation-duration: 6.5s; animation-delay: -1s; }
.mqs-rig__c4 { animation-duration: 5s; animation-delay: -3s; }
.mqs-rig__float { animation: rig-float 3s ease-in-out infinite; }
.mqs-rig__torso { transform-origin: 202px 208px; animation: rig-breathe 3s ease-in-out infinite; }
.mqs-rig__tail { transform-origin: 202px 250px; animation: rig-tail 6s ease-in-out infinite; }
.mqs-rig__head { transform-origin: 202px 150px; animation: rig-head var(--cycle) ease-in-out var(--t0) infinite; }
.mqs-rig__closed { opacity: 0; animation: rig-face-closed var(--cycle) step-end var(--t0) infinite; }
.mqs-rig__open { animation: rig-face-open var(--cycle) step-end var(--t0) infinite; }
/* La cara pilla: al terminar de marcar la pregunta, mientras se ve la respuesta, hasta que la pregunta sale. Sin
   animación (prefers-reduced-motion) se ve, porque el estado quieto es el final, con la respuesta. */
.mqs-rig__pillo { animation: rig-face-pillo var(--cycle) step-end var(--t0) infinite; }
.mqs-rig__eye { transform-box: fill-box; transform-origin: center; animation: rig-eyes var(--cycle) ease-out var(--t0) infinite; }
/* Abracadabra: los brazos giran sobre el hombro y la mano, además, sobre la muñeca. */
.mqs-rig__arm--l { transform-origin: 186px 165px; animation: rig-arm-l var(--cycle) ease-in-out var(--t0) infinite; }
.mqs-rig__arm--r { transform-origin: 216px 165px; animation: rig-arm-r var(--cycle) ease-in-out var(--t0) infinite; }
.mqs-rig__hand--l { transform-origin: 133px 203px; animation: rig-hand-l var(--cycle) ease-in-out var(--t0) infinite; }
.mqs-rig__hand--r { transform-origin: 269px 203px; animation: rig-hand-r var(--cycle) ease-in-out var(--t0) infinite; }

/* El humo mágico, de la mano del genio a la nube de la respuesta: bocanadas difuminadas, cada vez más anchas, de cian
   pastel a blanco (de cian a azul cielo de noche, menos denso). Cada bocanada crece con su retardo (--d), así que el humo
   avanza desde la mano siguiendo el trayecto. */
/* El humo va encima del genio (z-index 3), para que su arranque tape la mano, y debajo de la nube de la respuesta (que,
   con el mismo z-index, va después en el DOM). */
.smoke { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; overflow: visible; pointer-events: none; }
.smoke--narrow { display: none; }
.smoke .smoke__a { stop-color: var(--smoke-a); stop-opacity: var(--smoke-alpha); }
.smoke .smoke__b { stop-color: var(--smoke-b); stop-opacity: var(--smoke-alpha); }
.smoke .smoke__white { fill: var(--answer-cloud); }
.smoke__puff { transform-box: fill-box; transform-origin: center; animation: puff var(--cycle) ease-out calc(var(--t0) + var(--d)) infinite backwards; }
/* Las chispas crecen en cian, destellan a blanco (una copia blanca encima que se enciende y crece) y se desvanecen. */
.smoke__spark { fill: var(--brand); transform-box: fill-box; transform-origin: center; animation: spark var(--cycle) ease-in-out calc(var(--t0) + var(--d)) infinite backwards; }
.smoke__flash { fill: #ffffff; filter: drop-shadow(0 0 .35px #0eb7e5) drop-shadow(0 0 .9px rgb(14 183 229 / 70%)); transform-box: fill-box; transform-origin: center; opacity: 0; animation: spark-flash var(--cycle) ease-out calc(var(--t0) + var(--d)) infinite backwards; }

/* La nube de la respuesta: humo que se abre al final del trayecto, junto al cuadro (sin tapar la pregunta). */
.genie-answer {
  position: absolute; left: 60%; top: 42.9%; width: 39%; aspect-ratio: 140 / 60; z-index: 4;
  transform-origin: 17% 70%; animation: answer-cloud var(--cycle) ease-out var(--t0) infinite;
}
.genie-answer__cloud { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: var(--answer-cloud); filter: drop-shadow(0 .15cqw .35cqw var(--answer-cloud-shadow)); }
.genie-answer__text {
  position: absolute; inset: 22% 10% 12%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0;
  text-align: center; animation: answer-text var(--cycle) ease-out var(--t0) infinite;
}
.genie-answer__label { font-size: 2cqw; font-weight: 600; color: var(--answer-cloud-label); line-height: 1.2; }
.genie-answer__value { font-size: 3.2cqw; font-weight: 700; color: var(--answer-cloud-text); line-height: 1.25; white-space: nowrap; }
.spark { position: absolute; z-index: 4; fill: var(--brand); }
.spark--answer { right: -1.4cqw; top: -1.6cqw; width: 2.6cqw; height: 2.6cqw; animation: spark-answer var(--cycle) ease-in-out var(--t0) infinite; }

/* --- El ciclo (7,5 s por pregunta) --- */
@keyframes rig-float { 0%, 100% { transform: none; } 50% { transform: translateY(-1.5px); } }
@keyframes rig-breathe { 0%, 100% { transform: none; } 50% { transform: scaleY(1.015); } }
@keyframes rig-tail { 0%, 100% { transform: none; } 50% { transform: rotate(2deg); } }
@keyframes rig-cloud { from { transform: none; } to { transform: translate(4px, -7px); } }
/* La tarjeta entra desde la derecha con un asentamiento y sale hacia la izquierda. */
@keyframes q-card {
  0% { opacity: 0; transform: translateX(55%); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  7.5% { opacity: 1; transform: translateX(-1.5%); animation-timing-function: ease-in-out; }
  10.6%, 84.4% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  92%, 100% { opacity: 0; transform: translateX(-40%); }
}
@keyframes cluster-drift { from { translate: calc(var(--drift) * -.5) 0; } to { translate: calc(var(--drift) * .5) 0; } }
@keyframes cluster-float { from { transform: translateY(3px); } to { transform: translateY(-5px); } }
@keyframes rig-face-closed { 0% { opacity: 1; } 18.75% { opacity: 0; } 86.11% { opacity: 1; } }
@keyframes rig-face-open { 0% { opacity: 0; } 18.75% { opacity: 1; } 86.11% { opacity: 0; } }
@keyframes rig-face-pillo { 0% { opacity: 0; } 57.19% { opacity: 1; } 86.11% { opacity: 0; } }
@keyframes rig-eyes {
  0%, 18.75% { transform: scaleY(.1); }
  20.16% { transform: scaleY(1.15); }
  21.09%, 24.38% { transform: scaleY(1); }
  24.94% { transform: scaleY(.1); }
  25.69%, 62.81% { transform: scaleY(1); }
  63.38% { transform: scaleY(.1); }
  64.12%, 84.81% { transform: scaleY(1); }
  86.11%, 100% { transform: scaleY(.1); }
}
@keyframes rig-head {
  0%, 16.88% { transform: none; }
  18.75% { transform: translateY(1.5px); }
  20.62% { transform: translateY(-4px) rotate(-1deg); }
  22.5% { transform: translateY(-1px); }
  24.38% { transform: none; }
  26.72% { transform: rotate(7.5deg); }
  27.66%, 46.88% { transform: rotate(7deg); }
  50.62%, 60.94% { transform: rotate(-1deg); }
  63.75% { transform: translateY(1.5px) rotate(3deg); }
  66.09% { transform: translateY(-2px) rotate(-.5deg); }
  68.29%, 84.37% { transform: none; }
  88.72% { transform: translateY(2px) rotate(2deg); }
  95.66%, 100% { transform: none; }
}
/* Abracadabra, dos veces: anticipación (las manos bajan un poco), los brazos suben 3,5-4° desde el hombro con un giro
   de muñeca de 16-18° y vuelven con rebote. */
@keyframes rig-arm-l {
  0%, 26.25% { transform: none; }
  27.47% { transform: rotate(-2deg); }
  29.53% { transform: rotate(3.5deg); }
  31.22% { transform: rotate(-1.5deg); }
  32.34% { transform: none; }
  33.28% { transform: rotate(-2deg); }
  35.44% { transform: rotate(4deg); }
  37.31% { transform: rotate(-1.5deg); }
  38.91%, 61.88% { transform: none; }
  63.75% { transform: rotate(3deg); }
  66.56%, 100% { transform: none; }
}
@keyframes rig-arm-r {
  0%, 26.25% { transform: none; }
  27.47% { transform: rotate(2deg); }
  29.53% { transform: rotate(-3.5deg); }
  31.22% { transform: rotate(1.5deg); }
  32.34% { transform: none; }
  33.28% { transform: rotate(2deg); }
  35.44% { transform: rotate(-4deg); }
  37.31% { transform: rotate(1.5deg); }
  38.91%, 61.88% { transform: none; }
  63.75% { transform: rotate(-3deg); }
  66.56%, 100% { transform: none; }
}
@keyframes rig-hand-l {
  0%, 27.47% { transform: none; }
  29.53% { transform: rotate(-16deg); }
  31.22% { transform: rotate(3deg); }
  32.34%, 33.28% { transform: none; }
  35.44% { transform: rotate(-18deg); }
  37.31% { transform: rotate(3deg); }
  38.91%, 100% { transform: none; }
}
@keyframes rig-hand-r {
  0%, 27.47% { transform: none; }
  29.53% { transform: rotate(16deg); }
  31.22% { transform: rotate(-3deg); }
  32.34%, 33.28% { transform: none; }
  35.44% { transform: rotate(18deg); }
  37.31% { transform: rotate(-3deg); }
  38.91%, 100% { transform: none; }
}




@keyframes genie-lift {
  0%, 60.94% { transform: none; }
  64.22% { transform: translateY(-1.4%); }
  69.13%, 100% { transform: none; }
}

/* La pregunta se selecciona en cuanto llega, con el genio aún dormido (como hace el usuario con Alt + Shift + S). */
@keyframes demo-select {
  0%, 10.6% { transform: scale(0); }
  18.1%, 100% { transform: none; }
}

/* Cada bocanada (con su retardo): crece desde nada, se asienta y, al final, se disipa subiendo un poco. */
@keyframes puff {
  0%, 40.31% { opacity: 0; transform: scale(0); }
  42.66% { opacity: 1; transform: scale(1.2); }
  45%, 82.68% { opacity: 1; transform: none; }
  90.45%, 100% { opacity: 0; transform: translateY(-1.5px) scale(1.25); }
}
@keyframes spark {
  0%, 41.25% { transform: scale(0) rotate(0); opacity: 0; }
  44.06% { transform: scale(1.2) rotate(45deg); opacity: 1; }
  45.47% { transform: scale(1) rotate(45deg); opacity: 1; }
  46.88% { transform: scale(1.35) rotate(60deg); opacity: 1; }
  50.62%, 100% { transform: scale(.4) rotate(90deg); opacity: 0; }
}
@keyframes spark-flash {
  0%, 45.47% { transform: scale(.6) rotate(45deg); opacity: 0; }
  46.5% { transform: scale(2.4) rotate(55deg); opacity: 1; }
  48.28% { transform: scale(1.5) rotate(70deg); opacity: .7; }
  50.62%, 100% { transform: scale(.4) rotate(90deg); opacity: 0; }
}

/* La nube se abre al llegar el humo; la respuesta aparece de golpe dentro (en menos de 100 ms, de 0,96 a 1). */
@keyframes answer-cloud {
  0%, 53.91% { opacity: 0; transform: scale(.25); }
  57.19% { opacity: 1; transform: scale(1.05); }
  59.53%, 84.37% { opacity: 1; transform: none; }
  91.32%, 100% { opacity: 0; transform: translateY(-3%) scale(1.04); }
}
@keyframes answer-text {
  0%, 58.59% { opacity: 0; transform: scale(.96); }
  59.72% { opacity: 1; transform: scale(1.01); }
  60.94%, 84.37% { opacity: 1; transform: none; }
  88.72%, 100% { opacity: 0; transform: none; }
}

@keyframes spark-answer {
  0%, 59.53% { transform: scale(0); opacity: 0; }
  61.88% { transform: scale(1.5) rotate(30deg); opacity: 1; }
  65.62%, 82.68% { transform: scale(1) rotate(30deg); opacity: 1; }
  86.11%, 100% { transform: scale(0); opacity: 0; }
}
@keyframes answer-mark {
  0%, 60.94% { transform: rotate(-1.2deg) scaleX(0); }
  65.62%, 100% { transform: rotate(-1.2deg); }
}

/* Anotaciones a boli (solo una o dos en toda la página). */
.hand { margin: 0; font: 600 1.45rem/1.1 var(--font-hand); color: var(--pen); }
.hand__arrow { display: inline-block; width: 2.6rem; height: 2rem; vertical-align: middle; }
.hand--genie { position: absolute; z-index: 4; left: 52%; bottom: 4%; transform: rotate(-2deg); white-space: nowrap; }
.pricing { position: relative; }
/* La nota va dentro de la tarjeta del plan recomendado y la señala desde encima, sea cual sea la columna. */
.plans .plan--recommended { position: relative; }
.plan__hand { position: absolute; bottom: calc(100% + .45rem); left: -.6rem; font-size: 1.3rem; transform: rotate(-3deg); white-space: nowrap; pointer-events: none; }
.plan__hand .hand__arrow { width: 2.2rem; height: 1.7rem; vertical-align: -.35em; }

/* Separador de papelería: línea ondulada fina con un mini genio en medio. */
.squiggle { display: flex; align-items: center; gap: 1rem; max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.squiggle__line { flex: 1; height: 14px; fill: none; stroke: var(--squiggle); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.squiggle--plain { max-width: 46rem; }
.squiggle__genie { flex: none; height: 3.4rem; width: auto; --genie-seat: var(--squiggle); --genie-cloud: transparent; }

/* Meet your genie: una nota de cuaderno (la única con cuadrícula), algo girada, con el genio al lado. */
.meet { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2.5rem; align-items: center; max-width: 54rem; margin: 0 auto; }
.meet__clouds { width: 9rem; height: auto; overflow: visible; fill: var(--divider-cloud); }
/* Cada nube deriva despacio de lado a lado y flota arriba y abajo, a su ritmo (dos animaciones con duraciones primas
   entre sí, así que el recorrido no se repite igual). */
.mqs-cluster__cloud { transform-box: fill-box; animation: cluster-drift 13s ease-in-out infinite alternate, cluster-float 4.6s ease-in-out infinite alternate; }
.mqs-cluster__c1 { --drift: 20px; }
.mqs-cluster__c2 { --drift: -22px; animation-duration: 11s, 5.3s; animation-delay: -6s, -2s; }
.mqs-cluster__c3 { --drift: 24px; animation-duration: 9s, 3.9s; animation-delay: -2s, -1s; }
.mqs-cluster__c4 { --drift: -26px; animation-duration: 7s, 3.4s; animation-delay: -4s, -3s; }
.meet__note {
  padding: 1.8rem 2rem; border: 1px solid var(--sheet-line); border-radius: var(--radius); box-shadow: var(--sheet-shadow); transform: rotate(-1deg);
  background: linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 22px 22px, var(--sheet);
}
.meet__note h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: .6rem; }
.meet__note p { font-size: 1.08rem; color: var(--text-soft); }
.meet__small { margin: 0; font-size: .9rem !important; color: var(--text-muted) !important; }
.marker--sky::after { background: var(--marker-sky); }

/* How it works: tres pasos en círculos numerados, como en cheatsheet.monorean.com. */
.how { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2.5rem; align-items: center; }
.how__head h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; margin: 0; }
/* Antes de los pasos, en pequeño: primero hay que instalar la extensión. */
.how__first { margin: .6rem 0 0; font-size: .88rem; color: var(--text-muted); }
.how__first a { color: inherit; text-decoration-color: var(--brand); text-underline-offset: .18em; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.step { display: flex; gap: .7rem; align-items: flex-start; padding: 1.1rem 1rem; background: var(--sheet); border: 1px solid var(--sheet-line); border-radius: var(--radius-lg); box-shadow: var(--sheet-shadow); }
.step__num { width: 2rem; height: 2rem; font-size: .95rem; }
.step h3 { margin: .2rem 0 .3rem; font-size: 1rem; line-height: 1.35; }
.step h3 kbd { font-size: .74em; padding: .02em .35em; }
.step p { margin: 0; font-size: .9rem; color: var(--text-soft); }

/* Modos: filas grandes con la captura protagonista y una numeración grande y discreta. */
.modes-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; align-items: end; margin-bottom: 3.5rem; }
.modes-intro p { font-size: 1.1rem; color: var(--text-soft); margin: 0; }
.modes { display: grid; gap: 4.5rem; }
.mode { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3.5rem; align-items: start; }
.mode:nth-child(even) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.mode:nth-child(even) .mode__text { order: 2; }
/* "Wish #1": los tres modos son tres deseos. */
.wish { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .6rem; font-size: .9rem; font-weight: 600; color: var(--brand-text); }
.wish__num, .step__num {
  display: inline-grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  font-size: .85rem; font-weight: 700; color: #ffffff; background: var(--step-bg);
}
.mode__text { padding-top: .5rem; }
.mode__text h3 { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: .35rem; }
.mode__text p { color: var(--text-soft); }
.mode__text p.mode__tagline { font-size: 1.1rem; font-weight: 600; color: var(--brand-text); margin-bottom: 1rem; }
.mode__use { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .95rem; }
.mode__use strong { display: block; margin-bottom: .15rem; font-size: .9rem; }

/* Capturas: marco de ventana de borde fino y el recuadro de selección señalando la respuesta. */
/* Capturas: ventanas redondeadas de la propuesta 2, con su sombra (sin halo). */
.shot { position: relative; margin: 0; }
.window { background: var(--sheet); border: 1px solid var(--sheet-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sheet-shadow); }
.window__bar { display: flex; align-items: center; gap: .75rem; padding: .5rem .8rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.window__dots { display: inline-flex; gap: 6px; }
.window__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
/* Los botones de la barra de Chrome a la derecha de la URL: la extensión fijada (el genio), el puzle y el menú. */
.window__actions { display: inline-flex; align-items: center; gap: .1rem; margin-left: -.25rem; }
.window__action { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: var(--chrome-icon); }
.window__action svg { width: .95rem; height: .95rem; fill: currentColor; }
.window__ext { display: block; width: .95rem; height: .95rem; }
.window__url { flex: 1; font-size: .75rem; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .1rem .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window__body { position: relative; }
.window__body img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: .75rem; font-size: .85rem; color: var(--text-muted); }
:root:not([data-theme="dark"]) .shot-img--dark, :root[data-theme="dark"] .shot-img--light { display: none; }
.shot-callout { position: absolute; pointer-events: none; }
/* El recuadro de selección va sobre la pregunta (enunciado y opciones), igual en los tres modos: es lo que el usuario
   selecciona con Alt + Shift + S. */
.shot-callout { left: 3%; top: 17.4%; width: 59.6%; height: 46.6%; }
/* Unseen: sin recuadro de selección sobre la pregunta. */
.shot-callout--unseen { display: none; }
/* Discretto: un anillo fino marca el banner de la esquina y una flecha corta lleva a la lupa, justo encima, que lo
   amplía. */
.shot-loupe-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.shot-loupe-lines__ring { fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-opacity: .75; vector-effect: non-scaling-stroke; }
.shot-loupe-lines__arrow { fill: none; stroke: var(--brand); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.shot-loupe {
  position: absolute; left: 64.6%; top: 39%; width: 33.6%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  border: 1.5px solid var(--brand); background: var(--paper); box-shadow: 0 6px 16px rgb(0 30 60 / 10%), inset 0 0 0 3px rgb(255 255 255 / 60%);
}
.shot-loupe__glass { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
/* Lo que se ve por la lupa: el cuerpo de la ventana a 2× (la lupa mide el 33.6 % del ancho: 2 / 0.336 = 595 %), con el
   punto (93 %, 96.2 % de la captura) en el centro del cristal: así caben el banner entero y la esquina de la ventana.
   Alrededor, la página (el fondo de la lupa) y el marco de la ventana: su borde y su esquina redondeada, también a 2×. */
.shot-loupe__world { position: absolute; left: -503.5%; top: -357.5%; width: 595.2%; height: 423.6%; overflow: hidden;
  border: 2px solid var(--sheet-line); border-top: 0; border-left: 0; border-radius: 0 0 calc(var(--radius-lg) * 2) 0; box-shadow: var(--sheet-shadow); }
.window__body .shot-loupe__world img { display: block; width: 100%; height: auto; }
.shot-loupe__glass::after { content: ""; position: absolute; inset: 8% 40% 55% 12%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / 75%), transparent); }
.shot-loupe__zoom {
  /* A la izquierda de la flecha, entre la lupa y el banner. */
  position: absolute; right: 12%; top: 88.6%; display: inline-flex; align-items: center; gap: .25rem; pointer-events: none;
  color: var(--brand); font-size: .68rem; font-weight: 800; letter-spacing: .02em; line-height: 1; white-space: nowrap;
}
.shot-loupe__badge { width: 1.75em; height: 1.2em; fill: var(--brand); font-family: inherit; }
/* En móvil no cabe a la derecha de la flecha: va a su izquierda, entre la lupa y el banner. */
@media (max-width: 640px) { .shot-loupe__zoom { font-size: .58rem; } }

/* Features: lista con divisores, título a la izquierda y texto a la derecha. */
.features-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
.features-layout__head p { color: var(--text-soft); font-size: 1.05rem; }
.feature h3 { display: flex; align-items: center; gap: .6rem; }
.feature__icon { flex: none; width: 1.35rem; height: 1.35rem; color: var(--genie-ink); }
.feature-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-strong); }
.feature { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.5rem; align-items: start; padding: 1.4rem 0; border-bottom: 1px solid var(--border); }
.feature h3 { margin: 0; font-size: 1.05rem; }
.feature p { margin: 0; color: var(--text-soft); font-size: .97rem; }
.feature p.feature__caption { margin-top: .55rem; font-size: .8rem; line-height: 1.45; color: var(--text-muted); }
.feature /* Huecos para GIF o imagen: un trozo de cielo, noche o día según el tema, con el texto en pequeño. */
.media-frame {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-width: 18rem; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom)); box-shadow: inset 0 0 0 1px var(--border);
  display: grid; place-items: center; font-size: .78rem; font-weight: 600; color: #ffffff;
}
.media-frame__sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.media-frame__sky .mqs-sky__cloud { fill: var(--sky-cloud); }
.media-frame__sky .mqs-sky__star { fill: var(--star); }
.media-frame span { position: relative; padding: .15rem .6rem; border-radius: 999px; background: rgb(0 0 0 / 28%); }
/* Feature "Live minimap" en acción (pages/landing/_minimap_demo): la pestaña, donde solo se mueve el cursor, y la ventana
   de Unseen con el minimapa, donde la selección crece en azul. Bucle de 6 s: espera, arrastre (10–55 %), quieto, vuelta.
   La página es un recorte de la escena de Everyday: x 0–64 %, y 8–72 % (imagen al 156.25 % de ancho, subida un 12.5 %);
   la pregunta ocupa x 4.7–97.8 %, y 14.7–87.5 % del recorte. */
.mm-demo { --mm-cycle: 6s; display: grid; grid-template-columns: 3fr 2fr; gap: .9rem; align-items: end; max-width: 27rem; margin-top: .9rem; }
.mm-demo__label { display: block; margin-bottom: .3rem; font-size: .7rem; font-weight: 600; color: var(--text-muted); }
.mm-demo__page { position: relative; aspect-ratio: 1.405; overflow: hidden; border-radius: 6px; background: #f3f5f7; }
.mm-demo__page img { position: absolute; left: 0; top: -12.5%; width: 156.25%; max-width: none; height: auto; }
.mm-demo__tab .mm-demo__page { border: 1px solid var(--border); box-shadow: var(--sheet-shadow); }
.mm-demo__cursor { position: absolute; z-index: 1; width: 7%; height: auto; fill: #161616; stroke: #ffffff; stroke-width: 1.2; stroke-linejoin: round;
  left: 4.7%; top: 14.7%; animation: mm-cursor var(--mm-cycle) ease-in-out infinite; }
.mm-demo__win { border: 1px solid var(--border-strong); border-radius: 8px; background: var(--paper); box-shadow: var(--sheet-shadow); overflow: hidden; }
.mm-demo__bar { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .3rem .45rem; border-bottom: 1px solid var(--border); font-size: .58rem; }
.mm-demo__bar b { font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.mm-demo__bar span { display: inline-flex; align-items: center; gap: .25rem; color: var(--text-muted); font-weight: 600; }
.mm-demo__bar i { width: .38rem; height: .38rem; border-radius: 50%; background: currentColor; }
.mm-demo__map { padding: .45rem; }
.mm-demo__map .mm-demo__page { border: 1px solid var(--border-strong); border-radius: 4px; }
.mm-demo__sel { position: absolute; left: 4.7%; top: 14.7%; width: 0; height: 0; box-sizing: border-box; border: 1.5px dashed var(--brand); border-radius: 2px;
  background: rgb(14 183 229 / 18%); box-shadow: 0 0 0 999px rgb(0 0 0 / 22%); opacity: 0; animation: mm-sel var(--mm-cycle) ease-in-out infinite; }
/* Feature "Copy the answer" en acción (pages/landing/_copy_demo): bucle de 6 s. El cursor pulsa el botón de copiar de la
   tarjeta de Everyday (≈20 %), que pasa a ✓, y luego el banner de Discretto (≈62 %), que dice "✓ Copied". */
.cp-demo { --cp-cycle: 6s; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; max-width: 25rem; margin-top: .9rem; }
.cp-demo__label { display: block; margin-bottom: .3rem; font-size: .7rem; font-weight: 600; color: var(--text-muted); }
.cp-demo__card { position: relative; padding: .45rem .6rem .6rem; border: 1px solid var(--brand); border-radius: 8px; background: var(--surface); box-shadow: var(--sheet-shadow); }
.cp-demo__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; font-size: .6rem; }
.cp-demo__head b { font-weight: 700; color: var(--heading); }
.cp-demo__copy { position: relative; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 5px; color: var(--text-muted); animation: cp-press-card var(--cp-cycle) ease infinite; }
.cp-demo__copy svg { position: absolute; width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cp-demo__done-icon { opacity: 0; color: var(--success); animation: cp-done var(--cp-cycle) ease infinite; }
.cp-demo__copy-icon { animation: cp-copy var(--cp-cycle) ease infinite; }
.cp-demo__answer { font-size: .78rem; font-weight: 700; color: var(--heading); }
.cp-demo__corner { position: relative; display: flex; justify-content: flex-end; align-items: flex-end; height: 4.6rem; padding: .4rem; border-radius: 8px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.cp-demo__banner { position: relative; display: inline-grid; padding: .2rem .55rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: .62rem; color: var(--text-soft); box-shadow: var(--sheet-shadow); animation: cp-press-banner var(--cp-cycle) ease infinite; }
.cp-demo__banner > span { grid-area: 1 / 1; white-space: nowrap; }
.cp-demo__banner-copied { opacity: 0; color: var(--success); font-weight: 600; animation: cp-banner-copied var(--cp-cycle) ease infinite; }
.cp-demo__banner-answer { animation: cp-banner-answer var(--cp-cycle) ease infinite; }
.cp-demo__cursor { position: absolute; z-index: 1; width: .8rem; height: auto; fill: #161616; stroke: #ffffff; stroke-width: 1.3; stroke-linejoin: round; pointer-events: none; }
.cp-demo__cursor--card { animation: cp-cursor-card var(--cp-cycle) ease-in-out infinite; }
.cp-demo__cursor--banner { animation: cp-cursor-banner var(--cp-cycle) ease-in-out infinite; }
@keyframes cp-cursor-card { 0%, 5% { left: 40%; top: 90%; opacity: 0; } 8% { opacity: 1; } 18%, 30% { left: 88%; top: 22%; opacity: 1; } 36%, 100% { left: 88%; top: 22%; opacity: 0; } }
@keyframes cp-press-card { 0%, 19% { transform: none; background: transparent; } 20.5% { transform: scale(.88); background: var(--surface-2); } 23%, 40% { transform: none; background: var(--surface-2); } 44%, 100% { background: transparent; } }
@keyframes cp-copy { 0%, 21% { opacity: 1; } 22%, 44% { opacity: 0; } 47%, 100% { opacity: 1; } }
@keyframes cp-done { 0%, 21% { opacity: 0; } 22%, 44% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes cp-cursor-banner { 0%, 40% { left: 30%; top: 15%; opacity: 0; } 44% { opacity: 1; } 60%, 72% { left: 70%; top: 70%; opacity: 1; } 78%, 100% { left: 70%; top: 70%; opacity: 0; } }
@keyframes cp-press-banner { 0%, 61% { transform: none; } 62.5% { transform: scale(.94); } 65%, 100% { transform: none; } }
@keyframes cp-banner-answer { 0%, 63% { opacity: 1; } 64%, 86% { opacity: 0; } 89%, 100% { opacity: 1; } }
@keyframes cp-banner-copied { 0%, 63% { opacity: 0; } 64%, 86% { opacity: 1; } 89%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cp-demo__cursor { display: none; }
  .cp-demo__copy, .cp-demo__copy svg, .cp-demo__banner, .cp-demo__banner > span { animation: none; }
}

/* Feature "Reduced Unseen window" en acción (pages/landing/_reduced_demo): la ventana de Unseen (16:9) se estrecha en
   dos pasos, 100 % → 66 % (media, sin genio) → 46 % (reducida, solo la respuesta y el punto), y vuelve. Bucle de 9 s. */
.rd-demo { --rd-cycle: 9s; max-width: 22rem; margin-top: .9rem; }
/* El escenario tiene siempre el tamaño de la ventana entera: la ventana se encoge hacia la esquina de abajo a la derecha
   sin mover nada de la página. */
.rd-demo__stage { position: relative; aspect-ratio: 16 / 9; }
.rd-demo__win { position: absolute; right: 0; bottom: 0; container-type: inline-size; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--paper); box-shadow: var(--sheet-shadow); animation: rd-width var(--rd-cycle) ease-in-out infinite; }
.rd-demo__layer { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; }
.rd-demo__layer--full { animation: rd-full var(--rd-cycle) ease-in-out infinite; }
.rd-demo__layer--medium { animation: rd-medium var(--rd-cycle) ease-in-out infinite; }
.rd-demo__layer--reduced { justify-content: center; padding: 0 .9rem 0 .55rem; animation: rd-reduced var(--rd-cycle) ease-in-out infinite; }
.rd-demo__bar { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .3rem .5rem; border-bottom: 1px solid var(--border); font-size: .58rem; white-space: nowrap; }
.rd-demo__bar b { font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.rd-demo__bar span { display: inline-flex; align-items: center; gap: .25rem; color: var(--text-muted); font-weight: 600; }
.rd-demo__bar i { width: .38rem; height: .38rem; border-radius: 50%; background: currentColor; }
.rd-demo__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: .3rem; text-align: center; }
.rd-demo__body p { margin: 0; font-size: .6rem; line-height: 1.3; color: var(--text-soft); }
.rd-demo__genie { height: 22cqw; width: auto; }
.rd-demo__dot { position: absolute; top: .4rem; right: .4rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--success); }
.rd-demo__answer { margin: 0; font-size: 6.6cqw; white-space: nowrap; font-weight: 700; line-height: 1.25; color: var(--text); }
.rd-demo__answer span { background: linear-gradient(var(--marker-cyan), var(--marker-cyan)) left bottom .1em / 100% .45em no-repeat; }
.rd-demo__size { position: relative; height: 1rem; margin: .35rem 0 0; font-size: .7rem; font-weight: 600; color: var(--text-muted); text-align: right; }
.rd-demo__size span { position: absolute; right: 0; opacity: 0; }
.rd-demo__size--full { animation: rd-full var(--rd-cycle) ease-in-out infinite; }
.rd-demo__size--medium { animation: rd-medium var(--rd-cycle) ease-in-out infinite; }
.rd-demo__size--reduced { animation: rd-reduced var(--rd-cycle) ease-in-out infinite; }
@keyframes rd-width {
  0%, 22% { width: 100%; }
  30%, 52% { width: 66%; }
  60%, 86% { width: 46%; }
  96%, 100% { width: 100%; }
}
@keyframes rd-full { 0%, 22% { opacity: 1; } 27%, 91% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes rd-medium { 0%, 24% { opacity: 0; } 30%, 52% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes rd-reduced { 0%, 55% { opacity: 0; } 61%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rd-demo__win { animation: none; width: 46%; }
  .rd-demo__layer, .rd-demo__size span { animation: none; }
  .rd-demo__layer--reduced, .rd-demo__size--reduced { opacity: 1; }
}
@keyframes mm-cursor {
  0%, 10% { left: 4.7%; top: 14.7%; }
  55%, 82% { left: 97.8%; top: 87.5%; }
  100% { left: 4.7%; top: 14.7%; }
}
@keyframes mm-sel {
  0%, 9% { width: 0; height: 0; opacity: 0; }
  10% { width: 0; height: 0; opacity: 1; }
  55%, 82% { width: 93.1%; height: 72.8%; opacity: 1; }
  88%, 100% { width: 93.1%; height: 72.8%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-demo__cursor { animation: none; left: 97.8%; top: 87.5%; }
  .mm-demo__sel { animation: none; opacity: 1; width: 93.1%; height: 72.8%; }
}
/* Feature "Visible drag gestures" (pages/landing/_drag_demo): las piezas y el bucle del minimapa, en dos mitades iguales.
   Everyday: el recuadro de la extensión sobre la página (discontinuo, fondo azul tenue, sin oscurecer). Unseen: en la
   pestaña solo el cursor; la ventana, pequeña, flota sobre la esquina inferior derecha con el recuadro en su minimapa. */
.drag-demo { grid-template-columns: 1fr 1fr; align-items: start; }
.drag-demo__page { border: 1px solid var(--border); box-shadow: var(--sheet-shadow); }
.drag-demo__box { position: absolute; left: 4.7%; top: 14.7%; width: 0; height: 0; box-sizing: border-box; opacity: 0;
  border: 1.5px dashed var(--brand); border-radius: 3px; background: rgb(14 183 229 / 8%); }
.drag-demo__box { animation: mm-sel var(--mm-cycle) ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .drag-demo__box { animation: none; opacity: 1; width: 93.1%; height: 72.8%; }
}
/* Feature "Always on" (pages/landing/_always_on_demo): bucle de 7 s. Se enciende el interruptor (15 %) y el rotulador
   tacha el atajo (16–26 %); quieto, se apaga todo y vuelta. */
.ao-demo { --ao-cycle: 7s; max-width: 19rem; margin-top: .9rem; }
.ao-demo__bar { display: flex; align-items: center; gap: .45rem; font-size: .78rem; }
.ao-demo__bar b { font-weight: 700; color: var(--heading); white-space: nowrap; }
.ao-demo__switch { position: relative; flex: none; width: 1.75em; height: 1em; border-radius: 999px; font-size: 1rem;
  background: var(--border-strong); animation: ao-track var(--ao-cycle) ease infinite; }
.ao-demo__switch::after { content: ""; position: absolute; top: .12em; left: .12em; width: .76em; height: .76em; border-radius: 50%;
  background: #ffffff; box-shadow: 0 1px 2px rgb(0 0 0 / 20%); animation: ao-knob var(--ao-cycle) ease infinite; }
.ao-demo__keys { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: .2rem; color: var(--text-muted);
  animation: ao-keys var(--ao-cycle) ease infinite; }
.ao-demo__keys kbd { font-size: .72rem; }
.ao-demo__keys::after { content: ""; position: absolute; left: -.15rem; right: -.15rem; top: 52%; height: 2px; border-radius: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: left; animation: ao-strike var(--ao-cycle) ease infinite; }
/* El icono de la extensión: el genio dormido se despierta cuando se enciende Always on (con un pequeño salto). */
.ao-demo__icon { position: relative; flex: none; width: 1.9rem; height: 1.9rem; margin-left: .9rem; animation: ao-icon var(--ao-cycle) ease infinite; }
.ao-demo__face { position: absolute; inset: 0; width: 100%; height: 100%; }
.ao-demo__face--awake { opacity: 0; animation: ao-awake var(--ao-cycle) ease infinite; }
@keyframes ao-awake { 0%, 13% { opacity: 0; } 16%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes ao-icon { 0%, 13% { transform: none; } 15.5% { transform: scale(1.12); } 18%, 100% { transform: none; } }
@keyframes ao-track { 0%, 12% { background: var(--border-strong); } 15%, 92% { background: var(--brand); } 96%, 100% { background: var(--border-strong); } }
@keyframes ao-knob { 0%, 12% { transform: none; } 15%, 92% { transform: translateX(.75em); } 96%, 100% { transform: none; } }
@keyframes ao-strike { 0%, 16% { transform: scaleX(0); } 26%, 92% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes ao-keys { 0%, 16% { opacity: 1; } 26%, 92% { opacity: .5; } 96%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ao-demo__switch { animation: none; background: var(--brand); }
  .ao-demo__switch::after { animation: none; transform: translateX(.75em); }
  .ao-demo__keys { animation: none; opacity: .5; }
  .ao-demo__keys::after { animation: none; transform: none; }
  .ao-demo__icon { animation: none; }
  .ao-demo__face--awake { animation: none; opacity: 1; }
}
.media-frame {
  aspect-ratio: 16 / 9; max-width: 18rem; border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: radial-gradient(60% 80% at 50% 0%, var(--halo-2), transparent 70%), var(--surface-2);
  display: grid; place-items: center; font-size: .8rem; color: var(--text-muted);
}

/* Precios: la composición de la 5 (título a la izquierda, planes a la derecha) con las tarjetas de la 2,
   para que el plan recomendado lleve su contorno de neón. */
.pricing-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 3.5rem; align-items: start; }
.pricing-layout__head p { color: var(--text-soft); font-size: 1.05rem; }
.pricing-layout .display { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.pricing .plans .plan--recommended h3 .badge { margin-left: auto; }
.pricing__note { margin-top: 1.75rem; font-size: .9rem; color: var(--text-muted); }

/* CTA final, con el recuadro como detalle. */
/* CTA final: el genio se asoma a la derecha. */
/* El genio del CTA final "pisa" el pie: el CTA va por encima del pie en el apilamiento (z-index) y no recorta en
   vertical, así que la cola sobresale dentro de la franja del pie, por encima de su borde y sin llegar a los enlaces. */
.final { position: relative; z-index: 2; padding: 5.5rem 0 5rem; overflow-x: clip; overflow-y: visible; }
.final .wrap { position: relative; }
.final__genie { position: absolute; right: 2rem; bottom: -7.6rem; height: 19rem; width: auto; pointer-events: none; }
/* Sobre el fondo blanco de la página (no en el cielo), su nube y sus nubecillas blancas no se verían: toman --divider-cloud. */
:root:not([data-theme="dark"]) .final__genie { --genie-seat: var(--divider-cloud); --genie-cloud: var(--divider-cloud); }
.final .display { max-width: 15em; font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.final p { max-width: 34rem; font-size: 1.1rem; color: var(--text-soft); }
.final .hero__ctas { margin: 2rem 0 0; }
/* En una sola línea; solo en móvil, donde no cabe, se parte. */
.final p.final__lead { max-width: none; white-space: nowrap; }
@media (max-width: 640px) { .final p.final__lead { white-space: normal; } }
/* Las plataformas, justo bajo los botones y a tamaño de texto: es una condición de uso, no letra pequeña. */
.final p.final__platforms { max-width: none; margin: 1.25rem 0 0; font-size: 1rem; color: var(--text-soft); }
.final__platforms strong { color: var(--text); font-weight: 600; }
.responsible { max-width: 46rem; margin: 3.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.final .responsible p { margin: 0 0 .3rem; font-size: .85rem; color: var(--text-muted); }

/* Aparición suave */
.reveal { animation: reveal .6s ease both; }
.reveal--2 { animation-delay: .08s; }
.reveal--3 { animation-delay: .16s; }
.reveal--4 { animation-delay: .24s; }
@keyframes reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Sin movimiento: el hero queda en su estado final (estela, chispas, recuadro y respuesta visibles). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Tableta y móvil ---------- */
@media (max-width: 960px) {
  .hero .wrap, .modes-intro, .features-layout, .pricing-layout, .how { grid-template-columns: 1fr; gap: 2.5rem; }
  .how { gap: 1.25rem; }
  .steps { grid-template-columns: 1fr; gap: .6rem; }
  .modes-intro { gap: .75rem; margin-bottom: 2.5rem; }
  .mode, .mode:nth-child(even) { grid-template-columns: 1fr; gap: 1.5rem; }
  .mode:nth-child(even) .mode__text { order: 0; }
  .stage { max-width: 36rem; margin: 0 auto; }
}
@media (max-width: 640px) {
  main { padding: 2rem 1.1rem 3.5rem; }
  h1 { font-size: 1.7rem; }
  .wrap { padding: 0 1.1rem; }
  .site-header__inner { padding: .8rem 1.1rem; gap: .75rem; flex-wrap: wrap; }
  .site-header .brand { --logo-h: 22px; }
  .site-header .nav { order: 3; flex-basis: 100%; overflow-x: auto; white-space: nowrap; scrollbar-width: none; gap: 1.1rem; font-size: .9rem; }
  .nav a, .nav form { flex: none; }
  .section { padding: 3.5rem 0; }
  .section--tight { padding: 1.5rem 0 3rem; }
  .hero { padding: 3rem 0 4rem; }
  .topbar { padding: 1rem 1.1rem; }
  .topbar .brand { --logo-h: 20px; }
  .topbar__actions { gap: .4rem; font-size: .85rem; }
  .pill { padding: .35rem .7rem; }
  .lockup--large { --logo-h: 44px; margin-bottom: 1.5rem; }
  .tagline { font-size: clamp(1.55rem, 7.4vw, 2rem); }
  /* En una columna, hueco encima del plan recomendado para su nota. */
  .plans .plan--recommended:has(.plan__hand) { margin-top: 2.8rem; }
  .plan__hand { font-size: 1.15rem; }
  /* Móvil: escenario más alto, la visión más ancha y el genio algo menor (otro trazo de humo). */
  .stage { aspect-ratio: 10 / 11; margin-top: .5rem; }
  .demo-sheet { width: 82%; top: 0; }
  .demo__page { width: 74%; }
  .demo__q { font-size: 3.3cqw; }
  .demo__opts { font-size: 2.9cqw; }
  .stage__genie { height: 58%; }
  .genie-answer { left: 52%; top: 43.2%; width: 46%; }
  .genie-answer__label { font-size: 2.6cqw; }
  .genie-answer__value { font-size: 3.8cqw; }
  .smoke--wide { display: none; }
  .smoke--narrow { display: block; }
  .hand--genie { font-size: 1rem; left: auto; right: 0; bottom: 2%; }
  .hand--genie .hand__arrow { width: 2rem; }
  .meet { grid-template-columns: 1fr; gap: 1rem; justify-items: center; }
  .meet__clouds { width: 6rem; }
  .meet__note { padding: 1.3rem 1.25rem; }
  .hero__ctas .button { width: 100%; }
  .final { padding-top: 4rem; padding-bottom: 8.5rem; }
  .final__genie { height: 10rem; right: 0; bottom: -10.4rem; }
  .mode__text h3 { font-size: 1.6rem; }
  .modes { gap: 4rem; }
  .feature { grid-template-columns: 1fr; gap: .4rem; }
  .card { padding: 1.15rem 1.2rem; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs__item { flex: none; }
  .site-footer .brand { margin-right: 0; flex-basis: 100%; }
}