/* ================================================
   NOSOTROS - BLOQUE 1: INTRO V3.2
   ================================================ */

.nosotros-intro-section {
	position: relative;
	width: 100%;
	height: 100vh;
	background: #F6F3E8;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	will-change: transform;
}

@supports (height: 100svh) {
	.nosotros-intro-section {
		height: 100svh;
	}
}

/* H1 NOSOTROS */
.nosotros-intro-title {
	z-index: 2;
	position: relative;
	color: #202020;
	font-family: 'Utile Display';
	font-size: 5rem; /* 80px */
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	text-transform: uppercase;
	margin: 0;
	leading-trim: both;
	text-edge: cap;
	/* Estado inicial para animación */
	opacity: 0;
	transform: translateY(20px);
	will-change: opacity, transform;
}

/* Imagen de fondo detrás del H1 */
.nosotros-intro-background {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 100%);
	z-index: 1;
	height: auto;
	width: 100%;
	max-width: none;
	will-change: transform;
}

/* ================================================
   NOSOTROS - BLOQUE 2: CONTENIDO
   ================================================ */

.nosotros-bloque-2-section {
	position: relative;
	width: 100%;
	min-height: 100vh;
	background: #3B504E;
}

@supports (height: 100svh) {
	.nosotros-bloque-2-section {
		min-height: 100svh;
	}
}


/* ================================================
   DESKTOP LAYOUT
   ================================================ */

.nosotros-bloque-2-desktop {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2rem; /* 32px */
	height: 100vh;
	padding: 0 9.6875rem; /* 155px */
	overflow: hidden;
}

@supports (height: 100svh) {
	.nosotros-bloque-2-desktop {
		height: 100svh;
	}
}

/* Columna de Texto */
.nosotros-texto-col {
	position: relative;
	width: 32rem; /* 512px */
	padding: 7.75rem 0; /* 124px top/bottom */
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-right: auto;
}

/* Estados de Contenido */
.nosotros-contenido-estado-0,
.nosotros-contenido-estado-1,
.nosotros-contenido-estado-2,
.nosotros-contenido-estado-3 {
	position: absolute;
	top: 7.75rem; /* 124px */
	left: 0;
	width: 100%;
	height: calc(100vh - 15.5rem); /* 100vh - (124px top + 124px bottom) */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

@supports (height: 100svh) {
	.nosotros-contenido-estado-0,
	.nosotros-contenido-estado-1,
	.nosotros-contenido-estado-2,
	.nosotros-contenido-estado-3 {
		height: calc(100svh - 15.5rem);
	}
}

/* Estado 0 visible por defecto */
.nosotros-contenido-estado-0 {
	opacity: 1;
}

/* Estados 1, 2, 3 ocultos inicialmente */
.nosotros-contenido-estado-1,
.nosotros-contenido-estado-2,
.nosotros-contenido-estado-3 {
	opacity: 0;
	will-change: opacity;
}

/* H2 Título Principal */
.nosotros-titulo-principal {
	color: #F6F3E8;
	font-family: 'Utile Display';
	font-size: 5rem; /* 80px */
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	text-transform: uppercase;
	margin: 0;
	leading-trim: both;
	text-edge: cap;
}

/* H3 Subtítulos */
.nosotros-subtitulo {
	color: #F6F3E8;
	font-family: 'Utile Display';
	font-size: 2.25rem; /* 36px */
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: -0.72px;
	margin: 0;
	leading-trim: both;
	text-edge: cap;
}

/* Párrafos */
.nosotros-parrafo {
	color: #F6F3E8;
	font-family: 'Switzer Variable';
	font-size: 1rem; /* 16px */
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin: 0;
	leading-trim: both;
	text-edge: cap;
}

/* Columna de Imágenes */
.nosotros-imagenes-col {
	position: relative;
	width: 28.9375rem; /* 463px */
	padding-top: 8rem;
	overflow: hidden; /* Oculta lo que está fuera del viewport */
}

/* Wrapper de imágenes que se desplazará */
.nosotros-imagenes-wrapper {
	position: relative;
	width: 100%;
	will-change: transform;
	transform: translateY(0);
}

/* Imágenes Layer - Apiladas verticalmente con gap */
.nosotros-imagen-layer {
	position: relative;
	display: block;
	width: 28.9375rem; /* 463px */
	height: 36.125rem; /* 578px */
	object-fit: cover;
	margin-bottom: 2rem; /* 32px gap */
}

/* Última imagen sin margin-bottom */
/* .nosotros-imagen-layer:last-child {
	margin-bottom: 0;
} */


/* ================================================
   MOBILE LAYOUT
   ================================================ */

.nosotros-bloque-2-mobile {
	display: none;
}

/* Slide Unificado Mobile */
.nosotros-mobile-unified {
	position: relative;
	width: 100%;
	height: 100vh; /* Altura fija, no min-height */
	padding: 16px;
	display: flex;
	flex-direction: column;
	overflow: hidden; /* Evitar scroll interno */
	touch-action: none; /* Prevenir scroll táctil nativo */
}

@supports (height: 100svh) {
	.nosotros-mobile-unified {
		height: 100svh;
	}
}

/* Contenedor de Textos */
.nosotros-mobile-textos {
	position: relative;
	width: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-bottom: auto;
}

/* Estados de Contenido Mobile */
.nosotros-mobile-contenido-estado-0,
.nosotros-mobile-contenido-estado-1,
.nosotros-mobile-contenido-estado-2,
.nosotros-mobile-contenido-estado-3 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	opacity: 0;
	will-change: opacity;
}

