/* Limita el ancho máximo para evitar imágenes borrosas por estiramiento */
.modern-carousel {
    width: 100%;
    max-width: 900px; /* Ajusta este valor según el tamaño real de tus JPGs */
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    border-radius: 8px; /* UX: Suaviza los bordes */
    touch-action: pan-y; /* Permite scroll vertical en la web, bloquea el horizontal */
    cursor: grab;
}
.modern-carousel:active {
    cursor: grabbing;
}
.carousel-track {
    display: flex;
    will-change: transform; /* Optimización GPU */
    /* La transición la manejará el Javascript para el bucle infinito */
}
.carousel-slide {
    flex: 0 0 100%;
    min-width: 100%;
    aspect-ratio: 16 / 9; /* Mantiene una proporción fija, ajusta a 21:9 si son muy apaisadas */
}
.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita deformaciones */
    display: block;
    pointer-events: none; /* Vital para que funcione el arrastre con ratón en PC */
}