mudanças

css/sections/profile.css

@@ -1,4 +1,4 @@
-/* Profile Info Section Styles */
+
 .profile-info {
     margin-top: 1.2rem;
     display: flex;
@@ -22,7 +22,7 @@
 
 .profile-info-item i {
     font-size: 1.3rem;
-    color: #4fc3f7;
+    color: var(--primary-color);
     margin-right: 0.2rem;
 }
 
@@ -33,14 +33,13 @@
 }
 
 .profile-info-value {
-    color: rgba(255, 255, 255, 0.45);
+    color: var(--text-color-dark);
     font-weight: 400;
 }
 
 .profile-info-value span {
     display: block;
 }
-/* profile.css - Styles for avatar and avatar-container */
 
 .profile-container {
     position: relative;
@@ -49,12 +48,12 @@
 .avatar {
     width: 160px;
     height: 160px;
-    border-radius: 24px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: var(--border-radius-large);
+    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--tertiary-color) 100%);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: white;
+    color: var(--text-color);
     position: relative;
     overflow: hidden;
     border: 2px solid rgba(255, 255, 255, 0.2);
@@ -74,5 +73,22 @@
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: 24px;
+    border-radius: var(--border-radius-large);
 }
+
+@media (max-width: 768px) {
+    .avatar {
+        width: 140px;
+        height: 140px;
+        margin: 0 auto;
+        font-size: 40px;
+    }
+}
+
+@media (max-width: 480px) {
+    .avatar {
+        width: 120px;
+        height: 120px;
+        font-size: 32px;
+    }
+}