.mmw {
	--mmw-overlay-bg: rgba(0, 0, 0, 0.35);
	--mmw-transition-duration: 260ms;
	--mmw-transition-ease: ease;
	--mmw-transition: var(--mmw-transition-duration) var(--mmw-transition-ease);
	/* Transición independiente para la navegación entre paneles de submenú */
	--mmw-panel-transition-duration: 260ms;
	--mmw-panel-transition-ease: ease;
	--mmw-panel-transition: var(--mmw-panel-transition-duration) var(--mmw-panel-transition-ease);
	position: relative;
}

/*
 * Nav estático para crawlers.
 * Siempre presente en el DOM, nunca con display:none ni hidden, para que
 * los motores de búsqueda indexen todos los enlaces del menú sin depender
 * de la ejecución de JS. Invisible para usuarios mediante clip-path.
 * aria-hidden="true" en el HTML evita que los lectores de pantalla lo dupliquen.
 */
.mmw-seo-nav {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);        /* legacy */
	clip-path: inset(50%);          /* moderno */
	white-space: nowrap;
	border: 0;
	pointer-events: none;
}

/* inert en el HTML elimina el foco por teclado; este selector es fallback
   para navegadores que aún no implementan inert (muy pocos, <1%). */
.mmw-seo-nav[inert] * {
	pointer-events: none !important;
	user-select: none !important;
}

/*
 * Wrapper del botón toggle.
 * Usa display:block + text-align para la alineación horizontal — este es el patrón
 * estándar de Elementor para alinear botones y funciona de forma fiable en el editor.
 * El botón es display:inline-flex, por lo que responde a text-align del padre.
 */
.mmw-toggle-wrap {
	display: block;
	width: 100%;
}

/* Ancho del botón: "Ajustar al contenido" (por defecto) */
.mmw-toggle-width-fit .mmw-toggle {
	width: auto;
}

/* Ancho del botón: "Ancho completo" — ocupa todo el ancho del wrapper */
.mmw-toggle-width-full .mmw-toggle {
	width: 100%;
	display: flex; /* pasa a flex para que el contenido se reparta bien */
}

.mmw-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: transparent;
	border: 1px solid currentColor;
	color: inherit;
	font: inherit;
	cursor: pointer;
	padding: 0.75rem 1rem;
	line-height: 1.2;
}

.mmw-toggle-icon-right .mmw-toggle {
	flex-direction: row-reverse;
}

.mmw-toggle__icon,
.mmw-close__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.mmw-toggle__icon svg,
.mmw-close__icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

.mmw-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	/* El fondo arranca transparente y hace fade-in al abrirse.
	   Damos soporte de scroll al overlay por si el menú (diálogo) es muy largo. */
	display: flex;
	align-items: flex-start;
	overflow-y: auto;
	background: transparent;
	transition: background var(--mmw-transition);
	pointer-events: none; /* fallback para navegadores sin soporte de inert */
}

.mmw.is-open .mmw-overlay {
	background: var(--mmw-overlay-bg);
	pointer-events: auto;
}

.mmw-align-left .mmw-overlay {
	justify-content: flex-start;
}

.mmw-align-right .mmw-overlay {
	justify-content: flex-end;
}

.mmw-align-center .mmw-overlay {
	justify-content: center;
}

.mmw-dialog {
	width: 100vw;
	max-width: 100%;
	/* El alto del diálogo se adapta a su contenido (items + slot inferior) 
	   y siempre será como mínimo el alto de la pantalla. */
	height: auto;
	min-height: 100dvh;
	background: #fff;
	color: #111;
	transform: translateX(100%);
	transition: transform var(--mmw-transition), opacity var(--mmw-transition);
	display: flex;
	flex-direction: column;
}

.mmw-align-left .mmw-dialog {
	transform: translateX(-100%);
}

.mmw-align-center .mmw-dialog {
	height: auto;
}

.mmw.is-open .mmw-dialog {
	transform: translateX(0);
}

.mmw[data-animation-type="none"] .mmw-dialog,
.mmw[data-animation-type="none"] .mmw-panel {
	transition: none !important;
}

.mmw[data-animation-type="fade"] .mmw-dialog {
	transform: none;
	opacity: 0;
}

.mmw[data-animation-type="fade"].is-open .mmw-dialog {
	opacity: 1;
}

.mmw[data-animation-type="scale"] .mmw-dialog {
	transform: scale(0.96);
	opacity: 0;
}

.mmw[data-animation-type="scale"].is-open .mmw-dialog {
	transform: scale(1);
	opacity: 1;
}

.mmw[data-animation-type="slide"] .mmw-dialog {
	opacity: 1;
}

.mmw-align-center[data-animation-type="slide"] .mmw-dialog {
	transform: translateY(24px);
	opacity: 0;
}

.mmw-align-center.is-open[data-animation-type="slide"] .mmw-dialog {
	transform: translateY(0);
	opacity: 1;
}

.mmw-dialog-inner {
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* fallback */
	min-height: 100dvh;
	padding: 20px; /* valor por defecto; Elementor lo sobreescribe con el control de padding del panel */
}

/*
 * Heading visualmente oculto que da nombre al dialog para crawlers y lectores de pantalla.
 * El role="dialog" apunta a él via aria-labelledby. Usa el patrón sr-only estándar
 * para que Google lo procese pero no afecte al layout.
 */
.mmw-dialog-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mmw-topbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1rem;
}

.mmw-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	color: inherit;
	padding: 0;
}

