/* ============================================================
   blog.css — Blog técnico (SEO · Sprint 3). Complementa landing.css.
   ============================================================ */
.bl-hero{padding:56px 0 30px;border-bottom:1px solid var(--lp-line);position:relative}
.bl-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 300px at 20% -20%,rgba(229,9,20,.14),transparent 60%)}
.bl-hero .wrap{position:relative}
.bl-cat{color:var(--lp-red);font-family:'Barlow Condensed';letter-spacing:.12em;text-transform:uppercase;font-weight:700;font-size:13px}
.bl-hero h1{font-size:clamp(30px,4.4vw,50px);text-transform:none;margin:8px 0 12px;max-width:900px}
.bl-meta{color:var(--lp-mut);font-size:14px}
.bl-cover{max-width:1180px;margin:22px auto 0;padding:0 22px}
.bl-cover img{width:100%;max-height:420px;object-fit:cover;border-radius:14px;border:1px solid var(--lp-line)}

/* Cuerpo del artículo (prosa) */
.bl-body{max-width:760px;margin:0 auto;padding:40px 22px 10px;font-size:17.5px;color:#dcdcdc}
.bl-body h2{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:28px;color:#fff;margin:34px 0 12px;text-transform:none}
.bl-body h3{font-size:20px;color:#fff;margin:22px 0 8px}
.bl-body p{margin:0 0 16px;line-height:1.75}
.bl-body ul,.bl-body ol{margin:0 0 18px;padding-left:22px}
.bl-body li{margin:6px 0}
.bl-body strong{color:#fff}
.bl-body a{color:var(--lp-red);text-decoration:underline}
.bl-table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:15.5px}
.bl-table th,.bl-table td{border:1px solid var(--lp-line);padding:10px 12px;text-align:left}
.bl-table th{background:#141414;color:#fff;font-family:'Barlow Condensed'}
.bl-callout{background:var(--lp-panel);border:1px solid var(--lp-line);border-left:3px solid var(--lp-red);border-radius:8px;padding:16px 18px;margin:0 0 22px;color:#eaeaea}

/* CTA pillar dentro del artículo */
.bl-cta{max-width:760px;margin:26px auto;padding:22px;background:linear-gradient(135deg,#160406,#0c0c0c);border:1px solid var(--lp-line);border-radius:14px;text-align:center}
.bl-cta h3{color:#fff;font-size:22px;margin:0 0 6px}
.bl-cta p{color:var(--lp-mut);margin:0 0 14px}

/* Índice del blog */
.bl-index{padding:46px 0}
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.bl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.bl-grid{grid-template-columns:1fr}}
.bl-card{background:var(--lp-panel);border:1px solid var(--lp-line);border-radius:12px;overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.bl-card:hover{transform:translateY(-3px);border-color:#333}
.bl-card img{aspect-ratio:16/9;object-fit:cover}
.bl-card .bd{padding:16px 18px 20px}
.bl-card .bl-cat{font-size:11px}
.bl-card h3{color:#fff;font-size:19px;margin:6px 0}
.bl-card p{color:var(--lp-mut);font-size:14px;margin:0}
.bl-catnav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.bl-catnav a{background:var(--lp-panel);border:1px solid var(--lp-line);border-radius:20px;padding:7px 15px;color:#cfcfcf;font-size:13px}
.bl-catnav a:hover{border-color:var(--lp-red);color:#fff}