/*
 * Hérnia de Disco — a HOME DO DIA DA FESTA (rodada 08).
 *
 * Era o `<style>` do `home-dia-da-festa.html` do pacote, liberado lá por HASH de CSP.
 * Aqui é arquivo, como nas homes da rodada 07 (REGISTRO-2026-09-28 §3.4): com hash,
 * qualquer ajuste de CSS quebraria a página EM SILÊNCIO. A CSP fica `style-src 'self'`.
 *
 * Diferenças para o pacote:
 *   - o estado mora no `data-estado` do <body> ("dia-hoje", "dia-rolando"…), a
 *     convenção do projeto, e não no <html data-estado="1">;
 *   - o esgotado e o canal do app são decididos no servidor (o bloco nem sai no
 *     HTML), então as regras de `data-esgotado`/`data-canal` do pacote não existem;
 *   - o "Copiar endereço" alterna dois <span> que já vêm no HTML.
 *
 * ⚠️ /assets/ é imutável (1 ano de cache): mudou este arquivo, troque o nome (-v2), as
 * views que o chamam e a linha dele em tests/assets-imutaveis.txt.
 */
:root{--bg:#0b0a08;--ink:#f1d9a6;--mute:#d6c39c;--mus:#ddaa20;--ora:#e85a16;--pet:#087d9a;--red:#c71919;--vin:#781510;--line:#8a7a66;--dk:#1a1512;--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}
/* ⚠️ O `hidden` vale display:none — mas qualquer regra com `display` o sobrepõe (o
   `.b2` é flex). Sem o !important, o "Copiar endereço" apareceria sem script. */
[hidden]{display:none!important}
html{font-size:100%;-webkit-text-size-adjust:100%}
/* "Esqueci os óculos" (CSS puro, sem JS) e o #g da conferência a 200%. */
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:1.125rem/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}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0}
.wrap{max-width:75rem;margin:0 auto;padding:0 1rem}

/* ═══ OS QUATRO ESTADOS ═══════════════════════════════════════════════════════
   Cada bloco diz em que estados aparece (`data-s="hoje rolando"`). O `~=` casa uma
   palavra da lista. Sem estado reconhecido, nada de `data-s` aparece — mas o servidor
   sempre imprime um. */
[data-s]{display:none}
body[data-estado="dia-hoje"] [data-s~="hoje"],
body[data-estado="dia-rolando"] [data-s~="rolando"],
body[data-estado="dia-volta"] [data-s~="volta"],
body[data-estado="dia-acabou"] [data-s~="acabou"]{display:block}

/* ═══ TIPOGRAFIA ══════════════════════════════════════════════════════════════ */
.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}
.call{font:italic 700 1.3125rem/1.3 var(--ser);text-wrap:pretty}

/* ═══ BARRA E TARJA (os parciais `_topo` e `_tarja`) ══════════════════════════ */
.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)}
.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}
.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}

/* ═══ TOPO DE CADA ESTADO ═════════════════════════════════════════════════════ */
.hero{display:grid;gap:.875rem;padding-top:.5rem}
/* `lighten` funde o preto do WebP ao fundo: sem canal alfa, o arquivo fica menor. */
.logo{mix-blend-mode:lighten;display:block;margin-top:1rem;width:min(100%,15rem);height:auto;aspect-ratio:880/470}
.big{font-size:min(3.5rem,15vw);margin:0;text-shadow:3px 3px 0 var(--red),6px 6px 0 var(--vin)}
.big.md{font-size:min(2.75rem,12vw)}
.where{border:2px solid var(--ink);padding:.75rem;display:grid;gap:.25rem}
.where .disp{font-size:min(1.625rem,9vw)}
/* "AO VIVO" escrito: o estado nunca é só a cor do ponto. */
.live{display:inline-flex;align-items:center;gap:.5rem;font:700 .875rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mus)}
.live i{width:.75rem;height:.75rem;border-radius:50%;background:currentColor}
.clock{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,6rem),1fr));gap:.5rem}
.clock div{border:2px solid var(--ink);padding:.5rem;text-align:center}
.clock b{display:block;font:400 min(2.5rem,12vw)/1 var(--disp)}
.st{display:grid;gap:.75rem}
.bl{font-size:1.25rem}
.sm{font-size:1rem;color:var(--mute)}
.ns{text-shadow:none}
.m0{margin:0}

/* ═══ BOTÕES — toque ≥ 56 px (a regra da noite) ═══════════════════════════════ */
.cta{overflow-wrap:anywhere;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 min(1.625rem,8vw)/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:none}
.cta:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.b2{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.5rem;padding:.5rem 1rem;border:2px solid var(--ink);color:var(--ink);background:none;font:700 1.125rem/1.2 var(--sans);text-decoration:none;text-align:center;overflow-wrap:anywhere;cursor:pointer;width:100%}
.b2:hover{background:var(--ink);color:var(--bg)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr));gap:.625rem}

