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 / 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 @@
>
-->
-
+
+
+
+
+
+