/**
 * Base CSS — FJPN Site
 *
 * Camada compartilhada entre todas as seções: container, escala tipográfica,
 * utilitários de interação (botões, card-lift, divisor de seção) e animações
 * de entrada/flutuação do design original (Figma Make).
 *
 * Fontes:
 * - Obsidian: proerp/fjpn-site/architecture/design-tokens.md (seções 5 e 6)
 * - Obsidian: proerp/fjpn-site/architecture/secoes-design.md (componentes
 *   auxiliares Eyebrow/Heading/OrangeButton/BlueButton + animações CSS)
 * - assets/css/tokens.css (fonte da verdade dos valores — só leitura aqui)
 *
 * Regra: nenhum valor literal é repetido se já existir como custom property
 * em tokens.css. Onde não existe token dedicado para um valor (ex.: padding
 * horizontal do container), reaproveita-se por VALOR um token semanticamente
 * próximo — nunca se hardcoda o número de novo (ver comentários pontuais).
 *
 * Mobile-first: estilo base para telas pequenas, `min-width` nas media queries.
 * Prefixo `.fjpn-` em toda classe própria — não colide com bighearts nem Elementor.
 *
 * NÃO editar wp-content/themes/bighearts/ nem tokens.css a partir daqui.
 */

/* ==========================================================
 * 1. CONTAINER
 * max-w-7xl mx-auto px-6 lg:px-8 (doc §6.1 e §3.2): 1280px de largura
 * máxima, padding horizontal 24px no mobile, 32px a partir de 1024px.
 * ========================================================== */

.fjpn-container {
  width: 100%;
  max-width: var(--fjpn-container-width); /* 80rem / 1280px */
  margin-inline: auto;
  padding-inline: var(--fjpn-container-padding);
}

/* Conteúdo só para leitor de tela — visualmente oculto, mas presente na
   árvore de acessibilidade e no foco de teclado.
   `display: none` e `visibility: hidden` NÃO servem aqui: os dois retiram o
   elemento também do leitor de tela, que é exatamente quem deveria recebê-lo.
   Daí o recorte de 1px, que é a técnica padrão.
   Usado no <caption> das tabelas, nos rótulos de campo de busca e nas regiões
   `aria-live` que anunciam resultado de filtro. */
.fjpn-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 1024px = --fjpn-breakpoint-lg (64rem). Custom properties não são
   resolvidas dentro da condição de @media, então o valor precisa ser
   literal aqui — não é uma repetição do token em si, é limitação do CSS. */
@media (min-width: 1024px) {
  .fjpn-container {
    padding-inline: var(--fjpn-container-padding-lg);
  }
}

/* ==========================================================
 * 2. ESCALA TIPOGRÁFICA
 * Componente Heading (sm/md/lg/xl) + H1 do Hero + eyebrow + corpo +
 * small + botão. Ver design-tokens.md §2 e secoes-design.md
 * (componentes auxiliares Eyebrow/Heading).
 * ========================================================== */

/* Hero / H1 — já é fluido via clamp(), não precisa de media query. */
.fjpn-heading-hero {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-hero-h1);
  font-weight: var(--fjpn-weight-extrabold);
  line-height: var(--fjpn-leading-hero);
  letter-spacing: var(--fjpn-tracking-tight);
  color: var(--fjpn-text-primary);
}

/* Heading xl — text-4xl → md:text-5xl → lg:text-6xl */
.fjpn-heading-xl {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-heading-xl);
  font-weight: var(--fjpn-weight-extrabold);
  line-height: var(--fjpn-leading-tight);
  letter-spacing: var(--fjpn-tracking-tight);
  color: var(--fjpn-text-primary);
}

/* Heading lg — default do componente, o tamanho mais usado no site */
.fjpn-heading-lg {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-heading-lg);
  font-weight: var(--fjpn-weight-extrabold);
  line-height: var(--fjpn-leading-tight);
  letter-spacing: var(--fjpn-tracking-tight);
  color: var(--fjpn-text-primary);
}

/* Heading md */
.fjpn-heading-md {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-heading-md);
  font-weight: var(--fjpn-weight-extrabold);
  line-height: var(--fjpn-leading-tight);
  letter-spacing: var(--fjpn-tracking-tight);
  color: var(--fjpn-text-primary);
}

/* Heading sm — sem variação responsiva no design original */
.fjpn-heading-sm {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-heading-sm);
  font-weight: var(--fjpn-weight-extrabold);
  line-height: var(--fjpn-leading-tight);
  letter-spacing: var(--fjpn-tracking-tight);
  color: var(--fjpn-text-primary);
}

