/* Matteria — hoja de la ficha de caso (ficha19): apertura en crema, lamina que
   cabalga el corte y cuerpo en oscuro. Cargar SIEMPRE despues de entry.css y
   antes de colorN.css. Parte de entry.css: no repite cabecera, pie ni modal. */

/* Lo que no es serif no hereda los conjuntos de Reckless ni su tracking */
.page .grid-toggle {
  font-feature-settings: normal;
}

/* La pagina es crema: la cabecera va sobre ella y el cuerpo oscuro entra
   despues como banda a borde de ventana. */
.page { background: var(--bg-body); color: var(--ink); }
/* Cabecera con la geometria del articulo (ficha8-11): mismo aire vertical,
   mismo logo de 32 y los mismos dos peldanos menos en estrecho. La reticula,
   el sitio del nav y el paso a dos filas los pone entry.css. */
.site-header { padding-block: var(--space-16); }
main.wrap { margin-top: var(--space-16); }
/* El logo mide igual en todos los tramos: la base lo sube a 48 en estrecho */
.site-header .logo-link { --logo-h: 32px; }
/* Del boton unico (.button-primary) solo se cambia el alto: se ajusta a la
   barra, que es mas baja que los 56 del modulo */
.site-header .button-primary { min-height: 48px; }
/* El logo declara su propio color y no hereda el del contenedor */
.site-header .logo-link,
.site-header .logo-link:hover,
.site-header .logo-link:focus-visible { color: var(--ink); }

/* Las dos bandas: misma unidad de retícula y mismo sangrado a borde */
.hero-image,
.entry {
  --track: min(var(--grid-width), 100vw - 2 * var(--edge));
  --plate-under: calc(0.26 * var(--track));
  margin-inline: calc(-1 * var(--bleed-pad));
  padding-inline: var(--bleed-pad);
}
.hero-image {
  background: var(--bg-body);
}
.entry {
  position: relative;
  /* El pie de la banda se enciende hacia el rojo teja, y no llega a el del todo:
     mezclado al 78% sobre el granate, el paso es un calentamiento y no un cambio
     de color. La rampa arranca en el 15% para que no se vea donde empieza —el
     arranque de un degradado de dos paradas es un pliegue visible—, y el punto
     medio empujado al 84% deja casi todo el recorrido pegado al granate: el
     calentamiento solo se nota en el ultimo tramo. */
  --case-foot: color-mix(in oklab, var(--ocre-1) 78%, var(--primary));
  background: linear-gradient(180deg, var(--primary) 15%, 84%, var(--case-foot) 100%);
  color: var(--cream);
  /* Reserva el trozo de lamina que cae dentro de la banda oscura */
  padding-top: calc(var(--plate-under) + var(--space-24));
  padding-bottom: var(--space-24);
}
/* Corte curvo: OPCIONAL, y solo tiene sentido cuando la banda siguiente es de
   otro color; si las dos comparten fondo la curva no se ve.
   Es una tira del alto de la flecha, colgando del borde inferior de
   la banda, en la que la curva la pinta un radial-gradient: dentro de la elipse
   --primary, fuera el mismo color con alfa 0 —no "transparent", que al
   interpolar premultiplicado deja un filete oscuro de 1px—.
   Sin mascara ni clip-path ni SVG a proposito: un background se pinta en el
   tile cache y no obliga al compositor a un buffer offscreen, no se reproyecta
   al hacer scroll y no necesita prefijo -webkit-. La transparencia es real, asi
   que la tira funciona sobre cualquier fondo, incluida la textura de la banda
   siguiente.
   Limite asumido: un radial-gradient solo sabe hacer elipses, de modo que se
   pierde el centro achatado que daba la Bezier; el 75% de ancho es lo que mas
   se le acerca.
   z-index 2 para pintar por encima del fondo de la banda siguiente */
.entry { --case-curve: var(--space-24); }
.entry::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--case-curve));
  height: var(--case-curve);
  /* La curva prolonga el pie de la banda: mismo color con el que el degradado
     termina, asi que la juntura no se ve */
  background: radial-gradient(100% var(--case-curve) at 50% 0,
      var(--case-foot) 99%,
      rgb(from var(--case-foot) r g b / 0) 100%)
    top / 100% 100% no-repeat;
  pointer-events: none;
}

/* ---- Apertura ---- */
.hero-image .entry-author {
  grid-column: 1 / -1;
  color: var(--accent);
}
/* Titular destacado de la apertura: el peldano mas alto de la escala */
.featured-display {
  grid-column: 1 / span 7;
  /* Es un parrafo, no un encabezado: la proclama de apertura no entra en la
     jerarquia, que abre en el h1 del libro. Asi que la serif y el ajuste de
     linea, que antes traia la regla de encabezados, se declaran aqui. */
  font-family: var(--serif);
  font-feature-settings: var(--serif-feat);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: pretty;
  margin: var(--space-16) 0 0;
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  color: var(--ocre-1);
  text-wrap: pretty;
}

