/* =========================================================
   José Cuy · CSS global del tema (clases globales de Elementor)
   ========================================================= */

/* Marco del hero (clase global jc-hero-frame): filete dorado interior y textura de luz encima de la imagen. */
.jc-hero-frame {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.jc-hero-frame::before {
	content: "";
	position: absolute;
	/* !important: Elementor pone width/height explícitos en su propio .e-con::before (overlay
	   de fondo), misma especificidad que este selector; sin !important el filete se descuadra
	   18px hacia fuera y overflow:hidden se come los lados derecho e inferior. */
	inset: 18px !important;
	width: auto !important;
	height: auto !important;
	z-index: 7;
	border: 1px solid rgba(210, 181, 125, 0.24);
	pointer-events: none;
}
.jc-hero-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: url("../img/marco-hero.webp") center center / cover no-repeat fixed;
	opacity: 0.45;
	mix-blend-mode: lighten;
	pointer-events: none;
}
.jc-hero-frame > .elementor-element {
	position: relative;
	z-index: 2;
}

/* Chispas que siguen al cursor (clases globales jc-spark-zone y jc-spark-zone-header; las crea efectos.js). */
.jc-spark-zone {
	position: relative;
}
.jc-cursor-spark {
	position: absolute;
	z-index: 8;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #D8BE89;
	box-shadow: 0 0 9px #C9A76A, 10px -8px 0 -1px rgba(216, 190, 137, 0.65), -8px 6px 0 -1px rgba(216, 190, 137, 0.5);
	pointer-events: none;
	animation: jc-spark-out 680ms ease-out forwards;
}
@keyframes jc-spark-out {
	to {
		opacity: 0;
		transform: translateY(-14px) scale(0.2) rotate(35deg);
	}
}

/* Parallax con el ratón (clase mouse-parallax; efectos.js actualiza las variables). */
.mouse-parallax {
	transform: translate3d(var(--mouse-x, 0px), var(--mouse-y, 0px), 0);
}

@media (max-width: 767px) {
	.jc-hero-frame::before {
		inset: 8px;
	}
	.jc-hero-frame::after {
		background-attachment: scroll;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jc-cursor-spark {
		display: none;
	}
	.mouse-parallax {
		transform: none;
	}
}