/* =========================================================
   MEGAMENU
   Panel ancho desplegable del menu del sitio.
   Se usa tanto en el sitio publico (menu.php) como en la
   vista previa del administrador (Sitio > Menu).
   ========================================================= */

.megamenu-panel{
	--mm-fondo: #ffffff;
	--mm-fondo-alt: rgba(0, 0, 0, .035);
	--mm-texto: #3c3c3b;
	--mm-texto-suave: rgba(60, 60, 59, .6);
	--mm-borde: rgba(0, 0, 0, .08);
	--mm-primario: var(--color-primario, #0d6efd);
	--mm-radio: .6rem;
}

.megamenu-panel.megamenu-oscuro{
	--mm-fondo: #14161d;
	--mm-fondo-alt: rgba(255, 255, 255, .05);
	--mm-texto: #ffffff;
	--mm-texto-suave: rgba(255, 255, 255, .55);
	--mm-borde: rgba(255, 255, 255, .1);
}

/* ---------------------------------------------------------
   PANEL (solo desktop: en mobile manda el drill-down del tema)
   --------------------------------------------------------- */

/* Tenants que no quieren el panel en el celular: la opcion no se dibuja */
@media (max-width: 991.98px){
	.nav-item-megamenu-sin-mobile{
		display: none !important;
	}
}

/* Icono de la opcion. El tema dibuja la flecha con un ::after sobre .dropdown-toggle,
   asi que las otras dos variantes la apagan y ponen (o no) lo suyo. */
.navbar-nav .nav-link.megamenu-icono-barras::after,
.navbar-nav .nav-link.megamenu-sin-icono::after{
	display: none;
}

.navbar-nav .nav-link.megamenu-icono-barras{
	display: flex;
	align-items: center;
}

.preview-megamenu-barra .preview-megamenu-opcion .fa-bars{
	font-size: 1.15rem;
}

@media (min-width: 992px){
	.nav-item-megamenu-panel{
		position: static;
	}

	.navbar-nav .dropdown-menu.megamenu-panel,
	.megamenu-panel.preview-megamenu-panel{
		/* El tema declara display:block para .navbar-nav .dropdown-menu con mas
		   especificidad, asi que el panel necesita forzar el flex */
		display: flex !important;
		flex-wrap: wrap;
		align-items: stretch;
		width: 100%;
		padding: 1.2rem 1rem;
		background-color: var(--mm-fondo);
		color: var(--mm-texto);
		row-gap: 0.5rem;
	}

	.navbar-nav .dropdown-menu.megamenu-panel{
		left: 0;
		right: auto;
		/* Si el panel no entra en la pantalla, scrollea el mismo. El JS le pone el
		   max-height segun lo que quede libre debajo de la barra, y el overscroll
		   contain evita que al llegar al final el scroll siga en la pagina de atras. */
		overflow-y: auto;
		overscroll-behavior: contain;
		/* El tema separa los desplegables de la barra con margin-top .5rem desde un
		   selector de 6 clases. El megamenu tiene que quedar pegado: si queda el hueco
		   se ve una franja entre la barra y el panel y, al cruzarla con el mouse, el
		   panel se cierra antes de llegar. */
		margin-top: 0 !important;
		border-radius: 0 0 var(--mm-radio) var(--mm-radio);
		box-shadow: 0 1.5rem 2.5rem rgba(0, 0, 0, .15);
	}

	/* Panel angosto: se ajusta a lo que ocupan sus columnas, para los megamenus de
	   una sola columna que tienen que verse como un desplegable comun. */
	/* El panel angosto cuelga de su propia opcion, no del borde de la barra */
	.navbar-nav .nav-item-megamenu-ajustado{
		position: relative;
	}

	.navbar-nav .dropdown-menu.megamenu-ajustado{
		width: max-content;
		min-width: 14rem;
		max-width: 100vw;
	}

	.navbar-nav .dropdown-menu.megamenu-ajustado .megamenu-col{
		width: auto;
		flex: 0 0 auto;
	}

	.navbar-nav .dropdown-menu.megamenu-ajustado .megamenu-col:last-child{
		border-right: 0;
	}

	.navbar-nav .dropdown-menu.megamenu-ajustado .megamenu-item,
	.navbar-nav .dropdown-menu.megamenu-ajustado .megamenu-col-titulo{
		white-space: nowrap;
	}

	.navbar-nav .dropdown-menu.megamenu-full{
		left: 50%;
		width: 100vw;
		max-width: 100vw;
		transform: translateX(-50%);
		border-radius: 0;
		padding-left: max(1rem, calc((100vw - 1320px) / 2));
		padding-right: max(1rem, calc((100vw - 1320px) / 2));
	}

	/* Columnas */
	.megamenu-panel .megamenu-col{
		position: static;
		padding: 0 1.5rem;
		border-right: 1px solid var(--mm-borde);
	}

	.megamenu-panel .megamenu-col:first-child{
		padding-left: 0;
	}

	.megamenu-panel .megamenu-col:last-of-type{
		border-right: 0;
	}

	.megamenu-col-2{ width: 16.6666%; }
	.megamenu-col-3{ width: 25%; }
	.megamenu-col-4{ width: 33.3333%; }
	.megamenu-col-6{ width: 50%; }

	/* La lista interna deja de ser un submenu flotante y queda en su lugar */
	.navbar-expand-lg:not(.hover-none) .navbar-nav .megamenu-panel .megamenu-col .dropdown-menu,
	.navbar-nav .megamenu-panel .megamenu-col .dropdown-menu,
	.megamenu-panel.preview-megamenu-panel .megamenu-col .dropdown-menu{
		position: static !important;
		float: none;
		top: auto !important;
		left: auto !important;
		width: 100%;
		min-width: 0;
		padding: 0;
		margin: 0;
		background: 0 0;
		border: 0;
		box-shadow: none;
		transform: none !important;
	}

	/* Se muestran y reciben el mouse SOLO con el panel abierto.
	   Si esto fuera incondicional, con el panel cerrado las listas internas
	   seguirian recibiendo el mouse (un hijo puede reactivar los pointer-events
	   que el padre apago) y el megamenu se reabriria al mover el mouse por
	   cualquier parte de la pantalla, tapando la navegacion del sitio. */
	.navbar-nav .nav-item-megamenu-panel:hover .megamenu-panel .megamenu-col .dropdown-menu,
	.navbar-nav .nav-item-megamenu-panel:focus-within .megamenu-panel .megamenu-col .dropdown-menu,
	.megamenu-panel.preview-megamenu-panel .megamenu-col .dropdown-menu{
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: all !important;
	}

	/* El display va aparte: las columnas de banner necesitan flex y si esto fuera
	   parte del bloque de arriba les ganaria por especificidad */
	.navbar-expand-lg:not(.hover-none) .navbar-nav .megamenu-panel .megamenu-col:not(.megamenu-estilo-5):not(.megamenu-estilo-6) .dropdown-menu,
	.navbar-nav .megamenu-panel .megamenu-col:not(.megamenu-estilo-5):not(.megamenu-estilo-6) .dropdown-menu,
	.megamenu-panel.preview-megamenu-panel .megamenu-col:not(.megamenu-estilo-5):not(.megamenu-estilo-6) .dropdown-menu{
		display: block !important;
	}

	/* El titulo de columna no se comporta como toggle */
	.megamenu-panel .megamenu-col > .megamenu-col-titulo:after{
		display: none !important;
	}
}

/* ---------------------------------------------------------
   VISTA PREVIA DENTRO DEL ADMINISTRADOR
   El panel se muestra siempre abierto y en su lugar, no flotando.
   --------------------------------------------------------- */
.preview-megamenu-wrapper{
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: var(--mm-radio, .6rem);
	overflow: hidden;
}

.preview-megamenu-barra{
	display: flex;
	align-items: center;
	padding: .85rem 1.5rem;
	font-size: .85rem;
	font-weight: 700;
	color: #fff;
	background-color: var(--color-secundario, #14161d);
}

.megamenu-panel.preview-megamenu-panel{
	position: static !important;
	display: flex !important;
	float: none;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: all !important;
	transform: none !important;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	list-style: none;
}

.megamenu-panel.preview-megamenu-panel .megamenu-item,
.megamenu-panel.preview-megamenu-panel .megamenu-col-titulo{
	cursor: default;
}

/* ---------------------------------------------------------
   CURSOR
   El tema pone cursor:pointer en todo .dropdown-menu, asi que el panel entero
   queda con la manito. Solo la llevan las opciones que se pueden clickear.
   --------------------------------------------------------- */
.megamenu-panel,
.megamenu-panel .megamenu-col,
.megamenu-panel .megamenu-items,
.megamenu-panel .megamenu-items > li,
.megamenu-panel .megamenu-col-titulo,
.megamenu-panel .megamenu-preview,
.megamenu-panel .megamenu-item{
	cursor: default;
}

.megamenu-panel .megamenu-item[href],
.megamenu-panel .megamenu-col-titulo[href],
.megamenu-panel .megamenu-item[data-bs-toggle]{
	cursor: pointer;
}

/* El titulo de columna con enlace propio se comporta como opcion clickeable */
.megamenu-panel.preview-megamenu-panel .megamenu-col-titulo[href]{
	cursor: default;
}

.megamenu-panel.preview-megamenu-panel .megamenu-item[href],
.megamenu-panel.preview-megamenu-panel .megamenu-item[data-bs-toggle]{
	cursor: default;
}

.megamenu-panel.preview-megamenu-panel .megamenu-item:hover{
	transform: none;
}

/* ---------------------------------------------------------
   TITULO DE COLUMNA
   --------------------------------------------------------- */
.megamenu-panel .megamenu-col-titulo{
	display: block;
	padding: 0 0 .9rem 0;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .09rem;
	text-transform: uppercase;
	color: var(--mm-texto-suave);
	background: 0 0;
}

.megamenu-panel .megamenu-col-titulo:hover,
.megamenu-panel .megamenu-col-titulo:focus{
	background: 0 0;
	color: var(--mm-texto-suave);
}

.megamenu-panel .megamenu-col-titulo.megamenu-col-titulo-enlace:hover{
	color: var(--mm-primario);
}

/* ---------------------------------------------------------
   ITEMS - ESTILO LISTA
   --------------------------------------------------------- */
.megamenu-panel .megamenu-item{
	display: block;
	padding: .45rem 0;
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mm-texto);
	background: 0 0;
	white-space: normal;
	transition: color .2s ease-in-out, transform .2s ease-in-out;
}

.megamenu-panel .megamenu-item:hover,
.megamenu-panel .megamenu-item:focus,
.megamenu-panel .megamenu-item.active{
	color: var(--mm-primario);
	background: 0 0;
}

@media (min-width: 992px){
	.megamenu-panel .megamenu-item:hover{
		transform: translateX(3px);
	}
}

.megamenu-panel .megamenu-item-descripcion{
	display: block;
	margin-top: .1rem;
	font-size: .72rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--mm-texto-suave);
}

