/* serifeus.art — el índice de la casa
 *
 * Una sola idea, llevada hasta el final: TODO LLEGA DESDE LO OSCURO. La
 * tipografía se revela con blur+brightness atado al scroll, y las imágenes se
 * revelan con el MISMO filtro. No son dos efectos que coinciden en una página:
 * es el mismo gesto sobre las dos materias, para que digan lo mismo —esto es
 * algo que se construyó, y lo estás viendo llegar—.
 *
 * Por qué negro: Espantos es un producto y grita desde una mesa de tianguis;
 * Serifeus es la casa que lo publica y no necesita gritar.
 *
 * Cada obra trae su propio acento en --acc, puesto en el HTML. El acento hace
 * dos trabajos: tiñe su placa de relleno en duotono y colorea sus enlaces. Es
 * lo que vuelve «a la medida» a las secciones sin cambiarles la estructura,
 * que es lo que las mantiene comparables.
 *
 * Reglas duras:
 *   1. El estado por defecto es el ESTADO FINAL. Sin JS la página se lee
 *      entera, sin filtros y sin recortes.
 *   2. La franja Opus no tiene imagen ni una sola transición.
 */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root {
  /* La noche de la casa. Más profunda que --esp-ink (#141210) a propósito: así
     un negro de tinta todavía se distingue encima, y las capturas oscuras del
     lector y de Beatbound no se funden con el fondo. */
  --noche:   #0B0A09;
  --noche-2: #131110;
  --cal:     #EDE7DA;
  --tenue:   rgba(237, 231, 218, .62);
  --linea:   rgba(237, 231, 218, .14);
  --acc:     #EDE7DA;   /* por defecto no hay acento; cada obra pone el suyo */
}

