/* Páginas legales: privacidad y, más adelante, términos.

   Texto largo y nada más, así que la única decisión de diseño que importa es el
   ancho de línea: una política a todo el ancho de un monitor no la lee nadie. */

.legal {
  max-width: 72ch;
  padding-top: 40px;
  padding-bottom: 80px;
}
.legal h1 { font-size: 1.9rem; margin: 0 0 4px; letter-spacing: -0.02em; }
.legal h2 {
  font-size: 1.15rem;
  margin: 40px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--borde);
}
.legal .fecha { color: var(--texto-suave); font-size: 0.9rem; margin: 0 0 28px; }
.legal p, .legal li { line-height: 1.7; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 10px; }

/* Lo primero que alguien quiere saber al abrir esto. */
.legal .destacado {
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--menta-suave);
  border: 1px solid var(--menta);
  font-size: 1rem;
}

/* La tabla desborda hacia adentro; la página nunca se va de ancho en un
   teléfono. */
.legal table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.92rem;
}
.legal th, .legal td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}
.legal th { background: var(--fondo-alt); font-weight: 600; }

.enlace-volver { color: var(--cabecera-texto-suave); text-decoration: none; font-size: 0.92rem; }
.enlace-volver:hover { color: var(--cabecera-texto); }