/* =========================================================================
   Filimartis / Fortisagro — layout, componentes, movimento e responsividade
   ========================================================================= */

/* ---------- Acessibilidade ---------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 3000;
  padding: 10px 16px;
  background: var(--surface-dark);
  color: #fff;
  border-radius: var(--radius-sm);
}
.skip-link:focus { clip: auto !important; width: auto; height: auto; margin: 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-yellow);
  outline-offset: 3px;
  border-radius: 5px;
}

/* ---------- Barra "Conteúdo em revisão" ---------- */
.review-bar {
  position: relative;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px 16px;
  font-size: .82rem;
  line-height: 1.4;
  text-align: center;
  color: var(--text-strong);
  background: #fff6d6;
  border-bottom: 1px solid #f0dc9a;
}
.review-bar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-yellow); flex: none; }

/* =========================================================================
   Cabeçalho — sobreposto ao hero, vira superfície sólida ao rolar
   ========================================================================= */
.site-header {
  position: absolute;
  left: 0; right: 0;
  top: var(--review-bar-h, 0px);
  z-index: 1000;
  color: #fff;
  background: linear-gradient(180deg,
      rgba(9, 18, 25, .82) 0%,
      rgba(9, 18, 25, .42) 52%,
      rgba(9, 18, 25, 0) 100%);
  opacity: 1;
  transform: translateY(0);
  /* Duração "de saída" (retorno ao topo) — mais breve, ~300ms. A troca
     para .is-scrolled usa a duração "de entrada" definida ali (~600ms);
     como a propriedade CSS "transition" usada é sempre a do estado NOVO
     após a mudança, cada sentido acaba com seu próprio tempo. */
  transition: background-color .3s cubic-bezier(.2, .7, .2, 1),
              box-shadow .3s cubic-bezier(.2, .7, .2, 1),
              backdrop-filter .3s cubic-bezier(.2, .7, .2, 1),
              opacity .3s cubic-bezier(.2, .7, .2, 1),
              transform .3s cubic-bezier(.2, .7, .2, 1);
}
.admin-bar .site-header { top: calc(var(--review-bar-h, 0px) + 32px); }
@media (max-width: 782px) { .admin-bar .site-header { top: calc(var(--review-bar-h, 0px) + 46px); } }

.site-header.is-scrolled {
  position: fixed;
  /* Deslocamento medido ao vivo (getBoundingClientRect, nunca uma soma de
     alturas fixas) — ver updateHeaderFixedOffset() em main.js: é a MAIOR
     borda inferior, entre o aviso "Conteúdo em revisão" e a barra
     administrativa do WordPress, ainda ocupando espaço na tela agora.
     Cobre sozinho tanto "aviso rolou para fora, some o espaço dele"
     quanto "a barra administrativa só é fixa de verdade a partir de
     601px — num celular ela também rola para fora, então também não
     pode ser somada como se fosse permanente". */
  top: var(--header-fixed-offset, 0px);
  /* Sólido de verdade (não só quase-sólido): um fundo translúcido com
     desfoque aqui, mesmo a 95%, deixa o que está atrás "vazar" borrado —
     bem visível bem no início da página, onde a curva de transição entre
     o hero e a primeira seção passa por baixo do cabeçalho fixo assim que
     ele vira sólido, misturando as cores da curva com o desfoque numa
     linha visível. Fundo 100% opaco cobre por completo, sem misturar —
     mesmo efeito "flutuante" pretendido, sem esse rastro. */
  background: #0b161e;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 12px 30px rgba(0, 0, 0, .3);
  /* Duração "de entrada" — mais perceptível, ~600ms, desacelerando até
     parar (mesma curva de .site-header, sem rebote). Opacidade e
     deslocamento correm juntos, com a mesma duração e curva, então um
     não fica para trás nem termina antes do outro. A MESMA duração/curva
     serve para a saída (.is-leaving, abaixo) — é a troca de valor de
     opacity/transform que muda de sentido, não a transição em si. */
  transition: background-color .6s cubic-bezier(.2, .7, .2, 1),
              box-shadow .6s cubic-bezier(.2, .7, .2, 1),
              opacity .6s cubic-bezier(.2, .7, .2, 1),
              transform .6s cubic-bezier(.2, .7, .2, 1);
}
/* Estado de partida forçado pelo JS um instante antes de .is-scrolled
   assentar (ver setupHeader() em main.js): sem isto, a transição de
   opacity/transform não teria de onde partir, pois os dois já valem
   1/0 por padrão em .site-header. Nunca aplicado com prefers-reduced-
   motion, com o menu mobile aberto, nem com foco dentro do cabeçalho
   (o JS decide isso). */
.site-header.is-scrolled.is-entering {
  opacity: 0;
  transform: translateY(-20px);
  transition: none;
}
/* Saída suave (voltando pro topo/hero): ainda fixo (mesma posição, mesmo
   "position") enquanto desliza pra cima e esmaece — só depois que essa
   transição termina de verdade (ver leaveTimer em main.js) é que
   .is-scrolled sai e o cabeçalho volta a ser a versão solta sobre o hero.
   Isso evita trocar "position" (fixed → absolute) no meio da animação,
   que interromperia o movimento e causaria um salto. */
.site-header.is-scrolled.is-leaving {
  opacity: 0;
  transform: translateY(-20px);
}
/* Nenhum quadro da entrada/saída pode cobrir o aviso nem a barra
   administrativa: ".is-near-fixed-bar" (JS liga/desliga a cada rolagem,
   junto com --header-fixed-offset) marca que um dos dois ainda ocupa
   espaço na tela agora. Nesse caso, o deslizamento vertical (-20px) fica
   suspenso — o cabeçalho só esmaece no lugar, sem subir — porque ele já
   nasce ENCOSTADO na borda inferior do que precisa evitar (top: acima);
   qualquer deslizamento pra cima, por menor que seja, entraria nesse
   espaço. Assim que o aviso/barra saem de vista (offset chega a 0), o
   deslizamento volta a valer por inteiro — não há mais nada para cobrir.
   Repare que só "transform" é redeclarado aqui, não a lista inteira de
   "transition" — a opacidade continua com sua própria transição de
   600ms normalmente; só o deslocamento vertical passa a mudar na hora
   (sem entrar na lista de propriedades animadas), então o cabeçalho não
   ultrapassa essa posição segura em NENHUM quadro intermediário — não é
   só o valor final que fica seguro, é o percurso inteiro. */
/* Estado de PARTIDA da entrada com a proteção ligada: só cancela o
   deslocamento — continua sem transição (opacidade 0 já vem de
   .is-entering). Antes (até a 1.6.1) esta regra era a mesma da saída e
   declarava "transition: opacity .6s"; por ser mais específica que
   .is-entering, ela anulava o "transition: none" do estado de partida: a
   opacidade começava a CAIR de 1 para 0 em vez de partir de 0, e dois
   quadros depois voltava para 1 — na prática o cabeçalho surgia de golpe.
   Acontecia sempre que a barra administrativa (logado, telas >= 601px) ou
   o aviso ainda ocupavam o topo no instante da entrada. */
.site-header.is-scrolled.is-entering.is-near-fixed-bar {
  transform: translateY(0);
  transition: none;
}
/* Percurso (entrada depois de .is-entering sair, e saída) com a proteção
   ligada: só a opacidade anima, 600ms, mesma curva; o deslocamento fica em
   0 durante todo o trajeto. */
.site-header.is-scrolled.is-near-fixed-bar,
.site-header.is-scrolled.is-leaving.is-near-fixed-bar {
  transform: translateY(0);
  transition: background-color .6s cubic-bezier(.2, .7, .2, 1),
              box-shadow .6s cubic-bezier(.2, .7, .2, 1),
              opacity .6s cubic-bezier(.2, .7, .2, 1);
}
/* Reaparecimento (curto, ~300ms — já definido na regra base de
   .site-header) do cabeçalho solto sobre o hero, depois que a saída acima
   termina. Mesma técnica de .is-entering, espelhada: estado de partida
   forçado (opacidade 0, sem transição) só no instante em que o JS troca
   de "fixed" para "absolute" — sem isto, o cabeçalho apareceria de golpe
   (opacity 1 no primeiro quadro), em vez de esmaecer de volta. */
.site-header.is-returning {
  opacity: 0;
  transform: translateY(-20px);
  transition: none;
}
/* Mesma proteção do bloco ".is-near-fixed-bar" acima, agora para o
   reaparecimento: se o aviso/barra administrativa ainda ocupam espaço no
   topo bem no instante em que o cabeçalho solto (position:absolute)
   está reaparecendo, o deslizamento também fica suspenso aqui — só a
   opacidade anima (mesma duração de ~300ms já definida na regra base de
   .site-header). */
/* Mesmo cuidado da entrada: o estado de partida do reaparecimento continua
   SEM transição (só o deslocamento é cancelado); o esmaecimento de ~300ms
   vem da regra base de .site-header assim que .is-returning sai. */
