/* ================================================
   HERO SECTION - HOME v4.1
   ================================================ */

/* ================================================
   SLIDES CONTAINER
   ================================================ */

.slides-container {
	position: relative;
	width: 100%;
}

.slides-container section {
	position: relative;
	width: 100%;
	min-height: 100vh;
	touch-action: none;
}

/* Contenedor principal del hero */
.hero-container {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: #f6f3e8;
	z-index: 100;
}

@supports (height: 100svh) {
	.hero-container {
		height: 100svh;
	}
}

/* Imagen de fondo */
.hero-background {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	will-change: transform;
	--overlay-opacity: 0;
}

.hero-background::after {
    content: '';
    position: absolute;
    top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
    opacity: var(--overlay-opacity);
    will-change: opacity;
    pointer-events: none;
}

.hero-image {
	display: block;
	width: 24rem;
	height: auto;
	object-fit: cover;
	will-change: transform;
}

/* Overlay con máscara del logo */
.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #f6f3e8;
	z-index: 2;
	-webkit-mask-image: url('/wp-content/uploads/2025/11/x4-scaled.png');
	mask-image: url('/wp-content/uploads/2025/11/x4-scaled.png');
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: subpixel-antialiased;
	will-change: transform;
}

/* Texto "Desplázate para explorar" */
.hero-scroll-text {
	position: absolute;
	bottom: 4rem; /* 64px desktop */
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	
	color: #202020;
	text-align: center;
	font-family: 'Switzer Variable';
	font-size: 0.875rem; /* 14px */
	font-style: normal;
	font-weight: 400;
	line-height: 135%;
	letter-spacing: -0.14px;
	
	transition: color 0.6s ease;
}

/* Clase que se añadirá con GSAP cuando esté sobre la imagen */
.hero-scroll-text.sobre-imagen {
	color: #f6f3e8;
}

/* H1 Hero con ACF */
.hero-title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	color: #f6f3e8;
	text-align: center;	
	font-family: 'Utile Display';
	font-size: 4rem; /* 64px */
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: -1.28px;
	opacity: 0;
	will-change: opacity;
	
	/* Propiedades experimentales para trimming */
	leading-trim: both;
	text-edge: cap;
}


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

@media (max-width: 767px) {
	
	.hero-image {
		width: 200px; /* Mantiene 260px en mobile */
		height: auto;
	}
	
	.hero-scroll-text {
		bottom: 32px;
		font-size: 14px; /* px fijo en mobile */
	}
	
	.hero-title {
		font-size: 35px;
		line-height: 115%;
		letter-spacing: -0.7px;
		width: 100%;
		padding: 0 16px;
	}
	
	.hero-overlay {
		-webkit-mask-image: url('/wp-content/uploads/2025/11/MOBILE.svg');
		mask-image: url('/wp-content/uploads/2025/11/MOBILE.svg');
		-webkit-mask-size: auto 70vh;
		mask-size: auto 70vh;
	}
}


/* ================================================
   BLOQUE 2
   ================================================ */

/* Contenedor principal */
.bloque-2-section {
	position: relative;
	width: 100%;
	height: 100vh;
	z-index: 10;
}

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

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

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

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

.bloque-2-imagen-col {
	position: relative;
	height: 100vh;
	overflow: hidden;
	transform: translateY(-100%);
	opacity: 0;
	will-change: transform, opacity;
}

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

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

/* Imágenes superpuestas centradas */
.imagenes-superpuestas {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 17.625rem; /* 282px en base 16px */
	aspect-ratio: 282 / 361;
	z-index: 10;
}

.imagen-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	will-change: opacity;
}

.imagen-layer:first-child {
	opacity: 1;
}

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

.bloque-2-contenido-col {
	position: relative;
	background: #B5C0DC;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	transform: translateY(100%);
	opacity: 0;
	will-change: transform, opacity;
}

/* Título H2 */
.titulo-bloque-2 {
	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;
}

/* Contenido scrolleable */
.contenido-scroll {
	margin-top: auto;
	opacity: 0;
	transform: translateY(20px);
	will-change: opacity, transform;
}

/* Grupos de subtítulo + párrafo */
.subtitulo-parrafo-group {
	opacity: 0;
	transform: translateY(20px);
	will-change: opacity, transform;
}

/* Subtítulo H3 */
.subtitulo-bloque-2 {
	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 1.5rem 0;
	leading-trim: both;
	text-edge: cap;
}

/* Párrafo */
.parrafo-bloque-2 {
	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;
}

/* Separador */
.separador-bloque-2 {
    border-top: 1px solid #202020;
    margin: 2.8125rem 0; /* 45px top y bottom */
    opacity: 0;
    will-change: opacity;
}

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

