/* Hallmark · route: custom (bespoke) · structure: libro de muestras en dos voces · idea: "madera → verdadera"
 * paper: oklch(95.5% 0.014 78) · accent: oklch(46% 0.12 105) · display: Cormorant Garamond (voz) + Instrument Sans 700 (títulos de sección, decisión de Pepe 14-10-2026) · body: Instrument Sans
 * axes: light / high-contrast-serif / chromatic-other · nav: índice flotante (popover) · footer: firma con logos
 */
@import url("tokens.css?v=2");

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  font-size-adjust: from-font;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration-thickness: var(--rule-hair); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
::selection { background: var(--color-paper-3); color: var(--color-ink); }
p, li { text-wrap: pretty; }
h1, h2, h3, h4, .terna .nombre, .refran, .lede, .vd-line { font-style: normal; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
h1, h2, h3, h4 { margin: 0; }
em { font-style: italic; }
.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; }
.skip { position: absolute; left: var(--space-sm); top: -4rem; background: var(--color-ink); color: var(--color-paper); padding: var(--space-2xs) var(--space-sm); z-index: 20; }
.skip:focus { top: var(--space-sm); }

.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Cabecera ---------- */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); }
.masthead .logo-noon { height: 40px; width: auto; color: var(--color-ink); }
.masthead .for { font-size: var(--text-sm); color: var(--color-muted); letter-spacing: 0.02em; white-space: nowrap; }

/* ---------- Voces ---------- */
.voz {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-ink-2);
  font-size: var(--text-display);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.voz--s { font-size: var(--text-display-s); line-height: 1.05; }
.voz strong { font-weight: 500; }
.lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--color-ink);
  max-width: 30ch;
  margin: var(--space-md) 0 0;
}
.prose p { max-width: var(--measure); margin: 0 0 var(--space-sm); }
.prose p:last-child { margin-bottom: 0; }

.costura {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-muted);
  max-width: var(--measure-note);
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-top: var(--space-xs);
}
.costura + .costura { margin-top: var(--space-lg); }
.costura .label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2xs);
}
.costura p { margin: 0 0 var(--space-2xs); }

sup.ref { font-size: 0.68rem; line-height: 0; margin-left: 0.08em; vertical-align: super; font-family: var(--font-body); font-weight: 500; }
sup.ref a { text-decoration: none; color: var(--color-muted); }
sup.ref a:hover { color: var(--color-accent); }

/* ---------- Capítulos ---------- */
.chapter { padding-block: var(--space-2xl); }
.chapter + .chapter { border-top: var(--rule-hair) solid var(--color-rule-2); }
.chapter--tight { padding-block: var(--space-xl); }
.chapter--deep { padding-block: var(--space-3xl) var(--space-2xl); }

.split { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); column-gap: var(--space-xl); align-items: start; }
  .split > .costura-col { padding-top: 0.6rem; }
}
.block + .block, .cifras + .block, .block + .cifras { margin-top: var(--space-2xl); }
.voz + .prose, .lede + .prose { margin-top: var(--space-xl); }
.voz + .fechas, .voz + .referentes { margin-top: var(--space-xl); }

/* ---------- Oda a la verdad ---------- */
.oda { padding-block: var(--space-xl) var(--space-2xl); }
.oda-texto .voz { margin-bottom: var(--space-xl); }
.oda-texto p { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1vw + 1rem, 1.6rem); line-height: 1.45; color: var(--color-ink); max-width: 36rem; margin: 0 0 var(--space-md); }
.oda-texto .oda-clave { font-weight: 500; }
.oda-texto .oda-coda { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--color-muted); margin-top: var(--space-lg); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); max-width: 34rem; }
@media (min-width: 60rem) { .oda .costura-col { padding-top: calc(var(--text-display) * 1.2); } }

/* ---------- Apertura ---------- */
.apertura { position: relative; }
.apertura .plate {
  position: relative; margin: 0;
  height: min(64svh, 46rem);
  min-height: 22rem;
  background-color: var(--color-paper-3);
  overflow: hidden;
}
.apertura .plate img { width: 100%; height: 100%; object-fit: cover; }
.apertura .plate figcaption {
  position: absolute; right: var(--gutter); bottom: var(--space-sm);
  font-size: var(--text-xs); color: var(--color-night-ink); letter-spacing: 0.04em;
  background: var(--color-scrim); padding: var(--space-3xs) var(--space-2xs);
}
.apertura .word {
  font-family: var(--font-display); font-weight: 300; color: var(--color-ink);
  font-size: var(--text-word); line-height: 0.9; letter-spacing: -0.015em;
  margin: var(--space-lg) 0 0; position: relative;
}
.apertura .below { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); padding-block: var(--space-md) var(--space-2xl); }
@media (min-width: 60rem) {
  .apertura .below { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); column-gap: var(--space-xl); align-items: end; }
}

