/* Estilos adicionales para las páginas legales.
   Se cargan DESPUÉS de main.css y reutilizan sus variables (--gold, --cream, etc.) */

body.legal-page { display: flex; flex-direction: column; min-height: 100vh; }

/* La navegación de main.css se oculta en móvil; en las páginas legales la mantenemos */
.nav-links.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
@media (max-width: 860px) {
  .nav-links.legal-nav { display: flex; gap: 6px 18px; font-size: 0.85rem; justify-content: flex-end; }
}
@media (max-width: 560px) {
  header .nav { flex-direction: column; align-items: flex-start; gap: 12px; }
  .nav-links.legal-nav { justify-content: flex-start; }
}

.legal {
  flex: 1;
  padding: 72px 0 110px;
  background:
    radial-gradient(ellipse 900px 420px at 18% -10%, rgba(108,79,224,0.28), transparent 60%),
    radial-gradient(ellipse 700px 420px at 100% 0%, rgba(245,185,60,0.12), transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--ink) 420px);
}

.content { max-width: 760px; margin: 0 auto; }

.content h1 {
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  line-height: 1.1;
  font-weight: 700;
  color: var(--cream);
}

.content .updated {
  display: inline-block;
  margin-top: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--gold);
}

.content h2 {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--cream);
}

.content p {
  margin-top: 14px;
  color: var(--cream-dim);
  font-size: 1.02rem;
  line-height: 1.7;
}
.content h1 + p, .content .updated + p { margin-top: 28px; }

.content strong { color: var(--cream); }

.content a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.content a:hover { color: var(--cream); }

.content ol, .content ul { margin: 16px 0 0; padding-left: 1.4rem; color: var(--cream-dim); line-height: 1.7; }
.content li { margin-top: 8px; padding-left: 4px; }
.content li::marker { color: var(--gold); font-weight: 700; }

.warning {
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid rgba(245,185,60,0.35);
  border-left: 4px solid var(--gold);
  background: rgba(245,185,60,0.08);
  color: var(--cream);
  line-height: 1.6;
}
.warning strong { color: var(--gold); }

@media (max-width: 480px) {
  .legal { padding: 48px 0 80px; }
  .content h2 { margin-top: 36px; padding-top: 22px; }
}