body{
    --colorPrimario: #2A7AE4;
    --colorSecunrario: #464646;
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
  
}

main{
    display: flex;
    flex-direction: column;
    width: 100%;
  
}
header{
align-content: center;
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;

}



.logo-conteiner{
    display: flex;
    margin: auto;
    margin-right: 10em;
    padding: .5em;
}

.logo-conteiner h1{
    color: var(--colorPrimario);
    margin-left: .1em
}
.logo-conteiner span{
    color: var(--colorSecunrario)
}

.buscadorylogin{
    display: flex;
}
.buscadorylogin input{
    background-color: #F5F5F5;
    border:  none;
    border-radius: 5em;
    height: 3em;
    outline: none;
    padding: .5em;
    width: 40em;
   
}
.buscadorylogin img{
    margin-left: -3em;
    position: relative;
}


.buscadorylogin button{
    background-color: transparent;
    border: 1px solid var(--colorPrimario);
    color: var(--colorPrimario);
    height: 3em;
    margin: auto;
    margin-left: 10em;
    margin-right: 1em;
    width: 10em;
}


.banner{
align-content: flex-end;
align-items: flex-start;
background-color: transparent;
background-image: url(../img/Heros.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
display: flex;
flex-direction: column;
height: 30em;
justify-content: flex-end;
width:100%;
}

.texto-hero{
align-content: flex-end;
align-content: flex-end;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-left: 10%;
position: relative;


}

.texto-hero h2{
    font-size: 4rem;
    margin-bottom: 0;
    
}

.texto-hero h3{
   
    font-size: 3rem;
    margin-bottom: 0;
}

.banner button{
   background-color: var(--colorPrimario);
    border: none;
    color: #fff;
    height: 3em;
    margin-bottom: 2em;
    margin-left: 1em;
    margin-top: .5em;
    position: relative;
    width: 7em;
}


.productos, .consolas, .diversos{
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: auto;
    width: 100%;
}
.diversos{
    margin-bottom: 5em;
}
.header-producto, .header-consolas, .header-diversos{
align-items: center;
display: flex;
justify-content: space-around;
width: 80%;
}

.producto-conteiner, .consolas-conteiner, .diversos-conteiner{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5em;
    justify-content:center;
    padding: 0;
    width: 100%;
}

.producto-conteiner li{
    display: flex;
    flex-direction: column;
   
}


.consolas-conteiner li{
    display: flex;
    flex-direction: column;
    margin-left: 1em;
}



.diversos-conteiner li{
    display: flex;
    flex-direction: column;
    margin-left: 1em;
}
 a{
    color: var(--colorPrimario);
    font-weight: bold;
    text-decoration: none;
}


p{
    
    margin: 0;
    margin-bottom: .5em;
}

p::before{
    content: "$";

}
footer > h2, h3{
    text-align: center;
}
.contenidos-footer{
    background-color: #EAF2FD;
    display: flex;
    justify-content: center;
    padding-bottom: 2em;
    padding-top: 3em;
    width: 100%;
}

.logo-footer{
align-content: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
margin-right: 7em;
padding: 1em;
width: 20%;

}




.logo-footer h2{
    align-items: center;
    color: var(--colorPrimario);
    margin-left: .1em;
    
}    
.logo-footer span{
    color: var(--colorSecunrario)
}
.logo-footer img{
    justify-content: center;
    width: 10%;
}


.info-footer{
   
    display: flex;
    flex-direction: column;
    margin-right: 5em;
    padding: 1em;
}
.info-footer h2{
    font-size: 1rem;
    font-weight: 100;
    margin-bottom: 2em;
    margin-top: 0;
}

.formulario{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1em;
    width: 40%;
    
}

.formulario form{
    display: flex;
    flex-direction: column;
    width: 80%;
}
.formulario h2{
    font-size: 1rem;
    font-weight: bold;
    margin-top: 0;
}
form > input{
    border: none;
    border-bottom: 1px solid rgb(151, 151, 151);
    margin-bottom: 1em;
    outline: none;
    padding: .5em;
}

form > button{
    background-color: var(--colorPrimario);
    border: none;
    color: #fff;
    height: 3.5em;
    margin-top: 1em;
    width: 10em;
}

.formulario textarea{
    border: none;
    border-bottom: 1px solid rgb(151, 151, 151);
    outline: none;
    padding: 1em;
    resize: none;
}

.login{
    justify-content: center;
}

main{
    align-items: center;
}
.conteiner-login{
align-content: center;
align-items: center;
background-color: #E5E5E5;
display: flex;
flex-direction: column;
justify-content: center;
width:100%;

}

.conteiner-login form{
    align-content: center;
    align-items: center;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    margin-bottom: 10%;
    margin-top: 10%;
    min-width: 20%;
    padding: 2em;
}

.conteiner-login input{
    border: none;
    border-bottom: 1px solid #464646;
    width: 100%;
}

.conteiner-login button{
    width: 100%;
    
}

.login{
   justify-content: flex-start;
   width: 90%;
}
/* Agregar peoductos */

.main-producto{
    background: #E5E5E5;
    display: flex;
    width: 100%;
}


.pagina-productos-conteiner{
    display: flex;
    width: 90%;
    

}

.productos-titulo{
    align-items: center;
    display: flex;
  
    justify-content: space-around;
    width: 100%;
}


.admin{
    flex-direction: column;
    gap: 1em;
    justify-content: center 
}

.admin-top{
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 2em;
    width: 100%;
}


.admin-top a{
    background-color: #2A7AE4;
    color: #fff;
    padding: 1em;
}

.visible{
    display: none;
    opacity:0;
}

.card{
    display: flex;

}



@media only screen and (max-width: 700px){
   
    main{
        width: 100%;
       
    }
    main h3{
        text-align: start;
    }
    header{
        display: flex;
        justify-content: center;
        padding: 1em 0em 1em;
        width: 100%;
    }
    .texto-hero h2{
        font-size: 2rem;
    }
    .texto-hero h3{
   
        font-size: 1.5rem;
        margin-bottom: 0;
    }
    .logo-conteiner{
        flex-direction: row;
        margin: 0;
    }
    .logo-conteiner h1{
        font-size: 1em;
    }
    .logo-conteiner img{
   
    }
    .banner{
       
       height: 50%;
    }
    .buscadorylogin {
        flex-direction: row-reverse;
        margin: 0;
        padding: 1em;
    }
    .buscadorylogin input{
        display: none;
    }
    .buscadorylogin button{
        margin: 0;
        width: 5em;
        
    }
    .buscadorylogin img{
        margin: 0;
        padding: 1em;
    }

    .producto-conteiner, .consolas-conteiner, .diversos-conteiner{
      flex-direction: row;
      width: 100%;
    } 

    footer{
        display: flex;
        flex-direction: column;
        
    }

    footer h3{
        margin-bottom: 1em;
        margin-top: 0
    }
    .contenidos-footer{
        align-content: center;
        display: flex;
        flex-direction: column;
       
    }
    .logo-footer{
        justify-content: center;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .info-footer{
        align-content: center;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        text-align: center;
    }
    .formulario{
        align-items: center;
        padding: 0;
        width: 100%;
    }
}