/* =====================================================================
   12 · Histórico musical (p09–p10)
   Abertura: título + palcos das edições (fotos reais, sem atribuição).
   Cena fixada: a JUKEBOX. A fita cassete (fio condutor — a medalha de 2026
   era uma fita) toca à esquerda; à direita cada ano é uma capa de disco que
   sai da pilha, vira em 3D e desliza o vinil, com as fotos reais do ano
   quando a atribuição é segura. Ano e nome ficam na coluna da fita, NUNCA
   sobre a capa: texto e imagem têm colunas próprias, e a legenda de um ano
   só aparece depois que a do anterior sumiu (nunca duas ao mesmo tempo).
   2027 é o envelope lacrado com "?": o suspense que o capítulo 13 revela.
   ===================================================================== */

/* ---------- Abertura ---------- */
#musica .mu-open { position: relative; z-index: 1; padding-top: calc(var(--hud-h) + clamp(20px, 5vh, 64px)); padding-bottom: clamp(72px, 13vh, 150px); }
#musica .mu-head { display: grid; gap: clamp(6px, 1vh, 12px); margin-bottom: clamp(16px, 3.2vh, 36px); }
#musica .mu-title { font-size: clamp(28px, min(3.9vw, 6.4vh), 64px); line-height: 1.12; max-width: 19em; text-wrap: balance; }

#musica .mu-pano { position: relative; }
#musica .mu-ph { position: relative; margin: 0; isolation: isolate; }
#musica .mu-ph img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
#musica .mu-ph--palco {
  --bv: clamp(12px, 1.3vw, 20px);
  width: 100%; aspect-ratio: 1600 / 483; max-height: min(46vh, 440px); padding: 2px;
  clip-path: polygon(var(--bv) 0, calc(100% - var(--bv)) 0, 100% var(--bv), 100% calc(100% - var(--bv)), calc(100% - var(--bv)) 100%, var(--bv) 100%, 0 calc(100% - var(--bv)), 0 var(--bv));
  background: linear-gradient(135deg, var(--cyan), var(--violet) 50%, var(--magenta));
}
#musica .mu-ph--palco img {
  --b2: calc(var(--bv) - 1px);
  clip-path: polygon(var(--b2) 0, calc(100% - var(--b2)) 0, 100% var(--b2), 100% calc(100% - var(--b2)), calc(100% - var(--b2)) 100%, var(--b2) 100%, 0 calc(100% - var(--b2)), 0 var(--b2));
}
#musica .mu-ph--palco figcaption {
  position: absolute; z-index: 2; left: calc(var(--bv) + 8px); top: calc(var(--bv) * .6 + 6px); padding: 6px 12px 6px 10px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: rgba(5, 1, 15, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-left: 2px solid var(--magenta);
}
/* as duas fotos menores entram como cópias fotográficas sobre a borda do panorama */
#musica .mu-ph--m1, #musica .mu-ph--m4 {
  position: absolute; z-index: 3; bottom: -15%; width: clamp(150px, 17vw, 270px); padding: 4px; background: #0b0716;
  box-shadow: 0 0 0 1px rgba(0, 216, 248, .7), 0 0 18px rgba(0, 216, 248, .25), 0 22px 44px rgba(0, 0, 0, .7);
}
#musica .mu-ph--m1 { right: calc(clamp(150px, 17vw, 270px) + clamp(18px, 3vw, 48px)); aspect-ratio: 790 / 542; rotate: -4deg; }
#musica .mu-ph--m4 { right: clamp(8px, 1.6vw, 24px); bottom: -10%; aspect-ratio: 862 / 510; rotate: 3deg; box-shadow: 0 0 0 1px rgba(240, 0, 240, .7), 0 0 18px rgba(240, 0, 240, .25), 0 22px 44px rgba(0, 0, 0, .7); }
#musica .mu-ph--m1 img { object-position: 50% 30%; }

/* ---------- Cena ---------- */
#musica .mu-amb { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35), #000 58%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35), #000 58%); }
#musica .mu-amb__i { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; opacity: 0; filter: saturate(1.2) brightness(.7); }
#musica .mu-amb__dark { display: block; filter: none; background: radial-gradient(34% 46% at 66% 50%, rgba(120, 0, 240, .22), rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, .88)); }
#musica .mu-stage::after { /* costura com o capítulo de baixo */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 84%, rgba(0, 0, 0, .55));
}

