.elementor-kit-4{--e-global-color-primary:#060606;--e-global-color-secondary:#E5E2E1;--e-global-color-text:#FFFFFF;--e-global-color-accent:#002936;--e-global-color-ebwp:#B1CAD4;--e-global-color-ebonna:#DAC7B3;--e-global-color-bgdark:#060606;--e-global-color-bglight:#EEEEEE;--e-global-color-btntext:#D4D4D4;--e-global-color-neutral:#889198;--e-global-color-onlight:#0A0A0A;--e-global-color-onlightbd:#333333;--e-global-color-tealac:#002936;--e-global-color-meta:#C8C6C5;--e-global-color-linha:#262626;--e-global-color-surf1:#0E0E0E;--e-global-color-surf0:#1C1B1B;--e-global-color-luzmeta:#5C5C66;--e-global-typography-primary-font-family:"Roboto Flex";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.2em;--e-global-typography-primary-letter-spacing:-0.32px;--e-global-typography-secondary-font-family:"Roboto Flex";--e-global-typography-secondary-font-weight:800;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-font-style:italic;--e-global-typography-secondary-letter-spacing:-0.176px;--e-global-typography-text-font-family:"Roboto Flex";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"Roboto Flex";--e-global-typography-accent-font-weight:400;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===== WiemsPro/Onnafit — Componentes & Efeitos (camada 2) =====
   Consome os tokens globais do Elementor (cor/tipografia). NÃO redefine cor.
   Vive no Elementor > Site Settings > Custom CSS (kit id 4). Origem: Home #4653. */

:root{
  /* Escalas que o Global do Elementor não guarda */
  --radius-card:20px; --radius-pill:40px; --radius-full:999px;
  --blur-glass:20px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --btn-dark:linear-gradient(243.66deg,#2A2A2A 16%,#000 106%);
  --btn-light:linear-gradient(90deg,#FFFFFF,#E5E5E5);
  --glass-bg:rgba(0,0,0,.41);
  --glass-border:linear-gradient(135deg,rgba(255,255,255,.4),rgba(255,255,255,.1) 50%,rgba(255,255,255,.4));
  --elev-md:0 10px 30px rgba(0,0,0,.35);
  --elev-lg:0 28px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04);
  --glow-light:0 12px 34px -10px rgba(255,255,255,.5);
}

/* Eyebrow / label — cor por linha de produto, vinda do Global */
.wp-eyebrow{font-family:var(--e-global-typography-secondary-font-family,"Roboto Flex");font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.176px;line-height:1;margin:0;font-size:16px}
.wp-eyebrow--wiemspro{color:var(--e-global-color-ebwp)}
.wp-eyebrow--onnafit{color:var(--e-global-color-ebonna)}

/* Card de vidro (glass) com borda-gradiente por máscara */
.wp-glass{position:relative;background:var(--glass-bg);backdrop-filter:blur(var(--blur-glass));-webkit-backdrop-filter:blur(var(--blur-glass));border-radius:var(--radius-card);padding:20px;box-sizing:border-box}
.wp-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--glass-border);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* Utilitários de texto (consomem Global) */
.wp-title{font-family:var(--e-global-typography-primary-font-family,"Roboto Flex");font-weight:700;letter-spacing:-.32px;line-height:1.2;color:var(--e-global-color-text)}
.wp-desc{font-family:var(--e-global-typography-text-font-family,"Roboto Flex");font-weight:300;line-height:1.5;color:var(--e-global-color-text)}

/* Transição preto->branco (Credibilidade) */
.is-light{background:var(--e-global-color-bglight)}
.is-light .elementor-heading-title,.is-light .wp-title{color:var(--e-global-color-onlight)}
.is-light p,.is-light .wp-desc{color:var(--e-global-color-onlightbd)}

/* ===== v2 — adições (2026-07-31): sobretítulo, vidro fosco e palco de imagens ===== */
/* Aditivo: só introduz nomes novos, não altera nenhuma regra existente do kit. */

:root{
  --radius-sm:10px;
  /* vidro fosco real (distinto do --glass-bg, que é o card escuro translúcido) */
  --frost-bg:rgba(101,101,101,.14);
  --frost-blur:13px;
  --frost-divider:rgba(198,198,200,.5);
  --chip-bg:rgba(255,255,255,.1);
  /* hover das abas do hero (WiemsFit / Onnafit). Mesma cor, só mais opaca:
     o chip clareia sem trocar de tom nem competir com a foto atrás.
     Consumido pelo controle nativo "Cor de fundo" da aba Hover do botão, então
     continua editável no painel. A transição de .3s já vem do .elementor-button. */
  --chip-bg-hover:rgba(255,255,255,.18);
  /* largura máxima do palco de imagens de fundo.
     1210px = largura do canvas do Figma: acima disso as figuras param de
     crescer, o que evita corte de cabeça e deslocamento em monitor largo. */
  --stage-max:1210px;
  /* gradiente dos títulos de seção (cinza-gelo -> azul-aço).
     Calibrado pelo Igor em 08/08 para servir aos DOIS fundos: o #FFFFFF a
     12,91% sumia sobre a faixa clara. Trocado por #D8E0E2 em 0% e o #66858E
     puxado para 100%, valores do painel. Um gradiente só, sem variante por
     estado, então a troca de modo não precisa animar background-image. */
  --grad-title:linear-gradient(253.11deg,#D8E0E2 0%,#66858E 100%);
  /* Variante da ONNAFIT (page 557). O Figma dela pinta todo H2 de 34px das
     faixas claras com um gradiente ESCURO, medido nos nós 863:1201, 863:1281
     e 863:1317: #1A1614 -> #736666. O `--grad-title` acima continua intocado,
     porque foi calibrado à mão pelo Igor em 08/08 para servir aos dois fundos
     da WiemsFit e da Home; trocá-lo levaria as duas junto. */
  --grad-title-onna:linear-gradient(253.11deg,#1A1614 0%,#736666 100%);
  /* E a variante ESCURA da Onnafit, que é a que faltava. Medida nos H2 das
     faixas escuras do `863:1133`: on-estrut, on-cred, on-mundo e on-prova usam
     #FFFFFF -> #A8A8B2 (branco para cinza QUENTE), e o on-faq #FFFFFF ->
     #B2B2A8. Nenhum deles é o azul-aço do `--grad-title`, que é da WiemsFit.
     Uma parada só para os cinco: a diferença entre A8A8B2 e B2B2A8 não se lê. */
  /* Branco → cinza azulado. Nasceu na Onnafit, mas o gradiente é NEUTRO
     e a Sobre (WiemsPro) usa o mesmo valor, medido no Figma 734:713.
     Consumir um token chamado `onna` numa página WiemsPro confundiria
     quem for editar depois, então o valor passa a morar no nome neutro e
     `--grad-title-onna-escuro` vira alias. Mesmo valor: a Onnafit não
     muda de aparência. */
  --grad-title-neutro:linear-gradient(253.11deg,#FFFFFF 0%,#A8A8B2 100%);
  --grad-title-onna-escuro:var(--grad-title-neutro);
  /* superfícies de card, vindas do design system do Figma */
  --surface-1:#0E0E0E;
  /* Fundo das seções `Sobre a marca` e do card do Showroom (Figma
     734:740 e 734:849). Fica entre `--surface-1` #0E0E0E e
     `--surface-2` #201F1F, e não é nenhum dos dois. */
  --surface-1b:#1C1B1B;
  --surface-2:#201F1F;
  --surface-3:#2A2A2A;
  --row-head:#1D1D1D;
  --row-line:rgba(255,255,255,.12);
  /* Traços em gradiente do Figma. O codegen do Figma achata gradiente de
     traço em cor sólida (#ccc), então estes vieram da API, dos nós
     534:502 (pill), 624:595 (card de diferencial) e 27:1023 (card de solução). */
  --border-glass:linear-gradient(135deg,
      rgba(204,204,204,1) 0%, rgba(204,204,204,.2) 25%,
      rgba(204,204,204,.2) 67.8%, rgba(204,204,204,1) 100%);
  /* caixinhas de benefício da seção de soluções (nó 624:473) */
  --border-box:linear-gradient(90deg,
      rgba(102,102,102,0) 0%, rgba(102,102,102,.8) 100%);
}

/* Sobretítulo em texto normal.
   O rótulo itálico de produto continua sendo .wp-eyebrow. */
.eyebrow{margin:0}

/* Título com preenchimento em gradiente. O painel do Elementor não expõe
   background-clip, então esta é uma das poucas regras que precisam existir. */
.wp-gradtext .elementor-heading-title{
  background-image:var(--grad-title);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* Onnafit em modo claro: título no gradiente escuro do desenho dela.
   Escopado na classe de página, do mesmo jeito que a exceção do fundo branco
   logo abaixo, então a WiemsFit e a Home não sentem nada. A troca de modo é da
   PÁGINA INTEIRA, logo `wp-claro` no body já é o gatilho certo. */
body.page-id-557 .wp-gradtext .elementor-heading-title{
  background-image:var(--grad-title-onna-escuro);
}
body.page-id-557.wp-claro .wp-gradtext .elementor-heading-title{
  background-image:var(--grad-title-onna);
}

/* Imagem que preenche o container pai sem distorcer. Mantém alt e semântica,
   ao contrário de usar a foto como background.
   Preenche por posicionamento absoluto porque `height:100%` não resolve
   contra um pai que só tem `min-height`, e porque assim funciona em qualquer
   direção de flex. O container precisa de min-height e overflow:hidden. */
.wp-imgcover{position:absolute;inset:0;margin:0}
.wp-imgcover .elementor-widget-container,.wp-imgcover figure{height:100%;margin:0}
.wp-imgcover img{width:100%;height:100%;object-fit:cover;display:block}

/* Área clicável que abre o lightbox de vídeo cobrindo o card inteiro.
   Molde do `.wp-imgcover`, mas para o widget de VÍDEO com "Sobreposição de
   imagem" ligada: a sobreposição é uma PNG transparente, então quem aparece é
   o que estiver atrás (nesta página, o fundo de vídeo do container com o loop
   de 4s) e o clique abre o vídeo completo, com áudio, no lightbox nativo.
   O `padding-bottom` do `.elementor-wrapper` é a caixa de proporção do widget;
   aqui quem manda na altura é o card, então ela sai. */
.wp-vidclick{position:absolute;inset:0;margin:0;z-index:2;cursor:pointer}
/* ⚠️ `width:100%` acrescentado em 12/08. Sem ele, o wrapper do vídeo
   ficava mais estreito que o widget dentro do laço (medido no celular:
   320px num card de 335), e a miniatura não encostava nas bordas. A
   regra já cuidava da ALTURA; a largura faltava. */
.wp-vidclick .elementor-widget-container,
.wp-vidclick .elementor-wrapper{height:100%;width:100%}
.wp-vidclick .elementor-wrapper{padding:0!important;background:transparent}
.wp-vidclick .elementor-custom-embed-image-overlay{
  height:100%;background-size:cover;background-position:center;
}
.wp-vidclick .elementor-custom-embed-image-overlay img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* Botão de play: pílula de 40x40 em vidro. O padrão do Elementor é um glifo
   solto de 100px com sombra, grande demais para um card de 229x400.
   Mesma família dos chips do splash: `--chip-bg` com o blur de `--blur-btn`,
   e o hover só aumenta a opacidade do mesmo tom. */
.wp-vidclick .elementor-custom-embed-play{
  width:40px;height:40px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--chip-bg);
  -webkit-backdrop-filter:blur(var(--blur-btn)) saturate(1.2);
  backdrop-filter:blur(var(--blur-btn)) saturate(1.2);
  /* O Elementor centra o botão por `transform`. Reescrever a propriedade
     mataria a centragem, então a escala entra COMO PARTE do mesmo transform,
     por variável: só o `--play-scale` muda no hover. O `--direction-multiplier`
     é do Elementor (1 em LTR); o fallback cobre quem não o define. */
  --play-scale:1;
  transform:translate(calc(-50% * var(--direction-multiplier,1)),-50%)
            scale(var(--play-scale));
  transition:background-color .3s ease, transform .3s ease;
}
.wp-vidclick .elementor-custom-embed-play i,
.wp-vidclick .elementor-custom-embed-play svg{
  font-size:28px;width:28px;height:28px;line-height:1;
  opacity:1;text-shadow:none;filter:none;
}
/* `.wp-vidclick` é `inset:0`, cobre o card inteiro: o hover aqui é o hover do
   CARD. O play cresce para convidar ao clique, e o fundo clareia junto. */
.wp-vidclick:hover .elementor-custom-embed-play{
  background:var(--chip-bg-hover);
  --play-scale:1.18;
}
@media(prefers-reduced-motion:reduce){
  .wp-vidclick:hover .elementor-custom-embed-play{--play-scale:1}
}
/* No mobile o card cresce de 229 para a largura da tela, e a pílula de 40px
   fica perdida no meio dele. Sobe para 64, com o ícone proporcional. O blur e
   o fundo vêm da regra de cima, então acompanham sozinhos. */
@media(max-width:767px){
  .wp-vidclick .elementor-custom-embed-play{width:64px;height:64px}
  .wp-vidclick .elementor-custom-embed-play i,
  .wp-vidclick .elementor-custom-embed-play svg{
    font-size:44px;width:44px;height:44px;
  }
}

/* Acordeão aninhado: o título precisa HERDAR a cor.
   O Astra pinta `h1..h6` com `--ast-global-color-2` (#0A0A0A), e o título do
   acordeão É um heading de verdade (`title_tag: h3`, que é o certo para um FAQ).
   O controle "Cor do título" do widget escreve só a variável do `<summary>`
   (`--n-accordion-title-normal-color`), então em banda escura o texto saía quase
   preto sobre fundo quase preto.
   Com `inherit`, o h3 volta a receber a cor do `<summary>`, ou seja QUEM MANDA
   PASSA A SER O CONTROLE DO PAINEL, nos três estados. Nada de cor fixa aqui. */
.elementor-widget-n-accordion .e-n-accordion-item-title-text{color:inherit}

/* Acordeão aninhado: O CARTÃO É O CONTAINER EXTERNO.
   É o que o Figma manda: no `863:1057` quem tem `border`, `rounded-[12px]` e
   `overflow-clip` é o `faq-item`; o cabeçalho é só uma faixa de fundo.

   Por que isto não podia ficar no painel: o widget não expõe controle NENHUM
   para o `.e-n-accordion-item` (o `<details>`). A 1ª versão contornou pondo a
   borda na faixa e no corpo, com largura por estado e raio achatado na emenda.
   Funcionava parado e quebrava na animação.

   ⚠️ Medido ao vivo: quem anima é o `<details>`, e o Elementor escreve
   `overflow:hidden; height:…px` INLINE nele. Com a borda na faixa e no corpo, a
   linha de baixo do cartão só existia no fim do movimento, e o `<details>`
   nascendo com `border-radius: 0` fazia o recorte ser QUADRADO, cortando o canto
   arredondado durante toda a abertura. Com o contorno aqui, o que cresce é o
   cartão inteiro, já arredondado e com borda.

   O RAIO continua vindo do painel, pela variável que o controle escreve. Só a
   linha mora aqui, no token `--line` do kit, que existia sem uso e é do mesmo
   papel (o desenho pede 8% de branco e o token tem 10%: num fio de 1px sobre
   #060606 a diferença é rgb(26,26,26) contra rgb(31,31,31)).
   O `overflow: hidden` é permanente, como o `overflow-clip` do Figma; o
   Elementor já o punha inline durante a animação. */
.elementor-widget-n-accordion .e-n-accordion-item{
  border:1px solid var(--line);
  border-radius:var(--n-accordion-border-radius);
  overflow:hidden;
}
/* Acordeão SEM o cartão acima, para quando o cartão é o container de
   fora. Na Estrutura de Suporte da Sobre (Figma 741:1862) cada card é um
   acordeão de um item dentro de um container que já tem raio, traço e
   preenchimento: a borda do kit aparecia como uma caixa solta em volta
   do título.
   ⚠️ Precisa vir do kit, e não do painel: o controle "Borda: nenhuma"
   do widget escreve numa variável que a regra de cima ignora. */
[data-wp~="acc-nu"] .elementor-widget-n-accordion .e-n-accordion-item{
  border:none;border-radius:0;overflow:visible;
}
/* Título e ícone nas pontas, com o ícone à DIREITA, que é o desenho.
   ⚠️ Escrito nas VARIÁVEIS do widget, não nas propriedades. O Elementor declara
   `order:var(--n-accordion-title-icon-order)` e
   `justify-content:var(--n-accordion-title-justify-content)` em
   `.elementor-widget-n-accordion .e-n-accordion-item-title-icon`, que tem a
   MESMA especificidade (0,2,0) da regra daqui e carrega DEPOIS: escrever
   `order:2` direto perdia por ordem de cascata, e o ícone continuava à
   esquerda com `order:-1`. Alimentando a variável, o mecanismo do widget é
   quem aplica, e o controle do painel segue por cima quando alguém mexer. */
[data-wp~="acc-nu"] .e-n-accordion-item-title{
  --n-accordion-title-icon-order:2;
  --n-accordion-title-justify-content:space-between;
  gap:12px;
}
[data-wp~="acc-nu"] .e-n-accordion-item-title-header{flex:1 1 auto}
[data-wp~="acc-nu"] .e-n-accordion-item-title-icon{opacity:.6}
/* A faixa herda o raio do painel nos quatro cantos, que serve ao item fechado.
   Aberto, os de baixo têm que ser retos: senão os dois cantos arredondados da
   faixa mostrariam o fundo do corpo por trás. Sem número fixo aqui. */
.elementor-widget-n-accordion .e-n-accordion-item[open]
  > .e-n-accordion-item-title{
  border-end-start-radius:0;
  border-end-end-radius:0;
}

/* Faixa que rola de lado no mobile, para grades de card que não cabem na tela.
   O que o painel expõe fica no painel: direção da linha, `nowrap` e a largura
   fixa dos filhos, todos com controle responsivo de verdade.

   ⚠️ `overflow` NÃO tem controle por breakpoint neste Elementor: `overflow_mobile`
   é aceito no JSON e não emite nada. Mas a rolagem continua nativa, porque o
   próprio Elementor declara `.e-con{--overflow:visible;overflow:var(--overflow)}`.
   Aqui só se troca o valor da variável dele no mobile, sem `!important` e sem
   tocar na propriedade: quem editar o Overflow no painel continua mandando no
   desktop. O `.e-con` no seletor é para vencer por especificidade, não por
   ordem de arquivo.

   ⚠️ `flex-shrink` também não: em CONTAINER nenhuma chave do painel emite nada
   (nem `flex_shrink` nem `_flex_shrink`), e o `.e-con.e-flex` do Elementor
   declara `--flex-shrink:1`. Sem isto os cards encolhem todos para caber na
   tela em vez de formar a faixa. Mesma saída: troca-se o valor da variável
   dele. O `.e-con.e-flex` no seletor é para vencer por especificidade a regra
   de origem, não por ordem de arquivo.

   A ALTURA sai da proporção, por `aspect-ratio`, que controle nenhum expõe.
   O padrão é o card do WiemsFit (229:400); outra página troca declarando
   `--hscroll-ratio` no container da faixa.

   O resto é o que controle nenhum dá: o encaixe por card, a barra de rolagem
   escondida e o freio do overscroll, para arrastar a faixa não puxar a página.
   767px é o breakpoint de mobile deste site, confirmado no CSS servido. */
/* Mesma faixa rolável do `hscroll`, mas em TODAS as larguras.
   O `hscroll` só age abaixo de 767 porque as faixas onde ele nasceu (os
   depoimentos da WiemsFit e da Onnafit) cabem inteiras no desktop. O
   carrossel de pilares da Sobre (Figma 734:772) tem 5 cards de 320 com
   gap 40, que somam 1760 numa faixa de 1040: precisa rolar em qualquer
   largura.
   ⚠️ SEM o `aspect-ratio` que o `hscroll` impõe aos filhos. Lá os cards
   de depoimento são todos iguais; aqui as alturas vão de 275 a 463 de
   propósito, e forçar proporção achataria os cinco no mesmo tamanho. */
[data-wp~="hscroll-all"].e-con{--overflow:auto}
[data-wp~="hscroll-all"]{
  scroll-snap-type:inline mandatory;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
[data-wp~="hscroll-all"]::-webkit-scrollbar{width:0;height:0;display:none}
[data-wp~="hscroll-all"]>.e-con.e-flex{--flex-shrink:0}
[data-wp~="hscroll-all"]>*{scroll-snap-align:start}

/* ---------- preenchimento só nas pontas ---------- */
/* Espelho do `--border-glass` em forma de FUNDO: branco a 20% nos dois cantos
   da diagonal, transparente no miolo. Pedido do Igor em 12/08, no lugar do card
   totalmente vazado.

   ⚠️ Por que não sai do painel: o gradiente nativo de container do Elementor
   tem DUAS paradas (cor A, cor B, ângulo e as duas posições). Este tem quatro,
   e as duas do meio precisam ser transparentes ao mesmo tempo. */
:root{
  /* Revisado em 12/08 a pedido do Igor: o brilho das pontas se espalha
     mais (miolo transparente entre 40% e 60%, no lugar de 20% e 80%) e
     pesa menos (12% no lugar de 20%). */
  --fill-edges:linear-gradient(45deg,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,.12) 100%);
}
[data-wp~="fill-edges"]{background-image:var(--fill-edges)}

/* ---------- esmaecimento das pontas da faixa rolável ---------- */
/* Para o card que entra e sai da faixa não aparecer cortado na borda.

   ⚠️ Nasce RECOLHIDO (`--fade-l` e `--fade-r` em 0). Com `scroll-snap`, uma
   faixa parada mostra o card da borda INTEIRO: um esmaecimento fixo comeria a
   borda de um card que está em repouso, que é justamente o que não se quer.
   Quem abre a máscara durante a rolagem é o JS da seção.

   O `@property` dá tipo às duas variáveis. Sem ele o navegador trata a variável
   como texto e não interpola: a máscara apareceria de um quadro para o outro em
   vez de abrir. Onde não houver suporte, o efeito segue, só sem suavização. */
/* ⚠️ FIXO desde 12/08, por decisão do Igor. A 1ª versão abria a máscara
   ao rolar e recolhia ao parar, para não comer a borda do card em
   repouso; na prática o vai e vem chamava mais atenção que o corte. Agora
   o esmaecimento está sempre lá, dos dois lados.
   Some junto o `@property`, que só existia para interpolar esse vai e
   vem, e a transição. O tamanho fica numa variável para ajuste. */
[data-wp~="fade-x"]{
  --fade:56px;
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0,#000 var(--fade),
    #000 calc(100% - var(--fade)),transparent 100%);
  mask-image:linear-gradient(90deg,
    transparent 0,#000 var(--fade),
    #000 calc(100% - var(--fade)),transparent 100%);
  /* ⚠️ Sem isto o esmaecimento cai POR CIMA do primeiro card.
     A faixa abre uma calha do tamanho do `--fade` com `padding` + `margin`
     negativa, para o gradiente cair em espaço vazio. Só que o `scroll-snap`
     ignora o padding e alinha o card na borda da CAIXA: medido no ar, o
     trilho nascia com `scrollLeft:56`, exatamente anulando a calha.
     `scroll-padding` é o que ensina o encaixe a respeitar a calha. */
  scroll-padding-inline:var(--fade);
}
/* As setas do carrossel ficam POR CIMA da faixa. Com a margem negativa a caixa
   do trilho cresce para cima delas e passa a roubar o clique — medido: o
   `elementFromPoint` sobre a seta devolvia o card. `z-index` sozinho não
   resolve, porque o Elementor emite o valor mas o elemento segue `static`. */
[data-rolar]{position:relative;z-index:3}

@media(max-width:767px){
  [data-wp~="hscroll"].e-con{--overflow:auto}
  [data-wp~="hscroll"]{
    scroll-snap-type:inline mandatory;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  [data-wp~="hscroll"]::-webkit-scrollbar{width:0;height:0;display:none}
  [data-wp~="hscroll"]>.e-con.e-flex{--flex-shrink:0}
  [data-wp~="hscroll"]>*{
    scroll-snap-align:start;
    aspect-ratio:var(--hscroll-ratio,229/400);
  }
}

/* Lightbox de vídeo: cantos arredondados e a CAIXA COLADA NO VÍDEO.
   Escopado na página 307: outras páginas seguem com o comportamento padrão.

   ⚠️ A partir de 768px APENAS. A caixa foi desenhada para desktop: trava a
   altura em `min(86vh,940px)` e sobra 6vw de cada lado para o clique de fechar.
   Num telefone isso deixa o vídeo pequeno no meio de uma tela quase vazia. No
   mobile o vídeo abre em cheio, no bloco logo abaixo.

   Medido ao vivo em 09/08: entre o container e o `<video>` existe um
   `.elementor-video-wrapper` que ocupa a largura toda (2176px numa tela de
   2560), e o vídeo de 477px fica encostado na ESQUERDA dele. O container
   herdava 2406px de largura e 819px de altura contra 847px do vídeo, então
   o rodapé era cortado e levava junto o raio de baixo.
   A correção centra pelo PAI em flex e deixa container e wrapper com largura
   automática, para a caixa ficar do tamanho exato do vídeo.
   De quebra resolve o fechar: o container carrega a classe nativa
   `elementor-lightbox-prevent-close`, e enquanto ele era gigante o clique ao
   lado do vídeo caía dentro da área que o Elementor protege. */
@media(min-width:768px){
  body:is(.page-id-307,.page-id-557) .elementor-lightbox .dialog-lightbox-message{
    display:flex;align-items:center;justify-content:center;
  }
  body:is(.page-id-307,.page-id-557) .elementor-lightbox .elementor-video-container{
    position:relative;inset:auto;transform:none;
    width:auto;height:auto;max-width:94vw;flex:0 0 auto;
    padding:0!important;margin:0;line-height:0;
    display:block;border-radius:20px;overflow:hidden;
  }
  body:is(.page-id-307,.page-id-557) .elementor-lightbox .elementor-video-wrapper{
    width:auto!important;height:auto!important;padding:0!important;display:block;
  }
  body:is(.page-id-307,.page-id-557) .elementor-lightbox video{
    position:static!important;display:block!important;
    width:auto!important;height:min(86vh,940px)!important;max-width:94vw;
    object-fit:contain;border-radius:20px;
  }
}

/* No mobile o vídeo abre EM CHEIO, sem caixa e sem raio, AJUSTADO PELA LARGURA:
   ocupa os 100vw e a altura sai da proporção, centrado na vertical.

   ⚠️ 1ª versão: `object-fit: cover` numa caixa de 100vw por 100dvh. Cortava as
   laterais, que é justamente onde a pessoa aparece nos depoimentos. `cover`
   preenche a tela mas sacrifica o enquadramento; aqui a largura é o que não
   pode ser perdido, então a régua é ela.
   `max-height: 100dvh` é a trava para telas baixas, e `contain` deixa a tarja
   nas pontas em vez de cortar. `100dvh` em vez de `100vh` por causa da barra do
   navegador que aparece e some.

   O X de fechar sobe de 20 para 34px. O tamanho é a variável do próprio
   Elementor (`--lightbox-header-icons-size`), declarada por ele em
   `:where(.elementor-lightbox)`, ou seja com especificidade ZERO: basta
   redeclarar, sem `!important`. O `padding: .25em` dele acompanha e a área de
   toque passa de ~30 para ~51px.

   O clique ao lado deixa de existir como forma de fechar quando o vídeo ocupa
   a largura toda; o X e o Esc continuam. */
@media(max-width:767px){
  body:is(.page-id-307,.page-id-557) .elementor-lightbox{--lightbox-header-icons-size:34px}
  /* centragem: a NATIVA do Elementor, não uma flex minha. O `.dialog-message`
     carrega a animação de entrada, e pendurar o alinhamento nele deixa a caixa
     refém dela. */
  body:is(.page-id-307,.page-id-557) .elementor-lightbox .elementor-video-container{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:100%;max-width:100%;height:auto;
    padding:0!important;margin:0;line-height:0;border-radius:0;
  }
  body:is(.page-id-307,.page-id-557) .elementor-lightbox .elementor-video-container
    .elementor-video-portrait,
  body:is(.page-id-307,.page-id-557) .elementor-lightbox .elementor-video-wrapper{
    width:100%!important;max-width:100%!important;height:auto!important;
    padding:0!important;margin:0;display:block;
  }
  body:is(.page-id-307,.page-id-557) .elementor-lightbox .elementor-video-container video{
    position:static!important;display:block!important;
    width:100%!important;max-width:100%!important;
    height:auto!important;max-height:100dvh;
    object-fit:contain;border-radius:0;
  }
}

/* Saída do lightbox deslizando para baixo.
   A ENTRADA é nativa: controle "Animação de entrada" do widget de vídeo, com
   `slideInUp`. Medido em 09/08: o Elementor aplica a animação na
   `.dialog-lightbox-message`, que é só a caixa do vídeo, e não no fundo
   escurecido. É exatamente o recorte pedido, então nada de CSS para a entrada.
   Já a SAÍDA não existe no Elementor: ele esconde o modal de uma vez. Daqui
   sai só o keyframe; quem segura o fechamento pelos 300ms é o widget de JS
   dentro da `wf-prova`. Espelha o `slideInUp`, que também parte de 100%. */
@keyframes wp-lb-down{
  from{transform:translate3d(0,0,0);opacity:1}
  to{transform:translate3d(0,100%,0);opacity:0}
}
body:is(.page-id-307,.page-id-557) .elementor-lightbox .dialog-lightbox-message.wp-lb-saindo{
  animation:wp-lb-down .5s ease-in-out both;
}
/* A entrada nativa vem com .3s e curva própria, e o painel não expõe duração
   para a animação do lightbox. Aqui só o tempo e a curva são reescritos; o
   keyframe e o gatilho seguem sendo os do Elementor. Mesmos .5s da saída. */
body:is(.page-id-307,.page-id-557) .elementor-lightbox .dialog-lightbox-message.animated{
  animation-duration:.5s;animation-timing-function:ease-in-out;
}
@media(prefers-reduced-motion:reduce){
  body:is(.page-id-307,.page-id-557) .elementor-lightbox .dialog-lightbox-message.wp-lb-saindo{
    animation:none;
  }
}

/* Vídeo preenchendo um card: sem controles, sem barra preta, sem caixa de proporção. */
.wp-vidfill,.wp-vidfill .elementor-widget-container{height:100%}
.wp-vidfill .elementor-wrapper{height:100%;aspect-ratio:auto;padding:0}
.wp-vidfill .elementor-wrapper:before{display:none}
.wp-vidfill video{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
/* O Elementor pinta o <video> de preto em
   `.elementor-widget-video .elementor-wrapper video` (especificidade 0,2,1).
   Precisa de seletor mais forte para o primeiro quadro, posto como fundo do
   card, aparecer enquanto o vídeo não carrega. */
.wp-vidfill.elementor-widget-video .elementor-wrapper video{background-color:transparent}

/* Vidro escuro das pills e dos cards de produto. Reaproveita os tokens que já
   existiam: --glass-bg (rgba(0,0,0,.41)) e --blur-glass (20px). */
.wp-glassbar,[data-wp~="glassbar"]{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--blur-glass));
  backdrop-filter:blur(var(--blur-glass));
  position:relative;
}
/* Traço em gradiente. O painel do Elementor só faz borda de cor sólida, então
   o gradiente vem por ::before com máscara, que respeita o border-radius. */
.wp-glassbar::before,[data-wp~="glassbar"]::before,
[data-wp~="gradbox"]::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--border-glass);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
[data-wp~="gradbox"]{position:relative}
[data-wp~="gradbox"]::before{background:var(--border-box)}
/* Traço em gradiente avulso, sem vir junto com fundo nenhum. Existe para
   compor: `data-wp|frost edge` põe o contorno de --border-glass (claro nas
   pontas, apagado no meio) sobre o vidro fosco, que é o desenho da barra
   inferior do hero. O .wp-glassbar traz o mesmo traço, mas arrasta o
   --glass-bg escuro junto e por isso não serve aqui.

   ⚠️ VAI EM ::after, DE PROPÓSITO. A "Sobreposição de fundo" do Elementor é
   renderizada no ::before do container, com !important nas variáveis dela.
   Enquanto o `edge` usava ::before, num container que também tivesse
   sobreposição os dois brigavam e o traço sumia: foi o que aconteceu nos três
   cards da seção 3 da WiemsFit, que têm foto + véu. Em ::after os dois
   convivem. Vale o mesmo para edge-soft e edge-soft-b. */
.wp-edge,[data-wp~="edge"]{position:relative}
.wp-edge::after,[data-wp~="edge"]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--border-glass);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}

/* Vidro fosco: blur real do que está atrás (backdrop-filter). */
.wp-frost,[data-wp~="frost"]{
  background:var(--frost-bg);
  -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(120%);
  backdrop-filter:blur(var(--frost-blur)) saturate(120%);
  border-radius:var(--radius-sm);
}

/* Palco: trava a largura das imagens de fundo e as mantém centradas.
   Impede que cresçam (e cortem a cabeça) em monitores largos. */
.wp-stage,[data-wp~="stage"]{
  position:absolute;
  top:0;bottom:0;left:50%;
  translate:-50% 0;
  width:min(100%,var(--stage-max));
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
/* Conteúdo acima do palco */
.wp-above,[data-wp~="above"]{position:relative;z-index:1}

/* ===== Componentes promovidos da Home (page 68) — 04/08/2026 =====
   A Home é a referência oficial. As regras abaixo vieram dos widgets HTML dela
   com o escopo `#wpx` removido, para valerem no site inteiro.
   NÃO inclui `--font` (Plus Jakarta Sans): trocar a tipografia do site é
   decisão à parte, o design system hoje é Roboto Flex.
   A Home continua com o CSS embutido; lá dentro ele segue vencendo porque
   carrega depois. Tirar o embutido da Home é o passo 2. */

:root{
  --bg:#060606;
  --surface:#161618;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.055);
  --line-strong:rgba(255,255,255,.22);
  --text:#ffffff;
  --text-2:#c8c6c5;
  --text-3:#8a9198;
  --cyan:#43e0e6;
  --cyan-glow:rgba(67,224,230,.30);
  --btn-dark:linear-gradient(180deg,#2a2a2a 0%,#000 100%);
  --r-pill:999px;
  --maxw:1180px;
  --gutter:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:84px;
  --accent:var(--cyan);
  --accent-soft:var(--cyan-glow);
  --accent-text:#0b0b0c;
}

/* ---------- botões (fonte: hero da Home) ---------- */
/* ---- btn base (nav) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:14px 26px;border-radius:var(--r-pill);font-size:.95rem;font-weight:600;letter-spacing:-.01em;line-height:1;white-space:nowrap;border:none;cursor:pointer;font-family:inherit;transition:transform .25s var(--ease),box-shadow .35s var(--ease),background .3s,border-color .3s,color .3s}
.btn svg{width:1.05em;height:1.05em;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-light{background:#fff;color:#080808;box-shadow:0 1px 0 rgba(255,255,255,.4) inset}
.btn-light:hover svg{transform:translateX(3px)}
.btn-dark{background:var(--btn-dark);color:var(--text-2);border:1px solid var(--line-strong)}
.btn-dark:hover{color:#fff;border-color:rgba(255,255,255,.55)}
.btn-sm{padding:10px 20px;font-size:.86rem}
/* nomes do kit apontando para o mesmo componente, para link cru (<a class="wp-btn">).
   A guarda `:not(.elementor-widget-button)` é OBRIGATÓRIA. O `_css_classes` do
   Elementor cai no WRAPPER do widget, não no <a>. Sem a guarda, estas regras
   pintam o wrapper e o compound logo abaixo pinta o <a>: o botão aparece duas
   vezes, um dentro do outro (pill de 217x71 com pill de 165x43 dentro).
   Diagnosticado ao vivo em 04/08/2026 na page 114. */
.wp-btn:not(.elementor-widget-button){display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:14px 26px;border-radius:var(--r-pill);font-size:.95rem;font-weight:600;letter-spacing:-.01em;line-height:1;white-space:nowrap;border:none;cursor:pointer;font-family:inherit;text-decoration:none;transition:transform .25s var(--ease),box-shadow .35s var(--ease),background .3s,border-color .3s,color .3s}
.wp-btn:not(.elementor-widget-button) svg{width:1.05em;height:1.05em;transition:transform .3s var(--ease)}
.wp-btn:not(.elementor-widget-button):hover{transform:translateY(-2px)}
.wp-btn--light:not(.elementor-widget-button){background:#fff;color:#080808;box-shadow:0 1px 0 rgba(255,255,255,.4) inset}
.wp-btn--light:not(.elementor-widget-button):hover svg{transform:translateX(3px)}
.wp-btn--dark:not(.elementor-widget-button){background:var(--btn-dark);color:var(--text-2);border:1px solid var(--line-strong)}
.wp-btn--dark:not(.elementor-widget-button):hover{color:#fff;border-color:rgba(255,255,255,.55)}
.wp-btn--sm:not(.elementor-widget-button){padding:10px 20px;font-size:.86rem}

/* ---------- o mesmo botão, vestindo o widget do Elementor ----------
   O `_css_classes` do Elementor cai no wrapper do widget, não no <a>. Estes
   seletores fazem a classe do componente alcançar o <a class="elementor-button">.
   O `.elementor-widget-button` no compound é obrigatório: sem ele empata em
   especificidade com `.elementor-widget-button .elementor-button`, que o
   Elementor carrega depois e venceria por ordem. */
.wp-btn.elementor-widget-button .elementor-button{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:14px 26px;border-radius:var(--r-pill);font-size:.95rem;font-weight:600;letter-spacing:-.01em;line-height:1;white-space:nowrap;border:none;cursor:pointer;font-family:inherit;text-decoration:none;transition:transform .25s var(--ease),box-shadow .35s var(--ease),background .3s,border-color .3s,color .3s}
.wp-btn.elementor-widget-button .elementor-button svg{width:1.05em;height:1.05em;transition:transform .3s var(--ease)}
.wp-btn.elementor-widget-button .elementor-button:hover{transform:translateY(-2px)}
.wp-btn--light.elementor-widget-button .elementor-button{background:#fff;background-color:#fff;color:#080808;box-shadow:0 1px 0 rgba(255,255,255,.4) inset}
.wp-btn--light.elementor-widget-button .elementor-button:hover svg{transform:translateX(3px)}
.wp-btn--dark.elementor-widget-button .elementor-button{background:var(--btn-dark);background-color:transparent;color:var(--text-2);border:1px solid var(--line-strong)}
.wp-btn--dark.elementor-widget-button .elementor-button:hover{color:#fff;border-color:rgba(255,255,255,.55)}
.wp-btn--sm.elementor-widget-button .elementor-button{padding:10px 20px;font-size:.86rem}

/* ---------- marquee ---------- */
.wpx-mq{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%)}.wpx-mq__track{display:flex;width:max-content;animation:wpxMqScroll 38s linear infinite}.wpx-mq__set{display:flex;align-items:center;gap:clamp(40px,5vw,64px);padding-right:clamp(40px,5vw,64px);flex:0 0 auto}.wpx-mq__set img{height:40px;width:auto;max-width:140px;object-fit:contain;display:block;opacity:.72}@keyframes wpxMqScroll{to{transform:translateX(calc(-100% / 3))}}@media(prefers-reduced-motion:reduce){.wpx-mq__track{animation:none}}

/* ---------- carrossel coverflow + card + tag ---------- */
/* =========================================================================
   WiemsPro Coverflow — estilos isolados sob .wp-coverflow
   ========================================================================= */
.wp-coverflow{
  --wp-bg: transparent;          /* fundo: deixe transparente p/ herdar a seção */
  --wp-card-w: 160px;            /* lado de cada card quadrado (todos iguais; só o ativo escala) */
  --wp-grow: 1.3;                /* escala do ativo (o JS sincroniza com SCALE_ACTIVE) */
  --wp-radius: 20px;
  --wp-tag-fg: #ffffff;                 /* texto das tags (branco) */
  --wp-caption: #b9b9c2;
  --wp-ease: cubic-bezier(.22,.61,.36,1);

  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 0 4px;
  box-sizing: border-box;
  background: var(--wp-bg);
  /* Fonte Flex em tudo (cai p/ Roboto Flex se Google Sans Flex não existir no site) */
  font-family: "Google Sans Flex", "Roboto Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
}
.wp-coverflow *,
.wp-coverflow *::before,
.wp-coverflow *::after{ box-sizing: border-box; }

/* Viewport: corta as bordas e cria o esfumado lateral (vinheta).
   O padding do topo abre espaço para o card ativo crescer (ele sobe a partir
   da base) sem ser recortado. É calculado a partir de --wp-grow e do tamanho
   do card, então se autoajusta quando você muda a escala do ativo. */
.wp-coverflow__stage{ position: relative; }
.wp-coverflow__viewport{
  position: relative;
  overflow: hidden;
  padding: calc(var(--wp-card-w) * (var(--wp-grow) - 1) + 60px) 0 36px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-image:         linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
}

/* Swiper precisa "vazar" para os cards laterais aparecerem espiando */
/* Escopado sob .wp-coverflow de propósito: este elemento também carrega a
   classe `.swiper`, e o swiper-bundle.min.css vem da CDN jsdelivr DEPOIS do
   post-4.css. Como `.swiper{overflow:hidden}` tem a mesma especificidade que
   `.wp-coverflow__swiper`, quem carrega por último vencia e os cards laterais
   paravam de espiar. Com o escopo (0,2,0) o kit vence em qualquer ordem. */
.wp-coverflow .wp-coverflow__swiper{ overflow: visible; }
/* Alinha todos os cards pela base */
.wp-coverflow .swiper-wrapper{ align-items: flex-end; }

/* ---------- Card ---------- */
/* Escala/opacidade/filter são aplicados via JS (inline style) para
   evitar conflito com regras do Swiper CSS. Aqui ficam só as props
   que não dependem do estado. */
/* Escopado sob .wp-coverflow de propósito: o card também carrega
   `.swiper-slide`, e o swiper-bundle.min.css (CDN jsdelivr) carrega depois do
   post-4.css. `.swiper-slide{width:100%;height:100%;transition-property:transform}`
   tem a mesma especificidade que `.wp-card`, então vencia por ordem e levava
   junto a largura (o card virava a largura toda do palco), a altura e as
   transições de opacity/filter. Com o escopo (0,2,0) o kit vence sempre.
   Enquanto esta CSS morava num <style> do widget da Home ela vinha DEPOIS do
   swiper e ganhava por ordem; ao ser promovida para o kit passou a vir antes. */
.wp-coverflow .wp-card{
  width: var(--wp-card-w);
  height: auto;
  transform-origin: center bottom;
  transition:
    transform .6s var(--wp-ease),
    opacity .6s var(--wp-ease),
    filter .6s var(--wp-ease);
  will-change: transform, opacity;
}
/* z-index é definido via JS (inline) por slide, para empilhar o ativo na frente */

/* ---------- Mídia / imagem ---------- */
.wp-card__media{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--wp-radius);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #2a2a30 0%, #171719 55%, #0e0e10 100%);
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: border-radius .6s var(--wp-ease), box-shadow .6s var(--wp-ease);
}
/* o raio do ativo é contra-escalado via JS (ver applyStyles), para renderizar
   os mesmos 20px visuais dos demais mesmo estando ampliado */
.wp-card.swiper-slide-active .wp-card__media{
  box-shadow: 0 28px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
}
.wp-card__media.has-image .wp-card__ph{ display:none; }
.wp-card__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* Rótulo placeholder (somente enquanto não há imagem) */
.wp-card__ph{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding: 26px 22px;
  font-size: 12.5px; line-height: 1.5; letter-spacing:.2px;
  color: #8a8a93;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 12px, rgba(255,255,255,0) 12px 24px);
}
.wp-card__ph::before{
  content:"◻ imagem";
  position:absolute; top:14px; left:14px;
  font-size: 10px; letter-spacing:1.4px; text-transform:uppercase;
  color:#6c6c75;
}

/* ---------- Tags (reveladas só no card ativo) ---------- */
.wp-card__tags{
  position:absolute; left:0; right:0; bottom:12px;
  display:flex; flex-wrap:nowrap; gap:6px; justify-content:center;
  padding:0 8px;             /* garante no mínimo 8px de respiro das bordas */
  opacity:0; transform: translateY(8px);
  transition: opacity .45s var(--wp-ease), transform .45s var(--wp-ease);
  pointer-events:none;
}
.wp-card.swiper-slide-active .wp-card__tags{
  opacity:1; transform: translateY(0);
  transition-delay: .18s;
}
/* Tags flat: cor de fundo sólida (pintada por tag pelo JS), sem sombra/relevo */
.wp-tag{
  display:inline-flex; align-items:center;
  padding: 3px 9px;
  background: #34343c;        /* fallback até o JS pintar cada tag */
  color: var(--wp-tag-fg);
  font-size: 8px; font-weight: 400; line-height:1; letter-spacing:.2px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Texto inferior (muda conforme o ativo) ---------- */
.wp-coverflow__caption{
  margin: 18px auto 0;
  max-width: 620px;
  height: 5em;
  overflow: hidden;
  padding: 0 20px;
  text-align:center;
  color: var(--wp-caption);
  font-size: 15.5px; line-height: 1.55;
  opacity: 1;
  transition: opacity .35s var(--wp-ease);
}
.wp-coverflow__caption.is-changing{ opacity: 0; }

/* O texto vive dentro do card (fonte da verdade), mas não é exibido lá */
.wp-card__text{ display:none; }

/* ---------- Setas ---------- */
.wp-coverflow__nav{
  position:absolute; top:50%; transform: translateY(-50%);
  z-index: 8;
  width: 44px; height: 44px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #e9e9ef;
  border-radius: 999px;
  cursor:pointer;
  opacity: 0;
  transition: opacity .3s var(--wp-ease), background .25s var(--wp-ease), transform .25s var(--wp-ease);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.wp-coverflow:hover .wp-coverflow__nav{ opacity: .9; }
.wp-coverflow__nav:hover{ background: rgba(255,255,255,.14); }
.wp-coverflow__nav:active{ transform: translateY(-50%) scale(.94); }
.wp-coverflow__nav svg{ width:22px; height:22px; }
.wp-coverflow__nav--prev{ left: 6px; }
.wp-coverflow__nav--next{ right: 6px; }
.wp-coverflow__nav.swiper-button-disabled{ opacity:0 !important; pointer-events:none; }

/* ---------- Responsivo ---------- */
@media (max-width: 1024px){
  .wp-coverflow{ --wp-card-w: 150px; }
}
@media (max-width: 680px){
  .wp-coverflow{ --wp-card-w: calc(100vw - 40px); }
  .wp-coverflow__caption{ font-size: 14.5px; height: 8em; }
  .wp-coverflow__nav{ display:none; }
  .wp-tag{ font-size: 12px; }
}
@media (max-width: 420px){
  .wp-coverflow__caption{ height: 9em; }
}

/* Acessibilidade: respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce){
  .wp-card, .wp-card__tags, .wp-coverflow__caption{ transition: none !important; }
}

/* ---------- abas do ecossistema (partes reutilizáveis) ---------- */
.wmp-ecos-tab .elementor-button{
  width:100%; justify-content:center;
  background:rgba(255,255,255,0) !important;
  border:1px solid #e9e9e9 !important;
  border-radius:20px !important;
  color:rgba(233,233,233,0.87) !important;
  padding:6px 5px !important;
  font-size:14px !important; font-weight:500 !important;
  letter-spacing:-0.132px; line-height:1.2 !important;
  box-shadow:none !important;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}.wmp-ecos-tab .elementor-button:hover{ border-color:#ffffff !important; }.wmp-ecos-tab.is-active .elementor-button{
  background:linear-gradient(90deg,#ffffff 0%,#e5e5e5 100%) !important;
  color:rgba(0,0,0,0.87) !important;
  border-color:#e9e9e9 !important;
}.wmp-ecos-hl ul{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  margin:0; padding:0; list-style:none;
}.wmp-ecos-hl li::before{
  content:'\2022'; position:absolute; left:2px; color:rgba(213,213,213,0.6);
}.elementor-element-ecrshow, .elementor-element-ecracad,
.elementor-element-ecrsoft, .elementor-element-ecrsupo{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; width:100%;
}.wmp-ecos-cta{ flex:0 0 auto; }

/* ===== Coverflow — variante "trio" (2026-08-06) =====================
   Usada na seção "Aplicações e Benefícios" da página Soluções v2.
   Mesmo componente da Home, calibrado p/ mostrar 3 cards nítidos.

   Geometria, com os números do layout:
     150 (lateral) + 20 (gap) + 268 (ativo) + 20 (gap) + 150 (lateral) = 608
   O ativo é o lateral ampliado por --wp-grow: 150 x 1.787 = 268.

   O palco é MAIOR que esses 608: sobra um avental de --wp-fade de cada lado,
   fora da faixa nítida. É nele que a máscara dissolve os cards que entram e
   saem, então nenhum card aparece guilhotinado na borda. A faixa opaca mede
   exatamente 608, ou seja, os 3 cards em repouso ficam 100% nítidos e só o
   4º, que já está fora da faixa, aparece como fantasma esmaecido. */
.wp-coverflow--trio{
  --wp-card-w: 150px;
  --wp-trio-w: 608px;
  --wp-fade: 56px;
  max-width: calc(var(--wp-trio-w) + var(--wp-fade) * 2);
}
.wp-coverflow--trio .wp-coverflow__viewport{
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 var(--wp-fade),
    #000 calc(100% - var(--wp-fade)),
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0,
    #000 var(--wp-fade),
    #000 calc(100% - var(--wp-fade)),
    transparent 100%);
}
.wp-coverflow--trio .wp-coverflow__caption{ max-width: 528px; }

@media (max-width: 680px){
  /* No mobile o componente mostra UM card só: o JS zera a opacidade dos
     vizinhos. Então o card cresce para 80vw e a vinheta sai de cena, porque
     sem vizinho para dissolver ela só comeria as bordas do card ativo. */
  .wp-coverflow--trio{
    max-width: 100%;
    --wp-card-w: 80vw;
    /* trava em 1: o JS também zera o grow no mobile, mas ele depende de um
       resize chegar. Se a página carrega larga e só depois estreita, o grow
       de desktop (1.787) ficava, o card estourava e sobrava um rasgo de
       padding no topo do palco. Aqui o CSS decide, sem depender de timing. */
    --wp-grow: 1 !important;
  }
  .wp-coverflow--trio .wp-coverflow__viewport{
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* O Elementor devolve --width:100% no breakpoint mobile (o fit-content do
     painel vale só no desktop), e a pílula esticava na largura da tela.
     Volta a vestir os rótulos; o align-items:center da seção centraliza. */
  #v2apl-sw{
    --width: fit-content;
    width: fit-content;
  }
}

/* ===== Alternador de marca, estilo Material ==========================
   Uma pílula única que desliza entre as abas, em vez de a cor do fundo
   pular de um botão para o outro. Os dois botões são containers do
   Elementor, marcados por _element_id; o JS injeta a pílula e a classe,
   porque container não emite _css_classes no DOM.
   A curva é a "emphasized decelerate" do Material 3. */
#v2apl-sw{ position: relative; }
#v2apl-sw .v2apl-ind{
  position: absolute;
  z-index: 0;
  left: 0;
  /* top, height e width saem do próprio botão, medidos pelo JS. Não fixar
     aqui: assim o padding da pílula-mãe continua editável no painel do
     Elementor sem desalinhar o indicador. */
  top: 0; height: 0; width: 0;
  border-radius: 20px;
  background: #000;
  pointer-events: none;
  transform: translateX(0);
  transition: transform .42s cubic-bezier(.2, 0, 0, 1),
              width     .42s cubic-bezier(.2, 0, 0, 1);
}
#v2apl-sw .v2apl-tab{
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 20px;
  background: transparent !important;   /* quem pinta agora é a pílula */
  -webkit-tap-highlight-color: transparent;
  /* Container do Elementor nasce com width:100% e flex-shrink:1, então as
     duas abas encolhiam para a MESMA largura e o rótulo mais longo não
     cabia: "WIEMSFIT" pede 67.13px e a caixa dava 64.11px, transbordando
     3px à direita. Cada aba veste o próprio rótulo. */
  flex: 0 0 auto;
  width: auto;
}
#v2apl-sw .v2apl-tab .elementor-heading-title{
  transition: color .42s cubic-bezier(.2, 0, 0, 1);
  white-space: nowrap;
  /* Compensação óptica: o rótulo é itálico e a inclinação joga a tinta do
     último glifo além da largura de avanço, então a direita pede mais folga
     que a esquerda para PARECER simétrica. Fica no rótulo, não na aba, para
     não brigar com o padding que é editável no painel. */
  padding-right: 3px;
}
#v2apl-sw .v2apl-tab[aria-selected="true"]  .elementor-heading-title{ color:#fff !important; }
#v2apl-sw .v2apl-tab[aria-selected="false"] .elementor-heading-title{ color:#000 !important; }
#v2apl-sw .v2apl-tab:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){
  #v2apl-sw .v2apl-ind{ transition: none; }
  #v2apl-sw .v2apl-tab .elementor-heading-title{ transition: none; }
}

/* ===== wf — adições (2026-08-06): ticker de texto, número de card, microcopy ===== */
/* Aditivo. Só introduz nomes novos; não altera nenhuma regra existente do kit. */

/* ---------- ticker de texto ----------
   Promovido do hero da Home (widget wpxtick, que declarava as regras sob #wpx).
   Segunda página a consumir (Home + WiemsFit), então vira componente global.
   Consome --text-3 e --accent, que já vivem no kit desde a promoção de 04/08.
   Distinto de .wpx-mq, que é o marquee de LOGOS e trava img{height:40px}. */
.wp-ticker,[data-wp~="ticker"]{
  position:relative;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
}
.wp-ticker .ticker__row{
  display:flex;align-items:center;white-space:nowrap;padding:0;width:max-content;
  animation:wpTicker 32s linear infinite;
}
.wp-ticker .ticker__set{display:flex;align-items:center;gap:30px;padding-right:30px}
.wp-ticker .ticker__row span{
  font-size:.82rem;font-weight:600;color:var(--text-3);
  letter-spacing:.14em;text-transform:uppercase;
}
.wp-ticker .ticker__row i{
  width:5px;height:5px;border-radius:50%;background:var(--accent);
  flex:0 0 auto;opacity:.8;
}
@keyframes wpTicker{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.wp-ticker .ticker__row{animation:none}}

/* ---------- número de card (wf-estrut) ---------- */
/* Índice grande e discreto que fica no topo do card, com o título embaixo por
   space-between. Sem cor própria: herda a do container. */
.wp-num,[data-wp~="num"]{
  font-size:clamp(28px,3vw,40px);font-weight:200;line-height:1;
  letter-spacing:-.02em;opacity:.55;
}
.wp-num.elementor-widget-heading .elementor-heading-title{
  font-size:inherit;font-weight:inherit;line-height:inherit;
  letter-spacing:inherit;opacity:inherit;
}

/* ---------- microcopy ---------- */
/* Linha de apoio sob os botões do CTA final. Menor e mais apagada que .wp-desc. */
.wp-micro,[data-wp~="micro"]{font-size:12px;line-height:1.5;opacity:.6}
.wp-micro.elementor-widget-heading .elementor-heading-title{
  font-size:inherit;line-height:inherit;opacity:inherit;font-weight:400;
}

/* ===== Pílula de marca do CTA final (Figma 26:925) ===================
   Gradiente da cor da linha esvaindo para a direita, traço da mesma cor a
   60%. As cores vêm dos Globais (ebwp / ebonna), não hardcoded.
   O `_css_classes` cai no WRAPPER do widget, nunca no <a>: por isso o alvo
   é o compound `.wp-brandpill .elementor-button`, mesma armadilha já
   documentada em common.button(). */
.wp-brandpill.elementor-widget-button .elementor-button{
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 40px;
  border: 1px solid;
  font-family: var(--e-global-typography-secondary-font-family, "Roboto Flex");
  font-size: 24px;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.264px;
  line-height: 1;
  color: var(--e-global-color-text);
  box-shadow: none;
  transition: filter .35s var(--ease), transform .35s var(--ease);
}
.wp-brandpill.elementor-widget-button .elementor-button:hover{ filter: brightness(1.12); transform: translateY(-1px); }

/* O gradiente de cada marca fica numa variável declarada NO PRÓPRIO
   componente, e não em :root. Motivo: o Elementor declara os Globais em
   `.elementor-kit-4` (no body), não em :root. Uma variável posta em :root
   que referencie `var(--e-global-color-*)` não consegue substituir ali em
   cima, computa VAZIA e desce vazia por herança — a regra até casa, mas o
   background morre. Diagnosticado ao vivo em 06/08/2026. */
.wp-brandpill--wf{
  --pill: linear-gradient(258.88deg,
    var(--e-global-color-ebwp) 19.43%,
    color-mix(in srgb, var(--e-global-color-ebwp) 0%, transparent) 100.44%);
  --pill-traco: color-mix(in srgb, var(--e-global-color-ebwp) 60%, transparent);
}
.wp-brandpill--on{
  --pill: linear-gradient(246.20deg,
    var(--e-global-color-ebonna) 16.16%,
    color-mix(in srgb, var(--e-global-color-ebonna) 0%, transparent) 106.2%);
  --pill-traco: color-mix(in srgb, var(--e-global-color-ebonna) 60%, transparent);
}
.wp-brandpill.elementor-widget-button .elementor-button{
  background-image: var(--pill);
  border-color: var(--pill-traco);
}

/* Reforço durante a janela de lazy-load do Elementor.
   Ele apaga background-image de todo container top-level a partir do 4º ATÉ
   o IntersectionObserver marcá-lo, e a regra alcança os DESCENDENTES (`... *`)
   com !important e especificidade (0,5,0). Sem isto as pills nasceriam ocas,
   só com o traço, até o usuário rolar até elas. O #id sobe para (1,4,0) e
   vence. Some sozinho quando a seção é marcada. */
#v2cta:not(.e-lazyloaded) .wp-brandpill.elementor-widget-button .elementor-button{
  background-image: var(--pill) !important;
}
@media (max-width: 767px){
  .wp-brandpill.elementor-widget-button .elementor-button{ font-size: 19px; padding: 9px 16px; }
}

/* Coluna da foto do CTA: ancora no TOPO da linha (o Figma põe as duas em
   top~0), para o corte acontecer na BASE, que é onde encosta no rodapé. */
[data-wp~="ctafoto"]{ align-self: flex-start; }

/* Recorte alto do CTA: preenche a coluna sem distorcer. */
.wp-ctafoto img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: top center;
}

/* ---------- vidro grande ---------- */
/* O hero da WiemsFit (Figma 653:456) pede BACKGROUND_BLUR de 42px, contra os
   20px do --blur-glass. Vira modificador em vez de mudar o token, que é
   consumido por .wp-glass e .wp-glassbar no site inteiro. */
/* 42px era o valor do Figma (653:456) e ficou pesado ao vivo; o Igor pediu
   mais fraco em 07/08. Um token só, fácil de calibrar. */
:root{--blur-glass-lg:28px}
.wp-glassbar--lg,[data-wp~="glassbar-lg"]{
  -webkit-backdrop-filter:blur(var(--blur-glass-lg));
  backdrop-filter:blur(var(--blur-glass-lg));
}

/* ---------- vidro fosco grande ---------- */
/* A barra do splash da WiemsFit (Figma 28:2034) pede BACKGROUND_BLUR de 26px,
   contra os 13px do --frost-blur. Modificador, para não mexer no token, que a
   barra de abas do hero da Soluções v2 também consome. */
:root{--frost-blur-lg:26px}
/* ⚠️ O `saturate(120%)` tem de vir junto: `backdrop-filter` é uma propriedade
   só, então declarar apenas o blur aqui APAGA o saturate que o .wp-frost põe. */
.wp-frost--lg,[data-wp~="frost-lg"]{
  -webkit-backdrop-filter:blur(var(--frost-blur-lg)) saturate(120%);
  backdrop-filter:blur(var(--frost-blur-lg)) saturate(120%);
}

/* ===== wf — traços em gradiente que faltavam (2026-08-06, 2ª rodada) ===== */
/* Auditoria dos 25 nós com stroke GRADIENT da tela WiemsFit: o --border-glass
   cobre card de vidro e lockup (#CCC forte nas pontas, apagado no meio), mas
   feature-box e botão pedem outros dois desenhos. */
:root{
  /* feature-box dos trajes, coluna Slim Plus (Figma 687:3) */
  --border-soft:linear-gradient(180deg,rgba(27,43,69,.20) 0%,rgba(27,43,69,.05) 100%);
  /* feature-box dos trajes, coluna Revolution Pro (Figma 688:3): mesma ideia,
     tom neutro e sentido invertido */
  --border-soft-b:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.20) 100%);
  /* botão com traço em gradiente (Figma 678:339 e 706:948) */
  --border-btn:linear-gradient(180deg,#FFFFFF 0%,rgba(0,0,0,.5) 100%);
}
.wp-edge-soft,[data-wp~="edge-soft"],
.wp-edge-soft-b,[data-wp~="edge-soft-b"]{position:relative}
.wp-edge-soft::after,[data-wp~="edge-soft"]::after,
.wp-edge-soft-b::after,[data-wp~="edge-soft-b"]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.wp-edge-soft::after,[data-wp~="edge-soft"]::after{background:var(--border-soft)}
.wp-edge-soft-b::after,[data-wp~="edge-soft-b"]::after{background:var(--border-soft-b)}

/* Botão com traço em gradiente. Precisa do compound: o `_css_classes` cai no
   WRAPPER do widget, e quem tem o raio e o fundo é a âncora. */
.wp-btn--edge.elementor-widget-button .elementor-button{position:relative;border:none}
.wp-btn--edge.elementor-widget-button .elementor-button::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--border-btn);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.wp-btn--edge:not(.elementor-widget-button){position:relative;border:none}

