/*
 * Hérnia de Disco — tokens e componentes compartilhados (era resources/views/site/_estilo.blade.php)
 *
 * ⚠️ ESTE ARQUIVO ERA UM BLOCO <style> DENTRO DO HTML.
 *
 * Saiu de lá para a CSP poder ser `style-src 'self'` — sem `'unsafe-inline'`.
 * A alternativa seria calcular o hash de cada bloco e listá-lo no nginx, o que
 * amarra a configuração do servidor ao conteúdo da view: qualquer ajuste de CSS
 * quebraria a página EM SILÊNCIO, com o estilo bloqueado e a página crua no ar.
 *
 * Como arquivo, não há hash para sincronizar, e ele ainda é cacheado entre as
 * páginas que o usam. Publicado pelo `site:assets` junto com os outros assets.
 */
:root{--bg:#0b0a08;--ink:#f1d9a6;--mute:#d6c39c;--mus:#ddaa20;--ora:#e85a16;--pet:#087d9a;--red:#c71919;--vin:#781510;--line:#8a7a66;--disp:Impact,Haettenschweiler,"Arial Narrow Bold","Franklin Gothic Bold",sans-serif;--ser:Georgia,"Times New Roman",serif;--mono:"Courier New",Courier,monospace;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
/* ⚠️ OBRIGATÓRIO, e a falta dele é silenciosa. O atributo `hidden` do HTML vale
   `display:none` — mas QUALQUER regra que defina `display` o sobrepõe, e `.cta`
   define `display:flex`. Sem este `!important`, as três versões do texto
   personalizado apareceriam empilhadas na home, sem nada em console.
   Ver resources/views/site/home.blade.php. */
[hidden]{display:none!important}
html{font-size:100%;-webkit-text-size-adjust:100%}
html:has(#oculos:checked){font-size:137.5%}
html:has(#g:target){font-size:200%}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.5 var(--sans);overflow-x:hidden}
a{color:var(--mus)}a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.wrap{max-width:75rem;margin:0 auto;padding:0 1rem}
.lbl{font:700 .8125rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mus)}
.disp{overflow-wrap:anywhere;hyphens:auto;font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.01em}
.top{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.625rem 0;border-bottom:1px solid #2b2620}
.top .lbl{color:var(--ink)}
.brand{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.brand img{display:block;height:auto;max-width:100%}
.eye{position:absolute;opacity:0;width:1px;height:1px}
.eyeb{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 .75rem;border:2px solid var(--ink);border-radius:4px;font:700 .875rem var(--sans);cursor:pointer}
#oculos:checked+.eyeb{background:var(--ink);color:var(--bg)}
#oculos:focus-visible+.eyeb{outline:3px solid var(--mus);outline-offset:3px}
.hero img{mix-blend-mode:lighten;display:block;width:100%;height:auto;aspect-ratio:880/470}
.tag{font:italic 700 1.3125rem/1.3 var(--ser);text-align:center;margin:.25rem auto 0;max-width:30ch;text-wrap:pretty}
.tix{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));border:2px solid var(--ink);margin-top:1.25rem}
.tix>div{padding:.75rem;border:1px solid var(--ink);margin:-1px}
.tix .disp{font-size:min(1.875rem,10vw);margin-top:.375rem}
.cta{overflow-wrap:anywhere;font-size:min(1.625rem,8vw)!important;display:flex;align-items:center;justify-content:center;gap:.625rem;min-height:4rem;padding:.75rem 1rem;background:var(--mus);color:var(--bg);border:3px solid var(--bg);outline:2px solid var(--mus);box-shadow:.3125rem .3125rem 0 var(--red);font:400 1.625rem/1.05 var(--disp);text-transform:uppercase;text-decoration:none;text-align:center;transition:transform .12s,box-shadow .12s}
.cta:hover{color:var(--bg);transform:translate(-2px,-2px);box-shadow:.45rem .45rem 0 var(--red)}
.cta:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--red)}
.cta:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.sub{text-align:center;margin:.875rem 0 0}
.stripes{display:grid;gap:5px;margin:1.75rem 0 0}
.stripes i{display:block;height:10px}
.stripes i:nth-child(1){background:var(--red);width:88%}.stripes i:nth-child(2){background:var(--ora);width:76%}.stripes i:nth-child(3){background:var(--mus);width:64%}.stripes i:nth-child(4){background:var(--pet);width:52%}
section{padding-top:1.75rem;min-width:0}.grid>*,.two>*{min-width:0}main,.wrap{min-width:0}.tracks li>div,.steps li>span{min-width:0;overflow-wrap:anywhere}
.big{font-size:min(2.75rem,13vw);overflow-wrap:anywhere;margin:.5rem 0 0;text-shadow:3px 3px 0 var(--red)}
.rx{position:relative;max-width:100%;margin-top:1.25rem;padding:1.5rem 1rem 1.25rem;background:var(--ink) repeating-linear-gradient(0deg,transparent 0 1.9rem,rgba(8,125,154,.22) 1.9rem calc(1.9rem + 1px));color:var(--bg);transform:rotate(-.6deg);box-shadow:4px 4px 0 #000}
.rx::before{content:"";position:absolute;top:-.8rem;left:50%;width:6.5rem;height:1.6rem;margin-left:-3.25rem;background:rgba(214,193,143,.9);transform:rotate(3deg)}
.rx .lbl{color:var(--bg)}
/* Carimbo sobre o creme em VINHO, não em vermelho: vermelho sobre creme dava 4,25:1,
   abaixo do mínimo para texto pequeno. Vinho sobre creme dá 7,95:1 (rodada 07, §6). */
.rx .stamp{position:absolute;right:.75rem;top:1rem;transform:rotate(-10deg);border:3px solid var(--vin);color:var(--vin);padding:0 .4rem;font:400 1.125rem var(--disp)}
.av{display:grid;gap:.5rem}
.av label{font-weight:700;font-size:1.0625rem}
.av input{min-height:3.5rem;padding:0 .875rem;font:1.1875rem var(--sans);background:var(--ink);color:var(--bg);border:3px solid var(--bg);outline:1px solid var(--line);width:100%}
/* Placeholder em #5F5347: 5,41:1 sobre o creme. O anterior dava 4,48 e reprovava. É
   EXEMPLO no campo, nunca rótulo — o rótulo de verdade é o <label>. */
input::placeholder{color:#5f5347;opacity:1}
.av input:focus{outline:3px solid var(--mus);outline-offset:3px}
.av button{cursor:pointer;width:100%;margin-top:.5rem}
.clock{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,5.5rem),1fr));gap:.5rem;margin-top:1rem}
.clock div{border:2px solid var(--ink);padding:.5rem;text-align:center}
.clock b{display:block;font:400 min(2.125rem,10vw)/1 var(--disp)}
.steps{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.5rem;counter-reset:s}
.steps li{display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:.625rem;align-items:start;counter-increment:s}
.steps li::before{content:counter(s);font:400 1.5rem/1.2 var(--disp);color:var(--bg);background:var(--mus);text-align:center}
.side{display:flex;align-items:center;gap:.875rem}
.side{flex-wrap:wrap}.side .disp{font-size:min(2.125rem,11vw)}
.tracks{list-style:none;margin:.75rem 0 0;padding:0;font-size:1.125rem;line-height:1.35}
.tracks li{display:flex;gap:.75rem;padding:.625rem 0;border-bottom:1px dashed var(--line)}
.tracks li:last-child{border:0}
.tracks span{font:700 1rem var(--mono);color:var(--mus);flex:none}
.acts{display:grid;gap:.625rem;margin-top:.875rem}
/* ⚠️ OS BLOCOS DO LADO B MUDARAM DE CONSTRUÇÃO POR CONTRASTE (rodada 07, §6).
   Com a paleta nova, preto sobre petróleo dá 4,16:1 e preto sobre vermelho 3,38:1 —
   os dois só servem para texto GRANDE (≥ 24 px). Então a cor fica só na faixa do
   título, e o corpo de 17 px vai em creme sobre o fundo, dentro de uma moldura da cor
   do bloco. Corrige também o bloco vermelho, que já reprovava no corpo antes. */
