/* =============================================================================
   OUTDOOR HUB — LANDING · PÁGINAS LEGALES (política de privacidad)
   Modo Read: lo que importa es leer con comodidad. Columna angosta, interlineado
   generoso, jerarquía clara. Todo color/sombra/radio sale de tokens.css.
   La página se genera con scripts/build_legal.js desde docs/legal/*.md.
   ========================================================================== */

.legal {
  max-width: 50rem;
  padding-block: 3.5rem 6rem;
}

.legal__titulo {
  font-size: clamp(2rem, 5vw, 2.75rem);
  margin-bottom: 1.5rem;
}

.legal p,
.legal li {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-main);
}

.legal p { margin-block: 0 1.1rem; }

.legal strong { font-weight: 700; }

.legal h2 {
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  margin: 3.25rem 0 1rem;
  scroll-margin-top: 6rem;
}

.legal h3 {
  font-size: 1.1875rem;
  margin: 2rem 0 0.75rem;
  scroll-margin-top: 6rem;
}

.legal ul {
  margin: 0 0 1.25rem;
  padding-left: 1.4rem;
}
.legal li { margin-bottom: 0.6rem; padding-left: 0.2rem; }
.legal li::marker { color: var(--primary-text); }

.legal a {
  color: var(--primary-text);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.legal a:hover { text-decoration-thickness: 2px; }

/* Índice: salto directo a cada sección. */
.legal__toc {
  margin: 2.25rem 0 0.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.legal__toc-titulo {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.9rem;
  scroll-margin-top: 6rem;
}
.legal__toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem 2rem;
}
.legal__toc a {
  display: block;
  padding: 0.5rem 0;
  min-height: var(--tap-min);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
  color: var(--text-muted);
}
.legal__toc a:hover { color: var(--text-main); text-decoration: underline; }
@media (min-width: 720px) {
  .legal__toc ol { grid-template-columns: 1fr 1fr; }
  .legal__toc a { min-height: 0; padding: 0.35rem 0; }
}

/* Tabla (bases legales): se desplaza en horizontal en pantallas chicas en vez de romper la página. */
.legal__tabla {
  margin: 1.5rem 0 1.75rem;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.legal table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.legal th,
.legal td {
  padding: 0.8rem 1rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
.legal thead th {
  background: var(--surface-raised);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.legal tbody tr + tr > * { border-top: 1px solid var(--hairline); }
.legal tbody th { font-weight: 600; color: var(--text-main); width: 40%; }
.legal td { color: var(--text-main); }

/* Datos por completar: imposibles de pasar por alto. Desaparecen solos cuando se completan en el .md. */
.legal mark.pendiente {
  background: var(--status-hold-soft);
  color: var(--text-main);
  outline: 1px solid var(--status-hold);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.35em;
}
.legal__aviso {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--status-hold-soft);
  border-left: 4px solid var(--status-hold);
  border-radius: var(--radius-sm);
}

/* Impresión: fondo claro, sin navegación ni índice, enlaces con su dirección. */
@media print {
  :root { color-scheme: light; }
  body { background: Canvas; color: CanvasText; }
  .nav, .skip-link, .footer, .legal__toc { display: none; }
  .legal { max-width: none; padding-block: 0; }
  .legal p, .legal li, .legal td, .legal th, .legal h1, .legal h2, .legal h3 { color: CanvasText; background: none; }
  .legal a { color: CanvasText; }
  .legal a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .legal__tabla { overflow: visible; border-color: GrayText; }
  .legal h2, .legal h3 { break-after: avoid; }
  .legal tr, .legal li { break-inside: avoid; }
}