/* KASH · Presskit web · PORTADA y MÚSICA (rediseño del 13-nov, noche)
   Va DESPUÉS de presskit.css. «El show» sigue entero en presskit.css; aquí solo viven la cabecera, la portada y música.
   Referencia medida: analisis/REF3_ANALISIS.md. Idea: póster-infografía. Figura al centro con anillo en órbita,
   módulos de dato pegados alrededor, materia de cartón/papel/cinta sobre negro cálido y UN acento (dorado) en
   todos los rótulos y años. Índice: 1 tokens · 2 materia · 3 cabecera · 4 portada · 5 módulos · 6 música
   · 7 reproductor · 8 discografía · 9 escucha · 10 movimiento · 11 escritorio */

/* ---------- 1. Fuente display y tokens propios de estas dos secciones ---------- */
/* Unbounded (OFL, fonts/OFL-Unbounded.txt): extendida pesada para titulares, rótulos y el anillo */
@font-face { font-family: "Unbounded"; src: url("../fonts/Unbounded-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("../fonts/Unbounded-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
:root {
  --fondo-calido: #171614;                 /* negro cálido medido en ref3 */
  --carton-claro: #B5B0A6;                 /* cartón gris con tinta encima (contraste tinta > 8:1) */
  --carton-medio: #A29D93;
  --papel-claro: #E6E1D7;
  --tinta-media: #23211E;                  /* texto secundario sobre cartón: > 4,5:1 incluso sobre sus manchas oscuras */
  --oro-trazo: rgba(201, 162, 75, .85);
  --linea-aro: #F3EEE3;                    /* trazo fino del anillo */
  --sombra-aro: rgba(16, 14, 12, .9);      /* filete oscuro bajo el trazo: se lee sobre la foto y sobre el titular */
  /* paradas del halo (solo las usa .portada__halo, en orden a → b → c → e → d) */
  --halo-a: rgba(232, 160, 66, .92);
  --halo-b: rgba(214, 132, 48, .7);
  --halo-c: rgba(176, 96, 36, .42);
  --halo-e: rgba(120, 62, 26, .16);
  --halo-d: rgba(90, 46, 20, 0);
  /* grade cálido leve para recorte y fotos */
  --grade-sat: .82;
  --grade-sepia: .14;
  --contacto: rgba(0, 0, 0, .62);
  --contacto-suave: rgba(0, 0, 0, .35);
  --velo-escena: rgba(23, 22, 20, .55);
  --carton-contraste: 1.6;                 /* manchas del cartón escaneado más marcadas (sin velo encima) */
  --carton-luz: 1.24;
  --contacto-duro: rgba(0, 0, 0, .78);      /* sombra de contacto corta y dura bajo tarjetas y fotos */
  --contacto-cinta: rgba(0, 0, 0, .32);
  --sombra-foto: 0 2px 1px var(--contacto-duro), 2px 4px 2px -1px var(--contacto);   /* copia apoyada: corta y dura */
  --fundido: rgba(23, 22, 20, 0);
  --f-display: "Unbounded", "Archivo Expanded", "Arial Black", sans-serif;   /* titulares y rótulos */
}

/* ---------- 2. Materia: cartón, cintas, rótulos en acento ---------- */
/* cartón: textura real, borde cortado a mano (dos cortes distintos), sombra corta de contacto (nada flota) */
.carton {
  position: relative; isolation: isolate; color: var(--tinta);
  filter: drop-shadow(0 2px 1px var(--contacto-duro));
}
/* sombra de contacto real (imagen), corta y dura, pegada al borde inferior: la tarjeta queda apoyada, no flotando */
.carton::after {
  content: ""; position: absolute; z-index: -2; left: 2%; right: 2%; bottom: -7px; height: 14px;
  background: url("../img/sombra_contacto.webp") center / 100% 100% no-repeat;
}
/* el cartón escaneado sin velo encima: el filtro sube el contraste de sus manchas y lo entibia
   (las manchas más oscuras quedan ≈ #959089: la tinta encima sigue por encima de 5,5:1) */
.carton::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../img/textura_carton.webp") center / 520px 520px;
  filter: contrast(var(--carton-contraste)) brightness(var(--carton-luz)) sepia(.16);
  clip-path: polygon(.6% 2.2%, 11% .5%, 27% 1.9%, 45% .4%, 63% 1.7%, 81% .3%, 99.4% 1.5%, 98.9% 21%, 99.7% 44%, 98.8% 67%, 99.6% 98.1%, 84% 99.6%, 66% 98.3%, 47% 99.7%, 29% 98.4%, 12% 99.5%, .4% 98.6%, 1.1% 74%, .2% 49%, .9% 24%);
}
.carton:nth-of-type(even)::before {
  background-image: url("../img/textura_carton.webp");
  background-position: 37% 61%; background-size: 760px 760px;
  clip-path: polygon(1% .8%, 19% 2.1%, 38% .6%, 57% 2%, 76% .5%, 98.8% 1.9%, 99.6% 29%, 98.7% 55%, 99.5% 80%, 98.9% 99.2%, 77% 98.1%, 55% 99.6%, 34% 98.2%, 14% 99.4%, .7% 97.9%, .1% 70%, 1% 42%, .3% 17%);
}
/* cintas reales (escaneadas): tres recortes distintos, cada uno con su proporción, su tamaño y su giro;
   una sombra mínima las despega del papel (la cinta tiene canto, no es una calcomanía plana) */
.cinta--3, .cinta--4, .cinta--5 { filter: drop-shadow(0 1px 1px var(--contacto-cinta)); }
.cinta--3 { top: -20px; left: 14%; width: 118px; aspect-ratio: 300 / 143; rotate: -8deg; background-image: url("../img/cinta_3.webp"); }
.cinta--4 { top: -12px; right: 10%; width: 82px; aspect-ratio: 300 / 103; rotate: 11deg; background-image: url("../img/cinta_4.webp"); }
.cinta--5 { top: -17px; left: 40%; width: 136px; aspect-ratio: 300 / 128; rotate: -3deg; background-image: url("../img/cinta_5.webp"); }

/* rótulo de sección: el ÚNICO uso del acento. Display pesada, mayúsculas, con un trazo de marcador dorado debajo */
.rotulo-a {
  display: inline-block; padding-bottom: 12px; color: var(--oro);
  font: 900 clamp(15px, 4.2vw, 20px)/1.1 var(--f-display); letter-spacing: .01em; text-wrap: balance;
  background: url("../img/marcador_1.webp") -6px 100% / 104px 16px no-repeat;
}
.mod:nth-of-type(even) .rotulo-a, .sencillo .rotulo-a { background-image: url("../img/marcador_2.webp"); }

/* papel rasgado real (escaneado) en la portada y en música; el pie de página y «El show» siguen con el anterior */
.portada__banda::before, .musica .rasgado--abajo { background-image: url("../img/rasgado_abajo_2.webp"); }
.portada__banda::after, .musica .rasgado--arriba { background-image: url("../img/rasgado_arriba_2.webp"); }
.portada__banda, .musica__papel::before, .escucha__papel { background-image: url("../img/textura_papel.webp"); background-size: 520px 520px; }

/* polvo: motas claras sobre el negro cálido, en toda la portada y la música (bajo el contenido) */
.portada, .musica { background-image: url("../img/polvo.webp"); background-size: 640px 640px; }
/* capa de materia ENCIMA de todo (como una copia escaneada): dos pasadas de polvo a escalas distintas (las motas se
   suman y se ven) y grano general. Sin eventos; con movimiento reducido no cambia nada (no se anima). */
.portada::after, .musica::after {
  content: ""; position: absolute; inset: 0; z-index: 25; pointer-events: none;
  background:
    url("../img/polvo.webp") 0 0 / 560px 560px,
    url("../img/polvo.webp") 230px 310px / 820px 820px,
    url("../img/polvo.webp") 470px 90px / 380px 380px,
    url("../img/grano.webp") 0 0 / 200px 200px;
  opacity: .75;
}

/* ---------- 3. Cabecera (sobre la portada) ---------- */
.cabecera {
  position: absolute; z-index: 30; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) var(--margen) 0;
}
.cabecera__logo { display: block; width: 56px; flex: none; }
.cabecera__logo img { width: 100%; }
.cabecera__sello { font: 500 12px/1.25 var(--f-mono); letter-spacing: .1em; max-width: 8ch; color: var(--blanco); }
.cabecera__nav { margin-left: auto; display: flex; gap: 2px; }
.cabecera__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font: 500 13px/1 var(--f-mono); letter-spacing: .1em; text-decoration: none; color: var(--blanco);
  background: linear-gradient(var(--oro), var(--oro)) 10px calc(50% + 12px) / calc(100% - 20px) 2px no-repeat;
  transition: color .2s var(--entra);
}
.cabecera__nav a:hover { color: var(--oro-claro); }