.mmw-close__label {
	line-height: 1.2;
}

.mmw-viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* El height se gestiona con JS para soportar transiciones suaves
	   entre paneles con distinta cantidad de items. */
	transition: height var(--mmw-panel-transition);
	will-change: height;
}

.mmw-track {
	position: relative;
	width: 100%;
	height: 100%;
}

.mmw-panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* El panel se ajusta a su contenido interno para que JS lo pueda medir */
	transform: translateX(100%);
	transition: transform var(--mmw-panel-transition);
	/* will-change se aplica por JS solo durante la animación activa,
	   evitando crear capas GPU innecesarias para todos los paneles. */
}

.mmw-panel-inner {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.mmw-root-nav,
.mmw-panel-nav {
	display: block;
}

.mmw-root-nav > ul,
.mmw-panel-nav > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mmw-node {
	display: block;
}

.mmw-item-row {
	display: flex;
	align-items: stretch;
}

.mmw-item-row > .mmw-item--link,
.mmw-item-row > .mmw-item--static {
	flex: 1 1 auto;
	min-width: 0;
}

/* Base compartida para enlaces y botones de la lista de items.
   .mmw-panel-title tiene su propio bloque ya que su padding difiere. */
.mmw-item,
.mmw-back,
.mmw-item--static {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	text-decoration: none;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #e5e5e5;
	color: inherit;
	font: inherit;
	padding: 14px 0;
	text-align: left;
}

.mmw-item {
	cursor: pointer;
}

.mmw-item--parent-toggle {
	flex: 0 0 auto;
	width: auto;
	min-width: 48px;
	justify-content: center;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.mmw-item__main {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
	flex: 1 1 auto;
}

.mmw-item__label,
.mmw-back__label {
	flex: 1 1 auto;
	min-width: 0;
}

.mmw-item__icon {
	flex: 0 0 auto;
	margin-left: 1rem;
}

/*
 * El icono del botón volver es position:absolute para que pueda
 * desplazarse hacia la izquierda con un valor negativo de `left`
 * y "colgar" fuera del padding del panel, como en el diseño de la captura.
 * El botón .mmw-back necesita position:relative como contexto.
 * El .mmw-back__label recibe padding-left para que el texto no quede
 * debajo del icono cuando este está desplazado — configurable desde Elementor.
 */
.mmw-back {
	position: relative;
}

.mmw-back__icon {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* SVG base size — se sobreescribe con el control de tamaño de Elementor */
.mmw-item__icon svg,
.mmw-back__icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

.mmw-item__badge--new {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.2em 0.55em;
	border-radius: 999px;
	font-size: 0.72em;
	line-height: 1;
	background: #111111;
	color: #ffffff;
	white-space: nowrap;
}

/*
 * Items destacados: se usa selector compuesto (.mmw-item--link.mmw-item--highlighted)
 * para tener la misma especificidad que los estilos de items normales y no ser pisado
 * por ellos. El border shorthand sobreescribe el border-bottom del item base.
 */
.mmw-item--link.mmw-item--highlighted,
.mmw-item--static.mmw-item--highlighted,
.mmw-item--parent-toggle.mmw-item--highlighted {
	border: 1px solid #e5e5e5;
	border-radius: 0.75rem;
}

.mmw-item--link.mmw-item--highlighted,
.mmw-item--static.mmw-item--highlighted {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.mmw-node--highlighted + .mmw-node,
.mmw-node--highlighted {
	margin-top: 0.35rem;
}

/*
 * Slot de cabecera de subpanel.
 * Vive fuera del .mmw-viewport (sin overflow:hidden) para que el back icon
 * con left negativo pueda moverse fuera del margen del panel sin ser recortado.
 * JS muestra el item correcto según el panel activo.
 */
.mmw-panel-header-slot {
	position: relative; /* contexto para el absolute del back icon */
}

.mmw-panel-header-slot__item[hidden] {
	display: none;
}

.mmw-panel-header {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 12px; /* valor por defecto; Elementor lo sobreescribe con panel_header_bottom_gap */
}

.mmw-panel-title {
	display: flex;
	align-items: center;
	width: 100%;
	text-decoration: none;
	color: inherit;
	font: inherit;
}

/* Versión enlace: indica visualmente que es navegable */
a.mmw-panel-title--link {
	cursor: pointer;
}

a.mmw-panel-title--link:hover,
a.mmw-panel-title--link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}



/*
 * Slot por subpanel: plantilla de Elementor asignada a cada ítem de nivel 1
 * mediante el campo Descripción del menú de WordPress.
 * Se renderiza al pie de cada subpanel individual.
 */
.mmw-panel-slot {
	margin-top: 16px;
}

.mmw-panel-slot > *:last-child {
	margin-bottom: 0;
}

.mmw-bottom-slot > *:last-child {
	margin-bottom: 0;
}

.mmw-empty {
	padding: 1rem;
	border: 1px dashed #ccc;
}

body.mmw-lock-scroll {
	overflow: hidden;
}

/* Ítem estático con hijos: indica visualmente que es navegable */
.mmw-item--static[data-submenu-trigger] {
    cursor: pointer;
}

.mmw-item--static[data-submenu-trigger]:hover {
    text-decoration: none;
}

/* Cuando el separador del título de subpanel está desactivado desde Elementor
   (el control escribe border-bottom-width: 0 o lo elimina), también se suprime el margen. */
.mmw-panel-title:not([style*="border-bottom"]) {
    margin-bottom: 0;
}