/* ==================================================
   PÁGINA NOSOTROS: INICIO
================================================== */

body{
	width:100%;
	margin:0;
	background:#272727;
	color:var(--white);
	overflow-x:hidden;
}

.about-page{
	width:100%;
}


/* ==================================================
   HERO NOSOTROS: INICIO
================================================== */

.about-hero{
	width:100%;
	height:215px;
	padding:0 100px;
	box-sizing:border-box;
	background-image:url("../imgs/Nosotros.png");
	background-size:100% auto;
	background-position:center;
	background-repeat:no-repeat;
	color:var(--white);
}

.about-hero-container{
	width:100%;
	max-width:1240px;
	height:100%;
	margin:0 auto;
	padding-bottom:20px;
	box-sizing:border-box;
	display:flex;
	align-items:flex-end;
}

.about-hero-title{
	margin:0;
	font-family:var(--font-title);
	font-size:52px;
	line-height:52px;
	font-weight:var(--extra-bold);
	color:var(--white);
}

/* ==================================================
   HERO NOSOTROS: FIN
================================================== */


/* ==================================================
   FRASE PRINCIPAL: INICIO
================================================== */

.about-statement{
	width:100%;
	height:385px;
	padding:0 100px;
	box-sizing:border-box;
	background:var(--red);
	color:var(--white);
	overflow:hidden;
}

.about-statement-container{
	width:100%;
	max-width:700px;
	height:100%;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
}

/* ==================================================
   MÁSCARAS DE LAS LÍNEAS
================================================== */

.about-statement-line-mask{
	width:100%;
	height:2px;
	overflow:hidden;
}

.about-statement-line{
	width:100%;
	height:2px;
	background:var(--white);
	will-change:transform;
}

.about-statement-line-top{
	transform:translateX(-101%);
	transition:
		transform 0.9s cubic-bezier(0.22,1,0.36,1);
}

.about-statement-line-bottom{
	transform:translateX(101%);
	transition:
		transform 0.9s cubic-bezier(0.22,1,0.36,1) 0.18s;
}

/* ==================================================
   MÁSCARA DE TODA LA FRASE
================================================== */

.about-statement-text-mask{
	width:100%;
	margin:22px 0;
	overflow:hidden;
}

.about-statement-text{
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	transform:translateY(110%);
	transition:
		transform 0.9s cubic-bezier(0.22,1,0.36,1) 0.12s;
	will-change:transform;
}

.about-statement-intro{
	margin:0 0 4px;
	font-family:var(--font-text);
	font-size:18px;
	line-height:24px;
	font-weight:var(--bold);
	color:var(--white);
}

.about-statement-title{
	margin:0 0 3px;
	font-family:var(--font-text);
	font-size:48px;
	line-height:52px;
	font-weight:var(--bold);
	color:var(--white);
}

.about-statement-closing{
	margin:0;
	font-family:var(--font-text);
	font-size:18px;
	line-height:24px;
	font-weight:var(--bold);
	color:var(--white);
}

/* ==================================================
   ESTADO FINAL DE LA ANIMACIÓN
================================================== */

.statement-reveal.is-visible
.about-statement-line-top{
	transform:translateX(0);
}

.statement-reveal.is-visible
.about-statement-text{
	transform:translateY(0);
}

.statement-reveal.is-visible
.about-statement-line-bottom{
	transform:translateX(0);
}

/* ==================================================
   ACCESIBILIDAD
================================================== */

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

	.about-statement-line-top,
	.about-statement-line-bottom,
	.about-statement-text{
		transform:none;
		transition:none;
	}
}

/* ==================================================
   FRASE PRINCIPAL: FIN
================================================== */


/* ==================================================
   MARCAS LIDERANDO PERSONAS: INICIO
================================================== */

.about-story{
	position:relative;
	width:100%;
	height:1255px;
	padding:0 100px;
	box-sizing:border-box;
	background-image:url("../imgs/Marcas-nosotros.png");
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	color:var(--white);
	overflow:hidden;
}

.about-story-container{
	position:relative;
	width:100%;
	max-width:1240px;
	height:100%;
	margin:0 auto;
}

/* ==================================================
   TÍTULO
================================================== */

.about-story-quote{
	position:absolute;
	top:115px;
	left:0;
	margin:0;
	font-family:var(--font-title);
	font-size:48px;
	line-height:48px;
	font-weight:var(--extra-bold);
	color:var(--white);
}

.about-story-quote.story-reveal-opacity{
	opacity:0.25;
	transition:opacity 1.4s ease;
	will-change:opacity;
}

