/* Estilo automático para a página: como-funciona */
#cabecalho{
    min-height: 500px !important;
    padding: 120px 0px 0px;

    .migalhas{
        justify-content: flex-start !important;
    }

    .subtitulo-cabecalho {
        color: #F5F3F0;
        font-size: 16px;
        font-weight: 500;
        line-height: 160%;
    }
    .atualizacao {
        color: #C8C8C8;
        font-size: 14px;
        font-weight: 400;
    }
    h1{
        margin-bottom: 24px;
    }
}


#base-section-braco{
    padding: 60px 0;
    background: var(--branco);

    .img-box {
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 24px;
    }

    h2{
        color: var(--preto);
    }
    .text {
        color: var(--preto);
        font-size: 16px;
        font-weight: 400;
        line-height: 160%;
    }   
}

#vantagens{
    padding: 80px 0;

    h2{
        color: var(--branco);
    }

    .card-vantagens {
        border-radius: 16px;
        background: var(--preto);
        padding: 24px;
        min-height: 210px;

        .numero {
            color: var(--amarelo);
            font-size: 40px;
            font-weight: 700;
            line-height: 120%;
            margin-bottom: 8px;
        }

        .titulo {
            color: var(--branco);
            font-size: 18px;
            font-weight: 600;
            line-height: 120%;
            margin-bottom: 8px;
        }
        .texto {
            color: #C6C0B8;
            font-size: 16px;
            font-weight: 400;
            line-height: 160%;
        }
        .text-aviso{
            color: var(--branco);
            font-size: 16px;
            font-weight: 500;
            line-height: 160%; 
        }
    }
}

#fluxo{
    padding: 80px 0;
    background-color: var(--branco);
    
    .alinhar-centro{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    h2{
        color: var(--preto);
    }

    .card-fluxo {
        padding: 24px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border-radius: 16px;
        border: 1px solid rgba(198, 192, 184, 0.25);
        background: #F5F3F0;
        box-shadow: 4px 4px 6px 0 rgba(74, 74, 74, 0.12);

        img{
            width: 24px;
            height: 24px;
            object-fit: contain;
        }

        .titulo {
            color: var(--preto);
            font-size: 16px;
            font-weight: 500;
            line-height: 120%;
            margin: 8px 0;
        }
        .texto{
            color: #4A4A4A;
            font-size: 16px;
            font-weight: 400;
            line-height: 160%;
            margin: 0;
            min-height: 80px;
        }
    }

    
    .swiper-wrapper {
        transition-timing-function: linear !important;
        will-change: transform;
    }

    .swiper-pagination-bullet {
        border-radius: 80px;
        background: #C6C0B8;
        width: 30px;
        opacity: 1;
        height: 5px;
    }
    .swiper-pagination-bullet-active {
        background: var(--amarelo);
    }
    
}

#base-section-preto{
    padding: 60px 0;
    background: var(--preto);

    .img-box {
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 24px;
    }

    h2{
        color: var(--branco);
    }
    .text {
        color: var(--branco);
        font-size: 16px;
        font-weight: 400;
        line-height: 160%;
    }   
}


#video{
    padding: 80px 0;
    background-color: var(--branco);
    text-align: center;
    
    .alinhar-centro{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .text{
        color: var(--cinza);
        text-align: center;
        font-size: 18px;
        font-weight: 500;
        line-height: 160%; 
    }

    h2{
        color: var(--preto);

        span{
            color: var(--amarelo);
        }
    }

    .box-play {
        height: 480px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 24px;
        margin-top: 24px;
    }

    .swiper-button-next {
        right: -30px;
        width: 58px;

        .esfera {
            border-radius: 80px;
            opacity: 0.75;
            background: #121212;
            width: 58px;
            height: 58px;
            display: flex;
            align-content: center;
            justify-content: center;
            align-items: center;
        }
    }
    .swiper-button-prev {
        left: -30px;
        width: 58px;

        .esfera {
            border-radius: 80px;
            opacity: 0.75;
            background: #121212;
            width: 58px;
            height: 58px;
            display: flex;
            align-content: center;
            justify-content: center;
            align-items: center;
        }
    }
    
    .passadores {
        position: relative;
        top: -230px;

        .swiper-button-next::after,
        .swiper-button-prev::after {
            content: none;
        }

        .swiper-button-disabled {
            opacity: 0.35;
            pointer-events: none;
            cursor: default;
        }
    }

}

#faq{
    background-color: #FFF8EE;
    padding: 80px 0;

    .alinhar-centro{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .text{
        color: var(--cinza);
        text-align: center;
        font-size: 18px;
        font-weight: 500;
        line-height: 160%; 
        margin: 0;
    }

    h2{
        color: var(--preto);

        span{
            color: var(--amarelo);
        }
    }

    
    .box-accordion {
        background-color: #1B1B1A;
        border: none;
        border-radius: 20px;
        padding: 30px;
    }
    .content-accordion {
        padding-top: 24px;
    }
    .box-accordion>a{
        font-weight: 600;
        font-size: 20px;
        color: var(--branco);
        background-color: transparent;
        padding: 0;
        border-bottom: none;
        transition: color 300ms ease-in-out;
    }
    .box-accordion>a.active {
        color: var(--amarelo);
    }
    .box-accordion>a:after {
        content: '';
        flex-shrink: 0;
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url('../img/close.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin-left: 16px;
        transition: transform 300ms ease-in-out;
    }
    .box-accordion>a.active:after {
        transform: rotate(90deg);
    }

    .box-accordion .content-accordion p {
        color: rgba(245, 243, 240, 0.80);
        font-size: 16px;
        font-weight: 400;
        line-height: 160%;
        margin: 0;
    }

}


/* TABLET */
@media (min-width: 768px) and (max-width: 1024px) {
    #base-section-braco {
        .img-box {
            height: 350px;
            margin-bottom: 30px;
        }
    }
    #base-section-preto {
        .img-box {
            height: 350px;
            margin-bottom: 30px;
        }
    }
}

/* MOBILE */
@media all and (max-width: 767px) { 
  
    #base-section-braco {
        .img-box {
            height: 300px;
            margin-bottom: 30px;
        }
    }
    #base-section-preto {
        .img-box {
            height: 300px;
            margin-bottom: 30px;
        }
    }

}