@import url(reset.css);


/* =========================================================
   BANNER PRINCIPAL — MOBILE
========================================================= */

.banner-principal {
    width: 100%;
    min-height: 480px;

    padding: 0;

    display: flex;
    align-items: center;

    overflow: hidden;
}


/* =========================================================
   IMAGEM DE FUNDO
========================================================= */

.imagemBackground {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;
}

.imagemBackground img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;
}


/* =========================================================
   OVERLAY
========================================================= */

.overlayBackground {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    background: var(--corBackground);
    opacity: 0.99;
}


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

.conteudoImagem {
    position: relative;

    z-index: 2;

    width: 94%;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1.35fr 0.85fr;

    align-items: center;

    gap: 15px;
}


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

.conteudo {
    width: 100%;
    max-width: 100%;

    margin: 0;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
}


/* =========================================================
   TÍTULO
========================================================= */

.conteudo h1 {
    width: 270px;

    margin: 0 0 85px;

    font-size: var(--esp-2);

    line-height: 1.2;

    font-weight: var(--peso-2);

    color: var(--corBranca);

    text-align: left;
}


/* =========================================================
   DESCRIÇÃO
========================================================= */

.conteudo p {
    width: 270px;

    margin: 80px 0 8px;

    font-size:.7rem;

    line-height: 1.2;

    font-weight: 300;

    color: var(--corBranca);

    text-align: left;
}


/* =========================================================
   BOTÃO
========================================================= */

.botao-conheca {
    display: inline-flex;

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

    padding: 8px 10px;

    border: none;
    border-radius: 5px;

    background: var(--corPrincipal);
    color: var(--corBranca);

    text-decoration: none;

    font-size: var(--esp-7);

    font-weight: 300;

    white-space: nowrap;

    transition: 0.3s ease;
}

.botao-conheca:hover {
    transform: translateY(-2px);

    background: var(--corPrincipal);
    color: var(--corBranca);
}


/* =========================================================
   IMAGEM DO PROFESSOR
========================================================= */

.imagem {
    width: 100%;
    height: 100%;

    display: flex;

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

    overflow: visible;

    position: relative;
}

.imagem img {
    position: relative;

    width: 320px;
    max-width: none;

    height: auto;

    display: block;

    object-fit: contain;

    transform: translateX(-47%);
}



/* =========================================================
   RESPONSIVIDADE — TABLET
   768px até 1024px
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    /* -----------------------------------------------------
       BANNER PRINCIPAL
    ----------------------------------------------------- */

    .banner-principal {
        width: 100%;
        min-height: 620px;

        padding: 0;

        display: flex;
        align-items: center;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       IMAGEM DE FUNDO
    ----------------------------------------------------- */

    .imagemBackground {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;
    }

    .imagemBackground img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;

        display: block;
    }


    /* -----------------------------------------------------
       OVERLAY
    ----------------------------------------------------- */

    .overlayBackground {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        background: var(--corBackground);
        opacity: 0.99;
    }


    /* -----------------------------------------------------
       CONTEÚDO PRINCIPAL
    ----------------------------------------------------- */

    .conteudoImagem {
        position: relative;

        z-index: 2;

        width: 90%;
        max-width: 1000px;

        margin: 0 auto;

        display: grid;

        grid-template-columns: 1.2fr 0.8fr;

        align-items: center;

        gap: 25px;
    }


    /* -----------------------------------------------------
       CONTEÚDO ESQUERDO
    ----------------------------------------------------- */

    .conteudo {
        width: 100%;
        max-width: 600px;

        margin: 0;

        display: flex;

        flex-direction: column;

        align-items: flex-start;
    }


    /* -----------------------------------------------------
       TÍTULO
    ----------------------------------------------------- */

    .conteudo h1 {
        width: 100%;

        margin: 0 0 28px;

        font-size: var(--esp-1);

        line-height: 1;

        font-weight: var(--peso-3);

        color: var(--corBranca);

        text-align: left;
    }


    /* -----------------------------------------------------
       DESCRIÇÃO
    ----------------------------------------------------- */

    .conteudo p {
        width: 100%;

        margin: 0 0 25px;

        font-size: 15px;

        line-height: 1.6;

        font-weight: var(--peso-4);

        color: var(--corBranca);

        text-align: left;
    }


    /* -----------------------------------------------------
       BOTÃO
    ----------------------------------------------------- */

    .botao-conheca {
        display: inline-flex;

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

        padding: 11px 20px;

        border: none;
        border-radius: 5px;

        background: var(--corPrincipal);
        color: var(--corBranca);

        text-decoration: none;

        font-size: 14px;

        font-weight: var(--peso-4);

        white-space: nowrap;

        transition: 0.3s ease;
    }


    .botao-conheca:hover {
        transform: translateY(-2px);

        background: var(--corPrincipal);
        color: var(--corBranca);
    }


    /* -----------------------------------------------------
       IMAGEM DO PROFESSOR
    ----------------------------------------------------- */

    .imagem {
        width: 100%;
        height: 100%;

        display: flex;

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

        overflow: visible;
    }


    .imagem img {
        width: 135%;

        max-width: none;

        height: auto;

        display: block;

        object-fit: contain;

        transform: translateX(3%);
    }

}




