/**
 * UNEDI — estilos do SISTEMA (o que não existe no WordPress).
 *
 * Arquivo nosso, de propósito. Os outros quatro CSS de `public/assets/css/` são
 * cópias byte a byte do tema WordPress (conferido: `custom.css` é idêntico), e
 * mexer neles apagaria a fronteira entre "o que veio do tema" e "o que é nosso".
 * Tudo que o site novo ganha e o WordPress não tem entra aqui.
 *
 * Usa os tokens do tema (`--4`, `--8`) em vez de cores soltas, para acompanhar
 * qualquer ajuste de paleta que venha do original.
 */

/* -----------------------------------------------------------------------------
 * Entrada para a Área do Associado, no cabeçalho
 *
 * Fica à ESQUERDA do botão MENU e fora do hambúrguer, de propósito: o menu do
 * site é navegação de conteúdo (Início, Blog, Portal de Vagas) e o acesso à
 * conta é outra categoria de ação. Como o hambúrguer é usado inclusive no
 * desktop, enfiar o login lá dentro deixaria o sistema a dois cliques e sem
 * nenhuma pista de que existe.
 *
 * Estilo deliberadamente SECUNDÁRIO ao MENU: mesma altura e mesmo raio para
 * alinhar, mas sem a borda amarela, que continua exclusiva do botão principal.
 * -------------------------------------------------------------------------- */
/* O `.navbar-wrapper` é um flex com `space-between`, e os três filhos visíveis
   (marca, ícones sociais, MENU) se distribuíam sozinhos — era isso que deixava
   os ícones no centro da tela. Entrar como quarto filho REDISTRIBUI tudo: medido,
   os ícones andavam 208px para a esquerda, saindo de 638 para 430 numa janela de
   1280. Ou seja, acrescentar o link mexia no desenho original do cabeçalho.

   Conserto em duas partes, e as duas são necessárias:
   1. os ícones saem do fluxo e ficam presos ao centro real da tela;
   2. o link ganha `margin-left: auto` e cola no MENU, em vez de flutuar no meio.
   Com isso o cabeçalho volta a ser marca à esquerda, ícones no centro exato e o
   bloco de acesso à direita.

   Só vale no DESKTOP. No celular o cabeçalho é estreito e tirar os ícones do
   fluxo os fazia passar POR BAIXO do rótulo: medido em 375px, ícones em
   140–236 e o link em 176–257, sobrepostos. Deixando-os no fluxo eles ficam
   lado a lado sem invadir. */
