/* Foundations: the palette, the type and the header.
   Sober and editorial — the work is the protagonist, the design accompanies. */

:root {
	--xfb-canvas: #f7f7f5;
	/* Una sola tinta en todo el sitio — la que pasó Matías, la del menú
	   principal (decisión del 02/09: antes el menú iba con esta y el resto
	   heredaba el #2D3748 de la paleta de Kadence). */
	--xfb-ink: #363531;
	--xfb-header-ink: var(--xfb-ink);
	--xfb-muted: rgba(54, 53, 49, 0.55);
	--xfb-rule: rgba(54, 53, 49, 0.12);

	--xfb-margin: clamp(1.75rem, 3vw, 3rem);
	/* El header respira a los costados, pero arriba se apoya alto. */
	--xfb-margin-top: clamp(0.9rem, 1.2vw, 1.25rem);
	--xfb-header-height: 4.5rem;

	--xfb-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
	/* Los rótulos que el Figma pide en Inter (hoy: código y nombre en Objetos). */
	--xfb-font-label: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html {
	background: var(--xfb-canvas);
}

/* `html body` y no `body` a secas: Kadence declara la familia y el color sobre
   `body` con la misma especificidad y, al cargar su CSS después del nuestro,
   ganaba por orden. El sitio entero venía renderizando en la pila de sistema
   (San Francisco) y con la tinta #2D3748 de su paleta, en vez de la Helvetica
   del Figma. Los elementos de formulario no heredan la fuente por defecto, así
   que se la pasamos a mano. */
html body,
html body button,
html body input,
html body select,
html body textarea {
	font-family: var(--xfb-font);
}

html body {
	margin: 0;
	background: var(--xfb-canvas);
	color: var(--xfb-ink);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
}

/* Ningún estado de ningún link o botón cambia de color en este sitio.
   Kadence los pinta de #215387 al pasar por encima y de blanco al enfocarlos, y
   lo hace desde selectores más específicos que cualquiera que se escriba acá:
   es el único caso donde el theme usa `!important`, y es a propósito. Lo que
   marca el hover es el subrayado, nunca el color. */
html body :is(a, button),
html body :is(a, button):is(:link, :visited, :hover, :focus, :active, :focus-visible) {
	color: inherit !important;
}

/* Un link dentro de un texto va subrayado siempre; al pasar por encima el
   subrayado engorda. Sin cambio de color, sin fondo. */
html body :is(main, .xfb-header) p a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness 140ms ease;
}

html body :is(main, .xfb-header) p a:hover,
html body :is(main, .xfb-header) p a:focus-visible {
	text-decoration-thickness: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Header --------------------------------------------------------------- */

/* Fijo y transparente: el collage pasa por debajo, sin barra que lo corte. */
.xfb-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	display: flex;
	align-items: flex-start;
	gap: clamp(1.5rem, 3vw, 3rem);
	padding: var(--xfb-margin-top) var(--xfb-margin) var(--xfb-margin);
	min-height: var(--xfb-header-height);
	background: transparent;
	color: var(--xfb-header-ink);
	pointer-events: none;
}

/* Solo lo que se clickea recibe el puntero; el resto deja pasar el hover
   a las fotos que corren por abajo. */
.xfb-header a,
.xfb-header button {
	pointer-events: auto;
}

/* Al bajar la página el header deja de ser transparente y se apoya sobre el
   fondo del sitio (pedido del 04/09, sobre Objetos). Con el header transparente
   el menú caía encima de una foto o de un texto y se perdía.

   Va como pseudo-elemento y no como `background` del header para que el fondo
   pueda aparecer con un fundido sin arrastrar al texto, y con `z-index: -1`
   para quedar por detrás del logo y del menú —el header ya crea su propio
   contexto de apilamiento con `z-index: 20`, así que el -1 no se escapa de
   ahí—. En la home nunca se enciende: el collage no scrollea. */
