/* Páginas legales: mismo tono y colores que la app, sin depender del menú */
:root {
  --night: #1B1464;
  --violet: #3B2FC9;
  --sun: #FCC802;
  --ink: #17134A;
  --paper: #fff;
  --soft: rgba(255,255,255,.72);
  --display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; font-family: var(--body); color: var(--paper); line-height: 1.6;
  background: var(--night);
  background-image:
    radial-gradient(circle at 15% -5%, rgba(255,90,110,.4), transparent 42%),
    radial-gradient(circle at 110% 15%, rgba(47,123,255,.5), transparent 48%),
    linear-gradient(170deg, var(--violet), var(--night) 70%);
  background-attachment: fixed;
}
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 26px 18px 56px; }
header { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
header img { width: 54px; height: 54px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
header a { color: var(--paper); text-decoration: none; font-family: var(--display); font-size: 30px; letter-spacing: .4px; text-shadow: 0 3px 0 #120D4A; }
header a span { color: var(--sun); }
.volver { display: inline-block; margin: 4px 0 18px; color: var(--sun); font-weight: 900; font-size: 14px; text-decoration: none; }
.volver:hover { text-decoration: underline; }
h1 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: clamp(32px, 7vw, 44px); line-height: 1.05; text-shadow: 0 3px 0 #120D4A; }
.fecha { margin: 0 0 22px; font-weight: 800; font-size: 13px; color: var(--soft); }
main { background: var(--paper); color: var(--ink); border-radius: 26px; padding: 24px 22px; box-shadow: 0 10px 0 #120D4A, 0 24px 50px rgba(0,0,0,.35); }
main h2 { margin: 26px 0 8px; font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1.15; color: var(--ink); }
main h2:first-child { margin-top: 0; }
main p, main li { font-weight: 600; font-size: 15.5px; }
main ul { margin: 8px 0; padding-left: 22px; }
main li { margin: 5px 0; }
main a { color: #2F5FE0; font-weight: 800; }
main strong { font-weight: 900; }
.destacado { margin: 8px 0 0; padding: 12px 14px; border-radius: 16px; background: #FFF6D6; box-shadow: inset 0 0 0 2px #F3D36B; font-weight: 800; font-size: 14.5px; }
footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 22px; font-weight: 800; font-size: 13px; color: var(--soft); }
footer a { color: var(--soft); }
@media (max-width: 480px) { main { padding: 20px 16px; border-radius: 22px; } }