shni/amayo
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Rediseño de interfaz con temática de Halloween

Browse Source 
- Actualización de estilos CSS en pixel-sections.css para reflejar una paleta de colores suave de Halloween, incluyendo cambios en gradientes, bordes y sombras.
- Modificación de elementos en index.ejs para incluir decoraciones de Halloween como calabazas y fantasmas.
- Ajustes en layout.ejs y navbar.ejs para incorporar iconos y tooltips relacionados con Halloween.
- Creación de un nuevo archivo README para documentar los cambios y la nueva paleta de colores.
This commit is contained in:
shni
2025-10-09 21:47:18 -05:00
parent 36aeb5573a
commit dbb098e2bf
6 changed files with 767 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

379
README/SOFT_HALLOWEEN_PIXEL_ART.md Normal file
View File

@@ -0,0 +1,379 @@
# 🎃 Rediseño Pixel Art Suave con Temática de Halloween
## 📋 Resumen del Cambio
Transformación del diseño web de Amayo Bot de un estilo "cozy witch" con tonos cálidos a un **pixel art suave con temática de Halloween**, utilizando una paleta de colores púrpura pastel y naranja calabaza.
---
## 🎨 Paleta de Colores Halloween
### Colores Base
```css
--pixel-bg-dark: #2d1b3d /* Púrpura oscuro (fondo principal) */
--pixel-bg-2: #3f2a4f /* Púrpura medio (contenedores) */
--pixel-bg-3: #544163 /* Púrpura claro (elementos elevados) */
--pixel-border: #6b4f7a /* Púrpura grisáceo (bordes) */
```
### Colores de Acento
```css
--pixel-pumpkin: #ff9a56 /* Naranja calabaza (CTA principal) */
--pixel-accent-2: #9b7bb5 /* Lavanda pastel (secundario) */
--pixel-accent-3: #ffc65c /* Amarillo suave (resaltados) */
--pixel-accent-4: #e89ac7 /* Rosa pastel (detalles) */
--pixel-accent-5: #8dd4a8 /* Menta suave (alternativo) */
--pixel-ghost: #e8dff5 /* Blanco fantasma (decoraciones) */
```
### Texto
```css
--pixel-text: #e8dff5 /* Texto principal (muy legible) */
--pixel-text-dim: #b8a8c7 /* Texto secundario */
```
---
## 🔧 Cambios Técnicos Realizados
### 1. **Archivo: `pixel-art.css`** (752 líneas)
#### Variables CSS
- ✅ Reemplazadas todas las variables de colores cálidos por la paleta Halloween
- ✅ Cambiados colores de fondo de marrón a púrpura
- ✅ Acentos cambiados de dorado a naranja calabaza
#### Tipografía
```css
h1: color: var(--pixel-pumpkin) con animación softGlow
h2: color: var(--pixel-accent-3) con sombra suave
h3: color: var(--pixel-accent-2)
```
#### Componentes Actualizados
- **`.pixel-box`**:
- Border radius: `8px` (suavizado)
- Box-shadow: Blur difuminado en lugar de sombras duras
- Gradiente púrpura de fondo
- Glow interno púrpura/naranja en hover
- **`.pixel-btn`**:
- Gradiente: naranja → púrpura
- Border radius: `8px`
- Sombras suaves con blur
- Hover: reverse gradient + glow naranja
- Active: translateY reducido para suavidad
- **`.pixel-badge`**:
- Gradiente naranja/lavanda
- Border radius: `6px`
- Glow naranja suave
- Animación `softFloat` (más lenta y suave)
- **`.pixel-navbar`**:
- Barra inferior con gradiente Halloween (naranja → lavanda → rosa)
- Animación `softScroll` (más lenta: 4s)
- Box-shadow con blur
#### Animaciones Nuevas
```css
@keyframes softGlow /* Brillo suave para títulos */
@keyframes softPulse /* Pulso delicado para fondos */
@keyframes softScroll /* Scroll suave para navbar */
@keyframes softBounce /* Rebote suave para calabazas */
@keyframes softFloat /* Flotación suave para fantasmas */
@keyframes softSparkle /* Centelleo suave para SVG */
@keyframes batFly /* Vuelo de murciélagos */
@keyframes twinkle /* Parpadeo de estrellas */
```
### 2. **Nuevas Decoraciones de Halloween**
#### Calabaza (`.pixel-pumpkin`)
- Círculo naranja con border radius 50%
- Tallo verde en la parte superior
- "Rostro" creado con pseudo-elementos
- Box-shadow con inset para profundidad
- Animación `softBounce`
#### Fantasma (`.pixel-ghost`)
- Forma redondeada en la parte superior
- Base ondulada con radial-gradients
- Color blanco fantasma con glow interno
- "Ojos y boca" con líneas negras
- Animación `softFloat`
#### Murciélago (`.pixel-bat`)
- Forma de alas con clip-path polygon
- Cuerpo central oscuro
- Movimiento de vuelo con `batFly`
- Drop-shadow suave
#### Estrella Halloween (`.pixel-star-halloween`)
- Símbolo ✦ con color amarillo suave
- Text-shadow con glow
- Animación `twinkle` (parpadeo)
### 3. **Archivo: `pixel-sections.css`** (381 líneas)
#### Secciones
- Background: gradiente púrpura (`bg-2` → `bg-3`)
- Border radius: `8px`
- Box-shadow: blur suave en lugar de sombra dura
- Glow naranja/púrpura en hover
#### Elementos de Sección
- **h2**: color amarillo suave con sombra difuminada
- **h3**: color lavanda pastel
- **h4**: color naranja calabaza
- **strong**: naranja calabaza
- **Listas**: bullets ✦ en color naranja
#### Botones en Secciones
- Gradiente naranja → lavanda
- Border radius: `8px`
- Hover: reverse gradient + glow naranja + translateY
- Transición suave de 0.3s
#### Cajas y Cards
- Border radius: `6px`
- Sombras con blur
- Glow interno púrpura
### 4. **Archivo: `index.ejs`**
#### Hero Section
```html
<!-- Badge con calabaza y fantasma -->
<span class="pixel-pumpkin"></span>
<div class="pixel-badge">...</div>
<span class="pixel-ghost"></span>
<!-- Decoraciones -->
<span class="pixel-bat"></span>
<span class="pixel-star-halloween">✦</span>
<span class="pixel-pumpkin"></span>
<span class="pixel-star-halloween">✦</span>
<span class="pixel-ghost"></span>
```
### 5. **Archivo: `layouts/layout.ejs`**
#### Footer
```html
<!-- Status bar con calabaza y fantasma -->
<span class="pixel-pumpkin"></span>
<span class="pixel-ghost"></span>
<!-- Copyright con murciélago y estrella -->
<span class="pixel-bat"></span>
<span class="pixel-star-halloween">✦</span>
<!-- Botón con emojis Halloween -->
<span>🎃</span> Volver arriba <span>👻</span>
```
### 6. **Archivo: `partials/navbar.ejs`**
#### Logo y Links
```html
<!-- Logo con calabaza -->
<div class="pixel-pumpkin"></div>
<span style="color: var(--pixel-pumpkin);">Amayo</span>
<span class="pixel-star-halloween">✦</span>
<!-- Tooltips con emojis -->
data-tooltip="🎃 Empieza aquí"
data-tooltip="👻 Ayuda"
```
---
## 🎯 Características del Diseño Suave
### Contraste Reducido
- Sombras con blur en lugar de offset duro
- Colores pastel en lugar de saturados
- Gradientes graduales de 3 paradas
### Bordes Redondeados
- `border-radius: 8px` en componentes principales
- `border-radius: 6px` en elementos pequeños
- `border-radius: 4px` en detalles
### Animaciones Suaves
- Duraciones aumentadas: 3-4s (antes 2-3s)
- Ease-in-out para transiciones naturales
- Movimientos sutiles (6-8px translateY)
### Grosor de Bordes
- Reducido de `4px` a `3px` en la mayoría de casos
- Reducido de `6px` a `4px` en sombras
### Blur y Glow
- Box-shadows con blur: `4px 4px 12px` (antes `8px 8px 0`)
- Text-shadows con blur: `1px 1px 2px` (antes `2px 2px 0`)
- Glows con opacity reducida: `0.1-0.15` (antes `0.15-0.25`)
---
## 🌟 Elementos Visuales Clave
### Degradados Halloween
```css
/* Botón principal */
background: linear-gradient(135deg, #ff9a56 0%, #9b7bb5 100%);
/* Botón hover */
background: linear-gradient(135deg, #9b7bb5 0%, #ff9a56 100%);
/* Secciones */
background: linear-gradient(135deg, #3f2a4f 0%, #544163 100%);
/* Navbar stripe */
background: repeating-linear-gradient(90deg,
#ff9a56 0px, #ff9a56 8px,
#9b7bb5 8px, #9b7bb5 16px,
#e89ac7 16px, #e89ac7 24px
);
```
### Efectos de Hover
- Buttons: `translateY(-3px)` + brightness(1.1) + glow naranja
- Boxes: `translateY(-3px)` + glow mixto púrpura/naranja
- Links: gradient underline + text-shadow glow
---
## 📱 Responsive
### Breakpoints Mantenidos
```css
@media (max-width: 768px) {
h1: 20px
h2: 16px
h3: 14px
.pixel-btn: 12px padding, 12px 24px
body: 18px
}
```
### Decoraciones Adaptativas
- Calabazas/fantasmas/murciélagos mantienen tamaño proporcional
- Animaciones suaves funcionan bien en móviles
---
## ✅ Checklist de Cambios Completos
### CSS Principal (`pixel-art.css`)
- [x] Variables CSS (paleta Halloween)
- [x] Tipografía (colores + sombras suaves)
- [x] `.pixel-box` (bordes redondeados + sombras suaves)
- [x] `.pixel-btn` (gradiente Halloween + hover suave)
- [x] `.pixel-badge` (colores Halloween + float suave)
- [x] `.pixel-navbar` (stripe Halloween + scroll suave)
- [x] Links (color naranja + glow)
- [x] Body gradient (púrpura 3-stop)
- [x] Grid background (grid púrpura + glow naranja)
- [x] Animaciones (todas suavizadas)
- [x] Decoración Halloween (calabaza, fantasma, murciélago, estrella)
### CSS Secciones (`pixel-sections.css`)
- [x] Secciones (gradiente púrpura + sombras suaves)
- [x] H2/H3/H4 (colores Halloween)
- [x] Listas (bullets ✦ naranja)
- [x] Botones (gradiente Halloween + hover)
- [x] Cards (border-radius + sombras)
- [x] Tablas (colores actualizados)
- [x] Code blocks (border-radius + colores)
### HTML Templates
- [x] `index.ejs` (decoraciones Halloween en hero)
- [x] `layout.ejs` (decoraciones Halloween en footer)
- [x] `navbar.ejs` (logo Halloween + tooltips)
---
## 🚀 Próximos Pasos
1. **Reiniciar servidor web** para ver cambios:
```bash
npm run server
```
2. **Validación visual**:
- Verificar paleta de colores
- Confirmar suavidad de sombras
- Revisar animaciones en diferentes dispositivos
- Validar legibilidad del texto
3. **Feedback del usuario**:
- Confirmar que el diseño es "más suave"
- Validar que la temática Halloween es apropiada
- Ajustar según preferencias
---
## 📝 Notas Técnicas
### Fuentes Usadas
- **Press Start 2P**: Títulos y botones (pixel art)
- **VT323**: Cuerpo de texto y código (monospace retro)
### Archivos CSS Creados
1. `pixel-art.css` (752 líneas) - Componentes y estilos base
2. `pixel-sections.css` (381 líneas) - Overrides para secciones
### Orden de Carga CSS
```html
<link rel="stylesheet" href="/assets/css/pixel-art.css">
<link rel="stylesheet" href="/assets/css/pixel-sections.css">
```
### Backup Original
- Ubicación: `/src/server/views.backup/`
- Contiene: Diseño original de glassmorphism
---
## 🎨 Comparación Visual
### Antes (Cozy Witch)
- Colores: Marrón, dorado, terracota
- Sombras: Duras y offset (8px 8px 0)
- Bordes: Cuadrados (border-radius: 0)
- Decoraciones: Velas, hojas, monedas
- Animaciones: Rápidas (2-3s)
### Después (Soft Halloween)
- Colores: Púrpura, naranja, lavanda
- Sombras: Suaves con blur (4px 4px 12px)
- Bordes: Redondeados (border-radius: 8px)
- Decoraciones: Calabazas, fantasmas, murciélagos
- Animaciones: Lentas (3-4s)
---
## 🔮 Decisiones de Diseño
### ¿Por qué púrpura en lugar de negro?
- Más suave y menos intimidante
- Mejor contraste con naranja
- Mantiene el mood de Halloween sin ser sombrío
### ¿Por qué border-radius en pixel art?
- "Soft pixel art" permite suavizar esquinas
- Mantiene estética pixelada en decoraciones
- Mejora usabilidad (más touch-friendly)
### ¿Por qué sombras con blur?
- Crea profundidad sin dureza
- Más moderno y accesible
- Reduce fatiga visual
---
**Fecha de actualización**: 2025
**Versión del diseño**: Soft Halloween Pixel Art v1.0
**Estado**: ✅ Completo - Pendiente de validación del usuario

