.elementor-5221 .elementor-element.elementor-element-4f43109{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5221 .elementor-element.elementor-element-c100a91{--display:flex;--border-radius:15px 15px 15px 15px;--padding-top:0%;--padding-bottom:56.25%;--padding-left:0%;--padding-right:0%;}.elementor-5221 .elementor-element.elementor-element-c100a91:not(.elementor-motion-effects-element-type-background), .elementor-5221 .elementor-element.elementor-element-c100a91 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-5221 .elementor-element.elementor-element-a952dcd{width:var( --container-widget-width, 35% );max-width:35%;--container-widget-width:35%;--container-widget-flex-grow:0;top:3%;z-index:9999;text-align:right;}.elementor-5221 .elementor-element.elementor-element-a952dcd > .elementor-widget-container{padding:3% 3% 3% 3%;}body:not(.rtl) .elementor-5221 .elementor-element.elementor-element-a952dcd{right:3%;}body.rtl .elementor-5221 .elementor-element.elementor-element-a952dcd{left:3%;}.elementor-5221 .elementor-element.elementor-element-a952dcd img{width:50%;max-width:100px;}.elementor-5221 .elementor-element.elementor-element-0e7f75d{--display:flex;--min-height:27px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5221 .elementor-element.elementor-element-0e7f75d.e-con{--align-self:flex-end;--flex-grow:0;--flex-shrink:0;}.elementor-5221 .elementor-element.elementor-element-9efee7a{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:15px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5221 .elementor-element.elementor-element-8263bf7 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-5221 .elementor-element.elementor-element-8263bf7 .jet-listing-dynamic-field__content{color:var( --e-global-color-text );font-family:"Neue Haas Grotesk", Sans-serif;font-size:15px;font-weight:600;text-align:left;}.elementor-5221 .elementor-element.elementor-element-8263bf7 .jet-listing-dynamic-field .jet-listing-dynamic-field__inline-wrap{width:auto;}.elementor-5221 .elementor-element.elementor-element-8263bf7 .jet-listing-dynamic-field .jet-listing-dynamic-field__content{width:auto;}.elementor-5221 .elementor-element.elementor-element-8263bf7 .jet-listing-dynamic-field{justify-content:flex-start;}.elementor-5221 .elementor-element.elementor-element-bae3420 > .elementor-widget-container{padding:0% 0% 0% 0%;}.elementor-5221 .elementor-element.elementor-element-bae3420 .jet-listing-dynamic-terms{text-align:left;}.elementor-5221 .elementor-element.elementor-element-bae3420 .jet-listing-dynamic-terms__link{font-family:"Neue Haas Grotesk", Sans-serif;font-size:15px;font-weight:600;color:var( --e-global-color-secondary );}.elementor-5221 .elementor-element.elementor-element-bae3420 .jet-listing-dynamic-terms__link:hover{color:var( --e-global-color-secondary );}.elementor-5221 .elementor-element.elementor-element-bae3420 .jet-listing-dynamic-terms__prefix{font-size:15px;color:var( --e-global-color-secondary );}@media(max-width:767px){.elementor-5221 .elementor-element.elementor-element-0e7f75d{--min-height:0px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-5221 .elementor-element.elementor-element-8263bf7 .jet-listing-dynamic-field__content{font-size:15px;}.elementor-5221 .elementor-element.elementor-element-bae3420 .jet-listing-dynamic-terms__prefix{font-size:15px;}}@media(min-width:768px){.elementor-5221 .elementor-element.elementor-element-0e7f75d{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-4f43109 */<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Listing Grid con Liquid Glass</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 0; /* Asegura que no haya padding predeterminado */
            /* Puedes añadir un fondo aquí para probar, o se adaptará al fondo de tu web */
            /* background: linear-gradient(135deg, #a8dadc, #457b9d, #1d3557); */
            display: flex; /* Añadido solo para centrar el ejemplo en esta vista previa */
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            min-height: 100vh; /* Añadido solo para centrar el ejemplo en esta vista previa */
        }

        /* Clase CSS para el contenedor principal de cada elemento del repetidor que contiene el video */
        /* Asigna esta clase (por ejemplo, 'video-repeater-item') al Contenedor o Columna en tu Plantilla de Bucle */
        .video-repeater-item {
            position: relative;
            overflow: hidden; /* Asegura que el contenido y los pseudo-elementos no se desborden */
            border-radius: 12px; /* Redondeo de esquinas para el elemento completo */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra para el elemento */
            cursor: pointer; /* Indica que el área es interactiva, aunque no haya redirección directa aquí */
            width: auto; /* Ancho fijo de ejemplo para el item de la grid. Ajusta según tu diseño en Elementor. */
            aspect-ratio: 16 / 9; /* Mantiene la relación de aspecto 16:9 */
            display: flex; /* Para centrar el contenido de ejemplo */
            justify-content: center;
            align-items: center;
            color: white; /* Color del texto de ejemplo */
            font-size: 1.2rem;
            text-align: center;
        }

        /* Estilos para el video/iframe real dentro del contenedor */
        /* Esto asegura que el widget de video de Elementor ocupe todo el espacio del contenedor padre */
        .video-repeater-item .elementor-widget-container,
        .video-repeater-item .elementor-wrapper,
        .video-repeater-item iframe,
        .video-repeater-item video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none; /* Elimina el borde predeterminado del iframe/video */
            border-radius: 12px; /* Coincide con el redondeo del contenedor principal */
            object-fit: cover; /* Asegura que el video cubra el área sin distorsión */
        }

        /* Overlay oscuro que aparece al pasar el ratón - MENOS BLUR Y MÁS LÍQUIDO */
        .video-repeater-item::before {
            content: "";
            position: absolute;
            inset: 0; /* Cubre todo el área del padre */
            background: rgba(255, 255, 255, 0.01); /* Fondo muy ligeramente blanco semitransparente */
            backdrop-filter: blur(6px) saturate(180%); /* BLUR REDUCIDO para menos efecto frosty */
            -webkit-backdrop-filter: blur(6px) saturate(180%); /* Para compatibilidad con Safari */
            opacity: 0; /* Invisible por defecto */
            transition: opacity 0.4s ease, backdrop-filter 0.4s ease; /* Transición suave para la opacidad y el filtro */
            z-index: 1; /* Asegura que esté por encima del video */
            border-radius: 12px; /* Coincide con el redondeo del contenedor principal */
            border: 1px solid rgba(255, 255, 255, 0.08); /* Borde sutil y más visible */
            box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.25); /* Sombra ajustada para más profundidad */
        }

        /* Rectángulo del botón de play con icono - AHORA MENOS BLUR Y MÁS LÍQUIDO EN EL FONDO, Y LOGO TRANSPARENTE */
        .video-repeater-item::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60px; /* Ancho del rectángulo del botón de play */
            height: 36px; /* Alto del rectángulo del botón de play */
            background: rgba(255, 255, 255, 0.03); /* Fondo muy transparente para el efecto de vidrio */
            backdrop-filter: blur(3px) saturate(150%); /* BLUR MUY REDUCIDO para menos efecto frosty */
            -webkit-backdrop-filter: blur(3px) saturate(150%);
            border-radius: 8px; /* Redondeo de las esquinas del rectángulo */
            transform: translate(-50%, -50%) scale(0.8); /* Centra y escala ligeramente más pequeño por defecto */
            opacity: 0; /* Invisible por defecto */
            transition: opacity 0.4s ease, transform 0.4s ease, background 0.4s ease; /* Transiciones suaves */
            z-index: 2; /* Asegura que esté por encima del overlay oscuro */
            border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil y más transparente */
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); /* Sombra para el botón de play */

            /* Icono de play como fondo SVG - **AHORA CON FILL TRANSPARENTE** */
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>'); /* **Fill currentColor** */
            background-size: 24px 24px; /* Tamaño del icono de play */
            background-repeat: no-repeat;
            background-position: center; /* Centra el icono dentro del rectángulo */
            color: rgba(255, 255, 255, 0.4); /* **Color del icono (se aplica a currentColor)** */
        }

        /* Muestra el overlay y el botón de play al pasar el ratón */
        .video-repeater-item:hover::before,
        .video-repeater-item:hover::after {
            opacity: 1;
        }

        /* Efecto de escala en el botón de play al pasar el ratón */
        .video-repeater-item:hover::after {
            transform: translate(-50%, -50%) scale(1); /* Vuelve a su tamaño normal al pasar el ratón */
        }

        /* Estilos para el mensaje emergente */
        .message-box {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            display: none;
            text-align: center;
            font-size: 0.9rem;
        }

        .message-box button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
            font-size: 0.8rem;
        }
    </style>
