# NOVA X — Marketplace Premium

Proyecto front-end 100% HTML5 + CSS3 + JavaScript Vanilla (sin frameworks ni librerías externas de UI).

## Cómo abrirlo

1. Descomprime el ZIP.
2. Abre la carpeta `NovaX` en Visual Studio Code.
3. Instala la extensión **Live Server** (o similar) y haz clic en "Go Live" sobre `index.html`.
   - El proyecto usa `fetch()` para leer `data/productos.json` y `data/categorias.json`, por lo que **debe** servirse con un servidor local (Live Server, `npx serve`, etc.) y no abrirse con doble clic (`file://`), o el navegador bloqueará las peticiones.

## Estructura

```
NovaX/
├── index.html          Página principal (hero, categorías, destacados, ofertas, novedades, testimonios, FAQ)
├── productos.html       Catálogo completo con filtros, orden y buscador
├── detalle.html          Ficha de producto con galería, tabs y relacionados
├── carrito.html          Carrito de compras (LocalStorage)
├── checkout.html         Checkout simulado con métodos de pago
├── perfil.html            Mi cuenta (pedidos, datos, direcciones, preferencias) — requiere sesión iniciada
├── favoritos.html         Productos guardados
├── contacto.html          Formulario de contacto
├── login.html              Inicio de sesión (simulado con LocalStorage)
├── registro.html            Creación de cuenta (simulado con LocalStorage)
├── css/
│   ├── variables.css     Tokens de diseño (color, tipografía, espaciado)
│   ├── style.css         Reset y estructura base
│   ├── components.css    Header, cards, drawer, modal, forms, footer...
│   ├── animations.css    Keyframes y scroll-reveal
│   └── responsive.css    Media queries mobile-first
├── js/
│   ├── api.js             Carga de JSON + utilidades (precio, estrellas, debounce)
│   ├── app.js              Orquestador general (header, loader, FAQ, reveal, home)
│   ├── slider.js            Hero slider + parallax 3D con el mouse
│   ├── productos.js          Tarjetas de producto, catálogo, detalle, quick view
│   ├── buscador.js            Autocompletado en tiempo real
│   ├── carrito.js              Carrito (drawer + página) con LocalStorage
│   ├── favoritos.js             Favoritos con LocalStorage
│   ├── darkmode.js               Modo oscuro persistente
│   ├── auth.js                    Login / registro / sesión simulados con LocalStorage
│   ├── toast.js                   Notificaciones flotantes
│   └── checkout.js                 Validación de formulario y simulación de pago
├── data/
│   ├── productos.json    24 productos en 6 categorías
│   └── categorias.json   6 categorías
└── assets/               Carpetas para banners, íconos y logos propios
```

## Funcionalidades incluidas

- Header con blur al hacer scroll, buscador con autocompletado, carrito con contador animado y modo oscuro persistente.
- Barra superior tipo Temu con mensajes en loop infinito.
- Hero slider de 5 banners con autoplay, flechas, indicadores y un título que reacciona en 3D al movimiento del mouse.
- Catálogo cargado 100% desde JSON, con filtros por categoría, orden y búsqueda en vivo.
- Tarjetas de producto con imagen alterna al hover, badges, favoritos y vista rápida (quick view).
- Carrito persistente en LocalStorage (drawer lateral + página completa) con control de cantidades.
- Checkout simulado con 6 métodos de pago y validación de formulario.
- Favoritos persistentes, página de perfil con pestañas y formulario de contacto validado.
- Accesibilidad: foco visible, `skip-link`, `aria-label`/`aria-live`, `prefers-reduced-motion` respetado.
- Responsive mobile-first para todas las páginas.

## Cuentas de usuario (login simulado)

- `registro.html` crea una cuenta guardando `{nombre, email, password}` en `localStorage["novax_users"]` e inicia sesión automáticamente.
- `login.html` valida las credenciales contra esa misma lista y guarda el correo activo en `localStorage["novax_session"]`.
- `perfil.html` está protegida: si no hay sesión iniciada, redirige automáticamente a `login.html`.
- El ícono 👤 del header cambia de destino solo (a `login.html` o `perfil.html`) según si hay sesión activa.
- **Importante:** es una simulación 100% en el navegador, sin backend ni cifrado real. No ingreses contraseñas verdaderas; solo es para mostrar el flujo de login/registro.

## Notas

- Las imágenes de producto usan `picsum.photos` como placeholder de alta calidad; puedes reemplazarlas por tus propias fotos en `assets/` y actualizando las rutas en `data/productos.json`.
- No se usó Bootstrap, Tailwind, jQuery ni React: todo el CSS y JS es propio.
