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

html,
body{
	width:100%;
	height:100%;
	margin:0;
	overflow:hidden;
}

body{
	background:#272727;
	color:var(--white);
}

.contact-page{
	width:100%;
	height:100vh;
	height:100dvh;
	padding:70px 100px 25px;
	box-sizing:border-box;
	display:flex;
	background-image:url("../imgs/Contactanos.png");
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	color:var(--white);
}

.contact-page-container{
	width:100%;
	max-width:1240px;
	height:100%;
	margin:0 auto;
	padding:0;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	justify-content:center;
}

.contact-page-title{
	margin:0 0 45px;
	font-family:var(--font-title);
	font-size:18px;
	line-height:22px;
	font-weight:var(--bold);
	letter-spacing:8px;
	text-align:center;
	color:var(--white);
}

.contact-page-layout{
	width:100%;
	display:grid;
	grid-template-columns:repeat(12,minmax(0,1fr));
	column-gap:20px;
	align-items:start;
}


/* ==================================================
   FORMULARIO: INICIO
================================================== */

.contact-form-wrapper{
	width:100%;
	grid-column:2 / 7;
}

.contact-form{
	width:100%;
	display:flex;
	flex-direction:column;
	gap:16px;
}

.contact-form-row{
	width:100%;
	display:grid;
	grid-template-columns:1.3fr 1fr;
	gap:28px;
}

.contact-field{
	width:100%;
	height:34px;
	padding:0 18px;
	box-sizing:border-box;
	border:0;
	border-radius:10px;
	outline:none;
	box-shadow:none;
	font-family:var(--font-text);
	font-size:15px;
	line-height:23px;
	font-weight:var(--regular);
	color:#272727;
	background:var(--white);
}

.contact-field::placeholder{
	color:#AAAAAA;
	opacity:1;
}

.contact-field:focus{
	border:0;
	outline:none;
	box-shadow:none;
}

.contact-message{
	height:clamp(140px,22vh,190px);
	padding:13px 18px;
	resize:none;
}

.contact-submit{
	width:100%;
	height:34px;
	padding:0 20px;
	box-sizing:border-box;
	border:0;
	border-radius:10px;
	outline:none;
	cursor:pointer;
	font-family:var(--font-text);
	font-size:15px;
	line-height:23px;
	font-weight:var(--regular);
	color:var(--white);
	background:var(--blue);
	transition:background .3s ease;
}

.contact-submit:hover{
	background:#14233E;
}

/* ==================================================
   FORMULARIO: FIN
================================================== */


/* ==================================================
   INFORMACIÓN DE CONTACTO: INICIO
================================================== */

.contact-information{
	width:100%;
	grid-column:8 / 13;
	padding-top:0;
}

.contact-phone{
	width:100%;
	display:flex;
	align-items:center;
	gap:22px;
	text-decoration:none;
	color:var(--white);
}

.contact-phone-icon{
	width:32px;
	height:32px;
	flex:0 0 32px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.contact-phone-icon img{
	width:48px;
	height:48px;
	display:block;
	object-fit:contain;
}

.contact-phone-number{
	font-family:var(--font-text);
	font-size:42px;
	line-height:46px;
	font-weight:var(--medium);
	letter-spacing:8px;
	white-space:nowrap;
	color:var(--white);
}

.contact-details{
	width:100%;
	margin-top:38px;
	display:flex;
	flex-direction:column;
	gap:26px;
}

.contact-detail-item{
	display:flex;
	align-items:center;
	gap:22px;
	font-family:var(--font-text);
	font-size:15px;
	line-height:23px;
	font-weight:var(--bold);
	text-decoration:none;
	color:var(--white);
}

.contact-detail-icon{
	width:32px;
	height:27px;
	flex:0 0 32px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.contact-detail-icon img{
	width:28px;
	height:28px;
	display:block;
	object-fit:contain;
}

.contact-address{
	align-items:flex-start;
}

.contact-address > span:last-child{
	display:flex;
	flex-direction:column;
}

.contact-address strong{
	font-family:var(--font-text);
	font-size:15px;
	line-height:23px;
	font-weight:var(--bold);
	color:var(--white);
}

.contact-address small{
	font-family:var(--font-text);
	font-size:15px;
	line-height:23px;
	font-weight:var(--regular);
	color:var(--white);
}

/* ==================================================
   INFORMACIÓN DE CONTACTO: FIN
================================================== */


/* ==================================================
   CONTACTO RESPONSIVE: TABLET
================================================== */

@media(max-width:1000px){
	.contact-page{
		padding:0 40px;
	}

	.contact-page-container{
		padding-top:145px;
	}

	.contact-form-wrapper{
		grid-column:1 / 7;
	}

	.contact-information{
		grid-column:8 / 13;
	}

	.contact-phone-number{
		font-size:34px;
		line-height:38px;
		letter-spacing:5px;
	}
}


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

@media(max-width:700px){
	html,
	body{
		height:auto;
		overflow-x:hidden;
		overflow-y:auto;
	}

	.contact-page{
		height:auto;
		min-height:100vh;
		padding:120px 20px 70px;
	}

	.contact-page-container{
		height:auto;
		padding-top:0;
	}

	.contact-page-title{
		margin-bottom:50px;
		font-size:17px;
		line-height:21px;
		letter-spacing:5px;
	}

	.contact-page-layout{
		display:flex;
		flex-direction:column;
		gap:60px;
	}

	.contact-form-wrapper,
	.contact-information{
		width:100%;
	}

	.contact-form-row{
		grid-template-columns:1fr;
		gap:16px;
	}

	.contact-phone-number{
		font-size:30px;
		line-height:34px;
		letter-spacing:3px;
	}

	.contact-phone-icon{
		width:34px;
		height:34px;
		flex-basis:34px;
	}

	.contact-phone-icon img{
		width:34px;
		height:34px;
	}
}

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