.section-cta-final {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
              url('../assets/img/gif-novo-roxo.gif');
  background-size: cover;
  background-repeat: no-repeat;
  padding: 100px 20px;
}

.cta-box {
  background-color: rgba(0, 0, 0, 0.39);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  border-radius: 24px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}

.section-cta-final h2 {
  font-size: 2.5rem;
}

.section-cta-final .lead {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Botão principal */
.botao-primario {
  background-color: #bf01c9;
  color: white;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* melhor que me-2 às vezes */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.botao-primario:hover {
  background-color: #bf01c9;
  transform: scale(1.05);
}

/* Botão secundário */
.botao-secundario-mesmo {
  background-color: transparent;
  border: 2px solid #bf01c9;
  color: #bf01c9;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 48px; /* altura igual ao botão principal */
  line-height: 1;
}

.botao-secundario-mesmo:hover {
  background-color: rgba(255, 122, 0, 0.1);
  transform: scale(1.05);
}

/* Responsivo */
@media (max-width: 768px) {
  .section-cta-final h2 {
    font-size: 1.8rem;
  }

  .section-cta-final .lead {
    font-size: 1rem;
  }

  .botao-primario,
  .botao-secundario-mesmo {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    width: 100%;
  }
}