feat: Add new sections for Primeros Pasos, Racha Diaria, Recordatorios, Sistema de Juego, Tienda, Tips y un índice de contenidos; update styles for modern pixel art design

src/server/public/assets/css/modern-pixel.css

@@ -0,0 +1,408 @@
+/* ============================================
+   MODERN PIXEL ART - AMAYO BOT
+   Diseño moderno con toques pixel art sutiles
+   ============================================ */
+
+/* Fuentes */
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700;800&display=swap');
+
+/* Variables CSS Modernas */
+:root {
+  /* Fondos glassmorphism */
+  --bg-base: #0f0a1e;
+  --bg-elevated: rgba(30, 20, 45, 0.8);
+  --bg-card: rgba(50, 35, 70, 0.6);
+  --bg-hover: rgba(70, 50, 95, 0.7);
+  
+  /* Acentos modernos Halloween */
+  --purple-500: #a78bfa;
+  --purple-600: #8b5cf6;
+  --orange-500: #f59e0b;
+  --orange-600: #d97706;
+  --pink-500: #ec4899;
+  --green-500: #10b981;
+  
+  /* Texto */
+  --text-primary: #f9fafb;
+  --text-secondary: #d1d5db;
+  --text-muted: #9ca3af;
+  
+  /* Efectos */
+  --border-subtle: rgba(167, 139, 250, 0.15);
+  --blur-bg: blur(20px);
+  --shadow-glow: 0 0 40px rgba(167, 139, 250, 0.2);
+}
+
+/* Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Body - Fondo moderno con gradiente */
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--text-primary);
+  background: 
+    radial-gradient(ellipse at top, rgba(167, 139, 250, 0.15) 0%, transparent 50%),
+    radial-gradient(ellipse at bottom, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
+    linear-gradient(180deg, #0f0a1e 0%, #1a0f2e 50%, #0f0a1e 100%);
+  background-attachment: fixed;
+  min-height: 100vh;
+  position: relative;
+}
+
+/* Partículas de fondo sutiles */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image: 
+    radial-gradient(circle at 20% 50%, rgba(167, 139, 250, 0.03) 1px, transparent 1px),
+    radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.03) 1px, transparent 1px);
+  background-size: 50px 50px, 80px 80px;
+  pointer-events: none;
+  z-index: 0;
+  animation: float 20s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+/* Tipografía Moderna */
+h1 {
+  font-family: 'Press Start 2P', monospace;
+  font-size: clamp(2rem, 5vw, 4rem);
+  font-weight: 400;
+  line-height: 1.3;
+  background: linear-gradient(135deg, var(--purple-500) 0%, var(--orange-500) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 1.5rem;
+  text-shadow: none;
+  animation: gradientPulse 8s ease-in-out infinite;
+}
+
+h2 {
+  font-family: 'Inter', sans-serif;
+  font-size: clamp(1.5rem, 3vw, 2.5rem);
+  font-weight: 700;
+  color: var(--purple-500);
+  margin-bottom: 1rem;
+  letter-spacing: -0.02em;
+}
+
+h3 {
+  font-family: 'Inter', sans-serif;
+  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 0.75rem;
+}
+
+p {
+  color: var(--text-secondary);
+  margin-bottom: 1rem;
+  line-height: 1.7;
+}
+
+/* Glassmorphism Cards */
+.pixel-box,
+.modern-card {
+  background: var(--bg-card);
+  backdrop-filter: var(--blur-bg);
+  -webkit-backdrop-filter: var(--blur-bg);
+  border: 1px solid var(--border-subtle);
+  border-radius: 24px;
+  padding: 2rem;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.pixel-box::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, 
+    rgba(167, 139, 250, 0.05) 0%, 
+    transparent 50%,
+    rgba(245, 158, 11, 0.05) 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+}
+
+.pixel-box:hover {
+  transform: translateY(-4px);
+  border-color: rgba(167, 139, 250, 0.3);
+  box-shadow: 
+    0 12px 48px rgba(0, 0, 0, 0.4),
+    0 0 0 1px rgba(167, 139, 250, 0.2),
+    var(--shadow-glow);
+}
+
+.pixel-box:hover::before {
+  opacity: 1;
+}
+
+/* Botones Modernos */
+.pixel-btn,
+.modern-btn {
+  font-family: 'Inter', sans-serif;
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 1rem 2rem;
+  background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
+  color: white;
+  border: none;
+  border-radius: 16px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 
+    0 4px 16px rgba(139, 92, 246, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  position: relative;
+  overflow: hidden;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.pixel-btn::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, 0.2) 0%, 
+    transparent 50%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.pixel-btn:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 
+    0 8px 24px rgba(139, 92, 246, 0.5),
+    0 0 0 1px rgba(167, 139, 250, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.pixel-btn:hover::before {
+  opacity: 1;
+}
+
+.pixel-btn:active {
+  transform: translateY(0) scale(0.98);
+}
+
+/* Botón Secundario */
+.pixel-btn-secondary {
+  background: linear-gradient(135deg, var(--orange-600), var(--orange-500));
+  box-shadow: 
+    0 4px 16px rgba(245, 158, 11, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.pixel-btn-secondary:hover {
+  box-shadow: 
+    0 8px 24px rgba(245, 158, 11, 0.5),
+    0 0 0 1px rgba(245, 158, 11, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+/* Badge Moderno */
+.pixel-badge {
+  font-family: 'Press Start 2P', monospace;
+  font-size: 0.75rem;
+  padding: 0.75rem 1.5rem;
+  background: var(--bg-elevated);
+  backdrop-filter: var(--blur-bg);
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  display: inline-block;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  animation: floatBadge 3s ease-in-out infinite;
+}
+
+@keyframes floatBadge {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+
+/* Navbar Moderno */
+.pixel-navbar {
+  background: var(--bg-elevated);
+  backdrop-filter: var(--blur-bg);
+  -webkit-backdrop-filter: var(--blur-bg);
+  border-bottom: 1px solid var(--border-subtle);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
+  position: relative;
+}
+
+.pixel-navbar::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, 
+    transparent 0%,
+    var(--purple-500) 25%,
+    var(--orange-500) 50%,
+    var(--purple-500) 75%,
+    transparent 100%);
+  opacity: 0.6;
+}
+
+/* Links Modernos */
+a {
+  color: var(--purple-500);
+  text-decoration: none;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+a:hover {
+  color: var(--purple-600);
+}
+
+a::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--purple-500), var(--orange-500));
+  transition: width 0.3s ease;
+}
+
+a:hover::after {
+  width: 100%;
+}
+
+/* Decoraciones Pixel Art Sutiles */
+.pixel-pumpkin {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background: var(--orange-500);
+  border-radius: 50%;
+  box-shadow: 
+    0 2px 8px rgba(245, 158, 11, 0.4),
+    inset -2px -2px 4px rgba(0, 0, 0, 0.2),
+    inset 2px 2px 4px rgba(255, 255, 255, 0.2);
+  position: relative;
+  animation: pulse 3s ease-in-out infinite;
+}
+
+.pixel-pumpkin::before {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 6px;
+  height: 8px;
+  background: var(--green-500);
+  border-radius: 2px;
+}
+
+.pixel-ghost {
+  display: inline-block;
+  width: 20px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 50% 50% 0 0;
+  box-shadow: 0 2px 12px rgba(255, 255, 255, 0.3);
+  animation: floatGhost 4s ease-in-out infinite;
+  position: relative;
+}
+
+.pixel-star-halloween {
+  display: inline-block;
+  color: var(--orange-500);
+  font-size: 1.25rem;
+  animation: twinkle 2s ease-in-out infinite;
+  text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+@keyframes floatGhost {
+  0%, 100% { transform: translateY(0); opacity: 0.9; }
+  50% { transform: translateY(-10px); opacity: 1; }
+}
+
+@keyframes twinkle {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes gradientPulse {
+  0%, 100% { 
+    background-position: 0% 50%; 
+    filter: brightness(1);
+  }
+  50% { 
+    background-position: 100% 50%;
+    filter: brightness(1.1);
+  }
+}
+
+/* Grid de fondo opcional */
+.pixel-grid-bg {
+  position: relative;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .pixel-box {
+    padding: 1.5rem;
+    border-radius: 16px;
+  }
+  
+  .pixel-btn {
+    padding: 0.875rem 1.5rem;
+    font-size: 0.9rem;
+  }
+  
+  h1 {
+    font-size: 2rem;
+  }
+  
+  h2 {
+    font-size: 1.5rem;
+  }
+}
+
+/* Utilidades */
+.gradient-text {
+  background: linear-gradient(135deg, var(--purple-500), var(--orange-500));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.text-glow {
+  text-shadow: 0 0 20px rgba(167, 139, 250, 0.5);
+}
+
+.card-glow {
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.3),
+    var(--shadow-glow);
+}

src/server/public/assets/css/modern-sections.css

@@ -0,0 +1,281 @@
+/* ============================================
+   MODERN SECTIONS - AMAYO BOT
+   Estilos para secciones de contenido
+   ============================================ */
+
+/* Secciones Principales */
+section {
+  background: rgba(30, 20, 45, 0.6) !important;
+  backdrop-filter: blur(20px) !important;
+  -webkit-backdrop-filter: blur(20px) !important;
+  border: 1px solid rgba(167, 139, 250, 0.15) !important;
+  border-radius: 24px !important;
+  padding: 2.5rem !important;
+  margin-bottom: 2rem;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
+  transition: all 0.3s ease !important;
+}
+
+section:hover {
+  transform: translateY(-4px);
+  border-color: rgba(167, 139, 250, 0.3) !important;
+  box-shadow: 
+    0 12px 48px rgba(0, 0, 0, 0.4),
+    0 0 40px rgba(167, 139, 250, 0.2) !important;
+}
+
+/* Títulos en Secciones */
+section h2 {
+  font-family: 'Inter', sans-serif !important;
+  font-size: clamp(1.5rem, 3vw, 2rem) !important;
+  font-weight: 700 !important;
+  color: #a78bfa !important;
+  margin-bottom: 1.5rem !important;
+  letter-spacing: -0.02em !important;
+  text-shadow: none !important;
+  background: none !important;
+  -webkit-background-clip: unset !important;
+  -webkit-text-fill-color: unset !important;
+}
+
+section h3 {
+  font-family: 'Inter', sans-serif !important;
+  font-size: clamp(1.2rem, 2.5vw, 1.5rem) !important;
+  font-weight: 600 !important;
+  color: #f9fafb !important;
+  margin-bottom: 1rem !important;
+  text-shadow: none !important;
+}
+
+section h4 {
+  font-family: 'Inter', sans-serif !important;
+  font-size: 1.1rem !important;
+  font-weight: 600 !important;
+  color: #d1d5db !important;
+  margin-bottom: 0.75rem !important;
+}
+
+/* Párrafos */
+section p {
+  color: #d1d5db !important;
+  line-height: 1.7 !important;
+  margin-bottom: 1rem;
+}
+
+section p strong {
+  color: #f59e0b !important;
+  font-weight: 600;
+}
+
+/* Listas */
+section ul {
+  list-style: none !important;
+  padding-left: 0 !important;
+  margin-bottom: 1.5rem;
+}
+
+section ul li {
+  position: relative;
+  padding-left: 2rem;
+  margin-bottom: 0.75rem;
+  color: #d1d5db !important;
+  line-height: 1.6;
+}
+
+section ul li::before {
+  content: '→';
+  position: absolute;
+  left: 0;
+  color: #a78bfa;
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+section ol {
+  list-style: none !important;
+  counter-reset: item;
+  padding-left: 0 !important;
+  margin-bottom: 1.5rem;
+}
+
+section ol li {
+  position: relative;
+  padding-left: 2.5rem;
+  margin-bottom: 0.75rem;
+  counter-increment: item;
+  color: #d1d5db !important;
+  line-height: 1.6;
+}
+
+section ol li::before {
+  content: counter(item) ".";
+  position: absolute;
+  left: 0;
+  font-weight: 600;
+  color: #f59e0b;
+  font-family: 'Inter', sans-serif;
+}
+
+/* Cajas de Información */
+section > div[class*="space-y"],
+section > div[class*="border"] {
+  background: rgba(50, 35, 70, 0.5) !important;
+  border: 1px solid rgba(167, 139, 250, 0.2) !important;
+  border-radius: 16px !important;
+  padding: 1.5rem !important;
+  margin-bottom: 1rem;
+  backdrop-filter: blur(10px) !important;
+}
+
+/* Grid de Cards */
+section .grid > div {
+  background: rgba(50, 35, 70, 0.5) !important;
+  border: 1px solid rgba(167, 139, 250, 0.15) !important;
+  border-radius: 16px !important;
+  padding: 1.5rem !important;
+  backdrop-filter: blur(10px) !important;
+  transition: all 0.3s ease !important;
+}
+
+section .grid > div:hover {
+  border-color: rgba(167, 139, 250, 0.3) !important;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
+}
+
+/* Code Blocks */
+section code {
+  background: rgba(15, 10, 30, 0.8) !important;
+  border: 1px solid rgba(167, 139, 250, 0.2) !important;
+  color: #a78bfa !important;
+  padding: 0.25rem 0.5rem !important;
+  border-radius: 6px !important;
+  font-family: 'Monaco', 'Menlo', monospace !important;
+  font-size: 0.9rem !important;
+}
+
+section pre {
+  background: rgba(15, 10, 30, 0.8) !important;
+  border: 1px solid rgba(167, 139, 250, 0.2) !important;
+  border-radius: 12px !important;
+  padding: 1.5rem !important;
+  overflow-x: auto;
+  margin-bottom: 1.5rem;
+  backdrop-filter: blur(10px) !important;
+}
+
+section pre code {
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+  color: #d1d5db !important;
+  font-size: 0.875rem !important;
+}
+
+/* Tablas */
+section table {
+  width: 100% !important;
+  border-collapse: separate !important;
+  border-spacing: 0 !important;
+  margin: 1.5rem 0;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+section th {
+  background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
+  color: white !important;
+  padding: 1rem !important;
+  text-align: left !important;
+  font-family: 'Inter', sans-serif !important;
+  font-size: 0.9rem !important;
+  font-weight: 600 !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.05em !important;
+  border: none !important;
+}
+
+section td {
+  background: rgba(50, 35, 70, 0.5) !important;
+  border-bottom: 1px solid rgba(167, 139, 250, 0.1) !important;
+  padding: 1rem !important;
+  color: #d1d5db !important;
+}
+
+section tr:last-child td {
+  border-bottom: none !important;
+}
+
+section tr:hover td {
+  background: rgba(70, 50, 95, 0.6) !important;
+}
+
+/* Botones en Secciones */
+section button,
+section a[class*="bg-"],
+section .pixel-btn {
+  font-family: 'Inter', sans-serif !important;
+  font-size: 1rem !important;
+  font-weight: 600 !important;
+  padding: 0.875rem 1.75rem !important;
+  background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 12px !important;
+  cursor: pointer !important;
+  transition: all 0.3s ease !important;
+  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3) !important;
+  text-transform: none !important;
+  letter-spacing: 0 !important;
+}
+
+section button:hover,
+section a[class*="bg-"]:hover,
+section .pixel-btn:hover {
+  transform: translateY(-2px) scale(1.02) !important;
+  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.5) !important;
+  background: linear-gradient(135deg, #a78bfa, #8b5cf6) !important;
+}
+
+/* Alertas y Notas */
+section .alert,
+section .note {
+  padding: 1.25rem !important;
+  border-radius: 12px !important;
+  border-left: 4px solid #a78bfa !important;
+  background: rgba(167, 139, 250, 0.1) !important;
+  margin-bottom: 1rem;
+}
+
+section .alert-warning {
+  border-left-color: #f59e0b !important;
+  background: rgba(245, 158, 11, 0.1) !important;
+}
+
+section .alert-success {
+  border-left-color: #10b981 !important;
+  background: rgba(16, 185, 129, 0.1) !important;
+}
+
+section .alert-error {
+  border-left-color: #ef4444 !important;
+  background: rgba(239, 68, 68, 0.1) !important;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  section {
+    padding: 1.5rem !important;
+    border-radius: 16px !important;
+  }
+  
+  section h2 {
+    font-size: 1.5rem !important;
+  }
+  
+  section h3 {
+    font-size: 1.25rem !important;
+  }
+}

src/server/public/assets/css/pixel-art.css

@@ -6,32 +6,40 @@
 /* Fuentes Pixel Art */
 @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
 
-/* Variables de Color Pixel Art - Soft Halloween Theme */
+/* ============================================
+   MODERN PIXEL ART CSS - AMAYO BOT
+   Diseño moderno con toques pixel art y Halloween
+   ============================================ */
+
+/* Fuentes - Solo títulos pixel art */
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700&display=swap');
+
+/* Variables CSS - Modern Halloween */
 :root {
-  /* Backgrounds suaves de Halloween */
-  --pixel-bg-dark: #2d1b3d;        /* Púrpura oscuro suave */
-  --pixel-bg-medium: #3f2a4f;      /* Púrpura medio */
-  --pixel-bg-light: #544163;       /* Lavanda oscuro */
+  /* Fondos glassmorphism */
+  --bg-primary: rgba(30, 20, 45, 0.95);
+  --bg-secondary: rgba(50, 35, 70, 0.8);
+  --bg-card: rgba(70, 50, 95, 0.6);
+  --bg-hover: rgba(90, 65, 120, 0.7);
   
-  /* Acentos de Halloween suaves */
-  --pixel-accent-1: #ff9a56;       /* Naranja calabaza suave */
-  --pixel-accent-2: #9b7bb5;       /* Púrpura pastel */
-  --pixel-accent-3: #ffc65c;       /* Amarillo calabaza */
-  --pixel-accent-4: #8dd4a8;       /* Verde menta suave */
-  --pixel-accent-5: #e89ac7;       /* Rosa Halloween */
-  --pixel-accent-6: #7ec4cf;       /* Turquesa fantasma */
+  /* Acentos modernos */
+  --accent-primary: #a78bfa;    /* Púrpura suave */
+  --accent-secondary: #f59e0b;  /* Naranja Halloween */
+  --accent-tertiary: #ec4899;   /* Rosa */
+  --accent-success: #10b981;    /* Verde */
   
-  /* Tonos de texto suaves */
-  --pixel-text: #f5e6d3;           /* Crema suave */
-  --pixel-text-dim: #d4b8a8;       /* Beige rosado */
-  --pixel-border: #4a2f5a;         /* Púrpura oscuro borde */
-  --pixel-shadow: rgba(29, 15, 41, 0.6);
+  /* Texto */
+  --text-primary: #f3f4f6;
+  --text-secondary: #d1d5db;
+  --text-muted: #9ca3af;
   
-  /* Tonos especiales Halloween */
-  --pixel-warm-glow: #ffb86c;      /* Naranja brillante suave */
-  --pixel-night-sky: #564375;      /* Cielo nocturno Halloween */
-  --pixel-pumpkin: #ff9a56;        /* Calabaza */
-  --pixel-ghost: #e8dff5;          /* Fantasma */
+  /* Bordes y sombras */
+  --border-color: rgba(167, 139, 250, 0.2);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
+  --glow-purple: 0 0 30px rgba(167, 139, 250, 0.3);
+  --glow-orange: 0 0 30px rgba(245, 158, 11, 0.3);
 }
 
 /* Reset y Base */

src/server/views/index.ejs

@@ -7,13 +7,13 @@
 <header class="relative overflow-hidden py-20 sm:py-28">
   <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
     <div class="max-w-5xl mx-auto text-center space-y-12">
-      <!-- Badge Pixel Art con decoración de Halloween -->
+      <!-- Badge Moderno con decoraciones sutiles -->
       <div class="inline-block relative">
-        <span class="pixel-pumpkin absolute -left-12 top-0"></span>
+        <span class="pixel-pumpkin absolute" style="left: -40px; top: 50%; transform: translateY(-50%);"></span>
         <div class="pixel-badge">
           <%= appName %> • v<%= version %>
         </div>
-        <span class="pixel-ghost absolute -right-12 top-0" style="animation-delay: 1s;"></span>
+        <span class="pixel-ghost absolute" style="right: -40px; top: 50%; transform: translateY(-50%);"></span>
       </div>
 
       <!-- Título Principal -->
@@ -21,28 +21,28 @@
         <h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl leading-tight">
           Guía Completa
         </h1>
-        <h2 class="text-4xl sm:text-5xl md:text-6xl">
+        <h2 class="text-4xl sm:text-5xl md:text-6xl" style="font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #a78bfa, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
           <%= appName %>
         </h2>
       </div>
 
-      <!-- Decoración de Halloween con murciélagos y estrellas -->
-      <div class="flex justify-center gap-8 items-center">
-        <span class="pixel-bat"></span>
+      <!-- Decoraciones sutiles -->
+      <div class="flex justify-center gap-6 items-center">
         <span class="pixel-star-halloween">✦</span>
-        <span class="pixel-pumpkin" style="animation-delay: 0.5s;"></span>
-        <span class="pixel-star-halloween" style="animation-delay: 0.8s;">✦</span>
+        <span class="pixel-pumpkin"></span>
+        <span class="pixel-star-halloween" style="animation-delay: 0.5s;">✦</span>
         <span class="pixel-ghost" style="animation-delay: 1s;"></span>
+        <span class="pixel-star-halloween" style="animation-delay: 1.5s;">✦</span>
       </div>
 
-      <!-- Descripción -->
+      <!-- Descripción con diseño moderno -->
       <div class="pixel-box max-w-3xl mx-auto">
-        <p class="text-xl sm:text-2xl leading-relaxed">
+        <p class="text-xl sm:text-2xl leading-relaxed" style="color: var(--text-secondary);">
           Sistema completo de 
-          <span style="color: var(--pixel-accent-1); font-weight: bold;">economía</span>, 
-          <span style="color: var(--pixel-accent-3); font-weight: bold;">minijuegos</span>, 
-          <span style="color: var(--pixel-accent-5); font-weight: bold;">misiones</span> y 
-          <span style="color: var(--pixel-accent-2); font-weight: bold;">IA</span> 
+          <span class="gradient-text font-semibold">economía</span>, 
+          <span class="gradient-text font-semibold">minijuegos</span>, 
+          <span class="gradient-text font-semibold">misiones</span> y 
+          <span class="gradient-text font-semibold">IA</span> 
           para Discord
         </p>
       </div>

src/server/views/layouts/layout.ejs

@@ -11,9 +11,9 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <script defer src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   
-  <!-- Pixel Art CSS -->
-  <link rel="stylesheet" href="/assets/css/pixel-art.css?v=<%= version || '2.0.0' %>">
-  <link rel="stylesheet" href="/assets/css/pixel-sections.css?v=<%= version || '2.0.0' %>">
+  <!-- Modern Pixel Art CSS -->
+  <link rel="stylesheet" href="/assets/css/modern-pixel.css?v=<%= version || '2.0.0' %>">
+  <link rel="stylesheet" href="/assets/css/modern-sections.css?v=<%= version || '2.0.0' %>">
   <link rel="stylesheet" href="/assets/css/styles.css?v=<%= version || '2.0.0' %>">
   <% if (typeof head !== 'undefined' && head) { %>
     <%= head %>
@@ -47,26 +47,26 @@
       </div>
 
       <div class="pixel-border p-4 mb-6" style="background: linear-gradient(135deg, var(--pixel-bg-dark) 0%, var(--pixel-bg-medium) 100%);">
-        <div class="pixel-status-bar justify-center">
+        <div class="flex items-center justify-center gap-4 text-sm" style="color: var(--text-secondary);">
           <span class="pixel-pumpkin" style="width: 16px; height: 16px;"></span>
           <span>VER <%= version %></span>
-          <span>✦</span>
+          <span>•</span>
           <span>DJS <%= djsVersion %></span>
-          <span>✦</span>
+          <span>•</span>
           <span><%= currentDateHuman %></span>
-          <span class="pixel-ghost" style="width: 16px; height: 20px; animation-delay: 1.5s;"></span>
+          <span class="pixel-ghost" style="width: 16px; height: 20px;"></span>
         </div>
       </div>
 
-      <p class="text-center text-xs pixel-text-dim mb-6 flex items-center justify-center gap-2">
-        <span class="pixel-bat" style="width: 24px; height: 12px;"></span>
+      <p class="text-center text-sm mb-6 flex items-center justify-center gap-3" style="color: var(--text-muted);">
+        <span class="pixel-star-halloween">✦</span>
         <span>Amayo © <%= new Date().getFullYear() %> — Documentación para usuarios finales de Discord</span>
         <span class="pixel-star-halloween">✦</span>
       </p>
 
       <div class="text-center">
         <a class="pixel-btn-secondary pixel-btn inline-block" href="#primeros-pasos">
-          <span aria-hidden="true">🎃</span> Volver arriba <span aria-hidden="true">👻</span>
+          ↑ Volver arriba
         </a>
       </div>
     </div>

src/server/views/partials/navbar.ejs

@@ -1,15 +1,14 @@
 <nav class="fixed inset-x-0 top-0 z-50 pixel-navbar">
-  <div class="mx-auto max-w-[120rem] px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
-    <a href="#" class="flex items-center gap-3">
-      <div class="pixel-pumpkin" style="width: 20px; height: 20px;"></div>
-      <span class="font-['Press_Start_2P'] text-sm" style="color: var(--pixel-pumpkin);"><%= appName %></span>
-      <span class="pixel-star-halloween">✦</span>
+  <div class="mx-auto max-w-[120rem] px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+    <a href="#" class="flex items-center gap-3 group">
+      <div class="pixel-pumpkin transition-transform group-hover:scale-110" style="width: 24px; height: 24px;"></div>
+      <span class="font-['Press_Start_2P'] text-sm gradient-text"><%= appName %></span>
     </a>
-    <div class="hidden md:flex items-center gap-6">
-      <a href="#primeros-pasos" class="pixel-tooltip" data-tooltip="🎃 Empieza aquí">Guía</a>
-      <a href="#minijuegos" class="pixel-tooltip" data-tooltip="🎮 Juega">Minijuegos</a>
-      <a href="#economia" class="pixel-tooltip" data-tooltip="💰 Gana">Economía</a>
-      <a href="#faq" class="pixel-tooltip" data-tooltip="👻 Ayuda">FAQ</a>
+    <div class="hidden md:flex items-center gap-8">
+      <a href="#primeros-pasos" class="text-sm font-medium hover:text-purple-400 transition-colors" style="color: var(--text-secondary);">Guía</a>
+      <a href="#minijuegos" class="text-sm font-medium hover:text-purple-400 transition-colors" style="color: var(--text-secondary);">Minijuegos</a>
+      <a href="#economia" class="text-sm font-medium hover:text-purple-400 transition-colors" style="color: var(--text-secondary);">Economía</a>
+      <a href="#faq" class="text-sm font-medium hover:text-purple-400 transition-colors" style="color: var(--text-secondary);">FAQ</a>
     </div>
     <button id="toggle-nav" class="md:hidden" aria-label="Abrir navegación">
       <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">