/*
 * Gastrototem · Component · Header
 *
 * Header del sitio + overlay del menú principal.
 * Mobile-first. Depende de assets/css/base.css.
 *
 * Cero hex literales · cero familias tipográficas literales · cero magic numbers.
 * Todos los valores numéricos viven en custom properties locales o en tokens.
 */

.gtt-header {
	/* Dimensiones */
	--header-height-mobile: 64px;
	--header-height-desktop: 80px;
	--header-padding-x-mobile: 20px;
	--header-padding-x-tablet: 32px;
	--header-padding-x-desktop: 64px;
	--header-border-bottom-width: 1px;

	/* Lockup */
	--lockup-width-mobile: 140px;
	--lockup-width-desktop: 180px;

	/* Toggle */
	--toggle-hit-area: 44px;
	--toggle-svg-size: 28px;
	--toggle-morph-distance: 7px;

	/* Overlay */
	--overlay-padding-top: 96px;
	--overlay-padding-bottom-mobile: 64px;
	--overlay-padding-bottom-desktop: 64px;
	--overlay-column-max-width: 720px;

	/* Menú */
	--menu-numeral-column-width: 64px;
	--menu-label-size-mobile: 32px;
	--menu-label-size-desktop: 48px;
	--menu-label-line-height: 1.05;
	--menu-numeral-size: 14px;
	--menu-numeral-tracking: 0.18em;
	--menu-rule-margin-y: 32px;

	/* CTA del overlay */
	--cta-margin-top-mobile: 64px;
	--cta-margin-top-desktop: 96px;
	--cta-kicker-size: 12px;
	--cta-kicker-tracking: 0.18em;
	--cta-kicker-margin-bottom: 12px;
	--cta-link-size-mobile: 20px;
	--cta-link-size-desktop: 24px;
	--cta-arrow-translate: 4px;

	/* Skip-link */
	--skip-padding-y: 12px;
	--skip-padding-x: 16px;
	--skip-radius: 4px;
	--skip-font-size: 14px;
	--skip-offset: 8px;

	/* Transiciones */
	--transition-overlay-in: 200ms;
	--transition-overlay-out: 160ms;
	--transition-hover: 180ms;
	--transition-easing: ease-out;
	--transition-skin: 240ms;   /* fondo + borde al conmutar de piel */
	--transition-logo: 200ms;   /* rellenos del logo al conmutar de piel */
	--transition-intro-base:   200ms;   /* transform del header FUERA del intro */
	--transition-intro-reveal: 400ms;   /* bajada del header al revelar tras el splash */

	/* ----------------------------------------------------------------
	 * PIELES · el header tiene dos pieles conmutables por clase.
	 * Base (sin modificador) = SÓLIDA: fallback legible, mejora
	 * progresiva. .gtt-header.is-transparent = TRANSPARENTE.
	 * El JS de la Pieza 2 AÑADIRÁ .is-transparent sobre la banda y la
	 * quitará después; por eso la base NO es transparente.
	 *
	 * Cada relleno es una custom property para ajuste fácil. La piel
	 * transparente se define redeclarando solo estas variables en el
	 * modificador (más abajo); cascadean al fondo, al borde, al color
	 * de primer plano (toggle vía currentColor) y a los tres rellenos
	 * del logo.
	 * ------------------------------------------------------------- */
	--header-bg:           var(--gtt-color-papel-100);
	--header-border-color: var(--gtt-color-grafito-200);
	--header-fg:           var(--gtt-color-grafito-900);   /* toggle vía currentColor */
	--header-fg-hover:     var(--gtt-color-tinta-500);     /* :hover del toggle */
	--lockup-square-fill:  var(--gtt-color-grafito-900);   /* cuadrado <rect>  */
	--lockup-word-fill:    var(--gtt-color-grafito-900);   /* palabra path.st0 */
	--lockup-symbol-fill:  var(--gtt-color-papel-100);     /* símbolo path.st1 (knockout) */

	/* Z-index — la jerarquía interna del header (bar > overlay) se
	 * resuelve con z-index ordinales locales (1, 2) en las propias
	 * reglas de .gtt-header__bar y .gtt-menu-overlay; sus valores
	 * absolutos son irrelevantes mientras bar > overlay. Ahora que el
	 * header es fixed, necesita un z-index propio sobre el contenido
	 * (patrón Lovable: header 60). El skip-link (--z-skip) queda por
	 * encima del header al recibir focus. */
	--header-z-index: 60;
	--z-skip: 110;

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--header-z-index);
	background-color: var(--header-bg);
	border-bottom: var(--header-border-bottom-width) solid var(--header-border-color);
	color: var(--header-fg);
	font-family: var(--gtt-font-sans);
	transition:
		background-color var(--transition-skin) var(--transition-easing),
		border-color var(--transition-skin) var(--transition-easing),
		transform var(--transition-intro-base) var(--transition-easing);
}

