/* ==========================================================================
   Listado de blog (/blog/) — italo-blog-child
   Basado en el mockup v3 aprobado. Variables escopadas a .itb-blog-listado
   para no filtrar al resto del sitio (mismo criterio que blog-interactivo.css).
   ========================================================================== */

.itb-blog-listado{
  --itb-bg:#F4F5F7; --itb-card:#FFFFFF; --itb-ink:#1B2230; --itb-muted:#5A6372; --itb-line:#E2E5EA;
  --itb-brand:#5B5BD6; --itb-low-bg:#E8EFFA;
  --itb-cat-servidores:#5B5BD6; --itb-cat-servidores-b:#403FA8;
  --itb-cat-sistemas:#0E7C86; --itb-cat-sistemas-b:#0A5B62;
  --itb-cat-hardware:#C2660E; --itb-cat-hardware-b:#8F4A09;
  --itb-cat-software:#1E8F5F; --itb-cat-software-b:#156B46;
  --itb-cat-neutral:#5A6372; --itb-cat-neutral-b:#3A4150;
  --itb-f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --itb-f-body:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --itb-f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  width:100%;flex:1 1 100%;max-width:1140px;margin:0 auto;color:var(--itb-ink);font:16px/1.6 var(--itb-f-body);
}
.itb-blog-listado *{box-sizing:border-box}

.itb-blog-listado .itb-hero{padding:48px 24px 32px;text-align:center}
.itb-blog-listado .itb-eyebrow{font-family:var(--itb-f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--itb-brand);margin:0 0 12px}
.itb-blog-listado .itb-hero h1{font-family:var(--itb-f-display);font-size:clamp(28px,4.5vw,44px);line-height:1.1;margin:0 auto 14px;letter-spacing:-.02em;max-width:780px}
.itb-blog-listado .itb-hero p{color:var(--itb-muted);margin:0 auto;max-width:560px;font-size:17px}
.itb-blog-listado .itb-stats{display:flex;gap:28px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.itb-blog-listado .itb-stat b{font-family:var(--itb-f-display);font-size:22px;display:block}
.itb-blog-listado .itb-stat span{font-size:12px;color:var(--itb-muted);text-transform:uppercase;letter-spacing:.04em;font-family:var(--itb-f-mono)}

.itb-blog-listado .itb-featured{margin:12px 24px 54px;border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;background:var(--itb-card);border:1px solid var(--itb-line);box-shadow:0 18px 40px rgba(27,34,48,.08)}
@media (max-width:760px){.itb-blog-listado .itb-featured{grid-template-columns:1fr}}
.itb-blog-listado .itb-fcover{position:relative;min-height:280px;display:flex;flex-direction:column;justify-content:space-between;padding:28px;color:#fff;overflow:hidden;
  background:radial-gradient(circle at 20% 15%, rgba(255,255,255,.18), transparent 45%), radial-gradient(circle at 85% 80%, rgba(255,255,255,.12), transparent 50%), linear-gradient(135deg,var(--itb-cat-servidores),var(--itb-cat-servidores-b))}
.itb-blog-listado .itb-fcover.itb-c-sistemas{background:radial-gradient(circle at 20% 15%, rgba(255,255,255,.18), transparent 45%), radial-gradient(circle at 85% 80%, rgba(255,255,255,.12), transparent 50%), linear-gradient(135deg,var(--itb-cat-sistemas),var(--itb-cat-sistemas-b))}
.itb-blog-listado .itb-fcover.itb-c-software{background:radial-gradient(circle at 20% 15%, rgba(255,255,255,.18), transparent 45%), radial-gradient(circle at 85% 80%, rgba(255,255,255,.12), transparent 50%), linear-gradient(135deg,var(--itb-cat-software),var(--itb-cat-software-b))}
.itb-blog-listado .itb-fcover.itb-c-hardware{background:radial-gradient(circle at 20% 15%, rgba(255,255,255,.18), transparent 45%), radial-gradient(circle at 85% 80%, rgba(255,255,255,.12), transparent 50%), linear-gradient(135deg,var(--itb-cat-hardware),var(--itb-cat-hardware-b))}
.itb-blog-listado .itb-fcover.itb-c-neutral{background:radial-gradient(circle at 20% 15%, rgba(255,255,255,.18), transparent 45%), linear-gradient(135deg,var(--itb-cat-neutral),var(--itb-cat-neutral-b))}
.itb-blog-listado .itb-fcover::after{content:attr(data-glyph);position:absolute;right:-10px;bottom:-40px;font-family:var(--itb-f-mono);font-size:150px;font-weight:700;color:rgba(255,255,255,.14);line-height:1}
.itb-blog-listado .itb-fbadge{align-self:flex-start;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);padding:6px 14px;border-radius:999px;font-family:var(--itb-f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;position:relative;z-index:1}
.itb-blog-listado .itb-fglyph{font-family:var(--itb-f-mono);font-size:13px;letter-spacing:.08em;opacity:.85;position:relative;z-index:1}
.itb-blog-listado .itb-fbody{padding:36px 34px}
.itb-blog-listado .itb-fcat{font-family:var(--itb-f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--itb-brand);margin:0 0 10px}
.itb-blog-listado .itb-ftitle{font-family:var(--itb-f-display);font-size:clamp(20px,2.4vw,28px);font-weight:800;line-height:1.2;margin:0 0 14px;letter-spacing:-.01em}
.itb-blog-listado .itb-ftitle a{color:inherit;text-decoration:none}
.itb-blog-listado .itb-fexcerpt{color:var(--itb-muted);margin:0 0 22px;font-size:15px}
.itb-blog-listado .itb-fmeta{display:flex;gap:16px;align-items:center;font-size:13px;color:var(--itb-muted);margin-bottom:22px;font-family:var(--itb-f-mono)}
.itb-blog-listado .itb-fcta{display:inline-flex;align-items:center;gap:8px;background:var(--itb-brand);color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:12px 22px;border-radius:999px;transition:transform .15s ease,box-shadow .15s ease}
.itb-blog-listado .itb-fcta:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(91,91,214,.35)}

