/* ============================================================
   blog.css — 247grua.com
   Hoja SEPARADA. No se toca ningun estilo del resto del sitio.
   Todos los colores llevan valor literal: nada depende de que
   una custom property resuelva correctamente.
   ============================================================ */

.blogpage{--b-max:1200px}
.blogpage .bwrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------------------------- HERO ---------------------------- */
.bhero{background:#161d1f;background:linear-gradient(135deg,#161d1f 0%,#3a1113 55%,#ba0013 140%);
  color:#fff;overflow:hidden}
.bhero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
  max-width:1200px;margin:0 auto;padding:54px 24px}
.bhero-copy{min-width:0}
.bhero .bcrumb{font-size:.82rem;color:rgba(255,255,255,.62);margin-bottom:13px}
.bhero .bcrumb a{color:rgba(255,255,255,.88);text-decoration:none}
.bhero .bcrumb a:hover{color:#fff;text-decoration:underline}
.btag{display:inline-block;background:#ba0013;background:linear-gradient(135deg,#ba0013,#e31e24);
  color:#fff;font-family:Montserrat,sans-serif;font-weight:700;font-size:.69rem;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 13px;border-radius:50px;margin-bottom:14px}
.bhero h1{color:#fff;font-family:Montserrat,sans-serif;font-size:clamp(1.6rem,2.9vw,2.3rem);
  line-height:1.2;margin:0;font-weight:800;letter-spacing:-.01em}
.bhero .bsub{color:rgba(255,255,255,.84);font-size:1.02rem;line-height:1.6;margin:13px 0 0;max-width:56ch}
.bhero-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:17px;font-size:.84rem;color:rgba(255,255,255,.68)}
.bhero-meta span{display:inline-flex;align-items:center;gap:6px}
.bhero-meta .material-symbols-outlined{font-size:1rem}
.bhero-img{border-radius:20px;overflow:hidden;box-shadow:0 22px 56px rgba(0,0,0,.4);aspect-ratio:16/11}
.bhero-img img{width:100%;height:100%;object-fit:cover;display:block}

/* --------------------------- REJILLA --------------------------- */
.bsec{padding:50px 0}
.bsec-alt{background:#eef5f7}
.bsec-head{margin-bottom:20px}
.bsec-head h2{font-family:Montserrat,sans-serif;font-size:clamp(1.22rem,2vw,1.55rem);color:#161d1f;
  margin:0 0 6px;font-weight:800;letter-spacing:-.01em}
.bsec-head p{color:#5d3f3c;margin:0;font-size:.96rem}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* TARJETA COMPLETAMENTE CLICABLE: el <a> envuelve toda la tarjeta */
a.bcard{display:flex;flex-direction:column;background:#fff;border:1px solid #e7bdb8;
  border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
a.bcard:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(22,29,31,.16);border-color:#ba0013}
a.bcard:focus-visible{outline:3px solid #ba0013;outline-offset:3px}
.bcard-img{aspect-ratio:16/10;overflow:hidden;background:#e8eff1}
.bcard-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
a.bcard:hover .bcard-img img{transform:scale(1.04)}
.bcard-b{padding:15px 17px 17px;display:flex;flex-direction:column;gap:8px;flex:1}
.bcard-cat{font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ba0013;
  font-family:Montserrat,sans-serif}
.bcard-t{margin:0;font-family:Montserrat,sans-serif;font-size:.99rem;line-height:1.38;
  font-weight:700;color:#161d1f}
a.bcard:hover .bcard-t{color:#ba0013}
.bcard-date{margin-top:auto;font-size:.79rem;color:#5d3f3c;display:inline-flex;align-items:center;gap:6px}
.bcard-date .material-symbols-outlined{font-size:.95rem}

/* -------------------------- ARTICULO -------------------------- */
.bpost{padding:42px 0 6px}
.bpost-body{max-width:none}
.bpost-body p,.bpost-body li{font-size:1.03rem;line-height:1.75;color:#2c3538;margin:0 0 1rem}
.bpost-body h2{font-family:Montserrat,sans-serif;font-size:1.3rem;line-height:1.3;color:#161d1f;
  font-weight:800;margin:2rem 0 .7rem;letter-spacing:-.01em;padding-left:14px;position:relative}
.bpost-body h2::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:4px;border-radius:4px;
  background:#ba0013;background:linear-gradient(180deg,#ba0013,#e31e24)}
.bpost-body h3{font-family:Montserrat,sans-serif;font-size:1.07rem;line-height:1.35;color:#161d1f;
  font-weight:700;margin:1.45rem 0 .45rem}
.bpost-body ul,.bpost-body ol{padding-left:1.15rem;margin:0 0 1.05rem}
.bpost-body ul li{list-style:disc;margin:.3rem 0}
.bpost-body ol li{list-style:decimal;margin:.3rem 0}
.bpost-body a{color:#ba0013;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.bpost-body a:hover{color:#e31e24}
.bpost-body strong{color:#161d1f;font-weight:700}
.bpost-body table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.95rem;
  display:block;overflow-x:auto;white-space:nowrap}
.bpost-body th,.bpost-body td{border:1px solid #e7bdb8;padding:9px 11px;text-align:left}
.bpost-body th{background:#eef5f7;color:#161d1f;font-weight:700}
.bzonas{border-top:1px solid #e7bdb8;margin-top:1.9rem;padding-top:1.1rem}
.bzonas h2{margin-top:0}
.bzonas ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;padding:0;margin:0}
.bzonas ul li{list-style:none;margin:0;font-size:.94rem}

/* ----------------------------- FAQ ----------------------------- */
.bfaq{background:#eef5f7;border-top:1px solid #e7bdb8;padding:44px 0}
.bfaq h2{font-family:Montserrat,sans-serif;font-size:clamp(1.2rem,1.9vw,1.5rem);color:#161d1f;
  margin:0 0 17px;font-weight:800}
.bfaq-item{background:#fff;border:1px solid #e7bdb8;border-radius:14px;padding:15px 19px;margin-bottom:11px}
.bfaq-item h3{margin:0 0 6px;font-family:Montserrat,sans-serif;font-size:.99rem;font-weight:700;
  color:#161d1f;line-height:1.35}
.bfaq-item p{margin:0;font-size:.97rem;line-height:1.68;color:#2c3538}

/* ----------------------------- CTA ----------------------------- */
.bcta{background:#ba0013;background:linear-gradient(135deg,#ba0013,#8a000e);color:#fff;padding:44px 0}
.bcta-in{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;gap:26px;align-items:center;
  justify-content:space-between;flex-wrap:wrap}
.bcta h2{color:#fff;font-family:Montserrat,sans-serif;font-size:clamp(1.24rem,2.1vw,1.65rem);
  margin:0 0 6px;font-weight:800;letter-spacing:-.01em}
.bcta p{color:rgba(255,255,255,.86);margin:0;font-size:1rem;max-width:58ch}
.bcta-btns{display:flex;gap:12px;flex-wrap:wrap}
.bbtn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:50px;
  font-family:Montserrat,sans-serif;font-weight:700;text-decoration:none;font-size:.95rem;
  transition:.2s ease;white-space:nowrap}
.bbtn-main{background:#fff;color:#ba0013}
.bbtn-main:hover{background:#f4fafd;color:#8a000e;transform:translateY(-1px)}
.bbtn-ghost{border:2px solid rgba(255,255,255,.5);color:#fff}
.bbtn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}

/* ------------------------- RELACIONADOS ------------------------- */
.brel{padding:46px 0 54px}
.brel h2{font-family:Montserrat,sans-serif;font-size:clamp(1.2rem,1.9vw,1.5rem);color:#161d1f;
  margin:0 0 17px;font-weight:800}
.brel-all{text-align:center;margin-top:24px}
.brel-all .bbtn-main{background:#ba0013;color:#fff}
.brel-all .bbtn-main:hover{background:#8a000e;color:#fff}

/* --------------------------- RESPONSIVE --------------------------- */
.blogpage{overflow-x:hidden}
.bpost-body p,.bpost-body li,.bpost-body h2,.bpost-body h3,.bfaq-item h3,.bfaq-item p,.bcard-t{
  overflow-wrap:break-word;hyphens:auto}
.bpost-body a{overflow-wrap:anywhere}

@media(max-width:1024px){.bgrid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:900px){
  .bhero-in{grid-template-columns:1fr;gap:24px;padding:38px 20px}
  .bhero-img{aspect-ratio:16/9}
}
@media(max-width:768px){
  .blogpage .bwrap{padding:0 18px}
  .bhero-in{padding:32px 18px}
  .bhero h1{font-size:clamp(1.4rem,5.6vw,1.85rem)}
  .bhero .bsub{font-size:.97rem}
  .bhero-meta{gap:12px;font-size:.79rem}
  .bsec{padding:34px 0}
  .bpost{padding:28px 0 4px}
  .bpost-body p,.bpost-body li{font-size:1rem;line-height:1.7}
  .bpost-body h2{font-size:1.16rem;margin:1.65rem 0 .6rem;padding-left:12px}
  .bpost-body h3{font-size:1.02rem}
  .bfaq,.bcta{padding:32px 0}
  .bcta-in{flex-direction:column;align-items:flex-start;padding:0 18px}
  .bcta-btns{width:100%}
  .bbtn{flex:1;justify-content:center}
  .brel{padding:32px 0 40px}
}
@media(max-width:640px){.bgrid{grid-template-columns:1fr;gap:18px}}
@media(max-width:480px){
  .blogpage .bwrap{padding:0 15px}
  .bhero-in{padding:26px 15px}
  .bhero-img{aspect-ratio:3/2;border-radius:14px}
  .bhero h1{font-size:1.38rem}
  .bsec-head h2{font-size:1.18rem}
  .bcard-b{padding:13px 15px 15px}
  .bpost-body h2{font-size:1.1rem}
  .bfaq-item{padding:13px 16px}
  .bcta-in{padding:0 15px}
  .bcta-btns{flex-direction:column;width:100%}
  .bbtn{width:100%}
}
@media(max-width:360px){
  .blogpage .bwrap{padding:0 13px}
  .bhero h1{font-size:1.26rem}
  .bpost-body p,.bpost-body li{font-size:.97rem}
  .bcard-img{aspect-ratio:16/9}
}
@media(prefers-reduced-motion:reduce){
  a.bcard,.bcard-img img,.bbtn{transition:none!important}
  a.bcard:hover{transform:none}
  a.bcard:hover .bcard-img img{transform:none}
}