/* ---------------------------------------------------------------------------
   Lluís Gelabert
   Misma escala que Film Lab Services: 1rem = 0.81vw en escritorio.
--------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 0.81vw;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: #fff;
	color: rgba(0, 0, 0, 0.85);
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 400;
	letter-spacing: -0.040em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Nada de seleccionar: al pulsar varias veces seguidas la foto, el texto
	   y la propia foto se quedaban en azul. El callout es la lupa de iOS. */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

a {
	color: inherit;
	text-decoration: none;
}

a:active {
	opacity: 0.7;
}

img,
video {
	display: block;
	width: 100%;
	height: auto;
}

/* Las fotos esperan transparentes a estar descargadas enteras y entonces
   aparecen con un fundido corto; si no, se las ve llegar borrosas. Solo con
   JavaScript (clase «js» en <html>): sin él se verían siempre. */
.js .portada img,
.js .pagina img,
.js .miniaturas img {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.js .portada img.cargada,
.js .pagina img.cargada,
.js .miniaturas img.cargada {
	opacity: 1;
}

/* --- Columna izquierda: nombre y menú ------------------------------------ */

.lateral {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20;
	width: 22rem;
	padding: 5rem 0 0 5rem;
}

/* Nombre contenido, poco mayor que el menú, con el menú pegado debajo. */
.nombre {
	display: block;
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 0.75;
	letter-spacing: -0.020em;
	white-space: nowrap;
}

.menu {
	/* El tamaño de la letra pequeña de Film Lab Services. */
	margin-top: 0.6rem;
	font-size: 1.45rem;
	line-height: 1.5;
	letter-spacing: 0.010em;
}

.menu a,
.menu summary {
	display: block;
}

.menu summary {
	list-style: none;
	cursor: pointer;
}

.menu summary::-webkit-details-marker {
	display: none;
}

.menu details a {
	margin-left: 0.8em;
}

/* La página en la que estás queda en gris; al pasar el ratón, una negrita
   muy fina. Solo con ratón: en táctil el hover se queda pegado tras tocar. */
/* El símbolo de Instagram, del alto de una línea del menú. */
.menu .icono {
	padding-top: 0.5rem;
}

.menu .icono svg {
	display: block;
	width: 1.7rem;
	height: 1.7rem;
}

@media (hover: hover) {
	.menu .icono:hover svg {
		stroke-width: 2.1;
	}
}

.menu a.activa {
	color: rgba(0, 0, 0, 0.4);
}

@media (hover: hover) {
	.menu a:hover,
	.menu summary:hover,
	.pie:hover,
	.indice a:hover {
		font-weight: 500;
	}
}

/* --- Portada: una foto grande -------------------------------------------- */

.es-portada {
	overflow: hidden;
}

.portada {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Centro óptico, no geométrico: con todo el texto a la izquierda, una
	   foto en el centro exacto de la ventana parece caída hacia ese lado.
	   Se desplaza 3rem a la derecha (27 − 21 = 6rem de diferencia de
	   márgenes) para compensar. */
	padding: 5rem 21rem 5rem 27rem;
	/* La flecha normal: ni mano ni flechas de izquierda y derecha. */
	cursor: default;
}

.portada img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

/* --- Miniaturas: todas las fotos de la portada en pequeño ----------------- */

.miniaturas {
	display: none;
	flex-wrap: wrap;
	/* Cada fila centrada, para que comparta eje con el resto de páginas. */
	justify-content: center;
	gap: 1.5rem;
	margin-left: 27rem;
	/* Mismo eje que la portada: 27rem a la izquierda y 21 a la derecha. */
	padding: 5rem 21rem 8rem 0;
}

.miniaturas img {
	width: auto;
	height: 11rem;
	cursor: pointer;
}

.ver-miniaturas {
	overflow: auto;
}

.ver-miniaturas .portada {
	display: none;
}

.ver-miniaturas .miniaturas {
	display: flex;
}

/* Abajo a la izquierda, en la columna del menú: todo el texto a un lado y
   la foto sola en el centro. */
.pie {
	position: fixed;
	left: 5rem;
	bottom: 5rem;
	z-index: 20;
	font-size: 1.45rem;
	line-height: 1.5;
}

/* --- Páginas de fotos ---------------------------------------------------- */

.pagina {
	margin-left: 27rem;
	/* Mismo eje que la portada: 27rem a la izquierda y 21 a la derecha. */
	padding: 5rem 21rem 8rem 0;
}

.fila {
	display: flex;
	gap: 1rem;
	margin: 0 auto 1rem;
}

.fila > div {
	min-width: 0;
}

.columnas {
	column-count: var(--columnas, 4);
	column-gap: 1rem;
}

.columnas img {
	margin-bottom: 1rem;
	break-inside: avoid;
}

.pagina img {
	cursor: zoom-in;
}

/* --- Info: foto de perfil y texto ----------------------------------------- */

/* La foto en el eje de todas las páginas y el texto debajo, centrado y sin
   pasar de su ancho. */
.pagina-info {
	display: grid;
	/* Las dos columnas de los lados son iguales: lo del medio queda en el
	   centro de la zona, pese lo que pese el texto. */
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: start;
	column-gap: 4rem;
	/* El mismo eje que la portada: 3rem a la derecha del centro. */
	margin-left: 0;
	padding-left: 27rem;
	padding-right: 21rem;
}

.info-foto {
	grid-column: 2;
	min-width: 0;
}

.info-texto {
	grid-column: 2;
	margin-top: 2.5rem;
	text-align: center;
	/* Así el texto no ensancha la columna: manda el ancho de la foto y las
	   líneas largas saltan. */
	width: 0;
	min-width: 100%;
}

/* Sin foto no hay ancho que seguir: el texto va centrado en el eje. */
.sin-foto .info-texto {
	grid-column: 1 / -1;
	justify-self: center;
	width: auto;
	min-width: 0;
	margin-top: 0;
}

.pagina-info img,
.pagina-info video {
	width: auto;
	max-width: 34vw;
	height: auto;
	/* --foto lo pone el panel: 1 es todo el alto disponible de la ventana. */
	max-height: calc((100vh - 10rem) * var(--foto, 1));
	cursor: default;
}

/* 1.8rem es el tamaño normal; el ajuste del panel lo cambia en la página. */
.info-texto {
	font-size: 1.8rem;
	line-height: 1.5;
	/* Aquí sí se puede seleccionar: es donde se copia el correo. */
	-webkit-user-select: text;
	user-select: text;
}

.info-texto p {
	margin: 0 0 1.5em;
}

/* --- Web aparte (el portfolio): sin menú, a todo el ancho ----------------- */

.cabecera-aparte {
	position: fixed;
	top: 3rem;
	left: 0;
	right: 0;
	z-index: 20;
	display: flex;
	justify-content: center;
	/* Va por encima de las fotos al hacer scroll, pero no estorba al pulsar. */
	pointer-events: none;
	font-size: 4rem;
}

.cabecera-aparte img {
	width: 54.5%;
	height: auto;
}

.pagina-aparte {
	margin-left: 0;
	padding: 13rem 3rem 8rem;
}

/* --- Diario -------------------------------------------------------------- */

/* Centrado sobre las fotos. Playfair Display no baja de 400; «Playfair», su
   versión nueva, tiene un peso 300 y un corte para tamaños grandes con los
   trazos finos mucho más delgados. */
.mes {
	margin: 0;
	padding: 6rem 0 3rem;
	font-family: "Playfair", "Playfair Display", Georgia, serif;
	font-optical-sizing: auto;
	font-size: 6rem;
	font-weight: 300;
	line-height: 0.8;
	letter-spacing: -0.040em;
	text-align: center;
}

/* El primer mes arranca a la altura de las fotos, sin aire encima. */
.pagina > .mes:first-child {
	padding-top: 0;
}

.ancla {
	display: block;
}

.ancla,
.mes {
	scroll-margin-top: 5rem;
}

.indice {
	position: fixed;
	top: 5rem;
	right: 5rem;
	z-index: 10;
	text-align: right;
	font-size: 1.45rem;
	line-height: 1.5;
}

.indice a {
	display: block;
}

/* Con ratón, el índice solo aparece al acercarse al lado derecho (lo marca
   app.js). En pantallas táctiles no hay ratón que acercar: se ve siempre. */
@media (hover: hover) {
	.indice {
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

	.ver-indice .indice,
	.indice:focus-within {
		opacity: 1;
		pointer-events: auto;
	}
}

/* --- Visor: la foto en grande -------------------------------------------- */

.visor {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem;
	background: #fff;
	cursor: zoom-out;
}

.visor[hidden] {
	display: none;
}

.visor img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

/* --- Móvil --------------------------------------------------------------- */

@media (max-width: 767px) {
	html {
		font-size: 2.6vw;
	}

	.lateral {
		position: static;
		width: auto;
		padding: 2rem 2rem 0;
		text-align: center;
	}

	.es-portada .lateral {
		position: fixed;
		left: 0;
		right: 0;
	}

	.nombre {
		font-size: 2.8rem;
	}

	.menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 1.6rem;
		padding-top: 0.6rem;
	}

	.menu details[open] {
		flex-basis: 100%;
	}

	.menu details a {
		display: inline-block;
		margin: 0 0.6em;
	}

	.menu .icono {
		align-self: center;
		padding-top: 0;
	}

	/* En móvil no caben lado a lado: la foto arriba y el texto debajo. */
	.pagina-info {
		display: block;
	}

	.info-foto {
		margin-bottom: 3rem;
	}

	.info-texto {
		width: auto;
		min-width: 0;
		margin-top: 0;
	}

	.info-foto {
		max-width: 100%;
	}

	.pagina-info img,
	.pagina-info video {
		max-width: 100%;
		max-height: none;
	}

	.portada {
		padding: 16rem 1.5rem 3rem;
	}

	.ver-miniaturas .lateral {
		position: static;
	}

	.miniaturas {
		justify-content: center;
		gap: 1rem;
		margin-left: 0;
		padding: 3rem 1.5rem 6rem;
	}

	.miniaturas img {
		height: 9rem;
	}

	/* En móvil no hay columna: va abajo a la derecha. */
	.pie {
		left: auto;
		right: 2rem;
		bottom: 2rem;
	}

	.pagina {
		margin-left: 0;
		padding: 3rem 1.5rem 6rem;
	}

	.cabecera-aparte {
		top: 2rem;
	}

	.cabecera-aparte img {
		width: 80%;
	}

	.pagina-aparte {
		padding-top: 12rem;
	}

	/* En móvil todas las filas van a todo el ancho. */
	.fila {
		width: 100% !important;
	}

	.columnas {
		column-count: 2;
	}

	.mes {
		font-size: 4rem;
	}

	.indice {
		display: none;
	}
}