/* Nuestro estudio — maqueta del export (1920x1080), medida con detección de
   bordes y pasada a vw para que el conjunto escale en bloque.

   Del export salen: intro en x=62 / y=145 con 732px de ancho e interlineado 16;
   tres columnas en x=279, 735 y 1190 —paso de 456, ancho de 382— con el título
   en y=420 y el primer párrafo en y=452; lista de ciudades en y=629; y la tira
   del equipo pegada a la derecha, fotos de 67x94 con paso vertical de 128 y
   apenas 20px hasta el borde.

   Los dos cuerpos de texto tienen tamaños distintos, los dos medidos contra el
   ancho real de sus líneas: la intro en 15px (como la de Objetos) y las
   columnas en 11.8px. El 11.8 no es un capricho: es el tamaño con el que las
   líneas de las columnas cortan donde cortan en el export. */

.xfb-estudio {
	position: relative;
	--xfb-estudio-col: 19.9vw;    /* 382px */
	--xfb-estudio-gap: 3.85vw;    /* 74px  */
	/* El Figma da fichas de 67x94 con rótulos de 8px, y a ese cuerpo los nombres
	   no se leen —el propio Figma usa "Nombre y Apellido" de placeholder, que es
	   corto—. Los rótulos van entonces al mismo tamaño que en Objetos (9.6 el
	   cargo, 10.3 el nombre) y la ficha crece hasta el ancho que necesita el
	   nombre más largo, "Ximena Fontán Balestra" (118px). El alto acompaña con
	   la proporción original. Si entra alguien con un nombre más largo, hay que
	   volver a medir. */
	/* Los rótulos no escalan con el ancho de la pantalla, así que la ficha
	   tampoco puede: es el nombre más largo el que fija el piso.

	   118px era ese ancho medido al milímetro —"Ximena Fontán Balestra" mide
	   117.8 en Inter 600 a 10.3px—, y por eso los nombres se veían cortados
	   (feedback del 04/09): 0.2px no es un margen, y en cuanto Inter no llega a
	   tiempo y entra la Helvetica de fallback, que es más ancha, el nombre se
	   sale de la ficha. 124px deja un 5% de aire real. Si entra alguien con un
	   nombre más largo, hay que volver a medir. */
	--xfb-equipo-w: max(6.15vw, 124px);
	--xfb-equipo-h: calc(var(--xfb-equipo-w) * 94 / 67);
	--xfb-equipo-gap: max(1.15vw, 16px);   /* el aire entre columnas */
	/* Lo que ocupa una ficha entera: foto, cargo, nombre y el aire de abajo. */
	--xfb-equipo-row: calc(var(--xfb-equipo-h) + 36px);

	/* Una sola columna con TRES fichas: Ximena, Paula y Juana (09/09).
	   El 04/09 se había pedido "más caritas" y la tira pasó a dos columnas, que
	   era la única forma de mostrar más de tres sin achicar la ficha por debajo
	   del ancho que necesitan los nombres. El 09/09 se cerró para el otro lado:
	   tres, en una columna. Volver a dos es cambiar este número. */
	--xfb-equipo-cols: 1;
	--xfb-equipo-strip: calc(
		var(--xfb-equipo-cols) * var(--xfb-equipo-w) +
		(var(--xfb-equipo-cols) - 1) * var(--xfb-equipo-gap)
	);

	/* Sangría de las tres columnas de texto: x=279 sobre 1920 (14.53vw).
	   Esa sangría es lo que CEDE cuando la tira de dos columnas no entra, en vez
	   de que se pisen. El tope sale de despejar el ancho:

	       sangría + 67.4vw (las tres columnas) + 1.04vw (gap) + tira
	         <= 100vw - 1.04vw (el aire de la derecha)

	   o sea `30.52vw - tira`. A 1920 da 312 > 279: la maqueta del Figma queda
	   intacta. A 1440 la sangría baja a 175 —el bloque de texto se corre 34px a
	   la izquierda— y a 1100 se apoya en la sangría de la intro, que es el piso. */
	--xfb-estudio-indent: max(3.23vw, min(14.53vw, calc(30.52vw - var(--xfb-equipo-strip))));

	display: flex;
	align-items: flex-start;
	gap: 1.04vw;
	/* El pie va chico: la página se queda en 100vh. */
	padding: 0 1.04vw 16px var(--xfb-margin);
}

