/* Vinilos de chinospeaks — v2
   Sala de escucha de noche: negro cálido, ámbar de válvula, papel viejo. */
:root {
  --bg: #0d0b09;
  --bg-2: #14110e;
  --bg-3: #1c1814;
  --panel: rgba(255, 244, 228, 0.035);
  --panel-2: rgba(255, 244, 228, 0.06);
  --linea: rgba(255, 238, 214, 0.09);
  --linea-2: rgba(255, 238, 214, 0.16);
  --tinta: #f4ede2;
  --tinta-2: #bfb3a2;
  --tinta-3: #82786b;
  --ambar: #e9a84c;
  --ambar-2: #f6c987;
  --ambar-oscuro: #8a5a1c;
  --rojo: #e2584a;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radio: 14px;
  --sombra-funda: 0 1px 1px rgba(0,0,0,.35), 0 8px 18px -6px rgba(0,0,0,.6), 0 24px 48px -18px rgba(0,0,0,.7);
  --curva: cubic-bezier(.2, .8, .2, 1);
  --curva-muelle: cubic-bezier(.34, 1.4, .5, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(233,168,76,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(180,90,60,.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--tinta);
  font: 15px/1.55 var(--sans);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.bloqueado { overflow: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--ambar); color: #1a1208; }

/* grano de película por encima de todo */
.grano {
  position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grano 1.2s steps(6) infinite;
}
@keyframes grano {
  0% { transform: translate(0,0) } 20% { transform: translate(-3%,2%) } 40% { transform: translate(2%,-3%) }
  60% { transform: translate(-2%,-1%) } 80% { transform: translate(3%,3%) } 100% { transform: translate(0,0) }
}

/* ------------------------------------------------------------ cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 14px clamp(16px, 4vw, 48px);
  background: linear-gradient(to bottom, rgba(13,11,9,.92), rgba(13,11,9,.72));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--linea);
}
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.marca-disco {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background:
    radial-gradient(circle, #0d0b09 0 6%, var(--ambar) 6.5% 30%, transparent 31%),
    repeating-radial-gradient(circle, #1a1714 0 1px, #0f0d0b 1.5px 3px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.5);
  animation: gira 1.8s linear infinite; animation-play-state: paused;
}
.marca:hover .marca-disco, body.sonando .marca-disco { animation-play-state: running; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.marca-texto b { font: 600 19px/1 var(--serif); letter-spacing: -.01em; font-variation-settings: "SOFT" 100, "opsz" 40; }
.marca-texto i { font: italic 400 12px/1.4 var(--serif); color: var(--tinta-3); white-space: nowrap; }

.pestanas { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--linea); }
.pestanas a {
  text-decoration: none; padding: 8px 16px; border-radius: 999px;
  font: 600 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2);
  transition: color .2s, background .25s;
}
.pestanas a:hover { color: var(--tinta); }
.pestanas a.activa { background: var(--tinta); color: #15110c; }

.acciones { display: flex; justify-content: flex-end; gap: 10px; }
.boton-aleatorio {
  display: inline-flex; align-items: center; gap: 8px; border: 0;
  padding: 10px 18px 10px 14px; border-radius: 999px;
  background: linear-gradient(180deg, var(--ambar-2), var(--ambar));
  color: #24170a; font: 700 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 6px 22px -6px rgba(233,168,76,.6), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .2s var(--curva-muelle), box-shadow .2s;
}
.boton-aleatorio svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.boton-aleatorio svg circle { fill: currentColor; stroke: none; }
.boton-aleatorio:hover { transform: translateY(-1px) rotate(-2deg); box-shadow: 0 10px 28px -6px rgba(233,168,76,.75), inset 0 1px 0 rgba(255,255,255,.4); }
.boton-aleatorio:hover svg { animation: dado .6s var(--curva); }
@keyframes dado { 50% { transform: rotate(180deg) scale(1.15); } 100% { transform: rotate(360deg); } }

.boton-idioma {
  position: relative; display: inline-flex; border: 1px solid var(--linea-2); border-radius: 999px;
  background: var(--panel); padding: 3px; font: 600 11px/1 var(--mono); letter-spacing: .08em;
}
.boton-idioma span { position: relative; z-index: 1; padding: 7px 10px; border-radius: 999px; color: var(--tinta-3); transition: color .25s; }
.boton-idioma::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: 999px; background: var(--tinta); transition: transform .35s var(--curva-muelle);
}
html[lang="en"] .boton-idioma::before { transform: translateX(100%); }
html[lang="es"] .boton-idioma [data-l="es"], html[lang="en"] .boton-idioma [data-l="en"] { color: #15110c; }

/* ------------------------------------------------------------ vistas */
main { padding: 0 clamp(16px, 4vw, 48px) 40px; }
.vista { display: none; }
.vista.activa { display: block; animation: aparece .5s var(--curva); }
@keyframes aparece { from { opacity: 0; transform: translateY(10px); } }

.eyebrow {
  font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ambar);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }

/* ------------------------------------------------------------ portada (disco del día) */
.portada {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px);
  align-items: center; padding: clamp(28px, 6vw, 72px) 0 clamp(28px, 5vw, 56px);
}
.portada-escena { position: relative; aspect-ratio: 1.55; max-width: 640px; width: 100%; cursor: pointer; }
.portada-escena .funda-grande { position: absolute; left: 0; top: 0; height: 100%; aspect-ratio: 1; z-index: 2; }
.portada-escena .vinilo { position: absolute; top: 3%; height: 94%; left: 0; z-index: 1; transform: translateX(52%); transition: transform 1.2s var(--curva); }
.portada-escena:hover .vinilo { transform: translateX(58%) rotate(8deg); }
.portada-texto h1 {
  font: 400 clamp(36px, 5.2vw, 76px)/.98 var(--serif); letter-spacing: -.025em; margin: 14px 0 10px;
  font-variation-settings: "SOFT" 60, "opsz" 144; text-wrap: balance;
}
.portada-texto h1 em { font-style: italic; color: var(--ambar-2); }
.portada-texto .quien { font: 400 clamp(18px, 2vw, 24px)/1.3 var(--serif); font-style: italic; color: var(--tinta-2); margin: 0 0 22px; }
.portada-texto .quien a { text-decoration: none; border-bottom: 1px solid var(--linea-2); }
.portada-resumen { color: var(--tinta-2); max-width: 54ch; margin: 0 0 26px; font-size: 15.5px; }
.cifras { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linea); }
.cifra b { display: block; font: 400 30px/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.02em; }
.cifra span { font: 500 10.5px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.efemeride {
  display: inline-flex; gap: 8px; align-items: center; margin-top: 16px; padding: 8px 14px 8px 8px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--linea); font-size: 13px; color: var(--tinta-2); cursor: pointer;
}
.efemeride img { width: 28px; height: 28px; border-radius: 4px; }
.efemeride b { color: var(--tinta); font-weight: 600; }

