/*
 * Macarena — Header y Menú
 * Cabecera con logo + destacados configurables, y menú a pantalla completa
 * con versión de escritorio (dos columnas fijas) y versión de móvil
 * (acordeón de una columna) completamente distintas, según el diseño
 * "La Esperanza que permanece". Todo bajo `.mhm-scope` para no chocar con
 * los estilos globales de Divi.
 */

.mhm-scope {
	--mhm-ivory: #f4f0e7;
	--mhm-ink: #1b1a17;
	--mhm-ink-72: rgba(27, 26, 23, .72);
	--mhm-ink-50: rgba(27, 26, 23, .5);
	--mhm-ink-12: rgba(27, 26, 23, .12);
	--mhm-green-deep: #0e2a20;
	--mhm-green-black: #081913;
	--mhm-gold: #b68235;
	--mhm-gold-dark: #7d5411;
	--mhm-gold-light: #d8b26a;
	--mhm-ivory-90: rgba(244, 240, 231, .9);
	--mhm-ivory-80: rgba(244, 240, 231, .8);
	--mhm-ivory-78: rgba(244, 240, 231, .78);
	--mhm-ivory-72: rgba(244, 240, 231, .72);
	--mhm-ivory-55: rgba(244, 240, 231, .55);
	--mhm-ivory-45: rgba(244, 240, 231, .45);
	--mhm-ivory-16: rgba(244, 240, 231, .16);
	--mhm-ivory-14: rgba(244, 240, 231, .14);
	--mhm-font-heading: "Cormorant Garamond", Georgia, serif;
	--mhm-font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;
	--mhm-breakpoint: 860px;

	font-family: var(--mhm-font-body);
	color: var(--mhm-ink);
}

.mhm-scope *, .mhm-scope *::before, .mhm-scope *::after { box-sizing: border-box; }
.mhm-scope ul { list-style: none; margin: 0; padding: 0; }
.mhm-scope a { text-decoration: none; }
.mhm-scope button { font: inherit; }
.mhm-scope :focus { outline: none; }
.mhm-scope :focus-visible { outline: 2px solid var(--mhm-gold); outline-offset: 2px; }
.mhm-scope .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ————————————————————————— Header ————————————————————————— */

/*
 * `position: sticky` no llega a pegarse dentro de la estructura flex que
 * genera Divi 5 para el módulo "Código" del Theme Builder (fila → columna
 * → sección, todas `display:flex` con una altura ya calculada igual a la
 * del contenido): se probó en directo y, aun sin ningún `overflow` ni
 * `transform` de por medio, el header seguía desplazándose con el scroll
 * en vez de quedarse fijo. Como es literalmente el primer elemento de la
 * página (no hay nada por encima de lo que "despegarse"), `position:fixed`
 * se ve exactamente igual mientras evita ese problema por completo: queda
 * anclado al viewport desde el primer píxel de scroll. El único efecto
 * secundario de sacarlo del flujo normal es que el resto de la página
 * subiría para ocupar su sitio — por eso el JS añade justo debajo un
 * "separador" (`.mhm-header-spacer`) con la misma altura que el header, y
 * mide esa altura con ResizeObserver para que nunca se desajuste (logo más
 * grande, línea que se parte en móvil, etc.).
 */
.mhm-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 14px clamp(20px, 4vw, 56px);
	background: rgba(244, 240, 231, .88);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--mhm-ink-12);
	transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
}

/* Aspecto distinto una vez se ha hecho scroll: fondo un poco más opaco,
   una sombra suave para despegarlo del contenido, margen interior más
   ajustado y el logo reducido (ver ".mhm-header__logo-stack" más abajo) —
   la cabecera se encoge de verdad, no solo cambia de color. Como la altura
   ahora SÍ cambia, el separador de abajo se resincroniza solo gracias al
   ResizeObserver que ya observa el header en header-menu.js: no hace falta
   nada especial aquí. Clase añadida por JS al superar unos pocos píxeles
   de scroll. */
.mhm-header.is-scrolled {
	padding-top: 8px;
	padding-bottom: 8px;
	background: rgba(244, 240, 231, .97);
	box-shadow: 0 8px 24px rgba(27, 26, 23, .10);
}

/* Con la barra de administración de WordPress visible (viendo la web con
   sesión iniciada), esa barra es TAMBIÉN `position:fixed;top:0` y por
   encima (z-index mucho mayor) — sin este ajuste, la cabecera fija queda
   justo debajo tapada por ella, cortando el logo y la navegación. Los
   valores (32px / 46px) son los mismos que usa el propio WordPress para
   la barra, así que coinciden siempre. Los visitantes normales (sin
   sesión) no tienen esta barra y no les afecta. */
