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

   Tokens y reglas: /brand/styles.css (vendored del design system). Esta hoja
   NO define color ni tipografía propios: mapea los nombres de token que ya
   consumen las 12 rutas (--paper, --ink, --accent, --gold, --mono…) a los
   alias semánticos de la marca. Por eso el re-skin no tocó los .svelte.

   Clave: la landing abre en noche (vitrina); el app es PAPEL con tinta,
   porque acá se completan tareas — formularios largos, listas, estados. La
   noche vuelve como superficie `.night` en los momentos de vitrina (masthead
   de producto, login, confirmación) vía `data-theme="night"`.

   Historia: Edición Fundadora (Bricolage/slate/crimson) → DESIGN.md; el
   Pastel anterior → docs/design-pastel-app.md.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── superficies ─────────────────────────────────────────────────────── */
  --paper:   var(--page-100);   /* la página */
  --recess:  var(--page-300);   /* banda alternada / panel rebajado */
  --page:    var(--page-000);   /* contenido: páginas del libro, tarjetas de prosa */
  --cloth:   var(--petrol-900); /* tapa de libro */
  --cloth-2: var(--petrol-900);
  --cover:   var(--petrol-900);
  --cover-2: var(--petrol-900);
  --cover-bg: var(--cloth);

  /* ── tinta ───────────────────────────────────────────────────────────── */
  --ink:     var(--ink-900);
  --ink-2:   var(--ink-700);
  --ink-3:   var(--ink-600);    /* pasa AA sobre paper, page y recess */
  --line:    var(--rule-hairline);
  --line-2:  var(--page-400);

  /* ── acentos ─────────────────────────────────────────────────────────────
     El mar (--accent) es LA acción y la confirmación. El crimson de la Edición
     Fundadora murió con ella: la marca nueva tiene un solo acento y el rojo
     queda SEMÁNTICO (error). Los dos nombres viejos siguen resolviendo para no
     tocar las rutas — pero ahora apuntan a cosas distintas, que es el arreglo:
     antes el CTA y el error eran literalmente el mismo color. */
  --accent:  var(--seagreen-600);
  --crimson: var(--seagreen-600);  /* compat: era el CTA → ahora el CTA es el mar */
  --aqua:    var(--sage-400);      /* compat: el brillo sobre oscuro → sage */
  --gold:    var(--brulee-600);    /* compat: etiquetas y numerales → crème brûlée */
  --error:   var(--alert-600);
  --error-strong: #7F1F19;         /* hover del destructivo, un paso más oscuro */

  /* ── campo night: petróleo, composición (no dark mode) ───────────────── */
  --night-bg:  var(--petrol-800);
  --night-ink: var(--page-100);
  --night-sub: var(--page-200);
  --night-mut: var(--page-400);

  /* ── tipografía: cuatro caras, tres oficios ──────────────────────────────
     Gloock titula, Cormorant hace ledes, Literata lee (y también es la UI: la
     marca no tiene una cuarta familia), Plex Mono etiqueta y numera. */
  --display: var(--font-display);
  --sans:    var(--font-read);
  --mono:    var(--font-meta);
  --serif:   var(--font-read);

  --measure: var(--measure-narrow);
  --shell:   var(--content-max);
  --r:       var(--radius-sm);
}

* { box-sizing: border-box; }
/* base.css subraya TODO <a> porque asume un link de prosa. En el app casi ningún
   anchor es prosa: son tarjetas, botones y nav (`.shop-card-main` envuelve una
   tarjeta entera y se comía un filete debajo del texto). Los anchors CON clase
   se pintan solos; el <a> pelado sigue con el subrayado de la marca. */
a:where([class]) { border-bottom: none; color: inherit; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Sin esto el contenido flota arriba y abajo quedan cientos de píxeles de papel:
   el app no tiene campos a sangre como la landing, así que el alto lo da el shell. */
body { min-height: 100vh; }
body > div, #app { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.site-footer { flex: none; background: var(--ink-800); color: var(--page-400); padding: var(--space-10) var(--space-6); }
.site-footer p, .site-footer .foot-fine { color: var(--ink-300); margin: 0 0 var(--space-1); font: var(--type-body-sm); }
.site-footer a { color: var(--page-200); border-bottom-color: rgba(245, 239, 227, 0.32); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-800);
  font: var(--type-body);
  overflow-x: hidden;
}