.xfb-estudio__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* Intro ----------------------------------------------------------------- */

.xfb-estudio__intro {
	box-sizing: border-box;
	/* y=145, con el mismo piso de header que Objetos. */
	padding-top: max(calc(var(--xfb-header-height) + 1.5rem), min(7.55vw, 13.5vh));
	/* La intro no arranca en el margen de página: va sangrada, como en el
	   export (x=62 contra los 31 del logo). */
	margin-left: calc(3.23vw - var(--xfb-margin));
	/* "Poner todo el texto en el tamaño más chico" (09/09): la intro venía en
	   15px y las columnas en 11.8; ahora las dos van en 11.8.

	   El ancho se achica en la misma proporción (732 * 11.8/15) para que el
	   corte de renglones sea el mismo que en el export: lo que decide dónde
	   corta una línea es la relación entre el ancho y el cuerpo, así que
	   escalando los dos por el mismo factor el quiebre no se mueve. */
	max-width: 575.8px;
	font-size: 11.8px;
	line-height: 16px;
	letter-spacing: 0;
}

.xfb-estudio__intro p {
	margin: 0;
}

/* Columnas -------------------------------------------------------------- */

.xfb-estudio__cols {
	display: flex;
	/* El paso de 456px del export sale de la suma de columna y gap. */
	gap: var(--xfb-estudio-gap);
	/* La primera columna arranca en x=279 y la intro en x=62: la diferencia es
	   sangría, no margen de página. En pantallas donde la tira del equipo no
	   entra, esta sangría es la que cede (ver `--xfb-estudio-indent`). */
	margin-left: calc(var(--xfb-estudio-indent) - var(--xfb-margin));
	/* El título cae en y=420 a 1920x1080; en una pantalla más baja el aire cede
	   para que el texto entre en 100vh (pedido de Matías del 02/09). */
	padding-top: min(11.82vw, 21vh);
	font-size: 11.8px;
	line-height: 16px;
}

.xfb-estudio__col {
	flex: 0 0 var(--xfb-estudio-col);
	max-width: var(--xfb-estudio-col);
}

.xfb-estudio__col p {
	margin: 0;
}

/* Entre el título y el primer párrafo, y entre párrafos, va siempre el mismo
   aire: una línea vacía (32px de línea base a línea base). */
.xfb-estudio__col p + p {
	margin-top: 16px;
}

/* La lista de ciudades: el editor la trae como <ul>, y va sin viñetas y bien
   separada del párrafo de arriba (y=629 en el export). */
.xfb-estudio__col ul {
	margin: min(5.89vw, 10.46vh) 0 0;   /* la lista arranca en y=629 */
	padding: 0;
	list-style: none;
}

/* Equipo ---------------------------------------------------------------- */

/* La tira arranca colapsada —seis integrantes, una columna— y el `[Ver más]` la
   expande a tres columnas con todo el equipo, como en Cereal Magazine, la
   referencia que pasó Valentina en la reunión del 12/08 ("cuando le das view
   more, se agranda"). Al expandirse crece hacia la IZQUIERDA: la columna queda
   anclada al borde derecho y el texto le cede el lugar. */
.xfb-equipo {
	box-sizing: border-box;
	flex: 0 0 var(--xfb-equipo-strip);
	width: var(--xfb-equipo-strip);
	padding-top: 4.38vw;   /* la primera foto arranca en y=84 */
}


/* Expandida, la tira deja de empujar el texto y pasa a ser un panel apoyado
   contra el borde derecho, con el fondo del sitio y una línea que lo separa —el
   panel de Cereal—. Así el texto de las columnas no se reacomoda al abrir.

   El panel ocupa **la mitad de la página**, no todo el ancho (feedback del
   04/09). Antes iba con `width: max-content`, que es lo que producía los otros
   dos defectos que marcaron: el grid abría tantas columnas como necesitara y en
   una pantalla de 700px de alto el panel medía 1631px sobre 1440 de viewport,
   se salía por la izquierda —`left: -191`— y las fotos terminaban encima del
   logo, con la primera columna de nombres cortada fuera de pantalla.

   Con un ancho acotado y anclado a la derecha el borde izquierdo no puede
   llegar nunca al logo, y el desborde ya no se resuelve ensanchando el panel
   sino con scroll propio. */
