/* WithTour3D — visor público */
.s3d-tour {
	--s3d-height: 600px;
	--s3d-bar: #4e4440;
	--s3d-text: #ffffff;
	position: relative;
	width: 100%;
	height: var(--s3d-height);
	min-height: 320px;
	overflow: hidden;
	background: #111;
	color: var(--s3d-text);
	font-family: inherit;
	line-height: 1.3;
	isolation: isolate;
	-webkit-user-select: none;
	user-select: none;
}
.s3d-tour *, .s3d-tour *::before, .s3d-tour *::after { box-sizing: border-box; }

.s3d-tour .s3d-stage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: #111;
}
.s3d-tour .pnlm-container { background: #111; font-family: inherit; }
.s3d-tour .pnlm-load-box { background: rgba(0, 0, 0, .55); border-radius: 6px; }

/* Pantalla completa */
.s3d-tour:fullscreen { width: 100vw; height: 100vh; }
.s3d-tour:-webkit-full-screen { width: 100vw; height: 100vh; }
.s3d-tour.s3d-fake-fs {
	position: fixed !important;
	inset: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	z-index: 2147483000;
}
html.s3d-noscroll, html.s3d-noscroll body { overflow: hidden !important; }

/* Encabezado */
.s3d-head {
	position: absolute;
	top: 18px;
	left: 20px;
	right: 40%;
	z-index: 5;
	pointer-events: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 0 12px rgba(0, 0, 0, .35);
}
.s3d-title { font-size: clamp(17px, 2.1vw, 26px); font-weight: 700; letter-spacing: -.01em; }
.s3d-subtitle { font-size: clamp(12px, 1.2vw, 15px); font-weight: 600; margin-top: 4px; opacity: .95; }

/* Plano */
.s3d-plan {
	position: absolute;
	top: 18px;
	right: 18px;
	width: clamp(130px, 18%, 240px);
	z-index: 6;
	background: rgba(255, 255, 255, .92);
	padding: 3px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
	transition: width .3s ease;
	cursor: zoom-in;
}
.s3d-plan.s3d-plan-big { width: min(55%, 520px); cursor: zoom-out; }
.s3d-plan img { display: block; width: 100%; height: auto; margin: 0; border: 0; }
.s3d-marker {
	position: absolute;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #c98a4b;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
	cursor: pointer;
	transition: transform .2s ease, background .2s ease;
}
.s3d-marker:hover { transform: scale(1.3); }
.s3d-marker.is-active {
	background: #e8402e;
	transform: scale(1.35);
	animation: s3d-pulse 1.6s ease-out infinite;
}
@keyframes s3d-pulse {
	0% { box-shadow: 0 0 0 0 rgba(232, 64, 46, .7); }
	100% { box-shadow: 0 0 0 10px rgba(232, 64, 46, 0); }
}

/* Barra inferior */
.s3d-dock {
	position: absolute;
	left: 50%;
	bottom: 16px;
	z-index: 7;
	width: min(820px, calc(100% - 24px));
	transform: translateX(-50%);
	padding: 10px 14px 8px;
	background: var(--s3d-bar);
	background: color-mix(in srgb, var(--s3d-bar) 88%, transparent);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: transform .3s ease, opacity .3s ease;
}
.s3d-dock-mini { width: auto; left: auto; right: 16px; transform: none; padding: 6px; }
.s3d-bar-hidden .s3d-dock { transform: translate(-50%, calc(100% + 30px)); opacity: 0; pointer-events: none; }

.s3d-thumbs {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .35) transparent;
	padding: 2px 2px 8px;
	margin-bottom: 6px;
}
.s3d-thumbs-off .s3d-thumbs { display: none; }
.s3d-thumb {
	flex: 0 0 auto;
	width: 124px;
	padding: 3px 3px 4px;
	border: 2px solid transparent;
	background: none;
	color: rgba(255, 255, 255, .78);
	font: inherit;
	font-size: 12px;
	text-align: center;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}
