fix(ecommerce): miniaturas recortaban fotos verticales + tamaño de fuente de descripción

- Miniaturas pasan de object-cover a object-contain: fotos con
  relación de aspecto muy vertical (confirmado en vivo: 933x1500 en
  este catálogo) perdían cabeza o pies al forzar el recorte cuadrado.
  Reportado por el usuario viendo las miniaturas de un producto real.
- La descripción del producto bajaba de 18px (text-lg, mismo tamaño
  que un párrafo de apertura de página completa como /envios) a 16px
  (text-base) -- se veía desproporcionada al lado del resto de la
  columna de compra en el layout de 3 columnas.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_012Y4df3Z7odr9Cg8F2nw6uV

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

@@ -118,7 +118,13 @@ export function ProductGallery({ images, name }: { images: string[]; name: strin
           miniaturas sin wrappear puede forzar overflow horizontal en toda
           la pagina en mobile. */}
       <div className="order-2 flex gap-3 overflow-x-auto lg:order-1 lg:flex-col">
-        {images.map((image) => <button type="button" key={image} onClick={() => { setSelected(image); reset(); }} onMouseEnter={() => { setSelected(image); reset(); }} className={`relative aspect-square w-20 shrink-0 overflow-hidden rounded-2xl border-2 ${selected === image ? "border-fuchsia-500" : "border-transparent"}`}><Image src={image} alt="" fill sizes="80px" className="object-cover" /></button>)}
+        {/* object-contain (no object-cover): fotos de producto con relacion
+            de aspecto muy vertical (ej. 933x1500, confirmado en vivo para
+            este catalogo) perdian la cabeza o los pies recortados al forzar
+            el cuadrado con cover -- reportado por el usuario viendo las
+            miniaturas. contain deja la miniatura completa siempre, con
+            "letterbox" del mismo bg-slate-50 que usa la imagen principal. */}
+        {images.map((image) => <button type="button" key={image} onClick={() => { setSelected(image); reset(); }} onMouseEnter={() => { setSelected(image); reset(); }} className={`relative aspect-square w-20 shrink-0 overflow-hidden rounded-2xl border-2 bg-slate-50 ${selected === image ? "border-fuchsia-500" : "border-transparent"}`}><Image src={image} alt="" fill sizes="80px" className="object-contain" /></button>)}
       </div>
       <div className="relative order-1 lg:order-2">
         <Dialog open={open} onOpenChange={changeOpen}>