diff --git a/src/assets/logo_colorful.png b/src/assets/logo_colorful.png
new file mode 100644
index 0000000..992289f
Binary files /dev/null and b/src/assets/logo_colorful.png differ
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 5c563fc..e0fa551 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -163,3 +163,4 @@
      }
   }
  </script>
+
diff --git a/src/components/Wellcome.vue b/src/components/Wellcome.vue
index 8239744..4641e60 100644
--- a/src/components/Wellcome.vue
+++ b/src/components/Wellcome.vue
@@ -3,17 +3,19 @@
     <v-sheet
       class="hero-section d-flex align-center justify-center text-center pa-8"
     >
-      <div>
+      <div class="glow-bubble bubble-blue"></div>
+      <div class="glow-bubble bubble-green"></div>
+      <div class="glow-bubble bubble-yellow"></div>
+      <div class="glow-bubble bubble-red"></div>
+      <div class="hero-content">
         <v-img
           :src="logo"
           alt="Don Confiao"
           max-width="180"
           class="mx-auto mb-4"
         />
-        <h1 class="text-h4 font-weight-bold text-white mb-2">
-          Don Confiao te atiende
-        </h1>
-        <p class="text-subtitle-1 font-italic font-weight-bold text-white">
+        <h1 class="text-h4 font-weight-bold mb-2">Don Confiao te atiende</h1>
+        <p class="text-subtitle-1 font-italic font-weight-bold">
           Economía solidaria, mercado justo, alimentación sana
         </p>
       </div>
@@ -27,10 +29,14 @@
               <template #prepend>
                 <v-icon color="green" size="48">mdi-hand-heart</v-icon>
               </template>
-              <v-card-title class="font-weight-bold">Nuestra Tienda</v-card-title>
+              <v-card-title class="font-weight-bold"
+                >Nuestra Tienda</v-card-title
+              >
             </v-card-item>
             <v-card-text>
-              Hacer parte de la tienda la ilusión. Participando de esta tienda le apuestas a la economía solidaria, al mercado justo, a la alimentación sana, al campesinado colombiano y a un mundo mejor.
+              Hacer parte de la tienda la ilusión. Participando de esta tienda
+              le apuestas a la economía solidaria, al mercado justo, a la
+              alimentación sana, al campesinado colombiano y a un mundo mejor.
             </v-card-text>
           </v-card>
         </v-col>
@@ -39,14 +45,23 @@
           <v-card class="h-100" elevation="2">
             <v-card-item>
               <template #prepend>
-                <v-icon color="orange-darken-2" size="48">mdi-progress-wrench</v-icon>
+                <v-icon color="orange-darken-2" size="48"
+                  >mdi-progress-wrench</v-icon
+                >
               </template>
-              <v-card-title class="font-weight-bold">En Desarrollo</v-card-title>
+              <v-card-title class="font-weight-bold"
+                >En Desarrollo</v-card-title
+              >
             </v-card-item>
             <v-card-text>
-              Don Confiao apenas está entendiendo cómo funciona esta tienda y por ahora <ResaltedText>solo puede atender las compras de contado</ResaltedText>, ya sea en efectivo o consignación.
+              Don Confiao apenas está entendiendo cómo funciona esta tienda y
+              por ahora
+              <ResaltedText
+                >solo puede atender las compras de contado</ResaltedText
+              >, ya sea en efectivo o consignación.
               <v-alert type="warning" class="mt-3" density="compact">
-                Si no vas a pagar tu compra recuerda que debes hacerlo en la planilla manual
+                Si no vas a pagar tu compra recuerda que debes hacerlo en la
+                planilla manual
               </v-alert>
             </v-card-text>
           </v-card>
@@ -61,7 +76,8 @@
               <v-card-title class="font-weight-bold">Catálogo</v-card-title>
             </v-card-item>
             <v-card-text>
-              Explora nuestro catálogo de productos disponibles. Encuentra todo lo que necesitas y arma tu pedido fácilmente.
+              Explora nuestro catálogo de productos disponibles. Encuentra todo
+              lo que necesitas y arma tu pedido fácilmente.
             </v-card-text>
           </v-card>
         </v-col>
@@ -99,14 +115,173 @@
 </template>
 
 <script setup>
