/**
 * Ajustes que Elementor gratuito no puede expresar con sus controles.
 *
 * REGLA DEL PROYECTO: todo el diseño se controla desde Elementor. Este archivo
 * es la única excepción y recoge solo dos casos concretos, ambos documentados:
 *
 *   1. El formulario de MetForm. La versión gratuita solo expone en Elementor el
 *      color de fondo de cada campo; alto, borde, tipografía, color del
 *      placeholder, checkboxes, botón y mensajes de error no tienen control
 *      propio. Además MetForm fuerza en ellos la tipografía global `primary`
 *      (aquí, el titular de 48 px del hero), así que hay que redefinirla.
 *   2. El desenfoque del cristal de la tarjeta del hero (`backdrop-filter`),
 *      que en Elementor es una función de pago.
 *
 * Todos los valores se toman de las variables globales del kit (`--e-global-*`),
 * de modo que al cambiar la paleta o las tipografías en Site Settings, esto
 * cambia con ellas. La regla general es ajustar la especificidad en vez de
 * recurrir a `!important`; solo se usa donde no queda alternativa, y siempre
 * con el motivo escrito al lado (MetForm reinyecta su `<style>` al hidratar
 * el formulario y Elementor imprime algunos valores por widget con más
 * especificidad de la que se puede alcanzar desde aquí).
 */

/* ════════════════════════════════ 1 · FORMULARIO (MetForm) ═══════════ */

/* ---------------------------------------------------------------- campos */
.ma-form .mf-input-wrapper {
	margin: 0;
}

/* Las filas de dos campos («Tu nombre» + «Tus apellidos», «Teléfono» +
   «Ciudad») son un container de Elementor en fila; cada widget de MetForm
   dentro no crece (`flex: 0 1 auto` por defecto de Elementor), así que se
   queda con el ancho de su contenido en vez de repartirse la fila a partes
   iguales, dejando un hueco a la derecha frente a los campos de ancho
   completo. */
.ma-form > .e-con > .e-con.e-flex > .elementor-widget {
	flex: 1 1 0%;
	min-width: 0;
}

.ma-form input.mf-input:not([type="checkbox"]):not([type="radio"]),
.ma-form select.mf-input,
.ma-form textarea.mf-input {
	width: 100%;
	height: 54px;
	padding: 0 18px;
	background-color: var( --e-global-color-ma_blanco );
	border: 1px solid #D9D9D9;
	border-radius: 0;
	box-shadow: none;
	color: var( --e-global-color-secondary );
	font-family: var( --e-global-typography-ma_b_16_19g-font-family ), sans-serif;
	font-size: var( --e-global-typography-ma_b_16_19g-font-size );
	line-height: var( --e-global-typography-ma_b_16_19g-line-height );
	letter-spacing: var( --e-global-typography-ma_b_16_19g-letter-spacing );
}

.elementor .ma-form .mf-input-wrapper input.mf-input::placeholder,
.elementor .ma-form .mf-input-wrapper textarea.mf-input::placeholder,
.elementor .ma-form .mf-input-wrapper input.mf-input::-webkit-input-placeholder {
	color: var( --e-global-color-ma_txtapagado );
	opacity: 1;
	font-family: var( --e-global-typography-ma_b_16_19g-font-family ), sans-serif;
	font-size: var( --e-global-typography-ma_b_16_19g-font-size );
	font-weight: var( --e-global-typography-ma_b_16_19g-font-weight );
	line-height: var( --e-global-typography-ma_b_16_19g-line-height );
	letter-spacing: var( --e-global-typography-ma_b_16_19g-letter-spacing );
}

.ma-form input.mf-input:focus,
.ma-form select.mf-input:focus,
.ma-form textarea.mf-input:focus {
	border-color: var( --e-global-color-primary );
	outline: none;
}

/* ------------------------------------------------------------ checkboxes */
/* MetForm oculta el input real y dibuja la casilla con un icono de Font
   Awesome en `span::before`; aquí se sustituye por el círculo del diseño. */
.ma-form .mf-checkbox-option {
	padding-right: 0;
}

.ma-form .mf-checkbox-option label {
	display: flex;
	align-items: center;
	margin: 0;
	cursor: pointer;
}

