/* Bloco de chamada no meio do artigo (cta-meio-artigo)
   Usa as variaveis do style.css do site (--azul-marinho, --azul-royal, --surface etc.)
   e o botao .btn.btn--whatsapp que ja existe. Incluir depois do style.min.css. */
.cta-meio{
  margin:2.4em 0;
  padding:28px 30px;
  background:#fff;
  border:1.5px solid var(--surface-line);
  border-top:4px solid var(--azul-royal);
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
}
.article-body .cta-meio__eyebrow{
  font-family:var(--f-heading);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--azul-royal);
  margin:0 0 8px;
}
.article-body .cta-meio__title{
  font-family:var(--f-heading);
  font-size:1.2rem;
  line-height:1.3;
  color:var(--azul-marinho);
  margin:0 0 10px;
}
.article-body .cta-meio__text{ margin:0 0 16px; font-size:.97rem; }
.article-body .cta-meio__docs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 20px;
  padding:0;
  list-style:none;
}
.article-body .cta-meio__docs li{
  font-family:var(--f-heading);
  font-size:.78rem;
  font-weight:600;
  color:var(--azul-marinho);
  background:var(--surface);
  border:1px solid var(--surface-line);
  border-radius:999px;
  padding:6px 12px;
  margin:0;
  list-style:none;
  line-height:1.4;
}
.article-body .cta-meio__docs li::before{ content:"\2713"; color:var(--azul-royal); margin-right:6px; }
.article-body .cta-meio__note{ margin:12px 0 0; font-size:.82rem; color:var(--ink-soft); }
@media (max-width:600px){
  .cta-meio{ padding:24px 20px; }
  .cta-meio .btn{ width:100%; justify-content:center; white-space:normal; text-align:center; }
}