/*
 * SCALA — landing «sitio en construcción».
 * Registro oscuro del Manual de Identidad (ed. 2026): fondo carbón, tipografía y logotipo en blanco roto.
 * Satoshi para titulares y metadatos, Erode para texto. El logotipo va siempre en trazados, nunca compuesto con fuente.
 */

@font-face {
	font-family: 'Satoshi';
	src: url('../fonts/Satoshi-Variable.woff2') format('woff2');
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Erode';
	src: url('../fonts/Erode-Variable.woff2') format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Erode';
	src: url('../fonts/Erode-VariableItalic.woff2') format('woff2');
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Paleta (única): carbón + blanco roto */
	--carbon: #0f0f0f;
	--roto: #f2efe8;
	--roto-80: rgba(242, 239, 232, 0.8);
	--roto-62: rgba(242, 239, 232, 0.62);
	--roto-50: rgba(242, 239, 232, 0.5);

	/* Sustituciones del manual para entornos sin fuente corporativa: Arial y Georgia */
	--sans: 'Satoshi', Arial, sans-serif;
	--serif: 'Erode', Georgia, serif;

	--pad: clamp(1.5rem, 5vw, 4.5rem);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-io: cubic-bezier(0.7, 0, 0.2, 1);

	/* Momento (desde el inicio del acople) en que empieza a entrar el contenido */
	--t0: 0.75s;

	/* Cuánto monta el texto sobre la lámina en la composición vertical */
	--overlap: 4.5rem;
}

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

html {
	background: var(--carbon);
	color-scheme: dark;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100svh;
	background: var(--carbon);
	color: var(--roto);
	font: 400 1rem/1.5 var(--serif);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--roto);
	color: var(--carbon);
}

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

button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

:focus-visible {
	outline: 1px solid var(--roto);
	outline-offset: 0.35em;
}

.sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ───────── Retícula de página ───────── */

.frame {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto minmax(9rem, 1fr) auto auto;
	min-height: 100vh;
	min-height: 100svh;
}

.masthead {
	position: relative;
	z-index: 2;
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: calc(var(--pad) * 0.85) max(var(--pad), env(safe-area-inset-right)) 0 max(var(--pad), env(safe-area-inset-left));
}

/* Logotipo principal: nunca por debajo de 120 px de ancho (tamaño mínimo digital del manual) */
.brand {
	display: block;
	width: max(124px, clamp(7.75rem, 10vw, 9.75rem));
}
.brand svg {
	display: block;
	width: 100%;
	height: auto;
	fill: currentColor;
}

.lang {
	display: flex;
	align-items: center;
	gap: 0.15em;
	margin-right: -0.6em;
	font: 500 0.6875rem/1 var(--sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.lang button {
	padding: 0.9em 0.6em;
	opacity: 0.45;
	transition: opacity 0.3s;
}
.lang button:hover,
.lang button[aria-pressed='true'] {
	opacity: 1;
}
.lang span {
	opacity: 0.3;
}

/* ───────── Texto ───────── */

.statement {
	position: relative;
	z-index: 2;
	grid-column: 1;
	grid-row: 3;
	padding: 0 max(var(--pad), env(safe-area-inset-right)) 0 max(var(--pad), env(safe-area-inset-left));
	container-type: inline-size;
}
/* En vertical el texto monta sobre el pie de la lámina: este velo garantiza su lectura */
.statement::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: calc(var(--overlap) * -1) 0 0;
	background: linear-gradient(to bottom, rgba(15, 15, 15, 0) 0, rgba(15, 15, 15, 0.86) var(--overlap), var(--carbon) calc(var(--overlap) * 1.9));
	pointer-events: none;
}

/* Metadato en mayúsculas con tracking y filete inferior, como los títulos de sección del manual */
.eyebrow {
	position: relative;
	display: inline-block;
	margin: 0 0 clamp(1.5rem, 3.5vh, 2.25rem);
	padding-bottom: 0.9rem;
	font: 500 0.6875rem/1.2 var(--sans);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.eyebrow::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0.22em;
	bottom: 0;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
	transform-origin: 0 50%;
}

.title {
	margin: 0 0 clamp(1.25rem, 3vh, 2rem);
	max-width: 12em;
	font: 500 clamp(2.125rem, 1.3rem + 3.2vw, 4rem)/1.04 var(--sans);
	font-size: clamp(1.75rem, 11cqi, 4rem); /* el titular se mide contra su columna */
	letter-spacing: -0.024em;
	text-wrap: balance;
}
/* Cada palabra sube desde su propia línea (las envuelve landing.js) */
.title .w {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	margin: -0.12em 0 -0.16em;
	padding: 0.12em 0 0.16em;
}
.title .w > span {
	display: inline-block;
}

.lede,
.note {
	margin: 0;
	max-width: 33em;
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
	line-height: 1.52;
	color: var(--roto-80);
}
.note {
	margin-top: 0.85em;
	font-style: italic;
	color: var(--roto-62);
}

.contact {
	display: grid;
	justify-items: start;
	gap: 0.75rem;
	margin: clamp(1.75rem, 4.5vh, 3rem) 0 0;
}
.contact__label {
	font: 500 0.6875rem/1 var(--sans);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--roto-50);
}

