/*!
 * Explora Header & Footer — hoja principal del frontend
 *
 * Convenciones:
 *   · Nomenclatura BEM con prefijo .exhf-  (aislamiento frente al tema).
 *   · Todo color, medida y duración proviene de una custom property, que
 *     Appearance genera en línea. Cambiar la paleta NO invalida este archivo,
 *     que permanece cacheado en el navegador y en el CDN.
 *   · Sin !important salvo en las reglas de accesibilidad que deben ganar
 *     siempre (sr-only, reduced-motion).
 *   · Propiedades lógicas (inline-start/end) para soportar RTL sin duplicar.
 *
 * Índice
 *   01 Base y utilidades
 *   02 Enlaces de salto y foco
 *   03 Estructura del header
 *   04 Fila superior
 *   05 Marca
 *   06 Navegación y mega menús
 *   07 Buscador
 *   08 Botones de utilidad, idioma y tema
 *   09 Marquesina
 *   10 Paneles deslizantes
 *   11 Asistente
 *   12 Pie de página
 *   13 Scroll spy
 *   14 Responsive
 *   15 Movimiento reducido, alto contraste e impresión
 */

/* ==========================================================================
   01 · Base y utilidades
   ========================================================================== */

.exhf-root,
.exhf-root *,
.exhf-root *::before,
.exhf-root *::after,
.exhf-footer,
.exhf-footer *,
.exhf-panel,
.exhf-panel *,
.exhf-assistant,
.exhf-assistant * {
	box-sizing: border-box;
}

.exhf-root,
.exhf-footer {
	font-family: var(--exhf-font-body);
	color: var(--exhf-c-text);
	-webkit-font-smoothing: antialiased;
}

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

.exhf-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.exhf-anchor {
	display: block;
	scroll-margin-top: calc(var(--exhf-h-total) + 16px);
}

.exhf-icon {
	flex: 0 0 auto;
	display: block;
}

.exhf-badge {
	display: inline-block;
	margin-inline-start: 6px;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--exhf-c-brand);
	color: var(--exhf-c-on-brand);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	vertical-align: middle;
	line-height: 1.6;
}

.exhf-mark,
.exhf-root mark.exhf-mark {
	background: color-mix(in srgb, var(--exhf-c-accent) 40%, transparent);
	color: inherit;
	padding: 0 1px;
	border-radius: 2px;
}

/* Campo señuelo antispam: invisible y fuera del flujo, pero no `display:none`
   (algunos bots ignoran los campos con display none). */
.exhf-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   02 · Enlaces de salto y foco
   ========================================================================== */

.exhf-skip-links {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: calc(var(--exhf-z) + 100);
}

.exhf-skip-link {
	position: absolute;
	inset-block-start: -200px;
	inset-inline-start: 8px;
	display: inline-block;
	padding: 12px 20px;
	background: var(--exhf-c-brand);
	color: var(--exhf-c-on-brand);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--exhf-radius) var(--exhf-radius);
	transition: inset-block-start var(--exhf-dur-fast) var(--exhf-ease);
}

.exhf-skip-link:focus {
	inset-block-start: 0;
}

/* Anillo de foco unificado. `:focus-visible` evita mostrarlo tras un clic de
   ratón, que es la queja habitual de los equipos de diseño con los outlines. */
.exhf-root :focus-visible,
.exhf-footer :focus-visible,
.exhf-panel :focus-visible,
.exhf-assistant :focus-visible {
	outline: var(--exhf-focus-w, 2px) solid var(--exhf-c-focus);
	outline-offset: 2px;
	border-radius: var(--exhf-radius-sm);
}

/* Utilidades de visibilidad por dispositivo. Las media queries reales las
   emite PHP a partir de los puntos de ruptura configurados; aquí sólo queda
   la reserva para navegadores que no reciban ese bloque. */
.exhf-hide-desktop,
.exhf-hide-tablet,
.exhf-hide-mobile {
	/* Sin la media query correspondiente el elemento se muestra: ocultar por
	   defecto haría desaparecer contenido si el CSS generado fallara. */
	display: revert;
}

/* ==========================================================================
   03 · Estructura del header
   ========================================================================== */

.exhf-header {
	background: var(--exhf-c-bg);
	border-block-end: 1px solid var(--exhf-c-border);
	z-index: var(--exhf-z);
	transition: transform var(--exhf-dur) var(--exhf-ease),
	            box-shadow var(--exhf-dur) var(--exhf-ease),
	            background-color var(--exhf-dur) var(--exhf-ease);
}

.exhf-root.is-sticky .exhf-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
}

/* Sombra sólo tras desplazarse: un header con sombra permanente sobre el hero
   se ve pegado y ensucia la primera impresión. */
.exhf-root.is-scrolled .exhf-header {
	box-shadow: var(--exhf-shadow-sm);
}

/* Auto-ocultar al bajar. Se aplica sólo con `.is-hidden`, que el JS activa
   pasados 200px de scroll, para que no desaparezca en microdesplazamientos. */
.exhf-root.has-autohide .exhf-header.is-hidden {
	transform: translateY(-100%);
}

.exhf-root.is-menu-open .exhf-header.is-hidden {
	transform: none;
}

.exhf-header-spacer {
	height: var(--exhf-h-main);
}

.exhf-root.has-topbar .exhf-header-spacer {
	height: calc(var(--exhf-h-topbar) + var(--exhf-h-main));
}

.exhf-root.has-ticker .exhf-header-spacer {
	height: calc(var(--exhf-h-main) + var(--exhf-h-ticker));
}

.exhf-root.has-topbar.has-ticker .exhf-header-spacer {
	height: var(--exhf-h-total);
}

/* ==========================================================================
   04 · Fila superior
   ========================================================================== */

.exhf-topbar {
	height: var(--exhf-h-topbar);
	background: var(--exhf-c-bg-alt);
	border-block-end: 1px solid var(--exhf-c-border);
	font-size: var(--exhf-fs-topbar);
}

.exhf-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 100%;
}

.exhf-topbar__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.exhf-topbar__nav--right .exhf-topbar__list {
	margin-inline-start: auto;
}

