/**
 * El layout: navbar con megamenus, cajon movil y pie.
 *
 * La navegacion es una replica del Figma "Navegacion" (641-16522) y todos sus
 * valores salen de los tokens de variables.css. Donde el diseño usa un valor
 * que el sistema no tiene como token, va anotado.
 */

/* Enlace de salto (WCAG 2.4.1): primero en el orden de tabulacion, invisible
   hasta que recibe el foco. */
.mm-saltar {
	position: absolute;
	left: var( --s-4 );
	top: var( --s-4 );
	z-index: 1100;
	padding: var( --s-3 ) var( --s-4 );
	border-radius: var( --rad-sm );
	background: var( --surface );
	color: var( --text );
	font-family: var( --font );
	font-size: var( --body-size );
	font-weight: 600;
	text-decoration: none;
	transform: translateY( -200% );
}

.mm-saltar:focus {
	outline: 3px solid var( --focus );
	transform: none;
}

/* El <main> recibe el foco al saltar; no debe dibujar anillo por ello. */
.mm-contenido:focus {
	outline: 0;
}

/* ------------------------------------------------------------------ Navbar */

/*
 * Pila de la navegacion sobre el tema antiguo.
 *
 * El tema es Bootstrap y hay contenido que lleva la clase .tooltip sin ser un
 * tooltip: se lleva puesto su z-index 1070 y tapaba la navbar. Nos ponemos por
 * encima de esa franja de Bootstrap (dropdown 1000 … tooltip 1070) y muy por
 * debajo de los overlays de verdad del tema, que empiezan en 9999 (#livebox,
 * el menu del tema, #cookiesInfo). Asi el menu tapa al contenido, pero un
 * lightbox o el aviso de cookies siguen tapando al menu.
 */
.mm-navbar {
	position: sticky;
	top: 0;
	z-index: 1080;
	background: var( --surface );
}

/*
 * En las paginas del tema antiguo, el que se pega es el envoltorio.
 *
 * Ahi esta cabecera no cuelga del <body> sino del <header class="header"> que
 * pinta templates/base.twig, y ese envoltorio mide exactamente lo que la
 * navbar. Un elemento pegajoso solo se mueve dentro de su contenedor, asi que
 * sin recorrido no se pega a nada: la barra se iba con el header al hacer
 * scroll. En las paginas Gutenberg no pasa porque ahi cuelga del body.
 *
 * Se pega el envoltorio y no se cambia el marcado: tocar base.twig es tocar la
 * plantilla de todo el sitio viejo. El :has acota la regla a cuando lleva
 * nuestra barra dentro, para no volver pegajosa la cabecera de una pagina que
 * no la use.
 *
 * El !important es la unica forma: ese <header> lleva la clase de utilidad
 * "position-relative" del tema, que se declara como
 * ".position-relative{position:relative!important}" en custom.min.css, y contra
 * un !important no valen ni la especificidad ni el orden de las hojas.
 */
.header:has( > .mm-navbar ) {
	position: sticky !important;
	top: 0;
	z-index: 1080;
}

.mm-navbar__interior {
	display: flex;
	align-items: center;
	gap: var( --s-6 );
	max-width: var( --contenedor );
	margin: 0 auto;
	padding: var( --s-5 ) var( --margen-pagina );
}

.mm-navbar__logo {
	margin-right: auto;
}

.mm-navbar__logo img {
	display: block;
	width: auto;
	height: 50px;
	object-fit: contain;
}

/* Reset de listas de navegacion. Va en :where() a proposito: no suma
   especificidad, asi que cualquier regla de clase le gana. Sin eso, un
   descendiente como ".mm-cajon ul" (0,1,1) le borraria el padding a
   .mm-cajon__hijos (0,1,0) por especificidad, sin importar el orden. */
:where( .mm-navbar__nav, .mm-cajon ) ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Hijo directo a proposito: los megamenus cuelgan del <li> de su boton (asi el
   tabulador entra en el panel al abrirlo), asi que un descendiente aqui
   alcanzaria tambien todas las listas de subniveles y las pondria en fila. */
.mm-navbar__nav > ul {
	display: flex;
	align-items: center;
	gap: var( --s-2 );
}

/*
 * Los enlaces y botones de seccion son el boton fantasma del sistema, sin una
 * sola declaracion propia: .mm-boton .mm-boton--fantasma en el marcado. La
 * clase .mm-navbar__item se queda solo para colgar de ella lo de aqui (el
 * anillo de foco pegado) y para que el JS y el resto de la hoja los nombren.
 */

.mm-navbar__acciones {
	display: flex;
	align-items: center;
	gap: var( --s-6 );
}

.mm-navbar__icono {
	display: flex;
	align-items: center;
	gap: var( --s-2 );

	/* El fondo del hover va a 12px del icono, lo mismo que en los botones de
	   seccion (10 de relleno y 2 de borde). El margen negativo devuelve ese
	   relleno a la maquetacion: la lupa no se mueve de su sitio. */
	padding: var( --s-3 );
	margin: calc( -1 * var( --s-3 ) );
	border: 0;
	border-radius: var( --rad-sm );
	background: none;
	color: var( --text );
	font-family: var( --font );
	font-size: var( --body-size );
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var( --motion-link ) var( --motion-ease ),
		color var( --motion-link ) var( --motion-ease );
}

/* El hover de los botones de seccion (.mm-boton--fantasma, componentes.css). */
.mm-navbar__icono:hover {
	background: var( --accent-bg );
	color: var( --accent-hover );
}

/* La tienda tambien es un boton fantasma. Lo unico suyo es la separacion: su
   icono es de 24px, no el chevron de 16px con el que el componente calcula
   los 4px de hueco. */
.mm-navbar__tienda {
	gap: var( --s-2 );
}

/*
 * La flecha del desplegable va en rojo aunque la letra sea negra (Figma
 * 1525-9669).
 *
 * Va aqui y no en el fantasma de componentes.css porque no es "el icono de un
 * boton fantasma": el carrito de la tienda es ese mismo boton y en el diseno va
 * negro, con la letra. Lo rojo es la flecha de los desplegables de la navbar, y
 * nada mas.
 */
.mm-navbar__item .mm-icono {
	color: var( --accent );
}

/* En hover, foco y abierto la letra ya es roja —y mas oscura—, asi que la
   flecha vuelve a seguirla en vez de quedarse en el rojo base. */
.mm-navbar__item:hover .mm-icono,
.mm-navbar__item:focus-visible .mm-icono,
.mm-navbar__item[aria-expanded='true'] .mm-icono {
	color: inherit;
}

/*
 * La raya del desplegable abierto (Figma 926-105066): 3px de --accent-active
 * apoyados en el borde de abajo de la navbar, justo encima del panel, y del
 * ancho del texto del boton, sin sus 16 de relleno a cada lado.
 *
 * Cuelga del boton y no del <li> porque el <li> no puede ser relative: es el
 * panel ancho el que se mide contra la navbar. Por eso el boton suelta el
 * overflow que la base le pone para la bolita, que el fantasma no lleva. Los
 * 2px son el borde transparente de la base: las posiciones cuentan desde dentro.
 */
.mm-navbar__item {
	overflow: visible;
}

.mm-navbar__item[aria-expanded='true']::after {
	content: '';
	position: absolute;
	right: calc( var( --s-4 ) - 2px );
	bottom: calc( -1 * ( var( --s-5 ) + 2px ) );
	left: calc( var( --s-4 ) - 2px );
	height: 3px;
	background: var( --accent-active );
}

/* Solo se ve en la navbar colapsada. */
.mm-navbar__ayuda {
	display: none;
	margin: 0;
	font-size: var( --body-size );
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
}

/*
 * El paso a colapsada, animado.
 *
 * Lo que cambia de tamaño son dos cosas —el relleno de la barra y el alto del
 * logo—, asi que son esas dos las que se funden; la sombra va con ellas para no
 * aparecer de golpe. Lo que se esconde (nav, iconos, buscador) sale del flujo y
 * no se puede fundir: si se quedara ocupando sitio, la barra no se compactaria.
 *
 * Opt-in con no-preference, como el resto de la hoja: quien pida menos
 * movimiento ve el cambio seco, que es lo que habia hasta ahora.
 *
 * ponytail: se animan relleno y alto, que son propiedades de maquetacion y
 * rehacen el flujo en cada fotograma. A esta escala —26px en 220ms, y solo lo
 * que hay debajo de una barra sticky— no se nota. Si algun dia va a tirones en
 * una pagina pesada, el arreglo es pasar la navbar a position:fixed, y entonces
 * el documento ni se entera de que la barra encoge.
 */
@media ( prefers-reduced-motion: no-preference ) {
	.mm-navbar {
		transition: box-shadow var( --motion-link ) var( --motion-ease );
	}

	.mm-navbar__interior {
		transition: padding var( --motion-link ) var( --motion-ease );
	}

	.mm-navbar__logo img {
		transition: height var( --motion-link ) var( --motion-ease );
	}
}

/*
 * Sin animar el colapso, para un solo cambio: al llegar a una pagina desde una
 * pestaña con la barra pegada, pestanas.js colapsa la navbar antes del primer
 * pintado, y animado se la veria encoger justo al aparecer. La clase la pone y
 * la quita ese script; aqui solo se dice que hace.
 */
.mm-sin-transiciones .mm-navbar,
.mm-sin-transiciones .mm-navbar__interior,
.mm-sin-transiciones .mm-navbar__logo img {
	transition: none;
}

/* Navbar colapsada: aparece al bajar y deja solo logo, aviso y CTA. */
.mm-navbar.is-colapsada .mm-navbar__interior {
	padding-top: var( --s-4 );
	padding-bottom: var( --s-4 );
}

.mm-navbar.is-colapsada {
	box-shadow: 0 6px 24px rgba( 26, 26, 26, .1 );
}

.mm-navbar.is-colapsada .mm-navbar__logo img {
	height: 40px;
}

.mm-navbar.is-colapsada .mm-navbar__nav,
.mm-navbar.is-colapsada .mm-navbar__icono,
.mm-navbar.is-colapsada .mm-navbar__tienda,
.mm-navbar.is-colapsada .mm-buscador {
	display: none;
}

.mm-navbar.is-colapsada .mm-navbar__ayuda {
	display: block;
}

/* Los botones de solo icono son de 24px por diseño; el area de pulsacion se
   estira a 44px con un pseudoelemento, que no altera la maquetacion
   (WCAG 2.5.8, tamaño del objetivo). */
.mm-navbar__icono,
.mm-navbar__hamburguesa,
.mm-cajon__cerrar,
.mm-buscador button {
	position: relative;
}

.mm-navbar__icono::after,
.mm-navbar__hamburguesa::after,
.mm-cajon__cerrar::after,
.mm-buscador button::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate( -50%, -50% );
}

/* Iconos inline: heredan color via currentColor. */
.mm-icono {
	display: inline-flex;
	flex: none;
}

.mm-icono svg {
	display: block;
	width: 16px;
	height: 16px;
}

.mm-icono--24 svg {
	width: 24px;
	height: 24px;
}

.mm-icono--derecha {
	transform: rotate( -90deg );
}

.mm-icono--izquierda {
	transform: rotate( 90deg );
}

/* El boton (.mm-boton y sus variantes, foco incluido) vive en componentes.css:
   lo usan la cabecera, el catalogo y los bloques, no solo esta hoja. */

/*
 * Foco: anillo azul del sistema, pegado al elemento.
 *
 * El item del navbar y la tienda son .mm-boton, asi que les llega tambien el
 * anillo separado de componentes.css. Este pisa aquel a proposito: pesan lo
 * mismo en la cascada y esta hoja va detras. Es lo que dibuja el Figma para el
 * fantasma, un borde azul sobre el propio boton, y con la separacion el anillo
 * se comeria el hueco de 8px que hay entre secciones.
 */
.mm-navbar__item:focus-visible,
.mm-navbar__icono:focus-visible,
.mm-navbar__tienda:focus-visible,
.mm-mega a:focus-visible,
.mm-cajon button:focus-visible,
.mm-cajon a:not( .mm-boton ):focus-visible {
	outline: 3px solid var( --focus );
	outline-offset: 0;
}

/* --------------------------------------------------------------- Buscador */

.mm-buscador {
	display: flex;
	align-items: center;
	gap: var( --s-2 );
	padding: 12px var( --s-5 );
	border: 1px solid var( --border-fn );
	border-radius: var( --rad-pill );
}

.mm-buscador input {
	width: 260px;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var( --text );
	font-family: var( --font );
	font-size: var( --body-size );
	line-height: 1.6;
}

.mm-buscador input::placeholder {
	color: var( --text-muted );
}

.mm-buscador input:focus {
	outline: 0;
}

.mm-buscador:focus-within {
	outline: 3px solid var( --focus );
	outline-offset: 2px;
}

.mm-buscador button {
	display: flex;
	padding: 0;
	border: 0;
	background: none;
	color: var( --text );
	cursor: pointer;
}

/*
 * Apertura y cierre. menu.js esconde la lupa y muestra el campo en su sitio,
 * asi que la animacion tiene que leerse como que uno se despliega del otro:
 * crece el campo, de 0 a sus 260px. El relleno de 24px deja la caja arrancando
 * en unos 50px, casi los 44 del area de pulsacion de la lupa, asi que no hace
 * falta animar nada mas.
 *
 * Se usa animation y no transition a proposito: el campo va con el atributo
 * hidden, y de display:none no se puede transicionar.
 *
 * El cierre lo dispara menu.js con .is-cerrando y espera al animationend para
 * poner el hidden. Por eso el fundido de salida NO puede quedar detras de
 * prefers-reduced-motion: si no se ejecutase, el evento no llegaria nunca y el
 * buscador se quedaria abierto. Lo que si se reserva al movimiento normal es el
 * despliegue del campo, que es lo unico que se mueve de verdad.
 */
/*
 * Cada sentido con sus propios @keyframes, no un "reverse" del mismo nombre.
 * Una animacion solo arranca cuando cambia el nombre: reutilizandolo, con la de
 * apertura ya terminada, el cierre no se ejecutaba, no llegaba el animationend
 * y el formulario se quedaba a medias, invisible pero enfocable.
 *
 * Los de cierre son solo "to": el valor de partida es el que ya tiene puesto el
 * elemento. Y llevan forwards para mantener el estado final hasta que llega el
 * hidden, para que no pegue un salto en el ultimo fotograma.
 */
.mm-buscador:not( [hidden] ) {
	animation: mm-buscador-fundido var( --motion-panel ) var( --motion-ease );
}

/* Detras del de apertura a proposito: pesan lo mismo y este tiene que ganar. */
.mm-buscador.is-cerrando {
	animation: mm-buscador-fundido-fin var( --motion-panel ) var( --motion-ease ) forwards;
}

@keyframes mm-buscador-fundido {
	from {
		opacity: 0;
	}
}

@keyframes mm-buscador-fundido-fin {
	to {
		opacity: 0;
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	/*
	 * Con movimiento normal no hay fundido, hay despliegue: el formulario nace
	 * midiendo lo mismo que la lupa a la que sustituye y crece desde ahi.
	 *
	 * Cerrado son sus 24px de icono y nada mas: sin relleno lateral, sin hueco,
	 * sin borde y con el campo a 0. Como las acciones de la navbar van pegadas
	 * a la derecha, el hueco que crece sale por la izquierda y el icono no se
	 * mueve del sitio: es literalmente la lupa abriendose. Antes el formulario
	 * entraba con su relleno puesto, unos 74px, y esos 50px de diferencia eran
	 * el salto que se veia al abrir y al cerrar.
	 *
	 * Y sin fundido a proposito: el icono es el mismo en los dos estados, tiene
	 * que quedarse solido todo el rato o parpadea al cambiar de elemento.
	 */
	.mm-buscador:not( [hidden] ) {
		animation-name: mm-buscador-caja;
	}

	.mm-buscador.is-cerrando {
		animation-name: mm-buscador-caja-fin;
	}

	.mm-buscador:not( [hidden] ) input {
		animation: mm-buscador-campo var( --motion-panel ) var( --motion-ease );
	}

	.mm-buscador.is-cerrando input {
		animation: mm-buscador-campo-fin var( --motion-panel ) var( --motion-ease ) forwards;
	}
}

/*
 * El borde va aparte de la geometria: se apaga y se enciende con el color, y
 * no a la vez que el ancho.
 *
 * Con la caja plegada el borde dibuja un recuadro oscuro de 24px alrededor del
 * icono, que no pinta nada: la lupa suelta no lo lleva. Asi que al cerrar se va
 * en el primer tercio, mucho antes de terminar de plegarse, y al abrir no
 * aparece hasta el ultimo. El ancho si recorre toda la animacion, porque de el
 * dependen los 2px que hacen que la caja cerrada mida lo mismo que la lupa.
 *
 * El valor que falta en cada extremo es el computado del elemento: en el de
 * apertura, el 100% implicito; en el de cierre, el 0% implicito.
 */
@keyframes mm-buscador-caja {
	from {
		gap: 0;
		padding-left: 0;
		padding-right: 0;
		border-width: 0;
		border-color: transparent;
	}

	65% {
		border-color: transparent;
	}
}

@keyframes mm-buscador-caja-fin {
	35% {
		border-color: transparent;
	}

	to {
		gap: 0;
		padding-left: 0;
		padding-right: 0;
		border-width: 0;
		border-color: transparent;
	}
}

@keyframes mm-buscador-campo {
	from {
		width: 0;
	}
}

@keyframes mm-buscador-campo-fin {
	to {
		width: 0;
	}
}

/* --------------------------------------------------------------- Megamenu */

.mm-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var( --surface );
	border-radius: 0 0 var( --rad-xl ) var( --rad-xl );
	box-shadow: 0 14px 32px rgba( 0, 0, 0, .18 );
	padding-inline: var( --margen-pagina );

	/*
	 * El recorte del telon va aqui y no en el interior: el fondo de hover de
	 * los enlaces sobresale 8px del texto, y puesto en el interior lo cortaba
	 * en la columna pegada al margen.
	 */
	overflow: hidden;

	/*
	 * Cerrado. Antes el panel iba con el atributo hidden; ahora se queda en la
	 * pagina para poder animarse, plegado a cero y con visibility:hidden, que es
	 * lo que lo saca del tabulador y del arbol de accesibilidad igual que hacia
	 * el hidden. menu.js pone y quita .is-abierta.
	 */
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
}

.mm-mega.is-abierta {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
}

.mm-mega__interior {
	/* Para que la fila de la rejilla pueda bajar de lo que ocupa el contenido;
	   quien lo tapa mientras baja es el overflow de .mm-mega. */
	min-height: 0;

	display: flex;
	align-items: flex-start;
	/* ponytail: el diseño separa la rejilla de la banda con 40px, un valor que
	   la escala de espaciado no tiene. */
	gap: 40px;
	max-width: var( --contenedor );
	margin: 0 auto;

	/*
	 * Ancho definido, y no el estirado de un elemento de rejilla: con margenes
	 * automaticos el estirado no se aplica —los margenes se comen el hueco— y la
	 * caja se quedaba del ancho de su contenido, con lo que la rejilla de
	 * columnas de dentro caia a una sola. El hueco lateral esta ahora en
	 * .mm-mega, para que este 100% no se sume al relleno.
	 */
	width: 100%;
}

/*
 * El hueco de arriba y abajo, que antes era el padding de esta misma caja, va
 * ahora en sus hijos. No es un capricho: el relleno de un elemento de rejilla no
 * encoge, asi que con los 24 y los 64 aqui la fila se quedaba clavada en 88px y
 * el panel cerrado seguia ocupando esa franja. Puesto en los hijos cuenta como
 * contenido, que es justo lo que el min-height de arriba deja llegar a cero.
 *
 * Se ve igual: la banda y la rejilla se alinean arriba, asi que el alto del
 * panel lo sigue marcando la columna mas alta mas su propio hueco.
 */
.mm-mega__interior > * {
	padding-block: var( --s-5 ) var( --s-8 );
}

/*
 * La entrada del panel: se despliega como un telon y las piezas de dentro
 * —epigrafes, titulos de columna, enlaces— entran detras en cascada. Portado del
 * megamenu de wordpress.com (spec megamenu-animation-specs.md).
 *
 * El alto no se anima con height: height:auto no interpola, y medirlo desde JS
 * obliga a volver a medir en cada cambio de ancho. Se anima la fila de la
 * rejilla, de 0fr a 1fr, que el navegador si sabe interpolar y no necesita saber
 * cuanto mide nada.
 *
 * Las duraciones y la curva son las del sistema —--motion-panel, --motion-link y
 * --motion-ease— y no las ocho variables de la spec: dos escalas de tiempo en la
 * misma pagina acaban descuadrando. Lo unico que no existia son los numeros de
 * la cascada, y esos estan en variables.css con el resto del movimiento, porque
 * el cajon movil usa los mismos.
 *
 * Al cerrar no hay cascada: el retardo solo vive en el estado abierto, asi que
 * al quitar la clase todo se va a la vez.
 */
.mm-mega .mm-anim {
	opacity: 0;

	/* ponytail: 8px es el unico numero de la spec que no esta medido, sino
	   deducido del aspecto. Entre 4 y 12 sigue leyendose bien. */
	transform: translateY( var( --motion-alza ) );
}

.mm-mega.is-abierta .mm-anim {
	opacity: 1;
	transform: none;
}

@media ( prefers-reduced-motion: no-preference ) {
	.mm-mega {
		transition:
			grid-template-rows var( --motion-panel ) var( --motion-ease ),
			opacity var( --motion-link ) var( --motion-ease ),
			visibility 0s linear var( --motion-panel );
	}

	/* Al abrir, la visibilidad vuelve en el primer fotograma; al cerrar espera a
	   que el telon haya terminado de bajar. */
	.mm-mega.is-abierta {
		transition:
			grid-template-rows var( --motion-panel ) var( --motion-ease ),
			opacity var( --motion-link ) var( --motion-ease ),
			visibility 0s linear 0s;
	}

	.mm-mega .mm-anim {
		transition:
			opacity var( --motion-panel ) var( --motion-ease ),
			transform var( --motion-panel ) var( --motion-ease );
	}

	/*
	 * El calculo va aqui y no en una variable de .mm-mega: una propiedad
	 * personalizada se resuelve donde se declara, asi que alli var(--i) seria
	 * siempre el del panel —ninguno— y las 34 piezas entrarian a la vez.
	 */
	.mm-mega.is-abierta .mm-anim {
		transition-delay: calc(
			var( --motion-escalon ) +
			var( --motion-escalon-paso ) * min( var( --i, 0 ), var( --motion-escalon-tope ) )
		);
	}

	/*
	 * Salvaguarda de foco: tabular nada mas abrir dejaba el foco en un enlace
	 * que todavia estaba a opacidad 0. La pieza enfocada se planta entera y
	 * cancela la transicion que tuviera en curso.
	 */
	.mm-mega.is-abierta .mm-anim:focus-within {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.mm-mega__grupo--ancho {
	flex: 1;
	min-width: 0;
}

/*
 * La banda de la derecha va en dos columnas que se llenan de arriba abajo,
 * como en el Figma 677-17974: Formacion Profesional y Diversificacion una bajo
 * la otra, Bienestar escolar al lado.
 *
 * ponytail: dos filas fijas; con mas de cuatro grupos estrechos saldria una
 * tercera columna apretada. Si llega ese caso, medirlo en el diseño.
 */
.mm-mega__banda {
	display: grid;
	flex: none;
	grid-template-columns: repeat( 2, 1fr );
	grid-template-rows: repeat( 2, auto );
	grid-auto-flow: column;
	align-items: start;
	gap: var( --s-7 );
	width: 544px;
}

/*
 * Una seccion sin ningun grupo ancho (Instituciones) no es un panel a todo el
 * ancho sino una tarjeta colgada de su boton, con el contenido a ras del borde
 * izquierdo del boton y el mismo relleno que el megamenu (Figma 1525-9463).
 *
 * El <li> pasa a ser el contenedor del panel, y el panel sube hasta el borde
 * inferior de la navbar: el 100% del <li> mas el relleno de abajo del interior.
 *
 * ponytail: da por hecho que el <li> mide lo mismo que el interior, es decir,
 * que ningun otro elemento de la barra (logo, CTA) es mas alto que el boton.
 */
.mm-navbar__compacta {
	position: relative;
}

.mm-navbar__compacta .mm-mega {
	top: calc( 100% + var( --s-5 ) );
	left: calc( -1 * var( --margen-pagina ) );
	right: auto;
	width: max-content;
}

/* ponytail: 313 es lo que mide la columna en el Figma; no sale de ningun token. */
.mm-mega__interior > .mm-mega__grupo:not( .mm-mega__grupo--ancho ) {
	flex: none;
	width: 313px;
}

.mm-mega__titulo {
	margin: 0 0 var( --s-5 );
	padding-bottom: var( --s-4 );
	border-bottom: 1px solid var( --line );
	font-size: var( --body-size );
	font-weight: 600;
	line-height: 1.6;
}

/*
 * Los idiomas fluyen en dos columnas y cada uno entra entero en una: Ingles a
 * la izquierda y Frances y Aleman apilados a la derecha, que es como lo reparte
 * el Figma 677-17974. El alto lo equilibra el navegador solo.
 */
.mm-mega__columnas {
	columns: 2;
	column-gap: var( --s-6 );
}

.mm-mega__col {
	break-inside: avoid;
}

/* El hueco entre idiomas apilados; el ultimo no lo lleva, o el panel crece
   esos 32px por debajo del contenido. */
.mm-mega__col:not( :last-child ) {
	margin-bottom: var( --s-6 );
}

.mm-mega__col-titulo {
	margin: 0 0 var( --s-2 );
	font-size: var( --caption-size );
	font-weight: 600;
	line-height: var( --caption-line );
	text-transform: uppercase;
}

.mm-mega__col-titulo a {
	color: var( --text );
	text-decoration: none;
}

/* Los titulos de grupo enlazan cuando la entrada del menu tiene destino; si es
   "#" se quedan como texto, que es como los dibuja el Figma. */
.mm-mega__titulo a {
	color: inherit;
	text-decoration: none;
}

.mm-mega__titulo a:hover,
.mm-mega__col-titulo a:hover {
	text-decoration: underline;
}

.mm-mega__lista {
	display: grid;
	gap: var( --s-1 );
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * El texto va a ras del epigrafe, como en el diseño: el relleno lateral, que es
 * el del fondo de hover, se descuenta con el margen.
 *
 * ponytail: 6px es lo que mide el enlace en el Figma; no esta en la escala.
 */
.mm-mega__lista a,
.mm-mega__externo {
	display: flex;
	align-items: center;
	gap: var( --s-2 );
	padding: 6px var( --s-2 );
	margin-inline: calc( -1 * var( --s-2 ) );
	border-radius: var( --rad-sm );
	color: var( --text );
	font-size: var( --body-sm-size );
	line-height: 1.5;
	text-decoration: none;
}

.mm-mega__lista a:hover,
.mm-mega__externo:hover {
	background: var( --accent-bg );
}

.mm-mega__externo {
	margin-top: var( --s-5 );
	font-weight: 600;
}

/* ----------------------------------------------------------- Cajon movil */

/*
 * El cajon entra desde la derecha y se va por donde vino, y dentro cada nivel
 * es una pantalla que llega con sus filas en cascada. Es la misma gramatica del
 * megamenu de escritorio —telon y cascada, mismos tiempos y misma curva— dicha
 * en horizontal, que es como se navega en un movil.
 *
 * Cerrado es display:none, igual que el hidden que llevaba antes: sin JS, o con
 * el cajon sin abrir, no existe ni para el tabulador ni para un lector. Lo que
 * lo hace animable es @starting-style, que da el estilo del fotograma anterior a
 * aparecer, y el allow-discrete del display, que sostiene la caja mientras se
 * va. Donde no haya soporte el cajon aparece y desaparece de golpe, que es
 * exactamente lo que hacia hasta ahora.
 */
.mm-cajon {
	position: fixed;
	inset: 0;
	z-index: 1090;
	display: none;
	flex-direction: column;
	overflow-y: auto;
	background: var( --surface );
	overscroll-behavior: contain;

	/* Lo que se desplaza un panel al cambiar de nivel. El cajon entero viaja el
	   ancho de la pantalla; un nivel dentro de el, solo lo justo para que se lea
	   de donde viene. */
	--mm-viaje: var( --s-5 );
}

.mm-cajon.is-abierto {
	display: flex;
}

@media ( prefers-reduced-motion: no-preference ) {
	.mm-cajon {
		transform: translateX( 100% );
		opacity: 0;
		transition:
			transform var( --motion-panel ) var( --motion-ease ),
			opacity var( --motion-link ) var( --motion-ease ),
			display var( --motion-panel ) allow-discrete;
	}

	.mm-cajon.is-abierto {
		transform: none;
		opacity: 1;
	}

	@starting-style {
		.mm-cajon.is-abierto {
			transform: translateX( 100% );
			opacity: 0;
		}
	}

	/*
	 * Cada nivel llega por el lado del que viene: bajando, desde la derecha;
	 * volviendo, desde la izquierda. El sentido lo apunta menu.js en el cajon.
	 */
	.mm-cajon__panel.is-activo {
		transform: none;
		opacity: 1;
		transition:
			transform var( --motion-panel ) var( --motion-ease ),
			opacity var( --motion-link ) var( --motion-ease );
	}

	@starting-style {
		.mm-cajon[data-mm-sentido='adelante'] .mm-cajon__panel.is-activo {
			transform: translateX( var( --mm-viaje ) );
			opacity: 0;
		}

		.mm-cajon[data-mm-sentido='atras'] .mm-cajon__panel.is-activo {
			transform: translateX( calc( var( --mm-viaje ) * -1 ) );
			opacity: 0;
		}
	}

	/* Y detras, las filas del nivel en cascada, con los mismos numeros que el
	   megamenu: es la misma animacion contada en otra pantalla. */
	.mm-cajon__panel.is-activo .mm-anim {
		transform: none;
		opacity: 1;
		transition:
			transform var( --motion-panel ) var( --motion-ease ),
			opacity var( --motion-panel ) var( --motion-ease );
		transition-delay: calc(
			var( --motion-escalon ) +
			var( --motion-escalon-paso ) * min( var( --i, 0 ), var( --motion-escalon-tope ) )
		);
	}

	@starting-style {
		.mm-cajon__panel.is-activo .mm-anim {
			transform: translateY( var( --motion-alza ) );
			opacity: 0;
		}
	}

	/* La misma salvaguarda del megamenu: tabular nada mas abrir no puede dejar
	   el foco en una fila que todavia no ha entrado. */
	.mm-cajon__panel.is-activo .mm-anim:focus-within {
		transform: none;
		opacity: 1;
		transition: none;
	}

	/* El acordeon usa el telon del megamenu, y su visibility espera a que la
	   lista termine de recogerse, igual que alli. */
	.mm-cajon__acordeon {
		transition: grid-template-rows var( --motion-panel ) var( --motion-ease );
	}

	.mm-cajon__acordeon > .mm-cajon__hijos {
		transition: visibility 0s linear var( --motion-panel );
	}

	.mm-cajon__acordeon:has( [aria-expanded='true'] ) > .mm-cajon__hijos {
		transition: visibility 0s linear 0s;
	}

	/* Y la flecha de la cabecera gira como la del megamenu. */
	.mm-cajon__fila .mm-icono {
		transition: transform var( --motion-link ) var( --motion-ease );
	}
}

.mm-cajon__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var( --s-5 ) var( --s-4 );
}

.mm-cajon__cabecera .mm-navbar__logo img {
	height: 36px;
}

.mm-cajon__cerrar {
	display: flex;

	/* Sin relleno y con el icono a 32, como la hamburguesa que lo abre: en el
	   diseño la aspa llega al margen. El area de pulsacion de 44px la sigue
	   poniendo el ::after. */
	padding: 0;
	border: 0;
	background: none;
	color: var( --text );
	cursor: pointer;
}

.mm-cajon__cerrar .mm-icono svg {
	width: 32px;
	height: 32px;
}

.mm-cajon__panel {
	display: none;
	flex: 1;
	flex-direction: column;
}

.mm-cajon__panel.is-activo {
	display: flex;
}

/* Solo la raiz: el diseño la separa de la cabecera y deja aire abajo. */
.mm-cajon__panel[data-mm-nivel='raiz'] {
	padding: var( --s-3 ) 0 var( --s-5 );
}

.mm-cajon__fila,
.mm-cajon__volver {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --s-2 );
	width: 100%;
	min-height: 64px;
	padding: var( --s-4 ) 20px;
	border: 0;
	background: none;
	color: var( --text );
	font-family: var( --font );
	font-size: var( --h6-size );
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

/*
 * La fila de vuelta es la cabecera del nivel: fondo de acento y titulo.
 *
 * El mismo tinte en todos los niveles. Antes se reforzaba al bajar —red/50 en
 * la seccion y red/100 en la columna—, pero los frames de los dos niveles
 * (926-105367 y 677-21488) pintan los dos con red/100.
 */
.mm-cajon__volver {
	justify-content: flex-start;
	background: var( --accent-bg-strong );
	color: var( --accent-active );
}

.mm-cajon__acordeon [aria-expanded='true'] .mm-icono {
	transform: scaleY( -1 );
}

/*
 * El acordeon se pliega con el mismo telon que el megamenu: una rejilla de dos
 * filas —la cabecera y la lista— donde la de la lista pasa de 0fr a 1fr.
 *
 * El estado no lo lleva una clase sino el aria-expanded de su propia cabecera,
 * que es donde ya vivia: asi el CSS lee el estado de verdad y menu.js no tiene
 * que mantener dos sitios diciendo lo mismo.
 */
.mm-cajon__acordeon {
	display: grid;
	grid-template-rows: auto 0fr;
}

/*
 * La cabecera de un acordeon es mas baja que una fila de nivel: el diseño le
 * deja los 55 que salen de su propio texto y su relleno (16 + 23 + 16), sin el
 * suelo de 64 que llevan las filas que sí llevan a otra pantalla. Se quita el
 * suelo en vez de escribir 55, que es el mismo numero dicho dos veces.
 */
.mm-cajon__acordeon .mm-cajon__fila {
	min-height: 0;
}

.mm-cajon__acordeon:has( [aria-expanded='true'] ) {
	grid-template-rows: auto 1fr;
	padding-bottom: var( --s-3 );
	border-bottom: 1px solid var( --line );
}

/* Plegada no se puede tabular: la visibility hace aqui lo que hacia el hidden.
   Solo la del acordeon; la de los paneles sueltos del cuarto nivel no se pliega
   nunca. */
.mm-cajon__acordeon > .mm-cajon__hijos {
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
}

.mm-cajon__acordeon:has( [aria-expanded='true'] ) > .mm-cajon__hijos {
	visibility: visible;
}

/*
 * Sangria de los hijos, la del diseño (nodos 926-105367 y 677-21488): la fila
 * ocupa de 20 a 382 y su propio relleno de 8 es todo el escalon, asi que el
 * texto del hijo cae en 28 frente a los 20 del titulo del grupo y la flecha
 * termina en 374, en el margen de la pagina.
 *
 * Una version anterior lo separaba 32 para que el nivel se leyera de un
 * vistazo; se volvio a los 8 del frame al repasar el menu pantalla a pantalla.
 */
.mm-cajon__hijos {
	display: grid;
	gap: var( --s-1 );
	padding: 0 var( --s-2 ) 0 20px;
}

/*
 * Los 8px de abajo, que antes eran relleno de la lista, van en su ultima fila.
 * Es la misma razon que en el megamenu: el relleno de un elemento de rejilla no
 * encoge, y con el puesto en la lista el acordeon plegado se quedaba con una
 * franja de 8px en vez de desaparecer. Dentro de la fila cuenta como contenido,
 * y se ve igual.
 */
.mm-cajon__hijos > li:last-child {
	padding-bottom: var( --s-2 );
}

.mm-cajon__hijo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --s-2 );
	width: 100%;
	min-height: 48px;
	padding: var( --s-2 );
	border: 0;
	border-radius: var( --rad-sm );
	background: none;
	color: var( --text );
	font-family: var( --font );
	font-size: var( --body-size );
	font-weight: 600;
	line-height: 1.6;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

/* Solo donde hay raton de verdad: en tactil el :hover se queda pegado despues
   de tocar, y como este fondo es el mismo de la fila de cabecera, la fila
   tocada se quedaba pintada como si lo fuera. */
@media ( hover: hover ) {
	.mm-cajon__hijo:hover,
	.mm-cajon__fila:hover {
		background: var( --accent-bg );
	}
}

.mm-cajon__hijo--externo {
	color: var( --accent-active );
}

/* Hoja: no lleva a ningun sitio mas hondo, asi que ni flecha ni negrita. La
   flecha significa "aqui se entra"; sin submenu detras, enganya. */
.mm-cajon__hijo--hoja {
	font-weight: 400;
}

/* En el nivel mas hondo la lista no cuelga de un acordeon, asi que se separa
   ella misma de la cabecera y cierra con la linea. */
.mm-cajon__hijos--sueltos {
	padding-top: var( --s-3 );
	border-bottom: 1px solid var( --line );
}

/* El CTA vive al fondo del cajon, no pegado a la ultima fila. */
.mm-cajon__cta {
	margin: auto 20px 0;
}

/* La fila de la tienda lleva icono y texto juntos a la izquierda; el
   space-between de la fila normal los mandaria a los dos extremos. */
.mm-cajon__fila--tienda {
	justify-content: flex-start;
	gap: var( --s-3 );
}

/* Solo hay cajon en movil; en escritorio manda el megamenu. */
.mm-navbar__hamburguesa {
	display: none;
	padding: var( --s-1 );
	border: 0;
	background: none;
	color: var( --text );
	cursor: pointer;
}

@media ( max-width: 1099px ) {
	/*
	 * La barra de movil (Figma "navbar-responsive", nodos 926-104556 en reposo y
	 * 677-21373 con scroll).
	 *
	 * ponytail: el hueco entre la lupa y la hamburguesa son 40px, un valor que
	 * la escala de espaciado no tiene —igual que el de la rejilla del megamenu—.
	 */
	.mm-navbar__interior {
		gap: 40px;

		/* El margen lateral es el del sistema, no los 16 del frame: asi el logo
		   cae a plomo con el contenido de debajo, que usa el mismo token. */
		padding: var( --s-5 ) var( --margen-pagina );
	}

	.mm-navbar__logo img {
		height: 36px;
	}

	.mm-navbar__nav,
	.mm-navbar__tienda,
	.mm-navbar__ayuda,
	.mm-navbar__cta,
	.mm-mega {
		display: none;
	}

	/*
	 * Lo que quede a la derecha se va a la derecha del todo, sin depender de que
	 * haya algo en medio que empuje.
	 *
	 * Y guarda siempre el alto de lo mas alto que puede llevar —el boton de la
	 * barra colapsada—, para que las dos barras de movil midan igual y al hacer
	 * scroll no de un salto. El suelo va aqui y no en el interior porque esta
	 * caja no tiene relleno: ahi el min-height es el alto de la barra y ya.
	 *
	 * ponytail: 50 es el alto que tiene hoy el boton del sistema. Si algun dia se
	 * ajusta a los 45 del diseño, bajar este numero con el; es un suelo, no una
	 * medida, asi que mientras tanto no rompe nada.
	 */
	.mm-navbar__acciones {
		margin-inline-start: auto;
		gap: 40px;
		min-height: 50px;
	}

	.mm-navbar__hamburguesa {
		display: flex;

		/* Sin relleno: en el diseño el icono llega al margen de la pagina. El
		   area de pulsacion de 44px no depende de el, la dibuja el ::after. */
		padding: 0;
	}

	/* Los dos iconos de la barra son de 32 en movil, no los 24 de escritorio. */
	.mm-navbar__icono .mm-icono svg,
	.mm-navbar__hamburguesa .mm-icono svg {
		width: 32px;
		height: 32px;
	}

	/*
	 * Colapsada en movil no es la de escritorio: el diseño no encoge la barra,
	 * cambia la lupa y la hamburguesa por el boton de contacto —y con sus 45px
	 * la barra hasta crece un poco—. El aviso de ayuda va con el boton, como en
	 * escritorio, mientras quepa: hasta 768 inclusive. Por debajo se quita en la
	 * media query de 767, y ahi solo quedan el logo y el boton.
	 */
	.mm-navbar.is-colapsada .mm-navbar__interior {
		padding-block: var( --s-5 );
	}

	.mm-navbar.is-colapsada .mm-navbar__logo img {
		height: 36px;
	}

	/* Entre el aviso y el boton, el hueco de escritorio y no los 40 de los iconos. */
	.mm-navbar.is-colapsada .mm-navbar__acciones {
		gap: var( --s-6 );
	}

	.mm-navbar.is-colapsada .mm-navbar__hamburguesa {
		display: none;
	}

	.mm-navbar.is-colapsada .mm-navbar__cta {
		display: inline-flex;
	}


	/* En movil el buscador ocupa la fila entera bajo el logo. */
	.mm-buscador {
		position: absolute;
		left: 20px;
		right: 20px;
		top: 100%;
		background: var( --surface );
	}

	.mm-buscador input {
		width: 100%;
		flex: 1;
	}

	/* Aqui el buscador no ocupa el sitio de la lupa: se sale del flujo y baja a
	   su propia linea, asi que no hay nada de donde desplegarse. Fundido y ya.
	   Va detras del bloque de movimiento normal a proposito, para pisarlo. */
	.mm-buscador:not( [hidden] ) {
		animation-name: mm-buscador-fundido;
	}

	.mm-buscador.is-cerrando {
		animation-name: mm-buscador-fundido-fin;
	}
}

/* De 767 para abajo el aviso ya no va al lado del boton: solo logo y boton. */
@media ( max-width: 767px ) {
	.mm-navbar.is-colapsada .mm-navbar__ayuda {
		display: none;
	}
}

/*
 * La pagina con boton propio (Figma 1288-11944, la landing de instituciones):
 * colapsada, la navbar lleva el logo y ese boton, sin el aviso ni el boton de
 * contacto del sitio. Arriba del todo no cambia nada: es la navbar de siempre.
 *
 * Va detras de las reglas de la colapsada a proposito: pesan lo mismo y aqui
 * gana la ultima.
 */
.mm-navbar .mm-navbar__cta--pagina {
	display: none;
}

.mm-navbar.is-colapsada .mm-navbar__cta--pagina {
	display: inline-flex;
}

.mm-navbar--pagina.is-colapsada .mm-navbar__cta--general,
.mm-navbar--pagina.is-colapsada .mm-navbar__ayuda {
	display: none;
}

/* El texto largo no cabe al lado del logo en un movil: ahi va el corto. */
.mm-navbar__cta-corto {
	display: none;
}

@media ( max-width: 767px ) {
	.mm-navbar__cta-largo {
		display: none;
	}

	.mm-navbar__cta-corto {
		display: inline;
	}
}

@media ( min-width: 1100px ) {
	.mm-cajon {
		display: none;
	}
}

/* ---------------------------------------------------------------------- Pie */

/* Replica del Figma "UI KIT · Footer" (nodos 516:6884 escritorio y 641:16982
   movil). Los dos disenos comparten marcado: en movil todo pasa a una columna
   y el selector de idioma sube por encima del copyright (column-reverse). */

.mm-pie {
	background: var( --footer-fondo );
	color: var( --text-inverse );
}

.mm-pie__interior {
	max-width: var( --contenedor );
	margin: 0 auto;
	padding: var( --s-8 ) var( --margen-pagina ) var( --s-6 );
}

.mm-pie__bloque {
	display: flex;
	gap: clamp( var( --s-6 ), 9vw, var( --s-11 ) );
}

/*
 * Es el logo de la cabecera, pasado a blanco y negro aqui.
 *
 * grayscale lo deja en grises, e invert los sube: el original es rojo y gris
 * oscuro sobre transparente, o sea que en grises se quedaria casi negro sobre
 * el negro del pie. Invertido, la marca y el texto caen los dos cerca del
 * #b5b5b5, unos 8:1 sobre el fondo. La transparencia no se toca: invert solo
 * trabaja el color, el canal alfa se queda como esta.
 *
 * Antes habia un mix-blend-mode: luminosity, que hacia justo lo contrario:
 * tomaba la luminosidad del logo, que es baja, y lo fundia con el fondo.
 */
.mm-pie__logo {
	width: 182px;
	height: 50px;
	object-fit: contain;
	filter: grayscale( 1 ) invert( 1 );
}

.mm-pie__columnas {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: var( --s-6 ) var( --s-4 );
}

.mm-pie__col {
	flex: 1;
	min-width: 160px;
}

.mm-pie__titulo {
	margin: 0 0 var( --s-5 );
	color: var( --line );
	font-size: var( --caption-size );
	font-weight: var( --caption-weight );
	line-height: var( --caption-line );
}

/*
 * Con destino o sin el, el titulo de columna va en neutral/200, que es el
 * #d6d6d6 de --line: lo pide diseno para todos los titulares del pie. Cuando era
 * enlace estuvo en blanco, para que no se viera mas apagado que los enlaces de
 * debajo; ahora hereda el color del titulo y el enlace se nota al pasar el raton.
 */
.mm-pie__titulo a {
	color: inherit;
	text-decoration: none;
}

.mm-pie__titulo a:hover {
	text-decoration: underline;
}

.mm-pie__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var( --s-4 );
}

