/* Página de la tarjeta de fidelidad. Solo tokens de marca (tokens.css), bordes en vez de sombras. */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-text);-webkit-text-size-adjust:100%}
h1,h2,h3,p,ul,ol{margin:0}
.t-h2,.t-h3{font-family:var(--font-display)}
.suave{color:var(--ink-soft)}
.pagina{max-width:480px;margin:0 auto;padding:var(--space-5) var(--space-4) var(--space-7);display:flex;flex-direction:column;gap:var(--space-4)}
.cab{display:flex;align-items:center;gap:var(--space-3)}
.cab-logo{width:48px;height:48px;border-radius:var(--radius-pill);flex:none;background:var(--brand)}

.tarjeta{background:var(--surface);border:1.5px solid var(--brand);border-radius:var(--radius-xl);border-top-right-radius:var(--radius-leaf);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.cifra{font-family:var(--font-display);font-weight:700;letter-spacing:-0.025em;line-height:1}
.cifra span{font-size:72px}
.cifra small{font-size:20px;font-weight:600;color:var(--ink-soft);letter-spacing:0}
.aviso{color:var(--ink)}

.barra{-webkit-appearance:none;appearance:none;display:block;width:100%;height:12px;border:1.5px solid var(--border);border-radius:var(--radius-pill);background:var(--bg);overflow:hidden;color:var(--brand)}
.barra::-webkit-progress-bar{background:var(--bg);border-radius:var(--radius-pill)}
.barra::-webkit-progress-value{background:var(--brand);border-radius:var(--radius-pill)}
.barra::-moz-progress-bar{background:var(--brand);border-radius:var(--radius-pill)}

.sellos{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:var(--space-2)}
.sello{aspect-ratio:1;border-radius:var(--radius-pill);border:1.5px dashed var(--border);background:var(--bg);display:grid;place-items:center;font-weight:700;color:var(--on-brand)}
.sello--lleno{border:1.5px solid var(--brand);background:var(--brand)}

.bloque{background:var(--surface-raised);border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.lista{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.lista li{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding-bottom:var(--space-3);border-bottom:1.5px solid var(--border)}
.lista li:last-child{border-bottom:0;padding-bottom:0}
.etq{flex:none;font-size:13px;font-weight:600;border:1.5px solid var(--border);border-radius:var(--radius-pill);padding:4px 12px;color:var(--ink-soft)}
.etq--si{background:var(--brand-deep);border-color:var(--brand-deep);color:var(--on-brand-deep)}
.reglas{white-space:pre-line}

.codigo{align-items:center;text-align:center}
.qr{width:200px;height:200px;border-radius:var(--radius-sm);border:1.5px solid var(--border)}
.cod{font-family:var(--font-display);font-weight:600;font-size:26px;letter-spacing:.08em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--space-5);border-radius:var(--radius-pill);background:var(--brand-deep);color:var(--on-brand-deep);font-weight:600;font-size:17px;text-decoration:none;width:100%}
.btn:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px}
.pie{text-align:center}
@media (min-width:520px){.pagina{padding-top:var(--space-7)}}

.bienvenida .btn{margin-top:var(--space-2)}
.novedades li{flex-direction:column;align-items:flex-start;gap:var(--space-1)}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:14px;font-weight:600}
.campo input{height:50px;padding:0 var(--space-3);border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--ink);font:inherit;font-size:16px}
.campo input:focus-visible{outline:3px solid var(--brand-deep);outline-offset:2px}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.terminos{border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3)}
.terminos summary{cursor:pointer;color:var(--brand-deep)}
.terminos p{margin-top:var(--space-2);white-space:pre-line}
.acepto{display:flex;gap:var(--space-3);align-items:flex-start}
.acepto input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--brand-deep)}
.error{border:1.5px solid var(--accent-cta);border-radius:var(--radius-sm);padding:var(--space-3);font-weight:600}
button.btn{border:0;cursor:pointer;font-family:var(--font-text)}
.cartel-hoja{max-width:640px;margin:0 auto;padding:var(--space-6) var(--space-4);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4)}
.cartel-hoja .qr{width:min(70vw,360px);height:auto}
.pasos{text-align:left;padding-left:var(--space-5)}
@media print{body.cartel{background:#fff;color:#000}}

/* Botón oficial de Google Wallet: se usa tal cual lo entrega Google (sin cambiar color ni forma); alto mínimo 48 px y 8 px de aire alrededor */
.wallet-boton{display:block;width:max-content;max-width:100%;margin:var(--space-2) auto;padding:8px;line-height:0;border-radius:var(--radius-pill)}
.wallet-boton img{display:block;height:55px;width:auto;max-width:100%}
.wallet-boton:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px}