/* ==========================================================================
   Página pública da rádio. As cores vêm da própria rádio (--p e --f); o texto
   é claro ou escuro conforme o fundo. Três temas no mesmo HTML:
     capa      — imersivo, logotipo grande, player no centro (padrão)
     classico  — cartão horizontal, logotipo ao lado do nome
     minimal   — só a barra do player
   ========================================================================== */
@font-face{font-family:'Outfit';src:url('/static/fonts/outfit-800.woff2') format('woff2');font-weight:800;font-display:swap}

:root{--p:#0a6bf7;--f:#061423;--tx:#f3f7fb;--suave:rgba(243,247,251,.68);
  --vidro:rgba(255,255,255,.07);--borda:rgba(255,255,255,.13);--display:'Outfit',system-ui,sans-serif}
[data-claro="1"]{--vidro:rgba(0,0,0,.05);--borda:rgba(0,0,0,.1)}
*{box-sizing:border-box}
html{color-scheme:dark}
[data-claro="1"] html,body[data-claro="1"]{color-scheme:light}
body{margin:0;min-height:100vh;background:var(--f);color:var(--tx);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background-image:radial-gradient(900px 520px at 50% -12%, color-mix(in srgb, var(--p) 38%, transparent) 0%, transparent 70%)}
a{color:var(--tx)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--p);outline-offset:3px}
.sub{color:var(--suave);font-size:.9em}
.pagina{max-width:760px;margin:0 auto;padding:clamp(1.2rem,4vw,2.5rem) 1.2rem 3rem}

/* ---- marca da rádio ---- */
.marca{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;margin-bottom:1.6rem}
.marca .logo{width:clamp(150px,40vw,240px);height:auto;max-height:240px;object-fit:contain;border-radius:22px;
  background:#fff;padding:.5rem;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.marca h1{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,5vw,2.3rem);letter-spacing:-.02em;margin:.2rem 0 0;line-height:1.1}
.marca .slogan{margin:0;color:var(--suave);font-size:1rem}

/* ---- o player: a razão da página ---- */
.player{position:relative;display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;
  background:var(--vidro);border:1px solid var(--borda);border-radius:26px;padding:1.6rem 1.4rem 1.3rem;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.play{width:96px;height:96px;border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:0;
  background:var(--p);box-shadow:0 12px 34px color-mix(in srgb, var(--p) 55%, transparent);
  display:grid;place-items:center;transition:transform .15s,box-shadow .15s;flex:none}
.play:hover{transform:scale(1.04)}
.play:active{transform:scale(.97)}
.play svg{width:38px;height:38px;fill:#fff}
.play .ic-pause{display:none}
.play[aria-pressed="true"] .ic-play{display:none}
.play[aria-pressed="true"] .ic-pause{display:block}
.estado{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--display);font-weight:800;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--suave)}
.estado .ponto{width:8px;height:8px;border-radius:50%;background:var(--suave);opacity:.5}
.estado[data-estado="musica"] .ponto{background:var(--p);opacity:1;box-shadow:0 0 10px var(--p)}
.estado[data-estado="aovivo"]{color:#ff8a8a}
.estado[data-estado="aovivo"] .ponto{background:#ff4d4d;opacity:1;box-shadow:0 0 12px #ff4d4d;animation:respira 1.5s ease-in-out infinite}
@keyframes respira{50%{opacity:.35}}
.faixa-info{min-width:0;width:100%}
.titulo{font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,3.4vw,1.45rem);line-height:1.2;margin:0;letter-spacing:-.01em;
  overflow-wrap:anywhere}
.artista{margin:.15rem 0 0;color:var(--suave)}
.programa{margin:.1rem 0 0;color:var(--suave);font-size:.85rem}

/* equalizador: barras que reagem ao áudio de verdade (Web Audio); sem ele, animação suave quando toca */
.eq{display:flex;align-items:flex-end;gap:4px;height:26px}
.eq i{display:block;width:5px;height:4px;border-radius:3px;background:var(--p);opacity:.9;transition:height .08s}
.player.tocando.sem-analise .eq i{animation:pula 1.1s ease-in-out infinite}
.player.tocando.sem-analise .eq i:nth-child(2){animation-delay:.15s}.player.tocando.sem-analise .eq i:nth-child(3){animation-delay:.3s}
.player.tocando.sem-analise .eq i:nth-child(4){animation-delay:.45s}.player.tocando.sem-analise .eq i:nth-child(5){animation-delay:.6s}
@keyframes pula{0%,100%{height:5px}50%{height:24px}}
@media (prefers-reduced-motion:reduce){.eq i{animation:none!important}.estado .ponto{animation:none!important}}

.controles{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;width:100%;color:var(--suave);font-size:.9rem}
.controles input[type=range]{width:140px;accent-color:var(--p)}
.ouvintes b{color:var(--tx);font-family:var(--display);font-weight:800}

/* aviso quando o navegador não deixou começar sozinho */
.tocar-aviso{position:absolute;inset:0;border-radius:26px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--f) 78%, transparent);backdrop-filter:blur(4px);cursor:pointer;border:0;color:var(--tx);font:inherit}
.tocar-aviso span{font-family:var(--display);font-weight:800;font-size:1.1rem;display:flex;align-items:center;gap:.6rem}

/* ---- canais ---- */
.canais{display:flex;gap:.55rem;justify-content:center;flex-wrap:wrap;margin:1.2rem 0 0}
.canal{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;font-weight:600;font-size:.92rem;
  padding:.5rem .9rem;border-radius:999px;background:var(--vidro);border:1px solid var(--borda);transition:.12s}
