/* =============================================================
   pmsmj-identity.css — Reskin de identidade PMSMJ sobre o gov.br
   -------------------------------------------------------------
   Aplica a identidade visual dos portais irmãos (Carta de Serviços
   e PSS) sobre o tema gov.br. Enfileirado APÓS style.css (12 MB),
   com dependência 'gov-br-style', para sobrescrever os tokens.

   Referência: docs/GUIA-DE-ESTILO.md + docs/theme.css.
   Estratégia: o gov.br, como o guia PMSMJ, deriva toda a UI de
   tokens CSS raiz. Remapeando esses tokens (família blue-warm-vivid,
   color-primary) para o navy PMSMJ, a interface inteira re-colore.

   FASE 1 — Fundação: tokens, cor primária (navy), fonte e componentes.
   As seções (cabeçalho, hero, cards, rodapé) vêm em camadas seguintes.
   ============================================================= */

/* ---------- 0. Fonte Nunito (auto-hospedada — Google Fonts v32, variável) ----------
   Fonte variável: um único woff2 por faixa cobre os pesos 400–900. */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/nunito/nunito-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/nunito/nunito-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 0b. Fonte Poppins (corpo — Google Fonts v24, estática por peso) ---------- */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/poppins/poppins-400-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/poppins/poppins-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/poppins/poppins-500-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/poppins/poppins-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/poppins/poppins-600-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/poppins/poppins-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/poppins/poppins-700-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/poppins/poppins-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- 1. Tokens da identidade PMSMJ (--cs-*) ---------- */
:root {
    --cs-primaria:   #26547C; /* navy — cabeçalhos, botões, títulos */
    --cs-secundaria: #1D3F5E; /* fundos escuros / gradientes        */
    --cs-destaque:   #EF476F; /* rosa — chamarizes                  */
    --cs-sucesso:    #06D6A0; /* verde — confirmações               */
    --cs-alerta:     #FFD166; /* amarelo — avisos / item ativo      */
    --cs-texto:      #2D2D2F; /* corpo de texto                     */
    --cs-fundo:      #F5F7FA; /* fundo geral                        */

    --cs-fonte-principal: 'Poppins', system-ui, -apple-system, sans-serif; /* corpo / textos gerais */
    --cs-fonte-titulos:   'Nunito',  system-ui, -apple-system, sans-serif; /* título do site + títulos/subtítulos */

    /* Escala derivada (não editar — segue a primária) */
    --c1:     var(--cs-primaria);
    --c1-dk:  color-mix(in srgb, var(--cs-primaria) 75%, black);
    --c1-dkk: color-mix(in srgb, var(--cs-primaria) 50%, black);
    --c1-lt:  color-mix(in srgb, var(--cs-primaria) 75%, white);
    --c1-ltt: color-mix(in srgb, var(--cs-primaria) 25%, white);
    --c1-xlt: color-mix(in srgb, var(--cs-primaria) 12.5%, white);
    --c2:     var(--cs-destaque);
    --c2-dk:  color-mix(in srgb, var(--cs-destaque) 75%, black);
    --c2-lt:  color-mix(in srgb, var(--cs-destaque) 25%, white);
    --c3:     var(--cs-alerta);
    --c3-dk:  color-mix(in srgb, var(--cs-alerta) 87.5%, black);
    --c3-lt:  color-mix(in srgb, var(--cs-alerta) 25%, white);
    --c4:     var(--cs-sucesso);
    --c4-dk:  color-mix(in srgb, var(--cs-sucesso) 75%, black);
    --c4-lt:  color-mix(in srgb, var(--cs-sucesso) 25%, white);

    --cs-raio:        14px;
    --cs-sombra-card: 0 2px 12px rgba(38, 84, 124, .10);

    /* Aliases p/ markup copiado do PROSEL (--p-*) */
    --p-navy:    var(--cs-primaria);
    --p-navy-dk: var(--c1-dk);
    --p-navy-lt: var(--c1-lt);
    --p-pink:    var(--cs-destaque);
    --p-pink-dk: var(--c2-dk);
    --p-yellow:  var(--cs-alerta);
    --p-green:   var(--cs-sucesso);
    --p-text:    var(--cs-texto);
}

/* ---------- 2. Remap dos tokens gov.br → navy PMSMJ ----------
   Redefinindo a família blue-warm-vivid (base de --interactive,
   --color-primary e dos fundos escuros), o gov.br inteiro assume o navy. */
:root {
    /* Azul principal gov.br → navy PMSMJ (cascata: interactive/links/botões) */
    --blue-warm-vivid-70:      #26547C;
    --blue-warm-vivid-70-rgb:  38, 84, 124;
    --color-primary-default:   #26547C;
    --color-primary-lighten-01:#2f6592;
    --color-primary-lighten-02:#3f75a2;
    --color-primary-darken-01: #1f4667;
    --color-primary-darken-02: #1a3a57;

    /* Fundos escuros (rodapé, blocos dark) → navy escurecido */
    --blue-warm-vivid-90: #16324c; /* mais escuro  */
    --blue-warm-vivid-80: #1D3F5E; /* secundária   */
    --blue-warm-vivid-60: #2f6592; /* info/realce  */

    /* Foco tematizado */
    --focus-color-light: #26547C;
}

/* ---------- 3. Tipografia PMSMJ (Nunito) ----------
   Sobrescreve o preset de fonte do gov.br (Rawline) pela Nunito.
   Enquanto os woff2 da Nunito não estão hospedados, o fallback usa
   Rawline (já presente) / system-ui — sem quebrar nada. */
