/* ══════════════════════════════════════════════════════════════════════════
   Celestial Bound — landing sobre la MARCA NUEVA (2026-08-05)

   Tokens y reglas: /brand/styles.css (vendored del design system en
   claude.ai/design «Celestial Bound — Design System»). Esta hoja solo compone
   la landing con esos tokens; no define colores ni tipografías propios.

   La casa se comporta como una editorial independiente:
   · Página cálida (--page-100), noche petróleo solo en hero, cierre y pie.
   · Gloock para titulares (sentence case), Cormorant para ledes, Literata
     para toda la prosa, Plex Mono SOLO en etiquetas/numerales/procedencia.
   · Filetes hairline en vez de cajas; la puntada (--thread-rule) marca
     comienzos; el sello (anillos) aparece UNA vez: en el pie.
   · ✦ es el único ornamento. Sin dorado, sin morado, sin gradientes deco,
     sin parallax de texto, sin animación ambiental.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --gutter-x: clamp(24px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; overflow-x: hidden; }
body { overflow-x: hidden; }

/* Cada sección es una BANDA: página, papel hundido, verde quieto o noche.
   Las bandas de noche llevan data-theme="night" en el markup: los alias
   semánticos de colors.css se dan vuelta solos. */
.field { position: relative; padding: var(--section-y) var(--gutter-x); }
.field--tight { padding-block: var(--section-y-tight); }
.field--page { background: var(--bg-page); }
.field--line { border-top: var(--border-hairline); }
.field--sunk { background: var(--bg-sunk); border-block: var(--border-hairline); }
.field--quiet { background: var(--accent-quiet); }
.field--night { background: var(--petrol-800); color: var(--text-body); }

.wrap { width: 100%; max-width: var(--content-max); margin: 0 auto; }
.measure { max-width: var(--measure-read); }

/* ── tipografía ──────────────────────────────────────────────────────────── */
h1, h2, h3, .display { text-wrap: balance; }
h1 {
  font: var(--weight-display) clamp(44px, 5vw, 76px)/1.02 var(--font-display);
  letter-spacing: -0.032em;
}
h1 span { display: block; }
h2 {
  font: var(--weight-display) clamp(27px, 2.9vw, 38px)/1.14 var(--font-display);
  letter-spacing: -0.024em;
  margin: var(--space-4) 0 var(--space-6);
  max-width: 26ch;
}
h3 { font-size: var(--size-lg); margin: 0 0 var(--space-3); }
p { font: var(--type-body); }
em { font-style: italic; }

/* Ceja: mono, caps, muy espaciada. Etiquetas, nunca oraciones. */
.eyebrow, .label {
  display: block;
  font: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}
/* La ceja abre sección con la puntada de hilo por encima — el patrón del
   arranque de capítulo del libro. (En el hero no: la noche ya abre sola.) */
.field .eyebrow::before {
  content: "";
  display: block;
  height: 1px;
  width: 56px;
  background: var(--thread-rule);
  color: var(--accent-warm);
  margin-bottom: var(--space-4);
}
.hero .eyebrow::before { display: none; }

/* Reaseguros y letra chica: prosa chiquita, NUNCA mono (mono no arma oraciones). */
.fine {
  font: var(--type-body-sm);
  font-size: var(--size-xs);
  color: var(--text-muted);
  max-width: var(--measure-read);
}

/* base.css subraya todo <a> (asume link de prosa). Acá casi ningún anchor es
   prosa — son CTAs, tarjetas de edición y nav — así que el que tiene clase se
   pinta solo y el <a> pelado conserva el subrayado de la marca. */
