/* ===========================================================
   Paginas de documento (termos.html, privacidade.html).
   Usa os MESMOS tokens de styles.css - nenhum hex novo aqui.
   Texto contratual: prioridade e legibilidade em leitura longa,
   nao densidade.
   =========================================================== */

.doc .topbar{background:var(--surface)}
.doc .nav a[aria-current="page"]{background:var(--bg-2);color:var(--ink)}

.doc-wrap{max-width:820px;padding-block:clamp(36px,5vw,60px) clamp(50px,7vw,84px)}

/* ---------- cabecalho ---------- */
.doc-head{padding-bottom:26px;border-bottom:1px solid var(--border);margin-bottom:34px}
.doc-head h1{font-size:clamp(27px,3.4vw,40px);letter-spacing:-.03em;margin-bottom:14px;
  text-wrap:balance}
.doc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-size:14px;color:var(--ink-2)}
.doc-meta .versao{display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;
  background:var(--grad-soft);border:1px solid var(--border-strong);
  font-weight:700;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.doc-meta .ponto{color:var(--ink-3)}

/* banner de "isto integra o contrato" na pagina de privacidade */
.banner-contrato{margin-top:22px;padding:18px 20px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--brand-fill)}
.banner-contrato strong{display:block;font-size:15px;margin-bottom:5px;color:var(--ink)}
.banner-contrato p{font-size:14.5px;color:var(--ink-2)}

/* ---------- indice ---------- */
.indice{background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px 26px;margin-bottom:38px}
.indice-titulo{font-size:12px;font-weight:750;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px}
.indice ol{list-style:none;margin:0;padding:0;
  columns:2;column-gap:34px}
@media (max-width:640px){.indice ol{columns:1}}
.indice li{padding:4px 0;break-inside:avoid}
.indice li.n1{margin-top:10px;font-weight:700}
.indice li.n1:first-child{margin-top:0}
.indice li.n1 > a{color:var(--ink)}
.indice a{font-size:14.5px;color:var(--ink-2);text-decoration:none}
.indice a:hover{color:var(--brand);text-decoration:underline}

/* ---------- prosa ---------- */
.prosa{font-size:16.5px;line-height:1.72;color:var(--ink-2)}
.prosa h2{font-size:clamp(21px,2.4vw,27px);color:var(--ink);letter-spacing:-.025em;
  margin:52px 0 8px;padding-top:14px;border-top:1px solid var(--border);text-wrap:balance}
.prosa h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prosa h3{font-size:18.5px;color:var(--ink);margin:36px 0 6px;text-wrap:balance}
.prosa h4{font-size:16.5px;color:var(--ink);margin:26px 0 4px}
.prosa p{margin:14px 0;max-width:68ch}
.prosa strong{color:var(--ink);font-weight:650}
.prosa ul{margin:14px 0;padding-left:4px;max-width:68ch}
.prosa li{position:relative;padding:5px 0 5px 22px}
.prosa li::before{content:"";position:absolute;left:4px;top:15px;width:6px;height:6px;
  border-radius:50%;background:var(--brand-fill)}
.prosa hr.sep{border:0;height:1px;background:var(--border);margin:44px 0}

/* codigo em linha: e onde ficam os campos do contrato */
.prosa code.lit{font-family:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,monospace;
  font-size:.9em;background:var(--bg-2);border:1px solid var(--border);
  border-radius:6px;padding:1px 6px;color:var(--ink)}
/* campo AINDA NAO PREENCHIDO no contrato - tem de saltar aos olhos */
.prosa code.lit.pendente{background:var(--err-bg);border-color:var(--err);color:var(--err);
  font-weight:700}

/* ---------- documento ainda nao publicado ----------
   Estado deliberado: e melhor dizer que o texto nao esta pronto do que
   publicar um contrato com campo em aberto parecendo completo. */
.bloqueado{background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--warn);border-radius:var(--radius);
  padding:clamp(26px,4vw,38px)}
.bloqueado h2{font-size:clamp(19px,2.2vw,24px);color:var(--ink);margin:0 0 14px;
  border:0;padding:0;text-wrap:balance}
.bloqueado p{margin:12px 0;max-width:62ch;color:var(--ink-2)}

/* ---------- tabelas ---------- */
.tabela-rolagem{overflow-x:auto;margin:22px 0;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface)}
.prosa table{border-collapse:collapse;width:100%;min-width:460px;font-size:15px}
.prosa th,.prosa td{padding:12px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--border)}
.prosa th{background:var(--surface-2);color:var(--ink);font-weight:700;font-size:13px;
  letter-spacing:.03em;text-transform:uppercase}
.prosa tbody tr:last-child td{border-bottom:0}
.prosa td strong{color:var(--ink)}

/* ---------- rodape do documento ---------- */
.doc-rodape-nota{margin-top:52px;padding-top:22px;border-top:1px solid var(--border);
  font-size:14px;color:var(--ink-3);max-width:68ch}

/* ---------- impressao: contrato precisa sair em papel ---------- */
@media print{
  .topbar,.indice,footer,.skip{display:none}
  body{background:#fff;color:#000}
  .doc-wrap{max-width:none;padding:0}
  .prosa{font-size:11pt;color:#000}
  .prosa h2{page-break-after:avoid;border-top:0}
  .prosa p,.prosa li,.prosa table{page-break-inside:avoid}
  .tabela-rolagem{overflow:visible;border:1px solid #999}
  .prosa code.lit.pendente{background:none;color:#000;border:2px solid #000}
  a{color:#000;text-decoration:underline}
}