Update styles in Experience, Hero, and Projects components for improved visual consistency and accessibility

src/components/Experience.astro

@@ -18,7 +18,7 @@ interface ExperienceProps {
 		    <!-- Línea vertical única -->
             <div class="absolute left-2.25 inset-0 w-px bg-sky-800"></div>
             <!-- Bola que "baja" con el scroll -->
-            <div class="sticky top-1/2 w-5 h-5 rounded-full bg-sky-400 border-4 border-gray-100 shadow-lg translate-y-[-50%] transition-all duration-300 z-10"></div>
+            <div class="sticky top-1/2 w-5 h-5 rounded-full bg-sky-500 border-4 border-gray-300 shadow-lg translate-y-[-50%] transition-all duration-300 z-10"></div>
         </div>
 		<!-- Contenedor de experiencias con padding para que la línea cubra bien -->
 		<div class="space-y-12 pt-8 pb-8">
@@ -30,11 +30,11 @@ interface ExperienceProps {
 								<h4 class="text-xl font-bold text-gray-200 mb-2 md:mb-0 md:max-w-1/2 text-pretty">
 									{exp.role}
 								</h4>
-								<span class="text-sm text-sky-400 mb-4 block md:mb-0">
+								<span class="text-sm text-sky-500 mb-4 block md:mb-0">
 									📅 {exp.duration}
 								</span>
 							</div>
-							<h5 class="text-md font-medium text-gray-300 mb-4">
+							<h5 class="text-md font-medium text-indigo-500 mb-4">
 								{exp.company}
 							</h5>
 							<p class="text-gray-300 text-wrap">

src/components/Hero.astro

@@ -9,18 +9,18 @@ const { name, title, bio, github, linkedin } = Astro.props;
 			<img
 				src="/avatar.webp"
 				alt={`${name} Avatar`}
-				class="w-32 h-32 md:w-48 md:h-48 rounded-full mx-auto border-4 border-slate-600 md:border-slate-300 relative z-20"
+				class="w-32 h-32 md:w-48 md:h-48 rounded-full mx-auto border-4 border-gray-500 md:border-gray-300 relative z-20"
 			/>
-			<div class="absolute -inset-1 rounded-full blur-md bg-gradient-to-br from-slate-500 via-cyan-500 to-indigo-500 z-10 glow"></div>
+			<div class="absolute -inset-1 rounded-full blur-md bg-gradient-to-br from-gray-500 via-cyan-500 to-indigo-500 z-10 glow"></div>
 		</div>
         <div class="flex-1 min-w-0">
             <h1
-                class="text-4xl md:text-6xl font-extrabold tracking-tight bg-gradient-to-r from-slate-300 to-slate-500 bg-clip-text text-transparent mb-4 text-balance"
+                class="text-4xl md:text-6xl font-extrabold tracking-tight bg-gradient-to-r from-gray-300 to-gray-500 bg-clip-text text-transparent mb-4 text-balance"
             >
                 {name}
             </h1>
             <h2
-                class="text-2xl md:text-3xl font-semibold tracking-tight bg-gradient-to-r from-cyan-400 to-indigo-400 bg-clip-text text-transparent mb-6"
+                class="text-2xl md:text-3xl font-semibold tracking-tight bg-gradient-to-r from-cyan-500 to-indigo-500 bg-clip-text text-transparent mb-6"
             >
                 {title}
             </h2>

src/components/Projects.astro

@@ -27,10 +27,10 @@ interface ProjectProps {
                         <img src={project.imageUrl} alt={project.title} class="hidden md:block md:w-48 object-cover" />
                     )}
                     <div class="p-8 flex-1">
-                        <h4 class="text-xl font-bold text-white mb-2">
+                        <h4 class="text-xl font-bold text-gray-200 mb-2">
                             {project.title}
                         </h4>
-                        <p class="text-gray-400 mb-4">{project.description}</p>
+                        <p class="text-gray-300 text-wrap mb-4">{project.description}</p>
                         <div class="flex flex-wrap gap-2 mb-6">
                             {project.tags.map((tag: ProjectTag) => (
                                 <span class="inline-flex items-center px-3 py-1 bg-gray-800 text-gray-300 text-sm rounded-full">