/* =========================
   CTA — Mobile First
========================= */

.cta {
  padding: var(--space-16) 0;
  background-color: var(--color-white);
  text-align: center;
}

/* --- Título --- */
.cta__title {
  font-family: var(--font-main);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--primary-dark);
  line-height: 1.3;
  margin-bottom: var(--space-8);
}

/* --- Parágrafo --- */
.cta__text {
  font-size: var(--fs-md);
  color: var(--text-light);
  line-height: 1.75;
  max-width: 640px;
  margin: 0 auto var(--space-10);
}

/* Mês em destaque dentro do parágrafo */
.cta__month {
  font-weight: 700;
  color: var(--primary-dark);
}

/* --- Botão outline --- */
.cta__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-11);
  border-radius: var(--radius-xl);
  border: 2px solid var(--primary-dark);
  background-color: var(--color-white);
  color: var(--primary-dark);
  font-family: var(--font-main);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 12px var(--shadow-dark-sm);
  transition:
    background-color var(--transition-fast) ease,
    color var(--transition-fast) ease,
    box-shadow var(--transition-fast) ease,
    transform var(--transition-fast) ease;
}

.cta__btn:hover,
.cta__btn:focus-visible {
  background-color: var(--primary-dark);
  color: var(--color-white);
  box-shadow: 0 4px 16px var(--shadow-primary-md);
  transform: translateY(-2px);
  outline: none;
}

.cta__btn:active {
  transform: translateY(0);
}

/* Ícone WhatsApp — herda a cor do texto via filter */
.cta__btn-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  /* Rosa escuro (estado padrão) */
  filter: invert(15%) sepia(90%) saturate(2500%) hue-rotate(315deg)
    brightness(80%) contrast(95%);
  transition: filter var(--transition-fast) ease;
}

/* Ícone branco no hover */
.cta__btn:hover .cta__btn-icon,
.cta__btn:focus-visible .cta__btn-icon {
  filter: brightness(0) invert(1);
}

/* =========================
   DESKTOP (≥ 768px)
========================= */
@media (min-width: 768px) {
  .cta__title {
    font-size: var(--fs-3xl);
  }
}