/* CTE Menú de Plataformas.
   En ESCRITORIO: mega-menú propio (panel fijo, `.cte-mega-menu`), ninguna
   clase ni estilo de Divi de por medio.
   En MÓVIL/TABLET (<= 980px): el acordeón se inserta DENTRO del propio
   elemento de menú, en el menú hamburguesa real de Divi (ver
   `.cte-pm-inline-tree` más abajo) — por eso esas reglas sí van, a
   propósito, con `!important`: tienen que ganarle el pulso a los
   estilos que Divi ya aplica a sus <ul>/<li>/<a> de menú.
   Estructura del mega-menú de escritorio (de fuera hacia dentro):
     - FAMILIAS (categorías raíz): a ancho IGUAL entre ellas (si hay 3,
       33% cada una) — el orden lo decide "Display order"/el nombre.
     - SUBCATEGORÍAS: rejilla de máximo 2 columnas dentro de su familia
       (con 3 o 4, la 3ª y 4ª bajan a una segunda fila).
     - SUB-SUBCATEGORÍAS: no abren más columnas, solo un título separador
       y la lista de productos, una detrás de otra.
   Cambia --cte-pm-accent si quieres otro color de acento en vez de
   negro, y --cte-pm-width para el ancho del panel (por defecto 50%). */

.cte-mega-menu {
	--cte-pm-accent: #000000;
	--cte-pm-width: 50%;
	position: fixed;
	left: 50%;
	width: var(--cte-pm-width);
	min-width: 760px;
	max-width: 96vw;
	top: 0; /* se corrige por JS al abrir */
	background: #ffffff;
	border-top: 4px solid var(--cte-pm-accent);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
	z-index: 999999;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%) translateY(-10px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	max-height: 78vh;
	overflow-y: auto;
	box-sizing: border-box;
}

.cte-mega-menu.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.cte-mega-menu__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 32px;
	display: flex;
	align-items: flex-start;
	gap: 36px;
	box-sizing: border-box;
}

/* Todas las familias a ancho IGUAL entre ellas. */
.cte-mega-menu__family {
	flex: 1 1 0;
	min-width: 0;
}

.cte-mega-menu__banner {
	margin-bottom: 14px;
}

/* Alto FIJO (no "max-height"), igual en todas las familias tenga la
   columna el ancho que tenga: si no, una familia más estrecha recortaba
   la imagen más baja que una ancha y no quedaban a la misma altura. */
.cte-mega-menu__banner-img-link {
	display: block;
	overflow: hidden;
}

.cte-mega-menu__banner img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
	margin-bottom: 10px;
	background: #f5f5f5;
	transition: transform .2s ease, opacity .2s ease;
}

.cte-mega-menu__banner-img-link:hover img {
	transform: scale(1.04);
	opacity: .92;
}

/* Nivel 1 (familia): badge negro cuadrado (sin redondear), letras en
   negrita blancas. Alto FIJO (con hueco para hasta 2 líneas) para que
   quede igualado entre familias, tengan el título corto o largo. */
.cte-mega-menu__banner h3 {
	margin: 0;
	min-height: 46px;
	display: flex;
	align-items: center;
	padding: 8px 12px;
	background: var(--cte-pm-accent);
	border-radius: 0;
	font-size: 14px;
	font-weight: 700;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: .05em;
	line-height: 1.25;
	box-sizing: border-box;
}

.cte-mega-menu__banner h3 a {
	color: inherit;
	text-decoration: none;
}

.cte-mega-menu__banner h3 a:hover {
	text-decoration: underline;
}

/* Nivel 2 (subcategorías): reparto en MÁXIMO 2 columnas que fluyen (no
   una rejilla de filas emparejadas): las dos arrancan igualadas arriba,
   pero cada subcategoría ocupa solo lo que necesita — si una es corta y
   su "pareja" de al lado es larga, no se queda esperando a que la otra
   acabe, sigue con la siguiente subcategoría justo debajo. Así se evita
   el hueco enorme que dejaba antes la rejilla fija. */
.cte-mega-menu__columns {
	column-count: 2;
	column-gap: 24px;
}

.cte-mega-menu__col {
	min-width: 0;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: 18px;
}

.cte-mega-menu__group {
	margin-bottom: 4px;
}

/* Nivel 2 (título de subcategoría): negrita negra, con línea negra
   marcada debajo. */
.cte-mega-menu__col-title {
	margin: 0 0 8px;
	padding-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cte-pm-accent);
	border-bottom: 2px solid var(--cte-pm-accent);
}

.cte-mega-menu__col-title a {
	color: inherit;
	text-decoration: none;
}

.cte-mega-menu__col-title a:hover {
	text-decoration: underline;
}

/* Nivel 3 (sub-subcategoría): no abre columna nueva — solo un título
   fino (más ligero) con una línea separadora suave DEBAJO del título
   (no arriba), y debajo la lista de productos seguida. */