.mail {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding-bottom: 0.3em;
	font: 500 clamp(1.375rem, 1.15rem + 0.9vw, 1.9rem)/1.15 var(--sans);
	letter-spacing: -0.012em;
}
.mail::before,
.mail::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
}
.mail::before {
	opacity: 0.28;
}
.mail::after {
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform 0.6s var(--ease-io);
}
.mail:hover::after,
.mail:focus-visible::after {
	transform: scaleX(1);
	transform-origin: 0 50%;
}
.mail__arrow {
	width: 0.56em;
	height: 0.56em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.1;
	transition: transform 0.5s var(--ease-out);
}
.mail:hover .mail__arrow,
.mail:focus-visible .mail__arrow {
	transform: translate(0.14em, -0.14em);
}

.colophon {
	position: relative;
	z-index: 2;
	grid-column: 1;
	grid-row: 4;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.35rem 2rem;
	padding: clamp(1.75rem, 5vh, 3.25rem) max(var(--pad), env(safe-area-inset-right))
		max(calc(var(--pad) * 0.8), env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left));
	font: 500 0.75rem/1.4 var(--sans);
	letter-spacing: 0.02em;
	color: var(--roto-62);
}

/* ───────── Lámina fotográfica ───────── */

.plate {
	position: relative;
	z-index: 0;
	grid-column: 1;
	grid-row: 1 / 3;
	margin: 0 0 calc(var(--overlap) * -1.6);
	overflow: hidden;
}
.plate__view {
	position: absolute;
	inset: 0;
}
/* Margen para el paralaje con puntero (landing.js desplaza la vista unos píxeles) */
@media (hover: hover) and (pointer: fine) {
	.js .plate__view {
		transform: scale(1.03);
	}
}
.plate picture,
.plate img {
	display: block;
	width: 100%;
	height: 100%;
}
.plate img {
	object-fit: cover;
	object-position: 58% 100%;
}
/* Velo carbón: asegura el contraste del logotipo y del texto y funde la foto con el fondo */
.plate::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(15, 15, 15, 0.92) 0, rgba(15, 15, 15, 0.7) 4.5rem, rgba(15, 15, 15, 0) 10rem),
		linear-gradient(to bottom, rgba(15, 15, 15, 0) 70%, var(--carbon) 100%);
}

/* Cinco lamas —una por letra— que al retirarse dibujan una escalera */
.plate__slats {
	position: absolute;
	z-index: 1;
	inset: 0 0 -2px;
	display: none;
}
.js .plate__slats {
	display: flex;
}
.plate__slats i {
	flex: 1 0 0;
	margin-right: -1px;
	background: var(--carbon);
}

.plate__tagline {
	display: none;
}

/* ───────── Composición partida (pantallas apaisadas): texto | lámina, como las dobles páginas del manual ───────── */

@media (min-width: 640px) and (min-aspect-ratio: 1/1) {
	/* Toda la composición (en rem) crece o se recoge con la pantalla: 16 px a 1440 × 900 */
	html {
		font-size: clamp(87.5%, min(0.6vw + 7.36px, 1.2vh + 5.2px), 131.25%);
	}

	.frame {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr auto;
	}
	.masthead {
		grid-column: 1 / -1;
	}
	.statement {
		grid-column: 1;
		grid-row: 2;
		align-self: center;
		padding-top: 2.5rem;
		padding-right: clamp(2rem, 4vw, 4rem);
	}
	.statement::before {
		content: none;
	}
	.colophon {
		grid-column: 1;
		grid-row: 3;
		padding-right: clamp(2rem, 4vw, 4rem);
	}

	.plate {
		grid-column: 2;
		grid-row: 1 / -1;
		margin: 0;
	}
	.plate img {
		object-position: 50% 74%;
	}
	.plate::after {
		background:
			linear-gradient(to right, var(--carbon) 0%, rgba(15, 15, 15, 0) 12%),
			linear-gradient(
				to bottom,
				rgba(15, 15, 15, 0.55) 0%,
				rgba(15, 15, 15, 0) 20%,
				rgba(15, 15, 15, 0) 70%,
				rgba(15, 15, 15, 0.86) 100%
			);
	}

	.plate__tagline {
		position: absolute;
		z-index: 2;
		display: block;
		bottom: max(calc(var(--pad) * 0.8), env(safe-area-inset-bottom));
		right: max(var(--pad), env(safe-area-inset-right));
		width: 11.25rem;
		height: auto;
		fill: var(--roto);
	}
}