.megamenu-panel .megamenu-etiqueta{
	display: inline-block;
	padding: .1rem .45rem;
	margin-left: .4rem;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .04rem;
	text-transform: uppercase;
	vertical-align: middle;
	border-radius: 1rem;
	color: #fff;
	background-color: var(--mm-primario);
}

/* ---------------------------------------------------------
   ITEMS DESTACADOS
   El switch Destacado de la fila resalta el item dentro de su columna.
   --------------------------------------------------------- */
.megamenu-panel .megamenu-item-destacado{
	position: relative;
	padding: .55rem 1.9rem .55rem .8rem;
	margin: .35rem 0;
	color: var(--mm-primario);
	border: 1px solid var(--mm-borde);
	border-radius: var(--mm-radio);
	background-color: var(--mm-fondo-alt);
}

.megamenu-panel .megamenu-item-destacado:after{
	position: absolute;
	top: 50%;
	right: .7rem;
	content: "\203a";
	font-size: 1.1rem;
	line-height: 1;
	transform: translateY(-50%);
	transition: right .2s ease-in-out;
}

.megamenu-panel .megamenu-item-destacado:hover{
	border-color: var(--mm-primario);
}

@media (min-width: 992px){
	.megamenu-panel .megamenu-item-destacado:hover{
		transform: none;
	}

	.megamenu-panel .megamenu-item-destacado:hover:after{
		right: .45rem;
	}
}

