/* ==========================================================================
   La entrada al disco. El efecto es el de The Metropolitan Enigma de
   Ferragamo: papel con sombra de ramas, un título que se deshace en letras y
   unas tarjetas que esperan en las esquinas y, al entrar, pasan a un
   carrusel. Aquí las tarjetas son las carátulas del disco.
   ========================================================================== */

@font-face {
  font-family: 'EB Garamond';
  src: url('../assets/fuentes/eb-garamond-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* La cursiva: la llevan los títulos de las portadillas del libro */
@font-face {
  font-family: 'EB Garamond';
  src: url('../assets/fuentes/eb-garamond-latin-italic.woff2') format('woff2');
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Las esquinas de cada carátula, como un libro: el lomo (a la izquierda),
     en recto; el canto, redondeado */
  --esquinas-libro: 0 5px 5px 0;
  /* El alto de base de los que apoyan, dentro: lo usan ellos y el logo de
     enfrente, que mide lo que sus dos filas */
  --alto-apoyo-dentro: clamp(23.4px, max(2.16vw, 3.96vh), 36px);
  /* El papel de la primera página del libreto: sobre él va el paso entre el
     índice y el libreto, en los dos sentidos (igual en css/paneles.css) */
  --papel-de-libro: radial-gradient(circle at 55% 45%, #fbf8f1 10%, #ece5d6 90%);
  /* Claro u oscuro, como en la web del disco (js/tema.js marca el tema en el
     <html> antes de pintar). El oscuro es el de fábrica: el papel de la
     portada teñido de noche, el logo sobre oscuro y los textos en blanco. En
     el carrusel, la carátula desenfocada con el velo oscuro de las páginas
     de canción. */
  --papel: #2a2c31;
  --pared: url('../assets/papel/so-white.webp');
  --tamano-pared: 400px auto;
  --mezcla-pared: multiply;
  --logo: url('../assets/logo-oscuro.png');
  --texto: #fff;
  --sombra-texto: 0 1px 2px rgba(0, 0, 0, 0.5);
  --fondo-cancion: #111;
  --fondo-portada: 0.95;
  --lavado-portada: none;
  --velo-fondo: none;
  --flecha-borde: rgba(255, 255, 255, 0.55);
  --raya-ficha: rgba(255, 255, 255, 0.45);
  --flecha-fondo: rgba(255, 255, 255, 0.1);
  --velo-ficha: rgba(20, 20, 24, 0.55);
  /* La viñeta del índice: los bordes, hacia la noche */
  --vineta: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 80%, rgba(0, 0, 0, 0.8) 100%);
  /* La muesca del índice: un cristal oscuro y tupido (con el ratón encima,
     algo más claro), y los logos de su lista del color de la letra */
  --rotulo-abierto: rgba(20, 22, 26, 0.88);
  --rotulo-encima: rgba(44, 47, 54, 0.9);
  --filtro-logo: brightness(0) invert(1);
  --flecha-fondo-encima: rgba(255, 255, 255, 0.22);
  --boton-tema: rgba(20, 22, 26, 0.55);
  --boton-tema-encima: rgba(20, 22, 26, 0.75);
  --sombra-carta: 0 19px 38px rgba(0, 0, 0, 0.2), 0 15px 12px rgba(0, 0, 0, 0.12);
  --halo-foco: rgba(252, 0, 89, 0.3);
  --alto-carta: clamp(160px, 44vh, 440px);
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
}

/* El claro: el papel de la portada, sobre blanco, el logo sobre claro y el
   texto en su tinta, con un halo claro para leerse sobre las sombras. En el
   carrusel, la carátula lavada sobre papel crema, como el tema claro de las
   páginas de canción. */
:root[data-tema="claro"] {
  --papel: #fff;
  --mezcla-pared: normal;
  --logo: url('../assets/logo.png');
  --texto: #2f3742;
  --sombra-texto: 0 0 14px rgba(255, 255, 255, 0.7);
  --fondo-cancion: #f2eee5;
  --fondo-portada: 0.9;
  --lavado-portada: saturate(1.25) contrast(0.72) brightness(1.42);
  --velo-fondo: radial-gradient(60% 40% at 18% 12%, rgba(255, 253, 246, 0.4), transparent 70%),
    radial-gradient(55% 38% at 85% 78%, rgba(226, 218, 200, 0.38), transparent 72%),
    linear-gradient(rgba(244, 240, 231, 0.6), rgba(236, 230, 217, 0.68));
  --flecha-borde: rgba(47, 55, 66, 0.45);
  --raya-ficha: rgba(47, 55, 66, 0.4);
  --flecha-fondo: rgba(255, 255, 255, 0.4);
  --velo-ficha: rgba(250, 248, 242, 0.72);
  --vineta: radial-gradient(ellipse at center, transparent 55%, rgba(70, 52, 30, 0.16) 80%, rgba(70, 52, 30, 0.38) 100%);
  --rotulo-abierto: rgba(250, 248, 242, 0.92);
  --rotulo-encima: rgba(255, 255, 255, 0.97);
  --filtro-logo: brightness(0);
  --flecha-fondo-encima: rgba(255, 255, 255, 0.75);
  --boton-tema: rgba(255, 255, 255, 0.7);
  --boton-tema-encima: rgba(255, 255, 255, 0.9);
}

/* La portada es de papel blanco en los dos temas, como la del libro (ver
   body::before), con el logo sobre claro y la firma en su tinta. El oscuro
   empieza al entrar. */
body:not(.con-caratula) {
  --logo: url('../assets/logo.png');
  --texto: #2f3742;
  --sombra-texto: 0 0 14px rgba(255, 255, 255, 0.7);
}

@media (orientation: portrait) {
  :root {
    --alto-carta: clamp(120px, 25vh, 300px);
  }
}

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

html,
body {
  position: fixed;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

/* El papel de la portada, encima de la cal: blanco y con su grano, en
   mosaico como la cal. Es una capa aparte, opaca, que se funde entera al
   entrar y al volver: su grano es semitransparente, y como fondo del body se
   vería un momento sobre el color a medio cambiar, como una cuadrícula. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: #fff url('../assets/papel/so-white.webp') 0 0 / 400px auto repeat;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

body.con-caratula::before {
  opacity: 0;
}

/* Al volver de un libreto se entra directo en el índice: mientras llega,
   ni el papel ni la portada (el aviso lo pone el <head> de index.html) */
.de-vuelta body::before {
  opacity: 0;
  transition: none;
}

.de-vuelta .portada {
  visibility: hidden;
}

body {
  touch-action: pan-y pinch-zoom;
  /* El papel se repite en mosaico: sus bordes casan y no se ven las juntas,
     y así pesa poco y no se estira en pantallas grandes. */
  background: var(--papel) var(--pared) 0 0 / var(--tamano-pared) repeat;
  /* En oscuro, el papel se multiplica por el tono de la noche. */
  background-blend-mode: var(--mezcla-pared);
  color: var(--texto);
  transition: background-color 0.5s ease, color 0.5s ease;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: max(14px, 1.05vw);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------- El papel --- */

/* La sombra de unas ramas sobre el papel, muy desenfocada. Es un SVG en
   línea, no una foto: no pesa nada. Algo más grande que la pantalla para que
   al inclinarse con el ratón no se le vean los bordes. */
.sombras {
  position: fixed;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  will-change: transform;
}

.sombras svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120vw;
  height: 120vh;
  transform: translate(-50%, -50%);
  filter: blur(min(4vw, 48px));
  opacity: 0.32;
}

.rama {
  fill: #5c5048;
}

/* El grano, como en la web del disco. Sobre el papel ya lo pone su propio
   patrón: aquí se deja apagado. */
.grano {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* --------------------------------------------- El fondo de la canción --- */

/* Como en las páginas de canción de la web del disco: la carátula ampliada
   (210 %, para que el desenfoque no deje bordes), desenfocada 28 px y con un
   velo oscuro. Aparece al entrar en el carrusel, por encima de la cal. */
.fondo-cancion {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: var(--fondo-cancion);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease, background-color 0.5s ease;
}

.con-caratula .fondo-cancion {
  opacity: 1;
}

/* La capa nueva llega desde el lado hacia el que se va (--desde) y un poco
   más cerca, y se posa mientras la anterior se funde. */
/* La carátula desenfocada, sin filtro: es una miniatura ya desenfocada (la
   hace entrada.js) que se amplía, suavizada. Desenfocar con un filtro algo
   tan grande, en cada fotograma, daba tirones al cambiar de carátula */
.fondo-capa {
  position: absolute;
  top: 39.5%;
  left: 39.5%;
  width: 21%;
  height: 21%;
  background-position: 50% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  filter: var(--lavado-portada);
  opacity: 0;
  transform: translateX(0) scale(10.4);
  transition: opacity 1.1s ease, transform 1.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

.fondo-capa.activa {
  opacity: var(--fondo-portada);
  transform: translateX(0) scale(10);
}

.fondo-capa.llega {
  transition: none;
  opacity: 0;
  transform: translateX(calc(var(--desde, 0%) * 10)) scale(11);
}

@media (prefers-reduced-motion: reduce) {
  .fondo-capa,
  .fondo-cancion {
    transition: none;
  }
}

/* Sobre la carátula del tema claro, lavada, el halo claro sobra. */
:root[data-tema="claro"] .con-caratula {
  --sombra-texto: none;
}

/* El velo del papel sobre la carátula, en el tema claro; en oscuro, nada. */
.fondo-cancion::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--velo-fondo);
}

/* ------------------------------------------------------ El interruptor --- */

/* Claro u oscuro, como en la web del disco: arriba a la derecha, con el icono
   de adonde se va y no del tema en que se está. */
.tema {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--boton-tema);
  /* Un cristal: en la esquina puede asomar una carátula, y sin él el botón
     se perdía encima de ella. */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  color: var(--texto);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* En la portada no está: es blanca en los dos temas y no cambiaría nada.
     Aparece al entrar, con el índice, y al volver se va (y deja de
     estar en el tabulador en cuanto se ha ido) */
  opacity: 0;
  visibility: hidden;
  transition: background 0.15s ease, opacity 0.6s ease, visibility 0s linear 0.6s;
}

.con-caratula .tema {
  opacity: 1;
  visibility: visible;
  transition: background 0.15s ease, opacity 0.9s ease 0.5s, visibility 0s linear 0.5s;
}

.tema:hover {
  background: var(--boton-tema-encima);
}

.tema:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--halo-foco);
}

