/* MIX NET — marcas de clientes, com movimento opcional e contido na faixa. */
.clients-strip {
  padding: 17px 0 21px;
  overflow: hidden;
  border-block: 1px solid var(--line, #2a282d);
  background: #101012;
}

.clients-strip .clients-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin-bottom: 12px;
  padding-inline: 36px;
}

.clients-strip .clients-heading h2 {
  margin: 0;
  color: #b4b1bc;
  font-family: var(--body, sans-serif);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 1.2px;
  text-align: center;
}

.clients-strip .clients-toggle {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 6px;
  transform: translateY(-50%);
  border: 1px solid #ffffff1c;
  border-radius: 50%;
  background: transparent;
  color: #a5a3ab;
  cursor: pointer;
}

.clients-strip.is-enhanced .clients-toggle {
  display: flex;
}

.clients-strip .clients-toggle:hover,
.clients-strip .clients-toggle:focus-visible {
  border-color: #ffffff55;
  color: #f5f5f6;
}

.clients-strip .clients-toggle svg {
  display: block;
  width: 14px;
  height: 14px;
}

.clients-strip .clients-toggle [data-clients-icon="play"],
.clients-strip .clients-toggle[aria-pressed="true"] [data-clients-icon="pause"] {
  display: none;
}

.clients-strip .clients-toggle[aria-pressed="true"] [data-clients-icon="play"] {
  display: initial;
}

.clients-strip .clients-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #55515b #171618;
  overscroll-behavior-inline: contain;
}

.clients-strip .clients-viewport:focus-visible {
  outline-offset: -3px;
}

.clients-strip .clients-track {
  display: flex;
  width: max-content;
}

.clients-strip .clients-list {
  display: flex;
  flex: none;
  align-items: center;
  gap: 32px;
  width: max-content;
  margin: 0;
  /* Half a gap at each end makes the seam match the other spaces exactly. */
  padding: 0 16px;
  list-style: none;
}

.clients-strip .clients-list-clone {
  display: none;
}

.clients-strip .client-logo {
  display: flex;
  flex: 0 0 172px;
  align-items: center;
  justify-content: center;
  width: 172px;
  height: 76px;
  padding: 10px 14px;
  border: 1px solid #ffffff12;
  border-radius: 8px;
  background: #f3f3f5;
}

.clients-strip .client-logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: var(--client-logo-width, 140px);
  max-height: var(--client-logo-height, 54px);
  object-fit: contain;
  user-select: none;
}

.clients-strip.is-enhanced .clients-viewport {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}

.clients-strip.is-enhanced .clients-list-clone {
  display: flex;
}

.clients-strip.is-enhanced .clients-track {
  animation: clients-strip-travel var(--clients-duration, 80s) linear infinite;
  will-change: transform;
}

.clients-strip.is-paused .clients-track {
  animation-play-state: paused;
}

@keyframes clients-strip-travel {
  to { transform: translate3d(calc(-1 * var(--clients-distance, 2448px)), 0, 0); }
}

@media (max-width: 600px) {
  .clients-strip { padding-block: 15px 19px; }
  .clients-strip .clients-heading { margin-bottom: 10px; padding-inline: 28px; }
  .clients-strip .clients-heading h2 { font-size: .625rem; letter-spacing: .65px; }
  .clients-strip .clients-list { gap: 20px; padding-inline: 10px; }
  .clients-strip .client-logo { flex-basis: 144px; width: 144px; height: 70px; padding: 10px 12px; }
  .clients-strip .client-logo img { max-height: min(var(--client-logo-height, 54px), 48px); }
}

@media (prefers-reduced-motion: reduce) {
  .clients-strip.is-enhanced .clients-track { animation: none; transform: none; will-change: auto; }
  .clients-strip.is-enhanced .clients-viewport { overflow-x: auto; }
  .clients-strip .clients-list-clone,
  .clients-strip.is-enhanced .clients-list-clone,
  .clients-strip .clients-toggle,
  .clients-strip.is-enhanced .clients-toggle { display: none; }
}