/* ===========================================================================
   PÁGINAS DE TEXTO LONGO — privacidade, termos
   ---------------------------------------------------------------------------
   Folha própria, carregada pelo parâmetro $folhas de cabecalho(), e não
   acrescentada ao mesa.css: o que está aqui só interessa a quem abriu um
   documento legal, e não tem por que viajar em toda visita à mesa.

   O resto do site é escuro e centralizado, com linhas curtas e muito ar — é
   uma mesa vista de cima, à luz de vela. Um documento legal precisa do oposto:
   coluna de leitura contínua, alinhada à esquerda, com hierarquia clara e
   contraste suficiente para ser lido inteiro sem cansar. Mesma paleta, outro
   registro — igual à diferença entre o site e o painel.

   A largura é 66 caracteres, e não uma medida em pixels. Coluna de texto se
   mede em caracteres porque é isso que o olho percorre: a linha que cansa é a
   linha longa demais em PALAVRAS, não em centímetros.
   =========================================================================== */

.legal {
  max-width: 66ch;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) var(--ritmo) clamp(4rem, 9vw, 6rem);
  text-align: left;
}

/* O título vem do mesa.css e nasce centralizado na .vazio; aqui ele precisa
   alinhar com o corpo do texto, senão a página começa torta. */
.legal .titulo,
.legal .sobrescrito,
.legal .chamada { text-align: left; }
.legal .chamada { max-width: none; }

.legal__data {
  margin: 0 0 2.5rem;
  font-size: .82rem;
  color: var(--marfim-1);
}

/* ------------------------------------------------------------- o índice

   Treze seções são muitas para rolar procurando. O índice não é enfeite de
   documento formal: é o que transforma a página de "texto que se aceita sem
   ler" em "texto onde se acha a resposta". Quem chega aqui quase sempre chega
   com UMA pergunta, e ela tem nome. */

.legal__indice {
  padding: 1.2rem 1.4rem;
  margin: 0 0 3rem;
  background: rgba(8, 26, 21, .5);
  border: 1px solid rgba(192, 138, 62, .22);
  border-radius: var(--raio);
}

.legal__indice ol {
  margin: 0;
  padding-left: 1.4rem;
  columns: 2;
  column-gap: 2rem;
  font-size: .88rem;
}
.legal__indice li { margin: .28rem 0; break-inside: avoid; }
.legal__indice a { color: var(--marfim-3); text-decoration: none; }
.legal__indice a:hover { color: var(--latao-claro); text-decoration: underline; }

/* --------------------------------------------------------- os títulos

   O h2 recebe uma linha acima em vez de um espaço maior: num documento de
   treze seções, o espaço sozinho não separa o suficiente e o olho perde a
   conta de onde uma acaba. O scroll-margin existe por causa do índice — sem
   ele, clicar num link do índice encosta o título no topo da janela, colado
   na borda, e o começo da seção fica ilegível. */

.legal h2 {
  margin: 3.2rem 0 1rem;
  padding-top: 1.6rem;
  font-family: var(--letra-display);
  font-weight: 300;
  font-size: clamp(1.25rem, 3.2vw, 1.6rem);
  line-height: 1.2;
  color: var(--marfim);
  border-top: 1px solid rgba(192, 138, 62, .2);
  scroll-margin-top: 5rem;
}

.legal h3 {
  margin: 2.2rem 0 .7rem;
  font-family: var(--letra-ui);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .02em;
  color: var(--latao-claro);
}

/* ----------------------------------------------------------- o corpo */

.legal p {
  margin: 0 0 1.1rem;
  color: var(--marfim-3);
  font-size: 1rem;
  line-height: 1.75;
}
.legal p b, .legal li b { color: var(--marfim); font-weight: 700; }

.legal a { color: var(--latao-claro); text-underline-offset: .2em; }

.legal code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .86em;
  color: var(--latao-claro);
}

