/* ------------------------------------------------------------------
 * Galeria de la ficha de propiedad
 *
 * Disposicion de la plantilla HomeID (single-property-2), pedida el
 * 01-10-2026: la foto grande dentro del ancho de la pagina, con las
 * esquinas redondeadas y tres botones encima (favorito, compartir e
 * imprimir), y debajo una tira de miniaturas grandes con las flechas
 * redondas a los lados.
 *
 * Las fotos LLENAN el recuadro (object-fit: cover), tambien las
 * verticales, que se ven recortadas por arriba y por abajo. Es una
 * decision tomada: la version anterior las mostraba enteras con franjas
 * blancas a los lados y esos huecos son justo lo que no gustaba. Al
 * pulsar la foto se abre el visor a pantalla completa y ahi si se ve
 * entera (object-fit: contain), asi que no se pierde nada.
 *
 * Color de marca: el estado activo, el paso del raton y el foco salen de
 * dos variables. Si el portal no las define, es el azul de Urban
 * (#074da3, y #ecf3fa como tinte claro). Un portal con otra marca las
 * define en el style de .urban-galeria-zona de su single-property.php
 * (urbanaragon.com: rojo #E30D2F, 01-10-2026). Asi este fichero sigue
 * siendo el mismo en los ocho portales.
 * ------------------------------------------------------------------ */

.urban-galeria-zona {
	padding: 28px 0 24px;
	background: #ffffff;
}

.urban-galeria {
	position: relative;
}

/* --- La foto grande --- */

.urban-galeria-escenario {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background: #e6edf5;
}

.urban-galeria-principal {
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 640px;
}

.urban-galeria-principal .swiper-slide {
	background: #e6edf5;
}

.urban-galeria-principal .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	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%;
}

/* --- Botones sobre la foto: favorito, compartir, imprimir --- */

.urban-galeria-acciones {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 5;
	display: flex;
	gap: 12px;
}

/* El corazon es el boton de favoritos de siempre: favorite.js le cambia
 * la clase entera (featured-mark-heart-inactive / -active), asi que los
 * estilos van por su posicion dentro de .urban-galeria-acciones y no
 * por una clase propia, que se perderia al primer clic. */
