@charset "UTF-8";


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {
    background-color: #ffffff;

    color: #2b211a;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}


img {
    display: block;

    max-width: 100%;
}


ul {
    list-style: none;
}


a {
    color: inherit;

    text-decoration: none;
}



/* =========================================================
   VARIÁVEIS
   ========================================================= */

:root {

    --cor-fundo: #ffffff;

    --cor-fundo-card: #cfc9b9;

    --cor-texto: #2b211a;

    --cor-texto-suave: #5a4c3f;

    --cor-botao: #00ff00;

    --cor-couro: #6e4425;

    --cor-couro-escuro: #3c2413;

    --cor-latao: #b8863b;

    --cor-latao-claro: #d9ae6a;

    --cor-oliva: #48512f;

    --cor-oliva-escura: #333b23;

    --cor-borda: rgba(43, 33, 26, 0.14);

    --cor-sombra: rgba(43, 33, 26, 0.18);


    --esp-1: 0.5rem;

    --esp-2: 1rem;

    --esp-3: 1.5rem;

    --esp-4: 2.5rem;

    --esp-5: 4rem;

    --esp-6: 6rem;


    --largura-maxima: 1140px;

    --raio: 10px;

    --raio-pequeno: 6px;
}



/* =========================================================
   TIPOGRAFIA
   ========================================================= */

h1,
h2,
h3 {
    line-height: 1.1;
}


h1,
h2 {
    font-weight: 800;
}


h1 {
    font-size: clamp(
        1.9rem,
        5vw,
        3.2rem
    );
}


h2 {
    font-size: clamp(
        1.5rem,
        4vw,
        2.4rem
    );

    text-align: center;
}


h3 {
    font-size: clamp(
        1.05rem,
        2vw,
        1.4rem
    );
}


p {
    color: var(--cor-texto-suave);
}



/* =========================================================
   ESTRUTURA
   ========================================================= */

section {
    padding:
        var(--esp-6)
        var(--esp-2);
}


section > * {
    width: 100%;

    max-width: var(--largura-maxima);

    margin-left: auto;

    margin-right: auto;
}



/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

a:focus-visible,
summary:focus-visible {
    outline:
        3px solid
        var(--cor-latao);

    outline-offset: 3px;
}



/* =========================================================
   BOTÕES
   ========================================================= */

@keyframes pulsarBotao {

    0%,
    100% {

        transform:
            scale(1);

        box-shadow:
            0 8px 20px -8px
            var(--cor-sombra),

            0 0 0 0
            rgba(0, 255, 0, 0.35);
    }


    50% {

        transform:
            scale(1.025);

        box-shadow:
            0 8px 20px -8px
            var(--cor-sombra),

            0 0 18px 4px
            rgba(0, 255, 0, 0.35);
    }

}


.botao {

    display: block;

    width: fit-content;

    margin:
        var(--esp-4)
        auto
        0;

    padding:
        1rem
        2rem;

    background-color:
        var(--cor-botao);

    color:
        var(--cor-couro-escuro);

    border-radius:
        var(--raio-pequeno);

    font-size:
        0.95rem;

    font-weight:
        800;

    line-height:
        1.25;

    letter-spacing:
        0.02em;

    text-align:
        center;

    text-transform:
        uppercase;

    box-shadow:
        0 8px 20px -8px
        var(--cor-sombra);

    animation:
        pulsarBotao
        2.4s
        ease-in-out
        infinite;
}


.botao:hover {

    filter:
        brightness(0.94);
}



/* =========================================================
   HERO
   ========================================================= */

#header {

    min-height:
        100vh;

    padding:
        0
        20px;

    background-image:
        url("fotos/capaMobile.webp");

    background-size:
        cover;

    background-position:
        center bottom;

    background-repeat:
        no-repeat;

    text-align:
        center;
}


.heroConteudo {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    width:
        100%;

    max-width:
        390px;

    margin:
        0 auto;

    padding-top:
        40px;
}


