/* ============ BLOG ============ */
  .blog-hero{padding:168px 0 56px; position:relative; overflow:hidden;}
  .blog-hero .container{max-width:820px; text-align:center;}
  .blog-hero h1{font-size:clamp(34px,5vw,52px); margin:18px 0 16px;}
  .blog-hero p{color:var(--text-muted); font-size:17px; max-width:600px; margin:0 auto;}

  /* ============ SECTION BACKGROUND PHOTOS (reutilizável) ============ */
  .section-photo{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
  .section-photo img{width:100%; height:100%; object-fit:cover; opacity:.1; filter:saturate(.65) contrast(1.05);}
  .section-photo::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, var(--bg) 0%, transparent 20%, transparent 80%, var(--bg) 100%);}
  .section-photo.right{mask-image:linear-gradient(90deg, transparent 0%, black 35%); -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 35%);}
  .section-photo.left{mask-image:linear-gradient(270deg, transparent 0%, black 35%); -webkit-mask-image:linear-gradient(270deg, transparent 0%, black 35%);}

  .blog-filters{
    display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
    padding:0 24px 44px; max-width:1180px; margin:0 auto;
  }
  .filter-pill{
    font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--text-muted);
    background:var(--surface); border:1px solid var(--border); padding:9px 18px; border-radius:9999px;
    backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.2), 0 2px 8px -2px rgba(0,0,0,.06);
    cursor:pointer; transition:all .28s cubic-bezier(0.16,1,0.3,1);
  }
  .filter-pill:hover{
    border-color:var(--green-soft); color:var(--text); transform:translateY(-1px);
    box-shadow:inset 0 1px 1.5px rgba(255,255,255,.35), 0 6px 16px -4px rgba(16,185,129,.2);
  }
  .filter-pill.active{
    background:rgba(16,185,129,.14); color:var(--green-soft); border-color:rgba(16,185,129,.5);
    box-shadow:inset 0 1px 1.5px rgba(255,255,255,.4), 0 6px 18px -4px rgba(16,185,129,.35);
  }

  .featured-post{
    display:grid; grid-template-columns:1fr 1.1fr; gap:0; margin-bottom:20px;
    background:var(--surface); border:1px solid var(--border); border-radius:24px; overflow:hidden;
    box-shadow:0 1px 2px rgba(22,33,31,.05);
  }
  .featured-thumb{
    position:relative; min-height:280px; display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(circle at 25% 25%, var(--accent, var(--green)), transparent 55%),
      radial-gradient(circle at 80% 75%, var(--accent-soft, var(--green-soft)), transparent 50%),
      linear-gradient(135deg, var(--surface-2), var(--surface-3));
  }
  .featured-thumb::before{
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(22,33,31,.06) 1px, transparent 1.2px);
    background-size:16px 16px;
  }
  .featured-thumb svg{width:64px;height:64px; color:#fff; position:relative; z-index:1; filter:drop-shadow(0 8px 20px rgba(0,0,0,.2));}
  .featured-thumb.has-photo, .post-thumb.has-photo{background:var(--surface-2);}
  .featured-thumb.has-photo::before, .post-thumb.has-photo::before{display:none;}
  .featured-thumb img, .post-thumb img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  }
  .featured-thumb.has-photo::after, .post-thumb.has-photo::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:5px;
    background:var(--accent, var(--green)); z-index:1;
  }
  .featured-body{padding:44px 46px; display:flex; flex-direction:column; justify-content:center; gap:14px;}
  .post-cat{
    align-self:flex-start; font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.04em;
    text-transform:uppercase; color:var(--accent-soft, var(--green-soft)); background:var(--accent-bg, rgba(63,125,100,.13));
    padding:5px 12px; border-radius:20px;
  }
  .featured-body h2{font-size:clamp(22px,2.6vw,28px);}
  .featured-body p{color:var(--text-muted); font-size:15px; line-height:1.65;}

  .post-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
  .post-card{
    --accent:var(--green); --accent-soft:var(--green-soft); --accent-bg:rgba(63,125,100,.13);
    background:var(--surface); border:1px solid var(--border); border-radius:18px; overflow:hidden;
    display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    box-shadow:0 1px 2px rgba(22,33,31,.05);
  }
  .post-card:nth-of-type(4n+2){--accent:var(--blue); --accent-soft:var(--blue-soft); --accent-bg:rgba(8,145,178,.13);}
  .post-card:nth-of-type(4n+3){--accent:var(--amber); --accent-soft:var(--amber-soft); --accent-bg:rgba(184,130,63,.13);}
  .post-card:nth-of-type(4n){--accent:var(--violet); --accent-soft:var(--violet-soft); --accent-bg:rgba(124,58,237,.13);}
  .post-card:hover{transform:translateY(-6px); box-shadow:0 26px 44px -24px rgba(22,33,31,.3); border-color:var(--accent);}
  .post-thumb{
    height:120px; position:relative; display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(circle at 20% 20%, var(--accent), transparent 60%),
      var(--surface-2);
  }
  .post-thumb::before{
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(22,33,31,.05) 1px, transparent 1.2px);
    background-size:14px 14px; opacity:.7;
  }
  .post-thumb svg{max-width:76px; max-height:76px; width:auto; height:auto; color:#fff; position:relative; z-index:1;}
  .post-body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1;}
  .post-card h3{font-size:16.5px; font-weight:600; line-height:1.35;}
  .post-card p{font-size:13.5px; color:var(--text-muted); line-height:1.6; flex:1;}
  .post-meta{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-faint); margin-top:4px;}
  .post-meta .dot-sep{width:3px;height:3px;border-radius:50%; background:var(--text-faint);}

  .post-card.is-hidden, .featured-post.is-hidden{display:none;}

  .blog-empty{display:none; text-align:center; padding:60px 24px; color:var(--text-muted);}
  .blog-empty.show{display:block;}

  .blog-cta-band{
    margin-top:64px; padding:48px 40px; border-radius:24px; text-align:center;
    background:var(--grad-soft); border:1px solid var(--border);
    position:relative; overflow:hidden;
  }
  .blog-cta-band h2{font-size:clamp(22px,2.8vw,30px); margin-bottom:10px; position:relative;}
  .blog-cta-band p{color:var(--text-muted); font-size:15px; max-width:460px; margin:0 auto 22px; position:relative;}
  .blog-cta-band .btn{position:relative;}

  @media (max-width:900px){
    .featured-post{grid-template-columns:1fr;}
    .featured-thumb{min-height:180px;}
    .featured-body{padding:32px 28px;}
    .post-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:600px){
    .blog-hero{padding:150px 0 40px;}
    .post-grid{grid-template-columns:1fr;}
  }