:root {
    --wp--preset--font-family--default: var(--cs-fonte-principal);
    /* Tamanho de fonte das DUAS barras do cabeçalho (topbar institucional e
       barra de menu). Fonte única de verdade: elas devem permanecer iguais,
       então mexer aqui muda as duas juntas e evita que voltem a divergir.
       .855rem = 11,97px com o root em 14px. */
    --pmsmj-bar-fs: .855rem;
}
/* `html body` (0,0,2) e não só `body` (0,0,1) DE PROPÓSITO.
   O bloco do chatbot Frida injeta, no CORPO da página, um
   `body { font-family: 'Raleway', sans-serif }`. Como tem a mesma
   especificidade da nossa regra e aparece DEPOIS no documento, ele vencia —
   e o Raleway vazava para todo texto que herda do body (resumos, datas,
   categorias, conteúdo de posts). Subir a especificidade resolve na raiz,
   sem precisar remendar seção por seção. */
html body {
    font-family: var(--cs-fonte-principal);
    color: var(--cs-texto);
}
h1, h2, h3, h4, h5, h6, .cs-titulo {
    font-family: var(--cs-fonte-titulos);
}

/* ---------- 4. Componentes reutilizáveis (do docs/theme.css) ---------- */

/* Botões do tema */
.btn-cs-primaria {
    background-color: var(--cs-primaria);
    border-color: var(--cs-primaria);
    color: #fff;
}
.btn-cs-primaria:hover, .btn-cs-primaria:focus {
    background-color: color-mix(in srgb, var(--cs-primaria) 85%, black);
    border-color: color-mix(in srgb, var(--cs-primaria) 85%, black);
    color: #fff;
}
.btn-cs-destaque {
    background-color: var(--cs-destaque);
    border-color: var(--cs-destaque);
    color: #fff;
}
.btn-cs-destaque:hover, .btn-cs-destaque:focus {
    background-color: color-mix(in srgb, var(--cs-destaque) 85%, black);
    border-color: color-mix(in srgb, var(--cs-destaque) 85%, black);
    color: #fff;
}
.btn-cs-contorno {
    border: 1px solid var(--cs-primaria);
    color: var(--cs-primaria);
    background: transparent;
}
.btn-cs-contorno:hover { background-color: var(--cs-primaria); color: #fff; }
.btn-cs-primaria-grad {
    background: linear-gradient(135deg, var(--c1), var(--c1-lt));
    border: none;
    color: #fff;
}
.btn-cs-primaria-grad:hover { background: linear-gradient(135deg, var(--c1-lt), var(--c1)); color: #fff; }

/* Cartão padrão */
.cs-card {
    border: 0;
    border-radius: var(--cs-raio);
    box-shadow: var(--cs-sombra-card);
    transition: transform .15s ease, box-shadow .15s ease;
}
.cs-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

/* Badges de status */
.cs-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.cs-status.sucesso { background: var(--cs-sucesso); color: #0a4035; }
.cs-status.aviso   { background: var(--cs-alerta);  color: #5a3e00; }
.cs-status.info    { background: var(--cs-primaria); color: #fff; }
.cs-status.erro    { background: var(--cs-destaque); color: #fff; }
.cs-status.neutro  { background: #e2e8f0; color: #475569; }

/* Título de seção com régua */
.cs-secao-titulo {
    font-weight: 800;
    color: var(--cs-primaria);
    position: relative;
    display: inline-block;
    margin-bottom: 1.6rem;
}
.cs-secao-titulo::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 46%;
    height: 4px;
    border-radius: 4px;
    background: var(--cs-destaque);
}

/* Entrada suave de conteúdo */
.cs-fade-in { animation: csFadeIn .25s ease; }
@keyframes csFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* =============================================================
   SEÇÃO 5: CABEÇALHO estilo PROSEL/PSS + MEGA MENU
   O header gov.br (site-header.php) foi reescrito para a estrutura
   .pub-header (barra institucional + faixa principal + navegação).
   Referência: prosel/app/views/layouts/public.php.
   ============================================================= */

/* Esconde qualquer resquício do header gov.br */
.br-header { display: none !important; }

.pub-header {
    background: var(--cs-primaria);
    color: #fff;
    box-shadow: 0 4px 24px rgba(38, 84, 124, .25);
    position: relative;
    z-index: 1000;
    font-family: var(--cs-fonte-principal); /* Poppins por padrão; Nunito só no nome do site */
}

/* ── Barra institucional ── */
.pub-header-top {
    background: var(--c1-dk);
    /* Altura igual à de UMA linha da barra de menu (.pub-nav).
       Medido no navegador: .pub-nav-item > .nav-link = 44px e a .pub-nav
       tem 1px de border-top → 45px. Antes a topbar tinha 55px
       (7+7 de padding + 1 de borda + 40 do conteúdo do #btnAcess).
       box-sizing é border-box, então este height já inclui a borda. */
    height: 45px;
    padding: 0;
    font-size: var(--pmsmj-bar-fs); /* mesmo tamanho da barra de menu */
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-family: var(--cs-fonte-principal); /* Poppins */
}
/* O .container já é display:flex + align-items:center; só faltava ter
   altura para o conteúdo centralizar verticalmente na barra. */
.pub-header-top > .container { height: 100%; }
/* No mobile o menu vira hambúrguer (991px) e o conteúdo da topbar pode
   quebrar em mais de uma linha — aí a altura volta a ser automática
   para não cortar nada. */
@media (max-width: 991px) {
    .pub-header-top { height: auto; padding: 6px 0; }
    .pub-header-top > .container { height: auto; }
}
/* (.pub-header-loc — a localização da barra institucional — foi removida do
   site-header.php; as regras dela saíram junto para não virar código morto.
   O font-family da barra já está na regra .pub-header-top acima.) */
.pub-top-link {
    background: none; border: none; cursor: pointer;
    color: rgba(255, 255, 255, .78); font-size: var(--pmsmj-bar-fs); text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 6px; border-radius: 6px;
    transition: background .2s, color .2s;
    font-family: var(--cs-fonte-principal);
}
.pub-top-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.pub-top-restrita { color: var(--cs-alerta); font-weight: 600; }
.pub-top-restrita:hover { color: var(--cs-alerta); }

/* Grupo da DIREITA da topbar (acessibilidade + Área Restrita).
   margin-left:auto é o que o mantém à direita — de propósito, em vez de
   justify-content:space-between no container: abaixo de 991px os links
   institucionais viram display:none e sobraria um filho só, o que faria o
   space-between jogar as ações para a esquerda. */
.pub-header-top-actions { margin-left: auto; }

/* Links institucionais da topbar (menu 'institutional') — ficam à ESQUERDA.
   Cada <a> já usa .pub-top-link; aqui só o agrupamento.
   Separador sutil entre eles para não virar um bloco de texto corrido. */
.pub-top-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}
.pub-top-links .pub-top-link + .pub-top-link {
    border-left: 1px solid rgba(255, 255, 255, .18);
    margin-left: 2px;
    padding-left: 8px;
}
/* Abaixo de 991px o menu principal vira hambúrguer e a topbar passa a ter
   altura automática; os 5 links empilhariam e deixariam a barra muito alta,
   então são ocultados nesse ponto (continuam acessíveis pelo menu/rodapé). */
@media (max-width: 991px) {
    .pub-top-links { display: none; }
}

/* ── Faixa principal ── */
.pub-header-main { padding: 16px 0; display: flex; align-items: center; gap: 16px; }
.pub-logo-box {
    width: 56px; height: 56px; background: var(--cs-sucesso); border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: var(--cs-primaria); flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(6, 214, 160, .4);
}
.pub-logo-wrap { flex-shrink: 0; display: inline-flex; }
.pub-logo-wrap img { height: 56px; width: auto; max-width: 200px; object-fit: contain; }
/* Nome do site: 1.1rem (15,4px) era pequeno ao lado do logo de 56px.
   1.5rem = 21px. É Nunito (regra de títulos), o único texto do cabeçalho
   que não usa Poppins — proposital pela divisão de fontes do projeto. */
.pub-site-name { font-family: var(--cs-fonte-titulos); font-weight: 900; font-size: 1.5rem; line-height: 1.2; color: #fff; }
.pub-site-sub { font-size: .75rem; color: rgba(255, 255, 255, .65); }
.pub-search { margin-left: auto; position: relative; display: flex; align-items: center; }
.pub-search i { position: absolute; left: 14px; color: #9aa7b4; font-size: .85rem; }
.pub-search input {
    background: #fff; border: 0; border-radius: 100em;
    padding: 9px 18px 9px 38px; font-size: .85rem; min-width: 340px; color: var(--cs-texto);
    font-family: var(--cs-fonte-principal); /* Poppins — inputs não herdam a fonte */
    text-overflow: ellipsis;
}
.pub-search input::placeholder { font-family: var(--cs-fonte-principal); }
.pub-search input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
@media (max-width: 991px) { .pub-search { display: none; } }

/* ── Navegação ── */
.pub-nav { background: rgba(0, 0, 0, .18); border-top: 1px solid rgba(255, 255, 255, .08); font-family: var(--cs-fonte-principal); /* menu inteiro em Poppins */ }
.pub-nav .nav-link, .pub-nav .mega-panel, .pub-nav .mega-col-title, .pub-nav .mega-links a { font-family: var(--cs-fonte-principal); }
.pub-nav .container { position: relative; }
.pub-nav-list { display: flex; align-items: stretch; flex-wrap: wrap; }
.pub-nav-item { position: static; }
.pub-nav-item > .nav-link {
    display: flex; align-items: center; gap: 7px;
    color: rgba(255, 255, 255, .8); padding: 12px 15px;
    font-size: var(--pmsmj-bar-fs); font-weight: 600; text-decoration: none;
    border-bottom: 3px solid transparent; transition: all .15s; white-space: nowrap;
}
.pub-nav-item > .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.pub-nav-item.has-mega:hover > .nav-link { color: var(--cs-alerta); border-bottom-color: var(--cs-alerta); background: rgba(255, 255, 255, .06); }
.mega-caret { font-size: .62rem; opacity: .7; transition: transform .15s; }
.pub-nav-item.has-mega:hover .mega-caret { transform: rotate(180deg); }

/* Painel do mega menu (largura do container, cai como um cartão) */
.mega-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; color: var(--cs-texto);
    border-radius: 0 0 16px 16px; border-top: 3px solid var(--cs-destaque);
    box-shadow: 0 18px 40px rgba(38, 84, 124, .18);
    padding: 22px 20px; opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    z-index: 1001;
}
.pub-nav-item.has-mega:hover .mega-panel { opacity: 1; visibility: visible; transform: none; }
.mega-inner { display: flex; flex-wrap: wrap; gap: 16px 34px; }
.mega-col { min-width: 190px; flex: 1 1 auto; }
.mega-col-flat { flex-basis: 100%; }
.mega-col-title {
    font-family: var(--cs-fonte-principal); font-weight: 700; font-size: 1rem; color: var(--cs-primaria);
    padding-bottom: 7px; margin-bottom: 9px; border-bottom: 2px solid var(--c1-xlt);
    display: flex; align-items: center; gap: 7px;
}
.mega-col-title i { color: var(--cs-destaque); }
.mega-links { list-style: none; margin: 0; padding: 0; }
.mega-links.mega-links-multi { column-count: 2; column-gap: 28px; }
.mega-col-flat .mega-links { column-count: 2; column-gap: 34px; }
.mega-links li { margin: 0 0 2px; break-inside: avoid; }
.mega-links a {
    /* .83rem (11,62px) era menor que os itens do menu principal (.855rem).
       .9rem = 12,6px — links do painel ficam mais legíveis. O título da
       coluna subiu junto (1rem) para a hierarquia não achatar. */
    display: block; color: #3a4a5c; text-decoration: none; font-size: .9rem;
    padding: 6px 10px; border-radius: 8px; transition: background .12s, color .12s;
}
.mega-links a:hover { background: var(--c1-xlt); color: var(--cs-primaria); }
.mega-links a i { color: var(--cs-primaria); margin-right: 6px; opacity: .7; }

/* ── Mobile ── */
.pub-nav-toggle {
    display: none; background: none; border: none; color: #fff; font-weight: 600;
    font-size: .9rem; padding: 11px 4px; align-items: center; gap: 8px; cursor: pointer;
    font-family: var(--cs-fonte-principal);
}
@media (max-width: 991px) {
    .pub-nav-toggle { display: inline-flex; }
    .pub-nav-list { display: none; flex-direction: column; width: 100%; padding-bottom: 8px; }
    .pub-nav-list.open { display: flex; }
    .pub-nav-item { width: 100%; }
    .pub-nav-item > .nav-link { border-bottom: 1px solid rgba(255, 255, 255, .08); justify-content: space-between; }
    .mega-panel {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border-radius: 0; border-top: 0; padding: 6px 10px 12px;
        display: none; background: rgba(255, 255, 255, .98);
    }
    .pub-nav-item.open .mega-panel { display: block; }
    .mega-inner { flex-direction: column; gap: 10px; }
    .mega-links.mega-links-multi, .mega-col-flat .mega-links { column-count: 1; }
}

/* =============================================================
   SEÇÃO 6: ACESSIBILIDADE (idêntico ao PROSEL)
   Classes aplicadas ao <body> pelo menu da topbar.
   ============================================================= */
/* ── Alto Contraste ─────────────────────────────── */
.alto-contraste,
.alto-contraste body {
    background: #000 !important;
    color: #fff !important;
}
.alto-contraste * {
    background-color: transparent !important;
    color: #fff !important;
    border-color: #555 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
/* Fundo preto em elementos com fundo próprio */
.alto-contraste header,
.alto-contraste footer,
.alto-contraste nav,
.alto-contraste .pub-header,
.alto-contraste .pub-header-top,
.alto-contraste .pub-nav,
.alto-contraste .pub-footer,
.alto-contraste .pub-footer-bottom,
.alto-contraste .pub-card,
.alto-contraste .card,
.alto-contraste .mega-panel,
.alto-contraste .modal-content,
.alto-contraste .modal-header,
.alto-contraste .modal-body,
.alto-contraste .modal-footer,
.alto-contraste .alert,
.alto-contraste .badge,
.alto-contraste section,
.alto-contraste div,
.alto-contraste form,
.alto-contraste input,
.alto-contraste select,
.alto-contraste textarea,
.alto-contraste button,
.alto-contraste label,
.alto-contraste table,
.alto-contraste thead,
.alto-contraste tbody,
.alto-contraste tr,
.alto-contraste td,
.alto-contraste th {
    background-color: #000 !important;
    background-image: none !important;
}
/* Links amarelos para destaque */
.alto-contraste a,
.alto-contraste a:visited,
.alto-contraste a:hover {
    color: #ff0 !important;
    text-decoration: underline !important;
}
/* Botões com borda visível */
.alto-contraste button,
.alto-contraste .btn,
.alto-contraste input[type="submit"],
.alto-contraste input[type="button"] {
    background-color: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    outline: none !important;
}
.alto-contraste button:hover,
.alto-contraste .btn:hover {
    background-color: #333 !important;
}
/* Inputs com borda branca */
.alto-contraste input,
.alto-contraste select,
.alto-contraste textarea {
    background-color: #000 !important;
    color: #fff !important;
    border: 1.5px solid #aaa !important;
}
.alto-contraste input::placeholder,
.alto-contraste textarea::placeholder {
    color: #aaa !important;
}
/* Imagens em escala de cinza */
.alto-contraste img {
    filter: grayscale(100%) contrast(1.2) !important;
    opacity: .85 !important;
}
/* Status pills e badges */
.alto-contraste .status-pill,
.alto-contraste .cs-status,
.alto-contraste .badge {
    background-color: #222 !important;
    color: #fff !important;
    border: 1px solid #aaa !important;
}
/* Linha divisória visível */
.alto-contraste hr { border-color: #555 !important; }
/* Scrollbar */
.alto-contraste ::-webkit-scrollbar-track { background: #000 !important; }
.alto-contraste ::-webkit-scrollbar-thumb { background: #555 !important; }
.sublinhar-links a { text-decoration: underline !important; }

/* Botão "Acessibilidade" da topbar — enxugar o tamanho.
   ATENÇÃO À CAUSA REAL: o padding NÃO era o que deixava o botão grande.
   O style.css do gov.br aplica a TODO <button>:
       button, .site .button, input[type=submit], … {
           height: var(--button-size);          → 40px
           padding: 0 var(--spacing-scale-3x);
       }
   O padding inline (2px 6px) do site-header.php vencia o padding do gov.br,
   mas nada sobrescrevia o `height` — por isso o botão media 40px mesmo
   contendo só um ícone de 22px. Aqui liberamos a altura para o conteúdo e
   reduzimos o padding. O !important é necessário para vencer o style inline. */
#btnAcess {
    height: auto !important;
    padding: 1px 5px !important;
    line-height: 1;
    /* o site-header.php traz font-size inline (.78rem); !important para
       alinhar ao tamanho das barras. */
    font-size: var(--pmsmj-bar-fs) !important;
}

/* Menu de acessibilidade (topbar): itens uniformes — Poppins, alinhados à esquerda,
   mesmo tamanho e peso (o gov.br centralizava e alterava o peso dos <button>). */
#menuAcess button,
#menuAcess a {
    font-family: var(--cs-fonte-principal) !important; /* Poppins */
    font-size: .85rem !important;
    font-weight: 500 !important;
    justify-content: flex-start !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
}
#menuAcess button i,
#menuAcess a i { flex: 0 0 16px; text-align: center; }

/* =============================================================
   Chatbot "Frida" (widget gg-help, injetado no rodapé) — Poppins
   Widget montado via innerHTML; botões/inputs não herdam a fonte,
   então forçamos Poppins em todo o subtree.
   ============================================================= */
#gg-help-widget-root,
#gg-help-widget-root *:not(i):not(svg):not(path):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad),
.tooltip-balloon, .gg-help-msg-bot, .gg-help-msg-user {
    font-family: var(--cs-fonte-principal) !important; /* Poppins — exceto ícones Font Awesome (<i>/fa-*) */
}

/* =============================================================
   Cards de categoria (blocos .is-style-govbr-clickable-card)
   Apenas a fonte → Poppins (layout/cores intactos). Ícones (svg/i/fa)
   preservados.
   ============================================================= */
.is-style-govbr-clickable-card,
.is-style-govbr-clickable-card *:not(svg):not(path):not(i):not([class*="fa-"]) {
    font-family: var(--cs-fonte-principal) !important; /* Poppins */
}

/* =============================================================
   SEÇÃO 7: RODAPÉ estilo PROSEL/PSS
   Navy escuro, 3 colunas (contato / links / redes) + barra inferior.
   Base do PROSEL (public.php) + grid próprio (sem Bootstrap). Poppins.
   ============================================================= */
.pub-footer {
    background: var(--c1-dk);
    color: rgba(255, 255, 255, .65);
    padding: 44px 0 20px;
    font-size: .84rem;
    margin-top: 56px;
    font-family: var(--cs-fonte-principal); /* Poppins */
}
.pub-footer .footer-inner {
    max-width: var(--responsive--aligndefault-width, 1152px);
    margin: 0 auto;
    padding: 0 16px;
}
.pub-footer h6 {
    color: #fff; font-weight: 700; margin: 0 0 14px;
    font-family: var(--cs-fonte-principal); /* Poppins (h6 seria Nunito) */
    display: flex; align-items: flex-start; gap: 8px; line-height: 1.3; font-size: 1rem;
}
.pub-footer a { color: rgba(255, 255, 255, .6); text-decoration: none; }
.pub-footer a:hover { color: var(--cs-sucesso); }
.pub-footer .footer-accent { color: var(--cs-sucesso); }

/* Grid de colunas */
.pub-footer .footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
.pub-footer .footer-col p { margin: 0 0 9px; display: flex; gap: 9px; align-items: flex-start; line-height: 1.45; }
.pub-footer .footer-col p i { margin-top: 3px; flex: 0 0 16px; }

/* Links úteis */
.pub-footer .footer-links { list-style: none; margin: 0; padding: 0; }
.pub-footer .footer-links li { margin-bottom: 8px; }
.pub-footer .footer-links a { display: inline-flex; align-items: center; gap: 8px; }
.pub-footer .footer-links a i { color: var(--cs-sucesso); font-size: .7rem; }

/* Redes sociais */
.pub-footer .footer-social-desc { font-size: .82rem; opacity: .75; margin-bottom: 14px; }
.pub-footer .footer-social { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-footer .footer-social a {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: #fff !important;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; transition: background .2s;
}
.pub-footer .footer-social a:hover { color: #fff !important; }
.pub-footer .footer-social a.s-facebook:hover  { background: #1877f2; }
.pub-footer .footer-social a.s-youtube:hover   { background: #ff0000; }
.pub-footer .footer-social a.s-instagram:hover { background: #e1306c; }

/* Barra inferior */
.pub-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 16px; margin-top: 28px;
    text-align: center; font-size: .78rem;
}
.pub-footer-bottom a { display: inline-flex; align-items: center; gap: 5px; }

@media (max-width: 767px) {
    .pub-footer .footer-cols { grid-template-columns: 1fr; gap: 26px; }
}

/* =============================================================
   SEÇÃO 7b: Rodapé gov.br ORIGINAL + barra inferior PMSMJ
   (o rodapé de 3 colunas do PROSEL foi revertido; mantida só a
    barra inferior. Fonte Poppins no rodapé inteiro.)
   ============================================================= */
.pmsmj-footer-bottom {
    background: var(--c1-dkk);
    color: rgba(255, 255, 255, .8);
    font-family: var(--cs-fonte-principal); /* Poppins */
    font-size: .78rem;
    padding: 14px 16px;
    text-align: center;
}
.pmsmj-footer-bottom-inner { max-width: var(--responsive--aligndefault-width, 1152px); margin: 0 auto; }
.pmsmj-footer-bottom a { color: rgba(255, 255, 255, .75); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.pmsmj-footer-bottom a:hover { color: var(--cs-sucesso); }

/* Rodapé gov.br original — fonte Poppins (exceto ícones Font Awesome) */
.br-footer, .br-footer *:not(i):not(svg):not(path):not([class*="fa-"]) {
    font-family: var(--cs-fonte-principal) !important;
}

/* =============================================================
   SEÇÃO 8: Menu de navegação fixo ao rolar (sticky nav)
   JS adiciona .is-fixed quando o scroll passa da nav; .pub-nav-spacer
   evita o "pulo" do conteúdo.
   ============================================================= */
.pub-nav.is-fixed {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    background: var(--c1-dk); /* navy sólido (fora do header, sobre o conteúdo) */
    box-shadow: 0 6px 18px rgba(38, 84, 124, .28);
    animation: pubNavDrop .25s ease;
}
@keyframes pubNavDrop { from { transform: translateY(-100%); } to { transform: none; } }
/* Respeita a admin bar do WordPress quando logado */
body.admin-bar .pub-nav.is-fixed { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .pub-nav.is-fixed { top: 46px; } }
.pub-nav-spacer { height: 0; }

/* =============================================================
   SEÇÃO 9: Acessibilidade — Fonte para dislexia + Modal leitores
   (ref.: scripts/src/acessibilidade.js do tema)
   ============================================================= */
/* Fonte para dislexia (OpenDyslexic) */
@font-face {
    font-family: 'OpenDyslexic';
    src: url(https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff) format("woff");
    font-display: swap;
}
body.fonte-dislexia,
body.fonte-dislexia *:not(i):not(svg):not(path):not([class*="fa-"]) {
    font-family: 'OpenDyslexic', 'Comic Sans MS', Verdana, Arial, sans-serif !important;
    letter-spacing: .02em;
    line-height: 1.6;
}

/* Modal: Site compatível com leitores de tela */
#acess-modal-fundo {
    position: fixed; inset: 0; z-index: 2147483002;
    background: rgba(0, 0, 0, .6);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
#acess-modal-fundo[hidden] { display: none !important; }
#acess-modal {
    background: #fff; max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto;
    border-radius: 14px; padding: 22px 26px; text-align: left;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .35);
    font-family: var(--cs-fonte-principal); color: #2d2d2f;
}
#acess-modal-topo { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
#acess-modal-titulo {
    flex: 1; margin: 0; font-size: 1.25rem; color: var(--cs-primaria); font-weight: 800;
    font-family: var(--cs-fonte-titulos); /* Nunito — é um título */
}
#acess-modal-fechar {
    flex: none; width: 34px; height: 34px; border: 1px solid #cbd5e1;
    border-radius: 8px; background: #f2f4f7; color: #334155;
    font-size: 17px; cursor: pointer; line-height: 1; padding: 0;
}
#acess-modal-fechar:hover { background: var(--c1-xlt); color: var(--cs-primaria); }
#acess-modal p, #acess-modal li { font-size: .9rem; line-height: 1.6; margin: 0 0 8px; color: #3a4a5c; }
#acess-modal ol { margin: 8px 0 4px; padding-left: 22px; }
#acess-modal .acess-mod-cab {
    background: var(--c1-xlt); color: var(--cs-primaria);
    font-size: .98rem; font-weight: 700; margin: 16px 0 8px; padding: 8px 12px;
    border-radius: 8px; border-left: 4px solid var(--cs-primaria);
}
#acess-modal kbd {
    background: #eef1f4; color: #111; border: 1px solid #cbd5e1; border-radius: 4px;
    padding: 1px 6px; font-family: Consolas, Monaco, monospace; font-size: .78rem;
}
#acess-modal a { color: var(--cs-primaria); text-decoration: underline; }

/* =============================================================
   SEÇÃO 10: VLibras (carregado sob demanda pelo menu de acessibilidade)
   O style-vlibras.css do tema (opacity:0, ligado ao header antigo) NÃO é
   usado. Aqui fixamos o botão de acesso visível no meio da lateral direita.

   ORDEM DE EMPILHAMENTO (do mais alto para o mais baixo):
     2147483002  #acess-modal-fundo  (modal de leitores de tela — sempre no topo)
     2147483001  #gg-help-chat       (janela de conversa do Frida)
     2147483000  [vw]                (VLibras: botão e avatar)
   Como [vw] é position:fixed COM z-index, ele cria um stacking context —
   logo o 2147483001 da janela do Frida fica acima de TODO o widget VLibras
   (botão de acesso e avatar), e não só do container.
   ============================================================= */
[vw].enabled {
    position: fixed !important;
    right: 0 !important;              /* meio do lado DIREITO */
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 2147483000 !important;
}
/* NÃO forçamos display/opacity do botão: sem o style-vlibras.css do tema,
   o VLibras mostra o botão quando fechado e o oculta quando o avatar abre. */

/* Frida: a janela de conversa sobrepõe o botão do VLibras.
   O CSS do Frida vem inline no conteúdo (bloco WPBakery) com z-index:99999,
   sem !important — por isso o !important aqui vence, mesmo vindo do <head>. */
#gg-help-chat {
    z-index: 2147483001 !important;
}

/* =============================================================
   SEÇÃO 11: Cards de categoria (.is-style-govbr-clickable-card)
   Cantos + sombra + hover (guia) + realce de cor (ícone em círculo).
   ============================================================= */
.is-style-govbr-clickable-card {
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(38, 84, 124, .08) !important;
    border: 1px solid rgba(38, 84, 124, .08) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}
.is-style-govbr-clickable-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(38, 84, 124, .16) !important;
}
/* Realce: ícone dentro de um círculo tintado (navy no hover, ícone branco) */
.is-style-govbr-clickable-card .wp-block-outermost-icon-block {
    background: var(--c1-xlt);
    border-radius: 50%;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    transition: background .18s ease;
}
.is-style-govbr-clickable-card .wp-block-outermost-icon-block .icon-container {
    width: 46px !important;
}
.is-style-govbr-clickable-card:hover .wp-block-outermost-icon-block {
    background: var(--cs-primaria);
}
.is-style-govbr-clickable-card:hover .icon-container {
    color: #fff !important;
}

/* Altura uniforme dos cards de categoria (o container usa flex-wrap + align-items:center,
   então rótulos longos deixavam cards mais altos). Altura fixa em rem escala com o
   menu de acessibilidade; no mobile relaxa (cards empilham). */
.is-style-govbr-clickable-card {
    min-height: 0 !important;
    height: 19rem !important;
}
@media (max-width: 600px) {
    .is-style-govbr-clickable-card { height: auto !important; min-height: 13rem !important; }
}

/* Hover dos cards: o gov.br cria um overlay (a::after) quadrado no hover.
   Arredonda para acompanhar o card (16px). */
.wp-block-group.is-style-govbr-clickable-card:hover a::after {
    border-radius: 16px !important;
}

/* Uniformiza a cor dos ícones dos cards em navy (algum ícone vinha em azul/multicolor).
   Cobre currentColor (color) e fill de qualquer forma do SVG. Branco no hover. */
.is-style-govbr-clickable-card .icon-container { color: var(--cs-primaria) !important; }
.is-style-govbr-clickable-card:hover .icon-container { color: #fff !important; }

/* =============================================================
   SEÇÃO 12: Botões em Poppins
   POR QUE PRECISA DE REGRA: controles de formulário (button, input,
   select, textarea) NÃO herdam font-family do body — o navegador aplica
   a fonte do sistema. Por isso os botões ficaram fora do Poppins mesmo
   com `body { font-family: Poppins }`.

   GOTCHA (já quebrou o ✕ do chatbot antes): mirar SOMENTE o próprio
   elemento do botão — NUNCA `button *`. Os ícones Font Awesome dentro
   do botão são <i class="fa-*"> com font-family própria; se um seletor
   descendente/universal os atingir, viram quadrados. Como não usamos
   descendente, os ícones ficam intactos.
   O :not([class*="fa-"]) protege o caso de o próprio botão ser um ícone.
   ============================================================= */
button:not([class*="fa-"]),
input[type="button"],
input[type="submit"],
input[type="reset"],
.br-button,
.wp-block-button__link,
.vc_btn3,
.btn-cs-primaria,
.btn-cs-destaque,
.btn-cs-contorno,
.btn-cs-primaria-grad {
    font-family: var(--cs-fonte-principal) !important; /* Poppins */
}

/* =============================================================
   SEÇÃO 13: Títulos de seção (separadores WPBakery)
   Ex.: "Notícias e Publicações" e "Redes Sociais" na home.
   Marcação: <div class="vc_separator ... h6 vc_separator-has-text">
               <span class="vc_sep_holder">…</span>
               <h4><b>Título</b></h4>
               <span class="vc_sep_holder">…</span>
             </div>
   O que os deixava pequenos: a classe `h6` do wrapper é a ESCALA DE
   TAMANHO do separador no WPBakery (h1…h6, sendo h6 a menor).
   Por ser <h4>, a fonte já é Nunito (regra de títulos da Seção 3).
   O peso precisa ser aplicado TAMBÉM no <b>: senão o próprio <b>
   devolve o texto para 700 e o aumento de peso não aparece.
   Tamanho em rem para acompanhar o ajuste de fonte da acessibilidade.
   ============================================================= */
.vc_separator.vc_separator-has-text h4 {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    line-height: 1.25;
}
.vc_separator.vc_separator-has-text h4 b {
    font-weight: 800 !important; /* o <b> voltaria a 700 sem isto */
}

/* Título de seção sobre bloco de capa — ex.: "Navegue por categoria" na home.
   É um <h2 class="wp-block-heading"> dentro de .wp-block-cover, e vinha em
   Nunito 400 (regular) com ~34px: pesado no tamanho, leve no traço.
   800 alinha com os títulos de separador acima. Escopo em .wp-block-cover
   para pegar só títulos de seção/banner, não headings comuns de conteúdo. */
.wp-block-cover .wp-block-heading {
    font-weight: 800;
}

/* =============================================================
   SEÇÃO 14: Cards de "Notícias e Publicações"
   Plugin WP Post Modules (.wppm) — grade .wppm-grid.wppm-card.columns-4.
   Estrutura: .wppm-post (externo, padding lateral do gutter)
              └ .wppm-card-wrap (o cartão branco de fato)
                 ├ .post-img (imagem)
                 └ .meta-row / h4 / p (conteúdo)
   Verificado no navegador: a etiqueta de categoria NÃO fica sobreposta na
   imagem (vem abaixo dela) e não há ícones Font Awesome dentro do card.
   ============================================================= */

/* ── Cantos e sombra ──
   Vinha com canto reto e sombra cinza dura (0 1px 2px rgba(0,0,0,.3)).
   Alinhado ao mesmo padrão dos cards de categoria (raio 16 + sombra navy).
   overflow:hidden faz a imagem respeitar o arredondamento do cartão. */
.wppm-card .wppm-card-wrap {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(38, 84, 124, .08);
    box-shadow: 0 2px 12px rgba(38, 84, 124, .08);
    transition: transform .18s ease, box-shadow .18s ease;
}
.wppm-card .wppm-post:hover .wppm-card-wrap {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(38, 84, 124, .16);
}

/* ── Layout: uniformizar as imagens ──
   Cada imagem mantinha sua proporção original, então as alturas iam de
   152px a 338px e o texto de cada card começava numa altura diferente.
   Altura fixa + object-fit:cover recorta sem deformar. */
.wppm-card .post-img {
    height: 190px;
}
.wppm-card .post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Tipografia ──
   O corpo do card já herda Poppins pela correção do `html body`;
   o título é <h4>, então segue em Nunito pela regra de títulos. */
.wppm-card .wppm-card-wrap h4 {
    font-size: 1.4rem;      /* ~19,6px */
    font-weight: 700;       /* era 600 */
    line-height: 1.3;
    color: var(--cs-primaria);
}
.wppm-card .wppm-card-wrap h4 a { color: inherit; text-decoration: none; }
.wppm-card .wppm-card-wrap h4 a:hover { color: var(--c1-dk); }
/* O resumo tem classe .post-text.fs-16 e o plugin o fixa em 16px via
   `.wppm .post-text.fs-16` (0,3,0) — vencia um seletor (0,2,1).
   `p.post-text` aqui dá (0,3,1) e ganha por especificidade, sem !important.
   (O 16px também pode ser trocado nas opções do módulo, no admin.) */
.wppm-card .wppm-card-wrap p.post-text {
    font-size: 1rem;        /* 14px — era 16px, grande demais para card */
    line-height: 1.55;
}
.wppm-card .meta-row {
    font-size: .8rem;
    color: #5b6b7a;
}

/* ── Cores e realce: etiqueta de categoria ──
   Era um retângulo preto translúcido (rgba(0,0,0,.4)) de canto reto.
   Vira pílula navy da identidade. */
/* O fundo escuro vem de `.wppm .post-cats > li > a` (0,2,2) no plugin.
   Repetimos a estrutura `> li > a` com uma classe a mais (0,3,2) para
   vencer por especificidade, em vez de usar !important. */
.wppm .wppm-card-wrap .post-cats > li > a {
    background: var(--cs-primaria);
    color: #fff;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
}
.wppm .wppm-card-wrap .post-cats > li > a:hover {
    background: var(--c1-dk);
    color: #fff;
}

/* =============================================================
   SEÇÃO 15: "Redes Sociais" — abas do WPBakery (vc_tta-tabs)
   Componente: .vc_tta.vc_tta-tabs.vc_tta-color-sky.vc_tta-style-modern,
   abas na vertical à esquerda, painel com embed (iframe) do Instagram.
   OBS: o conteúdo do feed é um IFRAME externo — cor/fonte DENTRO dele não
   são estilizáveis por CSS. Aqui tratamos as abas e a moldura do painel.
   ============================================================= */

/* ── Layout ──
   A coluna de abas ocupava 40% (458px) da seção só para dois botões,
   espremendo o feed em 651px. A regra do plugin é
   `:is(…vc_tta-controls-size-lg…) .vc_tta-tabs-container { flex-basis:40% }`;
   repetimos a cadeia com uma classe a mais para vencer por especificidade. */
.vc_tta.vc_tta-tabs.vc_tta-tabs-position-left.vc_tta-controls-size-lg .vc_tta-tabs-container {
    flex-basis: 220px;
}

/* ── Cores e realce + Tipografia ──
   O tema "sky" do WPBakery deixava a aba INATIVA azul-clara (#5AA1E3) e a
   ATIVA cinza (#F8F8F8) — invertido: a ativa parecia desligada.
   Agora: inativa discreta (branca, texto navy) e ativa em navy sólido.
   Peso 600 (era 400) — são rótulos de seção, não texto corrido. */
.vc_tta.vc_tta-color-sky.vc_tta-style-modern .vc_tta-tab > a {
    background-color: #fff;
    color: var(--cs-primaria);
    border-color: rgba(38, 84, 124, .18);
    font-weight: 600;
    border-radius: 12px;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.vc_tta.vc_tta-color-sky.vc_tta-style-modern .vc_tta-tab > a:hover {
    background-color: var(--c1-xlt);
    color: var(--cs-primaria);
    border-color: rgba(38, 84, 124, .35);
}
.vc_tta.vc_tta-color-sky.vc_tta-style-modern .vc_tta-tab.vc_active > a {
    background-color: var(--cs-primaria);
    color: #fff;
    border-color: var(--cs-primaria);
}

/* ── Cantos e sombra: NÃO envolvemos o painel num cartão ──
   Tentei aplicar o cartão branco padrão (raio 16 + borda + sombra) aqui, mas
   medi no navegador e há dois motivos para não fazer:
     1) o próprio embed do Instagram já desenha sua moldura (fundo branco,
        borda 1px #dbdbdb, raio 3px) — daria MOLDURA DUPLA;
     2) o painel está configurado no construtor como "no fill"
        (.vc_tta-o-no-fill), e as regras do plugin (0,4,0) venciam as minhas
        (0,3,0) — passava só a sombra, criando uma sombra órfã sem fundo.
   O arredondamento desta seção fica nas ABAS (12px, acima). */

/* ── Layout: centralizar o embed ──
   O embed do Instagram é TRAVADO em 540px de largura, então alargar o painel
   não dá mais espaço ao feed — só cria vazio. Ele estava encostado à
   esquerda (21px de folga contra 328px à direita). Centralizar resolve.
   !important porque o script do Instagram injeta `margin` no style inline
   do iframe, e regra de folha só vence style inline com !important. */
.vc_tta.vc_tta-tabs .vc_tta-panel-body iframe.instagram-media {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =============================================================
   SEÇÃO 16: Grade de editais/licitações — layout LISTA (.wppm-list)
   É uma grade WP Post Modules DIFERENTE da de Notícias (Seção 14): usa o
   layout "list" (.wppm-list, sem .wppm-card-wrap, no-border, texto direto
   sobre o fundo azul #DDECF6), colunas via float, cards estreitos (~172px).
   Estrutura por card:
     .wppm-post (float; padding lateral = gutter entre colunas)
       └ .post-content          ← vira o CARTÃO (dentro do gutter)
          ├ .meta-row.cat-row → .post-cats > li > a   (badge de categoria)
          ├ h2.entry-title > a                         (título)
          ├ .post-text                                 (resumo)
          └ .meta-row.row-3 → .entry-meta              (data)
   NÃO mexo no float das colunas (risco de quebrar o responsivo do plugin);
   a uniformização de altura vem do line-clamp de título/resumo. */

/* ── Cantos e sombra: cartão branco REMOVIDO a pedido ──
   Estava aqui um .post-content com fundo branco + raio 16 + borda + sombra +
   hover de elevação. O usuário preferiu manter o texto direto sobre o fundo
   azul da seção (como era originalmente). As demais melhorias — badge navy,
   título navy e line-clamp — permanecem abaixo. */

/* ── Tipografia ──
   Título navy, peso 700 (era cinza #333, peso 600). É <h2> → já é Nunito.
   SEM line-clamp no título: o clamp de 2 linhas cortava os editais de título
   longo (ex.: "SECAGR – EDITAL CHAMAMENTO PÚBLICO Nº 48/2026 – TRATORES"),
   deixando uma 3ª linha fatiada. Como não há mais cartão, deixar o título
   inteiro é preferível a truncar. */
.wppm-list .entry-title {
    font-weight: 700;
    line-height: 1.3;
    color: var(--cs-primaria);
    margin-bottom: 10px;
}
.wppm-list .entry-title a { color: inherit; text-decoration: none; }
.wppm-list .entry-title a:hover { color: var(--c1-dk); }
/* Resumo: 3 linhas no máximo, para os cards fecharem em alturas parecidas. */
.wppm-list .post-text {
    color: #445; line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wppm-list .meta-row.row-3 { font-size: .8rem; color: #5b6b7a; margin-top: 10px; }

/* ── Cores e realce: badge de categoria vira pílula navy ──
   Vinha preto translúcido (rgba(0,0,0,.4)) e quadrado, de
   `.wppm .post-cats > li > a` (0,2,2). `.wppm.wppm-list …` dá (0,3,2) e vence. */
.wppm.wppm-list .post-cats > li > a {
    background: var(--cs-primaria);
    color: #fff;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: .72rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
}
.wppm.wppm-list .post-cats > li > a:hover { background: var(--c1-dk); color: #fff; }
.wppm-list .meta-row.cat-row { margin-bottom: 10px; }