/* Piel TRANSPARENTE — solo redeclara las variables de piel. El JS de la
 * Pieza 2 añade/quita esta clase; aquí es puramente declarativa.
 *
 * El fondo y el borde se mantienen transparentes siempre que la piel lo
 * esté, también con el menú abierto: así el overlay (campo papel a sangre)
 * se lee continuo bajo la barra. */
.gtt-header.is-transparent {
	--header-bg:           transparent;
	--header-border-color: transparent;
}

/* El logo y el primer plano (toggle vía currentColor) solo van en claro
 * MIENTRAS el menú está cerrado. Con el menú abierto (.is-menu-open) estas
 * redeclaraciones se desactivan y cascadean de vuelta a los tokens SÓLIDOS
 * de la base: el logo recupera su forma original (la de la home) y la "X"
 * de cerrar queda legible sobre el fondo claro del overlay. */
.gtt-header.is-transparent:not(.is-menu-open) {
	--header-fg:           var(--gtt-color-papel-100);
	--header-fg-hover:     var(--gtt-color-papel-50);
	--lockup-square-fill:  var(--gtt-color-papel-100);   /* cuadrado relleno papel (logo invertido) */
	--lockup-word-fill:    var(--gtt-color-papel-100);
	--lockup-symbol-fill:  var(--gtt-color-tinta-500);   /* símbolo knockout = color de la banda */
}

/* ============================================================
 * ESTADO INTRO · aparición del header tras el splash (solo home)
 *
 * El script inline síncrono de header.php añade .is-intro antes del primer
 * pintado (primera visita de sesión, con movimiento permitido): el header
 * arranca oculto. header.js revela a ~2100ms con el dance de dos clases:
 *
 *   1. añade .is-revealing  → transform pasa a 400ms (override de la base)
 *   2. quita  .is-intro     → translateY(0): la BAJADA anima a 400ms
 *   3. tras la bajada, quita .is-revealing → vuelve a la base (200ms)
 *
 * Así la bajada es 400ms y cualquier transform FUERA del intro es 200ms,
 * como en Lovable. .is-revealing reescribe la transición completa para
 * conservar fondo/borde a su duración de la Pieza 1 durante la ventana.
 * ============================================================ */

.gtt-header.is-intro {
	transform: translateY(-100%);
}

.gtt-header.is-revealing {
	transition:
		background-color var(--transition-skin) var(--transition-easing),
		border-color var(--transition-skin) var(--transition-easing),
		transform var(--transition-intro-reveal) var(--transition-easing);
}

/* ============================================================
 * AUTO-OCULTACIÓN SOBRE LA BANDA
 *
 * Sobre la banda (piel transparente) el header solo se ve en el top:
 * al bajar se desliza fuera y reaparece —ya sólido— al cruzar el
 * sentinel hacia el contenido, donde queda fijo. El umbral es el propio
 * sentinel (borde inferior de cada banda), no una altura fija; lo
 * gobierna el cerebro de header.js añadiendo/quitando .is-hidden.
 * El transform anima a --transition-intro-base (200ms) por la base.
 * ============================================================ */
.gtt-header.is-hidden {
	transform: translateY(-100%);
}

/* Con el menú abierto el header está siempre presente (defensivo: el
 * scroll-lock ya deja scrollY en 0, pero esto blinda cualquier carrera). */
.gtt-header.is-menu-open {
	transform: none;
}

/* ============================================================
 * LOCKUP · recoloreado por piel
 *
 * Las tres regiones del SVG oficial se direccionan sin editar el
 * archivo canónico: el cuadrado por elemento (rect) y la palabra /
 * el símbolo por su clase interna (path.st0 / path.st1). Los rellenos
 * vienen de las custom properties de piel; la geometría queda intacta.
 *
 * Especificidad: estas reglas son (0,2,2) y ganan al <style> interno
 * del SVG, que define .st0/.st1 con especificidad (0,1,0).
 * ============================================================ */

