/* ==========================================================
   TÍTULO ESPECÍFICO DOS ACHADOS
   ========================================================== */

.leo-achados-title {

    width:
        100% !important;


    max-width:
        100% !important;


    margin:
        0 !important;


    padding:
        0 15px !important;


    box-sizing:
        border-box;
}


.leo-achados-title
.elementor-widget-container {

    margin:
        0 !important;


    padding:
        0 !important;
}


.leo-achados-title
.elementor-heading-title {

    margin:
        0 !important;


    padding:
        0 !important;


    text-align:
        center !important;


    color:
        #111111 !important;


    font-family:
        inherit !important;


    font-size:
        28px !important;


    font-weight:
        700 !important;


    line-height:
        1.15 !important;
}


/* ==========================================================
   ACHADOS DESKTOP
   ========================================================== */

.leo-achados-carousel {

    /*
     * 4 ofertas visíveis.
     */

    --leo-achados-visible:
        4;


    /*
     * Separação parecida com
     * a referência.
     */

    --leo-achados-gap:
        22px;


    position:
        relative;


    /*
     * Conjunto mais compacto.
     * Os cards ficam altos/verticais.
     */

    width:
        min(
            1220px,
            calc(100% - 100px)
        );


    max-width:
        100%;


    /*
     * Próximo do título.
     */

    margin:
        16px auto 0;


    padding:
        0 0 40px;


    box-sizing:
        border-box;
}


/* ==========================================================
   VIEWPORT
   ========================================================== */

.leo-achados-viewport {

    width:
        100%;


    overflow-x:
        auto;


    overflow-y:
        hidden;


    scroll-behavior:
        smooth;


    scroll-snap-type:
        x mandatory;


    overscroll-behavior-x:
        contain;


    -webkit-overflow-scrolling:
        touch;


    scrollbar-width:
        none;


    -ms-overflow-style:
        none;
}


.leo-achados-viewport::-webkit-scrollbar {

    display:
        none;
}


/* ==========================================================
   TRILHO
   ========================================================== */

.leo-achados-track {

    width:
        100%;


    display:
        flex;


    flex-wrap:
        nowrap;


    align-items:
        stretch;


    gap:
        var(
            --leo-achados-gap
        );


    margin:
        0;


    padding:
        0;
}


/* ==========================================================
   CARD
   ========================================================== */

.leo-achado-card {

    flex:
        0 0
        calc(
            (
                100%
                -
                (
                    var(
                        --leo-achados-gap
                    )
                    *
                    (
                        var(
                            --leo-achados-visible
                        )
                        -
                        1
                    )
                )
            )
            /
            var(
                --leo-achados-visible
            )
        );


    min-width:
        0;


    margin:
        0;


    padding:
        0;


    box-sizing:
        border-box;


    scroll-snap-align:
        start;


    scroll-snap-stop:
        always;
}


/* ==========================================================
   FORMATO DA ARTE
   ========================================================== */

.leo-achado-link {

    display:
        block;


    position:
        relative;


    width:
        100%;


    /*
     * Formato vertical da referência.
     */

    aspect-ratio:
        3 / 5;


    overflow:
        hidden;


    border-radius:
        12px;


    background:
        #123B82;


    text-decoration:
        none;


    transform:
        translateZ(0);
}


/* ==========================================================
   IMAGEM
   ========================================================== */

.leo-achado-img {

    display:
        block !important;


    width:
        100% !important;


    height:
        100% !important;


    max-width:
        none !important;


    margin:
        0 !important;


    padding:
        0 !important;


    border:
        0 !important;


    object-fit:
        cover !important;


    object-position:
        center center !important;


    border-radius:
        12px;


    transition:
        transform .22s ease;
}


@media
(hover:hover) {

    .leo-achado-link:hover
    .leo-achado-img {

        transform:
            scale(1.012);
    }
}


/* ==========================================================
   SETAS
   ========================================================== */

.leo-achados-arrow {

    position:
        absolute;


    top:
        calc(50% - 36px);


    z-index:
        20;


    width:
        36px;


    height:
        36px;


    margin:
        0;


    padding:
        0;


    border:
        0;


    border-radius:
        10px;


    background:
        #e7e9eb;


    color:
        #303030;


    display:
        flex;


    align-items:
        center;


    justify-content:
        center;


    cursor:
        pointer;


    box-shadow:
        none;
}


.leo-achados-arrow
span {

    display:
        block;


    margin-top:
        -3px;


    font-size:
        30px;


    font-weight:
        300;


    line-height:
        1;
}


.leo-achados-prev {

    left:
        -48px;
}


.leo-achados-next {

    right:
        -48px;
}


/* ==========================================================
   BOLINHAS
   ========================================================== */

.leo-achados-pagination {

    position:
        absolute;


    left:
        50%;


    bottom:
        5px;


    transform:
        translateX(-50%);


    display:
        flex;


    align-items:
        center;


    justify-content:
        center;


    gap:
        7px;
}


.leo-achados-dot {

    width:
        9px;


    height:
        9px;


    margin:
        0;


    padding:
        0;


    border:
        0;


    border-radius:
        999px;


    background:
        #c5cbd0;


    cursor:
        pointer;
}


