@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }

body {
  min-height: 100svh;
  font-family: 'Poppins', sans-serif;
  background: radial-gradient(circle at top, #1a1b2e, #0c0d14);
  color: #f1f1f5;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* SLIDES */
.slides { max-width:420px; width:100%; text-align:center; }
.slide { display:none; animation:fade .6s ease; }
.slide.active { display:block; }

.next-btn {
  margin-top:28px;
  width:100%;
  padding:14px;
  border-radius:18px;
  border:none;
  background:linear-gradient(135deg,#6a6aff,#8f8fff);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

/* CALCULO */
.progress-wrap {
  width:100%;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  margin:24px 0 18px;
  overflow:hidden;
  transition:.4s;
}
.progress-wrap.hide { opacity:0; height:0; margin:0; }
.progress-bar {
  width:0%;
  height:100%;
  background:linear-gradient(90deg,#6a6aff,#8f8fff);
}
.calc-number { font-size:2.4rem; font-weight:800; }
.calc-number.final {
  font-size:3.6rem;
  animation:pulse 1s ease;
  text-shadow:0 0 18px #8f8fff;
}

/* SHOP */
.hidden { display:none; }
.shop { max-width:1100px; width:100%; text-align:center; }
.wallet { margin-bottom:32px; color:#cfcfe8; }

.shop-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:24px;
}

.product-card {
  background:rgba(255,255,255,.05);
  border-radius:24px;
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  height:360px;
}

.product-card img {
  width:100%;
  height:140px;
  object-fit:contain;
  background:#fff;
  border-radius:14px;
  padding:8px;
}

.product-card h2 {
  margin-top:12px;
  font-size:1.1rem;
}

.desc {
  font-size:.8rem;
  color:#cfcfe8;
  margin:4px 0 6px;
  text-align:center;
}

.price {
  font-size:.75rem;
  opacity:.8;
}

.qty {
  margin-top:auto;
  display:flex;
  gap:16px;
  align-items:center;
}

.qty button {
  width:38px;
  height:38px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.15);
  color:#fff;
  font-size:1.4rem;
  cursor:pointer;
}

.count { font-weight:600; }

@keyframes fade { from{opacity:0;transform:translateY(12px)} to{opacity:1} }
@keyframes pulse { 50%{transform:scale(1.25)} }

/* BOTÓN CHECKOUT */
.checkout-btn {
  margin: 32px auto 0;
  width: 100%;
  max-width: 420px;
  padding: 16px;
  border-radius: 20px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg,#6a6aff,#8f8fff);
  color: #fff;
  display: block;
  transition: opacity .3s, filter .3s;
}

.checkout-btn.disabled {
  opacity: .4;
  filter: grayscale(1);
  cursor: not-allowed;
}

/* BOTÓN VOLVER */
.back-btn {
  position: fixed;
  top: 16px;
  left: 16px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  color: #fff;
  text-decoration: none;
  font-size: .85rem;
  backdrop-filter: blur(6px);
}