/**
 * Megamenú del header.
 *
 * CSS propio a propósito, igual que el del buscador y el de Mercado: el
 * Tailwind del tema viene precompilado por Vite y purga las clases que no
 * encuentra en el build, así que las utilidades nuevas escritas en PHP no
 * existirían en assets/css/index.css.
 *
 * Accesibilidad cubierta aquí:
 *   - Contraste de texto e iconos sobre cada fondo (1.4.3 AA, 1.4.11 AA).
 *   - Área táctil de 44 px en todos los enlaces del panel (2.5.5 AAA).
 *   - El panel salva el hueco que lo separa del botón para que el puntero no
 *     lo pierda al bajar (1.4.13 Contenido al recibir el puntero o el foco).
 *   - Nada depende de una transición para ser visible, así que el bloque
 *     global de prefers-reduced-motion no rompe el componente.
 *   - Bordes explícitos en forced-colors, donde los fondos de color se van.
 *
 * @package Tiendasisimo
 * @since 1.6.0
 */

/* ==========================================================================
   0. Fichas de color y medidas
   ========================================================================== */

.ts-mega,
.ts-mega__panel,
.ts-mega-movil {
	--mm-morado: var(--color-isimo-purple, #513685);
	--mm-morado-hondo: #2f1d52;
	--mm-verde: var(--color-isimo-green, #93d50a);
	/* El verde de los botones del header, algo más apagado que el de marca. */
	--mm-verde-suave: #8dc63f;
	--mm-amarillo: var(--color-isimo-yellow, #ffbb3a);

	/* Tinta y grises. El gris llega a 5.4:1 sobre blanco, por encima del
	   4.5:1 que exige 1.4.3 en tamaño normal. */
	--mm-tinta: #1f1636;
	--mm-gris: #625b76;
	--mm-linea: #e9e6f0;
	--mm-nube: #f6f5fa;
	--mm-lila: #f3f0fa;
	--mm-blanco: #ffffff;

	--mm-r-lg: 1.35rem;
	--mm-r-md: 0.8rem;
	--mm-r-sm: 0.55rem;

	--mm-sombra:
		0 2px 4px rgba(24, 14, 44, 0.05),
		0 28px 60px -24px rgba(24, 14, 44, 0.45);
	--mm-transicion: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Alto mínimo de cada fila: 44 px es el objetivo táctil de 2.5.5 (AAA). */
	--mm-fila: 2.75rem;
}

/* ==========================================================================
   1. La cabecera
   ========================================================================== */

/**
 * Tres franjas apiladas: servicio, marca y navegación.
 *
 * Antes eran dos, y la navegación compartía la segunda con el logotipo y los
 * dos botones de acción. Con seis entradas ya iba justa —a 1,5rem suman más
 * de los 960 px útiles que hay a 1024— y con la séptima se desbordaba. Dándole
 * franja propia dispone del ancho entero del contenedor, que es además donde
 * el megamenú tiene sitio para desplegarse.
 */
.ts-header__servicio {
	padding-block: 0.6rem;
}

.ts-header__servicio-enlace {
	font-size: clamp(0.8125rem, 0.95vw, 1.25rem);
}

.ts-header__buscar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ts-header__marca {
	padding-block: 0.75rem;
}

/**
 * El logotipo mide 290×186 px de origen, que a tamaño natural se come toda la
 * altura de la cabecera. Se ata a la altura —no al ancho— para que las tres
 * franjas queden proporcionadas, y se deja fluido para que no dé el salto de
 * un breakpoint.
 */
.ts-header__logo img {
	width: auto;
	height: clamp(120px, 40vw, 186px);
}

@media (min-width: 1024px) {
	.ts-header__logo img {
		/* 186 px es el tamaño natural del archivo: por encima se vería
		   emborronado, así que ahí está el techo. */
		height: clamp(140px, 13vw, 186px);
	}
}

/**
 * Los botones de acción también se hacen fluidos. A 1,5rem fijos ocupaban
 * unos 620 px entre los dos, que junto al logotipo no dejaban aire a 1024.
 */
.ts-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--a11y-objetivo-min, 44px);
	padding-inline: clamp(1rem, 1.7vw, 2rem);
	padding-block: 0.5rem;
	font-size: clamp(0.9375rem, 1.15vw, 1.5rem);
	line-height: 1.2;
	text-align: center;
}

/**
 * La franja de navegación solo existe en escritorio; en móvil el menú es el
 * desplegable de siempre.
 *
 * El ocultado va aquí y no con `hidden lg:block` porque `lg:block` no está en
 * el Tailwind compilado: Vite purga lo que no encuentra en el build, y esa
 * utilidad no la usaba ninguna plantilla. Habría dejado la barra escondida
 * también en escritorio.
 */
.ts-header__navegacion {
	display: none;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

@media (min-width: 1024px) {
	.ts-header__navegacion {
		display: block;
	}
}

/**
 * La capa del megamenú.
 *
 * Sustituye a la utilidad `z-50` que llevaba el contenedor de la navegación:
 * el panel se pinta dentro de esta franja, así que si no gana al contenido de
 * la página, el megamenú aparece por debajo del héroe.
 */
.ts-nav-capa {
	position: relative;
	z-index: 900;
}

/**
 * La fila de navegación.
 *
 * El cuerpo de letra es fluido con techo en 1,5rem, que es exactamente el
 * `text-2xl` que tenían las entradas: en pantallas grandes la barra se lee
 * igual que antes, y en las de 1024 encoge lo justo para caber entera.
 */
.ts-nav {
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: clamp(1rem, 2vw, 2.5rem);
	row-gap: 0.25rem;
	padding-block: 0.6rem;
}

.ts-nav .ts-nav__enlace {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	font-size: clamp(1.0625rem, 1.3vw, 1.5rem);
	line-height: 1.3;
}

/**
 * El hover de la barra pasa de utilidad de Tailwind a regla propia, porque
 * `hover:text-[#8DC63F]` no sobrevive al purgado si se escribe en una plantilla
 * nueva. El color es exactamente el que había (4.54:1 sobre el morado del
 * header, por encima del 4.5:1 que pide 1.4.3).
 */
.ts-nav__enlace:hover {
	color: #8dc63f;
}

/* La entrada de la página que se está viendo, marcada sin depender del color
   (1.4.1): además del tono, lleva su propia banda debajo. */
.ts-nav .ts-nav__enlace[aria-current="page"] {
	color: #8dc63f;
	box-shadow: inset 0 -2px 0 0 currentColor;
}

/* ==========================================================================
   2. Disparador del megamenú
   ========================================================================== */

/* Sin `position: relative` a propósito: el panel se posiciona contra la fila
   de navegación, no contra el disparador. Ver `.ts-mega__panel`. */
.ts-mega {
	display: flex;
	align-items: center;
}

.ts-mega__disparador {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-weight: inherit;
	color: inherit;
	cursor: pointer;
	transition: color var(--mm-transicion);
}

.ts-mega__disparador:hover,
.ts-mega__disparador[aria-expanded="true"] {
	color: var(--mm-verde-suave);
}

.ts-mega__galon {
	width: 1em;
	height: 1em;
	/* El galón es un poco más pequeño que el texto: acompaña, no compite. */
	scale: 0.8;
	flex: 0 0 auto;
	transition: transform var(--mm-transicion);
}

.ts-mega__disparador[aria-expanded="true"] .ts-mega__galon {
	transform: rotate(180deg);
}

/**
 * Subrayado de estado.
 *
 * El color no puede ser lo único que diga que el panel está abierto (1.4.1
 * Uso del color), así que además aparece una banda bajo el rótulo.
 */
.ts-mega__rotulo {
	position: relative;
}

.ts-mega__rotulo::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.35rem;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0;
	transition: opacity var(--mm-transicion);
}

.ts-mega__disparador[aria-expanded="true"] .ts-mega__rotulo::after {
	opacity: 1;
}

/* ==========================================================================
   3. El panel
   ========================================================================== */

/**
 * El panel ocupa el contenedor entero, no el ancho de su disparador.
 *
 * Por eso `.ts-mega` no crea contexto de posicionamiento y sí lo hace la fila
 * de navegación: el panel se estira de borde a borde del contenedor del
 * sitio, alineado con el logotipo y con el contenido de la página. De paso
 * desaparece el cálculo que antes hacía falta para que no se saliera por la
 * izquierda en pantallas de 1024.
 */
.ts-nav-fila {
	position: relative;
}

.ts-mega__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 40;

	/* En portátiles de 768 px de alto el panel más largo no cabe entero. El
	   techo lo pone el JS, que sabe a qué altura ha quedado el panel. */
	overflow-y: auto;
	overscroll-behavior: contain;

	background: var(--mm-blanco);
	color: var(--mm-tinta);
	border: 1px solid var(--mm-linea);
	border-top: 0;
	border-radius: 0 0 var(--mm-r-lg) var(--mm-r-lg);
	box-shadow: var(--mm-sombra);

	text-align: left;
}

