/* =========================================================
   SOMERJ — Tokens de marca e componentes (tema-filho Astra)
   Fonte da verdade: identidade-visual-somerj.pdf + protótipo
   ========================================================= */

:root{
  /* Cores da marca */
  --somerj-azul:#0060A8;
  --somerj-azul-escuro:#004E86;
  --somerj-navy:#013A66;
  --somerj-teal:#007878;
  --somerj-verde:#009048;
  --somerj-cta:#007A3D;         /* verde para botão com texto branco (AA) */
  --somerj-verde-vivo:#00A24A;

  /* Neutros */
  --somerj-ink:#0F1B2D;
  --somerj-texto:#3A3F45;
  --somerj-muted:#6B7280;
  --somerj-linha:#E3E7EC;
  --somerj-bg:#F4F7FA;
  --somerj-branco:#FFFFFF;

  /* Semânticas */
  --somerj-sucesso:#16A34A;
  --somerj-alerta:#D97706;
  --somerj-erro:#DC2626;

  /* Tipografia */
  --somerj-fonte-titulo:'Poppins', system-ui, Arial, sans-serif;
  --somerj-fonte-corpo:'Inter', system-ui, Arial, sans-serif;

  /* Layout */
  --somerj-raio:10px;
  --somerj-raio-btn:8px;
  --somerj-sombra:0 6px 20px rgba(15,27,45,.10);
  --somerj-sombra-sm:0 1px 3px rgba(15,27,45,.08);
  --somerj-container:1200px;
}

/* ---- Tipografia base (fallback; o ideal é definir no Personalizar do Astra) ---- */
body{ font-family:var(--somerj-fonte-corpo); color:var(--somerj-texto); }
h1,h2,h3,h4,h5,h6,
.site-title,.ast-single-post .entry-title,.entry-title{ font-family:var(--somerj-fonte-titulo); color:var(--somerj-ink); }

