docs: agrega mount de .claude.json (la confianza del folder no persistia)

hasTrustDialogAccepted vive en ~/.claude.json (archivo suelto en
/root), no dentro de ~/.claude/ que ya estaba montado -- se perdia en
cada recreacion del contenedor pese a que el login si persistia.
Fix: bind mount archivo-a-archivo, sembrado con el .claude.json ya
confirmado. Verificado en vivo: claude arranca sin re-pedir el
dialogo tras recrear el contenedor.

workloads/docs-portal/docs/arquitectura/sesion-tmux-persistente.md

@@ -0,0 +1,225 @@
+# Sesión persistente de Claude Code (tmux en Docker)
+
+## Problema que resuelve
+
+Correr Claude Code directo en una shell SSH sobre el NAS lo ata al
+ciclo de vida de esa conexión: un corte de red, cambiar de laptop a
+tablet, o cerrar la terminal por accidente mata el proceso y con él
+todo el contexto de trabajo en curso — no hay forma de "retomar
+donde quedó" porque el proceso ya no existe.
+
+**Esto es un problema distinto al de los límites de uso/cuota de
+Claude Code.** Este setup no aumenta cuota de mensajes ni tokens —
+eso lo controla el backend de Anthropic sin importar dónde corra el
+CLI. Lo único que resuelve es que la *sesión de terminal* sobreviva
+a cortes de red o cambios de dispositivo; si la cuota se agota, sigue
+agotada exactamente igual dentro de este setup.
+
+## Por qué Docker y no instalación nativa
+
+ZimaOS no tiene gestor de paquetes tradicional utilizable para esto:
+`/` está montado como `squashfs` de solo lectura (imagen del SO
+inmutable), y `/usr` es un overlay de solo lectura sobre eso —
+`/usr/local/bin` ni siquiera existe y no se puede crear, tampoco como
+root (`mkdir` falla con "Read-only file system"). No hay dónde
+instalar Node.js, npm ni tmux directamente sobre el host.
+
+Un contenedor Docker sortea esto por completo: tiene su propio
+filesystem de escritura (overlay2), independiente del `squashfs` del
+host — ahí es donde `npm install -g` deja el binario de `claude` sin
+tocar el host en absoluto. Lo único que el contenedor toma del host
+es lo que se monta explícitamente como volumen.
+
+## Arquitectura
+
+```mermaid
+flowchart LR
+    SSH["Cliente SSH<br/>(laptop / tablet / lo que sea)"] -->|docker exec| C["Contenedor tmux-host<br/>--network host, --restart unless-stopped"]
+    C --> T["tmux server<br/>sesión 'lab'"]
+    T --> CC["proceso claude<br/>(Claude Code)"]
+    C -.->|bind mount| DATA["/DATA (host)<br/>repos y configs del lab"]
+    C -.->|bind mount| SOCK["/var/run/docker.sock (host)<br/>control de Docker/k3d"]
+    C -.->|bind mount| HOME["/DATA/AppData/k3d-lab-v3/claude-code-home (host)<br/>-> /root/.claude"]
+```
+
+El contenedor sigue vivo aunque la conexión SSH se corte — es el
+servidor tmux, no la shell del cliente, el que sostiene el proceso de
+Claude Code. `--restart unless-stopped` además lo revive si el NAS
+reinicia.
+
+## Contenedor: `tmux-host`
+
+```bash
+docker run -d \
+  --name tmux-host \
+  --restart unless-stopped \
+  -v /DATA:/DATA \
+  -v /media/HDD-Storage:/media/HDD-Storage \
+  -v /var/run/docker.sock:/var/run/docker.sock \
+  -v /DATA/AppData/k3d-lab-v3/claude-code-home:/root/.claude \
+  -v /DATA/AppData/k3d-lab-v3/claude-code-home.json:/root/.claude.json \
+  --network host \
+  alpine sh -c "apk add --no-cache tmux docker-cli bash curl git kubectl nodejs npm && npm install -g @anthropic-ai/claude-code && git config --global --add safe.directory '*' && tail -f /dev/null"
+```
+
+| Volumen | Destino | Por qué |
+|---|---|---|
+| `/DATA` | `/DATA` | Acceso a los repos (`apps-registry`, `platform-infra`, `scripts`) y configs del lab, mismos paths que en el host |
+| `/media/HDD-Storage` | `/media/HDD-Storage` | Ver "Gotcha: el symlink `/DATA/AppData`" abajo — sin esto, los repos no se ven dentro del contenedor pese a montar `/DATA` |
+| `/var/run/docker.sock` | `/var/run/docker.sock` | Seguir controlando Docker y k3d (contenedores, `k3d node`, etc.) desde dentro del contenedor |
+| `/DATA/AppData/k3d-lab-v3/claude-code-home` | `/root/.claude` | Persistir login/config de Claude Code — sobrevive no solo a un `docker restart`, sino a recrear el contenedor entero |
+| `/DATA/AppData/k3d-lab-v3/claude-code-home.json` | `/root/.claude.json` | Ver "Gotcha: la confianza del folder no persistía" abajo — es un archivo suelto, no vive dentro de `~/.claude/` |
+
+## Gotcha: el symlink `/DATA/AppData`
+
+Montar `-v /DATA:/DATA` **no alcanza** para ver los repos dentro del
+contenedor. `/DATA/AppData` en el host es un symlink *absoluto*:
+
+```
+/DATA/AppData -> /media/HDD-Storage/AppData
+```
+
+Los repos del lab (`lab-cruzcloud`) viven físicamente en el disco
+btrfs `/media/HDD-Storage`, no en el ext4 de `/DATA` — ZimaOS lo
+expone dentro de `/DATA` como submount (`/DATA/.media/HDD-Storage/...`,
+que sí viaja al contenedor porque Docker hace bind recursivo por
+defecto) pero el path "bonito" `/DATA/AppData/...` que usan `CLAUDE.md`
+y todos los scripts del lab llega ahí vía ese symlink absoluto, no vía
+el submount. Un symlink absoluto que apunta fuera del árbol montado
+queda roto dentro del contenedor aunque el submount subyacente esté
+perfectamente accesible por otra ruta.
+
+**Cómo se detectó:** todo el trabajo de configuración inicial de este
+mismo setup se hizo con `git`/`docker exec` corriendo *en el host*, no
+dentro del contenedor — nadie había probado `cd
+/DATA/AppData/k3d-lab-v3/lab-cruzcloud` desde una sesión `lab` real
+hasta que se preguntó explícitamente por esto. `ls` devolvía "No such
+file or directory" pese a que el volumen de `/DATA` estaba montado y
+"andando".
+
+**Fix:** montar también `-v /media/HDD-Storage:/media/HDD-Storage`,
+para que el symlink resuelva exactamente igual que en el host.
+
+## Gotcha: git "dubious ownership" dentro del contenedor
+
+Con el mount anterior ya arreglado, `git status`/`git log` dentro del
+contenedor fallan con:
+
+```
+fatal: detected dubious ownership in repository at '/media/HDD-Storage/...'
+```
+
+Los archivos en `/DATA`/`/media/HDD-Storage` pertenecen al usuario
+`devops` del host (via samba), pero los procesos dentro del
+contenedor corren como `root` (UID 0) — git, desde la versión que
+introdujo la protección CVE-2022-24765, rechaza operar sobre un repo
+cuyo dueño no coincide con el UID del proceso, a menos que el path
+esté explícitamente marcado como seguro.
+
+**Fix:** `git config --global --add safe.directory '*'` dentro del
+contenedor. El wildcard (en vez de listar cada repo) es intencional
+acá: este contenedor ya tiene acceso root-equivalente al host vía el
+volumen de `/var/run/docker.sock`, así que restringir `safe.directory`
+por repo no suma aislamiento real.
+
+**Por qué está en el comando de arranque y no como paso manual
+aparte:** igual que los paquetes `apk`, esta configuración vive en el
+filesystem efímero del contenedor (`/root/.gitconfig`, que no está
+bajo el volumen de `/root/.claude`) — se perdería si el contenedor se
+recrea. Ponerla en el `sh -c` de arranque la deja recreándose sola
+cada vez, sin pasos manuales que recordar.
+
+## Gotcha: la confianza del folder no persistía
+
+Al abrir `claude` por primera vez en un directorio, pide confirmar un
+diálogo de "¿confiás en este folder?" (más aún acá, porque este repo
+trae un `.claude/settings.local.json` con permisos pre-aprobados). Esa
+confirmación se guarda en `~/.claude.json` — un **archivo suelto en
+`/root`**, no dentro de la carpeta `~/.claude/` que ya estaba montada
+como volumen. Resultado: aunque el login (`~/.claude/.credentials.json`)
+sí persistía, el diálogo de confianza volvía a aparecer cada vez que
+se recreaba el contenedor — justo el tipo de "reconfigurar de nuevo"
+que este setup existe para evitar.
+
+**Cómo se detectó:** al confirmar el diálogo por primera vez, se
+comparó `/root/.claude.json` dentro del contenedor contra sí mismo
+antes y después — mismo tamaño y mismo `mtime`, es decir, la
+confirmación en pantalla nunca se había registrado. La causa real:
+la primera vez se movió el selector con las flechas pero nunca se
+presionó Enter, así que en rigor el diálogo seguía sin confirmar; una
+vez confirmado *de verdad* (`tmux send-keys` moviendo el cursor a
+"Yes, I trust this folder" + Enter), el archivo saltó de 2.2 KB a
+40 KB y apareció la clave `projects` con la ruta del repo adentro.
+
+**Fix:** copiar ese `.claude.json` ya confirmado a
+`/DATA/AppData/k3d-lab-v3/claude-code-home.json` en el host, y
+montarlo **archivo a archivo** (no como carpeta) en
+`-v .../claude-code-home.json:/root/.claude.json`. A diferencia de
+los demás volúmenes de este setup, este necesitó sembrarse con
+contenido real primero — un bind mount de archivo con un origen que
+no existe todavía en el host termina creando un directorio vacío en
+su lugar, no un archivo, y rompe el arranque del contenedor.
+Verificado en vivo: tras recrear el contenedor con este mount, `claude`
+arrancó directo en la sesión normal, sin volver a pedir el diálogo de
+confianza.
+
+Sobre paquetes: alpine (imagen `alpine` sin pin de versión, la misma
+que uso este setup) sí trae `kubectl` en sus repos — no hizo falta
+cambiar de imagen base ni instalarlo por binario aparte, contrario a
+lo que se sospechaba inicialmente. `nodejs`/`npm` (v24/v11 al momento
+de escribir esto) también están en los repos de alpine y cumplen de
+sobra el mínimo que pide Claude Code.
+
+**Nota sobre `--network host` + `docker.sock`:** el contenedor tiene,
+en la práctica, control equivalente a root sobre el NAS (puede lanzar
+cualquier otro contenedor con cualquier mount). Es una concesión
+deliberada — es exactamente lo que hace falta para seguir operando
+Docker/k3d desde dentro — no un descuido.
+
+## Reconexión: un solo comando
+
+```bash
+/media/HDD-Storage/AppData/k3d-lab-v3/lab-cruzcloud/scripts/lab-session.sh
+```
+
+El script (`scripts/lab-session.sh`) es intencionalmente el mismo
+comando sin importar el estado previo:
+
+```bash
+docker exec -it "$CONTAINER" tmux attach -t "$SESSION" || \
+  docker exec -it "$CONTAINER" tmux new -s "$SESSION"
+```
+
+Si la sesión `lab` existe, se adjunta a ella (mismo shell, mismo
+`claude` corriendo, mismo directorio de trabajo). Si no existe —por
+ejemplo justo después de que el contenedor se recreó desde cero— la
+crea. No hay que recordar cuál de los dos casos aplica.
+
+## Qué sobrevive a qué
+
+| Evento | ¿Sobrevive la sesión tmux (`lab`)? | ¿Sobrevive el login de Claude Code? |
+|---|---|---|
+| Corte de SSH / cerrar la terminal / cambiar de dispositivo | Sí — es exactamente el caso que este setup resuelve | Sí |
+| `docker restart tmux-host` (reinicio del NAS) | **No** — el proceso `tmux server` muere con el contenedor; `lab-session.sh` crea una sesión nueva automáticamente | Sí, vía el volumen montado en `/root/.claude` |
+| `docker rm` + recrear el contenedor desde cero | No | Sí, vía el mismo volumen — no hace falta volver a autenticar ni reconfirmar el diálogo de confianza del folder (ver el mount de `claude-code-home.json`) |
+
+## Validación en vivo
+
+Confirmado en este mismo lab (2026-08-27): se dejó una variable de
+entorno (`export MARCA_PERSISTENCIA=ok_<timestamp>`) corriendo dentro
+de la sesión `lab` vía `tmux send-keys`, y una invocación
+*completamente separada* de `docker exec` (equivalente a una nueva
+conexión) leyó de vuelta el mismo valor — confirma que el estado vive
+en el servidor tmux del contenedor, no en el cliente que se conecta.
+`claude --version` respondió `2.1.250` dentro de esa misma sesión, y
+un archivo de prueba escrito en `/root/.claude` dentro del contenedor
+apareció de inmediato en
+`/DATA/AppData/k3d-lab-v3/claude-code-home` en el host, confirmando
+el bind mount de credenciales.
+
+Después de agregar el mount de `/media/HDD-Storage` y el
+`safe.directory`, se validó además: `md5sum` de `CLAUDE.md` idéntico
+leído desde el host y desde dentro del contenedor (vía el path con
+symlink `/DATA/AppData/...`), y `git log`/`git status` corriendo sin
+error sobre `apps-registry` y `scripts` desde una shell dentro de
+`tmux-host`.