/* ---------- 4. Portada: escena ---------- */
.portada {
  /* geometría: todo cuelga de la cabeza del recorte (img/kash_recorte.webp, 1100×1225).
     Si cambia el encuadre del recorte se ajustan --cab-x, --cab-y, --pelo-y y --rec-razon. */
  /* móvil: la escena cuelga de ARRIBA (bajo la cabecera), sin vacío; el titular cabe entero (KASH mide 3,6 em);
     el pelo monta el 38 % inferior del titular; la escena termina donde termina el recorte */
  --rec: min(104vw, 560px);
  --rec-razon: 1.1136;
  --cab-x: .45;
  --cab-y: .275;
  --pelo-y: .07;
  --rec-alto: calc(var(--rec) * var(--rec-razon));
  --kash: 24.5vw;
  --kash-top: 92px;
  --fig-top: calc(var(--kash-top) + var(--kash) * .74 * .62 - var(--rec-alto) * var(--pelo-y));
  --escena-alto: calc(var(--fig-top) + var(--rec-alto));
  --cab-top: calc(var(--fig-top) + var(--rec-alto) * var(--cab-y));
  /* anillo: radio interior = 0,372 × --aro ≈ 0,30 × recorte; la cabeza mide 0,23 × recorte de media altura: las letras
     pasan POR FUERA de la cara con aire, y el tramo de abajo cae bajo el mentón, sobre el pecho */
  --aro: calc(var(--rec) * .88);
  position: relative; isolation: isolate; overflow: clip;
  display: grid; grid-template-columns: var(--margen) repeat(6, minmax(0, 1fr)) var(--margen); align-items: start;
  padding-bottom: 72px; background: var(--fondo-calido);
}
.portada__fondo { position: absolute; z-index: 0; inset: 0 0 auto; height: var(--escena-alto); }
/* el video del show es textura: casi sin color, oscuro, y se funde al negro cálido por abajo */
.portada__video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: grayscale(.7) contrast(1.15) brightness(.34); }
.portada__fondo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--velo-escena) 0%, var(--fundido) 30%, var(--fundido) 62%, var(--fondo-calido) 100%);
}

.portada__escena { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 1; isolation: isolate; height: var(--escena-alto); }   /* grupo aislado: la mezcla del anillo solo ve lo de adentro */
/* halo cálido (dorado-ámbar que se funde al negro, como el rojo de ref3): grande, muchas paradas y desenfoque para
   que no haya bandas; el grano de la sección termina de romper el degradado. Va fuera de la escena (ver el HTML). */
.portada__halo {
  position: absolute; z-index: 0; left: 50%; top: var(--cab-top);   /* la figura se corre para que la cabeza quede en el 50 % */
  width: calc(var(--aro) * 2.3); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo-a) 0%, var(--halo-a) 10%, var(--halo-b) 26%, var(--halo-c) 46%, var(--halo-e) 70%, var(--halo-d) 100%);
  filter: blur(18px);
}
.portada__kash {
  position: absolute; z-index: 1; left: 50%; translate: -50% 0;
  top: var(--kash-top);
  font: 900 var(--kash)/.74 var(--f-display); letter-spacing: -.02em; white-space: nowrap; color: var(--blanco);
}
.portada__kash span { display: block; }
.portada__figura {
  position: absolute; z-index: 3; left: 50%; top: var(--fig-top);
  width: var(--rec); translate: calc(var(--cab-x) * -100%) 0; pointer-events: none;
}
/* el pie del recorte se funde al negro y la banda de papel lo monta: nunca se ve un corte duro.
   Grade cálido leve (medido en captura): baja el turquesa de la chaqueta para que manden el negro cálido y el dorado. */