/* =========================================================
   OBRA — MOBILE
========================================================= */

.obra {
    position: relative;

    width: 100%;
    min-height: auto;

    padding: 10px 20px 40px;

    overflow: hidden;
}


/* =========================================================
   IMAGEM DE FUNDO
========================================================= */

.obra-background {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;
}

.obra-background img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;
}


/* =========================================================
   OVERLAY
========================================================= */

.obra-overlay {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    background: var(--corBackground);

    opacity: 0.90;
}


/* =========================================================
   CONTEÚDO DA OBRA
========================================================= */

.obra-conteudo {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 100%;

    margin: 0 auto;
}


/* =========================================================
   TÍTULO PRINCIPAL
========================================================= */

.conheca {
    width: 90%;

    margin: 0 auto 35px;

    padding: 10px 12px;

    border: 4px solid var(--corPrincipal);

    display: flex;

    align-items: center;
    justify-content: center;
}

.conheca h2 {
    width: 100%;

    margin: 0;

    font-size: 1.1rem;

    line-height: 1.15;

    font-weight: var(--peso-2);

    text-align: center;

    color: var(--corBranca);
}


/* =========================================================
   CAPA + INFORMAÇÕES
========================================================= */

.capaConteudo {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0;
}


/* =========================================================
   CAPA
========================================================= */

.capa {
    width: 100%;

    display: flex;

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

    margin-bottom: 8px;
}

.capa img {
    display: block;

    width: 100%;

    max-width: 290px;

    height: auto;

    object-fit: contain;
}


/* =========================================================
   INFORMAÇÕES DA OBRA
========================================================= */

.capaConteudo .conteudo {
    width: 90%;

    display: flex;

    flex-direction: column;

    align-items: center;

    transform: none;

    

    
}


/* =========================================================
   TÍTULO DA OBRA
========================================================= */

.capaConteudo .conteudo h3 {
    width: 100%;

    max-width: 500px;

    margin: 0 0 8px ;

    font-size: var(--esp-4);

    line-height: 1;

    font-weight: var(--peso-3);

    color: var(--corBranca);

}


/* =========================================================
   DESCRIÇÃO DA OBRA
========================================================= */

.capaConteudo .conteudo p {
    width: 100%;

    max-width: 500px;

    margin: 0 0 15px;

    font-size: var(--esp-7);

    line-height: 1.2;

    font-weight: var(--peso-4);

    color: var(--corBranca);

 
}


/* =========================================================
   BOTÃO ONDE COMPRAR
========================================================= */

.capaConteudo .conteudo .onde-comprar {
    align-self: flex-start;
    
}
.onde-comprar {
    display: inline-flex;

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

    color: var(--corBranca);

    text-decoration: none;

    background-color: var(--corPrincipal);

    padding: 8px 14px;

    border-radius: 5px;

    font-size: var(--esp-6);

    font-weight: var(--peso-4);

    transition: 0.3s ease;
}

.onde-comprar:hover {
    transform: translateY(-2px);
}


