:root{
  --verde:#25D366;
  --oscuro:#111827;
  --gris:#f3f4f6;
  --naranja:#ff7a00;
  --borde:#e5e7eb;
  --rojo:#ef4444;
}

body{
  margin:0;
  padding:20px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:#fafafa;
  color:var(--oscuro);
}

.carrito-float{
  position:fixed;
  top:20px;
  right:20px;
  background:var(--naranja);
  color:#fff;
  padding:12px 16px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  display:flex;
  gap:8px;
  z-index:999;
}

.carrito-float span{
  background:#fff;
  color:var(--naranja);
  border-radius:50%;
  padding:2px 8px;
  font-size:13px;
}

.container{max-width:1100px;margin:auto}

.hero{
  background:#fff;
  border-radius:16px;
  padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:20px;
}

.imagen-wrap{position:relative;border-radius:12px;overflow:hidden}
.imagen-wrap img{width:100%}

.overlay{position:absolute;inset:0;mix-blend-mode:multiply}
.overlay.marfil{background:rgba(245,245,235,.35)}
.overlay.capuchino{background:rgba(181,137,92,.45)}
.overlay.negro{background:rgba(0,0,0,.55)}
.overlay.perla{background:rgba(220,220,220,.45)}
.overlay.celeste{background:rgba(140,190,220,.45)}

.precio{font-size:28px;font-weight:800;color:#e11d48;margin-bottom:16px}
.bloque{margin-bottom:14px}
.bloque label{font-weight:700;display:block;margin-bottom:6px}

.opciones{display:flex;gap:8px;flex-wrap:wrap}
.opciones button{
  border:1px solid var(--borde);
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
}
.opciones button.activo{
  background:#b08968;
  color:#fff;
  border-color:#b08968;
}

.cantidad{
  width:90px;
  padding:8px;
  border-radius:8px;
  border:1px solid var(--borde);
  font-size:16px;
}
.opciones button.activo .stock-text{
  color:#f8f5f0 !important;
}
.btn-agregar{
  width:100%;
  padding:14px;
  border:none;
  border-radius:12px;
  background:var(--verde);
  color:#fff;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
}

.card{
  background:#fff;
  border-radius:14px;
  padding:20px;
  margin-top:24px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.total{font-size:22px;font-weight:800}

.checkout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:10px;
}

.btn-confirmar{
  background:linear-gradient(135deg,#111827,#374151);
  color:#fff;
  border:none;
  border-radius:14px;
  padding:16px;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
}

.btn-whatsapp{
  background:linear-gradient(135deg,#25D366,#1ebe57);
  color:#fff;
  border:none;
  border-radius:14px;
  padding:16px;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
}

.btn-limpiar{
  margin-top:10px;
  width:100%;
  padding:12px;
  border:none;
  border-radius:12px;
  background:var(--rojo);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

#resumen{
  background:var(--gris);
  padding:14px;
  border-radius:10px;
  white-space:pre-line;
  margin-top:12px;
}

@media(max-width:700px){
  .hero{grid-template-columns:1fr}
  .checkout{grid-template-columns:1fr}
}
.checkout{
  display:flex !important;
  flex-direction:column;
  gap:12px;
}

.checkout .btn-confirmar,
.checkout .btn-whatsapp{
  width:100%;
}