/* ==========================================================================
   MegaMenu EX by Agencia Exclamación — v1.0.0
   Principios de esta hoja:
   1. Solo ESTRUCTURA. Todo lo visual (colores, fondos, tipografía, espaciados)
      lo definen los controles de Elementor, que siempre ganan.
   2. Cero reglas compartidas que cambien de significado según el contexto
      (la causa raíz de los bugs del plugin anterior).
   3. Prefijo mmx- en todo. Sin colisiones con el plugin viejo ni con temas.
   ========================================================================== */

.mmx-wrapper,
.mmx-wrapper *,
.mmx-wrapper *::before,
.mmx-wrapper *::after {
	box-sizing: border-box;
}

.mmx-wrapper {
	position: relative;
	--mmx-anim-duration: 250ms;
	--mmx-anim-easing: ease;
}

.mmx-nav {
	position: relative; /* ancla de los megas en modo "ancho del menú" y "ancho fijo" */
	width: 100%;
}

.mmx-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mmx-empty {
	opacity: 0.6;
	font-style: italic;
}

/* --- Nivel 1: horizontal --- */
.mmx-level-1 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;      /* centrado VERTICAL: válido solo aquí, nunca se hereda a otro contexto */
	justify-content: flex-start;
	gap: 24px;
}

.mmx-level-1 > .mmx-item {
	position: relative;
}

/* Los padres de mega se posicionan contra .mmx-nav, no contra su propio <li> */
.mmx-level-1 > .mmx-item--mega {
	position: static;
}

.mmx-item > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* --- Ícono e insignia (badge) --- */
.mmx-icon {
	display: inline-flex;
	font-size: 1em;
	line-height: 1;
}

.mmx-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.mmx-badge {
	display: inline-block;
	font-size: 10px;
	line-height: 1;
	padding: 3px 6px;
	border-radius: 3px;
	background: #2f6fed;
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
}

/* --- Flecha (caret) --- */
.mmx-caret {
	display: inline-flex;
	transition: transform var(--mmx-anim-duration) var(--mmx-anim-easing);
}

.mmx-caret--default {
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-top: -2px;
}

.mmx-caret--custom {
	font-size: 0.8em;
}

.mmx-caret--custom svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.mmx-level-1 > .mmx-item.mmx-open > a > .mmx-caret--default {
	transform: rotate(-135deg);
}

.mmx-level-1 > .mmx-item.mmx-open > a > .mmx-caret--custom {
	transform: rotate(180deg);
}

/* En niveles 2+ el caret indica "abre hacia el lado" */
.mmx-level-2 .mmx-caret--default {
	transform: rotate(-45deg);
	margin-top: 0;
}

/* ==========================================================================
   Motor de apertura/animación — TODOS los submenús (nivel 2, 3 y mega)
   comparten la clase .mmx-sub. Cerrado por defecto; .mmx-open en el <li>
   padre lo abre. El tipo de animación lo define la clase del wrapper
   (mmx-anim-fade / slide / zoom / none) y la duración/curva las variables.
   visibility con retardo = no se puede "hovear" un menú cerrado y el cierre
   se ve animado igual que la apertura.
   ========================================================================== */
.mmx-sub {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--mmx-anim-duration) var(--mmx-anim-easing),
		transform var(--mmx-anim-duration) var(--mmx-anim-easing),
		visibility 0s linear var(--mmx-anim-duration);
}

.mmx-item.mmx-open > .mmx-sub {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity var(--mmx-anim-duration) var(--mmx-anim-easing),
		transform var(--mmx-anim-duration) var(--mmx-anim-easing);
}

/* Variantes de animación */
.mmx-anim-none .mmx-sub,
.mmx-anim-none .mmx-item.mmx-open > .mmx-sub {
	transition: none;
}

.mmx-anim-slide .mmx-sub {
	transform: translateY(12px);
}

.mmx-anim-slide .mmx-item.mmx-open > .mmx-sub {
	transform: translateY(0);
}

.mmx-anim-zoom .mmx-sub {
	transform: scale(0.96);
	transform-origin: top center;
}

