/* ============================================
   SITIO PÚBLICO — T-006 (rediseño del inicio)
   Fuente: Claude outputs/maqueta-rediseno.html (maqueta aprobada por Fabián el 2026-10-02).
   Solo lo cargan las páginas públicas (index, cv-agent, signin, signup); las privadas no.
   Tokens en styles.css (:root y [data-theme="dark"]).
   Las clases de la maqueta que chocaban con styles.css van renombradas:
   nav → snav · btn → fbtn · hero → fhero · portrait → fportrait · lede → flede · footer → sfoot.
   ============================================ */

:root[data-theme="dark"] { color-scheme: dark; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
:where(.fc) a, :where(.fc) button { touch-action: manipulation; }
.fbtn, :where(.fc) button, .chip, .lang-switch { -webkit-user-select: none; user-select: none; }
:where(.fc) :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
/* Sobre fondo verde el anillo --brand desaparece (1:1): ahí va en el color del texto del bloque.
   .offer y el epílogo usan --brand (su texto es --brand-ink en los dos temas); .auth usa --brand-dark
   en los dos temas, así que fuera de la tarjeta el anillo es el claro de su texto (#F7F6F3). */
.fc :is(.offer, .close) :focus-visible { outline-color: var(--brand-ink); }
.fc .auth > :not(.auth__body) :focus-visible { outline-color: #F7F6F3; }

/* Solo para lectores de pantalla */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* «Saltar al contenido»: primer elemento enfocable, visible solo con foco */
.skip-link {
  position: absolute; left: 16px; top: 8px; z-index: 100; transform: translateY(-200%);
  padding: 10px 16px; border-radius: 999px; background: var(--bg); color: var(--text);
  font-size: 14px; font-weight: 500; text-decoration: none; box-shadow: 0 0 0 1px var(--line);
}
.skip-link:focus { transform: none; }
main[tabindex="-1"]:focus { outline: none; }

/* ---------- Logos: archivo SVG como máscara, color del tema (currentColor) ---------- */
.logo {
  display: block;
  background: currentColor;
  -webkit-mask: no-repeat 0 50% / contain;
  mask: no-repeat 0 50% / contain;
  forced-color-adjust: none;
}
.logo--fcai    { aspect-ratio: 377 / 68; -webkit-mask-image: url(assets/logos/faceless-creator-ai-verde.svg); mask-image: url(assets/logos/faceless-creator-ai-verde.svg); }
.logo--agenda  { aspect-ratio: 299 / 68; -webkit-mask-image: url(assets/logos/agenda-llena-verde.svg); mask-image: url(assets/logos/agenda-llena-verde.svg); }
.logo--cv      { aspect-ratio: 554 / 68; -webkit-mask-image: url(assets/logos/cv-cover-letter-verde.svg); mask-image: url(assets/logos/cv-cover-letter-verde.svg); }
.logo--prod    { aspect-ratio: 394 / 68; -webkit-mask-image: url(assets/logos/productos-digitales-verde.svg); mask-image: url(assets/logos/productos-digitales-verde.svg); }
.logo--s-agenda { aspect-ratio: 51 / 68; -webkit-mask-image: url(assets/logos/simbolo-agenda-llena-verde.svg); mask-image: url(assets/logos/simbolo-agenda-llena-verde.svg); }
.logo--s-cv     { aspect-ratio: 51 / 68; -webkit-mask-image: url(assets/logos/simbolo-cv-cover-letter-verde.svg); mask-image: url(assets/logos/simbolo-cv-cover-letter-verde.svg); }
.logo--s-prod   { aspect-ratio: 51 / 68; -webkit-mask-image: url(assets/logos/simbolo-productos-digitales-verde.svg); mask-image: url(assets/logos/simbolo-productos-digitales-verde.svg); }

/* ---------- Menú (todas las páginas públicas) ---------- */
.snav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  /* Opaco: translúcido, sobre el epílogo verde o una foto oscura, los enlaces bajaban de 4,5:1. */
  background: var(--bg);
}
.snav::after {
  content: ""; position: absolute; inset: 100% 0 auto 0; height: 18px; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 55%, transparent), transparent);
}
@media (prefers-reduced-transparency: reduce) { .snav { border-bottom: 1px solid var(--line); } .snav::after { display: none; } }
@media (prefers-contrast: more) { .snav { border-bottom: 1px solid var(--text); } .snav::after { display: none; } }
.snav__in {
  max-width: var(--fc-container, 1180px); margin: 0 auto; padding-inline: var(--fc-gutter, clamp(16px, 4vw, 48px));
  display: flex; align-items: center; gap: 24px; padding-block: 14px;
}
.snav__brand { display: block; text-decoration: none; color: var(--brand); }
.snav__brand .logo { height: 34px; }
.snav__links { display: flex; gap: 22px; margin-left: auto; font-size: 14px; }
.snav__links a { position: relative; padding-block: 6px; text-decoration: none; color: var(--muted); }
.snav__links a[aria-current="true"] { color: var(--text); }
.snav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--brand);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease-out);
}
.snav__links a[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .snav__links a:hover { color: var(--text); } }
.snav__tools { display: flex; align-items: center; gap: 12px; }
.snav .lang-switch { border-radius: 999px; }
.snav .lang-switch button { font-size: 10.5px; padding: 5px 9px; }
.snav .lang-switch button.active { background: var(--text); color: var(--bg); }
.snav .lang-switch button:active, .snav .theme-toggle:active { transform: scale(.94); transition: transform .1s ease-out; }
/* Botón de menú: solo a 860 px o menos. Abre .snav__links como panel bajo la barra (app.js). */
.snav__toggle {
  /* 44 px de objetivo táctil; los márgenes negativos lo dejan ocupar lo mismo que el botón de tema (34 px). */
  display: none; flex: none; place-items: center; width: 44px; height: 44px; margin: -5px -8px -5px 0;
  border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer;
}
@media (max-width: 860px) {
  .snav__links { display: none; }
  .snav__tools { margin-left: auto; }
  .snav__toggle { display: grid; }
  .snav--open .snav__links {
    display: flex; flex-direction: column; gap: 0; margin: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
    padding: 4px var(--fc-gutter, clamp(16px, 4vw, 48px)) 12px;
    background: var(--bg); border-bottom: 1px solid var(--line); font-size: 16px;
  }
  .snav--open .snav__links a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; }
  .snav--open .snav__links a::after { display: none; }
}
@media (max-width: 420px) { .snav__brand .logo { height: 28px; } .snav__in { gap: 12px; } }
/* Teléfonos estrechos: sitio para el botón de menú sin scroll horizontal. */
@media (max-width: 380px) { .snav__brand .logo { height: 24px; } .snav__in { gap: 8px; } }