.xfb-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* La banda termina apenas debajo del wordmark, no al pie de la caja del
	   header: el `padding-bottom` de `--xfb-margin` dejaba 42px de blanco muerto
	   abajo del logo y se notaba (09/09). */
	bottom: calc(var(--xfb-margin) - 0.6rem);
	background: var(--xfb-canvas);
	opacity: 0;
	transition: opacity 200ms ease;
	pointer-events: none;
}

/* Sólo en Objetos: en el resto del sitio el header no se opaca nunca. */
.xfb-scroll-header .xfb-header.is-scrolled::before {
	opacity: 1;
}

/* En la home el header se apoya sobre el fondo mientras se recorre el campo
   hacia arriba, y vuelve a ser transparente al bajar: el criterio de Objetos
   al scrollear, pedido el 11/09. `collage.js` pone y saca la clase. */
.xfb-header.is-backed::before {
	opacity: 1;
}

/* Con el fondo encendido la barra deja de ser un vidrio: el `pointer-events:
   none` de arriba está pensado para que el hover pase a las fotos que corren
   por debajo del header transparente, pero una vez que el fondo las tapa el
   click tiene que quedarse acá. Si no, apretar la barra blanca abre el visor de
   la foto que quedó escondida atrás. En la home pasa lo mismo mientras el header
   está apoyado, recorriendo el campo hacia arriba. */
.xfb-scroll-header .xfb-header.is-scrolled,
.xfb-header.is-backed {
	pointer-events: auto;
}

.xfb-wordmark {
	flex: 0 0 auto;
	display: grid;
	gap: 0.15rem;
	text-decoration: none;
	color: inherit;
	line-height: 1.15;
}

.xfb-wordmark__name {
	display: grid;
	font-size: 0.8rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-align: right;
}

.xfb-wordmark__tag {
	position: relative;
	justify-self: end;
	padding-left: 1.6rem;
	font-size: 0.56rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.75;
}

.xfb-wordmark__tag::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1.2rem;
	height: 1px;
	background: currentColor;
}

.xfb-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(0.85rem, 1.4vw, 1.4rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Menú principal, medido en el Figma: Inter 400 · 11px · interlineado 100% ·
   sin tracking · #363531. Va en tinta plena —sin el 0.85 de opacidad que tenía—
   porque el Figma no lo atenúa y porque el hover, como en Objetos, sólo
   subraya. */
.xfb-nav a {
	font-family: var(--xfb-font-label);
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
	color: inherit;
}

/* Un ítem sin página todavía: se apreta, no pasa nada. */
.xfb-nav a[aria-disabled="true"] {
	cursor: pointer;
}

.xfb-nav a:hover,
.xfb-nav .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 0.28em;
}

.xfb-nav--end {
	margin-left: auto;
}

/* Mobile ---------------------------------------------------------------

   El mobile es otra maqueta, no el desktop apretado: sale de la página
   XFB MOBILE del Figma, frames de 1080x1920 (o sea un diseño base de
   360x640). Las medidas de geometría van en `vw` sobre esos 360
   —`x / 3.6 = vw`—, igual que en desktop se hizo sobre 1920. Los cuerpos
   de texto NO: Juli armó el mobile escalando el desktop y los tamaños se
   escalaron con él (Helvetica 6px, el menú en Inter 8.25px), ilegibles en
   la mano. Lo que se respeta del mock es la maqueta y la jerarquía; los
   tamaños son los reales. Todo en `docs/figma-mobile-medidas.md`.
   ---------------------------------------------------------------------- */

/* En el Figma el botón no es un ícono: es la palabra "Menu", que al abrir
   el panel pasa a ser una "X". */
.xfb-burger {
	display: none;
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--xfb-font-label);
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	color: var(--xfb-ink);
}

/* Kadence pinta cualquier <button> propio: gris azulado en reposo y blanco
   sobre fondo azul al enfocarlo. Hay que neutralizarlo estado por estado, como
   en el resto de los botones del theme. */
.xfb-burger:hover,
.xfb-burger:focus,
.xfb-burger:active,
.xfb-burger:focus-visible {
	background: none;
	box-shadow: none;
	outline: 0;
	color: var(--xfb-ink);
}

