/* ---------- páginas legais ----------
   Privacidade e Termos. São documentos para serem lidos, não cenas: sem
   vídeo, sem scroll amarrado, sem sticky. A única regra de movimento é a
   entrada suave que o resto do site usa, e ela some com prefers-reduced-motion.

   Fundo em papel, e não branco puro, porque é o mesmo tom das outras páginas
   claras — o token existe justamente para isso. */
.legal {
  background: var(--calone-paper);
  color: var(--calone-ink);
  padding: calc(100px + clamp(48px, 8vh, 120px)) clamp(20px, 6vw, 80px) clamp(80px, 12vh, 160px);
}

/* O cabeçalho é fixo e tem 100px: sem o recuo acima, o título nasceria atrás dele. */

.legal__interno {
  max-width: 68ch;
  margin: 0 auto;
}

.legal__marca {
  margin: 0 0 clamp(12px, 2vh, 20px);
  font-size: clamp(11px, .85vw, 13px);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--calone-gray-500);
}

.legal__titulo {
  margin: 0 0 clamp(16px, 2.5vh, 28px);
  font-size: clamp(34px, 5.4vw, 64px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.legal__titulo .font-display {
  font-family: var(--calone-font-display);
  font-style: italic;
  font-weight: 400;
}

.legal__resumo {
  margin: 0 0 clamp(28px, 4vh, 48px);
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--calone-gray-700);
  text-wrap: pretty;
}

.legal__data {
  margin: 0 0 clamp(40px, 6vh, 72px);
  padding-bottom: clamp(24px, 4vh, 40px);
  border-bottom: 1px solid var(--calone-on-light-border);
  font-size: 13px;
  color: var(--calone-gray-500);
}

.legal__secao {
  margin: 0 0 clamp(36px, 5vh, 60px);
}

.legal__secao h2 {
  margin: 0 0 clamp(12px, 1.8vh, 18px);
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* Numeração vem do CSS: o texto do HTML fica limpo, e inserir uma seção no
   meio não obriga a renumerar tudo à mão. */
.legal__secao {
  counter-increment: legal-secao;
}

.legal__secao h2::before {
  content: counter(legal-secao) ". ";
  color: var(--calone-gray-500);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.legal__interno {
  counter-reset: legal-secao;
}

.legal__secao p,
.legal__secao li {
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.7;
  color: var(--calone-gray-700);
  text-wrap: pretty;
}

.legal__secao p {
  margin: 0 0 1em;
}

.legal__secao ul {
  margin: 0 0 1em;
  padding-left: 1.3em;
}

.legal__secao li {
  margin-bottom: .5em;
}

.legal__secao strong {
  color: var(--calone-ink);
  font-weight: 600;
}

.legal__secao a {
  color: var(--calone-ink);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--calone-gray-300);
  transition: text-decoration-color var(--motion-micro) var(--ease-calone);
}

.legal__secao a:hover,
.legal__secao a:focus-visible {
  text-decoration-color: var(--calone-ink);
}

/* Aviso de revisão jurídica pendente. Some quando o texto for aprovado —
   é um bloco, não um estilo espalhado, para sair de uma vez só. */
.legal__revisao {
  margin: clamp(48px, 7vh, 80px) 0 0;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--calone-on-light-border);
  border-radius: 3px;
  background: var(--calone-off-white);
}

.legal__revisao p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--calone-gray-700);
}

/* Sem animação de entrada aqui, e isso é deliberado: acionar `is-live` por
   rolagem exigiria um `legal.js` só para dar fade em texto jurídico. O conteúdo
   nasce visível — que é também o comportamento correto sem JavaScript. */