*{font-family: 'lato', sans-serif;
margin: 0; padding: 0;
box-sizing: border-box
}

body{background-image: url(fonfo-01.svg);
background-size: cover;
justify-content: center;
display: flex;
flex-direction: column;
justify-content: space-between;}


/****************Header*******************/

header{
    max-width: 100vw;
    display: flex;
    flex-direction: column;
     background-color: #17002b;
   }

.divheader{display: flex;
    flex-direction: row;
    width: 90%;
    justify-content: space-between;
    align-items: center;
    height: 55px;
 background-color: #17002b;
    margin: auto;}


.menu{width: 30px;
margin-right: .5em}

.menu:hover {width: 32px;}

.lupa{width: 20px}

.campana{width: 15px;
margin-right: .6em}

.campana:hover {width: 22px}

.flecha{width: 10px;
margin-bottom: .1em}

.flecha:hover {width: 12px; height: 7px;}

.primero{ 
display: flex;
flex-direction: row;
align-items: baseline;}

.segundo{display: flex;
 flex-direction: row;
justify-content: space-between;
align-items: flex-end;
width: 7em;}

.segundo p{font-size: .9em;}

.usuario {color: #ffffff;
font-weight: 400;
margin-right: .4em}

.usuario span{color: #bf0310;
font-weight: 100;}

/*Categorías*/


ul{width: 100vw; 
display: flex;
flex-direction: row;
justify-content: space-around;
list-style: none;
background-color: #332062;
padding-top: .3em;
padding-bottom: .2em;
overflow: hidden;
}


ul li a{color: yellow;
text-decoration: none;
font-size: .8em;
font-weight: 300;
padding: 0 1em 0 1em;
}

ul li a:hover{border-bottom: 6px solid;
border-color: red;}

/*********Main************/


main{display: flex;
flex-direction: column;
align-content: space-between;
width: 100vw;}

a{text-decoration: none;
color: white;}

.seccion{height: 30vh;
margin-bottom: .4em;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
overflow: hidden;}

.texto{position: absolute;
margin: auto;
margin-bottom: 1em;
bottom:0;
width: 90%}

h1{color: yellow;
    font-size: 1.8em;}

.copete{font-size: .9em;
    font-weight: 600;
color: black;
background-color: rgba(198, 198, 198, 0.69);}

h2{color: yellow;
font-size: 1.em;
}

a {text-decoration: none;
color: yellow;}



main img {width: 100%;}


/***********Sección dos y cuatro****************/


.secundaria{display: display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;}


.A1{width: 49%;}