body {
  margin: 0;
  background: var(--noche);
  color: var(--cal);
  font-family: var(--font-read);
  font-size: clamp(1rem, .55vw + .88rem, 1.18rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1.1em; max-width: 62ch; }
a { color: inherit; }

/* ── Tipografía de la casa ──────────────────────────────────────────────
   EB Garamond variable a peso alto. Es voz de editorial, no de horror: IM Fell
   English queda reservada para Espantos, que es donde el registro de imprenta
   popular significa algo. Que las dos propiedades usen familias distintas es
   el punto — antes usaban la misma y sonaban igual. */
h1, h2 {
  font-family: var(--font-opus);
  font-variation-settings: 'wght' 620;
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0;
}
.big { font-size: clamp(2.4rem, 6.4vw, 6.4rem); font-variation-settings: 'wght' 680; max-width: 16ch; }

.eyebrow, .badge, .rotulo, .cta, .lang, .datos, footer {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .18em;
}
.eyebrow { font-size: .76rem; color: var(--tenue); margin-bottom: clamp(2rem, 5vh, 3.5rem); }

/* ── Idioma ─────────────────────────────────────────────────────────────
   Sin JS el CSS ya oculta el idioma que no toca. El botón sólo lo voltea. */
html[data-lang="es"] [lang="en"] { display: none; }
html[data-lang="en"] [lang="es"] { display: none; }

.lang {
  position: fixed; z-index: 50; top: 1rem; right: 1rem;
  font-size: .78rem; letter-spacing: .14em;
  padding: .5rem .85rem;
  color: var(--cal);
  background: rgba(11, 10, 9, .7);
  border: 1px solid var(--linea);
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.lang:hover { border-color: var(--cal); }

/* ═══════════════════════════ 00 · APERTURA ════════════════════════════ */

.open {
  position: relative;
  min-height: 100svh;
  padding: clamp(4rem, 14vh, 9rem) clamp(1.25rem, 6vw, 7rem);
  display: flex; flex-direction: column; justify-content: center;
}
.open__contenido { position: relative; z-index: 1; }
/* Con el nombre detrás y tenue, el titular vuelve a ser lo primero que se lee
   y recupera su tamaño. Antes iba pequeño porque competía con una cabecera a
   21vw; ya no hay con qué competir. */
.open .big { max-width: 20ch; }

/* El rótulo bajo el nombre, con filete: cierra la cabecera como una faja. */
.eyebrow--regla {
  margin: 0 0 clamp(1.4rem, 3vh, 2.2rem);
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--linea);
  max-width: none;
}
/* ── El nombre, como capa de fondo ──────────────────────────────────────
   Marca de agua: detrás del texto, tenue, sin competir. 14vw y no 21: a 21 el
   nombre llenaba el ancho exacto de la ventana —está medido, «SERIFEUS» en EB
   Garamond 700 con .02em ocupa 4.71 veces el cuerpo, y 100/4.71 = 21.2vw— y a
   ese tamaño mandaba en la página en vez de acompañarla. A 14vw ocupa unos dos
   tercios del ancho, que es lo que hace que se lea como capa y no como título.

   Va absoluta y centrada sobre su sección, con z-index 0 y el contenido en 1.
   pointer-events:none para que no se coma un clic ni una selección de texto:
   es fondo, y el fondo no intercepta nada. */
.wordmark {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;

  font-family: var(--font-opus);
  font-variation-settings: 'wght' 700;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14vw;
  letter-spacing: .02em;
  line-height: .86;
  margin: 0;
  max-width: none;
  text-align: center;
  white-space: nowrap;

  /* Tenue de verdad. Sobre #0B0A09 esto queda apenas por encima del fondo, que
     es donde tiene que estar una marca de agua: se nota cuando la buscas y
     desaparece cuando lees. */
  color: rgba(237, 231, 218, .07);
}

/* La del colofón: sólo contorno. Un filete a esta opacidad se pierde antes que
   una mancha, así que va un poco más alto que el macizo del hero. El grosor en
   em para que no engorde en un monitor grande, con piso de 1px porque por
   debajo el subpíxel se lo come. */
.wordmark--hueco {
  color: transparent;
  -webkit-text-stroke: max(1px, .006em) rgba(237, 231, 218, .16);
}

.open__sub {
  margin-top: clamp(1.8rem, 4vh, 3rem);
  max-width: 46ch;
  font-size: clamp(1.05rem, .8vw + .9rem, 1.35rem);
  color: var(--tenue);
}

/* ═══════════════════════════ LA MÁQUINA ═══════════════════════════════
   Placa ancha arriba y texto a dos columnas debajo: una forma que ninguna
   obra usa, porque Beatbound no es una obra. La diferencia de estructura hace
   el trabajo que en otro sitio haría un letrero. */
.maquina {
  padding: clamp(5rem, 15vh, 10rem) clamp(1.25rem, 6vw, 7rem);
  border-top: 1px solid var(--linea);
  background: var(--noche-2);
}
.maquina .plate--wide { margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.maquina .big { max-width: none; margin-bottom: clamp(1.6rem, 4vh, 2.6rem); }
.maquina__cols { display: grid; gap: clamp(1rem, 3vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 62rem) { .maquina__cols { grid-template-columns: 1fr 1fr; } }
.maquina__cols p { color: var(--tenue); max-width: 46ch; }

/* ═══════════════════════════ LA AFIRMACIÓN ════════════════════════════ */

.claim {
  padding: clamp(6rem, 18vh, 12rem) clamp(1.25rem, 6vw, 7rem);
  display: grid; gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1fr;
  border-top: 1px solid var(--linea);
}
@media (min-width: 62rem) { .claim { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.claim p { max-width: 52ch; color: var(--tenue); }

/* ═══════════════════════════ LAS OBRAS ════════════════════════════════ */

.rotulo {
  margin: 0;
  max-width: none;   /* hereda el `p { max-width: 62ch }` y el filete sale corto */
  padding: clamp(4rem, 12vh, 7rem) clamp(1.25rem, 6vw, 7rem) 0;
  font-size: clamp(.8rem, 1.1vw, .95rem);
  letter-spacing: .42em;
  text-indent: .42em;          /* compensa el tracking del último signo */
  color: var(--cal);
  border-top: 1px solid var(--linea);
}

.obra {
  padding: clamp(4rem, 12vh, 8rem) clamp(1.25rem, 6vw, 7rem);
  display: grid; gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .obra { grid-template-columns: 1.05fr .95fr; }
  /* Se alterna el lado a mano y no con nth-of-type: dentro de <main> también
     viven el rótulo y la franja Opus, y la cuenta automática los incluiría. */
  .obra--arcade .obra__plates,
  .obra--espantos .obra__plates { order: 2; }
}

.badge {
  font-size: .7rem;
  color: var(--acc);
  margin: 0 0 .9rem;
  max-width: none;
}
.obra h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); margin-bottom: .4rem; }
.obra__sub {
  font-family: var(--font-opus);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--tenue);
  font-style: italic;
  margin-bottom: 1.2rem;
}
.obra p { color: var(--tenue); max-width: 46ch; }

/* Las cifras. Sólo aparecen donde están CONTADAS: Raccoon las tiene, Shonnen
   no, y por eso Shonnen no lleva esta lista. Un número en una página lo
   produce un comando, no una afirmación. */
.datos {
  list-style: none; margin: 0 0 1.6rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem;
  font-size: .72rem; color: var(--tenue);
}
.datos b {
  display: block;
  font-family: var(--font-opus);
  font-size: 2rem; font-weight: 620;
  letter-spacing: 0;
  color: var(--cal);
  font-variant-numeric: var(--num-tabular);
}

/* ── Las placas ─────────────────────────────────────────────────────────
   El filtro de reposo es NEUTRO: sin JS la imagen se ve tal cual. El revelado
   lo pone GSAP y sólo GSAP. */
.obra__plates { position: relative; }
.plate { position: relative; margin: 0; overflow: hidden; isolation: isolate; }
/* Las placas de relleno cuelgan de un CDN ajeno. Si picsum no responde —ya pasó
   una vez en una captura— el hueco se queda con el acento de la obra en vez de
   con el icono de imagen rota. Un fallo de red degrada a campo de color. */
.plate:has([data-placeholder]), .reja__item { background: var(--acc); }
.plate img { width: 100%; border: 1px solid var(--linea); }
.plate--angosta { width: min(100%, 26rem); margin-inline: auto; }
.plate--wide img { border: 1px solid var(--linea); box-shadow: 0 2rem 5rem rgba(0,0,0,.6); }

/* Duotono, SÓLO en las placas de relleno. `mix-blend-mode: color` toma el tono
   del acento y la luminosidad de la foto en gris, que es un duotono de verdad.
   Sirve para dos cosas a la vez: le da a cada obra una piel propia, y deja
   claro que la imagen es atmósfera y no la ilustración definitiva. El selector
   cuelga de data-placeholder para que quitar el marcador quite el tinte: al
   sustituir por arte real no hay que acordarse de tocar el CSS. */
.plate:has([data-placeholder])::after,
.reja__item::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--acc);
  mix-blend-mode: color;
  opacity: .8;
  pointer-events: none;
}