.xfb-burger:hover .xfb-burger__label,
.xfb-burger:focus-visible .xfb-burger__label {
	text-decoration: underline;
	text-underline-offset: 0.28em;
}

.xfb-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 19;
	display: grid;
	align-content: start;
	/* La primera línea del Figma cae en y=70.7 sobre 640. */
	padding: 19.64vw var(--xfb-margin) 0;
	background: var(--xfb-canvas);
	overflow-y: auto;
}

/* Cada grupo lleva su línea arriba y respira 8.3px (2.3vw) de los dos lados:
   línea en y=70.7 → grupo en y=79, grupo termina en y=99 → línea en y=107.3. */
.xfb-mobile-nav__list {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 2.3vw 0;
	/* La línea del Figma se lee, no se insinúa: el gris de `--xfb-rule` —pensado
	   para separadores de fondo— quedaba casi invisible en la mano. */
	border-top: 1px solid rgba(54, 53, 49, 0.4);
	text-align: right;
	/* El interlineado del menú es apretado, como en el Figma —1.2, que es la
	   relación del mock—: los ítems son una lista, no un texto corrido.

	   El `font-size` va acá y no sólo en el `<a>`: la caja de línea la arma el
	   `<li>`, que hereda los 16px del body, y el interlineado se resolvía contra
	   ese cuerpo y no contra los 12 del ítem. */
	font-size: 14px;
	line-height: 1.3;
}

.xfb-mobile-nav a {
	font-family: var(--xfb-font-label);
	font-size: 14px;
	line-height: inherit;
	text-decoration: none;
	color: inherit;
}

.xfb-mobile-nav a:hover,
.xfb-mobile-nav .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 0.28em;
}

@media (max-width: 700px) {
	:root {
		/* Márgenes iguales en todo el mobile (decisión del 21/08): 14px
		   sobre 360 en todas las páginas. */
		--xfb-margin: 3.89vw;
		--xfb-margin-top: 5.08vw;
		--xfb-header-height: 19.64vw;
	}

	.xfb-header {
		padding: var(--xfb-margin-top) var(--xfb-margin) 0;
		min-height: 0;
	}

	/* Acá el header no lleva padding abajo, así que el fondo terminaría justo en
	   la línea base del wordmark y el contenido pasaría pegado. El fondo se
	   estira un poco más abajo que la caja; el padding no se toca porque las
	   medidas del frame mobile cuelgan de él. */
	.xfb-header::before {
		bottom: -3vw;
	}

	/* El wordmark del Figma mide 63.9 de ancho sobre 360: 17.75%. */
	.xfb-wordmark {
		margin-left: -0.75vw;
	}

	.xfb-wordmark__name {
		font-size: 2.61vw;
		line-height: 1.03;
		letter-spacing: 0.22em;
	}

	.xfb-wordmark__tag {
		margin-top: 1.4vw;
		padding-left: 3.28vw;
		font-size: 1.83vw;
	}

	.xfb-wordmark__tag::before {
		width: 2.94vw;
	}

	.xfb-nav {
		display: none;
	}

	.xfb-burger {
		display: block;
	}
}

@media (min-width: 701px) {
	.xfb-mobile-nav {
		display: none !important;
	}
}

/* Footer ---------------------------------------------------------------- */

.xfb-footer {
	/* Deja lugar para la barra fija de obra anterior / siguiente. */
	padding: 9.84vw var(--xfb-margin) 7vw;
	text-align: center;
	font-size: clamp(0.7rem, 0.68vw, 0.85rem);
	color: var(--xfb-ink);
}

/* En el Figma mobile el © XFB va centrado a 26.3px de la última foto y a
   48.3px del fondo, sobre 640. */
@media (max-width: 700px) {
	.xfb-footer {
		padding: 7.3vw var(--xfb-margin) 13.4vw;
		font-family: var(--xfb-font-label);
		font-size: 10px;
	}
}