.tema svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:root[data-tema="claro"] .icono-sol,
:root:not([data-tema="claro"]) .icono-luna {
  display: none;
}

.icono-luna {
  fill: currentColor;
  stroke: none;
}

/* ------------------------------------------------------------ La firma --- */

.cabecera {
  position: fixed;
  top: max(24px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 30;
  text-align: center;
  pointer-events: none;
}

/* Dentro, la firma deja paso a «‹ Portada», que vuelve al título: arriba a
   la izquierda, frente al botón del tema y como él, una píldora de su alto y
   su cristal, igual que el «‹ Volver» de la web de las canciones. En la
   portada no se ve. La cabecera no atiende al ratón, pero el botón sí. */
.volver {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 60;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  margin: 0;
  padding: 0 15px 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--boton-tema);
  color: var(--texto);
  font: 500 10px/1 var(--font-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition:
    opacity 0.9s ease,
    background 0.15s ease;
}

.volver:hover {
  background: var(--boton-tema-encima);
}

.volver:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--halo-foco);
}

.volver-flecha {
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Y abajo a la derecha, en la esquina opuesta a los que apoyan, el logo,
   pequeño y sólo de adorno (a la portada se vuelve con el botón). Con el
   ancho y también con el alto: en una ventana de proporción intermedia no se
   queda pequeño. */
.marca {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  /* De alto, lo que miden las dos filas de los que apoyan, enfrente: la
     Diputación (1,4), el hueco (6px) y la Fundación (1,9) */
  height: calc(var(--alto-apoyo-dentro) * 3.3 + 6px);
  aspect-ratio: 718 / 458;
  background-image: var(--logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(var(--sombra-texto));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}

@media (max-width: 720px), (max-aspect-ratio: 4/3) {
  /* En el móvil, el logo sólo en la cuadrícula: abajo a la derecha, frente
     a los que apoyan (en el carrusel, abajo va la ficha) */
  .marca {
    display: none;
  }
  .en-rejilla .marca {
    display: block;
    bottom: var(--suelo-movil);
    right: max(16px, env(safe-area-inset-right));
  }
  /* En el móvil, sólo la flecha, redondo como el del tema: junto a la
     muesca no cabe la palabra (el nombre sí la dice) */
  .volver {
    width: 38px;
    padding: 0;
  }
  .volver-texto {
    display: none;
  }
  /* El botón Portada de la muesca no está: arriba a la izquierda ya está el
     otro, que hace lo mismo */
  .rotulo {
    display: none;
  }
  /* Salvo en la cuadrícula, con «Escuchar» y el título de la seleccionada:
     sin llegar al botón del tema ni al de la portada (12px del borde y 38px
     de ancho, más un poco de aire), hombros incluidos */
  .en-rejilla .rotulo {
    display: flex;
    box-sizing: border-box;
    max-width: calc(100vw - 2 * (12px + 38px + 8px + var(--hombro)));
  }
  .en-rejilla .escuchar {
    padding-inline: 16px;
  }
  /* La del índice, igual: sin llegar a los botones de las esquinas */
  .sumario {
    max-width: calc(100vw - 2 * (12px + 38px + 8px + var(--hombro)));
  }
  /* «Escuchar» y el título no caben con varias canciones: el título y el
     play, que ya lo dice; «Escuchar», sólo para el lector de pantalla */
  .en-rejilla .escuchar-verbo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.con-caratula :is(.firma, .entrar-flecha) {
  opacity: 0;
}

.con-caratula .volver {
  opacity: 1;
  transition-delay: 0.5s, 0s;
}

.con-caratula .marca {
  opacity: 1;
  transition-delay: 0.5s;
}

/* Al pie de la portada, como en el libro */
.firma {
  flex: none;
  transition: opacity 0.9s ease;
  /* El espaciado queda también tras la última letra: lo mismo delante, para
     que se vea centrada */
  margin: 0;
  padding-left: 0.32em;
  line-height: 1.2;
  font-family: var(--font-serif);
  font-size: max(15px, var(--cabe) * 0.03);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-shadow: var(--sombra-texto);
}

/* Dentro, donde estaba la firma: arriba, centrado, el rótulo, con el aire
   de las flechas del mando pero en forma de muesca: colgado del borde de
   arriba, como el notch de un MacBook (css/muesca.css). Lleva un botón que
   vuelve a la portada del título y, en el índice, dice el título de la
   seleccionada, con un play a su derecha si es una canción. La cabecera no
   atiende al ratón; el rótulo, sí. */
.rotulo {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 50%;
  translate: -50% 0;
  /* En columna: arriba el título; desplegada, debajo, la lista */
  display: flex;
  flex-direction: column;
  /* Un cristal oscuro y tupido (en el tema claro, crema): se lee sobre
     cualquier carátula, plegada y desplegada */
  --muesca: var(--rotulo-abierto);
  --muesca-borde: var(--flecha-borde);
  color: var(--texto);
  pointer-events: auto;
  /* Con el dedo se baja y se sube: el navegador no se lleva el gesto */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition:
    opacity 0.9s ease,
    --muesca 0.2s ease,
    --muesca-borde 0.2s ease;
}

.inicio {
  min-width: 0;
  margin: 0;
  padding: 8px 28px 9px;
  border: 0;
  background: none;
  color: inherit;
  font: 500 11px/1.4 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: var(--sombra-texto);
  cursor: pointer;
}

/* En el índice, en lugar del botón: «Escuchar» (más tenue, para que no se
   lea junto al título), el título de la canción seleccionada y un play, con
   la misma letra; todo él lleva a su página en la web de las canciones */
.escuchar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 8px 22px 9px;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  font: 500 11px/1.4 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: var(--sombra-texto);
}

.escuchar[hidden],
.inicio[hidden] {
  display: none;
}

.escuchar-verbo {
  opacity: 0.7;
}

/* Mientras se estira hasta su nuevo ancho, lo que aún no cabe no se sale */
.escuchar-texto {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* A los lados del título, dos flechas que se mueven hacia abajo, a la vez:
   se despliega por ahí. Desplegada, hacia arriba y quietas */
.escuchar-flecha {
  flex: none;
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(var(--sombra-texto));
  animation: baja 1.6s ease-in-out infinite;
  transition: rotate 0.45s ease;
}

.rotulo.desplegado .escuchar-flecha {
  rotate: 180deg;
  animation: none;
}

/* A la izquierda, un play (es para escuchar), en un círculo del que sólo
   se ve el borde */
.escuchar-play {
  flex: none;
  width: 18px;
  height: 18px;
  filter: drop-shadow(var(--sombra-texto));
}

.escuchar-play-aro {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.escuchar-play-triangulo {
  fill: currentColor;
}

@keyframes baja {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 2px;
  }
}

/* Desplegada, más ancha; y debajo del título, dónde escuchar la canción: un
   botón por servicio, con su logo, en dos columnas como en el libreto (así
   tapa poco la ilustración), y al pie, su página en la web de las canciones */
.rotulo.desplegado {
  width: 320px;
}

.servicios-rotulo {
  padding: 0 18px 14px;
  font: 500 10px/1.4 var(--font-sans);
  letter-spacing: 0.06em;
}

.servicios-rotulo[hidden] {
  display: none;
}

.servicios-lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.servicio {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 6px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.servicio:hover {
  border-color: currentColor;
}

/* Los logos (que traen su nombre), del color de la letra, como en el libreto */
.servicio-logo {
  height: 15px;
  max-width: 150px;
  filter: var(--filtro-logo);
}

.servicio:focus-visible,
.servicios-mas:focus-visible {
  outline: 2px solid var(--halo-foco);
  outline-offset: 2px;
}

.servicios-mas {
  display: block;
  margin-top: 12px;
  color: inherit;
  text-align: center;
  text-underline-offset: 3px;
  opacity: 0.75;
}

.escuchar:focus-visible {
  outline: none;
}

.inicio:focus-visible {
  outline: none;
}

.rotulo:has(.inicio:focus-visible),
.rotulo:has(.escuchar:focus-visible) {
  box-shadow: 0 0 0 4px var(--halo-foco);
}

.con-caratula .rotulo {
  opacity: 1;
}

/* Un texto no tiene nada que escuchar: en el índice, la muesca se va */
.rotulo.sin-escucha {
  opacity: 0;
  pointer-events: none;
}

/* En la cuadrícula, arriba y centrada, la muesca del índice: con la forma
   de la de la carátula, pero oscura (en los dos temas) y menos translúcida,
   sin borde, con letra blanca y sin la línea larga, colgada del borde de
   arriba. Dice
   «Índice» entre dos flechas que bajan y se despliega hacia abajo con el
   índice del libro */
.sumario {
  position: fixed;
  /* Por encima de todo: desplegada, tapa la cuadrícula */
  z-index: 40;
  top: 0;
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  --linea: calc(var(--hombro) - 1px);
  --muesca: rgba(20, 22, 26, 0.82);
  --muesca-borde: transparent;
  --sombra-texto: 0 1px 2px rgba(0, 0, 0, 0.5);
  color: #fff;
  pointer-events: auto;
  transition: --muesca 0.2s ease;
  animation: aparece-el-sumario 0.6s ease 0.3s backwards;
}

.sumario[hidden] {
  display: none;
}

/* Metida hacia dentro, como la de la carátula: una sombra por dentro en su
   borde curvo (aquí, el de abajo). En la capa del borde, que no hay: la caja
   del cuerpo, sin hombros */
.sumario::after {
  left: 0;
  right: 0;
  mask: none;
  background: none;
  border-radius: 0 0 var(--radio-muesca) var(--radio-muesca);
  box-shadow: inset 0 -4px 5px -2px rgba(0, 0, 0, 0.45);
}

@keyframes aparece-el-sumario {
  from {
    opacity: 0;
  }
}

/* Con la letra de «Escuchar»; con el dedo, bajarlo la despliega: el gesto
   es suyo, no del navegador */
.sumario-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 8px 22px 9px;
  border: 0;
  background: none;
  color: inherit;
  font: 500 11px/1.4 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: var(--sombra-texto);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.sumario-boton:focus-visible {
  outline: none;
}

.sumario:has(.sumario-boton:focus-visible) {
  box-shadow: 0 0 0 4px var(--halo-foco);
}

.sumario.desplegado .escuchar-flecha {
  rotate: 180deg;
  animation: none;
}

/* Desplegada, más ancha, y debajo, el índice por partes: si no cabe, se
   desplaza por dentro (con el dedo, también) */
.sumario.desplegado {
  width: 320px;
}

.sumario-lista {
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 0 18px 16px;
}

.sumario-lista[hidden] {
  display: none;
}

.sumario-parte {
  margin: 12px 0 4px;
  font: 500 11px/1.4 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.sumario-piezas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sumario-pieza {
  display: flex;
  align-items: baseline;
  width: 100%;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: 400 18px/1.25 var(--font-serif);
  text-align: left;
  text-shadow: var(--sombra-texto);
  cursor: pointer;
  opacity: 0.8;
  transition:
    background-color 0.15s ease,
    opacity 0.15s ease;
}

.sumario-pieza:hover {
  background: rgba(255, 255, 255, 0.1);
  opacity: 1;
}

.sumario-pieza:focus-visible {
  outline: 2px solid var(--halo-foco);
  outline-offset: 1px;
  opacity: 1;
}

/* Desplegada, el pie de la seleccionada (su muesca y sus flechas) se va:
   si no, asoma a través del cristal */
body:has(.sumario.desplegado) .rejilla-pie {
  opacity: 0;
  pointer-events: none;
}

/* Delante de cada pieza, su número entre las de su clase: tenue, con las
   cifras parejas, en su columna */
.sumario-numero {
  flex: none;
  width: 1.4em;
  font-size: 0.8em;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}

/* La seleccionada, marcada: entera y en cursiva */
.sumario-pieza[aria-current] {
  font-style: italic;
  opacity: 1;
}

/* En el índice, abajo en el centro, el botón que aleja la cuadrícula para ver
   todas las carátulas (y la vuelve a acercar): redondo como el del tema */
.vista {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--boton-tema);
  color: var(--texto);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition:
    opacity 0.9s ease,
    background 0.15s ease;
}

.en-rejilla .vista {
  display: grid;
}

.con-caratula .vista {
  opacity: 1;
  transition-delay: 0.5s, 0s;
}

.vista:hover {
  background: var(--boton-tema-encima);
}

.vista:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--halo-foco);
}

.vista svg {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Cerca, el icono de alejar (muchas); alejada, el de acercar (una) */
.vista .icono-cerca,
.vista[aria-pressed="true"] .icono-lejos {
  display: none;
}

.vista[aria-pressed="true"] .icono-cerca {
  display: block;
}

/* ----------------------------------------------------------- La portada --- */

.portada {
  /* Como una lámina: el logo arriba, la firma abajo y la acuarela en medio,
     con los dos huecos iguales, y todo en proporción al ancho de la
     acuarela, que es el que manda. Ese ancho es lo que cabe: de ancho, la
     pantalla; de alto, lo que queda entre los márgenes para la acuarela
     (0,655), el logo (0,228), la firma (0,036) y dos huecos (0,08 cada uno),
     1,08 veces su ancho en total. El logo y la acuarela se quedan un 5 % por
     debajo, con más aire. Si sobra alto, los huecos crecen. */
  --arriba: max(40px, 6vh);
  /* Abajo, bajo la firma, van los que apoyan el disco: el margen les hace
     sitio. Su alto sale de la pantalla, no de la lámina (que sale de este
     margen); --pie es lo que miden (el más alto) y --suelo, su aire con el
     borde */
  --alto-apoyo: clamp(22px, min(3.4vw, 3.6vh), 30px);
  --pie: calc(var(--alto-apoyo) * 1.9);
  --suelo: max(3vh, calc(env(safe-area-inset-bottom) + 14px));
  --abajo: calc(var(--suelo) + var(--pie) + max(3vh, 18px));
  --cabe: min(100vw - 32px, 1000px, (100dvh - var(--arriba) - var(--abajo)) / 1.08);
  --ancho: calc(var(--cabe) * 0.95);
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--ancho) * 0.08);
  padding: var(--arriba) 16px var(--abajo);
  text-align: center;
  pointer-events: none;
}

.portada.fuera {
  visibility: hidden;
}

/* Al volar por el arco, encima de todo, la portada como estaba (el telón),
   con sus colores aunque el cuerpo diga que se está dentro. No atiende al
   ratón */
.telon {
  position: fixed;
  inset: 0;
  z-index: 1500;
  overflow: hidden;
  pointer-events: none;
  --logo: url('../assets/logo.png');
  --texto: #2f3742;
  --sombra-texto: 0 0 14px rgba(255, 255, 255, 0.7);
  transition: opacity 0.2s ease;
}

/* Aparece y se va fundiéndose (lo pone js/entrada.js) */
.telon.oculto {
  opacity: 0;
}

/* Dentro, con el papel de la portada, viene hacia la cámara, hacia el arco */
.telon-dentro {
  position: absolute;
  inset: 0;
  background: #fff url('../assets/papel/so-white.webp') 0 0 / 400px auto repeat;
  will-change: transform;
}

/* Dentro, la portada como estaba, aunque el cuerpo ya diga que se entra */
.telon .cuadricula {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}

.telon .portada {
  visibility: visible !important;
}

.telon :is(.firma, .entrar-flecha, .apoyos--portada) {
  opacity: 1 !important;
  visibility: visible !important;
}

.telon .acuarela-pintura {
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
}

/* Y detrás, el índice ya puesto, sin fundidos: se ve al fundirse la portada */
.tras-el-telon body::before,
.tras-el-telon :is(.rejilla, .fondo-cancion, .fondo-capa) {
  transition: none !important;
}

/* Al salir volando, la portada va entera, esté como esté la de verdad (viniendo
   de un libreto se entra directo al índice: nunca se pintó) */
.telon.entera .trozo {
  opacity: 1 !important;
  transform: none !important;
}

.telon.entera .acuarela-pintura {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Al aterrizar en la portada, todo en su sitio de una vez (está tapado),
   menos el telón, que se va fundiéndose */
.aterrizando :not(.telon),
.aterrizando *::before,
.aterrizando *::after {
  transition: none !important;
}

/* El logo, 2,8 veces más estrecho que la acuarela, como en la portada del
   libro. En el móvil, donde la acuarela la limita el ancho, así quedaría
   pequeño: no baja del 48 % de la pantalla (hasta 200px) */
.logo {
  position: relative;
  flex: none;
  width: max(calc(var(--ancho) / 2.8), min(48vw, 200px));
  aspect-ratio: 718 / 458;
  margin: 0 auto;
}

/* En el móvil en apaisado (una pantalla baja), no caben el logo, la
   acuarela, la firma y los que apoyan: sólo el logo, centrado de arriba abajo
   y a la medida del alto que queda. Los que apoyan se ven dentro, en el
   índice */
@media (orientation: landscape) and (max-height: 500px) {
  .portada {
    justify-content: center;
    padding: var(--arriba) 16px;
  }
  .logo {
    width: min(56vw, (100dvh - 2 * var(--arriba)) * 1.25);
  }
  .portada :is(.acuarela, .firma, .apoyos--portada) {
    display: none;
  }
}

/* La acuarela, del ancho que manda (ver .portada). Su imagen está ceñida a
   la tinta: su caja es lo que se ve. Las manchas se miden en anchos de esta
   caja (cqw) */
.acuarela {
  position: relative;
  flex: none;
  width: var(--ancho);
  aspect-ratio: 1984 / 1300;
  container-type: inline-size;
}

/* El tamaño de cada mancha: una longitud registrada, para que se anime */
@property --mancha0 {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --mancha1 {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --mancha2 {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* Multiplicada con la cal, como pintada en ella. Se ve por tres manchas de
   tinta, cada una centrada en su semilla; js/acuarela.js pone dónde, hasta
   dónde y cuándo */
/* La imagen va en un <picture> (con su AVIF): que no cuente como caja */
.acuarela > picture {
  display: contents;
}

.acuarela-pintura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0;
  mask-image: url('../assets/portada/mancha.webp'), url('../assets/portada/mancha.webp'), url('../assets/portada/mancha.webp');
  mask-repeat: no-repeat;
  mask-size:
    var(--mancha0) var(--mancha0),
    var(--mancha1) var(--mancha1),
    var(--mancha2) var(--mancha2);
  mask-position:
    calc(var(--mancha-x0) - var(--mancha0) / 2) calc(var(--mancha-y0) - var(--mancha0) / 2),
    calc(var(--mancha-x1) - var(--mancha1) / 2) calc(var(--mancha-y1) - var(--mancha1) / 2),
    calc(var(--mancha-x2) - var(--mancha2) / 2) calc(var(--mancha-y2) - var(--mancha2) / 2);
  transition: opacity 0.7s ease;
}

/* Pintándose, cada mancha crece en dos tramos. En el primero (el 70 % del
   tiempo) su borde recorre la ilustración, deprisa al principio y
   despacio al final, como la tinta en el papel mojado: al 30 % de su
   tamaño ya ha cubierto casi todo lo pintado. En el segundo, la tinta plena
   llena lo que quedaba a medias y las esquinas, casi vacías. Con una
   transición, que va de una vez, el borde lo recorría todo en un suspiro y
   el resto no se veía */
.acuarela.pintada .acuarela-pintura {
  --mancha0: var(--mancha-fin0);
  --mancha1: var(--mancha-fin1);
  --mancha2: var(--mancha-fin2);
  opacity: 1;
  animation:
    mancha0 var(--mancha-duracion0) linear var(--mancha-inicio0) both,
    mancha1 var(--mancha-duracion1) linear var(--mancha-inicio1) both,
    mancha2 var(--mancha-duracion2) linear var(--mancha-inicio2) both;
  transition: opacity 0.3s ease;
}

/* Pintada de golpe, sin pintarse (al aterrizar volando en la portada) */
.acuarela.pintada.ya .acuarela-pintura {
  --mancha0: var(--mancha-fin0);
  --mancha1: var(--mancha-fin1);
  --mancha2: var(--mancha-fin2);
  opacity: 1;
  animation: none;
  transition: none;
}

/* Al irse, cada mancha se retira hacia su semilla, al revés de como llegó (la
   última en pintarse, la primera), desde donde iba, y a la vez se funde, al
   ritmo del logo que se deshace. Es una animación propia: con una transición
   desde la de pintarse, el navegador saltaba a «sin manchas» y Cardo y
   Vicente desaparecían de golpe, antes que todo lo demás */
.acuarela.borrandose .acuarela-pintura {
  opacity: 0;
  animation:
    secarse0 var(--mancha-al-borrar0) linear var(--mancha-retraso-al-borrar0) both,
    secarse1 var(--mancha-al-borrar1) linear var(--mancha-retraso-al-borrar1) both,
    secarse2 var(--mancha-al-borrar2) linear var(--mancha-retraso-al-borrar2) both;
  transition: opacity 0.9s ease-in;
}

@keyframes secarse0 {
  0% {
    --mancha0: var(--mancha-desde0, var(--mancha-fin0));
    animation-timing-function: ease-in;
  }
  30% {
    --mancha0: min(var(--mancha-desde0, var(--mancha-fin0)), calc(var(--mancha-fin0) * 0.3));
    animation-timing-function: ease-in-out;
  }
  100% {
    --mancha0: 0px;
  }
}

@keyframes secarse1 {
  0% {
    --mancha1: var(--mancha-desde1, var(--mancha-fin1));
    animation-timing-function: ease-in;
  }
  30% {
    --mancha1: min(var(--mancha-desde1, var(--mancha-fin1)), calc(var(--mancha-fin1) * 0.3));
    animation-timing-function: ease-in-out;
  }
  100% {
    --mancha1: 0px;
  }
}

@keyframes secarse2 {
  0% {
    --mancha2: var(--mancha-desde2, var(--mancha-fin2));
    animation-timing-function: ease-in;
  }
  30% {
    --mancha2: min(var(--mancha-desde2, var(--mancha-fin2)), calc(var(--mancha-fin2) * 0.3));
    animation-timing-function: ease-in-out;
  }
  100% {
    --mancha2: 0px;
  }
}

@keyframes mancha0 {
  0% {
    --mancha0: 0px;
    animation-timing-function: cubic-bezier(0.4, 0.15, 0.55, 1);
  }
  70% {
    --mancha0: calc(var(--mancha-fin0) * 0.3);
    animation-timing-function: ease-in-out;
  }
  100% {
    --mancha0: var(--mancha-fin0);
  }
}

@keyframes mancha1 {
  0% {
    --mancha1: 0px;
    animation-timing-function: cubic-bezier(0.4, 0.15, 0.55, 1);
  }
  70% {
    --mancha1: calc(var(--mancha-fin1) * 0.3);
    animation-timing-function: ease-in-out;
  }
  100% {
    --mancha1: var(--mancha-fin1);
  }
}

@keyframes mancha2 {
  0% {
    --mancha2: 0px;
    animation-timing-function: cubic-bezier(0.4, 0.15, 0.55, 1);
  }
  70% {
    --mancha2: calc(var(--mancha-fin2) * 0.3);
    animation-timing-function: ease-in-out;
  }
  100% {
    --mancha2: var(--mancha-fin2);
  }
}

/* Con el movimiento reducido, sin manchas: aparece y se va fundiéndose */
@media (prefers-reduced-motion: reduce) {
  .acuarela-pintura {
    mask-image: none;
    opacity: 0;
    transition: opacity 1.2s ease;
  }
  .acuarela.pintada .acuarela-pintura {
    opacity: 1;
    transition: opacity 1.2s ease;
  }
}

/* Cada trozo es una ventana a su parte de la imagen: el tamaño y la posición
   del fondo los calcula js/coreografia.js. Empiezan medio hundidos y sin
   color, como las letras de Ferragamo. */
.trozo {
  position: absolute;
  background-image: var(--logo);
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(50%);
}

/* Se entra pulsando el fondo: el botón es la pantalla entera, por debajo
   de las carátulas y sin nada a la vista. Con el teclado, al llegar a él se
   enciende el borde de la pantalla. */
.entrar {
  position: fixed;
  inset: 0;
  z-index: 5;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* Deslizando hacia arriba también se entra: el navegador no se lleva el
     gesto (ni desplaza ni recarga) */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* Bajo la acuarela, en medio del hueco hasta la firma (la coloca el script),
   «Entrar» con una flecha que sube, como las de la cuadrícula: se entra
   pulsándolo, o deslizando hacia arriba. En una línea y con su borde, como
   un botón discreto: así cabe en el hueco, que en las pantallas bajas es
   poco, sin acercarse a la firma */
.entrar-flecha {
  position: absolute;
  top: 70%;
  left: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px 0 12px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  filter: drop-shadow(var(--sombra-texto));
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 0.2s ease,
    opacity 0.9s ease;
}

.entrar-flecha:hover {
  border-color: currentColor;
}

.entrar-flecha svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: asoma 1.6s ease-in-out infinite;
}

.entrar-texto {
  padding-left: 0.32em;
  font: 500 10px/1 var(--font-sans);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
}

.entrar-flecha:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--halo-foco);
  border-radius: 999px;
}

.entrar:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 4px var(--halo-foco);
}

/* ------------------------------------------- La cuadrícula de fondo --- */

/* Tras la portada, un mosaico con las carátulas enteras, en grises y tenues,
   como impresas en el papel, y desvanecidas hacia el centro para dejar
   limpios el logo, la acuarela y la firma. Es sólo fondo: quieto y sin
   atender al ratón, que pasa al botón de entrar, debajo.

   Es una sola imagen (scripts/mosaico.py), las carátulas en 8 columnas, que
   se repite como patrón: nada que cargar, colocar ni animar carátula a
   carátula. Gris claro y opaca, multiplicada con el papel en el mismo
   elemento (no con la página), encima del de la portada y en el mismo sitio.
   Algo más ancha que la pantalla y empezando un poco por encima, para que no
   se vea dónde empieza. El centro limpio lo deja el papel, encima */
.cuadricula {
  position: fixed;
  z-index: 6;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  background-color: #fff;
  background-image: url('../assets/portada/mosaico.webp'), url('../assets/papel/so-white.webp');
  background-size: 107.6vw auto, 400px auto;
  background-position: -3vw -4vh, 0 0;
  background-repeat: repeat;
  background-blend-mode: multiply;
  transition:
    opacity 0.9s ease,
    visibility 0s;
}


/* El mismo papel de la portada, en el mismo sitio, quieto y opaco en el
   centro, que se desvanece hacia los bordes: tapa las carátulas del centro */
.cuadricula::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  background: #fff url('../assets/papel/so-white.webp') 0 0 / 400px auto repeat;
  -webkit-mask-image: radial-gradient(ellipse 46% 52% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 52% at 50% 50%, #000 55%, transparent 100%);
  pointer-events: none;
}

/* En las pantallas estrechas o altas, menos columnas (el patrón, más grande), y el hueco limpio
   también alto, a la medida de la portada, que allí es alta y estrecha */
@media (max-width: 720px), (max-aspect-ratio: 4/3) {
  .cuadricula::after {
    -webkit-mask-image: radial-gradient(ellipse 50% 44% at 50% 50%, #000 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 44% at 50% 50%, #000 62%, transparent 100%);
  }
  .cuadricula {
    background-size: 144.3vw auto, 400px auto;
  }
}

@media (max-width: 540px) {
  .cuadricula {
    background-size: 218vw auto, 400px auto;
  }
}

/* Se va al entrar, y deja de atender al ratón; al volver de un libreto, ni
   se ve */
:is(.con-caratula, .de-vuelta) .cuadricula {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.9s ease,
    visibility 0s 0.9s;
}

.de-vuelta .cuadricula {
  transition: none;
}

/* ---------------------------------------------------------- Las cartas --- */

/* Un punto en el centro de la pantalla: cada carta se coloca desde ahí con
   su transform, en vw y vh, como las tarjetas de Ferragamo. */
.cartas {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 1px;
  height: 1px;
  /* Una sola perspectiva para todas las cartas, con el punto de fuga en el
     centro de la pantalla: así el carrusel parece una fila de discos. */
  perspective: 1400px;
  /* El punto no atiende al ratón (debajo está el fondo, que entra); las
     cartas, sí */
  pointer-events: none;
}

.carta {
  --op: 0;
  --grosor: calc(var(--alto-carta) * 0.03);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  will-change: transform;
  height: var(--alto-carta);
  transform-style: preserve-3d;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* La carta es un bloque, como una lámina montada sobre cartón pluma. El
   script mueve la .carta de sitio; el bloque, por dentro, flota solo, cada
   una a su ritmo, para que parezcan vivas. */
.carta-bloque {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: flotar var(--flota, 7s) ease-in-out var(--desfase, 0s) infinite alternate;
}

/* La tapa del libreto, con la carátula. */
.carta-cuerpo {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 2px 5px 5px 2px;
  background: #f4f2ee;
  opacity: var(--op);
  transform: translateZ(0.5px);
}

/* El lomo sobre la tapa: la banda por donde se dobla, como en la portada de
   la web del disco. */
.libreto-lomo {
  position: absolute;
  top: 0;
  left: 0;
  width: 7%;
  height: 100%;
  border-left: 2px solid rgba(0, 0, 0, 0.12);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0) 60%,
    rgba(0, 0, 0, 0.07) 100%
  );
  pointer-events: none;
}

/* Un brillo leve que recorre la tapa, del lomo hacia fuera. */
.libreto-brillo {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 100%);
  opacity: 0.08;
  pointer-events: none;
}