/* La captura real del lector, encimada. Es la prueba de que la obra existe de
   verdad, así que va delante de la placa de relleno, no detrás. */
/* La captura encimada se queda CHICA a propósito. En la obra de Raccoon la
   placa grande es la portada pintada y es lo que hay que ver; el explorador es
   la prueba de que existe, no el protagonista. A 66% de ancho se comía el
   cuadro entero. */
/* El paisaje vivo, encima de su propia foto. Arranca invisible y lo destapa el
   JS cuando ya pintó: un canvas sin montar es un rectángulo en blanco, y un
   rectángulo en blanco durante medio segundo es peor que la foto. */
.plate--paisaje { position: relative; }
.plate--paisaje canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .6s var(--ease-formation);
}
.plate--paisaje canvas.pintado { opacity: 1; }

/* La capa del pueblo va encima del país y por debajo de la captura encimada.
   pointer-events:auto porque los nopales se tocan; el resto del lienzo es
   transparente y no estorba a nada. */
/* ⚠️ opacity:1 EXPLÍCITO. La regla de arriba pone en 0 todos los canvas de la
   placa y sólo el del paisaje recibe .pintado al montarse; sin esta línea el
   pueblo se pintaba perfecto y completamente invisible. */
.plate--paisaje canvas[data-pueblo] { z-index: 2; opacity: 1; cursor: pointer; }

/* ── La captura del explorador, clicable ────────────────────────────────
   El pie sólo aparece al pasar por encima. En reposo la composición se lee
   como una imagen; el pie es la confirmación de que hay algo detrás. */
.shot__enlace { display: block; position: relative; text-decoration: none; }
.shot__pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .7rem .9rem;
  font-family: var(--font-sans); font-weight: 600;
  font-size: .72rem; letter-spacing: .14em;
  color: var(--cal);
  background: linear-gradient(to top, rgba(11,10,9,.92), rgba(11,10,9,0));
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-formation);
}
.shot__enlace:hover .shot__pie,
.shot__enlace:focus-visible .shot__pie { opacity: 1; }
.shot__enlace:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