.mmx-anim-zoom .mmx-item.mmx-open > .mmx-sub {
	transform: scale(1);
}

/* ==========================================================================
   Nivel 2: dropdown
   ========================================================================== */
.mmx-level-2 {
	position: absolute;
	top: 100%;
	left: 0;
	display: flex;
	flex-direction: column;
	min-width: 220px;
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 8px 0;
	gap: 0;
	z-index: 1000;
}

.mmx-level-2 .mmx-item {
	position: relative;
}

.mmx-level-2 .mmx-item > a {
	display: flex;
	width: 100%;
	padding: 8px 20px;
	justify-content: flex-start;
	align-items: center;
	white-space: normal;
}

/* El caret de "tiene flyout" se empuja a la derecha */
.mmx-level-2 .mmx-item > a > .mmx-caret {
	margin-left: auto;
}

.mmx-sub-texts {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mmx-sub-desc {
	font-size: 12px;
	opacity: 0.65;
	font-weight: 400;
}

/* ==========================================================================
   Nivel 3: flyout lateral
   ========================================================================== */
.mmx-level-3 {
	position: absolute;
	top: 0;
	left: 100%;
	display: flex;
	flex-direction: column;
	min-width: 200px;
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 8px 0;
	gap: 0;
	z-index: 1001;
}

/* ==========================================================================
   Mega panel — tres modos de ancho (clase puesta por el widget en render):
   - mmx-mega--full  : todo el viewport (position fixed; top lo fija JS)
   - mmx-mega--menu  : ancho del propio menú (absolute contra .mmx-nav)
   - mmx-mega--custom: ancho fijo en px, centrado bajo el menú
     (el centrado usa margin-left negativo calculado por Elementor, NO
     transform, para no chocar con las animaciones slide/zoom)
   ========================================================================== */
.mmx-mega {
	background: #ffffff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	padding: 32px 40px;
	z-index: 999;
}

.mmx-mega--full {
	position: fixed;
	left: 0;
	width: 100vw;
	padding-left: 5vw;
	padding-right: 5vw;
}

.mmx-mega--menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
}

.mmx-mega--custom {
	position: absolute;
	top: 100%;
	left: 50%;
	width: 900px;
	margin-left: -450px; /* override vía control "Ancho fijo del mega" */
	max-width: 100vw;
}

.mmx-mega-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 32px;
	max-width: 1400px;
	margin: 0 auto;
}

.mmx-mega-col {
	min-width: 0;
}

.mmx-mega-col-image {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 12px;
}

.mmx-mega-col-title {
	display: block;
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 700;
}

.mmx-mega-col-desc {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.85;
}

.mmx-mega-col-desc p {
	margin: 0 0 8px;
}

.mmx-mega-col-desc p:last-child {
	margin-bottom: 0;
}

.mmx-mega-col-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mmx-mega-col-links a {
	text-decoration: none;
}

.mmx-mega-col-cta {
	display: inline-block;
	margin-top: 14px;
	padding: 8px 16px;
	background: #1a1a1a;
	color: #ffffff;
	text-decoration: none;
	border-radius: 4px;
	font-size: 13px;
}

/* ==========================================================================
   Texto con degradado (nivel 1) — la clase la pone el control
   "Relleno del texto" (prefix_class en el wrapper del widget)
   ========================================================================== */
.mmx-textfill-gradient .mmx-level-1 > .mmx-item > a .mmx-label {
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Accesibilidad: respeta "reducir movimiento" del sistema */
@media (prefers-reduced-motion: reduce) {
	.mmx-sub,
	.mmx-item.mmx-open > .mmx-sub,
	.mmx-caret {
		transition: none !important;
	}
}

/* ==========================================================================
   v1.1.0 — MODO MOBILE INTEGRADO
   El menú horizontal colapsa a un botón según el breakpoint elegido y se
   abre como panel vertical. El panel usa su PROPIO árbol de clases (mmx-p-*):
   cero reglas compartidas con el menú horizontal.
   ========================================================================== */

.mmx-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	--mmx-panel-duration: 300ms;
	--mmx-toggle-size: 26px;
}

