.iaexp-aurora {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--e-global-color-secondary);
	color: var(--e-global-color-4c06697);
}

.iaexp-aurora::before {
	content: "";
	position: absolute;
	inset: -30%;
	z-index: -1;
	background:
		radial-gradient(40% 40% at 25% 30%,
			color-mix(in srgb, var(--e-global-color-primary) 55%, transparent), transparent 70%),
		radial-gradient(35% 35% at 75% 65%,
			color-mix(in srgb, var(--e-global-color-60913e9) 45%, transparent), transparent 70%);
	filter: blur(70px);
	opacity: 0.85;
}

/* Menos intensidad para los momentos oscuros secundarios. */
.iaexp-aurora--contenida::before {
	filter: blur(50px);
	opacity: 0.5;
}

/* El desenfoque es lo más caro de pintar: en móvil se rebaja. */
@media (max-width: 767px) {
	.iaexp-aurora::before {
		filter: blur(40px);
		opacity: 0.6;
	}

	/* Misma especificidad que la regla anterior: al ir después, gana en móvil y
	   evita que --contenida pierda su distinción de intensidad en ese viewport. */
	.iaexp-aurora--contenida::before {
		filter: blur(30px);
		opacity: 0.35;
	}
}

.iaexp-aurora :is(h1, h2, h3, h4) {
	color: var(--e-global-color-4c06697);
}

/* El widget de orquestación fija sus propios colores de texto (primario y
   texto del Kit), pensados para fondos claros: sobre la aurora quedan casi
   ilegibles. Al caer dentro de la aurora, sus variables se reasignan al
   blanco y al celeste del Kit, que sí se leen sobre el fondo oscuro. */
.iaexp-aurora .iaexp-orq {
	--iaexp-orq-color: var(--e-global-color-4c06697);
	--iaexp-orq-texto: var(--e-global-color-329db06);
	/* La luz de la proyección sí es de color: el celeste del Kit es lo que
	   distingue el halo y el barrido del blanco de la tinta. */
	--iaexp-orq-luz: var(--e-global-color-329db06);
}

/* El selector tiene el mismo problema y hoy vive en una sección clara: esto es
   el seguro para el día que alguien lo mueva a una aurora. Ojo con la tinta: el
   botón activo y el enlace de acción pintan su texto sobre el propio color
   fuerte, que aquí pasa a ser blanco, así que esa tinta tiene que volverse
   oscura o quedarían blanco sobre blanco. */
.iaexp-aurora .iaexp-sel {
	--iaexp-sel-color: var(--e-global-color-4c06697);
	--iaexp-sel-texto: var(--e-global-color-329db06);
	--iaexp-sel-tinta: var(--e-global-color-secondary);
}

@media (prefers-reduced-motion: no-preference) {
	.iaexp-aurora--animada::before {
		animation: iaexp-aurora-deriva 18s ease-in-out infinite alternate;
	}
}

@keyframes iaexp-aurora-deriva {
	from { transform: translate3d(-3%, -2%, 0) scale(1); }
	to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* Separador de forma entre una sección clara y una aurora oscura, o al revés.
   Va en ::after (el ::before ya lo usa el propio degradado) y en la sección
   clara/oscura que abre la transición, con el color de fondo que ya trae esa
   sección: no reintroduce un color nuevo. Clase doblada por el mismo motivo
   que el resto del plugin: un solo nombre pierde el empate de especificidad
   contra el ::before de Elementor en cuanto ese contenedor tenga alguna otra
   regla con pseudo-elemento. */
.iaexp-divisor.iaexp-divisor {
	position: relative;
}

.iaexp-divisor.iaexp-divisor::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 64px;
	background: inherit;
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
	pointer-events: none;
}

@media (max-width: 767px) {
	.iaexp-divisor.iaexp-divisor::after {
		height: 32px;
	}
}