/* =====================================================================
   ILIA Hero Motion
   1) Widget "Círculo giratorio"  (.iliac)
   2) Clases utilitarias para cualquier widget  (.ilia-fx-*)
   ===================================================================== */

/* ---------- 1) Círculo giratorio ---------- */
.iliac {
	--iliac-dur: 90s;
	--iliac-dur2: 140s;
	--iliac-op2: .35;
	--iliac-h: 100vh;
	--iliac-size: 139%;
	--iliac-x: 21%;
	--iliac-y: 0%;

	position: relative;
	width: 100%;
	height: var(--iliac-h);
	min-height: 320px;
	overflow: hidden;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Posición y tamaño (sin transform, para poder animar la entrada) */
.iliac .iliac__pos {
	position: absolute;
	width: var(--iliac-size);
	aspect-ratio: 800 / 782;
	left: calc(50% + var(--iliac-x));
	top: calc(50% + var(--iliac-y));
	margin-left: calc(var(--iliac-size) * -.5);
	margin-top: calc(var(--iliac-size) * -.489);
}
.iliac.has-intro .iliac__pos { animation: iliac-in 1.9s cubic-bezier(.2, .7, .2, 1) both; }

/* Pulso + parallax */
.iliac .iliac__float {
	position: absolute;
	inset: 0;
	translate: var(--iliac-px, 0px) var(--iliac-py, 0px);
	transition: translate 1.2s cubic-bezier(.2, .7, .2, 1);
}
.iliac.has-breathe .iliac__float { animation: iliac-breathe 14s ease-in-out infinite; }

/* Anillos: giran alrededor de su centro */
.iliac .iliac__ring {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	transform-origin: 50% 50%;
	will-change: transform;
	backface-visibility: hidden;
	animation: iliac-spin var(--iliac-dur) linear infinite;
}
.iliac.is-ccw .iliac__ring--a { animation-direction: reverse; }

/* Capa moiré: gira al revés y más lenta */
.iliac .iliac__ring--b {
	opacity: var(--iliac-op2);
	animation-duration: var(--iliac-dur2);
	animation-direction: reverse;
}
.iliac.is-ccw .iliac__ring--b { animation-direction: normal; }

/* Se pausa solo cuando sale de pantalla (lo marca el JS) */
.iliac.is-paused .iliac__ring,
.iliac.is-paused .iliac__float { animation-play-state: paused; }

@keyframes iliac-spin    { to { transform: rotate(360deg); } }
@keyframes iliac-in      { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes iliac-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }

/* Utilidad: gira cualquier widget "Imagen" de Elementor (clase CSS: ilia-fx-spin) */
.ilia-fx-spin img {
	transform-origin: 50% 50%;
	will-change: transform;
	animation: iliac-spin var(--iliac-dur, 90s) linear infinite;
}
.ilia-fx-spin-ccw img { animation-direction: reverse; }

/* ---------- 2) Utilidades de movimiento ---------- */
/* Solo se ocultan si hay JS y no estamos dentro del editor de Elementor */
html.ilia-js body:not(.elementor-editor-active) .ilia-fx-reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1);
}
html.ilia-js body:not(.elementor-editor-active) .ilia-fx-pop {
	opacity: 0;
	transform: scale(.85);
	transition: opacity .6s ease, transform .8s cubic-bezier(.3, 1.5, .5, 1);
}
html.ilia-js body:not(.elementor-editor-active) .ilia-fx-line {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.6s cubic-bezier(.65, 0, .2, 1);
}
html.ilia-js body:not(.elementor-editor-active) .ilia-fx-reveal.is-in,
html.ilia-js body:not(.elementor-editor-active) .ilia-fx-pop.is-in,
html.ilia-js body:not(.elementor-editor-active) .ilia-fx-line.is-in {
	opacity: 1;
	transform: none;
}