.portada__recorte {
  width: 100%; filter: saturate(var(--grade-sat)) sepia(var(--grade-sepia)) drop-shadow(0 18px 26px var(--contacto-suave));
  -webkit-mask-image: linear-gradient(180deg, var(--negro) 78%, transparent 97%);
          mask-image: linear-gradient(180deg, var(--negro) 78%, transparent 97%);
}

/* Anillo: dos copias idénticas y sincronizadas (misma animación, mismo arranque).
   La de atrás va bajo la figura: la capucha y la mano la tapan al pasar, eso da la órbita.
   La de adelante va encima y solo deja ver el tramo de abajo (máscara cónica), así ahí no se tapa nada.
   Letras de solo contorno: un filete oscuro ancho y encima un trazo fino crema (se lee sobre foto y sobre titular). */
.aro {
  position: absolute; left: 50%; top: var(--cab-top); width: var(--aro); height: var(--aro);
  translate: -50% -50%; overflow: visible; pointer-events: none;
}
/* atrás: tenue (55 %) y en «difference»: sobre las letras crema del titular el trazo se ve oscuro, sobre el halo y el
   fondo se ve crema (el halo y el video están fuera de la escena, así que la mezcla no los toca) */
.aro--atras { z-index: 2; mix-blend-mode: difference; }
.aro--atras text { opacity: .55; }
/* adelante: a plena luz, y SOLO el tramo bajo el mentón (≈ 142°–218° desde arriba, con fundido corto) */
.aro--frente { z-index: 4; }
.aro--frente {
  -webkit-mask-image: conic-gradient(from 128deg, transparent 0deg, var(--negro) 14deg 90deg, transparent 104deg);
          mask-image: conic-gradient(from 128deg, transparent 0deg, var(--negro) 14deg 90deg, transparent 104deg);
}
.aro text {
  font: 900 108px var(--f-display); fill: none; stroke-linejoin: round;
  transform-box: view-box; transform-origin: 50% 50%;
}
.aro__sombra { stroke: var(--sombra-aro); stroke-width: 6; }
.aro__linea { stroke: var(--linea-aro); stroke-width: 2.2; }