/* ---------- Pie (todas las páginas públicas) ---------- */
.sfoot { padding-block: 36px; color: var(--muted); font-size: 13.5px; border-top: 1px solid var(--line); }
.sfoot__in {
  max-width: var(--fc-container, 1180px); margin: 0 auto; padding-inline: var(--fc-gutter, clamp(16px, 4vw, 48px));
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.sfoot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.sfoot a { text-decoration: none; color: inherit; }
@media (hover: hover) and (pointer: fine) { .sfoot a:hover { color: var(--text); } }

/* ============================================
   INICIO (body.fc-home)
   ============================================ */
/* En claro, el gris de la maqueta (#62625C) en todas las páginas públicas: el de styles.css
   (#6B6B66) da 4,44:1 sobre --neutral (cita del café, etiqueta de cv-agent). */
:root:not([data-theme="dark"]) .fc { --muted: #62625C; }
/* Páginas de acceso: la línea "Edición 2026" sobre el verde iba al 45 % (≈3,3:1). */
.fc .auth__edition { color: rgba(247, 246, 243, .72); }
.fc-home {
  --fc-container: 1180px; --fc-gutter: clamp(16px, 4vw, 48px);
  background: var(--bg); color: var(--text); font: 400 16px/1.65 var(--font-sans); -webkit-font-smoothing: antialiased;
}
/* Reglas base de elementos con especificidad cero (:where): nunca pisan a las de componente. */
:where(.fc-home) a { color: inherit; }
:where(.fc-home) :is(h1, h2, h3, h4) {
  font-family: var(--font-serif); font-weight: 400; text-wrap: balance; margin: 0; font-optical-sizing: auto; letter-spacing: -.008em;
}
:where(.fc-home) p { margin: 0; }
:where(.fc-home) .wrap { max-width: var(--fc-container); margin: 0 auto; padding-inline: var(--fc-gutter); }
:where(.fc-home) .mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }

/* Botones */
.fbtn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 500; text-decoration: none; border: 1px solid var(--text); color: var(--text);
  transition: transform .2s var(--ease-out), background .2s, color .2s;
}
.fbtn--solid { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
@media (hover: hover) and (pointer: fine) { .fbtn:hover { transform: translateY(-2px); } }
.fbtn:active { transform: scale(.97); transition: transform .1s ease-out; }
a.card:active, .does a:active { transform: scale(.985); transition: transform .1s ease-out; }

/* Portada */
.fhero { padding-block: clamp(48px, 8vw, 104px) clamp(40px, 6vw, 72px); }
.fhero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.fhero__eyebrow { color: var(--muted); }
.fhero h1 { margin-top: 22px; font-size: clamp(2.875rem, 8.4vw, 7rem); line-height: .95; letter-spacing: -.032em; font-variation-settings: "SOFT" 60, "opsz" 144; }
.fhero h1 em { font-style: italic; font-weight: 300; color: var(--brand); }
.fhero__sub { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 34ch; margin-top: 28px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.fportrait { position: relative; margin: 0; }
.fportrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: 220px 220px 4px 4px; filter: saturate(.92); }
.fportrait figcaption { display: flex; justify-content: space-between; margin-top: 12px; color: var(--muted); }
.toc { margin-top: clamp(48px, 7vw, 88px); border-top: 1px solid var(--text); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.toc a { display: flex; flex-direction: column; gap: 6px; padding: 16px 14px 18px; text-decoration: none; border-right: 1px solid var(--line); }
.toc a:first-child { padding-left: 0; }
.toc a:last-child { border-right: 0; }
.toc .n { font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--brand); }
.toc .t { font-size: 13.5px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .toc a:hover .t { color: var(--text); } }
@media (max-width: 860px) {
  .fhero__grid { grid-template-columns: 1fr; }
  .fportrait { max-width: 380px; }
  .toc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc a { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0; }
}

/* Capítulos */
.chap { padding-block: clamp(72px, 10vw, 128px); border-top: 1px solid var(--line); scroll-margin-top: 64px; }
.chap__head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; margin-bottom: clamp(36px, 5vw, 64px); }
.chap__label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.chap__label .roman { font-family: var(--font-serif); font-style: italic; font-size: 44px; line-height: 1; color: var(--brand); letter-spacing: 0; text-transform: none; }
.chap h2 { font-size: clamp(2.125rem, 5vw, 4rem); line-height: 1.03; letter-spacing: -.022em; }
.flede { font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); max-width: 60ch; margin-top: 20px; }
@media (max-width: 760px) {
  .chap__head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .chap__label { flex-direction: row; align-items: baseline; gap: 12px; }
}