.shot {
  margin: -10% 0 0 auto;
  width: 54%;
  position: relative; z-index: 2;
}
.shot img {
  border: 1px solid var(--linea);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .75);
}
.obra--arcade .shot { margin-left: 0; margin-right: auto; }

.cta {
  display: inline-block;
  font-size: .8rem;
  text-decoration: none;
  margin-top: .4rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--acc);
  color: var(--cal);
  transition: color var(--dur-fast) var(--ease-formation);
}
.cta:hover { color: var(--acc); }

/* Dos enlaces en una obra. El segundo va con el acento lleno porque abre algo
   que se USA, no algo que se lee, y esa diferencia vale un cambio de color. */
.ctas { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; }
.cta--vivo { color: var(--acc); border-bottom-width: 2px; }
.cta--vivo:hover { color: var(--cal); border-color: var(--cal); }

/* ── OPUS ───────────────────────────────────────────────────────────────
   Dos secciones grandes, una por libro. Más aire, más cuerpo y una banda de
   línea a todo lo ancho: la misma estructura que una obra, subida de escala.

   Se retira la regla vieja de «Opus no se mueve y no lleva imagen». Existía
   porque la fila subvendía dos libros sin escribir; ahora se presentan como
   libros terminados y con su propio ornamento, así que la premisa ya no está.
   Lo que NO se retira son las prohibiciones de contenido de COMPOSITIONS §2
   —la progresión, el crimen fundacional, Malverde como pilar—, que no dependen
   del tamaño de la sección. */
.rotulo--opus {
  color: var(--cal);
  letter-spacing: .62em;
  text-indent: .62em;
  font-size: clamp(.85rem, 1vw, 1rem);
}
.opus__def {
  font-family: var(--font-opus);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.45;
  max-width: 44ch;
  /* El margen inferior no es cosmético: sin él, el filete superior de la
     primera sección Opus queda pegado a esta frase y parece que la subraya. */
  margin: 1.6rem clamp(1.25rem, 6vw, 7rem) clamp(3rem, 8vh, 5rem);
  color: var(--tenue);
}

/* ── LA OBERTURA ────────────────────────────────────────────────────────
   El golpe de cada Opus: una reja de doce placas a toda la ventana y el título
   encima, colosal. La reja se mueve por columnas a distinta velocidad —la idea
   es de la demo ElasticGridScroll de Codrops— pero SIN ScrollSmoother: ese
   plugin envuelve el documento entero en su propio contenedor de scroll y se
   llevaría por delante los ScrollTrigger que ya hay, el 100svh y el botón fijo
   de idioma. El mismo efecto sale con scrub numérico. */
.obertura {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 12vh, 8rem) clamp(1.25rem, 6vw, 7rem);
  border-top: 1px solid var(--linea);
  isolation: isolate;
}

/* La reja es MÁS ALTA que la sección a propósito: las columnas necesitan
   recorrido sobrante para poder desplazarse sin dejar huecos arriba o abajo. */
.reja {
  position: absolute;
  inset: -18% 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.5rem, 1.4vw, 1.1rem);
  z-index: 0;
}
.reja__col { display: flex; flex-direction: column; gap: clamp(.5rem, 1.4vw, 1.1rem); will-change: transform; }
.reja__item { margin: 0; position: relative; flex: 1; overflow: hidden; isolation: isolate; }
.reja__item img { width: 100%; height: 100%; object-fit: cover; }

/* En móvil sobran columnas: cuatro tiras de 90px no son una composición, son
   ruido. Se quedan dos y las otras se van. */
@media (max-width: 52rem) {
  .reja { grid-template-columns: repeat(2, 1fr); }
  .reja__col:nth-child(n+3) { display: none; }
}

/* El velo. Sin esto el título compite con doce fotos y pierde: pasa de leerse
   a adivinarse. Va como pseudo-elemento del contenedor y no como capa aparte
   para que no haya un div que sólo existe para oscurecer. */
.obertura::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(11,10,9,.92), rgba(11,10,9,.62) 60%, rgba(11,10,9,.86)),
    linear-gradient(to bottom, var(--noche), transparent 18%, transparent 82%, var(--noche));
  pointer-events: none;
}

