/**
 * legal.css — Páginas legales (términos, privacidad).
 *
 * El layout, la barra lateral y el contenido REUTILIZAN las clases de "El
 * programa" (.programa-body / .programa-nav / .programa-section /
 * .programa-section__title / .programa-prose) con su CSS real (programa-sobre.css),
 * para que sea idéntico — no estilos propios. Aquí solo: forzar texto oscuro,
 * la fila de meta (flag + fecha) y las listas que programa-prose no contempla.
 */

.legal-page { position: relative; }
.legal { color: var(--nexo-dark); }

/* Meta: flag de maqueta + última actualización */
.legal__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-8);
  padding-block-end: var(--space-6);
  border-block-end: 2px solid var(--nexo-dark);
}
.legal__updated {
  font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--nexo-dark) 55%, transparent);
}
.legal__flag {
  display: inline-block; padding: .35rem .8rem;
  background: var(--nexo-yellow); color: var(--nexo-dark);
  font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: .05em; text-transform: uppercase;
}

/* Ritmo vertical CONSISTENTE (simétrico): el MISMO gap entre todos los bloques
   —intro→sección y sección→sección— y un gap menor y uniforme entre el título y
   su párrafo. Así no hay separaciones desiguales. */
.legal-page .programa-prose + .programa-section,
.legal-page .programa-section + .programa-section {
  margin-block-start: var(--space-16);
}
.legal-page .programa-section__title { margin-block-end: var(--space-5); }
.legal-page .programa-prose p { margin-block-end: var(--space-4); }

/* Listas dentro de la prosa (programa-prose solo estiliza <p>) */
.legal-page .programa-prose ul { margin: 0 0 var(--space-6); padding-inline-start: 1.4em; list-style: disc; }
.legal-page .programa-prose ol { margin: 0 0 var(--space-6); padding-inline-start: 1.4em; list-style: decimal; }
.legal-page .programa-prose li { font-family: var(--font-heading); font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.legal-page .programa-prose li + li { margin-block-start: .4em; }
.legal-page .programa-prose li::marker { color: var(--nexo-red); }
.legal-page .programa-prose a { color: var(--nexo-purple); text-decoration: underline; text-underline-offset: 3px; }