/* B2 Sistemas — 04 / Clientes (interlúdio de marcas com logos reais, padding reduzido) */

.clientes {
  position: relative;
  padding-block: clamp(60px, 9vh, 104px);
  overflow: clip;
}

/* Cabeçalho compacto e centrado — contraste de ritmo com os capítulos */
.clientes .section-head {
  margin-inline: auto;
  margin-bottom: clamp(28px, 5vh, 46px);
  text-align: center;
}

.clientes .section-head .lead {
  margin-inline: auto;
  max-width: 52ch;
}

/* Linha meta acima das faixas */
.clientes .clientes-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: clamp(22px, 4vh, 34px);
  padding-inline: var(--gutter);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-3);
}

.clientes .clientes-note::before,
.clientes .clientes-note::after {
  content: "";
  width: clamp(24px, 6vw, 64px);
  height: 1px;
  background: var(--line-strong);
  flex: none;
}

/* Faixas — teto de largura para o loop de 2 cópias nunca abrir vão:
   a metade mais estreita das tracks (~1380px, larguras fixadas por atributos
   width/height dos logos) precisa ser ≥ que o viewport da faixa (máx. 1200px) */
.clientes .clientes-belts {
  display: grid;
  gap: 16px;
  max-width: var(--container);
  margin-inline: auto;
}

.clientes .marquee-track {
  align-items: center;
  padding-block: 6px;
}

.clientes .clientes-marquee-alt .marquee-track {
  animation-direction: reverse;
  animation-duration: 46s;
}

/* Chip claro com logo real — off-white quente (--ink-1) para casar com a
   paleta; mix-blend multiply funde o retângulo branco dos JPEGs no chip */
.clientes .cliente-chip {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 152px;
  height: 86px;
  margin-right: 16px;
  padding: 14px 22px;
  background: var(--ink-1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md);
  cursor: default;
  isolation: isolate;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

/* Altura fixa por tipo + width:auto: o aspect-ratio vem dos atributos
   width/height, então o espaço é reservado ANTES do lazy-load (zero salto);
   object-fit:contain absorve o teto de largura sem distorção.
   Tratamento unificador: multiply (fundo branco some no chip), leve
   dessaturação e cantos suaves nos tiles full-bleed */
.clientes .cliente-chip img {
  height: 46px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  border-radius: 8px;
  mix-blend-mode: multiply;
  filter: saturate(0.85);
}

/* Logos quadrados: um pouco mais altos para peso visual equivalente */
.clientes .chip-sq img { height: 54px; }

/* Quadrados com muito respiro interno na arte (Granja, Liptosflora) */
.clientes .chip-air img { height: 58px; }

/* Grupo Varnier (701×140, muito panorâmico): mais baixo e com teto de largura */
.clientes .chip-wide img { height: 36px; }

/* Foto-tiles (Paredão pixelado, Renato Chaveiro, Selaria): menor ampliação
   + moldura interna suave para lerem como tiles curados, não recortes */
.clientes .chip-photo img {
  height: 48px;
  border-radius: 10px;
  outline: 1px solid rgba(11, 9, 6, 0.12);
  outline-offset: -1px;
}

/* Selaria 1º de Maio (foto panorâmica de madeira): ainda mais contida */
.clientes .chip-pano img { height: 42px; }

/* Bitmaps de baixa resolução (Paredão, Coopertan, Falavinha): ~17% menores
   que os pares da mesma classe — a ampliação menor dissolve o serrilhado
   sem quebrar o peso ótico da parede */
.clientes .chip-lowres img { height: 38px; }
.clientes .chip-sq.chip-lowres img { height: 45px; }
.clientes .chip-photo.chip-lowres img { height: 40px; }

.clientes .cliente-chip:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: var(--shadow-card);
}

@media (max-width: 760px) {
  .clientes .clientes-belts { gap: 12px; }

  .clientes .cliente-chip {
    min-width: 128px;
    height: 72px;
    margin-right: 12px;
    padding: 12px 18px;
  }

  .clientes .cliente-chip img { height: 38px; max-width: 140px; }
  .clientes .chip-sq img { height: 46px; }
  .clientes .chip-air img { height: 48px; }
  .clientes .chip-wide img { height: 30px; }
  .clientes .chip-photo img { height: 40px; }
  .clientes .chip-pano img { height: 36px; }
  .clientes .chip-lowres img { height: 32px; }
  .clientes .chip-sq.chip-lowres img { height: 38px; }
  .clientes .chip-photo.chip-lowres img { height: 34px; }
}

/* Divider "17+ empresas": em telas estreitas o rótulo fica em uma linha só
   (fonte/tracking menores e traços curtos); se ainda quebrar (<340px),
   align-items:center mantém os traços no centro do bloco de texto */
@media (max-width: 480px) {
  .clientes .clientes-note {
    gap: 10px;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
  }

  .clientes .clientes-note::before,
  .clientes .clientes-note::after {
    width: 18px;
  }
}