/* 768px = --fjpn-breakpoint-md (48rem). Ver nota sobre @media na seção 1. */
@media (min-width: 768px) {
  .fjpn-heading-xl { font-size: var(--fjpn-text-heading-xl-md); }
  .fjpn-heading-lg { font-size: var(--fjpn-text-heading-lg-md); }
  .fjpn-heading-md { font-size: var(--fjpn-text-heading-md-md); }
}

/* 1024px = --fjpn-breakpoint-lg. Só o heading xl ganha um terceiro salto. */
@media (min-width: 1024px) {
  .fjpn-heading-xl { font-size: var(--fjpn-text-heading-xl-lg); }
}

/* Eyebrow — rótulo uppercase acima de todo Heading de seção.
 *
 * O traço (`.fjpn-section-divider`) nasce agora como ::before DESTE
 * elemento, não mais como visual do <span> irmão que as 7 seções que usam
 * o par emitem antes dele (sobre, banner-trilhas, missão, áreas, programas,
 * notícias, newsletter — todas no padrão
 * `<span class="fjpn-section-divider">…</span><span class="fjpn-eyebrow">`).
 * Motivo: metade dessas seções embrulha o par num wrapper próprio com
 * `flex-direction: column` (missao.css, areas.css, programas.css,
 * banner-trilhas.css) — nesse eixo, o `display` do FILHO é irrelevante,
 * quem decide empilhar ou não é o `flex-direction` do PAI. Como esses
 * wrappers estão fora do escopo desta correção, a única forma de garantir
 * "traço + rótulo na mesma linha" em qualquer contexto é fundir os dois
 * num item só: o traço vira ::before do próprio eyebrow, que passa a ser
 * um mini flex-row autocontido. O <span> antigo é apenas escondido logo
 * abaixo, preservando `.fjpn-section-divider` como utilitário standalone
 * pra quem usar só o traço, sem eyebrow ao lado.
 */
.fjpn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--fjpn-gap-eyebrow);
  /* Vence o `align-items: center` dos wrappers de seção (missao.css,
     areas.css etc.) sem precisar tocar nesses arquivos — align-self no
     filho tem prioridade sobre align-items do pai. É o que garante o
     eyebrow "à esquerda" mesmo em seções de conteúdo centralizado (ver
     Missão: bloco centralizado, eyebrow alinhado à esquerda dele). */
  align-self: flex-start;
  margin-bottom: var(--fjpn-gap-eyebrow);
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-eyebrow);
  font-weight: var(--fjpn-weight-bold);
  letter-spacing: var(--fjpn-tracking-eyebrow);
  text-transform: uppercase;
  /* Laranja vivo do aprovado. Texto pequeno sobre fundo claro é o pior caso
     de contraste do site (2,80:1) — mas o eyebrow é rótulo de apoio, o
     conteúdo que ele anuncia está no heading logo abaixo em texto escuro. */
  color: var(--fjpn-orange-cta);
}

.fjpn-eyebrow::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 48px;
  height: 3px;
  background: var(--fjpn-divider);
  /* 2px, não `radius-full`: é o valor do `.section-divider` no fonte do
     protótipo. Numa barra de 3px de altura a diferença é sutil, mas
     `radius-full` arredonda as pontas em semicírculo e 2px deixa o canto
     levemente chanfrado. */
  border-radius: 2px;
  /* O `.section-divider` do protótipo carrega `margin-bottom: 16px`. Dentro
     de uma linha flex com `align-items: center`, essa margem entra no cálculo
     da altura da caixa e ERGUE o traço cerca de 8px acima do centro óptico do
     rótulo — não é um descuido do gerador, é o que dá ao traço a posição
     "na altura do topo das maiúsculas" que se vê no aprovado. Sem ela o traço
     desce e o par fica com aparência diferente. */
  margin-bottom: var(--fjpn-gap-medium);
}

/* Variante para o raro caso de eyebrow que deve ficar centralizado junto
   com o resto do bloco (nenhuma seção usa ainda — preparado sob demanda,
   como pedido no diagnóstico do defeito). */
.fjpn-eyebrow--centralizado {
  align-self: center;
}