#musica .mu-grid {
  position: relative; z-index: 1; height: 100%; display: grid;
  grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
  grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr);
  grid-template-areas: ". flow" "kick flow" "cas flow" "now flow" "next flow" ". flow";
  column-gap: clamp(24px, 3.4vw, 60px); row-gap: clamp(10px, 2vh, 22px);
  padding-top: calc(var(--hud-h) + clamp(8px, 2vh, 24px)); padding-bottom: clamp(12px, 2.6vh, 32px);
}
#musica .mu-kick { grid-area: kick; }
/* o texto pinta por cima de tudo que sai da caixa das capas (sombra da capa, abas, vinil) */
#musica .mu-kick, #musica .mu-cas, #musica .mu-now, #musica .mu-next { position: relative; z-index: 2; }

/* ---------- A fita ---------- */
#musica .mu-cas { grid-area: cas; margin: 0; justify-self: start; perspective: 1200px; width: min(100%, 440px, calc((100svh - var(--hud-h) - 400px) * 1.584)); }
#musica .mu-cas__tilt, #musica .mu-cas__jolt { transform-style: preserve-3d; }
#musica .mu-cas__svg {
  display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .7)) drop-shadow(0 0 18px rgba(120, 0, 240, .5)) drop-shadow(0 0 2px rgba(240, 0, 240, .6));
}
#musica .mu-cas__floor {
  position: absolute; left: 10%; right: 10%; bottom: -9%; height: 16%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(240, 0, 240, .45), rgba(120, 0, 240, .2) 55%, transparent); filter: blur(8px);
}
#musica .mu-cas { --acc: #00d8f8; }
#musica .mu-tape { fill: none; stroke: #2a1638; stroke-width: 6; stroke-linejoin: round; }
#musica .mu-tape-run { fill: none; stroke: #c79bff; stroke-opacity: .45; stroke-width: 6; stroke-dasharray: 1.5 13; }
#musica .mu-guide { fill: url(#mu-g-hub); stroke: #2a2640; stroke-width: 1.5; }
#musica .mu-ring { fill: none; stroke: #ffffff; stroke-opacity: .06; stroke-width: 1; vector-effect: non-scaling-stroke; }
#musica .mu-pack__edge { fill: none; stroke: #f000f0; stroke-opacity: .4; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
#musica .mu-streak path { fill: #ffffff; fill-opacity: .07; }
#musica .mu-trap { fill: #ffffff; fill-opacity: .035; stroke: #ffffff; stroke-opacity: .1; stroke-width: 1.2; }
#musica .mu-holes rect { fill: none; stroke: #000; stroke-opacity: .6; stroke-width: 1; }
#musica .mu-label { stroke: #ffffff; stroke-opacity: .08; }
#musica .mu-lbl-title { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 31px; text-transform: uppercase; fill: url(#mu-g-chrome); letter-spacing: .5px; }
#musica .mu-lbl-sub { font-family: var(--f-mono); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 2.6px; fill: #9ce9ff; }
#musica .mu-lbl-foot { font-family: var(--f-mono); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: 2.4px; fill: #8c86ad; }
#musica .mu-lbl-side text { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 26px; fill: #fff; }
#musica .mu-lbl-ring { fill: rgba(0, 0, 0, .35); stroke: var(--acc); stroke-width: 2.5; filter: drop-shadow(0 0 5px var(--acc)); }
#musica .mu-lbl-led { fill: var(--acc); filter: drop-shadow(0 0 4px var(--acc)) drop-shadow(0 0 9px var(--acc)); }
#musica .mu-scale { stroke: #ffffff; stroke-opacity: .28; stroke-width: 1.2; }
/* as cinco faixas acendem na etiqueta da fita */
#musica .mu-lbl-trk rect { fill: #ffffff; fill-opacity: .08; stroke: #ffffff; stroke-opacity: .12; stroke-width: 1; transition: fill-opacity .3s; }
#musica .mu-lbl-trk rect.is-on { fill: var(--acc); fill-opacity: .42; }
#musica .mu-lbl-trk rect.is-cur { fill: var(--acc); fill-opacity: 1; filter: drop-shadow(0 0 5px var(--acc)); }

