/* CSS NIVEL PRO */
:root{
 --azul:#1f5fa5;
 --oscuro:#153e6f;
 --dorado:#d4af37;
}

body{margin:0;font-family:'Poppins';background:#f8f6f2;}

/* header sticky */
.header{
 position:sticky;
 top:0;
 display:flex;
 justify-content:space-between;
 align-items:center;
 background:var(--oscuro);
 color:white;
 padding:10px 20px;
 z-index:1000;
}

.menu-toggle{display:none;font-size:25px;cursor:pointer;}

nav{
 display:flex;
 justify-content:center;
 background:var(--azul);
}

nav a{color:white;padding:15px;text-decoration:none;}

/* banner */
.banner img{width:100%;}
.overlay{
 position:absolute;
 top:50%;left:50%;
 transform:translate(-50%,-50%);
 color:white;
 text-align:center;
}

.btn{
 background:var(--dorado);
 padding:10px 20px;
 border-radius:30px;
 text-decoration:none;
 color:black;
}

.glow{animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 10px gold;}50%{box-shadow:0 0 25px gold;}100%{box-shadow:0 0 10px gold;}}

/* productos */
.container{display:flex;flex-wrap:wrap;padding:20px;}
.box{flex:1 1 45%;margin:10px;background:white;padding:15px;border-radius:10px;opacity:0;transform:translateY(40px);transition:.4s;}
.box.active{opacity:1;transform:translateY(0);}

.btn-cart{
 background:var(--azul);
 color:white;
 border:none;
 padding:10px;
 margin-top:10px;
 cursor:pointer;
}

/* carrito flotante */
.cart{
 position:fixed;
 bottom:20px;
 right:20px;
 background:var(--oscuro);
 color:white;
 padding:15px;
 border-radius:50px;
}

/* responsive */
@media(max-width:768px){
 nav{display:none;flex-direction:column;}
 nav.show{display:flex;}
 .menu-toggle{display:block;}
 .box{flex:1 1 100%;}
}

footer{text-align:center;background:var(--oscuro);color:white;padding:15px;}