/*
 * Reinicio, escala, chrome y las piezas de forma del sistema: diagonal, pétalo,
 * botones y anillo de foco. Todo valor de color y de familia sale de un token;
 * aquí no se escribe ninguno.
 */

/* ---------- Reinicio ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

body {
	min-height: 100vh;
	background: var(--color-surface-base);
	color: var(--color-ink-primary);
	font-family: var(--font-family-base);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--font-leading-normal);
	overflow-wrap: break-word;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* ---------- Foco ----------
 * Una sola regla. La variante la decide el contexto: al entrar en una
 * superficie oscura cambia `--ring`, no la regla ni la clase del control. */

:root {
	--ring: var(--color-border-focus);
}

.is-emphasis {
	--ring: var(--color-border-focus-inverse);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ring);
	outline-offset: 2px;
}

/* ---------- Tinta por contexto ----------
 * El mismo mecanismo del anillo de foco, aplicado a lo demás que se apaga: la
 * pieza pide su tinta por el nombre de contexto —sin `--color-`, que es el
 * prefijo de los tokens— y la superficie decide cuál es. Fijadas en absoluto,
 * la tinta apagada y el rótulo del control quedaban muy por debajo del
 * contraste en cuanto caían dentro de una superficie oscura.
 *
 * `--ink-eyebrow` no se declara en la raíz a propósito: su valor por defecto
 * depende de la familia de la sección, y una propiedad personalizada que
 * contiene otra se resuelve donde se declara, así que declarada arriba llegaría
 * con la familia de la raíz ya fijada. Como respaldo del `var()` sí se resuelve
 * sobre el elemento, que es donde la familia se conoce. */

:root {
	--ink-muted: var(--color-ink-muted);
	--ink-secondary: var(--color-ink-secondary);
	--control-ink: var(--color-brand-blue);
	--control-border: var(--color-brand-blue);
	--control-surface-hover: var(--color-surface-sunken);
}

.is-emphasis {
	--ink-muted: var(--color-ink-on-emphasis);
	--ink-secondary: var(--color-ink-on-emphasis);
	--ink-eyebrow: var(--color-ink-inverse);
	--control-ink: var(--color-ink-inverse);
	--control-border: var(--color-ink-inverse);
	--control-surface-hover: color-mix(in srgb, var(--color-ink-inverse) 18%, transparent);
}

/* ---------- Escala ---------- */

h1,
.text-h1 {
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-black);
	line-height: var(--font-leading-tight);
	letter-spacing: var(--font-tracking-tight);
}

h2,
.text-h2 {
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-black);
	line-height: var(--font-leading-snug);
	letter-spacing: var(--font-tracking-tight);
}

h3,
.text-h3 {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-leading-snug);
}

h4,
.text-h4 {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-leading-snug);
}

.text-display {
	font-size: var(--font-size-display);
	font-weight: var(--font-weight-black);
	line-height: var(--font-leading-tight);
	letter-spacing: var(--font-tracking-tight);
}

.text-lead {
	font-size: var(--font-size-body-lg);
	font-weight: var(--font-weight-light);
}

.text-small {
	font-size: var(--font-size-small);
}

.text-caption {
	font-size: var(--font-size-caption);
	color: var(--ink-muted);
}

.eyebrow {
	display: block;
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-black);
	line-height: var(--font-leading-snug);
	letter-spacing: var(--font-tracking-eyebrow);
	text-transform: uppercase;
	/* Tinta de rama, no color de rama: a este tamaño el color de forma de alguna
	 * familia se queda por debajo del contraste que exige el texto pequeño. Y
	 * ninguna tinta de rama se lee sobre la superficie de énfasis, así que ahí
	 * manda el contexto. */
	color: var(--ink-eyebrow, var(--color-branch-ink));
}

/* La script nunca baja de 28px ni usa el interlineado ceñido: una mayúscula
 * acentuada tocaría el descendente de la línea de arriba. */
.script {
	font-family: var(--font-family-display);
	font-size: var(--font-size-display);
	font-weight: var(--font-weight-regular);
	line-height: var(--font-leading-snug);
	letter-spacing: normal;
	text-transform: none;
}

p,
li,
dd {
	max-width: var(--spacing-measure);
}

a {
	color: var(--color-ink-link);
}

/* ---------- Maquetación ---------- */