.botones { display: flex; flex-wrap: wrap; gap: 10px; }
.boton {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--linea-2); background: var(--panel); color: var(--tinta);
  font: 600 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s var(--curva-muelle);
}
.boton:hover { background: var(--panel-2); border-color: rgba(255,238,214,.3); transform: translateY(-1px); }
.boton.principal { background: var(--tinta); color: #15110c; border-color: transparent; }
.boton.principal:hover { background: #fff; }
.boton svg { width: 15px; height: 15px; fill: currentColor; }
.boton:disabled { opacity: .4; cursor: default; transform: none; }

/* ------------------------------------------------------------ barra de filtros */
.filtros {
  position: sticky; top: 66px; z-index: 20; margin: 0 calc(-1 * clamp(16px, 4vw, 48px)); padding: 12px clamp(16px, 4vw, 48px);
  background: linear-gradient(to bottom, rgba(13,11,9,.9) 70%, rgba(13,11,9,0));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.filtros-fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.buscador { position: relative; flex: 1 1 260px; max-width: 420px; }
.buscador input {
  width: 100%; padding: 11px 14px 11px 40px; border-radius: 999px; border: 1px solid var(--linea-2);
  background: var(--panel); color: var(--tinta); font: 400 14px var(--sans); outline: none; transition: border-color .2s, background .2s;
}
.buscador input:focus { border-color: var(--ambar); background: var(--panel-2); }
.buscador input::placeholder { color: var(--tinta-3); }
.buscador svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; stroke: var(--tinta-3); fill: none; stroke-width: 2; }
.selector {
  appearance: none; padding: 11px 34px 11px 14px; border-radius: 999px; border: 1px solid var(--linea-2);
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23bfb3a2' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center / 12px;
  color: var(--tinta); font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.selector option { background: var(--bg-3); color: var(--tinta); text-transform: none; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0 2px; mask-image: linear-gradient(to right, #000 92%, transparent); }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--linea); background: transparent;
  font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); white-space: nowrap;
  transition: all .2s;
}
.chip:hover { color: var(--tinta); border-color: var(--linea-2); }
.chip.on { background: var(--ambar); border-color: var(--ambar); color: #24170a; }
.chip small { font: 500 10px var(--mono); opacity: .6; margin-left: 4px; letter-spacing: 0; }
.contador { font: 500 12px var(--mono); color: var(--tinta-3); margin-left: auto; white-space: nowrap; }

/* ------------------------------------------------------------ rejilla */
.rejilla {
  display: grid; gap: clamp(22px, 3vw, 40px) clamp(16px, 2.4vw, 32px);
  grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 17vw, 200px), 1fr));
  padding-top: 18px;
}
.tarjeta { position: relative; cursor: pointer; outline: none; }
.tarjeta .caja { position: relative; aspect-ratio: 1; }
.tarjeta .funda {
  position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: 3px;
  background: var(--bg-3); box-shadow: var(--sombra-funda);
  transition: transform .5s var(--curva), box-shadow .5s var(--curva);
}
.tarjeta .funda::after { content: ""; }
.tarjeta .caja::after { /* brillo de la funda */
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 3px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.14), rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.05));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .5s var(--curva);
}
.tarjeta .vinilo { position: absolute; z-index: 1; inset: 2%; transition: transform .7s var(--curva); }
.tarjeta:hover .vinilo, .tarjeta:focus-visible .vinilo { transform: translateX(34%) rotate(70deg); }
.tarjeta:hover .funda, .tarjeta:focus-visible .funda, .tarjeta:hover .caja::after, .tarjeta:focus-visible .caja::after { transform: translateX(-6%) rotate(-1.5deg); }
.tarjeta:focus-visible .funda { outline: 2px solid var(--ambar); outline-offset: 4px; }
.tarjeta .info { padding-top: 14px; min-width: 0; }
.tarjeta h3 { margin: 0; font: 500 15.5px/1.25 var(--serif); letter-spacing: -.005em; font-variation-settings: "opsz" 24; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta p { margin: 3px 0 0; font-size: 13px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta .meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 500 11px var(--mono); color: var(--tinta-3); }
.punto-color { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.cancion-hallada { margin-top: 4px; font-size: 12px; color: var(--ambar-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vacio { padding: 80px 0; text-align: center; color: var(--tinta-3); font: italic 400 22px var(--serif); }

/* ------------------------------------------------------------ el vinilo */
.vinilo { position: relative; aspect-ratio: 1; border-radius: 50%; isolation: isolate; }
.vinilo .gira { position: absolute; inset: 0; border-radius: 50%; will-change: transform; }
.vinilo .surco {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--fondo-vinilo, #121110);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.05);
}
.vinilo .surco::before { /* microsurco: solo en la zona grabada */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    repeating-radial-gradient(circle closest-side, rgba(255,255,255,var(--surco-luz, .04)) 0 .5px, rgba(0,0,0,var(--surco-sombra, .2)) .7px 1.3px, rgba(255,255,255,calc(var(--surco-luz, .04) * .5)) 1.5px 1.9px),
    repeating-radial-gradient(circle closest-side, transparent 0 7px, rgba(0,0,0,.06) 7.5px 9px, transparent 9.5px 13px);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(var(--r-dentro, 44%) - .2%), #000 var(--r-dentro, 44%) 96.2%, transparent 96.4%);
          mask: radial-gradient(circle closest-side, transparent calc(var(--r-dentro, 44%) - .2%), #000 var(--r-dentro, 44%) 96.2%, transparent 96.4%);
}
.vinilo .surco::after { /* separaciones entre canciones, zona muerta y borde */
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--anillos, none);
}
.vinilo .polvo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vinilo .galleta.papel { background: none; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 6px rgba(0,0,0,.35); overflow: hidden; }
.vinilo .galleta.papel svg { width: 100%; height: 100%; display: block; }
.vinilo .galleta.papel::after { display: none; }
.vinilo .arcoiris { /* difracción tenue de los surcos, fija mientras gira */
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 2; mix-blend-mode: screen; opacity: .9;
  background:
    conic-gradient(from 18deg, transparent 0deg, hsla(190,90%,70%,.05) 8deg, hsla(280,90%,72%,.06) 16deg, hsla(40,95%,65%,.07) 24deg, hsla(120,80%,65%,.04) 32deg, transparent 42deg 198deg, hsla(190,90%,70%,.045) 206deg, hsla(280,90%,72%,.05) 214deg, hsla(40,95%,65%,.06) 222deg, transparent 236deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(var(--r-dentro, 44%) - 2%), #000 46% 95%, transparent 97%);
          mask: radial-gradient(circle closest-side, transparent 0 42%, #000 46% 95%, transparent 97%);
}
.vinilo.translucido .surco { box-shadow: 0 10px 30px -8px rgba(0,0,0,.6), inset 0 0 22px rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.18); }
.vinilo .galleta {
  position: absolute; inset: 33.5%; border-radius: 50%; background: var(--bg-3) center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), inset 0 0 0 3px rgba(0,0,0,.08);
}
.vinilo .galleta::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 0 60%, rgba(0,0,0,.18) 61% 62%, transparent 63%); }
.vinilo .brillo { /* reflejo en pajarita: dos lóbulos opuestos, fijos mientras el disco gira */
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 2; mix-blend-mode: screen;
  background:
    conic-gradient(from -8deg, transparent 0deg, rgba(255,255,255,.03) 14deg, rgba(255,255,255,.2) 30deg, rgba(255,255,255,.26) 34deg, rgba(255,255,255,.12) 42deg, rgba(255,255,255,.02) 60deg, transparent 80deg 180deg, rgba(255,255,255,.02) 194deg, rgba(255,255,255,.14) 210deg, rgba(255,255,255,.19) 214deg, rgba(255,255,255,.07) 224deg, transparent 245deg),
    radial-gradient(circle closest-side at 35% 30%, rgba(255,255,255,.07), transparent 70%);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 33.5%, #000 34.5% 99%, transparent 100%);
          mask: radial-gradient(circle closest-side, transparent 0 33.5%, #000 34.5% 99%, transparent 100%);
}
.vinilo .brillo.metalico { background: conic-gradient(from 20deg, transparent, rgba(255,255,255,.35) 8%, transparent 14%, transparent 45%, rgba(255,255,255,.25) 52%, transparent 58%); }
.vinilo.color .brillo { opacity: .8; }
.vinilo.grande .agujero { /* eje del plato, de metal */
  width: 2.4%; height: 2.4%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, #cfcac2 25%, #7b766f 60%, #2f2c29 100%);
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.6);
}
.vinilo .agujero { position: absolute; z-index: 3; left: 50%; top: 50%; width: 2.6%; height: 2.6%; translate: -50% -50%; border-radius: 50%; background: #0a0908; box-shadow: inset 0 1px 2px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
.vinilo.girando .gira { animation: gira 1.8s linear infinite; } /* 33⅓ rpm de verdad */
.vinilo.r45.girando .gira { animation-duration: 1.333s; } /* 45 rpm */
/* 7": galleta grande (la mitad del disco), eje del mismo tamaño que en un LP y brillos sin pisar la galleta */
.vinilo.p7 .galleta { inset: 24.5%; }
.vinilo.p7 .agujero { width: 4.4%; height: 4.4%; }
.vinilo.p7 .brillo { -webkit-mask: radial-gradient(circle closest-side, transparent 0 51%, #000 52% 99%, transparent 100%); mask: radial-gradient(circle closest-side, transparent 0 51%, #000 52% 99%, transparent 100%); }
.vinilo.p7 .arcoiris { -webkit-mask: radial-gradient(circle closest-side, transparent 0 55%, #000 58% 95%, transparent 97%); mask: radial-gradient(circle closest-side, transparent 0 55%, #000 58% 95%, transparent 97%); }
/* tamaño real frente a un LP: 7" = 57 %, 10" = 83 %. En la rejilla se apoyan abajo a la izquierda, como en una estantería */
.tarjeta.p7 { --esc: .574; --mueve: 21.3%; }
.tarjeta.p10 { --esc: .833; --mueve: 8.35%; }
.tarjeta:is(.p7, .p10) .funda, .tarjeta:is(.p7, .p10) .vinilo, .tarjeta:is(.p7, .p10) .caja::after { scale: var(--esc); translate: calc(-1 * var(--mueve)) var(--mueve); }
.tocadiscos.p7, .portada-escena.p7 { --esc: .574; }
.tocadiscos.p10, .portada-escena.p10 { --esc: .833; }
:is(.tocadiscos, .portada-escena):is(.p7, .p10) :is(.vinilo, .funda-grande) { scale: var(--esc); }
/* el desplazamiento hasta el plato no se encoge con el disco (scale se aplica después de transform) */
.tocadiscos.fuera:is(.p7, .p10) .vinilo { transform: translateX(calc(62% / var(--esc))); }
.portada-escena:is(.p7, .p10) .vinilo { transform: translateX(calc(52% / var(--esc))); }
.portada-escena:is(.p7, .p10):hover .vinilo { transform: translateX(calc(58% / var(--esc))) rotate(8deg); }
.vinilo.lento .gira { animation: gira 9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ detalle */
.detalle {
  position: fixed; inset: 0; z-index: 50; overflow: clip;
  background: var(--d-oscuro, #0d0b09);
  --d-acento: var(--ambar);
}
.detalle[hidden] { display: none; }
.detalle .ambiente {
  position: absolute; inset: -20%; background: center / cover no-repeat; filter: blur(90px) saturate(150%); opacity: .55; transform: scale(1.1);
  transition: opacity 1s;
}
.detalle .ambiente::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, transparent, rgba(8,7,6,.75) 70%); }
.detalle .velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,9,8,.15) 0%, rgba(10,9,8,.55) 55%, rgba(10,9,8,.82) 100%); }
.detalle-cuerpo {
  position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-rows: minmax(0, 100%);
}
.detalle .cerrar, .detalle .flecha {
  position: absolute; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.28); backdrop-filter: blur(8px); display: grid; place-items: center; transition: background .2s, transform .2s;
}
.detalle .cerrar:hover, .detalle .flecha:hover { background: rgba(0,0,0,.5); transform: scale(1.06); }
.detalle .cerrar { top: 18px; right: 18px; }
.detalle .flecha { bottom: 24px; }
.detalle .flecha.ant { left: 24px; }
.detalle .flecha.sig { left: 78px; }
.detalle svg.ico { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; }

.escena { position: relative; display: grid; place-items: center; padding: 40px 30px 40px 70px; min-height: 0; }
.tocadiscos { position: relative; width: min(100%, calc((100vh - 120px) * 1.62), 860px); aspect-ratio: 1.62; }
.tocadiscos .funda-grande { position: absolute; left: 0; top: 0; height: 100%; aspect-ratio: 1; z-index: 3; }
.funda-grande { border-radius: 4px; box-shadow: 0 2px 2px rgba(0,0,0,.3), 0 30px 60px -20px rgba(0,0,0,.85), 0 60px 120px -30px rgba(0,0,0,.6); background: var(--bg-3) center / cover; }
.funda-grande::after { /* cartón: grano, brillo de la laminación y cantos gastados */
  content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.2), transparent 28%, transparent 74%, rgba(255,255,255,.07)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 0 2px 1px rgba(255,255,255,.12), inset 0 0 26px rgba(0,0,0,.28);
}
.funda-grande.desgaste::before { /* marca circular del disco en la funda (ring wear) */
  content: ""; position: absolute; inset: 5%; border-radius: 50%; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.07), 0 0 0 1px rgba(0,0,0,.05); opacity: .9;
}
.tocadiscos .plato { /* plato de aluminio con puntos estroboscópicos */
  position: absolute; z-index: 1; left: 34.45%; top: 1.65%; height: 96.7%; aspect-ratio: 1; border-radius: 50%; opacity: 0; transition: opacity .8s .5s;
  background:
    repeating-conic-gradient(from 0deg, rgba(240,236,228,.85) 0 .8deg, transparent .8deg 3.6deg),
    conic-gradient(from 20deg, #6c6862, #d9d5ce, #85817a, #efebe4, #77736c, #cfcac2, #6c6862);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 95.6%, #000 96%);
          mask: radial-gradient(circle closest-side, transparent 0 95.6%, #000 96%);
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.85);
}
.tocadiscos .plato > div { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle closest-side, transparent 0 98.4%, rgba(0,0,0,.5) 99%, rgba(255,255,255,.4) 99.6%, transparent 100%); }
.tocadiscos.fuera .plato { opacity: 1; }
.plato.girando { animation: gira 1.8s linear infinite; }
.tocadiscos .vinilo { position: absolute; z-index: 2; top: 3.5%; left: 0; height: 93%; transform: translateX(0); }
.tocadiscos.fuera .vinilo { transform: translateX(62%); transition: transform 1.3s var(--curva); }
.tocadiscos .brazo { position: absolute; z-index: 4; right: -2%; top: -6%; width: 30%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .6s .9s; }
.tocadiscos.fuera .brazo { opacity: 1; }
.tocadiscos .brazo { aspect-ratio: 1 / 2; height: auto; }
/* imágenes de 1000×2200: cubren el viewBox 100×220 (de y=-20 a 200); el pivote está en (70, 22) */
.brazo img { position: absolute; left: 0; top: -10%; width: 100%; height: 110%; user-select: none; }
.brazo .brazo-palanca { transform-origin: 70% 19.09%; transform: rotate(-6deg); transition: transform 1.8s var(--curva); }
.tocadiscos.sonando .brazo .brazo-palanca { transform: rotate(13deg); }
.tocadiscos.p10.sonando .brazo .brazo-palanca { transform: rotate(20deg); } /* el surco de entrada de un 10" y de un 7" */
.tocadiscos.p7.sonando .brazo .brazo-palanca { transform: rotate(28deg); }
.tocadiscos .rpm {
  position: absolute; z-index: 4; right: 1%; bottom: 0; font: 500 10.5px var(--mono); letter-spacing: .14em; color: rgba(255,255,255,.55);
  text-transform: uppercase; opacity: 0; transition: opacity .6s 1.2s;
}
.tocadiscos.fuera .rpm { opacity: 1; }
.tocadiscos .rpm i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #444; margin-right: 6px; vertical-align: 1px; transition: background .3s, box-shadow .3s; }
.tocadiscos.sonando .rpm i { background: #ff5a3c; box-shadow: 0 0 10px #ff5a3c; }

/* tocadiscos 3D y el selector 2D / 3D */
.td3d { display: none; position: relative; width: min(100%, calc((100vh - 120px) * 1.5), 900px); aspect-ratio: 1.5; animation: aparece .6s var(--curva); }
.td3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.escena.en3d .td3d { display: block; }
.escena.en3d .tocadiscos { display: none; }
.modo-vista {
  position: absolute; z-index: 6; top: 22px; left: 70px; display: flex; padding: 3px; border-radius: 99px;
  background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px);
}
.modo-vista button {
  font: 600 11px/1 var(--mono); letter-spacing: .1em; color: rgba(255,255,255,.6); padding: 7px 12px; border-radius: 99px; background: none; border: 0;
  transition: background .25s, color .25s;
}
.modo-vista button:hover { color: #fff; }
.modo-vista button.on { background: var(--d-acento, #e9a84c); color: var(--d-sobre-acento, #16110a); }

.ficha { position: relative; min-height: 0; overflow-y: auto; padding: 72px clamp(24px, 4vw, 64px) 120px clamp(16px, 2vw, 32px); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.ficha > * { animation: sube .7s var(--curva) both; }
.ficha > *:nth-child(2) { animation-delay: .05s } .ficha > *:nth-child(3) { animation-delay: .1s } .ficha > *:nth-child(4) { animation-delay: .15s } .ficha > *:nth-child(5) { animation-delay: .2s } .ficha > *:nth-child(6) { animation-delay: .25s }
@keyframes sube { from { opacity: 0; transform: translateY(18px); } }
.ficha .eyebrow { color: var(--d-acento); }
.ficha h1 { font: 400 clamp(34px, 4.2vw, 64px)/1 var(--serif); letter-spacing: -.025em; margin: 14px 0 12px; font-variation-settings: "SOFT" 50, "opsz" 144; text-wrap: balance; }
.ficha .artista { font: italic 400 clamp(20px, 2vw, 26px)/1.3 var(--serif); color: rgba(255,255,255,.82); margin: 0 0 18px; }
.ficha .artista a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s; }
.ficha .artista a:hover { background-size: 100% 1px; }
.insignias { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.insignia {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  font: 600 10px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.82); background: rgba(0,0,0,.18);
}
.insignia.color { border-color: transparent; color: #fff; }
.insignia .punto-color { width: 9px; height: 9px; }
.datos-rapidos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 26px; border-radius: var(--radio); overflow: hidden; background: rgba(255,255,255,.08); }
.dato { padding: 14px 14px 12px; background: rgba(12,10,9,.55); backdrop-filter: blur(6px); }
.dato b { display: block; font: 400 22px/1.1 var(--serif); font-variation-settings: "opsz" 48; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dato span { font: 600 9.5px/1.4 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.estrellas { color: var(--d-acento); letter-spacing: 1px; }

.botones-escucha { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }
.boton.escuchar { background: var(--d-acento); color: var(--d-sobre-acento, #1a1208); border-color: transparent; padding: 14px 24px; }
.boton.escuchar:hover { filter: brightness(1.1); background: var(--d-acento); }

.subpestanas { display: flex; gap: 22px; border-bottom: 1px solid rgba(255,255,255,.12); margin: 0 0 22px; overflow-x: auto; scrollbar-width: none; }
.subpestanas button {
  background: none; border: 0; padding: 12px 0; position: relative; flex: none;
  font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); transition: color .2s;
}
.subpestanas button:hover { color: rgba(255,255,255,.85); }
.subpestanas button.on { color: #fff; }
.subpestanas button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--d-acento); border-radius: 2px; }
.subpestanas sup { font: 500 9px var(--mono); opacity: .6; margin-left: 3px; letter-spacing: 0; }
.panel { animation: aparece .4s var(--curva); }

.resumen { font: 400 19px/1.55 var(--serif); font-variation-settings: "opsz" 24; color: rgba(255,255,255,.9); margin: 0 0 24px; text-wrap: pretty; }
.resumen::first-letter { float: left; font-size: 3.3em; line-height: .82; padding: 6px 8px 0 0; color: var(--d-acento); font-weight: 500; }
.sobre-artista { font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); margin: -8px 0 16px; display: block; }
.curiosidades { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.curiosidad {
  display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; padding: 16px 18px 16px 14px;
  border-radius: var(--radio); background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.07);
  transition: background .25s, transform .25s var(--curva);
}
.curiosidad:hover { background: rgba(0,0,0,.32); transform: translateX(3px); }
.curiosidad .icono { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--d-acento) 18%, transparent); }
.curiosidad .icono svg { width: 18px; height: 18px; stroke: var(--d-acento); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.curiosidad p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.88); text-wrap: pretty; }
.curiosidad.hecho { background: transparent; border-style: dashed; }
.fuentes { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,.45); }
.fuentes a { color: rgba(255,255,255,.7); }
.titulo-seccion { font: 600 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); margin: 28px 0 12px; }
.pendiente { font: italic 400 15px var(--serif); color: rgba(255,255,255,.55); padding: 6px 0 14px; }

