@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");

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

body {
    margin: 0;
    background-color: #f5f2f5;
    font-family: Inter, sans-serif;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol {
    margin: 0;
}

ul,
ol {
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

.destaque-bold {
    font-weight: 600;
    color: white;
}

.nao-quebra {
    white-space: nowrap;
}

/* =========================
   BASE (mobile-first)
========================= */

.conteudo_pagina {
    display: block;
}

/* ---------- KV ---------- */

.container_kv-curso {
    background-color: #c5cdce;
}

.box_kv-curso {
    display: flex;
    justify-content: center;
}

.kv-curso_imagem {
    display: block;
    width: 100%;
    height: auto;
    max-width: 640px;
    margin: 0 auto;
}

/* ---------- INTRO ---------- */

.container_intro {
    background-color: #2a2f33;
    color: #dddfe0;
    padding: 0 25px 25px 25px;
}

.block_intro {
    max-width: 825px;
    margin: 0 auto;
    position: relative;
    padding: 29px 0 0 0;
}

.selo-edicao {
    position: absolute;
    top: -4px;
    left: 61%;
    width: 91px;
    }

.titulo_intro {
    margin: 0 0 26px 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: white;
}

.titulo_intro span {
    display: block;
    font-weight: 400;
    padding: 0 0 9px 0;
    font-size: 19px;
    color: #dddfe0;
}

.intro_paragrafo {
    margin: 0 0 16px 0;
    line-height: 160%;
    font-size: 17px;
    font-weight: 300;
    letter-spacing: 0.01em;
}

.intro_paragrafo:last-child {
    margin-bottom: 0;
}







/* =========================
   PAINEL – layout aprovado
========================= */


/* =========================
   PAINEL – desktop aprovado + mobile adaptado
========================= */

/* MOBILE FIRST: fundo único (sem divisão) */
.container_painel {
    background-color: #d7dfe2;
}

.block_painel {
    max-width: 933px;
    margin: 0 auto;
}

.painel_conteudo {
    display: grid;
    grid-template-columns: 1fr;
}

/* Títulos ocultos acessíveis */
.painel_titulo-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* =========================
   COLUNAS
========================= */

.painel_coluna {
    padding: 48px 40px;
    box-sizing: border-box;
}

.painel_coluna-inscricao {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    color: #111;
}

/* =========================
   COLUNA ESQUERDA (como no print)
   - título centralizado
   - conteúdo alinhado à direita
========================= */

.painel_coluna-info {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.painel_info {

    width: 100%;
    color: #111;
    /* <- chave: conteúdo à direita */
}

/* Título central */
.painel_info-titulo {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 26px;
    text-transform: uppercase;
}

/* Destaques 50h / 140 vagas */
.painel_info_destaques {
    margin-bottom: 28px;
}

.painel_info-destaque {
    font-size: 22px;
    font-weight: 800;
    margin: 6px 0;
}

/* Linhas informativas (direita, como no print) */


.painel_info-linha {
    font-size: 18px;
    line-height: 150%;
    margin: 18px 0 0 0;
}

.painel_info-linha strong {
    font-weight: 800;
}

/* =========================
   COLUNA DIREITA
========================= */

.painel_texto {
    font-size: 18px;
    line-height: 145%;
    margin-bottom: 18px;
}

.painel_texto strong {
    font-weight: 800;
}

.painel_certificado {
    margin: 22px 0 56px 0;
}

.painel_certificado-imagem {
    display: block;
    max-width: 166px;
    /* seu ajuste */
    width: 100%;
    height: auto;
}

/* BOTÃO */
.painel_botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 100%;
    max-width: 360px;

    background-color: #00e39a;
    color: #0b1b16;

    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    border-radius: 6px;
    box-shadow: 6px 6px 0 #22323a;
    transition: 0.15s ease;
}

.painel_botao:active {
    transform: translate(2px, 2px);
    box-shadow: 4px 4px 0 #22323a;
}

.painel_botao:hover,
.cta-final_botao:hover {
    filter: brightness(1.08) saturate(1.15);
}






/* =========================
   DOCENTES – layout aprovado (mobile-first)
========================= */




.container_docentes {
    background-color: #ecf1f5;
    padding: 48px 0 60px 0;
}

.block_docentes {
    max-width: 825px;
    margin: 0 auto;
    padding: 0 25px;
    box-sizing: border-box;
}

.titulo_docentes {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    color: #2f3b40;
    margin: 0 0 36px 0;
}

/* lista */
.docentes_lista {
    list-style: none;
    display: grid;
    gap: 34px;
}

/* item = empilhado no mobile */
.card_docente {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 16px;
    justify-items: center;
    text-align: center;
}

/* foto circular com aro */
.docente_midia {
    display: flex;
    justify-content: center;
    align-items: center;
}

.docente_foto {
    width: 132px;
    height: 132px;
    border-radius: 999px;
    object-fit: cover;
    display: block;

    border: 6px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.10);
}

/* conteúdo */
.docente_conteudo {
    max-width: 520px;
}

.docente_tema {
    color: #8b0000;
    font-size: 18px;
    font-weight: 800;
    line-height: 128%;
    margin: 0 0 10px 0;
}

.docente_nome {
    font-size: 17px;
    font-weight: 800;
    color: #111;
    margin: 0 0 4px 0;
}

.docente_instituicao {
    font-size: 15px;
    font-weight: 400;
    color: #111;
    opacity: 0.95;
}







/* =========================
   CTA FINAL
========================= */

.container_cta-final {
    background-color: #2a2f33;
    padding: 60px 0;
    text-align: center;
}

.block_cta-final {
    max-width: 972px;
    margin: 0 auto;
    padding: 0 25px;
    box-sizing: border-box;
}

.titulo_cta-final {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 14px 0;
}

.cta-final_texto {
    font-size: 16px;
    font-weight: 300;
    color: #d7dfe2;
    margin: 0 0 30px 0;
}

.cta-final_botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 60px;
    width: 100%;
    max-width: 360px;

    background-color: #00e39a;
    color: #0b1b16;

    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    border-radius: 6px;
    box-shadow: 6px 6px 0 #22323a;
    transition: 0.15s ease;
}