.urban-galeria-acciones > button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	color: #0c2339;
	font-size: 16px;
	line-height: 1;
	box-shadow: 0 2px 10px rgba(12, 35, 57, .18);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.urban-galeria-acciones > button:focus-visible {
	outline: 3px solid var(--urban-galeria-marca, #074da3);
	outline-offset: 2px;
}

.urban-galeria-acciones > button i {
	color: inherit;
}

/* El paso del raton, solo donde hay raton: en un movil el :hover se
 * queda puesto despues de tocar y taparia el estado del boton. */
@media (hover: hover) {

	.urban-galeria-acciones > button:hover {
		background: var(--urban-galeria-marca, #074da3);
		color: #ffffff;
	}

	/* El corazon no cambia de color al pasar, solo se aclara el fondo:
	 * tiene que verse en todo momento si la ficha esta en favoritos o
	 * no. Con el color de marca no vale, porque en un portal de marca
	 * roja pareceria ya guardada. */
	.urban-galeria-acciones > [id-favorita]:hover {
		background: var(--urban-galeria-marca-suave, #ecf3fa);
		color: #0c2339;
	}
}

/* Favorita: corazon rojo, el mismo #a70a29 que en los listados, tambien
 * con el raton encima, para que el clic se note en el acto. */
.urban-galeria-acciones > .featured-mark-heart-active i,
.urban-galeria-acciones > .featured-mark-heart-active:hover i {
	color: #a70a29;
}

/* Menu de compartir (en ordenador; en el movil se usa el del sistema).
 * Cuelga de .urban-galeria y no del escenario: el escenario recorta lo
 * que se sale (overflow: hidden, por las esquinas redondeadas) y en un
 * movil estrecho el menu es mas alto que la foto. El z-index lo pone
 * encima de las flechas de la tira (Swiper les da 10). */
.urban-galeria-compartir-menu {
	position: absolute;
	top: 70px;
	right: 18px;
	z-index: 20;
	display: none;
	min-width: 210px;
	padding: 6px 0;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 6px 24px rgba(12, 35, 57, .22);
}

.urban-galeria-compartir-menu.urban-abierto {
	display: block;
}

.urban-galeria-compartir-menu a,
.urban-galeria-compartir-menu button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 16px;
	border: 0;
	background: none;
	color: #0c2339;
	font-size: 14px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.urban-galeria-compartir-menu a:hover,
.urban-galeria-compartir-menu button:hover,
.urban-galeria-compartir-menu a:focus,
.urban-galeria-compartir-menu button:focus,
.urban-galeria-compartir-menu a:focus-visible,
.urban-galeria-compartir-menu button:focus-visible {
	background: var(--urban-galeria-marca-suave, #ecf3fa);
	color: var(--urban-galeria-marca, #074da3);
	outline: none;
}

.urban-galeria-compartir-menu i {
	width: 18px;
	text-align: center;
	color: var(--urban-galeria-marca, #074da3);
}

/* Contador de fotos, abajo a la derecha. */
.urban-galeria .urban-galeria-cuenta {
	position: absolute;
	left: auto;
	top: auto;
	right: 18px;
	bottom: 16px;
	z-index: 5;
	width: auto;
	padding: 3px 12px;
	border-radius: 20px;
	background: rgba(12, 35, 57, .62);
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
}

/* Hasta que Swiper escribe "1 / 12" el contador esta vacio y se veria
 * como una rayita oscura. */
.urban-galeria .urban-galeria-cuenta:empty {
	display: none;
}

/* Flechas sobre la foto grande, pequenas y discretas. Solo donde hay
 * raton: en el movil se pasa deslizando y ya estan las de la tira. Las
 * crea urban-galeria.js. */
.urban-galeria-foto-anterior,
.urban-galeria-foto-siguiente {
	display: none;
}

@media (hover: hover) and (pointer: fine) {

	.urban-galeria-escenario .urban-galeria-foto-anterior,
	.urban-galeria-escenario .urban-galeria-foto-siguiente {
		display: flex;
		width: 38px;
		height: 38px;
		margin-top: -19px;
		border-radius: 50%;
		background: rgba(255, 255, 255, .75);
		color: #0c2339;
		box-shadow: 0 1px 6px rgba(12, 35, 57, .2);
		transition: background .15s ease;
	}

	.urban-galeria-escenario .urban-galeria-foto-anterior {
		left: 14px;
	}

	.urban-galeria-escenario .urban-galeria-foto-siguiente {
		right: 14px;
	}

	.urban-galeria-escenario .urban-galeria-foto-anterior:after,
	.urban-galeria-escenario .urban-galeria-foto-siguiente:after {
		font-size: 14px;
		font-weight: 700;
	}

	.urban-galeria-escenario .urban-galeria-foto-anterior:hover,
	.urban-galeria-escenario .urban-galeria-foto-siguiente:hover {
		background: #ffffff;
	}
}

/* --- Tira de miniaturas, con las flechas redondas a los lados --- */

.urban-galeria-tira {
	position: relative;
	margin-top: 12px;
}

.urban-galeria-miniaturas .swiper-slide {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 6px;
	opacity: .7;
	cursor: pointer;
	transition: opacity .15s ease;
}

/* El ancho que les va a dar Swiper, puesto ya por CSS. Swiper es de los
 * ultimos scripts de la pagina y, hasta que arranca, cada miniatura
 * mediria el 100% (es lo que pone swiper-bundle.min.css): la primera
 * foto saldria repetida en grande debajo de la principal y luego toda
 * la ficha subiria de golpe. Los cortes TIENEN que coincidir con los
 * breakpoints de la tira en urban-galeria.js. */
.urban-galeria-miniaturas:not(.swiper-initialized) .swiper-slide {
	width: calc((100% - 16px) / 3);
	margin-right: 8px;
}

@media (min-width: 576px) {
	.urban-galeria-miniaturas:not(.swiper-initialized) .swiper-slide {
		width: calc((100% - 30px) / 4);
		margin-right: 10px;
	}
}

@media (min-width: 768px) {
	.urban-galeria-miniaturas:not(.swiper-initialized) .swiper-slide {
		width: calc((100% - 48px) / 5);
		margin-right: 12px;
	}
}

@media (min-width: 992px) {
	.urban-galeria-miniaturas:not(.swiper-initialized) .swiper-slide {
		width: calc((100% - 60px) / 6);
		margin-right: 12px;
	}
}

@media (hover: hover) {
	.urban-galeria-miniaturas .swiper-slide:hover {
		opacity: 1;
	}
}

.urban-galeria-miniaturas .swiper-slide-thumb-active {
	opacity: 1;
	outline: 3px solid var(--urban-galeria-marca, #074da3);
	outline-offset: -3px;
}

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

/* Las flechas pasan de foto en la galeria grande; la tira las sigue
 * sola. Van medio fuera de la tira, como en la plantilla. */
.urban-galeria-tira .swiper-button-prev,
.urban-galeria-tira .swiper-button-next {
	width: 52px;
	height: 52px;
	margin-top: -26px;
	border-radius: 50%;
	background: #ffffff;
	color: #0c2339;
	box-shadow: 0 2px 12px rgba(12, 35, 57, .2);
	transition: background .15s ease, color .15s ease;
}

.urban-galeria-tira .swiper-button-prev {
	left: -26px;
}

.urban-galeria-tira .swiper-button-next {
	right: -26px;
}

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

@media (hover: hover) {
	.urban-galeria-tira .swiper-button-prev:hover,
	.urban-galeria-tira .swiper-button-next:hover {
		background: var(--urban-galeria-marca, #074da3);
		color: #ffffff;
	}
}

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

/* Hasta 1199px el contenedor deja poco margen a los lados: las flechas
 * entran un poco para no salirse de la pantalla. */
@media (max-width: 1199px) {

	.urban-galeria-tira .swiper-button-prev {
		left: -12px;
	}

	.urban-galeria-tira .swiper-button-next {
		right: -12px;
	}
}

@media (max-width: 767px) {

	.urban-galeria-zona {
		padding: 14px 0 16px;
	}

	.urban-galeria-escenario {
		border-radius: 8px;
	}

	/* En el movil, mas alta: se recortan menos las verticales. */
	.urban-galeria-principal {
		aspect-ratio: 4 / 3;
	}

	.urban-galeria-acciones {
		top: 12px;
		right: 12px;
		gap: 8px;
	}

	.urban-galeria-acciones > button {
		width: 38px;
		height: 38px;
		font-size: 15px;
	}

	.urban-galeria-compartir-menu {
		top: 58px;
		right: 12px;
	}

	.urban-galeria .urban-galeria-cuenta {
		right: 12px;
		bottom: 12px;
	}

	.urban-galeria-tira {
		margin-top: 8px;
	}

	/* Las flechas, dentro de la tira: fuera se saldrian de la pantalla. */
	.urban-galeria-tira .swiper-button-prev,
	.urban-galeria-tira .swiper-button-next {
		width: 36px;
		height: 36px;
		margin-top: -18px;
	}

	.urban-galeria-tira .swiper-button-prev {
		left: 4px;
	}

	.urban-galeria-tira .swiper-button-next {
		right: 4px;
	}

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


/* ------------------------------------------------------------------
 * El visor a pantalla completa
 *
 * Copia la pantalla completa de Vibendo, que es la que gusto (pedido el
 * 01-10-2026): fondo negro, foto a toda pantalla, contador arriba a la
 * izquierda, titulo y precio sobre la parte de abajo de la foto y, debajo,
 * una barra negra con el boton de pasar las fotos solas y la tira de
 * miniaturas.
 *
 * En movil y tablet (pantalla tactil) TODAS las fotos llenan la pantalla
 * y se recortan por los lados, como alli. En el ordenador se ven enteras
 * (contain): en una pantalla ancha, llenarla recortaria demasiado.
 * ------------------------------------------------------------------ */

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

/* z-index por encima de todo lo que flota en la ficha: la cabecera fija
 * de escritorio (.header-fixed, 999999999 en styles.css), el WhatsApp
 * flotante y los modales. Con 10000, en un portatil la cabecera tapaba
 * la X de cerrar en cuanto se bajaba para usar las miniaturas. */
.urban-visor {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2147483000;
	display: none;
	flex-direction: column;
	background: #000000;
}

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

/* La foto ocupa todo lo que deja libre la barra de abajo. */
.urban-visor-escena {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

.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;
}

/* Movil y tablet: la foto llena la pantalla, como en Vibendo. */
@media (hover: none) and (pointer: coarse) {

	.urban-visor-pases .swiper-slide img {
		object-fit: cover;
	}

	/* Se pasa deslizando con el dedo; las flechas taparian la foto. */
	.urban-visor-pases .swiper-button-prev,
	.urban-visor-pases .swiper-button-next {
		display: none;
	}
}

/* Contador, arriba a la izquierda. */
/* Swiper le pone a la paginacion bottom: 8px y width: 100%: con nuestro
 * top, la caja se estiraba por toda la foto y, aunque invisible, tapaba
 * las flechas y el deslizar con el dedo. Por eso se anulan aqui y no se
 * deja que reciba toques. */
.urban-visor .urban-visor-cuenta {
	position: absolute;
	top: 14px;
	right: auto;
	bottom: auto;
	left: 16px;
	z-index: 3;
	width: auto;
	pointer-events: none;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

/* Titulo y precio, sobre la parte de abajo de la foto. */
.urban-visor-pie {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	padding: 40px 56px 16px 18px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));
	color: #ffffff;
	pointer-events: none;
}

.urban-visor-titulo {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.urban-visor-precio {
	display: block;
	margin-top: 2px;
	font-size: 16px;
	font-weight: 700;
}

.urban-visor-pie:empty,
.urban-visor-titulo:empty,
.urban-visor-precio:empty {
	display: none;
}

.urban-visor-cerrar {
	position: absolute;
	top: 12px;
	right: 14px;
	z-index: 4;
	width: 40px;
	height: 40px;
	padding: 0;
	line-height: 1;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .45);
	color: #ffffff;
	font-size: 28px;
	cursor: pointer;
}

.urban-visor-cerrar:hover {
	background: rgba(0, 0, 0, .7);
}

/* Flechas pequenas y discretas (pedido el 01-10-2026). */
.urban-visor .swiper-button-prev,
.urban-visor .swiper-button-next {
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	color: rgba(255, 255, 255, .9);
	box-shadow: none;
}

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

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

/* La barra de abajo: pasar solas + miniaturas. */
.urban-visor-barra {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 10px;
	height: 64px;
	padding: 0 10px;
	background: #000000;
}

.urban-visor-pasar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: #ffffff;
	font-size: 18px;
	cursor: pointer;
}

.urban-visor-pasar:hover,
.urban-visor-pasar:focus-visible {
	background: rgba(255, 255, 255, .15);
	outline: none;
}

.urban-visor-tira {
	flex: 1 1 auto;
	min-width: 0;
}

.urban-visor-tira .swiper-slide {
	width: 64px;
	height: 44px;
	overflow: hidden;
	border-radius: 3px;
	opacity: .5;
	cursor: pointer;
}

.urban-visor-tira .swiper-slide-thumb-active {
	opacity: 1;
	outline: 2px solid #ffffff;
	outline-offset: -2px;
}

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

@media (max-width: 767px) {

	.urban-visor-titulo {
		font-size: 15px;
	}

	.urban-visor-precio {
		font-size: 15px;
	}

	.urban-visor-barra {
		height: 58px;
	}

	.urban-visor-tira .swiper-slide {
		width: 54px;
		height: 38px;
	}
}

/* Movil (en vertical y en horizontal), pedido el 01-10-2026: en la
 * pantalla completa solo la foto. Fuera el titulo y el precio de abajo y
 * la barra con la tira de miniaturas (y su boton de pasar solas); las
 * fotos se pasan deslizando. Quedan el contador y la X. Un movil en
 * horizontal pasa de 767px de ancho, pero no de 500px de alto: por eso
 * las dos condiciones. Las tablets y el ordenador no cambian. */
@media (hover: none) and (pointer: coarse) and (max-width: 767px),
       (hover: none) and (pointer: coarse) and (max-height: 500px) {

	.urban-visor-pie,
	.urban-visor-barra {
		display: none;
	}
}