.leo-achados-dot.is-active {

    width:
        42px;


    background:
        #FFB800;
}


/* ==========================================================
   NOTEBOOK
   ========================================================== */

@media
(min-width:1000px)
and
(max-width:1199px) {

    .leo-achados-carousel {

        --leo-achados-visible:
            4;


        --leo-achados-gap:
            18px;


        width:
            calc(
                100% - 90px
            );
    }


    .leo-achados-prev {

        left:
            -40px;
    }


    .leo-achados-next {

        right:
            -40px;
    }
}


/* ==========================================================
   TABLET
   ========================================================== */

@media
(min-width:690px)
and
(max-width:999px) {

    .leo-achados-title
    .elementor-heading-title {

        font-size:
            24px !important;
    }


    .leo-achados-carousel {

        --leo-achados-visible:
            2;


        --leo-achados-gap:
            18px;


        width:
            calc(
                100% - 70px
            );


        margin-top:
            14px;
    }


    .leo-achados-prev {

        left:
            -34px;
    }


    .leo-achados-next {

        right:
            -34px;
    }
}


/* ==========================================================
   CELULAR
   ========================================================== */

@media
(max-width:689px) {


    /* -------------------------------------------------------
       TÍTULO DOS ACHADOS
       ------------------------------------------------------- */

    .leo-achados-title {

        position:
            relative;


        left:
            50%;


        transform:
            translateX(-50%);


        width:
            min(
                430px,
                calc(100vw - 20px)
            )
            !important;


        max-width:
            none !important;


        margin:
            0 !important;


        padding:
            0 8px !important;


        box-sizing:
            border-box;
    }


    .leo-achados-title
    .elementor-widget-container {

        margin:
            0 !important;


        padding:
            0 !important;
    }


    .leo-achados-title
    .elementor-heading-title {

        margin:
            0 !important;


        padding:
            0 !important;


        /*
         * Próximo ao padrão da referência.
         */

        font-size:
            20px !important;


        font-weight:
            700 !important;


        line-height:
            1.12 !important;


        letter-spacing:
            -0.25px !important;


        text-align:
            center !important;
    }


    /* -------------------------------------------------------
       CARROSSEL MOBILE
       ------------------------------------------------------- */

    .leo-achados-carousel {

        /*
         * PRINCIPAL ALTERAÇÃO:
         *
         * 2 cards visíveis.
         */

        --leo-achados-visible:
            2;


        --leo-achados-gap:
            10px;


        position:
            relative;


        /*
         * Usa praticamente a largura
         * total do aparelho.
         */

        width:
            min(
                430px,
                calc(100vw - 18px)
            )
            !important;


        max-width:
            none !important;


        left:
            50%;


        transform:
            translateX(-50%);


        /*
         * Bem próximo do título.
         */

        margin:
            14px 0 0 !important;


        padding:
            0 0 38px !important;


        box-sizing:
            border-box;
    }


    /* -------------------------------------------------------
       TRILHO
       ------------------------------------------------------- */

    .leo-achados-track {

        width:
            100%;


        gap:
            var(
                --leo-achados-gap
            );
    }


    /* -------------------------------------------------------
       CARD
       ------------------------------------------------------- */

    .leo-achado-card {

        /*
         * Exatamente 2 por tela.
         */

        flex:
            0 0
            calc(
                (
                    100%
                    -
                    var(
                        --leo-achados-gap
                    )
                )
                /
                2
            );


        width:
            auto;


        min-width:
            0;


        margin:
            0;


        padding:
            0;


        box-sizing:
            border-box;


        scroll-snap-align:
            start;
    }


    /* -------------------------------------------------------
       FORMATO VERTICAL
       ------------------------------------------------------- */

    .leo-achado-link {

        width:
            100%;


        /*
         * Mesma proporção visual
         * usada no desktop.
         */

        aspect-ratio:
            3 / 5;


        border-radius:
            10px;
    }


    .leo-achado-img {

        width:
            100% !important;


        height:
            100% !important;


        object-fit:
            cover !important;


        object-position:
            center center !important;


        border-radius:
            10px !important;
    }


    /* -------------------------------------------------------
       MOBILE LIMPO:
       SEM SETAS COBRINDO OS CARDS
       ------------------------------------------------------- */

    .leo-achados-arrow {

        display:
            none !important;
    }


    /* -------------------------------------------------------
       BOLINHAS
       ------------------------------------------------------- */

    .leo-achados-pagination {

        bottom:
            5px;


        gap:
            6px;
    }


    .leo-achados-dot {

        width:
            8px;


        height:
            8px;
    }


    .leo-achados-dot.is-active {

        width:
            32px;
    }
}


/* ==========================================================
   CELULARES BEM ESTREITOS
   ========================================================== */

@media
(max-width:359px) {

    .leo-achados-title
    .elementor-heading-title {

        font-size:
            18px !important;
    }


    .leo-achados-carousel {

        --leo-achados-gap:
            8px;


        width:
            calc(
                100vw - 14px
            )
            !important;
    }
}