/* RH Mapa Paraguay - mapa con pines animados (reemplazo de Revolution Slider) */

.rh-mapa-py {
	position: relative;
	width: 100%;
	margin: 0 auto;
	line-height: 0; /* evita espacios extra bajo la imagen */
}

/* La imagen del mapa define la altura real del bloque (dimensiones intrinsecas),
   asi el contenedor de Elementor no se colapsa y no se encima con la seccion siguiente. */
.rh-mapa-bg {
	display: block;
	width: 100%;
	height: auto;
}

.rh-mapa-pin {
	position: absolute;
	width: 4.66%;               /* 34 / 730 */
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
	background: var(--rh-pin) center / contain no-repeat;
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
	filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .28));
}

/* Fallback para navegadores sin aspect-ratio: alto fijo del pin. */
@supports not (aspect-ratio: 1 / 1) {
	.rh-mapa-pin { height: 0; padding-bottom: 4.66%; }
	.rh-mapa-pin--main { padding-bottom: 5.9%; }
}

.rh-mapa-pin--main { width: 5.9%; } /* 43 / 730 */

/* Al entrar en pantalla, los pines caen de a poco (stagger). */
.rh-mapa-py.is-visible .rh-mapa-pin {
	animation: rh-mapa-drop .6s cubic-bezier(.22, 1.15, .36, 1) both;
	animation-delay: calc(var(--i) * var(--rh-stagger, 110ms));
}

@keyframes rh-mapa-drop {
	0%   { opacity: 0; transform: translate(-50%, -160%) scale(.35); }
	70%  { opacity: 1; }
	100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Respeta la preferencia de movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
	.rh-mapa-py.is-visible .rh-mapa-pin { animation: none; opacity: 1; }
}