/* ===== Carrusel 2 filas (compatible con JS .lr-row /.lr-track) ===== */
/* Look & feel básico (ajustable a tu theme Forty si querés) */

.logos-rows {
  /* Variables de control */
  --gap: 2rem;            /* separación entre logos */
  --row-height: 84px;     /* alto de cada fila */
  --speed-top: 40s;       /* fallback de duración (JS la sobreescribe) */
  --speed-bottom: 68s;    /* fallback de duración (JS la sobreescribe) */
}

/* Contenedor de cada fila */
.lr-row {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: var(--row-height);
  margin: 0 auto;
}
.lr-row + .lr-row { margin-top: 1.25rem; }

/* Track animado: contiene [logos][logos] duplicado */
.lr-track {
  display: flex;
  align-items: center;
  gap: var(--gap);
  white-space: nowrap;
  will-change: transform;
  /* El JS setea animation-duration dinámicamente según ancho (px/s) */
}

/* Direcciones por fila */
.lr-top .lr-track {
  animation-name: scroll-left;
  animation-duration: var(--speed-top);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.lr-bottom .lr-track {
  animation-name: scroll-right;
  animation-duration: var(--speed-bottom);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Pausa UX al hover (opcional) */
.lr-row:hover .lr-track { animation-play-state: paused; }

/* Logos (las <img> están directamente dentro del track) */
.lr-track img {
  height: var(--row-height);
  width: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(0.1);
  opacity: 0.95;
  transition: transform 200ms ease, filter 200ms ease, opacity 200ms ease;
  user-select: none;
  -webkit-user-drag: none;
}
.lr-track img:hover {
  transform: scale(1.04);
  filter: grayscale(0);
  opacity: 1;
}

/* Animaciones (media pista porque el track viene duplicado) */
@keyframes scroll-left {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
@keyframes scroll-right {
  from { transform: translate3d(-50%,0,0); }
  to   { transform: translate3d(0,0,0); }
}

/* ===== Efecto túnel suave en bordes (opcional: descomentá) */
/*
.lr-row {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
*/

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .logos-rows {
    --gap: 1.5rem;
    --row-height: 72px;
  }
}
@media (max-width: 736px) {
  .logos-rows {
    --gap: 1.25rem;
    --row-height: 60px;
  }
}
@media (max-width: 480px) {
  .logos-rows {
    --gap: 1rem;
    --row-height: 52px;
    --speed-top: 26s;      /* fallbacks más rápidos en mobile */
    --speed-bottom: 32s;
  }
}