/* ---------- Faixa tocando: ano e nome (uma de cada vez, no mesmo lugar) ---------- */
#musica .mu-now { grid-area: now; display: grid; min-width: 0; }
#musica .mu-hint, #musica .mu-caps { grid-area: 1 / 1; }
#musica .mu-hint {
  align-self: start; display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan);
}
#musica .mu-hint svg { filter: drop-shadow(0 0 6px var(--cyan)); }
#musica .mu-caps { display: grid; margin: 0; padding: 0; list-style: none; min-width: 0; }
#musica .mu-cap { grid-area: 1 / 1; display: grid; align-content: start; justify-items: start; gap: 2px; min-width: 0; opacity: 0; }
#musica .mu-cap__n { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--c); }
#musica .mu-cap__y {
  font-family: var(--f-mega); font-size: clamp(40px, min(4.6vw, 8vh), 88px); line-height: 1.04; color: var(--c);
  display: inline-block; transform: skewX(-8deg); padding: .04em .12em 0 0; /* a inclinação joga o topo do último dígito para a direita */
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c) 55%, transparent));
}
#musica .mu-cap__name {
  font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(18px, min(1.9vw, 3.3vh), 30px); line-height: 1.14; color: #fff; max-width: 21em; text-wrap: balance;
  padding-right: .1em; /* o itálico passa da caixa na última letra */
}
#musica .mu-q {
  display: inline-block; font-family: var(--f-mega); font-style: normal; font-size: 1.9em; line-height: 1.04; color: var(--magenta);
  filter: drop-shadow(0 0 12px rgba(240, 0, 240, .85)); animation: mu-flicker 3.2s steps(1) infinite;
}
#musica .mu-cap__tease { font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #ffd4ff; }
@keyframes mu-flicker { 0%, 100% { opacity: 1; } 42% { opacity: .6; } 44% { opacity: 1; } 71% { opacity: .75; } 72% { opacity: 1; } }

#musica .mu-next {
  grid-area: next; justify-self: start; align-self: start; display: inline-flex; align-items: center; gap: 12px; padding: 11px 16px; text-decoration: none;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #ffe3ff;
  border: 1px solid rgba(240, 0, 240, .55); background: rgba(240, 0, 240, .1);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background .25s, color .25s; opacity: 0; visibility: hidden;
}
#musica .mu-next svg { color: var(--magenta); filter: drop-shadow(0 0 6px var(--magenta)); transition: transform .35s var(--ease-out); }
#musica .mu-next:hover { background: rgba(240, 0, 240, .2); color: #fff; }
#musica .mu-next:hover svg { transform: translateX(4px); }

/* ---------- A jukebox de capas (3D) ---------- */
/* A pilha já tocada some num degradê na borda esquerda da caixa: nunca invade a coluna do texto.
   (O vinil e as fotos cabem na caixa; medido em 1280 e 1440.) */