.xfb-equipo.is-open {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	width: 50vw;
	height: 100vh;
	/* Arranca por debajo del header: el panel es opaco, pero las fotos no tienen
	   por qué compartir la franja del logo y del menú. El aire de la derecha es
	   el mismo que deja la tira colapsada: 20px. */
	padding: max(4.38vw, calc(var(--xfb-header-height) + 1rem)) 1.04vw 0 var(--xfb-equipo-gap);
	background: var(--xfb-canvas);
	border-left: 1px solid var(--xfb-rule);
}

/* Estado colapsado. Va en el selector simple —y no en un `:not(.is-open)`—
   porque los media queries de abajo lo pisan con selectores de una sola clase:
   con la especificidad extra la grilla de mobile no ganaba. El estado abierto
   se distingue con `.xfb-equipo.is-open .xfb-equipo__list`, que sí gana. */
.xfb-equipo__list {
	display: grid;
	grid-template-columns: repeat(var(--xfb-equipo-cols), var(--xfb-equipo-w));
	/* El paso de 128px del export sale de la foto (94), los dos rótulos (29) y
	   este aire. Mientras no estén cargados los cargos hay una línea menos y la
	   tira queda un poco más apretada. */
	grid-auto-rows: var(--xfb-equipo-row);
	gap: 5px var(--xfb-equipo-gap);
	justify-content: end;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Dentro del panel las fichas se acomodan en tantas columnas como entren en la
   mitad de pantalla —a 1440 son cinco— y bajan en filas. Lo que desborda ya no
   ensancha el panel: lo scrollea la propia lista, con el `[Cerrar]` fijo abajo
   para que no se vaya de vista.

   Es el punto que cede del "todo en 100vh": con el ancho acotado a la mitad no
   hay manera de meter 23 fichas de 124px sin achicarlas por debajo del ancho
   que necesitan los nombres. La página sigue sin scrollear; scrollea el panel. */
.xfb-equipo.is-open .xfb-equipo__list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	grid-auto-flow: row;
	grid-template-columns: repeat(auto-fill, var(--xfb-equipo-w));
	grid-auto-rows: var(--xfb-equipo-row);
	gap: 5px var(--xfb-equipo-gap);
	justify-content: end;
	align-content: start;
}

.xfb-equipo.is-open .xfb-equipo__toggle {
	flex: 0 0 auto;
	padding-bottom: 1.25rem;
}

/* Colapsada, sólo se ven las primeras seis. */
.xfb-equipo__item.is-extra {
	display: none;
}

.xfb-equipo.is-open .xfb-equipo__item.is-extra {
	display: block;
}

/* El `[Ver más]` / `[Cerrar]`, con el mismo lenguaje que el resto de los
   rótulos: Inter, tinta plena, y el hover subraya. */
.xfb-equipo__toggle {
	display: block;
	margin-top: 0.75rem;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--xfb-font-label);
	font-size: 10.3px;
	font-weight: 400;
	line-height: 13px;
	letter-spacing: 0;
	color: var(--xfb-ink);
	text-align: left;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.28em;
	cursor: pointer;
	transition: text-decoration-color 160ms ease;
}

.xfb-equipo__toggle:hover,
.xfb-equipo__toggle:focus,
.xfb-equipo__toggle:active,
.xfb-equipo__toggle:focus-visible {
	background: none;
	color: var(--xfb-ink);
	box-shadow: none;
	outline: none;
	text-decoration-color: currentColor;
}

.xfb-equipo__shot {
	display: block;
	aspect-ratio: 67 / 94;
	overflow: hidden;
}

/* El nombre nunca se parte: para eso se agrandó la ficha. */
.xfb-equipo__name {
	white-space: nowrap;
}

.xfb-equipo__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Blanco y negro en el preview chico, color al pasar por encima: la
	   decisión del grupo XFB/WEB del 21/08. */
	filter: grayscale(1);
	transition: filter 320ms ease;
}

.xfb-equipo__item:hover .xfb-equipo__shot img,
.xfb-equipo__item:focus-within .xfb-equipo__shot img {
	filter: grayscale(0);
}

/* Cada integrante es un botón: la foto se abre en grande. Kadence pinta sus
   botones, así que van declarados el color y todos los estados. */