/* En los estilos con imagen de fondo el resaltado no aplica: ya son destacados */
.megamenu-panel .megamenu-estilo-3 .megamenu-item-destacado,
.megamenu-panel .megamenu-estilo-5 .megamenu-item-destacado,
.megamenu-panel .megamenu-estilo-6 .megamenu-item-destacado{
	padding: 1.1rem;
	margin: 0;
	color: inherit;
	border: 0;
}

.megamenu-panel .megamenu-estilo-3 .megamenu-item-destacado:after,
.megamenu-panel .megamenu-estilo-5 .megamenu-item-destacado:after,
.megamenu-panel .megamenu-estilo-6 .megamenu-item-destacado:after{
	display: none;
}

/* ---------------------------------------------------------
   ITEMS - ESTILO LISTA CON MINIATURA
   Misma lista de siempre, pero con la imagen del item a la izquierda.
   --------------------------------------------------------- */
.megamenu-panel .megamenu-estilo-4 .megamenu-item{
	display: flex;
	align-items: center;
	gap: .6rem;
}

.megamenu-panel .megamenu-estilo-4 .megamenu-item-imagen{
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	object-fit: contain;
	border-radius: 7px;
	background-color: var(--mm-fondo-alt);
}

/* Sin imagen la miniatura no desaparece: deja el hueco para que los titulos
   de la columna queden alineados entre si */