workloads/docs-portal/docs/decisiones/0007-identidad-visual-propia.md

@@ -1,8 +1,16 @@
 # ADR 0007 — Identidad visual propia para ARI Shopping
 
-**Estado:** aceptada (revisión 2, 2026-08-27 — el usuario delegó la elección final entre las 3 opciones de §4)
+**Estado:** reemplazada por [ADR 0008](0008-identidad-navy-coral.md) (2026-08-27)
 **Fecha:** 2026-08-27
 
+> **Superseded (2026-08-27):** la Opción 2 "Atelier cálido" (ciruela/
+> carbón/cobre + Domine) descrita en este ADR se descartó — no
+> convenció combinada con el resto del sitio sin cambiar (header,
+> footer, home y producto seguían con la paleta anterior, ver §7). El
+> ADR 0008 documenta la dirección final ("Navy & Coral") y su
+> cronología completa. Este documento se conserva como registro
+> histórico, sin editar el resto de su contenido.
+
 > **Corrección de dirección #1 (2026-08-27):** la primera versión de
 > este ADR proponía clonar la estética visual de Amazon. Se corrigió a
 > adoptar *principios* de UX, no la estética de un competidor —

workloads/docs-portal/docs/decisiones/0008-identidad-navy-coral.md

@@ -0,0 +1,170 @@
+# ADR 0008 — Identidad visual "Navy & Coral" para ARI Shopping
+
+**Estado:** aceptada (implementación en curso, por sub-fases)
+**Fecha:** 2026-08-27
+**Reemplaza a:** [ADR 0007](0007-identidad-visual-propia.md) (Opción 2, "Atelier cálido")
+
+## 1. Contexto
+
+Este es el tercer intento de identidad visual propia para ARI Shopping,
+después de dos ciclos de implementar-y-descartar en producción (ver
+cronología en §2). El costo real de esos dos ciclos no fue el tiempo
+de escribir el código, fue el tiempo de verlo mal en producción antes
+de poder juzgarlo — y en ambos casos el veredicto real no era sobre la
+paleta en sí, sino sobre verla mezclada con partes del sitio que
+todavía no se habían tocado.
+
+## 2. Cronología completa
+
+1. **Arcoíris original** — la identidad "juguetería" con la que arrancó
+   el storefront: paleta de alta saturación (cian/violeta/fucsia/ámbar/
+   amarillo/lima), `rounded-full` en casi todo, `font-black` como
+   default. Nunca fue una decisión de marca, era el estado por defecto
+   del scaffold inicial.
+2. **Intento de clon de Amazon** (descartado antes de implementarse) —
+   la primera versión de ADR 0007 proponía clonar la estética visual de
+   un competidor directamente. Se corrigió a adoptar *principios* de UX
+   (jerarquía, densidad, señales de confianza), no la estética de nadie
+   — ver la memoria de este cambio de dirección.
+3. **Terracota/espresso/pino/crema + Fraunces** ("cálido, confiable,
+   ligeramente lúdico") — se implementó como *smoke test* aislado en
+   producción (v1.0.176: solo el botón CTA de `ProductCard` en
+   terracota + precio en Fraunces, todo lo demás sin tocar) y se
+   revirtió. Dos motivos reales: (a) un token aislado rodeado del resto
+   del esquema viejo (badges fucsia/amarillo neón) no es evaluable — el
+   choque visual no era "la dirección de marca", era la mezcla
+   incompleta; (b) terracota + serif cálida leía como *rústico/
+   artesanal*, y el objetivo era premium/serio.
+4. **Ciruela/carbón/cobre "Atelier cálido"** (ADR 0007, Opción 2 de 3) —
+   esta vez la implementación cubrió un conjunto completo de
+   componentes que se ven juntos en la misma pantalla (tokens base,
+   `button.tsx`, `badge.tsx`, `product-card.tsx`,
+   `catalog-client.tsx`), evitando el error de proceso del punto
+   anterior. Aun así, header, footer, home y página de producto/drawers
+   quedaron deliberadamente pendientes de una siguiente pasada (ADR
+   0007 §7). Resultado: se descartó — no convenció combinada con el
+   resto del sitio sin cambiar. El catálogo aislado se veía coherente,
+   pero el sitio completo (con el header/footer viejos alrededor)
+   seguía sin leerse como una marca terminada.
+5. **"Navy & Coral"** (esta dirección, final) — marino/coral/coral
+   claro + Poppins para momentos de marca. Ver especificación completa
+   en §4.
+
+## 3. Mejora de proceso: validar barato antes de implementar
+
+A diferencia de los dos intentos anteriores, esta dirección se validó
+visualmente con el usuario mediante mockups de referencia simulados
+**fuera de este entorno, antes de tocar código real**. Ningún ciclo de
+implementación se gastó en generar opciones que después se
+descartarían por gusto — el código de esta ADR se escribe ya sobre una
+dirección aprobada.
+
+Esto vale la pena dejarlo como práctica para el playbook de diseño de
+este proyecto: cuando el costo de deshacer una implementación en
+producción es alto (como pasó en los puntos 3 y 4 de §2), vale la pena
+invertir primero en una validación visual barata y rápida (mockup,
+preview, captura) antes de comprometer ciclos de implementación real,
+en vez de decidir la dirección *mientras* se implementa.
+
+## 4. Especificación de marca
+
+### Paleta
+
+| Rol | Token | Valor |
+|---|---|---|
+| Ancla (header, footer, badge "Nuevo", fondo de hero) | `--color-ari-marino` | `#122844` |
+| Acento único de acción (CTA "Agregar al carrito", precio destacado) | `--color-ari-coral` | `#D85A30` |
+| Acento secundario (subtítulos sobre marino, ala inferior del isotipo) | `--color-ari-coral-claro` | `#F0997B` |
+| Fondo general | — | `#FFFFFF` (blanco puro; reemplaza `--color-ari-hueso`) |
+| Texto secundario / bordes | escala `slate-*` ya usada en el proyecto | sin token nuevo |
+
+### Tipografía
+
+- **Poppins, peso 700** — solo para los "momentos de marca": wordmark
+  del logo, títulos de sección (`h1`/`h2`), precio de producto, texto
+  de CTA. Es el único peso que se carga.
+- **Inter** (ya integrada) se mantiene para body/UI/navegación — no
+  todo el sitio pasa a Poppins.
+- Domine (Opción 2 de ADR 0007) se elimina por completo, incluida su
+  carga vía `next/font`.
+
+### Isotipo
+
+Mariposa geométrica simplificada, construida con 4 elipses (no el
+filigrana intrincado del logo original, que se perdía en tamaños
+chicos):
+
+| Elemento | Parámetros | Color |
+|---|---|---|
+| Ala superior izquierda | elipse `rx=9 ry=7`, `cx=10 cy=8`, rotada -18° | `#D85A30` |
+| Ala superior derecha | elipse `rx=9 ry=7`, `cx=24 cy=8`, rotada 18° | `#D85A30` |
+| Ala inferior izquierda | elipse `rx=6 ry=5`, `cx=12 cy=16`, rotada -10° | `#F0997B` |
+| Ala inferior derecha | elipse `rx=6 ry=5`, `cx=22 cy=16`, rotada 10° | `#F0997B` |
+| Cuerpo | rectángulo `x=16 y=3 width=2 height=18`, redondeado | `#122844` |
+
+Coordenadas base sobre `viewBox 34x24`, sobre fondo circular marino.
+Wordmark "ARI" (Poppins 700, blanco) + "shopping" debajo (Poppins 700,
+`#F0997B`, más chico, letter-spacing amplio).
+
+Assets: `public/images/brand/logo-ari.svg` (lockup completo,
+reemplaza `logo-ari.png`) y `app/icon.svg` (versión reducida — solo
+círculo + mariposa, sin wordmark — favicon/app icon vía la convención
+de Next.js App Router).
+
+## 5. Hallazgo: causa raíz del estado mixto anterior
+
+Al auditar `navbar.tsx` para esta implementación se encontró que,
+desde el arranque de este proyecto de reskin, nunca se había tocado:
+una barra superior con gradiente `from-amber-300 via-yellow-200
+to-lime-200` y una línea decorativa `from-cyan-400 via-violet-500
+to-fuchsia-500`, ambas del esquema arcoíris original (punto 1 de §2).
+Esto confirma que el "estado mixto" visto en producción durante ADR
+0007 no era solo "header pendiente de una pasada futura" en abstracto
+— eran restos concretos y nunca inventariados del esquema anterior,
+conviviendo con cada iteración de paleta desde entonces sin que nadie
+los marcara como deuda. Se eliminan en la sub-fase 2 de esta
+implementación.
+
+## 6. Plan de implementación
+
+Por sub-fases, cada una con rama `fix/*`, diff mostrado y PR sin
+mergear hasta confirmación explícita del usuario. Cada sub-fase debe
+dejar el sitio en un estado internamente coherente (no fragmentos
+aislados en producción — la lección de los puntos 3 y 4 de §2) y debe
+confirmar con evidencia real (no supuesta) que el flujo de
+auto-refresh desde Medusa Admin (precio/descripción/imagen) sigue
+funcionando.
+
+1. Tokens base + logo (`globals.css`, `logo-ari.svg`, favicon).
+2. Header + footer (`navbar.tsx` — incluida la limpieza de §5 —,
+   `footer.tsx`, logo aplicado).
+3. Product card + grid de catálogo + badges.
+4. Home (hero, tiles de categoría, secciones).
+5. Página de producto + drawers de carrito/wishlist.
+
+### Nota de implementación: alias de compatibilidad de tokens
+
+La sub-fase 1 solo toca `globals.css`/`layout.tsx`/assets — no
+`catalog-client.tsx`, `product-card.tsx` ni `button.tsx`, que hoy
+siguen usando los nombres de token de ADR 0007
+(`ari-ciruela`, `ari-carbon-oscuro`, `ari-cobre`, `ari-carbon`,
+`ari-terracota-oscuro`, `ari-hueso`). Para no dejar esos usos sin
+estilo entre sub-fases, `globals.css` define esos nombres como alias
+temporales resueltos ya contra la paleta nueva. Cada sub-fase que
+toque esos archivos reemplaza el nombre de clase por el token
+definitivo; los alias se eliminan por completo al cerrar la sub-fase
+5.
+
+## 7. Consecuencias
+
+- El sitio completo adopta la paleta nueva en un solo despliegue desde
+  la sub-fase 1 (vía los alias de §6), incluso antes de que cada
+  componente migre al nombre de token definitivo — evita repetir el
+  error de "token aislado rodeado del esquema viejo" de los puntos 3 y
+  4 de §2.
+- Domine y su carga de fuente se eliminan; Poppins se agrega mínimo
+  (solo peso 700).
+- Trabajo puramente de frontend: no requiere cambios en
+  `commerce-backend`, `platform-infra`, ni CI nuevo.
+- `docs-portal` se actualiza con capturas/descripción del resultado
+  final una vez cada sub-fase esté validada en producción, no antes.

workloads/docs-portal/mkdocs.yml

@@ -85,6 +85,7 @@ nav:
       - Red y exposición: arquitectura/red-y-exposicion.md
       - Flujo GitOps: arquitectura/gitops-flujo.md
       - Agente de monitoreo: arquitectura/agente-monitoreo.md
+      - Sesión tmux persistente: arquitectura/sesion-tmux-persistente.md
       - Glosario: arquitectura/glosario.md
   - Decisiones (ADRs):
       - "0001 · Por qué k3d": decisiones/0001-por-que-k3d.md
@@ -94,6 +95,7 @@ nav:
       - "0005 · Rediseño storefront": decisiones/0005-rediseno-storefront.md
       - "0006 · Motor de búsqueda y facetas": decisiones/0006-motor-busqueda-facetas.md
       - "0007 · Identidad visual propia": decisiones/0007-identidad-visual-propia.md
+      - "0008 · Identidad Navy & Coral": decisiones/0008-identidad-navy-coral.md
       - Plantilla ADR: decisiones/plantilla-adr.md
   - Playbooks:
       - Crashloop Medusa: playbooks/incidente-crashloop-medusa.md

workloads/docs-portal/patches/deployment.yaml

@@ -25,7 +25,7 @@ spec:
         runAsNonRoot: false
       containers:
         - name: app
-          image: gitea.cruzcloud.net/devops/docs-portal:v1.0.175
+          image: gitea.cruzcloud.net/devops/docs-portal:v1.0.187
           # El base saca TODAS las capabilities. Probado en vivo y
           # revertido: con drop: ALL (aunque se agregue NET_BIND_SERVICE
           # de vuelta) el propio entrypoint de nginx:1.27-alpine falla al

workloads/ecommerce/app/globals.css

@@ -1,16 +1,27 @@
 @import "tailwindcss";
 
 @theme {
-  /* ADR 0007 (Opcion 2, "Atelier calido") -- identidad premium propia,
+  /* ADR 0008 -- paleta final "Azul & Amarillo" (inspirada en Walmart),
-     no derivada de ningun competidor. Ver
+     iteracion sobre "Navy & Coral". Ver
-     docs-portal/docs/decisiones/0007-identidad-visual-propia.md */
+     docs-portal/docs/decisiones/0008-identidad-navy-coral.md */
-  --color-ari-ciruela: #5B3256;        /* CTA -- unico uso reservado a accion */
+  --color-ari-marino: #0055B8;        /* ancla: header, footer, badge "Nuevo", fondo de hero */
-  --color-ari-carbon-oscuro: #221D1A;  /* ancla oscura: header/footer, badge "Nuevo" */
+  --color-ari-coral: #0055B8;         /* boton de accion (CTA): azul solido, nunca amarillo */
-  --color-ari-cobre: #B5723A;          /* acento: links, badge "Top", foco */
+  --color-ari-coral-claro: #FFC220;   /* acento: badges de oferta/descuento/urgencia, detalles del isotipo -- nunca en botones */
-  --color-ari-hueso: #F7F1E6;          /* fondo general */
+
-  --color-ari-carbon: #2A2420;         /* texto principal */
+  /* Alias de compatibilidad -- ADR 0007 definio estos nombres y hoy los
-  --color-ari-terracota-oscuro: #9C4A2E; /* badge de descuento */
+     siguen consumiendo catalog-client.tsx, product-card.tsx y button.tsx
-  --font-display: var(--font-domine), ui-serif, Georgia, serif;
+     (migracion pendiente en las sub-fases 3-5 del ADR 0008). Se resuelven
+     ya contra la paleta nueva para que ningun uso existente quede sin
+     estilo entre sub-fases; se eliminan por completo al cerrar la
+     sub-fase 5. No usar estos alias en código nuevo. */
+  --color-ari-ciruela: var(--color-ari-coral);
+  --color-ari-carbon-oscuro: var(--color-ari-marino);
+  --color-ari-cobre: var(--color-ari-coral-claro);
+  --color-ari-carbon: var(--color-ari-marino);
+  --color-ari-terracota-oscuro: var(--color-ari-coral);
+  --color-ari-hueso: #FFFFFF;
+
+  --font-display: var(--font-poppins), ui-sans-serif, system-ui, sans-serif;
   --animate-accordion-down: accordion-down .2s ease-out;
   --animate-accordion-up: accordion-up .2s ease-out;
 }
@@ -21,10 +32,10 @@
 :root { color-scheme: light; }
 * { border-color: rgb(226 232 240); }
 html { scroll-behavior: smooth; }
-body { margin: 0; background: var(--color-ari-hueso); color: var(--color-ari-carbon); font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; }
+body { margin: 0; background: #FFFFFF; color: var(--color-slate-900); font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; }
 button, a { -webkit-tap-highlight-color: transparent; }
-button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(181 114 58 / .5); outline-offset: 3px; }
+button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(0 85 184 / .5); outline-offset: 3px; }
-::selection { background: rgb(91 50 86 / .2); color: var(--color-ari-carbon); }
+::selection { background: rgb(0 85 184 / .15); color: var(--color-slate-900); }
 
 .content-auto {
   content-visibility: auto;

workloads/ecommerce/app/icon.svg

@@ -0,0 +1,15 @@
+<!-- ADR 0008, paleta final "Azul & Amarillo" (Walmart-inspirada). Version
+     reducida del isotipo para favicon/app icon: solo circulo azul +
+     mariposa, sin wordmark (no cabe legible a este tamano). Convencion de
+     Next.js App Router: este archivo se sirve automaticamente como
+     favicon/app icon. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34" role="img" aria-label="ARI shopping">
+  <circle cx="17" cy="17" r="17" fill="#0055B8"/>
+  <g transform="translate(0 5)">
+    <ellipse cx="10" cy="8" rx="9" ry="7" transform="rotate(-18 10 8)" fill="#FFC220"/>
+    <ellipse cx="24" cy="8" rx="9" ry="7" transform="rotate(18 24 8)" fill="#FFC220"/>
+    <ellipse cx="12" cy="16" rx="6" ry="5" transform="rotate(-10 12 16)" fill="#FFDD73"/>
+    <ellipse cx="22" cy="16" rx="6" ry="5" transform="rotate(10 22 16)" fill="#FFDD73"/>
+    <rect x="16" y="3" width="2" height="18" rx="1" fill="#0055B8"/>
+  </g>
+</svg>

workloads/ecommerce/app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata, Viewport } from "next";
-import { Domine, Inter } from "next/font/google";
+import { Inter, Poppins } from "next/font/google";
 import "./globals.css";
 import { CartDrawer } from "@/components/cart/cart-drawer";
 import { Footer } from "@/components/layout/footer";