/* ═══ SEÇÕES ══════════════════════════════════════════════════════════════════ */
section{padding-top:2rem;min-width:0}
.h{font-size:min(2.125rem,10vw);margin:.375rem 0 .75rem;text-shadow:2px 2px 0 var(--red),4px 4px 0 var(--vin)}

/* Chegar: <details> nativos, abrem sem script. */
.via{display:grid;gap:.625rem}
.via details{border:2px solid var(--ink)}
.via summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:4rem;padding:.5rem 1rem;cursor:pointer;list-style:none;font:400 min(1.625rem,8vw)/1 var(--disp);text-transform:uppercase}
.via summary::-webkit-details-marker{display:none}
.via summary::after{content:"+";font-family:var(--mono);font-weight:700}
.via [open] summary{background:var(--ink);color:var(--bg)}
.via [open] summary::after{content:"−"}
.via .in{display:grid;gap:.75rem;padding:1rem}
/* O endereço fica escrito e selecionável: "copiar" funciona até sem a área de
   transferência (e sem script). */
.addr{font:700 1.125rem/1.35 var(--sans);user-select:all;overflow-wrap:anywhere}

/* O que levar: o receituário. */
.rx{position:relative;margin-top:.75rem;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);box-shadow:4px 4px 0 #000}
.rx .lbl{color:var(--bg)}
.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)}
.poso{display:grid;gap:.125rem;margin:0}
.poso dt{font:700 .8125rem var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-top:.75rem}
.poso dd{margin:0;overflow-wrap:anywhere}

/* Leve a festa no celular (só com o app no ar). Some com o app instalado (`.inst`,
   do hd-dia-v1.js), e o botão principal some fora do estado 1 — ele já está no topo. */
.leve{margin-top:.75rem;border:1px solid var(--vin);outline:1px solid var(--red);outline-offset:-6px;padding:1.25rem 1rem;display:grid;gap:.875rem}
.inst .leve{display:none}
body:not([data-estado="dia-hoje"]) .leve .cta{display:none}

/* Estado 2: os atalhos do app e o lugar do check-in. */
.atal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.atal a{display:grid;place-items:center;min-height:4rem;border:2px solid var(--ink);color:var(--ink);text-decoration:none;font:400 min(1.375rem,6.5vw)/1 var(--disp);text-transform:uppercase}
.atal a:hover{background:var(--ink);color:var(--bg)}
.ck-in{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3.5rem;padding:.5rem 1rem;border:2px dashed var(--mus);color:var(--ink);text-decoration:none;font:700 1.125rem var(--sans)}

/* Estado 3: "Voltar pra casa", mostarda cheio, tinta escura (contraste 9,28). */
.volta{margin-top:1.25rem;background:var(--mus);color:var(--dk);padding:1.25rem 1rem;display:grid;gap:.75rem;box-shadow:.3125rem .3125rem 0 var(--red)}
.volta .lbl{color:var(--dk)}
.volta .disp{font-size:min(2.5rem,12vw)}
.volta .b2{border-color:var(--dk);color:var(--dk)}
.volta .b2:hover{background:var(--dk);color:var(--mus)}

/* Estado 4: "Ainda na rua". */
.rua{margin-top:1.75rem;border:1px dashed var(--line);padding:1rem;display:grid;gap:.625rem}

/* Quem não tem ingresso (estados 1 e 2) — ou o carimbo do esgotado, escrito. */
.sem{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin-top:1rem;font-size:1rem;color:var(--mute)}
.esg{display:inline-block;border:3px solid var(--red);padding:0 .4rem;transform:rotate(-4deg);font:400 1.25rem var(--disp);text-transform:uppercase;color:var(--ink)}

/* ═══ O "ME AVISE" (o parcial `_avise-home` da rodada 07) ═════════════════════ */
.av{display:grid;gap:.625rem;margin-top:1rem;max-width:30rem}
.av label{font:700 .875rem var(--mono);letter-spacing:.06em;text-transform:uppercase}
.av input{min-height:3.5rem;padding:0 .875rem;background:var(--ink);color:var(--dk);border:3px solid var(--bg);outline:2px solid var(--line);border-radius:2px;font:1.125rem var(--sans);width:100%}
.av input::placeholder{color:#5f5347}
.av input:focus{outline:3px solid var(--mus)}
.av button{width:100%;cursor:pointer}
.sub{margin:.875rem 0 0;font-size:1rem;color:var(--mute);max-width:30rem}
/* Campo-armadilha: fora da tela, mas no formulário, para o robô preencher. */
.armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ═══ LISTRAS, RODAPÉ, AVISO DE COOKIES ═══════════════════════════════════════ */
.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%}
footer{margin-top:2.5rem;padding:1.25rem 0 3rem;border-top:1px solid var(--line);color:var(--mute);font-size:1rem}
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}
.brand{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
footer .brand img{display:block;height:1.375rem;width:auto;opacity:.85}
.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 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}

/* ═══ DESKTOP ═════════════════════════════════════════════════════════════════ */
@media (min-width:56rem){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 2.5rem;align-items:end}
  .big{font-size:5rem}
  .big.md{font-size:4rem}
  .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;align-items:start}
  .call{font-size:1.625rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}