.exhf-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	color: var(--exhf-c-text-muted);
	font-size: inherit;
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--exhf-radius-sm);
	transition: color var(--exhf-dur-fast) var(--exhf-ease),
	            background-color var(--exhf-dur-fast) var(--exhf-ease);
}

.exhf-topbar__link:hover,
.exhf-topbar__link:focus-visible {
	color: var(--exhf-c-text);
	background: color-mix(in srgb, var(--exhf-c-text) 6%, transparent);
}

.exhf-topbar__link[aria-current="page"] {
	color: var(--exhf-c-brand);
}

.exhf-topbar__link--cta {
	background: var(--exhf-c-brand);
	color: var(--exhf-c-on-brand);
	font-weight: 700;
	padding-inline: 14px;
}

.exhf-topbar__link--cta:hover,
.exhf-topbar__link--cta:focus-visible {
	background: var(--exhf-c-brand-hover);
	color: var(--exhf-c-on-brand);
}

.exhf-cart-count {
	display: inline-grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 5px;
	border-radius: 999px;
	background: var(--exhf-c-border);
	color: var(--exhf-c-text);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.exhf-cart-count.is-filled {
	background: var(--exhf-c-brand);
	color: var(--exhf-c-on-brand);
}

/* ==========================================================================
   05 · Marca
   ========================================================================== */

.exhf-main {
	height: var(--exhf-h-main);
	background: var(--exhf-c-bg);
}

.exhf-main__inner {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 32px);
	height: 100%;
}

.exhf-brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.exhf-brand__link {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.exhf-brand__logo {
	display: block;
	width: var(--exhf-logo-w);
	height: auto;
	max-height: calc(var(--exhf-h-main) - 24px);
	object-fit: contain;
	object-position: left center;
}

.exhf-brand__text {
	font-family: var(--exhf-font-heading);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.01em;
}

/* Conmutación de logo por atributo de tema: sin JS, sin parpadeo y sin
   descargar el que no se usa cuando el navegador soporta `content-visibility`. */
.exhf-brand__logo--dark {
	display: none;
}

:root[data-theme="dark"] .exhf-brand__logo--light {
	display: none;
}

:root[data-theme="dark"] .exhf-brand__logo--dark {
	display: block;
}

/* ==========================================================================
   06 · Navegación y mega menús
   ========================================================================== */

.exhf-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
	height: 100%;
}

.exhf-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(2px, 1.2vw, 18px);
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.exhf-nav__item {
	position: static; /* El panel se posiciona respecto al header, no al <li>. */
	height: 100%;
	display: flex;
	align-items: center;
}

.exhf-nav__row {
	display: inline-flex;
	align-items: center;
	height: 100%;
}

.exhf-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 100%;
	padding-inline: 10px;
	color: var(--exhf-c-text);
	font-family: var(--exhf-font-heading);
	font-size: var(--exhf-fs-nav);
	font-weight: var(--exhf-fw-nav);
	letter-spacing: var(--exhf-ls-nav);
	text-transform: var(--exhf-tt-nav);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--exhf-dur-fast) var(--exhf-ease);
}

/* Subrayado animado desde el centro: gesto sobrio, alineado con el registro
   editorial de mckinsey.com, sin desplazar el texto (no altera el layout). */
.exhf-nav__link::after {
	content: "";
	position: absolute;
	inset-block-end: 18px;
	inset-inline: 10px;
	height: 2px;
	background: var(--exhf-c-brand);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--exhf-dur) var(--exhf-ease-out);
}

.exhf-nav__link:hover,
.exhf-nav__link:focus-visible,
.exhf-nav__item.is-open .exhf-nav__link {
	color: var(--exhf-c-brand);
}

.exhf-nav__link:hover::after,
.exhf-nav__link:focus-visible::after,
.exhf-nav__item.is-open .exhf-nav__link::after,
.exhf-nav__link.is-current::after {
	transform: scaleX(1);
}

.exhf-nav__toggle {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin-inline-start: -4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--exhf-c-text-muted);
	cursor: pointer;
	border-radius: var(--exhf-radius-sm);
	transition: transform var(--exhf-dur) var(--exhf-ease),
	            color var(--exhf-dur-fast) var(--exhf-ease);
}

.exhf-nav__item.is-open .exhf-nav__toggle {
	transform: rotate(180deg);
	color: var(--exhf-c-brand);
}

/* -------------------------------------------------------- Panel mega menú */

.exhf-mega {
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
	background: var(--exhf-c-bg-elevated);
	border-block-start: 1px solid var(--exhf-c-border);
	border-block-end: 1px solid var(--exhf-c-border);
	box-shadow: var(--exhf-shadow-lg);
	transition: opacity var(--exhf-dur) var(--exhf-ease),
	            transform var(--exhf-dur) var(--exhf-ease-out),
	            visibility 0s linear var(--exhf-dur);
	max-height: calc(100vh - var(--exhf-h-total) - 16px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Apertura por CSS: garantiza que el mega menú funcione aunque el JS falle o
   aún no haya cargado (mejora progresiva real, no decorativa). */
.exhf-nav__item.has-mega:hover > .exhf-mega,
.exhf-nav__item.has-mega:focus-within > .exhf-mega,
.exhf-nav__item.is-open > .exhf-mega {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	transition-delay: 0s;
}

/* En dispositivos táctiles el `:hover` se queda "pegado" tras el toque.
   Se desactiva y se deja el control al botón, que el JS gestiona. */
@media (hover: none) {
	.exhf-nav__item.has-mega:hover > .exhf-mega {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}

	.exhf-nav__item.has-mega.is-open > .exhf-mega {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}
}

.exhf-mega__inner {
	padding-block: clamp(24px, 3vw, 44px);
}

.exhf-mega__head {
	margin-block-end: 24px;
	padding-block-end: 16px;
	border-block-end: 1px solid var(--exhf-c-border);
}

.exhf-mega__head-title {
	margin: 0 0 4px;
	font-family: var(--exhf-font-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--exhf-c-brand);
}

.exhf-mega__head-text {
	margin: 0;
	font-size: 15px;
	color: var(--exhf-c-text-muted);
	max-width: 62ch;
}

.exhf-mega__grid {
	display: grid;
	gap: clamp(20px, 2.4vw, 40px);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
}

.exhf-mega--cols-2 .exhf-mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.exhf-mega--cols-3 .exhf-mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.exhf-mega--cols-5 .exhf-mega__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Modo mapa de sitio: columnas automáticas, pensado para menús muy densos
   al estilo de fia.com. */
.exhf-mega--sitemap .exhf-mega__grid {
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* Modo escaparate: la imagen manda, al estilo de globant.com. */
.exhf-mega--showcase .exhf-mega__col-image {
	aspect-ratio: 16 / 10;
	width: 100%;
	object-fit: cover;
	border-radius: var(--exhf-radius);
	margin-block-end: 14px;
}

.exhf-mega.has-featured .exhf-mega__grid {
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) minmax(240px, 300px);
}

.exhf-mega__col-image {
	width: 100%;
	height: auto;
	margin-block-end: 12px;
	border-radius: var(--exhf-radius-sm);
	object-fit: cover;
}

.exhf-mega__col-title {
	margin: 0 0 6px;
	font-family: var(--exhf-font-heading);
	font-size: var(--exhf-fs-mega-title);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--exhf-c-text-muted);
}

.exhf-mega__col-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	text-decoration: none;
	transition: color var(--exhf-dur-fast) var(--exhf-ease), gap var(--exhf-dur-fast) var(--exhf-ease);
}