/* Estado 0 visible por defecto */
.nosotros-mobile-contenido-estado-0 {
	opacity: 1;
}

/* H2 Mobile */
.nosotros-mobile-unified .nosotros-titulo-principal {
	font-size: 46px;
	letter-spacing: -0.46px;
	margin: 0 0 38px 0;
}

/* H3 Mobile */
.nosotros-mobile-unified .nosotros-subtitulo {
	font-size: 28px;
	line-height: 115%;
	letter-spacing: -0.56px;
	margin: 0 0 38px 0;
}

/* Párrafos Mobile */
.nosotros-mobile-unified .nosotros-parrafo {
	font-size: 14px;
	line-height: 135%;
	letter-spacing: -0.14px;
	margin: 0 0 auto 0;
}

/* Contenedor de Imagen Mobile */
.nosotros-mobile-unified .nosotros-imagen-container {
	position: relative;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin: auto 0 0 0;
	overflow: hidden;
	aspect-ratio: 1;
}

/* Sistema de Superposición Mobile */
.nosotros-imagen-layer-mobile {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	will-change: opacity, transform;
}

/* Imagen inicial visible por defecto */
.nosotros-imagen-inicial-mobile {
	opacity: 1;
	transform: translateY(0);
}

/* Imágenes 1, 2, 3 ocultas inicialmente */
.nosotros-imagen-1-mobile,
.nosotros-imagen-2-mobile,
.nosotros-imagen-3-mobile {
	opacity: 0;
	transform: translateY(100%);
}


/* ================================================
   RESPONSIVE - MOBILE (max-width: 767px)
   ================================================ */

@media (max-width: 767px) {
	
	/* Bloque 1: Intro */
	.nosotros-intro-title {
		font-size: 46px;
		letter-spacing: -0.46px;
	}
	
	/* Bloque 2: Ocultar desktop, mostrar mobile */
	.nosotros-bloque-2-desktop {
		display: none;
	}
	
	.nosotros-bloque-2-mobile {
		display: block;
	}
	
	.nosotros-intro-background {
		width: 150%;
	}

}


/* ================================================
   NOSOTROS - ESTADO 4 DESKTOP
   ================================================ */

.nosotros-estado-4-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5.625rem; /* 90px */
	opacity: 0;
	pointer-events: none;
	will-change: opacity;
}

/* H2 Estado 4 Desktop */
.nosotros-titulo-estado-4 {
	color: #202020;
	font-family: 'Utile Display';
	font-size: 5rem; /* 80px */
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	leading-trim: both;
	text-edge: cap;
	transform: translateY(-100vh);
	will-change: transform;
}

/* H3 Estado 4 Desktop */
.nosotros-subtitulo-estado-4 {
	color: #202020;
	text-align: center;
	font-family: 'Utile Display';
	font-size: 2.25rem; /* 36px */
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: -0.72px;
	margin: 0;
	leading-trim: both;
	text-edge: cap;
	transform: translateY(-100vh);
	will-change: transform;
	width: 51.32rem;
}


/* ================================================
   NOSOTROS - BLOQUE 3 MOBILE
   ================================================ */

.nosotros-bloque-3-mobile-section {
	display: none; /* Oculto por defecto en desktop */
	position: relative;
	width: 100%;
	min-height: 100vh;
	background: #F6F3E8;
}

@supports (height: 100svh) {
	.nosotros-bloque-3-mobile-section {
		height: 100svh;
	}
}

.nosotros-bloque-3-mobile-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px;
	gap: 4rem; /* 64px */
}

/* H2 Bloque 3 Mobile */
.nosotros-titulo-estado-4-mobile {
	color: #202020;
	font-family: 'Utile Display';
	font-size: 46px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: -0.46px;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	leading-trim: both;
	text-edge: cap;
}

/* H3 Bloque 3 Mobile */
.nosotros-subtitulo-estado-4-mobile {
	color: #202020;
	text-align: center;
	font-family: 'Utile Display';
	font-size: 28px;
	font-style: normal;
	font-weight: 500;
	line-height: 115%;
	letter-spacing: -0.56px;
	margin: 0;
	leading-trim: both;
	text-edge: cap;
}


