Refactor code structure for improved readability and maintainability

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
+<a href="#primeros-pasos" class="pixel-btn group">
+  <span class="flex items-center gap-3">
+    <!-- Estrella decorativa izquierda -->
+    <svg>...</svg>
+    <span>Comenzar ahora</span>
+    <!-- Estrella decorativa derecha -->
+    <svg>...</svg>
+  </span>
+</a>
+```
+
+#### **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
+<button class="pixel-btn pixel-btn-secondary flex items-center gap-2">
+  <svg>...</svg> <!-- Icono de menú hamburguesa -->
+  <span>Ver comandos</span>
+</button>
+```
+
+#### **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
+<a class="pixel-btn">
+  ▶ Comenzar ahora
+</a>
+```
+- Símbolo unicode simple (▶)
+- Sin decoración adicional
+- Glow básico
+
+### **Después**
+```html
+<a class="pixel-btn group">
+  <span class="flex items-center gap-3">
+    <svg>★</svg>
+    <span>Comenzar ahora</span>
+    <svg>★</svg>
+  </span>
+</a>
+```
+- 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

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));
+}

src/server/views/index.ejs

@@ -47,12 +47,19 @@
 
       <!-- Botones de Acción -->
       <div class="flex flex-col sm:flex-row gap-6 justify-center items-center pt-4">
-        <a href="#primeros-pasos" class="pixel-btn">
+        <a href="#primeros-pasos" class="block hover:scale-105 transition-transform duration-300">
-          ▶ Comenzar ahora
+          <img src="/assets/images/boton_entrar.svg" alt="Comenzar ahora" class="w-full h-auto" style="max-width: 350px; filter: drop-shadow(0 4px 12px rgba(255, 179, 71, 0.3));">
         </a>
         
-        <button id="toggle-nav" class="pixel-btn pixel-btn-secondary">
+        <button id="toggle-nav" class="pixel-btn pixel-btn-secondary flex items-center gap-2">
-          ☰ Ver comandos
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="3" y="5" width="18" height="2" fill="currentColor" rx="1"/>
+            <rect x="3" y="11" width="18" height="2" fill="currentColor" rx="1"/>
+            <rect x="3" y="17" width="18" height="2" fill="currentColor" rx="1"/>
+          </svg>
+          <span>Ver comandos</span>
+        </button>
+      </div>
         </button>
       </div>