/* Faixa dupla de negócios: duas fileiras de cartões em sentidos opostos,
   60 s por volta, só rodando quando visíveis (como os logos do eezyinn). */

#negocios { padding: 120px 0; overflow: hidden; }
#negocios h2 { margin: 10px 0 48px; }
.band { display: grid; gap: 12px; }
.band__viewport { --gap: 12px; overflow: hidden; }
.band__track { display: flex; gap: var(--gap); width: max-content; margin: 0; padding: 0; list-style: none; }
.band__card {
  display: grid;
  place-items: center;
  min-width: 190px;
  height: 84px;
  padding: 0 28px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--warm) 7%, var(--ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warm) 10%, transparent);
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
}
.has-motion .band__track { animation: band-run 60s linear infinite paused; }
.has-motion .band__viewport--reverse .band__track { animation-name: band-run-reverse; }
.has-motion .band__viewport.is-inview .band__track { animation-play-state: running; }
@keyframes band-run { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
@keyframes band-run-reverse { from { transform: translateX(calc(-50% - var(--gap) / 2)); } to { transform: translateX(0); } }