.elementor .ma-form .mf-checkbox,
.elementor .ma-form .mf-checkbox-option input[type="checkbox"] + span {
	display: flex;
	align-items: center;
	color: var( --e-global-color-ma_blanco );
	font-family: var( --e-global-typography-text-font-family ), sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 19.42px;
	letter-spacing: -0.16px;
	text-transform: none;
}

.elementor .ma-form .mf-checkbox {
	display: block;
}

.elementor .ma-form .mf-checkbox-option input[type="checkbox"] + span::before {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	top: 0;
	margin-right: 12px;
	background-color: transparent;
	border: 1px solid var( --e-global-color-ma_blanco );
	border-radius: 50%;
	box-sizing: border-box;
}

.elementor .ma-form .mf-checkbox-option input[type="checkbox"]:checked + span::before {
	content: "";
	background-color: var( --e-global-color-primary );
	border-color: var( --e-global-color-primary );
	box-shadow: inset 0 0 0 4px var( --e-global-color-ma_blanco );
}

/* Variante para formularios sobre fondo claro (p. ej. Contacto, Programa): el
   texto y el círculo del checkbox heredan blanco de arriba porque ese estilo
   se pensó para el hero oscuro de Inicio; aquí se sobreescriben a oscuro con
   la misma especificidad. */
.elementor .ma-form-light.ma-form .mf-checkbox,
.elementor .ma-form-light.ma-form .mf-checkbox-option input[type="checkbox"] + span {
	color: var( --e-global-color-ma_superfosc );
}

.elementor .ma-form-light.ma-form .mf-checkbox-option input[type="checkbox"] + span::before {
	border-color: var( --e-global-color-ma_superfosc );
}

.elementor .ma-form-light.ma-form .mf-checkbox-option input[type="checkbox"]:checked + span::before {
	box-shadow: inset 0 0 0 4px var( --e-global-color-ma_blanco );
}

/* ----------------------------------------------------------------- botón */
.ma-form .mf-btn-wraper {
	display: block;
}

.ma-form button.metform-btn {
	width: 100%;
	height: 55px;
	padding: 17px 24px;
	background-color: var( --e-global-color-primary );
	border: none;
	border-radius: 0;
	font-family: var( --e-global-typography-ma_lbl_17-font-family ), sans-serif;
	font-size: var( --e-global-typography-ma_lbl_17-font-size );
	font-weight: var( --e-global-typography-ma_lbl_17-font-weight );
	line-height: var( --e-global-typography-ma_lbl_17-line-height );
	text-transform: uppercase;
	cursor: pointer;
}

/* El botón es plano: ni sombra ni cambio de color al pasar por encima.
   Hacen falta tres clases de especificidad y `!important` en el color para
   ganar a dos reglas ajenas que apuntan al mismo botón: la sombra azul que
   `.metform-btn` trae del CSS del plugin, y el texto blanco que el widget
   del formulario guarda por instancia
   (`.elementor-75 .elementor-element.elementor-element-{id} .metform-btn`),
   que además MetForm reinyecta al hidratar el formulario con Preact. */
.elementor .ma-form button.metform-btn,
.elementor .ma-form button.metform-btn:hover,
.elementor .ma-form button.metform-btn:focus,
.elementor .ma-form button.metform-btn:active {
	background-color: var( --e-global-color-primary );
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var( --e-global-color-ma_superfosc ) !important;
	transition: none;
}

/* --------------------------------------------------------------- errores */
/* Misma especificidad que las excepciones de arriba (`.elementor` + 2 clases)
   para ganar siempre a la tipografía `{{WRAPPER}} .mf-error-message` que
   MetForm imprime por widget con la global `primary` (48 px) por defecto. */
.elementor .ma-form .mf-error-message {
	display: block;
	margin-top: 6px;
	color: var( --e-global-color-primary );
	font-family: var( --e-global-typography-ma_b_13m-font-family ), sans-serif;
	font-size: var( --e-global-typography-ma_b_13m-font-size );
	font-weight: var( --e-global-typography-ma_b_13m-font-weight );
	line-height: var( --e-global-typography-ma_b_13m-line-height );
	letter-spacing: var( --e-global-typography-ma_b_13m-letter-spacing );
}

