/**
 *    Nombre:       galeria-lazyload.css
 *    Descripcion:  Estilos de galeria-lazyload.js (WEB-522). Derivado de vi-lazyload 2.0.0, con dos
 *                  cambios: la foto ya no es un background del contenido sino dos capas que se cruzan
 *                  (.gl-lazyload-foto), y el play va en el verde del sitio en vez del celeste de Vimeo,
 *                  porque el mismo recuadro sirve para Vimeo y para YouTube. El logo no se copio: en el
 *                  sitio siempre se usa con data-logo="0".
 *    Version:      1.0.0
 *    Creado:       02-09-2026
 *    Modificado:   02-09-2026
 *    Autor:        Sebastian Toyos
 *
 *    Basado en https://github.com/the-muda-organization/vimeo-lazyload (MIT License)
 */

/* contenedor */
.gl-lazyload
{
	width: 100%;
	position: relative !important;
	overflow: hidden;
	cursor: pointer;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* mantiene el 16:9 y el fondo negro desde antes de que corra el JS */
.gl-lazyload::before
{
	content: '';
	width: 100%;
	display: block;
	position: relative;
	padding-top: 56.25%;
	background-color: #000;
}

.gl-lazyload-wrap
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: inherit;
}

.gl-lazyload-content
{
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #000;
}

/* las dos capas del cruce: la de abajo queda con la foto anterior mientras la de arriba entra o sale.
   La duracion de la transicion la pone el JS, que la recibe por parametro */
.gl-lazyload-foto
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat;
	transition: opacity linear;
}

/* play, tapando todo el recuadro como en las librerias originales: se toca en cualquier lado */
.gl-lazyload-playbtn
{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Crect fill='rgba(0,0,0,.65)' width='13' height='8' rx='1' ry='1'/%3E%3Cpolygon fill='%23fff' points='5 6 9 4 5 2'/%3E%3C/svg%3E");
	background-position: 50%;
	background-size: calc(35px + 10%) auto;
	background-repeat: no-repeat;
}

.gl-lazyload-playbtn:hover
{
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Crect fill='%2300482A' width='13' height='8' rx='1' ry='1'/%3E%3Cpolygon fill='%23fff' points='5 6 9 4 5 2'/%3E%3C/svg%3E");
}

.gl-lazyload iframe
{
	width: 100% !important;
	height: 100% !important;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	border: 0;
	background-color: #000;
}