/* Evita que el widget/columna de Elementor recorte el slider o le imponga otra altura */ .elementor-widget-wrap:has(#ppd-slider), .elementor-column:has(#ppd-slider), .elementor-widget-container:has(#ppd-slider){ overflow: visible !important; height: auto !important; min-height: 0 !important; } .ppd-slider{ position: relative; width: 97%; /* casi todo el ancho de la pantalla */ max-width: 1900px; /* límite alto para pantallas gigantes */ margin: 0 auto; height: 55vh; /* NO ocupa toda la pantalla */ max-height: 600px; min-height: 260px; overflow: hidden; border-radius: 12px; } .ppd-slider h1.ppd-title, .ppd-title{ position: absolute !important; top: 100px !important; left: 60px !important; transform: none !important; margin: 0 !important; color: #ffffff !important; text-align: left !important; font-size: clamp(18px, 3vw, 32px) !important; font-weight: 700 !important; letter-spacing: 1px !important; text-shadow: 0 2px 8px rgba(0,0,0,0.55) !important; z-index: 6 !important; max-width: 80% !important; padding: 0 !important; line-height: 1.2 !important; } .ppd-slide{ position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease-in-out; pointer-events: none; } .ppd-slide.is-active{ opacity: 1; pointer-events: auto; } .ppd-slide-link{ display: block; width: 100%; height: 100%; } .ppd-slide picture, .ppd-slide img{ width: 100%; height: 100%; display: block; object-fit: cover; /* recorta sin deformar */ object-position: center; } /* Flechas */ .ppd-arrow{ position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.35); color: #fff; border: none; width: 42px; height: 42px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5; transition: background 0.25s ease; } .ppd-arrow:hover{ background: rgba(0,0,0,0.6); } .ppd-prev{ left: 16px; } .ppd-next{ right: 16px; } /* Puntos */ .ppd-dots{ position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; } .ppd-dot{ width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.5); border: none; cursor: pointer; padding: 0; transition: background 0.25s ease, transform 0.25s ease; } .ppd-dot.is-active{ background: #fff; transform: scale(1.2); } /* Móvil: ocupa todo el ancho, sin bordes redondeados */ @media (max-width: 767px){ .ppd-slider{ width: 100%; height: auto; aspect-ratio: 1 / 1; /* imágenes móviles confirmadas 1080x1080 */ max-height: none; min-height: 0; border-radius: 0; } .ppd-slide picture, .ppd-slide img{ object-fit: cover; } .ppd-arrow{ width: 34px; height: 34px; font-size: 14px; } .ppd-slider h1.ppd-title, .ppd-title{ top: 14px !important; left: 50% !important; transform: translateX(-50%) !important; text-align: center !important; max-width: 100% !important; } } (function(){ var root = document.getElementById('ppd-slider'); if(!root) return; var slides = Array.prototype.slice.call(root.querySelectorAll('.ppd-slide')); var dotsWrap = root.querySelector('.ppd-dots'); var prevBtn = root.querySelector('.ppd-prev'); var nextBtn = root.querySelector('.ppd-next'); var current = 0; var intervalTime = 5000; // tiempo entre slides (ms) var timer; var mobileMQ = window.matchMedia('(max-width: 767px)'); function applyRatioFromImg(img){ if(!mobileMQ.matches) { root.style.removeProperty('aspect-ratio'); return; } if(img && img.naturalWidth && img.naturalHeight){ root.style.aspectRatio = img.naturalWidth + ' / ' + img.naturalHeight; } } function updateRatioForSlide(index){ var img = slides[index].querySelector('img'); if(!img) return; if(img.complete && img.naturalWidth){ applyRatioFromImg(img); } else { img.addEventListener('load', function(){ applyRatioFromImg(img); }, { once: true }); } } mobileMQ.addEventListener('change', function(){ updateRatioForSlide(current); }); // crear puntos dinámicamente slides.forEach(function(_, i){ var dot = document.createElement('button'); dot.className = 'ppd-dot' + (i === 0 ? ' is-active' : ''); dot.setAttribute('aria-label', 'Ir al slide ' + (i+1)); dot.addEventListener('click', function(){ goTo(i); }); dotsWrap.appendChild(dot); }); var dots = Array.prototype.slice.call(dotsWrap.querySelectorAll('.ppd-dot')); function goTo(index){ slides[current].classList.remove('is-active'); dots[current].classList.remove('is-active'); current = (index + slides.length) % slides.length; slides[current].classList.add('is-active'); dots[current].classList.add('is-active'); updateRatioForSlide(current); resetTimer(); } function next(){ goTo(current + 1); } function prev(){ goTo(current - 1); } function resetTimer(){ clearInterval(timer); timer = setInterval(next, intervalTime); } nextBtn.addEventListener('click', next); prevBtn.addEventListener('click', prev); updateRatioForSlide(current); resetTimer(); })();