:root{--fondo:#fff;--texto:#1b1f24;--suave:#5b6470;--acento:#0b5fff;--borde:#d9dee5;--tarjeta:#f5f7fa}
@media (prefers-color-scheme:dark){:root{--fondo:#10141a;--texto:#e8ecf1;--suave:#9aa5b1;--acento:#7aa7ff;--borde:#2a323d;--tarjeta:#171d26}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font:1.0625rem/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ancho{max-width:46rem;margin:0 auto;padding:0 1rem}
.salto{position:absolute;left:-999px;top:0;background:var(--acento);color:#fff;padding:.5rem 1rem;z-index:9}.salto:focus{left:0}
.cab{border-bottom:1px solid var(--borde)}.cab .ancho{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;justify-content:space-between;padding-top:.75rem;padding-bottom:.75rem;max-width:64rem}
.marca{display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--texto);text-decoration:none}
.cab nav{display:flex;flex-wrap:wrap;gap:.25rem 1rem}.cab nav a{color:var(--suave);text-decoration:none;padding:.4rem 0;min-height:24px}.cab nav a[aria-current],.cab nav a:hover{color:var(--acento)}
main{padding-top:1.5rem;padding-bottom:3rem}
h1{font-size:clamp(1.75rem,5vw,2.4rem);line-height:1.2;margin:.5rem 0 1rem}h2{font-size:1.4rem;margin:2rem 0 .5rem;line-height:1.3}
a{color:var(--acento)}code{background:var(--tarjeta);padding:.1em .35em;border-radius:4px;font-size:.92em}
.migas{font-size:.9rem;color:var(--suave)}.migas a,.migas span{color:var(--suave)}
.boton{display:inline-block;background:var(--acento);color:#fff;padding:.75rem 1.25rem;border-radius:8px;text-decoration:none;font-weight:600;min-height:44px}
@media (prefers-color-scheme:dark){.boton{color:#10141a}}
.tarjetas{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.tarjeta{display:block;border:1px solid var(--borde);background:var(--tarjeta);border-radius:10px;padding:1rem;text-decoration:none;color:var(--texto)}.tarjeta strong{display:block;color:var(--acento);margin-bottom:.25rem}.tarjeta span{color:var(--suave);font-size:.95rem}
details{border:1px solid var(--borde);border-radius:8px;padding:.5rem 1rem;margin:.5rem 0}summary{cursor:pointer;font-weight:600;padding:.25rem 0}
.pie{border-top:1px solid var(--borde);color:var(--suave);font-size:.9rem;padding:1rem 0}.pie a{color:var(--suave)}
:focus-visible{outline:3px solid var(--acento);outline-offset:2px}