/* ==========================================================================
   Project Júnior Consultoria — CSS global
   Caminhos de fonte sao relativos a este arquivo (assets/css/ -> assets/fonts/)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fontes locais
   -------------------------------------------------------------------------- */
@font-face {
    font-display: swap;
    font-family: baloo-bold;
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/baloo-tamma-2-bold.woff2") format("woff2")
}

@font-face {
    font-display: swap;
    font-family: figtree-semibold;
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/figtree-semibold.woff2") format("woff2")
}

@font-face {
    font-display: swap;
    font-family: figtree-light;
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/figtree-light.woff2") format("woff2")
}

/* --------------------------------------------------------------------------
   Variaveis
   -------------------------------------------------------------------------- */
:root {
    --cor-branco-fixo: #fff;
    --cor-preto-fixo: #000;
    --fundo: #050608;
    --fundo-rgb: 5,6,8;
    --cor-branco: #08090c;
    --cor-preto: #fff;
    --cor-cinza: #8d9098;
    --cor-cinza-claro: #1a1b21;
    --cor-cinza-escuro: #25272d;
    --cor-gelo: #0b0c10;
    --cor-overlay-modal: rgba(3,3,5,.62);
    --cor-fundo-vidro: rgba(5,6,8,.62);
    --cor-foco-campo: #33343c;
    --verde-rgb: 31,229,74;
    --azul-rgb: 77,163,255;
    --laranja-rgb: 255,178,63;
    --roxo-rgb: 169,123,255;
    --cor-verde: #1fe54a;
    --cor-verde-hover: #18b73b;
    --cor-verde-transparente: #1fe54a26;
    --cor-vermelho: #ff4d6d;
    --cor-vermelho-hover: #cc3d57;
    --cor-vermelho-transparente: #ff4d6d26;
    --cor-laranja: #ffb23f;
    --cor-laranja-transparente: #ffb23f26;
    --cor-azul: #4da3ff;
    --cor-azul-hover: #2f86f0;
    --cor-azul-transparente: #4da3ff26;
    --cor-azul-claro: #10213a;
    --cor-roxo: #a97bff;
    --cor-roxo-transparente: #a97bff26;
    --cor-amarelo: #c8ff00;
    /* MARCA — azul, ancorado no logo.
       A escala tem tres degraus porque cada um faz um trabalho diferente:

       --marca-rgb      cor de ACENTO e de TEXTO (link ativo, foco, bolinha do
                        overline, selecao). Precisa de contraste sobre o fundo
                        escuro: este azul da ~7,6:1, bem acima do minimo de 4,5.
                        O azul puro do logo (0,0,254) daria so ~2,4:1 e seria
                        ilegivel como texto — por isso ele nao entra aqui.
       --marca-clara    topo dos gradientes e brilhos.
       --marca-escura   base dos gradientes. Aqui sim mora o azul exato do logo
                        (amostrado do PNG), que e onde ele aparece como FUNDO,
                        com texto branco por cima (~8,6:1). */
    --marca-rgb: 77,163,255;
    --marca-clara-rgb: 150,200,255;
    --marca-escura-rgb: 0,0,254;
    --cor-marca: rgb(var(--marca-rgb));
    --cor-marca-hover: rgb(var(--marca-clara-rgb));
    --cor-marca-clara: rgb(var(--marca-clara-rgb));
    --cor-marca-solida: #0b36d6;
    --cor-marca-solida-hover: #0829ab;
    --cor-marca-texto: #fff;
    --cor-marca-transparente: rgba(var(--marca-rgb),.15);
    --vidro-borda: hsla(0,0%,100%,.08);
    --vidro-borda-forte: hsla(0,0%,100%,.14);
    --vidro-blur: blur(22px) saturate(150%);
    --vidro-cartao: linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,.012));
    --vidro-sombra: inset 0 1px 0 hsla(0,0%,100%,.07),inset 0 -1px 0 rgba(0,0,0,.35),0 18px 50px rgba(0,0,0,.45);
    --vidro-sombra-leve: inset 0 1px 0 hsla(0,0%,100%,.06),inset 0 -1px 0 rgba(0,0,0,.3);
    --gradiente-superficie: linear-gradient(180deg,#14161c,#0c0d11 60%,#0a0b0f);
    --bolha-marca-fundo: radial-gradient(120% 140% at 50% 0%,rgba(var(--marca-clara-rgb),.75) 0%,rgba(var(--marca-rgb),.6) 45%,rgba(var(--marca-escura-rgb),.7) 100%);
    --bolha-marca-fundo-hover: radial-gradient(120% 140% at 50% 0%,rgba(var(--marca-clara-rgb),.82) 0%,rgba(var(--marca-rgb),.66) 45%,rgba(var(--marca-escura-rgb),.74) 100%);
    --bolha-marca-borda: rgba(var(--marca-clara-rgb),.8);
    --bolha-marca-sombra: inset 0 1px 0 hsla(0,0%,100%,.45),inset 0 -10px 18px rgba(0,0,0,.18),inset 0 0 16px rgba(var(--marca-clara-rgb),.3),0 0 26px rgba(var(--marca-rgb),.35);
    --bolha-marca-sombra-hover: inset 0 1px 0 hsla(0,0%,100%,.5),inset 0 -10px 18px rgba(0,0,0,.16),inset 0 0 16px rgba(var(--marca-clara-rgb),.34),0 0 32px rgba(var(--marca-rgb),.5);
    --bolha-marca-texto: #fff;
    --bolha-neutra-fundo: linear-gradient(180deg,hsla(0,0%,100%,.11),hsla(0,0%,100%,.04));
    --bolha-neutra-fundo-hover: linear-gradient(180deg,hsla(0,0%,100%,.14),hsla(0,0%,100%,.055));
    --bolha-neutra-borda: hsla(0,0%,100%,.2);
    --bolha-neutra-borda-hover: hsla(0,0%,100%,.27);
    --bolha-neutra-sombra: inset 0 1px 0 hsla(0,0%,100%,.14),inset 0 -8px 14px rgba(0,0,0,.18),0 6px 18px rgba(0,0,0,.25);
    --raio-controle: 14px;
    --raio-chip: 8px;
    --raio-card: 20px;
    --cor-escuro-1: var(--cor-branco);
    --cor-escuro-2: var(--cor-cinza-claro);
    --cor-escuro-3: var(--cor-cinza-escuro);
    --cor-escuro-4: var(--cor-foco-campo);
    --cor-cinza-1: var(--cor-cinza);
    --cor-cinza-2: var(--cor-cinza-claro);
    --cor-texto-primaria: var(--cor-preto);
    --cor-texto-secundaria: var(--cor-cinza);
    --cor-fundo-secundaria: var(--cor-gelo);
    --cor-fundo-terciaria: var(--cor-cinza-claro);
    --degrade-skeleton: linear-gradient(90deg,#0b0c10,#1a1b21 50%,#0b0c10);

    /* Escala tipografica */
    --f0: 10px;
    --f1: 12px;
    --f2: 14px;
    --f3: 16px;
    --f4: 18px;
    --f5: 20px;
    --f6: 22px;
    --f7: 24px;
    --f8: 26px;
    --f9: 28px;
    --f10: 30px;
    --f10b: 38px;
    --f11: 50px;
    --f12: 64px;

    /* Transicoes */
    --tempo-rapido: .18s;
    --tempo-medio: .32s;
    --tempo-lento: .56s;
    --curva-saida: cubic-bezier(.16,1,.3,1);
    --curva-entrada: cubic-bezier(.4,0,1,1);
    --curva-elastica: cubic-bezier(.34,1.56,.64,1);

    /* Familias de fonte, com pilha de fallback do sistema */
    --pilha-sistema: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --titulo: "baloo-bold",var(--pilha-sistema);
    --bold: "figtree-semibold",var(--pilha-sistema);
    --light: "figtree-light",var(--pilha-sistema);
    --regular: var(--light)
}

@media screen and (max-width: 1000px) {
    :root {
        --f0: 10px;
        --f1: 12px;
        --f2: 14px;
        --f3: 15px;
        --f4: 17px;
        --f5: 19px;
        --f6: 21px;
        --f7: 23px;
        --f8: 25px;
        --f9: 27px;
        --f10: 29px;
        --f10b: 30px;
        --f11: 40px;
        --f12: 46px
    }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
* {
    border: 0;
    box-sizing: border-box;
    font-size: 100%;
    font: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    text-decoration: none;
    vertical-align: baseline
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

body,html {
    background-color: var(--fundo);
    scroll-behavior: smooth;
    scrollbar-color: var(--cor-cinza) var(--cor-cinza-claro);
    scrollbar-width: thin
}

body {
    color: var(--cor-texto-primaria);
    font-family: var(--regular);
    font-size: var(--f3);
    line-height: 1.5;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    overflow-x: clip
}

/* --------------------------------------------------------------------------
   Tipografia base
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 {
    font-family: var(--titulo);
    line-height: 1.15
}

h1,h2,h3 {
    text-wrap: balance
}

p {
    text-wrap: pretty;
    text-wrap: balance
}

b,strong {
    font-family: var(--bold)
}

em,i {
    font-style: italic
}

small {
    font-size: var(--f1)
}

/* --------------------------------------------------------------------------
   Estrutura
   -------------------------------------------------------------------------- */
#tela {
    min-height: 100vh;
    width: 100%
}

.pagina {
    min-width: 0;
    width: 100%
}

section[id] {
    scroll-margin-top: 100px
}

section[id]:not(#topo) {
    contain-intrinsic-size: auto 800px;
    content-visibility: auto
}

@media screen and (max-width: 1000px) {
    section[id] {
        scroll-margin-top: 82px
    }
}

div,section {
    scrollbar-width: none
}

div::-webkit-scrollbar,section::-webkit-scrollbar {
    display: none !important
}

body.bloqueado,body.bloquear {
    overflow: hidden !important
}

/* --------------------------------------------------------------------------
   Elementos interativos
   -------------------------------------------------------------------------- */
a,button,img,svg {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: none;
    -webkit-touch-callout: none
}

a {
    background-color: transparent;
    color: inherit;
    cursor: pointer
}

img {
    border-style: none;
    display: block;
    max-width: 100%
}

button {
    -moz-appearance: none !important;
    -webkit-appearance: button;
    appearance: button;
    background: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    margin: 0;
    overflow: visible;
    text-transform: none
}

button * {
    pointer-events: none
}

input {
    line-height: 1;
    overflow: visible
}

input,select,textarea {
    -moz-appearance: none !important;
    -webkit-appearance: none;
    appearance: none;
    color: inherit;
    font-family: inherit;
    /* 16px evita o zoom automatico do Safari no iOS ao focar o campo */
    font-size: 16px
}

input,textarea {
    caret-color: var(--cor-marca)
}

textarea {
    overflow: auto;
    scrollbar-width: none
}

textarea::-webkit-scrollbar {
    display: none
}

[type=button] {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button
}

[type=button]::-moz-focus-inner,button::-moz-focus-inner {
    border-style: none
}

[tabindex]:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible {
    border-radius: 6px;
    outline: 2px solid var(--cor-marca);
    outline-offset: 2px
}

a:focus-visible,button:focus-visible {
    outline: 2px solid rgba(var(--marca-clara-rgb),.8);
    outline-offset: 3px
}

/* --------------------------------------------------------------------------
   Scrollbar e selecao
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    height: 4px;
    width: 4px
}

::-webkit-scrollbar-track {
    background: var(--cor-cinza-claro)
}

::-webkit-scrollbar-thumb {
    background: var(--cor-cinza);
    border-radius: 10px;
    -webkit-transition: background .3s;
    transition: background .3s
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cor-preto)
}

::-moz-selection {
    background: rgba(var(--marca-rgb),.28);
    color: #fff
}

::selection {
    background: rgba(var(--marca-rgb),.28);
    color: #fff
}

/* --------------------------------------------------------------------------
   Icones
   -------------------------------------------------------------------------- */
.edusites-icone {
    display: inline-flex;
    line-height: 0
}

.edusites-icone svg {
    height: 1em;
    width: 1em
}

/* --------------------------------------------------------------------------
   Animacoes
   -------------------------------------------------------------------------- */
@keyframes girando {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        visibility: hidden
    }

    to {
        opacity: 1;
        visibility: visible
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible
    }

    to {
        opacity: 0;
        visibility: hidden
    }
}

@keyframes skeleton {
    0% {
        background-position: -200% 0
    }

    to {
        background-position: 200% 0
    }
}

@keyframes animacaoQuadrinhos {
    0% {
        right: 0;
        top: -200px
    }

    to {
        right: 0;
        top: calc(100% - 200px)
    }
}

@keyframes animacaoQuadrinhosDois {
    0% {
        right: 0;
        top: calc(100% - 200px)
    }

    to {
        right: 2000px;
        top: calc(100% - 200px)
    }
}

@keyframes animacaoQuadrinhosTres {
    0% {
        bottom: -200px;
        right: 0
    }

    to {
        bottom: calc(100% - 200px);
        right: 0
    }
}

@keyframes animacaoQuadrinhosQuatro {
    0% {
        bottom: calc(100% - 200px);
        right: 0
    }

    to {
        bottom: calc(100% - 200px);
        right: 2000px
    }
}

@media screen and (max-width: 1000px) {
    @keyframes animacaoQuadrinhos {
        0% {
            right: 0;
            top: -100px
        }

        to {
            right: 0;
            top: calc(100% - 100px)
        }
    }

    @keyframes animacaoQuadrinhosDois {
        0% {
            right: 0;
            top: calc(100% - 100px)
        }

        to {
            right: 2000px;
            top: calc(100% - 100px)
        }
    }

    @keyframes animacaoQuadrinhosTres {
        0% {
            bottom: -100px;
            right: 0
        }

        to {
            bottom: calc(100% - 100px);
            right: 0
        }
    }

    @keyframes animacaoQuadrinhosQuatro {
        0% {
            bottom: calc(100% - 100px);
            right: 0
        }

        to {
            bottom: calc(100% - 100px);
            right: 2000px
        }
    }
}

.revelar>* {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--tempo-medio) var(--curva-saida),transform var(--tempo-medio) var(--curva-saida)
}