a { color: inherit; }
a:where([class]) { border-bottom: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── botones ─────────────────────────────────────────────────────────────────
   Primario = mar (sea green). Sobre noche = papel sobre tinta (onDark).
   Sin lift, sin scale: hover oscurece, press baja 1px. */
.cta {
  display: inline-block;
  background: var(--seagreen-600);
  color: var(--page-000);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 13px 24px;
  font: var(--type-ui);
  font-weight: var(--weight-read-strong);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-control);
}
.cta:hover { background: var(--seagreen-700); }
.cta:active { transform: translateY(1px); }
.cta small {
  display: block;
  font: var(--weight-meta) 10px/1.4 var(--font-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.82;
  margin-top: 2px;
}
[data-theme="night"] .cta { background: var(--page-200); color: var(--ink-900); }
[data-theme="night"] .cta:hover { background: var(--page-000); }

/* Secundario: hairline que se afirma al hover. */
.ghost {
  display: inline-block;
  background: transparent;
  color: var(--text-body);
  border: 1px solid var(--rule-hairline);
  border-radius: var(--radius-sm);
  padding: 12px 22px;
  font: var(--type-ui);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-control);
}
.ghost:hover {
  border-color: var(--rule-strong);
  background: color-mix(in oklab, var(--accent-quiet) 55%, transparent);
}
[data-theme="night"] .ghost:hover { background: transparent; color: var(--text-title); }

/* ── header: noche fija, una de las dos transparencias permitidas ─────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  height: 64px;
  padding: 0 var(--gutter-x);
  background: color-mix(in oklab, var(--ink-800) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(245, 239, 227, 0.14);
  color: var(--page-200);
}

/* Logotipo horizontal (variante de barra): Celestial + BOUND a 0.53×,
   tracking .11em. Sobre oscuro: Celestial en au lait, Bound en sand. */
.wordmark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; border-bottom: none; }
.wordmark .wm-name {
  font: var(--weight-display) 21px/1 var(--font-logo);
  letter-spacing: var(--track-logo);
  color: var(--page-200);
}
.wordmark .wm-word {
  font: var(--weight-display) 12px/1 var(--font-logo);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--page-400);
}

.nav-links { display: flex; gap: var(--space-6); }
.nav-link {
  font: var(--type-ui);
  color: var(--ink-300);
  text-decoration: none;
  border-bottom: none;
  transition: var(--transition-control);
}
.nav-link:hover { color: var(--page-100); }
.nav-actions { display: flex; align-items: center; gap: var(--space-4); }
.lang-toggle { display: flex; gap: 2px; }
.lang-toggle button {
  background: transparent; border: 0; cursor: pointer;
  font: var(--type-meta);
  letter-spacing: var(--track-meta);
  color: var(--ink-300);
  padding: 6px 6px;
  transition: var(--transition-control);
}
.lang-toggle button[aria-pressed="true"] {
  color: var(--page-100);
  border-bottom: 1px solid var(--sage-400);
}
@media (max-width: 860px) { .nav-links { display: none; } }

/* ── hero: la composición de noche ──────────────────────────────────────────
   Foto de escena (gente leyendo, luz real) velada al petróleo — una de las
   dos fotos a sangre permitidas. */
.hero {
  min-height: 88svh;
  display: grid; align-content: center;
  padding-top: 96px;
}
.hero-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-scene img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center right;
  filter: saturate(0.75) contrast(0.98) brightness(0.9);
  opacity: 0;
}
/* la primera se ve siempre: sin JS y sin animación, el hero nunca queda vacío */
.hero-scene img:first-child { opacity: 1; }

/* Rotación de escenas: cada copia es una edición de uno, y el hero lo muestra.
   Es la ÚNICA animación en loop de la página y va contra la regla ambiental de
   la marca — decisión de dirección de Andrea (2026-08-05), sostenida porque la
   foto ES el argumento, no decoración. Se compone como una página que pasa:
   cruce largo (2.4s del ciclo) y sin escala, nada de destellos.
   10 capas × 6s = 60s de ciclo; el delay lo da el orden, así que agregar o
   quitar fotos es tocar esta lista y el keyframe. */
