/* Ajustes que o kit do Elementor nao consegue expressar em controle de widget.
   Regra de ouro: se der para resolver no kit ou no widget, NAO entra aqui — cada linha
   deste arquivo e um lugar a mais para procurar quando algo sair diferente do design. */

/* Busca do cabecalho ------------------------------------------------------------------
   Medido no design: 288x44, raio 16. O widget de busca do Pro tem controle de altura
   (`size`), mas o campo por dentro herda o padding vertical do Theme Style (12px) e
   empurra o container para ~50px. Nao existe controle de padding do input nesse widget,
   entao o ajuste vem por aqui — escopado pela classe, nunca em toda busca do site.

   O prefixo `body` nao e enfeite: a regra do Theme Style e
   `.elementor-kit-N input:not([type=button]):not([type=submit])`, e cada `:not()` soma
   especificidade — da 0,3,1. Sem o `body` a minha regra empata/perde e o padding de 12px
   continua valendo, deixando o campo com ~50px em vez de 44. */
body .elementor-widget-search-form.amupe-busca input.elementor-search-form__input {
  padding-top: 0;
  padding-bottom: 0;
}

/* O icone da lupa fica dentro do campo, como no design (a maquete usa pl-11 com o icone
   posicionado por cima). Sem isto o botao vira um bloco separado a direita. */
.elementor-widget-search-form.amupe-busca .elementor-search-form__container {
  overflow: hidden;
}

/* Cabecalho: desfoque do fundo ---------------------------------------------------------
   O design usa `backdrop-blur-xl` sobre branco a 90% — e o que faz o conteudo "vazar"
   borrado por baixo da barra ao rolar. O container do Elementor nao tem controle para
   backdrop-filter, entao a regra vive aqui, presa a uma classe do proprio cabecalho. */