.itb-blog-listado .itb-section-head{display:flex;align-items:center;justify-content:space-between;padding:0 24px 18px;flex-wrap:wrap;gap:14px}
.itb-blog-listado .itb-section-head h2{font-family:var(--itb-f-display);font-size:22px;margin:0;letter-spacing:-.01em}
.itb-blog-listado .itb-filter{display:flex;gap:8px;flex-wrap:wrap}
.itb-blog-listado .itb-fbtn{font:600 13px var(--itb-f-body);padding:8px 16px;border-radius:999px;border:1px solid var(--itb-line);background:var(--itb-card);color:var(--itb-ink);cursor:pointer;transition:.15s}
.itb-blog-listado .itb-fbtn:focus-visible,.itb-blog-listado .itb-pcard:focus-visible,.itb-blog-listado .itb-fcta:focus-visible{outline:3px solid var(--itb-brand);outline-offset:3px}
.itb-blog-listado .itb-fbtn.itb-on{background:var(--itb-ink);border-color:var(--itb-ink);color:#fff}

.itb-blog-listado .itb-cards{padding:0 24px 80px;display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.itb-blog-listado .itb-pcard{background:var(--itb-card);border:1px solid var(--itb-line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease}
.itb-blog-listado .itb-pcard:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(27,34,48,.1)}
.itb-blog-listado .itb-pcover{aspect-ratio:16/10;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:16px}
.itb-blog-listado .itb-pcover.itb-c-sistemas{background:radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 50%), linear-gradient(135deg,var(--itb-cat-sistemas),var(--itb-cat-sistemas-b))}
.itb-blog-listado .itb-pcover.itb-c-servidores{background:radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 50%), linear-gradient(135deg,var(--itb-cat-servidores),var(--itb-cat-servidores-b))}
.itb-blog-listado .itb-pcover.itb-c-software{background:radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 50%), linear-gradient(135deg,var(--itb-cat-software),var(--itb-cat-software-b))}
.itb-blog-listado .itb-pcover.itb-c-hardware{background:radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 50%), linear-gradient(135deg,var(--itb-cat-hardware),var(--itb-cat-hardware-b))}
.itb-blog-listado .itb-pcover.itb-c-neutral{background:radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 50%), linear-gradient(135deg,var(--itb-cat-neutral),var(--itb-cat-neutral-b))}
.itb-blog-listado .itb-pcover::after{content:attr(data-glyph);position:absolute;right:-6px;bottom:-26px;font-family:var(--itb-f-mono);font-size:88px;font-weight:700;color:rgba(255,255,255,.14);line-height:1}
.itb-blog-listado .itb-pnum{position:relative;z-index:1;color:#fff;font-family:var(--itb-f-mono);font-size:12px;letter-spacing:.06em;background:rgba(255,255,255,.16);padding:4px 10px;border-radius:999px}
.itb-blog-listado .itb-pbody{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.itb-blog-listado .itb-pcat{font-family:var(--itb-f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--itb-brand);margin:0 0 10px}
.itb-blog-listado .itb-ptitle{font-family:var(--itb-f-display);font-size:18px;font-weight:800;line-height:1.28;margin:0 0 10px;letter-spacing:-.01em}
.itb-blog-listado .itb-ptitle a{color:inherit;text-decoration:none}
.itb-blog-listado .itb-pexcerpt{color:var(--itb-muted);font-size:14px;margin:0 0 16px;flex:1}
.itb-blog-listado .itb-pmeta{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--itb-muted);padding-top:12px;border-top:1px solid var(--itb-line)}
.itb-blog-listado .itb-plink{font-weight:700;color:var(--itb-brand);font-size:13px}

.itb-blog-listado .itb-pcard.itb-is-featured{display:none}
.itb-blog-listado .itb-empty{padding:30px 24px;text-align:center;color:var(--itb-muted);font-family:var(--itb-f-mono);font-size:13px;display:none}
.itb-blog-listado .itb-empty.itb-show{display:block}