/* pagina: blog (extraido del mockup 04-blog) */
.cats{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 26px}
  .cats a{padding:8px 16px;border-radius:var(--radius-pill);font-weight:800;font-size:13.5px;background:var(--bg-elev);border:1.5px solid var(--line-strong);color:var(--ink-soft);min-height:40px;display:inline-flex;align-items:center}
  .cats a.active{background:var(--brand-green);color:var(--ink-on-green);border-color:transparent}
  .featured{display:grid;grid-template-columns:1fr;gap:22px;background:var(--bg-elev);border:1.5px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:34px}
  .featured img{width:100%;height:100%;min-height:220px;object-fit:cover}
  .featured .fbody{padding:26px}
  .featured h2{margin:12px 0 10px}
  .gen-thumb{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
  .gen-thumb svg{width:46px;height:46px;color:var(--on-accent);opacity:.9}
  .gen-green{background:linear-gradient(150deg,var(--brand-green),var(--brand-teal))}
  .gen-teal{background:linear-gradient(150deg,var(--brand-teal),var(--brand-teal-deep))}
  .gen-orange{background:linear-gradient(150deg,var(--accent),var(--brand-yellow))}
  .pagination{display:flex;gap:8px;justify-content:center;margin-top:40px}
  .pagination a{min-width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--ink-soft);background:var(--bg-elev)}
  .pagination a.active{background:var(--brand-teal);color:var(--on-accent);border-color:transparent}
  @media(min-width:820px){
    .featured{grid-template-columns:1.05fr 1fr}
    .featured .fbody{padding:38px;display:flex;flex-direction:column;justify-content:center}
  }