/* =============================== */
    /* ESTILOS BASE (Desktop)          */
    /* =============================== */

    /* 1. Definimos la altura base en el contenedor (BOX) */
    .slick-slider .box {
        background-color: transparent !important;
        font-size: 1rem;
        height: 745px; /* Altura base Desktop */
        width: 100%;
        overflow: hidden;
        transition: height 0.3s ease; /* Transición suave */
    }

    /* 2. La imagen simplemente llena ese contenedor */
    .img-slider,
    .slick-slider .box img {
        width: 100%;
        height: 100% !important; /* Fuerza a llenar la caja */
        object-fit: cover;
        object-position: center center;
        display: block;
    }

    /* Clases de utilidad del slider */
    .em-slider-image-product { display: none; }
    .em-slider-image-product-no-hide { margin-bottom: 20px; }
    .dots-inner-right .slick-dots { right: auto !important; left: auto !important; width: 100%; }
    .em-imgprod-h-100vh { height: 100vh !important; }

    /* Flechas */
    .slick-prev, .slick-next {
        position: absolute; top: 50%; transform: translateY(-50%);
        background: none !important; border: none !important;
        font-size: 50px !important; color: rgba(0, 0, 0, 0.7) !important;
        z-index: 10; cursor: pointer;
        transition: transform 0.2s ease;
    }
    .slick-prev { left: 10px !important; }
    .slick-next { right: 10px !important; }
    .slick-prev::after { content: '<' !important; }
    .slick-next::after { content: '>' !important; }
    .slick-prev:hover, .slick-next:hover { color: #000 !important; transform: translateY(-50%) scale(1.2); }

    /* Ocultar flechas estándar si existen iconos fontawesome duplicados */
    .fa-arrow-left, .fa-arrow-right { display: none !important; opacity: 0 !important; visibility: hidden !important; }


    /* =============================== */
    /* MEDIA QUERIES (CORREGIDAS)      */
    /* =============================== */

    @media (min-width: 768px) {
        .em-slider-image-product { display: block; }
        .em-slider-image-product-no-hide { margin-bottom: 0px; }
    }

    /* Laptops (1200px - 1400px) */
    @media (max-width: 1400px) {
        .slick-slider .box {
            height: 600px !important;
        }
    }

    /* Tablets (iPad / Vertical) y Netbooks (991px) */
    @media (max-width: 991px) {
        .slick-slider .box {
            height: 500px !important;
        }
    }

    /* Móviles (768px) */
    @media (max-width: 768px) {
        .slick-slider .box {
            height: 350px !important;
        }

        /* Ajuste de flechas en móvil */
        .slick-prev, .slick-next {
            font-size: 30px !important;
            color: rgba(255, 255, 255, 0.8) !important; /* Blancas para verlas sobre foto */
            text-shadow: 0 0 3px rgba(0,0,0,0.5);
        }
        .slick-prev { left: 5px !important; }
        .slick-next { right: 5px !important; }
    }

    /* Móviles muy pequeños (480px) */
    @media (max-width: 480px) {
        .slick-slider .box {
            height: 300px !important;
        }
    }