/* ===== modo claro alternável por rolagem — PÁGINA INTEIRA (2026-08-07) =====
   Portado do hack da Home (widget 4d20a7d, seção wpx-credibilidade), onde um
   IntersectionObserver alterna `.is-light` e o CSS anima a troca em .9s.

   Diferença para a Home, a pedido do Igor: lá cada seção troca por si, o que
   cria emenda visível entre uma clara e a vizinha escura. Aqui **um container
   envolve o trecho claro e serve de escopo**, e a classe é alternada no
   `<body>`: a página inteira vira de uma vez e volta de uma vez, sem costura.

   Uso:
     - no container que envolve o trecho: `data-wp|escopo-claro`
     - em cada seção que deve acompanhar: `data-wp|banda`
       (fica de fora quem tem foto ou vídeo de fundo)
     - dentro, bloco sobre foto que mantém texto claro: `data-wp|sobrefoto`

   ⚠️ O `!important` é necessário: a cor de cada widget e o fundo de cada seção
   saem da CSS por-elemento do Elementor (`.elementor-N .elementor-element-X`,
   0,4,0), que venceria uma regra de kit. A Home resolveu com seletor de ID, o
   que um componente genérico não pode fazer. O escopo é estreito: só sob
   `body.wp-claro`. */

/* ⚠️ QUEM PINTA É O PAI, e só ele. A primeira versão repintava as oito seções
   marcadas, o que é oito vezes o mesmo trabalho e oito transições correndo em
   paralelo. Agora a seção `banda` é TRANSPARENTE e quem carrega a cor é o
   `<body>`, que já é o pai de todas. Uma transição, um repaint.
   Consequência prática: seção marcada com `banda` NÃO pode ter cor de fundo
   própria, senão tampa o pai e volta a criar emenda. */
