/* Adagio Vistas — menú principal.
   Panel "Servicios" como en la maqueta: los enlaces con su descripción en dos columnas sobre
   un fondo gris y una imagen a la derecha. Se aplica al elemento del menú que tenga la clase
   CSS "adg-mega-servicios" (Apariencia › Menús). Los textos son los del menú de WordPress
   (nombre y "Descripción"); la imagen se elige en Apariencia › Personalizar. */

/* ---------------------------------------------------------------------
 * Descripción de los submenús (cualquier menú)
 * ------------------------------------------------------------------ */
.elementor-nav-menu .adg-menu-label,
.elementor-nav-menu .adg-menu-desc {
	display: block;
}

.elementor-nav-menu .adg-menu-desc {
	margin-top: 5px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	white-space: normal;
	opacity: 0.85;
}

/* ---------------------------------------------------------------------
 * Escritorio: panel Servicios
 * ------------------------------------------------------------------ */
.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu {
	--adg-pad: 12px;
	--adg-img-w: 312px; /* en px: el % del relleno se calcularía sobre el <li>, no sobre el panel */
	--adg-col-gap: 12px;
	box-sizing: border-box;
	width: min(980px, 94vw) !important;
	min-width: min(980px, 94vw) !important;
	max-width: min(980px, 94vw) !important;
	min-height: 390px;
	padding: calc(var(--adg-pad) + 18px) calc(var(--adg-pad) + var(--adg-img-w) + var(--adg-col-gap) + 20px) calc(var(--adg-pad) + 18px) calc(var(--adg-pad) + 20px) !important;
	border: 1px solid #CCCCCC;
	border-radius: 22px;
	background: #FFFFFF;
	box-shadow: 0 24px 60px -34px rgba(20, 20, 40, 0.28);
}

/* Visible (SmartMenus lo muestra con display: block): dos columnas de hasta 3 enlaces,
   de arriba hacia abajo, como en la maqueta. */
.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu[style*="display: block"] {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
	align-content: start;
	column-gap: 8px;
	row-gap: 4px;
	animation: adg-menu-enter 200ms ease-out;
}

/* Fondo gris de los enlaces */
.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu::before {
	content: "";
	position: absolute;
	top: var(--adg-pad);
	right: calc(var(--adg-pad) + var(--adg-img-w) + var(--adg-col-gap));
	bottom: var(--adg-pad);
	left: var(--adg-pad);
	z-index: 0;
	border-radius: 20px;
	background: #EDEDED;
	pointer-events: none;
}

