:root {
  --fondo: #f6f4ef; --tarjeta: #fff; --texto: #1d2a22; --suave: #5b685f;
  --acento: #1f5c3a; --acento-texto: #fff; --borde: #d9d5c9; --error: #a42a2a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #141a16; --tarjeta: #1d261f; --texto: #eaf0eb; --suave: #a3b0a7;
    --acento: #5cb887; --acento-texto: #0d1a12; --borde: #2f3b32; --error: #ff8a8a;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.5 system-ui, sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: 24px 16px 48px; }
.cabecera { margin: 0 0 24px; }
.cabecera + h1.centrado { text-align: center; }
.marca-chica { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.logo-marca { width: 34px; height: auto; color: var(--texto); }
.logo-marca path { vector-effect: non-scaling-stroke; stroke-width: 1.4px; }
.marca-central { text-align: center; padding: 4px 0 0; }
.logo-marca.grande { display: block; width: 76px; margin: 0 auto; }
.nombre { margin: 10px 0 0; font-size: 1.1rem; line-height: 1; font-weight: 300; letter-spacing: .32em; text-transform: uppercase; padding-left: .32em; }
.sub { margin: 8px 0 0; font-size: .65rem; line-height: 1; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--suave); padding-left: .22em; }
h1 { margin: 0 0 20px; font-size: 1.35rem; font-weight: 600; }
a { color: var(--acento); }
.volver { display: inline-block; padding: 8px 0; text-decoration: none; }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.grupos { display: grid; gap: 12px; }
.tarjeta { display: flex; flex-direction: column; gap: 2px; min-height: 64px; justify-content: center; padding: 14px 18px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; color: var(--texto); text-decoration: none; }
.tarjeta strong { font-size: 1.1rem; }
.tarjeta span { color: var(--suave); font-size: .9rem; }
.tarjeta:hover, .tarjeta:focus-visible { border-color: var(--acento); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.login { display: grid; gap: 12px; max-width: 360px; }
label { font-weight: 600; }
input { padding: 12px; font-size: 1rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--tarjeta); color: var(--texto); }
button { min-height: 44px; padding: 10px 18px; font-size: 1rem; border: 0; border-radius: 8px; background: var(--acento); color: var(--acento-texto); cursor: pointer; }
button.secundario { margin-top: 24px; background: transparent; color: var(--acento); border: 1px solid var(--borde); }
.error { margin: 0; color: var(--error); }
@media (min-width: 560px) { .grupos { grid-template-columns: repeat(3, 1fr); } }