:root { color-scheme: light dark; --fondo: #ffffff; --texto: #1b2733; --suave: #51606e; --acento: #123b5a; --enlace: #0b5cad; --linea: #d8dee4; }
@media (prefers-color-scheme: dark) { :root { --fondo: #10161c; --texto: #e6ebf0; --suave: #a3afba; --acento: #8cc2ef; --enlace: #8cc2ef; --linea: #2b3640; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main, footer { max-width: 42rem; margin: 0 auto; padding: 0 1rem; }
main { padding-top: 2.5rem; padding-bottom: 1.5rem; }
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .75rem; color: var(--acento); }
h2 { font-size: 1.15rem; margin: 2rem 0 .5rem; color: var(--acento); }
p, li { margin: .5rem 0; }
ul { padding-left: 1.25rem; }
a { color: var(--enlace); }
a:focus-visible { outline: 3px solid var(--enlace); outline-offset: 2px; }
.lema { font-size: 1.2rem; color: var(--suave); margin-bottom: 1.5rem; }
.fecha, .traduccion { color: var(--suave); font-size: .95rem; }
footer { border-top: 1px solid var(--linea); padding-top: 1rem; padding-bottom: 2rem; color: var(--suave); font-size: .9rem; }