/* carrusel-infinito — fila que se desplaza en bucle, sin corte ni salto.
   Para testimonios, logos de clientes, valoraciones de Google, marcas.

   El bucle es SOLO CSS: el JS se limita a duplicar los hijos una vez. Por eso
   no hay requestAnimationFrame ni setInterval — en un móvil eso se nota en la
   batería, y una web de cliente que calienta el teléfono es una web mala. */
[data-lui~="carrusel"]{
  --lui-vel:38s;              /* más segundos = más lento */
  --lui-hueco:1.25rem;
  overflow:hidden;
  /* Los bordes se desvanecen: sin esto las tarjetas aparecen y desaparecen de
     golpe contra el canto del contenedor y se ve el truco. */
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

[data-lui~="carrusel"] > .lui-pista{
  display:flex;
  gap:var(--lui-hueco);
  width:max-content;
  animation:lui-desliza var(--lui-vel) linear infinite;
}

/* Al pasar el ratón se para: si hay texto que leer (un testimonio), moverse
   mientras alguien lee es una forma segura de que no lo lea. */
[data-lui~="carrusel"]:hover > .lui-pista{animation-play-state:paused}

[data-lui~="carrusel"][data-lui-sentido="derecha"] > .lui-pista{animation-direction:reverse}

/* -50% y no -100%: el JS duplica el contenido, así que media vuelta ya deja la
   fila exactamente donde empezó y el salto es invisible. */
@keyframes lui-desliza{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - var(--lui-hueco) / 2))}
}

/* Tarjeta de cortesía: si el proyecto trae la suya, se ignora esto. */
[data-lui~="carrusel"] .lui-cita{
  flex:0 0 auto;width:min(22rem,80vw);
  padding:1.5rem 1.6rem;
  border:1px solid var(--lui-linea,#e6e6e0);
  border-radius:14px;
  background:var(--lui-superficie,#fff);
}
[data-lui~="carrusel"] .lui-cita p{margin:0 0 1rem;line-height:1.6;color:var(--lui-texto,#1a1a18)}
[data-lui~="carrusel"] .lui-cita footer{font-size:.86rem;color:var(--lui-atenuado,#75756c)}

@media (prefers-reduced-motion:reduce){
  /* Nada de parar en seco y dejar media tarjeta cortada: se deja quieto y con
     scroll manual, que sigue siendo usable con teclado y con el dedo. */
  [data-lui~="carrusel"] > .lui-pista{animation:none}
  [data-lui~="carrusel"]{overflow-x:auto;-webkit-mask:none;mask:none}
}