.exhf-mega__col-link:hover,
.exhf-mega__col-link:focus-visible {
	color: var(--exhf-c-brand);
	gap: 9px;
}

.exhf-mega__col-desc {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--exhf-c-text-muted);
}

.exhf-mega__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.exhf-mega__link {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 10px;
	margin-inline: -10px;
	border-radius: var(--exhf-radius-sm);
	color: var(--exhf-c-text);
	text-decoration: none;
	transition: background-color var(--exhf-dur-fast) var(--exhf-ease),
	            color var(--exhf-dur-fast) var(--exhf-ease);
}

.exhf-mega__link:hover,
.exhf-mega__link:focus-visible {
	background: color-mix(in srgb, var(--exhf-c-brand) 8%, transparent);
	color: var(--exhf-c-brand);
}

.exhf-mega__link-thumb {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: var(--exhf-radius-sm);
	object-fit: cover;
}

.exhf-mega__link-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.exhf-mega__link-label {
	font-size: var(--exhf-fs-mega-link);
	font-weight: 600;
	line-height: 1.35;
}

.exhf-mega__link-desc {
	font-size: 13px;
	line-height: 1.45;
	color: var(--exhf-c-text-muted);
}

.exhf-mega__link-item.is-highlight .exhf-mega__link-label {
	color: var(--exhf-c-brand);
}

.exhf-mega__sublinks {
	margin: 2px 0 8px;
	padding-inline-start: 14px;
	list-style: none;
	border-inline-start: 2px solid var(--exhf-c-border);
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.exhf-mega__sublink {
	display: block;
	padding: 4px 0;
	font-size: 13.5px;
	color: var(--exhf-c-text-muted);
	text-decoration: none;
	transition: color var(--exhf-dur-fast) var(--exhf-ease);
}

.exhf-mega__sublink:hover,
.exhf-mega__sublink:focus-visible {
	color: var(--exhf-c-brand);
}

.exhf-mega__divider {
	height: 1px;
	margin-block: 8px;
	background: var(--exhf-c-border);
}

/* ----------------------------------------------------- Bloque destacado */

.exhf-mega__featured-inner {
	display: block;
	height: 100%;
	padding: 18px;
	border-radius: var(--exhf-radius-lg);
	background: var(--exhf-c-bg-alt);
	border: 1px solid var(--exhf-c-border);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--exhf-dur) var(--exhf-ease),
	            transform var(--exhf-dur) var(--exhf-ease-out);
}

a.exhf-mega__featured-inner:hover,
a.exhf-mega__featured-inner:focus-visible {
	border-color: var(--exhf-c-brand);
	transform: translateY(-2px);
}

.exhf-mega__featured-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--exhf-radius);
	margin-block-end: 14px;
}

.exhf-mega__featured-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.exhf-mega__featured-title {
	font-family: var(--exhf-font-heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.exhf-mega__featured-text {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--exhf-c-text-muted);
}

.exhf-mega__featured-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block-start: 4px;
	color: var(--exhf-c-brand);
	font-size: 14px;
	font-weight: 700;
}

.exhf-mega__note {
	margin-block-start: 24px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--exhf-c-border);
	font-size: 13px;
	color: var(--exhf-c-text-muted);
}

/* ==========================================================================
   07 · Buscador
   ========================================================================== */

.exhf-search {
	position: relative;
	display: flex;
	align-items: center;
}

/* Mejora progresiva: sin JavaScript el formulario está visible y el botón de
   abrir no existe, así que el buscador sigue siendo usable. En cuanto el JS
   arranca marca <html class="exhf-ready"> y el campo pasa a colapsarse. */
.exhf-search__toggle {
	display: none;
}

.exhf-ready .exhf-search__toggle {
	display: grid;
}

.exhf-ready .exhf-search--inline:not(.is-expanded):not(.is-open) .exhf-search__panel,
.exhf-ready .exhf-search--overlay:not(.is-expanded):not(.is-open) .exhf-search__panel {
	display: none;
}

.exhf-search.is-expanded .exhf-search__panel,
.exhf-search.is-open .exhf-search__panel {
	display: block;
}

.exhf-search--inline.is-open .exhf-search__panel {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: calc(100% + 10px);
	width: min(420px, calc(100vw - 32px));
	z-index: 2;
}

.exhf-search--overlay.is-open .exhf-search__panel {
	position: fixed;
	inset-block-start: var(--exhf-h-total);
	inset-inline: 0;
	padding: 20px var(--exhf-gutter);
	background: var(--exhf-c-bg-elevated);
	border-block-end: 1px solid var(--exhf-c-border);
	box-shadow: var(--exhf-shadow);
	z-index: calc(var(--exhf-z) + 1);
}

.exhf-search__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px 6px 12px;
	border: 1px solid var(--exhf-c-border);
	border-radius: 999px;
	background: var(--exhf-c-bg);
	transition: border-color var(--exhf-dur-fast) var(--exhf-ease),
	            box-shadow var(--exhf-dur-fast) var(--exhf-ease);
}

