:root{

    --titulos:#F5F5F5;

    --cards:#151519;

}
html{

    scroll-behavior: smooth;

}

*{

    margin: 0;

}

body{

    background-color: #0B0B0D;

    margin-top: 2.5vh;

}

.container-center{

    display: flex;

    justify-content: center;

    flex-direction: column;

    align-items: center;

}

.main-title{

    font-size: 10vh;

    text-align: center;

    color: var(--titulos);

}

.second-title{

    font-size: 2.5vh;

    text-align: center;

    font-weight: normal;

    padding: 2vh;

    color: var(--titulos);

}

.destaque-texto{

    font-weight: bold;

}

#capa3d{

    height: 40vh;

    width: 50vh;

    padding-bottom: 5vh;

}

.buy-ebook{

    padding: 2.5vh 10vh 2.5vh 10vh; /*topo, direita, baixo, esquerda */

    border-radius: 50px;

    font-size: 2.5vh;

    font-weight: bold;

}

.saber-comunicar{

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 12vh 5vw;

    color: var(--titulos);

}

.saber-comunicar h2{

    font-size: 5vh;

    max-width: 90vh;

}

.saber-comunicar > p{

    font-size: 2.2vh;

    color: #A1A1AA;

    max-width: 75vh;

    padding-top: 2vh;

    line-height: 1.5;

}

.cards-habilidades{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(25vh, 1fr));

    gap: 2vh;

    width: 90%;

    max-width: 120vh;

    margin-top: 6vh;

}

.card-habilidade{

    background-color: var(--cards);

    padding: 4vh 2vh;

    border-radius: 15px;

}

.card-habilidade h3{

    font-size: 2.5vh;

    color: var(--titulos);

}

.card-habilidade p{

    font-size: 1.8vh;

    color: #A1A1AA;

    line-height: 1.5;

    padding-top: 1.5vh;

}
.conheca-jogo{

    padding: 15vh 5vw;

    color: var(--titulos);

}

.conheca-jogo > h2,
.nao-frases > h2,
.o-que-aprender > h2,
.para-quem > h2{

    font-size: 5vh;

    text-align: center;

}

.conheca-conteudo{

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8vh;

    max-width: 120vh;

    margin: 8vh auto 0;

}

.conheca-conteudo img{

    width: 35vh;

    height: 45vh;

    object-fit: contain;

}

.conheca-texto{

    max-width: 60vh;

}

.conheca-texto h3{

    font-size: 3vh;

    color: var(--titulos);

}

.conheca-texto p{

    font-size: 2vh;

    color: #A1A1AA;

    line-height: 1.6;

    padding-top: 2vh;

}


.nao-frases{

    background-color: #101014;

    padding: 15vh 5vw;

    color: var(--titulos);

    text-align: center;

}

.nao-frases > p{

    max-width: 70vh;

    margin: 3vh auto 0;

    font-size: 2vh;

    line-height: 1.6;

    color: #A1A1AA;

}

.processo{

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 3vh;

    margin-top: 7vh;

    flex-wrap: wrap;

}

.processo div{

    background-color: var(--cards);

    padding: 3vh;

    border-radius: 15px;

    min-width: 12vh;

}

.processo span{

    display: flex;

    justify-content: center;

    align-items: center;

    color: #A78BFA;

}

.processo svg{

    width: 4vh;

    height: 4vh;

    stroke-width: 1.8;

}

.processo h3{

    padding-top: 1.5vh;

    font-size: 2vh;

}


.o-que-aprender{

    padding: 15vh 5vw;

    color: var(--titulos);

}

.cards-aprender{

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2vh;

    max-width: 120vh;

    margin: 7vh auto 0;

}

.card-aprender{

    background-color: var(--cards);

    padding: 4vh 3vh;

    border-radius: 15px;

}

.card-aprender span{

    color: #A78BFA;

    font-size: 1.8vh;

    font-weight: bold;

}

.card-aprender h3{

    font-size: 2.5vh;

    padding-top: 1vh;

}

.card-aprender p{

    color: #A1A1AA;

    font-size: 1.8vh;

    line-height: 1.5;

    padding-top: 1.5vh;

}


.para-quem{

    padding: 15vh 5vw;

    color: var(--titulos);

}

.lista-para-quem{

    max-width: 80vh;

    margin: 6vh auto 0;

}

.lista-para-quem p{

    background-color: var(--cards);

    padding: 2.5vh 3vh;

    margin-top: 1.5vh;

    border-radius: 10px;

    color: #D4D4D8;

    font-size: 2vh;

}


.oferta{

    background-color: #101014;

    padding: 15vh 5vw;

    text-align: center;

    color: var(--titulos);

}

.oferta > p{

    color: #A1A1AA;

    font-size: 2vh;

    padding-top: 1.5vh;

}

.oferta img{

    display: block;

    width: 30vh;

    height: 35vh;

    object-fit: contain;

    margin: 5vh auto;

}

.oferta h3{

    font-size: 6vh;

    color: var(--titulos);

    padding-bottom: 2vh;

}


.cta-final{

    padding: 15vh 5vw;

    text-align: center;

    color: var(--titulos);

}

.cta-final h2{

    font-size: 5vh;

}

.cta-final p{

    max-width: 65vh;

    margin: 3vh auto;

    color: #A1A1AA;

    font-size: 2vh;

    line-height: 1.6;

}


footer{

    padding: 6vh 5vw;

    text-align: center;

    color: #71717A;

    background-color: #08080A;

}

footer p{

    font-size: 1.5vh;

    padding-top: 1vh;

}


@media (max-width: 700px){

    .main-title{

        font-size: 7vh;

    }

    .second-title{

        font-size: 2.2vh;

    }

    #capa3d{

        width: 42vh;

    }

    .conheca-conteudo{

        flex-direction: column;

        text-align: center;

    }

    .cards-aprender{

        grid-template-columns: 1fr;

    }

    .conheca-jogo > h2,
    .nao-frases > h2,
    .o-que-aprender > h2,
    .para-quem > h2{

        font-size: 4vh;

    }

}

.oferta-barra{

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 7vh;

    background-color: #DC2626;

    color: #FFFFFF;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 4vh;

    z-index: 9999;

    box-sizing: border-box;

}

.oferta-barra > span{

    font-size: 2vh;

    font-weight: bold;

}

.contador{

    display: flex;

    align-items: center;

    gap: 1.5vh;

}

.contador div{

    display: flex;

    flex-direction: column;

    align-items: center;

    min-width: 5vh;

}

.contador strong{

    font-size: 2.2vh;

    line-height: 1;

}

.contador small{

    font-size: 1vh;

    margin-top: 0.5vh;

    opacity: 0.85;

}

body{

    padding-top: 7vh;

}


@media (max-width: 700px){

    .oferta-barra{

        height: 6.5vh;

        gap: 2vh;

    }

    .oferta-barra > span{

        font-size: 1.6vh;

    }

    .contador{

        gap: 0.5vh;

    }

    .contador div{

        min-width: 4vh;

    }

    .contador strong{

        font-size: 1.8vh;

    }

    .contador small{

        font-size: 0.8vh;

    }

}