fix performance and new mobile menu

Signed-off-by: Rodrigo Bertoldo de Sousa Martins <rodrigo.sousa.577@gmail.com>

functions.php

@@ -6,7 +6,7 @@
  */
 
 // Constantes de versão para cache busting
-define('THEME_VERSION', '1.0.1');
+define('THEME_VERSION', '1.0.5');
 
 /**
  * Theme setup
@@ -38,10 +38,12 @@ add_action('after_setup_theme', 'martinsevieira_setup');
 function martinsevieira_scripts() {
     // Styles
     wp_enqueue_style('martinsevieira-style', get_stylesheet_uri(), array(), THEME_VERSION);
-    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css', array(), '6.4.0');
+    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css', array(), '6.4.0', 'all');
+    wp_style_add_data('font-awesome', 'display', 'swap');
     
-    // Scripts
+    // Scripts com defer para melhor performance
     wp_enqueue_script('martinsevieira-script', get_template_directory_uri() . '/js/main.js', array(), THEME_VERSION, true);
+    wp_script_add_data('martinsevieira-script', 'defer', true);
     
     // Localizar script para AJAX
     wp_localize_script('martinsevieira-script', 'ajaxData', array(
@@ -51,6 +53,53 @@ function martinsevieira_scripts() {
 }
 add_action('wp_enqueue_scripts', 'martinsevieira_scripts');
 
+/**
+ * Adicionar atributos async/defer aos scripts
+ */
+function add_defer_attribute($tag, $handle) {
+    if ('martinsevieira-script' === $handle) {
+        return str_replace(' src', ' defer src', $tag);
+    }
+    return $tag;
+}
+add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);
+
+/**
+ * Otimizar carregamento de fontes
+ */
+function add_font_preconnect() {
+    echo '<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>';
+    echo '<link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">';
+}
+add_action('wp_head', 'add_font_preconnect', 1);
+
+/**
+ * Remover jQuery Migrate para melhor performance
+ */
+function remove_jquery_migrate($scripts) {
+    if (!is_admin() && isset($scripts->registered['jquery'])) {
+        $script = $scripts->registered['jquery'];
+        if ($script->deps) {
+            $script->deps = array_diff($script->deps, array('jquery-migrate'));
+        }
+    }
+}
+add_action('wp_default_scripts', 'remove_jquery_migrate');
+
+/**
+ * Desabilitar emojis do WordPress para melhor performance
+ */
+function disable_emojis() {
+    remove_action('wp_head', 'print_emoji_detection_script', 7);
+    remove_action('admin_print_scripts', 'print_emoji_detection_script');
+    remove_action('wp_print_styles', 'print_emoji_styles');
+    remove_action('admin_print_styles', 'print_emoji_styles');
+    remove_filter('the_content_feed', 'wp_staticize_emoji');
+    remove_filter('comment_text_rss', 'wp_staticize_emoji');
+    remove_filter('wp_mail', 'wp_staticize_emoji_for_email');
+}
+add_action('init', 'disable_emojis');
+
 /**
  * Register widget areas
  */

header.php

@@ -14,6 +14,26 @@ $template_uri = get_template_directory_uri();
 <head>
     <meta charset="<?php bloginfo('charset'); ?>">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Preconnect para recursos externos -->
+    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
+    <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
+    
+    <!-- Preload de recursos críticos -->
+    <link rel="preload" href="<?php echo $template_uri; ?>/logo/logo-horizontal.png" as="image">
+    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style">
+    
+    <!-- CSS Crítico Inline para melhor performance -->
+    <style>
+        :root{--primary-color:#20337b;--secondary-color:#ffffff;--text-dark:#333;--text-light:#666;--accent-gold:#c9a961;--bg-light:#f8f9fa}
+        *{margin:0;padding:0;box-sizing:border-box}
+        body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;color:var(--text-dark);line-height:1.6;overflow-x:hidden}
+        .site-header{background:var(--secondary-color);box-shadow:0 2px 10px rgba(0,0,0,.1);position:sticky;top:0;z-index:999}
+        .header-container{max-width:1200px;margin:0 auto;padding:.8rem 2rem;display:flex;justify-content:space-between;align-items:center}
+        .logo img{max-height:65px;width:auto}
+        @media(max-width:768px){.main-nav{display:block!important}}
+    </style>
+    
     <?php wp_head(); ?>
 </head>
 <body <?php body_class(); ?>>