body.admin-bar .mhm-header { top: 32px; }

@media ( max-width: 782px ) {
	body.admin-bar .mhm-header { top: 46px; }
}

/* Alto de reserva por si el JS todavía no ha corregido la altura real
   (primer pintado, antes de que corran las fuentes/imagen del logo). */
.mhm-header-spacer { height: 64px; }

.mhm-header__brand { display: flex; align-items: center; }

/* Dos logos superpuestos en la misma celda de grid (uno normal, uno
   reducido para scroll) para poder cruzar de uno a otro con un fundido en
   vez de un cambio brusco. La altura del conjunto se limita con
   `max-height` (variables --mhm-logo-h / --mhm-logo-h-scroll, puestas en
   línea desde PHP según los ajustes) y se anima igual que el resto de la
   cabecera. Si no se sube un logo específico para scroll, PHP reutiliza el
   mismo logo normal, solo que renderizado más pequeño. */
.mhm-header__logo-stack {
	display: grid;
	align-items: start;
	max-height: var(--mhm-logo-h, 32px);
	overflow: hidden;
	transition: max-height .3s ease;
}

.mhm-header.is-scrolled .mhm-header__logo-stack {
	max-height: var(--mhm-logo-h-scroll, 32px);
}

.mhm-header__logo-stack > * {
	grid-area: 1 / 1;
	transition: opacity .3s ease;
}

.mhm-header__logo { display: block; width: auto; }

.mhm-header__logo--scroll { opacity: 0; }

.mhm-header.is-scrolled .mhm-header__logo--normal { opacity: 0; }
.mhm-header.is-scrolled .mhm-header__logo--scroll { opacity: 1; }

.mhm-header__logo--text {
	font-family: var(--mhm-font-heading);
	font-size: 22px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--mhm-ink);
	white-space: nowrap;
}

.mhm-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.4vw, 34px);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.mhm-header__link {
	color: var(--mhm-ink-72);
	padding: 6px 0;
	border-bottom: 1px solid transparent;
	transition: color .25s ease, border-color .25s ease;
}

.mhm-header__link:hover, .mhm-header__link:focus-visible {
	color: var(--mhm-ink);
	border-bottom-color: var(--mhm-gold);
}

.mhm-header__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mhm-gold-dark);
	border: 1px solid rgba(125, 84, 17, .4);
	padding: 6px 10px;
	transition: background-color .25s ease;
}

.mhm-header__btn:hover, .mhm-header__btn:focus-visible {
	background: rgba(182, 130, 53, .12);
}

/* Botones con icono de repuesto para móvil (p.ej. "Acceso hermanos"): el
   icono viaja siempre en el HTML pero se mantiene oculto en escritorio; el
   texto se mantiene siempre accesible para lectores de pantalla, aunque en
   móvil se oculte visualmente para dejar sitio al icono. */
.mhm-btn-icon {
	display: none;
	align-items: center;
	justify-content: center;
	flex: none;
}

.mhm-btn-icon svg { display: block; }

.mhm-header__icon-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--mhm-ink-72);
}

.mhm-header__icon-btn:hover, .mhm-header__icon-btn:focus-visible { color: var(--mhm-ink); }

/* Selector de idiomas (shortcode [gtranslate] u otro configurado): se
   limita a colocarlo en línea con el resto de iconos de la cabecera y a
   heredar la tipografía del header; el aspecto del propio selector
   (banderas, desplegable…) lo decide el plugin de traducción desde sus
   propios ajustes. */
.mhm-header__lang {
	display: flex;
	align-items: center;
	line-height: 1;
	font-size: 11px;
}

/*
 * El selector de idiomas vive en la cabecera en PC y tablet. En móvil
 * (por debajo de 600px) header-menu.js traslada ese mismo elemento (el
 * `#mhm-lang-widget` que hay dentro) hasta el final del menú a pantalla
 * completa (`#mhm-lang-slot-menu`) — no cabía ya en la barra estrecha
 * junto a la lupa y el botón de menú. La regla de aquí abajo solo evita
 * que se alcance a ver un instante en la cabecera justo antes de que el
 * JS termine de moverlo; `#mhm-lang-slot-menu:empty` oculta el hueco de
 * destino en PC/tablet, donde nunca se mueve nada hasta ahí.
 */
#mhm-lang-slot-header {
	display: contents;
}

@media ( max-width: 600px ) {
	#mhm-lang-slot-header {
		display: none;
	}
}