body{transition:background-color .9s ease}
[data-wp~="banda"]{background-color:transparent}
[data-wp~="banda"] .elementor-heading-title,
[data-wp~="banda"] p,
[data-wp~="banda"] .wp-desc{transition:color .9s ease,border-color .9s ease}

body.wp-claro{background-color:var(--e-global-color-bglight)!important}
/* WiemsFit (307) pede #FFFFFF, e não o `bglight` #EEEEEE que veio junto do
   mecanismo da Home. O token é global e levaria a Home junto, então a exceção
   é escopada pela classe de página do WordPress. Especificidade 0,3,0 contra
   0,2,0 da regra acima, ambas com !important: esta vence.
   Os tokens de texto (`onlight`, `onlightbd`) seguem valendo. */
body:is(.page-id-307,.page-id-557,.page-id-622,.page-id-674).wp-claro{background-color:#FFFFFF!important}
/* ---------- pílula que funciona como ABA ---------- */
/* Duas pílulas alternando um conteúdo abaixo. O estado vem do
   atributo `data-ativa`, escrito pelo script da seção: a ativa fica
   branca com texto escuro, a inativa segue a pílula normal do kit.
   Genérico de propósito, para servir a qualquer par de abas.

   ⚠️ O texto mora num widget FILHO, então a cor precisa descer até
   ele: `_css_classes` cai no wrapper e não alcança o `<p>`. */
[data-aba]{cursor:pointer;transition:background-color .2s var(--ease),
  border-color .2s var(--ease)}
[data-aba][data-ativa="1"]{
  background-color:var(--e-global-color-text)!important;
  border-color:var(--e-global-color-text)!important;
}
[data-aba][data-ativa="1"] .elementor-heading-title{
  color:var(--e-global-color-onlight)!important;font-weight:700
}
[data-aba][data-ativa="0"]:hover{
  border-color:var(--e-global-color-meta)!important}

/* ---------- pontas e traço na faixa CLARA ---------- */
/* `--fill-edges` é branco a 12% e `--border-glass` é cinza claro:
   os dois somem sobre o branco. Na faixa clara eles precisam
   inverter para preto de baixa opacidade, que é o que o Figma da
   Educacional desenha nos cards do LinkedIn (fundo #F5F5F6 esmaecendo
   e traço #E7E7EA).

   ⚠️ ESCOPADO NA PÁGINA 674, DE PROPÓSITO. As páginas 307, 557 e 622
   têm 16 elementos com `edge`/`fill-edges` dentro das faixas claras
   delas (12 na WiemsFit, 3 na Onnafit, 1 na Sobre). Inverter para
   todo mundo mudaria três páginas já aprovadas sem ninguém pedir.
   Generalizar é decisão do Igor, e vale para o site inteiro. */
body.page-id-674.wp-claro [data-wp~="fill-edges"],
body.page-id-674.wp-claro .fill-edges{
  --fill-edges:linear-gradient(45deg,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,.05) 100%);
}
body.page-id-674.wp-claro [data-wp~="edge"],
body.page-id-674.wp-claro .wp-edge{
  --border-glass:linear-gradient(135deg,
    rgba(0,0,0,.12) 0%, rgba(0,0,0,.045) 25%,
    rgba(0,0,0,.045) 67.8%, rgba(0,0,0,.12) 100%);
}
body.wp-claro [data-wp~="banda"] .elementor-heading-title{
  color:var(--e-global-color-onlight)!important;
}
body.wp-claro [data-wp~="banda"] p,
body.wp-claro [data-wp~="banda"] .wp-desc,
/* ⚠️ Nesta página parágrafo é widget de TÍTULO com tag p: o mesmo elemento
   casa com `.elementor-heading-title` e com `p`, e a regra de classe vence.
   O compound `p.elementor-heading-title` desempata. */
