.people {
    overflow: hidden;
    width: 100%;
    /* Altura mínima para evitar saltos visuales al cargar */
    min-height: 440px; 
}

/* Contenedor con máscara de desvanecimiento optimizada */
.people .carousel-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 2rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* Track del carrusel: Movimiento ultra fluido */
.people .peopleContent {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    width: max-content;

    /* Forzamos el uso de la tarjeta de video (GPU) */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    
    /* Aísla el contenido para que no afecte al resto de la página */
    contain: content; 
    
    /* Animación fluida */
    animation: scroll 55s linear infinite;
}

/* Pausar al pasar el mouse para ahorrar recursos */
.people .peopleContent:hover {
    animation-play-state: paused;
}

@keyframes scroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

/* Items individuales */
.people .carousel-item {
    width: 280px;
    height: 440px;
    flex: 0 0 auto;
    border-radius: 16px;
    background-color: #f0f0f0;
    overflow: hidden;
    /* Evita que el navegador pinte fuera de este cuadro */
    contain: paint; 
}

/* Imágenes: Carga asíncrona */
.people .carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    /* Evita el parpadeo y mejora el rendimiento */
    decoding: async;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 768px) {
    .people { min-height: 180px; }
    .people .carousel-item {
        width: 140px;
        height: 180px;
    }
    .people .peopleContent {
        animation-duration: 25s; /* Un poco más rápido en pantallas chicas */
    }
}