.revelar.revelado>* {
    opacity: 1;
    transform: translateY(0)
}

@media (prefers-reduced-motion: reduce) {
    .revelar.revelado>*,.revelar>* {
        opacity: 1;
        transform: none;
        transition: none
    }
}

/* --------------------------------------------------------------------------
   Componentes utilitarios
   -------------------------------------------------------------------------- */
.grade-fundo {
    background-image: linear-gradient(hsla(0,0%,100%,.045) 1px,transparent 0),linear-gradient(90deg,hsla(0,0%,100%,.045) 1px,transparent 0);
    background-position: top;
    background-size: 64px 64px;
    inset: 0;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0,#000 0,transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0,#000 0,transparent 75%);
    pointer-events: none;
    position: absolute
}

.bolha-marca,.bolha-neutra {
    border-radius: var(--raio-controle) !important;
    border-style: solid;
    border-width: 1px;
    font-family: var(--bold);
    overflow: hidden;
    position: relative;
    transition: background var(--tempo-rapido) ease,box-shadow var(--tempo-medio) ease,border-color var(--tempo-rapido) ease,transform var(--tempo-rapido) var(--curva-saida) !important
}

.bolha-marca:active,.bolha-neutra:active {
    transform: scale(.98)
}

.bolha-marca {
    background: var(--bolha-marca-fundo) !important;
    border-color: var(--bolha-marca-borda) !important;
    box-shadow: var(--bolha-marca-sombra);
    text-shadow: 0 1px 2px rgba(0,0,0,.25)
}