.site-header.is-returning.is-near-fixed-bar {
  transform: translateY(0);
  transition: none;
}
.site-header.has-open-menu { background: #0d1922; }

/* páginas internas não têm hero atrás → superfície sólida desde o início.
   Fixo desde o carregamento (não passa pelo estado .is-scrolled), então
   precisa do mesmo deslocamento medido ao vivo, não da altura total. */
body:not(.home) .site-header {
  position: fixed;
  top: var(--header-fixed-offset, 0px);
  background: #0b161e;
}

.site-header__inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Marca (símbolo + nome) direto sobre o cabeçalho, sem caixa de apoio —
   a legibilidade vem do gradiente escuro do próprio .site-header (no
   topo) e do fundo sólido em .is-scrolled, não de um retângulo branco
   atrás da marca. As duas peças mantêm a proporção própria de cada
   arquivo (largura em "auto", altura fixa por peça); o símbolo é um
   pouco mais alto que o nome porque essa é a proporção real entre os
   dois no desenho original — não são forçados à mesma altura. */
.site-brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.site-brand__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.site-brand__symbol,
.site-brand__name {
  display: block;
  width: auto;
  object-fit: contain;
}
.site-brand__symbol { height: 40px; }  /* +25% sobre os 32px anteriores */
.site-brand__name { height: 32.5px; }  /* +25% sobre os 26px anteriores — mesma proporção entre as peças */
@media (max-width: 560px) {
  .site-brand__chip { gap: 8px; }
  .site-brand__symbol { height: 30.7px; }  /* +18% sobre os 26px anteriores (dentro da faixa de 15–20% pedida) */
  .site-brand__name { height: 24.8px; }    /* +18% sobre os 21px anteriores */
}

/* ---------- Navegação ---------- */
.site-nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
.site-nav__menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  margin: 0;
  padding: 0;
}
.site-nav__menu a {
  position: relative;
  font-family: var(--font-head);
  font-size: .93rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  padding: 6px 1px;
  white-space: nowrap;
}
.site-nav__menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--brand-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.site-nav__menu a:hover::after,
.site-nav__menu a:focus-visible::after,
.site-nav__menu a.is-current-section::after { transform: scaleX(1); }
/* Propositalmente NÃO existe regra para .current-menu-item/.current_page_item
   aqui. Os itens deste menu são âncoras (#empresa, #atuacao...) para seções
   da MESMA página — o WordPress marca esses links como "current" sempre que
   o visitante está na página inicial, não importa qual seção esteja visível
   (confirmado lendo _wp_menu_item_classes_by_context() em
   wp-includes/nav-menu-template.php: para um item de menu "custom" com URL
   "/#empresa", o trecho antes do "#" — "/" — normaliza para a própria URL
   da Home depois de untrailingslashit(); como isso é comparado com a URL
   atual sem considerar QUAL seção está na tela, os 5 itens batem ao mesmo
   tempo e ficam "current" juntos assim que a Home carrega — reproduzido e
   confirmado com os links exatos usados na Hostinger, "/#ancora"). Usar essa
   classe para sublinhar deixaria o menu inteiro permanentemente marcado,
   como se tudo estivesse selecionado. A classe ".is-current-section" abaixo
   é aplicada por JavaScript (ver main.js, setupNavScrollSpy) só no item cuja
   seção está de fato visível — sem JavaScript, nenhum item fica marcado. */

.menu-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--radius-sm);
  background: rgba(9, 18, 25, .25);
  cursor: pointer;
  padding: 0;
  color: #fff;
}
.menu-toggle__bars { display: block; width: 20px; margin: 0 auto; }
.menu-toggle__bars span {
  display: block;
  width: 100%; height: 2px;
  margin: 4px 0;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =========================================================================
   Conteúdo / seções
   ========================================================================= */
.site-main { display: block; }
body:not(.home) .site-main { padding-top: var(--header-height); }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }

/* Coluna de conteúdo — largura e recuo consistentes, alinhada à esquerda */
.fx-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.entry-content > .wp-block-group.alignfull,
.entry-content > .wp-block-cover.alignfull,
.entry-content .fx-section,
.entry-content .fx-hero { margin-block: 0; }

