/**
 * Seção "Diferenciais que potencializam sua estratégia" – cards
 * sms(novo)/css/sms-section-diferenciais.css
 */

.sms-features-about {
  padding: 80px 0 100px;
}

.sms-features-about .sms-section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 56px;
}

.sms-features-about .sms-section-title-gradient {
  background: linear-gradient(135deg, #0052d4 0%, #0077ff 35%, #00b3ff 70%, #66e0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sms-features-about .sms-section-subtitle {
  font-size: 18px;
  line-height: 1.7;
  color: #555;
  max-width: 700px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
}

/* Grid de cards */
.sms-info-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.sms-feature-card {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 30px 22px;
  text-align: left;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
  transition: all 0.9s ease;
  height: 100%;
}

.sms-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 82, 212, 0.14);
  border-color: rgba(0, 119, 255, 0.26);
}

/* Efeito dominó */
.sms-features-about .sms-cards-domino .sms-feature-card {
  opacity: 0;
  transform: translateY(28px);
}

.sms-features-about.visible .sms-cards-domino .sms-feature-card {
  animation: sms-card-domino 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.sms-features-about.visible .sms-cards-domino .sms-feature-card:nth-child(1) {
  animation-delay: 0.05s;
}

.sms-features-about.visible .sms-cards-domino .sms-feature-card:nth-child(2) {
  animation-delay: 0.2s;
}

.sms-features-about.visible .sms-cards-domino .sms-feature-card:nth-child(3) {
  animation-delay: 0.35s;
}

.sms-features-about.visible .sms-cards-domino .sms-feature-card:nth-child(4) {
  animation-delay: 0.5s;
}

@keyframes sms-card-domino {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sms-feature-icon {
  display: block;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.sms-feature-card:hover .sms-feature-icon {
  transform: translateY(-4px);
}

.sms-feature-icon svg {
  display: block;
  width: 28px;
  height: 28px;
}

.sms-feature-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rcs-text-primary, #1a1a1a);
  margin-bottom: 8px;
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
}

.sms-feature-card p {
  font-size: 0.95rem;
  color: var(--rcs-text-secondary, #555);
  line-height: 1.6;
  margin: 0;
}

/* Tema escuro */
[data-theme="dark"] .sms-features-about {
  background: var(--rcs-bg-primary, #0f172a);
}

[data-theme="dark"] .sms-features-about .sms-section-title-gradient {
  background: linear-gradient(135deg, #0052d4 0%, #0077ff 35%, #00b3ff 70%, #66e0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-theme="dark"] .sms-features-about .sms-section-subtitle {
  color: #e1e1e1;
}

[data-theme="dark"] .sms-feature-card {
  background: rgba(255, 255, 255, 0.033);
  border-color: rgba(0, 100, 241, 0.466);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] .sms-feature-card:hover {
  background: rgba(0, 113, 178, 0.121);
  border-color: rgba(0, 101, 203, 0.22);
  box-shadow: 0 4px 28px rgba(0, 89, 255, 0.679);
}

[data-theme="dark"] .sms-feature-card h3 {
  color: var(--rcs-text-light, #f1f5f9);
}

[data-theme="dark"] .sms-feature-card p {
  color: var(--rcs-text-secondary, #cbd5e1);
}

/* Responsivo */
@media (max-width: 991px) {
  .sms-features-about {
    padding: 60px 0 80px;
  }

  .sms-info-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .sms-info-cards .sms-feature-card {
    margin-bottom: 0;
  }
}

@media (max-width: 576px) {
  .sms-features-about {
    padding: 60px 0 80px;
  }

  .sms-features-about .sms-section-header {
    margin-bottom: 40px;
  }

  .sms-features-about .sms-section-subtitle {
    font-size: 16px;
  }

  .sms-info-cards {
    grid-template-columns: 1fr;
  }
}