.comentario-feedback {
        min-height: 24px;
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.5;
    }

    .comentario-feedback.a-enviar {
        color: #6d625b;
    }

    .comentario-feedback.sucesso {
        color: #2f7d4a;
    }

    .comentario-feedback.erro {
        color: #a33a3a;
    }
    /* =====================================================
       PRINCIPAL
    ===================================================== */

    .principal {
        width: 100%;
    }


    /* =====================================================
       ÁREA PRINCIPAL
    ===================================================== */

    .imagemBackground {
        position: relative;

        width: 100%;
        min-height: auto;

        overflow: hidden;

        display: flex;
        flex-direction: column;
        align-items: center;

        padding: 15px 20px 20px;
    }


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

    .imagemBackground > img {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        object-fit: cover;

        z-index: 0;
    }


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

    .imagemBackground::before {
        content: "";

        position: absolute;

        inset: 0;

        background: rgba(32, 27, 19, 0.45);

        z-index: 1;
    }


    /* =====================================================
       CONTEÚDOS
    ===================================================== */

    .imagemBackground .conteudos {
        position: relative;

        z-index: 2;

        width: 100%;

        padding: 0;

        display: contents;
    }


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

    .imagemBackground .conteudos h2 {
        position: relative;

        z-index: 3;

        order: 1;

        width: 95%;


        margin: 0 0 25px;

        padding: 0 0 12px;

        color: var(--corBranca);

        font-size: var(--tituloMobile);

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

        line-height: 1.2;

        text-align: left;
    }


    /* =====================================================
       LINHA DECORATIVA
    ===================================================== */

    .imagemBackground .conteudos h2::before {
        content: "";

        position: absolute;

        left: 45%;
        bottom: 0;

        transform: translateX(-50%);

        width: 90%;
        height: 1px;

        background: linear-gradient(
            to right,
            var(--corPrincipal) 0,
            var(--corPrincipal) 60px,
            color-mix(
                in srgb,
                var(--corPrincipal) 30%,
                transparent
            ) 20px,
            color-mix(
                in srgb,
                var(--corPrincipal) 30%,
                transparent
            ) 100%
        );
    }


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

    .imagemBackground .img {
        position: relative;

        z-index: 2;

        order: 2;

        top: 10px;
        right: auto;

        transform: none;

        width: 95%;
        max-width: 360px;

        height: 290px;

        margin: 0 auto 5px;

        background-color: var(--corSegundaria);

            border-radius: 8px;
    }


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

    .imagemBackground .img img {
        position: absolute;

        z-index: 1;

        display: block;

        width: 100%;
        height: 290px;

        object-fit: cover;

        top: -25px;
        right: -20px;
            border-radius: 8px;
    }


    /* =====================================================
       TEXTO
    ===================================================== */

    .imagemBackground .conteudos p {
        position: relative;

        z-index: 3;

        order: 3;

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

        margin: 15px 0 0 20px;

        padding: 0;

        color: var(--corBranca);

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

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

        line-height: 1.2;

       
    }



       /* =====================================================
       ACADEMIA
    ===================================================== */

    .aprenderes {
        width: 100%;
        padding: 20px 0;
        overflow: hidden;
    }


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

    .aprenderes .aprender {
        width: 90%;

        margin: 0 auto;
        padding: 18px 5%;

        background-color: rgba(219, 174, 118, 0.10);

        border-radius: 25px;

        text-align: center;

        box-sizing: border-box;
    }


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

    .aprenderes .aprender h3 {
        margin: 0 0 10px;

        color: var(--corBranca);

        font-size: var(--esp-3);
        font-weight: var(--peso-2);

        line-height: 1.2;

        text-align: center;
    }


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

    .aprenderes .aprender p {
        width: 100%;
        max-width: 650px;

        margin: 0 auto;

        color: var(--corBranca);

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

        line-height: 1.4;

        text-align: center;
    }







/* =========================================================
   CORPO DO ARTIGO
========================================================= */

.corpo {
    width: 100%;
    max-width: 100%;
    margin: 30px auto;
    padding: 0 20px;
    box-sizing: border-box;
}


/* =========================================================
   TEXTO
========================================================= */

.corpo p {
    margin: 0 0 20px;
    font-size: 0.95rem;
    line-height: 1.7;
    font-weight: var(--peso-3);
    text-align: left;
}


.corpo p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TÍTULOS
========================================================= */

.corpo h1,
.corpo h2,
.corpo h3,
.corpo h4,
.corpo h5,
.corpo h6 {
    margin-top: 25px;
    margin-bottom: 12px;
    line-height: 1.35;
    text-align: left;
}


.corpo h1 {
    font-size: 1.7rem;
}

.corpo h2 {
    font-size: 1.45rem;
}

