@import url('https://fonts.googleapis.com/css2?family=Expletus+Sans:wght@500&family=Montserrat&family=Chakra+Petch:wght@400;500;600;700&display=swap');


*{
    margin: 0;
    padding: 0;
    font-size: 1em;
    border: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-decoration: none;
    max-width: 100%;
    line-height: 1.4em;
    font-family: 'Montserrat', sans-serif;
    color: var(--tituloBranco);
    list-style: none;
    list-style-position: inside;
}

body, html{
    overflow-x: clip;
    position:relative;
    scroll-behavior: smooth;
    /* overflow-x: hidden; */
}
body::after{
    content: '';
    display: block;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00131D;
    background-image: url('../img/globe.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
:root{
    --HeaderFooter: linear-gradient(45deg, #00131D, #002132);
    --tituloBranco: #ebebeb;
    --banner: #001723;
    --CarmesimColor: #dc143c;
    --shadow: #002e47 /*#003F61*/;
     --Blue: #00A7FF; /*#007DFF; */
    --Pd_Section_vertical: 7em;
    --radius-border: .5em;
    --radiu-border-1: 1em;
}
::-webkit-scrollbar{
    background-color: var(--tituloBranco);
    width: .35em;
}
::-webkit-scrollbar-track{
    background-color: var(--tituloBranco);
}
::-webkit-scrollbar-thumb{
    border-radius: .35em;
    background-color: var(--CarmesimColor);
}

[data-animacao]{
    opacity: 0;
    transition: var(--i, 300ms) linear;
}
[data-animacao="left"]{
    transform: translate3d(-7em,0, 0);
}
[data-animacao="right"]{
    transform: translate3d(7em,0, 0);
}
[data-animacao="right"].animated, [data-animacao="left"].animated{
    will-change: transform, opacity;
    opacity: 1;
    transform: translate3d(0,0,0);
}
[data-animacao='flip-right']{
    transform: rotateY(45deg);
}
[data-animacao='flip-right'].animated{
    transform: rotateY(0);
    opacity: 1;
}
/*******************************CLASSES GERAIS************************************************************/
img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}
.clip-path{
    position: relative;
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 90% 100%, 0% 100%, 0% 50%);
}
.clip-path::before{
    content: '';
    position: absolute;
    border-radius: var(--radius-border);
    inset: .1em;
    z-index: -1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 90% 100%, 0% 100%, 0% 50%);
    background-color: var(--BG-clip-Path, var(--shadow));
}
.pd-section-default{
    padding: var(--Pd_Section_vertical) 1em;
}
.tamanho_conteiner_global{
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}
.relative{
    position: relative;
}
.overflow-hidden{
    overflow: hidden;
}
.index_1 > *{
    z-index: 1;
}

/*****************************PADDINGS PADROES PARA CARDS********************************************/
.pd-0_1{
    padding: 0.1em 1em;
}
.pd-1_1{
    padding: 1em;
}
.pd-1_1_2{
    padding: 1em 1em 2em;
}
.pd-2-1-7{
    padding: 2em 1em 7em;
}
/*********************************FLEX, GRID E LAYOUT(TAMANHO) PADRÃO************************************************************/
.MX-Width-400{
    width: 100%;
    max-width: 400px;
}
.sticky{
    align-self: flex-start;
    position: sticky;
    top: 2em;
}