.container {
	width: 100%;
	max-width: var(--layout-max-width);
	margin-inline: auto;
	padding-inline: var(--spacing-gutter);
}

.site-main {
	padding-block: var(--spacing-xl);
}

.site-main > * + * {
	margin-top: var(--spacing-lg);
}

/* ---------- Enlace de salto ----------
 * Se desplaza fuera de la vista en vez de ocultarse: tiene que seguir siendo
 * el primer elemento que recibe el foco. */

.skip-link {
	position: absolute;
	inset-inline-start: var(--spacing-sm);
	inset-block-start: var(--spacing-sm);
	z-index: 100;
	transform: translateY(-250%);
	padding: var(--spacing-sm) var(--spacing-md);
	background: var(--color-surface-raised);
	color: var(--color-ink-link);
	border-radius: var(--rounded-sm);
	box-shadow: var(--shadow-overlay);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	transition: transform 180ms ease;
}

.skip-link:focus {
	transform: translateY(0);
}

/* ---------- Cabecera ---------- */

.site-header {
	background: var(--color-surface-base);
	position: relative;
	z-index: 40;
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
	padding-block: var(--spacing-sm);
}

.site-header__brand {
	display: inline-flex;
	align-items: center;
	min-height: var(--layout-touch-target);
	text-decoration: none;
	color: var(--color-brand-deep);
}

.site-header__logo {
	width: auto;
	height: 40px;
}

.site-header__name {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-black);
	letter-spacing: var(--font-tracking-tight);
}

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	min-height: var(--layout-touch-target);
	min-width: var(--layout-touch-target);
	padding: var(--spacing-xs) var(--spacing-md);
	background: transparent;
	/* Este borde es el único límite visible del control: va en el azul de marca
	 * porque el gris de borde no alcanza el contraste mínimo de un elemento no
	 * textual sobre el crema, y conmuta con el contexto por lo mismo. */
	border: 2px solid var(--control-border);
	border-radius: var(--rounded-pill);
	color: var(--control-ink);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-black);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.nav-toggle[hidden] {
	display: none;
}

.nav-toggle__bars {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.nav-toggle__bars::before {
	inset-block-start: -6px;
}

.nav-toggle__bars::after {
	inset-block-start: 6px;
}

/* ---------- Navegación ----------
 * Sin JavaScript la lista se queda en el flujo del documento: nada la oculta y
 * el botón de apertura ni siquiera aparece. */

.site-nav {
	width: 100%;
}

/* Los enlaces apilados llevan separación entre sí: dos objetivos táctiles
 * contiguos y pegados se pulsan mal aunque cada uno mida lo que debe. */
.site-nav__list,
.site-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.site-nav__list .menu-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: none;
}

.site-nav__list a {
	display: flex;
	align-items: center;
	min-height: var(--layout-touch-target);
	padding: var(--spacing-xs) var(--spacing-sm);
	color: var(--color-ink-primary);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
}

.site-nav__list .sub-menu {
	flex-basis: 100%;
	padding-inline-start: var(--spacing-md);
	margin-block-start: var(--spacing-xs);
}

.site-nav__list .menu-item-has-children > .sub-menu {
	display: none;
}

.site-nav__list .menu-item-has-children.is-open > .sub-menu {
	display: block;
}

.no-js .site-nav__list .menu-item-has-children > .sub-menu {
	display: block;
}

.site-nav__disclosure {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--layout-touch-target);
	min-height: var(--layout-touch-target);
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.site-nav__disclosure > span {
	display: block;
	width: 0;
	height: 0;
	border-inline: 5px solid transparent;
	border-block-start: 6px solid currentColor;
	transition: transform 180ms ease;
}

.site-nav__disclosure[aria-expanded="true"] > span {
	transform: rotate(180deg);
}

.site-nav__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	padding-block: var(--spacing-md);
}

.nav-close {
	align-self: flex-end;
	min-height: var(--layout-touch-target);
	min-width: var(--layout-touch-target);
	padding: var(--spacing-xs) var(--spacing-md);
	background: transparent;
	border: 0;
	border-radius: var(--rounded-pill);
	color: var(--color-ink-secondary);
	font-weight: var(--font-weight-bold);
	cursor: pointer;
}

.nav-close[hidden] {
	display: none;
}

.js .site-nav {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: none;
	background: color-mix(in srgb, var(--color-surface-emphasis) 55%, transparent);
}

