.carrusel-publicidad {
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
}

.carrusel-track {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
}

/* Desktop */
/* Desktop: 3 banners */
.carrusel-item {
    min-width: 33%;
    max-width: 320px; /* evita que se hagan gigantes */
    height: 160px;    /* mantiene el alto original */
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    scroll-snap-align: start;
    position: relative;
    height: 200px; /* o 360px si querés más aire */
}
/*  LE HACEMOS UN POCO DE ZOOM */
.carrusel-item {
    transition: transform 0.3s ease;
}

.carrusel-item:hover {
    transform: scale(1.05);
    z-index: 2;    
}


/* Tablet: 2 banners */
@media (max-width: 900px) {
    .carrusel-item {
        min-width: 50%;
        max-width: none; /* que no limite en tablet */
    }
}

/* Móvil: 1 banner */
@media (max-width: 600px) {
    .carrusel-item {
        min-width: 100%;
        max-width: none;
    }
}

.carrusel-item img {/* 🔥 clave para verticales */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carrusel-wrapper {
    max-width: 1000px; /* ajustá según tu diseño */
    margin: 0 auto;    /* centra el carrusel */
}

/* === COLOR DE LA BARA DE DIRECCION ===== -->
/* Scrollbar del carrusel */
.carrusel-track::-webkit-scrollbar {
    height: 8px; /* grosor */
}

.carrusel-track::-webkit-scrollbar-track {
    background: #2a2a2a; /* fondo oscuro */
    border-radius: 10px;
}

.carrusel-track::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #d48a1f, #ffb347); /* dorado-naranja */
    border-radius: 10px;
}

.carrusel-track::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #e19a2a, #ffc46a); /* un poco más brillante al hover */
}