.amupe-cabecalho {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

/* Menu: o contorno de foco padrao do navegador aparecia laranja sobre o gatilho do menu
   mobile. Trocado por um anel na cor da marca — acessivel e coerente. Nunca remover o
   indicador de foco: quem navega por teclado depende dele. */
.elementor-nav-menu .elementor-item:focus-visible,
.elementor-menu-toggle:focus-visible {
  outline: 2px solid var(--amupe-amupe-blue, #2B5FA6);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Heroi: cartao sobreposto ao carrossel -------------------------------------------------
   O design poe um cartao branco sobre a base da imagem, com 24px de folga nos tres lados,
   e um veu escuro entre a foto e o cartao para o texto continuar legivel em foto clara.
   Nao ha controle de sobreposicao no Elementor: a peca e composicao, entao vive aqui. */
.amupe-heroi-midia { position: relative; }

.amupe-heroi-midia::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(30, 68, 120, .8) 0%, rgba(30, 68, 120, .2) 40%, transparent 70%);
}

.amupe-heroi-midia > .elementor-widget-image-carousel { width: 100%; }

.amupe-heroi-midia > .e-con {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 24px;
  width: auto;
}

/* A altura vem da proporcao 4:5 do design, nao de um valor fixo — assim acompanha a coluna. */
.amupe-heroi-midia .elementor-image-carousel-wrapper,
.amupe-heroi-midia .swiper-slide img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

/* Menu no mobile: painel lateral pela direita ------------------------------------------
   O design abre uma folha lateral com as secoes ABERTAS (rotulo em caixa alta + itens
   listados), nao um acordeao. O gatilho do Elementor ja funciona — aqui muda so a
   apresentacao, aproveitando a classe `elementor-active` que ele mesmo poe no botao.

   O painel ocupa a ALTURA INTEIRA pela direita (preferencia do Theo). Como ele tem 400px
   e o logo fica a esquerda, o logo continua visivel e inteiro com o menu aberto — o
   respiro no topo do painel evita que o primeiro item passe por baixo do botao fechar. */
@media (max-width: 1023px) {
  .amupe-cabecalho .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    position: fixed;
    /* A barra do WordPress e FIXA e vive em z-index 99999: comecar em 0 fazia os
       primeiros 32px do painel (onde fica o botao fechar) sumirem por baixo dela para
       quem esta logado. A variavel vale 0 para o visitante. */
    top: var(--wp-admin--admin-bar--height, 0px);
    right: 0;
    bottom: 0;
    left: auto;
    height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
    width: min(400px, 86vw);
    max-width: 86vw;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border-left: 1px solid var(--amupe-border, #E2E8F0);
    box-shadow: -24px 0 48px rgba(15, 39, 68, .18);
    /* O respiro do topo existe só para o primeiro item não passar por baixo do botão de
       fechar. 110px era o PIOR caso (abaixo de 430px o cabeçalho quebra em duas linhas e
       o X desce até y=100); nas larguras maiores o X termina em 58 e sobravam 62px de
       vazio — o "espaço superior" que aparecia no painel. Agora cada faixa reserva o que
       de fato precisa. */
    padding: 74px 12px 32px;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    /* Acima de qualquer coisa da PAGINA (o cabecalho fixo esta em 50, cartoes e capas em
       1-2) e abaixo da barra do WordPress, que precisa continuar utilizavel no admin. */
    z-index: 9990;
  }

  .amupe-cabecalho .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container,
  .amupe-cabecalho .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu__container {
    transform: translateX(0);
  }

  /* SEM veu atras do painel (pedido do Theo, 04/ago/2026: "quando o modal estiver aberto
     nao quero essa barra preta com baixa opacidade").

     O que existia aqui era um `::after` do botao com `position: fixed; inset: 0`, escrito
     para escurecer a pagina inteira. Ele NUNCA fez isso: o cabecalho tem
     `backdrop-filter: blur(24px)`, e filtro transforma o elemento em BLOCO DE CONTENCAO
     dos descendentes `fixed` — entao `inset: 0` passou a valer a caixa do cabecalho, nao
     a janela. Resultado: em vez de um veu, uma barra cinza de 81px cobrindo so o logo.
     A pagina atras nunca escureceu, e ninguem percebeu porque o defeito PARECIA um efeito.

     Consertar de verdade exigiria pendurar o veu fora do cabecalho (`body:has(...)::after`,
     que escapa do bloco de contencao). Nao esta aqui de proposito: o painel ja se separa
     do fundo pela sombra, e escurecer a pagina inteira e comportamento novo, que nao foi
     pedido. Se um dia for, o gancho e esse — e o z-index tem que ficar ABAIXO de 50 (o do
     cabecalho), senao a barra volta pelo mesmo caminho. */

  .amupe-cabecalho .elementor-menu-toggle { position: relative; z-index: 9991; }

  /* Abaixo de 430px o logo e o botão não cabem na mesma linha, o cabeçalho vira duas e o
     X desce ~42px. Medido, não deduzido: X termina em 100 (390px) e 95 (320px). */
  @media (max-width: 429px) {
    .amupe-cabecalho .elementor-nav-menu__container.elementor-nav-menu--dropdown {
      padding-top: 116px;
    }
  }

  /* Secoes ABERTAS, como no design: o item de 1o nivel vira rotulo de grupo e os filhos
     ficam sempre a vista. Sem isto o usuario precisa de dois toques para cada destino. */
  .amupe-cabecalho .elementor-nav-menu--dropdown .sub-menu,
  .amupe-cabecalho .elementor-nav-menu--dropdown .elementor-nav-menu--dropdown {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0;
    background: transparent;
  }

  .amupe-cabecalho .elementor-nav-menu--dropdown > ul > li > .elementor-item {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--amupe-text-secondary, #64748B);
    padding: 20px 12px 6px;
    pointer-events: none;
  }

  /* A seta de submenu nao faz sentido quando tudo ja esta aberto. */
  .amupe-cabecalho .elementor-nav-menu--dropdown .sub-arrow { display: none; }

  .amupe-cabecalho .elementor-nav-menu--dropdown .sub-menu .elementor-item,
  .amupe-cabecalho .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item {
    font-size: 16px;
    font-weight: 500;
    padding: 10px 12px;
    border-radius: 10px;
  }

  /* "Amupe Capacita" e "Atendimento ao Gestor" nao tem filhos: seguem clicaveis. */
  .amupe-cabecalho .elementor-nav-menu--dropdown > ul > li:not(.menu-item-has-children) > .elementor-item {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--amupe-text-primary, #1a1a1a);
    padding: 10px 12px;
    pointer-events: auto;
  }
}

/* Cartao de noticia (Loop Item) --------------------------------------------------------
   Medido no design: faixa de imagem 387x224 com veu escuro na base e o selo da categoria
   sobreposto no canto inferior esquerdo. Sobreposicao e composicao — nao existe controle
   de widget para isso, entao vive aqui. */
.amupe-cartao-midia { position: relative; overflow: hidden; }

.amupe-cartao-midia .elementor-widget-theme-post-featured-image img {
  display: block;
  width: 100%;
  aspect-ratio: 387 / 224;
  object-fit: cover;
}

.amupe-cartao-midia::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(15, 39, 68, .5) 0%, transparent 55%);
}

