/* =========================================================
   ODENZE · Blog
   ========================================================= */
.bl-hero{padding-bottom:clamp(30px,4vw,48px);}

/* ---------- filtros ---------- */
.bl-filters{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 clamp(26px,3vw,40px);}
.bl-filters button{
  padding:9px 16px; border-radius:99px; border:1px solid var(--line-soft); background:transparent;
  color:var(--ink-soft); font:500 .86rem var(--body); cursor:pointer; transition:background .3s, color .3s, border-color .3s;
}
.bl-filters button:hover{color:var(--ink); border-color:var(--line);}
.bl-filters button.on{background:var(--emerald); color:#03120C; border-color:transparent; font-weight:600;}

/* ---------- tarjetas ---------- */
.bl-wrap{padding-bottom:clamp(60px,7vw,100px);}
.bl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px);}
.bl-card{
  position:relative; display:flex; flex-direction:column; border-radius:22px; overflow:hidden;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.02); color:inherit;
  transition:transform .6s cubic-bezier(.2,.8,.3,1), border-color .5s, box-shadow .6s;
}
.bl-card:hover{transform:translateY(-8px); border-color:rgba(27,211,161,.38); box-shadow:0 30px 60px -32px rgba(0,0,0,.9), 0 0 44px -22px rgba(27,211,161,.5);}
.bl-img{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-2);}
.bl-img img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.8,.3,1), filter .6s;}
.bl-card:hover .bl-img img{transform:scale(1.06);}
.bl-img::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(6,42,30,.55),transparent 55%);}
.bl-chip{
  position:absolute; left:14px; top:14px; z-index:2; padding:6px 12px; border-radius:99px;
  background:rgba(6,42,30,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(27,211,161,.3); color:var(--emerald-2); font-size:.74rem; font-weight:600; letter-spacing:.03em;
}
.bl-txt{display:flex; flex-direction:column; gap:10px; padding:20px 22px 22px; flex:1;}
.bl-meta{font-size:.78rem; color:var(--ink-dim); letter-spacing:.02em;}
.bl-txt h2, .bl-txt h3{font-family:var(--disp); font-size:1.18rem; line-height:1.25; margin:0; color:var(--ink);}
.bl-txt p{margin:0; font-size:.92rem; color:var(--ink-soft);}
.bl-more{margin-top:auto; padding-top:8px; font-weight:600; font-size:.88rem; color:var(--emerald); display:inline-flex; gap:8px; transition:gap .3s;}
.bl-card:hover .bl-more{gap:13px;}

/* destacado */
.bl-feat{grid-column:1 / -1; flex-direction:row;}
.bl-feat .bl-img{flex:1.25; aspect-ratio:auto; min-height:340px;}
.bl-feat .bl-txt{flex:1; padding:clamp(24px,3vw,44px); justify-content:center;}
.bl-feat .bl-txt h2{font-size:clamp(1.5rem,2.6vw,2.2rem);}
.bl-feat .bl-txt p{font-size:1rem;}
.bl-card.hide{display:none;}

/* ---------- artículo ---------- */
.ar-hero{padding-bottom:clamp(20px,3vw,34px);}
.ar-hero h1{max-width:22ch;}
.ar-meta{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin-top:18px; font-size:.86rem; color:var(--ink-dim);}
.ar-meta .bl-chip{position:static;}
.ar-cover{margin:0 auto clamp(30px,4vw,54px); border-radius:28px; overflow:hidden; border:1px solid var(--line-soft); aspect-ratio:21/9; position:relative;}
.ar-cover img{width:100%; height:118%; object-fit:cover; display:block; margin-top:-9%;}
.ar-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(30px,5vw,70px); align-items:start; padding-bottom:clamp(50px,6vw,90px);}

