/* ==================================================
   PÁGINA DE SERVICIOS: INICIO
================================================== */

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

main{
	width:100%;
}


/* ==================================================
   HERO SERVICIOS: INICIO
================================================== */

.services-hero{
	position:relative;
	width:100%;
	height:100vh;
	min-height:600px;
	padding:0 100px;
	box-sizing:border-box;
	background-color:#272727;
	background-image:url("../imgs/hero-servicios.png");
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	color:var(--white);
	overflow:hidden;
}

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

.services-hero-title{
	margin:0;
	font-family:var(--font-title);
	font-weight:var(--extra-bold);
	text-align:center;
	color:var(--white);
}

/* Máscara que oculta el texto mientras se desplaza */

.services-hero-line{
	display:block;
	overflow:hidden;
}

/* Primera frase: comienza arriba y con 25 % de opacidad */

.services-hero-title-small{
	display:block;
	font-size:48px;
	line-height:52px;
	opacity:0.25;
	transform:translateY(-35px);

	transition:
		opacity 0.9s ease,
		transform 0.9s cubic-bezier(0.22,1,0.36,1);

	will-change:opacity,transform;
}

/* Segunda frase: comienza debajo de la máscara */

.services-hero-title-large{
	display:block;
	padding-bottom:8px;
	font-size:75px;
	line-height:75px;
	opacity:1;
	transform:translateY(110%);

	transition:
		transform 1s cubic-bezier(0.22,1,0.36,1);

	transition-delay:0.12s;
	will-change:transform;
}

/* Estado final de la primera frase */

.services-hero-title.hero-reveal.is-visible
.services-hero-title-small{
	opacity:1;
	transform:translateY(0);
}

/* Estado final de la segunda frase */

.services-hero-title.hero-reveal.is-visible
.services-hero-title-large{
	opacity:1;
	transform:translateY(0);
}

/* Accesibilidad */

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

	.services-hero-title-small,
	.services-hero-title-large{
		opacity:1;
		transform:none;
		transition:none;
	}
}

/* ==================================================
   HERO SERVICIOS: FIN
================================================== */


/* ==================================================
   ESTRUCTURA GENERAL DE SERVICIOS: INICIO
================================================== */

.service-section{
	position:relative;
	width:100%;
	height:620px;
	padding:0 100px;
	box-sizing:border-box;
	overflow:hidden;
	color:var(--white);
}

.service-section-red{
	background:var(--red);
}

.service-section-dark{
	background:#272727;
}

.service-container{
	position:relative;
	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;
	z-index:2;
}

.service-content{
	width:100%;
	position:relative;
	z-index:3;
}

.service-section-left .service-content{
	grid-column:1 / 6;
	text-align:left;
	justify-self:start;
}

.service-section-right .service-content{
	grid-column:8 / 13;
	text-align:center;
	justify-self:end;
}

.service-title{
	margin:0 0 18px;
	font-family:var(--font-title);
	font-size:48px;
	line-height:47px;
	font-weight:var(--extra-bold);
	color:var(--white);
}

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

.service-button{
	min-width:112px;
	height:30px;
	padding:0 18px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	border:0;
	border-radius:8px;
	font-family:var(--font-text);
	font-size:12px;
	line-height:14px;
	font-weight:var(--medium);
	text-decoration:none;
	color:var(--white);
	background:var(--blue);
	transition:background .3s ease;
}

.service-button:hover{
	background:#14233E;
}

/* ==================================================
   ESTRUCTURA GENERAL DE SERVICIOS: FIN
================================================== */


/* ==================================================
   SERVICIO BRANDING: INICIO
================================================== */

.branding-service{
	position:relative;
	width:calc(100% - 40px);
	height:480px;
	margin:50px 20px 0;
	padding:0;
	box-sizing:border-box;
	background:var(--red);
	color:var(--white);
	overflow:hidden;
}

.branding-service-container{
	position:relative;
	width:100%;
	height:480px;
	margin:0;
}

.branding-service-image{
	position:absolute;
	top:0;
	right:0;
	width:74%;
	height:480px;
	background-color:#272727;
	background-image:url("../imgs/Servicios-01-Branding.png");
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	z-index:1;
}

.branding-service-card{
	position:absolute;
	top:50%;
	left:100px;
	width:500px;
	padding:35px 45px;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
	transform:translateY(-50%);
	background:var(--red);
	z-index:2;
}