.cte-mega-menu__group-label {
	margin: 10px 0 6px;
	padding-bottom: 4px;
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #999;
	border-bottom: 1px solid #eee;
}

.cte-mega-menu__products {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cte-mega-menu__products li {
	margin: 0;
	line-height: 1.3;
}

.cte-mega-menu__products a {
	display: block;
	padding: 3px 0;
	text-decoration: none;
	font-size: 13px;
}

.cte-mega-menu__products a:hover {
	text-decoration: underline;
}

/* El mega-menú de columnas es solo de escritorio: en móvil se usa el
   acordeón de aquí abajo en su lugar. */
@media (max-width: 980px) {
	.cte-mega-menu {
		display: none !important;
	}
}

/* ==========================================================================
   Acordeón de móvil: YA NO es un panel flotante aparte. Se inserta
   (clonado desde un <template> oculto) DENTRO del propio elemento de
   menú marcado, en el menú hamburguesa REAL de Divi (#mobile_menu) — así
   abre, cierra y hace scroll como una parte más de ese cajón: nada de
   paneles fijos, posicionados por JS, que se quedan flotando sueltos
   cuando Divi cierra su menú. Solo aplica en móvil/tablet (<= 980px); en
   escritorio ese mismo elemento sigue abriendo el mega-menú de arriba.
   ========================================================================== */

/* El botón de flecha y el árbol clonado se insertan por JS en TODOS los
   elementos marcados que encuentre — también en la copia de escritorio
   (#top-menu), que no se usa para nada allí — así que, fuera de la
   media query de móvil, tienen que quedar ocultos SIEMPRE por defecto;
   si no, se colarían sueltos en la barra de escritorio. */
.cte-pm-mobile-toggle,
.cte-pm-inline-tree {
	display: none;
}

@media (max-width: 980px) {
	/* El propio <li> pasa a ser flex: el enlace real de Divi ocupa el
	   hueco disponible (y NAVEGA como cualquier enlace normal, tocarlo
	   ya no despliega nada) y el botón de flecha que insertamos por JS
	   (".cte-pm-mobile-toggle", ver cte-platforms-menu.js) se queda a la
	   derecha, como único disparador del desplegable — así se puede
	   tocar el nombre de la categoría para ir a ella, o la flecha para
	   ver sus subcategorías, igual que ya pasaba con las de dentro. */
	#mobile_menu .menu-item.cte-platforms-menu {
		display: flex !important;
		align-items: center !important;
		flex-wrap: wrap !important;
	}

	#mobile_menu .menu-item.cte-platforms-menu > a {
		flex: 1 1 auto;
	}

	.cte-pm-mobile-toggle {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none !important;
		border: none;
		padding: 13px 20px;
		cursor: pointer;
		color: inherit;
	}

	.cte-platforms-menu.cte-pm-mobile-open > .cte-pm-mobile-toggle .cte-acc-toggle__icon {
		transform: rotate(-135deg);
	}

	.cte-pm-inline-tree {
		flex-basis: 100%;
	}

	.cte-platforms-menu.cte-pm-mobile-open > .cte-pm-inline-tree {
		display: block !important;
	}
}

.cte-pm-inline-tree,
.cte-acc-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: both;
}

.cte-acc-item {
	border-bottom: 1px solid #eee;
	list-style: none !important;
}

.cte-acc-list .cte-acc-list {
	background: #fafafa;
	border-top: 1px solid #eee;
}

/* Fila de cada categoría/subcategoría dentro del acordeón: el NOMBRE es
   un enlace de verdad (navega a esa categoría al tocarlo) y la FLECHA es
   un botón aparte, solo para desplegar/plegar sus hijos — así se puede
   ir directo a una categoría sin tener que pasar por su desplegable. */
.cte-acc-row {
	display: flex;
	align-items: stretch;
}

.cte-acc-link {
	flex: 1 1 auto;
	padding: 13px 6px 13px 20px;
	font-size: 13.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #111 !important;
	text-decoration: none !important;
}

.cte-acc-toggle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none !important;
	border: none;
	padding: 13px 20px 13px 10px;
	cursor: pointer;
	color: #111;
}

.cte-acc-toggle__icon {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .15s ease;
}

.cte-acc-item.is-open > .cte-acc-row > .cte-acc-toggle .cte-acc-toggle__icon {
	transform: rotate(-135deg);
}

.cte-acc-panel {
	display: none;
	padding-left: 14px;
}

.cte-acc-item.is-open > .cte-acc-panel {
	display: block;
}

.cte-acc-products {
	list-style: none !important;
	margin: 0 !important;
	padding: 4px 0 8px !important;
}

.cte-acc-products a {
	display: block;
	padding: 9px 20px 9px 6px;
	text-decoration: none !important;
	font-size: 13px;
	color: #333 !important;
}

.cte-acc-products a:active {
	background: #f2f2f2;
}