/* =================================================================
   INTERPLAY — ABOUT (slider vertical) — capa 1
   ================================================================= */
.about {
	position: relative;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: var(--color-white);
}
.about-swiper { width: 100%; height: 100%; }

.about-slide {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--color-white);
	display: flex;
	align-items: center;
}

.about-hero__inner,
.about-founders__inner,
.about-statement__inner {
	width: 100%;
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* --- 1) HERO --- */
.about-hero__title {
	font: var(--font-project-title);      /* 80px */
	letter-spacing: var(--ls-default);
	color: var(--color-black);
}
.about-hero__text {
	max-width: var(--content-measure);
	margin-top: var(--space-7);
}
.about-hero__text p {
	margin: 0 0 var(--space-4);
	font: var(--fw-light) 24px/32px var(--font-sans);
	letter-spacing: var(--ls-default);
	color: var(--color-black);
}
.about-hero__text p:last-child { margin-bottom: 0; }

/* --- 2) FUNDADORES --- */
.about-founders__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-9);
	align-items: center;
}
.about-founders__img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.about-founders__text p {
	margin: 0 0 var(--space-4);
	font: var(--fw-light) 24px/32px var(--font-sans);
	letter-spacing: var(--ls-default);
	color: var(--color-black);
}
.about-founders__text p:last-child { margin-bottom: 0; }

/* --- 3/4) TEXTOS DESTACADOS (gris -> negro, como en la home) --- */
.about-statement { justify-content: center; }
.about-statement__inner { max-width: 900px; text-align: center; }
.about-statement__text {
	margin: 0;
	font: var(--font-outstanding);        /* 40/56 */
	letter-spacing: var(--ls-default);
	opacity: 0;
	transition: opacity 0.6s ease;
}
.about-statement__text .word {
	color: var(--color-grey);
	transition: color 0.4s ease;
}
.about-statement[data-step="1"] .about-statement__text,
.about-statement[data-step="2"] .about-statement__text { opacity: 1; }
.about-statement[data-step="2"] .about-statement__text .word {
	color: var(--color-black);
	transition-delay: calc(var(--i) * 30ms);
}

/* --- Botón "scroll down" (sobre fondo claro -> negro) --- */
.about-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-black);
	font: var(--font-scroll-link);
	letter-spacing: var(--ls-default);
}
.about-scroll .icon { transition: transform 0.3s ease; }
.about-scroll:hover .icon { transform: translateY(0.25em); }

/* --- Responsive --- */
@media (max-width: 900px) {
	.about-founders__inner { grid-template-columns: 1fr; gap: var(--space-5); }
	.about-hero__title { font-size: 48px; line-height: 1.05; }
	.about-hero__text p,
	.about-founders__text p { font-size: 18px; line-height: 26px; }
	.about-statement__text { font-size: 28px; line-height: 1.3; }
	.about-scroll { right: var(--gutter); bottom: var(--space-6); }
}

/* =================================================================
   OUR PRINCIPLES  (H2 fijo + principios que emergen por scroll)
   ================================================================= */
.about-principles { align-items: stretch; }
.about-principles__inner {
	width: 100%;
	max-width: var(--content-max);
	margin-inline: auto;
	padding: 120px var(--gutter) var(--space-8);
	display: flex;
	flex-direction: column;
	height: 100%;
}
.about-principles__title {
	flex: none;
	font: var(--font-section-heading);
	letter-spacing: var(--ls-default);
	color: var(--color-black);
}
.about-principles__stack {
	position: relative;
	flex: 1;
	margin-top: var(--space-8);
}
.about-principle {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-9);
	align-content: start;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	pointer-events: none;
}
.about-principles[data-step="1"] .about-principle[data-index="1"],
.about-principles[data-step="2"] .about-principle[data-index="2"],
.about-principles[data-step="3"] .about-principle[data-index="3"],
.about-principles[data-step="4"] .about-principle[data-index="4"] {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.about-principle__head {
	margin: 0 0 var(--space-5);
	font: var(--fw-medium) 40px/1.2 var(--font-sans);
	letter-spacing: var(--ls-default);
	color: var(--color-black);
	display: flex;
	gap: var(--space-3);
}
.about-principle__text p {
	margin: 0 0 var(--space-3);
	font: var(--fw-light) 16px/24px var(--font-sans);
	letter-spacing: var(--ls-default);
	color: var(--color-black);
}
.about-principle__text p:first-child {
	font: var(--fw-medium) 20px/28px var(--font-sans);   /* primer párrafo destacado */
	margin-bottom: var(--space-4);
}
.about-principle__text p:last-child { margin-bottom: 0; }
.about-principle__img {
	width: 100%;
	height: auto;
	display: block;
	max-height: 62vh;
	object-fit: cover;
}
@media (max-width: 900px) {
	.about-principles__inner { padding-top: 96px; }
	.about-principles__title { font-size: 40px; }
	.about-principle { grid-template-columns: 1fr; gap: var(--space-4); overflow-y: auto; }
	.about-principle__head { font-size: 28px; }
	.about-principle__img { max-height: 40vh; }
}

/* =================================================================
   WE ARE INTERPLAY  (equipo: H2 fijo + miembros que emergen)
   ================================================================= */
.about-team { align-items: stretch; }
.about-team__inner {
	width: 100%;
	max-width: var(--content-max);
	margin-inline: auto;
	padding: 120px var(--gutter) var(--space-8);
	display: flex;
	flex-direction: column;
	height: 100%;
}
.about-team__title {
	flex: none;
	font: var(--font-section-heading);
	letter-spacing: var(--ls-default);
	color: var(--color-black);
}
.about-team__stack {
	position: relative;
	flex: 1;
	margin-top: var(--space-8);
}
.about-member {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 5fr 3fr 4fr;
	gap: var(--space-7);
	align-content: start;
	align-items: start;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	pointer-events: none;
}
.about-team[data-step="1"] .about-member[data-index="1"],
.about-team[data-step="2"] .about-member[data-index="2"] {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.about-member__img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	max-height: 62vh;
}
.about-member__name {
	margin: 0;
	font: var(--fw-regular) 32px/1.2 var(--font-sans);
	letter-spacing: var(--ls-default);
	color: var(--color-black);
}
.about-member__role {
	margin: var(--space-1) 0 0;
	font: var(--font-body);
	letter-spacing: var(--ls-default);
	color: var(--color-black);
}
.about-member__bio { align-self: center; }
.about-member__bio p {
	margin: 0 0 var(--space-3);
	font: var(--fw-light) 16px/24px var(--font-sans);
	letter-spacing: var(--ls-default);
	color: var(--color-black);
}
.about-member__bio p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
	.about-team__inner { padding-top: 96px; }
	.about-team__title { font-size: 40px; }
	.about-member {
		grid-template-columns: 1fr;
		gap: var(--space-4);
		overflow-y: auto;
	}
	.about-member__bio { align-self: start; }
	.about-member__img { max-height: 40vh; aspect-ratio: 4 / 3; }
	.about-member__name { font-size: 28px; }
}

/* --- Footer como diapositiva: pegado al margen inferior; el espacio
   sobrante, en blanco por arriba --- */
.about-footer {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: stretch;      /* a todo el ancho (anula el centrado de .about-slide) */
	background: var(--color-white);
}