/* Imagen */
.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu::after {
	content: "";
	position: absolute;
	top: var(--adg-pad);
	right: var(--adg-pad);
	bottom: var(--adg-pad);
	width: var(--adg-img-w);
	z-index: 0;
	border-radius: 20px;
	background-color: #EBEEF6;
	background-image: var(--adg-menu-servicios-img, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	pointer-events: none;
}

.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu > li {
	position: relative;
	z-index: 1;
	width: auto;
	min-width: 0;
	margin: 0;
	border: 0;
}

.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu > li > a.elementor-sub-item {
	position: relative;
	display: block;
	padding: 19px 16px !important;
	border: 0;
	border-radius: 20px;
	background: transparent;
	color: #555555;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: normal !important;
	transition: background-color 150ms ease, color 150ms ease;
}

.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu > li > a.elementor-sub-item .adg-menu-desc {
	margin-top: 6px;
	color: #666666;
	font-size: 13px;
	line-height: 1.2;
	opacity: 1;
}

/* Destacado: la página actual; si no estás en un servicio, el primero (como en la maqueta). */
.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu > li > a.elementor-sub-item:hover,
.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu > li > a.elementor-sub-item:focus-visible,
.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu > li.current-menu-item > a.elementor-sub-item.elementor-item-active,
.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu > li.current-menu-item > a.elementor-sub-item,
.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu:not(:has(> li.current-menu-item)) > li:first-child > a.elementor-sub-item {
	background: #FFFFFF;
	color: #344F9C;
}

.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu > li.current-menu-item > a.elementor-sub-item::before,
.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu:not(:has(> li.current-menu-item)) > li:first-child > a.elementor-sub-item::before {
	content: "";
	position: absolute;
	top: 25%;
	left: 15px;
	width: 2px;
	height: 50%;
	background: #344F9C;
}

.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu > li > a.elementor-sub-item:focus-visible {
	outline: 3px solid #87B6EF;
	outline-offset: -3px;
}

.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu > li > a .sub-arrow {
	display: none;
}

@keyframes adg-menu-enter {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Escritorio angosto: el panel se ajusta para no salirse de la pantalla. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu {
		--adg-img-w: 240px;
		width: min(820px, 94vw) !important;
		min-width: min(820px, 94vw) !important;
		max-width: min(820px, 94vw) !important;
		min-height: 360px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-nav-menu--main > .elementor-nav-menu > li.adg-mega-servicios > ul.sub-menu[style*="display: block"] {
		animation: none;
	}
}

/* ---------------------------------------------------------------------
 * Menú móvil y tableta (hamburguesa), como la maqueta: panel blanco con los
 * enlaces en negrita y "Servicios" en un recuadro gris con su descripción.
 * Sólo afecta al panel de la hamburguesa (.elementor-nav-menu__container).
 * ------------------------------------------------------------------ */
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
	border-radius: 18px;
	background: #FFFFFF;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.13);
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu {
	padding: 10px 14px;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul > li > a.elementor-item {
	padding: 12px !important;
	border: 0;
	background: transparent;
	color: #080808;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul > li > a.elementor-item:hover,
.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul > li > a.elementor-item:focus-visible,
.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul > li > a.elementor-item.highlighted,
.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul > li > a.elementor-item.elementor-item-active {
	background: transparent;
	color: #344F9C;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container li.adg-mega-servicios > ul.sub-menu {
	margin: 4px 0 10px;
	padding: 5px;
	border: 0;
	border-radius: 20px;
	background: #EDEDED;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container li.adg-mega-servicios > ul.sub-menu > li > a.elementor-sub-item {
	position: relative;
	display: block;
	padding: 15px 22px !important;
	border: 0;
	border-radius: 20px;
	background: transparent;
	color: #555555;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
	white-space: normal;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container li.adg-mega-servicios > ul.sub-menu > li > a.elementor-sub-item .adg-menu-desc {
	margin-top: 6px;
	color: #666666;
	font-size: 13px;
	opacity: 1;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container li.adg-mega-servicios > ul.sub-menu > li > a.elementor-sub-item:hover,
.elementor-nav-menu--dropdown.elementor-nav-menu__container li.adg-mega-servicios > ul.sub-menu > li > a.elementor-sub-item:focus-visible,
.elementor-nav-menu--dropdown.elementor-nav-menu__container li.adg-mega-servicios > ul.sub-menu > li.current-menu-item > a.elementor-sub-item,
.elementor-nav-menu--dropdown.elementor-nav-menu__container li.adg-mega-servicios > ul.sub-menu > li > a.elementor-sub-item.elementor-item-active,
.elementor-nav-menu--dropdown.elementor-nav-menu__container li.adg-mega-servicios > ul.sub-menu:not(:has(> li.current-menu-item)) > li:first-child > a.elementor-sub-item {
	background: #FFFFFF;
	color: #344F9C;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container li.adg-mega-servicios > ul.sub-menu > li.current-menu-item > a.elementor-sub-item::before,
.elementor-nav-menu--dropdown.elementor-nav-menu__container li.adg-mega-servicios > ul.sub-menu:not(:has(> li.current-menu-item)) > li:first-child > a.elementor-sub-item::before {
	content: "";
	position: absolute;
	top: 25%;
	left: 12px;
	width: 2px;
	height: 50%;
	background: #344F9C;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container li.adg-mega-servicios > ul.sub-menu > li > a.elementor-sub-item:focus-visible {
	outline: 3px solid #87B6EF;
	outline-offset: -3px;
}

/* ---------------------------------------------------------------------
 * Software (escritorio): el nombre y la descripción de cada módulo vienen
 * del menú de WordPress. Se anulan los textos fijos que el CSS del mega menú
 * (uploads/adagio-megamenu/adagio-megamenu.css) ponía con ::before/::after;
 * los íconos y la imagen siguen saliendo de ese archivo.
 * ------------------------------------------------------------------ */
.elementor-nav-menu--main.elementor-nav-menu__container > .elementor-nav-menu > li:has(> ul > li > ul) > ul > li > ul > li > a:has(.adg-menu-label) {
	font-size: 14.5px;
	line-height: 1.35;
}

.elementor-nav-menu--main.elementor-nav-menu__container > .elementor-nav-menu > li:has(> ul > li > ul) > ul > li > ul > li > a:has(.adg-menu-label)::before,
.elementor-nav-menu--main.elementor-nav-menu__container > .elementor-nav-menu > li:has(> ul > li > ul) > ul > li > ul > li > a:has(.adg-menu-label)::after {
	content: none;
	display: none;
}

.elementor-nav-menu--main.elementor-nav-menu__container > .elementor-nav-menu > li:has(> ul > li > ul) > ul > li > ul > li > a .adg-menu-label {
	color: #23232B;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	transition: color 150ms ease;
}

.elementor-nav-menu--main.elementor-nav-menu__container > .elementor-nav-menu > li:has(> ul > li > ul) > ul > li > ul > li > a .adg-menu-desc {
	margin-top: 2px;
	color: #6E6E7A;
	font-size: 12.5px;
	line-height: 1.4;
	opacity: 1;
}

.elementor-nav-menu--main.elementor-nav-menu__container > .elementor-nav-menu > li:has(> ul > li > ul) > ul > li > ul > li:first-child > a .adg-menu-label,
.elementor-nav-menu--main.elementor-nav-menu__container > .elementor-nav-menu > li:has(> ul > li > ul) > ul > li > ul > li > a:hover .adg-menu-label,
.elementor-nav-menu--main.elementor-nav-menu__container > .elementor-nav-menu > li:has(> ul > li > ul) > ul > li > ul > li > a:focus-visible .adg-menu-label {
	color: #344F9C;
}

/* ---------------------------------------------------------------------
 * Hamburguesa: submenús de Software (categorías y módulos)
 * ------------------------------------------------------------------ */
.elementor-nav-menu--dropdown.elementor-nav-menu__container ul.sub-menu a.elementor-sub-item {
	border: 0;
	background: transparent;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
	white-space: normal;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container ul.sub-menu a.elementor-sub-item:hover,
.elementor-nav-menu--dropdown.elementor-nav-menu__container ul.sub-menu a.elementor-sub-item:focus-visible,
.elementor-nav-menu--dropdown.elementor-nav-menu__container ul.sub-menu a.elementor-sub-item.highlighted,
.elementor-nav-menu--dropdown.elementor-nav-menu__container ul.sub-menu a.elementor-sub-item.elementor-item-active {
	background: #EDF1FB;
	color: #344F9C;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container li:has(> ul > li > ul) > ul > li > ul.sub-menu {
	margin: 2px 0 8px;
	padding: 5px;
	border-radius: 16px;
	background: #EDEDED;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container li:has(> ul > li > ul) > ul > li > ul.sub-menu > li > a.elementor-sub-item {
	padding: 11px 14px !important;
	border-radius: 14px;
	font-weight: 700;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container li:has(> ul > li > ul) > ul > li > ul.sub-menu > li > a.elementor-sub-item:hover,
.elementor-nav-menu--dropdown.elementor-nav-menu__container li:has(> ul > li > ul) > ul > li > ul.sub-menu > li > a.elementor-sub-item.elementor-item-active {
	background: #FFFFFF;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container li:has(> ul > li > ul) > ul > li > ul.sub-menu .adg-menu-desc {
	color: #666666;
	font-size: 13px;
	opacity: 1;
}