.post{max-width:70ch; font-size:1.06rem; line-height:1.75; color:var(--ink-soft);}
.post > p:first-child{font-size:1.18rem; color:var(--ink);}
.post p{margin:0 0 1.15em;}
.post h2{font-family:var(--disp); color:var(--ink); font-size:clamp(1.45rem,2.4vw,1.85rem); line-height:1.2; margin:2em 0 .7em; scroll-margin-top:110px;}
.post h2::before{content:""; display:block; width:34px; height:3px; border-radius:3px; margin-bottom:14px; background:linear-gradient(90deg,#5CF6CC,#19E0A6);}
.post h3{font-family:var(--disp); color:var(--ink); font-size:1.18rem; margin:1.5em 0 .5em;}
.post ul, .post ol{margin:0 0 1.3em; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px;}
.post ul li, .post ol li{position:relative; padding-left:28px;}
.post ul li::before{content:""; position:absolute; left:4px; top:.72em; width:8px; height:8px; border-radius:50%; background:var(--emerald); box-shadow:0 0 0 4px rgba(27,211,161,.14);}
.post ol{counter-reset:n;}
.post ol li{counter-increment:n;}
.post ol li::before{content:counter(n); position:absolute; left:0; top:.15em; width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font:700 .72rem var(--disp); color:#03120C; background:var(--emerald);}
.post strong{color:var(--ink); font-weight:600;}
.post a{color:var(--emerald-2); border-bottom:1px solid rgba(63,230,188,.35); transition:border-color .3s;}
.post a:hover{border-color:var(--emerald-2);}

.ar-cta{
  margin:2.4em 0 0; padding:clamp(22px,3vw,32px); border-radius:22px;
  background:linear-gradient(120deg,rgba(27,211,161,.16),rgba(27,211,161,.03) 70%); border:1px solid rgba(27,211,161,.28);
}
.ar-cta h2{margin:0 0 8px!important; font-size:1.4rem!important;}
.ar-cta h2::before{display:none!important;}
.ar-cta p{margin:0 0 18px!important;}

/* lateral */
.ar-side{position:sticky; top:100px; display:flex; flex-direction:column; gap:16px;}
.ar-box{border-radius:20px; border:1px solid var(--line-soft); padding:20px; background:rgba(255,255,255,.02);}
.ar-box h4{margin:0 0 12px; font:600 .78rem var(--disp); letter-spacing:.08em; text-transform:uppercase; color:var(--emerald);}
.ar-toc{display:flex; flex-direction:column; gap:2px;}
.ar-toc a{padding:7px 10px; border-radius:10px; font-size:.88rem; color:var(--ink-dim); border-left:2px solid transparent; transition:color .3s, background .3s, border-color .3s;}
.ar-toc a:hover{color:var(--ink);}
.ar-toc a.on{color:var(--ink); background:rgba(27,211,161,.08); border-color:var(--emerald);}
.ar-box.sell{background:linear-gradient(160deg,rgba(27,211,161,.18),rgba(27,211,161,.03)); border-color:rgba(27,211,161,.3);}
.ar-box.sell b{display:block; font-family:var(--disp); font-size:1.12rem; color:var(--ink); margin-bottom:6px;}
.ar-box.sell p{font-size:.88rem; margin:0 0 14px; color:var(--ink-soft);}
.ar-box.sell .btn{width:100%; justify-content:center;}
.ar-box.sell .pz-alt{margin-top:12px;}

.ar-rel{padding:clamp(40px,5vw,70px) 0; border-top:1px solid var(--line-soft);}
.ar-rel h2{margin:0 0 26px;}

@media(max-width:980px){
  .bl-grid{grid-template-columns:repeat(2,1fr);}
  .ar-grid{grid-template-columns:1fr;}
  .ar-side{position:static;}
}
@media(max-width:700px){
  .bl-grid{grid-template-columns:1fr;}
  .bl-feat{flex-direction:column;}
  .bl-feat .bl-img{min-height:0; aspect-ratio:16/10;}
  .ar-cover{aspect-ratio:16/10; border-radius:20px;}
}
.bl-hero > .glow, .ar-hero > .glow{position:absolute!important; top:-30%; right:-10%; pointer-events:none;}
