/* Foto 360 (HM) — el alto llega en las variables --hm360-alto / --hm360-alto-movil. */
.hm-360 {
	position: relative;
	width: 100%;
	height: var(--hm360-alto, 450px);
	overflow: hidden;
	background: #000;
}
@media (max-width: 767.98px) {
	.hm-360 { height: var(--hm360-alto-movil, var(--hm360-alto, 450px)); }
}
.hm-360__visor {
	display: none;
}
/* Pannellum le pone .pnlm-container (position:relative; height:100%) y WPVR, si sigue
   activo, fuerza .pnlm-container a 500/300 px con !important en tablet/móvil: el visor se
   salía de la caja y la tira de miniaturas quedaba cortada. Doble clase + !important. */
.hm-360 .hm-360__visor {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
}
.hm-360__respaldo,
.hm-360__respaldo img {
	display: block;
	width: 100%;
	height: 100%;
}
.hm-360__respaldo img {
	max-width: none;
	object-fit: cover;
}
/* Con JS: el visor se monta encima; el respaldo se queda debajo hasta que carga. */
.hm-360--js .hm-360__visor { display: block; }
.hm-360--cargado .hm-360__respaldo { display: none; }

/* Recorrido: tira de miniaturas abajo, encima de la foto (init.js la mete en el contenedor
   de Pannellum, z-index 1–2, para que siga en pantalla completa). Solo con JS. */
.hm-360__tira {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	gap: 6px;
	padding: 18px 8px 8px;
	overflow-x: auto;
	scrollbar-width: thin;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
}
.hm-360--js .hm-360__tira { display: flex; }
/* Centrada si cabe; si no, se desplaza desde el inicio sin cortar la primera. */
.hm-360__tira > :first-child { margin-left: auto; }
.hm-360__tira > :last-child { margin-right: auto; }
.hm-360 .hm-360__miniatura {
	position: relative;
	flex: 0 0 auto;
	width: 112px;
	height: 56px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, .55);
	border-radius: 4px;
	overflow: hidden;
	background: #000;
	box-shadow: none;
	line-height: 0;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	opacity: .75;
	transition: opacity .15s, border-color .15s;
}
.hm-360 .hm-360__miniatura:hover,
.hm-360 .hm-360__miniatura:focus-visible { opacity: 1; }
.hm-360 .hm-360__miniatura:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hm-360 .hm-360__miniatura[aria-pressed="true"] { opacity: 1; border-color: #fff; }
.hm-360 .hm-360__miniatura-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}
.hm-360 .hm-360__titulo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2px 4px;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	font: 500 11px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 767.98px) {
	.hm-360 .hm-360__miniatura { width: 84px; height: 42px; }
	.hm-360__tira { padding-top: 14px; }
}