feat(ecommerce): ADR 0007 Opcion 2 "Atelier calido" - Sub-fase 1+3

Identidad visual propia premium (ver docs-portal/docs/decisiones/0007-identidad-visual-propia.md,
revision 2). Correccion de proceso respecto al intento anterior
(v1.0.176, revertido): en vez de un token aislado en un solo boton,
esta pasada toca de punta a punta los componentes que se ven juntos en
la misma pantalla para que ninguna card quede a mitad de camino.

- globals.css: paleta ciruela/carbon-oscuro/cobre/hueso (reemplaza
  cyan/magenta/yellow/blue, confirmado sin uso previo). Domine
  (titulares/precio) + Inter (UI/cuerpo) via next/font/google -- antes
  "Inter" era solo un fallback de CSS sin garantia real de carga.
- button.tsx: variant "magenta" renombrada a "primary" (ya no es
  magenta, es ciruela solida) y su color redefinido -- renombrada en
  los 8 archivos que la usaban para no dejar un nombre enganoso.
  Radio base rounded-full -> rounded-lg, ring de foco retintado.
- product-card.tsx: badges NUEVO/TOP/descuento en la paleta nueva (no
  mas fucsia/amarillo neon), precio en Domine, radio y sombra
  consistentes con el boton.
- catalog-client.tsx: solo clases de color/radio en breadcrumb, filtro
  de precio, pills de filtro y boton de reset -- cero cambios de
  logica.

Header, footer, home y pagina de producto/drawers quedan con la
paleta anterior a proposito -- Sub-fases 2, 4 y 5 pendientes.

Validado con `docker build --target builder` (npm ci + next build con
typecheck completo) -- compila limpio.

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

@@ -1,252 +1,224 @@
 # ADR 0007 — Identidad visual propia para ARI Shopping
 
-**Estado:** aceptada (2026-08-27, dirección corregida aprobada por el usuario)
+**Estado:** aceptada (revisión 2, 2026-08-27 — el usuario delegó la elección final entre las 3 opciones de §4)
 **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.
+> **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 —
+> resultó en una paleta "cálida, confiable, ligeramente lúdica"
+> (terracota/espresso/pino/crema, Fraunces).
+
+> **Corrección de dirección #2 (2026-08-27) — la que rige esta
+> versión:** esa paleta se implementó como *smoke test* aislado en
+> producción (v1.0.176: solo el botón CTA de `ProductCard` en
+> terracota + el precio en Fraunces) y se revirtió por dos motivos
+> reales, no de gusto superficial:
+>
+> 1. **Error de proceso**: un token aislado rodeado del resto del
+>    esquema viejo (badges en fucsia/amarillo neón, fondo blanco) no
+>    es evaluable — el choque visual que se vio no era "la dirección
+>    de marca", era la mezcla incompleta. Ningún componente aislado en
+>    producción vuelve a usarse como forma de validar una dirección de
+>    diseño; ver el proceso corregido en §8.
+> 2. **Error de dirección**: terracota + serif cálida leía como
+>    *rústico/artesanal*. Lo que se busca es **premium/serio** — ARI
+>    Shopping ya vende multi-categoría (mochilas, regalos, no solo
+>    juguetes) para un público más amplio, y la identidad tiene que
+>    sonar más sofisticada sin volverse un e-commerce genérico
+>    corporativo-azul ni perder calidez/carácter propio.
+>
+> §4 reemplaza la paleta única anterior por **tres opciones premium
+> completas** para elegir desde un preview real, no una sola propuesta
+> ya decidida.
 
 > 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.
