/* ═══════════════════════════════════════════════════════════════
   ROMEO — componentes propios de esta web
   Se carga DESPUÉS de nucleo.css: lo de acá gana sin trucos.
   ═══════════════════════════════════════════════════════════════ */

/* ── EL CIELO ────────────────────────────────────────────────────
   El fondo de estrellas de la contratapa, de Gustavo Acevedo, fijo
   detrás de toda la página. Va en un pseudoelemento `fixed` y no
   con `background-attachment: fixed`, que iOS ignora. */
html { background: var(--fondo); }
body {
  background: transparent;
  color: var(--texto);
  font-size: 1.0625rem;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--fondo) url('../img/estrellas-desktop.jpg') center / cover no-repeat;
  background-image: linear-gradient(rgba(5, 7, 11, 0.3), rgba(5, 7, 11, 0.3)), image-set(url('../img/estrellas-desktop.webp') type('image/webp'), url('../img/estrellas-desktop.jpg') type('image/jpeg'));
}
@media (max-width: 600px) {
  body::before {
    background-image: url('../img/estrellas-mobile.jpg');
    background-image: linear-gradient(rgba(5, 7, 11, 0.3), rgba(5, 7, 11, 0.3)), image-set(url('../img/estrellas-mobile.webp') type('image/webp'), url('../img/estrellas-mobile.jpg') type('image/jpeg'));
  }
}

::selection { background: var(--acento); color: var(--fondo); }

a:focus-visible,
button:focus-visible {
  outline-color: var(--acento-claro);
}

/* ── RÓTULOS ─────────────────────────────────────────────────── */
.ojo {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--acento-texto);
}
.titulo {
  font-family: var(--font-titulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 0.95;
  color: var(--plata);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
}

/* ── BOTONES ─────────────────────────────────────────────────── */
.boton {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem 0.8rem;
}
.boton--principal { color: var(--texto-claro); }
.boton--principal:hover { background: var(--acento-oscuro); }
.boton--linea-claro { color: var(--plata); border-color: rgba(220, 221, 216, 0.45); }
.boton--linea-claro:hover { border-color: var(--plata); background: rgba(220, 221, 216, 0.06); }
.boton--principal:focus-visible { outline-color: var(--plata); }

/* ═══════════════════════════════════════════════════════════════
   HERO — los tres 9 como lectura de un contador
   Escritorio: apilados en vertical, como bajan por el portal en la
   tapa. Móvil: en fila, como un reloj.
   ═══════════════════════════════════════════════════════════════ */
.hero {
  min-height: calc(100svh - 4.5rem);
  display: grid;
  align-items: center;
  padding: var(--espacio-lg) 0 var(--espacio-md);
}
.hero__grilla {
  display: grid;
  grid-template-columns: auto minmax(0, 30rem);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  justify-content: center;
}

.lectura {
  font-family: var(--font-titulo);
  color: var(--plata);
  line-height: 1;
  display: grid;
  justify-items: start;
}
.lectura__en {
  font-size: clamp(1.5rem, 3.2vh, 2.25rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: -0.2em;
}
.lectura__fila {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
}
.lectura__unidad {
  position: relative;
  z-index: 2;
  font-size: clamp(1.25rem, 3vh, 2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 0.9em;
}
.lectura__fila:nth-child(3) { padding-left: 0.18em; }
.lectura__fila:nth-child(4) { padding-left: 0.36em; }

/* El dígito: una tira 0-9 que rueda hasta quedar en 9. */
.nueve {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(8rem, 27vh, 17rem);
  line-height: 0.86;
  height: 0.86em;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  /* el metal de la tapa: plata con un brillo que baja */
  color: var(--plata);
}
.nueve__tira {
  display: flex;
  flex-direction: column;
}
.nueve__tira span { display: block; height: 0.86em; }
/* El HTML trae sólo el 9: es lo que leen Google y el lector de
   pantalla. Los dígitos 0-8 que ruedan son un ::before, que ninguno
   de los dos indexa. Sin JS no hay tira y se ve el 9 quieto. */
.js .nueve__tira::before {
  content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8";
  white-space: pre;
  display: block;
  line-height: 0.86em;
}
.js .nueve.rodo .nueve__tira {
  transform: translateY(-90%);
  transition: transform var(--dur, 1.4s) cubic-bezier(0.22, 1.12, 0.36, 1);
}

/* El 9 del centro es el ojo del portal: en la tapa está dentro de
   un anillo negro con la luz amarilla alrededor. */
.nueve--centro { overflow: visible; }
.nueve--centro .nueve__ventana { display: block; height: 0.86em; overflow: hidden; position: relative; z-index: 1; }
.nueve--centro::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 1.05em; height: 1.05em;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #000 0 55%, rgba(0,0,0,0.85) 62%, transparent 64%);
  box-shadow: 0 0 0.35em 0.06em rgba(210, 199, 127, 0.22), 0 0 1.2em 0.2em rgba(210, 199, 127, 0.08);
}

.hero__texto { max-width: 30rem; }
.epigrafe {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.375rem);
  line-height: 1.6;
  color: var(--texto);
}
.epigrafe p + p { margin-top: 1rem; }
.firma {
  margin-top: var(--espacio-md);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.firma strong { color: var(--plata); font-weight: 400; }
.hero__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--espacio-md);
}