@media (prefers-reduced-motion: no-preference) {
  /* Los delays van corridos -2.4s (el largo del cruce): así la PRIMERA arranca
     ya opaca en vez de aparecer desde el petróleo pelado al cargar. */
  .hero-scene img { animation: hero-rota 60s linear infinite; }
  .hero-scene img:nth-child(1) { animation-delay: -2.4s; }
  .hero-scene img:nth-child(2) { animation-delay: 3.6s; }
  .hero-scene img:nth-child(3) { animation-delay: 9.6s; }
  .hero-scene img:nth-child(4) { animation-delay: 15.6s; }
  .hero-scene img:nth-child(5) { animation-delay: 21.6s; }
  .hero-scene img:nth-child(6) { animation-delay: 27.6s; }
  .hero-scene img:nth-child(7) { animation-delay: 33.6s; }
  .hero-scene img:nth-child(8) { animation-delay: 39.6s; }
  .hero-scene img:nth-child(9) { animation-delay: 45.6s; }
  .hero-scene img:nth-child(10) { animation-delay: 51.6s; }
}
/* 6s visible de 60s: entra en 4%, se sostiene, sale en 4%. Los tramos de
   cruce se solapan con el vecino, así que nunca hay petróleo pelado. */
@keyframes hero-rota {
  0%    { opacity: 0; }
  4%    { opacity: 1; }
  10%   { opacity: 1; }
  14%   { opacity: 0; }
  100%  { opacity: 0; }
}
/* Velo de protección: petróleo, no negro. Garantiza el contraste del texto. */
.hero-scene::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--petrol-800) 0%, color-mix(in srgb, var(--petrol-800) 92%, transparent) 34%, color-mix(in srgb, var(--petrol-800) 42%, transparent) 74%, color-mix(in srgb, var(--petrol-800) 22%, transparent) 100%),
    color-mix(in srgb, var(--petrol-800) 30%, transparent);
}
@media (max-width: 900px) {
  .hero-scene img { object-position: center; }
  .hero-scene::after {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--petrol-800) 72%, transparent) 0%, var(--petrol-800) 78%),
      color-mix(in srgb, var(--petrol-800) 42%, transparent);
  }
}

.hero-grid {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--content-max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.hero-grid > * { max-width: min(58ch, 68%); }
@media (max-width: 1100px) { .hero-grid > * { max-width: min(58ch, 100%); } }

.hero-eyebrow { color: var(--ink-300); }
.hero h1 { color: var(--page-100); }
/* Gloock nunca se inclina: el énfasis del titular va en la itálica REAL de
   Cormorant, en sand. */
.hero h1 em { font-family: var(--font-serif); font-weight: 400; font-style: italic; color: var(--page-400); }

.price-tag { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-6) 0 0; }
.price-tag b {
  font: var(--weight-display) clamp(28px, 2.6vw, 40px)/1 var(--font-display);
  letter-spacing: var(--track-display);
  color: var(--page-100);
}
.price-tag span {
  font: var(--type-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--page-400);
}

/* Captura de nacimiento: los campos son DATOS → mono. */
.birth { margin-top: var(--space-6); max-width: 46rem; }
.birth .label { color: var(--ink-300); margin-bottom: var(--space-3); }
.birth-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: stretch; }
.birth input {
  background: color-mix(in srgb, var(--petrol-900) 45%, transparent);
  border: 1px solid var(--rule-on-inverse);
  color: var(--page-100);
  border-radius: var(--radius-sm);
  padding: 12px 12px;
  font: 400 15px/1 var(--font-meta);
  letter-spacing: 0.06em;
  width: 5.2rem;
  transition: var(--transition-control);
}
.birth input.wide { width: 6.6rem; }
.birth input::placeholder { color: var(--page-400); opacity: 0.6; }
.birth input:hover { border-color: var(--page-400); }
.birth .fine { margin: var(--space-3) 0 0; color: var(--page-400); }
.birth-error {
  font: var(--type-body-sm); color: var(--alert-100);
  margin: var(--space-2) 0 0; min-height: 1.2em;
}

/* Lede en Cormorant: el contrapeso delicado del Gloock. */
.hero-sub {
  margin: var(--space-8) 0 0;
  font: var(--type-lede);
  color: var(--ink-200);
  max-width: 46ch;
}
/* Línea de prueba: mono con la ✦ de la procedencia. Datos, no oración. */
.hero-specs {
  margin-top: var(--space-4);
  font: var(--weight-meta) var(--size-2xs)/1.8 var(--font-meta);
  letter-spacing: 0.06em;
  color: var(--ink-300);
  max-width: none;
}
.hero-specs::before { content: "\2726\00a0\00a0"; color: var(--sage-400); }