.megamenu-panel .megamenu-estilo-4 .megamenu-item-imagen.megamenu-sin-imagen{
	display: block;
	visibility: hidden;
}

.megamenu-panel .megamenu-estilo-4 .megamenu-item-texto{
	min-width: 0;
}

/* ---------------------------------------------------------
   ITEMS - ESTILO TARJETAS
   --------------------------------------------------------- */
.megamenu-panel .megamenu-estilo-2 .megamenu-items > li{
	margin-bottom: .55rem;
}

.megamenu-panel .megamenu-estilo-2 .megamenu-items > li:last-child{
	margin-bottom: 0;
}

.megamenu-panel .megamenu-estilo-2 .megamenu-item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .7rem .9rem;
	border: 1px solid var(--mm-borde);
	border-radius: var(--mm-radio);
	background-color: var(--mm-fondo-alt);
	transition: border-color .2s ease-in-out, transform .2s ease-in-out;
}

.megamenu-panel .megamenu-estilo-2 .megamenu-item:hover{
	transform: none;
	border-color: var(--mm-primario);
}

.megamenu-panel .megamenu-estilo-2 .megamenu-item-texto{
	min-width: 0;
}

.megamenu-panel .megamenu-estilo-2 .megamenu-item-imagen{
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	object-fit: contain;
	border-radius: 7px;
}

/* ---------------------------------------------------------
   ITEMS - ESTILO TARJETA DESTACADA (promocional)
   --------------------------------------------------------- */
.megamenu-panel .megamenu-estilo-3 .megamenu-items > li{
	margin-bottom: .75rem;
}

.megamenu-panel .megamenu-estilo-3 .megamenu-item{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 220px;
	padding: 1.1rem;
	overflow: hidden;
	border-radius: var(--mm-radio);
	background-color: var(--mm-fondo-alt);
	background-size: cover;
	background-position: center;
}

.megamenu-panel .megamenu-estilo-3 .megamenu-item:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .15) 60%, rgba(0, 0, 0, 0) 100%);
}

.megamenu-panel .megamenu-estilo-3 .megamenu-item:hover{
	transform: none;
}

.megamenu-panel .megamenu-estilo-3 .megamenu-item-texto{
	position: relative;
	z-index: 1;
}