/* AUTORIDADE ÚNICA sobre o alinhamento do eyebrow, deliberadamente acima das
   seções.
   Cada seção embrulha o eyebrow num wrapper próprio (`fjpn-areas__eyebrow`,
   `fjpn-missao__eyebrow`, `fjpn-programas__eyebrow`… são 10) e cada uma tinha
   escolhido seu alinhamento: umas com `flex-direction: column; align-items:
   center`, outras nada. O resultado é o que se vê no site — eyebrow no meio em
   umas seções, na esquerda em outras. No aprovado ele está SEMPRE à esquerda.
   Dois detalhes que fazem esta regra funcionar:
   1. `align-self: stretch` no wrapper. Encolhido até o conteúdo, ele é
      centralizado pelo container da seção e leva o eyebrow junto — e aí o
      `align-self: flex-start` do próprio eyebrow não tem espaço para atuar.
   2. Seletor de dois atributos = especificidade (0,2,0), que vence
      `.fjpn-secao__eyebrow` (0,1,0) qualquer que seja a ordem de carga. Por
      isso os arquivos de seção não precisam ser tocados um a um — e por isso
      também qualquer seção FUTURA já nasce alinhada. */
/* ==========================================================
 * REGRA DE OURO PARA <img> NESTE TEMA
 *
 * O Elementor declara, no CSS do próprio plugin:
 *
 *   .elementor img { height: auto; max-width: 100%; border-radius: 0;
 *                    box-shadow: none }
 *
 * Isso é especificidade (0,1,1) — uma classe mais um elemento. Uma regra
 * nossa como `.fjpn-hero__foto-img` é (0,1,0) e PERDE, não importa a ordem
 * de carga dos arquivos. Na prática: toda altura, raio de canto e sombra que
 * declaramos em `<img>` era silenciosamente descartada, e a imagem assumia a
 * altura intrínseca do arquivo. Foi a causa do vão azul embaixo da foto do
 * Hero — que sobreviveu a duas tentativas de correção porque eu estava
 * ajustando a altura da CAIXA, e o problema era a imagem dentro dela.
 *
 * Por isso toda regra de `<img>` neste tema é escrita como
 * `.elementor .fjpn-x__imagem` — (0,2,0), que vence. Imagem nova segue o
 * mesmo padrão; sem o prefixo, o estilo simplesmente não aplica e o defeito
 * é difícil de enxergar, porque nada quebra, só é ignorado.
 * ========================================================== */

/* O tema pai numera TODA `<ol>` da página com um contador em `::before`
   (`body ol > li:before { content: "." counter(li) }`, css/main.css). Nossas
   listas ordenadas usam `<ol>` por semântica, não por querer número visível:
   o breadcrumb é uma sequência com ordem, e a linha do tempo também. O
   resultado no site era ".1 Início / .2 Institucional" — o contador do pai
   brigando com o separador que a seção desenha.
   A neutralização é por lista NOMEADA, não por `[class*="fjpn-"] ol`: dentro
   do Bloco de Conteúdo existe um campo WYSIWYG onde a cliente pode escrever
   uma lista numerada de verdade, e ali o número deve continuar aparecendo.
   Lista nova que precise do mesmo tratamento entra nesta lista. */
.fjpn-pagina-cabecalho__breadcrumb ol > li::before,
.fjpn-pagina-timeline__lista > li::before {
  content: none;
  width: auto;
  margin-left: 0;
}

/* Mesma família de problema: o tema pai desenha um par de aspas decorativas
   gigantes em `blockquote:before` (css/main.css). Nossas citações usam
   `<blockquote>` por semântica — é uma citação de verdade —, mas o desenho da
   aspa vem do bloco em si no aprovado (fundo azul-claro + barra à esquerda),
   sem o ornamento. Sem esta regra aparece um "66" enorme antes do texto. */
.fjpn-sobre__citacao::before,
.fjpn-pagina-destaque__texto::before,
.fjpn-pagina-texto__corpo blockquote::before {
  content: none;
}

[class*="fjpn-"][class*="__eyebrow"] {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  justify-content: flex-start;
}

/* Sobre fundo escuro o laranja da marca já passa (6.37:1 no rodapé), então
   ali vale usar o tom vivo original. */
.fjpn-secao-escura .fjpn-eyebrow,
.fjpn-eyebrow--sobre-escuro {
  color: var(--fjpn-orange-primary);
}

/* Corpo — parágrafo padrão e variante em destaque (Hero) */
.fjpn-body {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-body);
  font-weight: var(--fjpn-weight-regular);
  line-height: var(--fjpn-leading-relaxed);
  color: var(--fjpn-slate-700);
}