/* ═══════════════════════ 2 · CRISTAL DE LA TARJETA DEL HERO ═══════════ */
/* En Figma la tarjeta lleva un desenfoque de fondo de 50; en Elementor el
   control `backdrop-filter` es de pago. */
.ma-hero-form {
	backdrop-filter: blur( 25px );
	-webkit-backdrop-filter: blur( 25px );
}

/* ═══════════════════════════ 3 · MENÚ MÓVIL ══════════════════════════ */
/* Elementor gratuito no trae widget de menú, así que el plegado en tablet y
   móvil se resuelve aquí junto con `assets/js/menu-movil.js`. */
.ma-header .ma-menu-toggle {
	display: none;
	flex: 0 0 auto;
	width: 56px;
	align-self: stretch;
	padding: 0 18px;
	background: none;
	background-color: transparent;
	border: 0;
	border-left: 1px solid var( --e-global-color-ma_bordeosc );
	cursor: pointer;
}

.ma-header .ma-menu-toggle:hover,
.ma-header .ma-menu-toggle:focus {
	background-color: transparent;
}

.ma-menu-toggle span {
	display: block;
	height: 2px;
	margin: 4px 0;
	background-color: var( --e-global-color-ma_blanco );
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.ma-nav-abierto .ma-menu-toggle span:nth-child( 1 ) {
	transform: translateY( 6px ) rotate( 45deg );
}

.ma-nav-abierto .ma-menu-toggle span:nth-child( 2 ) {
	opacity: 0;
}

.ma-nav-abierto .ma-menu-toggle span:nth-child( 3 ) {
	transform: translateY( -6px ) rotate( -45deg );
}

@media ( max-width: 1024px ) {
	.ma-header .ma-menu-toggle {
		display: block;
	}

	.ma-header .ma-nav {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 99;
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		padding: 8px 0 16px;
		background-color: var( --e-global-color-ma_superfosc );
		border-bottom: 1px solid var( --e-global-color-ma_bordeosc );
	}

	.ma-header.ma-nav-abierto .ma-nav {
		display: flex;
	}

	/* Los separadores verticales del menú de escritorio no aplican aquí. */
	.ma-header .ma-nav-sep {
		display: none;
	}

	.ma-header .ma-nav > .e-con {
		width: 100%;
		justify-content: flex-start;
		padding: 12px 24px;
	}

	.ma-header {
		position: relative;
		flex-wrap: nowrap;
	}

	/* El bloque de contacto se pega a la derecha, junto a la hamburguesa. */
	.ma-header .ma-header-contacto {
		margin-left: auto;
	}
}

/* ═════════════════════ 4 · SALVAGUARDA DE DESBORDAMIENTO ═════════════ */
/* Los carruseles de categorías y programas llevan tarjetas de ancho fijo que
   en pantallas estrechas deben poder desplazarse en horizontal sin arrastrar
   con ellas el ancho de la página. */
.ma-scroll-x {
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.ma-scroll-x > .e-con {
	scroll-snap-align: start;
}

body {
	overflow-x: hidden;
}

/* ═════════════════════════ 5 · ACORDEÓN DE FAQ ═══════════════════════ */
/* El widget «Nested Accordion» no expone por JSON sus controles de estilo, así
   que el aspecto del bloque de preguntas frecuentes se define aquí: separadores
   de una sola línea, icono a la derecha y tipografías del kit. */
.ma-faq .e-n-accordion {
	display: flex;
	flex-direction: column;
}

.ma-faq .e-n-accordion-item {
	padding: 0 0 32px;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.32 );
	background: none;
	/* Elementor solo pone `overflow: hidden` en línea justo cuando arranca la
	   animación de apertura/cierre; en los primeros milisegundos de cada clic,
	   antes de que ese estilo en línea se aplique, el <details> está en su
	   `overflow: visible` de base y el texto de la respuesta se ve completo
	   por encima de la línea separadora. Fijarlo aquí de forma permanente
	   cierra esa ventana de carrera sin depender del temporizador de Elementor. */
	overflow: hidden;
}

.ma-faq .e-n-accordion-item:not( :first-child ) {
	padding-top: 32px;
}

.ma-faq .e-n-accordion-item:last-child {
	border-bottom: 0;
}

.ma-faq .e-n-accordion-item-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	list-style: none;
}