.js .site-nav.is-open {
	display: block;
}

.js .site-nav__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	width: min(420px, 100%);
	max-height: 100%;
	padding: var(--spacing-lg) var(--spacing-gutter);
	background: var(--color-surface-base);
	box-shadow: var(--shadow-overlay);
	overflow-y: auto;
}

.js .site-nav__panel .site-nav__actions {
	margin-top: auto;
	position: sticky;
	inset-block-end: 0;
	background: var(--color-surface-base);
}

body.has-nav-open {
	overflow: hidden;
}

/* ---------- Botones ----------
 * El botón del editor entra en las mismas reglas: su color de texto y su fondo
 * salían de una hoja del núcleo que este tema no deja entrar, y se servía sin
 * fondo. La hoja por bloque que sí llega aporta caja y relleno, ningún color.
 * Estas reglas van antes que las clases de color de la paleta, de modo que lo
 * que se elija en el editor sigue ganando. */

.button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--layout-touch-target);
	min-width: var(--layout-touch-target);
	padding: 14px 28px;
	border: 0;
	border-radius: var(--rounded-pill);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-black);
	letter-spacing: 0.08em;
	line-height: var(--font-leading-snug);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.button--primary,
.wp-block-button__link {
	background: var(--color-action-default);
	color: var(--color-ink-inverse);
}

.button--primary:hover,
.button--primary:focus-visible {
	background: var(--color-action-hover);
	color: var(--color-ink-inverse);
}

/* El botón del editor solo responde al puntero mientras conserve el fondo del
 * tema: con uno elegido en el editor, cambiarlo aquí lo desmentiría. */
.wp-block-button__link:not(.has-background):hover,
.wp-block-button__link:not(.has-background):focus-visible {
	background: var(--color-action-hover);
}

/* El borde de 2px se descuenta del relleno para que los dos botones del par
 * midan exactamente igual. Va en el azul de marca y no en el gris de borde: es
 * el único límite visible del control y el gris no alcanza el contraste mínimo
 * de un elemento no textual. La jerarquía del par la da el relleno. */
.button--secondary {
	padding: 12px 26px;
	background: transparent;
	border: 2px solid var(--control-border);
	color: var(--control-ink);
}

/* El secundario responde con la superficie, no con el borde: el borde ya está
 * en el azul de marca en reposo y repetirlo aquí dejaba el hover sin efecto
 * visible. No se introduce color nuevo. */
.button--secondary:hover,
.button--secondary:focus-visible {
	background: var(--control-surface-hover);
}

/* La variante de contorno del editor recibe el mismo tratamiento que el botón
 * secundario. Se aparta cuando hay color elegido, como hace el propio núcleo:
 * el borde de un control es su único límite visible y sin esto se quedaba en la
 * tinta heredada. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	border-color: var(--control-border);
	color: var(--control-ink);
}

/* ---------- Diagonal ----------
 * Parada dura, sin degradado. El ángulo y la parada van juntos: al abrir el
 * ángulo hay que retrasar la parada o la banda se come el titular. */

.diagonal {
	position: relative;
	isolation: isolate;
}

.diagonal::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(160deg, var(--color-branch-wash) 0 32%, transparent 32%);
}

/* ---------- Pétalo ----------
 * El radio de la esquina marcada se hereda, de modo que el escalón de tarjeta
 * estrecha solo cambia ese número y la forma se recompone sola. El relleno de
 * esa esquina es el radio más el espaciado normal: con menos, el texto queda
 * ópticamente recortado por la curva. */

/* La consulta de contenedor mide un ancestro, nunca el propio elemento, así que
 * el pétalo necesita un envoltorio con esta clase, y es obligatorio: sin él, el
 * escalón de tarjeta estrecha no se dispara. No hay respaldo automático a
 * propósito. El que hubo marcaba como contenedor al padre directo, que en una
 * rejilla de tarjetas es la rejilla y no la tarjeta, de modo que medía una caja
 * varias veces más ancha y callaba justo en el caso para el que existe; y al ir
 * agrupado con un selector que algún navegador no entiende, se descartaba con él
 * la regla entera y dejaba de funcionar incluso la clase explícita. */
.petal-slot {
	container-type: inline-size;
}

/* La lista de radios se compone aquí y no en un token de `:root`: una propiedad
 * personalizada que contiene otra se resuelve donde se declara, de modo que
 * compuesta arriba llegaría con la esquina ancha ya fijada y el escalón movería
 * el relleno sin mover la curva. */