.fjpn-body-lg {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-body-lg);
  font-weight: var(--fjpn-weight-regular);
  line-height: var(--fjpn-leading-relaxed);
  color: var(--fjpn-slate-700);
}

/* Small — legenda, a classe de texto mais usada do site */
.fjpn-text-small {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-small);
  line-height: var(--fjpn-leading-relaxed);
  color: var(--fjpn-text-muted);
}

/* Botão — só a tipografia; o box model vive nos utilitários .fjpn-btn-* */
.fjpn-text-button {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-button);
  font-weight: var(--fjpn-weight-semibold);
}

/* ==========================================================
 * 3. UTILITÁRIOS DO DESIGN
 * ========================================================== */

/* Divisor de seção — barrinha 48×3px em gradiente laranja. Utilitário
   standalone (ex.: usado sozinho, sem eyebrow ao lado). */
.fjpn-section-divider {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--fjpn-divider);
  border-radius: var(--fjpn-radius-full);
  margin-bottom: var(--fjpn-gap-icon-text);
}

/* Quando o divisor precede um eyebrow (o par que os widgets de seção
   emitem), o traço visual já é o ::before de `.fjpn-eyebrow` — este <span>
   fica redundante e é escondido para não duplicar a barrinha. */
.fjpn-section-divider:has(+ .fjpn-eyebrow) {
  display: none;
}

/* Card-lift — hover de elevação usado em todos os cards do site */
.fjpn-card-lift {
  transition:
    transform var(--fjpn-duration-base) var(--fjpn-ease-default),
    box-shadow var(--fjpn-duration-shadow) var(--fjpn-ease-simple);
}

.fjpn-card-lift:hover {
  transform: translateY(-5px);
  box-shadow: var(--fjpn-shadow-card-hover);
}

/* Botões — base compartilhada por OrangeButton/BlueButton do design.
   Combine com um modificador: .fjpn-btn.fjpn-btn-orange etc. */
.fjpn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fjpn-gap-icon-text);
  padding: var(--fjpn-padding-button-y) var(--fjpn-padding-button-x);
  border-radius: var(--fjpn-radius-2xl);
  border: none;
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-button);
  font-weight: var(--fjpn-weight-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--fjpn-duration-base) var(--fjpn-ease-simple),
    box-shadow var(--fjpn-duration-shadow) var(--fjpn-ease-simple),
    background var(--fjpn-duration-background) var(--fjpn-ease-simple);
}

/* hover:scale-105 active:scale-95 — o padrão de interação mais comum do site */
.fjpn-btn:hover {
  transform: scale(1.05);
}

.fjpn-btn:active {
  transform: scale(0.95);
}

/* Variante laranja — OrangeButton, sempre preenchido */
.fjpn-btn-orange {
  /* Laranja vivo do protótipo aprovado (item 27, decisão do responsável).
     Texto branco sobre ele dá 2,80:1 e reprova WCAG AA — escolha consciente
     de marca, registrada em tokens.css. É o CTA principal do site: aparece
     em CTA, Newsletter, Sobre e Programas. */
  background: var(--fjpn-gradient-orange-cta);
  color: var(--fjpn-white);
  box-shadow: var(--fjpn-shadow-button-orange);
}

/* Variante azul preenchida — BlueButton default */
.fjpn-btn-blue {
  background: var(--fjpn-gradient-blue-button);
  color: var(--fjpn-white);
  box-shadow: var(--fjpn-shadow-button-blue);
}

/* Variante azul outline — BlueButton outline={true} */
.fjpn-btn-blue-outline {
  background: transparent;
  color: var(--fjpn-blue-primary);
  border: var(--fjpn-border-width-outline) solid var(--fjpn-blue-primary);
  /* compensa a borda de 2px pra manter a mesma altura visual da variante
     preenchida (que não tem borda), sem alterar os tokens de padding. */
  padding:
    calc(var(--fjpn-padding-button-y) - var(--fjpn-border-width-outline))
    calc(var(--fjpn-padding-button-x) - var(--fjpn-border-width-outline));
}

.fjpn-btn-blue-outline:hover {
  background: var(--fjpn-blue-light);
}

/* ==========================================================
 * 4. ANIMAÇÕES
 * fadeUp (entrada) e float (flutuação de badges decorativos),
 * ver design-tokens.md §5. Animações específicas de um único
 * componente/seção (diamond-float, blob-bg) ficam fora da base.
 * ========================================================== */

@keyframes fjpn-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fjpn-animate-fade-up {
  animation: fjpn-fade-up var(--fjpn-duration-fade-up) var(--fjpn-ease-simple) both;
}