.ts-mega__panel[hidden] {
	display: none;
}

/**
 * Puente sobre el hueco que separa el panel del disparador.
 *
 * El botón termina donde acaba su texto, y por debajo queda el aire de la
 * fila. Sin este puente, bajar el ratón hacia el panel lo apaga a mitad de
 * camino. WCAG 1.4.13 exige que el contenido que aparece al pasar el puntero
 * se pueda señalar sin que desaparezca.
 */
.ts-mega__panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1.5rem;
	height: 1.5rem;
}

/**
 * Entrada del panel.
 *
 * Se anima el lienzo y no el panel, porque el panel lleva su propio
 * transform con el ajuste horizontal y los dos se pisarían.
 */
.ts-mega__lienzo {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem 2.25rem;
	padding: 2rem;

	opacity: 0;
	transform: translateY(-0.5rem);
	transition:
		opacity 0.18s ease,
		transform 0.18s ease;
}

.ts-mega.esta-abierto .ts-mega__lienzo {
	opacity: 1;
	transform: none;
}

/**
 * En portátiles de 768 px de alto —que siguen siendo muchísimos— la columna
 * más larga se queda a un palmo de caber. Apretando el aire del panel entra
 * entera y se evita tener que desplazarlo por dentro.
 */
@media (max-height: 820px) {
	.ts-mega__lienzo {
		padding: 1.1rem 1.6rem;
		gap: 1.25rem 1.6rem;
	}

	.ts-mega__enlace--doc {
		padding-block: 0.35rem;
	}

	/* La ficha se redeclara en `.ts-mega__panel`, así que hay que pisarla ahí
	   también: si no, la del panel gana a la que hereda de `.ts-mega`. */
	.ts-mega,
	.ts-mega__panel {
		--mm-fila: 2.5rem;
	}

	.ts-mega__titulo {
		margin-bottom: 0.5rem;
	}

	.ts-mega__subtitulo {
		margin-top: 0.7rem;
	}
}