/* banda de papel rasgado que cruza la portada: datos fijos y el acceso a bajar */
.portada__banda {
  grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 5; margin-top: -64px;   /* monta el pie fundido del recorte */
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px var(--margen) 10px; background: var(--crema); color: var(--tinta);
}
.portada__banda::before, .portada__banda::after {
  content: ""; position: absolute; left: 0; right: 0; height: 40px; background: repeat-x 50% 0 / auto 100%;
}
.portada__banda::before { bottom: 100%; margin-bottom: -1px; background-image: url("../img/papel_rasgado_abajo.webp"); background-position: 50% 100%; }
.portada__banda::after { top: 100%; margin-top: -1px; background-image: url("../img/papel_rasgado_arriba.webp"); }
.portada__dato { font: 500 12px/1.2 var(--f-mono); letter-spacing: .08em; }
.portada__bajar {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px;
  font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--tinta);
}
.portada__bajar:focus-visible { outline-color: var(--tinta); }
.portada__bajar svg { width: 12px; height: 21px; }
@media (max-width: 379px) {
  .portada__bajar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- 5. Módulos de la portada (móvil: agrupados y solapados bajo la escena) ---------- */
/* móvil: orden visual lanzamiento (+ logo en oro encima) → biografía → lema → presencia → escenarios → redes.
   El lanzamiento va pegado al borde rasgado: así asoma ya en la primera pantalla (390×844). */
.mod { position: relative; z-index: 6; grid-column: 2 / -2; margin-top: 36px; }
.mod--lema { grid-column: 1 / 7; grid-row: 5; margin: 30px 0 0 6px; padding: 34px 16px 16px; rotate: -2deg; }
.mod__lema { font: 900 clamp(18px, 5.2vw, 30px)/1.02 var(--f-titular); letter-spacing: -.01em; word-spacing: .08em; text-wrap: balance; }
.mod__mono { margin-top: 10px; font: 500 12px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
/* logo en oro como objeto suelto (WebP con su sombra), sin recuadro */
.mod--oro { grid-column: 4 / -1; grid-row: 4; z-index: 7; justify-self: end; align-self: start; width: min(36vw, 160px); margin: -30px -4px 0 0; rotate: 8deg; }   /* junto a «BIOGRAFÍA» */
.mod--bio { grid-row: 4; margin-top: 50px; }
.mod__texto { margin-top: 14px; max-width: 34em; font-size: 17px; line-height: 1.5; color: var(--crema); }
.mod--bio .mod__mono { color: var(--gris); }

/* lanzamiento: carátula como copia con margen blanco + título y acceso al reproductor */
.mod--lanza { grid-row: 3; margin-top: 26px; }
.lanza { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px 14px 16px 12px; }
.lanza__portada { width: 100%; aspect-ratio: 1; object-fit: cover; padding: 5px; background: var(--blanco); rotate: -3deg; box-shadow: var(--sombra-foto); }
.lanza__titulo { font: 900 clamp(20px, 5.8vw, 28px)/.98 var(--f-display); letter-spacing: -.02em; }
.lanza__tipo { margin-top: 6px; font: 500 12px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.lanza__ir {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; padding: 0 14px;
  background: var(--tinta); color: var(--crema); text-decoration: none; font: 900 13px/1 var(--f-titular); letter-spacing: .04em;
  transition: background-color .2s var(--entra), color .2s var(--entra);
}
.lanza__ir:hover { background: var(--oro); color: var(--tinta); }

/* escenarios: tres miniaturas pegadas con cinta, unidas por una línea */
.mod--escenarios { grid-row: 7; }
/* tres miniaturas en columna, como copias pegadas, unidas por una línea vertical; el lugar al lado con un trazo dorado */
.minis { position: relative; margin-top: 22px; display: grid; row-gap: 22px; }
.minis::before { content: ""; position: absolute; left: 26%; top: 10%; bottom: 10%; width: 2px; background: var(--crema); opacity: .5; }
.mini a {
  position: relative; display: grid; grid-template-columns: minmax(0, 54%) minmax(0, 1fr); column-gap: 16px; align-items: center;
  text-decoration: none; color: var(--crema);
}
.mini img {
  position: relative; width: 100%; aspect-ratio: 480 / 300; object-fit: cover; padding: 4px; background: var(--blanco);
  box-shadow: var(--sombra-foto); transition: translate .2s var(--entra);
  filter: saturate(var(--grade-sat)) sepia(var(--grade-sepia));   /* foto: grade cálido leve */
}
.mini:nth-child(1) img { rotate: -3deg; }
.mini:nth-child(2) img { rotate: 2deg; }
.mini:nth-child(3) img { rotate: -1.5deg; }
.mini .cinta { width: 64px; top: -12px; left: 14%; z-index: 2; }
.mini__lugar {
  display: block; padding-bottom: 10px; font: 900 13px/1.25 var(--f-titular); letter-spacing: .03em; text-wrap: balance;
  background: url("../img/marcador_2.webp") 0 100% / 70px 10px no-repeat;
}
.mini a:hover img { translate: 0 -4px; }
.mini a:hover .mini__lugar { color: var(--oro-claro); }
/* móvil: en zigzag (copia a la izquierda, luego a la derecha) para que se solapen con la línea al centro */
@media (max-width: 899px) {
  .minis { row-gap: 6px; }
  .minis::before { left: 50%; }
  .mini:nth-child(even) a { grid-template-columns: minmax(0, 1fr) minmax(0, 54%); }
  .mini:nth-child(even) img { order: 2; }
  .mini:nth-child(even) .mini__lugar { order: 1; text-align: right; background-position: 100% 100%; }
}

/* presencia digital: cuatro cifras en una tarjeta de cartón, con su fuente y corte al pie y un sello */
/* presencia: justo bajo el lema */
.mod--presencia { grid-row: 6; margin-top: 30px; }
.presencia { margin-top: 18px; padding: 26px 16px 18px; }
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.cifra { padding-top: 10px; border-top: 1.5px solid var(--linea-tinta); }
.cifra dt { font: 500 12px/1.2 var(--f-mono); letter-spacing: .08em; color: var(--tinta-media); }
.cifra dd { margin: 6px 0 0; font: 800 12px/1.25 var(--f-titular); letter-spacing: .02em; }
.cifra b { display: block; margin-bottom: 4px; font: 900 clamp(26px, 8vw, 40px)/.95 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.presencia__fuente { margin-top: 16px; max-width: 30em; font: 500 12px/1.4 var(--f-mono); color: var(--tinta-media); }
.presencia__sello { position: absolute; right: 10px; top: -40px; bottom: auto; width: 76px; }

/* redes: usuario y enlace, nombres en texto (sin logos de plataformas) */
.mod--redes { grid-row: 8; }
.redes { margin-top: 16px; border-bottom: 1.5px solid var(--linea); }
.redes a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 2px;
  border-top: 1.5px solid var(--linea); text-decoration: none; color: var(--crema);
  transition: color .2s var(--entra);
}
.redes__red { font: 900 16px/1 var(--f-titular); letter-spacing: .02em; }
.redes__usuario { font: 500 13px/1 var(--f-mono); color: var(--gris); }
.redes a:hover, .redes a:hover .redes__usuario { color: var(--oro-claro); }

/* ---------- 6. Música: cabecera ---------- */
.musica { position: relative; isolation: isolate; background: var(--fondo-calido); --car: min(68vw, 330px); }   /* carátula + vinilo caben enteros en 390 */
.musica__papel::before { content: ""; display: block; height: 30px; background: var(--crema); }
.musica__cabeza { position: relative; z-index: 1; padding: 0 var(--margen); margin-top: 22px; }
/* el titular: «A» y «DESTIEMPO» en dos renglones; la pegatina EP cierra el titular sobre el final de «DESTIEMPO» */
.musica__titulo {
  position: relative; margin-top: 12px;
  font: 900 11.4vw/.9 var(--f-display); letter-spacing: -.03em; color: var(--blanco);
  overflow-wrap: break-word; min-width: 0;
}
.musica__nombre { display: block; }
.musica__nombre span { display: block; white-space: nowrap; }
/* EP cierra el titular: pegatina sobre la esquina superior derecha de «DESTIEMPO» */
.musica__ep {
  position: absolute; right: 2px; bottom: 1.06em; rotate: 4deg;
  display: grid; place-items: center; width: 1.7em; height: 1.18em;
  background: var(--oro); color: var(--tinta); font: 900 .46em/1 var(--f-display); letter-spacing: 0;
  box-shadow: 2px 3px 0 var(--contacto);
}

/* ---------- 7. Reproductor: carátula impresa + vinilo + mandos sobre el negro; la lista es una tarjeta de cartón ---------- */
.repro { position: relative; z-index: 2; margin: 0 var(--margen); }
/* escena: la carátula muerde apenas el pie de «DESTIEMPO» (~12 % del alto de letra) */
.repro__escena { position: relative; width: var(--car); margin-top: 12px; }
.repro__caratula {
  position: relative; z-index: 2; width: 100%; aspect-ratio: 1; object-fit: cover;
  padding: 8px; background: var(--blanco); rotate: -2deg;
  box-shadow: var(--sombra-foto);
}
/* vinilo como objeto (WebP con su sombra), asomando por la derecha; sale un poco más cuando suena */
.repro__vinilo {
  position: absolute; z-index: 1; top: 3%; right: -30%; width: 94%; aspect-ratio: 1;
  transition: translate .6s var(--mueve);
}
.repro__vinilo img { width: 100%; height: 100%; object-fit: contain; }
.repro__pendiente {
  display: none; position: absolute; z-index: 4; left: -10px; bottom: 26px; padding: 12px 16px 10px; rotate: -3deg;
  background: var(--crema); color: var(--tinta); font: 500 13px/1.1 var(--f-mono); letter-spacing: .08em;
  box-shadow: 2px 3px 0 var(--contacto);
}
.repro__pendiente .cinta { width: 64px; top: -13px; left: 30%; }
.repro__pie { margin-top: 14px; font: 400 12px/1.3 var(--f-mono); color: var(--gris); }
.repro__ficha { display: flex; align-items: flex-end; gap: 14px; margin-top: 20px; }
.repro__titulos { min-width: 0; flex: 1; }
.repro__titulo { font: 900 34px/1 var(--f-titular); letter-spacing: -.02em; color: var(--blanco); overflow-wrap: break-word; }
.repro__sub { margin-top: 6px; font: 400 15px/1.3 var(--f-texto); color: var(--gris); }

/* ecualizador: quieto hasta que suena */
.eq { display: flex; align-items: flex-end; gap: 4px; height: 34px; flex: none; }
.eq i, .pista__eq i {
  display: block; width: 5px; height: 100%; border-radius: 1px; background: var(--oro);
  transform-origin: 50% 100%; transform: scaleY(.28);
  animation: kp-eq .9s var(--mueve) infinite alternate; animation-play-state: paused;
}
.eq i:nth-child(1) { transform: scaleY(.34); animation-duration: .74s; }
.eq i:nth-child(2) { transform: scaleY(.62); animation-duration: .52s; animation-delay: -.3s; }
.eq i:nth-child(3) { transform: scaleY(.44); animation-duration: .88s; animation-delay: -.5s; }
.eq i:nth-child(4) { transform: scaleY(.8);  animation-duration: .61s; animation-delay: -.2s; }
.eq i:nth-child(5) { transform: scaleY(.3);  animation-duration: .97s; animation-delay: -.7s; }
@keyframes kp-eq { from { transform: scaleY(.16); } to { transform: scaleY(1); } }

/* barra de progreso: zona táctil de 44 px, línea de 4 px; lee --kp-progress (0..1) */
.repro__mando { margin-top: 10px; }
.barra { position: relative; height: 44px; cursor: pointer; touch-action: none; border-radius: 4px; }
.barra::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 4px; border-radius: 2px; background: var(--pista-riel); }
.barra [data-kp-fill] { position: absolute; left: 0; right: 0; top: 20px; height: 4px; }
.barra [data-kp-fill]::before {
  content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--oro);
  transform-origin: 0 50%; transform: scaleX(var(--kp-progress, 0));
}
.barra [data-kp-fill]::after {
  content: ""; position: absolute; top: 50%; left: calc(var(--kp-progress, 0) * 100%);
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--blanco);
  box-shadow: 0 2px 6px var(--sombra-dura);
}
.repro__tiempos { display: flex; justify-content: space-between; margin-top: -8px; font: 400 12px/1 var(--f-mono); color: var(--gris); font-variant-numeric: tabular-nums; }
.repro__botones { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 8px; }
.boton-disco {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--blanco); cursor: pointer;
  transition: background-color .2s var(--entra), scale .12s var(--entra);
}
.boton-disco:hover { background-color: var(--linea); }
.boton-disco:active { scale: .94; }
.boton-disco:disabled { opacity: .35; cursor: default; }
.boton-disco--play { width: 68px; height: 68px; background: var(--blanco); color: var(--tinta); box-shadow: 0 10px 22px -8px var(--sombra-honda); }
.boton-disco--play:hover { background-color: var(--oro-claro); }
.ico-pausa { display: none; }

