*{
box-sizing:border-box;
font-family:Arial, sans-serif;
}


body{

margin:0;
background:#f5f7fb;
color:#333;

}




.header{

height:70px;
background:white;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 40px;
box-shadow:0 2px 8px #ddd;

}



.logo{

font-size:30px;
font-weight:bold;
color:#0066ff;

}



.usuario{

font-size:30px;
cursor:pointer;

}





.principal{

text-align:center;
padding:50px 20px;

}



.principal h1{

font-size:38px;

}



.buscador{

margin:30px auto;
max-width:650px;
display:flex;

}



.buscador input{

flex:1;
padding:18px;
border:none;
border-radius:10px 0 0 10px;
font-size:16px;

}



.buscador button{

background:#0066ff;
color:white;
border:none;
padding:18px 25px;
border-radius:0 10px 10px 0;
cursor:pointer;

}




.opciones button{

margin:10px;
padding:12px 20px;
border:none;
border-radius:20px;
cursor:pointer;

}





.categorias,
.tiendas{

padding:30px;

}



.lista-categorias{

display:flex;
gap:20px;
flex-wrap:wrap;

}



.lista-categorias div{

background:white;
padding:20px;
border-radius:15px;
width:130px;
text-align:center;
box-shadow:0 2px 8px #ddd;

}




.tarjetas{

display:flex;
gap:20px;
flex-wrap:wrap;

}



.tienda{

background:white;
padding:20px;
width:280px;
border-radius:15px;
box-shadow:0 2px 10px #ddd;

}



.tienda button{

background:#0066ff;
color:white;
border:0;
padding:10px 20px;
border-radius:8px;

}





footer{

margin-top:50px;
background:#222;
color:white;
text-align:center;
padding:20px;

}