/* Los documentos legales.
   =========================================================================

   Comparten los tokens de `app.css` —los mismos colores, la misma tipografía—
   pero NO llevan ni una gota de ámbar. El ámbar significa «oportunidad» en
   esta interfaz, y un documento legal no es una oportunidad: si aparece aquí,
   deja de significar nada allí.

   Una columna, ancha de lectura, y nada más. Lo único que tiene que hacer esta
   página es dejar leer. */

body.legal {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  line-height: 1.65;
  margin: 0;
}

body.legal header {
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 1.5rem;
}

body.legal .volver {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
body.legal .volver:hover { color: var(--text); }
body.legal .volver span { color: var(--cyan); }

body.legal main {
  margin: 0 auto;
  max-width: 42rem;
  padding: 2.5rem 1.5rem 4rem;
}

body.legal h1 { font-size: 1.8rem; line-height: 1.2; margin: 0 0 1.5rem; text-wrap: balance; }
body.legal h2 {
  border-top: 1px solid var(--border);
  font-size: 1.25rem;
  margin: 2.5rem 0 .9rem;
  padding-top: 1.6rem;
  text-wrap: balance;
}
body.legal h3 { font-size: 1rem; margin: 1.8rem 0 .6rem; }
body.legal h4 { color: var(--muted); font-size: .9rem; margin: 1.4rem 0 .5rem; }

body.legal p { margin: 0 0 1rem; }
body.legal ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
body.legal li { margin-bottom: .45rem; }

body.legal a { color: var(--cyan); text-underline-offset: 3px; }
body.legal a:hover { color: var(--cyan-bright); }

body.legal strong { color: var(--text); font-weight: 600; }

body.legal code {
  background: var(--surface-2);
  border-radius: 3px;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: .85em;
  padding: .1em .35em;
}

body.legal blockquote {
  background: var(--surface);
  border-left: 3px solid var(--cyan);
  border-radius: 0 5px 5px 0;
  color: var(--muted);
  margin: 0 0 1.4rem;
  padding: .9rem 1.1rem .1rem;
}

body.legal hr { border: 0; border-top: 1px solid var(--border); margin: 2.2rem 0; }

/* Una tabla ancha se desplaza DENTRO de su caja. Sin esto, en un móvil la
   página entera se mueve de lado y el texto deja de leerse. */
body.legal .tabla { margin: 0 0 1.4rem; overflow-x: auto; }
body.legal table { border-collapse: collapse; font-size: .9rem; width: 100%; }
body.legal th, body.legal td {
  border-bottom: 1px solid var(--border);
  padding: .5rem .7rem;
  text-align: left;
}
body.legal th { color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
body.legal td { font-variant-numeric: tabular-nums; }

body.legal footer {
  border-top: 1px solid var(--border);
  color: var(--faint);
  font-size: .82rem;
  padding: 1.4rem 1.5rem 3rem;
  text-align: center;
}
body.legal footer a { color: var(--faint); }
body.legal footer a:hover { color: var(--muted); }