/* Seção Marcas - título no topo à esquerda e slider full width abaixo */
.brands { padding-top:40px; padding-bottom:56px; max-width: 1400px; margin: 0 auto; padding-left: 35px;}
.brands-inner { display:flex; flex-direction:column; gap:20px; align-items:flex-start; }

/* título no topo, alinhado à esquerda (ocupa ~50% visualmente) */
.brands-title { width:100%; max-width:50%; }

/* Slider ocupa 100% do container, abaixo do título */
.brands-slider { width:100%; }

/* viewport e track */
.brands-viewport {
  overflow:hidden;
  width:100%;
  touch-action: pan-y; /* permite pan horizontal via JS, evita comportamento nativo conflitante */
  cursor: grab;
  border-radius:8px;
  padding:12px 0;
}
.brands-viewport:active { cursor:grabbing; }

.brands-track {
  display:flex;
  align-items:center;
  gap:50px;
  transition: transform 400ms cubic-bezier(.22,.9,.35,1);
  will-change: transform;
  padding:8px 0;
}

/* dimensões dos logos */
:root { --brand-logo-size:120px; } /* ajuste conforme necessário */
.brand-item {
  flex: 0 0 var(--brand-logo-size);
  display:flex;
  align-items:center;
  justify-content:center;
  height: var(--brand-logo-size);
}
.brand-item img {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  transition: transform 300ms ease, filter 300ms ease, opacity 300ms ease;
  filter: grayscale(100%) contrast(.9);
  opacity: .65;
  transform-origin: center center;
}

/* logo ativo (central) */
.brand-item.active img {
  transform: scale(1.2);
  filter: none;
  opacity: 1;
}

/* responsivo - reduz tamanho dos logos em telas pequenas */
@media (max-width:992px) {
  :root { --brand-logo-size:92px; }
  .brands-title { max-width:100%; }
}
@media (max-width:640px) {
  :root { --brand-logo-size:120px; }
}