/* Seção geral */
.section-benefits {
  background-color: var(--color-benefit-driven-bg);
  padding: var(--section-padding);
  display: flex;
  justify-content: center;
}

.benefits-container {
  max-width: var(--max-content-width);
  width: 100%;
  text-align: center;
}

/* Centraliza o botão CTA horizontalmente */
.benefits-container .btn {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

/* Título principal */
.benefits-heading {
  font-size: var(--font-size-h1);
  font-weight: 700;
  color: var(--color-benefit-driven-header);
  margin-bottom: var(--space-xl);
  line-height: 1.4;
}

/* Grade de cards */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cards per row on desktop */
  gap: var(--card-gap);
  margin-bottom: var(--space-xl);
}

@media (max-width: 1024px) {
  .benefit-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 cards per row on tablets */
  }
}

@media (max-width: 600px) {
  .benefit-grid {
    grid-template-columns: 1fr; /* 1 card per row on mobile */
  }
}

/* Card individual */
.benefit-card {
  background-color: transparent;
  border: 1px solid var(--card-benefit-border-color);
  border-radius: var(--card-benefit-radius);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--element-gap);
}

/* Ícones FontAwesome */
.benefit-card i {
  font-size: 5rem;
  color: var(--color-benefit-driven-header);
  margin-bottom: var(--space-xs);
  font-weight: 100; /* Reforça a leveza */
  opacity: 0.9;
}

/* Título do card */
.benefit-title {
  font-size: var(--font-size-h2);
  font-weight: 700;
  color: var(--color-benefit-driven-header);
  line-height: 1.4;
}

/* Texto do card */
.benefit-text {
  font-size: 1rem;
  color: var(--color-benefit-driven-text);
  line-height: 1.6;
}

/* Responsividade para dispositivos menores */
@media (max-width: 480px) {
  /* .benefits-heading {
    font-size: 1.4rem;
  } */

  .benefit-card {
    padding: var(--space-md) var(--space-sm);
  }

  /* .benefit-card i {
    font-size: 4rem;
  } */
}