/* Polozi Social — estilo de documento legal
 *
 * Camada FINA por cima de ../tokens.css. Só o que prosa longa exige e o
 * tokens.css não tem: medida de leitura, ritmo vertical, tabela e lista.
 * Nenhuma cor nova — tudo sai das variáveis de tokens.css, que por sua vez
 * vieram de ws-50-100/index.html.
 */

/* medida de leitura. `.wrap-sm` (560px) é estreito demais para documento
   longo; 760px dá ~85 caracteres por linha em desktop. */
.wrap-doc{max-width:760px}

/* SO vertical. `.doc` divide o mesmo elemento com `.wrap`, e legal.css carrega
   depois de tokens.css — um `padding` shorthand aqui zeraria o `0 22px` do
   `.wrap` e colaria o texto na borda da tela no celular. */
.doc{padding-top:28px;padding-bottom:64px}

.doc h1{font-size:clamp(28px,4.4vw,42px);font-weight:900}
.doc h2{font-size:clamp(19px,2.6vw,24px);margin:38px 0 12px;color:var(--off)}
.doc h3{font-size:16px;margin:24px 0 8px;color:var(--gold)}

.doc p{margin:0 0 14px;color:#cfcfca;font-size:15px}
.doc strong{color:var(--off)}
.doc a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.doc a:hover{color:var(--orange)}

.doc ul{margin:0 0 14px;padding-left:20px;color:#cfcfca;font-size:15px}
.doc li{margin-bottom:7px}

.doc hr{border:none;border-top:1px solid var(--line);margin:34px 0}

/* tabelas rolam sozinhas em vez de estourar a página no celular */
.tbl{overflow-x:auto;margin:0 0 18px}
.doc table{border-collapse:collapse;width:100%;font-size:14px;min-width:420px}
.doc th,.doc td{border:1px solid var(--line);padding:10px 12px;text-align:left;
  vertical-align:top;color:#cfcfca}
.doc th{color:var(--gold);font-weight:700;background:rgba(212,175,55,.06)}

/* caixa de destaque para o ponto que o leitor não pode perder */
.nota{border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  background:rgba(212,175,55,.06);font-size:14px;color:#cfcfca;margin:0 0 18px}

.voltar{display:inline-block;margin-bottom:18px;color:var(--mut);font-size:13px;
  text-decoration:underline;text-underline-offset:3px}
.voltar:hover{color:var(--gold)}

.assinatura{font-size:13px;color:var(--mut);line-height:1.7}
.assinatura strong{color:var(--off)}

/* o footer fica FORA de .doc, então precisa da sua própria regra de link */
footer a{color:var(--mut);text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:var(--gold)}