:root { --f:#f4f7f2; --c:#fff; --t:#17251b; --s:#5d6e61; --v:#2f8f4e; --b:#dbe5dc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --f:#0f1712; --c:#17231b; --t:#e6f1e8; --s:#93a897; --v:#6fcf8a; --b:#284032; } }
:root[data-theme="dark"] { --f:#0f1712; --c:#17231b; --t:#e6f1e8; --s:#93a897; --v:#6fcf8a; --b:#284032; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--f); color: var(--t); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 680px; margin: 0 auto; padding: 48px 16px 72px; }
header { display: flex; gap: 14px; align-items: center; margin-bottom: 28px; }
header img { width: 56px; height: 56px; }
h1 { font-size: 28px; margin: 0; line-height: 1.2; }
h2 { font-size: 18px; margin: 28px 0 6px; }
.lema { color: var(--s); }
.tarjeta { background: var(--c); border: 1px solid var(--b); border-radius: 16px; padding: 20px; }
a { color: var(--v); }
small, .pie { color: var(--s); font-size: 14px; }