.megamenu-panel .megamenu-estilo-3 .megamenu-item-titulo{
	display: block;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

.megamenu-panel .megamenu-estilo-3 .megamenu-item-descripcion{
	color: rgba(255, 255, 255, .8);
}

.megamenu-panel .megamenu-estilo-3 .megamenu-etiqueta{
	position: absolute;
	top: 1.1rem;
	left: 1.1rem;
	z-index: 1;
	margin-left: 0;
	color: var(--mm-texto);
	background-color: var(--mm-fondo);
}

/* ---------------------------------------------------------
   ITEMS - ESTILO BANNER DE IMAGEN
   La columna entera es un banner: los items se reparten su alto.
   El display va con !important porque arriba se aplanan todos los submenus
   del panel a display:block, tambien con !important.
   --------------------------------------------------------- */
@media (min-width: 992px){
	.megamenu-panel .megamenu-col.megamenu-estilo-5{
		display: flex;
		flex-direction: column;
	}

	.megamenu-panel .megamenu-estilo-5 .megamenu-items{
		/* El tema declara display:block para .navbar-nav .dropdown-menu con mas
		   especificidad, asi que el banner necesita forzar el flex */
		display: flex !important;
		flex: 1 1 auto;
		flex-direction: column;
		gap: .75rem;
	}

	.megamenu-panel .megamenu-estilo-5 .megamenu-items > li{
		display: flex;
		min-height: 0;
	}

	.megamenu-panel .megamenu-estilo-5 .megamenu-item{
		flex: 1 1 auto;
	}
}

.megamenu-panel .megamenu-estilo-5 .megamenu-item{
	min-height: 180px;
}

/* Con imagen el alto lo da la imagen; el minimo es solo para los banners de color */
.megamenu-panel .megamenu-estilo-5 .megamenu-item:not(.megamenu-item-sin-imagen),
.megamenu-panel .megamenu-estilo-6 .megamenu-item:not(.megamenu-item-sin-imagen){
	min-height: 0;
}

/* ---------------------------------------------------------
   ITEMS - ESTILO BANDA DE BANNERS
   Ocupa el ancho completo del panel, abajo de todas las columnas.
   --------------------------------------------------------- */
@media (min-width: 992px){
	.megamenu-panel .megamenu-col.megamenu-estilo-6{
		width: 100%;
		padding: 1.5rem 0 0 0;
		margin-top: .5rem;
		border-right: 0;
		border-top: 1px solid var(--mm-borde);
	}

	.megamenu-panel .megamenu-estilo-6 .megamenu-items{
		display: flex !important;
		flex-wrap: wrap;
		gap: 1rem;
	}

	/* Tres banners por fila: el cuarto baja a la fila siguiente en vez de
	   angostar a los tres primeros */
	.megamenu-panel .megamenu-estilo-6 .megamenu-items > li{
		flex: 0 0 calc((100% - 2rem) / 3);
		max-width: calc((100% - 2rem) / 3);
		margin-bottom: 0;
	}
}

.megamenu-panel .megamenu-estilo-6 .megamenu-item{
	min-height: 130px;
}

/* ---------------------------------------------------------
   BANNERS: la imagen es un <img> con alto automatico para que el banner se vea
   completo (background-size: cover recortaria lo que no entra en la caja).
   El texto va encima, apoyado abajo, sobre un degradado.
   --------------------------------------------------------- */
.megamenu-panel .megamenu-estilo-5 .megamenu-item,
.megamenu-panel .megamenu-estilo-6 .megamenu-item{
	position: relative;
	display: block;
	padding: 0;
	overflow: hidden;
	border-radius: var(--mm-radio);
}

/* Solo el banner sin imagen lleva fondo. Ponerselo a todos deja asomando una linea
   de ese color en el borde de abajo, porque el recorte redondeado del contenedor no
   cae exacto sobre el pixel de la imagen. */
.megamenu-panel .megamenu-estilo-5 .megamenu-item.megamenu-item-sin-imagen,
.megamenu-panel .megamenu-estilo-6 .megamenu-item.megamenu-item-sin-imagen{
	background-color: var(--mm-fondo-alt);
}

.megamenu-panel .megamenu-estilo-5 .megamenu-item-imagen,
.megamenu-panel .megamenu-estilo-6 .megamenu-item-imagen{
	display: block;
	width: 100%;
	height: auto;
	/* Redondeo propio en vez de confiar en el recorte del contenedor: asi las esquinas
	   cierran exacto y no asoma una linea del fondo. */
	border-radius: var(--mm-radio);
	/* La imagen se queda en la capa de abajo. Al hacer zoom, el transform le crea un
	   contexto de apilado y sin esto pasaria a pintarse encima del degradado, que es
	   lo que hace legible el texto. */
	position: relative;
	z-index: 0;
	/* Tope de alto para que una imagen muy vertical no estire el panel mas que la
	   pantalla. Con contain se sigue viendo completa: lo que sobra al costado lo
	   cubre el fondo del banner, no se recorta. */
	object-fit: contain;
}

.megamenu-panel .megamenu-estilo-5 .megamenu-item-imagen{
	max-height: 420px;
}

/* La superficie cambia de imagen al senalar cada opcion. El JS le fija la proporcion de
   su imagen inicial para que la caja no cambie de alto en cada cambio, y adentro las
   demas entran completas en vez de recortarse. */
.megamenu-panel .megamenu-item[data-mega-superficie]{
	aspect-ratio: 1 / 1;
	max-height: 420px;
}

/* Caja cuadrada y la imagen la llena. Al ser fija, las imagenes que van pasando no
   cambian el alto del panel; al ser cover, ninguna queda flotando con franjas vacias. */
.megamenu-panel .megamenu-item[data-mega-superficie] .megamenu-item-imagen{
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
}

.megamenu-panel .megamenu-estilo-6 .megamenu-item-imagen{
	max-height: 300px;
}

/* Zoom al pasar el mouse. El overflow:hidden del item recorta lo que crece, asi que
   la caja del banner no se mueve ni empuja al resto del panel. */
@media (min-width: 992px){
	.megamenu-panel .megamenu-estilo-5 .megamenu-item-imagen,
	.megamenu-panel .megamenu-estilo-6 .megamenu-item-imagen{
		transition: transform .45s ease-in-out;
	}

	.megamenu-panel .megamenu-estilo-5 .megamenu-item:hover .megamenu-item-imagen,
	.megamenu-panel .megamenu-estilo-6 .megamenu-item:hover .megamenu-item-imagen{
		transform: scale(1.07);
		border-radius: 0;
	}

	/* La Tarjeta destacada usa imagen de fondo, asi que el zoom se hace agrandando
	   el fondo en lugar de escalar un <img> */
	.megamenu-panel .megamenu-estilo-3 .megamenu-item{
		transition: background-size .45s ease-in-out;
	}

	.megamenu-panel .megamenu-estilo-3 .megamenu-item:hover{
		background-size: 115%;
	}

	/* En las tarjetas la miniatura tambien acompana */
	.megamenu-panel .megamenu-estilo-2 .megamenu-item-imagen,
	.megamenu-panel .megamenu-estilo-4 .megamenu-item-imagen{
		transition: transform .3s ease-in-out;
	}

	.megamenu-panel .megamenu-estilo-2 .megamenu-item:hover .megamenu-item-imagen,
	.megamenu-panel .megamenu-estilo-4 .megamenu-item:hover .megamenu-item-imagen{
		transform: scale(1.12);
	}

	@media (prefers-reduced-motion: reduce){
		.megamenu-panel .megamenu-item-imagen,
		.megamenu-panel .megamenu-estilo-3 .megamenu-item{
			transition: none;
		}

		.megamenu-panel .megamenu-item:hover .megamenu-item-imagen{
			transform: none;
		}

		.megamenu-panel .megamenu-estilo-3 .megamenu-item:hover{
			background-size: cover;
		}
	}
}

.megamenu-panel .megamenu-estilo-5 .megamenu-item:before,
.megamenu-panel .megamenu-estilo-6 .megamenu-item:before{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 65%;
	content: "";
	border-radius: 0 0 var(--mm-radio) var(--mm-radio);
	background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .2) 55%, rgba(0, 0, 0, 0) 100%);
}