/* I · Enya */
.enya { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.enya__intro p + p { margin-top: 16px; }
.enya__intro .big { font-family: var(--font-serif); font-size: clamp(20px, 2vw, 25px); line-height: 1.4; color: var(--text); }
.enya__intro p { color: var(--muted); max-width: 52ch; }
.motto { margin: clamp(40px, 6vw, 64px) 0 0; padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--text); border-bottom: 1px solid var(--line); }
.motto q { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: clamp(42px, 6.6vw, 88px); line-height: 1; color: var(--brand); quotes: none; font-variation-settings: "SOFT" 100; }
.motto span { display: block; margin-top: 18px; color: var(--muted); }
.does { display: flex; flex-direction: column; }
.does a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.does a:first-child { border-top: 1px solid var(--line); }
.does h3 { font-size: 26px; font-style: italic; }
.does p { grid-column: 1; color: var(--muted); font-size: 15px; }
.does .arr { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 22px; color: var(--brand); transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .does a:hover .arr { transform: translateX(6px); } }
.aside { margin-top: 28px; display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: var(--neutral); border-radius: 14px; font-size: 14.5px; color: var(--muted); }
.aside b { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--cafe); font-size: 20px; line-height: 1; }
.social { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.social .fbtn { font-size: 14px; padding: 10px 16px; }
.name { margin-top: 22px; font-size: 13.5px; color: var(--muted); }
.name em { font-family: var(--font-serif); color: var(--text); }
@media (max-width: 860px) { .enya { grid-template-columns: 1fr; } }

/* II · Filosofía */
.chap .manifesto { font-family: var(--font-serif); font-size: clamp(30px, 4.4vw, 58px); line-height: 1.12; letter-spacing: -.008em; max-width: 20ch; font-variation-settings: "SOFT" 40; }
.chap .manifesto em { color: var(--brand); }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--text); }
.steps3 > div { padding: 22px 24px 0 0; }
.steps3 > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.steps3 .mono, .flow2 .mono, .how li.on .mono { color: var(--brand); }
.steps3 h3 { font-size: 24px; margin: 10px 0 8px; }
.steps3 p { color: var(--muted); font-size: 15px; }
@media (max-width: 760px) {
  .steps3 { grid-template-columns: 1fr; }
  .steps3 > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 22px; }
}

