.elementor-96 .elementor-element.elementor-element-4e68cb7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-96 .elementor-element.elementor-element-e0f8f1d{--display:flex;}.elementor-96 .elementor-element.elementor-element-c9c024f{--display:flex;}.elementor-96 .elementor-element.elementor-element-52cab26{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-96 .elementor-element.elementor-element-f1133e6{--display:flex;}/* Start custom CSS for container, class: .elementor-element-e0f8f1d */<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seu Negócio no Topo do Google Maps - Atraia Clientes Locais!</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* Paleta de Cores */
        :root {
            --azul-petroleo: #0C424D; /* Fundo principal */
            --verde-agua: #00BFB3; /* Cor de destaque para botões, ícones, headlines */
            --laranja-aconchegante: #FF8C42; /* Cor secundária de destaque, para chamar atenção */
            --cinza-claro: #F5F5F5; /* Para backgrounds de seções claras */
            --branco: #FFFFFF;
            --texto-claro: #E0E0E0;
            --texto-escuro: #333333;
        }

        /* Estilos Gerais */
        body {
            font-family: 'Montserrat', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: var(--azul-petroleo); /* Fundo principal */
            color: var(--texto-claro);
            overflow-x: hidden; /* Evita scroll horizontal */
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        section {
            padding: 80px 0;
            position: relative;
            opacity: 0; /* Inicialmente invisível para animação de entrada */
            transform: translateY(20px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        h1, h2, h3 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            color: var(--branco);
            text-align: center;
            margin-bottom: 40px;
        }

        h1 {
            font-size: 3.5em;
            color: var(--verde-agua);
            line-height: 1.2;
        }

        h2 {
            font-size: 2.5em;
            color: var(--laranja-aconchegante);
        }

        p {
            font-family: 'Poppins', sans-serif;
            font-size: 1.1em;
            line-height: 1.6;
            text-align: center;
            margin-bottom: 20px;
        }

        .btn {
            display: inline-block;
            padding: 15px 30px;
            background-color: var(--verde-agua);
            color: var(--azul-petroleo);
            text-decoration: none;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1.1em;
            transition: background-color 0.3s ease, transform 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .btn:hover {
            background-color: #00A69D; /* Verde um pouco mais escuro no hover */
            transform: translateY(-3px);
        }

        /* Hero Section */
        #hero {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            text-align: center;
            background: linear-gradient(rgba(12, 66, 77, 0.8), rgba(12, 66, 77, 0.8)), url('https://via.placeholder.com/1920x1080?text=Mapa+Google+com+Negocio') no-repeat center center/cover; /* Imagem de fundo */
            padding: 20px;
            flex-direction: column;
            animation: fadeInScale 1.5s ease-out;
        }

        #hero p {
            max-width: 700px;
            margin: 20px auto 40px auto;
            font-size: 1.3em;
            color: var(--texto-claro);
        }

        /* Seção de Problemas */
        #problemas {
            background-color: var(--azul-petroleo);
            color: var(--texto-claro);
        }

        .problemas-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .problema-item {
            background-color: rgba(0, 0, 0, 0.2);
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
        }

        .problema-item:hover {
            transform: translateY(-10px);
        }

        .problema-item i {
            font-size: 3em;
            color: var(--laranja-aconchegante);
            margin-bottom: 20px;
        }

        .problema-item p {
            font-size: 1.1em;
            color: var(--texto-claro);
        }

        /* Seção de Solução/Serviços */
        #servicos {
            background-color: var(--cinza-claro);
            color: var(--texto-escuro);
        }
        #servicos h2 {
            color: var(--azul-petroleo);
        }
        #servicos p {
            color: var(--texto-escuro);
        }


        .servicos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .servico-item {
            background-color: var(--branco);
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        .servico-item:hover {
            transform: translateY(-10px);
        }

        .servico-item i {
            font-size: 3.5em;
            color: var(--verde-agua);
            margin-bottom: 20px;
        }

        .servico-item h3 {
            font-size: 1.5em;
            color: var(--azul-petroleo);
            margin-bottom: 15px;
        }

        .servico-item p {
            font-size: 1em;
            color: var(--texto-escuro);
            text-align: left;
        }

        /* Seção de Benefícios */
        #beneficios {
            background-color: var(--azul-petroleo);
        }

        .beneficios-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .beneficio-item {
            background-color: rgba(255, 255, 255, 0.08); /* Fundo sutil */
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
            transition: background-color 0.3s ease;
        }
        .beneficio-item:hover {
            background-color: rgba(255, 255, 255, 0.15);
        }

        .beneficio-item i {
            font-size: 3em;
            color: var(--verde-agua);
            margin-bottom: 20px;
        }

        .beneficio-item h3 {
            font-size: 1.4em;
            color: var(--laranja-aconchegante);
            margin-bottom: 10px;
        }

        .beneficio-item p {
            font-size: 1em;
            color: var(--texto-claro);
        }


        /* Seção CTA Final */
        #cta-final {
            background-color: var(--laranja-aconchegante);
            text-align: center;
            padding: 80px 20px;
            color: var(--azul-petroleo);
        }

        #cta-final h2 {
            color: var(--azul-petroleo);
            margin-bottom: 30px;
            font-size: 2.8em;
        }

        #cta-final p {
            color: var(--azul-petroleo);
            font-size: 1.2em;
            max-width: 800px;
            margin: 0 auto 40px auto;
        }

        #cta-final .btn {
            background-color: var(--azul-petroleo);
            color: var(--verde-agua);
        }
        #cta-final .btn:hover {
            background-color: #08333D; /* Azul mais escuro no hover */
            color: var(--verde-agua);
        }


        /* Footer */
        footer {
            background-color: var(--azul-petroleo);
            color: var(--texto-claro);
            text-align: center;
            padding: 40px 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        footer .social-links a {
            color: var(--verde-agua);
            font-size: 1.8em;
            margin: 0 15px;
            transition: color 0.3s ease;
        }
        footer .social-links a:hover {
            color: var(--laranja-aconchegante);
        }
        footer p {
            margin-top: 20px;
            font-size: 0.9em;
        }


        /* Animações (para serem ativadas via JS ou Elementor) */
        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Media Queries para Responsividade */
        @media (max-width: 768px) {
            h1 {
                font-size: 2.5em;
            }
            h2 {
                font-size: 2em;
            }
            p {
                font-size: 1em;
            }
            .btn {
                padding: 12px 25px;
                font-size: 1em;
            }
            section {
                padding: 60px 0;
            }
            #hero {
                min-height: 80vh;
            }
            .problemas-grid, .servicos-grid, .beneficios-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: 2em;
            }
            h2 {
                font-size: 1.8em;
            }
            p {
                font-size: 0.95em;
            }
        }
    </style>