.pistas { list-style: none; margin: 0; padding: 0; }
.pista { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 10px; border-radius: 10px; transition: background .2s; }
.pista:hover { background: rgba(255,255,255,.05); }
.pista .pos { font: 500 12px var(--mono); color: rgba(255,255,255,.45); }
.pista .tit { min-width: 0; }
.pista .tit b { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pista .tit small { display: block; font-size: 12px; color: rgba(255,255,255,.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pista .dur { font: 500 12px var(--mono); color: rgba(255,255,255,.55); }
.pista.con-video { cursor: pointer; }
.pista.con-video .pos { position: relative; }
.pista.con-video:hover .pos { color: transparent; }
.pista.con-video:hover .pos::after { content: "▶"; position: absolute; left: 0; color: var(--d-acento); }
.pista.suena { background: color-mix(in srgb, var(--d-acento) 16%, transparent); }
.pista.suena .pos { color: var(--d-acento); }
.cara { font: 600 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--d-acento); padding: 18px 10px 8px; display: flex; gap: 10px; align-items: center; }
.cara::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.total-pistas { display: flex; justify-content: space-between; padding: 14px 10px 0; border-top: 1px solid rgba(255,255,255,.1); margin-top: 8px; font: 500 12px var(--mono); color: rgba(255,255,255,.55); }

.creditos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 24px; }
.credito span { display: block; font: 600 10px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 4px; }
.credito div { font-size: 14px; color: rgba(255,255,255,.88); }
.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th { text-align: left; font: 600 10px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); padding: 9px 12px 9px 0; vertical-align: top; width: 36%; }
.tabla td { padding: 9px 0; color: rgba(255,255,255,.86); border-bottom: 1px solid rgba(255,255,255,.07); word-break: break-word; }
.tabla tr:last-child td { border-bottom: 0; }
.notas { white-space: pre-line; font-size: 14px; color: rgba(255,255,255,.78); background: rgba(0,0,0,.2); border-radius: var(--radio); padding: 16px 18px; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.galeria button { padding: 0; border: 0; background: rgba(0,0,0,.25); border-radius: 8px; overflow: hidden; aspect-ratio: 1; }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--curva); }
.galeria button:hover img { transform: scale(1.05); }
.visor { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: 30px; cursor: zoom-out; animation: aparece .25s; }
.visor img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.enlaces-fuera { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.enlaces-fuera a { font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); text-decoration: none; color: rgba(255,255,255,.8); }
.enlaces-fuera a:hover { background: rgba(255,255,255,.08); }