.exhf-search__form:focus-within {
	border-color: var(--exhf-c-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--exhf-c-brand) 18%, transparent);
}

.exhf-search__icon {
	display: grid;
	place-items: center;
	color: var(--exhf-c-text-muted);
}

.exhf-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	color: var(--exhf-c-text);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	padding: 6px 0;
	outline: none;
}

.exhf-search__input::placeholder {
	color: var(--exhf-c-text-muted);
	opacity: 1;
}

/* Oculta la "x" nativa de WebKit: duplica nuestro botón de borrar y no es
   accesible por teclado. */
.exhf-search__input::-webkit-search-cancel-button {
	appearance: none;
}

.exhf-search__clear,
.exhf-search__submit {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var(--exhf-dur-fast) var(--exhf-ease);
}

.exhf-search__clear {
	background: none;
	color: var(--exhf-c-text-muted);
}

.exhf-search__clear:hover {
	background: color-mix(in srgb, var(--exhf-c-text) 8%, transparent);
}

.exhf-search__submit {
	background: var(--exhf-c-brand);
	color: var(--exhf-c-on-brand);
}

.exhf-search__submit:hover {
	background: var(--exhf-c-brand-hover);
}

/* ------------------------------------------------------------ Resultados */

.exhf-search__results {
	margin-block-start: 8px;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--exhf-c-bg-elevated);
	border: 1px solid var(--exhf-c-border);
	border-radius: var(--exhf-radius);
	box-shadow: var(--exhf-shadow);
	padding: 8px;
}

.exhf-search--overlay .exhf-search__results {
	box-shadow: none;
	border: 0;
	padding-inline: 0;
	max-width: var(--exhf-container);
	margin-inline: auto;
}

.exhf-search__group-title {
	margin: 10px 8px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--exhf-c-text-muted);
}

.exhf-search__result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px;
	border-radius: var(--exhf-radius-sm);
	color: var(--exhf-c-text);
	text-decoration: none;
	cursor: pointer;
}

.exhf-search__result:hover,
.exhf-search__result.is-active {
	background: color-mix(in srgb, var(--exhf-c-brand) 10%, transparent);
}

.exhf-search__result-thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: var(--exhf-radius-sm);
	object-fit: cover;
	background: var(--exhf-c-bg-alt);
}

.exhf-search__result-body {
	min-width: 0;
}

.exhf-search__result-title {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.exhf-search__result-excerpt {
	display: block;
	margin-block-start: 2px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--exhf-c-text-muted);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.exhf-search__empty,
.exhf-search__loading {
	padding: 22px 12px;
	text-align: center;
	font-size: 14px;
	color: var(--exhf-c-text-muted);
}

.exhf-search__all {
	display: block;
	margin-block-start: 6px;
	padding: 11px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--exhf-c-brand);
	text-decoration: none;
	border-block-start: 1px solid var(--exhf-c-border);
}

.exhf-search__all:hover {
	background: color-mix(in srgb, var(--exhf-c-brand) 8%, transparent);
}

/* ==========================================================================
   08 · Botones de utilidad, idioma y tema
   ========================================================================== */

.exhf-utils {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 2px;
	margin-inline-start: auto;
}

.exhf-util-btn {
	display: grid;
	place-items: center;
	width: max(38px, calc(var(--exhf-tap) - 10px));
	height: max(38px, calc(var(--exhf-tap) - 10px));
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--exhf-c-text);
	cursor: pointer;
	transition: background-color var(--exhf-dur-fast) var(--exhf-ease),
	            color var(--exhf-dur-fast) var(--exhf-ease);
}

.exhf-util-btn:hover,
.exhf-util-btn:focus-visible {
	background: color-mix(in srgb, var(--exhf-c-text) 8%, transparent);
	color: var(--exhf-c-brand);
}

/* --------------------------------------------------------------- Idioma */

.exhf-lang {
	position: relative;
}

.exhf-lang__toggle {
	width: auto;
	min-width: max(38px, calc(var(--exhf-tap) - 10px));
	padding-inline: 8px;
	gap: 4px;
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 700;
}

.exhf-lang__flag {
	font-size: 15px;
	line-height: 1;
}

.exhf-lang__menu {
	position: absolute;
	inset-block-start: calc(100% + 6px);
	inset-inline-end: 0;
	min-width: 180px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--exhf-c-bg-elevated);
	border: 1px solid var(--exhf-c-border);
	border-radius: var(--exhf-radius);
	box-shadow: var(--exhf-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--exhf-dur-fast) var(--exhf-ease),
	            transform var(--exhf-dur-fast) var(--exhf-ease-out),
	            visibility 0s linear var(--exhf-dur-fast);
	z-index: 3;
}

.exhf-lang.is-open .exhf-lang__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

.exhf-lang__item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: var(--exhf-radius-sm);
	color: var(--exhf-c-text);
	font-size: 14px;
	text-decoration: none;
}

.exhf-lang__item:hover,
.exhf-lang__item:focus-visible {
	background: color-mix(in srgb, var(--exhf-c-brand) 10%, transparent);
}

.exhf-lang__item.is-active {
	font-weight: 700;
	color: var(--exhf-c-brand);
}

/* ----------------------------------------------------------- Tema y menú */

.exhf-theme-toggle {
	position: relative;
}

.exhf-theme-toggle__icon {
	grid-area: 1 / 1;
	display: grid;
	place-items: center;
	transition: opacity var(--exhf-dur) var(--exhf-ease),
	            transform var(--exhf-dur) var(--exhf-ease-out);
}

.exhf-theme-toggle__icon--moon {
	opacity: 0;
	transform: rotate(-40deg) scale(.7);
}

:root[data-theme="dark"] .exhf-theme-toggle__icon--sun {
	opacity: 0;
	transform: rotate(40deg) scale(.7);
}

:root[data-theme="dark"] .exhf-theme-toggle__icon--moon {
	opacity: 1;
	transform: none;
}

.exhf-assistant-launch {
	color: var(--exhf-c-brand);
}

.exhf-burger {
	display: none;
}

.exhf-burger__bars {
	display: grid;
	gap: 4px;
	width: 20px;
}

.exhf-burger__bars i {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--exhf-dur) var(--exhf-ease),
	            opacity var(--exhf-dur-fast) var(--exhf-ease);
}