/* =========================================================
   OBRA — TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    /* =====================================================
       OBRA
    ===================================================== */

    .obra {
        position: relative;

        width: 100%;
        min-height: auto;

        padding: 50px 8% 120px;

        overflow: hidden;
    }


    /* =====================================================
       IMAGEM DE FUNDO
    ===================================================== */

    .obra-background {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        z-index: 0;
    }

    .obra-background img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;

        display: block;
    }


    /* =====================================================
       OVERLAY
    ===================================================== */

    .obra-overlay {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        z-index: 1;

        background: var(--corBackground);

        opacity: 0.90;
    }


    /* =====================================================
       CONTEÚDO DA OBRA
    ===================================================== */

    .obra-conteudo {
        position: relative;

        z-index: 2;

        width: 100%;
        max-width: 850px;

        margin: 0 auto;
    }


    /* =====================================================
       TÍTULO PRINCIPAL
    ===================================================== */

    .conheca {
        width: 75%;

        margin: 0 auto 45px;

        padding: 15px 20px;

        border: 6px solid var(--corPrincipal);

        display: flex;

        align-items: center;
        justify-content: center;
    }

    .conheca h2 {
        width: 100%;

        margin: 0;

        font-size: 1.8rem;

        line-height: 1.15;

        font-weight: var(--peso-2);

        text-align: center;

        color: var(--corBranca);
    }


    /* =====================================================
       CAPA + INFORMAÇÕES
    ===================================================== */

    .capaConteudo {
        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 0;
    }


    /* =====================================================
       CAPA
    ===================================================== */

    .capa {
        width: 100%;

        display: flex;

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

        margin-bottom: 15px;
    }

    .capa img {
        display: block;

        width: 100%;

        max-width: 590px;

        height: auto;

        object-fit: contain;
    }


    /* =====================================================
       INFORMAÇÕES DA OBRA
    ===================================================== */

    .capaConteudo .conteudo {
        width: 90%;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: flex-start;

        transform: none;

        text-align: left;
    }


    /* =====================================================
       TÍTULO DA OBRA
    ===================================================== */

    .capaConteudo .conteudo h3 {
        width: 100%;

        max-width: 700px;

        margin: 0 0 12px;

        font-size: var(--esp-3);

        line-height: 1.2;

        font-weight: var(--peso-4);

        color: var(--corBranca);

        text-align: left;
    }


    /* =====================================================
       DESCRIÇÃO
    ===================================================== */

    .capaConteudo .conteudo p {
        width: 100%;

        max-width: 700px;

        margin: 0 0 25px;

        font-size: var(--esp-5);

        line-height: 1.4;

        font-weight: var(--peso-4);

        color: var(--corBranca);

        text-align: left;
    }


    /* =====================================================
       BOTÃO ONDE COMPRAR
    ===================================================== */

    .capaConteudo .conteudo .onde-comprar {
        align-self: flex-start;

        margin: 0;
    }

    .onde-comprar {
        display: inline-flex;

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

        width: fit-content;

        color: var(--corBranca);

        text-decoration: none;

        background-color: var(--corPrincipal);

        padding: 9px 16px;

        border-radius: 5px;

        font-size: var(--esp-4);

        font-weight: var(--peso-4);

        transition: 0.3s ease;
    }

    .onde-comprar:hover {
        transform: translateY(-2px);
    }

}




/* =========================================================
   INDICADORES — MOBILE
========================================================= */

.indicadores {
    width: 100%;
    max-width: 100%;

    height: auto;

    padding: 0 20px 50px;

    display: flex;
    flex-direction: column;

    gap: 0;

    background: var(--corSegundaria);
}


/* =========================================================
   COLUNA DOS INDICADORES
========================================================= */

.indicador {
    position: relative;

    width: 100%;

    padding: 30px 20px 25px;
    top: -20px;

    background-color: var(--corPrincipal);

    border-radius: 8px;

    z-index: 12;

    transform: none;
}


/* =========================================================
   TÍTULO DOS INDICADORES
========================================================= */

.indicador h3 {
    width: 60%;

    margin: 0 0 10px;

    font-size: var(--esp-3);

    line-height: 1.2;

    font-weight: var(--peso-2);

    color: var(--corPreta);


}


/* =========================================================
   DESCRIÇÃO DOS INDICADORES
========================================================= */

.descricao-indicador {
    width: 100%;

    max-width: 450px;

    margin: 0 auto 25px;

    padding: 0;

    font-size: var(--esp-5);

    line-height: 1.2;

    font-weight: var(--peso-4);

    color: var(--corPreta);

   
}


