docs(adr): ADR 0007 - identidad visual propia para ARI Shopping

Propuesta de rediseno visual del storefront, aprobada por el usuario
tras una correccion de direccion explicita: no clonar la estetica de
Amazon, adoptar los principios de UX del mercado (jerarquia visual,
densidad sin saturacion, senales de confianza, contraste) para
construir una identidad propia y distintiva -- paleta terracota/
espresso/pino/crema validada con contraste WCAG AA real, tipografia
Fraunces+Inter, lenguaje de forma propio, 3 detalles deliberados no
genericos.

Alcance: solo visual, no toca catalogo/backend/taxonomia ni la
estructura de navegacion ya construida en ADR 0005. Plan de
implementacion en 5 sub-fases (tokens -> header/footer -> product
card+catalog -> home -> product detail/drawers), sin codigo de
produccion tocado todavia.

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

@@ -0,0 +1,252 @@
+# ADR 0007 — Identidad visual propia para ARI Shopping
+
+**Estado:** aceptada (2026-08-27, dirección corregida aprobada por el usuario)
+**Fecha:** 2026-08-27
+
+> **Corrección de dirección (2026-08-27):** la primera versión de este
+> ADR proponía clonar la estética visual de Amazon (paleta ink/naranja,
+> radios mínimos, densidad Amazon). El usuario corrigió el enfoque:
+> **el objetivo no es imitar a Amazon, es superar sus patrones de UX
+> con una identidad propia, distintiva y memorable** — se adoptan los
+> *principios funcionales* que hacen que Amazon (y el mercado en
+> general) funcionen bien, no su paleta ni su estética. Esta versión
+> reemplaza la anterior por completo.
+
+> Alcance (sin cambios): **solo visual** (paleta, tipografía, radios,
+> densidad) — ARI Shopping sigue siendo la marca, el catálogo sigue
+> siendo el mismo (juguetes, mochilas, regalos, ya multi-categoría). No
+> se toca taxonomía, backend, ni la estructura de navegación ya
+> construida en el ADR 0005 (header de 3 niveles, mega-menú,
+> breadcrumb, conteos de filtro) — se re-expresa visualmente sobre esa
+> misma estructura.
+
+## 1. Resumen de la auditoría del estado actual
+
+(Sin cambios respecto a la versión anterior — sigue siendo la
+descripción real del código, no de la propuesta.)
+
+El storefront hoy tiene una identidad visual deliberadamente lúdica,
+tipo "juguetería", consistente en todos los componentes revisados
+(`app/globals.css`, `components/ui/button.tsx`, `components/ui/badge.tsx`,
+`components/layout/navbar.tsx`, `components/layout/footer.tsx`,
+`components/product/product-card.tsx`, `app/page.tsx`):
+
+- **Paleta**: tokens propios en `@theme` (`--color-ari-cyan: #06b6d4`,
+  `--color-ari-magenta: #ec4899`, `--color-ari-yellow: #fde047`) más
+  gradientes `cyan→violet→fuchsia` y `amber→yellow→lime` en barras,
+  botones y fondos de sección. Paleta arcoíris de alta saturación, no
+  una paleta de marca contenida.
+- **Forma**: `rounded-full` en casi todo — botones, badges, chips,
+  avatar del logo, inputs del footer. Cero variación de forma.
+- **Tipografía**: `font-black`/`font-extrabold` como default en
+  título, precio, botones y texto secundario — todo compite por
+  atención, nada queda como "de soporte".
+- **La estructura ya toma prestados patrones de mercado** (ADR 0005,
+  Etapa 2 sub-fase 3): header de 3 niveles, mega-menú "Departamentos",
+  footer oscuro de 4 columnas, badges de producto, breadcrumb, conteos
+  de filtro. Esta propuesta **no rehace esa estructura** — cambia
+  cómo se ve, no cómo funciona.
+
+## 2. Principios de UX a adoptar (funcionales, no estéticos)
+
+Estos son patrones que funcionan en el mercado — Amazon es la
+referencia más citable, pero el principio es lo que se adopta, nunca
+su paleta ni su forma:
+
+| Principio | Por qué funciona (evidencia del mercado) | Cómo se aplica en ARI sin copiar la estética |
+|---|---|---|
+| **Jerarquía visual clara** entre precio/CTA/información secundaria | Cuando todo pesa igual (todo bold, todo saturado), el ojo no sabe dónde mirar primero — el usuario tarda más en decidir | El precio y el botón de acción son los únicos elementos con peso tipográfico y color reservado; categoría/SKU/colección bajan a texto liviano y gris cálido |
+| **Alta densidad de información sin sentirse saturado** | Más información útil visible (variantes, stock, rating) sin agrandar la card compite mejor que decoración vacía | Los gradientes decorativos actuales ocupan espacio visual sin aportar información — se liberan para mostrar más señales reales del producto |
+| **Señales de confianza visibles** | Urgencia de inventario real, garantías, tiempos de envío — leídas como información seria, no decoración | Se conservan/refuerzan elementos ya reales del sitio ("Quedan N", `TrustBar` del home) expresados en colores serios, no en el arcoíris actual |
+| **Contraste suficiente para escaneo rápido** | Un usuario escanea, no lee — necesita distinguir texto/fondo/CTA en milisegundos | Cada par de color de esta propuesta se valida contra WCAG AA (ver §4.1) antes de aprobarse, no se asume |
+
+## 3. Por qué no clonar la estética (opciones consideradas)
+
+| Opción | A favor | En contra |
+|---|---|---|
+| Clonar estética Amazon (ink/naranja/gris, radios mínimos) | Reconocible como "marketplace serio" de inmediato | Es exactamente lo que el usuario pidió evitar — ARI Shopping se vuelve indistinguible de cualquier clon genérico; cero valor de marca propio |
+| **Identidad propia guiada por los principios de §2** (esta propuesta) | Distintiva, memorable, defendible como marca; resuelve los mismos problemas de UX reales del sitio actual sin perder personalidad | Requiere más trabajo de diseño que copiar un sistema ya hecho — hay que justificar cada decisión, no solo imitar |
+| Mantener la paleta arcoíris actual, solo bajar el peso de fuente | Cambio mínimo | No resuelve el pedido real ("ya no la tienda de juguetes") — el problema no es solo la tipografía, es la paleta completa |
+
+**Decisión de esta sección:** identidad propia.
+
+## 4. Identidad visual propia propuesta
+
+### 4.1 Paleta — "cálida, confiable, ligeramente lúdica"
+
+Evita a propósito el azul corporativo genérico y el arcoíris actual.
+Parte de la propia identidad narrativa del sitio ("tesoros para cada
+aventura") — una paleta de tono *tienda de tesoros/regalos cálida*,
+no de bazar infantil ni de marketplace frío.
+
+| Token | Valor | Uso | Por qué esta elección |
+|---|---|---|---|
+| `--color-ari-terracota` | `#C1502E` | CTA primario ("Agregar al carrito", "Comprar") — único uso reservado a acción | Cálido y terroso, no un naranja saturado tipo Amazon ni un rosa/fucsia de juguetería. Al ser el *único* color reservado a acción, refuerza la jerarquía visual del §2 |
+| `--color-ari-espresso` | `#2B1B13` | Header, footer, texto sobre fondo claro cuando se necesita máximo contraste | Ancla oscura cálida (marrón profundo), no el navy frío de Amazon — mismo rol funcional (contraste fuerte para escanear), estética propia |
+| `--color-ari-pino` | `#2F6F62` | Links, estados de confirmación, acentos secundarios/confianza | Reemplaza al "azul de link" genérico sin perder la legibilidad de "esto es clickeable" — un verde-azulado profundo lee como serio y confiable sin ser corporativo |
+| `--color-ari-crema` | `#FBF3E7` | Fondo general fuera de las cards | Blanco cálido, no gris frío (`#EAEDED` de Amazon) ni blanco puro — sensación de catálogo de regalos, no de bodega |
+| `--color-ari-carbon` | `#2E2620` | Texto principal | Negro cálido, coherente con el resto de la paleta — nunca `slate` frío |
+| `--color-ari-oro` | `#E3A008` | Badge "Destacado/Top" | Reemplaza el amarillo neón actual (`#fde047`) por un dorado más rico — mismo rol (llamar la atención puntual), menos "juguete plástico" |
+| `--color-ari-ladrillo` | `#A83232` | Badge de descuento | Reemplaza rosa/fucsia — un rojo ladrillo serio comunica "oferta" sin verse infantil |
+
+**Validación de contraste (WCAG AA, calculada, no asumida):**
+
+| Par | Contraste | Cumple AA (texto normal ≥4.5:1 / texto grande ≥3:1) |
+|---|---|---|
+| Carbón sobre crema (texto de cuerpo) | 13.5:1 | Sí, con margen amplio (supera incluso AAA) |
+| Blanco sobre espresso (header/footer) | 16.5:1 | Sí, con margen amplio |
+| Blanco sobre terracota (texto de botón CTA) | 4.7:1 | Sí, cumple normal — margen ajustado, mantener el label del botón en `font-semibold` o superior |
+| Pino sobre crema (links) | 5.3:1 | Sí, cumple normal |
+
+### 4.2 Tipografía — con carácter propio, no la default de cualquier plantilla
+
+- **Titulares y precio**: [Fraunces](https://fonts.google.com/specimen/Fraunces)
+  (serif cálida, con personalidad, cargable vía `next/font/google` sin
+  costo de licencia) — usada en h1/h2 de sección, en el precio grande
+  de producto, y en momentos de marca (hero). Un serif con carácter en
+  estos puntos específicos es una señal de marca deliberada: casi
+  ningún competidor de e-commerce usa serif, todos van 100% sans —
+  conecta directo con "tesoros para cada aventura" (sensación de
+  catálogo curado, no de bazar).
+- **UI y cuerpo**: se mantiene **Inter** (ya integrada, probada, muy
+  legible en tamaños chicos — nav, badges, filtros) pero se abandona
+  el default `font-black`/`font-extrabold` en todo. Escala real:
+  `font-normal` para texto de soporte, `font-semibold` para
+  título/etiqueta de card, `font-bold` reservado a precio y CTA
+  únicamente — el peso vuelve a significar algo en vez de ser el
+  default de todo.
+
+### 4.3 Lenguaje de forma — reconocible sin el logo
+
+- **Radio uniforme**: `rounded-xl` (12px) en botones, cards, inputs y
+  badges — ni el `rounded-full` actual (se siente "globo de juguete"),
+  ni el radio mínimo tipo Amazon (se siente frío/utilitario). Un radio
+  moderado y consistente en todo el sistema lee como diseño
+  deliberado, no como plantilla default.
+- **Sombras con tinte de marca**: sombras suaves calculadas sobre
+  `--color-ari-espresso` a baja opacidad (ej.
+  `shadow-[0_8px_24px_-8px_rgba(43,27,19,0.25)]`) en vez del
+  `shadow-slate-900/…` genérico actual — un detalle que casi nadie
+  hace (la mayoría usa el gris default del framework) y que ata la
+  sombra misma a la paleta de marca.
+- **Densidad**: intermedia — ni tan aireada/decorativa como hoy (mucho
+  espacio ocupado por gradientes y texto sobre-dimensionado) ni tan
+  comprimida como un marketplace utilitario.
+
+### 4.4 Tres decisiones deliberadas y distintivas
+
+Elegidas específicamente para ser difíciles de replicar "por
+accidente" por un competidor genérico:
+
+1. **Badge en forma de "etiqueta de regalo"**: los badges de
+   producto (Nuevo/Top/Descuento) dejan de ser una píldora
+   `rounded-full` genérica y pasan a una forma con una pequeña
+   muesca en una esquina (`clip-path` CSS), evocando una etiqueta de
+   precio/regalo física — coherente con "tienda de regalos", y no es
+   una utilidad default de Tailwind, así que no aparece por accidente
+   en ningún template genérico.
+2. **Fondo crema + viñeta suave en fotografía de producto**: las
+   imágenes de producto se apoyan sobre `--color-ari-crema` (no blanco
+   ni gris) con una viñeta radial muy sutil — el catálogo se siente
+   como una vitrina de regalos curada, no una grilla de bodega.
+3. **Micro-interacción de marca en el CTA principal**: al hacer hover/
+   focus en "Agregar al carrito", el ícono de bolsa hace un pequeño
+   giro/rebote de ~200ms (CSS puro, sin JS) en vez del `-translate-y`
+   genérico actual — reservado *solo* al CTA principal, para que el
+   momento de acción tenga una firma reconocible sin volverse
+   caricaturesco en el resto del sitio.
+
+## 5. Tabla de tokens: antes → después
+
+| Token / propiedad | Antes | Después (propuesto) |
+|---|---|---|
+| `--color-ari-cyan` (`#06b6d4`) | color de marca | eliminado |
+| `--color-ari-magenta` (`#ec4899`) | color de marca/CTA | eliminado |
+| `--color-ari-yellow` (`#fde047`) | acento | eliminado, ver `--color-ari-oro` |
+| Nuevo: `--color-ari-terracota` | — | `#C1502E` — CTA único |
+| Nuevo: `--color-ari-espresso` | — | `#2B1B13` — header/footer |
+| Nuevo: `--color-ari-pino` | — | `#2F6F62` — links/confianza |
+| Nuevo: `--color-ari-crema` | — | `#FBF3E7` — fondo general |
+| Nuevo: `--color-ari-carbon` | — | `#2E2620` — texto principal |
+| Nuevo: `--color-ari-oro` | — | `#E3A008` — badge destacado |
+| Nuevo: `--color-ari-ladrillo` | — | `#A83232` — badge descuento |
+| Radio por defecto | `rounded-full` | `rounded-xl` (uniforme) |
+| Radio de card de producto | `rounded-3xl` | `rounded-xl` |
+| Peso de fuente por defecto | `font-black`/`font-extrabold` en todo | `font-normal` (soporte) / `font-semibold` (títulos/labels) / `font-bold` (solo precio y CTA) |
+| Fuente de titulares/precio | Inter (heredada del body) | Fraunces |
+| Fondo de sección | `#fff` | `--color-ari-crema` fuera de cards, blanco dentro |
+| Sombras | `shadow-slate-900/…` genérico | tintado con `--color-ari-espresso` |
+| Gradientes decorativos | `cyan/violet/fuchsia`, `amber/yellow/lime` | eliminados — bloques de color sólido |
+
+## 6. Wireframe en texto: header (antes/después)
+
+**Antes:**
+```
+[ barra degradada ámbar/amarillo: "Paga a cuotas · Envíos..." ]
+[ logo redondo | buscador (gradiente cyan/violeta/fuchsia) | cuenta ♡ 🛒(amarillo) ]
+[ barra negra: ☰ Departamentos▾(fuchsia al activo) | Todo | ... ]
+```
+
+**Después (propuesto):**
+```
+[ barra espresso fina, sólida: "Envíos nacionales · Compra segura con ARI" ]
+[ fondo espresso | logo | buscador (input crema, botón terracota) | cuenta ♡ 🛒(badge terracota) ]
+[ barra espresso: ☰ Departamentos▾(terracota al activo) | Todo | ... ]
+```
+
+## 7. Wireframe en texto: product card (antes/después)
+
+**Antes**: `rounded-3xl`, sombra genérica grande, badges en rosa/
+fucsia/amarillo, botón "Agregar" en gradiente fucsia/pink.
+
+**Después:** `rounded-xl`, sombra tintada espresso a baja opacidad,
+fondo crema detrás de la foto con viñeta sutil, badge "etiqueta de
+regalo" (ladrillo para descuento, oro para destacado), precio en
+Fraunces bold sobre carbón, botón "Agregar" sólido terracota con la
+micro-interacción de §4.4.3 al hover.
+
+## 8. Decisión
+
+Identidad visual propia (§4), ejecutada en las mismas 5 sub-fases
+independientes ya planteadas — cada una su propio `fix/*`, diff
+mostrado, gate visual antes de la siguiente:
+
+1. **Tokens base**: `globals.css` (`@theme`, variables centralizadas —
+   nada de valores hex sueltos en componentes), `button.tsx` (nueva
+   variant `primary` en terracota), `badge.tsx`, integración de
+   Fraunces vía `next/font/google`.
+2. **Header + footer**.
+3. **Product card + grid de catálogo**.
+4. **Home**.
+5. **Página de producto + drawers de carrito/wishlist**.
+
+**Validación de la Sub-fase 1 antes de tocar todo lo demás:**
+aplicar los tokens nuevos a un único elemento visible (ej. el botón
+CTA de un solo componente) como *smoke test* visual antes de propagar
+el cambio a todo el sistema — y, dado que el flujo de revalidación
+Admin → `product.updated` → `revalidateTag` (protegido desde Fase 5,
+ver ADR 0005) no debería verse afectado por un cambio puramente de
+estilos, una edición real de producto vía Admin sirve como validación
+cruzada de que nada de esto tocó ese flujo. Mismo mecanismo de
+rama/diff/confirmación de siempre en cada paso.
+
+## 9. Consecuencias
+
+- Se gana una identidad de marca propia, memorable y justificable
+  componente por componente — no una imitación de ningún competidor
+  ni la continuación de la paleta arcoíris actual.
+- Sigue siendo un cambio visible en todas las páginas del storefront a
+  la vez conceptualmente, pero se implementa y valida en 5 sub-fases
+  independientes, cada una revertible por separado (`git revert` del
+  commit de esa sub-fase — no hay manifiestos de por medio, es código
+  de frontend puro).
+- El catálogo, backend, taxonomía y flujo de búsqueda/facetas (ADR
+  0006) quedan completamente intactos.
+- Trabajo puramente de frontend: no requiere cambios en
+  `commerce-backend`, `platform-infra`, ni CI nuevo — reutiliza
+  `build.yaml` tal como está.
+- Costo adicional real frente a un clon de Amazon: cada decisión de
+  esta propuesta tuvo que justificarse contra un principio de UX en
+  vez de copiarse — más trabajo de diseño ahora, pero es lo que hace
+  que el resultado sea defendible como marca propia y no un genérico
+  reconocible.

workloads/docs-portal/mkdocs.yml

@@ -93,6 +93,7 @@ nav:
       - "0004 · Stack multi-categoría": decisiones/0004-evaluacion-stack-multi-categoria.md
       - "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
       - Plantilla ADR: decisiones/plantilla-adr.md
   - Playbooks:
       - Crashloop Medusa: playbooks/incidente-crashloop-medusa.md