.gtt-header__lockup svg rect {
	fill: var(--lockup-square-fill);
	transition: fill var(--transition-logo) var(--transition-easing);
}

.gtt-header__lockup svg path.st0 {
	fill: var(--lockup-word-fill);
	transition: fill var(--transition-logo) var(--transition-easing);
}

.gtt-header__lockup svg path.st1 {
	fill: var(--lockup-symbol-fill);
	transition: fill var(--transition-logo) var(--transition-easing);
}

/* ============================================================
 * SKIP-LINK
 * ============================================================ */

.gtt-skip-link {
	position: absolute;
	top: var(--skip-offset);
	left: var(--skip-offset);
	z-index: var(--z-skip);
	transform: translateY(-150%);
	transition: transform var(--transition-hover) var(--transition-easing);
	background: var(--gtt-color-papel-100);
	color: var(--gtt-color-tinta-500);
	padding: var(--skip-padding-y) var(--skip-padding-x);
	font-family: var(--gtt-font-sans);
	font-weight: 500;
	font-size: var(--skip-font-size);
	text-decoration: none;
	border: 1px solid var(--gtt-color-grafito-200);
	border-radius: var(--skip-radius);
}

.gtt-skip-link:focus {
	transform: translateY(0);
	outline: 2px solid var(--gtt-color-tinta-500);
	outline-offset: 2px;
}

/* ============================================================
 * BARRA SUPERIOR · lockup + toggle
 * ============================================================ */

.gtt-header__bar {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: var(--header-height-mobile);
	padding-left: var(--header-padding-x-mobile);
	padding-right: var(--header-padding-x-mobile);
}

@media (min-width: 768px) {
	.gtt-header__bar {
		padding-left: var(--header-padding-x-tablet);
		padding-right: var(--header-padding-x-tablet);
	}
}

@media (min-width: 1024px) {
	.gtt-header__bar {
		height: var(--header-height-desktop);
		padding-left: var(--header-padding-x-desktop);
		padding-right: var(--header-padding-x-desktop);
	}
}

/* Lockup ------------------------------------------------------ */

.gtt-header__lockup {
	display: inline-block;
	width: var(--lockup-width-mobile);
	line-height: 0;
	text-decoration: none;
	background: transparent;
}

.gtt-header__lockup svg {
	width: 100%;
	height: auto;
	display: block;
}

@media (min-width: 1024px) {
	.gtt-header__lockup {
		width: var(--lockup-width-desktop);
	}
}

/* Toggle (hamburguesa <-> X) --------------------------------- */

.gtt-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--toggle-hit-area);
	height: var(--toggle-hit-area);
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	color: var(--header-fg);
	cursor: pointer;
	transition: color var(--transition-hover) var(--transition-easing);
}

.gtt-header__toggle:focus-visible {
	outline: 2px solid var(--gtt-color-tinta-500);
	outline-offset: 2px;
}

.gtt-header__toggle svg {
	width: var(--toggle-svg-size);
	height: auto;
	display: block;
	overflow: visible;
}

@media (hover: hover) and (pointer: fine) {
	.gtt-header__toggle:hover {
		color: var(--header-fg-hover);
	}
}

/* Líneas del toggle: morph hamburguesa → X ------------------- */

.gtt-toggle-line {
	transform-box: fill-box;
	transform-origin: center;
	transition:
		transform var(--transition-hover) var(--transition-easing),
		opacity var(--transition-hover) var(--transition-easing);
}

.gtt-header__toggle.is-open .gtt-toggle-line--top {
	transform: translateY(var(--toggle-morph-distance)) rotate(45deg);
}

.gtt-header__toggle.is-open .gtt-toggle-line--middle {
	opacity: 0;
}

.gtt-header__toggle.is-open .gtt-toggle-line--bottom {
	transform: translateY(calc(var(--toggle-morph-distance) * -1)) rotate(-45deg);
}

/* ============================================================
 * OVERLAY · menú principal
 * ============================================================ */

.gtt-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 1;
	background: var(--gtt-color-papel-200);
	color: var(--gtt-color-grafito-900);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--transition-overlay-out) var(--transition-easing),
		visibility 0s linear var(--transition-overlay-out);
}

.gtt-menu-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity var(--transition-overlay-in) var(--transition-easing),
		visibility 0s linear 0s;
}

.gtt-menu-overlay__inner {
	height: 100%;
	overflow-y: auto;
	padding-top: var(--overlay-padding-top);
	padding-bottom: var(--overlay-padding-bottom-mobile);
	padding-left: var(--header-padding-x-mobile);
	padding-right: var(--header-padding-x-mobile);
}