.megamenu-panel .megamenu-estilo-5 .megamenu-item:hover,
.megamenu-panel .megamenu-estilo-6 .megamenu-item:hover{
	transform: none;
}

.megamenu-panel .megamenu-estilo-5 .megamenu-item-texto,
.megamenu-panel .megamenu-estilo-6 .megamenu-item-texto{
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	padding: 1.1rem;
}

.megamenu-panel .megamenu-estilo-5 .megamenu-item-titulo,
.megamenu-panel .megamenu-estilo-6 .megamenu-item-titulo{
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

.megamenu-panel .megamenu-estilo-5 .megamenu-item-descripcion,
.megamenu-panel .megamenu-estilo-6 .megamenu-item-descripcion{
	color: rgba(255, 255, 255, .8);
}

.megamenu-panel .megamenu-estilo-5 .megamenu-etiqueta,
.megamenu-panel .megamenu-estilo-6 .megamenu-etiqueta{
	position: absolute;
	top: 1.1rem;
	left: 1.1rem;
	z-index: 3;
	margin-left: 0;
	color: var(--mm-texto);
	background-color: var(--mm-fondo);
}

/* ---------------------------------------------------------
   PANEL DE VISTA PREVIA (hover)
   --------------------------------------------------------- */
.megamenu-panel .megamenu-preview{
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 190px;
	padding: 0 0 0 1.5rem;
	border-right: 0;
}

.megamenu-panel .megamenu-sin-imagen{
	display: none;
}

.megamenu-panel .megamenu-preview-imagen{
	/* Alto automatico: la caja toma la proporcion real de la imagen, asi no se
	   recorta (cover) ni queda flotando adentro de un marco mas grande (contain),
	   y el redondeo cae sobre el borde de la imagen y no sobre el fondo.
	   El max-height acota las imagenes muy verticales; recien ahi entra contain. */
	width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: contain;
	border-radius: var(--mm-radio);
	background-color: var(--mm-fondo-alt);
	transition: opacity .2s ease-in-out;
}

.megamenu-panel .megamenu-preview-titulo{
	margin: .8rem 0 .2rem 0;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mm-texto);
}

