fix: Render intro and outro videos correctly on BuilderCanvas preview

src/components/express/builder/BuilderCanvas.tsx

@@ -57,6 +57,8 @@ function resolveBrandPreview(field: TemplateField, designMD: DesignMD, company:
     case 'twitter': return company.socialLinks?.x || '@x';
     case 'youtube': return company.socialLinks?.youtube || 'YouTube';
     case 'website': return company.socialLinks?.website || 'www.example.com';
+    case 'intro-video': return designMD.introVideoUrl || '';
+    case 'outro-video': return designMD.outroVideoUrl || '';
     default: return field.content;
   }
 }
@@ -365,11 +367,48 @@ const BrandVariableContent: React.FC<{ field: TemplateField; designMD: DesignMD;
         src={designMD.logoUrl}
         alt="Logo"
         className="max-w-full max-h-full object-contain pointer-events-none p-1"
-        style={{ opacity: (field.style.opacity ?? 100) / 100 }}
+        style={{
+          opacity: (field.style.opacity ?? 100) / 100,
+          mixBlendMode: field.style.blendMode as any,
+        }}
       />
     );
   }
 
+  // Intro / Outro Video: show video player or placeholder
+  if (field.brandSource === 'intro-video' || field.brandSource === 'outro-video') {
+    if (preview) {
+      const objectFit = field.brandSource === 'intro-video'
+        ? (designMD.introVideoFit || field.style.mediaFit || 'cover')
+        : (designMD.outroVideoFit || field.style.mediaFit || 'cover');
+      const bgColor = field.brandSource === 'intro-video' ? designMD.introVideoBgColor : designMD.outroVideoBgColor;
+
+      return (
+        <video
+          src={preview}
+          className="w-full h-full pointer-events-none overflow-hidden rounded-md"
+          style={{
+            objectFit: objectFit as any,
+            backgroundColor: objectFit === 'contain' ? (bgColor || 'transparent') : 'transparent',
+            opacity: (field.style.opacity ?? 100) / 100,
+            mixBlendMode: field.style.blendMode as any,
+          }}
+          muted
+          loop
+          playsInline
+          autoPlay
+        />
+      );
+    } else {
+      return (
+        <div className="flex flex-col items-center justify-center gap-0.5 pointer-events-none" style={{ color: '#c4b5fd' }}>
+          <Video size={16} />
+          <span className="text-[7px] font-mono text-center">Sin video de marca<br />({field.brandSource})</span>
+        </div>
+      );
+    }
+  }
+
   // Sticker: icon + text composite
   if (field.type === 'sticker') {
     return <BrandStickerContent field={field} designMD={designMD} company={company} />;