:root{
  --gap: 20px;
  --speed: 28s;        /* ajusta velocidad global */
  --img-radius: 12px;
  --mask-fade: 80px;   /* desvanecido arriba/abajo */
}

.testimonios-animados{
  padding: 60px 20px; /* más aire arriba/abajo y a los lados */
  /* máscara para desvanecer bordes y que el loop se vea limpio */
  -webkit-mask: linear-gradient(to bottom,
    transparent 0, black var(--mask-fade),
    black calc(100% - var(--mask-fade)), transparent 100%);
          mask: linear-gradient(to bottom,
    transparent 0, black var(--mask-fade),
    black calc(100% - var(--mask-fade)), transparent 100%);
}

.cols{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  align-items: start;
}

.col{
  overflow: hidden;            /* oculta el loop fuera de vista */
  height: 520px;               /* alto visible de la columna */
  position: relative;
}

.track{
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  /* El truco del loop: el contenido está duplicado */
  /* Se anima todo el bloque para que “pase” por la ventana */
}

/* Ítems */
figure{
  margin: 0;
  background: #fff; /* fondo tipo placa */
  border-radius: var(--img-radius);
  padding: 8px; /* aire interno alrededor de la imagen */
  box-shadow: 0 2px 6px rgba(0,0,0,0.12); /* sombra suave */
  display: flex;
  justify-content: center;
  align-items: center;
}
figure img{
  /* display: block;
  width: 100%;
  border-radius: var(--img-radius);
  object-fit: cover; */
  display: block;
  width: 100%;
  border-radius: calc(var(--img-radius) - 2px); /* suaviza esquinas dentro de la placa */
  object-fit: cover;

}
figure:hover{
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  transition: all 0.25s ease;
}

/* Animaciones: subir y bajar */
@keyframes scroll-up{
  from{ transform: translateY(0); }
  to  { transform: translateY(-50%); } /* se mueve una “longitud” del primer set */
}
@keyframes scroll-down{
  from{ transform: translateY(-50%); }
  to  { transform: translateY(0); }
}

/* Aplicación por columna */
.col-up .track{
  animation: scroll-up var(--speed) linear infinite;
}
.col-down .track{
  animation: scroll-down var(--speed) linear infinite;
}

/* Pausa al pasar el mouse (UX) */
.col:hover .track{
  animation-play-state: paused;
}

/* Respeto a usuarios con “reduce motion” */
@media (prefers-reduced-motion: reduce){
  .track{ animation: none; }
}

/* Responsive: una sola columna en móvil, dirección única */
@media (max-width: 768px){
  .cols{
    grid-template-columns: 1fr;
  }
  .col{
    height: 300px;
  }
  .testimonios-animados{
    padding: 40px 15px; /* menos padding en móvil */
  }
  /* En móvil, todas suben para mantener coherencia */
  .col-down .track{
    animation: scroll-up var(--speed) linear infinite;
  }
}