@media (max-width: 700px) {
  .birth input { flex: 1 1 4.5rem; width: auto; min-width: 4rem; }
  .birth input.wide { flex: 1 1 6rem; width: auto; }
  .birth .cta { flex: 1 1 100%; text-align: center; }
}

/* ── banda de confianza ──────────────────────────────────────────────────── */
.trust { padding-block: var(--space-5); border-bottom: var(--border-hairline); }
.trust-inner { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-12); justify-content: space-between; }
.trust-inner span { font: var(--type-body-sm); color: var(--text-muted); }
.trust-inner span::before { content: "\2726\00a0\00a0"; color: var(--accent); font-size: 0.8em; }
.trust-inner b { font-weight: var(--weight-read-strong); color: var(--text-body); }

.two-col {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
@media (max-width: 860px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

/* ── el libro: 23 en numeral de capítulo (brûlée) ────────────────────────── */
.count {
  font: var(--weight-display) clamp(96px, 16vw, 220px)/0.9 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--accent-warm);
  margin: var(--space-4) 0 0;
}
.count-cap {
  font: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-2) 0 var(--space-8);
}

/* Índice: <details> nativo con filetes hairline; los números en mono brûlée,
   los títulos de parte en Gloock — el índice se lee como el del libro. */
.parts { border-top: var(--border-strong); margin-top: var(--space-8); }
.part { border-bottom: var(--border-hairline); }
.part summary {
  display: flex; align-items: baseline; gap: var(--space-4); cursor: pointer;
  padding: var(--space-4) 0; list-style: none;
}
.part summary::-webkit-details-marker { display: none; }
.part summary::after {
  content: "+";
  margin-left: auto;
  font: var(--weight-meta) var(--size-md)/1 var(--font-meta);
  color: var(--text-faint);
  transition: var(--transition-control);
}
.part[open] summary::after { content: "\2013"; }
.part summary:hover .toc-title { color: var(--accent-hover); }
.toc-num {
  font: var(--type-meta);
  letter-spacing: 0.16em;
  color: var(--accent-warm);
  min-width: 1.6rem;
}
.toc-title {
  font: var(--weight-display) clamp(18px, 1.6vw, 24px)/var(--lh-title) var(--font-display);
  letter-spacing: var(--track-title);
  color: var(--text-title);
  transition: var(--transition-control);
}
.toc-count {
  font: var(--type-meta);
  font-size: var(--size-3xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.part-desc { font: var(--type-body-sm); color: var(--text-muted); max-width: var(--measure-narrow); margin: 0 0 var(--space-4); }
.chapters { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.chapters li {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-2) 0;
  font: var(--type-body-sm);
  border-top: var(--border-hairline);
}
.chapters li:first-child { border-top: 0; }
.chapters b {
  font: var(--type-meta);
  font-size: var(--size-3xs);
  letter-spacing: 0.12em;
  color: var(--accent-warm);
  min-width: 1.8rem;
}
.chapters .needs-time {
  font-style: normal; margin-left: auto;
  font: var(--type-meta);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

/* ── páginas del libro: el papel existe SOLO adentro de una página ──────────
   Reproducidas a tamaño de imprenta (10.5/15.5pt Literata, justificado) con
   su nota de procedencia ✦ — la página que prueba el producto. */
.loose {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-6);
  align-items: start;
}
.pg {
  aspect-ratio: var(--book-aspect);
  max-width: 320px;
  background: var(--bg-plate);
  color: var(--ink-800);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  padding: 26px 28px;
  position: relative;
  overflow: hidden;
}
.pg:nth-child(2) { margin-top: var(--space-12); }
.pg h4 {
  font: var(--weight-meta) 8px/1.4 var(--font-meta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin: 0 0 14px;
}
.pg p {
  font: 400 10.5px/15.5px var(--font-read);
  text-align: justify;
  hyphens: auto;
  margin: 0 0 8px;
  max-width: none;
}
.pg .cite {
  position: absolute; left: 28px; right: 28px; bottom: 16px;
  font: var(--weight-meta) 7px/1.6 var(--font-meta);
  letter-spacing: 0.04em;
  color: var(--ink-500);
}

/* ── extractos: también son páginas, no tarjetas ─────────────────────────── */
.excerpts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-5);
  margin-top: var(--space-10);
}
.exc {
  background: var(--bg-plate);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
  padding: clamp(1.4rem, 2.4vw, 2rem);
}
.exc-label {
  font: var(--type-meta);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-4);
}
.exc p { font: var(--type-body-sm); margin: 0 0 var(--space-4); }
.exc em { font-style: italic; }
.exc-cite {
  font: var(--type-meta);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}