#mhm-lang-slot-menu:empty {
	display: none;
}

.mhm-menu__lang-mobile {
	display: flex;
	justify-content: center;
	padding: 18px 0 4px;
	margin-top: 4px;
	border-top: 1px solid var(--mhm-ivory-16);
}

.mhm-menu__lang-mobile .mhm-header__lang {
	padding-left: 0 !important; /* anula el padding que se añada por CSS externo para separarlo de la lupa en la cabecera; aquí abajo no aplica. */
}

.mhm-header__burger {
	display: flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--mhm-ink);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.mhm-header__burger-lines { display: flex; flex-direction: column; gap: 4px; width: 20px; }
.mhm-header__burger-lines span { height: 1px; background: var(--mhm-ink); display: block; }

/* En móvil, solo quedan destacados con estilo "Botón" (p.ej. Acceso
   hermanos), la lupa y el botón de menú. Los enlaces simples (Actualidad,
   Historia...) pasan a vivir solo dentro del menú a pantalla completa. */
@media ( max-width: 860px ) {
	.mhm-header__link { display: none; }
	.mhm-header__nav { gap: 14px; }

	/* Solo en la cabecera (barra estrecha): los botones con icono de
	   repuesto (mhm-btn--has-icon) pasan a mostrar solo el icono — el
	   texto no desaparece del todo, se oculta visualmente (sigue
	   disponible para lectores de pantalla). El mismo botón dentro del
	   menú abierto (mhm-menu__top-btn) mantiene siempre su texto, porque
	   ahí sí hay sitio de sobra. */
	.mhm-header__btn.mhm-btn--has-icon { padding: 8px; }
	.mhm-header__btn.mhm-btn--has-icon .mhm-btn-icon { display: flex; }
	.mhm-header__btn.mhm-btn--has-icon .mhm-btn-text {
		position: absolute !important;
		width: 1px; height: 1px; overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap;
	}
}

/* ————————————————————— Overlay genérico ————————————————————— */

.mhm-overlay {
	position: fixed;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .35s ease, visibility .35s ease;
}

.mhm-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

body.mhm-lock-scroll { overflow: hidden; }

/* ————————————————————— Menú a pantalla completa ————————————————————— */

/*
 * PC/tablet: exactamente el diseño original — cuadrícula de tres filas
 * (`auto 1fr auto`) para que la columna de imagen/accesos se estire a
 * toda la altura disponible de la pantalla, tal cual el diseño de
 * "pantalla completa" pedido. En este ancho el contenido cabe siempre en
 * una pantalla, así que no hace falta scroll.
 *
 * En móvil (≤860px, ver el media query de más abajo) se sustituye por un
 * único bloque con scroll natural — ver la nota junto a ese media query
 * sobre por qué ahí sí hace falta un enfoque distinto.
 */
.mhm-menu {
	z-index: 90;
	background: var(--mhm-green-black);
	color: var(--mhm-ivory);
	display: grid;
	grid-template-rows: auto 1fr auto;
	overflow: auto;
}

.mhm-menu__top {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 14px clamp(20px, 4vw, 56px);
	background: var(--mhm-green-black);
	border-bottom: 1px solid var(--mhm-ivory-14);
}

.mhm-menu__brand { display: flex; align-items: center; }
.mhm-menu__logo { display: block; }
.mhm-menu__logo--text {
	font-family: var(--mhm-font-heading);
	font-size: 20px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--mhm-ivory);
}

.mhm-menu__top-actions {
	display: flex;
	align-items: center;
	gap: clamp(10px, 2vw, 22px);
	flex-wrap: wrap;
	justify-content: flex-end;
}

.mhm-menu__top-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mhm-gold-light);
	border: 1px solid rgba(216, 178, 106, .5);
	padding: 6px 12px;
	transition: background-color .25s ease;
	white-space: nowrap;
}

/* Aquí hay sitio de sobra (la barra envuelve si hace falta), así que este
   botón se queda siempre con su texto completo — el icono de repuesto es
   cosa solo de la cabecera estrecha. */

.mhm-menu__top-btn:hover, .mhm-menu__top-btn:focus-visible {
	background: rgba(216, 178, 106, .12);
}

.mhm-menu__top-link {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mhm-ivory-80);
	white-space: nowrap;
}

.mhm-menu__top-link:hover, .mhm-menu__top-link:focus-visible { color: var(--mhm-gold-light); }