451
src/server/public/assets/css/pixel-art.css
View File

@@ -6,30 +6,32 @@
/* Fuentes Pixel Art */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
/* Variables de Color Pixel Art - Cozy Witch Theme */
/* Variables de Color Pixel Art - Soft Halloween Theme */
:root {
/* Tonos cálidos de madera y tierra */
--pixel-bg-dark: #3d2817; /* Madera oscura */
--pixel-bg-medium: #5c3d2e; /* Madera media */
--pixel-bg-light: #7a5243; /* Madera clara */
/* 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 */
/* Acentos mágicos y acogedores */
--pixel-accent-1: #ff6b6b; /* Rojo cálido (pociones) */
--pixel-accent-2: #c77dff; /* Púrpura místico (magia) */
--pixel-accent-3: #ffd166; /* Dorado/amarillo (luz de velas) */
--pixel-accent-4: #06ffa5; /* Verde menta (hierbas) */
--pixel-accent-5: #ff8fab; /* Rosa suave (flores) */
--pixel-accent-6: #4ecdc4; /* Turquesa (cristales) */
/* 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 */
/* Tonos de texto */
--pixel-text: #f8e5d7; /* Beige cálido */
--pixel-text-dim: #c9a68a; /* Café con leche */
--pixel-border: #2a1810; /* Café muy oscuro */
--pixel-shadow: rgba(26, 13, 5, 0.8);
/* 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);
/* Tonos especiales */
--pixel-warm-glow: #ffb347; /* Naranja cálido */
--pixel-night-sky: #4a3b5c; /* Púrpura del atardecer */
/* 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 */
}
/* Reset y Base */
@@ -43,9 +45,9 @@ body {
font-family: 'VT323', monospace;
font-size: 20px;
line-height: 1.4;
background: linear-gradient(180deg, var(--pixel-night-sky) 0%, var(--pixel-bg-dark) 100%);
background: linear-gradient(180deg, var(--pixel-night-sky) 0%, var(--pixel-bg-dark) 60%, #2a1a3a 100%);
color: var(--pixel-text);
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
/* Headings Pixel Art */
@@ -61,7 +63,8 @@ h1, h2, h3, h4, h5, h6 {
h1 {
font-size: 32px;
line-height: 1.6;
animation: pixelGlow 2s ease-in-out infinite;
animation: softGlow 3s ease-in-out infinite;
color: var(--pixel-pumpkin);
}
h2 {
@@ -69,14 +72,14 @@ h2 {
line-height: 1.6;
color: var(--pixel-accent-3);
text-shadow:
2px 2px 0px var(--pixel-border),
0 0 15px var(--pixel-warm-glow);
2px 2px 0px rgba(0, 0, 0, 0.4),
0 0 20px rgba(255, 198, 92, 0.4);
}
h3 {
font-size: 18px;
line-height: 1.6;
color: var(--pixel-accent-5);
color: var(--pixel-accent-2);
}
/* Pixel Border Effect */
@@ -97,16 +100,27 @@ h3 {
}
/* Pixel Box (Contenedores) */
/* Pixel Box Containers */
.pixel-box {
background: linear-gradient(135deg, var(--pixel-bg-medium) 0%, var(--pixel-bg-light) 100%);
border: 4px solid var(--pixel-border);
border-radius: 0;
box-shadow:
8px 8px 0 0 rgba(0, 0, 0, 0.5),
inset 0 0 0 2px rgba(255, 179, 71, 0.1),
0 0 20px rgba(255, 179, 71, 0.2);
background: linear-gradient(135deg,
var(--pixel-bg-2) 0%,
var(--pixel-bg-3) 100%);
border: 3px solid var(--pixel-border);
border-radius: 8px;
padding: 24px;
box-shadow:
4px 4px 12px rgba(0, 0, 0, 0.4),
inset 0 0 30px rgba(155, 123, 181, 0.1);
position: relative;
transition: all 0.3s ease;
}
.pixel-box:hover {
transform: translateY(-3px);
box-shadow:
6px 6px 16px rgba(0, 0, 0, 0.5),
inset 0 0 35px rgba(155, 123, 181, 0.15),
0 0 30px rgba(255, 154, 86, 0.2);
}
.pixel-box::before {
@@ -118,13 +132,13 @@ h3 {
bottom: -2px;
background: linear-gradient(
45deg,
var(--pixel-warm-glow) 0%,
var(--pixel-pumpkin) 0%,
var(--pixel-accent-2) 50%,
var(--pixel-accent-6) 100%
var(--pixel-accent-4) 100%
);
opacity: 0.15;
opacity: 0.1;
z-index: -1;
animation: cozyPulse 4s ease-in-out infinite;
animation: softPulse 4s ease-in-out infinite;
}
/* Botones Pixel Art */
@@ -132,132 +146,135 @@ h3 {
font-family: 'Press Start 2P', cursive;
font-size: 14px;
padding: 16px 32px;
border: 4px solid var(--pixel-border);
background: linear-gradient(180deg, var(--pixel-accent-3) 0%, var(--pixel-warm-glow) 100%);
color: var(--pixel-bg-dark);
border: 3px solid var(--pixel-border);
background: linear-gradient(135deg, var(--pixel-pumpkin) 0%, var(--pixel-accent-2) 100%);
color: white;
text-transform: uppercase;
cursor: pointer;
position: relative;
transition: all 0.1s;
transition: all 0.3s ease;
border-radius: 8px;
box-shadow:
6px 6px 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 15px rgba(255, 179, 71, 0.4);
4px 4px 10px rgba(0, 0, 0, 0.4),
inset 2px 2px 4px rgba(255, 255, 255, 0.15),
inset -2px -2px 4px rgba(0, 0, 0, 0.15);
font-weight: bold;
overflow: visible;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
/* Ornamentos decorativos del botón */
.pixel-btn::before,
.pixel-btn::after {
content: '';
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;
font-size: 12px;
color: var(--pixel-accent-3);
text-shadow: 0 0 10px var(--pixel-accent-3);
opacity: 0.6;
transition: all 0.3s ease;
}
.pixel-btn::before {
top: -6px;
top: -8px;
left: 10px;
}
.pixel-btn::after {
top: -6px;
top: -8px;
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);
transform: scale(1.2);
text-shadow: 0 0 15px var(--pixel-accent-3);
}
/* 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;
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
animation: softSparkle 3s ease-in-out infinite;
}
@keyframes sparkle {
@keyframes softSparkle {
0%, 100% {
transform: scale(1) rotate(0deg);
opacity: 0.7;
opacity: 0.8;
}
50% {
transform: scale(1.1) rotate(5deg);
transform: scale(1.05) rotate(3deg);
opacity: 1;
}
}
.pixel-btn:hover svg {
animation: sparkle 1.5s ease-in-out infinite;
animation: softSparkle 1.8s 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);
background: linear-gradient(135deg, var(--pixel-accent-2) 0%, var(--pixel-pumpkin) 100%);
transform: translateY(-3px);
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),
0 0 40px rgba(255, 179, 71, 0.3);
6px 6px 16px rgba(0, 0, 0, 0.5),
inset 2px 2px 6px rgba(255, 255, 255, 0.2),
0 0 30px rgba(255, 154, 86, 0.5);
filter: brightness(1.1);
}
.pixel-btn:active {
transform: translate(4px, 4px);
transform: translateY(-1px);
box-shadow:
2px 2px 0 0 rgba(0, 0, 0, 0.6),
inset -1px -1px 0 0 rgba(0, 0, 0, 0.3),
inset 1px 1px 0 0 rgba(255, 255, 255, 0.2);
3px 3px 8px rgba(0, 0, 0, 0.5),
inset 1px 1px 3px rgba(255, 255, 255, 0.1);
filter: brightness(0.95);
}
.pixel-btn-secondary {
background: linear-gradient(180deg, var(--pixel-accent-2) 0%, var(--pixel-accent-5) 100%);
background: linear-gradient(135deg, var(--pixel-accent-2) 0%, var(--pixel-accent-4) 100%);
border-color: var(--pixel-border);
color: white;
}
.pixel-btn-secondary:hover {
background: linear-gradient(180deg, var(--pixel-accent-5) 0%, var(--pixel-accent-2) 100%);
background: linear-gradient(135deg, var(--pixel-accent-4) 0%, var(--pixel-accent-2) 100%);
color: white;
transform: translateY(-3px);
box-shadow:
6px 6px 16px rgba(0, 0, 0, 0.5),
0 0 30px rgba(155, 123, 181, 0.4);
filter: brightness(1.1);
}
/* Navbar Pixel Art */
.pixel-navbar {
background: linear-gradient(180deg, var(--pixel-bg-medium) 0%, var(--pixel-bg-dark) 100%);
border-bottom: 4px solid var(--pixel-border);
background: linear-gradient(180deg, var(--pixel-bg-2) 0%, var(--pixel-bg-dark) 100%);
border-bottom: 3px solid var(--pixel-border);
box-shadow:
0 8px 0 0 rgba(0, 0, 0, 0.5),
0 0 20px rgba(255, 179, 71, 0.2);
0 6px 12px rgba(0, 0, 0, 0.4),
0 0 25px rgba(155, 123, 181, 0.15);
position: relative;
}
.pixel-navbar::after {
content: '';
position: absolute;
bottom: -8px;
bottom: -6px;
left: 0;
right: 0;
height: 4px;
height: 3px;
background: repeating-linear-gradient(
90deg,
var(--pixel-accent-3) 0px,
var(--pixel-accent-3) 8px,
var(--pixel-warm-glow) 8px,
var(--pixel-warm-glow) 16px,
var(--pixel-accent-1) 16px,
var(--pixel-accent-1) 24px
var(--pixel-pumpkin) 0px,
var(--pixel-pumpkin) 8px,
var(--pixel-accent-2) 8px,
var(--pixel-accent-2) 16px,
var(--pixel-accent-4) 16px,
var(--pixel-accent-4) 24px
);
animation: cozyScroll 3s linear infinite;
animation: softScroll 4s linear infinite;
}
/* Código Pixel Art */
@@ -280,15 +297,15 @@ pre {
/* Links Pixel Art */
a {
color: var(--pixel-accent-3);
color: var(--pixel-pumpkin);
text-decoration: none;
position: relative;
transition: all 0.3s ease;
}
a:hover {
color: var(--pixel-warm-glow);
text-shadow: 0 0 10px var(--pixel-warm-glow);
color: var(--pixel-accent-3);
text-shadow: 0 0 12px var(--pixel-accent-3);
}
a::after {
@@ -298,7 +315,7 @@ a::after {
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--pixel-accent-3), var(--pixel-warm-glow));
background: linear-gradient(90deg, var(--pixel-pumpkin), var(--pixel-accent-2));
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
@@ -307,7 +324,7 @@ a::after {
a:hover::after {
transform: scaleX(1);
transform-origin: left;
box-shadow: 0 0 8px var(--pixel-warm-glow);
box-shadow: 0 0 10px var(--pixel-accent-2);
}
/* Badges Pixel Art */
@@ -315,18 +332,19 @@ a:hover::after {
font-family: 'Press Start 2P', cursive;
font-size: 10px;
padding: 8px 16px;
background: linear-gradient(135deg, var(--pixel-accent-1) 0%, var(--pixel-accent-5) 100%);
background: linear-gradient(135deg, var(--pixel-pumpkin) 0%, var(--pixel-accent-2) 100%);
color: white;
border: 2px solid var(--pixel-border);
border-radius: 6px;
display: inline-block;
text-transform: uppercase;
box-shadow:
4px 4px 0 0 rgba(0, 0, 0, 0.5),
inset -1px -1px 0 0 rgba(0, 0, 0, 0.3),
inset 1px 1px 0 0 rgba(255, 255, 255, 0.3),
0 0 15px var(--pixel-accent-1);
animation: cozyFloat 3s ease-in-out infinite;
4px 4px 10px rgba(0, 0, 0, 0.4),
inset 1px 1px 2px rgba(255, 255, 255, 0.2),
0 0 20px rgba(255, 154, 86, 0.3);
animation: softFloat 3.5s ease-in-out infinite;
position: relative;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.pixel-badge::before {
@@ -389,66 +407,59 @@ tr:hover td {
}
/* Animaciones Pixel Art */
@keyframes pixelGlow {
@keyframes softGlow {
0%, 100% {
text-shadow:
3px 3px 0px rgba(0, 0, 0, 0.8),
0 0 20px var(--pixel-warm-glow);
2px 2px 2px rgba(0, 0, 0, 0.6),
0 0 25px rgba(255, 154, 86, 0.4);
}
50% {
text-shadow:
3px 3px 0px rgba(0, 0, 0, 0.8),
0 0 40px var(--pixel-accent-3),
0 0 60px var(--pixel-warm-glow);
2px 2px 2px rgba(0, 0, 0, 0.6),
0 0 35px rgba(255, 154, 86, 0.6),
0 0 50px rgba(155, 123, 181, 0.3);
}
}
@keyframes cozyPulse {
@keyframes softPulse {
0%, 100% {
opacity: 0.15;
opacity: 0.1;
transform: scale(1);
}
50% {
opacity: 0.25;
transform: scale(1.02);
opacity: 0.15;
transform: scale(1.01);
}
}
@keyframes cozyScroll {
@keyframes softScroll {
0% { background-position: 0 0; }
100% { background-position: 24px 0; }
}
@keyframes pixelBounce {
@keyframes softBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
50% { transform: translateY(-6px); }
}
@keyframes pixelShake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
20%, 40%, 60%, 80% { transform: translateX(2px); }
}
/* Floating Animation (cozy) */
@keyframes cozyFloat {
@keyframes softFloat {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-5px) rotate(1deg);
transform: translateY(-8px) rotate(2deg);
}
75% {
transform: translateY(5px) rotate(-1deg);
transform: translateY(8px) rotate(-2deg);
}
}
/* Grid Background Pixel */
.pixel-grid-bg {
background:
linear-gradient(rgba(255, 179, 71, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 179, 71, 0.02) 1px, transparent 1px),
linear-gradient(180deg, var(--pixel-night-sky) 0%, var(--pixel-bg-dark) 50%, var(--pixel-bg-medium) 100%);
linear-gradient(rgba(155, 123, 181, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(155, 123, 181, 0.03) 1px, transparent 1px),
linear-gradient(180deg, var(--pixel-bg-dark) 0%, var(--pixel-bg-2) 50%, var(--pixel-bg-3) 100%);
background-size: 16px 16px, 16px 16px, 100% 100%;
position: relative;
}
@@ -462,8 +473,8 @@ tr:hover td {
bottom: 0;
background: radial-gradient(
circle at 50% 20%,
rgba(255, 179, 71, 0.1) 0%,
transparent 50%
rgba(255, 154, 86, 0.08) 0%,
transparent 60%
);
pointer-events: none;
z-index: 0;
@@ -724,11 +735,187 @@ a[href="#primeros-pasos"] img {
}
a[href="#primeros-pasos"]:hover img {
filter: drop-shadow(0 6px 20px rgba(255, 179, 71, 0.6)) brightness(1.1);
transform: translateY(-4px);
filter: drop-shadow(0 6px 25px rgba(255, 154, 86, 0.6)) brightness(1.15);
transform: translateY(-6px) scale(1.05);
}
a[href="#primeros-pasos"]:active img {
transform: translateY(-2px);
filter: drop-shadow(0 4px 15px rgba(255, 179, 71, 0.5));
transform: translateY(-3px) scale(1.02);
filter: drop-shadow(0 4px 18px rgba(255, 154, 86, 0.5));
}
/* ========================================
DECORACIONES DE HALLOWEEN
======================================== */
/* Calabaza Pixel Art */
.pixel-pumpkin {
display: inline-block;
width: 32px;
height: 32px;
background: var(--pixel-pumpkin);
border-radius: 50%;
border: 3px solid var(--pixel-border);
position: relative;
box-shadow:
3px 3px 8px rgba(0, 0, 0, 0.4),
inset -2px -2px 6px rgba(0, 0, 0, 0.3),
inset 2px 2px 6px rgba(255, 255, 255, 0.2);
animation: softBounce 3s ease-in-out infinite;
}
.pixel-pumpkin::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 10px;
background: var(--pixel-accent-5);
border: 2px solid var(--pixel-border);
border-radius: 2px;
}
.pixel-pumpkin::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 16px;
background:
linear-gradient(to right, transparent 6px, var(--pixel-border) 6px, var(--pixel-border) 8px, transparent 8px, transparent 12px, var(--pixel-border) 12px, var(--pixel-border) 14px, transparent 14px),
linear-gradient(to bottom, transparent 4px, var(--pixel-border) 4px, var(--pixel-border) 6px, transparent 6px);
box-shadow:
-2px 10px 0 0 var(--pixel-border),
2px 10px 0 0 var(--pixel-border);
}
/* Fantasma Pixel Art */
.pixel-ghost {
display: inline-block;
width: 28px;
height: 36px;
background: var(--pixel-ghost);
border: 2px solid var(--pixel-border);
border-radius: 50% 50% 0 0;
position: relative;
box-shadow:
2px 2px 8px rgba(0, 0, 0, 0.3),
inset 0 0 15px rgba(255, 255, 255, 0.4);
animation: softFloat 3.5s ease-in-out infinite;
}
.pixel-ghost::before {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 8px;
background:
radial-gradient(circle at 25% 0, transparent 40%, var(--pixel-ghost) 40%),
radial-gradient(circle at 75% 0, transparent 40%, var(--pixel-ghost) 40%);
border-left: 2px solid var(--pixel-border);
border-right: 2px solid var(--pixel-border);
}
.pixel-ghost::after {
content: '';
position: absolute;
top: 12px;
left: 6px;
width: 14px;
height: 6px;
background:
linear-gradient(to right, var(--pixel-border) 4px, transparent 4px, transparent 6px, var(--pixel-border) 6px, var(--pixel-border) 10px, transparent 10px);
box-shadow: 0 8px 0 0 var(--pixel-border);
}
/* Murciélago Pixel Art */
.pixel-bat {
display: inline-block;
width: 40px;
height: 20px;
position: relative;
animation: batFly 4s ease-in-out infinite;
}
.pixel-bat::before {
content: '';
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 10px;
background: var(--pixel-border);
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.pixel-bat::after {
content: '';
position: absolute;
top: 8px;
left: 0;
right: 0;
height: 8px;
background:
linear-gradient(to right,
transparent 0,
var(--pixel-border) 4px,
var(--pixel-border) 8px,
transparent 8px,
transparent 12px,
var(--pixel-border) 12px,
var(--pixel-border) 16px,
transparent 16px,
transparent 24px,
var(--pixel-border) 24px,
var(--pixel-border) 28px,
transparent 28px,
transparent 32px,
var(--pixel-border) 32px,
var(--pixel-border) 36px,
transparent 36px
);
clip-path: polygon(
0% 100%, 10% 0%, 20% 100%, 30% 50%, 50% 50%, 70% 50%, 80% 100%, 90% 0%, 100% 100%
);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
@keyframes batFly {
0%, 100% {
transform: translateX(0) translateY(0);
}
25% {
transform: translateX(-8px) translateY(-4px);
}
75% {
transform: translateX(8px) translateY(4px);
}
}
/* Estrella Halloween */
.pixel-star-halloween {
display: inline-block;
color: var(--pixel-accent-3);
font-size: 20px;
animation: twinkle 2.5s ease-in-out infinite;
text-shadow: 0 0 12px var(--pixel-accent-3);
}
@keyframes twinkle {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.4;
transform: scale(0.9);
}
}

94
src/server/public/assets/css/pixel-sections.css
View File

@@ -1,17 +1,17 @@
/* ============================================
COZY PIXEL ART - SECTIONS OVERRIDES
Diseño witchy/fantasy acogedor
SOFT HALLOWEEN PIXEL ART - SECTIONS OVERRIDES
Diseño suave con temática de Halloween
============================================ */
/* Secciones Principales */
section {
background: linear-gradient(135deg, var(--pixel-bg-medium) 0%, var(--pixel-bg-light) 100%) !important;
border: 4px solid var(--pixel-border) !important;
border-radius: 0 !important;
background: linear-gradient(135deg, var(--pixel-bg-2) 0%, var(--pixel-bg-3) 100%) !important;
border: 3px solid var(--pixel-border) !important;
border-radius: 8px !important;
box-shadow:
8px 8px 0 0 rgba(0, 0, 0, 0.5) !important,
inset 0 0 0 2px rgba(255, 179, 71, 0.15) !important,
0 0 20px rgba(255, 179, 71, 0.2) !important;
4px 4px 12px rgba(0, 0, 0, 0.4) !important,
inset 0 0 30px rgba(155, 123, 181, 0.1) !important,
0 0 25px rgba(255, 154, 86, 0.15) !important;
padding: 32px !important;
margin-bottom: 32px;
position: relative;
@@ -25,7 +25,8 @@ section::before {
left: 8px;
right: 8px;
bottom: 8px;
border: 2px solid rgba(255, 179, 71, 0.1);
border: 2px solid rgba(155, 123, 181, 0.08);
border-radius: 4px;
pointer-events: none;
}
@@ -40,8 +41,8 @@ section h2 {
background-clip: unset !important;
-webkit-text-fill-color: unset !important;
text-shadow:
2px 2px 0px var(--pixel-border),
0 0 20px var(--pixel-warm-glow) !important;
2px 2px 0px rgba(0, 0, 0, 0.4),
0 0 20px rgba(255, 198, 92, 0.4) !important;
margin-bottom: 24px !important;
}
@@ -49,16 +50,16 @@ section h3 {
font-family: 'Press Start 2P', cursive !important;
font-size: 16px !important;
line-height: 1.6 !important;
color: var(--pixel-accent-5) !important;
color: var(--pixel-accent-2) !important;
margin-bottom: 16px !important;
text-shadow: 1px 1px 0px var(--pixel-border);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
section h4 {
font-family: 'VT323', monospace !important;
font-size: 22px !important;
font-weight: bold !important;
color: var(--pixel-accent-4) !important;
color: var(--pixel-pumpkin) !important;
margin-bottom: 12px !important;
}
@@ -69,34 +70,34 @@ section p {
}
section p strong {
color: var(--pixel-accent-4) !important;
color: var(--pixel-pumpkin) !important;
font-weight: bold;
}
/* Cajas de Información */
section > div[class*="space-y"] {
background: var(--pixel-bg-light) !important;
background: var(--pixel-bg-3) !important;
border: 3px solid var(--pixel-border) !important;
border-radius: 0 !important;
border-radius: 6px !important;
padding: 20px !important;
box-shadow:
inset 0 0 20px rgba(0, 0, 0, 0.3),
4px 4px 0 0 rgba(0, 0, 0, 0.5) !important;
4px 4px 10px rgba(0, 0, 0, 0.4) !important;
}
section > div[class*="border-indigo"] {
border-color: var(--pixel-accent-3) !important;
background: var(--pixel-bg-light) !important;
border-color: var(--pixel-accent-2) !important;
background: var(--pixel-bg-3) !important;
}
/* Grid de Cards */
section .grid > div {
background: var(--pixel-bg-light) !important;
background: var(--pixel-bg-3) !important;
border: 3px solid var(--pixel-border) !important;
border-radius: 0 !important;
border-radius: 6px !important;
box-shadow:
4px 4px 0 0 rgba(0, 0, 0, 0.5),
inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
4px 4px 10px rgba(0, 0, 0, 0.4),
inset 0 0 20px rgba(155, 123, 181, 0.08) !important;
padding: 20px !important;
}
@@ -114,10 +115,10 @@ section ul li {
}
section ul li::before {
content: '■';
content: '✦';
position: absolute;
left: 0;
color: var(--pixel-accent-4);
color: var(--pixel-pumpkin);
font-size: 12px;
}
@@ -141,27 +142,27 @@ section ol li::before {
left: 0;
font-family: 'Press Start 2P', cursive;
font-size: 12px;
color: var(--pixel-accent-4);
color: var(--pixel-pumpkin);
}
/* Code Blocks en Secciones */
section code {
background: var(--pixel-bg-dark) !important;
border: 2px solid var(--pixel-accent-2) !important;
color: var(--pixel-accent-4) !important;
color: var(--pixel-accent-3) !important;
padding: 4px 8px !important;
font-family: 'VT323', monospace !important;
font-size: 18px !important;
border-radius: 0 !important;
border-radius: 4px !important;
}
section pre {
background: var(--pixel-bg-dark) !important;
border: 3px solid var(--pixel-border) !important;
padding: 20px !important;
border-radius: 0 !important;
border-radius: 6px !important;
box-shadow:
inset 4px 4px 0 0 rgba(0, 0, 0, 0.5) !important;
inset 3px 3px 8px rgba(0, 0, 0, 0.5) !important;
overflow-x: auto;
}
@@ -169,7 +170,7 @@ section pre code {
background: transparent !important;
border: none !important;
padding: 0 !important;
color: var(--pixel-accent-4) !important;
color: var(--pixel-accent-3) !important;
}
/* Tablas en Secciones */
@@ -189,13 +190,15 @@ section th {
font-size: 12px !important;
text-transform: uppercase !important;
text-align: left !important;
border-radius: 4px !important;
}
section td {
background: var(--pixel-bg-light) !important;
background: var(--pixel-bg-3) !important;
border: 3px solid var(--pixel-border) !important;
padding: 12px !important;
color: var(--pixel-text) !important;
border-radius: 4px !important;
}
section tr:hover td {
@@ -313,28 +316,29 @@ section a[class*="bg-"] {
font-family: 'Press Start 2P', cursive !important;
font-size: 12px !important;
padding: 12px 24px !important;
border: 4px solid var(--pixel-border) !important;
background: var(--pixel-accent-2) !important;
border: 3px solid var(--pixel-border) !important;
background: linear-gradient(135deg, var(--pixel-pumpkin), var(--pixel-accent-2)) !important;
color: white !important;
text-transform: uppercase !important;
cursor: pointer !important;
border-radius: 0 !important;
border-radius: 8px !important;
box-shadow:
6px 6px 0 0 rgba(0, 0, 0, 0.6) !important,
inset -2px -2px 0 0 rgba(0, 0, 0, 0.3) !important,
inset 2px 2px 0 0 rgba(255, 255, 255, 0.2) !important;
transition: all 0.1s !important;
4px 4px 10px rgba(0, 0, 0, 0.4) !important,
inset 2px 2px 4px rgba(255, 255, 255, 0.15) !important;
transition: all 0.3s ease !important;
backdrop-filter: none !important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}
section button:hover,
section a[class*="bg-"]:hover {
background: var(--pixel-accent-3) !important;
transform: translate(2px, 2px) !important;
background: linear-gradient(135deg, var(--pixel-accent-2), var(--pixel-pumpkin)) !important;
transform: translateY(-3px) !important;
box-shadow:
4px 4px 0 0 rgba(0, 0, 0, 0.6) !important,
inset -2px -2px 0 0 rgba(0, 0, 0, 0.3) !important,
inset 2px 2px 0 0 rgba(255, 255, 255, 0.2) !important;
6px 6px 16px rgba(0, 0, 0, 0.5) !important,
inset 2px 2px 6px rgba(255, 255, 255, 0.2) !important,
0 0 30px rgba(255, 154, 86, 0.4) !important;
filter: brightness(1.1) !important;
}
/* Formularios */

18
src/server/views/index.ejs
View File

@@ -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 -->
<!-- Badge Pixel Art con decoración de Halloween -->
<div class="inline-block relative">
<span class="pixel-star absolute -left-8 top-0"></span>
<span class="pixel-pumpkin absolute -left-12 top-0"></span>
<div class="pixel-badge">
<%= appName %> • v<%= version %>
</div>
<span class="pixel-star absolute -right-8 top-0" style="animation-delay: 1s;"></span>
<span class="pixel-ghost absolute -right-12 top-0" style="animation-delay: 1s;"></span>
</div>
<!-- Título Principal -->
@@ -26,11 +26,13 @@
</h2>
</div>
<!-- Decoración con velas -->
<div class="flex justify-center gap-8">
<span class="pixel-candle"></span>
<span class="pixel-candle" style="animation-delay: 0.5s;"></span>
<span class="pixel-candle" style="animation-delay: 1s;"></span>
<!-- Decoración de Halloween con murciélagos y estrellas -->
<div class="flex justify-center gap-8 items-center">
<span class="pixel-bat"></span>
<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-ghost" style="animation-delay: 1s;"></span>
</div>
<!-- Descripción -->

10
src/server/views/layouts/layout.ejs
View File

@@ -48,25 +48,25 @@
<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">
<span class="pixel-star" style="width: 12px; height: 12px;"></span>
<span class="pixel-pumpkin" style="width: 16px; height: 16px;"></span>
<span>VER <%= version %></span>
<span>✦</span>
<span>DJS <%= djsVersion %></span>
<span>✦</span>
<span><%= currentDateHuman %></span>
<span class="pixel-star" style="width: 12px; height: 12px; animation-delay: 1.5s;"></span>
<span class="pixel-ghost" style="width: 16px; height: 20px; animation-delay: 1.5s;"></span>
</div>
</div>
<p class="text-center text-xs pixel-text-dim mb-6 flex items-center justify-center gap-2">
<span class="pixel-coin" style="width: 16px; height: 16px;"></span>
<span class="pixel-bat" style="width: 24px; height: 12px;"></span>
<span>Amayo © <%= new Date().getFullYear() %> — Documentación para usuarios finales de Discord</span>
<span class="pixel-candle" style="width: 8px; height: 12px;"></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>
<span aria-hidden="true">🎃</span> Volver arriba <span aria-hidden="true">👻</span>
</a>
</div>
</div>

10
src/server/views/partials/navbar.ejs
View File

@@ -1,15 +1,15 @@
<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-coin" style="width: 20px; height: 20px;"></div>
<span class="font-['Press_Start_2P'] text-sm" style="color: var(--pixel-accent-3);"><%= appName %></span>
<span class="pixel-star" style="width: 12px; height: 12px;"></span>
<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>
</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="#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>
<a href="#faq" class="pixel-tooltip" data-tooltip="👻 Ayuda">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">