.obertura__texto { position: relative; z-index: 2; text-align: center; max-width: 52rem; }
.obertura--flip .obertura__texto { text-align: left; margin-right: auto; }

/* Colosal: más grande que cualquier otro titular de la página, porque es el
   único momento en que un libro puede gritar antes de ponerse a explicar. */
.colosal {
  font-family: var(--font-opus);
  font-variation-settings: 'wght' 680;
  font-weight: 680;
  font-size: clamp(2.8rem, 9vw, 8.5rem);
  line-height: .95;
  letter-spacing: -.02em;
  margin: .3rem 0 .6rem;
}
.obertura__sub {
  font-family: var(--font-opus);
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  color: var(--tenue);
  margin: 0 auto clamp(1.8rem, 4vh, 2.8rem);
}
.obertura--flip .obertura__sub { margin-left: 0; }

.obertura__cita {
  font-family: var(--font-opus);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.9rem);
  line-height: 1.4;
  color: var(--cal);
  max-width: 34ch;
  margin: 0 auto;
  padding-top: 1.6rem;
  border-top: 2px solid var(--acc);
}
.obertura--flip .obertura__cita { margin-left: 0; }

/* ── EL CUERPO DE LA OBRA ───────────────────────────────────────────────
   La placa se queda pegada mientras la prosa pasa por al lado. Es sticky de
   CSS, sin JS: menos que puede romperse y funciona igual. */
.opera__cuerpo {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 62rem) {
  .opera__cuerpo { grid-template-columns: 1.1fr .9fr; }
  .opera--flip .opera__placa { order: -1; }
  .opera__placa { position: sticky; top: 12vh; }
}

.opera {
  padding: clamp(5rem, 15vh, 11rem) clamp(1.25rem, 6vw, 7rem);
  border-top: 1px solid var(--linea);
}
.opera__texto { max-width: 48rem; }
/* Se alterna el lado del bloque de texto, no el de la línea: la banda va a
   todo lo ancho en las dos, y mover el texto es lo que evita que las dos
   secciones Opus se lean como una plantilla repetida. */
.opera--flip .opera__texto { margin-left: auto; }

.opera .badge { color: var(--acc); }
.opera .big { font-size: clamp(2.4rem, 5.6vw, 5rem); max-width: none; margin-bottom: .5rem; }
.opera__sub {
  font-family: var(--font-opus);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  color: var(--tenue);
  margin-bottom: clamp(1.8rem, 4vh, 2.8rem);
}
.opera p { color: var(--tenue); max-width: 52ch; }
.opera .datos { margin-top: 2rem; }

/* La cita. Es lo primero que se lee del libro, así que va a cuerpo de titular
   pequeño y con el filete del acento a la izquierda: se lee como algo sacado
   de la página, no como un eslogan. */
.opera__cita {
  font-family: var(--font-opus);
  font-size: clamp(1.2rem, 2.1vw, 1.75rem);
  line-height: 1.4;
  color: var(--cal);
  margin: 0 0 clamp(1.8rem, 4vh, 2.6rem);
  padding-left: clamp(1rem, 2vw, 1.8rem);
  border-left: 2px solid var(--acc);
  max-width: 40ch;
  font-style: italic;
}

/* ═══════════════════════════ QUIÉNES ══════════════════════════════════ */

/* Texto a un lado y un retrato VERTICAL al otro. La foto es 4:5, así que la
   columna del retrato es angosta y con tope: a todo lo ancho de media página un
   4:5 sería más alto que la ventana y la sección se leería como un póster. En
   móvil el retrato baja debajo del texto, centrado, con el mismo tope. */
.who {
  padding: clamp(6rem, 18vh, 12rem) clamp(1.25rem, 6vw, 7rem);
  display: grid; gap: clamp(2.5rem, 6vw, 6rem);
  grid-template-columns: 1fr;
  border-top: 1px solid var(--linea);
}
.who p { color: var(--tenue); max-width: 50ch; }
/* Antes el título y el párrafo iban en columnas distintas; apilados necesitan
   aire entre ellos, igual que en la máquina. */
.who__texto .big { margin-bottom: clamp(1.4rem, 3.5vh, 2.4rem); }
.who__retrato { width: min(100%, 20rem); margin-inline: auto; }
.who__retrato img { aspect-ratio: 4 / 5; object-fit: cover; height: auto; }
@media (min-width: 62rem) {
  .who { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; }
  .who__retrato { width: min(100%, 24rem); margin-inline: 0; justify-self: end; }
}