.heroConteudo h1 {

    margin:
        0;

    color:
        #f8f2e4;

    font-size:
        1.7rem;

    font-weight:
        900;

    line-height:
        1.08;

    text-transform:
        uppercase;
}


.heroConteudo p {

    width:
        90%;

    margin:
        18px auto 0;

    color:
        #e3d7c2;

    font-size:
        0.9rem;

    line-height:
        1.3;
}


.heroConteudo .botao {

    width:
        90%;

    margin-top:
        18px;

    padding:
        0.8rem
        1.5rem;

    border-radius:
        999px;
}



/* =========================================================
   DOR
   ========================================================= */

#dor {

    background-color:
        var(--cor-oliva);

    text-align:
        center;
}


#dor h2 {

    color:
        #f5f1e6;
}


#dor > div {

    margin-top:
        var(--esp-4);
}


#dores {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        var(--esp-2);

    max-width:
        640px;

    margin:
        0 auto;

    text-align:
        left;
}


.dores {

    position:
        relative;

    padding:
        var(--esp-2)
        var(--esp-3);

    padding-left:
        var(--esp-5);

    background-color:
        rgba(
            250,
            246,
            236,
            0.06
        );

    color:
        #f1ede1;

    border:
        1px solid
        rgba(
            250,
            246,
            236,
            0.15
        );

    border-radius:
        var(--raio-pequeno);

    font-weight:
        500;
}


.dores::before {

    content:
        "×";

    position:
        absolute;

    top:
        50%;

    left:
        var(--esp-2);

    transform:
        translateY(-50%);

    color:
        var(--cor-latao-claro);

    font-size:
        1.3rem;

    font-weight:
        800;
}


.se {

    max-width:
        640px;

    margin:
        var(--esp-4)
        auto
        0;

    color:
        #f1ede1;

    font-size:
        1.05rem;
}


.se + .se {

    margin-top:
        var(--esp-2);

    color:
        var(--cor-latao-claro);

    font-style:
        italic;
}


.forte {

    color:
        var(--cor-latao-claro);
}



/* =========================================================
   CONTEÚDO
   ========================================================= */

#conteudo {

    background-color:
        var(--cor-couro-escuro);

    text-align:
        center;
}


#conteudo h2 {

    color:
        #f8f2e4;
}


#conteudoCurso {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        var(--esp-3);

    margin-top:
        var(--esp-5);

    counter-reset:
        modulo;
}


.conteudo {

    position:
        relative;

    padding:
        var(--esp-4)
        var(--esp-3);

    background-color:
        rgba(
            250,
            246,
            236,
            0.05
        );

    border:
        1px solid
        rgba(
            250,
            246,
            236,
            0.15
        );

    border-radius:
        var(--raio);

    counter-increment:
        modulo;
}


.conteudo::before {

    content:
        counter(modulo);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

    margin:
        0 auto
        var(--esp-2);

    background-color:
        var(--cor-latao);

    color:
        var(--cor-couro-escuro);

    border-radius:
        50%;

    font-size:
        1.2rem;

    font-weight:
        800;
}


.conteudo h3 {

    margin-bottom:
        0.4rem;

    color:
        var(--cor-latao-claro);
}


.conteudo p {

    color:
        #e3d7c2;
}



/* =========================================================
   PARA QUEM É
   ========================================================= */

#publico {

    background-color:
        var(--cor-fundo);
}


#publico h2 {

    margin-bottom:
        var(--esp-5);

    color:
        var(--cor-couro-escuro);
}


.listaPublico {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        var(--esp-3);
}


.publicoAlvo {

    display:
        flex;

    align-items:
        center;

    gap:
        var(--esp-2);

    padding:
        var(--esp-3);

    background-color:
        var(--cor-fundo);

    border:
        1px solid
        var(--cor-borda);

    border-left:
        4px solid
        var(--cor-couro);

    border-radius:
        var(--raio-pequeno);
}