/* ---- Lamina entre las dos bandas ---- */
.featured-image {
  position: relative;
  z-index: 1;
  margin: var(--space-20) 0 calc(-1 * var(--plate-under));
}
/* El disparador ocupa la lamina entera: el boton no aporta caja propia */
.featured-image .album-shot { display: block; width: 100%; }
.featured-image .album-shot > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}
/* Titular y autoria van dentro de .case-notes, asi que ya no se colocan en la
   reticula: solo escala y tinta */
.entry .entry-title {
  margin: 0;
  font-family: var(--serif);
  font-feature-settings: var(--serif-feat);
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  color: var(--veil-white-90);
  text-wrap: pretty;
}
.entry .entry-author {
  margin: var(--space-3) 0 0;
  color: var(--ink-light);
}
.case-notes {
  grid-column: 2 / span 6;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--veil-white-90);
}
.case-notes p { margin: 0; }
.case-notes p.intro { color: var(--ink-light); }
/* La ficha tecnica va sobre la banda de color: filetes en la escala blanca, y
   el dato en crema plena (heredaria el --ink-light rojo de la paleta) */
/* Enlaces de compra: van dentro de .case-notes, cerrando el bloque por debajo
   del panel, asi que no se colocan en la reticula: solo su aire. Dentro va
   .buy-links, que es universal y aqui se tumba. */