/* --- Botón de apertura (oculto en desktop por defecto) --- */
.mmx-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 6px;
	margin: 0;
	cursor: pointer;
	color: #1a1a1a;
	font-size: var(--mmx-toggle-size);
	line-height: 1;
}

.mmx-toggle .mmx-icon svg {
	width: 1em;
	height: 1em;
}

.mmx-toggle-img {
	display: block;
	width: var(--mmx-toggle-size);
	height: auto;
}

.mmx-lottie {
	display: block;
	width: calc(var(--mmx-toggle-size) * 1.4);
	height: calc(var(--mmx-toggle-size) * 1.4);
}

/* Respaldo si el JSON de Lottie no carga: muestra ☰ */
.mmx-lottie:empty::before {
	content: '\2630';
	font-size: var(--mmx-toggle-size);
	line-height: 1;
}

/* Hamburguesa animada (3 barras -> X) */
.mmx-bars {
	position: relative;
	display: block;
	width: 1em;
	height: 0.72em;
}

.mmx-bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--mmx-panel-duration) var(--mmx-anim-easing), opacity var(--mmx-panel-duration) var(--mmx-anim-easing), top var(--mmx-panel-duration) var(--mmx-anim-easing);
}

.mmx-bars span:nth-child(1) { top: 0; }
.mmx-bars span:nth-child(2) { top: calc(50% - 1px); }
.mmx-bars span:nth-child(3) { top: calc(100% - 2px); }

.mmx-panel-open .mmx-bars span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.mmx-panel-open .mmx-bars span:nth-child(2) { opacity: 0; }
.mmx-panel-open .mmx-bars span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }

/* --- Breakpoints: cuándo colapsa el menú ---
   Nota: usa los breakpoints estándar de Elementor (767 / 1024). */
.mmx-bp-always .mmx-nav { display: none; }
.mmx-bp-always .mmx-toggle { display: inline-flex; }

@media (max-width: 1024px) {
	.mmx-bp-tablet .mmx-nav { display: none; }
	.mmx-bp-tablet .mmx-toggle { display: inline-flex; }
}

@media (max-width: 767px) {
	.mmx-bp-mobile .mmx-nav { display: none; }
	.mmx-bp-mobile .mmx-toggle { display: inline-flex; }
}

/* --- Overlay --- */
.mmx-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--mmx-panel-duration) var(--mmx-anim-easing), visibility 0s linear var(--mmx-panel-duration);
	z-index: 9998;
}

.mmx-panel-open .mmx-overlay {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--mmx-panel-duration) var(--mmx-anim-easing);
}

/* --- Panel --- */
.mmx-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	z-index: 9999;
	visibility: hidden;
	transition: transform var(--mmx-panel-duration) var(--mmx-anim-easing), opacity var(--mmx-panel-duration) var(--mmx-anim-easing), visibility 0s linear var(--mmx-panel-duration);
}

.mmx-panel--side {
	width: 320px;
	max-width: 100vw;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
}

.mmx-panel--left  { left: 0; }
.mmx-panel--right { right: 0; }

.mmx-panel--full {
	left: 0;
	right: 0;
	width: auto;
}

/* Animación de entrada: slide o fade (clase mmx-panim-* en el wrapper) */
.mmx-panim-slide .mmx-panel--left  { transform: translateX(-100%); }
.mmx-panim-slide .mmx-panel--right { transform: translateX(100%); }
.mmx-panim-slide .mmx-panel--full  { transform: translateY(-100%); }
.mmx-panim-fade  .mmx-panel        { opacity: 0; }

.mmx-panel-open .mmx-panel {
	visibility: visible;
	transform: none;
	opacity: 1;
	transition: transform var(--mmx-panel-duration) var(--mmx-anim-easing), opacity var(--mmx-panel-duration) var(--mmx-anim-easing);
}

/* --- Cabecera del panel --- */
.mmx-panel-head {
	display: flex;
	justify-content: flex-end;
	padding: 12px 16px;
	flex: 0 0 auto;
}

