/*
 * legal.css — per-section sheet for the legal pages (Aviso de Privacidad,
 * Términos del Servicio, Eliminación de datos). Long-form prose on the Fiesta
 * tokens; attached AFTER ui.css via content_for(:head), like marketing.css.
 * A page opts in with:
 *
 *   <% content_for :head, stylesheet_link_tag("legal", "data-turbo-track": "reload") %>
 *
 * Only the legal prose lives here; the shared footer component is in ui.css.
 */

.legal {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--space-12) var(--page-gutter) var(--space-16);
}

.legal__title {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-2);
}

.legal__updated {
  margin: 0 0 var(--space-10);
  color: var(--color-text-faint);
  font-size: var(--text-sm);
}

/* ----- Long-form body -------------------------------------------------- */
.legal__body {
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.legal__body h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  margin: var(--space-10) 0 var(--space-3);
}

.legal__body p,
.legal__body ul {
  margin: 0 0 var(--space-4);
}

.legal__body ul {
  padding-left: var(--space-6);
}

.legal__body li {
  margin-bottom: var(--space-2);
}

.legal__body a {
  color: var(--color-primary-strong);
  text-decoration: underline;
}

/* Encargados (data processors) table in the transfers section. */
.legal__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
}

.legal__body th,
.legal__body td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.legal__body thead th {
  background: var(--color-surface-sunk);
  font-weight: var(--weight-bold);
}