/* ─────────────────────────────────────────────────────────────────────────────
   AX Control — páginas de documento (termos, privacidade, FAQ, suporte).

   [09/09/2026] Antes: cada uma dessas páginas carregava o PRÓPRIO bloco <style>
   inline, com cores cruas repetidas quatro vezes (#000814, #35C3DF, #c3cdd9...).
   Mudar a identidade do site não chegava nelas — ficaram congeladas num visual
   que a home já não tinha mais.

   Aqui não há token novo nem cor crua: tudo vem do home.css, que é onde a
   identidade mora. Este arquivo cobre só o que é específico de LER um documento
   longo — largura de leitura, ritmo vertical e o índice lateral.

   NÃO é split-screen. Documento se lê em uma coluna só; as telas de conta
   (ax-auth.css) é que são de duas colunas, porque lá o objetivo é converter,
   não ler.

   Depende de: home.css (tokens, .btn, .f-top). Nessa ordem.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  /* Corpo de texto longo pede mais contraste que --mut (que é de rótulo curto). */
  --doc-ink:#c9d6e2;
  --doc-lead:#dbe6f0;
}

.doc-shell{
  max-width:1080px;margin:0 auto;padding:104px 26px 96px;
  display:grid;grid-template-columns:minmax(0,1fr) 214px;gap:60px;align-items:start;
}

/* ── artigo ───────────────────────────────────────────────────────────────── */
.legal{max-width:720px;font-size:16px;line-height:1.78}

.legal .updated{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.02em;
  color:var(--mut);background:var(--surf);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;margin:0 0 38px;
}

.legal h1{
  font-size:clamp(30px,4vw,42px);line-height:1.06;font-weight:800;letter-spacing:-.028em;
  color:var(--ink);margin:0 0 14px;text-wrap:balance;
}

/* O parágrafo de abertura carrega o resumo do documento — merece peso próprio,
   senão a pessoa começa a ler no meio. */
.legal > p:first-of-type{font-size:17.5px;line-height:1.7;color:var(--doc-lead)}

.legal h2{
  font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink-2);
  margin:46px 0 12px;scroll-margin-top:88px;   /* o header é fixed: sem isto a âncora entra embaixo dele */
}
.legal h2:first-of-type{margin-top:38px}

.legal p,.legal li{color:var(--doc-ink)}
.legal p{margin:0 0 14px}
.legal ul,.legal ol{padding-left:22px;margin:10px 0 16px}
.legal li{margin:7px 0}
.legal li::marker{color:var(--mut-3)}
.legal strong{color:var(--ink-3);font-weight:650}

.legal a{color:var(--cy);text-decoration:none;border-bottom:1px solid rgba(53,195,223,.28)}
.legal a:hover{border-bottom-color:var(--cy)}

/* Caixa de destaque dentro do texto (canais de contato em excluir-conta). */
.legal .box{
  background:var(--tint-cy);border:1px solid var(--line-cy);
  border-radius:var(--r,14px);padding:16px 18px;margin:14px 0;
  font-size:15px;line-height:1.7;color:var(--doc-ink);
}

/* Bloco de destaque do FAQ (já existia como .cta nas páginas). */
.legal .cta{
  margin:52px 0 0;padding:26px;border-radius:var(--r-lg,18px);
  background:var(--tint-cy);border:1px solid var(--line-cy);
}
.legal .cta strong{display:block;font-size:17px;color:var(--ink)}
.legal .cta .btn{margin-top:18px}

.legal .foot{
  margin-top:64px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--mut-2);
}
.legal .foot a{color:var(--mut);border-bottom-color:transparent}
.legal .foot a:hover{color:var(--cy)}

/* ── índice lateral (montado pelo ax-doc.js a partir dos <h2>) ─────────────── */
.doc-toc{position:sticky;top:96px;font-size:13px}
.doc-toc__t{
  font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mut-3);margin:0 0 12px;
}
.doc-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line);}
.doc-toc li{margin:0}
.doc-toc a{
  display:block;padding:7px 0 7px 14px;margin-left:-1px;
  color:var(--mut-2);text-decoration:none;line-height:1.4;
  border-left:2px solid transparent;transition:color .16s,border-color .16s;
}
.doc-toc a:hover{color:var(--ink-3)}
.doc-toc a.on{color:var(--cy);border-left-color:var(--cy)}

/* ── responsivo ───────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .doc-shell{grid-template-columns:minmax(0,1fr);gap:0;padding:92px 22px 80px}
  .doc-toc{display:none}          /* documento no celular se lê rolando, não navegando */
  .legal{max-width:none;font-size:15.5px}
  .legal h2{margin-top:38px}
}

@media (prefers-reduced-motion:reduce){
  .doc-toc a{transition:none}
}