/* ============================================================
   legal.css — aviso-privacidad.html y páginas de contenido legal
   Reutiliza los tokens de index.css; solo agrega tipografía de
   lectura larga (prosa), sin nada nuevo de color/paleta.
   ============================================================ */

.legal-page {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem);
  background: var(--color-bg-page);
  min-height: 60vh;
}

.legal-container {
  max-width: 760px;
}

.legal-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--color-charcoal);
  margin: var(--space-3) 0 var(--space-2);
}

.legal-updated {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.legal-notice {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
  background: var(--color-accent-2-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: var(--space-5);
  margin-bottom: var(--space-10);
}
.legal-notice code {
  background: var(--color-warm-white);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

.legal-section {
  margin-bottom: var(--space-8);
}
.legal-section h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--font-size-xl);
  color: var(--color-charcoal);
  margin-bottom: var(--space-4);
}
.legal-section p {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.legal-section ul {
  margin: 0 0 var(--space-4);
  padding-left: 1.25rem;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: 1.75;
  color: var(--color-text-secondary);
}
.legal-section li {
  margin-bottom: var(--space-2);
}
.legal-section strong {
  color: var(--color-charcoal);
}

.legal-contact {
  font-family: var(--font-body);
  color: var(--color-text-secondary);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}