/* lista del EP: tarjeta de cartón con cinta y rótulo en acento (sobre una tira negra, para que el dorado contraste) */
.tracklist { margin-top: 34px; padding: 30px 12px 10px; rotate: .8deg; }
.tracklist__rotulo {
  position: absolute; top: -14px; left: 14px; padding: 8px 12px 7px; rotate: -2deg;
  background: var(--tinta); color: var(--oro); font: 900 14px/1 var(--f-display); letter-spacing: .02em;
}
.tracklist .cinta { right: 12%; left: auto; }
.lista { margin: 0; }
.pista {
  display: grid; grid-template-columns: 26px 46px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 0;
  min-height: 62px; padding: 8px; border-top: 1.5px solid var(--linea-tinta); color: var(--tinta);
  transition: background-color .2s var(--entra);
}
.pista:first-child { border-top: 0; }
.pista__num, .pista__eq { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.pista__num { font: 500 13px/1 var(--f-mono); color: var(--tinta-media); text-align: center; font-variant-numeric: tabular-nums; }
.pista__eq { display: none; align-items: flex-end; justify-content: center; gap: 2px; height: 16px; }
.pista__eq i { width: 3px; }
.pista__eq i:nth-child(1) { transform: scaleY(.5); animation-name: kp-eq; animation-duration: .6s; animation-delay: -.1s; }
.pista__eq i:nth-child(2) { transform: scaleY(.9); animation-name: kp-eq; animation-duration: .45s; animation-delay: -.2s; }
.pista__eq i:nth-child(3) { transform: scaleY(.35); animation-name: kp-eq; animation-duration: .7s; animation-delay: -.4s; }
.pista__mini { grid-column: 2; grid-row: 1 / span 2; width: 46px; height: 46px; object-fit: cover; padding: 2px; background: var(--blanco); }
.pista__titulo { grid-column: 3; grid-row: 1 / span 2; align-self: center; font: 800 18px/1.2 var(--f-titular); }
.pista__falta { grid-column: 3; grid-row: 2; align-self: start; display: none; margin-top: 3px; font: 500 12px/1.1 var(--f-mono); letter-spacing: .06em; color: var(--tinta-media); white-space: nowrap; }
.pista audio { grid-column: 1 / -1; grid-row: 3; width: 100%; height: 40px; margin-top: 8px; }

/* --- estados que escribe el WASM (contrato data-kp-*) --- */
[data-kp-player]:not([data-kp-ready]) .repro__mando,
[data-kp-player]:not([data-kp-ready]) .eq { display: none; }
[data-kp-player][data-kp-ready] .pista audio { display: none; }
[data-kp-player][data-kp-ready] .pista { cursor: pointer; }
[data-kp-player][data-kp-ready] .pista:hover { background-color: var(--oro-velo-2); }
[data-kp-player][data-kp-state="playing"] .repro__vinilo { translate: 14% 0; }
[data-kp-player][data-kp-state="playing"] .ico-play,
[data-kp-toggle][aria-pressed="true"] .ico-play { display: none; }
[data-kp-player][data-kp-state="playing"] .ico-pausa,
[data-kp-toggle][aria-pressed="true"] .ico-pausa { display: block; }
[data-kp-player][data-kp-state="playing"] .eq i,
[data-kp-player][data-kp-state="playing"] [data-kp-track][data-kp-active] .pista__eq i { animation-play-state: running; }

/* falta el audio: UNA etiqueta «AUDIO POR CARGAR» sobre la carátula, mandos atenuados, marca discreta por pista */
[data-kp-player][data-kp-state="missing"] .repro__pendiente { display: block; }
[data-kp-player][data-kp-state="missing"] .eq { display: none; }
[data-kp-player][data-kp-state="missing"] .barra,
[data-kp-player][data-kp-state="missing"] .repro__botones { opacity: .34; }
[data-kp-player][data-kp-state="missing"] .repro__tiempos { opacity: .7; }
[data-kp-player][data-kp-state="missing"] .boton-disco--play { background: transparent; color: var(--blanco); box-shadow: 0 0 0 2px var(--blanco) inset; }
/* pista activa: tira negra sobre el cartón, título en dorado */
[data-kp-track][data-kp-active] { background-color: var(--tinta); }
[data-kp-track][data-kp-active] .pista__titulo { color: var(--oro-claro); }
[data-kp-track][data-kp-active] .pista__num { display: none; }
[data-kp-track][data-kp-active] .pista__eq { display: flex; }
[data-kp-track][data-kp-missing] .pista__falta { display: block; }
[data-kp-track][data-kp-missing] .pista__titulo { grid-row: 1; align-self: end; }
[data-kp-track][data-kp-missing] .pista__mini { filter: grayscale(1); }
[data-kp-track][data-kp-missing] audio { display: none; }
[data-kp-track][data-kp-active][data-kp-missing] .pista__falta { color: var(--gris); }
/* el pie habla de la carátula de «Amigos?»: se esconde cuando la pista activa es otra */
.repro:has([data-kp-track]:not(:first-child)[data-kp-active]) .repro__pie { visibility: hidden; }

/* relato: la frase como nota de papel crema pegada, el texto, y el módulo «sencillo destacado» */
.musica__relato { display: grid; row-gap: 44px; padding: 0 var(--margen); margin-top: 60px; }
.musica__frase { width: min(88%, 340px); padding: 30px 22px 24px; rotate: -2deg; }
.musica__frase p { font: 900 24px/1.06 var(--f-titular); letter-spacing: -.01em; text-wrap: balance; }
.musica__frase .cinta { right: 20%; }
.musica__frase .sello { position: absolute; right: -30px; top: -36px; bottom: auto; }
.musica__texto { max-width: 34em; font-size: 17px; line-height: 1.5; color: var(--crema); }
.sencillo__tarjeta {
  margin-top: 0; padding: 16px 14px 14px; rotate: 1.2deg;
  display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "tapa nombre" "onda onda"; column-gap: 14px; row-gap: 14px; align-items: center;
}
.sencillo__tapa { grid-area: tapa; width: 96px; height: 96px; object-fit: cover; padding: 4px; background: var(--blanco); rotate: -3deg; box-shadow: var(--sombra-foto); }
.sencillo__nombre { grid-area: nombre; }
.sencillo__titulo { font: 900 24px/1 var(--f-display); letter-spacing: -.02em; }
.sencillo__artista { margin-top: 6px; font: 500 12px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-media); }
/* el rótulo del sencillo es una tira negra sobre la tarjeta (como «TRACKLIST»): la cinta ya no lo tapa */
.sencillo { position: relative; }
.sencillo .rotulo-a {
  position: absolute; z-index: 4; top: -14px; left: 14px; padding: 8px 12px 7px; rotate: 2deg;
  background: var(--tinta); font-size: 14px;
}
.sencillo__tarjeta { padding-top: 30px; }
/* onda de audio dibujada (decorativa): se mueve solo mientras suena el reproductor */
.onda { grid-area: onda; display: flex; align-items: center; gap: 3px; height: 40px; }
.onda i {
  flex: 1; height: 100%; border-radius: 2px; background: var(--tinta); transform: scaleY(var(--h, .4));
  animation: kp-onda .8s var(--mueve) infinite alternate; animation-play-state: paused;
}
.onda i:nth-child(3n + 1) { --h: .35; animation-duration: .7s; }
.onda i:nth-child(3n + 2) { --h: .8; animation-duration: .55s; animation-delay: -.2s; }
.onda i:nth-child(3n) { --h: .55; animation-duration: .9s; animation-delay: -.4s; }
.onda i:nth-child(5n) { --h: 1; }
.onda i:nth-child(7n) { --h: .22; }
@keyframes kp-onda { from { transform: scaleY(var(--h, .4)); } to { transform: scaleY(calc(var(--h, .4) * .35)); } }
[data-kp-player][data-kp-state="playing"] .onda i { animation-play-state: running; }

