.google-reviews-video-container { --videos-visibles: 4; width: 100%; max-width: 1080px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; padding: 10px 0; } @media (max-width: 767px) { .google-reviews-video-container { --videos-visibles: 2; max-width: 100%; } } .reviews-carousel-wrapper { width: 100%; overflow: hidden; } .reviews-track { display: flex; width: 100%; } .reviews-track.animated { transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); } .review-slide { flex: 0 0 calc(100% / var(--videos-visibles)); padding: 0 6px; box-sizing: border-box; display: flex !important; justify-content: center !important; } .video-card { position: relative; width: 90% !important; height: 280px !important; background-color: transparent !important; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } @media (max-width: 767px) { .review-slide { padding: 0 8px; } .video-card { width: 100% !important; height: 240px !important; } } /* Importante: Añadimos object-fit cover al póster para que mantenga proporciones */ .video-card video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; border-radius: 20px; background-color: #000 !important; transform: scale(1.02); } .play-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.02); cursor: pointer; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 2; } .video-card.playing .play-overlay { opacity: 0; visibility: hidden; pointer-events: none; } .play-button-circle { width: 50px; height: 50px; border: 2.5px solid #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(2px); transition: transform 0.2s ease; } .play-button-circle svg { width: 20px; height: 20px; margin-left: 3px; } @media (max-width: 767px) { .play-button-circle { width: 42px; height: 42px; border-width: 2px; } .play-button-circle svg { width: 16px; height: 16px; margin-left: 2px; } } .reviews-dots { display: flex; justify-content: center; gap: 14px; margin-top: 18px; min-height: 11px; } .review-dot { width: 11px; height: 11px; background-color: #f3cbd3 !important; border: none !important; border-radius: 50%; cursor: pointer; padding: 0; transition: background-color 0.3s ease; outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; } .review-dot.active { background-color: #6d1b23 !important; } (function() { const carruselInfinitoReal = () => { const container = document.querySelector(".google-reviews-video-container"); const track = document.querySelector(".reviews-track"); const dotsContainer = document.querySelector(".reviews-dots"); if (!container || !track || !dotsContainer) return; let originalSlides = Array.from(track.children); const totalOriginals = originalSlides.length; if (totalOriginals === 0) return; const getStepPercent = () => { const videosVisibles = parseFloat(getComputedStyle(container).getPropertyValue("--videos-visibles")) || 4; return 100 / videosVisibles; }; for (let i = 0; i < 4; i++) { track.appendChild(originalSlides[i % totalOriginals].cloneNode(true)); } for (let i = 1; i <= 4; i++) { const targetIndex = (totalOriginals - i % totalOriginals + totalOriginals) % totalOriginals; track.insertBefore(originalSlides[targetIndex].cloneNode(true), track.firstChild); } const allSlides = track.querySelectorAll(".review-slide"); let currentIndex = 4; track.style.transform = `translateX(-${currentIndex * getStepPercent()}%)`; dotsContainer.innerHTML = ""; for (let i = 0; i { let dotActiveIndex = (index - 4) % totalOriginals; if (dotActiveIndex { if (idx === dotActiveIndex) { dot.classList.add("active"); } else { dot.classList.remove("active"); } }); }; const moverA = (index, conAnimacion = true) => { currentIndex = index; if (conAnimacion) { track.classList.add("animated"); } else { track.classList.remove("animated"); } track.style.transform = `translateX(-${currentIndex * getStepPercent()}%)`; actualizarPuntitos(currentIndex); }; track.addEventListener("transitionend", () => { if (currentIndex >= totalOriginals + 4) { moverA(4, false); } if (currentIndex { const targetDot = e.target.closest(".review-dot"); if (!targetDot) return; e.preventDefault(); const targetSection = parseInt(targetDot.getAttribute("data-target"), 10); moverA(targetSection + 4, true); }); allSlides.forEach((slide) => { const video = slide.querySelector("video"); const overlay = slide.querySelector(".play-overlay"); if (!video || !overlay) return; overlay.addEventListener("click", (e) => { e.preventDefault(); allSlides.forEach(s => { const v = s.querySelector("video"); if (v && v !== video) v.pause(); }); if (video.paused) { // Al hacer play, el navegador forzará la carga del archivo, eliminando el bloqueo inicial video.play().catch(err => console.log(err)); video.controls = true; } }); video.addEventListener("play", () => slide.querySelector(".video-card").classList.add("playing")); video.addEventListener("pause", () => { slide.querySelector(".video-card").classList.remove("playing"); video.controls = false; }); video.addEventListener("ended", () => { slide.querySelector(".video-card").classList.remove("playing"); video.controls = false; video.currentTime = 0; }); }); let startX = 0; let endX = 0; track.addEventListener("touchstart", (e) => { startX = e.touches[0].clientX; }, { passive: true }); track.addEventListener("touchend", (e) => { endX = e.changedTouches[0].clientX; const threshold = 40; if (startX - endX > threshold) { moverA(currentIndex + 1, true); } else if (endX - startX > threshold) { moverA(currentIndex - 1, true); } }, { passive: true }); window.addEventListener("resize", () => { moverA(currentIndex, false); }); }; if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", carruselInfinitoReal); } else { carruselInfinitoReal(); } })();