/* Las hojas, detrás de la tapa y un pelo más allá de su borde, para que se
   vea su canto. */
.libreto-pagina {
  position: absolute;
  top: 1.5%;
  bottom: 1.5%;
  left: 1.5%;
  right: -1.2%;
  border-radius: 0 4px 4px 0;
  background: #fbfaf6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
  opacity: var(--op);
  transform: translateZ(calc(var(--grosor) * -0.25 * var(--hoja)));
}

/* Los cantos, girados hacia atrás desde cada borde de la tapa, y el dorso al
   fondo, que es lo que echa la sombra. */
.canto,
.carta-dorso {
  position: absolute;
  opacity: var(--op);
}

.canto-arriba,
.canto-abajo {
  left: 0;
  width: 100%;
  height: var(--grosor);
}

.canto-lomo,
.canto-derecha {
  top: 0;
  width: var(--grosor);
  height: 100%;
}

.canto-arriba {
  top: 0;
  transform-origin: top;
  transform: rotateX(-90deg);
}

.canto-abajo {
  bottom: 0;
  transform-origin: bottom;
  transform: rotateX(90deg);
}

.canto-derecha {
  right: 0;
  transform-origin: right;
  transform: rotateY(-90deg);
}

/* El filo de las hojas apiladas: rayas finas de papel y sombra, a lo hondo. */
.canto-paginas {
  background: repeating-linear-gradient(
    90deg,
    #fbfaf6 0 1.4px,
    #ddd5c7 1.4px 2.2px
  );
}