.amupe-cartao-selo {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  background: #fff;
  border-radius: 10px;
  padding: 4px 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
}

/* O cartao inteiro e um link: sem isto o texto herda o azul de link do Theme Style. */
a.amupe-cartao { text-decoration: none; transition: box-shadow .18s, transform .18s; }
a.amupe-cartao:hover { box-shadow: 0 20px 25px -5px rgba(15, 39, 68, .12); transform: translateY(-2px); }

/* Selo do cabecalho de secao: pilula azul com texto branco (o "Central de Notícias"). */
.amupe-selo-azul {
  display: inline-flex;
  background: var(--amupe-amupe-blue, #2B5FA6);
  border-radius: 999px;
  padding: 6px 12px;
}

/* Cartoes das secoes de prazo, servico e evento ----------------------------------------
   Os icones do design tem fundo em GRADIENTE e o Elementor so oferece cor solida no
   widget de icone; a sobreposicao do icone sobre a foto tambem e composicao. Por isso
   estas duas coisas vivem aqui — o resto (tamanho, raio, cor do texto) esta no widget. */
.amupe-icone-gradiente .elementor-icon {
  background: linear-gradient(135deg, #2B5FA6 0%, #1E4478 100%) !important;
  border: 0 !important;
  box-shadow: 0 10px 15px -3px rgba(43, 95, 166, .25);
}

.amupe-midia-icone { position: relative; }
.amupe-icone-sobreposto { position: absolute; left: 16px; bottom: 16px; z-index: 2; }

.amupe-pilula-clara {
  display: inline-flex;
  background-color: #F1F5F9;
  border-radius: 999px;
  padding: 4px 12px;
}

.amupe-pilula-amarela {
  display: inline-flex;
  background: var(--amupe-amupe-yellow, #FDB913);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .15);
}

.amupe-cartao-prazo { box-shadow: 0 1px 3px rgba(15, 39, 68, .08); }

/* Evento: veu escuro entre a foto e o texto, senao o titulo branco some em foto clara. */
.amupe-cartao-evento { position: relative; }
.amupe-cartao-evento::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 43, .92) 0%, rgba(15, 23, 43, .55) 55%, rgba(15, 23, 43, .25) 100%);
}
.amupe-evento-conteudo { position: relative; z-index: 1; }

/* Grade de eventos da home: no design os cartões do loop e o cartão fixo "Mais Eventos"
   dividem UMA grade de 2 colunas (medido 1216x1608 = 3 linhas de 520). O Loop Grid não
   aceita uma célula fixa no fim, então ele entra como irmão e aqui os três invólucros do
   widget são achatados para que os cartões subam ao nível da grade do pai. Sem isto o
   cartão fixo cairia numa linha própria de largura inteira. */
.amupe-grade-eventos > .elementor-widget-loop-grid,
.amupe-grade-eventos > .elementor-widget-loop-grid > .elementor-widget-container,
.amupe-grade-eventos .elementor-loop-container {
  display: contents;
}