</head>
<body>
    <!--
        En Elementor, esta sería la estructura de tu "Loop Item" o "Post Template".
        Debes asignar la clase 'video-repeater-item' al Contenedor o Columna principal
        que envuelve el widget de video.
        Asegúrate de asignar dinámicamente el atributo 'data-url' a este contenedor
        usando las opciones de etiquetas dinámicas de Elementor (ej. {{post_url}}).
    -->
    <div class="video-repeater-item" data-url="URL_DINAMICA_DE_LA_ENTRADA">
        <!--
            Aquí iría tu widget de video de Elementor o un iframe/video tag.
            Asegúrate de que el video ocupe el 100% del ancho y alto de este contenedor.
            Ejemplo de cómo se vería el widget de video de Elementor (no lo incluyas aquí directamente):
            <div class="elementor-widget-container">
                <iframe src="tu_url_de_video" frameborder="0" allowfullscreen></iframe>
            </div>
            O si es un video HTML5:
            <video src="tu_url_de_video.mp4" controls></video>
        -->
        <!-- Puedes poner un texto placeholder si no tienes el widget de video para probar el efecto -->
        <p>Tu Video Aquí</p>
    </div>

    <!-- Mensaje emergente (para depuración o feedback) -->
    <div id="messageBox" class="message-box">
        <p id="messageText"></p>
        <button onclick="hideMessage()">Cerrar</button>
    </div>

    <script>
        // Este es el SVG para el efecto de distorsión.
        // Se añade directamente al body para que el filtro pueda aplicarse.
        // Es importante que este SVG esté en el DOM para que el filtro funcione.
        // En Elementor, esto iría en un widget HTML global (ej. en el footer de la plantilla)
        const svgFilter = `
            <svg class="liquid-filter" xmlns="http://www.w3.org/2000/svg" version="1.1" style="position: absolute; width: 0; height: 0;">
                <defs>
                    <filter id="liquid-distortion-grid">
                        <feTurbulence type="fractalNoise" baseFrequency="0.015 0.015" numOctaves="1" result="noise" />
                        <feDisplacementMap in="SourceGraphic" in2="noise" scale="0" xChannelSelector="R" yChannelSelector="G" result="displacement" />
                        <feGaussianBlur in="displacement" stdDeviation="0" result="blurred" />
                        <feComposite in="SourceGraphic" in2="blurred" operator="atop" />
                    </filter>
                </defs>
            </svg>
        `;
        document.body.insertAdjacentHTML('beforeend', svgFilter);

        const videoItems = document.querySelectorAll('.video-repeater-item');
        const messageBox = document.getElementById('messageBox');
        const messageText = document.getElementById('messageText');

        function showMessage(message) {
            messageText.textContent = message;
            messageBox.style.display = 'block';
        }

        function hideMessage() {
            messageBox.style.display = 'none';
        }

        videoItems.forEach(item => {
            item.addEventListener('click', () => {
                const targetUrl = item.dataset.url;
                if (targetUrl && targetUrl !== 'URL_DINAMICA_DE_LA_ENTRADA') { // Evita redirigir si la URL es el placeholder
                    window.location.href = targetUrl;
                } else {
                    showMessage('No se ha especificado una URL válida para este elemento.');
                }
            });

            // Lógica para el efecto "líquido" dinámico al pasar el ratón
            // Esto aplicará el filtro SVG al elemento completo (el contenedor del video)
            // para simular la distorsión del "vidrio" sobre el video.
            const feDisplacementMap = document.querySelector('#liquid-distortion-grid feDisplacementMap');
            const feGaussianBlur = document.querySelector('#liquid-distortion-grid feGaussianBlur');

            item.addEventListener('mouseenter', () => {
                item.style.filter = 'url(#liquid-distortion-grid)'; // Aplica el filtro SVG al item
                let scale = 0;
                let blur = 0;
                const animateIn = () => {
                    if (scale < 18) { // Escala de distorsión aumentada para un efecto más notorio
                        scale += 1.2;
                        feDisplacementMap.setAttribute('scale', scale);
                        blur += 0.6; // Aumenta el desenfoque junto con la escala
                        feGaussianBlur.setAttribute('stdDeviation', blur);
                        requestAnimationFrame(animateIn);
                    }
                };
                animateIn();
            });

            item.addEventListener('mouseleave', () => {
                let scale = 18; // Valor inicial de la escala para la animación de salida
                let blur = 9; // Valor inicial del desenfoque para la animación de salida
                const animateOut = () => {
                    if (scale > 0) {
                        scale -= 1.2;
                        feDisplacementMap.setAttribute('scale', scale);
                        blur -= 0.6;
                        feGaussianBlur.setAttribute('stdDeviation', blur);
                        requestAnimationFrame(animateOut);
                    } else {
                        item.style.filter = 'none'; // Elimina el filtro SVG
                    }
                };
                animateOut();
            });
        });
    </script>
</body>
</html>/* End custom CSS */