/* ═══════════ 7 · CLIENTES · 8 · PARCEIROS ═══════════ */
#clientes {
  background: #0c0c0f;
}

#parceiros {
  background: linear-gradient(#0c0c0f, var(--black));
}

#parceiros .section-head,
#parceiros .section-sub {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

/* ---- ESTILO BASE COMPARTILHADO (Clientes e Parceiros) ---- */
.logo-slot,
.partner-slot {
  aspect-ratio: 16/7;
  border: 1px solid #22222a;
  border-radius: 5px;
  background: linear-gradient(180deg, #151519, #101014);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .4s, background .4s;
}

.logo-slot img,
.partner-slot img {
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  opacity: .72;
  filter: saturate(.9);
  transition: opacity .4s, filter .4s, transform .4s;
}

.logo-slot:hover,
.partner-slot:hover {
  border-color: #34343d;
  background: linear-gradient(180deg, #17171c, #111116);
}

.logo-slot:hover img,
.partner-slot:hover img {
  opacity: 1;
  filter: saturate(1);
  transform: scale(1.05);
}

/* ===================================================
   ESTRUTURA DE SUPORTE AO CARROSSEL (DESKTOP INTRACTO)
   =================================================== */
.marquee-track {
  display: contents;
}

.marquee-group {
  display: contents;
}

.marquee-group[aria-hidden="true"] {
  display: none;
}

/* ===================================================
   1. GRID DE CLIENTES (LOGO-WALL)
   =================================================== */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.8rem, 1.4vw, 1.2rem);
  width: 100%;
  padding: .8rem 0;
  align-items: stretch;
  justify-items: stretch;
}

#clientes .logo-slot {
  padding: .6rem;
}

#clientes .logo-slot img {
  max-height: 44%;
  max-width: 88%;
}

/* Alturas-alvo por logo (Normalização Óptica) */
#clientes .logo-slot img[src$="Logo-Belasul.png" i] { max-height: 74%; }
#clientes .logo-slot img[src$="schuster.png" i] { max-height: 70.4%; }
#clientes .logo-slot img[src$="MC-Branco.png" i] { max-height: 61.2%; }
#clientes .logo-slot img[src$="Sollucao.png" i] { max-height: 42.5%; }
#clientes .logo-slot img[src$="produza.png" i] { max-height: 53.1%; }
#clientes .logo-slot img[src$="Fatto.png" i] { max-height: 50.6%; }
#clientes .logo-slot img[src$="finger.png" i] { max-height: 47.1%; }
#clientes .logo-slot img[src$="bravo.png" i] { max-height: 45%; }
#clientes .logo-slot img[src$="Unimed-branco.png" i] { max-height: 42.9%; }
#clientes .logo-slot img[src$="Logo_Biolchi.png" i] { max-height: 42.9%; }
#clientes .logo-slot img[src$="Certaja-branco.png" i] { max-height: 42%; }
#clientes .logo-slot img[src$="sicoob.png" i] { max-height: 41%; }
#clientes .logo-slot img[src$="sicredi.png" i] { max-height: 40%; }
#clientes .logo-slot img[src$="Agregar.png" i] { max-height: 39.7%; }
#clientes .logo-slot img[src$="rotoplastyc.png" i] { max-height: 39.7%; }
#clientes .logo-slot img[src$="Pellegrin.png" i] { max-height: 39.3%; }
#clientes .logo-slot img[src$="grazmec.png" i] { max-height: 38.4%; }
#clientes .logo-slot img[src$="cresol.png" i] { max-height: 36.6%; }
#clientes .logo-slot img[src$="gt.png" i] { max-height: 35.8%; }
#clientes .logo-slot img[src$="KeplerWeber.png" i] { max-height: 31.2%; }

@media (max-width: 1024px) {
  .logo-wall {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===================================================
   2. GRID DE PARCEIROS (PARTNER-WALL)
   =================================================== */
.partner-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.6rem, 1.2vw, 1rem);
  width: 100%;
  padding: .8rem 0;
}

.partner-slot {
  padding: .6rem;
}

.partner-slot img {
  max-height: 45%;
  max-width: 80%;
}

@media (max-width: 1024px) {
  .partner-wall {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===================================================
   3. REGRAS EXCLUSIVAS MOBILE (CARROSSEL INFINITO)
   =================================================== */
@media (max-width: 640px) {
  .logo-wall,
  .partner-wall {
    display: flex;
    overflow: hidden;
    width: 100%;
    padding: .8rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }

  #clientes .logo-slot {
    padding: .6rem;
  }
  
  .marquee-track {
    display: flex;
    gap: 0;
    width: max-content;
    animation: marquee-slide 28s linear infinite;
    will-change: transform;
  }

  .marquee-track.marquee-reverse {
    animation-direction: reverse;
  }

  .logo-wall:active .marquee-track,
  .partner-wall:active .marquee-track {
    animation-play-state: paused;
  }

  .marquee-group {
    display: flex;
    gap: .8rem;
    padding-right: .8rem;
    align-items: center;
    flex-shrink: 0;
  }

  .marquee-group[aria-hidden="true"] {
    display: flex;
  }

  .logo-slot,
  .partner-slot {
    width: 135px;
    height: 59px;
    flex-shrink: 0;
  }

  .logo-slot img,
  .partner-slot img {
    width: auto;
    height: auto;
  }
}

@keyframes marquee-slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 960px) {
  .logo-wall {
    grid-template-columns: repeat(3, 1fr);
  }

  .partner-wall {
    grid-template-columns: repeat(2, 1fr);
  }
}