@font-face{font-family:Bangers;src:url(assets/fontes/bangers-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:Anton;src:url(assets/fontes/anton-latin-400-normal.woff2) format('woff2');font-display:swap}
:root{--amarelo:#FFC400;--claro:#FFE27A;--preto:#111;--verm:#E3192B;--azul:#1E6FE0;--roxo:#8E44AD;--papel:#FFF8E1}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--amarelo);color:var(--preto);font:18px/1.55 Georgia,'Times New Roman',serif;overflow-wrap:anywhere}
img{max-width:100%;height:auto;display:block}
a{color:var(--preto)}
.pular{position:absolute;left:-999px;top:0}.pular:focus{left:12px;top:12px;background:#fff;padding:10px 14px;z-index:10;border-radius:8px}
:focus-visible{outline:4px solid var(--azul);outline-offset:3px}
.topo{background:var(--preto);padding:10px 16px}
.topo .linha{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:10px;color:var(--amarelo);text-decoration:none;font:30px/1 Bangers,Impact,sans-serif;letter-spacing:2px}
.marca img{width:44px;height:44px;border-radius:50%}
nav{display:flex;flex-wrap:wrap;gap:4px}
nav a{color:#fff;text-decoration:none;font:20px/1 Anton,Impact,sans-serif;letter-spacing:1px;padding:12px;min-height:44px;display:inline-flex;align-items:center;border-radius:10px}
nav a:hover,nav a[aria-current=page]{background:var(--amarelo);color:var(--preto)}
@media(max-width:480px){nav a{font-size:17px;padding:12px 8px}}
main{max-width:1100px;margin:0 auto;padding:28px 16px 64px}
h1,h2,h3{font-family:Bangers,Impact,sans-serif;font-weight:400;letter-spacing:2px;line-height:1.05;margin:0 0 12px}
h1{font-size:clamp(46px,10vw,96px)}h2{font-size:clamp(32px,6.5vw,54px)}h3{font-size:32px}
h1 .verm{color:var(--verm);-webkit-text-stroke:3px var(--preto);paint-order:stroke fill;display:block}
.sub{font:clamp(22px,4vw,30px)/1.2 Anton,Impact,sans-serif;letter-spacing:1px;margin:0 0 18px}
.heroi{display:grid;gap:22px;align-items:center;margin-bottom:30px}
@media(min-width:860px){.heroi{grid-template-columns:1.05fr 1fr}}
.capa{border:5px solid var(--preto);border-radius:22px;width:100%}
.botoes{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.botao{display:inline-flex;align-items:center;justify-content:center;background:var(--preto);color:var(--amarelo);font:22px/1.1 Anton,Impact,sans-serif;letter-spacing:1px;text-decoration:none;padding:14px 22px;border-radius:14px;border:3px solid var(--preto);min-height:52px;cursor:pointer}
.botao.claro{background:#fff;color:var(--preto)}.botao.verm{background:var(--verm);color:#fff}
.botao:hover{transform:translateY(-2px)}
.botao[aria-disabled=true]{opacity:.55;pointer-events:none}
.grade{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.cartao{background:var(--claro);border:5px solid var(--preto);border-radius:22px;padding:20px}
.cartao img{margin:0 auto 12px;border-radius:12px}
.cartao p{margin:0 0 14px}
.faixa{background:var(--preto);color:var(--amarelo);text-align:center;font:clamp(24px,5vw,38px)/1.2 Anton,Impact,sans-serif;letter-spacing:2px;padding:16px;border-radius:18px;margin:30px 0}
.fig{background:var(--claro);border:5px solid var(--preto);border-radius:22px;padding:12px;text-align:center}
.fig .xadrez{background:repeating-conic-gradient(#fff 0 25%,#e8e8e8 0 50%) 0 0/24px 24px;border-radius:14px;padding:6px}
.fig img{width:100%;max-width:200px;margin:0 auto}
.fig p{font:22px/1.1 Bangers,Impact,sans-serif;letter-spacing:1px;margin:8px 0}
.fig .dl{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.fig .dl a{font:17px/1 Anton,Impact,sans-serif;background:var(--preto);color:var(--amarelo);text-decoration:none;padding:10px 14px;border-radius:10px;min-height:44px;display:inline-flex;align-items:center}
ol.passos{padding-left:1.3em}ol.passos li{margin-bottom:10px}
.aviso{background:#fff;border:4px dashed var(--preto);border-radius:16px;padding:14px 18px;margin:18px 0}
.livro{display:grid;gap:20px}
@media(min-width:900px){.livro{grid-template-columns:1fr 320px;align-items:start}}
.pagina{background:var(--papel);border:5px solid var(--preto);border-radius:22px;padding:22px;min-height:420px}
.pagina .num{font:clamp(70px,16vw,120px)/1 Bangers,Impact,sans-serif;color:var(--verm);-webkit-text-stroke:4px var(--preto);paint-order:stroke fill;letter-spacing:2px}
.pagina img{width:100%;max-width:240px;margin:6px auto 14px}
.pagina p#texto{font-size:21px}
.esc{display:block;width:100%;text-align:left;margin:0 0 12px;background:var(--amarelo);border:4px solid var(--preto);border-radius:16px;padding:14px 16px;font:21px/1.3 Anton,Impact,sans-serif;letter-spacing:.5px;cursor:pointer;color:var(--preto);min-height:52px}
.esc:hover:not(:disabled){background:#ffd633}.esc:disabled{opacity:.5;cursor:not-allowed}
.esc b{background:var(--preto);color:var(--amarelo);border-radius:8px;padding:2px 10px;margin-left:8px;white-space:nowrap}
.ficha{background:var(--claro);border:5px solid var(--preto);border-radius:22px;padding:20px}
.ficha h2{font-size:42px}.ficha ul{padding-left:1.2em;margin:6px 0 16px}
.gota{display:inline-block;width:26px;height:26px;border:4px solid var(--preto);border-radius:50%;background:#6EC3FF;margin-right:4px;vertical-align:middle}.gota.v{background:#fff}
.resultado{font:26px/1.2 Anton,Impact,sans-serif;background:#fff;border:4px solid var(--preto);border-radius:14px;padding:12px 16px;margin:0 0 12px}
.rodape{background:var(--preto);color:#fff;padding:22px 16px;text-align:center;font-size:16px}
.rodape a{color:var(--amarelo)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.botao:hover{transform:none}}