/* ================================================
   RESPONSIVE - MOBILE (max-width: 767px)
   ================================================ */

@media (max-width: 767px) {
	
	/* Ocultar estado 4 desktop en mobile */
	.nosotros-estado-4-container {
		display: none;
	}
	
	/* Mostrar bloque 3 mobile */
	.nosotros-bloque-3-mobile-section {
		display: block;
	}
}


/* ================================================
   NOSOTROS - ESTADO 5 DESKTOP
   ================================================ */

.nosotros-estado-5-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6.25rem; /* 100px */
	opacity: 0;
	pointer-events: none;
	will-change: opacity;
}

/* H3 Estado 5 Desktop */
.nosotros-subtitulo-estado-5 {
	color: #F6F3E8;
	text-align: center;
	font-family: 'Utile Display';
	font-size: 2.25rem; /* 36px */
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: -0.72px;
	margin: 0;
	leading-trim: both;
	text-edge: cap;
	opacity: 0;
	will-change: opacity;
}

/* Grid de 3 valores */
.nosotros-valores-grid {
	display: flex;
	gap: 2rem; /* 32px */
	align-items: center;
	justify-content: center;
}

/* Item individual */
.nosotros-valor-item {
	width: 21.5625rem; /* 345px */
	height: 23.75rem; /* 380px */
	transform: translateY(100vh);
	will-change: transform;
}

/* Imagen */
.nosotros-valor-imagen {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* ================================================
   NOSOTROS - BLOQUE 4 MOBILE: VALORES
   ================================================ */

.nosotros-bloque-4-mobile-section {
	display: none; /* Oculto por defecto en desktop */
	position: relative;
	width: 100%;
	min-height: 100vh;
	background: #B28E66;
}

@supports (height: 100svh) {
	.nosotros-bloque-4-mobile-section {
		height: 100svh;
	}
}

.nosotros-bloque-4-mobile-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 100px;
}

/* H3 Bloque 4 Mobile */
.nosotros-subtitulo-estado-5-mobile {
	color: #F6F3E8;
	text-align: center;
	font-family: 'Utile Display';
	font-size: 28px;
	font-style: normal;
	font-weight: 500;
	line-height: 115%;
	letter-spacing: -0.56px;
	margin: 0;
	padding: 0 16px;
	leading-trim: both;
	text-edge: cap;
}

