feat: Fase 1 — Auth JWT+MFA, portales CRUD, UI completa

API:
- AuthModule: register, login, refresh, logout, MFA/TOTP setup+verify
- JwtStrategy + JwtAuthGuard + RolesGuard + CurrentUser decorator
- PackagesModule: CRUD paquetes + historial de estados
- PreAlertsModule: pre-alertas por usuario
- UsersModule: gestión de usuarios + roles + activación
- B2BModule: solicitudes de carga pesada/cotización
- ValidationPipe global + CORS configurado

Web (Next.js 15):
- globals.css completo (design system + utility classes)
- Layout raíz con WhatsApp flotante
- /login + /registro funcionales con JWT y redirección por rol
- /portal: dashboard, mi-casillero, mis-paquetes, pre-alerta, calculadora, perfil
- /admin: dashboard, usuarios (gestión roles/activación), tarifas, reportes, auditoría
- /bodega: dashboard, paquetes (crear+actualizar estado), verificación, despacho
- /tracking: tracking real con progreso visual + historial
- /calculadora: calculadora interactiva real (API SENAE §15)
- /como-funciona, /tarifas, /quienes-somos, /casillero
- /carga-pesada + /carga-pesada/cotizacion (formulario B2B)
- lib/api.ts: cliente HTTP con auto-refresh de token

Roles sincronizados con schema: SUPER_ADMIN, ADMIN_EMPRESA,
OPERADOR_BODEGA, AGENTE_ADUANERO, CLIENTE, SOPORTE

apps/web/src/app/como-funciona/page.tsx

@@ -0,0 +1,61 @@
+import Link from "next/link";
+
+const STEPS = [
+  { n: 1, title: "Crea tu casillero gratis", desc: "Regístrate en Moraworld y obtén en segundos tu dirección en New Jersey, EE.UU. (Suite EC-XXXXX)." },
+  { n: 2, title: "Compra en tiendas de EE.UU.", desc: "Usa tu dirección en Amazon, eBay, Shein, Nike u otras. La Suite es tu número de identificación." },
+  { n: 3, title: "Registra una pre-alerta", desc: "Avísanos qué esperas desde el portal para agilizar el proceso cuando llegue a nuestra bodega." },
+  { n: 4, title: "Recibimos en bodega NJ", desc: "Inspeccionamos, pesamos y fotografiamos cada paquete. Te notificamos al instante." },
+  { n: 5, title: "Gestión aduanera SENAE", desc: "Aplicamos el régimen correcto (Mensajería Acelerada, Courier o 4×4) para minimizar tus costos." },
+  { n: 6, title: "Envío a Ecuador", desc: "Consolidamos tu carga y la enviamos por avión o marítimo. Tracking en tiempo real." },
+  { n: 7, title: "Entrega en tu puerta", desc: "Coordinamos la entrega a domicilio en cualquier ciudad de Ecuador." },
+];
+
+export default function ComoFuncionaPage() {
+  return (
+    <div style={{ minHeight: "100vh" }}>
+      <nav className="navbar">
+        <div className="container navbar-inner">
+          <Link href="/" className="navbar-logo">Moraworld<span>.</span></Link>
+          <div className="navbar-links">
+            <Link href="/tracking" className="navbar-link">Tracking</Link>
+            <Link href="/calculadora" className="navbar-link">Calculadora</Link>
+            <Link href="/tarifas" className="navbar-link">Tarifas</Link>
+            <Link href="/registro" className="btn btn-primary btn-sm">Crear casillero</Link>
+          </div>
+        </div>
+      </nav>
+
+      <div style={{ paddingTop: "var(--nav-h)" }}>
+        <div style={{ background: "linear-gradient(135deg, var(--dark) 0%, #0f2050 100%)", color: "white", padding: "4rem 0 3rem", textAlign: "center" }}>
+          <div className="container">
+            <h1 style={{ fontSize: "clamp(1.75rem,4vw,2.5rem)", fontWeight: 800, marginBottom: "1rem" }}>¿Cómo funciona?</h1>
+            <p style={{ color: "rgba(255,255,255,.7)", maxWidth: 560, margin: "0 auto" }}>
+              En 7 simples pasos, compras en EE.UU. y recibes en Ecuador.
+            </p>
+          </div>
+        </div>
+
+        <div className="container" style={{ maxWidth: 720, margin: "4rem auto", padding: "0 1.5rem" }}>
+          <div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
+            {STEPS.map((s, i) => (
+              <div key={s.n} style={{ display: "flex", gap: "1.5rem" }}>
+                <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+                  <div style={{ width: 48, height: 48, borderRadius: "9999px", background: "var(--primary)", color: "white", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: "1.1rem", flexShrink: 0 }}>{s.n}</div>
+                  {i < STEPS.length - 1 && <div style={{ width: 2, flex: 1, background: "var(--gray-200)", marginTop: ".5rem", minHeight: 40 }} />}
+                </div>
+                <div style={{ paddingBottom: "1rem" }}>
+                  <h3 style={{ fontWeight: 700, fontSize: "1.1rem", marginBottom: ".5rem" }}>{s.title}</h3>
+                  <p style={{ color: "var(--gray-600)", lineHeight: 1.6 }}>{s.desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div style={{ textAlign: "center", marginTop: "4rem" }}>
+            <Link href="/registro" className="btn btn-primary btn-xl">Empezar gratis →</Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}