:root {
  --marquee-item-height: 60px;   /* alto fijo de cada logo */
  --marquee-gap: 8px;            /* separación mínima entre logos */
  --marquee-speed: 80;           /* px por segundo, sin unidad (lo lee JS con parseFloat) */
}

.marquee-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  width: max-content;
  will-change: transform;
}

.marquee-item {
  flex: 0 0 auto;
  height: var(--marquee-item-height);
  width: auto;              /* el ancho lo define la proporción real del logo */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;        /* nada se recorta */
}

.marquee-item img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;      /* logo completo, sin recortes ni deformación */
  display: block;
  border: none;             /* por si el tema aplica borde por defecto a <img> */
  box-shadow: none;
}

@media (max-width: 768px) {
  :root {
    --marquee-item-height: 44px;
    --marquee-gap: 6px;
  }
}