/* ------------------------------------------------------------------
 * Galeria de la ficha de propiedad
 *
 * Sustituye al carrusel de slick y al visor de magnific-popup. Lo que
 * tiene que aguantar, y es la razon de casi todo lo de aqui: fotos
 * apaisadas y verticales en el mismo carrusel, sin recortar ninguna.
 * Por eso el escenario tiene alto fijo y la imagen va con
 * object-fit: contain, y no con cover.
 *
 * Fondo blanco y #074da3, el azul de marca, para las flechas y la
 * miniatura activa. La primera version iba en oscuro y quedaba como un
 * cuerpo extrano encima de una pagina clara; la segunda uso el #ecf3fa
 * de la pagina en el escenario y blanco en las miniaturas, y los dos
 * tonos juntos tampoco terminaban de cuadrar.
 *
 * En las miniaturas si se recorta, a proposito: ahi lo que importa es
 * que la tira sea regular y se lea de un vistazo.
 * ------------------------------------------------------------------ */

.urban-galeria {
	background: #ffffff;
}

.urban-galeria-principal {
	width: 100%;
	height: 62vh;
	min-height: 320px;
	max-height: 660px;
}

.urban-galeria-principal .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
}

.urban-galeria-principal .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	cursor: zoom-in;
}

/* Este contenedor lo pide el zoom de Swiper. En la galeria de la pagina
 * el zoom no esta activo -- se amplia en el visor -- pero se conserva
 * porque es el que da tamano a la imagen dentro de la diapositiva. */
.urban-galeria-principal .swiper-zoom-container {
	width: 100%;
	height: 100%;
}

/* Flechas: circulo blanco con la punta en el azul de Urban. Sobre fondo
 * claro hace falta la sombra, o se pierden contra una foto clara. */
.urban-galeria .swiper-button-prev,
.urban-galeria .swiper-button-next {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #ffffff;
	color: #074da3;
	box-shadow: 0 2px 10px rgba(12, 35, 57, .18);
}

.urban-galeria .swiper-button-prev:after,
.urban-galeria .swiper-button-next:after {
	font-size: 17px;
	font-weight: 700;
}

.urban-galeria .swiper-button-prev:hover,
.urban-galeria .swiper-button-next:hover {
	background: #074da3;
	color: #ffffff;
}

/* Cuando ya no hay mas fotos hacia ese lado. */
.urban-galeria .swiper-button-disabled {
	opacity: .35;
}

/* Contador de fotos, abajo a la derecha. */
.urban-galeria .urban-galeria-cuenta {
	left: auto;
	right: 16px;
	bottom: 14px;
	width: auto;
	padding: 3px 12px;
	border-radius: 20px;
	background: #ffffff;
	color: #0c2339;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 2px 10px rgba(12, 35, 57, .18);
}

/* Tira de miniaturas. Va en el mismo blanco que el escenario -- con
 * dos tonos distintos quedaba raro -- y se separa con una linea fina. */
.urban-galeria-miniaturas {
	padding: 10px 12px;
	background: #ffffff;
	border-top: 1px solid #e6edf5;
}

.urban-galeria-miniaturas .swiper-slide {
	width: 104px;
	height: 68px;
	overflow: hidden;
	border-radius: 5px;
	opacity: .55;
	cursor: pointer;
	transition: opacity .15s ease;
}

.urban-galeria-miniaturas .swiper-slide:hover {
	opacity: .85;
}

.urban-galeria-miniaturas .swiper-slide-thumb-active {
	opacity: 1;
	outline: 2px solid #074da3;
	outline-offset: -2px;
}

.urban-galeria-miniaturas .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Con una sola foto no hay nada que pasar ni que contar. */
.urban-galeria-unica .swiper-button-prev,
.urban-galeria-unica .swiper-button-next,
.urban-galeria-unica .urban-galeria-cuenta {
	display: none;
}

@media (max-width: 767px) {

	.urban-galeria-principal {
		height: 46vh;
		min-height: 240px;
	}

	.urban-galeria .swiper-button-prev,
	.urban-galeria .swiper-button-next {
		width: 36px;
		height: 36px;
	}

	.urban-galeria .swiper-button-prev:after,
	.urban-galeria .swiper-button-next:after {
		font-size: 14px;
	}

	.urban-galeria-miniaturas {
		padding: 8px;
	}

	.urban-galeria-miniaturas .swiper-slide {
		width: 76px;
		height: 52px;
	}
}


/* ------------------------------------------------------------------
 * El visor a pantalla completa
 *
 * Aqui el fondo SI es oscuro, y no contradice lo de arriba: la galeria
 * vive dentro de la pagina y tiene que ir a juego con ella, y el visor
 * la tapa entera y lo unico que importa es la foto.
 * ------------------------------------------------------------------ */

/* Mientras el visor manda, la pagina de debajo no se desplaza. */
body.urban-visor-abierto {
	overflow: hidden;
}

.urban-visor {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10000;
	display: none;
	background: rgba(12, 35, 57, .95);
}

.urban-visor.urban-visor-visible {
	display: block;
}

.urban-visor-pases {
	width: 100%;
	height: 100%;
}

.urban-visor-pases .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

.urban-visor-pases .swiper-zoom-container {
	width: 100%;
	height: 100%;
}

.urban-visor-pases .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.urban-visor-cerrar {
	position: absolute;
	top: 14px;
	right: 18px;
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	line-height: 1;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #ffffff;
	font-size: 30px;
	cursor: pointer;
}

.urban-visor-cerrar:hover {
	background: rgba(255, 255, 255, .28);
}

.urban-visor .swiper-button-prev,
.urban-visor .swiper-button-next {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #ffffff;
	box-shadow: none;
}

.urban-visor .swiper-button-prev:hover,
.urban-visor .swiper-button-next:hover {
	background: rgba(255, 255, 255, .28);
	color: #ffffff;
}

.urban-visor .urban-visor-cuenta {
	left: 0;
	right: 0;
	bottom: 16px;
	width: 100%;
	padding: 0;
	text-align: center;
	background: none;
	box-shadow: none;
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
}

@media (max-width: 767px) {

	.urban-visor-cerrar {
		top: 10px;
		right: 12px;
		width: 38px;
		height: 38px;
		font-size: 26px;
	}

	.urban-visor .swiper-button-prev,
	.urban-visor .swiper-button-next {
		width: 38px;
		height: 38px;
	}
}