#musica .mu-flowbox {
  grid-area: flow; position: relative; z-index: 1; min-width: 0; min-height: 0; container-type: size; display: grid; place-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%); mask-image: linear-gradient(90deg, transparent, #000 8%);
}
#musica .mu-flow { --S: min(56cqw, 74cqh); position: relative; width: var(--S); height: var(--S); perspective: calc(var(--S) * 3.4); perspective-origin: 50% 42%; }
#musica .mu-floor {
  position: absolute; left: 50%; top: calc(50% + min(56cqw, 74cqh) * .5); width: calc(min(56cqw, 74cqh) * 1.5); height: calc(min(56cqw, 74cqh) * .16);
  translate: -50% -30%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(240, 0, 240, .38), rgba(120, 0, 240, .16) 55%, transparent); filter: blur(10px);
}
#musica .mu-rec { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
#musica .mu-face { position: absolute; inset: 0; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
#musica .mu-face--front {
  background: #05010f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 34px color-mix(in srgb, var(--c) 32%, transparent), 0 34px 60px rgba(0, 0, 0, .65);
}
#musica .mu-face--front > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
#musica .mu-face--front::after { /* verniz da capa: brilho diagonal + marca redonda do disco de tanto tocar */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 44.2%, rgba(255, 255, 255, .035) 44.6% 45.2%, transparent 45.8%),
    linear-gradient(125deg, rgba(255, 255, 255, .16), transparent 26%, transparent 68%, rgba(255, 255, 255, .06));
}
#musica .mu-shade { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0; pointer-events: none; }
#musica .mu-face--back { /* envelope com janela redonda: o selo colorido do disco aparece por ela */
  transform: translateZ(calc(var(--S) * -.03)) rotateY(180deg);
  background:
    radial-gradient(circle at 50% 50%, #05010a 0 1.3%, transparent 1.5%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 72%, #000) 0 12.6%, rgba(0, 0, 0, .6) 12.9% 13.3%, transparent 13.5%),
    radial-gradient(circle at 50% 50%, transparent 0 35.4%, rgba(255, 255, 255, .14) 35.7% 36.1%, transparent 36.4%),
    linear-gradient(115deg, rgba(255, 255, 255, .07), transparent 40%),
    radial-gradient(circle at 50% 50%, transparent 0 36%, #160d29 36.2%),
    repeating-radial-gradient(circle at 50% 50%, #0b0a10 0 2px, #1c1a27 2.6px, #0b0a10 3.4px);
  box-shadow: inset 5px 0 0 var(--c), inset 0 0 0 1px rgba(255, 255, 255, .09), 0 24px 50px rgba(0, 0, 0, .6);
}
/* na pilha, cada envelope tem a aba do ano (como divisória de loja de discos): nunca se sobrepõem */
#musica .mu-tab {
  position: absolute; bottom: 100%; left: calc(4% + (var(--k) - 1) * 19%); width: 17%; padding: .35em 0 .25em; margin-bottom: -1px;
  font-family: var(--f-mono); font-style: normal; font-weight: 500; font-size: max(9px, calc(var(--S) * .03)); line-height: 1; letter-spacing: .08em; text-align: center; color: var(--c);
  background: #150c28; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); border-bottom: 0; border-radius: 5px 5px 0 0;
}
/* 2027: refletor sobre o envelope lacrado quando o palco apaga */
#musica .mu-spot {
  position: absolute; left: 50%; top: -14%; bottom: 10%; width: calc(min(56cqw, 74cqh) * 1.3); translate: -50% 0; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255, 220, 255, .16), rgba(240, 0, 240, .12) 55%, rgba(240, 0, 240, 0));
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
}
/* o vinil sai da capa */
#musica .mu-disc { position: absolute; left: 3%; top: 3%; width: 94%; height: 94%; border-radius: 50%; will-change: transform;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 26px color-mix(in srgb, var(--c) 28%, transparent), 0 18px 40px rgba(0, 0, 0, .6); }
#musica .mu-disc__grooves { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #0d0c12 0 33%, transparent 33.5%), repeating-radial-gradient(circle, #0c0b11 0 1.6px, #1b1924 2.1px, #0c0b11 2.8px); }
#musica .mu-disc__label { position: absolute; left: 33%; top: 33%; width: 34%; height: 34%; max-width: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #05010f, 0 0 0 3px rgba(255, 255, 255, .1); }
#musica .mu-disc::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2.6%; height: 2.6%; translate: -50% -50%; border-radius: 50%; background: #d9dce6; box-shadow: 0 0 0 2px #05010f; }
#musica .mu-disc__sheen { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 30deg, transparent 0 6%, rgba(255, 255, 255, .13) 11%, transparent 17% 50%, rgba(255, 255, 255, .09) 60%, transparent 67%); }

