@font-face {
    font-family: "Sniglet";
    src: url(../fontes/Sniglet-ExtraBold.otf);
}

@font-face {
    font-family: "Blokletters";
    src: url(../fontes/Blokletters-Viltstift.ttf);
}

@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Homemade+Apple&family=Iansui&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');



body {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

#geral {
    height: 100vh;
    width: 100vw;

    display: flex;
    justify-content: center;
    align-items: center;

    background: url(../img/novo-fundo.png); 
    background-size: cover;
    background-attachment: fixed;
}

#construcao {
    background: url(../img/em-constru.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 50vh;
    width: 100vw; 
}


.texto-construcao {
    margin: 0 auto;
    text-align: center;
    display: flex;
    font-family: "Cabin";
     font-family: "Cabin", sans-serif;
   
}


.texto-construcao > h1 {
    margin: -150px auto 0 auto;
}


/* h1 {
    font-family: "Sniglet";
    -webkit-text-stroke: 1px black; 
} */

p {
    font-family: "Blokletters";
    color: #fff;
}

nav {
    font-family: "Sniglet";
    font-size: 2.8rem;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 1px black; 
}

ul {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
}

li {
    margin:30px;
}

a {
    text-decoration: none;
    color: #fff;
}

li > a {
    font-size: 1.8rem;
}

li > a:hover {
    color: #F9C747;
}

#sitemap {
    display: block;
}

#sitemap > ul >  li > a {
    color: #000;
}

.idioma {
    font-family: "Blokletters";
    color: #fff;
    font-size: 0.5rem;
}

#principal {
    position: relative;
    background-image:  linear-gradient(to bottom, rgba(212, 81, 154, 0.8)0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.2) 80%), url(../img/banner-principal.png);
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.texto-banner {
    width: 55%;
    font-size: 3.5rem;
    color: #fff;
    position: absolute;
    top: 75%; /* Centraliza verticalmente */
    left: 150px; /* Ajusta a posição à esquerda */
    transform: translateY(-50%); /* Garante que o texto fique perfeitamente no centro vertical */
    margin: 50px auto;
}

.botao {
    margin-bottom: 40px;
}


.botao > a {
    background-color: #F9C747;
    margin:-50px auto;
    padding: 20px;
    border-radius: 8px;
    color: #D4519A;
    font-family: "Blokletters";
    font-size: 1.8rem;
    
}

.botao > a:hover {
    background-color: #D4519A;
    margin:-50px auto;
    padding: 20px;
    border-radius: 8px;
    color: #F9C747;
    font-family: "Blokletters";
    font-size: 1.8rem;
    
}


.botao-assistir {
    display: flex;
}

.botao-assistir > a {
    background-color: #F9C747;
    margin: auto ;
    padding: 20px;
    border-radius: 8px;
    color: #D4519A;
    font-family: "Blokletters";
    font-size: 1.8rem;
    
}

.botao-assistir > a:hover {
    background-color: #D4519A;
    margin:  auto;
    padding: 20px;
    border-radius: 8px;
    color: #F9C747;
    font-family: "Blokletters";
    font-size: 1.8rem;
    
}


#episodios {
    background-color: #D760A1;
    display: flex;
    width: fit-content;
    justify-content: center;
    padding: 0 50px;
    text-align: justify;
    
}


.amarelo {
    color: #F9C747;
    margin: -10px;
}

.alinhar-texto {
    display: flex;
    flex-direction: column;
    margin: 30px 0 30px 60px;
    width: 90%;
    font-size: 1.3rem;
}

.imagem {
    display: flex;
    gap: 20px;
}

.imagem > img {
    display: flex;
    width: 30%;
    margin-top: -100px;
    z-index: 9999;
    position: relative;
}

/** ROBÔ ***/

#robo {
    right: 0;
}

.robo {
    right: 0;
    bottom: 5px;
    display: flex;
    position: fixed;
    width: 28%;
    margin: 0;
    padding: 0;
}


.whats {
    right: 0;
    bottom: 5px;
    position: fixed;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.robo > img {
    width: 200px;
    height: auto;
}

.balao {
    width: 80%;
    height: 10%;
    background-color: #fff;
    padding: 20px 25px;
    border: 2px solid #000;
    border-radius: 60px 60px 0px 60px;
    margin: -50px -50px -50px -70px;
    z-index: 9999;
    
}

#frases {
    font-family: 'Heebo', sans-serif;
    font-size: 1rem;
}

#fechar {
    color: #F9C747;
    cursor: pointer;
    padding: 5px;
    margin: 0 5px;
    font-size: 1.2rem;
    font-family: "Sniglet";
    
}

/** RODAPÉ **/

