mudanças

css/sections/hero.css

@@ -1,3 +1,51 @@
+
+.social-links {
+    position: relative;
+}
+
+.social-link {
+    display: inline-flex;
+    align-items: center;
+}
+
+.email-tooltip {
+    position: absolute;
+    background: rgba(40, 40, 40, 0.95);
+    color: #fff;
+    padding: 6px 16px;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-weight: 500;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s, transform 0.3s;
+    z-index: 10;
+    white-space: nowrap;
+    width: max-content;
+    display: block;
+}
+
+.email-tooltip {
+    position: absolute;
+    left: 50%;
+    top: -32px;
+    transform: translateX(-50%) scale(1);
+    background: rgba(40, 40, 40, 0.95);
+    color: #fff;
+    padding: 6px 16px;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-weight: 500;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s, transform 0.3s;
+    z-index: 10;
+    white-space: nowrap;
+}
+
+
 .hero-details {
     display: flex;
     flex-direction: row;
@@ -27,7 +75,7 @@
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 8px;
-    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
+    background: linear-gradient(135deg, var(--text-color) 0%, var(--text-color-light) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -36,7 +84,7 @@
 .description {
     font-size: 1.2rem;
     margin-bottom: 32px;
-    color: rgba(255, 255, 255, 0.8);
+    color: var(--text-color-light);
     font-weight: 400;
 }
 
@@ -45,47 +93,10 @@
     gap: 16px;
     flex-wrap: wrap;
 }
-
 .social-link {
-    padding: 12px 20px;
-    background: rgba(10, 18, 40, 0.85);
-    color: #fff;
-    border: none;
-    border-radius: 10px;
-    text-decoration: none;
-    font-weight: 500;
-    font-size: 15px;
-    position: relative;
-    overflow: visible;
-    box-shadow: 0 2px 16px 0 rgba(31, 38, 135, 0.12);
-    transition: background 0.18s, transform 0.18s;
-}
-/* Modern underline effect under text */
-.social-link span {
-    position: relative;
-    z-index: 1;
-    display: inline-block;
-}
-.social-link span::after {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 2px;
-    background: linear-gradient(90deg, #fff 0%, #667eea 100%);
-    border-radius: 1px;
-    position: absolute;
-    left: 0;
-    bottom: -4px;
-    opacity: 0.7;
-    transition: height 0.18s, opacity 0.18s;
-}
-.social-link:hover {
-    background: rgba(20, 30, 60, 0.95);
-    transform: translateY(-1px) scale(1.03);
-}
-.social-link:hover span::after {
-    height: 3px;
-    opacity: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
 }
 
 @media (max-width: 900px) {
@@ -98,7 +109,6 @@
     }
 }
 
-
 @media (max-width: 768px) {
     .hero-card {
         grid-template-columns: 1fr;
@@ -107,13 +117,6 @@
         text-align: center;
     }
 
-    .avatar {
-        width: 140px;
-        height: 140px;
-        margin: 0 auto;
-        font-size: 40px;
-    }
-
     .name {
         font-size: 2rem;
     }
@@ -132,12 +135,6 @@
         padding: 24px 16px;
     }
 
-    .avatar {
-        width: 120px;
-        height: 120px;
-        font-size: 32px;
-    }
-
     .name {
         font-size: 1.8rem;
     }