/* fotos reais do ano, como cópias que escorregam de dentro do envelope */
#musica .mu-prints { position: absolute; inset: 0; transform: translateZ(calc(var(--S) * .06)); pointer-events: none; }
#musica .mu-print {
  position: absolute; margin: 0; padding: 4px; background: #0b0716; opacity: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 75%, transparent), 0 0 18px color-mix(in srgb, var(--c) 30%, transparent), 0 22px 44px rgba(0, 0, 0, .7);
}
#musica .mu-print img { display: block; width: 100%; height: auto; }
#musica .mu-print--supla { left: -29%; top: 7%; width: 40%; rotate: -6deg; }
#musica .mu-print--guns { left: 90%; top: 9%; width: 18%; rotate: 7deg; } /* abaixo das abas da pilha */
#musica .mu-print--beatles { left: 76%; top: 58%; width: 44%; rotate: -4deg; }
#musica .mu-print--barao { left: 84%; top: 12%; width: 34%; rotate: 5deg; }

/* 2027: envelope lacrado. O "?" pisca; o globo do headliner só se insinua no escuro. */
#musica .mu-seal {
  display: grid; place-items: center; overflow: hidden; container-type: size;
  background: radial-gradient(90% 80% at 50% 42%, #1c0833, #08020f 62%, #030008);
  box-shadow: inset 0 0 0 1px rgba(240, 0, 240, .55), inset 0 0 40px rgba(240, 0, 240, .18), 0 0 46px rgba(240, 0, 240, .35), 0 34px 60px rgba(0, 0, 0, .7);
}
#musica .mu-seal::after { display: none; }
#musica .mu-seal > .mu-seal__globe { position: absolute; left: 10%; top: 23%; width: 80%; height: auto; max-width: none; opacity: .045; filter: blur(1.6px); }
#musica .mu-seal__q {
  position: relative; font-family: var(--f-mega); font-size: 62cqh; line-height: 1; color: var(--magenta); padding-top: .04em;
  filter: drop-shadow(0 0 14px rgba(240, 0, 240, .9)) drop-shadow(0 0 40px rgba(240, 0, 240, .5)); animation: mu-flicker 3.2s steps(1) infinite;
}
#musica .mu-seal__strip { position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; pointer-events: none; rotate: 18deg; translate: -160% 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent); }

#musica:not(.is-live) .mu-q, #musica:not(.is-live) .mu-seal__q { animation-play-state: paused; }
.reduced #musica .mu-q, .reduced #musica .mu-seal__q { animation: none; }

/* ---------- Telas baixas (projetor 1280×720) ---------- */
@media (min-width: 821px) and (max-height: 760px) {
  #musica .mu-hint, #musica .mu-cap__n, #musica .mu-cap__tease { font-size: 11px; }
  #musica .mu-next { padding: 8px 14px; }
}

/* ---------- Celular ---------- */
@media (max-width: 820px) {
  #musica .mu-open { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--hud-h) + 20px); padding-bottom: 40px; }
  #musica .mu-title { font-size: clamp(24px, 7.2vw, 34px); }
  #musica .mu-pano { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; min-width: 0; }
  #musica .mu-head { min-width: 0; }
  #musica .mu-ph--palco { grid-column: 1 / -1; --bv: 10px; aspect-ratio: 2.4 / 1; max-height: none; }
  #musica .mu-ph--palco figcaption { font-size: 10px; padding: 5px 9px 5px 8px; }
  #musica .mu-ph--m1, #musica .mu-ph--m4 { position: relative; right: auto; bottom: auto; width: auto; margin-top: -18px; }
  #musica .mu-ph--m1 { rotate: -3deg; }
  #musica .mu-ph--m4 { rotate: 2.5deg; }

  #musica .mu-amb { -webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, .3)); mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, .3)); }
  #musica .mu-amb__dark { background: radial-gradient(60% 34% at 50% 38%, rgba(120, 0, 240, .22), rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, .88)); }
  #musica .mu-grid {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "kick kick" "flow flow" "now now" "cas next";
    column-gap: 12px; row-gap: 10px; padding-top: calc(var(--hud-h) + 8px); padding-bottom: 12px;
  }
  #musica .mu-kick { font-size: 11px; }
  #musica .mu-cas { width: min(100%, 200px); align-self: end; }
  #musica .mu-next { align-self: end; padding: 9px 12px; font-size: 11px; gap: 8px; }
  #musica .mu-cap__y { font-size: clamp(34px, 10.5vw, 44px); }
  #musica .mu-cap__name { font-size: clamp(15px, 4.4vw, 18px); }
  #musica .mu-cap__n, #musica .mu-cap__tease, #musica .mu-hint { font-size: 11px; }

  #musica .mu-flowbox { -webkit-mask-image: none; mask-image: none; place-items: end center; padding-bottom: 14px; }
  #musica .mu-flow { --S: min(74cqw, 84cqh); }
  #musica .mu-floor { top: auto; bottom: 0; width: calc(min(74cqw, 84cqh) * 1.4); height: calc(min(74cqw, 84cqh) * .16); translate: -50% 40%; }
  #musica .mu-spot { width: calc(min(74cqw, 84cqh) * 1.3); top: -4%; bottom: 0; }
  #musica .mu-print--supla { left: -14%; top: 64%; width: 40%; }
  #musica .mu-print--guns { left: 87%; top: 8%; width: 16%; }
  #musica .mu-print--beatles { left: 68%; top: 68%; width: 42%; }
  #musica .mu-print--barao { left: 76%; top: 34%; width: 30%; }
}