.s3d-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	margin: 0 0 5px;
	border: 0;
	opacity: .85;
	transition: opacity .2s ease;
}
.s3d-thumb span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s3d-thumb:hover, .s3d-thumb:focus-visible { color: #fff; }
.s3d-thumb:hover img { opacity: 1; }
.s3d-thumb.is-active { border-color: #fff; color: #fff; font-weight: 700; }
.s3d-thumb.is-active img { opacity: 1; }

.s3d-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.s3d-group { display: flex; align-items: center; gap: 4px; }
.s3d-group-center { flex: 1; justify-content: center; }

.s3d-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 34px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	touch-action: manipulation;
	transition: background .15s ease, opacity .15s ease;
}
.s3d-btn[hidden] { display: none; }
.s3d-btn svg { width: 24px; height: 24px; fill: currentColor; }
.s3d-btn:hover, .s3d-btn:focus-visible { background: rgba(255, 255, 255, .14); }
.s3d-btn:active { background: rgba(255, 255, 255, .24); }
.s3d-btn.is-on { background: rgba(255, 255, 255, .28); }
.s3d-tour button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.s3d-gap { margin-left: 8px; }

.s3d-showbar {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 7;
	display: none;
	background: var(--s3d-bar);
	background: color-mix(in srgb, var(--s3d-bar) 88%, transparent);
}
.s3d-bar-hidden .s3d-showbar { display: inline-flex; }

/* Puntos dentro de la panorámica */
.s3d-tour .s3d-hs {
	width: 46px;
	height: 46px;
	cursor: pointer;
	z-index: 2;
}
.s3d-hs-ring {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 2px solid rgba(255, 255, 255, .95);
	border-radius: 50%;
	background: rgba(0, 0, 0, .28);
	color: #fff;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .18), 0 2px 10px rgba(0, 0, 0, .35);
	transition: transform .2s ease, background .2s ease;
}
.s3d-hs-ring svg { width: 22px; height: 22px; fill: currentColor; }
.s3d-hs:hover .s3d-hs-ring { transform: scale(1.12); background: rgba(0, 0, 0, .45); }
.s3d-hs-info .s3d-hs-ring { width: 34px; height: 34px; margin: 6px; }
.s3d-hs-info .s3d-hs-ring svg { width: 18px; height: 18px; }
.s3d-hs-label {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	max-width: 240px;
	width: max-content;
	padding: 6px 10px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .78);
	color: #fff;
	font-size: 13px;
	line-height: 1.35;
	white-space: pre-line;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease;
	pointer-events: none;
}
.s3d-hs:hover .s3d-hs-label,
.s3d-hs.is-open .s3d-hs-label { opacity: 1; visibility: visible; }

/* Modelo 3D */
.s3d-is-model model-viewer { --poster-color: #111; background: radial-gradient(circle at 50% 40%, #3a3a3a, #111 75%); }
.s3d-ar-btn {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #222;
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

/* Móvil */
@media (max-width: 700px) {
	.s3d-tour { min-height: 420px; }
	.s3d-head { top: 12px; left: 12px; right: 38%; }
	.s3d-plan { top: 12px; right: 12px; width: 32%; }
	.s3d-plan.s3d-plan-big { width: calc(100% - 24px); }
	.s3d-dock { bottom: 8px; width: calc(100% - 16px); padding: 8px 6px 6px; }
	.s3d-thumbs { gap: 8px; }
	.s3d-thumb { width: 92px; font-size: 11px; }
	.s3d-btn { width: 34px; height: 34px; }
	.s3d-btn svg { width: 21px; height: 21px; }
	.s3d-vert, .s3d-dir { display: none; }
	.s3d-gap { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.s3d-marker.is-active { animation: none; }
	.s3d-dock, .s3d-plan { transition: none; }
}

/* Ocultamos la ficha de título propia de Pannellum: el tour usa su propio encabezado */
.s3d-tour .pnlm-panorama-info { display: none !important; }