.canal:hover{background:color-mix(in srgb, var(--p) 25%, var(--vidro))}
.canal svg{width:18px;height:18px;fill:currentColor}
.canal.whatsapp{background:#25d366;color:#062b16;border-color:transparent}
.canal.whatsapp:hover{filter:brightness(1.06)}

/* ---- blocos ---- */
.bloco{background:var(--vidro);border:1px solid var(--borda);border-radius:18px;padding:1.1rem 1.2rem;margin-top:1rem}
.bloco h2{font-family:var(--display);font-weight:800;font-size:1.05rem;margin:0 0 .6rem;letter-spacing:-.01em}
.bloco p{margin:0}
.lista summary{cursor:pointer;font-weight:600;padding:.3rem 0}
.lista ul{list-style:none;padding:0;margin:.3rem 0 .6rem}
.lista li{padding:.4rem 0;border-bottom:1px solid var(--borda);display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.btn-od{background:transparent;border:1px solid var(--borda);color:var(--tx);border-radius:50%;width:32px;height:32px;cursor:pointer;flex:none}
.btn-od.tocando{background:var(--p);border-color:var(--p);color:#fff}
.od-player{position:sticky;bottom:.5rem;display:flex;align-items:center;gap:.8rem;background:var(--f);border:1px solid var(--borda);
  border-radius:12px;padding:.5rem .8rem;margin-top:.6rem}
.od-player audio{flex:1;height:36px;min-width:0}

/* ---- contato ---- */
.contato form{display:grid;gap:.6rem}
.contato input,.contato textarea{width:100%;background:var(--vidro);border:1px solid var(--borda);color:var(--tx);border-radius:10px;padding:.6rem .7rem;font:inherit}
.contato input:focus,.contato textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb, var(--p) 25%, transparent)}
.contato button{justify-self:start;background:var(--p);color:#fff;border:0;border-radius:10px;padding:.65rem 1.2rem;font:inherit;font-weight:700;cursor:pointer}
.contato .retorno{margin-top:.4rem;font-size:.92rem}
.contato .retorno.ok{color:#7ff0b4}.contato .retorno.erro{color:#ff9d9d}
.isca{position:absolute;left:-9999px;opacity:0;height:0;width:0}


/* ---- tema clássico: marca e player lado a lado, num cartão ---- */
body[data-tema="classico"] .marca{flex-direction:row;text-align:left;justify-content:flex-start;gap:1rem}
body[data-tema="classico"] .marca .logo{width:auto;height:116px;max-width:260px;max-height:116px;border-radius:18px;padding:.4rem}
@media (max-width:600px){body[data-tema="classico"] .marca .logo{height:88px;max-width:200px}}
body[data-tema="classico"] .marca h1{font-size:clamp(1.3rem,4vw,1.8rem)}
body[data-tema="classico"] .player{flex-direction:row;text-align:left;align-items:center;padding:1.1rem 1.2rem;border-radius:18px;gap:1rem}
body[data-tema="classico"] .play{width:68px;height:68px}
body[data-tema="classico"] .play svg{width:28px;height:28px}
body[data-tema="classico"] .faixa-info{flex:1}
body[data-tema="classico"] .eq{order:-1;display:none}
body[data-tema="classico"] .controles{width:auto;flex-direction:column;align-items:flex-end;gap:.4rem}
body[data-tema="classico"] .controles input[type=range]{width:120px}
@media (max-width:600px){body[data-tema="classico"] .player{flex-wrap:wrap;justify-content:center;text-align:center}
  body[data-tema="classico"] .controles{width:100%;flex-direction:row;justify-content:center}}

/* ---- tema mínimo: só a barra ---- */
body[data-tema="minimal"] .pagina{max-width:640px;padding-top:1.2rem}
body[data-tema="minimal"] .marca,body[data-tema="minimal"] .bloco,body[data-tema="minimal"] .eq{display:none}
body[data-tema="minimal"] .player{flex-direction:row;text-align:left;padding:.8rem 1rem;border-radius:16px;gap:.9rem}
body[data-tema="minimal"] .play{width:54px;height:54px}
body[data-tema="minimal"] .play svg{width:22px;height:22px}
body[data-tema="minimal"] .faixa-info{flex:1}
body[data-tema="minimal"] .titulo{font-size:1rem}
body[data-tema="minimal"] .controles{width:auto}
body[data-tema="minimal"] .controles input[type=range]{width:90px}
body[data-tema="minimal"] .canais{margin-top:.8rem}
body[data-tema="minimal"] .tocar-aviso{border-radius:16px}

/* ---- embed: cabe em 120px de altura ---- */
body.embed{padding:0;min-height:0;background-image:none}
body.embed .pagina{padding:.4rem;max-width:none}
body.embed .player{flex-direction:row;text-align:left;padding:.55rem .8rem;border-radius:12px;gap:.7rem}
body.embed .logo-player{height:52px;width:auto;max-width:110px;object-fit:contain;border-radius:10px;background:#fff;padding:.25rem;flex:none}
@media (max-width:420px){body.embed .logo-player{display:none}}
body.embed .play{width:48px;height:48px}
body.embed .play svg{width:20px;height:20px}
body.embed .faixa-info{flex:1}
body.embed .titulo{font-size:.95rem}
body.embed .artista,body.embed .programa{font-size:.8rem}
body.embed .eq{display:none}
body.embed .controles{width:auto}
body.embed .controles input[type=range]{width:80px}
body.embed .tocar-aviso{border-radius:12px}