.canto-arriba.canto-paginas,
.canto-abajo.canto-paginas {
  background: repeating-linear-gradient(
    180deg,
    #fbfaf6 0 1.4px,
    #ddd5c7 1.4px 2.2px
  );
}

.canto-abajo.canto-paginas {
  filter: brightness(0.86);
}

/* El lomo de fuera: el borde de la ilustración (lo pone el script),
   oscurecido y redondeado con un degradado, como la tapa doblada. */
.canto-lomo {
  left: 0;
  transform-origin: left;
  transform: rotateY(90deg);
  background-color: #6b645b;
  background-size: auto 100%;
  background-position: left center;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.18);
}

.carta-dorso {
  inset: 0;
  border-radius: 2px 5px 5px 2px;
  transform: translateZ(calc(-1 * var(--grosor)));
  background: #d8d1c4;
  box-shadow: var(--sombra-carta);
}

/* El brillo: una luz blanda que cae donde está el ratón, como en una lámina
   que se inclina bajo una lámpara. La posición la pone el script. */
.carta-cuerpo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--brillo-x, 50%) var(--brillo-y, 50%),
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0) 60%
  );
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.carta.brilla .carta-cuerpo::after {
  opacity: 1;
}

@keyframes flotar {
  from {
    transform: translate(0, 0) rotate(-0.8deg);
  }
  to {
    transform: translate(0.4vw, -0.7vh) rotate(0.8deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .carta-bloque {
    animation: none;
  }
}

.carta img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.carta:focus-visible {
  outline: none;
}

.carta:focus-visible .carta-cuerpo {
  box-shadow: var(--sombra-carta), 0 0 0 4px var(--halo-foco);
}

/* -------------------------------------------------------- La cuadrícula --- */

/* El índice en cuadrícula (js/rejilla.js): un plano de carátulas que ocupa
   la pantalla y se arrastra con el dedo o el ratón (sin mover la página ni
   hacer zoom). La del centro es la activa: en color, un poco más grande y
   con su ficha debajo; las demás, en grises y tenues */
.rejilla {
  position: fixed;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.rejilla.visible {
  opacity: 1;
}

.rejilla.moviendo {
  cursor: grabbing;
}

/* La viñeta: los bordes, más oscuros, sobre las carátulas y bajo el pie de
   la activa y sus flechas. Al abrir o cerrar el libro se queda, como las de
   alrededor, y del tamaño de la pantalla aunque la vista crezca (la escala,
   la pone js/rejilla.js) */
.rejilla::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--vineta);
  pointer-events: none;
  transform: scale(calc(1 / var(--vista, 1)));
}

/* En el móvil (también apaisado), la seleccionada, encima de la viñeta: en
   la pantalla pequeña llega casi a los bordes, y se oscurecía (su pie, aún
   más arriba). Sólo ella: el script pone a cada una, en línea, un z-index
   por lo que crece, y las de arriba y abajo, estiradas, llegan a lo suyo */
@media (max-width: 720px), (max-aspect-ratio: 4/3), (orientation: landscape) and (max-height: 500px) {
  .tesela.activa {
    z-index: 25 !important;
  }
}

/* Cada tesela, del tamaño de una carátula, colocada desde el centro (el
   script la mueve con transform) */
.tesela {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--w);
  height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  will-change: transform;
  cursor: pointer;
}

