:root{
    /* --moradito:#1B3554; */
    --moradito:#0d3052;
    --amarillito:#A2C041;
}
.whitebg{background-color:var(--white)}
header,footer,.moradito-bg,.fixedtop{background-color: var(--moradito);color:var(--white)}
.moradito{color:var(--moradito);}
.amarillito{color:var(--amarillito);}
.amarillito-bg{background-color:var(--amarillito);}
header nav a,header nav a:hover{color:var(--white);font-weight: 500;}
header nav a::after{content:'';display: block;width:0;height:2px;background-color:var(--amarillito);transition:512ms}
header nav a:hover::after,header nav a.active:after{width:100%;}
header .logo{max-width:300px!important}
.fixedtop img{max-width: 250px;}

.content-spacer{padding:68px 0}
footer hr{width: 100%;color: var(--white);border: 1px solid var(--white);}
footer a{width:fit-content;display:block;font-size:1.2em}
footer a, footer a:hover{color:var(--white)}
footer a::after{content:'';display: block;width:0;height:2px;background-color:var(--amarillito);transition:512ms}
footer a:hover::after, footer a.active:after{width:100%;}


.titulo{color:var(--amarillito);font-size:1.3em; border-bottom:1px solid var(--white);width:max-content;padding-right: 30px;}
.outline-amarillo{-webkit-text-stroke-width: thin;-webkit-text-stroke-color: var(--amarillito);color: transparent;}
.outline-morado{-webkit-text-stroke-width: thin;-webkit-text-stroke-color: var(--moradito);color: transparent;}
.underline-amarillo{border-bottom:2px solid var(--amarillito)}
.underline-gris{border-bottom:2px solid #D6D6D6}

.form input,.form textarea{background:rgba(255,255,255,0.75);font-size: 1.1em;}
.form .sendform{background: #A2C041;border-radius: 38px;font-size:1.1em;padding:8px 35px}
.form .sendform i{margin-left:12px}

.gear{text-align: center;}
.gear img{transition:1s;}
.gear img:first-child{width:250px}
.gear img:last-child{width:175px;position: absolute;margin-left: -210px;margin-top: 60px;max-height:150px}
.gear:hover img:first-child{transform: rotate(45deg);}

.white-rounded{border: 2px solid var(--white);
    color: var(--white);
    padding: 10px 21px;
    border-radius: 50px;
    display: inline-block;
    margin: 0 21px;
    font-size: 1.2em;
    font-weight: 700;}
.white-rounded:hover{background:var(--white);color:var(--moradito);}

.purple-rounded{border: 2px solid #006BED;
    color: #006BED;
    padding: 10px 21px;
    border-radius: 50px;
    display: inline-block;
    font-size: 1.2em;
    font-weight: 700;}
.purple-rounded:hover,.purple-rounded.active{background:#006BED;color:var(--white);}

.morado-rounded{border: 2px solid var(--moradito);
    color: var(--moradito);
    padding: 10px 21px;
    border-radius: 50px;
    display: inline-block;
    font-size: 1.2em;
    font-weight: 700;}
.morado-rounded:hover{background:var(--moradito);color:var(--white);}


.beneficio{border-radius:21px;box-shadow: 0 5px 8px rgba(0,0,0,0.3);}
.beneficio .icon{background: var(--white);padding: 12px;border-radius: 50px;text-align: center;width: 85px;margin-top: -21px;position: relative;display:inline-block}
.beneficio .beneficio-titulo{display: inline-block;font-size: 1.7em;font-weight: 800;width:calc(100% - 100px)}
.beneficio .beneficio-content{padding:0 35px 21px 35px}

.openBar{font-size: 2em;position: absolute;top: 17px;right: 35px;}
.mobilNavBar{position: fixed;top: -150vh;left: 0;background: var(--moradito);z-index: 10;height: 100vh;width: 100%;}
.mobilNavBar ul{display: block;padding-left: 5%;border-left: 5px solid var(--amarillito);margin-left: 15%;padding-top: 68px;}
.mobilNavBar a{font-size:30px;font-weight: 900;color: var(--white);}
.mobilNavBar .fa-times {position: absolute;right: 21px;top: 21px;font-size: 35px;color: var(--white);}

.contactMobileButton{display:block;margin-bottom:21px !important;background:#fff;border-radius:50px;padding:8px 21px;color:var(--moradito);width:fit-content;margin:auto;font-weight:900}

@media only screen and (min-width:768px){
    .banner{background-size:cover;background-position:center;background-repeat: no-repeat;}
    #ventajas{margin:auto;text-align: center;}
    #ventajas div{display: inline-block;margin:22px 55px;}
    .beneficio{width:90%;margin:auto}
}

@media only screen and (max-width:768px){
    .beneficio-content{padding:0 12px 21px 12px!important}
    .beneficio-content .big{font-size:18px!important}
}