@media screen and (min-width: 768px) {
  .navbar-wrapper {
    position: relative;
  }

  .navbar-wrapper .div-block-295 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Par primário/secundário no cabeçalho: MENU é o preenchido, Área do Associado
   é o vazado. Mesma borda, mesmo raio e mesma altura — muda só o preenchimento,
   que é o que hierarquiza sem inventar cor nova. */
.link-area-associado {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  margin-right: 14px;
  padding: 15px 18px;
  border: 1px solid var(--8);
  border-radius: 15px;
  background-color: transparent;
  color: var(--4);
  /* 16px -> 14px em 2026-08-17: o rótulo estava grande demais para um botão
     secundário do cabeçalho. Só vale no desktop — abaixo de 767px este link
     nem existe, o acesso vive dentro do menu. */
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: all .5s;
}

.link-area-associado:hover,
.link-area-associado:focus-visible {
  background-color: var(--8);
  color: var(--4);
}

/* MENU passa a nascer preenchido, e NÃO muda ao abrir: o `.w--open` do Webflow
   trocava o fundo, o que fazia o botão piscar de cor no clique. */
.menu-button,
.menu-button:hover,
.menu-button.w--open {
  background-color: var(--8);
  color: var(--4);
}

/* O foco visível importa: esta é a porta de entrada do sistema, e quem navega
   por teclado precisa enxergar onde está. */
.link-area-associado:focus-visible {
  outline: 2px solid var(--5);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
 * Celular: o cabeçalho volta ao ORIGINAL, e o acesso vai para dentro do menu.
 *
 * Tentei o link no cabeçalho e não cabe. Medido, a folga entre a marca e os
 * ícones sociais desabava em toda largura de celular:
 *     320px: 10px -> 0px (encostando)     375px: 35px ->  7px
 *     360px: 28px -> 2px                  414px: 52px -> 18px
 * Trocar o rótulo por ícone aliviou, mas continuava comendo a folga. Em 375px o
 * cabeçalho já carrega marca, três ícones sociais e o MENU — não há espaço para
 * um quarto bloco sem estragar o desenho original.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .link-area-associado {
    display: none;
  }
}

/* O item do menu é o inverso do botão do cabeçalho: só existe no celular. No
   desktop o botão do cabeçalho já cumpre o papel, e repetir viraria ruído. */
.item-area-associado {
  display: none;
}

@media screen and (max-width: 767px) {
  .item-area-associado {
    display: list-item;
  }
}

/* =============================================================================
 * Menu deslizante
 *
 * O tema já punha o painel fixo à direita cobrindo o cabeçalho, mas ele apenas
 * APARECIA: sem deslize, sem foco, e sem saída visível — como o painel tapa o
 * próprio botão MENU, restavam só Escape e clique fora, que ninguém adivinha.
 *
 * Toda a mecânica de abrir/fechar continua no `main.js` do tema (classe
 * `.menu-open` no painel). Aqui só entram a aparência e o movimento.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * Fundo desfocado
 *
 * Escurece e desfoca a página para o menu virar o único foco. O `backdrop-filter`
 * tem prefixo para o Safari, que ainda exige. Onde não houver suporte, sobra o
 * escurecimento — degrada sem quebrar.
 * -------------------------------------------------------------------------- */
.menu-fundo {
  position: fixed;
  inset: 0;
  z-index: 900;
  background-color: rgba(0, 5, 30, .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

body.menu-aberto .menu-fundo {
  opacity: 1;
  visibility: visible;
}

/* -----------------------------------------------------------------------------
 * O painel
 *
 * `animation` em vez de `transition` de propósito: o tema alterna o painel com
 * `display: none` -> `block !important`, e transição não roda em cima de troca
 * de `display`. Keyframe roda.
 * -------------------------------------------------------------------------- */
.nav-menu-wrapper.menu-open {
  z-index: 950;
  width: min(360px, 86vw);
  padding-top: 84px;
  box-shadow: -18px 0 48px rgba(0, 5, 30, .35);
  animation: menuEntra .34s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes menuEntra {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* -----------------------------------------------------------------------------
 * Botão de fechar
 * -------------------------------------------------------------------------- */
.menu-fechar {
  display: none;
  position: absolute;
  top: 22px;
  right: 22px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(242, 205, 0, .45);
  border-radius: 12px;
  background: transparent;
  color: var(--8);
  cursor: pointer;
  transition: all .25s ease;
}

.nav-menu-wrapper.menu-open .menu-fechar {
  display: flex;
}

.menu-fechar:hover,
.menu-fechar:focus-visible {
  background-color: var(--8);
  color: var(--4);
  transform: rotate(90deg);
}

/* -----------------------------------------------------------------------------
 * Os itens
 *
 * Entram em cascata, de cima para baixo. É o que dá a sensação de o menu ter
 * sido "montado" e não simplesmente ligado.
 * -------------------------------------------------------------------------- */
.nav-menu-wrapper.menu-open .list-item-5 {
  padding: 2px 22px;
  opacity: 0;
  animation: itemEntra .32s ease both;
}

.nav-menu-wrapper.menu-open .list-item-5:nth-child(1) { animation-delay: .10s; }
.nav-menu-wrapper.menu-open .list-item-5:nth-child(2) { animation-delay: .16s; }
.nav-menu-wrapper.menu-open .list-item-5:nth-child(3) { animation-delay: .22s; }
.nav-menu-wrapper.menu-open .list-item-5:nth-child(4) { animation-delay: .28s; }

@keyframes itemEntra {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Alinhados à esquerda: o tema empurrava para a direita, o que deixava as três
   palavras com comprimentos diferentes formando uma borda serrilhada. */
.nav-menu-wrapper.menu-open .nav-link {
  position: relative;
  display: inline-block;
  padding: 14px 4px;
  text-align: left;
  transition: color .25s ease, transform .25s ease;
}

.nav-menu-wrapper.menu-open .nav-menu {
  text-align: left;
}

/* Sublinhado que cresce da esquerda. Some quando o mouse sai, em vez de piscar
   de estado — é o que separa uma interface acabada de uma funcional. */
.nav-menu-wrapper.menu-open .nav-link::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 8px;
  height: 2px;
  background-color: var(--8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.nav-menu-wrapper.menu-open .nav-link:hover::after,
.nav-menu-wrapper.menu-open .nav-link:focus-visible::after,
.nav-menu-wrapper.menu-open .nav-link.w--current::after {
  transform: scaleX(1);
}

.nav-menu-wrapper.menu-open .nav-link:hover {
  color: var(--8);
  transform: translateX(4px);
}

/* O botão da Área do Associado não usa o sublinhado: ele já tem borda própria,
   e as duas coisas juntas viram poluição. */
.nav-menu-wrapper.menu-open .nav-link-area-associado::after {
  display: none;
}

.nav-menu-wrapper.menu-open .nav-link-area-associado:hover {
  transform: none;
}

/* Separa a conta (em cima) da navegação de conteúdo (embaixo). */
.nav-menu-wrapper.menu-open .item-area-associado {
  padding-bottom: 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

/* Quem pediu menos movimento no sistema recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
  .nav-menu-wrapper.menu-open,
  .nav-menu-wrapper.menu-open .list-item-5 {
    animation: none;
    opacity: 1;
  }

  .menu-fechar:hover {
    transform: none;
  }
}

/* -----------------------------------------------------------------------------
 * Correções de especificidade contra o tema
 *
 * O `custom.css` do tema traz `.nav-menu-wrapper.menu-open .list-item-5` e
 * `... .nav-link`, com especificidade 0-3-0. Regras de uma classe só (0-1-0)
 * perdem, e o efeito é traiçoeiro: valem com o menu FECHADO e somem quando ele
 * abre. Foi assim que a Área do Associado vazou para o menu do desktop — a
 * conferência com o menu fechado dava "escondido", e só aparecia ao abrir.
 *
 * Lição: ao conferir qualquer coisa do menu, confira com ele ABERTO.
 * -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .nav-menu-wrapper.menu-open .item-area-associado {
    display: none;
  }
}

/* O tema alinha os itens à direita, o que deixa as palavras de comprimentos
   diferentes formando uma borda serrilhada. À esquerda elas ganham um eixo
   comum e o menu fica legível de cima a baixo. */
.nav-menu-wrapper.menu-open .nav-menu,
.nav-menu-wrapper.menu-open .list-item-5,
.nav-menu-wrapper.menu-open .nav-link {
  text-align: left;
}

/* O painel nascia 72px abaixo do topo, deixando o cabeçalho à mostra. Não era o
   `top` — esse já era 0 — e sim um `margin-top: 72px` herdado, que desloca até
   elemento `position: fixed`. Zerado aqui para o painel cobrir a barra inteira,
   como pedido. */
.nav-menu-wrapper.menu-open {
  margin-top: 0;
}

/* Texto do botão da Área do Associado dentro do menu: BRANCO, explicitamente.
   Ele já vinha branco, mas por acaso — a regra `.nav-menu-wrapper.menu-open
   .nav-link` do tema (0-3-0) vencia a minha (0-1-0). Fixado com a mesma
   especificidade para não depender de sorte, e porque branco com borda amarela
   lê melhor do que amarelo sobre amarelo. */
.nav-menu-wrapper.menu-open .nav-link-area-associado {
  color: #fff;
}

.nav-menu-wrapper.menu-open .nav-link-area-associado:hover,
.nav-menu-wrapper.menu-open .nav-link-area-associado:focus-visible {
  background-color: var(--8);
  color: var(--4);
}

/* O botão MENU tem z-index 1000 e o painel nascia com 950 — ambos dentro do
   contexto de empilhamento criado por `.s-menu` (z-index 998). O botão era
   desenhado POR CIMA do painel e escondia o X de fechar. Como o painel agora
   cobre o cabeçalho de propósito, ele tem de vir na frente. */
.nav-menu-wrapper.menu-open {
  z-index: 1001;
}

/* =============================================================================
 * Oswald hospedada localmente — LGPD
 * =============================================================================
 * Antes vinha de `fonts.googleapis.com` + `ajax.googleapis.com`, o que fazia o
 * navegador do visitante contatar o Google ANTES de qualquer consentimento e
 * entregar o IP dele. IP é dado pessoal (LGPD art. 5, I), então isso é
 * tratamento sem base legal — o mesmo ponto que gerou multas sob o GDPR.
 *
 * Servida daqui, nenhuma requisição sai para terceiros. São dois arquivos
 * apenas: o Oswald v57 é fonte VARIÁVEL, então um arquivo por alfabeto cobre os
 * seis pesos (200 a 700). Só `latin` e `latin-ext` — cirílico e vietnamita não
 * servem a um site brasileiro e custariam 60% a mais de download.
 *
 * A licença permite: Oswald é SIL Open Font License.
 *
 * O `font-display: swap` é o mesmo que o Google entregava, para o texto não
 * ficar invisível enquanto a fonte carrega.
 * ========================================================================== */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('/assets/fonts/Oswald-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('/assets/fonts/Oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Botão de preferências de cookies no rodapé.
   É <button> por semântica e para não quebrar o rolagem-suave do tema, mas tem
   de parecer com os demais links do rodapé — daí zerar a aparência nativa. */
.botao-preferencias-cookies {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}

/* -----------------------------------------------------------------------------
 * Preloader
 *
 * O tema pulsava o logo com `fadeInOut 3s infinite`. O problema não é o pulso em
 * si: é que o preloader some no `window.load`, que aqui acontece em ~290ms —
 * medido — e nesse instante a animação está em ~19% de opacidade. O visitante vê
 * um logo quase invisível piscar e sumir, o que dá a impressão de espera vazia e
 * de tempo fixo, quando na verdade o site já carregou.
 *
 * Trocado por uma respiração curta que NUNCA baixa de 70% de opacidade: o logo
 * fica legível do primeiro ao último quadro, e a saída acompanha o carregamento
 * de verdade.
 * -------------------------------------------------------------------------- */
#preloader svg {
  animation: respirarLogo 1.4s ease-in-out infinite;
}

@keyframes respirarLogo {
  0%, 100% { opacity: .7; transform: scale(.985); }
  50%      { opacity: 1;  transform: scale(1); }
}

/* Quem pediu menos movimento vê o logo parado e legível. */
@media (prefers-reduced-motion: reduce) {
  #preloader svg {
    animation: none;
    opacity: 1;
  }
}

/* -----------------------------------------------------------------------------
 * Botão da Área do Associado dentro do menu (celular)
 *
 * Fica por ÚLTIMO na lista, depois de Início / Portal de Vagas / Blog, separado
 * por um filete: os três levam a conteúdo, este leva à conta.
 *
 * As regras precisam da especificidade do painel aberto (`.nav-menu-wrapper
 * .menu-open`, 0-3-0) porque o `custom.css` do tema define padding e cor para
 * `.list-item-5` e `.nav-link` nesse mesmo nível — regra de uma classe perde e
 * some justamente quando o menu abre.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .nav-menu-wrapper.menu-open .item-area-associado {
    /* Alinhado com os demais itens do menu: mesmo recuo lateral, para o botão
       não encostar nas bordas do painel — que era a queixa. */
    padding: 0 22px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 0;
  }

  .nav-menu-wrapper.menu-open .nav-link-area-associado {
    display: block;
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--8);
    border-radius: 14px;
    background-color: transparent;
    color: #fff;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    transition: background-color .25s ease, color .25s ease;
  }

  .nav-menu-wrapper.menu-open .nav-link-area-associado:hover,
  .nav-menu-wrapper.menu-open .nav-link-area-associado:focus-visible {
    background-color: var(--8);
    color: var(--4);
    transform: none;
  }
}

/* =============================================================================
 * Micro-interações
 *
 * Regra que guia tudo aqui: movimento serve para dizer alguma coisa. Cada efeito
 * abaixo responde a uma pergunta do visitante — "isso é clicável?", "vai abrir?",
 * "vai me tirar do site?". Movimento decorativo não entra.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * Cards da equipe
 * -------------------------------------------------------------------------- */

/* O fundo era um cinza-lavanda (216,220,226) que não pertence à paleta da marca.
   Trocado pelo azul da marca com opacidade baixa: mesma leveza, mas agora a cor
   é da UNEDI. Sobe um pouco no hover, o que já sinaliza que o card responde. */
/* Seletor com a mesma especificidade do tema (0-3-0): o `custom.css` traz
   `.s-equipe .div-block-297 .features-card-outline-copy` com o cinza-lavanda, e
   uma regra de uma classe só perderia — silenciosamente. */
.s-equipe .div-block-297 .features-card-outline-copy {
  background-color: rgba(0, 24, 113, .06);
  transition: background-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.s-equipe .div-block-297 .features-card-outline-copy:hover {
  background-color: rgba(0, 24, 113, .10);
  box-shadow: 0 14px 34px rgba(0, 24, 113, .13);
}

/* A foto cresce DENTRO do espaço dela: o recorte fica parado e só a imagem
   escala. Sem o `overflow: hidden` no pai, ela invadiria o card vizinho. */
.features-card-outline-copy > div:first-child {
  overflow: hidden;
  border-radius: 8px;
}

.features-card-outline-copy .image-10 {
  display: block;
  width: 100%;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  /* SEM `will-change: transform` aqui. Ele cria contexto de empilhamento, e a
     foto passava a ser pintada POR CIMA da tag de cargo (PRESIDENTE,
     VICE-PRESIDENTE), que se sobrepõe à imagem por um `margin-top: -40px`. O
     resultado era a tag cortada, aparecendo só uma tira amarela. O ganho de
     desempenho não pagava o defeito. */
}

/* A tag de cargo sobe sobre a foto por margem negativa. Sem posicionamento
   próprio ela depende da ordem natural de pintura, que qualquer contexto de
   empilhamento novo derruba. Fixada acima da imagem de forma explícita. */
.features-card-outline-copy .margin-bottom-08 {
  position: relative;
  z-index: 2;
}

.features-card-outline-copy:hover .image-10 {
  transform: scale(1.06);
}

/* O "+" gira ao passar o mouse, antes mesmo do clique: é a dica de que aquilo
   abre. Ao abrir, completa para 45° e vira um "x" — o mesmo símbolo conta as
   duas histórias. */
.faq-question {
  cursor: pointer;
}

/* O "+" são DUAS barras: `.faq-plus` (horizontal, 100%x3px) e `.faq-plus-l`
   (vertical, 3px x100%, absoluta). Elas só formam um "+" enquanto estiverem em
   esquadro uma com a outra.

   Minha primeira versão girava cada barra por conta própria — 15° no hover numa,
   45° no ativo na outra. Elas saíam de esquadro e o ícone virava um risco
   torto, que foi o que o Higor viu no print.

   O certo é girar o CONJUNTO (`.faq-plus-wrap`): as barras mantêm a relação de
   90° entre si, e o "+" vira um "×" limpo aos 45°. */
.faq-plus-wrap {
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.faq-question:hover .faq-plus-wrap {
  transform: rotate(15deg);
}

.faq-wrap.active .faq-plus-wrap {
  transform: rotate(45deg);
}

/* O tema gira SÓ a barra horizontal em 90° quando abre, o que a sobrepõe à
   vertical e transforma o ícone num traço único. Zerado aqui para o giro do
   conjunto valer. */
.faq-wrap.active .faq-plus {
  transform: none;
}

/* Abertura suave de verdade.
   O tema fazia `max-height: 0 -> 2000px`: como a altura real é bem menor que
   2000px, a maior parte da transição é gasta animando espaço vazio, e a abertura
   parece travar no fim. O `main.js` já calcula o `scrollHeight` e escreve o
   valor exato no elemento — então basta uma curva mais longa e um desvanecer
   junto para o conteúdo não aparecer de supetão. */
.faq-answer {
  transition: max-height .45s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
  opacity: 0;
}

.faq-wrap.active .faq-answer {
  opacity: 1;
}

/* -----------------------------------------------------------------------------
 * Blocos de logo — Parcerias e Associados
 * -------------------------------------------------------------------------- */
/* ATENÇÃO À MARCAÇÃO: `f-logo-block` está no <div> externo E no <a> interno.
   São dois elementos com a mesma classe, aninhados. O cinza do tema era opaco,
   então o de dentro cobria o de fora e ninguém via. Com cor semitransparente as
   duas se SOMAM e aparece um quadrado dentro do outro — foi exatamente o que
   aconteceu na primeira versão.

   Solução: o fundo fica no <div> EXTERNO e o <a> fica transparente. Medido:
   externo 165x116, interno 120x96 — como no tema os dois eram do mesmo cinza
   opaco, o que se enxergava era o externo. Tingir só o interno encolheria o
   quadradinho visível. */
.f-logo-block.w-dyn-item {
  background-color: rgba(0, 24, 113, .05);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1),
              box-shadow .35s ease, background-color .35s ease;
}

a.f-logo-block {
  background-color: transparent;
}

.f-logo-block.w-dyn-item:hover {
  transform: translateY(-4px) scale(1.03);
  background-color: rgba(0, 24, 113, .09);
  box-shadow: 0 12px 28px rgba(0, 24, 113, .14);
}

.f-logo-block img {
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.f-logo-block:hover img {
  transform: scale(1.04);
}

/* -----------------------------------------------------------------------------
 * Cursor de link externo
 *
 * Estes blocos abrem outro site. O aviso disso costuma ser um ícone fixo no
 * canto, que ninguém vê. Aqui o próprio cursor vira uma bolinha com uma seta
 * saindo — a informação aparece exatamente onde o olho já está.
 *
 * A bolinha é `pointer-events: none` para nunca roubar o clique, e vive fora do
 * fluxo. Some sozinha ao sair do bloco.
 * -------------------------------------------------------------------------- */
.cursor-externo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background-color: var(--4);
  color: var(--8);
  pointer-events: none;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.cursor-externo.visivel {
  opacity: 1;
  transform: scale(1);
}

/* A seta sai um pouco para fora ao entrar, reforçando "vai abrir noutro lugar". */
.cursor-externo svg {
  transition: transform .35s cubic-bezier(.22, .61, .36, 1) .05s;
  transform: translate(-2px, 2px);
}

.cursor-externo.visivel svg {
  transform: translate(0, 0);
}

/* Some o cursor do sistema enquanto a bolinha está no lugar dele. */
.f-logo-block a:hover {
  cursor: none;
}

/* Nada disso em toque: não há cursor para substituir, e as transformações só
   atrapalhariam a rolagem. */
@media (hover: none) {
  .cursor-externo { display: none; }
  .f-logo-block:hover { transform: none; box-shadow: none; }
  .f-logo-block a:hover { cursor: pointer; }
}

@media (prefers-reduced-motion: reduce) {
  .features-card-outline-copy,
  .features-card-outline-copy .image-10,
  .f-logo-block,
  .f-logo-block img,
  .cursor-externo,
  .cursor-externo svg {
    transition: none;
  }
  .features-card-outline-copy:hover .image-10,
  .f-logo-block:hover,
  .f-logo-block:hover img {
    transform: none;
  }
}

/* -----------------------------------------------------------------------------
 * Formulário de contato — agrupar na vertical
 *
 * Medido: cada bloco de campo tem 80px de altura e 40px de margem embaixo. Ou
 * seja, metade da altura de um campo vira espaço vazio entre um e outro, e o
 * formulário se espalha até parecer que os campos não pertencem ao mesmo grupo.
 *
 * Reduzido para 22px. Rótulo e campo continuam colados entre si, então a
 * proximidade agrupa o que é do mesmo assunto e separa o que não é — que é o
 * que faz um formulário parecer organizado.
 * -------------------------------------------------------------------------- */
.f-contact-form .f-margin-bottom-76 {
  margin-bottom: 22px;
}

/* O aceite fica um pouco mais distante do último campo: ele não é campo, é
   decisão. E mais perto do botão, porque um depende do outro. */
.f-contact-form .f-margin-bottom-79 {
  margin-bottom: 20px;
}

/* -----------------------------------------------------------------------------
 * Paginação do blog
 *
 * Três ajustes pedidos: cantos totalmente redondos, selecionado no AZUL da marca
 * em vez do amarelo, e o botão "Início do site" fora (removido da marcação, nas
 * três páginas que o traziam).
 *
 * O azul no selecionado não é só gosto: o amarelo é a cor de AÇÃO neste site
 * (botão MENU, "Associe-se Agora", "Aceitar todos"). Usá-lo para marcar estado
 * fazia a página atual parecer clicável — justamente o único número que não é.
 * -------------------------------------------------------------------------- */
.pagination-btn,
.pagination-number {
  border-radius: 999px;
}

/* `999px` e não `50%`: em elemento mais largo que alto, `50%` vira elipse. O
   valor alto satura no menor lado e dá a cápsula perfeita nos dois casos —
   botão retangular e número quadrado. */

.pagination-current,
.pagination-current:hover {
  background-color: var(--4);
  border-color: var(--4);
  color: #fff;
}

/* =============================================================================
 * Cabeçalho fixo com fundo de vidro ao rolar
 *
 * POR QUE `sticky` E NÃO `fixed`
 *
 * `fixed` tira o elemento do fluxo, e a página inteira sobe os 72px que o
 * cabeçalho ocupava — um salto visível no instante em que ele gruda. O conserto
 * usual é um espaçador da mesma altura, que só funciona enquanto ninguém mexer
 * na altura do cabeçalho. `sticky` mantém o elemento no fluxo: sem salto, sem
 * espaçador, e a altura continua sendo a de sempre.
 *
 * Conferido antes de aplicar: nenhum ancestral tem `overflow` diferente de
 * `visible`, que é o que costuma quebrar `sticky` em silêncio.
 *
 * O TAMANHO NÃO MUDA. `sticky` não altera o modelo de caixa, e nada aqui toca em
 * altura, padding ou fonte — só cor de fundo, desfoque e sombra. Era o requisito.
 * ========================================================================== */
.s-menu {
  position: sticky;
  top: 0;
  transition: background-color .32s ease, box-shadow .32s ease,
              -webkit-backdrop-filter .32s ease, backdrop-filter .32s ease;
}

/* Vidro branco. A opacidade em 0,72 deixa o conteúdo passar por baixo o
   suficiente para o efeito existir, sem comprometer a leitura do menu. A
   `saturate` compensa a lavagem de cor que o desfoque provoca — sem ela o
   amarelo do MENU perde força atrás do vidro. */
.s-menu.rolou {
  background-color: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 6px 24px rgba(0, 24, 113, .09);
}

/* Onde não houver `backdrop-filter`, o vidro vira um branco quase sólido: sem
   isso o menu ficaria semitransparente sobre o conteúdo, e ilegível. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .s-menu.rolou {
    background-color: rgba(255, 255, 255, .96);
  }
}

/* Com o menu aberto o painel cobre o cabeçalho; o vidro por baixo só somaria
   ruído. */
body.menu-aberto .s-menu.rolou {
  box-shadow: none;
}

/* -----------------------------------------------------------------------------
 * Cabeçalho no celular: espaçamento simétrico
 *
 * Medido em 375px: 10px de folga acima do conteúdo e 20px abaixo. O padding do
 * container é simétrico (10/10), mas a caixa tem 72px de altura fixa e o
 * conteúdo só 42px — a sobra de 10px cai toda embaixo, porque o conteúdo é
 * alinhado ao topo.
 *
 * 15/15 centra o conteúdo e mantém EXATAMENTE os mesmos 72px: 42 + 15 + 15 = 72.
 * Nada de altura muda, só a distribuição.
 *
 * Só no celular, como pedido — no desktop a folga já estava correta.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .navbar-no-shadow-container {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

/* -----------------------------------------------------------------------------
 * Busca do site
 *
 * Uma barra só, usada em todos os lugares. Padronizar aqui padroniza o site
 * inteiro por construção — não depende de alguém repetir o ajuste.
 *
 * O botão perdeu a palavra "Buscar" e virou lupa: o texto duplicava o que o
 * campo já diz no placeholder, e ocupava metade da largura da barra.
 * -------------------------------------------------------------------------- */
.busca-site {
  position: relative;
}

.busca-form {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 18px;
  border: 1px solid rgba(0, 24, 113, .12);
  border-radius: 999px;
  background-color: rgba(0, 24, 113, .04);
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.busca-form:focus-within {
  border-color: var(--4);
  background-color: #fff;
  box-shadow: 0 6px 20px rgba(0, 24, 113, .10);
}

/* Altura maior, como pedido: 52px de campo dá respiro e alvo de toque
   confortável (o mínimo recomendado é 44px). */
.busca-campo {
  flex: 1 1 auto;
  height: 52px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--4);
  font-size: 16px;
}

.busca-campo::placeholder {
  color: rgba(0, 24, 113, .45);
}

.busca-campo:focus {
  outline: none;
}

/* Some o "x" que o Safari e o Chrome desenham no `type=search`: ele briga
   visualmente com a lupa logo ao lado. */
.busca-campo::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.busca-botao {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--4);
  color: var(--8);
  cursor: pointer;
  transition: background-color .25s ease, transform .25s ease;
}

.busca-botao:hover,
.busca-botao:focus-visible {
  background-color: var(--5);
  transform: scale(1.06);
}

/* -----------------------------------------------------------------------------
 * Resultados
 * -------------------------------------------------------------------------- */
.busca-resultados {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  margin-top: 8px;
  max-height: 420px;
  overflow-y: auto;
  border-radius: 18px;
  background-color: #fff;
  box-shadow: 0 18px 44px rgba(0, 24, 113, .16);
}

.busca-aviso {
  padding: 20px;
  color: rgba(0, 24, 113, .65);
  font-size: 15px;
}

.busca-item {
  display: block;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(0, 24, 113, .07);
  text-decoration: none;
  transition: background-color .2s ease;
}

.busca-item:last-child {
  border-bottom: 0;
}

.busca-item:hover,
.busca-item:focus-visible {
  background-color: rgba(0, 24, 113, .05);
}

/* O rótulo do tipo é o que faz uma busca de site inteira funcionar: sem ele o
   visitante não sabe se está indo para um post, uma página ou um associado. */
.busca-tipo {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: rgba(0, 24, 113, .08);
  color: var(--4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.busca-titulo {
  display: block;
  color: var(--4);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.busca-resumo {
  display: block;
  margin-top: 3px;
  color: rgba(0, 24, 113, .6);
  font-size: 13px;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .busca-form, .busca-botao, .busca-item { transition: none; }
  .busca-botao:hover { transform: none; }
}

/* A janela do carrossel é criada pelo `main.js` em volta da máscara. Recorta os
   slides SEM recortar as setas, que ficam fora dela — era o que acontecia quando
   o `overflow: hidden` estava no `.slider-horizontal`: as setas apareciam
   cortadas pela metade. */
.slider-janela {
  overflow: hidden;
  border-radius: inherit;
}

/* -----------------------------------------------------------------------------
 * Logo sem link externo (2026-08-17)
 *
 * Com o fim das páginas de associado e parceria, o logo virou o único caminho
 * para a empresa. Quem não tem link externo cadastrado não vira âncora — antes
 * saía `href="#"`, que parece clicável e não faz nada. Aqui só se tira o efeito
 * de hover, senão o bloco continuaria se levantando e prometendo clique.
 * Hoje são 7: 5 associados e 2 parcerias.
 * -------------------------------------------------------------------------- */
.f-logo-block.w-dyn-item:has(> .sem-link):hover {
  transform: none;
  box-shadow: none;
  background-color: rgba(0, 24, 113, .05);
}

.f-logo-block .sem-link {
  cursor: default;
}

.f-logo-block:hover .sem-link img {
  transform: none;
}

/* -----------------------------------------------------------------------------
 * Páginas de documento longo (Política de Privacidade) — 2026-08-18
 *
 * O template do WordPress serve post de blog: título de seção em 32px/700,
 * corpo em 14px com entrelinha 20 e coluna de 930px. Num texto jurídico isso dá
 * ~140 caracteres por linha (o confortável é 65-75), títulos que gritam mais que
 * o conteúdo e nenhuma separação entre seções. Aqui o mesmo template ganha
 * tipografia de leitura: coluna estreita, corpo maior, entrelinha solta,
 * hierarquia pelo espaço e não pelo tamanho.
 * -------------------------------------------------------------------------- */
.pagina-documento .page-content-inner {
  /* Medida fixa, não `ch`: nesta fonte o glifo "0" é largo e 68ch resolvia para
     1054px — ou seja, não limitava nada. 680px com corpo de 17px dá ~70
     caracteres por linha, que é a faixa confortável de leitura. */
  max-width: 680px;
  margin-inline: auto;
  color: #3c4358;
  font-size: 17px;
  line-height: 1.75;
}

.pagina-documento .page-content-inner > p {
  margin: 0 0 1.15em;
  font-size: inherit;
  line-height: inherit;
}

/* Título de seção: menor e mais leve que o do tema, mas com muito ar em cima —
   é o espaço que cria a hierarquia, não o corpo da fonte. O filete reforça a
   divisão sem pesar. */
.pagina-documento .page-content-inner h2 {
  margin: 2.75em 0 0.75em;
  padding-top: 1.5em;
  border-top: 1px solid rgba(0, 24, 113, .12);
  color: #001871;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.pagina-documento .page-content-inner h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.pagina-documento .page-content-inner h3 {
  margin: 2em 0 0.5em;
  color: #2b5596;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

.pagina-documento .page-content-inner ul {
  margin: 0 0 1.15em;
  padding-left: 1.35em;
  list-style: disc;
}

.pagina-documento .page-content-inner li {
  margin-bottom: 0.5em;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.pagina-documento .page-content-inner li::marker {
  color: rgba(0, 24, 113, .45);
}

/* Negrito é usado o tempo todo neste texto (rótulos de item). Em 700 a página
   vira um borrão; 600 destaca sem manchar. */
.pagina-documento .page-content-inner strong {
  color: #001871;
  font-weight: 600;
}

.pagina-documento .page-content-inner a {
  color: #2b5596;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 767px) {
  .pagina-documento .page-content-inner {
    font-size: 16px;
  }

  .pagina-documento .page-content-inner h2 {
    margin-top: 2.25em;
    font-size: 20px;
  }
}

/* -----------------------------------------------------------------------------
 * Banner de cookies: azul mais escuro que o rodapé (2026-08-18)
 *
 * O banner nascia em rgba(0, 24, 113, .95) e o rodapé é #001871 — a MESMA cor.
 * Quando o visitante rolava até o fim, o banner desaparecia dentro do rodapé.
 * Agora ele é visivelmente mais escuro, com um fio de borda clara para separar
 * mesmo quando os dois se encontram.
 *
 * A regra vive aqui, e não em `src/html/`, porque aquele CSS está embutido nos
 * arquivos GERADOS (`layout-rodape.html` e `home-parte-4.html`) e evaporaria na
 * próxima regeração. `body #cookie-banner` tem especificidade maior que o
 * `#cookie-banner` embutido, então vence sem `!important`.
 * -------------------------------------------------------------------------- */
body #cookie-banner {
  background-color: #000d33;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
}

/* -----------------------------------------------------------------------------
 * Pé do painel de menu: Política de Privacidade (2026-08-18)
 *
 * Fica colada no fim do painel, separada dos itens de navegação por um fio —
 * não é destino de navegação, é link legal. Discreta de propósito: presente
 * para quem procura, sem competir com Início/Vagas/Blog/Contato.
 * -------------------------------------------------------------------------- */
/* Para o link legal descer até o fim, o painel vira coluna flex — mas SÓ quando
   aberto; mexer nele fechado arriscaria o desenho original do tema.
   O `!important` é obrigatório aqui, não preguiça: o `custom.css` do tema traz
   `.nav-menu-wrapper.menu-open { display: block !important }`, e sem igualar a
   arma o painel continua block e o `margin-top:auto` não empurra nada. */
.nav-menu-wrapper.menu-open {
  display: flex !important;
  flex-direction: column;
}

.nav-menu-wrapper .menu-rodape {
  margin-top: auto;
  /* 22px de recuo à esquerda para bater com os itens do menu — medido: eles
     começam a 22px da borda do painel, e este bloco estava colado em 0. */
  padding: 22px 22px 4px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.nav-menu-wrapper .menu-rodape a {
  font-size: 14px;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color .2s ease;
}

.nav-menu-wrapper .menu-rodape a:hover,
.nav-menu-wrapper .menu-rodape a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -----------------------------------------------------------------------------
 * Acabamento do rodapé (2026-08-18)
 *
 * Dois defeitos medidos: 60px de padding embaixo deixavam a última linha
 * flutuando no meio de um vazio, e "Preferências de cookies" / "Política de
 * Privacidade" estavam em 12px contra os 10px do copyright ao lado — três
 * tamanhos na mesma linha.
 *
 * O tema define `.s-footer { padding: 60px 5% }`; aqui só o de baixo encolhe,
 * porque o respiro de cima entre o conteúdo e o rodapé continua fazendo falta.
 * -------------------------------------------------------------------------- */
.s-footer {
  padding-bottom: 26px;
}

.s-footer .f-footer-menu a,
.s-footer .f-footer-menu .text-block,
.s-footer .f-footer-menu .f-footer-link {
  font-size: 10px;
  line-height: 1.4;
  /* Cada item tinha largura fixa de 161px, e "Preferências de cookies" quebrava
     em duas linhas dentro dela — o que engordava a faixa inteira. Sem largura
     fixa e sem quebra, os dois ficam numa linha só, alinhados ao copyright. */
  width: auto;
  white-space: nowrap;
}