/* =========================================================
   CONTADORES
========================================================= */

.indica {
    width: 100%;

    display: grid;

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

    gap: 15px 10px;

    margin: 0;

    padding: 0;
}


/* =========================================================
   CARD ESTATÍSTICA
========================================================= */

.card-estatistica {
    width: 100%;

    padding: 5px;

    text-align: center;
}


/* =========================================================
   NÚMERO / CÍRCULO
========================================================= */

.numero {
    --progresso: 0%;

    position: relative;

    width: 80px;
    height: 80px;

    display: flex;

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

    margin: 0 auto 8px;

    border-radius: 50%;

    background: conic-gradient(
        var(--corPreta) 0%,
        var(--corPreta) var(--progresso),
        var(--corBranca) var(--progresso),
        var(--corBranca) 100%
    );

    color: var(--corPreta);

    font-size: var(--esp-7);

    font-weight: var(--peso-6);

    isolation: isolate;
}


/* =========================================================
   INTERIOR DO CÍRCULO
========================================================= */

.numero::before {
    content: "";

    position: absolute;

    inset: 5px;

    border-radius: 50%;

    background-color: var(--corPrincipal);

    z-index: -1;
}


/* =========================================================
   TEXTO DOS CARDS
========================================================= */

.card-estatistica p {
    margin: 0;

    color: var(--corPreta);

    font-size: var(--esp-7);

    font-weight: var(--peso-4);

    line-height: 1.2;


}


/* =========================================================
   COLUNA DO CONHECIMENTO
========================================================= */

.conhecimento {
    width: 100%;

    padding: 0 0;

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* =========================================================
   TÍTULO DO CONHECIMENTO
========================================================= */

.conhecimento h3 {
    width: 100%;

    margin: 0 0 10px;

    font-size: var(--esp-3);

    line-height: 1.2;

    font-weight: var(--peso-2);

    color: var(--corPrincipal);

    
}


/* =========================================================
   DESCRIÇÃO DO CONHECIMENTO
========================================================= */

.descricao-conhecimento {
    width: 100%;

    margin: 0 0 30px;

    font-size: var(--esp-6);

    line-height: 1.2;

    font-weight: 200;

    color: var(--corBranca);

    
}


/* =========================================================
   LISTA DE CONTEÚDOS
========================================================= */

.lista-conteudos {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 20px;

    
}


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

.lista-conteudos .conteudo {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    text-align: left;
}

/* =========================================================
   TÍTULOS DOS CONTEÚDOS
========================================================= */
.lista-conteudos .conteudo h4 {
    position: relative;

    width: 70%;

    margin: 0 0 8px;

   

    font-size: .8rem;

    line-height: 1;

    font-weight: var(--peso-4);

    color: var(--corPrincipal);
}

/* =========================================================
   LINHA INFERIOR DO TÍTULO
========================================================= */

.lista-conteudos .conteudo h4::after {
    content: "";

    display: block;

    width: 45%;

    height: 1px;

    margin-top: 4px;

    background-color: var(--corPrincipal);
}

/* =========================================================
   VÍDEO
========================================================= */

.video {
    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;
    background: rgba(216, 174, 118, 0.05);

   
}

.video iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;
}


/* =========================================================
   MATERIAL — LIVRO / ARTIGO
========================================================= */

.material {
    width: 100%;

    display: flex;

    flex-direction: column;

   

    gap: 15px;
}


/* =========================================================
   IMAGENS DOS MATERIAIS
========================================================= */

.material img {
    display: block;

    width: 100%;

    max-width: 280px;

    height: auto;

    object-fit: contain;

}


/* =========================================================
   BOTÃO DOS CONTEÚDOS
========================================================= */

.botao-conteudo {

        width: 80%;
    display: inline-flex;


    color: var(--corBranca);


    text-decoration: none;

  

    

    font-size: var(--esp-7);

    font-weight: var(--peso-4);

    transition: 0.3s ease;
}

.botao-conteudo:hover {
    transform: translateY(-2px);
}


