/* Groove Naipe Vol. 1: landing v3 (27/10/2026).
   Linha visual: a repaginacao do designer (branco editorial, curvas do GN como supergrafismo em preto e magenta,
   foto colorida com borrao de movimento, grotesca pesada e apertada com palavra no degrade, pilula de vidro, chip de local,
   microtexto "save the date") + a estrutura da referencia realcreator (o site e o aparelho de quem cria: aqui, a noite tocando,
   com relogio e BPM no painel, fita correndo, painel editorial com grade fina, relogio cromado na linha do tempo, celular, marcas). */

@font-face { font-family: "Archivo"; src: url("../assets/fontes/archivo.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --papel: #FFFFFF;
  --papel-2: #F5F3F8;
  --tinta: #0B0A12;
  --tinta-2: #5E586B;
  --linha: #E6E2EC;
  --azul: #2F5BFF;
  --roxo: #8A3FFC;
  --magenta: #FF3DA8;
  --luz: linear-gradient(100deg, var(--roxo) 0%, #B23CE8 45%, var(--magenta) 100%);
  --cromo: linear-gradient(180deg, #FFFFFF 0%, #D9D8E0 18%, #8D8B98 38%, #2E2C38 49%, #F2F1F6 53%, #B9B7C3 70%, #5B5966 86%, #DCDBE3 100%);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --margem: clamp(16px, 4.5vw, 64px);
  --largura: 1280px;
  --miolo: max(var(--margem), calc((100vw - var(--largura)) / 2));
  --secao: clamp(72px, 9vw, 128px);
  --t1: clamp(44px, 7.2vw, 104px);
  --t2: clamp(30px, 4vw, 54px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.55 "Archivo", system-ui, sans-serif; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
button { font: inherit; color: inherit; }
.sr, .isca { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 90; background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.pular:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--roxo); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- marca e grafismos ---------- */
.lettering { display: block; aspect-ratio: 3431 / 668; -webkit-mask: url("../assets/logos/groove-naipe.svg") center / contain no-repeat; mask: url("../assets/logos/groove-naipe.svg") center / contain no-repeat; }
.lettering-tinta { background: var(--tinta); width: 132px; }
.lettering-cromo { background: var(--cromo); width: min(86vw, 860px); margin: 0 auto; filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 14px 22px rgba(11, 10, 18, .28)); }
/* supergrafismo: o GN do lettering ampliado e cortado pela borda */
.super { position: absolute; display: block; aspect-ratio: 1255 / 578; pointer-events: none; z-index: 0;
  -webkit-mask: url("../assets/logos/gn.svg") center / contain no-repeat; mask: url("../assets/logos/gn.svg") center / contain no-repeat; }
.super-preto { background: var(--tinta); }
.super-magenta { background: var(--luz); }
.luz { background: var(--luz); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
.micro { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.micro strong { color: var(--tinta); font-weight: 700; }
.micro-claro { color: #B9B2C6; }

/* titulos: grotesca pesada e apertada, uma parte no degrade */
.titulo-bloco { font: 900 var(--t1)/.9 "Archivo", sans-serif; font-stretch: 68%; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; }
.titulo-bloco .luz { display: inline; }
.titulo-menor { font-size: var(--t2); }
.titulo-claro { color: #fff; }

/* pilulas: botao cheio e botao de vidro desfocado */
.pilula { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px; border: 0;
  font: 800 14px/1 "Archivo", sans-serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s, box-shadow .2s; }
.pilula:hover { transform: translateY(-2px); }
.pilula-cheia { background: var(--tinta); color: #fff; box-shadow: 0 10px 30px -12px rgba(138, 63, 252, .9); }
.pilula-cheia::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 3px rgba(255, 61, 168, .25); }
.pilula-vidro { background: rgba(255, 255, 255, .55); color: var(--tinta); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1.5px rgba(11, 10, 18, .18), 0 8px 24px -12px rgba(11, 10, 18, .35); }
.pilula-pequena { min-height: 44px; padding: 0 18px; font-size: 13px; }
.pilula-larga { width: 100%; }
.pilula[disabled] { opacity: .55; cursor: progress; transform: none; }

/* ---------- o aparelho: painel da noite tocando ---------- */
.hud-topo { position: fixed; inset: 0 0 auto; z-index: 60; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(var(--margem), env(safe-area-inset-right, 0px)) 10px max(var(--margem), env(safe-area-inset-left, 0px));
  transition: background .3s, box-shadow .3s; }
.hud-topo.rolou { background: rgba(255, 255, 255, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linha); }
.hud-ao-vivo { display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--mono); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.hud-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--magenta); animation: pisca 1.2s steps(2) infinite; }
.hud-sep { color: var(--tinta-2); }
@keyframes pisca { 50% { opacity: .2; } }
.hud-marca { justify-self: center; display: block; padding: 8px 0; }
.hud-topo .pilula { justify-self: end; }
.hud-cantos span { position: fixed; z-index: 55; width: 18px; height: 18px; border: 0 solid rgba(11, 10, 18, .35); pointer-events: none; }
.hud-cantos span:nth-child(1) { top: 64px; left: 12px; border-width: 1.5px 0 0 1.5px; }
.hud-cantos span:nth-child(2) { top: 64px; right: 12px; border-width: 1.5px 1.5px 0 0; }
.hud-cantos span:nth-child(3) { bottom: 44px; left: 12px; border-width: 0 0 1.5px 1.5px; }
.hud-cantos span:nth-child(4) { bottom: 44px; right: 12px; border-width: 0 1.5px 1.5px 0; }
.hud-base { position: fixed; inset: auto 0 0; z-index: 55; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 10px max(var(--margem), env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(var(--margem), env(safe-area-inset-left, 0px));
  font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; color: var(--tinta-2);
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -1px 0 var(--linha); }
.hud-agulha { display: flex; align-items: center; gap: 12px; }
.hud-barra { width: 90px; height: 3px; background: var(--linha); border-radius: 3px; overflow: hidden; }
.hud-barra span { display: block; height: 100%; width: 0; background: var(--luz); }
@media (max-width: 899px) {
  .hud-base, .hud-cantos { display: none; }
  .hud-marca { display: none; }
  .hud-topo { grid-template-columns: 1fr auto; }
}

/* ---------- 1. primeira tela ---------- */
.hero { position: relative; min-height: 100svh; padding: 92px var(--margem) 64px; display: grid; place-items: center; overflow: hidden; overflow: clip; isolation: isolate; }
.super-hero-1 { width: min(110vw, 1500px); left: -32vw; bottom: -24%; opacity: .06; transform: rotate(-8deg); }
.super-hero-2 { width: min(52vw, 680px); right: -20vw; bottom: -6%; opacity: .12; transform: rotate(12deg); }
/* tiras de cabine de foto */
.tira { position: absolute; z-index: 1; display: grid; gap: 10px; padding: 10px; background: #fff; box-shadow: 0 1px 0 var(--linha), 0 24px 50px -24px rgba(11, 10, 18, .45); }
.tira img { width: 100%; aspect-ratio: 520 / 680; object-fit: cover; }
.tira-esq { left: var(--margem); top: 120px; width: clamp(120px, 12vw, 176px); transform: rotate(-3deg); }
.tira-dir { right: var(--margem); top: 150px; width: clamp(120px, 12vw, 176px); transform: rotate(2.5deg); }
.hero-centro { position: relative; z-index: 2; text-align: center; max-width: 900px; display: grid; justify-items: center; gap: 18px; }
.hero h1 { display: grid; gap: 6px; font-weight: 400; }
.hero-vol { font: 900 clamp(34px, 5.4vw, 76px)/.92 "Archivo", sans-serif; font-stretch: 66%; letter-spacing: -.02em; text-transform: uppercase; }
.hero-vol b { font-weight: 900; }
.hero-quando { font: 800 clamp(19px, 2.2vw, 26px)/1.25 "Archivo", sans-serif; font-stretch: 82%; text-wrap: balance; }
.hero-frase { color: var(--tinta-2); max-width: 44ch; text-wrap: pretty; }
.hero-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-preco { font-size: 15px; color: var(--tinta-2); max-width: 46ch; }
.hero-preco strong { color: var(--tinta); font-weight: 900; font-size: 18px; }
.hero-restam { display: block; color: var(--magenta); font-weight: 800; margin-top: 4px; }
.chip-local { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; border-radius: 999px; text-decoration: none; line-height: 1.15;
  background: rgba(255, 255, 255, .7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1.5px rgba(11, 10, 18, .18); text-align: left; }
.chip-local strong { display: block; font-size: 15px; }
.chip-local small { display: block; font-size: 12px; color: var(--roxo); font-weight: 700; }
.pin { width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--magenta); box-shadow: inset 0 0 0 6px var(--magenta), inset 0 0 0 11px #fff; flex: none; }
@media (max-width: 899px) {
  .hero { padding-top: 76px; align-content: start; }
  .tira { position: relative; inset: auto; width: 100%; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; transform: rotate(-1.5deg); }
  .tira-dir { display: none; }
  .tira-esq { margin-bottom: 26px; }
  .hero { grid-template-rows: auto auto; }
}

/* ---------- fitas ---------- */
@keyframes corre { to { transform: translateX(-50%); } }
@keyframes volta { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.fitas { position: relative; height: 150px; margin: -20px 0; overflow: hidden; z-index: 3; }
.fita { position: absolute; left: -5vw; right: -5vw; padding: 13px 0; box-shadow: 0 10px 24px -14px rgba(11, 10, 18, .5); }
.fita-luz { top: 30px; background: var(--luz); transform: rotate(-2.5deg); }
.fita-preta { top: 64px; background: var(--tinta); transform: rotate(2deg); }
.fita-trilho { display: flex; width: max-content; animation: corre 34s linear infinite; }
.fita-volta { animation-name: volta; animation-duration: 40s; }
.fita span { font: 900 clamp(18px, 2.2vw, 26px)/1 "Archivo", sans-serif; font-stretch: 66%; text-transform: uppercase; color: #fff; padding: 0 22px; white-space: nowrap; }
.fita span::after { content: "✱"; margin-left: 44px; }

/* ---------- paineis editoriais com grade fina ---------- */
.painel { position: relative; padding: var(--secao) var(--miolo); }
.cabeca { display: grid; gap: 14px; margin-bottom: 44px; }
.role { background-image: linear-gradient(var(--linha), var(--linha)); background-size: 1px 100%; background-position: 50% 0; background-repeat: no-repeat; }
.painel-grade { display: grid; gap: 28px; }
.role-texto { font-size: 18px; color: var(--tinta-2); max-width: 44ch; }
.role-texto strong { color: var(--tinta); }
.regua { height: 5px; background: var(--luz); }
.role-frase { font: 900 clamp(26px, 3.4vw, 46px)/.98 "Archivo", sans-serif; font-stretch: 70%; text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance; }
.role-foto { overflow: hidden; background: var(--papel-2); }
.role-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha { border-top: 2px solid var(--tinta); align-self: start; }
.ficha div { display: grid; grid-template-columns: 8em 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linha); }
.ficha dt { font: 500 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.ficha dd { font-weight: 800; }
@media (min-width: 900px) {
  .painel-grade { grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 48px; align-items: start; }
  .role .titulo-bloco { grid-column: 1 / 9; }
  .role-texto { grid-column: 9 / 13; padding-top: 10px; }
  .regua { grid-column: 1 / 13; }
  .role-foto-1 { grid-column: 1 / 5; grid-row: 3 / 5; aspect-ratio: 4 / 5; }
  .role-frase { grid-column: 6 / 12; grid-row: 3; }
  .ficha { grid-column: 6 / 10; grid-row: 4; }
  .role-foto-2 { grid-column: 10 / 13; grid-row: 4; aspect-ratio: 3 / 4; }
}
@media (max-width: 899px) { .role { background-image: none; } .role-foto-1 { aspect-ratio: 4 / 5; } .role-foto-2 { aspect-ratio: 16 / 10; } }

/* ---------- 3. a noite: relogio cromado, BPM e onda ---------- */
.noite-cabeca-cel { display: none; }
.noite { position: relative; background: var(--tinta); color: #fff; padding: var(--secao) var(--miolo); }
.noite-grade { display: grid; gap: 40px; }
.noite-linha { color: #B9B2C6; max-width: 40ch; margin-top: 18px; }
.relogio { margin-top: 26px; font: 900 clamp(96px, 15vw, 210px)/.85 "Archivo", sans-serif; font-stretch: 70%; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  background: var(--cromo); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5)); }
.medidor { margin-top: 18px; }
.onda { width: 100%; height: 64px; overflow: visible; }
.onda path { fill: none; stroke: var(--magenta); stroke-width: 3; stroke-linecap: round; }
.medidor-txt { display: flex; gap: 14px; align-items: baseline; font: 600 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #B9B2C6; margin-top: 10px; }
.medidor-txt span:first-child { font: 900 34px/1 "Archivo", sans-serif; font-stretch: 70%; color: #fff; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.medidor-txt span:last-child { color: var(--magenta); }
.sets { list-style: none; padding: 0; display: grid; }
.set { position: relative; padding: 26px 0 26px 30px; border-left: 2px solid rgba(255, 255, 255, .14); opacity: .38; transition: opacity .4s; }
.set::before { content: ""; position: absolute; left: -8px; top: 34px; width: 14px; height: 14px; border-radius: 50%; background: var(--tinta); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); }
.set.ativo { opacity: 1; }
.set.ativo::before { background: var(--magenta); box-shadow: 0 0 0 5px rgba(255, 61, 168, .25); }
.set.tocou { opacity: .62; }
.set-hora { font: 600 13px/1 var(--mono); letter-spacing: .12em; color: var(--magenta); }
.set h3 { font: 900 clamp(32px, 3.6vw, 52px)/.95 "Archivo", sans-serif; font-stretch: 66%; text-transform: uppercase; letter-spacing: -.01em; margin-top: 10px; }
.set-som { font-weight: 800; margin-top: 8px; }
.set-linha { color: #DAD5E3; margin-top: 6px; }
.set-raiz { font: 400 13px/1.5 var(--mono); color: #B9B2C6; margin-top: 10px; }
.set a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: #fff; text-decoration: none; }
.set a:hover { color: var(--magenta); }
.galhos { display: grid; gap: 22px; margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .14); }
.galhos h3 { font: 900 24px/1 "Archivo", sans-serif; font-stretch: 70%; text-transform: uppercase; }
.galhos p { color: #B9B2C6; margin-top: 10px; font-size: 16px; }
@media (min-width: 900px) {
  .noite-grade { grid-template-columns: 6fr 5fr; gap: 64px; align-items: start; }
  .noite-fixo { position: sticky; top: 96px; }
  .set { min-height: 46vh; padding-top: 30px; }
  .galhos { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}
@media (max-width: 899px) {
  .noite-fixo { position: sticky; top: 56px; z-index: 2; background: var(--tinta); padding: 10px 0 14px; margin: 0 calc(var(--margem) * -1); padding-left: var(--margem); padding-right: var(--margem); box-shadow: 0 18px 24px -18px #000; }
  .noite-fixo .micro, .noite-fixo .titulo-bloco, .noite-linha { display: none; }
  .relogio { margin-top: 0; font-size: 84px; }
  .onda { height: 40px; }
  .noite-cabeca-cel { display: block; margin-bottom: 8px; }
}

/* ---------- 4. artistas ---------- */
.retratos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 14px; }
.retrato img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.08); transition: filter .4s; background: var(--papel-2); }
.retrato:hover img { filter: grayscale(0) contrast(1.02); }
.retrato h3 { font: 900 clamp(24px, 2.4vw, 34px)/1 "Archivo", sans-serif; font-stretch: 66%; text-transform: uppercase; margin-top: 14px; }
.retrato p { color: var(--tinta-2); font-size: 15px; margin-top: 6px; }
.arrobas { display: flex; flex-wrap: wrap; gap: 0 12px; }
.arrobas a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--tinta); text-decoration: none; font-size: 15px; }
.arrobas a:hover { color: var(--roxo); }
.retratos li:first-child { grid-column: 1 / -1; }
.retratos li:first-child img { aspect-ratio: 16 / 10; }
@media (min-width: 900px) {
  .retratos { grid-template-columns: repeat(3, 1fr); gap: 52px 24px; }
  .retratos li:first-child { grid-column: auto; }
  .retratos li:first-child img { aspect-ratio: 4 / 5; }
}

/* ---------- 5. ao vivo: danca e pintura ---------- */
.aovivo { background: var(--papel-2); }
.aovivo-grade { display: grid; gap: 40px; align-items: center; }
.aovivo-texto { font-size: 19px; margin-top: 18px; max-width: 34ch; }
.aovivo-danca .arrobas span { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-2); font-size: 15px; }
.celular { position: relative; display: block; justify-self: center; width: min(78vw, 320px); aspect-ratio: 9 / 18; border-radius: 40px; overflow: hidden; text-decoration: none; color: #fff;
  box-shadow: 0 0 0 10px #16141D, 0 0 0 11px #3A3746, 0 40px 70px -24px rgba(11, 10, 18, .55); background: #16141D; }
.celular img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.celular::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 30%, transparent 60%, rgba(0, 0, 0, .7)); }
.celular-topo { position: absolute; z-index: 2; top: 22px; left: 18px; font-size: 13px; }
.celular-topo b { margin-right: 6px; }
.celular-tag { position: absolute; z-index: 2; left: 18px; bottom: 96px; padding: 5px 9px; background: var(--magenta); font: 800 12px/1 "Archivo", sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.celular-play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(255, 255, 255, .25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.celular-play::after { content: ""; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
.celular-rodape { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 22px; padding: 12px 16px; border-radius: 999px; font-size: 14px;
  background: rgba(255, 255, 255, .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.aovivo-paint { position: relative; padding: 34px 0 0; }
.super-paint { width: 340px; right: -40px; top: -60px; opacity: .22; transform: rotate(-14deg); }
.aovivo-paint > * { position: relative; }
@media (min-width: 900px) { .aovivo-grade { grid-template-columns: 1.2fr 1fr; gap: 64px; } }

/* ---------- 6. ingresso ---------- */
.ingresso-grade { display: grid; gap: 40px; }
.precos { width: 100%; border-collapse: collapse; margin-top: 30px; border-top: 2px solid var(--tinta); }
.precos th, .precos td { padding: 16px 0; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: middle; }
.precos th { font-weight: 800; font-size: 17px; }
.precos th small { display: block; font-weight: 400; font-size: 14px; color: var(--tinta-2); margin-top: 3px; }
.precos td { text-align: right; font: 900 30px/1 "Archivo", sans-serif; font-stretch: 70%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.precos-destaque td { font-size: clamp(56px, 7vw, 84px); background: var(--luz); -webkit-background-clip: text; background-clip: text; color: transparent; padding-left: 12px; }
.ingresso-linha { font: 900 clamp(22px, 2.4vw, 30px)/1.05 "Archivo", sans-serif; font-stretch: 72%; text-transform: uppercase; margin-top: 26px; text-wrap: balance; }
.contador { margin-top: 22px; }
.contador-barra { height: 8px; border-radius: 999px; background: var(--papel-2); overflow: hidden; }
.contador-barra span { display: block; height: 100%; width: 0; background: var(--luz); border-radius: inherit; transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.contador p { margin-top: 10px; font-size: 15px; color: var(--tinta-2); }
.contador strong { color: var(--magenta); font-size: 20px; font-weight: 900; }
.passos { margin-top: 26px; padding-left: 22px; display: grid; gap: 8px; color: var(--tinta-2); }
.passos li::marker { font-weight: 900; color: var(--roxo); }
.compra { position: relative; padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: rgba(255, 255, 255, .8); align-self: start;
  box-shadow: inset 0 0 0 1.5px var(--linha), 0 40px 80px -40px rgba(138, 63, 252, .55); }
.compra-campos { display: grid; gap: 18px; }
.campo { display: grid; gap: 8px; }
.campo > span { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.campo input { width: 100%; min-height: 56px; padding: 0 18px; border: 1.5px solid var(--linha); border-radius: 16px; background: #fff; font: 500 17px/1 "Archivo", sans-serif; color: var(--tinta); }
.campo input:focus { outline: none; border-color: var(--roxo); box-shadow: 0 0 0 4px rgba(138, 63, 252, .18); }
.campo input[aria-invalid="true"] { border-color: #C2185B; }
.qtd { display: flex; align-items: center; gap: 8px; }
.qtd button { width: 48px; height: 48px; border-radius: 999px; border: 1.5px solid var(--linha); background: #fff; font: 700 22px/1 "Archivo", sans-serif; cursor: pointer; }
.qtd button:disabled { opacity: .35; cursor: default; }
.qtd output { min-width: 40px; text-align: center; font: 900 28px/1 "Archivo", sans-serif; font-stretch: 70%; }
.qtd-total { margin-left: auto; font-size: 15px; color: var(--tinta-2); }
.qtd-total strong { color: var(--tinta); font-size: 24px; font-weight: 900; }
.marca { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; cursor: pointer; min-height: 44px; padding-top: 2px; }
.marca input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--roxo); }
.compra-aviso { color: #B0124F; font-weight: 800; font-size: 15px; }
.compra-aviso:empty { display: none; }
.compra-legal { font-size: 13px; color: var(--tinta-2); }
.compra-legal a { color: var(--tinta); }
.compra-fechada { display: grid; gap: 10px; }
.compra-fechada-titulo { font: 900 30px/1 "Archivo", sans-serif; font-stretch: 70%; text-transform: uppercase; }
@media (min-width: 900px) { .ingresso-grade { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .compra { position: sticky; top: 100px; } }

/* ---------- 7. o que tem la ---------- */
.tem { border-top: 1px solid var(--linha); }
.tem-grade { display: grid; gap: 0; border-top: 2px solid var(--tinta); }
.tem-grade article { padding: 26px 0; border-bottom: 1px solid var(--linha); display: grid; gap: 8px; align-content: start; }
.tem-num { font: 600 13px/1 var(--mono); color: var(--roxo); letter-spacing: .12em; }
.tem-grade h3 { font: 900 clamp(26px, 2.6vw, 36px)/1 "Archivo", sans-serif; font-stretch: 68%; text-transform: uppercase; }
.tem-grade p:not(.tem-num) { color: var(--tinta-2); }
.tem-adesivo img { width: 54px; height: 54px; animation: gira 14s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (min-width: 900px) { .tem-grade { grid-template-columns: repeat(3, 1fr); } .tem-grade article { padding: 30px 28px 30px 0; border-bottom: 0; } .tem-grade article + article { padding-left: 28px; border-left: 1px solid var(--linha); } }

/* ---------- 8. onde e ---------- */
.onde { position: relative; min-height: 86svh; display: grid; align-items: end; padding: var(--secao) var(--miolo); isolation: isolate; overflow: hidden; overflow: clip; }
.onde-cartao { max-width: 560px; padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7), 0 30px 60px -30px rgba(0, 0, 0, .6); display: grid; gap: 14px; }
.onde-casa { font: 900 clamp(56px, 8vw, 112px)/.85 "Archivo", sans-serif; font-stretch: 66%; text-transform: uppercase; letter-spacing: -.02em; }
.onde-end { font-weight: 800; font-size: 19px; }
.onde-quando { color: var(--tinta-2); }
.onde .hero-acoes { justify-content: flex-start; margin-top: 6px; }

/* ---------- 9. apoiadores ---------- */
.marcas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 2px solid var(--tinta); }
.marcas li { display: grid; place-items: center; text-align: center; min-height: 120px; padding: 18px; border-bottom: 1px solid var(--linha);
  font: 900 clamp(20px, 2.2vw, 30px)/1 "Archivo", sans-serif; font-stretch: 66%; text-transform: uppercase; letter-spacing: -.01em; }
.marcas li:nth-child(odd) { border-right: 1px solid var(--linha); }
.marcas-vaga { grid-column: 1 / -1; border-right: 0 !important; }
.marcas-vaga a { font: 700 15px/1.3 "Archivo", sans-serif; text-transform: none; letter-spacing: 0; color: var(--roxo); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) { .marcas { grid-template-columns: repeat(5, 1fr); } .marcas li { border-right: 1px solid var(--linha); } .marcas li:nth-child(5n) { border-right: 0; } .marcas-vaga { grid-column: auto; } }

/* ---------- 10. duvidas ---------- */
.duvidas { display: grid; gap: 8px; align-items: start; }
.duvidas .cabeca { margin-bottom: 20px; }
details { border-top: 1px solid var(--linha); }
details:last-child { border-bottom: 1px solid var(--linha); }
summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-size: clamp(18px, 2vw, 22px); font-weight: 800; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 30px; font-weight: 400; color: var(--magenta); transition: transform .25s; }
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { color: var(--tinta-2); padding: 0 0 24px; max-width: 58ch; }
details a { color: var(--tinta); font-weight: 700; display: inline-block; padding: 8px 0; }
@media (min-width: 900px) { .duvidas { grid-template-columns: 1fr 2fr; gap: 64px; } }

/* ---------- 11. final ---------- */
.final { position: relative; text-align: center; padding: var(--secao) var(--margem) calc(var(--secao) + 40px); display: grid; justify-items: center; gap: 22px; overflow: hidden; overflow: clip; isolation: isolate; background: var(--tinta); color: #fff; }
.final .micro { color: #B9B2C6; }
.final .pilula-cheia { background: #fff; color: var(--tinta); }
.final .pilula-vidro { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
.super-final { width: min(140vw, 1700px); left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-6deg); opacity: .16; }
.final-titulo { font: 900 clamp(64px, 13vw, 200px)/.85 "Archivo", sans-serif; font-stretch: 64%; text-transform: uppercase; letter-spacing: -.03em;
  background: var(--cromo); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); text-wrap: balance; }
.final-titulo span { display: block; }
.final-assina { font-weight: 800; font-size: 18px; }

/* ---------- rodape ---------- */
.rodape { padding: 28px var(--miolo) 110px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; border-top: 1px solid var(--linha); font-size: 14px; color: var(--tinta-2); }
.rodape nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.rodape a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); text-decoration: none; font-weight: 700; }
@media (min-width: 900px) { .rodape { padding-bottom: 60px; } }

/* ---------- barra de compra no celular ---------- */
.barra-compra { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1.5px rgba(11, 10, 18, .14), 0 16px 40px -16px rgba(11, 10, 18, .5); transform: translateY(160%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.barra-compra.ativa { transform: none; }
.barra-compra p { font-size: 12px; line-height: 1.1; color: var(--tinta-2); white-space: nowrap; }
.barra-compra p strong { display: block; }
.barra-compra .pilula { padding: 0 16px; }
.barra-compra strong { color: var(--tinta); font-weight: 900; font-size: 19px; }
@media (min-width: 900px) { .barra-compra { display: none; } }

/* aparece ao rolar (so com JS ligado) */
.js .revela { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s cubic-bezier(.2, .8, .2, 1); }
.js .revela.visivel { opacity: 1; transform: none; }

/* ---------- revisao 1 (portao de acabamento): 1 tamanho de h2, 1 de h3, raios na escala 0/10/20/999, sem palavra solta ---------- */
p, li, dd { text-wrap: pretty; }
.titulo-menor { font-size: var(--t1); }
.set h3, .retrato h3, .tem-grade h3, .galhos h3, .aovivo-paint h3 { font: 900 clamp(26px, 2.6vw, 34px)/1 "Archivo", sans-serif; font-stretch: 66%; text-transform: uppercase; letter-spacing: -.01em; }
.aovivo-paint h3 .luz { display: block; }
.onde-casa { font-size: var(--t1); }
.compra, .onde-cartao { border-radius: 20px; }
.celular { border-radius: 20px; }
.hud-barra { border-radius: 999px; }
.final { padding-bottom: var(--secao); }
.final-titulo { margin: 0; }

.final .super-final { background: var(--luz); opacity: .14; }

/* line-up de 27/10: links do set, artista ainda sem foto */
.set-links { display: flex; flex-wrap: wrap; gap: 0 14px; }
.retrato-vazio { aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--tinta); }
.retrato-vazio span { font: 900 clamp(40px, 5vw, 72px)/1 "Archivo", sans-serif; font-stretch: 64%; text-transform: uppercase; background: var(--luz); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* o ultimo set precisa chegar ao meio da tela para acender */
.sets { padding-bottom: 38vh; }
@media (max-width: 899px) { .sets { padding-bottom: 30vh; } }

/* ---------- 27/10 noite ---------- */
/* o painel escurece junto quando passa por cima de uma faixa preta (a linha do tempo, o Shap, o final) */
.hud-topo.rolou.no-escuro { background: rgba(11, 10, 18, .82); box-shadow: 0 1px 0 rgba(255, 255, 255, .1); color: #fff; }
.hud-topo.no-escuro .hud-sep { color: #B9B2C6; }
.hud-topo.no-escuro .lettering-tinta { background: #fff; }
.hud-topo.no-escuro .pilula-cheia { background: #fff; color: var(--tinta); }
.hud-base.no-escuro { background: rgba(11, 10, 18, .86); color: #B9B2C6; box-shadow: 0 -1px 0 rgba(255, 255, 255, .1); }
.hud-base.no-escuro .hud-barra { background: rgba(255, 255, 255, .16); }
.hud-cantos.no-escuro span { border-color: rgba(255, 255, 255, .35); }
.barra-compra.no-escuro { background: rgba(22, 20, 29, .86); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16), 0 16px 40px -16px #000; }
.barra-compra.no-escuro p { color: #B9B2C6; }
.barra-compra.no-escuro strong { color: #fff; }
.barra-compra.no-escuro .pilula-cheia { background: #fff; color: var(--tinta); }
.hud-topo, .hud-base, .barra-compra, .hud-cantos span { transition: background .3s, color .3s, box-shadow .3s, border-color .3s, transform .35s cubic-bezier(.2, .8, .2, 1); }

/* a onda com mais corpo: da pra ver o balanco mudar de um set pro outro */
.onda { height: 76px; }
/* computador: o bloco fixo inteiro (titulo, relogio, onda, BPM) cabe numa tela de notebook */
@media (min-width: 900px) { .relogio { font-size: clamp(96px, 10.5vw, 168px); } }
@media (min-width: 900px) and (max-height: 820px) { .noite-fixo .noite-linha { display: none; } }

/* celular: relogio e BPM numa linha so, para a lista ter espaco */
@media (max-width: 899px) {
  .noite-fixo { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 16px; padding: 8px var(--margem) 10px; }
  .noite-fixo .relogio { grid-row: 1; font-size: 64px; }
  .noite-fixo .medidor { grid-row: 1; margin: 0 0 6px; min-width: 0; }
  .noite-fixo .onda { height: 34px; }
  .noite-fixo .medidor-txt { margin-top: 4px; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; }
  .noite-fixo .medidor-txt span:first-child { font-size: 26px; }
  .noite-fixo .medidor-txt span:last-child { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- 5b. Shap Paint ---------- */
.paint { position: relative; overflow: hidden; overflow: clip; isolation: isolate; background: var(--tinta); color: #fff; padding: var(--secao) var(--miolo); }
.paint .super-paint { width: 520px; right: -140px; top: -80px; opacity: .16; transform: rotate(-14deg); }
.paint-grade { position: relative; display: grid; gap: 40px; align-items: center; }
.paint-mural { margin: 0; }
.paint-mural img { width: 100%; height: auto; border-radius: 20px; box-shadow: 0 40px 80px -30px rgba(138, 63, 252, .55); }
.paint-mural figcaption { margin-top: 14px; font: 400 13px/1.5 var(--mono); color: #B9B2C6; }
.paint-mural figcaption a { color: #fff; font-weight: 700; text-decoration: none; }
.paint-mural figcaption a:hover { color: var(--magenta); }
.paint-texto > p:not(.micro):not(.arrobas) { color: #DAD5E3; margin-top: 18px; max-width: 46ch; }
.paint-texto .paint-lead { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; color: #fff; }
.paint-ficha { display: grid; gap: 0; margin: 28px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 46ch; }
.paint-ficha div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.paint-ficha dt { font: 600 12px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #B9B2C6; }
.paint-ficha dd { margin: 0; font-weight: 700; }
.arrobas-claro a { color: #fff; }
.arrobas-claro a:hover { color: var(--magenta); }
@media (min-width: 900px) { .paint-grade { grid-template-columns: 1fr 1fr; gap: 72px; } }

/* capa: o ingresso acessivel em destaque, a meia social logo abaixo */
.hero-preco strong { display: block; font-size: 20px; }
.hero-meia { display: table; margin: 8px auto 8px; padding: 5px 12px; border-radius: 999px; background: var(--tinta); color: #fff; font-weight: 700; font-size: 14px; }

/* Ibejiz no celular: o recorte largo segura os rostos, que ficam no alto da foto */
.retratos li:first-child img { object-position: 50% 12%; }

/* contador: restam / total (349/350) */
.contador-de { font-size: 20px; font-weight: 900; color: var(--tinta); margin-right: 2px; }

/* taxa de servico (27/10): sempre visivel junto do preco */
.hero-taxa { font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.precos-taxa { display: block; font: 600 12px/1.3 "Archivo", sans-serif; color: var(--tinta-2); text-align: right; margin-top: 2px; }
.qtd-total small { display: block; font-size: 12px; color: var(--tinta-2); text-align: right; }

/* ---------- 28/10: discos de vinil girando nas laterais da capa ---------- */
@keyframes gira { to { transform: rotate(360deg); } }
.vinil { position: absolute; z-index: 1; top: 50%; width: min(38vw, 80vh, 640px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  filter: drop-shadow(0 30px 50px rgba(11, 10, 18, .35)); }
.vinil-esq { left: 0; transform: translate(-50%, -50%); }
.vinil-dir { right: 0; transform: translate(50%, -46%); }
/* o disco: sulcos finos, a borda lisa e as faixas entre as musicas */
.vinil-disco { position: absolute; inset: 0; border-radius: 50%; animation: gira 1.8s linear infinite;
  background:
    radial-gradient(circle, transparent 0 63%, rgba(255, 255, 255, .07) 63.3% 63.9%, transparent 64.2% 76%, rgba(255, 255, 255, .07) 76.3% 76.9%, transparent 77.2% 88%, rgba(255, 255, 255, .06) 88.3% 88.8%, transparent 89%),
    repeating-radial-gradient(circle, #121116 0 1.5px, #1d1c23 1.5px 2.6px, #0d0c11 2.6px 3.4px),
    #111015;
  box-shadow: inset 0 0 0 3px #08070b, inset 0 0 0 9px #17161c; }
.vinil-dir .vinil-disco { animation-duration: 1.35s; }   /* o lado B toca no 45 */
/* o brilho da luz fica parado enquanto o disco gira: e isso que da a sensacao de vinil de verdade */
.vinil::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 18deg, rgba(255, 255, 255, .16) 32deg, transparent 52deg 198deg, rgba(255, 255, 255, .12) 212deg, transparent 232deg 360deg);
  mix-blend-mode: screen; }
/* o selo no meio, com o GN e o furo */
.vinil-selo { position: absolute; inset: 34%; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: var(--luz); box-shadow: 0 0 0 4px rgba(0, 0, 0, .35); }
.vinil-dir .vinil-selo { background: linear-gradient(200deg, #F1EBDD, #E4DACB); }
.vinil-selo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: #F4F2F7; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.vinil-gn { position: absolute; top: 16%; left: 50%; width: 38%; aspect-ratio: 1; transform: translateX(-50%); background: #fff;
  -webkit-mask: url("../assets/logos/gn.svg") center / contain no-repeat; mask: url("../assets/logos/gn.svg") center / contain no-repeat; }
.vinil-dir .vinil-gn { background: var(--tinta); }
.vinil-txt { position: absolute; bottom: 18%; left: 0; right: 0; text-align: center; font: 700 clamp(8px, .75vw, 11px)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.vinil-dir .vinil-txt { color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .vinil-disco { animation: none; } }
.vinil-cel { display: none; }
@media (max-width: 899px) {
  /* celular: so o disco creme, inteiro e centralizado abaixo da frase, com a sombra no chao */
  .vinil-esq, .vinil-dir { display: none; }
  .vinil-cel { display: block; position: relative; top: auto; left: auto; width: min(64vw, 280px); margin: 10px auto 18px; transform: none;
    filter: drop-shadow(0 22px 26px rgba(11, 10, 18, .32)) drop-shadow(0 4px 6px rgba(11, 10, 18, .2)); }
  .vinil-cel .vinil-selo { background: linear-gradient(200deg, #F1EBDD, #E4DACB); }
  .vinil-cel .vinil-gn { background: var(--tinta); }
  .vinil-cel .vinil-txt { color: var(--tinta); font-size: 7px; }
  .vinil-cel .vinil-disco { animation-duration: 1.8s; }
}

/* as fotos das tiras foram pro rolê, numa tira de cabine na horizontal */
.tira-faixa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; background: #fff; transform: rotate(-1.2deg);
  box-shadow: 0 1px 0 var(--linha), 0 24px 50px -24px rgba(11, 10, 18, .45); }
.tira-faixa img { width: 100%; aspect-ratio: 520 / 680; object-fit: cover; }
@media (min-width: 900px) { .tira-faixa { grid-column: 1 / 13; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 10px; } }
/* celular: uma linha so de fotos, pra chegar mais rapido no line-up */
@media (max-width: 899px) { .tira-faixa img:nth-child(n + 4) { display: none; } }

/* selo: Vol. 1 / Ritmos de Soul em duas linhas */
.vinil-txt { bottom: 17%; font: 800 clamp(9px, .9vw, 13px)/1.15 "Archivo", sans-serif; font-stretch: 70%; letter-spacing: .06em; }
@media (max-width: 899px) { .vinil-cel .vinil-txt { font-size: 8.5px; } }

/* ---------- 28/10: bilheteria. Cara de ingresso de show, fundo noite, nada de vitrine ---------- */
.bilheteria { position: relative; background: var(--tinta); color: #fff; padding: var(--secao) var(--miolo); overflow: hidden; overflow: clip; }
.bilheteria::before { content: ""; position: absolute; inset: auto -20% -40% auto; width: 70vw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(138, 63, 252, .22), transparent 62%); pointer-events: none; }
.bil-grade { position: relative; display: grid; gap: 44px; align-items: start; }
.bil-quando { margin-top: 14px; font: 600 13px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #B9B2C6; }

/* os ingressos: corpo + canhoto, picote tracejado e as duas mordidas do picote */
.tickets { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 14px; }
.ticket { --canhoto: 128px; position: relative; display: grid; grid-template-columns: 1fr var(--canhoto); min-height: 112px; background: #17151F;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); border-radius: 14px;
  -webkit-mask: radial-gradient(circle 11px at calc(100% - var(--canhoto)) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 11px at calc(100% - var(--canhoto)) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 11px at calc(100% - var(--canhoto)) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 11px at calc(100% - var(--canhoto)) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.ticket-corpo { padding: 20px 22px; display: grid; align-content: center; gap: 6px; }
.ticket-tipo { font: 900 clamp(26px, 2.6vw, 34px)/.95 "Archivo", sans-serif; font-stretch: 66%; text-transform: uppercase; }
.ticket-info { font-size: 14px; line-height: 1.5; color: #B9B2C6; }
.ticket-canhoto { display: grid; align-content: center; justify-items: center; gap: 4px; padding: 14px 10px; border-left: 2px dashed rgba(255, 255, 255, .18); text-align: center; }
.ticket-preco { font: 900 clamp(34px, 3.4vw, 44px)/1 "Archivo", sans-serif; font-stretch: 70%; font-variant-numeric: tabular-nums; }
.ticket-taxa { font: 600 11px/1.3 var(--mono); letter-spacing: .06em; color: #B9B2C6; }
.ticket-on { background: linear-gradient(100deg, rgba(138, 63, 252, .2), rgba(255, 61, 168, .14)), #17151F; box-shadow: inset 0 0 0 1px rgba(255, 61, 168, .45); }
.ticket-on .ticket-preco { background: var(--luz); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ticket:not(.ticket-on) { opacity: .72; }

/* quantos restam: numero de serie, discreto */
.bilheteria .contador { margin-top: 24px; display: flex; align-items: center; gap: 14px; }
.bilheteria .contador p { margin: 0; font: 600 13px/1 var(--mono); letter-spacing: .12em; color: #B9B2C6; white-space: nowrap; }
.bilheteria .contador p span:first-child { color: #fff; }
.bilheteria .contador-barra { flex: 1; height: 3px; background: rgba(255, 255, 255, .12); }

/* o formulario vira o ingresso que a pessoa preenche */
.bilheteria .compra { background: #F4F1EA; color: var(--tinta); border-radius: 14px; padding: 0 clamp(20px, 3vw, 32px) clamp(22px, 3vw, 30px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.compra-topo { display: flex; justify-content: space-between; gap: 12px; margin: 0 calc(clamp(20px, 3vw, 32px) * -1) 22px; padding: 14px clamp(20px, 3vw, 32px);
  border-bottom: 2px dashed rgba(11, 10, 18, .22); font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.compra-topo span:first-child { color: var(--tinta); }
.bilheteria .campo input { min-height: 50px; padding: 0 2px; border: 0; border-bottom: 1.5px solid rgba(11, 10, 18, .25); border-radius: 0; background: transparent; }
.bilheteria .campo input:focus { box-shadow: none; border-color: var(--roxo); }
.bilheteria .qtd button { background: transparent; border-color: rgba(11, 10, 18, .25); }
.bilheteria .qtd-total strong { font: 900 34px/1 "Archivo", sans-serif; font-stretch: 70%; }
.bilheteria .marca { font-size: 14px; }
.bilheteria .compra-legal { text-align: center; }
@media (min-width: 900px) { .bil-grade { grid-template-columns: 1fr minmax(380px, 460px); gap: 72px; } .bilheteria .compra { position: sticky; top: 100px; } }
@media (max-width: 899px) { .ticket { --canhoto: 104px; min-height: 100px; } .ticket-corpo { padding: 16px 16px; } }
.ticket-taxa { white-space: nowrap; font-size: 10px; }
@media (max-width: 899px) { .ticket-taxa { letter-spacing: 0; font-size: 9.5px; } }

/* final: titulo e botoes por cima do GN gigante (o GN e posicionado e passava na frente) */
.final > :not(.super) { position: relative; z-index: 1; }

/* ============ 29/10/2026: o disco responde ao mouse e a rolagem (o JS fica no fim do v3.js) ============ */
/* titulos: passada de bloco. O texto e revelado da esquerda pra direita por recorte; sem JS ou com movimento reduzido, nada muda */
.js .titulo-bloco.passada { clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.7, 0, .2, 1); }
.js .titulo-bloco.passada.passou { clip-path: inset(0 0 0 0); }

/* o disquinho do painel de baixo gira com o progresso da noite */
.hud-disco { width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: radial-gradient(circle, currentColor 0 1.5px, var(--magenta) 2px 4.5px, transparent 5px), repeating-radial-gradient(circle, #19171F 0 1px, #2C2A33 1.5px 2px); box-shadow: 0 0 0 1px rgba(11, 10, 18, .2); }
.hud-base.no-escuro .hud-disco { box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }

/* agulha: disco de vinil pequeno que segue o mouse; anel quando pousa sobre o que se clica */
.agulha { position: fixed; left: 0; top: 0; z-index: 90; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
.agulha.on { opacity: 1; }
.agulha.some { opacity: 0; }
.agulha span { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle, #F4F2F7 0 1.5px, var(--magenta) 2px 6px, transparent 6.5px), repeating-radial-gradient(circle, #131118 0 1px, #2E2B36 1.6px 2.4px);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85), 0 6px 18px -6px rgba(11, 10, 18, .6);
  transition: width .3s cubic-bezier(.2, .8, .2, 1), height .3s cubic-bezier(.2, .8, .2, 1), left .3s cubic-bezier(.2, .8, .2, 1), top .3s cubic-bezier(.2, .8, .2, 1), background-color .3s, box-shadow .3s; }
.agulha.pousa span { left: -30px; top: -30px; width: 60px; height: 60px; background: transparent; box-shadow: inset 0 0 0 2px var(--magenta), 0 0 0 1.5px rgba(255, 255, 255, .7); }

/* line-up: o retrato de quem toca segue o mouse */
.set-foto { position: fixed; left: 0; top: 0; z-index: 50; width: 0; height: 0; margin: 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
/* a moldura magenta fica no span; o filtro P&B so na foto (filtro no mesmo elemento descolore a moldura) */
.set-foto span { position: absolute; right: 26px; top: -120px; width: 192px; aspect-ratio: 4 / 5; outline: 5px solid var(--magenta); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8);
  transform: scale(.86); transform-origin: 100% 50%; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.set-foto img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.set-foto.on { opacity: 1; }
.set-foto.on span { transform: scale(1); }

/* retratos: capa de disco na mao, inclina ate 6 graus e o brilho do vinil corre com o mouse */
.retrato-capa { position: relative; overflow: hidden; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.retrato-capa:hover { transition-duration: .12s; }
.retrato-capa img { display: block; }
.retrato-brilho { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
  background: radial-gradient(60% 60% at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, .7), transparent 60%), conic-gradient(from 0deg at var(--bx, 50%) var(--by, 50%), transparent, rgba(255, 61, 168, .35), transparent 30%, rgba(138, 63, 252, .3), transparent 60%); }
.retrato-capa:hover .retrato-brilho { opacity: 1; }

/* CTAs: posicao FIXA (pedido do usuario, 29/10: "nao quero que mexa no posicionamento, apenas na interacao de cores com o hover").
   No hover, o degrade azul -> roxo da marca enche a pilula da esquerda pra direita e o texto vira branco
   (branco sobre #2F5BFF 5,3:1 e sobre #8A3FFC 6,3:1). !important so no fundo: as variantes .final, .no-escuro e vidro usam o atalho background */
.pilula:hover { transform: none; }
.pilula { background-image: linear-gradient(100deg, var(--azul), var(--roxo)) !important; background-repeat: no-repeat !important; background-position: 0 0 !important; background-size: 0% 100% !important;
  transition: background-size .5s cubic-bezier(.7, 0, .2, 1), color .25s, box-shadow .3s; }
.pilula:hover, .pilula:focus-visible { background-size: 100% 100% !important; color: #fff !important; box-shadow: 0 12px 32px -12px rgba(47, 91, 255, .8); }
.pilula-cheia::before { transition: background .25s, box-shadow .25s; }
.pilula:hover::before, .pilula:focus-visible::before { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
.pilula[disabled]:hover { background-size: 0% 100% !important; color: inherit !important; }

@media (prefers-reduced-motion: reduce) { .agulha, .set-foto, .retrato-brilho { display: none; } .js .titulo-bloco.passada { clip-path: none; } }

/* ============ 29/10/2026, rodada 2: animacao e interacao das dobras ============ */
/* reveal: entra E sai (rearma), com desfoque e cascata de 70 ms entre irmaos da mesma grade */
.js .revela { filter: blur(6px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1), filter .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .revela.visivel { filter: none; }

/* troca de faixa no painel de baixo: o nome sobe como letreiro */
@keyframes faixa { from { clip-path: inset(0 100% 0 0); transform: translateY(6px); opacity: .2; } to { clip-path: inset(0 0 0 0); transform: none; opacity: 1; } }
.hud-base [data-hud-cena].troca { animation: faixa .55s cubic-bezier(.2, .8, .2, 1); }

/* retratos: a foto corre dentro da moldura com a rolagem */
.retrato-capa img { transform: translateY(var(--py, 0%)) scale(1.1); transition: filter .4s, transform .2s linear; }

@media (prefers-reduced-motion: reduce) { .js .revela { filter: none; transition-delay: 0s; } }

/* ============ 29/10/2026, rodada 3 ============ */
/* logo do hero: cromo suave em vez das faixas duras de --cromo (que segue valendo pro relogio e pro final).
   Tres camadas: um brilho que atravessa devagar, um veu do degrade da marca que deriva, e o cromo de transicoes longas */
:root { --cromo-suave: linear-gradient(180deg, #F6F5FA 0%, #D3D0DD 26%, #8E89A0 46%, #4A4558 54%, #9A95AE 66%, #DAD7E4 84%, #F3F1F8 100%); }
.lettering-cromo {
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .9) 48%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(90deg, rgba(47, 91, 255, .28), rgba(138, 63, 252, .22) 35%, rgba(255, 61, 168, .26) 65%, rgba(47, 91, 255, .28)),
    var(--cromo-suave);
  background-size: 260% 100%, 200% 100%, 100% 100%;
  background-repeat: no-repeat, repeat-x, no-repeat;
  animation: cromo 9s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes cromo {
  0% { background-position: 140% 0, 0% 0, 0 0; }
  55% { background-position: -40% 0, 100% 0, 0 0; }
  100% { background-position: -40% 0, 200% 0, 0 0; } }
.lettering-cromo.pausa { animation-play-state: paused; }

/* vinil na mao: os discos do hero recebem clique (o centro do hero deixa o clique passar, so os filhos dele pegam) */
.hero-centro { pointer-events: none; }
.hero-centro > * { pointer-events: auto; }
.vinil { pointer-events: auto; cursor: grab; touch-action: pan-y; }
.vinil.segura { cursor: grabbing; }
.agulha.segura span { left: -9px; top: -9px; width: 18px; height: 18px; background: var(--magenta); box-shadow: 0 0 0 4px rgba(255, 61, 168, .3), 0 0 0 1.5px #fff; }

/* artistas: estilo e proposta em destaque sobre a foto; o nome vem logo abaixo (o h3 e o primeiro no DOM, a foto sobe por ordem visual) */
.retrato { display: grid; align-content: start; }
.retrato > h3 { order: 2; }
.retrato-foto { order: 1; position: relative; margin: 0; overflow: hidden; }
.retrato > .arrobas { order: 3; }
.retrato-selo { position: absolute; z-index: 3; top: 12px; left: 12px; padding: 7px 11px; border-radius: 999px; background: var(--tinta); color: #fff; font: 600 11px/1 var(--mono); letter-spacing: .08em; pointer-events: none; }
.retrato-sobre { display: block; }
.retrato-estilo { display: block; font: 800 15px/1.25 "Archivo", sans-serif; color: var(--tinta); margin-top: 10px; }
.retrato-proposta { display: block; color: var(--tinta-2); font-size: 15px; margin-top: 4px; }
@media (hover: hover) and (pointer: fine) {
  .retrato-sobre { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 64px 18px 18px; color: #fff; pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 10, 18, 0), rgba(11, 10, 18, .9) 52px, rgba(11, 10, 18, .94)); }
  .retrato-estilo { color: #fff; margin: 0; font: 900 clamp(22px, 2vw, 30px)/1 "Archivo", sans-serif; font-stretch: 66%; text-transform: uppercase; letter-spacing: -.01em; }
  .retrato-proposta { color: #E7E3EE; max-height: 0; overflow: hidden; opacity: 0; margin: 0; transition: max-height .45s cubic-bezier(.2, .8, .2, 1), opacity .3s, margin .45s; }
  .retrato:hover .retrato-proposta, .retrato:focus-within .retrato-proposta { max-height: 7em; opacity: 1; margin-top: 8px; }
  .retrato:hover .retrato-estilo { background: var(--luz); -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* o que o groove faz com o corpo: o video do Bryan e do Kell cresce de story a palco com a rolagem (so transform) */
.corpo-palco { display: grid; justify-items: center; gap: 18px; }
.corpo-video { position: relative; width: min(78vw, 400px); aspect-ratio: 9 / 16; padding: 3px; border-radius: 20px; background: var(--luz);
  transform: scale(var(--cs, .8)) rotate(var(--cr, -3deg)); transform-origin: 50% 70%; box-shadow: 0 40px 80px -30px rgba(138, 63, 252, .6); will-change: transform; }
.corpo-video video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 17px; background: var(--tinta); }
.corpo-video .celular-tag { bottom: auto; top: 18px; left: 18px; color: #fff; }

/* o role: tres janelas de story com a Sixx House filmada, moldura no degrade da marca; a janela em foco cresce, as outras escurecem */
.janelas { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 28px); margin-top: clamp(28px, 4vw, 56px); }
.janela { margin: 0; min-width: 0; aspect-ratio: 9 / 16; padding: 3px; border-radius: 20px; background: var(--luz);
  transform: rotate(calc(var(--jb, 0deg) + var(--jv, 0) * 1deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .4s; }
.janela:nth-child(1) { --jb: -2.5deg; }
.janela:nth-child(2) { --jb: 1.5deg; margin-top: 8%; }
.janela:nth-child(3) { --jb: -1deg; }
.janela video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 17px; background: var(--tinta); }
@media (hover: hover) and (pointer: fine) {
  .janelas:hover .janela { filter: brightness(.5) saturate(.6); }
  .janelas .janela:hover { filter: none; transform: rotate(0deg) scale(1.05); }
}
@media (min-width: 900px) { .janelas { grid-column: 1 / 13; } }

/* onde e: a lona da Sixx House em video por cima da foto; o cartao perde o desfoque (repintava a cada quadro do video) */
.onde-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.onde-cartao { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .92); }

/* shap pinta a noite: o mural nasce em cinza e a cor aparece no jato de spray do mouse (canvas por cima; so com ponteiro fino) */
.paint-mural { position: relative; }
.spray-tela { position: absolute; left: 0; top: 0; width: 100%; border-radius: 20px; pointer-events: none; transition: opacity 1.4s; }
.spray-tela.limpa { opacity: 0; }

/* ingressos em destaque: titulo de cartaz, o ingresso ativo vira o heroi com brilho holografico, picote que cede no hover */
.ticket-on { --canhoto: 156px; min-height: 156px; }
.ticket-on .ticket-tipo { font-size: clamp(34px, 3.4vw, 48px); }
.ticket-on .ticket-preco { font-size: clamp(46px, 4.6vw, 64px); }
.ticket-on::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .9;
  background: radial-gradient(38% 70% at var(--hx, 30%) var(--hy, 50%), rgba(255, 255, 255, .18), transparent 70%),
              linear-gradient(115deg, transparent 25%, rgba(47, 91, 255, .32) 42%, rgba(138, 63, 252, .3) 52%, rgba(255, 61, 168, .32) 62%, transparent 78%);
  background-size: 100% 100%, 240% 100%; background-position: 0 0, var(--hp, 60%) 0; transition: background-position .5s cubic-bezier(.2, .8, .2, 1); }
.ticket-canhoto { transition: transform .45s cubic-bezier(.2, .8, .2, 1); transform-origin: 0 50%; }
@media (hover: hover) and (pointer: fine) { .ticket-on:hover .ticket-canhoto { transform: translateX(5px) rotate(1.5deg); } }
.bilheteria .compra { transition: box-shadow .35s; }
.bilheteria .compra:focus-within { box-shadow: 0 0 0 2px var(--roxo), 0 0 0 7px rgba(138, 63, 252, .22), 0 40px 90px -30px rgba(138, 63, 252, .8); }
@media (max-width: 899px) { .ticket-on { --canhoto: 116px; min-height: 124px; } }

/* entrada da pagina (primeira visita da sessao, decidida no <head> antes do primeiro quadro):
   o vinil cai e gira no papel branco, a capa sobe e o hero entra. So CSS: se o JS falhar, a camada some sozinha em 1,4 s */
html.entrada body::before { content: ""; position: fixed; inset: 0; z-index: 200; background: var(--papel); pointer-events: none; animation: entrada-capa 1.4s cubic-bezier(.7, 0, .2, 1) forwards; }
html.entrada body::after { content: ""; position: fixed; left: 50%; top: 50%; z-index: 201; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #F4F2F7 0 4px, var(--magenta) 5px 25%, transparent 26%), repeating-radial-gradient(circle, #131118 0 2px, #2E2B36 3px 4px);
  box-shadow: 0 30px 60px -20px rgba(11, 10, 18, .5); animation: entrada-disco 1.4s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes entrada-capa { 0%, 58% { transform: none; } 100% { transform: translateY(-101%); } }
@keyframes entrada-disco { 0% { transform: scale(.35) rotate(0deg); opacity: 0; } 22% { transform: scale(1) rotate(80deg); opacity: 1; } 58% { transform: scale(1) rotate(420deg); opacity: 1; } 78% { transform: scale(1.5) rotate(520deg); opacity: 0; } 100% { opacity: 0; } }
@keyframes entra-hero { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
html.entrada .hero-centro > * { animation: entra-hero .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: .78s; }
html.entrada .hero-centro > :nth-child(2) { animation-delay: .86s; }
html.entrada .hero-centro > :nth-child(3) { animation-delay: .94s; }
html.entrada .hero-centro > :nth-child(4) { animation-delay: 1.02s; }
html.entrada .hero-centro > :nth-child(n + 5) { animation-delay: 1.1s; }
@keyframes vinil-esq { from { transform: translate(-100%, -50%) rotate(-30deg); } to { transform: translate(-50%, -50%); } }
@keyframes vinil-dir { from { transform: translate(100%, -46%) rotate(30deg); } to { transform: translate(50%, -46%); } }
html.entrada .vinil-esq { animation: vinil-esq 1.1s .72s cubic-bezier(.2, .8, .2, 1) both; }
html.entrada .vinil-dir { animation: vinil-dir 1.1s .72s cubic-bezier(.2, .8, .2, 1) both; }

/* troca de faixa: a capa no degrade varre a tela com o nome da faixa, a pagina salta por baixo e a capa sai */
.troca-disco { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: var(--luz); color: #fff; pointer-events: none; clip-path: inset(0 0 0 100%); }
.troca-disco b { font: 900 clamp(48px, 8vw, 120px)/.9 "Archivo", sans-serif; font-stretch: 66%; text-transform: uppercase; letter-spacing: -.02em; text-align: center; }
.troca-disco small { display: block; font: 700 14px/1 var(--mono); letter-spacing: .14em; margin-bottom: 16px; }

/* saida dos elementos: ao subir pelo topo da tela, o item esmaece, desfoca e sobe junto com a rolagem (critico r2) */
.js .revela.saindo { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .corpo-video, .janela { transform: none; }
  html.entrada body::before, html.entrada body::after { display: none; }
}

/* critico r3: com o tracking negativo da grotesca condensada em caixa alta, o espaco entre palavras ficava do tamanho
   do espaco entre letras ("SHAPPINTA ANOITE", "HIPHOPE SOUL"). Vao entre palavras devolvido em todo titulo em caixa alta */
.titulo-bloco, .hero-vol, .retrato-estilo, .set h3, .retrato h3, .tem-grade h3, .galhos h3, .aovivo-paint h3, .ticket-tipo, .final-titulo, .onde-casa, .fita span { word-spacing: .16em; }

/* ============ 29/10/2026, rodada 4 ============ */
/* rodape: o credito do site, em menor destaque, numa linha propria */
.rodape-credito { flex-basis: 100%; margin: 0; font: 400 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--tinta-2); }
.rodape .rodape-credito a { min-height: 44px; font-weight: 600; color: var(--tinta-2); text-decoration: underline; text-decoration-color: rgba(94, 88, 107, .35); text-underline-offset: 3px; }
.rodape .rodape-credito a:hover { color: var(--roxo); }

/* shap pinta a noite: cursor de lata de spray sobre o mural (bico no ponto quente) e o aviso do gesto */
.paint-mural img { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.paint-mural.spray-on img { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(-35 16 16)'%3E%3Crect x='11' y='10' width='10' height='18' rx='2.5' fill='%230B0A12' stroke='%23fff' stroke-width='1.5'/%3E%3Crect x='13' y='6' width='6' height='5' rx='1' fill='%23FF3DA8' stroke='%23fff' stroke-width='1.2'/%3E%3Crect x='15' y='3.5' width='2' height='3' fill='%23fff'/%3E%3C/g%3E%3Ccircle cx='4' cy='5' r='1.4' fill='%23FF3DA8'/%3E%3Ccircle cx='7' cy='2.2' r='1' fill='%238A3FFC'/%3E%3Ccircle cx='2.4' cy='8.6' r='1' fill='%232F5BFF'/%3E%3C/svg%3E") 6 5, crosshair; }
.spray-aviso { position: absolute; z-index: 2; left: 50%; top: 18px; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 16px 10px 12px; border-radius: 999px;
  background: rgba(11, 10, 18, .88); color: #fff; font: 700 14px/1.2 "Archivo", sans-serif; white-space: nowrap; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 12px 30px -10px rgba(11, 10, 18, .7); transform: translateX(-50%); transition: opacity .4s, transform .4s cubic-bezier(.2, .8, .2, 1);
  animation: aviso-pulsa 2.4s ease-in-out infinite; }
.spray-aviso.sai { opacity: 0; transform: translate(-50%, -8px); animation: none; }
.spray-aviso-lata { width: 18px; height: 22px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Crect x='3' y='7' width='12' height='14' rx='2.5' fill='%23fff'/%3E%3Crect x='6' y='3' width='6' height='4.5' rx='1' fill='%23FF3DA8'/%3E%3Crect x='8' y='0.5' width='2' height='3' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes aviso-pulsa { 50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 0 0 7px rgba(255, 61, 168, .22), 0 12px 30px -10px rgba(11, 10, 18, .7); } }


/* quem ta junto: o cartaz de apoio escrito como line-up. A Vizion Connect e o headliner (nome enorme em tinta, acende no
   degrade da marca onde o mouse passa); os outros sao o support, numa linha de tres, com o degrade varrendo no hover */
.apoio .marcas { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--linha); }
.apoio .marcas li { border-right: 0; }
.apoio .marca { text-align: left; place-items: initial; min-height: 0; position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 26px 6px; border-bottom: 1px solid var(--linha); }
.apoio .marca::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--azul), var(--roxo)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s cubic-bezier(.7, 0, .2, 1); }
.apoio .marca-nome { font: 900 clamp(26px, 2.8vw, 40px)/.95 "Archivo", sans-serif; font-stretch: 66%; text-transform: uppercase; letter-spacing: -.01em; word-spacing: .16em; transition: color .3s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.apoio .marca-disco { width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: radial-gradient(circle, #F4F2F7 0 2px, var(--magenta) 2.5px 30%, transparent 31%), repeating-radial-gradient(circle, #131118 0 1.5px, #2E2B36 2px 3px);
  animation: gira 1.8s linear infinite paused; }
@media (hover: hover) and (pointer: fine) {
  .apoio .marca:not(.marca-head):hover::before { transform: scaleX(1); }
  .apoio .marca:not(.marca-head):hover { color: #fff; }
  .apoio .marca:not(.marca-head):hover .marca-nome { transform: translateX(8px); }
  .apoio .marca:not(.marca-head):hover .marca-disco { animation-play-state: running; }
}
.apoio .marca-head { padding: clamp(26px, 4vw, 54px) 0; }
.apoio .marca-head .marca-nome { font-size: clamp(54px, 10.5vw, 156px); line-height: .84; letter-spacing: -.02em; color: transparent;
  background: radial-gradient(260px circle at var(--mx, 22%) var(--my, 55%), var(--magenta), var(--roxo) 38%, rgba(47, 91, 255, 0) 72%), linear-gradient(var(--tinta), var(--tinta));
  -webkit-background-clip: text; background-clip: text; }
.js .apoio .marca-head.revela .marca-nome { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1) .1s; }
.js .apoio .marca-head.revela.visivel .marca-nome { clip-path: inset(0 0 0 0); }
.apoio .marcas-vaga { padding: 22px 6px; }
@media (min-width: 900px) {
  .apoio .marcas { grid-template-columns: repeat(3, 1fr); }
  .apoio .marca-head, .apoio .marcas-vaga { grid-column: 1 / -1; }
  .apoio .marca:not(.marca-head) { padding-inline: 22px; }
  .apoio .marca:nth-child(3), .apoio .marca:nth-child(4) { border-left: 1px solid var(--linha); }
}

@media (prefers-reduced-motion: reduce) { .spray-aviso { animation: none; } .js .apoio .marca-head.revela .marca-nome { clip-path: none; } }

/* ============ rodada 5 ============ */
/* 8. toda dobra tem fundo proprio e opaco: o recorte da capa nunca mostra uma faixa de outra cor (o body acompanha a vizinha, no JS) */
.hero, .role, .artistas, .apoio, .duvidas { background-color: var(--papel); }
.onde { background-color: var(--tinta); }
html { scroll-padding-bottom: 96px; }
/* o disquinho do painel de baixo entra pelo JS: a linha ja nasce com a altura dele (CLS) */
.hud-agulha { min-height: 14px; }

/* 10. hero em blocos: marca, data de cartaz, frase com medida, ingresso com canhoto (os CTAs), local. Ritmo de 8 px */
.hero { padding: 88px var(--margem) 104px; }
.hero-centro { gap: 0; max-width: 880px; }
.hero h1 { gap: 8px; }
.hero-quando { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px 24px; width: min(100%, 760px); margin-top: 32px; padding: 16px 0;
  border-block: 1.5px solid var(--tinta); font: 600 clamp(16px, 1.5vw, 19px)/1.3 "Archivo", sans-serif; }
.hero-dia { font: 900 clamp(22px, 2.3vw, 30px)/1 "Archivo", sans-serif; font-stretch: 70%; letter-spacing: -.005em; word-spacing: .12em; }
.hero-hora { color: var(--tinta-2); }
.hero-frase { margin-top: 24px; max-width: 46ch; font-size: 17px; }
.hero-compra { --canhoto: 328px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--canhoto); width: min(100%, 760px); margin-top: 32px; text-align: left;
  background: var(--papel-2); border-radius: 20px; box-shadow: inset 0 0 0 1.5px var(--linha);
  -webkit-mask: radial-gradient(circle 12px at calc(100% - var(--canhoto)) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 12px at calc(100% - var(--canhoto)) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 12px at calc(100% - var(--canhoto)) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 12px at calc(100% - var(--canhoto)) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.hero-preco { display: grid; align-content: center; justify-items: start; gap: 8px; max-width: none; padding: 24px 32px; font-size: 15px; line-height: 1.35; }
.hero-preco strong { font-size: clamp(20px, 1.7vw, 22px); line-height: 1.1; }
.hero-taxa { margin-top: -4px; }
.hero-meia { display: inline-block; margin: 0; font-size: 13px; }
.hero-inteira { font-weight: 700; color: var(--tinta); }
.hero-restam { margin: 0; }
.hero-compra .hero-acoes { display: grid; align-content: center; gap: 8px; padding: 24px; border-left: 2px dashed rgba(11, 10, 18, .2); }
.hero-compra .pilula { width: 100%; padding: 0 20px; }
.chip-local { margin-top: 24px; }
/* o clique so pega no que e clicavel: blocos largos nao engolem o clique dos vinis */
.hero-centro > * { pointer-events: none; }
.hero-centro a, .hero-centro .vinil { pointer-events: auto; }
/* entrada em cascata por classe (o .vinil-cel tambem e filho e bagunçava a contagem por posicao) */
html.entrada .hero-centro > h1 { animation-delay: .78s; }
html.entrada .hero-centro > .hero-quando { animation-delay: .86s; }
html.entrada .hero-centro > .hero-frase { animation-delay: .94s; }
html.entrada .hero-centro > .vinil-cel { animation-delay: .98s; }
html.entrada .hero-centro > .hero-compra { animation-delay: 1.02s; }
html.entrada .hero-centro > .chip-local { animation-delay: 1.1s; }
@media (max-width: 899px) {
  .hero { padding: 80px var(--margem) 96px; }
  .hero-quando { flex-direction: column; align-items: center; gap: 8px; margin-top: 24px; }
  .hero-frase { margin-top: 16px; }
  .hero-compra { grid-template-columns: 1fr; margin-top: 8px; -webkit-mask: none; mask: none; }
  .hero-preco { padding: 24px; }
  .hero-compra .hero-acoes { border-left: 0; border-top: 2px dashed rgba(11, 10, 18, .2); padding: 16px 24px 24px; }
}

/* 7. fitas: o trilho e clonado no JS ate a metade cobrir a fita (1,1x a tela, mais as pontas da rotacao); os clones escrevem por atributo */
.fita { left: -8vw; right: -8vw; }
.fita span[data-t]::before { content: attr(data-t); }

/* 1. onde e: a lona REAL da Sixx House em video, em duotone da marca (P&B por baixo, degrade por multiplicacao, nevoa nas bordas) */
.onde-fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--tinta); }
.onde-fundo .onde-video { z-index: 0; filter: grayscale(1) contrast(1.2) brightness(1.08); }
.onde-fundo::before { content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: multiply;
  background: linear-gradient(115deg, var(--azul) 0%, var(--roxo) 52%, var(--magenta) 100%); }
.onde-fundo::after { content: ""; position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(120% 95% at 62% 38%, transparent 42%, rgba(11, 10, 18, .78) 100%), linear-gradient(0deg, rgba(11, 10, 18, .6), transparent 45%); }

/* 2. quem ta junto: a Vizion nunca passa do titulo da dobra (--t2). O destaque e o cartao: tinta, moldura fina no degrade, nome que acende sob o mouse */
.apoio .marca-head { margin-bottom: 16px; padding: clamp(32px, 4vw, 56px) clamp(24px, 3.5vw, 48px); border-radius: 20px; border-bottom: 0; background: var(--tinta); color: #fff; }
.apoio .marca-head::after { content: ""; position: absolute; inset: 0; z-index: 1; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, var(--azul), var(--roxo) 50%, var(--magenta));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.apoio .marca-head .marca-nome { font-size: var(--t2); line-height: .9;
  background: radial-gradient(300px circle at var(--mx, 30%) var(--my, 55%), var(--magenta), var(--roxo) 40%, rgba(47, 91, 255, 0) 75%), linear-gradient(#fff, #fff);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.apoio .marca:not(.marca-head) .marca-nome { font-size: clamp(22px, 2.2vw, 32px); }
.apoio .marca-head .marca-nome { position: relative; z-index: 1; }
.apoio .marca-super { width: min(52%, 560px); right: -6%; top: 50%; opacity: .55; transform: translateY(-50%) rotate(-8deg); }

/* 5. o role: duas janelas maiores, lado a lado e desencontradas */
.janelas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 7vw, 120px); }
.janela:nth-child(1) { --jb: -2deg; }
.janela:nth-child(2) { --jb: 1.5deg; margin-top: 16%; }
@media (min-width: 900px) { .janelas { grid-column: 2 / 12; } }

/* 3. quem faz o som: galeria horizontal. No computador a dobra prende (palco sticky de uma tela) e a rolagem anda a trilha;
   o artista no centro fica em foco (cor, estilo, proposta, selo), os vizinhos menores, em P&B e virados. Celular e movimento reduzido: arraste com snap */
.galeria-cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; }
.galeria-hud { display: grid; justify-items: end; gap: 8px; text-align: right; }
.galeria-num { font: 600 13px/1 var(--mono); letter-spacing: .14em; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.galeria-num::before { content: attr(data-n); }
.galeria-nome { font: 900 var(--t2)/.9 "Archivo", sans-serif; font-stretch: 66%; text-transform: uppercase; letter-spacing: -.01em; word-spacing: .16em; padding-right: .04em;
  background: var(--luz); -webkit-background-clip: text; background-clip: text; color: transparent; }
.galeria-nome::before { content: attr(data-nome); }
.galeria-nome { white-space: nowrap; }
@media (min-width: 900px) { .galeria-hud { width: min(36vw, 460px); } }
.galeria-nome.troca, .galeria-num.troca { animation: galeria-troca .5s cubic-bezier(.7, 0, .2, 1); }
@keyframes galeria-troca { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } }
.retratos li:first-child { grid-column: auto; }
.retratos li:first-child img { aspect-ratio: 4 / 5; }
.retrato-selo, .retrato-sobre, .retrato > h3, .retrato > .arrobas { transition: opacity .35s; }
.retrato.em-foco img, .retrato:hover img { filter: grayscale(0) contrast(1.02); }
@media (hover: hover) and (pointer: fine) {
  /* na galeria a proposta fica sempre aberta (o vizinho esconde a tarja inteira): trocar o foco nao muda altura nenhuma, CLS 0 */
  .galeria .retrato-proposta { max-height: none; opacity: 1; margin-top: 8px; transition: none; }
  .retrato.em-foco .retrato-estilo { background: var(--luz); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
/* palco preso */
.artistas.galeria-presa { padding: 0; }
.galeria-pin .galeria-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 96px 0 112px; }
.galeria-pin .galeria-cabeca { margin: 0; padding: 0 var(--miolo); }
.galeria-pin .retratos { --card-h: clamp(220px, calc(100svh - 470px), 560px); display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); width: max-content;
  padding: 0 calc(50vw - var(--card-h) * .4); will-change: transform; }
.galeria-pin .retrato { flex: none; width: calc(var(--card-h) * .8); transform-origin: 50% 40%; will-change: transform; }
.galeria-pin .retrato:not(.em-foco) .retrato-selo, .galeria-pin .retrato:not(.em-foco) .retrato-sobre { opacity: 0; }
.galeria-pin .retrato:not(.em-foco) > h3, .galeria-pin .retrato:not(.em-foco) > .arrobas { opacity: .4; }
.galeria-pin .retrato:hover .retrato-selo, .galeria-pin .retrato:hover .retrato-sobre, .galeria-pin .retrato:hover > h3, .galeria-pin .retrato:hover > .arrobas { opacity: 1; }
/* arraste com snap */
.galeria-arraste .retratos { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(var(--miolo) * -1); padding: 8px calc(50vw - min(38vw, 160px)) 16px; }
.galeria-arraste .retratos::-webkit-scrollbar { display: none; }
.galeria-arraste .retrato { flex: 0 0 min(76vw, 320px); scroll-snap-align: center; }
.galeria-arraste .galeria-nome { display: none; }
.galeria-arraste.arrastando .retratos { scroll-snap-type: none; cursor: grabbing; }
@media (hover: hover) and (pointer: fine) { .galeria-arraste .retratos { cursor: grab; } }

/* 6. dock no centro inferior: as 11 faixas numeradas numa pilula, o anel (agulha) desliza com mola, arrasta pra rolar, clica pra trocar */
.dock { position: fixed; z-index: 58; left: 50%; bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px)); padding: 4px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(11, 10, 18, .1), 0 16px 36px -18px rgba(11, 10, 18, .55);
  transform: translateX(-50%); -webkit-user-select: none; user-select: none; touch-action: none;
  transition: background .3s, box-shadow .3s, opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.dock-trilho { position: relative; }
.dock-trilho::before { content: ""; position: absolute; left: 20px; right: 20px; top: 50%; height: 1px; background: rgba(11, 10, 18, .1); }
.dock ol { position: relative; display: flex; margin: 0; padding: 0; list-style: none; }
.dock li { flex: none; }
.dock a { position: relative; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--tinta); text-decoration: none; }
.dock-num { font: 700 11px/1 var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; opacity: .5; transition: opacity .25s, color .25s; }
.dock a:hover .dock-num, .dock a:focus-visible .dock-num, .dock a.ativo .dock-num { opacity: 1; }
.dock a.ativo .dock-num { color: var(--roxo); }
.dock-nome { position: absolute; left: 50%; bottom: calc(100% + 14px); padding: 8px 12px; border-radius: 999px; background: var(--tinta); color: #fff; font: 700 13px/1 "Archivo", sans-serif;
  white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 6px); transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.dock a:hover .dock-nome, .dock a:focus-visible .dock-nome, .dock.arrastando a.ativo .dock-nome { opacity: 1; transform: translate(-50%, 0); }
.dock-agulha { position: absolute; z-index: 1; left: 0; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none;
  background: #fff; box-shadow: inset 0 0 0 2px var(--magenta), 0 4px 14px -4px rgba(255, 61, 168, .55); transform: translate3d(var(--tx, 20px), 0, 0); }
.dock.arrastando { cursor: grabbing; }
.dock.arrastando .dock-agulha { box-shadow: inset 0 0 0 2px var(--roxo), 0 0 0 5px rgba(138, 63, 252, .2); }
.dock.no-escuro { background: rgba(22, 20, 29, .95); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 16px 36px -18px #000; }
.dock.no-escuro a, .dock.no-escuro a.ativo .dock-num { color: #fff; }
.dock.no-escuro .dock-trilho::before { background: rgba(255, 255, 255, .14); }
.dock.no-escuro .dock-agulha { background: #16141D; }
.dock.no-escuro .dock-nome { background: #fff; color: var(--tinta); }
@media (min-width: 900px) {
  .hud-barra { display: none; }
  .rodape { padding-bottom: 112px; }
}
@media (min-width: 900px) and (max-width: 1179px) { .hud-base [data-hud-cena] { visibility: hidden; } }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { html.js { scrollbar-width: none; } html.js::-webkit-scrollbar { display: none; } }
@media (max-width: 899px) {
  .dock { left: 12px; right: 12px; width: max-content; max-width: calc(100vw - 24px); margin-inline: auto; padding: 3px; transform: none; touch-action: pan-x;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  /* celular: o dock anda junto com a barra de compra (fora do hero e fora do formulario), sempre ACIMA dela */
  .dock { opacity: 0; pointer-events: none; transform: translateY(16px); }
  body:has(.barra-compra.ativa) .dock { opacity: 1; pointer-events: auto; transform: translateY(-70px); }
  .dock-trilho { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: 999px; }
  .dock-trilho::-webkit-scrollbar { display: none; }
  .dock-trilho::before { left: 22px; right: 22px; }
  .dock a { width: 44px; height: 44px; }
  .dock-nome { display: none; }
  .dock-agulha { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .rodape { padding-bottom: 176px; }
  .apoio .marca-super { width: 44%; right: -12%; opacity: .3; }
}
@media (prefers-reduced-motion: reduce) { .galeria-nome.troca, .galeria-num.troca { animation: none; } }

/* r5, verificacao: no celular o botao do hero tem de caber na primeira tela (a original deixava em 743 px de 844).
   O vinil do celular desce pra depois do cartao de compra e do chip; o texto e a ordem do DOM nao mudam */
@media (max-width: 899px) {
  .hero-centro > h1, .hero-centro > .hero-quando, .hero-centro > .hero-frase { order: 1; }
  .hero-centro > .hero-compra { order: 2; }
  .hero-centro > .chip-local { order: 3; }
  .hero-centro > .vinil-cel { order: 4; }
}

/* ============ rodada 6 (30/10/2026) ============ */
/* troca de faixa: enquanto a capa cobre a tela, nada transiciona nem anima troca (a pagina chega pronta quando a capa sai) */
html.saltando, html.saltando body { scroll-behavior: auto !important; }
html.saltando *, html.saltando *::before, html.saltando *::after { transition: none !important; }
html.saltando .troca, html.saltando [data-hud-cena].troca { animation: none !important; }
/* celular: o dock recolhe ao rolar pra baixo (vence o seletor que o liga a barra de compra) */
@media (max-width: 899px) {
  .dock { transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1); }
  body:has(.barra-compra.ativa) .dock.recolhido:not(:focus-within) { opacity: 0; pointer-events: none; transform: translateY(-40px); }
}

/* troca de faixa com materia de disco (critico r6): sulco fino sobre o degrade e uma bolacha girando atras do nome da faixa */
.troca-disco { overflow: hidden; }
.troca-disco::before { content: ""; position: absolute; inset: -20%; pointer-events: none; opacity: .22; mix-blend-mode: soft-light;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .9) 0 1px, transparent 1.5px 5px); }
.troca-disco > span { position: relative; z-index: 2; }
.troca-vinil { --tam: min(78vmin, 640px); position: absolute; left: 50%; top: 50%; width: var(--tam); height: var(--tam); margin: calc(var(--tam) / -2) 0 0 calc(var(--tam) / -2); border-radius: 50%; z-index: 1;   /* centro por margem: a animacao gira usa o transform */
  background: repeating-radial-gradient(circle, #131118 0 2px, #26232E 2.6px 4px); box-shadow: 0 40px 120px -30px rgba(11, 10, 18, .7), inset 0 0 0 1px rgba(255, 255, 255, .06);
  animation: gira 1.6s linear infinite; opacity: .92; }
.troca-vinil::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent, rgba(255, 255, 255, .14) 10%, transparent 22%, transparent 50%, rgba(255, 255, 255, .1) 60%, transparent 72%); }
.troca-selo { position: absolute; inset: 33%; border-radius: 50%; background: var(--luz); box-shadow: inset 0 0 0 3px rgba(11, 10, 18, .25); }
.troca-selo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6%; aspect-ratio: 1; border-radius: 50%; background: #F4F2F7; transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) { .troca-vinil { animation: none; } }

/* ============ rodada 7: celular ============ */
/* pedido (31/10): "na versao mobile, alinha mais os elementos centralizadamente, como na hero (...) melhore a UI/UX do mobile".
   O hero e a regua: eixo central, ritmo de 8 px, grupos de CTA montados como o do cartao do hero (grade no eixo, botoes da largura do maior).
   Ficam a esquerda so onde o centro atrapalha: os campos do formulario, as respostas do FAQ e o line-up (linha do tempo a esquerda). */
@media (max-width: 899px) {
  html { scroll-padding-bottom: 144px; }                        /* barra de compra + dock nunca cobrem o alvo de uma ancora ou do foco */
  /* topo: relogio e CTA cabem com o gutter dos dois lados (o CTA encostava na borda em 390 e era cortado em 29 px em 360) */
  .hud-ao-vivo { gap: 6px; letter-spacing: .04em; }
  .hud-topo .pilula-pequena { gap: 8px; padding: 0 14px; letter-spacing: .04em; }

  /* titulos de dobra no eixo; titulo para o apoio 16, cabecalho para o conteudo 32 */
  .titulo-bloco, .onde-casa { text-align: center; }
  .cabeca { justify-items: center; text-align: center; margin-bottom: 32px; }
  .duvidas { gap: 0; }
  .duvidas .cabeca { margin-bottom: 32px; }

  /* texto corrido: no eixo, com medida curta e entrelinha folgada */
  .role-texto, .aovivo-texto, .paint-texto > p:not(.micro):not(.arrobas), .galhos p { max-width: 36ch; margin-inline: auto; line-height: 1.6; text-align: center; }

  /* hero: o cartao-ingresso com o conteudo no eixo */
  .hero-preco { justify-items: center; text-align: center; }

  /* o role */
  .painel-grade { gap: 32px; }
  .role .titulo-bloco + .role-texto { margin-top: -16px; }

  /* a noite: cabecalho no eixo; os galhos tambem (o line-up segue a esquerda, com a linha do tempo) */
  .noite-cabeca-cel { text-align: center; margin-bottom: 16px; }
  .galhos { gap: 32px; text-align: center; }
  .galhos p { margin-top: 8px; }
  .galhos h3, .retrato > h3 { text-wrap: balance; }   /* titulo centralizado sem palavra sozinha na ultima linha ("EM / LONDRES" em 360) */

  /* quem faz o som: titulo e contador no eixo; o artista em foco com nome, estilo, proposta e @ centralizados */
  .galeria-cabeca { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .galeria-hud { justify-items: center; text-align: center; }
  .galeria .retrato { text-align: center; }
  .galeria .retrato .arrobas { justify-content: center; }

  /* ao vivo */
  .aovivo-danca { text-align: center; }
  .aovivo-texto { margin-top: 16px; }
  .aovivo-danca .arrobas { justify-content: center; margin-top: 8px; }
  .corpo-palco { gap: 24px; }

  /* shap: legenda, texto, ficha e @ no eixo; a ficha empilha rotulo sobre valor */
  .paint-mural figcaption { margin-top: 16px; text-align: center; }
  .paint-texto { text-align: center; }
  .paint-texto > p:not(.micro):not(.arrobas) { margin-top: 16px; }
  .paint-ficha { margin: 24px auto 0; }
  .paint-ficha div { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .paint-texto .arrobas { justify-content: center; margin-top: 8px; }

  /* ingressos: cabecalho e corpo dos ingressos no eixo; o formulario segue a esquerda */
  .bil-grade { gap: 48px; }
  .bil-lado { text-align: center; }
  /* mono: a medida em caracteres faz a quebra cair depois de "6h ·" (com balance caia antes do ponto e a linha 2 abria com ele) */
  .bil-quando { max-width: calc(26 * (1ch + .1em) + 2px); margin: 16px auto 0; }
  .tickets { margin-top: 32px; gap: 16px; }
  .ticket-corpo { justify-items: center; text-align: center; }

  /* onde e e final: o cartao no eixo e os dois botoes da mesma largura, como no hero (grade no eixo, largura do maior) */
  .onde-cartao { gap: 16px; justify-items: center; text-align: center; }
  .onde .hero-acoes, .final .hero-acoes { display: grid; justify-content: center; gap: 8px; }
  .onde .hero-acoes { margin-top: 8px; }
  .onde .hero-acoes .pilula, .final .hero-acoes .pilula { width: 100%; padding: 0 20px; }

  /* quem ta junto: a Vizion e o support no eixo; o GN da Vizion vai para tras do nome, no eixo (na direita colidia com o nome centralizado) */
  .apoio .marca, .apoio .marca-head { justify-content: center; text-align: center; }
  .apoio .marca-super { width: 74%; left: 50%; right: auto; opacity: .2; transform: translate(-50%, -50%) rotate(-8deg); }
  .apoio .marca:not(.marca-head) { padding: 24px 0; }
  .apoio .marcas-vaga { padding: 24px 0; }

  /* final e rodape */
  .final { gap: 24px; }
  .rodape { flex-direction: column; align-items: center; gap: 8px; padding-top: 32px; text-align: center; }
  .rodape nav { flex-direction: column; align-items: center; }   /* um link por linha: na largura do celular a fileira quebrava 1-2-1 */

  .onde-end .junto { white-space: nowrap; }   /* "Sao Jose, SC" nao se parte no endereco centralizado */

  /* toque: link dentro de texto ganha area de 44 px por padding de linha (nao mexe na entrelinha) */
  .paint-mural figcaption a, .compra-legal a { padding: 15px 4px; margin: 0 -4px; }
  details a { padding: 9px 0; }   /* inline-block de 26 + 18 = 44 px (como inline, a quebra mudava e o "no" descia sozinho) */
  /* caixinhas do formulario: alvo de 44 px, desenho de 24 px (o label inteiro tambem marca) */
  .compra .marca { align-items: center; min-height: 48px; padding-top: 0; }
  .compra .marca input { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; margin: -10px; border: 0; border-radius: 0; cursor: pointer;
    background: center / 24px 24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='.75' y='.75' width='22.5' height='22.5' rx='6' fill='%23fff' stroke='%230B0A12' stroke-opacity='.45' stroke-width='1.5'/%3E%3C/svg%3E"); }
  .compra .marca input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%238A3FFC'/%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .compra .marca input:focus-visible { outline: 2px solid var(--roxo); outline-offset: -8px; }
}
@media (max-width: 379px) { .hud-topo .pilula-pequena { font-size: 12px; } }   /* 360: o CTA do topo cabe com o gutter */

/* r7, critico: no celular, com a barra de compra no rodape, o botao do topo era um segundo CTA identico.
   Ele sai quando a barra aparece (no hero, onde a barra nao existe, ele continua); o topo fica com o relogio e o lettering */
@media (max-width: 899px) {
  .hud-topo .pilula { transition: opacity .3s, visibility .3s; }
  body:has(.barra-compra.ativa) .hud-topo .pilula { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* 30/10: janelas do role abrem o video original no Instagram */
.janela-link { position: relative; display: block; width: 100%; height: 100%; border-radius: 17px; overflow: hidden; color: #fff; text-decoration: none; }
.janela-ver { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); white-space: nowrap; padding: 8px 14px; border-radius: 999px;
  font: 800 12px/1 "Archivo", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(11, 10, 18, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .3s, transform .3s; }
@media (hover: hover) and (pointer: fine) {
  .janela-ver { opacity: 0; transform: translate(-50%, 6px); }
  .janela-link:hover .janela-ver, .janela-link:focus-visible .janela-ver { opacity: 1; transform: translateX(-50%); }
}
@media (max-width: 599px) { .janela-ver { font-size: 10px; padding: 6px 10px; bottom: 10px; } }