.petal {
	background: var(--color-surface-raised);
	border-radius: var(--rounded-lg) var(--rounded-lg) var(--rounded-lg) var(--rounded-petal-corner);
	box-shadow: var(--shadow-card);
	padding: var(--spacing-lg);
	padding-inline-start: calc(var(--rounded-petal-corner) + var(--spacing-lg));
	padding-block-end: calc(var(--rounded-petal-corner) + var(--spacing-lg));
}

.petal--alt {
	border-radius: var(--rounded-lg) var(--rounded-petal-corner) var(--rounded-lg) var(--rounded-lg);
	padding: var(--spacing-lg);
	padding-inline-end: calc(var(--rounded-petal-corner) + var(--spacing-lg));
	padding-block-start: calc(var(--rounded-petal-corner) + var(--spacing-lg));
}

.petal--alt2 {
	border-radius: var(--rounded-petal-corner) var(--rounded-lg) var(--rounded-lg) var(--rounded-lg);
	padding: var(--spacing-lg);
	padding-inline-start: calc(var(--rounded-petal-corner) + var(--spacing-lg));
	padding-block-start: calc(var(--rounded-petal-corner) + var(--spacing-lg));
}

/* El escalón lo dispara el ancho de la tarjeta, no el del visor. El umbral se
 * escribe abierto: `max-width: 359px` deja fuera la franja entre 359 y 360, que
 * es justo donde caen los anchos de un contenedor fluido con separación
 * fraccionaria. */
@container (width < 360px) {
	.petal,
	.petal--alt,
	.petal--alt2 {
		--rounded-petal-corner: var(--rounded-petal-corner-narrow);
	}
}

/* ---------- Superficie de énfasis ---------- */

.is-emphasis {
	background: var(--color-surface-emphasis);
	color: var(--color-ink-on-emphasis);
}

/* Los botones quedan fuera: esta regla gana por especificidad a la variante
 * secundaria y le dejaba el rótulo en blanco con el borde todavía en el azul de
 * marca, que sobre el azul profundo no se distingue del fondo. El botón resuelve
 * su tinta y su borde con el contexto. */
.is-emphasis :is(h1, h2, h3, h4, a, strong):not(.button) {
	color: var(--color-ink-inverse);
}

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

.site-footer {
	margin-top: var(--spacing-section);
	padding-block: var(--spacing-2xl);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xl);
}

.site-footer__mark {
	width: 72px;
	opacity: 0.65;
	margin-bottom: var(--spacing-md);
}

.site-footer__name {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-black);
	color: var(--color-ink-inverse);
}

.site-footer__tagline {
	font-size: var(--font-size-small);
}

.site-footer__title {
	margin-bottom: var(--spacing-sm);
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-black);
	line-height: var(--font-leading-snug);
	letter-spacing: var(--font-tracking-eyebrow);
	text-transform: uppercase;
}

.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.site-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: var(--layout-touch-target);
	text-decoration: none;
}

.site-footer__list a:hover {
	text-decoration: underline;
}

.site-footer__note,
.site-footer__chat {
	margin-top: var(--spacing-sm);
	font-size: var(--font-size-small);
}

.site-footer__bar {
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-md);
	border-top: 1px solid color-mix(in srgb, var(--color-ink-on-emphasis) 30%, transparent);
	font-size: var(--font-size-caption);
	max-width: none;
}

/* ---------- Estados y páginas de servicio ---------- */

.state-empty {
	color: var(--ink-muted);
}

/* Los dos estados que sí llevan color propio y ya se usan. El vacío no lo lleva
 * porque no es una incidencia: no hay nada que señalar, solo algo que explicar.
 * El de éxito llegará con la pantalla que lo necesite; declararlo antes sería
 * una regla que nadie consume. */

.state-error {
	color: var(--color-state-error);
}

.state-warning {
	color: var(--color-state-warning);
}

.page-404 {
	padding-block: var(--spacing-2xl);
}

.page-404__message {
	margin-top: var(--spacing-md);
	font-size: var(--font-size-body-lg);
	color: var(--ink-secondary);
}

.page-404__exits {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	margin-top: var(--spacing-xl);
	max-width: none;
}

/* ---------- Paginación ----------
 * La dibuja el núcleo. Sin estas reglas sale como texto suelto, con objetivos
 * muy por debajo del mínimo táctil y sin separación entre números. */

