From ff047cac2e5b9ead40277bd6882ee4075d70c2e5 Mon Sep 17 00:00:00 2001
From: Carlos Narro <carlos@relabtive.com>
Date: Thu, 11 Jun 2026 18:37:53 +0200
Subject: [PATCH] =?UTF-8?q?A=C3=B1ade=20overlay=20de=20play=20sobre=20la?=
 =?UTF-8?q?=20captura=20de=20WhatsApp=20en=20landing=20B2B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 mvp/b2c/public/b2b.html | 98 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 93 insertions(+), 5 deletions(-)

diff --git a/mvp/b2c/public/b2b.html b/mvp/b2c/public/b2b.html
index 81da4fd..6e7f2b6 100644
--- a/mvp/b2c/public/b2b.html
+++ b/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
-            style="width: 100%; border-radius: 15px"
-            src="whatsapp.png"
-            alt=""
-          />
+          <div class="video-frame">
+            <img
+              src="whatsapp.png"
+              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