/* ============================================================
   ABEn-DF  ·  estilo do site

   PALETA: as tres primeiras cores sao medidas nos pixels da logo, nao
   escolhidas no olho. Contando so os pixels opacos de logo-aben-df.png:
   #2c296c = 56,2% (o bloco azul), #cbd5de = 25,7% (a lampada) e
   #f7c413 = 16,9% (a faixa). Nao mexer nessas tres sem trocar a logo.

   Trocadas em 08/09/2026, quando a diretoria mandou a logo em alta: sao as
   cores da marca, e nao mais a aproximacao que a versao antiga e fina tinha.
   A logo e a cor tem que andar juntas: o bloco azul dela fica EM CIMA do
   cabecalho azul, entao qualquer diferenca vira um retangulo visivel.

   Todo o resto e derivado delas e conferido no contraste. As duas que viram
   TEXTO (--amarelo-texto e --cinza-fraco) foram calculadas contra a faixa
   clara, nao contra o branco: e o fundo mais dificil dos dois em que elas
   aparecem, entao passando nele passam no branco tambem. Os 16 pares de
   cor do site passam no AA. Se mudar uma destas, recalcular, nao chutar.
   ============================================================ */

:root{
  --azul:        #2c296c;   /* MARCA: bloco azul da logo */
  --azul-escuro: #211e50;   /* derivado: topo, rodape */
  --azul-claro:  #5a588c;   /* derivado: gradiente, hover */
  --amarelo:     #f7c413;   /* MARCA: faixa da logo */
  --amarelo-esc: #d0a510;   /* hover do botao. NAO serve de texto sobre claro */
  --amarelo-texto:#896d0b;  /* amarelo legivel sobre fundo claro (4.94 no branco, 4.56 na faixa) */
  --marca-cinza: #cbd5de;   /* MARCA: a lampada da logo */
  --tinta:       #1f2333;   /* texto principal (15.60 no branco) */
  --cinza:       #575768;   /* texto de apoio (7.07 no branco) */
  /* terceiro nivel de cinza. E o mais claro que ainda passa
     (4.90 no branco, 4.51 na faixa clara): mais claro que isto vira texto
     que a pessoa de vista cansada nao le. */
  --cinza-fraco: #6f6f84;
  --cinza-claro: #f6f5f8;   /* fundo de faixa: puxado do azul da marca */
  --branco:      #ffffff;
  --borda:       #eaeaf0;   /* fio quase invisivel: quem separa e o espaco */
  --raio:        14px;
  --larg:        1120px;
  /* Sombra grande, suave e com espalhamento NEGATIVO: levanta o bloco sem
     escurecer a volta. Sombra curta e opaca e o que faz um card parecer
     pesado e datado. */
  --sombra:      0 18px 40px -26px rgba(26,25,65,.30);
  --sombra-alta: 0 26px 60px -28px rgba(26,25,65,.38);
  --ar:          clamp(3.5rem, 6vw, 5.5rem);  /* respiro vertical das secoes */
  /* ALTURA REAL DO CABECALHO: barra de contato + nav + borda amarela.
     MEDIDA, nao estimada: 152 px em 09/09/2026, conferida de 1020 a 1920 px de
     largura (nao muda entre elas, porque quem manda na altura e a logo).
     So vale de 901 px para cima; abaixo disso a hero tem altura fixa propria.

     MEXEU NA LOGO OU NO SUBTITULO DA MARCA? Remeca este numero. Foi por nao
     remedir que a hero passou a deixar uma linha branca embaixo: a logo caiu de
     86 para 76 px e o cabecalho encolheu 2 px, enquanto o desconto aqui
     continuava o antigo. */
  --cabecalho-alt: 152px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

/* O `display` de uma classe (ex.: .cookie-banner{display:flex}) vence o [hidden]
   do navegador, e o elemento nasce visivel mesmo escondido no HTML. Sem isto,
   o banner de cookies nao some ao aceitar. Vale para todo elemento com [hidden]. */
[hidden]{ display:none!important; }

/* ---------- Acessibilidade ---------- */
.pular-link{
  position:absolute; left:8px; top:-48px; z-index:100;
  background:var(--amarelo); color:var(--azul-escuro); font-weight:700;
  padding:.6rem 1rem; border-radius:0 0 8px 8px; transition:top .15s;
}
.pular-link:focus{ top:0; text-decoration:none; }
:focus-visible{ outline:3px solid var(--amarelo); outline-offset:2px; border-radius:3px; }
.cabecalho :focus-visible,.hero :focus-visible{ outline-color:#fff; }
main:focus{ outline:none; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .pcard:hover,.noticia-card:hover,.galeria-pub a:hover img{ transform:none; }
}
body{
  margin:0;
  font-family:"Source Sans 3","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:17px;                  /* Source Sans desenha um pouco menor que a Segoe */
  -webkit-font-smoothing:antialiased;
  color:var(--tinta);
  background:var(--branco);
  line-height:1.68;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--azul); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Titulos em serifa: e o que da peso institucional a uma entidade de 1960.
   O texto corrido segue na sans, que le melhor em tela. */
h1,h2,h3,.hero__titulo,.secao__titulo{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-weight:700; letter-spacing:-.01em; text-wrap:balance;
}
/* etiqueta, rotulo e numero continuam na sans, onde a serifa atrapalha */
.card-item__tag,.fato__n,.tag,.anos__item,.membro__cargo,.presidente__periodo,
.area__cargo,.docs__meta,.hero__selo{
  font-family:"Source Sans 3",system-ui,sans-serif;
}

/* ---------- Barra de contato (topo) ---------- */
.topo{ background:var(--azul-escuro); color:#cac9de; font-size:.8rem; }
.topo__interno{
  max-width:var(--larg); margin:0 auto; padding:.4rem 1rem;
  display:flex; align-items:center; justify-content:flex-end; gap:1rem; flex-wrap:wrap;
}
.topo__item{ color:#cac9de; }
.topo__item:hover{ color:var(--branco); }
.topo__sep{ width:1px; height:14px; background:#46448b; }
.topo__rede{ color:#cac9de; display:inline-flex; }
.topo__rede:hover{ color:var(--amarelo); }

/* ---------- Cabecalho ---------- */
.cabecalho{
  background:var(--azul);
  color:var(--branco);
  border-bottom:4px solid var(--amarelo);
  position:sticky; top:0; z-index:50;
}
.cabecalho__interno{
  max-width:var(--larg); margin:0 auto; padding:.7rem 1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.marca{ display:flex; align-items:center; gap:.6rem; color:var(--branco); flex:0 0 auto; }
.marca:hover{ text-decoration:none; }
/* 76px. Eram 86, e a razao dos 86 morreu junto com a logo antiga: naquela arte
   a palavra ABEn-DF da tarja era cinza-claro sobre amarelo (1,02:1) e quem
   desenhava a letra era so um contorno azul fino, que sumia ao reduzir. Na arte
   nova a letra e azul CHEIO sobre o amarelo, 7,84:1, e continua legivel menor.
   Os 10 px que sobraram foram para o menu, que ganhou a aba Justica Social e
   passou a nao caber na largura do site. */
/* translateY(-2px): o PNG tem uns 6 px quase transparentes no topo (a ponta
   da chama e as estrelas), entao a CAIXA da imagem fica centralizada mas o
   DESENHO visivel pende para baixo, com a tarja amarela colada na borda
   amarela do cabecalho. Medido: 17 px livres em cima e 12 embaixo. Subir 2 px
   deixa 15 e 14. */
.marca__logo{ width:76px; height:auto; transform:translateY(-2px); }
.marca__texto{ display:flex; flex-direction:column; line-height:1.15; }
.marca__texto strong{ font-size:1.35rem; letter-spacing:.01em; }
/* 29ch, e nao 32. E o SUBTITULO que decide a largura do bloco da marca, e cada
   caractere a mais empurra o menu inteiro para a direita. MEDIDO: em 32ch o
   menu ja volta a vazar 6 px para fora da largura do site.
   Nesta medida o texto cai em TRES linhas. Duas ficaria melhor, mas pede uns
   36ch, e ai o menu vaza 29 px. Entre subtitulo de duas linhas e o botao
   Associe-se cortado, fica o de tres. */
.marca__texto small{ font-size:.72rem; color:#cdcde0; white-space:nowrap; line-height:1.3; }

/* menu: uma linha só, sem quebrar.
   MEDIDO, e nao escolhido no olho: com a aba "Justiça Social" o menu passou a
   pedir 1.313 px e o conteudo do cabecalho e limitado a 1.120 (--larg). O
   excesso nao quebrava linha, VAZAVA para a direita, e o botao Associe-se saia
   cortado a partir de mais ou menos 1.500 px de janela.
   Alargar o cabecalho resolveria, mas jogaria a logo para fora da coluna do
   site, e o alinhamento dela com o grid foi decisao de reuniao. Entao quem
   cede e o menu: fonte, respiro interno e distancia entre itens. */
.menu{ display:flex; align-items:center; gap:.08rem; }
.menu a,.menu__abre{
  color:#efeff5; font-size:.92rem; font-weight:600; padding:.62rem .42rem; border-radius:8px;
  white-space:nowrap; line-height:1.2;
}
.menu a:hover,.menu__abre:hover{ color:var(--branco); background:rgba(255,255,255,.09); text-decoration:none; }
.menu a[aria-disabled="true"]{ color:#9a99c0; cursor:not-allowed; }
.menu__cta{
  background:var(--amarelo); color:var(--azul-escuro)!important;
  padding:.6rem 1rem!important; border-radius:8px; font-weight:700; font-size:.95rem; margin-left:.45rem;
}
.menu__cta:hover{ background:var(--amarelo-esc)!important; text-decoration:none; }
/* quem esta logado no portal; era um style inline com a cor escrita a mao */
.menu__quem{ color:#cdcde0; font-size:.9rem; padding:0 .3rem; }

/* submenu institucional */
.menu__grupo{ position:relative; }
.menu__abre{
  background:none; border:0; font:inherit; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem;
}
.menu__seta{
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; opacity:.8;
}
.menu__sub{
  position:absolute; top:calc(100% + .45rem); left:0; min-width:230px;
  background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio);
  box-shadow:var(--sombra); padding:.4rem; display:none; flex-direction:column; gap:1px;
}
.menu__sub::before{ content:""; position:absolute; top:-.45rem; left:0; right:0; height:.45rem; }
.menu__sub a{
  color:var(--tinta); font-size:.95rem; padding:.6rem .8rem; border-radius:6px; white-space:normal;
}
.menu__sub a:hover{ background:var(--cinza-claro); color:var(--azul); }
/* Terceiro nivel: sub-aba de sub-aba, recuada no MESMO painel (ver o
   cabecalho). O fio comeca embaixo da primeira letra da mae, e e ele que
   amarra os itens a ela; so o recuo pareceria erro de alinhamento.
   Seletor com duas classes de proposito: a regra `.menu a` do bloco de 1160px
   vem depois e, com a mesma forca, apagaria o recuo nessa faixa de tela. */
.menu__netas{
  display:flex; flex-direction:column; gap:1px;
  margin:0 0 .15rem .8rem; border-left:2px solid var(--marca-cinza);
}
.menu__sub .menu__netas a{ font-size:.9rem; padding:.5rem .8rem .5rem .9rem; }
.menu__grupo:hover .menu__sub,
.menu__grupo:focus-within .menu__sub,
.menu__abre[aria-expanded="true"] + .menu__sub{ display:flex; }

/* Peças que existem SÓ na gaveta do celular. Sem esta linha o cabeçalho da
   gaveta (o nome e o X) vaza para o meio da barra de menu do desktop. Regra de
   bolso: componente novo dentro de um elemento que muda de forma por media
   query nasce escondido, e a media query mostra. */
.menu__veu,
.menu__topo{ display:none; }

/* botao hamburguer (so no mobile) */
.menu__botao{
  display:none; align-items:center; gap:.5rem; background:none; border:1px solid rgba(255,255,255,.35);
  color:var(--branco); font:inherit; font-size:.85rem; font-weight:600; cursor:pointer;
  padding:.45rem .7rem; border-radius:8px;
}
.menu__barras,.menu__barras::before,.menu__barras::after{
  display:block; width:17px; height:2px; background:currentColor; border-radius:2px;
}
.menu__barras{ position:relative; }
.menu__barras::before,.menu__barras::after{ content:""; position:absolute; left:0; }
.menu__barras::before{ top:-5px; } .menu__barras::after{ top:5px; }

@media (max-width:1160px){
  .marca__texto small{ display:none; }
  .menu a,.menu__abre{ font-size:.88rem; padding:.55rem .42rem; }
  .menu__cta{ padding:.55rem .85rem!important; font-size:.88rem; }
}
/* ---------- Menu do celular: GAVETA lateral ----------

   Antes o menu abria empurrando a pagina para baixo, e com o grupo
   institucional sempre aberto virava uma lista de quinze itens que ocupava
   duas telas. Agora desliza da direita, por cima, com veu escuro atras.

   QUATRO ARMADILHAS EVITADAS DE PROPOSITO, cada uma ja custou uma rodada:

   1. position:fixed so se ancora na janela se NENHUM ancestral tiver
      transform, filter, backdrop-filter, perspective ou will-change. Conferi
      .topo, .cabecalho, .cabecalho__interno, body e html: nenhum tem. Se um
      dia alguem puser vidro no cabecalho, a gaveta vira uma caixinha presa no
      topo. Por isso NAO ha backdrop-filter no veu.

   2. .cabecalho e sticky com z-index:50, o que cria contexto de empilhamento:
      tudo que esta dentro fica limitado a ele. O banner de cookie e fixed com
      z-index:60 e ficaria POR CIMA da gaveta. Por isso o body ganha a classe
      menu-aberto e o cabecalho sobe para 300 enquanto a gaveta esta aberta.

   3. align-items troca de eixo ao virar coluna. Aqui e stretch, e nao center:
      centralizado, cada link teria a largura do proprio texto e a area de
      toque encolheria para o tamanho da palavra.

   4. a gaveta usa visibility e nao display para poder animar. display:none
      nao anima, e translateX sozinho deixaria os links tabulaveis fora da
      tela: visibility:hidden tira da ordem de tabulacao e do leitor de tela.
*/
@media (max-width:1000px){
  .menu__botao{ display:inline-flex; }

  .menu{
    position:fixed; top:0; right:0; bottom:0; left:auto;
    width:min(86vw, 340px); max-width:100%;
    z-index:2;
    display:flex; flex-direction:column; align-items:stretch; gap:.1rem;
    padding:0 0 1.4rem; margin:0; border:0;
    background:var(--azul-escuro);
    box-shadow:-14px 0 34px rgba(0,0,0,.34);
    /* overflow-x hidden e cinto: se um filho voltar a ser mais largo que a
       gaveta, ela nao vira um rolador horizontal que corta o texto */
    overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
    visibility:hidden; transform:translateX(100%);
    transition:transform .24s ease, visibility 0s linear .24s;
  }
  .menu[data-aberto="1"]{
    visibility:visible; transform:translateX(0);
    transition:transform .24s ease, visibility 0s;
  }

  /* Veu. Nasce em display:block com opacidade zero, e NAO com o atributo
     hidden: alternar hidden exigiria esperar um quadro antes de animar, e
     requestAnimationFrame nao dispara em iframe fora da tela, entao a
     gaveta abriria sem transicao justamente na hora de medir. */
  .menu__veu{
    display:block;
    position:fixed; inset:0; z-index:1;
    background:rgba(12,11,40,.55);
    opacity:0; visibility:hidden;
    transition:opacity .24s ease, visibility 0s linear .24s;
  }
  .menu__veu[data-aberto="1"]{
    opacity:1; visibility:visible;
    transition:opacity .24s ease, visibility 0s;
  }

  /* topo da gaveta */
  .menu__topo{
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:.9rem 1rem; margin-bottom:.4rem;
    border-bottom:1px solid rgba(255,255,255,.16);
    position:sticky; top:0; background:var(--azul-escuro); z-index:1;
  }
  .menu__titulo{ font-weight:700; color:var(--branco); font-size:1rem; letter-spacing:.02em; }
  .menu__fecha{
    background:none; border:1px solid rgba(255,255,255,.3); border-radius:8px;
    color:var(--branco); font:inherit; font-size:1.5rem; line-height:1;
    width:40px; height:40px; cursor:pointer; display:grid; place-items:center;
    flex:0 0 auto;
  }
  .menu__fecha:hover{ background:rgba(255,255,255,.12); }

  /* Itens: area de toque de ponta a ponta.

     SEM width:100%. O menu e um flex em coluna com align-items:stretch, entao
     os itens ja preenchem a largura sozinhos, E respeitando a propria margem.
     Com width:100% o Associe-se, que tem margem lateral de 1rem, ficava com a
     largura CHEIA da gaveta mais 32px de margem: 367px de conteudo numa gaveta
     de 335. A gaveta passava a rolar de lado por dentro e cortava a primeira
     letra de cada item. */
  .menu a{
    padding:.85rem 1rem; font-size:1rem; text-align:left;
    border-radius:0;
  }
  .menu > a:hover{ background:rgba(255,255,255,.09); }

  /* Grupo institucional: a setinha volta, como no desktop.
     Antes o botão sumia e os oito itens ficavam sempre abertos, o que fazia a
     gaveta ter quinze linhas. Agora abre no toque. */
  .menu__grupo{ position:static; }
  .menu__abre{
    display:flex; width:100%; justify-content:space-between; align-items:center;
    padding:.85rem 1rem; font-size:1rem; text-align:left; border-radius:0;
  }
  .menu__abre:hover{ background:rgba(255,255,255,.09); }
  .menu__seta{ transition:transform .18s ease; }
  .menu__abre[aria-expanded="true"] .menu__seta{ transform:rotate(180deg); }

  .menu__sub{
    position:static; background:none; border:0; box-shadow:none;
    padding:0; min-width:0; display:none;
  }
  /* No desktop o submenu abre no hover e no foco. No celular isso atrapalha:
     o toque conta como hover e o menu abre sozinho, e o foco dentro da gaveta
     manteria tudo aberto. Aqui só o aria-expanded manda. */
  .menu__grupo:hover .menu__sub,
  .menu__grupo:focus-within .menu__sub{ display:none; }
  .menu__abre[aria-expanded="true"] + .menu__sub{ display:flex; }

  .menu__sub a{ color:#eaeaf2; font-size:.95rem; padding-left:1.9rem; }
  .menu__sub a:hover{ background:rgba(255,255,255,.09); color:var(--branco); }
  /* terceiro nivel na gaveta: o fio fica embaixo da primeira letra da mae,
     que no celular comeca em 1.9rem */
  .menu__netas{ margin:0 0 .2rem 1.9rem; border-left-color:rgba(255,255,255,.22); }
  .menu__sub .menu__netas a{ font-size:.92rem; padding:.72rem 1rem .72rem 1rem; }

  /* o CTA fecha a lista, com respiro */
  .menu__cta{
    margin:1rem 1rem 0; text-align:center;
    padding:.85rem 1.2rem!important;
  }

  /* trava a pagina de fundo e tira o cabecalho do contexto que o prendia */
  body.menu-aberto{ overflow:hidden; }
  body.menu-aberto .cabecalho{ z-index:300; }

  /* PORTAL DO ASSOCIADO: cabecalho sem gaveta.

     O portal tem dois ou tres itens, e nao os quinze do site, entao nao ha o
     que guardar numa gaveta. Mas ele reaproveitava a classe .menu, e por isso
     herdava tudo o que esta acima: position:fixed, visibility:hidden e
     translateX(100%). So que a gaveta abre com o botao de partials/cabecalho
     e com o assets/js/site.js, e o layout do portal nao tem nenhum dos dois.
     Resultado no celular: o cabecalho do portal mostrava so o logo, e o
     associado ficava sem o proprio nome e SEM O BOTAO SAIR, sem nada na tela
     que explicasse a ausencia.

     Aqui a barra volta ao fluxo normal e quebra em duas linhas quando
     precisa. Vem depois das regras da gaveta de proposito: mesma
     especificidade, entao quem vem por ultimo vence, e a ordem e o que
     desfaz cada propriedade. */
  .menu--simples{
    position:static; width:auto; max-width:none;
    flex-direction:row; flex-wrap:wrap; justify-content:flex-end;
    align-items:center; gap:.3rem;
    padding:0; background:none; box-shadow:none;
    visibility:visible; transform:none;
    overflow:visible; transition:none;
  }
  .menu--simples a{ padding:.5rem .7rem; font-size:.9rem; border-radius:8px; text-align:center; }
  .menu--simples .menu__cta{ margin:0; padding:.5rem .9rem!important; }

  /* A barra desce para a segunda linha em vez de sair pela direita.

     A marca do portal (logo de 86px mais "Area do Associado") ja come quase
     toda a largura de um celular, e o .cabecalho__interno e um flex de uma
     linha so. Sem quebrar, os itens continuavam existindo mas fora da tela, e
     o SAIR era justamente o ultimo: some primeiro. */
  .cabecalho__interno--portal{ flex-wrap:wrap; gap:.45rem 1rem; }
  .cabecalho__interno--portal .menu--simples{ flex:1 1 100%; }

  /* O nome sai do cabecalho no celular: ele ja aparece logo abaixo, no
     "Ola, Fulano" da propria pagina, e ha nome de 40 caracteres na base. */
  .menu--simples .menu__quem{ display:none; }
}

@media (max-width:1000px) and (prefers-reduced-motion:reduce){
  .menu,.menu__veu{ transition:none; }
}

/* ---------- Hero ----------
   Ocupa a tela inteira menos o cabecalho, para nao sobrar faixa branca embaixo.
   A foto vem por variavel (--hero-foto) sorteada no PHP a cada visita.
   O veu e horizontal e vai a transparente: a esquerda garante contraste do
   texto e a direita mostra Brasilia. */
.hero{
  position:relative; color:var(--branco); overflow:hidden; isolation:isolate;
  /* Fecha a primeira tela: desconta o cabecalho (ver --cabecalho-alt).
     `svh` e a altura visivel real no celular, sem contar a barra do navegador
     que some ao rolar.

     OS 2px A MENOS SAO DE PROPOSITO, e o lado do erro importa:
       descontar de MAIS  -> a hero fica curta e sobra uma linha branca, que e
                             exatamente o que a pessoa ve;
       descontar de MENOS -> a hero fica 2 px mais alta que o vao, e esse
                             excesso morre abaixo da dobra, invisivel.
     Entre um erro que aparece e um que nao aparece, erra-se para o que nao
     aparece. Serve tambem de folga para diferenca de arredondamento de fonte
     entre maquinas. */
  min-height:calc(100svh - var(--cabecalho-alt) + 2px);
  display:grid; background:var(--azul);
}
/* Cada slide ocupa a mesma celula da grade e so o ativo aparece.
   Sem JS, o primeiro fica visivel e os outros somem: nada quebra. */
.hero__slide{
  grid-area:1/1; position:relative; z-index:1;
  display:flex; align-items:stretch;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .6s ease;
}
.hero__slide--ativo{ opacity:1; visibility:visible; pointer-events:auto; z-index:2; }

/* Zoom lento saindo (Ken Burns): a foto entra um pouco ampliada e volta ao
   normal em 14s. Da vida ao fundo sem distrair de quem le o texto.
   O zoom vai no ::before, e nao no proprio slide, para nao ampliar o texto. */
.hero__slide{ background:none; }
.hero__slide::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(96deg,
      rgba(16,15,65,.97) 0%,
      rgba(22,21,80,.93) 28%,
      rgba(30,28,106,.72) 56%,
      rgba(34,32,117,.24) 78%,
      rgba(34,32,117,.14) 100%),
    var(--hero-foto) center 45% / cover no-repeat,
    var(--azul);
  transform:scale(1);
}
.hero__slide--ativo::before{ animation:hero-zoom 14s ease-out both; }
@keyframes hero-zoom{ from{ transform:scale(1.09) } to{ transform:scale(1) } }

@media (prefers-reduced-motion:reduce){
  .hero__slide{ transition:none; }
  .hero__slide--ativo::before{ animation:none; }
}

.hero__interno{
  position:relative; z-index:2; width:100%; max-width:var(--larg); margin:0 auto;
  padding:3rem 1rem 0; display:flex; align-items:center;
}
.hero__texto{ max-width:60ch; padding-bottom:6rem; }
.hero__selo{
  display:inline-block; background:rgba(255,221,0,.16); color:var(--amarelo);
  border:1px solid rgba(255,221,0,.45); padding:.35rem 1rem; border-radius:999px;
  font-size:.78rem; font-weight:700; margin:0 0 1.4rem;
}
.hero__titulo{
  font-size:clamp(2.1rem,4.6vw,3.6rem); margin:0 0 1.2rem; line-height:1.06;
  font-weight:700; text-shadow:0 2px 26px rgba(8,9,35,.55); max-width:18ch;
}
/* a segunda linha do nome entra menor, como subordinada */
.hero__titulo span{
  display:block; font-size:.62em; font-weight:600; color:#f0f0f6; margin-top:.35rem;
  letter-spacing:.005em;
}
.hero__sub{ font-size:1.12rem; max-width:44ch; color:#f3f3f8; margin:0 0 2.4rem; }
.hero__acoes{ display:flex; gap:.9rem; flex-wrap:wrap; }
/* A hero fecha em CORTE RETO, por decisao de identidade visual deste site.
   Ja teve um fecho curvo aqui e saiu. Nao reintroduzir. */

/* silhueta de Brasilia: elemento da identidade deles, recolorida em branco */
.hero__skyline{
  position:absolute; left:0; right:0; bottom:0; height:170px; z-index:1; opacity:.13;
  background:url("../img/skyline-brasilia.png") right bottom / auto 100% no-repeat;
  pointer-events:none;
}

/* controles do carrossel: so as bolinhas, centralizadas.
   Sem seta e sem play: a troca e manual, entao nao ha o que pausar. */
.hero__controles{
  grid-area:1/1; z-index:4; align-self:end; justify-self:center;
  display:flex; align-items:center; gap:.6rem; margin-bottom:1.8rem;
  background:rgba(12,14,44,.5); border:1px solid rgba(255,255,255,.16);
  padding:.6rem .95rem; border-radius:999px; backdrop-filter:blur(4px);
}
.hero__ponto{
  width:11px; height:11px; padding:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.4); border:0;
  transition:background .2s ease, width .2s ease;
}
.hero__ponto:hover{ background:rgba(255,255,255,.8); }
.hero__ponto--ativo{ background:var(--amarelo); width:28px; border-radius:999px; }

/* ---------- Faixa de numeros ----------
   Clara de proposito. A pagina ja tem o cabecalho, a hero e a chamada final em
   azul cheio; um quarto bloco saturado pesava a rolagem inteira. Aqui o numero
   carrega a cor e o resto respira. */
.fatos{ background:var(--branco); }
.fatos__interno{
  max-width:var(--larg); margin:0 auto; padding:var(--ar) 1rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
  border-top:1px solid var(--borda); border-bottom:1px solid var(--borda);
}
.fato{ display:flex; flex-direction:column; gap:.35rem; }
.fato__n{
  font-size:3.2rem; font-weight:700; color:var(--azul); line-height:1;
  font-variant-numeric:tabular-nums; margin:0;
}
.fato__t{ margin:0; font-size:.9rem; color:var(--cinza); line-height:1.45; max-width:22ch; }
@media (max-width:900px){
  .hero{ min-height:520px; }
  .hero__interno{ padding:2.5rem 1rem 0; align-items:flex-start; }
  .hero__texto{ padding-bottom:7rem; }
  .hero__skyline{ height:110px; opacity:.1; }
  .hero__controles{ margin-bottom:1.2rem; }
  .fatos__interno{ grid-template-columns:repeat(2,1fr); gap:1.3rem; }
}
@media (max-width:560px){
  .fatos__interno{ grid-template-columns:1fr; }
  .fato__n{ font-size:2rem; }
}
/* topo de secao com link a direita */
.secao__topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.secao__topo .secao__titulo{ margin-bottom:.3rem; }
.secao__topo .secao__sub{ margin:0; }
.secao__link{ font-weight:700; font-size:.9rem; white-space:nowrap; padding-top:.3rem; }

/* ---------- Blocos que levam a algum lugar ----------
   Sublinhado e setinha nao bastam: um titulo sublinhado no meio do branco
   continua lendo como texto. O que faz o olho entender "isto se clica" e a
   SUPERFICIE: uma area propria, com limite visivel, que reage ao toque.

   Nao e o cartao generico de template: canto quase reto (4px), sem faixa
   colorida no topo, sem sombra parada. A sombra so aparece no hover, junto
   com o leve levantar e a seta andando. */
.cards{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); }
.cards--1{ grid-template-columns:minmax(0,520px); }

.card-item,
.indice a{
  position:relative; display:flex; flex-direction:column; gap:.4rem;
  background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio);
  padding:1.5rem 3.4rem 1.6rem 1.5rem; color:var(--tinta); box-shadow:var(--sombra);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card-item:hover,.card-item:focus-visible,
.indice a:hover,.indice a:focus-visible{
  text-decoration:none; border-color:#cdcde0;
  box-shadow:var(--sombra-alta);
  transform:translateY(-3px);
}
/* a seta mora num circulo: vira alvo visivel, nao um caractere solto */
.card-item::after,
.indice a::after{
  content:"→"; position:absolute; right:1.1rem; top:1.35rem;
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; font-size:.95rem;
  background:var(--cinza-claro); color:var(--azul);
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.card-item:hover::after,
.indice a:hover::after{ background:var(--amarelo); color:var(--azul-escuro); transform:translateX(3px); }

.card-item__tag{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:var(--amarelo-texto);
}
.card-item h3,
.indice strong{
  color:var(--azul); font-size:1.12rem; margin:0; line-height:1.3;
  font-family:"Source Serif 4",Georgia,serif; font-weight:700;
}
.card-item__meta,
.indice span{ color:var(--cinza-fraco); font-size:.92rem; line-height:1.55; margin:0; }
/* A capa sangra ate a borda do card. As margens negativas tem que bater EXATO
   com o padding, senao sobra um fio branco de um lado so. */
.card-item__capa{
  display:block; position:relative; overflow:hidden;
  margin:-1.5rem -3.4rem 1rem -1.5rem;
  border-radius:calc(var(--raio) - 1px) calc(var(--raio) - 1px) 0 0;
  background:var(--cinza-claro);
}
.card-item__capa img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.card-item--capa:hover .card-item__capa img{ transform:scale(1.05); }

/* etiqueta da data sobre a foto */
.card-item__chip{
  position:absolute; left:.8rem; bottom:.8rem;
  background:rgba(12,14,44,.72); backdrop-filter:blur(4px); color:#fff;
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:.72rem; font-weight:700; letter-spacing:.04em;
  padding:.28rem .6rem; border-radius:999px;
}
/* Com foto, a seta desce para o rodape: no topo ela tapava a imagem. Sem a
   coluna reservada em cima, o padding da direita volta ao normal e a margem
   negativa da capa tem que acompanhar, senao a foto vaza 1,9rem para fora. */
.card-item--capa{ padding:1.5rem 1.5rem 4rem; }
.card-item--capa .card-item__capa{ margin:-1.5rem -1.5rem 1rem; }
.card-item--capa::after{ top:auto; bottom:1.3rem; }

/* o indice usa os mesmos blocos, so muda a grade */
.indice{
  list-style:none; margin:1.6rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.1rem;
}
.indice li{ display:flex; }
.indice a{ flex:1; }

@media (prefers-reduced-motion:reduce){
  .card-item:hover,.indice a:hover{ transform:none; }
}

/* cartaz do evento na pagina do curso */
.curso-cartaz{ margin:0 0 1.6rem; border:1px solid var(--borda); background:var(--cinza-claro); }
.curso-cartaz img{ width:100%; height:auto; display:block; }

/* O que a ABEn-DF faz: texto e foto real de atuacao lado a lado */
.secao__eyebrow{
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--amarelo-texto); margin:0 0 .5rem;
}
/* Duas colunas (texto | galeria) e uma terceira faixa embaixo, dos pilares,
   que atravessa a largura toda. Sem o grid-column abaixo, os pilares caem
   dentro da coluna da esquerda e as 4 colunas espremem em metade da largura. */
.atuacao{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem 3rem; align-items:start; }
.atuacao__lead{ color:var(--cinza); font-size:1.02rem; margin:.9rem 0 0; max-width:60ch; }
/* Pilares numerados. O tracinho amarelo a esquerda nao dava hierarquia
   nenhuma: o numero ancora a leitura e o link leva a pagina que prova
   cada afirmacao. */
/* Pilares em LINHA, fechando a secao. Em coluna estreita eles empilhavam e
   competiam com a galeria ao lado; na horizontal viram um resumo do que a
   associacao faz, lado a lado. */
/* Os quatro pilares em cards de verdade: superficie branca sobre a faixa clara,
   fio, sombra e um filete amarelo que so aparece no hover. Como texto corrido em
   quatro colunas eles liam como uma tabela de rodape. */
.pilares{
  grid-column:1 / -1;                 /* atravessa as duas colunas da secao */
  list-style:none; counter-reset:pilar; margin:1.6rem 0 0; padding:2.4rem 0 0;
  border-top:1px solid var(--borda);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem;
}
.pilares li{
  position:relative; counter-increment:pilar;
  background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio);
  padding:1.5rem 1.3rem 1.4rem; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* filete amarelo no topo, escondido ate o hover: da o "acordar" do card sem
   deixar barra colorida parada em todos eles */
.pilares li::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--amarelo); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.pilares li:hover{
  transform:translateY(-3px); box-shadow:var(--sombra); border-color:#dbdae8;
}
.pilares li:hover::after{ transform:scaleX(1); }
/* numero num quadrado, nao solto: vira marcador e nao numero perdido */
.pilares li::before{
  content:counter(pilar,decimal-leading-zero);
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin-bottom:.9rem;
  background:#f0f0f6; border-radius:9px;
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:.85rem; font-weight:700; color:var(--azul);
  font-variant-numeric:tabular-nums;
}
.pilares h3{ color:var(--azul); font-size:1.06rem; margin:0 0 .35rem; line-height:1.3; }
.pilares p{ color:var(--cinza); font-size:.92rem; line-height:1.55; margin:0; }
.pilares a{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.7rem;
  font-size:.87rem; font-weight:700;
}
.pilares a::after{ content:"→"; transition:transform .18s ease; }
.pilares li:hover a::after{ transform:translateX(3px); }
.pilares a:hover{ text-decoration:underline; }
@media (max-width:900px){ .pilares{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pilares{ grid-template-columns:1fr; } }

/* so para leitor de tela */
.sr{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Galeria 2x2: as quatro fotos no mesmo formato 4:3 e a legenda sobre a base.
   Duas fotos soltas em coluna ficavam desalinhadas com o texto ao lado. */
.atuacao__galeria{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
/* Número ÍMPAR de fotos (a equipe escolhe pelo painel desde 09/10/2026): num
   quadro de duas colunas sobraria uma célula vazia no canto. A primeira passa a
   ocupar a linha inteira, em formato mais largo, e o quadro fecha certo.
   A regra da imagem repete `object-fit` porque `aspect-ratio` muda aqui. */
.atuacao__galeria--impar figure:first-child{ grid-column:1 / -1; }
.atuacao__galeria--impar figure:first-child img{ aspect-ratio:16/9; object-fit:cover; }
.atuacao__galeria figure{ margin:0; position:relative; overflow:hidden; background:var(--cinza-claro); }
.atuacao__galeria img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .45s ease; }
.atuacao__galeria figure:hover img{ transform:scale(1.05); }
/* botao que amplia a foto: ocupa a figura inteira e mostra a lupa no hover */
.amplia{
  display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
  position:relative; line-height:0;
}
.amplia__lupa{
  position:absolute; top:.6rem; right:.6rem; width:34px; height:34px; border-radius:50%;
  background:rgba(14,15,45,.72); opacity:0; transition:opacity .2s ease;
  display:grid; place-items:center;
}
.amplia__lupa::before{
  content:""; width:13px; height:13px; border:2px solid #fff; border-radius:50%;
  box-shadow:6px 6px 0 -4px #fff; transform:translate(-2px,-2px) rotate(45deg);
}
.amplia:hover .amplia__lupa,.amplia:focus-visible .amplia__lupa{ opacity:1; }
.atuacao__galeria figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.8rem .85rem .65rem;
  color:#fff; font-size:.8rem; font-weight:600; line-height:1.3;
  background:linear-gradient(to top, rgba(14,15,45,.92) 0%, rgba(14,15,45,.7) 50%, transparent 100%);
}
@media (prefers-reduced-motion:reduce){ .atuacao__galeria figure:hover img{ transform:none; } }
@media (max-width:900px){ .atuacao{ grid-template-columns:1fr; gap:2rem; } }
@media (max-width:420px){ .atuacao__galeria{ grid-template-columns:1fr; } }

/* Entrada suave ao rolar.
   A regra depende da classe `js` no <html>, que o proprio JS poe. Sem isso, um
   erro de JS deixaria a pagina inteira em opacity:0, ou seja, invisivel: o
   conteudo tem que nascer visivel e a animacao ser so um acrescimo.
   Quem pede menos movimento no sistema nao recebe animacao nenhuma. */
@media (prefers-reduced-motion:no-preference){
  .js [data-revela]{ opacity:0; transform:translateY(14px); }
  .js [data-revela].revelado{ opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease; }
}

/* ---------- Lightbox ----------
   Abre a foto no centro da tela. Fecha no Esc, no clique fora e no botao.
   Nasce com [hidden]; o JS so tira o atributo. */
.lightbox{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(10,11,35,.92); padding:2rem 1rem;
  animation:lb-entra .2s ease;
}
@keyframes lb-entra{ from{ opacity:0 } to{ opacity:1 } }
.lightbox__fig{ margin:0; max-width:min(1000px,92vw); }
.lightbox__fig img{
  width:100%; height:auto; max-height:78vh; object-fit:contain; display:block;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox__legenda{ color:#e3e3ee; font-size:.9rem; margin-top:.9rem; text-align:center; }
.lightbox__fechar{
  position:absolute; top:1rem; right:1rem; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff;
  font-size:1.5rem; line-height:1; cursor:pointer; display:grid; place-items:center;
}
.lightbox__fechar:hover{ background:var(--amarelo); color:var(--azul-escuro); border-color:var(--amarelo); }
@media (prefers-reduced-motion:reduce){ .lightbox{ animation:none; } }

/* chamada final */
/* ---------- Chamada do meio (Premio CEPEn) ----------
   Bloco escuro com foto, para quebrar a sequencia de faixa branca / faixa clara
   no meio da pagina. A trama de pontos e feita com radial-gradient: nao carrega
   imagem nenhuma e nao pesa. */
.destaque{
  background:var(--azul-escuro); color:var(--branco); position:relative; overflow:hidden;
}
.destaque::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px) 0 0/22px 22px;
  mask-image:linear-gradient(105deg,#000 0%,transparent 62%);
  -webkit-mask-image:linear-gradient(105deg,#000 0%,transparent 62%);
}
/* filete amarelo da logo atravessando o topo */
.destaque::after{
  content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--amarelo);
}
.destaque__interno{
  position:relative; z-index:1;
  max-width:var(--larg); margin:0 auto; padding:var(--ar) 1rem;
  display:grid; grid-template-columns:1fr .85fr; gap:3rem; align-items:center;
}
.destaque__olho{
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--amarelo); margin:0 0 .6rem;
}
.destaque h2{ margin:0 0 .7rem; font-size:clamp(1.9rem,3.4vw,2.5rem); color:var(--branco); }
.destaque__lead{ margin:0 0 1.6rem; color:#dadae8; font-size:1.05rem; max-width:48ch; }
.destaque__acoes{ display:flex; gap:.8rem; flex-wrap:wrap; }
.destaque__foto{ margin:0; border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra-alta); }
.destaque__foto img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
@media (max-width:860px){
  .destaque__interno{ grid-template-columns:1fr; gap:2rem; }
  .destaque__foto{ order:-1; }
}

/* ---------- Fecho: a missao ----------
   Foto a esquerda, missao a direita, com aspas grandes de enfeite. */
.missao{ background:var(--cinza-claro); }
.missao__interno{
  max-width:var(--larg); margin:0 auto; padding:var(--ar) 1rem;
  display:grid; grid-template-columns:.8fr 1fr; gap:3rem; align-items:center;
}
.missao__foto{ margin:0; border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra); }
.missao__foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.missao__txt{ margin:0; position:relative; }
/* aspa decorativa: fica atras do texto e é escondida do leitor de tela */
.missao__txt::before{
  content:"\201C"; position:absolute; left:-.35em; top:-.42em; z-index:0;
  font-family:"Source Serif 4",Georgia,serif; font-size:9rem; line-height:1;
  color:var(--azul); opacity:.09; pointer-events:none;
}
.missao__olho{
  position:relative; z-index:1;
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--amarelo-texto); margin:0 0 .8rem;
}
.missao__frase{
  position:relative; z-index:1; margin:0 0 1.2rem;
  font-family:"Source Serif 4",Georgia,serif; font-weight:600;
  font-size:clamp(1.25rem,2.3vw,1.6rem); line-height:1.45; color:var(--azul);
  text-wrap:balance;
}
.missao__fonte{
  position:relative; z-index:1;
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:.88rem; color:var(--cinza-fraco);
  padding-top:.9rem; border-top:2px solid var(--amarelo); display:inline-block;
}
@media (max-width:860px){
  .missao__interno{ grid-template-columns:1fr; gap:2rem; }
}

.chamada{ background:linear-gradient(120deg,var(--azul),var(--azul-claro)); color:var(--branco); }
.chamada__interno{
  max-width:var(--larg); margin:0 auto; padding:2.6rem 1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap;
}
.chamada h2{ margin:0 0 .3rem; font-size:1.5rem; }
.chamada p{ margin:0; color:#e3e3ee; max-width:56ch; font-size:.95rem; }

/* ---------- Botoes ---------- */
.botao{
  display:inline-block; padding:.7rem 1.4rem; border-radius:var(--raio);
  font-weight:700; font-size:1rem; cursor:pointer; border:2px solid transparent;
}
.botao:hover{ text-decoration:none; }
.botao--amarelo{ background:var(--amarelo); color:var(--azul-escuro); }
.botao--amarelo:hover{ background:var(--amarelo-esc); }
.botao--vazado{ border-color:#ffffff88; color:var(--branco); }
.botao--vazado:hover{ border-color:#fff; background:#ffffff14; }
.botao[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }

/* ---------- Aviso de desenvolvimento ---------- */
.aviso-dev{ background:var(--cinza-claro); border-bottom:1px solid var(--borda); }
.aviso-dev__interno{
  max-width:var(--larg); margin:0 auto; padding:1rem;
  display:flex; align-items:center; gap:.8rem; color:var(--cinza);
}
.aviso-dev__tag{
  background:var(--amarelo); color:var(--azul-escuro); font-weight:700;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  padding:.25rem .6rem; border-radius:999px; white-space:nowrap;
}
.aviso-dev__interno p{ margin:0; font-size:.95rem; }

/* ---------- Rodape ---------- */
/* Fundo no AZUL EXATO DA LOGO (#2c296c), e nao mais no azul-escuro.
   A logo entrou no rodape em 14/09/2026, e o retangulo azul dela aparecia como
   um bloco mais claro sobre o #211e50: o mesmo "relevo" que o cliente ja tinha
   reclamado no cabecalho. Com o fundo igual ao da arte, o retangulo some e sobra
   a lampada. So a faixa de baixo (.rodape__base) segue escura, para o rodape
   continuar tendo divisa.
   Contraste reconferido no fundo novo: texto 8,66, links 7,84, CNPJ 4,69. */
.rodape{ background:var(--azul); color:#d3d3e4; margin-top:auto; }
.rodape__logo{ width:64px; height:auto; display:block; margin:0 0 .8rem; }
.rodape__interno{
  max-width:var(--larg); margin:0 auto; padding:2.5rem 1rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.rodape__col strong{
  color:var(--branco); display:block; margin-bottom:.7rem; font-size:.95rem;
  font-family:"Source Serif 4",Georgia,serif;
}
.rodape__col p{ margin:0 0 .9rem; font-size:.9rem; line-height:1.55; }
.rodape__col p:last-child{ margin-bottom:0; }

/* redes como botao com icone, ao lado do contato.
   Antes eram dois links de texto soltos numa coluna propria, o que deixava o
   rodape desequilibrado e as redes com cara de sobra. */
.rodape__redes{ display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }
.rodape__redes a{
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid rgba(255,255,255,.28); border-radius:999px;
  padding:.4rem .85rem .4rem .7rem; color:#e3e3ee; font-size:.85rem; font-weight:600;
}
.rodape__redes a:hover{
  text-decoration:none; color:var(--azul-escuro);
  background:var(--amarelo); border-color:var(--amarelo);
}
.rodape__cnpj{ color:#9a99c0; font-size:.82rem; }
.rodape a{ color:var(--amarelo); }
.rodape__base{
  background:var(--azul-escuro);
  border-top:1px solid #ffffff1a; text-align:center; padding:1rem;
  font-size:.82rem; color:#9a99c0;
  display:flex; gap:1rem; justify-content:center; align-items:center; flex-wrap:wrap;
}
.rodape__base a{ color:#9a99c0; }
.rodape__base a:hover{ color:var(--amarelo); }

/* Banner de cookies */
/* Encostado a ESQUERDA, nao centralizado: centralizado ele cobria as bolinhas
   do carrossel, que sao o controle principal da hero, e ficava por cima do
   rodape no fim da pagina. */
.cookie-banner{
  position:fixed; left:1rem; right:auto; bottom:1rem; z-index:60;
  max-width:min(520px, calc(100vw - 2rem));
  background:var(--azul-escuro); color:#eaeaf2;
  border:1px solid var(--azul-claro); border-radius:var(--raio);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  padding:1rem 1.2rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
}
.cookie-banner__txt{ margin:0; font-size:.9rem; flex:1; min-width:220px; }
.cookie-banner__txt a{ color:var(--amarelo); }
.cookie-banner__acoes{ display:flex; gap:.6rem; }
.botao--claro-c{ background:transparent; color:#eaeaf2; border:1px solid #ffffff44; }
.botao--claro-c:hover{ border-color:#fff; }

/* ---------- Pagina de erro ---------- */
.erro{
  min-height:70vh; display:flex; align-items:center; justify-content:center;
  padding:2rem; background:var(--cinza-claro);
}
.erro__caixa{
  background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio);
  box-shadow:var(--sombra); padding:3rem 2.5rem; text-align:center; max-width:460px;
}
.erro__codigo{ font-size:4rem; font-weight:800; color:var(--azul); margin:0; line-height:1; }
.erro__msg{ color:var(--cinza); margin:.5rem 0 1.5rem; }

/* ---------- Página de conteúdo (CMS) ---------- */
.pagina-hero{ background:linear-gradient(135deg,var(--azul) 0%,var(--azul-claro) 100%); color:var(--branco); }
.pagina-hero__interno{ max-width:var(--larg); margin:0 auto; padding:2.6rem 1rem; }
.pagina-hero h1{ margin:0; font-size:clamp(1.6rem,3.2vw,2.4rem); }
.pagina-hero p{ margin:.5rem 0 0; color:#e1e0ec; font-size:1.05rem; }
.pagina{ background:var(--branco); }
.pagina__interno{ max-width:820px; margin:0 auto; padding:2.5rem 1rem 3.5rem; font-size:1.05rem; }
.pagina__interno h2{ color:var(--azul); margin:2rem 0 .6rem; font-size:1.4rem; }
.pagina__interno h3{ color:var(--azul-escuro); margin:1.4rem 0 .4rem; font-size:1.15rem; }
.pagina__interno p{ margin:0 0 1rem; }
.pagina__interno ul,.pagina__interno ol{ margin:0 0 1rem; padding-left:1.4rem; }
.pagina__interno li{ margin:.3rem 0; }
.pagina__interno a{ color:var(--azul); text-decoration:underline; }
.pagina-hero__tags{ margin:0 0 .5rem!important; display:flex; gap:.4rem; flex-wrap:wrap; }

/* areas de trabalho (departamentos) */
.areas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; margin-top:1.6rem; }
.area{
  background:var(--branco); border:1px solid var(--borda); border-top:3px solid var(--azul);
  border-radius:var(--raio); padding:1.3rem 1.4rem; display:flex; flex-direction:column; gap:.5rem;
}
.area h2{ color:var(--azul); font-size:1.06rem; margin:0; }
.area__resumo{ color:var(--cinza); font-size:.9rem; margin:0; flex:1; }
.area__resp{ margin:.4rem 0 0; padding-top:.7rem; border-top:1px solid var(--borda); display:flex; flex-direction:column; }
.area__cargo{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--amarelo-texto); }
.area__nome{ font-size:.92rem; color:var(--tinta); font-weight:600; }
.texto-cms{ max-width:70ch; }
/* texto da associação seguido de lista (página SBEn): sem isto o título da
   lista cola no último parágrafo */
.texto-cms + .secao__titulo{ margin-top:2.5rem; }

/* perguntas frequentes (abre e fecha sem JS, com <details>) */
.faq{ background:var(--branco); border:1px solid var(--borda); border-radius:8px; margin-bottom:.6rem; }
.faq > summary{
  cursor:pointer; padding:.85rem 1.1rem; font-weight:600; color:var(--azul); font-size:.96rem;
  list-style:none; display:flex; align-items:center; gap:.6rem;
}
.faq > summary::-webkit-details-marker{ display:none; }
.faq > summary::before{
  content:""; flex:0 0 auto; width:0; height:0;
  border-left:6px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent;
  transition:transform .15s ease;
}
.faq[open] > summary::before{ transform:rotate(90deg); }
.faq > summary:hover{ background:var(--cinza-claro); border-radius:8px; }
.faq__resp{ padding:0 1.1rem 1rem 2.3rem; color:var(--cinza); font-size:.93rem; }
.faq__resp p{ margin:0; }
@media (prefers-reduced-motion:reduce){ .faq > summary::before{ transition:none; } }

/* lista de documentos (transparencia) */
.docs{ list-style:none; margin:0 0 1.4rem; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.docs a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  background:var(--branco); border:1px solid var(--borda); border-left:3px solid var(--amarelo);
  border-radius:8px; padding:.75rem 1rem; color:var(--tinta);
}
.docs a:hover{ border-left-color:var(--azul); background:var(--panel-2,#f7f7fa); text-decoration:none; }
.docs__nome{ font-size:.94rem; }
.docs__meta{ font-size:.78rem; color:var(--cinza); white-space:nowrap; }
.docs__ano{
  color:var(--azul); font-size:1rem; margin:1.4rem 0 .6rem;
  font-variant-numeric:tabular-nums; border-bottom:1px solid var(--borda); padding-bottom:.3rem;
}

/* navegacao por ano do historico de cursos */
.anos{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.8rem; }
.anos__item{
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--branco); border:1px solid var(--borda); border-radius:999px;
  padding:.4rem .85rem; font-size:.9rem; font-weight:600; color:var(--azul);
  font-variant-numeric:tabular-nums;
}
.anos__item:hover{ border-color:var(--azul); text-decoration:none; }
.anos__item--ativo{ background:var(--azul); border-color:var(--azul); color:var(--branco); }
.anos__n{
  background:var(--cinza-claro); color:var(--cinza); border-radius:999px;
  padding:0 .4rem; font-size:.75rem; font-weight:700; min-width:1.5em; text-align:center;
}
.anos__item--ativo .anos__n{ background:rgba(255,255,255,.22); color:var(--branco); }
.anos__titulo{ color:var(--azul); font-size:1.05rem; margin:0 0 1rem; }

/* ---------- Visor de presidentes ----------
   A imagem de cada gestao e uma PLACA: retrato a esquerda e a diretoria inteira
   escrita a direita, dentro de um JPG de 600x446. Em grade de 250px o texto da
   placa nao se le, ou seja, o conteudo some. Aqui e uma por vez, no tamanho
   nativo. Sem JS, .visor--ativo nao entra e todas ficam visiveis em lista. */
.visor{ margin-top:1.4rem; }
.visor__lista{ list-style:none; margin:0; padding:0; display:grid; gap:1.3rem; }
/* ALTURA CONSTANTE ao trocar de gestao.
   Antes cada cartao era o unico no fluxo (display:none nos outros), entao a
   pagina encolhia e crescia a cada seta: a diretoria vai de 3 a 14 cargos.
   Agora TODOS ocupam a mesma celula da grade e a celula fica com a altura do
   maior, que nao muda. O escondido usa visibility e nao display, porque
   display:none sai do fluxo e a altura voltaria a variar.

   visibility:hidden tambem tira do leitor de tela e da ordem de tabulacao,
   entao o cartao escondido nao vira armadilha de teclado.

   Nao custa download: a faixa de miniaturas ja pede os mesmos 14 arquivos
   (344 KB no total), entao a imagem grande vem do cache do navegador. */
.visor--ativo .visor__lista{ display:grid; gap:0; }
.visor--ativo .visor__item{ grid-area:1 / 1; visibility:hidden; }
.visor--ativo .visor__item--ativo{ visibility:visible; }

.visor__barra{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:1rem; flex-wrap:wrap;
}
.visor__seta{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--branco); border:1px solid var(--borda); border-radius:999px;
  color:var(--azul); font:inherit; font-size:.92rem; font-weight:700;
  padding:.5rem 1rem; cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.visor__seta:hover{ border-color:#c9c9dd; box-shadow:var(--sombra); }
.visor__conta{
  margin:0; font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:.85rem; color:var(--cinza-fraco); font-variant-numeric:tabular-nums;
}

/* faixa de miniaturas: rola na horizontal em vez de empurrar a pagina */
.visor__miniaturas{
  list-style:none; margin:1.2rem 0 0; padding:.2rem .2rem .8rem;
  display:flex; gap:.5rem; overflow-x:auto; scroll-behavior:smooth;
}
/* A miniatura era 4/3 DEITADA e os retratos sao todos em pe (446px de altura,
   largura de 241 a 300, ou seja 0,54 a 0,67). Com object-fit:cover a caixa
   deitada cortava o topo e a base: decapitava as pessoas. Agora a caixa e 2/3,
   a proporcao da maioria, e o encaixe e "contain", que NAO corta nada: os
   quatro retratos mais estreitos ganham uma folga branca dos lados, invisivel
   porque o fundo do botao ja e branco. */
.visor__miniaturas button{
  position:relative; display:block; width:80px; padding:0; cursor:pointer;
  background:var(--branco); border:1px solid var(--borda); border-radius:8px;
  overflow:hidden; opacity:.55; transition:opacity .18s ease, border-color .18s ease;
}
.visor__miniaturas button:hover{ opacity:1; }
.visor__miniaturas button[aria-current="true"]{ opacity:1; border-color:var(--azul); }
.visor__miniaturas img{
  width:100%; aspect-ratio:2/3; object-fit:contain; object-position:center top;
  background:var(--branco); display:block;
}
.visor__mini-ano{
  display:block; padding:.25rem 0; text-align:center;
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:.72rem; font-weight:700; color:var(--azul); font-variant-numeric:tabular-nums;
}
.visor__miniaturas button[aria-current="true"] .visor__mini-ano{
  background:var(--azul); color:var(--branco);
}

/* ---------- Uma gestao: retrato ao lado da diretoria em TEXTO ----------
   Antes o retrato e a lista vinham achatados no mesmo JPG. Agora sao duas
   colunas: a foto e imagem, a diretoria e HTML. Em tela estreita vira uma
   coluna so, com a foto em cima. */
.gestao{
  /* 340px e nao 260: com a diretoria em duas colunas o lado do texto ganhou
     folga e a foto ficava pequena demais ao lado dela. Sobram ~655px para os
     cargos, o que ainda comporta as duas colunas de 230px. */
  display:grid; grid-template-columns:340px 1fr; gap:2.2rem; align-items:start;
  background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio);
  box-shadow:var(--sombra); padding:1.8rem; margin:0;
}
/* A caixa da foto e RESERVADA antes da imagem chegar.
   Sem isso o cartao muda de altura quando o retrato carrega, e a conta que
   posiciona a pagina no cartao (site.js) sai errada, porque foi feita com o
   layout de antes. 300/446 e a proporcao da maioria; os quatro mais estreitos
   ganham folga lateral com contain, invisivel no fundo branco, do mesmo jeito
   que nas miniaturas. */
.gestao__foto img{
  width:100%; display:block; border-radius:10px;
  aspect-ratio:300/446; object-fit:contain; object-position:center top;
}
.gestao__lupa{
  display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
  position:relative;
}
.gestao__sem-foto{
  margin:0; aspect-ratio:3/4; display:grid; place-items:center; border-radius:10px;
  background:linear-gradient(160deg,var(--cinza-claro),#e2e2ed);
  color:var(--azul); font-weight:700; font-variant-numeric:tabular-nums;
  font-family:"Source Sans 3",system-ui,sans-serif;
}
.gestao__periodo{
  margin:0 0 .2rem; font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--amarelo-texto); font-variant-numeric:tabular-nums;
}
.gestao__nome{ margin:0 0 .3rem; color:var(--azul); font-size:1.5rem; line-height:1.2; }
.gestao__obs{ margin:0 0 .9rem; font-size:.9rem; color:var(--cinza); }

/* GRADE, e nao pilha. Com 14 cargos empilhados o cartao passa de duas telas e
   o visor vira rolagem sem fim. Em coluna a mesma diretoria ocupa um terco da
   altura. auto-fill com minmax porque o numero de
   cargos varia de 3 a 14 entre as gestoes. */
.gestao__diretoria{
  margin:1.2rem 0 0; padding-top:1.2rem; border-top:1px solid var(--borda);
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:.9rem 1.6rem;
}
/* o par cargo+nome anda junto: sem o wrapper a grade quebraria o rotulo de uma
   coluna com o nome de outra */
.gestao__cargo{ min-width:0; }
.gestao__diretoria dt{ margin-top:0; }
.gestao__diretoria dt{
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--cinza-fraco); margin-bottom:.1rem;
}
.gestao__diretoria dd{ margin:0; color:var(--tinta); font-size:.97rem; line-height:1.4; overflow-wrap:anywhere; }
.gestao__sem-dados{
  margin:1.2rem 0 0; padding-top:1.2rem; border-top:1px solid var(--borda);
  color:var(--cinza-fraco); font-size:.92rem;
}
.visor__mini-vazia{
  /* mesma proporcao das miniaturas com foto, senao a faixa fica com
     caixas de duas alturas e parece defeito */
  display:block; width:100%; aspect-ratio:2/3;
  background:linear-gradient(160deg,var(--cinza-claro),#e2e2ed);
}
@media (max-width:720px){
  .gestao{ grid-template-columns:1fr; gap:1.4rem; padding:1.3rem; }
  /* margin auto: com max-width e sem isto a foto encosta na esquerda e sobra
     um vao a direita */
  .gestao__foto{ max-width:280px; margin-left:auto; margin-right:auto; }
}

/* galeria de fotos dentro do conteudo do CMS */
.galeria{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem; margin:1.4rem 0 0; }
.galeria__item{ margin:0; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); overflow:hidden; }
.galeria__item img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--cinza-claro); }
.galeria__item figcaption{ padding:.6rem .75rem; font-size:.8rem; color:var(--cinza); line-height:1.4; }

/* figura solta dentro do conteudo do CMS */
/* `figure` SEM classe: o navegador dá a ele `margin:1em 40px`, e a foto nasce
   recuada só de um lado. Vale para qualquer conteúdo escrito no painel, que é
   onde o botão Imagem insere (ele usa .figura, mas HTML colado de fora não). */
.pagina__interno figure,.texto-cms figure{ margin:0 0 1rem; }
.figura{ margin:0 0 1rem; }
.figura img{ max-width:100%; height:auto; }
/* imagem larga no meio do texto respira acima e abaixo */
.pagina__interno .figura:not(.figura--direita),.texto-cms .figura:not(.figura--direita){ margin:1.4rem 0; }
.figura--direita{ float:right; margin:.2rem 0 1rem 1.6rem; max-width:180px; }
.figura figcaption{ font-size:.8rem; color:var(--cinza); margin-top:.4rem; }
@media (max-width:560px){ .figura--direita{ float:none; margin:0 auto 1.2rem; } }

.pagina__interno blockquote{ border-left:4px solid var(--amarelo); margin:1.8rem 0; padding:.4rem 0 .4rem 1.2rem; color:var(--cinza); font-style:italic; }
.pagina__interno blockquote p{ margin:0; }
.pagina__interno blockquote footer{ margin-top:.5rem; font-style:normal; font-weight:700; font-size:.85rem; color:var(--azul); }
.em-breve{ text-align:center; padding:3rem 1rem; }
.em-breve__tag{ display:inline-block; background:var(--amarelo); color:var(--azul-escuro); font-weight:700; padding:.3rem .9rem; border-radius:999px; text-transform:uppercase; font-size:.75rem; letter-spacing:.05em; }
.em-breve p{ color:var(--cinza); margin-top:1rem; }

/* ---------- Diretoria ---------- */
.lista-cargos{ list-style:none; padding:0; margin:0 0 1.5rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:.8rem; }
.lista-cargos li{ background:var(--cinza-claro); border:1px solid var(--borda); border-left:3px solid var(--amarelo); border-radius:8px; padding:.8rem 1rem; display:flex; flex-direction:column; }
.lista-cargos__nome{ font-weight:700; color:var(--azul-escuro); }
.lista-cargos__cargo{ font-size:.88rem; color:var(--cinza); }

/* ---------- Linha do tempo de presidentes ---------- */
.linha-tempo{ list-style:none; padding:0; margin:0; border-left:2px solid var(--borda); }
.linha-tempo__item{ position:relative; padding:.6rem 0 .6rem 1.4rem; }
.linha-tempo__item::before{ content:''; position:absolute; left:-7px; top:1rem; width:12px; height:12px; border-radius:50%; background:var(--amarelo); border:2px solid var(--branco); box-shadow:0 0 0 1px var(--borda); }
.linha-tempo__periodo{ display:inline-block; min-width:110px; font-weight:700; color:var(--azul); font-size:.9rem; }
.linha-tempo__nome{ color:var(--tinta); }
.linha-tempo__nome small{ color:var(--cinza); }

/* ---------- Publicações ---------- */
.pub-lista{ list-style:none; padding:0; margin:0 0 1rem; display:flex; flex-direction:column; gap:.5rem; }
.pub-lista a{ display:flex; align-items:center; gap:.9rem; background:#fff; border:1px solid var(--borda); border-radius:10px; padding:.8rem 1rem; color:var(--tinta); }
.pub-lista a:hover{ text-decoration:none; border-color:var(--azul-claro); box-shadow:var(--sombra); }
.pub-lista__ic{ font-size:1.4rem; flex:0 0 auto; }
.pub-lista__txt{ flex:1; display:flex; flex-direction:column; }
.pub-lista__txt strong{ color:var(--azul); }
.pub-lista__txt small{ color:var(--cinza); font-size:.85rem; }
.pub-lista__dl{ flex:0 0 auto; font-size:.78rem; font-weight:700; color:var(--amarelo-texto); text-transform:uppercase; letter-spacing:.03em; }

/* ---------- Fale Conosco ---------- */
.contato{ max-width:var(--larg); margin:0 auto; padding:2.5rem 1rem 3.5rem; display:grid; grid-template-columns:300px 1fr; gap:2rem; align-items:start; }
.contato__info{ background:var(--cinza-claro); border:1px solid var(--borda); border-radius:var(--raio); padding:1.5rem; }
.contato__info h2{ color:var(--azul); font-size:1rem; margin:1.2rem 0 .3rem; }
.contato__info h2:first-child{ margin-top:0; }
.contato__info p{ margin:0; font-size:.92rem; color:var(--tinta); }
.contato__form{ background:#fff; border:1px solid var(--borda); border-radius:var(--raio); padding:1.8rem; }
.contato__form label{ display:flex; flex-direction:column; font-size:.85rem; color:var(--cinza); gap:.3rem; margin-bottom:1rem; }
.contato__form input,.contato__form textarea{ padding:.6rem; border:1px solid var(--borda); border-radius:8px; font-size:1rem; font-family:inherit; }
.contato__linha{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.contato__ok{ text-align:center; padding:2rem; }
.contato__ok h2{ color:#1f9d55; }

/* ---------- Notícias ---------- */
.noticias-lista{ display:grid; gap:1.2rem; }
.noticias-lista--3{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.noticia-card{ display:block; background:#fff; border:1px solid var(--borda); border-radius:var(--raio); overflow:hidden; color:var(--tinta); box-shadow:var(--sombra); }
.noticia-card:hover{ text-decoration:none; transform:translateY(-2px); transition:.15s; }
.noticia-card img{ width:100%; height:170px; object-fit:cover; display:block; background:var(--cinza-claro); }
.noticia-card__txt{ padding:1rem 1.2rem; }
.noticia-card__data{ color:var(--amarelo-texto); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.noticia-card h2,.noticia-card h3{ color:var(--azul); margin:.3rem 0; font-size:1.15rem; }
.noticia-card p{ color:var(--cinza); font-size:.92rem; margin:.3rem 0 0; }
.home-noticias{ background:var(--cinza-claro); }
.home-noticias__interno{ max-width:var(--larg); margin:0 auto; padding:3rem 1rem; }
.home-noticias__topo{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1.5rem; }
.home-noticias__topo h2{ color:var(--azul); margin:0; font-size:1.6rem; }
.home-cursos__interno{ max-width:var(--larg); margin:0 auto; padding:3rem 1rem; }
.noticia-card__local{ color:#5b6072; font-size:.85rem; margin:.25rem 0 0; }

/* ---------- Portal do associado ---------- */
.portal-hero{ background:linear-gradient(135deg,var(--azul),var(--azul-claro)); color:#fff; }
.portal-hero__interno{ max-width:var(--larg); margin:0 auto; padding:2.2rem 1rem; }
.portal-hero__ola{ font-size:1.5rem; font-weight:700; margin:0 0 .8rem; }
.portal-status{ display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; }
.portal-status__cat,.portal-status__val{ font-size:.9rem; color:#e1e0ec; }
.ptag{ display:inline-block; padding:.25rem .8rem; border-radius:999px; font-weight:700; font-size:.82rem; }
.ptag--ok{ background:#1f9d55; color:#fff; }
.ptag--off{ background:#f7c413; color:var(--azul-escuro); }
.anos__cabeca{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---- retrospectiva anual ---- */
/* <details> puro: o "clica e expande" e do navegador, funciona sem JavaScript
   e imprime aberto, que importa porque este material vai impresso para a ABEn
   Nacional. */
.retro{border:1px solid var(--borda);border-radius:var(--raio);margin:0 0 .8rem;background:#fff;overflow:hidden}
.retro__mes{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1rem 1.2rem;cursor:pointer;list-style:none}
.retro__mes::-webkit-details-marker{display:none}
.retro__mes::before{content:"▸";color:var(--azul);margin-right:.5rem;transition:transform .15s ease;display:inline-block}
.retro[open] .retro__mes::before{transform:rotate(90deg)}
.retro__mes:hover{background:var(--cinza-claro)}
.retro__nome{font-weight:700;color:var(--azul);font-size:1.1rem}
.retro__conta{color:var(--cinza);font-size:.88rem}
.retro__item{padding:1.1rem 1.2rem;border-top:1px solid var(--borda)}
.retro__data{margin:0 0 .2rem;font-size:.82rem;color:var(--cinza);text-transform:uppercase;letter-spacing:.03em}
.retro__titulo{margin:0 0 .2rem;font-size:1.05rem}
/* sem sublinhado por padrao, como os cards do resto do site: uma lista
   inteira de titulos sublinhados vira uma parede de risco */
.retro__titulo a{color:var(--tinta);text-decoration:none}
.retro__titulo a:hover{color:var(--azul);text-decoration:underline}
.retro__local{margin:0;color:var(--cinza);font-size:.9rem}
.retro__fotos{display:grid;gap:.7rem;margin-top:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.retro__foto{margin:0}
.retro__foto img{width:100%;height:170px;object-fit:cover;border-radius:8px;display:block;background:var(--cinza-claro)}
.retro__foto figcaption{margin-top:.3rem;font-size:.8rem;color:var(--cinza);line-height:1.35}
.vazio-publico{padding:2rem 0;color:var(--cinza);text-align:center}
@media print{
  /* impresso, tudo aberto e sem a setinha: e assim que vai para a Nacional */
  .retro__mes::before{display:none}
  .retro{break-inside:avoid}
}

/* ---- tela da foto da carteirinha ---- */
/* o herói curto: esta tela é uma tarefa, e não o painel; a faixa alta do
   /portal empurraria o formulário para baixo da dobra no celular */
.portal-hero--curto{ padding:1.4rem 0; }
.portal-hero__sub{ margin:.3rem 0 0; color:#cdcde0; font-size:.92rem; }
.portal-voltar{ margin:0 0 1.2rem; font-size:.92rem; }
.portal-acoes{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.4rem; }
.portal-dica{ margin:1.2rem 0 0; font-size:.92rem; color:var(--cinza); }

/* Aviso de resultado no portal (salvou, ou nao deu). Verde e vermelho tem
   contraste suficiente sobre o proprio fundo, e o texto nao depende so da cor:
   ele diz o que aconteceu. */
.portal-recado{ max-width:var(--larg); margin:1.2rem auto 0; padding:.8rem 1rem;
  border-radius:var(--raio); font-size:.92rem; border:1px solid; }
.portal-recado--ok{ background:#eaf7ef; border-color:#b6e0c6; color:#1c6b3a; }
.portal-recado--erro{ background:#fdecec; border-color:#f3bdbd; color:#8e2020; }

.portal-conteudo{ max-width:var(--larg); margin:0 auto; padding:2rem 1rem 3rem; }
.portal-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-bottom:2rem; }
.pcard{ background:#fff; border:1px solid var(--borda); border-left:4px solid var(--amarelo); border-radius:var(--raio); padding:1.4rem; display:flex; flex-direction:column; gap:.2rem; box-shadow:var(--sombra); color:var(--tinta); }
.pcard:hover{ text-decoration:none; transform:translateY(-2px); transition:.15s; }
.pcard__ic{ font-size:1.8rem; }
.pcard strong{ color:var(--azul); }
.pcard small{ color:var(--cinza); }
.portal-aviso{ background:#fff8cb; border:1px solid #ffed7b; border-radius:var(--raio); padding:1.6rem; margin-bottom:2rem; }
/* O titulo estava num amarelo mais claro que o texto e nao passava no AA
   (3.92:1 sobre o fundo do aviso; ja falhava antes, com 4.43:1). Titulo e
   texto agora no mesmo tom, que da 5.83:1; a hierarquia fica no tamanho. */
.portal-aviso h2{ margin:0 0 .5rem; color:#6f6000; }
.portal-aviso p{ margin:0 0 1rem; color:#6f6000; }
.bloco-portal{ background:#fff; border:1px solid var(--borda); border-radius:var(--raio); padding:1.4rem; overflow-x:auto; }
.bloco-portal h2{ margin:0 0 1rem; color:var(--azul); font-size:1.2rem; }
.materiais-lista{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.materiais-lista a{ display:flex; align-items:center; gap:.8rem; padding:.7rem .9rem; border:1px solid var(--borda); border-radius:8px; color:var(--tinta); }
.materiais-lista a:hover{ text-decoration:none; border-color:var(--azul-claro); background:var(--cinza-claro); }
.materiais-lista__ic{ font-size:1.3rem; }
.materiais-lista strong{ color:var(--azul); display:block; }
.materiais-lista small{ color:var(--cinza); font-size:.85rem; }
/* Convenios no portal. Cartoes em grade, e nao lista em coluna: sao poucos e
   curtos, e em coluna cada um ocupa a largura toda com muito ar sobrando. */
.bloco-portal__ajuda{ margin:-.4rem 0 1rem; color:var(--cinza); font-size:.9rem; }
.convenios-lista{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.convenios-lista li{ padding:.85rem 1rem; border:1px solid var(--borda); border-radius:8px;
  display:flex; flex-direction:column; gap:.15rem; }
.convenios-lista strong{ color:var(--azul); }
.convenios-lista small{ color:var(--cinza); font-size:.85rem; }
.convenios-lista a{ color:var(--cinza); }

.comissoes-lista{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; }
.comissoes-lista li{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 1rem; border:1px solid var(--borda); border-radius:8px; flex-wrap:wrap; }
.comissoes-lista strong{ color:var(--azul); display:block; }
.comissoes-lista small{ color:var(--cinza); font-size:.85rem; display:block; }
.tabela-portal{ width:100%; border-collapse:collapse; }
.tabela-portal th,.tabela-portal td{ text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--borda); font-size:.92rem; }
.tabela-portal th{ color:var(--cinza); font-size:.8rem; text-transform:uppercase; }

/* ---------- Associe-se ---------- */
/* ---------- Secoes de conteudo ---------- */
.secao{ background:var(--branco); }
.secao--clara{ background:var(--cinza-claro); }
.secao__interno{ max-width:var(--larg); margin:0 auto; padding:var(--ar) 1rem; }
.secao__titulo{ color:var(--azul); font-size:1.5rem; margin:0 0 .4rem; }
.secao__sub{ color:var(--cinza); margin:0 0 1.6rem; }
.secao__nota{ color:var(--cinza); font-size:.85rem; margin:1.4rem 0 0; }

/* beneficios */
.beneficios{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; margin-top:1.4rem; }
.beneficio{ border-left:3px solid var(--amarelo); padding:.2rem 0 .2rem 1rem; }
.beneficio h3{ color:var(--azul); font-size:1.02rem; margin:0 0 .35rem; }
.beneficio p{ color:var(--cinza); font-size:.92rem; margin:0; }

/* os tres caminhos de associacao */
.caminhos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }
.caminho{
  background:var(--branco); border:1px solid var(--borda); border-top:4px solid var(--azul);
  border-radius:var(--raio); padding:1.5rem; display:flex; flex-direction:column; gap:.7rem;
  color:var(--tinta); box-shadow:var(--sombra); transition:transform .15s ease, border-color .15s ease;
}
.caminho:hover{ text-decoration:none; border-top-color:var(--amarelo); transform:translateY(-3px); }
.caminho h3{ color:var(--azul); font-size:1.2rem; margin:0; }
.caminho__quem{ color:var(--cinza); font-size:.9rem; margin:0; flex:1; }
.caminho__valores{ list-style:none; margin:0; padding:.8rem 0 0; border-top:1px solid var(--borda); display:flex; flex-direction:column; gap:.4rem; }
.caminho__valores li{ display:flex; justify-content:space-between; gap:1rem; font-size:.9rem; }
.caminho__valores strong{ color:var(--azul); font-variant-numeric:tabular-nums; white-space:nowrap; }
.caminho__acao{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.3rem;
  background:var(--amarelo); color:var(--azul-escuro); font-weight:700; font-size:.9rem;
  padding:.6rem .9rem; border-radius:8px;
}
.caminho:hover .caminho__seta{ transform:translateX(3px); }
.caminho__seta{ display:inline-block; transition:transform .15s ease; }

/* equipe (diretoria e conselho) */
.equipe{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.4rem; margin-top:1.4rem; }
.membro{
  background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sombra);
}
.membro__foto{
  width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center top;
  display:block; background:var(--cinza-claro);
}
.membro__foto--vazia{
  display:grid; place-items:center; font-size:2.6rem; font-weight:800;
  color:var(--azul); background:linear-gradient(160deg,var(--cinza-claro),#e2e2ed);
}
.membro__txt{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.3rem; }
.membro__txt h3{ color:var(--azul); font-size:1.02rem; margin:0; line-height:1.25; }
.membro__cargo{
  margin:0; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--amarelo-texto);
}
.membro__bio{ margin:.5rem 0 0; font-size:.87rem; color:var(--cinza); line-height:1.55; }

/* formas de pagamento */
.pagamentos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; margin-top:1.4rem; }
.pagamento{ background:var(--cinza-claro); border-radius:var(--raio); padding:1.2rem 1.3rem; }
.pagamento h3{ color:var(--azul); font-size:1rem; margin:0 0 .35rem; }
.pagamento p{ color:var(--cinza); font-size:.9rem; margin:0; }

/* blocos da coluna lateral da associacao */
.bloco{ background:#fff; border:1px solid var(--borda); border-radius:var(--raio); padding:1.3rem 1.4rem; }
.bloco + .bloco{ margin-top:1rem; }
.bloco h2{ color:var(--azul); font-size:1.05rem; margin:0 0 .7rem; }
.bloco p{ font-size:.9rem; color:var(--cinza); margin:0 0 .5rem; }
.bloco p:last-child{ margin-bottom:0; }
.bloco__nota{ font-size:.82rem!important; color:var(--cinza)!important; }
.tabela-valores{ width:100%; border-collapse:collapse; font-size:.88rem; }
.tabela-valores th,.tabela-valores td{ text-align:left; padding:.5rem .4rem; border-bottom:1px solid var(--borda); }
.tabela-valores thead th{ color:var(--cinza); font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.tabela-valores tbody th{ font-weight:600; color:var(--tinta); }
.tabela-valores td{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.tabela-valores tbody tr:last-child th,.tabela-valores tbody tr:last-child td{ border-bottom:0; }
.pagina-hero__volta{ margin:0 0 .5rem!important; font-size:.88rem; }
.pagina-hero__volta a{ color:#e3e3ee; }
.aviso--erro{ background:#fdecec; border:1px solid #f3b9b9; color:#8a1f1f; padding:.7rem .9rem; border-radius:8px; margin:0; font-size:.9rem; }

.associe{ background:var(--cinza-claro); }
.associe__interno{ max-width:var(--larg); margin:0 auto; padding:2.5rem 1rem 3.5rem; display:grid; grid-template-columns:340px 1fr; gap:2rem; align-items:start; }
.associe__lado{ position:sticky; top:5.5rem; }
.associe__planos{ background:#fff; border:1px solid var(--borda); border-radius:var(--raio); padding:1.5rem; position:sticky; top:1rem; }
.associe__planos h2,.associe__form h2{ color:var(--azul); font-size:1.15rem; margin:0 0 1rem; }
.planos{ list-style:none; padding:0; margin:0 0 1rem; }
.planos li{ display:flex; justify-content:space-between; align-items:center; padding:.6rem 0; border-bottom:1px solid var(--borda); }
.planos__nome{ font-size:.92rem; }
.planos__valor{ font-weight:700; color:var(--azul); }
.planos__valor small{ font-weight:400; color:var(--cinza); font-size:.75rem; }
.associe__obs{ font-size:.82rem; color:var(--cinza); margin:.8rem 0 0; }
.associe__form{ background:#fff; border:1px solid var(--borda); border-radius:var(--raio); padding:1.8rem; display:flex; flex-direction:column; gap:1rem; }
.associe__form label{ display:flex; flex-direction:column; font-size:.85rem; color:var(--cinza); gap:.3rem; }
.associe__form input,.associe__form select{ padding:.6rem; border:1px solid var(--borda); border-radius:8px; font-size:1rem; font-family:inherit; }
.associe__linha{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.erro-campo{ color:#a12626; font-size:.8rem; font-weight:600; }
.resumo-pagamento,.sim-pagamento{ background:#fff; border:1px solid var(--borda); border-radius:var(--raio); padding:1.5rem; margin-bottom:1.2rem; }
.resumo-pagamento h2{ color:var(--azul); font-size:1.1rem; margin:0 0 1rem; }
.sim-pagamento__tag{ display:inline-block; background:var(--amarelo); color:var(--azul-escuro); font-weight:700; font-size:.72rem; text-transform:uppercase; padding:.25rem .6rem; border-radius:999px; margin:0 0 .8rem; }

/* ---------- Cursos e Eventos ---------- */
/* Cursos e eventos com o cartaz do proprio evento. 62% do acervo tem cartaz,
   e e o que tira o site da parede de texto. Quem nao tem entra so com o tipo. */
.cursos-lista{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.curso-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--borda);
  color:var(--tinta); overflow:hidden; transition:border-color .15s ease, transform .15s ease;
}
.curso-card:hover{ text-decoration:none; border-color:var(--azul); transform:translateY(-2px); }
.curso-card__img{ display:block; background:var(--cinza-claro); }
.curso-card__img img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center top; display:block; }
.curso-card--sem-img{ border-top:3px solid var(--azul); }
.curso-card__topo{ display:flex; gap:.6rem; align-items:center; padding:1.1rem 1.2rem 0; }
.curso-card__tipo{ color:var(--cinza); font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; }
.curso-card h2,.curso-card h3{ margin:.5rem 0 0; padding:0 1.2rem; color:var(--azul); font-size:1.08rem; line-height:1.3; }
.curso-card:hover h3{ color:var(--azul-claro); }
.curso-card__meta{ margin:.4rem 0 0; padding:0 1.2rem 1.2rem; color:var(--cinza); font-size:.88rem; }
.curso-detalhe{ max-width:var(--larg); margin:0 auto; padding:2.5rem 1rem 3.5rem; display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start; }
.curso-info{ list-style:none; padding:0; margin:0 0 1.5rem; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; color:var(--cinza); font-size:.95rem; }
.curso-desc{ font-size:1.02rem; }
.curso-desc h2{ color:var(--azul); font-size:1.3rem; margin:1.5rem 0 .5rem; }
.curso-inscricao{ background:#fff; border:1px solid var(--borda); border-radius:var(--raio); padding:1.5rem; position:sticky; top:1rem; box-shadow:var(--sombra); }
.curso-precos{ margin-bottom:1.2rem; }
.curso-precos div{ display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid var(--borda); }
.curso-precos span{ color:var(--cinza); font-size:.9rem; }
.curso-precos strong{ color:var(--azul); }
.curso-inscricao label{ display:flex; flex-direction:column; font-size:.85rem; color:var(--cinza); gap:.3rem; margin-bottom:.8rem; }
/* Escolha do perfil na inscrição (enfermeiro ou estudante), que entrou com as
   quatro faixas de preço em 09/10/2026.
   A opção é uma LINHA inteira clicável: no celular, acertar só a bolinha do
   radio é alvo de 16px, e a lista do lado de fora do rótulo deixaria o toque
   sem resposta. `flex-direction:row` desfaz a coluna herdada de
   `.curso-inscricao label` acima, senão o texto cai embaixo do radio. */
.escolha{ border:1px solid var(--borda); border-radius:10px; padding:.7rem .8rem; margin:0 0 .9rem; }
.escolha legend{ font-size:.85rem; color:var(--cinza); padding:0 .3rem; }
.curso-inscricao .escolha__op{
  flex-direction:row; align-items:flex-start; gap:.5rem; margin:0 0 .35rem;
  font-size:.92rem; color:var(--tinta); cursor:pointer; line-height:1.3;
}
.curso-inscricao .escolha__op input{ width:auto; margin-top:.15rem; flex:0 0 auto; }
.escolha__nota{ margin:.4rem 0 0; font-size:.8rem; color:var(--cinza); }
.curso-inscricao input{ padding:.55rem; border:1px solid var(--borda); border-radius:8px; font-size:1rem; }
.curso-fechado{ color:var(--cinza); text-align:center; padding:1rem; background:var(--cinza-claro); border-radius:8px; }
.galeria-pub{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.galeria-pub img{ width:100%; height:130px; object-fit:cover; border-radius:8px; display:block; background:var(--cinza-claro); }
.galeria-pub a{ display:block; overflow:hidden; border-radius:8px; }
.galeria-pub a:hover img{ transform:scale(1.04); transition:.2s; }

/* ---------- Responsivo ---------- */
@media (max-width:960px){
  .associe__interno{ grid-template-columns:1fr; }
  .associe__lado{ position:static; }
}
@media (max-width:760px){
  .curso-detalhe{ grid-template-columns:1fr; }
  .curso-inscricao{ position:static; }
  .associe__planos{ position:static; }
  .associe__linha{ grid-template-columns:1fr; }
  .rodape__interno{ grid-template-columns:1fr; }
  .secao__interno{ padding:3rem 1rem; }
  /* o cabecalho tem as proprias regras de mobile la em cima (900px) */
}

/* ---------- Validação de carteirinha ----------
   Pagina que o QR do cartao abre. Quem le esta em pe, com o celular na mao e a
   carteirinha na outra: a resposta ("em dia" ou "nao esta") tem que ser lida de
   longe, antes de qualquer detalhe. Cor nao decide sozinha, a palavra decide:
   daltonico e tela no sol precisam do texto. */
.validacao{ max-width:560px; }
.validacao__cartao{
  border:1px solid var(--borda); border-left:6px solid var(--cinza-fraco);
  border-radius:var(--raio); background:var(--branco);
  box-shadow:var(--sombra); padding:1.8rem 1.6rem;
}
.validacao__cartao--ok{ border-left-color:#1f7a44; }
.validacao__cartao--nao{ border-left-color:#a12626; }
.validacao__selo{
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:1.2rem; font-weight:700; margin:0 0 1.1rem; line-height:1.3;
}
.validacao__cartao--ok  .validacao__selo{ color:#1f7a44; }
.validacao__cartao--nao .validacao__selo{ color:#a12626; }
.validacao__texto{ margin:0; color:var(--cinza); }

.validacao__dados{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.2rem; }
.validacao__dados dt{
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:var(--cinza-fraco); align-self:baseline; padding-top:.2rem;
}
.validacao__dados dd{ margin:0; color:var(--tinta); font-size:1.05rem; }

.validacao__quando{ margin:.9rem 0 0; font-size:.88rem; color:var(--cinza-fraco); }
.validacao__rodape{
  margin:1.6rem 0 0; padding-top:1rem; border-top:1px solid var(--borda);
  font-size:.88rem; color:var(--cinza-fraco);
}
@media (max-width:480px){
  .validacao__dados{ grid-template-columns:1fr; gap:.15rem; }
  .validacao__dados dd{ margin-bottom:.7rem; }
}

/* ---------- Biografia da diretoria, recolhida ---------- */
/* Dez currículos abertos de uma vez somavam 1.094 palavras e enterravam o
   cartão da pessoa. Aqui a foto, o nome e o cargo voltam a ser o que se vê, e
   a trajetória fica a um clique. Nenhum texto foi cortado. */
.membro__mais{ margin-top:.55rem; }
.membro__mais > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.4rem;
  font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--azul); padding:.15rem 0;
}
.membro__mais > summary::-webkit-details-marker{ display:none; }
/* seta desenhada por borda: sem fonte de ícone e gira sozinha ao abrir */
.membro__mais > summary::after{
  content:""; width:0; height:0; flex:0 0 auto;
  border-left:5px solid currentColor;
  border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
  transition:transform .15s ease;
}
.membro__mais[open] > summary::after{ transform:rotate(90deg); }
.membro__mais > summary:hover{ text-decoration:underline; }
.membro__mais > summary:focus-visible{ outline:3px solid var(--amarelo); outline-offset:3px; border-radius:3px; }
@media (prefers-reduced-motion:reduce){
  .membro__mais > summary::after{ transition:none; }
}

/* ---------- Peças para as páginas do CMS ---------- */
/* O conteúdo do CMS caía num .pagina__interno que só sabia formatar <p>. As
   páginas institucionais viravam parede de texto, e a estrutura (datas, sedes
   por período, números) ficava escondida na prosa. Estas classes existem para
   o conteúdo poder usar a mesma linguagem visual do resto do site. */

/* primeira frase da página: maior, é o resumo do que vem abaixo */
.pagina__interno .pagina__lead{
  font-size:1.18rem; line-height:1.6; color:var(--tinta); margin-bottom:1.6rem;
}

/* a tira de números da home, redimensionada para a coluna de 820px.
   A original é grade fixa de 4 colunas em largura cheia; aqui ela reflui. */
.fatos--pagina{ margin:1.8rem 0; background:none; }
.fatos--pagina .fatos__interno{
  max-width:none; padding:1.3rem 0;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.6rem;
}
.fatos--pagina .fato__n{ font-size:2.6rem; }

/* linha do tempo: o componente já existia no CSS e não era usado em lugar
   nenhum. Em coluna estreita o período precisa ficar acima do texto, senão
   o min-width de 110px come metade da linha. */
.linha-tempo--marcos{ margin:1.6rem 0 2rem; }
.linha-tempo--marcos .linha-tempo__item{ padding:.75rem 0 .75rem 1.5rem; }
.linha-tempo--marcos .linha-tempo__periodo{
  display:block; min-width:0; margin-bottom:.15rem;
  font-size:.82rem; letter-spacing:.05em; text-transform:uppercase;
}
.linha-tempo--marcos .linha-tempo__nome{ display:block; font-weight:600; }
.linha-tempo--marcos .linha-tempo__nome small{
  display:block; margin-top:.2rem; font-weight:400; font-size:.92rem; line-height:1.5;
}
/* o marco atual ganha o amarelo cheio; os anteriores ficam com o ponto neutro */
.linha-tempo--marcos .linha-tempo__item--agora::before{
  background:var(--azul); box-shadow:0 0 0 3px #2c296c26;
}

/* endereço: bloco, não parágrafo perdido no meio do texto */
.cartao-endereco{
  display:block; font-style:normal; line-height:1.7;
  background:var(--cinza-claro); border-left:3px solid var(--azul);
  border-radius:var(--raio); padding:1rem 1.2rem; margin:1rem 0 2rem;
}

/* citação em destaque */
.pagina__interno blockquote{
  margin:1.4rem 0; padding:1rem 1.3rem;
  background:var(--cinza-claro); border-left:3px solid var(--amarelo-esc, #d0a510);
  border-radius:var(--raio);
}
.pagina__interno blockquote p{ margin:0; }
.pagina__interno blockquote footer{
  margin-top:.6rem; font-size:.88rem; font-weight:700; color:var(--cinza);
}
.pagina__interno .citacao p{ font-size:1.02rem; line-height:1.65; }

/* lista com marcador da marca, em vez do disco padrão */
.pagina__interno .lista-marcada{ list-style:none; padding-left:0; margin:1rem 0 1.4rem; }
.pagina__interno .lista-marcada li{
  position:relative; padding-left:1.5rem; margin:.55rem 0; line-height:1.6;
}
.pagina__interno .lista-marcada li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:8px; border-radius:50%; background:var(--amarelo);
  box-shadow:0 0 0 1px var(--amarelo-esc, #d0a510);
}

/* ---------- Presidentes: mandato anterior recolhido ---------- */
/* Três pessoas presidiram duas vezes. Mandatos seguidos viraram um cartão só;
   o anterior fica aqui, fechado, para o cartão não dobrar de altura. */
.gestao__mandato{
  margin:1.2rem 0 -.4rem; padding-top:1.2rem; border-top:1px solid var(--borda);
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--azul); font-variant-numeric:tabular-nums;
}
/* com o rótulo do mandato acima, a lista não repete a linha divisória */
.gestao__mandato + .gestao__diretoria,
.gestao__mandato + .gestao__sem-dados{ margin-top:.9rem; padding-top:0; border-top:0; }

.gestao__antes{ margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--borda); }
.gestao__antes > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.4rem;
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--azul);
}
.gestao__antes > summary::-webkit-details-marker{ display:none; }
.gestao__antes > summary::after{
  content:""; width:0; height:0; flex:0 0 auto;
  border-left:5px solid currentColor;
  border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
  transition:transform .15s ease;
}
.gestao__antes[open] > summary::after{ transform:rotate(90deg); }
.gestao__antes > summary:hover{ text-decoration:underline; }
.gestao__antes > summary:focus-visible{ outline:3px solid var(--amarelo); outline-offset:3px; border-radius:3px; }
.gestao__antes .gestao__diretoria,
.gestao__antes .gestao__sem-dados{ margin-top:.9rem; padding-top:0; border-top:0; }
@media (prefers-reduced-motion:reduce){
  .gestao__antes > summary::after{ transition:none; }
}

/* ============================================================
   MOBILE
   ============================================================
   Medido com o _shot.php a 390px de largura de verdade. O Chrome headless
   tem janela MINIMA de 500px, entao pedir --window-size=390 renderiza a 500 e
   a medida do celular sai errada; o iframe do _shot da a largura real.
   ============================================================ */

/* ---------- Fale Conosco: estourava a tela ----------
   .contato era grade de `300px 1fr` sem NENHUMA media query. A 375px isso da
   826px de largura: a pagina rolava de lado e metade do formulario ficava
   fora. Era o unico estouro horizontal do site inteiro. */
@media (max-width:860px){
  .contato{ grid-template-columns:1fr; gap:1.4rem; }
}
@media (max-width:560px){
  /* nome e telefone lado a lado nao cabem; empilhados o campo fica utilizavel */
  .contato__linha{ grid-template-columns:1fr; gap:0; }
  .contato{ padding:1.8rem 1rem 2.6rem; }
  .contato__form,
  .contato__info{ padding:1.2rem; }
}

/* ---------- Centralizar o conteudo curto no celular ----------
   Vale para bloco CURTO: numero, rotulo, titulo de secao, coluna de rodape. NAO vale para texto corrido: paragrafo centralizado obriga
   o olho a procurar onde comeca cada linha, e o site tem paginas inteiras de
   leitura (Historia, Quem Somos, Politica de Privacidade). */
@media (max-width:560px){

  /* os numeros da home: era isto no primeiro print */
  .fatos__interno{ justify-items:center; }
  .fato{ align-items:center; text-align:center; }
  .fato__t{ margin-left:auto; margin-right:auto; }

  /* rodape: era isto no segundo print */
  .rodape__col{ text-align:center; }
  .rodape__redes{ justify-content:center; }
  .rodape__base{ text-align:center; }

  /* faixa de titulo das paginas internas */
  .pagina-hero__interno{ text-align:center; }

  /* titulo e chamada de secao, que sao uma linha ou duas */
  .secao__titulo,
  .secao__sub,
  .secao__nota{ text-align:center; }

  /* o primeiro paragrafo das paginas do CMS e resumo, nao leitura longa */
  .pagina__interno .pagina__lead{ text-align:center; }

  /* cartao de pessoa: nome, cargo e foto no eixo */
  .membro__txt{ align-items:center; text-align:center; }
  .membro__mais{ align-self:center; }

  /* cartao de gestao na galeria de presidentes */
  .gestao__txt{ text-align:center; }
  .gestao__diretoria{ justify-items:center; }
  .gestao__antes > summary{ justify-content:center; }

  /* numeros e rotulos dentro das paginas do CMS */
  .fatos--pagina .fatos__interno{ justify-items:center; }

  /* botao que ocupa a largura toda e mais facil de acertar com o polegar */
  .pagina-hero__interno .botao,
  .secao__interno > .botao{ display:block; margin-left:auto; margin-right:auto; }
}

/* Dois atalhos no fim de uma página do CMS.
   Era um parágrafo solto com dois links sublinhados no meio da frase: dava
   para ler três vezes e não perceber que ali havia para onde ir. O componente
   .caminho já existia no Associe-se; aqui ele só ganha a variante de duas
   colunas e o ajuste para caber na coluna de 820px do CMS. */
.caminhos--2{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin:1.2rem 0 .5rem; }
.pagina__interno .caminho{ text-decoration:none; }
.pagina__interno .caminho h3{ margin:0; }
.pagina__interno .caminho p{ margin:0; }
.pagina__interno .caminho__acao{ text-decoration:none; }

/* Rótulo de campo numa linha só.
   O label dos formulários é flex-direction:column, então cada filho vira uma
   linha: um <small> solto ao lado do texto descia sozinho e empurrava o campo
   para baixo. Em linha de duas colunas isso desalinhava os dois inputs. */
.campo__rot{ display:block; }
.campo__rot small{ font-weight:400; }

/* Cartão dentro de página do CMS não é link de texto corrido.
   `.pagina__interno a` sublinha, e está certo para link no meio de um
   parágrafo. Só que a lista de publicações e a de notícias moram DENTRO desse
   invólucro, e o cartão inteiro é um <a>: o sublinhado atravessava título,
   subtítulo e a etiqueta "PDF · 0.1 MB" de uma vez. text-decoration pinta por
   cima dos filhos mesmo quando o filho diz none, então tem de sair no <a>. */
.pagina__interno .pub-lista a,
.pagina__interno .noticia-card,
.pagina__interno .card-item,
.pagina__interno .caminho{ text-decoration:none; }
.pagina__interno .pub-lista a:hover,
.pagina__interno .noticia-card:hover,
.pagina__interno .card-item:hover{ text-decoration:none; }

/* botao de link externo na pagina do curso */
.curso-link{ margin:0 0 1rem; }
.curso-link .botao{ display:block; }

/* ---------- página de publicações sem nada aberto ---------- */
/* A prestação de contas saiu para Transparência e o resto do acervo está
   oculto no painel: sem estas linhas a página fica em branco e parece
   quebrada para quem veio procurar um documento. */
.vazio-pub{margin:0 0 .6rem;font-size:1.02rem;color:var(--cinza,#555)}
.vazio-pub__ajuda{margin:0;font-size:.92rem;line-height:1.6;color:var(--cinza,#555)}

/* ---------- boas-vindas do associado no portal ---------- */
/* 2.523 dos 2.526 associados nunca entraram no portal: para quase todo mundo
   esta é a primeira visita, e sem ordem de leitura a tela é só um monte de
   cartão. O bloco some quando a pessoa dispensa, não quando ela "já visitou". */
.boasvindas{margin:0 0 2rem;padding:1.4rem 1.5rem;border:1px solid #d9def0;
  border-radius:14px;background:#f7f9ff}
.boasvindas__topo{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.boasvindas__topo h2{margin:0;font-size:1.15rem;color:var(--azul)}
.boasvindas__topo p{margin:.2rem 0 0;font-size:.9rem;color:#5a6076}
.boasvindas__topo form{margin-left:auto}
.boasvindas__fechar{background:none;border:0;padding:.2rem .1rem;cursor:pointer;
  font-size:.8rem;color:#6b7189;text-decoration:underline}
.boasvindas__fechar:hover{color:var(--azul)}
.boasvindas__progresso{margin:1rem 0 .5rem;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.05em;color:#6b7189}
.boasvindas__passos{margin:0;padding:0;list-style:none;display:grid;gap:.45rem}
.boasvindas__passos li{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.55rem .8rem;border-radius:9px;background:#fff;border:1px solid #e4e8f5;font-size:.92rem}
.boasvindas__passos li.ok{color:#3d4457}
.boasvindas__passos li.falta{border-color:#f0d98a;background:#fffdf2}
.boasvindas__marca{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex:none;border-radius:50%;font-size:.72rem;font-weight:700;
  border:1.5px solid #c4cade;color:#fff}
.boasvindas__passos li.ok .boasvindas__marca{background:#2e7d4f;border-color:#2e7d4f}
.boasvindas__passos li a{margin-left:auto;font-size:.85rem;font-weight:600}
.boasvindas__passos li a.boasvindas__secundario{font-weight:400;color:#6b7189}
.boasvindas__revisar{margin:.9rem 0 0;padding:.6rem .8rem;border-radius:9px;
  background:#fff6e8;border:1px solid #f0d98a;font-size:.86rem;line-height:1.5;color:#6a5600}
.boasvindas h3{margin:1.5rem 0 .5rem;font-size:.95rem;color:var(--azul)}
.boasvindas__tour{margin:0;padding-left:1.15rem;display:grid;gap:.3rem;
  font-size:.9rem;line-height:1.5;color:#3d4457}
.boasvindas__trava{margin:.9rem 0 0;font-size:.86rem;color:#6b7189;line-height:1.5}
@media (max-width:560px){
  .boasvindas{padding:1.1rem 1rem}
  .boasvindas__topo form{margin-left:0}
  .boasvindas__passos li a{margin-left:0;width:100%}
}

/* assinatura da agência no rodapé: quebra para a própria linha no celular, onde
   a base do rodapé já é uma coluna estreita */
.rodape__assina{ color:#8f8eb8; }
.rodape__assina a{ color:#b6b5d4; }
.rodape__assina a:hover{ color:var(--amarelo); }