.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .78rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: .94rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Amarelo é a única cor quente da paleta: fica reservado à ação principal. */
.btn-primary { background: var(--cta-color); color: var(--cta-contrast); box-shadow: var(--shadow-cta); }
.btn-primary:hover { background: var(--cta-hover); color: var(--cta-contrast); }

.btn-accent { background: var(--accent-color); color: var(--on-dark); box-shadow: var(--shadow-accent); }
.btn-accent:hover { background: var(--accent-hover); color: var(--on-dark); }

.btn-outline { border-color: currentColor; color: var(--heading-color); background: transparent; }
.btn-outline:hover { background: var(--heading-color); color: var(--background-color); }

/*
 * Sobre fundo escuro o contorno precisa de cor clara.
 *
 * A lista de seletores era `.dark-background, .hero` — e os DOIS blocos escuros
 * do site ficavam de fora: `.cta` não tem a classe `dark-background`, e o hero
 * usa `.hero-v`. Resultado: o botão herdava `--heading-color` (navy) sobre
 * fundo navy e sumia. Foi assim que "Falar no WhatsApp" e "Conheça as soluções"
 * ficaram invisíveis.
 *
 * Ao incluir um bloco de fundo escuro novo, acrescente-o aqui — ou dê a ele a
 * classe `dark-background`.
 */
.dark-background .btn-outline,
.hero .btn-outline,
.hero-v .btn-outline,
.cta .btn-outline { color: var(--on-dark); border-color: var(--on-dark-line); }
.dark-background .btn-outline:hover,
.hero .btn-outline:hover,
.hero-v .btn-outline:hover,
.cta .btn-outline:hover { background: var(--on-dark); color: var(--brand-navy); }

.btn-lg { padding: .95rem 1.8rem; font-size: 1rem; }

@media (max-width: 575.98px) {
  .btn { width: 100%; }
  .btn-group { display: flex; flex-direction: column; gap: .75rem; }
}
.btn-group { display: flex; flex-wrap: wrap; gap: .85rem; }
.btn-group-centro { justify-content: center; }