.bolha-marca,.bolha-marca .edusites-icone {
    color: var(--bolha-marca-texto) !important
}

.bolha-marca:hover {
    background: var(--bolha-marca-fundo-hover) !important;
    box-shadow: var(--bolha-marca-sombra-hover)
}

.bolha-marca.varrer:after {
    background: linear-gradient(100deg,transparent,hsla(0,0%,100%,.28) 50%,transparent);
    content: "";
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translate(-160%) skew(-20deg);
    width: 40%
}

.bolha-marca.varrer:hover:after {
    transform: translate(330%) skew(-20deg);
    transition: transform .7s ease
}

@media (prefers-reduced-motion: reduce) {
    .bolha-marca.varrer:after {
        display: none
    }
}

.bolha-neutra {
    background: var(--bolha-neutra-fundo) !important;
    border-color: var(--bolha-neutra-borda) !important;
    box-shadow: var(--bolha-neutra-sombra);
    color: var(--cor-preto) !important
}

.bolha-neutra:hover {
    background: var(--bolha-neutra-fundo-hover) !important;
    border-color: var(--bolha-neutra-borda-hover) !important
}

.bolha-neutra .edusites-icone {
    color: var(--cor-marca) !important
}

.overline:before {
    background-color: var(--cor-marca);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(var(--marca-rgb),.8);
    content: "";
    display: inline-block;
    height: 6px;
    margin: 0 8px 1px 0;
    vertical-align: middle;
    width: 6px
}