/* =========================================================
   INDICADORES — TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    /* =====================================================
       INDICADORES
    ===================================================== */

    .indicadores {
        width: 100%;
        max-width: 100%;

        height: auto;

        padding: 0 8% 70px;

        display: flex;
        flex-direction: column;

        gap: 0;

        background: var(--corSegundaria);
    }


    /* =====================================================
       COLUNA DOS INDICADORES
    ===================================================== */

    .indicador {
        position: relative;

        width: 100%;

        padding: 45px 40px 40px;

        top: -35px;

        background-color: var(--corPrincipal);

        border-radius: 8px;

        z-index: 12;

        transform: none;
    }


    /* =====================================================
       TÍTULO DOS INDICADORES
    ===================================================== */

    .indicador h3 {
        width: 60%;

        margin: 0 0 15px;

        font-size: var(--esp-2);

        line-height: 1.2;

        font-weight: var(--peso-2);

        color: var(--corPreta);
    }


    /* =====================================================
       DESCRIÇÃO DOS INDICADORES
    ===================================================== */

    .descricao-indicador {
        width: 100%;

        max-width: 650px;

        margin: 0 0 35px;

        padding: 0;

        font-size: var(--esp-4);

        line-height: 1.3;

        font-weight: var(--peso-4);

        color: var(--corPreta);
    }


    /* =====================================================
       CONTADORES
    ===================================================== */

    .indica {
        width: 100%;

        display: grid;

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

        gap: 25px 20px;

        margin: 0;

        padding: 0;
    }


    /* =====================================================
       CARD ESTATÍSTICA
    ===================================================== */

    .card-estatistica {
        width: 100%;

        padding: 8px;

        text-align: center;
    }


    /* =====================================================
       NÚMERO / CÍRCULO
    ===================================================== */

    .numero {
        --progresso: 0%;

        position: relative;

        width: 90px;
        height: 90px;

        display: flex;

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

        margin: 0 auto 10px;

        border-radius: 50%;

        background: conic-gradient(
            var(--corPreta) 0%,
            var(--corPreta) var(--progresso),
            var(--corBranca) var(--progresso),
            var(--corBranca) 100%
        );

        color: var(--corPreta);

        font-size: var(--esp-6);

        font-weight: var(--peso-6);

        isolation: isolate;
    }


    /* =====================================================
       INTERIOR DO CÍRCULO
    ===================================================== */

    .numero::before {
        content: "";

        position: absolute;

        inset: 5px;

        border-radius: 50%;

        background-color: var(--corPrincipal);

        z-index: -1;
    }


    /* =====================================================
       TEXTO DOS CARDS
    ===================================================== */

    .card-estatistica p {
        margin: 0;

        color: var(--corPreta);

        font-size: var(--esp-6);

        font-weight: var(--peso-4);

        line-height: 1.2;

        text-align: center;
    }


    /* =====================================================
       COLUNA DO CONHECIMENTO
    ===================================================== */

    .conhecimento {
        width: 100%;

        padding: 15px 0 0;

        display: flex;

        flex-direction: column;

        align-items: flex-start;
    }


    /* =====================================================
       TÍTULO DO CONHECIMENTO
    ===================================================== */

    .conhecimento h3 {
        width: 100%;

        margin: 0 0 15px;

        font-size: var(--esp-2);

        line-height: 1.2;

        font-weight: var(--peso-2);

        color: var(--corPrincipal);

        text-align: left;
    }


    /* =====================================================
       DESCRIÇÃO DO CONHECIMENTO
    ===================================================== */

    .descricao-conhecimento {
        width: 100%;

        max-width: 800px;

        margin: 0 0 40px;

        font-size: var(--esp-5);

        line-height: 1.3;

        font-weight: 200;

        color: var(--corBranca);

        text-align: left;
    }


    /* =====================================================
       LISTA DE CONTEÚDOS
    ===================================================== */

    .lista-conteudos {
        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 35px;
    }


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

    .lista-conteudos .conteudo {
        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        text-align: left;
    }


    /* =====================================================
       TÍTULOS DOS CONTEÚDOS
    ===================================================== */

    .lista-conteudos .conteudo h4 {
        position: relative;

        width: 70%;

        margin: 0 0 12px;

        font-size: var(--esp-5);

        line-height: 1.15;

        font-weight: var(--peso-4);

        color: var(--corPrincipal);

        text-align: left;
    }


    /* =====================================================
       LINHA INFERIOR DO TÍTULO
    ===================================================== */

    .lista-conteudos .conteudo h4::after {
        content: "";

        display: block;

        width: 45%;

        height: 1px;

        margin-top: 6px;

        background-color: var(--corPrincipal);
    }


    /* =====================================================
       VÍDEO
    ===================================================== */

    .video {
        width: 100%;

        max-width: 800px;

        aspect-ratio: 16 / 9;

        overflow: hidden;

        background: rgba(216, 174, 118, 0.05);
    }


    .video iframe {
        width: 100%;

        height: 100%;

        display: block;

        border: 0;
    }


    /* =====================================================
       MATERIAL — LIVRO / ARTIGO
    ===================================================== */

    .material {
        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;
    }


    /* =====================================================
       IMAGENS DOS MATERIAIS
    ===================================================== */

    .material img {
        display: block;

        width: 100%;

        max-width: 340px;

        height: auto;

        object-fit: contain;
    }


    /* =====================================================
       BOTÃO DOS CONTEÚDOS
    ===================================================== */

    .botao-conteudo {
        width: 80%;

        display: inline-flex;

        align-items: center;

        justify-content: flex-start;

        color: var(--corBranca);

        text-decoration: none;

        font-size: var(--esp-6);

        font-weight: var(--peso-4);

        transition: 0.3s ease;
    }


    .botao-conteudo:hover {
        transform: translateY(-2px);
    }

}