/* O icone-caixa da meta do evento fica em linha, nao empilhado. */
.amupe-evento-conteudo .elementor-widget-icon-box .elementor-icon-box-wrapper { display: flex; align-items: center; }
.amupe-evento-conteudo .elementor-widget-icon-box .elementor-icon-box-description { margin: 0; }

/* Grade de Loop fluida ------------------------------------------------------------------
   Mesmo problema das grades de container, e aqui o gerador não alcança: o Loop Grid emite
   `repeat(N, 1fr)` e o Elementor só tem pontos de quebra em 639/767/1023 — entre 1024 e o
   desktop largo as colunas do design ficavam espremidas (medido: cartão de 216px onde o
   design tem 280).

   A regra abaixo mantém as N colunas enquanto elas couberem no mínimo declarado e reduz o
   número de colunas quando não couberem, em vez de apertar o cartão. O mínimo vem por
   classe porque ele é medido POR CARTÃO — o de pessoa tem 280 no design, o de notícia 389.
   Só vale a partir de 1024: abaixo disso valem as contagens medidas para tablet e celular. */
/* O Loop Grid NÃO usa variável para as colunas: a contagem vem de uma regra fixa do
   frontend do Elementor — `.elementor-grid-4 .elementor-grid{grid-template-columns:repeat(4,1fr)}`.
   São duas classes, a mesma especificidade de um seletor natural daqui, e quem ganhava
   dependia da ordem de carga (medido: continuava 216px). Somar a própria
   `.elementor-grid` ao seletor sobe para três classes e resolve sem `!important`. */
@media (min-width: 1024px) {
  .amupe-grade-fluida .elementor-loop-container.elementor-grid {
    grid-template-columns: repeat(auto-fill, minmax(max(var(--amupe-col-min, 240px), var(--amupe-col-ideal, 240px)), 1fr));
  }
}
.amupe-grade-fluida--pessoa { --amupe-col-min: 260px; --amupe-col-ideal: calc((100% - 96px) / 4); }
.amupe-grade-fluida--membro { --amupe-col-min: 300px; --amupe-col-ideal: calc((100% - 64px) / 3); }
.amupe-grade-fluida--cartao { --amupe-col-min: 300px; --amupe-col-ideal: calc((100% - 48px) / 3); }

/* Número grande de faixa de estatística (TV, consórcios): o valor vem de um atalho, e
   atalho não tem controle de tipografia no Elementor — a medida vive aqui. */
.amupe-numero-grande { font-size: 36px; font-weight: 700; line-height: 1.1; color: #0F172B; text-align: center; }

/* Selo de contorno: o design usa esta variante nos cartões de programa. */
.amupe-badge-contorno {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
}

/* Diretoria -----------------------------------------------------------------------------
   Medido: retrato do presidente 535x401 (4:3) e avatar do conselheiro 48x48 redondo. A
   proporção precisa vir daqui porque o recorte das fotos é do cliente: sem fixá-la, um
   retrato em pé estica a linha inteira da grade. */
.amupe-retrato-presidencia img {
  aspect-ratio: 535 / 401;
  width: 100%;
  object-fit: cover;
  display: block;
}

.amupe-avatar-membro img {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}
/* Sem foto, o widget não imprime nada e o nome encosta na borda: o espaço da bolha fica
   reservado do mesmo jeito, senão as linhas da grade saem desalinhadas entre si. */
.amupe-cartao-membro .amupe-avatar-membro {
  flex: 0 0 48px;
  min-height: 48px;
  border-radius: 999px;
  background: #E4E4E7;
}

/* Página da notícia --------------------------------------------------------------------
   A capa tem foto de fundo com véu escuro: sem ele o título branco desaparece em foto
   clara — e a foto de capa é escolhida pela redação, não por nós. */
.amupe-capa-post { position: relative; }
.amupe-capa-post::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 43, .92) 0%, rgba(15, 23, 43, .55) 50%, rgba(15, 23, 43, .2) 100%);
}
.amupe-capa-conteudo { position: relative; z-index: 1; }