/* entrada del texto, después de que los 9 se fijan */
.js .hero__texto > * { opacity: 0; transform: translateY(10px); transition: opacity 0.8s var(--suave), transform 0.8s var(--suave); }
.js .hero.listo .hero__texto > * { opacity: 1; transform: none; }
.js .hero.listo .hero__texto > :nth-child(2) { transition-delay: 0.12s; }
.js .hero.listo .hero__texto > :nth-child(3) { transition-delay: 0.24s; }

@media (max-width: 860px) {
  .hero { min-height: calc(100svh - 6.5rem); padding-top: var(--espacio-md); }
  .hero__grilla { grid-template-columns: 1fr; gap: var(--espacio-md); justify-content: stretch; }
  /* en fila, como un reloj */
  .lectura {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    column-gap: 1.1rem;
  }
  .lectura__en { grid-column: 1 / -1; font-size: 1.25rem; margin-bottom: 0.25rem; }
  .lectura__fila { flex-direction: column; align-items: flex-start; gap: 0.35rem; padding-left: 0 !important; }
  .lectura__unidad { padding-bottom: 0; font-size: 1rem; }
  .nueve { font-size: clamp(5.5rem, 33vw, 15rem); }
  .firma { letter-spacing: 0.1em; line-height: 1.8; }
}
@media (max-width: 600px) {
  .hero__botones .boton { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   EL MUNDO — el visor de láminas
   ═══════════════════════════════════════════════════════════════ */
.mundo { padding: var(--espacio-xl) 0 var(--espacio-2xl); }
.mundo .contenedor { max-width: 1280px; }
.mundo__cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: var(--espacio-md); }
.mundo__cabeza .titulo { margin-top: 0.6rem; }
.mundo__credito { font-style: italic; color: var(--texto-suave); }

.visor { position: relative; }
.visor__escena {
  display: grid;
  touch-action: pan-y;
}
.lamina {
  grid-area: 1 / 1;
  display: grid;
  /* ojo: min() no acepta fr; con fr el navegador descarta la regla entera
     y el visor queda en una sola columna (pasó, lo encontró la auditoría) */
  grid-template-columns: minmax(0, min(66%, calc(66vh * 1.297))) minmax(16rem, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
.lamina.activa {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease, visibility 0s;
}
.lamina__imagen {
  aspect-ratio: 1800 / 1388;
  background: var(--fondo-suave);
  box-shadow: var(--sombra-foto);
  overflow: hidden;
}
.lamina__imagen img { width: 100%; height: 100%; object-fit: cover; }
.lamina__texto { padding-bottom: 0.25rem; }
.lamina__pp {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento-texto);
}
.lamina__fragmento {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--texto);
}
.lamina__fragmento cite {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--texto-suave);
}

