@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
:root{
	--azul: #008BFF;
	--gris: #F4F4F4;
	--rosa: #DA0080;
	--deg1: #00B6DB;
}
body{
    font-family: 'Montserrat', sans-serif;
}
section{
	padding: 40px 30px;
}
h1{
	font-size: 36px;
	color: var(--azul);
	margin: 0;
}
h2{
	font-size: 18pt;
	color: var(--azul);
	margin-top: 0;
}
h4{
	font-size: 13pt;
	margin: 0 0 10px;
}
p{
	font-size: 12pt;
	margin: 0 0 10px;
}
.section-one{
	display: grid;
    grid-template-columns: 60% 40%;
	padding-top: 10%;
}
.center{
	text-align: center;
}
.w80{
	width: 80%;
	margin: 0 auto;
}
form{
	background: var(--gris);
    padding: 20px;
    border-radius: 10px;
    width: 60%;
    margin: 0 auto;
}
label, .instrucciones{
	font-size: 10pt;
    font-weight: 500;
}
label span, .instrucciones{
	color: red;
}
input{
	width: -webkit-fill-available;
    font-size: 12pt;
    padding: 6px 6px;
    border: 1px solid #000;
    border-radius: 5px;
    margin-bottom: 15px;
}
button{
	width: -webkit-fill-available;
    border: 1px solid var(--rosa);
    height: 40px;
    border-radius: 5px;
    background: var(--rosa);
    color: #fff;
    font-weight: 600;
    font-size: 15pt;
    cursor: pointer;
}
button:hover{
	border-color: #FA00C8;
	background: #FA00C8;
}
button:focus, button:active{
	border-color: #96007D;
	background: #96007D;
}
.fondo1, .fondo2{
	color: #fff;
	padding: 50px;
}
.fondo1{
	background: url(../img/fondo-1-desktop.webp);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
}
.fondo2{
	background: url(../img/fondo-2-desktop.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right;
	border-radius: 5px;
}
.fondo1 h2, .fondo2 h2{
	color: #fff;
}
.fondo2 h4{
	border-bottom: 2px solid #fff;
	padding-bottom: 5px;
}
.flex{
	display: flex;
    align-items: center;
    grid-gap: 0 50px;
}
.gap{
	grid-gap: 15px;
}
.b-left{
	border-left: 2px solid #000;
    padding-left: 5px;
    height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.grid3{
	display: grid;
    grid-template-columns: 32% 32% 32%;
    justify-content: space-between;
    align-items: stretch;
    grid-gap: 30px 0;
}
.bg-gris{
	background: var(--gris);
	border-radius: 5px;
	padding-bottom: 0;
}
.start{
	align-items: flex-start;
}
#img{
	margin-bottom: -4px;
    margin-top: -95px;
}
.fondo-flecha{
	background: url(../img/flecha-desktop.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    display: grid;
    grid-template-columns: 20% 20% 20% 20%;
    justify-content: space-between;
    padding: 20px 50px;
}
.box, .box2, .box3, .box4{
	padding: 10px;
	color: #fff;
	border-radius: 5px;
}
.box p, .box2 p, .box3 p, .box4 p{
	margin: 0;
	font-size: 10pt;
}
.box{
	background: #2173B8;
}
.box2{
	background: #31628E;
}
.box3{
	background: #027BE4;
}
.box4{
	background: #334D63;
}
.centerflex{
	display: flex;
    flex-direction: column;
    justify-content: center;
}
.bottonflex{
	display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.why{
	display: grid;
    grid-template-columns: 75% 25%;
    align-items: center;
}
.movil{
	display: none;
}
@media(max-width:820px){
	section {
	    padding: 20px;
	}
	.movil{
		display: block;
	}
	.desk{
		display: none;
	}
	.section-one{
		grid-template-columns: 100%;
		padding: 25% 0px 0px 0px;
		grid-gap: 30px 0;
	}
	.w80 {
	    width: 90%;
	}
	form {
	    background: var(--gris);
	    padding: 20px;
	    border-radius: 0;
	    width: -webkit-fill-available;
	    margin: 0 auto;
	}
	.flex-column{
		flex-direction: column;
	}
	.fondo1{
		background: url(../img/fondo-1-mobile.webp);
		background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
		padding: 20px;
	}
	.fondo2 {
	    padding: 20px;
	}
	.grid3 {
	    grid-template-columns: 100%;
	}
	#img {
	    margin-top: 0;
	}
	.fondo-flecha {
	    background: url(../img/flecha-desktop-rotated.svg);
        background-repeat: no-repeat;
        background-size: 70%;
        background-position-x: center;
        grid-template-columns: 100%;
        padding: 45px 0px;
        grid-gap: 20px;
        background-position-y: bottom;
	}
	.centerflex, .bottonflex {
	    display: block;
	}
	.box, .box2, .box3, .box4 {
	    width: 75%;
	}
	.textleft-movil{
		display: flex;
        flex-direction: column;
        align-items: flex-end;
	}
	.why {
	    grid-template-columns: 100%;
	    grid-gap: 30px;
	}
}
.btn-slide{
        margin: 15px 0;
    }
    .spans{
        display: flex;
        justify-content: center;
        align-items: center;
        grid-gap: 5px;
    }
    .w3-badge {
        height: 15px;
        width: 15px;
        padding: 0;
        display: flex;
        border-radius: 100%;
        border:1px solid #7D7D7D;
        background: transparent;
    }
    .w3-badge-white{
    	 border:1px solid #fff;
    }
     .white{
        background: #7D7D7D!important;
        width: 25px !important;
        border-radius: 15px !important;
    }
    .white2{
        background: #fff!important;
        width: 25px !important;
        border-radius: 15px !important;
    }