.xfb-equipo__open {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--xfb-ink);
	text-align: left;
	cursor: pointer;
}

.xfb-equipo__open:hover,
.xfb-equipo__open:focus,
.xfb-equipo__open:active,
.xfb-equipo__open:focus-visible {
	background: none;
	color: var(--xfb-ink);
	box-shadow: none;
	outline: none;
}

.xfb-equipo__open:hover .xfb-equipo__shot img,
.xfb-equipo__open:focus-visible .xfb-equipo__shot img {
	filter: grayscale(0);
}

/* Los dos rótulos, con el mismo lenguaje que Objetos: Inter, el cargo en 400 y
   el nombre en 600, sin gris — los distingue el peso. */
.xfb-equipo__role,
.xfb-equipo__name {
	display: block;
	font-family: var(--xfb-font-label);
	line-height: 13px;
	letter-spacing: 0;
	color: var(--xfb-ink);
}

.xfb-equipo__role {
	margin-top: 5px;
	font-size: 9.6px;
	font-weight: 400;
}

.xfb-equipo__name {
	font-size: 10.3px;
	font-weight: 600;
}

/* Visor ----------------------------------------------------------------- */

/* Mismo lenguaje que los pop-ups de Objetos, Collabs y la home: velo blanco al
   86%, por debajo del header, la X sobre el borde superior derecho de la foto y
   los rótulos abajo. En el export `Opción 4` la foto se ve en color y el pie va
   en dos líneas: "Cargo y profesión," arriba y el nombre abajo. */
.xfb-estudio.is-viewing .xfb-estudio__body,
.xfb-estudio.is-viewing .xfb-equipo__list {
	opacity: 0.15;
}

.xfb-equipo-viewer {
	position: fixed;
	inset: 0;
	z-index: 15;
	display: grid;
	place-items: center;
	padding: clamp(2.5rem, 5vh, 4rem) var(--xfb-margin);
	background: rgba(255, 255, 255, 0.86);
}

.xfb-equipo-viewer[hidden] {
	display: none;
}

.xfb-equipo-viewer__stage {
	display: inline-flex;
	flex-direction: column;
	max-width: 100%;
	max-height: 100%;
}

.xfb-equipo-viewer__figure {
	display: flex;
	justify-content: center;
	margin: 0;
	min-height: 0;
}

.xfb-equipo-viewer__figure img {
	max-width: min(24vw, 460px);
	max-height: 70vh;
	width: auto;
	height: auto;
	object-fit: contain;
	/* Acá sí, en color: es el punto de la decisión del 21/08. */
	filter: none;
}

.xfb-equipo-viewer__close {
	align-self: flex-end;
	margin-bottom: 0.6rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.78rem;
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--xfb-header-ink);
	opacity: 0.85;
	cursor: pointer;
	user-select: none;
	transition: opacity 160ms ease;
}

.xfb-equipo-viewer__close:hover,
.xfb-equipo-viewer__close:focus,
.xfb-equipo-viewer__close:active {
	background: none;
	color: var(--xfb-header-ink);
	opacity: 1;
}

/* El pie va en dos líneas alineadas a la izquierda de la foto, no repartidas a
   los costados como en Objetos: así está en el export. */
.xfb-equipo-viewer__meta {
	display: grid;
	gap: 2px;
	margin-top: 0.6rem;
	font-family: var(--xfb-font-label);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	color: #000;
}

.xfb-equipo-viewer__role:empty {
	display: none;
}

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

