.contenedor {
  max-width: 460px; margin: 0 auto; display: grid; gap: 16px;
  padding: max(20px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
}
.encabezado { display: grid; gap: 8px; padding: 8px 2px 4px; }
.negocio { font-weight: 700; color: var(--marca); }
.encabezado h1 { font-size: clamp(26px, 7.5vw, 34px); letter-spacing: -.01em; }

/* La tarjeta: el color del restaurante de fondo, sellos grandes y el QR al frente. */
.tarjeta-sellos {
  background: var(--marca); color: var(--marca-texto); border-radius: 22px; padding: 22px 20px 20px;
  display: grid; gap: 16px; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .55);
}
.tarjeta-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tarjeta-cabeza h1 { font-size: 22px; }
.tarjeta-cabeza p { font-weight: 600; opacity: .9; }
.sellos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.sellos li {
  aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px;
  border: 2px dashed color-mix(in srgb, var(--marca-texto) 55%, transparent);
  color: color-mix(in srgb, var(--marca-texto) 70%, transparent);
}
.sellos li.puesto { background: var(--marca-texto); border: 2px solid var(--marca-texto); color: var(--marca); }
.sellos li.puesto svg { width: 58%; }
.sellos li.premio { border-style: solid; }
.avance { font-size: 18px; font-weight: 650; }
.qr-caja { background: #fff; color: var(--tinta); border-radius: 16px; padding: 16px; display: grid; justify-items: center; gap: 8px; }
.qr { width: min(64vw, 230px); }
.qr-caja p { font-weight: 600; font-size: 15px; }

.wallet { display: grid; gap: 10px; }
.wallet .boton { background: #000; color: #fff; border-color: #000; min-height: 52px; }

.instalar ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.ajustes summary { cursor: pointer; font-weight: 650; min-height: 32px; display: flex; align-items: center; }
.ajustes:not([open]) { gap: 0; }
.ajustes[open] { gap: 14px; }

@keyframes sello-nuevo { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sellos li.nuevo { animation: sello-nuevo .35s cubic-bezier(.2, .9, .3, 1.3); }