/* Delays escalonados (0.15s/0.3s/0.45s) — literais porque tokens.css só
   define durações, não delays de stagger. */
.fjpn-animate-fade-up-2 { animation-delay: 0.15s; }
.fjpn-animate-fade-up-3 { animation-delay: 0.3s; }
.fjpn-animate-fade-up-4 { animation-delay: 0.45s; }

@keyframes fjpn-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.fjpn-badge-float {
  animation: fjpn-float var(--fjpn-duration-float) var(--fjpn-ease-default) infinite;
}

/* Variantes de delay/duração para badges flutuantes lado a lado não
   ficarem sincronizados — mistura --fjpn-duration-float-alt com delays
   literais (mesma justificativa da fadeUp acima). */
.fjpn-badge-float-2 {
  animation-duration: var(--fjpn-duration-float-alt);
  animation-delay: 0.3s;
}

.fjpn-badge-float-3 {
  animation-delay: 0.6s;
}

.fjpn-badge-float-4 {
  animation-duration: var(--fjpn-duration-float-alt);
  animation-delay: 0.9s;
}

/* Estados de interação genéricos — hover:scale-105 active:scale-95 para
   qualquer elemento clicável fora dos botões (cards, ícones). */
.fjpn-scale-hover {
  transition: transform var(--fjpn-duration-base) var(--fjpn-ease-simple);
}

.fjpn-scale-hover:hover {
  transform: scale(1.05);
}

.fjpn-scale-hover:active {
  transform: scale(0.95);
}

/* hover:scale-110 — usado nos ícones sociais do footer */
.fjpn-scale-hover-lg:hover {
  transform: scale(1.1);
}

/* ==========================================================
 * 5. SANGRIA DE SEÇÃO — largura total dentro do Elementor
 *
 * As 13 seções (fjpn-hero, banner-trilhas, banner-carrossel, sobre,
 * numeros, programas, missao, areas, noticias, cta, newsletter, header,
 * footer) foram escritas sem `width`/`margin` na própria raiz — corretas
 * nesse ponto, pois quem deveria ocupar 100% da largura não é a seção,
 * é a caixa do Elementor que a envolve. Todo widget é renderizado dentro
 * de `.elementor-widget` → `.elementor-widget-container`; esse segundo
 * nível não tem largura/padding restritivos por padrão do Elementor, mas
 * basta o editor herdar um padding de coluna/wrapper para a seção ficar
 * "presa" numa caixa, sobrando uma faixa do fundo da PÁGINA ao redor dela
 * (no Hero, que é azul, é o azul que vaza). Zerar margin/padding e forçar
 * width:100% no container garante que a seção sempre preencha a largura
 * disponível, não importa a configuração de coluna do editor.
 *
 * CUIDADO: `fjpn-diamond-card` e `fjpn-anos-impacto` NÃO são seções — são
 * componentes usados por DENTRO de outro widget (Sobre, BannerTrilhas) via
 * `create_element_instance()`. Sangrar até a borda da página quebraria o
 * aninhamento deles (querem caber no espaço do componente-pai, não da
 * página). Por isso a lista abaixo é explícita, seção por seção, em vez de
 * um seletor por prefixo `fjpn-` — evita que um componente futuro com esse
 * prefixo seja pego por engano.
 *
 * POR QUE `width: 100%` NÃO BASTA: o tema pai restringe a largura acima do
 * widget — `body.elementor-page main .wgl-container.wgl-content-sidebar`
 * recebe `max-width: var(--bighearts-elementor-container-width)`. Preencher
 * 100% de uma caixa já estreita continua estreito, e o fundo da página
 * aparece nas laterais da seção (no Hero, que é azul, vira faixa azul).
 *
 * A sangria abaixo usa `margin-inline: calc(50% - 50vw)` com `width: auto`,
 * que é auto-neutralizante: quando a caixa-mãe já ocupa a viewport inteira,
 * `50%` e `50vw` se cancelam e a margem vira zero — a regra não faz mal
 * nenhum numa página já configurada como largura total. Quando a caixa é
 * estreita, a margem negativa a estica exatamente até a borda da janela.
 * Nenhum valor fixo, nenhuma media query, nenhuma suposição sobre qual
 * template a página está usando.
 *
 * O `overflow-x: clip` no body é obrigatório, não zelo: `50vw` inclui a
 * largura da barra de rolagem vertical, então a seção fica ~15px mais larga
 * que a área útil e abriria rolagem horizontal na página. `clip` corta esse
 * excedente sem criar um container de rolagem — diferente de `hidden`, que
 * criaria, e quebraria qualquer `position: sticky` acima dele.
 * ========================================================== */