.mmx-panel-close {
	background: transparent;
	border: 0;
	padding: 4px;
	cursor: pointer;
	color: #1a1a1a;
	font-size: 26px;
	line-height: 1;
}

/* --- Zona de navegación --- */
.mmx-panel-nav {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
}

.mmx-panel-nav > ul {
	height: 100%;
	overflow-y: auto;
	padding: 0 20px 24px;
	-webkit-overflow-scrolling: touch;
}

/* FIX RAÍZ v1.2.0: los <ul> del panel no tenían reset — el navegador les pone
   viñeta negra y padding-left de 40px por defecto. Eso era el "punto negro" no
   editable y el margen izquierdo incontrolable de los submenús. La viñeta ahora
   es un elemento propio DENTRO del <a> (editable y cubierta por el fondo hover). */
.mmx-panel-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- Ítems del panel --- */
.mmx-p-item > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 14px 4px;
	text-decoration: none;
	color: #1a1a1a;
	cursor: pointer;
	justify-content: flex-start;
	text-align: left;
}

/* Viñeta del ítem (elemento propio: editable y dentro del área de hover).
   margin-right propio (además del gap del padre) para que el control de
   "espacio de la viñeta" tenga efecto real e independiente. */
.mmx-p-bullet {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 0;
}

.mmx-p-bullet--dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: currentColor;
}

.mmx-p-bullet--icon {
	font-size: 14px;
	line-height: 1;
}

.mmx-p-bullet--icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.mmx-panel-nav > ul > .mmx-p-item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mmx-p-item > a .mmx-label {
	flex: 0 1 auto;
	min-width: 0;
}

/* FIX v1.2.2: el caret vivía en position:absolute — por diseño un elemento
   fuera de flujo no puede recibir padding/margen "reales" (no hay nada
   respecto a qué desplazarse dentro de la caja). Se pasa a flujo normal con
   margin-left:auto (lo empuja al extremo derecho, técnica flex estándar) para
   que el padding/margen del control de Estilo sí tenga efecto visible. */
.mmx-p-caret {
	flex: 0 0 auto;
	margin-left: auto;
	transition: transform var(--mmx-anim-duration) var(--mmx-anim-easing);
}

.mmx-p-caret--default {
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
}

.mmx-p-caret--custom {
	font-size: 12px;
	line-height: 1;
}

.mmx-p-caret--custom svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Acordeón: caret apunta abajo y rota al abrir. Drill-down: apunta a la derecha. */
.mmx-pnav-accordion .mmx-p-caret--default { transform: rotate(45deg); }
.mmx-pnav-accordion .mmx-p-item.mmx-open > a .mmx-p-caret--default { transform: rotate(-135deg); }
.mmx-pnav-accordion .mmx-p-item.mmx-open > a .mmx-p-caret--custom { transform: rotate(180deg); }
.mmx-pnav-drilldown .mmx-p-caret--default { transform: rotate(-45deg); }

/* ==========================================================================
   Submenús del panel — MODO ACORDEÓN
   Truco grid-rows: anima de 0fr a 1fr sin medir alturas en JS y sin el bug
   clásico de max-height + padding (cerrado NUNCA deja franjas visibles).
   ========================================================================== */
.mmx-pnav-accordion .mmx-p-sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--mmx-anim-duration) var(--mmx-anim-easing);
}

.mmx-pnav-accordion .mmx-p-item.mmx-open > .mmx-p-sub {
	grid-template-rows: 1fr;
}

.mmx-pnav-accordion .mmx-p-sub-inner {
	min-height: 0;
	overflow: hidden;
	padding-left: 16px;
}

/* La cabecera drill-down no existe en acordeón */
.mmx-pnav-accordion .mmx-dd-head { display: none; }

/* ==========================================================================
   Submenús del panel — MODO DRILL-DOWN
   Cada submenú es una "pantalla" que se desliza sobre la anterior, con
   cabecera (volver + título del padre), como Max Mega Menu.
   ========================================================================== */