body.wp-claro [data-wp~="banda"] p.elementor-heading-title{
  color:var(--e-global-color-onlightbd)!important;
}
/* Escotilha: bloco sobre foto continua com texto claro nos dois estados. */
body.wp-claro [data-wp~="banda"] [data-wp~="sobrefoto"] .elementor-heading-title,
body.wp-claro [data-wp~="banda"] [data-wp~="sobrefoto"] p,
body.wp-claro [data-wp~="banda"] [data-wp~="sobrefoto"] p.elementor-heading-title,
body.wp-claro [data-wp~="banda"] [data-wp~="sobrefoto"] .wp-desc{
  color:var(--e-global-color-text)!important;
}
@media(prefers-reduced-motion:reduce){
  body,
  [data-wp~="banda"] .elementor-heading-title,
  [data-wp~="banda"] p,
  [data-wp~="banda"] .wp-desc{transition:none}
}

/* ---------- botão de vidro ---------- */
/* A pílula "ver mais" dos cards da Estrutura da Solução (Figma 663:455) pede
   BACKGROUND_BLUR de 24. O `.wp-frost` não serve: arrasta `--frost-bg` e
   `border-radius` próprios, e aqui o fundo e o raio saem do controle nativo do
   botão. Então é só o blur, isolado.

   ⚠️ Compound obrigatório: `_css_classes` cai no WRAPPER do widget e quem tem
   o fundo e o raio é a âncora. Sem `.elementor-widget-button` no seletor, o
   blur ficaria no wrapper, que é transparente e do tamanho errado. */