.visor__mandos {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 1.5rem;
}
.visor__flechas { display: flex; gap: 0.5rem; }
.visor__boton {
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  border: 1px solid rgba(220, 221, 216, 0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--plata);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.visor__boton:hover { border-color: var(--acento); background: rgba(210, 199, 127, 0.08); }
.visor__boton svg { width: 18px; height: 18px; }
/* `hidden` en un <svg> no oculta: el navegador sólo lo aplica a HTML.
   Sin esto, el botón de pausa mostraba los dos íconos a la vez. */
.visor__boton svg[hidden] { display: none; }

/* las marcas: una por lámina; la activa se llena con el tiempo que le queda */
.visor__marcas { display: flex; gap: 0; list-style: none; }
.visor__marcas li { flex: 1; }
.visor__marca {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.visor__marca::before,
.visor__marca::after {
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 50%;
  height: 2px;
  margin-top: -1px;
  background: rgba(220, 221, 216, 0.22);
}
.visor__marca::after {
  background: var(--acento);
  transform-origin: left;
  transform: scaleX(0);
}
.visor__marca.vista::after { transform: scaleX(1); opacity: 0.55; }
.visor__marca[aria-current="true"]::after {
  opacity: 1;
  transform: scaleX(var(--avance, 1));
}
.visor__contador {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.visor__contador strong { color: var(--plata); font-weight: 400; }

@media (max-width: 860px) {
  .lamina { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
  .lamina__imagen { width: 100%; max-width: calc(78vh * 1.297); }
  .visor__mandos { grid-template-columns: auto auto; }
  .visor__marcas { grid-column: 1 / -1; grid-row: 1; }
  .visor__contador { justify-self: end; }
}

/* Sin JS no se esconde nada: las láminas quedan una abajo de la otra. */
html:not(.js) .visor__escena { gap: var(--espacio-lg); }
html:not(.js) .lamina { grid-area: auto; opacity: 1; visibility: visible; }
html:not(.js) .visor__mandos { display: none; }

/* ═══════════════════════════════════════════════════════════════
   SECCIONES DE LECTURA
   Sobre el cielo, el texto largo va en una placa de vacío casi
   opaca: las estrellas son puntos blancos y, detrás de letra de
   17 px, ensucian la lectura aunque el contraste medido dé bien.
   ═══════════════════════════════════════════════════════════════ */
.seccion { padding: var(--espacio-2xl) 0; }
.seccion__cabeza { margin-bottom: var(--espacio-lg); }
.seccion__cabeza .titulo { margin-top: 0.75rem; }
.centrado { text-align: center; }

.placa {
  background: rgba(5, 7, 11, 0.96);
  box-shadow: 0 0 0 1px rgba(220, 221, 216, 0.07), 0 40px 120px rgba(0, 0, 0, 0.6);
}

/* el título del libro con sus tres 9 en stencil */
.n9 { font-family: var(--font-display); font-weight: 800; color: var(--plata); font-size: 1.12em; }

/* ── ADELANTO — la hoja del libro, de noche ─────────────────── */
.adelanto .seccion__cabeza { text-align: center; }
.hoja {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.25rem, 6vw, 4.5rem) clamp(1.5rem, 8vw, 6rem);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.85;
  color: var(--texto);
}
.hoja p { margin-bottom: 1rem; }
.hoja p.capitular::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 4.6em;
  line-height: 0.8;
  margin: 0.08em 0.1em 0 0;
  color: var(--plata);
}
.folio {
  position: absolute;
  left: 1.5rem;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}
/* la lámina de Marte, entre la p. 13 y la 16, igual que en el libro:
   sale de la hoja hacia los costados */
.hoja__lamina {
  margin: var(--espacio-lg) calc(-1 * clamp(1.5rem, 8vw, 6rem));
}
.hoja__lamina img { width: 100%; height: auto; }
.hoja__lamina figcaption {
  padding: 0.75rem clamp(1.5rem, 8vw, 6rem) 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
@media (max-width: 600px) {
  .hoja { margin-inline: -1.5rem; padding-inline: 1.5rem; }
  .hoja__lamina { margin-inline: -1.5rem; }
  .hoja__lamina figcaption { padding-inline: 1.5rem; }
}
@media (max-width: 860px) {
  .folio { position: static; display: block; margin: 1.5rem 0 0.5rem; }
  .folio::before { content: '— '; }
}
/* el desplegable del núcleo queda con transform abierto y se vuelve
   la referencia de los folios absolutos (trampa de David) */
html .hoja .desplegable.abierto { transform: none; }
/* el núcleo deja el Leer más en 39-43 px de alto: mínimo 44 */
.leer-mas { min-height: 44px; }
.hoja .leer-mas {
  font-family: var(--font-titulo);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento-texto);
}
.hoja .leer-mas:hover { color: var(--plata); }
.hoja__final { margin-top: var(--espacio-md); }
.adelanto__pie {
  max-width: 46rem;
  margin: 1.25rem auto 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--texto-suave);
}

/* ── EL LIBRO ───────────────────────────────────────────────── */
.libro__grilla {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
}
.libro__tapa { position: sticky; top: 2rem; }
.libro__tapa img {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  box-shadow: 0 0 0 1px rgba(220, 221, 216, 0.14), 0 0 60px rgba(210, 199, 127, 0.12), 0 40px 90px rgba(0, 0, 0, 0.8);
}
.libro__titulo {
  font-family: var(--font-titulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  color: var(--plata);
  margin: 0.75rem 0 var(--espacio-md);
}
.sinopsis p { margin-bottom: 1rem; line-height: 1.8; }
.sinopsis strong { font-weight: 600; color: var(--plata); }
.sinopsis .leer-mas { color: var(--acento-texto); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; }
.sinopsis .leer-mas:hover { color: var(--plata); }
.para-quien {
  margin: var(--espacio-md) 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--acento);
  font-style: italic;
  color: var(--texto);
  max-width: 34rem;
}
.para-quien span { display: block; font-style: normal; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 0.35rem; }
.compra { margin: var(--espacio-md) 0 var(--espacio-lg); }
.compra__titulo {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 0.75rem;
}
/* Tres formas de comprarlo, y la elección es del lector: ninguna se
   destaca sobre las otras (como en David). */
.compra__botones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}
.boton--compra {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.75rem 1rem 0.7rem;
  line-height: 1.1;
}
.boton__tipo {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  opacity: 0.8;
}
@media (max-width: 560px) {
  .compra__botones { grid-template-columns: 1fr; }
}
.nowrap { white-space: nowrap; }
.consulta {
  display: block;
  margin-top: 0.9rem;
  padding: 0.35rem 0;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}
