/* ═══════════════════════════════════════════════════════════════════════════════════════
   LYVA — LEGALES.  Hoja compartida de /privacidad, /terminos y /eliminar-cuenta.      (O6)
   ═══════════════════════════════════════════════════════════════════════════════════════

   Son las «superficies invisibles»: paginas que Apple y Google EXIGEN, que el usuario abre
   justo cuando duda de ti, y que ninguna revision mira porque no estan donde se mira.

   Hasta O6 las tres llevaban el mismo <style> inline copiado byte a byte (privacidad y
   terminos con el MISMO md5), no enlazaban ninguna hoja y por tanto **no declaraban un solo
   @font-face**: pedian Inter y caian a la fuente del sistema. La pagina donde el usuario
   decide si confia en ti era la unica que no se veia como Lyva.

   Deliberadamente MINIMA. No reusa shared/style.css: esa hoja son 97 KB de app —shell,
   router, reproductor, editor— y estas paginas son tres documentos de texto. Traerla entera
   para pintar parrafos seria pagar la app para leer un aviso. Lo unico que comparten de
   verdad son los tokens, y esos ya vienen de tokens.css.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); line-height:1.6;
}
/* Mismo criterio que en las otras dos hojas: el suavizado adelgaza los trazos, y a 1x
   (monitor externo) deja el texto anemico. Solo en pantallas de alta densidad. */
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:2dppx) {
  body { -webkit-font-smoothing:antialiased; }
}

.wrap { max-width:760px; margin:0 auto; padding:32px 20px 64px; }

/* Cabecera: la marca REAL (simbolo + palabra), igual que el sitio publico. Antes era una
   palabra suelta en verde; un aviso legal que no lleva tu marca no parece tuyo. */
header { padding:24px 0 8px; border-bottom:2px solid var(--accent); margin-bottom:8px; }
.brand { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display);
  font-size:1.625rem; font-weight:700; color:var(--accent); letter-spacing:-.01em; text-decoration:none; }
.brand img { width:30px; height:auto; display:block; }

h1 { font-family:var(--font-display); font-size:1.5rem; margin:24px 0 4px; letter-spacing:-.015em; }
h2 { font-family:var(--font-display); font-size:1.125rem; margin:32px 0 8px; color:var(--accent2); letter-spacing:-.01em; }
p, li { font-size:1rem; }
ul { padding-left:20px; }
/* --accent sobre --bg mide 4.72: muy justo, y un enlace es texto chico. Para texto en verde
   la regla del sistema es --accent2 (6.85). Ver «O4 · contraste» del estandar visual. */
a { color:var(--accent2); word-break:break-word; }
.updated { color:var(--dim); font-size:.875rem; margin:0 0 24px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 20px; margin:16px 0; }
.muted { color:var(--dim); font-size:.875rem; }
.btn { display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
  padding:12px 20px; border-radius:10px; font-weight:600; margin-top:8px; }
footer { margin-top:40px; padding-top:16px; border-top:1px solid var(--line); color:var(--dim); font-size:.875rem; }