/* ---------- 8. Discografía: línea de tiempo con años en dorado y carátulas con marco blanco ---------- */
.biblio { margin-top: 72px; }
.biblio__cabeza { padding: 0 var(--margen); }
.estante {
  display: grid; grid-auto-flow: column; grid-auto-columns: 42vw; column-gap: 16px;
  margin-top: 10px; padding: 18px var(--margen) 30px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--margen);
  scrollbar-width: none;
}
.estante::-webkit-scrollbar { display: none; }
.estante:focus-visible { outline-offset: -3px; }
.disco { position: relative; scroll-snap-align: start; }
.disco__anio { display: block; position: relative; padding: 0 0 12px; font: 900 19px/1 var(--f-display); color: var(--oro); font-variant-numeric: tabular-nums; }
.disco__anio::before { content: ""; position: absolute; left: 0; right: -16px; bottom: 0; height: 2px; background: var(--crema); }
.disco:last-child .disco__anio::before { right: 0; }
.disco__anio::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 2px; height: 16px; background: var(--crema); }
.disco img {
  margin-top: 22px; width: 100%; aspect-ratio: 1; object-fit: cover; padding: 5px; background: var(--blanco);
  box-shadow: var(--sombra-foto);
}
.disco:nth-child(3n + 1) img { rotate: -2deg; }
.disco:nth-child(3n + 2) img { rotate: 1.5deg; }
.disco:nth-child(3n) img { rotate: -1deg; }
.disco__titulo { display: block; margin-top: 16px; font: 800 16px/1.2 var(--f-titular); color: var(--blanco); }

/* ---------- 8b. Música en móvil: más densa ----------
   La discografía deja de ser carrusel: rejilla de 3 columnas (el último lanzamiento a todo el ancho, luego 2 filas de 3).
   «Sencillo destacado» sube a montar el pie de la lista de canciones, corrido a la derecha; la frase monta el pie del
   sencillo, corrida a la izquierda. Sus rótulos pasan a ser tiras negras sobre la tarjeta (como «TRACKLIST»). */