@media (max-width: 1100px) {
	.xfb-estudio {
		display: block;
		padding: 0 var(--xfb-margin) 4rem;
	}

	.xfb-estudio__intro {
		max-width: none;
		font-size: 1rem;
		line-height: 1.35;
	}

	.xfb-estudio__cols {
		display: grid;
		grid-template-columns: 1fr;
		gap: 2.5rem;
		margin-left: 0;
		padding-top: 3rem;
		font-size: 0.9rem;
		line-height: 1.45;
	}

	.xfb-estudio__col {
		flex: none;
		max-width: none;
	}

	.xfb-estudio__col p + p {
		margin-top: 1rem;
	}

	.xfb-estudio__col ul {
		margin-top: 1.5rem;
	}

	/* En mobile el equipo pasa a una grilla debajo del texto. */
	.xfb-equipo {
		width: auto;
		padding-top: 3.5rem;
	}

	/* Acá el equipo ya está desplegado, así que el panel de la derecha no
	   corre: si quedó `is-open` de un resize, vuelve a ser un bloque en flujo. */
	.xfb-equipo.is-open {
		position: static;
		display: block;
		width: auto;
		height: auto;
		padding: 3.5rem 0 0;
		background: none;
		border-left: 0;
	}

	.xfb-equipo__list,
	.xfb-equipo.is-open .xfb-equipo__list {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: auto;
		gap: 1.5rem 1.25rem;
		justify-content: stretch;
		overflow: visible;
	}

	/* En mobile ya es una grilla y entra todo: no hace falta expandir nada. */
	.xfb-equipo__item.is-extra {
		display: block;
	}

	.xfb-equipo__toggle {
		display: none;
	}

	.xfb-equipo__role {
		font-size: 0.7rem;
		line-height: 1.2;
	}

	.xfb-equipo__name {
		font-size: 0.78rem;
		line-height: 1.2;
	}

	/* Sin hover en la mano: las fotos van en color. */
	.xfb-equipo__shot img {
		filter: none;
	}

	.xfb-equipo-viewer__figure img {
		max-width: 82vw;
	}
}

/* Mobile — frame ESTUDIO de la página XFB MOBILE.

   Todo en una sola columna de margen a margen, y el equipo deja de ser la tira
   colapsable del desktop: es la misma grilla de tres columnas de Arquitectura
   y Objetos, desplegada, con la relación gap/ficha de 0.1627.

   Del frame: intro en y=77.3, los tres bloques con paso de 72 (114.7, 186.7,
   258.7), las ciudades en y=303.7 y la grilla del equipo en y=346. */
@media (max-width: 700px) {
	.xfb-estudio {
		--xfb-equipo-w: calc((100vw - 2 * var(--xfb-margin)) / 3.3254);
		--xfb-equipo-h: calc(var(--xfb-equipo-w) * 94 / 67);
		--xfb-equipo-gap: calc(var(--xfb-equipo-w) * 0.1627);

		padding: 0 var(--xfb-margin) 13.4vw;
	}

	.xfb-estudio__intro {
		padding-top: 21.47vw;
		margin-left: 0;
		font-size: 13px;
		line-height: 16px;
	}

	/* El primer bloque cae en y=114.7, o sea 17.7 abajo de la intro. */
	.xfb-estudio__cols {
		margin-left: 0;
		padding-top: 4.92vw;
		gap: 16px;
		font-size: 13px;
		line-height: 16px;
	}

	/* Las ciudades van corridas, una al lado de la otra: en una columna de 360
	   una por renglón come media pantalla. */
	.xfb-estudio__col ul {
		margin-top: 16px;
	}

	/* `inline-block` y no `inline`: cada ciudad tiene que envolver entera, sin
	   que el renglón corte entre el nombre y el país. */
	.xfb-estudio__col ul li {
		display: inline-block;
		margin-right: 0.4em;
		white-space: nowrap;
	}

	/* La grilla del equipo arranca en y=346. */
	.xfb-equipo {
		width: auto;
		padding-top: 11.75vw;
	}

	/* El `is-open` del desktop no corre acá: la grilla ya está desplegada. */
	.xfb-equipo.is-open {
		position: static;
		display: block;
		width: auto;
		height: auto;
		padding: 11.75vw 0 0;
		background: none;
		border-left: 0;
	}

	.xfb-equipo__list,
	.xfb-equipo.is-open .xfb-equipo__list {
		display: grid;
		grid-auto-flow: row;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: none;
		grid-auto-rows: auto;
		height: auto;
		gap: var(--xfb-equipo-gap);
		justify-content: stretch;
		overflow: visible;
	}

	/* Con la ficha en 99px el nombre más largo no entra en una línea: en mobile
	   se le deja envolver, que es preferible a bajar el cuerpo. */
	.xfb-equipo__role {
		font-size: 10px;
		line-height: 1.2;
	}

	.xfb-equipo__name {
		white-space: normal;
		font-size: 11px;
		line-height: 1.2;
	}

	.xfb-equipo-viewer__figure img {
		max-width: 92vw;
	}
}