.about-story-quote.story-reveal-opacity.is-visible{
	opacity:1;
}

/* ==================================================
   CONFIGURACIÓN GENERAL DE LOS TEXTOS
================================================== */

.about-story-text{
	margin:0;
	font-family:var(--font-text);
	font-size:15px;
	line-height:24px;
	font-weight:var(--regular);
	color:var(--white);
}

/* ==================================================
   PRIMER TEXTO
================================================== */

.about-story-text-one-trigger{
	position:absolute;
	top:285px;
	left:0;
	width:310px;
}

.about-story-text-one{
	width:100%;
	text-align:left;
	opacity:0.5;
	transform:translate3d(-80vw,0,0);
	transition:
		opacity 1.25s ease,
		transform 1.4s cubic-bezier(0.16,1,0.3,1);
	will-change:opacity,transform;
}

.about-story-text-one-trigger.is-visible
.about-story-text-one{
	opacity:1;
	transform:translate3d(0,0,0);
}

/* ==================================================
   SEGUNDO TEXTO CON MÁSCARA
================================================== */

.about-story-text-two-mask{
	position:absolute;
	top:650px;
	left:50%;
	width:430px;
	overflow:hidden;
	transform:translateX(-50%);
}

.about-story-text-two{
	width:100%;
	text-align:center;
	opacity:0.5;
	transform:translateY(110%);
	transition:
		opacity 1.7s ease,
		transform 1.9s cubic-bezier(0.16,1,0.3,1);
	will-change:opacity,transform;
}

.about-story-text-two-mask.is-visible
.about-story-text-two{
	opacity:1;
	transform:translateY(0);
}

/* ==================================================
   TERCER TEXTO
================================================== */

.about-story-text-three-trigger{
	position:absolute;
	right:35px;
	bottom:135px;
	width:330px;
}

.about-story-text-three{
	width:100%;
	text-align:right;
	opacity:0.5;
	transform:translate3d(80vw,0,0);
	transition:
		opacity 1.25s ease,
		transform 1.4s cubic-bezier(0.16,1,0.3,1);
	will-change:opacity,transform;
}

.about-story-text-three-trigger.is-visible
.about-story-text-three{
	opacity:1;
	transform:translate3d(0,0,0);
}

/* ==================================================
   ACCESIBILIDAD
================================================== */

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

	.about-story-quote.story-reveal-opacity,
	.about-story-text-one,
	.about-story-text-two,
	.about-story-text-three{
		opacity:1;
		transform:none;
		transition:none;
	}
}

/* ==================================================
   MARCAS LIDERANDO PERSONAS: FIN
================================================== */


/* ==================================================
   VALOR CREADO: INICIO
================================================== */

.about-value{
	width:100%;
	height:540px;
	padding:0 100px;
	box-sizing:border-box;
	background-image:url("../imgs/Valor-Creado.png");
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	color:var(--white);
	overflow:hidden;
}

.about-value-container{
	width:100%;
	max-width:1240px;
	height:100%;
	margin:0 auto;
	display:grid;
	grid-template-columns:repeat(12,minmax(0,1fr));
	column-gap:20px;
	align-items:center;
}

.about-value-title-block{
	position:relative;
	width:100%;
	grid-column:1 / 5;
}

/* ==================================================
   TÍTULO CON MÁSCARA
================================================== */

.about-value-title-mask{
	width:100%;
	overflow:hidden;
}

.about-value-title{
	margin:0;
	font-family:var(--font-title);
	font-size:54px;
	line-height:54px;
	font-weight:var(--extra-bold);
	color:var(--white);
	opacity:0.25;
	transform:translateX(-35px);
	clip-path:inset(0 100% 0 0);
	transition:
		clip-path 1.25s cubic-bezier(0.22,1,0.36,1),
		transform 1.25s cubic-bezier(0.22,1,0.36,1),
		opacity 1.25s ease;
	will-change:clip-path,transform,opacity;
}

.about-value-container.is-visible
.about-value-title{
	opacity:1;
	transform:translateX(0);
	clip-path:inset(0 0 0 0);
}

/* ==================================================
   LÍNEA
================================================== */

.about-value-line{
	width:380px;
	height:3px;
	margin-top:18px;
	margin-left:-100px;
	background:var(--white);
	opacity:0.25;
	transform:translate3d(-110vw,0,0);
	transition:
		transform 1.35s cubic-bezier(0.16,1,0.3,1) 0.12s,
		opacity 1.35s ease 0.12s;
	will-change:transform,opacity;
}

