/*! BaseBlue — cabecera y menú. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* ==========================================================================
   CABECERA Y MENÚ

   Común a todas las páginas. La marca al centro y el botón del menú a la
   derecha, sin caja ni botón de color. La tinta la decide la superficie que
   pasa por debajo (`site.js`, y en la portada la secuencia), y pasada la
   apertura la cabecera se retira al bajar y vuelve al subir.
   ========================================================================== */

.hdr {
	position: fixed;
	inset: 0 0 auto;
	/* Por encima del menú: el mismo botón que lo abre es el que lo cierra, y
	   la marca sigue en su sitio mientras el panel está abierto. */
	z-index: 60;
	height: var(--header-h);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding-inline: var(--margin);
	pointer-events: none;
	color: var(--bb-pale);
	transition: color var(--dur-2) var(--ease-io), transform var(--dur-3) var(--ease-out);
}
.hdr > * { pointer-events: auto; }

/* Antes de que el JS mida la sección de arriba, una página interior ya
   arranca con la tinta de su superficie (la pone el montaje en <html>). */
html[data-tint="paper"] .hdr { color: var(--bb-navy); }
html[data-tint="flood"] .hdr { color: #fff; }

/* Cuando está sobre contenido lleva un velo del color de la superficie de
   debajo, esmerilado y con el borde inferior disuelto: la marca nunca queda
   montada sobre un titular y no aparece una barra con canto. Sin
   `saturate`: avivaba el azul de lo que pasa por debajo. */
.hdr::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: color-mix(in srgb, var(--hdr-bg, var(--page-bg)) 90%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	-webkit-mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, 0.62) 76%, transparent);
	mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, 0.62) 76%, transparent);
	opacity: 0;
	transition: opacity var(--dur-2) var(--ease-io), background-color var(--dur-2) var(--ease-io);
}
.hdr.is-solid::before { opacity: 1; }
.hdr.is-hidden { transform: translate3d(0, -100%, 0); }
/* Con el menú abierto manda el panel: ni se retira ni lleva velo, y va en
   blanco (la marca queda sobre el velo y el botón, sobre el azul). */