@media (max-width: 767px) {
	/* Ocultar desktop layout en mobile */
	.bloque-2-container.desktop-layout {
		display: none;
	}
	
	/* ✅ FASE 2: Wrapper sin altura fija - los slides .bloque-2a y .bloque-2b son independientes */
	.bloque-2-section {
		height: auto; /* Permitir que los hijos controlen la altura */
		min-height: 0; /* Resetear cualquier min-height heredado */
	}
	
	/* Mostrar mobile layout */
	.mobile-layout {
		display: block;
		width: 100%;
	}
	
	.bloque-2a {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		contain: layout style paint;
	}
	
	@supports (height: 100svh) {
		.bloque-2a {
			height: 100svh;
		}
	}
	
	/* H2 Container - 50vh top */
	.bloque-2a-texto {
		height: 50vh;
		background: #B5C0DC;
		padding: 16px;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}
	
	.bloque-2a-texto .titulo-bloque-2 {
		font-size: 46px;
		letter-spacing: -0.46px;
		color: #202020;
		font-family: 'Utile Display';
		font-weight: 500;
		line-height: 100%;
		text-transform: uppercase;
		margin: 0;
	}
	
	/* Imagen Container - 50vh bottom */
	.bloque-2a-imagen {
		position: relative;
		height: 50vh;
		overflow: hidden;
	}
	
	.bloque-2a-imagen .imagen-fondo-bloque-2 {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	
	/* Imágenes superpuestas en 2A */
	.bloque-2a-imagen .imagenes-superpuestas {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 145px;
		height: 186px;
		z-index: 10;
	}
	
	.bloque-2a-imagen .imagen-layer {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		will-change: opacity;
	}
	
	.bloque-2a-imagen .imagen-layer:first-child {
		opacity: 1;
	}
	
	.bloque-2b {
		width: 100%;
		height: 100vh;
		background: #B5C0DC;
		padding: 64px 16px;
		display: flex;
		align-items: flex-start;
		contain: layout style paint;
	}
	
	.bloque-2b-contenido {
		width: 100%;
	}
	
	/* Estilos de texto para 2B */
	.bloque-2b .subtitulo-bloque-2 {
		font-size: 28px;
		line-height: 115%;
		letter-spacing: -0.56px;
		margin-bottom: 32px;
		color: #202020;
		font-family: 'Utile Display';
		font-weight: 500;
		margin: 0 0 32px 0;
	}
	
	.bloque-2b .parrafo-bloque-2 {
		font-size: 14px;
		line-height: 135%;
		letter-spacing: -0.14px;
		color: #202020;
		font-family: 'Switzer Variable';
		font-weight: 400;
		margin: 0;
	}
	
	.bloque-2b .separador-bloque-2 {
		border-top: 1px solid #202020;
		margin: 32px 0;
		opacity: 1;
	}
	
	.bloque-2b .subtitulo-parrafo-group {
		opacity: 1;
		transform: none;
	}
}

/* ================================================
   BLOQUE 2 - MODIFICACIONES DESKTOP ONLY
   ================================================ */

/* Estados iniciales para animaciones - SOLO DESKTOP */
@media (min-width: 768px) {
	
	/* Columna izquierda - inicial fuera de vista (arriba) */
	.bloque-2-imagen-col {
		transform: translateY(-100%);
		opacity: 0;
		will-change: transform, opacity;
	}
	
	/* Columna derecha - inicial fuera de vista (abajo) */
	.bloque-2-contenido-col {
		transform: translateY(100%);
		opacity: 0;
		will-change: transform, opacity;
	}
	
	/* Contenedor de scroll - visible pero contenido oculto */
	.contenido-scroll {
		margin-top: auto;
		opacity: 1; /* el contenedor sí está visible */
		transform: translateY(0); /* resetear cualquier transform previo */
		will-change: opacity, transform;
	}
	
	/* Grupos de texto - ocultos inicialmente */
	.subtitulo-parrafo-group {
		opacity: 0;
		transform: translateY(20px);
		will-change: opacity, transform;
	}
	
	/* Separador - oculto inicialmente */
	.separador-bloque-2 {
		border-top: 1px solid #202020;
		margin: 1.5rem 0;
		opacity: 0;
		will-change: opacity;
	}
}


/* ================================================
   BLOQUE 3
   ================================================ */

/* Contenedor principal */
.bloque-3-section {
	position: relative;
	width: 100%;
	height: 100vh;
	background: #3B504E;
	overflow: hidden;
	transition: background-color 0.4s ease;
	will-change: background-color;
}

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

.bloque-3-container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

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

@media (max-width: 767px) {
	.bloque-3-section {
		height: auto;
		min-height: 100vh;
	}
	
	.bloque-3-container {
		padding: 16px;
	}
}

.bloque-3-container.desktop-layout {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 2rem;
}

/* ================================================
   FILA SUPERIOR
   ================================================ */

.bloque-3-fila-superior {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: auto;
}

/* H2 Título */
.titulo-bloque-3 {
	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;
}

/* Párrafo General */
.parrafo-general-bloque-3 {
	width: 28.8125rem; /* 461px */
	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;
}

/* ================================================
   FILA INFERIOR
   ================================================ */

.bloque-3-fila-inferior {
	display: grid;
	width: 100%;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 0 2rem; /* 0 32px entre col 2 y 3 */
	align-items: start;
}

/* ================================================
   COLUMNA 1: TEXTOS MARCAS
   ================================================ */

.bloque-3-col-textos {
	display: flex;
	flex-direction: column;
	gap: 1.375rem; /* 22px */
}

.texto-dyrbal,
.texto-dyrbal-selecta {
	color: #F6F3E8;
	font-family: 'Utile Display';
	font-size: 1.5rem; /* 24px */
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: -0.48px;
	margin: 0;
	transition: opacity 0.4s ease;
	will-change: opacity;
	cursor: pointer;
}

.texto-dyrbal {
	opacity: 1;
}

.texto-dyrbal-selecta {
	opacity: 0.3;
}

/* ================================================
   COLUMNA 2: IMÁGENES
   ================================================ */

.bloque-3-col-imagen {
	position: relative;
	width: 21.125rem; /* 338px */
	height: 28.625rem; /* 458px */
	overflow: hidden;
	margin-left: auto;
}

/* Contenedor de imágenes Dyrbal */
.imagenes-dyrbal-container {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Capas de imágenes Dyrbal - superposición sin fade */
.imagen-layer-dyrbal, .imagen-layer-dyrbal-selecta {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	will-change: opacity;
}

/* Primera imagen visible por defecto */
.imagen-layer-dyrbal:first-child {
	opacity: 1;
}

/* ================================================
   COLUMNA 3: CONTENIDO
   ================================================ */

.bloque-3-col-contenido {
	display: flex;
	flex-direction: column;
	margin-right: 7.6875rem; /* 123px */
	width: 21.125rem;
	height: 28.625rem;
	margin-left: auto;
}

/* Contenedores de contenido */
.contenido-dyrbal,
.contenido-dyrbal-selecta {
	display: flex;
	flex-direction: column;
}

.contenido-dyrbal {
	opacity: 1;
	height: 100%;
}

.contenido-dyrbal-selecta {
	position: absolute;
	width: 21.125rem;
	height: 28.625rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
	will-change: opacity;
}

/* Subtítulos H3 */
.subtitulo-dyrbal,
.subtitulo-dyrbal-selecta {
	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 0 2rem 0; /* 0 0 32px 0 */
	leading-trim: both;
	text-edge: cap;
}

/* Párrafos */
.parrafo-dyrbal,
.parrafo-dyrbal-selecta {
	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;
}

/* Enlace Catálogo */
.enlace-catalogo {
	margin-top: auto;
	color: #F6F3E8;
	font-family: 'Utile Display';
	font-size: 1rem; /* 16px */
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: 5.5%; /* 0.88px */
	text-underline-offset: 20%; /* 3.2px */
	text-underline-position: from-font;
	transition: opacity 0.3s ease;
}

.enlace-catalogo:hover {
	opacity: 0.7;
}

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

@media (max-width: 767px) {
	
	/* Ocultar desktop layout */
	.bloque-3-container.desktop-layout {
		display: none;
	}
	
	/* Mostrar mobile layout */
	.mobile-layout {
		display: block;
	}
	
	/* ================================================
	   SLIDE 3A: INTRO
	   ================================================ */
	
	.bloque-3-mobile-intro {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 16px;
		contain: layout style paint;
	}
	
	@supports (height: 100svh) {
		.bloque-3-mobile-intro {
			height: 100svh;
		}
	}
	
	.bloque-3-intro-contenido {
		width: 264px;
		max-width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	
	.bloque-3-mobile-intro .titulo-bloque-3 {
		font-size: 46px;
		letter-spacing: -0.46px;
		color: #F6F3E8;
		font-family: 'Utile Display';
		font-weight: 500;
		line-height: 100%;
		text-transform: uppercase;
		margin: 0 0 38px 0;
	}
	
	.bloque-3-mobile-intro .parrafo-general-bloque-3 {
		width: 100%;
		font-size: 14px;
		line-height: 135%;
		letter-spacing: -0.14px;
		color: #F6F3E8;
		font-family: 'Switzer Variable';
		font-weight: 400;
		margin: 0;
	}
	
	/* ================================================
	   SLIDE 3B: DYRBAL + SELECTA UNIFICADO
	   ================================================ */
	
	.bloque-3-mobile-unified {
		position: relative;
		width: 100%;
		height: 100vh;
		padding: 16px;
		background: #3B504E;
		transition: background-color 0.4s ease;
		will-change: background-color;
		display: flex;
		flex-direction: column;
		contain: layout style paint;
	}
	
	@supports (height: 100svh) {
		.bloque-3-mobile-unified {
			height: 100svh;
		}
	}
	
	/* Textos Fijos */
	.bloque-3-mobile-textos {
		display: flex;
		gap: 24px;
		margin-bottom: 16px;
	}
	
	.bloque-3-mobile-unified .texto-dyrbal,
	.bloque-3-mobile-unified .texto-dyrbal-selecta {
		font-size: 24px;
		letter-spacing: -0.48px;
		color: #F6F3E8;
		font-family: 'Utile Display';
		font-weight: 500;
		line-height: normal;
		margin: 0;
		transition: opacity 0.4s ease;
		will-change: opacity;
	}
	
	/* Estado inicial: Dyrbal activo */
	.bloque-3-mobile-unified .texto-dyrbal {
		opacity: 1;
	}
	
	.bloque-3-mobile-unified .texto-dyrbal-selecta {
		opacity: 0.3;
	}
	
	/* Contenedor de Imagen */
	.bloque-3-mobile-imagen {
		position: relative;
		width: 100%;
		height: 52%;
		overflow: hidden;
		margin-bottom: 20px;
		cursor: pointer;
	}
	
	.bloque-3-mobile-imagen .imagenes-dyrbal-container {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
	
	/* Contenedor de imágenes Selecta */
	.bloque-3-mobile-imagen .imagenes-dyrbal-selecta-container {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
	
	.bloque-3-mobile-imagen .imagen-layer-dyrbal {
		position: absolute;
		inset: 0;
		width: 75%;
		height: auto;
		object-fit: cover;
		opacity: 0;
		will-change: opacity;
	}
	
	.bloque-3-mobile-imagen .imagen-layer-dyrbal-selecta {
		position: absolute;
		inset: 0;
		width: 75%;
		height: auto;
		object-fit: cover;
		opacity: 0;
		will-change: opacity;
	}
	
	/* Primera imagen de Dyrbal visible por defecto */
	.bloque-3-mobile-imagen .imagen-layer-dyrbal:first-child {
		opacity: 1;
	}
	
	/* Primera imagen de Selecta */
	.bloque-3-mobile-imagen .imagen-layer-dyrbal-selecta:first-child {
		opacity: 1;
	}
	
	/* Contenido Dinámico */
	.bloque-3-mobile-contenido {
		position: relative;
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 0;
	}
	
	/* Contenedores de contenido */
	.contenido-dyrbal-mobile,
	.contenido-dyrbal-selecta-mobile {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	
	/* Estado inicial: Dyrbal visible */
	.contenido-dyrbal-mobile {
		opacity: 1;
	}
	
	/* Estado inicial: Selecta oculto */
	.contenido-dyrbal-selecta-mobile {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s ease;
		will-change: opacity;
	}
	
	/* Subtítulos */
	.bloque-3-mobile-unified .subtitulo-dyrbal,
	.bloque-3-mobile-unified .subtitulo-dyrbal-selecta {
		font-size: 28px;
		line-height: 115%;
		letter-spacing: -0.56px;
		color: #F6F3E8;
		font-family: 'Utile Display';
		font-weight: 500;
		margin: 0 0 20px 0;
	}
	
	/* Párrafos */
	.bloque-3-mobile-unified .parrafo-dyrbal,
	.bloque-3-mobile-unified .parrafo-dyrbal-selecta {
		font-size: 14px;
		line-height: 135%;
		letter-spacing: -0.14px;
		color: #F6F3E8;
		font-family: 'Switzer Variable';
		font-weight: 400;
		margin: 0;
	}
	
	/* Enlaces con margin-top auto */
	.bloque-3-mobile-unified .enlace-catalogo {
		display: inline-block;
		font-size: 16px;
		letter-spacing: -0.48px;
		color: #F6F3E8;
		font-family: 'Utile Display';
		font-weight: 500;
		line-height: normal;
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: auto;
		text-decoration-thickness: 5.5%;
		text-underline-offset: 20%;
		text-underline-position: from-font;
		margin-top: auto;
	}
}