/* ==========================================================================
   4. Bloque de presentación
   ========================================================================== */

/**
 * Columna estrecha a la izquierda. Cuando el panel no da para cuatro
 * columnas, se parte sola y ocupa el renglón entero (flex-wrap), sin
 * necesidad de una consulta de medios.
 */
.ts-mega__intro {
	flex: 1 1 12rem;
	align-self: stretch;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;

	padding: 1.25rem;
	background: var(--mm-lila);
	border-radius: var(--mm-r-md);
}

/**
 * El título es el enlace a la sección. No hay botón aparte: una llamada a la
 * acción del tipo «ver la sección completa» solo repite lo que ya dice el
 * nombre, y encima obliga a leer dos veces lo mismo.
 */
.ts-mega__intro-titulo {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--mm-morado-hondo);
	text-decoration: none;
}

a.ts-mega__intro-titulo:hover,
a.ts-mega__intro-titulo:focus-visible {
	color: var(--mm-morado);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ts-mega__intro-texto {
	margin: 0;
	max-width: 46rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--mm-gris);
}

/* ==========================================================================
   5. Columnas
   ========================================================================== */

.ts-mega__columnas {
	/* `flex: 999` para que las columnas se queden con todo el hueco sobrante
	   y el bloque de presentación conserve su ancho. */
	flex: 999 1 32rem;

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;

	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-mega__columna {
	position: relative;
	min-width: 0;
}

/**
 * Marca de agua del eje.
 *
 * El icono no acompaña al título dentro de una pastilla de color, que es el
 * recurso que se ve en todas partes; va grande, sin fondo y muy apagado en la
 * esquina de la columna, como una filigrana. Es decorativo puro —lleva
 * aria-hidden— así que no le aplica el 3:1 de 1.4.11.
 */
.ts-mega__marca-agua {
	position: absolute;
	top: -0.35rem;
	right: -0.15rem;
	z-index: 0;

	width: 2.75rem;
	height: 4.75rem;
	stroke-width: 1.1;

	pointer-events: none;
}

/* El texto va por delante de la filigrana, siempre. */
.ts-mega__titulo,
.ts-mega__lista,
.ts-mega__subtitulo {
	position: relative;
	z-index: 1;
}

/**
 * Cabecera de la columna. El filete de debajo lleva el color del eje.
 *
 * El filete no cruza la columna entera: es `inline-block`, así que mide lo
 * que mide la palabra más un remate fijo por la derecha. Rebasa siempre el
 * título —«Social» es corto, «Gobernanza» largo— y nunca llega al borde, que
 * es donde empezaba a parecer un separador y no un subrayado.
 */
.ts-mega__titulo {
	display: inline-block;
	min-width: 8rem;
	margin: 0 0 0.75rem 0.55rem;
	padding: 0.1rem 2.25rem 0.55rem 0rem;

	border-bottom: 1px solid var(--mm-linea);
	color: var(--mm-morado-hondo);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	transition: color var(--mm-transicion);
}

a.ts-mega__titulo:hover,
a.ts-mega__titulo:focus-visible {
	color: var(--mm-morado);
}

.ts-mega__titulo--rotulo {
	/* Cuando la columna no tiene destino propio no es un enlace, y no debe
	   parecerlo. */
	cursor: default;
}

/**
 * Código de color de cada eje.
 *
 * Nunca es lo único que distingue una columna de otra —cada una lleva su
 * nombre escrito—, así que no entra en conflicto con 1.4.1 Uso del color.
 */
.ts-mega__columna--hoja .ts-mega__marca-agua {
	/* color: var(--mm-verde); */
	color: rgba(0, 0, 0, 0.3);
	opacity: 0.2;
}

/* .ts-mega__columna--hoja .ts-mega__titulo {
	border-bottom-color: var(--mm-verde);
} */

.ts-mega__columna--personas .ts-mega__marca-agua {
	/* color: var(--mm-amarillo); */
	color: rgba(0, 0, 0, 0.3);
	opacity: 0.3;
}

/* .ts-mega__columna--personas .ts-mega__titulo {
	border-bottom-color: var(--mm-amarillo);
} */

.ts-mega__columna--escudo .ts-mega__marca-agua {
	/* color: var(--mm-morado); */
	color: rgba(0, 0, 0, 0.3);
	opacity: 0.16;
}

/* .ts-mega__columna--escudo .ts-mega__titulo {
	border-bottom-color: var(--mm-morado);
} */

.ts-mega__columna--brujula .ts-mega__marca-agua {
	color: var(--mm-morado);
	opacity: 0.12;
}

/* ==========================================================================
   6. Enlaces de la columna
   ========================================================================== */

.ts-mega__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

/**
 * Filas de texto, sin icono.
 *
 * Lo que anuncia que la fila lleva a alguna parte es el filete que crece a su
 * izquierda al pasar por encima o al recibir el foco, más el cambio de fondo
 * y de color. Tres señales, ninguna de ellas solo cromática (1.4.1).
 */
.ts-mega__enlace {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--mm-fila);
	padding: 0.4rem 0.55rem;

	border-left: 2px solid transparent;
	border-radius: 0 var(--mm-r-sm) var(--mm-r-sm) 0;
	color: var(--mm-gris);
	font-size: 0.9375rem;
	line-height: 1.35;
	text-decoration: none;
	transition:
		background-color var(--mm-transicion),
		color var(--mm-transicion),
		border-color var(--mm-transicion),
		padding-left var(--mm-transicion);
}