@@ -36,14 +56,14 @@ $template_uri = get_template_directory_uri();
             <span></span>
         </button>
         
-        <nav class="main-nav" id="main-nav" aria-label="Navegação principal">
+        <nav class="main-nav desktop-nav" aria-label="Navegação principal">
             <ul>
-                <li><a href="<?php echo $home_url; ?>#inicio"><i class="fas fa-home" aria-hidden="true"></i><span class="nav-text">Início</span></a></li>
+                <li><a href="<?php echo $home_url; ?>#inicio"><span class="nav-text">Início</span></a></li>
-                <li><a href="<?php echo $home_url; ?>#areas"><i class="fas fa-briefcase" aria-hidden="true"></i><span class="nav-text">Áreas de Atuação</span></a></li>
+                <li><a href="<?php echo $home_url; ?>#areas"><span class="nav-text">Áreas de Atuação</span></a></li>
-                <li><a href="<?php echo $home_url; ?>#sobre"><i class="fas fa-info-circle" aria-hidden="true"></i><span class="nav-text">Sobre</span></a></li>
+                <li><a href="<?php echo $home_url; ?>#sobre"><span class="nav-text">Sobre</span></a></li>
-                <li><a href="<?php echo $home_url; ?>#equipe"><i class="fas fa-user-tie" aria-hidden="true"></i><span class="nav-text">Equipe</span></a></li>
+                <li><a href="<?php echo $home_url; ?>#equipe"><span class="nav-text">Equipe</span></a></li>
-                <li><a href="<?php echo $home_url; ?>#blog"><i class="fas fa-newspaper" aria-hidden="true"></i><span class="nav-text">Blog</span></a></li>
+                <li><a href="<?php echo $home_url; ?>#blog"><span class="nav-text">Blog</span></a></li>
-                <li><a href="<?php echo $home_url; ?>#contato"><i class="fas fa-envelope" aria-hidden="true"></i><span class="nav-text">Contato</span></a></li>
+                <li><a href="<?php echo $home_url; ?>#contato"><span class="nav-text">Contato</span></a></li>
                 <li class="theme-toggle-item">
                     <button class="theme-toggle" id="theme-toggle" aria-label="Alternar modo escuro">
                         <i class="fas fa-moon" aria-hidden="true"></i>
@@ -52,4 +72,26 @@ $template_uri = get_template_directory_uri();
             </ul>
         </nav>
     </div>
-</header>
+</header>
+
+<!-- Menu Mobile (Separado do header para evitar conflitos de stacking context) -->
+<div class="mobile-menu-overlay" id="mobile-menu-overlay"></div>
+<nav class="mobile-nav" id="mobile-nav" aria-label="Menu mobile">
+    <button class="mobile-menu-close" id="mobile-menu-close" aria-label="Fechar menu">
+        <i class="fas fa-times"></i>
+    </button>
+    <ul>
+        <li><a href="<?php echo $home_url; ?>#inicio"><i class="fas fa-home"></i><span>Início</span></a></li>
+        <li><a href="<?php echo $home_url; ?>#areas"><i class="fas fa-briefcase"></i><span>Áreas de Atuação</span></a></li>
+        <li><a href="<?php echo $home_url; ?>#sobre"><i class="fas fa-info-circle"></i><span>Sobre</span></a></li>
+        <li><a href="<?php echo $home_url; ?>#equipe"><i class="fas fa-user-tie"></i><span>Equipe</span></a></li>
+        <li><a href="<?php echo $home_url; ?>#blog"><i class="fas fa-newspaper"></i><span>Blog</span></a></li>
+        <li><a href="<?php echo $home_url; ?>#contato"><i class="fas fa-envelope"></i><span>Contato</span></a></li>
+        <li class="theme-toggle-mobile">
+            <button class="theme-toggle-btn" id="theme-toggle-mobile" aria-label="Alternar modo escuro">
+                <i class="fas fa-moon"></i>
+                <span>Modo Escuro</span>
+            </button>
+        </li>
+    </ul>
+</nav>

