/* Modelo A · pôster (caminho C) · base: tokens, textura, cabeçalho, índice, objeto */
:root{--k:#0B0B0B;--k2:#151413;--w:#F1EEE6;--g:#B9B4AC;--red:#E3402D;--flag:#C12637;--org:#D66624;--yel:#F4E764;--acid:#93DE2E;--grn:#0DA922;--mag:#CD2D8E;--vio:#5223C4;--gold:#EAB244;--blu:#3B448F;
 --ease:cubic-bezier(.16,1,.3,1);--fast:120ms;--std:240ms;--slow:480ms;--pad:40px;--topo:84px;--base:76px;--vw:1vw;--vh:1vh;--vmin:1vmin;color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--k);color:var(--w);overflow:hidden;overscroll-behavior:none;font-family:Archivo,system-ui,sans-serif;font-size:18px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
[hidden]{display:none!important}
.px{font-family:"VT323",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.03em;font-weight:400}
.hv{font-family:"Archivo Black",Archivo,sans-serif;text-transform:uppercase;letter-spacing:-.03em;font-weight:400}
.sc{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:900;text-transform:none;letter-spacing:0}
.dt{font-family:"Bodoni Moda",Georgia,serif;font-weight:700}
.echo{text-shadow:0 .05em 0 var(--red),0 .1em 0 var(--mag),0 .15em 0 var(--vio)}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--yel);outline-offset:3px}
/* textura contida: só grão e linhas leves (a leitura vem primeiro) */
.ov{position:fixed;inset:0;pointer-events:none;z-index:90}
.ov .grao{position:absolute;inset:-10%;opacity:.09;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grao .48s steps(4) infinite}
.ov .linhas{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 4px)}
@keyframes grao{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}
.faixa{position:absolute;left:var(--l,30%);width:var(--wd,50%);top:var(--t,60%);height:var(--h,6px);background:var(--fc,var(--mag));opacity:.45;mix-blend-mode:screen;pointer-events:none}
/* cabeçalho e rodapé (fixos) */
.topo{position:fixed;left:0;right:0;top:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad);font-size:22px;pointer-events:none}
.topo>*{pointer-events:auto}
.ldr-canto{font-family:"Archivo Black";font-size:30px;letter-spacing:-.02em;line-height:1}
.topo .r{display:flex;gap:24px;align-items:center}
.pill{border:2px solid var(--w);padding:3px 12px 1px;font-size:22px}
.pill[aria-pressed=true]{background:var(--acid);color:var(--k);border-color:var(--acid)}
.prog{position:fixed;left:0;top:0;height:6px;width:0;background:var(--c,var(--yel));z-index:61;transition:width var(--slow) var(--ease),background var(--std)}
.rodape{position:fixed;left:var(--pad);right:var(--pad);bottom:18px;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:22px}
.rodape button{padding:3px 12px 1px;background:rgba(11,11,11,.8)}
.rodape .voltar{border:2px solid var(--w)}
.rodape .prox{text-align:right;color:var(--w)}
.rodape .prox:hover,.rodape .voltar:hover{color:var(--yel);border-color:var(--yel)}
/* troca de tela: chapa de cor que atravessa (brand book: 300 ms entra, 200 ms sai) */
#chapa{position:fixed;inset:0;z-index:70;background:var(--cc,var(--yel));transform:translateX(-101%);pointer-events:none}
/* objeto central (módulo trocável: js/objeto.js) */
#objeto{position:fixed;z-index:2;aspect-ratio:1;pointer-events:none;transition:opacity var(--slow) var(--ease),width var(--slow) var(--ease),right var(--slow) var(--ease),top var(--slow) var(--ease),bottom var(--slow) var(--ease)}
#objeto img{width:100%;height:100%;display:block;will-change:transform}
body.em-indice #objeto{width:min(1300px,calc(150*var(--vh)));right:-34%;top:50%;bottom:auto;transform:translateY(-50%);opacity:1}
body.em-tela #objeto{width:min(720px,calc(82*var(--vh)));right:-22%;bottom:-48%;top:auto;transform:none;opacity:.38}
body.em-tela.sem-objeto #objeto{opacity:0}
body.em-abertura #objeto{opacity:0}
/* índice: menu tipográfico gigante (cheio e contorno alternados) */
#indice{position:fixed;inset:0;z-index:20;background:linear-gradient(90deg,rgba(11,11,11,.94) 0,rgba(11,11,11,.72) 46%,rgba(11,11,11,0) 74%)}
#indice .lista{position:absolute;left:var(--pad);top:var(--topo);bottom:var(--base);width:68%;display:flex;flex-direction:column;justify-content:space-between}
#indice .row{display:flex;align-items:baseline;gap:16px;line-height:.86;white-space:nowrap;position:relative;text-align:left;width:max-content;max-width:100%}
#indice .row .n{font-size:24px;color:var(--red);min-width:30px;transform:translateY(-.2em)}
#indice .row .t{font-family:"Archivo Black";text-transform:uppercase;letter-spacing:-.03em;color:var(--w);display:inline-block;transition:color var(--fast) var(--ease)}
#indice .row:nth-child(even) .t{color:transparent;-webkit-text-stroke:2px var(--w)}
#indice .row.on .t{color:var(--yel)!important;-webkit-text-stroke:0;text-shadow:0 .05em 0 var(--red),0 .1em 0 var(--mag),0 .15em 0 var(--vio)}
#indice .row .go{position:absolute;left:100%;margin-left:18px;top:-6px;background:var(--mag);color:var(--w);font-size:28px;padding:2px 14px 6px;border-radius:12px;box-shadow:0 0 0 5px var(--w);transform:rotate(-6deg) scale(0);transition:transform var(--std) var(--ease)}
#indice .row.on .go{transform:rotate(-6deg) scale(1)}
#indice .tag{position:absolute;right:var(--pad);bottom:var(--base);font-size:18px;background:rgba(11,11,11,.85);color:var(--yel);padding:4px 8px}
/* abertura (adesivos) */
#abertura{position:fixed;inset:0;z-index:80;background:var(--k);overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none}
.parede{position:absolute;inset:0;pointer-events:none}
.st{position:absolute;opacity:0;line-height:1}
.stk{display:inline-block;font-family:"Archivo Black",sans-serif;white-space:nowrap;padding:.16em .42em;border-radius:.42em;line-height:.92;text-align:center;box-shadow:0 0 0 .1em #F1EEE6,0 .12em .28em rgba(0,0,0,.5)}
.stk.sc2{font-family:"Playfair Display",serif;font-style:italic;font-weight:900;padding:.08em .45em .2em;border-radius:999px}
.stk.px2{font-family:"VT323",monospace;font-weight:400;border-radius:.16em;padding:.12em .42em}
.stk.ring{border-radius:50%;width:2.5em;height:2.5em;display:flex;align-items:center;justify-content:center;padding:0;font-size:.82em;box-shadow:0 0 0 .12em #F1EEE6,inset 0 0 0 .1em currentColor,inset 0 0 0 .16em transparent,0 .12em .28em rgba(0,0,0,.5)}
.st.recorte{filter:drop-shadow(0 .1em .14em rgba(0,0,0,.5))}
.borda{display:inline-block;background:#F1EEE6;padding:.09em}
.borda .stk{box-shadow:none;border-radius:0}
.tape,.borda.tape{clip-path:polygon(3% 0,100% 0,97% 50%,100% 100%,0 100%,3% 50%,0 0)}
.tear,.borda.tear{clip-path:polygon(0 8%,12% 0,30% 6%,48% 0,66% 7%,84% 0,100% 6%,98% 92%,82% 100%,62% 94%,40% 100%,20% 93%,0 100%)}
.stk.tape{font-family:"VT323",monospace;font-weight:400;letter-spacing:.06em;padding:.14em .8em}
.stk.tear{font-family:"Bodoni Moda",serif;font-weight:700;padding:.2em .55em}
#abertura .ldr{position:relative;z-index:6;width:min(calc(62*var(--vmin)),380px);aspect-ratio:1;border-radius:50%;background:var(--k);border:4px solid var(--w);display:flex;align-items:center;justify-content:center;font-size:min(calc(17*var(--vmin)),104px);color:var(--w);box-shadow:0 0 0 10px var(--k),0 10px 40px rgba(0,0,0,.6);text-transform:none}
.dica-entrar{position:absolute;left:0;right:0;bottom:64px;text-align:center;font-size:22px;color:var(--g);z-index:7;animation:chama 1.6s var(--ease) infinite}
@keyframes chama{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.porta-barra{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;z-index:7}
.porta-barra button{font-size:18px;color:var(--g);padding:4px 10px;border:1px solid #3a3836;background:rgba(11,11,11,.8)}
/* celular */
@media (max-width:767px){
 :root{--pad:16px;--topo:64px;--base:58px}
 html,body{font-size:16px}
 .topo{padding:14px var(--pad);font-size:18px}.ldr-canto{font-size:24px}.topo .r{gap:10px}.pill{font-size:18px;padding:2px 8px 0}
 .rodape{bottom:12px;font-size:18px}.rodape .prox span{display:none}
 #indice{background:linear-gradient(rgba(11,11,11,.55),rgba(11,11,11,.8))}
 #indice .lista{left:var(--pad);right:var(--pad);width:auto;top:92px}
 #indice .row{gap:8px}#indice .row .n{font-size:17px;min-width:20px}#indice .row:nth-child(even) .t{-webkit-text-stroke:1.2px var(--w)}
 #indice .row .go{font-size:19px;left:auto;right:0;top:-18px;box-shadow:0 0 0 3px var(--w)}
 #indice .tag{right:var(--pad);top:64px;bottom:auto;font-size:15px}
 body.em-indice #objeto{width:760px;right:-62%;top:56%}
 body.em-tela #objeto{width:420px;right:-40%;bottom:-24%}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:1ms!important}.ov .grao,.dica-entrar{animation:none}}
body.em-indice .rodape,body.em-indice .prog,body.em-abertura .rodape{display:none}
#objeto img{mix-blend-mode:lighten}
#indice .row:focus-visible{outline:none}
#indice .row:focus-visible .n{background:var(--yel);color:var(--k)}

/* alinhado com o Modelo B (19/10): abre com a logo completa, LDR. sem círculo e fora da capa */
#abertura .ldr{width:auto;aspect-ratio:auto;border:0;border-radius:0;padding:.14em .32em .1em;font-size:min(calc(13*var(--vmin)),132px);letter-spacing:-.05em}
.ldr-canto{transition:opacity var(--slow) var(--ease)}
body.na-capa .ldr-canto{opacity:0;pointer-events:none}