/* =========================================================
   CARRUSEL INFINITO (componente reutilizable)
   LedLab — landing.
   ---------------------------------------------------------
   Fila de items que se desplaza sola y en loop, sin JS.

   Cómo funciona el loop sin salto: la pista (.marquee__track) contiene
   DOS grupos idénticos, y la animación la desplaza exactamente -50% de
   su ancho. Al terminar, el segundo grupo quedó donde estaba el primero,
   así que el reinicio es invisible. Por eso el segundo grupo va con
   aria-hidden en el HTML: es una copia visual, no contenido nuevo.

   Perillas por fila (se declaran en el HTML o en la sección):
       --marquee-duration   qué tan lento se mueve (más = más lento)
       --marquee-gap        separación entre items

   Modificador:
       .marquee--reverse    la fila va en sentido contrario
   ========================================================= */
.marquee {
  --marquee-duration: 60s;
  --marquee-gap: var(--space-6);

  overflow: hidden;
  width: 100%;
  /* Los bordes se desvanecen para que los items no aparezcan y
     desaparezcan de golpe contra el borde de la pantalla. */
  -webkit-mask-image: linear-gradient(
    90deg, transparent, #000 8%, #000 92%, transparent
  );
          mask-image: linear-gradient(
    90deg, transparent, #000 8%, #000 92%, transparent
  );
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--marquee-gap);
  animation: marqueeScroll var(--marquee-duration) linear infinite;
}
.marquee--reverse .marquee__track {
  animation-direction: reverse;
}

/* -50% = exactamente un grupo (la pista tiene dos). */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Se frena al pasar el mouse, para poder mirar un logo. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  flex: 0 0 auto;
  /* El gap de la pista ya separa los dos grupos entre sí. */
  padding-right: var(--marquee-gap);
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marquee__item img {
  display: block;
  width: var(--marquee-item-w, clamp(140px, 15vw, 220px));
  /* Los archivos son de 600x300; con esta proporción y "contain" el logo
     entra completo sea cual sea su forma dentro de ese lienzo. */
  aspect-ratio: 2 / 1;
  height: auto;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  /* Sin movimiento, la fila se puede recorrer a mano. */
  .marquee { overflow-x: auto; }
}