/* ------------------------------------------------------------ reproductor */
.reproductor {
  position: fixed; right: 18px; bottom: 18px; z-index: 60; width: min(360px, calc(100vw - 36px));
  border-radius: 18px; overflow: hidden; background: rgba(22,19,16,.86); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--linea-2); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8);
  animation: sube .5s var(--curva);
}
.reproductor[hidden] { display: none; }
/* con un disco abierto, el reproductor se mete arriba a la derecha, antes del botón de cerrar */
.con-detalle .reproductor { top: 18px; bottom: auto; right: 74px; width: min(330px, calc(50vw - 150px)); border-radius: 99px; animation: none; }
.con-detalle .reproductor .barra { grid-template-columns: 32px 1fr auto; gap: 10px; padding: 5px 6px 5px 6px; }
.con-detalle .reproductor .vinilo { width: 32px; }
.con-detalle .reproductor .que b { font-size: 12.5px; }
.con-detalle .reproductor .que span { font-size: 11px; }
.con-detalle .reproductor .mandos button { width: 30px; height: 30px; }
@media (min-width: 981px) { /* la cabecera de la ficha queda fija; solo se desplaza lo de la pestaña (curiosidades, canciones…) */
  .ficha { display: flex; flex-direction: column; padding-bottom: 28px; }
  .ficha > * { flex: none; }
  .ficha #panel {
    flex: 1 1 auto; min-height: 200px; overflow-y: auto; margin-top: 0; padding-top: 18px; padding-bottom: 24px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
    -webkit-mask-image: linear-gradient(transparent 0, #000 18px, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(transparent 0, #000 18px, #000 calc(100% - 36px), transparent);
  }
  .ficha .enlaces-fuera { margin-top: 12px; }
}
.reproductor .video { /* sin vídeo: el reproductor de YouTube suena pero no se ve (si se encoge o se oculta, YouTube para) */
  position: fixed; left: 0; bottom: 0; width: 320px; height: 180px; opacity: 0; pointer-events: none; z-index: -1;
}
.reproductor .video iframe, .reproductor .video > div { width: 100%; height: 100%; border: 0; display: block; }
.reproductor .barra { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; }
.reproductor .vinilo { width: 46px; cursor: pointer; }
.reproductor .que { min-width: 0; }
.reproductor .que b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reproductor .que span { display: block; font-size: 12px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reproductor .mandos { display: flex; gap: 2px; }
.reproductor .mandos button { width: 32px; height: 32px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; color: var(--tinta-2); }
.reproductor .mandos button:hover { background: var(--panel-2); color: var(--tinta); }
.reproductor .mandos svg { width: 16px; height: 16px; fill: currentColor; }

/* ------------------------------------------------------------ ruleta */
.ruleta { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(8,7,6,.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); animation: aparece .3s; }
.ruleta[hidden] { display: none; }
.ruleta-interior { width: 100%; text-align: center; }
.ruleta h2 { font: italic 400 clamp(26px, 3.4vw, 44px)/1.1 var(--serif); margin: 0 0 8px; }
.ruleta .sub { color: var(--tinta-3); font-size: 14px; margin: 0 0 36px; }
.carrete-marco { position: relative; height: clamp(180px, 24vw, 260px); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.carrete { position: absolute; left: 50%; top: 22px; height: calc(100% - 44px); display: flex; gap: 18px; will-change: transform; }
.carrete img { height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; box-shadow: var(--sombra-funda); flex: none; background: var(--bg-3); transition: opacity .6s, filter .6s; }
.carrete.parado img:not(.elegido) { opacity: .28; filter: grayscale(.6); }
.carrete img.elegido { box-shadow: 0 0 0 2px var(--ambar), 0 20px 50px -10px rgba(233,168,76,.45); }
.aguja-ruleta { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; translate: -1.5px 0; background: var(--ambar); box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 22px var(--ambar); z-index: 2; border-radius: 2px; }
.aguja-ruleta::before, .aguja-ruleta::after { content: ""; position: absolute; left: 50%; translate: -50% 0; border: 10px solid transparent; }
.aguja-ruleta::before { top: 0; border-top-color: var(--ambar); }
.aguja-ruleta::after { bottom: 0; border-bottom-color: var(--ambar); }
.ruleta-resultado { min-height: 150px; margin-top: 30px; }
.ruleta-resultado h3 { font: 400 clamp(26px, 3vw, 40px)/1.1 var(--serif); margin: 0 0 4px; letter-spacing: -.02em; animation: sube .6s var(--curva) both; }
.ruleta-resultado p { margin: 0 0 22px; color: var(--tinta-2); font: italic 400 19px var(--serif); animation: sube .6s .08s var(--curva) both; }
.ruleta-resultado .botones { justify-content: center; animation: sube .6s .16s var(--curva) both; }
.ruleta .cerrar-ruleta { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea-2); background: var(--panel); display: grid; place-items: center; }
.ruleta .cerrar-ruleta svg { width: 18px; height: 18px; stroke: var(--tinta); stroke-width: 2; fill: none; }
.ruleta .opcion { display: inline-flex; gap: 8px; align-items: center; color: var(--tinta-2); font-size: 13px; margin-top: 18px; cursor: pointer; }
.ruleta .opcion input { accent-color: var(--ambar); }

/* ------------------------------------------------------------ cajón */
.cajon { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: center; min-height: calc(100vh - 140px); padding: 20px 0; }
.cajon-escena { position: relative; height: min(70vh, 620px); perspective: 1500px; perspective-origin: 50% 0%; user-select: none; touch-action: pan-y; }
.cajon-pila { position: absolute; left: 50%; bottom: 14%; width: min(42vh, 380px, 70%); aspect-ratio: 1; translate: -50% 0; transform-style: preserve-3d; }
.cajon-pila img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; background: var(--bg-3);
  transform-origin: 50% 100%; backface-visibility: hidden; cursor: pointer;
  box-shadow: 0 -1px 0 rgba(255,255,255,.08), 0 20px 40px -10px rgba(0,0,0,.8);
  transition: transform .55s var(--curva), filter .55s, opacity .55s;
}
.cajon-caja {
  position: absolute; left: 50%; bottom: 4%; width: min(54vh, 480px, 88%); height: 26%; translate: -50% 0; z-index: 400; pointer-events: none;
  border-radius: 6px 6px 10px 10px;
  background: linear-gradient(180deg, #6b4a2e, #4a321e 60%, #3a2716), repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 3px, transparent 3px 9px);
  background-blend-mode: multiply;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12), inset 0 -10px 30px rgba(0,0,0,.4), 0 30px 50px -20px rgba(0,0,0,.9);
}
.cajon-caja::before { content: ""; position: absolute; left: 50%; top: 22%; translate: -50% 0; width: 22%; height: 16%; border-radius: 999px; background: rgba(0,0,0,.55); box-shadow: inset 0 3px 6px rgba(0,0,0,.6); }
.cajon-caja span { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; font: 600 10px var(--mono); letter-spacing: .3em; color: rgba(255,230,200,.45); text-transform: uppercase; }
.cajon-info h2 { font: 400 clamp(28px, 3vw, 44px)/1.05 var(--serif); letter-spacing: -.02em; margin: 12px 0 8px; text-wrap: balance; }
.cajon-info .quien { font: italic 400 20px/1.3 var(--serif); color: var(--tinta-2); margin: 0 0 16px; }
.cajon-info .meta { font: 500 12px var(--mono); color: var(--tinta-3); margin-bottom: 22px; }
.cajon-mando { margin-top: 26px; }
.cajon-mando input[type=range] { width: 100%; accent-color: var(--ambar); }
.cajon-mando .letras { display: flex; justify-content: space-between; font: 500 10px var(--mono); color: var(--tinta-3); margin-top: 4px; }
.cajon-mando .letras button { background: none; border: 0; padding: 2px; color: inherit; font: inherit; }
.cajon-mando .letras button:hover { color: var(--ambar); }
.cajon-ayuda { font-size: 12px; color: var(--tinta-3); margin-top: 14px; }
.kbd { font: 500 11px var(--mono); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--linea-2); color: var(--tinta-2); }

