:root{   

    --preto: #232323;
    --preto-qua: #383838;
    --verde-seg: #00AC00;    
    
    --vermelho: #ec0c0c;
    
    --font1: montserrat;
    
    --branco: #FFFFFF;
    --cinza: #ECF1F7;
    --cinza-seg: #506571;
    --cinza-ter: #525252;
    --cinza-qua: #EFF0F1;
    --cinza-qui: #F0F4F9;
    
    --preto-seg: #000000;
    --preto-ter: #0B0B0B;
    --azul: #002740;
    --azul-seg: #001321;
    --azul-ter: #001C30;
    --azul-qua: #001421;
    --azul-qui: #00476F;
    --azul-sex: #00486F;
    --azul-set: #CCE4F1;
    --azul-oit: #002740;
    --verde: #29D166;

    --scrollbarWidth: 14px;

    --transition1: .2s;
    --transition2: .4s;
    --transition3: .7s;
    --transition4: 1s;
}

@media(prefers-reduced-motion){
    :root{
        --transition1: 1.2s;
        --transition2: 1.4s;
        --transition3: 1.7s;
        --transition4: 2s;
    }
}

a {font: inherit; color: inherit; line-height: inherit;}
*{padding: 0;margin: 0;line-height: inherit;vertical-align: inherit;list-style: none;text-decoration: none; box-sizing: border-box;}

h1,h2,h3,h4,h5,h6 {font: inherit;color: inherit;line-height: inherit;}

body::-webkit-scrollbar{width: var(--scrollbarWidth);transition: var(--transition2);}
body::-webkit-scrollbar-thumb{background: var(--azul-ter);transition: var(--transition2);}
body::-webkit-scrollbar-thumb:hover{background: var(--azul-ter);}
body::-webkit-scrollbar-track{position: absolute;right: 0;top: 0;background: var(--azul-set);}

.container{overflow: unset;}

.conteudo-1130{width: 1130px;max-width: 90%;margin: 0 auto;--width: 1130px;}
.conteudo-1140{width: 1140px;max-width: 90%;margin: 0 auto;--width: 1140px;}
.conteudo-1170{width: 1170px;max-width: 90%;margin: 0 auto;--width: 1170px;}
.conteudo-1200{width: 1200px;max-width: 90%;margin: 0 auto;--width: 1200px;}

.texto-com-hs > *{display: inline;}

.botao-padrao{display: flex;align-items: center;justify-content: center;gap: 6px;padding: 15px 14px 13px 17px;background: var(--cor1);transition: background-color var(--transition2), color var(--transition2);width: fit-content;font: 12.5px var(--font1);font-weight: 600;color: var(--cor1);}
.botao-padrao:hover{background: var(--cor2);}
.botao-padrao p{flex: 1 1 auto;}
.botao-padrao i{background-size: contain;background-position: center center;background-repeat: no-repeat;background-image: url('../img/icones/arrow2.svg');flex: 0 0 auto;width: 7px;height: 11px;display: block;}

.fill-end-screen{width: calc(100vw - var(--width) + 100% - (100vw - var(--width)) / 2 - var(--scrollbarWidth) + var(--scrollbarWidth) / 2);position: absolute;}

.imagem-fit > *{object-fit: contain;display: block;width: 100%;height: 100%;}

.lista-flex{--gapX: 0px;--gapY: 0px;--itens: 4;display: flex;align-items: flex-start;justify-content: flex-start;gap: var(--gapY) var(--gapX);flex-wrap: wrap;}
.lista-flex > *{flex: 0 0 auto;box-sizing: border-box;width: calc(100% / var(--itens) - var(--gapX) + var(--gapX) / var(--itens));}


.btn-dot-animation .ball {width: 30px; height: 30px; position: absolute; border-radius: 100%; opacity: 0; left: 100%; top: 100%; --ball: var(--preto);}
.btn-dot-animation .ball.final {transition:0.6s; left:-50% !important; top:-50% !important; width: 200%; height: 200%; background: var(--ball); opacity: 1 !important;}
.btn-dot-animation .ball.clean,.btn-dot-animation.clean .ball {transition:unset !important; left:100% !important ; top: 100% !important; border-radius: 100%; width: 30px; height: 30px; opacity: 0 !important;}
.btn-dot-animation {text-align: center; font: 600 10.04px montserrat; color: var(--branco); margin: 3px 0 5px; letter-spacing: 1.627px; padding: 14px 14px 12px; background: var(--azul); width: fit-content; display: flex; transition: 0.4s; position: relative; overflow: hidden;}
.btn-dot-animation p {position: relative; z-index: 12;}