.funcion{
    width: 100%;
    background-color: var(--color-white-02);
    padding-bottom: 32px;
}

.filter .content-filter{
    width: 100%;
    margin-top: 40px;
}

.content-filter #txt-movil{
    font-size: 0.8rem;
    color: var(--color-primary);
    display: none;
}

#txt-movil svg{
    width: 15px;
    height: 15px;
    filter: invert(10%) sepia(57%) saturate(6314%) hue-rotate(218deg) brightness(112%) contrast(97%);
}

.content-filter .buttons-filter{
    width: 100%;
    height: 45px;
    display: flex;
    gap: 0 8px;
    margin-top: 20px;
}

.buttons-filter .btn-filter{
    padding: 0 20px !important;
    border-radius: 10px 10px 0 0 !important;
    border: none !important;
    height: 100% !important;
    background-color: var(--color-grey-0) !important;
    width: auto !important;
    color: black !important;
}

.buttons-filter .active{
    background-color: var(--color-white-01) !important;
    font-weight: 800;
}

.content-filter .content-info-filter{
    width: 100%;
    min-height: 360px;
    padding: 16px 10px;
    background-color: var(--color-white-01);
}

.content-info-filter .data-filter{
    width: 100%;
    display: flex;
    align-items: center;
}

.content-info-filter .img-filter{
    width: 29%;
    height: 380px;
    object-fit: cover;
    border-radius: 10px;
}

.content-info-filter .content-text-filter{
    width: 71%;
    padding: 16px 20px;
    text-align: start;
}

.content-text-filter .btn-open-modal{
    border-radius: 8px;
    border: none;
    padding: 10px 16px;
    color: var(--color-white-01);
    background: var(--color-secondary);
}

.btn-open-modal .icon-btn{
    margin-left: 5px;
    width: 21px;
    height: 21px;
}

.content-text-filter .title-text-filter{
    font-weight: 700;
}

.descripcion ul li{
    list-style: initial;
}

.modal-dialog{
    width: 60% !important;
    max-width: 100% !important;
}

.modal-dialog .modal-content{
    height: 544px;
    padding: 32px !important;
    border-radius: 16px 16px !important;
    position: relative;
}

.modal-content .modal-data{
    width: 100%;
    height: 479px;
    overflow-y: scroll;
    margin-top: 20px;
}


.modal-content .content-btn{
    width: 100%;
    position: absolute;
    top: 15px;
    left: -25px;
    display: flex;
    justify-content: flex-end;
}

@media screen and (max-width: 1024px) {

    .content-info-filter .data-filter{
        flex-flow: column;
        justify-content: center;
    }

    .content-info-filter .img-filter{
        width: 100%;
    }
    
    .content-info-filter .content-text-filter{
        width: 100%;
    }
}

@media screen and (max-width: 767px) {

    .content-info-filter .img-filter{
        height: 255px;
    }

    .modal-dialog{
        width: 96% !important;
    }

    .content-filter .buttons-filter{
        overflow-x: auto;
    }
    
    .content-filter .buttons-filter::-webkit-scrollbar {
        background-color: #E8EDF6;
        border-radius: 20px;
        width: 10px;
        height: 5px;
    }
    
    .content-filter .buttons-filter::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #04399F;
        width: 20px;
    }

    .filter .content-filter{
        margin-top: 20px;
    }
    
    .content-filter #txt-movil{
        display: block;
    }
}