.megamenu-panel .megamenu-preview-texto{
	margin: 0;
	font-size: .76rem;
	line-height: 1.45;
	color: var(--mm-texto-suave);
}

/* ---------------------------------------------------------
   MOBILE: el panel se apoya en el drill-down del tema.
   Solo hay que neutralizar las tarjetas y las imagenes.
   --------------------------------------------------------- */
@media (max-width: 991.98px){
	.megamenu-panel .megamenu-col{
		border-right: 0;
	}

	.megamenu-panel .megamenu-item-imagen,
	.megamenu-panel .megamenu-preview{
		display: none !important;
	}

	.megamenu-panel .megamenu-estilo-2 .megamenu-item,
	.megamenu-panel .megamenu-estilo-3 .megamenu-item,
	.megamenu-panel .megamenu-estilo-5 .megamenu-item,
	.megamenu-panel .megamenu-estilo-6 .megamenu-item{
		display: block;
		min-height: 0;
		padding: .3rem 1rem;
		border: 0;
		border-radius: 0;
		background: 0 0 !important;
	}

	.megamenu-panel .megamenu-estilo-3 .megamenu-item:before,
	.megamenu-panel .megamenu-estilo-5 .megamenu-item:before,
	.megamenu-panel .megamenu-estilo-6 .megamenu-item:before{
		display: none;
	}

	.megamenu-panel .megamenu-estilo-3 .megamenu-item-titulo,
	.megamenu-panel .megamenu-estilo-5 .megamenu-item-titulo,
	.megamenu-panel .megamenu-estilo-6 .megamenu-item-titulo{
		font-size: inherit;
		font-weight: inherit;
		color: inherit;
	}

	/* Los cartelitos de los banners dejan de estar posicionados sobre la imagen */
	.megamenu-panel .megamenu-estilo-3 .megamenu-etiqueta,
	.megamenu-panel .megamenu-estilo-5 .megamenu-etiqueta,
	.megamenu-panel .megamenu-estilo-6 .megamenu-etiqueta{
		position: static;
		margin-left: .4rem;
		color: #fff;
		background-color: var(--mm-primario);
	}
}