/* Los enlaces de las columnas son .mm-enlace-pie, en componentes.css: el
   diseno los tiene en la seccion "Links", no en la del pie. */

.mm-pie__redes {
	display: flex;
	gap: var( --s-3 );
}

.mm-pie__redes a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var( --line );
	border-radius: 50%;
	color: var( --text-inverse );
}

/*
 * Los que no son .mm-enlace-pie: redes y legales. Gris por lo mismo que el
 * componente, que sobre el negro del pie el azul del sistema no se ve.
 */
.mm-pie__redes a:focus-visible,
.mm-pie__legales a:focus-visible {
	outline: 3px solid var( --line );
	outline-offset: 3px;
}

/* El "esp" de 56px del diseno: entre dos pasos de la escala (48 y 64) y sin
   variable que lo respalde. */
.mm-pie__divisoria {
	height: 1px;
	margin-top: 56px;
	background: var( --footer-linea );
}

.mm-pie__legales {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --s-3 ) var( --s-6 );
	padding: var( --s-5 ) 0;
}

/* 12px: el diseno lo fija asi para legales y copyright. Fuera de la escala
   tipografica, que empieza en 12.8px (caption). */
.mm-pie__legales a {
	color: var( --text-inverse );
	font-size: 12px;
	line-height: 1.5;
	text-decoration: none;
}

/* El copyright, que es lo otro que el diseno pone a 12 (Figma 641-16517). Se
   habia quedado heredando los 16 del cuerpo. */
.mm-pie__final > p:not( .mm-pie__idiomas ) {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
}

.mm-pie__legales a:hover {
	text-decoration: underline;
}

.mm-pie__legales + .mm-pie__divisoria {
	margin-top: 0;
}

.mm-pie__final {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --s-3 );
	padding-top: var( --s-5 );
}

.mm-pie__final p {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
}

.mm-pie__idiomas {
	font-size: var( --body-sm-size ) !important;
}

/*
 * El color, repetido, por lo mismo que en los botones y en los legales: el
 * "a { color: #007bff }" del tema antiguo, que en sus plantillas pintaba de
 * azul los dos idiomas no activos mientras el activo, que es un <span>, seguia
 * heredando el blanco del pie.
 *
 * Aqui basta con la clase, sin !important: el conflictivo es un selector de
 * elemento y este gana por especificidad. La regla de hover del tema si empata,
 * asi que va su propia linea.
 */
/* Subrayado solo el activo, que es un <span>: los enlaces van sin el del
   navegador y lo recuperan al pasar por encima, como los legales. */
.mm-pie__idiomas a {
	color: var( --text-inverse );
	text-decoration: none;
}

.mm-pie__idiomas a:hover,
.mm-pie__idiomas a:focus-visible {
	color: var( --text-inverse );
	text-decoration: underline;
}

.mm-pie__idiomas .is-activo {
	text-decoration: underline;
}

/* Variante movil del Figma: una columna, textos un paso mas grandes y la
   columna de redes centrada. */
@media ( max-width: 767px ) {

	.mm-pie__interior {
		padding: var( --s-8 ) 0 var( --s-7 );
	}

	.mm-pie__bloque,
	.mm-pie__columnas {
		flex-direction: column;
		gap: var( --s-6 );
	}

	/* El aire entre la ultima columna y la divisoria (Figma 641-16473). */
	.mm-pie__columnas {
		padding-bottom: var( --s-6 );
	}

	.mm-pie__bloque {
		padding-inline: var( --s-4 );
	}

	.mm-pie__titulo {
		margin-bottom: var( --s-4 );
		font-size: var( --body-sm-size );
		font-weight: 400;
		line-height: var( --body-sm-line );
	}

	.mm-pie__col a {
		font-size: var( --body-size );
		line-height: var( --body-line );
	}

	.mm-pie__col--redes {
		text-align: center;
	}

	.mm-pie__col--redes .mm-pie__redes {
		justify-content: center;
	}

	.mm-pie__divisoria {
		margin-top: 0;
	}

	/*
	 * En movil los legales caen de dos en dos y el aire entre filas es el
	 * mismo que entre columnas: 32 en los dos ejes, no 24 (Figma 641-16507).
	 */
	.mm-pie__legales {
		gap: var( --s-6 );
		padding: var( --s-6 ) var( --s-4 );
	}

	.mm-pie__legales a {
		font-size: var( --body-sm-size );
	}

	.mm-pie__final {
		flex-direction: column-reverse;
		justify-content: center;
		gap: var( --s-5 );
		padding: var( --s-6 ) var( --s-4 ) 0;
	}

	.mm-pie__idiomas {
		font-size: var( --body-size ) !important;
	}
}

/* --------------------------------------------------------------- Contenido */

/*
 * El fondo por defecto de la pagina es bg-blue. Las bandas pintan el suyo, pero
 * lo que no lo hace —la banda de contacto, una tarjeta con hueco alrededor—
 * enseñaba el blanco del navegador en vez del azul de al lado. En el lienzo
 * tambien, para que el editor se vea como el front.
 */
:is( .mm-contenido, .editor-styles-wrapper ) {
	background-color: var( --bg-blue );
}

.mm-contenido {
	overflow-x: clip;
}

/*
 * El contenedor del flujo de bloques. Lo que en un tema de bloques haria el
 * "constrained layout" de theme.json, aqui a mano: theme.json es global y le
 * cambiaria el comportamiento de los bloques a todo el sitio.
 *
 * Marca el techo, no el ancho: un bloque puede ir mas estrecho por su cuenta
 * (un grupo con su propia medida) y solo se sale quien lo pida con alignwide o
 * alignfull. El relleno lateral va aqui una sola vez, y no en cada hijo, para
 * que no se sume al que ya trae cada bloque.
 *
 * Dos raices, como el resto: .mm-flujo en el front (page-gutenberg.php) y
 * .is-root-container, que es de donde cuelgan los bloques en el lienzo del
 * editor. Envuelve solo the_content(): las bandas a sangre del catalogo pintan
 * en .mm-contenido pero fuera de aqui, y siguen igual.
 */
/*
 * El tope de 840px del editor clasico, fuera.
 *
 * "html :where(.wp-block) { max-width: 840px }" (edit-post/classic.css) capa
 * TODO bloque del lienzo. Es el respaldo de WordPress para un tema sin
 * theme.json, y aqui sobra: quien marca el techo son las dos reglas de abajo,
 * igual que en el front. Con el tope puesto, una rejilla dentro de una banda
 * medía 840 en vez de 1200 y cambiaba de columnas antes de tiempo.
 *
 * Con :where() a proposito, para que valga 0,1,0: asi le gana al 0,0,1 del core
 * y pierde contra .is-root-container > * y .mm-banda > *, que son las que
 * tienen que decidir el ancho. Por eso va antes que ellas.
 *
 * Los margenes de 28px de esa misma regla se quedan: son los que el editor usa
 * para poder pinchar entre bloques.
 */
.editor-styles-wrapper :where( .wp-block ) {
	max-width: none;
}

.mm-flujo,
.editor-styles-wrapper .is-root-container {
	padding-inline: var( --margen-pagina );
}

.mm-flujo > *,
.editor-styles-wrapper .is-root-container > *,
.editor-styles-wrapper .is-root-container > .mm-animacion > * {
	max-width: var( --ancho-max );
	margin-inline: auto;
}

/*
 * El bloque «HTML personalizado», rotulado en el lienzo.
 *
 * Desde WordPress 7 el lienzo no enseña el codigo sino una vista previa en un
 * iframe aislado, y lo que se suele meter aqui —un formulario de HubSpot, un
 * script de un tercero— ahi dentro no pinta nada o casi nada: el bloque se
 * quedaba invisible y no habia forma de saber que estaba. Un recuadro de
 * puntos con su rotulo dice que hay HTML ahi; la vista previa, si sale, sale
 * debajo. Solo en el editor: la clase es la del lienzo y el front no la tiene.
 *
 * ponytail: el rotulo va escrito en la hoja, en castellano. Si el escritorio
 * se usa en otro idioma, pasa a un filtro de editor.BlockEdit con __().
 */
.editor-styles-wrapper .block-library-html__edit {
	min-height: 44px;
	outline: 1px dashed var( --text-soft );
	outline-offset: -1px;
}

.editor-styles-wrapper .block-library-html__edit::before {
	content: 'HTML personalizado';
	display: block;
	width: fit-content;
	margin: 8px;
	padding: 2px 8px;
	border-radius: 4px;
	background: var( --text-soft );
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
}

/*
 * Banda de seccion: una franja a todo el ancho con fondo propio, que por dentro
 * vuelve a alinear su contenido con el resto de la pagina. La usan los patrones
 * sobre un core/group, para no necesitar un bloque propio solo por pintar un
 * fondo. Se pide con la clase mm-banda en el panel "Avanzado" del grupo.
 */
.mm-banda {
	padding: var( --s-8 ) var( --margen-pagina );
}

/*
 * Los dos selectores son el mismo sitio. En el front, un core/group en flujo
 * mete un .wp-block-group__inner-container entre la banda y su contenido; en el
 * lienzo del editor los bloques cuelgan directos. Cubrir los dos es lo que hace
 * que se vea igual dentro y fuera.
 */
.mm-banda > *,
.mm-banda > .wp-block-group__inner-container > * {
	max-width: var( --ancho-max );
	margin-inline: auto;
}

/* Los hijos se separan un paso grande, menos el parrafo que va justo detras de
   un titular: ese es su bajada, no un parrafo suelto, y va pegado. */
.mm-banda > * + *,
.mm-banda > .wp-block-group__inner-container > * + * {
	margin-block-start: var( --s-6 );
}

/*
 * La banda de accesos por etapa baja su titular un escalon mas que las demas.
 *
 * En el frame de movil (nodo 677-20452) esta banda lleva su titular en H5 —20—
 * mientras que la de banners, con el mismo marcado, lo lleva en H4 —25, nodo
 * 677-20614—. En escritorio las dos van en H3, asi que la diferencia solo
 * existe en vertical y no se puede pedir desde el editor: la clase de tamaño es
 * una sola para las dos anchuras.
 *
 * De ahi que la regla mire lo que la banda lleva dentro en vez de una clase
 * suya. Asi vale tambien para las paginas ya montadas, que no se enteran de un
 * cambio en el patron, y para las que se monten manana.
 *
 * Solo el titular de la banda: los de las tarjetas de dentro son cosa del
 * bloque.
 */
@media ( max-width: 767px ) {
	.mm-banda:has( .mm-tarjetas ) > :is( h1, h2, h3 ),
	.mm-banda:has( .mm-tarjetas ) > .wp-block-group__inner-container > :is( h1, h2, h3 ) {
		font-size: var( --h5-size );
		line-height: var( --h5-line );
		font-weight: var( --h5-weight );
	}
}

/* Del indice a su primera seccion, 24 y no los 32 de siempre: es lo que mide el
   frame 885-26945 entre el boton y el bloque de secciones. */
.mm-banda > .mm-contents + *,
.mm-banda > .wp-block-group__inner-container > .mm-contents + * {
	margin-block-start: var( --s-5 );
}

/*
 * La bajada va pegada al titular.
 *
 * Los dos caminos otra vez, y con hijo directo: un descendente suelto pesa
 * (0,1,2) y pierde contra el (0,2,0) de la regla de arriba en cuanto WordPress
 * le devuelve al tema clasico su div interno. Eso pasa en el front y no en el
 * lienzo, asi que la bajada se separaba 32 fuera y 8 dentro.
 */
.mm-banda > :is( h1, h2, h3, h4, h5, h6 ) + p,
.mm-banda > .wp-block-group__inner-container > :is( h1, h2, h3, h4, h5, h6 ) + p {
	margin-block-start: var( --s-2 );
}

/*
 * El relleno vertical de la banda lo pone la banda y nadie mas: el primer hijo y
 * el ultimo sueltan los margenes que traen de fabrica —un h2 trae 0,83em arriba
 * y un core/columns 1,75em abajo—, que si no se suman a los 64 del diseño y la
 * franja acaba respirando 90 por arriba y 92 por abajo.
 */
.mm-banda > :first-child,
.mm-banda > .wp-block-group__inner-container > :first-child {
	margin-block-start: 0;
}

.mm-banda > :last-child,
.mm-banda > .wp-block-group__inner-container > :last-child {
	margin-block-end: 0;
}

/* El titular y la bajada de una banda van centrados y el titular sin margen
   propio: los margenes de la banda los pone la regla de arriba. */
.mm-banda :is( h1, h2, h3, h4, h5, h6 ),
.mm-banda p {
	margin-block-end: 0;
}

/* Las columnas del core, al paso 24 del sistema en vez del 2em que traen de
   fabrica. Sin theme.json el core no tiene de donde sacar el hueco. */
.mm-banda .wp-block-columns {
	gap: var( --s-5 );
}

/*
 * Rejilla de tarjetas de acceso. Figma: "BLOQUE 4 CARDS" (nodo 677-20175).
 *
 * La rejilla es la del core: un core/group con layout de cuadricula, que pone
 * el display:grid y el numero de columnas, y deja el control en la barra
 * lateral. Aqui solo va lo que el core no trae sin theme.json: el hueco —el
 * blockGap esta apagado, ver inc/editor.php— y el paso a dos por fila.
 */
.mm-tarjetas {
	/* 10px no es un paso de la escala, pero es la separacion del diseño: los
	   1280 del contenido menos cuatro tarjetas de 312,5 dan 30, o sea 10. */
	gap: 10px;
}

/*
 * El mismo corte que usa la navbar para pasar a movil. De aqui hacia abajo da
 * igual cuantas columnas se hayan pedido: dos por fila, como el frame de tablet.
 *
 * La clase va doblada con is-layout-grid para ganarle al grid-template-columns
 * que genera el core, que tambien pesa una sola clase: con la misma cuenta
 * decidiria el orden de las hojas, y esa no la controlamos.
 */
@media ( max-width: 1099px ) {
	.mm-tarjetas.is-layout-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --s-3 );
	}
}

/*
 * Variante en lista, del patron "Accesos directos · 4 tarjetas en lista".
 * Figma: "Mobile - fila cards" (nodo 1091-7477).
 *
 * Solo cambia el movil: de 768 arriba es exactamente la misma rejilla —dos por
 * fila en tablet y cuatro en escritorio—, asi que el patron de cuadricula y este
 * comparten todo menos esta clase. Lo que la tarjeta hace por dentro para
 * volverse fila vive en su bloque, en blocks/macmillan/tarjeta/style.css.
 *
 * Doblada con is-layout-grid por lo mismo que .mm-tarjetas.
 */
@media ( max-width: 767px ) {
	.mm-tarjetas--listado.is-layout-grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --s-2 );
	}
}

/*
 * Cabecera de pagina interior. Figma: "Hero" (nodo 677-22117) y su movil
 * (677-25870).
 *
 * Va sobre .mm-banda y solo escribe lo que el frame cambia: el relleno vertical
 * —24 y 32 en vez de los 64 de la banda— y los pasos del titular y la bajada,
 * que no estan en el selector de tamanos del editor.
 */
.mm-cabecera {
	padding-block: var( --s-5 ) var( --s-6 );
}

.mm-banda .mm-cabecera__titulo {
	margin-block-start: var( --s-4 );
	font-size: var( --h2-size );
	line-height: var( --h2-line );
}

/* Los 10 del frame, los mismos que entre las migas. */
.mm-banda .mm-cabecera__bajada {
	margin-block-start: 10px;
}

/*
 * En movil la cabecera encoge: el relleno de abajo baja a 24, el titular pasa de
 * H2 a H4 y la bajada de 18 a 16. Las migas y los huecos de 16 y 10 no cambian.
 */
@media ( max-width: 767px ) {
	.mm-cabecera {
		padding-block: var( --s-5 );
	}

	.mm-banda .mm-cabecera__titulo {
		font-size: var( --h4-size );
		line-height: var( --h4-line );
	}

	.mm-banda .mm-cabecera__bajada {
		font-size: var( --body-size );
		line-height: var( --body-line );
	}
}

/*
 * Pestanas de etapa, debajo de la cabecera. Figma: "Pestañas etapa" (nodo
 * 677-22130).
 *
 * Bloques del core otra vez: un core/group con layout flex y ocho parrafos con
 * su enlace. Aqui el estilo si va en CSS y no en linea como en la cabecera: son
 * ocho piezas iguales, y repetir seis atributos en cada una haria el patron
 * ilegible y obligaria a copiarlos a mano al anadir la novena.
 *
 * La barra se acota igual que .mm-banda y por la misma razon: relleno lateral
 * en la banda y el ancho maximo en el hijo, no en la banda.
 *
 * Con un porcentaje en el relleno no vale, aunque lo parezca: un bloque a
 * sangre es mas ancho que su contenedor, y el porcentaje resuelve contra el
 * contenedor. En una pantalla de 1900 eso dejaba las pestanas 80 a la izquierda
 * del titular, que empieza donde manda su ancho maximo.
 */
.mm-pestanas {
	/*
	 * Donde acaba la fila, contado desde el canto de la barra: el margen de
	 * pagina y, pasado el ancho maximo, lo que sobra a cada lado. Es la cuenta
	 * de este relleno y del max-width de la fila, escrita para los velos y las
	 * flechas, que van absolutos y se miden contra la barra entera.
	 */
	--mm-pestanas-canto: calc( var( --margen-pagina ) + max( 0px, ( 100% - 2 * var( --margen-pagina ) - var( --ancho-max ) ) / 2 ) );

	/*
	 * Y su ancla. En el front manda el sticky de abajo, que tambien posiciona y
	 * pesa mas; esto es para que el componente no dependa de .mm-contenido.
	 */
	position: relative;
	padding-inline: var( --margen-pagina );
}

/*
 * Al bajar, la barra se queda pegada bajo la navbar (Figma 677-26490): arriba
 * quedan la navbar ya colapsada y las pestanas, y la cabecera —migas, titular y
 * bajada— se va con el scroll, que es lo que dibuja el frame.
 *
 * Solo en el front, de ahi el .mm-contenido: en el lienzo del editor no hay
 * navbar a la que pegarse ni script que la mida, y la barra se quedaria flotando
 * a media pagina mientras se escribe.
 *
 * Donde se para es el alto de la navbar, que menu.js mide y publica en
 * --mm-navbar-alto. Los numeros de aqui son el respaldo por si el script no
 * llega a correr, y son los que se miden colapsada: 82 en escritorio, donde
 * manda el CTA, y 72 de 1099 para abajo, donde ese boton no esta.
 *
 * z-index justo por debajo de la navbar (1080) y por encima del contenido, para
 * que lo que sube pase por debajo de las dos barras y nunca entre ellas.
 *
 * No hace falta tocar nada mas: la navbar del tema ya es sticky y ya sabe
 * colapsarse sola. Y el overflow-x: clip de .mm-contenido no estorba, que para
 * eso se invento clip: recorta sin crear un contenedor de scroll, que es lo que
 * hace hidden y lo que romperia esto.
 */
.mm-contenido .mm-pestanas {
	position: sticky;
	top: var( --mm-navbar-alto, 82px );
	z-index: 1079;
}

@media ( max-width: 1099px ) {
	.mm-contenido .mm-pestanas {
		top: var( --mm-navbar-alto, 72px );
	}
}

/*
 * Pegadas, la navbar y la barra son una sola pieza, y la sombra es de las dos
 * (Figma 1155-13272, Shadow/md en el conjunto): cae debajo de la barra y la
 * separa del contenido que pasa por detras, y entre la navbar y la barra no hay
 * ninguna. Como aqui son dos cajas, la lleva la barra y la navbar la suelta
 * mientras tenga la barra pegada debajo; sin barra, la navbar sigue con la suya.
 */
.mm-contenido .mm-pestanas.is-pegada {
	box-shadow: var( --sombra-md );
}

:root:has( .mm-pestanas.is-pegada ) .mm-navbar.is-colapsada {
	box-shadow: none;
}

.mm-pestanas > .mm-pestanas__fila,
.mm-pestanas > .wp-block-group__inner-container > .mm-pestanas__fila {
	max-width: var( --ancho-max );
	margin-inline: auto;
}

/*
 * Una sola linea a todas las anchuras y, si no cabe, scroll horizontal (Figma
 * 914-112, "Flechas de scroll horizontal en pestañas"). Envolviendo, a 1100 las
 * ocho etapas salian en dos filas y la barra pegada arriba media el doble.
 *
 * Sin hueco entre pestanas: lo que las separa es su propio relleno, como en el
 * frame. Doblada con is-layout-flex porque el hueco y el flex-wrap los pone el
 * layout del core con su propia clase y ademas los imprime despues de esta
 * hoja; y el hueco no se puede apagar desde el bloque porque el control de
 * blockGap esta desactivado en inc/editor.php, asi que el atributo ni se
 * serializa.
 */
.mm-pestanas__fila.is-layout-flex {
	flex-wrap: nowrap;
	gap: 0;
	overflow-x: auto;
}

/*
 * La barra del navegador sobra en el front: el aviso son el velo y las
 * flechas. En el lienzo del editor no hay ni lo uno ni lo otro —los pone el
 * script—, asi que ahi se queda, o las pestañas que no caben no se verian.
 */
.mm-contenido .mm-pestanas__fila.is-layout-flex {
	scrollbar-width: none;
}

.mm-contenido .mm-pestanas__fila.is-layout-flex::-webkit-scrollbar {
	display: none;
}

.mm-pestanas__fila .mm-pestana {
	margin: 0;
	padding: var( --s-4 ) var( --s-5 );
	/* De una linea, como el frame: si parte, la pestaña deja de ser una pestaña. */
	white-space: nowrap;
	color: var( --text-soft );
	font-size: var( --body-sm-size );
	line-height: var( --body-sm-line );
	font-weight: 600;
}

.mm-pestanas__fila .mm-pestana a {
	color: inherit;
	text-decoration: none;
}

/*
 * Hover del UI Kit (920-112): la pestaña entera en red/50 con el radio de la
 * activa y la letra en accent-hover, subrayada. Toda la pestaña es el enlace —el
 * ::before lo estira sobre el relleno—, porque un resalte del tamaño de la
 * pestaña que solo responde encima del texto promete un clic que no hay. La
 * activa no cambia al pasar: en la ficha tambien lleva enlace.
 */
.mm-pestanas__fila .mm-pestana:has( > a ) {
	position: relative;
}

.mm-pestanas__fila .mm-pestana > a::before {
	content: '';
	position: absolute;
	inset: 0;
}

.mm-pestanas__fila .mm-pestana:not( .mm-pestana--activa ):has( > a:hover ) {
	border-radius: var( --rad-md ) var( --rad-md ) 0 0;
	background-color: var( --accent-bg );
}

.mm-pestanas__fila .mm-pestana:not( .mm-pestana--activa ) > a:hover {
	color: var( --accent-hover );
	text-decoration: underline;
}

.mm-pestanas__fila .mm-pestana a:focus-visible {
	text-decoration: underline;
}

/* En movil el relleno de cada pestaña baja de 24 a 16, del frame 677-25870. */
@media ( max-width: 767px ) {
	.mm-pestanas__fila .mm-pestana {
		padding-inline: var( --s-4 );
	}
}

/*
 * Los velos: avisan de que quedan pestañas ocultas hacia ese lado, y solo salen
 * cuando las hay. Las clases is-antes e is-despues las pone
 * assets/js/pestanas.js al medir la fila.
 *
 * Se miden desde el canto de la fila, que es donde se corta lo que no cabe, y
 * no desde el de la barra, que va a sangre: ver --mm-pestanas-canto.
 *
 * En rgba y no con el token porque hace falta media opacidad y --bg-blue-2 es
 * un hexadecimal: 236 241 244 es ese mismo color. Los tres pasos y los 72 de
 * ancho salen del frame.
 */
.mm-pestanas.is-antes::before,
.mm-pestanas.is-despues::after {
	content: '';
	position: absolute;
	inset-block: 0;
	width: 72px;
	pointer-events: none;
}

.mm-pestanas.is-antes::before {
	left: var( --mm-pestanas-canto );
	background: linear-gradient(
		to left,
		rgba( 236, 241, 244, 0 ),
		rgba( 236, 241, 244, .68 ) 55%,
		rgba( 236, 241, 244, .8 )
	);
}

.mm-pestanas.is-despues::after {
	right: var( --mm-pestanas-canto );
	background: linear-gradient(
		to right,
		rgba( 236, 241, 244, 0 ),
		rgba( 236, 241, 244, .68 ) 55%,
		rgba( 236, 241, 244, .8 )
	);
}

/*
 * Las flechas, una por lado y con la misma regla que los velos: la del lado
 * donde no queda nada no sale, no hay estado deshabilitado. Figma 914-112:
 * circulo blanco de 44 con borde fino y el chevron dentro en rojo, a 6 del
 * canto de la fila y encima del velo. Los 44 son ademas el area comoda para un
 * dedo.
 *
 * Todo sale de tokens —borde --border-fn, el mismo del borde de un input;
 * chevron --accent; y la sombra --sombra-sm—, asi que no hace falta el SVG
 * entero que exporta el Figma.
 *
 * Centradas en la fila y no en la barra: la de anclas lleva aire encima
 * (--mm-pestanas-aire), y con top: 50% a secas la flecha subia la mitad.
 *
 * Las flechas del carrusel (.mm-carrusel__flecha) llevan esta misma cara y
 * sus mismos estados: por eso van en estos selectores. Lo que cambia alli —son
 * botones de verdad, siempre a la vista y en el flujo— esta en su seccion.
 */
.mm-pestanas__flecha,
.mm-carrusel__flecha {
	position: absolute;
	top: calc( 50% + var( --mm-pestanas-aire, 0px ) / 2 );
	z-index: 1;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var( --border-fn );
	border-radius: 50%;
	background: var( --surface );
	box-shadow: var( --sombra-sm );
	color: var( --accent );
	transform: translateY( -50% );
	cursor: pointer;
}

.mm-pestanas.is-antes .mm-pestanas__flecha--antes,
.mm-pestanas.is-despues .mm-pestanas__flecha--despues {
	display: flex;
}

.mm-pestanas__flecha--antes {
	left: calc( var( --mm-pestanas-canto ) + 6px );
}

.mm-pestanas__flecha--despues {
	right: calc( var( --mm-pestanas-canto ) + 6px );
}

/*
 * Los estados, con los colores sacados de los SVG que exporta el frame de cada
 * uno: al pasar el raton, fondo red/50 con borde y chevron en red/600; y
 * pulsada, red/100 con red/700.
 *
 * El de foco del frame no se escribe: la flecha no se enfoca nunca, porque no
 * es un paso de teclado (ver assets/js/pestanas.js), y el propio frame lo dice.
 */
.mm-pestanas__flecha:hover,
.mm-carrusel__flecha:hover {
	border-color: var( --accent-hover );
	background: var( --accent-bg );
	color: var( --accent-hover );
}

.mm-pestanas__flecha:active,
.mm-carrusel__flecha:active {
	border-color: var( --accent-active );
	background: var( --accent-bg-strong );
	color: var( --accent-active );
}

/*
 * El chevron del frame mide 9,6x16 y es relleno, no de trazo: es el
 * chevron.svg del tema —que apunta hacia abajo— girado, igual que hace
 * .mm-icono--derecha. En mascara y no de fondo porque un fondo no se puede
 * teñir, y el color lo pone cada estado en currentColor.
 *
 * La caja de 24 es la que deja el dibujo a esos 9,6x16: dentro de su lienzo
 * de 16 el chevron ocupa 11 de ancho, asi que 24 lo escala 1,5.
 */
.mm-pestanas__flecha::before,
.mm-carrusel__flecha::before {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url( ../images/chevron.svg ) center / contain no-repeat;
	mask: url( ../images/chevron.svg ) center / contain no-repeat;
	transform: rotate( -90deg );
}

.mm-pestanas__flecha--antes::before,
.mm-carrusel__flecha--antes::before {
	transform: rotate( 90deg );
}

/*
 * La activa: misma pildora rosa que el hover de las cards, radio solo arriba y
 * la linea roja de 3 pegada al canto de abajo, del ancho de la pestaña.
 *
 * La linea va en sombra y no en borde, porque un borde subiria la barra de 53 a
 * 56. Y la sombra va por dentro (inset) y no colgando por fuera, que es como
 * estaba: en movil la fila es un contenedor de scroll horizontal, y overflow-x
 * recorta tambien por arriba y por abajo —no hay forma de recortar en un eje y
 * no en el otro—, asi que la linea desaparecia justo en movil. Por dentro se
 * pinta dentro de la caja y no hay nada que recortar. Los 3px caen sobre el
 * rosa de la pestaña en vez de sobre lo que haya debajo, que a este tamaño es
 * lo mismo, y ademas ahora las dos anchuras la dibujan igual.
 */
.mm-pestanas__fila .mm-pestana--activa {
	border-radius: var( --rad-md ) var( --rad-md ) 0 0;
	background-color: var( --accent-bg-strong );
	box-shadow: inset 0 -3px 0 0 var( --accent-active );
	color: var( --text );
}

/*
 * Pegada arriba pierde el radio: el frame compacto (677-26396) la dibuja recta,
 * y en su sitio (677-22130) redondeada. La clase la pone assets/js/pestanas.js,
 * porque no hay forma de preguntarle a CSS si un sticky esta pegado o no.
 */
.mm-pestanas.is-pegada .mm-pestanas__fila .mm-pestana--activa,
.mm-pestanas.is-pegada .mm-pestanas__fila .mm-pestana:has( > a:hover ) {
	border-radius: 0;
}

/*
 * Barra de anclas de la landing de instituciones (Figma 1288-8967 y su movil
 * 1301-2252): la misma barra con 16 de aire arriba, 8 en movil. En la de
 * etapas ese aire lo pone la cabecera de encima; aqui la banda oscura acaba a
 * ras y lo lleva la barra.
 *
 * El aire va en --mm-pestanas-aire y no suelto en el relleno porque las
 * flechas lo descuentan para centrarse en la fila. Los velos si cubren la
 * barra entera, pero sobre el aire, que es del mismo azul, no se ven.
 */
.mm-pestanas--anclas {
	--mm-pestanas-aire: var( --s-4 );
	padding-block-start: var( --mm-pestanas-aire );
}

/*
 * Pegada arriba, ese aire sobra: es la barra compacta del frame (677-26396),
 * donde la pestaña activa es un rectangulo a sangre. Con el relleno puesto el
 * rosa arrancaba 16px por debajo del canto de la barra y quedaba una franja del
 * fondo por encima, que es justo lo que no dibuja el frame.
 *
 * Va en el relleno del contenedor y no estirando el fondo de la pestaña hacia
 * arriba: la fila es un contenedor de scroll horizontal y overflow-x recorta
 * tambien en vertical, asi que cualquier cosa que sobresalga por arriba
 * —sombra, pseudoelemento o margen negativo— se pierde ahi. Es la misma razon
 * por la que la linea roja de la activa va en sombra por dentro.
 */
.mm-pestanas--anclas.is-pegada {
	--mm-pestanas-aire: 0px;
}

@media ( max-width: 767px ) {
	.mm-pestanas--anclas {
		--mm-pestanas-aire: var( --s-2 );
	}
}

/*
 * Migas de la cabecera de pagina interior hecha con bloques del core.
 * Figma: "Hero" (nodo 677-22117).
 *
 * El core no trae bloque de migas, asi que son un core/paragraph con los
 * enlaces dentro. Lo unico que no puede poner el core es el separador —el
 * chevron del tema entre uno y otro—, y eso es lo que hace esta regla: asi no
 * hay que teclear un simbolo en el texto ni acordarse de repetirlo.
 *
 * Al pasar el parrafo a flex, sus hijos en linea (los enlaces y el <strong> de
 * la pagina actual) se vuelven elementos flex y el hueco lo pone gap.
 */
.mm-migas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Los 10 del frame. No hay paso de 10 en la escala; es la separacion que
	   dibuja el diseno, la misma que usa el hero con foto. */
	gap: 10px;
}

/* Sin subrayado, como el frame; al pasar por encima si, que si no un enlace no
   parece un enlace. Mismo criterio que las migas del hero con foto. */
.mm-migas a {
	color: inherit;
	text-decoration: none;
}

.mm-migas a:hover,
.mm-migas a:focus-visible {
	text-decoration: underline;
}

/* En linea y no en bloque: cada miga ya es un elemento flex, y con display
   block el separador se apilaba encima del texto en vez de ponerse al lado
   —y la banda crecia 16. */
.mm-migas > * + *::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 16px;
	height: 16px;
	margin-inline-end: 10px;
	background: url( ../images/chevron-fino.svg ) center / contain no-repeat;
}

/*
 * Las migas del core (core/breadcrumbs), con la misma cara.
 *
 * WordPress 7 trae su propio bloque de migas y lo saca de la jerarquia de la
 * pagina, que es lo que hace el hero interior y lo que el patron no puede: alli
 * se escriben a mano. Lo que no trae es el aspecto del diseno.
 *
 * Casi todo lo pone ya el core —el <ol> es flex, sin vinetas y sin margenes—,
 * asi que aqui va la tipografia, el hueco de 10 y el separador. Su regla es
 * `li:not(:last-child)::after { content: var(--separator, "/") }`, o sea detras
 * de cada miga menos la ultima; .mm-migas lo pone delante de todas menos la
 * primera. A la vista es lo mismo, asi que se aprovecha la suya en vez de
 * apagarla para escribir otra.
 *
 * El chevron manda sobre el --separator que el bloque escribe en linea: el
 * diseno tiene un separador y es este. Si algun dia hay que dejar elegirlo,
 * esta regla es la que hay que quitar.
 *
 * Acotado a .mm-contenido y al lienzo como el resto de la hoja: esto tambien se
 * carga en las paginas del tema antiguo cuando el Personalizador elige nuestra
 * cabecera.
 */
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-breadcrumbs {
	color: var( --text-soft );
	font-size: var( --body-sm-size );
	line-height: var( --body-sm-line );
}

:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-breadcrumbs ol {
	gap: 10px;
}

/* Sin subrayado, como el frame; al pasar por encima si, que si no un enlace no
   parece un enlace. */
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-breadcrumbs a:hover,
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-breadcrumbs a:focus-visible {
	text-decoration: underline;
}

/* La pagina en la que se esta, marcada tambien de forma visible y no solo con el
   atributo: es lo que dibuja el frame, y es lo que el patron consigue con un
   <strong>. */
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-breadcrumbs [aria-current='page'] {
	font-weight: 600;
}

/* El separador: el chevron fino del diseno en vez de la barra del core. Va
   dentro de su <li>, detras del texto: los 10 hasta la miga siguiente los pone
   el gap del <ol>, y los 10 que lo separan de su propio texto, este margen. La
   opacidad a 1 porque el color ya es el gris suave y bajarla lo dejaria en
   nada. */
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-breadcrumbs li:not( :last-child )::after {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	margin: 0 0 0 10px;
	opacity: 1;
	background: url( ../images/chevron-fino.svg ) center / contain no-repeat;
}

/*
 * Secciones de cards. Figma: nodos 1091-8233 (S), 1091-7905 (M), 1091-8124 (L),
 * 1091-7547 y 1091-7784 (por grupos) y 1091-7970 (destacados XL).
 *
 * Todas son la misma banda: cabecera a la izquierda y una rejilla de cards
 * debajo. Lo que cambia entre una y otra es que card va dentro y cuantas
 * columnas, y eso lo eligen el patron y la variacion del bloque; aqui solo esta
 * lo que comparten.
 *
 * La rejilla vuelve a ser la del core. El hueco es 12 y no los 10 de los
 * accesos directos: los 1280 del contenido partidos en cuatro con 12 dan los
 * 311 de la Card S clavados, y en tres dan los 418,67 de la L.
 */
.mm-cards {
	gap: var( --s-3 );
}

/*
 * Por debajo de 1366, las rejillas de cuatro pasan a tres. El aro de la S y la
 * M mide lo mismo en cualquier card, asi que al estrecharse le come el sitio al
 * titular, y una palabra que no cabe no puede partir: a 1280 "Examenes" (131)
 * tenia 117 de hueco en la M y se metia bajo la foto, y a 1100 "Supplementary"
 * en la S. A 1366, el portatil mas comun, caben en cuatro: 136 de hueco en la M.
 *
 * La rejilla de cuatro se reconoce por la card que lleva dentro y no por sus
 * columnas, que el core escribe en una clase con hash: en el sistema la S y la
 * M van de cuatro en cuatro, la L de tres y la XL de dos.
 *
 * Doblada con is-layout-grid por lo mismo que .mm-tarjetas: el
 * grid-template-columns del core pesa una sola clase.
 */