.ma-faq .e-n-accordion-item-title::-webkit-details-marker {
	display: none;
}

.ma-faq .e-n-accordion-item-title-header {
	flex: 1 1 auto;
}

.ma-faq .e-n-accordion-item-title-text {
	margin: 0;
	color: var( --e-global-color-ma_blanco );
	font-family: var( --e-global-typography-ma_h_18-font-family ), sans-serif;
	font-size: var( --e-global-typography-ma_h_18-font-size );
	font-weight: var( --e-global-typography-ma_h_18-font-weight );
	line-height: var( --e-global-typography-ma_h_18-line-height );
	letter-spacing: var( --e-global-typography-ma_h_18-letter-spacing );
}

.ma-faq .e-n-accordion-item-title-icon {
	flex: 0 0 24px;
	order: 2;
	width: 24px;
	height: 24px;
}

.ma-faq .e-n-accordion-item > .e-con {
	padding: 8px 0 0;
	background: none;
	border: 0;
	--border-style: none;
	--border-width: 0;
	/* Elementor anima la altura al abrir/cerrar con JS, pero solo pone
	   `overflow: hidden` en el <details> exterior; el texto de la respuesta
	   se ve completo desde el primer fotograma y se desborda por encima de la
	   línea separadora mientras la altura todavía está creciendo. Recortar
	   aquí también el contenido evita ese parpadeo.
	   `min-height: 0` es imprescindible: este contenedor es un flex item
	   dentro del <details> (también flex) y, por defecto, un flex item no se
	   encoge por debajo de la altura de su contenido aunque el padre tenga
	   `overflow: hidden` — por eso se seguía saliendo del recorte durante la
	   animación pese al `overflow: hidden` de aquí arriba. */
	overflow: hidden;
	min-height: 0;
}

/* ═════════════════ 6 · ACORDEÓN NUMERADO (Plan de estudios) ══════════ */
/* Misma limitación que el acordeón de FAQ (§5): el título del ítem es un
   campo de texto plano de Elementor, así que el número «01» se inserta como
   `<span class="ma-item-num">` dentro del propio título (permitido por
   `wp_kses_post`) y aquí se le da la tipografía Plus Jakarta Sans naranja
   del kit, distinta del resto del título.
   El widget no expone tarjeta/sombra/gap entre ítems, rotación del icono ni
   transición de apertura, así que se añaden aquí. A diferencia del FAQ (§5),
   que solo necesitaba suprimir la animación rota de Elementor, aquí sí se
   quiere una transición de altura visible: un <details> nativo no puede
   animar `open` con CSS puro, así que `ma-faq.js` calcula el `scrollHeight`
   real del contenido y lo fija como `max-height` en línea para que esta
   transición tenga un valor final contra el que animar (ver el JS). */
.ma-accordion-programa .e-n-accordion {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ma-accordion-programa .e-n-accordion-item {
	background: var( --e-global-color-ma_blanco, #fff );
	border: 1px solid rgba( 15, 15, 40, 0.06 );
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba( 15, 15, 40, 0.04 );
	overflow: hidden;
}

.ma-accordion-programa .e-n-accordion-item[open] {
	box-shadow: 0 4px 12px rgba( 15, 15, 40, 0.08 );
}

.ma-accordion-programa .e-n-accordion-item-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	cursor: pointer;
	list-style: none;
	border: 0;
}

.ma-accordion-programa .e-n-accordion-item-title::-webkit-details-marker {
	display: none;
}

.ma-accordion-programa .e-n-accordion-item-title-header {
	flex: 1 1 auto;
	order: 1;
}

.ma-accordion-programa .e-n-accordion-item-title-text {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0;
}

.ma-accordion-programa .ma-item-num {
	flex: 0 0 auto;
	color: var( --e-global-color-primary );
	font-family: var( --e-global-typography-ma_paso-font-family ), sans-serif;
	font-size: var( --e-global-typography-ma_paso-font-size );
	font-weight: var( --e-global-typography-ma_paso-font-weight );
	line-height: var( --e-global-typography-ma_paso-line-height );
	letter-spacing: var( --e-global-typography-ma_paso-letter-spacing );
}

.ma-accordion-programa .e-n-accordion-item-title-icon {
	flex: 0 0 28px;
	order: 2;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ma-accordion-programa .e-n-accordion-item-title-icon span {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s ease;
}

.ma-accordion-programa .e-n-accordion-item[open] .e-n-accordion-item-title-icon span {
	transform: rotate( 180deg );
}

.ma-accordion-programa .e-n-accordion-item > .e-con {
	padding: 0 28px 24px 64px;
	background: none;
	border: 0;
	--border-style: none;
	--border-width: 0;
	overflow: hidden;
	min-height: 0;
	/* La altura de arranque la fija `ma-faq.js` en línea (`max-height`) a
	   partir de `scrollHeight` porque un <details> nativo no admite animar su
	   propio `open` con CSS puro; ver el encabezado de este bloque para el
	   porqué de interceptar el toggle en JS. */
	max-height: 0;
	transition: max-height 0.3s ease, padding-top 0.3s ease;
}

.ma-accordion-programa .e-n-accordion-item[open] > .e-con {
	padding-top: 8px;
}

.ma-accordion-programa .e-n-accordion-item > .e-con p {
	margin: 0;
}

/* ═══════════ 7 · SANGRÍA DEL CARRUSEL DE CATEGORÍAS (full-bleed) ═════ */
/* El carrusel de categorías de portada debe alinearse a la izquierda con el
   resto del contenido boxed (1296px) pero sangrar sin corte hasta el borde
   derecho de la ventana, para que siempre asome parte de la siguiente
   tarjeta. Elementor no expone un control de padding en `calc()`, así que el
   margen izquierdo que sustituye al centrado automático del container boxed
   se calcula aquí a partir del ancho de contenido del kit. */
.ma-carrusel-categorias-wrap {
	padding-left: calc( ( 100% - 1296px ) / 2 );
	padding-right: 0;
}

@media ( max-width: 1024px ) {
	.ma-carrusel-categorias-wrap {
		padding-left: 32px;
	}
}

@media ( max-width: 767px ) {
	.ma-carrusel-categorias-wrap {
		padding-left: 20px;
	}
}

/* Arrastre con el ratón: el cursor cambia mientras se mantiene pulsado y se
   suprime la selección de texto de las tarjetas (ver `ma-carrusel-categorias.js`). */
.ma-carrusel-categorias {
	cursor: grab;
	scroll-snap-type: none;
}

.ma-carrusel-categorias.ma-arrastrando {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.ma-carrusel-categorias.ma-arrastrando .ma-card-categoria {
	pointer-events: none;
}

/* ═══════════════ 8 · FLECHAS DEL CARRUSEL DE PROGRAMAS ═══════════════ */
/* Las flechas «Anterior» / «Siguiente» son containers con un icono dentro;
   Elementor no expone un control de cursor, así que se fija aquí para que
   se vea claramente que son interactivas (ver `ma-carrusel-programas.js`). */
.ma-carrusel-anterior,
.ma-carrusel-siguiente {
	cursor: pointer;
}

/* ═══════ 9 · SUBRAYADO DE LOS ENLACES DE TEXTO (tarjetas Ecosistema) ══ */
/* Los enlaces «Conocer MA Compass», etc. son texto enriquecido dentro de un
   widget text-editor con color heredado (`style="color:inherit"`), así que
   Elementor no tiene un control de subrayado propio para ellos; el widget ya
   trae la clase `ma-enlace-subrayado` asignada, solo falta definirla. */
.ma-enlace-subrayado a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ═══ 9b · SUBRAYADO DEL VALOR (tarjetas «También puedes escribirnos») ═ */
/* El teléfono y el email de las tarjetas de contacto usan una tipografía
   global (`ma_h_24`); cuando un widget heading tiene su grupo de tipografía
   vinculado a un global, Elementor ignora el control `text_decoration` de
   ese mismo grupo aunque se guarde en `settings`, así que el subrayado no
   tiene control propio disponible aquí. */
.ma-valor-subrayado .elementor-heading-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ═══════ 10 · ACENTO NARANJA DENTRO DE UN TITULAR (Testimonios) ══════ */
/* El titular «Lo que dicen nuestros estudiantes» lleva una sola palabra en
   naranja; el widget heading solo permite un color por instancia, así que
   la palabra va envuelta en `<span class="ma-acento">` en el propio campo de
   texto (permitido por `wp_kses_post`, igual que `ma-item-num` en §6). */
.ma-acento {
	color: var( --e-global-color-primary );
}

/* ═══════ 11 · CHECKBOX DEL FORMULARIO DE CONTACTO (MetForm) ══════════ */
/* MetForm pinta sus checkboxes con un icono Font Awesome azul (#5f7bff) sin
   fondo ni borde propio; en el diseño son cuadrados blancos con borde sutil
   y check en el naranja de marca al activarse. Se scopea a `.ma-form-light`
   (clase ya asignada al widget shortcode del formulario de Contacto) para no
   afectar otros formularios de MetForm en el sitio. El `!important` es
   necesario: aunque este selector es más específico que el de
   `metform/public/assets/css/style.css`, MetForm reinyecta su propio
   `<style>` al hidratar el formulario (Preact) después de que esta hoja ya
   cargó, así que sin `!important` esa reinyección tardía vuelve a ganar. */
.ma-form-light .mf-checkbox-option input[type="checkbox"] + span::before {
	display: inline-block !important;
	box-sizing: border-box !important;
	width: 20px !important;
	height: 20px !important;
	line-height: 18px !important;
	text-align: center !important;
	color: transparent !important;
	background-color: var( --e-global-color-ma_blanco ) !important;
	border: 1px solid rgba( 49, 37, 76, 0.15 ) !important;
	border-radius: 100px !important;
	top: 4px !important;
}

.ma-form-light .mf-checkbox-option input[type="checkbox"]:checked + span::before {
	color: var( --e-global-color-primary ) !important;
}

/* ═══ 12 · MEGA-MENÚ «PROGRAMAS FORMATIVOS» (cabecera) ═════════════════ */
/* Elementor gratuito no incluye mega-menú ni widget de menú con submenús;
   el desplegable de dos paneles (categorías a la izquierda, cursos a la
   derecha) es un container más dentro de «Nav — Programas Formativos», y
   aquí se posiciona en absoluto y se muestra al pasar el ratón. En tablet y
   móvil se abre con un toque en vez de hover (ver `ma-menu-programas.js`),
   porque no hay hover real en pantallas táctiles. */
.ma-nav-item-dropdown {
	position: relative;
}

.ma-submenu-programas {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	display: none;
	width: max-content;
	max-width: calc( 100vw - 40px );
}

.ma-nav-item-dropdown:hover .ma-submenu-programas,
.ma-nav-item-dropdown.ma-submenu-abierto .ma-submenu-programas {
	display: flex;
}

/* Subrayado naranja que marca la pestaña mientras el desplegable está
   abierto. Es un pseudo-elemento y no un borde del propio container para que
   quede pegado al borde inferior de la cabecera, por encima del desplegable,
   sin alterar la altura de la pestaña ni descuadrar los separadores. Las dos
   variables las calcula `ma-menu-programas.js` para que el trazo cubra toda
   la celda entre separadores, no solo el ancho del texto. */
.ma-nav-item-dropdown::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: var( --ma-tab-offset-izq, 0 );
	z-index: 101;
	display: none;
	width: var( --ma-tab-ancho, 100% );
	height: 3px;
	background-color: var( --e-global-color-primary );
}

.ma-nav-item-dropdown:hover::after,
.ma-nav-item-dropdown.ma-submenu-abierto::after {
	display: block;
}

.ma-submenu-cat {
	cursor: pointer;
	transition: background-color 0.15s ease;
}

/* La columna de categorías es blanca y solo la fila activa (o la que tiene
   el ratón encima) se destaca en gris; el panel de cursos de la derecha se
   corresponde siempre con esa fila. */
.ma-submenu-cat:hover,
.ma-submenu-cat-activa {
	background-color: #F2F2F2;
}

.ma-submenu-cat-chevron {
	opacity: 0.45;
}

.ma-submenu-cat-activa .ma-submenu-cat-chevron {
	opacity: 1;
}

/* El título del panel y los cursos van en negrita, pero el kit no tiene una
   variante bold de `ma_lbl_13`: la única global en 700 es `ma_eyb_14b`, un
   estilo de antetítulo con 1.68px de `letter-spacing` que en una lista se ve
   demasiado abierto. Se toma entonces `ma_lbl_13` (con su tracking correcto)
   y solo se sube el peso aquí. */
/* Elementor imprime el peso por widget con un selector de tres clases
   (`.elementor-63 .elementor-element.elementor-element-{id}
   .elementor-heading-title`), así que aquí hacen falta otras tres para
   ganarle y subir solo el peso sin tocar el resto del estilo global. */
.elementor .ma-submenu-panel .ma-submenu-panel-titulo .elementor-heading-title,
.elementor .ma-submenu-panel .ma-submenu-curso-txt .elementor-heading-title {
	font-weight: 700;
}

/* La barra naranja acompaña al título, así que se ciñe al ancho de ese texto
   (cambia con cada categoría) en vez de ocupar toda la columna. El widget
   divider de Elementor además reserva un hueco vertical propio que aquí
   sobra, porque la barra va pegada bajo el título. */
.ma-submenu-panel .ma-submenu-panel-titulo,
.ma-submenu-panel .ma-submenu-barra {
	align-self: flex-start;
	width: auto;
}

.ma-submenu-barra .elementor-divider {
	padding-block: 0;
}

.ma-submenu-panels {
	position: relative;
	width: 640px;
	max-width: calc( 100vw - 400px );
}

/* Elementor imprime el `display` de cada container como `--display` en una
   regla `.elementor-element.elementor-element-{id}`, con más especificidad
   que una sola clase; sin `!important` esa regla siempre gana y los cinco
   paneles se ven apilados a la vez en vez de solo el activo. Qué panel está
   visible lo decide únicamente la clase `.ma-submenu-panel-visible`, que
   `ma-menu-programas.js` pone en «Cursos técnicos» también al cargar la
   página, no solo al pasar el ratón por una categoría. */
.ma-submenu-panel {
	display: none !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-y: auto;
}

.ma-submenu-panel.ma-submenu-panel-visible {
	display: flex !important;
	position: static;
}

@media ( max-width: 1024px ) {
	.ma-submenu-programas {
		position: static;
		flex-direction: column;
		width: 100%;
		max-width: none;
		box-shadow: none !important;
	}

	.ma-submenu-panels {
		width: 100%;
		max-width: none;
	}

	.ma-submenu-panel.ma-submenu-panel-visible {
		position: static !important;
		width: 100%;
	}
}

/* Viñeta de cada curso en el panel derecho: Elementor no deja bajar un
   container de 20×20px (mínimo que aplica también en frontend, no solo en
   el editor, para que el elemento siga siendo seleccionable), así que el
   punto de 6px de la maqueta se consigue escalando ese contenedor mínimo.
   `transform` no reduce el espacio que ocupa en el flujo flex, así que se
   compensa con márgenes negativos para que el texto no quede separado del
   punto por el hueco fantasma de los 14px sobrantes. El `width` fijo es
   necesario en móvil: ahí Elementor envuelve los hijos del container
   (`--flex-wrap-mobile: wrap`) y sin él la viñeta se estira a todo el ancho
   y se ve como una raya sobre el texto en vez de un punto a su lado. */
.ma-submenu-bullet-wrap {
	flex: 0 0 20px !important;
	width: 20px !important;
	margin: -7px !important;
	transform: scale( 0.3 );
}

/* En móvil el panel de cursos apila los hijos; cada curso debe seguir siendo
   una fila (punto + texto), no una columna. */
@media ( max-width: 767px ) {
	.ma-submenu-panel .e-con.e-flex > .e-con.e-flex {
		flex-wrap: nowrap;
	}
}