Añade personalización SEO/Quiénes somos y testimonios gestionables por reformista

- Panel/empresa: title y meta description SEO personalizables; foto, texto y
  años de experiencia para el bloque "Quiénes somos" (toggle on/off).
- Funnel por slug: metadata SEO desde el tenant, bloque "Quiénes somos" y
  testimonios servidos desde DB (sustituye los hardcodeados).
- Flujo de opiniones: el reformista solicita la opinión desde la ficha de un
  lead ganado; el cliente la deja en un funnel dedicado /opinion/[id] con
  estrellas + texto + fotos; entra como pendiente y el reformista la modera
  (publicar/ocultar/eliminar) en /panel/opiniones antes de mostrarla.
- Schema: columnas SEO/about en tenants, testimonioSolicitadoAt en leads,
  enum testimonio_estado, tablas testimonios + testimonio_fotos (migración 0006).
- Seed: opiniones demo (2 publicadas, 1 pendiente) y contenido "Quiénes somos".

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

mvp/b2c/src/components/funnel/TestimoniosCliente.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import type { PublicTestimonio } from '@/lib/funnel/public-queries';
+
+function iniciales(nombre: string): string {
+  return nombre
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((p) => p[0]?.toUpperCase() ?? '')
+    .join('');
+}
+
+function Estrellas({ rating }: { rating: number }) {
+  return (
+    <div className="flex gap-0.5" aria-label={`${rating} de 5 estrellas`}>
+      {[1, 2, 3, 4, 5].map((n) => (
+        <svg
+          key={n}
+          viewBox="0 0 24 24"
+          className={`w-4 h-4 ${n <= rating ? 'fill-yellow-400' : 'fill-gray-200'}`}
+          aria-hidden="true"
+        >
+          <path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
+        </svg>
+      ))}
+    </div>
+  );
+}
+
+export default function TestimoniosCliente({ testimonios }: { testimonios: PublicTestimonio[] }) {
+  const sectionRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('opacity-100', 'translate-y-0');
+            entry.target.classList.remove('opacity-0', 'translate-y-6');
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+    const elements = sectionRef.current?.querySelectorAll('.reveal');
+    elements?.forEach((el) => observer.observe(el));
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <section
+      className="section"
+      id="testimonios"
+      ref={sectionRef}
+      aria-labelledby="testimonios-heading"
+    >
+      <div className="container">
+        <div className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out flex flex-col items-center text-center gap-4 mb-16">
+          <span className="badge badge-dark">Testimonios</span>
+          <h2
+            id="testimonios-heading"
+            className="text-[clamp(1.875rem,5vw,3rem)] font-black tracking-[-0.04em] leading-[1.1] text-black max-w-3xl"
+          >
+            Lo que dicen
+            <br />
+            quienes ya reformaron.
+          </h2>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
+          {testimonios.map((t, i) => (
+            <article
+              key={t.id}
+              className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out flex flex-col gap-5 bg-white border border-gray-200 rounded-2xl p-8 shadow-sm hover:shadow-md"
+              style={{ transitionDelay: `${i * 80}ms` }}
+            >
+              <Estrellas rating={t.rating} />
+
+              <blockquote className="text-lg leading-relaxed text-gray-800 italic">
+                {t.texto}
+              </blockquote>
+
+              {t.fotos.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                  {t.fotos.map((url, idx) => (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      key={idx}
+                      src={url}
+                      alt=""
+                      className="w-16 h-16 object-cover rounded-lg border border-gray-200"
+                    />
+                  ))}
+                </div>
+              )}
+
+              <footer className="flex items-center gap-3 mt-auto pt-4 border-t border-gray-100">
+                <div className="w-10 h-10 bg-black text-white rounded-full flex items-center justify-center text-xs font-bold tracking-wider shrink-0">
+                  {iniciales(t.nombre)}
+                </div>
+                <div>
+                  <div className="text-sm font-bold text-black">{t.nombre}</div>
+                  {t.contexto && <div className="text-xs text-gray-500">{t.contexto}</div>}
+                </div>
+              </footer>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}