/* MAVT — blog. Complementa style.css reaproveitando os mesmos tokens. */

.section__title {
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 24px;
}

/* --- migalhas --- */
.crumbs {
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 300;
}
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--brand-ink); }
.crumbs__sep { margin: 0 8px; opacity: .5; }

/* --- hero --- */
.blog-hero {
  padding: 76px 0 56px;
  background: var(--hero-tint);
  border-bottom: 1px solid var(--border);
}
.blog-hero--sm { padding: 52px 0 40px; }
.blog-hero h1 {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 14px 0 0;
}
/* .lead do style.css usa "margin: 0 auto", que centraliza — aqui o hero é alinhado à esquerda */
.blog-hero .lead { margin: 16px 0 0; max-width: 640px; }

/* --- grade de clusters --- */
.cluster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.cluster-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  text-decoration: none;
  transition: border-color .2s, transform .2s;
}
.cluster-card:hover { border-color: var(--card-hover); transform: translateY(-3px); }
.cluster-card h2 { font-size: 20px; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.cluster-card p { font-size: 14.5px; color: var(--ink-2); font-weight: 300; margin: 0 0 16px; }
.cluster-card__count { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* --- cartoes de post --- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .2s, transform .2s;
}
.post-card:hover { border-color: var(--card-hover); transform: translateY(-3px); }
.post-card__link { display: block; padding: 24px; text-decoration: none; height: 100%; }
.post-card__tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-ink);
  background: var(--icon-bg);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.post-card h3 { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 10px; line-height: 1.35; }
.post-card p { font-size: 14.5px; color: var(--ink-2); font-weight: 300; margin: 0 0 16px; }
.post-card__meta { font-size: 12.5px; color: var(--muted); }

/* --- artigo --- */
.post__head {
  padding-top: 52px;
  padding-bottom: 8px;
  max-width: 760px;
}
.post__tag {
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin: 0 0 14px;
}
.post__head h1 {
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 18px;
}
.post__head .lead { margin: 0; max-width: none; }
.post__meta { font-size: 13px; color: var(--muted); margin-top: 18px; }

.post__body {
  max-width: 760px;
  padding-top: 34px;
  padding-bottom: 20px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-2);
  font-weight: 300;
}
.post__body h2 {
  font-size: clamp(23px, 3vw, 29px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 48px 0 16px;
  scroll-margin-top: 90px;
}
.post__body h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 34px 0 12px;
  scroll-margin-top: 90px;
}
.post__body p { margin: 0 0 20px; }
.post__body strong { color: var(--ink); font-weight: 600; }
.post__body a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.post__body a:hover { text-decoration-thickness: 2px; }
.post__body ul,
.post__body ol { margin: 0 0 22px; padding-left: 22px; }
.post__body li { margin-bottom: 10px; }
.post__body li::marker { color: var(--brand); }
.post__body blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--brand);
  color: var(--ink);
  font-style: normal;
}
.post__body code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: .9em;
}
.post__body pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  overflow-x: auto;
  margin: 0 0 22px;
}
.post__body pre code { background: none; border: 0; padding: 0; }
.post__body img { border-radius: 12px; border: 1px solid var(--border); }
.post__body hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }

/* tabela rola dentro da propria caixa; a pagina nunca rola na horizontal */
.tabela-scroll { overflow-x: auto; margin: 0 0 24px; }
.tabela-scroll table { margin-bottom: 0; }

.post__body table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 15px;
}
.post__body th,
.post__body td {
  border: 1px solid var(--border);
  padding: 11px 14px;
  text-align: left;
}
.post__body th { background: var(--surface-2); color: var(--ink); font-weight: 600; }

.post__pilar {
  background: var(--chip-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 15px;
  margin-top: 34px;
}

/* --- caixa de conversao pra LP --- */
.lp-box {
  max-width: 760px;
  margin: 44px auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: 0 0 40px var(--spot-glow);
}
/* precisa de ".lp-box p" para vencer a regra de paragrafo logo abaixo */
.lp-box p.lp-box__eyebrow {
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin: 0 0 12px;
}
.lp-box h2 {
  font-size: clamp(21px, 2.8vw, 27px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 0 0 12px;
}
.lp-box p {
  font-size: 15.5px;
  color: var(--ink-2);
  font-weight: 300;
  line-height: 1.65;
  margin: 0 0 22px;
}

.post .section__title { max-width: 760px; margin: 56px auto 22px; }
.post .post-grid { max-width: 760px; margin: 0 auto; padding-bottom: 80px; }

@media (max-width: 640px) {
  .blog-hero { padding: 56px 0 40px; }
  .post__body { font-size: 16.5px; }
  .lp-box { padding: 26px 22px; }
}

/* Reading and keyboard navigation */
.skip-link{position:fixed;top:-100px;left:16px;z-index:1000;background:#fff;color:#111;padding:12px 20px;border:2px solid #111}.skip-link:focus{top:12px}.blog-page a:focus-visible,.blog-page button:focus-visible{outline:3px solid var(--brand-ink);outline-offset:4px}.post-toc{background:var(--surface-2);border:1px solid var(--border);padding:22px;border-radius:14px;margin-bottom:32px}.post-toc ul{margin:12px 0 0}.post{padding-bottom:64px}.post__body{overflow-wrap:anywhere}.post__body img{max-width:100%;height:auto}.cluster-grid{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}.post-grid{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}.crumbs .container{overflow-wrap:anywhere}.blog-page .lp-box .btn{white-space:normal;text-align:center}@media(prefers-reduced-motion:reduce){.cluster-card,.post-card{transition:none}}

.post-cover{max-width:760px;margin:24px auto 0}.post-cover img{display:block;width:100%;height:auto;border-radius:16px}.post-cover figcaption{font-size:12px;color:var(--muted);margin-top:8px}.post-card__image{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px;margin-bottom:18px}.post-summary{border-left:3px solid var(--brand);padding:20px 24px;background:var(--surface-2);margin-bottom:28px}.post-summary h2{margin:0 0 12px;font-size:21px}.post-summary p{margin:0}.post__author{font-size:14px;margin:20px 0 0}.post__author a{color:var(--brand-ink)}