.aside-links {
  /* El hueco entre el rotulo y la fila lo pone gap, no un margen: dentro de
     .case-notes la regla .case-notes p { margin: 0 } gana a cualquier margen
     que declare el rotulo por su clase, y lo dejaba pegado. */
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-16);
  /* Rotulo y fila centrados en el bloque; la fila se cine a sus tres celdas */
  justify-items: center;
  text-align: center;
}
.aside-links-title {
  margin: 0;
  font-family: var(--mono);
  font-feature-settings: normal;
  font-size: var(--label);
  line-height: var(--leading-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
}
/* Aqui la pila universal se tumba: tantas celdas por fila como quepan, todas
   del mismo ancho. Y sin elevacion: dentro de la banda de color la sombra de la
   escala clara no dibuja canto, solo ensucia. */
.aside-links .buy-links {
  display: grid;
  grid-template-columns: repeat(3, var(--space-16));
  /* Se cine a sus tres celdas y se centra: con pistas elasticas la fila se
     estiraba al ancho del bloque y las celdas quedaban a la izquierda */
  width: fit-content;
  margin-inline: auto;
  box-shadow: none;
}
/* El modulo pide --ink y --borders, que son de papel claro: la tinta pasa a
   crema y los velos a la escala blanca. El filete se comparte por el lado
   corto, asi que el -1px pasa de vertical a horizontal. */
.aside-links .buy-links > :is(a, button) {
  color: var(--cream);
  border-color: var(--veil-white-10);
}
.aside-links .buy-links > :is(a, button) + :is(a, button) {
  margin-top: 0;
  margin-left: -1px;
}
.aside-links .buy-links > :is(a, button):hover,
.aside-links .buy-links > :is(a, button):focus-visible {
  background: var(--veil-white-10);
  color: var(--cream);
}

/* Tab de detalles: seis pistas iguales con el mismo canal, asi que reproducen
   las columnas 2-7 que ocupa el bloque —pista 1 = columna 2, pista 6 = columna
   7—. La pila abre en las pistas 2-4 con el parrafo a su derecha (5-6), y la
   ficha tecnica cierra a lo ancho en la fila siguiente. */
.notes-panel-details {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}
.notes-panel-details > p {
  grid-column: 4 / span 3;
  grid-row: 1;
  margin: 0;
}
.notes-panel-details .poster-stack { grid-column: 1 / span 3; grid-row: 1; }
.notes-panel-details .list-details2 {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: var(--space-12);
}
/* Dentro de la banda de color el velo es oscuro por naturaleza, no por
   contraste con la pagina: mismo peldano que .release-details en .legacy */
:is(.case-notes, .aside-links) .list-details2 { background: var(--veil-white-4); }
:is(.case-notes, .aside-links) .list-details2 {
  margin-top: var(--space-8);
  color: var(--cream);
}
:is(.case-notes, .aside-links) .list-details2 .head-row { border-color: var(--veil-white-10); }
/* Sobre el rojo claro de la banda, --ink-light no llega al minimo a este
   tamano: el rotulo baja al velo del cuerpo, como su dato */
/* En escritorio la ficha tecnica se cine dos columnas y arranca en la segunda
   pista del bloque, que son seis. En el panel de materiales no, que ahi cierra
   a lo ancho. */
@media (min-width: 961px) {
  .notes-panel:not(.notes-panel-details) .list-details2 {
    --col: calc((100% - 5 * var(--gutter)) / 6);
    width: calc(4 * var(--col) + 3 * var(--gutter));
    margin-left: calc(var(--col) + var(--gutter));
  }}
:is(.case-notes, .aside-links) .list-details2 dt { color: var(--veil-white-90); }
:is(.case-notes, .aside-links) .list-details2 dd { color: var(--cream); text-align: right; }
.case-notes p + p { margin-top: var(--space-6); }

/* ---- Tabs de .case-notes ----
   Sin JS: tres radios hermanos y los paneles se encienden con :checked. Se
   emparejan por posicion (nth-of-type / nth-child), no por id, para que el
   modulo se clone en otra ficha sin tocar el CSS */
.entry-description { margin-top: var(--space-16); }
.notes-tab-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.notes-tablist {
  /* Misma reticula que la caja (6 pistas del grid-8, de la 2 a la 7): asi cada
     rotulo cae en una columna real. Resumen en la 2, Indice en la 3, Detalles
     en la 4 de la pagina */
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gutter);
  /* El filete corrido, y encima el subrayado del activo */
  border-bottom: 1px solid var(--veil-white-10);
}
.notes-tab:nth-child(1) { grid-column: 1; }
.notes-tab:nth-child(2) { grid-column: 2; }
.notes-tab:nth-child(3) { grid-column: 3; }
.notes-tab {
  justify-self: start;
  padding-bottom: var(--space-3);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-family: var(--mono);
  font-feature-settings: normal;
  font-size: var(--label);
  line-height: var(--leading-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  cursor: pointer;
  transition: color 0.24s var(--ease), border-color 0.24s var(--ease);
}
.notes-tab:hover { color: var(--cream); }
.notes-panel { display: none; margin-top: var(--space-8); }
.notes-tab-input:nth-of-type(1):checked ~ .notes-tablist .notes-tab:nth-child(1),
.notes-tab-input:nth-of-type(2):checked ~ .notes-tablist .notes-tab:nth-child(2),
.notes-tab-input:nth-of-type(3):checked ~ .notes-tablist .notes-tab:nth-child(3) {
  /* Solo la pestana activa sube a la tinta del titular */
  color: var(--veil-white-90);
  border-bottom-color: var(--veil-white-90);
}
.notes-tab-input:nth-of-type(1):focus-visible ~ .notes-tablist .notes-tab:nth-child(1),
.notes-tab-input:nth-of-type(2):focus-visible ~ .notes-tablist .notes-tab:nth-child(2),
.notes-tab-input:nth-of-type(3):focus-visible ~ .notes-tablist .notes-tab:nth-child(3) {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
}
/* nth-of-type cuenta por tipo de elemento: los paneles son el 2o, 3o y 4o div
   de la caja (el 1o es .notes-tablist) */
.notes-tab-input:nth-of-type(1):checked ~ .notes-panel:nth-of-type(2),
.notes-tab-input:nth-of-type(2):checked ~ .notes-panel:nth-of-type(3),
.notes-tab-input:nth-of-type(3):checked ~ .notes-panel:nth-of-type(4) {
  display: block;
}
/* El panel activo es block; el de detalles va a dos bloques, asi que necesita
   grid. Lleva .notes-panel para empatar la especificidad de la regla de arriba
   y gana por posicion */
.notes-tab-input:nth-of-type(3):checked ~ .notes-panel.notes-panel-details {
  display: grid;
}
.notes-panel .list-details2 { margin-top: 0; }
/* En el indice la ficha tecnica va debajo del sumario, con aire de bloque */
.notes-panel .toc-brief + .list-details2 { margin-top: var(--space-12); }
/* El dato pegado al rotulo, no alineado a la derecha */
.notes-panel .toc-brief + .list-details2 dd { text-align: left; }
.notes-panel .toc-brief {
  /* Mando de tinta del sumario: crema dentro de la banda de color; .case-notes
     lo reapunta un peldano mas abajo */
  --toc-ink: var(--cream);
  margin-top: 0;
  color: var(--toc-ink);
}
/* Igual en el sumario: es el bloque de texto mas largo de la banda */
.case-notes .toc-brief { --toc-ink: var(--veil-white-90); }
/* Si el sumario va tras un parrafo, abre el aire de subbloque */
.notes-panel p + .toc-brief { margin-top: var(--space-8); }
/* La guia del indice deja de ser punteada: filete de 1px en crema, pleno en el
   centro y desvaneciendose a transparente en los dos extremos. Se cambia el
   border por un fondo para poder degradarlo */
.notes-panel .toc-brief .toc-leaders {
  border-bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgb(from var(--toc-ink) r g b / 0) 0%,
    var(--toc-ink) 50%,
    rgb(from var(--toc-ink) r g b / 0) 100%);
}
/* .toc-page pide --veil-70, que en paleta clara apunta a la escala oscura:
   dentro de la banda de color va en crema */