/* Cuánto color tiene la carátula suelta, de 0 a 1. Lo que se anima es esta
   variable registrada, no el filtro ni la opacidad: Safari pone en su capa
   lo que anima así, y con ella la seleccionada, que se veía borrosa mientras */
@property --en-color {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}


.tesela-caratula {
  display: block;
  width: 100%;
  height: 100%;
  /* Todas del mismo tamaño: llenan su caja aunque no todas tengan la misma
     proporción (se recorta un pelo del margen de papel) */
  object-fit: cover;
  border-radius: var(--esquinas-libro);
  filter: grayscale(calc(1 - var(--en-color)));
  opacity: calc(0.4 + 0.6 * var(--en-color));
  transition: --en-color 0.5s ease;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* La activa, en color; y las de fondo, quietas, con el ratón encima */
.tesela.activa .tesela-caratula,
.tesela:not(.activa):hover .tesela-caratula {
  --en-color: 1;
}

/* Cada tesela, compuesta como su portadilla del libro (el script la dibuja
   en SVG con las medidas del PDF): la página de su color, la carátula en su
   sitio y el título en texto. La tesela ya tiene la proporción de la página */
.tesela-portadilla,
.tesela-color {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--esquinas-libro);
  pointer-events: none;
}

/* En gris y tenue, fijo: se dibuja una sola vez (cambiarlo en cada fotograma
   la hacía redibujar entera, con su imagen y sus títulos fundidos) */
