/* ============================================================
   css/legal.css — documentos jurídicos (Termos de Uso, Privacidade)
   ============================================================
   Deliberadamente monocromático e sem elementos decorativos: usa só
   --bg/--ink/--border já definidos em css/style.css. Tipografia
   serifada no corpo (leitura de texto longo), numeração de seção
   explícita no HTML (não gerada por CSS counter, pra poder linkar
   cada item do sumário direto pro id da seção).
   ============================================================ */

/* Sobrescreve o layout de app fixo (sidebar+chat) definido em
   style.css — body{display:flex; overflow:hidden; height:100%} —
   que quebra qualquer página de documento comprido: sem isso, o
   conteúdo fica cortado na altura da viewport e não rola. Seletor
   com classe (body.legal-body) pra ganhar de "body" sozinho. */
body.legal-body{
  display:block;
  overflow:visible;
  height:auto;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
}
.legal-body{
  background:var(--bg);
  color:var(--ink);
}

.legal-header{
  position:sticky; top:0; z-index:40;
  background:rgba(252,252,252,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.legal-header-inner{
  max-width:1180px; margin:0 auto; padding:18px 48px;
  display:flex; align-items:center; justify-content:space-between;
}
.legal-brand{
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-ui); font-size:14px; font-weight:600; color:var(--ink);
}
.legal-brand img{ width:20px; height:20px; border-radius:6px; }
.legal-header-actions a{
  font-family:var(--font-ui); font-size:13px; color:var(--ink-soft);
  border:1px solid var(--border-strong); border-radius:6px;
  padding:7px 13px;
}
.legal-header-actions a:hover{ color:var(--ink); border-color:var(--ink-faint); }

.legal-shell{
  max-width:1180px; margin:0 auto; padding:56px 48px 120px;
  display:grid; grid-template-columns:220px 1fr; gap:56px; align-items:start;
  min-width:0;
}

/* ---------- Sumário lateral ---------- */
.legal-toc{
  position:sticky; top:32px;
  border-right:1px solid var(--border);
  padding-right:20px;
}
.legal-toc-label{
  font-family:var(--font-ui); font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px;
}
.legal-toc ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:9px;
}
.legal-toc a{
  font-family:var(--font-ui); font-size:13px; line-height:1.4; color:var(--ink-soft);
  display:block;
}
.legal-toc a:hover{ color:var(--ink); text-decoration:underline; }

/* ---------- Documento ---------- */
/* Escala tipográfica alinhada com as páginas de marketing do sistema
   (ver .post p/.hero-sub em blog/index.php, 15-17px) — os valores
   originais aqui (13-14px de corpo, 2rem de título) ficavam menores
   que o resto do site e liam como "zoom reduzido" ao lado de qualquer
   outra página, mesmo sem nenhum bug de escala/zoom envolvido (só
   escolha de tamanho mesmo). .legal-doc também ganhou um pouco mais
   de largura (680px -> 720px) pra acompanhar o corpo maior sem
   quebrar linha cedo demais. */
.legal-doc{ max-width:720px; min-width:0; }
.legal-doc-title{
  font-family:var(--font-serif); font-weight:500; font-size:2.35rem;
  line-height:1.15; color:var(--ink); margin-bottom:10px;
}
.legal-doc-meta{
  font-family:var(--font-ui); font-size:13px; color:var(--ink-faint);
  padding-bottom:28px; margin-bottom:32px; border-bottom:1px solid var(--border);
}
.legal-doc-meta strong{ color:var(--ink-soft); font-weight:600; }

.legal-doc-intro{
  font-family:var(--font-serif); font-size:17.5px; line-height:1.7;
  color:var(--ink-2); margin-bottom:8px;
}

.legal-section{ padding-top:40px; scroll-margin-top:24px; }
.legal-section + .legal-section{ border-top:1px solid var(--border); }
.legal-section h2{
  font-family:var(--font-ui); font-weight:600; font-size:18px;
  color:var(--ink); margin-bottom:16px;
  display:flex; gap:10px; align-items:baseline;
}
.legal-section h2 .num{
  font-variant-numeric:tabular-nums; color:var(--ink-faint); font-weight:600;
}
.legal-section h3{
  font-family:var(--font-ui); font-weight:600; font-size:14.5px;
  color:var(--ink-2); margin:22px 0 8px;
}
.legal-section p{
  font-family:var(--font-serif); font-size:15.5px; line-height:1.75;
  color:var(--ink-2); margin-bottom:16px;
}
.legal-section p:last-child{ margin-bottom:0; }
.legal-section ul, .legal-section ol{
  margin:0 0 16px; padding-left:22px;
  font-family:var(--font-serif); font-size:15.5px; line-height:1.7; color:var(--ink-2);
}
.legal-section li{ margin-bottom:6px; }
.legal-section li:last-child{ margin-bottom:0; }
.legal-section strong{ color:var(--ink); font-weight:600; }
.legal-section code{
  font-family:var(--font-mono); font-size:13px; background:var(--bg-code);
  border:1px solid var(--border); border-radius:6px; padding:1px 5px;
  word-break:break-all; overflow-wrap:anywhere;
}
.legal-section a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }

/* ---------- Tabela técnica (subprocessadores, dados coletados) ---------- */
.legal-table-wrap{
  width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:4px 0 18px;
}
.legal-table{
  width:100%; border-collapse:collapse;
  font-family:var(--font-ui); font-size:13.5px;
}
.legal-table th{
  text-align:left; font-weight:600; color:var(--ink-soft);
  border-bottom:1px solid var(--border-strong); padding:8px 10px;
  background:var(--bg-code-header);
  word-break:normal; overflow-wrap:break-word;
}
.legal-table td{
  border-bottom:1px solid var(--border); padding:9px 10px;
  color:var(--ink-2); vertical-align:top;
  word-break:normal; overflow-wrap:break-word;
}
.legal-table tr:last-child td{ border-bottom:none; }

.legal-callout{
  border:1px solid var(--border-strong); border-radius:6px;
  padding:14px 16px; margin:4px 0 18px;
  font-family:var(--font-ui); font-size:13.5px; line-height:1.6; color:var(--ink-soft);
}

.legal-footer-note{
  margin-top:56px; padding-top:24px; border-top:1px solid var(--border);
  font-family:var(--font-ui); font-size:12px; color:var(--ink-faint); line-height:1.6;
}

@media (max-width: 960px){
  .legal-header-inner{ padding:16px 24px; }
  .legal-shell{ padding:48px 24px 100px; }
}

@media (max-width: 820px){
  .legal-shell{ grid-template-columns:1fr; }
  .legal-toc{ position:static; border-right:none; border-bottom:1px solid var(--border); padding:0 0 20px; margin-bottom:8px; }
}

@media print{
  .legal-header, .legal-toc{ display:none; }
  .legal-shell{ grid-template-columns:1fr; max-width:100%; padding:0; }
}