/* --- ARCHIVO: estilo.css --- */
.slider-container-musa {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background-color: #1a1a1a;
}

.slider-musa {
    display: flex;
    width: 600%; 
    transition: transform 0.8s ease-in-out;
    margin: 0;
    padding: 0;
}

.slide-musa {
    width: 16.6666%;
    flex-shrink: 0;
    list-style: none;
}

.slide-musa img {
    width: 100%;
    height: auto;
    display: block;
    border: 0;
    transition: transform 0.5s ease;
}

.slide-musa a:hover img {
    transform: scale(1.05);
}

@media screen and (max-width: 768px) {
    .slider-musa {
        transition: transform 0.5s ease-in-out;
    }
}
/* AQUÍ SE ACABA EL ARCHIVO CSS. NO PONGAS NADA MÁS ABAJO */

/* --- REFUERZO ESPECIAL MÓVIL --- */
@media screen and (max-width: 768px) {
    .slider-container-musa {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
    }
    .slider-musa {
        display: flex !important;
        /* Esto asegura que la tira de fotos sea ancha también en móvil */
        width: 600% !important; 
    }
    .slide-musa {
        /* Forzamos que cada foto ocupe toda la pantalla del móvil */
        width: 16.6666% !important;
        float: left;
    }
}



/* --- CAMBIAR FONDO BLANCO DE IMÁGENES DE PRODUCTO --- */

/* 1. Atacamos a las miniaturas en los listados */
.product-miniature img, 
.featured-products img,
.product-thumbnail img {
    background-color: #222222 !important;
    object-fit: contain; /* Mantiene la proporción sin deformar */
}

/* 2. Atacamos a la imagen principal dentro de la ficha de producto */
.product-cover img, 
.product-images img,
#active-details img {
    background-color: #222222 !important;
    object-fit: contain;
}

/* 3. Ajuste para el contenedor (por si la imagen es más pequeña) */
.thumbnail-container, 
.product-cover, 
.images-container {
    background-color: #222222 !important;
}

.product-miniature img {
    background-color: #222222 !important;
    mix-blend-mode: multiply; /* Esto hace que el blanco se vuelva transparente */
    filter: contrast(1.1); /* Un toque de contraste ayuda a limpiar bordes */
}