.tesela-portadilla {
  filter: grayscale(1);
  /* Lo bastante para que las de alrededor no se vean lavadas sobre fondos
     oscuros o de color */
  opacity: 0.55;
}

/* Encima, en las de cerca del centro, su copia en color, en su propia capa:
   el script sólo cambia su opacidad, del todo en el centro */
.tesela-color {
  opacity: 0;
  will-change: opacity;
}

/* Debajo, su sombra: sale al crecer, más cuanto más crece (como si se
   acercara); el script sólo cambia su opacidad */
.tesela-relieve {
  position: absolute;
  inset: 0;
  border-radius: var(--esquinas-libro);
  box-shadow: 0 18px 30px -10px rgba(0, 0, 0, 0.45);
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
}


/* Al abrir, la tapa es la de color: la gris, debajo, no se ve */
.tesela.abriendo .tesela-portadilla {
  visibility: hidden;
}

.tesela:not(.activa):hover .tesela-portadilla {
  filter: grayscale(0);
  opacity: 1;
}

:is(.tesela-portadilla, .tesela-color) svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Las letras del título, en EB Garamond de peso medio, como en el libro */
:is(.tesela-portadilla, .tesela-color) text {
  font-family: var(--font-serif);
  font-weight: 500;
}

/* Con la portadilla puesta (cuando su imagen ha cargado), la carátula suelta
   sobra; antes, la portadilla no se ve: saldría la página en blanco */
.tesela.con-portadilla .tesela-caratula {
  visibility: hidden;
}

.tesela:not(.con-portadilla) .tesela-portadilla {
  visibility: hidden;
}

/* Las que se preparan al cambiar la vista: escondidas, debajo de las que se
   ven, hasta que tienen sus imágenes (lo pone js/rejilla.js) */
.tesela.por-llegar {
  visibility: hidden;
}

/* Al abrir una, como un libreto: la portadilla es la tapa,
   con bisagra en el lomo (su borde izquierdo) y dorso de cartón, y gira; debajo
   queda la primera página, papel con el título. Mientras, nada de lo de
   alrededor */
.tesela.abriendo {
  perspective: calc(var(--h) * 3.5);
  /* Por encima de las de alrededor (que se quedan: las de arriba y abajo,
     estiradas, llegan a su z-index, que el script pone en línea) y de la
     viñeta, hasta llenar la pantalla */
  z-index: 25 !important;
}

/* La cara de la tapa: la portadilla en color, que gira en su sitio sobre el
   lomo, como la tapa (que sólo lleva el dorso) */
.tesela-cara {
  transform-origin: left center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Al girar, maquetada a lo más que se amplía mientras se ve de frente
   (--aumento-cara) y reducida por el giro (lo pone js/rejilla.js): si no, el
   navegador dibujaba en pequeño la capa que gira en 3D y la ampliaba,
   borrosa. Y no más: a lo que llena la pantalla, como la primera página, su
   capa era enorme y se pintaba a trozos. El giro, sobre el lomo: rotateY no
   depende del alto del origen */
.tesela.abriendo .tesela-cara {
  inset: auto;
  top: 0;
  left: 0;
  width: calc(100% * var(--aumento-cara, 1));
  height: calc(100% * var(--aumento-cara, 1));
  transform-origin: 0 0;
}

.tesela-tapa {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
}

.tesela-tapa > * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.tesela-tapa-dorso {
  position: absolute;
  inset: 0;
  /* Se ve girado: el lomo, a su derecha */
  border-radius: 5px 0 0 5px;
  background: #f1ebdf;
  transform: rotateY(180deg);
}

/* Maquetada ya al tamaño al que llega al llenar la pantalla (--aumento, lo
   pone js/rejilla.js), en su capa, y reducida al empezar: Safari amplía lo
   que va dentro de algo en 3D (la tapa) ya dibujado en pequeño, y la página
   se veía borrosa */
.tesela-primera {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% * var(--aumento, 1));
  height: calc(100% * var(--aumento, 1));
  transform: scale(calc(1 / var(--aumento, 1)));
  transform-origin: 0 0;
  will-change: transform;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0 calc(5px * var(--aumento, 1)) calc(5px * var(--aumento, 1)) 0;
  /* Un pelo más pequeña que la tapa (2 px de la tesela) por el canto, arriba
     y abajo, como en un libro: con la tapa casi cerrada, asomaba por el canto
     como una línea clara. Al llenar la pantalla, el recorte queda fuera */
  clip-path: inset(calc(2px * var(--aumento, 1)) calc(2px * var(--aumento, 1)) calc(2px * var(--aumento, 1)) 0 round 0 calc(5px * var(--aumento, 1)) calc(5px * var(--aumento, 1)) 0);
  background: var(--papel-de-libro);
  color: #2f3742;
  font-family: var(--font-serif);
  text-align: center;
}

.tesela-primera p {
  margin: 0;
}

.tesela-primera-titulo {
  margin-top: 36% !important;
  padding: 0 8%;
  font-size: calc(var(--w) * var(--aumento, 1) * 0.08);
  line-height: 1.05;
}

