/* ============================================================
   BLOG — Dr. Luan Alencar (usa as variáveis de luan.css)
   ============================================================ */
body{padding-top:82px}
.menu a.lnk.active{color:var(--green)}
.chip{display:inline-block;background:rgba(30,201,91,.14);color:var(--green);font-size:.72rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px}

/* ---------- Índice ---------- */
.blog-head{background:var(--ink-2);border-bottom:1px solid var(--line);padding:66px 0 54px}
.blog-head h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;margin:14px 0 16px}
.blog-head p{color:var(--muted);max-width:56ch;font-size:1.08rem}
.blog-index{padding-bottom:100px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.pcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.pcard:hover{transform:translateY(-6px);border-color:rgba(30,201,91,.4);box-shadow:0 26px 50px -26px rgba(0,0,0,.8)}
.pcard-img{aspect-ratio:16/10;background-size:cover;background-position:center;filter:grayscale(.15)}
.pcard-body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.pcard-body h2{font-size:1.24rem;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.pcard-body p{color:var(--muted);font-size:.95rem;flex:1}
.pcard-meta,.post-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.84rem;font-weight:600}
.pcard-meta .dot,.post-meta .dot{opacity:.5}

/* ---------- Post ---------- */
.post-hero{position:relative;padding:70px 0 46px;border-bottom:1px solid var(--line);overflow:hidden}
.post-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.22;filter:grayscale(.2)}
.post-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,20,.7),var(--ink))}
.post-hero .wrap{position:relative;z-index:2;max-width:820px}
.post-back{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:600;font-size:.9rem;margin-bottom:22px}
.post-back:hover{color:var(--green)}
.post-back svg{width:18px;height:18px}
.post-hero h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.02;margin:16px 0 18px}
.post-meta{margin-top:4px}

/* ---------- Prose ---------- */
.prose{max-width:760px;padding:52px 24px 20px}
.prose > *{margin:0 auto}
.prose p{color:#c7d0dc;font-size:1.09rem;line-height:1.8;margin:0 0 22px}
.prose h2{font-family:var(--sans);font-weight:800;font-size:1.6rem;color:#fff;margin:44px 0 16px;letter-spacing:-.01em}
.prose h3{font-weight:800;font-size:1.24rem;color:#fff;margin:34px 0 12px}
.prose strong{color:#fff}
.prose a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{color:#c7d0dc;font-size:1.09rem;line-height:1.75;margin:0 0 22px;padding-left:26px}
.prose li{margin-bottom:10px}
.prose li::marker{color:var(--green)}
.prose blockquote{margin:28px 0;padding:18px 24px;background:var(--panel);border-left:4px solid var(--green);
  border-radius:0 10px 10px 0;color:#e6ecf3;font-size:1.12rem;font-weight:600}
.prose blockquote p{margin:0;color:#e6ecf3}
.prose hr{border:none;border-top:1px solid var(--line);margin:38px 0}
.prose em{color:var(--muted)}

/* ---------- CTA final ---------- */
.post-cta{max-width:760px;margin:20px auto 90px;background:linear-gradient(180deg,var(--panel),var(--ink-2));
  border:1px solid var(--line);border-top:3px solid var(--green);border-radius:16px;padding:34px;
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.post-cta h3{font-size:1.4rem;font-weight:800;margin-bottom:6px}
.post-cta p{color:var(--muted);font-size:.98rem;max-width:42ch}

@media (max-width:860px){
  .pgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .pgrid{grid-template-columns:1fr}
  .post-cta{flex-direction:column;align-items:flex-start}
  .post-cta .btn{width:100%}
}