/* ═══════════════════════════ PIE ══════════════════════════════════════ */

footer {
  padding: clamp(3rem, 8vh, 5rem) clamp(1.25rem, 6vw, 7rem);
  border-top: 1px solid var(--linea);
  font-size: .78rem;
  color: var(--tenue);
}
footer p { margin: 0; max-width: none; }
/* El pie tiene que ser MÁS ALTO que la marca de agua, o las letras se salen por
   abajo del documento y se ven cortadas contra el borde de la página. El
   overflow:hidden es el cinturón: aunque alguien cambie el cuerpo del nombre,
   nunca va a desbordar el final de la página. */
.colofon {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 13vh, 8.5rem);
}
.colofon__linea {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between;
  margin-top: clamp(1.2rem, 3vh, 2rem);
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
}

/* ── Fragmentos del reparto tipográfico ────────────────────────────────
   Los pone el JS. Sin estilo de reposo: sin JS no existen y el texto es texto
   normal. inline-block es lo único necesario, para que el filtro y el
   transform tengan una caja sobre la cual aplicarse. */
.w, .c { display: inline-block; }
.w { white-space: pre-wrap; }

/* ══ LA PUERTA A LAS MUESTRAS ═══════════════════════════════════════════
   Una tira de portadas reales que se abre al pasar el cursor. Las portadas
   salen del mismo generador que la imprenta y se sirven desde el lector, así
   que aquí no hay copia que se pueda quedar vieja.

   El abanico está montado con rotación y traslape, NO con posiciones
   absolutas: así el ancho lo decide el flex y no hay que recalcular nada
   cuando se agregue un estado. En reposo las portadas se encabalgan como en
   una mesa de tianguis; al pasar el cursor se enderezan y se separan, que es
   el gesto de alguien abriendo la mano para enseñarlas. */

.obra--puerta {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .obra--puerta { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
}

.puerta__text h2 { margin-top: .2em; }

.muestrario {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: clamp(1rem, 3vw, 2rem) 0;
  text-decoration: none;
  perspective: 1200px;
}

.muestrario img {
  width: clamp(5.5rem, 11vw, 8.5rem);
  height: auto;
  margin-inline: clamp(-1.6rem, -2.5vw, -1rem);   /* el traslape */
  border: 1px solid var(--linea);
  box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.45);
  transform-origin: 50% 100%;
  transition: transform var(--dur-base) var(--ease-formation),
              box-shadow var(--dur-base) var(--ease-formation),
              filter var(--dur-base) var(--ease-formation);
}

.muestrario img:nth-child(1) { transform: rotate(-7deg)  translateY(.5rem); }
.muestrario img:nth-child(2) { transform: rotate(-3.5deg) translateY(.15rem); }
.muestrario img:nth-child(3) { transform: rotate(0deg)   translateY(-.35rem); z-index: 2; }
.muestrario img:nth-child(4) { transform: rotate(3.5deg)  translateY(.15rem); }
.muestrario img:nth-child(5) { transform: rotate(7deg)   translateY(.5rem); }

.muestrario:hover img,
.muestrario:focus-visible img {
  margin-inline: .25rem;
  transform: rotate(0deg) translateY(0);
  box-shadow: 0 .8rem 2.4rem rgba(0,0,0,.55);
}

/* La que se mira se levanta; las otras se van un poco atrás. Sin oscurecer:
   estas portadas son de una tinta y bajarles el brillo las mata. */
.muestrario:hover img:hover {
  transform: translateY(-.9rem) scale(1.04);
  box-shadow: 0 1.4rem 3rem rgba(0,0,0,.6);
}
.muestrario:hover img:not(:hover) { filter: saturate(.75); }

.muestrario__pie {
  flex-basis: 100%;
  margin-top: 1.4rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acc);
}

.muestrario:focus-visible { outline: 2px solid var(--acc); outline-offset: .8rem; }

/* En pantalla chica caben tres y se ven; cinco se vuelven estampillas. */
@media (max-width: 34rem) {
  .muestrario img:nth-child(n+4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .muestrario img { transition: none; }
  .muestrario:hover img, .muestrario:hover img:hover { transform: none; }
}