.consulta a {
  display: inline-block;
  padding: 0.7rem 0.25rem;
  margin: -0.7rem -0.25rem;
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: rgba(210, 199, 127, 0.6);
  text-underline-offset: 0.2em;
}
.consulta a:hover { color: var(--acento); }

.ficha { border-top: 1px solid rgba(220, 221, 216, 0.14); }
.ficha div {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(220, 221, 216, 0.14);
  font-size: 0.9375rem;
}
.ficha dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); padding-top: 0.2rem; }
.ficha dd { color: var(--texto); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .libro__grilla { grid-template-columns: 1fr; }
  .libro__tapa { position: static; }
  .libro__tapa img { max-width: 300px; }
  .ficha div { grid-template-columns: 7.5rem 1fr; }
}

/* ── ROMEO ──────────────────────────────────────────────────── */
/* El libro y la bio van sueltos, sin placa: un velo de vacío baja
   las estrellas detrás del texto (y empareja el negro de la foto). */
.libro, .autor { background: linear-gradient(transparent, rgba(5, 7, 11, 0.88) 18%, rgba(5, 7, 11, 0.88) 82%, transparent); }
.autor__grilla {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
/* La foto ya tiene fondo negro: se funde con el vacío por abajo y
   por los costados, sin marco. Él sale de la oscuridad como el
   resto de la página. */
.autor__foto img {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 55% 42%, #000 58%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 70% at 55% 42%, #000 58%, transparent 100%);
}
.autor__texto .titulo { margin: 0.75rem 0 var(--espacio-md); }
.prosa { font-weight: 400; line-height: 1.85; }
.prosa p { margin-bottom: 1.1rem; }
.cita-interna {
  font-size: 1.25rem;
  color: var(--plata);
  border-left-color: var(--acento);
}
@media (max-width: 860px) {
  .autor__grilla { grid-template-columns: 1fr; }
  .autor__foto img { max-width: 320px; }
}

/* ── LO QUE VIENE ───────────────────────────────────────────── */
.viene { text-align: center; }
.viene blockquote {
  max-width: 36rem;
  margin: 0 auto var(--espacio-md);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.6;
  color: var(--texto);
}
.viene cite { display: block; margin-top: 0.75rem; font-family: var(--font-mono); font-style: normal; font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--texto-suave); }

