/*
 * Diferenciais - Hygienize Child
 * Faixa azul com 4 itens (icone + titulo + texto). A HYG-007B tentou
 * sobrepor esta faixa a base da secao anterior com margin-top negativo,
 * mas isso se mostrou fragil: quando nao ha conteudo suficiente antes
 * dela (ex.: Grid de Servicos vazia, ou Hero curto), a faixa "come"
 * conteudo real em vez de flutuar sobre espaco vazio. Revertido para
 * espacamento normal (sem overlap), mantendo o restante do visual
 * (fundo azul, cantos arredondados, sombra, icones translucidos).
 * Usa exclusivamente os tokens do Design System (variables.css).
 */

.hyg-differentials-section {
  padding-block: var(--hyg-space-8);
}

.hyg-differentials-band {
  background-color: var(--hyg-color-primary);
  border-radius: var(--hyg-radius-lg);
  box-shadow: var(--hyg-shadow-lg);
  padding: var(--hyg-space-6) var(--hyg-space-5);
}

@media (min-width: 992px) {
  .hyg-differentials-band {
    padding: var(--hyg-space-7);
  }
}

.hyg-differentials-band .hyg-grid {
  gap: var(--hyg-space-5);
}

.hyg-differential {
  display: flex;
  align-items: flex-start;
  gap: var(--hyg-space-3);
}

.hyg-differential__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--hyg-radius-full);
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--hyg-color-on-primary);
}

.hyg-differential__icon svg {
  width: 22px;
  height: 22px;
}

.hyg-differential__title {
  font-family: var(--hyg-font-family-base);
  font-size: 1rem;
  font-weight: var(--hyg-font-weight-semibold);
  color: var(--hyg-color-on-primary);
  margin: 0 0 var(--hyg-space-1);
}

.hyg-differential__text {
  font-family: var(--hyg-font-family-base);
  font-size: var(--hyg-font-size-small);
  line-height: var(--hyg-line-height-body);
  color: var(--hyg-color-on-primary);
  opacity: 0.85;
  margin: 0;
}