:root { color-scheme: light dark; --tinta:#1a1c1e; --tenue:#5c6166; --fondo:#fff;
        --caja:#f4f5f6; --acento:#1c5a3d; }
@media (prefers-color-scheme: dark) {
  :root { --tinta:#e8eaec; --tenue:#9aa0a6; --fondo:#131517; --caja:#1d2023; --acento:#5fbf8f; }
}
* { box-sizing: border-box; }
body { margin:0; padding:0 20px; background:var(--fondo); color:var(--tinta);
       font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
main { max-width:680px; margin:0 auto; padding:56px 0 80px; }
h1 { font-size:30px; line-height:1.2; margin:0 0 8px; letter-spacing:-.02em; }
h2 { font-size:20px; margin:34px 0 10px; letter-spacing:-.01em; }
.sub { color:var(--tenue); margin:0 0 32px; font-size:17px; }
a { color:var(--acento); }
.caja { background:var(--caja); border-radius:12px; padding:18px 20px; margin:18px 0; }
ul { padding-left:20px; } li { margin:6px 0; }
footer { margin-top:56px; padding-top:20px; border-top:1px solid var(--caja);
         color:var(--tenue); font-size:14px; }