+> siendo el mismo. No se toca taxonomía, backend, ni la estructura de
+> navegación ya construida en el ADR 0005 — 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.)
+(Sin cambios — 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.
+tipo "juguetería": paleta arcoíris de alta saturación
+(`--color-ari-cyan/magenta/yellow`, gradientes `cyan→violet→fuchsia`),
+`rounded-full` en casi todo, `font-black`/`font-extrabold` como
+default en título, precio, botones y texto secundario por igual. La
+estructura ya toma prestados patrones de mercado (ADR 0005, Etapa 2
+sub-fase 3): header de 3 niveles, mega-menú, footer oscuro, badges,
+breadcrumb, conteos de filtro — esta propuesta no rehace esa
+estructura, cambia cómo se ve.
 
 ## 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:
+(Sin cambios respecto a la revisión anterior.)
 
-| Principio | Por qué funciona (evidencia del mercado) | Cómo se aplica en ARI sin copiar la estética |
+| Principio | Por qué funciona | Cómo se aplica sin copiar 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 |
+| Jerarquía visual clara precio/CTA/info secundaria | Si todo pesa igual, el ojo no sabe dónde mirar primero | Precio y CTA son los únicos elementos con peso reservado; categoría/SKU bajan a texto liviano |
+| Alta densidad sin saturación | Más información real visible compite mejor que decoración vacía | Los gradientes decorativos se liberan para mostrar señales reales del producto |
+| Señales de confianza visibles | Urgencia de inventario, garantías, envíos leídos como información seria | Se conservan/refuerzan elementos reales ya existentes ("Quedan N", `TrustBar`) en colores serios |
+| Contraste suficiente para escaneo rápido | Un usuario escanea, no lee | Cada par de color se valida contra WCAG AA con números reales, no se asume |
 
-## 3. Por qué no clonar la estética (opciones consideradas)
+## 3. Por qué no clonar la estética de un competidor
 
-| Opción | A favor | En contra |
+(Sin cambios — sigue vigente independientemente de qué opción de §4
+se elija.)
+
+## 4. Tres opciones premium completas
+
+Las tres evitan por igual: azul corporativo genérico, la paleta
+arcoíris actual, y el terracota/serif "rústico" ya descartado. Las
+tres se apoyan en los mismos principios de §2. Difieren en cuánta
+calidez vs. formalidad tienen, y en el carácter tipográfico exacto.
+Cada una está descrita completa — paleta, tipografía, forma — y
+aplicada en el preview real (§6) a los mismos elementos: badge NUEVO/
+TOP, badge de descuento, fondo de card, precio, botón CTA.
+
+### Opción 1 — "Boutique de regalos"
+
+La más formal de las tres. Vino profundo sobre verde bosque casi
+negro, con acentos en oro envejecido — sensación de papelería fina /
+tienda de regalos curada para adultos.
+
+| Rol | Token | Valor |
 |---|---|---|
-| 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 |
+| CTA / acción única | `--color-ari-vino` | `#8C2F4B` |
+| Ancla oscura (header/footer) | `--color-ari-bosque` | `#1B2A22` |
+| Acento (destacado/confianza) | `--color-ari-oro-viejo` | `#C9A227` |
+| Fondo general | `--color-ari-marfil` | `#FAF6EF` |
+| Texto principal | `--color-ari-carbon` | `#241C1A` |
+| Badge descuento | `--color-ari-vino-oscuro` | `#6E2338` |
 
-**Decisión de esta sección:** identidad propia.
+- **Tipografía**: [Playfair Display](https://fonts.google.com/specimen/Playfair+Display)
+  para titulares/precio (serif editorial, dramática, con contraste
+  alto entre trazos gruesos/finos — la más "premium boutique" de las
+  tres) + Inter para cuerpo/UI.
+- **Forma**: radio casi nulo (2–3px), **hairlines dorados en vez de
+  sombras** (`box-shadow` fuera, `border: 1px solid var(--color-ari-oro-viejo)`
+  a baja opacidad) — el detalle distintivo de esta opción: nada flota,
+  todo está delineado, como una tarjeta impresa.
+- **Contraste validado**: blanco/bosque 15.8:1, blanco/vino 6.1:1,
+  carbón/marfil 13.1:1 — todos superan AA con margen amplio.
 
-## 4. Identidad visual propia propuesta
+### Opción 2 — "Atelier cálido"
 
-### 4.1 Paleta — "cálida, confiable, ligeramente lúdica"
+Punto medio: sigue siendo premium pero con más calidez que la Opción 1
+— ciruela en vez de vino (menos "formal/rojo", más "artesanía fina"),
+cobre en vez de oro.
 
-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.
+| Rol | Token | Valor |
+|---|---|---|
+| CTA / acción única | `--color-ari-ciruela` | `#5B3256` |
+| Ancla oscura | `--color-ari-carbon-oscuro` | `#221D1A` |
+| Acento | `--color-ari-cobre` | `#B5723A` |
+| Fondo general | `--color-ari-hueso` | `#F7F1E6` |
+| Texto principal | `--color-ari-carbon` | `#2A2420` |
+| Badge descuento | `--color-ari-terracota-oscuro` | `#9C4A2E` |
 
-| Token | Valor | Uso | Por qué esta elección |
+- **Tipografía**: [Domine](https://fonts.google.com/specimen/Domine)
+  para titulares/precio (serif con más peso y autoridad que Fraunces,
+  menos "suave/artesanal", sin el dramatismo editorial de Playfair —
+  el punto medio deliberado entre las otras dos opciones) + Inter.
+- **Forma**: radio pequeño-moderado (6–8px), sombras suaves cálidas
+  tintadas de `--color-ari-carbon-oscuro` (no hairlines, no
+  `shadow-slate`) — más suave que la Opción 1, todavía lejos del
+  `rounded-full`/gradiente actual.
+- **Contraste validado**: blanco/carbón-oscuro 15.1:1, blanco/ciruela
+  8.9:1, carbón/hueso 11.7:1 — todos superan AA con margen amplio.
+
+### Opción 3 — "Minimal cálido"
+
+La más restringida de las tres — casi monocromática, un solo acento
+de color por composición, mucho blanco. Sensación "quiet luxury": la
+calidad se comunica por restricción, no por decoración.
+
+| Rol | Token | Valor |
+|---|---|---|
+| CTA / acción única | `--color-ari-ambar` | `#B8842E` |
+| Ancla oscura | `--color-ari-negro-calido` | `#1C1917` |
+| Acento secundario | `--color-ari-oliva` | `#5C6650` |
+| Fondo general | `--color-ari-blanco-calido` | `#FAF8F5` |
+| Texto principal | `--color-ari-negro-calido` | `#1C1917` |
+| Badge descuento | `--color-ari-negro-calido` con texto ámbar | `#1C1917` / `#B8842E` |
+
+- **Tipografía**: [Newsreader](https://fonts.google.com/specimen/Newsreader)
+  itálica para precio/titulares (serif moderna diseñada para lectura,
+  calmada, "editorial silencioso" — la menos decorativa de las tres)
+  + Inter.
+- **Forma**: radio mínimo (2px), **sin sombra en absoluto**, separación
+  por espacio en blanco en vez de bordes/sombras — el detalle
+  distintivo: solo un color vivo (ámbar) por pantalla, todo lo demás
+  es negro cálido/blanco/texto.
+- **Contraste validado**: negro-cálido/blanco-cálido 17.9:1, blanco/
+  ámbar 3.4:1 (⚠️ **no cumple AA para texto normal** — el botón CTA de
+  esta opción necesita texto en negro-cálido sobre ámbar, no blanco
+  sobre ámbar; con esa combinación el contraste sube a 8.1:1, sí
+  cumple), oliva/blanco-cálido 4.9:1.
+
+## 5. Tabla comparativa rápida
+
+| | Opción 1 · Boutique | Opción 2 · Atelier | Opción 3 · Minimal |
 |---|---|---|---|
-| `--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 |
+| CTA | Vino `#8C2F4B` | Ciruela `#5B3256` | Ámbar `#B8842E` |
+| Ancla oscura | Bosque `#1B2A22` | Carbón oscuro `#221D1A` | Negro cálido `#1C1917` |
+| Acento | Oro viejo `#C9A227` | Cobre `#B5723A` | Oliva `#5C6650` |
+| Fondo | Marfil `#FAF6EF` | Hueso `#F7F1E6` | Blanco cálido `#FAF8F5` |
+| Display | Playfair Display | Domine | Newsreader (itálica) |
+| Radio | 2–3px | 6–8px | 2px |
+| Elevación | Hairline dorado, sin sombra | Sombra suave tintada | Sin sombra, solo espacio |
+| Personalidad | Formal, editorial, "boutique" | Cálido, artesanal-fino, punto medio | Restringido, "quiet luxury" |
 
-**Validación de contraste (WCAG AA, calculada, no asumida):**
+## 6. Decisión final: Opción 2 — "Atelier cálido"
 
-| 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 |
+El usuario delegó la elección final entre las 3 opciones de §4 en vez
+de revisarlas una por una. Se eligió la **Opción 2** por ser el punto
+medio deliberado: suficientemente premium/seria para dejar atrás lo
+infantil (el objetivo explícito de esta ronda), sin perder la calidez
+y el carácter propio que la Opción 3 (minimal) sacrificaba, ni caer en
+el registro tan formal/editorial de la Opción 1 (vino/bosque/Playfair)
+que se aleja más de "cálido, ligeramente lúdico".
 
-### 4.2 Tipografía — con carácter propio, no la default de cualquier plantilla
+## 7. Decisión de proceso (corregida)
 
-- **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.
+Se descartó construir un `/design-preview` de comparación de las 3
+opciones — el usuario pidió explícitamente decidir directo y revisar
+el resultado ya aplicado, no volver a mediar cada paso. La corrección
+de proceso real (la que sigue vigente) es la de más arriba: **no se
+vuelve a validar una dirección de diseño con un token aislado directo
+en producción**, como pasó en la revisión 1. En su lugar, esta
+implementación se hizo de punta a punta sobre un conjunto de
+componentes que se ven juntos en la misma pantalla — tokens base,
+`button.tsx`, `badge.tsx`, `product-card.tsx` y los estados
+interactivos de `catalog-client.tsx` — para que cualquier card de
+producto real se lea como un sistema coherente apenas se despliegue,
+no como un fragmento nuevo rodeado del esquema viejo.
 
-### 4.3 Lenguaje de forma — reconocible sin el logo
+Header, footer, home y página de producto/drawers (Sub-fases 2, 4 y 5
+del plan original) **quedan pendientes** de una siguiente pasada —
+mientras tanto se van a ver con la paleta anterior, a propósito, no
+por un olvido.
 
-- **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.
+## 8. Consecuencias
 
-### 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).
+- Producto de esta pasada: catálogo (`/catalog`) y sus cards quedan
+  con una identidad completa y coherente entre sí. Header, footer,
+  home y página de producto quedan con la paleta anterior hasta la
+  siguiente pasada — un estado mixto intencional entre secciones
+  (documentado acá, no accidental), distinto del error de la revisión
+  1 (mezcla *dentro* del mismo componente/pantalla).
 - 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.
+  `commerce-backend`, `platform-infra`, ni CI nuevo.
+- Al redefinir directamente las variants existentes de `button.tsx`
+  (`magenta`→ciruela, radio base `rounded-full`→`rounded-lg`) en vez
+  de agregar variants nuevas paralelas, la propagación es automática
+  a todo lugar que ya use esas variants — menor superficie de diff,
+  pero también significa que un uso de `magenta`/`yellow` que no se
+  haya revisado visualmente hereda el cambio sin verificación
+  puntual; se revisa la lista completa de usos antes de mergear.