/* Etiquetas de estado */
.chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--ok { color: var(--ok); background: var(--ok-bg); }
.chip--now { color: var(--now); background: var(--now-bg); }
.chip--dev { color: var(--dev); background: var(--dev-bg); }
.chip--soon { color: var(--soon); background: var(--soon-bg); }

/* III · Catálogo */
.cat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; transition: transform .25s var(--ease-out), border-color .25s; }
@media (hover: hover) and (pointer: fine) { a.card:hover { transform: translateY(-4px); border-color: var(--brand); } }
.card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.card__id { display: flex; align-items: center; gap: 10px; color: var(--brand); }
.card__id .logo { height: 30px; }
.card__n { font-family: var(--font-serif); font-style: italic; font-size: 30px; color: var(--brand); }
.card h3 { font-size: 28px; line-height: 1.1; }
.card p { color: var(--muted); font-size: 15px; flex: 1; }
.card .go { font-size: 14px; font-weight: 500; color: var(--brand); }
.card .go.off { color: var(--muted); font-weight: 400; }
@media (max-width: 860px) { .cat { grid-template-columns: 1fr; } }

/* Sub-logos de capítulo */
.sublogo { display: block; margin-bottom: 22px; color: var(--brand); }
.sublogo .logo { height: 46px; max-width: 100%; }

