/* ======================================================================
   PAEL-MT - PORTAL PÚBLICO - V6.2
   PADRONIZAÇÃO VISUAL DAS SUBPÁGINAS E RESPONSIVIDADE
   ====================================================================== */

:root
{
    --pael-azul:#123864;
    --pael-azul-escuro:#0D2D52;
    --pael-azul-hover:#0B294B;
    --pael-dourado:#C9972D;
    --pael-dourado-hover:#B38325;
    --pael-branco:#FFFFFF;
    --pael-fundo:#EEF3F8;
    --pael-texto:#102F57;
    --pael-cinza:#65758A;
    --pael-borda:#D7E0E9;
}

/* ======================================================================
   BLOCO 1 - CABEÇALHO INSTITUCIONAL PADRÃO
   ====================================================================== */

.topo
{
    background:var(--pael-branco) !important;
    color:var(--pael-texto) !important;
    border-top:3px solid var(--pael-azul-escuro) !important;
    border-bottom:5px solid var(--pael-azul) !important;
    box-shadow:0 3px 14px rgba(13,45,82,.08);
}

.topo .container,
.topo .wrap,
.topo-conteudo
{
    width:min(1180px, calc(100% - 36px)) !important;
    max-width:1180px !important;
    margin:0 auto !important;
    padding:12px 0 !important;
    min-height:104px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:28px !important;
}

.marca
{
    display:flex !important;
    align-items:center !important;
    gap:17px !important;
    min-width:0;
}

.marca img
{
    width:82px !important;
    height:82px !important;
    object-fit:contain !important;
    border-radius:50% !important;
    background:#FFFFFF !important;
    flex:0 0 82px;
}

.marca-identidade
{
    min-width:0;
}

.marca-titulo
{
    display:block;
    color:var(--pael-azul) !important;
    font-size:27px !important;
    font-weight:900 !important;
    line-height:1.05 !important;
    letter-spacing:.2px;
}

.marca-subtitulo
{
    display:block;
    margin-top:5px;
    color:#4F6480 !important;
    font-size:12px !important;
    line-height:1.3;
    white-space:nowrap;
}

.marca-pagina
{
    display:inline-block;
    margin-top:7px;
    padding-top:5px;
    border-top:2px solid var(--pael-dourado);
    color:var(--pael-dourado) !important;
    font-size:11px;
    line-height:1.1;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.45px;
}

.menu,
.links-topo
{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
    flex-wrap:wrap !important;
}

.topo .menu a,
.topo .links-topo a,
.topo a.menu-botao,
.topo a.link-inst
{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:38px !important;
    padding:8px 12px !important;
    border:1px solid #DCE4ED !important;
    border-radius:7px !important;
    background:#FFFFFF !important;
    color:var(--pael-azul) !important;
    text-decoration:none !important;
    font-size:12px !important;
    font-weight:800 !important;
    transition:all .18s ease !important;
}

.topo .menu a:hover,
.topo .links-topo a:hover,
.topo a.menu-botao:hover,
.topo a.link-inst:hover
{
    background:#F5F8FB !important;
    border-color:var(--pael-dourado) !important;
    color:var(--pael-azul-escuro) !important;
    transform:translateY(-1px);
}

.topo .menu a.epael,
.topo .links-topo a.epael
{
    background:var(--pael-dourado) !important;
    border-color:var(--pael-dourado) !important;
    color:#FFFFFF !important;
}

.topo .menu a.epael:hover,
.topo .links-topo a.epael:hover
{
    background:var(--pael-dourado-hover) !important;
    border-color:var(--pael-dourado-hover) !important;
}

/* ======================================================================
   BLOCO 2 - ACABAMENTO DE CARDS E PAINÉIS
   ====================================================================== */

.grid .card,
.cards .card,
.lista .item,
.card-presidente,
.perfil,
.painel,
.artigo,
.mes
{
    border-top:3px solid var(--pael-dourado) !important;
    box-shadow:0 8px 24px rgba(13,45,82,.07) !important;
}

.grid .card,
.cards .card,
.lista .item,
.card-presidente
{
    transition:transform .18s ease, box-shadow .18s ease !important;
}

.grid .card:hover,
.cards .card:hover,
.lista a.item:hover,
.card-presidente:hover
{
    transform:translateY(-3px) !important;
    box-shadow:0 13px 30px rgba(13,45,82,.12) !important;
}

/* ======================================================================
   BLOCO 3 - TÍTULOS E ÁREAS INTERNAS
   ====================================================================== */

.hero
{
    border-bottom:3px solid var(--pael-dourado) !important;
}

.titulo,
h1.titulo,
.cabecalho h1,
.titulo-secao h3
{
    letter-spacing:-.25px;
}

.voltar,
.ler,
.ver
{
    transition:all .18s ease !important;
}

.voltar:hover,
.ler:hover,
.ver:hover
{
    transform:translateY(-1px);
}

/* ======================================================================
   BLOCO 4 - RESPONSIVIDADE
   ====================================================================== */

@media (max-width:980px)
{
    .topo .container,
    .topo .wrap,
    .topo-conteudo
    {
        flex-direction:column !important;
        justify-content:center !important;
        gap:10px !important;
        padding:11px 0 !important;
    }

    .marca
    {
        justify-content:center !important;
        text-align:left;
    }

    .menu,
    .links-topo
    {
        justify-content:center !important;
    }
}

@media (max-width:620px)
{
    .topo
    {
        border-bottom-width:4px !important;
    }

    .topo .container,
    .topo .wrap,
    .topo-conteudo
    {
        width:calc(100% - 22px) !important;
        min-height:auto !important;
    }

    .marca
    {
        width:100%;
        justify-content:flex-start !important;
        gap:12px !important;
    }

    .marca img
    {
        width:62px !important;
        height:62px !important;
        flex-basis:62px;
    }

    .marca-titulo
    {
        font-size:23px !important;
    }

    .marca-subtitulo
    {
        font-size:10px !important;
        white-space:normal;
    }

    .marca-pagina
    {
        margin-top:5px;
        font-size:10px;
    }

    .menu,
    .links-topo
    {
        width:100%;
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
        gap:6px !important;
    }

    .topo .menu a,
    .topo .links-topo a,
    .topo a.menu-botao,
    .topo a.link-inst
    {
        width:100% !important;
        min-height:41px !important;
        padding:8px 7px !important;
        font-size:11px !important;
    }

    .conteudo
    {
        padding-top:28px !important;
    }

    .hero
    {
        padding-top:30px !important;
        padding-bottom:30px !important;
    }
}

@media (max-width:390px)
{
    .marca-subtitulo
    {
        display:none;
    }
}