.pi-plano {
	--pi-accent: #d95f2b;
	--pi-accent-soft: rgba(217, 95, 43, 0.35);
	max-width: 100%;
}

.pi-plano-stage {
	position: relative;
	line-height: 0;
}

.pi-plano-img {
	display: block;
	width: 100%;
	height: auto;
}

.pi-plano-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.pi-area {
	fill: transparent;
	stroke: transparent;
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
	cursor: pointer;
	transition: fill 0.15s ease, stroke 0.15s ease;
}

.pi-area:hover {
	fill: var(--pi-accent-soft);
	stroke: var(--pi-accent);
}

.pi-area.pi-active {
	fill: var(--pi-accent-soft);
	stroke: var(--pi-accent);
	stroke-width: 2.5;
}

/* Convención: sumá esta clase + la clase del ambiente (ej. amb-cocina) en
   "Avanzado -> CSS Classes" de cada widget de Elementor que quieras alternar. */
.pi-ambiente-target {
	display: none;
}

.pi-ambiente-target.pi-visible {
	display: block;
}

.pi-tooltip {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	transform: translate(-50%, calc(-100% - 12px));
	background: #1d2327;
	color: #fff;
	font: 600 12.5px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	padding: 5px 10px;
	border-radius: 5px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.1s ease;
}

.pi-tooltip.pi-tooltip-visible {
	opacity: 1;
}