/* Retrasos escalonados: ilia-d1 … ilia-d6 */
.ilia-d1 { transition-delay: .12s !important; }
.ilia-d2 { transition-delay: .24s !important; }
.ilia-d3 { transition-delay: .36s !important; }
.ilia-d4 { transition-delay: .5s !important; }
.ilia-d5 { transition-delay: .68s !important; }
.ilia-d6 { transition-delay: .9s !important; }

/* Ondas del fondo: deriva lenta (ponla en el contenedor que tiene la imagen de ondas).
   Funciona mejor si la imagen tiene "Repetir" activado o un tamaño mayor al contenedor. */
.ilia-fx-waves { animation: ilia-waves 60s ease-in-out infinite alternate; }
@keyframes ilia-waves {
	from { background-position: 0 0; }
	to   { background-position: 120px 60px; }
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
	.iliac .iliac__ring,
	.iliac .iliac__pos,
	.iliac .iliac__float,
	.ilia-fx-spin img,
	.ilia-fx-waves { animation: none !important; }
	.iliac .iliac__float { transition: none; }
	html.ilia-js body .ilia-fx-reveal,
	html.ilia-js body .ilia-fx-pop,
	html.ilia-js body .ilia-fx-line { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =====================================================================
   3) Widget "Hero ILIA" (.iliahero)
   Escritorio: 2 columnas · Tablet (≤1024): 2 columnas más estrechas
   Móvil (≤767): apilado (texto + círculo)
   ===================================================================== */
.iliahero {
	--iliah-ink: #460f66;
	--iliah-dark: #460f66;
	--iliah-min-h: 100vh;
	--iliah-pt: 150px;
	--iliah-px: 56px;
	--iliah-rule-b: clamp(32px, 6vh, 84px);
	--iliah-circle-h: 95vw;
	--ph-s: 40;   /* intensidad parallax scroll (px) */
	--ph-m: 24;   /* intensidad parallax mouse (px)  */

	display: grid;
	grid-template-columns: 61fr 39fr;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}
.iliahero *, .iliahero *::before, .iliahero *::after { box-sizing: border-box; }

/* ----- Lado izquierdo ----- */
.iliahero .iliahero__left {
	position: relative;
	min-width: 0;
	min-height: var(--iliah-min-h);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	background-color: #f4e5fa;
}
/* Fondo (imagen editable). Valor por defecto = ondas incluidas en el plugin */
.iliahero .iliahero__bg {
	position: absolute;
	inset: 0;
	background-color: #f4e5fa;
	background-image: url("../img/bg-home-1.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	will-change: auto;
}
.iliahero.has-drift .iliahero__bg {
	will-change: transform;
	animation: iliahero-drift 40s ease-in-out infinite alternate;
}
@keyframes iliahero-drift {
	from { transform: translate3d(-2%, -1.5%, 0) scale(1.1); }
	to   { transform: translate3d(2%, 1.5%, 0) scale(1.1); }
}

.iliahero .iliahero__waves {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

.iliahero .iliahero__content {
	position: relative;
	z-index: 2;
	padding: var(--iliah-pt) var(--iliah-px) calc(var(--iliah-rule-b) + 3px + clamp(20px, 3.2vw, 56px));
}
.iliahero .iliahero__title {
	margin: 0;
	padding: 0;
	color: var(--iliah-ink);
	font-size: clamp(2.4rem, 6vw, 9rem);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -.01em;
}
.iliahero .iliahero__line { display: block; }
.iliahero .iliahero__line--first {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: .28em;
}
.iliahero .iliahero__badge {
	display: inline-block;
	padding: .5em 1.5em;
	border: 1.5px solid var(--iliah-ink);
	border-radius: 8px;
	color: var(--iliah-ink);
	font-size: clamp(.8rem, 1.45vw, 1.7rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	white-space: nowrap;
	transform-origin: left center;
}
.iliahero .iliahero__rule {
	position: absolute;
	z-index: 2;
	left: var(--iliah-px);
	right: 0;
	bottom: var(--iliah-rule-b);
	height: 3px;
	background: var(--iliah-ink);
	pointer-events: none;
}

/* ----- Lado derecho ----- */
.iliahero .iliahero__right {
	position: relative;
	min-width: 0;
	overflow: hidden;
	background: var(--iliah-dark);
}
.iliahero .iliahero__right .iliac {
	position: absolute;
	inset: 0;
	height: auto;
	min-height: 0;
}

/* ----- Parallax por capas (las variables --ph-p/--ph-mx/--ph-my las pone el JS) ----- */
.iliahero.has-parallax .iliahero__bg,
.iliahero.has-parallax .iliahero__waves {
	inset: -12%;               /* margen para que no se vean bordes al desplazar */
	will-change: translate;
}
.iliahero.has-parallax .iliahero__waves { width: 124%; height: 124%; }
/* fondo y ondas: lento y a contramano del mouse */
.iliahero.has-parallax .iliahero__bg,
.iliahero.has-parallax .iliahero__waves {
	translate:
		calc(var(--ph-mx, 0) * var(--ph-m) * -.35px)
		calc(var(--ph-p, 0) * var(--ph-s) * .7px + var(--ph-my, 0) * var(--ph-m) * -.35px);
}
/* texto y línea: apenas se adelantan */
.iliahero.has-parallax .iliahero__content,
.iliahero.has-parallax .iliahero__rule {
	will-change: translate;
	translate:
		calc(var(--ph-mx, 0) * var(--ph-m) * .25px)
		calc(var(--ph-p, 0) * var(--ph-s) * -.12px + var(--ph-my, 0) * var(--ph-m) * .25px);
}
/* círculo: el más profundo con el mouse, lento con el scroll */
.iliahero.has-parallax .iliahero__right .iliac__pos {
	will-change: translate;
	translate:
		calc(var(--ph-mx, 0) * var(--ph-m) * -1px)
		calc(var(--ph-p, 0) * var(--ph-s) * .35px + var(--ph-my, 0) * var(--ph-m) * -1px);
}

/* ----- Tablet ----- */
@media (max-width: 1024px) {
	.iliahero { grid-template-columns: 58fr 42fr; --iliah-pt: 130px; --iliah-px: 40px; }
	.iliahero .iliahero__title { font-size: clamp(2.2rem, 5.4vw, 5rem); }
	:where(.iliahero .iliahero__right) .iliac { --iliac-size: 175%; --iliac-x: 28%; }
}

/* ----- Móvil: apilado ----- */
@media (max-width: 767px) {
	.iliahero { grid-template-columns: 1fr; --iliah-pt: 110px; --iliah-px: 22px; --iliah-min-h: 72vh; --iliah-rule-b: 28px; }
	.iliahero .iliahero__title { font-size: clamp(1.9rem, 8.6vw, 3.4rem); }
	.iliahero .iliahero__badge { font-size: clamp(.72rem, 3.2vw, 1rem); }
	.iliahero .iliahero__bg { background-image: url("../img/bg-home-1-mobile.webp"); }
	.iliahero.no-waves-mobile .iliahero__waves { display: none; }
	.iliahero .iliahero__right { height: var(--iliah-circle-h); min-height: 280px; }
	.iliahero.is-circle-first .iliahero__right { order: -1; }
	:where(.iliahero .iliahero__right) .iliac { --iliac-size: 135%; --iliac-x: 0%; --iliac-y: 0%; }
}

@media (prefers-reduced-motion: reduce) {
	.iliahero.has-drift .iliahero__bg { animation: none !important; }
	.iliahero.has-parallax .iliahero__bg,
	.iliahero.has-parallax .iliahero__waves,
	.iliahero.has-parallax .iliahero__content,
	.iliahero.has-parallax .iliahero__rule,
	.iliahero.has-parallax .iliahero__right .iliac__pos { translate: none; }
}