/* ==========================================================================
   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}
@font-face{font-family:'Montserrat';src:url('/static/fonts/montserrat-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/static/fonts/montserrat-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/static/fonts/montserrat-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/static/fonts/montserrat-700.woff2') format('woff2');font-weight:700;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 'Montserrat',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-top:1.4rem;padding-bottom:2.4rem;color:var(--sub);font-size:.9rem;
  display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap}

/* documentos legais */
.doc-topo{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.2rem;padding-bottom:1.2rem;flex-wrap:wrap}
.doc-topo img{height:44px;width:auto}
.doc-topo nav{display:flex;gap:.5rem;flex-wrap:wrap}
.doc-topo nav a{color:var(--sub);text-decoration:none;font-weight:600;font-size:.9rem;padding:.4rem .8rem;border-radius:999px;border:1px solid var(--bord)}
.doc-topo nav a[aria-current]{color:#fff;border-color:var(--ciano);background:rgba(34,200,250,.15)}
.doc{max-width:820px;padding-bottom:3rem;line-height:1.65}
.doc h1{font-size:2rem;margin:.6rem 0 .3rem}
.doc h2{font-size:1.25rem;margin:2rem 0 .6rem}
.doc h3{font-size:1.02rem;margin:1.3rem 0 .4rem}
.doc p,.doc li{color:var(--tx)}
.doc .sub{color:var(--sub)}
.doc ul,.doc ol{padding-left:1.4rem}
.doc li{margin:.35rem 0}
.doc table{width:100%;border-collapse:collapse;font-size:.92rem;margin:.6rem 0 1rem}
.doc th,.doc td{text-align:left;vertical-align:top;padding:.5rem .6rem;border-bottom:1px solid var(--bord)}
.doc th{color:var(--sub);font-weight:600;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase}
.doc a{color:var(--ciano)}
.doc .alerta{background:#241d06;border:1px solid #5c4a1a;color:#ffe3a3;padding:.6rem .8rem;border-radius:9px}
@media (max-width:640px){.doc table{display:block;overflow-x:auto}}

/* ---- rádios da plataforma: vitrine da inicial e diretório /radios ---- */
.vitrine{padding:0 0 4rem}
.vitrine h2,.diretorio h1{font-family:var(--display);font-weight:800;letter-spacing:-.01em}
.vitrine h2{font-size:1.4rem;margin:0 0 1rem}
.diretorio{padding-bottom:3rem}
.diretorio h1{font-size:clamp(1.6rem,4.5vw,2.3rem);margin:.6rem 0 .4rem}
.resumo-dir{color:var(--sub);margin:0 0 1.4rem;max-width:60ch}
.cartoes-radios{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.8rem}
.cartao-radio{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:var(--tx);background:var(--card);
  border:1px solid var(--bord);border-radius:14px;padding:.8rem 1rem;transition:.12s;min-width:0}
.cartao-radio:hover{border-color:var(--ciano)}
.cartao-radio img{width:56px;height:56px;border-radius:12px;flex:none;background:#04101d}
.cartao-radio .dados{display:flex;flex-direction:column;min-width:0;flex:1}
.cartao-radio strong{font-weight:700;overflow-wrap:anywhere}
.cartao-radio .onde,.cartao-radio .slogan{color:var(--sub);font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cartao-radio .no-ar{flex:none;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#bfe9ff;
  border:1px solid #1d5f86;border-radius:999px;padding:.2rem .55rem}
.ver-todas{margin:1rem 0 0}
@media (max-width:640px){.cartoes-radios{grid-template-columns:1fr}}

/* ---- Página de vendas e cadastro (20/10/2026) ---- */
.topo-vendas{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;padding-bottom:1rem;flex-wrap:wrap}
.topo-vendas img{height:42px;width:auto}
.topo-vendas nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.topo-vendas nav a:not(.btn){color:var(--sub);text-decoration:none;font-weight:600;font-size:.92rem}
.topo-vendas nav a:not(.btn):hover{color:var(--tx)}
.btn.grande{padding:.9rem 1.7rem;font-size:1.05rem}
.miudo{font-size:.85rem;margin-top:.8rem}
.recursos.seis{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.recursos.seis{grid-template-columns:1fr}}
.titulo-secao{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,4vw,2.1rem);letter-spacing:-.01em;text-align:center;margin:0 0 1.4rem}
.como{padding-bottom:4rem}
.passos-vendas{list-style:none;counter-reset:p;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:0;margin:0}
@media (max-width:820px){.passos-vendas{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.passos-vendas{grid-template-columns:1fr}}
.passos-vendas li{counter-increment:p;background:var(--card);border:1px solid var(--bord);border-radius:14px;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.3rem}
.passos-vendas li::before{content:counter(p);font-family:var(--display);font-weight:800;font-size:1.6rem;background:var(--sinal);-webkit-background-clip:text;background-clip:text;color:transparent}
.passos-vendas li span{color:var(--sub);font-size:.92rem}
#planos{padding-bottom:4rem}
.resumo-planos{text-align:center;color:var(--sub);margin:-.6rem 0 1rem}
.alternar-ciclo{display:flex;justify-content:center;gap:.4rem;margin:0 0 1.6rem}
.alternar-ciclo label{border:1px solid var(--bord);border-radius:999px;padding:.4rem 1rem;cursor:pointer;font-weight:600;font-size:.92rem}
.alternar-ciclo label:has(input:checked){border-color:var(--ciano);background:rgba(34,200,250,.12)}
.alternar-ciclo input{position:absolute;opacity:0;pointer-events:none}
.selo{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#3ddc97;margin-left:.3rem}
.cartoes-planos{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;align-items:stretch}
.cartao-plano{position:relative;background:var(--card);border:1px solid var(--bord);border-radius:18px;padding:1.4rem 1.3rem;display:flex;flex-direction:column;gap:.4rem}
.cartao-plano.destaque{border-color:var(--ciano);box-shadow:0 0 0 1px var(--ciano),0 18px 40px rgba(10,107,247,.18)}
.cartao-plano h3{font-family:var(--display);font-weight:800;font-size:1.3rem;margin:0}
.cartao-plano .sub{color:var(--sub);margin:0;font-size:.9rem}
.cartao-plano .preco{margin:.6rem 0 0}
.cartao-plano .preco strong{font-family:var(--display);font-size:2rem;font-weight:800}
.cartao-plano .preco small{color:var(--sub);margin-left:.2rem}
.cartao-plano .btn{margin-top:auto;text-align:center}
.fita{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--sinal);color:#04121f;font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .8rem;border-radius:999px}
.lista-recursos{list-style:none;padding:0;margin:.8rem 0 1.2rem;display:flex;flex-direction:column;gap:.4rem;font-size:.92rem}
.lista-recursos li::before{content:'✓';color:#3ddc97;font-weight:800;margin-right:.5rem}
.lista-recursos li.nao{color:#5e7894}
.lista-recursos li.nao::before{content:'—';color:#5e7894}
.perguntas-vendas{max-width:820px;padding-bottom:4rem}
.perguntas-vendas details{border-bottom:1px solid var(--bord);padding:.9rem 0}
.perguntas-vendas summary{cursor:pointer;font-weight:700}
.perguntas-vendas p{color:var(--sub);margin:.6rem 0 0}
.chamada-final{text-align:center;padding-bottom:4rem}
.chamada-final h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,4vw,2.2rem);margin:0 0 1.2rem}
.alerta{border:1px solid #b4472f;background:rgba(255,90,60,.1);border-radius:12px;padding:.7rem 1rem}
.alerta.aviso{border-color:#8a6d1d;background:rgba(255,210,63,.08)}
.cadastro{max-width:560px;padding-bottom:3rem}
.cadastro h1{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,4.5vw,2.2rem);margin:.6rem 0 .3rem}
.form-cadastro{display:flex;flex-direction:column;gap:.9rem;margin-top:1rem}
.form-cadastro label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.92rem}
.form-cadastro label.chk{flex-direction:row;align-items:flex-start;gap:.5rem;font-weight:500}
.form-cadastro input:not([type=radio]):not([type=checkbox]){background:#04101d;border:1px solid var(--bord);border-radius:10px;color:var(--tx);padding:.7rem .8rem;font:inherit;font-weight:500}
.form-cadastro input:focus{outline:2px solid var(--ciano);outline-offset:1px}
.form-cadastro small{font-weight:400}
.endereco{display:flex;align-items:center;gap:0}
.endereco input{flex:1;min-width:0;border-top-right-radius:0!important;border-bottom-right-radius:0!important}
.endereco .sufixo{background:#0b1e33;border:1px solid var(--bord);border-left:0;border-radius:0 10px 10px 0;padding:.7rem .7rem;color:var(--sub);font-weight:500;white-space:nowrap;font-size:.88rem}
.planos-mini{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem}
.planos-mini legend{font-weight:600;font-size:.92rem;margin-bottom:.3rem}
.planos-mini label{border:1px solid var(--bord);border-radius:12px;padding:.6rem .8rem;cursor:pointer;font-weight:500!important;display:flex;flex-direction:column}
.planos-mini label:has(input:checked){border-color:var(--ciano);background:rgba(34,200,250,.1)}
.planos-mini input{position:absolute;opacity:0;pointer-events:none}
.planos-mini span{color:var(--sub);font-size:.85rem}
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){.topo-vendas nav a:not(.btn){display:none}}
button.btn{font:inherit;font-weight:700;cursor:pointer}
.form-cadastro label.chk{display:block;font-weight:500}
.form-cadastro label.chk input{margin-right:.5rem;vertical-align:-2px}