/* =========================================================
   F4 TWEAKS — páginas legais
   Reaproveita os tokens, o cabeçalho e a marca de style.css
   (carregue os dois, nesta ordem).

   Layout de LEITURA, não de venda: coluna estreita, texto maior
   e mais respiro entre parágrafos. Documento legal em largura de
   página inteira ninguém lê — e este é justamente o texto que
   precisa ser lido antes de alguém pagar.
========================================================= */

/* O bloco body.legal-page que ficava aqui repetia, declaração por declaração,
   o que o body do style.css já dava (cor, fonte, margem, fundo). O único
   pedaço que sobrava — min-height — foi para o style.css, junto com o
   cabeçalho compartilhado com o checkout. */

.legal-wrap{
  /* 68ch ≈ 68 caracteres por linha, que é a faixa em que o olho
     acha a próxima linha sem se perder. */
  max-width:68ch;
  margin:0 auto;
  padding:46px 22px 80px;
}

.legal-wrap h1{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 4vw, 2.1rem);
  color:var(--white);
  margin:0 0 .5em;
}
.legal-lead{color:var(--ink-300); font-size:.95rem; line-height:1.7; margin:0 0 30px;}

/* ---------- índice ---------- */
.legal-indice{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:14px; margin-bottom:38px;
  border:1px solid var(--ink-800); border-radius:var(--radius-md);
  background:var(--ink-900);
}
.legal-indice a{
  font-family:var(--font-mono); font-size:.76rem;
  color:var(--ink-300); text-decoration:none;
  padding:5px 10px; border:1px solid var(--ink-700); border-radius:20px;
  transition:color .15s ease, border-color .15s ease;
}
.legal-indice a:hover{color:var(--white); border-color:var(--ink-500);}

/* ---------- seções ---------- */
.legal-sec{
  margin-bottom:46px;
  /* scroll-margin: sem isto, clicar no índice deixa o título colado no topo
     da janela, parcialmente escondido atrás do cabeçalho. */
  scroll-margin-top:24px;
}
.legal-sec h2{
  font-family:var(--font-display); font-size:1.4rem; color:var(--white);
  margin:0 0 18px; padding-bottom:10px;
}
.legal-sec h3{
  font-family:var(--font-display); font-size:1rem; color:var(--white);
  margin:28px 0 8px;
}
.legal-sec p{color:var(--ink-300); line-height:1.75; margin:0 0 14px; font-size:.94rem;}
.legal-sec strong{color:var(--paper-100); font-weight:600;}
.legal-sec a{color:var(--white); text-decoration:underline; text-underline-offset:3px;}

.legal-sec ul{margin:0 0 14px; padding-left:20px; color:var(--ink-300); line-height:1.75; font-size:.94rem;}
.legal-sec li{margin-bottom:5px;}

.legal-sec code{
  font-family:var(--font-mono); font-size:.85em;
  background:var(--ink-850); border:1px solid var(--ink-700);
  border-radius:4px; padding:1px 5px; color:var(--paper-100);
}

/* ---------- tabela de dados ----------
   overflow-x no contêiner e não na página: numa tela de celular a tabela
   rola dentro dela mesma, em vez de empurrar o site inteiro para o lado. */
.legal-tabela{
  width:100%; border-collapse:collapse; margin:14px 0 20px;
  font-size:.86rem; display:block; overflow-x:auto;
}
.legal-tabela th, .legal-tabela td{
  border:1px solid var(--ink-800); padding:9px 12px;
  text-align:left; vertical-align:top;
}
.legal-tabela th{
  background:var(--ink-900); color:var(--ink-300);
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; font-weight:600;
}
.legal-tabela td{color:var(--ink-300); line-height:1.55;}

/* --ink-400 e não --ink-500: a data de última atualização é o que diz ao
   leitor se este texto ainda vale. --ink-500 sobre o preto fica em ~4:1,
   abaixo dos 4.5:1 que a WCAG pede para texto pequeno. */
.legal-rodape{
  color:var(--ink-400); font-size:.8rem; text-align:center;
  margin-top:58px;
}

/* ---------- rodapé ---------- */
.legal-foot{
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px;
  padding:24px 22px 46px;
}
.legal-foot a{color:var(--ink-400); text-decoration:none; font-size:.84rem;}
.legal-foot a:hover{color:var(--white);}