.notes-panel .toc-brief .toc-page { color: var(--toc-ink); }

/* ---- .legacy: banda a borde de ventana ----
   Oscura por naturaleza: escala blanca literal, no la semantica de la pagina. */
.legacy {
  position: relative;
  overflow: hidden;
  margin-inline: calc(-1 * var(--bleed-pad));
  padding-inline: var(--bleed-pad);
  padding-block: var(--space-24);
  background: var(--primary);
  border: 0;
  color: var(--cream);
  --ink: var(--cream);
  --borders: var(--veil-white-10);
  --line: var(--veil-white-50);
  --veil-70: var(--veil-white-70);
  --veil-30: var(--veil-white-30);
  --veil-20: var(--veil-white-20);
  --veil-10: var(--veil-white-10);
  --veil-4: var(--veil-white-4);
  --veil-2: var(--veil-white-2);
}
/* El velo del bloque de credito iba pensado sobre papel claro */
.legacy .release-details { background: var(--veil-white-4); }

@media (max-width: 960px) {
  /* Dos peldanos menos de aire en la cabecera */
  .site-header { padding-block: var(--space-12); }
  main.wrap { margin-top: var(--space-12); }
  .featured-display,
  .case-notes { grid-column: 1 / -1; }
  /* A una pista la pila se comeria la pantalla con su 4/5: se topa a media
     retícula y se queda a la izquierda */
  .notes-panel-details { grid-template-columns: minmax(0, 1fr); }
  .notes-panel-details > p,
  .notes-panel-details .list-details2 { grid-column: 1; grid-row: auto; }
  .notes-panel-details .poster-stack {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--space-8);
    max-width: calc(0.5 * var(--track));
  }
  .entry { --case-curve: var(--space-18); }
  .featured-display { margin-top: var(--space-12); }}
@media (max-width: 767px) {
  /* Los tabs abandonan la reticula: tres pistas iguales a todo el ancho */
  .notes-tablist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .notes-tab:nth-child(1) { grid-column: 1; }
  .notes-tab:nth-child(2) { grid-column: 2; }
  .notes-tab:nth-child(3) { grid-column: 3; }
  .hero-image,
  .entry { --plate-under: calc(0.18 * var(--track)); }
  .entry { --case-curve: var(--space-12); }
  .featured-image { margin-top: var(--space-16); }
  .featured-image .album-shot > img { aspect-ratio: 4 / 3; }}

/* ================= Banda del autor: a borde de ventana ================= */
.author-about {
  position: relative;
  isolation: isolate;
  margin-inline: calc(-1 * var(--bleed-pad));
  padding-inline: var(--bleed-pad);
  overflow: clip;
  padding-block: var(--space-24);
  /* Base opaca de la banda: por el 39% del ambar del velo no se ve la pagina.
     Arranca en el propio papel de la ficha, asi que el borde de arriba no corta:
     la banda nace del papel y se va calentando hacia abajo. */
  background: var(--cream);
  /* Tinta de toda la banda, declarada una sola vez: cita, titular, cuerpo y las
     comillas de una cita interior la heredan. Solo el credito se sale. */
  color: var(--ocre-1);
  --quote-mark: currentColor;
}
.author-about::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../../img/bg-paper-vintage.webp") center top / 100% auto no-repeat;
  rotate: 180deg;
  mix-blend-mode: multiply;
  opacity: 1;
  /* La imagen mide 1440x967, asi que a todo el ancho su alto es el 67.2%: ahi
     esta su canto. Va rotada, de modo que dentro de esta regla el arranque es
     el fondo de la banda: la mascara la deja entera abajo, la va rebajando
     hacia arriba y la apaga del todo en su borde, que es lo que quita el corte
     contra el degradado. */
  --paper-h: 67.2vw;
  --paper-fade: var(--space-24);
  --paper-mask: linear-gradient(180deg,
    #000 0,
    rgb(0 0 0 / 0.55) calc(var(--paper-h) - var(--paper-fade)),
    transparent var(--paper-h));
  -webkit-mask-image: var(--paper-mask);
  mask-image: var(--paper-mask);
  pointer-events: none;
}
/* Velo de papel sobre la mancha: crema opaca en la esquina de arriba y ambar al
   61% en la de abajo, que es por donde asoma la textura. El eje es el mismo de
   -61 grados, girado media vuelta (119) para dejar el lado translucido abajo. */