:root{--blur-btn:24px}
.wp-btnglass.elementor-widget-button .elementor-button,
.wp-btnglass:not(.elementor-widget-button){
  -webkit-backdrop-filter:blur(var(--blur-btn));
  backdrop-filter:blur(var(--blur-btn));
}

/* ===== Camada de fundo animada (Lottie) com máscara nas laterais ==========
   Usada na faixa dos 77 países da Onnafit (`on-mundo`), onde o mapa parado deu
   lugar à animação.

   POR QUE PRECISA EXISTIR: o painel do Elementor TEM controle de máscara, só
   que apenas por forma ou por imagem/SVG. **Máscara em GRADIENTE não existe
   lá**, e é justamente o que o Igor pediu para esmaecer as duas laterais. A
   opacidade, essa sim, fica no controle nativo do widget, então segue editável.

   O widget vira uma camada de fundo: sai do fluxo, cobre o palco inteiro e não
   recebe clique, para o cartão de texto continuar por cima e selecionável. */
.wp-lottiebg{
  position:absolute;inset:0;margin:0;pointer-events:none;z-index:0;
}
/* ⚠️ As classes do widget têm DUPLO SUBLINHADO (`e-lottie__container`), e não
   hífen. Com o nome errado a altura não descia e o SVG saía 154px mais alto que
   a faixa, medido no ar. */
.wp-lottiebg,
.wp-lottiebg .elementor-widget-container,
.wp-lottiebg .e-lottie__container,
.wp-lottiebg .e-lottie__animation{height:100%;overflow:hidden}
/* O SVG do Lottie carrega `preserveAspectRatio` próprio e o widget não expõe
   controle para isso. Então ele mantém a proporção, ocupa a largura toda e o
   que sobra em altura é recortado pelo pai, centrado: o efeito é o de `cover`
   sem precisar tocar no atributo. */
.wp-lottiebg .e-lottie__animation{display:flex;align-items:center}
.wp-lottiebg svg{width:100%!important;height:auto!important;display:block}
/* Esmaece nos QUATRO lados. São duas máscaras sobrepostas e combinadas por
   INTERSEÇÃO: onde qualquer uma das duas é transparente, o pixel some. Sem o
   `mask-composite` elas se somariam e as pontas voltariam a aparecer.
   ⚠️ O prefixo antigo usa outro vocabulário (`-webkit-mask-composite:
   source-in`) e não entende `intersect`; os dois ficam, nesta ordem.
   18% nas laterais fecha com a largura do palco (926) sem comer o mapa; 16% em
   cima e embaixo, um pouco mais curto porque a faixa tem só 367 de altura. */
