:root {
    --azul_logo: #273478;
    --azul: #273478;
    --font: #4A5567;
    --amarelo: #FFC631;
    --laranja: #F68B1F;
    --fundo: #F9FAFC;
    --sec_azul: #ACC5FE;
}

::selection {
    background-color: var(--amarelo);
    color: var(--font);
}

@font-face {
    font-family: 'Impact';
    src: url('../fonts/Impact.woff2') format('woff2'),
         url('../fonts/Impact.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




/* --------------------------------------- */
/* --------------------------------------- */
/* --------------------------------------- */

::-webkit-scrollbar-track {
    background: var(--font);
    /* Cor do fundo da trilha */
}

::-webkit-scrollbar-thumb {
    background-color: var(--amarelo);
    /* Cor do botão de rolagem */
    border-radius: 6px;
    /* Bordas arredondadas */
    border: 2px solid var(--azul);
    /* Espaço entre o botão e a trilha */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--laranja);
    /* Cor ao passar o mouse */
}

/* --------------------------------------- */
/* --------------------------------------- */
/* --------------------------------------- */


html {
    scroll-behavior: smooth;
}

[data-aos] {
    will-change: transform, opacity;
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: auto;
    /* Pode ser auto, thin ou none */
    scrollbar-color: var(--amarelo) var(--font);
    /* thumb cor, track cor */
}

body {
    background-color: var(--fundo);
    color: var(--font);
    font-family: 'Open Sans', sans-serif;
    overflow-y: hidden;
}
.no-scroll {
    overflow: hidden !important;
}


p {
    overflow-wrap: break-word;
    word-break: normal;
    letter-spacing: 0.01em;
}

h1 {
    font-family: 'Impact', sans-serif;
    font-size: 3rem;
    font-weight: normal;
}

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

a {
    font-weight: bold;
    text-decoration: underline var(--amarelo);
}


button {
    background-color: var(--amarelo);
    color: var(--azul);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: 0.3s ease;
    font-weight: bold;
    font-size: 0.9rem;
}

button:hover {
    background-color: var(--laranja);
}

.division {
    transform: scaleX(0) !important;
    transform-origin: left;
    display: flex;
    border-top: 0.2rem solid var(--laranja);
    margin: 3rem 9rem;
    position: relative;
}

.division.aos-animate {
    transform: scaleX(1) !important;
}

.division.aos-animate::before {
    content: '';
    position: absolute;
    top: calc(-1.25rem - 0.2rem);
    right: 0;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--fundo);
    border-top: 0.2rem solid var(--laranja);
    border-left: 0.2rem solid var(--laranja);
    transform: rotate(45deg);
}

#error_page {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    padding-bottom: 0;

    svg {
        width: 7rem;
    }
}

.recaptcha-wrapper {
    max-width: 100%;
    overflow: hidden;
    display: flex;

    .g-recaptcha {
        margin: 2rem auto 4rem;
    }
}


/* Tela de carregamento (fundo) */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--fundo);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;

    svg {
        width: 6rem;
    }
}

#load path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: transparent;
    stroke: var(--azul_logo);
    stroke-width: 2;
    /*animation: draw 3s infinite, fillColor 3s infinite;*/
    animation: draw 3s infinite, fillColor 3s infinite;
}

@keyframes draw {
    to {
        stroke-dashoffset: 50;
        stroke-dasharray: 400;

    }
}

/*
@keyframes fillColorr {
    0% {
        fill: transparent;
    }
    50% {
        fill: transparent;
    }
    60% {
        fill: var(--azul_logo);
    }
    100% {
        fill: var(--azul_logo);
    }
  }
*/


#loc_cam_maq {
    scroll-margin-top: 30vh;
    /* Faz a seção parar mais centralizada */
}


@media (max-width: 900px) {
    h1 {
        font-size: 2.3rem;
    }

    .division {
        margin: 3rem;
    }
}