/* ==========================================================================
   composiciones.css — /composiciones: un tocadiscos por canción.
   El tocadiscos se dibuja con CSS en unidades cqw (1cqw = 1 % del ancho del tocadiscos), así escala
   entero sin deformarse. Estados: .deck.is-playing (suena) — lo pone composiciones.js al recibir
   «playback_update» de Spotify. Toda la página es oscura (los discos viven mejor sobre negro).
   ========================================================================== */

.js:not(.rm) .tt__plinth { clip-path: inset(0 0 100% 0); }

/* ══ DISCO (vinilo): surcos + destello; se reutiliza en el hero y en cada tocadiscos ═══════════ */
.rec {
  position: relative; border-radius: 50%; aspect-ratio: 1;
  background:
    conic-gradient(from 20deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .16) 9%, rgb(255 255 255 / 0) 24%, rgb(255 255 255 / 0) 50%, rgb(255 255 255 / .11) 59%, rgb(255 255 255 / 0) 74%),
    repeating-radial-gradient(circle at center, #0d0c0c 0 2px, #1d1b1a 2px 3px);
  will-change: transform;
}
.rec__label {                       /* etiqueta central: degradado de marca + firma corta (JV) */
  position: absolute; inset: 33%; display: grid; place-items: center; border-radius: 50%;
  background: var(--grad-marca); color: var(--blanco);
}
.rec__label svg { width: 62%; height: auto; }
.rec__label::after { content: ""; position: absolute; inset: 47.5%; border-radius: 50%; background: var(--negro); }

/* ══ HERO (siempre oscuro) ═════════════════════════════════════════════════ */
.chero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--negro);
  --fg: var(--blanco); --fg-2: var(--gris); --calido: var(--brass);
  color: var(--blanco);
}
.chero__rec {                       /* disco gigante que asoma por la derecha, girando despacio */
  position: absolute; z-index: -1; top: 6vh; right: -22vw; width: min(70vw, 900px);
  opacity: .9; animation: chero-spin 48s linear infinite;
}
@keyframes chero-spin { to { transform: rotate(360deg); } }

.chero__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; padding: calc(var(--header-h) + 24px) var(--pad-r) clamp(28px, 6vh, 64px) var(--pad-l); }
.chero__intro { display: grid; gap: 14px; max-width: 38ch; }
.chero__lead { font-size: clamp(1.15rem, .9rem + 1vw, 1.65rem); font-weight: 600; line-height: 1.24; letter-spacing: -.01em; text-wrap: balance; }

.cindex { background: var(--negro); border: 1px solid var(--linea-fuerte); padding: clamp(14px, 2vw, 24px) clamp(16px, 2.4vw, 32px); }
.cindex ol { display: grid; gap: 0 clamp(20px, 3vw, 44px); }
@media (min-width: 720px) { .cindex ol { grid-template-columns: repeat(2, minmax(0, auto)); } }
.cindex a { display: inline-flex; align-items: baseline; gap: 12px; min-height: 44px; align-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; transition: color var(--t-fast); }
.cindex b { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em; color: var(--calido); min-width: 2em; }
@media (hover: hover) { .cindex a:hover { color: var(--rojo); } }

.chero__title { position: relative; margin: 0; padding-top: 18px; }
.chero__title::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad-marca); transform-origin: 0 50%; transform: scaleX(var(--rule, 1)); }
.js:not(.rm) .chero__title { --rule: 0; }
.chero__title [data-fit] { font-size: 12vw; line-height: .86; padding-bottom: .02em; color: var(--blanco); }

/* ══ UNA CANCIÓN = UN TOCADISCOS ═══════════════════════════════════════════ */
.cdecks { position: relative; }
.deck {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center;
  padding: clamp(56px, 9vh, 110px) var(--pad-r) clamp(56px, 9vh, 110px) var(--pad-l);
  border-top: 1px solid var(--linea);
}
.deck__bg { position: absolute; inset: 0; z-index: -1; opacity: .38; transition: opacity 1.4s var(--ease-out); }
.deck__bg::after { content: ""; position: absolute; inset: 0; z-index: 5; background: linear-gradient(to right, rgb(20 19 18 / .82), rgb(20 19 18 / .55)); }
.deck.is-playing .deck__bg { opacity: .8; }              /* al sonar, la foto de fondo se ilumina */

.deck__info { position: relative; display: grid; gap: 14px; align-content: center; min-width: 0; }
.deck__title { font-size: clamp(2.3rem, 1rem + 5vw, 6rem); line-height: .92; max-width: 13ch; }
.deck__nota { max-width: 52ch; color: var(--gris); font-size: clamp(1.02rem, .96rem + .28vw, 1.16rem); line-height: 1.66; }

/* Reproductor de Spotify (siempre visible: es su formato de incrustación) */
.deck__embed { margin-top: clamp(4px, 1vw, 12px); max-width: 640px; min-height: 152px; }
.deck__mount, .deck__embed iframe { display: block; width: 100%; min-height: 152px; border: 0; background: var(--negro-2); }
/* Esquinas: el reproductor de Spotify tiene bordes redondeados transparentes; con la página en color-scheme
   "dark" el navegador les pintaría un fondo blanco opaco. "light" en el iframe lo evita (comprobado midiendo píxeles). */
.deck__embed iframe { color-scheme: light; }
.deck__slot { display: grid; place-items: center; min-height: 152px; padding: 16px; text-align: center; border: 1px dashed var(--linea-fuerte); color: var(--gris); font-size: var(--fs-small); }
.deck__slot code { font-size: .9em; color: var(--brass); }

