feat(mobile): barra de navegación inferior para pantallas < 860px

- 5 ítems con ícono SVG + label en JetBrains Mono uppercase
- Active state con color accent + glow en ícono via IntersectionObserver
- Glassmorphism: blur(20px) + border-top sutil
- Safe-area-inset para notch/home-indicator iOS
- padding-bottom en main/footer para no quedar tapado
- Light mode compatible

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

Author: devsart95

src/App.tsx

@@ -14,6 +14,7 @@ import { Skills } from './components/sections/Skills'
 import { Projects } from './components/sections/Projects'
 import { Connect } from './components/sections/Connect'
 import { Footer } from './components/Footer'
+import { MobileNav } from './components/MobileNav'
 
 export default function App() {
   return (
@@ -39,6 +40,7 @@ export default function App() {
         <Connect />
       </main>
       <Footer />
+      <MobileNav />
     </LangProvider>
   )
 }

src/components/MobileNav.tsx

@@ -0,0 +1,96 @@
+import { useState, useEffect } from 'react'
+import { useLang } from '../context/LangContext'
+
+const NAV_ITEMS = [
+  {
+    labelKey: 'nav.about' as const,
+    href: '#sobre',
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="8" r="4"/>
+        <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
+      </svg>
+    ),
+  },
+  {
+    labelKey: 'nav.stack' as const,
+    href: '#stack',
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+        <polyline points="16 18 22 12 16 6"/>
+        <polyline points="8 6 2 12 8 18"/>
+      </svg>
+    ),
+  },
+  {
+    labelKey: 'nav.skills' as const,
+    href: '#skills',
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+        <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
+      </svg>
+    ),
+  },
+  {
+    labelKey: 'nav.projects' as const,
+    href: '#proyectos',
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+      </svg>
+    ),
+  },
+  {
+    labelKey: 'nav.contact' as const,
+    href: '#conectar',
+    icon: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
+        <polyline points="22,6 12,13 2,6"/>
+      </svg>
+    ),
+  },
+]
+
+const SECTION_IDS = ['sobre', 'stack', 'skills', 'proyectos', 'conectar']
+
+export function MobileNav() {
+  const { t } = useLang()
+  const [active, setActive] = useState('')
+
+  useEffect(() => {
+    const observers: IntersectionObserver[] = []
+
+    SECTION_IDS.forEach(id => {
+      const el = document.getElementById(id)
+      if (!el) return
+      const obs = new IntersectionObserver(
+        ([entry]) => { if (entry.isIntersecting) setActive(id) },
+        { rootMargin: '-40% 0px -50% 0px' }
+      )
+      obs.observe(el)
+      observers.push(obs)
+    })
+
+    return () => observers.forEach(o => o.disconnect())
+  }, [])
+
+  return (
+    <nav className="mobile-nav" aria-label={t('nav.aria')}>
+      {NAV_ITEMS.map(item => {
+        const sectionId = item.href.replace('#', '')
+        const isActive = active === sectionId
+        return (
+          <a
+            key={item.href}
+            href={item.href}
+            className={`mn-item${isActive ? ' mn-active' : ''}`}
+          >
+            <span className="mn-icon">{item.icon}</span>
+            <span className="mn-label">{t(item.labelKey)}</span>
+          </a>
+        )
+      })}
+    </nav>
+  )
+}

src/index.css

@@ -221,7 +221,48 @@ nav {
   0%,100% { opacity: .25; transform: scaleY(.6); }
   50%     { opacity: .9;  transform: scaleY(1); }
 }
-@media (max-width: 860px) { nav { display: none; } }
+@media (max-width: 860px) { nav:not(.mobile-nav) { display: none; } }
+
+/* ── MOBILE NAV ───────────────────────────────────── */
+.mobile-nav {
+  display: none;
+  position: fixed; bottom: 0; left: 0; right: 0;
+  z-index: 200;
+  flex-direction: row;
+  background: rgba(5, 10, 20, 0.82);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-top: 1px solid rgba(56, 189, 248, 0.1);
+  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
+}
+@media (max-width: 860px) { .mobile-nav { display: flex; } }
+[data-theme="light"] .mobile-nav {
+  background: rgba(241, 245, 249, 0.88);
+  border-top: 1px solid rgba(2, 132, 199, 0.15);
+}
+.mn-item {
+  flex: 1; display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  gap: 3px; padding: 6px 4px;
+  text-decoration: none; color: rgba(148, 163, 184, 0.6);
+  transition: color 180ms;
+  -webkit-tap-highlight-color: transparent;
+}
+.mn-item:active { opacity: 0.7; }
+.mn-active {
+  color: var(--accent);
+}
+.mn-active .mn-icon svg {
+  filter: drop-shadow(0 0 6px var(--accent));
+}
+.mn-icon { display: flex; align-items: center; justify-content: center; }
+.mn-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9px; letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+[data-theme="light"] .mn-item { color: rgba(15, 23, 42, 0.45); }
+[data-theme="light"] .mn-active { color: var(--accent); }
 
 /* ── HERO ─────────────────────────────────────────── */
 #hero { display: flex; align-items: center; padding-top: 80px; }
@@ -1013,3 +1054,6 @@ footer p { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--m
   .hud-row { grid-template-columns:100px 1fr; gap:12px; }
   .lang-selector { top: 60px; right: 12px; }
 }
+@media (max-width: 860px) {
+  main, footer { padding-bottom: 72px; }
+}