a editar seus elementos"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"O seletor define QUAL elemento será afetado. Para classe, use .nomeDaClasse { propriedades } . Para ID, use #nomeDoID { propriedades } . Sempre abra e feche chaves, cada linha define uma propriedade visual."}]]]}] 32:["$","section","10",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Exemplo 1: Criando efeito vidro (fundo blur) em qualquer container"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Dê ao container uma classe (exemplo: vidro-container). No seu CSS, cole: .vidro-container { backdrop-filter: blur(10px); background: rgba(255,255,255,0.15); } . Pronto: o efeito vidro mais moderno do design mundial no seu site WordPress."}],["$","div","1",{"className":"border rounded-xl p-6 mb-8 bg-blue-500/10 border-blue-500/20 text-blue-400","children":[["$","h3",null,{"className":"font-semibold mb-3 flex items-center gap-2 text-blue-400","children":[["$","span",null,{"children":"ℹ️"}],"Pergunte para o ChatGPT"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Não sabe qual propriedade usar? Não precisa decorar. Pergunte ao ChatGPT, como: \"Qual CSS para desfocar fundo de bloque no WordPress?\" e copie a resposta."}]]}]]}]]]}] 33:["$","section","11",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Exemplo 2: Sombra interna e múltiplas sombras em botões"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"O Elementor só permite UMA sombra externa. Quer criar botões sofisticados? No CSS, use múltiplos box-shadow separados por vírgulas para camadas de sombras externas e internas (basta colocar 'inset' na propriedade)."}]]]}] 34:["$","section","12",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Exemplo 3: Botão que anima ao passar mouse (hover effect)"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Quer animação de cor, brilho ou setinha que anda? No CSS adicione .suaClasse:hover { propriedades de transição } , como background, transformação ou até animação de setas SVG."}]]]}] 35:["$","section","13",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Destravando sua criatividade: qualquer efeito visual (do Figma, Dribbble ou WebHub) dá para copiar via CSS"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Viu um efeito que gosta em outro site? Inspecione o elemento, localize o CSS (Firefox ou Chrome DevTools ajudam muito!) e adapte para sua classe no Elementor — lógica universal para qualquer design."}]]]}] 36:["$","section","14",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Classes e IDs: saiba quando escolher cada um em seus projetos"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Classe: para efeitos aplicados em vários elementos. ID: apenas para casos únicos (uma seção exclusiva, um botão específico). Prefira classes para evitar conflitos e facilitar manutenção."}],["$","div","1",{"className":"border rounded-xl p-6 mb-8 bg-red-500/10 border-red-500/20 text-red-400","children":[["$","h3",null,{"className":"font-semibold mb-3 flex items-center gap-2 text-red-400","children":[["$","span",null,{"children":"❌"}],"Evite bugs e conflitos"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Nunca use o mesmo ID em dois lugares. Repetição de ID quebra a página e impede alguns efeitos visuais. Use classes semp