/* =========================================================
   PROVA SOCIAL — MOBILE
========================================================= */


    .provaSocial {
        width: 100%;
        padding: 0 20px 50px;
        overflow: hidden;

        background-color: var(--corSegundaria);
    }


    /* =====================================================
       TÍTULO PRINCIPAL
    ===================================================== */

      

/* =====================================================
   TÍTULO PRINCIPAL
===================================================== */

.provaSocial > .conteudo > h2 {
    width: calc(100% + 40px);

    margin: 0 -20px;

    padding: 10px 20px 8px;

    background-color: rgba(216, 174, 118, 0.1);

    font-size: var(--esp-3);

    line-height: 1.2;

    font-weight: var(--peso-3);

    text-align: center;

    color: var(--corPrincipal);
}


/* =====================================================
   DESCRIÇÃO PRINCIPAL
===================================================== */

.provaSocial > .conteudo > p {
    width: calc(100% + 40px);

    margin: 0 -20px 10px;

    padding: 0 20px 25px;

    background-color: rgba(216, 174, 118, 0.1);

    font-size: var(--esp-7);

    line-height: 1.3;

    font-weight: var(--peso-4);

    text-align: center;

    color: var(--corBranca);
}

/* =====================================================
   JANELA DO CARROSSEL
===================================================== */
/* =====================================================
   JANELA DO CARROSSEL
===================================================== */

/* =====================================================
   PROVA SOCIAL — TABLET
===================================================== */

.provas-container {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}


/* =====================================================
   TRILHO
===================================================== */

.provas {
    display: flex;

    width: 100%;
    gap: 0;

    margin: 0;
    padding: 0;

    transition: transform 0.5s ease;
}


/* =====================================================
   CADA PROVA
===================================================== */

.prova {
    flex: 0 0 100%;

    width: 100%;
    min-width: 100%;

    margin: 0;
    padding: 0;
}


/* =====================================================
   TÍTULO
===================================================== */

.prova > h3 {
    width: 100%;

    margin: 0 0 10px;

    font-size: var(--esp-4);
    line-height: 1.2;

    font-weight: var(--peso-3);

    text-align: center;

    color: var(--corPrincipal);
}


/* =====================================================
   CARD
===================================================== */

.prova .cards {
    width: 90%;

    margin: 0 auto;

    height: 380px;

    background-color: rgba(216, 174, 118, 0.1);

    overflow: hidden;
}