/* Coluna de compartilhamento acompanha a leitura no desktop e vira linha no mobile. */
@media (min-width: 1024px) {
  .amupe-compartilhar { position: sticky; top: 130px; }
}

/* Texto longo: o conteúdo vem do editor do WordPress, então o ritmo de leitura é definido
   aqui e não widget a widget. */
.amupe-texto-longo h2 { font-size: 24px; font-weight: 700; margin: 32px 0 8px; color: #1a1a1a; }
.amupe-texto-longo h3 { font-size: 20px; font-weight: 700; margin: 24px 0 8px; color: #1a1a1a; }
.amupe-texto-longo p { margin: 0 0 20px; }
.amupe-texto-longo ul, .amupe-texto-longo ol { margin: 0 0 20px 20px; }
.amupe-texto-longo li { margin-bottom: 8px; }
.amupe-texto-longo img { max-width: 100%; height: auto; border-radius: 12px; }
.amupe-texto-longo blockquote {
  margin: 24px 0;
  padding: 16px 24px;
  border-left: 4px solid var(--amupe-amupe-blue, #2B5FA6);
  background: #F8FAFC;
  border-radius: 0 12px 12px 0;
  font-style: normal;
}

/* Selo sobre fundo escuro (capa do contato): vidro claro, como no design. */
.amupe-selo-claro {
  display: inline-flex;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  padding: 8px 16px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Formulário: os campos do design têm 48px de altura. O controle do widget cuida do resto. */
.elementor-widget-form .elementor-field-textual { min-height: 48px; }
.elementor-widget-form textarea.elementor-field-textual { min-height: 150px; }

/* Endereco de e-mail e URL sao palavras longas sem espaco: numa tela de 320px empurram o
   layout inteiro. `overflow-wrap` deixa quebrar so quando nao cabe, sem hifenizar o resto. */
.elementor-widget-heading a,
.elementor-widget-text-editor a {
  overflow-wrap: anywhere;
}

/* Ficha de campos ----------------------------------------------------------------------
   Widget com valor dinâmico VAZIO não imprime nada — nem um elemento vazio. Por isso
   `:empty` nunca pega: o esconderijo é `:has()` invertido, ou seja, "esconda a linha que
   NÃO contém um valor". Sem isso um evento sem "Local" mostraria o rótulo órfão. */
.amupe-ficha-linha:not(:has(.amupe-ficha-valor)) { display: none; }
.amupe-ficha-linha:last-of-type { border-bottom: 0; }
.amupe-ficha-linha .amupe-ficha-valor { margin-left: auto; text-align: right; }

/* Ficha inteira some quando NENHUM campo está preenchido. */
.amupe-ficha:not(:has(.amupe-ficha-valor)) { display: none; }

/* Cartão de pessoa: proporção 278x320 do design. Recorte fixo mantém a grade alinhada
   mesmo com fotos de proporções diferentes — o cliente envia o que tem. */
.amupe-cartao-pessoa .elementor-widget-theme-post-featured-image img {
  aspect-ratio: 278 / 320;
  object-fit: cover;
  width: 100%;
  display: block;
}
/* Cargo e município somem quando em branco (o dado não veio com os retratos). */
.amupe-cartao-pessoa .amupe-ficha-valor:empty { display: none; }

/* Diretoria: o destaque do presidente só aparece quando alguém está marcado no órgão
   "Presidência". Sem ninguém marcado a seção some inteira, em vez de mostrar um bloco
   vazio ou a mensagem de "nada encontrado". */
.amupe-destaque-presidencia:not(:has(.e-loop-item)) { display: none; }

/* ── Municípios ─────────────────────────────────────────────────────────────
   Linha "ícone + valor" some inteira quando o campo está vazio: município sem site não
   pode exibir um ícone de globo solto. Mesma armadilha do `:has()` invertido acima —
   o widget com valor dinâmico vazio não imprime NADA, então `:empty` não alcança. */
.amupe-linha-ficha:not(:has(.amupe-ficha-valor)) { display: none; }
.amupe-linha-ficha .amupe-ficha-valor { overflow-wrap: anywhere; }

/* Par "rótulo + valor" da ficha: sem valor, o rótulo não fica órfão. */
.amupe-par-ficha:not(:has(.amupe-ficha-valor)) { display: none; }

/* O rodapé do cartão gruda embaixo: cartões de alturas diferentes mantêm os botões
   alinhados na mesma linha da grade. */
.amupe-cartao-municipio { height: 100%; }
.amupe-cartao-municipio .amupe-cartao-rodape { margin-top: auto; }

/* Ícone com fundo em gradiente (o quadrado 64x64 do cartão de município). */
.amupe-ico-gradiente .elementor-icon {
  background-image: linear-gradient(135deg, #2B5FA6 0%, #1E4478 100%);
  box-shadow: 0 4px 12px rgba(43, 95, 166, .25);
}

/* ── Capacita ───────────────────────────────────────────────────────────────
   Curso com link externo vai para o site do parceiro; sem link, abre o popup de
   inscrição. Os dois botões existem no cartão e cada registro mostra o que se aplica —
   é o `isExternal` do design, resolvido sem JavaScript. */
.amupe-acoes-curso .amupe-so-com-link { display: none; }
.amupe-acoes-curso:has(.amupe-so-com-link a[href]:not([href=""])) .amupe-so-com-link { display: block; }
.amupe-acoes-curso:has(.amupe-so-com-link a[href]:not([href=""])) .amupe-so-sem-link { display: none; }

.amupe-cartao-curso { height: 100%; }
.amupe-cartao-curso .amupe-acoes-curso { margin-top: auto; }

/* ── Pílulas de filtro (taxonomy-filter) ────────────────────────────────────
   O widget só expõe controle de FUNDO — não há controle de cor de texto nem de borda.
   Sem isto o estado ativo pinta o fundo de azul e deixa o texto escuro por cima
   (ilegível), e os três estados ficam idênticos na tela. */
.e-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
/* "Todas" é renderizado por ÚLTIMO pelo widget; no design ele abre a lista. */
.e-filter .e-filter-item[data-filter="__all"] { order: -1; }

.elementor-widget-taxonomy-filter .e-filter-item.e-filter-item {
  padding: .5rem 1rem;
  border: 1px solid #E2E8F0;
  border-radius: .75rem;
  background-color: #F1F5F9;
  color: #314158;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.elementor-widget-taxonomy-filter .e-filter-item.e-filter-item:hover {
  background-color: #E2EAF5;
  border-color: #C7D7EC;
  color: #2B5FA6;
}
.elementor-widget-taxonomy-filter .e-filter-item.e-filter-item:focus-visible {
  outline: 2px solid #2B5FA6;
  outline-offset: 2px;
}
.elementor-widget-taxonomy-filter .e-filter-item.e-filter-item[aria-pressed="true"] {
  background-color: #2B5FA6;
  border-color: #2B5FA6;
  color: #fff;
  box-shadow: 0 2px 8px rgba(43, 95, 166, .25);
}
.elementor-widget-taxonomy-filter .e-filter-item.e-filter-item[aria-pressed="true"]:hover {
  background-color: #1E4478;
  border-color: #1E4478;
  color: #fff;
}

/* ── Selo de categoria no cartão ────────────────────────────────────────────
   Post em três categorias imprimia as três dentro da pílula, que virava um bloco de
   duas linhas cobrindo a capa. O selo mostra UMA categoria (a principal) — a listagem
   completa fica na página da notícia. */
.amupe-selo-categoria {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Quem Somos ─────────────────────────────────────────────────────────────
   Ladrilhos da "Nossa Essência": o design usa GRADIENTE em cada cartão, e o widget de
   ícone só aceita cor sólida. */
.amupe-ladrilho .elementor-icon { box-shadow: 0 8px 20px rgba(15, 23, 43, .18); }
.amupe-ladrilho-azul  .elementor-icon { background-image: linear-gradient(135deg, #3B82F6, #2563EB); }
.amupe-ladrilho-verde .elementor-icon { background-image: linear-gradient(135deg, #10B981, #059669); }
.amupe-ladrilho-ambar .elementor-icon { background-image: linear-gradient(135deg, #F59E0B, #D97706); }

.amupe-cartao-essencia { height: 100%; transition: border-color .2s ease, box-shadow .2s ease; }
.amupe-cartao-essencia:hover {
  border-color: #2B5FA6;
  box-shadow: 0 16px 40px rgba(15, 23, 43, .12);
}
.amupe-cartao-essencia:hover .elementor-icon { transform: scale(1.08); }
.amupe-cartao-essencia .elementor-icon { transition: transform .2s ease; }

.amupe-cartao-orgao { height: 100%; }
.amupe-cartao-orgao .elementor-widget-button { margin-top: auto; }

/* ── Linha do tempo ─────────────────────────────────────────────────────────
   Trilho central com marcador, e os marcos alternando de lado. O ano fica GIGANTE atrás
   do titulo, como no design. */
.amupe-linha-tempo { position: relative; }
.amupe-linha-tempo::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #E4E4E7;
  transform: translateX(-50%);
}
.amupe-marco { position: relative; }
.amupe-marco::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 3.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: #18181B;
  border: 4px solid #F8FAFC;
  transform: translateX(-50%);
  z-index: 2;
}
/* O ano gigante fica ATRAS do titulo; a margem negativa e o que cria a sobreposicao. */
.amupe-marco-ano { pointer-events: none; }
.amupe-marco-titulo { margin-top: -2rem; position: relative; z-index: 1; }

/* Marcos pares invertem o lado — o zigue-zague do design.
   `nth-of-type` e NAO `nth-child`: o Elementor injeta um <style> como primeiro filho do
   container do loop, o que desloca a contagem de nth-child em um e inverte o zigue-zague
   inteiro. Contando por TIPO, so os <div> dos itens entram na conta. */
.amupe-linha-tempo .e-loop-item:nth-of-type(even) .amupe-marco { flex-direction: row-reverse; }
.amupe-linha-tempo .e-loop-item:nth-of-type(odd) .amupe-marco-texto { text-align: right; }
.amupe-linha-tempo .e-loop-item:nth-of-type(odd) .amupe-marco-texto > * { margin-left: auto; }

@media (max-width: 767px) {
  .amupe-linha-tempo::before,
  .amupe-marco::before { display: none; }
  /* TODOS os marcos viram coluna, não só os pares. A regra antiga só desfazia o
     `row-reverse` dos pares e deixava os ímpares em linha — num visor de 640px isso dava
     duas colunas de 259px, com o texto quebrando quase letra a letra. */
  .amupe-linha-tempo .e-loop-item .amupe-marco,
  .amupe-linha-tempo .e-loop-item:nth-of-type(even) .amupe-marco { flex-direction: column; }
  .amupe-linha-tempo .amupe-marco-texto,
  .amupe-linha-tempo .amupe-marco-imagem { width: 100%; }
  .amupe-linha-tempo .e-loop-item:nth-of-type(odd) .amupe-marco-texto { text-align: left; }
  .amupe-linha-tempo .e-loop-item:nth-of-type(odd) .amupe-marco-texto > * { margin-left: 0; }
  .amupe-marco-titulo { margin-top: -1rem; }
}

/* ── Cartão de destaque da listagem de notícias ─────────────────────────────
   A imagem preenche a célula inteira da grade: sem isto ela fica no tamanho natural
   (medido: 575x383 numa célula de 575x510) e sobra faixa branca embaixo. */
/* A capa NAO estica para a altura da linha: e a proporcao dela que define a altura do
   cartao (o design mede 727x480). Com `height:100%` a imagem seguia o texto e o cartao
   ia a 632px onde o design tem 484. */
.amupe-cartao-destaque .amupe-capa-destaque,
.amupe-cartao-destaque .amupe-capa-destaque .elementor-widget-container,
.amupe-cartao-destaque .amupe-capa-destaque figure { height: auto; display: block; }

.amupe-cartao-destaque .amupe-capa-destaque img {
  width: 100%;
  height: auto;
  /* Proporcao do design: 727x480. Ela e que define a altura do cartao — forcar
     min-height fazia o cartao ir a 625px onde o design tem 484. */
  aspect-ratio: 727 / 480;
  object-fit: cover;
  display: block;
}

@media (max-width: 1023px) {
  .amupe-cartao-destaque .amupe-capa-destaque img {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

/* "Ler mais" com a seta num circulo, como no design (o widget de botao nao separa o
   fundo do icone do fundo do proprio botao). */
.amupe-ler-mais .elementor-button { gap: .75rem; }
.amupe-ler-mais .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: #F1F5F9;
  transition: background-color .18s ease, transform .18s ease;
}
.amupe-cartao-destaque:hover .amupe-ler-mais .elementor-button-icon {
  background: #2B5FA6;
  color: #fff;
  transform: translateX(2px);
}

/* O titulo do destaque corta em 3 linhas e o resumo em 2, como no design (que mede 135px
   de titulo e 88px de resumo). Sem isto uma manchete real — bem mais longa que a do
   mockup — empurra a coluna de texto para 588px onde o desenho tem 484, e a imagem
   deixa de acompanhar a altura. */
.amupe-cartao-destaque .elementor-widget-heading h2.elementor-heading-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.amupe-cartao-destaque .elementor-widget-text-editor {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* O cartão da GRADE corta pelo mesmo motivo do destaque, e isso não é estética: numa
   grade, o cartão mais alto define a linha inteira. Uma manchete real (bem mais longa
   que a do mockup) esticava a linha toda — medido, o cartão saía 508px onde o design tem
   476. Título em 2 linhas e resumo em 3, como o design faz com line-clamp. */
.amupe-cartao .elementor-widget-heading h3.elementor-heading-title,
.amupe-cartao-projeto .elementor-widget-heading h3.elementor-heading-title,
.amupe-cartao-curso .elementor-widget-heading h3.elementor-heading-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.amupe-cartao .elementor-widget-text-editor,
.amupe-cartao-projeto .elementor-widget-text-editor,
.amupe-cartao-curso .elementor-widget-text-editor {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* O cartão de curso corta em 2, não 3: o design mede 40px de resumo (duas linhas de 14px)
   porque abaixo dele ainda vêm a linha de carga horária e o botão de inscrição. */
.amupe-cartao-curso .elementor-widget-text-editor { -webkit-line-clamp: 2; }

/* Numero grande da faixa de estatisticas (48/700, medido no design). O valor vem de um
   shortcode, entao a tipografia nao pode vir do controle do widget de titulo. */
.amupe-numero-grande {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  color: #242424;
}

/* Cartão da galeria: a faixa de imagem tem 217px no design (385x217 num cartão de 389x395).
   Sem a proporção travada, uma foto em pé estica a linha inteira da grade. */
.amupe-cartao-galeria .amupe-capa-galeria { aspect-ratio: 385 / 217; }
/* O título ocupa uma linha, como no design — nomes de álbum variam muito de tamanho. */
.amupe-cartao-galeria .elementor-widget-heading h3.elementor-heading-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* O selo abraça o texto: num container flex em coluna o padrão é esticar, e a pílula
   saía de ponta a ponta do cartão. */
.amupe-cartao-galeria .amupe-ficha-valor { align-self: flex-start; }

/* Selo/pílula abraça o texto em QUALQUER cartão: num container flex em coluna o padrão é
   esticar, e a pílula saía de ponta a ponta (visto no "Catálogo AMUPE" da galeria de boas
   práticas). Vale para todos os cartões, não só o da galeria. */
.amupe-cartao .amupe-ficha-valor,
.amupe-cartao .amupe-selo-premio,
.amupe-cartao .amupe-badge-contorno { align-self: flex-start; }