.wp-lottiebg{
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* ⚠️ O ARQUIVO DO MAPA É PRETO. Conferido no JSON: a animação tem exatamente
   DOIS preenchimentos, os dois `#000000`, sem traço. Sobre a faixa escura ela
   simplesmente não existia, e foi por isso que a primeira montagem pareceu não
   ter carregado nada.
   A cor entra pelo `fill`, e não por `filter: invert()` (que foi a 1ª saída e
   só sabe fazer branco). Medido no DOM: o lottie escreve a cor no ATRIBUTO
   `fill` do path, nunca em style inline, então uma regra de CSS a substitui sem
   precisar de acrobacia, e vale em qualquer quadro.
   A COR: o ciano da WiemsFit. ⚠️ Ele NÃO existe no design system. Procurado no
   Figma da WiemsFit (`27:1774`), os azuis de lá são `#004085` (o mais saturado,
   4 usos), `#1B2B45`, `#064651` e o `#B1CAD4` do rótulo: nenhum é ciano, e o
   `#004085` tem luminância 0,17 e sumiria sobre a faixa preta.
   O ciano vivo mora nas FOTOS do traje. Amostrado por matiz e saturação em três
   arquivos, o tom mais limpo saiu da foto da dupla de trajes. Escolhido pelo
   Igor entre os quatro medidos, em 10/08. */
:root{--map-azul:#03C9E8}
.wp-lottiebg svg path{fill:var(--map-azul)!important}

/* o cartão precisa ficar ACIMA da camada animada */
#on-mundo-card{position:relative;z-index:1}

/* ===== blog — template de post único (elementor_library 638) ==============
   Figma `745:1774`. Escopado em `body.single-post`: não alcança nenhuma das
   páginas construídas até aqui.

   Por que existe CSS nesta frente, se a regra é painel primeiro: o corpo do
   artigo vem do EDITOR como HTML solto (h2, h3, p, ul, blockquote, figure) e
   o widget `theme-post-content` não tem controle de tipografia por elemento.
   O resto do template é painel: pílula, título, data, foto, laço e botões.
   Sobraram três coisas para cá: o corpo do artigo, a pílula das tags (que
   sai do widget como lista de termos) e o fundo da tela. */
:root{
  /* O Figma do post usa #131313 de fundo, e não o #060606 das outras telas.
     Divergência de design registrada em `_handoff/blog/PLANO-BLOGPOST.md`:
     ou o blog é mais claro de propósito, ou o Figma escorregou. Enquanto o
     Igor não decide, vale o que está desenhado, e trocar é mudar esta linha. */
  --bg-post:#131313;
  --post-linha:#262626;      /* traço da pílula de tag e do card */
  --post-figura:#444748;     /* traço da imagem de apoio */
}
body.single-post{background-color:var(--bg-post)}

/* O H1 do post e o H2 do CTA usam o gradiente NEUTRO (branco → #A8A8B2), o
   mesmo que a Sobre trouxe para o kit. Sem esta linha eles herdariam o
   `--grad-title`, que é o azul-aço da WiemsFit. */
body.single-post .wp-gradtext .elementor-heading-title{
  background-image:var(--grad-title-neutro);
}

/* ---------- corpo do artigo ---------- */
.wp-article>*:first-child{margin-top:0}
/* ⚠️ Corpo em 18px, e não nos 16 do Figma. Pedido do Igor em 12/08, e a medida
   confirma: com 16px numa coluna de 768 o artigo saía a 87 caracteres por
   linha, contra os 60 a 75 confortáveis para leitura longa. Aumentar a fonte
   encurta a linha para ~77 sem mexer na coluna, que continua a do desenho.
   A cor sobe de `--text-2` #C8C6C5 para o `secondary` #E5E2E1: 14,4:1 de
   contraste contra os 10,9:1 de antes. Os dois já passam de AAA; a diferença
   é de percepção, que é do que o Igor reclamou. */
.wp-article p,.wp-article li{
  font-family:"Roboto Flex",sans-serif;font-size:18px;font-weight:400;
  line-height:1.75;color:var(--e-global-color-secondary);
}
.wp-article p{margin:0 0 22px}
.wp-article h2,.wp-article h3{
  font-family:"Roboto Flex",sans-serif;font-weight:600;line-height:1.25;
  color:#fff;
}
/* subiram junto com o corpo, para a hierarquia não achatar: 24→28 e 20→22 */
.wp-article h2{font-size:28px;margin:40px 0 14px}
.wp-article h3{font-size:22px;margin:32px 0 10px}
.wp-article strong{color:#fff;font-weight:600}
.wp-article a:not(.wp-btn){color:#fff;text-decoration:underline;text-underline-offset:3px}
.wp-article ul{margin:0 0 20px;padding-left:22px;list-style:disc}
.wp-article li{margin:0 0 10px}
.wp-article li::marker{color:var(--text-3)}

/* citação: barra de 4px só à esquerda, medida no `745:1804`
   (`individualStrokeWeights` = 0/0/0/4), e não borda nos quatro lados */
/* ⚠️ dois aprendizados numa regra só, ambos medidos no ar em 12/08.
   1. O tema declara `.entry-content blockquote` com barra cinza de 5px, mesma
      especificidade (0,1,1) do kit, e carrega DEPOIS: a barra branca do Figma
      perdia. Daí o `body.single-post` na frente, que leva para (0,2,1).
   2. Esta versão do Elementor NÃO emite mais o `div.elementor-widget-container`
      (markup otimizado): o conteúdo do post é filho DIRETO do widget. Um
      seletor com `.elementor-widget-container` no meio não casa com nada. */
body.single-post .wp-article blockquote{
  margin:31px 0;padding:17px 24px 16px 32px;border:0;font-style:normal;
  border-left:4px solid #fff;background:var(--surface-1b);
  font-size:24px;font-weight:600;line-height:1.3;color:#fff;
}
body.single-post .wp-article blockquote p{font:inherit;color:inherit;margin:0}
/* ⚠️ a barra precisa de um seletor com TRÊS classes. Quem estava vencendo é
   uma regra do próprio Gutenberg,
   `.wp-block-quote:not(.has-text-align-right):not(.has-text-align-center)`
   (0,3,0), que passa na frente de `body.single-post .wp-article blockquote`
   (0,2,2) por contar mais classes. Medido no ar: a barra saía cinza de 5px. */
body.single-post .wp-article blockquote.wp-block-quote{
  border-left:4px solid #fff;
}

/* imagem de apoio com legenda (`745:1807`) */
.wp-article figure{margin:31px 0;display:flex;flex-direction:column;gap:16px}
.wp-article figure img{
  display:block;width:100%;height:auto;border-radius:20px;
  border:1px solid var(--post-figura);
}
.wp-article figcaption{
  font-size:15px;font-weight:300;line-height:1.5;color:var(--text-2);
  text-align:left;margin:0;
}

/* ---------- pílulas das tags (`745:1814`) ----------
   O widget de informações do post entrega os termos como uma lista de <a>
   separada por texto. O `display:flex` na lista come os separadores e o gap
   fica com o espaçamento do Figma. */
.wp-tagpill .elementor-post-info{margin:0;padding:0}
/* O ícone de etiqueta e a vírgula entre os termos vêm do widget e NÃO saem
   pelo painel: tentei `show_icon:"no"` e `separator:" "` no repetidor, e o
   Elementor ignorou os dois (medido no ar em 12/08). A vírgula é um nó de
   texto solto entre os <a>, então morre com `font-size:0` na lista e volta a
   ter tamanho em cada pílula. */
.wp-tagpill .elementor-icon-list-icon{display:none}
.wp-tagpill .elementor-post-info__terms-list{
  display:flex;flex-wrap:wrap;gap:12px;font-size:0;
}
.wp-tagpill .elementor-post-info__terms-list a.elementor-post-info__terms-list-item{
  display:inline-flex;align-items:center;padding:8px 24px 10px;
  border-radius:20px;background:var(--surface-1);
  border:1px solid var(--post-linha);color:var(--text-2);
  font-size:14px;font-weight:500;line-height:1.4;text-decoration:none;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.wp-tagpill .elementor-post-info__terms-list a.elementor-post-info__terms-list-item:hover{
  border-color:var(--line-strong);color:#fff;
}

/* ---------- data ----------
   O WordPress em pt-BR devolve o mês em minúscula ("12 agosto, 2026") e o
   Figma mostra "24 Outubro, 2024". Uma letra, resolvida no CSS porque o
   formato de data do Elementor não tem controle de caixa. */
.elementor-element-bp-data .elementor-heading-title{text-transform:capitalize}

@media(max-width:767px){
  .wp-article p,.wp-article li{font-size:17px;line-height:1.7}
  .wp-article h2{font-size:24px;margin:32px 0 12px}
  .wp-article h3{font-size:20px}
  /* mesma briga de especificidade da barra: sem as três classes o Gutenberg
     e o tema vencem também aqui */
  body.single-post .wp-article blockquote.wp-block-quote{
    font-size:19px;padding:14px 16px 14px 20px;
  }
}

/* ===== blog — modo claro com interruptor ==================================
   O mecanismo `wp-claro` já existia no kit: a classe no `<body>`, a transição
   de 0,9s e os tokens `bglight` / `onlight` / `onlightbd`. Nas páginas ele é
   ligado por ROLAGEM (um observador acende quando a faixa clara entra). No
   blog isso não serve: leitura longa, e quem escolhe é o leitor.

   As regras abaixo não dependem de `single-post`: valem para o post e para a
   listagem, que vem a seguir e herda o interruptor pronto. */

/* ---------- o interruptor ----------
   A primeira versão deste bloco ficava aqui: 38x38, estático, dentro da
   trilha. Foi substituída pela versão flutuante que se abre no hover, mais
   abaixo neste arquivo. Ficava um `width:38px` órfão brigando com a altura
   nova, então o bloco antigo saiu inteiro. */

/* ---------- as superfícies do blog no modo claro ----------
   O `!important` acompanha o resto do mecanismo: a cor de cada widget sai da
   CSS por-elemento do Elementor (0,4,0), que venceria o kit. O escopo é
   estreito: só sob `body.wp-claro`. */
body.single-post.wp-claro{background-color:#FFFFFF!important}

/* título em gradiente: o neutro é branco→cinza e sumiria no branco.
   O valor escuro já existe no kit desde a Onnafit; aqui ele ganha um nome
   neutro, porque quem consome agora é o blog. */
:root{--grad-title-claro:var(--grad-title-onna)}
body.wp-claro .wp-gradtext .elementor-heading-title{
  background-image:var(--grad-title-claro);
}
/* escotilha: o CTA tem foto escura de fundo nos DOIS modos, então o título
   dele mantém o gradiente claro e o texto segue branco */
body.wp-claro #bp-cta .wp-gradtext .elementor-heading-title{
  background-image:var(--grad-title-neutro);
}
body.wp-claro #bp-cta .elementor-heading-title{color:#fff!important}

/* trilha, pílula da categoria e data */
body.wp-claro #bp-trilha .elementor-heading-title{
  color:var(--e-global-color-onlightbd)!important;
}
body.wp-claro #bp-trilha img{filter:invert(1)}
body.wp-claro .elementor-element-bp-pill{background-color:#F0F0F0!important}
body.wp-claro .elementor-element-bp-pill .elementor-heading-title,
body.wp-claro .elementor-element-bp-data .elementor-heading-title{
  color:var(--e-global-color-onlightbd)!important;
}
body.wp-claro .elementor-element-bp-data img{filter:invert(1)}
body.wp-claro [data-id="bp-foto"] img{border-color:#E0E0E0!important}

/* corpo do artigo */
body.wp-claro [data-id="bp-lead"] .elementor-heading-title{
  color:var(--e-global-color-onlight)!important;
}
body.wp-claro .wp-article p,
body.wp-claro .wp-article li{color:var(--e-global-color-onlightbd)}
body.wp-claro .wp-article h2,
body.wp-claro .wp-article h3,
body.wp-claro .wp-article strong{color:var(--e-global-color-onlight)}
body.wp-claro .wp-article a:not(.wp-btn){color:var(--e-global-color-onlight)}
body.wp-claro .wp-article blockquote.wp-block-quote{
  background:#F4F4F4;border-left-color:var(--e-global-color-onlight);
  color:var(--e-global-color-onlight);
}
body.wp-claro .wp-article figure img{border-color:#E0E0E0}
body.wp-claro .wp-article figcaption{color:#5A5A5A}

/* pílulas de tag e cards do laço */
body.wp-claro .wp-tagpill .elementor-post-info__terms-list a.elementor-post-info__terms-list-item{
  background:#F4F4F4;border-color:#E0E0E0;color:var(--e-global-color-onlightbd);
}
body.wp-claro .wp-tagpill .elementor-post-info__terms-list a.elementor-post-info__terms-list-item:hover{
  border-color:#C9C9C9;color:var(--e-global-color-onlight);
}
body.wp-claro #bp-relacionados .elementor-heading-title{
  color:var(--e-global-color-onlight)!important;
}
body.wp-claro .elementor-element-lp-card{
  background-color:#F7F7F7!important;border-color:#E6E6E6!important;
}
body.wp-claro .elementor-element-lp-card .elementor-heading-title{
  color:var(--e-global-color-onlight)!important;
}
body.wp-claro .elementor-element-lp-card [data-id="lp-resumo"] .elementor-heading-title{
  color:var(--e-global-color-onlightbd)!important;
}

/* ---------- o cabeçalho no modo claro ----------
   O cabeçalho global (post 79) é de VIDRO: a pílula é branca a 4% com blur,
   pensada para pousar sobre fundo escuro. Sobre a página branca ela some, e
   com ela somem o logo (que é branco) e os links (#C8C6C5).

   Aqui vai só o remendo de legibilidade, escopado no post: a pílula fica
   opaca e escura, e o botão claro ganha traço para não virar um branco sobre
   branco. O logo e os links continuam claros, e continuam legíveis.

   ⚠️ O conserto de verdade é um cabeçalho com variante clara e logo escuro
   (o acervo tem, na pasta LOGOTIPOS). Isso é cromo do SITE INTEIRO, mexe em
   todas as páginas, e por isso é frente própria. Registrado no HANDOFF. */
body.single-post.wp-claro #wpxhdr .wpx-nav__pill{
  background:rgba(12,12,13,.92);
}
body.single-post.wp-claro #wpxhdr .btn-light{
  border:1px solid rgba(0,0,0,.18);
}

/* o interruptor encostado na direita da trilha.
   ⚠️ Sai por CSS porque o controle de margem do Elementor não aceita `auto`:
   mandei `margin-left:auto` pelo painel e ele gravou 0. */
#bp-trilha .elementor-widget-html{margin-left:auto}

/* ===== blog — correções pedidas pelo Igor em 12/08 ======================== */

/* 1. A "caixa estranha" em volta da imagem do artigo.
   Não era borda nem fundo: o tema aplica `box-shadow:0 0 30px rgba(0,0,0,.15)`
   em `figure`. No fundo escuro ela não aparece; no modo claro vira um cartão
   cinza atrás da foto e da legenda. */
.wp-article figure,
.wp-article figure.wp-block-image{box-shadow:none}

/* 2. As pílulas de tag ficavam coladas: a lista continuava `inline`, e `gap`
   não vale em elemento inline. A regra que vencia é do próprio Elementor,
   `.elementor-icon-list-items .elementor-icon-list-item .elementor-post-info__terms-list`
   (0,3,0), contra os (0,2,0) da minha. Empatar em três classes não bastou: o
   CSS do widget carrega DEPOIS do kit e vencia na ordem. Com quatro classes
   vence sempre, sem precisar de `!important`. */
.wp-tagpill .elementor-icon-list-items .elementor-icon-list-item .elementor-post-info__terms-list{
  display:flex;flex-wrap:wrap;column-gap:0;row-gap:12px;font-size:0;
}
/* ⚠️ o espaçamento entre pílulas NÃO pode sair de `column-gap`: as vírgulas
   que o widget escreve entre os termos viram itens anônimos do flex, e cada
   uma consome um gap de cada lado, dobrando o espaço para 24. Com margem no
   item o valor é exatamente o do Figma. O `row-gap` continua no gap, porque
   ali não há item anônimo no meio. */
.wp-tagpill .elementor-post-info__terms-list a.elementor-post-info__terms-list-item + a.elementor-post-info__terms-list-item{
  margin-left:12px;
}
/* 3. Texto do chip subido: o Figma pede 8 em cima e 10 embaixo, o que empurra
   a letra 1px para cima. Simétrico, e a altura final continua 40. */
.wp-tagpill .elementor-post-info__terms-list a.elementor-post-info__terms-list-item{
  padding:9px 24px;
}

/* 4. Card de conteúdo relacionado.
   - a foto encostava com sobra: o `width` do widget não venceu o
     dimensionamento pela altura, e ela saía 229 numa faixa de 243;
   - altura igual entre os cards, venha o texto que vier;
   - título e resumo com reticências quando estouram;
   - "Ver mais" ancorado embaixo. */
.e-loop-item{display:flex}
.elementor-element-lp-card{height:100%}
.elementor-element-lp-foto,
.elementor-element-lp-foto a,
.elementor-element-lp-foto img{display:block;width:100%}
#lp-corpo{flex:1 1 auto}
.lp-titulo .elementor-heading-title,
.lp-resumo .elementor-heading-title{
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
}
.lp-titulo .elementor-heading-title{-webkit-line-clamp:2}
.lp-resumo .elementor-heading-title{-webkit-line-clamp:3}
.lp-vermais{margin-top:auto}
.lp-vermais .elementor-heading-title a{
  color:var(--e-global-color-secondary);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
  transition:gap .25s var(--ease),color .25s var(--ease);
}
.lp-vermais .elementor-heading-title a::after{content:"→";font-size:1.05em}
.lp-vermais .elementor-heading-title a:hover{color:#fff;gap:10px}
body.wp-claro .lp-vermais .elementor-heading-title a{
  color:var(--e-global-color-onlightbd);
}
body.wp-claro .lp-vermais .elementor-heading-title a:hover{
  color:var(--e-global-color-onlight);
}

/* ===== blog — o interruptor flutuante (pedido do Igor, 12/08) =============
   Três mudanças sobre a primeira versão:
   1. a troca de tema estava DURA porque só o fundo do body tinha transição e
      todo o resto trocava de cor num quadro. Agora as superfícies do blog
      transicionam juntas, no mesmo tempo e na mesma curva;
   2. o botão virou flutuante e acompanha a rolagem;
   3. no hover ele se abre e revela o rótulo.

   A abertura anima `max-width`, e não `width:auto`, que não é animável. O
   valor é folgado de propósito: o rótulo mais longo cabe, e o `nowrap` com
   `overflow:hidden` faz o corte enquanto abre. */

:root{--tema-t:.5s}

/* 1. transição conjunta. O `body` já tinha .9s do mecanismo antigo, que é
   lento demais quando o resto acompanha: aqui ele entra no mesmo compasso. */
body.single-post{transition:background-color var(--tema-t) var(--ease)}
body.single-post #bp-trilha .elementor-heading-title,
body.single-post .elementor-element-bp-pill,
body.single-post .elementor-element-bp-pill .elementor-heading-title,
body.single-post .elementor-element-bp-data .elementor-heading-title,
body.single-post [data-id="bp-lead"] .elementor-heading-title,
body.single-post .wp-article p,
body.single-post .wp-article li,
body.single-post .wp-article h2,
body.single-post .wp-article h3,
body.single-post .wp-article strong,
body.single-post .wp-article figcaption,
body.single-post .wp-article blockquote.wp-block-quote,
body.single-post .wp-article figure img,
body.single-post [data-id="bp-foto"] img,
body.single-post .wp-tagpill a.elementor-post-info__terms-list-item,
body.single-post .elementor-element-lp-card,
body.single-post .elementor-element-lp-card .elementor-heading-title,
body.single-post #bp-relacionados .elementor-heading-title,
body.single-post #wpxhdr .wpx-nav__pill{
  transition:background-color var(--tema-t) var(--ease),
             color var(--tema-t) var(--ease),
             border-color var(--tema-t) var(--ease);
}

/* 2 e 3. o botão flutuante que se abre no hover */
.wp-lightsw{
  position:fixed;right:24px;bottom:24px;z-index:90;
  display:flex;align-items:center;gap:0;
  height:44px;max-width:44px;padding:0 13px;overflow:hidden;white-space:nowrap;
  border-radius:999px;cursor:pointer;
  background:rgba(20,20,21,.86);border:1px solid var(--post-linha);
  color:var(--text-2);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  /* abre e fecha em 500ms com `ease-in-out`: a curva do kit (`--ease`) é uma
     saída rápida, boa para entrada de elemento, e aqui deixava o movimento
     duro nas duas pontas. Pedido do Igor em 12/08. */
  transition:max-width .5s ease-in-out,gap .5s ease-in-out,
             background-color var(--tema-t) var(--ease),
             border-color .25s ease-in-out,color .25s ease-in-out,
             box-shadow .25s ease-in-out;
}
.wp-lightsw:hover,.wp-lightsw:focus-visible{
  max-width:280px;gap:10px;border-color:var(--line-strong);color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.wp-lightsw:focus-visible{outline:2px solid var(--text-2);outline-offset:3px}
.wp-lightsw__ico{display:flex;flex:0 0 18px;line-height:0}
.wp-lightsw svg{width:18px;height:18px;fill:currentColor;display:block}
.wp-lightsw__txt{
  font-family:"Roboto Flex",sans-serif;font-size:14px;font-weight:500;
  opacity:0;
  /* saindo, some na hora: sem atraso, senão o rótulo fica boiando enquanto a
     pílula já fechou */
  transition:opacity .25s ease-in-out 0s;
}
/* entrando, espera a pílula abrir quase metade do caminho antes de aparecer */
.wp-lightsw:hover .wp-lightsw__txt,
.wp-lightsw:focus-visible .wp-lightsw__txt{
  opacity:1;transition:opacity .28s ease-in-out .22s;
}
/* um rótulo por modo, e só o do modo atual existe para o leitor de tela */
.wp-lightsw .wp-lightsw__sol,
.wp-lightsw .wp-lightsw__txt--escuro{display:none}
body.wp-claro .wp-lightsw .wp-lightsw__sol,
body.wp-claro .wp-lightsw .wp-lightsw__txt--escuro{display:block}
body.wp-claro .wp-lightsw .wp-lightsw__lua,
body.wp-claro .wp-lightsw .wp-lightsw__txt--claro{display:none}
body.wp-claro .wp-lightsw{
  background:rgba(255,255,255,.9);border-color:#E0E0E0;
  color:var(--e-global-color-onlightbd);box-shadow:0 8px 24px rgba(0,0,0,.12);
}
body.wp-claro .wp-lightsw:hover{
  border-color:#C9C9C9;color:var(--e-global-color-onlight);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
/* o widget que hospedava o botão fica vazio: o script move o botão para o
   <body> no carregamento, senão o `fixed` fica preso no bloco de contenção
   criado por um ancestral com filtro. */
#bp-trilha .elementor-widget-html{width:0;height:0;overflow:visible}
@media(prefers-reduced-motion:reduce){
  .wp-lightsw,.wp-lightsw__txt,body.single-post{transition:none}
}
@media(max-width:767px){
  .wp-lightsw{right:16px;bottom:16px}
}

/* ---------- hover das pílulas de tag e dos cards (pedido do Igor, 12/08) ----
   Antes só a borda e a cor do texto reagiam, o que quase não se via. */
/* ⚠️ precisa do `body.single-post` na frente: a regra de transição de TEMA
   tem (0,3,1) e vencia esta, que tinha (0,3,0). Sem `transform` na lista
   vencedora o hover saltava em vez de deslizar. */
body.single-post .wp-tagpill .elementor-post-info__terms-list a.elementor-post-info__terms-list-item{
  transition:background-color .3s ease-in-out,border-color .3s ease-in-out,
             color .3s ease-in-out,transform .3s ease-in-out;
}
.wp-tagpill .elementor-post-info__terms-list a.elementor-post-info__terms-list-item:hover{
  background:#1B1B1B;border-color:var(--line-strong);color:#fff;
  transform:translateY(-2px);
}
body.wp-claro .wp-tagpill .elementor-post-info__terms-list a.elementor-post-info__terms-list-item:hover{
  background:#EBEBEB;border-color:#C9C9C9;color:var(--e-global-color-onlight);
}

/* o card inteiro reage: sobe, o traço acende, a foto aproxima e a seta anda.
   ⚠️ A lista de transições precisa repetir as de tema (`background-color`,
   `color`, `border-color`): esta regra tem três classes e sobrescreveria a
   regra de tema, que tem o mesmo peso e vem antes. */
body.single-post .e-loop-item .elementor-element-lp-card{
  transition:background-color var(--tema-t) var(--ease),
             color var(--tema-t) var(--ease),
             border-color .35s ease-in-out,
             transform .35s ease-in-out,
             box-shadow .35s ease-in-out;
}
.e-loop-item:hover .elementor-element-lp-card{
  transform:translateY(-4px);border-color:var(--line-strong)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.45);
}
body.wp-claro .e-loop-item:hover .elementor-element-lp-card{
  border-color:#C9C9C9!important;box-shadow:0 16px 34px rgba(0,0,0,.14);
}
.e-loop-item .elementor-element-lp-foto img{transition:transform .5s ease-in-out}
.e-loop-item:hover .elementor-element-lp-foto img{transform:scale(1.05)}
.e-loop-item:hover .lp-vermais .elementor-heading-title a{gap:10px;color:#fff}
body.wp-claro .e-loop-item:hover .lp-vermais .elementor-heading-title a{
  color:var(--e-global-color-onlight);
}
@media(prefers-reduced-motion:reduce){
  .e-loop-item:hover .elementor-element-lp-card,
  .e-loop-item:hover .elementor-element-lp-foto img,
  .wp-tagpill .elementor-post-info__terms-list a.elementor-post-info__terms-list-item:hover{
    transform:none;
  }
}


/* ---------- tabela do artigo ----------
   O documento 2 trouxe o comparativo NMES × WB-EMS, a primeira tabela do
   blog. O padrão do WordPress a desenha com grade branca de 1px e texto em
   0,8em; sobre o #131313 isso vira uma gaiola, e o corpo do artigo é 18px.
   Aqui ela fala a mesma língua do resto: traço `--post-linha`, 16px de corpo,
   cabeçalho numa superfície um passo acima do fundo, e zebra discreta para o
   olho não perder a linha em tabela larga.

   Por que CSS e não painel: o `theme-post-content` não tem controle por
   elemento, e os atributos do bloco `wp:table` mexem na borda da TABELA, não
   na de cada célula. A borda por célula é do CSS do core.

   `overflow-x:auto` na figura: três colunas de texto não cabem em 375, e sem
   isso a página inteira ganharia rolagem horizontal. */
.wp-article figure.wp-block-table{margin:0 0 26px;overflow-x:auto}
.wp-article .wp-block-table table{
  width:100%;border-collapse:collapse;border:1px solid var(--post-linha);
  font-family:"Roboto Flex",sans-serif;
}
.wp-article .wp-block-table th,
.wp-article .wp-block-table td{
  border:1px solid var(--post-linha);padding:12px 16px;
  font-size:16px;line-height:1.6;text-align:left;vertical-align:top;
}
.wp-article .wp-block-table td{
  color:var(--e-global-color-secondary);font-weight:400;
}
.wp-article .wp-block-table th{
  color:#fff;font-weight:600;background:#1B1B1B;
}
.wp-article .wp-block-table tbody tr:nth-child(even) td{
  background:rgba(255,255,255,.022);
}
.wp-article .wp-block-table strong{font-weight:600}
@media(max-width:767px){
  .wp-article .wp-block-table th,
  .wp-article .wp-block-table td{padding:10px 12px;font-size:15px}
}

/* modo claro, no mesmo mecanismo das outras superfícies do blog */
body.wp-claro .wp-article .wp-block-table table,
body.wp-claro .wp-article .wp-block-table th,
body.wp-claro .wp-article .wp-block-table td{border-color:#E0E0E0}
body.wp-claro .wp-article .wp-block-table td{
  color:var(--e-global-color-onlightbd);
}
body.wp-claro .wp-article .wp-block-table th{
  color:var(--e-global-color-onlight);background:#F4F4F4;
}
body.wp-claro .wp-article .wp-block-table tbody tr:nth-child(even) td{
  background:#FAFAFA;
}

/* a tabela entra na transição de tema junto com o resto do corpo */
body.single-post .wp-article .wp-block-table th,
body.single-post .wp-article .wp-block-table td{
  transition:background-color var(--tema-t) var(--ease),
             color var(--tema-t) var(--ease),
             border-color var(--tema-t) var(--ease);
}

/* ===== blog: listagem (871:1890) ===== 2026-08-12 =====================
   Duas classes que vestem widget de terceiro, e uma correção de escopo.
   Ver `_handoff/blog/lista/patch_kit.py` para o porquê de cada uma. */

/* ---------- 1. barra de filtro (`871:1912`) ----------
   O `taxonomy-filter` expõe estilo por custom property, não por controle de
   painel. Aqui só as variáveis que o widget declara; o que ele não cobre
   (fundo da pílula, peso e tamanho da letra) vai em regra normal logo abaixo.

   ⚠️ **`.elementor-widget-taxonomy-filter` no compound é obrigatório**, e as
   duas vezes. Medido no ar em 12/08: o `post-4.css` carrega ANTES do
   `widget-loop-filter.min.css`, então regra de MESMA especificidade perde por
   ordem. Sem o compound, `.wp-filtro{--e-filter-space-between:16px}` empata
   com `.elementor-widget-taxonomy-filter{...:20px}` do widget e o valor lido
   no ar era 20px; as pílulas saíam sem fundo, sem raio e com o padding de 8
   de fábrica, enquanto tamanho e peso da letra (que o widget não declara)
   passavam. É a mesma briga que o kit já resolveu em `.wp-btn`. */
.wp-filtro.elementor-widget-taxonomy-filter{
  --e-filter-justify-content:flex-start;
  --e-filter-space-between:16px;
  --e-filter-item-padding:9px 24px;
  --e-filter-item-border-radius:20px;
  --e-filter-normal-text-color:var(--e-global-color-meta);
  --e-filter-hover-text-color:#fff;
  --e-filter-active-text-color:#000;
}
/* o widget zera o fundo do item (`background-color:initial`) e não tem
   variável para ele: fundo, peso e tamanho vão por regra. */
.wp-filtro.elementor-widget-taxonomy-filter .e-filter-item{
  /* o Figma pede #121212; entra `--surface-1` (#0E0E0E), que é o Global
     `surf1`. Mesma diferença de 4 pontos já aceita no card, e cor por token
     vale mais que fidelidade ao ponto num tom que o kit já cobre. */
  background-color:var(--surface-1);
  border:1px solid var(--post-linha);
  font-family:"Roboto Flex",Sans-serif;
  font-size:14px;font-weight:500;line-height:20px;
  transition:background-color .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease);
}
.wp-filtro.elementor-widget-taxonomy-filter .e-filter-item:hover:not([aria-pressed="true"]){
  border-color:var(--line-strong);
}
/* a pílula ativa é branca com texto preto e peso 700, como o "Todos" do Figma */
.wp-filtro.elementor-widget-taxonomy-filter .e-filter-item[aria-pressed="true"]{
  background-color:#fff;border-color:#fff;font-weight:700;
}

/* ---------- 1b. `.wp-imgcover` quando a foto é LINK ----------
   O componente resolve a cobertura passando `height:100%` pela cadeia
   `.elementor-widget-container` → `figure` → `img`. Quando o widget de imagem
   tem `link_to`, o Elementor troca a `<figure>` por um `<a>`, que não está na
   cadeia: o elo quebra e a foto volta à proporção natural. Medido no cartão de
   destaque em 12/08 (widget com 457 de altura e foto com 346).

   ⚠️ E o `<a>` é filho DIRETO do widget: **esta versão do Elementor (4.2.2)
   não emite `.elementor-widget-container`**. Mirar
   `.wp-imgcover .elementor-widget-container > a` não casa com nada aqui, o
   que custou uma rodada de medição. Os dois seletores ficam, para o caso de
   alguma página ainda servir a marcação antiga.

   Fica aqui, e não dentro de `.wp-imgcover`, porque é a primeira vez que uma
   foto de capa aparece com link. Candidato a subir para o componente na
   próxima vez que o caso reaparecer, que é a regra do projeto. */
.wp-imgcover > a,
.wp-imgcover .elementor-widget-container > a{display:block;height:100%}

/* ---------- 2. "Ver mais" do laço (`871:1925`) ----------
   O botão nasce dentro do `loop-grid`, fora do alcance do `_css_classes`.
   Mesma aparência do `.wp-btn--dark`, para não inventar um terceiro botão. */
.wp-loadmore .e-loop__load-more{display:flex;justify-content:center;
  padding-top:20px;padding-bottom:20px}
.wp-loadmore.elementor-widget-loop-grid .e-loop__load-more .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:14px 26px;border-radius:var(--r-pill);
  background:var(--btn-dark);background-color:transparent;
  color:var(--text-2);border:1px solid var(--line-strong);
  font-family:"Roboto Flex",Sans-serif;
  font-size:.95rem;font-weight:600;letter-spacing:-.01em;line-height:1;
  cursor:pointer;text-decoration:none;
  transition:transform .25s var(--ease),color .3s,border-color .3s;
}
.wp-loadmore.elementor-widget-loop-grid .e-loop__load-more .elementor-button:hover{
  transform:translateY(-2px);color:#fff;border-color:rgba(255,255,255,.55);
}

/* ---------- 3. correção de escopo do modo claro ----------
   A suavização da troca de tema foi escrita para `body.single-post` e não
   alcança a listagem, onde o corpo é `page-id-734`. As regras de COR já eram
   independentes de propósito; só a transição faltava. */
body.page-id-734 .elementor-element-lp-card,
body.page-id-734 .elementor-element-lp-card .elementor-heading-title,
body.page-id-734 .wp-filtro.elementor-widget-taxonomy-filter .e-filter-item,
body.page-id-734 #bd-card,
body.page-id-734 #bd-card .elementor-heading-title{
  transition:background-color var(--tema-t) var(--ease),
             color var(--tema-t) var(--ease),
             border-color var(--tema-t) var(--ease);
}
/* o cartão de DESTAQUE e a pílula de categoria do card não estavam cobertos:
   o mecanismo de modo claro veste `.elementor-element-lp-card` por nome, e os
   dois são elementos novos desta frente. Mesmas cores e mesmo uso de
   `!important` da receita que já está no kit, para não criar um segundo
   padrão. */
body.wp-claro #bd-card{
  background-color:#F7F7F7!important;border-color:#E6E6E6!important;
}
body.wp-claro #bd-card .elementor-heading-title{
  color:var(--e-global-color-onlight)!important;
}
body.wp-claro #bd-card .bd-resumo .elementor-heading-title{
  color:var(--e-global-color-onlightbd)!important;
}
/* as duas pílulas escuras sobre cartão claro: a do "Destaque" e a da categoria
   no card da grade. No escuro elas são `linha` (#262626) com texto `meta`; no
   claro invertem para cinza claro com texto escuro. */
body.wp-claro #bd-pill,
body.wp-claro #lp-cat{
  background-color:#E6E6E6!important;
}
body.wp-claro #bd-pill .elementor-heading-title,
body.wp-claro #lp-cat .elementor-heading-title{
  color:var(--e-global-color-onlightbd)!important;
}
body.wp-claro .lp-data .elementor-heading-title{
  color:var(--e-global-color-onlightbd)!important;
}