.cta-final_botao:active {
    transform: translate(2px, 2px);
    box-shadow: 4px 4px 0 #22323a;
}





/* ---------- RODAPÉ ------------------------------------------------------ */


/* ============================================================================
   RODAPÉ – layout aprovado (mobile-first)
================================================================================ */



/* ============================================================================
   RODAPÉ – layout aprovado (mobile-first) | 1 UL
================================================================================ */

.container_rodape {
    background-color: #e7eef0;
    padding: 60px 0 70px 0;
}

.block_rodape {
    max-width: 972px;
    margin: 0 auto;
    padding: 0 25px;
    box-sizing: border-box;
}

.rodape {
    text-align: center;
}

.rodape_titulo {
    margin: 0 0 40px 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #111;
    text-transform: uppercase;
}

/* ÚNICA LISTA */
.rodape_linha {
    list-style: none;
    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* mobile */
    gap: 58px 2px;

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

.rodape_item {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 64px;
}

.rodape_logo {
    display: block;
    width: 68px;
}

.logo-cdep3 {
    width: 66px;
}

.logo-proec {
    width: 73px;
}

.logo-unesp50 {
    width: 70px;
}

.logo-ibec {
    width: 99px;
}

.logo-fimdomundo {
    width: 95px;
}

.logo-od {
    width: 162px;
}


















/* tablet */
@media (min-width: 720px) {
    .rodape_linha {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rodape_logo {
        max-width: 200px;
    }
}







/* ==========================================================================================
   DESKTOP (>= 1090px)
============================================================================================ */

@media (min-width: 1090px) {

    /* ---------- KV ---------- */
    .container_kv-curso {
        height: 182px;
        display: flex;
        justify-content: center;
    }

    .block_kv-curso,
    .kv-curso,
    .box_kv-curso {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .kv-curso_imagem {
        height: 100%;
        width: auto;
        max-width: none;
    }


    /* ---------- INTRO ---------- */


    .container_intro {
        padding: 0px 0 40px 0;
    }

    .block_intro {
        max-width: 825px;
        margin: 0 auto;
        position: relative;
        padding: 38px 0 0 0;
    }

    .selo-edicao {
        position: absolute;
        top: -9px;
        right: 25%;
        width: 121px;
        height: auto;
        z-index: 3;
    }






    .titulo_intro {
        margin: 0 0 31px 0;
        font-size: 23px;
    }

    .intro_paragrafo {
        margin: 0 0 25px 0;
        line-height: 179%;
        font-size: 17px;
        font-weight: 300;
        letter-spacing: 0.02em;
    }

    .intro_paragrafo:last-child {
        margin-bottom: 0;
    }





    /* ---------- PAINEL (desktop: 2 colunas e divisor vertical “limpo”) ---------- */


    /* divisão 50/50 no desktop */

    .container_painel {
        background: linear-gradient(90deg,
                #c6ced0 0%,
                #c6ced0 50%,
                #d7dfe2 50%,
                #d7dfe2 100%);
    }

    .painel_conteudo {
        grid-template-columns: 1fr 1fr;
        min-height: 320px;
    }

    .painel_info {
        max-width: 360px;
    }

    .painel_info_linhas {
        text-align: left;
    }


    .painel_info-titulo {
        font-size: 20px;

    }


    .painel_info-destaque {
        font-size: 26px;
        font-weight: 700;
        margin: 6px 0;
    }


    .painel_coluna-inscricao {
        border-top: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }






    /* ---------- DOCENTES ---------- */


    .container_docentes {
        padding: 70px 0 90px 0;
    }

    .titulo_docentes {
        font-size: 28px;
        margin: 0 0 58px 0;
    }

    .docentes_lista {
        gap: 56px;
    }

    /* “linha” no desktop */
    .card_docente {
        text-align: left;
        justify-items: stretch;
        align-items: center;

        grid-template-columns: 180px 1fr;
        column-gap: 28px;
        row-gap: 0;
    }

    .docente_foto {
        width: 140px;
        height: 140px;
    }

    .docente_tema {
        font-size: 20px;
    }

    .docente_nome {
        font-size: 18px;
    }

    .docente_instituicao {
        font-size: 16px;
    }

    /* alternância (texto à esquerda / foto à direita) */
    .card_docente-direita {
        grid-template-columns: 1fr 180px;
    }

    .card_docente-direita .docente_midia {
        order: 2;
        justify-content: center;
    }

    .card_docente-direita .docente_conteudo {
        order: 1;
        text-align: right;
        margin-left: auto;
        max-width: 520px;
    }






    .container_cta-final {
        padding: 80px 0;
    }

    .titulo_cta-final {
        font-size: 28px;
    }

    .cta-final_texto {
        font-size: 18px;
    }





    .container_rodape {
        padding: 70px 0 90px 0;
    }

    .rodape_titulo {
        margin-bottom: 44px;
    }

    .rodape_linha {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* 6 logos = 2 linhas */
        gap: 60px 70px;
    }

    .rodape_logo {
        width: 220px;
    }

    /* Hierarquia visual equilibrada */

    .logo-cdep3 {
        width: 74px;
    }

    .logo-proec {
        width: 85px;
    }

    .logo-unesp50 {
        width: 77px;
    }

    .logo-ibec {
        width: 107px;
    }

    .logo-fimdomundo {
        width: 106px;
    }

    .logo-od {
        width: 182px;
    }











}