Refactor code structure for improved readability and maintainability

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">
-          ▶ Comenzar ahora
+        <a href="#primeros-pasos" class="block hover:scale-105 transition-transform duration-300">
+          <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">
-          ☰ Ver comandos
+        <button id="toggle-nav" class="pixel-btn pixel-btn-secondary flex items-center gap-2">
+          <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>