footer {
    background-color: #a11c65;
    padding: 50px 100px;
    font-size: 1.2rem;
    color: #cb7bdf;
    width: auto;
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
}

span {
    margin: 0 auto;
    justify-content: center;
    align-items: center;
}

#rodape {
    display: flex;
    gap: 40px; /* espaçamento entre as colunas */
    flex-wrap: wrap; /* permite quebrar linha se não couber */
    margin: 0 auto;
}

.divisao-rodape {
    min-width: 150px; /* define uma largura mínima para melhor alinhamento */
    max-width: max-content;
}

.divisao-rodape h4, .redes-sociais h4 {
    margin: 8px auto;
    font-family: "Sniglet";
    font-size: 1.2rem;
    text-transform: uppercase;
    -webkit-text-stroke: 1px black; /* espessura e cor do contorno */
    color: #fff;
}

.divisao-rodape a {
    display: block;
    margin-bottom: 4px;
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
}


.redes-sociais {
    margin: 0;
}


.redes-sociais > a {
    margin: 0 4px;
    justify-content: center;
}

hr {
    width: 100%;
    height: 1px;
    background-color: #fff;
    border: none;
    margin: 20px 0;
    flex-basis: 100%; /* Força o HR a quebrar linha no flex */
}

.links-rodape {
    margin: 0 auto;
}

.links-rodape > a {
    margin: 0 5px;
    font-size: 0.8rem;
}

.links-rodape > p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    margin: 10px auto;
}



/* Ajustes para telas menores (tablets e celulares) */
@media screen and (max-width: 1024px) {

    
body {
    margin: 0;
    padding: 0;
    width: fit-content;
}
    nav {
        font-size: 1.7rem;
        text-align: center;
    }

    ul {
        flex-wrap: wrap;
        padding: 0;
    }

    li {
        margin: 15px;
    }

    .texto-banner {
        width: 80%;
        font-size: 2rem;
        left: 50px;
        top: 65%;
    }

    .botao > a, .botao-assistir > a {
        font-size: 1.5rem;
        padding: 15px;
    }

    .robo > img {
        width: 150px;
    }

    #episodios {
        background-color: #D760A1;
        display: flex;
        justify-content: center;
        padding: 0 50px;
        text-align: justify;
    }

    .imagem > img {
        display: none;
    }


    botao-assistir > a {
        width: 50%;
    }

    .alinhar-texto {
        display: flex;
        flex-direction: column;
        margin: 30px 0 30px 60px;
        width: max-content;
        font-size: 1.2rem;
        text-align: left;
    }

    .botao-assistir {
        display: inline-grid;
        width: 80%;
        text-align: center;
        margin-top: 15px;
        align-content: stretch;
    }
}



.enabled {
    z-index: -9999;
}


/** ACESSIBILIDADE **/

/** Contraste **/

.contraste,
.contraste nav,
.contraste div,
.contraste li,
.contraste ol,
.contraste header,
.contraste footer,
.contraste section,
.contraste #episodios,
.contraste main,
.contraste aside,
.contraste article {
    background: black;
    color: yellow;
}

.contraste h1,
.contraste h2,
.contraste h3,
.contraste h4,
.contraste h5,
.contraste h6,
.contraste p,
.contraste label,
.contraste strong,
.contraste em,
.contraste cite,
.contraste q,
.contraste i,
.contraste b,
.contraste u,
.contraste span {
    color: white ;
}

.contraste input[type=text],
.contraste input[type=password],
.contraste input[type=url],
.contraste input[type=search],
.contraste input[type=email],
.contraste input[type=tel],
.contraste input[type=date],
.contraste input[type=month],
.contraste input[type=week],
.contraste input[type=datetime],
.contraste input[type=datetime-local],
.contraste textarea,
.contraste input[type=number] {
    background: black;
    border: 1px solid white;
    color: white;
}

.contraste a{
    color: yellow;
}

.contraste button,
.contraste input[type=button],
.contraste input[type=reset],
.contraste input[type=submit],
.contraste .botao > a {
    background: black;
    color: yellow;
    border: none;
}

.contraste .botao-assistir > a {
    background: yellow;
    color: black;
    border: none;
}

.contraste .botao-assistir > a  
.contraste #frases {
    color: yellow;
}



.contraste img.on-contraste-force-gray {
    filter: grayscale(100%) contraste(120%);
}

.contraste img.on-contraste-force-white {
    filter: brightness(0) invert(1);
}

/** Sem Contraste **/
.contraste #principal,
.contraste #robo,
.contraste .robo,
.contraste #fechar,
.contraste .texto-banner,
.contraste .botao {
    background-color: transparent;
}