/* Gloock titula en SENTENCE CASE — nunca en caja alta, nunca espaciado, nunca
   inclinado. Que el app sea Operate y no Persuade se resuelve con la escala,
   no gritando: h2/h3 bajan de cuerpo, no cambian de voz. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--text-title);
  letter-spacing: var(--track-title);
  margin: 0;
}
h1 { font-size: clamp(30px, 1.3rem + 1.9vw, 44px); line-height: var(--lh-snug); letter-spacing: var(--track-display); }
h2 { font-size: clamp(22px, 1.15rem + 0.9vw, 30px); line-height: var(--lh-title); margin: 0 0 var(--space-4); }
h3 { font-size: clamp(17px, 0.95rem + 0.4vw, 20px); line-height: var(--lh-title); }
p  { margin: 0 0 var(--space-4); color: var(--text-muted); max-width: var(--measure-read); }
/* La itálica es la de Literata; el énfasis no cambia de color en prosa. */
em { font-style: italic; color: inherit; }

/* el letterpress era del Pastel: acá el texto es plano */
.emboss, .deboss { text-shadow: none; }

.eyebrow {
  display: block;
  font: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}
.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;
}

/* ── layout ──────────────────────────────────────────────────────────────── */
.section { position: relative; z-index: 1; }
.recessed { background: var(--recess); border-block: var(--border-hairline); }
.wrap { max-width: var(--shell); margin: 0 auto; padding: clamp(2.5rem, 6vh, 4.5rem) var(--space-6); }

/* Las costuras de papel rasgado (.torn) eran del Pastel. Acá las secciones
   cortan por cambio de banda. Neutralizado por si algún componente lo pinta. */
.torn { display: none; }

/* ── botones ─────────────────────────────────────────────────────────────────
   Sin lift, sin scale: el hover oscurece, el press baja 1px. Literata en caja
   baja — los botones de la marca no gritan en mayúsculas. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: var(--type-ui);
  font-weight: var(--weight-read-strong);
  white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r);
  padding: 13px 24px; cursor: pointer; text-decoration: none;
  transition: var(--transition-control);
}
.btn--ink { background: var(--accent); color: var(--page-000); }
.btn--ink:hover { background: var(--accent-hover); }
.btn--ink:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--text-body); border-color: var(--rule-hairline); }
.btn--ghost:hover { border-color: var(--rule-strong); background: color-mix(in oklab, var(--accent-quiet) 55%, transparent); }
/* `btn--gold` era el CTA del Pastel; sigue siendo la acción principal. */
.btn--gold { background: var(--accent); color: var(--page-000); }
.btn--gold:hover { background: var(--accent-hover); }
.btn--gold:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; cursor: not-allowed; }

.tertiary-btn {
  background: none; border: 0; cursor: pointer; padding: 0;
  font: var(--type-body-sm); color: var(--text-muted);
  transition: var(--transition-control);
}
.tertiary-btn:hover { color: var(--text-body); }

.tlink {
  font: var(--type-ui);
  color: var(--text-body); cursor: pointer; text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--text-body) 32%, transparent);
  background: none; padding: 0;
  transition: var(--transition-control);
}
.tlink:hover { color: var(--accent-hover); border-bottom-color: currentColor; }

/* ── header / nav ────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg-page) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: var(--border-hairline);
}
.site-header-inner {
  max-width: var(--shell); margin: 0 auto; min-height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-2) var(--space-6);
}
/* Logotipo horizontal: Celestial en Gloock + BOUND a ~0.53× con tracking .11em.
   No hay marca gráfica — las palabras SON el logo. */
