/* Página de texto corrido: política de privacidade e o que vier depois.

   Documento legal se lê diferente do catálogo. O catálogo é varrido de
   relance — card, preço, filtro. Aqui a pessoa lê linha por linha, e
   quase sempre porque está procurando UMA coisa: o que vocês guardam,
   como apagar. Então a medida da linha encolhe para caber no olho, e os
   títulos de seção ficam fáceis de achar rolando. */

.legal {
  max-width: 68ch;
  margin: clamp(28px, 6vw, 64px) auto clamp(48px, 8vw, 96px);
  padding-inline: var(--margem);
}

.legal-cabeca { border-bottom: 3px solid var(--laranja); padding-bottom: 1.1rem; margin-bottom: 2.2rem; }

.legal h1 {
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-stretch: 125%; font-weight: 900;
  line-height: 1.08; text-wrap: balance; margin: 0;
}

.legal-data { color: var(--texto-fraco); font-size: .85rem; margin: .7rem 0 0; }

.legal h2 {
  font-size: 1.05rem; font-weight: 800; font-stretch: 110%;
  text-transform: uppercase; letter-spacing: .04em;
  margin: 2.4rem 0 .7rem;
}

.legal p, .legal li { color: var(--texto-medio); line-height: 1.65; }
.legal p { margin: 0 0 .9rem; }

.legal ul { margin: 0 0 .9rem; padding-left: 1.15rem; }
.legal li { margin-bottom: .4rem; }

.legal strong { color: var(--texto); font-weight: 700; }
.legal a { color: var(--laranja-forte); font-weight: 600; }

/* Bloco do controlador: é o dado que a pessoa veio buscar quando quer
   exercer um direito, então sai do texto corrido e vira endereço. */
.legal-contato {
  background: var(--laranja-fraco);
  border-left: 3px solid var(--laranja);
  padding: 1.1rem 1.3rem;
  margin: 1.2rem 0 .9rem;
  border-radius: 0 6px 6px 0;
}
.legal-contato p { margin: 0 0 .35rem; }
.legal-contato p:last-child { margin-bottom: 0; }

/* Topo enxuto: esta página não tem busca nem carrinho, só a volta.

   O cabeçalho do site é claro (--papel) e só ganha borda ao rolar, porque
   lá embaixo dele vem a barra de departamentos fazendo a separação. Aqui
   essa barra não existe, então a borda é fixa — sem ela o topo encosta no
   texto e a página começa sem cabeçalho nenhum. */
.legal-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: var(--topo-altura);
}

/* A borda vai no cabeçalho, não na faixa: a faixa tem largura máxima e o
   traço pararia no meio da tela. */
.topo-legal { border-bottom-color: var(--linha); }

.legal-voltar {
  color: var(--texto-medio); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  white-space: nowrap;
}
.legal-voltar:hover { color: var(--laranja-forte); }