/* ---------- Carta ---------- */
.carta { max-width: 40rem; }
.carta p { font-family: var(--font-display); font-size: clamp(1.3rem, 1vw + 1rem, 1.6rem); line-height: 1.45; color: var(--color-ink); margin: 0 0 var(--space-sm); }
.carta .saludo { margin-bottom: var(--space-md); }
.carta .firma { margin-top: var(--space-lg); display: flex; align-items: center; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); font-family: var(--font-body); }
.carta .firma svg { height: 28px; width: auto; color: var(--color-ink); }

/* ---------- Cifras ---------- */
.cifras { list-style: none; padding: 0; margin: var(--space-xl) 0 0; display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); border-top: var(--rule-hair) solid var(--color-rule); }
.cifras li { padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-2xs); }
.cifras .n { font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); line-height: 1; color: var(--color-ink); font-variant-numeric: lining-nums tabular-nums; }
.cifras .n small { font-size: 0.45em; font-weight: 500; margin-left: 0.2em; color: var(--color-muted); }
.cifras p { margin: 0; max-width: 46ch; }
@media (min-width: 48rem) {
  .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .cifras li { border-bottom: 0; padding: var(--space-md) var(--space-md) var(--space-md) 0; }
  .cifras li + li { border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-md); }
}

blockquote.cita { margin: var(--space-xl) 0 0; padding: 0; max-width: 34ch; }
blockquote.cita p { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); line-height: 1.3; color: var(--color-ink); margin: 0; }
blockquote.cita footer { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- La verdad (noche) ---------- */
.night { background: var(--color-night); color: var(--color-night-muted); }
.night .voz, .night .lede { color: var(--color-night-ink); }
.night .costura { color: var(--color-night-muted); border-top-color: var(--color-night-rule); }
.night .costura .label { color: var(--color-accent-night); }
.night sup.ref a { color: var(--color-night-muted); }
.night + .chapter { border-top: 0; }

.vd { min-height: 92svh; display: grid; place-content: center; justify-items: center; gap: var(--space-lg); padding: var(--space-2xl) var(--gutter); text-align: center; }
.vd-word { display: grid; grid-template-columns: auto auto; align-items: baseline; font-family: var(--font-display); font-weight: 300; font-size: var(--text-word); line-height: 1; letter-spacing: -0.01em; color: var(--color-night-ink); }
.vd-prefix { display: grid; justify-items: end; }
.vd-prefix > * { grid-area: 1 / 1; }
.vd-verd span { display: inline-block; opacity: 0; }
.vd-after { display: grid; gap: var(--space-xs); justify-items: center; }
.vd-after [data-vd-after] { opacity: 0; }
.vd-line { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); margin: 0; color: var(--color-night-ink); }
.vd-note { font-size: var(--text-base); line-height: 1.55; max-width: 32ch; margin: 0; text-wrap: balance; }
.is-resolved .vd-m { opacity: 0; }
.is-resolved .vd-verd span, .is-resolved [data-vd-after] { opacity: 1; }
.no-js .vd-m { opacity: 0; }
.no-js .vd-verd span, .no-js [data-vd-after] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .vd-m, .vd-verd span, [data-vd-after] { transition: opacity 150ms linear; } }

