﻿:root {
	--celeste: #589ad4;
	--azul: #25316e;
	--color_2: #305d6d;
	--p_color: #005d6e;
	--zona: 1234px;
	--verde: #338985;
}

*{
	padding: 0;
	outline: 0;
	margin: 0;
	border: 0;
	box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
	font-size: inherit;
	color: inherit;
	line-height: 1;
	font-family: 'Graphik';
}

.formulario_frm_terminos span {
	cursor: pointer
}
::-webkit-scrollbar-track
	{
		border-radius: 10px;
		background: rgba(0, 0, 0, 0.1);
		transition-duration: 0.7s;
	}

::-webkit-scrollbar
	{
		width: 10px;
		background: rgba(0, 0, 0, 0.1);
		transition-duration: 0.7s;
	}

::-webkit-scrollbar-thumb
	{
		border-radius: 10px;
		background-color: #000;
		border: 1px solid rgba(255, 255, 255, 0.5);
		transition-duration: 0.7s;
	}


::-webkit-scrollbar-thumb:hover
	{
		background-color: #000;
	}

::placeholder {
	color: #fff;
}

img{
	display: block;
	max-width: 100%;
}
a{
	text-decoration: none;
}

.contenedor_general{
	background: #e8e7e7;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.area_segura{
	width: 90%;
	max-width: 1440px;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
section{
	display: flex;
	justify-content: center;
}

.sec_title{
	background: linear-gradient(90deg, var(--verde) 0%, #0c9bd7 100%);
    -webkit-background-clip: text;
    font-size: 29px;
    font-weight: bold;
    color: transparent;
    text-transform: uppercase;
    text-align: center;
}
.d_center{
	display: flex;
	justify-content: center;
}
.eskinas{
	--med: 21px;
	position: relative;
	background: rgba(194, 189, 189, .4);
	border-radius: 11px;
}
.eskinas:before,
.eskinas:after{
	content: "";
	position: absolute;
	width: var(--med);
	height: var(--med);
}
.eskinas:before{
	top: 0;
	left: 0;
	transform: translate(-2px, -2px);
	background-image: url('../img/brd-right.png');
}
.eskinas:after{
	bottom: 0;
	right: 0;
	transform: translate(2px, 2px);
	background-image: url('../img/brd_left.png');
}



/*HEADER*/
	header{
		display: flex;
		justify-content: center;
		background: #d8d8d8;
		padding: 20px 0;
		width: 100%;
		height: 190px;
	}
	header .area_segura{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	

/*HOME*/
	#home{
		padding-top: 48px;
	}
	.banner{
		--form: 490px;
		display: grid;
		grid-template-columns: auto var(--form);
		/*grid-template-columns: auto 35.227%;*/
		gap: 20px;
		align-items: center;
	}
	.imagen_banner img{
		/*max-width: initial;*/
    	/*width: 109.6%;*/
	}
	.form{
		max-width: 630px;
		display: flex;
		flex-direction: column;
		gap: 40px;
		padding: 48px 40px;
		position: relative;
		color: #fff;
		border-radius: 26px;
		background: linear-gradient(308deg,#578884 0%, var(--celeste) 100%);
	}
	.title_form{
		text-align: center;
		font-size: 18.75px;
		line-height: 1.2;
		text-transform: uppercase;
		white-space: pre-line;
	}
	form{
		display: flex;
		flex-direction: column;
		gap: 24px;
	}
	.list_campos{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 16px;
	}
	.label_txt{
		display: block;
		width: 100%;
		border-bottom: 2px solid #fff;
	}
	.label_txt input,
	.label_txt select{
		background: transparent;
		width: 100%;
		padding: 7px 10px;
		font-size: 14px;
		text-transform: uppercase;
	}
	
	.list_radio{
		display: flex;
		flex-direction: column;
		gap: 16px;
		width: 100%;
		max-width: 350px;
		margin: 0 auto;
	}
	.item_radio{
		display: grid;
		grid-template-columns: auto 85px;
		align-items: flex-start;
		gap: 8px;
		max-width: 505px;
		font-size: 11.24px;
	}
	.item_radio_p{
		font-weight: 300;
		line-height: 1.2;
		text-transform: uppercase;
		max-width: 220px;
	}
	.radios,
	.label_radio{
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 6px;
	}
	
	.p_terminos{
		width: 90%;
		margin: 0 auto;
	}
	.p_terminos p{
		text-align: center;
		font-size: 10.42px;
		font-weight: 300;
	}
	.tyc{
		cursor: pointer;
	}

	.list_btns{
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.btn_enviar{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12px;
		background: #00d6b6;
		min-height: 50px;
		border-radius: 10px;
	}
	.btn_enviar p{
		font-weight: 700;
		text-align: center;
		color: #000;
	}

	.baner_mobile{
		display: none;
	}

/*MENSAJE*/
	.cdr_msj{
		display: flex;
		justify-content: center;
		background: var(--celeste);
		border-radius: 20px;
		color: #fff;
		padding: 20px 40px;
	}
	.div_zona{
		--per: 200px;
		width: 100%;
		max-width: var(--zona);
		display: grid;
		grid-template-columns: auto var(--per);
		align-items: center;
		justify-content: space-between;
	}
	.frase{
		width: 100%;
		max-width: 620px;
		font-size: 27px;
	}
	.frase p{
		--comi: 26px;
		position: relative;
	}
	.frase p:before,
	.frase p:after{
		content: "";
		display: inline-block;
		position: relative;
		width: var(--comi);
		height: var(--comi);
		background-size: cover;
	}
	.frase p:before{
		position: absolute;
		background-image: url('../img/comi01.png');
		transform: translateX(-100%);
		left: -5px;
	}
	.frase p:after{
		margin-left: 4px;
		background-image: url('../img/comi02.png');
	}
	.persona{
		width: var(--per);
		text-align: right;
	}
	.persona h3{
		font-weight: 600;
		font-size: 22.5px;
	}
	.persona p{
		font-weight: 300;
		font-size: 16.7px;
		line-height: initial;
	}


	.cdr_msj_v2{
		background-image: url('../img/fd_pacifico.png');
		background-position: right;
		background-size: cover;
		background-color: #00404e;
		padding: 20px 36px;
		display: flex;
		min-height: 142px;
		border-radius: 15px;
	}
	.frase_v2{
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 10px;
		width: 65%;
		max-width: 740px;
	}
	.frase_v2 h3{
		color: #fff;
		font-size: 30px;
	}
	.frase_v2 p{
		font-size: 26px;
		font-weight: 600;
		color: #9bdbf1;
		line-height: initial;
	}



/*RAZONES*/
	#razones{
		padding-bottom: 28px;
	}
	.list_razones{
		display: flex;
		justify-content: center;
		gap: 20px;
	}
	.item_razon{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 263px;
		padding: 20px;
		background: rgba(132, 179, 173, .35);
		border-radius: 15px;
		position: relative;
	}
	.item_razon:nth-child(2n){
		background: rgba(132, 179, 173, .6);
	}
	.ico_razon{
		display: flex;
		align-items: center;
		height: 64px;
	}
	.txt_razon{
		width: 100%;
		display: flex;
		align-items: center;
		min-height: 120px;
	}
	.txt_razon p{
		width: 100%;
		text-align: center;
		color: var(--p_color);
		font-size: 18.7px;
		line-height: initial;
		white-space: pre-line;
	}
	.barra{
		width: 134px;
		height: 5px;
		border-radius: 2.5px;
		background: var(--color_2);
	}

/*MALLA*/
	#malla{
		background: #fff;
		padding: 48px 0;
	}
	.list_malla{
		width: 100%;
		max-width: var(--zona);
		margin: 0 auto;
	}
	.col-malla{
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 2px 15px;
	}
	.mmala_item{
		display: grid;
		grid-template-columns: 30px auto;
		gap: 20px;
		align-items: center;
		min-height: 97px;
		padding: 20px 30px;
	}
	.mmala_item p{
		color: var(--p_color);
		font-size: 21px;
		max-width: 417px;
		white-space: pre-line;
	}
	.number{
		font-style: italic;
		font-size: 38px;
		font-weight: 700;
		color: var(--color_2);
	}
	.col-extra{}
	.col-extra .mmala_item{
		background: rgba(147, 211, 227, .4);
		grid-template-columns: 70px auto;
		align-items: flex-start;
	}
	.txt{
		font-style: italic;
		font-size: 22px;
		font-weight: 600;
		color: var(--p_color);
	}
	.col-extra .mmala_item{}

	.btn_brochure{
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 28px;
		background: #0081bf;
		width: 296px;
		height: 65px;
		border-radius: 15px;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, .27);
	}
	.btn_brochure p{
		color: #fff;
		font-weight: bold;
		font-size: 18.75px;
		white-space: pre-line;
	}
	.slick-prev,
	.slick-next{
		--med: 47px;
		width: var(--med);
		height: var(--med);
		z-index: 9;
	}
	.slick-prev{
		transform: translate(-100%, -50%);
	}
	.slick-next{
		transform: translate(100%, -50%);
	}
	
	.slick-prev:before, 
	.slick-next:before{
		content: "";
		width: var(--med);
		height: var(--med);
		position: absolute;
		top: 0;
		left: 0;
		opacity: 1;
		background-size: cover;
	}
	.slick-prev:before{
		background-image: url('../img/arrow-prev.png');
	}
	.slick-next:before{
		background-image: url('../img/arrow-next.png');
	}

/*INFORMACION*/
	#informacion{}
	.doble_info{
		width: 100%;
		max-width: var(--zona);
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}
	.info_div{
		display: flex;
		flex-direction: column;
		gap: 32px;
		background-size: 100% 100%;
		background-image: url('../img/fd_cuadro.png');
		border-radius: 16px;
		padding: 36px 40px;
		color: #fff;
		font-size: 18.7px;
		min-height: 335px;
	}
	.cdr_info{
		background-color: #214754;
	}
	.cdr_req{
		background-color: #193956;
		background-image: url('../img/fd_requisitos.png');
	}
	.title_info{
		font-weight: bold;
		font-size: 25px;
		color: #85dfd8;
		text-transform: uppercase;
		text-align: center;
	}
	.list_info{
		display: flex;
		justify-content: space-between;
		gap: 20px;
	}
	.col-info{
		display: flex;
		flex-direction: column;
		gap: 24px;
	}
	.g_info{
		display: flex;
		flex-direction: column;
		gap: 4px;
	}
	.g_info h3{
		text-transform: uppercase;
		white-space: pre-line;
	}
	.g_info p{
		white-space: pre-line;
		line-height: initial;
	}
	.list_req{
		display: flex;
		flex-direction: column;
		gap: 48px;
		padding-left: 32px;
	}
	.list_req li{
		padding-left: 8px;
		list-style-image: url('../img/bullet.png');
		line-height: initial;
	}

/*ASESOR*/
	
	.contacto{
		width: 100%;
		max-width: var(--zona);
		margin: 0 auto;
		background-image: url('../img/fd_contacto.png');
		background-size: cover;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: center;
		color: #fff;
		padding: 20px 0;
		min-height: 182px;
	}
	.txt_contacto{
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 24px;
		position: relative;
		padding: 0 28px;
	}
	.txt_contacto p{
		font-size: 25px;
		font-weight: bold;
		text-transform: uppercase;
		max-width: 350px;
	}
	.txt_contacto:before{
		content: "";
		width: 6px;
		height: 84px;
		background: #fff;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(50%, -50%);
	}
	.info_contacto{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding: 0 28px;
	}
	.item_contacto{
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: 100%;
		max-width: 426px;
	}
	.item_contacto h3{
		font-size: 20px;
		font-weight: bold;
		text-transform: uppercase;
	}
	.list_datos{
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	.item_dato{
		--ico: 30px;
		display: grid;
		grid-template-columns: var(--ico) auto;
		align-items: center;
		gap: 8px;
	}
	.ico_dato{
		width: var(--ico);
	}
	.item_dato a{}


/*FOOTER*/

	footer{
		background: #000;
	}
	.barra_foter{
		width: 100%;
		height: 16px;
		background: linear-gradient(90deg, var(--verde) 0%, #0c9bd7 100%);
	}
	.footer{
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 136px;
		padding: 20px;

	}
	.footer a{
		color: #0094ae;
		font-size: 34px;
		font-weight: bold;
	}


/*POP*/
	.overlay {
	    background: rgba(255, 255, 255, .5);
	    position: fixed;
	    width: 100%;
	    height: 100%;
	    z-index: 990;
	    left: 0;
	    top: 0;
	    display: none;
	}
	.modal {
	    position: fixed;
	    display: none;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    z-index: 999;
	    max-height: calc(100vh - 30px);
	    overflow-y: auto;
	}
	.modal__terms {
	    background: #fff;
	    width: 95%;
	    max-width: 550px;
	    padding: 25px 30px;
	}
	.modal_content {
	    position: relative;
	    width: 100%;
	}
	.modal_close {
	    position: absolute;
	    right: -5px;
	    top: -5px;
	    width: 25px;
	    cursor: pointer;
	}
	.modal_info {
	    overflow-y: auto;
	    max-height: 90vh;
	}
	
	.modal_info h3 {
		color: #000;
	    text-align: center;
	    font-size: 1.4rem;
	    margin-bottom: 1rem;
	}


/*GRACIAS*/
	.gracias{
		width: 100%;
		max-width: 470px;
		display: flex;
		flex-direction: column;
		gap: 32px;
	}
	.t_gracias{
		background: linear-gradient(235deg, var(--verde) 0%, #0c9bd7 100%);
	    -webkit-background-clip: text;
	    font-size: 58px;
	    font-weight: bold;
	    color: transparent;
	    text-transform: uppercase;
	    text-align: center;
	}
	.img_gracias img{
		/*max-width: initial;*/
		/*width: 108.541%;*/
	}

	.msj_gracias{
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding: 40px;
		color: var(--color_2);
	}
	.p_gracias{
		font-size: 20px;
		text-align: center;
	}
	.p_gracias p{
		max-width: 372px;
		margin: 0 auto;
	}
	.div_asesor{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
	.dt_asesor{
		display: flex;
		flex-direction: column;
		text-align: center;
		gap: 8px;
		padding-bottom: 12px;
	}
	.dt_asesor h3{
		font-weight: bold;
		font-size: 27px;
	}
	.dt_asesor p{
		font-size: 20px;
	}
	.hablemos{
		width: 220px;
		height: 42px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--verde);
		color: #fff;
		font-size: 18px;
		font-weight: bold;
		border-radius: 16px;
		cursor: pointer;
	}

/*whatsapp*/
	#whatsapp{}
	.div_whatsapp{
		display: grid;
		grid-template-columns: 84px auto;
		justify-content: center;
		align-items: center;
		gap: 32px;
		width: 100%;
		max-width: 790px;
		margin: 0 auto;
		background: var(--celeste);
		border-radius: 20px;
		padding: 20px;
	}
	.div_whatsapp p{
		text-align: center;
		color: #fff;
		font-size: 27px;
		max-width: 585px;
	}

/*preguntas*/

	.doble_pregu{
		display: grid;
		grid-template-columns: 480px auto;
		justify-content: space-between;
		gap: 50px;
		width: 100%;
		max-width: var(--zona);
		margin: 0 auto;
	}
	.text_preg{
		display: flex;
		align-items: center;
	}
	.img_4preg{
		display: flex;
		align-items: center;
	}
	.text_preg h3{
		text-transform: uppercase;
		color: var(--p_color);
		white-space: pre-line;
		font-size: 40px;
		font-weight: 600;
	}
	.text_preg h3 small{
		font-size: 34px;
	}
	.p_4{
		background: linear-gradient(90deg, var(--verde) 0%, #0c9bd7 100%);
	    -webkit-background-clip: text;
	    font-size: 85px;
	    font-weight: bold;
	    color: transparent;}
	.p_4 span{
		font-size: 64px;
	}

	.list_preg{
		display: flex;
		flex-direction: column;
		gap: 16px;
		background: linear-gradient(298deg, #578884 0%, var(--celeste) 100%);
		padding: 20px;
		border-radius: 16px;
	}
	.item_preg{
		background: #fff;
		display: grid;
		grid-template-columns: 32px auto;
		gap: 8px;
		border-radius: 16px;
		padding: 20px 24px;
	}
	.item_preg .number{
		font-weight: 900;
	}
	.pregunta{
		display: flex;
		flex-direction: column;
		gap: 24px;
		color: var(--p_color);
	}
	.pregunta h3{
		font-size: 20px;
		font-weight: 900;
		font-style: italic;
	}
	.pregunta p{
		padding-left: 12px;
		font-size: 18.75px;
		line-height: initial;
		white-space: pre-line;
	}

	.conversar{
		background: var(--verde);
		font-weight: 600;
		color: #fff;
		padding: 6px 4px;
		display: inline-block;
	}

@media screen and (max-width: 1024px){
	.banner{
		--form: 400px;
	}
	.slick-prev{
		left: -5px;
	}
	.slick-next{
		right: -5px;
	}
	.doble_pregu{
		grid-template-columns: 320px auto;
	}
}

@media screen and (max-width: 768px){
	.area_segura{
		width: 100%;
	}
	.persona p{
		font-size: 14px;
	}
	.txt_contacto p,
	.txt_razon p,
	.info_div{
		font-size: 16px;
	}
	.frase_v2 p,
	.frase,
	.title_info{
		font-size: 20px;
	}
	.frase_v2 h3,
	.sec_title{
		font-size: 24px;
	}
	.banner{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.imagen_banner img{
		width: 100%;
	}
	.cdr_msj_v2{
		padding: 20px;
	}
	.list_razones{
		flex-wrap: wrap;
	}
	.info_div{
		padding: 24px;
	}
	.list_info{
		flex-wrap: wrap;
	}
	.list_malla{
		padding: 0 40px;
	}
	.slick-prev, 
	.slick-next{
		transform: translate(0, -50%);
	}
	.txt_contacto{
		gap: 16px;
	}
	.txt_contacto img{
		width: 60px;
	}
	.doble_pregu{
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.div_whatsapp p{
		font-size: 20px;
	}
}

@media screen and (max-width: 600px){
	header{
		height: 140px;
	}
	.logo_up{
		width: 160px;
	}
	.msj_header{
		width: 200px;
	}
	.baner_mobile{
		display: block;
	}
	.imagen_banner{
		display: none;
	}
	#home,
	#home .area_segura{
		padding: 0;
		gap: 0;
	}
	.banner{
		padding: 0 20px;
	}
	.cdr_msj{
		padding: 20px;
	}
	.frase p{
		line-height: 1.4;
	}
	.frase p:before{
		position: relative;
		transform: none;
		left: auto;
		margin-right: 4px;
	}
	.div_zona{
		display: flex;
		flex-direction: column;
		gap: 40px;
	}
	.frase,
	.persona{
		text-align: center;
	}
	.doble_info{
		grid-template-columns: 1fr;
	}
	.contacto{
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.txt_contacto:before{
		display: none;
	}
	.img_gracias{
		padding-top: 24px;
	}
	.img_4preg img{
		width: 80%;
		max-width: 320px;
	}

}

@media screen and (max-width: 450px){
	header{
		height: 100px;
	}
	.logo_up{
		width: 120px;
	}
	.msj_header{
		width: 160px;
	}
	.banner{
		padding: 0;
	}
	.form{
		padding: 24px;
	}
	.col-malla{
		padding: 2px;
	}
	.list_malla{
		padding: 0;
	}
	.home_gracias .banner{
		padding: 0 20px;
	}
	.div_whatsapp{
		display: flex;
		flex-direction: column;
		align-items: center;
	}


	.cdr_msj_v2{
		padding-bottom: 160px;
	    background-size: initial;
	    background-repeat: no-repeat;
	    background-position: bottom right;
	}
	.frase_v2{
		width: 100%;
	}
}