.author-about::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(119deg, var(--cream) 0%, var(--paper-warm) 100%);
  pointer-events: none;
}
/* Contenido por encima de las firmas del fondo */
.author-about > * {
  position: relative;
  z-index: 1;
}
.author-about > .essay-firma,
.author-about > .essay-sign {
  position: absolute;
  z-index: 0;
  aspect-ratio: 1600 / 437;
  background: url("../../img/signature-adriano1.webp") center / contain no-repeat;
  opacity: 0.85;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.author-about > .essay-firma {
  left: -18%;
  width: 120%;
  top: 40%;
}
.author-about > .essay-sign {
  left: 32%;
  width: 62%;
  bottom: calc(-6% + var(--space-24));
  aspect-ratio: 971 / 572;
  background-image: url("../../img/signature-adriano2.webp");
}
.essay-portrait {
  grid-column: 3 / span 4;
  margin: var(--space-16) 0 var(--space-12);
  /* Reserva el hueco con la proporcion del archivo: sin esto la figure sale
     shrink-to-fit, colapsa a 0 con la imagen aun sin cargar y el lazy no
     dispara nunca. Ademas deja el CLS a cero */
  aspect-ratio: 1400 / 1143;
}
.essay-portrait img {
  display: block;
  width: 100%;
  height: auto;
}
.essay-quote {
  grid-column: 2 / span 6;
  margin: 0;
  text-align: center;
}
.essay-quote p {
  margin: 0;
  font-family: var(--serif);
  font-feature-settings: var(--serif-feat);
  font-weight: 400;
  font-size: var(--text-h2);
  line-height: clamp(2.25rem, 1.821rem + 2.143vw, 3.75rem);
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.essay-quote cite {
  display: block;
  margin-top: var(--space-8);
  font-family: var(--mono);
  font-feature-settings: normal;
  font-style: normal;
  font-size: var(--label);
  line-height: var(--leading-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* La firma va sobre la banda crema del ensayo */
  color: var(--accent);
}
.essay-body {
  margin-top: var(--space-24);
}
.essay-title {
  grid-column: 2 / span 6;
  margin: 0 0 var(--space-12);
  font-family: var(--serif);
  font-feature-settings: var(--serif-feat);
  font-weight: 400;
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
}
.essay-body .author-description {
  grid-column: 2 / span 6;
  columns: 2;
  column-gap: var(--gutter);
}
/* Corte de columna a mano: el flujo reparte por altura, y aqui interesa que la
   columna izquierda cierre en un parrafo concreto */
.essay-body .author-description .col-end { break-after: column; }
.essay-body .author-description p {
  margin: 0 0 var(--space-6);
  font-size: var(--text-body);
  line-height: var(--leading-28);
  break-inside: avoid;
}
@media (max-width: 960px) {
  .essay-quote,
  .essay-title,
  .essay-portrait { grid-column: 1 / -1; }
  .author-about { padding-block: var(--space-20); }
  .essay-body .author-description { grid-column: 1 / -1; columns: 1; }
  .author-about > .essay-firma { top: 44%; }}

/* ---- Cabecera en estrecho: logo y CTA en la misma linea ----
   entry.css baja el nav a una segunda fila y centra el logo. En el caso de
   estudio el CTA vive en la cabecera (no en el dock), asi que la fila se
   resuelve con flex: logo a la izquierda, boton a la derecha, sin estirarlo */
@media (max-width: 960px) {
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .site-header .logo-link {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
  }
  .site-header .site-header-nav {
    grid-column: auto;
    grid-row: auto;
    justify-content: flex-end;
    flex: 0 0 auto;
  }
  .site-header-nav .button-primary {
    width: auto;
    flex: 0 0 auto;
  }}

/* ---- .legacy: cierre editorial ----
   Fondo pintado: la imagen se apoya en el borde inferior y el degradado de
   noche cubre el resto de la banda. */
.legacy {
  background-image: linear-gradient(180deg, var(--night-2) 9%, var(--night) 60%);
  /* Un peldano mas de aire abajo: el logotipo cierra la pagina */
  padding-bottom: var(--space-60);
}
/* La imagen de cierre va en su propia capa para poder disolver su borde
   superior: el fichero trae una cuna transparente en diagonal que a filo se
   veia como un corte. La capa mide lo que la imagen (1440x1285), asi que la
   mascara se cuenta desde el borde de la imagen y no desde el de la banda. */
.legacy::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  aspect-ratio: 1440 / 1285;
  background: url("../../img/f20-closing-bg.webp") no-repeat bottom center / 100% auto;
  /* El alfa del fichero no esta difuminado: pasa de 0 a 1 en un pixel, y ese
     filo diagonal vive entre el 9% y el 17% de la altura de la imagen. Si la
     mascara ya vale algo ahi, el salto se ve. Se mantiene en cero hasta pasado
     el filo (18%) y sube desde alli. */
  -webkit-mask: linear-gradient(to bottom, transparent 0 18%, #000 44%);
  mask: linear-gradient(to bottom, transparent 0 18%, #000 44%);
  pointer-events: none;
}
/* El contenido por delante de las dos capas pintadas */
.legacy > .grid-8 { position: relative; z-index: 1; }
.legacy .title-section {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  /* Rotulo pequeno sobre la noche */
  color: var(--accent);
}
.legacy > .legacy-signature {
  position: absolute;
  z-index: 0;
  left: -18%;
  width: 120%;
  top: 0;
  margin-top: var(--space-16);
  aspect-ratio: 2546 / 431;
  background: var(--cream, #f2efe9);
  -webkit-mask: url("../../img/signature-legacy.webp") center top / 100% auto no-repeat;
  mask: url("../../img/signature-legacy.webp") center top / 100% auto no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
  opacity: 0.7;
  pointer-events: none;
  /* Capa propia: la deriva horizontal se compone sin repintar la mascara */
  transform: translateZ(0);
}
.legacy-collage {
  position: relative;
  grid-column: 1 / -1;
  margin: var(--space-16) 0 0;
  aspect-ratio: 1440 / 1000;
}
.legacy-collage figure {
  position: absolute;
  margin: 0;
  translate: var(--dx, 0) var(--dy, 0);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  /* Cada recorte pinta solo dentro de si mismo: el repintado de uno no arrastra
     a los otros siete */
  contain: layout paint style;
  /* Un grado de balanceo al pasar por encima, alternando el sentido. El giro
     base vive en --rot para poder sumarle el del hover sin recomponer cada
     regla; el arrastre usa translate, asi que no se pisan. */
  rotate: calc(var(--rot, 0deg) + var(--rot-hover, 0deg));
  transition: rotate 0.9s var(--ease);
}
.legacy-collage figure:nth-child(odd):hover:not([data-dragging]) { --rot-hover: -1deg; }
.legacy-collage figure:nth-child(even):hover:not([data-dragging]) { --rot-hover: 1deg; }
@media (prefers-reduced-motion: reduce) {
  .legacy-collage figure { transition: none; }}
.legacy-collage img {
  display: block;
  width: 100%;
  height: auto;
}
@media (prefers-reduced-motion: no-preference) {
  /* Cada pieza espera su turno; el JS marca la lista con data-staged y luego
     pone data-in en cada figura cuando su imagen ya esta descodificada. Si el
     JS no llega, no hay data-staged y el collage se ve sin mas. */
  .legacy-collage[data-staged] figure:not([data-in]) { opacity: 0; }
  .legacy-collage figure[data-in] {
    animation: fgRise 0.9s var(--ease) both;
    animation-delay: var(--rd, 0ms);
  }
}
/* Posiciones: porcentajes sobre el lienzo de 1440x1000, asi el collage escala
   entero con la banda */
.legacy-collage figure:nth-child(1) { left: 1%; top: 1%; width: 12.5%; --rot: -10deg; z-index: 1; }
.legacy-collage figure:nth-child(2) { left: 15%; top: 1%; width: 43%; --rot: -1deg; }
.legacy-collage figure:nth-child(3) { left: 70%; top: 46%; width: 30%; --rot: 7deg; }
.legacy-collage figure:nth-child(4) { left: 78%; top: 32%; width: 9%; --rot: -12deg; z-index: 2; }
.legacy-collage figure:nth-child(5) { left: 0%; top: 38%; width: 16%; --rot: 7deg; }
.legacy-collage figure:nth-child(6) { left: 59%; top: 4%; width: 40%; --rot: -1deg; }
.legacy-collage figure:nth-child(7) { left: 46%; top: 37%; width: 24%; --rot: -5deg; z-index: 1; }
.legacy-collage figure:nth-child(8) { left: 17%; top: 28%; width: 26%; --rot: 2deg; }
.legacy-quote {
  grid-column: 2 / span 6;
  margin: var(--space-24) 0 0;
  font-weight: 400;
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: -0.02em;
  color: var(--cream);
  text-wrap: pretty;
  text-align: center;
}
.legacy-closing {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  margin-top: var(--space-16);
}
.closing-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding-inline: var(--space-9);
}
.closing-mark {
  position: relative;
  margin-top: var(--space-60);
  display: block;
  width: 187px;
  height: 38px;
  color: var(--veil-30);
}

@media (max-width: 960px) {
  .legacy { padding-block: var(--space-32); }
  .closing-mark { margin-top: var(--space-32); }
  .legacy-quote { grid-column: 1 / -1; }
  /* El collage abandona el posicionado absoluto y pasa a dos columnas en flujo */
  .legacy-collage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    aspect-ratio: auto;
  }
  .legacy-collage figure:nth-child(1),
  .legacy-collage figure:nth-child(4),
  .legacy-collage figure:nth-child(6),
  .legacy-collage figure:nth-child(7) { display: none; }
  .legacy-collage figure:nth-child(n) {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    rotate: none;
    align-self: start;
    translate: none;
    touch-action: pan-y;
  }
  .legacy-collage figure:nth-child(2) { grid-column: span 2; }
  .legacy-collage figure:nth-child(5) img,
  .legacy-collage figure:nth-child(8) img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}
@media (max-width: 767px) {
  .legacy-collage { grid-template-columns: minmax(0, 1fr); }
  .legacy-collage figure:nth-child(2) { grid-column: span 1; }
}

/* ---- Visor de detalle de una pieza del collage ----
   No es una tarjeta: ocupa la ventana entera y su velo de noche deja asomar el
   collage que hay detras. */
.detail {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgb(4 48 59 / 0.9);
  color: var(--cream);
  overflow: auto;
  overscroll-behavior: contain;
}
.detail::backdrop { background: rgb(4 48 59 / 0.6); }
/* Pieza y texto centrados en la ventana; el pie de credito cierra abajo, a todo
   el ancho */
.detail-inner {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  column-gap: var(--space-16);
  row-gap: var(--space-12);
  padding: var(--space-20) var(--bleed-pad) var(--space-12);
}
.detail-figure {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  justify-self: center;
  max-width: 100%;
}
.detail-figure img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 64dvh;
  height: auto;
  transition: opacity 0.3s var(--ease);
}
.detail[data-loading] .detail-figure img { opacity: 0; }
.detail-body {
  grid-column: 2;
  grid-row: 1;
  max-width: 34ch;
  font-family: var(--serif);
  font-size: var(--text-xl);
  line-height: 1.45;
  color: var(--cream);
  text-wrap: pretty;
}
.detail-body p { margin: 0 0 1.4em; }
.detail-body p:last-child { margin-bottom: 0; }
.detail-credit {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  max-width: 68ch;
  justify-self: center;
  font-family: var(--sans);
  font-size: var(--text-xs);
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--veil-white-50);
}
.detail-close {
  position: absolute;
  top: var(--space-8);
  right: var(--bleed-pad);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--veil-white-70);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.detail-close:hover,
.detail-close:focus-visible { color: var(--cream); }
/* Aspa propia del cierre: mascara sobre el fichero, asi se tinta con
   currentColor y hereda el hover del boton */
/* Aqui el aspa va grande y desnuda: no hay boton redondo detras, asi que la
   presencia la da el tamano y el paso de medio velo a tinta plena */
.detail-close .icon-close {
  width: 44px;
  height: auto;
  opacity: 0.49;
  transition: opacity 0.24s var(--ease);
}
.detail-close:hover .icon-close,
.detail-close:focus-visible .icon-close { opacity: 1; }
@media (max-width: 960px) {
  .detail-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    padding-top: var(--space-16);
  }
  .detail-figure { grid-column: 1; grid-row: 1; }
  .detail-figure { justify-self: stretch; width: 100%; }
  .detail-figure img {
    width: 100%;
    height: 60dvh;
    max-height: 60dvh;
    object-fit: contain;
    object-position: center;
  }
  .detail-body {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
    font-size: var(--text-lg);
  }
  .detail-credit { grid-row: 3; }
}

