:root { color-scheme:light dark; --fondo:#e3faf0; --tarjeta:rgba(255,255,255,.6); --texto:#052e22; --suave:#3b6a5a; --acento:#047857; --borde:rgba(255,255,255,.75); --neon:rgba(16,185,129,.35); }
@media (prefers-color-scheme: dark) { :root { --fondo:#021510; --tarjeta:rgba(14,48,38,.5); --texto:#e4fff4; --suave:#8fcdb6; --acento:#6ee7b7; --borde:rgba(167,243,208,.26); --neon:rgba(52,211,153,.45); } }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--texto); background-color:var(--fondo);
  background-image:radial-gradient(52rem 38rem at 8% -8%, rgba(16,185,129,.5), transparent 62%), radial-gradient(44rem 34rem at 105% 6%, rgba(45,212,191,.38), transparent 58%), radial-gradient(40rem 40rem at 60% 112%, rgba(132,204,22,.2), transparent 60%);
  background-attachment:fixed; }
main { max-width:720px; margin:0 auto; padding:calc(20px + env(safe-area-inset-top)) 16px calc(50px + env(safe-area-inset-bottom)); }
.hoja { background:var(--tarjeta); border:1px solid var(--borde); border-radius:22px; padding:6px 20px 22px; -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5); box-shadow:0 8px 32px rgba(0,30,20,.2), 0 0 26px -6px var(--neon); }
h1 { font-size:1.6rem; margin:.7em 0 .1em; } h2 { font-size:1.1rem; margin:1.6em 0 .3em; color:var(--acento); }
p, li { margin:.4em 0; } ul { padding-left:1.2em; } a { color:var(--acento); font-weight:600; }
.suave { color:var(--suave); font-size:.92rem; }
.volver { display:inline-block; margin-bottom:12px; text-decoration:none; }
nav.pie { margin-top:18px; text-align:center; font-size:.9rem; }