/* Aprumo — páginas institucionais/legais (termos, privacidade, segurança, DPA).
   Direção "Prumo Luminoso" (rebrand 2026-07, rodada 3). Tokens (cores, fontes)
   em /css/tokens.css: consumir var(--...), nunca redefinir hex nem @font-face
   aqui. Light branco é default; dark navy via [data-theme="dark"] (theme-init.js).
   Corpo e títulos em var(--font-sans); kicker, sumário e data de atualização em
   var(--font-mono) 500 — o registro de rótulo e metadado da marca. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);font-size:16px;font-weight:400;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0}
h1,h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
h3{font-weight:600;letter-spacing:-.012em;line-height:1.2;text-wrap:balance}
a{color:inherit}
button{font:inherit;color:inherit}
strong{font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent-wash)}

.wrap{max-width:46rem;margin:0 auto;padding:0 1.4rem}

/* Kicker da página — registro alto do mono: caixa-alta e tracking largo */
.kicker{
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}

.skip-link{
  position:absolute;left:-9999px;top:12px;z-index:100;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius);padding:10px 16px;font-weight:600;text-decoration:none;
}
.skip-link:focus{left:12px}

/* ===== Cabeçalho — barra full-bleed, conteúdo alinhado à coluna de leitura ===== */
.site-head{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-head{background:var(--bg)}
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.brand{
  font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.02em;line-height:1;
  text-decoration:none;color:var(--ink);
}
.site-nav{display:flex;align-items:center;gap:22px}
.site-nav a{
  font-size:14px;font-weight:600;text-decoration:none;opacity:.82;
  transition:opacity .15s ease,color .15s ease;
}
.site-nav a:hover{opacity:1}
.site-nav a[aria-current="page"]{opacity:1;color:var(--accent)}
.site-nav .entrar{
  background:var(--grad-cta);background-repeat:no-repeat;background-size:180% 100%;
  background-position:0% 0;background-color:#0D6E8C;
  color:#fff;border:1px solid transparent;border-radius:999px;padding:9px 18px;
  font-weight:600;opacity:1;
  box-shadow:0 8px 18px -10px rgba(79,70,229,.5);
  transition:background-position .4s ease,box-shadow .25s ease,transform .15s ease;
}
.site-nav .entrar:hover{background-position:75% 0;transform:translateY(-1px)}
.theme-toggle{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:999px}
.theme-toggle button{
  width:34px;height:34px;padding:0;border:0;border-radius:999px;
  display:grid;place-items:center;background:transparent;color:var(--muted);
  cursor:pointer;transition:color .15s ease,background .15s ease;
}
.theme-toggle button:hover{color:var(--ink)}
.theme-toggle button[aria-pressed="true"]{background:var(--accent-wash);color:var(--accent)}
.theme-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ===== Conteúdo ===== */
main{display:block;padding:0 0 5rem}
.hero{padding:4rem 0 0}
.hero .kicker{display:block;margin-bottom:1rem}
.hero h1{font-weight:700;font-size:clamp(2rem,5vw,2.9rem);letter-spacing:-.03em;line-height:1.04;max-width:18ch}
.hero .lede{margin-top:1.1rem;color:var(--muted);font-size:1.12rem;line-height:1.6;max-width:44ch}
/* Data e base legal são metadado de frescor — registro quieto do mono */
.hero .updated{
  margin-top:1rem;color:var(--muted);font-variant-numeric:tabular-nums;
  font-family:var(--font-mono);font-weight:500;font-size:.76rem;letter-spacing:.04em;
}
/* Nas telas estreitas esta linha não cabe inteira em corpo legível — medido: o
   DPA precisaria de 9,8 px e a privacidade de 6,8 px. Então ela quebra, mas
   quebra onde deve: cada fato é indivisível e o separador fica pendurado no fim
   da primeira linha. Sem isso o navegador parte a data no meio
   ("Versão de 17 de julho de / 2026 · Lei nº 13.709/2018"). */
.hero .updated span{white-space:nowrap}

.toc{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin:2.4rem 0 0;padding:1.2rem 0;border-block:1px solid var(--line)}
.toc a{
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.04em;
  color:var(--muted);text-decoration:none;transition:color .15s ease;
}
.toc a:hover{color:var(--accent)}

section.copy{padding:2.2rem 0;border-top:1px solid var(--line);scroll-margin-top:5rem}
section.copy:first-of-type{border-top:0;padding-top:2.4rem}
section.copy h2{font-size:1.28rem;letter-spacing:-.018em;margin-bottom:.8rem}
section.copy h3{font-size:1rem;margin:1.5rem 0 .5rem}
section.copy p,section.copy ul,section.copy ol{max-width:40rem;margin-bottom:.9rem}
section.copy p:last-child,section.copy ul:last-child,section.copy ol:last-child{margin-bottom:0}
section.copy ul,section.copy ol{padding-left:1.2rem}
section.copy li+li{margin-top:.4rem}
section.copy a{
  color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 42%,transparent);
  transition:text-decoration-color .15s ease;
}
section.copy a:hover{text-decoration-color:var(--accent)}

.callout{
  margin:1.3rem 0;padding:1.1rem 1.2rem;
  border-left:2px solid var(--accent);background:var(--accent-wash);
  border-radius:0 var(--radius) var(--radius) 0;
}
.callout p{margin:0;max-width:none}

/* ===== Rodapé ===== */
.site-foot{border-top:1px solid var(--line);margin-top:1rem}
.site-foot .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding-top:2rem;padding-bottom:2.6rem;
}
.site-foot .brand{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--muted)}
.site-foot p{color:var(--muted);font-size:.8rem}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 8px;color:var(--muted);font-size:.78rem}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ===== Responsivo ===== */
@media (max-width:560px){
  html{scroll-padding-top:76px}
  .site-head .wrap{height:60px}
  .site-nav{gap:12px}
  .hero{padding-top:3rem}
  /* Um degrau abaixo, no mesmo corpo do eyebrow (.7rem): devolve a linha do DPA
     a uma linha só de 412 px para cima e alivia a mancha nas demais. */
  .hero .updated{font-size:.7rem}
  .site-foot .wrap{flex-direction:column;align-items:flex-start;gap:.4rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.001ms!important}
}