js/main.js

@@ -33,8 +33,11 @@
         cookieAccept: document.getElementById('cookie-accept'),
         cookieDecline: document.getElementById('cookie-decline'),
         themeToggle: document.getElementById('theme-toggle'),
+        themeToggleMobile: document.getElementById('theme-toggle-mobile'),
         mobileMenuToggle: document.getElementById('mobile-menu-toggle'),
-        mainNav: document.getElementById('main-nav'),
+        mobileMenuClose: document.getElementById('mobile-menu-close'),
+        mobileNav: document.getElementById('mobile-nav'),
+        mobileMenuOverlay: document.getElementById('mobile-menu-overlay'),
         header: document.querySelector('.site-header'),
         loadMoreBtn: document.getElementById('load-more-posts'),
         postsContainer: document.getElementById('posts-container'),
@@ -72,25 +75,31 @@
     // ============= MODO ESCURO =============
     
     function initDarkMode() {
-        if (!elements.themeToggle) return;
+        const toggles = [elements.themeToggle, elements.themeToggleMobile].filter(Boolean);
+        if (toggles.length === 0) return;
         
-        const icon = elements.themeToggle.querySelector('i');
         const currentTheme = localStorage.getItem('theme');
         
         // Aplicar tema inicial
         if (currentTheme === 'light') {
             body.classList.remove('dark-mode');
-            icon?.classList.replace('fa-sun', 'fa-moon');
+            toggles.forEach(toggle => {
+                const icon = toggle.querySelector('i');
+                icon?.classList.replace('fa-sun', 'fa-moon');
+            });
         } else {
             body.classList.add('dark-mode');
-            icon?.classList.replace('fa-moon', 'fa-sun');
+            toggles.forEach(toggle => {
+                const icon = toggle.querySelector('i');
+                icon?.classList.replace('fa-moon', 'fa-sun');
+            });
             if (!currentTheme) {
                 localStorage.setItem('theme', 'dark');
             }
         }
         
         // Toggle modo escuro
-        elements.themeToggle.addEventListener('click', (e) => {
+        function toggleDarkMode(e) {
             e.preventDefault();
             e.stopPropagation();
             
@@ -99,50 +108,94 @@
             
             localStorage.setItem('theme', isDark ? 'dark' : 'light');
             
-            if (icon) {
+            toggles.forEach(toggle => {
-                icon.classList.replace(isDark ? 'fa-moon' : 'fa-sun', isDark ? 'fa-sun' : 'fa-moon');
+                const icon = toggle.querySelector('i');
-            }
+                if (icon) {
+                    icon.classList.replace(isDark ? 'fa-moon' : 'fa-sun', isDark ? 'fa-sun' : 'fa-moon');
+                }
+            });
+        }
+        
+        toggles.forEach(toggle => {
+            toggle.addEventListener('click', toggleDarkMode);
         });
     }
     
     // ============= MENU MOBILE =============
     
     function initMobileMenu() {
-        if (!elements.mobileMenuToggle || !elements.mainNav) return;
+        if (!elements.mobileMenuToggle || !elements.mobileNav || !elements.mobileMenuOverlay) {
-        
+            return;
-        function toggleMenu(shouldOpen) {
-            const isOpen = shouldOpen ?? !elements.mobileMenuToggle.classList.contains('active');
-            
-            elements.mobileMenuToggle.classList.toggle('active', isOpen);
-            elements.mobileMenuToggle.setAttribute('aria-expanded', isOpen);
-            elements.mainNav.classList.toggle('active', isOpen);
-            body.classList.toggle('menu-open', isOpen);
-            body.style.overflow = isOpen ? 'hidden' : '';
         }
         
-        // Toggle menu
+        function openMenu() {
+            elements.mobileMenuToggle.classList.add('active');
+            elements.mobileMenuToggle.setAttribute('aria-expanded', 'true');
+            elements.mobileNav.classList.add('active');
+            elements.mobileMenuOverlay.classList.add('active');
+            body.classList.add('menu-open');
+        }
+        
+        function closeMenu() {
+            elements.mobileMenuToggle.classList.remove('active');
+            elements.mobileMenuToggle.setAttribute('aria-expanded', 'false');
+            elements.mobileNav.classList.remove('active');
+            elements.mobileMenuOverlay.classList.remove('active');
+            body.classList.remove('menu-open');
+        }
+        
+        function toggleMenu() {
+            if (elements.mobileNav.classList.contains('active')) {
+                closeMenu();
+            } else {
+                openMenu();
+            }
+        }
+        
+        // Abrir/fechar menu ao clicar no botão hamburguer
         elements.mobileMenuToggle.addEventListener('click', (e) => {
             e.preventDefault();
             e.stopPropagation();
             toggleMenu();
         });
         
-        // Fechar menu ao clicar em links
+        // Fechar menu ao clicar no botão X
-        elements.mainNav.addEventListener('click', (e) => {
+        if (elements.mobileMenuClose) {
-            if (e.target.tagName === 'A' && !e.target.closest('.theme-toggle-item')) {
+            elements.mobileMenuClose.addEventListener('click', (e) => {
-                toggleMenu(false);
+                e.preventDefault();
-            }
+                e.stopPropagation();
+                closeMenu();
+            });
+        }
+        
+        // Fechar menu ao clicar no overlay
+        elements.mobileMenuOverlay.addEventListener('click', (e) => {
+            e.preventDefault();
+            closeMenu();
         });
         
-        // Fechar menu ao clicar fora
+        // Fechar menu ao clicar em links
-        document.addEventListener('click', (e) => {
+        const mobileLinks = elements.mobileNav.querySelectorAll('a');
-            if (body.classList.contains('menu-open')) {
+        mobileLinks.forEach(link => {
-                const isClickInsideNav = elements.mainNav.contains(e.target);
+            link.addEventListener('click', (e) => {
-                const isClickOnToggle = elements.mobileMenuToggle.contains(e.target);
+                // Não previne o comportamento padrão para permitir navegação
-                
+                // Apenas fecha o menu
-                if (!isClickInsideNav && !isClickOnToggle) {
+                closeMenu();
-                    toggleMenu(false);
+            });
-                }
+        });
+        
+        // Fechar menu ao clicar no botão de tema mobile
+        if (elements.themeToggleMobile) {
+            elements.themeToggleMobile.addEventListener('click', (e) => {
+                // Não fecha imediatamente, só após trocar tema
+                // O evento de tema já está tratado em initDarkMode
+            });
+        }
+        
+        // Fechar menu com tecla ESC
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && elements.mobileNav.classList.contains('active')) {
+                closeMenu();
             }
         });
     }
@@ -177,12 +230,25 @@
     function initHeaderScroll() {
         if (!elements.header) return;
         
-        const handleScroll = debounce(() => {
+        let lastScrollY = window.scrollY;
-            const shouldElevate = window.scrollY > 100;
+        let ticking = false;
+        
+        const updateHeader = () => {
+            const shouldElevate = lastScrollY > 100;
             elements.header.style.boxShadow = shouldElevate 
                 ? '0 4px 20px rgba(0,0,0,0.15)' 
                 : '0 2px 10px rgba(0,0,0,0.1)';
-        }, 50);
+            ticking = false;
+        };
+        
+        const handleScroll = () => {
+            lastScrollY = window.scrollY;
+            
+            if (!ticking) {
+                window.requestAnimationFrame(updateHeader);
+                ticking = true;
+            }
+        };
         
         window.addEventListener('scroll', handleScroll, { passive: true });
     }
@@ -198,8 +264,13 @@
         const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
-                    entry.target.style.opacity = '1';
+                    // Usar requestAnimationFrame para animação suave
-                    entry.target.style.transform = 'translateY(0)';
+                    requestAnimationFrame(() => {
+                        entry.target.style.opacity = '1';
+                        entry.target.style.transform = 'translateY(0)';
+                    });
+                    // Parar de observar após animar
+                    observer.unobserve(entry.target);
                 }
             });
         }, observerOptions);