/* ---------- Movimento reduzido: sem pino, a jukebox vira a tracklist completa ---------- */
.reduced #musica .mu-stage { height: auto; overflow: visible; }
.reduced #musica .mu-amb, .reduced #musica .mu-hint, .reduced #musica .mu-floor, .reduced #musica .mu-spot,
.reduced #musica .mu-disc, .reduced #musica .mu-face--back { display: none; }
.reduced #musica .mu-grid {
  height: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: none; grid-template-areas: none;
  column-gap: clamp(12px, 1.6vw, 24px); row-gap: 14px; align-items: start;
  padding-top: calc(var(--hud-h) + 24px); padding-bottom: clamp(72px, 12vh, 140px);
}
.reduced #musica .mu-kick { grid-column: 1 / -1; grid-row: 1; }
.reduced #musica .mu-cas { grid-column: 1 / 3; grid-row: 2; width: min(100%, 360px); margin-bottom: 12px; }
.reduced #musica .mu-now, .reduced #musica .mu-caps, .reduced #musica .mu-flowbox, .reduced #musica .mu-flow, .reduced #musica .mu-rec { display: contents; }
.reduced #musica .mu-face { position: relative; inset: auto; grid-row: 3; grid-column: var(--k); aspect-ratio: 1; transform: none; }
.reduced #musica .mu-cap { grid-row: 4; grid-column: var(--k); opacity: 1; transform: none; }
.reduced #musica .mu-prints { position: static; grid-row: 5; grid-column: var(--k); transform: none; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.reduced #musica .mu-print { position: relative; left: auto; top: auto; rotate: none; opacity: 1; }
/* larguras proporcionais ao formato de cada foto: as três ficam da mesma altura, numa linha */
.reduced #musica .mu-print--supla { width: calc((100% - 12px) * .4); }
.reduced #musica .mu-print--beatles { width: calc((100% - 12px) * .47); }
.reduced #musica .mu-print--guns { width: calc((100% - 12px) * .13); }
.reduced #musica .mu-print--barao { width: 60%; }
.reduced #musica .mu-cap__y { font-size: clamp(34px, 3.2vw, 56px); }
.reduced #musica .mu-cap__name { font-size: clamp(16px, 1.3vw, 22px); }
.reduced #musica .mu-next { grid-column: 1 / -1; grid-row: 6; opacity: 1; visibility: visible; }
@media (max-width: 820px) {
  .reduced #musica .mu-grid { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); column-gap: 14px; row-gap: 10px; }
  .reduced #musica .mu-cas { grid-column: 1 / -1; width: min(100%, 240px); }
  .reduced #musica .mu-face { grid-column: 1; grid-row: calc(var(--k) * 2 + 1); }
  .reduced #musica .mu-cap { grid-column: 2; grid-row: calc(var(--k) * 2 + 1); align-self: center; }
  .reduced #musica .mu-prints { grid-column: 1 / -1; grid-row: calc(var(--k) * 2 + 2); }
  .reduced #musica .mu-print--barao { width: 42%; }
  .reduced #musica .mu-next { grid-row: 13; }
}