:root { --fondo:#f7f8fa; --tarjeta:#fff; --texto:#1f2933; --suave:#5b6773; --acento:#1f6feb; --borde:#e3e7ec; }
@media (prefers-color-scheme: dark) { :root { --fondo:#111418; --tarjeta:#1a1f26; --texto:#e8ecf0; --suave:#9aa6b2; --acento:#6ea8ff; --borde:#2a313a; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--fondo); color:var(--texto); font:16px/1.65 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; }
header { background:var(--tarjeta); border-bottom:1px solid var(--borde); }
.contenedor { max-width:820px; margin:0 auto; padding:0 20px; }
header .contenedor { display:flex; align-items:center; justify-content:space-between; height:64px; }
.marca { font-weight:700; letter-spacing:.04em; color:var(--texto); text-decoration:none; }
nav a { margin-left:18px; color:var(--suave); text-decoration:none; font-size:15px; }
nav a:hover { color:var(--acento); }
main { padding:36px 0 56px; }
h1 { font-size:2rem; line-height:1.25; margin:0 0 8px; }
h2 { font-size:1.25rem; margin:32px 0 8px; }
p, li { color:var(--texto); }
.suave { color:var(--suave); }
.tarjeta { background:var(--tarjeta); border:1px solid var(--borde); border-radius:12px; padding:20px 22px; margin:18px 0; }
a { color:var(--acento); }
footer { border-top:1px solid var(--borde); padding:22px 0 40px; color:var(--suave); font-size:14px; }
ul { padding-left:22px; }
.en { border-left:3px solid var(--acento); padding-left:16px; margin-top:36px; }
@media (max-width:560px) { h1 { font-size:1.55rem; } nav a { margin-left:12px; } }