@@ -208,7 +279,7 @@
         cards.forEach(card => {
             card.style.opacity = '0';
             card.style.transform = 'translateY(20px)';
-            card.style.transition = 'all 0.6s ease';
+            card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
             observer.observe(card);
         });
     }
@@ -301,6 +372,39 @@
     
     // ============= INICIALIZAÇÃO =============
     
+    /**
+     * Lazy loading de imagens nativas
+     */
+    function initLazyLoading() {
+        // Verificar se o navegador suporta lazy loading nativo
+        if ('loading' in HTMLImageElement.prototype) {
+            const images = document.querySelectorAll('img[loading="lazy"]');
+            images.forEach(img => {
+                if (img.dataset.src) {
+                    img.src = img.dataset.src;
+                }
+            });
+        } else {
+            // Fallback: usar Intersection Observer
+            const imageObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const img = entry.target;
+                        if (img.dataset.src) {
+                            img.src = img.dataset.src;
+                            img.removeAttribute('data-src');
+                        }
+                        observer.unobserve(img);
+                    }
+                });
+            });
+            
+            document.querySelectorAll('img[loading="lazy"]').forEach(img => {
+                imageObserver.observe(img);
+            });
+        }
+    }
+    
     document.addEventListener('DOMContentLoaded', () => {
         initCookieBanner();
         initDarkMode();
@@ -310,6 +414,7 @@
         initCardAnimations();
         initRippleEffect();
         initLoadMorePosts();
+        initLazyLoading();
     });
 
 })();

