:root{
  --fundo:#0c1022; --fundo2:#131a33; --card:#18203d; --borda:#2a3560;
  --txt:#e8ecff; --suave:#9aa5cf;
  --verde:#39ff88; --laranja:#ff7a2f; --ouro:#ffd34d; --rosa:#ff5d73;
  --pixel:'Pixelify Sans', monospace; --corpo:'Inter', system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--fundo);color:var(--txt);font:16px/1.6 var(--corpo);
  background-image:linear-gradient(rgba(57,255,136,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(57,255,136,.035) 1px,transparent 1px);
  background-size:24px 24px}
a{color:var(--verde)}
h1,h2,h3,.kicker,.btn,.marca{font-family:var(--pixel)}
img,svg,canvas{max-width:100%;display:block}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:20px;padding:12px 24px;
  background:rgba(12,16,34,.92);backdrop-filter:blur(6px);border-bottom:2px solid var(--borda)}
.marca{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:700;color:var(--txt);text-decoration:none}
.led{width:10px;height:10px;background:var(--verde);box-shadow:0 0 8px var(--verde);animation:pisca 1.6s steps(2) infinite}
#menu{display:flex;gap:18px;margin-left:auto}
#menu a{color:var(--suave);text-decoration:none;font-size:14px}
#menu a:hover{color:var(--verde)}
.btn-menu{display:none;margin-left:8px;background:none;border:2px solid var(--borda);color:var(--txt);font-size:18px;padding:4px 10px;cursor:pointer}

