:root {
    --cor-principal: #0d1d36;
    --cor-secundaria: #00f6ff;
    --cor-auxiliar: #a92a55;
    --cor-auxiliar2: #203960;
    --cor-auxiliar3: #132849;
    --cor-branca: #FFFFFF;
    --cor-cinza-auxiliar: #F4F5F6;
    --cor-cinza-auxiliar2: #d6d6d6;
    --cor-cinza-auxiliar3: #727272;
    --cor-vip-amarela: #d3b649;
    --cor-vip-amarela-auxiliar: #b6982d;
    --cor-vip-azul: #1d2134;
    --cor-vip-azul-auxiliar: #2c3250;
    --cor-admais-azul: #1e293b;
    --cor-admais-azul-auxiliar: #243042;
    --cor-admais-amarela: #ffd535;
    --cor-admais-amarela-auxiliar: #e6be20;
    --cor-secundaria-auxiliar: #02c7ce;
    --cor-azul-blog: #2b5699;
    --cor-azul-encante: #0174B7;
    --texto-paragrafo: 1.1rem;
    --texto-button: 1.1rem;
    --texto-h3: 2rem;
    --gradient-secundaria: linear-gradient(45deg, #00f6ff, #008a8f, #00f6ff, #008a8f);
    --gradient-principal: linear-gradient(45deg, #0d1d36, #203960, #0d1d36, #203960);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Manrope', Arial, Helvetica, sans-serif;
}

header {
    display: flex;
    flex-direction: column;
}

/* Rolar para cima da página */
#scroll-inicio {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 20px;
    right: 80px;
    width: 50px;
    height: 50px;
    background: var(--cor-secundaria);
    color: var(--cor-auxiliar2);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
}

#scroll-inicio:hover {
    background: var(--cor-secundaria-auxiliar);
}

/* Acesso rápido digitação */

#acesso-digitacao {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 20px;
    right: 140px;
    width: 50px;
    height: 50px;
    background: var(--cor-secundaria);
    color: var(--cor-auxiliar2);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.25);
}

#acesso-digitacao:hover {
    background: var(--cor-secundaria-auxiliar);
}

/* Botão de chat flutuante */
.bot-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: var(--cor-secundaria);
    color: var(--cor-auxiliar2);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.25);
}

.bot-button:hover {
    background: var(--cor-secundaria-auxiliar);
}

.chat-container {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 300px;
    max-height: 400px;
    background: var(--cor-branca);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.25);
}

.hidden {
    display: none;
}

.chat-header {
    background: var(--cor-secundaria);
    color: var(--cor-auxiliar2);
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header span {
    font-weight: 700;
}

.chat-content {
    padding: 10px;
    overflow-y: auto;
    flex: 1;
}

.question {
    background: var(--cor-auxiliar2);
    padding: 20px;
    margin: 10px 0;
    border-radius: 10px;
    cursor: pointer;
    color: var(--cor-secundaria);
    line-height: 1.2;
    text-align: left;
    font-size: 0.9rem;
}

.question:hover {
    background: var(--cor-auxiliar3);
}

.answer {
    background: var(--cor-cinza-auxiliar);
    color: var(--cor-auxiliar2);
    padding: 20px;
    margin: 10px 0;
    border-radius: 5px;
    line-height: 1.2;
    text-align: left;
    font-size: 0.9rem;
}

.backButton-chat {
    background-color: var(--cor-secundaria);
    color: var(--cor-auxiliar2);
    padding: 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.backButton-chat:hover {
    background-color: var(--cor-secundaria-auxiliar);
}

#close-chat i {
    font-weight: 700;
    font-size: 1.7rem;
    color: var(--cor-auxiliar3);
    cursor: pointer;
}

/** {
   outline: 1px solid red;
}*/
/*------------------- Barra de rolagem -----------------*/

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #dfdfdf;
}

::-webkit-scrollbar-thumb {
    background: var(--cor-principal);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cor-auxiliar2);
}


/* ------------------------------ Loader ----------------------------- */
.loader-background {
    background-color: var(--cor-cinza-auxiliar);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

.loader {
    border: 8px solid var(--cor-auxiliar2);
    border-top: 8px solid var(--cor-secundaria);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@keyframes textura {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% 0;
    }
}