.ts-mega__enlace:hover,
.ts-mega__enlace:focus-visible {
	/* padding-left: 0.8rem; */
	background: var(--mm-nube);
	/* border-left-color: var(--mm-morado); */
	color: var(--mm-morado);
}

.ts-mega__enlace[aria-current="page"] {
	border-left-color: var(--mm-morado);
	color: var(--mm-morado);
	font-weight: 600;
}

.ts-mega__enlace-texto {
	min-width: 0;
}

/**
 * Icono de los enlaces a documento.
 *
 * Va suelto y a un solo trazo, sin pastilla de color detrás: dice «esto es un
 * archivo, no una página» y se aparta. Es decorativo —el aviso de que abre
 * una ventana nueva lo da el texto oculto del enlace—, así que no le aplica
 * el 3:1 de 1.4.11.
 */
.ts-mega__enlace-svg {
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
	opacity: 0.65;
	transition: opacity var(--mm-transicion);
}

.ts-mega__enlace--doc:hover .ts-mega__enlace-svg,
.ts-mega__enlace--doc:focus-visible .ts-mega__enlace-svg {
	opacity: 1;
}

/* Rótulo del grupo de documentos. */
.ts-mega__subtitulo {
	margin: 1.1rem 0 0.4rem;
	padding: 0 0.55rem 0.3rem;
	border-bottom: 1px solid var(--mm-linea);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mm-gris);
}

/**
 * No hay variante de dos columnas a propósito.
 *
 * La franja de navegación solo existe a partir de 1024 px, y ahí el panel ya
 * mide 992: da de sobra para tres columnas de ~300 px. Bajar a dos por una
 * consulta de medios sobre el ancho de la ventana —no del panel— solo servía
 * para alargarlo hasta no caber de alto.
 */

/* ==========================================================================
   7. Acordeón del menú móvil
   ========================================================================== */

