/* Fontes auto-hospedadas (subset latin). Antes vinham do Google Fonts —
   a landing publica uma Politica de Privacidade, entao nao faz sentido
   entregar o IP de cada visitante a um terceiro so para carregar fonte.
   Um arquivo por familia: sao fontes VARIAVEIS, e os 8 arquivos por peso
   que o css2 do Google devolve sao byte a byte identicos. Como o cache HTTP
   e indexado por URL, o browser baixava o mesmo arquivo 5x (Inter) e 3x
   (JetBrains) — ~250 KB no caminho critico do LCP. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/inter.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/jetbrains-mono.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   DET Monitor — Páginas legais (Termos / Privacidade)
   Sistema de marca: verde-petróleo + menta + ponto coral
   ============================================================ */
:root{
  --bg:#f6f7f7; --surface:#ffffff; --surface-2:#fafbfb;
  --border:#e3e6e5; --border-strong:#d3d8d6;
  --text:#14201f; --text-2:#4a5957; --text-3:#7a8b89; --text-4:#a8b3b1;
  --petrol:#2c5e54; --petrol-deep:#1d3a3a; --petrol-ink:#122927;
  --mint:#4eb88a; --mint-bright:#5fc89c; --coral:#e0533c;
  --accent-soft:#e9f0ee;
  --r:14px; --r-sm:9px;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --shadow-sm:0 1px 2px rgba(18,32,31,.05), 0 1px 1px rgba(18,32,31,.03);
  --shadow-md:0 12px 34px -14px rgba(18,32,31,.22), 0 4px 10px -6px rgba(18,32,31,.10);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:var(--petrol); text-decoration:none;}
a:hover{color:var(--petrol-deep); text-decoration:underline;}
h1,h2,h3,h4{margin:0; letter-spacing:-.02em; line-height:1.15;}
p{margin:0;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}

