/* =================================================================
   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);
	padding: var(--space-9) var(--gutter);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
	color: var(--color-white);
}
.home-slide__heading {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);              /* [AJUSTABLE] separación título–subtítulo (24px) */
}
.home-slide__title {
	font: var(--font-home-title);      /* 56px */
	letter-spacing: var(--ls-default);
	color: var(--color-white);
}
.home-slide__subtitle {
	font: var(--font-home-subtitle);   /* 48px */
	letter-spacing: var(--ls-default);
	color: var(--color-white);
	margin: 0;
}
.home-slide__cta {
	margin-top: var(--space-2);
}

/* --- 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-7);
	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; }
	.home-scroll { right: var(--gutter); bottom: var(--space-6); }
}

/* =================================================================
   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);
}