/* ---------- botões ---------- */
.btn{display:inline-block;background:var(--verde);color:#06210f;border:none;padding:12px 20px;font-size:16px;font-weight:700;
  text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 #0a7a3c;transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #0a7a3c}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #0a7a3c}
.btn-sec{background:var(--card);color:var(--txt);border:2px solid var(--borda);box-shadow:4px 4px 0 #050812}
.btn-sec:hover{box-shadow:5px 5px 0 #050812}
.btn-pq{padding:8px 14px;font-size:14px}
.acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}

/* ---------- hero ---------- */
.hero{max-width:1150px;margin:0 auto;padding:60px 24px 40px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.kicker{color:var(--laranja);text-transform:uppercase;letter-spacing:2px;font-size:14px;margin:0 0 8px}
h1{font-size:clamp(44px,7vw,80px);line-height:1;margin:0 0 18px}
h1 em{font-style:normal;color:var(--ouro);text-shadow:4px 4px 0 #8a5a00}
.lead{color:var(--suave);font-size:17px;max-width:520px}
.contador{display:inline-flex;align-items:center;gap:14px;margin-top:10px;padding:12px 18px;border:2px solid var(--verde);background:rgba(57,255,136,.06)}
.contador strong{font-family:var(--pixel);font-size:34px;color:var(--verde)}
.contador span{font-size:12px;line-height:1.2;color:var(--suave);text-transform:uppercase;letter-spacing:1px}
.hero-arte svg{width:100%;border:4px solid var(--borda);box-shadow:8px 8px 0 #050812;image-rendering:pixelated}
.legenda{text-align:center;color:var(--suave);font-size:14px;margin-top:12px}
.legenda b{color:var(--ouro)}
.tela{animation:digita 2.4s steps(4) infinite}
.t2{animation-delay:.4s}.t3{animation-delay:.8s}
.led-pc{animation:pisca 1s steps(2) infinite}
.coroa{animation:flutua 2s steps(2) infinite}
@keyframes pisca{50%{opacity:.2}}
@keyframes digita{0%{opacity:0}25%{opacity:1}}
@keyframes flutua{50%{transform:translateY(-1px)}}

/* ---------- números ---------- */
.numeros{max-width:1150px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.numeros div{background:var(--card);border:2px solid var(--borda);padding:16px;text-align:center}
.numeros strong{display:block;font-family:var(--pixel);font-size:30px;color:var(--ouro)}
.numeros span{font-size:12px;color:var(--suave);text-transform:uppercase;letter-spacing:1px}

/* ---------- blocos ---------- */
.bloco{max-width:1150px;margin:0 auto;padding:70px 24px 10px}
h2{font-size:clamp(30px,4.5vw,44px);margin:0 0 10px;line-height:1.1}
.sub{color:var(--suave);max-width:640px;margin:0 0 26px}
.nota{color:var(--suave);font-size:14px}
.destaque{margin-top:60px;padding:40px;background:var(--fundo2);border:2px solid var(--laranja);box-shadow:8px 8px 0 #4a1f05}
.destaque p{max-width:720px}
.campo{width:100%;background:var(--fundo);color:var(--txt);border:2px solid var(--borda);padding:11px 12px;font:15px var(--corpo);margin-top:6px}
.campo:focus{outline:none;border-color:var(--verde)}

.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.passos article{background:var(--card);border:2px solid var(--borda);padding:22px}
.passos span{display:inline-grid;place-items:center;width:38px;height:38px;background:var(--laranja);color:#2a0f00;font:700 20px var(--pixel)}
.passos h3{margin:12px 0 6px;font-size:22px}
.passos p{margin:0;color:var(--suave);font-size:15px}

/* ---------- planta (prédio) ---------- */
.barra{height:22px;border:2px solid var(--borda);background:var(--fundo);padding:3px}
#barra-fill{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--verde) 0 10px,#2bd170 10px 12px);transition:width 1.2s steps(20)}
.predio{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column-reverse;gap:8px}
.predio li{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;padding:16px 18px;background:var(--card);border:2px solid var(--borda)}
.predio .ico{font-size:30px;text-align:center}
.predio h3{margin:0;font-size:20px}
.predio p{margin:2px 0 0;color:var(--suave);font-size:14px}
.predio .meta{font-family:var(--pixel);font-size:14px;color:var(--suave);text-align:right;white-space:nowrap}
.predio .aberto{border-color:var(--verde)}
.predio .aberto .meta{color:var(--verde)}
.predio .atual{background:linear-gradient(90deg,rgba(57,255,136,.12),var(--card));box-shadow:6px 6px 0 #0a7a3c}
.predio .fechado{opacity:.55}
.predio .fechado .ico{filter:grayscale(1)}
.predio .fechado h3::after{content:" 🔒";font-size:15px}

/* ---------- episódios ---------- */
.eps{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.ep{background:var(--card);border:2px solid var(--borda);padding:18px;text-decoration:none;color:var(--txt);display:block}
a.ep:hover{border-color:var(--verde)}
.ep small{font-family:var(--pixel);color:var(--laranja);letter-spacing:1px}
.ep h3{margin:4px 0;font-size:20px}
.ep p{margin:0;color:var(--suave);font-size:14px}
.ep.breve{border-style:dashed}

/* ---------- equipe ---------- */
#busca{max-width:420px;margin:0 0 20px}
.equipe{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.pessoa{display:flex;gap:12px;align-items:center;background:var(--card);border:2px solid var(--borda);padding:14px}
.pessoa.chefe{border-color:var(--ouro)}
.pessoa canvas{width:48px;height:56px;image-rendering:pixelated;flex:none;background:var(--fundo)}
.pessoa b{display:block;font-family:var(--pixel);font-size:18px}
.pessoa span{display:block;color:var(--suave);font-size:13px}
.pessoa a{font-size:13px;text-decoration:none}

/* ---------- crachá ---------- */
.cracha-grid{display:grid;grid-template-columns:1fr 360px;gap:30px;align-items:start}
.cracha-form label{display:block;margin-bottom:16px;font-size:13px;color:var(--suave);text-transform:uppercase;letter-spacing:1px}
.cores{display:flex;gap:10px;margin-top:8px}
.cores button{width:36px;height:36px;border:3px solid var(--borda);cursor:pointer}
.cores button[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px var(--verde)}
.cracha-prev canvas{width:100%;border:2px solid var(--borda);box-shadow:8px 8px 0 #050812}

/* ---------- perguntas ---------- */
details{background:var(--card);border:2px solid var(--borda);margin-bottom:10px;padding:0 18px}
summary{cursor:pointer;padding:16px 0;font-weight:600}
details p{margin:0 0 16px;color:var(--suave)}

.rodape{margin-top:80px;padding:30px 24px;border-top:2px solid var(--borda);text-align:center;color:var(--suave);font-size:14px}
.rodape p{margin:4px 0}

/* ---------- celular ---------- */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:36px}
  .hero-arte{order:-1}
  .numeros{grid-template-columns:repeat(2,1fr)}
  .passos{grid-template-columns:1fr}
  .cracha-grid{grid-template-columns:1fr}
  .cracha-prev{max-width:320px;margin:0 auto}
  .destaque{padding:26px}
  #menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--fundo2);border-bottom:2px solid var(--borda)}
  #menu a{padding:14px 24px;border-top:1px solid var(--borda)}
  .menu-aberto #menu{display:flex}
  .btn-menu{display:block}
  .topo .btn-pq{margin-left:auto}
  .predio li{grid-template-columns:40px 1fr;}
  .predio .meta{grid-column:2;text-align:left}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}