/* ==========================================================================
   ARQUIVO: beneficios.css
   OBJETIVO: Estilos da Seção 3 (Vantagens, Benefícios e Banner Intermediário).
   ========================================================================== */

/* Grade dos 4 Principais Benefícios */
.beneficios-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-lg);
  margin-bottom: var(--espaco-3xl);
}

@media (min-width: 640px) {
  .beneficios-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.beneficio-card {
  background-color: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda-media);
  border-radius: var(--raio-grande);
  padding: var(--espaco-xl);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
  transition: border-color var(--transicao-rapida), transform var(--transicao-rapida);
}

.beneficio-card:hover {
  border-color: var(--cor-preto-suave);
  transform: translateY(-2px);
}

.beneficio-icone-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--raio-medio);
  background-color: var(--cor-fundo-destaque);
  border: 1px solid var(--cor-borda-media);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-preto-puro);
  margin-bottom: var(--espaco-xs);
}

.beneficio-icone-wrap .icone-svg {
  width: 24px;
  height: 24px;
}

.beneficio-titulo {
  font-size: var(--tam-fonte-subtitulo);
  font-weight: var(--peso-forte);
  color: var(--cor-texto-principal);
}

.beneficio-descricao {
  font-size: var(--tam-fonte-padrao);
  color: var(--cor-texto-secundario);
  line-height: var(--altura-linha-conforto);
}

/* --------------------------------------------------------------------------
   BANNER INTERMEDIÁRIO (Chamada para Ação)
   -------------------------------------------------------------------------- */
.banner-intermediario {
  background-color: var(--cor-preto-puro);
  color: var(--cor-texto-inverso);
  border-radius: var(--raio-grande);
  padding: var(--espaco-2xl) var(--espaco-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-lg);
  box-shadow: var(--sombra-destaque);
}

.banner-titulo {
  color: var(--cor-texto-inverso);
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: var(--peso-forte);
  max-width: 600px;
}

.banner-btn {
  background-color: var(--cor-texto-inverso);
  color: var(--cor-preto-puro);
  border: 1px solid var(--cor-texto-inverso);
}

.banner-btn:hover {
  background-color: var(--cor-fundo-destaque);
  color: var(--cor-preto-puro);
  border-color: var(--cor-fundo-destaque);
  transform: translateY(-1px);
}