/* ============================================================
   Seção 5 — Clientes (prova social / logo wall)
   ============================================================ */
.clientes { background: var(--white); }
.clientes__head { text-align: center; max-width: 60ch; margin: 0 auto clamp(2rem, 5vw, 3.2rem); }
.clientes__head .section__eyebrow { justify-content: center; }
.clientes__head .section__eyebrow::before { display: none; }

.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.logo-tile {
  flex: 0 1 calc(25% - 0.75rem);
  display: grid; place-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 1.9rem);
  min-height: 118px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.logo-tile img {
  width: 100%; max-width: 196px; height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .66;
  transition: filter .35s var(--ease), opacity .35s var(--ease);
}
.logo-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #CFE6E4;
}
.logo-tile:hover img { filter: grayscale(0); opacity: 1; }

.clientes__note { text-align: center; margin-top: clamp(1.6rem, 4vw, 2.4rem); color: var(--text-med); font-size: var(--step--1); }
.clientes__note b { color: var(--primary); }

@media (max-width: 820px) { .logo-tile { flex-basis: calc(33.333% - 0.7rem); } }
@media (max-width: 520px) { .logo-tile { flex-basis: calc(50% - 0.5rem); min-height: 96px; } }