style.css

@@ -46,6 +46,10 @@ body {
   line-height: 1.6;
   overflow-x: hidden;
   transition: background 0.3s ease, color 0.3s ease;
+  /* Aceleração por hardware */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeSpeed;
 }
 
 /* Header */
@@ -56,6 +60,11 @@ body {
   top: 0;
   z-index: 999;
   transition: all 0.3s ease;
+  /* Aceleração por hardware - sem transform para não quebrar position:fixed do menu mobile */
+  will-change: transform;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  contain: layout style paint;
 }
 
 /* Ajuste quando admin bar do WordPress está presente */
@@ -89,6 +98,9 @@ body.dark-mode .site-header {
   max-height: 65px;
   width: auto;
   transition: all 0.3s ease;
+  /* Otimização de renderização */
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
 }
 
 body.dark-mode .logo img {
@@ -119,6 +131,9 @@ body.dark-mode .logo img {
   margin: 3px 0;
   transition: all 0.3s ease;
   border-radius: 3px;
+  /* Aceleração por hardware */
+  will-change: transform, opacity;
+  backface-visibility: hidden;
 }
 
 body.dark-mode .mobile-menu-toggle span {
@@ -194,6 +209,12 @@ body.dark-mode .main-nav a:hover {
   color: var(--accent-gold);
 }
 
+/* Menu Mobile e Overlay - Hidden por padrão */
+.mobile-nav,
+.mobile-menu-overlay {
+  display: none;
+}
+
 /* Hero Section */
 .hero-section {
   background: linear-gradient(135deg, var(--primary-color) 0%, #16254f 100%);
@@ -295,6 +316,10 @@ body.dark-mode .hero-section {
   transition: all 0.3s;
   box-shadow: 0 4px 15px rgba(201, 169, 97, 0.3);
   animation: fadeInUp 1s ease 0.6s both;
+  /* Aceleração por hardware */
+  will-change: transform, box-shadow;
+  transform: translateZ(0);
+  backface-visibility: hidden;
 }
 
 .cta-button:hover {
@@ -356,6 +381,11 @@ body.dark-mode .section-title {
   cursor: pointer;
   position: relative;
   overflow: hidden;
+  /* Aceleração por hardware */
+  will-change: transform, box-shadow;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  contain: layout style paint;
 }
 
 .area-card::before {
@@ -514,6 +544,11 @@ body.dark-mode .equipe-section {
   transition: all 0.4s ease;
   display: flex;
   flex-direction: column;
+  /* Aceleração por hardware */
+  will-change: transform, box-shadow;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  contain: layout style paint;
 }
 
 body.dark-mode .equipe-card {
@@ -712,6 +747,11 @@ body.dark-mode .post-card:hover {
   overflow: hidden;
   box-shadow: 0 5px 20px rgba(0,0,0,0.08);
   transition: all 0.3s;
+  /* Aceleração por hardware */
+  will-change: transform, box-shadow;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  contain: layout style paint;
 }
 
 .post-card:hover {
@@ -723,6 +763,11 @@ body.dark-mode .post-card:hover {
   width: 100%;
   height: 200px;
   object-fit: cover;
+  /* Otimização de renderização */
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+  will-change: transform;
+  backface-visibility: hidden;
 }
 
 .post-content {
@@ -1409,91 +1454,154 @@ body.dark-mode .post-content-single h4 {
     display: flex !important;
   }
   
-  /* Menu Mobile - Oculto por padrão */
+  /* Esconder navegação desktop no mobile */
-  .main-nav {
+  .desktop-nav {
-    position: fixed;
+    display: none !important;
-    top: 0;
-    right: -100%;
-    width: 75%;
-    max-width: 300px;
-    height: 100vh;
-    background: var(--secondary-color);
-    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
-    transition: right 0.3s ease;
-    z-index: 99999;
-    overflow-y: auto;
   }
   
-  body.dark-mode .main-nav {
+  /* Menu Mobile Overlay */
-    background: #1f1f1f;
+  .mobile-menu-overlay {
-    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
+    display: block;
-  }
-  
-  /* Menu Mobile - Ativo */
-  .main-nav.active {
-    right: 0;
-  }
-  
-  .main-nav ul {
-    flex-direction: column;
-    gap: 0;
-    padding: 5rem 0 2rem 0;
-    align-items: stretch;
-  }
-  
-  .main-nav ul li {
-    width: 100%;
-    border-bottom: 1px solid rgba(0,0,0,0.05);
-  }
-  
-  body.dark-mode .main-nav ul li {
-    border-bottom-color: rgba(255,255,255,0.1);
-  }
-  
-  .main-nav a {
-    padding: 1rem 1.5rem;
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    width: 100%;
-    font-size: 1.1rem;
-  }
-  
-  .main-nav a i {
-    display: inline-block !important;
-    font-size: 1.2rem;
-    width: 24px;
-    text-align: center;
-  }
-  
-  .main-nav .theme-toggle-item {
-    margin-top: 1rem;
-    padding: 0 1.5rem;
-  }
-  
-  .main-nav .theme-toggle {
-    width: 100%;
-    justify-content: flex-start;
-    padding: 1rem;
-    border-radius: 8px;
-  }
-  
-  /* Overlay quando menu está aberto */
-  body.menu-open::before {
-    content: '';
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0,0,0,0.5);
+    background: rgba(0, 0, 0, 0.6);
-    z-index: 99998;
+    opacity: 0;
-    animation: fadeIn 0.3s ease;
+    visibility: hidden;
+    z-index: 9998;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
   }
   
-  @keyframes fadeIn {
+  .mobile-menu-overlay.active {
-    from { opacity: 0; }
+    opacity: 1;
-    to { opacity: 1; }
+    visibility: visible;
+  }
+  
+  /* Menu Mobile */
+  .mobile-nav {
+    display: block;
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 80%;
+    max-width: 320px;
+    height: 100vh;
+    background: var(--secondary-color);
+    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3);
+    z-index: 9999;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    transform: translateX(100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    /* Performance */
+    will-change: transform;
+  }
+  
+  body.dark-mode .mobile-nav {
+    background: #1a1a1a;
+    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.8);
+  }
+  
+  .mobile-nav.active {
+    transform: translateX(0);
+  }
+  
+  /* Botão de fechar menu mobile */
+  .mobile-menu-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: none;
+    border: none;
+    color: var(--primary-color);
+    font-size: 1.8rem;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 50%;
+    transition: all 0.3s ease;
+    z-index: 10;
+  }
+  
+  body.dark-mode .mobile-menu-close {
+    color: var(--accent-gold);
+  }
+  
+  .mobile-menu-close:active {
+    background: rgba(0, 0, 0, 0.1);
+    transform: rotate(90deg);
+  }
+  
+  body.dark-mode .mobile-menu-close:active {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  
+  .mobile-nav ul {
+    list-style: none;
+    padding: 5rem 0 2rem 0;
+    margin: 0;
+  }
+  
+  .mobile-nav li {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  }
+  
+  body.dark-mode .mobile-nav li {
+    border-bottom-color: rgba(255, 255, 255, 0.1);
+  }
+  
+  .mobile-nav a,
+  .mobile-nav .theme-toggle-btn {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1.2rem 1.5rem;
+    color: var(--primary-color);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 1.05rem;
+    transition: background 0.2s ease;
+    width: 100%;
+    border: none;
+    background: none;
+    cursor: pointer;
+    text-align: left;
+  }
+  
+  body.dark-mode .mobile-nav a,
+  body.dark-mode .mobile-nav .theme-toggle-btn {
+    color: #e0e0e0;
+  }
+  
+  .mobile-nav a:active,
+  .mobile-nav .theme-toggle-btn:active {
+    background: rgba(0, 0, 0, 0.05);
+  }
+  
+  body.dark-mode .mobile-nav a:active,
+  body.dark-mode .mobile-nav .theme-toggle-btn:active {
+    background: rgba(255, 255, 255, 0.05);
+  }
+  
+  .mobile-nav i {
+    font-size: 1.2rem;
+    width: 28px;
+    text-align: center;
+    color: var(--accent-gold);
+  }
+  
+  .mobile-nav span {
+    flex: 1;
+  }
+  
+  /* Prevenir scroll do body quando menu aberto */
+  body.menu-open {
+    overflow: hidden;
   }
   
   /* Conteúdo da página */
@@ -1893,23 +2001,13 @@ body.dark-mode .cookie-decline:hover {
 
 /* Desktop - garantir que elementos mobile não apareçam */
 @media (min-width: 769px) {
-  .mobile-menu-toggle {
+  .mobile-menu-toggle,
+  .mobile-nav,
+  .mobile-menu-overlay {
     display: none !important;
   }
   
-  .main-nav {
+  .desktop-nav {
-    position: static !important;
+    display: block !important;
-    width: auto !important;
-    height: auto !important;
-    background: transparent !important;
-    box-shadow: none !important;
-  }
-  
-  .main-nav a i {
-    display: none !important;
-  }
-  
-  .nav-text {
-    display: inline !important;
   }
 }