.exhf-burger[aria-expanded="true"] .exhf-burger__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.exhf-burger[aria-expanded="true"] .exhf-burger__bars i:nth-child(2) { opacity: 0; }
.exhf-burger[aria-expanded="true"] .exhf-burger__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   09 · Marquesina
   ========================================================================== */

.exhf-ticker {
	height: var(--exhf-h-ticker);
	background: var(--exhf-c-bg-alt);
	border-block-start: 1px solid var(--exhf-c-border);
	overflow: hidden;
}

.exhf-ticker__inner {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
}

.exhf-ticker__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.exhf-ticker__track {
	display: flex;
	align-items: center;
	gap: 44px;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
	will-change: transform;
}

.exhf-ticker--marquee .exhf-ticker__track {
	animation: exhf-marquee var(--exhf-marquee-duration, 40s) linear infinite;
}

.exhf-ticker.is-paused .exhf-ticker__track {
	animation-play-state: paused;
}

@keyframes exhf-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Estilos fade y slide: un solo elemento visible, el JS alterna `.is-current`. */
.exhf-ticker--fade .exhf-ticker__track,
.exhf-ticker--slide .exhf-ticker__track {
	display: grid;
	gap: 0;
}

.exhf-ticker--fade .exhf-ticker__item,
.exhf-ticker--slide .exhf-ticker__item {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity var(--exhf-dur-slow) var(--exhf-ease),
	            transform var(--exhf-dur-slow) var(--exhf-ease-out);
	pointer-events: none;
}

.exhf-ticker--slide .exhf-ticker__item { transform: translateY(10px); }

.exhf-ticker--fade .exhf-ticker__item.is-current,
.exhf-ticker--slide .exhf-ticker__item.is-current {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.exhf-ticker__link,
.exhf-ticker__text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--exhf-c-text-muted);
	text-decoration: none;
	transition: color var(--exhf-dur-fast) var(--exhf-ease);
}

.exhf-ticker__link:hover,
.exhf-ticker__link:focus-visible {
	color: var(--exhf-c-brand);
}

.exhf-badge--ticker {
	background: var(--exhf-c-accent);
	color: #14161a;
}

.exhf-ticker__pause {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--exhf-c-text-muted);
	cursor: pointer;
}

.exhf-ticker__pause:hover {
	background: color-mix(in srgb, var(--exhf-c-text) 8%, transparent);
	color: var(--exhf-c-text);
}

/* Icono dibujado con CSS: dos barras (pausa) que se transforman en triángulo
   (reproducir). Evita cargar dos SVG para un control secundario. */
.exhf-ticker__pause-icon {
	width: 9px;
	height: 10px;
	border-inline: 3px solid currentColor;
}

.exhf-ticker.is-paused .exhf-ticker__pause-icon {
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-inline-start: 9px solid currentColor;
	border-inline-end: 0;
}

/* ==========================================================================
   10 · Paneles deslizantes
   ========================================================================== */

.exhf-backdrop {
	position: fixed;
	inset: 0;
	background: var(--exhf-c-overlay);
	opacity: 0;
	transition: opacity var(--exhf-dur) var(--exhf-ease);
	z-index: calc(var(--exhf-z) + 10);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.exhf-backdrop.is-visible {
	opacity: 1;
}

.exhf-panel {
	position: fixed;
	inset-block: 0;
	width: min(var(--exhf-panel-w), 100vw);
	max-width: 100%;
	display: flex;
	flex-direction: column;
	background: var(--exhf-c-bg-elevated);
	box-shadow: var(--exhf-shadow-lg);
	z-index: calc(var(--exhf-z) + 20);
	transition: transform var(--exhf-dur-slow) var(--exhf-ease-out);
	overscroll-behavior: contain;
}

.exhf-panel--left  { inset-inline-start: 0; transform: translateX(-100%); }
.exhf-panel--right { inset-inline-end: 0;   transform: translateX(100%); }

.exhf-panel.is-open {
	transform: translateX(0);
}

.exhf-panel__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-block-end: 1px solid var(--exhf-c-border);
	min-height: var(--exhf-h-main-mobile);
}

.exhf-panel__title {
	margin: 0;
	font-family: var(--exhf-font-heading);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.exhf-panel__brand .exhf-brand__logo {
	width: 140px;
	max-height: 40px;
}

.exhf-panel__close {
	display: grid;
	place-items: center;
	width: var(--exhf-tap);
	height: var(--exhf-tap);
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--exhf-c-text);
	cursor: pointer;
}

.exhf-panel__close:hover {
	background: color-mix(in srgb, var(--exhf-c-text) 8%, transparent);
}

.exhf-panel__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px 20px 40px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.exhf-panel__search .exhf-search,
.exhf-panel__search .exhf-search__panel {
	width: 100%;
	display: block;
}

/* ------------------------------------------------------------- Acordeón */

.exhf-accordion__list,
.exhf-accordion__sublist,
.exhf-panel__secondary ul,
.exhf-panel__langs ul,
.exhf-panel__quick ul,
.exhf-panel__social ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.exhf-accordion__item {
	border-block-end: 1px solid var(--exhf-c-border);
}

.exhf-accordion__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.exhf-accordion__link {
	flex: 1 1 auto;
	display: block;
	padding: 15px 0;
	font-family: var(--exhf-font-heading);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: var(--exhf-ls-nav);
	text-transform: var(--exhf-tt-nav);
	color: var(--exhf-c-text);
	text-decoration: none;
}

.exhf-accordion__toggle {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: var(--exhf-tap);
	height: var(--exhf-tap);
	border: 0;
	background: none;
	color: var(--exhf-c-text-muted);
	cursor: pointer;
	transition: transform var(--exhf-dur) var(--exhf-ease);
}

.exhf-accordion__toggle[aria-expanded="true"] {
	transform: rotate(180deg);
	color: var(--exhf-c-brand);
}

.exhf-accordion__panel {
	padding-block-end: 14px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.exhf-accordion__group-title {
	margin: 0 0 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--exhf-c-text-muted);
}

.exhf-accordion__sublink {
	display: flex;
	align-items: center;
	min-height: var(--exhf-tap);
	padding: 4px 0;
	font-size: 15px;
	color: var(--exhf-c-text);
	text-decoration: none;
}

