/* ================================================================
   legal.css — Estilos compartidos por las páginas de contenido chico
   (404.html, terminos.html): mismo hero centrado que contacto.css
   (.contact-hero, reutilizado tal cual) + lo propio de cada una.
   ================================================================ */

/* ── 404 ─────────────────────────────────────────────────────── */
/* Sin el "404" gigante: a una clienta no le dice nada. El título
   explica qué pasó y los botones la llevan a un lugar útil. */
.not-found {
  padding: 3.5rem 1.5rem 4rem;
  text-align: center;
}

.not-found h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 520px;
  margin: 0 auto 1rem;
  text-wrap: balance;
}

.not-found .ornamento { margin-bottom: 1.25rem; }

.not-found p {
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto 1.75rem;
}

.not-found-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── TÉRMINOS ────────────────────────────────────────────────── */
.legal-content {
  max-width: 640px;
  margin: 0 auto 5rem;
  padding: 0 1.5rem;
}

.legal-content h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.35rem;
  margin: 2.25rem 0 0.6rem;
}
.legal-content h2:first-child { margin-top: 0; }

.legal-content p {
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.7;
  margin: 0 0 0.5rem;
}

.legal-content a { color: var(--primary); text-underline-offset: 3px; }

.legal-updated {
  font-size: 0.87rem;
  color: var(--text-3);
  margin-top: 2.5rem;
}