@media (min-width: 768px) {
	.gtt-menu-overlay__inner {
		padding-left: var(--header-padding-x-tablet);
		padding-right: var(--header-padding-x-tablet);
	}
}

@media (min-width: 1024px) {
	.gtt-menu-overlay__inner {
		padding-bottom: var(--overlay-padding-bottom-desktop);
		padding-left: var(--header-padding-x-desktop);
		padding-right: var(--header-padding-x-desktop);
		max-width: calc(var(--overlay-column-max-width) + 2 * var(--header-padding-x-desktop));
	}
}

/* Listas del overlay ---------------------------------------- */

.gtt-menu-overlay__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.gtt-menu-overlay__item + .gtt-menu-overlay__item {
	margin-top: 0;
}

.gtt-menu-overlay__link {
	display: flex;
	align-items: baseline;
	gap: 0;
	color: inherit;
	text-decoration: none;
	padding-top: 4px;
	padding-bottom: 4px;
}

.gtt-menu-overlay__numeral {
	width: var(--menu-numeral-column-width);
	flex-shrink: 0;
	font-family: var(--gtt-font-mono);
	font-weight: 400;
	font-size: var(--menu-numeral-size);
	text-transform: uppercase;
	letter-spacing: var(--menu-numeral-tracking);
	color: var(--gtt-color-grafito-500);
	line-height: 1;
}

.gtt-menu-overlay__label {
	font-family: var(--gtt-font-sans);
	font-weight: 500;
	font-size: var(--menu-label-size-mobile);
	line-height: var(--menu-label-line-height);
	color: var(--gtt-color-grafito-900);
	transition: color var(--transition-hover) var(--transition-easing);
}

@media (min-width: 1024px) {
	.gtt-menu-overlay__label {
		font-size: var(--menu-label-size-desktop);
	}
}

@media (hover: hover) and (pointer: fine) {
	.gtt-menu-overlay__link:hover .gtt-menu-overlay__label {
		color: var(--gtt-color-tinta-500);
	}
}

/* Rule entre lista primaria y secundaria -------------------- */

.gtt-menu-overlay__rule {
	border: 0;
	height: 1px;
	background: var(--gtt-color-grafito-200);
	margin-top: var(--menu-rule-margin-y);
	margin-bottom: var(--menu-rule-margin-y);
	margin-left: var(--menu-numeral-column-width);
	margin-right: 0;
	max-width: var(--overlay-column-max-width);
}

/* CTA inferior ---------------------------------------------- */

.gtt-menu-overlay__cta {
	margin-top: var(--cta-margin-top-mobile);
	padding-left: var(--menu-numeral-column-width);
}

@media (min-width: 1024px) {
	.gtt-menu-overlay__cta {
		margin-top: var(--cta-margin-top-desktop);
	}
}

.gtt-menu-overlay__kicker {
	font-family: var(--gtt-font-mono);
	font-weight: 500;
	font-size: var(--cta-kicker-size);
	text-transform: uppercase;
	letter-spacing: var(--cta-kicker-tracking);
	color: var(--gtt-color-grafito-500);
	margin: 0 0 var(--cta-kicker-margin-bottom) 0;
}

.gtt-menu-overlay__cta-link {
	display: inline-block;
	font-family: var(--gtt-font-sans);
	font-weight: 500;
	font-size: var(--cta-link-size-mobile);
	color: var(--gtt-color-tinta-500);
	text-decoration: none;
	transition: color var(--transition-hover) var(--transition-easing);
}

@media (min-width: 1024px) {
	.gtt-menu-overlay__cta-link {
		font-size: var(--cta-link-size-desktop);
	}
}

.gtt-menu-overlay__cta-arrow {
	display: inline-block;
	transition: transform var(--transition-hover) var(--transition-easing);
}

@media (hover: hover) and (pointer: fine) {
	.gtt-menu-overlay__cta-link:hover {
		color: var(--gtt-color-tinta-700);
	}

	.gtt-menu-overlay__cta-link:hover .gtt-menu-overlay__cta-arrow {
		transform: translateX(var(--cta-arrow-translate));
	}
}

/* ============================================================
 * prefers-reduced-motion · accesibilidad sobre estética
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.gtt-header,
	.gtt-header *,
	.gtt-menu-overlay,
	.gtt-menu-overlay * {
		transition: none !important;
	}
}