.about-value-container.is-visible
.about-value-line{
	opacity:1;
	transform:translate3d(0,0,0);
}

/* ==================================================
   CONTENIDO
================================================== */

.about-value-content{
	width:100%;
	grid-column:7 / 12;
	opacity:0;
	transition:opacity 1s ease 0.65s;
	will-change:opacity;
}

.about-value-container.is-visible
.about-value-content{
	opacity:1;
}

.about-value-content p{
	margin:0 0 22px;
	font-family:var(--font-text);
	font-size:15px;
	line-height:24px;
	font-weight:var(--regular);
	color:var(--white);
}

.about-value-content p:last-child{
	margin-bottom:0;
}

/* ==================================================
   ACCESIBILIDAD
================================================== */

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

	.about-value-title,
	.about-value-line,
	.about-value-content{
		opacity:1;
		transform:none;
		clip-path:none;
		transition:none;
	}
}

/* ==================================================
   VALOR CREADO: FIN
================================================== */


/* ==================================================
   CTA NOSOTROS: INICIO
================================================== */

.about-cta{
	width:100%;
	height:240px;
	padding:0 100px;
	box-sizing:border-box;
	background:var(--red);
	color:var(--white);
}

.about-cta-container{
	width:100%;
	max-width:1240px;
	height:100%;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
}

.about-cta-title{
	margin:0 0 16px;
	font-family:var(--font-text);
	font-size:20px;
	line-height:26px;
	font-weight:var(--bold);
	color:var(--white);
}

.about-cta-button{
	min-width:105px;
	height:28px;
	padding:0 18px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	border:0;
	border-radius:7px;
	font-family:var(--font-text);
	font-size:11px;
	line-height:14px;
	font-weight:var(--medium);
	text-decoration:none;
	color:var(--white);
	background:var(--blue);
	transition:background 0.3s ease;
}

.about-cta-button:hover{
	background:#14233e;
}

/* ==================================================
   CTA NOSOTROS: FIN
================================================== */


/* ==================================================
   NOSOTROS RESPONSIVE: TABLET
================================================== */

@media(max-width:900px){

	.about-hero{
		padding:0 40px;
		background-size:cover;
	}

	.about-statement{
		padding:0 40px;
	}

	.about-story{
		padding:0 40px;
	}

	.about-story-text-three-trigger{
		right:0;
	}

	.about-value{
		padding:0 40px;
	}

	.about-value-title-block{
		grid-column:1 / 6;
	}

	.about-value-content{
		grid-column:7 / 13;
	}

	.about-value-line{
		width:calc(100% + 40px);
		margin-left:-40px;
	}

	.about-cta{
		padding:0 40px;
	}
}


/* ==================================================
   NOSOTROS RESPONSIVE: MÓVIL
================================================== */

@media(max-width:650px){

	.about-hero{
		height:190px;
		padding:0 20px;
	}

	.about-hero-title{
		font-size:40px;
		line-height:42px;
	}

	.about-statement{
		height:auto;
		min-height:385px;
		padding:60px 20px;
	}

	.about-statement-intro{
		font-size:16px;
		line-height:22px;
	}

	.about-statement-title{
		font-size:38px;
		line-height:42px;
	}

	.about-statement-closing{
		font-size:16px;
		line-height:22px;
	}

	.about-story{
		height:auto;
		padding:80px 20px;
	}

	.about-story-container{
		height:auto;
		display:flex;
		flex-direction:column;
		gap:70px;
	}

	.about-story-quote,
	.about-story-text-one-trigger,
	.about-story-text-two-mask,
	.about-story-text-three-trigger{
		position:static;
		width:100%;
		transform:none;
	}

	.about-story-quote{
		font-size:38px;
		line-height:40px;
	}

	.about-story-text-one,
	.about-story-text-two,
	.about-story-text-three{
		width:100%;
		max-width:420px;
		text-align:left;
	}

	.about-value{
		height:auto;
		min-height:540px;
		padding:70px 20px;
	}

	.about-value-container{
		display:flex;
		flex-direction:column;
		align-items:flex-start;
		justify-content:center;
		gap:60px;
	}

	.about-value-title{
		font-size:44px;
		line-height:45px;
	}

	.about-value-line{
		width:calc(100% + 20px);
		margin-left:-20px;
	}

	.about-value-content{
		width:100%;
	}

	.about-cta{
		height:240px;
		padding:0 20px;
	}
}

/* ==================================================
   PÁGINA NOSOTROS: FIN
================================================== */