/* Contenedor principal */
        .carousel-container {
            position: relative;
            width: 302px;
            max-width: 600px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            border-radius: 12px;
        }

        /* Wrapper que se mueve */
        .banner-wrapper {
            display: flex;
            transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .banner-item {
            min-width: 100%;
            position: relative;
        }

        .banner-item img {
            width: 300px;
            height: 600px; /* Altura fija para la prueba */
            object-fit: cover;
            display: block;
        }

        /* Botones de navegación */
        .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.3);
            color: white;
            border: none;
            padding: 15px 20px;
            cursor: pointer;
            font-size: 20px;
            border-radius: 50%;
            margin: 0 10px;
            transition: background 0.3s;
        }

        .nav-btn:hover { background: rgba(0, 0, 0, 0.8); }
        #nextBtn { right: 0; }
        #prevBtn { left: 0; }

        /* Indicador de carga */
        #loading { text-align: center; padding: 20px; }

        /* Botón de enlace visualmente atractivo */
        .ml-link {
            display: inline-block;
            background-color: #007bff; /* Blue background */
            color: #fff; /* White text */
            padding: 10px 20px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .ml-link:hover {
            background-color: #0056b3; /* Darker blue on hover */
            transform: scale(1.05); /* Slightly enlarge on hover */
        }

        #banner-combined {
            position: relative;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        #banner-combined .banner-wrapper {
            display: flex;
            flex-wrap: nowrap !important; /* Forza la fila única para desbordar horizontalmente */
            width: 100%;
            overflow-x: auto;
            scroll-snap-type: x mandatory; /* Scroll fluido y fijo en posiciones */
            /* Ocultar barra de scroll en webkit */
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none; /* Firefox */
        }

        #banner-combined .banner-wrapper::-webkit-scrollbar {
            display: none; /* Chrome, Safari */
        }

        #banner-combined .banner-item {
            flex: 0 0 calc((100% / 3) - 20px) !important; /* No crece, no se encoge, ancho fijo */
            box-sizing: border-box;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
            margin: 0 10px;
            scroll-snap-align: start; /* Asegura el alineado exacto al desplazar */
        }