.tesela-primera-poeta {
  margin-top: 4% !important;
  font-size: calc(var(--w) * var(--aumento, 1) * 0.032);
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.tesela-primera-disco {
  margin-top: auto !important;
  margin-bottom: 9% !important;
  font-size: calc(var(--w) * var(--aumento, 1) * 0.03);
  font-style: italic;
  opacity: 0.55;
}

/* Entre el índice y el libreto (y entre libretos), el navegador funde una
   página con la otra en vez de enseñar un instante una vacía, en blanco: el
   paso va sobre el papel de la primera página, que tienen las dos */
@view-transition {
  navigation: auto;
}

/* Sin mezclar las dos imágenes: se ve la que se va, entera, hasta que acaba
   el paso (así tampoco asoma la ventana vacía), y luego la nueva tal cual.
   El navegador las suma (plus-lighter): con las dos a la vez, el papel salía
   blanco. Lo pinta la página que llega: va también en css/paneles.css */
::view-transition-old(root) {
  animation: none;
}

::view-transition-new(root) {
  animation: none;
  opacity: 0;
}

/* Y si no sabe fundirlas, el fondo del documento, mientras se viene del
   papel, ya es papel */
html.con-papel {
  background-color: #f3eee3;
}

/* Viniendo del libreto, la entrada arranca cubierta de su papel (la primera
   página del libro, ver css/primera.css), hasta que el índice monta la página
   abierta (que es esa misma) y la cierra */

/* Al entrar y al salir, fotograma a fotograma: sin el fundido con que aparece */
.rejilla.entrando {
  transition: none;
}

.rejilla.entrando .rejilla-pie {
  opacity: 0;
  pointer-events: none;
}

/* Quieta la cuadrícula, y al abrir el libro, sin capas propias: con ellas,
   el navegador las amplía ya dibujadas en pequeño (en Safari, todas
   borrosas; en Windows, la seleccionada). Al moverse, la recuperan */
:is(.rejilla.quieta, .rejilla.entrando) :is(.tesela, .tesela-color, .tesela-relieve) {
  will-change: auto;
}

/* Sobre la activa, de su tamaño quieta (el script la lleva con ella): su
   título dentro, en una banda translúcida, y fuera, las cuatro flechas.
   Mientras se mueve, no se ve: se va de golpe y se funde al volver (la
   seleccionada cambia en cuanto se mueve, y el pie, aún visible, saltaría a
   la nueva, pequeña y a medio camino, antes de irse) */
.rejilla-pie {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 30;
  width: var(--W);
  height: var(--H);
  margin: calc(var(--H) / -2) 0 0 calc(var(--W) / -2);
  /* La muesca sale como una solapa, en 3D */
  perspective: 600px;
  /* Lo de dentro sabe lo ancha que es la carátula (la muesca se simplifica
     en las muy estrechas) */
  container-type: inline-size;
  cursor: pointer;
  transition: opacity 0.35s ease;
}

.rejilla:not(.quieta) .rejilla-pie {
  opacity: 0;
  pointer-events: none;
  transition-duration: 0s;
}

/* La muesca, hasta que la seleccionada se asienta del todo (con el rebote
   de la respiración), plegada hacia atrás sobre el borde de arriba, de canto:
   no se ve. Al asentarse se despliega como una solapa; al moverse, se
   recoge de golpe */
.rejilla:not(.asentada) .rejilla-pie .rotulo {
  rotate: x -95deg;
  opacity: 0;
  transition-duration: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .rejilla:not(.asentada) .rejilla-pie .rotulo {
    rotate: x 0deg;
    opacity: 1;
  }
}

/* En el índice, la muesca cuelga del borde de arriba de la seleccionada,
   en el centro, y va con ella (el script la pone en su pie): con su forma
   (los hombros arriba, la curva abajo) y, desplegada, la lista por
   debajo. De su tamaño aunque la cuadrícula se aleje, como las
   flechas, y sin la línea larga, que cruzaría la cuadrícula. Del color de la
   pestaña de la canción de su libreto, con su tinta (--escucha-fondo y
   --escucha-tinta los pone el script; sin ellos, oscura con letra blanca):
   en los dos temas igual, algo translúcida y sin borde */
.rejilla-pie .rotulo {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  translate: -50% 0;
  /* Nunca más ancha que la carátula, ni plegada ni desplegada, hombros
     incluidos (con el zoom a medias, su escala deshace la del pie) */
  box-sizing: border-box;
  max-width: calc(var(--W) / var(--flecha-escala, 1) - 2 * var(--hombro));
  flex-direction: column;
  border-radius: 0 0 var(--radio-muesca) var(--radio-muesca);
  scale: var(--flecha-escala, 1);
  transform-origin: 50% 0;
  /* Desplegada, como una solapa (plegada, ver .asentada) */
  rotate: x 0deg;
  --linea: calc(var(--hombro) - 1px);
  --rotulo-abierto: color-mix(in srgb, var(--escucha-fondo, rgb(20, 22, 26)) 82%, transparent);
  --rotulo-encima: color-mix(in srgb, var(--escucha-fondo, rgb(44, 47, 54)) 92%, transparent);
  --muesca-borde: transparent;
  --filtro-logo: brightness(0) invert(1);
  --sombra-texto: 0 1px 2px rgba(0, 0, 0, 0.5);
  color: var(--escucha-tinta, #fff);
  transition:
    opacity 0.2s ease,
    rotate 0.55s cubic-bezier(0.3, 1.5, 0.5, 1);
}

/* El relleno pasa medio píxel del filo de la carátula: si acaba justo en
   él, como no cae en un píxel entero, asoma por encima el papel, claro (y
   uno entero se ve, sobre la carátula) */
.rejilla-pie .rotulo::before {
  top: -0.5px;
}

/* Metida en la carátula: una sombra por dentro, sólo en su borde curvo, el
   de abajo (en los lados, al llegar a los hombros, haría un escalón). En la capa del borde, que
   aquí no hay: la caja del cuerpo, sin hombros */
.rejilla-pie .rotulo::after {
  left: 0;
  right: 0;
  mask: none;
  background: none;
  border-radius: 0 0 var(--radio-muesca) var(--radio-muesca);
  box-shadow: inset 0 -4px 5px -2px rgba(0, 0, 0, 0.45);
}

/* En una carátula estrecha, lo de dentro se encoge para caber: los logos,
   por la derecha, y el enlace de abajo, partido donde haga falta */
.rejilla-pie .servicio-logo {
  min-width: 0;
  object-fit: contain;
  object-position: left;
}

.rejilla-pie .servicios-mas {
  overflow-wrap: anywhere;
}

/* En una carátula muy estrecha (el móvil apaisado), lo justo: «Escuchar»
   sin flechas y, desplegada, los logos en una columna y sueltos (el borde de
   botón no cabe), sin el enlace de abajo */
@container (max-width: 200px) {
  .rejilla-pie .escuchar {
    padding-inline: 6px;
    gap: 5px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  .rejilla-pie .servicios-rotulo {
    padding-inline: 8px;
  }
  .rejilla-pie .servicios-lista {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .rejilla-pie .servicio {
    padding: 9px 0;
    border: 0;
  }
  .rejilla-pie .escuchar-flecha,
  .rejilla-pie .escuchar-play,
  .rejilla-pie .servicios-mas {
    display: none;
  }
}

/* Dice «Escuchar»: el título ya lo lleva la carátula (se lee con el lector
   de pantalla). La flecha, hacia abajo, y baja (la de siempre); desplegada,
   hacia arriba */
.rejilla-pie .escuchar-titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rejilla-pie .escuchar-verbo {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  opacity: 1;
}


/* Con la cuadrícula alejada, la muesca no está: se va en el acto, sin
   fundirse (mientras el zoom se mueve, además, el pie entero se va, como al
   arrastrar) */
.rejilla.lejos .rotulo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

/* Las flechas, fuera de la activa, una por lado: cada una, girada hacia su
   lado, se mueve un poco hacia él (se puede ir por ahí) */
.rejilla-flecha {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto);
  cursor: pointer;
  filter: drop-shadow(var(--sombra-texto));
  -webkit-tap-highlight-color: transparent;
  /* Alejada la cuadrícula, el pie se encoge con el zoom: las flechas lo
     deshacen (--flecha-escala lo pone el script) y siguen de su tamaño.
     Crecen desde su centro, así que se apartan de la carátula lo que crecen;
     y el aire con ella, que también se encoge con el pie, lo deshacen igual */
  --mitad: 22px;
  --aire: 4px;
  --hueco-flecha: calc((var(--aire) + var(--mitad)) * var(--flecha-escala, 1) - var(--mitad));
  scale: var(--flecha-escala, 1);
}

.rejilla-flecha svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: asoma 1.6s ease-in-out infinite;
}

.rejilla-flecha:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--halo-foco);
  border-radius: 50%;
}

.rejilla-flecha--arriba {
  bottom: 100%;
  left: 50%;
  margin: 0 0 var(--hueco-flecha) calc(-1 * var(--mitad));
}

.rejilla-flecha--abajo {
  top: 100%;
  left: 50%;
  margin: var(--hueco-flecha) 0 0 calc(-1 * var(--mitad));
  rotate: 180deg;
}

.rejilla-flecha--izquierda {
  top: 50%;
  right: 100%;
  margin: calc(-1 * var(--mitad)) var(--hueco-flecha) 0 0;
  rotate: -90deg;
}

.rejilla-flecha--derecha {
  top: 50%;
  left: 100%;
  margin: calc(-1 * var(--mitad)) 0 0 var(--hueco-flecha);
  rotate: 90deg;
}

/* El título de la activa: no se ve (ya lo lleva su portadilla), pero se lee */
.rejilla-titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Justo encima de la activa, a la izquierda, qué es y su número («Canción
   3/11»), con la letra de la muesca: pequeña, espaciada y en mayúsculas,
   con las cifras parejas */
.rejilla-numero {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin: 0 0 7px 2px;
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  text-shadow: var(--sombra-texto);
  white-space: nowrap;
  opacity: 0.75;
  pointer-events: none;
}

