:root{
	--color-azul: #085156;
	--color-gris: #99999A;
}
@font-face {
	font-family: Nexa;
	src: url(../NexaRegular.otf);
}
body{
	margin: 0;
	font-family: 'Nexa', sans-serif;
}
h1{
	font-weight: 900;
	color: var(--color-gris);
}
h2{
	color: var(--color-azul);
	font-weight: 900;
}

button{
	background: var(--color-azul);
	border: 1px solid var(--color-azul);
	color: #fff;
	font-weight: 900;
	font-size: 14pt;
	border-radius: 4px;
	padding: 5px 10px;
	width: 255px;
	cursor: pointer;
}
section{
	padding: 30px 50px;
}
p{
	font-size: 10pt;
	line-height: 1.5;
}
.loader{
	position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: #000000d9;
	  justify-content: center;
	  display: none;
	  align-items: center;
  }
  .div-load{
	width: 300px;
	height: 260px;
	background: #625f5f;
	border-radius: 12px;
}
.loader img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  margin: 10px auto;
  justify-content: center;
}
.loader1{
	position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: #000000d9;
	  justify-content: center;
	  display: none;
	  align-items: center;
  }
.loader1 img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  margin: 10px auto;
  justify-content: center;
}
.bg-gris{
	background: var(--color-gris);
}
.btn{
	width: 20%;
}
.btn-quitar-item{
	cursor: pointer;
}
.error-msg{
	color: #340fd6;
	margin-left: 10px;
	font-size: 12px;
}
.head{
	display: grid;
    grid-template-columns: 30% 50%;
    padding: 10px 100px;
    align-items: center;
    color: #000;
    font-size: 12pt;
    position: fixed;
    width: 100%;
    background: #F8F8F8;
}
.head-label{
	text-align: end;
}
.formulario{
	display: grid;
	grid-template-columns: 35% 64%;
	width: 90%;
	margin: auto;
	justify-content: space-between;
	padding: 8% 0 2%
}
.formulario h1 strong span{
	color: var(--color-morado);
	font-weight: 900;
	font-size: 24px;
	padding: 0;
}
.formulario img{
	margin: 0 20%;
}
.formulario h2{
	margin:0;
}
.formulario h2 strong{
	color: var(--color-morado);
}
.formulario h3{
	margin-top: 0;
}
.formulario input, .formulario select{
	font-size: 11pt;
    padding: 10px;
    border-radius: 4px;
    width: 93%;
    border: 1px solid #111;
    margin-bottom: 10px;
}
.formulario input:focus, .formulario select:focus{
	outline-color: #ebebeb;
	outline-width: 2px;
}
.formulario span{
	font-size: 9pt;
    color: red;
    padding-left: 15px;
    width: 100%;
}
.formulario .check {
    display: grid;
    margin: 15px 0;
    grid-template-columns: 5% 85%;
    justify-items: start;
    text-align: left;
    grid-gap: 15px;
}
.formulario .check input {
    width: 100%;
}
.sec-form{
    padding: 0px 5%;
}
.form-2{
	display: grid;
    grid-template-columns: 65% 30%;
    align-items: center;
    margin-top: 30px;
    justify-content: space-between;
}
.form-3{
	display: grid;
    grid-template-columns: 48% 48%;
    grid-gap: 10px;
    justify-content: space-between;
}
.divform2{
	display: grid;
    grid-template-columns: 48% 48%;
    grid-gap: 10px;
    justify-content: space-between;	
}
.section-pasos{
	display: grid;
    grid-template-columns: 48% 48%;
    align-items: start;
    justify-content: center;
    grid-gap: 0px;
    margin: 20px 0 4%;
}
.section-pasos div{
	text-align: center;
}
.section-pasos img{
	width: 35%;
}
.section-pasos h4{
	margin-top: 0;
	font-size: 10pt;
}
.div2 {
	display: grid;
	grid-template-columns: 48% 48%;
    align-items: start;
    justify-content: space-between;
}
.flex3{
	display: grid;
    grid-template-columns: 30% 30% 30%;
    justify-content: space-between;
    align-items: start;
    grid-gap: 25px;
}
.footer{
	display: grid;
    grid-template-columns: 10% 70% 10%;
    padding: 2% 4%;
    align-items: center;
    color: #fff;
    background: var(--color-gris);
    justify-content: space-between;
    justify-items: center;
}
.footer p, .footer a{
	font-size: 10pt;
	color: #fff;
	margin: 0;
}
.card-form {
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0px 0px 15px -11px;
    text-align: center;
}
.movil{
		display: none;
	}
.card-promo{
	display: grid;
    grid-template-columns: 20% 75%;
    grid-gap: 25px;
    text-align: left;
    color: var(--color-azul);
    font-size: 14pt;
    padding: 5px;
    border: 2px solid var(--color-gris);
    align-items: center;
}
@media(max-width: 820px){
	section {
	    padding: 30px 30px;
	}
	.movil{
		display: block;
	}
	.desk{
		display: none;
	}
	.head {
	    grid-template-columns: 80%;
	    padding: 10px 35px;
	    text-align: center;
	}
	
	.head-label{
		text-align: center;
	}
	.card-promo{
    	font-size: 12pt;
	}
	#promo{
		width: 60px!important;
	}
	.formulario {
	    display: flex;
	    width: 95%;
	    margin: auto;
	    padding: 26% 10px 2%;
	    flex-direction: column-reverse;
	}
	.formulario h3 {
    color: #111;
    font-weight: 400;
    margin-top: 18px;
}

	.form-3, .div2, .flex3 {
	    grid-template-columns: 100%;
	}
	.formulario input{
	    width: 93%;
	}
	.form-2 {
	    grid-template-columns: 100%;
	    grid-gap: 18px;
	}
	.section-pasos {
	    grid-template-columns: 45% 45%;
	}
	.footer {
	    grid-template-columns: 100%;
	    padding: 10%;
	    grid-gap: 20px;
	    justify-items: center;
	}
	.card-form {
	    padding: 0px;
	    box-shadow: none;
	}
	#cp {
	    width: 86%;
	}
	#slc-anio, #slc-descripcion, #slc-descripcionCompleta{
		display: block!important;
	}
}