/* ============================================================
   Blog do Integrador (provedores) — tipografia de artigo + listagem.
   Usa os tokens de styles.css (tema verde claro/escuro).
   ============================================================ */
.blog-head { background: linear-gradient(135deg, var(--brand-3) 0%, var(--brand) 100%); color: var(--on-brand); position:relative; overflow:hidden; }
.blog-head .container { padding: 60px 20px 52px; text-align:center; max-width: 760px; }
.blog-head h1 { font-family: var(--display); color:#fff; font-size: clamp(30px,4vw,46px); font-weight:800; letter-spacing:-.02em; line-height:1.08; }
.blog-head p { margin-top:14px; color: var(--on-brand-mut); font-size:17px; line-height:1.6; }

.blogmain { padding: 56px 0 72px; }
.crumb { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13px; color:var(--muted); margin-bottom:22px; }
.crumb a { color:var(--accent); font-weight:600; }
.crumb span { opacity:.6; }

.post-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.post-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.post-card__tag { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); margin-bottom:11px; }
.post-card h2 { font-family:var(--display); font-size:19px; font-weight:700; line-height:1.25; color:var(--ink); }
.post-card p { margin-top:10px; font-size:14.5px; color:var(--muted); line-height:1.55; flex:1; }
.post-card__more { margin-top:16px; font-size:14px; font-weight:700; color:var(--accent); }

.article { max-width: 760px; margin: 0 auto; }
.article__kicker { font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.article h1 { font-family:var(--display); font-size: clamp(28px,3.6vw,40px); font-weight:800; line-height:1.12; margin-top:12px; letter-spacing:-.02em; color:var(--ink); }
.article__meta { margin-top:16px; font-size:13.5px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; }
.article__body { font-size:17px; line-height:1.78; color:var(--ink); margin-top:30px; }
.article__body h2 { font-family:var(--display); font-size:clamp(22px,2.6vw,28px); font-weight:700; color:var(--ink); letter-spacing:-.02em; margin:40px 0 14px; }
.article__body p { margin:0 0 18px; color:#33474b; }
.article__body a { color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.article__body ul { margin:0 0 20px; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.article__body ul li { position:relative; padding-left:28px; color:#33474b; }
.article__body ul li::before { content:""; position:absolute; left:2px; top:9px; width:8px; height:8px; border-radius:3px; background:var(--accent); }
.article__body strong { color:var(--ink); }

.article-faq { margin-top:40px; border-top:1px solid var(--line); padding-top:30px; }
.article-faq h2 { font-family:var(--display); font-size:24px; font-weight:700; margin-bottom:16px; color:var(--ink); }
.article-faq details { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:2px 20px; margin-bottom:10px; }
.article-faq summary { list-style:none; cursor:pointer; padding:16px 0; font-weight:600; font-size:16px; color:var(--ink); }
.article-faq summary::-webkit-details-marker { display:none; }
.article-faq p { padding:0 0 18px; color:var(--muted); font-size:15px; line-height:1.65; }

.article-cta { margin-top:44px; background: linear-gradient(135deg, var(--brand-2), var(--brand)); color:#fff; border-radius:var(--radius-lg); padding:40px; }
.article-cta h2 { font-family:var(--display); color:#fff; font-size:clamp(22px,2.8vw,30px); font-weight:700; }
.article-cta p { color:var(--on-brand-mut); margin:12px 0 22px; font-size:16px; max-width:560px; }
.article-cta .actions { display:flex; flex-wrap:wrap; gap:12px; }

.related { margin-top:56px; }
.related h2 { font-family:var(--display); font-size:22px; font-weight:700; margin-bottom:18px; color:var(--ink); }
.related__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.related a { display:block; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px; font-weight:600; font-size:14.5px; color:var(--ink); line-height:1.35; transition:border-color .15s, transform .15s; }
.related a:hover { border-color:var(--accent); transform:translateY(-2px); }

@media (prefers-color-scheme: dark) {
  .article__body p, .article__body ul li { color: var(--muted); }
}
:root[data-theme="dark"] .article__body p, :root[data-theme="dark"] .article__body ul li { color: var(--muted); }

@media (max-width: 900px) {
  .post-grid, .related__grid { grid-template-columns: 1fr; }
  .article-cta { padding: 30px 22px; }
}