.corpo h3 {
    font-size: 1.25rem;
}

.corpo h4 {
    font-size: 1.1rem;
}

.corpo h5 {
    font-size: 1rem;
}

.corpo h6 {
    font-size: 0.95rem;
}


/* =========================================================
   IMAGENS
========================================================= */

.corpo img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 25px auto;
    border-radius: 6px;
}


/* =========================================================
   VÍDEOS
========================================================= */

.corpo iframe,
.corpo iframe.ql-video,
.corpo iframe[src*="youtube"],
.corpo iframe[src*="youtu.be"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin: 25px auto !important;
    border-radius: 7px !important;
}


/* =========================================================
   LISTAS
========================================================= */

.corpo ul,
.corpo ol {
    margin: 0 0 20px;
    padding-left: 25px;
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: left;
}


.corpo li {
    margin-bottom: 7px;
}


/* =========================================================
   CITAÇÕES
========================================================= */

.corpo blockquote {
    margin: 25px 0;
    padding: 15px 18px;
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: left;
}


/* =========================================================
   TABELAS
========================================================= */

.corpo table {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin: 25px 0;
    font-size: 0.8rem;
    white-space: nowrap;
}


.corpo th,
.corpo td {
    padding: 8px 10px;
}


/* =========================================================
   CÓDIGO
========================================================= */

.corpo pre {
    width: 100%;
    margin: 25px 0;
    padding: 15px;
    overflow-x: auto;
    font-size: 0.78rem;
}


/* =========================================================
   ÁREA DE COMENTÁRIO
========================================================= */

.area-comentario {
    width: calc(100%);
    max-width: 100%;
    margin: 35px auto 30px;
    padding: 22px 18px;
    box-sizing: border-box;
    border-radius: 14px;
}


/* =========================================================
   FORMULÁRIO
========================================================= */

.formulario-comentario {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}


/* =========================================================
   TEXTAREA
   PRIMEIRO ELEMENTO
========================================================= */

.campo-comentario {
    width: 100%;
    display: flex;
    flex-direction: column;
}


.campo-comentario textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px 14px;
    margin: 0 0 8px;
    box-sizing: border-box;
    resize: vertical;
    font-size: 0.7rem;
    line-height: 1.5;
    border-radius: 5px;
    font-weight: var(--peso-4);
}


/* =========================================================
   NOME + E-MAIL
   MESMA LINHA
========================================================= */
.linha-dados {
width: 100%;
display: flex;
flex-direction: row;
gap: 5px;
margin: 0 auto;
}

.linha-dados .campo {
flex: 1;
width: auto;
}


/* =========================================================
   INPUTS
========================================================= */

.campo input {
    width: 100%;
    height: 37px;
    padding: 0 14px;
    box-sizing: border-box;
    font-size: 0.7rem;
        font-weight: var(--peso-4);
    border-radius: 5px;

      color: var(--corBranca);
}


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

.botao-comentario {
    width: auto;
    min-height: 32px;
    align-self: flex-start;
    padding: 7px 10px;
    margin: 4px 0 0;
    border-radius: 5px;
    font-size: var(--esp-7);
    color: var(--corBranca);

    background-color: var(--corSegundaria);

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



.livros {
    width: 90%;
    margin: 0 auto;
    padding: 0;
}

.livros h2{
    font-size: var(--esp-3);
    font-weight: var(--peso-1);
    text-align: center;
     margin: 0 0 5px;
}


/* =========================================================
   LISTA DE ARTIGOS
========================================================= */

/* =========================================================
   LISTA DE ARTIGOS
========================================================= */

.livros .lista-livros {
    width: 100%;
    margin: 0 auto 30px;

    display: block;
}


/* =========================================================
   CARD DO ARTIGO
========================================================= */

.livros .livro {
    width: 100%;
    overflow: hidden;

    background-color: rgba(219, 174, 118, 0.10);

    border-radius: 6px;

    transition: .3s ease;

    box-sizing: border-box;
}

.livros .livro {
    display: none;
}

.livros .livro.ativo {
    display: block;
}

/* =========================================================
   HOVER DO CARD
========================================================= */

.livros .livro:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(0, 0, 0, .8);
}

/* =========================================================
   IMAGEM / CAPA DO ARTIGO
========================================================= */

.livros .livro > img {
    width: 85%;
    height: 300px;

    margin: 10px auto 0;

    display: block;

    object-fit: cover;

    border-radius: 8px;
}


/* =========================================================
   CATEGORIA
========================================================= */

.livros .categoriaAno {
    width: 100%;

    padding: 5px 20px 0;

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

    box-sizing: border-box;
}


.livros .categoriaAno p {
    margin: 0;

    color: var(--corBranca);

    font-size: .62rem;
    font-weight: 200;

    line-height: 1.3;

    font-style: italic;
}


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

