ajustes de performance (LCP) e nos menus

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

index.html

@@ -3,7 +3,21 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#20337b">
     <title>Martins & Vieira - Advocacia Especializada</title>
+    
+    <!-- Resource Hints para domínios externos -->
+    <link rel="dns-prefetch" href="https://wa.me">
+    <link rel="dns-prefetch" href="https://www.martinsevieira.adv.br">
+    <link rel="dns-prefetch" href="https://www.instagram.com">
+    <link rel="dns-prefetch" href="https://www.facebook.com">
+    <link rel="preconnect" href="https://advx.martinsevieira.adv.br">
+    <link rel="preconnect" href="https://cloud.martinsevieira.adv.br">
+    <link rel="preconnect" href="https://chat.martinsevieira.adv.br">
+    
+    <!-- Preload da imagem crítica do logo -->
+    <link rel="preload" as="image" href="fotos/logo.png" fetchpriority="high">
+    
     <style>
         * {
             margin: 0;
@@ -22,6 +36,7 @@
             overflow-y: auto;
             position: relative;
             padding: 20px 0;
+            contain: layout style;
         }
 
         /* Background animado com gradiente */
@@ -37,6 +52,7 @@
             animation: gradientAnimation 15s ease infinite;
             z-index: -2;
             will-change: background-position;
+            contain: strict;
         }
 
         @keyframes gradientAnimation {
@@ -56,21 +72,24 @@
             flex-direction: column;
             align-items: center;
             justify-content: center;
+            overflow: visible;
         }
 
         .logo {
             width: 100px;
             height: 100px;
-            margin: 0 auto 15px;
+            margin: 0 auto 12px;
             background: url('fotos/logo.png') center/80% no-repeat rgba(255, 255, 255, 0.95);
             border-radius: 50%;
             border: 3px solid rgba(255, 255, 255, 0.3);
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+            contain: layout style paint;
         }
 
         .header {
             color: white;
-            margin-bottom: 20px;
+            margin-bottom: 15px;
+            contain: layout style paint;
         }
 
         .header h1 {
@@ -106,7 +125,7 @@
 
         .save-contact {
             background: linear-gradient(135deg, #20337b, #2d4a9e);
-            margin-bottom: 25px;
+            margin-bottom: 18px;
         }
 
         .save-contact:hover {
@@ -121,6 +140,7 @@
             gap: 15px;
             margin-bottom: 20px;
             flex-wrap: wrap;
+            overflow: visible;
         }
 
         .icon-item {
@@ -130,10 +150,11 @@
             text-decoration: none;
             color: white;
             transition: transform 0.3s ease;
+            position: relative;
         }
 
         .icon-item:hover {
-            transform: translateY(-5px);
+            transform: scale(1.08);
         }
 
         .icon-box {
@@ -148,6 +169,8 @@
             margin-bottom: 8px;
             border: 2px solid rgba(255, 255, 255, 0.2);
             transition: all 0.3s ease;
+            position: relative;
+            z-index: 1;
         }
 
         .icon-item:hover .icon-box {
@@ -179,7 +202,7 @@
 
         .pix-button {
             background: linear-gradient(135deg, #32BCAD, #00A86B);
-            margin-bottom: 20px;
+            margin-bottom: 15px;
             position: relative;
             overflow: hidden;
         }
@@ -245,11 +268,12 @@
             box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
             transform: translateY(30px) scale(0.9);
             opacity: 0;
-            will-change: transform, opacity;
+            contain: layout style paint;
         }
 
         .modal.active .modal-content {
             animation: slideUpScale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+            will-change: transform, opacity;
         }
 
         @keyframes slideUpScale {
@@ -363,7 +387,7 @@
             transition: all 0.2s ease;
             border: 2px solid transparent;
             position: relative;
-            will-change: transform, opacity;
+            contain: layout style paint;
         }
 
         .pix-code-area::before {
@@ -394,6 +418,7 @@
         .pix-code-area.active {
             display: block;
             animation: slideInFade 0.4s ease forwards;
+            will-change: transform, opacity;
         }
 
         @keyframes slideInFade {
@@ -424,8 +449,9 @@
             display: flex;
             justify-content: center;
             gap: 12px;
-            margin-top: 20px;
+            margin-top: 15px;
             flex-wrap: wrap;
+            overflow: visible;
         }
 
         .small-icon {
@@ -440,11 +466,13 @@
             border: 1px solid rgba(255, 255, 255, 0.2);
             transition: all 0.3s ease;
             text-decoration: none;
+            position: relative;
+            z-index: 1;
         }
 
         .small-icon:hover {
             background: rgba(255, 255, 255, 0.2);
-            transform: translateY(-3px);
+            transform: scale(1.15);
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
         }