.grid{
    width: 100%;
    max-width: 1500px;
    padding: 2em 0;
    display: grid;
    justify-content:var(--GJustifyContent, center);
    align-content: var(--GAlignContent, center);
    margin: 0 auto;
    gap: 2em;
    grid-template-columns: repeat(auto-fit, minmax(0, var(--maxWidthGrid, var(--defaulWidthGrid, 400px))));
}
.flex{
    display: flex;
    justify-content: var(--FJustifyContent, center);
    align-items: var(--FAlignItems, stretch);
    gap: var(--FGap, 1.5em);
    flex-direction: var(--FDirection, row);
    flex-wrap: var(--FWrap, wrap);
    align-content: var(--FAlignContent, inherit);
    width: 100%;
    margin: 0 auto;
}
.flex-reverse-wrap{
    --FWrap: wrap-reverse;
}
.flex-row-reverse{
    --FDirection: row-reverse;
}
.F-normal-wrap{
    --FWrap: wrap;
    --FDirection: row;
}
.item_flex_60p-100p{ /*ocupa 60 partes de 100 partes*/
    flex: 1 1 60%;
    max-width: 700px;
    margin: 0;
}
.stick_conteiner_F40p_100p{
    flex: 1 1 40%;
    max-width: var(--MXWidithImg, 500px);

}
.flex-center{
    --GJustifyContent: center;
    --GAlignContent: center;
    --FAlignItems: center;
}
.flex-AlignItems-stretch{
    --FAlignItems: stretch;
}
.flex-AlignItems-start{
    --FAlignItems: flex-start;
}
.flex-AlignItems-end{
    --FAlignItems: flex-end;
}
.align-self-end{
    align-self: end;
}
.flex.column{
    --FDirection: column;
    --FGap: 1em;
}
.flex-row{
    --FDirection: row;
    --FGap: 0em;
}
.fGap_1{
    --FGap: 1em;
}
.fGap_2{
    --FGap: 2em;
}
.fGap_0{
    --FGap: 0;
}
/***************************IMGS***********************************/
.img_500h{
    max-height: 500px;
    height: 100%;
    border-radius: 1em;
    contain: layout paint;
}
.item_img_flex_40p_100p{
    flex: 1 1 40%;
    max-width: var(--MXWidithImg, 500px);
    max-height: var(--MXHeightImg, auto);
    overflow: hidden;
    contain: layout paint;
}
.img_border{
    border-radius: var(--radiu-border-1);
}
.img_bottom_aligin{
    margin-bottom: calc(-1 * var(--Pd_Section_vertical) - .4em);
}
/*********************************PADRÃO************************************************************/
.button{
    position: relative;
    display: block;
    font-weight: 600;
    width: clamp(200px, 100%, 900px);
    padding: 1.25em 1em;
    margin: 1.5em auto 1em;
    border-radius: .5em;
    transition: color .3s ease-in-out;
    -moz-transition: color .3s ease-in-out;
    -o-transition: color .3s ease-in-out;
    -webkit-transition: color .3s ease-in-out;
    background-color: var(--CarmesimColor);
    color: var(--tituloBranco);
    cursor: pointer;
    outline: none;
}
.button:focus{
    box-shadow: 0 0 2em var(--CarmesimColor);
}
.link{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: .5s linear;
    cursor: url("../img/cursor-Wises-code-criacao-de-sites-para-advogados.svg"), auto;
}
.hide{
    display: none;
}

/*********************************BACKGROUND E OVERLAY PADRÃO************************************************************/
.overlay > *{
    z-index: 1;
    position: relative;
}
.overlay::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000e0;
    pointer-events: none;
}
.BG-Padrao{
    background-color: var(--banner);
}
.BgImage{
    background-color: var(--banner);
    background-image: var(--BgImage);
    background-size: cover;
    background-position: center;
    background-attachment: var(--BgAtt, scroll), local;
    background-repeat: no-repeat;
}
.Bg-section-color{
    background-color: #00131D;
}
.Bg-pergunta-resposta{
    background-color: var(--shadow);
}
.banner-video{
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
lord-icon{
    width: 100%;
    height: 100%;
}
.rotatez{
    transform: rotateZ(var(--Rz, 7deg));
}
.rotatez-variacao_N{
    --Rz: -7deg;
}
/*******************************ANIMATE SCROOL*****************************************************/
.servicos-animate-scrool-conteiner{
    position: relative;
    margin-top: calc(-1 * var(--Pd_Section_vertical));
    padding-bottom: var(--Pd_Section_vertical);
}
.servicos-animate-scrool{
    position: absolute;
    margin-top: -1em;
    z-index: 5;
    top: 0;
    left: -2em;
    min-width: calc(100% + 4em);
    background-color: var(--Blue);
}
.servicos-item-animate-scrool{
    user-select: none;
    min-width: max-content;
    animation: animate-scroll-infinite var(--animate-scroll-infinite-duration, 30s) var(--animate-scroll-infinite-direction, forwards) linear infinite;
    --FGap: 2em;
    --FWrap: nowrap;
}
/****************************************ANIMAÇÃO DE SCROOL***************************************************/
.square-after-decoretion::after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: var(--shadow);
    top: 0;
    left: 0;
    transform: scaleY(0.15);
    transform-origin: top;
    transition: transform .3s ease-out;
}