@@ -21,15 +21,15 @@ export const metadata: Metadata = {
   openGraph: { title: "ARI Shopping", description: "Tesoros para cada aventura.", type: "website", locale: "es_CO" },
 };
 
-export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#221D1A" };
+export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#0055B8" };
 
-// ADR 0007 (Opcion 2, "Atelier calido"): Domine (titulares/precio) + Inter
+// ADR 0008 ("Navy & Coral"): Poppins peso 700 para los "momentos de marca"
-// (UI/cuerpo) via next/font -- antes "Inter" era solo un nombre de fallback
+// (wordmark, h1/h2, precio, CTA) + Inter para body/UI -- solo se carga el
-// en el CSS, sin garantia real de que el navegador tuviera esa fuente.
+// peso 700, es el unico que usa --font-display.
 const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
-const domine = Domine({ subsets: ["latin"], variable: "--font-domine", display: "swap" });
+const poppins = Poppins({ subsets: ["latin"], weight: ["700"], variable: "--font-poppins", display: "swap" });
 
 export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   const [products, categories] = await Promise.all([getProducts(), getCategories()]);
-  return <html lang="es" className={`${inter.variable} ${domine.variable}`}><body><Navbar products={products} categories={categories} /><main>{children}</main><Footer /><CartDrawer /><WishlistDrawer /></body></html>;
+  return <html lang="es" className={`${inter.variable} ${poppins.variable}`}><body><Navbar products={products} categories={categories} /><main>{children}</main><Footer /><CartDrawer /><WishlistDrawer /></body></html>;
 }