/**
 * El panel flotante no cabe en 375 px, así que en móvil la misma estructura
 * se despliega hacia abajo. Todo va sobre el morado del header, de modo que
 * los fondos son velos blancos translúcidos y el texto se queda en blanco
 * (8.6:1 sobre el morado de marca).
 */
.ts-mega-movil {
	margin-block: 0.25rem;
}

.ts-mega-movil__disparador {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	min-height: var(--mm-fila);
	padding: 0.5rem 0;

	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	font-size: 1.125rem;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
}

.ts-mega-movil__galon {
	width: 1.25rem;
	height: 1.25rem;
	flex: 0 0 auto;
	transition: transform var(--mm-transicion);
}

[aria-expanded="true"] > .ts-mega-movil__galon {
	transform: rotate(180deg);
}

.ts-mega-movil__panel {
	padding: 0.5rem 0 0.25rem;
}

.ts-mega-movil__panel[hidden],
.ts-mega-movil__lista[hidden] {
	display: none;
}

.ts-mega-movil__todo {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: var(--mm-fila);
	margin-bottom: 0.5rem;
	padding: 0.4rem 0.9rem;

	background: var(--mm-verde-suave);
	color: var(--mm-morado-hondo);
	border-radius: 0.6rem;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.ts-mega-movil__todo-galon {
	width: 0.95rem;
	height: 0.95rem;
}

.ts-mega-movil__grupo + .ts-mega-movil__grupo {
	margin-top: 0.4rem;
}

.ts-mega-movil__grupo-boton {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	min-height: var(--mm-fila);
	padding: 0.5rem 0.75rem;

	background: rgba(255, 255, 255, 0.08);
	border: 0;
	/* El color del eje, en el canto izquierdo. Es el mismo código que en
	   escritorio lleva el filete bajo el título de la columna. */
	border-left: 3px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--mm-r-sm);
	color: inherit;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.ts-mega-movil__grupo--hoja .ts-mega-movil__grupo-boton {
	border-left-color: var(--mm-verde);
}

.ts-mega-movil__grupo--personas .ts-mega-movil__grupo-boton {
	border-left-color: var(--mm-amarillo);
}

.ts-mega-movil__grupo--escudo .ts-mega-movil__grupo-boton {
	border-left-color: var(--mm-blanco);
}

.ts-mega-movil__grupo-boton[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.16);
}

.ts-mega-movil__grupo-texto {
	flex: 1 1 auto;
	min-width: 0;
}

.ts-mega-movil__lista {
	margin: 0.25rem 0 0.5rem;
	padding: 0 0 0 0.75rem;
	list-style: none;
	border-left: 2px solid rgba(255, 255, 255, 0.18);
}

.ts-mega-movil__enlace {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--mm-fila);
	padding: 0.45rem 0.6rem;

	border-radius: var(--mm-r-sm);
	color: inherit;
	font-size: 0.9375rem;
	line-height: 1.35;
	text-decoration: none;
}

.ts-mega-movil__enlace:hover,
.ts-mega-movil__enlace:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}

.ts-mega-movil__enlace--todo {
	font-weight: 600;
	color: var(--mm-verde-suave);
}

.ts-mega-movil__enlace-svg {
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
	opacity: 0.75;
}

/* ==========================================================================
   8. Modo de alto contraste de Windows (forced-colors)
   ========================================================================== */

/**
 * En este modo el sistema tira los fondos de color, y con ellos se irían los
 * discos de los iconos y el borde del panel. Se sustituyen por bordes reales,
 * que sí se respetan.
 */
@media (forced-colors: active) {
	.ts-mega__panel {
		border: 2px solid CanvasText;
	}

	.ts-mega__enlace:hover,
	.ts-mega__enlace:focus-visible,
	.ts-mega-movil__enlace:hover,
	.ts-mega-movil__enlace:focus-visible {
		/* El cambio de fondo no se ve; se marca con subrayado. */
		text-decoration: underline;
	}

	/* La filigrana no aporta nada aquí y sí puede ensuciar: fuera. */
	.ts-mega__marca-agua {
		display: none;
	}

	.ts-mega-movil__grupo-boton,
	.ts-mega__intro,
	.ts-mega-movil__todo {
		border: 1px solid CanvasText;
	}
}

/* ==========================================================================
   9. Preferencia de menos movimiento
   ========================================================================== */

/**
 * El bloque global de accessibility.css ya recorta todas las transiciones a
 * 0,01 ms. Lo único que hace falta añadir es que el lienzo del panel no se
 * quede invisible esperando una transición que no va a ocurrir.
 */
@media (prefers-reduced-motion: reduce) {
	.ts-mega__lienzo {
		opacity: 1;
		transform: none;
	}
}