diff --git a/README/BOTONES_ILUSTRATIVOS.md b/README/BOTONES_ILUSTRATIVOS.md
new file mode 100644
index 0000000..0e8b0f8
--- /dev/null
+++ b/README/BOTONES_ILUSTRATIVOS.md
@@ -0,0 +1,228 @@
+# 🎨 Botones Ilustrativos - Actualización Final
+
+## ✨ Integración de SVG Decorativos
+
+Se han mejorado los botones del hero section con ornamentos SVG ilustrativos para complementar el tema cozy/witchy.
+
+---
+
+## 🎯 Cambios Implementados
+
+### **1. Botón Principal "Comenzar ahora"**
+
+#### **Estructura**
+```html
+
+
+
+
+ Comenzar ahora
+
+
+
+
+```
+
+#### **SVG Decorativos**
+- **Estrellas**: Forma de estrella de 8 puntas
+- **Color**: Hereda del color del texto del botón
+- **Animación**: `sparkle` (escala + rotación + opacidad)
+- **Hover**: Animación más rápida (3s → 1.5s)
+
+### **2. Botón Secundario "Ver comandos"**
+
+#### **Estructura**
+```html
+
+```
+
+#### **SVG Menu**
+- **Forma**: 3 rectángulos con border-radius
+- **Estilo**: Limpio y minimalista
+- **Integrado**: Reemplaza el emoji ☰
+
+---
+
+## 🎨 Estilos CSS Añadidos
+
+### **Ornamentos decorativos (`::before` y `::after`)**
+```css
+.pixel-btn::before,
+.pixel-btn::after {
+ content: '';
+ width: 8px;
+ height: 8px;
+ background: var(--pixel-accent-5); /* Rosa suave */
+ border: 2px solid var(--pixel-border);
+ transform: rotate(45deg);
+ opacity: 0.7;
+ position: absolute;
+ top: -6px;
+}
+
+/* Hover effect */
+.pixel-btn:hover::before,
+.pixel-btn:hover::after {
+ opacity: 1;
+ transform: rotate(45deg) scale(1.2);
+ box-shadow: 0 0 10px var(--pixel-accent-5);
+}
+```
+
+### **Animación de SVG**
+```css
+@keyframes sparkle {
+ 0%, 100% {
+ transform: scale(1) rotate(0deg);
+ opacity: 0.7;
+ }
+ 50% {
+ transform: scale(1.1) rotate(5deg);
+ opacity: 1;
+ }
+}
+
+.pixel-btn svg {
+ filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5));
+ animation: sparkle 3s ease-in-out infinite;
+}
+
+.pixel-btn:hover svg {
+ animation: sparkle 1.5s ease-in-out infinite;
+}
+```
+
+### **Glow mejorado en hover**
+```css
+.pixel-btn:hover {
+ box-shadow:
+ 4px 4px 0 0 rgba(0, 0, 0, 0.6),
+ inset -2px -2px 0 0 rgba(0, 0, 0, 0.3),
+ inset 2px 2px 0 0 rgba(255, 255, 255, 0.4),
+ 0 0 25px rgba(255, 179, 71, 0.7), /* Glow interior */
+ 0 0 40px rgba(255, 179, 71, 0.3); /* Glow exterior */
+}
+```
+
+---
+
+## 🎭 Elementos Visuales
+
+### **Componentes del Botón Principal**
+
+```
+┌─────────────────────────────────────┐
+│ ◆ [ornamento] │ ← Pseudo-element ::before
+├─────────────────────────────────────┤
+│ │
+│ ★ Comenzar ahora ★ │ ← SVG + texto + SVG
+│ │
+├─────────────────────────────────────┤
+│ ◆ [ornamento] │ ← Pseudo-element ::after
+└─────────────────────────────────────┘
+```
+
+### **Estados de Interacción**
+
+| Estado | SVG | Ornamentos | Glow |
+|--------|-----|------------|------|
+| **Normal** | Opacidad 70%, rotación suave | Opacidad 70%, escala 1 | 15px |
+| **Hover** | Opacidad 100%, rotación rápida | Opacidad 100%, escala 1.2 | 25px + 40px |
+| **Active** | Continúa animado | Con glow rosa | Intensificado |
+
+---
+
+## 📊 Comparativa Antes/Después
+
+### **Antes**
+```html
+
+ ▶ Comenzar ahora
+
+```
+- Símbolo unicode simple (▶)
+- Sin decoración adicional
+- Glow básico
+
+### **Después**
+```html
+
+
+
+ Comenzar ahora
+
+
+
+```
+- SVG animados con sparkle effect
+- 2 ornamentos decorativos (::before, ::after)
+- Glow mejorado de 2 capas
+- Transiciones fluidas en todos los elementos
+
+---
+
+## 🎨 Paleta de Ornamentos
+
+| Elemento | Color | Variable CSS |
+|----------|-------|--------------|
+| **SVG estrellas** | Hereda del texto | - |
+| **Ornamentos superiores** | Rosa suave | `--pixel-accent-5` (#ff8fab) |
+| **Glow hover** | Naranja cálido | `--pixel-warm-glow` (#ffb347) |
+| **Borde** | Café oscuro | `--pixel-border` (#2a1810) |
+
+---
+
+## 🔧 Archivos Modificados
+
+### 1. `/src/server/views/index.ejs`
+**Cambios**:
+- ✅ Botón principal con estructura flex + 2 SVG decorativos
+- ✅ Botón secundario con SVG de menú hamburguesa
+- ✅ Clase `group` para efectos en hover
+
+### 2. `/src/server/public/assets/css/pixel-art.css`
+**Cambios**:
+- ✅ Pseudo-elements `::before` y `::after` como ornamentos
+- ✅ Animación `@keyframes sparkle` para SVG
+- ✅ Estilos para `svg` dentro de `.pixel-btn`
+- ✅ Glow mejorado con 2 capas en hover
+- ✅ `overflow: visible` para permitir ornamentos fuera del botón
+
+---
+
+## 🎯 Objetivos Logrados
+
+✅ **Integración de SVG decorativos** en lugar de unicode
+✅ **Ornamentos ilustrativos** con pseudo-elements
+✅ **Animaciones suaves** tipo "sparkle" en los iconos
+✅ **Glow atmosférico** de múltiples capas
+✅ **Coherencia visual** con el tema cozy/witchy
+✅ **Interactividad mejorada** en hover con múltiples efectos
+
+---
+
+## 💡 Posibles Extensiones Futuras
+
+1. **Más variedad de SVG**: Diferentes ornamentos por sección
+2. **Partículas flotantes**: Pequeñas estrellas que aparecen al hacer click
+3. **Sound effects**: Sonido de "magia" al hacer click
+4. **Cursor custom**: Varita mágica como cursor en los botones
+5. **Ripple effect**: Ondas al hacer click (efecto tipo agua/magia)
+
+---
+
+## 📝 Notas de Implementación
+
+- **SVG inline**: Permite control total del color y animaciones
+- **currentColor**: Los SVG heredan el color del texto del botón
+- **filter drop-shadow**: Sombra más natural que box-shadow en SVG
+- **Group class**: Permite efectos coordin ados entre padre e hijos en Tailwind
+
+---
+
+**Fecha**: Octubre 9, 2025
+**Versión**: 2.1.0 (Botones Ilustrativos)
+**Status**: ✅ Completado y listo para testing
diff --git a/src/server/public/assets/css/pixel-art.css b/src/server/public/assets/css/pixel-art.css
index f5a28c8..d0d3296 100644
--- a/src/server/public/assets/css/pixel-art.css
+++ b/src/server/public/assets/css/pixel-art.css
@@ -145,8 +145,62 @@ h3 {
inset 2px 2px 0 0 rgba(255, 255, 255, 0.4),
0 0 15px rgba(255, 179, 71, 0.4);
font-weight: bold;
+ overflow: visible;
}
+/* Ornamentos decorativos del botón */
+.pixel-btn::before,
+.pixel-btn::after {
+ content: '';
+ position: absolute;
+ width: 8px;
+ height: 8px;
+ background: var(--pixel-accent-5);
+ border: 2px solid var(--pixel-border);
+ transform: rotate(45deg);
+ opacity: 0.7;
+ transition: all 0.3s;
+}
+
+.pixel-btn::before {
+ top: -6px;
+ left: 10px;
+}
+
+.pixel-btn::after {
+ top: -6px;
+ right: 10px;
+}
+
+.pixel-btn:hover::before,
+.pixel-btn:hover::after {
+ opacity: 1;
+ transform: rotate(45deg) scale(1.2);
+ box-shadow: 0 0 10px var(--pixel-accent-5);
+}
+
+/* SVG icons dentro de botones */
+.pixel-btn svg {
+ filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5));
+ animation: sparkle 3s ease-in-out infinite;
+}
+
+@keyframes sparkle {
+ 0%, 100% {
+ transform: scale(1) rotate(0deg);
+ opacity: 0.7;
+ }
+ 50% {
+ transform: scale(1.1) rotate(5deg);
+ opacity: 1;
+ }
+}
+
+.pixel-btn:hover svg {
+ animation: sparkle 1.5s ease-in-out infinite;
+}
+
+/* Efecto de resplandor en hover para botones principales */
.pixel-btn:hover {
background: linear-gradient(180deg, var(--pixel-warm-glow) 0%, var(--pixel-accent-3) 100%);
transform: translate(2px, 2px);
@@ -154,7 +208,8 @@ h3 {
4px 4px 0 0 rgba(0, 0, 0, 0.6),
inset -2px -2px 0 0 rgba(0, 0, 0, 0.3),
inset 2px 2px 0 0 rgba(255, 255, 255, 0.4),
- 0 0 20px rgba(255, 179, 71, 0.6);
+ 0 0 25px rgba(255, 179, 71, 0.7),
+ 0 0 40px rgba(255, 179, 71, 0.3);
}
.pixel-btn:active {
@@ -662,3 +717,18 @@ tr:hover td {
font-size: 18px;
}
}
+
+/* Hero Button SVG Enhancement */
+a[href="#primeros-pasos"] img {
+ transition: all 0.3s ease;
+}
+
+a[href="#primeros-pasos"]:hover img {
+ filter: drop-shadow(0 6px 20px rgba(255, 179, 71, 0.6)) brightness(1.1);
+ transform: translateY(-4px);
+}
+
+a[href="#primeros-pasos"]:active img {
+ transform: translateY(-2px);
+ filter: drop-shadow(0 4px 15px rgba(255, 179, 71, 0.5));
+}
diff --git a/src/server/public/assets/img/boton_entrar.svg b/src/server/public/assets/images/boton_entrar.svg
similarity index 100%
rename from src/server/public/assets/img/boton_entrar.svg
rename to src/server/public/assets/images/boton_entrar.svg
diff --git a/src/server/views/index.ejs b/src/server/views/index.ejs
index d12a973..432634b 100644
--- a/src/server/views/index.ejs
+++ b/src/server/views/index.ejs
@@ -47,12 +47,19 @@
-