.dsn-mh-wrapper {
	position: relative; width: 100%; min-height: 420px;
	overflow: hidden; cursor: grab;
}
@media (max-width: 768px) {
	.dsn-mh-wrapper {
		height: 55vh !important;
		min-height: 320px;
	}
}
@media (max-width: 480px) {
	.dsn-mh-wrapper {
		height: 50vh !important;
		min-height: 280px;
	}
}
.dsn-mh-wrapper.dragging { cursor: grabbing; }
.dsn-mh-inner {
	position: absolute; transform-origin: top left;
	will-change: transform; user-select: none; touch-action: none;
}
.dsn-mh-img { display: block; max-width: none; pointer-events: none; }
.dsn-mh-hs {
	position: absolute; transform: translate(-50%,-50%);
	z-index: 20; transform-origin: center center;
}
.dsn-mh-btn {
	width: 34px; height: 34px; border-radius: 50%;
	background: rgba(10,80,180,.92); border: 2.5px solid #fff;
	color: #fff; font-size: 12px; font-weight: 700;
	cursor: default; display: flex; align-items: center; justify-content: center;
	transition: background .15s, box-shadow .15s;
	box-shadow: 0 2px 10px rgba(0,0,0,.5);
	line-height: 1; text-align: center; padding: 0;
	text-decoration: none;
}
.dsn-mh-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,.6); }
/* Active hotspots (modal or url action) get pointer cursor; passive ones keep default. */
.dsn-mh-btn[data-dsn-modal],
a.dsn-mh-btn[href] { cursor: pointer; }
/* Los estilos específicos (por slug) se inyectan dinámicamente desde el catálogo */
.dsn-mh-tooltip {
	position: absolute; bottom: calc(100% + 8px); left: 50%;
	transform: translateX(-50%); background: rgba(0,0,0,.82); color: #fff;
	padding: 4px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap;
	pointer-events: none; opacity: 0; transition: opacity .18s;
}
.dsn-mh-tooltip::after {
	content: ''; position: absolute; top: 100%; left: 50%;
	transform: translateX(-50%); border: 5px solid transparent;
	border-top-color: rgba(0,0,0,.82);
}
.dsn-mh-hs:hover .dsn-mh-tooltip { opacity: 1; }
.dsn-mh-controls {
	position: absolute; top: 20px; right: 20px; z-index: 100;
	display: flex; flex-direction: column;
	background: rgba(255,255,255,.55);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255,255,255,.4);
	border-radius: 999px;
	box-shadow: 0 6px 24px rgba(0,0,0,.18);
	overflow: hidden;
}
.dsn-mh-controls button {
	width: 36px; height: 36px;
	background: transparent; border: none;
	color: #404040;
	font-size: 13px; line-height: 1; font-weight: 400;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s, color .2s;
}
.dsn-mh-controls button + button { border-top: 1px solid rgba(64,64,64,.12); }
.dsn-mh-controls button:hover:not(:disabled) { background: rgba(255,255,255,.35); color: #000; }
.dsn-mh-controls button:disabled { color: rgba(64,64,64,.28); cursor: not-allowed; }

/* Edit mode (solo admin) */
.dsn-mh-section .dsn-mh-editbar {
	display: block !important;
	background: rgba(0,0,0,.85) !important; color: #fff !important;
	padding: 12px 14px !important; text-align: center !important;
	font-size: 13px !important; line-height: 1.4 !important;
	border: none !important; margin: 0 !important;
}
.dsn-mh-section .dsn-mh-editbar button {
	background: rgba(255,255,255,.12) !important; color: #fff !important;
	border: 1px solid rgba(255,255,255,.3) !important; border-radius: 4px !important;
	padding: 6px 14px !important; font-size: 12px !important;
	cursor: pointer !important; margin: 0 3px !important;
	font-weight: 500 !important; line-height: 1 !important;
	text-transform: none !important; letter-spacing: 0 !important;
	box-shadow: none !important; text-shadow: none !important;
	display: inline-block !important; vertical-align: middle !important;
	height: auto !important; width: auto !important;
}
.dsn-mh-section .dsn-mh-editbar button:hover { background: rgba(255,255,255,.22) !important; }
.dsn-mh-section .dsn-mh-edit-toggle.active { background: #ffd700 !important; color: #000 !important; border-color: #ffd700 !important; }
.dsn-mh-section .dsn-mh-edit-hint { display: none; margin-left: 10px; color: #fff !important; }
.dsn-mh-section .dsn-mh-editbar.editing .dsn-mh-edit-hint { display: inline; }
.dsn-mh-section .dsn-mh-status { margin-left: 10px; font-size: 11px; opacity: .85; color: #fff !important; }
body.dsn-mh-editing .dsn-mh-hs { cursor: move; }
body.dsn-mh-editing .dsn-mh-btn { cursor: move !important; pointer-events: none; }
.dsn-mh-edit-coords {
	position: absolute; top: calc(100% + 4px); left: 50%;
	transform: translateX(-50%); background: #ff0; color: #000;
	padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 700;
	white-space: nowrap; pointer-events: none; display: none;
}
body.dsn-mh-editing .dsn-mh-edit-coords { display: block; }

/* Mini dialog para agregar hotspot */
.dsn-mh-add-dialog {
	position: fixed; top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,.6); z-index: 99999;
	display: flex; align-items: center; justify-content: center;
}
.dsn-mh-add-dialog-box {
	background: #fff; border-radius: 8px; padding: 24px;
	width: 380px; max-width: 90vw;
	box-shadow: 0 20px 60px rgba(0,0,0,.5);
	color: #222;
}
.dsn-mh-add-dialog h3 { margin: 0 0 16px; font-size: 16px; color: #222; }
.dsn-mh-add-dialog label {
	display: block; margin: 12px 0 4px;
	font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
	color: #555; font-weight: 600;
}
.dsn-mh-add-dialog input,
.dsn-mh-add-dialog select {
	width: 100%; padding: 8px 10px; font-size: 13px;
	border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;
	font-family: inherit; background: #fff; color: #222;
}
.dsn-mh-add-dialog-actions {
	margin-top: 20px; text-align: right;
	display: flex; gap: 8px; justify-content: flex-end;
}
.dsn-mh-add-dialog-actions button {
	padding: 8px 16px; font-size: 13px;
	border: 1px solid #ccc; border-radius: 4px;
	background: #f5f5f5; cursor: pointer; color: #222;
}
.dsn-mh-add-dialog-actions button.primary {
	background: #2271b1; color: #fff; border-color: #2271b1;
}
.dsn-mh-add-dialog-actions button.primary:hover { background: #135e96; }
.dsn-mh-add-dialog-preview {
	display: inline-block; margin-left: 10px; vertical-align: middle;
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(10,80,180,.92); border: 2.5px solid #fff;
	color: #fff; font-size: 11px; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,.3); line-height: 1;
}
/* Los previews específicos por slug se inyectan desde el catálogo */

/* ---- Animated clouds overlay (opt-in via _dsn_mh_clouds meta = "on") ---- */
.dsn-mh-clouds {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 5;
}
.dsn-mh-cloud {
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	pointer-events: none;
	will-change: transform;
}
@keyframes dsn-mh-clouds-anim {
	0%   { transform: translateX(0); }
	100% { transform: translateX(150vw); }
}
.dsn-mh-cloud {
	animation: dsn-mh-clouds-anim linear infinite;
}
.dsn-mh-cloud.cloud-1 {
	width: 436px; height: 281px; left: -30%; top: 23%;
	background-image: url("clouds/Cloud_01.png");
	animation-duration: 200s; animation-delay: 10s;
}
.dsn-mh-cloud.cloud-2 {
	width: 444px; height: 364px; left: -20%; top: 40%;
	background-image: url("clouds/Cloud_02.png");
	animation-duration: 180s;
}
.dsn-mh-cloud.cloud-3 {
	width: 431px; height: 168px; left: -35%; top: 60%;
	background-image: url("clouds/Cloud_03.png");
	animation-duration: 300s; animation-delay: 3s;
}
.dsn-mh-cloud.cloud-4 {
	width: 624px; height: 149px; left: -60%; top: 85%;
	background-image: url("clouds/Cloud_04.png");
	animation-duration: 187s;
}
.dsn-mh-cloud.cloud-5 {
	width: 589px; height: 286px; left: -70%; top: 70%;
	background-image: url("clouds/Cloud_05.png");
	animation-duration: 220s; animation-delay: 5s;
}
.dsn-mh-cloud.cloud-6 {
	width: 723px; height: 262px; left: -40%; top: 10%;
	background-image: url("clouds/Cloud_06.png");
	animation-duration: 260s;
}
.dsn-mh-cloud.cloud-7 {
	width: 460px; height: 227px; left: -30%; top: 50%;
	background-image: url("clouds/Cloud_07.png");
	animation-duration: 240s; animation-delay: 7s;
}
@media (prefers-reduced-motion: reduce) {
	.dsn-mh-cloud { animation: none; }
}