.square-after-decoretion:hover::after {
    transform: scaleY(1);
}
.anim_circulo_bg:hover::after{
    opacity: 1;
    transform: scale(7, 4.5);
}
.anim_circulo_bg::after{
    content: '';
    position: absolute;
    display: block;
    height: 40%;
    width: 20%;
    top: 100%;
    border-radius: 50%;
    background-color: var(--shadow);
    transform: scale(1);
    transition: opacity .3s ease-in-out, transform .2s ease-in-out;
    opacity: 0;
}
.card_anim_bg.clip-path:hover{
    background-color: var(--CarmesimColor);
}
.card_anim_pendulo:hover{
    animation: queda .5s ease-in forwards;
    -moz-animation: queda .5s ease-in forwards;
    -o-animation: queda .5s ease-in forwards;
    -webkit-animation: queda .5s ease-in forwards;
}
.button_hover_circle::after {
    position: absolute;
    content: '';
    width: 4em;
    height: 100%;
    background-color: var(--Blue);
    top: 0;
    right: -.5em;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    z-index: 0;
    transform: scale(1);
    transform-origin: right;
    transition: transform .5s ease-in-out, border-radius .1s ease-in-out;
}

.button_hover_circle:hover::after {
    transform: scale(15,7);
}
/**********************************LISTAS FLEX ARTICLES PADRÃO*************************************/
.card,
.card_com_descricao_longa,
.card_anim_pendulo {
    /* Adiciona aos cards para isolar mudanças */
    contain: layout style paint;
}

.card_contato.flex{
    --FGap: 0;
    padding: 1em .3em;
    position: relative;
    --FAlignItems: center;
    background-color: var(--CarmesimColor);
    border-radius: var(--radius-border);
}
.card{
    transition: all .3s linear;
    display: block;
    flex: 1 1 var(--FTamMinBasis, 300px);
    max-width: var(--FTamanhoMax, 500px);
    background-color: var(--shadow);
    border-radius: var(--radius-border);
}
.card-video{
    user-select: none;
    border-radius: 1em;
    width: 100%;
    max-width: 500px;
}
.card.clip-path{
    background-color: var(--Blue);
}

.card_conteiner_not_hover {
    contain: layout;
}
.card_conteiner_not_hover:hover > .card_not_hover_anim:not(:hover) {
    filter: blur(.2em);
}

.card_com_descricao_longa{
    position: relative;
    border-radius: var(--radius-border);
    padding: 1em 1em 4em;
    background-color: var(--Blue);
    overflow: hidden;
    flex: 1 1 var(--FTamMinBasis, 400px);
    max-width: var(--FTamanhoMax, 400px);
}
.diferenciais-articles{
    margin-top: -5em;
}

.card_anim_pendulo{
    position: relative;
    border-radius: var(--radius-border);
    transform-origin: top left;
    -webkit-transform-origin: top left;
    -o-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
}

.card_icone{
    width: 4.35em;
    height: 4.35em;
    margin: 0 auto;
}
.card_icone_p{
    height: 2.5em;
    width: 2.5em;
}
.card_numero{
    display: block;
    width: 50px;
    padding: .1em;
    margin: .25em auto; 
    text-align: center;
    border-radius: 100%;
    font-size: 2em;
    background-color: var(--Blue);
}
/****************************HEADER E FOOTER********************************************************/
#header{
    padding: .5em 1.5em;
    overflow: visible;
    width: 100vw;
    background-color: var(--banner);
}
#header-info.flex{
    width: 100%;
    max-width: 1500px;
    --FDirection: row;
    --FJustifyContent: space-between;
}
.tracking-in-contract {
	-webkit-animation: tracking-in-contract .8s cubic-bezier(0.215, 0.610, 0.355, 1.000) .3s both;
	animation: tracking-in-contract .8s cubic-bezier(0.215, 0.610, 0.355, 1.000) .3s both;
}
.imgLogo{
    height: 6em;
    max-width: 6em;
}
.imgLogo > img{
    object-fit: contain;
    -o-object-fit: contain;
}