/* ================= Apertura: la proclama se recorre palabra a palabra =================
   (html.hero-words; hero-words.js). Una barra de cursor avanza por la frase y
   cada palabra aparece a su paso, nitida, sin desenfoque; al acabar, la foto del
   libro sube a su sitio y la cabecera entra detras. Sin maquina ni sonido (JL,
   7-sept: para la presentacion). La proclama y la foto conservan el sitio y el
   tamano de la v2: todo anclado a las columnas de la reticula. */

/* Cada palabra existe desde el principio (invisible): el parrafo no cambia de
   forma ni de saltos de linea mientras se recorre */
.featured-display .tw-w { position: relative; }
.featured-display .tw-t {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.32s var(--ease);
}
.featured-display .tw-w.is-on .tw-t {
  visibility: visible;
  opacity: 1;
}
/* La barra de cursor: un filete de tinta a la derecha de la ultima palabra
   escrita (a la izquierda de la primera mientras espera). Pseudo posicionado en
   absoluto: no ocupa sitio y no mueve la frase. */
.featured-display .tw-w.is-cur::after {
  content: "";
  position: absolute;
  top: 0.07em;
  right: -0.14em;
  width: 0.045em;
  height: 0.84em;
  background: currentColor;
  visibility: visible;
}
.featured-display .tw-w.is-cur.is-pre::after { right: auto; left: -0.16em; }
/* Parpadea solo cuando espera (antes de arrancar y al terminar), no mientras avanza */
.featured-display .tw-w.is-cur.is-idle::after { animation: tw-blink 1.05s steps(1, end) infinite; }
@keyframes tw-blink { 50% { opacity: 0; } }
/* Al saltar la apertura (scroll antes de acabar) la frase aparece entera */
html.tw-skip .featured-display .tw-t { transition: none; }