.branding-service-card .service-title{
	margin:0 0 18px;
	font-family:var(--font-title);
	font-size:48px;
	line-height:48px;
	font-weight:var(--extra-bold);
	color:var(--white);
}

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

/* TÍTULO: se desplaza desde la izquierda */

.branding-service-card .service-title.reveal-left{
	opacity:0.5;
	transform:translateX(-30px);

	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.22,1,0.36,1);

	will-change:opacity,transform;
}

.branding-service-card .service-title.reveal-left.is-visible{
	opacity:1;
	transform:translateX(0);
}

/* TEXTO: solamente cambia de opacidad, no se mueve */

.branding-service-card .service-text.reveal-opacity{
	opacity:0.5;
	transform:none;
	transition:opacity 0.7s ease 0.12s;
	will-change:opacity;
}

.branding-service-card .service-text.reveal-opacity.is-visible{
	opacity:1;
	transform:none;
}

/* Accesibilidad */

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

	.branding-service-card .service-title.reveal-left,
	.branding-service-card .service-text.reveal-opacity{
		opacity:1;
		transform:none;
		transition:none;
	}
}

/* ==================================================
   SERVICIO BRANDING: FIN
================================================== */


/* ==================================================
   ESTRATEGIA DE NEGOCIO: INICIO
================================================== */

.business-service{
	position:relative;
	width:100%;
	height:480px;
	margin:20px 0;
	padding:0;
	box-sizing:border-box;
	background:var(--red);
	color:var(--white);
	overflow:hidden;
}

.business-service-container{
	position:relative;
	width:100%;
	height:480px;
	margin:0;
}

.business-service-image{
	position:absolute;
	top:0;
	left:0;
	width:74%;
	height:480px;
	background-color:#272727;
	background-image:url("../imgs/Servicios-02-Negocios.png");
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	z-index:1;
}

.business-service-card{
	position:absolute;
	top:50%;
	right:100px;
	width:500px;
	height:370px;
	padding:20px 45px;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	justify-content:center;
	transform:translateY(-50%);
	text-align:right;
	background:var(--red);
	z-index:2;
}

.business-service-card .service-title{
	margin:0 0 18px;
	font-family:var(--font-title);
	font-size:48px;
	line-height:48px;
	font-weight:var(--extra-bold);
	text-align:right;
	color:var(--white);
}

.business-service-card .service-text{
	margin:0 0 20px;
	font-family:var(--font-text);
	font-size:15px;
	line-height:24px;
	font-weight:var(--regular);
	text-align:right;
	color:var(--white);
}

.business-service-card .service-button{
	align-self:flex-end;
}

/* TÍTULO: desplazamiento de derecha a izquierda */

.business-service-card .service-title.reveal-left{
	opacity:0.5;
	transform:translateX(30px);

	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.22,1,0.36,1);

	will-change:opacity,transform;
}

.business-service-card .service-title.reveal-left.is-visible{
	opacity:1;
	transform:translateX(0);
}

/* TEXTO: solamente cambia de opacidad, no se mueve */

.business-service-card .service-text.reveal-opacity{
	opacity:0.5;
	transform:none;
	transition:opacity 0.7s ease 0.12s;
	will-change:opacity;
}

.business-service-card .service-text.reveal-opacity.is-visible{
	opacity:1;
	transform:none;
}

/* Accesibilidad */

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

	.business-service-card .service-title.reveal-left,
	.business-service-card .service-text.reveal-opacity{
		opacity:1;
		transform:none;
		transition:none;
	}
}

/* ==================================================
   ESTRATEGIA DE NEGOCIO: FIN
================================================== */


/* ==================================================
   ESTRATEGIA FINANCIERA: INICIO
================================================== */

.finance-service{
	position:relative;
	width:100%;
	height:480px;
	margin-top:40px;
	margin-bottom:20px;
	padding:0;
	box-sizing:border-box;
	background:var(--red);
	color:var(--white);
	overflow:hidden;
}

.finance-service-container{
	position:relative;
	width:100%;
	height:480px;
	margin:0;
}

.finance-service-image{
	position:absolute;
	top:0;
	right:0;
	width:74%;
	height:480px;
	background-color:#272727;
	background-image:url("../imgs/Servicios-03-Finanzas.png");
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	z-index:1;
}

.finance-service-card{
	position:absolute;
	top:50%;
	left:100px;
	width:600px;
	min-height:380px;
	height:auto;
	padding:35px 45px;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
	transform:translateY(-50%);
	background:var(--red);
	z-index:2;
}