#scroll{
    height: 4.35em;
    width: 40px;
    border: 3px solid var(--tituloBranco);
    border-radius: 1.25em;
}
#scroll::before{
    content: '';
    display: block;
    width: 1.25em;
    height: 1.25em;
    border-radius: 100%;
    margin: 0 auto;
    background-color: var(--CarmesimColor);
    animation: scrollDow 1s ease-in infinite;
    -moz-animation: scrollDow 1s ease-in infinite;
    -o-animation: scrollDow 1s ease-in infinite;
    -webkit-animation: scrollDow 1s ease-in infinite ;
}

footer.flex{
    background-image: var(--HeaderFooter);
    padding: var(--Pd_Section_vertical) .65em;
    --FAlignItems: flex-start;
    --FGap: 2em;
}
#conteiner_icone_footer.flex{
    --FGap: 2em;
    --FAlignItems: stretch;
    --FDirection: column;
}
#footer-formas-de-pagamento{
    padding: 1em .3em;
    background-color:  var(--tituloBranco);
    border-radius: var(--radius-border);
}
#conteiner-formas-de-pagamentos.flex{
    --FGap: 1em;
}
.itens-formas-de-pagamentos{
    width: 10em;
    aspect-ratio: 16/5;
}
.itens-formas-de-pagamentos > img{
    object-fit: contain;
}
.box-cookies{
    background-image: var(--HeaderFooter);
    max-width: 500px;
    padding: 1em;
    position: fixed;
    bottom: 1em;
    right: 1em;
    z-index: 200;
    border-radius: .5em;
    transform: translate3d(0,0,0);
}
.cookies_btn{
    margin: .3em;
    animation: none;
    padding: 1em;
    width: clamp(150px, 100%, 200px);
    border: 3px solid var(--CarmesimColor);
    transition: background-color .3s linear, border-color .3s linear;
}
.cookies_btn:hover, #btn-cookies_rejeitar:hover{
    background-color: var(--tituloBranco);
    color: var(--shadow);
    border-color: var(--tituloBranco);
}
#btn-cookies_rejeitar{
    background-color: transparent;
    border: 3px solid var(--CarmesimColor);
}
#wpp-fixo{
    position: fixed;
    z-index: 100;
    right: 1em;
    bottom: 3em;
    width: 5em;
    height: 5em;
    transform: rotate3d(10, 1, 1, 0deg);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    animation: giro 2s ease-in-out infinite;
    -o-animation: giro 2s ease-in-out infinite;
    -moz-animation: giro 2s ease-in-out infinite;
    -webkit-animation: giro 2s ease-in-out infinite;
}
#wpp-fixo > figure{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    padding: .3em;
    border-radius: 50%;
}
#wpp-fixo > figure:nth-child(1){
    background-color: var(--Blue);
    transform:rotateX(180deg) translateZ(0);
}
#wpp-fixo > figure:nth-child(1) > a > img{
    object-fit: contain;
}
#wpp-fixo > figure:nth-child(2){
    background-color: var(--CarmesimColor);
    transform: rotateY(-180deg) translateZ(-1px);
}

@supports(backdrop-filter: blur()){
    .blur{
        backdrop-filter: blur(.5em);
        -webkit-backdrop-filter: blur(.5em);
        contain: paint;
    }
    .lord-Icon-portifolio{
        backdrop-filter: blur(.1em);
        -webkit-backdrop-filter: blur(.1em);
        contain: paint;
    }
}

@media screen and (width <= 1250px){
    body, html{
        overflow-x: hidden;
    }
    .img_500h{
        min-height: 350px;
    }
    .button{
        width: clamp(200px, 100%, 600px);
    }
    .gridWidthDefault{
        --defaulWidthGrid: 500px;
    }
    .BgImage{
        background-attachment: local;
    }
    .flex-AlignItems-start{
        --FAlignItems: stretch;
    }
    .stick_conteiner_F40p_100p{
        align-self: center;
    }
    .sticky{
        position: relative;
    }
}
@media screen and (width <= 680px){
    .imgLogo{
        height: 3em;
    }
    .button{
        width: clamp(200px, 100%, 500px);
    }
    .overlay::after{
        opacity: .5;
    }
    .item_flex_60p-100p{
        max-width: 100%;
    }
    .blur::after{
        background-color: transparent;
    }
    .banner-video{
        display: none;
    }
    .box-cookies{
        border-radius: 0;
        max-width: 100%;
        bottom: 0;
        right: 0;
    }
}