.overline+h2 {
    background: linear-gradient(180deg,#fff,#fff 40%,#a9adb6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.aurora-hero {
    --a-centro: 50% -10%;
    --a-lima: 14% 4%;
    --a-ciano: 88% 10%;
    --a-esmeralda: 26% 62%;
    --a-brilho: 50% 2%;
    background: radial-gradient(32% 24% at var(--a-brilho),rgba(var(--marca-clara-rgb),.1) 0,rgba(var(--marca-clara-rgb),0) 70%),radial-gradient(62% 58% at var(--a-centro),rgba(var(--marca-rgb),.24) 0,rgba(var(--marca-rgb),.08) 40%,rgba(var(--marca-rgb),0) 72%),radial-gradient(36% 40% at var(--a-lima),rgba(var(--marca-rgb),.11) 0,rgba(var(--marca-rgb),.03) 45%,rgba(var(--marca-rgb),0) 72%),radial-gradient(40% 44% at var(--a-ciano),rgba(var(--marca-rgb),.07) 0,rgba(var(--marca-rgb),0) 70%),radial-gradient(46% 38% at var(--a-esmeralda),rgba(var(--marca-escura-rgb),.1) 0,rgba(var(--marca-escura-rgb),0) 70%),linear-gradient(180deg,rgba(var(--marca-rgb),.04) 0,rgba(var(--marca-rgb),0) 55%);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity .9s ease
}

.aurora-hero.acesa {
    opacity: 1
}

@media (prefers-reduced-motion: reduce) {
    .aurora-hero {
        transition: none
    }
}

.texto-3d {
    background: linear-gradient(180deg,#ffffff6b 0,#ffffff0f 38%,#fff0 50%),linear-gradient(180deg,rgb(var(--marca-clara-rgb)) 0,rgb(var(--marca-rgb)) 32%,color-mix(in srgb,rgb(var(--marca-rgb)) 82%,rgb(var(--marca-escura-rgb))));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(.7px 1.1px 0 rgb(var(--marca-escura-rgb))) drop-shadow(.7px 1.1px 0 rgb(var(--marca-escura-rgb))) drop-shadow(.7px 1.1px 0 color-mix(in srgb,rgb(var(--marca-escura-rgb)) 55%,#000)) drop-shadow(0 0 26px rgba(var(--marca-rgb),.28))
}