.finance-service-card .service-title{
	margin:0 0 18px;
	font-family:var(--font-title);
	font-size:48px;
	line-height:48px;
	font-weight:var(--extra-bold);
	color:var(--white);
}

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

/* TÍTULO: desplazamiento desde la izquierda */

.finance-service-card .service-title.reveal-left{
	opacity:0.5;
	transform:translateX(-30px);

	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.22,1,0.36,1);

	will-change:opacity,transform;
}

.finance-service-card .service-title.reveal-left.is-visible{
	opacity:1;
	transform:translateX(0);
}

/* TEXTO: solamente cambia de opacidad */

.finance-service-card .service-text.reveal-opacity{
	opacity:0.5;
	transform:none;
	transition:opacity 0.7s ease 0.12s;
	will-change:opacity;
}

.finance-service-card .service-text.reveal-opacity.is-visible{
	opacity:1;
	transform:none;
}

/* Accesibilidad */

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

	.finance-service-card .service-title.reveal-left,
	.finance-service-card .service-text.reveal-opacity{
		opacity:1;
		transform:none;
		transition:none;
	}
}

/* ==================================================
   ESTRATEGIA FINANCIERA: FIN
================================================== */


/* ==================================================
   ESTRATEGIA COMERCIAL: INICIO
================================================== */

.commercial-service{
	position:relative;
	width:100%;
	height:480px;
	margin-top:40px;
	margin-bottom:20px;
	padding:0;
	box-sizing:border-box;
	background:var(--red);
	color:var(--white);
	overflow:hidden;
}

.commercial-service-container{
	position:relative;
	width:100%;
	height:480px;
	margin:0;
}

.commercial-service-image{
	position:absolute;
	top:0;
	left:0;
	width:74%;
	height:480px;
	background-color:#272727;
	background-image:url("../imgs/Servicios-04-Estrategia-Comercial.png");
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	z-index:1;
}

.commercial-service-card{
	position:absolute;
	top:50%;
	right:100px;
	width:500px;
	min-height:350px;
	height:auto;
	padding:25px 45px;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	justify-content:center;
	transform:translateY(-50%);
	text-align:right;
	background:var(--red);
	z-index:2;
}

.commercial-service-card .service-title{
	margin:0 0 18px;
	font-family:var(--font-title);
	font-size:48px;
	line-height:48px;
	font-weight:var(--extra-bold);
	text-align:right;
	color:var(--white);
}

.commercial-service-card .service-text{
	margin:0 0 22px;
	font-family:var(--font-text);
	font-size:15px;
	line-height:23px;
	font-weight:var(--regular);
	text-align:right;
	color:var(--white);
}

.commercial-service-card > .service-button{
	width:140px;
	min-width:140px;
	height:36px;
	padding:0 18px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	align-self:flex-end;
	flex-shrink:0;
	box-sizing:border-box;
	border:0;
	border-radius:8px;
	font-family:var(--font-text);
	font-size:12px;
	line-height:14px;
	font-weight:var(--medium);
	text-decoration:none;
	color:var(--white);
	background:var(--blue);
	transition:background .3s ease;
}

.commercial-service-card > .service-button:hover{
	background:#14233E;
}

/* TÍTULO: desplazamiento de derecha a izquierda */

.commercial-service-card .service-title.reveal-left{
	opacity:0.5;
	transform:translateX(30px);

	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.22,1,0.36,1);

	will-change:opacity,transform;
}

.commercial-service-card .service-title.reveal-left.is-visible{
	opacity:1;
	transform:translateX(0);
}

/* TEXTO: solamente cambia de opacidad, no se mueve */

.commercial-service-card .service-text.reveal-opacity{
	opacity:0.5;
	transform:none;
	transition:opacity 0.7s ease 0.12s;
	will-change:opacity;
}

.commercial-service-card .service-text.reveal-opacity.is-visible{
	opacity:1;
	transform:none;
}

/* Accesibilidad */

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

	.commercial-service-card .service-title.reveal-left,
	.commercial-service-card .service-text.reveal-opacity{
		opacity:1;
		transform:none;
		transition:none;
	}
}

/* ==================================================
   ESTRATEGIA COMERCIAL: FIN
================================================== */


/* ==================================================
   FORMAS GEOMÉTRICAS: INICIO
================================================== */

