style.css

/*CSS Reset / Normalize*/
/* Hemos disponibilizado el básico de reset de estilos. Si quieren, añadan más informaciones 
en las secciones señaladas */
/*Já deixaremos o básico de reset de estilos. Caso queira adicionar mais informações
coloque nas sessões indicadas*/



body {
    box-sizing: border-box;
    background-color: var(--cor-de-fundo) ;
    font-family: 'Raleway';
    margin: 0;
    padding: 0;
    line-height: 1;
}
ol, ul,li {
    list-style: none;
}
a{
    text-decoration: none;
    color: var(--cor-de-link);
}

 /* fin reset */

section.top{
width: 100%;
}

.interno{
display: flex;
flex-direction: column;
align-items: center;
height: 115px;

background: #FFFFFF;
    }

.interno_top{
padding: 32px 0px;
width: 80%;
height: 115px;
background: #FFFFFF;
}

.derecha{
display: flex;
justify-content: space-around;
padding: 0px;
gap: 32px;



}
.ancho{
 align-items: center;
 display: flex;
    flex-direction: row;
    
}

.img_logo{
    
width: 176px;
height: 50px;

}

.busqueda_prod{
 
height: 50px;
margin-left: 5px;
width: 400px !important;
background: #F5F5F5;
border-radius: 20px;


font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
/* identical to box height, or 114% */

color: #A2A2A2;
}



.login{
/*  margin-left: 150px; */
}
.btn_login{
    /* Botao */


box-sizing: border-box;
width: 182px;
height: 51px;

border: 1px solid #2A7AE4;

font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;

color: #2A7AE4;
}

.banner{
width: 100%;
height: 352px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 41.15%, rgba(0, 0, 0, 0.8) 100%), url(./assets/banner-image.png) no-repeat;
background-size: cover;
 -moz-background-size: cover;
 -webkit-background-size: cover;
-o-background-size: cover;
}


.productos{
 margin-top: 3%;
}

.title_prod{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.cont_prod{
/* Auto layout */

display: flex;
flex-direction: row;
justify-content: space-around;
margin: 0 auto;
padding: 0px;
gap: 16px;

width: 80%;
height: 306px;
}

.prod_box h3 a{
    color: #2A7AE4;
}

.bajo{
    margin-top: 4%;
    width: 100%;
    height: 470px;
    background: #EAF2FD;
}

.footer{
    display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0 auto;

width:  80%;
height: 368px;
}

.cont{
    display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;


}

.formcontato__text{
    /* Auto layout */

display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 8px;

width: 400px;
margin:0 0 0 4%;
}
.formcontato__title{
    margin: 0 0 0 0;
}

.nav{
    width: 20%;
}

.menu__list{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1%;
    width: 20%;
    height: 234px;
    margin-right: 0;
   
}

.list_item{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 24px;
width: 400px;
height: 234px;



}

.list_item a{
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    font-size: 1.1em;
    line-height: 19px;
    color: #464646;
}

.pie{
width: 100%;
height: 102px;
background: #FFFFFF;
padding-top: 1%;

font-family: 'Raleway';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 19px;
text-align: center;

/* Preto/100% */

color: #464646;
}

.img_footer{
   margin-right: 1%;
}

.formcontato__input{
    /* Auto layout */

display: flex;
flex-direction: column;
align-items: flex-start;
padding: 5px;
gap: 8px;
/* Preto/branco */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
border: none;
background: #FFFFFF;
border-radius: 4px;
width: 560px;
height: 56px;

font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 16px;
color: #A2A2A2;

margin: 5px 0;
}

.formcontato__textarea{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 5px;
    gap: 8px;
    /* Preto/branco */
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    border: none;
    background: #FFFFFF;
    border-radius: 4px;
    width: 560px;
    
    font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 16px;
color: #A2A2A2;
}

.form_Btn{
width: 144px;
height: 51px;
background: #2A7AE4;

font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #FFFFFF;
}

.login_panel{
display: flex;
flex-direction: row;
align-items: center;
width: 423px;
height: 291px;
margin: 0 auto;
background: #E5E5E5;
}

.login_text{
    font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
margin: 5px;
}

.signin{

padding: 5px;
gap: 8px;
    width: 570px;
height: 56px;   
background: #2A7AE4;
margin-top: 2%;

font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 21px;

/* Preto/branco */

color: #FFFFFF;
}


.agregar_producto{
position: relative;
width: 423px;
height: 500px;
margin: 0 auto;
background: #E5E5E5;
}
/*Tablet*/
@media (min-width: 768px) {

/* Menú */

/*title*/

/*Skills*/

/*Hobbies*/

/*Formación Académica*/

/*Experiencia Profesional*/

}

/*Mobile*/
@media (min-width: 425px) {

/*Menu*/

/*Titulo*/

/*Sección sobre mi*/

/*Skills*/

/*Hobbies*/
 
/*Formación Académica*/

/*Experiencia Profesional*/

 /*Contacto*/

/*Footer*/

}