/* Devolutiva pessoal — cromo. Os gráficos estão em viz.css. Mobile-first. */
.topo{position:sticky; top:0; z-index:40; background:var(--papel); border-bottom:1px solid var(--fio)}
.topo-in{width:min(760px,100% - 2rem); margin:0 auto; display:flex; justify-content:space-between; align-items:center; height:52px; gap:.8rem}
.marca{display:inline-flex; align-items:center; gap:.6rem; font:600 .9rem var(--font-display); color:var(--tinta); text-decoration:none}
.marca-cin{font:800 1.15rem/1 var(--font-display); color:var(--acento); letter-spacing:-.04em}
.marca-sep{width:1px; height:18px; background:var(--fio)}
.topo-dir{display:flex; align-items:center; gap:.5rem}
.tarja{font:500 .62rem var(--font-mono); letter-spacing:.08em; color:var(--acento); border:1.5px solid var(--acento); padding:.25rem .45rem; border-radius:3px; white-space:nowrap}
.botao-lk{font:500 .85rem var(--font-text); color:var(--tinta); background:transparent; border:1px solid var(--fio); border-radius:6px; padding:.4rem .6rem; cursor:pointer}
.botao{display:inline-block; font:600 .95rem var(--font-display); color:#fff; background:var(--acento); border:0; border-radius:6px; padding:.8rem 1.2rem; text-decoration:none; cursor:pointer}
.botao.fantasma{background:transparent; color:var(--tinta); border:1.5px solid var(--fio)}

.cenas .in{width:min(760px,100% - 2rem)}
.cena{padding:clamp(2.4rem,7vh,4.5rem) 0; min-height:60svh}
.cena.abre{min-height:calc(100svh - 52px); display:grid; align-items:center}
.duo{display:grid; grid-template-columns:1fr auto 1fr; gap:.8rem; align-items:center; margin:1.4rem 0}
.duo .lado{border-top:1px solid var(--fio); padding-top:.7rem} .duo .lado small{display:block; font:400 .68rem var(--font-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:.3rem}
.duo .lado b{display:block; font:700 clamp(1.3rem,1.1rem + 1.6vw,1.9rem)/1.05 var(--font-display); letter-spacing:-.03em} .duo .lado.real b{color:var(--acento)}
.duo .seta{font:400 1.4rem var(--font-display); color:var(--acento)}
.serif{font:400 clamp(1.15rem,1.05rem + .8vw,1.5rem)/1.35 var(--font-serif); color:var(--tinta); margin:1rem 0 0; text-wrap:balance}
.chip{display:inline-block; font:500 .72rem var(--font-mono); padding:.25rem .5rem; border:1px solid var(--fio); border-radius:4px; color:var(--tinta-2); margin:.2rem .2rem 0 0}
.percentis{display:grid; gap:1.1rem}
.perc{border-top:1px solid var(--fio); padding-top:.7rem}
.perc-cab{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font:400 .9rem var(--font-text)} .perc-cab b{font:700 1.5rem/1 var(--font-display); letter-spacing:-.03em; color:var(--acento)} .perc-cab small{font:400 .7rem var(--font-mono); color:var(--tinta-3)}
.perc-t{position:relative; height:8px; background:var(--papel-2); border-radius:4px; margin-top:.5rem}
.perc-f{position:absolute; left:0; top:0; bottom:0; background:var(--acento); border-radius:4px; transition:width 1s cubic-bezier(.2,.7,.2,1)}
.perc-v{position:absolute; top:-5px; width:18px; height:18px; border-radius:50%; background:var(--tinta); border:2px solid var(--papel); transform:translateX(-50%); transition:left 1s cubic-bezier(.2,.7,.2,1)}
.trilha-p{border-left:2px solid var(--acento); padding:.2rem 0 .2rem 1rem; margin:1.2rem 0}
.trilha-p small{display:block; font:500 .68rem var(--font-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--acento)}
.trilha-p b{display:block; font:600 clamp(1.05rem,1rem + .5vw,1.3rem)/1.3 var(--font-display); margin:.25rem 0}
.trilha-p span{display:block; font:400 .92rem/1.5 var(--font-text); color:var(--tinta-2)}
.acoes{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem}
.passos{position:fixed; right:.6rem; top:50%; transform:translateY(-50%); display:grid; gap:.5rem; z-index:30}
.passos a{width:8px; height:8px; border-radius:50%; background:var(--tinta-4); display:block} .passos a[aria-current="true"]{background:var(--acento); transform:scale(1.35)}
@media (max-width:720px){ .passos{display:none} .duo{grid-template-columns:1fr; gap:.4rem} .duo .seta{transform:rotate(90deg); justify-self:start} }