/* ── CIERRE Y PIE ───────────────────────────────────────────── */
.cierre {
  padding: var(--espacio-2xl) 0 var(--espacio-md);
  background: linear-gradient(transparent, var(--fondo-oscuro) 30%);
  text-align: center;
}
.cierre__saludo {
  font-family: var(--font-titulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.05;
  color: var(--plata);
  max-width: 20ch;
  margin: 0 auto;
}
.contactos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  margin: var(--espacio-lg) 0;
}
.contactos a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  color: var(--texto);
  font-size: 1rem;
}
.contactos a:hover { color: var(--acento); }
.contactos svg { width: 18px; height: 18px; flex-shrink: 0; }
.despedida {
  margin: var(--espacio-lg) auto 0;
  max-width: 34rem;
  font-style: italic;
  color: var(--texto-suave);
}
.pie {
  margin-top: var(--espacio-xl);
  padding: var(--espacio-md) 0 0;
  border-top: 1px solid rgba(220, 221, 216, 0.1);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
html .pie a {
  border-bottom: 0;
  padding: 0.6rem 0;
  color: var(--texto);
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: rgba(210, 199, 127, 0.6);
  text-underline-offset: 0.3em;
}
html .pie a:hover { color: var(--acento); }

/* ── BARRA FIJA DE COMPRA ───────────────────────────────────── */
/* Sin flotante: se le devuelve el lugar que el núcleo le reservaba. */
html .barra-compra {
  padding-right: 1rem;
  background: rgba(2, 3, 6, 0.96);
  border-top: 1px solid rgba(210, 199, 127, 0.25);
}
html .barra-compra__titulo { white-space: normal; overflow: visible; line-height: 1.1; font-family: var(--font-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--plata); font-size: 1rem; }
/* mientras el libro está en pantalla, la barra repite la placa: baja */
html body.placa-visible .barra-compra.visible { transform: translateY(110%); }
/* el aire que deja la barra va adentro del cierre, no abajo del body */
@media (max-width: 760px) {
  html body.con-barra { padding-bottom: 0; }
  html body.con-barra .cierre { padding-bottom: calc(var(--espacio-md) + 76px); }
}

/* ── BLINDAJE: sin JS, o con movimiento reducido, nada se esconde ── */
html:not(.js) .revela,
html:not(.js) .revela-izq,
html:not(.js) .revela-der { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revela, .revela-izq, .revela-der { opacity: 1; transform: none; }
}