/**
 * Megamenu Animation Styles
 * Animación sofisticada para megamenu fullwidth
 */

/* Offset fijo de 80px desde el top */
.elementor-popup-modal.megamenu .dialog-widget-content {
	top: 65px !important;
}

/* Ajuste para admin bar */
.admin-bar .elementor-popup-modal.megamenu .dialog-widget-content {
	top: 112px !important; /* 80px + 32px admin bar */
}

@media (max-width: 782px) {
	.admin-bar .elementor-popup-modal.megamenu .dialog-widget-content {
		top: 126px !important; /* 80px + 46px admin bar móvil */
	}
}

/* Animación solo cuando tiene la clase megamenu-animated - solo aplicar si ya está visible */
.elementor-popup-modal.megamenu.megamenu-animated .dialog-widget-content {
	transform-origin: top center !important;
	animation: megamenuSlideDown 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

.elementor-popup-modal.megamenu.megamenu-animated .dialog-message {
	animation: megamenuFadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s forwards !important;
}

/* Animación de entrada desde arriba */
@keyframes megamenuSlideDown {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Animación fade in del contenido */
@keyframes megamenuFadeIn {
	from {
		opacity: 0;
		transform: translateY(15px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Animación de salida */
.elementor-popup-modal.megamenu.megamenu-closing .dialog-widget-content {
	animation: megamenuSlideUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes megamenuSlideUp {
	from {
		transform: translateY(0);
		opacity: 1;
	}
	to {
		transform: translateY(-100%);
		opacity: 0;
	}
}