diff --git a/README.md b/README.md
index eb98a43..33338dc 100644
--- a/README.md
+++ b/README.md
@@ -132,6 +132,9 @@ docker compose down --remove-orphans
 * Arranca en puerto **80** internamente.
 * Código fuente en `ui/src/`, configuración en `vite.config.js`.
 
+#### Card Animation
+The data cards implemented in `ui/src/components/ui/NucleoDataCard.vue` now feature a subtle growing animation when hovered over. This animation is implemented purely with CSS using keyframes and transitions defined within the component's `<style scoped>` section, ensuring the styles are encapsulated and don't affect other elements.
+
 ---
 
 ## 📦 CI/CD (`.gitea/workflows/build.yml`)
diff --git a/ui/src/components/ui/NucleoDataCard.vue b/ui/src/components/ui/NucleoDataCard.vue
index 7781a93..1d4d623 100644
--- a/ui/src/components/ui/NucleoDataCard.vue
+++ b/ui/src/components/ui/NucleoDataCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="rounded-lg shadow-md p-6 border-t-4"
+    class="nucleo-data-card-container rounded-lg shadow-md p-6 border-t-4"
     :style="{ backgroundColor: backgroundColor, borderTopColor: accentColor }"
   >
     <!-- Header -->
@@ -86,4 +86,23 @@ export default {
 
 <style scoped>
 /* Scoped styles can be added here if needed, Tailwind CSS is preferred for general styling */
+
+@keyframes grow {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(1.05);
+  }
+}
+
+.nucleo-data-card-container:hover {
+  animation-name: grow;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+}
+
+.nucleo-data-card-container {
+  transition: transform 0.3s ease-out;
+}
 </style>