.icone {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 34px;

    width:
        34px;

    height:
        34px;

    color:
        var(--cor-couro);

    font-size:
        1.4rem;

    font-weight:
        800;
}


.cabecalhoPublico h3 {

    color:
        var(--cor-texto);
}


.publicoAlvo:last-child {

    background-color:
        #fce1e1;

    border-left-color:
        var(--cor-latao);
}


.publicoAlvo:last-child .icone {

    color:
        var(--cor-latao);
}



/* =========================================================
   PROFESSOR
   ========================================================= */

#professor {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        var(--esp-3);

    max-width:
        100%;

    background:
        linear-gradient(
            180deg,
            rgba(
                247,
                216,
                192,
                0.9
            )
            80%,

            rgba(
                255,
                240,
                227,
                0.8
            )
            100%
        ),

        url("fotos/jvFundo.webp");

    background-size:
        cover;

    background-position:
        center top;

    background-repeat:
        no-repeat;

    text-align:
        center;
}


#professor h2 {

    margin-bottom:
        var(--esp-3);

    color:
        var(--cor-couro-escuro);
}


#professor img {

    width:
        260px;

    height:
        260px;

    object-fit:
        cover;

    border:
        4px solid
        var(--cor-latao);

    border-radius:
        50%;

    box-shadow:
        0 12px 24px -10px
        var(--cor-sombra);
}


#professor > p {

    max-width:
        500px;

    text-align:
        center;
}



/* =========================================================
   COMO FUNCIONA
   ========================================================= */

#comoFunciona {

    background-color:
        var(--cor-oliva-escura);

    text-align:
        center;
}


#comoFunciona h2 {

    margin-bottom:
        var(--esp-5);

    color:
        #f5f1e6;
}


.listaPublico2 {

    display:
        grid;

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

    gap:
        var(--esp-3);
}


.publicoAlvo2 {

    padding:
        var(--esp-4)
        var(--esp-2);

    background-color:
        rgba(
            250,
            246,
            236,
            0.06
        );

    border:
        1px solid
        rgba(
            250,
            246,
            236,
            0.15
        );

    border-radius:
        var(--raio);
}


.iconeGrande {

    display:
        block;

    margin-bottom:
        var(--esp-1);

    color:
        var(--cor-latao-claro);

    font-size:
        1.7rem;

    font-weight:
        700;
}


.cabecalhoPublico2 h3 {

    color:
        #f1ede1;

    font-size:
        1rem;
}



/* =========================================================
   OFERTA
   ========================================================= */

#oferta {

    background-color:
        var(--cor-fundo);

    text-align:
        center;
}


#oferta > h2 {

    margin-bottom:
        var(--esp-4);

    color:
        var(--cor-couro-escuro);
}


#listaOferta {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        var(--esp-2);

    max-width:
        480px;

    margin:
        0 auto;

    text-align:
        left;
}


.ofertaConteudo {

    display:
        flex;

    align-items:
        center;

    gap:
        var(--esp-2);
}


.check {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 25px;

    width:
        25px;

    height:
        25px;

    background-color:
        var(--cor-oliva);

    color:
        #ffffff;

    border-radius:
        50%;

    font-size:
        0.8rem;

    font-weight:
        900;
}


.ofertaConteudo h3 {

    font-weight:
        600;
}


.preco {

    width:
        100%;

    max-width:
        520px;

    margin:
        var(--esp-5)
        auto
        0;

    padding:
        var(--esp-4);

    background-color:
        var(--cor-couro-escuro);

    border:
        2px dashed
        var(--cor-latao);

    border-radius:
        var(--raio);

    box-shadow:
        0 16px 32px -14px
        var(--cor-sombra);
}


.textoPreco {

    color:
        var(--cor-latao-claro);

    font-size:
        0.8rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;
}


