*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
body{background:#f6f6f6;color:#333}

/* HEADER */
.header{
  background:#fff;
  padding:15px 6%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  z-index:100;
}
.logo{font-size:24px;font-weight:700}
.logo span{color:#ff4f81}
.nav a{margin:0 15px;text-decoration:none;color:#333}
.icons{display:flex;align-items:center;gap:15px}
.cart-icon{cursor:pointer;font-weight:600}
.cart-icon span{background:#ff4f81;color:#fff;padding:2px 6px;border-radius:50%}

/* HAMBURGER */
.hamburger{display:none;flex-direction:column;cursor:pointer}
.hamburger span{width:25px;height:3px;background:#333;margin:4px}

/* HERO */
.hero{
  height:80vh;
  background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),
  url("https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9") center/cover;
  display:flex;
  align-items:center;
  padding:0 6%;
  color:#fff;
}
.btn-primary{background:#ff4f81;padding:12px 30px;border-radius:30px;color:#fff;text-decoration:none}

/* PRODUCTOS */
.productos{padding:60px 6%}
.grid-productos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:25px;
}
.producto-card{
  background:#fff;
  padding:20px;
  border-radius:15px;
  text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.producto-card img{width:100%;border-radius:10px}
.producto-card button{
  margin-top:10px;
  background:#ff4f81;
  color:#fff;
  border:none;
  padding:10px 20px;
  border-radius:20px;
  cursor:pointer;
}

/* CARRITO */
.carrito{
  position:fixed;
  right:-100%;
  top:0;
  width:300px;
  height:100%;
  background:#fff;
  padding:20px;
  box-shadow:-4px 0 10px rgba(0,0,0,.2);
  transition:.3s;
  z-index:200;
}
.carrito.activo{right:0}
.carrito h3{margin-bottom:15px}
.total{margin-top:10px;font-weight:600}
.btn-whatsapp{
  display:block;
  margin-top:15px;
  background:#25D366;
  color:#fff;
  text-align:center;
  padding:10px;
  border-radius:20px;
  text-decoration:none;
}

/* FOOTER */
.footer{
  background:#111;
  color:#ccc;
  padding:40px 6% 20px;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
}
.footer h4{color:#fff;margin-bottom:10px}
.copy{text-align:center;margin-top:20px;font-size:14px}

/* RESPONSIVE */
@media(max-width:768px){
  .nav{display:none;position:absolute;top:65px;right:0;background:#fff;width:100%;flex-direction:column}
  .nav a{padding:15px;border-bottom:1px solid #eee}
  .hamburger{display:flex}
}