:root{
  --azul:#2563EB; --tinta:#0F0F0F; --bg:#0F0F0F; --bg-2:#161616; --fg:#fff; --fg-2:rgba(255,255,255,.86); --fg-3:rgba(255,255,255,.62);
  --linha:rgba(255,255,255,.15); --linha-f:rgba(255,255,255,.09); --azul-txt:color-mix(in srgb, #2563EB 55%, #fff);
  --display:"Playfair Display", Georgia, serif; --corpo:"IBM Plex Sans", system-ui, sans-serif; --mono:"IBM Plex Mono", ui-monospace, monospace;
  --gut:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; color-scheme:dark; scrollbar-color:#4a4a4a var(--bg)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--bg); color:var(--fg-2); font:400 1.0625rem/1.7 var(--corpo); letter-spacing:.005em}
a{color:var(--fg)}
::selection{background:var(--azul); color:#fff}
:focus-visible{outline:2px solid var(--azul); outline-offset:3px}
.wrap{max-width:1200px; margin:0 auto; padding:0 var(--gut)}
.topo{position:sticky; top:0; z-index:20; background:rgba(15,15,15,.88); backdrop-filter:saturate(1.5) blur(10px); border-bottom:1px solid var(--linha-f)}
.topo .wrap{display:flex; align-items:center; justify-content:space-between; height:72px; gap:1rem}
.marca{display:inline-flex; align-items:baseline; gap:.75rem; color:var(--fg); text-decoration:none; line-height:1}
.marca-nome{font:400 1.8rem/1 var(--display); letter-spacing:-.01em; color:var(--fg)}
.marca-nome span{color:var(--azul)}
.marca-por{font-size:.75rem; color:var(--fg-3); white-space:nowrap}
@media (max-width:720px){ .marca{flex-direction:column; align-items:flex-start; gap:.3rem} .marca-nome{font-size:1.5rem} .marca-por{font-size:.6875rem} }
.voltar{font-size:.9375rem; color:var(--fg-3); text-decoration:none}
.voltar:hover{color:var(--fg)}
.doc{max-width:46rem; padding:clamp(3rem,7vw,5.5rem) 0 clamp(4rem,8vw,6rem)}
.doc h1{font:400 clamp(2.2rem,5vw,3.4rem)/1.1 var(--display); color:var(--fg); margin:0 0 .8rem; text-wrap:balance}
.doc .data{font:500 .75rem/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); margin:0 0 2.5rem}
.doc .resumo{font-size:1.15rem; color:var(--fg); padding:1.4rem 0; border-top:1.5px solid var(--fg); border-bottom:1px solid var(--linha); margin:0 0 1rem}
.doc h2{font:400 1.6rem/1.2 var(--display); color:var(--fg); margin:2.75rem 0 .8rem; scroll-margin-top:90px}
.doc h2 .num{font:500 .8125rem/1 var(--mono); color:var(--azul-txt); margin-right:.6rem; vertical-align:.25em}
.doc p{margin:0 0 1rem; text-wrap:pretty}
.doc ul{margin:0 0 1rem; padding-left:1.2rem}
.doc li{margin:.35rem 0; text-wrap:pretty}
.doc li::marker{color:var(--azul-txt)}
.doc strong{color:var(--fg); font-weight:600}
.doc table{width:100%; border-collapse:collapse; margin:.5rem 0 1.25rem; font-size:.9375rem}
.doc th,.doc td{text-align:left; vertical-align:top; padding:.7rem .8rem .7rem 0; border-bottom:1px solid var(--linha)}
.doc th{font:500 .75rem/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); border-bottom:1.5px solid var(--fg)}
.doc code{font-family:var(--mono); font-size:.875em; color:var(--fg)}
.btn-ck{font:inherit; color:var(--fg); background:none; border:0; padding:0; text-decoration:underline; cursor:pointer}
footer{border-top:1px solid var(--linha-f); padding:2.5rem 0 3rem; font-size:.875rem; color:var(--fg-3)}
footer .wrap{display:flex; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap}
footer p{margin:0}
footer a{color:var(--fg-3)}
footer a:hover{color:var(--fg)}
@media (max-width:600px){ .doc table, .doc thead, .doc tbody, .doc tr, .doc th, .doc td{display:block} .doc thead{display:none} .doc td{border-bottom:0; padding:.15rem 0} .doc tr{border-bottom:1px solid var(--linha); padding:.6rem 0} }