.act{border:3px solid var(--c);background:var(--bg)}
.act h3{padding:.5rem .875rem .375rem;background:var(--c);color:var(--bg);font-size:min(1.625rem,9vw)}
.act p{margin:0;padding:.75rem .875rem .875rem;font-size:1.0625rem;line-height:1.35}
.a1{--c:var(--red)}.a2{--c:var(--ora)}.a3{--c:var(--pet)}
.end{margin-top:2.5rem;padding:1.5rem 0 0;border-top:2px solid var(--ink)}
footer{margin-top:2.5rem;padding:1.25rem 0 6rem;border-top:1px solid var(--line);color:var(--mute)}
footer nav{display:flex;gap:1.25rem;flex-wrap:wrap}
footer nav a{color:var(--ink);min-height:2.75rem;display:inline-flex;align-items:center}
footer p{margin:.5rem 0 0}
footer .brand img{height:1.375rem;width:auto;opacity:.85}

/* ── Utilitários que substituem os `style=` inline ────────────────────────────
   Estavam como atributo em cada elemento. Saíram de lá porque hash de CSP cobre
   BLOCO `<style>` e não cobre ATRIBUTO `style` — com atributos inline, o
   `style-src` fica preso ao `'unsafe-inline'` para sempre, que é exatamente a
   brecha que a CSP existe para fechar. O handoff pede isto na entrega 1. */
.hero h1{margin:0}
.cta-wrap{margin-top:1.25rem}
.pt{margin:.75rem 0 0}
.h2m{font-size:min(2.125rem,10vw);margin:.5rem 0 0}
.h2m.gap{margin-bottom:.75rem}
.act h3{margin:0}
.selo-pet{color:var(--pet)}
.fim{font-size:min(2rem,10vw);margin:0 0 1rem;text-align:center}
.fim-cta{max-width:30rem;margin:0 auto}
.espaco{margin-top:1.5rem}
/* Campo-armadilha: fora da tela mas ainda no formulário, para o robô preencher.
   `display:none` não serve — muito robô ignora campo oculto por display. */
.armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ck{position:fixed;left:.5rem;right:.5rem;bottom:.5rem;max-width:36rem;margin:0 auto;background:var(--ink);color:var(--bg);padding:.875rem;border:3px solid var(--bg);box-shadow:0 0 0 2px var(--ink);display:none;gap:.75rem;font-size:1rem;line-height:1.4}
.ck.on{display:grid}
/* `.ck` é grid com gap: a margem do parágrafo só somaria espaço. */
.ck p{margin:0}
.ck a{color:var(--bg)}
.ck div{display:flex;gap:.5rem;flex-wrap:wrap}
.ck button{flex:1 1 8rem;min-height:2.75rem;font:700 1rem var(--sans);border:2px solid var(--bg);background:transparent;color:var(--bg);cursor:pointer}
.ck button+button{background:var(--bg);color:var(--ink)}
.ck button:focus-visible{outline:3px solid var(--red);outline-offset:2px}
/* ── Rodada 07 ──────────────────────────────────────────────────────────────
   A TARJA "INGRESSOS LIMITADOS" (§5): a tarja vermelha da caixa de remédio, o aviso
   que ninguém discute. Texto de verdade, nunca imagem, e NUNCA com número. Creme sobre
   vinho, 7,95:1. Nos estados esgotados ela continua: quem dá a notícia é o carimbo. */
.tarja{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.25rem .875rem;margin:.75rem 0 0;padding:.5rem .75rem;background:var(--vin);color:var(--ink);border-block:3px solid var(--red);text-align:center}
.tarja b{font:400 min(1.625rem,8vw)/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere}
.tarja span{font:700 .8125rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
/* Só para leitor de tela: o "(abre o site da rádio)" do link ao vivo. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Ação secundária: mesma altura de toque do `.cta`, peso visual menor. */
.btn2{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;padding:.5rem 1rem;border:2px solid var(--ink);color:var(--ink);font:700 1.0625rem var(--sans);text-decoration:none;text-align:center;overflow-wrap:anywhere}
.btn2:hover{background:var(--ink);color:var(--bg)}
.btn2-wrap{margin-top:.875rem}
/* Selo escrito, nunca só cor: "NO AR AGORA" / "ABERTA AGORA". */
.onair{display:inline-flex;align-items:center;gap:.5rem;margin:0;padding:.25rem .625rem;border:2px solid var(--red);font:700 .8125rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.onair i{width:.625rem;height:.625rem;border-radius:50%;background:var(--red)}
.sen{font-size:min(1.875rem,9vw);color:var(--mus);margin:.5rem 0 0}
.big.abre{margin-top:.75rem}
/* "Ainda não ouviu a senha?" — a grade dos programas. */
.ouv{margin-top:1.5rem;padding:1rem;border:2px dashed var(--line);display:grid;gap:.75rem}.ouv p{margin:0}
.prog{list-style:none;margin:0;padding:0;border:2px solid var(--ink)}
.prog li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.125rem .75rem;padding:.5rem .75rem;border-bottom:1px dashed var(--line)}.prog li:last-child{border:0}
.prog b{font:400 1.25rem/1.1 var(--disp);text-transform:uppercase;letter-spacing:.02em}.prog span{font:700 .9375rem var(--mono);color:var(--mus)}
/* O carimbo dos estados esgotados. É ele — e não a tarja — que dá a notícia. */
.carimbo{display:inline-block;margin:0;transform:rotate(-4deg);border:4px solid var(--red);padding:.25rem .75rem;font:400 min(2rem,10vw)/1 var(--disp);letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere}
.big.nota{margin-top:1rem}
.lead{font-size:1.25rem;margin:1rem 0 0}
.av.sep{margin-top:1.25rem}
/* Posologia (rótulo em mono, valor abaixo). Estava só na hype; o estado 3 e o 5
   também usam. Uma coluna sempre: em duas, o par rótulo/valor se perde. */
.poso{display:grid;grid-template-columns:minmax(0,1fr);gap:.125rem;margin:0 0 1rem}
.poso dt{font:700 .8125rem var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-top:.625rem}
.poso dd{margin:0;overflow-wrap:anywhere}
.cta-sm{min-height:3.5rem;font-size:min(1.25rem,7vw)!important}
/* As telas do "me avise" (enviado · confirmado · link inválido). */
.msg{max-width:36rem;margin:0 auto;padding:2rem 0 0;display:grid;gap:1rem}.msg p{margin:0;font-size:1.125rem}.msg .joke{font:italic 700 1.1875rem var(--ser)}.msg .big{margin:0}
@media (min-width:56rem){
 .grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2.5rem;align-items:center;padding-top:1.5rem}
 .tag{font-size:1.625rem}
 .big{font-size:3.5rem}
 .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem}
 .acts{grid-template-columns:1fr}
 .stripes i:nth-child(1){width:70%}.stripes i:nth-child(2){width:60%}.stripes i:nth-child(3){width:50%}.stripes i:nth-child(4){width:40%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}