Añade overlay de play sobre la captura de WhatsApp en landing B2B

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

mvp/b2c/public/b2b.html

@@ -2139,6 +2139,90 @@
         border-radius: 4px;
       }
 
+      /* Overlay de play sobre la captura de WhatsApp: se lee como vídeo.
+         Cuando exista el vídeo real, envolver con <a>/<button> y reproducir. */
+      .video-frame {
+        position: relative;
+        display: block;
+        border-radius: 15px;
+        overflow: hidden;
+        cursor: pointer;
+        line-height: 0;
+      }
+      .video-frame img {
+        width: 100%;
+        display: block;
+      }
+      .video-frame::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(
+          60% 60% at 50% 50%,
+          rgba(0, 0, 0, 0.3),
+          rgba(0, 0, 0, 0.05) 70%
+        );
+        transition: opacity 0.25s ease;
+      }
+      .video-frame:hover::after {
+        opacity: 0.6;
+      }
+      .video-frame .play-btn {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 84px;
+        height: 84px;
+        border-radius: var(--radius-full);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(0, 0, 0, 0.55);
+        border: 2px solid rgba(255, 255, 255, 0.92);
+        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
+        -webkit-backdrop-filter: blur(2px);
+        backdrop-filter: blur(2px);
+        transition: transform 0.2s ease, background 0.2s ease;
+        z-index: 1;
+      }
+      .video-frame:hover .play-btn {
+        transform: translate(-50%, -50%) scale(1.08);
+        background: rgba(0, 0, 0, 0.7);
+      }
+      .video-frame .play-btn svg {
+        width: 34px;
+        height: 34px;
+        margin-left: 4px;
+        fill: #fff;
+      }
+      .video-frame .play-btn::before {
+        content: "";
+        position: absolute;
+        inset: -8px;
+        border-radius: var(--radius-full);
+        border: 2px solid rgba(255, 255, 255, 0.5);
+        animation: playPulse 2.4s ease-out infinite;
+      }
+      @keyframes playPulse {
+        0% {
+          transform: scale(0.9);
+          opacity: 0.7;
+        }
+        70% {
+          transform: scale(1.25);
+          opacity: 0;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .video-frame .play-btn::before {
+          animation: none;
+        }
+      }
+
       /* Antes / después en "Cómo funciona" */
       .step .ba {
         margin-top: var(--space-3);
@@ -2512,11 +2596,15 @@
             >
           </div> -->
 
-          <img
+          <div class="video-frame">
-            style="width: 100%; border-radius: 15px"
+            <img
-            src="whatsapp.png"
+              src="whatsapp.png"
-            alt=""
+              alt="Vídeo demo de Reformix: render y presupuesto entregados por WhatsApp"
-          />
+            />
+            <span class="play-btn" aria-hidden="true">
+              <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
+            </span>
+          </div>
         </div>
 
         <div