.wordmark {
  display: flex; align-items: baseline; gap: var(--space-2);
  color: var(--text-title);
  text-decoration: none; border-bottom: none; flex: none;
}
.wordmark .mark {
  /* el sello: anillos de hilo, no un ícono celeste */
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--seal-rings-small); color: var(--accent);
  align-self: center; flex: none;
}
.wordmark .wm-name {
  font-family: var(--font-logo); font-weight: var(--weight-display); font-size: 21px;
  letter-spacing: var(--track-logo); line-height: 1;
}
/* BOUND a ~0.53× del cuerpo de Celestial, tracking .11em (variante horizontal) */
.wordmark .wm-word {
  font-family: var(--font-logo); font-weight: var(--weight-display); font-size: 0.53em;
  letter-spacing: 0.11em; text-transform: uppercase; line-height: 1;
  color: var(--text-muted);
}
.night .wordmark, .night .wordmark .wm-name { color: var(--page-100); }
.night .wordmark .wm-word { color: var(--page-400); }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 1.8rem); }
.nav-link {
  font: var(--type-ui); color: var(--text-muted);
  text-decoration: none; border-bottom: none;
  transition: var(--transition-control);
}
.nav-link:hover { color: var(--text-body); }
/* la ruta actual se marca con un filete al pie, no con un pill relleno */
.nav-link[aria-current="page"] { color: var(--text-body); border-bottom: 2px solid var(--accent); }
.nav-actions { display: flex; align-items: center; gap: var(--space-4); }
.nav-cta { padding: 9px 16px; }

.lang-toggle { display: inline-flex; gap: 2px; }
.lang-toggle button {
  background: transparent; color: var(--text-muted); border: 0; cursor: pointer;
  font: var(--type-meta); letter-spacing: var(--track-meta);
  padding: 6px 6px; text-transform: uppercase;
  transition: var(--transition-control);
}
.lang-toggle button[aria-pressed="true"] { color: var(--text-body); border-bottom: 1px solid var(--accent); }
@media (max-width: 780px) { .nav-links { display: none; } }
/* En 390px con el label largo ("Iniciar sesión") el header medía 396px y el CTA
   quedaba cortado contra `overflow-x: hidden`. Se achica el botón, no la guía. */
@media (max-width: 480px) {
  .nav-actions { gap: var(--space-3); }
  .nav-cta { padding: 9px 12px; font-size: var(--size-xs); }
}

/* ── superficies night: el petróleo de la marca ──────────────────────────────
   `data-theme="night"` da vuelta los alias semánticos; las reglas de acá solo
   cubren las clases legacy que las rutas ya usan. */
.night {
  position: relative;
  background: var(--night-bg);
  color: var(--page-200);
}
.night > * { position: relative; }
.night h1, .night h2, .night h3 { color: var(--night-ink); }
.night p { color: var(--ink-200); }
.night .eyebrow { color: var(--night-mut); }
.night em { font-style: italic; color: var(--page-400); }
.night .btn--ink, .night .btn--gold { background: var(--page-200); color: var(--ink-900); }
.night .btn--ink:hover, .night .btn--gold:hover { background: var(--page-000); }
.night .btn--ghost { color: var(--page-200); border-color: var(--rule-on-inverse); }
.night .btn--ghost:hover { background: transparent; border-color: var(--page-300); color: var(--page-100); }
.night .tlink { color: var(--page-200); border-bottom-color: rgba(245, 239, 227, 0.4); }
.night .tlink:hover { color: var(--page-000); }
.night .nav-link:hover { color: var(--page-100); }
/* las estrellitas eran del Pastel — el mundo no lleva iconografía celeste */
.night-stars { display: none; }

/* ── tarjetas / prosa de libro ───────────────────────────────────────────── */
.exc {
  background: var(--page); color: var(--text-body);
  border: var(--border-hairline); border-radius: var(--radius-md);
  box-shadow: var(--shadow-0);
  padding: clamp(1.5rem, 3vw, 2.1rem);
}
.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);
}
/* la prosa del libro es Literata, acá y en el PDF */
.exc p {
  font: var(--type-body); color: var(--text-body); margin: 0 0 var(--space-4);
}
/* la cita ✦: el ÚNICO lugar del app donde aparecen datos de carta en prosa */
.exc-cite {
  font: var(--type-meta); font-size: 10px;
  letter-spacing: 0.06em; color: var(--ink-500);
}
.excerpts .wrap { max-width: 62rem; }
.excerpts-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 820px) {
  .excerpts-grid { grid-template-columns: 1fr 1fr; }
  .exc-lead { grid-column: 1 / -1; }
}

