*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;

}


body{

background:#080808;
color:white;

}



/* HEADER */


header{

position:fixed;
top:0;
left:0;

width:100%;

padding:20px 8%;

display:flex;
justify-content:space-between;
align-items:center;

background:rgba(0,0,0,.6);
backdrop-filter:blur(15px);

z-index:100;

}



.logo{

display:flex;
align-items:center;
gap:10px;

font-size:25px;
font-weight:700;

color:#e6c24fd0;

}



.logo img{

width:40px;
height:40px;
object-fit:contain;

}



nav{

display:flex;
gap:35px;

}


nav a{

color:white;
text-decoration:none;
transition:.3s;

}



nav a:hover{

color:#d4af37;

}



.menu{

display:none;
font-size:28px;

}



/* HERO */


.hero{

height:100vh;

display:flex;
align-items:center;
justify-content:center;

text-align:center;


background:

radial-gradient(circle at top,#4b3800,transparent 35%),

linear-gradient(#080808,#111);

}



.hero h1{

font-size:60px;
max-width:850px;

}



.hero span{

color:#d4af37;

}



.hero p{

margin-top:20px;
color:#aaa;

}



.btn{

display:inline-block;

margin-top:35px;

padding:14px 40px;

background:#d4af37;

color:black;

border-radius:30px;

text-decoration:none;

font-weight:600;

}





/* PRODUCTOS */


.products{

padding:90px 8%;

}



.products h2{

text-align:center;

font-size:35px;

margin-bottom:50px;

}



.container{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(240px,1fr));

gap:30px;

}




.card{


background:#111;

border:1px solid #222;

border-radius:20px;

padding:25px;

transition:.3s;


}



.card:hover{

transform:translateY(-10px);

border-color:#d4af37;

}




.card img{

width:100%;

height:260px;

object-fit:contain;

}



.card h3{

margin-top:15px;

}




.price{

color:#d4af37;

font-size:20px;

margin-top:10px;

}

.stock{

color:#70dd45;

font-size:20px;

margin-top:10px;

}


.loading{

text-align:center;

width:100%;

color:#aaa;

}



/* MOBILE */


@media(max-width:768px){


nav{

display:none;

}


.menu{

display:block;

}



.hero h1{

font-size:38px;

}



header{

padding:20px 5%;

}


}

.buy-btn{

display:flex;
align-items:center;
justify-content:center;
gap:10px;

margin-top:20px;

padding:12px;

background:#25D366;

color:white;

text-decoration:none;

border-radius:25px;

font-weight:600;

transition:.3s;

}


.buy-btn i{

font-size:20px;

}


.buy-btn:hover{

transform:translateY(-3px);

box-shadow:0 10px 20px #25D36655;

}

@media(max-width:768px){

nav{

position:absolute;

top:80px;
right:5%;

background:#111;

width:200px;

padding:20px;

border-radius:15px;

display:none;

flex-direction:column;

gap:20px;

border:1px solid #222;

}


nav.active{

display:flex;

}


}