/* ------------------------------------------------------------ estadísticas */
.estadisticas { padding: 40px 0; }
.est-cabecera h2 { font: 400 clamp(36px, 5vw, 68px)/1 var(--serif); letter-spacing: -.03em; margin: 14px 0 10px; font-variation-settings: "SOFT" 60, "opsz" 144; }
.est-cabecera p { color: var(--tinta-2); max-width: 60ch; margin: 0; }
.losas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 36px 0 12px; }
.losa { position: relative; padding: 20px 20px 18px; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--linea); overflow: hidden; }
.losa b { display: block; font: 400 40px/1 var(--serif); letter-spacing: -.02em; font-variation-settings: "opsz" 96; }
.losa b small { font-size: .45em; color: var(--tinta-2); margin-left: 4px; letter-spacing: 0; }
.losa span { display: block; margin-top: 8px; font: 600 10px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.losa em { display: block; margin-top: 6px; font: italic 400 13.5px/1.4 var(--serif); color: var(--tinta-2); }
.tarjetas-est { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.bloque { grid-column: span 6; padding: 24px; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--linea); min-width: 0; }
.bloque.ancho { grid-column: span 12; }
.bloque.tercio { grid-column: span 4; }
.bloque.dos-tercios { grid-column: span 8; }
.bloque h3 { margin: 0 0 4px; font: 400 24px/1.2 var(--serif); letter-spacing: -.01em; }
.bloque .nota { margin: 0 0 20px; font-size: 13px; color: var(--tinta-3); }
.columnas { display: flex; align-items: flex-end; gap: 6px; height: 220px; padding-top: 18px; }
.columna { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; cursor: default; }
.columna .barra { width: 100%; max-width: 56px; background: var(--ambar); border-radius: 4px 4px 0 0; min-height: 2px; transition: filter .2s, transform .6s var(--curva); transform-origin: bottom; }
.columna:hover .barra { filter: brightness(1.2); }
.columna .valor { font: 500 11px var(--mono); color: var(--tinta-2); margin-bottom: 6px; }
.columna .etiqueta { font: 500 10.5px var(--mono); color: var(--tinta-3); margin-top: 8px; white-space: nowrap; }
.eje { height: 1px; background: var(--linea-2); }
.barras-h { display: grid; gap: 9px; }
.barra-h { display: grid; grid-template-columns: minmax(90px, 34%) 1fr 40px; gap: 12px; align-items: center; font-size: 13.5px; cursor: pointer; border-radius: 6px; }
.barra-h:hover .nombre { color: var(--tinta); }
.barra-h .nombre { color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 8px; align-items: center; }
.barra-h .nombre img { width: 22px; height: 22px; border-radius: 3px; flex: none; }
.barra-h .pista-barra { height: 10px; background: rgba(255,255,255,.04); border-radius: 0 4px 4px 0; }
.barra-h .relleno { height: 100%; background: var(--ambar); border-radius: 0 4px 4px 0; min-width: 3px; transition: filter .2s; }
.barra-h:hover .relleno { filter: brightness(1.2); }
.barra-h .num { font: 500 12px var(--mono); color: var(--tinta-2); text-align: right; }
.nube { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.nube button { background: none; border: 0; padding: 0; font-family: var(--serif); color: var(--tinta-2); line-height: 1.2; transition: color .2s; }
.nube button:hover { color: var(--ambar-2); }
.records { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.record { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 12px; background: rgba(0,0,0,.18); border: 1px solid var(--linea); cursor: pointer; transition: background .2s, transform .25s var(--curva); text-align: left; }
.record:hover { background: rgba(0,0,0,.32); transform: translateY(-2px); }
.record img { width: 64px; height: 64px; border-radius: 3px; object-fit: cover; box-shadow: 0 6px 14px -4px rgba(0,0,0,.6); }
.record span { display: block; font: 600 9.5px/1.4 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--ambar); }
.record b { display: block; font: 500 15px/1.25 var(--serif); margin: 3px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record small { display: block; font-size: 12px; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colores-vinilo { display: flex; flex-wrap: wrap; gap: 18px; }
.colores-vinilo button { background: none; border: 0; padding: 0; width: 92px; text-align: center; }
.colores-vinilo .vinilo { width: 92px; transition: transform .6s var(--curva); }
.colores-vinilo button:hover .vinilo { transform: rotate(120deg) scale(1.06); }
.colores-vinilo small { display: block; margin-top: 8px; font-size: 11px; color: var(--tinta-3); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 3px; }
.mosaico button { aspect-ratio: 1; border: 0; padding: 0; border-radius: 3px; background-size: cover; background-position: center; position: relative; overflow: hidden; transition: transform .2s var(--curva-muelle); }
.mosaico button::after { content: ""; position: absolute; inset: 0; background: var(--c); transition: opacity .35s; }
.mosaico button:hover { transform: scale(1.5); z-index: 2; box-shadow: 0 8px 20px rgba(0,0,0,.6); }
.mosaico button:hover::after { opacity: 0; }
.linea-tiempo svg { width: 100%; height: 220px; overflow: visible; }

.tip {
  position: fixed; z-index: 90; pointer-events: none; padding: 9px 12px; border-radius: 10px; max-width: 260px;
  background: rgba(244,237,226,.97); color: #1a140d; font-size: 12.5px; line-height: 1.4; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  translate: -50% calc(-100% - 12px);
}
.tip[hidden] { display: none; }
.tip b { display: block; font-weight: 700; }
.tip .portadas { display: flex; gap: 4px; margin-top: 6px; }
.tip .portadas img { width: 34px; height: 34px; border-radius: 2px; }

.aviso { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 95; padding: 12px 18px; border-radius: 999px; background: var(--tinta); color: #15110c; font-weight: 600; font-size: 13.5px; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: sube .4s var(--curva); }
.aviso[hidden] { display: none; }

.pie-pagina { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; align-items: center; padding: 30px 16px 40px; color: var(--tinta-3); font-size: 12px; border-top: 1px solid var(--linea); }
.enlace { background: none; border: 0; padding: 0; color: var(--tinta-2); text-decoration: underline; text-underline-offset: 3px; font-size: 12px; }
.enlace:hover { color: var(--ambar); }
#estadoSync { font-family: var(--mono); }

.cargando { display: grid; place-items: center; min-height: 70vh; }
.cargando .vinilo { width: 120px; }

/* ------------------------------------------------------------ móvil */
@media (max-width: 980px) {
  .portada { grid-template-columns: 1fr; }
  .portada-escena { max-width: 560px; }
  .detalle { overflow-y: auto; }
  .detalle-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; height: auto; }
  .ficha { min-width: 0; }
  .escena { padding: 92px 16px 18px; }
  .tocadiscos { width: min(100%, 560px); }
  .td3d { width: min(100%, 600px); }
  .modo-vista { top: 20px; left: 50%; translate: -50% 0; }
  .ficha { overflow: visible; padding: 18px 20px 140px; }
  .detalle .flecha { top: 18px; bottom: auto; width: 38px; height: 38px; }
  .detalle .flecha.ant { left: 16px; }
  .detalle .flecha.sig { left: 62px; }
  .detalle .velo { background: linear-gradient(180deg, rgba(10,9,8,.15), rgba(10,9,8,.7) 40%, rgba(10,9,8,.85)); }
  .cajon { grid-template-columns: 1fr; gap: 10px; min-height: 0; }
  .cajon-escena { height: 58vh; }
  .tarjetas-est .bloque, .bloque.tercio, .bloque.dos-tercios { grid-column: span 12; }
}
@media (max-width: 720px) {
  .cabecera { grid-template-columns: 1fr auto; padding: 10px 16px; gap: 10px; }
  .pestanas { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .pestanas a { padding: 8px 12px; font-size: 10.5px; }
  .marca-texto i { display: none; }
  .boton-aleatorio span { display: none; }
  .boton-aleatorio { padding: 10px 12px; }
  main { padding: 0 16px 30px; }
  .filtros { position: relative; top: auto; scroll-margin-top: 112px; margin: 0 -16px; padding: 10px 16px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .filtros-fila { gap: 8px; }
  .buscador { flex-basis: 100%; max-width: none; }
  .filtros-fila .selector { flex: 1 1 0; min-width: 0; padding-left: 12px; font-size: 10px; text-overflow: ellipsis; }
  .contador { display: none; }
  .portada { padding-top: 18px; }
  .cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .cifra b { font-size: 26px; }
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .datos-rapidos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reproductor, .con-detalle .reproductor { top: auto; right: 10px; left: 10px; bottom: 10px; width: auto; border-radius: 18px; }
  .columnas { gap: 3px; }
  .columna .etiqueta { font-size: 9px; transform: rotate(-45deg); }
  .barra-h { grid-template-columns: minmax(80px, 40%) 1fr 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .grano { display: none; }
}


/* ------------------------------------------------------------ modo tele (SHIELD) */
/* Foco con el mando: lo enfocado se "enciende" (crema), crece un poco y se levanta; nada de contornos gruesos */
.tv body { cursor: none; }
.tv .grano { display: none; }
.tv :focus { outline: none; }
.tv :is(.boton, .chip, .pestanas a, .subpestanas button, .boton-aleatorio, .boton-idioma, .selector, .flecha, .cerrar, .cerrar-ruleta, .mandos button, .efemeride, .letras button, .record, .colores-vinilo button, .mosaico button, .nube button, .galeria button, .pista, .portada-escena, .tarjeta .funda) {
  transition: transform .22s var(--curva), background-color .22s, color .22s, box-shadow .22s, filter .22s;
}
/* botones con texto, pestañas y chips: fondo crema, texto oscuro */
.tv :is(.boton, .chip, .pestanas a, .subpestanas button, .selector, .efemeride):focus {
  background: var(--tinta); color: #15110c; border-color: transparent; transform: scale(1.06);
  box-shadow: 0 10px 28px -8px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.35);
}
.tv .subpestanas button:focus { padding-inline: 12px; border-radius: 999px; }
.tv .subpestanas button:focus::after { display: none; }
.tv .chip:focus small { opacity: .7; }
.tv .efemeride:focus b { color: #15110c; }
/* los que ya son de color (Escuchar, Aleatorio, el principal): más luz y algo más grandes */
.tv :is(.boton.principal, .boton-aleatorio):focus {
  background: var(--ambar-2); color: #24170a; transform: scale(1.1); box-shadow: 0 14px 34px -8px rgba(0,0,0,.75), 0 0 40px -6px rgba(233,168,76,.7);
}
.tv .boton.escuchar:focus { background: var(--d-acento); color: var(--d-sobre-acento, #1a1208); filter: brightness(1.15); }
.tv .boton-idioma:focus { transform: scale(1.08); border-color: var(--tinta); }
/* botones redondos: se rellenan */
.tv :is(.flecha, .cerrar, .cerrar-ruleta, .mandos button):focus { background: var(--tinta) !important; transform: scale(1.12); box-shadow: 0 8px 22px -6px rgba(0,0,0,.7); }
.tv :is(.flecha, .cerrar, .cerrar-ruleta):focus svg.ico, .tv .cerrar-ruleta:focus svg { stroke: #15110c; }
.tv .mandos button:focus { color: #15110c; }
/* discos de la rejilla: la funda crece, se levanta y sale el vinilo */
.tv .tarjeta:focus { outline: none; }
.tv .tarjeta { z-index: 0; }
.tv .tarjeta:focus { z-index: 3; }
.tv .tarjeta:focus .funda {
  transform: translateY(-10px) scale(1.12); outline: none;
  box-shadow: 0 0 0 3px #fff8ec, 0 34px 60px -14px rgba(0,0,0,.95), 0 0 80px -10px rgba(255,236,210,.45);
}
.tv .tarjeta:focus .caja::after { transform: translateY(-10px) scale(1.12); }
.tv .tarjeta:focus .vinilo { transform: translateX(46%) translateY(-10px) rotate(70deg) scale(1.08); }
.tv .tarjeta .funda, .tv .tarjeta .vinilo, .tv .tarjeta .caja::after { transition-duration: .3s; }
.tv .rejilla:focus-within .tarjeta:not(:focus) .funda { filter: brightness(.62) saturate(.85); }
.tv .tarjeta .info { transition: transform .22s var(--curva); }
.tv .tarjeta:focus .info { transform: translateY(4px); }
.tv .tarjeta:focus h3 { color: var(--ambar-2); }
.tv :is(.quien, .artista) a:focus { background: var(--tinta); color: #15110c; border-radius: 6px; padding: 0 8px; margin: 0 -8px; box-shadow: 0 8px 22px -8px rgba(0,0,0,.7); }
.tv .portada-escena:focus .vinilo { transform: translateX(60%) rotate(8deg); }
.tv .tarjeta:focus p { color: var(--tinta); }
/* disco del día */
.tv .portada-escena:focus { transform: scale(1.025); }
.tv .portada-escena:focus .funda-grande { box-shadow: 0 0 0 2px rgba(255,248,236,.9), 0 30px 60px -20px rgba(0,0,0,.85); }
/* listas: fila iluminada con una raya de acento */
.tv .pista:focus { background: rgba(255,255,255,.1); box-shadow: inset 3px 0 0 var(--d-acento); }
.tv .record:focus { background: rgba(255,255,255,.1); transform: translateY(-3px) scale(1.03); box-shadow: 0 0 0 1px rgba(255,248,236,.6); }
.tv :is(.colores-vinilo button, .mosaico button, .galeria button):focus { transform: scale(1.12); z-index: 2; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.tv .nube button:focus { color: #fff; transform: scale(1.1); }
.tv .letras button:focus { color: #15110c; background: var(--tinta); border-radius: 4px; }
.tv .enlaces-fuera, .tv .botones-escucha a, .tv .fuentes a { display: none; }
.tv .reproductor iframe { pointer-events: none; }