/* seções são contextos de posicionamento para as curvas de transição */
.fx-section, .fx-hero { position: relative; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-green);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 26px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-green) 0 46%, var(--brand-yellow) 46% 100%);
}
.fx-section--dark .eyebrow { color: #d7f0e2; }

.fx-lead {
  font-size: clamp(1.08rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 60ch;
}
.fx-section--dark .fx-lead { color: rgba(232, 238, 242, .88); }

.fx-inner > p:not(.fx-lead):not(.eyebrow),
.fx-inner > :is(h2, h3) { max-width: 62ch; }

/* Faixas de fundo */
.fx-section--muted { background: var(--surface-muted); }
.fx-section--dark {
  background: var(--surface-dark);
  color: var(--text-on-dark);
}
.fx-section--dark :is(h1, h2, h3, h4) { color: #fff; }

/* ---------- Curvas de transição (inspiradas nas faixas do logo) ----------
   Usadas com moderação: só onde o fundo muda de claro para escuro. */
/* ---------- Divisor entre seções (substitui a curva antiga) ----------
   Elemento próprio, em fluxo normal — nunca sobreposto às seções vizinhas.
   Reserva sua própria altura fixa, então nunca cobre texto e nunca deixa
   frestas: o fundo do divisor é a cor da seção ANTERIOR e o traçado (SVG)
   é a cor da seção SEGUINTE, cobrindo 100% da largura em toda a altura. */
.fx-seam {
  display: block;
  width: 100%;
  height: clamp(34px, 4.5vw, 60px);
  line-height: 0;
  overflow: hidden;
  /* O SVG interno é composto como camada própria numa posição vertical
     fracionária (acumulada pelos paddings em vw/clamp() das seções
     acima). Ao compor essa camada sobre a página, o traço do
     preenchimento pode ficar com uma linha de antialiasing na borda
     inferior — mesmo a cor sendo idêntica à da seção seguinte. Uma
     sobreposição de 2px (a seção seguinte é desenhada por cima, com um
     fundo sólido, sem vetor, exatamente da mesma cor) funde essa borda
     e some com a fresta. O divisor mantém sua própria altura reservada;
     só a junção entre as duas superfícies decorativas é ajustada — não
     há remoção de borda nem margem negativa em conteúdo. */
  margin-bottom: -2px;
}
.fx-seam svg { display: block; width: 100%; height: 100%; }

/* Cores automáticas, pelas seções vizinhas de verdade — não por uma
   classe escolhida à mão (fx-seam--dark-to-light / --muted-to-dark,
   descontinuadas: mantidas abaixo só como respaldo de navegadores sem
   :has()). Arrastar a divisória para outro lugar no editor, reordenar
   ou apagar uma seção ao lado dela nunca deixa a cor errada: o fundo
   do próprio .fx-seam sempre acompanha a seção ANTERIOR de verdade
   (seletor de irmão "+"), e o preenchimento do SVG sempre acompanha a
   seção SEGUINTE de verdade (:has(+ ...) — suportado por todos os
   navegadores atuais; onde não for, vale o respaldo logo abaixo).

   Duas formas de uma seção ser reconhecida como "escura" ou
   "alternada": a classe própria do tema (fx-section--dark /
   fx-section--muted, usada pelos padrões prontos) OU a cor de fundo
   nativa do editor de blocos, quando o editor escolhe uma das cores
   "Superfície escura"/"Superfície alternada" da PALETA do site no
   painel do próprio bloco (WordPress gera has-surface-dark-
   background-color / has-surface-muted-background-color sozinho —
   confirmado testando um bloco real). As duas formas continuam
   funcionando em seções novas, com bloco Grupo puro, sem precisar da
   classe do tema.

   O que NÃO dá para detectar por CSS (limitação real, não escondida):
   uma cor de fundo AVULSA, escolhida no seletor de cor personalizada
   (fora da paleta do site), ou uma foto de fundo (bloco Capa) sem a
   classe fx-section--dark — nesses casos o WordPress não gera nenhuma
   classe reaproveitável, só um estilo embutido. Ver as classes de
   substituição manual mais abaixo para esses casos. */
.fx-section--dark + .fx-seam,
.has-surface-dark-background-color + .fx-seam,
.fx-hero + .fx-seam { background: var(--surface-dark); }
.fx-section--muted + .fx-seam,
.has-surface-muted-background-color + .fx-seam { background: var(--surface-muted); }
.fx-section:not(.fx-section--dark):not(.fx-section--muted):not(.has-surface-dark-background-color):not(.has-surface-muted-background-color) + .fx-seam { background: var(--surface); }

.fx-seam:has(+ .fx-section--dark) svg path,
.fx-seam:has(+ .has-surface-dark-background-color) svg path,
.fx-seam:has(+ .fx-hero) svg path { fill: var(--surface-dark); }
.fx-seam:has(+ .fx-section--muted) svg path,
.fx-seam:has(+ .has-surface-muted-background-color) svg path { fill: var(--surface-muted); }
.fx-seam:has(+ .fx-section:not(.fx-section--dark):not(.fx-section--muted):not(.has-surface-dark-background-color):not(.has-surface-muted-background-color)) svg path { fill: var(--surface); }

/* Substituição manual — para quando a detecção automática acima não
   alcança (cor personalizada fora da paleta, foto de fundo sem
   fx-section--dark, ou qualquer caso em que a cor pareça errada).
   Um "controle claro pelo editor": adicione a classe correspondente
   à DIVISÓRIA em si, pelo painel do bloco ▸ Avançado ▸ "Classe(s)
   CSS adicional(is)" — sem editar CSS/PHP. As duas pontas são
   independentes: use uma, outra, ou as duas.
     fx-seam--before-dark / --before-muted / --before-light   → fundo (lado ANTERIOR)
     fx-seam--after-dark  / --after-muted  / --after-light    → preenchimento do SVG (lado SEGUINTE)
   !important aqui é proposital: é a única forma de uma escolha manual
   sempre vencer a detecção automática, não importa a especificidade. */
.fx-seam.fx-seam--before-dark { background: var(--surface-dark) !important; }
.fx-seam.fx-seam--before-muted { background: var(--surface-muted) !important; }
.fx-seam.fx-seam--before-light { background: var(--surface) !important; }
.fx-seam.fx-seam--after-dark svg path { fill: var(--surface-dark) !important; }
.fx-seam.fx-seam--after-muted svg path { fill: var(--surface-muted) !important; }
.fx-seam.fx-seam--after-light svg path { fill: var(--surface) !important; }

/* Esconder uma seção inteira sem apagar o conteúdo: no painel do
   bloco ▸ Avançado ▸ "Classe(s) CSS adicional(is)", adicione fx-hide.
   Útil para seções sem conteúdo aprovado ainda. */
.fx-hide { display: none; }

/* Respaldo para navegadores sem suporte a :has() (raros): reproduz a
   combinação mais comum do site. Sempre sobrescrito pelas regras
   acima quando :has() existe. */
.fx-seam { background: var(--surface-muted); }
.fx-seam svg path { fill: var(--surface-dark); }
.fx-seam--dark-to-light { background: var(--surface-dark); }
.fx-seam--dark-to-light svg path { fill: var(--surface); }
.fx-seam--muted-to-dark { background: var(--surface-muted); }
.fx-seam--muted-to-dark svg path { fill: var(--surface-dark); }

/* =========================================================================
   Hero (bloco Capa / core/cover)
   ========================================================================= */
/* Alinhamento vertical do conteúdo (1.6.1). O cabeçalho fica POR CIMA do
   topo do hero (position:absolute, transparente), então a área útil começa
   abaixo dele. Antes, o bloco Capa tinha o mesmo espaçamento em cima e embaixo
   (atributo "Preenchimento" 80 do próprio bloco) e o conteúdo era alinhado ao
   pé (flex-end) com mais ~90px de folga embaixo: quase todo o espaço de cima
   ficava escondido sob o cabeçalho e o de baixo sobrava — com o título longo
   da 1.6.0, o texto encostava no cabeçalho. Agora:
   - em cima: altura do cabeçalho + uma folga proporcional à altura da tela;
   - embaixo: um pouco menos que essa folga (desloca o conjunto levemente
     para baixo do centro exato);
   - conteúdo centralizado no espaço que sobra entre os dois.
   O preenchimento é forçado (!important) porque o bloco Capa grava o dele
   como estilo inline em cada bloco já salvo — é o único jeito de a correção
   valer nos heros que já estão nas páginas, sem editar cada um. A altura
   mínima não mudou; a curva (divisória) é um bloco à parte, logo abaixo,
   então nada aqui a sobrepõe. Também vale se a "posição do conteúdo" do
   bloco tiver sido mudada no editor (classes has-custom-content-position). */
/* 1.7.1 — dois modos, escolhidos no próprio bloco Capa do hero (painel
   lateral ▸ Estilos):
   - "Automático" (padrão; também vale para os heros já salvos, que
     não têm estilo escolhido): o tema calcula o espaçamento e centraliza,
     como descrito acima — "Preenchimento" e "Posição do conteúdo" do bloco
     são ignorados de propósito;
   - "Personalizado" (classe is-style-hero-personalizado): o tema não
     mexe em preenchimento nem em posição — valem os ajustes feitos no
     editor (Preenchimento, Posição do conteúdo, Altura mínima). */
.fx-hero.wp-block-cover { min-height: min(92vh, 780px); }
.fx-hero.wp-block-cover:not(.is-style-hero-personalizado) {
  --hero-gap: clamp(28px, 6vh, 64px);
  align-items: center;
  padding-top: calc(var(--header-height) + var(--hero-gap)) !important;
  padding-bottom: calc(var(--hero-gap) * .8) !important;
}
.fx-hero.wp-block-cover.has-custom-content-position.has-custom-content-position:not(.is-style-hero-personalizado) { align-items: center; }
.fx-hero .wp-block-cover__image-background { object-position: center 62%; }
.fx-hero .wp-block-cover__background {
  background-image:
    linear-gradient(112deg, rgba(9, 18, 25, .74) 0%, rgba(9, 18, 25, .2) 44%, rgba(9, 18, 25, .04) 72%),
    linear-gradient(0deg, rgba(9, 18, 25, .8) 2%, rgba(9, 18, 25, .12) 46%, rgba(9, 18, 25, 0) 80%);
}
.fx-hero .wp-block-cover__inner-container { width: 100%; }
.fx-hero .fx-inner { position: relative; z-index: 2; }
.fx-hero .eyebrow { color: #fff; }
.fx-hero .eyebrow::before { background: linear-gradient(90deg, var(--brand-yellow) 0 46%, var(--brand-green) 46% 100%); }
.fx-hero h1 {
  color: #fff;
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -.03em;
  max-width: 16ch;
  margin: 0 0 1.1rem;
}
.fx-hero p { color: rgba(255, 255, 255, .95); }
.fx-hero .fx-lead { max-width: 50ch; color: rgba(255, 255, 255, .92); }
.fx-hero .wp-block-buttons { margin-top: 2rem; }

/* ---------- Seção-foto em largura total (mini-hero — Estrutura) ---------- */
.fx-photo-section.wp-block-cover {
  min-height: min(62vh, 540px);
  align-items: center;
}
.fx-photo-section .wp-block-cover__image-background { object-position: center 55%; }
.fx-photo-section .wp-block-cover__background {
  background-image: linear-gradient(96deg,
      rgba(14, 29, 39, .9) 0%,
      rgba(14, 29, 39, .62) 48%,
      rgba(14, 29, 39, .28) 100%);
}
.fx-photo-section .wp-block-cover__inner-container { width: 100%; }
.fx-photo-section .fx-inner { position: relative; z-index: 2; }
.fx-photo-section .fx-list { background: rgba(14, 29, 39, .35); backdrop-filter: blur(2px); }

/* ---------- Fundo fixo da seção-foto (1.8.0) ----------
   Ligado pela opção NATIVA do bloco Capa/Cobertura: painel Bloco ▸
   Configurações ▸ "Fundo fixo" (atributo hasParallax). Com ela, o WordPress
   troca o <img> por um <div> com a imagem como fundo e usa
   background-attachment: fixed — que não funciona no iOS e oscila em
   alguns navegadores. Aqui a técnica é outra, estável no Safari e no
   Chromium: a SEÇÃO recorta tudo o que está dentro dela (clip-path: inset(0)
   — também é um contexto de empilhamento, então nada vaza para as seções
   vizinhas nem para as divisórias) e a IMAGEM fica position:fixed do tamanho
   da tela. Resultado: a seção funciona como uma janela — a foto parece
   parada, a seção a revela ao entrar e o conteúdo seguinte a cobre ao sair.
   Texto, sobreposição escura (overlay) e altura da seção não mudam; nada
   prende a rolagem. A imagem, o ponto focal e a opacidade do overlay
   continuam vindo do bloco. Fica restrito às seções-foto (.fx-photo-section).

   Sem movimento relativo (imagem estática, recortada pela própria seção):
   - em telas de toque (celular/tablet), onde a barra de endereço que encolhe
     e cresce faz um fundo fixo tremer;
   - com "reduzir movimento" no sistema;
   - com Personalizar ▸ Movimento e cabeçalho ▸ animações desligadas. */
/* 2.2.5: o efeito vale para a seção-foto mesmo sem a opção "Fundo fixo"
   ligada no bloco. Sem ela, o WordPress usa um <img> (object-fit) em vez do
   <div> com fundo, e a imagem rolava junto com a seção (o padrão "4
   Originação" nunca trouxe essa opção; uma seção inserida pelo padrão perdia
   o efeito). Mesma técnica para os dois formatos. */
.fx-photo-section.wp-block-cover.has-parallax,
.fx-photo-section.wp-block-cover {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
  background-attachment: scroll;
}
.fx-photo-section .wp-block-cover__image-background.has-parallax,
.fx-photo-section.wp-block-cover > img.wp-block-cover__image-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  background-attachment: scroll;
  background-size: cover;
  background-repeat: no-repeat;
  object-fit: cover;
  z-index: 0;
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .fx-photo-section .wp-block-cover__image-background.has-parallax,
  .fx-photo-section.wp-block-cover > img.wp-block-cover__image-background {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}
.filimartis-motion-off .fx-photo-section .wp-block-cover__image-background.has-parallax,
.filimartis-motion-off .fx-photo-section.wp-block-cover > img.wp-block-cover__image-background {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* =========================================================================
   Imagens de seção
   ========================================================================= */
.fx-figure img { border-radius: var(--radius); box-shadow: var(--shadow-soft); }
figure { margin: 0; }
figcaption,
.wp-element-caption {
  margin-top: .55rem;
  font-size: .82rem;
  color: var(--text-muted);
  text-align: left;
}
.fx-section--dark figcaption,
.fx-section--dark .wp-element-caption { color: rgba(232, 238, 242, .72); }

/* Foto que sangra para fora da coluna (assimetria — seção Produtos) */
@media (min-width: 901px) {
  .fx-bleed-left img {
    margin-inline-start: min(0px, calc((var(--container) - 100vw) / 2 - 20px));
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  }
}

/* =========================================================================
   Botões e microinterações
   ========================================================================= */
.wp-block-button__link,
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 50px;
  padding: .85rem 1.7rem;
  font-family: var(--font-head);
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.wp-block-button__link:hover,
.button-link:hover,
.wp-block-button__link:focus-visible,
.button-link:focus-visible { transform: translateY(-2px); }

.button-link,
.wp-block-button.is-style-fill .wp-block-button__link {
  background: var(--brand-blue);
  color: #fff;
}
.button-link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  color: #fff; background: var(--link-hover);
  box-shadow: 0 10px 26px rgba(32, 116, 186, .35);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, .1); }
.wp-block-button.is-style-accent .wp-block-button__link { background: var(--brand-yellow); color: var(--text-strong); }
.wp-block-button.is-style-accent .wp-block-button__link:hover {
  color: var(--text-strong);
  box-shadow: 0 10px 26px rgba(254, 199, 8, .4);
}

/* links de corpo com sublinhado que cresce */
.entry-content a:not(.wp-block-button__link):not(.wp-element-button) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  transition: background-size .2s ease;
}
.entry-content a:not(.wp-block-button__link):not(.wp-element-button):hover,
.entry-content a:not(.wp-block-button__link):not(.wp-element-button):focus-visible { background-size: 100% 1.5px; }

/* =========================================================================
   Listas de destaque
   ========================================================================= */
.fx-list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 68ch;
}
.fx-list li { background: var(--surface); padding: 1.15rem 1.35rem 1.15rem 2.5rem; position: relative; }
.fx-list li + li { border-top: 1px solid var(--border); }
.fx-list li::before {
  content: "";
  position: absolute;
  left: 1.35rem; top: 1.55rem;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--brand-green);
}
.fx-list li strong { color: var(--text-strong); }
.fx-section--muted .fx-list li { background: var(--surface-muted); }
.fx-section--dark .fx-list { border-color: rgba(255, 255, 255, .18); }
.fx-section--dark .fx-list li { background: rgba(255, 255, 255, .04); }
.fx-section--dark .fx-list li + li { border-top-color: rgba(255, 255, 255, .12); }
.fx-section--dark .fx-list li strong { color: #fff; }

/* Variante com ícone no lugar do marcador — Atuação e Diferenciais */
.fx-list--icons li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-left: 1.35rem;
}
.fx-list--icons li::before { content: none; }
.fx-list--icons .fx-icon-chip { margin-top: .1rem; }
.fx-list__text { flex: 1; min-width: 0; }

