*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   text-decoration: none;
   list-style: none;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
:root{
    --color-head-1:#3B8C5E;
    --color-head-2:#01402E;
    --color-fondo-1:#E6E6E6;
    --color-fondo-2:#CCCCCC;
    --color-fondo-3:#B3B3B3;
    --color-texto1:#0367A6;
    --color-texto2:#303030;
    --color-texto3:#808080;
    --color-texto4:#8E8E8E;
    --color-btn:#84D904;
    --color-blanco:#ffffff;
    --color-negro:#000000;
    --color-hover:#FE3C01;
}
.conteiner{
    margin: 0 auto;
    padding: 0 70px;
}
body{
    font-family: 'roboto', sans-serif;
    padding: 112px 0 0 0;
}
/* cabecera star */
/* HEADER 01 STAR */
.header{
    height: 110px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}
.header-1{
    background-color:var(--color-head-1);
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;    
}
.header-contact{
    
    line-height: 30px;    
   
}
.header-contact a{
    
    line-height: 30px;
    font-size: 13px;
    color: var(--color-fondo-1);       
}
.header-icono{
    margin: 0  10px 0 0;
    color:var(--color-fondo-2);
    font-size: 16px;
   
}
.header-icono i{
    margin: 0  3px 0 0;
    color:var(--color-texto1);
    font-size: 15px;   
}
.header-rs{
    line-height: 30px;
}
.header-rs i{
    margin: 0 0 0 8px;
    color:var(--color-btn);
    font-size: 16px; 
}
.header-rs i:hover {   
    color:var(--color-hover);
    transition: 0.3s;   
}
/* HEADER 01 END */
/* HEADER 02 START */

nav{
    background-color:var(--color-head-2);
    height: 80px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

}

.logo a{
    color: var(--color-btn);
    font-size: 18px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;      
}
.logo a img{
    width: 60px;
    height: 60px;
    z-index: 20000;
    margin: 0 10px;    
}
.drop-down-menu .drop-down-button{
    font-size: 15px;
    border: none;
    color: var(--color-fondo-1);
    letter-spacing: 1px;
    background-color:var(--color-head-2);
    border-radius: 5px;   
    padding:10px 10px;    
}
.drop-down-menu .drop-down-button:hover{
    background-color: var(--color-hover);
    color: var(--color-blanco);
}
.drop-down-menu-content{
    display: none;
    position: absolute;
    background-color: rgb(246, 195, 56);
    opacity: 1;
    min-width: 50px;
    min-height: 110px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.8);
    z-index: 5;
    padding-top: 10px;
    border-radius: 7px;
}
.drop-down-menu-content a{    
    color: var(--color-negro);
    padding: 6px 10px;
    display: block;
    font-size: 15px;   
}
.drop-down-menu-content a:hover{
    background-color: var(--color-hover);
    color: var(--color-blanco);
    border-radius: 3px;
    
}.drop-down-menu:hover .drop-down-menu-content{
    display: block;
}
nav ul{
    display: flex;
    justify-content: space-around;
}
nav ul  a{
    color: white;  
}
.drawer{
    font-size: 25px;
    color: rgb(244, 238, 238);
    float: right;
    cursor:pointer;
    display: none;
}
#ckbox{
    display: none;
}
/* HEADER 02 END */
/* cabecera end */
/* ------------------------------------------------------------------------------------- */
/* <!-- iNICIO STAR --> */
.inicio{  
    padding: 0px 0;    
    text-align: center;
}
.inicio-content{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 30px auto;   
}
.bloque-1{
    background-color: var(--color-fondo-3);
    flex-basis: calc(50% - 70px);
    padding:25px ;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    overflow: hidden;
}
.bloque-1 a img{
    width: 40%;       
    margin-bottom: 15px;
    margin-top: 30px;
    border:20px;
    border-radius: 10px;
    border-radius: 15%;
}
.bloque-1 h2 {
    font-size: 20px;
    color: #0367A6;
    font-size: 22px;
}
.bloque-2{
    background-color: var(--color-fondo-3);
    flex-basis: calc(50% - 70px);
    padding:25px ;    
    border-radius: 15px;
    overflow: hidden;
}
.recomendado-2{
    background-color: #fff;
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 10px 0;
    padding: 20px 50px;
}
.recomendado-2 img{
    
    width: 50px;
    height: 50px;
    object-fit: cover;
}
/* .bloque-2 a img{
   
    width: 20%;       
    margin-bottom: 15px;
    margin-top: 30px;
    border:20px;
    border-radius: 10px;    
}     */
.bloque-2 h2 {
    font-size: 20px;
    color: #0759bd;
    font-size: 22px;
    line-height: 2;
}
.bloque-2 div {
    /* background-color: #FE3C01; */
    margin-bottom: 5%;

}
.bloque-2 div a{
    /* background-color: #eeefea; */
    line-height: 1.5;
    display: block;
}
.bloque-2 a{
    /* background-color: #7fa679; */
    font-size: 10px;
    color: #6918b0;
    font-size: 20px;
    
}