.livros .livro .conteudo {
    width: 100%;

    padding: 8px 20px 18px;

    box-sizing: border-box;
}


/* =========================================================
   TÍTULO DO ARTIGO
========================================================= */

.livros .livro .conteudo h4 {
    margin: 0 0 7px;

    color: var(--corBranca);

    font-size: var(--esp-5);
    font-weight: var(--peso-4);

    line-height: 1.3;
}


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

.livros .livro .conteudo p {
    margin: 0 0 10px;

    color: var(--corBranca);

    font-size: .70rem;
    font-weight: var(--peso-4);

    line-height: 1.4;
}


/* =========================================================
   LINK — LER ARTIGO
========================================================= */

.livros .livro .conteudo a {
    display: inline-flex;

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

    gap: 4px;

    color: var(--corBranca);

    text-decoration: none;

    font-size: .70rem;
    font-weight: var(--peso-4);

    border-radius: 4px;

    transition: .3s ease;
}


/* =========================================================
   SETA DO LINK
========================================================= */

.livros .livro .conteudo a img {
    width: 10px;
    height: 10px;

    display: block;

    object-fit: contain;
}


/* =========================================================
   HOVER DO LINK
========================================================= */

.livros .livro .conteudo a:hover {
    color: var(--corPrincipal);

    transform: translateY(-2px);
}


/* =========================================================
   PAGINAÇÃO
========================================================= */

.paginacao {
    width: 100%;

    margin-top: 20px;

    display: flex;
    flex-direction: column;

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

    gap: 8px;
}


/* =========================================================
   CONTADOR
========================================================= */

.contador-paginacao {
    color: var(--azulEscuro);

    font-size: .8rem;
    font-weight: var(--peso-4);

    text-align: center;
}


/* =========================================================
   BOTÕES DA PAGINAÇÃO
========================================================= */

.paginacao-botoes {
    display: flex;

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

    gap: 10px;
}


.paginacao button {
    width: 28px;
    height: 28px;

    padding: 0;
    margin: 0;

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

    border: none;
    outline: none;

    border-radius: 50%;

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

    cursor: pointer;

    transition:
        background-color .3s ease,
        opacity .3s ease,
        transform .2s ease;
}


.paginacao button img {
    width: 9px;
    height: 9px;

    object-fit: contain;

    background: transparent;

    transition: transform .3s ease;
}


/* =========================================================
   SETA ANTERIOR
========================================================= */

.pagina-anterior img {
    transform: rotate(180deg);
}


/* =========================================================
   SETA PRÓXIMA
========================================================= */

.pagina-proxima img {
    transform: rotate(0deg);
}


/* =========================================================
   HOVER DOS BOTÕES
========================================================= */

.paginacao button:not(:disabled):hover {
    background-color: var(--corPrincipal);

    transform: scale(1.05);
}


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

.paginacao button:disabled {
    opacity: .35;

    cursor: default;

    transform: none;
}


/* =========================================================
   CONTEÚDOS — MOBILE
========================================================= */

.conteudos {
    width: 95%;
    margin: 10px auto;

    text-align: center;
}


.conteudos h3 {
    margin: 0 0 4px;

    color: var(--corBranca);

    font-size: var(--esp-3);
    font-weight: var(--peso-2);

    line-height: 1.3;

    text-align: center;
}


.conteudos p {
    width: 100%;
    max-width: 500px;

    margin: 0 auto;

    color: var(--corBranca);

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

    line-height: 1.4;

    text-align: center;
}





/* =========================================================
   RESPONSIVIDADE — TABLET
   768px ATÉ 1024px
========================================================= */

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


  /* =====================================================
       SOBRE — ÁREA PRINCIPAL
    ===================================================== */

    .imagemBackground {
        padding: 25px 5% 30px;
    }

    .imagemBackground .conteudos h2 {
        width: 90%;

        font-size: var(--tituloMobile);

        margin-bottom: 30px;
    }

    .imagemBackground .img {
        width: 90%;
        max-width: 600px;

        height: 380px;

        margin-bottom: 10px;
    }

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

        top: -30px;
        right: -25px;
    }

    .imagemBackground .conteudos p {
        width: 90%;
        max-width: 700px;

        margin: 20px auto 0;

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


    /* =====================================================
       ACADEMIA
    ===================================================== */

    .aprenderes {
        padding: 30px 0;
    }


    .aprenderes .aprender {
        width: 90%;

        padding: 25px 8%;

        border-radius: 25px;
    }


    .aprenderes .aprender h3 {
        margin-bottom: 12px;

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

        line-height: 1.3;
    }


    .aprenderes .aprender p {
        max-width: 750px;

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

        line-height: 1.5;
    }



}