.fx-steps {
  margin: 1.6rem 0 0;
  padding-left: 1.3rem;
  max-width: 68ch;
  counter-reset: fxstep;
}
.fx-steps li { margin-bottom: .85rem; padding-left: .4rem; }
.fx-steps li::marker { color: var(--brand-blue); font-family: var(--font-head); font-weight: 700; }
.fx-section--dark .fx-steps li::marker { color: var(--brand-yellow); }

/* Marcador de conteúdo pendente */
.contact-pending,
.is-pending {
  display: inline-block;
  font-size: .9rem;
  color: var(--text-muted);
  background: #fff6d6;
  border: 1px dashed #e6c757;
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
}
.fx-section--dark .contact-pending {
  color: var(--text-on-dark);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .25);
}

/* =========================================================================
   Contato
   ========================================================================= */
.contact-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.85rem;
  background: var(--surface);
}
.fx-section--dark .contact-card {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .16);
}
.contact-card__title {
  margin: 0 0 1.15rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fx-section--dark .contact-card__title { color: rgba(232, 238, 242, .75); }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.contact-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--border);
}
.contact-list__item:last-child { padding-bottom: 0; border-bottom: 0; }
.fx-section--dark .contact-list__item { border-bottom-color: rgba(255, 255, 255, .12); }
.contact-list__key { display: flex; align-items: center; gap: 12px; }
.contact-list__label {
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fx-section--dark .contact-list__label { color: rgba(232, 238, 242, .7); }
.fx-section--dark .contact-list a,
.fx-section--dark .contact-list__todo { color: #fff; }
.contact-list__todo { font-size: .85rem; font-style: italic; color: var(--text-muted); }
.contact-social { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.25rem 0 0; }
.contact-social__link { font-weight: 600; }

/* ---------- Formulário de contato (plugin Fluent Forms) ----------
   O plugin é uma dependência à parte do tema (ver README/GUIA-HOSTINGER) —
   aqui só ajustamos a aparência dele para acompanhar o resto do site.
   Sem !important: a especificidade de .fx-form-card já basta para vencer
   o CSS padrão do plugin, então uma atualização dele não é bloqueada. */
.fx-form-card {
  margin-top: clamp(2rem, 5vw, 3rem);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: rgba(255, 255, 255, .045);
}
.fx-form-card .wp-block-heading {
  margin: 0 0 1.25rem;
  font-size: 1.15rem;
}
.fx-form-card .ff-el-group { margin-bottom: 1.1rem; }
.fx-form-card .ff-el-input--label label {
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-on-dark);
}
.fx-form-card .ff-el-form-control {
  font-family: var(--font-body);
  font-size: .96rem;
  padding: .7rem .9rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  transition: border-color var(--transition), background var(--transition);
}
.fx-form-card .ff-el-form-control::placeholder { color: rgba(232, 238, 242, .72); }
.fx-form-card .ff-el-form-control:focus {
  border-color: var(--brand-yellow);
  background: rgba(255, 255, 255, .1);
  outline: none;
  box-shadow: 0 0 0 3px rgba(254, 199, 8, .28);
}
.fx-form-card .ff-el-form-control.error { border-color: #ff8a8a; }
.fx-form-card .error.text-danger {
  margin-top: .35rem;
  font-size: .82rem;
  color: #ffb4b4;
}
.fx-form-card .ff-el-is-required label::after { color: var(--brand-yellow); }
.fx-form-card .ff-btn-submit {
  /* Cor de fundo/texto vêm do próprio construtor do formulário (botão ▸
     cor de fundo/cor do texto — já configurados para amarelo/escuro,
     editável ali sem precisar mexer aqui). Só tipografia/forma/hover
     seguem o restante do tema. */
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  padding: .8rem 1.6rem;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fx-form-card .ff-btn-submit:hover,
.fx-form-card .ff-btn-submit:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(254, 199, 8, .35);
}
/* O CSS do próprio plugin zera o outline em :focus-visible dos botões
   dele (.ff-btn:focus-visible{outline:none}) — sem isto, o botão de
   enviar ficaria sem indicação visível de foco pelo teclado, apesar da
   regra genérica de foco do tema (que usa :where(), sem especificidade
   para vencer a do plugin). Repetido aqui, explicitamente, por cima. */
.fx-form-card .ff-btn-submit:focus-visible {
  outline: 3px solid var(--brand-yellow);
  outline-offset: 3px;
}
.fx-form-card .ff-message-success {
  border-radius: var(--radius-sm);
  background: rgba(2, 145, 75, .18);
  border: 1px solid rgba(2, 145, 75, .4);
  color: #fff;
  padding: 1rem 1.2rem;
}

/* =========================================================================
   Ícones — conjunto próprio (traço único, sem dependência externa)
   ========================================================================= */
.fx-icon { display: block; }
.fx-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(2, 145, 75, .1);
  color: var(--brand-green);
}
.fx-section--dark .fx-icon-chip {
  background: rgba(255, 255, 255, .1);
  color: var(--brand-yellow);
}

/* =========================================================================
   Rodapé
   ========================================================================= */
.site-footer {
  position: relative;
  background: #0e1d27;
  color: rgba(232, 238, 242, .82);
  padding-block: 28px; /* faixa compacta — sem min-height, altura acompanha o conteúdo */
  font-size: .95rem;
}
/* Reserva, só aqui (não em ".container" de um jeito geral, que é usado
   em toda a página), o espaço que o botão "Voltar ao topo" ocupa —
   position:fixed, sempre no canto inferior direito da JANELA, sem
   relação com o fluxo do rodapé. Como o rodapé é exatamente a última
   coisa da página, o botão quase sempre está visível bem em cima da
   coluna direita (o crédito) quando o rodapé está na tela — sem esse
   respiro, os dois colidiriam.
   A mesma reserva também do lado ESQUERDO (não só à direita, onde o
   botão realmente fica): ".container" já se autocentraliza sozinho
   (margin-inline: auto, sem padding próprio) — reservar espaço só à
   direita encolhe a área útil de um jeito assimétrico e desloca a razão
   social (coluna central) para a esquerda do centro real da página,
   exatamente o problema que essa reorganização do rodapé tenta resolver.
   Reservando a mesma largura dos dois lados, a caixa útil do grid
   continua simétrica e a coluna central permanece centralizada de verdade. */
.site-footer .container { padding-inline: calc(52px + max(18px, env(safe-area-inset-right)) + 20px); }
@media (max-width: 900px) {
  /* empilhado e centralizado — nem a marca nem o crédito ficam mais no
     canto, então não precisa mais dessa reserva (nenhum dos dois lados). */
  .site-footer .container { padding-inline: 0; }
}
/* Três áreas — esquerda (marca) / centro (razão social) / direita
   (crédito) — em grid, não em flex de dois grupos.
   As duas colunas laterais usam a MESMA largura fixa (--footer-side-w),
   não "1fr": testado na prática, duas trilhas "1fr" só ficam realmente
   iguais quando sobra espaço de verdade (o algoritmo do CSS Grid reparte
   o espaço LIVRE em partes iguais, mas cada trilha "1fr" ainda pode ficar
   maior que a outra até esse ponto, do tamanho mínimo que o próprio
   conteúdo pede) — em larguras mais apertadas (901–1024px, medido),
   a marca (mais larga) e o crédito (mais estreito) ficavam com trilhas de
   tamanhos diferentes, e a coluna central (grid-template-columns "auto",
   no meio) saía do centro real da página, não só do espaço entre os dois
   lados. Duas colunas de largura IGUAL (não "1fr") elimina essa
   dependência de sobrar espaço: elas são sempre do mesmo tamanho, em
   qualquer largura de tela, e a coluna central fica sempre no centro de
   verdade — sem depender de coincidência algorítmica nem de deslocamento
   fixo pra compensar visualmente.
   --footer-side-w cobre a largura que a marca precisa (~199px, medido —
   ela tem tamanho fixo, não depende de configuração) com uma folga
   pequena; o crédito (mais estreito por padrão) fica com espaço de sobra
   dentro da própria coluna, sem afetar o tamanho dela (que é sempre igual
   ao da marca). Se um crédito configurado (nome/logo bem compridos)
   precisar de mais que isso, quebra linha dentro da própria coluna — nunca
   estica a trilha nem invade a coluna central: mesma tolerância a quebra
   que a razão social já tem ao lado. */
.site-footer__row {
  --footer-side-w: 212px;
  display: grid;
  grid-template-columns: var(--footer-side-w) auto var(--footer-side-w);
  align-items: center;
  column-gap: 28px;
  row-gap: .85rem;
}
/* "min-width: 0" só na coluna central — ela tem "flex-wrap: wrap" pronto
   pra encolher/quebrar linha quando o espaço aperta, então não deve travar
   numa largura mínima igual ao texto todo numa linha só (min-width: auto,
   comportamento padrão do CSS Grid pra itens de grid, fácil de esquecer).
   As colunas laterais não precisam disso: já têm largura FIXA (acima),
   não dependem de min-width para não vazar. */
.site-footer__legal { min-width: 0; }
.site-footer__brand { justify-self: start; }
.site-footer__credit-slot { justify-self: end; text-align: right; min-width: 0; }
/* Mesma composição símbolo + nome do cabeçalho (sem a assinatura),
   também sem caixa de apoio — o fundo escuro do rodapé já garante
   contraste suficiente para as duas peças. Aumento moderado (+15%,
   menor que o do cabeçalho) para preservar a faixa compacta. */
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
/* "max-width: none" anula o reset global de imagens (max-width: 100%):
   dentro de um item de grid dimensionado pelo conteúdo ("justify-self:
   start", não "stretch"), o navegador resolve esse 100% contra a largura
   da TRILHA do grid (não contra o tamanho natural da marca) — um caso
   circular conhecido do CSS Grid. Sem isto, o símbolo/nome eram
   espremidos para a largura da trilha e "object-fit: contain" ainda assim
   desenhava o conteúdo visível mais largo que a própria caixa relatada,
   vazando por cima da razão social ao lado. Sem risco de estourar o
   rodapé: altura fixa (linhas abaixo) já limita o tamanho de cada peça. */
.site-footer__symbol,
.site-footer__name {
  display: block;
  width: auto;
  max-width: none;
  object-fit: contain;
}
.site-footer__symbol { height: 36.8px; }  /* +15% sobre os 32px anteriores */
.site-footer__name { height: 29.9px; }    /* +15% sobre os 26px anteriores */
@media (max-width: 860px) {
  .site-footer__symbol { height: 29.9px; }  /* +15% sobre os 26px anteriores */
  .site-footer__name { height: 24.2px; }    /* +15% sobre os 21px anteriores */
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__legal {
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .5em;
  font-size: .85rem;
  line-height: 1.6;
  color: rgba(232, 238, 242, .6);
  text-align: center;
}
.site-footer__privacy { color: #fff; }
.site-footer__dot { color: rgba(232, 238, 242, .4); }
.site-footer__copy { color: rgba(232, 238, 242, .6); }
/* Crédito de autoria ("Criado por Filimartis") — mesma hierarquia discreta
   da razão social, só que na própria coluna (direita), separado dela por
   espaçamento de verdade (column-gap do grid), não por um "·" — era
   assim que os dois ficavam colados antes. Font-size igual ao resto da
   linha institucional (não menor) — nada aqui encolhe pra caber. */
.site-footer__credit { color: rgba(232, 238, 242, .6); display: inline-flex; align-items: center; gap: .5em; font-size: .85rem; line-height: 1.6; }
.site-footer__credit-link { color: #fff; }
/* "max-width: none" pelo mesmo motivo do símbolo/nome da marca acima:
   dentro de uma coluna de grid dimensionada pelo conteúdo, o reset global
   de imagens (max-width: 100%) resolve contra a largura da trilha, não
   contra o tamanho da logo — sem isto, o logo do crédito renderizava com
   largura 0 (invisível), só a altura (20px) sobrevivia. */
.site-footer__credit-logo { display: inline-block; width: auto; max-width: none; vertical-align: middle; object-fit: contain; }

/* =========================================================================
   Voltar ao topo — anel de progresso de rolagem
   ========================================================================= */
.scrolltop {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 900;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 22, 30, .9);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: scale(.7);
  transform-origin: center;
  /* Some de verdade (sem interceptar clique/Tab) só ao FIM da transição de
     saída — "visibility" tem essa regra especial embutida no CSS (ao
     esconder, só vira "hidden" quando a transição termina; ao aparecer,
     já vira "visible" no instante zero) — não precisa de display:none nem
     de JS medindo tempo para isso. */
  visibility: hidden;
  transition: opacity .3s ease-out, transform .3s ease-out, visibility .3s ease-out;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .32);
  backdrop-filter: blur(4px);
}
.scrolltop.is-visible { opacity: 1; transform: scale(1); visibility: visible; }
.scrolltop[hidden] { display: none; }
.scrolltop:hover { background: rgba(11, 22, 30, 1); }
.scrolltop:hover .scrolltop__icon { transform: translateY(-1px); }

.scrolltop__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
/* trilha neutra e discreta — sempre um círculo completo, fixa */
.scrolltop__track {
  stroke: rgba(255, 255, 255, .28);
  stroke-dasharray: none;
}
/* arco de progresso — pathLength normaliza para 0–100, independente do
   raio/circunferência em pixels (evita qualquer descompasso de unidades).
   O valor inicial (100/100 = vazio) é definido aqui em CSS como estado
   seguro; o JS só substitui o dashoffset via style inline. */
.scrolltop__arc {
  stroke: var(--brand-green);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset .12s linear;
}
.scrolltop__icon { position: relative; transition: transform .18s ease; }

/* contraste garantido também sobre fundos claros (o próprio botão é escuro) */
@media (prefers-reduced-motion: reduce) {
  .scrolltop { transition: opacity .01ms, visibility .01ms; transform: none; }
  .scrolltop.is-visible { transform: none; }
  .scrolltop__arc { transition: none; }
}
/* Personalizar ▸ Movimento e cabeçalho ▸ "Ativar animações e transições
   discretas" desligado — mesmo efeito de prefers-reduced-motion, mas
   para todo mundo, não só quem pede isso no sistema operacional. */
.filimartis-motion-off .scrolltop { transition: opacity .01ms, visibility .01ms; transform: none; }
.filimartis-motion-off .scrolltop.is-visible { transform: none; }
.filimartis-motion-off .scrolltop__arc { transition: none; }

/* ---------- WhatsApp flutuante (fica ACIMA do botão de topo) ---------- */
.whatsapp-float {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 64px);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 12px 16px;
  border-radius: 999px;
  background: #1eb14e;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(18, 34, 46, .22);
}
.whatsapp-float:hover { color: #fff; background: #199843; }

/* =========================================================================
   Movimento discreto
   ========================================================================= */
/* revelação ao rolar — só aplicada via JS (nunca esconde sem JS nem com reduce) */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .site-nav__menu a::after,
  .wp-block-button__link, .button-link,
  .site-header, .site-header.is-scrolled, .scrolltop { transition: none; }
}
.filimartis-motion-off { scroll-behavior: auto; }
.filimartis-motion-off .reveal { opacity: 1 !important; transform: none !important; transition: none; }
.filimartis-motion-off .site-nav__menu a::after,
.filimartis-motion-off .wp-block-button__link, .filimartis-motion-off .button-link,
.filimartis-motion-off .site-header, .filimartis-motion-off .site-header.is-scrolled,
.filimartis-motion-off .scrolltop { transition: none; }

/* Personalizar ▸ Movimento e cabeçalho ▸ "Mostrar as curvas de transição
   entre seções" desligado — some com todas de uma vez (equivale a apagar
   cada bloco Divisória, sem precisar abrir o editor de cada página). */
.filimartis-seams-off .fx-seam { display: none; }

/* Personalizar ▸ Movimento e cabeçalho ▸ "Cabeçalho" = "Sempre sólido" —
   pula a fase transparente sobre a capa; mesmo visual de .is-scrolled,
   mas fixo desde o carregamento da página. */
.filimartis-header-solid .site-header {
  position: fixed;
  /* fixo desde o carregamento — mesmo deslocamento medido ao vivo que
     .is-scrolled usa, pelo mesmo motivo (ver o comentário ali). */
  top: var(--header-fixed-offset, 0px);
  background: #0b161e;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 12px 30px rgba(0, 0, 0, .3);
}

/* =========================================================================
   Responsividade
   ========================================================================= */
@media (max-width: 900px) {
  .menu-toggle { display: inline-grid; place-items: center; }

  .site-nav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #0b161e;
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 24px 40px rgba(0, 0, 0, .45);
    padding: 12px 20px 22px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__menu a {
    display: block;
    padding: 15px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .site-nav__menu a::after { display: none; }

  /* no mobile o header já entra sólido para leitura garantida */
  .home .site-header:not(.is-scrolled) { background: linear-gradient(180deg, rgba(9,18,25,.9) 0%, rgba(9,18,25,.5) 60%, rgba(9,18,25,.08) 100%); }
}

/* Abaixo daqui as três áreas empilham — a central (razão social) tem o
   texto mais longo dos três (nome jurídico completo, às vezes junto com
   "Política de Privacidade"), então é ela que decide quando o grid de 3
   colunas fica apertado demais; a mudança para empilhado acontece ANTES
   das colunas colidirem (testado com o texto real desta entrega), não
   depois. Empilhado, os três ficam centralizados (marca incluída) — no
   celular, especificamente, o pedido é para centralizar, não alinhar à
   esquerda. */
@media (max-width: 900px) {
  .site-footer { padding-block: 24px; }
  .site-footer__row {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: .75rem;
  }
  .site-footer__brand,
  .site-footer__legal,
  .site-footer__credit-slot {
    justify-self: center;
  }
  .site-footer__credit-slot { text-align: center; }
}

@media (max-width: 560px) {
  .container { width: calc(100% - 32px); }
  .fx-hero.wp-block-cover { min-height: min(88vh, 680px); }
  .fx-hero .wp-block-cover__image-background { object-position: center 58%; }
  .whatsapp-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .whatsapp-float { padding: 12px; }
  .review-bar { font-size: .76rem; }
  .scrolltop { width: 48px; height: 48px; }
}

/* =========================================================================
   Seletor de idioma (1.7.0) — botão compacto (bandeira + sigla + seta) com
   lista suspensa (bandeira + nome). Só existe com o Polylang ativo (ver
   inc/i18n.php). Desktop: lista flutuante, alinhada à direita, por cima do
   conteúdo. Celular: o mesmo controle no fim do menu, e a lista abre no
   fluxo do próprio menu (sem cortar nem rolar para o lado).
   ========================================================================= */
.lang-menu { position: relative; }
.lang-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(11, 22, 30, .35);
  color: #fff;
  font: 600 .82rem/1 var(--font-head);
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.lang-menu__toggle:hover,
.lang-menu__toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.lang-menu__toggle:focus-visible,
.lang-menu__option:focus { outline: 3px solid var(--brand-yellow); outline-offset: 2px; }
.lang-menu__option:focus:not(:focus-visible):hover { outline-color: transparent; }
.lang-flag { display: block; flex: none; border-radius: 2.5px; }
.lang-menu__chevron { transition: transform .18s ease; }
.lang-menu__toggle[aria-expanded="true"] .lang-menu__chevron { transform: rotate(180deg); }

.lang-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 1100;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: #0b161e;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
}
.lang-menu__list[hidden] { display: none; }
.lang-menu__option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, .86);
  font-size: .92rem;
  text-decoration: none;
}
.lang-menu__option:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.lang-menu__option.is-current { color: #fff; font-weight: 600; background: rgba(254, 199, 8, .1); }
.lang-menu__name { flex: 1; }
.lang-menu__check { flex: none; color: var(--brand-yellow); }

@media (min-width: 901px) {
  .lang-menu { padding-left: clamp(10px, 1.4vw, 18px); border-left: 1px solid rgba(255, 255, 255, .22); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .site-nav { gap: 12px; }
  .site-nav__menu { gap: 14px; }
  .lang-menu { padding-left: 10px; }
  .lang-menu__toggle { padding: 0 8px; gap: 6px; }
}
/* 901–1000px com os rótulos em inglês (os mais longos) e o botão de idioma
   com bandeira: um pouco menos de espaço entre itens e texto do menu 5%
   menor, para caber numa linha sem rolagem lateral (medido). */
@media (min-width: 901px) and (max-width: 1000px) {
  .site-nav { gap: 10px; }
  .site-nav__menu { gap: 11px; }
  .site-nav__menu a { font-size: .88rem; }
  .lang-menu { padding-left: 8px; }
  .lang-menu__toggle { padding: 0 6px; gap: 5px; }
}
@media (max-width: 900px) {
  /* Menu do celular aberto com o cabeçalho já fixo: nunca maior que a tela
     (com a lista de idiomas aberta ele cresce) — rola por dentro. */
  .site-header.is-scrolled .site-nav.is-open,
  body:not(.home) .site-header .site-nav.is-open {
    max-height: calc(100vh - var(--header-height) - var(--header-fixed-offset, 0px));
    max-height: calc(100dvh - var(--header-height) - var(--header-fixed-offset, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .lang-menu { padding-top: 14px; }
  .lang-menu__toggle { font-size: .9rem; }
  .lang-menu__list {
    position: static;
    margin-top: 8px;
    min-width: 0;
    max-width: 320px;
    box-shadow: none;
    background: rgba(255, 255, 255, .04);
  }
}

/* =========================================================================
   1.6.0 — Componentes das seções do portfólio (todos montados com blocos
   nativos: Grupo em grade, Colunas, Lista, Detalhes, Parágrafo). As classes
   abaixo só dão a aparência; o conteúdo é 100% editável no editor.
   ========================================================================= */

/* ---------- Números (ex.: 6 estados · 300+ municípios) ----------
   Cada bloco Coluna vira uma caixa com a largura do próprio texto (sem quebrar
   a legenda). Se não couberem lado a lado, a caixa seguinte desce para a linha
   de baixo e ocupa a largura toda. As divisórias são linhas internas de 1px à
   esquerda e no topo de cada caixa; a margem de -1px empurra as da borda externa
   para fora da área visível, então só aparecem entre caixas (lado a lado ou
   empilhadas). */
.fx-stats.wp-block-columns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  margin: 2rem 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
/* seletor mais forte que o "flex-basis: 100% !important" do WordPress para
   colunas no celular (abaixo de 782px), que forçava uma caixa por linha */
.entry-content .wp-block-columns.fx-stats > .wp-block-column {
  flex: 1 1 auto !important;
  margin: -1px 0 0 -1px !important;
}
.fx-stats > .wp-block-column {
  padding: 1.25rem 1.35rem;
  background: var(--surface);
  box-shadow: inset 1px 0 0 var(--border), inset 0 1px 0 var(--border);
}
.fx-stat__value {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  line-height: 1.05;
  color: var(--brand-blue);
}
.fx-stat__label {
  margin: .45rem 0 0;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--text-muted);
}
.fx-section--muted .fx-stats > .wp-block-column { background: var(--surface); }
.fx-section--dark .fx-stats,
.fx-photo-section .fx-stats { border-color: rgba(255, 255, 255, .18); }
.fx-section--dark .fx-stats > .wp-block-column,
.fx-photo-section .fx-stats > .wp-block-column {
  background: rgba(14, 29, 39, .5);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.fx-section--dark .fx-stat__value,
.fx-photo-section .fx-stat__value { color: var(--brand-yellow); }
.fx-section--dark .fx-stat__label,
.fx-photo-section .fx-stat__label { color: rgba(232, 238, 242, .86); }

/* ---------- Cartões (Atuação, Qualidade, Condições, grupos de Produtos) ----------
   O contêiner é um bloco Grupo com layout "Grade" (o WordPress calcula as
   colunas pela largura mínima definida no próprio bloco). */
.fx-cards { margin-top: 2rem; gap: 1.1rem; }
.fx-card {
  height: 100%;
  margin: 0;
  padding: 1.5rem 1.5rem 1.35rem;
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-green);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
/* Grades com detalhes expansíveis (Produtos): cada cartão com a SUA altura,
   alinhado pelo topo. Na grade, o padrão é esticar todos os itens da linha
   até a altura do mais alto ("stretch", reforçado por height:100% acima) —
   ao abrir "Ver variedades" num cartão, o fundo e a borda dos outros
   cresciam junto. Aqui só o cartão aberto cresce; a seção acompanha. */
.fx-cards:has(.fx-details) { align-items: start; }
.fx-cards:has(.fx-details) > .fx-card { height: auto; align-self: start; }
.fx-section--muted .fx-card { background: var(--surface); }
.fx-section--dark .fx-card {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .16);
  border-top-color: var(--brand-yellow);
  box-shadow: none;
}
.fx-card > * { margin-block: 0; }
.fx-card > * + * { margin-top: .7rem; }
.fx-card h3 {
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--text-strong);
}
.fx-section--dark .fx-card h3 { color: #fff; }
.fx-card p { font-size: .96rem; line-height: 1.6; color: var(--text-color); }
.fx-section--dark .fx-card p { color: rgba(232, 238, 242, .9); }
.fx-card .eyebrow { margin-bottom: 0; font-size: .72rem; }

/* Lista curta dentro de cartões (variedades, itens) — lista nativa */
.fx-checklist {
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}
.fx-checklist li {
  position: relative;
  padding-left: 1.2rem;
  font-size: .95rem;
  line-height: 1.5;
}
.fx-checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--brand-green);
}
.fx-section--dark .fx-checklist li::before { background: var(--brand-yellow); }
.fx-checklist ul { list-style: none; margin: .35rem 0 .2rem; padding: 0; display: grid; gap: .3rem; }
.fx-checklist ul li { font-size: .9rem; color: var(--text-muted); }
.fx-section--dark .fx-checklist ul li { color: rgba(232, 238, 242, .8); }
.fx-checklist ul li::before { width: 5px; height: 5px; top: .6em; opacity: .7; }

/* ---------- Detalhes expansíveis (bloco "Detalhes" nativo — <details>) ---------- */
.fx-details {
  margin-top: 1rem !important;
  border-top: 1px solid var(--border);
  padding-top: .8rem;
}
.fx-section--dark .fx-details { border-top-color: rgba(255, 255, 255, .14); }
.fx-details > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .92rem;
  color: var(--link);
}
.fx-section--dark .fx-details > summary { color: var(--brand-yellow); }
.fx-details > summary::-webkit-details-marker { display: none; }
.fx-details > summary::after {
  content: "";
  width: 8px; height: 8px;
  margin-left: .2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.fx-details[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.fx-details > summary:focus-visible { outline: 3px solid var(--brand-yellow); outline-offset: 3px; border-radius: 4px; }
.fx-details > :not(summary) { margin: .75rem 0 0; font-size: .93rem; }
.fx-details p strong { color: var(--text-strong); }
.fx-section--dark .fx-details p strong { color: #fff; }

/* Nota de rodapé de seção (ex.: "Trigo e outros cereais sob consulta") */
.fx-note {
  margin-top: 1.6rem !important;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--brand-blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(32, 116, 186, .07);
  font-size: .95rem;
  max-width: 880px;
}
.fx-section--dark .fx-note {
  border-left-color: var(--brand-yellow);
  background: rgba(255, 255, 255, .06);
  color: rgba(232, 238, 242, .92);
}

/* ---------- Estados de originação (seção-foto) ---------- */
.fx-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.1rem 0 0;
  padding: 0;
}
.fx-tags li {
  padding: .4rem .8rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(14, 29, 39, .45);
  font-size: .9rem;
  color: #fff;
}

/* ---------- Contato: cartões da mesa comercial ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.1rem;
  margin-top: 1.8rem;
}
.team-card__name {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.3;
}
.team-card__role { margin: .3rem 0 0; font-size: .9rem; color: var(--text-muted); }
.fx-section--dark .team-card__role { color: rgba(232, 238, 242, .75); }
.team-card .contact-list { margin-top: 1.1rem; }
.team-card .contact-list a { overflow-wrap: anywhere; text-align: right; }
.fx-contact-extra { margin-top: 1.1rem !important; align-items: flex-start; }
.fx-contact-extra > * { margin: 0 !important; }
.contact-card--complementar { min-width: min(100%, 20rem); }
.fx-portfolio .wp-block-button__link { gap: .4rem; }
.fx-portfolio__meta { font-weight: 400; opacity: .8; font-size: .9em; }
@media (max-width: 560px) {
  .team-card .contact-list__item { flex-wrap: wrap; }
  .team-card .contact-list a { text-align: left; }
}

/* =========================================================================
   Mapa de originação (1.9.0) — bloco filimartis/mapa-originacao.
   SVG estático (Natural Earth, domínio público), sem interação; cores vêm do bloco.
   ========================================================================= */
.mapa-originacao {
  width: 100%;
  max-width: var(--mapa-max, 520px);
  margin: 0 auto;
}
.mapa-originacao__svg { display: block; width: 100%; height: auto; overflow: visible; }
.mapa-originacao .mapa-uf {
  stroke: rgba(255, 255, 255, .5);
  stroke-width: 1.1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mapa-originacao .mapa-uf.is-on { stroke: rgba(255, 255, 255, .95); stroke-width: 1.4; }
.mapa-originacao .mapa-sigla {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 26px;              /* unidades do desenho (1000 de largura) */
  letter-spacing: .04em;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: rgba(8, 20, 28, .8);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.mapa-originacao .mapa-sigla--fora { text-anchor: start; }
.mapa-originacao .mapa-callout { stroke: rgba(255, 255, 255, .85); stroke-width: 1.2; fill: none; vector-effect: non-scaling-stroke; }
.mapa-originacao .mapa-callout-dot { fill: #fff; }
.mapa-originacao__legenda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin: .9rem 0 0;
  font-size: .92rem;
  font-weight: 600;
  color: inherit;
}
.mapa-originacao__swatch {
  width: 18px; height: 12px;
  border-radius: 3px;
  background: var(--mapa-hl, #2fae66);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9);
}

/* Seção-foto com o mapa: duas colunas (texto | mapa) no desktop; no
   celular, o mapa vem depois do texto (comportamento padrão das Colunas). */
.fx-photo-section .fx-map-columns { gap: clamp(1.5rem, 4vw, 3.5rem); }
.fx-photo-section .fx-map-columns > .wp-block-column:last-child { align-self: center; }
@media (max-width: 781px) {
  .fx-photo-section .fx-map-columns > .wp-block-column:last-child { margin-top: 1.6rem; }
  .mapa-originacao { max-width: min(var(--mapa-max, 520px), 420px); }
}
@media (max-width: 560px) {
  .mapa-originacao .mapa-sigla { font-size: 40px; stroke-width: 7px; }
}

/* =========================================================================
   Letreiro de safra/cotações (2.0.0) — faixa logo abaixo do hero, gerada
   pelo tema (inc/ticker.php) com dados coletados no servidor.
   ========================================================================= */
.fx-ticker {
  position: relative;
  background: #0b161e;
  color: #e8eef2;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .86rem;
  line-height: 1.35;
}
.fx-ticker__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.fx-ticker__label {
  flex: none;
  margin: 0;
  padding: 5px 9px;
  border-radius: 999px;
  font: 700 .7rem/1 var(--font-head);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fx-ticker__label--safra { background: rgba(47, 174, 102, .16); color: #8fdcab; }
.fx-ticker__label--precos { background: rgba(254, 199, 8, .14); color: var(--brand-yellow); }
.fx-ticker__track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative; /* recorta também os textos ocultos (position:absolute) dos itens */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}
.fx-ticker__track:focus-visible { outline: 3px solid var(--brand-yellow); outline-offset: 3px; }
.fx-ticker__rail { display: flex; width: max-content; }
.fx-ticker__list {
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0 20px 0 0;
  list-style: none;
  white-space: nowrap;
}
.fx-ticker__item { display: inline-flex; align-items: baseline; gap: 7px; }
.fx-ticker__prod { font-weight: 700; color: #fff; }
.fx-ticker__place { color: rgba(232, 238, 242, .85); }
.fx-ticker__val { font-variant-numeric: tabular-nums; font-weight: 600; color: #fff; }
.fx-ticker__var { font-size: .8rem; font-weight: 600; }
.fx-ticker__var.up { color: #8fdcab; }
.fx-ticker__var.down { color: #ffb0a5; }
.fx-ticker__var.eq { color: rgba(232, 238, 242, .75); }
.fx-ticker__meta { font-size: .78rem; color: rgba(232, 238, 242, .66); }
.fx-ticker__status { flex: none; margin: 0; font-size: .74rem; color: rgba(232, 238, 242, .7); white-space: nowrap; }
.fx-ticker__status b { color: #fff; font-weight: 600; }
.fx-ticker__stale {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 155, 142, .16);
  color: #ffc2b9;
  font-weight: 600;
}
.fx-ticker__pause {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -6px 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.fx-ticker__pause[hidden] { display: none; }
.fx-ticker__pause:focus-visible { outline: 3px solid var(--brand-yellow); outline-offset: 2px; }
.fx-ticker__pause-icon { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.fx-ticker__pause[aria-pressed="true"] .fx-ticker__pause-icon {
  width: 0; height: 0; border: 0;
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 3px;
}
/* Rolagem automática (só quando o JS liga: telas largas, sem "reduzir
   movimento" e com as animações ligadas no Personalizar). */
.fx-ticker.is-marquee .fx-ticker__rail { animation: fx-ticker-roll var(--fx-ticker-dur, 60s) linear infinite; }
.fx-ticker.is-marquee.is-paused .fx-ticker__rail,
.fx-ticker.is-marquee .fx-ticker__track:hover .fx-ticker__rail,
.fx-ticker.is-marquee .fx-ticker__track:focus-within .fx-ticker__rail { animation-play-state: paused; }
@keyframes fx-ticker-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Divisória logo depois da faixa: mesma cor da faixa no lado de cima. */
.fx-ticker + .fx-seam { background: #0b161e; }

/* Celular e telas estreitas: navegação manual (deslizar dentro da faixa,
   sem rolagem lateral na página), itens em cartões. */
@media (max-width: 900px) {
  .fx-ticker__inner { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px 12px; }
  .fx-ticker__status { margin-left: auto; white-space: normal; text-align: right; }
  .fx-ticker__track {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .fx-ticker__track::-webkit-scrollbar { display: none; }
  .fx-ticker__list { gap: 10px; padding: 0; white-space: normal; }
  .fx-ticker__item {
    scroll-snap-align: start;
    flex: none;
    width: min(78vw, 290px);
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
  }
}

/* =========================================================================
   Ticker de mercados internacionais (2.1.0) — widgets oficiais do
   TradingView (inc/mercados.php + setupMarkets em main.js). A altura do
   widget é reservada para a página não "pular" quando ele carrega.
   ========================================================================= */
.fx-mkt {
  position: relative;
  background: #0b161e;
  color: #e8eef2;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .84rem;
  line-height: 1.4;
  overflow: hidden; /* nada do widget alarga a página */
}
.fx-mkt__inner { max-width: var(--container); margin: 0 auto; padding: 12px 20px 10px; }
.fx-mkt__head { display: flex; align-items: center; gap: 12px 16px; min-height: 44px; }
.fx-mkt__title {
  flex: none;
  margin: 0;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(254, 199, 8, .14);
  color: var(--brand-yellow);
  font: 700 .7rem/1 var(--font-head);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fx-mkt__note { flex: 1; min-width: 0; margin: 0; font-size: .78rem; color: rgba(232, 238, 242, .78); }
.fx-mkt__pause { margin: 0; }
.fx-mkt__widget { height: 104px; margin-top: 6px; min-width: 0; }
.fx-mkt__widget > * { display: block; width: 100%; height: 104px; }
.fx-mkt__widget[hidden] { display: none; }
.fx-mkt__msg { margin: 10px 0; color: rgba(232, 238, 242, .8); font-size: .82rem; }
.fx-mkt__msg[hidden] { display: none; }
.fx-mkt__legend { margin-top: 2px; font-size: .76rem; color: rgba(232, 238, 242, .72); }
.fx-mkt__legend summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  cursor: pointer;
  color: rgba(232, 238, 242, .88);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fx-mkt__legend summary:focus-visible { outline: 3px solid var(--brand-yellow); outline-offset: 2px; }
.fx-mkt__legend ul { margin: 4px 0 4px; padding: 0 0 0 18px; display: grid; gap: 3px; }
.fx-mkt__legend b { color: #fff; font-weight: 700; }
.fx-mkt__legend span { color: #fff; }
.fx-mkt + .fx-seam,
.fx-mkt + .fx-ticker + .fx-seam { background: #0b161e; }
@media (max-width: 900px) {
  .fx-mkt__inner { padding: 12px 16px 8px; }
  .fx-mkt__head { flex-wrap: wrap; }
  .fx-mkt__note { flex-basis: 100%; }
}

/* =========================================================================
   Reorganização 2.2.0 — página institucional (page-institucional.php),
   apresentação curta e seção Exportação da Home.
   ========================================================================= */
/* Abertura compacta da página interna (não repete o hero da Home). */
.fx-page-intro { padding-block: clamp(2.6rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem) !important; }
.fx-page-intro h1 {
  margin: 0 0 .9rem;
  max-width: 22ch;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  color: #fff;
}
.fx-page-intro .fx-lead { margin: 0; }

/* Leitura confortável nas seções editoriais. */
.fx-about p:not(.eyebrow):not(.fx-step-num) { max-width: 64ch; }
.fx-about .wp-block-column > p:not(.eyebrow):not(.fx-lead) { line-height: 1.7; }
.fx-about h2 { max-width: 24ch; }

/* "Como atuamos": três etapas numeradas, sem moldura de cartão. */
.fx-step-columns { margin-top: clamp(1.6rem, 3vw, 2.4rem); gap: clamp(1.4rem, 3vw, 2.6rem) !important; }
.fx-step-columns > .wp-block-column { border-top: 3px solid var(--brand-green); padding-top: 1.1rem; }
.fx-step-columns > .wp-block-column:nth-child(2) { border-top-color: var(--brand-blue); }
.fx-step-columns > .wp-block-column:nth-child(3) { border-top-color: var(--brand-yellow); }
.fx-step-num {
  margin: 0 0 .35rem;
  font: 700 .82rem/1 var(--font-head);
  letter-spacing: .14em;
  color: var(--text-muted);
}
.fx-step-columns h3 { margin: 0 0 .6rem; font-size: clamp(1.15rem, 1.8vw, 1.35rem); }

/* Relacionamento comercial: título à esquerda, texto à direita. */
.fx-about-split { gap: clamp(1.4rem, 4vw, 4rem) !important; }
.fx-about-split p { margin-block: 0 1rem; }

/* Encerramento com os dois botões. */
.fx-about-cta h2 { max-width: 26ch; }
.fx-about-cta .wp-block-buttons { margin-top: 1.6rem; }

/* Exportação (Home): resumo da atuação em três passos, lado a lado. */
.fx-export-flow { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); scroll-margin-top: calc(var(--header-height, 76px) + 16px); }
.fx-steps.fx-steps--row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fxrow;
}
.fx-steps--row li {
  counter-increment: fxrow;
  margin: 0;
  padding: 0 0 0 2.6rem;
  position: relative;
  line-height: 1.6;
}
.fx-steps--row li::before {
  content: counter(fxrow, decimal-leading-zero);
  position: absolute;
  left: 0; top: .1rem;
  font: 700 .95rem/1 var(--font-head);
  color: var(--brand-blue);
}
.fx-steps--row strong { font-family: var(--font-head); }
.fx-subhead { margin-top: clamp(2.2rem, 4vw, 3rem) !important; margin-bottom: 1rem; }
#qualidade.fx-note { margin-top: clamp(1.6rem, 3vw, 2.2rem); scroll-margin-top: calc(var(--header-height, 76px) + 16px); }
@media (max-width: 781px) {
  .fx-steps.fx-steps--row { grid-template-columns: 1fr; }
}
/* Seção clara com fundo próprio: cobre a sobreposição de 2px da divisória
   (sem isso, a borda serrilhada do SVG aparecia como uma linha fina). */
.entry-content .fx-section:not(.fx-section--dark):not(.fx-section--muted):not(.has-background):not(.wp-block-cover) { background: var(--surface); }