/* =================================================================
   INTERPLAY — HOME (slider vertical a pantalla completa)
   ================================================================= */

.home {
	position: relative;
	height: 100vh;
	height: 100dvh;             /* evita saltos con las barras del móvil */
	overflow: hidden;
	background: #000;
}

.home-swiper {
	width: 100%;
	height: 100%;
}

/* --- Diapositiva de proyecto --- */
.home-slide {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000;
}

.home-slide__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;          /* el vídeo cubre toda la diapositiva */
	z-index: 0;
}

/* Oscurecido inferior para legibilidad del texto */
.home-slide__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%);
	pointer-events: none;
}

/* Contenido (abajo a la izquierda, dentro del ancho común) */
.home-slide__content {
	position: absolute;
	z-index: 2;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 100%;
	max-width: var(--content-max);
	/* [Ajustes Tanda 1] El margen inferior/izquierdo del bloque debe igualar
	   el margen superior del menú (--space-3, 24px). El padding lateral ya
	   coincidía (--gutter = 24px); se ajusta solo el inferior. */
	padding: var(--space-9) var(--gutter) var(--space-3);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);   /* [Ajustes Tanda 1 - corrección] 24px (antes 32px) */
	color: var(--color-white);
}
.home-slide__heading {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);              /* [Ajustes Tanda 1 - corrección] 8px (antes 16px) — confirmado */
}
.home-slide__title {
	font: var(--font-home-title);      /* 56px */
	letter-spacing: var(--ls-default);
	/* [Ajustes Tanda 1 - corrección] El gap flex ya está en 24px; el "aire"
	   extra venía del line-height (72px) del token, mucho mayor que el
	   tamaño de fuente. El letter-spacing (0,5px) es tracking horizontal,
	   no afecta al espacio vertical, así que se deja como está. */
	line-height: 60px;
	color: var(--color-white);
}
.home-slide__subtitle {
	font: var(--font-home-subtitle);   /* 48px */
	letter-spacing: var(--ls-default);
	line-height: 52px;                 /* [Ajustes Tanda 1 - corrección] antes 72px */
	color: var(--color-white);
	margin: 0;
}
.home-slide__cta {
	/* [Ajustes Tanda 1 - corrección] antes tenía además margin-top: var(--space-2),
	   que se SUMABA al gap del flex contenedor (el espacio real era
	   gap + margin, no solo el gap). Ahora el espaciado lo controla
	   únicamente el gap de .home-slide__content. */
}

/* --- Botón "scroll down" (abajo a la derecha) --- */
.home-scroll {
	position: absolute;
	z-index: 5;
	right: max(var(--gutter), calc((100vw - var(--content-max)) / 2 + var(--gutter)));
	bottom: var(--space-3);   /* [Ajustes Tanda 1 - corrección] antes --space-7 (64px); ahora coincide con el bloque de contenido */
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	background: none;
	border: 0;
	color: var(--color-white);
	font: var(--font-scroll-link);
	letter-spacing: var(--ls-default);
}
.home-scroll .icon { transition: transform 0.3s ease; }
.home-scroll:hover .icon { transform: translateY(0.25em); }

/* --- Responsive --- */
@media (max-width: 768px) {
	.home-slide__title { font-size: 40px; line-height: 1.1; }
	.home-slide__subtitle { font-size: 30px; line-height: 1.15; }

	/* El bloque de contenido no va pegado al borde inferior (como en
	   escritorio): sube para quedar más centrado y, sobre todo, para dejar
	   sitio al botón "scroll down", con el que antes se solapaba. */
	.home-slide__content {
		padding-bottom: calc(var(--space-9) + var(--space-2));   /* 96px */
	}
	.home-scroll { right: var(--gutter); bottom: var(--space-3); }
}

/* =================================================================
   DIAPOSITIVA DE CIERRE — studio statement (secuencia por scroll)
   ================================================================= */
.home-statement {
	background: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
}
.home-statement__inner {
	position: relative;
	max-width: 900px;
	padding-inline: var(--gutter);
	text-align: center;
}

/* Frase: aparece (paso 1), gris; se completa a negro palabra a palabra (paso 2) */
.home-statement__text {
	font: var(--font-outstanding);        /* 40/56 */
	letter-spacing: var(--ls-default);
	margin: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
}
.home-statement__text .word {
	color: var(--color-grey);
	transition: color 0.4s ease;
}
.home-statement[data-step="1"] .home-statement__text,
.home-statement[data-step="2"] .home-statement__text,
.home-statement[data-step="3"] .home-statement__text { opacity: 1; }

.home-statement[data-step="2"] .home-statement__text .word,
.home-statement[data-step="3"] .home-statement__text .word {
	color: var(--color-black);
	transition-delay: calc(var(--i) * 30ms);   /* relleno "autocompletándose" */
}

/* CTA "let's talk" — emerge en el paso 3, debajo de la frase */
.home-statement__cta {
	position: absolute;
	top: 100%;
	left: 50%;
	margin-top: var(--space-8);
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	font: var(--font-outstanding-cta);    /* 80px */
	letter-spacing: var(--ls-default);
	color: var(--color-black);
	white-space: nowrap;
	opacity: 0;
	transform: translateX(-50%) translateY(24px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	pointer-events: none;
}
.home-statement[data-step="3"] .home-statement__cta {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}
.home-statement__cta .icon { transition: transform 0.3s ease; }
.home-statement__cta:hover .icon { transform: translateX(0.25em); }

@media (max-width: 768px) {
	.home-statement__text { font-size: 28px; line-height: 1.3; }
	.home-statement__cta { font-size: 44px; }
}

/* Footer de la home: pegado al margen inferior; el espacio sobrante,
   en blanco por arriba (así no parece un error en pantallas grandes). */
.home-footer {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: var(--color-white);
}