feat(wordpress): adiciona elementor-v4-visual-editor (editor visual V4)

Adaptado de jainshwetank/elementor-pro-designer-skill (MIT) - painel
General/Style/Interactions, Class Manager, Variables Manager, breakpoints,
padroes de layout e troubleshooting para o editor visual Elementor Pro V4.
Complementa emcp-page-building (mesma versao Elementor, mas via MCP/API).

wordpress/skills/elementor-v4-visual-editor/references/troubleshooting.md

@@ -0,0 +1,108 @@
+# Troubleshooting — Elementor V4
+
+Fonte: adaptado de jainshwetank/elementor-pro-designer-skill (MIT). Sintomas, causas e correcções para problemas comuns do editor visual V4.
+
+## Problemas de layout
+
+**Elementos não empilham verticalmente dentro de um Flexbox**
+- Verificar Direction — tem de estar ↓ (column), não → (row).
+- Se uma classe está a definir a direction, sobrepor localmente ou rever a classe.
+
+**Flex child não preenche a altura restante**
+- Definir Flex child > Flex Size: Custom → Grow: 1, Shrink: 0, Basis: 0%.
+- O pai precisa de altura definida (vh, px, ou ele próprio flex) para o grow funcionar.
+- Nunca usar `height: 100%` num flex child — usar grow.
+
+**Duas colunas a empilhar verticalmente em desktop**
+- Direction do Flexbox pai tem de ser → (row), não ↓ (column).
+- Se uma classe força column, sobrepor localmente no breakpoint desktop.
+
+**Gap não aparece entre elementos**
+- Gap só funciona em pais Flexbox. Se o pai é um Div block (não-flex), gap não tem efeito.
+- Solução: mudar o pai para Flexbox, ou usar Spacing > Margin nos filhos individuais.
+
+**Elemento a fazer overflow do pai**
+- Definir no pai: Size > Overflow: hidden.
+- Verificar se uma width/min-width fixa no filho excede o pai.
+
+**Elemento sticky não fica sticky**
+- Position tem de estar definido como Sticky no próprio elemento.
+- O pai não pode ter `overflow: hidden` — isso quebra o sticky.
+- Anchor offset controla a que distância do topo o elemento gruda.
+
+## Problemas de espaçamento
+
+**Padding não aplica simetricamente**
+- Verificar se o toggle de link (ícone de corrente) está activo — se não, T/R/B/L são independentes.
+- Verificar se uma classe está a definir padding conflituoso — o badge "local" aparece se for override.
+
+**Margem entre elementos é irregular**
+- Se usares margin nos filhos, os gaps compõem-se entre alguns elementos.
+- Solução: remover margens dos filhos, usar Gap no Flexbox pai. Margem no filho só para espaçamento irregular pontual.
+
+## Problemas de tipografia
+
+**Tamanho de fonte não muda**
+- Uma classe pode estar a definir o tamanho e estás a editar um override local que não tem efeito.
+- Verificar se o campo Typography > Font size mostra badge de classe ou badge "local".
+- Se badge de classe: mudar a classe no Class Manager, ou sobrepor localmente.
+
+**Cor do texto não corresponde à variável**
+- Confirmar que o campo de cor mostra o nome da variável, não um hex.
+- Se mostrar hex: abrir o color picker, seleccionar o ícone de variável (ƒ), escolher a variável.
+
+**Line height demasiado apertado ou solto**
+- Line height está escondido em Style > Typography > Show more.
+- Texto corpo: 1.5–1.6 é standard. Headings: 1.1–1.2 é standard.
+
+## Problemas de dark mode
+
+**Dark mode não aplica**
+- Verificar que o snippet Design Tokens contém overrides `[data-theme="dark"]`.
+- Verificar que o botão de toggle tem o atributo `data-theme-toggle` no tab General → Attributes.
+- Verificar que o snippet Dark Mode Toggle está activo e na posição footer.
+- Abrir DevTools e confirmar que o elemento `html` tem o atributo `data-theme="dark"` depois de clicar no toggle.
+
+**Alguns elementos não mudam no dark mode**
+- Só elementos a usar variáveis CSS mudam. Cores hex fixas não mudam.
+- Localizar o elemento, verificar cada campo de cor — substituir hex por variável apropriada.
+
+**Flash do tema errado ao carregar a página (FOUC)**
+- O snippet Dark Mode Toggle lê o localStorage ao carregar, mas o snippet FOUC pode atrasar a visibilidade.
+- Garantir que o atributo `data-theme` é aplicado antes de `visibility: visible` disparar.
+- Solução: mover a leitura do localStorage para um `<script>` inline no `<head>` (antes do snippet FOUC disparar).
+
+## Problemas de interactions
+
+**Animação não dispara**
+- Trigger tem de ser "Scroll into view" para reveals por scroll.
+- Testar fazendo scroll do elemento para fora e depois de volta.
+- Se a página carregou com o elemento já visível, "Scroll into view" nunca dispara — usar "Page load" para elementos acima da dobra.
+
+**Animação a disparar cedo demais / elemento visível antes da animação**
+- A direction "Out" (Fade Out, Slide Out) é para animações de saída. Provavelmente queres "In".
+- Se elementos estão visíveis antes do scroll, verificar se uma animação anterior os deixou num estado visível.
+
+**Várias animações no mesmo elemento em conflito**
+- Verificar o tab Interactions — empilha. Se houver uma animação residual de testes, apagar (botão ✕).
+- Duas "Fade In" no mesmo elemento disparam ambas e podem entrar em conflito.
+
+**Interaction não aparece no tab Interactions**
+- O tab Interactions é o Tab 3 (não Style, não General).
+- Só disponível em elementos Elementor V4 — não em widgets legacy V3.
+
+## Problemas de Custom Code
+
+**Snippet Custom Code não aplica**
+- Verificar se o snippet está Active (toggle na lista de snippets).
+- Verificar a Location: `<head>` para CSS, footer para JS.
+- Verificar erros de sintaxe — um `;` em falta parte o snippet inteiro.
+
+**Variável CSS não resolve**
+- Nomes de variável em Custom Code usam prefixo `--`: `var(--color_accent)`.
+- Confirmar que a variável está definida em `:root` no snippet Design Tokens.
+- O Elementor acrescenta `--` automaticamente às variáveis do Variables Manager, mas snippets Custom Code têm de usar a sintaxe completa `var(--nome)`.
+
+**Snippet Design Tokens a crescer demasiado**
+- Só variáveis de cor e mapeamentos classe-para-cor pertencem aqui.
+- Se estiveres a acrescentar regras de layout, animações ou estilos de componente — mover para um snippet novo e nomeado.