.rejilla-numero-dicho {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Alejada, no está: el hueco entre filas no le deja sitio */
.rejilla.lejos .rejilla-numero {
  opacity: 0;
}

/* En la cuadrícula, la ficha va en la activa: ni la de la esquina ni las
   flechas del mando (lleva las suyas) */
.en-rejilla :is(.ficha, .mando) {
  display: none;
}

/* ------------------------------------------------------------ La ficha --- */

/* Arriba a la izquierda, como la de las películas en la galería de A24: el
   título grande y debajo, entre rayas finas, la pista, el poeta y la música.
   Sale al entrar, con el mando. */
.ficha {
  position: fixed;
  top: max(24px, env(safe-area-inset-top));
  left: max(24px, env(safe-area-inset-left));
  z-index: 40;
  width: clamp(220px, max(24vw, 44vh), 380px); /* lo que pide el título, que crece igual */
  pointer-events: none; /* se arrastra la fila también por debajo */
  opacity: 0;
  text-shadow: var(--sombra-texto);
}

/* El asa sólo sirve en pantallas pequeñas, donde la ficha se pliega. */
.ficha-asa {
  display: none;
}

.ficha-titulo {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: clamp(23px, max(2.4vw, 4.4vh), 38px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  /* Los de las canciones caben en una línea (el más largo, «Cuando Nada
     Concluya», justo); los de los textos, más largos, se parten en dos
     líneas parejas sin salirse de la ficha */
  text-wrap: balance;
}

.ficha-datos {
  margin: 0;
}

.ficha-datos div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0 5px;
  border-top: 1px solid var(--raya-ficha);
}

.ficha-datos dt {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.85;
}

.ficha-datos dd {
  margin: 0;
  font-size: 14px;
  text-align: right;
}

/* En el móvil no cabe junto al logo: baja encima de las flechas. */
/* En pantallas pequeñas o no apaisadas (hasta 4:3): el logo arriba, la ficha al pie y el libreto en
   medio (las flechas, a los lados: más abajo, con el mando). */
@media (max-width: 720px), (max-aspect-ratio: 4/3) {
  /* Al pie van los logos de quienes apoyan el disco: su alto de base y su
     aire con el borde, que la ficha tiene en cuenta para ir encima */
  :root {
    --alto-apoyo-movil: 20px;
    --alto-apoyo-dentro: 20px;
    --suelo-movil: max(16px, env(safe-area-inset-bottom));
  }

  /* El botón de ver todas, abajo en el centro, a la altura de los logos
     (los que apoyan, en dos filas, le dejan sitio) */
  .vista {
    bottom: var(--suelo-movil);
  }

  /* Plegada, sólo el asa y el título; desplegada, sale de abajo con los
     datos sobre un velo translúcido, por encima del libreto si hace falta.
     Va encima de los logos: su suelo, lo que mide el más alto y un aire */
  .ficha {
    top: auto;
    bottom: calc(var(--suelo-movil) + var(--alto-apoyo-movil) * 1.9 + 6px);
    left: 8px;
    right: 8px;
    width: auto;
    max-width: 520px;
    margin-inline: auto;
    padding: 4px 12px 10px;
    border-radius: 16px;
    pointer-events: auto;
    transition: background-color 0.35s ease;
  }

  .ficha.desplegada {
    background: var(--velo-ficha);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
  }

  .ficha-cabeza {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .ficha-titulo {
    margin-bottom: 0;
    font-size: 27px;
    text-align: center;
  }

  .ficha-asa {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--texto);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .ficha-flecha {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(var(--sombra-texto));
    animation: asoma 1.6s ease-in-out infinite;
    transition: rotate 0.35s ease;
  }

  .ficha.desplegada .ficha-flecha {
    rotate: 180deg;
    animation: none;
  }

  .ficha-datos {
    max-height: 16em;
    margin-top: 10px;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
  }

  .ficha:not(.desplegada) .ficha-datos {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
  }
}

/* La flecha del asa sube y baja un poco: se puede tocar. */
@keyframes asoma {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ficha-flecha,
  .escuchar-flecha,
  .entrar-flecha svg,
  .sumario {
    animation: none;
  }
}

/* ---------------------------------------------------- Los que apoyan --- */

/* Los logos de quienes apoyan el disco, en una sola tinta, la del texto:
   cada uno es una máscara (su dibujo en negro sobre transparente) que se
   rellena con ese color, así que valen para el claro y el oscuro y no
   compiten con la acuarela ni con las carátulas. Todos sobre la misma
   línea: la Fundación, alta y estrecha, marca el alto, y los otros dos
   crecen hasta cerca de ella para leerse bien. */
.apoyos {
  /* El alto de base (--alto-apoyo) lo pone quien los aloja: .portada o
     .apoyos--dentro */
  display: flex;
  align-items: flex-end;
  gap: calc(var(--alto-apoyo) * 0.7);
  pointer-events: none;
}

.apoyo {
  display: block;
  height: var(--alto-apoyo);
  background-color: var(--texto);
  -webkit-mask: var(--mascara) center / contain no-repeat;
  mask: var(--mascara) center / contain no-repeat;
  filter: drop-shadow(var(--sombra-texto));
}

.apoyo--diputacion {
  --mascara: url('../assets/apoyos/diputacion.webp');
  aspect-ratio: 629 / 200;
  height: calc(var(--alto-apoyo) * 1.4);
}

.apoyo--cultura-y-progreso {
  --mascara: url('../assets/apoyos/cultura-y-progreso.webp');
  aspect-ratio: 336 / 260;
  height: calc(var(--alto-apoyo) * 1.7);
}

.apoyo--fundacion-vicente-nunez {
  --mascara: url('../assets/apoyos/fundacion-vicente-nunez.webp');
  aspect-ratio: 194 / 360;
  height: calc(var(--alto-apoyo) * 1.9);
}

/* En la portada, en el margen de abajo, bajo la firma (su alto y su sitio
   los pone .portada) */
.apoyos--portada {
  position: absolute;
  left: 50%;
  bottom: var(--suelo);
  translate: -50% 0;
  transition: opacity 0.9s ease;
}

.con-caratula .apoyos--portada {
  opacity: 0;
}

/* Dentro, abajo a la izquierda, a la altura de las flechas y del logo: en
   la esquina que queda libre (en el móvil, al pie y centrados, bajo la
   ficha). Aparece al entrar, como el logo */
.apoyos--dentro {
  --alto-apoyo: var(--alto-apoyo-dentro);
  /* Siempre en dos filas: arriba la Diputación; debajo, juntos, Cultura y
     Progreso y la Fundación */
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  justify-items: start;
  align-items: end;
  row-gap: 6px;
  position: fixed;
  z-index: 30;
  left: max(24px, env(safe-area-inset-left));
  bottom: max(24px, env(safe-area-inset-bottom));
  opacity: 0;
  transition: opacity 0.9s ease;
}

.apoyos--dentro .apoyo--diputacion {
  grid-column: 1 / -1;
}

.con-caratula .apoyos--dentro {
  opacity: 1;
  transition-delay: 0.5s;
}

/* ------------------------------------------------------------ El mando --- */

/* Debajo de la carátula del centro, las dos flechas. Sale al entrar; hasta
   entonces no se ve ni se puede tocar. */
.mando {
  position: fixed;
  bottom: max(6vh, calc(env(safe-area-inset-bottom) + 20px));
  left: 50%;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 36px);
  translate: -50% 0;
  opacity: 0;
  text-shadow: var(--sombra-texto);
}

.flecha {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--flecha-borde);
  border-radius: 50%;
  background: var(--flecha-fondo);
  color: var(--texto);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.flecha svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) and (pointer: fine) {
  .flecha:hover {
    background: var(--flecha-fondo-encima);
    border-color: var(--texto);
  }
  .rotulo:not(.desplegado):hover {
    --muesca: var(--rotulo-encima);
    --muesca-borde: var(--texto);
  }
  .sumario:not(.desplegado):hover {
    --muesca: rgba(44, 47, 54, 0.9);
  }
  /* En el índice, sin borde también con el ratón encima */
  .rejilla-pie .rotulo:not(.desplegado):hover {
    --muesca-borde: transparent;
  }
}

.flecha:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--halo-foco);
}

/* En pantallas pequeñas o no apaisadas, las flechas se separan a los lados, a la altura del
   libreto: el centro del hueco lo pone entrada.js en --centro-del-hueco. */
@media (max-width: 720px), (max-aspect-ratio: 4/3) {
  .mando {
    top: var(--centro-del-hueco, 50%);
    bottom: auto;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    justify-content: space-between;
    translate: 0 -50%;
    pointer-events: none; /* entre flecha y flecha se arrastra la fila */
  }

  .flecha {
    pointer-events: auto;
  }

  /* Los que apoyan, al pie y centrados, bajo la ficha plegada */
  .apoyos--dentro {
    left: 50%;
    bottom: var(--suelo-movil);
    translate: -50% 0;
  }
  /* En la cuadrícula, a la izquierda: a la derecha va el logo */
  /* En dos filas (arriba la Diputación; debajo, juntos, Cultura y Progreso
     y la Fundación): así dejan sitio en el centro al botón de la vista */
  .en-rejilla .apoyos--dentro {
    left: max(16px, env(safe-area-inset-left));
    translate: none;
  }
}

/* -------------------------------------------- Entrar en el libro --- */

/* Mientras se abre el libro y se entra en él, se apartan la ficha, las
   flechas, la muesca, el botón Portada y el interruptor (!important, porque
   su opacidad la dejan las animaciones en el propio elemento). */
.entrando .ficha,
.entrando .mando,
.entrando .rotulo,
.entrando .volver,
.entrando .marca,
.entrando .apoyos--dentro,
.entrando .tema {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* La muesca «Índice» y el botón de la vista, en el acto: van sobre la
   página que se abre, y se veían */
.entrando :is(.sumario, .vista) {
  opacity: 0 !important;
  pointer-events: none;
  transition: none !important;
}

/* Viniendo de un libreto, el logo y los que apoyan, escondidos del todo
   desde antes de pintar (lo pone el <head> de index.html) hasta que el libro
   se ha cerrado y han salido la muesca y el pie (lo quita js/rejilla.js);
   luego se funden */
.tras-cierre :is(.marca, .apoyos--dentro, .sumario, .vista) {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}

/* Viniendo del libreto, bajo su papel, ya apagados y sin fundido: al quitarse
   el papel empieza el cierre del libro, y si estuvieran a la vista se
   verían desvanecerse encima de él. Aparecen al acabar el cierre */
.con-papel :is(.ficha, .mando, .rotulo, .volver, .marca, .apoyos--dentro, .tema, .sumario, .vista) {
  opacity: 0 !important;
  transition: none !important;
}

/* En el móvil en apaisado, dentro, el índice tiene poco alto: la ficha,
   sólo con el título (los datos se montaban sobre los libretos), y las
   flechas, el logo y los que apoyan, más pequeños y más abajo, que le dejan
   más hueco */
@media (orientation: landscape) and (max-height: 500px) {
  .ficha-datos {
    display: none;
  }
  .mando {
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .flecha {
    width: 34px;
    height: 34px;
  }
  .flecha svg {
    width: 16px;
    height: 16px;
  }
  :root {
    --alto-apoyo-dentro: 21px;
  }
  .marca {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .rejilla-flecha {
    width: 36px;
    height: 36px;
    --mitad: 18px;
    --aire: 2px;
  }
  .apoyos--dentro {
    left: max(16px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}