/* HOPE ENGTECH | blog (usa os tokens de styles.css) */
body.blog{background:var(--white)}
.bh{position:sticky;top:0;z-index:100;background:rgba(6,19,38,.96);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.bh-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--header-h)}
.bh .brand img{height:42px;width:auto}
.bh-nav{display:flex;align-items:center;gap:26px}
.bh-nav a:not(.btn){color:#dbe4f0;text-decoration:none;font-size:.92rem;font-weight:500;transition:color .2s}
.bh-nav a:not(.btn):hover,.bh-nav a[aria-current]{color:#fff}
.bh-nav a[aria-current]{box-shadow:0 2px 0 var(--orange);padding-bottom:4px}
.bh .btn{min-height:44px;padding:0 22px;font-size:.88rem}
.tag{display:inline-block;font:600 .74rem/1.4 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--orange-ink);margin:0 0 14px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.82rem;color:var(--muted);margin-bottom:26px}
.crumbs a{color:inherit;text-decoration:none}.crumbs a:hover{color:var(--orange-ink)}
.crumbs span[aria-hidden]{opacity:.5}

/* índice */
.blog-hero{background:var(--ink);color:#fff;padding:clamp(56px,8vw,104px) 0 clamp(48px,6vw,80px)}
.blog-hero .crumbs{color:#9fb0c7}
.blog-hero .tag{color:var(--orange)}
.blog-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);max-width:16ch;margin-bottom:20px}
.blog-hero .sub{max-width:56ch;color:#c4d0e0;font-size:1.08rem}
.blog-list{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(64px,8vw,112px)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:transform .3s var(--ease),box-shadow .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(12,33,62,.14)}
.card-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--canvas)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card-img img{transform:scale(1.04)}
.card-b{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px;flex:1}
.card-b strong{font:600 1.4rem/1.1 var(--f-head);text-transform:uppercase;color:var(--navy);letter-spacing:.005em}
.card .ex{color:var(--muted);font-size:.92rem;line-height:1.55}
.more{margin-top:auto;padding-top:6px;font-weight:600;font-size:.86rem;color:var(--orange-ink)}
.more::after{content:" →"}

/* artigo */
.post-head{padding-top:clamp(36px,5vw,64px);max-width:calc(900px + 2*var(--gutter))}
.post-head h1{font-size:clamp(2.2rem,5vw,3.6rem);color:var(--navy);line-height:1.04;margin-bottom:18px}
.meta{color:var(--muted);font-size:.88rem}
.post-hero{max-width:calc(900px + 2*var(--gutter));margin-top:28px}
.post-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius)}
.post-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;max-width:calc(1060px + 2*var(--gutter));padding-top:44px;padding-bottom:20px}
.toc{position:sticky;top:calc(var(--header-h) + 20px);align-self:start;font-size:.88rem}
.toc p{font:600 .74rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-bottom:14px}
.toc ol{list-style:none;display:grid;gap:10px;border-left:2px solid var(--line);padding-left:16px}
.toc a{color:var(--muted);text-decoration:none;line-height:1.4;display:block}
.toc a:hover{color:var(--orange-ink)}
.prose{max-width:720px;font-size:1.06rem;line-height:1.8}
.prose>*+*{margin-top:1.15em}
.prose .lead{font-size:1.2rem;line-height:1.7;color:var(--navy);font-weight:500}
.prose h2{font-size:clamp(1.8rem,3.4vw,2.4rem);color:var(--navy);margin:2.1em 0 .2em;max-width:none;scroll-margin-top:calc(var(--header-h) + 16px)}
.prose h3{font-size:1.4rem;color:var(--navy);margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.3em;display:grid;gap:.7em}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li::marker{color:var(--orange-ink)}
.prose a{color:var(--orange-ink);text-underline-offset:3px}
.prose a:hover{color:var(--orange-d)}
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:12px;padding:0 20px;background:#fff}
.faq summary{cursor:pointer;font-weight:600;color:var(--navy);padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange-ink);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:18px;color:var(--text);font-size:1rem;margin:0}
.cta-box{margin-top:2.4em;padding:clamp(24px,4vw,36px);background:var(--navy);color:#fff;border-radius:var(--radius)}
.cta-box h2{color:#fff;margin:0 0 8px;font-size:clamp(1.7rem,3vw,2.2rem)}
.cta-box p{color:#c4d0e0;margin-bottom:18px}
.related{max-width:calc(1060px + 2*var(--gutter));padding-top:56px;padding-bottom:clamp(64px,8vw,104px)}
.related h2{font-size:clamp(1.8rem,3.4vw,2.4rem);color:var(--navy);margin-bottom:22px}
.rel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.rel-card{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;transition:border-color .25s,box-shadow .25s}
.rel-card:hover{border-color:var(--orange-ink);box-shadow:0 10px 28px rgba(12,33,62,.1)}
.rel-card strong{font:600 1.35rem/1.15 var(--f-head);text-transform:uppercase;color:var(--navy)}
.rel-card .tag{margin:0}
.back{margin-top:22px}.back a{color:var(--orange-ink);font-weight:600}

@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}.post-grid{grid-template-columns:1fr;gap:28px}.toc{position:static}}
@media (max-width:640px){
  .cards,.rel-grid{grid-template-columns:1fr}
  .bh-nav a:not(.btn){display:none}
  .bh .btn{padding:0 16px}
  .prose{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){.card,.card-img img{transition:none}.card:hover{transform:none}}