/* Tabletas en vertical: la misma composición apilada, un punto más grande */
@media (min-width: 700px) and (max-aspect-ratio: 1/1) {
	html {
		font-size: 118.75%;
	}
}

/* ───────── Apertura ───────── */

.intro {
	/* Ancho del lockup (logotipo con tagline) y su caja, de las que cuelga la retícula */
	--lw: min(72vw, 26rem);
	--cy: 48.5%;
	--lh: calc(var(--lw) / 3.4983); /* alto del lockup */
	--gh: calc(var(--lw) / 5.3022); /* alto del logotipo */
	--left: calc(50% - var(--lw) / 2);
	--top: calc(var(--cy) - var(--lh) / 2);

	position: fixed;
	z-index: 10;
	inset: 0;
	display: none;
	overflow: hidden;
	pointer-events: none;
}
.js .intro {
	display: block;
}

@media (min-width: 640px) and (min-aspect-ratio: 1/1) {
	.intro {
		--lw: clamp(20rem, 34vw, 36rem);
	}
}

.lockup {
	position: absolute;
	left: var(--left);
	top: var(--top);
	width: var(--lw);
	transform-origin: 0 0;
}
.lockup svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	fill: var(--roto);
}
.lockup .ltr {
	transform: translateY(940px); /* unidades del viewBox: la letra espera bajo su línea base */
	transition: transform 1.15s var(--ease-out);
}
.lockup .ltr:nth-child(1) { transition-delay: 0.5s; }
.lockup .ltr:nth-child(2) { transition-delay: 0.615s; }
.lockup .ltr:nth-child(3) { transition-delay: 0.73s; }
.lockup .ltr:nth-child(4) { transition-delay: 0.845s; }
.lockup .ltr:nth-child(5) { transition-delay: 0.96s; }
.lockup .tag {
	opacity: 0;
	transition: opacity 0.9s ease 1.7s;
}
.is-play .lockup .ltr {
	transform: none;
}
.is-play .lockup .tag {
	opacity: 1;
}

/* Retícula de construcción: aristas de cada letra, altura de mayúsculas y línea base */
.guide {
	position: absolute;
	background: var(--roto);
}
.guide--h {
	left: 0;
	right: 0;
	height: 1px;
	opacity: 0.2;
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 1.2s var(--ease-io);
}
.guide--h:nth-child(1) { top: calc(var(--top) + 0.98643 * var(--gh)); }
.guide--h:nth-child(2) { top: calc(var(--top) + 0.02554 * var(--gh)); transition-delay: 0.12s; }

.guide--v {
	top: 0;
	bottom: 0;
	width: 1px;
	margin-left: -0.5px;
	left: calc(var(--left) + var(--x) * var(--lw));
	opacity: 0.14;
	transform: scaleY(0);
	transform-origin: 50% 0;
	transition: transform 1.1s var(--ease-io) calc(0.1s + var(--n) * 0.045s);
}
.guide--v:nth-child(even) {
	transform-origin: 50% 100%;
}
.guide--v:nth-child(3) { --x: 0; --n: 0; }
.guide--v:nth-child(4) { --x: 0.14755; --n: 1; }
.guide--v:nth-child(5) { --x: 0.19058; --n: 2; }
.guide--v:nth-child(6) { --x: 0.37105; --n: 3; }
.guide--v:nth-child(7) { --x: 0.40449; --n: 4; }
.guide--v:nth-child(8) { --x: 0.59355; --n: 5; }
.guide--v:nth-child(9) { --x: 0.64523; --n: 6; }
.guide--v:nth-child(10) { --x: 0.77753; --n: 7; }
.guide--v:nth-child(11) { --x: 0.81095; --n: 8; }
.guide--v:nth-child(12) { --x: 1; --n: 9; }

