/*
 * "Mancha decorativa": capa de fondo difuminada que vive DETRAS del contenido.
 *
 * El wrapper del widget (.elementor-widget-wlw_blob_glow) se saca del flujo y
 * se estira a todo el contenedor padre (.e-con, que en Elementor es
 * position:relative por defecto), con z-index:0 para quedar detras del
 * contenido del contenedor. Asi los controles de posicion en % se calculan
 * sobre el contenedor completo, no sobre la caja del widget.
 *
 * El aspecto fijo y la geometria DESKTOP se imprimen INLINE desde render()
 * (ver BlobGlowWidget.php) para que la mancha se vea SIEMPRE, en editor y
 * frontend, sin depender de este archivo. El tamano/posicion responsive se
 * resuelve con `selectors` + `!important` desde Elementor, que pueden
 * sobrescribir el valor inline en tablet/mobile. Esta regla `.wlw-blob` queda
 * solo como fallback defensivo por si el inline no estuviera presente.
 *
 * !important documentado: el CSS atomico de Elementor puede imprimirse despues
 * de este archivo (mismo caso que .wlw-review-avatar, ver architecture.md).
 * Con especificidad identica (una clase), el empate lo gana el orden de
 * aparicion; !important garantiza el posicionamiento de la capa sin tocar el
 * enqueue.
 */

 /* El padre de LUCES debe ser la sección FormContacto */
/*
 * Las manchas son decorativas y pueden salir del viewport por su geometria
 * (left + width + blur). La capa LUCES controla su ventana local, pero esta
 * barrera evita que un wrapper de Elementor, un width:100vw o una regla
 * atomica intermedia convierta ese overflow decorativo en scroll de pagina.
 * :has() mantiene el efecto limitado a paginas que realmente tienen este
 * widget y no oculta overflow horizontal de paginas ajenas.
 */
html:has(.elementor-widget-wlw_blob_glow),
body:has(.elementor-widget-wlw_blob_glow) {

}

/*
 * Un hijo no puede escapar del clipping vertical de un ancestro. Elementor
 * Atomic puede aplicar `overflow: hidden` a cualquiera de los e-con que
 * envuelven la capa. Todos los ancestros Elementor de una capa LUCES deben
 * conservar el sangrado vertical, mientras el eje horizontal sigue recortado.
 */
.elementor-element:has(.luces-viewport) {
	
	overflow-y: visible !important;
}

.luces-viewport,
.elementor-element.e-atomic-element.luces-viewport {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;


  overflow-y: visible !important;

  pointer-events: none !important;
  isolation: isolate;
}

/*
 * LUCES es la unica ventana de clipping. Las manchas pueden crecer por
 * arriba/abajo y el widget no debe introducir una segunda caja de clipping
 * con las dimensiones propias del wrapper que genera Elementor Atomic.
 */
.elementor-element.e-atomic-element.luces-viewport
  > .elementor-element.elementor-widget.elementor-widget-wlw_blob_glow,
.luces-viewport > .elementor-widget-wlw_blob_glow {
	overflow: visible !important;
}

.elementor-element.elementor-widget.elementor-widget-wlw_blob_glow,
.elementor-widget-wlw_blob_glow {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	/* Recorta la mancha solo a los costados para evitar el scroll horizontal,
	   pero deja sangrar arriba/abajo. `clip` (no `hidden`) permite combinar
	   overflow-x con overflow-y:visible sin que el navegador promocione el eje
	   vertical a auto. */
	
	overflow-y: visible !important;
}

/* Fuera del editor la capa no debe interceptar los clics del contenido. */
body:not(.elementor-editor-active) .elementor-widget-wlw_blob_glow {
	pointer-events: none !important;
}

.wlw-blob {
	--wlw-blob-color: rgba(56, 189, 248, 0.32);

	position: absolute;
	left: 0;
	top: 0;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(70px);
	background: radial-gradient(
		circle,
		var(--wlw-blob-color) 0%,
		color-mix(in srgb, var(--wlw-blob-color) 0%, transparent) 62%
	);
}


.wlw-blob {
    animation: wlw-blob-float 9s ease-in-out infinite alternate;
}

@keyframes wlw-blob-float {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        opacity: 0.72;
    }

    25% {
        transform: translate3d(28px, -34px, 0) scale(1.06) rotate(1.5deg);
        opacity: 1;
    }

    50% {
        transform: translate3d(-222px, -192px, 0) scale(0.96) rotate(-1deg);
        opacity: 0.82;
    }

    75% {
        transform: translate3d(-142px, -18px, 0) scale(1.07) rotate(-2deg);
        opacity: 1;
    }

    100% {
        transform: translate3d(124px, 20px, 0) scale(1.02) rotate(1deg);
        opacity: 0.78;
    }
}

.wlw-blob:nth-of-type(2n) {
    animation-duration: 16s;
    animation-delay: -5s;
}

.wlw-blob:nth-of-type(3n) {
    animation-duration: 20s;
    animation-delay: -11s;
    animation-direction: alternate-reverse;
}

.wlw-blob:nth-of-type(4n) {
    animation-duration: 14s;
    animation-delay: -8s;
}

/* Mobile version without expensive blur */
@media (max-width: 767px) {
    .wlw-blob {
        animation: none !important;
        will-change: auto !important;
        filter: none !important;
        transform: none !important;

        background: radial-gradient(
            circle,
            var(--wlw-blob-color) 0%,
            color-mix(in srgb, var(--wlw-blob-color) 55%, transparent) 25%,
            transparent 70%
        ) !important;
    }
}