/* JURÍDICO — /termos e /privacidade.
 *
 * Documento longo para ler, não painel para operar. Por isso a única decisão de
 * layout que importa é a MEDIDA DA LINHA: 68 caracteres, que é onde o olho
 * volta para o começo da linha seguinte sem se perder. O resto é hierarquia de
 * título e ar entre as seções.
 *
 * Herda os tokens do design system; nenhuma cor nova nasce aqui, e é por isso
 * que as duas páginas acompanham o tema claro/escuro sem uma linha a mais. */

.juridico {
  max-width: 44rem;                 /* ~68 caracteres na fonte base */
  margin-inline: auto;
  padding: var(--esp-8) var(--esp-5) var(--esp-16);
  color: var(--cor-texto);
  line-height: 1.65;
}

.juridico__cabecalho {
  padding-bottom: var(--esp-5);
  margin-bottom: var(--esp-6);
  border-bottom: 1px solid var(--cor-borda);
}

.juridico__titulo {
  margin: 0 0 var(--esp-2);
  font-size: 1.85rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.juridico__vigencia {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: .9rem;
}

.juridico__abertura {
  margin-bottom: var(--esp-8);
  font-size: 1.06rem;
  color: var(--cor-texto-suave);
}

.juridico__secao { margin-bottom: var(--esp-8); }

.juridico__secao h2 {
  margin: 0 0 var(--esp-3);
  font-size: 1.15rem;
  line-height: 1.3;
}

.juridico__secao p { margin: 0 0 var(--esp-4); }
.juridico__secao p:last-child { margin-bottom: 0; }

/* As duas seções que respondem as perguntas que as pessoas realmente têm:
 * "quem é responsável pelos meus dados" e "como eu apago". Ganham um fio na
 * lateral para serem encontradas quando alguém varre a página em vez de ler. */
.juridico__secao--chave {
  padding: var(--esp-5);
  border-inline-start: 3px solid var(--cor-acao);
  background: var(--cor-fundo-sutil);
  border-radius: 0 var(--raio-md) var(--raio-md) 0;
}

.juridico__lista { margin: 0 0 var(--esp-4); padding-inline-start: var(--esp-5); }
.juridico__lista li { margin-bottom: var(--esp-3); }

.juridico__definicoes { margin: 0; }

.juridico__definicoes dt {
  margin-top: var(--esp-4);
  margin-bottom: var(--esp-1);
  font-weight: 600;
}

.juridico__definicoes dd {
  margin: 0;
  padding-inline-start: var(--esp-4);
  border-inline-start: 2px solid var(--cor-borda);
  color: var(--cor-texto-suave);
}

/* A frase que a pessoa vai citar quando repetir para outra pessoa. */
.juridico__destaque {
  padding: var(--esp-4);
  border-radius: var(--raio-md);
  background: var(--cor-acao-suave);
  font-weight: 500;
}

/* A tabela é larga por natureza (quatro colunas de texto). Rola dentro do
 * próprio contêiner em vez de esticar a página no celular. */
.juridico__tabela {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .92rem;
}

.juridico__tabela th,
.juridico__tabela td {
  padding: var(--esp-3);
  border-bottom: 1px solid var(--cor-borda);
  text-align: start;
  vertical-align: top;
}

.juridico__tabela thead th {
  border-bottom: 2px solid var(--cor-borda-forte);
  color: var(--cor-texto-suave);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.juridico__navegacao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  padding-top: var(--esp-6);
  border-top: 1px solid var(--cor-borda);
}

/* ── O que ainda falta ──────────────────────────────────────────────────────
 *
 * Deliberadamente feio. Este bloco existe para impedir que alguém publique o
 * documento pela metade — se ele passar despercebido, falhou. */
.juridico__pendencia {
  margin-bottom: var(--esp-8);
  padding: var(--esp-5);
  border: 2px solid var(--sgp-perigo);
  border-radius: var(--raio-md);
  background: var(--sgp-perigo-suave);
}

.juridico__pendencia-titulo {
  margin: 0 0 var(--esp-3);
  color: var(--sgp-perigo);
  font-size: 1.05rem;
}

.juridico__pendencia-lista {
  margin: var(--esp-3) 0;
  padding-inline-start: var(--esp-5);
}

.juridico__pendencia code,
.juridico__falta code {
  padding: 0 var(--esp-1);
  border-radius: var(--raio-xs);
  background: var(--cor-fundo-afundado);
  font-family: var(--fonte-mono);
  font-size: .88em;
}

.juridico__pendencia-rodape {
  margin-bottom: 0;
  color: var(--cor-texto-suave);
  font-size: .9rem;
}

/* O buraco no meio da frase, onde o dado deveria estar. */
.juridico__falta {
  padding: 0 var(--esp-2);
  border-radius: var(--raio-xs);
  background: var(--sgp-perigo-suave);
  color: var(--sgp-perigo);
  font-weight: 500;
}

/* ── O rodapé que leva até aqui ─────────────────────────────────────────── */
.rodape-juridico {
  padding: var(--esp-6) var(--esp-5);
  border-top: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
  font-size: .88rem;
  text-align: center;
}

.rodape-juridico__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  justify-content: center;
  margin-bottom: var(--esp-2);
}

.rodape-juridico a { color: inherit; }
.rodape-juridico a:hover { color: var(--cor-acao); }

@media (max-width: 40rem) {
  .juridico { padding-top: var(--esp-5); }
  .juridico__titulo { font-size: 1.5rem; }
}