@media (max-width: 899px) {
  .tracklist { margin-top: 28px; padding-bottom: 36px; }   /* el sencillo monta solo este pie vacío */
  .musica__relato { row-gap: 0; margin-top: 0; }
  .sencillo { order: -1; position: relative; z-index: 3; margin: -22px -6px 0 14%; }
  .sencillo__tarjeta { rotate: -1.6deg; }
  .musica__frase { position: relative; z-index: 4; width: 82%; margin-top: -12px; rotate: -3deg; }   /* encima del sencillo: su sello queda a la vista */
  .musica__texto { margin-top: 30px; }

  .biblio { margin-top: 64px; }
  .estante {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px;
    overflow: visible; padding: 18px var(--margen) 34px;
  }
  .disco__anio { font-size: 15px; padding-bottom: 9px; }
  .disco__anio::before { right: -12px; }
  .disco:nth-child(3n + 1) .disco__anio::before, .disco:last-child .disco__anio::before { right: 0; }
  .disco img { margin-top: 14px; padding: 4px; }
  .disco__titulo { margin-top: 10px; font-size: 13px; overflow-wrap: anywhere; }
  /* el último lanzamiento, destacado: carátula grande y su año/título al lado */
  .disco:first-child {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 52%) minmax(0, 1fr); column-gap: 16px;
    grid-template-areas: "tapa anio" "tapa titulo"; align-items: end;
  }
  .disco:first-child img { grid-area: tapa; margin-top: 0; }
  .disco:first-child .disco__anio { grid-area: anio; align-self: end; font-size: 34px; }
  .disco:first-child .disco__anio::before { right: 0; }
  .disco:first-child .disco__titulo { grid-area: titulo; align-self: start; font-size: 20px; }
}