@media ( min-width: 1100px ) and ( max-width: 1365px ) {
	.mm-cards.is-layout-grid:has( > .mm-tarjeta--s, > .mm-tarjeta--m ) {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 1099px ) {
	.mm-cards.is-layout-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	/* La XL, a una: en dos columnas se quedaba sin sitio ("Advantage" a 768). */
	.mm-cards.is-layout-grid:has( > .mm-tarjeta--xl ) {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* En movil, una por fila y pegadas: es el frame 1091-8875, donde las cards se
   apilan como filas. Lo que la card hace por dentro para volverse fila esta en
   blocks/macmillan/tarjeta. */
@media ( max-width: 767px ) {
	.mm-cards.is-layout-grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --s-2 );
	}
}

/*
 * La cabecera no se estira a los 1280: el frame la corta en 656 y la deja a la
 * izquierda, que es lo que distingue a estas secciones de las bandas con el
 * titular centrado. Los 8 entre titular y bajada ya los pone .mm-banda.
 *
 * Con .mm-banda delante y no a pelo: en el front WordPress mete su
 * .wp-block-group__inner-container y la regla de ancho de la banda pasa a pesar
 * dos clases. A una sola le ganaba y la cabecera se estiraba a los 1280.
 */
.mm-banda .mm-cards__titular,
.mm-banda .mm-cards__bajada {
	max-width: 656px;
	margin-inline: 0;
}

/*
 * Salvo cuando la rejilla va detras del subtitular de un grupo: ahi son 24
 * (Figma 1091-7547). Entre un grupo y el siguiente vuelven a ser los 32 que la
 * banda le pone a cualquier hijo, asi que eso no hay que escribirlo.
 */
.mm-banda > :is( h1, h2, h3, h4, h5, h6 ) + .mm-cards,
.mm-banda > .wp-block-group__inner-container > :is( h1, h2, h3, h4, h5, h6 ) + .mm-cards {
	margin-block-start: var( --s-5 );
}

/*
 * El subtitular de grupo: se corta como la cabecera y va a H4.
 *
 * El paso lo pone esta regla y no el selector de tamaños del editor porque el
 * sistema solo expone cinco pasos (body-sm, body, body-md, h5 y h3), que es la
 * columna "uso:" del design system. Meter H4 ahi seria cambiar lo que el editor
 * ofrece en todo el sitio por un subtitular, asi que se queda en la clase.
 */
.mm-banda .mm-cards__grupo {
	max-width: 656px;
	margin-inline: 0;
	font-size: var( --h4-size );
	line-height: var( --h4-line );
}

/* En movil el frame lo baja a H5 (nodo 1091-8875). */
@media ( max-width: 767px ) {
	.mm-banda .mm-cards__grupo {
		font-size: var( --h5-size );
		line-height: var( --h5-line );
	}
}

/*
 * Rejilla de tarjetas de producto. Figma: "Cards producto" (nodo 913-27760).
 *
 * La rejilla vuelve a ser la del core —un core/group con layout de cuadricula—
 * y aqui solo van el hueco y los cortes. Tres columnas de 410,67 con 24 de
 * hueco son justo los 1280 del contenido: de ahi sale el ancho de la tarjeta
 * que dibuja el diseño, asi que el hueco es el paso 5 de la escala.
 */
.mm-tarjetas-producto {
	gap: var( --s-5 );
}

/*
 * Doblada con is-layout-grid por lo mismo que .mm-tarjetas: el
 * grid-template-columns que genera el core pesa una sola clase y no controlamos
 * el orden de las hojas.
 *
 * Dos por fila desde el corte de la navbar, y una sola en movil: con dos, la
 * portada se queda por debajo de 170 de ancho y la ficha deja de leerse.
 */
@media ( max-width: 1099px ) {
	.mm-tarjetas-producto.is-layout-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 767px ) {
	.mm-tarjetas-producto.is-layout-grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/*
 * El ritmo entre secciones de productos (Figma 1144-901 y 885-26945). Cada
 * seccion es su propia .mm-banda, con 64 arriba y 64 abajo, asi que dos
 * seguidas sumaban 128 donde el frame deja 64. En el mismo fondo, la de detras
 * pierde el de arriba y la separacion la pone solo el de abajo de la anterior;
 * con otro fondo cada banda necesita el suyo, y ahi no se toca.
 *
 * Lo que se mira es que la banda lleve una rejilla de productos, no una clase
 * nueva: asi vale para las paginas ya montadas y para las secciones que se
 * añadan despues.
 */
.mm-banda.has-bg-blue-background-color:has( > .mm-tarjetas-producto, > .wp-block-group__inner-container > .mm-tarjetas-producto )
	+ .mm-banda.has-bg-blue-background-color:has( > .mm-tarjetas-producto, > .wp-block-group__inner-container > .mm-tarjetas-producto ) {
	padding-top: 0;
}

/*
 * Lo mismo con la banda de contacto con asesor detras de la ultima seccion de
 * productos: el relleno de abajo de la seccion ya separa, y con el margen de la
 * banda encima sumaban 128. Quedan 64, el paso entre secciones (QA de Primary,
 * Figma 1816-13644). En movil la banda ya va pegada y sin margen.
 */
.mm-banda.has-bg-blue-background-color:has( > .mm-tarjetas-producto, > .wp-block-group__inner-container > .mm-tarjetas-producto )
	+ .mm-contacto-asesor {
	margin-block-start: 0;
}

.mm-banda.has-bg-blue-background-color:has( > .mm-tarjetas-producto, > .wp-block-group__inner-container > .mm-tarjetas-producto )
	+ .mm-banda--asesor {
	padding-top: 0;
}

/* Y lo mismo detras de la lista de ISBN de la ficha: su relleno de abajo ya
   separa, y con el margen de la banda sumaban 128 (QA de producto,
   1877-14510). Las dos formas: la tarjeta suelta de las paginas montadas antes
   y la tarjeta dentro de su banda. */
.mm-isbn + .mm-contacto-asesor {
	margin-block-start: 0;
}

.mm-isbn + .mm-banda--asesor {
	padding-top: 0;
}

/*
 * Y la seccion que lleva el indice —desplegable o pildoras—, justo debajo de
 * las pestañas, empieza a 24 y no a 64: es lo que deja el frame entre la barra
 * y el indice, en escritorio y en movil.
 */
.mm-pestanas + .mm-banda:has( .mm-contents ) {
	padding-top: var( --s-5 );
}

/*
 * En movil el frame aprieta el ritmo (885-26945, a 390): 24 del titular a su
 * rejilla en vez de 32, 40 entre una seccion y la siguiente y 48 al cerrar la
 * ultima, el mismo paso que la banda de llamada que suele venir detras.
 *
 * La separacion entre secciones la sigue poniendo el relleno de abajo de la
 * anterior, que baja a 40 cuando detras viene otra seccion de productos en el
 * mismo fondo. Ese 40 no es un paso de la escala: es el que dibuja el frame.
 */
@media ( max-width: 767px ) {
	.mm-banda.has-bg-blue-background-color:has( > .mm-tarjetas-producto, > .wp-block-group__inner-container > .mm-tarjetas-producto ) {
		padding-bottom: var( --s-7 );
	}

	.mm-banda.has-bg-blue-background-color:has( > .mm-tarjetas-producto, > .wp-block-group__inner-container > .mm-tarjetas-producto ):has( + .mm-banda.has-bg-blue-background-color > .mm-tarjetas-producto, + .mm-banda.has-bg-blue-background-color > .wp-block-group__inner-container > .mm-tarjetas-producto ) {
		padding-bottom: 40px;
	}

	.mm-banda > .mm-cards__grupo + .mm-tarjetas-producto,
	.mm-banda > .wp-block-group__inner-container > .mm-cards__grupo + .mm-tarjetas-producto {
		margin-block-start: var( --s-5 );
	}
}

/*
 * Filas de tarjetas de banner. La clase la escriben los patrones "Banners" en
 * el core/columns; la tarjeta en si es un core/cover y esta en componentes.css.
 *
 * Esta regla es para el mosaico, la unica fila con dos tarjetas apiladas dentro
 * de una columna: el hueco entre ellas es el mismo 24 que el de la fila. El
 * "espaciado entre bloques" del core no sirve aqui (ver inc/editor.php), asi
 * que el ritmo lo pone el margen, igual que en la banda.
 */
.mm-banners .wp-block-column > * + * {
	margin-block-start: var( --s-5 );
}

/* Y sin el margen de abajo que el core pone a toda fila de columnas (1.75em):
   en la de las dos bajas no se ve, pero alargaba 28 la columna y la alta, que se
   estira hasta ahi, acababa por debajo de las bajas. */
.mm-banners .wp-block-columns {
	margin-block-end: 0;
}

/*
 * Tarjetas de una fila, todas igual de altas. La columna del core ya se estira
 * hasta la altura de la fila; poniendola en columna flexible, la tarjeta se
 * queda con el hueco que sobra. Es lo que da los 703 de la tarjeta alta del
 * mosaico sin escribirlos en ninguna parte.
 *
 * Crece con el hueco sobrante y no con un height del 100%: en la columna del
 * mosaico que lleva la grande y las dos bajas no sobra nada, asi que la grande
 * se queda en sus 400 en vez de empujar a las otras dos fuera de la banda.
 */
.mm-banners .wp-block-column {
	display: flex;
	flex-direction: column;

	/*
	 * Y de paso la columna se declara caja de consulta, que es lo que deja a la
	 * tarjeta de dentro saber si le ha tocado ser ancha —texto a la izquierda y
	 * foto a la derecha— o estrecha. La regla esta en componentes.css con el
	 * resto de la tarjeta.
	 *
	 * El selector coge tambien las columnas de dentro del mosaico, y manda la
	 * mas cercana: las dos bajas se miden por sus 392 y no por los 808 de la
	 * columna que las contiene.
	 *
	 * Contiene el ancho, no el alto: las tarjetas de una fila siguen igualandose
	 * como dice el comentario de arriba.
	 */
	container-type: inline-size;
}

.mm-banners .wp-block-column > .is-style-banner {
	flex-grow: 1;
}

/*
 * Las rejillas en tablet. Entre 782 —donde el core deja de apilar— y el
 * escritorio, repartir la fila como en el Figma deja tarjetas donde el texto no
 * cabe: a 782 las pequeñas del mediano median 144 y la llamada se partia a media
 * palabra. Se recolocan para que la columna del texto no baje de unos 220. La
 * clase de cada rejilla la pone su patron (inc/patterns.php).
 *
 * Los !important le ganan al core: flex-wrap:nowrap !important desde 782 y el
 * flex-basis que guarda cada columna en linea.
 */

/* 3 iguales, 2/3 + 1/3 y mosaico aguantan en una fila desde 1024. Por debajo:
   en 3 iguales la primera a todo el ancho y las otras dos a medias; en 2/3 + 1/3
   las dos a medias; en el mosaico, la columna de la grande y las dos bajas a
   todo el ancho y la alta debajo, tambien entera. */
@media ( min-width: 782px ) and ( max-width: 1023px ) {
	:is( .mm-banners--tres, .mm-banners--mosaico ) {
		flex-wrap: wrap !important;
	}

	.mm-banners--tres > .wp-block-column:first-child,
	.mm-banners--mosaico > .wp-block-column {
		flex-basis: 100% !important;
	}

	.mm-banners--tres > .wp-block-column:not( :first-child ),
	.mm-banners--dos-tercios > .wp-block-column {
		flex-basis: calc( 50% - var( --s-5 ) / 2 ) !important;
	}
}

/* El mediano necesita mas. Las rejillas del Figma cuentan con 1280 de contenido,
   que no llegan hasta unos 1440 de pantalla por los margenes: a 1280 el contenido
   mide 1124, la mediana se queda en 587 —por debajo de los 600 de la fila— y las
   pequeñas en 245, con el titular en cuatro lineas. Sus pequeñas no pasan de 268
   hasta los 1380; hasta ahi, la mediana a todo el ancho y las dos pequeñas
   debajo, a medias. */
@media ( min-width: 782px ) and ( max-width: 1379px ) {
	.mm-banners--mediano {
		flex-wrap: wrap !important;
	}

	.mm-banners--mediano > .wp-block-column:first-child {
		flex-basis: 100% !important;
	}

	.mm-banners--mediano > .wp-block-column:not( :first-child ) {
		flex-basis: calc( 50% - var( --s-5 ) / 2 ) !important;
	}
}

/*
 * Apilado. El corte es el 781 del core —donde core/columns pasa cada columna a
 * ancho completo— y no el 767 del resto del sistema: con dos numeros distintos
 * quedaria una franja de 14px con las tarjetas ya en vertical y el hueco
 * todavia de fila.
 *
 * En vertical el diseno junta las tarjetas a 8px (nodo 677-20849).
 */
@media ( max-width: 781px ) {
	.mm-banda .mm-banners,
	.mm-banda .mm-banners .wp-block-columns {
		gap: var( --s-2 );
	}

	.mm-banners .wp-block-column > * + * {
		margin-block-start: var( --s-2 );
	}
}

/* ------------------------------------------------- Banda de contacto */

/*
 * Banda de contacto con asesor. Figma: "BLOQUE CONTACTO ASESOR" (nodo
 * 677-20178), frames "Asesoramiento" (1280x354) y "responsive" (390x519).
 *
 * La tarjeta es un core/group con su color o su degradado y el bloque Fondo de
 * banda para el dibujo (las montadas antes del 2-oct-2026, un core/cover: ver
 * mas abajo). Dentro, un core/group en cuadricula parte las dos mitades, la foto
 * es un core/image y el texto va en un core/group con el estilo "Bocadillo".
 *
 * Aqui solo estan las medidas del frame y el trazo de marca. Todo en % de la
 * caja de 1280, porque en el flujo el ancho lo manda el contenedor.
 */
.mm-contacto-asesor {
	/* El hueco con lo que tenga encima y debajo. En la home el diseño apila las
	   secciones con 64 (Figma 677-18584); en el frame responsive la banda va a
	   sangre y pegada, sin nada (677-19673), asi que abajo se quita. */
	margin-block: var( --s-8 );
	min-height: 354px;
	/* El cover reparte su contenido centrado y con 1em de relleno; aqui las
	   medidas las pone la cuadricula de dentro, y estirar es lo que deja que la
	   foto se apoye en el borde de abajo de la banda. */
	align-items: stretch;
	padding: 0;
	border-radius: var( --rad-xl );
}

/*
 * Desde el 2-oct-2026 la tarjeta es un core/group y no un core/cover: el color
 * o el degradado son los del grupo y el dibujo —los trazos, o las formas de la
 * magenta— es el bloque Fondo de banda, como en el resto de bandas, para que
 * cambiarlo o quitarlo se haga igual en todas. Las tarjetas montadas antes
 * siguen siendo un cover hasta que pasan por Herramientas → Contenido al dia,
 * y esta hoja pinta las dos igual: todo lo de arriba y lo de abajo vale para
 * las dos, y aqui esta lo que el cover traia de serie y el grupo no —la caja
 * flexible, el recorte y el contexto de apilamiento para el fondo—.
 */
.wp-block-group.mm-contacto-asesor {
	position: relative;
	display: flex;
	overflow: hidden;
	isolation: isolate;
	box-sizing: border-box;
}

/* El contenedor que el core mete en el front; en el lienzo no existe y la
   cuadricula cuelga directa de la tarjeta. */
.wp-block-group.mm-contacto-asesor > .wp-block-group__inner-container {
	width: 100%;
}

/* Los trazos de abajo son los del cover; aqui los trae el bloque de fondo. */
.wp-block-group.mm-contacto-asesor::before,
.wp-block-group.mm-contacto-asesor::after {
	content: none;
}

/*
 * Dentro de su banda (los patrones desde el 28-sep-2026, y las paginas de antes
 * pasadas por Herramientas → Contenido al dia): el hueco de 64 lo pone el
 * relleno de .mm-banda, que es lo que lleva el color que se elige en el panel,
 * asi que la tarjeta no pone margen. Los dos caminos, con y sin el contenedor
 * interno que el core mete en el front.
 */
.mm-banda--asesor > .mm-contacto-asesor,
.mm-banda--asesor > .wp-block-group__inner-container > .mm-contacto-asesor {
	margin-block: 0;
}

/*
 * El trazo de marca. Es el mismo dibujo que el de las bandas de mas arriba, pero
 * el diseño lo pone aqui al 18 % y alli al 35 %, y la opacidad viene dentro del
 * SVG: por eso trae su propio fichero.
 *
 * Igual que en la tarjeta de perfil, Figma da la caja YA girada y CSS gira
 * alrededor del centro, asi que lo que se coloca es la caja sin girar
 * (480.103 x 516.312) centrada en la girada (648.706 x 626.952 en -65, -192.13).
 *
 * El z-index los deja en su sitio: por encima del fondo del cover —que son dos
 * elementos de verdad, la imagen y la capa de color— y por debajo del contenido.
 */
.mm-contacto-asesor::before,
.mm-contacto-asesor::after {
	position: absolute;
	z-index: 1;
	display: block;
	aspect-ratio: 480.103 / 516.312;
	background: url( ../images/trazo-asesor.svg ) center / contain no-repeat;
}

.mm-contacto-asesor::before {
	content: '';
	top: -38.65%;
	left: 1.51%;
	width: 37.51%;
	transform: rotate( 70.14deg );
}

/* El segundo trazo solo aparece en el frame de movil, mas abajo. */

.mm-contacto-asesor > .wp-block-cover__inner-container {
	z-index: 2;
}

/*
 * El grupo de dos mitades.
 *
 * Llega hasta el margen derecho del diseño (5.75 %), o sea que mide 1206.4 de
 * los 1280, y la linea que lo parte cae en 603.2. Eso no es casualidad: es justo
 * donde acaba la foto (602.98 en el diseño), asi que cada mitad lleva su
 * contenido pegado a la derecha y las dos medidas salen solas.
 *
 * Las dos columnas las pone la cuadricula del core; el alto completo es lo que
 * permite apoyar la foto abajo.
 *
 * Sin hueco entre columnas: el core le pone a toda cuadricula un gap de 0.5em
 * y esos 8 px se comian 4 de cada mitad, lo justo para que el titular del
 * bocadillo no cupiera (le faltaban 1.7) y se partiera en dos lineas. Solo el
 * de columnas: el de filas es el que separa las mitades apiladas en movil.
 */
.mm-contacto-asesor__cols {
	width: 94.25%;
	height: 100%;
	column-gap: 0;
}

/*
 * La foto, en la mitad izquierda: pegada a la linea del medio y al borde de
 * abajo, donde la recorta la banda. En el diseño el rectangulo mide
 * 478.982 x 353 en una banda de 354, o sea que se sale por abajo; la imagen se
 * sube ya recortada a lo que se ve (319 de alto), y apoyada abajo cae en el
 * mismo sitio.
 *
 * El ancho es el del diseño medido sobre su mitad: 478.982 de 603.2.
 */
.mm-contacto-asesor__foto {
	grid-column: 1;
	align-self: end;
	justify-self: end;
	width: 79.36%;
	margin: 0; /* core/image trae los margenes del <figure> */
}

.mm-contacto-asesor__foto img {
	display: block;
	width: 100%;
	/* Solo el ancho manda: un max-height con el ancho en % no encoge la foto, la
	   aplasta. Si alguien sube un recorte con otras proporciones, la banda crece
	   —se ve al momento y se arregla subiendo el recorte bueno— en vez de salir
	   la foto deformada. */
	height: auto;
}

/*
 * El bocadillo, en la mitad derecha: 557.28 de 603.2, tambien pegado a la
 * derecha, y centrado en vertical. Su forma esta en componentes.css.
 *
 * El rabito cuelga por fuera de la caja, asi que su alto se reserva con el
 * margen de abajo: el centrado reparte la diferencia y el conjunto (bocadillo +
 * rabito) queda centrado, que es lo que hace el diseño. Los --s-6 de arriba y
 * abajo no mueven nada mientras quepa (suman lo mismo a los dos lados) y son el
 * respiro cuando el texto crece y estira la banda.
 */
.mm-contacto-asesor .is-style-bocadillo {
	grid-column: 2;
	align-self: center;
	justify-self: end;
	width: 92.39%;
	margin-block: var( --s-6 ) calc( var( --s-6 ) + 41px );
}

/* La bajada va en Heading/H6, que no es lo que trae un parrafo por defecto.
   Selector de un solo elemento a proposito: si quien edita elige un paso
   tipografico en el bloque, su clase (0,2,0) manda sobre esto. */
.mm-contacto-asesor .is-style-bocadillo p {
	font-size: var( --h6-size );
	line-height: var( --h6-line );
	font-weight: var( --h6-weight );
}

/*
 * Movil. El frame mide 390x519 y la banda va a sangre, sin esquinas: se come el
 * relleno lateral del contenedor con margen negativo, igual que un bloque a
 * ancho completo.
 *
 * El corte es el de la navbar y las tarjetas (1099) y no el de las columnas del
 * core (782): en cuanto la pagina pasa a navegacion de movil, la banda tambien.
 * Las dos mitades no llegan a tablet, que es donde el bocadillo se quedaria sin
 * sitio para el titular.
 *
 * Aqui el grupo deja de tener dos mitades: el bocadillo ocupa el ancho y la foto
 * pasa debajo, apoyada en el borde de abajo. El frame las deja tocarse —la foto
 * sube hasta la esquina del rabito— y aqui no: el bocadillo le guarda el hueco
 * con su margen, asi que la banda crece por encima de los 519.
 */
@media ( max-width: 1099px ) {
	.mm-contacto-asesor {
		margin-block: 0;
		min-height: 519px;
		border-radius: 0;
	}

	.mm-flujo > .mm-contacto-asesor,
	.editor-styles-wrapper .is-root-container > .mm-contacto-asesor,
	.editor-styles-wrapper .is-root-container > .mm-animacion > .mm-contacto-asesor {
		margin-inline: calc( var( --margen-pagina ) * -1 );
	}

	/* Dentro de su banda, a sangre y pegada igual: la banda ya va a todo el
	   ancho, asi que basta con quitarle el relleno. */
	.mm-banda--asesor {
		padding: 0;
	}

	/*
	 * Figma no dibuja tablet, y entre el frame de movil (390) y este corte hay
	 * mucho sitio: con los porcentajes del frame la foto se pone enorme y el
	 * bocadillo escribe lineas de mil pixeles. Se topa el grupo en 590, que es
	 * lo que deja el bocadillo en los 557 del diseño, y se centra.
	 */
	/* Doblada con is-layout-grid por lo mismo que .mm-tarjetas: el
	   grid-template-columns que genera el core pesa una sola clase y su hoja va
	   detras de esta. */
	.mm-contacto-asesor__cols.is-layout-grid {
		grid-template-columns: 1fr;
		width: 100%;
		max-width: 590px;
		margin-inline: auto;
	}

	/* 16 a los lados y 48 arriba son los del frame (4.1 % de 390, y 48 de 519).
	   El de abajo solo cuenta si el texto crece. */
	.mm-contacto-asesor .is-style-bocadillo {
		grid-column: 1;
		/* Delante de la foto: en una sola columna manda el orden del marcado, y
		   ahi la foto va primera porque en escritorio es la mitad izquierda. Se
		   puede reordenar sin mas porque la foto es decorativa (alt vacio) y no
		   hay nada enfocable en ella: el orden de lectura no cambia. */
		order: -1;
		align-self: start;
		justify-self: stretch;
		width: auto;
		/* Abajo, el alto del rabito mas un paso de separacion: es lo que impide
		   que la punta llegue a tocar la foto. */
		margin: var( --s-7 ) var( --s-4 ) calc( 28px + var( --s-4 ) );
	}

	/* El diseño baja el titular a H4 y devuelve la bajada al cuerpo. */
	.mm-contacto-asesor .is-style-bocadillo :is( h2, h3, h4 ) {
		font-size: var( --h4-size );
		line-height: var( --h4-line );
		font-weight: var( --h4-weight );
	}

	.mm-contacto-asesor .is-style-bocadillo p {
		font-size: var( --body-size );
		line-height: var( --body-line );
		font-weight: 400;
	}

	/* El diseño usa aqui el boton M. Son sus dos declaraciones y no la clase
	   .mm-boton--m porque una clase no puede aparecer con un media query. */
	.mm-contacto-asesor .wp-block-button__link {
		font-size: var( --body-sm-size );
		line-height: var( --body-sm-line );
	}

	/*
	 * 58.39 de 390 de izquierda y 291.73 de ancho, las medidas del frame, pero en
	 * el flujo y no suelta: el frame deja que la foto suba hasta la esquina del
	 * rabito y aqui no se pueden tocar, asi que la foto se apoya en el borde de
	 * abajo y el bocadillo le deja su hueco con el margen. La banda crece lo que
	 * haga falta por encima de los 519 del diseño.
	 */
	.mm-contacto-asesor__foto {
		grid-column: 1;
		align-self: end;
		justify-self: start;
		margin-inline-start: 15%;
		width: 74.8%;
		/* El frame de movil usa la foto sin voltear y el de escritorio volteada;
		   la que se sube es la de escritorio, asi que aqui se le da la vuelta. */
		transform: scaleX( -1 );
	}

	/*
	 * En movil el diseño reparte dos trazos: el grande asomando por la izquierda,
	 * girado casi del reves, y uno pequeño detras de la foto.
	 *
	 * Cada uno con su SVG, el que exporta Figma de su nodo (885-27111 y
	 * 885-27107). El grosor va dibujado dentro del SVG y escala con el, y en Figma
	 * los dos trazos de movil tienen el mismo, unos 8 px: con el de escritorio el
	 * pequeño salia a 3-4 y el grande a 15-17. La proporcion es la misma que la de
	 * escritorio, asi que el aspect-ratio de arriba sigue valiendo.
	 */
	.mm-contacto-asesor::before {
		top: 71.89%;
		left: -68.63%;
		width: 116.7%;
		background-image: url( ../images/trazo-asesor-movil.svg );
		transform: rotate( 176.04deg );
	}

	.mm-contacto-asesor::after {
		content: '';
		top: 62.35%;
		left: 66.07%;
		width: 28.4%;
		background-image: url( ../images/trazo-asesor-movil-pequeno.svg );
		transform: rotate( -89.35deg );
	}
}

/* El interruptor "Trazos de marca" del panel (assets/js/editor-banner.js). Va
   despues del bloque de movil para ganarle al content:'' del segundo trazo. */
.mm-contacto-asesor--sin-trazos::before,
.mm-contacto-asesor--sin-trazos::after {
	content: none;
}

/*
 * Fondo de banda: las siluetas de marca que el diseño reparte por la franja.
 *
 * No las dibuja esta hoja. Son dos imagenes ya compuestas —assets/images/
 * fondo-teaser.png (2880x1330) y fondo-teaser-movil.png (780x1852)— porque el
 * Figma coloca los mismos dos dibujos en sitios y tamaños distintos en cada
 * ancho, y porque asi el adorno de una banda se cambia sin tocar CSS: son
 * bloques core/image y se sustituyen con el boton "Reemplazar" de siempre.
 *
 * Van dentro de la banda y no en el fondo del grupo porque el fondo nativo de
 * WordPress admite una sola imagen, y aqui hacen falta dos, una por ancho.
 *
 * La banda de llamada a la accion (.mm-cta, mas abajo) lleva su fondo igual,
 * con el bloque Fondo de banda, asi que comparte la caja y la colocacion.
 */
.mm-banda--fondo,
.mm-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/*
 * Los dos caminos de siempre: en el front WordPress mete el
 * .wp-block-group__inner-container entre la banda y su contenido, y en el
 * lienzo del editor los bloques cuelgan directos.
 *
 * Aqui hace falta ademas soltar lo que .mm-banda le pone a todo hijo suyo: el
 * ancho maximo de contenido (el fondo va de borde a borde) y el ritmo vertical
 * (el fondo no ocupa sitio, asi que no cuenta como hermano). El z-index
 * negativo lo deja sobre el color de la banda y debajo del contenido, sin
 * necesidad de levantar el contenido: el aislamiento de arriba acota el
 * apilamiento a la banda.
 *
 * ponytail: object-fit cover. La imagen escala con la banda, asi que en
 * pantallas muy anchas los adornos crecen; los pseudoelementos anteriores los
 * mantenian a tamaño fijo. Si molesta, la salida es exportar una imagen mas
 * ancha con el dibujo pegado a los bordes, no volver a colocar cada silueta.
 */
.mm-banda--fondo > .mm-banda__fondo,
.mm-banda--fondo > .wp-block-group__inner-container > .mm-banda__fondo,
.mm-cta > .mm-banda__fondo,
.mm-cta > .wp-block-group__inner-container > .mm-banda__fondo,
.mm-contacto-asesor > .mm-banda__fondo,
.mm-contacto-asesor > .wp-block-group__inner-container > .mm-banda__fondo {
	position: absolute;
	z-index: -1;
	inset: 0;
	max-width: none;
	margin: 0;
}

.mm-banda--fondo > .mm-banda__fondo + *,
.mm-banda--fondo > .wp-block-group__inner-container > .mm-banda__fondo + *,
.mm-cta > .mm-banda__fondo + *,
.mm-cta > .wp-block-group__inner-container > .mm-banda__fondo + *,
.mm-contacto-asesor > .mm-banda__fondo + *,
.mm-contacto-asesor > .wp-block-group__inner-container > .mm-banda__fondo + * {
	margin-block-start: 0;
}

.mm-banda__fondo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Una u otra, nunca las dos: mismo corte que el resto del sistema. */
@media ( max-width: 767px ) {
	.mm-banda__fondo--escritorio {
		display: none;
	}
}

@media ( min-width: 768px ) {
	.mm-banda__fondo--movil {
		display: none;
	}
}

/*
 * Banda de llamada a la accion. Figma: "Bloque Call to action" (nodo
 * 913-27698), frames "call-to-action-desktop" (1440x233) y
 * "call-to-action-responsive" (390x255).
 *
 * Va encima de .mm-banda, que ya pone el fondo, el relleno y el ancho de
 * dentro. Aqui solo esta lo que el diseno cambia: el boton pegado al titular.
 *
 * Las dos siluetas —un trazo blanco a la derecha y el cursor azul cortado por
 * el borde de abajo— ya no se pintan aqui: desde el 1-oct-2026 son el dibujo
 * "cta" del bloque Fondo de banda (fondo-cta.svg y fondo-cta-movil.svg), que
 * se cambia o se quita desde su panel. Los dos SVG no llevan viewBox: ocupan la
 * caja de la banda y anclan cada silueta en porcentaje —el trazo al borde
 * derecho, el cursor al centro, con el titular—, asi que conservan su tamaño
 * en cualquier ancho, igual que cuando eran pseudoelementos. Las paginas de
 * antes se pasan con Herramientas → Contenido al dia.
 */

/* El diseno separa titular y boton con 16, no con los 32 de la banda. */
.mm-cta > * + *,
.mm-cta > .wp-block-group__inner-container > * + * {
	margin-block-start: var( --s-4 );
}

/*
 * Las bandas de cuenta atras son esta misma con el contador debajo de la
 * entradilla: 32 para que no se le pegue.
 */
.mm-banda.mm-cuenta-banda .mm-cuenta {
	margin-block-start: var( --s-6 );
}

/*
 * Movil.
 *
 * El frame apila el titular en tres lineas dentro de una columna de 230, que es
 * lo que queda de los 390 con los 80 de relleno que lleva a cada lado.
 *
 * Esos 80 se los queda el titular como ancho maximo, y no la banda como relleno:
 * con 80 de relleno, en una pantalla de 320 la columna se queda en 160 y el
 * boton, que mide 156, no cabria. Asi el titular rompe donde rompe el diseno y
 * el boton conserva el ancho de la banda, que es el margen de pagina del
 * sistema.
 *
 * Las siluetas cambian de sitio —el trazo asoma por arriba y el cursor baja a
 * la esquina de abajo a la izquierda, mas pequeno—: es fondo-cta-movil.svg.
 */
@media ( max-width: 767px ) {
	.mm-cta {
		padding-block: var( --s-7 );
	}

	/* La columna del frame. Centrarla no hace falta: los margenes automaticos
	   se los pone .mm-banda a todos sus hijos. */
	.mm-cta > :is( h1, h2, h3, h4, h5, h6 ),
	.mm-cta > .wp-block-group__inner-container > :is( h1, h2, h3, h4, h5, h6 ) {
		max-width: 230px;
	}

	/*
	 * El diseno baja el titular a H4.
	 *
	 * Las dos clases del mismo elemento a proposito: el paso "Titular" del
	 * editor lo pinta mcm_gb_preset_css() con ":is( .mm-contenido,
	 * .editor-styles-wrapper ) .has-h3-font-size", que tambien pesa (0,2,0).
	 * Con una sola clase aqui, quien manda es el orden en que se encolan las
	 * hojas, y eso es una cerilla esperando: (0,3,0) gana siempre.
	 */
	.mm-banda.mm-cta .has-h3-font-size {
		font-size: var( --h4-size );
		line-height: var( --h4-line );
		font-weight: var( --h4-weight );
	}
}

/*
 * Y los mismos dos anchos en el lienzo, donde el bloque no lleva la clase.
 *
 * La clase alignfull se la pone el core al guardar; mientras se edita, la
 * alineacion viaja en un atributo del envoltorio (data-align), asi que
 * ".is-root-container > .alignfull" no encontraba nada: la banda se quedaba con
 * el techo de 1280 de la regla de arriba y, encima, con el
 * "margin-left/right: -8px" que el core le pone a data-align=full
 * (edit-post/classic.css). Resultado: todas las bandas pegadas a la izquierda y
 * la del asesor -que no lleva alineacion- centrada, o sea el lienzo diciendo una
 * cosa y el front otra.
 *
 * Los selectores repiten los cuatro nombres del core a proposito: el suyo pesa
 * (0,4,0) y hay que ganarle para recuperar el margen negativo.
 */
.mm-flujo > .alignwide,
.editor-styles-wrapper .is-root-container > .alignwide,
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .wp-block[data-align='wide'],
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .mm-animacion > .wp-block[data-align='wide'] {
	max-width: var( --contenedor );
}

/* A sangre: se come el relleno del contenedor con margen negativo, en vez de
   100vw, que cuenta la barra de scroll y provoca desbordamiento horizontal. */
.mm-flujo > .alignfull,
.editor-styles-wrapper .is-root-container > .alignfull,
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .wp-block[data-align='full'],
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .mm-animacion > .wp-block[data-align='full'] {
	max-width: none;
	margin-inline: calc( var( --margen-pagina ) * -1 );
}

/* --------------------------------------------------- Accesibilidad comun */

/* La pagina en la que se esta, marcada tambien de forma visible: el color por
   si solo no vale (WCAG 1.4.1). */
.mm-mega__lista [aria-current='page'],
.mm-cajon [aria-current='page'],
.mm-navbar__item[aria-current='page'] {
	color: var( --accent-active );
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------- Indice de contenidos */
/*
 * El desplegable "Contents" que baja a cada seccion de tarjetas de producto
 * (Figma 885-26945).
 *
 * El patron solo deja aqui un grupo vacio; el control entero lo monta
 * assets/js/contents.js con las secciones que haya en la pagina. Por eso este
 * bloque solo describe como se ve, y nada de aqui aparece si el script no corre.
 *
 * En el editor el hueco esta vacio, porque el control lo monta el script y en el
 * lienzo no corre. Un bloque vacio no dice nada de si mismo, pero explicarlo con
 * un cartel era peor: metia en el editor un texto que en el front no existe. Asi
 * que se dibuja el boton que se va a ver, con las mismas reglas de mas abajo. No
 * es funcional —no abre—, pero enseña lo que va a salir en su sitio y con su
 * tamaño, que es lo que hace falta para montar la pagina.
 *
 * El rotulo va escrito aqui, que es el precio de pintarlo desde CSS: en el front
 * lo pone inc/assets.php y se traduce, y aqui no. Si algun dia el sitio deja de
 * llamarlo "Contents", este es el segundo sitio donde cambiarlo.
 */
.editor-styles-wrapper .mm-contents {
	display: inline-flex;
	align-items: center;
	gap: var( --s-2 );
	padding: calc( var( --s-2 ) - 2px ) calc( var( --s-5 ) - 2px );
	border: 2px solid var( --accent );
	border-radius: var( --rad-pill );
	background: var( --surface );
	color: var( --accent-active );
	font-size: var( --body-sm-size );
	font-weight: 600;
	line-height: var( --body-sm-line );
}

.editor-styles-wrapper .mm-contents::before {
	content: 'Contents';
}

.editor-styles-wrapper .mm-contents::after {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url( ../images/chevron-fino.svg ) center / contain no-repeat;
	mask: url( ../images/chevron-fino.svg ) center / contain no-repeat;
	transform: rotate( 90deg );
}

/*
 * El hueco de la variante en pildoras, en el lienzo: la misma caja de arriba
 * pero en gris, sin chevron y con un rotulo generico. Los de verdad son los
 * titulares de las secciones y eso CSS no lo sabe; lo que hace falta para montar
 * la pagina es ver la forma y el sitio.
 */
.editor-styles-wrapper .mm-contents--pildoras {
	border-color: var( --border-fn );
	color: var( --text );
}

.editor-styles-wrapper .mm-contents--pildoras::before {
	content: 'Secciones';
}

.editor-styles-wrapper .mm-contents--pildoras::after {
	content: none;
}

.mm-contents__caja {
	position: relative;
}

/*
 * El boton es el de linea del sistema —fondo blanco, borde y texto rojos— pero
 * mas bajo que los dos tamanos que define el design system: 37 en el frame,
 * frente a los 50 de la L y los 45 de la M. Los 2px de borde se descuentan del
 * relleno, como en componentes.css, para que mida 37 exactos con borde y todo.
 */
.mm-contents__boton {
	display: inline-flex;
	align-items: center;
	gap: var( --s-2 );
	width: fit-content;
	padding: calc( var( --s-2 ) - 2px ) calc( var( --s-5 ) - 2px );
	border: 2px solid var( --accent );
	border-radius: var( --rad-pill );
	background: var( --surface );
	color: var( --accent-active );
	font-size: var( --body-sm-size );
	font-weight: 600;
	line-height: var( --body-sm-line );
	list-style: none;
	cursor: pointer;
}

/* El triangulito que Safari y Firefox ponen por su cuenta en el <summary>. */
.mm-contents__boton::-webkit-details-marker {
	display: none;
}

.mm-contents__boton::after {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url( ../images/chevron-fino.svg ) center / contain no-repeat;
	mask: url( ../images/chevron-fino.svg ) center / contain no-repeat;
	transform: rotate( 90deg );
}

.mm-contents__caja[open] .mm-contents__boton::after {
	transform: rotate( -90deg );
}

.mm-contents__boton:hover {
	background: var( --accent-bg );
}

/*
 * El panel flota sobre lo que hay debajo, como en el frame, donde tapa las
 * primeras tarjetas. Absoluto y no en el flujo: si empujara el contenido, abrir
 * el indice moveria de sitio justo aquello a lo que se quiere ir.
 */
.mm-contents__panel {
	position: absolute;
	top: calc( 100% + var( --s-3 ) );
	left: 0;
	z-index: 10;
	width: 280px;
	max-width: 100%;
	padding-block: var( --s-2 );
	border-radius: var( --rad-md );
	background: var( --surface );
	box-shadow: var( --sombra-md );
}

.mm-contents__leyenda {
	margin: 0;
	padding: var( --s-2 ) var( --s-4 );
	color: var( --text );
	font-size: var( --body-sm-size );
	font-weight: 600;
	line-height: var( --body-sm-line );
}

/*
 * Cada opcion mide 50 de alto y el texto arranca a 48, que es donde acaba el
 * hueco del check: marcada o no, el texto no se mueve.
 */
.mm-contents__opcion {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 50px;
	padding: var( --s-3 ) var( --s-4 ) var( --s-3 ) 48px;
	color: var( --text );
	font-size: var( --body-size );
	line-height: var( --body-line );
	text-decoration: none;
}

.mm-contents__opcion:hover {
	background: var( --accent-bg );
}

.mm-contents__opcion.is-actual {
	background: var( --accent-bg-strong );
	font-weight: 600;
}

.mm-contents__opcion.is-actual::before {
	content: '';
	position: absolute;
	top: 50%;
	left: var( --s-4 );
	width: 20px;
	height: 20px;
	background-color: var( --accent-active );
	-webkit-mask: url( ../images/check.svg ) center / 16px 16px no-repeat;
	mask: url( ../images/check.svg ) center / 16px 16px no-repeat;
	transform: translateY( -50% );
}

/*
 * El desplegable es de tablet y movil: en escritorio no sale (nota de Figma
 * 1816-13663). Solo en el front —se pide por la caja que monta el script—, y el
 * editor lo sigue ensenando, que es donde se coloca. Con el se van los 24 que le
 * hacian sitio: la banda vuelve a su relleno y la seccion arranca arriba, como
 * en una pagina sin indice.
 */
@media ( min-width: 1100px ) {
	.mm-contents:has( > .mm-contents__caja ) {
		display: none;
	}

	.mm-pestanas + .mm-banda:has( .mm-contents__caja ) {
		padding-top: var( --s-8 );
	}

	.mm-banda > .mm-contents:has( > .mm-contents__caja ) + *,
	.mm-banda > .wp-block-group__inner-container > .mm-contents:has( > .mm-contents__caja ) + * {
		margin-block-start: 0;
	}
}

/* ------------------------------- El indice en pildoras (Figma 1144-901)
 *
 * La misma lista de secciones con otra piel: en vez del desplegable, una fila
 * de pildoras precedida de un rotulo escrito —"Ver materiales:" en el frame—.
 * La fila la monta assets/js/contents.js; el rotulo es un parrafo del patron,
 * asi que se edita como cualquier texto.
 */
.mm-contents-fila.is-layout-flex {
	align-items: center;
	gap: var( --s-3 );
}

.mm-contents-fila__rotulo {
	margin: 0;
	color: var( --text-soft );
	font-size: var( --body-size );
	line-height: var( --body-line );
	font-weight: 600;
}

/* De la fila a su primera seccion, los mismos 24 que deja el desplegable y no
   los 32 de .mm-banda. Los dos caminos de siempre. */
.mm-banda > .mm-contents-fila + *,
.mm-banda > .wp-block-group__inner-container > .mm-contents-fila + * {
	margin-block-start: var( --s-5 );
}

.mm-contents__pildoras {
	display: flex;
	flex-wrap: wrap;
	gap: var( --s-3 );
}

/* El boton de linea del sistema en gris: los 2px de borde descontados del
   relleno, como en componentes.css, para que mida los 37 del frame. */
.mm-contents__pildora {
	display: inline-flex;
	align-items: center;
	padding: calc( var( --s-2 ) - 2px ) calc( var( --s-5 ) - 2px );
	border: 2px solid var( --border-fn );
	border-radius: var( --rad-pill );
	background: var( --surface );
	color: var( --text );
	font-size: var( --body-sm-size );
	line-height: var( --body-sm-line );
	font-weight: 600;
	text-decoration: none;
	transition:
		color var( --motion-link ) var( --motion-ease ),
		border-color var( --motion-link ) var( --motion-ease ),
		background-color var( --motion-link ) var( --motion-ease );
}

.mm-contents__pildora:hover,
.mm-contents__pildora:focus-visible {
	border-color: var( --accent );
	color: var( --accent );
}

.mm-contents__pildora:focus-visible {
	outline: 3px solid var( --focus );
	outline-offset: 2px;
}

/*
 * La que se acaba de pulsar, marcada. El frame dibuja las dos pildoras iguales
 * y no define este estado, pero sin el, pulsar una no deja ninguna señal de
 * cual se eligio; el desplegable si la deja, con su check. Va con el rosa del
 * sistema, el mismo de la fila marcada del panel.
 */
.mm-contents__pildora.is-actual {
	border-color: var( --accent );
	background: var( --accent-bg-strong );
	color: var( --accent-active );
}

/* ---------------------------------- Banda de presentacion del producto
 *
 * Figma 1155-12053 (escritorio) y 1155-14191 (movil). Es el patron
 * "Presentacion del producto": la banda que abre la ficha, con el titular, la
 * bajada y una caja blanca donde van la tira de portadas, el resumen del curso
 * y el enlace a las muestras.
 *
 * La banda no escribe nada aqui a proposito: el frame mide 64 de relleno
 * vertical, 1280 de contenido, 8 del titular a la bajada y 32 de la bajada a la
 * caja, que es exactamente lo que .mm-banda ya hace. Lo unico propio es la caja
 * y su ritmo por dentro.
 */
.mm-presentacion__ficha {
	padding: var( --s-5 ) var( --s-7 );
	border-radius: var( --rad-lg );
	background: var( --surface );
	color: var( --text );
}

/*
 * El hueco lo llevan los hijos y no el contenedor: dentro de la caja hay tres
 * pasos distintos —32 de las portadas al titular, 12 del titular al resumen y
 * 16 del resumen al enlace— y con un solo gap no salen los tres.
 *
 * La clase va doblada con la del core en todas las reglas de ritmo, y no es
 * adorno: el gap del layout flex lo escribe el core en una clase suya
 * (.wp-container-…) cuya hoja va detras de esta, y los margenes de fabrica de
 * los bloques —.wp-block-image trae 0 0 1em— pesan lo mismo que la clase sola,
 * asi que el empate lo decidiria el orden de las hojas, que no controlamos.
 */
.mm-presentacion__ficha.is-layout-flex {
	gap: 0;
}

.mm-presentacion__ficha.is-layout-flex > * {
	margin-block: 0;
}

.mm-presentacion__ficha.is-layout-flex > * + * {
	margin-block-start: var( --s-3 );
}

.mm-presentacion__ficha.is-layout-flex > .wp-block-image + *,
.mm-presentacion__ficha.is-layout-flex > .mm-carrusel + * {
	margin-block-start: var( --s-6 );
}

/* Un carrusel en el sitio de la tira de portadas ocupa el ancho de la caja. */
.mm-presentacion__ficha.is-layout-flex > .mm-carrusel {
	width: 100%;
}

.mm-presentacion__ficha.is-layout-flex > .wp-block-buttons {
	margin-block-start: var( --s-4 );
}

/*
 * La tira de portadas ocupa el ancho de la caja.
 *
 * El height:auto por lo de siempre: wp_get_attachment_image escribe width y
 * height como atributos y con los dos puestos el navegador ignora cualquier
 * proporcion. Y sin recorte ninguno: la imagen es una tira de portadas que sube
 * quien monta la pagina, y un alto fijo le cortaria la cabeza a las que no
 * midan lo que espera el diseño.
 */
/*
 * La caja del frame (1184x275), con la tira entera dentro: sale siempre del
 * mismo tamaño y sigue sin cortar ninguna (QA de producto, 1877-14510).
 *
 * La proporcion va en la FIGURA y no en la imagen, y no es un detalle: la
 * figura es hijo de una columna flexible, y ahi una <img> con width: 100% y
 * aspect-ratio calcula su alto con su ancho intrinseco, no con el de la
 * columna. Con la tira de muestra (1184 de ancho) coincidian; con una subida
 * de 828 la figura media 192, la imagen se pintaba a 272 y se comia el titular
 * (Shareville en webpre, 28-sep-2026). A la figura, que no es un elemento
 * reemplazado, la proporcion se le aplica sobre su ancho de verdad. El
 * min-height: 0 hace falta: sin el, una caja con aspect-ratio crece hasta lo
 * que mida su contenido, y volvia a mandar la imagen. La imagen lleva la misma
 * proporcion —height: 100% no le resuelve contra la figura— y asi las dos
 * miden lo mismo y ninguna se sale.
 */
.mm-presentacion__portadas.wp-block-image {
	width: 100%;
	min-height: 0;
	aspect-ratio: 1184 / 275;
}

.mm-presentacion__portadas.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1184 / 275;
	object-fit: contain;
}

/* El enlace tira 4px a la izquierda para compensar su propio relleno: el diseño
   lo alinea con el texto de arriba, no con su caja. Igual que en la ficha de
   claves. */
.mm-presentacion__accion {
	margin-inline-start: calc( var( --s-1 ) * -1 );
}

/*
 * En movil (frame 1155-14191) la caja se deshace —sin fondo, sin relleno y sin
 * radio— y las portadas bajan al final, debajo del enlace. Eso ultimo es la
 * razon de que la caja sea flex y no flujo: un order y ya, sin tocar el
 * marcado, que es el que el editor tiene que seguir entendiendo.
 *
 * Ojo con el orden visual y el del DOM: los selectores de hermano (+) siguen
 * mirando el marcado, asi que la regla que separa las portadas de lo que viene
 * detras se apaga y el hueco se lo pone la propia imagen.
 */
@media ( max-width: 767px ) {
	.mm-presentacion {
		padding-block: 40px; /* el paso de 40 del frame, que ninguna variable respalda */
	}

	/*
	 * El titular y el de la caja bajan un escalon mas del que ya les da la
	 * escala de movil (variables.css): el frame dibuja el H2 en H4 —25— y el H3
	 * en H5 —20—. Es la misma decision que en las otras dos bandas de producto.
	 */
	.mm-presentacion > h2,
	.mm-presentacion > .wp-block-group__inner-container > h2 {
		font-size: var( --h4-size );
		line-height: var( --h4-line );
		font-weight: var( --h4-weight );
	}

	.mm-presentacion__ficha h3 {
		font-size: var( --h5-size );
		line-height: var( --h5-line );
		font-weight: var( --h5-weight );
	}

	/* De la bajada a la caja, 16 y no los 32 de .mm-banda. */
	.mm-presentacion > .mm-presentacion__ficha,
	.mm-presentacion > .wp-block-group__inner-container > .mm-presentacion__ficha {
		margin-block-start: var( --s-4 );
	}

	.mm-presentacion__ficha {
		padding: 0;
		border-radius: 0;
		background: none;
	}

	/*
	 * El resumen se queda en sus 18.
	 *
	 * La escala de movil baja un paso todos los tamaños del editor —"Medio" pasa
	 * a 16, en mcm_gb_preset_css()— y este frame no lo baja: dibuja las mismas
	 * ocho lineas de Body/Medium que en escritorio. La clase va doblada con la
	 * del preset porque su regla vive en la hoja de variables, que va delante.
	 */
	.mm-presentacion__ficha p.has-body-md-font-size {
		font-size: var( --body-md-size );
		line-height: var( --body-md-line );
	}

	.mm-presentacion__ficha.is-layout-flex > * + * {
		margin-block-start: var( --s-4 );
	}

	/* Las portadas al final, con sus 16 por encima del enlace. */
	.mm-presentacion__ficha.is-layout-flex > .wp-block-image {
		order: 1;
		margin-block-start: var( --s-4 );
	}

	/* El titular pasa a ser el primero de la caja: ya no se separa de nada. */
	.mm-presentacion__ficha.is-layout-flex > .wp-block-image + * {
		margin-block-start: 0;
	}

	/* El enlace va pegado al resumen: los 13 que se ven son su propio relleno. */
	.mm-presentacion__ficha.is-layout-flex > .wp-block-buttons {
		margin-block-start: 0;
	}
}

/* --------------------------------------------- Banda de claves del producto
 *
 * Figma 1155-12073 (escritorio) y 1155-14205 (movil). Es el patron "Claves del
 * producto": una banda con el color de marca del producto, un titular, una
 * ficha destacada en una caja blanca y, debajo, las claves con icono.
 *
 * Casi todo lo pone .mm-banda. Aqui van las tres cosas que el sistema no cubre:
 * el relleno de la banda (80 y no 64), el ritmo entre sus tres piezas y la
 * caja blanca de la ficha, que cambia de forma en movil y por eso no puede ir
 * en los controles del bloque.
 */
/* El relleno lo comparten las dos bandas de producto: 80 arriba y abajo en los
   dos frames, en vez de los 64 de .mm-banda. */
.mm-claves,
.mm-testimonios {
	padding-block: var( --s-9 );
}

/*
 * Los dos caminos de siempre: en el front WordPress mete el
 * .wp-block-group__inner-container entre la banda y su contenido; en el lienzo
 * del editor los bloques cuelgan directos.
 */
.mm-claves > .mm-claves__lista,
.mm-claves > .wp-block-group__inner-container > .mm-claves__lista {
	margin-block-start: var( --s-7 );
}

/* Del titular a la ficha van 40 en escritorio; en movil son los 32 de siempre,
   que ya los pone .mm-banda. */
@media ( min-width: 768px ) {
	.mm-claves > .mm-claves__ficha,
	.mm-claves > .wp-block-group__inner-container > .mm-claves__ficha {
		margin-block-start: 40px;
	}
}

/* La ficha destacada: la caja blanca del diseño. */
.mm-claves__ficha {
	gap: 40px; /* el paso de 40 del Figma, que ninguna variable respalda */
	padding: var( --s-7 );
	border-radius: var( --rad-xl );
	background: var( --surface );
	color: var( --text );
}

/*
 * Doblada a proposito: el hueco de las columnas lo escribe el core en una clase
 * suya (.wp-container-…) y su hoja va detras de esta, asi que con una sola
 * clase se empata y gana el orden, que no controlamos. Ademas hay que ganarle
 * al gap de 24 que .mm-banda le da a cualquier core/columns.
 */
.mm-banda .mm-claves__ficha.wp-block-columns {
	gap: 40px;
}

/*
 * La foto de la ficha. Dos cosas que no son de adorno.
 *
 * El height:auto, porque wp_get_attachment_image escribe width y height como
 * atributos y con los dos puestos el navegador ignora cualquier proporcion.
 *
 * Y la clase del core en el selector: su hoja trae un ".wp-block-image img {
 * height: auto }" que pesa lo mismo que ".mm-claves__ficha img", asi que el
 * empate lo decidiria el orden de las hojas, que no controlamos —las nuestras
 * no dependen de wp-block-library—. Con la clase doblada mandamos nosotros, que
 * es lo que hace que el alto fijo de movil llegue a aplicarse.
 */
.mm-claves__ficha .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Dentro de la columna de texto manda el ritmo del diseño: 16 del titular al
   parrafo y 8 del parrafo al enlace. */
.mm-claves__ficha .wp-block-column > * {
	margin-block: 0;
}

.mm-claves__ficha .wp-block-column > * + * {
	margin-block-start: var( --s-4 );
}

/* El enlace tira 4px a la izquierda para compensar su propio relleno: el diseño
   lo alinea con el texto de arriba, no con su caja. */
.mm-claves__ficha .mm-claves__accion {
	margin-block-start: var( --s-2 );
	margin-inline-start: calc( var( --s-1 ) * -1 );
}

/* Las claves de debajo: icono, titular y texto, centrados. */
.mm-claves__lista .wp-block-column {
	text-align: center;
}

.mm-claves__lista .wp-block-column > * {
	margin-block: 0;
}

.mm-claves__lista .wp-block-column > * + * {
	margin-block-start: var( --s-3 );
}

.mm-banda .mm-claves__lista.wp-block-columns {
	gap: var( --s-11 );
}

/*
 * El icono, blanco pase lo que pase.
 *
 * Los dos que trae el patron son Phosphor duotone del propio Figma, que vienen
 * con fill="currentColor": dentro de un <img> eso no hereda nada y se pintan
 * negros. El filtro los deja en blanco —y deja en blanco tambien el que ponga
 * quien monte la pagina, sea del color que sea, que es lo que hace que cambiar
 * el icono no pida prepararlo antes—. El brillo a 0 borra el color y la
 * inversion lo sube a blanco, las dos respetando la transparencia, asi que el
 * medio tono del duotone se mantiene.
 */
/* El bloque Icono a 90, centrado en su columna; el blanco lo toma del texto de
   la banda. La regla del img es de las paginas montadas antes, cuando el icono
   era un core/image negro teñido con un filtro. */
.mm-claves__icono {
	--mm-icono: 90px;
	display: flex;
	justify-content: center;
}

.mm-claves__icono img {
	width: 90px;
	height: 90px;
	filter: brightness( 0 ) invert( 1 );
}

/*
 * En movil (frame 1155-14205) la banda encoge y la ficha se pone en pie: la
 * foto arriba con alto fijo, el texto debajo. Lo de apilar las columnas ya lo
 * hace el core en 781; aqui van el relleno, los pasos y el alto de la foto.
 *
 * El titular de la banda baja a H4 y no al H3 que le tocaria por la escala
 * general (variables.css): el diseño lo dibuja un escalon mas abajo, como ya
 * pasa en la banda de accesos por etapa.
 */
@media ( max-width: 767px ) {
	.mm-claves,
	.mm-testimonios {
		padding-block: var( --s-7 );
	}

	/* El titular baja a H4 y no al H3 que le tocaria por la escala general: los
	   dos frames de movil lo dibujan un escalon mas abajo. */
	.mm-claves > :is( h1, h2, h3 ),
	.mm-claves > .wp-block-group__inner-container > :is( h1, h2, h3 ),
	.mm-testimonios > :is( h1, h2, h3 ),
	.mm-testimonios > .wp-block-group__inner-container > :is( h1, h2, h3 ) {
		font-size: var( --h4-size );
		line-height: var( --h4-line );
		font-weight: var( --h4-weight );
	}

	.mm-claves__ficha {
		padding: var( --s-6 ) var( --s-5 );
	}

	/* La portada no se estira: se apoya en su alto y se mete entera dentro. */
	.mm-claves__ficha .wp-block-image img {
		height: 180px;
		object-fit: contain;
	}

}

/*
 * Los huecos entre columnas cambian donde el core las apila, que es 781 y no el
 * 767 del resto del contenido: si se escribieran en el corte de siempre, entre
 * 768 y 781 las columnas ya irian una debajo de otra separadas por el hueco
 * horizontal —128 entre dos claves, un agujero—.
 */
@media ( max-width: 781px ) {
	.mm-banda .mm-claves__ficha.wp-block-columns {
		gap: var( --s-5 );
	}

	.mm-banda .mm-claves__lista.wp-block-columns {
		gap: 40px;
	}
}

/* ------------------------------------ Banda de testimonios del producto
 *
 * Figma 1155-12101 (escritorio) y 1155-14233 (movil). Patron "Testimonios del
 * producto": una banda clara, un titular y tres testimonios, cada uno con su
 * bocadillo y, debajo, la foto con el nombre y el centro.
 *
 * El bocadillo es el estilo "Bocadillo" de componentes.css, el mismo de la
 * banda de contacto con asesor. Aqui solo se le cambia el color, y se le cambia
 * desde la seccion y no desde el bloque a proposito: el azul es de esta banda,
 * no una decision de cada testimonio.
 */
/*
 * Solo la imagen, no el atajo: con "background" se resetearia el
 * background-size que el estilo le pone al bocadillo, que es lo que hace que
 * el rabito continue el degradado sin corte. Y el rabito no necesita regla
 * propia: hereda esta misma imagen.
 */
:is( .mm-contenido, .editor-styles-wrapper ) .mm-testimonios .wp-block-group.is-style-bocadillo,
:is( .mm-contenido, .editor-styles-wrapper ) .mm-caso .wp-block-group.is-style-bocadillo {
	background-image: var( --grad-blue );
	color: var( --text-inverse );
}

/* Las comillas del diseño: decoracion, asi que pseudoelemento y no un bloque
   mas que quien monta la pagina tendria que entender. La opacidad va dentro del
   SVG, que es donde la pone el Figma. */
:is( .mm-contenido, .editor-styles-wrapper ) .mm-testimonios .is-style-bocadillo::before,
:is( .mm-contenido, .editor-styles-wrapper ) .mm-caso .is-style-bocadillo::before {
	content: '';
	position: absolute;
	top: 19px;
	left: 35px;
	width: 51px;
	height: 54px;
	background: url( ../images/comillas.svg ) center / contain no-repeat;
}

/*
 * Los 55 de hueco no son un paso del sistema: son lo que sobra al repartir los
 * 1280 del contenido en las tres columnas de 390 del diseño.
 *
 * Doblada la clase porque el hueco de un core/columns lo escribe el core en una
 * clase suya y su hoja va detras de esta; ademas hay que ganarle al gap de 24
 * que .mm-banda le da a cualquier core/columns.
 */
.mm-banda .mm-testimonios__fila.wp-block-columns {
	gap: 55px;
}

/*
 * La columna en columna: es lo que hace que los tres bocadillos midan lo mismo
 * aunque las citas sean de largos distintos, y que los tres pies queden a la
 * misma altura. Sin esto cada bocadillo mide lo que su texto y la fila se ve
 * escalonada.
 */
.mm-testimonios__fila .wp-block-column {
	display: flex;
	flex-direction: column;
}

.mm-testimonios__fila .is-style-bocadillo {
	flex: 1;
}

/* La cita va en el paso H6 del sistema, que es lo que dibuja el frame. No sale
   del selector de tamaños del editor —ahi solo hay cinco pasos— asi que se pide
   con clase. */
.mm-testimonio__cita {
	font-size: var( --h6-size );
	line-height: var( --h6-line );
	font-weight: var( --h6-weight );
}

/*
 * El pie: la foto a la derecha y, a su izquierda, el nombre y el centro pegados
 * y alineados a la derecha.
 *
 * Es una rejilla y no dos cajas anidadas para que quien monta la pagina vea tres
 * bloques sueltos y no un grupo dentro de otro. Cada pieza dice donde va por su
 * clase y no por su orden: si se borra una, las otras no se mueven.
 *
 * Los dos textos se pegan en el centro sin saber cuanto miden: la foto ocupa las
 * dos filas y las estira, y el nombre se apoya abajo en la suya y el centro
 * arriba en la otra.
 */
.mm-testimonio__pie {
	margin-block-start: var( --s-5 );
	column-gap: var( --s-4 );
	row-gap: var( --s-1 );
}

.mm-banda .mm-testimonio__pie.is-layout-grid {
	grid-template-columns: 1fr 100px;
}

.mm-testimonio__pie > * {
	margin-block: 0;
}

.mm-testimonio__nombre {
	grid-column: 1;
	grid-row: 1;
	align-self: end;
	font-size: var( --h6-size );
	line-height: var( --h6-line );
	font-weight: var( --h6-weight );
}

.mm-testimonio__centro {
	grid-column: 1;
	grid-row: 2;
	align-self: start;
}

.mm-testimonio__foto {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
}

/* El height fijo hace falta con el width: wp_get_attachment_image escribe los
   dos como atributos y una foto vertical saldria ovalada. La clase del core va
   en el selector para ganarle a su ".wp-block-image img { height: auto }", que
   pesa lo mismo y decidiria el orden de las hojas. */
.mm-testimonio__foto.wp-block-image img {
	display: block;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
}

/*
 * En movil (frame 1155-14233) los tres testimonios se apilan. El bocadillo no
 * cambia de forma, solo de ancho, y las comillas se recolocan: el frame las
 * lleva a 24 de los dos bordes.
 */
@media ( max-width: 767px ) {
	.mm-testimonios > .mm-testimonios__fila,
	.mm-testimonios > .wp-block-group__inner-container > .mm-testimonios__fila {
		margin-block-start: var( --s-5 );
	}

	:is( .mm-contenido, .editor-styles-wrapper ) .mm-testimonios .is-style-bocadillo::before {
		top: var( --s-5 );
		left: var( --s-5 );
	}
}

/* El hueco entre columnas cambia donde el core las apila, que es 781. */
@media ( max-width: 781px ) {
	.mm-banda .mm-testimonios__fila.wp-block-columns {
		gap: var( --s-5 );
	}
}

/* ------------------------------------ Banda de la lista de ISBN del producto
 *
 * Figma 1155-12223 (escritorio) y 1155-14347 (movil). Es el patron "Lista de
 * ISBN del producto": un acordeon con el color de marca del curso que despliega
 * una caja blanca con las referencias por nivel y el enlace a la tienda.
 *
 * El acordeon es el core/accordion de WordPress 7.1 —item, heading y panel—,
 * asi que el toggle, la animacion y el aria no se escriben aqui. Lo que va aqui
 * es la forma: la tarjeta, la caja blanca, la banda de cada nivel y la tabla.
 *
 * Los selectores llevan .mm-isbn delante y no van a pelo sobre las clases del
 * core: un acordeon en otra pagina no tiene por que ser una tarjeta magenta.
 */

/* La tarjeta. El fondo va en el marcado —es el color de marca del producto y
   cambia con cada ficha, como en la banda de claves—; aqui van la forma y el
   relleno, que cambian en movil y por eso no pueden ir en los controles.

   La misma tarjeta sirve a las dos formas de la banda: el elemento del
   acordeon en la lista completa y el grupo fijo del patron "Referencias ISBN
   del producto" (Figma 1503-7041), que es esa lista sin pliegue. */
.mm-isbn .wp-block-accordion-item,
.mm-isbn__tarjeta {
	padding: var( --s-7 );
	border-radius: var( --rad-lg );
}

/*
 * La tarjeta fija: del titular a la caja, 32, que es lo que hay en la lista
 * completa de la bajada a la caja. Los margenes a cero porque en un flex no se
 * colapsan y el h2 trae los suyos; la clase va doblada con la del core, que
 * escribe el gap del layout flex en una clase suya.
 */
.mm-isbn__tarjeta.is-layout-flex {
	gap: var( --s-6 );
}

.mm-isbn__tarjeta.is-layout-flex > * {
	margin-block: 0;
}

/*
 * El titular del acordeon suelta los margenes que trae de fabrica y el panel se
 * separa 8, que es lo que mide el frame del titulo a su bajada.
 *
 * La bajada vive dentro del panel porque el titulo del acordeon del core es un
 * rich-text de una linea. Como el panel no lleva fondo, con el acordeon abierto
 * se ve lo mismo que dibuja el frame.
 */
.mm-isbn .wp-block-accordion-heading {
	margin-block: 0;
}

.mm-isbn .wp-block-accordion-panel {
	margin-block-start: var( --s-2 );
}

/*
 * El boton del core trae var(--wp--preset--spacing--20, 1em) de relleno
 * vertical, y esa variable no existe en este tema: quedaba 1em de mas arriba y
 * abajo del titular. El frame no pone ninguno.
 *
 * Y suelta el overflow:hidden del core, que recortaba el icono por la mitad: el
 * frame lo saca 16 del relleno de la tarjeta y todo lo que asome por ese lado
 * se quedaba fuera. El recorte tampoco hace falta aqui, que el titular es un
 * span flexible y se parte solo en vez de desbordar.
 */
.mm-isbn .wp-block-accordion-heading__toggle {
	padding: 0;
	overflow: visible;
}

/*
 * El icono. El core escribe un signo mas de texto que gira 45 grados al abrir;
 * el diseño usa un chevron que gira 180. Se apaga el signo con font-size 0 y se
 * pinta el chevron del tema en mascara, que es como ya se pintan los demas
 * iconos del sistema: asi hereda el color del texto sin depender del SVG.
 *
 * El margen negativo saca el icono 16 del relleno de la tarjeta: es lo que hace
 * el frame, donde la caja del icono acaba a 32 del borde y el texto a 48.
 */
.mm-isbn .wp-block-accordion-heading__toggle-icon {
	align-self: flex-start; /* el frame lo alinea con la primera linea, no al centro */
	width: 32px;
	height: 32px;
	margin-inline-end: calc( var( --s-4 ) * -1 );
	font-size: 0;
	background: currentColor;
	-webkit-mask: url( ../images/chevron.svg ) center / contain no-repeat;
	mask: url( ../images/chevron.svg ) center / contain no-repeat;
	transform: none;
}

/* Doblada para ganarle al rotate(45deg) del core, que pesa (0,3,0). */
.mm-isbn .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	transform: rotate( 180deg );
}

/* Dentro del panel, 32 de la bajada a la caja. */
.mm-isbn .wp-block-accordion-panel > * {
	margin-block: 0;
}

.mm-isbn .wp-block-accordion-panel > * + * {
	margin-block-start: var( --s-6 );
}

/* La caja blanca. Recupera el color de texto, que la tarjeta lo tiene en
   blanco. */
.mm-isbn__caja {
	padding: var( --s-6 );
	border-radius: var( --rad-md );
	background: var( --surface );
	color: var( --text );
}

/*
 * El ritmo de la caja, en los hijos y no en el gap: del nivel a su tabla no hay
 * hueco, de una tabla al nivel siguiente hay 24 y al boton 32. La clase va
 * doblada con la del core porque el gap del layout flex lo escribe el core en
 * una clase suya y su hoja va detras de esta.
 */
.mm-isbn__caja.is-layout-flex {
	gap: 0;
}

.mm-isbn__caja.is-layout-flex > * {
	margin-block: 0;
}

.mm-isbn__caja.is-layout-flex > * + * {
	margin-block-start: var( --s-5 );
}

.mm-isbn__caja.is-layout-flex > .mm-isbn__nivel + .mm-isbn__tabla {
	margin-block-start: 0;
}

.mm-isbn__caja.is-layout-flex > .mm-isbn__acciones {
	margin-block-start: var( --s-6 );
}

/*
 * La banda de cada nivel. Es un core/heading de nivel 4 —el titular del
 * acordeon es un h3, asi que los niveles cuelgan de el— con el paso H6 escrito
 * aqui: el frame lo dibuja a 18 en las dos anchuras y la escala de movil bajaria
 * un h4 a 20. Por eso tambien va doblado el selector, para ganarle a la regla
 * de elemento de variables.css.
 */
.mm-isbn__caja .mm-isbn__nivel {
	padding: var( --s-4 ) var( --s-5 );
	border-radius: var( --rad-md );
	background: var( --bg-blue-2 );
	font-size: var( --h6-size );
	line-height: var( --h6-line );
	font-weight: var( --h6-weight );
}

/*
 * La tabla. El core le pone a cada celda un borde de 1px y 0,5em de relleno;
 * aqui las celdas no llevan borde y la linea va en la fila, que es lo que
 * dibuja el frame: una raya de lado a lado, y no debajo de la ultima.
 *
 * La clase va doblada con .wp-block-table porque las reglas del core pesan lo
 * mismo (0,1,1) y el desempate seria el orden de las hojas.
 */
.wp-block-table.mm-isbn__tabla td {
	border: 0;
	padding: var( --s-4 ) var( --s-5 );
}

.wp-block-table.mm-isbn__tabla tr:not( :last-child ) td {
	border-bottom: 1px solid var( --line );
}

/*
 * La columna del ISBN: a la derecha y en semibold, y lo decide la seccion y no
 * cada celda. Asi no hay forma de que una fila acabe alineada al reves, que es
 * la misma razon por la que el color del bocadillo de los testimonios lo pone
 * su banda.
 *
 * El width 1% con nowrap es el truco de siempre en una tabla de ancho
 * automatico: la columna se queda con lo justo y el resto se lo lleva la del
 * componente.
 */
.wp-block-table.mm-isbn__tabla td:last-child {
	width: 1%;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

/*
 * En movil (frame 1155-14347) la tarjeta encoge, el titular baja un escalon mas
 * y las filas se ponen en pie: el componente arriba y su ISBN debajo, que es la
 * unica forma de que un ISBN entero quepa a 390 sin encoger la letra.
 */
@media ( max-width: 767px ) {
	.mm-isbn {
		padding-block: 40px; /* el paso de 40 del frame, que ninguna variable respalda */
	}

	.mm-isbn .wp-block-accordion-item,
	.mm-isbn__tarjeta {
		padding: var( --s-5 ) var( --s-4 );
	}

	/* Un escalon mas del que ya da la escala de movil: el frame dibuja el H3 en
	   H5 —20—, como en las otras bandas de producto. El titular de la tarjeta
	   fija lleva el paso "Titular" del editor, que pesa (0,2,0): por eso las
	   tres clases, como en la llamada a la accion. Y solo ese paso: si quien
	   edita elige otro en el panel, manda el suyo. */
	.mm-isbn .wp-block-accordion-heading,
	.mm-banda.mm-isbn .has-h3-font-size {
		font-size: var( --h5-size );
		line-height: var( --h5-line );
		font-weight: var( --h5-weight );
	}

	.mm-isbn__tarjeta.is-layout-flex {
		gap: var( --s-5 );
	}

	.mm-isbn .wp-block-accordion-heading__toggle-icon {
		width: 24px;
		height: 24px;
		margin-inline-end: calc( var( --s-2 ) * -1 );
	}

	.mm-isbn .wp-block-accordion-panel > * + * {
		margin-block-start: var( --s-5 );
	}

	.mm-isbn__caja {
		padding: var( --s-4 );
	}

	.mm-isbn__caja.is-layout-flex > .mm-isbn__acciones {
		margin-block-start: var( --s-5 );
	}

	.mm-isbn__caja .mm-isbn__nivel {
		padding: var( --s-3 ) var( --s-4 );
	}

	/* La fila en pie. La raya pasa a la fila: con las celdas en bloque, un borde
	   por celda saldria dos veces. */
	.wp-block-table.mm-isbn__tabla tr,
	.wp-block-table.mm-isbn__tabla td {
		display: block;
	}

	.wp-block-table.mm-isbn__tabla td {
		padding: 0 var( --s-4 );
	}

	.wp-block-table.mm-isbn__tabla td:first-child {
		padding-block-start: var( --s-3 );
	}

	.wp-block-table.mm-isbn__tabla td:last-child {
		width: auto;
		padding-block: var( --s-1 ) var( --s-3 );
		text-align: left;
	}

	.wp-block-table.mm-isbn__tabla tr:not( :last-child ) {
		border-bottom: 1px solid var( --line );
	}

	.wp-block-table.mm-isbn__tabla tr:not( :last-child ) td {
		border-bottom: 0;
	}

	/*
	 * El boton, a lo ancho y en tamaño M. El tamaño se pide con la clase
	 * .mm-boton--m, que aqui no vale: es una anchura y no una decision de quien
	 * monta la pagina. Se escriben los mismos tokens que usa esa clase, que es
	 * lo unico que la separa de la L.
	 */
	.mm-isbn__acciones .wp-block-button,
	.mm-isbn__acciones .wp-block-button__link {
		width: 100%;
		font-size: var( --body-sm-size );
		line-height: var( --body-sm-line );
	}
}

/* --------------------------------------- Cabecera de la ficha de producto
 *
 * Figma 1155-11978 (hero), 1155-12007 (ficha tecnica) y 1155-12034 (pestañas):
 * tres frames que son una sola pieza. Es el patron "Cabecera del producto", que
 * sustituye a lo que antes pintaba catalogo/producto.php con los campos del
 * producto.
 *
 * Las migas y las pestañas no tienen nada aqui: son .mm-migas y .mm-pestanas,
 * los mismos componentes de la cabecera de pagina interior. Lo de aqui es el
 * hero y la ficha tecnica.
 *
 * La banda escribe su relleno vertical porque no es el de .mm-banda: el frame
 * pone 24 arriba —las migas van pegadas— y abajo lo que suman los rellenos de
 * los dos frames que vienen detras (16 + 18), que es lo que separa la ficha
 * tecnica de la barra de pestañas.
 */
.mm-banda.mm-cabecera-producto {
	padding-block: var( --s-5 ) 34px;
}

/*
 * Con la ficha tecnica fuera, la banda cierra a los 16 del frame 1503-6796 y no
 * a los 34: los 18 que abre la banda de la ficha completan la separacion de
 * siempre entre las dos piezas. Va antes de la media query de movil a proposito,
 * que alli manda el relleno de la cabecera de siempre.
 */
.mm-banda.mm-cabecera-producto--sin-ficha {
	padding-block-end: var( --s-4 );
}

/* Los dos pasos que el sistema no cubre: 40 de las migas al hero y 34 del hero
   a la ficha tecnica. Los dos caminos de siempre, que en el front WordPress mete
   su div interno y en el lienzo no. */
.mm-cabecera-producto > .mm-cabecera-producto__hero,
.mm-cabecera-producto > .wp-block-group__inner-container > .mm-cabecera-producto__hero {
	margin-block-start: 40px;
}

.mm-cabecera-producto > .mm-ficha,
.mm-cabecera-producto > .wp-block-group__inner-container > .mm-ficha {
	margin-block-start: 34px;
}

/* La fila del hero: la portada y el texto, con el hueco de 48 del frame. Doblada
   con la clase del core porque el hueco de un core/columns lo escribe el core en
   una clase suya y ademas .mm-banda ya le pone 24 a cualquier fila. */
.mm-banda .mm-cabecera-producto__hero.wp-block-columns {
	gap: var( --s-7 );
}

/*
 * La portada. El height:auto por lo de siempre: wp_get_attachment_image escribe
 * width y height como atributos y con los dos puestos el navegador ignora
 * cualquier proporcion. Y la clase del core doblada, que su hoja trae un
 * ".wp-block-image img { height: auto }" que pesa lo mismo.
 *
 * A 4:3 en todos los anchos, que es lo que miden los dos frames (648x486 y
 * 358x268): la misma imagen sirve en escritorio y en movil, y la caja no
 * cambia con lo que suba quien monta la pagina (QA de producto, 1877-14510).
 * Recorta en vez de encoger porque es un banner, no la portada de un libro.
 */
.mm-cabecera-producto__portada.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var( --rad-md );
}

/* El ritmo de la columna de texto: 12 entre las cuatro piezas y 24 hasta los
   botones. */
.mm-cabecera-producto__hero .wp-block-column > * {
	margin-block: 0;
}

.mm-cabecera-producto__hero .wp-block-column > * + * {
	margin-block-start: var( --s-3 );
}

.mm-cabecera-producto__hero .mm-cabecera-producto__acciones {
	margin-block-start: var( --s-5 );
}

/*
 * El resumen lleva tope de lineas, para que no quepa un testamento (QA de
 * producto, 1877-14510). Ocho: las que dibuja el frame de movil (1155-14125) y
 * mas de las que ocupa el texto del diseño en cualquier escritorio —siete a
 * 1024, medido—, asi que el de referencia no se corta en ningun ancho y lo que
 * se pase acaba en puntos suspensivos.
 */
.mm-cabecera-producto__hero p.has-body-md-font-size {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 8;
	line-clamp: 8;
	overflow: hidden;
}

/* Los dos botones, con el hueco de 16 del frame en vez del que trae el core. */
.mm-cabecera-producto__acciones.wp-block-buttons {
	gap: var( --s-4 );
}

/*
 * El lema del producto, bajo el titulo. Es un parrafo y no un encabezado: no
 * abre ninguna seccion, y como h4 dejaba un salto de h1 a h4 que marcan las
 * auditorias de accesibilidad. Va en el paso H4 que heredaba como h4, y en movil
 * un escalon menos, igual que baja la escala de los encabezados (variables.css).
 * Doblada para ganarle al tamaño que el contenido le da a un parrafo.
 */
.mm-cabecera-producto__hero .mm-cabecera-producto__tagline {
	font-size: var( --h4-size );
	line-height: var( --h4-line );
	font-weight: var( --h4-weight );
}

@media ( max-width: 767px ) {
	.mm-cabecera-producto__hero .mm-cabecera-producto__tagline {
		font-size: var( --h5-size );
		line-height: var( --h5-line );
		font-weight: var( --h5-weight );
	}
}

/*
 * La etiqueta de novedad. Es el mismo componente que la de la tarjeta de
 * producto y lleva los mismos numeros, que no son pasos del sistema sino los del
 * componente en Figma.
 *
 * ponytail: duplicada a proposito, que la otra vive en el CSS de su bloque y esa
 * hoja solo se carga cuando el bloque esta en la pagina. Si aparece una tercera,
 * toca subirla a componentes.css.
 */
.mm-cabecera-producto__novedad {
	display: inline-block;
	/* El trazo, descontado del relleno: Figma lo dibuja por dentro del marco y
	   asi la pastilla mide los 50x24 del frame, como se hace con los botones. */
	padding: calc( 3px - 1px ) calc( 10px - 1px );
	border: 1px solid var( --accent );
	border-radius: var( --rad-pill );
	background-color: var( --surface );
	color: var( --accent );
	font-size: 12px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: .8px;
}

/*
 * La ficha tecnica: una tarjeta blanca con cinco datos repartidos a partes
 * iguales. Es una rejilla del core y no columnas porque a 390 el frame los pone
 * de dos en dos con el ultimo a lo ancho, y eso con columnas no sale. Sin hueco
 * entre ellos: lo que los separa es su propio relleno, como en la barra de
 * pestañas.
 */
.mm-ficha.is-layout-grid {
	gap: 0;
	border-radius: var( --rad-md );
	background: var( --surface );
}

/* La tarjeta no lleva relleno propio: el primer icono cae a 24 del borde porque
   se lo pone su dato, que es lo que dibuja el frame. */
.mm-ficha__dato {
	padding: var( --s-4 ) var( --s-5 );
}

/* Icono y texto en fila, centrados: el frame deja 20 arriba y abajo del icono y
   16 del bloque de texto, que es lo que sale al centrar los dos en 72. */
.mm-ficha__dato.is-layout-flex {
	align-items: center;
	gap: 10px; /* los 10 del frame; no hay paso de 10 en la escala */
}

/* El bloque Icono a 32, con su color puesto en el propio bloque. Las dos reglas
   de .wp-block-image son de las fichas montadas antes, cuando el icono era un
   core/image con el color escrito dentro del SVG. */
.mm-ficha__icono {
	--mm-icono: 32px;
	flex: none;
}

.mm-ficha__icono.wp-block-image {
	margin: 0;
	flex: none;
}

.mm-ficha__icono.wp-block-image img {
	display: block;
	width: 32px;
	height: 32px;
}

.mm-ficha__texto.is-layout-flex {
	gap: 0;
}

.mm-ficha__texto > * {
	margin-block: 0;
}

.mm-ficha__rotulo {
	color: var( --text-muted );
	font-size: 12px;
	line-height: 1.5;
	font-weight: 600;
	text-transform: uppercase;
}

.mm-ficha__valor {
	color: var( --text );
	font-size: var( --body-sm-size );
	line-height: var( --body-sm-line );
	font-weight: 600;
}

/*
 * La pestaña que se va a otro sitio lleva el icono de enlace externo detras, como
 * en el megamenu. Va en un pseudoelemento y en mascara, que es lo que deja
 * pintarlo con un color propio.
 *
 * Y ese color es el rojo de marca aunque la letra sea gris (Figma 1155-12856),
 * como la flecha de los desplegables de la navbar. Estuvo en currentColor para
 * que siguiera al estado de la pestaña, pero la letra solo cambia al pasar el
 * raton, y a accent-hover, que junto al rojo del icono no se distingue: la
 * activa se marca con el fondo rosa y la letra se queda igual.
 */
.mm-pestanas__fila .mm-pestana--externa a::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-inline-start: var( --s-1 );
	vertical-align: -3px;
	background: var( --accent );
	-webkit-mask: url( ../images/external.svg ) center / contain no-repeat;
	mask: url( ../images/external.svg ) center / contain no-repeat;
}

