[NIVEL 2 AVANCE] Issues #49-#53 - Componentes Principales Verificados

Todos los componentes del NIVEL 2 ya están implementados correctamente:
- ✅ Notification Bar (#49)
- ✅ Navbar (#50)
- ✅ Hero Section (#51)
- ✅ Sidebar (#52)
- ✅ Footer (#53)

Solo se actualizó notification-bar.css para usar variables CSS.

Próximo paso: NIVEL 3 (Refinamientos visuales)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

wp-content/themes/apus-theme/assets/css/notification-bar.css

@@ -14,19 +14,19 @@
    ============================================ */
 
 .top-notification-bar {
-    background-color: #4C5C6B;
+    background-color: var(--color-slate-gray);
     height: 40px;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
-    z-index: 1050;
-    color: #ffffff;
-    font-size: 0.875rem;
-    animation: slideDown 0.3s ease;
+    z-index: var(--z-navbar);
+    color: var(--color-white);
+    font-size: var(--font-size-sm);
+    animation: slideDown var(--transition-base) ease;
     display: flex;
     align-items: center;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-sm);
 }
 
 /* ============================================