:root {
  --fundo: #0f0c0a;
  --fundo-2: #16120f;
  --laranja: #ff6a0d;
  --laranja-escuro: #a53e00;
  --amarelo: #ffc21a;
  --texto: #f4efe9;
  --texto-2: #cbbfb1;
  --texto-3: #9a8d80;
  --borda: #4a2f1c;
  --vermelho-led: #ff3b30;
  --verde-led: #39e36b;
  --fonte-painel: "Bahnschrift SemiCondensed", "Bahnschrift", "DIN Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --largura: 1180px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; }
a { color: var(--laranja); }

.madeira {
  background-color: #2a1a10;
  background-image:
    radial-gradient(60% 55% at 50% 35%, rgba(255, 110, 0, 0.12), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(0, 0, 0, 0.5) 100%),
    repeating-linear-gradient(90deg, rgba(255, 220, 180, 0.025) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 19px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 3px, transparent 3px 53px),
    linear-gradient(90deg, #24160d 0%, #3a2416 18%, #2c1b10 37%, #3d2617 58%, #28180e 79%, #352113 100%);
}

/* ===================== Topo ===================== */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(180deg, #2d2d2d 0%, #1b1b1b 55%, #141414 100%);
  border-bottom: 3px solid #050505;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 14px rgba(0, 0, 0, 0.55);
}
.topo-dentro {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.marca img { display: block; width: 150px; height: auto; filter: drop-shadow(0 3px 10px rgba(255, 106, 13, 0.25)); }
.menu { margin-left: auto; display: flex; gap: 4px; }
.menu a {
  padding: 9px 12px;
  border-radius: 8px;
  font-family: var(--fonte-painel);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texto-2);
  transition: color 0.15s, background 0.15s;
}
.menu a:hover, .menu a:focus-visible { color: var(--laranja); background: rgba(255, 106, 13, 0.08); }
.topo .menu-botao { display: none; margin-left: auto; }

.tecla {
  width: 46px; height: 46px;
  border-radius: 10px;
  border: 1px solid #000;
  background: linear-gradient(180deg, #333 0%, #1e1e1e 100%);
  color: var(--laranja);
  display: grid; place-items: center;
  box-shadow: 0 4px 0 #050505, inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.tecla svg { width: 26px; height: 26px; }
.tecla:active { transform: translateY(3px); box-shadow: 0 1px 0 #050505; }

@media (max-width: 900px) {
  .topo .menu-botao { display: grid; }
  .menu {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    gap: 0;
    padding: 8px 16px 14px;
    background: #181818;
    border-bottom: 3px solid #050505;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
    display: none;
  }
  .menu.aberto { display: flex; }
  .menu a { padding: 14px 10px; font-size: 17px; border-bottom: 1px solid #262626; }
}

/* ===================== Palco (ao vivo) ===================== */
.palco { padding: 48px 20px 56px; }
.palco-dentro {
  max-width: var(--largura);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .palco { padding: 28px 16px 36px; }
  .palco-dentro { grid-template-columns: 1fr; gap: 26px; }
}

.toca-discos { position: relative; width: min(100%, 540px); aspect-ratio: 1.12; margin: 0 auto; }
.prato {
  position: absolute; left: 0; top: 2%;
  width: 84%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #1b1b1b 0 60%, #262626 70%, #0f0f0f 72%, #2a2a2a 100%);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.65), 0 0 0 3px #0a0a0a;
}
.disco {
  position: absolute; inset: 3%; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 34.5%, #080808 34.5% 36%, transparent 36% 47%, rgba(0, 0, 0, 0.6) 47% 47.6%, transparent 47.6% 62%, rgba(0, 0, 0, 0.55) 62% 62.6%, transparent 62.6% 80%, rgba(0, 0, 0, 0.5) 80% 80.6%, transparent 80.6%),
    repeating-radial-gradient(circle, #161616 0 1px, #0d0d0d 1px 2.6px);
  box-shadow: inset 0 0 0 2px #050505;
  animation: girar 1.8s linear infinite;
  animation-play-state: paused;
}
body.tocando .disco { animation-play-state: running; }
@keyframes girar { to { transform: rotate(360deg); } }
.rotulo {
  position: absolute; inset: 32%; border-radius: 50%; overflow: hidden; background: #111;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px rgba(255, 106, 13, 0.35);
}
.rotulo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.5s ease; }
.rotulo img.trocando { opacity: 0; }
.brilho {
  position: absolute; inset: 3%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 25deg, transparent 0 6%, rgba(255, 255, 255, 0.09) 12%, transparent 19% 50%, rgba(255, 255, 255, 0.07) 57%, transparent 64%);
  -webkit-mask: radial-gradient(circle, transparent 0 35%, #000 36%);
  mask: radial-gradient(circle, transparent 0 35%, #000 36%);
}
.pino {
  position: absolute; left: 50%; top: 50%; width: 3.4%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #8a8a8a 60%, #3a3a3a);
}
.braco { position: absolute; right: 0; top: 0; width: 24%; height: 100%; overflow: visible; filter: drop-shadow(4px 8px 6px rgba(0, 0, 0, 0.6)); }
.braco-giro { transform-box: view-box; transform-origin: 55px 50px; transition: transform 1.3s cubic-bezier(0.45, 0, 0.25, 1); }
body.tocando .braco-giro, body.conectando .braco-giro, body.erro .braco-giro { transform: rotate(21deg); }
.agulha-luz { fill: #5a2a08; transition: fill 0.3s; }
body.tocando .agulha-luz { fill: var(--laranja); filter: drop-shadow(0 0 4px var(--laranja)); }

.painel-ao-vivo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
@media (max-width: 900px) { .painel-ao-vivo { align-items: center; text-align: center; } }

.selo {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid #000;
  font-family: var(--fonte-painel);
  font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: 10px;
}
.led { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #3a2a22; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8); }
body.tocando .selo { color: #fff; }
body.tocando .led-vivo { background: var(--vermelho-led); box-shadow: 0 0 8px var(--vermelho-led); animation: pulso 1.6s ease-in-out infinite; }
body.conectando .led-vivo { background: var(--amarelo); box-shadow: 0 0 8px var(--amarelo); animation: pulso 0.8s ease-in-out infinite; }
body.erro .led-vivo { background: #ff7a66; }
body.tocando .led-sinal { background: var(--verde-led); box-shadow: 0 0 8px var(--verde-led); }
@keyframes pulso { 50% { opacity: 0.45; } }

.tocando-rotulo {
  font-family: var(--fonte-painel);
  font-size: 15px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--laranja);
  text-shadow: 0 0 10px rgba(255, 106, 13, 0.4);
}
.tocando-titulo {
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.12;
  overflow-wrap: anywhere;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
}
.tocando-artista { margin: 0 0 18px; font-size: clamp(18px, 2vw, 22px); color: var(--texto-2); }

.botao-play {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-width: 300px;
  height: 72px;
  padding: 0 34px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ff8126 0%, #f05f07 55%, #e25200 100%);
  color: #fff;
  box-shadow: 0 7px 0 var(--laranja-escuro), 0 12px 26px rgba(255, 100, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.08s, box-shadow 0.08s;
}
.botao-play:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--laranja-escuro), 0 4px 10px rgba(255, 100, 0, 0.25); }
.botao-play:focus-visible, .botao-laranja:focus-visible, .mini-play:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 4px; }
.play-texto { font-family: var(--fonte-painel); font-size: 26px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(120, 40, 0, 0.55); }
.botao-play .ic, .mini-play .ic { width: 28px; height: 28px; fill: #fff; }
.ic-parar, .girando { display: none; }
body.tocando .ic-play, body.erro .ic-play, body.conectando .ic-play { display: none; }
body.tocando .ic-parar, body.erro .ic-parar { display: block; }
body.conectando .girando { display: block; }
.girando { width: 24px; height: 24px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: gira 0.8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.volume { display: flex; align-items: center; gap: 12px; width: min(100%, 320px); margin: 20px 0 6px; color: var(--texto-3); }
.volume svg { width: 22px; height: 22px; flex: none; }
.volume input {
  flex: 1; -webkit-appearance: none; appearance: none; height: 5px; border-radius: 5px;
  background: linear-gradient(90deg, var(--laranja) var(--v, 100%), rgba(255, 255, 255, 0.15) var(--v, 100%));
}
.volume input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg, #eee, #aaa); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.volume input::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #ddd; }

/* VU */
.vu-painel {
  width: min(100%, 460px);
  margin-top: 14px;
  border-radius: 12px;
  padding: 8px 12px 9px;
  background: linear-gradient(180deg, #1d1814, #15110e);
  border: 2px solid var(--borda);
  box-shadow: inset 0 0 0 1px #000, 0 6px 16px rgba(0, 0, 0, 0.5);
}
.vu-topo, .vu-base { font-family: var(--fonte-painel); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-3); line-height: 1.3; }
.vu-topo { text-align: right; margin-bottom: 6px; }
.vus { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vu { width: 100%; height: auto; display: block; border-radius: 6px; border: 2px solid #050505; background: #26221d; box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8); transition: background 0.6s; }
body.tocando .vu { background: #3a2f22; }
.vu .escala { fill: none; stroke-width: 2.4; }
.vu .marca { stroke: #cfc2b0; stroke-width: 1.4; }
.vu .num { fill: #cfc2b0; font: 600 8.5px var(--fonte-painel); text-anchor: middle; }
.vu .rot { fill: var(--laranja); font: 700 8.5px var(--fonte-painel); letter-spacing: 0.12em; text-anchor: middle; }
.vu .vu-txt { fill: #8d8172; font: 700 10px var(--fonte-painel); text-anchor: middle; }
.vu .ponteiro { stroke: #ff3b1f; stroke-width: 1.8; stroke-linecap: round; }
.vu .eixo { fill: #0d0d0d; stroke: #2e2e2e; stroke-width: 2; }
.vu-base { display: flex; align-items: center; gap: 7px; margin-top: 7px; text-align: left; }
.vu-info { margin-left: auto; letter-spacing: 0.06em; font-size: 10.5px; }

/* ===================== Faixas (seções) ===================== */
.faixa { padding: 64px 20px; border-top: 3px solid #050505; }
.faixa-dentro { max-width: var(--largura); margin: 0 auto; }
.titulo-secao {
  margin: 0 0 22px;
  font-family: var(--fonte-painel);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--laranja);
}
@media (max-width: 700px) { .faixa { padding: 44px 16px; } }

.cartao {
  border-radius: 16px;
  padding: 26px;
  background: linear-gradient(180deg, #1d1814, #15110e);
  border: 2px solid var(--borda);
  box-shadow: inset 0 0 0 1px #000, 0 10px 24px rgba(0, 0, 0, 0.45);
}

/* Histórico */
.grade-historico { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.grade-historico li.item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px;
  border-radius: 12px;
  background: var(--fundo-2);
  border: 1px solid #2a211b;
}
.grade-historico .capinha { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex: none; background: #111; }
.grade-historico .info { min-width: 0; }
.grade-historico .hora { font-family: var(--fonte-painel); font-size: 14px; letter-spacing: 0.06em; color: var(--amarelo); }
.grade-historico .faixa-titulo { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grade-historico .faixa-artista { display: block; font-size: 15px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grade-historico .vazio { color: var(--texto-3); }

/* App */
.app-grade { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.app-celular { display: block; width: min(100%, 360px); height: auto; margin: 0 auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 60px rgba(255, 106, 13, 0.2)); }
.app-chamada { margin: -8px 0 16px; font-size: 22px; font-weight: 700; }
.app-lista { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 8px; }
.app-lista li { padding-left: 30px; position: relative; color: var(--texto-2); }
.app-lista li::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 12px; height: 12px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 8px var(--laranja); }
.app-como { margin-top: 24px; display: grid; gap: 6px; font-size: 15.5px; color: var(--texto-2); }
.app-como strong { color: var(--texto); }
.app-qr { margin-top: 22px; display: flex; align-items: center; gap: 16px; font-size: 15px; color: var(--texto-3); }
.app-qr img { width: 112px; height: 112px; border-radius: 10px; flex: none; }
@media (max-width: 800px) {
  .app-grade { grid-template-columns: 1fr; gap: 30px; }
  .app-celular { width: min(72%, 300px); }
  .app-qr { display: none; } /* no celular, o botão já resolve */
}

.botao-laranja {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px;
  padding: 0 30px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #ff8126, #e25200);
  color: #fff;
  font-family: var(--fonte-painel);
  font-size: 21px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 0 var(--laranja-escuro), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.botao-laranja svg { width: 24px; height: 24px; }
.botao-laranja:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--laranja-escuro); }

/* Pedir */
.cartao-pedir { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; }
.cartao-pedir p { margin: 0; color: var(--texto-2); font-size: 18px; }
.cartao-pedir strong { color: var(--texto); }
.pedir-acoes { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.pedir-acoes .botao-laranja { width: 100%; }
.pedir-email { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; color: var(--texto-2); }
.link-botao { border: 1px solid rgba(255, 106, 13, 0.6); border-radius: 8px; background: none; padding: 6px 14px; color: var(--laranja); font-weight: 600; }
@media (max-width: 800px) { .cartao-pedir { grid-template-columns: 1fr; } }

/* Quem somos */
.faixa-texto { background: var(--fundo-2); }
.texto-largura { max-width: 820px; }
.faixa-texto p { color: var(--texto-2); margin: 0 0 16px; }
.faixa-texto .destaque { font-size: 22px; font-weight: 700; color: var(--texto); }
.faixa-texto .assinatura { font-family: var(--fonte-painel); font-size: 20px; font-weight: 800; letter-spacing: 0.06em; color: var(--laranja); margin-top: 24px; }

/* Equipe */
.grade-equipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.cartao-equipe svg { width: 40px; height: 40px; color: var(--laranja); }
.cartao-equipe h3 { margin: 10px 0 6px; font-family: var(--fonte-painel); font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; }
.cartao-equipe p { margin: 0; color: var(--texto-2); }

/* ===================== Rodapé ===================== */
.rodape {
  padding: 46px 20px 120px;
  background: #0a0908;
  border-top: 3px solid #050505;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.rodape img { width: 170px; height: auto; opacity: 0.95; }
.rodape-local { font-family: var(--fonte-painel); font-size: 15px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--texto-2); }
.rodape-links { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.rodape-links a { color: var(--texto-2); text-decoration: none; }
.rodape-links a:hover { color: var(--laranja); }
.rodape-direitos { font-size: 14px; color: var(--texto-3); }

/* ===================== Mini player ===================== */
.mini-player {
  position: fixed;
  left: 50%; bottom: 16px;
  z-index: 30;
  width: min(560px, calc(100% - 24px));
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 8px;
  border-radius: 16px;
  background: linear-gradient(180deg, #2b2b2b, #161616);
  border: 1px solid #000;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translate(-50%, 140%);
  transition: transform 0.35s ease;
}
.mini-player.visivel { transform: translate(-50%, 0); }
.mini-player img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; }
.mini-texto { flex: 1; min-width: 0; }
.mini-titulo { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.mini-artista { font-size: 14px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.mini-play {
  width: 54px; height: 54px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 12px;
  background: linear-gradient(180deg, #ff8126, #e25200);
  box-shadow: 0 4px 0 var(--laranja-escuro);
}
.mini-play .ic, .mini-play .girando { grid-area: 1 / 1; }
.mini-play:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--laranja-escuro); }

.aviso {
  position: fixed; left: 50%; top: 90px; transform: translateX(-50%); z-index: 40;
  max-width: calc(100% - 32px);
  padding: 11px 16px; border-radius: 10px;
  background: #2b2b2b; border: 1px solid var(--laranja);
  font-size: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}