.exhf-accordion__sublink:hover,
.exhf-accordion__sublink:focus-visible {
	color: var(--exhf-c-brand);
}

/* ------------------------------------------- Secundarios, idiomas, social */

.exhf-panel__secondary li,
.exhf-panel__langs li,
.exhf-panel__social li {
	border-block-end: 1px solid color-mix(in srgb, var(--exhf-c-border) 60%, transparent);
}

.exhf-panel__secondary-link,
.exhf-panel__lang,
.exhf-panel__social a {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: var(--exhf-tap);
	color: var(--exhf-c-text-muted);
	font-size: 15px;
	text-decoration: none;
}

.exhf-panel__secondary-link.is-cta {
	color: var(--exhf-c-brand);
	font-weight: 700;
}

.exhf-panel__lang.is-active {
	color: var(--exhf-c-brand);
	font-weight: 700;
}

.exhf-panel__langs-title {
	margin: 0 0 4px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--exhf-c-text-muted);
}

.exhf-panel__quick-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	margin-block-end: 8px;
	border: 1px solid var(--exhf-c-border);
	border-radius: var(--exhf-radius);
	color: var(--exhf-c-text);
	text-decoration: none;
	transition: border-color var(--exhf-dur-fast) var(--exhf-ease),
	            background-color var(--exhf-dur-fast) var(--exhf-ease);
}

.exhf-panel__quick-link:hover,
.exhf-panel__quick-link:focus-visible {
	border-color: var(--exhf-c-brand);
	background: color-mix(in srgb, var(--exhf-c-brand) 6%, transparent);
}

.exhf-panel__quick-link.is-cta {
	background: var(--exhf-c-brand);
	border-color: var(--exhf-c-brand);
	color: var(--exhf-c-on-brand);
}

.exhf-panel__quick-label {
	display: block;
	font-weight: 700;
	font-size: 15px;
}

.exhf-panel__quick-desc {
	display: block;
	margin-block-start: 2px;
	font-size: 13px;
	opacity: .8;
}

/* ==========================================================================
   11 · Asistente
   ========================================================================== */

.exhf-assistant-fab {
	position: fixed;
	inset-block-end: 24px;
	inset-inline-end: 24px;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 999px;
	background: var(--exhf-c-brand);
	color: var(--exhf-c-on-brand);
	box-shadow: var(--exhf-shadow);
	cursor: pointer;
	z-index: calc(var(--exhf-z) + 15);
	transition: transform var(--exhf-dur) var(--exhf-ease-out),
	            background-color var(--exhf-dur-fast) var(--exhf-ease);
}

.exhf-assistant-fab:hover {
	transform: scale(1.06);
	background: var(--exhf-c-brand-hover);
}

.exhf-assistant {
	position: fixed;
	inset-block-end: 24px;
	inset-inline-end: 24px;
	width: min(400px, calc(100vw - 32px));
	height: min(560px, calc(100vh - 120px));
	display: flex;
	flex-direction: column;
	background: var(--exhf-c-bg-elevated);
	border: 1px solid var(--exhf-c-border);
	border-radius: var(--exhf-radius-lg);
	box-shadow: var(--exhf-shadow-lg);
	overflow: hidden;
	z-index: calc(var(--exhf-z) + 25);
	opacity: 0;
	transform: translateY(12px) scale(.98);
	transition: opacity var(--exhf-dur) var(--exhf-ease),
	            transform var(--exhf-dur) var(--exhf-ease-out);
}

.exhf-assistant.is-open {
	opacity: 1;
	transform: none;
}

.exhf-assistant__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-block-end: 1px solid var(--exhf-c-border);
	background: var(--exhf-c-bg-alt);
}

.exhf-assistant__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--exhf-font-heading);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--exhf-c-brand);
}

/* Contador de mensajes restantes. Sólo aparece en los dos últimos, para no
   transmitir escasez desde el primer turno. */
.exhf-assistant__quota {
	margin-inline-start: auto;
	margin-inline-end: 8px;
	font-size: 11px;
	font-weight: 600;
	color: var(--exhf-c-text-muted);
}

.exhf-assistant__quota:empty {
	display: none;
}

.exhf-assistant__input:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.exhf-assistant__close {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--exhf-c-text-muted);
	cursor: pointer;
}

.exhf-assistant__close:hover {
	background: color-mix(in srgb, var(--exhf-c-text) 8%, transparent);
	color: var(--exhf-c-text);
}