/* Carrusel horizontal con scroll snap */
.nosotros-valores-carrusel {
	display: flex;
	gap: 13px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	width: 100%;
	padding-left: 38px;
	padding-right: 38px;
	/* Ocultar scrollbar */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.nosotros-valores-carrusel::-webkit-scrollbar {
	display: none;
}

/* Item individual mobile */
.nosotros-valor-item-mobile {
	flex-shrink: 0;
	width: 300px;
	height: 330px;
	scroll-snap-align: center;
}

/* Imagen mobile */
.nosotros-valor-imagen-mobile {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nosotros-bloque-3-mobile-section,
.nosotros-bloque-4-mobile-section {
    touch-action: none;
    overscroll-behavior: none;
}
/* ================================================
   RESPONSIVE - MOBILE (max-width: 767px)
   ================================================ */

@media (max-width: 767px) {
	
	/* Ocultar estado 5 desktop en mobile */
	.nosotros-estado-5-container {
		display: none;
	}
	
	/* Mostrar bloque 4 mobile */
	.nosotros-bloque-4-mobile-section {
		display: block;
	}
}


/* ================================================
   NOSOTROS - BLOQUE 5: CONTENIDO ADICIONAL
   ================================================ */

.nosotros-bloque-2-wrapper {
	position: relative;
	width: 100%;
	min-height: 100vh;
}

.nosotros-bloque-5-section {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 20;
	transform: translateY(100vh);
}

@supports (height: 100svh) {
	.nosotros-bloque-5-section {
		height: 100svh;
	}
}

/* Desktop layout - visible por defecto */
.nosotros-bloque-5-desktop.desktop-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 100%;
}

/* Mobile layout - oculto por defecto */
.nosotros-bloque-5-mobile.mobile-layout {
	display: none;
}

/* ================================================
   COLUMNA IZQUIERDA - IMAGEN
   ================================================ */

.nosotros-bloque-5-imagen-col {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

@supports (height: 100svh) {
	.nosotros-bloque-5-imagen-col {
		height: 100svh;
	}
}

.imagen-fondo-bloque-5 {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Imagen mini centrada */
.imagen-mini-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 17.625rem; /* 282px */
	aspect-ratio: 282 / 361;
	z-index: 10;
}

.imagen-mini {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ================================================
   COLUMNA DERECHA - CONTENIDO
   ================================================ */

.nosotros-bloque-5-contenido-col {
	position: relative;
	background: #B5C0DC;
	padding: 2rem;
	display: flex;
	flex-direction: column;
}

/* Título H2 */
.titulo-bloque-5 {
	color: #202020;
	font-family: 'Utile Display';
	font-size: 5rem; /* 80px */
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	text-transform: uppercase;
	margin: 0 0 2.81rem 0;
	leading-trim: both;
	text-edge: cap;
}

/* Párrafo general */
.parrafo-general-bloque-5 {
	color: #202020;
	font-family: 'Switzer Variable';
	font-size: 1rem; /* 16px */
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin: 0;
	leading-trim: both;
	text-edge: cap;
}

/* Contenedor de grupos */
.contenido-grupos {
	margin-top: auto;
}

/* Grupos individuales */
.grupo-bloque-5 {
	/* Sin estilos específicos, solo contenedor */
}

/* Subtítulo H3 */
.subtitulo-bloque-5 {
	color: #202020;
	font-family: 'Utile Display';
	font-size: 2.25rem; /* 36px */
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: -0.72px;
	margin: 0 0 1rem 0;
	leading-trim: both;
	text-edge: cap;
}

/* Párrafo */
.parrafo-bloque-5 {
	color: #202020;
	font-family: 'Switzer Variable';
	font-size: 1rem; /* 16px */
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin: 0;
	text-decoration: none;
	leading-trim: both;
	text-edge: cap;
	transition: opacity 0.3s ease;
}

.parrafo-bloque-5:hover {
	opacity: 0.7;
}

/* Separador */
.separador-bloque-5 {
	border-top: 1px solid #202020;
	margin: 1.5rem 0; /* 24px top y bottom */
}

/* ================================================
   RESPONSIVE - MOBILE (max-width: 767px)
   ================================================ */

@media (max-width: 767px) {
	/* Ocultar desktop layout en mobile */
	.nosotros-bloque-5-desktop.desktop-layout {
		display: none;
	}
	
	.nosotros-bloque-5-section {
		position: relative;
		transform: translateY(0);
		min-height: unset !important;
		height: auto !important;
	}
	
	/* Mostrar mobile layout */
	.nosotros-bloque-5-mobile.mobile-layout {
		display: block;
		width: 100%;
	}
	
	.nosotros-bloque-5a {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	
	@supports (height: 100svh) {
		.nosotros-bloque-5a {
			height: 100svh;
		}
	}
	
	/* Texto Container - 50vh top */
	.nosotros-bloque-5a-texto {
		height: 50vh;
		background: #B5C0DC;
		padding: 16px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	
	.nosotros-bloque-5a-texto .titulo-bloque-5 {
		font-size: 46px;
		letter-spacing: -0.46px;
		color: #202020;
		font-family: 'Utile Display';
		font-weight: 500;
		line-height: 100%;
		text-transform: uppercase;
		margin: 0 0 38px 0;
	}
	
	.nosotros-bloque-5a-texto .parrafo-general-bloque-5 {
		font-size: 14px;
		line-height: 135%;
		letter-spacing: -0.14px;
		color: #202020;
		font-family: 'Switzer Variable';
		font-weight: 400;
		margin: 0;
	}
	
	/* Imagen Container - 50vh bottom */
	.nosotros-bloque-5a-imagen {
		position: relative;
		height: 50vh;
		overflow: hidden;
	}
	
	.nosotros-bloque-5a-imagen .imagen-fondo-bloque-5 {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	
	/* Imagen mini en mobile */
	.nosotros-bloque-5a-imagen .imagen-mini-container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 145px;
		height: 186px;
		z-index: 10;
	}
	
	.nosotros-bloque-5a-imagen .imagen-mini {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.nosotros-bloque-5b {
		width: 100%;
		height: auto;
		background: #B5C0DC;
		padding: 16px 16px 90px 16px;
		display: flex;
		align-items: flex-end;
	}
	
	.nosotros-bloque-5b-contenido {
		width: 100%;
	}
	
	/* Estilos de texto para 5B */
	.nosotros-bloque-5b .subtitulo-bloque-5 {
		font-size: 28px;
		line-height: 115%;
		letter-spacing: -0.56px;
		margin-bottom: 32px;
		color: #202020;
		font-family: 'Utile Display';
		font-weight: 500;
	}
	
	.nosotros-bloque-5b .parrafo-bloque-5 {
		font-size: 14px;
		line-height: 135%;
		letter-spacing: -0.14px;
		color: #202020;
		font-family: 'Switzer Variable';
		font-weight: 400;
		margin: 0;
		text-decoration: none;
	}
	
	.nosotros-bloque-5b .separador-bloque-5 {
		border-top: 1px solid #202020;
		margin: 32px 0;
	}
}