/**
 * DD Nav Menu — DonDigital Widgets v1.1.0
 * Menú de navegación 100% CSS. Sin JavaScript:
 * compatible con defer/delay de scripts (Perfmatters, WP Rocket, etc.).
 */

/* ------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------ */
.dd-nav-menu {
	position: relative;
	--dd-transition: 0.25s;
}

.dd-nav-menu ul,
.dd-nav-menu li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dd-nav-menu__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--dd-menu-justify, flex-start);
	gap: 8px;
}

.dd-nav-menu__list a {
	display: inline-flex;
	align-items: center;
	position: relative;
	text-decoration: none;
	padding: 10px 14px;
	color: inherit;
	transition: color var(--dd-transition), background-color var(--dd-transition);
}

.dd-nav-menu .menu-item {
	position: relative;
}

/* ------------------------------------------------------------------
 * Desplegables (nivel 1 y anidados) — apertura por :hover y
 * :focus-within (accesible por teclado), sin JavaScript.
 * ------------------------------------------------------------------ */
.dd-nav-menu .dd-sub-menu {
	display: block !important; /* Inmune a display:none de temas/plugins */
	position: absolute;
	top: calc(100% + var(--dd-dropdown-gap, 8px));
	left: 0;
	z-index: 9999;
	min-width: var(--dd-dropdown-min-width, 220px);
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--dd-transition),
		transform var(--dd-transition),
		visibility var(--dd-transition);
}

/* Puente invisible: mantiene el hover al cruzar la distancia entre
   el elemento del menú y su desplegable. */
.dd-nav-menu__list > .menu-item > .dd-sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--dd-dropdown-gap, 8px);
}

.dd-nav-menu .dd-sub-menu a {
	display: flex;
	width: 100%;
	padding: 10px 16px;
}

/* Submenús anidados: se abren hacia el lado derecho */
.dd-nav-menu .dd-sub-menu .dd-sub-menu {
	top: 0;
	left: 100%;
}

/* Animaciones */
.dd-nav-menu--anim-slide .dd-nav-menu__list > .menu-item > .dd-sub-menu {
	transform: translateY(10px);
}

.dd-nav-menu--anim-slide .dd-sub-menu .dd-sub-menu {
	transform: translateX(10px);
}

.dd-nav-menu--anim-none .dd-sub-menu {
	transition: none;
}

/* Estados de apertura.
   IMPORTANTE: deben ir DESPUÉS de las reglas de animación para ganar
   el desempate de especificidad (a igual puntuación, gana la última).
   - Modo hover (.dd-trigger-hover): abre al pasar el ratón.
   - Modo clic (por defecto): abre por :focus-within (el clic enfoca el
     enlace padre — CSS puro, sin JavaScript) y por [data-dd-open], que
     gestiona el mini-script incrustado para poder cerrar con 2º clic. */
.dd-trigger-hover .dd-nav-menu .menu-item:hover > .dd-sub-menu,
.dd-nav-menu .menu-item:focus-within > .dd-sub-menu,
.dd-nav-menu .menu-item[data-dd-open="1"] > .dd-sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(0, 0);
}

/* ------------------------------------------------------------------
 * Alineación de los desplegables (sin JavaScript)
 * ------------------------------------------------------------------ */

/* Todos los desplegables alineados a la derecha del elemento */
.dd-dropdown-right .dd-nav-menu__list > .menu-item > .dd-sub-menu {
	left: auto;
	right: 0;
}

/* Solo el último elemento: desplegable alineado a la derecha para
   que no se salga de la pantalla en menús pegados al borde. */
.dd-last-right-yes .dd-nav-menu__list > .menu-item:last-child > .dd-sub-menu {
	left: auto;
	right: 0;
}

/* Submenús anidados de los casos anteriores: se abren hacia la izquierda */
.dd-dropdown-right .dd-nav-menu .dd-sub-menu .dd-sub-menu,
.dd-last-right-yes .dd-nav-menu__list > .menu-item:last-child .dd-sub-menu .dd-sub-menu {
	left: auto;
	right: 100%;
}

/* ------------------------------------------------------------------
 * Indicador de submenú (flecha)
 * ------------------------------------------------------------------ */
.dd-indicator-yes .dd-nav-menu .menu-item-has-children > a::after {
	content: "";
	flex-shrink: 0;
	width: var(--dd-indicator-size, 0.4em);
	height: var(--dd-indicator-size, 0.4em);
	margin-left: var(--dd-indicator-spacing, 7px);
	margin-top: calc(var(--dd-indicator-size, 0.4em) * -0.5);
	border-right: 2px solid var(--dd-indicator-color, currentColor);
	border-bottom: 2px solid var(--dd-indicator-color, currentColor);
	transform: rotate(45deg);
	transition: transform var(--dd-transition);
}

/* En submenús anidados la flecha apunta hacia el lado de apertura */
.dd-indicator-yes .dd-nav-menu .dd-sub-menu .menu-item-has-children > a::after {
	margin-left: auto;
	margin-top: 0;
	transform: rotate(-45deg);
}

.dd-indicator-yes.dd-dropdown-right .dd-nav-menu .dd-sub-menu .menu-item-has-children > a::after,
.dd-indicator-yes.dd-last-right-yes .dd-nav-menu__list > .menu-item:last-child .dd-sub-menu .menu-item-has-children > a::after {
	transform: rotate(135deg);
}

/* ------------------------------------------------------------------
 * Efecto hover: línea animada
 * ------------------------------------------------------------------ */
.dd-hover-underline .dd-nav-menu__list > .menu-item > a::before,
.dd-hover-overline .dd-nav-menu__list > .menu-item > a::before {
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	height: var(--dd-hover-line-height, 2px);
	background: var(--dd-hover-line-color, currentColor);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--dd-transition);
	pointer-events: none;
}

.dd-hover-underline .dd-nav-menu__list > .menu-item > a::before {
	bottom: 0;
}

.dd-hover-overline .dd-nav-menu__list > .menu-item > a::before {
	top: 0;
}

.dd-hover-underline .dd-nav-menu__list > .menu-item > a:hover::before,
.dd-hover-underline .dd-nav-menu__list > .current-menu-item > a::before,
.dd-hover-overline .dd-nav-menu__list > .menu-item > a:hover::before,
.dd-hover-overline .dd-nav-menu__list > .current-menu-item > a::before {
	transform: scaleX(1);
}

/* ------------------------------------------------------------------
 * Responsive: ocultar el menú por completo al llegar al punto de
 * ruptura (sin hamburguesa). Para webs con menú off canvas propio.
 * La clase va en el contenedor del widget de Elementor.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.elementor-widget.dd-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.elementor-widget.dd-hide-mobile {
		display: none !important;
	}
}