/* IV · Agenda Llena — Enya señalando la pantalla; el texto vive en la pantalla en blanco de la foto */
.scene { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); }
.stage { position: sticky; top: 110px; align-self: start; }
.enyascreen { position: relative; margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .45); }
.enyascreen img { display: block; width: 100%; height: auto; }
.enyascreen__screen {
  position: absolute; left: 51%; top: 11.6%; width: 41%; height: 28.6%; padding: 5% 6% 4%;
  display: flex; flex-direction: column; justify-content: space-between; container-type: inline-size; color: var(--screen-ink);
}
.screen__n { font-family: var(--font-serif); font-style: italic; line-height: 1; font-size: 26cqw; color: var(--screen-ink); }
.screen__t { font-family: var(--font-serif); font-size: 12.5cqw; line-height: 1.1; color: var(--screen-ink); }
.screen__prog { display: flex; gap: 6px; }
.screen__prog i { flex: 1; height: 3px; border-radius: 2px; background: var(--screen-line); transition: background .3s; }
.screen__prog i.on { background: var(--screen-ink); }
.how { display: flex; flex-direction: column; }
.how__label { color: var(--muted); margin-bottom: 24px; }
.how ol { margin: 0; padding: 0; }
.how li { list-style: none; padding: clamp(28px, 6vh, 64px) 0; border-bottom: 1px solid var(--line); }
/* Pasos no activos: atenuados con color, no con opacidad, para no bajar de AA (4,5:1). */
.how li h3, .how li .mono { transition: color .35s var(--ease-out); }
.how li:not(.on) h3, .how li:not(.on) .mono { color: var(--muted); }
.how li:first-child { padding-top: 0; }
.how h3 { font-size: clamp(26px, 2.6vw, 34px); margin: 10px 0; }
.how p { color: var(--muted); max-width: 44ch; }
.sol__head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin: clamp(64px, 8vw, 104px) 0 28px; }
.sol__head h3 { font-size: clamp(28px, 3vw, 40px); }
.legend { display: flex; gap: 8px; flex-wrap: wrap; }
.sol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sol article { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.sol h4 { font-size: 23px; line-height: 1.15; }
.sol p { color: var(--muted); font-size: 14.5px; }
.reveal-pop { transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); transform-origin: 20% 0; }
.js-motion .reveal-pop:not(.in) { opacity: .001; transform: translateY(28px) scale(.96); }
.offer { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: clamp(28px, 4vw, 44px); background: var(--brand); color: var(--brand-ink); border-radius: 22px; }
.offer h3 { font-size: clamp(26px, 3vw, 38px); }
.offer p { opacity: .85; margin-top: 8px; max-width: 52ch; }
.offer .fbtn { border-color: var(--brand-ink); color: var(--brand-ink); }
@media (max-width: 900px) { .scene { grid-template-columns: 1fr; } .stage { position: relative; top: 0; } .sol { grid-template-columns: 1fr; } .offer { grid-template-columns: 1fr; } }
@media (min-width: 901px) and (max-width: 1100px) { .sol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* V · Agente de CV — el logo vive en la pantalla en blanco del portátil, con su perspectiva */
.cvscene { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.laptop { position: relative; margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .45); }
.laptop > img { display: block; width: 100%; height: auto; }
.lap1000 { position: absolute; left: 0; top: 0; width: 1000px; height: 1000px; transform-origin: 0 0; transform: scale(var(--k, 0)); pointer-events: none; }
.lapscreen {
  position: absolute; left: 0; top: 0; width: 300px; height: 200px; transform-origin: 0 0;
  transform: matrix3d(0.94825904, 0.093364845, 0, 0.00027209782, 0.14079712, 0.82069273, 0, -0.0001734114, 0, 0, 1, 0, 17.089844, 608.39844, 0, 1);
  display: flex; flex-direction: column; gap: 12px; padding: 14px; color: var(--screen-ink);
}
.lapbar { display: flex; align-items: center; gap: 4px; }
.lapbar i { width: 6px; height: 6px; border-radius: 50%; background: var(--screen-line); }
.lapbar span { margin-left: auto; font-family: var(--font-mono); font-size: 7px; letter-spacing: .14em; padding: 3px 6px; border-radius: 99px; border: 1px solid var(--screen-line); }
.laplogo .logo { width: 100%; }
.lapdoc { display: grid; gap: 6px; margin-top: 4px; }
.lapdoc b, .lapdoc i { display: block; height: 4px; border-radius: 2px; background: var(--screen-line); }
.lapdoc b { width: 34%; height: 6px; background: var(--screen-ink); opacity: .55; }
.lapdoc i.s { width: 62%; }
.cvchip { margin-top: 4px; }
.flow2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.flow2 > div { border-top: 1px solid var(--text); padding-top: 18px; }
.flow2 h3 { font-size: 22px; margin: 10px 0 8px; }
.flow2 p { color: var(--muted); font-size: 14.5px; }
.wait { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; color: var(--muted); }
@media (max-width: 860px) { .cvscene { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .flow2 { grid-template-columns: 1fr; } }

/* VI · Productos — foto del libro con zoom ligado al scroll (sin nada encima) */
.bookscene { position: relative; height: 190svh; }
@media (max-width: 760px) { .bookscene { height: 125svh; } }
.bookstage { position: sticky; top: 84px; display: grid; justify-items: center; gap: 24px; padding-block: 12px; }
.zframe {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px; background: var(--neutral);
  width: min(100%, 980px, calc((100vh - 130px) * 4 / 3)); width: min(100%, 980px, calc((100svh - 130px) * 4 / 3));
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .5);
}
/* Por defecto (sin JS o con movimiento reducido): el estado final, libro ampliado. */
.zimg { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1 / 1; transform-origin: 0 0; transform: translate(-56.68%, -91.44%) scale(2.1); }
.zimg > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.idxm { padding-block: clamp(28px, 5vw, 56px) 0; max-width: calc(980px + var(--fc-gutter) * 2); }
.idxm__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; color: var(--muted); }
.idxm__head h3 { font-size: clamp(24px, 2.6vw, 34px); color: var(--text); }
@media (min-width: 761px) { .idxm .idx { columns: 2; column-gap: 48px; } .idxm .idx li { break-inside: avoid; } }
.idx { list-style: none; margin: 0; padding: 0; }
.idx li a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px dotted var(--line); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .idx li a:hover .tt { color: var(--brand); } }
.idx .k { font-family: var(--font-serif); font-style: italic; color: var(--brand); font-size: 18px; min-width: 22px; }
.idx .tt { font-size: 15px; line-height: 1.35; }
.idx .pg { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.idx li.free a { border-bottom: 1px solid var(--brand); }
.idx li.free .tt { font-weight: 600; }
.storefoot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.storefoot p { font-size: 13.5px; color: var(--muted); }

/* Epílogo */
.close { padding-block: clamp(80px, 11vw, 140px); background: var(--brand); color: var(--brand-ink); scroll-margin-top: 64px; }
.close h2 { margin-top: 18px; font-size: clamp(44px, 7vw, 96px); line-height: .95; }
.close h2 em { font-weight: 300; }
.close__eyebrow { opacity: .75; }
.close__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: end; }
.close p { opacity: .85; max-width: 44ch; margin-top: 18px; }
.mail { display: flex; flex-direction: column; gap: 12px; }
.mail code { font-family: var(--font-mono); font-size: clamp(13px, 1.4vw, 16px); padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--brand-ink) 35%, transparent); border-radius: 12px; word-break: break-all; -webkit-user-select: all; user-select: all; }
.mail button { all: unset; cursor: pointer; align-self: flex-start; font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: 999px; background: var(--brand-ink); color: var(--brand); }
.mail button:active { transform: scale(.97); transition: transform .1s ease-out; }
.mail button:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 3px; }
@media (max-width: 760px) { .close__grid { grid-template-columns: 1fr; } }