/* ---------- logo ---------- */
.logo{display:inline-flex; align-items:center; gap:11px; white-space:nowrap;}
.logo-wm{display:flex; align-items:baseline; letter-spacing:-.01em;}
.logo-wm .det{font-family:var(--mono); font-weight:700; color:var(--petrol);}
.logo-wm .mon{font-family:var(--sans); font-weight:600; color:var(--text);}
.logo.on-dark .logo-wm .det{color:var(--mint-bright);}
.logo.on-dark .logo-wm .mon{color:#eaf1ef;}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(246,247,247,.86); backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--border);}
.nav-inner{max-width:1120px; margin:0 auto; padding:15px 32px; display:flex; align-items:center; gap:20px;}
.nav-spacer{flex:1;}
.nav-back{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--text-2);}
.nav-back:hover{color:var(--text); text-decoration:none;}
.nav-back svg{transition:transform .15s;}
.nav-back:hover svg{transform:translateX(-3px);}
.nav-doclinks{display:flex; gap:6px;}
.nav-doclinks a{font-size:13.5px; font-weight:500; color:var(--text-2); padding:7px 13px; border-radius:100px;}
.nav-doclinks a:hover{background:var(--surface); color:var(--text); text-decoration:none;}
.nav-doclinks a.is-current{background:var(--petrol); color:#fff;}

/* ---------- hero band ---------- */
.doc-hero{background:var(--petrol-ink); color:#e7efec; position:relative; overflow:hidden;}
.doc-hero::before{content:''; position:absolute; width:720px; height:720px; border-radius:50%; top:-360px; right:-220px; background:radial-gradient(circle, rgba(94,184,138,.18), rgba(94,184,138,0) 62%); pointer-events:none;}
.doc-hero-inner{position:relative; z-index:1; padding:64px 0 54px;}
.doc-eyebrow{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--mint-bright); display:inline-flex; align-items:center; gap:10px;}
.doc-eyebrow::before{content:''; width:22px; height:2px; background:var(--mint-bright);}
.doc-hero h1{font-size:46px; font-weight:750; color:#f2f7f5; margin:18px 0 0; max-width:22ch; text-wrap:balance;}
.doc-hero .dot{display:inline-block; width:.11em; height:.11em; border-radius:50%; background:var(--coral); vertical-align:baseline; margin-left:.04em;}
.doc-meta{display:flex; gap:26px; margin-top:26px; flex-wrap:wrap;}
.doc-meta .m{display:flex; flex-direction:column; gap:3px;}
.doc-meta .m .k{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#7f958f;}
.doc-meta .m .v{font-size:14.5px; color:#dce7e3; font-weight:500;}

/* ---------- layout: TOC + content ---------- */
.doc-layout{display:grid; grid-template-columns:250px 1fr; gap:56px; align-items:start; padding:56px 0 40px;}
.toc{position:sticky; top:88px;}
.toc-label{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-4); margin-bottom:14px;}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:toc;}
.toc li{margin:0;}
.toc a{display:flex; gap:11px; align-items:baseline; padding:8px 12px; border-radius:9px; font-size:13.5px; color:var(--text-2); line-height:1.35; border-left:2px solid transparent;}
.toc a:hover{background:var(--surface); color:var(--text); text-decoration:none;}
.toc a.is-active{background:var(--accent-soft); color:var(--petrol); font-weight:600; border-left-color:var(--petrol);}
.toc a .n{font-family:var(--mono); font-size:11.5px; color:var(--text-4); flex:none; min-width:16px;}
.toc a.is-active .n{color:var(--petrol);}

/* ---------- content ---------- */
.doc-body{max-width:760px;}
.doc-intro{font-size:18px; color:var(--text-2); padding-bottom:30px; margin-bottom:8px; border-bottom:1px solid var(--border); text-wrap:pretty;}
.doc-callout{display:flex; gap:14px; background:var(--accent-soft); border:1px solid #d5e4df; border-radius:var(--r); padding:18px 20px; margin:8px 0 34px;}
.doc-callout .ci{flex:none; color:var(--petrol); margin-top:1px;}
.doc-callout p{font-size:14px; color:var(--text-2); text-wrap:pretty;}
.doc-callout b{color:var(--text);}
.doc-version{font-size:13px; color:var(--text-3); border-left:3px solid var(--border-strong); padding-left:14px; margin:14px 0 32px;}
.doc-section{padding:30px 0; border-bottom:1px solid var(--border); scroll-margin-top:88px;}
.doc-section:last-child{border-bottom:none;}
.doc-section h2{font-size:24px; font-weight:700; display:flex; gap:14px; align-items:baseline;}
.doc-section h2 .sn{font-family:var(--mono); font-size:16px; font-weight:700; color:var(--petrol); flex:none;}
.doc-section h3{font-size:17px; font-weight:650; margin:24px 0 8px; color:var(--text);}
.doc-section p{font-size:15.5px; color:var(--text-2); margin-top:14px; text-wrap:pretty;}
.doc-section p:first-of-type{margin-top:16px;}
.doc-section ul,.doc-section ol{margin:14px 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px;}
.doc-section li{position:relative; padding-left:26px; font-size:15.5px; color:var(--text-2); text-wrap:pretty;}
.doc-section ul li::before{content:''; position:absolute; left:6px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--mint);}
.doc-section ol{counter-reset:li;}
.doc-section ol li{counter-increment:li;}
.doc-section ol li::before{content:counter(li); position:absolute; left:0; top:0; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--petrol); background:var(--accent-soft); width:19px; height:19px; border-radius:6px; display:grid; place-items:center;}
.doc-section li b,.doc-section p b{color:var(--text); font-weight:650;}
.doc-def{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:4px 22px; margin-top:18px; box-shadow:var(--shadow-sm);}
.doc-def dt{font-weight:650; font-size:15px; color:var(--text); margin-top:18px;}
.doc-def dd{margin:5px 0 18px; font-size:14.5px; color:var(--text-2); text-wrap:pretty;}

/* ---------- footer ---------- */
.doc-foot{background:var(--petrol-ink); color:#9fb3ad; border-top:1px solid rgba(255,255,255,.08); padding:40px 0 36px; margin-top:20px;}
.doc-foot-inner{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:center;}
.doc-foot p{font-size:13px; color:#8fa7a1; max-width:44ch; margin-top:12px;}
.doc-foot-links{display:flex; gap:22px; flex-wrap:wrap;}
.doc-foot-links a{color:#c2d2cd; font-size:13.5px;}
.doc-foot-links a:hover{color:#fff; text-decoration:none;}

.print-btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--text-2); background:var(--surface); border:1px solid var(--border-strong); border-radius:10px; padding:9px 15px; cursor:pointer; transition:border-color .15s, color .15s;}
.print-btn:hover{border-color:var(--text-3); color:var(--text);}

@media (max-width:900px){
  .doc-layout{grid-template-columns:1fr; gap:0; padding-top:36px;}
  .toc{display:none;}
  .doc-hero h1{font-size:34px;}
}

/* No celular o header vira duas linhas: marca + "voltar" em cima, alternador
   entre os dois documentos embaixo. Esconder os doclinks (como era antes)
   deixava o leitor sem caminho de um documento para o outro. */
@media (max-width:720px){
  .nav-inner{flex-wrap:wrap; gap:10px 14px; padding:12px 20px;}
  .nav-spacer{flex:1;}
  .nav-doclinks{order:3; width:100%; gap:8px;}
  .nav-doclinks a{flex:1; text-align:center; padding:8px 10px; font-size:13px;}
  .nav-doclinks a:not(.is-current){background:var(--surface); border:1px solid var(--border);}
  .nav-back{font-size:13px;}
  .doc-hero h1{font-size:28px;}
  .doc-meta{gap:14px 20px;}
  /* .doc-hero-inner e .doc-layout tambem sao .wrap e zeram o padding lateral
     dele (shorthand). No desktop nao se ve, porque o max-width ja afasta das
     bordas; no celular o texto encostava. */
  .doc-hero-inner{padding:44px 20px 38px;}
  .doc-layout{padding:32px 20px 28px;}
  .doc-intro{font-size:16px;}
}
@media print{
  .nav,.doc-foot,.toc,.print-btn{display:none;}
  .doc-layout{display:block; padding:0;}
  body{background:#fff;}
  .doc-hero{background:#fff; color:#14201f;}
  .doc-hero h1{color:#14201f;} .doc-eyebrow{color:var(--petrol);} .doc-eyebrow::before{background:var(--petrol);}
  .doc-meta .m .k{color:var(--text-3);} .doc-meta .m .v{color:var(--text);}
  .doc-hero::before{display:none;}
  .doc-section{break-inside:avoid;}
}