.exhf-assistant__log {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.exhf-assistant__msg {
	max-width: 86%;
	padding: 10px 14px;
	border-radius: 16px;
	font-size: 14.5px;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.exhf-assistant__msg p {
	margin: 0 0 8px;
}

.exhf-assistant__msg p:last-child {
	margin-block-end: 0;
}

.exhf-assistant__msg a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.exhf-assistant__msg--bot {
	align-self: flex-start;
	background: var(--exhf-c-bg-alt);
	border-start-start-radius: 4px;
}

.exhf-assistant__msg--user {
	align-self: flex-end;
	background: var(--exhf-c-brand);
	color: var(--exhf-c-on-brand);
	border-start-end-radius: 4px;
}

.exhf-assistant__msg--error {
	align-self: stretch;
	background: color-mix(in srgb, #d93025 12%, transparent);
	color: var(--exhf-c-text);
	font-size: 13.5px;
}

/* Fuentes citadas por el grounding del proveedor. */
.exhf-assistant__sources {
	margin-block-start: 10px;
	padding-block-start: 8px;
	border-block-start: 1px solid var(--exhf-c-border);
}

.exhf-assistant__sources-title {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--exhf-c-text-muted);
}

.exhf-assistant__sources ol {
	margin: 0;
	padding-inline-start: 18px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.exhf-assistant__sources li {
	font-size: 12.5px;
	line-height: 1.4;
}

.exhf-assistant__sources a {
	color: var(--exhf-c-text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

.exhf-assistant__sources a:hover,
.exhf-assistant__sources a:focus-visible {
	color: var(--exhf-c-brand);
}

.exhf-assistant__typing {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

.exhf-assistant__typing i {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	opacity: .4;
	animation: exhf-blink 1.2s infinite ease-in-out;
}

.exhf-assistant__typing i:nth-child(2) { animation-delay: .18s; }
.exhf-assistant__typing i:nth-child(3) { animation-delay: .36s; }

@keyframes exhf-blink {
	0%, 80%, 100% { opacity: .25; transform: translateY(0); }
	40%           { opacity: 1;   transform: translateY(-3px); }
}

.exhf-assistant__form {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px;
	border-block-start: 1px solid var(--exhf-c-border);
}

.exhf-assistant__input {
	flex: 1 1 auto;
	max-height: 120px;
	padding: 10px 12px;
	border: 1px solid var(--exhf-c-border);
	border-radius: var(--exhf-radius);
	background: var(--exhf-c-bg);
	color: var(--exhf-c-text);
	font-family: inherit;
	font-size: 14.5px;
	line-height: 1.45;
	resize: none;
}

.exhf-assistant__input:focus {
	outline: none;
	border-color: var(--exhf-c-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--exhf-c-brand) 18%, transparent);
}

.exhf-assistant__send {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: var(--exhf-radius);
	background: var(--exhf-c-brand);
	color: var(--exhf-c-on-brand);
	cursor: pointer;
	transition: background-color var(--exhf-dur-fast) var(--exhf-ease), opacity var(--exhf-dur-fast) var(--exhf-ease);
}

.exhf-assistant__send:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.exhf-assistant__note {
	flex: 0 0 auto;
	margin: 0;
	padding: 0 14px 12px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--exhf-c-text-muted);
}

/* ==========================================================================
   12 · Pie de página
   ========================================================================== */

.exhf-footer {
	position: relative;
	background: var(--exhf-c-bg-alt);
	border-block-start: 1px solid var(--exhf-c-border);
	color: var(--exhf-c-text);
	font-size: var(--exhf-fs-footer);
	padding-block: clamp(40px, 5vw, 72px) 0;
}

.exhf-footer__top {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	grid-template-columns: minmax(220px, 1fr) 2.2fr minmax(240px, 1fr);
	align-items: start;
	padding-block-end: clamp(32px, 4vw, 52px);
}

.exhf-footer__brand .exhf-brand__logo {
	width: 160px;
	max-width: 100%;
	height: auto;
	margin-block-end: 16px;
}

.exhf-footer__site-name {
	margin: 0 0 12px;
	font-family: var(--exhf-font-heading);
	font-size: 20px;
	font-weight: 800;
}

.exhf-footer__about {
	margin: 0 0 18px;
	max-width: 44ch;
	font-size: 14px;
	line-height: 1.6;
	color: var(--exhf-c-text-muted);
}

.exhf-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Botón cuadrado con el icono de marca. El área táctil respeta el mínimo
   configurado aunque el icono sea de 20px. */
.exhf-footer__social-link {
	display: inline-grid;
	place-items: center;
	width: max(40px, calc(var(--exhf-tap) - 8px));
	height: max(40px, calc(var(--exhf-tap) - 8px));
	border: 1px solid var(--exhf-c-border);
	border-radius: 999px;
	color: var(--exhf-c-text-muted);
	text-decoration: none;
	transition: border-color var(--exhf-dur-fast) var(--exhf-ease),
	            color var(--exhf-dur-fast) var(--exhf-ease),
	            background-color var(--exhf-dur-fast) var(--exhf-ease),
	            transform var(--exhf-dur-fast) var(--exhf-ease-out);
}

.exhf-footer__social-link:hover,
.exhf-footer__social-link:focus-visible {
	border-color: var(--exhf-c-brand);
	color: var(--exhf-c-brand);
	background: color-mix(in srgb, var(--exhf-c-brand) 8%, transparent);
	transform: translateY(-1px);
}

.exhf-social-icon {
	display: block;
	flex: 0 0 auto;
}

.exhf-footer__cols {
	display: grid;
	gap: clamp(20px, 3vw, 40px);
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Contenedor posicionado del encabezado de columna. Es el bloque de
   posicionamiento del botón de plegado en móvil; sin él, el botón absoluto se
   referiría al <footer> y cubriría toda la zona inferior de la página. */
.exhf-footer__col-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-block-end: 12px;
}

.exhf-footer__col-title {
	margin: 0;
	font-family: var(--exhf-font-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--exhf-c-text-muted);
}

/* En escritorio las listas están siempre visibles y el botón no existe:
   `display:none` lo saca también del orden de tabulación. */
.exhf-footer__col-toggle {
	display: none;
}

.exhf-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.exhf-footer__link {
	color: var(--exhf-c-text);
	font-size: 14.5px;
	text-decoration: none;
	transition: color var(--exhf-dur-fast) var(--exhf-ease);
}

.exhf-footer__link:hover,
.exhf-footer__link:focus-visible {
	color: var(--exhf-c-brand);
}

.exhf-footer__newsletter-text {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--exhf-c-text-muted);
}

.exhf-newsletter__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 5px 5px 12px;
	border: 1px solid var(--exhf-c-border);
	border-radius: 999px;
	background: var(--exhf-c-bg);
}

.exhf-newsletter__row:focus-within {
	border-color: var(--exhf-c-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--exhf-c-brand) 18%, transparent);
}

.exhf-newsletter__icon {
	display: grid;
	place-items: center;
	color: var(--exhf-c-text-muted);
}

.exhf-newsletter__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	color: var(--exhf-c-text);
	font-family: inherit;
	font-size: 14.5px;
	padding: 8px 0;
	outline: none;
}

.exhf-newsletter__submit {
	flex: 0 0 auto;
	padding: 9px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--exhf-c-brand);
	color: var(--exhf-c-on-brand);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--exhf-dur-fast) var(--exhf-ease);
}

.exhf-newsletter__submit:hover {
	background: var(--exhf-c-brand-hover);
}

.exhf-newsletter__submit:disabled {
	opacity: .6;
	cursor: wait;
}

.exhf-newsletter__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-block-start: 10px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--exhf-c-text-muted);
}