/*
 * En movil (frames 1155-14125 y 1155-14174) la cabecera se pone en pie: la
 * portada encima del texto, los dos botones a lo ancho uno debajo de otro y la
 * ficha tecnica de dos en dos con el ultimo dato ocupando la fila. La barra de
 * pestañas no cambia nada aqui: ya sabe rodar de lado, y su relleno de 16 en
 * pantalla estrecha es el que pide el frame.
 */
/*
 * La ficha tecnica pasa a la de movil —de dos en dos y el ultimo dato a lo
 * ancho— en cuanto sus cinco datos no caben en fila (QA de producto,
 * 1877-14510). Medido con los textos del diseño: a 1280 caben los cinco en una
 * linea, a 1200 ya parte «LOMLOE compliant» y a 1100 parten tres. De ahi el
 * 1279, que no es un corte del sistema sino el de esta pieza.
 *
 * La clase va doblada con la del layout para ganarle al grid-template-columns
 * que el core escribe en su propia clase, cuya hoja va detras de esta.
 */
@media ( max-width: 1279px ) {
	.mm-ficha.is-layout-grid {
		grid-template-columns: 1fr 1fr;
		gap: var( --s-3 );
		padding: var( --s-4 );
	}

	.mm-ficha.is-layout-grid > :last-child {
		grid-column: span 2;
	}

	/* Ahora el relleno lo lleva la tarjeta, asi que el dato lo suelta. */
	.mm-ficha__dato {
		padding: 0;
	}

	.mm-ficha__dato.is-layout-flex {
		gap: var( --s-1 );
	}

	.mm-ficha__icono {
		--mm-icono: 24px;
	}

	.mm-ficha__icono.wp-block-image img {
		width: 24px;
		height: 24px;
	}
}

@media ( max-width: 767px ) {
	.mm-banda.mm-cabecera-producto {
		padding-block: var( --s-5 ) var( --s-6 );
	}

	.mm-cabecera-producto > .mm-cabecera-producto__hero,
	.mm-cabecera-producto > .wp-block-group__inner-container > .mm-cabecera-producto__hero,
	.mm-cabecera-producto > .mm-ficha,
	.mm-cabecera-producto > .wp-block-group__inner-container > .mm-ficha {
		margin-block-start: var( --s-5 );
	}

	/* Apiladas, la portada y el texto se separan 16 y no los 48 de escritorio. */
	.mm-banda .mm-cabecera-producto__hero.wp-block-columns {
		gap: var( --s-4 );
	}

	/* Y dentro de la columna de texto, 16 entre todo, botones incluidos. */
	.mm-cabecera-producto__hero .wp-block-column > * + *,
	.mm-cabecera-producto__hero .mm-cabecera-producto__acciones {
		margin-block-start: var( --s-4 );
	}

	/* Los dos botones, uno debajo de otro y a lo ancho. */
	.mm-cabecera-producto__acciones.wp-block-buttons {
		flex-direction: column;
		gap: var( --s-3 );
	}

	.mm-cabecera-producto__acciones .wp-block-button,
	.mm-cabecera-producto__acciones .wp-block-button__link {
		width: 100%;
	}

	/*
	 * El resumen se queda en sus 18. La escala de movil baja un paso todos los
	 * tamaños del editor —"Medio" pasa a 16, en mcm_gb_preset_css()— y este frame
	 * no lo baja: dibuja las mismas ocho lineas que en escritorio. La clase va
	 * doblada con la del preset porque su regla vive en la hoja de variables, que
	 * va delante.
	 */
	.mm-cabecera-producto__hero p.has-body-md-font-size {
		font-size: var( --body-md-size );
		line-height: var( --body-md-line );
	}
}

/* --------------------------------- Ficha tecnica en banda propia
 *
 * Figma 1516-4808, el patron "Ficha tecnica del producto". Es la misma tarjeta
 * de la cabecera —los datos, los iconos, los rotulos y los valores no cambian
 * una linea— pero suelta en su propia banda y con los datos en fila en vez de
 * repartidos a partes iguales, porque el ultimo tiene que quedarse con el resto
 * para empujar el enlace al borde derecho.
 *
 * La banda lleva mm-cabecera-producto, que es lo que hace que la plantilla la
 * herede en todas las pestañas, y por eso hay que deshacerle sus dos numeros:
 * su relleno de 24/34 y los 34 que separan la ficha del hero cuando van juntas.
 * Las dos reglas pesan lo mismo que las suyas y van detras —tambien detras de la
 * media query de movil—, que es lo que decide el empate.
 */
.mm-banda.mm-ficha-banda {
	padding-block: 18px; /* los 18 del frame; no hay paso de 18 en la escala */
}

.mm-ficha-banda > .mm-ficha,
.mm-ficha-banda > .wp-block-group__inner-container > .mm-ficha {
	margin-block-start: 0;
}

/* El blanco y el radio son los mismos de la rejilla de cinco datos, y el hueco a
   cero por lo mismo que alli: lo que separa los datos es su propio relleno. */
.mm-ficha.is-layout-flex {
	gap: 0;
	align-items: center;
	border-radius: var( --rad-md );
	background: var( --surface );
}

/* Los 297 del frame para los datos de la izquierda. El 0 1 y no 0 0: en una
   pantalla mediana encogen antes que desbordar la tarjeta. */
.mm-ficha.is-layout-flex > .mm-ficha__dato {
	flex: 0 1 297px;
	min-width: 0;
}

/* Y el ultimo se queda con lo que sobre, que es el que lleva el enlace. */
.mm-ficha.is-layout-flex > .mm-ficha__dato--resto {
	flex: 1 1 auto;
}

/* La raya. Un core/separator es un <hr> con borde y margenes automaticos: se le
   quitan los dos y se pinta con el fondo, que es lo unico que admite un alto.
   Los 10 y los 16 son los huecos que el frame le deja a cada lado. */
.mm-ficha__raya.wp-block-separator {
	flex: none;
	align-self: center;
	width: 1px;
	height: 52px;
	margin-block: 0;
	margin-inline: 10px 16px;
	border: 0;
	background: var( --line );
}

/* El enlace, pegado al borde derecho de su dato. */
.mm-ficha__accion.wp-block-buttons {
	margin-inline-start: auto;
}

/*
 * En movil no hay frame para esta ficha. Se sigue lo que ya hace la de cinco
 * datos —el relleno pasa a la tarjeta y el dato lo suelta— y la fila se pone en
 * pie: son tres datos anchos, no cinco cortos, asi que van uno debajo de otro
 * con la raya tumbada y el enlace en su propia linea.
 */
@media ( max-width: 767px ) {
	.mm-ficha.is-layout-flex {
		flex-direction: column;
		align-items: stretch;
		gap: var( --s-3 );
		padding: var( --s-4 );
	}

	.mm-ficha.is-layout-flex > .mm-ficha__dato,
	.mm-ficha.is-layout-flex > .mm-ficha__dato--resto {
		flex: none;
	}

	/* Doblada con la clase del layout: el flex-wrap del bloque lo escribe el
	   core en una clase suya, y su hoja va detras de esta. */
	.mm-ficha__dato--resto.is-layout-flex {
		flex-wrap: wrap;
	}

	.mm-ficha__accion.wp-block-buttons {
		flex: 0 0 100%;
		margin-inline-start: 0;
	}

	.mm-ficha__raya.wp-block-separator {
		width: 100%;
		height: 1px;
		align-self: stretch;
		margin-inline: 0;
	}
}

/* --------------------------------------- Texto largo del producto
 *
 * Figma 1507-2756, el patron "Texto del producto": la banda de presentacion con
 * el titular, la bajada y la caja blanca quitados. Solo parrafos, y por eso
 * comparte con ella el azul claro del fondo.
 *
 * Lo unico que .mm-banda no da es el ritmo: el frame separa los parrafos 16 y la
 * banda separa a sus hijos 32. Los dos caminos de siempre, y el segundo hace
 * falta de verdad: en el front la regla de la banda lleva el div interno por
 * medio, pesa una clase mas y ganaria.
 */
.mm-producto-texto > * + *,
.mm-producto-texto > .wp-block-group__inner-container > * + * {
	margin-block-start: var( --s-4 );
}

/*
 * El enlace dentro del texto. El sistema no tiene regla para un enlace en linea
 * —solo para el de accion, que es un boton—, asi que va acotado a esta banda:
 * pintarlo en .mm-contenido cambiaria todos los enlaces del sitio, y eso es una
 * decision de diseño, no de este patron.
 *
 * Es el rojo del frame, no el --accent-active que variables.css apunta como
 * texto de enlace: sobre este azul da 4,9:1 y pasa la AA en los 18 del parrafo.
 * El subrayado va siempre, que el color solo no basta (WCAG 1.4.1).
 */
.mm-producto-texto p a {
	color: var( --accent );
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color var( --motion-link ) var( --motion-ease );
}

.mm-producto-texto p a:hover,
.mm-producto-texto p a:focus-visible {
	color: var( --accent-hover );
}

.mm-producto-texto p a:focus-visible {
	outline: 3px solid var( --focus );
	outline-offset: 2px;
	border-radius: 2px;
}

/* ------------------------------------------------ Banda de texto e imagen
 *
 * Figma 1155-12477 (escritorio) y 1155-14755 (movil). Es el patron "Texto e
 * imagen": titular, claim y texto a un lado, y una foto al otro.
 *
 * Casi todo lo pone .mm-banda. Aqui van el relleno —96 y no los 64 de siempre—,
 * el hueco de la fila, el ritmo del texto y la forma de la foto.
 */
.mm-texto-img {
	padding-block: var( --s-10 );
}

/* El hueco de 64 del frame. Doblada con la clase del core porque el hueco de un
   core/columns lo escribe el core en una clase suya y ademas .mm-banda ya le
   pone 24 a cualquier fila. Con dos columnas iguales y 64 en medio salen los
   608 del frame sin escribir ninguna anchura. */
.mm-banda .mm-texto-img__fila.wp-block-columns {
	gap: var( --s-8 );
}

/*
 * El claim va al paso H5 en las dos anchuras: el frame lo dibuja igual a 1440 y
 * a 390, asi que ni sube con el h3 de escritorio ni baja con la escala de movil.
 * Por eso el tamaño se escribe aqui y no se pide con la clase del editor.
 *
 * Y va doblado el selector para ganarle a la regla de elemento de
 * variables.css, que pesa lo mismo (0,1,1) que la clase sola.
 *
 * El gris es el --text-soft de siempre. El frame dibuja aqui un #6b6b6b y en el
 * parrafo un #5e5e5e, dos grises sueltos que no son variables de Figma; el
 * sistema tiene un solo gris para texto secundario y trece puntos de diferencia
 * entre ellos no los ve nadie.
 */
.mm-texto-img .mm-texto-img__claim {
	font-size: var( --h5-size );
	line-height: var( --h5-line );
	font-weight: var( --h5-weight );
}

/* El ritmo de la columna de texto: 8 del titular al claim y 24 del claim al
   parrafo. */
.mm-texto-img__fila .wp-block-column > * {
	margin-block: 0;
}

.mm-texto-img__fila .wp-block-column > * + * {
	margin-block-start: var( --s-2 );
}

.mm-texto-img__fila .mm-texto-img__claim + p {
	margin-block-start: var( --s-5 );
}

/*
 * La foto. El height:auto por lo de siempre: wp_get_attachment_image escribe
 * width y height como atributos y con los dos puestos el navegador ignora
 * cualquier proporcion. Sin recorte: la que suba quien monta la pagina se ve
 * entera, que aqui la foto es un producto y cortarlo no vale.
 */
.mm-texto-img__foto.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	/* La caja del frame (608x276), con la foto entera dentro: sale siempre del
	   mismo tamaño (QA de producto, 1877-14510). */
	aspect-ratio: 608 / 276;
	object-fit: contain;
	border-radius: var( --rad-md );
}

/*
 * En movil (frame 1155-14755) la foto baja debajo del texto —lo hace el core al
 * apilar las columnas— y todo encoge: la banda a 40 y 48, el hueco a 16 y el
 * ritmo del texto a 12 y 16.
 */
@media ( max-width: 767px ) {
	.mm-texto-img {
		padding-block: 40px var( --s-7 ); /* el 40 del frame, que ninguna variable respalda */
	}

	.mm-banda .mm-texto-img__fila.wp-block-columns {
		gap: var( --s-4 );
	}

	/* El titular baja un escalon mas del que ya da la escala de movil: el frame
	   lo dibuja en H4 —25—, como en las demas bandas de producto. El claim no
	   baja, que ya esta escrito en su paso. */
	.mm-banda.mm-texto-img h2 {
		font-size: var( --h4-size );
		line-height: var( --h4-line );
		font-weight: var( --h4-weight );
	}

	.mm-texto-img__fila .wp-block-column > * + * {
		margin-block-start: var( --s-3 );
	}

	.mm-texto-img__fila .mm-texto-img__claim + p {
		margin-block-start: var( --s-4 );
	}

	/*
	 * El texto se queda en sus 18. La escala de movil baja un paso todos los
	 * tamaños del editor —"Medio" pasa a 16, en mcm_gb_preset_css()— y este frame
	 * no lo baja: dibuja las mismas diez lineas que en escritorio.
	 */
	.mm-texto-img__fila p.has-body-md-font-size {
		font-size: var( --body-md-size );
		line-height: var( --body-md-line );
	}
}

/* --------------------------------- Banda de detalle en cuatro tarjetas
 *
 * Figma 1155-12484 (escritorio) y 1155-14762 (movil). Es el patron "Detalle en
 * cuatro tarjetas": una banda de color con su titular y cuatro tarjetas blancas
 * con titular, texto e imagen.
 *
 * El color y los puntos van en el marcado —el color en el panel del grupo, los
 * puntos en dos core/image— con el mecanismo de .mm-banda--fondo, que ya usa la
 * banda de claves. Aqui va la forma: el relleno, el titular, la rejilla y la
 * tarjeta.
 */
.mm-detalle,
.mm-recursos {
	padding-block: var( --s-9 );
}

/*
 * El dibujo de puntos de estas tres bandas es una capa de ancho completo colgada
 * del borde de arriba, no un fondo que haya que llenar: va a su alto natural.
 *
 * Con el object-fit: cover que traen las bandas por defecto pasaba lo de
 * siempre: el alto de la banda lo pone el contenido y no coincide con el del
 * frame, asi que el navegador escalaba para llenarlo y recortaba por los lados
 * —en "Resources for Teachers", 67 px a cada lado, que se llevaban por delante
 * el punto de arriba del arco derecho—. Debajo de los arcos el diseno no pone
 * nada, asi que no hay nada que llenar.
 */
.mm-detalle .mm-banda__fondo img,
.mm-recursos .mm-banda__fondo img,
.mm-claves .mm-banda__fondo img {
	height: auto;
}

/* Los puntos del frame van al 20 %. El SVG ya los lleva con esa opacidad, asi
   que la imagen no necesita nada; queda escrito por si alguien cambia el
   dibujo. */

/* Del titular a la rejilla, 40: ni los 32 que .mm-banda da entre hermanos ni un
   paso de la escala. Los dos caminos, que en el front WordPress mete su div
   interno y en el lienzo no. */
.mm-detalle > .mm-detalle__rejilla,
.mm-detalle > .wp-block-group__inner-container > .mm-detalle__rejilla {
	margin-block-start: 40px;
}

/*
 * El titular va al paso H1 aunque sea un h2: en la pagina ya hay un h1 —el
 * nombre del producto— y el esquema del documento manda sobre el tamaño. Va
 * doblado el selector para ganarle a la regla de elemento de variables.css.
 */
.mm-detalle .mm-detalle__titulo,
.mm-recursos .mm-recursos__titulo {
	font-size: var( --h1-size );
	line-height: var( --h1-line );
	font-weight: var( --h1-weight );
}

/* La rejilla: dos columnas con 32 de hueco, que es lo que mide el frame entre
   tarjetas y entre filas. Doblada con la clase del layout porque el
   grid-template-columns lo escribe el core en una clase suya. */
.mm-detalle__rejilla.is-layout-grid {
	gap: var( --s-6 );
}

/*
 * La tarjeta. Recupera el color de texto, que la banda lo tiene en blanco, y
 * lleva el ritmo en los hijos: 16 del titular al texto y 24 del texto a la
 * imagen. El gap del layout se apaga por lo mismo que en las demas cajas del
 * sistema: con un solo hueco no salen los dos pasos.
 */
.mm-detalle__tarjeta {
	padding: var( --s-7 );
	border-radius: var( --rad-xl );
	background: var( --surface );
	color: var( --text );
}

.mm-detalle__tarjeta.is-layout-flex {
	gap: 0;
}

.mm-detalle__tarjeta.is-layout-flex > * {
	margin-block: 0;
}

.mm-detalle__tarjeta.is-layout-flex > * + * {
	margin-block-start: var( --s-4 );
}

.mm-detalle__tarjeta.is-layout-flex > .mm-detalle__foto {
	margin-block-start: var( --s-5 );
}

/* La imagen ocupa el ancho de la tarjeta y crece hasta abajo: las cuatro
   tarjetas de una fila miden lo mismo —lo iguala la rejilla— y asi la imagen
   reparte el hueco que sobra en vez de dejarlo debajo. */
.mm-detalle__foto.wp-block-image {
	margin-inline: 0;
}

.mm-detalle__foto.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	/* La caja a 3:2, la de las imagenes del frame, y entera: asi cualquier
	   imagen sale del mismo tamaño (QA de producto, 1877-14510). */
	aspect-ratio: 3 / 2;
	object-fit: contain;
}

/* En tablet la rejilla sigue de dos en dos, y con 48 de relleno la tarjeta se
   quedaba sin sitio: lleva ya el de movil (QA de producto, 1877-14510, a 768). */
@media ( max-width: 1099px ) {
	.mm-detalle__tarjeta {
		padding: var( --s-6 ) var( --s-5 );
	}
}

/*
 * En movil (frame 1155-14762) la rejilla pasa a una columna y la tarjeta
 * encoge. El titular baja dos escalones mas de lo que ya baja la escala general:
 * el frame lo dibuja en H4 —25—, que es lo que cabe a 390 en una linea.
 */
@media ( max-width: 767px ) {
	.mm-detalle {
		padding-block: var( --s-9 ) var( --s-7 );
	}

	.mm-detalle .mm-detalle__titulo,
	.mm-recursos .mm-recursos__titulo {
		font-size: var( --h4-size );
		line-height: var( --h4-line );
		font-weight: var( --h4-weight );
	}

	.mm-detalle__rejilla.is-layout-grid {
		grid-template-columns: 1fr;
		gap: var( --s-3 );
	}

	.mm-detalle__tarjeta.is-layout-flex > .mm-detalle__foto {
		margin-block-start: var( --s-4 );
	}

	/* En una columna la imagen iba al ancho de la tarjeta, y entre el movil del
	   frame y 767 crecia hasta 620x413, mas que en escritorio. Tope de 360,
	   centrada: a 390 no cambia y a 768, ya en dos columnas, mide 329, asi que
	   no pega un salto al cruzar. */
	.mm-detalle__foto.wp-block-image img {
		max-width: 360px;
		margin-inline: auto;
	}
}

/*
 * La banda de asesor con la piel magenta (Figma 1155-12538, movil 1155-14816),
 * la que lleva la ficha de producto.
 *
 * El fondo son formas angulares en tres magentas, y no un degradado: en el
 * diseño es una imagen y aqui tambien, la del propio core/cover
 * (assets/patrones/fondo-asesor-magenta.jpg), que se cambia desde su panel.
 * Aqui no se pinta: hasta el 1-oct-2026 lo ponia esta hoja y no habia manera de
 * cambiarlo; las paginas de antes se pasan con Herramientas → Contenido al dia.
 *
 * Y en escritorio la foto va de otra manera: en la banda amarilla se apoya en el
 * borde de abajo y ocupa casi toda su mitad; aqui el frame la deja mas pequeña y
 * flotando en el centro de la suya.
 *
 * Solo de 1100 para arriba: en movil las dos bandas dibujan la foto igual —abajo
 * del todo y asomando por el borde—, y eso ya lo pone la regla de mas arriba. El
 * corte es el de la banda (1099) y no el 767 del sistema: con 768 quedaba entre
 * los dos un estado a medias, la composicion de movil con la foto de escritorio.
 */
@media ( min-width: 1100px ) {
	.mm-contacto-asesor--magenta .mm-contacto-asesor__foto {
		align-self: center;
		justify-self: start;
		/* Los 422 de ancho y los 127 de sangria del frame, sobre los 640 que mide
		   la mitad de la banda. En porcentaje para que aguanten al encoger. */
		width: 66%;
		margin-inline-start: 19.8%;
	}
}

/* El frame de movil de esta banda usa la foto sin voltear, al reves que el de la
   amarilla. Mismo corte que la banda. */
@media ( max-width: 1099px ) {
	.mm-contacto-asesor--magenta .mm-contacto-asesor__foto {
		transform: none;
	}
}

/* Sin trazo: es el adorno de la version amarilla, dibujado para ese fondo. */
.mm-contacto-asesor--magenta::before,
.mm-contacto-asesor--magenta::after {
	content: none;
}

/* ------------------------------ Banda de recursos en tarjetas anchas
 *
 * Figma 1155-12648. Es el patron "Recursos en tarjetas anchas": la misma banda
 * azul con puntos que la de detalle —relleno, titular y fondo se comparten con
 * ella, arriba— y dos tarjetas a todo el ancho con foto a un lado y texto al
 * otro.
 *
 * Del titular a la primera tarjeta van 40, y entre tarjetas los 32 que .mm-banda
 * da entre hermanos, asi que solo se escribe el primero.
 */
.mm-recursos > :is( h1, h2, h3, h4, h5, h6 ) + *,
.mm-recursos > .wp-block-group__inner-container > :is( h1, h2, h3, h4, h5, h6 ) + * {
	margin-block-start: 40px;
}

/* La tarjeta: blanca, con su radio y su relleno, y recuperando el color de
   texto que la banda tiene en blanco. */
.mm-recursos__tarjeta {
	padding: var( --s-7 );
	border-radius: var( --rad-xl );
	background: var( --surface );
	color: var( --text );
}

/* La fila de dentro: foto y texto con los 64 de hueco del frame. Doblada con la
   clase del core porque el hueco de un core/columns lo escribe el core en una
   clase suya y ademas .mm-banda le pone 24 a cualquier fila. */
.mm-banda .mm-recursos__fila.wp-block-columns {
	gap: var( --s-8 );
	/* Y sin el margen de fabrica del core: un core/columns trae 1,75em abajo,
	   que dentro de la tarjeta son 28 de aire que el frame no tiene. */
	margin-block: 0;
}

/* La foto ocupa su columna, en una caja de 4:3 en todos los anchos: cualquier
   imagen que suba quien monta la pagina sale del mismo tamaño y entera (QA de
   producto, 1877-14510). El height:auto por lo de siempre, y la clase del core
   doblada para ganarle a su ".wp-block-image img { height: auto }". */
.mm-recursos__foto.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

/*
 * La pastilla que hace de titulo. Es un h3 —el paso de 31 le viene dado— y lo
 * unico que se escribe es la caja. Los dos azules no son tokens: son los de este
 * componente en el frame, de la misma familia que el fondo de la banda.
 *
 * inline-block y no block para que la caja mida lo que el texto, que es lo que
 * hace que parezca una pastilla y no una banda.
 */
.mm-recursos__etiqueta {
	display: inline-block;
	/* Si no cabe en una linea, parte en dos iguales y no deja una palabra sola
	   abajo (QA de producto, 1877-14510). */
	text-wrap: balance;
	padding: var( --s-3 ) var( --s-5 );
	border-radius: var( --rad-pill );
	background: #e3ecf6;
	color: #2d5f90;
}

/*
 * El ritmo de la columna de texto: 16 entre lo que va junto —un titulo y su
 * parrafo, o su lista— y 24 antes de cada titulo nuevo y detras de la pastilla,
 * que es donde el frame abre un bloque.
 */
.mm-recursos__texto > * {
	margin-block: 0;
}

.mm-recursos__texto > * + * {
	margin-block-start: var( --s-4 );
}

.mm-recursos__texto > * + h4,
.mm-recursos__texto > .mm-recursos__etiqueta + * {
	margin-block-start: var( --s-5 );
}

/* El enlace tira 4px a la izquierda para compensar su propio relleno: el diseño
   lo alinea con el texto de arriba, no con su caja. Igual que en las demas. */
.mm-recursos__accion {
	margin-inline-start: calc( var( --s-1 ) * -1 );
}

/*
 * En movil no hay frame de esta banda. Lo que cambia sale del sistema: las
 * columnas las apila el core en 781 —la foto queda encima del texto— y el
 * relleno baja como en las demas bandas de producto.
 */
@media ( max-width: 767px ) {
	/* El frame (1155-13827) abre con 40 y cierra con 48. */
	.mm-recursos {
		padding-block: 40px var( --s-7 );
	}

	/* Del titular a la primera tarjeta, 24; y entre tarjetas, otros 24 en vez de
	   los 32 que .mm-banda da entre hermanos. El segundo selector repite el peso
	   del de escritorio —el que pone los 40— para poder ganarle. */
	.mm-recursos > *,
	.mm-recursos > .wp-block-group__inner-container > *,
	.mm-recursos > :is( h1, h2, h3, h4, h5, h6 ) + *,
	.mm-recursos > .wp-block-group__inner-container > :is( h1, h2, h3, h4, h5, h6 ) + * {
		margin-block-start: var( --s-5 );
	}

	.mm-recursos__tarjeta {
		padding: var( --s-6 ) var( --s-5 );
	}

	/*
	 * La foto baja al final. Las columnas ya se apilan solas en 781, pero en el
	 * marcado puede ir primera —en escritorio es la mitad izquierda—, asi que ahi
	 * se manda al final con un order. Se puede porque es decorativa: el lector de
	 * pantalla la salta igual.
	 *
	 * El :not() no es de adorno: en la piel alterna hay filas que empiezan por el
	 * texto, y sin el se iba el texto abajo y la foto arriba, al reves de lo que
	 * dibuja el frame.
	 */
	.mm-recursos__fila > .wp-block-column:first-child:not( .mm-recursos__texto ) {
		order: 1;
	}

	.mm-banda .mm-recursos__fila.wp-block-columns {
		gap: var( --s-3 );
	}

	/*
	 * Los dos pasos de texto bajan un escalon mas de lo que ya baja la escala de
	 * movil: la pastilla, que es un h3, la dibuja el frame en H5 —20—, y los
	 * titulos de dentro, que son h4, en H6 —18—.
	 */
	.mm-recursos .mm-recursos__etiqueta {
		font-size: var( --h5-size );
		line-height: var( --h5-line );
		font-weight: var( --h5-weight );
	}

	.mm-recursos__texto h4 {
		font-size: var( --h6-size );
		line-height: var( --h6-line );
		font-weight: var( --h6-weight );
	}

	/* Y el ritmo se aprieta: 8 entre un titulo y lo suyo, 16 al abrir bloque. */
	.mm-recursos__texto > * + * {
		margin-block-start: var( --s-2 );
	}

	.mm-recursos__texto > * + h4,
	.mm-recursos__texto > .mm-recursos__etiqueta + * {
		margin-block-start: var( --s-4 );
	}
}

/*
 * En tablet la pastilla tambien va en H5. Con el 31 de escritorio en media
 * tarjeta (324 de columna a 900, 265 a 782) partia en dos lineas o mas, llenaba
 * la columna y dejaba de parecer una pastilla. En H5 «Print Components» cabe en
 * una linea y la de dos lineas vuelve a sus dos, como en escritorio.
 */
@media ( min-width: 768px ) and ( max-width: 1099px ) {
	.mm-recursos .mm-recursos__etiqueta {
		font-size: var( --h5-size );
		line-height: var( --h5-line );
		font-weight: var( --h5-weight );
	}
}

/* ------------------------------------- Banda de un testimonio destacado
 *
 * Figma 1155-12728 (escritorio) y 1155-13876 (movil). Es el patron "Testimonio
 * destacado": el mismo testimonio de la banda de tres, pero uno solo.
 *
 * Por eso aqui hay tan poco: el bocadillo, el rabito, el pie, los tamaños y lo
 * que cambia en movil ya estan escritos para .mm-testimonios, que es la clase
 * que lleva esta banda tambien. Lo unico suyo es el ancho del testimonio y el
 * relleno de abajo, que el frame baja a 64.
 */
.mm-testimonios--uno {
	padding-block: var( --s-9 ) var( --s-8 );
}

/*
 * Los 620 del frame, centrados. Los dos caminos de siempre, y no la clase sola:
 * en el front WordPress mete el .wp-block-group__inner-container y el ancho
 * maximo que .mm-banda le da a sus hijos pasa a pesar dos clases, o sea que le
 * ganaria a una.
 */
.mm-testimonios--uno > .mm-testimonio,
.mm-testimonios--uno > .wp-block-group__inner-container > .mm-testimonio {
	max-width: 620px;
	margin-inline: auto;
}

@media ( max-width: 767px ) {
	/* A 390 el bocadillo llega a los bordes del contenido y la banda encoge, como
	   la de tres: 48 arriba y abajo. El titular a la caja, 24 en vez de 32. */
	.mm-testimonios--uno {
		padding-block: var( --s-7 );
	}

	.mm-testimonios--uno > .mm-testimonio,
	.mm-testimonios--uno > .wp-block-group__inner-container > .mm-testimonio {
		margin-block-start: var( --s-5 );
	}
}

/* ------------------------------- Banda de lamina con titular y logo
 *
 * Figma 1155-12712 y 1155-12722, dos frames que son una sola pieza. Es el patron
 * "Lámina con titular y logo": titular con el logo de la plataforma al lado, una
 * lamina a todo el ancho y un boton centrado.
 *
 * El relleno de la banda es el de .mm-banda pero en 80, como las demas bandas de
 * la ficha; lo demas son tres huecos de 24 y las dos imagenes.
 */
.mm-lamina {
	padding-block: var( --s-9 );
}

/* Las tres piezas se separan 24 y no los 32 que .mm-banda da entre hermanos. */
.mm-lamina > * + *,
.mm-lamina > .wp-block-group__inner-container > * + * {
	margin-block-start: var( --s-5 );
}

/*
 * El titular y el logo, en fila y centrados como bloque. Los 80 de hueco son los
 * del frame, que ahi son el relleno del cajon del titular; aqui es el hueco de la
 * fila, que es lo mismo y se entiende mejor.
 *
 * Doblada con la clase del layout porque el hueco lo escribe el core en una clase
 * suya y su hoja va detras de esta.
 */
.mm-lamina__cabecera.is-layout-flex {
	column-gap: var( --s-9 );
	/* Partida en dos filas, el logo baja a 24 y no a 80 (QA de producto,
	   1877-14510, a 768 y 1024). */
	row-gap: var( --s-5 );
}

.mm-lamina__cabecera > * {
	margin-block: 0;
}

/* El logo, al tamaño del frame. Con max-width y no width para que un logo mas
   estrecho no se estire. */
.mm-lamina__logo.wp-block-image img {
	display: block;
	width: auto;
	max-width: 229px;
	height: auto;
}

/*
 * La lamina ocupa el ancho del contenido. El height:auto por lo de siempre:
 * wp_get_attachment_image escribe width y height como atributos y con los dos
 * puestos el navegador ignora cualquier proporcion.
 */
.mm-lamina__imagen.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* En tablet y movil el titular va solo en su fila, y centrado como el resto de
   la banda (QA de producto, 1877-14510). Si quien edita le pone alineacion,
   manda la suya. */
@media ( max-width: 1099px ) {
	.mm-lamina__cabecera > .wp-block-heading:not( [class*='has-text-align-'] ) {
		text-align: center;
	}
}

/*
 * En movil no hay frame de esta banda. Lo que hay sale del sistema: el titular y
 * el logo se parten de linea —la fila ya va con flex-wrap— y el relleno baja como
 * en las demas bandas de producto.
 */
@media ( max-width: 767px ) {
	.mm-lamina {
		padding-block: var( --s-7 );
	}

	.mm-lamina__cabecera.is-layout-flex {
		gap: var( --s-5 );
	}
}

/* ------------------------------ Banda de material de muestra por niveles
 *
 * Figma 1155-12872 (escritorio) y 1155-13991 (movil). Es el patron "Material de
 * muestra por niveles": una banda azul con una caja blanca dentro, las pestañas
 * de nivel arriba y las tarjetas de material debajo.
 *
 * Las pestañas son el core/tabs de WordPress 7.1: el cambio de panel, el teclado
 * y el aria son suyos. Aqui se les da forma de chip.
 */
.mm-muestras {
	padding-block: var( --s-9 );
	/* El boton de la cabecera baja hasta aqui por el ancla (catalogo/producto.php):
	   que se pare debajo de la navbar y de la barra de pestañas, las dos pegadas
	   arriba, y no detras. La barra mide 53. */
	scroll-margin-top: calc( var( --mm-navbar-alto, 82px ) + 53px );
}

/*
 * La ilustracion del fondo: el plano de Seekers, entero y opaco, del 44,26 % de
 * la banda hacia abajo (Figma 1155-12872, que lo pone con ese numero).
 *
 * Va opaco y no en trama: el fichero ya trae arriba el mismo #248EC2 en el que
 * acaba el degradado de la banda, asi que el corte no se ve. Estuvo un tiempo al
 * 20 % y en modo aclarar y por eso se veia raro —un tramado azul en vez del
 * plano beige del diseno—; el bajarlo era para que no tapase el titular, y el
 * titular no llega hasta aqui.
 *
 * Y no hace falta ni ancho ni margen negativo para la ampliacion que dibuja el
 * frame —el doble de ancha que la banda y centrada—: la relacion del fichero es
 * la misma que la del hueco, asi que object-fit: cover, que ya viene de
 * .mm-banda__fondo, escala exactamente igual que Figma.
 *
 * Y va con .wp-block-image detras a proposito. El inset: 0 de .mm-banda--fondo
 * viaja en un selector de tres clases —la banda, el contenedor interno que le
 * mete el core al grupo y el fondo—, asi que con dos no se le gana y el 44 % no
 * llegaba a aplicarse: el dibujo salia cubriendo la banda entera, titular
 * incluido.
 */
.mm-muestras .mm-muestras__fondo.wp-block-image,
.mm-muestras .mm-muestras__fondo.mm-fondo-banda {
	top: 44.26%;
}

/* Titular y bajada centrados, con el titular al paso H1: en la pagina ya hay un
   h1 —el nombre del producto— y el esquema del documento manda sobre el tamaño.
   Va doblado el selector para ganarle a la regla de elemento. */
.mm-muestras .mm-muestras__titulo {
	font-size: var( --h1-size );
	line-height: var( --h1-line );
	font-weight: var( --h1-weight );
}

.mm-muestras .mm-muestras__bajada {
	max-width: 900px;
	margin-inline: auto;
}

/* Del titular a la bajada 16 y de la bajada a la caja 40, que no son los 32 que
   .mm-banda da entre hermanos. */
.mm-muestras > .mm-muestras__bajada,
.mm-muestras > .wp-block-group__inner-container > .mm-muestras__bajada {
	margin-block-start: var( --s-4 );
}

.mm-muestras > .mm-muestras__caja,
.mm-muestras > .wp-block-group__inner-container > .mm-muestras__caja {
	margin-block-start: 40px;
}

/* La caja blanca, que recupera el color de texto: la banda lo tiene en blanco. */
.mm-muestras__caja {
	padding: var( --s-7 );
	border-radius: var( --rad-xl );
	background: var( --surface );
	color: var( --text );
}

/* ---- Las pestañas de nivel, en forma de chip ---- */

/*
 * El core pinta los botones con :where(), o sea con peso cero, asi que basta con
 * una clase para rehacerlos enteros. Se le quita tambien la rayita que subraya
 * la pestaña activa: aqui la activa se rellena.
 */
.mm-muestras .wp-block-tab-list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --s-3 );
}

/* El trazo, descontado del relleno: Figma lo dibuja por dentro y el chip mide
   sus 99x50, como se hace con los botones. */
.mm-muestras .wp-block-tab-list button {
	padding: calc( var( --s-3 ) - 2px ) calc( var( --s-5 ) - 2px );
	border: 2px solid var( --mm-nivel );
	color: var( --mm-nivel-texto, var( --mm-nivel ) );
	border-radius: var( --rad-pill );
	background: var( --surface );
	font-family: var( --font );
	font-size: var( --body-size );
	line-height: var( --body-line );
	font-weight: 600;
}

.mm-muestras .wp-block-tab-list button::before {
	content: none;
}

/*
 * Un color por nivel, los seis del frame. No son tokens del sistema: son de esta
 * seccion, y van por posicion porque el nivel es su orden. Si algun dia hacen
 * falta mas de seis, el septimo hereda el ultimo color y se ve al momento.
 */
.mm-muestras .wp-block-tab-list button { --mm-nivel: #2f7f92; }
.mm-muestras .wp-block-tab-list button:nth-child( 1 ) { --mm-nivel: #d23a27; }
.mm-muestras .wp-block-tab-list button:nth-child( 2 ) { --mm-nivel: #2f7ab3; }
.mm-muestras .wp-block-tab-list button:nth-child( 3 ) { --mm-nivel: #a46812; }
.mm-muestras .wp-block-tab-list button:nth-child( 4 ) { --mm-nivel: #607f37; }
.mm-muestras .wp-block-tab-list button:nth-child( 5 ) { --mm-nivel: #d43682; }
.mm-muestras .wp-block-tab-list button:nth-child( 6 ) { --mm-nivel: #2f7f92; }

/*
 * La activa se rellena con su color. Va en una variable y no en currentColor:
 * pintar el fondo con currentColor y cambiar el color en la misma regla deja el
 * fondo del color nuevo —blanco sobre blanco—, que es justo lo que no se ve.
 *
 * Los dos colores se pueden cambiar pestaña a pestaña desde el editor (panel
 * «Color de la pestaña», en editor-material.js): el del boton escribe --mm-nivel
 * en linea en su boton, que le gana al de la posicion, y el del texto,
 * --mm-nivel-texto, que vale para los dos estados. Sin el, el texto es el de
 * siempre: el color del nivel en reposo y blanco en la activa.
 */
.mm-muestras .wp-block-tab-list button[aria-selected='true'] {
	background: var( --mm-nivel );
	color: var( --mm-nivel-texto, var( --text-inverse ) );
}

/*
 * Los otros dos estados del chip en el UI Kit (Chip / Nivel, 1058-3158; QA de
 * producto, 1877-14510). Al pasar el raton, fondo surface-alt y la letra
 * subrayada, y la seleccionada no cambia. El foco es el anillo del sistema, el
 * mismo de los botones: 3 px de --focus separado 2.
 */
.mm-muestras .wp-block-tab-list button:not( [aria-selected='true'] ):hover {
	background: var( --surface-alt );
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mm-muestras .wp-block-tab-list button:focus-visible {
	outline: 3px solid var( --focus );
	outline-offset: 2px;
}

/* Del bloque de pestañas a las tarjetas, 40. */
.mm-muestras .wp-block-tab-list {
	margin-block-end: 40px;
}

/* ---- Las tarjetas de material ---- */

.mm-muestras__rejilla.is-layout-grid {
	gap: var( --s-5 );
}

.mm-material {
	padding: var( --s-5 );
	border: 1px solid var( --line );
	border-radius: var( --rad-md );
	background: var( --surface );
}

/* Portada y texto arriba siempre, crezca lo que crezca el texto (QA de
   producto, 1877-14510). */
.mm-material.is-layout-flex {
	gap: var( --s-5 );
	align-items: flex-start;
}

/* La portada: 189 de ancho y 241 de alto, con su sombra. El height:auto no vale
   aqui —el frame le da alto fijo a todas para que las tarjetas casen— asi que se
   recorta con object-fit. */
.mm-material__portada.wp-block-image {
	flex: none;
	width: 189px;
	margin: 0;
}

.mm-material__portada.wp-block-image img {
	display: block;
	width: 100%;
	height: 241px;
	object-fit: contain;
	border-radius: var( --rad-sm );
	box-shadow: 0 1px 2px rgba( 26, 26, 26, .06 ), 0 2px 8px rgba( 26, 26, 26, .08 );
}

/*
 * Las cuatro genericas: el dibujo del tema sobre la caja azul clara (Figma
 * 1155-12872).
 *
 * Se reconocen por la carpeta de la que sale la imagen y no por una clase
 * aparte. Una clase habria que ponerla y quitarla a mano cada vez que se cambia
 * la portada —y el boton "Reemplazar" del core, que es con el que se sube la de
 * un libro, no sabe nada de ella—; la URL, en cambio, ya lo dice. Asi elegir
 * plantilla y subir portada propia son lo mismo para el CSS y se puede ir de
 * una a otra sin dejar la tarjeta a medias.
 *
 * El dibujo viene con la forma de la caja, su margen y el azul claro ya dentro
 * de la imagen, como las de la pool de las cards, asi que aqui no queda mas que
 * quitarle la sombra: el diseno deja la caja plana y guarda la sombra para la
 * portada de un libro de verdad.
 */
.mm-material__portada.wp-block-image:has( img[src*='/assets/materiales/'] ) img {
	box-shadow: none;
}

/* El texto de la tarjeta: titulo al paso H5 y 24 hasta los ficheros. */
.mm-material__texto.is-layout-flex {
	gap: var( --s-5 );
	flex: 1;
	min-width: 0;
}

.mm-material__texto > * {
	margin-block: 0;
}

.mm-material__texto h4 {
	font-size: var( --h5-size );
	line-height: var( --h5-line );
	font-weight: var( --h5-weight );
}

/* ---- Los ficheros ---- */

/*
 * Cada fichero es un enlace suelto: ni vinetas ni sangria. La etiqueta del tipo
 * la pone el CSS mirando la extension del enlace, que es el unico dato que
 * escribe quien monta la pagina.
 */
.mm-material__ficheros.wp-block-list {
	display: flex;
	flex-direction: column;
	gap: var( --s-2 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-material__ficheros li {
	display: flex;
	align-items: center;
	gap: var( --s-2 );
}

.mm-material__ficheros a {
	color: var( --accent );
	font-size: var( --body-size );
	line-height: var( --body-line );
	font-weight: 600;
	text-decoration: underline;
}

/* Los mismos estados que el enlace de accion (componentes.css): --accent-hover
   al pasar o al enfocar y --accent-active al pulsar. Sin el relleno rosa, que
   aqui cada enlace es una fila entera y lo pintaria de lado a lado. */
.mm-material__ficheros a:hover,
.mm-material__ficheros a:focus-visible {
	color: var( --accent-hover );
}

.mm-material__ficheros a:active {
	color: var( --accent-active );
}

/*
 * La etiqueta. Va delante del enlace y no dentro: asi quien edita solo ve el
 * texto del enlace, y no hay marcado que se pueda romper al reescribirlo.
 *
 * El orden importa: el ultimo que gane. Por eso el caso general (un enlace sin
 * extension conocida: una pagina, un video de YouTube, una plataforma) lleva
 * LINK, y los conocidos ponen la suya encima. Asi todas las filas tienen su
 * pildora, del mismo ancho, y los nombres arrancan en la misma columna. Sin mirar
 * mayusculas (la i del selector): lo que sube una camara o un escaner suele
 * llegar como .JPG o .PDF. Las familias van con un solo nombre, como el video y
 * el audio: .jpeg sale JPG, y .docx, .pptx y .xlsx salen DOC, PPT y XLS.
 */
.mm-material__ficheros a::before {
	content: 'LINK';
	position: absolute;
	top: calc( var( --body-size ) * var( --body-line ) / 2 - 11px ); /* centrada en la primera linea: la etiqueta mide 22 */
	left: 0;
	box-sizing: border-box;
	width: 44px;
	padding: 2px 0;
	text-align: center;
	border-radius: var( --rad-sm );
	background: var( --surface-alt );
	color: var( --text-soft );
	font-size: 12px;
	line-height: 1.5;
	font-weight: 600;
	text-decoration: none;
}

.mm-material__ficheros a[href*='.pdf' i]::before { content: 'PDF'; }
.mm-material__ficheros a[href*='.mp4' i]::before,
.mm-material__ficheros a[href*='.webm' i]::before,
.mm-material__ficheros a[href*='.mov' i]::before { content: 'MP4'; }
.mm-material__ficheros a[href*='.mp3' i]::before,
.mm-material__ficheros a[href*='.m4a' i]::before,
.mm-material__ficheros a[href*='.wav' i]::before { content: 'MP3'; }
.mm-material__ficheros a[href*='.jpg' i]::before,
.mm-material__ficheros a[href*='.jpeg' i]::before { content: 'JPG'; }
.mm-material__ficheros a[href*='.png' i]::before { content: 'PNG'; }
.mm-material__ficheros a[href*='.zip' i]::before { content: 'ZIP'; }
.mm-material__ficheros a[href*='.doc' i]::before { content: 'DOC'; }
.mm-material__ficheros a[href*='.ppt' i]::before { content: 'PPT'; }
.mm-material__ficheros a[href*='.xls' i]::before { content: 'XLS'; }

/*
 * El pseudoelemento vive dentro del enlace, y como es parte del enlace el clic
 * sobre la etiqueta abre el fichero igual, que es lo que se espera.
 *
 * Va fuera del flujo, colgada a la izquierda en el hueco que le deja el
 * relleno, por el subrayado: el del enlace llega a todo lo que va en el flujo
 * —tambien a un elemento flex, que es como estuvo— y un text-decoration: none
 * en la etiqueta no lo quita. Fuera del flujo no le llega (QA de producto,
 * 1877-14510). De paso, si el nombre del fichero parte en dos lineas, la
 * segunda se alinea con la primera y no debajo de la etiqueta, que se queda
 * arriba.
 */
.mm-material__ficheros a {
	position: relative;
	display: block;
	padding-inline-start: calc( 44px + var( --s-2 ) );
	text-decoration-line: underline;
	text-underline-offset: 2px;
}

/* ---- El visor de video y audio (assets/js/materiales.js) ---- */

/*
 * El cuadro es un <dialog>: el velo, la tecla Escape y el foco atrapado son del
 * navegador. Aqui va la forma.
 */
.mm-visor {
	width: min( 90vw, 960px );
	max-width: none;
	padding: 0;
	border: 0;
	border-radius: var( --rad-md );
	background: none;
	overflow: visible;
}

.mm-visor::backdrop {
	background: rgba( 26, 26, 26, .7 );
}

.mm-visor__medio video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --rad-md );
	background: #000;
}

.mm-visor__medio audio {
	display: block;
	width: 100%;
}

/* La X, con el icono del tema en mascara, como el resto de iconos del sistema. */
.mm-visor__cerrar {
	position: absolute;
	top: -48px;
	right: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: var( --text-inverse );
	cursor: pointer;
	-webkit-mask: url( ../images/close.svg ) center / 24px 24px no-repeat;
	mask: url( ../images/close.svg ) center / 24px 24px no-repeat;
}

/*
 * En tablet ya va el formato de movil (QA de producto, 1877-14510): a 768 y
 * 1024 las dos columnas dejaban el texto en 140 px al lado de la portada de 189.
 * Una columna, la portada pequeña del frame de movil y los chips mas pequeños,
 * los de 1155-13991 —cuerpo 14 y 16 a los lados en vez de 24—.
 */
@media ( max-width: 1099px ) {
	.mm-muestras .wp-block-tab-list button {
		padding-inline: calc( var( --s-4 ) - 2px );
		font-size: var( --body-sm-size );
		line-height: var( --body-sm-line );
	}

	.mm-muestras__rejilla.is-layout-grid {
		grid-template-columns: 1fr;
	}

	/* La tarjeta no se pone en pie: la portada sigue al lado del texto, mas
	   pequeña —84 de los 189 del frame de escritorio—. */
	.mm-material__portada.wp-block-image {
		width: 84px;
	}

	.mm-material__portada.wp-block-image img {
		height: 107px;
	}

	.mm-material__portada--icono.wp-block-image img {
		width: 40px;
		height: 40px;
	}
}

/*
 * En movil (frame 1155-13991) la caja encoge. Las pestañas ruedan de lado si no
 * caben, como la barra de la ficha.
 */
@media ( max-width: 767px ) {
	/* El frame (1155-13991) abre con 40 y cierra con 48. */
	.mm-muestras {
		padding-block: 40px var( --s-7 );
	}

	.mm-muestras .mm-muestras__titulo {
		font-size: var( --h4-size );
		line-height: var( --h4-line );
		font-weight: var( --h4-weight );
	}

	.mm-muestras__caja {
		padding: var( --s-5 ) var( --s-4 );
	}

	/* Las pestañas no ruedan de lado: el frame las parte en dos filas, que es lo
	   que ya hace el flex-wrap de escritorio. Solo baja el hueco hasta la
	   rejilla. */
	.mm-muestras .wp-block-tab-list {
		margin-block-end: var( --s-5 );
	}

	.mm-visor__cerrar {
		top: -40px;
	}
}

/* --------------------- Banda de recursos en bloques alternos (piel amarilla)
 *
 * Figma 1155-13600 (escritorio) y 1155-14911 (movil). Es el patron "Recursos en
 * bloques alternos": el mismo componente que "Recursos en tarjetas anchas" —la
 * tarjeta, la fila, la pastilla, el enlace— con la piel amarilla, varias filas
 * por tarjeta y una onda entre ellas.
 *
 * De ahi que aqui haya tan poco: lo que no cambia ya esta escrito arriba.
 */

/* El titular va en negro sobre el amarillo, que es lo que trae la banda por
   defecto; solo hace falta el paso H1, que ya lo pone .mm-recursos__titulo. */

/* Entre filas y ondas, 40. Los dos caminos, que en el front la tarjeta recibe su
   div interno y en el lienzo no. */
.mm-recursos--alterna .mm-recursos__tarjeta > * + *,
.mm-recursos--alterna .mm-recursos__tarjeta > .wp-block-group__inner-container > * + * {
	margin-block-start: 40px;
}

/* La pastilla, en los amarillos de esta piel. No son tokens: son los del
   componente en el frame, como los azules de la otra. */
.mm-recursos--alterna .mm-recursos__etiqueta {
	background: #fcedd2;
	color: #955f00;
}

/* Aqui la foto va con radio, que en la otra piel no lo lleva. Y a su
   proporcion, sin la caja fija de la otra piel: con la foto encogida dentro,
   el radio se quedaria en la caja y no en la foto. */
.mm-recursos--alterna .mm-recursos__foto.wp-block-image img {
	aspect-ratio: auto;
	border-radius: var( --rad-lg );
}

/*
 * La onda que separa filas: un core/separator con el trazo del Figma de fondo.
 * Sin borde y con alto propio, que un <hr> no tiene ninguno.
 */
.mm-recursos__onda.wp-block-separator {
	height: 19px;
	margin: 0;
	border: 0;
	background: url( ../images/onda-recursos.svg ) center / 100% 100% no-repeat;
	opacity: 1;
}

/*
 * En movil (frame 1155-14911) la foto baja debajo del texto en todas las filas,
 * tambien en las que en el marcado va primera. El resto —relleno, pasos y
 * ritmo— es el de la otra piel, que ya esta escrito.
 */
@media ( max-width: 767px ) {
	.mm-recursos--alterna .mm-recursos__tarjeta > * + *,
	.mm-recursos--alterna .mm-recursos__tarjeta > .wp-block-group__inner-container > * + * {
		margin-block-start: var( --s-6 );
	}
}

/* --------------------------------------------- Banda de dos testimonios
 *
 * Figma 1155-13673 (escritorio) y 1155-14955 (movil). Es el patron "Dos
 * testimonios": la misma pieza de la banda de tres y del testimonio destacado,
 * con dos uno al lado del otro.
 *
 * Por eso aqui hay tan poco: el bocadillo, el rabito, las comillas, el pie y lo
 * que cambia en movil ya estan escritos para .mm-testimonios, que es la clase
 * que lleva esta banda tambien.
 */
.mm-testimonios--dos {
	padding-block: var( --s-9 ) var( --s-8 );
}

/* Los 40 del frame: dos bocadillos de 620 en los 1280 del contenido. Hace falta
   ganarle al 55 de la banda de tres, que ya va con .mm-banda por delante. */
.mm-banda.mm-testimonios--dos .mm-testimonios__fila.wp-block-columns {
	gap: 40px;
}

/*
 * El bocadillo de este frame no encoge con el texto: mide 242 y la cita va
 * centrada dentro. Con el flex del core la altura ya la igualan los dos, asi
 * que esto es solo el suelo: una cita corta no deja un bocadillo aplastado.
 */
.mm-testimonios--dos .is-style-bocadillo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 242px;
}

/*
 * Y el texto entra mas que en la banda de tres, donde el bocadillo mide 390 y
 * no 620: 90 por la izquierda, que es de donde arrancan las comillas y la cita
 * en el frame. Va con el mismo peso que el relleno del estilo —que es (0,3,0)
 * en componentes.css— y detras, o no lo pisaria.
 *
 * Solo a partir de 1100, que es donde el bocadillo cambia de escala: por debajo
 * manda su relleno de movil, y una media query no suma peso para defenderlo.
 */
@media ( min-width: 1100px ) {
	:is( .mm-contenido, .editor-styles-wrapper ) .mm-testimonios--dos .wp-block-group.is-style-bocadillo {
		padding-inline: 90px 56px;
	}

	:is( .mm-contenido, .editor-styles-wrapper ) .mm-testimonios--dos .is-style-bocadillo::before {
		top: 50px;
		left: 76px;
	}
}

/*
 * En movil (frame 1155-14955) los dos se apilan, el bocadillo baja a 230 y la
 * banda encoge por los dos lados. El hueco entre los dos vuelve a los 24 de la
 * banda de tres, que aqui hay que repetir porque el 40 de arriba pesa mas.
 */
@media ( max-width: 781px ) {
	.mm-banda.mm-testimonios--dos .mm-testimonios__fila.wp-block-columns {
		gap: var( --s-5 );
	}
}

@media ( max-width: 767px ) {
	.mm-testimonios--dos {
		padding-block: var( --s-7 );
	}

	.mm-testimonios--dos .is-style-bocadillo {
		min-height: 230px;
	}
}

/* ------------------------------------------- Cabecera de instituciones */

/*
 * Cabecera de la landing de instituciones. Figma: "Cabecera 2" (nodo
 * 1288-8936) y "Section · Hero" de su movil (nodo 1301-2188). Patron
 * "Cabecera · titular, botones y video", de "Macmillan · Instituciones".
 *
 * Va sobre .mm-banda con sus adornos (.mm-banda--fondo): el degradado y el
 * blanco del texto los pone el core desde el propio grupo. Aqui solo va lo que
 * el frame cambia: el alto, el hueco de la fila y el ritmo de la columna de
 * texto. La tarjeta del video esta en componentes.css con la de banner.
 *
 * El alto es un minimo con el contenido a media altura, no un relleno: el frame
 * es una caja fija de 592 con la fila centrada, y asi es como sigue viendose si
 * el texto crece una linea. Los 64 de .mm-banda se quedan de red.
 */
.mm-cabecera-inst {
	display: grid;
	align-content: center;
	min-height: 592px;
}

/* La fila: 608 de texto, 56 de hueco y 616 de tarjeta sobre los 1280. La
   columna del texto lleva su ancho y la de la tarjeta se queda con el resto,
   asi que el 56 es lo unico que hay que escribir. Con la banda delante porque
   .mm-banda ya le pone 24 a cualquier fila. */
.mm-banda.mm-cabecera-inst .wp-block-columns {
	gap: 56px;
}

/* El ritmo de la columna de texto: 12 del titular a la bajada y 24 hasta los
   botones, que van a 12 entre si, sin los margenes que traen de fabrica. Solo
   los hijos directos de la columna: lo de dentro de la tarjeta lleva el suyo. */
.mm-cabecera-inst .wp-block-column > * {
	margin-block: 0;
}

.mm-cabecera-inst .wp-block-column > * + * {
	margin-block-start: var( --s-3 );
}

.mm-cabecera-inst .wp-block-column > .wp-block-buttons {
	margin-block-start: var( --s-5 );
	gap: var( --s-3 );
}

/*
 * Movil (frame 1301-2188): todo en pie con 20 entre pieza y pieza —titular,
 * bajada, botones y tarjeta—, los dos botones a lo ancho uno debajo de otro y
 * la banda con 44 de relleno vertical. Ni 20 ni 44 son pasos del sistema: son
 * los del frame.
 *
 * Dos cortes, como en la cabecera del producto: los botones y el hueco de la
 * fila cambian en el 781 del core, que es donde la fila se apila; la banda, en
 * el 767 del resto del sistema.
 */
@media ( max-width: 781px ) {
	.mm-banda.mm-cabecera-inst .wp-block-columns {
		gap: 20px;
	}

	.mm-cabecera-inst .wp-block-column > .wp-block-buttons {
		flex-direction: column;
	}

	.mm-cabecera-inst .wp-block-column > .wp-block-buttons .wp-block-button,
	.mm-cabecera-inst .wp-block-column > .wp-block-buttons .wp-block-button__link {
		width: 100%;
	}

	/* A lo ancho de un movil de 390 el texto largo del primer boton no cabe en
	   una linea: mejor dos lineas que salirse de la pastilla. */
	.mm-cabecera-inst .wp-block-column > .wp-block-buttons .wp-block-button__link {
		white-space: normal;
	}
}

@media ( max-width: 767px ) {
	.mm-cabecera-inst {
		min-height: 0;
		padding-block: 44px;
	}

	.mm-cabecera-inst .wp-block-column > * + *,
	.mm-cabecera-inst .wp-block-column > .wp-block-buttons {
		margin-block-start: 20px;
	}
}

/* ------------------------------------------- Banda de necesidades */

/*
 * Banda de necesidades de la landing de instituciones. Figma: "Section ·
 * Necesidades" (nodo 1525-9870) y su movil (1525-10001). Patron "Necesidades ·
 * seis con icono", de "Macmillan · Instituciones".
 *
 * Sobre .mm-banda, que ya pone el fondo, el ancho, los 8 del titular a la
 * bajada y los 32 de la bajada a la lista: aqui solo el relleno vertical del
 * frame —96 en vez de 64, 48 en movil— y la rejilla.
 */
.mm-necesidades {
	padding-block: var( --s-10 );
}

/* Tres por fila, 32 entre columnas y 16 entre filas. Doblada con la clase del
   core por lo de siempre: su grid-template-columns pesa una clase. */
.mm-necesidades__lista.is-layout-grid {
	gap: var( --s-4 ) var( --s-6 );
}

/* Cada necesidad: el medallon de 96 y el texto a 20, a media altura, que es lo
   que trae el layout flex del core. 20 no es un paso del sistema: es el del
   frame. */
.mm-necesidad.is-layout-flex {
	gap: 20px;
}

.mm-necesidad__icono.wp-block-image {
	margin: 0;
	flex: none;
}

.mm-necesidad__icono.wp-block-image img {
	display: block;
	width: 96px;
	height: 96px;
}

.mm-necesidad > p {
	margin: 0;
}

/*
 * Tablet: no hay frame. Con tres columnas a 900 de ancho al texto le quedan 100
 * y cada necesidad ocupa cinco lineas; a dos por fila se lee como en el
 * escritorio. El corte es el 1099 del resto del sistema.
 */
@media ( max-width: 1099px ) {
	.mm-necesidades__lista.is-layout-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/*
 * Movil (frame 1525-10001): 48 de relleno, 28 de la bajada a la lista y las seis
 * en una columna a 24. El 28 es del frame, no un paso del sistema.
 */
@media ( max-width: 767px ) {
	.mm-necesidades {
		padding-block: var( --s-7 );
	}

	.mm-necesidades > .mm-necesidades__lista,
	.mm-necesidades > .wp-block-group__inner-container > .mm-necesidades__lista {
		margin-block-start: 28px;
	}

	.mm-necesidades__lista.is-layout-grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --s-5 );
	}
}

/* ------------------------------------------- Banda de Circle */

/*
 * Banda de Circle: la rueda del ecosistema y el acordeon de areas. Figma:
 * "Section · Circle" (nodo 1288-9098) y su movil (1301-2190). Patron "Circle ·
 * rueda y areas", de "Macmillan · Instituciones".
 *
 * La rueda es un bloque propio y trae su CSS; aqui esta la banda, la fila y el
 * acordeon, que son piezas del core con clase.
 */
.mm-circle {
	padding-block: var( --s-10 );
}

/* El titular y la bajada tienen su propio ancho, mas estrecho que la banda: 860
   y 760 de los 1280, que es lo que hace que el titular parta donde parte. */
.mm-circle .mm-circle__titular {
	max-width: 860px;
	margin-inline: auto;
}

.mm-circle .mm-circle__bajada {
	max-width: 760px;
	margin-inline: auto;
}

/* La bajada va a 16 del titular y no a los 8 de una banda cualquiera. Los dos
   caminos, que en el front WordPress mete su div interno y en el lienzo no. */
.mm-circle > :is( h1, h2, h3, h4, h5, h6 ) + p,
.mm-circle > .wp-block-group__inner-container > :is( h1, h2, h3, h4, h5, h6 ) + p {
	margin-block-start: var( --s-4 );
}

/* La fila: 746 de rueda, 64 de hueco y 470 de acordeon sobre los 1280. El ancho
   lo lleva escrito la primera columna y la segunda se queda con el resto. */
.mm-banda .mm-circle__fila.wp-block-columns {
	gap: var( --s-8 );
	align-items: flex-start;
}

/* ---------------------------------- El acordeon de areas */

/*
 * Cada area es un core/details con el atributo "name": los tres comparten
 * nombre, asi que abrir uno cierra el otro sin una linea de JavaScript. El
 * teclado, el foco y el anuncio del lector de pantalla vienen de serie con la
 * etiqueta; un acordeon a mano con divs y aria-expanded seria mas codigo y peor.
 */
.mm-circle__areas {
	gap: var( --s-2 );
	counter-reset: mm-area;
}

.mm-area {
	counter-increment: mm-area;
	border-radius: var( --rad-lg );
	background: var( --surface );
	box-shadow: var( --sombra-sm );

	/* Recorta el fondo del summary abierto contra el radio de la tarjeta. */
	overflow: hidden;
}

/*
 * La cabecera. list-style a none y el ::-webkit-details-marker fuera: son los
 * dos triangulitos que ponen los navegadores por su cuenta, y aqui la flecha es
 * el chevron del sistema.
 */
/* Cerrada lleva mas aire que abierta: 24 y 32 frente a 16 y 24, que es lo que
   dibujan los dos frames. Sin esa diferencia las tarjetas cerradas median 56 en
   vez de 71 y el bloque entero subia. */
.mm-area > summary {
	display: flex;
	align-items: center;
	gap: var( --s-3 );
	padding: var( --s-5 ) var( --s-6 );
	list-style: none;
	cursor: pointer;
	font-size: var( --h6-size );
	line-height: var( --h6-line );
	font-weight: var( --h6-weight );
}

.mm-area > summary::-webkit-details-marker {
	display: none;
}

/* El numero. Del contador y no del marcado: asi anadir o borrar un area
   renumera el resto sola. */
.mm-area > summary::before {
	content: counter( mm-area, decimal-leading-zero );
	flex: none;
}

/* El chevron, con el color del texto para que valga en la cabecera blanca y en
   la roja. Mismo mecanismo que el resto del sistema: mascara sobre el SVG. */
.mm-area > summary::after {
	content: '';
	flex: none;
	width: 24px;
	height: 24px;
	margin-inline-start: auto;
	background-color: currentColor;
	-webkit-mask: url( ../images/chevron.svg ) center / contain no-repeat;
	mask: url( ../images/chevron.svg ) center / contain no-repeat;
}

.mm-area[open] > summary::after {
	transform: rotate( 180deg );
}

/*
 * Abierta: cabecera roja y el titulo un paso mas grande, que es lo que dibuja
 * el frame.
 *
 * El rojo va escrito y no es un token: el diseno usa aqui un #c72234 que la
 * coleccion de Figma no tiene: no es --accent (#da1c2d) ni --accent-hover
 * (#c1121f). Sobre el, el blanco contrasta 5.9:1, AA. Cuando el sistema lo
 * cubra, se sustituye por el token.
 */
.mm-area[open] > summary {
	padding: var( --s-4 ) var( --s-5 );
	background: #c72234;
	color: var( --text-inverse );
	font-size: var( --h4-size );
	line-height: var( --h4-line );
	font-weight: var( --h4-weight );
}

/* Foco visible: el anillo del sistema, sobre la tarjeta entera. El summary es
   lo que recibe el foco, y su fondo lo tapa a medias si se pinta dentro. */
.mm-area > summary:focus-visible {
	outline: 4px solid var( --focus );
	outline-offset: -4px;
}

/* La lista de productos del area. */
.mm-area__lista {
	margin: 0;
	padding: var( --s-5 ) var( --s-6 );
	list-style: none;
}

.mm-area__lista li {
	display: flex;
	gap: var( --s-3 );
}

.mm-area__lista li + li {
	margin-block-start: var( --s-2 );
}

/* El punto: centrado en la primera linea, no en el bloque de texto, que si no
   un item de dos lineas lo baja a la mitad. */
.mm-area__lista li::before {
	content: '';
	flex: none;
	width: 12px;
	height: 12px;
	margin-block-start: calc( ( var( --body-line ) * 1em - 12px ) / 2 );
	border-radius: 50%;
	background: var( --accent );
}

/*
 * Abrir y cerrar con animacion, sin JavaScript.
 *
 * ::details-content es la caja que el navegador crea con lo que hay dentro del
 * <details>, y es lo unico que se puede animar de un elemento que el propio
 * navegador enseña y esconde. Hacen falta las tres piezas:
 *
 * - interpolate-size, porque el destino es "auto" y sin el no hay dos numeros
 *   entre los que interpolar. Se hereda, asi que se declara en la tarjeta.
 * - content-visibility con allow-discrete, que es lo que sostiene el contenido
 *   visible mientras se cierra; sin eso desaparece de golpe y la altura anima
 *   sobre una caja vacia.
 * - overflow hidden, para que el contenido no asome mientras la caja crece.
 *
 * Donde el navegador no conozca el pseudoelemento, la regla entera se ignora y
 * el acordeon abre y cierra de golpe, que es como abre un <details> de toda la
 * vida: no se rompe nada.
 *
 * Y solo si no molesta: con "reducir movimiento" puesto no se anima, que es la
 * misma regla que sigue el resto del sistema.
 */
@media ( prefers-reduced-motion: no-preference ) {
	.mm-area {
		interpolate-size: allow-keywords;
	}

	.mm-area::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
			block-size var( --motion-panel ) var( --motion-ease ),
			content-visibility var( --motion-panel ) var( --motion-ease ) allow-discrete;
	}

	.mm-area[open]::details-content {
		block-size: auto;
	}

	.mm-area > summary::after {
		transition: transform var( --motion-panel ) var( --motion-ease );
	}
}

/*
 * Movil (frame 1301-2190): todo en pie. La banda encoge a 56 de relleno, la
 * rueda se queda sola en el medio —sus rotulos los lleva el acordeon— y las
 * areas pasan a 16, que es el cuerpo del frame.
 *
 * El corte es el 1099 del resto del sistema, el mismo que usa la rueda para
 * soltar sus rotulos: por debajo de ahi las dos columnas ya no caben.
 */
@media ( max-width: 1099px ) {
	.mm-banda .mm-circle__fila.wp-block-columns {
		gap: var( --s-5 );
	}
}

@media ( max-width: 767px ) {
	.mm-circle {
		padding-block: 56px;
	}

	/* Los cuatro numeros del frame de movil, que no son pasos del sistema. Con
	   los 24 y 32 de escritorio, "Soluciones complementarias" no cabia en una
	   linea a 390 y la tarjeta cerrada se iba a dos. */
	.mm-area > summary,
	.mm-area[open] > summary {
		padding: 18px 20px 18px 22px;
		font-size: var( --body-size );
		line-height: var( --body-line );
		font-weight: 600;
	}

	.mm-area__lista li::before {
		width: 10px;
		height: 10px;
		margin-block-start: calc( ( var( --body-line ) * 1em - 10px ) / 2 );
	}
}

/* ------------------------------------------- Banda del metodo */

/*
 * Banda del metodo: dos tarjetas de fase con sus pasos numerados. Figma:
 * "Section · Método" (nodo 1288-9191) y su movil (1301-2191). Patron "Método ·
 * dos fases con pasos", de "Macmillan · Instituciones".
 *
 * Sobre .mm-banda, que ya pone el ancho, el degradado —del bloque— y los 32 de
 * la cabecera a la fila. Aqui va el relleno del frame y todo lo de las
 * tarjetas.
 */
.mm-metodo {
	padding-block: var( --s-10 );
}

/*
 * El titular lleva escrito el salto del frame de movil, que parte tras los dos
 * puntos. En escritorio cabe entero en una linea, asi que ahi el <br> se apaga:
 * un br con display:none deja de romper, y el espacio que lleva delante en el
 * marcado es lo que evita que se peguen "metodo:" y "del".
 *
 * Con el corte natural salia "Nuestro metodo: del / analisis al /
 * acompanamiento" y con text-wrap: balance, "Nuestro metodo: / del analisis /
 * al acompanamiento". Ninguno de los dos es el del diseno.
 */
@media ( min-width: 768px ) {
	.mm-metodo h2 br {
		display: none;
	}
}

/* La bajada va a 16 del titular y no a los 8 de una banda cualquiera. */
.mm-metodo > :is( h1, h2, h3, h4, h5, h6 ) + p,
.mm-metodo > .wp-block-group__inner-container > :is( h1, h2, h3, h4, h5, h6 ) + p {
	margin-block-start: var( --s-4 );
}

/* Las dos fases, con el hueco de 48 del frame. */
.mm-banda .mm-metodo__fases.wp-block-columns {
	gap: var( --s-7 );
}

/* ---------------------------------- La tarjeta de una fase */

/*
 * La tarjeta es blanca aunque la banda vaya en oscuro, asi que se le devuelve
 * el color de texto: el degradado de la banda deja text-inverse heredado a todo
 * lo de dentro.
 *
 * Los 40 de arriba no son un paso de la escala. El frame los dibuja asi —40
 * arriba y 32 en los otros tres lados— y en Figma la propiedad esta vinculada a
 * --s-6 (32), que es una discrepancia del propio archivo. Manda lo que se ve.
 */
.mm-fase {
	height: 100%;
	padding: 40px var( --s-6 ) var( --s-6 );
	border-radius: var( --rad-xl );
	background: var( --surface );
	box-shadow: var( --sombra-md );
	color: var( --text );
	overflow: hidden;
}

/* El ritmo de dentro: 8 del rotulo al titular, 16 hasta los pasos y 32 hasta la
   foto. Con hijo directo y sin margenes de fabrica. */
.mm-fase.is-layout-flex {
	gap: 0;
}

.mm-fase > * {
	margin-block: 0;
}

.mm-fase > .mm-fase__titulo {
	margin-block-start: var( --s-2 );
}

.mm-fase > .mm-fase__pasos {
	margin-block-start: var( --s-4 );
}

.mm-fase > .mm-fase__foto {
	margin-block-start: var( --s-6 );
}

/* El rotulo de fase. */
.mm-fase__rotulo {
	color: var( --text-soft );
	font-size: var( --body-size );
	line-height: var( --body-line );
	font-weight: 600;
}

.mm-fase .mm-fase__titulo {
	color: var( --text );
	font-size: var( --h4-size );
	line-height: var( --h4-line );
	font-weight: var( --h4-weight );
}

/* ---------------------------------- Los pasos */

/*
 * Cada paso es una pastilla blanca con su numero en un circulo rojo.
 *
 * La lista es un <ol> de verdad y el numero sale de counter( list-item ), que
 * es el contador propio del navegador: el mismo que respeta el atributo start
 * del <ol>. Asi lo que se ve y lo que anuncia un lector de pantalla no se
 * pueden separar, que es lo que pasaria con un contador nuestro.
 *
 * La pastilla es blanca sobre una tarjeta blanca: lo que la separa es la
 * sombra, como en el frame.
 */
.mm-fase__pasos {
	padding: 0;
	list-style: none;
}

/*
 * El counter-increment va escrito, y no sobra: el contador list-item lo llevan
 * solos los elementos con display: list-item, y aqui el <li> es flex para poder
 * poner el circulo al lado del texto. Sin esta linea el contador se queda
 * quieto y los seis pasos salian numerados 0, 0, 0 y 3, 3, 3.
 *
 * El valor de partida lo sigue poniendo el start del <ol>, que es un atributo
 * del elemento y no depende del display de sus hijos.
 */
.mm-fase__pasos li {
	display: flex;
	counter-increment: list-item;
	align-items: center;
	gap: var( --s-5 );
	padding: var( --s-2 ) var( --s-3 );
	border-radius: var( --rad-pill );
	background: var( --surface );
	box-shadow: var( --sombra-sm );
	font-size: var( --body-size );
	line-height: var( --body-line );
	font-weight: 600;
}

.mm-fase__pasos li + li {
	margin-block-start: 14px;
}

.mm-fase__pasos li::before {
	content: counter( list-item );
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var( --accent );
	color: var( --text-inverse );
	font-size: var( --body-size );
	line-height: 1;
	font-weight: 600;
}

/* La foto. El height:auto de siempre no vale aqui: el frame le da un alto fijo
   y la recorta, asi que se dimensiona la caja y la imagen la rellena. */
.mm-fase__foto.wp-block-image {
	width: 100%;
}

.mm-fase__foto.wp-block-image img {
	display: block;
	width: 100%;
	height: 323px;
	object-fit: cover;
	border-radius: var( --rad-md );
}

/*
 * Movil (frame 1301-2191): las dos fases apiladas y la tarjeta encogida.
 *
 * Dos cortes, como en el resto: el hueco de la fila cambia en el 781 del core,
 * que es donde las columnas se apilan, y lo demas en el 767 del sistema.
 */
@media ( max-width: 781px ) {
	.mm-banda .mm-metodo__fases.wp-block-columns {
		gap: 18px;
	}
}

@media ( max-width: 767px ) {
	.mm-metodo {
		padding-block: 56px;
	}

	/* La bajada del frame de movil va a la izquierda, no centrada como en
	   escritorio. Doblada con la clase del core, que su text-align pesa igual. */
	.mm-metodo .mm-metodo__bajada.has-text-align-center {
		text-align: left;
	}

	.mm-fase {
		padding: 26px 22px 24px;
		border-radius: var( --rad-lg );
	}

	/* El rotulo encoge y se separa: 12.8 del paso "caption" y el espaciado del
	   frame, que aqui si lo lleva. */
	.mm-fase__rotulo {
		color: var( --text-muted );
		font-size: var( --caption-size );
		line-height: var( --caption-line );
		letter-spacing: 0.08em;
	}

	.mm-fase > .mm-fase__titulo {
		margin-block-start: var( --s-4 );
	}

	.mm-fase .mm-fase__titulo {
		font-size: var( --h5-size );
		line-height: var( --h5-line );
		font-weight: var( --h5-weight );
	}

	/* 20 entre el titular y los pasos: los 16 del frame mas los 4 que su caja de
	   pasos lleva de relleno arriba. */
	.mm-fase > .mm-fase__pasos {
		margin-block-start: 20px;
	}

	.mm-fase__pasos li {
		gap: 14px;
		padding: var( --s-2 ) 20px var( --s-2 ) var( --s-2 );
		font-size: var( --body-sm-size );
		line-height: var( --body-sm-line );
	}

	.mm-fase__pasos li + li {
		margin-block-start: 10px;
	}

	.mm-fase__pasos li::before {
		width: 40px;
		height: 40px;
	}

	/* Y la foto se pega mas al ultimo paso: 16 en vez de los 32 de escritorio. */
	.mm-fase > .mm-fase__foto {
		margin-block-start: var( --s-4 );
	}

	.mm-fase__foto.wp-block-image img {
		height: 200px;
	}

	/* De la bajada a las fases, 24 y no los 32 de la banda. */
	.mm-metodo > .mm-metodo__fases,
	.mm-metodo > .wp-block-group__inner-container > .mm-metodo__fases {
		margin-block-start: var( --s-5 );
	}
}

/* ------------------------------------------- Muro de casos de exito */

/*
 * Banda de casos de exito: la rejilla de cards de siempre con la cabecera
 * centrada. Figma: "Section · Centros que ya forman parte de Circle" (nodo
 * 1288-9287) y su movil (1301-2193). Patron "Casos · muro de centros", de
 * "Macmillan · Instituciones".
 *
 * Aqui no hay bloque nuevo: cada centro es un core/image dentro de una caja
 * blanca y la rejilla la pone el core. Lo propio son la cabecera —centrada y a
 * todo el ancho, que en las secciones de "Macmillan · Cards" va a la izquierda—
 * y la caja del logotipo.
 */
.mm-casos {
	padding-block: var( --s-10 );
}

/* El rotulo de encima del titular: H4 en gris. No sale del selector de tamaños
   del editor, que no ofrece H4, asi que va en la clase. */
.mm-casos .mm-casos__rotulo {
	font-size: var( --h4-size );
	line-height: var( --h4-line );
	font-weight: var( --h4-weight );
}

/* Del rotulo al titular, 12; y del titular a la rejilla, 48. Los dos numeros son
   del frame y ninguno es el que la banda pone por su cuenta: entre hijos deja 32
   y entre un titular y una rejilla de cards, 24. */
.mm-casos > .mm-casos__rotulo + .mm-casos__titular,
.mm-casos > .wp-block-group__inner-container > .mm-casos__rotulo + .mm-casos__titular {
	margin-block-start: var( --s-3 );
}

.mm-casos > :is( h1, h2, h3, h4, h5, h6 ) + .mm-casos__muro,
.mm-casos > .wp-block-group__inner-container > :is( h1, h2, h3, h4, h5, h6 ) + .mm-casos__muro {
	margin-block-start: var( --s-7 );
}

/*
 * El muro de logos (Figma "Stack · Muro de logos", nodo 1543-2580). Cinco cajas
 * por fila con 24 de hueco; el core pone la rejilla y aqui va lo que no trae.
 *
 * La caja del frame mide 232 y cinco con sus huecos suman 1256, 24 menos que los
 * 1280 del contenido: esos 24 se reparten entre las cinco y cada caja sale a
 * 236,8. Se prefiere el ancho fluido a clavar los 232 y dejar la fila coja,
 * porque quien monta puede meter el muro en una columna mas estrecha.
 */
.mm-casos__muro {
	gap: var( --s-5 );
}

/*
 * Cada centro es una imagen dentro de una caja blanca: 112 de alto y 24 de aire
 * por dentro, sin sombra —el frame no la lleva, y con diez cajas seguidas se
 * notaria—.
 */
.mm-casos__logo {
	display: grid;
	place-items: center;
	margin: 0;
	height: 112px;
	padding: var( --s-5 );
	border-radius: var( --rad-md );
	background-color: var( --surface );
}

/*
 * El logotipo se ajusta al hueco sin deformarse ni recortarse. El alto no se fija
 * en los 28 del frame: eso mide el skeleton, que es una barra, y un logotipo de
 * verdad puede ser cuadrado o apaisado. Lo que manda es la caja.
 */
.mm-casos__logo img {
	width: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Entre medias no caben cinco: tres por fila hasta el corte de la navbar. */
@media ( max-width: 1099px ) {
	.mm-casos__muro.is-layout-grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/*
 * Movil (frame 1301-2193): la banda encoge, la cabecera baja un paso y las
 * tarjetas van de dos en dos, como el frame.
 *
 * Las dos columnas son la excepcion de esta banda: el resto de secciones de
 * cards apilan de una en una en movil (frame 1091-8875). Aqui caben dos porque
 * la card lleva un nombre corto y no una bajada, pero a 165 de ancho hay que
 * encogerla: 88 de alto en vez de 102, el aro mas pequeño y el titulo al paso
 * pequeño. Todo acotado a .mm-casos, que las demas secciones no cambian.
 */
@media ( max-width: 767px ) {
	.mm-casos {
		padding-block: 56px;
	}

	.mm-casos .mm-casos__rotulo {
		font-size: var( --h6-size );
		line-height: var( --h6-line );
		font-weight: var( --h6-weight );
	}

	.mm-casos > .mm-casos__rotulo + .mm-casos__titular,
	.mm-casos > .wp-block-group__inner-container > .mm-casos__rotulo + .mm-casos__titular {
		margin-block-start: var( --s-2 );
	}

	.mm-casos > :is( h1, h2, h3, h4, h5, h6 ) + .mm-casos__muro,
	.mm-casos > .wp-block-group__inner-container > :is( h1, h2, h3, h4, h5, h6 ) + .mm-casos__muro {
		margin-block-start: var( --s-5 );
	}

	/* Doblada con is-layout-grid por lo de siempre: el grid-template-columns
	   que genera el core tambien pesa una sola clase. */
	.mm-casos__muro.is-layout-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --s-4 );
	}

	.mm-casos__logo {
		height: 88px;
		padding: var( --s-4 );
	}

	.mm-casos .mm-cards .mm-tarjeta {
		min-height: 88px;
	}

	/* El texto llega hasta donde empieza el aro, como en el resto de la card, y
	   con el relleno de 12 que cabe a este ancho. */
	.mm-casos .mm-cards .mm-tarjeta__cuerpo {
		max-width: 62%;
		padding-inline-start: var( --s-3 );
	}

	.mm-casos .mm-cards .mm-tarjeta .mm-tarjeta__titulo {
		font-size: var( --body-sm-size );
		line-height: var( --body-sm-line );
	}

	/* Aqui el aro va dentro de la card, colgado de arriba: se suelta el bottom
	   de las cards en fila. */
	.mm-casos .mm-cards .mm-tarjeta__foto {
		top: 4px;
		bottom: auto;
		right: -6px;
		width: 80px;
		height: 80px;
	}
}

/* ------------------------------------------- Banda de contacto */

/*
 * Banda de contacto: el texto y la foto a un lado, el formulario al otro.
 * Figma: "Section · Contacto" (nodo 1288-9397) y su movil (1301-2194). Patron
 * "Contacto · solicitud de propuesta", de "Macmillan · Instituciones".
 *
 * La tarjeta del formulario trae su propio CSS con el bloque; aqui esta la
 * banda y la columna de la izquierda.
 */
.mm-contacto {
	padding-block: var( --s-10 );
}

/* Las dos columnas, con el hueco de 64 del frame. A que altura va una respecto
   de la otra lo dice el propio bloque de columnas: a media altura en las
   paginas de la primera version y arriba desde el prototipo del 30-sep-2026,
   donde el formulario, con el resumen de la simulacion, es bastante mas alto
   que el texto y centrado dejaba el titular flotando. */
.mm-banda .mm-contacto__fila.wp-block-columns {
	gap: var( --s-8 );
}

/*
 * La columna de la izquierda: el texto se corta en 520 y el titular en 480, que
 * es lo que hace que parta en dos lineas donde parte en el diseno. La foto no:
 * ocupa la columna entera.
 */
.mm-contacto__col > * {
	margin-block: 0;
}

.mm-contacto__titular {
	max-width: 480px;
}

.mm-contacto__texto {
	max-width: 520px;
	margin-block-start: 20px;
	font-size: var( --body-lg-size );
	line-height: var( --body-lg-line );
}

.mm-contacto__col > .mm-contacto__foto {
	margin-block-start: var( --s-6 );
}

/* La foto lleva alto fijo y se recorta, como las del metodo: el frame le da 395
   y la proporcion la pone el recorte, no la imagen. */
.mm-contacto__foto.wp-block-image img {
	display: block;
	width: 100%;
	height: 395px;
	object-fit: cover;
	border-radius: var( --rad-md );
}

/*
 * Movil (frame 1301-2194): una columna, la banda con 64 arriba y 48 abajo, y la
 * foto mas baja y con mas radio. Los dos cortes de siempre.
 */
/*
 * Por debajo del corte de la navbar, una columna (prototipo del 30-sep-2026). El
 * core no apila hasta 781, y entre medias a la tarjeta del formulario le
 * quedaban 300 de ancho: los campos de dos en dos no cabian y el boton se
 * salia. En rejilla, que es como se le gana al nowrap del core sin !important.
 *
 * Y la foto, solo con las dos columnas: apilada alargaba el camino hasta el
 * formulario sin aportar nada.
 */
@media ( max-width: 1099px ) {
	.mm-banda .mm-contacto__fila.wp-block-columns {
		display: grid;
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --s-6 );
	}

	.mm-contacto__col > .mm-contacto__foto {
		display: none;
	}
}

@media ( max-width: 781px ) {
	.mm-banda .mm-contacto__fila.wp-block-columns {
		gap: var( --s-5 );
	}
}

@media ( max-width: 767px ) {
	.mm-contacto {
		padding-block: var( --s-8 ) var( --s-7 );
	}

	.mm-contacto__titular,
	.mm-contacto__texto {
		max-width: none;
	}

	.mm-contacto__texto {
		font-size: var( --body-md-size );
		line-height: var( --body-md-line );
	}

	.mm-contacto__col > .mm-contacto__foto {
		margin-block-start: var( --s-5 );
	}

	.mm-contacto__foto.wp-block-image img {
		height: 210px;
		border-radius: var( --rad-md );
	}
}

/* ------------------------------------------- Casos en fichas desplegables */

/*
 * La variante de la banda de casos con fichas en vez del muro de logos. Figma:
 * "Section · Casos" (nodo 1525-10127) y su movil (1525-10237). Patron "Casos ·
 * fichas desplegables".
 *
 * La cabecera es la misma que la del muro —de ahi que comparta .mm-casos— y lo
 * unico propio de aqui es la lista. La ficha trae su CSS con el bloque.
 */
.mm-casos__lista {
	gap: var( --s-5 );
}

/* Del titular a la lista van 48, como en el muro. */
.mm-casos--fichas > :is( h1, h2, h3, h4, h5, h6 ) + .mm-casos__lista,
.mm-casos--fichas > .wp-block-group__inner-container > :is( h1, h2, h3, h4, h5, h6 ) + .mm-casos__lista {
	margin-block-start: var( --s-7 );
}

/* ---------------------------------- El recorrido del caso */

/*
 * Cuatro terminos en fila, cada uno con su marcador numerado. El numero sale de
 * counter( list-item ), el contador propio del navegador, por lo mismo que en
 * los pasos del metodo: asi lo que se ve y lo que anuncia un lector de pantalla
 * son el mismo numero. Y el counter-increment va escrito porque el <li> es flex
 * y al cambiarle el display deja de contar solo.
 */
.mm-caso__recorrido {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 26px;
	margin: 0;
	padding: 6px 0 0;
	list-style: none;
}

/*
 * La linea de puntos que une los marcadores. Va por detras y arranca en el
 * centro del primer circulo (14 desde el borde) y muere antes del ultimo, que es
 * lo que dibuja el frame.
 */
.mm-caso__recorrido::before {
	content: '';
	position: absolute;
	top: 20px;
	left: 14px;
	right: 98px;
	border-top: 1px dashed var( --line );
}

.mm-caso__recorrido li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	counter-increment: list-item;
	color: var( --text-soft );
	font-size: var( --body-sm-size );
	line-height: var( --body-sm-line );
}

.mm-caso__recorrido li::before {
	content: counter( list-item, decimal-leading-zero );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var( --accent );
	color: var( --text-inverse );
	font-size: var( --caption-size );
	line-height: 1;
	font-weight: var( --caption-weight );
}

/* El termino va en negrita dentro del mismo elemento de lista, con un salto de
   linea detras: asi cada paso es una sola pieza que se escribe de una vez. */
.mm-caso__recorrido strong {
	display: block;
	margin-block-end: 5px;
	color: var( --text );
	font-size: var( --h6-size );
	line-height: var( --h6-line );
	font-weight: var( --h6-weight );
}

/* ---------------------------------- El testimonio del caso */

/*
 * El mismo testimonio del resto del tema, con sus clases; lo unico distinto es
 * que aqui el pie va a la izquierda del bocadillo y no debajo. De ahi el
 * row-reverse: en el marcado el bocadillo sigue yendo primero, que es el orden
 * en que se lee.
 *
 * El grupo se declara con layout flex en el patron y no en flujo: a un tema
 * clasico WordPress le devuelve el div interno dentro de un grupo en flujo, y
 * con el por medio esta regla se aplicaba a un solo hijo y el pie seguia
 * cayendo debajo. Los grupos flex se libran de ese div desde 6.6.1.
 *
 * La clase va doblada con la del core porque su layout tambien escribe
 * flex-direction y gap, y su hoja va detras de esta.
 */
.mm-caso__testimonio.is-layout-flex {
	flex-direction: row-reverse;
	align-items: center;
	justify-content: center;
	gap: 43px;
	margin-block-start: 26px;

	/*
	 * El sitio del rabito. Cuelga del bocadillo con un pseudoelemento absoluto,
	 * asi que no ocupa alto: sin este relleno se salia 15px por debajo de la
	 * tarjeta y quedaba cortado sobre el fondo de la banda. Son los 42 que mide
	 * la caida, escritos aqui porque es esta caja la que tiene que reservarlos.
	 */
	padding-block-end: 42px;
}

.mm-caso__testimonio .is-style-bocadillo {
	max-width: 620px;
}

/* El pie pierde el margen de arriba, que aqui no va debajo de nada. */
.mm-caso__testimonio .mm-testimonio__pie {
	width: 343px;
	margin-block-start: 0;
}

/*
 * Movil (frames 1525-10248 y 1525-10274): el recorrido se pone en pie con un
 * rail vertical, y el testimonio vuelve a apilarse con el pie debajo.
 */
@media ( max-width: 767px ) {
	.mm-casos__lista {
		gap: var( --s-4 );
	}

	.mm-casos--fichas > :is( h1, h2, h3, h4, h5, h6 ) + .mm-casos__lista,
	.mm-casos--fichas > .wp-block-group__inner-container > :is( h1, h2, h3, h4, h5, h6 ) + .mm-casos__lista {
		margin-block-start: var( --s-5 );
	}

	.mm-caso__recorrido {
		grid-template-columns: minmax( 0, 1fr );
		gap: 0;
		padding-top: 0;
	}

	/* El rail: vertical y por el centro de los marcadores, que aqui miden 27. */
	.mm-caso__recorrido::before {
		top: 14px;
		bottom: 14px;
		left: 13px;
		right: auto;
		width: 1px;
		border-top: 0;
		background: var( --line );
	}

	/*
	 * Aqui el marcador va al lado y el termino encima del texto, asi que el
	 * elemento deja de ser flex: en una fila flex el marcador, la negrita y el
	 * texto son tres piezas hermanas y se colocaban las tres en linea. En
	 * bloque, el marcador se aparta con posicion absoluta y el resto cae solo:
	 * la negrita en su linea y el texto debajo, como en escritorio.
	 *
	 * Los 41 del relleno son el marcador de 27 mas los 14 de hueco.
	 */
	.mm-caso__recorrido li {
		display: block;
		padding: 12px 0 12px 41px;
		font-size: var( --caption-size );
		line-height: var( --caption-line );
		font-weight: var( --caption-weight );
	}

	.mm-caso__recorrido li:first-child {
		padding-block-start: 0;
	}

	.mm-caso__recorrido li::before {
		position: absolute;
		left: 0;
		top: 12px;
		width: 27px;
		height: 27px;
	}

	.mm-caso__recorrido li:first-child::before {
		top: 0;
	}

	.mm-caso__recorrido strong {
		margin-block-end: 4px;
		font-size: var( --body-sm-size );
		line-height: var( --body-sm-line );
		font-weight: 600;
	}

	.mm-caso__testimonio.is-layout-flex {
		flex-direction: column;
		align-items: stretch;
		gap: var( --s-5 );
		margin-block-start: 20px;
	}

	.mm-caso__testimonio .mm-testimonio__pie {
		width: auto;
	}
}

/* =========================================== Landing de Circle (30-sep-2026)
 *
 * La segunda version de la landing de instituciones. La referencia es el
 * prototipo HTML del 30-sep-2026 y sus tres documentos, que mandan sobre el
 * Figma donde se contradicen. Los numeros de aqui salen de su hoja; donde el
 * sistema tiene un token o un corte equivalente, va el del sistema.
 *
 * Los cortes son los de siempre —1099, 781 y 767— y no los 1000, 900 y 760 del
 * prototipo, que eran los suyos.
 */

/*
 * Una pieza estrecha arrimada a la izquierda del contenido, y no centrada.
 *
 * .mm-banda centra a sus hijos con margin-inline: auto, que esta bien mientras
 * midan el ancho entero y descoloca en cuanto uno se acota: un titular de 731
 * se iria al centro de la banda. El margen de la izquierda es lo que le sobra a
 * su contenedor por encima del ancho maximo, partido por dos —o sea, donde
 * empieza el contenido—, y cero cuando no sobra nada.
 *
 * En la web ese resto es siempre cero, porque el grupo mete su contenedor
 * interno ya centrado; en el lienzo los bloques cuelgan directos de la banda y
 * ahi es donde hace falta la cuenta.
 */
.mm-banda.mm-cabecera-inst--foto h1,
.mm-banda.mm-simulador > :is( h2, p ),
.mm-banda.mm-simulador > .wp-block-group__inner-container > :is( h2, p ),
.mm-banda .mm-fases.wp-block-columns {
	margin-inline: max( 0px, calc( ( 100% - var( --ancho-max ) ) / 2 ) ) auto;
}

/*
 * Los saltos a las secciones, desde cualquier enlace de la pagina y no solo
 * desde la barra de pestañas (que hace su propia cuenta en pestanas.js): el
 * destino se para justo debajo de la navbar y de la barra, que van pegadas
 * arriba. La barra mide 53.
 *
 * A ras y sin aire de mas, igual que el salto de la barra: la pestaña marcada
 * es la de la seccion que ya ha pasado esa linea, y con 16 de aire el destino
 * se quedaba por debajo y la barra seguia marcando la seccion anterior. El
 * aire lo pone el relleno de cada banda.
 *
 * Y el desplazamiento es suave, salvo para quien ha pedido menos movimiento.
 * Solo en las paginas con barra de anclas, que son las que saltan a secciones.
 */
.mm-flujo:has( .mm-pestanas--anclas ) [id] {
	scroll-margin-top: calc( var( --mm-navbar-alto, 82px ) + 53px );
}

/*
 * Mientras la barra no esta pegada lleva su aire de arriba —16, y 8 en movil—,
 * que pierde al pegarse: todo lo de debajo sube eso mismo justo despues del
 * salto, y el destino acababa metido debajo de la barra. Se le suma al margen,
 * y aterriza en el mismo sitio se salte desde donde se salte. Lo que encoge la
 * navbar al colapsarse no hace falta sumarlo: va dentro de su variable.
 */
.mm-flujo:has( .mm-pestanas--anclas:not( .is-pegada ) ) [id] {
	scroll-margin-top: calc( var( --mm-navbar-alto, 82px ) + 53px + var( --s-4 ) );
}

@media ( max-width: 767px ) {
	.mm-flujo:has( .mm-pestanas--anclas:not( .is-pegada ) ) [id] {
		scroll-margin-top: calc( var( --mm-navbar-alto, 72px ) + 53px + var( --s-2 ) );
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	html:has( .mm-pestanas--anclas ) {
		scroll-behavior: smooth;
	}
}

/* ------------------------------------------- Cabecera sobre foto */

/*
 * La cabecera de instituciones con una foto a sangre de fondo («Hero · Cabecera
 * 3» del prototipo). Patron "Cabecera · titular y video sobre foto".
 *
 * Todo lo de la banda —el centrado vertical, los adornos de fondo— es de
 * .mm-cabecera-inst. Aqui cambia el alto, 409 en vez de 592, y el titular, que
 * se acota a los 731 del prototipo para que parta en tres lineas y no pise las
 * caras de la foto.
 */
.mm-cabecera-inst--foto {
	min-height: 409px;
}

.mm-banda.mm-cabecera-inst--foto h1 {
	max-width: min( 731px, 100% );
}

/* La foto lleva a la gente a la derecha y lo oscuro a la izquierda. En
   pantallas anchas, si sobra, que sobre por la izquierda y la gente se quede
   en su sitio. */
.mm-cabecera-inst--foto .mm-banda__fondo img {
	object-position: right center;
}

/* En tablet es al reves: la foto se recorta, y lo que tiene que quedarse es lo
   oscuro, que es donde va el titular. Arrimada a la derecha, el texto caia
   encima de las caras. */
@media ( max-width: 1099px ) {
	.mm-cabecera-inst--foto .mm-banda__fondo img {
		object-position: left center;
	}
}

/*
 * En movil entra la version vertical de la foto, con el circulo rojo arriba a
 * la derecha, y la banda crece para que el titular caiga sobre lo oscuro. El
 * titular baja un escalon mas que la escala de movil: a 39 ocupaba siete
 * lineas.
 */
@media ( max-width: 767px ) {
	.mm-cabecera-inst--foto {
		min-height: 480px;
		padding-block: 72px;
	}

	.mm-cabecera-inst--foto .mm-banda__fondo img {
		object-position: center;
	}

	.mm-banda.mm-cabecera-inst--foto h1 {
		font-size: var( --h3-size );
		line-height: var( --h3-line );
	}
}

/* ------------------------------------------- Texto, boton y foto */

/*
 * La banda de texto e imagen con una fotografia de ambiente («Texto + imagen»
 * del prototipo). Patron "Texto, boton y foto".
 *
 * Sobre .mm-texto-img, que pone el relleno de arriba, la fila y el hueco. Lo
 * que cambia: 64 abajo, porque la seccion de debajo es del mismo color y entre
 * las dos ya suman bastante; 24 entre las tres piezas del texto; y la foto
 * recortada a su caja, que aqui no es un producto que haya que ver entero.
 */
.mm-texto-img--foto {
	padding-block-end: var( --s-8 );
}

.mm-texto-img--foto .mm-texto-img__fila .wp-block-column > * + * {
	margin-block-start: var( --s-5 );
}

.mm-texto-img--foto .mm-texto-img__foto.wp-block-image img {
	aspect-ratio: 16 / 11;
	object-fit: cover;
}

/*
 * Por debajo del corte de la navbar, una columna: el texto arriba y la foto
 * debajo. El core no apila hasta 781, y en tablet las dos columnas dejaban el
 * titular en una tira de seis lineas al lado de la foto. En rejilla, que es como
 * se le gana al nowrap del core sin !important, igual que en la banda de
 * contacto.
 *
 * Apilada, la foto ocupa el ancho entero: mas apaisada, para no comerse la
 * pantalla.
 */
@media ( max-width: 1099px ) {
	.mm-banda.mm-texto-img--foto .mm-texto-img__fila.wp-block-columns {
		display: grid;
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --s-6 );
	}

	.mm-texto-img--foto .mm-texto-img__foto.wp-block-image img {
		aspect-ratio: 16 / 9;
	}
}

@media ( max-width: 767px ) {
	.mm-texto-img--foto {
		padding-block: var( --s-8 ) var( --s-7 );
	}
}

/* ------------------------------------------- Banda de retos */

/*
 * La banda de «¿Que necesita tu centro?». Patron "Retos · tarjetas con
 * casilla". Las tarjetas son el bloque macmillan/circle-retos y traen su hoja;
 * aqui solo esta la banda: el relleno —64 arriba, que viene de una seccion de
 * su mismo color, y 96 abajo— y la bajada acotada.
 */
.mm-retos-banda {
	padding-block: var( --s-8 ) var( --s-10 );
}

.mm-retos-banda > p,
.mm-retos-banda > .wp-block-group__inner-container > p {
	max-width: 760px;
}

/* En movil, entre esta banda y la del simulador sumaban 192 de aire: un cuarto
   de pantalla en blanco. Se queda en la mitad, solo en esta union. */
@media ( max-width: 767px ) {
	.mm-retos-banda {
		padding-block-end: var( --s-7 );
	}
}

/* ------------------------------------------- Banda del simulador */

/*
 * La banda de «¿Como seria el Circle de tu centro?». Patron "Simulador Circle".
 * El simulador es el bloque macmillan/circle-simulador y trae su hoja; aqui, la
 * banda y su cabecera, que va a la izquierda y acotada a 820.
 */
.mm-simulador {
	padding-block: var( --s-10 );
}

.mm-banda.mm-simulador > :is( h2, p ),
.mm-banda.mm-simulador > .wp-block-group__inner-container > :is( h2, p ) {
	max-width: min( 820px, 100% );
}

/* De la bajada al simulador, 24 y no los 32 de una banda. */
.mm-simulador > .mm-sim,
.mm-simulador > .wp-block-group__inner-container > .mm-sim {
	margin-block-start: var( --s-5 );
}

@media ( max-width: 767px ) {
	.mm-simulador {
		padding-block: var( --s-7 ) var( --s-8 );
	}
}

/* ------------------------------------------- Que incluye Circle */

/*
 * La banda de «Todo lo que puede incluir el Circle de tu centro». Patron "Que
 * incluye · cajas con pestañas": dos cajas blancas, una por area, con sus
 * pestañas en forma de chip y un panel de imagen y texto por pestaña.
 *
 * Las pestañas son core/tabs, asi que el cambio de panel, el teclado y el aria
 * son suyos, como en el material de muestra. Aqui solo se les da forma.
 */
.mm-incluye {
	padding-block: var( --s-10 );
}

/* El titular y la bajada, repartidos: sin esto, a media anchura el titular
   dejaba una palabra sola en la segunda linea. */
.mm-incluye > :is( h2, p ),
.mm-incluye > .wp-block-group__inner-container > :is( h2, p ) {
	text-wrap: balance;
}

.mm-incluye > p,
.mm-incluye > .wp-block-group__inner-container > p {
	max-width: 760px;
}

/*
 * La caja, y la escala de color de sus chips: el tono oscuro para la letra y
 * el borde del seleccionado, y tres claros para el fondo al pasar, el relleno
 * del seleccionado y el borde en reposo. En la escala clara a proposito, para
 * que un chip no se confunda con un boton de llamada, que es rojo solido.
 *
 * Los dos grises que no son token (#e3e3e3 y #f7f7f7) son los del prototipo: la
 * coleccion no tiene pasos intermedios entre surface-alt y line.
 */
.mm-incluye__caja {
	padding: var( --s-7 );
	border-radius: var( --rad-xl );
	background: var( --surface );
}

.mm-incluye__caja--met {
	--mm-chip: var( --accent-active );
	--mm-chip-suave: var( --accent-bg );
	--mm-chip-relleno: var( --accent-bg-strong );
	--mm-chip-linea: var( --accent-bg-strong );
}

.mm-incluye__caja--com {
	--mm-chip: var( --text );
	--mm-chip-suave: var( --surface-alt );
	--mm-chip-relleno: #e3e3e3;
	--mm-chip-linea: var( --line );
}

.mm-incluye__caja--aco {
	--mm-chip: var( --text-soft );
	--mm-chip-suave: #f7f7f7;
	--mm-chip-relleno: var( --surface-alt );
	--mm-chip-linea: var( --surface-alt );
}

/* De la cabecera a las pestañas, 32. Doblada con la clase del core, que escribe
   el gap del layout flex en una clase suya. */
.mm-incluye__caja.is-layout-flex {
	gap: var( --s-6 );
}

.mm-incluye__caja.is-layout-flex > * {
	margin-block: 0;
}

/*
 * La cabecera: el distintivo del area y, a su lado, el titular y la entradilla.
 * Una rejilla de tres piezas sueltas —por lo mismo que el pie de un testimonio—
 * en vez de dos cajas anidadas: en movil el distintivo y el titular se quedan en
 * la misma fila y la entradilla baja a todo el ancho, sin tocar el marcado.
 */
.mm-banda .mm-incluye__cabecera.is-layout-grid {
	grid-template-columns: auto minmax( 0, 1fr );
	gap: var( --s-1 ) var( --s-4 );
}

.mm-incluye__cabecera > * {
	margin: 0;
}

.mm-incluye__icono {
	grid-row: 1 / span 2;
	align-self: center;
}

.mm-incluye__icono.wp-block-image img {
	display: block;
	width: 48px;
	height: 48px;
}

/* El titular de la caja, al paso H4: el nivel lo manda el documento —cuelga del
   h2 de la banda— y el tamaño, el diseño. */
.mm-incluye .mm-incluye__cabecera h3 {
	align-self: end;
	font-size: var( --h4-size );
	line-height: var( --h4-line );
	font-weight: var( --h4-weight );
}

.mm-incluye__cabecera p {
	align-self: start;
	line-height: 1.5;
}

/* ---- Las pestañas, en forma de chip ---- */

.mm-incluye .wp-block-tab-list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --s-3 );
	margin-block-end: var( --s-6 );
}

/* El borde existe en todos los estados, para que el chip no cambie de tamaño al
   seleccionarse; descontado del relleno, como en los botones. */
.mm-incluye .wp-block-tab-list button {
	padding: calc( var( --s-3 ) - 2px ) calc( var( --s-5 ) - 2px );
	border: 2px solid var( --mm-chip-linea );
	border-radius: var( --rad-pill );
	background: var( --surface );
	color: var( --mm-chip );
	font-family: var( --font );
	font-size: var( --body-size );
	line-height: var( --body-line );
	font-weight: 600;
	transition:
		background-color var( --motion-link ) var( --motion-ease ),
		border-color var( --motion-link ) var( --motion-ease );
}

/* La rayita con la que el core subraya la pestaña activa: aqui se rellena. */
.mm-incluye .wp-block-tab-list button::before {
	content: none;
}

.mm-incluye .wp-block-tab-list button:not( [aria-selected='true'] ):hover {
	background: var( --mm-chip-suave );
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/*
 * El borde oscuro del seleccionado no es opcional. El relleno claro apenas
 * contrasta con el blanco de la caja (el rosa, 1,4:1), asi que no puede ser la
 * unica señal; el borde en el tono oscuro (7,8:1) es el que hace que se
 * distinga.
 */
.mm-incluye .wp-block-tab-list button[aria-selected='true'] {
	border-color: var( --mm-chip );
	background: var( --mm-chip-relleno );
}

.mm-incluye .wp-block-tab-list button:focus-visible {
	outline: 3px solid var( --focus );
	outline-offset: 2px;
}

/* ---- El panel: imagen y texto ---- */

/*
 * Cinco partes para la imagen y seis para el texto, con 64 de hueco. En rejilla
 * y no con los anchos de columna del core: asi el panel sin imagen se queda en
 * una columna con una sola regla, y el apilado lo decide el corte de la banda y
 * no el 781 del core.
 */
.mm-banda .mm-itinerario.wp-block-columns {
	display: grid;
	grid-template-columns: minmax( 0, 5fr ) minmax( 0, 6fr );
	gap: var( --s-8 );
	align-items: start;
	margin-block-end: 0;
}

/*
 * Un panel sin imagen. El hueco de imagen vacio no pinta nada en la web —lo
 * hace asi el propio core— y deja su columna sin nada dentro: se quita, y el
 * texto ocupa el ancho. En el lienzo el hueco si esta, para poder elegirla.
 */
.mm-itinerario > .wp-block-column:not( :has( * ) ) {
	display: none;
}

/* La columna del texto se queda con las dos pistas. Con su propia regla y no
   cambiando la rejilla: eso pediria un :has() dentro de otro, que no existe. */
/* Y acotada: a los 1184 de la caja una linea de texto no se lee. */
.mm-itinerario > .wp-block-column:not( :has( * ) ) + .wp-block-column {
	grid-column: 1 / -1;
	max-width: 720px;
}

/* La imagen, entera y a su proporcion: la de un itinerario lleva informacion
   —el camino y los materiales de cada etapa— y recortarla la pierde. */
.mm-itinerario__imagen.wp-block-image {
	margin: 0;
}

.mm-itinerario__imagen.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --rad-lg );
}

.mm-itinerario > .wp-block-column > * {
	margin-block: 0;
}

.mm-itinerario > .wp-block-column > * + * {
	margin-block-start: var( --s-2 );
}

/*
 * El titular del panel, al paso H5. Lo que lleva en negrita es el nombre del
 * camino («Builders Path»), que sale encima y en pequeño: va dentro del titular
 * para que quien navega por encabezados lo oiga con el.
 */
.mm-incluye .mm-itinerario h4 {
	font-size: var( --h5-size );
	line-height: var( --h5-line );
	font-weight: var( --h5-weight );
}

.mm-incluye .mm-itinerario h4 strong {
	display: block;
	margin-block-end: 2px;
	color: var( --text-soft );
	font-size: var( --body-sm-size );
	line-height: 1.4;
	font-weight: 500;
}

/* Las etapas que cubre, en texto de verdad. */
.mm-itinerario .mm-itinerario__etapas {
	margin-block-start: 14px;
	font-size: var( --body-sm-size );
	line-height: 1.4;
	font-weight: 600;
}

/* Los puntos clave, con el punto rojo de la landing. */
.mm-itinerario .mm-itinerario__claves {
	display: grid;
	gap: var( --s-2 );
	margin-block-start: var( --s-4 );
	padding: 0;
	list-style: none;
}

.mm-itinerario__claves li {
	display: flex;
	align-items: baseline;
	gap: var( --s-3 );
	line-height: 1.5;
}

.mm-itinerario__claves li::before {
	content: '';
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var( --accent );
	transform: translateY( -2px );
}

.mm-itinerario .mm-itinerario__marcas {
	margin-block-start: var( --s-4 );
	font-size: var( --body-sm-size );
	line-height: var( --body-sm-line );
}

/* Por debajo del corte de la navbar la imagen sube encima del texto y la caja
   suelta relleno: 32 por los cuatro lados, el mismo del panel «Tu propuesta
   Circle» del simulador, que en tablet queda justo encima con el mismo ancho.
   Con los 24 del prototipo el contenido se veia pegado al borde al lado de el. */
@media ( max-width: 1099px ) {
	.mm-incluye__caja {
		padding: var( --s-6 );
	}

	.mm-banda .mm-itinerario.wp-block-columns {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --s-5 );
	}
}

/*
 * Movil: la banda a 64, la caja con menos radio y los chips mas pequeños, que
 * envuelven a las lineas que hagan falta —nunca scroll horizontal—. Los 15 de
 * su letra son los del prototipo.
 */
@media ( max-width: 767px ) {
	.mm-incluye {
		padding-block: var( --s-8 );
	}

	/* En movil el relleno sigue en 24, como estaba: ahi el ancho es lo que
	   falta, y los 32 son solo para tablet. */
	.mm-incluye__caja {
		padding: var( --s-5 );
		border-radius: var( --rad-lg );
	}

	/* El titular de la caja, al paso H5 (20): el mismo que lleva en movil el del
	   formulario, «Solicita una propuesta de asesoramiento». A 25 partia en dos
	   lineas al lado del distintivo y se comia la caja. */
	.mm-incluye .mm-incluye__cabecera h3 {
		font-size: var( --h5-size );
		line-height: var( --h5-line );
	}

	.mm-incluye__caja.is-layout-flex {
		gap: var( --s-5 );
	}

	.mm-banda .mm-incluye__cabecera.is-layout-grid {
		gap: var( --s-2 ) var( --s-3 );
	}

	.mm-incluye__icono {
		grid-row: auto;
	}

	.mm-incluye__icono.wp-block-image img {
		width: 36px;
		height: 36px;
	}

	.mm-incluye .mm-incluye__cabecera h3 {
		align-self: center;
	}

	.mm-incluye__cabecera p {
		grid-column: 1 / -1;
	}

	.mm-incluye .wp-block-tab-list {
		gap: var( --s-2 );
		margin-block-end: var( --s-5 );
	}

	.mm-incluye .wp-block-tab-list button {
		padding: 8px 14px;
		font-size: 15px;
	}
}

/* ------------------------------------------- Metodo en tres fases */

/*
 * La banda del metodo con sus tres fases consecutivas («Nuestro metodo» del
 * prototipo). Patron "Metodo · tres fases consecutivas".
 *
 * El relleno y el degradado son los de .mm-metodo. Aqui van la cabecera —el
 * titular y la unica foto del bloque— y la linea de tiempo.
 */
.mm-banda .mm-metodo__cabecera.wp-block-columns {
	gap: var( --s-7 );
}

.mm-metodo__cabecera .wp-block-column > * {
	margin-block: 0;
}

.mm-metodo__cabecera .wp-block-column > * + * {
	margin-block-start: var( --s-4 );
}

/*
 * La foto se recorta a la caja del prototipo, 616x300. Con proporcion y no con
 * un alto fijo: en el lienzo core/image le escribe height: auto EN LINEA a la
 * imagen, y contra eso un alto de hoja no puede nada —la foto salia a 444 en el
 * editor y a 300 en la web—. La proporcion si convive con el height: auto.
 */
.mm-metodo__foto.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 616 / 300;
	object-fit: cover;
	border-radius: var( --rad-xl );
}

/* ---- La linea de tiempo ---- */

/*
 * Tres columnas iguales con 32 de hueco, en rejilla: el paso a vertical lo
 * decide el corte de la navbar y no el 781 del core, que dejaria tres tarjetas
 * de 230 entre medias.
 *
 * La numeracion es de la FASE y sale de un contador: añadir una cuarta la
 * numera sola, y los pasos de dentro van sin numero para que no haya dos
 * numeraciones compitiendo.
 */
.mm-banda .mm-fases.wp-block-columns {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --s-6 );
	counter-reset: mm-fase;
}

/* De la cabecera a la linea, 48. */
.mm-metodo--fases > .mm-fases,
.mm-metodo--fases > .wp-block-group__inner-container > .mm-fases {
	margin-block-start: var( --s-7 );
}

.mm-fases__fase {
	position: relative; /* el ancla del trazo */
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	counter-increment: mm-fase;
}

/* El marcador: el numero de la fase en un circulo rojo con su halo. Decoracion
   para la vista; el orden lo dan el documento y el «Fase N» de cada titular. */
.mm-fases__fase::before {
	content: counter( mm-fase );
	flex: none;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var( --accent );
	box-shadow: 0 0 0 6px rgba( 255, 255, 255, .12 );
	color: var( --text-inverse );
	font-size: var( --h5-size );
	line-height: 1;
	font-weight: 600;
}

/*
 * El trazo hacia la fase siguiente: sale a 16 del marcador y cruza el hueco
 * entre columnas hasta quedarse a 12 del siguiente. La ultima fase no lleva.
 *
 * Una sola punta de flecha, en el tramo que llega a la ultima: los anteriores
 * son linea, y asi se lee como un unico camino y no como pasos sueltos.
 */
.mm-fases__fase:not( :last-child )::after {
	content: '';
	position: absolute;
	top: 20px;
	left: 72px;
	right: -20px;
	height: 16px;
	background: linear-gradient( rgba( 255, 255, 255, .45 ), rgba( 255, 255, 255, .45 ) ) left center / 100% 2px no-repeat;
}

.mm-fases__fase:nth-last-child( 2 )::after {
	background:
		url( ../images/fase-punta.svg ) right center / 9px 16px no-repeat,
		linear-gradient( rgba( 255, 255, 255, .45 ), rgba( 255, 255, 255, .45 ) ) left center / calc( 100% - 2px ) 2px no-repeat;
}

/* La tarjeta, blanca sobre la banda oscura: recupera el color del texto. Las
   tres miden lo mismo, que la columna es flexible y la tarjeta crece. Los 28 y
   los 20 son los del prototipo. */
.mm-fases__tarjeta {
	flex: 1;
	padding: 28px 28px 20px;
	border-radius: var( --rad-xl );
	background: var( --surface );
	box-shadow: var( --sombra-md );
	color: var( --text );
}

.mm-fases__tarjeta.is-layout-flex {
	justify-content: flex-start;
	gap: var( --s-3 );
}

.mm-fases__tarjeta > * {
	margin-block: 0;
}

/* El titular de la fase, al paso H5. */
.mm-fases .mm-fases__tarjeta h3 {
	font-size: var( --h5-size );
	line-height: var( --h5-line );
	font-weight: var( --h5-weight );
}

/* «Fase 1»: va en negrita dentro del titular y aqui sale encima, en rojo y
   versalitas. Sobre blanco, 5,0:1. */
.mm-fases .mm-fases__tarjeta h3 strong {
	display: block;
	margin-block-end: 6px;
	color: var( --accent );
	font-size: var( --body-sm-size );
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Los pasos: en regular, con un punto rojo y sin numero. */
.mm-fases .mm-fases__pasos {
	padding: 0;
	list-style: none;
}

.mm-fases__pasos li {
	display: flex;
	align-items: baseline;
	gap: var( --s-3 );
	padding-block: 6px;
	line-height: 1.5;
}

.mm-fases__pasos li::before {
	content: '';
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --accent );
	transform: translateY( -2px );
}

/*
 * Con las tres fases en fila, el titular reserva dos lineas para que las tres
 * listas empiecen a la misma altura: el rotulo, sus 6 de hueco y dos lineas de
 * titular.
 */
@media ( min-width: 1100px ) {
	.mm-fases .mm-fases__tarjeta h3 {
		min-height: calc( var( --body-sm-size ) * 1.4 + 6px + 2 * var( --h5-size ) * var( --h5-line ) );
	}
}

/*
 * La entrada encadenada 1 → 2 → 3: aparece la fase, su trazo se dibuja hacia la
 * siguiente y, cuando llega, aparece esa. El estado de antes lo pone el script
 * (assets/js/fases.js) con is-antes, nunca esta hoja: si el script no corre, las
 * tres estan a la vista desde el principio.
 *
 * El trazo se descubre con clip-path y no escalando, que deformaria la punta de
 * flecha mientras crece. La espera de cada fase viaja en --mm-fase-espera, y el
 * trazo sale 250 ms despues de su fase.
 */
@media ( prefers-reduced-motion: no-preference ) {
	.mm-fases__fase {
		transition:
			opacity 450ms ease var( --mm-fase-espera, 0ms ),
			transform 450ms var( --motion-ease ) var( --mm-fase-espera, 0ms );
	}

	.mm-fases__fase::after {
		clip-path: inset( 0 );
		transition: clip-path 450ms cubic-bezier( .45, 0, .55, 1 ) calc( var( --mm-fase-espera, 0ms ) + 250ms );
	}

	.mm-fases__fase.is-antes {
		opacity: 0;
		transform: translateY( 14px );
	}

	.mm-fases__fase.is-antes::after {
		clip-path: inset( 0 100% 0 0 );
	}
}

/*
 * Por debajo del corte de la navbar la linea se pone en pie: los marcadores en
 * una columna a la izquierda y el trazo bajando hasta la fase siguiente. El
 * salto de linea escrito en el titular de la segunda fase se apaga, que aqui el
 * titular tiene todo el ancho.
 */
@media ( max-width: 1099px ) {
	.mm-banda .mm-fases.wp-block-columns {
		grid-template-columns: minmax( 0, 1fr );
		gap: 0;
		max-width: 640px;
	}

	.mm-fases__fase {
		display: grid;
		grid-template-columns: 44px minmax( 0, 1fr );
		column-gap: var( --s-4 );
		align-items: start;
	}

	.mm-fases__fase::before {
		width: 44px;
		height: 44px;
		font-size: var( --h6-size );
	}

	.mm-fases__fase:not( :last-child )::after {
		top: 56px;
		bottom: 0;
		left: 14px;
		right: auto;
		width: 16px;
		height: auto;
		background: linear-gradient( rgba( 255, 255, 255, .45 ), rgba( 255, 255, 255, .45 ) ) center top / 2px 100% no-repeat;
	}

	.mm-fases__fase:nth-last-child( 2 )::after {
		background:
			url( ../images/fase-punta-abajo.svg ) center bottom / 16px 9px no-repeat,
			linear-gradient( rgba( 255, 255, 255, .45 ), rgba( 255, 255, 255, .45 ) ) center top / 2px calc( 100% - 2px ) no-repeat;
	}

	.mm-fases__tarjeta {
		margin-block-end: var( --s-5 );
		padding: var( --s-5 ) var( --s-5 ) 18px;
	}

	.mm-fases__fase:last-child .mm-fases__tarjeta {
		margin-block-end: 0;
	}

	.mm-fases .mm-fases__tarjeta h3 br {
		display: none;
	}
}

@media ( max-width: 1099px ) and ( prefers-reduced-motion: no-preference ) {
	.mm-fases__fase.is-antes::after {
		clip-path: inset( 0 0 100% 0 );
	}
}

@media ( max-width: 781px ) {
	.mm-banda .mm-metodo__cabecera.wp-block-columns {
		gap: var( --s-5 );
	}

	/* Apilada ocupa el ancho entero: algo mas alta, que si no queda en una tira. */
	.mm-metodo__foto.wp-block-image img {
		aspect-ratio: 16 / 10;
	}
}

/* ------------------------------------------- Casos con testimonio */

/*
 * La banda de casos con un testimonio a un lado y el muro de logos al otro
 * («Casos de exito» del prototipo). Patron "Casos · testimonio y muro de
 * centros".
 *
 * La cabecera y las cajas de los logos son las de .mm-casos; el testimonio, el
 * de .mm-testimonios, que la banda tambien lleva. Aqui solo esta la fila.
 *
 * 620 de testimonio —su ancho en el resto del tema—, 48 de hueco y el muro en el
 * resto. En rejilla, para apilar en el corte de la navbar: entre medias las dos
 * mitades no dan ni para el bocadillo ni para dos logos.
 */
.mm-banda .mm-casos__fila.wp-block-columns {
	display: grid;
	grid-template-columns: minmax( 0, 620px ) minmax( 0, 1fr );
	gap: var( --s-7 );
	align-items: center;
}

/* Del titular a la fila van 48, como al muro en la primera version. */
.mm-casos--testimonio > :is( h1, h2, h3, h4, h5, h6 ) + .mm-casos__fila,
.mm-casos--testimonio > .wp-block-group__inner-container > :is( h1, h2, h3, h4, h5, h6 ) + .mm-casos__fila {
	margin-block-start: var( --s-7 );
}

/*
 * El muro, de dos en dos en todas las anchuras y con las cajas a los 232 del
 * frame, centradas en su mitad. Con tres clases para ganarle a las reglas del
 * muro suelto, que lo pasa a tres por fila en tablet.
 */
.mm-casos--testimonio .mm-casos__muro.is-layout-grid {
	grid-template-columns: repeat( 2, minmax( 0, 232px ) );
	justify-content: center;
}

@media ( max-width: 1099px ) {
	.mm-banda .mm-casos__fila.wp-block-columns {
		grid-template-columns: minmax( 0, 1fr );
		justify-items: center;
	}

	.mm-casos__fila > .wp-block-column {
		width: 100%;
		max-width: 620px;
	}

	.mm-casos--testimonio .mm-casos__muro.is-layout-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --s-4 );
		max-width: 520px;
		margin-inline: auto;
	}
}

/* ------------------------------------------- Preguntas frecuentes */

/*
 * Banda de preguntas frecuentes («Preguntas frecuentes» del prototipo). Patron
 * "Preguntas frecuentes": un titular y una pregunta por tarjeta.
 *
 * El acordeon es el core/accordion, como el de la lista de ISBN: el toggle, la
 * animacion y el aria son suyos. Aqui va la forma, con .mm-faq delante por lo
 * mismo que alli: un acordeon en otra pagina no tiene por que ser esto.
 */
.mm-faq {
	padding-block: var( --s-10 );
}

.mm-faq .wp-block-accordion {
	display: grid;
	gap: var( --s-4 );
}

/* En el lienzo cada pregunta es un bloque, con los 28 de margen del editor: el
   hueco entre ellas es el de la rejilla. */
.mm-faq .wp-block-accordion > * {
	margin-block: 0;
}

/* El contorno del hover existe siempre, transparente, para que la transicion no
   arranque en negro; y en outline, que no mueve el contenido. */
.mm-faq .wp-block-accordion-item {
	border-radius: var( --rad-lg );
	background: var( --surface );
	outline: 2px solid transparent;
	overflow: hidden;
}

.mm-faq .wp-block-accordion-item:has( .wp-block-accordion-heading__toggle:hover ) {
	outline-color: var( --accent-bg-strong );
}

/* La pregunta, al paso H6: es un h3 por el documento, no por el tamaño. */
.mm-faq .wp-block-accordion-heading {
	margin: 0;
	font-size: var( --h6-size );
	line-height: 1.4;
	font-weight: var( --h6-weight );
}

.mm-faq .wp-block-accordion-heading__toggle {
	gap: var( --s-5 );
	min-height: 76px;
	padding: var( --s-5 ) 40px;
}

.mm-faq .wp-block-accordion-heading__toggle:focus-visible {
	outline: 3px solid var( --focus );
	outline-offset: -4px;
	border-radius: var( --rad-lg );
}

/* El icono: el signo mas del core se apaga y se pinta el chevron del tema, en
   mascara, como en la lista de ISBN. */
.mm-faq .wp-block-accordion-heading__toggle-icon {
	flex: none;
	width: 32px;
	height: 32px;
	font-size: 0;
	background: currentColor;
	-webkit-mask: url( ../images/chevron.svg ) center / contain no-repeat;
	mask: url( ../images/chevron.svg ) center / contain no-repeat;
	transform: none;
}

/* Doblada para ganarle al rotate(45deg) del core, que pesa (0,3,0). */
.mm-faq .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	transform: rotate( 180deg );
}

/* La respuesta, alineada con la pregunta. Cerrado, el core le quita el relleno
   con su propio !important. */
.mm-faq .wp-block-accordion-panel {
	padding: 0 40px var( --s-5 );
	color: var( --text-soft );
}

.mm-faq .wp-block-accordion-panel > * {
	margin-block: 0;
}

.mm-faq .wp-block-accordion-panel > * + * {
	margin-block-start: var( --s-4 );
}

@media ( max-width: 767px ) {
	.mm-faq {
		padding-block: var( --s-8 );
	}

	.mm-faq .wp-block-accordion-heading {
		font-size: var( --body-size );
	}

	.mm-faq .wp-block-accordion-heading__toggle {
		gap: var( --s-4 );
		padding: 20px var( --s-5 );
	}

	.mm-faq .wp-block-accordion-panel {
		padding-inline: var( --s-5 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mm-incluye .wp-block-tab-list button {
		transition: none;
	}
}

/* ------------------------------- Los titulares de la landing, por debajo del escritorio */

/*
 * El prototipo encoge los titulares con el ancho —clamp(30px, 4.4vw, 49px) el
 * h1 y clamp(26px, 3.4vw, 39px) los h2—, y aqui se quedaban en el paso de
 * escritorio hasta 767: a 900 un h2 media 39 donde el prototipo pinta 31, y en
 * movil 31 donde pinta 26. Se nota en todas las bandas.
 *
 * No se copia el clamp: la escala es la del sitio, con sus pasos. En tablet, un
 * paso menos —h1 a H2 (39) y h2 a H3 (31)—, que es por donde pasa el prototipo
 * a esos anchos; y en movil lo que ya hacen las demas bandas del sistema, el h2
 * a H4 (25). El h1 de movil ya estaba en H3 (31), arriba, con la cabecera.
 *
 * Solo las bandas de esta landing: en el resto del sitio el titular no baja en
 * tablet, y eso no lo cambia una pagina.
 */
@media ( max-width: 1099px ) {
	.mm-banda.mm-cabecera-inst--foto h1 {
		font-size: var( --h2-size );
		line-height: var( --h2-line );
	}

	.mm-banda:is( .mm-texto-img--foto, .mm-retos-banda, .mm-simulador, .mm-incluye, .mm-metodo--fases, .mm-casos--testimonio, .mm-faq, .mm-contacto ) h2 {
		font-size: var( --h3-size );
		line-height: var( --h3-line );
	}
}

@media ( max-width: 767px ) {
	.mm-banda.mm-cabecera-inst--foto h1 {
		font-size: var( --h3-size );
		line-height: var( --h3-line );
	}

	.mm-banda:is( .mm-texto-img--foto, .mm-retos-banda, .mm-simulador, .mm-incluye, .mm-metodo--fases, .mm-casos--testimonio, .mm-faq, .mm-contacto ) h2 {
		font-size: var( --h4-size );
		line-height: var( --h4-line );
	}
}

/* --------------------------------------------------- Resultados de búsqueda */

/*
 * La pagina de resultados (search-gutenberg.php). Las fichas son el bloque
 * macmillan/tarjeta-producto, asi que aqui solo va lo que las rodea: el ancho,
 * la rejilla y la paginacion.
 */
.mm-resultados {
	max-width: var( --contenedor );
	margin-inline: auto;
	padding: var( --s-8 ) var( --margen-pagina );
	display: flex;
	flex-direction: column;
	gap: var( --s-7 );
}

/*
 * Auto-fill y no un numero de columnas: los resultados son los que son y con
 * minmax la ultima fila no deja huecos raros cuando vienen dos o cinco. Los
 * 340 y el hueco de 24 son los de la rejilla de fichas de producto
 * (.mm-tarjetas-producto): por debajo de ahi la portada deja de leerse.
 */
.mm-resultados__rejilla {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 340px, 1fr ) );
	gap: var( --s-5 );
}

@media ( max-width: 479px ) {
	.mm-resultados__rejilla {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------- paginación */

.mm-resultados__paginas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --s-2 );
}

.mm-resultados__paginas .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var( --s-3 );
	border: 1px solid var( --line );
	border-radius: var( --rad-sm );
	color: var( --text );
	font-size: var( --body-sm-size );
	font-weight: 600;
	text-decoration: none;
}

.mm-resultados__paginas a.page-numbers:hover {
	border-color: var( --accent-active );
	color: var( --accent-active );
}

.mm-resultados__paginas .page-numbers.current {
	border-color: var( --accent-active );
	background: var( --accent-active );
	color: var( --text-inverse );
}

.mm-resultados__paginas .page-numbers.dots {
	border-color: transparent;
}

.mm-resultados__paginas a.page-numbers:focus-visible {
	outline: 3px solid var( --focus );
	outline-offset: 2px;
}

/* ------------------------------------------------------- sin resultados */

.mm-resultados__vacio {
	display: flex;
	flex-direction: column;
	gap: var( --s-4 );
	max-width: 60ch;
}

.mm-resultados__nada {
	margin: 0;
	font-size: var( --h5-size );
	font-weight: 600;
	line-height: var( --h5-line );
}

.mm-resultados__vacio p {
	margin: 0;
	color: var( --text-soft );
}

.mm-resultados__sugerencia {
	margin-block-start: var( --s-3 ) !important;
	font-weight: 600;
}

.mm-resultados__atajos {
	display: flex;
	flex-wrap: wrap;
	gap: var( --s-3 ) var( --s-5 );
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * La etiqueta de idioma de un resultado. La ficha se posiciona para colgarla de
 * su esquina, y la etiqueta va por encima de la foto de la tarjeta.
 */
.mm-resultados__ficha {
	position: relative;
}

.mm-resultados__idioma {
	position: absolute;
	z-index: 1;
	top: var( --s-3 );
	/* A la izquierda: a la derecha se la comeria el badge de novedad de la
	   ficha de producto, que cae en esa misma esquina. */
	inset-inline-start: var( --s-3 );
	padding: 2px var( --s-2 );
	border-radius: var( --rad-sm );
	background: var( --text );
	color: var( --text-inverse );
	font-size: var( --caption-size );
	font-weight: 600;
	line-height: var( --caption-line );
	letter-spacing: 0.04em;
}

/*
 * El pie, abajo del todo aunque la pagina sea corta.
 *
 * Sin esto, en una pagina con poco contenido el pie se queda flotando a media
 * altura y debajo asoma el fondo. La columna flexible reparte: el contenido se
 * estira y el pie se apoya en el borde de abajo.
 *
 * Va colgado de .mm-gb —que pone inc/customizer.php— y no de body a secas: el
 * pie de este sistema tambien sale en las paginas del tema antiguo, y ahi el
 * armazon del <body> es el suyo.
 *
 * dvh y no vh: en movil, con vh el pie se va por debajo de la barra del
 * navegador y aparece un hueco al ocultarse.
 */
.mm-gb {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

/*
 * Crece pero no encoge, y basis auto: con el 1 1 0 de siempre, una pagina larga
 * se repartiria en partes iguales y el contenido acabaria con scroll propio.
 */
.mm-gb .mm-contenido {
	flex: 1 0 auto;
}

/* El pie no se estruja cuando el contenido pasa de largo. */
.mm-gb .mm-pie {
	flex-shrink: 0;
}

/* ------------------------------------------------------------- Carrusel
 *
 * El patron "Carrusel" (inc/patterns.php), sin frame de Figma: lo pidio el
 * cliente el 2-oct-2026 y se monta con las piezas del sistema.
 *
 * La banda es un core/group con mm-carrusel y, dentro, la pista: un core/group
 * en fila (mm-carrusel__pista) cuyos hijos directos son las diapositivas. Una
 * diapositiva es cualquier bloque contenedor —un core/cover con la foto a
 * sangre, un core/group con columnas—, sin clase propia: lo que la hace
 * diapositiva es ser hija de la pista.
 *
 * La pista es una fila con scroll-snap, una diapositiva por pantalla. Asi se ve
 * igual en el lienzo del editor, donde las demas diapositivas se alcanzan con
 * la barra de scroll, y funciona sin JavaScript. Con el, assets/js/carrusel.js
 * añade las flechas y los botones numerados, y marca la banda con is-listo.
 */

/*
 * La pista. Doblada con is-layout-flex porque el hueco y el align-items de una
 * fila los pone el core con esa clase, y su hoja va detras de esta.
 *
 * Sin scroll-behavior aqui: el desplazamiento suave lo pide el script, que es
 * quien sabe si el sistema ha pedido reducir el movimiento.
 */
.mm-carrusel__pista.is-layout-flex {
	align-items: stretch;
	gap: var( --s-5 );
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
}

/* Con los botones puestos, la barra de scroll sobra. Sin script se queda: es
   la unica pista de que hay mas diapositivas. */
.mm-carrusel.is-listo .mm-carrusel__pista {
	scrollbar-width: none;
}

.mm-carrusel.is-listo .mm-carrusel__pista::-webkit-scrollbar {
	display: none;
}

/*
 * Cada diapositiva ocupa la pista entera y todas miden de alto lo que la mas
 * alta. El :not() es por el lienzo: ahi el boton de añadir bloque tambien es
 * hijo de la pista.
 */
.mm-carrusel__pista.is-layout-flex > :not( .block-list-appender ) {
	flex: 0 0 100%;
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	border-radius: var( --rad-xl );
	overflow: hidden;
	scroll-snap-align: start;
}

/*
 * Todas miden lo que la mas alta, asi que a una diapositiva mas baja —una
 * imagen apaisada entre verticales— le sobra sitio: lo de dentro va centrado
 * en vertical en vez de pegado arriba con el hueco debajo. El cover ya centra
 * lo suyo segun su «posicion del contenido».
 */
.mm-carrusel__pista > .wp-block-group {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* El relleno de la diapositiva: el cover trae 1em y el grupo con fondo, el suyo. */
.mm-carrusel__pista > .wp-block-cover,
.mm-carrusel__pista > .wp-block-group.has-background {
	padding: var( --s-7 );
}

/* Lo de dentro, con el ritmo del sistema en vez de los margenes sueltos de cada bloque. */
.mm-carrusel__pista :is( .wp-block-cover__inner-container, .wp-block-column, .wp-block-group__inner-container ) > * {
	margin-block: 0;
}

.mm-carrusel__pista :is( .wp-block-cover__inner-container, .wp-block-column, .wp-block-group__inner-container ) > * + * {
	margin-block-start: var( --s-4 );
}

/* El texto sobre la foto no se alarga de lado a lado. */
.mm-carrusel__pista .wp-block-cover__inner-container {
	max-width: 640px;
}

.mm-carrusel__pista .wp-block-columns {
	gap: var( --s-7 );
	margin: 0;
}

.mm-carrusel__pista .wp-block-image {
	margin: 0;
}

.mm-carrusel__pista .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --rad-lg );
}

/*
 * Los controles, que crea el script debajo de la pista: flecha, un boton
 * numerado por diapositiva y flecha. En el orden en que se ven, que es tambien
 * el del tabulador.
 */
.mm-carrusel__controles {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --s-4 );
}

/* Con dos clases: en una banda, el ritmo de .mm-banda > * + * pondria 32. */
.mm-carrusel .mm-carrusel__controles {
	margin-block-start: var( --s-5 );
}

/*
 * Las flechas llevan la cara de las de la barra de pestañas (mas arriba, en la
 * misma regla). Aqui solo lo que cambia: son <button>, van en el flujo y estan
 * siempre a la vista, porque el carrusel da la vuelta al llegar al final.
 */
.mm-carrusel__flecha {
	position: static;
	display: flex;
	flex: none;
	padding: 0;
	transform: none;
}

.mm-carrusel__numeros {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --s-2 );
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Un numero y no un punto: dice cuantas hay y en cual se esta sin depender del
 * color. 36 de lado, por encima de los 24 que pide WCAG 2.2 para un objetivo.
 */
.mm-carrusel__numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var( --border-fn );
	border-radius: 50%;
	background: var( --surface );
	color: var( --text );
	font-family: var( --font );
	font-size: var( --body-sm-size );
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.mm-carrusel__numero:hover {
	border-color: var( --accent-hover );
	background: var( --accent-bg );
	color: var( --accent-hover );
}

/* La que se esta viendo: rellena, con el rojo del sistema (5.02:1 con el blanco). */
.mm-carrusel__numero[aria-current='true'] {
	border-color: var( --accent );
	background: var( --accent );
	color: var( --text-inverse );
}

/* El anillo de foco de los botones del sistema. */
.mm-carrusel__flecha:focus-visible,
.mm-carrusel__numero:focus-visible,
.mm-carrusel__pista:focus-visible {
	outline: 3px solid var( --focus );
	outline-offset: 2px;
}

/*
 * El carrusel estrecho: en movil, o suelto dentro de una columna. Las columnas
 * del core solo se apilan por el ancho de la pantalla, y en media pagina una
 * diapositiva de imagen y texto se quedaba con dos columnas de 200. Aqui se
 * apilan por el ancho que tengan ellas: cada columna pide 280 y, si no caben
 * dos en la fila, la segunda baja. Con !important porque el core escribe asi
 * su flex-wrap y su flex-basis.
 *
 * Sin contenedor de consulta (container-type) a proposito: se probo, y con la
 * pista dentro de una columna flexible —la caja de «Presentación del
 * producto»— el navegador calculaba el alto del carrusel con ancho cero y lo
 * dejaba en 179 con una pista de 532 dentro: el texto de debajo se le subia
 * encima.
 */
.mm-carrusel__pista .wp-block-columns {
	flex-wrap: wrap !important;
}

.mm-carrusel__pista .wp-block-column {
	flex: 1 1 280px !important;
}

@media ( max-width: 767px ) {
	.mm-carrusel__pista > .wp-block-cover,
	.mm-carrusel__pista > .wp-block-group.has-background {
		padding: var( --s-5 );
	}

	.mm-carrusel__pista .wp-block-columns {
		gap: var( --s-5 );
	}
}

/* ------------------------------------------------------------ Pasos
 *
 * Los patrones «Pasos» (inc/patterns.php), sin frame de Figma: como los de
 * /iberia/culture-club. Cada paso es un core/group con la imagen del numero, un
 * titular y un texto.
 *
 * En el front los grupos de flujo llevan su .wp-block-group__inner-container;
 * aqui se deshace con display: contents para que la rejilla y la fila del paso
 * vean directamente a la imagen, el titular y el texto.
 */
.mm-pasos .wp-block-group__inner-container {
	display: contents;
}

.mm-pasos {
	gap: var( --s-7 ) var( --s-6 );
}

.mm-banda > :is( h1, h2, h3, h4, h5, h6 ) + .mm-pasos,
.mm-banda > .wp-block-group__inner-container > :is( h1, h2, h3, h4, h5, h6 ) + .mm-pasos {
	margin-block-start: var( --s-7 );
}

.mm-paso {
	display: grid;
	align-content: start;
	justify-items: center;
	row-gap: var( --s-2 );
	text-align: center;
}

.mm-paso > *,
.mm-paso > .wp-block-group__inner-container > * {
	margin: 0;
}

/*
 * El numero es una caja de tamaño fijo —120x80 aqui, 160x120 en el timeline
 * vertical y 108x72 en movil— y la imagen se encaja dentro sin recortarse,
 * sea del tamaño que sea: una imagen mas grande no ocupa mas sitio ni descoloca
 * la linea. El !important es contra el ancho que el core escribe en linea en la
 * <img> si alguien la redimensiona en el editor, que si no ganaria a la caja.
 */
.mm-paso .mm-paso__numero {
	width: 120px;
	height: 80px;
	margin-block-end: var( --s-2 );
}

.mm-paso .mm-paso__numero img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}

/*
 * Sin pie de foto. Al reemplazar la imagen, el core le copia el pie que tenga
 * en la biblioteca de medios —uno de banco de imagenes, «blank / empty magazine
 * page», salio asi en Seekers—, y en la caja de alto fijo se salia por debajo.
 * En el hueco de un numero no tiene sentido; oculto, el lector tampoco lo lee.
 */
.mm-paso .mm-paso__numero figcaption {
	display: none;
}

/*
 * El color del paso es el color de texto del propio grupo (el panel «Color del
 * paso», assets/js/editor-pasos.js). Pinta el punto y el numero de ejemplo; sin
 * elegir, el rojo del sistema. El titular y el texto conservan el suyo: el que
 * tengan puesto, o el de siempre.
 */
.mm-paso {
	--mm-paso-color: var( --accent );
}

.mm-paso.has-text-color {
	--mm-paso-color: currentColor;
}

/* Sin el contenedor interior del front: si lo pillara, el numero heredaria
   de el el color del texto en vez del del paso. */
.mm-paso.has-text-color > :not( .mm-paso__numero, .wp-block-group__inner-container, .has-text-color ),
.mm-paso.has-text-color > .wp-block-group__inner-container > :not( .mm-paso__numero, .has-text-color ) {
	color: var( --text );
}

/*
 * El numero de ejemplo, pintado con ese color: la figura lleva la imagen de
 * mascara (is-cifra y --mm-cifra los pone mcm_gb_paso_cifra en la web y
 * editor-pasos.js en el lienzo) y la <img> se queda transparente debajo, con su
 * texto alternativo. La mascara se coloca como se coloca la imagen.
 */
.mm-paso .mm-paso__numero.is-cifra {
	background: var( --mm-paso-color );
	-webkit-mask: var( --mm-cifra ) center / contain no-repeat;
	mask: var( --mm-cifra ) center / contain no-repeat;
}

.mm-paso .mm-paso__numero.is-cifra img {
	opacity: 0;
}

/*
 * Horizontal: el mismo timeline tumbado. Cada paso pinta su tramo de linea
 * entre el numero y el titular, medio hueco a cada lado para que los tramos se
 * junten en una sola linea a lo largo de la fila, y su punto en el centro. El
 * numero lleva 48 debajo para dejarle sitio: la linea va en la mitad, a 104
 * del borde (80 del numero y 24).
 */
.mm-pasos.is-layout-grid .mm-paso {
	position: relative;
}

.mm-pasos.is-layout-grid .mm-paso .mm-paso__numero {
	margin-block-end: var( --s-7 );
}

.mm-pasos.is-layout-grid .mm-paso::after {
	content: "";
	position: absolute;
	top: 103px;
	right: calc( var( --s-6 ) / -2 );
	left: calc( var( --s-6 ) / -2 );
	height: 2px;
	background: var( --border-fn );
}

.mm-pasos.is-layout-grid .mm-paso::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 94px;
	left: 50%;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	border-radius: 50%;
	background: var( --mm-paso-color );
}

/*
 * Vertical: el timeline del widget «Workflow» de Bridge que usa Culture Club.
 * Una linea por el centro, un punto rojo en cada paso a la altura del titular,
 * y el numero y el texto a cada lado, cambiando de lado en cada paso; el texto
 * se alinea hacia la linea. La linea y los puntos son decoracion: el orden ya
 * lo dicen el texto alternativo de los numeros y el orden del documento.
 *
 * Con .mm-banda delante: la regla de ancho de la banda pesa dos clases.
 */
.mm-banda .mm-pasos--vertical {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var( --s-8 );
	max-width: 1000px;
	margin-inline: auto;
}

.mm-pasos--vertical::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: var( --border-fn );
}

.mm-pasos--vertical .mm-paso {
	position: relative;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	/* El numero ocupa las dos filas: la de abajo se queda lo que sobre, para
	   que el titular no se separe de su texto. */
	grid-template-rows: auto 1fr;
	column-gap: calc( 2 * var( --s-8 ) );
	justify-items: start;
	text-align: start;
}

/* El punto, sobre la linea y a la altura de la primera linea del titular. */
.mm-pasos--vertical .mm-paso::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 50%;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	border-radius: 50%;
	background: var( --mm-paso-color );
}

/* Pasos impares: el numero a la izquierda, pegado a la linea; el texto a la derecha. */
.mm-pasos--vertical .mm-paso__numero {
	grid-column: 1;
	grid-row: 1 / span 2;
	justify-self: end;
	margin-block-end: 0;
}

.mm-pasos--vertical .mm-paso > :not( .mm-paso__numero ),
.mm-pasos--vertical .mm-paso > .wp-block-group__inner-container > :not( .mm-paso__numero ) {
	grid-column: 2;
}

/* Pares: al reves, con el texto alineado a la derecha, hacia la linea. */
/*
 * En el lienzo cada paso va dentro de la caja de su Animacion de entrada (en
 * la web no deja caja), asi que alli el par se cuenta por la animacion.
 */
.mm-pasos--vertical .mm-paso:nth-child( even ),
.mm-pasos--vertical .mm-animacion:nth-child( even ) > .mm-paso {
	justify-items: end;
	text-align: end;
}

.mm-pasos--vertical .mm-paso:nth-child( even ) .mm-paso__numero,
.mm-pasos--vertical .mm-animacion:nth-child( even ) > .mm-paso .mm-paso__numero {
	grid-column: 2;
	justify-self: start;
}

.mm-pasos--vertical .mm-paso:nth-child( even ) > :not( .mm-paso__numero ),
.mm-pasos--vertical .mm-paso:nth-child( even ) > .wp-block-group__inner-container > :not( .mm-paso__numero ),
.mm-pasos--vertical .mm-animacion:nth-child( even ) > .mm-paso > :not( .mm-paso__numero ) {
	grid-column: 1;
}

.mm-pasos--vertical .mm-animacion:nth-child( even ) > .mm-paso .mm-paso__numero img {
	object-position: left center;
}

.mm-pasos--vertical .mm-animacion:nth-child( even ) > .mm-paso .mm-paso__numero.is-cifra {
	-webkit-mask-position: left center;
	mask-position: left center;
}

/* El rotulo «Animacion» que el lienzo pone delante de lo animado ocuparia una
   celda de la rejilla o un hueco en el timeline: aqui no se pinta. */
.editor-styles-wrapper .mm-pasos .mm-animacion::before {
	content: none;
}

/* En el timeline la caja crece, y la imagen se pega al lado de la linea. */
.mm-pasos--vertical .mm-paso .mm-paso__numero {
	width: 160px;
	height: 120px;
}

.mm-pasos--vertical .mm-paso .mm-paso__numero img {
	object-position: right center;
}

.mm-pasos--vertical .mm-paso .mm-paso__numero.is-cifra {
	-webkit-mask-position: right center;
	mask-position: right center;
}

.mm-pasos--vertical .mm-paso:nth-child( even ) .mm-paso__numero img {
	object-position: left center;
}

.mm-pasos--vertical .mm-paso:nth-child( even ) .mm-paso__numero.is-cifra {
	-webkit-mask-position: left center;
	mask-position: left center;
}

@media ( max-width: 1099px ) {
	.mm-pasos.is-layout-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/*
 * En movil las dos formaciones acaban igual: la linea a la izquierda y cada
 * paso en una columna a su derecha —numero, titular y texto—, todos del mismo
 * lado. Tres cajas centradas o un zigzag en 358 de ancho no caben.
 */
@media ( max-width: 767px ) {
	.mm-pasos.is-layout-grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.mm-banda .mm-pasos,
	.mm-banda .mm-pasos--vertical {
		position: relative;
		gap: var( --s-6 );
	}

	.mm-pasos::before,
	.mm-pasos--vertical::before {
		content: "";
		position: absolute;
		inset-block: 0;
		left: 10px;
		width: 2px;
		margin-left: -1px;
		background: var( --border-fn );
	}

	/* Los tramos de la horizontal sobran: ya esta la linea de la columna. */
	.mm-pasos.is-layout-grid .mm-paso::after {
		content: none;
	}

	.mm-pasos .mm-paso,
	.mm-pasos--vertical .mm-paso:nth-child( even ) {
		grid-template-columns: minmax( 0, 1fr );
		grid-template-rows: none;
		padding-inline-start: var( --s-7 );
		justify-items: start;
		text-align: start;
	}

	.mm-pasos .mm-paso::before,
	.mm-pasos.is-layout-grid .mm-paso::before,
	.mm-pasos--vertical .mm-paso::before {
		top: 4px;
		left: 10px;
	}

	.mm-pasos .mm-paso .mm-paso__numero,
	.mm-pasos.is-layout-grid .mm-paso .mm-paso__numero,
	.mm-pasos--vertical .mm-paso:nth-child( even ) .mm-paso__numero,
	.mm-pasos--vertical .mm-paso > :not( .mm-paso__numero ),
	.mm-pasos--vertical .mm-paso > .wp-block-group__inner-container > :not( .mm-paso__numero ),
	.mm-pasos--vertical .mm-paso:nth-child( even ) > :not( .mm-paso__numero ),
	.mm-pasos--vertical .mm-paso:nth-child( even ) > .wp-block-group__inner-container > :not( .mm-paso__numero ) {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
		margin-block-end: 0;
	}

	.mm-pasos .mm-paso .mm-paso__numero,
	.mm-pasos.is-layout-grid .mm-paso .mm-paso__numero {
		margin-block-end: var( --s-2 );
	}

	/* La caja de movil, con la imagen pegada a la izquierda, como el texto. */
	.mm-pasos .mm-paso .mm-paso__numero,
	.mm-pasos--vertical .mm-paso .mm-paso__numero {
		width: 108px;
		height: 72px;
	}

	.mm-pasos .mm-paso .mm-paso__numero img,
	.mm-pasos--vertical .mm-paso .mm-paso__numero img,
	.mm-pasos--vertical .mm-paso:nth-child( even ) .mm-paso__numero img {
		object-position: left center;
	}

	.mm-pasos .mm-paso .mm-paso__numero.is-cifra,
	.mm-pasos--vertical .mm-paso .mm-paso__numero.is-cifra,
	.mm-pasos--vertical .mm-paso:nth-child( even ) .mm-paso__numero.is-cifra {
		-webkit-mask-position: left center;
		mask-position: left center;
	}
}