/* ---------------------------------------------------------------------------
   Film Lab Services — Lluís Gelabert
   Reproducción del sitio de Cargo. Escala tipográfica y colores tomados
   del original: 1rem = 10.368px a 1280px de ancho => 0.81vw.
--------------------------------------------------------------------------- */

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

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

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100svh;
	/* Tono oscuro mientras carga la primera foto: el texto es blanco. */
	background: #2b2724;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 400;
	overflow: hidden;
	/* Sin esto el texto blanco engorda sobre las fotos. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Nada de seleccionar texto: al mantener pulsado en el móvil salía el
	   menú de copiar y el texto en azul sobre la foto. El callout es la
	   lupa de iOS, que aparece aunque no se pueda seleccionar. */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* --- Estilos de texto del original ------------------------------------- */

.main-header {
	font-size: 10.35rem;
	font-weight: 400;
	line-height: 0.75;
	letter-spacing: -0.040em;
	color: rgba(255, 255, 255, 0.85);
	display: block;
	text-decoration: none;
}

.sub-header {
	font-size: 4.65rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.040em;
	color: rgba(255, 255, 255, 0.85);
	display: block;
}

.contact {
	font-size: 2.50rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.040em;
	color: rgba(255, 255, 255, 0.85);
	display: block;
}

.body-bold {
	font-size: 2.50rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.040em;
	color: rgba(255, 255, 255, 0.85);
	display: block;
}

.body-small {
	font-size: 1.45rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.040em;
	color: rgba(255, 255, 255, 0.85);
	display: block;
}

a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

a:active {
	opacity: 0.7;
}

/* --- Slideshow de fondo -------------------------------------------------- */

.slideshow {
	position: fixed;
	inset: 0;
	z-index: 0;
	/* Tono oscuro mientras carga la primera foto: el texto es blanco. */
	background: #2b2724;
}

.slideshow img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

.slideshow img.is-visible {
	opacity: 1;
}

/* --- Capas fijas de texto ------------------------------------------------ */

/* Por encima de los overlays: si no, el fondo del overlay tapa los enlaces
   del menú y se los come el clic de "cerrar". */
.layer {
	position: fixed;
	inset: 0;
	z-index: 30;
	display: flex;
	pointer-events: none;
}

.layer > * {
	pointer-events: auto;
}

.layer-header {
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 3rem;
	text-align: center;
}

.layer-bottom {
	align-items: flex-end;
	justify-content: center;
	padding: 3rem;
	text-align: center;
}

.layer-pricing,
.layer-contact {
	align-items: center;
	padding: 1rem;
}

.layer-pricing {
	justify-content: flex-start;
	padding-left: 3rem;
}

.layer-contact {
	justify-content: flex-end;
	padding-right: 3rem;
}

/* --- Overlays (precios / contacto) --------------------------------------- */

.overlay {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem;
	overflow-y: auto;
}

.overlay[hidden] {
	display: none;
}

.overlay-inner {
	width: fit-content;
	max-width: 100%;
	text-align: left;
}

.overlay-inner-centered {
	text-align: center;
}

/* Los precios ocupan la franja entre la cabecera y el pie. Si caben, van
   centrados en ella; si no, se desplazan dentro sin pisar ni una ni otro.
   El margin: auto centra sin dejar el principio fuera del scroll, que es lo
   que pasa con align-items: center cuando el contenido no cabe. */
@media (min-width: 769px) {
	#overlay-pricing {
		top: 17rem;
		bottom: 9.5rem;
		padding-top: 0;
		padding-bottom: 0;
		align-items: flex-start;
	}

	/* El ancho mínimo separa los importes de su concepto. */
	#overlay-pricing .overlay-inner {
		margin: auto 0;
		min-width: 44.5rem;
	}

	/* Todo al 85 % respecto al resto de la web, letra y separaciones, para
	   que la columna entera quepa en una pantalla panorámica. */
	#overlay-pricing .contact,
	#overlay-pricing .body-bold {
		font-size: 2.12rem;
	}

	#overlay-pricing .body-small {
		font-size: 1.25rem;
	}

	#overlay-pricing .gap-tight {
		margin-bottom: 1.05rem;
	}

	#overlay-pricing .gap-normal {
		margin-bottom: 2.55rem;
	}

	#overlay-pricing .gap-wide {
		margin-bottom: 4.45rem;
	}
}

/* Separación vertical. La elige build.py según las líneas en blanco que
   dejes en contenido.txt. */
.gap-tight {
	margin-bottom: 1.2rem;    /* misma sección */
}

.gap-normal {
	margin-bottom: 3rem;      /* un salto a 2.50rem */
}

.gap-wide {
	margin-bottom: 5.22rem;   /* tres saltos a 1.45rem */
}

/* El original separa concepto y precio con una tirada larga de  , que
   deja los importes alineados al borde derecho del bloque. */
.price-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 3rem;
}

.price-list > span:nth-child(even) {
	text-align: right;
}

/* Columnas de precios: las líneas --- de contenido.txt. En móvil se apilan. */
.price-columns {
	display: grid;
	grid-auto-flow: column;
	/* Anchas, para que los importes queden separados de su concepto. */
	grid-auto-columns: minmax(40rem, max-content);
	column-gap: 9rem;
	align-items: start;
}

.price-rows,
.price-column {
	display: block;
}

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

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

	/* Como en escritorio: título en una línea y subtítulo en otra. El tamaño
	   es el mayor que deja "Lluís Gelabert" entero entre los márgenes. */
	.main-header {
		font-size: 5.85rem;
		line-height: 0.95;
		white-space: nowrap;
	}

	.sub-header {
		font-size: 3.00rem;
	}

	.layer-header .sub-header {
		white-space: nowrap;
	}

	.layer-bottom .sub-header {
		font-size: 2.50rem;
	}

	.contact,
	.body-bold {
		font-size: 2.15rem;
	}

	/* Los dos enlaces del menú, algo mayores que el texto de los overlays. */
	.layer-pricing .contact,
	.layer-contact .contact {
		font-size: 2.60rem;
	}

	.body-small {
		font-size: 1.70rem;
	}

	.layer-header,
	.layer-bottom {
		padding: 2rem;
	}

	/* Solo aquí los enlaces suben: van justo debajo de la cabecera, en vez de
	   centrados a media pantalla como en escritorio. */
	.layer-pricing,
	.layer-contact {
		align-items: flex-start;
		padding-top: 12.5rem;
	}

	.layer-pricing {
		padding-left: 2rem;
	}

	.layer-contact {
		padding-right: 2rem;
	}

	.gap-wide {
		margin-bottom: 3rem;
	}

	.price-columns {
		display: block;
	}

	.price-column:not(:last-child) {
		margin-bottom: 3rem;
	}

	/* Cabecera, menú y pie no se mueven nunca. El overlay arranca por debajo
	   del menú y termina por encima del pie. */
	.overlay {
		padding: 2rem;
		align-items: flex-start;
		padding-top: 17.5rem;
		padding-bottom: 11rem;
	}

	/* Los datos de contacto son dos líneas: van centrados en la pantalla. */
	#overlay-contact {
		align-items: center;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	/* A todo el ancho, con los importes pegados al borde derecho. */
	#overlay-pricing .overlay-inner {
		width: 100%;
		padding-top: 0;
	}
}