.legal__lista {
  margin: 0 0 1.4rem;
  padding-left: 1.3rem;
  color: var(--marfim-3);
  line-height: 1.7;
}
.legal__lista li { margin: 0 0 .7rem; }

/* --------------------------------------------------------- a ressalva

   Parágrafo com barra de latão à esquerda. Usado nos pontos em que o texto
   admite alguma coisa — que o Google recebe o IP, que não há botão de apagar
   conta, que a pergunta está sendo gravada. São justamente os trechos que uma
   política de privacidade costuma esconder no meio do parágrafo, e por isso
   aqui eles ganham marca própria: o que é desconfortável de dizer é o que mais
   precisa ser fácil de achar. */

.legal__nota {
  padding: .9rem 0 .9rem 1.1rem;
  margin: 1.5rem 0 1.8rem;
  border-left: 2px solid var(--latao);
  background: rgba(192, 138, 62, .06);
  font-size: .94rem !important;
}

/* ---------------------------------------------------------- as tabelas

   Rolagem horizontal no lugar de quebrar as colunas: uma tabela de três
   colunas espremida em 360px vira uma coluna só, e a relação entre "dado",
   "para quê" e "base legal" — que é a informação — se perde. */

.legal__tabela {
  overflow-x: auto;
  margin: 0 0 1.8rem;
  border: 1px solid rgba(192, 138, 62, .18);
  border-radius: var(--raio);
}

.legal__tabela table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: .88rem;
}

.legal__tabela th,
.legal__tabela td {
  padding: .7rem .85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(192, 138, 62, .12);
  line-height: 1.55;
}

.legal__tabela th {
  font-family: var(--letra-ui);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--latao);
  white-space: nowrap;
  background: rgba(8, 26, 21, .5);
  border-bottom-color: rgba(192, 138, 62, .3);
}

.legal__tabela td { color: var(--marfim-3); }
.legal__tabela td b { color: var(--marfim); }
.legal__tabela td small { display: block; color: var(--marfim-1); font-size: .82em; }
.legal__tabela tr:last-child td { border-bottom: none; }

/* ================================================================= tela */

@media (max-width: 600px) {
  .legal__indice ol { columns: 1; }
  .legal h2 { margin-top: 2.6rem; }
}

/* ===================================================================
   NO PAPEL

   Documento legal é o tipo de página que as pessoas imprimem ou salvam em
   PDF, justamente para ter prova de qual versão leram. Então ele imprime
   inteiro, em preto no branco, sem o índice (que vira uma lista de links
   mortos numa folha) e sem o cabeçalho de navegação.
   =================================================================== */
@media print {
  @page { size: A4; margin: 18mm 16mm; }

  body { background: #fff !important; color: #14110C !important; }

  .cabeca, .pular, .legal__indice, .conta-janela { display: none !important; }

  .legal {
    max-width: none;
    padding: 0;
    font-size: 10.5pt;
  }
  .legal p, .legal__lista, .legal__tabela td { color: #26221B !important; }
  .legal .titulo, .legal h2, .legal p b { color: #14110C !important; }
  .legal .sobrescrito, .legal h3 { color: #6B5426 !important; }

  .legal h2 {
    border-top-color: #B9A98A !important;
    break-after: avoid;
    page-break-after: avoid;
  }

  .legal__nota {
    background: none !important;
    border-left-color: #8A6A2E !important;
  }

  .legal__tabela { border-color: #B9A98A !important; overflow: visible; }
  .legal__tabela table { min-width: 0; }
  .legal__tabela th {
    background: none !important;
    color: #6B5426 !important;
    border-bottom-color: #B9A98A !important;
  }
  .legal__tabela th, .legal__tabela td { border-bottom-color: #DCD3BE !important; }
  .legal__tabela, .legal__lista li { break-inside: avoid; }

  .rodape { border-top: 1px solid #DCD3BE !important; color: #26221B !important; }
  .rodape a { color: #14110C !important; text-decoration: none; }
}