/**
 * Catedral Elements — Pontos Interativos (Hotspots)
 *
 * Ícone circular em SVG com efeito radial + pulso, sobre uma imagem base.
 * Ao clicar, abre uma caixa de conteúdo (padrão "Image Box": mídia + título +
 * texto). Todas as cores/medidas vêm de variáveis --cee-hs-* injetadas pelos
 * controles de estilo do widget.
 * ------------------------------------------------------------------------- */

.cee-hotspots {
	/* Defaults (sobrescritos pelos controles de estilo). */
	--cee-hs-size: 24px;
	--cee-hs-dot-core: #ffffff;
	--cee-hs-dot-edge: #c8a24b;
	--cee-hs-ring: rgba(200, 162, 75, 0.55);
	--cee-hs-pulse-speed: 2.2s;

	--cee-hs-box-width: 300px;
	--cee-hs-box-bg: #101010;
	--cee-hs-gap: 14px;

	--cee-hs-img-ratio: 16 / 9;
	--cee-hs-img-fit: cover;
	--cee-hs-img-pos: center center;

	--cee-hs-stage-height: 400px;

	display: flex;
	justify-content: center;
	width: 100%;
}

.cee-hotspots__stage {
	position: relative;
	width: 100%;
	max-width: 100%;
	line-height: 0;
}

.cee-hotspots__base {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------
 * Palco sem imagem (livre) e sobreposição
 * ------------------------------------------------------------------- */

/* Palco livre: área própria com altura configurável. */
.cee-hotspots[data-stage-mode="blank"] .cee-hotspots__stage {
	min-height: var(--cee-hs-stage-height);
}

/* Sobrepor o conteúdo: o widget vira uma camada que preenche o pai. */
.cee-hs-mode-overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
}

.cee-hs-mode-overlay > .elementor-widget-container {
	height: 100%;
}

.cee-hotspots[data-stage-mode="overlay"] {
	height: 100%;
}

.cee-hotspots[data-stage-mode="overlay"] .cee-hotspots__stage {
	height: 100%;
	min-height: var(--cee-hs-stage-height);
}

/* Guia visual apenas no editor, para localizar o palco vazio. */
body.elementor-editor-active .cee-hotspots[data-stage-mode="blank"] .cee-hotspots__stage,
body.elementor-editor-active .cee-hotspots[data-stage-mode="overlay"] .cee-hotspots__stage {
	outline: 1px dashed rgba(200, 162, 75, 0.6);
	outline-offset: -1px;
}

/* ---------------------------------------------------------------------
 * Ponto (âncora posicionada em % sobre a imagem)
 * ------------------------------------------------------------------- */

.cee-hotspot {
	position: absolute;
	/* Origem padrão: esquerda/topo. A âncora (data-anchor-*) troca a borda de
	 * referência e o sinal do translate para manter o ponto centrado. */
	--cee-hs-tx: -50%;
	--cee-hs-ty: -50%;
	left: var(--cee-hs-x, 50%);
	top: var(--cee-hs-y, 50%);
	transform: translate(var(--cee-hs-tx), var(--cee-hs-ty));
	z-index: 4;
	line-height: normal;
}

.cee-hotspot[data-anchor-h="right"] {
	left: auto;
	right: var(--cee-hs-x, 50%);
	--cee-hs-tx: 50%;
}

.cee-hotspot[data-anchor-v="bottom"] {
	top: auto;
	bottom: var(--cee-hs-y, 50%);
	--cee-hs-ty: 50%;
}

.cee-hotspot.is-open {
	z-index: 20;
}

.cee-hotspot__trigger {
	position: relative;
	display: block;
	width: var(--cee-hs-size);
	height: var(--cee-hs-size);
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: 50%;
	-webkit-tap-highlight-color: transparent;
}

.cee-hotspot__trigger:focus-visible {
	outline: 2px solid var(--cee-hs-dot-edge);
	outline-offset: 4px;
}

/* Núcleo em SVG com preenchimento radial. */
.cee-hotspot__svg {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 2;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
	transition: transform 300ms ease;
}

.cee-hotspot__trigger:hover .cee-hotspot__svg,
.cee-hotspot.is-open .cee-hotspot__svg {
	transform: scale(1.12);
}

.cee-hotspot__stop--core {
	stop-color: var(--cee-hs-dot-core);
}

.cee-hotspot__stop--edge {
	stop-color: var(--cee-hs-dot-edge);
}

/* Pulso radial (anel que expande e some). */
.cee-hotspot__pulse {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 50%;
	background: var(--cee-hs-ring);
	transform: scale(0.6);
	opacity: 0;
	pointer-events: none;
}

.cee-hotspots[data-pulse="yes"] .cee-hotspot__pulse {
	animation: cee-hs-pulse var(--cee-hs-pulse-speed) ease-out infinite;
}

