/* ====================================
    INFINITE CAROUSEL COMPONENT STYLES
    ==================================== */

/* ---------- CONTENEDOR ---------- */
.infinite-carousel {
     margin: 2.5rem auto;
     max-width: 90vw;
     width: 90%;
     overflow: hidden;
     /* Suavizado de bordes: se difumina al entrar / salir */
     -webkit-mask: linear-gradient(90deg, transparent, #fff 10%, #fff 90%, transparent);
     mask: linear-gradient(90deg, transparent, #fff 10%, #fff 90%, transparent);
     
     /* Ajuste para dispositivos móviles */
     @media screen and (max-width: 768px) {
          -webkit-mask: linear-gradient(90deg, transparent, #fff 5%, #fff 95%, transparent);
          mask: linear-gradient(90deg, transparent, #fff 5%, #fff 95%, transparent);
          max-width: 100vw;
          width: 100%;
     }
}

/* ---------- TRACK ---------- */
.infinite-carousel > div {
     width: max-content;
     display: flex;
     align-items: center;
     padding: 1rem 0;
     flex-wrap: nowrap;
     list-style: none;
     position: relative; /* Needed for proper positioning during animation */
     transform-style: preserve-3d; /* Mejora la calidad de la transformación */
     will-change: transform; /* Optimiza para animaciones */
}

/* ---------- TARJETAS ---------- */
.service-card {
     transition: all 0.2s ease; /* Transición suave para todos los cambios */
     transform: translateZ(0); /* Fuerza aceleración por hardware */
     backface-visibility: hidden; /* Mejora rendimiento */
}

.service-card img {
     max-width: 20rem;
}

/* ---------- ANIMACIÓN ---------- */
@keyframes move {
     0% {
          transform: translateX(0);
     }
     100% {
          transform: translateX(-33.3333%);
     }
}

@keyframes moveReverse {
     0% {
          transform: translateX(0);
     }
     100% {
          transform: translateX(33.3333%);
     }
}
/* ==== END INFINITE CAROUSEL STYLES ==== */