/* =====================================================
       IMAGEM
    ===================================================== */

    .prova .cards img {
        display: block;

        width: 100%;

        height: 180px;

        object-fit: cover;

        margin: 0;
    }


    /* =====================================================
       LISTA
    ===================================================== */

    .prova .cards ul {
        list-style: none;

        margin: 0;

        padding: 20px;
    }


    .prova .cards li {
        margin: 0 0 10px;

        font-size: var(--esp-7);

        line-height: 1.2;

        font-weight: var(--peso-4);

        color: var(--corBranca);
    }


    .prova .cards li:last-child {
        margin-bottom: 0;
    }


    /* =====================================================
       SETAS
    ===================================================== */

    .controles-provas {
        width: 100%;

        margin-top: 15px;

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 25px;
    }


    .seta-prova {
        width: 38px;

        height: 38px;

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 0;

        border: 1px solid var(--corPrincipal);

        border-radius: 50%;

        background:var(--corPrincipal) ;


        cursor: pointer;
    }






  /* =========================================================
   PROVA SOCIAL — TABLET
   768px ATÉ 1024px
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {


    /* =====================================================
       PROVA SOCIAL
    ===================================================== */

    .provaSocial {
        width: 100%;

        padding: 0 30px 60px;

        overflow: hidden;

        background-color: var(--corSegundaria);
    }


    /* =====================================================
       TÍTULO PRINCIPAL
    ===================================================== */

 /* =====================================================
   TÍTULO PRINCIPAL
===================================================== */

.provaSocial > .conteudo > h2 {

    width: calc(100% + 60px);

    margin: 0 80px;

    padding: 14px 30px 10px;

    background-color: rgba(216, 174, 118, 0.1);

    display: flex;


    font-size: var(--esp-3);
    line-height: 1.2;
    font-weight: var(--peso-3);

    text-align: center;
      justify-content: center;
    align-items: center;

    color: var(--corPrincipal);
}


/* =====================================================
   DESCRIÇÃO PRINCIPAL
===================================================== */

.provaSocial > .conteudo > p {

    width: calc(100% + 60px);

    margin: 0 80px 15px;

    padding: 0 30px 30px;

    background-color: rgba(216, 174, 118, 0.1);

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

    font-size: var(--esp-7);
    line-height: 1.3;
    font-weight: var(--peso-4);

    text-align: center;

    color: var(--corBranca);
}

    /* =====================================================
       JANELA DO CARROSSEL
    ===================================================== */

    .provas-container {

        width: 95%;

        margin: 0 auto;

        overflow: hidden;
    }


    /* =====================================================
       TRILHO
    ===================================================== */

    .provas {

        display: flex;

        width: 100%;

        gap: 0;

        margin: 0;

        padding: 0;

        transition: transform 0.5s ease;
    }


    /* =====================================================
       CADA PROVA
    ===================================================== */

    .prova {

        flex: 0 0 100%;

        width: 100%;

        min-width: 100%;

        margin: 0;

        padding: 0;
    }


    /* =====================================================
       TÍTULO DA PROVA
    ===================================================== */

    .prova > h3 {

        width: 100%;

        margin: 0 0 10px;

        font-size: var(--esp-4);

        line-height: 1.2;

        font-weight: var(--peso-3);

        text-align: center;

        color: var(--corPrincipal);
    }


    /* =====================================================
       CARD
    ===================================================== */

    .prova .cards {

        width: 93%;

        margin: 0 auto;

        height: 380px;

        background-color: rgba(216, 174, 118, 0.1);

        overflow: hidden;
    }


    /* =====================================================
       IMAGEM
    ===================================================== */

    .prova .cards img {

        display: block;

        width: 100%;

        height: 210px;

        object-fit: cover;

        margin: 0;
    }


    /* =====================================================
       LISTA
    ===================================================== */

    .prova .cards ul {

        list-style: none;

        margin: 0;

        padding: 25px;
    }


    .prova .cards li {

        margin: 0 0 12px;

        font-size: var(--esp-6);

        line-height: 1.3;

        font-weight: var(--peso-4);

        color: var(--corBranca);
    }


    .prova .cards li:last-child {

        margin-bottom: 0;
    }


    /* =====================================================
       SETAS
    ===================================================== */

    .controles-provas {

        width: 100%;

        margin-top: 18px;

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 25px;
    }


    .seta-prova {
    width: 40px;
    height: 40px;

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

    padding: 0;

    border: 1px solid var(--corPrincipal);
    border-radius: 50%;

   background:var(--corPrincipal) ;

    

    cursor: pointer;
}


}