@keyframes cee-hs-pulse {
	0% {
		transform: scale(0.55);
		opacity: 0.65;
	}
	100% {
		transform: scale(2.4);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cee-hotspots[data-pulse="yes"] .cee-hotspot__pulse {
		animation: none;
	}
}

/* ---------------------------------------------------------------------
 * Caixa de conteúdo (tooltip)
 * ------------------------------------------------------------------- */

.cee-hotspot__box {
	position: absolute;
	width: var(--cee-hs-box-width);
	max-width: min(var(--cee-hs-box-width), 78vw);
	z-index: 20;
}

/* Posicionamento por orientação (definida em data-runtime-placement). */
.cee-hotspot[data-runtime-placement="top"] .cee-hotspot__box {
	bottom: calc(50% + (var(--cee-hs-size) / 2) + var(--cee-hs-gap));
	left: 50%;
	transform: translateX(-50%) translateX(var(--cee-hs-shift, 0px));
}

.cee-hotspot[data-runtime-placement="bottom"] .cee-hotspot__box {
	top: calc(50% + (var(--cee-hs-size) / 2) + var(--cee-hs-gap));
	left: 50%;
	transform: translateX(-50%) translateX(var(--cee-hs-shift, 0px));
}

.cee-hotspot[data-runtime-placement="left"] .cee-hotspot__box {
	right: calc(50% + (var(--cee-hs-size) / 2) + var(--cee-hs-gap));
	top: 50%;
	transform: translateY(-50%);
}

.cee-hotspot[data-runtime-placement="right"] .cee-hotspot__box {
	left: calc(50% + (var(--cee-hs-size) / 2) + var(--cee-hs-gap));
	top: 50%;
	transform: translateY(-50%);
}

.cee-hotspot__box-inner {
	position: relative;
	overflow: hidden;
	background: var(--cee-hs-box-bg);
	border-radius: 10px;
	box-shadow: 0 18px 45px -12px rgba(0, 0, 0, 0.45);
	text-align: left;
	line-height: normal;
	/* Estado fechado. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: scale(0.96);
	transition: opacity 240ms ease, transform 240ms ease, visibility 240ms;
}

.cee-hotspot[data-runtime-placement="top"] .cee-hotspot__box-inner {
	transform-origin: bottom center;
}

.cee-hotspot[data-runtime-placement="bottom"] .cee-hotspot__box-inner {
	transform-origin: top center;
}

.cee-hotspot[data-runtime-placement="left"] .cee-hotspot__box-inner {
	transform-origin: center right;
}

.cee-hotspot[data-runtime-placement="right"] .cee-hotspot__box-inner {
	transform-origin: center left;
}

.cee-hotspot.is-open .cee-hotspot__box-inner {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: scale(1);
}

/* Seta apontando para o ponto (fora do overflow:hidden da caixa). */
.cee-hotspot__arrow {
	position: absolute;
	width: 12px;
	height: 12px;
	background: var(--cee-hs-box-bg);
	transform: rotate(45deg);
	z-index: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 240ms ease, visibility 240ms;
}

.cee-hotspot.is-open .cee-hotspot__arrow {
	opacity: 1;
	visibility: visible;
}

.cee-hotspot[data-runtime-placement="top"] .cee-hotspot__arrow {
	bottom: -6px;
	left: var(--cee-hs-arrow-x, 50%);
	margin-left: -6px;
}

.cee-hotspot[data-runtime-placement="bottom"] .cee-hotspot__arrow {
	top: -6px;
	left: var(--cee-hs-arrow-x, 50%);
	margin-left: -6px;
}

.cee-hotspot[data-runtime-placement="left"] .cee-hotspot__arrow {
	right: -6px;
	top: 50%;
	margin-top: -6px;
}

.cee-hotspot[data-runtime-placement="right"] .cee-hotspot__arrow {
	left: -6px;
	top: 50%;
	margin-top: -6px;
}

/* ---------------------------------------------------------------------
 * Mídia da caixa (padrão Image Box, full-bleed no topo)
 * ------------------------------------------------------------------- */

.cee-hotspot__media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--cee-hs-img-ratio);
	overflow: hidden;
	line-height: 0;
}

.cee-hotspot__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: var(--cee-hs-img-fit);
	object-position: var(--cee-hs-img-pos);
}

/* Proporção "Natural": a imagem define a altura da mídia. */
.cee-hotspots[data-img-natural="yes"] .cee-hotspot__media {
	aspect-ratio: auto;
}

.cee-hotspots[data-img-natural="yes"] .cee-hotspot__img {
	position: static;
	height: auto;
}

/* ---------------------------------------------------------------------
 * Conteúdo textual
 * ------------------------------------------------------------------- */

.cee-hotspot__content {
	position: relative;
	z-index: 2;
	padding: 18px;
}

.cee-hotspot__title {
	margin: 0 0 8px;
	color: #ffffff;
	font-family: 'Raleway', 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
}

.cee-hotspot__text {
	color: rgba(255, 255, 255, 0.78);
	font-family: 'Raleway', 'Montserrat', sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 1.6;
}

.cee-hotspot__text > *:last-child {
	margin-bottom: 0;
}

.cee-hotspot__text a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------
 * Responsivo
 * ------------------------------------------------------------------- */

@media (max-width: 767px) {
	.cee-hotspot__box {
		max-width: min(var(--cee-hs-box-width), 88vw);
	}
}