{"id":2510,"date":"2025-05-30T16:19:54","date_gmt":"2025-05-30T16:19:54","guid":{"rendered":"https:\/\/visualfactory.pt\/?page_id=2510"},"modified":"2025-08-01T10:57:40","modified_gmt":"2025-08-01T10:57:40","slug":"comunicacao","status":"publish","type":"page","link":"https:\/\/visualfactory.pt\/en\/comunicacao\/","title":{"rendered":"Comunica\u00e7\u00e3o"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2510\" class=\"elementor elementor-2510\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c934248 e-con-full e-flex e-con e-parent\" data-id=\"c934248\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2b3c628 elementor-widget elementor-widget-html\" data-id=\"2b3c628\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Sans:wght@400;700;900&display=swap');\n    \n    \/* Reset b\u00e1sico *\/\n    * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n    }\n    \n    \/* Banner principal *\/\n    .vf-banner {\n        width: 100%;\n        height: 80vh;\n        position: relative;\n        overflow: hidden;\n        font-family: 'IBM Plex Sans', sans-serif;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n    \n    \/* Gradiente animado de fundo *\/\n    .vf-gradient-bg {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: linear-gradient(-45deg, \n            #f3e728, \n            #f3e728, \n            #02a8d8, \n            #dc3588, \n            #f3e728);\n        background-size: 400% 400%;\n        animation: gradient-animation 15s ease infinite;\n        z-index: 1;\n    }\n    \n    @keyframes gradient-animation {\n        0% { background-position: 0% 50%; }\n        50% { background-position: 100% 50%; }\n        100% { background-position: 0% 50%; }\n    }\n    \n    \/* Overlay para melhorar contraste *\/\n    .vf-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background-color: rgba(0, 0, 0, 0.2);\n        z-index: 2;\n    }\n    \n    \/* Container do conte\u00fado *\/\n    .vf-content {\n        max-width: 1200px;\n        width: 100%;\n        padding: 0 20px;\n        position: relative;\n        z-index: 3;\n        text-align: center;\n    }\n    \n    \/* Texto acima do t\u00edtulo *\/\n    .vf-eyebrow {\n        font-size: 18px;\n        font-weight: 700;\n        text-transform: uppercase;\n        color: #ffffff;\n        margin-bottom: 10px;\n        letter-spacing: 2px;\n    }\n    \n    \/* T\u00edtulo principal *\/\n    .vf-title {\n        font-size: 80px;\n        font-weight: 900;\n        color: #ffffff;\n        margin-bottom: 20px;\n        line-height: 1;\n        text-transform: uppercase;\n        letter-spacing: -2px;\n    }\n    \n    \/* Subt\u00edtulo *\/\n    .vf-tagline {\n        font-size: 36px;\n        font-weight: 400;\n        color: #ffffff;\n        line-height: 1.2;\n    }\n    \n    \/* Palavras em negrito *\/\n    .vf-bold {\n        font-weight: 700;\n    }\n    \n    \/* Responsividade *\/\n    @media (max-width: 992px) {\n        .vf-title {\n            font-size: 64px;\n        }\n        \n        .vf-tagline {\n            font-size: 30px;\n        }\n    }\n    \n    @media (max-width: 768px) {\n        .vf-banner {\n            height: auto;\n            padding: 100px 0;\n        }\n        \n        .vf-title {\n            font-size: 48px;\n        }\n        \n        .vf-eyebrow {\n            font-size: 16px;\n        }\n        \n        .vf-tagline {\n            font-size: 24px;\n        }\n    }\n    \n    @media (max-width: 576px) {\n        .vf-banner {\n            padding: 80px 0;\n        }\n        \n        .vf-title {\n            font-size: 36px;\n        }\n        \n        .vf-eyebrow {\n            font-size: 14px;\n        }\n        \n        .vf-tagline {\n            font-size: 20px;\n        }\n    }\n<\/style>\n\n<!-- Banner principal -->\n<div class=\"vf-banner\">\n    <!-- Gradiente animado de fundo -->\n    <div class=\"vf-gradient-bg\"><\/div>\n    \n    <!-- Overlay para melhorar contraste -->\n    <div class=\"vf-overlay\"><\/div>\n    \n    <!-- Conte\u00fado do banner -->\n    <div class=\"vf-content\">\n        <div class=\"vf-eyebrow\">Estrat\u00e9gia e Criatividade<\/div>\n        <h1 class=\"vf-title\">Comunica\u00e7\u00e3o<\/h1>\n        <p class=\"vf-tagline\">\n            Transformamos <span class=\"vf-bold\">a comunica\u00e7\u00e3o digital <\/span>em resultados \n            <span class=\"vf-bold\"><\/span> <span class=\"vf-bold\"><\/span>\n        <\/p>\n    <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ad2c97c e-con-full e-flex e-con e-parent\" data-id=\"ad2c97c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-80d47e1 elementor-widget elementor-widget-html\" data-id=\"80d47e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Sans:wght@700&display=swap');\n    \n    .va-scroll-section {\n        width: 100%;\n        padding: 10px 0; \/* Reduzido de 30px para 10px *\/\n        position: relative;\n        overflow: hidden;\n        background-color: white;\n    }\n    \n    .va-scroll-container {\n        position: relative;\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n    }\n    \n    .va-scroll-line {\n        display: flex;\n        white-space: nowrap;\n        will-change: transform;\n        padding: 5px 0; \/* Reduzido de 10px para 5px *\/\n        align-items: center;\n    }\n    \n    .va-scroll-line:first-child {\n        margin-bottom: 1px; \/* Espa\u00e7o m\u00ednimo entre as linhas *\/\n    }\n    \n    .va-scroll-text {\n        font-family: 'IBM Plex Sans', sans-serif;\n        font-size: 24px;\n        font-weight: 700;\n        letter-spacing: 0;\n        text-transform: uppercase;\n        color: #000;\n        display: inline-flex;\n        margin-right: 20px;\n    }\n    \n    .va-upside-down {\n        transform: rotate(180deg);\n        display: inline-flex;\n    }\n<\/style>\n\n<div class=\"va-scroll-section\">\n    <div class=\"va-scroll-container\">\n        <!-- Linha 1: IMAGEM DESIGN COMUNICA\u00c7\u00c3O -->\n        <div class=\"va-scroll-line\" id=\"va-scrollLine1\">\n            <!-- Ser\u00e1 preenchido por JavaScript -->\n        <\/div>\n        \n        <!-- Linha 2: VISUAL FACTORY (invertido) -->\n        <div class=\"va-scroll-line\" id=\"va-scrollLine2\">\n            <!-- Ser\u00e1 preenchido por JavaScript -->\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    document.addEventListener('DOMContentLoaded', function() {\n        \/\/ Criar o texto de rolagem horizontal\n        const vaScrollLine1 = document.getElementById('va-scrollLine1');\n        const vaScrollLine2 = document.getElementById('va-scrollLine2');\n        const vaRepetitions = 20; \/\/ Repeti\u00e7\u00f5es para preencher o espa\u00e7o completamente\n        \n        \/\/ Fun\u00e7\u00e3o para criar texto\n        function vaCreateText(text, isUpsideDown) {\n            const container = document.createElement('span');\n            container.className = 'va-scroll-text';\n            if (isUpsideDown) {\n                container.classList.add('va-upside-down');\n            }\n            container.textContent = text;\n            return container;\n        }\n        \n        \/\/ Criar o padr\u00e3o repetitivo para linha 1 (normal)\n        for (let i = 0; i < vaRepetitions; i++) {\n            vaScrollLine1.appendChild(vaCreateText(\"IMAGEM DESIGN COMUNICA\u00c7\u00c3O \", false));\n        }\n        \n        \/\/ Criar o padr\u00e3o repetitivo para linha 2 (invertido)\n        for (let i = 0; i < vaRepetitions; i++) {\n            vaScrollLine2.appendChild(vaCreateText(\"VISUAL FACTORY \", true));\n        }\n        \n        \/\/ Vari\u00e1veis para controlar a anima\u00e7\u00e3o\n        let vaScrollLine1Pos = 0;\n        let vaScrollLine2Pos = 0;\n        let vaLastScrollY = window.scrollY;\n        \n        \/\/ Fun\u00e7\u00e3o para atualizar a posi\u00e7\u00e3o do texto\n        function updateTextPosition() {\n            vaScrollLine1.style.transform = `translateX(${vaScrollLine1Pos}px)`;\n            vaScrollLine2.style.transform = `translateX(${vaScrollLine2Pos}px)`;\n        }\n        \n        \/\/ Inicializar posi\u00e7\u00e3o\n        updateTextPosition();\n        \n        \/\/ Adicionar evento de rolagem com alta sensibilidade\n        window.addEventListener('scroll', function() {\n            \/\/ Calcular a diferen\u00e7a de rolagem\n            const currentScrollY = window.scrollY;\n            const scrollDiff = currentScrollY - vaLastScrollY;\n            \n            \/\/ Atualizar posi\u00e7\u00f5es com base na rolagem (multiplicador aumentado para maior sensibilidade)\n            vaScrollLine1Pos -= scrollDiff * 3; \/\/ Movimento para a direita quando rola para baixo\n            vaScrollLine2Pos += scrollDiff * 3; \/\/ Movimento para a esquerda quando rola para baixo\n            \n            \/\/ Atualizar a posi\u00e7\u00e3o do texto\n            updateTextPosition();\n            \n            \/\/ Atualizar a \u00faltima posi\u00e7\u00e3o de rolagem\n            vaLastScrollY = currentScrollY;\n        });\n        \n        \/\/ Adicionar movimento autom\u00e1tico m\u00ednimo para garantir que o usu\u00e1rio perceba que pode rolar\n        function addMinimalMovement() {\n            vaScrollLine1Pos += 0.5;\n            vaScrollLine2Pos -= 0.5;\n            updateTextPosition();\n            \n            \/\/ Parar ap\u00f3s um breve per\u00edodo para n\u00e3o interferir com a rolagem do usu\u00e1rio\n            setTimeout(() => {\n                vaScrollLine1Pos += 0.5;\n                vaScrollLine2Pos -= 0.5;\n                updateTextPosition();\n            }, 500);\n        }\n        \n        \/\/ Adicionar movimento m\u00ednimo ap\u00f3s carregar a p\u00e1gina\n        setTimeout(addMinimalMovement, 1000);\n        \n        \/\/ Adicionar movimento quando o mouse passa sobre a se\u00e7\u00e3o\n        document.querySelector('.va-scroll-section').addEventListener('mouseenter', addMinimalMovement);\n    });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1508593 e-con-full e-flex e-con e-parent\" data-id=\"1508593\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-819ca50 elementor-widget elementor-widget-html\" data-id=\"819ca50\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');\n    \n    .vf-intro-section {\n        width: 100%;\n        padding: 100px 0;\n        background-color: #ffffff;\n        font-family: 'IBM Plex Sans', sans-serif;\n        position: relative;\n    }\n    \n    .vf-intro-container {\n        max-width: 1200px;\n        margin: 0 auto;\n        padding: 0 20px;\n    }\n    \n    .vf-intro-content {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        text-align: center;\n    }\n    \n    .vf-intro-heading {\n        font-size: 42px;\n        font-weight: 700;\n        color: #000;\n        margin-bottom: 30px;\n        position: relative;\n        display: inline-block;\n    }\n    \n    .vf-intro-heading::after {\n        content: '';\n        position: absolute;\n        bottom: -10px;\n        left: 50%;\n        transform: translateX(-50%);\n        width: 500px; \/* Linha em degrad\u00ea aumentada *\/\n        height: 4px;\n        background: linear-gradient(to right, #f3e728, #02a8d8, #dc3588);\n    }\n    \n    .vf-intro-text {\n        font-size: 22px;\n        line-height: 1.6;\n        color: #333;\n        max-width: 800px;\n        margin: 0 auto;\n    }\n    \n    .vf-intro-text p {\n        margin-bottom: 20px;\n    }\n    \n    .vf-intro-text strong {\n        color: #000;\n        font-weight: 600;\n    }\n    \n    .vf-intro-highlight {\n        color: #02a8d8;\n        font-weight: 500;\n    }\n    \n    .vf-intro-services {\n        display: flex;\n        justify-content: center;\n        gap: 30px;\n        margin-top: 50px;\n        flex-wrap: wrap;\n    }\n    \n    .vf-intro-service {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        width: 220px;\n        text-align: center;\n        padding: 20px;\n        transition: transform 0.3s ease;\n    }\n    \n    .vf-intro-service:hover {\n        transform: translateY(-5px);\n    }\n    \n    .vf-intro-service-icon {\n        width: 60px;\n        height: 60px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: #f8f8f8;\n        border-radius: 50%;\n        margin-bottom: 15px;\n        font-size: 24px;\n    }\n    \n    .vf-intro-service:nth-child(1) .vf-intro-service-icon {\n        color: #f3e728;\n    }\n    \n    .vf-intro-service:nth-child(2) .vf-intro-service-icon {\n        color: #02a8d8;\n    }\n    \n    .vf-intro-service:nth-child(3) .vf-intro-service-icon {\n        color: #dc3588;\n    }\n    \n    .vf-intro-service-title {\n        font-size: 22px;\n        font-weight: 600;\n        margin-bottom: 10px;\n        color: #000;\n    }\n    \n    .vf-intro-service-desc {\n        font-size: 18px;\n        color: #666;\n        line-height: 1.5;\n    }\n    \n    \/* Responsividade *\/\n    @media (max-width: 768px) {\n        .vf-intro-section {\n            padding: 70px 0;\n        }\n        \n        .vf-intro-heading {\n            font-size: 30px;\n        }\n        \n        .vf-intro-heading::after {\n            width: 150px;\n        }\n        \n        .vf-intro-text {\n            font-size: 16px;\n        }\n        \n        .vf-intro-services {\n            gap: 20px;\n        }\n        \n        .vf-intro-service {\n            width: 180px;\n        }\n    }\n    \n    @media (max-width: 576px) {\n        .vf-intro-section {\n            padding: 50px 0;\n        }\n        \n        .vf-intro-heading {\n            font-size: 26px;\n        }\n        \n        .vf-intro-heading::after {\n            width: 120px;\n        }\n        \n        .vf-intro-text {\n            font-size: 15px;\n        }\n        \n        .vf-intro-services {\n            flex-direction: column;\n            align-items: center;\n        }\n        \n        .vf-intro-service {\n            width: 100%;\n            max-width: 280px;\n        }\n    }\n<\/style>\n\n<section class=\"vf-intro-section\">\n    <div class=\"vf-intro-container\">\n        <div class=\"vf-intro-content\">\n            <h2 class=\"vf-intro-heading\">Marketing Digital<\/h2>\n            \n            <div class=\"vf-intro-text\">\n                <p>A <strong>Visual Factory<\/strong> \u00e9 especializada na cria\u00e7\u00e3o de solu\u00e7\u00f5es digitais que refor\u00e7am a presen\u00e7a e a autoridade da sua marca. Oferecemos servi\u00e7os completos de <span class=\"vf-intro-highlight\">gest\u00e3o de redes sociais<\/span>, <span class=\"vf-intro-highlight\">gest\u00e3o de tr\u00e1fego pago<\/span> e <span class=\"vf-intro-highlight\">constru\u00e7\u00e3o de sites em WordPress<\/span>, sempre com foco na qualidade, inova\u00e7\u00e3o e desempenho.<\/p>\n            <\/div>\n            \n            <div class=\"vf-intro-services\">\n                <div class=\"vf-intro-service\">\n                    <div class=\"vf-intro-service-icon\">\n                        <!-- \u00cdcone de smartphone -->\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" fill=\"currentColor\" viewbox=\"0 0 16 16\">\n                            <path d=\"M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z\"\/>\n                            <path d=\"M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z\"\/>\n                        <\/svg>\n                    <\/div>\n                    <h3 class=\"vf-intro-service-title\">Redes Sociais<\/h3>\n                    <p class=\"vf-intro-service-desc\">Gest\u00e3o profissional das suas plataformas sociais para aumentar o engajamento e visibilidade.<\/p>\n                <\/div>\n                \n                <div class=\"vf-intro-service\">\n                    <div class=\"vf-intro-service-icon\">\n                        <!-- \u00cdcone de foguete (rocket) -->\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" fill=\"currentColor\" viewbox=\"0 0 16 16\">\n                            <path d=\"M14.064 0a8.75 8.75 0 0 0-6.187 2.563l-.459.458c-.314.314-.616.641-.904.979H3.31a1.75 1.75 0 0 0-1.49.833L.11 7.607a.75.75 0 0 0 .418 1.11l3.102.954c.057.01.115.025.169.042l2.5 2.5c.017.054.032.112.042.169l.954 3.102a.75.75 0 0 0 1.11.418l2.774-1.707a1.75 1.75 0 0 0 .833-1.49V9.485c.338-.288.665-.59.979-.904l.458-.459A8.75 8.75 0 0 0 16 1.936V1.75A1.75 1.75 0 0 0 14.25 0h-.186ZM10.5 10.625c-.088.06-.177.118-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 0 0 .119-.213v-2.066ZM3.678 8.116 5.2 5.766c.058-.09.117-.178.176-.266H3.309a.25.25 0 0 0-.213.119l-1.2 1.95 1.782.547ZM12 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z\"\/>\n                            <path d=\"M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z\"\/>\n                        <\/svg>\n                    <\/div>\n                    <h3 class=\"vf-intro-service-title\">Tr\u00e1fego Pago<\/h3>\n                    <p class=\"vf-intro-service-desc\">Campanhas otimizadas para maximizar o retorno do seu investimento em publicidade.<\/p>\n                <\/div>\n                \n                <div class=\"vf-intro-service\">\n                    <div class=\"vf-intro-service-icon\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" fill=\"currentColor\" viewbox=\"0 0 16 16\">\n                            <path d=\"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z\"\/>\n                        <\/svg>\n                    <\/div>\n                    <h3 class=\"vf-intro-service-title\">Sites WordPress<\/h3>\n                    <p class=\"vf-intro-service-desc\">Desenvolvimento de websites profissionais, responsivos e otimizados para convers\u00e3o.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-997f35f e-con-full e-flex e-con e-parent\" data-id=\"997f35f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8551d10 elementor-widget elementor-widget-html\" data-id=\"8551d10\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');\n    \n    .vf-workflow-section {\n        width: 100%;\n        padding: 120px 0;\n        background-color: #f0f0f0; \/* Fundo bem mais claro *\/\n        position: relative;\n        overflow: hidden;\n        font-family: 'IBM Plex Sans', sans-serif;\n        color: #333; \/* Texto escuro para contraste com fundo claro *\/\n    }\n    \n    .vf-workflow-container {\n        max-width: 1200px;\n        margin: 0 auto;\n        padding: 0 20px;\n        position: relative;\n        z-index: 2;\n    }\n    \n    .vf-workflow-header {\n        text-align: center;\n        margin-bottom: 60px;\n    }\n    \n    .vf-workflow-title {\n        font-size: 42px;\n        font-weight: 700;\n        margin-bottom: 20px;\n        color: #222;\n        letter-spacing: 1px;\n        position: relative;\n        display: inline-block;\n    }\n    \n    .vf-workflow-title::after {\n        content: '';\n        position: absolute;\n        bottom: -10px;\n        left: 50%;\n        transform: translateX(-50%);\n        width: 80%;\n        height: 4px;\n        background: linear-gradient(to right, #f3e728, #02a8d8, #dc3588);\n    }\n    \n    .vf-workflow-subtitle {\n        font-size: 22px;\n        line-height: 1.6;\n        max-width: 800px;\n        margin: 0 auto;\n        color: #555;\n    }\n    \n    .vf-workflow-steps {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: center;\n        gap: 30px;\n        margin-top: 50px;\n    }\n    \n    .vf-workflow-step {\n        width: calc(50% - 15px);\n        background: #ffffff; \/* Cards com fundo branco *\/\n        border: 1px solid rgba(0, 0, 0, 0.08);\n        border-radius: 8px;\n        padding: 30px;\n        position: relative;\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        overflow: hidden;\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n    }\n    \n    .vf-workflow-step:hover {\n        transform: translateY(-5px);\n        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n    }\n    \n    .vf-workflow-step::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 4px;\n        height: 100%;\n    }\n    \n    .vf-workflow-step:nth-child(1)::before {\n        background-color: #f3e728;\n    }\n    \n    .vf-workflow-step:nth-child(2)::before {\n        background-color: #02a8d8;\n    }\n    \n    .vf-workflow-step:nth-child(3)::before {\n        background-color: #dc3588;\n    }\n    \n    .vf-workflow-step:nth-child(4)::before {\n        background: linear-gradient(to bottom, #f3e728, #02a8d8, #dc3588);\n    }\n    \n    .vf-workflow-step-number {\n        position: absolute;\n        top: 20px;\n        right: 20px;\n        font-family: 'Space Mono', monospace;\n        font-size: 64px;\n        font-weight: 700;\n        opacity: 0.07;\n        color: #000;\n        line-height: 1;\n    }\n    \n    .vf-workflow-step-title {\n        font-size: 22px;\n        font-weight: 700;\n        margin-bottom: 15px;\n        padding-right: 40px;\n    }\n    \n    .vf-workflow-step:nth-child(1) .vf-workflow-step-title {\n        color: #d1c000; \/* Cores um pouco mais escuras para melhor contraste *\/\n    }\n    \n    .vf-workflow-step:nth-child(2) .vf-workflow-step-title {\n        color: #0290ba;\n    }\n    \n    .vf-workflow-step:nth-child(3) .vf-workflow-step-title {\n        color: #c02e75;\n    }\n    \n    .vf-workflow-step:nth-child(4) .vf-workflow-step-title {\n        color: #d1c000;\n    }\n    \n    .vf-workflow-step-desc {\n        font-size: 18px;\n        line-height: 1.6;\n        color: #555;\n    }\n    \n    .vf-workflow-icon {\n        margin-bottom: 15px;\n        width: 50px;\n        height: 50px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 50%;\n        background: rgba(0, 0, 0, 0.03);\n    }\n    \n    .vf-workflow-step:nth-child(1) .vf-workflow-icon {\n        color: #d1c000;\n    }\n    \n    .vf-workflow-step:nth-child(2) .vf-workflow-icon {\n        color: #0290ba;\n    }\n    \n    .vf-workflow-step:nth-child(3) .vf-workflow-icon {\n        color: #c02e75;\n    }\n    \n    .vf-workflow-step:nth-child(4) .vf-workflow-icon {\n        color: #d1c000;\n    }\n    \n    \/* Anima\u00e7\u00e3o de brilho retr\u00f4 sutil *\/\n    @keyframes vf-glow {\n        0% {\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05), 0 0 3px rgba(243, 231, 40, 0.2);\n        }\n        33% {\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05), 0 0 3px rgba(2, 168, 216, 0.2);\n        }\n        66% {\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05), 0 0 3px rgba(220, 53, 136, 0.2);\n        }\n        100% {\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05), 0 0 3px rgba(243, 231, 40, 0.2);\n        }\n    }\n    \n    .vf-workflow-step {\n        animation: vf-glow 8s infinite;\n    }\n    \n    .vf-workflow-step:nth-child(1) {\n        animation-delay: 0s;\n    }\n    \n    .vf-workflow-step:nth-child(2) {\n        animation-delay: 2s;\n    }\n    \n    .vf-workflow-step:nth-child(3) {\n        animation-delay: 4s;\n    }\n    \n    .vf-workflow-step:nth-child(4) {\n        animation-delay: 6s;\n    }\n    \n    \/* Responsividade *\/\n    @media (max-width: 992px) {\n        .vf-workflow-step {\n            width: calc(50% - 15px);\n        }\n    }\n    \n    @media (max-width: 768px) {\n        .vf-workflow-section {\n            padding: 80px 0;\n        }\n        \n        .vf-workflow-title {\n            font-size: 36px;\n        }\n        \n        .vf-workflow-subtitle {\n            font-size: 16px;\n        }\n        \n        .vf-workflow-step {\n            width: 100%;\n        }\n    }\n    \n    @media (max-width: 576px) {\n        .vf-workflow-section {\n            padding: 60px 0;\n        }\n        \n        .vf-workflow-title {\n            font-size: 30px;\n        }\n        \n        .vf-workflow-step {\n            padding: 25px;\n        }\n        \n        .vf-workflow-step-number {\n            font-size: 48px;\n        }\n        \n        .vf-workflow-step-title {\n            font-size: 20px;\n        }\n    }\n<\/style>\n\n<section class=\"vf-workflow-section\">\n    <!-- Elementos de fundo retr\u00f4 sutis -->\n    <div class=\"vf-workflow-retro-lines\"><\/div>\n    <div class=\"vf-workflow-retro-grid\"><\/div>\n    \n    <div class=\"vf-workflow-container\">\n        <div class=\"vf-workflow-header\">\n            <h2 class=\"vf-workflow-title\">A Nossa Forma de Trabalhar<\/h2>\n            <p class=\"vf-workflow-subtitle\">Adotamos um m\u00e9todo estrat\u00e9gico que combina criatividade, an\u00e1lise de dados e as melhores pr\u00e1ticas de marketing digital.<\/p>\n        <\/div>\n        \n        <div class=\"vf-workflow-steps\">\n            <div class=\"vf-workflow-step\">\n                <div class=\"vf-workflow-step-number\">01<\/div>\n                <div class=\"vf-workflow-icon\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewbox=\"0 0 16 16\">\n                        <path d=\"M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z\"\/>\n                        <path d=\"M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z\"\/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"vf-workflow-step-title\">Planeamento Personalizado<\/h3>\n                <p class=\"vf-workflow-step-desc\">Cada projeto come\u00e7a com um estudo detalhado do seu p\u00fablico-alvo e da concorr\u00eancia.<\/p>\n            <\/div>\n            \n            <div class=\"vf-workflow-step\">\n                <div class=\"vf-workflow-step-number\">02<\/div>\n                <div class=\"vf-workflow-icon\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewbox=\"0 0 16 16\">\n                        <path d=\"M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z\"\/>\n                        <path d=\"M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z\"\/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"vf-workflow-step-title\">Cria\u00e7\u00e3o de Conte\u00fado Estrat\u00e9gico<\/h3>\n                <p class=\"vf-workflow-step-desc\">Produzimos textos, imagens e v\u00eddeos otimizados para SEO e para envolver o seu p\u00fablico.<\/p>\n            <\/div>\n            \n            <div class=\"vf-workflow-step\">\n                <div class=\"vf-workflow-step-number\">03<\/div>\n                <div class=\"vf-workflow-icon\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewbox=\"0 0 16 16\">\n                        <path d=\"M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z\"\/>\n                        <path d=\"M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z\"\/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"vf-workflow-step-title\">Execu\u00e7\u00e3o e Monitoriza\u00e7\u00e3o<\/h3>\n                <p class=\"vf-workflow-step-desc\">Implementamos campanhas e monitorizamos continuamente os resultados para ajustes e melhorias.<\/p>\n            <\/div>\n            \n            <div class=\"vf-workflow-step\">\n                <div class=\"vf-workflow-step-number\">04<\/div>\n                <div class=\"vf-workflow-icon\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" viewbox=\"0 0 16 16\">\n                        <path fill-rule=\"evenodd\" d=\"M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z\"\/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"vf-workflow-step-title\">Otimiza\u00e7\u00e3o e Crescimento<\/h3>\n                <p class=\"vf-workflow-step-desc\">Refinamos as estrat\u00e9gias para garantir que a sua marca evolui e atinge novos patamares.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b7d1267 e-con-full e-flex e-con e-parent\" data-id=\"b7d1267\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ab07b3c elementor-widget elementor-widget-html\" data-id=\"ab07b3c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');\n    \n    * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n    }\n    \n    body {\n        font-family: 'IBM Plex Sans', sans-serif;\n        line-height: 1.6;\n        color: #333;\n    }\n    \n    \/* SE\u00c7\u00c3O: M\u00c9TODO VISUAL FACTORY *\/\n    .vf-method-section {\n        width: 100%;\n        padding: 120px 0;\n        background-color: #ffffff;\n        position: relative;\n        overflow: hidden;\n        font-family: 'IBM Plex Sans', sans-serif;\n        color: #333;\n    }\n    \n    \/* Movimento do fundo ao passar o mouse *\/\n    .vf-method-section:hover .vf-method-retro-lines {\n        transform: translateY(-5px);\n    }\n    \n    .vf-method-section:hover .vf-method-retro-grid {\n        transform: translateY(-3px) translateX(-3px);\n    }\n    \n    .vf-method-container {\n        max-width: 1200px;\n        margin: 0 auto;\n        padding: 0 20px;\n        position: relative;\n        z-index: 2;\n    }\n    \n    .vf-method-header {\n        text-align: center;\n        margin-bottom: 60px;\n        opacity: 0;\n        transform: translateY(30px);\n        transition: opacity 0.8s ease, transform 0.8s ease;\n    }\n    \n    \/* Classe para animar elementos ao entrar na viewport *\/\n    .vf-animate-in {\n        opacity: 1 !important;\n        transform: translateY(0) !important;\n    }\n    \n    .vf-method-title {\n        font-size: 42px;\n        font-weight: 700;\n        margin-bottom: 20px;\n        color: #222;\n        letter-spacing: 1px;\n        position: relative;\n        display: inline-block;\n    }\n    \n    .vf-method-title::after {\n        content: '';\n        position: absolute;\n        bottom: -10px;\n        left: 50%;\n        transform: translateX(-50%);\n        width: 0; \/* Come\u00e7a com 0 para anima\u00e7\u00e3o *\/\n        height: 4px;\n        background: linear-gradient(to right, #f3e728, #02a8d8, #dc3588);\n        transition: width 0.5s ease-out 0.3s;\n    }\n    \n    \/* Anima\u00e7\u00e3o da linha do t\u00edtulo *\/\n    .vf-animate-in.vf-method-header .vf-method-title::after {\n        width: 80%;\n    }\n    \n    .vf-method-subtitle {\n        font-size: 18px;\n        line-height: 1.6;\n        max-width: 800px;\n        margin: 0 auto;\n        color: #555;\n    }\n    \n    .vf-method-content {\n        display: flex;\n        flex-direction: column;\n        gap: 50px;\n        margin-top: 50px;\n    }\n    \n    .vf-method-intro {\n        text-align: center;\n        max-width: 900px;\n        margin: 0 auto;\n        font-size: 18px;\n        line-height: 1.8;\n        color: #444;\n        opacity: 0;\n        transform: translateY(30px);\n        transition: opacity 0.8s ease, transform 0.8s ease;\n        transition-delay: 0.2s;\n    }\n    \n    \/* Novo layout de conex\u00e3o *\/\n    .vf-method-connection {\n        position: relative;\n        padding: 40px 0;\n        margin-top: 30px;\n    }\n    \n    \/* Linha de conex\u00e3o central com anima\u00e7\u00e3o *\/\n    .vf-method-connection-line {\n        position: absolute;\n        top: 0;\n        left: 50%;\n        transform: translateX(-50%);\n        width: 6px;\n        height: 0; \/* Come\u00e7a com 0 para anima\u00e7\u00e3o *\/\n        background: linear-gradient(to bottom, #f3e728, #02a8d8, #dc3588);\n        border-radius: 3px;\n        z-index: 1;\n        transition: height 0.5s ease-out;\n    }\n    \n    \/* Anima\u00e7\u00e3o da linha de conex\u00e3o *\/\n    .vf-animate-in.vf-method-connection .vf-method-connection-line {\n        height: 100%;\n    }\n    \n    .vf-method-steps {\n        position: relative;\n        z-index: 2;\n    }\n    \n    .vf-method-step {\n        display: flex;\n        align-items: center;\n        margin-bottom: 80px;\n        position: relative;\n        opacity: 0;\n        transform: translateX(-50px);\n        transition: opacity 0.8s ease, transform 0.8s ease;\n    }\n    \n    .vf-method-step:nth-child(even) {\n        transform: translateX(50px);\n    }\n    \n    \/* Atraso escalonado para cada etapa *\/\n    .vf-method-step:nth-child(1) {\n        transition-delay: 0.4s;\n    }\n    \n    .vf-method-step:nth-child(2) {\n        transition-delay: 0.8s;\n    }\n    \n    .vf-method-step:nth-child(3) {\n        transition-delay: 0.5s;\n    }\n    \n    .vf-method-step:last-child {\n        margin-bottom: 0;\n    }\n    \n    \/* Alternando lados *\/\n    .vf-method-step:nth-child(odd) {\n        flex-direction: row;\n    }\n    \n    .vf-method-step:nth-child(even) {\n        flex-direction: row-reverse;\n    }\n    \n    .vf-method-step-content {\n        width: calc(50% - 50px);\n        background: #ffffff;\n        border-radius: 12px;\n        padding: 40px;\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        position: relative;\n        z-index: 2;\n        overflow: hidden;\n    }\n    \n    \/* Efeito de brilho ao passar o mouse *\/\n    .vf-method-step-content::before {\n        content: '';\n        position: absolute;\n        top: -100%;\n        left: -100%;\n        width: 100%;\n        height: 100%;\n        background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);\n        transform: rotate(45deg);\n        transition: all 0.7s ease;\n        z-index: 1;\n    }\n    \n    .vf-method-step:hover .vf-method-step-content::before {\n        top: 100%;\n        left: 100%;\n    }\n    \n    .vf-method-step:hover .vf-method-step-content {\n        transform: translateY(-5px);\n        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);\n    }\n    \n    .vf-method-step-icon {\n        width: 100px;\n        height: 100px;\n        border-radius: 50%;\n        background: #ffffff;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%) scale(0.8); \/* Come\u00e7a menor para anima\u00e7\u00e3o *\/\n        z-index: 3;\n        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    }\n    \n    \/* Anima\u00e7\u00e3o do \u00edcone ao entrar na viewport *\/\n    .vf-animate-in .vf-method-step-icon {\n        transform: translateX(-50%) scale(1);\n    }\n    \n    \/* Efeito de flutua\u00e7\u00e3o ao passar o mouse *\/\n    .vf-method-step:hover .vf-method-step-icon {\n        transform: translateX(-50%) scale(1.05);\n    }\n    \n    .vf-method-step:nth-child(1) .vf-method-step-icon {\n        border: 4px solid #f3e728;\n        color: #d1c000;\n    }\n    \n    .vf-method-step:nth-child(2) .vf-method-step-icon {\n        border: 4px solid #02a8d8;\n        color: #0290ba;\n    }\n    \n    .vf-method-step:nth-child(3) .vf-method-step-icon {\n        border: 4px solid #dc3588;\n        color: #c02e75;\n    }\n    \n    .vf-method-step-title {\n        font-size: 24px;\n        font-weight: 700;\n        margin-bottom: 15px;\n        position: relative;\n        z-index: 2;\n    }\n    \n    .vf-method-step:nth-child(1) .vf-method-step-title {\n        color: #d1c000;\n    }\n    \n    .vf-method-step:nth-child(2) .vf-method-step-title {\n        color: #0290ba;\n    }\n    \n    .vf-method-step:nth-child(3) .vf-method-step-title {\n        color: #c02e75;\n    }\n    \n    .vf-method-step-desc {\n        font-size: 16px;\n        line-height: 1.6;\n        color: #555;\n        position: relative;\n        z-index: 2;\n    }\n    \n    \/* Conectores horizontais com anima\u00e7\u00e3o *\/\n    .vf-method-connector {\n        position: absolute;\n        top: 50px;\n        left: 50%;\n        width: 0; \/* Come\u00e7a com 0 para anima\u00e7\u00e3o *\/\n        height: 6px;\n        background: linear-gradient(to right, #f3e728, #02a8d8);\n        z-index: 1;\n        transition: width 0.8s ease-out;\n    }\n    \n    \/* Anima\u00e7\u00e3o dos conectores *\/\n    .vf-animate-in .vf-method-step:nth-child(odd) .vf-method-connector {\n        width: 50px;\n        transform: translateX(0);\n    }\n    \n    .vf-animate-in .vf-method-step:nth-child(even) .vf-method-connector {\n        width: 50px;\n        transform: translateX(-100%);\n    }\n    \n    .vf-method-step:nth-child(1) .vf-method-connector {\n        background: #f3e728;\n    }\n    \n    .vf-method-step:nth-child(2) .vf-method-connector {\n        background: #02a8d8;\n    }\n    \n    .vf-method-step:nth-child(3) .vf-method-connector {\n        background: #dc3588;\n    }\n    \n    \/* C\u00edrculos de conex\u00e3o com anima\u00e7\u00e3o *\/\n    .vf-method-connection-dot {\n        position: absolute;\n        width: 20px;\n        height: 20px;\n        border-radius: 50%;\n        background: #ffffff;\n        left: 50%;\n        transform: translateX(-50%) scale(0); \/* Come\u00e7a invis\u00edvel *\/\n        z-index: 2;\n        box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);\n        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    }\n    \n    \/* Anima\u00e7\u00e3o dos c\u00edrculos *\/\n    .vf-animate-in .vf-method-connection-dot {\n        transform: translateX(-50%) scale(1);\n    }\n    \n    .vf-method-step:nth-child(1) .vf-method-connection-dot {\n        top: 50px;\n        background: #f3e728;\n        transition-delay: 0.6s;\n    }\n    \n    .vf-method-step:nth-child(2) .vf-method-connection-dot {\n        top: 50px;\n        background: #02a8d8;\n        transition-delay: 1.0s;\n    }\n    \n    .vf-method-step:nth-child(3) .vf-method-connection-dot {\n        top: 50px;\n        background: #dc3588;\n        transition-delay: 0.7s;\n    }\n    \n    \/* Anima\u00e7\u00e3o de pulso para os c\u00edrculos de conex\u00e3o *\/\n    @keyframes pulse {\n        0% {\n            box-shadow: 0 0 0 0 rgba(243, 231, 40, 0.4);\n        }\n        70% {\n            box-shadow: 0 0 0 10px rgba(243, 231, 40, 0);\n        }\n        100% {\n            box-shadow: 0 0 0 0 rgba(243, 231, 40, 0);\n        }\n    }\n    \n    .vf-animate-in .vf-method-step:nth-child(1) .vf-method-connection-dot {\n        animation: pulse 1s infinite;\n        animation-delay: 1s;\n    }\n    \n    @keyframes pulse2 {\n        0% {\n            box-shadow: 0 0 0 0 rgba(2, 168, 216, 0.4);\n        }\n        70% {\n            box-shadow: 0 0 0 10px rgba(2, 168, 216, 0);\n        }\n        100% {\n            box-shadow: 0 0 0 0 rgba(2, 168, 216, 0);\n        }\n    }\n    \n    .vf-animate-in .vf-method-step:nth-child(2) .vf-method-connection-dot {\n        animation: pulse2 1s infinite;\n        animation-delay: 0.6s;\n    }\n    \n    @keyframes pulse3 {\n        0% {\n            box-shadow: 0 0 0 0 rgba(220, 53, 136, 0.4);\n        }\n        70% {\n            box-shadow: 0 0 0 10px rgba(220, 53, 136, 0);\n        }\n        100% {\n            box-shadow: 0 0 0 0 rgba(220, 53, 136, 0);\n        }\n    }\n    \n    .vf-animate-in .vf-method-step:nth-child(3) .vf-method-connection-dot {\n        animation: pulse3 2s infinite;\n        animation-delay: 0.8s;\n    }\n    \n    \/* Efeito de part\u00edculas flutuantes *\/\n    .vf-particles {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n        z-index: 1;\n    }\n    \n    .vf-particle {\n        position: absolute;\n        width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        opacity: 0.3;\n        pointer-events: none;\n    }\n    \n    .vf-particle:nth-child(1) {\n        background-color: #f3e728;\n        top: 20%;\n        left: 10%;\n        animation: floatParticle 1s infinite linear;\n    }\n    \n    .vf-particle:nth-child(2) {\n        background-color: #02a8d8;\n        top: 70%;\n        left: 20%;\n        animation: floatParticle 5s infinite linear;\n        animation-delay: 2s;\n    }\n    \n    .vf-particle:nth-child(3) {\n        background-color: #dc3588;\n        top: 40%;\n        left: 80%;\n        animation: floatParticle 10s infinite linear;\n        animation-delay: 1s;\n    }\n    \n    .vf-particle:nth-child(4) {\n        background-color: #f3e728;\n        top: 80%;\n        left: 85%;\n        animation: floatParticle 15s infinite linear;\n        animation-delay: 0.5s;\n    }\n    \n    .vf-particle:nth-child(5) {\n        background-color: #02a8d8;\n        top: 30%;\n        left: 50%;\n        animation: floatParticle 10s infinite linear;\n        animation-delay: 3s;\n    }\n    \n    @keyframes floatParticle {\n        0% {\n            transform: translate(0, 0) rotate(0deg);\n        }\n        25% {\n            transform: translate(100px, 50px) rotate(90deg);\n        }\n        50% {\n            transform: translate(50px, 100px) rotate(180deg);\n        }\n        75% {\n            transform: translate(-50px, 50px) rotate(270deg);\n        }\n        100% {\n            transform: translate(0, 0) rotate(360deg);\n        }\n    }\n    \n    \/* Responsividade *\/\n    @media (max-width: 992px) {\n        .vf-method-step {\n            flex-direction: column !important;\n            align-items: center;\n            margin-bottom: 100px;\n            transform: translateY(30px) !important;\n        }\n        \n        .vf-method-step-content {\n            width: 80%;\n            margin-top: 60px;\n        }\n        \n        .vf-method-step-icon {\n            top: -50px;\n        }\n        \n        .vf-method-connector {\n            display: none;\n        }\n        \n        .vf-method-connection-dot {\n            top: 0 !important;\n        }\n    }\n    \n    @media (max-width: 768px) {\n        .vf-method-section {\n            padding: 80px 0;\n        }\n        \n        .vf-method-title {\n            font-size: 36px;\n        }\n        \n        .vf-method-subtitle,\n        .vf-method-intro {\n            font-size: 16px;\n        }\n        \n        .vf-method-step-content {\n            width: 90%;\n            padding: 30px;\n        }\n    }\n    \n    @media (max-width: 576px) {\n        .vf-method-section {\n            padding: 60px 0;\n        }\n        \n        .vf-method-title {\n            font-size: 30px;\n        }\n        \n        .vf-method-step-content {\n            width: 95%;\n            padding: 25px;\n        }\n        \n        .vf-method-step-icon {\n            width: 80px;\n            height: 80px;\n        }\n        \n        .vf-method-step-title {\n            font-size: 20px;\n        }\n    }\n<\/style>\n\n<!-- SE\u00c7\u00c3O: M\u00c9TODO VISUAL FACTORY -->\n<section class=\"vf-method-section\">\n    <!-- Elementos de fundo retr\u00f4 sutis -->\n    <div class=\"vf-method-retro-lines\"><\/div>\n    <div class=\"vf-method-retro-grid\"><\/div>\n    \n    <!-- Part\u00edculas flutuantes -->\n    <div class=\"vf-particles\">\n        <div class=\"vf-particle\"><\/div>\n        <div class=\"vf-particle\"><\/div>\n        <div class=\"vf-particle\"><\/div>\n        <div class=\"vf-particle\"><\/div>\n        <div class=\"vf-particle\"><\/div>\n    <\/div>\n    \n    <div class=\"vf-method-container\">\n        <div class=\"vf-method-header\">\n            <h2 class=\"vf-method-title\">M\u00e9todo Visual Factory<\/h2>\n            <p class=\"vf-method-subtitle\">A Liga\u00e7\u00e3o entre Fotografia, Design e Comunica\u00e7\u00e3o<\/p>\n        <\/div>\n        \n        <div class=\"vf-method-content\">\n            <p class=\"vf-method-intro\">\n                A identidade visual \u00e9 essencial para um marketing digital de grande impacto. A nossa abordagem combina fotografia profissional, design criativo e estrat\u00e9gias de comunica\u00e7\u00e3o digital para gerar resultados:\n            <\/p>\n            \n            <div class=\"vf-method-connection\">\n                <!-- Linha de conex\u00e3o central -->\n                <div class=\"vf-method-connection-line\"><\/div>\n                \n                <div class=\"vf-method-steps\">\n                    <!-- Etapa 1: Fotografia e V\u00eddeo -->\n                    <div class=\"vf-method-step\">\n                        <div class=\"vf-method-step-content\">\n                            <h3 class=\"vf-method-step-title\">Fotografia e V\u00eddeo Profissionais<\/h3>\n                            <p class=\"vf-method-step-desc\">\n                                Imagens de alta qualidade que captam a ess\u00eancia da marca e envolvem o p\u00fablico. Nossa abordagem fotogr\u00e1fica \u00e9 a base para uma comunica\u00e7\u00e3o visual impactante que transmite autenticidade e valor.\n                            <\/p>\n                        <\/div>\n                        \n                        <div class=\"vf-method-step-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"40\" height=\"40\" fill=\"currentColor\" viewbox=\"0 0 16 16\">\n                                <path d=\"M10.5 8.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z\"\/>\n                                <path d=\"M2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2zm.5 2a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm9 2.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z\"\/>\n                            <\/svg>\n                        <\/div>\n                        \n                        <div class=\"vf-method-connector\"><\/div>\n                        <div class=\"vf-method-connection-dot\"><\/div>\n                    <\/div>\n                    \n                    <!-- Etapa 2: Design Estrat\u00e9gico -->\n                    <div class=\"vf-method-step\">\n                        <div class=\"vf-method-step-content\">\n                            <h3 class=\"vf-method-step-title\">Design Estrat\u00e9gico<\/h3>\n                            <p class=\"vf-method-step-desc\">\n                                Criamos trabalhos que refletem os valores da sua empresa e melhoram a experi\u00eancia do utilizador. Nosso design transforma as imagens em elementos de comunica\u00e7\u00e3o coerentes que fortalecem sua identidade de marca.\n                            <\/p>\n                        <\/div>\n                        \n                        <div class=\"vf-method-step-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"40\" height=\"40\" fill=\"currentColor\" viewbox=\"0 0 16 16\">\n                                <path d=\"M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z\"\/>\n                            <\/svg>\n                        <\/div>\n                        \n                        <div class=\"vf-method-connector\"><\/div>\n                        <div class=\"vf-method-connection-dot\"><\/div>\n                    <\/div>\n                    \n                    <!-- Etapa 3: Comunica\u00e7\u00e3o Digital -->\n                    <div class=\"vf-method-step\">\n                        <div class=\"vf-method-step-content\">\n                            <h3 class=\"vf-method-step-title\">Comunica\u00e7\u00e3o Digital Inteligente<\/h3>\n                            <p class=\"vf-method-step-desc\">\n                                Aplicamos t\u00e9cnicas avan\u00e7adas de gest\u00e3o de redes sociais e tr\u00e1fego pago para expandir o seu alcance e convers\u00f5es. Utilizamos os elementos visuais e de design para criar estrat\u00e9gias de comunica\u00e7\u00e3o que geram resultados mensur\u00e1veis.\n                            <\/p>\n                        <\/div>\n                        \n                        <div class=\"vf-method-step-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"40\" height=\"40\" fill=\"currentColor\" viewbox=\"0 0 16 16\">\n                                <path d=\"M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z\"\/>\n                            <\/svg>\n                        <\/div>\n                        \n                        <div class=\"vf-method-connector\"><\/div>\n                        <div class=\"vf-method-connection-dot\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <!-- Script para anima\u00e7\u00f5es de scroll -->\n    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ Fun\u00e7\u00e3o para verificar se um elemento est\u00e1 vis\u00edvel na viewport\n            function isElementInViewport(el) {\n                const rect = el.getBoundingClientRect();\n                return (\n                    rect.top <= (window.innerHeight || document.documentElement.clientHeight) * 0.8 &&\n                    rect.bottom >= 0\n                );\n            }\n            \n            \/\/ Elementos para animar\n            const header = document.querySelector('.vf-method-header');\n            const intro = document.querySelector('.vf-method-intro');\n            const connection = document.querySelector('.vf-method-connection');\n            const steps = document.querySelectorAll('.vf-method-step');\n            \n            \/\/ Fun\u00e7\u00e3o para verificar e animar elementos\n            function checkScroll() {\n                if (isElementInViewport(header) && !header.classList.contains('vf-animate-in')) {\n                    header.classList.add('vf-animate-in');\n                }\n                \n                if (isElementInViewport(intro) && !intro.classList.contains('vf-animate-in')) {\n                    intro.classList.add('vf-animate-in');\n                }\n                \n                if (isElementInViewport(connection) && !connection.classList.contains('vf-animate-in')) {\n                    connection.classList.add('vf-animate-in');\n                }\n                \n                steps.forEach(step => {\n                    if (isElementInViewport(step) && !step.classList.contains('vf-animate-in')) {\n                        step.classList.add('vf-animate-in');\n                    }\n                });\n            }\n            \n            \/\/ Verificar ao carregar a p\u00e1gina\n            checkScroll();\n            \n            \/\/ Verificar ao rolar a p\u00e1gina\n            window.addEventListener('scroll', checkScroll);\n            \n            \/\/ Efeito de movimento do fundo ao mover o mouse\n            const section = document.querySelector('.vf-method-section');\n            const retroLines = document.querySelector('.vf-method-retro-lines');\n            const retroGrid = document.querySelector('.vf-method-retro-grid');\n            \n            section.addEventListener('mousemove', function(e) {\n                const x = e.clientX \/ window.innerWidth;\n                const y = e.clientY \/ window.innerHeight;\n                \n                retroLines.style.transform = `translateY(${y * -10}px)`;\n                retroGrid.style.transform = `translate(${x * -10}px, ${y * -10}px)`;\n            });\n        });\n    <\/script>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9873595 e-con-full e-flex e-con e-parent\" data-id=\"9873595\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-45a173e elementor-widget elementor-widget-html\" data-id=\"45a173e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');\n    \n    * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n    }\n    \n    body {\n        font-family: 'IBM Plex Sans', sans-serif;\n        line-height: 1.6;\n        color: #333;\n    }\n    \n    \/* SE\u00c7\u00c3O: OS NOSSOS CLIENTES *\/\n    .vf-clients-section {\n        width: 100%;\n        padding: 120px 0;\n        background-color: #f0f0f0;\n        position: relative;\n        overflow: hidden;\n        font-family: 'IBM Plex Sans', sans-serif;\n        color: #333;\n    }\n    \n    .vf-clients-container {\n        max-width: 1200px;\n        margin: 0 auto;\n        padding: 0 20px;\n        position: relative;\n        z-index: 2;\n    }\n    \n    .vf-clients-header {\n        text-align: center;\n        margin-bottom: 60px;\n    }\n    \n    .vf-clients-title {\n        font-size: 42px;\n        font-weight: 700;\n        margin-bottom: 20px;\n        color: #222;\n        letter-spacing: 1px;\n        position: relative;\n        display: inline-block;\n    }\n    \n    .vf-clients-title::after {\n        content: '';\n        position: absolute;\n        bottom: -10px;\n        left: 50%;\n        transform: translateX(-50%);\n        width: 80%;\n        height: 4px;\n        background: linear-gradient(to right, #f3e728, #02a8d8, #dc3588);\n    }\n    \n    .vf-clients-subtitle {\n        font-size: 22px;\n        line-height: 1.6;\n        max-width: 800px;\n        margin: 0 auto;\n        color: #555;\n    }\n    \n    .vf-clients-grid {\n        display: grid;\n        grid-template-columns: repeat(2, 1fr);\n        gap: 40px;\n        margin-top: 50px;\n    }\n    \n    .vf-client-card {\n        background: #f9f9f9;\n        border-radius: 12px;\n        overflow: hidden;\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        display: flex;\n        flex-direction: column;\n    }\n    \n    .vf-client-card:hover {\n        transform: translateY(-5px);\n        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);\n    }\n    \n    .vf-client-image {\n        width: 100%;\n        height: 250px;\n        background-size: cover;\n        background-position: center;\n        position: relative;\n        overflow: hidden;\n    }\n    \n    \/* SUBSTITUIR AS URLs DAS IMAGENS AQUI *\/\n    .vf-client-card:nth-child(1) .vf-client-image {\n        background-image: url('https:\/\/visualfactory.pt\/wp-content\/uploads\/2025\/05\/0692_20240709.jpg');\n    }\n    \n    .vf-client-card:nth-child(2) .vf-client-image {\n        background-image: url('https:\/\/visualfactory.pt\/wp-content\/uploads\/2025\/05\/016_Inaqua__76U9611.jpg');\n    }\n    \n    .vf-client-card:nth-child(3) .vf-client-image {\n        background-image: url('https:\/\/visualfactory.pt\/wp-content\/uploads\/2025\/05\/Comercial_Corporate_020.jpg');\n    }\n    \n    .vf-client-card:nth-child(4) .vf-client-image {\n        background-image: url('https:\/\/visualfactory.pt\/wp-content\/uploads\/2025\/05\/03-padrao-BLACK-1-scaled.png');\n    }\n    \n    .vf-client-image::after {\n        content: '';\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 50%;\n        background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);\n    }\n    \n    .vf-client-content {\n        padding: 30px;\n    }\n    \n    .vf-client-title {\n        font-size: 24px;\n        font-weight: 700;\n        margin-bottom: 15px;\n        color: #222;\n        position: relative;\n        padding-left: 15px;\n    }\n    \n    .vf-client-title::before {\n        content: '';\n        position: absolute;\n        left: 0;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 5px;\n        height: 25px;\n        border-radius: 3px;\n    }\n    \n    .vf-client-card:nth-child(1) .vf-client-title::before {\n        background-color: #f3e728;\n    }\n    \n    .vf-client-card:nth-child(2) .vf-client-title::before {\n        background-color: #02a8d8;\n    }\n    \n    .vf-client-card:nth-child(3) .vf-client-title::before {\n        background-color: #dc3588;\n    }\n    \n    .vf-client-card:nth-child(4) .vf-client-title::before {\n        background: linear-gradient(to bottom, #f3e728, #02a8d8, #dc3588);\n    }\n    \n    .vf-client-desc {\n        font-size: 18px;\n        line-height: 1.6;\n        color: #555;\n    }\n    \n    \/* Responsividade *\/\n    @media (max-width: 992px) {\n        .vf-clients-grid {\n            grid-template-columns: repeat(2, 1fr);\n            gap: 30px;\n        }\n    }\n    \n    @media (max-width: 768px) {\n        .vf-clients-section {\n            padding: 80px 0;\n        }\n        \n        .vf-clients-title {\n            font-size: 36px;\n        }\n        \n        .vf-clients-subtitle {\n            font-size: 16px;\n        }\n        \n        .vf-clients-grid {\n            grid-template-columns: 1fr;\n            gap: 30px;\n        }\n        \n        .vf-client-image {\n            height: 200px;\n        }\n    }\n    \n    @media (max-width: 576px) {\n        .vf-clients-section {\n            padding: 60px 0;\n        }\n        \n        .vf-clients-title {\n            font-size: 30px;\n        }\n        \n        .vf-client-content {\n            padding: 25px 20px;\n        }\n        \n        .vf-client-title {\n            font-size: 22px;\n        }\n    }\n<\/style>\n\n<!-- SE\u00c7\u00c3O: OS NOSSOS CLIENTES -->\n<section class=\"vf-clients-section\">\n    <!-- Elementos de fundo retr\u00f4 sutis -->\n    <div class=\"vf-clients-retro-lines\"><\/div>\n    <div class=\"vf-clients-retro-grid\"><\/div>\n    \n    <div class=\"vf-clients-container\">\n        <div class=\"vf-clients-header\">\n            <h2 class=\"vf-clients-title\">Os Nossos Clientes<\/h2>\n            <p class=\"vf-clients-subtitle\">Trabalhamos com empresas que procuram impacto visual e crescimento digital, incluindo:<\/p>\n        <\/div>\n        \n        <div class=\"vf-clients-grid\">\n            <!-- Card 1: Restaurantes -->\n            <div class=\"vf-client-card\">\n                <!-- SUBSTITUIR URL DA IMAGEM NO CSS ACIMA -->\n                <div class=\"vf-client-image\"><\/div>\n                <div class=\"vf-client-content\">\n                    <h3 class=\"vf-client-title\">Restaurantes<\/h3>\n                    <p class=\"vf-client-desc\">Que pretendam refor\u00e7ar a sua presen\u00e7a online e atrair mais clientes atrav\u00e9s da comunica\u00e7\u00e3o visual e do marketing digital estrat\u00e9gico.<\/p>\n                <\/div>\n            <\/div>\n            \n            <!-- Card 2: Hot\u00e9is e Spas -->\n            <div class=\"vf-client-card\">\n                <!-- SUBSTITUIR URL DA IMAGEM NO CSS ACIMA -->\n                <div class=\"vf-client-image\"><\/div>\n                <div class=\"vf-client-content\">\n                    <h3 class=\"vf-client-title\">Hot\u00e9is e Spas<\/h3>\n                    <p class=\"vf-client-desc\">Que valorizam uma identidade visual sofisticada e uma comunica\u00e7\u00e3o digital de alto padr\u00e3o para conquistar e fidelizar h\u00f3spedes.<\/p>\n                <\/div>\n            <\/div>\n            \n            <!-- Card 3: Adegas e Propriedades -->\n            <div class=\"vf-client-card\">\n                <!-- SUBSTITUIR URL DA IMAGEM NO CSS ACIMA -->\n                <div class=\"vf-client-image\"><\/div>\n                <div class=\"vf-client-content\">\n                    <h3 class=\"vf-client-title\">Adegas e Herdades<\/h3>\n                    <p class=\"vf-client-desc\">Que pretendam destacar as suas experi\u00eancias exclusivas e produtos de qualidade com imagens e conte\u00fados impactantes.<\/p>\n                <\/div>\n            <\/div>\n            \n            <!-- Card 4: Empresas e Marcas -->\n            <div class=\"vf-client-card\">\n                <!-- SUBSTITUIR URL DA IMAGEM NO CSS ACIMA -->\n                <div class=\"vf-client-image\"><\/div>\n                <div class=\"vf-client-content\">\n                    <h3 class=\"vf-client-title\">Empresas e Marcas<\/h3>\n                    <p class=\"vf-client-desc\">Que procuram o extraordin\u00e1rio, apostando numa identidade visual irrepreens\u00edvel e em estrat\u00e9gias inteligentes para se destacarem no mercado.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f52d2b9 e-con-full e-flex e-con e-parent\" data-id=\"f52d2b9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-91294fc elementor-widget elementor-widget-html\" data-id=\"91294fc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Sans:wght@400;600;700;900&display=swap');\r\n    \r\n    .vf-contact-section {\r\n        width: 100%;\r\n        padding: 60px 20px;\r\n        font-family: 'IBM Plex Sans', sans-serif;\r\n        max-width: 900px;\r\n        margin: 0 auto;\r\n    }\r\n    \r\n    .vf-contact-title {\r\n        font-size: 42px;\r\n        font-weight: 700;\r\n        margin: 0 0 15px 0;\r\n        text-align: center;\r\n        color: #000;\r\n    }\r\n    \r\n    .vf-contact-gradient-line {\r\n        height: 6px;\r\n        width: 60%;\r\n        margin: 0 auto 20px;\r\n        background: linear-gradient(to right, #f3e728, #02a8d8, #dc3588);\r\n        border-radius: 3px;\r\n    }\r\n    \r\n    .vf-contact-intro {\r\n        font-size: 22px;\r\n        line-height: 1.5;\r\n        text-align: center;\r\n        margin: 0 auto 30px;\r\n    }\r\n    \r\n    .vf-form {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 15px;\r\n        margin-bottom: 30px;\r\n    }\r\n    \r\n    .vf-form-group {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 5px;\r\n    }\r\n    \r\n    .vf-form-group.full-width {\r\n        grid-column: span 2;\r\n    }\r\n    \r\n    .vf-form-label {\r\n        font-weight: 600;\r\n        font-size: 16px;\r\n    }\r\n    \r\n    .vf-form-input,\r\n    .vf-form-textarea {\r\n        padding: 10px;\r\n        border: 2px solid #000;\r\n        border-radius: 8px;\r\n        font-family: inherit;\r\n        font-size: 16px;\r\n    }\r\n    \r\n    .vf-form-textarea {\r\n        min-height: 100px;\r\n        resize: vertical;\r\n    }\r\n    \r\n    .vf-submit-btn {\r\n        background-color: #000;\r\n        color: #fff;\r\n        border: 2px solid #000;\r\n        border-radius: 8px;\r\n        padding: 12px 25px;\r\n        font-family: inherit;\r\n        font-size: 16px;\r\n        font-weight: 700;\r\n        text-transform: uppercase;\r\n        cursor: pointer;\r\n        transition: all 0.3s ease;\r\n        box-shadow: 3px 3px 0 rgba(0,0,0,0.2);\r\n        justify-self: start;\r\n    }\r\n    \r\n    .vf-submit-btn:hover {\r\n        background-color: #dc3588;\r\n        transform: translateY(-2px);\r\n    }\r\n    \r\n    .vf-contact-info {\r\n        display: flex;\r\n        justify-content: center;\r\n        flex-wrap: wrap;\r\n        gap: 30px;\r\n        margin-top: 20px;\r\n        text-align: center;\r\n    }\r\n    \r\n    .vf-contact-info-item {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n    }\r\n    \r\n    .vf-contact-info-icon {\r\n        flex: 0 0 20px;\r\n    }\r\n    \r\n    .vf-contact-info-text {\r\n        font-size: 20px;\r\n    }\r\n    \r\n    .vf-contact-info-link {\r\n        color: #02a8d8;\r\n        text-decoration: none;\r\n        font-weight: 600;\r\n    }\r\n    \r\n    .vf-contact-info-link:hover {\r\n        color: #dc3588;\r\n        text-decoration: underline;\r\n    }\r\n    \r\n    .vf-form-status {\r\n        grid-column: span 2;\r\n        padding: 10px;\r\n        border-radius: 8px;\r\n        font-weight: 600;\r\n        text-align: center;\r\n        display: none;\r\n    }\r\n    \r\n    .vf-form-status.success {\r\n        background-color: rgba(46, 204, 113, 0.2);\r\n        color: #27ae60;\r\n        border: 1px solid #27ae60;\r\n    }\r\n    \r\n    .vf-form-status.error {\r\n        background-color: rgba(231, 76, 60, 0.2);\r\n        color: #c0392b;\r\n        border: 1px solid #c0392b;\r\n    }\r\n    \r\n    @media (max-width: 600px) {\r\n        .vf-form {\r\n            grid-template-columns: 1fr;\r\n        }\r\n        \r\n        .vf-form-group.full-width {\r\n            grid-column: span 1;\r\n        }\r\n        \r\n        .vf-contact-title {\r\n            font-size: 36px;\r\n        }\r\n        \r\n        .vf-contact-info {\r\n            flex-direction: column;\r\n            gap: 15px;\r\n            align-items: center;\r\n        }\r\n        \r\n        .vf-form-status {\r\n            grid-column: span 1;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div id=\"contacto\" class=\"vf-contact-section\">\r\n    <h2 class=\"vf-contact-title\">Entre em Contacto<\/h2>\r\n    <div class=\"vf-contact-gradient-line\"><\/div>\r\n    <p class=\"vf-contact-intro\">Estamos prontos para transformar as suas ideias em realidade. Entre em contacto connosco para discutir o seu pr\u00f3ximo projeto.<\/p>\r\n    \r\n    <form class=\"vf-form\" id=\"contactForm\" action=\"mailto:info.visualfactory@gmail.com\" method=\"post\" enctype=\"text\/plain\" data-trp-original-action=\"mailto:info.visualfactory@gmail.com\">\r\n        <div class=\"vf-form-group\">\r\n            <label for=\"name\" class=\"vf-form-label\">Nome<\/label>\r\n            <input type=\"text\" id=\"name\" name=\"name\" class=\"vf-form-input\" required>\r\n        <\/div>\r\n        \r\n        <div class=\"vf-form-group\">\r\n            <label for=\"email\" class=\"vf-form-label\">Email<\/label>\r\n            <input type=\"email\" id=\"email\" name=\"email\" class=\"vf-form-input\" required>\r\n        <\/div>\r\n        \r\n        <div class=\"vf-form-group\">\r\n            <label for=\"phone\" class=\"vf-form-label\">Telefone<\/label>\r\n            <input type=\"tel\" id=\"phone\" name=\"phone\" class=\"vf-form-input\">\r\n        <\/div>\r\n        \r\n        <div class=\"vf-form-group\">\r\n            <label for=\"captcha\" class=\"vf-form-label\">Verifica\u00e7\u00e3o: 2 + 3 = ?<\/label>\r\n            <input type=\"text\" id=\"captcha\" name=\"captcha\" class=\"vf-form-input\" required>\r\n        <\/div>\r\n        \r\n        <div class=\"vf-form-group full-width\">\r\n            <label for=\"message\" class=\"vf-form-label\">Mensagem<\/label>\r\n            <textarea id=\"message\" name=\"message\" class=\"vf-form-textarea\" required><\/textarea>\r\n        <\/div>\r\n        \r\n        <div id=\"formStatus\" class=\"vf-form-status\"><\/div>\r\n        \r\n        <button type=\"submit\" class=\"vf-submit-btn\">Enviar<\/button>\r\n    <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\r\n    \r\n    <div class=\"vf-contact-info\">\r\n        <div class=\"vf-contact-info-item\">\r\n            <div class=\"vf-contact-info-icon\">\r\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"><\/path>\r\n                    <circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle>\r\n                <\/svg>\r\n            <\/div>\r\n            <div class=\"vf-contact-info-text\">\r\n                Rua do Raimundo, 36, \u00c9vora - Portugal\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"vf-contact-info-item\">\r\n            <div class=\"vf-contact-info-icon\">\r\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"><\/path>\r\n                <\/svg>\r\n            <\/div>\r\n            <div class=\"vf-contact-info-text\">\r\n                <a href=\"https:\/\/wa.me\/351967600088\" class=\"vf-contact-info-link\" target=\"_blank\" rel=\"noopener\">+351 967 600 088<\/a> | 266 758 540\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"vf-contact-info-item\">\r\n            <div class=\"vf-contact-info-icon\">\r\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"><\/path>\r\n                    <polyline points=\"22,6 12,13 2,6\"><\/polyline>\r\n                <\/svg>\r\n            <\/div>\r\n            <div class=\"vf-contact-info-text\">\r\n                <a href=\"mailto:info.visualfactory@gmail.com\" class=\"vf-contact-info-link\">info.visualfactory@gmail.com<\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        const form = document.getElementById('contactForm');\r\n        const formStatus = document.getElementById('formStatus');\r\n        \r\n        \/\/ Manipulador de envio do formul\u00e1rio\r\n        form.addEventListener('submit', function(e) {\r\n            e.preventDefault();\r\n            \r\n            \/\/ Verificar o captcha simples\r\n            const captchaInput = document.getElementById('captcha').value.trim();\r\n            \r\n            if (captchaInput !== '5') {\r\n                formStatus.textContent = 'Verifica\u00e7\u00e3o incorreta. Por favor, tente novamente.';\r\n                formStatus.className = 'vf-form-status error';\r\n                formStatus.style.display = 'block';\r\n                return;\r\n            }\r\n            \r\n            \/\/ Preparar os dados do formul\u00e1rio\r\n            const name = document.getElementById('name').value;\r\n            const email = document.getElementById('email').value;\r\n            const phone = document.getElementById('phone').value;\r\n            const message = document.getElementById('message').value;\r\n            \r\n            \/\/ Construir o corpo do email\r\n            const subject = encodeURIComponent('Contato do site - ' + name);\r\n            const body = encodeURIComponent(\r\n                'Nome: ' + name + '\\n' +\r\n                'Email: ' + email + '\\n' +\r\n                'Telefone: ' + phone + '\\n\\n' +\r\n                'Mensagem:\\n' + message\r\n            );\r\n            \r\n            \/\/ Abrir o cliente de email do usu\u00e1rio com os dados preenchidos\r\n            window.location.href = `mailto:info.visualfactory@gmail.com?subject=${subject}&body=${body}`;\r\n            \r\n            \/\/ Mostrar mensagem de sucesso\r\n            formStatus.textContent = 'Obrigado! O seu cliente de email foi aberto com a sua mensagem.';\r\n            formStatus.className = 'vf-form-status success';\r\n            formStatus.style.display = 'block';\r\n            \r\n            \/\/ Limpar o formul\u00e1rio\r\n            form.reset();\r\n            \r\n            \/\/ Esconder a mensagem ap\u00f3s alguns segundos\r\n            setTimeout(() => {\r\n                formStatus.style.display = 'none';\r\n            }, 5000);\r\n        });\r\n        \r\n        \/\/ Ancoragem suave\r\n        if (window.location.hash === '#contacto') {\r\n            const contactoSection = document.getElementById('contacto');\r\n            if (contactoSection) {\r\n                setTimeout(() => {\r\n                    contactoSection.scrollIntoView({ behavior: 'smooth' });\r\n                }, 100);\r\n            }\r\n        }\r\n    });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Estrat\u00e9gia e Criatividade Comunica\u00e7\u00e3o Transformamos a comunica\u00e7\u00e3o digital em resultados Marketing Digital A Visual Factory \u00e9 especializada na cria\u00e7\u00e3o de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2497,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2510","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/visualfactory.pt\/en\/wp-json\/wp\/v2\/pages\/2510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visualfactory.pt\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/visualfactory.pt\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/visualfactory.pt\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visualfactory.pt\/en\/wp-json\/wp\/v2\/comments?post=2510"}],"version-history":[{"count":0,"href":"https:\/\/visualfactory.pt\/en\/wp-json\/wp\/v2\/pages\/2510\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/visualfactory.pt\/en\/wp-json\/wp\/v2\/media\/2497"}],"wp:attachment":[{"href":"https:\/\/visualfactory.pt\/en\/wp-json\/wp\/v2\/media?parent=2510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}