</head>
<body>

    <section id="hero" class="is-visible">
        <div class="container">
            <h1>Seu Negócio no Topo do Google Maps: Atraia Clientes Locais e Aumente Suas Vendas!</h1>
            <h2>Sou seu especialista em Marketing Local e Otimização de Perfil no Google Meu Negócio, transformando sua presença online em resultados reais.</h2>
            <p>Pequenas e médias empresas perdem clientes todos os dias por não serem encontradas no Google. Eu mudo isso para você, garantindo que seu negócio brilhe no lugar certo, na hora certa.</p>
            <a href="#cta-final" class="btn">Quero ser Encontrado no Google!</a>
        </div>
    </section>

    <section id="problemas">
        <div class="container">
            <h2>Você se identifica com algum destes desafios?</h2>
            <div class="problemas-grid">
                <div class="problema-item">
                    <i class="fas fa-map-marker-alt"></i>
                    <p>Seu negócio não aparece no Google Maps?</p>
                </div>
                <div class="problema-item">
                    <i class="fas fa-handshake-slash"></i>
                    <p>Está perdendo clientes para a concorrência local?</p>
                </div>
                <div class="problema-item">
                    <i class="fas fa-star-half-alt"></i>
                    <p>Não sabe como gerenciar avaliações e reputação online?</p>
                </div>
                <div class="problema-item">
                    <i class="fas fa-sync-alt"></i>
                    <p>Seu perfil no Google Meu Negócio está desatualizado ou incompleto?</p>
                </div>
                <div class="problema-item">
                    <i class="fas fa-user-plus"></i>
                    <p>Quer atrair mais clientes que buscam seus serviços na sua região?</p>
                </div>
            </div>
            <p style="margin-top: 50px; font-weight: 600;">Se sim, você não está sozinho. Mas a solução está mais perto do que imagina.</p>
        </div>
    </section>

    <section id="servicos">
        <div class="container">
            <h2>Minha Especialidade: Transformando sua Presença Online em Lucros</h2>
            <p>Eu resolvo seus problemas digitais com um serviço completo e focado em resultados tangíveis para o seu negócio.</p>
            <div class="servicos-grid">
                <div class="servico-item">
                    <i class="fas fa-file-alt"></i>
                    <h3>Criação e Otimização de Perfil</h3>
                    <p>Crio ou aprimoro seu perfil do zero, garantindo todas as informações essenciais para que seu negócio seja encontrado.</p>
                </div>
                <div class="servico-item">
                    <i class="fas fa-check-circle"></i>
                    <h3>Verificação e Gerenciamento</h3>
                    <p>Auxilio na verificação e mantenho seu perfil sempre atualizado, eliminando dores de cabeça e garantindo conformidade.</p>
                </div>
                <div class="servico-item">
                    <i class="fas fa-images"></i>
                    <h3>Fotos e Vídeos de Alta Qualidade</h3>
                    <p>Adiciono mídias profissionais que destacam seu negócio, atraem a atenção e mostram o que você faz de melhor.</p>
                </div>
                <div class="servico-item">
                    <i class="fas fa-comment-dots"></i>
                    <h3>Gerenciamento de Avaliações</h3>
                    <p>Respondo e gerencio suas avaliações de forma estratégica para construir uma reputação impecável e positiva online.</p>
                </div>
                <div class="servico-item">
                    <i class="fas fa-bullhorn"></i>
                    <h3>Publicações e Promoções</h3>
                    <p>Crio posts e ofertas que mantêm seus clientes engajados, informados e interessados nas novidades do seu negócio.</p>
                </div>
                <div class="servico-item">
                    <i class="fas fa-chart-line"></i>
                    <h3>Análise de Insights e Relatórios</h3>
                    <p>Você terá acesso a relatórios claros sobre o desempenho do seu perfil e o retorno do investimento, com dados que importam.</p>
                </div>
            </div>
            <div style="text-align: center; margin-top: 50px;">
                <a href="#cta-final" class="btn">Quero saber como isso vai me ajudar!</a>
            </div>
        </div>
    </section>

    <section id="beneficios">
        <div class="container">
            <h2>O que você ganha com uma presença otimizada no Google:</h2>
            <div class="beneficios-grid">
                <div class="beneficio-item">
                    <i class="fas fa-eye"></i>
                    <h3>Mais Visibilidade</h3>
                    <p>Seu negócio aparecerá em destaque nas buscas locais do Google e Google Maps, sendo visto por quem realmente importa.</p>
                </div>
                <div class="beneficio-item">
                    <i class="fas fa-users"></i>
                    <h3>Mais Clientes</h3>
                    <p>Atraia mais pessoas que procuram ativamente por seus produtos ou serviços perto de você, prontos para comprar.</p>
                </div>
                <div class="beneficio-item">
                    <i class="fas fa-award"></i>
                    <h3>Credibilidade e Confiança</h3>
                    <p>Um perfil completo, atualizado e com boas avaliações constrói a confiança do cliente antes mesmo dele chegar à sua porta.</p>
                </div>
                <div class="beneficio-item">
                    <i class="fas fa-dollar-sign"></i>
                    <h3>Aumento de Vendas</h3>
                    <p>Mais visibilidade e credibilidade resultam diretamente em mais clientes e, consequentemente, mais vendas para o seu negócio!</p>
                </div>
                <div class="beneficio-item">
                    <i class="fas fa-trophy"></i>
                    <h3>Vantagem Competitiva</h3>
                    <p>Destaque-se da concorrência que ainda não valoriza o marketing local, posicionando-se à frente no mercado.</p>
                </div>
                <div class="beneficio-item">
                    <i class="fas fa-clock"></i>
                    <h3>Economia de Tempo</h3>
                    <p>Deixe a parte técnica e a otimização comigo e foque no que você faz de melhor: gerenciar e fazer seu negócio crescer.</p>
                </div>
            </div>
            <p style="margin-top: 50px; font-weight: 600;">Não perca mais tempo e clientes para a concorrência! Chegou a hora de ser encontrado.</p>
        </div>
    </section>

    <section id="cta-final">
        <div class="container">
            <h2>Pronto para ter seu negócio no topo do Google Maps?</h2>
            <p>Pare de perder clientes para a concorrência! Sua empresa merece ser encontrada por quem realmente busca o que você oferece.</p>
            <a href="#cta-final" class="btn">Quero Aumentar Minhas Vendas Agora!</a>
            <div style="background-color: rgba(255,255,255,0.9); padding: 30px; border-radius: 10px; margin-top: 40px; color: var(--azul-petroleo);">
                <h3>Preencha o formulário e solicite uma análise gratuita:</h3>
                <p>NOME COMPLETO</p>
                <p>E-MAIL</p>
                <p>TELEFONE</p>
                <p>NOME DA EMPRESA</p>
                <p style="font-style: italic;">(Este é um placeholder. O Elementor irá gerar o formulário real aqui.)</p>
            </div>
            <p style="margin-top: 30px; font-size: 1.1em; color: var(--azul-petroleo);">Ou entre em contato diretamente:</p>
            <p style="font-size: 1.1em; color: var(--azul-petroleo); font-weight: 600;">E-mail: contato@seuservico.com.br | Telefone: (XX) XXXX-XXXX</p>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2025 Seu Nome/Sua Empresa. Todos os direitos reservados.</p>
            <div class="social-links">
                <a href="#" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
                <a href="#" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                </div>
            <p><a href="#" style="color: var(--verde-agua); text-decoration: none;">Política de Privacidade</a></p>
        </div>
    </footer>

    <script>
        // Animação de entrada das seções ao scroll
        document.addEventListener('DOMContentLoaded', () => {
            const sections = document.querySelectorAll('section');

            const observerOptions = {
                root: null,
                rootMargin: '0px',
                threshold: 0.2 // A seção se torna visível quando 20% dela entra na viewport
            };

            const sectionObserver = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('is-visible');
                        observer.unobserve(entry.target); // Para animar apenas uma vez
                    }
                });
            }, observerOptions);

            sections.forEach(section => {
                // A seção Hero já começa visível, então a animamos diretamente ou removemos a classe 'is-visible' inicial se preferir animar na carga da página.
                if (section.id !== 'hero') { // Não observe a hero se ela já começa animada/visível
                    sectionObserver.observe(section);
                }
            });

            // Animação para a hero section que já está visível
            const heroSection = document.getElementById('hero');
            if (heroSection) {
                // Adiciona a classe is-visible após um pequeno atraso para garantir que a animação CSS aconteça
                setTimeout(() => {
                    heroSection.classList.add('is-visible');
                }, 100);
            }
        });
    </script>

</body>
</html>/* End custom CSS */