/* santiana/panorama-360 — presentación del bloque (front).
   Sección 100vh: visor arriba + barra de vistas abajo (palette1).
   Overlays sobre el visor: logo, badge 360°, brújula y muesca con el
   toggle day/night. Colores vía variables globales de Kadence. */

.sb-pano {
	--sb-pano-bar-h: 170px;
	position: relative;
	height: 100vh;
	background: var(--global-palette1, #38453d);
}

/* variante sin barra de vistas (una sola vista, p. ej. bloque 2) */
.sb-pano--no-bar {
	--sb-pano-bar-h: 0px;
}

.sb-pano__stage {
	position: relative;
	height: calc(100% - var(--sb-pano-bar-h)); /* % del section (100vh o el
	   alto móvil que toque) — con 100vh fijo desbordaba al variar la sección */
}

.sb-pano__viewer {
	height: 100%;
}

.sb-pano__viewer .pnlm-load-box {
	background: var(--global-palette1, #38453d);
	border-radius: 8px;
}

.sb-pano__logo {
	position: absolute;
	top: 32px;
	right: 32px;
	width: 190px;
	height: auto;
	pointer-events: none;
	z-index: 4;
}

/* badge 360° centrado — pista de interacción, se desvanece al primer drag */
.sb-pano__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 75px; /* 25% menos que los 100 originales (Johann 2026-07-27) */
	transform: translate(-50%, -50%);
	opacity: 0.95;
	pointer-events: none;
	z-index: 4;
	transition: opacity 0.6s ease;
}

.sb-pano__badge img {
	display: block;
	width: 100%;
	height: auto;
}

.sb-pano__badge.is-hidden {
	opacity: 0;
}

.sb-pano__compass {
	position: absolute;
	right: 28px;
	bottom: 28px;
	width: 110px;
	height: 110px;
	color: var(--global-palette9, #fff);
	opacity: 0.95;
	pointer-events: none; /* solo las letras cardinales son interactivas */
	z-index: 4;
	font-family: var(--global-heading-font-family, inherit);
}

.sb-pano__cardinal {
	pointer-events: auto;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.sb-pano__cardinal:hover,
.sb-pano__cardinal:focus {
	opacity: 0.65;
	outline: none;
}

/* sol/luna = accesos directos al modo; el del modo activo se ilumina */
.sb-pano__sun,
.sb-pano__moon {
	pointer-events: auto;
	cursor: pointer;
	transition: opacity 0.2s ease;
	outline: none;
}

.sb-pano__sun {
	opacity: 0.95;
}

.sb-pano__moon {
	opacity: 0.4;
}

.sb-pano.is-night .sb-pano__sun {
	opacity: 0.4;
}

.sb-pano.is-night .sb-pano__moon {
	opacity: 0.95;
}

.sb-pano__needle {
	transform-origin: 50px 50px;
	transition: transform 0.1s linear;
}

/* muesca con el toggle, asomada sobre la foto en el borde de la barra */
.sb-pano__notch {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	background: var(--global-palette1, #38453d);
	border-radius: 18px 18px 0 0;
	padding: 12px 22px 10px;
	z-index: 5;
}

.sb-pano__toggle {
	/* pastilla del mock: ~85×33, knob 24 a la izquierda y texto a la
	   derecha; en night el knob desliza al extremo derecho y el texto
	   pasa a la izquierda (96 → 85: Johann pidió reducirla, 2026-07-29) */
	position: relative;
	height: 33px;
	min-width: 85px;
	padding: 0; /* el padding global de botones del theme (8/48) inflaba el
	   intrínseco a 96 y pisaba el min-width; el contenido es absoluto */
	background: rgba(0, 0, 0, 0.35);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	color: var(--global-palette8, #cfd9c9);
	font-family: var(--global-body-font-family, inherit);
	font-size: 14px;
	line-height: 1;
}

/* el estilo global de botones del theme (button:hover) pisa el fondo y el
   color en hover/focus — se fijan explícitos, sin cambio de estado */
.sb-pano__toggle:hover,
.sb-pano__toggle:focus,
.sb-pano__toggle:active {
	background: rgba(0, 0, 0, 0.35);
	color: var(--global-palette8, #cfd9c9);
	box-shadow: none;
}

.sb-pano__tab:hover,
.sb-pano__tab:focus,
.sb-pano__tab:active {
	background: none;
	color: var(--global-palette7, #b2c2a8);
	box-shadow: none;
}

.sb-pano__knob {
	position: absolute;
	top: 50%;
	left: 5px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--global-palette8, #cfd9c9);
	transform: translateY(-50%);
	transition: left 0.25s ease;
}

.sb-pano__toggle.is-night .sb-pano__knob {
	left: calc(100% - 29px);
}

.sb-pano__mode {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
}

.sb-pano__toggle.is-night .sb-pano__mode {
	right: auto;
	left: 16px;
}

/* barra inferior: stepper de vistas */
.sb-pano__bar {
	height: var(--sb-pano-bar-h);
	background: var(--global-palette1, #38453d);
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.sb-pano__tabs {
	list-style: none;
	margin: 0;
	padding: 34px 24px 0;
	width: min(1242px, 100%);
	display: flex;
	position: relative;
}

/* línea que conecta los puntos */
.sb-pano__tabs::before {
	content: "";
	position: absolute;
	top: 41px;
	left: calc(12.5% + 24px);
	right: calc(12.5% + 24px);
	height: 1px;
	background: var(--global-palette7, #b2c2a8);
	opacity: 0.55;
}

.sb-pano__tab-item {
	flex: 1;
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.sb-pano__tab {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--global-palette7, #b2c2a8);
	font-family: var(--global-body-font-family, inherit);
	opacity: 0.62;
	transition: opacity 0.2s ease;
}

.sb-pano__tab:hover,
.sb-pano__tab:focus-visible {
	opacity: 0.85;
}

.sb-pano__tab.is-active {
	opacity: 1;
}

.sb-pano__dot {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid var(--global-palette7, #b2c2a8);
	background: var(--global-palette1, #38453d);
	margin-bottom: 18px;
	transition: background 0.2s ease;
}

.sb-pano__tab.is-active .sb-pano__dot {
	background: var(--global-palette8, #cfd9c9);
	border-color: var(--global-palette8, #cfd9c9);
}

.sb-pano__dir {
	font-family: var(--global-heading-font-family, inherit);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--global-palette8, #cfd9c9);
	margin-bottom: 8px;
}

.sb-pano__sub,
.sb-pano__place {
	font-size: 15px;
	line-height: 1.5;
}

.sb-pano__place {
	font-size: 14px;
	opacity: 0.85;
}

/* móvil: tabs compactos en 2 columnas y overlays reescalados */
@media (max-width: 767px) {
	.sb-pano {
		--sb-pano-bar-h: 220px;
	}

	.sb-pano--no-bar {
		--sb-pano-bar-h: 0px; /* sin barra el visor llena el alto — sin esto
		   la regla móvil de arriba le gana por orden y deja una banda vacía */
		height: 65vh; /* banda más compacta en móvil (Johann 2026-07-27) */
	}

	.sb-pano__tabs {
		flex-wrap: wrap;
		padding-top: 26px;
	}

	.sb-pano__tabs::before {
		display: none;
	}

	.sb-pano__tab-item {
		flex: 0 0 50%;
		margin-bottom: 14px;
	}

	.sb-pano__dot {
		margin-bottom: 10px;
	}

	.sb-pano__dir {
		font-size: 16px;
		margin-bottom: 4px;
	}

	.sb-pano__sub,
	.sb-pano__place {
		font-size: 12px;
		line-height: 1.3;
	}

	.sb-pano__logo {
		width: 130px;
		top: 20px;
		right: 20px;
	}

	.sb-pano__compass {
		width: 80px;
		height: 80px;
		right: 16px;
		bottom: 16px;
	}
}