.estandar { margin: var(--space-xl) 0 0; padding: var(--space-lg) 0; border-block: var(--rule-hair) solid var(--color-rule); max-width: 46rem; }
.estandar p { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); line-height: 1.3; color: var(--color-ink); margin: 0; }

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.glosario { margin-top: var(--space-xl); max-width: 52rem; }
.glosario caption { text-align: left; font-size: var(--text-sm); color: var(--color-muted); padding-bottom: var(--space-xs); }
.glosario th, .glosario td { text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.glosario th[scope="row"] { font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); color: var(--color-ink); white-space: nowrap; }
.glosario thead th { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); font-weight: 500; border-top: 0; }
.glosario td:last-child { color: var(--color-muted); }
@media (max-width: 39.99rem) {
  .glosario thead { display: none; }
  .glosario tr { display: grid; gap: var(--space-3xs); padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .glosario th, .glosario td { border: 0; padding: 0; white-space: normal; }
}

/* ---------- Cortes de canto ---------- */
.cortes { margin: var(--space-xl) 0 0; max-width: 52rem; }
.cortes svg { width: 100%; height: auto; }
@media (max-width: 39.99rem) {
  .cortes { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--space-2xs); }
  .cortes svg { min-width: 38rem; }
}
.cortes .c-wood { fill: var(--color-paper-3); }
.cortes .c-cross { fill: var(--color-paper-2); }
.cortes .c-core { stroke: none; }
.cortes .c-dot { fill: var(--color-muted); }
.cortes .c-ring { fill: none; stroke: var(--color-muted); stroke-width: 1; }
.cortes .c-line { stroke: var(--color-ink-2); stroke-width: 1; }
.cortes .c-edge { fill: none; stroke: var(--color-ink); stroke-width: 1.2; }
.cortes .c-print { fill: var(--color-accent); }
.cortes .c-label { fill: var(--color-ink); font-family: var(--font-display); font-weight: 500; font-size: 19px; }
.cortes .c-note { fill: var(--color-muted); font-family: var(--font-body); font-size: 12px; }
.cortes .c-cap { fill: var(--color-muted); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.04em; }

/* ---------- Las maderas: la xiloteca ---------- */
.estante { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2xs); max-width: 34rem; }
.estante a { display: block; position: relative; aspect-ratio: 1 / 3.4; overflow: hidden; background: var(--color-paper-3); text-decoration: none; outline-offset: 4px; }
.estante img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.estante span {
  position: absolute; left: 50%; bottom: var(--space-sm); translate: -50% 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-display); font-weight: 500; font-size: clamp(0.95rem, 1.6vw, 1.35rem); letter-spacing: 0.06em; line-height: 1;
  color: var(--color-night-ink); background: var(--color-scrim); padding: var(--space-2xs) var(--space-3xs);
}
@media (hover: hover) and (pointer: fine) { .estante a:hover img { transform: scale(1.03); } }

.volumen { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); scroll-margin-top: var(--space-md); }
.volumen:first-of-type { margin-top: var(--space-xl); }
.volumen .tapa { margin: 0; }
.volumen .tapa img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--color-paper-3); }
.volumen .tapa figcaption { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2xs); }
.volumen h3 { font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); line-height: 1; color: var(--color-ink); }
.volumen .latin { font-style: italic; color: var(--color-muted); margin: var(--space-2xs) 0 0; }
.volumen .papel { font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); color: var(--color-ink); margin: var(--space-sm) 0; }
.volumen dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); margin: var(--space-md) 0 0; font-size: var(--text-sm); }
.volumen dt { color: var(--color-muted); }
.volumen dd { margin: 0; color: var(--color-ink-2); }
.volumen .condicion { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-muted); }
@media (min-width: 60rem) {
  .volumen { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: var(--space-xl); }
  .volumen .tapa img { aspect-ratio: 3 / 4; }
}
.volumen--olivo { background: var(--color-paper-2); padding-inline: var(--space-md); }
@media (min-width: 60rem) { .volumen--olivo { padding-inline: var(--space-xl); } }
.refran { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); line-height: 1.15; color: var(--color-ink); margin: 0 0 var(--space-xl); max-width: 22ch; padding-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }

/* ---------- El origen: ficha y fechas ---------- */
.ficha {
  margin: var(--space-xl) 0 0; max-width: 34rem; background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule); padding: var(--space-lg); position: relative;
}
.ficha .ejemplo { position: absolute; top: var(--space-sm); right: var(--space-sm); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.ficha h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); color: var(--color-ink); margin-bottom: var(--space-md); }
.ficha dl { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0; margin: 0; font-size: var(--text-sm); }
.ficha dt, .ficha dd { padding: var(--space-2xs) 0; border-top: var(--rule-hair) solid var(--color-rule); margin: 0; }
.ficha dt { color: var(--color-muted); padding-right: var(--space-sm); }
.ficha dd { color: var(--color-ink-2); }
.ficha dd .fill { display: inline-block; min-width: 8ch; border-bottom: var(--rule-hair) dashed var(--color-rule); color: var(--color-muted); }

