*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Open Sans', sans-serif;
    margin: auto 5%;
    padding: 0;
}
/* background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); */
header{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}
.h_left{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.h_phone1{
    color:#0f396c;
    font-size: 0.8rem;
    display: flex;
    justify-content: center;
}
.h_phone1{
    text-decoration: none;
    color:#0f396c;
}

hr{
    padding: 1px;
}
/* HEADER */
.h_logo img{
    width: 20rem;
}
.h_navegadores{
    display: flex;
    align-items: center;
}
.h_navegadores a{
    padding: 0 20px;
    text-decoration: none;
    color: rgb(73, 73, 73);
}
.h_navegadores a:hover{
    background-color: rgba(20, 19, 102, 0.37);
    border-radius: 2px;
}
.h_redes{
    padding: 0 20px;
}
.h_redes img{
    width: 2.5rem;
}
.h_redes a{
    padding: 0 1rem;
}
.h_phone1{
    font-size: 15px;
}
.h_phone1 a{
    text-decoration: none;
    color: #0042aa;
}
.h_afiliacion a, .h_afiliacion img{
    display: none;
}
/* BANNER */
.banner1 img{
    width: 100%;
}
.banner2 img{
    display:none;
}
/* SECTIONS */
.sec_title {
    text-align: center;
    color: rgb(255, 255, 255);
    background-color:#0f396c;
    text-shadow: 2px 2px  black;
    font-size: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.sec_planes{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.sec_fam img{
    width: 35rem;
}
article{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    font-size: 1.3rem;
}
.art-list {
    padding: 0 0 0 1rem;
}
.art-list li{
    margin-top: 10px;
}

/* TERMINOS Y CONDICIONES */
.s_terms{
    padding: 4rem 0;
}
.s_terms h1{
    color: #080808;
    padding: 1rem 4rem;
}
.s_terms p{
    color: #080808;
    padding: 1rem 4rem;
}
.s_terms a{
    color: #0f396c;
    padding: 1rem 4rem;
    font-size: large;
}
.f_terms a{
    text-decoration: none;
    color: #ececec;
}


/* 
----------------
Arreglar el tamano del boton de los teminos 
-----------------
*/


/* FORM */
form{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background-image: linear-gradient(to top, #081267 0%, rgb(255, 255, 255) 100%); */
    background-color: #0f396c;
    color: #ececec;
    padding: 5rem;
}

form h3{
    font-size: 1.5rem;
    text-decoration: none;
}
form h2{
    padding: 1rem;
    color: rgb(49, 49, 49);
    color: #ececec;
    letter-spacing: 3px;
    font-size: 2rem;
}
form h4{
    margin: 2rem 0 0 0;
    letter-spacing: 4px;
    font-size: large;
    text-align: center;
}
form img{
    width: 50px;
    margin: 0.5rem 0 0 0;

}
.f_inputs, .f_terms{
    display: flex;
    flex-direction: row;
    padding: auto;
    justify-content: center;
    align-items: center;
    
    
}
form div input{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.5rem;
    margin: 1rem;
    border-radius: 20px;
    border-color: rgba(245, 245, 220, 0);
    box-shadow: 5px 5px #0042aa;
    
}
.in_enviar{
    padding: 0.5rem 5rem;
    box-shadow: 5px 5px #0042aa;
}
/* .f_terms{
    display: flex;
    flex-direction: column;
    align-items: center;
} */
form p{
    font-size: 0.8rem;
}
button{
    padding: 0.5rem 5rem;
    margin: 0.5rem;
    box-shadow: 5px 5px #0042aa;
    border-radius: 20px;
    border-color: rgba(245, 245, 220, 0);

}
.h_phone3{
    text-decoration: none;
    color:#ececec;
    margin-top: 10px;
    letter-spacing: 2px;
    
}

/* FOOTER */

footer{
    display: flex;
    flex-direction: column;
    align-items: center;    
}
.f_img{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 10px;
    width: 100%;
}
footer div img{
    width: 22rem;
    margin: 1rem 2rem;
    
}
footer a{
    text-decoration: none;
    font-style: none;
    color: rgb(255, 179, 0);
}

.autor{
    background-color: rgb(0, 0, 0);
    width: 100%;
    color: lightslategray;
    text-align: center;
    font-size: 1rem;
    padding: 2rem;
}
.autor{
    background-color: rgb(0, 0, 0);
    width: 100%;
    color: lightslategray;
    text-align: center;
    font-size: 1rem;
    padding: 2rem;
}
/* WHATSAPP FIJO */
.wa_fixed{
    position: fixed;
    right: 5%;
    bottom: 50px;
}
.wa_fixed img{
    width: 50px;
}


@media (max-width:820px){
    body{
        margin: auto;
    }
    header{
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }
    .h_redes{
        padding: 2rem 20px;
    }
    .sec_planes{
        flex-direction: column;
        align-items: center;
    }
    .f_img{
        flex-direction: column;
        align-items: center;
    }
    picture div{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .f_inputs{
        display: flex;
        flex-direction: column;
    }
}
@media (max-width:480px){
    .h_logo{
        display: flex;
        justify-content: center;
        padding: 0;
        margin: 0;
    }
    .h_left{
        display: flex;
        flex-direction: column-reverse;
        padding-top:2rem;
    }
    .h_afiliacion{
        display: flex;
        flex-direction: row-reverse;

    }
    .h_afiliacion a{
        display: flex;
        text-decoration: none;
        font-size: xx-large;
        color: #0f396c;
        padding: 0 0 1rem 0;
    }
    .h_afiliacion img{
        display: block;
        position: absolute;
        width: 3rem;
        left: 20%;
    }
    .h_navegadores{
        display: none;
    }
    .h_logo img{
        width: 80%;
        padding: 0;
        margin: 0;
    } 
    .h_redes img{
        width: 3rem;
    }
    .h_phone1{
        font-size: large;
    }
    .sec_title{
        padding: 0;
        margin: 0;
        font-size: 2rem;
    }
    .banner2 img, .sec_fam img{
        display: inline;
        width: 100%;
    }
    .banner1 img{
        display: none;
    }
    .sec_fam img{
        display: none;
    }
    .art-list li{
        font-size: medium;
    }
    form{
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    form h4{
        margin: 2rem 0 0 0;
        letter-spacing: 4px;
        font-size: medium;
    
    }
    .link__contact, .f_terms, .f_terms img{
        padding: 0;
        margin: 0;

    }
    form h2{
        padding: 1rem 0;
        letter-spacing: 0;
        font-size: x-large;
    }
    .f_terms{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .f_terms{
        text-align: center;
    }
    .f_inputs{
    display: flex;
    flex-direction: column;
    }
    .f_img{
        flex-direction: row;
        
    }
    .f_img img{
        width: 10rem;
        padding: 0;
        margin: 0;
    }
    .wa_fixed img{
        display: none;
    }

}