body {
  overflow-x: clip;
}

.elementor-widget-fjpn-hero > .elementor-widget-container,
.elementor-widget-fjpn-banner-trilhas > .elementor-widget-container,
.elementor-widget-fjpn-banner-carrossel > .elementor-widget-container,
.elementor-widget-fjpn-sobre > .elementor-widget-container,
.elementor-widget-fjpn-numeros > .elementor-widget-container,
.elementor-widget-fjpn-programas > .elementor-widget-container,
.elementor-widget-fjpn-missao > .elementor-widget-container,
.elementor-widget-fjpn-areas > .elementor-widget-container,
.elementor-widget-fjpn-noticias > .elementor-widget-container,
.elementor-widget-fjpn-cta > .elementor-widget-container,
.elementor-widget-fjpn-newsletter > .elementor-widget-container,
.elementor-widget-fjpn-header > .elementor-widget-container,
.elementor-widget-fjpn-footer > .elementor-widget-container {
  width: auto;
  padding: 0;
  margin-block: 0;
  margin-inline: calc(50% - 50vw);
}

/* ----------------------------------------------------------
 * 5b. ESPAÇO VERTICAL ENTRE SEÇÕES
 *
 * A regra acima trata a caixa INTERNA do widget. Ela não alcança as duas
 * outras origens do espaço vertical, e por isso sobrava uma listra do fundo
 * da página acima e abaixo de cada seção:
 *
 *   1. `.elementor-widget` (a caixa EXTERNA) — o Elementor aplica
 *      `margin-bottom` entre widgets irmãos.
 *   2. O contêiner que envolve os widgets — tem `padding` de borda e `gap`
 *      entre filhos, ambos configuráveis no editor e ambos com padrão
 *      diferente de zero.
 *
 * O `gap` é o detalhe que importa: ele pertence ao PAI. Nenhuma margem ou
 * padding declarado no filho o cancela — é preciso alcançar o contêiner, e
 * `:has()` é o que permite fazer isso sem depender de o editor ter recebido
 * uma classe manual.
 *
 * O seletor por prefixo com dois `:not()` substitui a lista explícita aqui
 * porque precisa valer também para os 7 widgets de página interna
 * (`fjpn-pagina-*`), que não existiam quando a lista acima foi escrita. As
 * duas exceções continuam sendo os componentes aninhados — sangrar ou
 * colapsar espaço neles quebraria o encaixe dentro do widget-pai.
 *
 * Isto não substitui configurar a página como largura total no Elementor;
 * apenas garante que o padrão já saia certo sem depender disso.
 * ---------------------------------------------------------- */

.elementor-widget[class*="elementor-widget-fjpn-"]:not(.elementor-widget-fjpn-diamond-card):not(.elementor-widget-fjpn-anos-impacto) {
  margin-block: 0;
}

.e-con-inner:has(> .elementor-widget[class*="elementor-widget-fjpn-"]:not(.elementor-widget-fjpn-diamond-card):not(.elementor-widget-fjpn-anos-impacto)),
.e-con:has(> .elementor-widget[class*="elementor-widget-fjpn-"]:not(.elementor-widget-fjpn-diamond-card):not(.elementor-widget-fjpn-anos-impacto)) {
  gap: 0;
  padding-block: 0;
}

/* Estrutura legada (seção/coluna), para páginas montadas antes dos
   contêineres flex — mesma intenção, seletores da geração anterior. */
.elementor-section:has(.elementor-widget[class*="elementor-widget-fjpn-"]:not(.elementor-widget-fjpn-diamond-card):not(.elementor-widget-fjpn-anos-impacto)) {
  padding-block: 0;
}

.elementor-column:has(> .elementor-widget-wrap > .elementor-widget[class*="elementor-widget-fjpn-"]:not(.elementor-widget-fjpn-diamond-card):not(.elementor-widget-fjpn-anos-impacto)) > .elementor-widget-wrap {
  padding: 0;
}

/* ==========================================================
 * 6. PREFERS-REDUCED-MOTION
 * Requisito de acessibilidade (WCAG 2.3.3), não opcional.
 * Escopo global (não prefixado com .fjpn-) de propósito: precisa
 * neutralizar QUALQUER animação/transição da página — incluindo as
 * do tema pai/Elementor — não só as classes definidas aqui.
 * ========================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}