.is-play .guide--h {
	transform: scaleX(1);
}
.is-play .guide--v {
	transform: scaleY(1);
}
/* Construido el logotipo, la retícula se retira por el extremo opuesto */
.is-built .guide--h {
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition-duration: 0.9s;
}
.is-built .guide--v {
	transform: scaleY(0);
	transform-origin: 50% 100%;
	transition-duration: 0.8s;
	transition-delay: calc(var(--n) * 0.03s);
}
.is-built .guide--v:nth-child(even) {
	transform-origin: 50% 0;
}

.intro__cities {
	position: absolute;
	left: 0;
	right: 0;
	bottom: max(calc(var(--pad) * 0.8), env(safe-area-inset-bottom));
	margin: 0;
	text-align: center;
	font: 500 0.75rem/1.4 var(--sans);
	letter-spacing: 0.02em;
	opacity: 0;
	transition: opacity 0.9s ease 0.5s;
}
.is-play.has-fonts .intro__cities {
	opacity: 0.62;
}

/* ───────── Acople: el logotipo viaja a su posición de referencia y la página se descubre ───────── */

.is-dock .lockup {
	transform: translate(var(--dx, 0), var(--dy, 0)) scale(var(--ds, 1));
	transition: transform 1.25s var(--ease-io) 0.1s;
}
.is-dock .lockup .tag,
.is-play.is-dock .intro__cities {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.js .brand {
	visibility: hidden;
}
.is-ready .brand {
	visibility: visible;
}
.is-ready .intro {
	display: none;
}

.js .plate__slats i {
	transition: transform 1.45s var(--ease-io) calc(0.25s + var(--k) * 0.11s);
}
.plate__slats i:nth-child(5) { --k: 0; }
.plate__slats i:nth-child(4) { --k: 1; }
.plate__slats i:nth-child(3) { --k: 2; }
.plate__slats i:nth-child(2) { --k: 3; }
.plate__slats i:nth-child(1) { --k: 4; }
.is-dock .plate__slats i {
	transform: translateY(-101%);
}

.js .plate img {
	transform: scale(1.16);
	transition: transform 2.8s var(--ease-out) 0.25s;
}
.is-dock .plate img {
	transform: scale(1);
}
.is-idle .plate img {
	animation: drift 32s ease-in-out infinite alternate;
}
@keyframes drift {
	from { transform: scale(1); }
	to { transform: scale(1.05); }
}

.js .rise {
	opacity: 0;
	transform: translateY(1.1rem);
	transition:
		opacity 1.1s var(--ease-out) calc(var(--t0) + var(--i, 0) * 0.09s),
		transform 1.3s var(--ease-out) calc(var(--t0) + var(--i, 0) * 0.09s);
}
.is-dock .rise {
	opacity: 1;
	transform: none;
}

.js .eyebrow::after {
	transform: scaleX(0);
	transition: transform 1.2s var(--ease-io) calc(var(--t0) + 0.15s);
}
.is-dock .eyebrow::after {
	transform: scaleX(1);
}

.js .title .w > span {
	transform: translateY(118%);
	transition: transform 1.25s var(--ease-out) calc(var(--t0) + 0.1s + var(--l, 0) * 0.11s);
}
.is-dock .title .w > span {
	transform: none;
}

/* Terminada la apertura, los cambios de estado dejan de heredar sus retardos */
.is-settled .rise,
.is-settled .title .w > span {
	transition: none;
}

/* Cambio de idioma: fundido breve del texto (no del velo que lo separa de la lámina) */
.is-settled .statement > * {
	transition: opacity 0.2s;
}
.statement.is-switching > * {
	opacity: 0 !important;
}

/* Saltar la apertura (clic, tecla o scroll): todo llega a su sitio de inmediato */
.is-skip .lockup,
.is-skip .lockup *,
.is-skip .guide,
.is-skip .rise,
.is-skip .title .w > span,
.is-skip .eyebrow::after,
.is-skip .plate img,
.is-skip .plate__slats i {
	transition-duration: 0.45s !important;
	transition-delay: 0s !important;
}

/* Sin movimiento: se muestra el estado final, sin apertura */
.is-reduced .intro {
	display: none;
}
.is-reduced *,
.is-reduced *::before,
.is-reduced *::after {
	transition: none !important;
	animation: none !important;
}
.is-reduced .plate__slats {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.mail::after,
	.mail__arrow {
		transition: none;
	}
}