/*
 * QJ HERO VIEWPORT FIX V1
 * Ajuste responsivo del Hero.
 * No modifica el menú ni los estilos de WooCommerce.
 */

@media (min-width: 768px) {

    body.home #top.main-banner,
    body.home #top .Modern-Slider,
    body.home #top .Modern-Slider .slick-list,
    body.home #top .Modern-Slider .slick-track,
    body.home #top .Modern-Slider .item,
    body.home #top .Modern-Slider .item .img-fill {

        height: var(
            --qj-hero-viewport-height,
            calc(100dvh - 80px)
        ) !important;

        min-height: 0 !important;
        max-height: none !important;
    }

    body.home #top.main-banner {
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    body.home #top .Modern-Slider .imagen-quesos,
    body.home #top .Modern-Slider .imagen-quesos-quesos {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    body.home #top .Modern-Slider .imagen-quesos > img,
    body.home #top .Modern-Slider .imagen-quesos-quesos > img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    /* Botón pausa */
    body.home #top #qj-slider-control {
        position: absolute !important;
        top: auto !important;
        bottom: 67px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        z-index: 1000 !important;
    }

    /* Flecha roja parcialmente visible */
    body.home #top .scroll-down.scroll-to-section {
        position: absolute !important;
        top: auto !important;
        bottom: -18px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        width: 60px !important;
        height: 60px !important;
        z-index: 1001 !important;
    }
}

/* QJ_SEPARACION_BOTONES_V2 */
@media (min-width: 768px) {
    body.home #top.main-banner #qj-slider-control {
        bottom: 57px !important;
        top: auto !important;
    }

    body.home #top.main-banner .scroll-down.scroll-to-section {
        bottom: -18px !important;
        top: auto !important;
    }
}
/* FIN QJ_SEPARACION_BOTONES_V2 */

/* ==========================================
   QJ_HERO_IMAGEN_COMPLETA_V1
   Imágenes completas sin recorte ni deformación
   ========================================== */

@media (min-width: 768px) {

    body.home #top .Modern-Slider .imagen-quesos > img,
    body.home #top .Modern-Slider .imagen-quesos-quesos > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    body.home #top .Modern-Slider .img-fill {
        background-color: #000000 !important;
    }
}

/* FIN QJ_HERO_IMAGEN_COMPLETA_V1 */

/* ===================================================
   QJ_HERO_IMAGEN_RESPONSIVE_V2
   Imágenes completas y proporcionales.
   Conserva controles y altura del Hero.
   =================================================== */

@media (min-width: 768px) {

    body.home #top.main-banner .Modern-Slider
    .imagen-quesos,

    body.home #top.main-banner .Modern-Slider
    .imagen-quesos-quesos {
        height: 100% !important;
        width: 100% !important;
        position: relative !important;
    }

    body.home #top.main-banner .Modern-Slider
    .imagen-quesos > img,

    body.home #top.main-banner .Modern-Slider
    .imagen-quesos-quesos > img {

        display: block !important;

        width: 100% !important;

        height: var(
            --qj-hero-viewport-height,
            100%
        ) !important;

        max-height: 100% !important;

        object-fit: cover !important;

        object-position: center center !important;
    }

    body.home #top.main-banner .Modern-Slider
    .item .img-fill {
        background-color: #000 !important;
    }
}

/* FIN QJ_HERO_IMAGEN_RESPONSIVE_V2 */