feat: Add Blend Mode support to Video and Image template fields

src/components/express/builder/FieldConfigPanel.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
   Settings2, Tag, ToggleLeft, Type, Image as ImageIcon, Video, Pentagon,
-  Zap, AlertCircle, Hash, Eye, EyeOff, ArrowLeftRight,
+  Zap, AlertCircle, Hash, Eye, EyeOff, ArrowLeftRight, HelpCircle
 } from 'lucide-react';
 import { TemplateField, TemplateFieldNature, TemplateFieldType, BrandSource, StickerConfig } from '../../../types';
 import { useTemplateBuilder } from '../../../context/TemplateBuilderContext';
@@ -450,6 +450,38 @@ export const FieldConfigPanel: React.FC = () => {
                       className="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-xs text-white focus:border-violet-500/50 focus:outline-none"
                     />
                   </div>
+
+                  {/* Blend Mode */}
+                  <div className="space-y-1 mt-2 border-t border-neutral-800 pt-2">
+                    <label className="text-[9px] text-neutral-500 flex items-center justify-between">
+                      Modo de Fusión (Blend)
+                      <div className="group relative">
+                        <HelpCircle size={10} className="text-neutral-400 hover:text-white cursor-help" />
+                        <div className="absolute right-0 bottom-full mb-2 w-48 p-2 bg-neutral-900 border border-neutral-700 rounded-lg text-[10px] text-neutral-300 hidden group-hover:block z-50 shadow-xl pointer-events-none">
+                          <ul className="space-y-1">
+                            <li><strong className="text-white">Normal:</strong> Sin efecto.</li>
+                            <li><strong className="text-white">Screen:</strong> Elimina fondos negros. Ideal para brillos o fuego.</li>
+                            <li><strong className="text-white">Multiply:</strong> Elimina fondos blancos. Ideal para bocetos o texturas oscuras.</li>
+                            <li><strong className="text-white">Overlay:</strong> Aumenta el contraste combinando oscuros y claros.</li>
+                          </ul>
+                        </div>
+                      </div>
+                    </label>
+                    <select
+                      value={field.style.blendMode || 'normal'}
+                      onChange={(e) => updateField(field.id, {
+                        style: { ...field.style, blendMode: e.target.value as any }
+                      })}
+                      className="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1.5 text-xs text-white focus:border-violet-500/50 focus:outline-none"
+                    >
+                      <option value="normal">Normal</option>
+                      <option value="multiply">Multiply (Elimina Blanco)</option>
+                      <option value="screen">Screen (Elimina Negro)</option>
+                      <option value="overlay">Overlay</option>
+                      <option value="soft-light">Soft Light</option>
+                      <option value="color-dodge">Color Dodge</option>
+                    </select>
+                  </div>
                   <div className="flex gap-2">
                     <div className="flex-1 space-y-1">
                       <label className="text-[9px] text-neutral-500">Ancho mín.</label>

src/types.ts

@@ -404,6 +404,8 @@ export interface TemplateFieldRules {
 export interface TemplateFieldStyle {
   /** How media (images/videos) fits within its bounding box */
   mediaFit?: 'cover' | 'contain' | 'fill';
+  /** CSS mix-blend-mode for media effects (e.g., removing black/white backgrounds) */
+  blendMode?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'soft-light' | 'color-dodge';
   /** Use brand typographic role for font/size/weight/color (default: true) */
   useBrandStyle?: boolean;
   /** Typographic role — resolves font/size/weight/color from DesignMD when useBrandStyle is true */

src/utils/expressCompiler.ts

@@ -353,6 +353,7 @@ export function compileExpressToTimeline(
           scale: 1,
           rotation: field.position.rotation || 0,
           opacity: field.style.opacity ?? 100,
+          blendMode: field.style.blendMode,
           layerId,
           isBrandElement: field.nature === 'brand-variable',
           isLocked: field.nature === 'static',