body.wp-claro .wp-filtro.elementor-widget-taxonomy-filter .e-filter-item{
  background-color:#F2F2F2;border-color:#D9D9D9;color:#3A3A3A;
}
body.wp-claro .wp-filtro.elementor-widget-taxonomy-filter .e-filter-item[aria-pressed="true"]{
  background-color:#0A0A0A;border-color:#0A0A0A;color:#fff;
}
body.wp-claro .wp-loadmore.elementor-widget-loop-grid .e-loop__load-more .elementor-button{
  color:#1A1A1A;border-color:rgba(0,0,0,.28);
}
body.wp-claro .wp-loadmore.elementor-widget-loop-grid .e-loop__load-more .elementor-button:hover{
  color:#000;border-color:rgba(0,0,0,.55);
}

/* ===== blog: linha de data e categoria no card ===== 2026-08-12 =========
   A linha `lp-specs` entrou no card 647 (decisão do Igor, saída B do plano) e
   vale nos DOIS lugares onde o card aparece: a grade da listagem e os
   relacionados do post. */

/* o Figma escreve "12 OUT 2023". O WordPress em pt-BR devolve "12 ago 2026", e
   o formato de data do Elementor não tem controle de caixa: é a mesma solução
   já usada em `.elementor-element-bp-data`. */
