feat(ecommerce): ADR 0008 - iteracion de paleta a Azul & Amarillo

Reemplaza los valores de marino/coral/coral-claro de "Navy & Coral"
por una paleta azul solido (#0055B8, ancla + accion unica) + amarillo
(#FFC220, acento en badges/detalles, nunca en botones). Los nombres de
token (--color-ari-marino/coral/coral-claro) no cambian, solo sus
valores, por lo que el resto de componentes que ya migraron en las
sub-fases 1-3 heredan la paleta nueva automaticamente via CSS vars.

Ajustes puntuales de contraste: badges de descuento/destacado en
product-card.tsx pasan de texto blanco a texto marino sobre fondo
amarillo; linea decorativa del navbar pasa de coral (ahora identico al
marino) a coral-claro para seguir siendo visible contra el header.

workloads/ecommerce/app/globals.css

@@ -1,11 +1,12 @@
 @import "tailwindcss";
 
 @theme {
-  /* ADR 0008 ("Navy & Coral") -- reemplaza ADR 0007 (Opcion 2, "Atelier
-     calido"). Ver docs-portal/docs/decisiones/0008-identidad-navy-coral.md */
-  --color-ari-marino: #122844;        /* ancla: header, footer, badge "Nuevo", fondo de hero */
-  --color-ari-coral: #D85A30;         /* acento unico de accion: CTA, precio destacado */
-  --color-ari-coral-claro: #F0997B;   /* acento secundario: subtitulos sobre marino, ala inferior del isotipo */
+  /* ADR 0008 -- paleta final "Azul & Amarillo" (inspirada en Walmart),
+     iteracion sobre "Navy & Coral". Ver
+     docs-portal/docs/decisiones/0008-identidad-navy-coral.md */
+  --color-ari-marino: #0055B8;        /* ancla: header, footer, badge "Nuevo", fondo de hero */
+  --color-ari-coral: #0055B8;         /* boton de accion (CTA): azul solido, nunca amarillo */
+  --color-ari-coral-claro: #FFC220;   /* acento: badges de oferta/descuento/urgencia, detalles del isotipo -- nunca en botones */
 
   /* Alias de compatibilidad -- ADR 0007 definio estos nombres y hoy los
      siguen consumiendo catalog-client.tsx, product-card.tsx y button.tsx
@@ -33,8 +34,8 @@
 html { scroll-behavior: smooth; }
 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(216 90 48 / .5); outline-offset: 3px; }
-::selection { background: rgb(216 90 48 / .15); color: var(--color-slate-900); }
+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(0 85 184 / .15); color: var(--color-slate-900); }
 
 .content-auto {
   content-visibility: auto;

workloads/ecommerce/app/icon.svg

@@ -1,14 +1,15 @@
-<!-- ADR 0008 ("Navy & Coral"). Version reducida del isotipo para favicon/
-     app icon: solo circulo marino + mariposa, sin wordmark (no cabe
-     legible a este tamano). Convencion de Next.js App Router: este
-     archivo se sirve automaticamente como favicon/app icon. -->
+<!-- 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="#122844"/>
+  <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="#D85A30"/>
-    <ellipse cx="24" cy="8" rx="9" ry="7" transform="rotate(18 24 8)" fill="#D85A30"/>
-    <ellipse cx="12" cy="16" rx="6" ry="5" transform="rotate(-10 12 16)" fill="#F0997B"/>
-    <ellipse cx="22" cy="16" rx="6" ry="5" transform="rotate(10 22 16)" fill="#F0997B"/>
-    <rect x="16" y="3" width="2" height="18" rx="1" fill="#122844"/>
+    <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

@@ -21,7 +21,7 @@ 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: "#122844" };
+export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#0055B8" };
 
 // ADR 0008 ("Navy & Coral"): Poppins peso 700 para los "momentos de marca"
 // (wordmark, h1/h2, precio, CTA) + Inter para body/UI -- solo se carga el