/* ============================================
   PÁGINAS LEGALES (privacy.html, terms.html) — T-007b
   Texto largo: un h1, un h2 por sección, ancho de lectura de ~68 caracteres.
   ============================================ */
.legal {
  max-width: calc(68ch + 2 * var(--fc-gutter, clamp(16px, 4vw, 48px)));
  margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--fc-gutter, clamp(16px, 4vw, 48px)) clamp(56px, 8vw, 112px);
  font-size: 17px; line-height: 1.7; overflow-wrap: break-word;
}
.legal__head { padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.legal h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: 1.05; }
.legal__updated { margin-top: 14px; font-size: 14px; color: var(--muted); }
.legal__updated strong { font-weight: 500; }
.legal__lede { margin-top: 18px; }
.legal section { padding-top: 40px; scroll-margin-top: 80px; }
.legal h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.15; margin-bottom: 14px; }
.legal h3 { font-family: var(--font-sans); font-size: 17px; font-weight: 600; letter-spacing: 0; line-height: 1.4; margin: 26px 0 8px; }
.legal p + p, .legal p + ul, .legal ul + p, .legal .legal__table + p, .legal p + .legal__table { margin-top: 14px; }
.legal ul { padding-left: 1.25em; }
.legal li + li { margin-top: 8px; }
.legal li::marker { color: var(--muted); }
.legal strong { font-weight: 600; }
.legal a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .legal a:hover { text-decoration-thickness: 2px; } }
/* Tablas: dos columnas que caben a 390 px; el contenedor desplaza si alguna no cupiera. */
.legal__table { overflow-x: auto; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.legal thead th { font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--text); }
.legal tbody th { font-weight: 500; width: 50%; }
.sfoot a[aria-current="page"] { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :where(.fc) * { transition-property: opacity, color, background-color, border-color !important; }
  .js-motion .reveal-pop:not(.in) { opacity: 1; transform: none; }
  .bookscene { height: auto; }
  .bookstage { position: relative; top: 0; }
}

/* ---------- Alta: 18+ y aceptación (T-007b) ---------- */
.auth-consent { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 18px; font-size: 14px; line-height: 1.5; }
.auth-consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brand); cursor: pointer; }
.auth-consent label { cursor: pointer; }
.auth-consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.auth-consent__hint { margin: -10px 0 18px 32px; font-size: 13px; color: var(--muted); }
.auth-consent__hint[hidden] { display: none; }
.fc .provider-btn:disabled, .fc .auth-submit:disabled { opacity: .45; cursor: not-allowed; }