.excerpts-cta { margin-top: var(--space-10); }
.excerpts-cta .fine { margin-top: var(--space-3); }

/* ── pasos: filete fuerte + numeral mono, el arranque de capítulo ────────── */
.steps {
  list-style: none; margin: var(--space-16) 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-10);
}
.steps li { border-top: var(--border-strong); padding-top: var(--space-4); }
.step-n {
  font: var(--type-meta);
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.steps p { font: var(--type-body-sm); color: var(--text-muted); }

/* ── ediciones: tarjetas planas que se afirman al hover ──────────────────── */
.editions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-5);
  margin-top: var(--space-12);
}
.edition {
  display: block; text-decoration: none;
  background: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-0);
  padding: var(--space-6);
  transition: var(--transition-control);
}
.edition:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-2); }
.edition-label {
  display: block;
  font: var(--type-meta);
  font-size: var(--size-3xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.edition h3 { margin: var(--space-3) 0 var(--space-3); }
.edition p { font: var(--type-body-sm); color: var(--text-muted); }
.edition-meta {
  font: var(--type-meta);
  font-size: var(--size-3xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-warm);
}
.edition.is-soon { opacity: 0.66; }
.edition.is-soon:hover { opacity: 1; }

/* ── precio: un producto, el precio es el titular ────────────────────────── */
.offer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin-top: var(--space-8); }
.offer-price {
  font: var(--weight-display) clamp(72px, 10vw, 150px)/0.85 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--accent-warm);
  margin: 0;
}
.offer-name {
  font: var(--weight-display) clamp(24px, 2.4vw, 34px)/var(--lh-title) var(--font-display);
  letter-spacing: var(--track-title);
  color: var(--text-title);
  margin: var(--space-2) 0 var(--space-4);
}
.tier-flag {
  display: block;
  font: var(--type-meta);
  font-size: var(--size-3xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tier-list { list-style: none; margin: var(--space-4) 0 var(--space-6); padding: 0; }
.tier-list li {
  display: flex; gap: var(--space-3); align-items: baseline;
  padding: var(--space-2) 0;
  font: var(--type-body-sm);
  border-top: var(--border-hairline);
}
.tier-list li:first-child { border-top: 0; }
.tier-list li::before { content: "\00b7"; color: var(--page-500); font-weight: 600; }
.offer-body .fine { margin-top: var(--space-3); }

.soon {
  margin-top: clamp(2.5rem, 6vh, 4.5rem); padding-top: clamp(1.5rem, 3vh, 2.5rem);
  border-top: var(--border-hairline);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: clamp(1rem, 3vw, 3rem); align-items: center;
}
.soon p { font: var(--type-body-sm); color: var(--text-muted); margin: var(--space-2) 0 0; max-width: 34rem; }
.soon .waitlist { margin: 0; max-width: none; }
@media (max-width: 860px) {
  .offer { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .soon { grid-template-columns: minmax(0, 1fr); }
}

/* ── regalo: la banda quieta (accent-quiet), voz de lectora ──────────────── */
.gift-quote {
  font: 400 clamp(24px, 2.6vw, 34px)/1.3 var(--font-read);
  color: var(--ink-900);
  margin: 0 0 var(--space-6);
  max-width: 24ch;
}
.gift-quote span { display: block; }
.gift-quote span:nth-child(2) { color: var(--ink-700); }
.gift-quote span:nth-child(3) { font-style: italic; }
.field--quiet .eyebrow { color: var(--seagreen-700); }
.field--quiet .fine { color: var(--ink-700); }

/* ── nombres: colofón en mono, quieto ────────────────────────────────────── */
.names { overflow: hidden; padding-inline: 0; text-align: center; }
.names .eyebrow { padding-inline: var(--gutter-x); }
.names .eyebrow::before { margin-inline: auto; }
.row {
  white-space: nowrap;
  font: var(--weight-meta) clamp(13px, 1.4vw, 16px)/2.2 var(--font-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--text-muted);
}
.row.outline { color: var(--text-faint); }
.names-foot {
  padding-inline: var(--gutter-x);
  margin: var(--space-8) auto 0;
  font: var(--type-lede);
  color: var(--text-body);
  max-width: 44ch;
}

/* ── cierre de noche: la página termina como abre la tapa ────────────────── */
.final { text-align: center; }
.final h2 { margin-inline: auto; color: var(--page-100); max-width: 20ch; }
.final h2 em { font-family: var(--font-serif); font-weight: 400; font-style: italic; color: var(--page-400); }
.final .measure { margin-inline: auto; color: var(--ink-200); font: var(--type-lede); }
.final .fine { color: var(--page-400); margin-inline: auto; }

/* waitlist */
.waitlist { margin: var(--space-10) auto 0; max-width: 32rem; }
.waitlist-label {
  font: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.field-row { display: flex; gap: var(--space-2); }
.field-row input {
  flex: 1;
  background: var(--bg-plate);
  border: var(--border-hairline);
  color: var(--text-body);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font: var(--type-ui);
  transition: var(--transition-control);
}
.field-row input:hover { border-color: var(--rule-strong); }
.field-row input::placeholder { color: var(--text-faint); }
[data-theme="night"] .field-row input { background: color-mix(in srgb, var(--petrol-900) 45%, transparent); }
.field-row button {
  background: transparent;
  border: 1px solid var(--rule-hairline);
  color: var(--text-body);
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font: var(--type-ui);
  font-weight: var(--weight-read-strong);
  transition: var(--transition-control);
}
.field-row button:hover { border-color: var(--rule-strong); background: color-mix(in oklab, var(--accent-quiet) 55%, transparent); }
[data-theme="night"] .field-row button:hover { background: transparent; color: var(--text-title); }
.field-row button:disabled { opacity: 0.4; cursor: not-allowed; }
.form-status { min-height: 1.4em; font: var(--type-body-sm); margin: var(--space-3) 0 0; }
.form-status.is-error { color: var(--state-error); }
[data-theme="night"] .form-status.is-error { color: var(--alert-100); }
.form-status.is-ok { color: var(--accent); }
.form-note { margin-top: var(--space-2); }

/* ── pie: tinta, el sello aparece su única vez ───────────────────────────── */
.site-footer {
  background: var(--ink-800);
  color: var(--page-400);
  padding: var(--space-16) var(--gutter-x) var(--space-10);
}
.footer-brand { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-6); }
.footer-seal {
  width: var(--seal-size-sm); height: var(--seal-size-sm);
  border-radius: 50%;
  background: var(--seal-rings);
  color: var(--seagreen-400);
  flex-shrink: 0;
}
.footer-brand .wordmark { border: 0; }
.site-footer p { font: var(--type-body-sm); color: var(--ink-300); margin: 0 0 var(--space-2); max-width: var(--measure-read); }
.site-footer .fine { color: var(--ink-400); }
.footer-legal {
  margin-top: var(--space-10); padding-top: var(--space-5);
  border-top: 1px solid rgba(245, 239, 227, 0.14);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  font: var(--weight-meta) var(--size-3xs)/1 var(--font-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* anclas bajo el header fijo */
:is(#book, #how, #editions, #pricing, #excerpts, #join) { scroll-margin-top: 5rem; }