/* ==========================================================================
   Tá Tocando! — página de entrada da plataforma.
   Mesmo ambiente do painel (navy de estúdio), com o logotipo em tamanho real
   e o sinal ciano→azul reservado para o que está no ar.
   ========================================================================== */
@font-face{font-family:'Outfit';src:url('/static/fonts/outfit-800.woff2') format('woff2');font-weight:800;font-display:swap}

:root{--fundo:#061423;--card:#0b1e33;--bord:#1c3d61;--ciano:#22c8fa;--azul:#0a6bf7;
  --sinal:linear-gradient(135deg,var(--ciano),var(--azul));--tx:#e8f2fb;--sub:#8fa9c4;--noar:#ff4d4d;
  --display:'Outfit',system-ui,sans-serif}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--fundo);color:var(--tx);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background-image:radial-gradient(900px 460px at 50% -8%, #0e3357 0%, transparent 70%)}
a{color:var(--ciano)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ciano);outline-offset:3px}

.faixa{max-width:1000px;margin:0 auto;padding:0 1.5rem}
@media (max-width:640px){.faixa{padding:0 1rem}}

/* ---- abertura ---- */
.abertura{padding:clamp(3rem,9vw,5.5rem) 0 clamp(2.5rem,6vw,4rem);text-align:center}
.abertura img{width:min(460px,86vw);height:auto}
.tese{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,5.4vw,3.1rem);
  line-height:1.05;letter-spacing:-.02em;margin:1.8rem 0 .8rem}
.tese em{font-style:normal;background:var(--sinal);-webkit-background-clip:text;background-clip:text;color:transparent}
.resumo{color:var(--sub);font-size:clamp(1rem,2.2vw,1.12rem);max-width:38ch;margin:0 auto 1.8rem}

/* ---- a lâmpada: o estado real da plataforma, não enfeite ---- */
.lampada{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:800;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px;
  border:1px solid var(--bord);background:#04101d;color:var(--sub)}
.lampada .ponto{width:8px;height:8px;border-radius:50%;background:#294664;flex:none}
.lampada[data-estado="musica"]{color:#bfe9ff;border-color:#1d5f86}
.lampada[data-estado="musica"] .ponto{background:var(--ciano);
  box-shadow:0 0 0 3px rgba(34,200,250,.16),0 0 10px rgba(34,200,250,.7);animation:respira 2.6s ease-in-out infinite}
@keyframes respira{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.lampada .ponto{animation:none}}

.acoes{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
.btn{display:inline-block;text-decoration:none;border-radius:10px;padding:.7rem 1.4rem;font-weight:700;
  border:1px solid var(--bord);color:var(--tx);background:#102842;transition:.12s}
.btn:hover{background:#16375a}
.btn.primario{background:var(--sinal);border:0;color:#04121f}
.btn.primario:hover{filter:brightness(1.08)}

/* ---- o que a plataforma faz, do lado de quem usa ---- */
.recursos{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1rem 0 4rem}
@media (max-width:820px){.recursos{grid-template-columns:1fr}}
.recurso{background:var(--card);border:1px solid var(--bord);border-radius:14px;padding:1.2rem 1.3rem}
.recurso h2{font-family:var(--display);font-weight:800;font-size:1.05rem;margin:.7rem 0 .4rem;letter-spacing:-.01em}
.recurso p{margin:0;color:var(--sub);font-size:.95rem}
.recurso .sinal{display:block;width:34px;height:4px;border-radius:2px;background:var(--sinal)}

.rodape{border-top:1px solid var(--bord);padding:1.4rem 0 2.4rem;color:var(--sub);font-size:.9rem;
  display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap}