/**
 * Componentes globales: botones, enlaces y la tarjeta de banner.
 *
 * Traduccion de las secciones "Buttons" (nodo 671-17734), "Links" (nodo
 * 677-18791) y "Banners" (nodo 677-19435) del Figma "Web Corporativa 2026",
 * mas la ficha de interaccion "Action Link · hover/focus" que acompana al
 * diseno.
 *
 * Aqui van las piezas que puede usar cualquier pagina o bloque. La cabecera y
 * el pie siguen en layout.css y el catalogo en catalogo.css.
 *
 * Ficha del componente Button en Figma: "4 jerarquias x 5 estados. Foco =
 * anillo azul con separacion (2 sombras). Reservar el rojo para CTAs."
 *
 *   Jerarquias  .mm-boton (relleno) · --linea · --fantasma · .mm-enlace
 *   Estados     normal · :hover · :active · :focus-visible · deshabilitado
 *   Tamanos     L por defecto · M con .mm-boton--m
 *
 * Solo variables de variables.css: si algo no tiene token, no se inventa aqui.
 */

/* ------------------------------------------------------------------ Botones */
/*
 * El boton del core con nuestra jerarquia principal.
 *
 * En vez de una copia de las reglas de arriba, el selector del core va colgado
 * de cada una: los valores siguen viviendo en un sitio, y si cambia el diseno
 * del boton cambia tambien el del core sin acordarse de nada.
 *
 * Solo el relleno rojo: para una accion secundaria esta .mm-boton--linea, que
 * se pide escribiendo la clase en el panel "Avanzado" del bloque.
 *
 * Acotado a .mm-contenido y al lienzo del editor, que es donde hay bloques.
 * El tema antiguo no los usa y su contenido no se toca.
 */


/*
 * El borde de 2px va en la base, transparente donde el diseno no lo pinta, para
 * que las tres jerarquias midan exactamente igual. Figma dibuja el trazo por
 * dentro del marco (L mide 50px de alto, M 45px, con borde o sin el), y el
 * equivalente en CSS es descontarlo del relleno: de ahi los calc().
 */
.mm-boton,
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --s-2 );
	padding: calc( var( --s-3 ) - 2px ) calc( var( --s-5 ) - 2px );
	border: 2px solid transparent;
	border-radius: var( --rad-pill );
	background: var( --accent );
	color: var( --text-inverse );
	font-family: var( --font );
	font-size: var( --body-size );
	font-weight: 600;
	line-height: var( --body-line );
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;

	/* position, overflow e isolation son para la bolita de mas abajo: recortarla
	   al contorno y que su z-index negativo no caiga detras del fondo. */
	position: relative;
	overflow: hidden;
	isolation: isolate;

	/*
	 * El fondo del relleno no se toca aqui: lo cambia la bolita. Esta transicion
	 * es para las otras dos jerarquias, que si tinen el fondo, y para el texto
	 * del fantasma, que cambia de color al pasar por encima; sin ella la letra
	 * saltaria de golpe mientras el fondo se funde.
	 */
	transition:
		background-color var( --motion-link ) var( --motion-ease ),
		color var( --motion-link ) var( --motion-ease );
}

/*
 * La bolita del boton primario, de la ficha "Boton primario · Micro-interaccion
 * bolita crece": un circulo del color de hover que crece desde la esquina
 * inferior izquierda hasta rellenar el boton. Guiño al cursor de la marca.
 *
 * Se anima solo transform, nunca width ni clip-path: transform y opacity son
 * las dos unicas propiedades que el navegador compone en GPU, el resto obliga a
 * recalcular maquetacion y repintar en cada fotograma.
 *
 * El 250% con aspect-ratio hace que la bolita se dimensione sola segun el ancho
 * del boton, asi tapa igual uno de 90px que uno a ancho completo, y el centro
 * anclado en la esquina es lo que hace el translate.
 *
 * 700ms es lento a proposito y no se lee como pereza: la respuesta inmediata la
 * dan el cursor y el estado pulsado; el barrido es el adorno que llega detras.
 */
.mm-boton::before,
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button__link::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: 0;
	bottom: 0;
	width: 250%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var( --accent-hover );
	transform: translate( -50%, 50% ) scale( 0 );
	transition: transform var( --motion-sweep ) var( --motion-ease );
}

/* Solo donde hay raton de verdad: en tactil el :hover se queda pegado despues
   de tocar y el boton se quedaria relleno. Ahi manda :active. */
@media ( hover: hover ) {
	.mm-boton:hover::before,
	:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button__link:hover::before {
		transform: translate( -50%, 50% ) scale( 1 );
	}
}

.mm-boton:active::before,
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button__link:active::before {
	background-color: var( --accent-active );
	transform: translate( -50%, 50% ) scale( 1 );
}

/* El fantasma no barre: su hover es un cambio de fondo liso, y la llamada de la
   tarjeta de banner ni siquiera tiene caja que rellenar. La linea si barre, con
   sus colores (mas abajo). */
.mm-boton--fantasma::before,
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-fantasma .wp-block-button__link::before,
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-play .wp-block-button__link::before {
	content: none;
}

/*
 * El color se repite en cada :hover a proposito, aunque no cambie.
 *
 * En las paginas que pinta el tema antiguo con nuestra cabecera, su hoja trae
 * un "a:hover { color: #000 }" suelto. Ese selector (0,1,1) le gana al color de
 * la clase (0,1,0) y el texto del boton se volvia negro al pasar el raton.
 * Declarandolo en el :hover propio (0,2,0) mandamos nosotros, y ademas queda
 * escrito cual es el color de cada estado en vez de depender de la herencia.
 */
.mm-boton:hover,
.mm-boton:active,
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button__link:hover,
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button__link:active {
	color: var( --text-inverse );
}

/* Tamano M: la misma caja con la tipografia un paso mas pequena. Lo que baja la
   altura de 50px a 45px es la linea del texto, no el relleno. */
/*
 * El segundo selector es para el boton del core: ahi la clase que escribe quien
 * edita cae en el envoltorio .wp-block-button, no en el enlace, y el enlace
 * trae su propio font-size, asi que heredar no le vale.
 */
.mm-boton--m,
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button.mm-boton--m .wp-block-button__link {
	font-size: var( --body-sm-size );
	line-height: var( --body-sm-line );
}

/*
 * ponytail: --sm es anterior al design system, que solo define L y M. Se queda
 * porque la usa la banda del catalogo y cambiarla altera una pantalla en vivo.
 * Cuando toque, se sustituye por --m y se borra esta regla.
 */
.mm-boton--sm {
	padding: 10px var( --s-4 );
	font-size: var( --body-sm-size );
	font-weight: 700;
}

/*
 * Las otras dos jerarquias, en el bloque del core.
 *
 * "Linea" no se registra: core/button ya trae el estilo "outline" de fabrica y
 * se le engancha el nuestro encima. Su CSS va en ":root :where(...)", que es
 * especificidad 0,1,0, asi que no hay que pelear con el.
 *
 * "Fantasma" si, y lo registra inc/blocks.php. El estado Active del fantasma es
 * el del desplegable abierto: aqui solo se trae el :active, porque un boton de
 * contenido no despliega nada.
 *
 * Las clases van en el envoltorio .wp-block-button, que es donde las pone el
 * editor, no en el enlace.
 */

/* Linea. Fondo blanco a proposito, no transparente: es lo que dibuja el diseno
   y lo que garantiza el contraste del texto sobre cualquier fondo. */
.mm-boton--linea,
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-outline .wp-block-button__link {
	border-color: var( --accent );
	background: var( --surface );
	color: var( --accent-active );
}

/*
 * La linea barre igual que el primario (QA de producto, 1877-14510): la misma
 * bolita, con los fondos de sus estados del Figma —red/50 al pasar, red/100 al
 * pulsar— en la bolita en vez de en la caja, que se queda blanca.
 */
.mm-boton--linea::before,
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-outline .wp-block-button__link::before {
	background-color: var( --accent-bg );
}

.mm-boton--linea:active::before,
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-outline .wp-block-button__link:active::before {
	background-color: var( --accent-bg-strong );
}

.mm-boton--linea:hover,
.mm-boton--linea:active,
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-outline .wp-block-button__link:hover,
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-outline .wp-block-button__link:active {
	color: var( --accent-active );
}

/*
 * Fantasma. Sin fondo hasta que se toca. En el Figma esta etiquetado
 * "Elementos de menu": es el de las secciones del navbar y el de la tienda. Su
 * estado "Active" es el del desplegable abierto, de ahi el aria-expanded.
 *
 * El radio va a --rad-sm en los cuatro estados. El diseno pone --rad-md en el
 * Default y --rad-sm en los otros tres, pero el Default no tiene fondo, asi que
 * su radio no se ve nunca: los 8px son el unico valor que llega a pintarse.
 */
.mm-boton--fantasma,
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-fantasma .wp-block-button__link {
	gap: var( --s-1 );
	padding: calc( var( --s-3 ) - 2px ) calc( var( --s-4 ) - 2px );
	border-radius: var( --rad-sm );
	background: none;
	color: var( --text );
	letter-spacing: .01em;
}

.mm-boton--fantasma:hover,
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-fantasma .wp-block-button__link:hover {
	background: var( --accent-bg );
	color: var( --accent-hover );
}

.mm-boton--fantasma:focus-visible,
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-fantasma .wp-block-button__link:focus-visible {
	background: var( --accent-bg );
	color: var( --accent-active );
}

/* Detras del foco a proposito: un desplegable abierto y enfocado se queda con
   el tinte fuerte, que es lo que dibuja el estado Active. */
.mm-boton--fantasma:active,
.mm-boton--fantasma[aria-expanded='true'],
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-fantasma .wp-block-button__link:active {
	background: var( --accent-bg-strong );
	color: var( --accent-active );
}

/* La flecha del desplegable mira arriba cuando esta abierto. El color no se
   toca aqui: no todos los iconos de un fantasma son la flecha —el carrito de
   la tienda tambien lo es y va negro—, asi que el rojo lo pone la navbar en
   layout.css, sobre .mm-navbar__item. */
.mm-boton--fantasma .mm-icono {
	transition: transform var( --motion-link ) var( --motion-ease );
}

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

/*
 * Deshabilitado. Va detras de hover y activo a proposito: pesa lo mismo en la
 * cascada, asi que gana por orden y no hace falta encadenar :not(). Cubre
 * <button disabled> y <a aria-disabled="true">, que no tiene :disabled.
 */
.mm-boton:disabled,
.mm-boton[aria-disabled='true'],
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button__link:disabled,
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button__link[aria-disabled='true'] {
	border-color: transparent;
	background: var( --surface-alt );
	color: var( --text-muted );
	cursor: not-allowed;
}

/* Deshabilitado no barre. Se quita la bolita entera en vez de vigilar el hover
   y el pulsado uno a uno, que ademas con aria-disabled un :not(:disabled) no
   serviria de nada. */
.mm-boton:disabled::before,
.mm-boton[aria-disabled='true']::before,
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button__link:disabled::before,
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button__link[aria-disabled='true']::before {
	display: none;
}

/* La variante de linea si conserva borde deshabilitada, en gris de divisoria. */
.mm-boton--linea:disabled,
.mm-boton--linea[aria-disabled='true'],
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-outline .wp-block-button__link:disabled,
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-outline .wp-block-button__link[aria-disabled='true'] {
	border-color: var( --line );
}

/*
 * Foco: el anillo azul con separacion de la ficha del componente. Con outline y
 * outline-offset en vez de dos sombras porque outline sobrevive al modo de alto
 * contraste de Windows, el hueco deja ver el fondo real de la pagina (que puede
 * ser un gradiente) y no altera la caja.
 */
.mm-boton:focus-visible,
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button__link:focus-visible {
	outline: 3px solid var( --focus );
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ Enlaces */

/*
 * Enlace de accion. Marcado:
 *
 *   <a class="mm-enlace" href="…">
 *     <span class="mm-enlace__texto">Ver el proyecto</span>
 *     <span class="mm-icono" aria-hidden="true">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
 *   </a>
 *
 * El <span> del texto no es opcional: el relleno de hover es su pseudoelemento.
 */
.mm-enlace {
	display: inline-flex;
	align-items: center;
	gap: var( --s-3 );
	padding: var( --s-2 ) var( --s-1 );
	border-radius: var( --rad-sm );
	color: var( --accent );
	font-family: var( --font );
	font-size: var( --body-size );
	font-weight: 600;
	line-height: var( --body-line );
	text-decoration: none;
	transition: color var( --motion-link ) var( --motion-ease );
}

/* El subrayado se ve siempre, tambien en reposo: el enlace tiene que
   distinguirse sin depender del color (WCAG 1.4.1). */
.mm-enlace__texto {
	position: relative;
	isolation: isolate; /* sin esto, z-index -1 manda el relleno detras de la pagina */
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/*
 * El relleno es un pseudoelemento con inset negativo, no un padding: un padding
 * de verdad ensancharia el enlace al pasar por encima y movería lo que tenga al
 * lado. El radio de 4px no tiene token, es el unico valor crudo de la regla.
 */
.mm-enlace__texto::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: -2px -6px;
	border-radius: 4px;
	background-color: var( --accent-bg );
	opacity: 0;
	transition: opacity var( --motion-link ) var( --motion-ease );
}

/* La flecha del enlace es de 14px, no los 16 de .mm-icono (layout.css). */
.mm-enlace .mm-icono svg {
	width: 14px;
	height: 14px;
	transition: transform var( --motion-link ) var( --motion-ease );
}

/*
 * Hover y foco comparten declaracion: quien navega con teclado ve lo mismo.
 *
 * El texto pasa a --accent-hover, no se queda en --accent: sobre el relleno
 * rosa el rojo base se queda en 4.41:1 y no llega al 4.5:1 de la AA (16px
 * semibold no cuenta como texto grande). Con --accent-hover son 5.47:1. El
 * componente de Figma lo dibuja con el rojo base; aqui manda el contraste.
 */
.mm-enlace:hover,
.mm-enlace:focus-visible {
	color: var( --accent-hover );
}

.mm-enlace:hover .mm-enlace__texto::before,
.mm-enlace:focus-visible .mm-enlace__texto::before {
	opacity: 1;
}

.mm-enlace:hover .mm-icono svg,
.mm-enlace:focus-visible .mm-icono svg {
	transform: translateX( var( --s-1 ) );
}

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

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

/*
 * Enlace de pie. El segundo componente de la seccion "Links" del Figma.
 *
 * Se llama asi porque asi lo llama el diseno, pero no es del pie: es el enlace
 * para fondo oscuro, y vale igual en una banda oscura de un bloque. Va en texto
 * inverso, sin subrayado en reposo y subrayado al tocarlo.
 */
/*
 * El !important del color no es capricho: lo pide el tema antiguo.
 *
 * custom.min.css trae "footer ul li a { color: #343435 !important }" para su
 * propio pie, y nuestros enlaces de columna tambien viven en un <ul><li> dentro
 * de un <footer>, asi que los pintaba de gris. Con !important en los dos gana
 * el de mas especificidad, que es esta clase (0,1,0) frente a footer ul li a
 * (0,0,4).
 *
 * Quitarlo de alli no vale: en las paginas del tema antiguo siguen saliendo dos
 * pies, el suyo con id="footer" y el nuestro, y esa regla es la que pinta el
 * suyo. Solo pasa en esas paginas —una plantilla Gutenberg no carga ese CSS—, y
 * por eso el gris salia solo a ratos.
 */
.mm-enlace-pie {
	color: var( --text-inverse ) !important;
	font-family: var( --font );
	font-size: var( --body-sm-size );
	font-weight: 400;
	line-height: var( --body-sm-line );
	text-decoration: none;
}

/* El color repetido, por lo mismo que en los botones: el "a:hover { color:
   #000 }" del tema antiguo, y el pie sale tambien en sus paginas. */
.mm-enlace-pie:hover,
.mm-enlace-pie:focus-visible {
	color: var( --text-inverse ) !important;
	text-decoration: underline;
}

/*
 * El anillo de foco es gris, no el azul del sistema. Sobre fondo oscuro el
 * --focus se queda en 2.2:1 y no se ve; el gris de divisoria sube a 11:1. Es lo
 * que dibuja el diseno en "Link footer · Focus" (nodo 677-18764).
 */
.mm-enlace-pie:focus-visible {
	outline: 3px solid var( --line );
	outline-offset: 2px;
}

/*
 * Enlace de texto: el que se escribe dentro de un parrafo, una lista o una
 * tabla desde el editor.
 *
 * El diseno no dibuja un tercer componente —la seccion "Links" son el action
 * link y el del pie—, asi que lleva los estados del action link: rojo subrayado
 * en reposo, relleno rosa y --accent-hover al pasar o al enfocar, y
 * --accent-active al pulsar (QA de producto, 1877-14510). Sin flecha: esa es
 * del componente, no del estado.
 *
 * El relleno va en el fondo del propio enlace y no en un pseudoelemento como
 * alli: un enlace de texto puede partirse en dos lineas, y un pseudoelemento
 * absoluto pintaria un solo rectangulo desde la primera hasta la ultima. El
 * fondo de una caja en linea se pinta por trozos, uno por linea, y el
 * box-shadow le da los 2px que el componente saca con su inset negativo. Con
 * box-decoration-break las dos puntas salen redondeadas.
 *
 * Solo los enlaces sin clase, y no los de las piezas que traen la suya —migas,
 * pestañas, tarjetas, menus, pie—: ahi el estilo lo pone su componente. Los
 * ficheros de la banda de muestras se quedan fuera por lo mismo: cada uno es
 * una fila entera, con su etiqueta colgada a la izquierda, y el relleno pintaria
 * la fila. Sus colores si son estos, y estan en layout.css con el resto de la
 * banda.
 *
 * Y las migas del core (core/breadcrumbs): sus enlaces van dentro de un <li> y
 * sin clase, asi que esta regla los cogia y, con mas peso que la de las migas
 * en layout.css, los pintaba rojos y subrayados.
 */
:is( .mm-contenido, .editor-styles-wrapper )
	:is( p, li, dd, dt, td, th, figcaption, blockquote ):not( .mm-migas, .mm-pestana )
	a:not( [class] ):not( .mm-material__ficheros *, .wp-block-breadcrumbs * ) {
	color: var( --accent );
	border-radius: 4px; /* el mismo 4 del relleno del action link */
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition:
		color var( --motion-link ) var( --motion-ease ),
		background-color var( --motion-link ) var( --motion-ease ),
		box-shadow var( --motion-link ) var( --motion-ease );
}

/*
 * El color de hover se repite en el :active por lo de siempre: el tema antiguo
 * trae un "a:hover { color: #000 }" suelto que le gana a una sola clase.
 */
:is( .mm-contenido, .editor-styles-wrapper )
	:is( p, li, dd, dt, td, th, figcaption, blockquote ):not( .mm-migas, .mm-pestana )
	a:not( [class] ):not( .mm-material__ficheros *, .wp-block-breadcrumbs * ):is( :hover, :focus-visible ) {
	background-color: var( --accent-bg );
	box-shadow: 0 0 0 2px var( --accent-bg );
	color: var( --accent-hover );
}

:is( .mm-contenido, .editor-styles-wrapper )
	:is( p, li, dd, dt, td, th, figcaption, blockquote ):not( .mm-migas, .mm-pestana )
	a:not( [class] ):not( .mm-material__ficheros *, .wp-block-breadcrumbs * ):active {
	color: var( --accent-active );
}

:is( .mm-contenido, .editor-styles-wrapper )
	:is( p, li, dd, dt, td, th, figcaption, blockquote ):not( .mm-migas, .mm-pestana )
	a:not( [class] ):not( .mm-material__ficheros *, .wp-block-breadcrumbs * ):focus-visible {
	outline: 3px solid var( --focus );
	outline-offset: 2px;
}

/* ----------------------------------------------- Tarjeta de banner */

/*
 * La tarjeta de la seccion "Banners" del Figma (nodo 677-19435).
 *
 * No es un bloque propio: es un core/cover con el estilo "Banner". El core ya
 * sabe poner el fondo —color, degradado, imagen, o imagen con el degradado
 * encima, que es su panel "Superposicion" de toda la vida—, el alto minimo y
 * el contenido abajo a la izquierda. Aqui solo va lo que el core no trae: el
 * radio y los anillos.
 *
 * El fondo no se pinta aqui a proposito: si el CSS pusiera uno por su cuenta,
 * el panel diria una cosa y la tarjeta enseñaria otra. Lo que se ve es siempre
 * lo que dicen los controles; el patron llega con la superposicion ya puesta.
 *
 * El tono —texto negro o blanco— lo decide el color de texto del propio cover:
 * el titular y la llamada lo heredan, asi que una tarjeta se cambia de claro a
 * oscuro con un solo control.
 *
 * El alto lo pone quien edita con el control del core (el diseno usa 400, y 279
 * en las bajas del mosaico). Igualar las de una misma fila es cosa de la fila,
 * y esta en layout.css con el resto de .mm-banners.
 */
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-cover.is-style-banner {
	padding: var( --s-5 );
	border-radius: var( --rad-lg );
	transition: box-shadow var( --motion-link ) var( --motion-ease );
}

/* El ritmo de dentro: 8px entre el titular y la llamada, y ningun margen
   heredado del navegador. */
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner :is( .wp-block-cover__inner-container, .mm-banner__texto, .mm-banner__texto > .wp-block-group__inner-container ) > * {
	margin-block: 0;
}

:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner :is( .wp-block-cover__inner-container, .mm-banner__texto, .mm-banner__texto > .wp-block-group__inner-container ) > * + * {
	margin-block-start: var( --s-2 );
}

/*
 * El titular, en H5: el de las tarjetas estrechas. Las anchas lo suben a H3 mas
 * abajo, y en movil los dos bajan un escalon, como toda la tipografia.
 *
 * El patron no le pone tamaño, porque depende del ancho que le toque a la
 * tarjeta y eso solo se sabe aqui. Si quien edita elige uno en el panel, manda
 * ese: de ahi el :not(), que deja fuera cualquier titular con clase de tamaño.
 */
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner :is( .wp-block-cover__inner-container, .mm-banner__texto, .mm-banner__texto > .wp-block-group__inner-container ) > :is( h1, h2, h3, h4, h5, h6 ):not( [class*="-font-size"] ) {
	font-size: var( --h5-size );
	line-height: var( --h5-line );
	font-weight: var( --h5-weight );
}

/*
 * El <picture> que envuelve la imagen cuando la tarjeta lleva una version de
 * movil (inc/blocks.php), fuera de la cuenta: la tarjeta es un contenedor
 * flexible y una etiqueta de mas seria un hijo de mas. Con display:contents la
 * caja desaparece y queda la imagen, que va absoluta como siempre.
 */
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner picture {
	display: contents;
}

/*
 * Las tarjetas anchas, a dos columnas: el texto en la mitad izquierda y la foto
 * de la imagen en la derecha (Figma 563-6230, 563-6384, 563-6179 y 563-6294).
 *
 * El texto no se para solo: con una posicion de contenido que no sea el centro,
 * el core deja la caja en width:auto y un titular largo se estira por delante
 * de la foto. La mitad es el corte del diseno: en las cuatro tarjetas anchas la
 * imagen trae la gente a la derecha y el degradado limpio a la izquierda.
 *
 * La pregunta es por lo ancha que ha quedado la tarjeta, no por la pantalla: en
 * la misma fila conviven anchas y estrechas. La caja que se mide es la columna,
 * que la declara layout.css con el resto de .mm-banners. El corte esta entre la
 * mas ancha de las estrechas (448) y la mas estrecha de las anchas (628), asi
 * que las cinco rejillas caen del lado que les toca y ninguna se queda a medias
 * al encoger la pantalla: al bajar de ahi el texto vuelve a ancho completo, que
 * es lo que dibuja el frame responsive.
 *
 * La columna del texto mide 304 en las tres tarjetas anchas del Figma (628, 672
 * y 830). No va en porcentaje: con la mitad y el relleno de 32, la de 628 dejaba
 * 282 y el titular en H3 se partia en cuatro lineas.
 */
@container ( min-width: 480px ) {
	:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner .wp-block-cover__inner-container {
		max-width: 304px;
	}
}

/*
 * Las tarjetas grandes llevan 32 a los lados en vez de 24, y el titular en H3 en
 * vez de H5 (Figma 563-6235, 563-6184, 563-6389 y la alta del mosaico, 563-6313).
 *
 * Este corte no es el de arriba: la alta del mosaico mide 448 y va en grande
 * aunque su texto se apoye abajo. 440 cae entre ella y la mas ancha de las
 * pequeñas, que mide 426.
 */
@container ( min-width: 440px ) {
	:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-cover.is-style-banner {
		padding-inline: var( --s-6 );
	}

	:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner :is( .wp-block-cover__inner-container, .mm-banner__texto, .mm-banner__texto > .wp-block-group__inner-container ) > :is( h1, h2, h3, h4, h5, h6 ):not( [class*="-font-size"] ) {
		font-size: var( --h3-size );
		line-height: var( --h3-line );
		font-weight: var( --h3-weight );
	}
}

/*
 * En movil, un escalon menos, el mismo que baja la tipografia de todo el sitio
 * (variables.css): H6 en las estrechas y H4 en las anchas. Tiene que ir aqui
 * porque estas reglas pesan mas que las de elemento.
 */
@media ( max-width: 767px ) {
	:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner :is( .wp-block-cover__inner-container, .mm-banner__texto, .mm-banner__texto > .wp-block-group__inner-container ) > :is( h1, h2, h3, h4, h5, h6 ):not( [class*="-font-size"] ) {
		font-size: var( --h6-size );
		line-height: var( --h6-line );
		font-weight: var( --h6-weight );
	}

	@container ( min-width: 440px ) {
		:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner :is( .wp-block-cover__inner-container, .mm-banner__texto, .mm-banner__texto > .wp-block-group__inner-container ) > :is( h1, h2, h3, h4, h5, h6 ):not( [class*="-font-size"] ) {
			font-size: var( --h4-size );
			line-height: var( --h4-line );
			font-weight: var( --h4-weight );
		}
	}
}

/*
 * Y por debajo de ese ancho la tarjeta ancha ya no lo es: la imagen se recoloca
 * arriba y el texto se apoya abajo, como en las estrechas (nodo 677-20849). El
 * control del panel sigue diciendo "centro izquierda", que es lo que se ve en
 * el escritorio para el que se monto la pagina; aqui solo cambia el sitio
 * donde ya no cabe, igual que el alto de mas abajo.
 */
@container ( max-width: 479.98px ) {
	:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-cover.is-style-banner.is-position-center-left {
		align-items: flex-end;
	}
}

/*
 * La tarjeta en tres capas: fondo, imagen y contenido (ver
 * mcm_gb_banner_tarjeta()). Lo de arriba sigue sirviendo a los banners montados
 * antes, con la foto de fondo y el texto encima.
 *
 * Imagen y texto tienen cada uno su hueco, a 24 de distancia, y nunca se pisan.
 * Estrecha, en columna: la imagen arriba llenando lo que sobra y el texto
 * abajo. Ancha, en fila: el texto a la izquierda en los 304 del diseño y la
 * imagen en el resto.
 *
 * Cuelga del grupo de texto y no de la imagen: si quien edita quita la imagen,
 * el texto se queda en su sitio y no vuelve a la maquetacion antigua.
 */
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner .wp-block-cover__inner-container:has( > .mm-banner__texto ) {
	display: flex;
	flex-direction: column-reverse; /* el texto va primero en el marcado */
	justify-content: center;
	gap: var( --s-5 );
	align-self: stretch;
	max-width: none;
}

:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner .wp-block-cover__inner-container > :is( .mm-banner__texto, .mm-banner__imagen ) {
	margin: 0;
}

/*
 * En columna la imagen se queda con el alto que sobra, sin pasar del 65 % del
 * ancho de la tarjeta, y se pinta pegada al texto. Lo que quede despues de ese
 * tope se reparte arriba y abajo: en una tarjeta alta, como la de la derecha del
 * mosaico, imagen y texto van juntos y centrados en vez de irse el texto al
 * fondo. En las demas no sobra nada y la imagen llena su hueco.
 *
 * Absoluta dentro de la figura para que su tamaño real no cuente en el alto de
 * la tarjeta: las tarjetas miden lo del diseño y la imagen se adapta, entera con
 * contain. Con menos de 128 no se ve, asi que por debajo crece la tarjeta.
 *
 * El 65 % es la proporcion de una imagen apaisada, y el ancho se mide contra la
 * columna, que es caja de consulta (layout.css).
 *
 * El !important es por el editor, que escribe height:auto en linea en la <img>.
 */
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner .mm-banner__imagen {
	position: relative;
	flex: 1 1 auto;
	min-height: var( --s-11 );
	max-height: 65cqw;
}

:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner .mm-banner__imagen img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: contain;
	object-position: center bottom;
}

/* En movil la tarjeta mide 240 y la imagen se quedaba en su minimo de 128, que
   no se reconocia. Ahi va siempre a su tope y la tarjeta crece lo que haga
   falta. Solo en columna: una tarjeta ancha en fila no la necesita. */
@media ( max-width: 781px ) {
	@container ( max-width: 599.98px ) {
		:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner .mm-banner__imagen {
			min-height: 65cqw;
		}
	}
}

/*
 * En fila a partir de 600: la mas estrecha de las anchas del Figma mide 628 y
 * la mas ancha de las estrechas, la alta del mosaico, 448. Con el corte de 480
 * de las antiguas a la imagen le quedaban 88 px al lado del texto.
 */
@container ( min-width: 600px ) {
	:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner .wp-block-cover__inner-container:has( > .mm-banner__texto ) {
		flex-direction: row;
		align-items: center;
	}

	:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner .wp-block-cover__inner-container > .mm-banner__texto {
		flex: 0 1 304px;
	}

	/* En fila la imagen se queda con todo el hueco que deja el texto, a lo alto
	   de la tarjeta y centrada: sin tope y sin pegarse abajo. */
	:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner .wp-block-cover__inner-container > .mm-banner__imagen {
		flex: 1 1 0;
		align-self: stretch;
		max-height: none;
	}

	:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner .mm-banner__imagen img {
		object-position: center;
	}
}

/*
 * Hover: anillo rosa de 3px y sombra media.
 *
 * El anillo es una sombra y no un borde: el diseno lo dibuja por fuera de la
 * caja —en el frame de hover el texto sigue a 24px del borde— y un border de
 * 3px empujaria el contenido hacia dentro al pasar el raton. Va en la misma
 * propiedad que la sombra para que las dos se fundan a la vez.
 *
 * Solo donde hay raton: en tactil el hover se queda pegado despues de tocar. Y
 * en todas las tarjetas, lleven enlace o no: los patrones llegan sin destino
 * —la llamada sale como <span>, ver inc/blocks.php— y el diseño pide el hover
 * igual. Antes colgaba de :has( a ) y en los patrones no aparecia nunca.
 */
@media ( hover: hover ) {
	:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-cover.is-style-banner:hover {
		box-shadow: 0 0 0 3px var( --accent-bg-strong ), var( --sombra-md );
	}
}

/*
 * Foco: el anillo lo lleva la tarjeta entera, no la bolita de dentro. Con
 * outline, como el resto del sistema, que sobrevive al modo de alto contraste.
 */
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-cover.is-style-banner:has( :focus-visible ) {
	outline: 4px solid var( --focus );
	box-shadow: var( --sombra-md );
}

/*
 * Y donde eso funciona, la llamada suelta el suyo: dos anillos concentricos no
 * los pide nadie. Va dentro de @supports a proposito: en un navegador sin
 * :has() la tarjeta no se puede anillar, y quitarle el anillo al boton dejaria
 * el teclado sin ningun indicador de foco.
 */
@supports selector( :has( * ) ) {
	:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner .wp-block-button__link:focus-visible {
		outline: none;
	}
}

/*
 * Movil: el alto baja a los 240px del frame responsive (nodo 677-20849).
 *
 * El !important es la unica forma de ganarle al min-height, que el core guarda
 * como estilo en linea del bloque. El punto de corte es el 781 del core, no el
 * 767 del resto del sistema: es donde core/columns pasa cada columna a ancho
 * completo, y con otro numero habria una franja con las tarjetas ya apiladas y
 * todavia altas.
 */
@media ( max-width: 781px ) {
	:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-cover.is-style-banner {
		min-height: 240px !important;
	}

}

/*
 * La llamada de la tarjeta: etiqueta y bolita, sin caja. Es core/button con el
 * estilo "Play", asi que el enlace, el destino y el texto siguen siendo los
 * controles de siempre.
 *
 * La bolita es el mismo SVG que usa la tarjeta de acceso, no un dibujo nuevo:
 * circulo blanco con filo rojo y la silueta de marca en degradado, que en CSS
 * no sale.
 */
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-play .wp-block-button__link {
	gap: var( --s-3 );
	padding: 0;
	border: 0; /* el borde de 2px de la base mide, y aqui no hay caja que medir */
	background: none;
	color: inherit; /* el tono lo manda el cover */
	white-space: normal; /* la etiqueta parte antes que desbordar la tarjeta */
}

:is( .mm-contenido, .editor-styles-wrapper ) .is-style-play .wp-block-button__link::after {
	content: '';
	flex: none;
	width: 41px;
	height: 40px;
	background: url( ../images/play.svg ) center / contain no-repeat;
}

/*
 * Tarjeta enlazada entera: el interruptor "Toda la tarjeta enlazada" del panel,
 * que escribe la clase (ver assets/js/editor-banner.js).
 *
 * El enlace del boton se estira por encima de la tarjeta con un pseudoelemento
 * en vez de envolverla en otro <a>. Asi hay un solo enlace, una sola parada de
 * tabulador y el nombre accesible sigue siendo la etiqueta del boton; con dos
 * enlaces al mismo sitio, el lector de pantalla los lee los dos.
 *
 * El inset gigante es a proposito: el pseudoelemento se posiciona contra el
 * enlace, que mide lo que mide, y para tapar la tarjeta hay que desbordarlo. El
 * recorte no lo pone un numero sino el overflow:hidden que el core ya tiene en
 * el cover —el mismo que redondea la imagen—, asi que el area sensible acaba
 * siendo exactamente la caja redondeada de la tarjeta, ni un pixel mas.
 *
 * Solo en el front. En el lienzo taparia el titular y no se podria ni escribir
 * en el: alli la tarjeta se ve igual y se edita como siempre.
 */
.mm-contenido .mm-banner--enlazada .is-style-play .wp-block-button__link {
	overflow: visible; /* la base lo recorta para la bolita; aqui hay que salir */
}

.mm-contenido .mm-banner--enlazada .is-style-play .wp-block-button__link::before {
	/* Arranca de cero: este pseudoelemento es el de la bolita del boton relleno,
	   que llega con width del 250 %, transform y z-index negativo. Deshacer esas
	   siete propiedades una a una seria una regla peleandose con otra, y ademas
	   se romperia el dia que la bolita cambie. */
	all: initial;
	content: '';
	position: absolute;
	inset: -100vmax;

	/* El cursor tambien lo reseteo sin querer con el all, y sin esto la tarjeta
	   se sentiria muerta: flecha normal sobre algo que si es un enlace. */
	cursor: inherit;
}

/* --------------------------------------------- Tarjeta de video */

/*
 * El poster del video de la cabecera de instituciones (Figma 1288-8954 y su
 * movil 1305-2326). No es otro bloque ni otro estilo: es la tarjeta de banner
 * —core/cover con "Banner"— con la clase mm-video en "Avanzado", que le cambia
 * las medidas. Asi conserva todo lo de la tarjeta: el fondo por el panel de
 * superposicion, el radio, los anillos y el interruptor de tarjeta enlazada. Un
 * estilo aparte tendria que repetir todo eso, y los estilos son excluyentes.
 *
 * Lo que cambia: el relleno (40 a los lados y arriba, 32 abajo), el ancho del
 * texto (460, que es lo que el frame acota, no la tarjeta), 16 entre el titulo
 * y la llamada, el titulo en H4 y la bolita del play, que aqui es roja y va
 * delante de la etiqueta. 40 no es un paso del sistema: es el del frame.
 *
 * Con la clase doblada al selector: cada regla tiene que pesar mas que la de
 * la tarjeta de banner a la que corrige, que va justo arriba.
 */
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-cover.is-style-banner.mm-video {
	padding: 40px 40px var( --s-6 );
}

:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner.mm-video .wp-block-cover__inner-container {
	max-width: 460px;
}

:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner.mm-video .wp-block-cover__inner-container > * + * {
	margin-block-start: var( --s-4 );
}

/* El titulo es un parrafo —el Figma lo anota: no es encabezado— con el paso
   H4, que el selector de tamaños del editor no ofrece; de ahi la clase. */
:is( .mm-contenido, .editor-styles-wrapper ) .mm-video .mm-video__titulo {
	font-size: var( --h4-size );
	line-height: var( --h4-line );
	font-weight: var( --h4-weight );
}

/* La bolita: 48 de acento con el play en blanco, delante de la etiqueta. Es el
   mismo boton "Play" de la tarjeta de banner con otro dibujo y al otro lado. */
:is( .mm-contenido, .editor-styles-wrapper ) .mm-video .is-style-play .wp-block-button__link {
	flex-direction: row-reverse;

	/* Sin el hueco de linea: el enlace es inline-flex y, alineado a la linea
	   base de su caja, dejaba 7,6px de descendente debajo que subian el titulo y
	   la llamada 8px respecto al frame. La tarjeta de banner se queda como esta. */
	vertical-align: top;
}

:is( .mm-contenido, .editor-styles-wrapper ) .mm-video .is-style-play .wp-block-button__link::after {
	width: 48px;
	height: 48px;
	background-image: url( ../images/play-relleno.svg );
}

/*
 * Movil (frame 1305-2326): 230 de alto, 24 a los lados y 28 arriba y abajo, 18
 * entre el titulo y la llamada, y el titulo en H5 a todo el ancho. El
 * !important es el mismo que el de la tarjeta de banner: el alto minimo lo
 * guarda el core en linea. 28 y 18 son los del frame, no pasos del sistema.
 */
@media ( max-width: 781px ) {
	:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-cover.is-style-banner.mm-video {
		min-height: 230px !important;
		padding: 28px var( --s-5 );
	}

	:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner.mm-video .wp-block-cover__inner-container {
		max-width: none;
	}

	:is( .mm-contenido, .editor-styles-wrapper ) .is-style-banner.mm-video .wp-block-cover__inner-container > * + * {
		margin-block-start: 18px;
	}

	:is( .mm-contenido, .editor-styles-wrapper ) .mm-video .mm-video__titulo {
		font-size: var( --h5-size );
		line-height: var( --h5-line );
		font-weight: var( --h5-weight );
	}
}

/* --------------------------------------------- Enlace de accion, en el core */

/*
 * El mismo .mm-enlace de arriba, pedido desde el editor: core/button con el
 * estilo "Enlace de accion" (lo registra inc/blocks.php).
 *
 * No es una copia del componente: hereda todo lo que .mm-enlace ya declara
 * —color, tipografia, radio, hueco, transicion, los cuatro estados— porque el
 * selector del boton va escrito al lado de cada regla. Lo unico que cambia es
 * la anatomia: el boton no tiene los dos <span> del marcado a mano, asi que el
 * subrayado va en el propio enlace y el relleno rosa y la flecha en sus
 * pseudoelementos.
 */
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button.is-style-enlace .wp-block-button__link {
	position: relative;
	/* Arrimado a la izquierda aunque parta en dos lineas: la base del boton lo
	   centra, y un enlace de texto que parte se leia centrado en movil (QA de
	   producto, 1877-14510, en Claves). */
	justify-content: flex-start;
	text-align: start;
	gap: var( --s-3 );
	padding: var( --s-2 ) var( --s-1 );
	border: 0; /* el borde de 2px de la base mide, y aqui no hay caja */
	border-radius: var( --rad-sm );
	background: none;

	/* La base recorta para la bolita y aqui hay que salirse: el relleno del
	   hover asoma 2px por los lados del enlace. Y la etiqueta parte antes que
	   desbordar la ficha, que la base la deja en una sola linea. */
	overflow: visible;
	white-space: normal;
	color: var( --accent );
	font-size: var( --body-size );
	font-weight: 600;
	line-height: var( --body-line );
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color var( --motion-link ) var( --motion-ease );
}

/*
 * El relleno rosa del hover.
 *
 * Arranca de cero porque este pseudoelemento es el de la bolita del boton
 * relleno, que llega con width del 250 %, transform y z-index negativo:
 * deshacer esas siete propiedades una a una se rompe el dia que la bolita
 * cambie. Con el marcado a mano el relleno cuelga del <span> del texto; aqui no
 * hay span, asi que se apoya en el enlace y el inset descuenta su relleno.
 */
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button.is-style-enlace .wp-block-button__link::before {
	all: initial;
	content: '';
	position: absolute;
	z-index: -1;
	inset: calc( var( --s-2 ) - 2px ) calc( var( --s-1 ) - 6px );
	border-radius: 4px;
	background-color: var( --accent-bg );
	opacity: 0;
	transition: opacity var( --motion-link ) var( --motion-ease );
	cursor: inherit; /* el all: initial se lo lleva, y sin esto no parece enlace */
}

/*
 * La flecha, en mascara y no en background: el SVG del tema viene con
 * fill="currentColor", que dentro de una url() no hereda nada. Con mascara la
 * tiñe el color del texto y sigue los cuatro estados sin un fichero por color.
 */
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button.is-style-enlace .wp-block-button__link::after {
	content: '';
	flex: none;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url( ../images/flecha.svg ) center / contain no-repeat;
	mask: url( ../images/flecha.svg ) center / contain no-repeat;
	transition: transform var( --motion-link ) var( --motion-ease );
}

:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button.is-style-enlace .wp-block-button__link:hover,
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button.is-style-enlace .wp-block-button__link:focus-visible {
	background: none;
	color: var( --accent-hover );
}

:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button.is-style-enlace .wp-block-button__link:hover::before,
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button.is-style-enlace .wp-block-button__link:focus-visible::before {
	opacity: 1;
}

:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button.is-style-enlace .wp-block-button__link:hover::after,
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button.is-style-enlace .wp-block-button__link:focus-visible::after {
	transform: translateX( var( --s-1 ) );
}

:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button.is-style-enlace .wp-block-button__link:active {
	background: none;
	color: var( --accent-active );
}

/* ------------------------------------------------------------- Bocadillo */

/*
 * La caja blanca con rabito de la banda de contacto (Figma "BLOQUE CONTACTO
 * ASESOR", nodo 677-20178). Es un core/group con el estilo "Bocadillo": dentro
 * va lo que se quiera, con sus propios controles.
 *
 * Aqui esta la forma y nada mas. Donde se coloca y de que tamaño va el texto lo
 * decide la banda que lo usa, en layout.css.
 *
 * El radio de 38 no es ninguna variable: es la medida del propio dibujo del
 * diseño. La esquina de abajo a la izquierda va a escuadra porque ahi arranca el
 * rabito, que continua el borde en linea recta.
 */
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-group.is-style-bocadillo {
	position: relative;
	/* El color se declara aqui y no se hereda: el bocadillo es blanco, asi que su
	   texto tiene que ser oscuro este donde este. Dentro de un core/cover, que
	   pinta su texto en blanco por defecto, sin esto no se leia nada. */
	color: var( --text );
	/* 36 a la derecha y 40 en el resto: en el diseño la caja de texto mide 480
	   dentro de un bocadillo de 557.28, o sea que se come 3px del relleno
	   derecho. Con 40 por los cuatro lados el titular se parte en dos lineas por
	   esos 3px y la banda crece 37. */
	padding: 40px 36px 40px 40px;
	border-radius: 38px 38px 38px 0;

	/*
	 * El fondo va como imagen aunque sea un color plano, y su caja mide 41 mas
	 * de alto que el bocadillo: esos 41 son los que le tocan al rabito, que
	 * hereda esta misma imagen y este mismo tamano. Asi el degradado sigue de
	 * una pieza y no se ve el corte que dejaba repetirlo en el rabito.
	 */
	background-image: linear-gradient( var( --surface ), var( --surface ) );
	background-repeat: no-repeat;
	background-size: 100% calc( 100% + 41px );
}

/*
 * El rabito.
 *
 * La caja del pseudoelemento no es el rabito: es el bocadillo entero mas los
 * 41 que cae, con el mismo origen y el mismo fondo heredado. De todo eso solo
 * se ve el rabito, porque una mascara tapa el resto.
 *
 * Ese rodeo es lo que hace que el degradado no se corte. Antes el rabito era
 * una caja de 85x42 con su propio fondo, asi que el degradado empezaba otra vez
 * dentro de el y se veia la juntura. Ahora los dos pintan la MISMA imagen al
 * mismo tamano —de ahi el background-size del bocadillo, 41 mas alto de lo que
 * mide— y cada uno enseña su trozo: el degradado pasa de uno a otro sin salto.
 *
 * La forma sale de medir el SVG del diseño (nodo 563:6162): 85 de ancho en el
 * borde, 41 de caida, el lado derecho casi recto y la punta redondeada, no en
 * pico. Va en un fichero y no en un clip-path porque una mascara si se puede
 * colocar y escalar; el recorte habia que escribirlo en coordenadas absolutas.
 *
 * La mascara se ancla abajo, asi que el rabito arranca un pixel por encima del
 * borde: si empezara justo en el 100 %, el redondeo dejaria una linea de fondo
 * entre las dos piezas.
 */
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-bocadillo::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc( 100% + 41px );

	/* Cubre el bocadillo entero, aunque solo se vea el rabito: sin esto se
	   comeria los clics y la seleccion del texto de dentro. */
	pointer-events: none;

	background-image: inherit;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-webkit-mask: url( ../images/rabito.svg ) left bottom / 85px 42px no-repeat;
	mask: url( ../images/rabito.svg ) left bottom / 85px 42px no-repeat;
}

/*
 * Los hijos son bloques del core y traen sus margenes: se los quitamos y
 * ponemos los del diseño.
 *
 * Los dos selectores son el mismo sitio: en el front WordPress le devuelve a los
 * temas clasicos el div interno del grupo y en el lienzo el texto cuelga
 * directo. Es lo mismo que hace .mm-banda en layout.css.
 */
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-bocadillo > *,
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-bocadillo > .wp-block-group__inner-container > * {
	margin-block: 0;
}

:is( .mm-contenido, .editor-styles-wrapper ) .is-style-bocadillo > * + *,
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-bocadillo > .wp-block-group__inner-container > * + * {
	margin-block-start: var( --s-4 );
}

/* La bajada va pegada al titular. Los dos caminos otra vez, y no un descendente
   suelto: con el div interno por medio, un ".is-style-bocadillo p" pesa (0,2,2)
   y pierde contra el (0,3,0) de la regla de arriba, asi que la bajada se
   separaba 16 en vez de 8. */
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-bocadillo > :is( h1, h2, h3, h4, h5, h6 ) + p,
:is( .mm-contenido, .editor-styles-wrapper ) .is-style-bocadillo > .wp-block-group__inner-container > :is( h1, h2, h3, h4, h5, h6 ) + p {
	margin-block-start: var( --s-2 );
}

/* En movil el dibujo va a la escala del frame de 390: 28 de caida en vez de 41. */
@media ( max-width: 1099px ) {
	:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-group.is-style-bocadillo {
		padding: var( --s-6 );
		border-radius: 26px 26px 26px 0;
		background-size: 100% calc( 100% + 28px );
	}

	/* El mismo dibujo a la escala del frame de 390. Al ser una mascara basta con
	   cambiarle el tamano: no hay que redibujar la forma. */
	:is( .mm-contenido, .editor-styles-wrapper ) .is-style-bocadillo::after {
		height: calc( 100% + 28px );
		-webkit-mask-size: 58px 29px;
		mask-size: 58px 29px;
	}
}

/*
 * Se quita el recorrido, no el resultado: la bolita sigue rellenando el boton y
 * la flecha sigue estando donde toca, pero llegan de golpe. Un fundido de color
 * o de opacidad se queda, que no marea.
 */
@media ( prefers-reduced-motion: reduce ) {
	.mm-boton,
	.mm-boton::before,
	:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button__link,
	:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button__link::before,
	.mm-boton--fantasma .mm-icono,
	.mm-enlace .mm-icono svg {
		transition: none;
	}

	.mm-enlace:hover .mm-icono svg,
	.mm-enlace:focus-visible .mm-icono svg {
		transform: none;
	}
}

/*
 * Boton con la flecha detras (Figma 1155-11978, "See sample material").
 *
 * El icono va en un pseudoelemento porque un core/button solo guarda texto. Es
 * la flecha del tema, que apunta a la derecha, girada un cuarto: asi no hay un
 * SVG nuevo para lo mismo. En mascara, para que la tiña el color del texto y
 * sirva igual en el boton relleno y en el de linea.
 */
.mm-boton--abajo::after,
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button.mm-boton--abajo .wp-block-button__link::after {
	content: '';
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url( ../images/flecha.svg ) center / contain no-repeat;
	mask: url( ../images/flecha.svg ) center / contain no-repeat;
	transform: rotate( 90deg );
}

/*
 * Boton que abre un video (cabecera sobre foto de la landing de Circle).
 *
 * El triangulo del play va detras de la etiqueta, en un pseudoelemento como la
 * flecha de arriba y por lo mismo: un core/button solo guarda texto. Es el Play
 * duotone de Phosphor, en mascara, asi que lo tiñe el color del texto.
 *
 * La clase es ademas el gancho de assets/js/materiales.js: si el destino es un
 * fichero de video, se abre en el visor en vez de navegar.
 */
:is( .mm-contenido, .editor-styles-wrapper ) .wp-block-button.mm-boton--video .wp-block-button__link::after {
	content: '';
	flex: none;
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: url( ../iconos/play-duotone.svg ) center / contain no-repeat;
	mask: url( ../iconos/play-duotone.svg ) center / contain no-repeat;
}

/* ------------------------------------------------ Casilla de tarjeta */

/*
 * Una tarjeta entera que es una casilla: los retos de «¿Que necesita tu centro?»
 * y las soluciones del simulador de Circle (prototipo de la landing de
 * instituciones, 30-sep-2026).
 *
 * El <input> de verdad va estirado e invisible sobre toda la tarjeta, y lo que
 * se ve es la casilla dibujada. Asi toda la tarjeta es zona de clic —muy por
 * encima de los 24 que pide el objetivo de puntero— sin dejar de ser una
 * casilla nativa para el teclado y el lector de pantalla. La tarjeta que la
 * lleve tiene que ser el ancla: position: relative.
 *
 * El z-index del input NO es de adorno. La marca de dentro de la casilla vive
 * siempre en el arbol con opacity: 0 y transform, y cualquiera de las dos crea
 * contexto de apilamiento: pasaba a pintarse en la misma capa que el input y,
 * al ir despues en el documento, quedaba encima. El clic justo sobre la casilla
 * se lo llevaba una marca invisible y no marcaba nada; el resto de la tarjeta
 * si, que es lo que lo hacia tan dificil de ver. Se comprueba con
 * elementFromPoint() en el centro de la casilla: tiene que devolver el input.
 */
.mm-casilla__input {
	position: absolute;
	z-index: 2;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

/* La casilla del frame: 24 con el borde funcional de los campos y radio 6, que
   no es un paso del sistema. */
.mm-casilla {
	flex: none;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 2px solid var( --border-fn );
	border-radius: 6px;
	background: var( --surface );
	transition:
		background-color var( --motion-link ) var( --motion-ease ),
		border-color var( --motion-link ) var( --motion-ease );
}

/* La marca, dibujada con dos bordes girados: asi tiene el trazo grueso del
   frame sin un SVG mas. El margen la sube a su centro optico. */
.mm-casilla::after {
	content: '';
	width: 6px;
	height: 11px;
	margin-block-start: -2px;
	border: solid var( --text-inverse );
	border-width: 0 3px 3px 0;
	transform: rotate( 45deg );
	opacity: 0;
}

/*
 * Marcada se rellena Y enseña la marca: el estado no depende solo del color.
 * El color lo pone quien la usa en --mm-casilla —cada area del simulador tiene
 * el suyo—; sin el, el rojo de marca.
 */
.mm-casilla__input:checked + * .mm-casilla {
	border-color: var( --mm-casilla, var( --accent ) );
	background: var( --mm-casilla, var( --accent ) );
}

.mm-casilla__input:checked + * .mm-casilla::after {
	opacity: 1;
}

/* El foco se dibuja sobre la tarjeta entera, que es lo que se pulsa. */
.mm-casilla__input:focus-visible + * {
	outline: 3px solid var( --focus );
	outline-offset: 3px;
}

@media ( prefers-reduced-motion: reduce ) {
	.mm-casilla {
		transition: none;
	}
}