.bloque-2 h3 a {
    font-size: 20px;
    color: #f00943;
    margin: 5px;
    
}
/* INICIO END */
/* -------------------------------------------------------------------- */
/* FOOTER START */
.footer{
    background-color: #303030;
}
.footer-content{
    display: flex;
    flex-direction: row;
}
.footer-group{
    width: 100%;
    display: flex;
    flex-direction: row;   
    justify-content: space-between;
    text-align: center;
    padding: 0px 0px;
    margin: 0px 50px;
    border-radius: 15px;
}
.footer-1{
    display: flex;
    flex-direction: column;    
}
.footer-1 h3{
    color: var(--color-blanco);
    padding-top:15px;
    padding-bottom: 5px;
    font-size: 15px;  
}
.footer-1 h2{
    color: var(--color-blanco);
    padding-top:18px;
    padding-bottom: 5px;
    font-size: 15px;
}
.footer-1 a{
    color: var(--color-fondo-3);
    padding: 2px 0;
    text-align: left;
    font-size: 13px;
}
.footer-rs a i{  
    margin:10px 10px 10px 0;
    color: var(--color-texto1);
}
.footer-2 a i{
    padding: 0 10px;
}
.footer-2{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.interbank a img{
    width: auto;
    height: 25px;
}

.interbank:hover{
    border-bottom: solid 2px var(--color-hover);
    transition: 0.3s;
}
.bcp a img{
    width: auto;
    height: 25px;
}
.bcp:hover{
    border-bottom: solid 2px var(--color-hover);
    transition: 0.3s;
}
.yape a img{
    width: auto;
    height: 40px;
}
.yape:hover{
    border-bottom: solid 2px var(--color-hover);
    transition: 0.3s;
}
.plin a img{
    width: auto;
    height: 35px;
}
.plin:hover{
    border-bottom: solid 2px var(--color-hover);
    transition: 0.3s;
}
.footer-2 h2{
    color: var(--color-blanco);
    font-size: 13px;
    text-align: center;
    margin-bottom: 5px;
}
.footer-2 h3{
    color:var(--color-blanco);
    padding-top: 15px;
}
.footer-2 p{
    color: var(--color-blanco);   
    font-size: 13px;
    text-align: left;
    color: var(--color-texto4);
}
.footer-2 a{
    color: var(--color-fondo-3);
    padding: 8px 0;
    text-align: center;
    font-size: 13px;
}
.portada{
    width: 200px;
}
.portada a img:hover{
    border-bottom: solid 2px var(--color-hover);
    transition: 0.3s;
}

.footer-2 img{
    width: 50%;
    padding:2px 0 ;
}
.footer-rs a i:hover{
    color: var(--color-hover);
    transition: 0.3s;
}
.footer-rs a {
    color: var(--color-blanco);
    font-size: 20px;
}

span{
    color: #e1dfdf;  
}
.copyright {
    background-color: var(--color-texto4);
    display: flex;
    flex-direction:row;
    color: #303030;
}
.copyright p{
    color: #303030;
    font-size: 12px;
}
/* FOOTER END */








@media(max-width: 991Px){
    .container{
    margin: 0 auto;
    padding: 0 5px;
    }
    body{
        font-family: 'roboto', sans-serif;
        padding: 112px 0 0 0;
        margin: 0;
    }
    /* cabecera star */
    /* HEADER 01 STAR */
    .header{
        height: 110px;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
    }
    .header-1{
        background-color:var(--color-head-1);
        height: 30px;
        width: 100%;
        display: none;
        justify-content: space-between;    
    }
    .header-contact{
        
        line-height: 30px;    
    
    }
    .header-contact a{
        
        line-height: 30px;
        font-size: 13px;
        color: var(--color-fondo-1);       
    }
    .header-icono{
        margin: 0  10px 0 0;
        color:var(--color-fondo-2);
        font-size: 16px;
    
    }
    .header-icono i{
        margin: 0  3px 0 0;
        color:var(--color-texto1);
        font-size: 15px;   
    }
    .header-rs{
        line-height: 30px;
    }
    .header-rs i{
        margin: 0 0 0 8px;
        color:var(--color-btn);
        font-size: 16px; 
    }
    .header-rs i:hover {   
        color:var(--color-hover);
        transition: 0.3s;   
    }
    /* HEADER 01 END */
    /* HEADER 02 START */

    nav{
        background-color:var(--color-head-2);
        height: 80px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;

    }

    .logo a{
        color: var(--color-btn);
        font-size: 18px;
        letter-spacing: 2px;
        display: flex;
        align-items: center;      
    }
    .logo a img{
        width: 60px;
        height: 60px;
        z-index: 20000;
        margin: 0 10px;    
    }
    .drop-down-menu .drop-down-button{
        font-size: 15px;
        border: none;
        color: var(--color-fondo-1);
        letter-spacing: 1px;
        background-color:var(--color-head-2);
        border-radius: 5px;   
        padding:10px 10px;    
    }
    .drop-down-menu .drop-down-button:hover{
        background-color: var(--color-hover);
        color: var(--color-blanco);
    }
    .drop-down-menu-content{
        display: none;
        position: absolute;
        background-color: var(--color-head-1);
        opacity: 1;
        min-width: 50px;
        min-height: 110px;
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.8);
        z-index: 5;
        padding-top: 10px;
        border-radius: 7px;
    }
    .drop-down-menu-content a{    
        color: var(--color-negro);
        padding: 6px 10px;
        display: block;
        font-size: 15px;   
    }
    .drop-down-menu-content a:hover{
        background-color: var(--color-hover);
        color: var(--color-blanco);
        border-radius: 3px;
        
    }.drop-down-menu:hover .drop-down-menu-content{
        display: block;
    }
    nav ul{
        position: fixed;
        width: 100%;
        background-color: #12251a;
        height: 100vh;
        top: 80px;
        left: -100%;
        text-align: left;
        transition: all .5s;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        padding: 20px 15px;
    }
    nav ul  a{
        color: white;  
    }
    .drawer{
        font-size: 25px;
        color: rgb(244, 238, 238);
        float: right;
        cursor:pointer;
        display: block;
    }
    #ckbox:checked ~ .menu-box{
        left: 0;
    }
    /* HEADER 02 END */
    /* cabecera end */
    /* ------------------------------------------------------------------------------------- */
    /*<!--inicio STAR --> */
    .inicio{  
    padding: 0px 0;    
    text-align: center;
}
.inicio-content{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;   
}
.bloque-1{
    background-color: var(--color-fondo-3);
    flex-basis: calc(50% - 70px);
    padding:25px ;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
}
.bloque-1 a img{
    width: 40%;       
    margin-bottom: 15px;
    margin-top: 30px;
    border:20px;
    border-radius: 10px;
    border-radius: 15%;
}
.bloque-1 h2 {
    font-size: 20px;
    color: #0367A6;
    font-size: 22px;
}
.bloque-2{
    background-color: var(--color-fondo-3);
    flex-basis: calc(50% - 70px);
    padding:25px ;    
    border-radius: 15px;
    overflow: hidden;
}
.recomendado-2{
    background-color: #fff;
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 10px 0;
    padding: 20px 50px;
}
.recomendado-2 img{
    
    width: 50px;
    height: 50px;
    object-fit: cover;
}
.bloque-2 a img{
   
    width: 40%;       
    margin-bottom: 15px;
    margin-top: 30px;
    border:20px;
    border-radius: 10px;    
}    
.bloque-2 h2 {
    font-size: 20px;
    color: #0759bd;
    font-size: 22px;
}
.bloque-2 h3 a {
    font-size: 20px;
    color: #f00943;
    font-size: 20px;
} 


    /* inicio END */
    /* -------------------------------------------------------------------- */
    /* FOOTER START */
    .footer{
        background-color: #303030;
        margin-top: 5px;
    }
    .footer-content{
        display: flex;
        flex-direction: row;
    }
    .footer-group{
        background-color:#444343;
        width: 100%;
        display: flex;
        flex-direction: column;   
        justify-content: center;
        text-align: center;
        padding: 0px 0px;
        margin: 0px 50px;
        border-radius: 15px;
    }
    .footer-1{
        display: flex;
        flex-direction: column;    
    }
    .footer-1 h3{
        color: var(--color-blanco);
        padding-top:15px;
        padding-bottom: 5px;
        font-size: 15px;  
    }
    .footer-1 h2{
        color: var(--color-blanco);
        padding-top:18px;
        padding-bottom: 5px;
        font-size: 15px;
    }
    .footer-1 a{
        color: var(--color-fondo-3);
        padding: 2px 0;
        text-align: center;
        font-size: 13px;
    }
    .footer-rs a i{  
        margin:10px 10px 10px 0;
        color: var(--color-texto1);
    }
    .footer-2 a i{
        padding: 0 10px;
    }
    .footer-2{
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .interbank a img{
        width: auto;
        height: 25px;
    }

    .interbank:hover{
        border-bottom: solid 2px var(--color-hover);
        transition: 0.3s;
    }
    .bcp a img{
        width: auto;
        height: 25px;
    }
    .bcp:hover{
        border-bottom: solid 2px var(--color-hover);
        transition: 0.3s;
    }
    .yape a img{
        width: auto;
        height: 40px;
    }
    .yape:hover{
        border-bottom: solid 2px var(--color-hover);
        transition: 0.3s;
    }
    .plin a img{
        width: auto;
        height: 35px;
    }
    .plin:hover{
        border-bottom: solid 2px var(--color-hover);
        transition: 0.3s;
    }
    .footer-2 h2{
        color: var(--color-blanco);
        font-size: 13px;
        text-align: center;
        margin-bottom: 5px;
    }
    .footer-2 h3{
        color:var(--color-blanco);
        padding-top: 15px;
    }
    .footer-2 p{
        color: var(--color-blanco);   
        font-size: 13px;
        text-align: left;
        color: var(--color-texto4);
    }
    .footer-2 a{
        color: var(--color-fondo-3);
        padding: 8px 0;
        text-align: center;
        font-size: 13px;
    }
    .portada{
        width: 200px;
    }
    .portada a img:hover{
        border-bottom: solid 2px var(--color-hover);
        transition: 0.3s;
    }

    .footer-2 img{
        width: 50%;
        padding:2px 0 ;
    }
    .footer-rs a i:hover{
        color: var(--color-hover);
        transition: 0.3s;
    }
    .footer-rs a {
        color: var(--color-blanco);
        font-size: 20px;
    }

    span{
        color: #e1dfdf;  
    }
    .copyright {
        background-color: var(--color-texto4);
        display: flex;
        flex-direction:row;
        color: #303030;
    }
    .copyright p{
        color: #303030;
        font-size: 12px;
    }
    /* FOOTER END */
    }