feat(F-103): completed feature

project/storefront/src/app/globals.css

@@ -24,3 +24,29 @@ a {
   color: inherit;
   text-decoration: none;
 }
+
+/* Texto enriquecido de descripciones generadas por IA o editadas en el admin */
+.rich-text p {
+  margin: 0 0 0.75rem;
+}
+.rich-text p:last-child {
+  margin-bottom: 0;
+}
+.rich-text ul,
+.rich-text ol {
+  margin: 0 0 0.75rem;
+  padding-left: 1.25rem;
+}
+.rich-text ul {
+  list-style: disc;
+}
+.rich-text ol {
+  list-style: decimal;
+}
+.rich-text li {
+  margin-bottom: 0.25rem;
+}
+.rich-text strong {
+  font-weight: 600;
+  color: inherit;
+}

project/storefront/src/app/productos/[slug]/page.tsx

@@ -3,6 +3,7 @@ import { notFound } from 'next/navigation';
 import { ProductCard } from '@/components/product-card';
 import { AddToCart } from '@/components/add-to-cart';
 import { getProductBySlug, searchProducts } from '@/lib/api';
+import { formatRichText } from '@/lib/format-rich-text';
 import { absoluteUrl, metadataTitle } from '@/lib/seo';
 import { breadcrumbJsonLd, JsonLdScript, productJsonLd } from '@/lib/seo/json-ld';
 
@@ -26,7 +27,7 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
   const { slug } = await params;
   const product = await loadProduct(slug);
   const title = product.seoTitle ?? product.name;
-  const description = product.seoDescription ?? product.description ?? `Comprar ${product.name}`;
+  const description = (product.seoDescription ?? product.description ?? `Comprar ${product.name}`).replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim().slice(0, 300);
   const image = product.images?.find((item) => item.role === 'main') ?? product.images?.[0];
 
   return {
@@ -85,13 +86,13 @@ export default async function ProductPage({ params }: PageProps) {
           <h1 className="text-4xl font-bold tracking-tight text-emerald-950 md:text-5xl">
             {product.name}
           </h1>
-          <p className="text-lg leading-8 text-stone-700">
+          <div className="text-lg leading-8 text-stone-700">
             {product.description ? (
-              <span dangerouslySetInnerHTML={{ __html: product.description }} />
+              <div className="rich-text" dangerouslySetInnerHTML={{ __html: formatRichText(product.description) }} />
             ) : (
               'Producto del catálogo público de mercadodevida.'
             )}
-          </p>
+          </div>
           <dl className="grid gap-4 rounded-3xl border border-emerald-900/10 bg-white p-6 text-sm text-stone-700 sm:grid-cols-2">
             <div>
               <dt className="font-semibold text-emerald-950">URL pública</dt>