:root {
  --fondo: #f6f7f9; --tarjeta: #ffffff; --texto: #1d2330; --suave: #5b6475;
  --marca: #0e8f6e; --marca-suave: #e3f4ee; --borde: #e3e6eb;
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #12151b; --tarjeta: #1b2029; --texto: #e8ebf0; --suave: #a2abba;
          --marca: #36c39b; --marca-suave: #17332b; --borde: #2a313d; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto);
       font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; }
header.portada { text-align: center; padding: 24px 0 8px; }
header.portada h1 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 8px; }
.lema { color: var(--suave); margin: 0; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px;
           padding: 20px 22px; margin: 18px 0; }
h2 { font-size: 1.2rem; margin: 0 0 10px; }
h3 { font-size: 1.02rem; margin: 18px 0 6px; }
ul { padding-left: 1.2em; margin: 6px 0; }
.marcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px;
          list-style: none; padding: 0; }
.marcas a { display: block; padding: 10px 12px; border-radius: 10px; background: var(--marca-suave);
            color: var(--texto); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.marcas a:hover { outline: 2px solid var(--marca); }
a { color: var(--marca); }
.pie { text-align: center; color: var(--suave); font-size: .92rem; margin-top: 28px; }
.pie a { margin: 0 6px; }
.nota { color: var(--suave); font-size: .92rem; }