.ceder-doc-carousel {
    --ceder-gap: 28px;
    --ceder-card-bg: #F5F6EF;
    --ceder-title: #58B326;
    --ceder-button: #58B326;

    position: relative;
    width: 100%;

    padding:
        10px
        44px
        34px;

    box-sizing: border-box;
}


.ceder-doc-carousel * {
    box-sizing: border-box;
}


/* VIEWPORT */

.ceder-doc-carousel__viewport {

    width: 100%;

    overflow: hidden;

}


/* TRACK */

.ceder-doc-carousel__track {

    display: flex;

    gap: var(--ceder-gap);

    align-items: stretch;

    transition:
        transform
        .42s
        ease;

    will-change:
        transform;

}


/* TARJETA */

.ceder-doc-card {

    flex:
        0 0
        calc(
            (
                100%
                -
                (
                    var(--ceder-gap)
                    *
                    3
                )
            )
            /
            4
        );

    min-width: 0;

    background:
        var(--ceder-card-bg);

    border-radius:
        12px;

    padding:
        26px
        18px
        24px;

    text-align:
        center;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    box-shadow:
        0
        8px
        22px
        rgba(
            0,
            0,
            0,
            .07
        );

}


/* TITULO */

.ceder-doc-card__title {

    width:
        100%;

    margin:
        0
        0
        16px
        !important;

    padding:
        0
        !important;

    color:
        var(--ceder-title)
        !important;

    font-size:
        20px
        !important;

    line-height:
        1.2
        !important;

    font-weight:
        800
        !important;

    text-transform:
        uppercase;

}


/* IMAGEN */

.ceder-doc-card__image-wrap {

    width:
        100%;

    aspect-ratio:
        3 / 4;

    background:
        #ffffff;

    border-radius:
        10px;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        22px;

    box-shadow:
        0
        3px
        10px
        rgba(
            0,
            0,
            0,
            .05
        );

}


.ceder-doc-card__image-wrap--empty {

    color:
        #999999;

    font-weight:
        700;

}


.ceder-doc-card__image {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    display:
        block;

    background:
        #ffffff;

}


/* BOTON */

.ceder-doc-card__button {

    margin-top:
        auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        46px;

    padding:
        11px
        17px;

    border-radius:
        5px;

    background:
        var(--ceder-button);

    color:
        #ffffff
        !important;

    text-decoration:
        none
        !important;

    font-weight:
        800;

    font-size:
        17px;

    line-height:
        1;

    transition:
        transform
        .2s
        ease,
        filter
        .2s
        ease,
        box-shadow
        .2s
        ease;

}


.ceder-doc-card__button:hover {

    transform:
        translateY(
            -2px
        );

    filter:
        brightness(
            .9
        );

    box-shadow:
        0
        5px
        12px
        rgba(
            0,
            0,
            0,
            .12
        );

}


.ceder-doc-card__download {

    font-size:
        22px;

    line-height:
        1;

}


/* FLECHAS */

.ceder-doc-carousel__arrow {

    position:
        absolute;

    top:
        48%;

    transform:
        translateY(
            -50%
        );

    z-index:
        8;

    width:
        38px;

    height:
        38px;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        var(--ceder-button);

    box-shadow:
        0
        3px
        12px
        rgba(
            0,
            0,
            0,
            .14
        );

    font-size:
        31px;

    line-height:
        34px;

    cursor:
        pointer;

}


.ceder-doc-carousel__arrow:hover {

    background:
        var(--ceder-button);

    color:
        #ffffff;

}


.ceder-doc-carousel__arrow:disabled {

    opacity:
        .3;

    cursor:
        default;

}


.ceder-doc-carousel__arrow--prev {

    left:
        0;

}


.ceder-doc-carousel__arrow--next {

    right:
        0;

}


/* DOTS */

.ceder-doc-carousel__dots {

    display:
        flex;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        20px;

}


.ceder-doc-carousel__dot {

    width:
        9px;

    height:
        9px;

    border:
        0;

    border-radius:
        50%;

    padding:
        0;

    background:
        #d6d6d6;

    cursor:
        pointer;

}


.ceder-doc-carousel__dot.is-active {

    background:
        var(--ceder-button);

    transform:
        scale(
            1.16
        );

}


/* TABLET */

@media (
    max-width:
    980px
) {

    .ceder-doc-carousel {

        padding-left:
            38px;

        padding-right:
            38px;

    }


    .ceder-doc-card {

        flex-basis:
            calc(
                (
                    100%
                    -
                    var(--ceder-gap)
                )
                /
                2
            );

    }

}


/* MOVIL */

@media (
    max-width:
    767px
) {

    .ceder-doc-carousel {

        padding-left:
            34px;

        padding-right:
            34px;

    }


    .ceder-doc-card {

        flex-basis:
            100%;

        padding:
            22px
            15px;

    }


    .ceder-doc-card__title {

        font-size:
            18px
            !important;

    }


    .ceder-doc-card__button {

        font-size:
            16px;

    }


    .ceder-doc-carousel__arrow {

        width:
            32px;

        height:
            32px;

        font-size:
            26px;

        line-height:
            29px;

    }

}