/**
 * Verano Mobile Image Replace CSS
 * Version: 1.0.6
 * 
 * Propósito:
 * - Reemplazar imagen de Single Image en columna #verano para móviles
 * - Resoluciones móviles ya indicadas (320px - 440px)
 * - Imagen nueva: https://zoahvenezuela.key-core.com/wp-content/uploads/2025/11/Banner-Instant-Care-Mobile.webp
 * - Enlace: https://zoahvenezuela.key-core.com/product-category/suncare/
 * 
 * Aplicación:
 * - Solo en resoluciones móviles específicas (320-440px)
 * - El JavaScript se encarga del reemplazo de imagen
 * - Este CSS solo ajusta el layout
 */

/* Estilos base para el contenedor de verano - APLICAR SIEMPRE */
#verano {
    position: relative;
}

#verano .wpb_single_image {
    width: 100% !important;
    max-width: 100% !important;
}

#verano .wpb_wrapper {
    width: 100% !important;
}

#verano .vc_figure {
    width: 100% !important;
    margin: 0 !important;
}

#verano .vc_single_image-wrapper {
    position: relative;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
}

#verano .vc_single_image-wrapper img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
}

/* Asegurar que la imagen reemplazada se muestre correctamente en móvil */
@media only screen and (min-width: 320px) and (max-width: 440px) {
    #verano .vc_single_image-wrapper {
        width: 100%;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    #verano .vc_single_image-wrapper img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        max-width: 100% !important;
        object-fit: cover;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    #verano .vc_single_image-wrapper a {
        display: block !important;
        width: 100%;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Clase añadida por JavaScript cuando la imagen se reemplaza */
    #verano .vc_single_image-wrapper.verano-mobile-replaced img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        opacity: 1 !important;
    }
}

/* Debugging - descomentar para ver bordes en desarrollo */
/*
@media only screen and (min-width: 320px) and (max-width: 440px) {
    #verano {
        outline: 3px solid red !important;
    }
    
    #verano .vc_single_image-wrapper {
        outline: 2px solid blue !important;
    }
    
    #verano .vc_single_image-wrapper img {
        outline: 1px solid green !important;
    }
}
/* Debugging - descomentar para ver bordes en desarrollo */
/*
@media only screen and (min-width: 320px) and (max-width: 440px) {
    #verano {
        outline: 3px solid red !important;
    }
    
    #verano .vc_single_image-wrapper {
        outline: 2px solid blue !important;
    }
    
    #verano .vc_single_image-wrapper img {
        outline: 1px solid green !important;
    }
}
*/