/* La foto espera invisible mientras se escribe la proclama y aparece en su sitio
   al acabar, con el revelado de la casa (fgRise); la cabecera entra detras */
html.hero-words .featured-image { opacity: 0; }
html.hero-words .site-header { opacity: 0; }
/* Invisible no es intocable: mientras se escribe, ni la foto abre su visor ni
   la cabecera responde */
html.hero-words:not(.hero-done) .featured-image,
html.hero-words:not(.hero-done) .site-header { pointer-events: none; }
html.hero-words.hero-done .featured-image {
  animation: fgRise 1.05s var(--ease) 0.35s both;
}
html.hero-words.hero-done .site-header {
  animation: fgDrop 1.05s var(--ease) 0.6s both;
}
@media (prefers-reduced-motion: reduce) {
  html.hero-words .featured-image,
  html.hero-words .site-header { opacity: 1; animation: none; }
  .featured-display .tw-t { visibility: visible; opacity: 1; transition: none; }
  .featured-display .tw-w.is-cur::after { display: none; }
}

/* ---- Rescatado de la ficha 20: las firmas se trazan al llegar ----
   Una mascara barre el manuscrito de izquierda a derecha, como si la pluma
   escribiera. Un solo pase; la clase sig-inked la pone legacy-collage.js. */