/* ---------- 9. Escucha a Kash: banda de papel ---------- */
.escucha { margin-top: 26px; }
.escucha__papel { background: var(--crema); color: var(--tinta); padding: 6px var(--margen) 10px; }
.escucha__titulo { font: 900 clamp(26px, 8vw, 54px)/.95 var(--f-display); letter-spacing: -.02em; }
.escucha__lista { margin-top: 18px; border-bottom: 2px solid var(--linea-tinta); }
.escucha__lista a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre flecha" "nota flecha"; align-items: center; column-gap: 12px;
  min-height: 72px; padding: 12px 2px; border-top: 2px solid var(--linea-tinta);
  text-decoration: none; color: var(--tinta); transition: background-color .2s var(--entra);
}
.escucha__lista a:hover { background-color: var(--oro); }
.escucha__lista a:focus-visible { outline-color: var(--tinta); }
.escucha__nombre { grid-area: nombre; font: 900 clamp(24px, 6.8vw, 34px)/1 var(--f-titular); letter-spacing: -.01em; word-spacing: .06em; }
.escucha__nota { grid-area: nota; margin-top: 4px; font: 500 12px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.escucha__lista svg { grid-area: flecha; width: 44px; height: 44px; padding: 9px; background: var(--tinta); color: var(--crema); transition: translate .2s var(--entra); }
.escucha__lista a:hover svg { translate: 3px -3px; }

/* ---------- 10. Movimiento ----------
   Carga: capas de atrás hacia adelante (fondo, titular, halo, figura, anillo, módulos escalonados ~70 ms).
   Scroll (solo con animation-timeline): paralaje por capas con la propiedad `translate` (el `transform` queda
   libre para las entradas): fondo lento, titular algo más, anillo con la cabeza, módulos más rápidos.
   Sin soporte: todo visible y quieto. Movimiento reducido: presskit.css apaga todo. */
@keyframes kp-anillo { to { rotate: 1turn; } }
@keyframes kp-px-fondo { to { translate: 0 16%; } }
@keyframes kp-px-kash { to { translate: -50% 26%; } }
@keyframes kp-px-aro { to { translate: -50% calc(-50% + 36px); } }   /* igual que la figura: el anillo no se despega de la cabeza */
@keyframes kp-px-figura { to { translate: calc(var(--cab-x) * -100%) 36px; } }
@keyframes kp-px-mod { to { translate: 0 -44px; } }
@keyframes kp-px-vinilo { to { transform: translateY(26px); } }

@media (prefers-reduced-motion: no-preference) {
  .portada__fondo { animation: kp-aparece 1s var(--entra) both; }
  .portada__kash span { animation: kp-sube-kash .9s var(--entra) .15s both; }
  .portada__halo { animation: kp-halo 1.3s var(--entra) .3s both; }
  .portada__recorte { animation: kp-sube 1s var(--entra) .35s both; }
  .aro { animation: kp-aparece 1s var(--entra) .75s both; }
  /* las dos copias del anillo giran con la misma animación y el mismo arranque: quedan sincronizadas */
  .aro text { animation: kp-anillo 80s linear infinite; }
  .cabecera { animation: kp-aparece .7s var(--entra) .25s both; }
  .portada__banda { animation: kp-aparece .6s var(--entra) .5s both; }
  .portada__bajar svg { animation: kp-baja 1.4s var(--mueve) 2.2s 4; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .portada__video { animation: kp-px-fondo linear both; animation-timeline: scroll(root); animation-range: 0 120svh; }
    .portada__kash { animation: kp-px-kash linear both; animation-timeline: scroll(root); animation-range: 0 120svh; }
    .aro { animation: kp-px-aro linear both, kp-aparece 1s var(--entra) .75s both; animation-timeline: scroll(root), auto; animation-range: 0 120svh, normal; }
    .portada__figura { animation: kp-px-figura linear both; animation-timeline: scroll(root); animation-range: 0 120svh; }
    .repro__vinilo img { animation: kp-px-vinilo linear both; animation-timeline: view(); animation-range: entry 0% exit 0%; }
    .musica__nombre span:last-child { animation: kp-desliza linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
    .repro__escena, .tracklist, .musica__frase, .sencillo__tarjeta, .disco img, .musica__ep {
      animation: kp-asienta var(--entra) both; animation-timeline: view(); animation-range: entry 0% entry 90%;
    }
    .repro__escena, .tracklist { --giro: 0deg; animation-range: entry 0% entry 50%; }
    .disco:nth-child(even) img, .sencillo__tarjeta { --giro: -6deg; }
    .musica__ep { --giro: 20deg; }
  }
}

/* módulos de la portada: en móvil se asientan al entrar en pantalla; en escritorio entran escalonados al cargar */
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  @supports (animation-timeline: view()) {
    .mod { animation: kp-asienta var(--entra) both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
    .mod--oro { --giro: -10deg; }
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .mod { animation: kp-cae .7s var(--asienta) both; animation-delay: calc(.85s + var(--orden, 0) * 70ms); }
  .mod--bio { --orden: 0; }
  .mod--oro { --orden: 1; }
  .mod--lema { --orden: 2; }
  .mod--lanza { --orden: 3; }
  .mod--presencia { --orden: 4; }
  .mod--escenarios { --orden: 5; }
  .mod--redes { --orden: 6; }
}

/* ---------- 11. Escritorio: la portada se vuelve póster (figura al centro, módulos a los lados) ---------- */
@media (min-width: 900px) {
  .cabecera { padding: 22px var(--margen) 0; gap: 18px; }
  .cabecera__logo { width: 92px; }
  .cabecera__sello { font-size: 13px; }
  .cabecera__nav { gap: 10px; }
  .cabecera__nav a { font-size: 14px; padding: 0 14px; background-position: 14px calc(50% + 13px); background-size: calc(100% - 28px) 2px; }

  .portada {
    --rec: min(54vw, 760px);
    --kash: min(23vw, 340px);
    --fig-top: 150px;
    /* el pelo monta el 55 % inferior del titular */
    --kash-top: calc(var(--fig-top) + var(--rec-alto) * var(--pelo-y) - var(--kash) * .74 * .45);
    --aro: calc(var(--rec) * .9);
    grid-template-columns: minmax(var(--margen), 1fr) minmax(0, 340px) minmax(0, 560px) minmax(0, 340px) minmax(var(--margen), 1fr);
    grid-template-rows: 420px auto auto auto auto auto;
    column-gap: 28px; padding-bottom: 40px;
  }
  .portada__fondo { height: min(100%, 1100px); }
  .portada__escena { grid-column: 1 / -1; grid-row: 1 / 6; height: auto; min-height: calc(var(--fig-top) + var(--rec-alto)); }
  .portada__banda { grid-row: 6; margin-top: 36px; padding: 14px var(--margen) 12px; }
  .portada__dato { font-size: 13px; }

  .mod { grid-column: 2; margin-top: 0; }
  .mod--bio { grid-row: 2; }
  .mod--lema { grid-row: 3; margin: 44px 0 0 -6px; padding: 40px 24px 22px; }
  .mod--presencia { grid-row: 4; margin-top: 60px; }
  .mod--oro { grid-column: 4; grid-row: 2; justify-self: center; width: 230px; margin: -56px 0 0; }
  .mod--lanza { grid-column: 4; grid-row: 3; margin-top: 20px; }
  .mod--escenarios { grid-column: 4; grid-row: 4; margin-top: 60px; }
  /* redes: al pie, bajo la figura (que ahí ya se fundió al negro), alineadas con el final de las columnas */
  .mod--redes { grid-column: 3; grid-row: 4; align-self: end; margin-top: 48px; }
  .mod__texto { font-size: 17px; }
  .cifra b { font-size: 30px; }
  .lanza { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  .lanza__titulo { font-size: 20px; }

  /* música: carátula + vinilo ≈ la mitad del ancho; mandos y la tarjeta de canciones al lado; el relato en tres piezas */
  .musica {
    --car: min(36vw, 500px);
    display: grid; column-gap: 24px;
    grid-template-columns: minmax(var(--margen), 1fr) repeat(12, minmax(0, calc((var(--ancho) - 11 * 24px) / 12))) minmax(var(--margen), 1fr);
  }
  .musica__papel, .biblio, .escucha { grid-column: 1 / -1; }
  /* en escritorio la portada ya cierra con su banda de papel rasgado: música empieza directo en el negro */
  .musica__papel { display: none; }
  .musica__cabeza { grid-column: 2 / span 12; padding: 0; margin-top: 64px; }
  .musica__titulo { width: fit-content; font-size: min(8.4vw, 120px); white-space: nowrap; }
  .musica__nombre span { display: inline; }
  .musica__ep { right: -1.95em; bottom: auto; top: -.3em; }
  .repro {
    grid-column: 2 / span 12; margin: 0;
    display: grid; grid-template-columns: calc(var(--car) * 1.3) minmax(0, 1fr); column-gap: 64px;
    grid-template-areas: "esc ficha" "esc mando" "esc lista" "pie lista"; align-items: start;
  }
  .repro__escena { grid-area: esc; margin-top: -10px; }
  .repro__pie { grid-area: pie; margin-top: 18px; font-size: 13px; }
  .repro__ficha { grid-area: ficha; margin-top: 28px; }
  .repro__mando { grid-area: mando; }
  .tracklist { grid-area: lista; margin-top: 38px; }
  .repro__titulo { font-size: 54px; }
  .repro__pendiente { left: -18px; bottom: 40px; font-size: 15px; padding: 14px 20px 12px; }
  .musica__relato { grid-column: 2 / span 12; padding: 0; margin-top: 100px; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; align-items: start; }
  .musica__frase { width: auto; padding: 40px 30px 34px; }
  .nota.musica__frase p { font-size: 32px; }
  .musica__texto { font-size: 18px; line-height: 1.55; padding-top: 18px; }

  .biblio { margin-top: 84px; display: grid; grid-template-columns: subgrid; }
  .biblio__cabeza { grid-column: 2 / span 12; padding: 0; }
  .estante { grid-column: 2 / span 12; grid-auto-columns: minmax(0, 1fr); column-gap: 24px; padding: 26px 0 30px; overflow: visible; }
  .disco__anio { font-size: 24px; padding-bottom: 16px; }
  .disco__anio::before { right: -24px; }
  .disco img { margin-top: 26px; }
  .disco__titulo { font-size: 18px; }

  .escucha { margin-top: 48px; }
  .escucha__papel {
    display: grid; align-items: start; padding: 18px 0 26px;
    grid-template-columns: minmax(var(--margen), 1fr) minmax(0, calc(var(--ancho) * .34)) minmax(0, calc(var(--ancho) * .66)) minmax(var(--margen), 1fr);
  }
  .escucha__titulo { grid-column: 2; font-size: clamp(40px, 4.4vw, 62px); padding-right: 24px; }
  .escucha__lista { grid-column: 3; margin-top: 0; }
  .escucha__nombre { font-size: 40px; }
  .escucha__lista a { min-height: 84px; }
}