.exhf-newsletter__consent input {
	margin-block-start: 2px;
	accent-color: var(--exhf-c-brand);
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.exhf-newsletter__feedback {
	margin: 8px 0 0;
	font-size: 13px;
	min-height: 1em;
}

.exhf-newsletter__feedback.is-error { color: #d93025; }
.exhf-newsletter__feedback.is-success { color: var(--exhf-c-brand); }

.exhf-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-block: 20px;
	border-block-start: 1px solid var(--exhf-c-border);
	font-size: 13px;
	color: var(--exhf-c-text-muted);
}

.exhf-footer__bottom p {
	margin: 0;
}

.exhf-footer__legal-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.exhf-footer__legal-nav a {
	color: inherit;
	text-decoration: none;
}

.exhf-footer__legal-nav a:hover,
.exhf-footer__legal-nav a:focus-visible {
	color: var(--exhf-c-brand);
	text-decoration: underline;
}

.exhf-footer__note {
	padding-block: 0 24px;
	font-size: 12px;
	color: var(--exhf-c-text-muted);
}

.exhf-to-top {
	position: fixed;
	inset-block-end: 24px;
	inset-inline-start: 24px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--exhf-c-border);
	border-radius: 999px;
	background: var(--exhf-c-bg-elevated);
	color: var(--exhf-c-text);
	cursor: pointer;
	box-shadow: var(--exhf-shadow-sm);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--exhf-dur) var(--exhf-ease), transform var(--exhf-dur) var(--exhf-ease-out);
	z-index: calc(var(--exhf-z) + 5);

	/* Sin esto, el botón transparente sigue capturando toques en la esquina
	   inferior de TODAS las páginas: era la causa de que en móvil «no se
	   pudiera pulsar» el pie cerca de esa zona. */
	pointer-events: none;
	visibility: hidden;
}

.exhf-to-top.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	visibility: visible;
}

/* ==========================================================================
   13 · Scroll spy
   ========================================================================== */

/* Resalta la palabra de la navegación cuya sección está en pantalla.
   Es la traducción visual de "destacar las palabras que bajan en la página". */
.exhf-nav__link.is-current {
	color: var(--exhf-c-brand);
}

.exhf-nav__link.is-current .exhf-nav__label {
	position: relative;
}

.exhf-root.is-spy-active .exhf-nav__link:not(.is-current) {
	color: color-mix(in srgb, var(--exhf-c-text) 55%, transparent);
}

/* ==========================================================================
   14 · Responsive
   ========================================================================== */

/* Los interruptores que dependen del punto de ruptura configurable se emiten
   desde PHP (Appearance::build_responsive_css). Aquí quedan los ajustes
   puramente cosméticos, que no cambian según el ajuste del usuario. */

@media (max-width: 1200px) {
	.exhf-mega.has-featured .exhf-mega__grid {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}

	.exhf-mega__featured {
		grid-column: 1 / -1;
	}

	.exhf-mega__featured-inner {
		display: grid;
		grid-template-columns: 200px 1fr;
		gap: 18px;
		align-items: center;
	}

	.exhf-mega__featured-image {
		margin-block-end: 0;
	}
}

@media (max-width: 900px) {
	.exhf-footer__top {
		grid-template-columns: 1fr 1fr;
	}

	.exhf-footer__brand,
	.exhf-footer__newsletter {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.exhf-footer__top {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.exhf-footer__cols {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* Las reglas del acordeón del pie NO están aquí: se generan desde PHP en
	   `Appearance::build_responsive_css()` usando el mismo punto de ruptura que
	   consume el JavaScript. Tenerlas duplicadas con un 640px fijo hacía que
	   CSS y JS discreparan si se cambiaba la configuración. */

	.exhf-footer__brand {
		padding-block-end: 24px;
	}

	.exhf-footer__newsletter {
		padding-block: 24px;
	}

	/* El input y el botón se apilan en lugar de comprimirse: a 360px de ancho
	   un input de tipo email junto a un botón deja ~120px de campo útil, que
	   es inservible para escribir un correo. */
	.exhf-newsletter__row {
		flex-wrap: wrap;
		gap: 10px;
		padding: 10px 12px;
		border-radius: var(--exhf-radius);
	}

	.exhf-newsletter__input {
		flex: 1 1 100%;
		min-width: 0;
	}

	.exhf-newsletter__icon {
		display: none;
	}

	.exhf-newsletter__submit {
		flex: 1 1 100%;
		width: 100%;
		min-height: var(--exhf-tap);
		border-radius: var(--exhf-radius-sm);
	}

	.exhf-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.exhf-footer__social {
		gap: 10px;
	}

	.exhf-assistant {
		inset: auto 0 0 0;
		width: 100%;
		height: min(80vh, 620px);
		border-radius: var(--exhf-radius-lg) var(--exhf-radius-lg) 0 0;
	}

	.exhf-assistant-fab {
		inset-block-end: 16px;
		inset-inline-end: 16px;
	}

	.exhf-to-top {
		inset-block-end: 16px;
		inset-inline-start: 16px;
	}
}

/* ==========================================================================
   15 · Movimiento reducido, alto contraste e impresión
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.exhf-root *,
	.exhf-footer *,
	.exhf-panel *,
	.exhf-assistant * {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	/* La marquesina se detiene por completo: es el caso de uso canónico de
	   esta media query (WCAG 2.3.3). */
	.exhf-ticker--marquee .exhf-ticker__track {
		animation: none !important;
		transform: none !important;
		flex-wrap: wrap;
		white-space: normal;
	}
}

@media (prefers-contrast: more) {
	.exhf-nav__link,
	.exhf-footer__link,
	.exhf-mega__link {
		text-decoration-thickness: 2px;
	}

	.exhf-header,
	.exhf-mega,
	.exhf-panel {
		border-color: var(--exhf-c-text);
	}
}

@media print {
	.exhf-root,
	.exhf-to-top,
	.exhf-assistant,
	.exhf-assistant-fab,
	.exhf-footer__social,
	.exhf-footer__newsletter {
		display: none !important;
	}

	.exhf-footer {
		border: 0;
		padding: 0;
	}
}

/* Reserva para navegadores sin `color-mix()`: se degrada a un gris neutro en
   lugar de perder por completo el estado hover. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.exhf-util-btn:hover,
	.exhf-topbar__link:hover,
	.exhf-mega__link:hover,
	.exhf-search__result:hover {
		background: rgba(127, 127, 127, .14);
	}
}