/* Páginas legales: una columna de lectura, nada más. El resto del estilo lo
   ponen estilos.css y las variables de tema. */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(28px + env(safe-area-inset-top)) 20px calc(60px + env(safe-area-inset-bottom));
  line-height: 1.75;
}
.legal h1 { font-size: 2rem; letter-spacing: -.03em; margin: 0 0 6px; }
.legal .fecha { color: var(--texto-2); font-size: .9rem; margin: 0 0 30px; }
.legal h2 {
  font-size: 1.2rem; margin: 34px 0 10px; letter-spacing: -.02em;
  padding-top: 20px; border-top: 1px solid var(--borde);
}
.legal h3 { font-size: 1rem; margin: 20px 0 6px; }
.legal p, .legal li { color: var(--texto-2); }
.legal ul { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.legal strong { color: var(--texto); }
.legal .destacado {
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: 14px; padding: 16px 18px; margin: 18px 0;
}
.legal-nav {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  padding: 14px 20px calc(14px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--borde);
}
.legal-nav a { color: var(--texto-2); text-decoration: none; }
.legal-nav a:hover, .legal-nav a[aria-current] { color: var(--marca); }
.legal-nav .crece { flex: 1; }
@media (max-width: 560px) { .legal h1 { font-size: 1.6rem; } }