/**
 * 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 );
}

/* La foto que acompaña al formulario de Contacto ya no tiene ancho fijo:
   crece hasta el borde derecho del bloque blanco. Para que al ensancharse
   recorte en vez de deformarse hace falta `object-fit`, y Elementor solo
   aplica su control cuando el widget lleva además una altura fija, que aquí
   no interesa porque el alto lo marca la columna del formulario. */
.ma-foto-formulario img {
	height: 100%;
	object-fit: cover;
}

.ma-foto-formulario {
	align-self: stretch;
}

/* ═══════════════════════ 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;
	}

	/* La pestaña con desplegable contiene dos bloques (el enlace y el
	   submenú), así que se apila en vez de ponerlos en fila, y suelta el
	   `width: fit-content` que Elementor le da a partir de 768px. El
	   desplegable lleva sus propios márgenes laterales, de ahí que aquí el
	   padding horizontal sea 0. */
	.ma-header .ma-nav > .e-con.ma-nav-item-dropdown {
		flex-direction: column;
		align-items: stretch;
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0;
		padding-right: 0;
	}

	/* El enlace «Programas formativos» recupera el sangrado de los demás. */
	.ma-nav-item-dropdown > .ma-nav-link {
		padding-left: 24px;
		padding-right: 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 );
	overflow: hidden;
}

.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 · CARRUSEL DE 5 CATEGORÍAS ═════════════════════ */
/* Las tarjetas de categoría son de ancho fijo por Elementor (359px en
   escritorio, 280px en tablet, 100% en móvil vía la regla §8) y con 5 no
   caben en la caja de 1296px: la fila se deja boxed a ambos lados, igual que
   el resto del contenido, y el carril interior desplaza el resto por scroll
   (arrastre y autoplay los da `ma-carrusel-categorias.js`). */
.ma-carrusel-categorias-wrap {
	padding-left: calc( ( 100% - 1296px ) / 2 );
	padding-right: calc( ( 100% - 1296px ) / 2 );
}

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

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

/* La fila viene con `align-items: flex-end` (Elementor), así que el bloque de
   texto se alineaba por su base: como las descripciones no tienen el mismo
   número de líneas, cada título arrancaba a una altura distinta y la fila de
   tarjetas se veía descuadrada. Alineando arriba, todos los títulos empiezan
   a la misma altura y las descripciones caen debajo. */
.ma-carrusel-categorias .ma-card-categoria > .e-con {
	align-items: flex-start !important;
}

/* Las tarjetas ya tienen la misma altura (se estiran a la más alta), pero el
   bloque de texto ocupa solo lo que necesita; se estira para que la flecha
   quede al pie de la tarjeta y no flotando bajo un texto corto. */
.ma-carrusel-categorias .ma-card-categoria > .e-con > .e-con:first-child {
	align-self: stretch;
}

/* La flecha es la excepción: con la fila alineada arriba (regla anterior) se
   iría junto al título si no se ancla explícitamente al pie de la tarjeta. */
.ma-carrusel-categorias .ma-card-categoria > .e-con > .e-con:last-child {
	align-self: flex-end;
}

/* Red de seguridad por si algún día entra una categoría con una palabra más
   larga que la tarjeta: que parta antes de desbordarla. */
.ma-carrusel-categorias .ma-card-categoria h3,
.ma-carrusel-categorias .ma-card-categoria p {
	overflow-wrap: break-word;
}

/* ═══════════════ 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;
}

/* La flecha «Anterior» es un botón fantasma (sin relleno, borde al 12% de
   opacidad) con un trazo fino dentro: contra el fondo claro de la página se
   lee como un botón desactivado, muy por debajo del peso visual del botón
   «Siguiente» (relleno sólido). Se le da aquí un fondo propio para que se
   perciba como una superficie, y se fija el color del icono sin depender de
   que Elementor imprima su clase de estado (`elementor-view-default`), que
   solo alcanza (0,4,0) de especificidad: encadenando las clases genéricas
   que el widget Icono ya imprime siempre se llega a (0,5,0) sin `!important`. */
.ma-carrusel-anterior {
	background-color: var( --e-global-color-ma_fondoclaro );
}

.ma-carrusel-anterior .elementor-widget-icon .elementor-icon-wrapper .elementor-icon,
.ma-carrusel-anterior .elementor-widget-icon .elementor-icon-wrapper .elementor-icon svg {
	color: var( --e-global-color-secondary );
	fill: var( --e-global-color-secondary );
}

/* En móvil Elementor fuerza el ajuste de línea en TODO container en fila:
   `.e-con.e-flex { --flex-wrap: var(--flex-wrap-mobile) }` dentro de su
   media query de 767px, y `--flex-wrap-mobile` vale `wrap` de fábrica para
   `flex-direction: row` (lo fija el propio control de dirección, no es algo
   que se pueda apagar desde el panel). El carril del carrusel se partía en
   cuatro filas y las tarjetas salían apiladas una debajo de otra en vez de
   deslizarse: las flechas seguían ahí pero no había nada que desplazar.
   Se devuelve el `nowrap` sobre la variable —igual de específico que la
   regla de Elementor (0,2,0) y posterior en la cascada, así que gana sin
   `!important`— y se da a cada tarjeta el ancho completo del carril para
   que cada clic en la flecha avance exactamente un curso (el paso que
   calcula `ma-carrusel-programas.js` es ancho de tarjeta + hueco). */
@media ( max-width: 767px ) {
	/* Aplica a toda pista de arrastre horizontal: si se le permite el salto
	   de línea deja de ser un carril y pasa a ser una parrilla, que es justo
	   lo contrario de lo que `.ma-scroll-x` existe para hacer. */
	.e-con.ma-scroll-x {
		--flex-wrap: nowrap;
	}

	/* El ancho fijo de la tarjeta (306px) lo emite Elementor como variable
	   `--width` por id de elemento; aquí se sobrescriben las propiedades
	   finales, que viven en `.e-con` (0,1,0) y por tanto ceden ante este
	   selector (0,2,0). `max-width` es imprescindible: sin él seguiría
	   recortando a `min(100%, 306px)`.

	   Ojo: esto vale para el carrusel de programas, que ocupa el ancho
	   completo del móvil. El de categorías NO debe entrar aquí: sus tarjetas
	   se desplazan dentro del `.ma-testi-viewport` que crea el script de
	   puntos, y un 100% se resuelve contra ese visor —no contra la pantalla—
	   estirándolas muy por encima del ancho real disponible. */
	.ma-carrusel-programas > .e-con {
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
	}
}

/* ═══════ 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;
}

/* El widget Heading no tiene tab de estado "hover" en Elementor gratuito, así
   que el color al pasar el ratón sobre cada curso del desplegable no se puede
   fijar desde el panel de estilos y se resuelve aquí. El contenedor del item
   ya es el propio enlace (`html_tag: a`), así que basta con su `:hover`. */
.elementor .ma-submenu-panel a:hover .ma-submenu-curso-txt .elementor-heading-title {
	color: var( --e-global-color-primary );
}

.ma-submenu-panel .ma-submenu-curso-txt .elementor-heading-title {
	transition: color 0.15s ease;
}

/* 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;
}

/* ── Tablet y móvil ──────────────────────────────────────────────────────
   El desplegable deja de flotar sobre la página y pasa a ser una sección
   más dentro del menú plegable: las categorías se apilan sobre el panel de
   cursos, ambos en una sola columna a todo el ancho.

   Las medidas del desplegable están pensadas para escritorio y Elementor
   las imprime sin variante móvil (no se editaron esos controles en el
   editor), así que hay que neutralizarlas aquí. Todas las reglas de
   Elementor llevan tres clases, de ahí los `!important` en las que
   sobreescriben una medida suya. */
@media ( max-width: 1024px ) {
	/* ── De tarjeta flotante a banda a sangre ──────────────────────────
	   En escritorio el desplegable es una tarjeta que cuelga de la pestaña.
	   Dentro del menú plegado esa misma tarjeta —con márgenes laterales y
	   sombra— se leía como un recuadro pequeño y apretado contra el texto de
	   «Programas formativos». Aquí ocupa todo el ancho del menú y se despega
	   de la pestaña, de modo que se lee como una sección que se abre y no
	   como una caja suelta.

	   Conserva el fondo blanco a propósito: el menú plegado es oscuro y los
	   chevrones de cada categoría son SVG de color fijo
	   (`icon-arrow-forward-16.svg`), que sobre fondo oscuro desaparecerían y
	   no se pueden recolorear desde CSS. */
	.ma-submenu-programas {
		position: static;
		flex-direction: column;
		width: auto;
		max-width: none;
		margin: 12px 0 4px;
		box-shadow: none !important;
	}

	/* La columna de categorías es de 360px fijos y sin encoger: en cualquier
	   móvil más estrecho desbordaba la pantalla y arrastraba con ella el
	   ancho de la cabecera. Apilada no necesita ancho propio. */
	.ma-submenu-programas > .e-con:first-child {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
		padding: 8px 0 !important;
	}

	/* Elementor envuelve los hijos de todos estos containers en móvil
	   (`--flex-wrap-mobile: wrap`); en la fila de categoría eso mandaba el
	   chevron a una segunda línea, debajo del texto.

	   Los 24px laterales alinean el nombre de cada categoría con el resto de
	   enlaces del menú (`.ma-nav > .e-con` usa ese mismo sangrado), que es lo
	   que hace que la banda no parezca un bloque ajeno pegado encima. */
	.ma-submenu-cat {
		position: relative;
		flex-wrap: nowrap !important;
		align-items: center !important;
		padding: 16px 24px !important;
	}

	/* Centrado vertical del nombre y de la flecha dentro de la fila.
	   Los dos son widgets de Elementor, y un widget es un bloque: su caja
	   crece con el `line-height` del texto (el nombre) o con el hueco que el
	   widget de imagen deja bajo el `img`, que es inline. Con `align-items`
	   solo se centran esas cajas, no lo que hay dentro, así que uno quedaba
	   unos píxeles más alto que el otro. Pasándolos a flex centrado y
	   quitando el `line-height` heredado, ambos se alinean por su centro
	   óptico y la fila queda simétrica arriba y abajo. */
	.ma-submenu-cat > .elementor-widget-heading,
	.ma-submenu-cat > .ma-submenu-cat-chevron {
		display: flex;
		align-items: center;
		margin: 0 !important;
	}

	.ma-submenu-cat > .elementor-widget-heading .elementor-heading-title {
		line-height: 1.25;
	}

	.ma-submenu-cat > .ma-submenu-cat-chevron img {
		display: block;
	}

	/* Una línea entre categorías: apiladas y sin el panel al lado, sin ellas
	   la lista se lee como un bloque único. */
	.ma-submenu-cat + .ma-submenu-cat {
		border-top: 1px solid var( --e-global-color-ma_bordeclaro );
	}

	/* Apilado, la categoría abierta y su lista de cursos quedan una encima de
	   otra y hay que dejar claro que van juntas. El gris de fondo es el mismo
	   que ya usa la fila activa en escritorio, así que fila y panel forman un
	   solo bloque continuo, y la barra naranja de la izquierda marca dónde
	   empieza. Sin esto, con el chevron como única señal, no se distinguía qué
	   categoría había abierto la lista de abajo. */
	.ma-submenu-cat-activa::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 3px;
		background-color: var( --e-global-color-primary );
	}

	/* El título del panel repite el nombre de la categoría, que aquí queda
	   justo encima y resaltada; en escritorio no se solapan porque están en
	   columnas distintas. */
	.ma-submenu-panel .ma-submenu-panel-titulo,
	.ma-submenu-panel .ma-submenu-barra {
		display: none !important;
	}

	/* El subrayado de la pestaña se ancla al borde inferior del ítem, que
	   aquí incluye el desplegable entero: quedaría como una raya suelta
	   bajo la lista de cursos. En el menú plegado la pestaña abierta ya se
	   distingue por el desplegable que tiene debajo. */
	.ma-nav-item-dropdown:hover::after,
	.ma-nav-item-dropdown.ma-submenu-abierto::after {
		display: none;
	}

	/* Sin hover real, el desplegable solo debe abrirse con un toque
	   (`.ma-submenu-abierto`); si no, en táctil el primer toque en la
	   pestaña disparaba el hover y lo dejaba abierto sin poder cerrarlo. */
	.ma-nav-item-dropdown:hover .ma-submenu-programas {
		display: none;
	}

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

	/* La flecha de la pestaña apunta hacia arriba mientras está desplegada:
	   es la única señal de estado que queda tras quitar el subrayado. */
	.ma-nav-item-dropdown .elementor-button-icon svg {
		transition: transform 0.2s ease;
	}

	.ma-nav-item-dropdown.ma-submenu-abierto .elementor-button-icon svg {
		transform: rotate( 180deg );
	}

	/* En escritorio el chevron de cada categoría señala al panel de la
	   derecha; apilado, el panel cae debajo, así que apunta hacia abajo. */
	.ma-submenu-cat-chevron {
		transition: transform 0.2s ease;
	}

	.ma-submenu-cat-activa .ma-submenu-cat-chevron {
		transform: rotate( 90deg );
	}

	.ma-submenu-panels {
		width: 100%;
		max-width: none;
		/* Borde que separaba las dos columnas cuando estaban una al lado de
		   la otra; apiladas, la línea corresponde arriba, no al costado. */
		border-width: 1px 0 0 0 !important;
		border-color: var( --e-global-color-ma_bordeclaro ) !important;
	}

	/* Apilado, el panel se dimensiona por su contenido: la altura del 100%
	   y el scroll propio son del panel absoluto de escritorio.

	   El `gap: 0` arregla el hueco vacío que se veía entre las categorías y
	   los cursos: el bloque que envuelve el título del panel y su barra
	   naranja sigue en el DOM aunque los dos estén ocultos arriba, y con el
	   `gap` de 24px del panel ese bloque de altura cero seguía separando. El
	   aire lo pone ahora el padding, que es el que se puede medir.

	   El fondo gris es el mismo de la categoría activa, para que la lista se
	   lea como continuación de la fila resaltada. */
	.ma-submenu-panel.ma-submenu-panel-visible {
		position: static !important;
		width: 100%;
		height: auto;
		overflow-y: visible;
		gap: 0 !important;
		padding: 18px 24px 22px !important;
		background-color: #F2F2F2;
	}
}

/* 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;
	}
}

/* ── Solo teléfono: cada lista de cursos bajo su propia categoría ────────
   Hasta aquí el desplegable son dos bloques hermanos: primero las cinco
   categorías y después el panel de cursos. Eso hacía que la lista saliera
   siempre al final, lejos de la categoría que se acababa de tocar: en una
   pantalla estrecha hay que bajar la vista hasta el fondo y se pierde la
   relación entre la categoría y sus cursos.

   El marcado lo genera Elementor y no se puede reordenar desde el editor,
   así que el intercalado se hace por CSS: los dos envoltorios pasan a
   `display: contents`, con lo que dejan de pintar caja y sus hijos ascienden
   a hijos directos del desplegable, que ya es flex en columna. Una vez en el
   mismo contenedor se emparejan con `order`: la categoría N ocupa la
   posición 2N-1 y su panel la 2N, de modo que cada lista queda justo debajo
   de su categoría.

   Emparejar por posición es válido porque el marcado imprime categorías y
   paneles en el mismo orden (comprobado: cursos-tecnicos,
   certificados-profesionales, ciclos-formativos, cursos-universitarios,
   master en ambos bloques). Se cubren ocho pares —hoy hay cinco
   categorías— para que añadir alguna en Elementor no obligue a volver aquí.

   En tablet no se aplica a propósito: allí hay ancho de sobra, la lista al
   final no estorba y el usuario pidió el cambio solo en teléfono. */
@media ( max-width: 767px ) {
	.ma-submenu-programas > .e-con:first-child,
	.ma-submenu-programas > .ma-submenu-panels {
		display: contents !important;
	}

	/* El desplegable arranca y termina a ras de las filas: cada categoría ya
	   trae sus 16px arriba y abajo, así que cualquier relleno extra aquí solo
	   añade franjas blancas sueltas entre la última categoría y el borde.

	   Importante: este relleno NO puede darse por las variables de Elementor
	   (`--padding-top`/`--padding-bottom`). Las custom properties heredan, y
	   los 22 containers de viñeta de los cursos no declaran las suyas: se
	   comerían el valor y cada punto de la lista crecería por dentro. Va como
	   `padding` normal, que no se hereda.

	   El `gap: 0` es la otra fuente de blanco: con los envoltorios en
	   `display: contents`, categorías y paneles pasan a ser hijos flex
	   directos del desplegable y les aplica el `gap` de ESTE contenedor, no
	   el de sus envoltorios de antes. Se fuerza a cero para que cada lista
	   quede pegada a su categoría. */
	.ma-submenu-programas {
		gap: 0 !important;
		padding: 0 !important;
	}

	.ma-submenu-cat:nth-child( 1 ) { order: 1; }
	.ma-submenu-panel:nth-child( 1 ) { order: 2; }
	.ma-submenu-cat:nth-child( 2 ) { order: 3; }
	.ma-submenu-panel:nth-child( 2 ) { order: 4; }
	.ma-submenu-cat:nth-child( 3 ) { order: 5; }
	.ma-submenu-panel:nth-child( 3 ) { order: 6; }
	.ma-submenu-cat:nth-child( 4 ) { order: 7; }
	.ma-submenu-panel:nth-child( 4 ) { order: 8; }
	.ma-submenu-cat:nth-child( 5 ) { order: 9; }
	.ma-submenu-panel:nth-child( 5 ) { order: 10; }
	.ma-submenu-cat:nth-child( 6 ) { order: 11; }
	.ma-submenu-panel:nth-child( 6 ) { order: 12; }
	.ma-submenu-cat:nth-child( 7 ) { order: 13; }
	.ma-submenu-panel:nth-child( 7 ) { order: 14; }
	.ma-submenu-cat:nth-child( 8 ) { order: 15; }
	.ma-submenu-panel:nth-child( 8 ) { order: 16; }

	/* La línea que antes separaba el bloque de categorías del de cursos ya no
	   existe: al pasar los envoltorios a `display: contents` desaparece su
	   caja y con ella su borde. Ahora la pone cada panel sobre sí mismo, que
	   es donde cae el corte entre una categoría y su lista.

	   No hay riesgo de línea doble: el borde superior de la categoría
	   siguiente (`.ma-submenu-cat + .ma-submenu-cat`) marca el final del
	   panel, y el del panel marca el final de la categoría abierta, así que
	   cada frontera lleva exactamente un filete de 1px. */
	.ma-submenu-panel.ma-submenu-panel-visible {
		border-top: 1px solid var( --e-global-color-ma_bordeclaro );
	}
}

/* ═══════ 13 · CARRUSEL DE TESTIMONIOS («Historias») ═══════════════════ */
/* Elementor gratuito no incluye widget de carrusel, así que la rotación de
   las tarjetas de testimonio la lleva `ma-carrusel-testimonios.js` (ver el
   encabezado de ese archivo). El script envuelve `.ma-testi-pista` en un
   `.ma-testi-viewport` recortado al ancho exacto de las tres tarjetas
   (3 × 306px + 2 × 24px de espacio entre ellas = 966px) y desliza la pista
   con `transform: translateX()`: la tarjeta que sale se desplaza fuera de
   la vista por la izquierda mientras un clon temporal de esa misma tarjeta
   entra por la derecha; terminada la animación el clon se descarta y la
   tarjeta real pasa al final del orden del DOM. Así se mueve una sola
   tarjeta por vuelta, nunca las tres a la vez. Lo que no puede resolverse
   con los controles nativos y baja aquí es:

   1. El recorte y ancho fijo del `.ma-testi-viewport` que crea el script
      (solo en escritorio; en tablet/móvil las tarjetas se apilan y no hay
      nada que recortar).
   2. El recorte circular de los avatares cuando la foto no es cuadrada:
      `object-fit` sí es nativo, pero el radio necesita acompañarlo de
      `overflow` en el envoltorio que Elementor pone alrededor del `img`.
   3. El estado activo de los puntos: son containers, y Elementor no expone
      un control de «activo» para ellos. */

/* El visor que crea `ma-carrusel-testimonios.js` necesita recortar su
   contenido en TODOS los anchos, no solo en escritorio: en tablet/móvil la
   pista interior (`.ma-scroll-x`) sigue teniendo tarjetas de ancho fijo que
   no caben todas, y sin este `overflow: hidden` un `<div>` sin clases de
   Elementor no se recorta solo — crece hasta el ancho de su contenido y ese
   desbordamiento se propaga a la página entera (confirmado en «Espacios
   preparados» e «Historias» antes de esta regla: desbordaba en móvil aunque
   la pista, ya `.ma-scroll-x`, sí sabía desplazarse). */
.ma-testi-viewport {
	overflow: hidden;
	max-width: 100%;
}

@media ( min-width: 1025px ) {
	/* El ancho lo fija `ma-carrusel-testimonios.js` en línea, medido sobre
	   las propias tarjetas (tantas como marque `VISIBLES`): así el mismo
	   componente vale para «Historias» (306px, 3 visibles), «Espacios
	   preparados» (416px, 3 visibles) y «Categorías» (306px, 4 visibles)
	   sin una medida mágica escrita aquí. Solo en escritorio, porque es el
	   único modo donde el visor tiene un ancho propio menor que el de la
	   caja (en tablet/móvil ocupa el 100% disponible, de ahí que el
	   centrado con márgenes automáticos no haga falta ahí). */
	.ma-testi-viewport {
		/* `margin: auto` en un hijo flex se resuelve consumiendo el espacio
		   libre del eje: centra el visor pase lo que pase con el
		   `align-items` del padre (un `<div>` sin clases de Elementor, así
		   que no hereda el `margin: auto` que Elementor sí pone en sus
		   propios `.e-con`). Más fiable que depender de la cascada. */
		margin-left: auto;
		margin-right: auto;
	}

	/* Una pista que además es `.ma-scroll-x` (arrastre horizontal en móvil)
	   tendría aquí su propia barra de desplazamiento peleando con el
	   `translateX` del carrusel: dentro del visor el recorte ya lo hace el
	   padre, así que se le devuelve el desbordamiento visible. En tablet y
	   móvil el visor no recorta a una medida propia (ocupa el 100%), así
	   que ahí manda el `overflow-x: auto` nativo de `.ma-scroll-x`: es el
	   modo «scroll», con el dedo del usuario en vez de `transform`. */
	.ma-testi-viewport > .ma-scroll-x {
		overflow-x: visible;
		scroll-snap-type: none;
	}
}

.ma-testi-pista {
	will-change: transform;
}

@media ( prefers-reduced-motion: reduce ) {
	.ma-testi-pista {
		transition: none !important;
	}
}

/* Recorte circular del avatar. El radio y el tamaño ya viajan en los
   controles nativos (`image_border_radius`, `width`/`height`), pero el
   widget es un hijo flex de la fila del autor y con nombres largos el
   navegador lo encoge: los 40px se quedaban en 33-37px de ancho y el
   círculo salía ovalado. `flex-shrink: 0` lo bloquea. */
.ma-testi-avatar {
	flex-shrink: 0;
}

.ma-testi-avatar img {
	border-radius: 50%;
	overflow: hidden;
}

/* Los puntos son containers de Elementor: sin control de estado activo. El
   color inactivo lo pone Elementor; aquí solo se marca el activo y el
   afinado de interacción. */
.ma-testi-punto {
	cursor: pointer;
	transition: background-color 0.3s ease;
}

/* El punto activo es naranja sobre los fondos oscuros («Historias») y azul
   de marca sobre los claros («Espacios preparados»). En vez de duplicar la
   regla de estado por sección, el color se toma de una variable que cada
   sección puede redefinir con `ma-testi-claro`. */
.elementor-element.ma-testi-punto.ma-testi-punto-activo {
	background-color: var( --ma-punto-activo, var( --e-global-color-primary ) );
}

.ma-testi-claro {
	--ma-punto-activo: var( --e-global-color-secondary );
}

.ma-testi-punto:focus-visible {
	outline: 2px solid var( --e-global-color-primary );
	outline-offset: 3px;
}

/* Sin el carrusel activo (JS desactivado) los puntos no pretenden ser
   interactivos. La marca se busca en la sección, no en el carril: los puntos
   son hermanos del carril, así que colgar el selector de él no casaba nunca. */
.ma-testimonios:not( .ma-testi-listo ) .ma-testi-punto {
	cursor: default;
}

@media ( prefers-reduced-motion: reduce ) {
	.ma-testi-punto {
		transition: none;
	}
}

/* ═══════ 14 · FOTO DEL FORMULARIO DE CONTACTO A LA ALTURA DEL FORM ════ */
/* En la página «Contacto», el bloque «Glass» pone en fila el formulario y
   una foto (`align-items: stretch`, para que la foto llene lo que mida el
   formulario). El problema: una `<img>` con `object-fit: cover` pero sin
   `position: absolute` sigue participando en el cálculo de tamaño de la fila
   flex con su ratio natural (aquí un recorte muy vertical, 1440×2090). Aunque
   el CSS le ponga `height: 100%`, Chrome usa ese ratio para el «hypothetical
   cross size» del flex item, así que la foto —no el formulario— era quien
   determinaba la altura de toda la fila (~1057px en vez de los ~737px reales
   del formulario), dejando el botón «Enviar información» muy por debajo de
   donde debía estar. Verificado con `getBoundingClientRect()`: solo sacar la
   `<img>` del flujo normal (`position: absolute` dentro de un wrapper
   `position: relative`) hace que la fila mida lo que pide el formulario.

   El wrapper del widget ya recibe su altura por `align-items: stretch` del
   padre (igual que antes); no hace falta —y de hecho rompe el cálculo—
   ponerle además `height: 100%` explícito, porque el padre flex no tiene una
   altura definida por adelantado y ese porcentaje se resuelve contra nada.
   Basta con darle `position: relative` para que la foto absoluta tenga
   dónde anclarse. */
.ma-foto-formulario {
	position: relative;
	overflow: hidden;
}

.ma-foto-formulario img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Reparto 50/50 con el formulario en desktop. El control de ancho de este
   widget de imagen en Elementor apunta siempre a la propia `<img>`, no a su
   wrapper — y aquí la `<img>` ya está fijada a `width: 100%` (regla de
   arriba, necesaria para el recorte absoluto). Así que el 50% real se fija
   en el wrapper, con la misma especificidad (`.elementor-element` repetido)
   que usa Elementor para su `--width`, para no depender de `!important`. */
@media ( min-width: 1025px ) {
	.elementor-element.ma-foto-formulario.ma-foto-formulario {
		width: 50%;
		flex-shrink: 0;
	}
}

/* En tablet y móvil las columnas se apilan (no hay fila que estirar) y la
   foto sí tiene una altura fija propia (320px / 220px, Site Settings →
   responsive del widget). Antes esa altura vivía en la propia `<img>`; al
   volverla `position: absolute` deja de aportarle tamaño a su wrapper, así
   que hay que dársela aquí directamente para que no colapse a 0. Mismos
   valores y mismos breakpoints que ya usa Elementor para la imagen. */
@media ( max-width: 1024px ) {
	.ma-foto-formulario {
		height: 320px;
	}
}

@media ( max-width: 767px ) {
	.ma-foto-formulario {
		height: 220px;
	}
}

/* ═══════ 15 · CAJA CUADRADA DE LOS ICONOS DE CONTACTO ═════════════════ */
/* En «También puedes escribirnos» (Contacto), los iconos de WhatsApp y
   Email son un widget de imagen dentro de un container de 32×32px. Sin esta
   regla la caja se estira a la altura de la fila (dos líneas de texto,
   ~60px) porque Elementor no expone un control nativo de «no estirar en
   cross-axis» para un solo hijo dentro de una fila `align-items` por
   defecto; y el propio wrapper del widget se encoge a un ancho absurdo
   (12px) porque hereda `flex-shrink: 1` del comportamiento por defecto de
   Elementor para widgets dentro de containers, y la regla base de WordPress
   `img { max-width: 100% }` limita entonces la imagen a ese ancho encogido
   en vez de a los 32px reales del control. */
.ma-icono-contacto-caja {
	flex: 0 0 32px;
	align-self: flex-start;
	height: 32px;
}

/* Elementor imprime `.elementor.elementor .e-con > .elementor-widget {
   max-width:100%}`. Verificado con el inspector que ninguna combinación de
   clases repetidas le gana en cascada (misma especificidad exacta, y su
   hoja se imprime después en algunos casos); se usa `!important` aquí,
   señalado como excepción según la cabecera de este archivo, porque no hay
   forma de ajustar solo la especificidad para ganarle de forma fiable. */
.ma-icono-contacto-caja > .elementor-widget-image {
	flex: 0 0 32px !important;
	max-width: 32px !important;
	width: 32px !important;
	height: 32px !important;
}

/* `_css_classes` pone la clase en el wrapper del widget (`.elementor-widget-image`),
   no en la propia `<img>`; el tamaño real hay que dárselo aquí. */
.ma-icono-contacto img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

/* ═══════ 16 · SCROLLBAR NATIVA DE LOS CARRUSELES HORIZONTALES ══════════ */
/* `.ma-scroll-x` (§4) desplaza sus tarjetas con `overflow-x: auto`; en
   Chrome/Android eso pinta una barra de scroll gris ancha debajo del
   carrusel que no está en el diseño (los puntos de paginación ya cumplen
   esa función de indicador). Se oculta solo la barra; el desplazamiento por
   gesto sigue funcionando igual. */
.ma-scroll-x {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* versiones antiguas de Edge/IE */
}

.ma-scroll-x::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Edge modernos */
}

/* ═══════ 17 · CAJAS DE IGUAL ALTURA (lista «Qué es Conecta») ═══════════ */
/* Las cuatro cajas de la lista son containers apilados en columna, así que
   su altura la marca su propio texto: con dos, tres o cuatro líneas cada
   una quedaba de un alto distinto y la columna se veía irregular. En una
   columna flex no hay forma de igualarlas —`align-items` controla el eje
   horizontal, no el vertical— y Elementor gratuito no expone ningún control
   de «igualar altura» para hijos de un container.
   La rejilla sí: con `grid-auto-rows: 1fr` en un contenedor de alto
   automático todas las filas adoptan la altura de la más alta, sin fijar
   ningún valor a mano (si mañana se edita un texto o se añade una quinta
   caja, se recalcula solo). El hueco lo sigue poniendo el `--row-gap` del
   propio container, que `gap` respeta igual en grid que en flex. */
.e-con.ma-lista-conecta {
	display: grid;
	grid-auto-rows: 1fr;
}

/* ═══════ 18 · MARCA MA EN «QUÉ APRENDERÁS» (ancho fijo) ══════════════ */
/* Las tarjetas de «Qué aprenderás» son una fila `Marca (32×32) + texto`. Sin
   ancho de columna fijo para el texto, un icono es un hijo flex más: si la
   descripción vecina es larga, el navegador lo encoge por debajo de los
   32×32 declarados (`min-width` de una imagen vale `auto`, no `32px`, así
   que sí puede encogerse). Con seis tarjetas y descripciones de largo
   distinto, cada marca terminaba con un ancho distinto —el bug que se ve en
   la página: no es un tamaño de imagen inconsistente, es que se achican
   según el texto de al lado. `flex-shrink: 0` bloquea el encogimiento en
   las 22 páginas de programa (y en la plantilla «Programa»), que comparten
   esta misma estructura. */
.ma-marca-aprenderas {
	flex-shrink: 0;
}

/* ═══════ 19 · FONDO CTA DE «MA CONECTA» (alto por relación de aspecto) ══ */
/* La sección naranja de Ma Conecta pasa a usar una sola imagen de fondo que
   ya trae dentro las dos formas redondeadas de los laterales (antes eran dos
   containers de 270px con un SVG cada uno, ahora vacíos y usados solo como
   separadores para que el texto no se meta bajo las formas).

   El encargo es que la imagen ocupe el 100% del ancho y que el alto sea el
   que le corresponda por su relación de aspecto, sin recortarse ni
   estirarse. Un `background-size: cover` solo no lo consigue: recorta en
   cuanto la caja tiene una proporción distinta a la de la imagen, y el alto
   de un container lo fija su contenido o un `min-height`, no la imagen.
   `aspect-ratio` sí ata el alto al ancho; con la proporción exacta del
   archivo servido (2560×766) el `cover` no llega a recortar nada.

   Por debajo de 1025px se desactiva a propósito: a 768px la proporción daría
   ~230px de alto y el titular + bajada + botón no caben, así que ahí vuelve
   a mandar el `min-height` de Elementor y la imagen sí recorta un poco, que
   es el mal menor frente a que el texto se desborde. */
.e-con.ma-cta-conecta-fondo {
	aspect-ratio: 2560 / 766;
	min-height: 0;
}

@media (max-width: 1024px) {
	.e-con.ma-cta-conecta-fondo {
		aspect-ratio: auto;
	}
}

/* ═══════ 20 · INSIGNIA DE reCAPTCHA (formularios de Clientify) ═════════ */
/* Los formularios los sirve Clientify (Superforms), y su script carga
   reCAPTCHA v3, que planta su insignia fija abajo a la derecha con
   `z-index: 99999`. Ahí choca con el botón flotante de WhatsApp
   (`.ma-whatsapp-flotante`, `right: 24px; bottom: 24px`, `z-index: 999`), que
   por encargo tiene que quedarse en esa esquina, así que la insignia se
   oculta.

   Google permite ocultarla a condición de mostrar la atribución en el
   formulario; de eso se encarga `maude_aviso_recaptcha()` en `functions.php`,
   que imprime el `<p class="ma-recaptcha-aviso">` justo debajo de cada
   incrustación de Clientify. Las dos piezas van juntas: si alguna vez se
   quita una, hay que quitar la otra.

   Se usa `visibility` y no `display: none` porque es lo que documenta Google:
   con `display: none` la insignia deja de existir para el script y, cuando
   reCAPTCHA necesita lanzar un desafío visible, no tiene dónde anclarlo. La
   insignia es `position: fixed`, así que seguir ocupando su hueco no afecta a
   la maquetación. */
.grecaptcha-badge {
	visibility: hidden;
}

/* La atribución cuelga del contenedor del widget HTML, por debajo del
   formulario. El color por defecto es el de las tarjetas blancas (Contacto y
   las fichas de programa); el hero de Inicio es la única tarjeta oscura y se
   corrige justo después. */
.ma-recaptcha-aviso {
	margin: 12px 0 0;
	color: var( --e-global-color-ma_txtapagado );
	font-family: var( --e-global-typography-ma_b_13m-font-family ), sans-serif;
	font-size: 11px;
	line-height: 1.45;
	text-align: center;
}

.ma-recaptcha-aviso a {
	color: inherit;
	text-decoration: underline;
}

.ma-hero-form .ma-recaptcha-aviso {
	color: var( --e-global-color-ma_blanco );
	opacity: 0.7;
}