.mhm-menu__close {
	display: flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: 0;
	color: var(--mhm-ivory);
	cursor: pointer;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mhm-menu__close:hover, .mhm-menu__close:focus-visible { color: var(--mhm-gold-light); }

.mhm-menu__body {
	display: grid;
	grid-template-columns: minmax(0, 1.9fr) minmax(230px, 1fr);
	align-items: stretch;
	min-height: 0;
}

/* — Árbol de escritorio: dos columnas fijas, siempre desplegado — */

.mhm-menu__tree--desktop {
	min-width: 0;
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: clamp(20px, 3vw, 44px);
	align-content: center;
	padding: clamp(14px, 2vw, 30px) clamp(20px, 4vw, 48px);
	border-right: 1px solid var(--mhm-ivory-14);
}

.mhm-menu__tree-col { display: grid; gap: clamp(16px, 2.2vw, 30px); align-content: start; }

/* — "00 · Nuestras Cuaresmas AAAA": acceso destacado que encabeza el
   menú, por encima de los cinco epígrafes. No es un botón ni lleva
   fondo/recuadro propio: es un epígrafe más (mismo número y nombre que
   los demás — ver `.mhm-menu-group__number` / `__name`), con el año en
   dorado y una flecha en vez de un desplegable. En escritorio cruza las
   dos columnas del árbol (`grid-column:1/-1`); en móvil es simplemente
   el primer elemento de la lista, sin columnas que cruzar. */
.mhm-menu-cuaresmas {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap; /* imprescindible: en móvil el año baja de línea en vez de desbordar */
	align-items: baseline;
	gap: 6px 12px;
	color: var(--mhm-ivory);
	padding-bottom: 7px;
	margin-bottom: clamp(14px, 2vw, 26px);
	border-bottom: 1px solid rgba(216, 178, 106, .45);
	text-decoration: none;
}
.mhm-menu-cuaresmas:hover, .mhm-menu-cuaresmas:focus-visible { color: var(--mhm-gold-light); }

.mhm-menu-cuaresmas__year {
	font-family: var(--mhm-font-heading);
	font-weight: 400;
	font-size: clamp(15px, 1.5vw, 21px);
	line-height: 1;
	color: rgba(216, 178, 106, .85);
	font-variant-numeric: tabular-nums;
}
.mhm-menu-cuaresmas__arrow {
	margin-left: auto;
	font-size: 14px;
	line-height: 1;
	color: rgba(216, 178, 106, .8);
}

.mhm-menu-group__link {
	display: flex;
	align-items: baseline;
	gap: 12px;
	color: var(--mhm-ivory);
	padding-bottom: 7px;
	border-bottom: 1px solid rgba(216, 178, 106, .45);
	cursor: default;
}

a.mhm-menu-group__link { cursor: pointer; }
a.mhm-menu-group__link:hover, a.mhm-menu-group__link:focus-visible { color: var(--mhm-gold-light); }

.mhm-menu-group__number { font-size: 9px; letter-spacing: .2em; color: rgba(216, 178, 106, .75); }

.mhm-menu-group__name {
	font-family: var(--mhm-font-heading);
	font-size: clamp(18px, 1.9vw, 27px);
	line-height: 1;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.mhm-menu-group__list { display: grid; margin: 7px 0 0; }

.mhm-menu-group__list a {
	display: block;
	padding: 3px 0;
	font-size: 12px;
	letter-spacing: .02em;
	color: var(--mhm-ivory-78);
	transition: color .2s ease, padding-left .2s ease;
}

.mhm-menu-group__list a:hover, .mhm-menu-group__list a:focus-visible {
	color: var(--mhm-gold-light);
	padding-left: 8px;
}

/* — Árbol de móvil: lista única en acordeón — */

.mhm-menu__tree--mobile { display: none; }

.mhm-menu-acc__group { border-top: 1px solid var(--mhm-ivory-14); }
.mhm-menu-acc__group:first-child { border-top: 0; }

.mhm-menu-acc__toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	background: none;
	border: 0;
	color: var(--mhm-ivory);
	text-align: left;
	cursor: pointer;
	padding: 16px 0;
}

a.mhm-menu-acc__toggle--link { cursor: pointer; }

.mhm-menu-acc__chevron {
	margin-left: auto;
	width: 9px;
	height: 9px;
	border-right: 1.3px solid var(--mhm-gold-light);
	border-bottom: 1.3px solid var(--mhm-gold-light);
	transform: rotate(45deg);
	transition: transform .25s ease;
	flex: none;
}

.mhm-menu-acc__toggle[aria-expanded="true"] .mhm-menu-acc__chevron { transform: rotate(-135deg); }

.mhm-menu-acc__panel { padding: 0 0 16px; }
.mhm-menu-acc__panel[hidden] { display: none; }

/* ————————————————————————— Panel lateral ————————————————————————— */

.mhm-menu__side { display: grid; grid-template-rows: minmax(120px, 1fr) auto; min-width: 0; }

.mhm-menu__image {
	position: relative;
	min-height: 120px;
	background: var(--mhm-green-deep) center/cover no-repeat;
}

.mhm-menu__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.mhm-menu__accesos { padding: clamp(16px, 2vw, 26px) clamp(20px, 3vw, 34px); border-top: 1px solid var(--mhm-ivory-16); }

.mhm-menu__accesos-title {
	font-size: 10px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: rgba(216, 178, 106, .85);
	margin: 0 0 12px;
}

.mhm-menu__accesos-list { column-count: 2; column-gap: 16px; }
.mhm-menu__accesos-list li { break-inside: avoid; }

.mhm-menu__accesos-list a {
	display: block;
	padding: 5px 0;
	font-size: 11px;
	letter-spacing: .02em;
	color: var(--mhm-ivory-80);
	transition: color .2s ease, padding-left .2s ease;
}

.mhm-menu__accesos-list a:hover, .mhm-menu__accesos-list a:focus-visible {
	color: var(--mhm-gold-light);
	padding-left: 6px;
}

.mhm-menu__foot {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mhm-ivory-45);
	margin: 0;
	padding: 10px clamp(20px, 4vw, 56px);
	border-top: 1px solid var(--mhm-ivory-14);
}