-import ResaltedText from '@/components/ResaltedText.vue'
-import logo from '@/assets/logo.png'
+import ResaltedText from "@/components/ResaltedText.vue";
+import logo from "@/assets/logo_colorful.png";
 </script>
 
 <style scoped>
 .hero-section {
-  min-height: 320px;
-  background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 30%, #E65100 100%) !important;
-  color: white;
+  min-height: 500px; /* Un poco más de aire vertical */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 4rem 2rem;
+  position: relative;
+  overflow: hidden;
+  /* Fondo blanco tiza ultra limpio para que los colores pastel floten */
+  background-color: #f8fafc !important;
+}
+
+.glow-bubble {
+  position: absolute;
+  border-radius: 10%;
+  pointer-events: none;
+  z-index: 1;
+  mix-blend-mode: normal;
+}
+
+.bubble-blue {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(
+    circle,
+    rgba(66, 165, 245, 0.8) 10%,
+    rgba(66, 165, 245, 0) 80%
+  );
+  filter: blur(100px);
+  top: -180px;
+  left: -150px;
+  animation: floatCornerTL 8s ease-in-out infinite;
+}
+
+.bubble-green {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(
+    circle,
+    rgba(0, 200, 83, 0.7) 10%,
+    rgba(0, 200, 83, 0) 80%
+  );
+  filter: blur(100px);
+  bottom: -150px;
+  right: -120px;
+  animation: floatCornerBR 9s ease-in-out infinite;
+  animation-delay: 1.5s;
+}
+
+.bubble-yellow {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(
+    circle,
+    rgba(255, 213, 0, 0.85) 20%,
+    rgba(255, 193, 7, 0) 1000%
+  );
+  filter: blur(80px);
+  top: 50%;
+  left: 50%;
+  animation: glowPulseCenter 8s ease-in-out infinite;
+}
+
+.bubble-red {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(
+    circle,
+    rgba(239, 83, 80, 0.7) 10%,
+    rgba(239, 83, 80, 0) 80%
+  );
+  filter: blur(100px);
+  top: -150px;
+  right: -120px;
+  animation: floatCornerTR 8s ease-in-out infinite;
+  animation-delay: 3s;
+}
+
+/* --- CONTENEDOR ELEGANTE (Glassmorphism) --- */
+.hero-content {
+  position: relative;
+  z-index: 2;
+  color: #0f172a !important; /* Azul pizarra profundo de alta costura */
+  text-align: center;
+  max-width: 750px;
+  margin: 0 auto;
+  padding: 3rem 2.5rem;
+
+  /* El secreto elegante: un sutil escudo de cristal que desenfoca el fondo */
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.08);
+}
+
+/* Eliminamos las sombras de texto redundantes gracias al escudo protector de cristal */
+.hero-content h1 {
+  font-size: 3rem;
+  font-weight: 800;
+  letter-spacing: -0.02em; /* Tipografía compacta estilo Apple */
+  line-height: 1.15;
+  margin-bottom: 1rem;
+}
+
+.hero-content p {
+  font-size: 1.15rem;
+  color: #475569; /* Gris suavizado elegante para el subtítulo */
+  line-height: 1.6;
+}
+
+/* --- ANIMACIONES Ralentizadas y Cinemáticas --- */
+/* --- 1. Esquina Superior Izquierda (Azul) --- */
+@keyframes floatCornerTL {
+  0%,
+  100% {
+    opacity: 0.15;
+    transform: scale(0.9) translate(0, 0);
+  }
+  50% {
+    opacity: 0.85;
+    transform: scale(1.25) translate(40px, 30px); /* Movimiento fluido y orgánico */
+  }
+}
+
+/* --- 2. Esquina Superior Derecha (Rojo) --- */
+@keyframes floatCornerTR {
+  0%,
+  100% {
+    opacity: 0.15;
+    transform: scale(1.2) translate(0, 0); /* Corregido: Escala inicial estable */
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(0.95) translate(-30px, 40px);
+  }
+}
+
+/* --- 3. Esquina Inferior Derecha (Verde) - CORREGIDA --- */
+@keyframes floatCornerBR {
+  0%,
+  100% {
+    opacity: 0.1; /* Corregido: Cambiado de 0 a un estado tenue elegante */
+    transform: scale(0.85) translate(0, 0);
+  }
+  50% {
+    opacity: 0.75; /* Corregido: Cambiado de 0 a visible */
+    transform: scale(1.15) translate(-40px, -30px);
+  }
+}
+
+/* --- 4. Centro (Amarillo) - Optimizado en 3 puntos para máxima fluidez --- */
+@keyframes glowPulseCenter {
+  0%,
+  100% {
+    opacity: 0.25;
+    transform: translate(-50%, -50%) scale(0.85);
+  }
+  50% {
+    opacity: 0.9; /* Simplificado a 50% para sincronía perfecta con las esquinas */
+    transform: translate(-50%, -50%) scale(1.3); /* Un destello central controlado */
+  }
 }
 </style>