@media (min-width: 1000px) {
  .deck { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 40px); min-height: min(92svh, 860px); }
  .deck--a .deck__tt   { grid-column: 1 / span 7; grid-row: 1; }
  .deck--a .deck__info { grid-column: 8 / -1;     grid-row: 1; }
  .deck--b .deck__tt   { grid-column: 6 / -1;     grid-row: 1; }
  .deck--b .deck__info { grid-column: 1 / span 5; grid-row: 1; }
  .deck--b .deck__bg::after { background: linear-gradient(to left, rgb(20 19 18 / .82), rgb(20 19 18 / .55)); }
}

/* ── El tocadiscos ────────────────────────────────────────────────────────── */
.deck__tt { min-width: 0; }
.tt { container-type: inline-size; width: 100%; max-width: 760px; margin-inline: auto; }
.tt__plinth {
  position: relative; aspect-ratio: 1.12 / 1; overflow: hidden;
  background: var(--negro-2); border: 1px solid var(--linea-fuerte);
}
.tt__plinth::before { content: ""; position: absolute; inset: 2.6cqw; border: 1px solid var(--linea); pointer-events: none; }   /* filete interior */

.tt__screw { position: absolute; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: var(--linea-fuerte); }
.tt__screw--1 { left: 4.6cqw; top: 4.6cqw; } .tt__screw--2 { right: 4.6cqw; top: 4.6cqw; }
.tt__screw--3 { left: 4.6cqw; bottom: 4.6cqw; } .tt__screw--4 { right: 4.6cqw; bottom: 4.6cqw; }

/* Plato + disco */
.tt__platter { position: absolute; left: 6cqw; top: 50%; width: 70cqw; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: #0f0e0d; border: 1px solid var(--linea-fuerte); }
.tt__rec { position: absolute; inset: 4%; }

/* Brazo: pivota en (88cqw, 11cqw). En reposo está fuera del disco; al sonar baja y avanza por el surco
   (--play-angle lo mueve el JS con el progreso de la canción: de 32° en el borde a 52° cerca de la etiqueta). */
.tt__pivot { position: absolute; left: 88cqw; top: 11cqw; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; border-radius: 50%; background: #1a1918; border: 1px solid var(--linea-fuerte); }
.tt__arm { position: absolute; left: 88cqw; top: 11cqw; width: 0; height: 0; transform-origin: 0 0; transform: rotate(14deg); transition: transform 1.1s var(--ease-out); }
.tt__arm i { position: absolute; display: block; }
.tt__bar  { left: -.7cqw; top: -4cqw; width: 1.4cqw; height: 44cqw; background: var(--gris); }
.tt__cw   { left: -2.4cqw; top: -8.5cqw; width: 4.8cqw; height: 5.5cqw; background: var(--linea-fuerte); border: 1px solid var(--linea-fuerte); }
.tt__head { left: -2.2cqw; top: 36.5cqw; width: 4.4cqw; height: 7.2cqw; background: var(--rojo); }
.deck.is-playing .tt__arm { transform: rotate(var(--play-angle, 32deg)); }

/* Detalles de hardware */
.tt__speed { position: absolute; left: 8cqw; bottom: 6.6cqw; font: 700 max(11px, 1.5cqw)/1 var(--font-body); letter-spacing: .14em; color: var(--gris); text-transform: uppercase; }
.tt__speed small { font-size: .8em; opacity: .75; }
.tt__led { position: absolute; right: 8cqw; top: 26cqw; width: 2.2cqw; height: 2.2cqw; background: var(--linea-fuerte); transition: background-color var(--t-med); }
.deck.is-playing .tt__led { background: var(--rojo); }

/* Botón play/pausa: cuadrado de bordes duros (≥ 44 px) */
.tt__play {
  position: absolute; right: 6cqw; bottom: 6cqw; z-index: 3;
  display: grid; place-items: center; width: max(44px, 11cqw); height: max(44px, 11cqw);
  border: 1px solid var(--rojo); background: var(--negro-2); color: var(--blanco);
  transition: background-color var(--t-med) var(--ease-out), transform var(--t-fast);
}
.tt__play .ic { width: 46%; height: 46%; fill: currentColor; grid-area: 1 / 1; }
.tt__play .ic--pause { display: none; }
.deck.is-playing .tt__play { background: var(--rojo); }
.deck.is-playing .tt__play .ic--play { display: none; }
.deck.is-playing .tt__play .ic--pause { display: block; }
.tt__play:disabled { opacity: .4; cursor: not-allowed; }
@media (hover: hover) { .tt__play:not(:disabled):hover { background: var(--rojo); } }
.tt__play:not(:disabled):active { transform: scale(.96); }

/* Sin GSAP (o sin JS de animación) el disco gira con CSS; con movimiento reducido no gira */
.deck.css-spin.is-playing .tt__rec { animation: tt-spin 2.6s linear infinite; }
@keyframes tt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chero__rec, .deck.css-spin.is-playing .tt__rec { animation: none; } }

/* ══ CIERRE ═════════════════════════════════════════════════════════════════ */
.cfin { display: grid; justify-items: center; text-align: center; gap: clamp(18px, 2.6vw, 34px); padding: clamp(64px, 11vh, 130px) var(--pad-r) clamp(48px, 8vh, 96px) var(--pad-l); border-top: 1px solid var(--linea); }
.cfin__sign { width: min(86vw, 560px); padding: clamp(12px, 2.4vw, 36px); color: var(--rojo); }
.firma--cfin { width: 100%; height: auto; }
.cfin__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }