/*
Theme Name: Maigua Ojeda · Lobxs trail running club
Author: MAii Blancocasinegro
Author URI: https://www.blancocasinegro.com
Template:   socialv
Description: Comunidad de trail running
Version: 2.0.5
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: socialv

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/* ---------------------------------------------------------------------------
   PALETA MIGRADA A LA HOME 4 (13/10/2026)
   salvia #7FB2AA → #A196E2 (lavanda) · bosque #476C60 → #685FD3 (morado)
   verde oscuro #335047 y tinta #2B4239 → #191A1D (oscuro)
   crema #F3EBBA → #ECEBF2 · lila #CFC3E6 → #C9C2F4
   Los nombres de las variables (--mg-verde-*, --mo-*) se mantienen por
   compatibilidad; los ratios de contraste comentados más abajo se refieren a la
   paleta antigua. Comprobados con la nueva: #191A1D sobre #ECEBF2 14,7:1 ·
   sobre #C9C2F4 10,4:1 · sobre #A196E2 6,6:1 · blanco sobre #685FD3 5,0:1.
   --------------------------------------------------------------------------- */


/* ==========================================================================
   pasos-maigua.css
   --------------------------------------------------------------------------
   Pantalla / bloque : widget propio de Elementor «Pasos Maigua»
                       (pasos numerados con línea de conexión).
   Dónde se pega     : tema hijo, en wp-content/themes/<tema-hijo>/css/pasos-maigua.css
                       (el snippet PHP lo encola desde ahí automáticamente).
                       Alternativa: pegar este contenido al final del
                       style.css del tema hijo.
   Paleta Maigua     : verde salvia #A196E2 · verde bosque #685FD3 ·
                       crema #ECEBF2 · lila #C9C2F4
                       + verde oscuro #191A1D (variante accesible para texto:
                       ni salvia ni crema ni lila llegan a 4,5:1 sobre blanco).
   Contraste (WCAG AA), comprobado:
                       #191A1D sobre blanco .......... 8,83:1  OK
                       #685FD3 sobre blanco .......... 5,86:1  OK  (títulos)
                       #3D3D3D sobre blanco ......... 10,86:1  OK  (texto)
                       #191A1D sobre salvia .......... 3,72:1  OK texto grande
                       #FFFFFF sobre bosque .......... 5,86:1  OK
                       #191A1D sobre lila ............ 5,30:1  OK
                       #191A1D sobre crema ........... 7,31:1  OK
                       NO usar blanco sobre salvia (2,37:1) ni salvia,
                       crema o lila como color de texto sobre blanco.

   Clases y a qué corresponden
   ---------------------------
   .mg-pasos                  contenedor del widget (aquí viven los tokens)
   .mg-pasos--horizontal      círculos en fila en escritorio (>1024 px)
   .mg-pasos--vertical        círculos en columna en todos los tamaños
   .mg-pasos--sin-linea       oculta la línea de conexión
   .mg-pasos--sin-halo        quita el halo claro del círculo
   .mg-pasos__cabecera        bloque de título + subtítulo
   .mg-pasos__titulo          título principal
   .mg-pasos__subtitulo       subtítulo
   .mg-pasos__lista           <ol> con los pasos (rejilla)
   .mg-pasos__paso            <li> de cada paso
   .mg-pasos__marca           columna/fila del círculo; dibuja la línea
   .mg-pasos__numero          círculo con el número
   .mg-pasos__contenido       título + descripción del paso
   .mg-pasos__paso-titulo     título del paso
   .mg-pasos__paso-texto      descripción del paso

   !important: solo en el reinicio de la lista (.mg-pasos__lista), porque
   muchos temas pintan ol/li con selectores muy específicos.

   Estrategia responsive: móvil primero. La base es la disposición vertical;
   la horizontal se aplica desde 1025 px a .mg-pasos--horizontal.
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------- */
.mg-pasos {
	/* paleta */
	--mg-verde-salvia: #A196E2;
	--mg-verde-bosque: #685FD3;
	--mg-verde-oscuro: #191A1D;
	--mg-crema: #ECEBF2;
	--mg-lila: #C9C2F4;

	/* colores en uso (Elementor sobreescribe estos) */
	--mg-titulo-color: var(--mg-verde-oscuro);
	--mg-texto-color: #3d3d3d;
	--mg-linea: #E3E3EA;
	--mg-paso-color: var(--mg-verde-salvia);
	--mg-paso-numero: var(--mg-verde-oscuro);
	--mg-paso-titulo: var(--mg-verde-bosque);

	/* tipografías: por defecto hereda del tema.
	   Para fijarlas, cambia estos dos valores, p. ej.:
	   --mg-fuente-titulos: "Playfair Display", Georgia, serif; */
	--mg-fuente-titulos: inherit;
	--mg-fuente-texto: inherit;

	/* medidas (Elementor sobreescribe estas) */
	--mg-cols: 4;
	--mg-circulo: 96px;
	--mg-col-gap: 32px;
	--mg-fila-gap: 40px;
	--mg-sep: 10px;   /* aire entre círculo y línea */
	--mg-item-gap: 20px;

	/* --- geometría: disposición VERTICAL (base, móvil primero) --- */
	--mg-lista-cols: minmax(0, 1fr);
	--mg-paso-cols: auto minmax(0, 1fr);
	--mg-paso-rows: auto;
	--mg-paso-align: center;
	--mg-paso-text: left;
	--mg-marca-w: auto;
	--mg-marca-self: stretch;
	--mg-marca-dir: column;
	--mg-marca-justify: flex-start;

	--mg-l1-top: calc(-1 * var(--mg-fila-gap));
	--mg-l1-right: auto;
	--mg-l1-bottom: auto;
	--mg-l1-left: calc(var(--mg-circulo) / 2 - 0.5px);
	--mg-l1-w: 1px;
	--mg-l1-h: calc(var(--mg-fila-gap) + 1px);

	--mg-l2-top: calc(var(--mg-circulo) + var(--mg-sep));
	--mg-l2-right: auto;
	--mg-l2-bottom: calc(-1 * var(--mg-fila-gap));
	--mg-l2-left: calc(var(--mg-circulo) / 2 - 0.5px);
	--mg-l2-w: 1px;
	--mg-l2-h: auto;

	color: var(--mg-texto-color);
	font-family: var(--mg-fuente-texto);
}

/* ---------- Cabecera ---------------------------------------------------- */
.mg-pasos__cabecera {
	text-align: center;
	margin: 0 auto 2.75rem;
	max-width: 46rem;
}

.mg-pasos__titulo {
	font-family: var(--mg-fuente-titulos);
	color: var(--mg-titulo-color);
	font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
	line-height: 1.15;
	font-weight: 700;
	margin: 0 0 0.6em;
}

.mg-pasos__subtitulo {
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
	line-height: 1.5;
	margin: 0;
}

/* ---------- Lista de pasos --------------------------------------------- */
.mg-pasos__lista {
	list-style: none !important;   /* muchos temas fuerzan viñetas en ol/li */
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: var(--mg-lista-cols);
	column-gap: var(--mg-col-gap);
	row-gap: var(--mg-fila-gap);
}

.mg-pasos__paso {
	list-style: none !important;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: var(--mg-paso-cols);
	grid-template-rows: var(--mg-paso-rows);
	align-items: var(--mg-paso-align);
	/* start evita que las filas «auto» se estiren y desalineen los títulos
	   cuando unas descripciones son más largas que otras */
	align-content: start;
	justify-items: stretch;
	column-gap: var(--mg-item-gap);
	row-gap: 0.9rem;
	text-align: var(--mg-paso-text);
}

.mg-pasos__paso::before,
.mg-pasos__paso::marker {
	content: none;
}

/* ---------- Círculo y línea -------------------------------------------- */
.mg-pasos__marca {
	position: relative;
	display: flex;
	flex-direction: var(--mg-marca-dir);
	justify-content: var(--mg-marca-justify);
	align-items: center;
	width: var(--mg-marca-w);
	min-width: var(--mg-circulo);
	align-self: var(--mg-marca-self);
}

.mg-pasos__marca::before,
.mg-pasos__marca::after {
	content: "";
	position: absolute;
	background: var(--mg-linea);
}

.mg-pasos__marca::before {
	top: var(--mg-l1-top);
	right: var(--mg-l1-right);
	bottom: var(--mg-l1-bottom);
	left: var(--mg-l1-left);
	width: var(--mg-l1-w);
	height: var(--mg-l1-h);
}

.mg-pasos__marca::after {
	top: var(--mg-l2-top);
	right: var(--mg-l2-right);
	bottom: var(--mg-l2-bottom);
	left: var(--mg-l2-left);
	width: var(--mg-l2-w);
	height: var(--mg-l2-h);
}

.mg-pasos__paso:first-child .mg-pasos__marca::before,
.mg-pasos__paso:last-child .mg-pasos__marca::after,
.mg-pasos--sin-linea .mg-pasos__marca::before,
.mg-pasos--sin-linea .mg-pasos__marca::after {
	display: none;
}

.mg-pasos__numero {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--mg-circulo);
	height: var(--mg-circulo);
	border-radius: 50%;
	background: var(--mg-paso-color);
	color: var(--mg-paso-numero);
	font-family: var(--mg-fuente-titulos);
	font-size: calc(var(--mg-circulo) * 0.36);
	font-weight: 700;
	line-height: 1;
	/* halo: separa el círculo de la línea. La 2.ª regla gana donde hay color-mix */
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.7);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--mg-paso-color) 22%, #fff);
}

.mg-pasos--sin-halo .mg-pasos__numero {
	box-shadow: none;
}

/* ---------- Contenido del paso ----------------------------------------- */
.mg-pasos__contenido {
	min-width: 0;
}

.mg-pasos__paso-titulo {
	font-family: var(--mg-fuente-titulos);
	color: var(--mg-paso-titulo);
	font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
	line-height: 1.25;
	font-weight: 700;
	margin: 0 0 0.5em;
}

.mg-pasos__paso-texto {
	color: var(--mg-texto-color);
	font-size: 1rem;
	line-height: 1.6;
}

.mg-pasos__paso-texto p {
	margin: 0 0 0.7em;
}

.mg-pasos__paso-texto p:last-child {
	margin-bottom: 0;
}

/* ---------- Disposición HORIZONTAL (desde 1025 px) --------------------- */
@media (min-width: 1025px) {
	.mg-pasos--horizontal {
		--mg-lista-cols: repeat(var(--mg-cols, 4), minmax(0, 1fr));
		--mg-paso-cols: minmax(0, 1fr);
		--mg-paso-rows: auto auto;
		--mg-paso-align: start;
		--mg-paso-text: center;
		--mg-marca-w: 100%;
		--mg-marca-self: auto;
		--mg-marca-dir: row;
		--mg-marca-justify: center;

		--mg-l1-top: calc(50% - 0.5px);
		--mg-l1-right: calc(50% + var(--mg-circulo) / 2 + var(--mg-sep));
		--mg-l1-bottom: auto;
		--mg-l1-left: calc(-1 * var(--mg-col-gap));
		--mg-l1-w: auto;
		--mg-l1-h: 1px;

		--mg-l2-top: calc(50% - 0.5px);
		--mg-l2-right: calc(-1 * var(--mg-col-gap));
		--mg-l2-bottom: auto;
		--mg-l2-left: calc(50% + var(--mg-circulo) / 2 + var(--mg-sep));
		--mg-l2-w: auto;
		--mg-l2-h: 1px;
	}

	.mg-pasos--horizontal .mg-pasos__contenido {
		margin-top: 1.25rem;
	}
}

/* ---------- Editor de Elementor: que no se corte la línea -------------- */
.elementor-widget-mg-pasos .mg-pasos__lista {
	overflow: visible;
}

/* ==========================================================================
   pasos-tarjetas-maigua.css
   --------------------------------------------------------------------------
   Pantalla / bloque : widget propio de Elementor «Tarjetas de pasos Maigua»
                       (tarjetas cápsula escalonadas: icono, chapa «Paso N»,
                       título y descripción).
   Dónde se pega     : tema hijo, en
                       wp-content/themes/socialv-child/css/pasos-tarjetas-maigua.css
                       (el snippet PHP lo encola desde ahí automáticamente).
                       Alternativa: pegar este contenido al final del
                       style.css del tema hijo.
   Hermano de        : pasos-maigua.css (widget «Pasos Maigua»). Mismos tokens
                       de paleta y misma forma de trabajar; prefijo distinto
                       (.mg-ptar) para que los dos puedan convivir.

   Paleta Maigua     : verde salvia #A196E2 · verde bosque #685FD3 ·
                       crema #ECEBF2 · lila #C9C2F4
                       + verde oscuro #191A1D (variante accesible para texto).
                       El fondo tintado de cada tarjeta se calcula solo con
                       color-mix() a partir del color del paso, así que no hay
                       que elegir dos colores por paso.
   Contraste (WCAG AA), comprobado:
                       #191A1D sobre blanco .......... 8,83:1  OK
                       #685FD3 sobre blanco .......... 5,86:1  OK  (títulos)
                       #3D3D3D sobre blanco ......... 10,86:1  OK  (texto)
                       #191A1D sobre crema ........... 7,31:1  OK  (chapa 1)
                       #191A1D sobre lila ............ 5,30:1  OK  (chapa 2)
                       #191A1D sobre salvia .......... 4,56:1  OK  (chapa 3)
                       #FFFFFF sobre bosque .......... 5,86:1  OK  (chapa 4)
                       #FFFFFF sobre #191A1D ......... 8,83:1  OK  (chapa 5)
                       El texto de la chapa es pequeño (13 px), así que sobre
                       salvia se usa #191A1D y no #191A1D, que se queda en
                       3,72:1. NO usar blanco sobre salvia, crema o lila.

   Clases y a qué corresponden
   ---------------------------
   .mg-ptar                   contenedor del widget (aquí viven los tokens)
   .mg-ptar--escalonado       sube cada tarjeta un escalón (solo >1024 px)
   .mg-ptar--izquierda / --centro   alineación de la cabecera
   .mg-ptar__cabecera         bloque de título + subtítulo
   .mg-ptar__titulo           título principal
   .mg-ptar__subtitulo        subtítulo
   .mg-ptar__lista            <ol> de tarjetas (rejilla)
   .mg-ptar__paso             <li> de cada paso (lleva --mg-i con su índice)
   .mg-ptar__tarjeta          la cápsula blanca con sombra
   .mg-ptar__medio            mitad superior tintada, contiene el icono
   .mg-ptar__icono            círculo de color con el icono o el número
   .mg-ptar__chapa            píldora «Paso N», a caballo entre tinte y blanco
   .mg-ptar__contenido        título + descripción
   .mg-ptar__paso-titulo      título del paso
   .mg-ptar__paso-texto       descripción del paso

   !important: solo en el reinicio de la lista, porque muchos temas
   (SocialV entre ellos) pintan ol/li con selectores muy específicos.

   Estrategia responsive: móvil primero. Una columna sin escalonado; el
   número de columnas lo pone Elementor por dispositivo (5 / 2 / 1 por
   defecto) y el escalonado solo se activa desde 1025 px.
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------- */
.mg-ptar {
	/* paleta */
	--mg-verde-salvia: #A196E2;
	--mg-verde-bosque: #685FD3;
	--mg-verde-oscuro: #191A1D;
	--mg-verde-tinta: #191A1D;   /* texto pequeño sobre salvia */
	--mg-crema: #ECEBF2;
	--mg-lila: #C9C2F4;

	/* colores en uso (Elementor sobreescribe estos) */
	--mg-titulo-color: var(--mg-verde-oscuro);
	--mg-texto-color: #3d3d3d;
	--mg-tarjeta-fondo: #ffffff;
	--mg-sombra: 0 14px 34px rgba(25, 26, 29, 0.13);
	--mg-paso-color: var(--mg-verde-salvia);
	--mg-paso-icono: var(--mg-verde-oscuro);
	--mg-paso-titulo: var(--mg-verde-oscuro);
	/* El tinte de la mitad superior NO se declara aquí a propósito: se
	   calcula en .mg-ptar__medio a partir del color de cada paso. Si se
	   declarara aquí, var(--mg-paso-color) se resolvería con el color del
	   contenedor y las cinco tarjetas saldrían del mismo tono.
	   Para forzar un tinte concreto en un paso, Elementor define
	   --mg-paso-tinte en ese paso y esa declaración gana. */

	/* tipografías: por defecto heredan del tema.
	   Para fijarlas cambia estos dos valores. */
	--mg-fuente-titulos: inherit;
	--mg-fuente-texto: inherit;

	/* medidas (Elementor sobreescribe estas) */
	--mg-cols: 1;
	--mg-circulo: 92px;
	--mg-gap: 24px;
	--mg-escalon: 46px;
	--mg-radio: 999px;        /* cápsula, para tarjetas estrechas */
	--mg-radio-ancho: 44px;   /* redondeo cuando la tarjeta es ancha */
	--mg-medio-alto: 30px;   /* aire bajo el icono, dentro del tinte */

	color: var(--mg-texto-color);
	font-family: var(--mg-fuente-texto);
}

/* ---------- Cabecera ---------------------------------------------------- */
.mg-ptar__cabecera {
	margin: 0 0 2.5rem;
	max-width: 34rem;
}

.mg-ptar--centro .mg-ptar__cabecera {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.mg-ptar__titulo {
	font-family: var(--mg-fuente-titulos);
	color: var(--mg-titulo-color);
	font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem);
	line-height: 1.2;
	font-weight: 700;
	margin: 0 0 0.45em;
}

.mg-ptar__subtitulo {
	font-size: clamp(0.95rem, 0.92rem + 0.2vw, 1.0625rem);
	line-height: 1.5;
	margin: 0;
}

/* ---------- Rejilla ----------------------------------------------------- */
.mg-ptar__lista {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(var(--mg-cols, 1), minmax(0, 1fr));
	gap: var(--mg-gap);
	align-items: start;
}

.mg-ptar__paso {
	list-style: none !important;
	margin: 0;
	padding: 0;
	display: flex;
	/* contenedor de consulta: la cápsula solo funciona en tarjetas estrechas.
	   En cuanto la tarjeta se ensancha (2 columnas en tablet, 1 en móvil) el
	   redondeo baja a --mg-radio-ancho para que no salga un óvalo enorme. */
	container-type: inline-size;
}

.mg-ptar__paso::before,
.mg-ptar__paso::marker {
	content: none;
}

/* ---------- La tarjeta -------------------------------------------------- */
.mg-ptar__tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	background: var(--mg-tarjeta-fondo);
	border-radius: var(--mg-radio);
	overflow: hidden;
	box-shadow: var(--mg-sombra);
	padding-bottom: 2.25rem;
	text-align: center;
}

.mg-ptar__medio {
	width: 100%;
	background: var(--mg-paso-tinte, #F4F4F8);
	padding: 1.75rem 0.75rem var(--mg-medio-alto);
	display: flex;
	justify-content: center;
}

.mg-ptar__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--mg-circulo);
	height: var(--mg-circulo);
	border-radius: 50%;
	background: var(--mg-paso-color);
	color: var(--mg-paso-icono);
	font-size: calc(var(--mg-circulo) * 0.38);
	line-height: 1;
}

.mg-ptar__icono i {
	font-size: inherit;
	line-height: 1;
}

.mg-ptar__icono svg {
	width: 1em;
	height: 1em;
}

/* Los iconos macizos suelen venir sin atributo fill y necesitan currentColor;
   los de línea traen fill="none" y se pintan con stroke, así que no se tocan
   (una regla CSS ganaría al atributo del SVG y los rellenaría de color). */
.mg-ptar__icono svg:not([fill]) {
	fill: currentColor;
}

/* Tinte automático: el color del paso aclarado al 28 %. La declaración de
   Elementor (--mg-paso-tinte en un paso concreto) sigue teniendo prioridad. */
@supports (background: color-mix(in srgb, red 30%, white)) {
	.mg-ptar__medio {
		background: var(--mg-paso-tinte, color-mix(in srgb, var(--mg-paso-color) 28%, #fff));
	}
}

/* variante sin icono: el número del paso */
.mg-ptar__icono--numero {
	font-family: var(--mg-fuente-titulos);
	font-size: calc(var(--mg-circulo) * 0.34);
	font-weight: 700;
}

.mg-ptar__chapa {
	position: relative;
	z-index: 2;
	/* la chapa sube la mitad de su propio alto (1,2em de línea + 0,84em de
	   relleno ≈ 2,04em) para quedar a caballo entre el tinte y el blanco */
	margin-top: -1.02em;
	background: var(--mg-paso-color);
	color: var(--mg-paso-icono);
	border-radius: 999px;
	padding: 0.42em 1.15em;
	font-family: var(--mg-fuente-titulos);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.mg-ptar__contenido {
	padding: 1.1rem 1.35rem 0;
	min-width: 0;
}

.mg-ptar__paso-titulo {
	font-family: var(--mg-fuente-titulos);
	color: var(--mg-paso-titulo);
	font-size: 1rem;
	line-height: 1.3;
	font-weight: 700;
	margin: 0 0 0.55em;
}

.mg-ptar__paso-texto {
	color: var(--mg-texto-color);
	font-size: 0.875rem;
	line-height: 1.55;
}

.mg-ptar__paso-texto p {
	margin: 0 0 0.7em;
}

.mg-ptar__paso-texto p:last-child {
	margin-bottom: 0;
}

/* Se declara después de .mg-ptar__tarjeta a propósito: misma especificidad,
   así que gana la regla que va más abajo. */
@container (min-width: 265px) {
	.mg-ptar__tarjeta {
		border-radius: var(--mg-radio-ancho, 44px);
	}
}

/* ---------- Sin sombra -------------------------------------------------- */
.mg-ptar--sin-sombra .mg-ptar__tarjeta {
	box-shadow: none;
}

/* ---------- Escalonado (solo escritorio) ------------------------------- */
@media (min-width: 1025px) {
	.mg-ptar--escalonado .mg-ptar__paso {
		/* el paso 1 baja lo máximo y el último queda arriba, como en el modelo */
		margin-top: calc((var(--mg-total, 1) - 1 - var(--mg-i, 0)) * var(--mg-escalon));
	}
}

/* ---------- Editor de Elementor ---------------------------------------- */
.elementor-widget-mg-pasos-tarjetas .mg-ptar__lista {
	overflow: visible;
}

/* =============================================================================
   NIVELES DE TRAIL RUNNING — fichas de rangos GamiPress y tabla comparativa
   -----------------------------------------------------------------------------
   QUÉ ESTILIZA
     · Las fichas de los 4 rangos de GamiPress (tipo "Levels"):
       Principiante, Intermedio I, Intermedio II y Avanzado.
     · La página "Niveles de trail running" con la tabla comparativa.

   PALETA — la misma de Maigua que usa el widget de pasos (.mg-pasos / .mg-ptar)
     crema  #ECEBF2 · lila #C9C2F4 · salvia #A196E2 · bosque #685FD3
     verde oscuro #191A1D (títulos y texto sobre tintes claros)
     texto #3D3D3D · línea #E3E3EA · fondo suave #F4F4F8
     Cada nivel toma un color de la escalera crema → lila → salvia → bosque,
     igual que los pasos 1-4. El fondo tintado se calcula con color-mix() a
     partir de ese color, así que solo hay que elegir un color por nivel.

   CONTRASTE (WCAG AA, mismas parejas comprobadas que las chapas de pasos)
     #191A1D sobre crema  ......... 7,31:1  OK   (chapa nivel 1)
     #191A1D sobre lila ........... 5,30:1  OK   (chapa nivel 2)
     #191A1D sobre salvia ......... 4,56:1  OK   (chapa nivel 3)
     #FFFFFF sobre bosque ......... 5,86:1  OK   (chapa nivel 4)
     #191A1D sobre blanco ......... 8,83:1  OK   (títulos)
     #685FD3 sobre blanco ......... 5,86:1  OK   (rótulos pequeños)
     #3D3D3D sobre blanco ........ 10,86:1  OK   (texto)
     Sobre salvia el texto pequeño va en #191A1D, no en #191A1D (3,72:1).
     NO usar blanco sobre salvia, crema ni lila.

   CLASES USADAS  (van escritas en el HTML de cada rango / de la página)
     .mo-nivel                         Contenedor de la ficha de un nivel
     .mo-nivel--principiante           Modificador de color, uno por nivel
     .mo-nivel--intermedio-1 / -2 / --avanzado
     .mo-nivel__hero                   Cabecera tintada con el nombre del nivel
     .mo-nivel__eyebrow                Chapa "Nivel 1 de 4 · Trail running"
     .mo-nivel__titulo                 Nombre del nivel
     .mo-nivel__apodo                  Apodo de la manada (Lobezna, Alfa…)
     .mo-nivel__lema                   Frase de resumen
     .mo-nivel__kpis / __kpi           Fila de 4 datos destacados
     .mo-nivel__kpi-dato / -etiqueta   Cifra y su rótulo
     .mo-nivel__nota                   Aviso "no nos basamos en el objetivo…"
     .mo-nivel__bloques                Rejilla de tarjetas temáticas
     .mo-bloque                        Tarjeta (Experiencia, Volumen, Fuerza…)
     .mo-bloque__titulo / __icono      Título de la tarjeta y su icono
     .mo-bloque__icono--exp/vol/fue/rit/ter/aut   Cuál de los 7 iconos se pinta
     .mo-bloque__lista / __item        Lista de pares dato-valor
     .mo-bloque__clave / __valor       Etiqueta y contenido de cada par
     .mo-nivel__cierre                 Bloque final de competición y objetivos
     .mo-nivel__cierre-icono / -texto / -titulo / -competicion / -objetivos
     .mo-comparativa                   Contenedor de la tabla comparativa
     .mo-comparativa__intro / __titulo / __nota
     .mo-comparativa__scroll           Envoltorio con scroll horizontal
     .mo-comparativa__tabla            La tabla
     .mo-comparativa__esquina          Celda vacía superior izquierda
     .mo-comparativa__cabecera         Cabecera de cada nivel (+ modificador)
     .mo-comparativa__num / __nombre / __apodo   "Nivel 1", "Principiante", "Lobezna"
     .mo-comparativa__enlace / __vermas   Enlace de la cabecera a la ficha del nivel
     .mo-comparativa__fila / __criterio / __celda
     .mo-comparativa__pista            Aviso de deslizar en móvil
     .mo-comparativa__oculto           Texto solo para lectores de pantalla

   POR QUÉ HAY !important
     SocialV pinta tablas, títulos y enlaces con selectores muy específicos
     (.entry-content table th, .single .entry-content h2, …) y aplica
     text-transform:capitalize a los títulos del contenido. Los !important
     están limitados a color, fondo, borde y tipografía dentro de .mo-nivel y
     .mo-comparativa; no se usan en maquetación (grid, flex, espaciados).
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
.mo-nivel,
.mo-comparativa,
.mo-bienvenida,
.mo-test,
.mo-minivel {
  --mo-salvia: #A196E2;
  --mo-bosque: #685FD3;
  --mo-crema:  #ECEBF2;
  --mo-lila:   #C9C2F4;
  --mo-oscuro: #191A1D;
  --mo-oscuro-plus: #191A1D;   /* para texto pequeño sobre salvia */
  --mo-texto: #3D3D3D;
  --mo-linea: #E3E3EA;
  --mo-blanco: #FFFFFF;
  --mo-fondo-suave: #F4F4F8;

  /* color activo de la ficha: lo fija cada modificador de nivel */
  --mo-color: var(--mo-salvia);
  --mo-sobre: var(--mo-oscuro-plus);
  --mo-tinte: color-mix(in srgb, var(--mo-color) 22%, #fff);
  --mo-tinte-fuerte: color-mix(in srgb, var(--mo-color) 40%, #fff);

  --mo-radio: 22px;
  --mo-sombra: 0 1px 2px rgba(25, 26, 29, .04), 0 10px 28px rgba(25, 26, 29, .07);
}

.mo-nivel--principiante { --mo-color: var(--mo-crema);  --mo-sobre: var(--mo-oscuro); }
.mo-nivel--intermedio-1 { --mo-color: var(--mo-lila);   --mo-sobre: var(--mo-oscuro); }
.mo-nivel--intermedio-2 { --mo-color: var(--mo-salvia); --mo-sobre: var(--mo-oscuro-plus); }
.mo-nivel--avanzado     { --mo-color: var(--mo-bosque); --mo-sobre: var(--mo-blanco); }

.mo-nivel,
.mo-nivel *,
.mo-comparativa,
.mo-comparativa *,
.mo-bienvenida,
.mo-bienvenida *,
.mo-test,
.mo-test *,
.mo-minivel,
.mo-minivel * { box-sizing: border-box; }

.mo-nivel,
.mo-comparativa,
.mo-bienvenida,
.mo-test,
.mo-minivel {
  color: var(--mo-texto) !important;
  line-height: 1.55;
  max-width: 1120px;
  margin-inline: auto;
}

/* SocialV pone text-transform:capitalize en los títulos del contenido:
   lo anulamos para que los nombres se lean tal y como están escritos. */
.mo-nivel__titulo,
.mo-bloque__titulo,
.mo-nivel__cierre-titulo,
.mo-comparativa__titulo,
.mo-comparativa__nombre { text-transform: none !important; }

/* =============================================================================
   1. FICHA DE NIVEL — cabecera
   ========================================================================== */
.mo-nivel__hero {
  position: relative;
  overflow: hidden;
  background: var(--mo-tinte) !important;
  border-radius: var(--mo-radio);
  padding: 40px 36px 34px;
  margin-bottom: 26px;
}

/* Relieve decorativo, sin imágenes */
.mo-nivel__hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -160px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: var(--mo-tinte-fuerte);
  opacity: .55;
  pointer-events: none;
}

/* Chapa del nivel: mismo tratamiento que las chapas "Paso 1" del widget */
.mo-nivel__eyebrow {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0 0 16px !important;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--mo-color) !important;
  color: var(--mo-sobre) !important;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mo-nivel__titulo {
  position: relative;
  z-index: 1;
  margin: 0 0 12px !important;
  font-size: clamp(2rem, 5vw, 2.9rem);
  line-height: 1.1;
  font-weight: 800;
  color: var(--mo-oscuro) !important;
}

/* Apodo de la manada: Lobezna, Exploradora, Montaña, Alfa */
.mo-nivel__apodo {
  display: block;
  margin-top: 8px;
  font-size: .42em;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mo-bosque) !important;
}

.mo-nivel__lema {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  max-width: 48ch;
  font-size: 1.05rem;
  color: var(--mo-texto) !important;
}

.mo-nivel__kpis {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  list-style: none !important;
  margin: 26px 0 0 !important;
  padding: 0 !important;
}

.mo-nivel__kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--mo-blanco);
  border: 1px solid var(--mo-linea);
}

.mo-nivel__kpi::marker { content: ""; }

.mo-nivel__kpi-dato {
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--mo-oscuro) !important;
}

.mo-nivel__kpi-etiqueta {
  font-size: .76rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mo-bosque) !important;
}

/* --- Aviso ---------------------------------------------------------------- */
.mo-nivel__nota {
  margin: 0 0 26px !important;
  padding: 14px 18px;
  border-left: 4px solid var(--mo-salvia);
  border-radius: 0 12px 12px 0;
  background: var(--mo-fondo-suave);
  font-size: .94rem;
  color: var(--mo-texto) !important;
}

/* =============================================================================
   2. FICHA DE NIVEL — tarjetas temáticas
   ========================================================================== */
.mo-nivel__bloques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.mo-bloque {
  background: var(--mo-blanco);
  border: 1px solid var(--mo-linea);
  border-radius: var(--mo-radio);
  box-shadow: var(--mo-sombra);
  padding: 22px 22px 8px;
}

.mo-bloque__titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mo-linea);
  font-size: 1.02rem !important;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--mo-oscuro) !important;
}

.mo-bloque__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mo-color);
  color: var(--mo-sobre);
}

.mo-bloque__lista {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mo-bloque__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--mo-linea);
}

.mo-bloque__item:last-child { border-bottom: 0; }
.mo-bloque__item::marker { content: ""; }

.mo-bloque__clave {
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mo-bosque) !important;
}

.mo-bloque__valor {
  font-size: .97rem;
  color: var(--mo-texto) !important;
}

/* =============================================================================
   3. FICHA DE NIVEL — cierre (competición y objetivos)
   ========================================================================== */
.mo-nivel__cierre {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px;
  border-radius: var(--mo-radio);
  background: var(--mo-tinte);
  border: 1px solid var(--mo-tinte-fuerte);
}

.mo-nivel__cierre-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--mo-color);
  color: var(--mo-sobre);
}

.mo-nivel__cierre-titulo {
  margin: 4px 0 10px !important;
  font-size: 1.05rem !important;
  font-weight: 700;
  color: var(--mo-oscuro) !important;
}

.mo-nivel__cierre-texto p {
  margin: 0 0 6px !important;
  font-size: .97rem;
  color: var(--mo-texto) !important;
}

.mo-nivel__cierre-texto p:last-child { margin-bottom: 0 !important; }
.mo-nivel__cierre-texto strong { color: var(--mo-oscuro) !important; font-weight: 700; }

/* =============================================================================
   4. TABLA COMPARATIVA
   ========================================================================== */
.mo-comparativa { margin-block: 8px 32px; }

.mo-comparativa__intro { margin-bottom: 22px; }

.mo-comparativa__titulo {
  margin: 0 0 12px !important;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 800;
  color: var(--mo-oscuro) !important;
}

.mo-comparativa__nota {
  margin: 0 !important;
  max-width: 70ch;
  padding: 14px 18px;
  border-left: 4px solid var(--mo-salvia);
  border-radius: 0 12px 12px 0;
  background: var(--mo-fondo-suave);
  font-size: .94rem;
  color: var(--mo-texto) !important;
}

.mo-comparativa__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--mo-linea);
  border-radius: var(--mo-radio);
  background: var(--mo-blanco);
  box-shadow: var(--mo-sombra);
}

.mo-comparativa__scroll:focus-visible { outline: 3px solid var(--mo-salvia); outline-offset: 2px; }

.mo-comparativa__tabla {
  width: 100%;
  min-width: 900px;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  font-size: .9rem;
  background: transparent !important;
}

.mo-comparativa__tabla th,
.mo-comparativa__tabla td {
  border: 0 !important;
  border-bottom: 1px solid var(--mo-linea) !important;
  padding: 14px 16px !important;
  vertical-align: top !important;
  text-align: left !important;
  background: transparent;
}

/* Cabecera: cada nivel con su color y su pareja de contraste comprobada */
.mo-comparativa__tabla thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 16px !important;
  border-bottom: 0 !important;
}

.mo-comparativa__esquina {
  background: var(--mo-blanco) !important;
  left: 0;
  z-index: 4 !important;
}

.mo-comparativa__cabecera { line-height: 1.25; }

.mo-comparativa__cabecera--principiante { background: #ECEBF2 !important; color: #191A1D !important; }
.mo-comparativa__cabecera--intermedio-1 { background: #C9C2F4 !important; color: #191A1D !important; }
.mo-comparativa__cabecera--intermedio-2 { background: #A196E2 !important; color: #191A1D !important; }
.mo-comparativa__cabecera--avanzado     { background: #685FD3 !important; color: #FFFFFF !important; }

.mo-comparativa__num {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
  color: inherit !important;
}

.mo-comparativa__nombre {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  color: inherit !important;
}

.mo-comparativa__apodo {
  display: block;
  margin-top: 3px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .85;
  color: inherit !important;
}

/* La cabecera de cada nivel es un enlace a su ficha */
.mo-comparativa__enlace {
  display: block;
  color: inherit !important;
  text-decoration: none !important;
}

.mo-comparativa__enlace:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: -4px;
}

.mo-comparativa__vermas {
  display: inline-block;
  margin-top: 9px;
  padding-bottom: 1px;
  border-bottom: 1px solid currentColor;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
  color: inherit !important;
}

.mo-comparativa__enlace:hover .mo-comparativa__vermas,
.mo-comparativa__enlace:focus-visible .mo-comparativa__vermas { opacity: 1; }

/* Primera columna fija */
.mo-comparativa__criterio {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 200px;
  min-width: 200px;
  background: var(--mo-fondo-suave) !important;
  border-right: 1px solid var(--mo-linea) !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mo-bosque) !important;
}

.mo-comparativa__fila:nth-child(even) .mo-comparativa__criterio { background: #ECEBF2 !important; }
.mo-comparativa__fila:nth-child(even) .mo-comparativa__celda { background: #FBFAF6; }
.mo-comparativa__fila:last-child th,
.mo-comparativa__fila:last-child td { border-bottom: 0 !important; }

.mo-comparativa__celda { width: 21%; color: var(--mo-texto) !important; }

/* Filete de color por columna, para no perder la referencia al hacer scroll */
.mo-comparativa__celda--principiante { box-shadow: inset 3px 0 0 #ECEBF2; }
.mo-comparativa__celda--intermedio-1 { box-shadow: inset 3px 0 0 #C9C2F4; }
.mo-comparativa__celda--intermedio-2 { box-shadow: inset 3px 0 0 #A196E2; }
.mo-comparativa__celda--avanzado     { box-shadow: inset 3px 0 0 #685FD3; }

.mo-comparativa__pista {
  margin: 12px 0 0 !important;
  font-size: .84rem;
  color: var(--mo-bosque) !important;
}

.mo-comparativa__oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* =============================================================================
   5. RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .mo-nivel__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mo-nivel__hero { padding: 32px 26px 26px; }
}

@media (max-width: 780px) {
  /* La tabla deja de ser tabla: cada criterio se apila con su chapa de nivel */
  .mo-comparativa__scroll { overflow-x: visible; border: 0; box-shadow: none; background: transparent; }
  .mo-comparativa__pista { display: none; }
  .mo-comparativa__tabla { min-width: 0; display: block; }
  .mo-comparativa__tabla thead { display: none; }
  .mo-comparativa__tabla tbody { display: block; }

  .mo-comparativa__fila {
    display: block;
    margin-bottom: 16px;
    border: 1px solid var(--mo-linea);
    border-radius: 18px;
    overflow: hidden;
    background: var(--mo-blanco);
    box-shadow: var(--mo-sombra);
  }

  .mo-comparativa__criterio {
    position: static;
    display: block;
    width: auto;
    min-width: 0;
    border-right: 0 !important;
    background: var(--mo-fondo-suave) !important;
  }

  .mo-comparativa__celda {
    display: block;
    width: auto;
    box-shadow: none !important;
    background: transparent !important;
  }

  .mo-comparativa__celda::before {
    content: attr(data-nivel);
    display: inline-block;
    margin: 0 10px 0 0;
    vertical-align: baseline;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .mo-comparativa__celda--principiante::before { background: #ECEBF2; color: #191A1D !important; }
  .mo-comparativa__celda--intermedio-1::before { background: #C9C2F4; color: #191A1D !important; }
  .mo-comparativa__celda--intermedio-2::before { background: #A196E2; color: #191A1D !important; }
  .mo-comparativa__celda--avanzado::before     { background: #685FD3; color: #FFFFFF !important; }
}

@media (max-width: 520px) {
  .mo-nivel__kpis { grid-template-columns: 1fr; }
  .mo-nivel__hero { padding: 28px 20px 22px; border-radius: 18px; }
  .mo-bloque { padding: 18px 18px 6px; border-radius: 18px; }
  .mo-nivel__cierre { flex-direction: column; gap: 14px; padding: 20px; border-radius: 18px; }
}

/* Navegador sin color-mix(): tintes de reserva */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .mo-nivel--principiante { --mo-tinte: #F8F8FB; --mo-tinte-fuerte: #ECEBF2; }
  .mo-nivel--intermedio-1 { --mo-tinte: #F5F3FA; --mo-tinte-fuerte: #ECE7F5; }
  .mo-nivel--intermedio-2 { --mo-tinte: #F0EFFB; --mo-tinte-fuerte: #DCD8F5; }
  .mo-nivel--avanzado     { --mo-tinte: #ECEBF2; --mo-tinte-fuerte: #C9C2F4; }
}

/* =============================================================================
   6. ICONOS  (SVG como máscara CSS: el color lo pone currentColor, así cada
      nivel tiñe sus iconos con su propio acento y el HTML se queda limpio)
   ========================================================================== */
.mo-bloque__icono::before,
.mo-nivel__cierre-icono::before {
  content: "";
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.mo-bloque__icono::before { width: 20px; height: 20px; }
.mo-nivel__cierre-icono::before { width: 26px; height: 26px; }

/* Experiencia */
.mo-bloque__icono--exp::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E");
}

/* Volumen */
.mo-bloque__icono--vol::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2020h18%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2212%22%20width%3D%223.5%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2210.25%22%20y%3D%228%22%20width%3D%223.5%22%20height%3D%2210%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2216.5%22%20y%3D%224%22%20width%3D%223.5%22%20height%3D%2214%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2020h18%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2212%22%20width%3D%223.5%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2210.25%22%20y%3D%228%22%20width%3D%223.5%22%20height%3D%2210%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2216.5%22%20y%3D%224%22%20width%3D%223.5%22%20height%3D%2214%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E");
}

/* Fuerza */
.mo-bloque__icono--fue::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209v6M7%207v10M17%207v10M20%209v6M7%2012h10%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209v6M7%207v10M17%207v10M20%209v6M7%2012h10%22%2F%3E%3C%2Fsvg%3E");
}

/* Ritmos */
.mo-bloque__icono--rit::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%202h4%22%2F%3E%3Cpath%20d%3D%22M12%209v4l2.5%201.5%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2214%22%20r%3D%228%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%202h4%22%2F%3E%3Cpath%20d%3D%22M12%209v4l2.5%201.5%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2214%22%20r%3D%228%22%2F%3E%3C%2Fsvg%3E");
}

/* Terreno */
.mo-bloque__icono--ter::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2020h20%22%2F%3E%3Cpath%20d%3D%22M3%2020l6-11%204%206.5%202.5-3.5L21%2020%22%2F%3E%3Cpath%20d%3D%22M9%209l1.8%203.2%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2020h20%22%2F%3E%3Cpath%20d%3D%22M3%2020l6-11%204%206.5%202.5-3.5L21%2020%22%2F%3E%3Cpath%20d%3D%22M9%209l1.8%203.2%22%2F%3E%3C%2Fsvg%3E");
}

/* Autonomía */
.mo-bloque__icono--aut::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M15.5%208.5l-2%205-5%202%202-5z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M15.5%208.5l-2%205-5%202%202-5z%22%2F%3E%3C%2Fsvg%3E");
}

/* Objetivos */
.mo-nivel__cierre-icono::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.5%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.5%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E");
}

/* =============================================================================
   7. BIENVENIDA A LA MANADA  (página /bienvenida/)
   -----------------------------------------------------------------------------
   .mo-bienvenida            Contenedor
   .mo-bienvenida__hero      Bloque tintado de saludo
   .mo-bienvenida__chapa     «Ya estás dentro»
   .mo-bienvenida__titulo / __lema
   .mo-bienvenida__acciones  Fila de botones
   .mo-bienvenida__cta       Botón principal (--suave, el secundario)
   .mo-bienvenida__tiempo    «20 preguntas · 5 minutos»
   .mo-bienvenida__pasos     Los cuatro pasos de qué pasa ahora
   .mo-bienvenida__paso      Uno por paso (--1 a --4 fijan su color)
   .mo-bienvenida__paso-num / -titulo / -texto
   ========================================================================== */

.mo-bienvenida__hero {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--mo-salvia) 20%, #fff);
  border-radius: var(--mo-radio);
  padding: 46px 40px 40px;
  margin-bottom: 26px;
  text-align: center;
}

.mo-bienvenida__hero::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -180px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mo-salvia) 34%, #fff);
  opacity: .55;
  pointer-events: none;
}

.mo-bienvenida__chapa {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0 0 16px !important;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--mo-salvia) !important;
  color: var(--mo-oscuro-plus) !important;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mo-bienvenida__titulo {
  position: relative;
  z-index: 1;
  margin: 0 0 14px !important;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  font-weight: 800;
  color: var(--mo-oscuro) !important;
  text-transform: none !important;
}

.mo-bienvenida__lema {
  position: relative;
  z-index: 1;
  margin: 0 auto !important;
  max-width: 56ch;
  font-size: 1.06rem;
  color: var(--mo-texto) !important;
}

.mo-bienvenida__acciones {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 0 !important;
}

.mo-bienvenida__cta {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid var(--mo-bosque);
  background: var(--mo-bosque);
  color: #fff !important;
  font-size: .98rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: background .15s, color .15s;
}

.mo-bienvenida__cta:hover,
.mo-bienvenida__cta:focus-visible { background: var(--mo-oscuro); border-color: var(--mo-oscuro); color: #fff !important; }

.mo-bienvenida__cta--suave {
  background: transparent;
  color: var(--mo-oscuro) !important;
  border-color: var(--mo-oscuro);
}

.mo-bienvenida__cta--suave:hover,
.mo-bienvenida__cta--suave:focus-visible { background: var(--mo-oscuro); color: #fff !important; }

.mo-bienvenida__tiempo {
  position: relative;
  z-index: 1;
  margin: 16px 0 0 !important;
  font-size: .86rem;
  color: var(--mo-bosque) !important;
}

.mo-bienvenida__pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mo-bienvenida__paso {
  --mo-paso-color: var(--mo-salvia);
  --mo-paso-sobre: var(--mo-oscuro-plus);
  background: var(--mo-blanco);
  border: 1px solid var(--mo-linea);
  border-radius: var(--mo-radio);
  box-shadow: var(--mo-sombra);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mo-bienvenida__paso::marker { content: ""; }

.mo-bienvenida__paso--1 { --mo-paso-color: var(--mo-crema);  --mo-paso-sobre: var(--mo-oscuro); }
.mo-bienvenida__paso--2 { --mo-paso-color: var(--mo-lila);   --mo-paso-sobre: var(--mo-oscuro); }
.mo-bienvenida__paso--3 { --mo-paso-color: var(--mo-salvia); --mo-paso-sobre: var(--mo-oscuro-plus); }
.mo-bienvenida__paso--4 { --mo-paso-color: var(--mo-bosque); --mo-paso-sobre: #fff; }

.mo-bienvenida__paso-num {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--mo-paso-color);
  color: var(--mo-paso-sobre) !important;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mo-bienvenida__paso-titulo {
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 700;
  color: var(--mo-oscuro) !important;
  text-transform: none !important;
}

.mo-bienvenida__paso-texto {
  margin: 0 !important;
  font-size: .94rem;
  color: var(--mo-texto) !important;
}

/* =============================================================================
   8. TEST DE NIVEL  (shortcode [lobxs_test_nivel])
   -----------------------------------------------------------------------------
   .mo-test                  El formulario. --js lo añade el propio script
   .mo-test__cabecera        Chapa, título, intro y barra de progreso
   .mo-test__chapa / __titulo / __intro / __ya
   .mo-test__barra / __barra-relleno / __progreso / __paso-actual
   .mo-test__error           Aviso de respuestas que faltan
   .mo-test__paso            Cada uno de los 5 bloques (--avisa al intentar pasar)
   .mo-test__paso-legend / -num / -titulo / -entrada
   .mo-test__pregunta        Un grupo de radios (--falta si quedó sin contestar,
                             --abierta la del objetivo)
   .mo-test__enunciado / -num / .mo-test__ayuda
   .mo-test__opciones / __opcion / __opcion-texto
   .mo-test__texto           El textarea del objetivo
   .mo-test__pie / __btn     Atrás · Siguiente · Ver mi nivel
   ========================================================================== */

.mo-test [hidden] { display: none !important; }

.mo-test__cabecera {
  background: var(--mo-fondo-suave);
  border-radius: var(--mo-radio);
  padding: 32px 30px 26px;
  margin-bottom: 24px;
}

.mo-test__chapa {
  display: inline-block;
  margin: 0 0 14px !important;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--mo-salvia) !important;
  color: var(--mo-oscuro-plus) !important;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mo-test__titulo {
  margin: 0 0 12px !important;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.12;
  font-weight: 800;
  color: var(--mo-oscuro) !important;
  text-transform: none !important;
}

.mo-test__intro {
  margin: 0 !important;
  max-width: 60ch;
  font-size: 1rem;
  color: var(--mo-texto) !important;
}

.mo-test__ya {
  margin: 14px 0 0 !important;
  padding: 12px 16px;
  border-left: 4px solid var(--mo-lila);
  border-radius: 0 10px 10px 0;
  background: var(--mo-blanco);
  font-size: .92rem;
  color: var(--mo-texto) !important;
}

.mo-test__barra {
  height: 6px;
  margin-top: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mo-bosque) 14%, #fff);
  overflow: hidden;
}

.mo-test__barra-relleno {
  display: block;
  width: 20%;
  height: 100%;
  border-radius: 999px;
  background: var(--mo-bosque);
  transition: width .25s ease;
}

.mo-test__progreso {
  margin: 8px 0 0 !important;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mo-bosque) !important;
}

.mo-test__error {
  margin: 0 0 20px !important;
  padding: 13px 18px;
  border-left: 4px solid #8A5217;
  border-radius: 0 10px 10px 0;
  background: #FAF0E3;
  font-size: .94rem;
  font-weight: 700;
  color: #8A5217 !important;
}

.mo-test__paso {
  margin: 0 0 20px !important;
  padding: 26px !important;
  border: 1px solid var(--mo-linea) !important;
  border-radius: var(--mo-radio);
  background: var(--mo-blanco);
  box-shadow: var(--mo-sombra);
}

.mo-test__paso--avisa { border-color: #8A5217 !important; }

.mo-test__paso-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 18px;
  margin-bottom: 4px;
  width: 100%;
  border-bottom: 1px solid var(--mo-linea);
}

.mo-test__paso-num {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mo-bosque) !important;
}

.mo-test__paso-titulo {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--mo-oscuro) !important;
}

.mo-test__paso-entrada {
  font-size: .92rem;
  color: var(--mo-texto) !important;
}

.mo-test__pregunta {
  padding: 22px 0;
  border-bottom: 1px dashed var(--mo-linea);
}

.mo-test__pregunta:last-child { border-bottom: 0; padding-bottom: 0; }

.mo-test__pregunta--falta { border-left: 3px solid #8A5217; padding-left: 16px; }

.mo-test__enunciado {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px !important;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--mo-oscuro) !important;
  text-transform: none !important;
}

.mo-test__enunciado-num {
  flex: 0 0 auto;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mo-fondo-suave);
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
  color: var(--mo-bosque) !important;
  font-variant-numeric: tabular-nums;
}

.mo-test__ayuda {
  margin: -8px 0 12px 38px !important;
  font-size: .88rem;
  color: var(--mo-bosque) !important;
}

.mo-test__opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.mo-test__opcion {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.mo-test__opcion input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.mo-test__opcion-texto {
  display: block;
  padding: 13px 16px;
  border: 1px solid var(--mo-linea);
  border-radius: 12px;
  background: var(--mo-blanco);
  font-size: .95rem;
  line-height: 1.4;
  color: var(--mo-texto) !important;
  transition: border-color .12s, background .12s;
}

.mo-test__opcion:hover .mo-test__opcion-texto { border-color: var(--mo-salvia); }

.mo-test__opcion input:checked + .mo-test__opcion-texto {
  border-color: var(--mo-bosque);
  box-shadow: inset 0 0 0 1px var(--mo-bosque);
  background: color-mix(in srgb, var(--mo-salvia) 16%, #fff);
  font-weight: 700;
  color: var(--mo-oscuro) !important;
}

.mo-test__opcion input:focus-visible + .mo-test__opcion-texto {
  outline: 3px solid var(--mo-salvia);
  outline-offset: 2px;
}

.mo-test__texto {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--mo-linea) !important;
  border-radius: 12px;
  background: var(--mo-blanco) !important;
  font-family: inherit;
  font-size: .95rem;
  color: var(--mo-texto) !important;
}

.mo-test__texto:focus-visible { outline: 3px solid var(--mo-salvia); outline-offset: 2px; }

.mo-test__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.mo-test__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid var(--mo-bosque);
  background: var(--mo-bosque);
  color: #fff !important;
  font-family: inherit;
  font-size: .96rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}

.mo-test__btn:hover { background: var(--mo-oscuro); border-color: var(--mo-oscuro); }
.mo-test__btn:focus-visible { outline: 3px solid var(--mo-salvia); outline-offset: 2px; }

.mo-test__btn--atras {
  background: transparent;
  color: var(--mo-oscuro) !important;
  border-color: var(--mo-linea);
  margin-right: auto;
}

.mo-test__btn--atras:hover { background: var(--mo-fondo-suave); border-color: var(--mo-bosque); color: var(--mo-oscuro) !important; }

/* Sin JavaScript se ven los 5 pasos seguidos y solo el botón de enviar. */
.mo-test__btn--atras,
.mo-test__btn--sig { display: none; }
.mo-test--js .mo-test__btn--atras,
.mo-test--js .mo-test__btn--sig { display: inline-flex; }

.mo-test--aviso {
  padding: 22px 26px;
  border: 1px solid var(--mo-linea);
  border-radius: var(--mo-radio);
  background: var(--mo-fondo-suave);
}

@media (max-width: 600px) {
  .mo-bienvenida__hero { padding: 32px 22px 28px; border-radius: 18px; }
  .mo-bienvenida__cta { width: 100%; }
  .mo-test__cabecera { padding: 24px 20px 20px; border-radius: 18px; }
  .mo-test__paso { padding: 20px !important; border-radius: 18px; }
  .mo-test__ayuda { margin-left: 0 !important; }
  .mo-test__btn { width: 100%; }
  .mo-test__btn--atras { margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-test__barra-relleno { transition: none; }
}

/* =============================================================================
   9. TU NIVEL  (shortcode [lobxs_mi_nivel])
   -----------------------------------------------------------------------------
   .mo-minivel               Tarjeta (--principiante … --avanzado fijan el color,
                             --sin es el estado «todavía no lo has calculado»)
   .mo-minivel__cuerpo       Columna de texto
   .mo-minivel__insignia     Imagen del rango de GamiPress, a la derecha
   .mo-minivel__chapa        «Tu nivel»
   .mo-minivel__titulo / __apodo
   .mo-minivel__texto        Texto del estado sin nivel
   .mo-minivel__datos        Puntos · fecha · semanas
   .mo-minivel__toca         Aviso de que toca revisar
   .mo-minivel__acciones / __cta (--suave el secundario)
   .mo-minivel__historial    Desplegable con los tests anteriores
   ========================================================================== */

.mo-minivel {
  --mo-color: var(--mo-salvia);
  --mo-sobre: var(--mo-oscuro-plus);
  background: var(--mo-tinte);
  border: 1px solid var(--mo-tinte-fuerte);
  border-radius: var(--mo-radio);
  padding: 26px 28px;
  margin-block: 26px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
}

.mo-minivel--principiante { --mo-color: var(--mo-crema);  --mo-sobre: var(--mo-oscuro); }
.mo-minivel--intermedio-1 { --mo-color: var(--mo-lila);   --mo-sobre: var(--mo-oscuro); }
.mo-minivel--intermedio-2 { --mo-color: var(--mo-salvia); --mo-sobre: var(--mo-oscuro-plus); }
.mo-minivel--avanzado     { --mo-color: var(--mo-bosque); --mo-sobre: var(--mo-blanco); }
.mo-minivel--sin          { --mo-color: var(--mo-salvia); background: var(--mo-fondo-suave); border-color: var(--mo-linea); }

.mo-minivel__cuerpo { flex: 1 1 auto; min-width: 0; }

/* La insignia del rango, a la derecha del nombre */
.mo-minivel__insignia {
  flex: 0 0 auto;
  width: 118px;
  line-height: 0;
}

.mo-minivel__insignia img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

.mo-minivel__chapa {
  display: inline-block;
  margin: 0 0 12px !important;
  padding: 4px 13px;
  border-radius: 999px;
  background: var(--mo-color) !important;
  color: var(--mo-sobre) !important;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mo-minivel__titulo {
  margin: 0 0 12px !important;
  font-size: 1.7rem !important;
  line-height: 1.15;
  font-weight: 800;
  color: var(--mo-oscuro) !important;
  text-transform: none !important;
}

.mo-minivel__apodo {
  display: block;
  margin-top: 5px;
  font-size: .5em;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mo-bosque) !important;
}

.mo-minivel__texto {
  margin: 0 0 16px !important;
  font-size: .98rem;
  color: var(--mo-texto) !important;
}

.mo-minivel__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0 !important;
  font-size: .92rem;
  color: var(--mo-texto) !important;
}

.mo-minivel__datos strong { color: var(--mo-oscuro) !important; font-variant-numeric: tabular-nums; }

.mo-minivel__toca {
  margin: 16px 0 0 !important;
  padding: 12px 16px;
  border-left: 4px solid #8A5217;
  border-radius: 0 10px 10px 0;
  background: #FAF0E3;
  font-size: .92rem;
  color: #8A5217 !important;
}

.mo-minivel__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0 !important;
}

.mo-minivel__cta {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--mo-bosque);
  background: var(--mo-bosque);
  color: #fff !important;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none !important;
}

.mo-minivel__cta:hover,
.mo-minivel__cta:focus-visible { background: var(--mo-oscuro); border-color: var(--mo-oscuro); color: #fff !important; }

.mo-minivel__cta--suave {
  background: transparent;
  color: var(--mo-oscuro) !important;
  border-color: var(--mo-oscuro);
}

.mo-minivel__cta--suave:hover,
.mo-minivel__cta--suave:focus-visible { background: var(--mo-oscuro); color: #fff !important; }

.mo-minivel__historial {
  margin-top: 18px;
  font-size: .9rem;
}

.mo-minivel__historial summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--mo-bosque) !important;
}

.mo-minivel__historial summary:focus-visible { outline: 3px solid var(--mo-salvia); outline-offset: 2px; }

.mo-minivel__historial ul {
  list-style: none !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
}

.mo-minivel__historial li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--mo-linea);
  color: var(--mo-texto) !important;
  font-variant-numeric: tabular-nums;
}

.mo-minivel__historial li:last-child { border-bottom: 0; }
.mo-minivel__historial li::marker { content: ""; }

@media (max-width: 600px) {
  .mo-minivel { padding: 22px 20px; border-radius: 18px; gap: 16px; }
  .mo-minivel__insignia { width: 78px; }
  .mo-minivel__cta { width: 100%; text-align: center; }
}

/* ============ FIN NIVELES DE TRAIL RUNNING ============ */

/* ==========================================================================
   REVISIÓN MÓVIL (13/10/2026)
   ========================================================================== */

/* El tema pone todos los títulos en "Title Case" (Cada Palabra En Mayúscula).
   En castellano los títulos van en frase: lo desactivamos en todo el sitio. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	text-transform: none;
}

/* La ficha del curso cortaba el título con puntos suspensivos en móvil. */
.learnpress .lp-archive-courses .course-summary-content .course-title {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
	text-overflow: clip;
}

/* Cabecera fija en móvil: el logo de 110px ocupaba un cuarto de la pantalla. */
@media (max-width: 767px) {
	header.header-verticle .logo-main img {
		height: 64px !important;
		width: auto !important;
	}
	header.header-verticle .navbar {
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}
}

/*              FIN REVISIÓN MÓVIL              */