/* =========================================================
   Artigos: lista e página de leitura
   Carregado depois de paginas.css.
   ========================================================= */
.page-hero-short { padding-bottom: clamp(36px, 4vw, 56px); }
.page-hero-short h1 { max-width: 16em; }

/* ---------- Lista ---------- */
.posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.posts-1 { grid-template-columns: minmax(0, 560px); }
.post-card a {
  display: flex; flex-direction: column; height: 100%; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--line);
  color: var(--text); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s;
}
.post-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; flex: 1; }
.post-card h3 { font-size: 20px; line-height: 1.3; flex: 1; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; font-size: 14px; color: var(--muted); }
@media (hover: hover) {
  .post-card a:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 8, 102, .12); border-color: rgba(1, 48, 200, .3); }
  .post-card a:hover .door-link span { transform: translateX(5px); }
}

/* ---------- Leitura ---------- */
.article-wrap { max-width: calc(780px + var(--gutter) * 2); }
.article-head { background: linear-gradient(180deg, #fff 0%, var(--sky) 100%); padding: clamp(24px, 3vw, 40px) 0 clamp(80px, 9vw, 130px); }
.back-link { margin: 0 0 14px; }
.back-link:hover .arrow { transform: translateX(-3px) !important; }
.article-head h1 { margin-top: 14px; font-size: clamp(28px, 1.8vw + 18px, 44px); line-height: 1.15; letter-spacing: -.02em; }
.article-cover { width: 100%; height: auto; margin-top: clamp(-110px, -8vw, -60px); border-radius: 20px; box-shadow: 0 24px 50px rgba(0, 8, 102, .16); background: var(--sky); }
.article-body { padding: clamp(28px, 4vw, 44px) 0 8px; font-size: 18px; line-height: 1.75; color: var(--text); }
.article-body p { margin-bottom: 1.2em; }
.article-body h2 { font-size: clamp(22px, .8vw + 17px, 28px); margin: 1.6em 0 .7em; }
.article-body ol { list-style: none; counter-reset: art; display: grid; gap: 14px; margin: 0 0 1.4em; }
.article-body ol li { counter-increment: art; position: relative; padding-left: 46px; }
.article-body ol li::before {
  content: counter(art); position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--sky); color: var(--blue); font-family: var(--font-head); font-weight: 700; font-size: 15px;
}
.article-body strong { color: var(--ink); }
.article-fig { margin: 8px 0 1.4em; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.article-fig img { width: 100%; height: auto; border-radius: 8px; }
/* Gráfico da margem de contribuição (mesmas cores e proporções do gráfico original) */
.mc-grid {
  display: grid; grid-template-columns: 36.7fr 24.8fr 25.1fr 13.4fr; grid-template-rows: repeat(3, minmax(52px, auto)); gap: 3px;
  font-family: var(--font-head); font-weight: 700; font-size: 15px; text-align: center;
}
.mc-grid span { display: grid; place-items: center; padding: 6px; border-radius: 4px; line-height: 1.2; }
.mc-fat { grid-column: 1 / -1; background: linear-gradient(#25b425, #038003); color: #fff; }
.mc-cmv { background: linear-gradient(#fcfc0c, #e6e600); color: #3a3a00; }
.mc-gv { background: linear-gradient(#efefef, #dcdcdc); color: #333; }
.mc-mc { grid-column: 3 / -1; background: linear-gradient(#4a4ad8, #0b0b9a); color: #fff; }
.mc-gf { grid-column: 3; background: linear-gradient(#bd22bd, #8a088a); color: #fff; }
.mc-l { grid-column: 4; background: linear-gradient(#73c4c4, #4fa8a8); color: #073b3b; }
.mc-chart figcaption { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.mc-chart figcaption b { color: var(--ink); }
@media (max-width: 520px) { .mc-grid { font-size: 12.5px; grid-template-rows: repeat(3, minmax(44px, auto)); } }

.article-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 20px 0 clamp(48px, 6vw, 80px);
  padding: 22px 26px; border-radius: 18px; background: var(--sky); border: 1px solid var(--sky-2);
}
.article-cta p { margin: 0; color: var(--ink); max-width: 30em; }
.article-cta strong { color: var(--blue); }

@media (max-width: 760px) {
  .posts { grid-template-columns: 1fr; }
  .article-body { font-size: 17px; }
  .article-cta .btn { width: 100%; }
}