.preco h3 {

    margin-top:
        var(--esp-2);

    color:
        #e3d7c2;

    font-size:
        1rem;

    font-weight:
        400;
}


.precoAntigo {

    color:
        #a8967f;

    text-decoration:
        line-through;
}


.preco h2 {

    margin-top:
        0.4rem;

    color:
        #f8f2e4;
}


.avista {

    margin-top:
        var(--esp-1);

    color:
        #d9cbb6;

    font-size:
        0.85rem;
}


#oferta .botao {

    margin-top:
        var(--esp-5);
}



/* =========================================================
   FAQ
   ========================================================= */

#faq {

    background-color:
        var(--cor-fundo-card);
}


#faq h2 {

    color:
        var(--cor-couro-escuro);
}


.faqSubtitulo {

    max-width:
        480px;

    margin:
        var(--esp-1)
        auto
        var(--esp-4);

    text-align:
        center;
}


.faqContainer {

    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--esp-2);

    max-width:
        720px;

    margin:
        0 auto;
}


details {

    padding:
        var(--esp-2)
        var(--esp-3);

    background-color:
        var(--cor-fundo-card);

    border:
        1px solid
        var(--cor-borda);

    border-radius:
        var(--raio-pequeno);
}


summary {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        var(--cor-couro-escuro);

    cursor:
        pointer;

    font-weight:
        600;

    list-style:
        none;
}


summary::-webkit-details-marker {

    display:
        none;
}


summary::after {

    content:
        "+";

    color:
        var(--cor-latao);

    font-size:
        1.3rem;
}


details[open] summary::after {

    content:
        "×";
}


details p {

    margin-top:
        var(--esp-2);

    font-size:
        0.95rem;
}



/* =========================================================
   RODAPÉ
   ========================================================= */

#footer {

    padding:
        var(--esp-5)
        var(--esp-2);

    background-color:
        var(--cor-couro-escuro);
}


.footerContainer {

    max-width:
        var(--largura-maxima);

    margin:
        0 auto;

    text-align:
        center;
}


.footerContainer h2 {

    color:
        #f8f2e4;
}


.footerDescricao {

    max-width:
        520px;

    margin:
        var(--esp-2)
        auto
        0;

    color:
        #d9cbb6;
}


.footerLinha {

    width:
        60px;

    height:
        2px;

    margin:
        var(--esp-4)
        auto;

    background-color:
        var(--cor-latao);
}


.footerRodape {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.4rem;

    color:
        #a8967f;

    font-size:
        0.85rem;
}


.footerRodape p {

    color:
        #a8967f;
}


.footerRodape span {

    color:
        var(--cor-latao-claro);

    font-weight:
        600;
}



/* =========================================================
   ANIMAÇÃO AO ROLAR
   ========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(28px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


.reveal.visivel {

    opacity:
        1;

    transform:
        translateY(0);
}



/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 900px) {


    #header {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        min-height:
            100vh;

        padding:
            0 52% 0 6%;

        background-image:
            url("fotos/capaDesktop.webp");

        background-position:
            center;
    }


    .heroConteudo {

        max-width:
            650px;

        padding-top:
            0;
    }


    .heroConteudo h1 {

        max-width:
            650px;

        margin:
            0 auto;

        font-size:
            2.3rem;
    }


    .heroConteudo p {

        max-width:
            580px;

        font-size:
            1rem;
    }


    .heroConteudo .botao {

        width:
            100%;

        max-width:
            520px;

        margin-top:
            28px;

        padding:
            18px
            20px;

        font-size:
            1rem;
    }


    #conteudoCurso {

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


    .listaPublico {

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


    .listaPublico2 {

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

}



/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {


    html {

        scroll-behavior:
            auto;
    }


    .botao {

        animation:
            none;
    }


    .reveal {

        opacity:
            1;

        transform:
            none;

        transition:
            none;
    }

}