/* — Cambio de versión desktop → móvil — */

@media ( max-width: 860px ) {
	/*
	 * Aquí (y solo aquí) el árbol en acordeón puede llegar a ser más alto
	 * que la pantalla, así que la cuadrícula de tres filas fijas del
	 * escritorio (pensada para un contenido que siempre cabe en una
	 * pantalla) deja paso a un único bloque con scroll natural: el pie
	 * ("Basílica de...") y el selector de idiomas quedan dentro de ese
	 * mismo scroll, al final, en vez de fijos — quien recorre el acordeón
	 * se los encuentra al llegar abajo del todo, como el resto del
	 * contenido. Solo el logo y "Cerrar" (`.mhm-menu__top`) se quedan
	 * fijos arriba mientras tanto, con `position: sticky` (declarado en la
	 * regla base, más arriba).
	 */
	.mhm-menu {
		display: block;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.mhm-menu__body { grid-template-columns: 1fr; }

	.mhm-menu__tree--desktop { display: none; }
	.mhm-menu__tree--mobile {
		display: block;
		padding: 8px clamp(20px, 6vw, 48px) 0;
	}

	/* La fotografía se oculta en móvil para priorizar el acordeón. */
	.mhm-menu__side { grid-template-rows: auto; }
	.mhm-menu__image { display: none; }

	/* El acceso "Nuestras Cuaresmas" pierde la flecha: el año baja de
	   línea por el flex-wrap y ya no hay sitio (ni falta que hace, es el
	   primer elemento de la lista) para un indicador de "ir a". */
	.mhm-menu-cuaresmas__arrow { display: none; }
}

/* ————————————————————————— Buscador ————————————————————————— */

.mhm-search {
	z-index: 80;
	background: rgba(8, 25, 19, .94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--mhm-ivory);
	padding: clamp(28px, 10vh, 140px) clamp(20px, 6vw, 120px);
	overflow: auto;
}

.mhm-search__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; }

.mhm-search__label {
	font-size: 10px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--mhm-ivory-55);
}

.mhm-search__close {
	background: none;
	border: 0;
	color: var(--mhm-ivory);
	cursor: pointer;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.mhm-search__close:hover, .mhm-search__close:focus-visible { color: var(--mhm-gold-light); }

.mhm-search__input {
	width: 100%;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(216, 178, 106, .5);
	color: var(--mhm-ivory);
	font-family: var(--mhm-font-heading);
	font-size: clamp(28px, 5vw, 64px);
	padding: 0 0 18px;
	outline: none;
}

.mhm-search__input::placeholder { color: var(--mhm-ivory-45); }

/* ————————————————————————— Movimiento reducido ————————————————————————— */

@media ( prefers-reduced-motion: reduce ) {
	.mhm-header,
	.mhm-overlay,
	.mhm-header__link,
	.mhm-header__btn,
	.mhm-header__logo-stack,
	.mhm-header__logo-stack > *,
	.mhm-menu-group__list a,
	.mhm-menu__accesos-list a,
	.mhm-menu-acc__chevron {
		transition: none !important;
	}
}