/* Grade de clientes com logos originais */
.clients .brand-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-template-columns: none;
  gap: 0;
  overflow: visible;
  border: 0;
}

.clients .brand-mark {
  position: relative;
  flex: 0 0 20%;
  min-width: 0;
  min-height: 186px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.075);
  margin-right: -1px;
  margin-bottom: -1px;
  background:
    radial-gradient(circle at 50% 42%, rgba(154,102,255,.055), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.016), rgba(255,255,255,.004));
  transition: background .45s ease, border-color .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}

.clients .brand-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.065) 48%, transparent 68%);
  transform: translateX(-70%);
  transition: transform .75s ease, opacity .45s ease;
}

.clients .brand-mark::after {
  content: "+";
  position: absolute;
  top: 13px;
  right: 15px;
  color: rgba(255,255,255,.22);
  font: 500 11px/1 "DM Sans", sans-serif;
}

.clients .brand-mark:hover {
  z-index: 2;
  border-color: rgba(213,161,255,.24);
  background:
    radial-gradient(circle at 50% 42%, rgba(214,68,224,.11), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  transform: translateY(-3px);
}

.clients .brand-mark:hover::before {
  opacity: 1;
  transform: translateX(70%);
}

.clients .brand-mark img {
  display: block;
  width: auto;
  height: auto;
  max-width: 68%;
  max-height: 68px;
  object-fit: contain;
  opacity: .72;
  filter: grayscale(1) brightness(0) invert(1);
  transform: translateY(-3px);
  transform-origin: center;
  -webkit-box-reflect: below -16px linear-gradient(to bottom, transparent 48%, rgba(255,255,255,.115));
  transition: opacity .45s ease, filter .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}

.clients .brand-mark:hover img {
  opacity: .96;
  filter: grayscale(.08) saturate(.78) brightness(1.04);
  transform: translateY(-7px) scale(1.035);
}

.clients .brand-ford img,
.clients .brand-seara img {
  opacity: .86;
  filter: grayscale(1) saturate(0) brightness(1.08) contrast(1.24);
}

.clients .brand-ford:hover img,
.clients .brand-seara:hover img {
  filter: none;
}

.clients .brand-volvo:hover img {
  filter: grayscale(1) brightness(0) invert(1);
}

.clients .brand-kopenhagen img,
.clients .brand-volvo img,
.clients .brand-sicredi img,
.clients .brand-ford img,
.clients .brand-wepink img,
.clients .brand-fruki img {
  max-width: 72%;
}

.clients .brand-itaipava img,
.clients .brand-seara img,
.clients .brand-glade img {
  max-height: 82px;
}

@media (max-width: 980px) {
  .clients .brand-mark {
    flex-basis: 33.333%;
    min-height: 170px;
  }
}

@media (max-width: 620px) {
  .clients .brand-mark {
    flex-basis: 50%;
    min-height: 145px;
  }

  .clients .brand-mark img {
    max-width: 72%;
    max-height: 58px;
  }

  .clients .brand-itaipava img,
  .clients .brand-seara img,
  .clients .brand-glade img {
    max-height: 70px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients .brand-mark,
  .clients .brand-mark::before,
  .clients .brand-mark img {
    transition: none;
  }
}