:root{--bg:#f4f5f7;--card:#fff;--ink:#1b1f24;--mut:#5b6572;--line:#dde1e6;--ac:#2a6df4}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--ink)}
header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:var(--card);border-bottom:1px solid var(--line)}
.marca{font-weight:700;font-size:1.1rem}.marca span{color:var(--ac)}.nota{color:var(--mut);font-size:.85rem}
main{max-width:960px;margin:0 auto;padding:36px 20px}h1{font-size:1.6rem;margin:0 0 4px}.s{color:var(--mut);margin:0 0 24px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
a.tarjeta{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
a.tarjeta:hover,a.tarjeta:focus-visible{border-color:var(--ac);transform:translateY(-2px);outline:none}
.ico{width:44px;height:44px;border-radius:10px;background:var(--ac);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.2rem}
.nom{font-weight:600;font-size:1.05rem}.des{color:var(--mut);font-size:.9rem;line-height:1.4}
.est{align-self:flex-start;font-size:.75rem;padding:3px 9px;border-radius:99px;background:#eaf1ff;color:#1c4fb8}