/* ==========================================================================
   BARRA DE EMPRESAS — Carrusel infinito ("marquee") sobre fondo claro
   Se diseña deliberadamente en claro (como una "trust bar") para que los
   logotipos de los clientes —normalmente en negro o color— luzcan con
   contraste real, aunque el resto del sitio sea oscuro.
   100% CSS, sin dependencias JS. Fluye en bucle constante, también en móvil.
   ========================================================================== */

.adx-logos {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 3.5rem);
  background: #eef0f4;
  overflow: hidden;
  z-index: 1;
}

.adx-logos__label {
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 700;
  color: #4a5164;
  margin-bottom: 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- Viewport: recorta el carrusel y difumina los bordes con un degradado --- */
.adx-logos__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.adx-logos__track {
  display: flex;
  width: max-content;
  animation: adx-marquee 30s linear infinite;
}

.adx-logos__track:hover {
  animation-play-state: paused;
}

/* --- Cada "vuelta" contiene el set completo de logos; se repite 2 veces para el bucle --- */
.adx-logos__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(2.75rem, 6vw, 5rem);
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

@keyframes adx-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.adx-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.adx-logos__item img {
  max-height: 34px;
  width: auto;
  filter: grayscale(100%) opacity(0.75);
  transition: filter var(--duration-medium) var(--ease-smooth), transform var(--duration-medium) var(--ease-smooth);
}

.adx-logos__item:hover img {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}

/* --- Placeholder de texto: se usa mientras no se han subido logos reales --- */
.adx-logos__item--text span {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #6b7280;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity var(--duration-medium) var(--ease-smooth), color var(--duration-medium) var(--ease-smooth);
}

.adx-logos__item--text:hover span {
  opacity: 1;
  color: var(--color-accent-dark);
}

/* --- Rendimiento y accesibilidad: velocidad adaptada y respeto a reduced-motion --- */
@media (max-width: 640px) {
  .adx-logos__track { animation-duration: 18s; }
}

@media (prefers-reduced-motion: reduce) {
  .adx-logos__track {
    animation: none;
  }
  .adx-logos__viewport {
    overflow-x: auto;
  }
}