.fechas { list-style: none; margin: var(--space-xl) 0 0; padding: 0; max-width: 46rem; border-left: var(--rule-hair) solid var(--color-rule); }
.fechas li { position: relative; padding: 0 0 var(--space-lg) var(--space-lg); }
.fechas li::before { content: ""; position: absolute; left: -4px; top: 0.55em; width: 7px; height: 7px; background: var(--color-ink); border-radius: 50%; }
.fechas time { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); color: var(--color-ink); font-variant-numeric: lining-nums; }
.fechas p { margin: var(--space-3xs) 0 0; max-width: 52ch; }

.triple { margin-top: var(--space-xl); }
.triple th, .triple td { text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.triple thead th { font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); color: var(--color-ink); border-top: 0; }
@media (max-width: 47.99rem) {
  .triple thead { display: none; }
  .triple tr { display: grid; padding: var(--space-xs) 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .triple td { border: 0; padding: var(--space-3xs) 0; }
  .triple td::before { content: attr(data-col); display: block; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
}

/* ---------- El mundo ---------- */
.referentes { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.referentes li { padding: var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-2xs); }
@media (min-width: 48rem) { .referentes li { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); column-gap: var(--space-lg); } }
.referentes .marca { font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); color: var(--color-ink); line-height: 1.2; }
.referentes .marca small { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0.04em; margin-top: var(--space-3xs); }
.referentes q { font-family: var(--font-display); font-size: var(--text-md); color: var(--color-ink); quotes: "«" "»"; }
.referentes p { margin: var(--space-3xs) 0 0; font-size: var(--text-sm); }

.mapa { margin: var(--space-xl) 0 0; max-width: 46rem; }
.mapa svg { width: 100%; height: auto; }
.mapa figcaption { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-xs); max-width: 60ch; }
.mapa .ax { stroke: var(--color-rule); stroke-width: 1; }
.mapa .ax-label { fill: var(--color-muted); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.mapa .dot { fill: var(--color-ink-2); }
.mapa .dot-label { fill: var(--color-ink-2); font-family: var(--font-display); font-size: 17px; font-weight: 500; }
.mapa .inko { fill: var(--color-accent); }
.mapa .inko-label { fill: var(--color-ink); font-family: var(--font-display); font-size: 19px; font-weight: 500; }
.mapa .inko-ring { fill: none; stroke: var(--color-accent); stroke-width: 1; }

.hueco { margin-top: var(--space-xl); max-width: 44rem; }
.cierre { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.hueco p:first-child { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.3; color: var(--color-ink); }

/* ---------- El nombre ---------- */
.terna { list-style: none; margin: var(--space-xl) 0 0; padding: 0; counter-reset: terna; }
.terna li { padding: var(--space-lg) 0; border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-sm); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .terna li { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-xl); } }
.terna .nombre { font-family: var(--font-display); font-weight: 300; font-size: var(--text-display-s); line-height: 1; color: var(--color-ink); }
.terna .nombre small { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-xs); }
.terna li:not(:first-child) .nombre { font-size: var(--text-2xl); }
.terna p { margin: 0 0 var(--space-2xs); max-width: 56ch; }

/* ---------- La voz: pruebas de imprenta ---------- */
.reglas { margin: var(--space-xl) 0 0; padding: 0 0 0 var(--space-md); max-width: var(--measure); }
.reglas li { margin-bottom: var(--space-2xs); }
.paleta-intro { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.paleta { margin: var(--space-xl) 0 0; padding: 0; }
.tono { display: grid; gap: var(--space-xs); grid-template-columns: minmax(0, 1fr); padding: var(--space-lg) 0; border-top: var(--rule-hair) solid var(--color-rule); }
@media (min-width: 48rem) { .tono { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-xl); align-items: baseline; } }
.tono dt { font-family: var(--font-display); font-weight: 300; font-size: var(--text-xl); line-height: 1.1; color: var(--color-ink); overflow-wrap: anywhere; min-width: 0; }
.tono dd { margin: 0; }
.tono dd p { margin: 0 0 var(--space-2xs); max-width: 52ch; }
.tono .uso { font-size: var(--text-sm); color: var(--color-muted); }
.tono .uso span { display: block; font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-3xs); }
.tono--oro { padding-block: var(--space-xl); }
.tono--concepto dt { font-weight: 400; }
@media (min-width: 48rem) { .tono--oro { grid-template-columns: minmax(0, 1fr); } }
.tono--oro dt { font-size: var(--text-display-s); font-weight: 400; }

