/* ════════════════════════════════════════════════════════════════════
   Blog AltivusPress — herda as variáveis de lp.css (dark + teal).
   ════════════════════════════════════════════════════════════════════ */

/* ── Cabeçalho do índice ───────────────────────────────────────────── */
.blog-head{ padding:88px clamp(20px,5vw,64px) 24px; }
.blog-head__inner{ max-width:820px; margin:0 auto; text-align:center; }
.blog-head .tag{
    display:inline-block; font-family:var(--font-d); font-size:12px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--teal); border:1px solid var(--line-2);
    border-radius:999px; padding:6px 14px; margin-bottom:18px;
}
.blog-head h1{ font-family:var(--font-d); font-size:clamp(30px,5vw,46px); line-height:1.1; font-weight:700; }
.blog-head h1 span{ color:var(--teal); }
.blog-head p{ color:var(--muted); font-size:18px; margin:18px auto 0; max-width:600px; }

/* ── Grade de cards ────────────────────────────────────────────────── */
.blog-list{ max-width:1180px; margin:0 auto; padding:24px clamp(20px,5vw,64px) 90px; }
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px; }
.blog-empty{ text-align:center; color:var(--muted); padding:40px 0; }
.blog-empty a{ color:var(--teal); }

.post-card{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.post-card:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--shadow); }
.post-card__link{ display:block; height:100%; }
.post-card__media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--panel-2); }
.post-card__media img{ width:100%; height:100%; object-fit:cover; }
.post-card__cat{
    position:absolute; top:12px; left:12px; font-family:var(--font-d); font-size:11px;
    letter-spacing:.08em; text-transform:uppercase; color:#04221c; background:var(--teal);
    border-radius:999px; padding:4px 10px; font-weight:600;
}
.post-card__body{ padding:18px 20px 22px; }
.post-card__body h2, .post-card__body h3{ font-family:var(--font-d); font-size:19px; line-height:1.25; font-weight:600; }
.post-card__body p{ color:var(--muted); font-size:14.5px; margin:10px 0 14px; }
.post-card__meta{ color:var(--muted); font-size:12.5px; opacity:.8; }

/* ── Artigo ────────────────────────────────────────────────────────── */
.post{ max-width:760px; margin:0 auto; padding:84px clamp(20px,5vw,28px) 40px; }
.post__crumbs{ font-size:13px; color:var(--muted); margin-bottom:22px; }
.post__crumbs a{ color:var(--muted); }
.post__crumbs a:hover{ color:var(--teal); }
.post__cat{
    display:inline-block; font-family:var(--font-d); font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--teal); border:1px solid var(--line-2);
    border-radius:999px; padding:4px 12px; margin-bottom:16px;
}
.post__head h1{ font-family:var(--font-d); font-size:clamp(28px,4.4vw,40px); line-height:1.12; font-weight:700; }
.post__meta{ color:var(--muted); font-size:14px; margin-top:14px; }

/* Tipografia do corpo */
.post__body{ margin-top:36px; font-size:17px; line-height:1.75; }
.post__body > *{ margin-bottom:20px; }
.post__body h2{ font-family:var(--font-d); font-size:26px; font-weight:700; margin:40px 0 4px; }
.post__body h3{ font-family:var(--font-d); font-size:20px; font-weight:600; margin:28px 0 2px; color:var(--text); }
.post__body p{ color:#d4dce8; }
.post__body strong{ color:var(--text); }
.post__body a{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
.post__body ul, .post__body ol{ padding-left:22px; color:#d4dce8; }
.post__body li{ margin-bottom:8px; }
.post__body img{ max-width:100%; height:auto; border-radius:14px; border:1px solid var(--line); }
.post__body blockquote{
    border-left:3px solid var(--teal); background:rgba(63,224,197,.05);
    padding:14px 18px; border-radius:0 12px 12px 0; color:var(--text); font-style:italic;
}
.post__body code{ background:var(--panel-2); padding:2px 7px; border-radius:6px; font-size:.9em; }
.post__body table{ width:100%; border-collapse:collapse; font-size:15px; }
.post__body th, .post__body td{ border:1px solid var(--line); padding:10px 12px; text-align:left; }
.post__body thead th{ background:var(--panel-2); color:var(--text); font-family:var(--font-d); }
.post__body tbody tr:nth-child(even){ background:rgba(255,255,255,.02); }

/* Caixa de destaque (ex.: calculadora) */
.post__box{
    background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius);
    padding:22px; box-shadow:var(--shadow);
}
.post__box h3{ margin-top:0; }
.post__box .calc-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:14px 0; }
.post__box label{ display:flex; flex-direction:column; font-size:13px; color:var(--muted); gap:6px; }
.post__box input, .post__box select{
    background:var(--panel-2); border:1px solid var(--line); color:var(--text);
    border-radius:10px; padding:10px 12px; font-size:15px; min-width:120px;
}
.post__box .calc-out{
    margin-top:8px; font-family:var(--font-d); font-size:18px; color:var(--teal);
    background:rgba(63,224,197,.06); border:1px dashed var(--line-2); border-radius:12px; padding:14px 16px;
}

/* FAQ / CTA / relacionados */
.post__faq{ max-width:760px; margin:56px auto 0; }
.post__faq .sec-title{ text-align:left; }
.post__faq .faq__list{ margin-top:22px; }
.post__cta{
    max-width:760px; margin:56px auto 0; text-align:center;
    background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius);
    padding:40px 24px; box-shadow:var(--shadow);
}
.post__cta h2{ font-family:var(--font-d); font-size:26px; font-weight:700; }
.post__cta p{ color:var(--muted); margin:12px 0 22px; }
.post__rel{ max-width:1180px; margin:64px auto 0; padding:0 clamp(0px,4vw,20px); }
.post__rel .sec-title{ text-align:left; margin-bottom:24px; }

/* 404 */
.blog-404{ max-width:520px; margin:0 auto; padding:140px 24px; text-align:center; }
.blog-404 h1{ font-family:var(--font-d); font-size:32px; }
.blog-404 p{ color:var(--muted); margin:14px 0 26px; }

@media (max-width:600px){
    .post{ padding-top:72px; }
    .post__body{ font-size:16px; }
}