.banner-pagina-conteudo-texto {
    max-width: 410px;
}

.banner-pagina-conteudo-texto::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    background-image: url('img/bg-crediupf-sm.png');
    background-repeat: no-repeat;
    background-size: contain;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(2);
    transition: all 200ms ease;
}

.card-apresentacao {
    display: grid;
    grid-template-columns: 73px auto;
}

.card-apresentacao-numero {
    width: 73px;
    height: 80px;
}
.card-apresentacao-numero-path {
    background: #E6E6E6;
    clip-path: polygon( 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%, 50% 0% );
    width: 100%;
    height: 100%;
}

.secao-apresentacao-cards > div:not(:last-child) .card-apresentacao .card-apresentacao-numero::before {
    content: "";
    height: 300%;
    width: 2px;
    background: #E6E6E6;
    position: absolute;
    top: 70px;
}

.secao-apresentacao-cards > div:last-child .card-apresentacao .card-apresentacao-numero::before {
    content: "";
    height: 100%;
    width: 2px;
    background: #fff;
    position: absolute;
    top: 70px;
}

.img-diferenciais {
    aspect-ratio: 280/355;
    width: 100%;
    height: 100%;
}

.banner-tools {
    --swiper-pagination-color: var(--bs-light);
    --swiper-pagination-bullet-inactive-color: rgba(var(--bs-dark-rgb),0.5);
    max-width: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    padding: 0 1rem;
    bottom: 0;
}

    .banner-tools > * {
        position: relative !important;
        top: unset !important;
        left: unset !important;
        right: unset !important;
        margin-top: unset !important;
        bottom: unset !important;
    }

.navigation-arrow {
    --navigation-size: 45px;
    --swiper-navigation-size: 1.4rem;
    --swiper-navigation-color: var(--bs-btn-color);
    width: var(--navigation-size) !important;
    height: var(--navigation-size) !important;
}
    .navigation-arrow .swiper-navigation-icon {
       height: 24px
    }


.accordion-infos .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: rgb(var(--bs-white-rgb));
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-active-color: rgb(var(--bs-white-rgb));
    --bs-accordion-active-bg: transparent;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-btn-color: rgb(var(--bs-white-rgb))
}

.accordion-infos .accordion-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0
}

.accordion-infos .accordion-button {
    justify-content: space-between
}

    .accordion-infos .accordion-button::after {
        filter: brightness(0) invert(1);
    }

.accordion-button:not(.collapsed) {
    box-shadow: none
}

.barra-fixa {
    background: #FAFFD8;
    z-index: 1031;
    transition: all 300ms ease;
}

.barra-fixa.scrolled {
    transform: translateY(105%)
}

.modal-simulacao {
    --bs-modal-bg: transparent;
}

.box-simulacao {
    max-width: 500px
}

.box-simulacao .btn-verde{
    --bs-btn-color: #fff
}
    .box-simulacao .btn-outline-verde {
        --bs-btn-color: rgb(var(--upf-cor-verde))
    }

.loader-resultado {
    display: block;
    animation: girar 1s linear infinite;
    width: fit-content
}

.trilha-etapa-numero {
    border: 1px solid #BFBFBF;
    color: #BFBFBF;
    width: 24px;
    height: 24px;
    border-radius: 24px;
    transition: all 200ms ease;
}

.trilha-etapa-item.active .trilha-etapa-numero,
.trilha-etapa-item.concluido .trilha-etapa-numero {
    border: 1px solid rgb(var(--upf-cor-verde));
    background: rgb(var(--upf-cor-verde));
    color: #fff;
}

.trilha-etapa-item.active .trilha-etapa-nome {
    font-weight: 700;
}

.trilha-etapa-nome {
    transition: all 200ms ease;
}

.modal-simulacao .banner-pagina-conteudo-texto::before {
    background-image: url('img/bg-modal.png');
    transform: translateX(-80%) translateY(-70%) scale(2.5) !important
}

@keyframes girar {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.loader-resultado span {
    width: 64px;
    height: 32px;
    display: block;
}

.loader-resultado .loader-1 {
    background: #F7A600
}
.loader-resultado .loader-2 {
    background: #B1C70C
}

@media screen and (min-width: 464px) {
    .banner-pagina-conteudo-texto::before {
        transform: translateX(-10%) translateY(-50%) scale(2.4);
    }
}

@media screen and (min-width: 768px) {
    .banner-pagina-conteudo-texto::before {
        background-image: url('img/bg-crediupf.png');
        transform: translateX(-50%) translateY(-30%) scale(1.8);
    }
}

@media screen and (min-width: 992px){
    .banner-pagina-conteudo-texto::before {
        transform: translateX(-50%) translateY(-40%) scale(2.1);
    }

    .secao-apresentacao {
        background-image: url(img/bg-apresentacao.png);
        background-repeat: no-repeat;
        background-position: top;
        background-size: contain;
    }

    .card-apresentacao {
        grid-template-columns: 1fr;
        grid-template-rows: 144px auto;
        justify-items: center;
        max-width: 270px;
        margin: 0 auto
    }

    .card-apresentacao-numero {
        width: 126px;
        height: 140px;
    }

    .secao-apresentacao-cards > div:not(:last-child) .card-apresentacao .card-apresentacao-numero::before {
        height: 2px;
        width: 200%;
        top: 70px;
        left: calc(50% + 20px);
    }

    .img-diferenciais {
        aspect-ratio: 1/1;
        
    }

    .secao-depoimentos .banner-tools {
        left: unset;
        right: calc(100% + 1rem);
        transform: translateX(0) translateY(-6rem);
        justify-content: flex-start
    }

}
@media screen and (min-width: 1200px){
    .banner-pagina-conteudo-texto::before {
        transform: translateX(-50%) translateY(-30%) scale(2.3);
    }
}
@media screen and (min-width: 1400px){
    .banner-pagina-conteudo-texto::before {
        transform: translateX(-50%) translateY(0%) scale(2.5);
    }
}
@media screen and (min-width: 1600px){
    .banner-pagina-conteudo-texto::before {
        transform: translateX(-50%) translateY(-15%) scale(2.5);
    }
}