.service-decoration{
	position:absolute;
	z-index:1;
}

.service-decoration-dark{
	top:70px;
	right:0;
	width:66%;
	height:480px;
	background:#272727;
}

.service-decoration-dark::before{
	content:'';
	position:absolute;
	top:0;
	left:-150px;
	width:150px;
	height:90px;
	background:#272727;
}

.service-decoration-dark::after{
	content:'';
	position:absolute;
	left:-150px;
	bottom:0;
	width:150px;
	height:90px;
	background:#272727;
}

.service-decoration-red{
	top:90px;
	right:0;
	width:52%;
	height:440px;
	background:var(--red);
}

.service-decoration-red::before{
	content:'';
	position:absolute;
	top:0;
	left:-130px;
	width:130px;
	height:90px;
	background:var(--red);
}

.service-decoration-red::after{
	content:'';
	position:absolute;
	left:-130px;
	bottom:0;
	width:130px;
	height:90px;
	background:var(--red);
}

/* ==================================================
   FORMAS GEOMÉTRICAS: FIN
================================================== */


/* ==================================================
   CONSULTA SERVICIOS: INICIO
================================================== */

.services-query{
	width:100%;
	height:190px;
	padding:0 100px;
	box-sizing:border-box;
	background:var(--red);
}

.services-query-container{
	width:100%;
	max-width:1240px;
	height:100%;
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
}

.services-query-form{
	width:100%;
	max-width:500px;
}

.services-query-label{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

.services-query-input{
	width:100%;
	height:38px;
	padding:0 20px;
	box-sizing:border-box;
	border:0;
	border-radius:12px;
	outline:none;
	font-family:var(--font-text);
	font-size:12px;
	line-height:16px;
	font-weight:var(--regular);
	color:#333333;
	background:var(--white);
}

.services-query-input::placeholder{
	color:#999999;
	opacity:1;
}

.services-query-input:focus{
	outline:none;
	box-shadow:none;
	border:none;
}

/* ==================================================
   CONSULTA SERVICIOS: FIN
================================================== */


html{
	scroll-behavior:smooth;
}

.service-anchor{
	scroll-margin-top:100px;
}



/* ==================================================
   SERVICIOS RESPONSIVE: TABLET
================================================== */

@media(max-width:900px){
	.services-hero{
		padding:0 40px;
	}

	.services-hero-title-small{
		font-size:30px;
		line-height:33px;
	}

	.services-hero-title-large{
		font-size:46px;
		line-height:47px;
	}

	.service-section{
		padding:0 40px;
	}

	.service-section-left .service-content{
		grid-column:1 / 7;
	}

	.service-section-right .service-content{
		grid-column:7 / 13;
	}

	.service-title{
		font-size:40px;
		line-height:40px;
	}

	.service-decoration-dark{
		width:60%;
	}

	.service-decoration-red{
		width:55%;
	}

	.services-query{
		padding:0 40px;
	}
}


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

@media(max-width:650px){
	.services-hero{
		height:100vh;
		min-height:560px;
		padding:0 20px;
	}

	.services-hero-container{
		padding-bottom:90px;
	}

	.services-hero-title-small{
		font-size:23px;
		line-height:26px;
	}

	.services-hero-title-large{
		font-size:34px;
		line-height:36px;
	}

	.service-section{
		height:auto;
		min-height:540px;
		padding:70px 20px;
	}

	.service-container{
		display:block;
	}

	.service-content{
		max-width:450px;
	}

	.service-section-left .service-content{
		text-align:left;
	}

	.service-section-right .service-content{
		margin-left:auto;
		text-align:right;
	}

	.service-title{
		font-size:34px;
		line-height:35px;
	}

	.service-text{
		font-size:15px;
		line-height:23px;
	}

	.service-decoration-dark{
		top:40px;
		width:55%;
		height:calc(100% - 80px);
		opacity:.5;
	}

	.service-decoration-dark::before,
	.service-decoration-dark::after{
		left:-60px;
		width:60px;
		height:60px;
	}

	.service-decoration-red{
		top:40px;
		width:65%;
		height:calc(100% - 80px);
	}

	.service-decoration-red::before,
	.service-decoration-red::after{
		left:-60px;
		width:60px;
		height:60px;
	}

	.services-query{
		height:150px;
		padding:0 20px;
	}
}

/* ==================================================
   PÁGINA DE SERVICIOS: FIN
================================================== */