/* ❌ MEDIOCRE */
.button {
  background: blue;
  color: white;
  padding: 10px;
}

/* ✅ PREMIUM */
.button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  letter-spacing: 0.025em;
  box-shadow: 0 4px 14px 0 rgba(102, 126, 234, 0.39);
  transition: all 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px 0 rgba(102, 126, 234, 0.5);
}

:root {
  /* Backgrounds */
  --bg-primary: #0a0a0a;
  --bg-secondary: #141414;
  --bg-tertiary: #1a1a1a;
  --bg-elevated: #242424;
  
  /* Foregrounds */
  --fg-primary: #fafafa;
  --fg-secondary: #a1a1aa;
  --fg-muted: #71717a;
  
  /* Accents */
  --accent-primary: #8b5cf6;
  --accent-secondary: #06b6d4;
  --accent-success: #22c55e;
  --accent-warning: #f59e0b;
  --accent-error: #ef4444;
  
  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: blur(12px);
}

/* Fuentes */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-display: 'Outfit', var(--font-sans);
--font-mono: 'JetBrains Mono', monospace;

/* Escala */
--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */
--text-3xl: 2rem;      /* 32px */
--text-4xl: 2.5rem;    /* 40px */

--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-5: 1.25rem;   /* 20px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-10: 2.5rem;   /* 40px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */

/* Timing functions */
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

/* Duraciones */
--duration-fast: 150ms;
--duration-normal: 200ms;
--duration-slow: 300ms;

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { 
    opacity: 0;
    transform: translateY(10px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-glow {
  0%, 100% { 
    box-shadow: 0 0 5px var(--accent-primary);
  }
  50% { 
    box-shadow: 0 0 20px var(--accent-primary);
  }
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: var(--space-6);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-primary), #a855f7);
  color: white;
  font-weight: 500;
  padding: var(--space-3) var(--space-6);
  border-radius: 8px;
  transition: all var(--duration-normal) var(--ease-out);
}

.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

## Revisión UI/UX

### Colores
- [ ] Paleta armónica (no colores random)
- [ ] Contraste suficiente (WCAG AA mínimo)
- [ ] Dark mode implementado correctamente

### Tipografía
- [ ] Jerarquía clara (h1 > h2 > h3 > p)
- [ ] Pesos tipográficos variados
- [ ] Line-height legible (1.5 para texto)

### Espaciado
- [ ] Grid de 8px respetado
- [ ] Padding consistente en componentes
- [ ] Márgenes equilibrados

### Animaciones
- [ ] Transiciones suaves en hover/focus
- [ ] Feedback visual en interacciones
- [ ] No hay animaciones que causen mareo