workloads/ecommerce/components/catalog/catalog-client.tsx

@@ -323,18 +323,18 @@ export function CatalogClient({
       <div className="mb-8">
         {breadcrumb.length > 0 && (
           <nav aria-label="Breadcrumb" className="mb-4 flex flex-wrap items-center gap-1.5 text-xs font-bold text-slate-500">
-            <Link href="/catalog" prefetch={false} className="hover:text-ari-ciruela">
+            <Link href="/catalog" prefetch={false} className="hover:text-ari-coral">
               Inicio
             </Link>
             {breadcrumb.map((node, index) => (
               <span key={node.id} className="flex items-center gap-1.5">
                 <ChevronRight className="size-3" />
                 {index === breadcrumb.length - 1 ? (
-                  <span aria-current="page" className="text-ari-carbon">
+                  <span aria-current="page" className="text-ari-marino">
                     {node.name}
                   </span>
                 ) : (
-                  <Link href={`/catalog?category=${encodeURIComponent(node.name)}`} prefetch={false} className="hover:text-ari-ciruela">
+                  <Link href={`/catalog?category=${encodeURIComponent(node.name)}`} prefetch={false} className="hover:text-ari-coral">
                     {node.name}
                   </Link>
                 )}
@@ -342,23 +342,23 @@ export function CatalogClient({
             ))}
           </nav>
         )}
-        <span className="text-xs font-black uppercase tracking-[.18em] text-ari-ciruela">
+        <span className="text-xs font-black uppercase tracking-[.18em] text-ari-coral">
           Catálogo completo
         </span>
-        <h1 className="font-display mt-2 text-5xl font-bold tracking-tight text-ari-carbon">Todos los tesoros</h1>
+        <h1 className="font-display mt-2 text-5xl font-bold tracking-tight text-ari-marino">Todos los tesoros</h1>
         <p className="mt-3 text-slate-500">
           Filtra por categoría, marca o edad sin recargar la página.
         </p>
       </div>
 
       <div className="grid gap-8 lg:grid-cols-[260px_1fr]">
-        <aside className="h-fit space-y-6 rounded-lg border border-slate-100 bg-white p-6 shadow-lg shadow-ari-carbon-oscuro/5 lg:sticky lg:top-44">
+        <aside className="h-fit space-y-6 rounded-lg border border-slate-100 bg-white p-6 shadow-lg shadow-ari-marino/5 lg:sticky lg:top-44">
           <div className="flex items-center justify-between">
             <strong className="flex items-center gap-2 text-lg font-black">
-              <SlidersHorizontal className="size-5 text-ari-cobre" />
+              <SlidersHorizontal className="size-5 text-ari-coral-claro" />
               Filtros
             </strong>
-            <button onClick={reset} className="text-xs font-black text-ari-ciruela">
+            <button onClick={reset} className="text-xs font-black text-ari-coral">
               <X className="mr-1 inline size-3" />
               Limpiar
             </button>
@@ -392,7 +392,7 @@ export function CatalogClient({
                   step={5000}
                   value={maxPrice}
                   onChange={(event) => setMaxPrice(Number(event.target.value))}
-                  className="w-full accent-ari-ciruela"
+                  className="w-full accent-ari-coral"
                 />
                 <p className="mt-2 text-xs font-bold text-slate-500">
                   Hasta ${maxPrice.toLocaleString("es-CO")}
@@ -470,8 +470,8 @@ function Filter({
             onClick={() => onChange(value)}
             className={`rounded-md px-3 py-2 text-xs font-bold transition ${
               selected === value
-                ? "bg-ari-carbon-oscuro text-white"
+                ? "bg-ari-marino text-white"
-                : "bg-slate-100 text-slate-600 hover:bg-ari-cobre/10"
+                : "bg-slate-100 text-slate-600 hover:bg-ari-coral-claro/10"
             }`}
           >
             {value}

workloads/ecommerce/components/layout/footer.tsx

@@ -1,11 +1,10 @@
-import Image from "next/image";
 import Link from "next/link";
 import { Facebook, Instagram, MessageCircle } from "lucide-react";
 
 export function Footer() {
-  return <footer className="bg-slate-950 text-white"><div className="mx-auto grid max-w-7xl gap-10 px-4 py-14 sm:grid-cols-2 lg:grid-cols-4"><div><div className="flex items-center gap-4"><div className="relative size-16 overflow-hidden rounded-full"><Image src="/images/brand/logo-ari.png" alt="ARI Shopping" fill sizes="64px" className="object-cover" /></div><div><strong className="text-xl font-black">ARI Shopping</strong><p className="text-xs text-white/60">Tesoros para cada aventura.</p></div></div><div className="mt-5 flex gap-3"><Instagram /><Facebook /><MessageCircle /></div></div><FooterColumn title="Compra" links={["Novedades", "Juguetes", "Mochilas", "Regalos"]} /><FooterColumn title="Ayuda" links={["Preguntas frecuentes", "Envíos", "Cambios", "Contacto"]} /><div><h3 className="font-black">Newsletter</h3><p className="mt-3 text-sm leading-6 text-white/60">Recibe lanzamientos y promociones especiales.</p><div className="mt-4 flex rounded-full bg-white p-1"><input className="min-w-0 flex-1 bg-transparent px-4 text-sm text-slate-950 outline-none" placeholder="Tu correo" /><button className="rounded-full bg-yellow-300 px-4 text-sm font-black text-slate-950">Unirme</button></div></div></div><div className="border-t border-white/10 py-5 text-center text-xs text-white/50">© 2026 ARI Shopping · Frontend headless v4.1 · GitOps</div></footer>;
+  return <footer className="bg-ari-marino text-white"><div className="mx-auto grid max-w-7xl gap-10 px-4 py-14 sm:grid-cols-2 lg:grid-cols-4"><div><div className="flex flex-col items-start gap-3"><img src="/images/brand/logo-ari.svg" alt="ARI shopping" className="h-11 w-auto" width={200} height={64} />{/* eslint-disable-line @next/next/no-img-element -- vector propio, next/image no optimiza SVG sin habilitar dangerouslyAllowSVG */}<p className="text-xs text-white/60">Tesoros para cada aventura.</p></div><div className="mt-5 flex gap-3"><Instagram /><Facebook /><MessageCircle /></div></div><FooterColumn title="Compra" links={["Novedades", "Juguetes", "Mochilas", "Regalos"]} /><FooterColumn title="Ayuda" links={["Preguntas frecuentes", "Envíos", "Cambios", "Contacto"]} /><div><h3 className="font-black">Newsletter</h3><p className="mt-3 text-sm leading-6 text-white/60">Recibe lanzamientos y promociones especiales.</p><div className="mt-4 flex rounded-full bg-white p-1"><input className="min-w-0 flex-1 bg-transparent px-4 text-sm text-slate-950 outline-none" placeholder="Tu correo" /><button className="rounded-full bg-ari-coral px-4 text-sm font-black text-white">Unirme</button></div></div></div><div className="border-t border-white/10 py-5 text-center text-xs text-white/50">© 2026 ARI Shopping · Frontend headless v4.1 · GitOps</div></footer>;
 }
 
 function FooterColumn({ title, links }: { title: string; links: string[] }) {
-  return <div><h3 className="font-black">{title}</h3><div className="mt-4 grid gap-3 text-sm text-white/60">{links.map((link) => <Link key={link} href="/catalog" className="hover:text-yellow-300">{link}</Link>)}</div></div>;
+  return <div><h3 className="font-black">{title}</h3><div className="mt-4 grid gap-3 text-sm text-white/60">{links.map((link) => <Link key={link} href="/catalog" className="hover:text-ari-coral-claro">{link}</Link>)}</div></div>;
 }

workloads/ecommerce/components/layout/navbar.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
 import { ChevronDown, Heart, LayoutGrid, Menu, MessageCircle, PackageCheck, ShoppingCart, UserRound } from "lucide-react";
@@ -46,26 +45,27 @@ export function Navbar({ products, categories }: { products: Product[]; categori
 
   return (
     <header className="sticky top-0 z-40 border-b border-slate-200/80 bg-white/95 shadow-sm backdrop-blur-xl">
-      <div className="bg-gradient-to-r from-amber-300 via-yellow-200 to-lime-200 px-4 py-2 text-center text-xs font-black text-slate-950 sm:text-sm">
+      <div className="bg-ari-marino px-4 py-2 text-center text-xs font-black text-white sm:text-sm">
-        Paga tus compras a cuotas · Envíos nacionales · <span className="underline decoration-2 underline-offset-2">Compra segura con ARI</span>
+        Paga tus compras a cuotas · Envíos nacionales · <span className="underline decoration-ari-coral-claro decoration-2 underline-offset-2">Compra segura con ARI</span>
       </div>
 
       <div className="relative overflow-visible bg-white">
-        <div className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-cyan-400 via-violet-500 to-fuchsia-500" />
+        <div className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-ari-coral-claro" />
-        <div className="mx-auto grid max-w-7xl grid-cols-[72px_1fr_auto] items-center gap-4 px-4 py-4 lg:grid-cols-[92px_minmax(420px,1fr)_auto] lg:gap-8">
+        <div className="mx-auto grid max-w-7xl grid-cols-[auto_1fr_auto] items-center gap-4 px-4 py-4 lg:gap-8">
-          <Link href="/" className="relative size-16 overflow-hidden rounded-full border-2 border-slate-900 bg-black shadow-lg lg:size-20">
+          <Link href="/" aria-label="ARI shopping" className="shrink-0">
-            <Image src="/images/brand/logo-ari.png" alt="ARI Shopping" fill priority sizes="80px" className="object-cover" />
+            {/* eslint-disable-next-line @next/next/no-img-element -- vector propio, next/image no optimiza SVG sin habilitar dangerouslyAllowSVG */}
+            <img src="/images/brand/logo-ari.svg" alt="ARI shopping" className="h-11 w-auto lg:h-14" width={200} height={64} />
           </Link>
           <PredictiveSearch />
           <div className="flex items-center gap-2">
-            <Button variant="outline" size="icon" aria-label="Mi cuenta" className="hidden border-slate-300 bg-white text-slate-900 hover:border-violet-400 hover:bg-violet-50 sm:inline-flex" onClick={() => setAccountOpen(true)}><UserRound /></Button>
+            <Button variant="outline" size="icon" aria-label="Mi cuenta" className="hidden border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10 sm:inline-flex" onClick={() => setAccountOpen(true)}><UserRound /></Button>
-            <Button variant="outline" size="icon" aria-label={`Favoritos: ${wishlistCount}`} className="relative hidden border-slate-300 bg-white text-slate-900 hover:border-fuchsia-400 hover:bg-fuchsia-50 sm:inline-flex" onClick={openWishlist}>
+            <Button variant="outline" size="icon" aria-label={`Favoritos: ${wishlistCount}`} className="relative hidden border-slate-300 bg-white text-slate-900 hover:border-ari-coral hover:bg-ari-coral/10 sm:inline-flex" onClick={openWishlist}>
               <Heart />
-              {wishlistCount > 0 && <span className="absolute -right-1.5 -top-1.5 grid size-5 place-items-center rounded-full bg-violet-600 text-[10px] font-black text-white">{wishlistCount}</span>}
+              {wishlistCount > 0 && <span className="absolute -right-1.5 -top-1.5 grid size-5 place-items-center rounded-full bg-ari-marino text-[10px] font-black text-white">{wishlistCount}</span>}
             </Button>
-            <Button variant="primary" size="icon" onClick={openCart} aria-label={`Carrito con ${count} productos`} className="relative shadow-lg shadow-fuchsia-500/20">
+            <Button variant="primary" size="icon" onClick={openCart} aria-label={`Carrito con ${count} productos`} className="relative">
               <ShoppingCart />
-              <span className="absolute -right-2 -top-2 grid size-6 place-items-center rounded-full bg-yellow-300 text-[11px] font-black text-slate-950">{count}</span>
+              <span className="absolute -right-2 -top-2 grid size-6 place-items-center rounded-full bg-ari-marino text-[11px] font-black text-white">{count}</span>
             </Button>
           </div>
         </div>
@@ -82,7 +82,7 @@ export function Navbar({ products, categories }: { products: Product[]; categori
             <SheetDescription>Categorías y colecciones del catálogo.</SheetDescription>
           </SheetHeader>
           <div className="flex-1 overflow-y-auto p-6">
-            <p className="mb-3 text-xs font-black uppercase tracking-[.16em] text-fuchsia-600">Categorías</p>
+            <p className="mb-3 text-xs font-black uppercase tracking-[.16em] text-ari-coral">Categorías</p>
             <div className="grid gap-2">
               <Suspense fallback={<MobileCategoryLinksFallback tree={tree} onNavigate={() => setMenuOpen(false)} />}>
                 <MobileCategoryLinks tree={tree} onNavigate={() => setMenuOpen(false)} />
@@ -90,9 +90,9 @@ export function Navbar({ products, categories }: { products: Product[]; categori
             </div>
             {collections.length > 0 && (
               <>
-                <p className="mb-3 mt-8 text-xs font-black uppercase tracking-[.16em] text-violet-600">Colecciones</p>
+                <p className="mb-3 mt-8 text-xs font-black uppercase tracking-[.16em] text-ari-marino">Colecciones</p>
                 <div className="flex flex-wrap gap-2">
-                  {collections.map((collection) => <Link key={collection} href={`/catalog?collection=${encodeURIComponent(collection)}`} onClick={() => setMenuOpen(false)} className="rounded-full bg-slate-100 px-4 py-2 text-sm font-bold hover:bg-violet-100 hover:text-violet-700">{collection}</Link>)}
+                  {collections.map((collection) => <Link key={collection} href={`/catalog?collection=${encodeURIComponent(collection)}`} onClick={() => setMenuOpen(false)} className="rounded-full bg-slate-100 px-4 py-2 text-sm font-bold hover:bg-ari-coral/10 hover:text-ari-coral">{collection}</Link>)}
                 </div>
               </>
             )}
@@ -107,7 +107,7 @@ export function Navbar({ products, categories }: { products: Product[]; categori
       <Dialog open={accountOpen} onOpenChange={setAccountOpen}>
         <DialogContent className="max-w-lg p-7">
           <div className="pr-10">
-            <span className="text-xs font-black uppercase tracking-[.16em] text-violet-600">Atención personalizada</span>
+            <span className="text-xs font-black uppercase tracking-[.16em] text-ari-coral">Atención personalizada</span>
             <h2 className="mt-3 text-3xl font-black">Tu cuenta ARI</h2>
             <p className="mt-3 text-sm leading-6 text-slate-600">El inicio de sesión quedará conectado al backend headless. Mientras tanto, puedes gestionar pedidos y disponibilidad directamente por WhatsApp.</p>
             <div className="mt-6 grid gap-3">
@@ -136,16 +136,16 @@ function useCategoryNavigationState() {
 function pillClass(active: boolean): string {
   return `shrink-0 rounded-full px-4 py-2 text-sm font-extrabold transition ${
     active
-      ? "bg-gradient-to-r from-cyan-500 to-violet-500 text-white shadow-lg shadow-violet-950/30"
+      ? "bg-white text-ari-marino shadow-lg shadow-black/10"
-      : "text-white/90 hover:bg-gradient-to-r hover:from-cyan-500 hover:to-violet-500 hover:text-white"
+      : "text-white/90 hover:bg-white/10 hover:text-white"
   }`;
 }
 
 function mobileLinkClass(active: boolean): string {
   return `rounded-2xl border px-4 py-3 font-extrabold transition ${
     active
-      ? "border-violet-500 bg-violet-50 text-violet-700"
+      ? "border-ari-coral bg-ari-coral/5 text-ari-coral"
-      : "border-slate-200 hover:border-cyan-400 hover:bg-cyan-50"
+      : "border-slate-200 hover:border-ari-coral/50 hover:bg-ari-coral/5"
   }`;
 }
 
@@ -170,8 +170,8 @@ function CategoryNavBar({
   isAllActive: boolean;
 }) {
   return (
-    <nav className="border-b-4 border-fuchsia-500 bg-slate-950 text-white">
+    <nav className="bg-ari-marino text-white">
-      <div className="mx-auto flex max-w-7xl items-center gap-1 px-4 py-2">
+      <div className="relative mx-auto flex max-w-7xl items-center gap-1 px-4 py-2">
         <Button
           variant="ghost"
           size="icon"
@@ -213,7 +213,7 @@ function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActiv
   }, [open]);
 
   return (
-    <div ref={containerRef} className="relative shrink-0" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
+    <div ref={containerRef} className="shrink-0" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
       <button
         type="button"
         onClick={() => setOpen((value) => !value)}
@@ -227,7 +227,7 @@ function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActiv
       </button>
 
       {open && (
-        <div className="absolute left-0 top-full z-50 mt-1 w-[min(92vw,64rem)] rounded-2xl border border-slate-800 bg-slate-950 p-6 shadow-2xl">
+        <div className="absolute left-0 top-full z-50 mt-1 max-h-[80vh] w-[min(92vw,64rem)] overflow-y-auto rounded-2xl border border-white/10 bg-ari-marino p-6 shadow-2xl">
           <div className="grid grid-cols-2 gap-x-6 gap-y-5 sm:grid-cols-3 lg:grid-cols-6">
             {tree.map((root) => (
               <div key={root.id}>
@@ -237,7 +237,7 @@ function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActiv
                   aria-current={isActive(root.name) ? "page" : undefined}
                   onClick={() => setOpen(false)}
                   className={`block text-sm font-black uppercase tracking-wide transition ${
-                    isActive(root.name) ? "text-fuchsia-400" : "text-white hover:text-fuchsia-400"
+                    isActive(root.name) ? "text-ari-coral-claro" : "text-white hover:text-ari-coral-claro"
                   }`}
                 >
                   {root.name}
@@ -251,7 +251,7 @@ function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActiv
                           prefetch={false}
                           aria-current={isActive(child.name) ? "page" : undefined}
                           onClick={() => setOpen(false)}
-                          className={`block text-sm transition ${isActive(child.name) ? "font-bold text-violet-300" : "text-white/70 hover:text-white"}`}
+                          className={`block text-sm transition ${isActive(child.name) ? "font-bold text-ari-coral-claro" : "text-white/70 hover:text-white"}`}
                         >
                           {child.name}
                         </Link>

workloads/ecommerce/components/product/product-card.tsx

@@ -33,15 +33,15 @@ export function ProductCard({ product, priority = false }: { product: Product; p
       : null;
 
   return (
-    <article className="group flex h-full flex-col overflow-hidden rounded-lg border border-slate-100 bg-white shadow-lg shadow-ari-carbon-oscuro/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-ari-ciruela/10">
+    <article className="group flex h-full flex-col overflow-hidden rounded-lg border border-slate-100 bg-white shadow-lg shadow-ari-marino/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-ari-coral/10">
-      <div className="relative aspect-square overflow-hidden bg-ari-hueso">
+      <div className="relative aspect-square overflow-hidden bg-white">
         <Link href={`/product/${product.slug}`} prefetch={false}><Image src={product.thumbnail} alt={product.name} fill priority={priority} sizes="(max-width: 640px) 82vw, (max-width: 1024px) 44vw, 280px" className="object-cover transition duration-500 group-hover:scale-[1.035]" /></Link>
-        <div className="absolute left-3 top-3 flex gap-2">{discountPercent && discountPercent > 0 && <Badge className="bg-ari-terracota-oscuro text-white">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-ari-carbon-oscuro text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-ari-cobre text-white"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
+        <div className="absolute left-3 top-3 flex gap-2">{discountPercent && discountPercent > 0 && <Badge className="bg-ari-coral-claro text-ari-marino">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-ari-marino text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-ari-coral-claro text-ari-marino"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
-        <button type="button" aria-label={isFavorite ? "Quitar de favoritos" : "Agregar a favoritos"} aria-pressed={isFavorite} className={`absolute right-3 top-3 rounded-full p-2.5 shadow-lg backdrop-blur transition ${isFavorite ? "bg-ari-ciruela text-white" : "bg-white/95 text-slate-900 hover:text-ari-ciruela"}`} onClick={() => toggleProduct(product)}><Heart className={`size-4 ${isFavorite ? "fill-current" : ""}`} /></button>
+        <button type="button" aria-label={isFavorite ? "Quitar de favoritos" : "Agregar a favoritos"} aria-pressed={isFavorite} className={`absolute right-3 top-3 rounded-full p-2.5 shadow-lg backdrop-blur transition ${isFavorite ? "bg-ari-coral text-white" : "bg-white/95 text-slate-900 hover:text-ari-coral"}`} onClick={() => toggleProduct(product)}><Heart className={`size-4 ${isFavorite ? "fill-current" : ""}`} /></button>
       </div>
       <div className="flex flex-1 flex-col space-y-3 p-5">
-        <div className="flex items-center justify-between gap-2 text-xs font-bold text-slate-500"><span>{product.category}</span><span className="rounded-md bg-ari-cobre/10 px-2 py-1 text-ari-cobre">{product.collection}</span></div>
+        <div className="flex items-center justify-between gap-2 text-xs font-bold text-slate-500"><span>{product.category}</span><span className="rounded-md bg-ari-coral-claro/10 px-2 py-1 text-ari-marino">{product.collection}</span></div>
-        <Link href={`/product/${product.slug}`} prefetch={false}><h3 className="line-clamp-2 min-h-12 text-lg font-black leading-6 text-ari-carbon group-hover:text-ari-ciruela">{product.name}</h3></Link>
+        <Link href={`/product/${product.slug}`} prefetch={false}><h3 className="line-clamp-2 min-h-12 text-lg font-black leading-6 text-ari-marino group-hover:text-ari-coral">{product.name}</h3></Link>
         <p className="line-clamp-2 min-h-10 text-sm leading-5 text-slate-500">{product.shortDescription}</p>
         {product.variants.length > 1 && (
           <div className="flex flex-wrap gap-1.5">
@@ -55,7 +55,7 @@ export function ProductCard({ product, priority = false }: { product: Product; p
                 onClick={() => setSelectedVariantId(variant.id)}
                 className={`rounded-md border px-2.5 py-1 text-xs font-bold transition ${
                   selectedVariantId === variant.id
-                    ? "border-ari-ciruela bg-ari-ciruela/10 text-ari-ciruela"
+                    ? "border-ari-coral bg-ari-coral/10 text-ari-coral"
                     : "border-slate-200 text-slate-600 hover:border-slate-400"
                 } ${!variant.available ? "cursor-not-allowed opacity-40" : ""}`}
               >
@@ -70,7 +70,7 @@ export function ProductCard({ product, priority = false }: { product: Product; p
         <div className="mt-auto flex items-center justify-between gap-3 pt-1">
           <div className="flex flex-col">
             {product.compareAtPrice && <span className="text-xs font-bold text-slate-400 line-through">{formatMoney(product.compareAtPrice, product.currency)}</span>}
-            <strong className="font-display text-base font-bold text-ari-carbon">{formatMoney(product.price, product.currency)}</strong>
+            <strong className="font-display text-base font-bold text-ari-marino">{formatMoney(product.price, product.currency)}</strong>
           </div>
           <Button variant="primary" size="sm" onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />Agregar</Button>
         </div>

workloads/ecommerce/frontend/patches/deployment.yaml

@@ -25,7 +25,7 @@ spec:
         runAsUser: 1001
       containers:
         - name: app
-          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.177
+          image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.185
           env:
             - name: HEADLESS_PROVIDER
               value: medusa

workloads/ecommerce/public/images/brand/logo-ari.svg

@@ -0,0 +1,16 @@
+<!-- ADR 0008, paleta final "Azul & Amarillo" (Walmart-inspirada). Isotipo:
+     mariposa geometrica de 4 elipses sobre circulo/campo azul + wordmark
+     "ARI shopping".
+     Ver docs-portal/docs/decisiones/0008-identidad-navy-coral.md -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 64" role="img" aria-label="ARI shopping">
+  <rect width="200" height="64" rx="12" fill="#0055B8"/>
+  <g transform="translate(14 20)">
+    <ellipse cx="10" cy="8" rx="9" ry="7" transform="rotate(-18 10 8)" fill="#FFC220"/>
+    <ellipse cx="24" cy="8" rx="9" ry="7" transform="rotate(18 24 8)" fill="#FFC220"/>
+    <ellipse cx="12" cy="16" rx="6" ry="5" transform="rotate(-10 12 16)" fill="#FFDD73"/>
+    <ellipse cx="22" cy="16" rx="6" ry="5" transform="rotate(10 22 16)" fill="#FFDD73"/>
+    <rect x="16" y="3" width="2" height="18" rx="1" fill="#0055B8"/>
+  </g>
+  <text x="64" y="38" font-family="Poppins, ui-sans-serif, system-ui, sans-serif" font-weight="700" font-size="26" fill="#FFFFFF">ARI</text>
+  <text x="64" y="53" font-family="Poppins, ui-sans-serif, system-ui, sans-serif" font-weight="700" font-size="11" letter-spacing="2.5" fill="#FFC220">shopping</text>
+</svg>