/*--------------------------------------------------
	HERO HOME
--------------------------------------------------*/

.hero-home{
	position:relative;
	height:calc(100vh + 330px);
	padding:0;
	overflow:hidden;
}

.hero-home .hero-bg{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:140vh;
	z-index:1;
	will-change:transform;
}

.hero-home .hero-bg img{
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
	object-position:center;
}

.hero-home .hero-overlay{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:160vh;
	background:linear-gradient(
		to top,
		var(--blue) 0%,
		rgba(29,49,85,.95) 12%,
		rgba(29,49,85,.55) 28%,
		rgba(29,49,85,.20) 45%,
		rgba(29,49,85,0) 70%
	);
	z-index:2;
	pointer-events:none;
}

.hero-home .hero-content{
	position:absolute;
	left:80px;
	bottom:350px;
	width:calc(100% - 160px);
	max-width:700px;
	z-index:5;
}

.hero-home h1{
	margin:0 0 20px;
	line-height:.8;
}

/*--------------------------------------------------
	ANIMACIÓN: MARCAS
--------------------------------------------------*/

.hero-home .hero-title-main{
	display:block;
	font-family:var(--font-title);
	font-size:clamp(4.2rem,8vw,4rem);
	font-weight:var(--extra-bold);
	color:var(--white);

	opacity:0;
	transform:translate3d(-32px,0,0);

	animation:
		hero-home-title-in
		.9s
		cubic-bezier(.22,1,.36,1)
		.15s
		forwards;

	will-change:opacity,transform;
}

/*--------------------------------------------------
	ANIMACIÓN: LIDERANDO PERSONAS
--------------------------------------------------*/

.hero-home .hero-title-sub{
	display:block;
	margin-top:8px;
	font-family:var(--font-title);
	font-size:clamp(2.2rem,4vw,2.2rem);
	font-weight:var(--extra-bold);
	color:var(--white);

	opacity:0;
	transform:translate3d(-26px,0,0);

	animation:
		hero-home-title-in
		.9s
		cubic-bezier(.22,1,.36,1)
		.30s
		forwards;

	will-change:opacity,transform;
}

/*--------------------------------------------------
	ANIMACIÓN: TEXTO DESCRIPTIVO
--------------------------------------------------*/

.hero-home .hero-content p{
	max-width:500px;
	margin:0;
	font-family:var(--font-text);
	font-size:18px;
	font-weight:var(--regular);
	line-height:1.2;
	color:var(--white);

	opacity:0;

	animation:
		hero-home-text-in
		.85s
		ease
		.48s
		forwards;

	will-change:opacity;
}

/*--------------------------------------------------
	FOTOGRAMAS DE LAS ANIMACIONES
--------------------------------------------------*/

@keyframes hero-home-title-in{

	from{
		opacity:0;
		transform:translate3d(-32px,0,0);
	}

	to{
		opacity:1;
		transform:translate3d(0,0,0);
	}

}

@keyframes hero-home-text-in{

	from{
		opacity:0;
	}

	to{
		opacity:1;
	}

}

/*--------------------------------------------------
	TARJETAS DE SERVICIOS
--------------------------------------------------*/

.hero-home .services-grid{
	position:absolute;
	top:calc(100vh + 50px);
	left:50%;
	width:calc(100% - 80px);
	max-width:1200px;
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:30px;
	transform:translateX(-50%);
	z-index:30;
}

.hero-home .service{
	min-height:200px;
	padding:35px 25px;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	background:var(--blue);
	color:var(--white);
	text-decoration:none;
	transition:
		transform .35s ease,
		box-shadow .35s ease;
}

.hero-home .service:hover{
	transform:translateY(-6px);
	box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.hero-home .service-icon{
	width:75px;
	height:75px;
	display:block;
	margin:0 auto 10px;
	object-fit:contain;
}

.hero-home .service h3{
	margin:22px 0 8px;
	font-family:var(--font-title);
	font-size:15px;
	font-weight:var(--bold);
	line-height:1.15;
	color:var(--white);
}

.hero-home .service p{
	margin:0;
	font-family:var(--font-text);
	font-size:14px;
	font-weight:var(--regular);
	line-height:1.25;
	color:var(--white);
}

/*--------------------------------------------------
	ACCESIBILIDAD
--------------------------------------------------*/

@media (prefers-reduced-motion:reduce){

	.hero-home .hero-title-main,
	.hero-home .hero-title-sub,
	.hero-home .hero-content p{
		opacity:1;
		transform:none;
		animation:none;
	}

}

/*--------------------------------------------------
	SEPARADOR DEL HERO
--------------------------------------------------*/

.hero-divider{
	width:100%;
	height:40px;
	background:var(--blue);
}