.pagination {
	margin-top: var(--spacing-xl);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-xs);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--layout-touch-target);
	min-height: var(--layout-touch-target);
	padding-inline: var(--spacing-sm);
	border-radius: var(--rounded-pill);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--color-surface-sunken);
	color: var(--color-ink-primary);
}

.pagination .page-numbers.dots {
	min-width: 0;
	padding-inline: 0;
}

.entry + .entry {
	margin-top: var(--spacing-xl);
}

.entry__title {
	margin-bottom: var(--spacing-xs);
}

.entry__title a {
	text-decoration: none;
}

/* ---------- Formulario de búsqueda ----------
 * El campo y su etiqueta van apilados y la etiqueta se ve siempre: el marcador
 * de posición desaparece al escribir y deja el campo sin nombre a la vista. La
 * altura mínima es la del contrato, por encima del objetivo táctil. */

.search-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--spacing-xs);
	max-width: var(--spacing-measure);
	margin-top: var(--spacing-lg);
}

.search-form__field {
	display: flex;
	flex: 1 1 16rem;
	flex-direction: column;
	gap: var(--spacing-xs);
	min-width: 0;
}

.search-form__label {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-bold);
}

/* El borde va en el gris de control y no en el de separadores: es el único
 * límite visible del campo y exige 3:1 como elemento no textual, mientras que
 * el gris de separadores da 1.24:1 sobre el propio campo. Los grises que visten
 * separadores y tarjetas no se usan aquí. */
.search-field {
	width: 100%;
	min-height: 48px;
	padding: var(--spacing-xs) var(--spacing-sm);
	background: var(--color-surface-raised);
	border: 1px solid var(--color-border-control);
	border-radius: var(--rounded-md);
	color: var(--color-ink-primary);
}

/* ---------- Utilidades ---------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Puntos de corte ---------- */

/* Las pistas se ajustan a las columnas que de verdad se dibujan: escritas por
 * número, las dos columnas de menú reservaban su sitio aunque no hubiera menú
 * que poner y dejaban medio pie en blanco. */
@media (min-width: 768px) {
	.site-footer__grid {
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	}
}

@media (min-width: 1024px) {
	.diagonal::before {
		background: linear-gradient(196deg, var(--color-branch-wash) 0 40%, transparent 40%);
	}

	.site-header__inner {
		flex-wrap: nowrap;
	}

	.nav-toggle,
	.nav-close {
		display: none;
	}

	/* Justo en el punto donde el panel desaparece, un menú de etiquetas largas
	 * más los dos botones no cabe en una línea. Envuelven en vez de desbordar:
	 * la cabecera crece hacia abajo, que no se lleva por delante la página. */
	.site-nav,
	.js .site-nav {
		position: static;
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		justify-content: flex-end;
		width: auto;
		background: none;
	}

	.js .site-nav__panel {
		position: static;
		flex-direction: row;
		align-items: center;
		gap: var(--spacing-lg);
		width: auto;
		max-height: none;
		padding: 0;
		background: none;
		box-shadow: none;
		overflow: visible;
	}

	.site-nav__panel {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: var(--spacing-md) var(--spacing-lg);
		min-width: 0;
	}

	.site-nav__list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--spacing-xs);
		min-width: 0;
	}

	.site-nav__list > .menu-item {
		position: relative;
	}

	.site-nav__list .sub-menu {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 0;
		z-index: 20;
		min-width: 16rem;
		padding: var(--spacing-xs);
		background: var(--color-surface-raised);
		border-radius: var(--rounded-md);
		box-shadow: var(--shadow-overlay);
	}

	/* Sin JavaScript no hay nada que abra ni cierre el submenú, así que queda
	 * desplegado: flotando sobre el contenido taparía lo que hay debajo, de modo
	 * que vuelve al flujo del documento. */
	.no-js .site-nav__list .sub-menu {
		position: static;
		min-width: 0;
		padding: 0;
		padding-inline-start: var(--spacing-md);
		background: none;
		border-radius: 0;
		box-shadow: none;
	}

	.site-nav__actions,
	.js .site-nav__panel .site-nav__actions {
		position: static;
		margin-top: 0;
		padding-block: 0;
		background: none;
	}

	.site-footer__grid {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	}
}

/* ---------- Movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}