@media (prefers-reduced-motion: no-preference) {
  .author-about > .essay-firma,
  .author-about > .essay-sign {
    -webkit-mask-image: linear-gradient(102deg, #000 42%, rgb(0 0 0 / 0) 58%);
    mask-image: linear-gradient(102deg, #000 42%, rgb(0 0 0 / 0) 58%);
    -webkit-mask-size: 260% 100%;
    mask-size: 260% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    transition: -webkit-mask-position 1.8s linear, mask-position 1.8s linear;
  }
  .author-about.sig-inked > .essay-firma,
  .author-about.sig-inked > .essay-sign {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
  /* La segunda firma espera a que la primera casi acabe, como quien firma dos veces */
  .author-about.sig-inked > .essay-sign { transition-delay: 1.1s; }
  /* La firma del legado ya usa el manuscrito como mascara, asi que aqui el
     barrido lo hace el relleno: un degradado de crema a nada que se desplaza */
  .legacy > .legacy-signature {
    background: linear-gradient(102deg, var(--cream, #f2efe9) 42%, rgb(0 0 0 / 0) 58%) 100% 0 / 260% 100% no-repeat;
    transition: background-position 1.8s linear;
  }
  .legacy.sig-inked > .legacy-signature { background-position: 0% 0; }
}

/* ---- Rescatado de la ficha 20: el visor de detalle viaja ----
   La pieza clicada se levanta del collage (su hueco queda vacio) y vuela hasta
   su sitio en el visor; al cerrar hace el camino de vuelta. El viaje lo lleva
   legacy-collage.js con GSAP; aqui, el velo y el hueco. */
.legacy-collage figure.is-lifted img { visibility: hidden; }
/* El velo pasa al ::backdrop para poder fundirlo sin arrastrar a la pieza */
.detail { background: none; }
.detail::backdrop {
  background: rgb(4 48 59 / 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@keyframes detail-veil { from { opacity: 0; } }
.detail[open]::backdrop { animation: detail-veil 0.45s var(--ease) both; }
@keyframes detail-veil-out { to { opacity: 0; } }
.detail[open].is-closing::backdrop { animation: detail-veil-out 0.55s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .detail[open]::backdrop,
  .detail[open].is-closing::backdrop { animation: none; }}