/* ---------- Lo que sigue ---------- */
.vision { margin: calc(var(--space-2xl) * -1) 0 var(--space-2xl); }
.vision img { width: 100%; height: min(70svh, 46rem); object-fit: cover; background: var(--color-paper-3); }
.vision figcaption { font-size: var(--text-xs); color: var(--color-muted); padding-top: var(--space-xs); }
.vision figcaption span { font-family: var(--font-display); font-size: var(--text-md); color: var(--color-ink); margin-right: var(--space-2xs); }
.dos { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); margin-top: var(--space-xl); }
@media (min-width: 60rem) { .dos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); } }
.dos h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); color: var(--color-ink); padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-ink); }
.dos ol { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.dos ol li { counter-increment: paso; padding: var(--space-sm) 0 var(--space-sm) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); position: relative; }
.dos ol li::before { content: counter(paso); position: absolute; left: 0; top: var(--space-sm); font-family: var(--font-display); font-weight: 500; color: var(--color-muted); font-variant-numeric: lining-nums; }
.dos ol li strong { color: var(--color-ink); font-weight: 500; }
.lanzamiento { margin-top: var(--space-2xl); padding: var(--space-lg); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); max-width: 52rem; }
.lanzamiento h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); color: var(--color-ink); margin-bottom: var(--space-sm); }
.lanzamiento dl { margin: var(--space-md) 0 0; }
.lanzamiento dt { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); margin-top: var(--space-md); }
.lanzamiento dd { margin: var(--space-2xs) 0 0; max-width: var(--measure); }

/* ---------- Fuentes ---------- */
.fuentes ol { margin: var(--space-xl) 0 0; padding: 0 0 0 var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); columns: 1; }
@media (min-width: 60rem) { .fuentes ol { columns: 2; column-gap: var(--space-xl); } }
.fuentes li { margin-bottom: var(--space-2xs); break-inside: avoid; overflow-wrap: anywhere; scroll-margin-top: var(--space-md); }
.creditos-t { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); color: var(--color-ink); margin-top: var(--space-xl); }
.creditos { margin: var(--space-sm) 0 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--color-muted); max-width: 72ch; }
.creditos li { margin-bottom: var(--space-2xs); }
.fuentes li:target { color: var(--color-ink); background: var(--color-paper-2); }

/* ---------- Pie ---------- */
.pie { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-xl); }
.pie .firmas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.pie .logo-noon { height: 28px; width: auto; color: var(--color-muted); }
.pie .logo-inko { height: 30px; width: auto; color: var(--color-muted); }
.pie p { margin: var(--space-md) 0 0; font-size: var(--text-xs); color: var(--color-muted); max-width: 60ch; }

/* ---------- Índice flotante ---------- */
.indice-btn {
  position: fixed; right: var(--space-sm); bottom: var(--space-sm); z-index: 10;
  font: 500 var(--text-sm)/1 var(--font-body); letter-spacing: 0.04em;
  color: var(--color-paper); background: var(--color-ink); border: var(--rule-hair) solid var(--color-night-rule); border-radius: 999px;
  padding: var(--space-xs) var(--space-md); min-height: 44px; cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .indice-btn:hover { transform: translateY(-1px); } }
.indice-btn:active { transform: translateY(0); }
.indice-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.indice {
  position: fixed; inset: auto var(--space-sm) calc(var(--space-sm) + 3.5rem) auto; margin: 0;
  width: min(20rem, calc(100% - 2 * var(--space-sm))); max-height: 70svh; overflow: auto;
  background: var(--color-paper); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-md); box-shadow: var(--shadow-pop);
}
.indice ol { list-style: none; margin: 0; padding: 0; }
.indice a { display: flex; gap: var(--space-sm); padding: var(--space-2xs) 0; text-decoration: none; white-space: nowrap; font-family: var(--font-display); font-size: var(--text-md); }
.indice a span { color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-xs); min-width: 1.5em; padding-top: 0.45em; }
.indice a:hover { color: var(--color-accent); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
  .estante a:hover img, .indice-btn:hover { transform: none; }
}

/* ---------- Impresión ---------- */
@media print {
  .indice-btn, .indice, .skip { display: none !important; }
  .night { background: none; color: var(--color-ink); }
  .night .voz, .vd-word { color: var(--color-ink); }
  .vd-m { opacity: 0 !important; } .vd-verd span, [data-vd-after] { opacity: 1 !important; }
  .chapter { padding-block: var(--space-lg); break-inside: avoid-page; }
}