.mmx-pnav-drilldown .mmx-p-sub {
	position: absolute;
	inset: 0;
	background: #ffffff;
	transform: translateX(100%);
	visibility: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 20px 24px;
	transition: transform var(--mmx-panel-duration) var(--mmx-anim-easing), visibility 0s linear var(--mmx-panel-duration);
	z-index: 2;
}

.mmx-pnav-drilldown .mmx-p-item.mmx-dd-open > .mmx-p-sub {
	transform: translateX(0);
	visibility: visible;
	transition: transform var(--mmx-panel-duration) var(--mmx-anim-easing);
}

.mmx-dd-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	margin-bottom: 6px;
	font-weight: 700;
}

.mmx-dd-back {
	background: transparent;
	border: 0;
	padding: 4px 8px 4px 0; /* valor por defecto — sobreescrito por el control "Padding del botón volver" */
	cursor: pointer;
	color: inherit;
	display: inline-flex;
	align-items: center;
}

/* FIX v1.2.2: varios temas definen "button:hover { color: #fff; }" de forma
   genérica — eso volvía invisible el ícono/flecha del botón volver al pasar
   el mouse (flecha blanca sobre fondo blanco = "queda en blanco"). Se fija un
   valor base que el control de Estilo → Hover puede sobreescribir. */
.mmx-wrapper .mmx-dd-back:hover,
.mmx-wrapper .mmx-dd-back:focus {
	color: inherit;
	background-color: transparent;
}

.mmx-dd-back:empty::before {
	content: '';
	width: 9px;
	height: 9px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	display: block;
}

/* --- Mega dentro del panel: columnas apiladas (reusa clases mmx-mega-col-*
       para que la sección de estilo "Mega Menú" también lo pinte) --- */
.mmx-p-mega {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 12px 0 20px;
}

/* Blindaje contra estilos de botones del tema (algunos temas pintan
   button[type=button] con fondos propios — mayor especificidad + reset).
   Incluye un hover neutro por defecto para TODO botón interactivo del widget:
   si el usuario no define un color de hover propio en el panel de Estilo,
   el tema no puede "apagar" el ícono (evita el bug de flecha/ícono invisible
   al pasar el mouse). El control de Estilo, al tener mayor prioridad de
   cascada (se inyecta después), sobreescribe esto sin problema. */
.mmx-wrapper .mmx-toggle,
.mmx-wrapper .mmx-panel-close,
.mmx-wrapper .mmx-dd-back,
.mmx-wrapper .mmx-tab-btn,
.mmx-wrapper .mmx-toggle:hover,
.mmx-wrapper .mmx-panel-close:hover,
.mmx-wrapper .mmx-dd-back:hover,
.mmx-wrapper .mmx-tab-btn:hover,
.mmx-wrapper .mmx-tab-btn {
	color: inherit;
	background-color: transparent;
	background-image: none;
	border: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	/* OJO: solo font-family. El shorthand "font" resetea font-size y rompe
	   los controles de tamaño (bug corregido en 1.2.1). */
	font-family: inherit;
	line-height: 1;
}

/* ==========================================================================
   Mega en modo PESTAÑAS (tabs a la izquierda, contenido a la derecha)
   ========================================================================== */
.mmx-mega-tabs {
	display: flex;
	gap: 28px;
	max-width: 1400px;
	margin: 0 auto;
}

.mmx-tab-list {
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.mmx-tab-btn {
	display: block;
	width: 100%;
	text-align: left;
	padding: 10px 14px;
	cursor: pointer;
	color: inherit;
}

.mmx-tab-btn.mmx-tab-active {
	background-color: rgba(0, 0, 0, 0.05);
	font-weight: 600;
}

.mmx-tab-panes {
	flex: 1 1 auto;
	min-width: 0;
}

.mmx-tab-pane {
	display: none;
}

.mmx-tab-pane.mmx-tab-active {
	display: block;
}

/* Bloqueo de scroll del body mientras el panel está abierto */
body.mmx-lock {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.mmx-panel,
	.mmx-overlay,
	.mmx-bars span,
	.mmx-pnav-accordion .mmx-p-sub,
	.mmx-pnav-drilldown .mmx-p-sub {
		transition: none !important;
	}
}