/* ============================================================
   OAB Aprovado · Documentos legais (Termos de Uso e Política de
   Privacidade). Identidade v2, "A carteira vermelha".

   Folha própria, separada da folha da landing page: são páginas de
   leitura longa, sem hero, cards nem CTA. Fundo creme para leitura,
   cabeçalho em bordô com filete dourado (a capa da carteira) e a
   lombada vermelha marcando as caixas de aviso.

   Fontes auto-hospedadas em assets/fonts, a mesma pasta da landing
   page (nenhum domínio externo; subconjunto latino em woff2):
   - source-sans-3-var.woff2: arquivo variável (400 a 700);
   - source-serif-4-display-700/800.woff2: Source Serif 4 Bold e
     ExtraBold, tamanho óptico de 60 pt, a mesma do logo.
   ============================================================ */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/source-sans-3-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/source-serif-4-display-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/source-serif-4-display-800.woff2') format('woff2');
}

:root {
  --vermelho:     #B3191F;
  --vermelho-esc: #8A1218;
  --bordo:        #6B0F1A;
  --creme:        #FAF6F0;
  --papel:        #FFFDF9;
  --dourado:      #E0C285;
  --tinta:        #1F1A1C;
  --cinza:        #5D5658;
  --linha:        #E7DED3;
  --texto-claro:  #F2D6D3;
  --ambar:        #9A5200;
  --titulo: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --corpo:  'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.65;
}

.container {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 22px;
}

/* ── Cabeçalho: capa bordô com filete dourado ───────────── */
.doc-topo {
  background: var(--bordo);
  color: var(--creme);
  padding: 26px 0 30px;
  border-bottom: 3px solid var(--dourado);
}
.doc-topo .container { display: grid; gap: 16px; }
.doc-marca { display: inline-block; justify-self: start; line-height: 0; }
.doc-marca img { height: 44px; width: auto; display: block; }
.doc-topo h1 {
  font-family: var(--titulo);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 6px 0 0;
  color: var(--creme);
}
.doc-selo {
  display: inline-block;
  justify-self: start;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tinta);
  background: var(--dourado);
  border-radius: 20px;
  padding: 4px 14px;
}

/* ── Corpo ─────────────────────────────────────────────── */
.doc-corpo { padding: 34px 0 10px; }

.doc-corpo h2 {
  font-family: var(--titulo);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--tinta);
  margin: 40px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--linha);
}
.doc-corpo h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.doc-corpo h3 {
  font-family: var(--corpo);
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--vermelho);
  margin: 24px 0 6px;
}

.doc-corpo p { margin: 0 0 15px; color: var(--cinza); }
.doc-corpo strong { color: var(--tinta); font-weight: 700; }
.doc-corpo ul { margin: 0 0 16px; padding-left: 22px; color: var(--cinza); }
.doc-corpo li { margin-bottom: 7px; }
.doc-corpo li::marker { color: var(--vermelho); }

.doc-corpo a,
.doc-rodape a { color: var(--vermelho); text-underline-offset: 2px; }
.doc-corpo a:hover,
.doc-rodape a:hover { color: var(--bordo); }

/* Índice no topo do documento */
.doc-indice {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 16px 20px 10px;
  margin: 0 0 30px;
}
.doc-indice strong {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza);
  margin-bottom: 6px;
}
.doc-indice ol {
  margin: 0;
  padding-left: 22px;
  columns: 2;
  column-gap: 28px;
  font-size: 0.95rem;
}
.doc-indice li { margin-bottom: 5px; break-inside: avoid; }
.doc-indice a { text-decoration: none; }
.doc-indice a:hover { text-decoration: underline; }

/* Caixa de aviso: lombada vermelha à esquerda */
.doc-aviso {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-left: 5px solid var(--vermelho);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 0 0 22px;
}
.doc-aviso p { margin: 0 0 8px; }
.doc-aviso p:last-child { margin-bottom: 0; }

/* Campo pendente: precisa ser preenchido antes de publicar */
.pendente {
  background: #FFF1C9;
  color: #6A3A00;
  border: 1px dashed var(--ambar);
  border-radius: 4px;
  padding: 0 5px;
  font-weight: 700;
  font-family: var(--corpo);
  white-space: normal;
}

/* Tabelas: rolam dentro da própria caixa em telas estreitas, para a
   página nunca rolar na horizontal. */
.doc-tabela { overflow-x: auto; margin: 0 0 22px; }
.doc-tabela table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 0.93rem;
  background: var(--papel);
}
.doc-tabela th {
  background: var(--bordo);
  color: var(--creme);
  text-align: left;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 14px;
}
.doc-tabela td {
  border-bottom: 1px solid var(--linha);
  padding: 10px 14px;
  vertical-align: top;
  color: var(--cinza);
}
.doc-tabela td:first-child { color: var(--tinta); font-weight: 600; }
.doc-tabela tbody tr:nth-child(even) td { background: #F6F0E7; }

/* ── Rodapé ────────────────────────────────────────────── */
.doc-rodape {
  background: var(--bordo);
  color: var(--texto-claro);
  border-top: 3px solid var(--dourado);
  margin-top: 46px;
  padding: 26px 0 40px;
  font-size: 0.9rem;
}
.doc-rodape .container { display: grid; gap: 10px; }
.doc-rodape .doc-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.doc-rodape a { color: var(--creme); }
.doc-rodape a:hover { color: var(--dourado); }
.doc-rodape .doc-independente { color: var(--creme); font-weight: 600; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .doc-marca img { height: 36px; }
  .doc-corpo h2 { font-size: 1.3rem; }
  .doc-indice ol { columns: 1; }
}

@media print {
  .doc-topo, .doc-rodape, .doc-tabela th, .pendente {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .doc-indice { display: none; }
}