/* Estilo automático para a página: home */

#banner {

    .myBanner{
        .swiper-pagination-bullet{
            background: var(--branco) !important;
            opacity: 1;    
        }
        .swiper-pagination-bullet-active {
            width: 30px;
            border-radius: 5px;
            background: var(--azul-claro) !important;
            opacity: 1;
        } 
    }

    .swiper-banner {
        position: relative;
        height: 700px;
        overflow: hidden;

    }

    .img-banner {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    .banner-overlay {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 80%;
        background: linear-gradient(0deg, rgba(213, 213, 213, 0.80) 0%, rgba(255, 255, 255, 0.00) 100%);
        z-index: 1;
        pointer-events: none;
    }

    .container {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 40%;
        z-index: 2;
    }

    .estagio {
        background-color: var(--azul-claro, #2ABEFF);
        color: #FFF;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 600;
        line-height: 20px;
        padding: 9px 30px;
        width: fit-content;
        clip-path: polygon(6% 0%, 94% 0%, 100% 100%, 0% 100%);
    }

    h1 {
        color: var(--azul-esucro, #133249);
        font-size: 40px;
        font-weight: 600;
        line-height: 100%;
        margin: 23px 0;
    }

    .list-diferenciasi {
        display: flex;
        flex-wrap: wrap;

        .item-diferencial {
            display: flex;
            margin-right: 28px;
            position: relative;
            margin-bottom: 10px;

            img{
                margin-right: 36px;
            }

            &::after{
                background-color: var(--azul-esucro);
                background-size: auto;
                display: inline-block;
                width: 20px;
                height: 2px;
                content: "";
                top: 10px;
                left: 31px;
                position: absolute;
                z-index: -1;
            }
        }
    }

    .link-padrao {
        display: flex;
        align-items: center;
        color: var(--azul-esucro, #133249);
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        line-height: 20px;
        text-transform: uppercase;

        img{
            margin-left: 8px;
        }
    }

    .container-base{
            position: relative;
            margin-top: -150px;
            z-index: 10;

        .contagem {
            color: var(--azul-esucro, #133249);
            font-size: 28px;
            font-weight: 700;
            line-height: 20px;
            margin-bottom: 16px;

            span{
                color: var(--azul-claro, #2ABEFF);
            }

            .numero-contagem {
                color: var(--azul-esucro);
            }
        }

        .text-contagem {
            color: var(--azul-esucro, #133249);
            font-size: 20px;
            font-weight: 500;
            line-height: 20px;
            text-transform: uppercase;
        }
    }
}

#sobre{
    padding: 100px 0 70px;

    .ocultar-vazamento{
        overflow: hidden;

        .img-conheca {
            width: 100%;
            min-height: 100%;
            object-fit: cover;
        }
    
        .titulo {
            display: flex;
            align-items: center;
            color: var(--azul-esucro);
            font-size: 16px;
            font-weight: 600;
            text-transform: uppercase;
            margin-bottom: 24px;
    
            img{
                margin-right: 10px;
            }
        }
    
        h2{
            margin-bottom: 30px;
        }
    
        .text-dest-conheca {
            color: var(--preto);
            font-size: 16px;
            font-weight: 500;
            line-height: 42px;
        }
        .text-conheca {
            color: var(--preto);
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            margin-bottom: 34px;
        }
    
        ul{
            li {
                display: flex;
                color: var(--azul-esucro, #133249);
                font-size: 18px;
                font-weight: 500;
                margin-bottom: 44px;
                align-items: flex-start;

                img{
                    margin-right: 8px;
                }
            }
        }
    
        .btn-link-padrao {
            color: var(--azul-esucro, #133249);
            font-size: 18px;
            font-weight: 600;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            margin-bottom: 40px;
    
            img{
                margin-left: 8px;
            }
        }
    
        .box-sobre {
            background: var(--azul-esucro, #133249);
            padding: 21px 0;
            position: relative;
    
            &::before{
                background-color: #133249;
                background-size: auto;
                display: inline-block;
                width: 152px;
                height: 100%;
                content: "";
                top: 0;
                left: -151px;
                position: absolute;
                z-index: 0;
                clip-path: polygon(30% 0, 100% 0, 100% 100%, 49% 100%, 0 100%);
            }
    
            &::after{
                background-color: #133249;
                background-size: auto;
                display: inline-block;
                width: 100%;
                height: 100%;
                content: "";
                top: 0;
                right: -30%;
                position: absolute;
                z-index: -1;
            }
    
            .card-sobre {
                text-align: center;
    
                .valor {
                    color: #FFF;
                    font-size: 24px;
                    font-weight: 600;
                    margin-bottom: 10px;
                    span{
                        color: #2ABEFF;
                    }
                    .numero-contagem{
                        color: var(--branco);
                    }
                }
    
                .item {
                    color: #FFF;
                    text-align: center;
                    font-size: 16px;
                    font-weight: 500;
                    text-transform: uppercase;
                }
            }
    
        }
    }

}

#empreendimentos{

    padding: 40px 0 80px;
    overflow: hidden;


    .titulo {
        display: flex; 
        align-items: center;
        color: var(--azul-esucro);
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 16px;
        justify-content: flex-start;

        img{
            margin-right: 10px;
        }
    }

    h2{
        margin-bottom: 30px;
    }
    .text-dest-emp {
        color: var(--preto);
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 20px;

    }
    .text-emp {
        color: var(--preto);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 34px;
    }

    .card-emp{
        .moldura{
            position: relative;
            overflow: hidden;
    
            .img-emp{
                min-height: 460px;
                width: 100%;
                position: relative;
                object-fit: cover;
                background-repeat: no-repeat;
                transition: 500ms all ease-in-out;
            }
            .tag {
                color: var(--azul-esucro, #133249);
                text-align: center;
                font-size: 16px;
                font-weight: 600;
                line-height: 20px;
                width: max-content;
                padding: 10px 30px;
                background-color: #fff;
                position: absolute;
                top: 0;
                right: -1px;
                clip-path: polygon(5% 0%, 100% 0, 100% 100%, 0% 100%);
            }
        
            .nome-emp {
                clip-path: polygon(0 0, 90% 1%, 100% 100%, 0% 100%);
                color: var(--branco);
                text-align: center;
                font-size: 16px;
                font-weight: 600;
                line-height: 20px;
                width: max-content;
                padding: 10px 30px;
                background-color: var(--azul-claro);
                position: absolute;
                bottom: 0;
                left: -1px;
            }
        }
        .box-info-emp {
            display: flex;
            justify-content: space-between;
            border: 1px solid var(--cinza, #D5D5D5);
            padding: 16px;
        }
        .item-emp {
            display: flex;
            align-items: center;
            color: var(--azul-esucro, #133249);
            font-size: 16px;
            font-weight: 600;
            line-height: 20px;
    
            img{
                margin-right: 8px;
            }
        }

        &:hover{
            .moldura{
                .img-emp{
                    scale: 1.05;
                }
            }
        }

    }

    .swiper-pagination {
        position: relative;
        left: 0;
        float: left;
        display: flex;
        margin-bottom: 30px;
    }
    
    .swiper-pagination-bullet{
        background: var(--cinza) !important;
        opacity: 1;    
    }
    .swiper-pagination-bullet-active {
        width: 30px;
        border-radius: 5px;
        background: var(--azul-claro) !important;
        opacity: 1;
    } 

    .div-visualizacao{
        margin-right: calc(100% - 56vw);
        overflow: hidden;
        
        .swiper-horizontal {
            width: 100%;
        }
    }

}

#investimentos{
    background: var(--degrade-2, linear-gradient(274deg, rgba(42, 190, 255, 0.20) 12.66%, rgba(42, 190, 255, 0.00) 77.2%));
    padding: 50px 0 0 0;

    
    .titulo {
        display: flex; 
        align-items: center;
        color: var(--azul-esucro);
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 16px;
        justify-content: flex-start;

        img{
            margin-right: 10px;
        }
    }

    h2{
        margin-bottom: 30px;
    }
    .text-dest-invest {
        color: var(--preto);
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 20px;

    }
    .text-invest {
        color: var(--preto);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 34px;
    }

    .img-investimentos{
        width: 100%;
        object-fit: contain;
    }
}




/* TABLET */
@media (min-width: 768px) and (max-width: 1024px) {
   #empreendimentos {
        .div-visualizacao {
            margin: 20px 0;
        }
    } 

    #sobre {
        padding: 30px 0;

        .ocultar-vazamento {


            .img-conheca {
                width: 100%;
                height: 430px;
                object-fit: cover;
                margin: 30px 0 -40px;
            }

            .box-sobre {
                &:before {
                    clip-path: polygon(100% -1%, 100% 0%, 100% 100%, 20% 110%, 80% 100%);
                }
            }
        }
    }
}


/* MOBILE */
@media all and (max-width: 767px) { 
    #investimentos{
        text-align: center;
        
        .titulo {
            justify-content: center;
        }
    }
    #empreendimentos {
         .div-visualizacao {
             margin: 20px 0;
         }
    } 

    #banner {
        .banner-overlay {
            height: 100%;
            background: linear-gradient(90deg, rgba(213, 213, 213, 0.80) 0%, rgba(255, 255, 255, 0.00) 100%);
        }
    }

    #sobre {
        padding: 30px 0;

        .ocultar-vazamento {

            .img-oculta {
                width: 100%;
                min-height: 290px;
                object-fit: cover;
            }
            .box-sobre {
                &:before {
                    clip-path: polygon(100% -1%, 100% 0%, 100% 100%, 20% 110%, 80% 100%);
                }
            }
            ul {
                li {
                    margin-bottom: 24px;
                }
            }
        }
    }

}