/* ============================================================
   blog.css — rescaterapido.com
   Hoja SEPARADA. No toca ningun estilo del resto del sitio.
   Todos los colores son literales: nada depende de una variable.
   ============================================================ */

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

/* ---------------------------- HERO ---------------------------- */
.bhero{background:#3a0006;background:linear-gradient(135deg,#1a1c1c 0%,#3a0006 50%,#690008 100%);
  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:#8b1a1a;background:linear-gradient(135deg,#8b1a1a,#ba1a1a);
  color:#fff;font-family:'Space Grotesk',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:'Space Grotesk',sans-serif;font-size:clamp(1.6rem,2.9vw,2.3rem);
  line-height:1.2;margin:0;font-weight:700;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,.42);aspect-ratio:16/11}
.bhero-img img{width:100%;height:100%;object-fit:cover;display:block}

/* --------------------------- REJILLA --------------------------- */
.bsec{padding:50px 0}
.bsec-alt{background:#f3f3f3}
.bsec-head{margin-bottom:20px}
.bsec-head h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.22rem,2vw,1.55rem);
  color:#1a1c1c;margin:0 0 6px;font-weight:700;letter-spacing:-.01em}
.bsec-head p{color:#58413f;margin:0;font-size:.96rem}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* TARJETA COMPLETAMENTE CLICABLE */
a.bcard{display:flex;flex-direction:column;background:#fff;border:1px solid #e0bfbc;
  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(26,28,28,.16);border-color:#690008}
a.bcard:focus-visible{outline:3px solid #690008;outline-offset:3px}
.bcard-img{aspect-ratio:16/10;overflow:hidden;background:#eee}
.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:#690008;font-family:'Space Grotesk',sans-serif}
.bcard-t{margin:0;font-family:'Space Grotesk',sans-serif;font-size:.99rem;line-height:1.38;
  font-weight:700;color:#1a1c1c}
a.bcard:hover .bcard-t{color:#690008}
.bcard-date{margin-top:auto;font-size:.79rem;color:#58413f;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:#33393a;margin:0 0 1rem}
.bpost-body h2{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;line-height:1.3;color:#1a1c1c;
  font-weight:700;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:#690008;background:linear-gradient(180deg,#690008,#ba1a1a)}
.bpost-body h3{font-family:'Space Grotesk',sans-serif;font-size:1.07rem;line-height:1.35;color:#1a1c1c;
  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:#690008;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.bpost-body a:hover{color:#ba1a1a}
.bpost-body strong{color:#1a1c1c;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 #e0bfbc;padding:9px 11px;text-align:left}
.bpost-body th{background:#f3f3f3;color:#1a1c1c;font-weight:700}
.bzonas{border-top:1px solid #e0bfbc;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:#f3f3f3;border-top:1px solid #e0bfbc;padding:44px 0}
.bfaq h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.2rem,1.9vw,1.5rem);color:#1a1c1c;
  margin:0 0 17px;font-weight:700}
.bfaq-item{background:#fff;border:1px solid #e0bfbc;border-radius:14px;padding:15px 19px;margin-bottom:11px}
.bfaq-item h3{margin:0 0 6px;font-family:'Space Grotesk',sans-serif;font-size:.99rem;font-weight:700;
  color:#1a1c1c;line-height:1.35}
.bfaq-item p{margin:0;font-size:.97rem;line-height:1.68;color:#33393a}

/* ----------------------------- CTA ----------------------------- */
.bcta{background:#690008;background:linear-gradient(135deg,#690008,#8b1a1a);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:'Space Grotesk',sans-serif;font-size:clamp(1.24rem,2.1vw,1.65rem);
  margin:0 0 6px;font-weight:700;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:6px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;text-decoration:none;font-size:.95rem;
  transition:.2s ease;white-space:nowrap}
.bbtn-main{background:#fff;color:#690008}
.bbtn-main:hover{background:#ffdad6;color:#690008;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:'Space Grotesk',sans-serif;font-size:clamp(1.2rem,1.9vw,1.5rem);color:#1a1c1c;
  margin:0 0 17px;font-weight:700}
.brel-all{text-align:center;margin-top:24px}
.brel-all .bbtn-main{background:#690008;color:#fff}
.brel-all .bbtn-main:hover{background:#8b1a1a;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}
}