.lp-data .elementor-heading-title{text-transform:uppercase;letter-spacing:.04em}

/* o termo vem como <a> do WordPress: sem isto ele pega a cor de link do tema e
   sublinha, no meio de uma pílula de 10px. */
#lp-cat .elementor-heading-title a{color:inherit;text-decoration:none}
#lp-cat .elementor-heading-title a:hover{color:#fff}
body.wp-claro #lp-cat .elementor-heading-title a:hover{color:#000}

/* ===== blog: formulário da newsletter ===== 2026-08-12 =================
   Quase tudo do formulário saiu por controle NATIVO (fundo transparente,
   traço branco, raio 12, tipografia, cor e borda do botão): ver
   `s4_newsletter.py`. Sobra uma coisa só, o GRADIENTE do botão, que o painel
   do widget de formulário não expõe — ele só faz cor sólida, e sem isto o
   botão herda o Global `accent` (#002936) e some no cartão escuro. */
.wp-form.elementor-widget-form .elementor-button[type="submit"]{
  background:var(--btn-dark);
  font-family:"Roboto Flex",Sans-serif;font-weight:600;letter-spacing:-.01em;
  transition:transform .25s var(--ease),border-color .3s,color .3s;
}
.wp-form.elementor-widget-form .elementor-button[type="submit"]:hover{
  transform:translateY(-2px);border-color:rgba(255,255,255,.9);
}
/* o texto de exemplo do campo: #757575 no Figma */
.wp-form.elementor-widget-form .elementor-field::placeholder{color:#757575;opacity:1}
/* alinhar a altura do campo com a do botão, que é o que o desenho mostra */
.wp-form.elementor-widget-form .elementor-field-group .elementor-field{min-height:52px;padding:0 20px}
.wp-form.elementor-widget-form .e-form__buttons{align-items:stretch}
.wp-form.elementor-widget-form .elementor-button[type="submit"]{width:100%;justify-content:center}

/* ⚠️ o `:not(.elementor-select-wrapper)` no fim NÃO é enfeite: a regra que o
   Elementor emite em `post-734.css` para o traço do campo tem exatamente esse
   sufixo e conta (0,5,0). Sem ele a regra do modo claro empatava por baixo e o
   campo ficava com traço BRANCO no fundo claro, invisível. Medido em 12/08. */
body.wp-claro .wp-form.elementor-widget-form .elementor-field-group .elementor-field:not(.elementor-select-wrapper){
  border-color:rgba(0,0,0,.35);color:#111;
}
body.wp-claro .wp-form.elementor-widget-form .elementor-field::placeholder{color:#6B6B6B}
body.wp-claro .wp-form.elementor-widget-form .elementor-button[type="submit"]{
  background:#0A0A0A;border-color:#0A0A0A;color:#fff;
}

/* ===== blog: primeiro item do laço como hero ===== 2026-08-12 ==========
   `.wp-heroprimeiro` no widget de laço: o PRIMEIRO card ocupa a linha inteira
   e vira o cartão horizontal do Figma `793:1084` (foto à esquerda, título 32
   em gradiente). Do segundo em diante, nada muda.

   Existe porque o painel não expõe "o primeiro item é diferente", e porque na
   página de arquivo a Consulta corrente ignora todo limite: não dá para ter um
   laço de 1 item e outro com o resto. Ver `_handoff/blog/categoria/`.

   Vale para o card 647, que é o único laço que o blog usa.

   ⚠️ **`:first-of-type`, e nunca `:first-child`.** O Elementor abre o
   `.elementor-loop-container` com um `<style id="loop-647">`, que é um ELEMENTO
   e ocupa a primeira posição: `:first-child` não casa com card nenhum, sem
   erro e sem aviso — a página simplesmente sai com a grade uniforme. Medido no
   ar em 12/08. Como os cards são `<div>` e o irmão de cima é `<style>`, o
   `:first-of-type` acerta o primeiro card. */

.wp-heroprimeiro .e-loop-item:first-of-type{grid-column:1/-1}

.wp-heroprimeiro .e-loop-item:first-of-type .elementor-element-lp-card{
  flex-direction:row;flex-wrap:nowrap;
}
/* a foto ocupa a metade e ACOMPANHA a altura da coluna de texto. O `img` sai
   do fluxo porque `height:100%` não resolve contra pai cuja altura vem de
   `align-items:stretch` — o mesmo motivo pelo qual `.wp-imgcover` existe. */
.wp-heroprimeiro .e-loop-item:first-of-type .elementor-element-lp-foto{
  position:relative;flex:0 0 50%;width:50%;align-self:stretch;min-height:320px;
}
.wp-heroprimeiro .e-loop-item:first-of-type .elementor-element-lp-foto > a,
.wp-heroprimeiro .e-loop-item:first-of-type .elementor-element-lp-foto img{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;margin:0;
}
.wp-heroprimeiro .e-loop-item:first-of-type #lp-corpo{
  flex:1 1 50%;justify-content:center;padding:48px;
}
/* o desenho do hero não tem a linha de data e categoria */
.wp-heroprimeiro .e-loop-item:first-of-type #lp-specs{display:none}

/* título 32/700 com o mesmo preenchimento em gradiente do `.wp-gradtext`: a
   classe não alcança aqui, porque quem manda no card é o template do laço. */
.wp-heroprimeiro .e-loop-item:first-of-type .lp-titulo .elementor-heading-title{
  font-size:32px;line-height:38px;letter-spacing:-.32px;-webkit-line-clamp:3;
  background-image:var(--grad-title);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.wp-heroprimeiro .e-loop-item:first-of-type .lp-resumo .elementor-heading-title{
  font-size:16px;line-height:29px;-webkit-line-clamp:3;
}

/* ---------- modo claro ----------
   O kit já vira `.wp-gradtext` para o gradiente escuro sob `body.wp-claro`,
   mas o título do hero NÃO passa por essa classe: quem o pinta é a regra daqui
   de cima, que fixa `--grad-title`. No claro ele ficava cinza-claro sobre o
   cartão #F7F7F7, quase ilegível. */
body.wp-claro .wp-heroprimeiro .e-loop-item:first-of-type .lp-titulo .elementor-heading-title{
  background-image:var(--grad-title-claro);
}

/* no celular o cartão volta a ser coluna, como todo o resto */
@media(max-width:767px){
  .wp-heroprimeiro .e-loop-item:first-of-type .elementor-element-lp-card{
    flex-direction:column;
  }
  .wp-heroprimeiro .e-loop-item:first-of-type .elementor-element-lp-foto{
    flex:0 0 auto;width:100%;min-height:220px;
  }
  .wp-heroprimeiro .e-loop-item:first-of-type #lp-corpo{padding:24px}
  .wp-heroprimeiro .e-loop-item:first-of-type .lp-titulo .elementor-heading-title{
    font-size:24px;line-height:30px;
  }
}

/* ===== blog: categorias em pílula ===== 2026-08-12 =====================
   `.wp-catpills` no widget NATIVO de categorias do WordPress
   (`wp-widget-categories`), usado na faixa "Categorias" do arquivo.

   Ele é a única maneira de a faixa crescer sozinha quando nascer categoria
   nova, mas **não tem um controle de estilo sequer** no painel do Elementor:
   é widget do WordPress, o Elementor só o embrulha. Daí o componente.

   Duas coisas que o próprio widget entrega de graça e que valem ouro aqui:
   o link já aponta para `/category/<slug>/`, e a categoria corrente vem com
   `.current-cat`, que é o que marca a pílula ativa sem uma linha de PHP. */

/* o widget escreve um <h5> com o rótulo padrão dele mesmo com o título vazio,
   e a seção já tem o H2 do desenho logo acima. */
.wp-catpills.elementor-widget-wp-widget-categories .elementor-widget-container > h5{
  display:none;
}
.wp-catpills.elementor-widget-wp-widget-categories ul{
  display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0;
}
.wp-catpills.elementor-widget-wp-widget-categories li{margin:0;padding:0}
.wp-catpills.elementor-widget-wp-widget-categories li a{
  display:inline-flex;align-items:center;padding:9px 24px;
  border-radius:20px;background-color:var(--surface-1);
  border:1px solid var(--post-linha);color:var(--text-2);
  font-family:"Roboto Flex",Sans-serif;
  font-size:14px;font-weight:500;line-height:20px;text-decoration:none;
  transition:background-color .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease);
}
.wp-catpills.elementor-widget-wp-widget-categories li a:hover{
  border-color:var(--line-strong);color:#fff;
}
.wp-catpills.elementor-widget-wp-widget-categories li.current-cat a{
  background-color:#fff;border-color:#fff;color:#000;font-weight:700;
}

body.wp-claro .wp-catpills.elementor-widget-wp-widget-categories li a{
  background-color:#F2F2F2;border-color:#D9D9D9;color:#3A3A3A;
}
body.wp-claro .wp-catpills.elementor-widget-wp-widget-categories li a:hover{
  border-color:#9A9A9A;color:#000;
}
body.wp-claro .wp-catpills.elementor-widget-wp-widget-categories li.current-cat a{
  background-color:#0A0A0A;border-color:#0A0A0A;color:#fff;
}

/* ===== blog: arquivo de categoria, modo claro ===== 2026-08-12 =========
   Duas peças do arquivo que o mecanismo de modo claro não alcançava. */

/* a pílula com o nome da categoria é `linha` (#262626) com texto `meta`, como
   as outras pílulas escuras do blog: no claro ela inverte. */
body.wp-claro #ct-pill{background-color:#E6E6E6!important}
body.wp-claro #ct-pill .elementor-heading-title{
  color:var(--e-global-color-onlightbd)!important;
}

/* a trilha e as duas H2 da página. ⚠️ o alvo das H2 é a CLASSE `.ct-h2`, e
   nunca `#ct-lista .elementor-heading-title`: um seletor com id (1,2,0) vence
   as regras de card do kit, que são só classes (0,5,0), e repintaria o resumo
   dentro dos cards junto. */
body.wp-claro #ct-trilha .elementor-heading-title{
  color:var(--e-global-color-onlightbd)!important;
}
body.wp-claro #ct-trilha img{filter:invert(1)}
body.wp-claro .ct-h2 .elementor-heading-title{
  color:var(--e-global-color-onlight)!important;
}

/* ⚠️ escotilha do CTA, igual à que o `#bp-cta` já tem: a placa dele é escura
   nos DOIS modos (#2A2A2A vem do desenho, não de um Global), então a regra
   geral do claro, que troca o título para o gradiente ESCURO, deixaria texto
   escuro sobre fundo escuro. Aqui o título volta ao gradiente neutro. */
body.wp-claro #ct-cta .wp-gradtext .elementor-heading-title{
  background-image:var(--grad-title-neutro);
}

/* ===== 2026-08-20: sem espera de animacao no mobile =====
   Contexto: as animacoes de entrada foram desligadas SO no mobile
   (animation_mobile / _animation_mobile = none em 114 elementos). O desktop
   e o tablet seguem animando normalmente.
   Porem o Elementor imprime a classe .elementor-invisible no servidor, sem
   saber o dispositivo, e ela so e removida quando o JS do frontend roda. Com
   isso, no celular, o elemento que marca o LCP ficava escondido ate 2,8 s
   mesmo sem ter animacao nenhuma para executar.
   Como no mobile nao ha mais animacao, revelar esses elementos nao causa
   piscada: apenas remove uma espera que nao serve para nada.
   Reverter: apagar este bloco. */
@media(max-width:767px){
  .elementor-invisible{visibility:visible!important}
}/* End custom CSS */