/* ---- Utilitários de cor (para usar em widgets/HTML do Elementor) ---- */
.somerj-azul{ color:var(--somerj-azul); }
.somerj-bg-azul{ background:var(--somerj-azul); color:#fff; }
.somerj-bg-navy{ background:var(--somerj-navy); color:#fff; }
.somerj-bg-teal{ background:var(--somerj-teal); color:#fff; }
.somerj-bg-suave{ background:var(--somerj-bg); }
.somerj-kicker{ font-family:var(--somerj-fonte-titulo); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--somerj-teal); }

/* ---- Botões ---- */
.somerj-btn{ display:inline-flex; align-items:center; gap:8px; border-radius:var(--somerj-raio-btn);
  padding:12px 22px; font-family:var(--somerj-fonte-titulo); font-weight:600; font-size:14px;
  line-height:1; text-decoration:none; border:2px solid transparent; cursor:pointer; transition:.15s; }
.somerj-btn--primary{ background:var(--somerj-azul); color:#fff; }
.somerj-btn--primary:hover{ background:var(--somerj-azul-escuro); color:#fff; }
.somerj-btn--cta{ background:var(--somerj-cta); color:#fff; }
.somerj-btn--cta:hover{ filter:brightness(1.08); color:#fff; }
.somerj-btn--outline{ border-color:var(--somerj-azul); color:var(--somerj-azul); background:transparent; }
.somerj-btn--outline:hover{ background:var(--somerj-azul); color:#fff; }

/* ---- Tags / editorias ---- */
.somerj-tag{ display:inline-block; font-family:var(--somerj-fonte-titulo); font-size:10px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px;
  background:#E6F0F8; color:var(--somerj-azul); }
.somerj-tag--teal{ background:#E1F0F0; color:var(--somerj-teal); }
.somerj-tag--verde{ background:#E4F3EA; color:var(--somerj-cta); }

/* ---- Cards (notícia/evento) ---- */
.somerj-card{ border:1px solid var(--somerj-linha); border-radius:var(--somerj-raio);
  overflow:hidden; background:#fff; box-shadow:var(--somerj-sombra-sm); }
.somerj-card__thumb{ aspect-ratio:16/9; background:var(--somerj-bg) center/cover no-repeat; }
.somerj-card__body{ padding:14px 16px; }
.somerj-card__title{ font-family:var(--somerj-fonte-titulo); font-size:15px; color:var(--somerj-ink); margin:8px 0 4px; }
.somerj-card__meta{ font-size:12px; color:var(--somerj-muted); }

/* ---- Selo de data para eventos ---- */
.somerj-date{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:54px; padding:8px 0; border-radius:8px; background:var(--somerj-azul); color:#fff; font-family:var(--somerj-fonte-titulo); }
.somerj-date b{ font-size:20px; line-height:1; }
.somerj-date span{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; }

/* ---- Botão flutuante de WhatsApp ---- */
.somerj-wa{ position:fixed; right:22px; bottom:22px; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:26px; box-shadow:var(--somerj-sombra); z-index:1500; text-decoration:none; }

/* ---- Ajustes finos alinhados à marca (aplicados sobre o Astra) ---- */
.ast-button, .wp-block-button__link{ border-radius:var(--somerj-raio-btn); }
a{ color:var(--somerj-azul); }

/* ---- Rodapé (colunas portadas do protótipo) ----
   Valores vindos de design/somerj-prototipo.html: navy de fundo, texto
   #c4d2e2, títulos de coluna em Poppins caixa-alta. */
.somerj-rodape{ max-width:var(--somerj-container); margin:0 auto; padding:52px 20px 8px; }
.somerj-rodape__grade{ display:grid; gap:34px; grid-template-columns:1fr; }
@media (min-width:640px){ .somerj-rodape__grade{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .somerj-rodape__grade{ grid-template-columns:1.5fr 1fr 1.2fr; } }

.somerj-rodape__logo{ max-width:190px; height:auto; display:block;
  /* O logo tem texto azul/verde, feito para fundo claro. Sobre o navy ele
     sumiria; o filtro o converte para branco sem precisar de outro arquivo. */
  filter:brightness(0) invert(1); opacity:.95; }
.somerj-rodape__nome{ font-family:var(--somerj-fonte-titulo); font-weight:700;
  font-size:26px; color:#fff; letter-spacing:.02em; }
.somerj-rodape__sobre{ font-size:13px; color:#c4d2e2; margin:14px 0 0; max-width:34ch; line-height:1.6; }

.somerj-rodape__titulo{ color:#fff; font-family:var(--somerj-fonte-titulo); font-size:14px;
  letter-spacing:.04em; text-transform:uppercase; margin:0 0 14px; font-weight:600; }

.somerj-rodape__lista{ list-style:none; margin:0; padding:0; }
.somerj-rodape__lista li{ margin:0; }
.somerj-rodape__lista a{ color:#c4d2e2; font-size:13.5px; display:block; padding:4px 0; text-decoration:none; }
.somerj-rodape__lista a:hover{ color:#fff; }

.somerj-rodape__endereco{ color:#c4d2e2; font-size:13.5px; font-style:normal;
  line-height:1.7; margin:0 0 10px; }

.somerj-rodape__redes{ list-style:none; display:flex; gap:10px; margin:16px 0 0; padding:0; }
.somerj-rodape__redes a{ width:38px; height:38px; border-radius:9px;
  background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none; transition:background .15s ease; }
.somerj-rodape__redes a:hover{ background:rgba(255,255,255,.22); }

/* Separa as colunas da faixa de copyright do Astra, que fica logo abaixo. */
.site-footer .ast-footer-copyright{ border-top:1px solid rgba(255,255,255,.12); padding-top:18px; }

/* ---- Crédito de desenvolvimento no rodapé (shortcode [ytupia]) ----
   Discreto por definição: não deve competir com o nome da SOMERJ. Herda o
   tamanho do rodapé, com opacidade reduzida que sobe no hover. */
.somerj-credito{ opacity:.72; transition:opacity .18s ease; }
.somerj-credito:hover{ opacity:1; }
.somerj-credito__link{ display:inline-flex; align-items:center; gap:6px;
  color:inherit; text-decoration:none; border-bottom:1px solid transparent; }
.somerj-credito__link:hover{ color:inherit; border-bottom-color:currentColor; }
/* O ícone da Ytupià é um quadrado de fundo amarelo sólido (sem transparência):
   o raio suave evita o aspecto de recorte duro contra o fundo do rodapé. */
.somerj-credito__logo{ height:16px; width:16px; display:block; border-radius:3px; }
.somerj-credito__nome{ font-family:var(--somerj-fonte-titulo); font-weight:500; }

/* ---- Diretoria (shortcode [somerj_diretoria]) ----
   A marcação vem do somerj-core; aqui mora só a aparência. */
.somerj-diretoria__titulo{ font-family:var(--somerj-fonte-titulo); color:var(--somerj-ink);
  margin:40px 0 20px; font-size:clamp(20px,2.4vw,28px); }
.somerj-diretoria__titulo:first-child{ margin-top:0; }

.somerj-diretoria__grid{ list-style:none; margin:0; padding:0; display:grid; gap:24px;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }

.somerj-dirigente{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.somerj-dirigente__foto{ width:100%; max-width:180px; aspect-ratio:1; object-fit:cover;
  border-radius:var(--somerj-raio, 10px); box-shadow:var(--somerj-sombra); background:var(--somerj-linha); }

/* Sem foto: iniciais no lugar, para a grade não desalinhar enquanto a SOMERJ
   não envia as imagens que faltam. */
.somerj-dirigente__foto--vazia{ display:flex; align-items:center; justify-content:center;
  font-family:var(--somerj-fonte-titulo); font-size:38px; font-weight:600;
  color:var(--somerj-azul); background:var(--somerj-bg); box-shadow:none;
  border:1px dashed var(--somerj-linha); }

.somerj-dirigente__nome{ font-family:var(--somerj-fonte-titulo); font-weight:600;
  color:var(--somerj-ink); margin-top:12px; line-height:1.3; }
.somerj-dirigente__cargo{ font-size:13px; color:var(--somerj-azul); margin-top:2px; }
.somerj-dirigente__regiao{ font-size:12px; color:var(--somerj-muted); margin-top:2px; }

/* Ex-presidentes: cartões menores, por serem galeria histórica e não o time atual. */
.somerj-diretoria__grid--ex{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:18px; }
.somerj-diretoria__grid--ex .somerj-dirigente__foto{ max-width:140px; }
.somerj-diretoria__grid--ex .somerj-dirigente__nome{ font-size:14px; }

/* ---- Ficha do dirigente (currículo / diretoria da gestão) ----
   Marcação em <details> pelo somerj-core: sem JavaScript a bio abre na propria
   pagina; com JS, somerj-bio.js promove a uma janela. As duas formas usam as
   MESMAS regras de texto abaixo — o que muda e so o envoltorio. */

.somerj-bio{ width:100%; }
.somerj-bio__gatilho{ display:flex; flex-direction:column; align-items:center;
  text-align:center; cursor:pointer; list-style:none; border-radius:var(--somerj-raio,10px); }
.somerj-bio__gatilho::-webkit-details-marker{ display:none; }  /* seta nativa do <summary> */
.somerj-bio__gatilho:focus-visible{ outline:2px solid var(--somerj-azul); outline-offset:3px; }

/* Chamada discreta: aparece no hover/foco, para o cartao nao virar um mural de
   rotulos. Em toque nao ha hover, entao ela fica sempre visivel (media query
   abaixo) — senao a existencia da ficha ficaria invisivel no celular. */
.somerj-bio__aviso{ font-size:12px; color:var(--somerj-azul); margin-top:6px;
  opacity:0; transition:opacity .15s ease; }
.somerj-bio__gatilho:hover .somerj-bio__aviso,
.somerj-bio__gatilho:focus-visible .somerj-bio__aviso{ opacity:1; }
@media (hover:none){ .somerj-bio__aviso{ opacity:1; } }

.somerj-dirigente--tem-ficha .somerj-dirigente__foto{ transition:transform .15s ease, box-shadow .15s ease; }
.somerj-bio__gatilho:hover .somerj-dirigente__foto{ transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(15,27,45,.16); }

/* ---- Corpo da ficha ---- */
.somerj-bio__corpo{ text-align:left; }
/* display:block explicito: o Astra deixa este elemento como flex e o periodo
   subia para a mesma linha do nome, disputando o topo da ficha. */
.somerj-bio__cabecalho{ display:block; padding-bottom:14px; margin-bottom:18px;
  border-bottom:2px solid var(--somerj-azul); }
.somerj-bio__titulo{ display:block; font-family:var(--somerj-fonte-titulo);
  font-size:20px; font-weight:700; color:var(--somerj-ink); line-height:1.25; }
.somerj-bio__sub{ display:block; margin-top:2px; font-size:14px; color:var(--somerj-azul); }

.somerj-bio__texto{ font-size:15px; line-height:1.65; color:var(--somerj-texto); }
.somerj-bio__texto > *:first-child{ margin-top:0; }
.somerj-bio__texto > *:last-child{ margin-bottom:0; }

/* ---- REGRA DESTE COMPONENTE ----
   Todo tratamento visual da bio se ancora numa classe que MORA NO CONTEUDO
   (`somerj-bio__secao`, `__equipe`, `__lista`, `__nota`), gravada como
   `className` do bloco na importacao. Nunca num invólucro que so existe no
   site.

   POR QUE: o CSS da marca entra no editor por add_editor_style, mas o editor
   nao tem `.somerj-bio__texto` — esse invólucro e montado pelo shortcode, na
   exibicao. Regras penduradas nele valiam so no site, e o mesmo <h2> aparecia
   como etiqueta teal para o visitante e como titulo preto para quem edita.
   Duas aparencias para o mesmo conteudo, sem nada na tela que explicasse.

   Com a classe no conteudo, editor e site leem a MESMA regra. Ao acrescentar
   qualquer estilo aqui, verifique que o seletor nao depende de `__texto`. */

.somerj-bio__secao{ font-family:var(--somerj-fonte-titulo); color:var(--somerj-ink);
  margin:26px 0 10px; padding-bottom:6px;
  border-bottom:1px solid var(--somerj-linha); }
/* Peso e tamanho qualificados pelo ELEMENTO. O editor aplica os seus estilos de
   titulo por seletor de elemento, que ganha de uma classe sozinha: sem o `h2.`
   o titulo saia 700 no editor e 600 no site — mesma classe, dois pesos. */
h2.somerj-bio__secao{ font-size:17px; font-weight:600; }
h3.somerj-bio__secao{ font-size:14.5px; font-weight:600; border-bottom:0;
  padding-bottom:0; margin:20px 0 8px; }

.somerj-bio__nota{ margin:0 0 18px; padding:10px 14px;
  background:var(--somerj-bg); border-left:3px solid var(--somerj-verde);
  border-radius:0 6px 6px 0; font-size:14px; color:var(--somerj-muted);
  font-style:normal; }
.somerj-bio__nota p{ margin:0; }

/* Mini-curriculo: marcador proprio, respirando mais que o padrao. */
.somerj-bio__lista{ list-style:none; margin:0 0 16px; padding:0; }
.somerj-bio__lista li{ position:relative; padding:0 0 0 18px; margin-bottom:8px; }
.somerj-bio__lista li::before{ content:"";
  position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%;
  background:var(--somerj-verde); }

/* ---- Equipe da gestao: bloco de TABELA nativo ----
   Vinte cargos numa lista corrida viram um bloco que ninguem termina de ler.
   Em duas colunas o olho desce pela coluna dos nomes, e a faixa alternada da o
   alinhamento horizontal sem precisar de grade visivel.

   E tabela nativa do WordPress, gravada na importacao, e nao uma lista que o
   servidor reorganiza na hora de exibir: assim o editor mostra exatamente isto
   e editar e clicar na celula. As regras abaixo valem no site E dentro do
   editor (o CSS entra la por add_editor_style, em inc/setup.php). */
/* `figure.` em vez de escopo pelo invólucro: ganha do margin do bloco de tabela
   do núcleo com especificidade propria, e continua valendo dentro do editor. */
figure.somerj-bio__equipe{ margin:0 0 18px; }
.somerj-bio__equipe table{ width:100%; border-collapse:collapse;
  border:1px solid var(--somerj-linha); border-radius:8px; overflow:hidden;
  font-size:15px; }
.somerj-bio__equipe td{ padding:9px 14px; border:0; vertical-align:baseline; }

/* O LISTRADO E DO BLOCO, nao do tema. A tabela e gravada com o estilo nativo
   `is-style-stripes`, entao o painel do editor mostra "Listras" selecionado e
   trocar para "Padrao" realmente tira as faixas. Antes o listrado vinha daqui,
   e o painel dizia "Padrao" numa tabela visivelmente listrada — controle
   mentindo sobre o proprio estado. Ao tema cabe so a cor da faixa. */
.somerj-bio__equipe.is-style-stripes tbody tr:nth-child(odd) td,
.somerj-bio__equipe.is-style-stripes tbody tr:nth-child(odd){ background-color:var(--somerj-bg); }
/* Primeira coluna = cargo (rotulo); segunda = nome (o que se procura). */
.somerj-bio__equipe td:first-child{ width:38%; font-size:12.5px;
  color:var(--somerj-muted); line-height:1.4; }
.somerj-bio__equipe td:last-child{ font-weight:500; color:var(--somerj-ink); line-height:1.4; }

@media (max-width:520px){
  .somerj-bio__equipe table{ font-size:14px; }
  .somerj-bio__equipe td{ display:block; padding:2px 12px; }
  .somerj-bio__equipe td:first-child{ width:auto; padding-top:10px; }
  .somerj-bio__equipe td:last-child{ padding-bottom:10px; }

}

/* ---- Janela (com JavaScript) ---- */
.somerj-modal{ border:0; padding:0; max-width:680px; width:calc(100% - 32px);
  max-height:86vh; border-radius:12px; background:#fff; color:var(--somerj-texto);
  box-shadow:0 24px 60px rgba(15,27,45,.28); overflow:hidden; }
.somerj-modal::backdrop{ background:rgba(15,27,45,.55); }
.somerj-modal__interno{ display:flex; flex-direction:column; max-height:86vh; }
.somerj-modal__topo{ display:flex; align-items:flex-start; gap:14px;
  padding:20px 22px 0; }
.somerj-modal__topo .somerj-bio__cabecalho{ flex:1; margin-bottom:0; }
/* padding e min-width zerados: sem isso o padding de botao do Astra alarga o
   elemento e o circulo vira pilula. */
.somerj-modal__fechar{ flex:none; width:34px; height:34px; min-width:0; padding:0;
  border-radius:50%; border:1px solid var(--somerj-linha); background:#fff;
  color:var(--somerj-muted); font-size:20px; line-height:1; cursor:pointer; }
.somerj-modal__fechar:hover{ background:var(--somerj-bg); color:var(--somerj-ink); }
.somerj-modal__fechar:focus-visible{ outline:2px solid var(--somerj-azul); outline-offset:2px; }
.somerj-modal__corpo{ padding:18px 22px 24px; overflow-y:auto; }

/* Com JS, o <details> deixa de abrir sozinho: quem mostra o conteudo e a janela. */
.somerj-bio--js > .somerj-bio__corpo{ display:none; }

/* ---- Mapa de filiadas (shortcode [somerj_mapa_filiadas]) ----
   Sem zoom, por decisão de projeto: o destaque é leve e o card é a lista. */
.somerj-mapa{ display:grid; gap:28px; grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .somerj-mapa{ grid-template-columns:1.15fr .85fr; } }

.somerj-mapa__palco{ background:var(--somerj-bg); border-radius:var(--somerj-raio);
  padding:12px; min-height:320px; display:flex; align-items:center; justify-content:center; }
.somerj-mapa__svg{ width:100%; height:auto; display:block; }
.somerj-mapa__carregando,.somerj-mapa__erro{ color:var(--somerj-muted); font-size:14px; text-align:center; }

.somerj-mapa__uf{ fill:#dfe7ee; stroke:#fff; stroke-width:1.2; transition:fill .15s ease; }
.somerj-mapa__uf.is-filiada{ fill:var(--somerj-azul); cursor:pointer; }
.somerj-mapa__uf.is-filiada:hover,
.somerj-mapa__uf.is-ativo{ fill:var(--somerj-cta); }
.somerj-mapa__uf:focus{ outline:2px solid var(--somerj-ink); outline-offset:1px; }

.somerj-mapa__lista{ list-style:none; margin:0; padding:0; max-height:520px; overflow-y:auto; }
.somerj-mapa__item{ padding:10px 12px; border-bottom:1px solid var(--somerj-linha);
  border-left:3px solid transparent; transition:background .15s ease,border-color .15s ease; }
.somerj-mapa__item:hover,
.somerj-mapa__item.is-ativo{ background:var(--somerj-bg); border-left-color:var(--somerj-cta); }
.somerj-mapa__nome{ display:block; font-family:var(--somerj-fonte-titulo); font-weight:600;
  color:var(--somerj-ink); text-decoration:none; font-size:15px; }
.somerj-mapa__nome:hover{ color:var(--somerj-azul); }
.somerj-mapa__sede{ display:block; font-size:12px; color:var(--somerj-muted); margin-top:1px; }
.somerj-mapa__contato{ display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; font-size:12px; }
.somerj-mapa__contato a{ color:var(--somerj-azul); text-decoration:none; }
.somerj-mapa__contato a:hover{ text-decoration:underline; }

/* ---- Templates de arquivo e ficha (CPTs) ---- */
.somerj-arquivo,.somerj-ficha{ max-width:var(--somerj-container); margin:0 auto; padding:40px 20px 60px; }
.somerj-arquivo__titulo,.somerj-ficha__titulo{ font-family:var(--somerj-fonte-titulo); color:var(--somerj-ink);
  font-size:clamp(26px,3.4vw,38px); margin:0 0 12px; }
.somerj-arquivo__intro{ color:var(--somerj-texto); max-width:70ch; margin:0 0 32px; }
.somerj-arquivo__secao{ font-family:var(--somerj-fonte-titulo); color:var(--somerj-ink);
  font-size:clamp(19px,2.2vw,26px); margin:48px 0 20px; }

.somerj-cards{ list-style:none; margin:0; padding:0; display:grid; gap:22px;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.somerj-card--filiada{ background:#fff; border:1px solid var(--somerj-linha);
  border-radius:var(--somerj-raio); padding:18px; display:flex; flex-direction:column; gap:8px; }
.somerj-card__logo img{ width:100%; height:auto; border-radius:6px; }
.somerj-card__titulo{ font-family:var(--somerj-fonte-titulo); font-size:16px; margin:0; line-height:1.35; }
.somerj-card__titulo a{ color:var(--somerj-ink); text-decoration:none; }
.somerj-card__titulo a:hover{ color:var(--somerj-azul); }
.somerj-card__contato{ list-style:none; margin:0; padding:0; font-size:13px; display:grid; gap:2px; }
.somerj-card__contato a{ color:var(--somerj-azul); text-decoration:none; }
.somerj-card__contato a:hover{ text-decoration:underline; }

.somerj-ficha__cabecalho{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
.somerj-ficha__logo img{ max-width:180px; height:auto; border-radius:8px; }
.somerj-ficha__dados{ display:grid; grid-template-columns:auto 1fr; gap:8px 20px;
  background:var(--somerj-bg); border-radius:var(--somerj-raio); padding:20px; margin:0 0 28px; }
.somerj-ficha__dados dt{ font-weight:600; color:var(--somerj-ink); }
.somerj-ficha__dados dd{ margin:0; color:var(--somerj-texto); }
.somerj-ficha__dados a{ color:var(--somerj-azul); }
.somerj-ficha__cobertura h2{ font-family:var(--somerj-fonte-titulo); font-size:20px;
  color:var(--somerj-ink); margin:0 0 12px; }
.somerj-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.somerj-tags .somerj-tag{ background:var(--somerj-bg); border:1px solid var(--somerj-linha);
  border-radius:999px; padding:4px 12px; font-size:13px; color:var(--somerj-texto); }
.somerj-ficha__voltar{ margin-top:36px; }
.somerj-ficha__voltar a{ color:var(--somerj-azul); text-decoration:none; }

/* ---- Grade de capas da revista ---- */
.somerj-capas{ list-style:none; margin:0; padding:0; display:grid; gap:26px;
  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); }
.somerj-capa__link{ text-decoration:none; display:block; }
.somerj-capa__img{ width:100%; aspect-ratio:520/736; object-fit:cover; display:block;
  border-radius:var(--somerj-raio); box-shadow:var(--somerj-sombra); background:var(--somerj-linha); }
.somerj-capa__img--vazia{ display:flex; align-items:center; justify-content:center;
  font-family:var(--somerj-fonte-titulo); font-size:34px; color:var(--somerj-muted);
  background:var(--somerj-bg); border:1px dashed var(--somerj-linha); box-shadow:none; }
.somerj-capa__titulo{ display:block; margin-top:10px; font-family:var(--somerj-fonte-titulo);
  font-weight:600; color:var(--somerj-ink); font-size:15px; }
.somerj-capa__data{ display:block; font-size:12px; color:var(--somerj-muted); }

.somerj-ficha__revista{ display:grid; gap:32px; grid-template-columns:1fr; }
@media (min-width:760px){ .somerj-ficha__revista{ grid-template-columns:300px 1fr; } }
.somerj-ficha__capa img,.somerj-ficha__capa .somerj-capa__img{ width:100%; height:auto;
  border-radius:var(--somerj-raio); box-shadow:var(--somerj-sombra); }
.somerj-ficha__data{ color:var(--somerj-muted); margin:0 0 16px; }
.somerj-btn__peso{ opacity:.8; font-size:12px; margin-left:8px; }

/* ---- Filtros da biblioteca documental ---- */
.somerj-filtros{ display:grid; gap:14px; background:var(--somerj-bg);
  border-radius:var(--somerj-raio); padding:18px; margin-bottom:28px;
  grid-template-columns:1fr; align-items:end; }
@media (min-width:860px){ .somerj-filtros{ grid-template-columns:2fr 1fr 1fr 1fr auto; } }
.somerj-filtros__campo{ margin:0; display:flex; flex-direction:column; gap:4px; }
.somerj-filtros__campo label{ font-size:12px; font-weight:600; color:var(--somerj-ink); }
.somerj-filtros__campo input,.somerj-filtros__campo select{ width:100%; padding:8px 10px;
  border:1px solid var(--somerj-linha); border-radius:6px; background:#fff; }
.somerj-filtros__acoes{ margin:0; display:flex; align-items:center; gap:12px; }
.somerj-filtros__limpar{ font-size:13px; color:var(--somerj-muted); }
.somerj-resultados{ color:var(--somerj-muted); font-size:14px; margin:0 0 18px; }

/* ---- Lista de documentos ---- */
.somerj-lista-doc{ list-style:none; margin:0; padding:0; }
.somerj-doc{ padding:18px 0; border-bottom:1px solid var(--somerj-linha); }
.somerj-doc__titulo{ font-family:var(--somerj-fonte-titulo); font-size:18px; margin:0 0 6px; }
.somerj-doc__titulo a{ color:var(--somerj-ink); text-decoration:none; }
.somerj-doc__titulo a:hover{ color:var(--somerj-azul); }
.somerj-doc__meta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  font-size:12px; color:var(--somerj-muted); margin:0 0 6px; }
.somerj-doc__arquivo{ font-weight:600; color:var(--somerj-azul); }
.somerj-doc__resumo{ margin:0; color:var(--somerj-texto); font-size:14px; }
.somerj-ficha__resumo{ font-size:17px; color:var(--somerj-texto); }
.somerj-ficha__assuntos{ font-size:14px; color:var(--somerj-muted); }

/* ---- Cartões de notícia ---- */
.somerj-card--noticia{ background:#fff; border:1px solid var(--somerj-linha);
  border-radius:var(--somerj-raio); overflow:hidden; padding:0 0 16px; }
.somerj-card__imagem img{ width:100%; height:auto; display:block; }
.somerj-card--noticia .somerj-card__meta{ display:flex; gap:10px; align-items:center;
  font-size:12px; color:var(--somerj-muted); margin:14px 16px 6px; }
.somerj-card--noticia .somerj-card__titulo{ margin:0 16px 6px; font-size:17px; }
.somerj-card__resumo{ margin:0 16px; font-size:14px; color:var(--somerj-texto); }

.somerj-vazio{ color:var(--somerj-muted); background:var(--somerj-bg);
  border-radius:var(--somerj-raio); padding:24px; text-align:center; }

/* ---- Seções de destaque na home ---- */
.somerj-destaques{ margin:0 0 56px; }
.somerj-destaques__titulo{ font-family:var(--somerj-fonte-titulo); color:var(--somerj-ink);
  font-size:clamp(21px,2.6vw,30px); margin:0 0 20px; }
.somerj-card--destaque{ background:#fff; border:1px solid var(--somerj-linha);
  border-radius:var(--somerj-raio); overflow:hidden; padding:0 0 16px; }
.somerj-card--destaque .somerj-card__meta{ font-size:12px; color:var(--somerj-muted); margin:14px 16px 4px; }
.somerj-card--destaque .somerj-card__titulo{ margin:0 16px; font-size:17px; }
.somerj-destaques__mais{ margin:22px 0 0; }

/* Faixa de chamada ao fim da home */
.somerj-cta{ background:var(--somerj-navy); color:#fff; border-radius:var(--somerj-raio);
  padding:44px 32px; text-align:center; margin:0 0 20px; }
.somerj-cta h2{ font-family:var(--somerj-fonte-titulo); color:#fff; margin:0 0 10px;
  font-size:clamp(22px,2.8vw,32px); }
.somerj-cta p{ color:#c4d2e2; margin:0 0 22px; }
.somerj-cta .somerj-btn{ background:var(--somerj-cta); }

/* ---- Agenda de eventos ---- */
.somerj-eventos{ list-style:none; margin:0 0 40px; padding:0; }
.somerj-evento{ display:flex; gap:18px; align-items:flex-start;
  padding:16px 0; border-bottom:1px solid var(--somerj-linha); }
.somerj-evento .somerj-date{ flex:0 0 auto; }
.somerj-date small{ font-size:10px; opacity:.85; }
.somerj-evento__corpo{ min-width:0; }
.somerj-evento__titulo{ font-family:var(--somerj-fonte-titulo); font-size:18px; margin:0 0 6px; }
.somerj-evento__titulo a{ color:var(--somerj-ink); text-decoration:none; }
.somerj-evento__titulo a:hover{ color:var(--somerj-azul); }
.somerj-evento__meta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  font-size:13px; color:var(--somerj-muted); margin:0 0 6px; }
.somerj-evento__resumo{ margin:0; font-size:14px; color:var(--somerj-texto); }

/* Realizados: presentes para consulta, mas sem competir com a agenda futura. */
.somerj-evento--passado{ opacity:.62; }
.somerj-evento--passado .somerj-date{ background:var(--somerj-muted); }
.somerj-aviso-passado{ background:var(--somerj-bg); border-left:4px solid var(--somerj-muted);
  padding:10px 14px; color:var(--somerj-muted); font-size:14px; margin:0 0 18px; }
.somerj-ficha__imagem img{ width:100%; height:auto; border-radius:var(--somerj-raio); margin:0 0 24px; }

/* ---- 404 e busca ---- */
.somerj-erro{ max-width:720px; margin:0 auto; padding:64px 20px 80px; text-align:center; }
.somerj-erro__codigo{ font-family:var(--somerj-fonte-titulo); font-size:clamp(64px,12vw,120px);
  line-height:1; font-weight:700; color:var(--somerj-linha); margin:0; }
.somerj-erro__titulo{ font-family:var(--somerj-fonte-titulo); color:var(--somerj-ink);
  font-size:clamp(24px,3.2vw,34px); margin:8px 0 12px; }
.somerj-erro__texto{ color:var(--somerj-texto); margin:0 0 24px; }
.somerj-erro__subtitulo{ font-family:var(--somerj-fonte-titulo); font-size:16px;
  color:var(--somerj-muted); margin:36px 0 14px; font-weight:500; }

.somerj-erro__busca{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.somerj-erro__busca input[type=search]{ flex:1 1 300px; max-width:420px; padding:10px 14px;
  border:1px solid var(--somerj-linha); border-radius:var(--somerj-raio-btn); font-size:15px; }

.somerj-erro__atalhos{ list-style:none; margin:0; padding:0; display:flex;
  flex-wrap:wrap; gap:10px; justify-content:center; }
.somerj-erro__atalhos a{ display:inline-block; padding:8px 16px; border-radius:999px;
  border:1px solid var(--somerj-linha); background:#fff; color:var(--somerj-azul);
  text-decoration:none; font-size:14px; }
.somerj-erro__atalhos a:hover{ background:var(--somerj-bg); border-color:var(--somerj-azul); }
.somerj-erro__dica{ color:var(--somerj-muted); font-size:14px; margin-top:16px; }

.somerj-arquivo--busca .somerj-erro__busca{ justify-content:flex-start; margin-top:16px; }

/* =========================================================
   HOME — seções portadas de design/somerj-prototipo.html
   Marcação em inc/home.php, inc/topo.php e front-page.php.
   Os valores (tamanhos, pesos, degradês) vêm do protótipo.
   ========================================================= */

/* ---- A home escapa do container do Astra ----
   O filtro `astra_get_content_layout` (inc/home.php) já pede o layout
   esticado. Isto é a rede de segurança: se um dia o Astra renomear o filtro,
   as seções continuam empilhando em vez de virarem uma fileira horizontal.

   Escopo em `#content`: o header e o rodapé do Astra usam `.ast-container`
   com o MESMO nome de classe, e soltar a regra na página inteira esticava a
   barra do header até a borda da janela, jogando o botão "Associe-se" para
   fora do container. */
.home #content .ast-container{ display:block; max-width:none; padding-left:0; padding-right:0; }
.home #content.site-content{ padding:0; }

/* ---- Estrutura comum das seções ---- */
.somerj-sec{ padding:56px 0; }
.somerj-sec--suave{ background:var(--somerj-bg); }
.somerj-sec--navy{ background:var(--somerj-navy); color:#fff; }
.somerj-sec__interno{ max-width:var(--somerj-container); margin:0 auto; padding:0 20px; }

.somerj-sec__cabecalho{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:26px; }
.somerj-sec__titulo{ font-family:var(--somerj-fonte-titulo); font-size:clamp(24px,3vw,30px);
  color:var(--somerj-navy); margin:2px 0 0; line-height:1.15; }
.somerj-sec--navy .somerj-sec__titulo{ color:#fff; }
.somerj-sec__link{ font-family:var(--somerj-fonte-titulo); font-weight:600; font-size:14px;
  color:var(--somerj-azul); text-decoration:none; white-space:nowrap; }
.somerj-sec--navy .somerj-sec__link{ color:#8fe3d8; }
.somerj-kicker--claro{ color:#8fe3d8; }

.somerj-grade{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:640px){ .somerj-grade--3,.somerj-grade--4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .somerj-grade--3{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .somerj-grade--4{ grid-template-columns:repeat(4,1fr); } }

/* ---- Botões que só existem sobre fundo escuro ---- */
.somerj-btn--branco{ background:#fff; color:var(--somerj-azul); }
.somerj-btn--branco:hover{ background:var(--somerj-bg); color:var(--somerj-azul-escuro); }
.somerj-btn--contorno-claro{ border-color:#fff; color:#fff; background:transparent; }
.somerj-btn--contorno-claro:hover{ background:#fff; color:var(--somerj-azul); }
.somerj-btn--fantasma{ background:var(--somerj-bg); color:var(--somerj-ink); }
.somerj-btn--fantasma:hover{ background:var(--somerj-linha); color:var(--somerj-ink); }

/* ---- Topbar utilitária ---- */
.somerj-topbar{ background:var(--somerj-navy); color:#cdd9e6; font-size:12.5px; }
.somerj-topbar__interno{ max-width:var(--somerj-container); margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:38px; }
.somerj-topbar a{ color:#cdd9e6; text-decoration:none; }
.somerj-topbar a:hover{ color:#fff; }
.somerj-topbar__contato{ margin:0; display:flex; gap:16px; flex-wrap:wrap; }
.somerj-topbar__direita{ display:flex; align-items:center; gap:16px; }
.somerj-topbar__menu{ list-style:none; margin:0; padding:0; display:flex; gap:16px; }
.somerj-topbar__menu li{ margin:0; }
.somerj-topbar__redes{ list-style:none; margin:0; padding:0; display:flex; gap:12px; }
.somerj-topbar__redes a{ display:flex; align-items:center; }
/* O nome por extenso é a informação principal da topbar: a sigla SOMERJ não
   é autoexplicativa e esta é a única expansão visível acima da dobra nas
   páginas internas. Ganha um pouco de peso sem virar título. */
.somerj-topbar__nome{ color:#e8eef5; font-weight:500; }

/* No celular a topbar empilha em duas linhas: nome em cima, links e redes
   embaixo. Lado a lado, o nome era espremido numa coluna estreita e quebrava
   em quatro linhas.

   O telefone sai: repete-se no rodapé e na página de Contato, enquanto a
   explicação da sigla não existe em nenhum outro lugar acima da dobra. Nada
   mais é escondido — os links continuam, só mudam de linha. */
@media (max-width:760px){
  .somerj-topbar__tel{ display:none; }
  .somerj-topbar__interno{ flex-wrap:wrap; justify-content:center;
    gap:4px; padding-top:7px; padding-bottom:7px; }
  .somerj-topbar__contato{ flex:1 0 100%; justify-content:center; text-align:center; }
  .somerj-topbar__direita{ flex:1 0 100%; justify-content:center; }
  .somerj-topbar__nome{ font-size:12px; }
}

/* ---- Ações dentro do menu principal (busca + Associe-se) ---- */
.somerj-menu__busca,.somerj-menu__cta{ display:flex; align-items:center; }
.somerj-menu__cta{ margin-left:6px; }
.somerj-menu__cta .somerj-btn{ padding:10px 18px; }
.somerj-iconbtn{ width:40px; height:40px; border-radius:var(--somerj-raio-btn); border:0;
  background:var(--somerj-bg); color:var(--somerj-ink); display:flex; align-items:center;
  justify-content:center; cursor:pointer; transition:background .15s ease; }
.somerj-iconbtn:hover{ background:var(--somerj-linha); }
/* Sem largura explícita o SVG colapsa para 0 dentro do botão flex — os
   atributos width//height do próprio SVG não bastam nesse contexto. */
.somerj-iconbtn svg,.somerj-topbar__redes svg{ flex:0 0 auto; width:17px; height:17px; }
.somerj-topbar__redes svg{ width:15px; height:15px; }

.somerj-busca-topo{ background:var(--somerj-bg); border-bottom:1px solid var(--somerj-linha); }
.somerj-busca-topo__form{ max-width:var(--somerj-container); margin:0 auto; padding:14px 20px;
  display:flex; gap:8px; }
.somerj-busca-topo__form input[type=search]{ flex:1; padding:10px 14px; font-size:15px;
  border:1px solid var(--somerj-linha); border-radius:var(--somerj-raio-btn); background:#fff; }

/* ---- Hero ---- */
.somerj-hero{ position:relative; overflow:hidden; color:#fff;
  background-color:var(--somerj-navy); background-size:cover; background-position:center; }
.somerj-hero__interno{ position:relative; z-index:2; max-width:var(--somerj-container);
  margin:0 auto; padding:56px 20px; display:grid; gap:40px; grid-template-columns:1fr;
  align-items:center; }
@media (min-width:960px){ .somerj-hero__interno{ grid-template-columns:1.1fr .9fr; } }
/* Sem cartão lateral o texto não deve esticar por 1200px: vira ilegível. */
.somerj-hero--simples .somerj-hero__interno{ grid-template-columns:1fr; }
.somerj-hero--simples .somerj-hero__texto{ max-width:52ch; }

.somerj-hero__anel{ position:absolute; border-radius:50%; z-index:1;
  border:2px solid rgba(255,255,255,.12); }
.somerj-hero__anel--a{ width:460px; height:460px; right:-120px; top:-120px; }
.somerj-hero__anel--b{ width:280px; height:280px; right:60px; bottom:-120px;
  border-color:rgba(255,255,255,.09); }

.somerj-hero h1{ color:#fff; font-size:clamp(31px,4.4vw,44px); line-height:1.08; margin:14px 0; }
.somerj-hero__texto p{ font-size:17px; color:#fff; opacity:.92; max-width:48ch; margin:0 0 24px; }
.somerj-hero__botoes{ display:flex; gap:12px; flex-wrap:wrap; }

.somerj-hero__cartao{ background:#fff; color:var(--somerj-ink); border-radius:14px;
  box-shadow:var(--somerj-sombra); overflow:hidden; }
.somerj-hero__cartao-topo{ background:linear-gradient(120deg,var(--somerj-azul),var(--somerj-teal));
  min-height:96px; display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:var(--somerj-fonte-titulo); font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; font-size:14px; padding:16px; text-align:center; }
.somerj-hero__cartao-corpo{ padding:20px; }
.somerj-hero__cartao-corpo h2{ font-size:19px; color:var(--somerj-navy); margin:8px 0 6px; }
.somerj-hero__cartao-corpo p{ color:var(--somerj-muted); font-size:14px; margin:0 0 14px; }

/* ---- Faixa de credenciais ---- */
.somerj-credenciais{ background:var(--somerj-bg); border-bottom:1px solid var(--somerj-linha); }
.somerj-credenciais__interno{ max-width:var(--somerj-container); margin:0 auto; padding:14px 20px;
  display:flex; gap:30px; justify-content:center; flex-wrap:wrap;
  font-family:var(--somerj-fonte-titulo); font-weight:500; font-size:13.5px; color:var(--somerj-texto); }
.somerj-credenciais b{ color:var(--somerj-navy); }

/* ---- Cartão de evento ---- */
.somerj-evcard{ display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--somerj-linha); border-radius:var(--somerj-raio);
  box-shadow:var(--somerj-sombra-sm); overflow:hidden; }
.somerj-evcard__topo{ display:flex; gap:12px; align-items:flex-start; padding:16px 16px 0; }
.somerj-evcard__titulo{ font-family:var(--somerj-fonte-titulo); font-size:15px; margin:0;
  line-height:1.3; }
.somerj-evcard__titulo a{ color:var(--somerj-ink); text-decoration:none; }
.somerj-evcard__titulo a:hover{ color:var(--somerj-azul); }
.somerj-evcard__pe{ margin-top:auto; padding:12px 16px 16px; font-size:12.5px;
  color:var(--somerj-muted); }
.somerj-evcard__pe div{ margin-top:4px; }

/* Cartão com imagem: o protótipo não previa foto no evento, mas quem cadastra
   coloca imagem destacada e espera vê-la. A foto entra no topo e o selo de
   data sobe para cima dela — assim o cartão ilustrado e o sem foto continuam
   com a mesma altura de texto, e a grade não desalinha. */
.somerj-evcard__imagem{ display:block; position:relative; }
.somerj-evcard__imagem img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.somerj-evcard--ilustrado .somerj-evcard__topo{ padding-top:14px; }
.somerj-date--sobre{ position:absolute; left:12px; bottom:12px;
  box-shadow:0 2px 8px rgba(15,27,45,.28); }

/* ---- Notícias ---- */
.somerj-noticias{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:960px){ .somerj-noticias{ grid-template-columns:1.4fr 1fr; } }

.somerj-manchete{ background:#fff; border:1px solid var(--somerj-linha);
  border-radius:var(--somerj-raio); overflow:hidden; box-shadow:var(--somerj-sombra-sm); }
.somerj-manchete__imagem{ display:block; }
.somerj-manchete__imagem img{ width:100%; height:auto; display:block; aspect-ratio:16/9;
  object-fit:cover; }
.somerj-manchete__vazia{ display:block; aspect-ratio:16/9;
  background:linear-gradient(120deg,#0a4f86,var(--somerj-teal)); }
.somerj-manchete__corpo{ padding:20px; }
.somerj-manchete__corpo h3{ font-family:var(--somerj-fonte-titulo); font-size:22px; margin:8px 0;
  line-height:1.25; }
.somerj-manchete__corpo h3 a{ color:var(--somerj-ink); text-decoration:none; }
.somerj-manchete__corpo h3 a:hover{ color:var(--somerj-azul); }
.somerj-manchete__corpo p{ color:var(--somerj-texto); font-size:14.5px; margin:0; }
.somerj-manchete__meta{ color:var(--somerj-muted); font-size:12.5px; margin-top:10px; }

/* Banner em cima, texto embaixo. Lado a lado, a miniatura precisava ser tao
   estreita que o banner 16:9 aparecia recortado; empilhado, ele cabe inteiro.
   Duas colunas a partir de 600px para a coluna nao ficar mais alta que a
   manchete ao lado — em uma coluna so, quatro itens dobrariam a altura dela. */
.somerj-noticias__lista{ display:grid; gap:14px; grid-template-columns:1fr;
  align-content:start; }
@media (min-width:600px){ .somerj-noticias__lista{ grid-template-columns:1fr 1fr; } }
.somerj-nitem{ display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--somerj-linha); border-radius:var(--somerj-raio);
  overflow:hidden; }
.somerj-nitem__thumb{ display:block; }
.somerj-nitem__thumb img,.somerj-nitem__vazia{ width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover; }
.somerj-nitem__vazia{ background:linear-gradient(120deg,#0a4f86,var(--somerj-verde)); }
.somerj-nitem__corpo{ padding:12px; }
.somerj-nitem h4{ font-family:var(--somerj-fonte-titulo); font-size:14px; margin:0 0 4px;
  line-height:1.35; }
.somerj-nitem h4 a{ color:var(--somerj-ink); text-decoration:none; }
.somerj-nitem h4 a:hover{ color:var(--somerj-azul); }
.somerj-nitem__meta{ font-size:11.5px; color:var(--somerj-muted); }

/* ---- Abas de editoria ----
   Sem JS todos os painéis ficam abertos, cada um com seu título. O JS marca
   .somerj-abas--ativas e só então os títulos somem e a troca passa a valer. */
.somerj-abas{ margin-top:30px; }
.somerj-abas__botoes{ display:none; gap:8px; border-bottom:2px solid var(--somerj-linha);
  margin-bottom:18px; flex-wrap:wrap; }
.somerj-abas--ativas .somerj-abas__botoes{ display:flex; }
.somerj-abas__botoes button{ background:transparent; border:0; border-bottom:3px solid transparent;
  margin-bottom:-2px; padding:10px 4px; font-family:var(--somerj-fonte-titulo); font-weight:600;
  font-size:14px; color:var(--somerj-muted); cursor:pointer; }
.somerj-abas__botoes button.is-ativo{ color:var(--somerj-azul); border-color:var(--somerj-azul); }
.somerj-abas__titulo{ font-family:var(--somerj-fonte-titulo); font-size:16px;
  color:var(--somerj-ink); margin:24px 0 12px; }
.somerj-abas--ativas .somerj-abas__titulo{ display:none; }
.somerj-abas--ativas .somerj-abas__painel{ display:none; }
.somerj-abas--ativas .somerj-abas__painel.is-ativo{ display:block; }
.somerj-abas .somerj-card__thumb{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  background:linear-gradient(120deg,#0a4f86,var(--somerj-teal)); }
.somerj-abas .somerj-card__title a{ color:var(--somerj-ink); text-decoration:none; }
.somerj-abas .somerj-card__title a:hover{ color:var(--somerj-azul); }

/* ---- Revista ---- */
.somerj-revista{ display:grid; gap:34px; grid-template-columns:1fr; align-items:center; }
@media (min-width:760px){ .somerj-revista{ grid-template-columns:300px 1fr; } }
.somerj-revista__capa img{ width:100%; height:auto; border-radius:12px;
  box-shadow:var(--somerj-sombra); display:block; }
.somerj-revista__texto{ margin:10px 0 18px; max-width:52ch; }
.somerj-revista__botoes{ display:flex; gap:8px; flex-wrap:wrap; }
.somerj-revista__anteriores{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-top:20px; }
.somerj-minicapa{ position:relative; display:block; border-radius:8px; overflow:hidden;
  box-shadow:var(--somerj-sombra-sm); text-decoration:none;
  background:linear-gradient(160deg,#0a4f86,var(--somerj-teal)); aspect-ratio:520/736; }
.somerj-minicapa img{ width:100%; height:100%; object-fit:cover; display:block; }
.somerj-minicapa__rotulo{ position:absolute; left:0; right:0; bottom:0; padding:10px 12px;
  font-family:var(--somerj-fonte-titulo); font-weight:600; font-size:12px; color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0)); }

/* ---- Números da rede ---- */
.somerj-numeros{ display:flex; gap:24px; flex-wrap:wrap; margin:0 0 22px; }
.somerj-numero b{ display:block; font-family:var(--somerj-fonte-titulo); font-size:30px;
  line-height:1; color:var(--somerj-azul); }
.somerj-numero span{ font-size:12.5px; color:var(--somerj-muted); }

/* ---- Serviços ---- */
.somerj-servico{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--somerj-raio); padding:22px; }
.somerj-servico__icone{ width:48px; height:48px; border-radius:12px; background:var(--somerj-teal);
  display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:12px; }
.somerj-servico h3{ font-family:var(--somerj-fonte-titulo); color:#fff; font-size:16px;
  margin:0 0 6px; }
.somerj-servico p{ color:#c4d2e2; font-size:13px; margin:0; }

/* ---- Faixa de chamada final ---- */
.somerj-faixa-cta{ background:linear-gradient(120deg,var(--somerj-verde),var(--somerj-teal));
  color:#fff; text-align:center; padding:52px 20px; }
.somerj-faixa-cta h2{ font-family:var(--somerj-fonte-titulo); color:#fff;
  font-size:clamp(24px,3.2vw,32px); margin:10px 0; }
.somerj-faixa-cta p{ opacity:.95; margin:0 0 22px; font-size:16px; }

/* A faixa antiga (bloco HTML no conteúdo da página) não definia a cor do texto
   do botão: ficava verde sobre verde, ilegível. Vale enquanto o bloco existir
   em alguma página. */
.somerj-cta .somerj-btn{ background:var(--somerj-cta); color:#fff; }

/* O mapa e a lista lateral ficam com a mesma altura; sem isto a lista era
   cortada no meio de um item, sem indicar que rolava. */
.somerj-mapa__lista{ max-height:none; }
@media (min-width:900px){
  .somerj-mapa__lista{ max-height:520px; }
  /* Esmaecer o fim da lista sinaliza que há mais itens abaixo — sem isso ela
     era cortada no meio de um nome, parecendo defeito. O prefixo -webkit- não
     é opcional: sem ele o Chrome ignora a máscara e o corte seco volta. */
  .somerj-mapa__lista{
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);
  }
}