/* ── formularios ─────────────────────────────────────────────────────────── */
input, select, textarea {
  font: var(--type-ui); color: var(--text-body);
  background: var(--bg-plate); border: var(--border-hairline); border-radius: var(--r);
  padding: 12px 14px; width: 100%;
  transition: var(--transition-control);
}
input:hover, select:hover, textarea:hover { border-color: var(--rule-strong); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--ring-focus); border-color: var(--rule-strong);
}
input[aria-invalid="true"] { border-color: var(--error); }
/* Los labels son etiquetas: mono, caps, tracking. Nunca oraciones. */
label {
  font: var(--type-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-muted);
}
.night input, .night select, .night textarea {
  background: color-mix(in srgb, var(--petrol-900) 45%, transparent);
  color: var(--page-100); border-color: var(--rule-on-inverse);
}
.night input:hover, .night select:hover, .night textarea:hover { border-color: var(--page-400); }
.night input::placeholder { color: var(--night-mut); }
.night label { color: var(--night-mut); }

.form-status { font: var(--type-body-sm); margin: var(--space-2) 0 0; min-height: 1.3em; }
.form-status.is-error { color: var(--error); }
.form-status.is-ok { color: var(--accent); }
.night .form-status.is-ok { color: var(--sage-400); }
.night .form-status.is-error { color: var(--alert-100); }

/* panel: le da cuerpo a un formulario o a un bloque de datos sobre la página */
.panel {
  background: var(--page); border: var(--border-hairline); border-radius: var(--radius-md);
  box-shadow: var(--shadow-0);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

/* ── el libro como objeto (portadas en shop / mis libros) ────────────────────
   Tapa petróleo con el nombre en Gloock y el sello de hilo. El «orbit» con
   planeta que había acá era una marca celeste dibujada — prohibido por la guía. */
.cover-flat {
  container-type: inline-size;
  position: relative; width: min(300px, 74vw); aspect-ratio: var(--book-aspect); margin: 0 auto;
  border-radius: 2px 5px 5px 2px;
  background: var(--cloth);
  color: var(--page-200);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 15% 11% 12%; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(245, 239, 227, 0.14), var(--shadow-book);
}
.cover-orbit {
  align-self: flex-end; width: 26%; aspect-ratio: 1;
  border-radius: 50%; background: var(--seal-rings); color: var(--sage-400);
}
.cover-orbit svg { display: none; }
.cover-plate { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.cover-name {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(1.4rem, 17cqi, 2.2rem); line-height: var(--lh-snug);
  letter-spacing: var(--track-display); color: var(--page-100); white-space: nowrap;
}
.cover-birth { font: var(--weight-meta) clamp(0.44rem, 3.4cqi, 0.6rem)/1.6 var(--font-meta); letter-spacing: 0.1em; color: var(--night-mut); }
.cover-logo {
  font-family: var(--font-logo); font-size: clamp(0.42rem, 3.2cqi, 0.58rem);
  letter-spacing: 0.14em; text-transform: uppercase; text-align: center; line-height: 1.7;
  color: var(--night-mut);
}

/* ── feature (bloque foto + copy, sigue vivo en una ruta) ────────────────── */
.feature { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.feature-body p { color: var(--text-muted); max-width: var(--measure-read); }
.feature-cap { font: var(--type-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-faint); margin-top: var(--space-5); }
@media (max-width: 820px) { .feature { grid-template-columns: 1fr; } }

/* ── modal ───────────────────────────────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(14, 16, 19, 0.55); display: grid; place-items: center; z-index: 100; padding: var(--space-6); }
.modal {
  background: var(--page); color: var(--text-body); border-radius: var(--radius-md);
  border: var(--border-hairline); max-width: 34rem; width: 100%;
  padding: clamp(1.5rem, 4vw, 2.4rem); box-shadow: var(--shadow-3);
}

/* ── motion: lento y con peso; nada rebota, nada titila ──────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  @keyframes cbCast  { 0%, 100% { transform: scaleX(1); opacity: 0.4; } 50% { transform: scaleX(0.94); opacity: 0.32; } }
}