.is-menu-open .hdr { transform: none; color: #fff !important; }
.is-menu-open .hdr::before { opacity: 0; }

.hdr__brand { grid-column: 2; justify-self: center; display: block; }
.hdr__brand svg { width: var(--logo-w); height: auto; }

/* ---------------------------------------------------------- El botón */
/* Dos filetes de largo distinto —el de abajo más corto, alineado a la
   derecha— y la palabra al lado. Al pasar el ratón el corto se completa; al
   abrir, los dos se cruzan en una X fina y la palabra rueda de «Menu» a
   «Close» sin cambiar de sitio. */

.hdr__burger {
	grid-column: 3;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.1rem;
	height: 4.4rem;
	padding-left: 1.2rem;
	color: inherit;
}
/* «Menu» en caja de frase y sin tracking: es una palabra, no una etiqueta. */
.hdr__burger-label {
	position: relative;
	display: grid;
	overflow: hidden;
	height: 1.3em;
	font-size: var(--t-micro);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}
.hdr__burger-label span {
	grid-area: 1 / 1;
	text-align: right;
	transition: transform var(--dur-2) var(--ease-out);
}
.hdr__burger-label span + span { transform: translateY(105%); }
.is-menu-open .hdr__burger-label span:first-child { transform: translateY(-105%); }
.is-menu-open .hdr__burger-label span + span { transform: none; }

.hdr__burger-icon {
	position: relative;
	display: block;
	width: var(--burger-w);
	height: 0.9rem;
}
.hdr__burger-icon i {
	position: absolute;
	right: 0;
	height: 1.5px;
	border-radius: 1px;
	background: currentColor;
	transition:
		top var(--dur-2) var(--ease-out),
		width var(--dur-2) var(--ease-out),
		transform var(--dur-2) var(--ease-out);
}
.hdr__burger-icon i:nth-child(1) { top: 0; width: 100%; }
.hdr__burger-icon i:nth-child(2) { top: calc(100% - 1.5px); width: 58%; }
.hdr__burger:focus-visible .hdr__burger-icon i:nth-child(2) { width: 100%; }
@media (hover: hover) and (pointer: fine) {
	.hdr__burger:hover .hdr__burger-icon i:nth-child(2) { width: 100%; }
}
.is-menu-open .hdr__burger-icon i { top: calc(50% - 0.75px); width: 86%; }
.is-menu-open .hdr__burger-icon i:nth-child(1) { transform: rotate(45deg); }
.is-menu-open .hdr__burger-icon i:nth-child(2) { transform: rotate(-45deg); }

/* ===================================================================== Menú */
/* El panel no se desliza ni se desvanece: crece desde el propio botón. Su
   recorte parte de un cuadrado del tamaño del botón y se abre hasta el panel
   entero; después se dibujan los filetes de izquierda a derecha y cada rótulo
   sube desde detrás de su línea. Toda la coreografía está en `site.js`. */

.menu {
	position: fixed;
	inset: 0;
	z-index: 50;
	visibility: hidden;
	pointer-events: none;
}
.is-menu-open .menu { pointer-events: auto; }

/* El único esmerilado del sitio con función: aparta la página de detrás. */
.menu__scrim {
	position: absolute;
	inset: 0;
	background: rgba(6, 10, 16, 0.42);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
}

.menu__panel {
	--gap: clamp(0.8rem, 0.9vw, 1.6rem);
	position: absolute;
	top: var(--gap);
	right: var(--gap);
	bottom: var(--gap);
	width: min(64rem, 38vw);
	/* Arriba, la altura de la cabecera: esa franja es del botón de cerrar. */
	padding: calc(var(--header-h) - var(--gap)) clamp(2.4rem, 2.9vw, 5.2rem) clamp(2.4rem, 3.4svh, 4.4rem);
	border-radius: var(--r-l);
	background: var(--bb-flood);
	color: #fff;
	display: flex;
	flex-direction: column;
	clip-path: inset(0 0 100% 100% round var(--r-l));
	overflow: hidden;
}

.menu__list {
	list-style: none;
	margin: clamp(3rem, 11svh, 13rem) 0 0;
	padding: 0;
}
.menu__item { position: relative; }
.menu__rule {
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.3);
	transform-origin: 0 50%;
}
.menu__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 0.2em 0 0.16em;
	overflow: hidden;
	font-size: var(--t-menu);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.025em;
}
.menu__label {
	display: block;
	transition: transform var(--dur-2) var(--ease-out);
}
/* Solo la flecha: la numeración 01–04 era decoración. */
.menu__meta {
	display: inline-flex;
	align-items: center;
	color: rgba(255, 255, 255, 0.55);
	transition: color var(--dur-1) var(--ease-out);
}
.menu__meta svg {
	width: 1.5rem;
	height: 1.5rem;
	opacity: 0;
	transform: translateX(-0.6rem);
	transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.menu__link:focus-visible .menu__label { transform: translateX(0.14em); }
.menu__link:focus-visible .menu__meta { color: #fff; }
.menu__link:focus-visible .menu__meta svg { opacity: 1; transform: none; }
/* Solo con ratón: en iPad/iPhone el hover se quedaría pegado tras tocar. */
@media (hover: hover) and (pointer: fine) {
	.menu__link:hover .menu__label { transform: translateX(0.14em); }
	.menu__link:hover .menu__meta { color: #fff; }
	.menu__link:hover .menu__meta svg { opacity: 1; transform: none; }
	.menu__legal a:hover { color: #fff; }
}
/* La página en la que ya se está se lee algo apagada: no invita a ir. */
.menu__link[aria-current="page"] .menu__label { opacity: 0.62; }

.menu__foot {
	margin-top: auto;
	padding-top: 3rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
}
.menu__home {
	overflow: hidden;
	font-size: var(--t-menu);
	line-height: 1.04;
	letter-spacing: -0.025em;
}
.menu__home .menu__label { display: block; }
.menu__legal {
	display: flex;
	gap: clamp(1.6rem, 1.8vw, 3.2rem);
	padding-bottom: 0.5em;
	font-size: var(--t-micro);
	color: rgba(255, 255, 255, 0.78);
}
.menu__legal a { transition: color var(--dur-1) var(--ease-out); }
.menu__legal a:focus-visible { color: #fff; }

/* ================================================================ Retrato */

@media (orientation: portrait) {
	/* En vertical el botón es solo el icono: la palabra no cabe con la marca
	   centrada sin apretarla. El área táctil sigue midiendo 44 px. */
	.hdr__burger-label { display: none; }
	.hdr__burger { min-width: 4.4rem; padding-left: 0; }

	.menu__panel {
		--gap: 0.8rem;
		left: var(--gap);
		width: auto;
		padding-inline: 2.4rem;
	}
	.menu__list { margin-top: clamp(2rem, 8svh, 8rem); }
	.menu__legal { flex-direction: column; gap: 0.4rem; align-items: flex-end; }
}

/* Teléfono: el panel a sangre, sin marco de página oscurecida alrededor
   (la barra de Safari se pone azul con él, `site.js`). */
@media (max-width: 767px) {
	.menu__panel { --gap: 0rem; inset: 0; width: auto; border-radius: 0; }
}

@media (orientation: landscape) and (max-height: 520px) {
	.menu__panel { width: min(52rem, 50vw); }
	.menu__list { margin-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.hdr__burger-icon i, .hdr__burger-label span, .menu__label, .menu__meta svg {
		transition-duration: 0.001s;
	}
	/* La cabecera sigue retirándose, pero sin deslizarse. */
	.hdr { transition: color var(--dur-2) var(--ease-io); }
}