/* Páginas legais: HTML puro, para abrirem sem JavaScript e poderem ser publicadas em qualquer hospedagem. Mesmas cores do site (docs/DESIGN-BLUIX-DARK.md). */
:root{
 color-scheme:dark;
 --bg:#0f0f0f;--surface:#1a1a1a;--hover:#222;--border:#2e2e2e;--text:#fff;--text-2:#aaa;--read:#d4d4d4;--link:#8dbaff;--insight:#f9ab00;
 --font:Inter,"Segoe UI Variable","Segoe UI",Roboto,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--read);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
a{color:var(--link);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:4px}
.pular{position:absolute;left:16px;top:-64px;padding:10px 16px;background:var(--surface);border-radius:8px;z-index:2}
.pular:focus{top:12px}

.topo{border-bottom:1px solid var(--border)}
.largura{width:min(1040px,100% - 48px);margin-inline:auto}
.topo .largura{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.marca{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-size:18px;font-weight:700;letter-spacing:-.02em;text-decoration:none}
.marca img{width:30px;height:30px;border-radius:8px}
.voltar{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:500;text-decoration:none}
.voltar:hover{text-decoration:underline}

.rascunho{margin-top:32px;padding:14px 18px;background:var(--surface);border:1px solid var(--insight);border-radius:12px;font-size:14px}
.rascunho strong{color:var(--text);font-weight:600}
mark{padding:0 4px;background:#3d2c00;color:#ffd777;border-radius:4px}

.cabeca{padding:40px 0 32px}
.cabeca h1{color:var(--text);font-size:clamp(30px,4vw,40px);font-weight:700;line-height:1.15;letter-spacing:-.02em}
.cabeca .resumo{margin-top:14px;max-width:68ch;font-size:18px;line-height:1.5;color:var(--read)}
.cabeca .data{margin-top:14px;font-size:14px;color:var(--text-2)}

.corpo{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;align-items:start;padding-bottom:64px}
.indice{position:sticky;top:24px;font-size:14px}
.indice>p,.indice-celular summary{color:var(--text);font-weight:500}
.indice ol{list-style:none;margin-top:10px}
.indice a{display:block;padding:6px 0;color:var(--text-2);line-height:1.35;text-decoration:none}
.indice a:hover{color:var(--text)}
.indice-celular{display:none;margin-bottom:32px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;font-size:14px}
.indice-celular summary{min-height:24px;cursor:pointer}
.indice-celular ol{list-style:none;margin-top:8px}
.indice-celular a{display:block;padding:8px 0;color:var(--text-2);text-decoration:none}

article{max-width:68ch}
article section{padding-top:32px;margin-top:32px;border-top:1px solid var(--border)}
article section:first-child{padding-top:0;margin-top:0;border-top:0}
article h2{color:var(--text);font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
article h3{margin-top:22px;color:var(--text);font-size:16px;font-weight:600;line-height:1.4}
article p{margin-top:12px}
article ul,article ol{margin-top:12px;padding-left:22px}
article li{margin-top:8px}
article li::marker{color:var(--text-2)}
article strong{color:var(--text);font-weight:600}

.rodape{border-top:1px solid var(--border);font-size:14px;color:var(--text-2)}
.rodape .largura{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;padding:20px 0}
.rodape a{display:inline-flex;align-items:center;min-height:32px}

@media(max-width:860px){
 .corpo{grid-template-columns:minmax(0,1fr);gap:0}
 .indice{display:none}
 .indice-celular{display:block}
 article{max-width:none}
}
@media(max-width:600px){
 .largura{width:calc(100% - 32px)}
 .cabeca{padding:28px 0 24px}
 .cabeca .resumo{font-size:16px}
 .rascunho{margin-top:20px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
