{"id":382,"date":"2026-02-16T22:18:27","date_gmt":"2026-02-17T01:18:27","guid":{"rendered":"https:\/\/nuovo.com.br\/novo\/?page_id=382"},"modified":"2026-04-22T14:13:08","modified_gmt":"2026-04-22T17:13:08","slug":"home-2","status":"publish","type":"page","link":"https:\/\/nuovo.com.br\/novo\/","title":{"rendered":"Home 2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"382\" class=\"elementor elementor-382\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5ec60768 e-flex e-con-boxed e-con e-parent\" data-id=\"5ec60768\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-6f886015 e-con-full e-flex e-con e-child\" data-id=\"6f886015\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e107547 elementor-widget elementor-widget-image\" data-id=\"e107547\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"297\" src=\"https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/01\/nova-marca-01-1024x380.png\" class=\"attachment-large size-large wp-image-65\" alt=\"\" srcset=\"https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/01\/nova-marca-01-1024x380.png 1024w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/01\/nova-marca-01-300x111.png 300w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/01\/nova-marca-01-768x285.png 768w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/01\/nova-marca-01-1536x571.png 1536w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/01\/nova-marca-01-2048x761.png 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-175eb1d3 e-con-full e-flex e-con e-child\" data-id=\"175eb1d3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5dcab6be elementor-widget elementor-widget-ekit-nav-menu\" data-id=\"5dcab6be\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ekit-nav-menu.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<nav class=\"ekit-wid-con ekit_menu_responsive_tablet\"\n\t\t\tdata-hamburger-icon=\"\"\n\t\t\tdata-hamburger-icon-type=\"icon\"\n\t\t\tdata-responsive-breakpoint=\"1024\">\n\t\t\t            <button class=\"elementskit-menu-hamburger elementskit-menu-toggler\"  type=\"button\" aria-label=\"hamburger-icon\">\n                                    <span class=\"elementskit-menu-hamburger-icon\"><\/span><span class=\"elementskit-menu-hamburger-icon\"><\/span><span class=\"elementskit-menu-hamburger-icon\"><\/span>\n                            <\/button>\n            <div id=\"ekit-megamenu-principal\" class=\"elementskit-menu-container elementskit-menu-offcanvas-elements elementskit-navbar-nav-default ekit-nav-menu-one-page-no ekit-nav-dropdown-hover\"><ul id=\"menu-principal\" class=\"elementskit-navbar-nav elementskit-menu-po-center submenu-click-on-icon\"><li id=\"menu-item-724\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-724 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/nuovo.com.br\/novo\/\" class=\"ekit-menu-nav-link\">Home<\/a><\/li>\n<li id=\"menu-item-723\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-723 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/nuovo.com.br\/novo\/quem-somos-2\/\" class=\"ekit-menu-nav-link\">Quem Somos<\/a><\/li>\n<li id=\"menu-item-828\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-828 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/nuovo.com.br\/novo\/servicos\/\" class=\"ekit-menu-nav-link\">Servi\u00e7os<\/a><\/li>\n<li id=\"menu-item-880\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-880 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/nuovo.com.br\/novo\/port\/\" class=\"ekit-menu-nav-link\">Portf\u00f3lio<\/a><\/li>\n<li id=\"menu-item-868\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-868 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/nuovo.com.br\/novo\/blog\/\" class=\"ekit-menu-nav-link\">Blog<\/a><\/li>\n<li id=\"menu-item-722\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-722 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/nuovo.com.br\/novo\/contato\/\" class=\"ekit-menu-nav-link\">Contato<\/a><\/li>\n<\/ul><div class=\"elementskit-nav-identity-panel\"><button class=\"elementskit-menu-close elementskit-menu-toggler\" type=\"button\">X<\/button><\/div><\/div>\n\t\t\t<div class=\"elementskit-menu-overlay elementskit-menu-offcanvas-elements elementskit-menu-toggler ekit-nav-menu--overlay\"><\/div>        <\/nav>\n\t\t\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-71231bbf e-con-full e-flex e-con e-child\" data-id=\"71231bbf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c374838 elementor-align-center elementor-widget__width-initial elementor-widget elementor-widget-button\" data-id=\"7c374838\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/nuovo.com.br\/novo\/diagnostico\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Diagn\u00f3stico<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5428f36c e-con-full e-flex e-con e-child\" data-id=\"5428f36c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c6451e3 elementor-widget elementor-widget-elementskit-social-media\" data-id=\"c6451e3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementskit-social-media.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" >\t\t\t <ul class=\"ekit_social_media\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-024d04d\">\n\t\t\t\t\t    <a\n\t\t\t\t\t\thref=\"https:\/\/www.instagram.com\/estudionuovodesign\/\" target=\"_blank\" aria-label=\"Instagram\" class=\"1\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-instagram-1\"><\/i>\n                                                                                                            <\/a>\n                    <\/li>\n                    \t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-6c10790\">\n\t\t\t\t\t    <a\n\t\t\t\t\t\thref=\"https:\/\/br.linkedin.com\/company\/nuovo-design\" target=\"_blank\" aria-label=\"LinkedIn\" class=\"linkedin\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-linkedin\"><\/i>\n                                                                                                            <\/a>\n                    <\/li>\n                    \t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"elementor-repeater-item-08d93d1\">\n\t\t\t\t\t    <a\n\t\t\t\t\t\thref=\"https:\/\/www.facebook.com\/estudionuovodesign\/\" target=\"_blank\" aria-label=\"Facebook\" class=\"facebook\" >\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"icon icon-facebook\"><\/i>\n                                                                                                            <\/a>\n                    <\/li>\n                    \t\t\t\t\t\t\t<\/ul>\n\t\t<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8cd7155 e-con-full e-flex e-con e-parent\" data-id=\"8cd7155\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d253f9 elementor-widget elementor-widget-html\" data-id=\"3d253f9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<style>\n    \/* 1. Importando Roboto (Principal) e Playfair Display (Destaque) *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&family=Playfair+Display:ital,wght@1,400;1,600&display=swap');\n\n    \/* 2. Reset e Estrutura Principal *\/\n    .custom-hero-wrapper {\n        position: relative;\n        width: 100%;\n        height: 100vh; \/* Ocupa a tela toda *\/\n        min-height: 700px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        font-family: 'Roboto', sans-serif;\n        color: #ffffff; \/* ALTERADO: Texto base branco *\/\n        background-color: #000000; \/* ALTERADO: Fundo base preto *\/\n        box-sizing: border-box;\n    }\n\n    .custom-hero-wrapper * {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n    }\n\n    .custom-hero-wrapper a, \n    .custom-hero-wrapper button {\n        transition: all 0.3s ease;\n    }\n\n    \/* --- BACKGROUNDS --- *\/\n    .hero-bg-image {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 0;\n        object-fit: cover;\n        display: block;\n    }\n\n    .hero-bg-video {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 0;\n        overflow: hidden;\n        display: none;\n        pointer-events: none;\n    }\n\n    .hero-bg-video iframe {\n        width: 100vw;\n        height: 100vh;\n        min-width: 177.77vh; \/* 16:9 aspect ratio *\/\n        min-height: 56.25vw;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        pointer-events: none;\n    }\n\n    \/* Overlay Escuro - ALTERADO *\/\n    .hero-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        \/* Gradiente escuro para garantir leitura sobre v\u00eddeo claro *\/\n        background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.65) 100%);\n        z-index: 1;\n    }\n\n    \/* --- CONTE\u00daDO --- *\/\n    .hero-content {\n        position: relative;\n        z-index: 2;\n        max-width: 1200px;\n        width: 90%;\n        padding: 20px;\n    }\n\n    .hero-label {\n        font-size: 0.75rem;\n        text-transform: uppercase;\n        letter-spacing: 2px;\n        color: #cccccc; \/* ALTERADO: Cinza claro *\/\n        margin-bottom: 24px;\n        font-weight: 500;\n    }\n\n    .hero-title {\n        font-size: 2.3rem;\n        line-height: 1.1;\n        font-weight: 300;\n        color: #ffffff; \/* ALTERADO: Branco *\/\n        margin-bottom: 24px;\n        letter-spacing: -1px;\n    }\n\n    .hero-title span.highlight {\n        font-family: 'Playfair Display', serif;\n        font-style: italic;\n        color: #f59e0b;\n        font-weight: 300;\n    }\n\n    .hero-subtitle {\n        font-size: 1.125rem;\n        line-height: 1.6;\n        color: #e0e0e0; \/* ALTERADO: Branco gelo *\/\n        max-width: 550px;\n        margin-bottom: 40px;\n    }\n\n    \/* --- BOT\u00d5ES --- *\/\n    .hero-actions {\n        display: flex;\n        align-items: center;\n        gap: 20px;\n        flex-wrap: wrap;\n        margin-bottom: 40px;\n    }\n\n    \/* Bot\u00e3o Prim\u00e1rio *\/\n    .btn-primary {\n        background-color: #d97706 !important;\n        color: #fff !important;\n        padding: 16px 32px;\n        font-size: 1rem;\n        font-weight: 500;\n        text-decoration: none;\n        border: none;\n        cursor: pointer;\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n    }\n\n    .btn-primary:hover {\n        background-color: #b45309 !important;\n        color: #fff !important;\n        transform: translateY(-2px);\n    }\n\n    \/* Bot\u00e3o Secund\u00e1rio - ALTERADO para borda branca *\/\n    .btn-secondary {\n        background-color: transparent !important;\n        color: #ffffff !important; \/* Texto branco *\/\n        padding: 15px 31px;\n        font-size: 1rem;\n        font-weight: 500;\n        text-decoration: none;\n        border: 1px solid #ffffff !important; \/* Borda branca *\/\n        cursor: pointer;\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n    }\n\n    .btn-secondary:hover {\n        background-color: #ffffff !important; \/* Fundo branco no hover *\/\n        color: #000000 !important; \/* Texto preto no hover *\/\n        transform: translateY(-2px);\n    }\n\n    \/* Link Texto - ALTERADO para branco *\/\n    .link-text {\n        color: #ffffff !important;\n        text-decoration: none;\n        font-weight: 500;\n        border-bottom: 1px solid #ffffff;\n        padding-bottom: 2px;\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        margin-left: 10px;\n        background: none !important;\n    }\n\n    .link-text:hover {\n        opacity: 0.8;\n        color: #ffffff !important;\n        background: none !important;\n    }\n\n    \/* --- TRUST BADGES --- *\/\n    .hero-trust {\n        display: flex;\n        gap: 24px;\n        flex-wrap: wrap;\n        font-size: 0.9rem;\n        color: #d1d1d1; \/* ALTERADO: Cinza claro *\/\n    }\n\n    .trust-item {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n    }\n\n    .trust-icon {\n        color: #f59e0b;\n        width: 18px;\n        height: 18px;\n    }\n\n    \/* --- SCROLL ICON --- *\/\n    .scroll-indicator {\n        position: absolute;\n        bottom: 30px;\n        left: 50%;\n        transform: translateX(-50%);\n        z-index: 3;\n        opacity: 0.8;\n        animation: bounce 2s infinite;\n    }\n\n    .mouse-icon {\n        width: 26px;\n        height: 40px;\n        border: 2px solid #ffffff; \/* ALTERADO: Borda branca *\/\n        border-radius: 20px;\n        position: relative;\n    }\n\n    .mouse-wheel {\n        width: 4px;\n        height: 4px;\n        background-color: #ffffff; \/* ALTERADO: Roda branca *\/\n        border-radius: 50%;\n        position: absolute;\n        top: 8px;\n        left: 50%;\n        transform: translateX(-50%);\n    }\n\n    @keyframes bounce {\n        0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }\n        40% { transform: translateY(-10px) translateX(-50%); }\n        60% { transform: translateY(-5px) translateX(-50%); }\n    }\n\n    \/* --- RESPONSIVIDADE (MOBILE) --- *\/\n    @media (max-width: 768px) {\n        .custom-hero-wrapper {\n            padding-top: 80px;\n            padding-bottom: 100px; \n            height: auto;\n            min-height: 100vh;\n        }\n\n        .hero-title {\n            font-size: 2.5rem;\n        }\n\n        .hero-actions {\n            flex-direction: column;\n            align-items: stretch;\n            gap: 15px;\n        }\n\n        .link-text {\n            margin-left: 0;\n            justify-content: center;\n            border: none;\n            margin-top: 10px;\n        }\n\n        .hero-trust {\n            flex-direction: column;\n            gap: 10px;\n            margin-top: 20px;\n        }\n\n        .scroll-indicator {\n            bottom: 20px;\n        }\n    }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"custom-hero-wrapper\">\n\n    <!-- BACKGROUND 1: IMAGEM (Padr\u00e3o) -->\n    <img decoding=\"async\" id=\"bg-image\" src=\"https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?q=80&w=2301&auto=format&fit=crop\" alt=\"Background\" class=\"hero-bg-image\">\n\n    <!-- BACKGROUND 2: V\u00cdDEO YOUTUBE (Container) -->\n    <div id=\"bg-video-container\" class=\"hero-bg-video\">\n        <div id=\"youtube-player\"><\/div>\n    <\/div>\n\n    <!-- Overlay -->\n    <div class=\"hero-overlay\"><\/div>\n\n    <!-- Conte\u00fado -->\n    <div class=\"hero-content\">\n        <div class=\"hero-label\">Branding \u00b7 Comunica\u00e7\u00e3o \u00b7 web \u00b7 PRODUTO<\/div>\n\n        <h1 class=\"hero-title\">\n            CONECTAMOS ESTRAT\u00c9GIA,<BR>\nDESIGN E PRODUTO PARA<BR>\nAUMENTAR CLAREZA<BR> DE\nMARCA, DESEJO E VENDAS.\n        <\/h1>\n\n        <p class=\"hero-subtitle\">\n            Branding, identidade, sites e produtos para empresas que precisam reposicionar, crescer e comunicar valor com protagonismo.\n        <\/p>\n\n        <div class=\"hero-actions\">\n            <a href=\"#\" class=\"btn-primary\">\n                Solicitar proposta \n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n            <\/a>\n\n            <a href=\"#\" class=\"btn-secondary\">\n                Ver cases\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n            <\/a>\n\n            <a href=\"#\" class=\"link-text\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>\n                Agendar 15 min\n            <\/a>\n        <\/div>\n\n        <div class=\"hero-trust\">\n            <div class=\"trust-item\">\n                <svg class=\"trust-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n                Processo claro\n            <\/div>\n            <div class=\"trust-item\">\n                <svg class=\"trust-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n                Entrega organizada\n            <\/div>\n            <div class=\"trust-item\">\n                <svg class=\"trust-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n                Dire\u00e7\u00e3o criativa s\u00eanior\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- \u00cdcone de Scroll -->\n    <div class=\"scroll-indicator\">\n        <div class=\"mouse-icon\">\n            <div class=\"mouse-wheel\"><\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n\n<script>\n    \/\/ --- CONFIGURA\u00c7\u00c3O DE BACKGROUND ---\n\n    const config = {\n        useYouTubeVideo: true, \n        youtubeVideoId: \"xqI2-arzT_A\", \/\/ ID do v\u00eddeo\n        imageUrl: \"https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?q=80&w=2301&auto=format&fit=crop\"\n    };\n\n    \/\/ --- L\u00d3GICA ---\n    document.addEventListener('DOMContentLoaded', function() {\n        const imgElement = document.getElementById('bg-image');\n        const videoContainer = document.getElementById('bg-video-container');\n\n        if (imgElement) imgElement.src = config.imageUrl;\n\n        if (config.useYouTubeVideo) {\n            if(imgElement) imgElement.style.display = 'none';\n            if(videoContainer) videoContainer.style.display = 'block';\n\n            var tag = document.createElement('script');\n            tag.src = \"https:\/\/www.youtube.com\/iframe_api\";\n            var firstScriptTag = document.getElementsByTagName('script')[0];\n            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n        }\n    });\n\n    function onYouTubeIframeAPIReady() {\n        if (!config.useYouTubeVideo) return;\n\n        new YT.Player('youtube-player', {\n            videoId: config.youtubeVideoId,\n            playerVars: {\n                'autoplay': 1,       \/\/ Tenta iniciar\n                'controls': 0,       \/\/ Sem controles\n                'showinfo': 0,       \/\/ Sem info\n                'modestbranding': 1, \/\/ Menos branding\n                'loop': 1,           \/\/ Loop (precisa da playlist abaixo)\n                'fs': 0,             \/\/ Sem bot\u00e3o fullscreen\n                'cc_load_policy': 0, \/\/ Sem legendas\n                'iv_load_policy': 3, \/\/ Sem anota\u00e7\u00f5es\n                'autohide': 0,\n                'playlist': config.youtubeVideoId, \/\/ Obrigat\u00f3rio para o loop nativo funcionar\n                'mute': 1,           \/\/ OBRIGAT\u00d3RIO para autoplay funcionar em Chrome\/Firefox\n                'playsinline': 1     \/\/ OBRIGAT\u00d3RIO para funcionar em Mobile\/Safari\n            },\n            events: {\n                'onReady': function(e) {\n                    e.target.mute(); \/\/ Garante o mudo\n                    e.target.playVideo(); \/\/ For\u00e7a o play\n                },\n                'onStateChange': function(e) {\n                    \/\/ Se o v\u00eddeo terminar (state 0), toca de novo (garantia extra de loop)\n                    if (e.data === YT.PlayerState.ENDED) {\n                        e.target.playVideo();\n                    }\n                }\n            }\n        });\n    }\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cb06a09 e-con-full e-flex e-con e-parent\" data-id=\"cb06a09\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bb343d8 elementor-widget elementor-widget-html\" data-id=\"bb343d8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Nossos Servi\u00e7os<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n    :root {\n        --primary-color: #d97706;\n        --primary-hover: #b45309;\n        --text-dark: #1a1a1a;\n        --text-gray: #555;\n        --bg-light: #f9f9f9;\n        --bg-white: #ffffff;\n        --pill-bg: #f3f4f6;\n        --pill-text: #4b5563;\n        --dark-bg: #111111;\n    }\n\n    * { box-sizing: border-box; margin: 0; padding: 0; }\n\n    body {\n        font-family: 'Roboto', sans-serif;\n        background-color: var(--bg-light);\n        color: var(--text-dark);\n        line-height: 1.6;\n        -webkit-font-smoothing: antialiased;\n    }\n\n    .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }\n    .section-wrapper { padding: 80px 0; }\n\n    .header-group { margin-bottom: 60px; }\n    .header-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: #888; margin-bottom: 16px; font-weight: 500; display: block; }\n    .header-title { font-size: 3rem; font-weight: 400; margin-bottom: 24px; color: var(--text-dark); }\n    .header-title span { color: var(--primary-color); font-style: italic; font-family: serif; }\n    .header-desc { font-size: 1.125rem; color: var(--text-gray); max-width: 600px; }\n\n    .big-cards-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 100px; }\n\n    .big-card {\n        background: var(--bg-white);\n        border-radius: 16px;\n        padding: 40px;\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        height: 100%;\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        border: 1px solid transparent;\n    }\n    .big-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.05); border-color: rgba(217, 119, 6, 0.1); }\n\n    .card-content { display: contents; }\n    .card-icon-box { width: 48px; height: 48px; background-color: #fff8f0; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; color: var(--primary-color); }\n    .card-title { font-size: 1.25rem; font-weight: 500; margin-bottom: 16px; color: var(--text-dark); }\n    .card-text { color: var(--text-gray); margin-bottom: 24px; font-size: 0.9rem; flex-grow: 1; }\n    .card-link { font-size: 0.9rem; font-weight: 500; color: var(--primary-color); display: inline-flex; align-items: center; gap: 8px; transition: gap 0.2s; }\n    .big-card:hover .card-link { gap: 12px; }\n\n    .card-tags { display: none; }\n    .pill { display: none; }\n\n    .secondary-section { text-align: center; margin-bottom: 60px; }\n    .secondary-title { font-size: 2rem; font-weight: 400; margin-bottom: 16px; color: var(--text-dark); }\n    .secondary-desc { color: var(--text-gray); max-width: 600px; margin: 0 auto; }\n\n    .small-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }\n\n    .small-card {\n        background: var(--bg-white);\n        padding: 40px;\n        border-radius: 16px;\n        text-align: left;\n        cursor: pointer;\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        height: 100%;\n        border: 1px solid transparent;\n    }\n    .small-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.05); border-color: rgba(217, 119, 6, 0.1); }\n    .small-card .card-title { font-size: 1.25rem; margin-bottom: 10px; }\n    .small-card .card-text { font-size: 0.9rem; flex-grow: 1; margin-bottom: 20px; color: #666; }\n\n    .modal-overlay {\n        position: fixed;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background: #fff;\n        z-index: 99999;\n        overflow-y: auto;\n        transform: translateY(100%);\n        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n        opacity: 0;\n        pointer-events: none;\n    }\n    .modal-overlay.active { transform: translateY(0); opacity: 1; pointer-events: auto; }\n\n    .top-bar-fixed {\n        position: fixed; top: 0; left: 0; width: 100%; height: 80px;\n        background: #ffffff;\n        display: flex; align-items: center; padding: 0 40px;\n        z-index: 100000;\n    }\n\n    .back-btn {\n        background: none; border: none;\n        font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px;\n        color: #666; cursor: pointer;\n        display: flex; align-items: center; gap: 10px; padding: 10px 0;\n        transition: color 0.2s;\n    }\n    .back-btn:hover { color: var(--primary-color); }\n\n    .modal-content {\n        width: 100%; margin: 0; padding: 100px 0 0;\n        opacity: 0; transform: translateY(20px);\n        transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;\n    }\n    .modal-overlay.active .modal-content { opacity: 1; transform: translateY(0); }\n\n    .content-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }\n\n    .detail-header { padding: 40px 0 60px; }\n    .detail-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: #999; margin-bottom: 20px; display: block; }\n    .detail-header h1 { font-size: 3.5rem; font-weight: 300; margin-bottom: 20px; color: #1a1a1a; line-height: 1.1; }\n    .detail-header p { font-size: 1.25rem; color: #555; max-width: 700px; line-height: 1.6; }\n\n    .detail-grid-who { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 100px; border-top: 1px solid #eee; padding-top: 60px; }\n    .who-col h3 { font-size: 1.1rem; margin-bottom: 30px; display: flex; align-items: center; gap: 12px; font-weight: 500; }\n    .who-icon-header { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #f0f0f0; color: #333; }\n    .who-icon-header.green { background: #e6fcf5; color: #0ca678; }\n    .who-icon-header.red { background: #fee2e2; color: #ef4444; }\n    .who-list { list-style: none; }\n    .who-list li { margin-bottom: 16px; display: flex; align-items: flex-start; gap: 12px; color: #555; font-size: 0.95rem; line-height: 1.5; }\n    .check-icon { color: #0ca678; flex-shrink: 0; margin-top: 4px; }\n    .minus-icon { color: #ef4444; flex-shrink: 0; margin-top: 4px; }\n\n    .deliverables-section { margin-bottom: 100px; }\n    .deliverables-section h2 { font-size: 2rem; font-weight: 300; margin-bottom: 10px; }\n    .deliverables-section > p { color: #666; margin-bottom: 40px; }\n    .deliverables-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }\n    .deliverable-card { background: #fff; padding: 30px; border: 1px solid #f0f0f0; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }\n    .deliverable-card h4 { font-size: 1rem; font-weight: 600; margin-bottom: 10px; color: #ff9900; }\n    .deliverable-card p { font-size: 0.9rem; color: #666; line-height: 1.5; }\n\n    .process-section-full { background-color: var(--dark-bg); color: #fff; padding: 100px 0; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); }\n    .process-header { margin-bottom: 60px; }\n    .process-header h2 { font-size: 2rem; font-weight: 300; margin-bottom: 10px; color: #fff; }\n    .process-time { display: inline-flex; align-items: center; gap: 8px; color: #fff; background-color: rgba(255, 255, 255, 0.15); padding: 6px 16px; border-radius: 100px; font-size: 0.85rem; font-weight: 500; }\n    .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; }\n    .step-phase { color: var(--primary-color); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; display: block; font-weight: 500; }\n    .step h4 { font-size: 1.25rem; margin-bottom: 15px; color: #fff; font-weight: 500; }\n    .step p { font-size: 0.95rem; color: #999; line-height: 1.6; }\n\n    .cases-section { padding: 100px 0; }\n    .cases-section h2 { font-size: 2rem; font-weight: 300; margin-bottom: 40px; }\n    .cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px; }\n    .case-card { cursor: pointer; }\n    .case-img-wrapper { width: 100%; aspect-ratio: 16\/9; border-radius: 12px; overflow: hidden; margin-bottom: 20px; background: #eee; }\n    .case-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }\n    .case-card:hover .case-img { transform: scale(1.05); }\n    .case-title { font-size: 1.1rem; font-weight: 500; margin-bottom: 5px; color: #1a1a1a; }\n    .case-desc { font-size: 0.9rem; color: #666; }\n\n    .faq-section { padding-bottom: 100px; max-width: 800px; margin: 0 auto; }\n    .faq-section h2 { font-size: 2rem; font-weight: 300; margin-bottom: 40px; text-align: center; }\n    .faq-item { border: 1px solid #eee; border-radius: 8px; margin-bottom: 10px; background: #fff; overflow: hidden; }\n    .faq-question { width: 100%; text-align: left; background: none; border: none; padding: 20px 25px; font-size: 1rem; font-weight: 500; color: #1a1a1a; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }\n    .faq-question:hover { background: #f9f9f9; }\n    .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 25px; color: #555; line-height: 1.6; }\n    .faq-item.active .faq-answer { max-height: 300px; padding-bottom: 25px; }\n    .faq-icon { transition: transform 0.3s ease; color: #ccc; }\n    .faq-item.active .faq-icon { transform: rotate(45deg); color: var(--primary-color); }\n\n    .cta-footer-full { background-color: var(--dark-bg); color: #fff; padding: 100px 0; text-align: center; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); }\n    .cta-footer-full h2 { font-size: 2.5rem; font-weight: 300; margin-bottom: 20px; color: #fff; }\n    .cta-footer-full p { color: #999; margin-bottom: 40px; font-size: 1rem; max-width: 600px; margin-left: auto; margin-right: auto; }\n    .cta-buttons { display: flex; gap: 20px; justify-content: center; }\n    .btn-primary { background: var(--primary-color); color: #fff; padding: 15px 35px; border-radius: 4px; text-decoration: none; font-weight: 500; transition: background 0.3s; border: none; cursor: pointer; }\n    .btn-primary:hover { background: var(--primary-hover); }\n    .btn-secondary { background: #fff; color: #111; padding: 15px 35px; border-radius: 4px; text-decoration: none; font-weight: 500; transition: background 0.3s; border: none; cursor: pointer; }\n    .btn-secondary:hover { background: #f0f0f0; }\n\n    @media (max-width: 768px) {\n        .header-title { font-size: 2.2rem; }\n        .big-card { grid-template-columns: 1fr; gap: 20px; padding: 30px; }\n        .card-tags { justify-content: flex-start; }\n        .detail-header h1 { font-size: 2.5rem; }\n        .detail-grid-who { grid-template-columns: 1fr; gap: 40px; }\n        .process-steps { grid-template-columns: 1fr; }\n        .cases-grid { grid-template-columns: 1fr; }\n        .cta-buttons { flex-direction: column; }\n        .top-bar-fixed { padding: 0 20px; height: 60px; }\n        .modal-content { padding-top: 80px; }\n    }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"section-wrapper\">\n    <div class=\"container\">\n\n        <div class=\"header-group\">\n            <span class=\"header-label\">Servi\u00e7os<\/span>\n            <h1 class=\"header-title\">Como podemos <span>ajudar<\/span><\/h1>\n            <p class=\"header-desc\">Oferecemos um ecossistema completo de solu\u00e7\u00f5es em branding, comunica\u00e7\u00e3o e design para empresas que querem construir marcas fortes e relevantes.<\/p>\n        <\/div>\n\n        <!-- GRID UNIFICADO DE CARDS -->\n        <div class=\"small-cards-grid\">\n\n            <div class=\"big-card\" onclick=\"openModal('estrategia')\">\n                <div class=\"card-icon-box\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><circle cx=\"12\" cy=\"12\" r=\"6\"><\/circle><circle cx=\"12\" cy=\"12\" r=\"2\"><\/circle><\/svg>\n                <\/div>\n                <h2 class=\"card-title\">Estrat\u00e9gia de Marca<\/h2>\n                <p class=\"card-text\">Antes de qualquer pe\u00e7a visual, \u00e9 preciso entender quem voc\u00ea \u00e9, onde quer chegar e por que o seu cliente deveria escolher voc\u00ea. Constru\u00edmos a funda\u00e7\u00e3o da sua marca com clareza, inten\u00e7\u00e3o e profundidade.<\/p>\n                <span class=\"card-link\">Saiba mais \u2192<\/span>\n            <\/div>\n\n            <div class=\"big-card\" onclick=\"openModal('expressao')\">\n                <div class=\"card-icon-box\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"><\/path><\/svg>\n                <\/div>\n                <h2 class=\"card-title\">Express\u00e3o & Personalidade<\/h2>\n                <p class=\"card-text\">Criamos uma identidade visual completa que comunica quem voc\u00ea \u00e9 antes mesmo de voc\u00ea falar uma palavra. Profissionalismo que gera confian\u00e7a e faz o cliente lembrar de voc\u00ea.<\/p>\n                <span class=\"card-link\">Saiba mais \u2192<\/span>\n            <\/div>\n\n            <div class=\"big-card\" onclick=\"openModal('catalogo')\">\n                <div class=\"card-icon-box\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"><\/path><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"><\/polyline><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"><\/line><\/svg>\n                <\/div>\n                <h2 class=\"card-title\">Design de Produto & Cat\u00e1logo<\/h2>\n                <p class=\"card-text\">Com design autoral e assinatura de designer, transformamos seus m\u00f3veis em pe\u00e7as de alto valor agregado que justificam pre\u00e7o premium e constroem o nome da sua marca dentro e fora do showroom.<\/p>\n                <span class=\"card-link\">Saiba mais \u2192<\/span>\n            <\/div>\n\n            <div class=\"small-card\" onclick=\"openModal('produto')\">\n                <div class=\"card-icon-box\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"><\/line><\/svg>\n                <\/div>\n                <h3 class=\"card-title\">Design de Produto<\/h3>\n                <p class=\"card-text\">Desenvolvimento de m\u00f3veis e objetos com design autoral e viabilidade produtiva.<\/p>\n                <span class=\"card-link\">Saiba mais \u2192<\/span>\n            <\/div>\n\n            <div class=\"small-card\" onclick=\"openModal('identidade')\">\n                <div class=\"card-icon-box\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 19l7-7 3 3-7 7-3-3z\"><\/path><path d=\"M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z\"><\/path><path d=\"M2 2l7.586 7.586\"><\/path><circle cx=\"11\" cy=\"11\" r=\"2\"><\/circle><\/svg>\n                <\/div>\n                <h3 class=\"card-title\">Identidade Visual<\/h3>\n                <p class=\"card-text\">Cria\u00e7\u00e3o de logotipos e sistemas visuais completos para profissionalizar sua marca.<\/p>\n                <span class=\"card-link\">Saiba mais \u2192<\/span>\n            <\/div>\n\n            <div class=\"small-card\" onclick=\"openModal('site')\">\n                <div class=\"card-icon-box\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"><\/line><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"><\/line><\/svg>\n                <\/div>\n                <h3 class=\"card-title\">Site Institucional<\/h3>\n                <p class=\"card-text\">Sites modernos, r\u00e1pidos e otimizados para converter visitantes em clientes.<\/p>\n                <span class=\"card-link\">Saiba mais \u2192<\/span>\n            <\/div>\n\n            <!-- NOVO: Marketing Digital -->\n            <div class=\"small-card\" onclick=\"openModal('marketing')\">\n                <div class=\"card-icon-box\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"><\/path><\/svg>\n                <\/div>\n                <h3 class=\"card-title\">Marketing Digital<\/h3>\n                <p class=\"card-text\">Design de conte\u00fado para redes sociais \u2014 cards, pe\u00e7as e templates que comunicam a identidade da sua marca com consist\u00eancia.<\/p>\n                <span class=\"card-link\">Saiba mais \u2192<\/span>\n            <\/div>\n\n            <!-- NOVO: Embalagem -->\n            <div class=\"small-card\" onclick=\"openModal('embalagem')\">\n                <div class=\"card-icon-box\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"><\/path><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"><\/polyline><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"><\/line><\/svg>\n                <\/div>\n                <h3 class=\"card-title\">Embalagem<\/h3>\n                <p class=\"card-text\">Design de embalagens que comunicam o valor do produto antes mesmo de ele ser aberto \u2014 do conceito \u00e0 arte final para produ\u00e7\u00e3o.<\/p>\n                <span class=\"card-link\">Saiba mais \u2192<\/span>\n            <\/div>\n\n            <!-- NOVO: Projetos Editoriais -->\n            <div class=\"small-card\" onclick=\"openModal('editorial')\">\n                <div class=\"card-icon-box\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path><polyline points=\"14 2 14 8 20 8\"><\/polyline><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line><polyline points=\"10 9 9 9 8 9\"><\/polyline><\/svg>\n                <\/div>\n                <h3 class=\"card-title\">Projetos Editoriais<\/h3>\n                <p class=\"card-text\">Apresenta\u00e7\u00f5es institucionais, relat\u00f3rios de gest\u00e3o e relat\u00f3rios anuais com design que traduz dados e estrat\u00e9gia em documentos de impacto.<\/p>\n                <span class=\"card-link\">Saiba mais \u2192<\/span>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<!-- MODAL -->\n<div id=\"service-modal\" class=\"modal-overlay\">\n    <div class=\"top-bar-fixed\">\n        <button class=\"back-btn\" onclick=\"closeModal()\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line><polyline points=\"12 19 5 12 12 5\"><\/polyline><\/svg>\n            Voltar para servi\u00e7os\n        <\/button>\n    <\/div>\n    <div id=\"modal-body\" class=\"modal-content\"><\/div>\n<\/div>\n\n<script>\n    const servicesData = {\n        estrategia: {\n            title: \"Estrat\u00e9gia de Marca\",\n            desc: \"Constru\u00edmos a base s\u00f3lida para o crescimento do seu neg\u00f3cio, definindo com clareza quem voc\u00ea \u00e9, para onde vai e como chegar\u00e1 l\u00e1.\",\n            who: [\"Empresas em fase de crescimento\", \"Marcas que perderam relev\u00e2ncia\", \"Fus\u00f5es e aquisi\u00e7\u00f5es\"],\n            notWho: [\"Quem busca apenas um logotipo\", \"A\u00e7\u00f5es pontuais de curto prazo\"],\n            deliverables: [\n                {title: \"Plataforma de Marca\", text: \"Defini\u00e7\u00e3o de prop\u00f3sito, miss\u00e3o, vis\u00e3o e valores.\"},\n                {title: \"Posicionamento\", text: \"Como a marca quer ser percebida no mercado.\"},\n                {title: \"Arquitetura de Marca\", text: \"Organiza\u00e7\u00e3o do portf\u00f3lio de produtos e servi\u00e7os.\"},\n                {title: \"Naming\", text: \"Cria\u00e7\u00e3o de nomes estrat\u00e9gicos para marcas e produtos.\"}\n            ],\n            time: \"6 a 8 semanas\",\n            steps: [\n                {phase: \"Fase 01\", title: \"Imers\u00e3o\", text: \"Mergulho profundo no neg\u00f3cio, mercado e concorrentes.\"},\n                {phase: \"Fase 02\", title: \"An\u00e1lise\", text: \"Diagn\u00f3stico de oportunidades e defini\u00e7\u00e3o de territ\u00f3rios.\"},\n                {phase: \"Fase 03\", title: \"Constru\u00e7\u00e3o\", text: \"Defini\u00e7\u00e3o do prop\u00f3sito, posicionamento e atributos.\"},\n                {phase: \"Fase 04\", title: \"Valida\u00e7\u00e3o\", text: \"Apresenta\u00e7\u00e3o do book de marca e diretrizes estrat\u00e9gicas.\"}\n            ],\n            cases: [\n                {title: \"TechFlow\", desc: \"Reposicionamento estrat\u00e9gico para startup de tecnologia.\", img: \"https:\/\/images.unsplash.com\/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=800&q=80\"},\n                {title: \"BioVida\", desc: \"Estrat\u00e9gia de marca para rede de cl\u00ednicas.\", img: \"https:\/\/images.unsplash.com\/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=800&q=80\"}\n            ],\n            faq: [\n                {q: \"Por que preciso de estrat\u00e9gia antes do design?\", a: \"O design \u00e9 a express\u00e3o visual da estrat\u00e9gia. Sem estrat\u00e9gia, o design \u00e9 apenas decora\u00e7\u00e3o.\"},\n                {q: \"Quanto tempo dura o processo?\", a: \"Tipicamente entre 6 a 8 semanas, dependendo da complexidade do neg\u00f3cio.\"}\n            ]\n        },\n        expressao: {\n            title: \"Express\u00e3o & Personalidade\",\n            desc: \"Traduzimos a estrat\u00e9gia em elementos visuais e verbais que tornam a marca \u00fanica e reconhec\u00edvel.\",\n            who: [\"Marcas novas\", \"Rebranding\", \"Empresas sem consist\u00eancia visual\"],\n            notWho: [\"Quem quer apenas 'ficar bonito'\", \"Projetos sem base estrat\u00e9gica\"],\n            deliverables: [\n                {title: \"Identidade Visual\", text: \"Logotipo, cores, tipografia e elementos gr\u00e1ficos.\"},\n                {title: \"Tom de Voz\", text: \"Diretrizes de como a marca fala e escreve.\"},\n                {title: \"Manual da Marca\", text: \"Guia completo de uso e aplica\u00e7\u00e3o da marca.\"},\n                {title: \"Papelaria\", text: \"Cart\u00f5es, envelopes e materiais institucionais.\"}\n            ],\n            time: \"4 a 6 semanas\",\n            steps: [\n                {phase: \"Fase 01\", title: \"Conceito\", text: \"Cria\u00e7\u00e3o de caminhos criativos baseados na estrat\u00e9gia.\"},\n                {phase: \"Fase 02\", title: \"Design\", text: \"Desenvolvimento do sistema visual (logo, cores, tipo).\"},\n                {phase: \"Fase 03\", title: \"Verbal\", text: \"Defini\u00e7\u00e3o do tom de voz e universo verbal.\"},\n                {phase: \"Fase 04\", title: \"Entrega\", text: \"Manual da Marca e arquivos finais.\"}\n            ],\n            cases: [\n                {title: \"Jazz Residence\", desc: \"Identidade visual sofisticada para empreendimento imobili\u00e1rio.\", img: \"https:\/\/images.unsplash.com\/photo-1545324418-cc1a3fa10c00?auto=format&fit=crop&w=800&q=80\"},\n                {title: \"Namata\", desc: \"Express\u00e3o visual e verbal para est\u00fadio floral.\", img: \"https:\/\/images.unsplash.com\/photo-1490750967868-58cb75069ed6?auto=format&fit=crop&w=800&q=80\"}\n            ],\n            faq: [\n                {q: \"O que recebo no final?\", a: \"Todos os arquivos do logotipo (vetor, imagem), paleta de cores, fontes e o manual da marca.\"},\n                {q: \"Voc\u00eas criam o nome tamb\u00e9m?\", a: \"Sim, o Naming pode ser contratado como parte da estrat\u00e9gia ou express\u00e3o.\"}\n            ]\n        },\n        catalogo: {\n            title: \"Design de Produto & Cat\u00e1logo\",\n            desc: \"Desenvolvemos m\u00f3veis com design autoral e assinatura de designer \u2014 pe\u00e7as que justificam pre\u00e7o premium e constroem o nome da sua marca dentro e fora do showroom.\",\n            who: [\"Ind\u00fastrias moveleiras que querem uma linha de alto valor agregado\", \"Marcas que buscam diferencia\u00e7\u00e3o no mercado\", \"Empresas que desejam lan\u00e7ar produtos com identidade pr\u00f3pria\"],\n            notWho: [\"C\u00f3pia ou releitura de produtos existentes\", \"Projetos sem viabilidade para produ\u00e7\u00e3o industrial\"],\n            deliverables: [\n                {title: \"Desenho de M\u00f3veis Exclusivos\", text: \"Cria\u00e7\u00e3o de pe\u00e7as originais com assinatura de designer.\"},\n                {title: \"Viabilidade Produtiva\", text: \"Projeto desenvolvido com foco em fabrica\u00e7\u00e3o real.\"},\n                {title: \"Cat\u00e1logo de Produtos\", text: \"Cat\u00e1logo impresso e digital para apresenta\u00e7\u00e3o da linha ao mercado.\"}\n            ],\n            time: \"8 a 14 semanas\",\n            steps: [\n                {phase: \"Fase 01\", title: \"Briefing\", text: \"Entendimento do parque fabril, p\u00fablico e posicionamento desejado.\"},\n                {phase: \"Fase 02\", title: \"Conceito\", text: \"Defini\u00e7\u00e3o de est\u00e9tica, materiais e linguagem do produto.\"},\n                {phase: \"Fase 03\", title: \"Projeto\", text: \"Desenvolvimento t\u00e9cnico com detalhamento para produ\u00e7\u00e3o.\"},\n                {phase: \"Fase 04\", title: \"Cat\u00e1logo\", text: \"Produ\u00e7\u00e3o do material de apresenta\u00e7\u00e3o impresso e digital.\"}\n            ],\n            cases: [\n                {title: \"Cadeira Lina\", desc: \"Design premiado em madeira maci\u00e7a para ind\u00fastria moveleira.\", img: \"https:\/\/images.unsplash.com\/photo-1592078615290-033ee584e267?auto=format&fit=crop&w=800&q=80\"},\n                {title: \"Linha Alto Padr\u00e3o\", desc: \"Cole\u00e7\u00e3o exclusiva para marca de m\u00f3veis corporativos.\", img: \"https:\/\/images.unsplash.com\/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=800&q=80\"}\n            ],\n            faq: [\n                {q: \"O design \u00e9 exclusivo para a nossa empresa?\", a: \"Sim, transferimos os direitos patrimoniais do design para o cliente ao final do projeto.\"},\n                {q: \"Voc\u00eas acompanham a prototipagem?\", a: \"Sim, fazemos o acompanhamento t\u00e9cnico durante a fase de prot\u00f3tipo para garantir fidelidade ao projeto.\"}\n            ]\n        },\n        produto: {\n            title: \"Design de Produto\",\n            desc: \"Desenvolvemos m\u00f3veis e objetos com design autoral, unindo est\u00e9tica, ergonomia e viabilidade produtiva.\",\n            who: [\"Ind\u00fastrias de m\u00f3veis\", \"Marcas de decora\u00e7\u00e3o\", \"Arquitetos com linha pr\u00f3pria\"],\n            notWho: [\"C\u00f3pia de produtos existentes\", \"Projetos sem viabilidade industrial\"],\n            deliverables: [\n                {title: \"Projeto 3D\", text: \"Renderiza\u00e7\u00f5es realistas do produto.\"},\n                {title: \"Detalhamento T\u00e9cnico\", text: \"Desenhos t\u00e9cnicos com medidas e especifica\u00e7\u00f5es.\"},\n                {title: \"Acompanhamento\", text: \"Suporte durante a fase de prototipagem.\"}\n            ],\n            time: \"8 a 12 semanas\",\n            steps: [\n                {phase: \"Fase 01\", title: \"Briefing\", text: \"Entendimento da necessidade, p\u00fablico e parque fabril.\"},\n                {phase: \"Fase 02\", title: \"Idea\u00e7\u00e3o\", text: \"Sketches, modelagem 3D e defini\u00e7\u00e3o de materiais.\"},\n                {phase: \"Fase 03\", title: \"Engenharia\", text: \"Detalhamento t\u00e9cnico e prepara\u00e7\u00e3o para produ\u00e7\u00e3o.\"},\n                {phase: \"Fase 04\", title: \"Prototipagem\", text: \"Acompanhamento do prot\u00f3tipo f\u00edsico e ajustes finais.\"}\n            ],\n            cases: [\n                {title: \"Cadeira Lina\", desc: \"Design premiado em madeira maci\u00e7a.\", img: \"https:\/\/images.unsplash.com\/photo-1592078615290-033ee584e267?auto=format&fit=crop&w=800&q=80\"},\n                {title: \"Lumin\u00e1ria Arco\", desc: \"Desenvolvimento para ind\u00fastria de ilumina\u00e7\u00e3o.\", img: \"https:\/\/images.unsplash.com\/photo-1513506003011-3b03c8e3bf27?auto=format&fit=crop&w=800&q=80\"}\n            ],\n            faq: [\n                {q: \"Voc\u00eas fabricam?\", a: \"N\u00e3o, n\u00f3s fazemos o design e o projeto t\u00e9cnico para a ind\u00fastria fabricar.\"},\n                {q: \"O projeto \u00e9 exclusivo?\", a: \"Sim, transferimos os direitos patrimoniais do design para o cliente.\"}\n            ]\n        },\n        identidade: {\n            title: \"Identidade Visual\",\n            desc: \"Cria\u00e7\u00e3o de logotipos e sistemas visuais para empresas que precisam se profissionalizar.\",\n            who: [\"Pequenas empresas\", \"Profissionais liberais\", \"Startups\"],\n            notWho: [\"Altera\u00e7\u00f5es pontuais em logos existentes\"],\n            deliverables: [\n                {title: \"Logotipo\", text: \"Vers\u00f5es principal e secund\u00e1ria da marca.\"},\n                {title: \"Paleta de Cores\", text: \"Defini\u00e7\u00e3o de cores institucionais.\"},\n                {title: \"Tipografia\", text: \"Sele\u00e7\u00e3o de fontes para uso na comunica\u00e7\u00e3o.\"},\n                {title: \"Manual B\u00e1sico\", text: \"Guia de aplica\u00e7\u00e3o da marca.\"}\n            ],\n            time: \"3 a 4 semanas\",\n            steps: [\n                {phase: \"Fase 01\", title: \"Briefing\", text: \"Entendimento do gosto e necessidade.\"},\n                {phase: \"Fase 02\", title: \"Cria\u00e7\u00e3o\", text: \"Desenvolvimento das op\u00e7\u00f5es visuais.\"},\n                {phase: \"Fase 03\", title: \"Refino\", text: \"Ajustes na op\u00e7\u00e3o escolhida.\"},\n                {phase: \"Fase 04\", title: \"Manual\", text: \"Guia b\u00e1sico de uso da marca.\"}\n            ],\n            cases: [\n                {title: \"Essendi\", desc: \"Sistema visual para marca de produtos essenciais.\", img: \"https:\/\/images.unsplash.com\/photo-1586023492125-27b2c045efd7?auto=format&fit=crop&w=800&q=80\"},\n                {title: \"Advocacia Silva\", desc: \"Identidade s\u00f3bria e moderna.\", img: \"https:\/\/images.unsplash.com\/photo-1505664194779-8beaceb93744?auto=format&fit=crop&w=800&q=80\"}\n            ],\n            faq: [\n                {q: \"Posso pedir altera\u00e7\u00f5es?\", a: \"Sim, prevemos rodadas de ajustes para garantir sua satisfa\u00e7\u00e3o.\"},\n                {q: \"Voc\u00eas entregam em vetor?\", a: \"Sim, entregamos em AI, EPS, PDF, PNG e JPG.\"}\n            ]\n        },\n        site: {\n            title: \"Site Institucional\",\n            desc: \"Design e desenvolvimento de sites focados em performance e convers\u00e3o.\",\n            who: [\"Empresas sem site\", \"Sites antigos\", \"Baixa performance\"],\n            notWho: [\"E-commerces complexos\", \"Sistemas web\"],\n            deliverables: [\n                {title: \"Layout Exclusivo\", text: \"Design personalizado para sua marca.\"},\n                {title: \"Desenvolvimento\", text: \"Programa\u00e7\u00e3o em WordPress ou Webflow.\"},\n                {title: \"Responsivo\", text: \"Site adaptado para celulares e tablets.\"},\n                {title: \"SEO B\u00e1sico\", text: \"Otimiza\u00e7\u00e3o para o Google.\"}\n            ],\n            time: \"4 a 6 semanas\",\n            steps: [\n                {phase: \"Fase 01\", title: \"UX\", text: \"Arquitetura da informa\u00e7\u00e3o e wireframes.\"},\n                {phase: \"Fase 02\", title: \"UI\", text: \"Design das interfaces.\"},\n                {phase: \"Fase 03\", title: \"Dev\", text: \"Programa\u00e7\u00e3o e CMS.\"},\n                {phase: \"Fase 04\", title: \"Go Live\", text: \"Testes e publica\u00e7\u00e3o.\"}\n            ],\n            cases: [\n                {title: \"Nibo\", desc: \"Site institucional focado em convers\u00e3o.\", img: \"https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=80\"},\n                {title: \"Consultoria RH\", desc: \"Site one-page moderno.\", img: \"https:\/\/images.unsplash.com\/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=800&q=80\"}\n            ],\n            faq: [\n                {q: \"Eu consigo atualizar o site depois?\", a: \"Sim, entregamos com painel administrativo f\u00e1cil de usar.\"},\n                {q: \"O dom\u00ednio e hospedagem est\u00e3o inclusos?\", a: \"N\u00e3o, mas orientamos na contrata\u00e7\u00e3o desses servi\u00e7os.\"}\n            ]\n        },\n        marketing: {\n            title: \"Marketing Digital\",\n            desc: \"Design de conte\u00fado para redes sociais que mant\u00e9m a identidade da sua marca consistente em cada publica\u00e7\u00e3o \u2014 do Instagram ao LinkedIn.\",\n            who: [\"Empresas que j\u00e1 t\u00eam identidade visual e precisam de conte\u00fado consistente\", \"Marcas que terceirizam a gest\u00e3o de redes mas n\u00e3o t\u00eam um padr\u00e3o visual definido\", \"Times de marketing que precisam de templates profissionais para produzir em escala\"],\n            notWho: [\"Quem busca gest\u00e3o de redes sociais ou produ\u00e7\u00e3o de texto\", \"Projetos sem identidade visual estabelecida\"],\n            deliverables: [\n                {title: \"Cards para Redes Sociais\", text: \"Pe\u00e7as est\u00e1ticas para feed e stories no Instagram, LinkedIn e demais canais.\"},\n                {title: \"Templates Edit\u00e1veis\", text: \"Arquivos organizados para que o time interno produza novos posts mantendo o padr\u00e3o visual.\"},\n                {title: \"Guia de Uso\", text: \"Orienta\u00e7\u00f5es de como aplicar os templates com consist\u00eancia.\"},\n                {title: \"Pacote de Pe\u00e7as\", text: \"Volume acordado de layouts prontos para uso imediato.\"}\n            ],\n            time: \"2 a 4 semanas\",\n            steps: [\n                {phase: \"Fase 01\", title: \"Alinhamento\", text: \"Entendimento dos canais, p\u00fablico e tom visual da marca.\"},\n                {phase: \"Fase 02\", title: \"Conceito\", text: \"Defini\u00e7\u00e3o de grid, paleta e tipografia aplicados ao digital.\"},\n                {phase: \"Fase 03\", title: \"Cria\u00e7\u00e3o\", text: \"Desenvolvimento dos templates e pe\u00e7as do pacote.\"},\n                {phase: \"Fase 04\", title: \"Entrega\", text: \"Arquivos finais e guia de uso para o time.\"}\n            ],\n            cases: [\n                {title: \"Jazz Residence\", desc: \"Sistema de templates para lan\u00e7amento imobili\u00e1rio.\", img: \"https:\/\/images.unsplash.com\/photo-1611162617213-7d7a39e9b1d7?auto=format&fit=crop&w=800&q=80\"},\n                {title: \"BioVida\", desc: \"Pacote de pe\u00e7as para redes sociais de rede de cl\u00ednicas.\", img: \"https:\/\/images.unsplash.com\/photo-1432888498266-38ffec3eaf0a?auto=format&fit=crop&w=800&q=80\"}\n            ],\n            faq: [\n                {q: \"Voc\u00eas fazem a gest\u00e3o das redes sociais?\", a: \"N\u00e3o. Nosso foco \u00e9 o design das pe\u00e7as \u2014 a gest\u00e3o e publica\u00e7\u00e3o ficam com o cliente ou com sua ag\u00eancia de conte\u00fado.\"},\n                {q: \"Posso adaptar os templates para campanhas futuras?\", a: \"Sim, entregamos os arquivos edit\u00e1veis justamente para isso.\"}\n            ]\n        },\n        embalagem: {\n            title: \"Embalagem\",\n            desc: \"A embalagem \u00e9 o primeiro contato f\u00edsico do cliente com o seu produto. Desenhamos embalagens que comunicam valor, protegem a experi\u00eancia e diferenciam a marca na g\u00f4ndola.\",\n            who: [\"Marcas de produtos que precisam se destacar no ponto de venda\", \"Empresas lan\u00e7ando novos produtos ou renovando linha existente\", \"Neg\u00f3cios que valorizam a experi\u00eancia de unboxing como parte da marca\"],\n            notWho: [\"Projetos que n\u00e3o t\u00eam refer\u00eancia de p\u00fablico ou posicionamento definido\", \"Demandas de altera\u00e7\u00f5es pontuais em arte j\u00e1 existente\"],\n            deliverables: [\n                {title: \"Conceito Visual\", text: \"Dire\u00e7\u00e3o criativa alinhada \u00e0 identidade da marca.\"},\n                {title: \"Design Estrutural\", text: \"Defini\u00e7\u00e3o de formato, materiais e acabamentos.\"},\n                {title: \"Arte Final\", text: \"Arquivo preparado para impress\u00e3o com todas as especifica\u00e7\u00f5es t\u00e9cnicas.\"},\n                {title: \"Mockup\", text: \"Visualiza\u00e7\u00e3o realista da embalagem antes da produ\u00e7\u00e3o.\"}\n            ],\n            time: \"3 a 6 semanas\",\n            steps: [\n                {phase: \"Fase 01\", title: \"Briefing\", text: \"Levantamento de produto, p\u00fablico, canal de venda e refer\u00eancias.\"},\n                {phase: \"Fase 02\", title: \"Estrutura\", text: \"Defini\u00e7\u00e3o de formato, material e processo de impress\u00e3o.\"},\n                {phase: \"Fase 03\", title: \"Design\", text: \"Cria\u00e7\u00e3o visual com foco em impacto e consist\u00eancia de marca.\"},\n                {phase: \"Fase 04\", title: \"Arte Final\", text: \"Fechamento do arquivo t\u00e9cnico para gr\u00e1fica.\"}\n            ],\n            cases: [\n                {title: \"Essendi\", desc: \"Linha de embalagens para produtos de bem-estar.\", img: \"https:\/\/images.unsplash.com\/photo-1607082348824-0a96f2a4b9da?auto=format&fit=crop&w=800&q=80\"},\n                {title: \"Namata\", desc: \"Embalagem premium para linha floral artesanal.\", img: \"https:\/\/images.unsplash.com\/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=800&q=80\"}\n            ],\n            faq: [\n                {q: \"Voc\u00eas indicam gr\u00e1ficas para produ\u00e7\u00e3o?\", a: \"Sim, podemos indicar fornecedores parceiros de acordo com o tipo de embalagem e volume.\"},\n                {q: \"O projeto inclui dieline (molde estrutural)?\", a: \"Sim, entregamos o dieline t\u00e9cnico junto com a arte final.\"}\n            ]\n        },\n        editorial: {\n            title: \"Projetos Editoriais\",\n            desc: \"Transformamos dados, relat\u00f3rios e estrat\u00e9gias em documentos visuais de alto impacto \u2014 que transmitem profissionalismo e refor\u00e7am a credibilidade da sua organiza\u00e7\u00e3o.\",\n            who: [\"Empresas que precisam apresentar resultados a investidores, conselhos ou clientes\", \"Organiza\u00e7\u00f5es que publicam relat\u00f3rios anuais ou de gest\u00e3o\", \"Times que precisam de apresenta\u00e7\u00f5es institucionais com padr\u00e3o visual elevado\"],\n            notWho: [\"Quem precisa apenas de ajustes em template pronto\", \"Documentos internos sem necessidade de design profissional\"],\n            deliverables: [\n                {title: \"Apresenta\u00e7\u00f5es Institucionais\", text: \"Decks em PowerPoint ou PDF para pitches, reuni\u00f5es e eventos.\"},\n                {title: \"Relat\u00f3rios de Gest\u00e3o\", text: \"Documentos peri\u00f3dicos com diagrama\u00e7\u00e3o profissional e visualiza\u00e7\u00e3o de dados.\"},\n                {title: \"Relat\u00f3rios Anuais\", text: \"Publica\u00e7\u00f5es completas que comunicam resultados e posicionam a marca.\"},\n                {title: \"Template Edit\u00e1vel\", text: \"Arquivo-base para que o time interno mantenha o padr\u00e3o nas pr\u00f3ximas edi\u00e7\u00f5es.\"}\n            ],\n            time: \"2 a 5 semanas\",\n            steps: [\n                {phase: \"Fase 01\", title: \"Briefing\", text: \"Entendimento do conte\u00fado, p\u00fablico e objetivo do documento.\"},\n                {phase: \"Fase 02\", title: \"Arquitetura\", text: \"Organiza\u00e7\u00e3o da estrutura e hierarquia das informa\u00e7\u00f5es.\"},\n                {phase: \"Fase 03\", title: \"Design\", text: \"Diagrama\u00e7\u00e3o com identidade visual da marca aplicada.\"},\n                {phase: \"Fase 04\", title: \"Entrega\", text: \"Arquivo final em PDF e vers\u00e3o edit\u00e1vel para uso futuro.\"}\n            ],\n            cases: [\n                {title: \"Grupo Nibo\", desc: \"Relat\u00f3rio anual com visualiza\u00e7\u00e3o de dados e narrativa de resultados.\", img: \"https:\/\/images.unsplash.com\/photo-1554224155-8d04cb21cd6c?auto=format&fit=crop&w=800&q=80\"},\n                {title: \"BioVida\", desc: \"Apresenta\u00e7\u00e3o institucional para rodada de investimentos.\", img: \"https:\/\/images.unsplash.com\/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=800&q=80\"}\n            ],\n            faq: [\n                {q: \"Voc\u00eas trabalham com o conte\u00fado (textos) tamb\u00e9m?\", a: \"Nosso foco \u00e9 o design editorial. O conte\u00fado textual \u00e9 fornecido pelo cliente; podemos fazer pequenos ajustes de revis\u00e3o, mas n\u00e3o somos uma ag\u00eancia de conte\u00fado.\"},\n                {q: \"O arquivo final vem edit\u00e1vel?\", a: \"Sim, entregamos o arquivo edit\u00e1vel em PowerPoint ou InDesign para que a equipe possa atualizar nas pr\u00f3ximas edi\u00e7\u00f5es.\"}\n            ]\n        }\n    };\n\n    \/\/ ==========================================================================\n    \/\/ L\u00d3GICA DO MODAL\n    \/\/ ==========================================================================\n    function openModal(serviceKey) {\n        const data = servicesData[serviceKey];\n        if (!data) { console.error(\"Servi\u00e7o n\u00e3o encontrado:\", serviceKey); return; }\n\n        const modalBody = document.getElementById('modal-body');\n\n        let htmlContent = `\n            <div class=\"content-container\">\n                <div class=\"detail-header\">\n                    <span class=\"detail-label\">SERVI\u00c7O<\/span>\n                    <h1>${data.title}<\/h1>\n                    <p>${data.desc}<\/p>\n                <\/div>\n\n                <div class=\"detail-grid-who\">\n                    <div class=\"who-col\">\n                        <h3>\n                            <div class=\"who-icon-header green\">\n                                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle><\/svg>\n                            <\/div>\n                            Para quem \u00e9\n                        <\/h3>\n                        <ul class=\"who-list\">\n                            ${data.who.map(item => `<li><svg class=\"check-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path><polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline><\/svg> ${item}<\/li>`).join('')}\n                        <\/ul>\n                    <\/div>\n                    <div class=\"who-col\">\n                        <h3>\n                            <div class=\"who-icon-header red\">\n                                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><circle cx=\"12\" cy=\"12\" r=\"6\"><\/circle><circle cx=\"12\" cy=\"12\" r=\"2\"><\/circle><\/svg>\n                            <\/div>\n                            Para quem n\u00e3o \u00e9\n                        <\/h3>\n                        <ul class=\"who-list\">\n                            ${data.notWho.map(item => `<li><svg class=\"minus-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><\/svg> ${item}<\/li>`).join('')}\n                        <\/ul>\n                    <\/div>\n                <\/div>\n\n                <div class=\"deliverables-section\">\n                    <h2>O que voc\u00ea recebe<\/h2>\n                    <p>Entreg\u00e1veis do projeto de ${data.title.toLowerCase()}.<\/p>\n                    <div class=\"deliverables-grid\">\n                        ${data.deliverables.map(item => `\n                            <div class=\"deliverable-card\">\n                                <h4>${item.title}<\/h4>\n                                <p>${item.text}<\/p>\n                            <\/div>\n                        `).join('')}\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"process-section-full\">\n                <div class=\"content-container\">\n                    <div class=\"process-header\">\n                        <h2>Como funciona<\/h2>\n                        <div class=\"process-time\">\n                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\n                            Prazo t\u00edpico: ${data.time}\n                        <\/div>\n                    <\/div>\n                    <div class=\"process-steps\">\n                        ${data.steps.map(step => `\n                            <div class=\"step\">\n                                <span class=\"step-phase\">${step.phase}<\/span>\n                                <h4>${step.title}<\/h4>\n                                <p>${step.text}<\/p>\n                            <\/div>\n                        `).join('')}\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"content-container\">\n                <div class=\"cases-section\">\n                    <h2>Cases relacionados<\/h2>\n                    <div class=\"cases-grid\">\n                        ${data.cases.map(c => `\n                            <div class=\"case-card\">\n                                <div class=\"case-img-wrapper\">\n                                    <img decoding=\"async\" src=\"${c.img}\" alt=\"${c.title}\" class=\"case-img\">\n                                <\/div>\n                                <h4 class=\"case-title\">${c.title}<\/h4>\n                                <p class=\"case-desc\">${c.desc}<\/p>\n                            <\/div>\n                        `).join('')}\n                    <\/div>\n                <\/div>\n\n                <div class=\"faq-section\">\n                    <h2>D\u00favidas frequentes<\/h2>\n                    ${data.faq.map(f => `\n                        <div class=\"faq-item\">\n                            <button class=\"faq-question\" onclick=\"toggleFaq(this)\">\n                                ${f.q}\n                                <svg class=\"faq-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><\/svg>\n                            <\/button>\n                            <div class=\"faq-answer\">${f.a}<\/div>\n                        <\/div>\n                    `).join('')}\n                <\/div>\n            <\/div>\n\n            <div class=\"cta-footer-full\">\n                <div class=\"content-container\">\n                    <h2>Pronto para come\u00e7ar?<\/h2>\n                    <p>Solicite uma proposta personalizada ou agende uma conversa para entender como podemos ajudar.<\/p>\n                    <div class=\"cta-buttons\">\n                        <a href=\"#\" class=\"btn-primary\">Solicitar proposta \u2192<\/a>\n                        <a href=\"#\" class=\"btn-secondary\">Agendar 15 min \u2192<\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n        `;\n\n        modalBody.innerHTML = htmlContent;\n        document.getElementById('service-modal').classList.add('active');\n        document.body.style.overflow = 'hidden';\n\n        const newUrl = window.location.pathname + '?servico=' + serviceKey;\n        window.history.pushState({service: serviceKey}, '', newUrl);\n    }\n\n    function closeModal() {\n        document.getElementById('service-modal').classList.remove('active');\n        document.body.style.overflow = '';\n        window.history.pushState({}, '', window.location.pathname);\n    }\n\n    function toggleFaq(element) {\n        element.parentElement.classList.toggle('active');\n    }\n\n    window.addEventListener('popstate', function(event) {\n        if (event.state && event.state.service) {\n            openModal(event.state.service);\n        } else {\n            closeModal();\n        }\n    });\n\n    document.addEventListener('DOMContentLoaded', () => {\n        const urlParams = new URLSearchParams(window.location.search);\n        const serviceParam = urlParams.get('servico');\n        if (serviceParam && servicesData[serviceParam]) {\n            openModal(serviceParam);\n        }\n    });\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3bf10b0 e-con-full e-flex e-con e-parent\" data-id=\"3bf10b0\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1af5430 elementor-widget elementor-widget-html\" data-id=\"1af5430\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Cabe\u00e7alho do Portf\u00f3lio -->\n<section class=\"nuovo-portfolio-header\">\n    <div class=\"nuovo-header-content\">\n        <span class=\"nuovo-overline\">Portf\u00f3lio<\/span>\n        <h2 class=\"nuovo-title\">Projetos que geram resultados<\/h2>\n        <p class=\"nuovo-description\">\n            Resultados reais para marcas que buscam crescer com prop\u00f3sito e consist\u00eancia.\n        <\/p>\n    <\/div>\n    <div class=\"nuovo-header-action\">\n        <!-- Substitua o # abaixo pela URL da p\u00e1gina de projetos -->\n        <a href=\"https:\/\/nuovo.com.br\/novo\/port\" class=\"nuovo-btn-outline\" id=\"btn-todos-projetos\">\n            Ver todos os projetos <span class=\"arrow\">&rarr;<\/span>\n        <\/a>\n    <\/div>\n<\/section>\n\n<style>\n    \/* --- VARI\u00c1VEIS GERAIS --- *\/\n    :root {\n        --nuovo-title-color: #524d4b;\n        --nuovo-text-color: #666666;\n        --nuovo-overline-color: #888888;\n        --nuovo-green: #23b099;\n        --nuovo-font: 'Roboto', sans-serif;\n    }\n\n    \/* --- ESTRUTURA DO CABE\u00c7ALHO --- *\/\n    .nuovo-portfolio-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        flex-wrap: wrap;\n        gap: 30px;\n        padding: 40px 0;\n        font-family: var(--nuovo-font);\n        width: 100%;\n        max-width: 1200px; \/* Ajuste conforme a largura do seu site *\/\n        margin: 0 auto;\n        box-sizing: border-box;\n    }\n\n    \/* --- TEXTOS (ESQUERDA) --- *\/\n    .nuovo-header-content {\n        flex: 1;\n        max-width: 650px;\n    }\n\n    .nuovo-overline {\n        display: block;\n        text-transform: uppercase;\n        font-size: 13px;\n        letter-spacing: 1.5px;\n        color: var(--nuovo-overline-color);\n        margin-bottom: 12px;\n        font-weight: 500;\n    }\n\n    .nuovo-portfolio-header .nuovo-title {\n        font-size: 46px;\n        font-weight: 300; \/* Fonte mais fina conforme a imagem *\/\n        color: var(--nuovo-title-color);\n        margin: 0 0 15px 0;\n        line-height: 1.2;\n    }\n\n    .nuovo-description {\n        font-size: 18px;\n        color: var(--nuovo-text-color);\n        margin: 0;\n        line-height: 1.6;\n        font-weight: 400;\n    }\n\n    \/* --- BOT\u00c3O (DIREITA) --- *\/\n    .nuovo-header-action {\n        display: flex;\n        align-items: center;\n    }\n\n    .nuovo-btn-outline {\n        display: inline-flex;\n        align-items: center;\n        gap: 10px;\n        padding: 14px 28px;\n        border: 1px solid #000;\n        background-color: transparent;\n        color: #000;\n        text-decoration: none;\n        font-size: 16px;\n        font-weight: 500;\n        border-radius: 4px;\n        transition: all 0.3s ease;\n    }\n\n    .nuovo-btn-outline .arrow {\n        font-size: 18px;\n        transition: transform 0.3s ease;\n    }\n\n    \/* Hover sem magenta, utilizando o verde da marca *\/\n    .nuovo-btn-outline:hover {\n        background-color: var(--nuovo-green);\n        border-color: var(--nuovo-green);\n        color: #fff;\n    }\n\n    .nuovo-btn-outline:hover .arrow {\n        transform: translateX(4px);\n    }\n\n    \/* --- RESPONSIVIDADE --- *\/\n    @media (max-width: 768px) {\n        .nuovo-portfolio-header {\n            flex-direction: column;\n            align-items: flex-start;\n            padding: 30px 20px;\n        }\n\n        .nuovo-portfolio-header .nuovo-title {\n            font-size: 32px;\n        }\n\n        .nuovo-description {\n            font-size: 16px;\n        }\n    }\n<\/style>\n\n<script>\n    \/\/ Script b\u00e1sico para intera\u00e7\u00f5es futuras, caso necess\u00e1rio.\n    \/\/ Atualmente o CSS lida com o hover, mantendo a performance ideal.\n    document.addEventListener('DOMContentLoaded', function() {\n        const btnProjetos = document.getElementById('btn-todos-projetos');\n\n        if(btnProjetos) {\n            btnProjetos.addEventListener('click', function(e) {\n                \/\/ Se o href for '#', previne o comportamento padr\u00e3o para n\u00e3o pular a tela\n                if(this.getAttribute('href') === '#') {\n                    e.preventDefault();\n                    console.log('https:\/\/nuovo.com.br\/novo\/port');\n                }\n            });\n        }\n    });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8d127fe e-flex e-con-boxed e-con e-parent\" data-id=\"8d127fe\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-daa7157 elementor-widget elementor-widget-shortcode\" data-id=\"daa7157\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">        <div id=\"nuovo-home-grid-69ea5fa003ff2\" class=\"nuovo-home-wrapper\">\n            <div class=\"nuovo-home-grid\">\n                                <article class=\"nuovo-card\">\n                    <div class=\"nuovo-thumb\">\n                        <a href=\"https:\/\/nuovo.com.br\/novo\/portfolio\/ozki\/\">\n                            <img decoding=\"async\" width=\"768\" height=\"384\" src=\"https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/04\/banner-ozki-2.2-jpg-768x384.webp\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"\" srcset=\"https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/04\/banner-ozki-2.2-jpg-768x384.webp 768w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/04\/banner-ozki-2.2-jpg-300x150.webp 300w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/04\/banner-ozki-2.2-jpg-1024x512.webp 1024w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/04\/banner-ozki-2.2-jpg-1536x768.webp 1536w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/04\/banner-ozki-2.2-jpg.webp 2000w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>                            <span class=\"btn-ver-case\">Ver case <span class=\"arrow\">\u2197<\/span><\/span>\n                        <\/a>\n                    <\/div>\n                    <div class=\"nuovo-content\">\n                        <div class=\"nuovo-tags\">\n                            <span class=\"nuovo-tag tag-primary\">Design de Produto<\/span>                        <\/div>\n                        <h3 class=\"nuovo-title\">\n                            <a href=\"https:\/\/nuovo.com.br\/novo\/portfolio\/ozki\/\">Ozki<\/a>\n                        <\/h3>\n                        <div class=\"nuovo-excerpt\">\n                            Para o desenvolvimento desse trabalho, nosso objetivo era transmitir a ess\u00eancia \u00fanica e os atributos excepcionais desse projeto...                        <\/div>\n                    <\/div>\n                <\/article>\n                                <article class=\"nuovo-card\">\n                    <div class=\"nuovo-thumb\">\n                        <a href=\"https:\/\/nuovo.com.br\/novo\/portfolio\/alambique-rein\/\">\n                            <img decoding=\"async\" width=\"768\" height=\"384\" src=\"https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2023\/05\/rein-00-768x384.jpg\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"\" srcset=\"https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2023\/05\/rein-00-768x384.jpg 768w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2023\/05\/rein-00-300x150.jpg 300w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2023\/05\/rein-00-1024x512.jpg 1024w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2023\/05\/rein-00-1536x768.jpg 1536w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2023\/05\/rein-00.jpg 2000w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>                            <span class=\"btn-ver-case\">Ver case <span class=\"arrow\">\u2197<\/span><\/span>\n                        <\/a>\n                    <\/div>\n                    <div class=\"nuovo-content\">\n                        <div class=\"nuovo-tags\">\n                            <span class=\"nuovo-tag tag-primary\">Cat\u00e1logo<\/span><span class=\"nuovo-tag tag-secondary\">Identidade Visual<\/span>                        <\/div>\n                        <h3 class=\"nuovo-title\">\n                            <a href=\"https:\/\/nuovo.com.br\/novo\/portfolio\/alambique-rein\/\">Alambique Rein<\/a>\n                        <\/h3>\n                        <div class=\"nuovo-excerpt\">\n                            Para o desenvolvimento desse trabalho, nosso objetivo era transmitir a ess\u00eancia \u00fanica e os atributos excepcionais desse projeto...                        <\/div>\n                    <\/div>\n                <\/article>\n                                <article class=\"nuovo-card\">\n                    <div class=\"nuovo-thumb\">\n                        <a href=\"https:\/\/nuovo.com.br\/novo\/portfolio\/jucil\/\">\n                            <img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"369\" src=\"https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/03\/banner-jucil-768x369.jpg\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"\" srcset=\"https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/03\/banner-jucil-768x369.jpg 768w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/03\/banner-jucil-300x144.jpg 300w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/03\/banner-jucil-1024x492.jpg 1024w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/03\/banner-jucil-1536x738.jpg 1536w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/03\/banner-jucil.jpg 1731w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>                            <span class=\"btn-ver-case\">Ver case <span class=\"arrow\">\u2197<\/span><\/span>\n                        <\/a>\n                    <\/div>\n                    <div class=\"nuovo-content\">\n                        <div class=\"nuovo-tags\">\n                            <span class=\"nuovo-tag tag-primary\">Embalagem<\/span>                        <\/div>\n                        <h3 class=\"nuovo-title\">\n                            <a href=\"https:\/\/nuovo.com.br\/novo\/portfolio\/jucil\/\">Jucil<\/a>\n                        <\/h3>\n                        <div class=\"nuovo-excerpt\">\n                            Para o desenvolvimento desse trabalho, nosso objetivo era transmitir a ess\u00eancia \u00fanica e os atributos excepcionais desse projeto...                        <\/div>\n                    <\/div>\n                <\/article>\n                                <article class=\"nuovo-card\">\n                    <div class=\"nuovo-thumb\">\n                        <a href=\"https:\/\/nuovo.com.br\/novo\/portfolio\/delicia-bolachas-caseiras\/\">\n                            <img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"384\" src=\"https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/03\/mockup-delicia-table-768x384.jpg\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"\" srcset=\"https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/03\/mockup-delicia-table-768x384.jpg 768w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/03\/mockup-delicia-table-300x150.jpg 300w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/03\/mockup-delicia-table-1024x512.jpg 1024w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/03\/mockup-delicia-table-1536x768.jpg 1536w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/03\/mockup-delicia-table.jpg 2000w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>                            <span class=\"btn-ver-case\">Ver case <span class=\"arrow\">\u2197<\/span><\/span>\n                        <\/a>\n                    <\/div>\n                    <div class=\"nuovo-content\">\n                        <div class=\"nuovo-tags\">\n                            <span class=\"nuovo-tag tag-primary\">Embalagem<\/span>                        <\/div>\n                        <h3 class=\"nuovo-title\">\n                            <a href=\"https:\/\/nuovo.com.br\/novo\/portfolio\/delicia-bolachas-caseiras\/\">Del\u00edcia Bolachas Caseiras<\/a>\n                        <\/h3>\n                        <div class=\"nuovo-excerpt\">\n                            Trabalho de design de embalagem para uma empresa de bolachas caseiras, que combina perfeitamente a ess\u00eancia artesanal e...                        <\/div>\n                    <\/div>\n                <\/article>\n                                <article class=\"nuovo-card\">\n                    <div class=\"nuovo-thumb\">\n                        <a href=\"https:\/\/nuovo.com.br\/novo\/portfolio\/residencias-lago-almeida\/\">\n                            <img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"512\" src=\"https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/02\/lago-almeida-1-768x512.jpg\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"\" srcset=\"https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/02\/lago-almeida-1-768x512.jpg 768w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/02\/lago-almeida-1-300x200.jpg 300w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/02\/lago-almeida-1-1024x683.jpg 1024w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/02\/lago-almeida-1-1536x1024.jpg 1536w, https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/02\/lago-almeida-1.jpg 1600w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>                            <span class=\"btn-ver-case\">Ver case <span class=\"arrow\">\u2197<\/span><\/span>\n                        <\/a>\n                    <\/div>\n                    <div class=\"nuovo-content\">\n                        <div class=\"nuovo-tags\">\n                            <span class=\"nuovo-tag tag-primary\">Cat\u00e1logo<\/span><span class=\"nuovo-tag tag-secondary\">Editora\u00e7\u00e3o<\/span>                        <\/div>\n                        <h3 class=\"nuovo-title\">\n                            <a href=\"https:\/\/nuovo.com.br\/novo\/portfolio\/residencias-lago-almeida\/\">Resid\u00eancias Lago Almeida<\/a>\n                        <\/h3>\n                        <div class=\"nuovo-excerpt\">\n                            Para o desenvolvimento desse trabalho, nosso objetivo era transmitir a ess\u00eancia \u00fanica e os atributos excepcionais desse projeto...                        <\/div>\n                    <\/div>\n                <\/article>\n                            <\/div>\n        <\/div>\n\n        <style>\n            :root { --nuovo-green: #23b099; --nuovo-blue: #0b2574; --nuovo-title-color: #524d4b; --nuovo-text-color: #666666; --nuovo-font: 'Roboto', sans-serif; }\n            .nuovo-home-wrapper { font-family: var(--nuovo-font); width: 100%; margin: 0 auto; padding: 20px 0; }\n            .nuovo-home-wrapper * { box-sizing: border-box; }\n            .nuovo-home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; margin-bottom: 50px; }\n            .nuovo-card { display: flex; flex-direction: column; }\n            .nuovo-thumb { position: relative; border-radius: 12px; overflow: hidden; background: #eee; aspect-ratio: 4 \/ 3; width: 100%; }\n            .nuovo-thumb a { display: block; height: 100%; width: 100%; }\n            .nuovo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }\n            .nuovo-thumb:hover img { transform: scale(1.05); }\n            .btn-ver-case { position: absolute; bottom: 20px; left: 20px; background: #fff; color: #000; padding: 8px 18px; border-radius: 30px; font-size: 14px; font-weight: 600; box-shadow: 0 4px 15px rgba(0,0,0,0.15); opacity: 0; transform: translateY(10px); transition: all 0.3s ease; display: flex; align-items: center; gap: 6px; z-index: 2; }\n            .nuovo-thumb:hover .btn-ver-case { opacity: 1; transform: translateY(0); }\n            .btn-ver-case:hover { color: var(--nuovo-blue); }\n            .nuovo-content { padding-top: 20px; display: flex; flex-direction: column; flex-grow: 1; }\n            .nuovo-tags { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }\n            .nuovo-tag { padding: 6px 14px; border-radius: 4px; font-size: 13px; font-weight: 500; }\n            .tag-primary { background: #f0f0f0; color: #555; }\n            .tag-secondary { background: #fff0eb; color: #d5653c; }\n            .nuovo-title { margin: 0 0 12px 0; font-size: 24px; line-height: 1.3; font-weight: 700; }\n            .nuovo-title a { color: var(--nuovo-title-color); text-decoration: none; transition: color 0.3s ease; }\n            .nuovo-title a:hover { color: var(--nuovo-green); }\n            .nuovo-excerpt { font-size: 16px; color: var(--nuovo-text-color); line-height: 1.6; margin: 0; font-weight: 400; }\n            @media (max-width: 1024px) { .nuovo-home-grid { grid-template-columns: repeat(2, 1fr); } }\n            @media (max-width: 768px) { .nuovo-home-grid { grid-template-columns: 1fr; } .nuovo-thumb { aspect-ratio: 16 \/ 9; } }\n        <\/style>\n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2b0a8bc e-con-full e-flex e-con e-parent\" data-id=\"2b0a8bc\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-84c5328 elementor-widget elementor-widget-html\" data-id=\"84c5328\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>Processo<\/title>\n\n  <!-- Fonte Roboto -->\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n\n  <style>\n    :root{\n      --font: \"Roboto\", system-ui, -apple-system, \"Segoe UI\", Arial, sans-serif;\n\n      --container: 1200px;\n      --pad-x: 5%;\n\n      --text: 16px;\n      --lh: 1.6;\n\n      --h1: clamp(2.1rem, 3.2vw, 2.8rem);\n      --h2: clamp(1.8rem, 2.6vw, 2.4rem);\n      --h3: 1.15rem;\n\n      --muted: 0.98rem;\n\n      --accent: #ff9900;\n\n      --dark-bg: #1a1a1a;\n      --dark-border: #333;\n      --dark-text: #fff;\n      --dark-muted: #a9a9a9;\n\n      --page-bg: #f8f8f8;\n\n      \/* \u2705 Depoimentos: fundo branco *\/\n      --testimonials-bg: #ffffff;\n      --light-text: #1a1a1a;\n      --light-muted: #666;\n      --light-border: #e9e9e9;\n    }\n\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html { font-size: var(--text); }\n    body {\n      font-family: var(--font);\n      line-height: var(--lh);\n      background: var(--page-bg);\n      color: var(--light-text);\n    }\n\n    .container {\n      max-width: var(--container);\n      margin: 0 auto;\n      padding: 0 var(--pad-x);\n    }\n\n    .eyebrow {\n      text-transform: uppercase;\n      letter-spacing: 2px;\n      font-size: 0.8rem;\n      font-weight: 500;\n      opacity: 0.85;\n    }\n\n    \/* =========================\n       SE\u00c7\u00c3O: COMO FUNCIONA\n       ========================= *\/\n    .process-section{\n      background: var(--dark-bg);\n      color: var(--dark-text);\n      padding: clamp(72px, 7vw, 110px) 0;\n    }\n\n    .process-label{ color: #8d8d8d; margin-bottom: 12px; }\n    .process-title{\n      font-size: var(--h1);\n      font-weight: 300;\n      margin-bottom: 14px;\n      letter-spacing: -0.02em;\n    }\n    .process-description{\n      font-size: var(--muted);\n      color: var(--dark-muted);\n      max-width: 62ch;\n      margin-bottom: clamp(42px, 4vw, 64px);\n      font-weight: 400;\n    }\n\n    .steps-grid{\n      display: grid;\n      grid-template-columns: repeat(5, 1fr);\n      gap: 42px;\n      align-items: start;\n    }\n\n    .step-item{\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .icon-circle{\n      width: 56px;\n      height: 56px;\n      border-radius: 50%;\n      background: #242424;\n      border: 1px solid #3a3a3a;\n      display: grid;\n      place-items: center;\n      margin-bottom: 22px;\n    }\n    .icon-circle svg{\n      width: 22px;\n      height: 22px;\n      stroke: var(--accent);\n      fill: none;\n      stroke-width: 2;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n    }\n\n    .step-number{\n      color: var(--accent);\n      font-size: 0.72rem;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      margin-bottom: 8px;\n    }\n\n    .step-title{\n      font-size: var(--h3);\n      font-weight: 500;\n      margin-bottom: 12px;\n      padding-bottom: 14px;\n      border-bottom: 1px solid var(--dark-border);\n      letter-spacing: -0.01em;\n    }\n\n    .step-desc{\n      font-size: 0.96rem;\n      color: #b0b0b0;\n      font-weight: 300;\n      line-height: 1.7;\n      max-width: 34ch;\n    }\n\n    \/* =========================\n       SE\u00c7\u00c3O: DEPOIMENTOS\n       ========================= *\/\n    .testimonials-section{\n      background: var(--testimonials-bg); \/* \u2705 branco *\/\n      color: var(--light-text);\n      padding: clamp(72px, 7vw, 110px) 0;\n      text-align: center;\n      border-top: 1px solid rgba(0,0,0,0.05);\n    }\n\n    .testi-label{ color: #7a7a7a; margin-bottom: 12px; }\n    .testi-heading{\n      font-size: var(--h2);\n      font-weight: 400;\n      margin-bottom: 40px;\n      letter-spacing: -0.02em;\n    }\n\n    .quote-icon{\n      width: 64px;\n      height: 64px;\n      fill: #000000; \/* \u2705 Aspas pretas *\/\n      margin: 0 auto 24px;\n      opacity: 0.15;\n    }\n\n    .testimonial-slider{\n      position: relative;\n      max-width: 800px;\n      margin: 0 auto;\n      min-height: 220px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .testimonial-slide{\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      opacity: 0;\n      visibility: hidden;\n      transition: opacity 0.4s ease, visibility 0.4s ease;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n    .testimonial-slide.active{\n      opacity: 1;\n      visibility: visible;\n      position: relative;\n      animation: fadeEffect 0.6s;\n    }\n\n    .testi-text{\n      font-size: clamp(1.1rem, 2vw, 1.35rem);\n      line-height: 1.5;\n      font-weight: 300;\n      color: var(--light-text);\n      margin-bottom: 24px;\n      font-style: italic;\n    }\n\n    .testi-author{\n      font-weight: 700;\n      font-size: 1rem;\n      margin-bottom: 4px;\n    }\n    .testi-role{\n      font-size: 0.85rem;\n      color: var(--light-muted);\n      text-transform: uppercase;\n      letter-spacing: 1px;\n    }\n\n    .slider-controls{\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 24px;\n      margin-top: 40px;\n    }\n\n    .nav-btn{\n      background: transparent;\n      border: 1px solid var(--light-border);\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      display: grid;\n      place-items: center;\n      cursor: pointer;\n      transition: border-color 0.2s ease, background-color 0.2s ease;\n      color: #444;\n    }\n    \/* Efeito hover espec\u00edfico apenas para bot\u00f5es de navega\u00e7\u00e3o *\/\n    .nav-btn:hover{\n      border-color: #cfcfcf;\n      background: #ffffff;\n      transform: translateY(-1px);\n      color: #111;\n    }\n\n    .dots-container{ display: flex; gap: 8px; }\n    .dot{\n      width: 8px;\n      height: 8px;\n      background: rgba(0,0,0,0.18);\n      border-radius: 999px;\n      cursor: pointer;\n      transition: width 0.2s ease, background-color 0.2s ease;\n    }\n    .dot.active{\n      background: var(--accent);\n      width: 24px;\n      border-radius: 6px;\n    }\n    \/* Efeito hover espec\u00edfico apenas para os dots *\/\n    .dot:hover:not(.active){\n      background: rgba(0,0,0,0.3);\n    }\n\n    @keyframes fadeEffect {\n      from { opacity: 0; transform: translateY(8px); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n\n    @media (max-width: 1024px){\n      .steps-grid{ grid-template-columns: repeat(3, 1fr); }\n      .step-desc{ max-width: none; }\n    }\n\n    @media (max-width: 768px){\n      .steps-grid{ grid-template-columns: 1fr; gap: 28px; }\n      .icon-circle{ margin-bottom: 14px; }\n      .nav-btn{ width: 42px; height: 42px; }\n      .quote-icon{ width: 50px; height: 50px; }\n      .testimonial-slider{ min-height: 260px; }\n    }\n  <\/style>\n<\/head>\n\n<body>\n\n  <!-- SE\u00c7\u00c3O 1: COMO FUNCIONA -->\n  <section class=\"process-section\">\n    <div class=\"container\">\n      <div class=\"process-label eyebrow\">Processo<\/div>\n      <h1 class=\"process-title\">Como funciona<\/h1>\n      <p class=\"process-description\">\n        Um processo estruturado que garante resultados consistentes, do diagn\u00f3stico \u00e0 ativa\u00e7\u00e3o.\n      <\/p>\n\n      <div class=\"steps-grid\">\n        <div class=\"step-item\">\n          <div class=\"icon-circle\">\n            <svg viewBox=\"0 0 24 24\">\n              <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line>\n            <\/svg>\n          <\/div>\n          <div class=\"step-number\">Passo 01<\/div>\n          <h3 class=\"step-title\">Imers\u00e3o e Empatia<\/h3>\n          <p class=\"step-desc\">Briefing para\nconhecer os desafios\nespec\u00edficos de cada cliente<\/p>\n        <\/div>\n\n        <div class=\"step-item\">\n          <div class=\"icon-circle\">\n            <svg viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n              <polygon points=\"16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\"><\/polygon>\n            <\/svg>\n          <\/div>\n          <div class=\"step-number\">Passo 02<\/div>\n          <h3 class=\"step-title\">Estrat\u00e9gia<\/h3>\n          <p class=\"step-desc\">Entender seu\nposicionamento\nestrat\u00e9gico atual<\/p>\n        <\/div>\n\n        <div class=\"step-item\">\n          <div class=\"icon-circle\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M9 18h6\"><\/path>\n              <path d=\"M10 22h4\"><\/path>\n              <path d=\"M12 2a7 7 0 0 0-7 7c0 2.38 1.19 4.47 3 5.74V17a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.26C17.81 13.47 19 11.38 19 9a7 7 0 0 0-7-7z\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"step-number\">Passo 03<\/div>\n          <h3 class=\"step-title\">Cria\u00e7\u00e3o<\/h3>\n          <p class=\"step-desc\">Propor um novo\ncaminho estrat\u00e9gico<\/p>\n        <\/div>\n\n        <div class=\"step-item\">\n          <div class=\"icon-circle\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"step-number\">Passo 04<\/div>\n          <h3 class=\"step-title\">Apresenta\u00e7\u00e3o<\/h3>\n          <p class=\"step-desc\">Loren Ipsun Loren Ipsun Loren Ipsun<\/p>\n        <\/div>\n\n        <div class=\"step-item\">\n          <div class=\"icon-circle\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\"><\/path>\n              <path d=\"M12 15l-3-3a22 22 0 0 1 2-9.56a1.55 1.55 0 0 1 2.25 2.24c2.4.52 5.48 1 9.56 2a22 22 0 0 1-3 3c-1.35.52-2.72 1-4.06 1.53\"><\/path>\n            <\/svg>\n          <\/div>\n          <div class=\"step-number\">Passo 05<\/div>\n          <h3 class=\"step-title\">Conclus\u00e3o<\/h3>\n          <p class=\"step-desc\">Avalia\u00e7\u00e3o, ajustes,<br>\narte-final e entrega<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-613f274 e-con-full e-flex e-con e-parent\" data-id=\"613f274\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-754ad4c elementor-widget elementor-widget-html\" data-id=\"754ad4c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>Depoimentos<\/title>\n\n  <!-- Fonte Roboto -->\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n\n  <style>\n    :root{\n      --font: \"Roboto\", system-ui, -apple-system, \"Segoe UI\", Arial, sans-serif;\n\n      --container: 1200px;\n      --pad-x: 5%;\n\n      --text: 14px;\n      --lh: 1.6;\n\n      --h1: clamp(2.1rem, 3.2vw, 2.8rem);\n      --h2: clamp(1.8rem, 2.6vw, 2.4rem);\n      --h3: 1.15rem;\n\n      --muted: 0.98rem;\n\n      --accent: #ff9900;\n\n      --dark-bg: #1a1a1a;\n      --dark-border: #333;\n      --dark-text: #fff;\n      --dark-muted: #a9a9a9;\n\n      --page-bg: #f8f8f8;\n\n      \/* \u2705 Depoimentos: fundo branco *\/\n      --testimonials-bg: #ffffff;\n      --light-text: #1a1a1a;\n      --light-muted: #666;\n      --light-border: #e9e9e9;\n    }\n\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html { font-size: var(--text); }\n    body {\n      font-family: var(--font);\n      line-height: var(--lh);\n      background: var(--page-bg);\n      color: var(--light-text);\n    }\n\n    .container {\n      max-width: var(--container);\n      margin: 0 auto;\n      padding: 0 var(--pad-x);\n    }\n\n    .eyebrow {\n      text-transform: uppercase;\n      letter-spacing: 2px;\n      font-size: 0.8rem;\n      font-weight: 500;\n      opacity: 0.85;\n    }\n\n    \/* =========================\n       SE\u00c7\u00c3O: COMO FUNCIONA\n       ========================= *\/\n    .process-section{\n      background: var(--dark-bg);\n      color: var(--dark-text);\n      padding: clamp(72px, 7vw, 110px) 0;\n    }\n\n    .process-label{ color: #8d8d8d; margin-bottom: 12px; }\n    .process-title{\n      font-size: var(--h1);\n      font-weight: 400;\n      margin-bottom: 14px;\n      letter-spacing: -0.02em;\n    }\n    .process-description{\n      font-size: var(--muted);\n      color: var(--dark-muted);\n      max-width: 62ch;\n      margin-bottom: clamp(42px, 4vw, 64px);\n      font-weight: 300;\n    }\n\n    .steps-grid{\n      display: grid;\n      grid-template-columns: repeat(5, 1fr);\n      gap: 42px;\n      align-items: start;\n    }\n\n    .step-item{\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .icon-circle{\n      width: 56px;\n      height: 56px;\n      border-radius: 50%;\n      background: #242424;\n      border: 1px solid #3a3a3a;\n      display: grid;\n      place-items: center;\n      margin-bottom: 22px;\n    }\n    .icon-circle svg{\n      width: 22px;\n      height: 22px;\n      stroke: var(--accent);\n      fill: none;\n      stroke-width: 2;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n    }\n\n    .step-number{\n      color: var(--accent);\n      font-size: 0.72rem;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      margin-bottom: 8px;\n    }\n\n    .step-title{\n      font-size: var(--h3);\n      font-weight: 500;\n      margin-bottom: 12px;\n      padding-bottom: 14px;\n      border-bottom: 1px solid var(--dark-border);\n      letter-spacing: -0.01em;\n    }\n\n    .step-desc{\n      font-size: 0.96rem;\n      color: #b0b0b0;\n      font-weight: 300;\n      line-height: 1.7;\n      max-width: 34ch;\n    }\n\n    \/* =========================\n       SE\u00c7\u00c3O: DEPOIMENTOS\n       ========================= *\/\n    .testimonials-section{\n      background: var(--testimonials-bg); \/* \u2705 branco *\/\n      color: var(--light-text);\n      padding: clamp(72px, 7vw, 110px) 0;\n      text-align: center;\n      border-top: 1px solid rgba(0,0,0,0.05);\n    }\n\n    .testi-label{ color: #7a7a7a; margin-bottom: 12px; }\n    .testi-heading{\n      font-size: var(--h2);\n      font-weight: 400;\n      margin-bottom: 40px;\n      letter-spacing: -0.02em;\n    }\n\n    .quote-icon{\n      width: 64px;\n      height: 64px;\n      fill: #000000; \/* \u2705 Aspas pretas *\/\n      margin: 0 auto 24px;\n      opacity: 0.15;\n    }\n\n    .testimonial-slider{\n      position: relative;\n      max-width: 800px;\n      margin: 0 auto;\n      min-height: 220px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .testimonial-slide{\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      opacity: 0;\n      visibility: hidden;\n      transition: opacity 0.4s ease, visibility 0.4s ease;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n    .testimonial-slide.active{\n      opacity: 1;\n      visibility: visible;\n      position: relative;\n      animation: fadeEffect 0.6s;\n    }\n\n    .testi-text{\n      font-size: clamp(1.1rem, 2vw, 1.35rem);\n      line-height: 1.5;\n      font-weight: 300;\n      color: var(--light-text);\n      margin-bottom: 24px;\n      font-style: italic;\n    }\n\n    .testi-author{\n      font-weight: 700;\n      font-size: 1rem;\n      margin-bottom: 4px;\n    }\n    .testi-role{\n      font-size: 0.85rem;\n      color: var(--light-muted);\n      text-transform: uppercase;\n      letter-spacing: 1px;\n    }\n\n    .slider-controls{\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 24px;\n      margin-top: 40px;\n    }\n\n    .nav-btn{\n      background: transparent;\n      border: 1px solid var(--light-border);\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      display: grid;\n      place-items: center;\n      cursor: pointer;\n      transition: border-color 0.2s ease, background-color 0.2s ease;\n      color: #444;\n    }\n    \/* Efeito hover espec\u00edfico apenas para bot\u00f5es de navega\u00e7\u00e3o *\/\n    .nav-btn:hover{\n      border-color: #cfcfcf;\n      background: #ffffff;\n      transform: translateY(-1px);\n      color: #111;\n    }\n\n    .dots-container{ display: flex; gap: 8px; }\n    .dot{\n      width: 8px;\n      height: 8px;\n      background: rgba(0,0,0,0.18);\n      border-radius: 999px;\n      cursor: pointer;\n      transition: width 0.2s ease, background-color 0.2s ease;\n    }\n    .dot.active{\n      background: var(--accent);\n      width: 24px;\n      border-radius: 6px;\n    }\n    \/* Efeito hover espec\u00edfico apenas para os dots *\/\n    .dot:hover:not(.active){\n      background: rgba(0,0,0,0.3);\n    }\n\n    @keyframes fadeEffect {\n      from { opacity: 0; transform: translateY(8px); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n\n    @media (max-width: 1024px){\n      .steps-grid{ grid-template-columns: repeat(3, 1fr); }\n      .step-desc{ max-width: none; }\n    }\n\n    @media (max-width: 768px){\n      .steps-grid{ grid-template-columns: 1fr; gap: 28px; }\n      .icon-circle{ margin-bottom: 14px; }\n      .nav-btn{ width: 42px; height: 42px; }\n      .quote-icon{ width: 50px; height: 50px; }\n      .testimonial-slider{ min-height: 260px; }\n    }\n  <\/style>\n<\/head>\n\n<body>\n\n  <!-- SE\u00c7\u00c3O 2: DEPOIMENTOS -->\n  <section class=\"testimonials-section\">\n    <div class=\"container\">\n      <span class=\"testi-label eyebrow\">Depoimentos<\/span>\n      <h2 class=\"testi-heading\">O que nossos clientes dizem<\/h2>\n\n      <svg class=\"quote-icon\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n        <path d=\"M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z\"\/>\n      <\/svg>\n\n      <div class=\"testimonial-slider\" id=\"testimonialSlider\">\n        <div class=\"testimonial-slide active\">\n          <p class=\"testi-text\">\n            \"A Nuovo Design sempre nos apresenta novidades e nos desafia a\nimplementar mudan\u00e7as. O alinhamento de pensamento e de\ndesenvolvimento existente entre o Est\u00fadio e a nossa Empresa \u00e9 algo\nmuito importante para n\u00f3s. Os resultados positivos e a forma de\ndesenvolvimento dos produtos, flex\u00edvel e alinhada ao processo de\nprodu\u00e7\u00e3o, t\u00eam sido essenciais para a continuidade da parceria, iniciada\nem 2016. A soma de todos esses benef\u00edcios tem feito o sucesso at\u00e9\nent\u00e3o. E somos gratos por isso!\u201d\n          <\/p>\n          <div class=\"testi-author\">VANDERLEI L. CARDOSO<\/div>\n          <div class=\"testi-role\">Ozki M\u00f3veis - \nCaxias do Sul<\/div>\n        <\/div>\n\n        <div class=\"testimonial-slide\">\n          <p class=\"testi-text\">\n            \u201cA Nuovo superou todas as minhas expectativas! Desde o primeiro\ncontato, eles entenderam exatamente o que eu queria transmitir com\nmeu site e conseguiram traduzir minha ess\u00eancia de forma leve, moderna\ne profissional. Fiquei realmente muito feliz com o resultado final. O site\nficou lindo, funcional e com a minha cara! A equipe foi atenciosa, r\u00e1pida\ne muito comprometida em cada detalhe. Sem d\u00favida, sempre que eu\npuder, vou indicar o trabalho deles, porque \u00e9 dif\u00edcil encontrar uma\nempresa t\u00e3o completa e dedicada. Obrigada, Nuovo, por entregarem algo\nt\u00e3o al\u00e9m do que eu esperava\u2026\u201d\n          <\/p>\n          <div class=\"testi-author\">TALITA MAGALH\u00c3ES<\/div>\n          <div class=\"testi-role\">Personal Trainer<\/div>\n        <\/div>\n\n        <div class=\"testimonial-slide\">\n          <p class=\"testi-text\">\n            \u201cBem, a primeira palavra a ser dita \u00e9 gratid\u00e3o. Gratid\u00e3o a Daniela e a toda\nturma da Nuovo. Trabalho impec\u00e1vel, profissionalismo e uma entrega\nsem igual. Estava perdido, apenas com uma ideia na cabe\u00e7a e junto com\nDani, fomos construindo um caminho. Contratei os servi\u00e7os de naming e\nidentidade visual. Mesmo sem um norte muito claro, Daniela conseguiu\ncaptar a ess\u00eancia do que eu queria e a turma desenvolveu um trabalho\nlind\u00edssimo. Nome e ID fortes, com personalidade, estou absolutamente\nsatisfeito com trabalho executado. Finalizo como comecei, gratid\u00e3o.\u201d\n          <\/p>\n          <div class=\"testi-author\">L\u00c9O LIMA<\/div>\n          <div class=\"testi-role\">Canavial Cacha\u00e7aria -  Pernambuco<\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"slider-controls\">\n        <button class=\"nav-btn\" onclick=\"changeSlide(-1)\" aria-label=\"Anterior\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n               stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <polyline points=\"15 18 9 12 15 6\"><\/polyline>\n          <\/svg>\n        <\/button>\n\n        <div class=\"dots-container\" id=\"dotsContainer\"><\/div>\n\n        <button class=\"nav-btn\" onclick=\"changeSlide(1)\" aria-label=\"Pr\u00f3ximo\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n               stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <polyline points=\"9 18 15 12 9 6\"><\/polyline>\n          <\/svg>\n        <\/button>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <script>\n    let currentSlide = 0;\n    const slides = document.querySelectorAll('.testimonial-slide');\n    const dotsContainer = document.getElementById('dotsContainer');\n\n    slides.forEach((_, index) => {\n      const dot = document.createElement('div');\n      dot.classList.add('dot');\n      if (index === 0) dot.classList.add('active');\n      dot.onclick = () => goToSlide(index);\n      dotsContainer.appendChild(dot);\n    });\n\n    const dots = document.querySelectorAll('.dot');\n\n    function showSlide(n) {\n      slides.forEach(slide => slide.classList.remove('active'));\n      dots.forEach(dot => dot.classList.remove('active'));\n\n      if (n >= slides.length) currentSlide = 0;\n      else if (n < 0) currentSlide = slides.length - 1;\n      else currentSlide = n;\n\n      slides[currentSlide].classList.add('active');\n      dots[currentSlide].classList.add('active');\n    }\n\n    function changeSlide(delta) {\n      showSlide(currentSlide + delta);\n    }\n\n    function goToSlide(n) {\n      showSlide(n);\n    }\n  <\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4f01a74 e-con-full e-flex e-con e-parent\" data-id=\"4f01a74\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-63094fa elementor-widget elementor-widget-html\" data-id=\"63094fa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!doctype html>\n<html lang=\"pt-BR\">\n<head>\n  <meta charset=\"utf-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" \/>\n  <title>FAQ<\/title>\n\n  <!-- Roboto -->\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n\n  <style>\n    \/* =========================\n       FAQ (SEM magenta)\n       ========================= *\/\n    .faq, .faq * { box-sizing: border-box; }\n\n    .faq{\n      --bg: #f9f9f9;\n      --text: #111111;\n      --muted: #7b7b7b;\n      --border: #ededed;\n      --surface: #ffffff;\n\n      \/* Estados neutros (SEM magenta) *\/\n      --hover-bg: #f6f6f6;\n      --open-bg: #fafafa;        \/* fundo aberto: cinza muito claro *\/\n      --open-border: #e3e3e3;\n      --open-text: #1c1c1c;      \/* texto aberto: preto normal *\/\n\n      \/* Foco em azul (sem magenta) *\/\n      --focus: rgba(11, 37, 116, 0.25);\n\n      font-family: \"Roboto\", system-ui, -apple-system, \"Segoe UI\", Arial, sans-serif;\n      width: 100%;\n      background: var(--bg);\n      color: var(--text);\n      padding: clamp(56px, 6vw, 96px) 0;\n    }\n\n    .faq__container{\n      max-width: 1200px;\n      margin: 0 auto;\n      padding: 0 5%;\n    }\n\n    .faq__header{\n      text-align: center;\n      margin-bottom: 38px;\n    }\n\n    .faq__eyebrow{\n      margin: 0 0 14px 0;\n      font-size: 0.78rem;\n      letter-spacing: 0.42em;\n      text-transform: uppercase;\n      color: var(--muted);\n      font-weight: 500;\n    }\n\n    .faq__title{\n      margin: 0 0 14px 0;\n      font-size: clamp(2rem, 3vw, 2.75rem);\n      line-height: 1.12;\n      font-weight: 300;\n      letter-spacing: -0.02em;\n    }\n\n    .faq__subtitle{\n      margin: 0 auto;\n      max-width: 62ch;\n      color: var(--muted);\n      font-weight: 300;\n      font-size: 1rem;\n      line-height: 1.65;\n    }\n\n    .faq__list{\n      list-style: none;\n      margin: 0 auto;\n      padding: 0;\n      width: min(860px, 100%);\n      display: grid;\n      gap: 14px;\n    }\n\n    .faq__item{\n      border: 1px solid var(--border);\n      border-radius: 12px;\n      background: var(--surface);\n      overflow: hidden;\n      transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;\n    }\n\n    \/* Hover neutro (SEM magenta) *\/\n    .faq__item:hover{\n      background: var(--hover-bg);\n      border-color: #e6e6e6;\n      box-shadow: 0 10px 22px rgba(0,0,0,0.04);\n    }\n\n    .faq__q{\n      width: 100%;\n      border: 0;\n      background: transparent;\n      cursor: pointer;\n\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-items: center;\n      gap: 14px;\n\n      padding: 22px 22px;\n      text-align: left;\n      font: inherit;\n      color: inherit;\n    }\n\n    .faq__question{\n      font-size: 1.02rem;\n      line-height: 1.35;\n      font-weight: 500;\n      color: #1c1c1c;\n    }\n\n    .faq__plus{\n      width: 34px;\n      height: 34px;\n      border-radius: 999px;\n      background: #f1f1f1;\n      display: grid;\n      place-items: center;\n      transition: transform 160ms ease, background-color 160ms ease;\n      flex: 0 0 auto;\n    }\n\n    .faq__plus svg{\n      width: 16px;\n      height: 16px;\n      stroke: #111;\n      stroke-width: 2.2;\n      stroke-linecap: round;\n    }\n\n    .faq__q:focus-visible{\n      outline: 3px solid var(--focus);\n      outline-offset: 3px;\n      border-radius: 10px;\n    }\n\n    .faq__a{\n      display: grid;\n      grid-template-rows: 0fr;\n      transition: grid-template-rows 220ms ease;\n    }\n\n    .faq__aInner{\n      overflow: hidden;\n      border-top: 1px solid rgba(0,0,0,0.06);\n      padding: 0 22px;\n      background: transparent;\n    }\n\n    .faq__answer{\n      margin: 0;\n      padding: 14px 0 20px 0;\n      color: #666;\n      font-weight: 300;\n      font-size: 0.98rem;\n      line-height: 1.75;\n    }\n\n    \/* ABERTO (neutro, SEM magenta) *\/\n    .faq__item[data-open=\"true\"]{\n      background: var(--open-bg);         \/* cinza muito claro *\/\n      border-color: var(--open-border);\n      box-shadow: 0 10px 22px rgba(0,0,0,0.04);\n    }\n\n    .faq__item[data-open=\"true\"] .faq__question{\n      color: var(--open-text);            \/* preto normal *\/\n      font-weight: 500;                   \/* sem negrito extra *\/\n    }\n\n    .faq__item[data-open=\"true\"] .faq__a{\n      grid-template-rows: 1fr;\n    }\n\n    .faq__item[data-open=\"true\"] .faq__plus{\n      transform: rotate(45deg);           \/* vira \"x\" *\/\n      background: #ededed;                \/* cinza neutro *\/\n    }\n\n    .faq__item[data-open=\"true\"] .faq__answer{\n      color: #666;                        \/* texto resposta: cinza escuro *\/\n    }\n\n    @media (max-width: 520px){\n      .faq__q{ padding: 18px 16px; }\n      .faq__aInner{ padding: 0 16px; }\n      .faq__question{ font-size: 1rem; }\n      .faq__plus{ width: 32px; height: 32px; }\n    }\n  <\/style>\n<\/head>\n\n<body>\n  <section class=\"faq\" aria-label=\"Perguntas frequentes\">\n    <div class=\"faq__container\">\n      <header class=\"faq__header\">\n        <p class=\"faq__eyebrow\"><strong>FAQ<\/strong><\/p>\n        <h2 class=\"faq__title\">Perguntas frequentes<\/h2>\n        <p class=\"faq__subtitle\">D\u00favidas comuns sobre nossos servi\u00e7os e processo de trabalho.<\/p>\n      <\/header>\n\n      <ul class=\"faq__list\" id=\"faqList\"><\/ul>\n    <\/div>\n  <\/section>\n\n  <script>\n    const FAQ_DATA = [\n      {\n        q: \"Qual \u00e9 o investimento t\u00edpico para um projeto de branding?\",\n        a: \"O investimento varia conforme escopo, prazos e entreg\u00e1veis. Ap\u00f3s uma conversa r\u00e1pida de diagn\u00f3stico, enviamos uma proposta com etapas, cronograma e valores.\"\n      },\n      {\n        q: \"Qual o prazo m\u00e9dio de um projeto?\",\n        a: \"Em m\u00e9dia, um projeto completo leva de 4 a 8 semanas, dependendo da complexidade e do volume de aprova\u00e7\u00f5es em cada etapa.\"\n      },\n      {\n        q: \"Voc\u00eas atendem empresas pequenas ou startups?\",\n        a: \"Sim. Adaptamos o escopo ao momento do neg\u00f3cio e priorizamos entregas que garantem clareza e consist\u00eancia de marca.\"\n      },\n      {\n        q: \"O que preciso ter pronto para come\u00e7ar um projeto?\",\n        a: \"Ajuda ter objetivos, refer\u00eancias e informa\u00e7\u00f5es sobre p\u00fablico e concorrentes. Se voc\u00ea n\u00e3o tiver isso pronto, a etapa de diagn\u00f3stico cobre tudo com voc\u00ea.\"\n      },\n      {\n        q: \"Voc\u00eas fazem s\u00f3 logo?\",\n        a: \"Fazemos, mas recomendamos pelo menos um mini-sistema (cores, tipografia e aplica\u00e7\u00f5es b\u00e1sicas) para manter consist\u00eancia no uso.\"\n      },\n      {\n        q: \"Como \u00e9 o processo de aprova\u00e7\u00e3o?\",\n        a: \"Trabalhamos com rodadas de revis\u00e3o por etapa. Voc\u00ea aprova a dire\u00e7\u00e3o antes de avan\u00e7armos, evitando retrabalho e mantendo o projeto organizado.\"\n      },\n      {\n        q: \"Voc\u00eas fazem gest\u00e3o de redes sociais?\",\n        a: \"Podemos apoiar com direcionamento e templates. A gest\u00e3o cont\u00ednua pode ser combinada \u00e0 parte conforme necessidade.\"\n      },\n      {\n        q: \"Trabalham com empresas de outros estados ou pa\u00edses?\",\n        a: \"Sim. O processo funciona muito bem de forma remota, com reuni\u00f5es online e entregas organizadas por etapa.\"\n      }\n    ];\n\n    const faqList = document.getElementById(\"faqList\");\n\n    function renderFAQ(items){\n      faqList.innerHTML = items.map((item, i) => `\n        <li class=\"faq__item\" data-open=\"false\">\n          <button class=\"faq__q\" type=\"button\" aria-expanded=\"false\" aria-controls=\"faq-a-${i}\">\n            <span class=\"faq__question\">${item.q}<\/span>\n            <span class=\"faq__plus\" aria-hidden=\"true\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M12 5v14\"><\/path>\n                <path d=\"M5 12h14\"><\/path>\n              <\/svg>\n            <\/span>\n          <\/button>\n\n          <div class=\"faq__a\" id=\"faq-a-${i}\" role=\"region\" aria-label=\"Resposta\">\n            <div class=\"faq__aInner\">\n              <p class=\"faq__answer\">${item.a}<\/p>\n            <\/div>\n          <\/div>\n        <\/li>\n      `).join(\"\");\n    }\n\n    function closeAll(except = null){\n      faqList.querySelectorAll(\".faq__item\").forEach(li => {\n        if (except && li === except) return;\n        li.dataset.open = \"false\";\n        li.querySelector(\".faq__q\").setAttribute(\"aria-expanded\", \"false\");\n      });\n    }\n\n    faqList.addEventListener(\"click\", (e) => {\n      const btn = e.target.closest(\".faq__q\");\n      if (!btn) return;\n\n      const item = btn.closest(\".faq__item\");\n      const isOpen = item.dataset.open === \"true\";\n\n      closeAll(item);\n\n      item.dataset.open = String(!isOpen);\n      btn.setAttribute(\"aria-expanded\", String(!isOpen));\n    });\n\n    renderFAQ(FAQ_DATA);\n  <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-aa21b11 e-con-full e-flex e-con e-parent\" data-id=\"aa21b11\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d13da5e elementor-widget elementor-widget-html\" data-id=\"d13da5e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"pt-br\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Nuovo - Crescer Juntos<\/title>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n    <style>\n        \/* Estilos Globais *\/\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n            font-family: 'Roboto', sans-serif;\n        }\n\n        body {\n            background-color: #f8f8f8;\n            color: #333;\n            line-height: 1.6;\n        }\n\n        .container {\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 0 20px;\n        }\n\n        \/* Se\u00e7\u00e3o \"Vamos crescer juntos?\" *\/\n        .crescer-juntos {\n            background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), \n                        url('caminho-para-imagem-de-fundo.jpg') center\/cover no-repeat;\n            padding: 100px 20px;\n            text-align: center;\n            color: #ffffff;\n        }\n\n        .crescer-juntos .titulo {\n            font-size: 3.5rem;\n            font-weight: 300;\n            margin-bottom: 20px;\n            line-height: 1.2;\n        }\n\n        .crescer-juntos .destaque {\n            color: #e89d4f; \/* Cor laranja para \"juntos?\" *\/\n            font-style: italic;\n        }\n\n        .crescer-juntos .subtitulo {\n            font-size: 1.2rem;\n            max-width: 700px;\n            margin: 0 auto 50px;\n            line-height: 1.5;\n        }\n\n        .botoes {\n            display: flex;\n            justify-content: center;\n            gap: 20px;\n            flex-wrap: wrap;\n        }\n\n        .botao {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            padding: 16px 30px;\n            font-size: 1.1rem;\n            font-weight: 500;\n            text-decoration: none;\n            border-radius: 0;\n            transition: all 0.3s ease;\n            min-width: 220px;\n        }\n\n        .botao-laranja {\n            background-color: #e89d4f;\n            color: #ffffff;\n        }\n\n        .botao-laranja:hover {\n            background-color: #23b099; \/* Cor institucional verde ao inv\u00e9s de magenta *\/\n            color: #ffffff;\n        }\n\n        .botao-branco {\n            background-color: #ffffff;\n            color: #000000;\n        }\n\n        .botao-branco:hover {\n            background-color: #f8f8f8;\n            color: #0b2574; \/* Cor de t\u00edtulo preferida *\/\n        }\n\n        .seta {\n            margin-left: 8px;\n        }\n\n        \/* Media Queries *\/\n        @media (max-width: 768px) {\n            .crescer-juntos .titulo {\n                font-size: 2.5rem;\n            }\n\n            .crescer-juntos .subtitulo {\n                font-size: 1rem;\n            }\n\n            .botoes {\n                flex-direction: column;\n                align-items: center;\n            }\n\n            .botao {\n                width: 100%;\n                max-width: 280px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <!-- Se\u00e7\u00e3o \"Vamos crescer juntos?\" -->\n    <section class=\"crescer-juntos\">\n        <div class=\"container\">\n            <h2 class=\"titulo\">Vamos fortalecer  <span class=\"destaque\">sua marca?<\/span><\/h2>\n            <p class=\"subtitulo\">Transformamos ideias em solu\u00e7\u00f5es extraordin\u00e1rias<br> que levam sua empresa mais longe.<\/p>\n\n            <div class=\"botoes\">\n                <a href=\"#solicitar\" class=\"botao botao-laranja\">Solicitar proposta <span class=\"seta\">\u2192<\/span><\/a>\n                <a href=\"#agendar\" class=\"botao botao-branco\">Agendar conversa <span class=\"seta\">\u2192<\/span><\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c4e64ec e-con-full e-flex e-con e-parent\" data-id=\"c4e64ec\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7f3ff5ba elementor-widget elementor-widget-html\" data-id=\"7f3ff5ba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ROBOTO -->\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700;900&display=swap\">\n\n<style>\n  .footer {\n    font-family: 'Roboto', sans-serif;\n    background-color: #000;\n    color: #ffffff;\n    padding: 60px 40px 40px;\n  }\n\n  .footer-content {\n    max-width: 1200px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 2fr 1fr 1fr 2fr;\n    gap: 60px;\n  }\n\n  .footer-logo {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .footer-logo-img {\n    width: 160px;\n    height: 80px;\n    background-color: ;\n    border-radius: 8px;\n    margin-bottom: 20px;\n  }\n\n  .footer-logo-img img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n\n  .footer-description {\n    font-size: 14px;\n    line-height: 1.6;\n    opacity: 0.8;\n    max-width: 280px;\n  }\n\n  .footer-menu {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .footer-menu-title {\n    font-size: 16px;\n    font-weight: 700;\n    margin-bottom: 12px;\n    opacity: 0.9;\n  }\n\n  .footer-link {\n    color: #ffffff;\n    text-decoration: none;\n    font-size: 14px;\n    opacity: 0.8;\n    transition: opacity 0.3s ease;\n  }\n\n  .footer-link:hover {\n    opacity: 1;\n  }\n\n  .footer-contact {\n    text-align: right;\n  }\n\n  .footer-contact-title {\n    font-size: 16px;\n    font-weight: 700;\n    margin-bottom: 16px;\n    opacity: 0.9;\n  }\n\n  .footer-phone {\n    font-size: 18px;\n    font-weight: 700;\n    display: block;\n    margin-bottom: 8px;\n  }\n\n  .footer-address {\n    font-size: 14px;\n    opacity: 0.8;\n    line-height: 1.5;\n  }\n\n  .footer-bottom {\n    border-top: 1px solid #555;\n    margin-top: 50px;\n    padding-top: 30px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 20px;\n  }\n\n  .footer-copyright {\n    font-size: 13px;\n    opacity: 0.7;\n  }\n\n  .footer-legal {\n    display: flex;\n    gap: 24px;\n  }\n\n  .footer-legal-link {\n    font-size: 13px;\n    color: #ffffff;\n    text-decoration: none;\n    opacity: 0.8;\n  }\n\n  .footer-legal-link:hover {\n    opacity: 1;\n  }\n\n  @media (max-width: 900px) {\n    .footer-content {\n      grid-template-columns: 1fr;\n      gap: 40px;\n      text-align: center;\n    }\n\n    .footer-contact {\n      text-align: center;\n    }\n\n    .footer-bottom {\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .footer-legal {\n      order: -1;\n      width: 100%;\n      justify-content: center;\n    }\n  }\n<\/style>\n\n<footer class=\"footer\">\n  <div class=\"footer-content\">\n    <!-- LOGO - TROQUE A IMAGEM AQUI -->\n    <div class=\"footer-logo\">\n      <a href=\"\/\" class=\"footer-logo-img\">\n        <img decoding=\"async\" src=\"https:\/\/nuovo.com.br\/novo\/wp-content\/uploads\/2026\/01\/nova-marca-03.png\" alt=\"Nuovo Design\">\n      <\/a>\n      <p class=\"footer-description\">\n        Estrat\u00e9gia, branding, digital e produto para marcas que querem crescer de verdade.\n      <\/p>\n    <\/div>\n\n    <!-- MENU 1 -->\n    <div class=\"footer-menu\">\n      <div class=\"footer-menu-title\">MENU<\/div>\n      <a href=\"#home\" class=\"footer-link\">Home<\/a>\n      <a href=\"#sobre\" class=\"footer-link\">Somos<\/a>\n      <a href=\"#portfolio\" class=\"footer-link\">Portf\u00f3lio<\/a>\n      <a href=\"#blog\" class=\"footer-link\">Blog<\/a>\n    <\/div>\n\n    <!-- MENU 2 -->\n    <div class=\"footer-menu\">\n      <div class=\"footer-menu-title\">SERVI\u00c7OS<\/div>\n      <a href=\"#branding\" class=\"footer-link\">Branding & Design Gr\u00e1fico<\/a>\n      <a href=\"#digital\" class=\"footer-link\">Design Digital<\/a>\n      <a href=\"#produto\" class=\"footer-link\">Design de Produto<\/a>\n    <\/div>\n\n    <!-- CONTATO -->\n    <div class=\"footer-contact\">\n      <div class=\"footer-contact-title\">CONTATO<\/div>\n      <a href=\"tel:+554892051131\" class=\"footer-phone\">+55 (48) 92051-131<\/a>\n      <div class=\"footer-address\">\n        novo@nuovodesign.com.br<br>\n        Florian\u00f3polis, Brasil\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"footer-bottom\">\n    <div class=\"footer-copyright\">\n      \u00a9 2026 Nuovo Design. Todos os direitos reservados.\n    <\/div>\n    <div class=\"footer-legal\">\n      <a href=\"#\" class=\"footer-legal-link\">Privacidade<\/a>\n      <a href=\"#\" class=\"footer-legal-link\">Termos<\/a>\n    <\/div>\n  <\/div>\n<\/footer>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Home Quem Somos Servi\u00e7os Portf\u00f3lio Blog Contato X Diagn\u00f3stico Branding \u00b7 Comunica\u00e7\u00e3o \u00b7 web \u00b7 PRODUTO CONECTAMOS ESTRAT\u00c9GIA, DESIGN E PRODUTO PARA AUMENTAR CLAREZA DE MARCA, DESEJO E VENDAS. Branding, identidade, sites e produtos para empresas que precisam reposicionar, crescer e comunicar valor com protagonismo. Solicitar proposta Ver cases Agendar 15 min Processo claro Entrega [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-382","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nuovo.com.br\/novo\/wp-json\/wp\/v2\/pages\/382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nuovo.com.br\/novo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nuovo.com.br\/novo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nuovo.com.br\/novo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nuovo.com.br\/novo\/wp-json\/wp\/v2\/comments?post=382"}],"version-history":[{"count":370,"href":"https:\/\/nuovo.com.br\/novo\/wp-json\/wp\/v2\/pages\/382\/revisions"}],"predecessor-version":[{"id":1365,"href":"https:\/\/nuovo.com.br\/novo\/wp-json\/wp\/v2\/pages\/382\/revisions\/1365"}],"wp:attachment":[{"href":"https:\/\/nuovo.com.br\/novo\/wp-json\/wp\/v2\/media?parent=382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}