:root{
  --lime:#FED46D;--lime-d:#E9AE47;--cocoa:#862211;
  --olive:#862211;--olive-h:#6E1A0C;--olive-a:#2B1410;
  --ink:#2B1410;--brown:#862211;--muted:#8C6B5C;--faint:#B69C8E;
  --cream:#FBF4E6;--paper:#F7E2B8;--line:#ECD9BF;--line2:#F2E5D0;--soft:#F6EDDE;
  --gold:#FED46D;--gold-d:#862211;--gold-l:#FED46D;--gold-bg:#FCEACB;
  --dark:#862211;--night:#3B0E07;
  --serif:'EB Garamond',Georgia,serif;--display:'EB Garamond',Georgia,serif;--body:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#F2E3CB;font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}
input:focus{outline:none;border-color:var(--olive)!important;box-shadow:0 0 0 3px rgba(134,34,17,.15)}
button:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
[hidden]{display:none!important}

@keyframes stampPop{0%{transform:scale(.3);opacity:0}55%{transform:scale(1.22);opacity:1}75%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes confetti{0%{transform:translate(-50%,-50%) rotate(0);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r));opacity:0}}
@keyframes slam{0%{transform:scale(2.2) rotate(-14deg);opacity:0}55%{transform:scale(.92) rotate(-8deg);opacity:1}100%{transform:scale(1) rotate(-8deg);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes scanLine{0%{top:12%}50%{top:84%}100%{top:12%}}

/* ---- marco: móvil a pantalla completa, en escritorio centrado ---- */
.app{position:relative;width:100%;max-width:440px;height:100dvh;margin:0 auto;overflow:hidden;background:var(--cream)}
@media (min-width:600px){.app{height:min(100dvh,900px);top:max(0px,calc((100dvh - 900px)/2));border-radius:36px;box-shadow:0 40px 80px -30px rgba(70,15,5,.45)}}
.screen{position:absolute;inset:0;animation:fadeIn .18s ease}
.scroll{overflow-y:auto;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.pad{padding:calc(env(safe-area-inset-top) + 34px) 22px 120px;display:flex;flex-direction:column;gap:22px}

/* fotos: si no existe /img/xxx.jpg se ve el degradado cálido */
.photo{position:absolute;inset:0;background-size:cover;background-position:center}
.ph-hero{background-image:url(/img/bienvenida.jpg),linear-gradient(135deg,#FED46D,#E9AE47)}
.ph-register{background-image:url(/img/registro.jpg),linear-gradient(135deg,#FED46D,#E9AE47)}
.ph-merienda{background-image:url(/img/merienda.jpg),linear-gradient(120deg,#862211 30%,#B0471F)}
.ph-cumple{background-image:url(/img/cumple.jpg),linear-gradient(120deg,#862211 30%,#D99A3A)}
.ph-zumo{background-image:url(/img/zumo.jpg),linear-gradient(135deg,#FED46D,#D99A3A)}
.ph-cafe{background-image:url(/img/cafe.jpg),linear-gradient(135deg,#9C3A22,#862211)}
.ph-pizza{background-image:url(/img/pizza.jpg),linear-gradient(135deg,#F9DDA3,#FED46D)}
.shade{position:absolute;inset:0;pointer-events:none}

/* tipografía */
.brand{font-family:var(--serif);font-weight:500;line-height:1;color:#fff}
.sub{font-weight:700;text-transform:uppercase;letter-spacing:.34em}
.kicker{font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--olive)}
.kicker.muted{color:var(--muted)}
.kicker.gold{color:var(--gold-l)}
.h1{font-size:30px;font-family:var(--display);font-weight:600;line-height:1.1}
.lead{font-size:15px;line-height:1.5;color:var(--brown)}

/* botones */
.btn{height:56px;border:none;border-radius:14px;font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:.01em;display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.btn-olive{background:var(--cocoa);color:var(--lime)}
.btn-olive:hover{background:var(--olive-h)}.btn-olive:active{background:var(--olive-a)}
.btn-white{background:#fff;color:var(--ink);font-size:16px}
.btn-white:hover{background:var(--soft)}
.btn-line{background:#fff;color:var(--ink);border:1px solid var(--line);font-size:15px;height:52px}
.btn-black{background:#000;color:#fff;font-size:15px;height:52px}
.btn:disabled{opacity:.55;cursor:default}
.link{border:none;background:none;font-size:13px;font-weight:700;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:8px}
.round{width:42px;height:42px;border-radius:21px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.round:hover{background:var(--soft)}

/* formularios */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;font-weight:700;color:var(--brown)}
.input{height:54px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 16px;font-size:17px;color:var(--ink);width:100%;min-width:0}
.prefix{height:54px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;align-items:center;font-size:17px;color:var(--brown)}
.error{font-size:14px;font-weight:700;color:#9A3B22;background:#FBE9E4;border-radius:10px;padding:10px 14px}

/* bienvenida */
.welcome-top{position:absolute;top:calc(env(safe-area-inset-top) + 80px);left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.welcome-bottom{position:absolute;left:28px;right:28px;bottom:calc(env(safe-area-inset-bottom) + 40px);display:flex;flex-direction:column;gap:14px}

/* registro */
.reg-hero{position:relative;height:250px;background:var(--lime);overflow:hidden}
.reg-body{position:relative;margin-top:-20px;background:var(--cream);border-radius:24px 24px 0 0;padding:32px 24px 40px;display:flex;flex-direction:column;gap:20px}
.back-float{position:absolute;top:calc(env(safe-area-inset-top) + 24px);left:20px;width:40px;height:40px;border-radius:20px;border:none;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center}

/* tarjeta */
.topbar{display:flex;align-items:center;justify-content:space-between}
.avatar{font-family:var(--serif);font-weight:600;color:var(--brown);background:#fff;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center}
.stampcard{position:relative;border-radius:20px;background:var(--paper);padding:8px;box-shadow:0 1px 2px rgba(134,34,17,.08),0 12px 28px -14px rgba(134,34,17,.28)}
.stampcard-in{border:1.5px dashed rgba(134,34,17,.28);border-radius:14px;padding:20px 18px 18px;display:flex;flex-direction:column;gap:18px}
.grid-wrap{position:relative;padding-bottom:14px;display:flex;justify-content:center}
.stamp-grid{display:grid;grid-template-columns:repeat(5,52px);gap:18px 12px;position:relative}
.stamp{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;border:1.2px solid rgba(134,34,17,.28);background:rgba(255,255,255,.35)}
.stamp.on{border:1.5px solid var(--gold);background:var(--gold-bg)}
.stamp.pop{animation:stampPop .65s cubic-bezier(.34,1.56,.64,1) .1s both}
.stamp .free{position:absolute;bottom:-16px;font-size:9px;font-family:var(--display);font-weight:600;letter-spacing:.14em;color:var(--gold-d)}
@media (max-width:360px){.stamp-grid{grid-template-columns:repeat(5,46px);gap:16px 8px}.stamp{width:46px;height:46px}}
.promo-banner{position:relative;height:96px;border:none;padding:0;border-radius:16px;overflow:hidden;background:var(--dark);text-align:left;width:100%}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:visible}
.confetti span{position:absolute;opacity:0;border-radius:1px}

/* QR */
.qr-box{padding:22px;background:#fff;border-radius:24px;border:1px solid var(--line2);box-shadow:0 18px 40px -22px rgba(134,34,17,.35)}
.qr-box svg,.qr-box canvas{display:block}
.pill{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:var(--paper);font-size:14px;font-weight:700;color:var(--brown);font-variant-numeric:tabular-nums}
.flash{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:rgba(250,247,242,.95);animation:fadeIn .2s ease;z-index:5}
.seal{width:168px;height:168px;border-radius:50%;border:3px solid var(--gold);box-shadow:inset 0 0 0 7px var(--cream),inset 0 0 0 8.5px var(--gold);background:var(--gold-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;animation:slam .55s cubic-bezier(.3,1.4,.5,1) both}

/* premios */
.reward{display:flex;gap:14px;align-items:center;padding:12px;background:#fff;border-radius:16px;border:1px solid var(--line2);box-shadow:0 1px 2px rgba(134,34,17,.05)}
.reward.ready{border-color:var(--gold-l)}
.reward .thumb{position:relative;width:72px;height:72px;flex-shrink:0;border-radius:12px;overflow:hidden;background:#F7E2B8}
.reward .t{font-size:17px;font-family:var(--display);font-weight:600}
.reward .c{font-size:13px;color:var(--muted)}
.avail{font-size:11px;font-family:var(--display);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d)}
.left{font-size:12px;font-weight:700;color:var(--muted)}
.bar{height:4px;border-radius:2px;background:var(--paper);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--gold);border-radius:2px}
.lock{width:40px;height:40px;border-radius:20px;background:var(--soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mini{height:40px;padding:0 16px;border:none;border-radius:10px;background:var(--cocoa);color:var(--lime);font-family:var(--display);font-size:15px;font-weight:600}

/* promos */
.promo{position:relative;height:280px;border-radius:20px;overflow:hidden;background:var(--dark);box-shadow:0 14px 30px -18px rgba(70,15,5,.5)}
.promo .txt{position:absolute;left:20px;right:20px;bottom:20px;display:flex;flex-direction:column;gap:6px}
.promo .ttl{font-size:24px;font-family:var(--display);font-weight:600;color:#fff;line-height:1.15}
.promo .dsc{font-size:14px;color:rgba(255,255,255,.85)}
.badge{position:absolute;top:16px;right:16px;padding:8px 12px;border-radius:10px;background:var(--gold);color:var(--ink);font-size:15px;font-family:var(--display);font-weight:600}

/* perfil */
.row-card{display:flex;align-items:center;gap:14px;padding:16px;background:#fff;border:1px solid var(--line2);border-radius:16px}
.hist{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line2);gap:12px}
.hist .a{font-size:15px;font-weight:700}
.hist .b{font-size:13px;color:var(--muted)}
.hist .s{font-size:13px;font-family:var(--display);font-weight:600;color:var(--gold-d);white-space:nowrap}
.hist .s.r{color:var(--olive)}

/* barra inferior */
.nav{position:absolute;left:0;right:0;bottom:0;height:calc(72px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line2);display:grid;grid-template-columns:repeat(5,1fr);padding:8px 4px 0;z-index:4}
.nav button{border:none;background:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:4px;height:52px;color:var(--faint);font-size:11px;font-weight:700}
.nav button.on{color:var(--olive)}

.toast{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:700;z-index:9;animation:riseIn .25s ease;max-width:86%;text-align:center}

/* ---- modo negocio ---- */
.biz{background:var(--night);color:#fff;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 30px) 24px calc(env(safe-area-inset-bottom) + 32px);gap:24px}
.biz .out{height:38px;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;font-size:14px;font-weight:700}
.viewer{position:relative;width:290px;height:290px;max-width:100%;border-radius:28px;background:radial-gradient(circle at 50% 45%,#862211,#2A0905);overflow:hidden}
.viewer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.corner{position:absolute;width:44px;height:44px;border:0 solid var(--gold)}
.corner.tl{top:18px;left:18px;border-top-width:3px;border-left-width:3px;border-top-left-radius:14px}
.corner.tr{top:18px;right:18px;border-top-width:3px;border-right-width:3px;border-top-right-radius:14px}
.corner.bl{bottom:18px;left:18px;border-bottom-width:3px;border-left-width:3px;border-bottom-left-radius:14px}
.corner.br{bottom:18px;right:18px;border-bottom-width:3px;border-right-width:3px;border-bottom-right-radius:14px}
.scanline{position:absolute;left:30px;right:30px;height:2px;border-radius:1px;background:var(--gold);box-shadow:0 0 14px 2px rgba(254,212,109,.6);animation:scanLine 2.4s ease-in-out infinite}
.found{background:var(--cream);color:var(--ink);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:18px;animation:riseIn .3s ease}
.dots{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.dots i{height:8px;border-radius:4px;background:#701C0E}
.dots i.on{background:var(--gold)}
.ready-note{padding:10px 14px;border-radius:10px;background:var(--gold-bg);color:#862211;font-size:14px;font-weight:700}
.redeem{display:flex;flex-wrap:wrap;gap:8px}
.redeem button{height:40px;padding:0 14px;border-radius:10px;border:1.5px solid var(--gold);background:var(--gold-bg);color:var(--brown);font-size:14px;font-family:var(--display);font-weight:600}
.big{height:68px;border:none;border-radius:14px;background:var(--lime);color:var(--cocoa);font-size:24px;font-family:var(--display);font-weight:600;width:100%}
.big:hover{background:#F8D08A}.big:active{background:var(--lime-d)}
.ghost{height:48px;border:none;border-radius:12px;background:transparent;color:rgba(255,255,255,.75);font-size:15px;font-weight:700;width:100%}
.check{width:140px;height:140px;border-radius:50%;background:var(--lime);display:flex;align-items:center;justify-content:center;animation:stampPop .6s cubic-bezier(.34,1.56,.64,1) both;box-shadow:0 0 0 10px rgba(134,34,17,.22)}
.pin-input{height:64px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-size:30px;letter-spacing:.5em;text-align:center;width:100%}
.manual{display:flex;gap:8px;width:100%}
.manual input{flex:1;height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;padding:0 14px;font-size:15px;min-width:0}
.manual button{height:48px;padding:0 16px;border:none;border-radius:12px;background:#fff;color:var(--ink);font-weight:700}
.biz .error{background:rgba(162,59,42,.25);color:#FFD9CF}

/* ---- estética del logo ---- */
.display{font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.01em;color:var(--cocoa)}
.h1{font-family:var(--display);font-weight:600;color:var(--cocoa)}
.kicker{font-family:var(--display);font-weight:600;letter-spacing:.2em}
.welcome{background:var(--lime);overflow:hidden}
.welcome .kicker{color:var(--cocoa);opacity:.75}
.btn-cream{background:var(--cream);color:var(--cocoa);font-size:17px}
.btn-cream:hover{background:#fff}
.back-float{background:var(--cream)}
.logo{display:inline-flex;align-items:flex-end;gap:.3em;font-family:var(--display);font-weight:700;line-height:.8;text-transform:uppercase;white-space:nowrap;letter-spacing:-.01em}
.logo .zzz{display:flex;flex-direction:column-reverse;align-items:flex-start;align-self:stretch;justify-content:flex-start}
.logo .zzz i{font-style:normal;display:block;line-height:.7;margin-top:-.04em}
.logo .zzz i:nth-child(1){font-size:1.5em}
.logo .zzz i:nth-child(2){font-size:1.08em;margin-left:.55em}
.logo .zzz i:nth-child(3){font-size:.82em;margin-left:1.05em}
.logo .words{display:flex;flex-direction:column;gap:.14em;font-size:1.08em}
.logo .words>span{display:flex;align-items:flex-end;gap:.03em}
.logo small{font-size:.66em;line-height:.8}
.logo-svg{display:inline-block;-webkit-mask:url(/img/logo.svg) center/contain no-repeat;mask:url(/img/logo.svg) center/contain no-repeat}
.stampcard{background:var(--lime)}
.stampcard-in{border-color:rgba(134,34,17,.35)}
.stamp{background:rgba(251,244,230,.5);border-color:rgba(134,34,17,.3)}
.stamp.on{background:var(--cocoa);border-color:var(--cocoa)}
.stamp .free{color:var(--cocoa)}
.nav button.on{color:var(--cocoa)}
.avatar{font-family:var(--display);background:var(--lime);border-color:var(--lime);color:var(--cocoa)}
.pill{background:var(--lime);color:var(--cocoa)}
.qr-box{border-color:var(--lime);border-width:3px}
.seal{border-color:var(--cocoa);box-shadow:inset 0 0 0 7px var(--cream),inset 0 0 0 8.5px var(--cocoa);background:var(--lime)}
.reward.ready{border-color:var(--lime);border-width:2px}
.avail{color:var(--cocoa)}
.badge{background:var(--lime);color:var(--cocoa);font-family:var(--display);font-weight:600}
.biz .kicker.gold{color:var(--lime)}
.found .avatar{background:var(--lime)}
.ready-note{background:var(--lime);color:var(--cocoa)}
.redeem button{border-color:var(--cocoa);background:var(--lime);color:var(--cocoa);font-family:var(--display);font-weight:600}
.dots i.on{background:var(--lime)}
.found .dots i{background:#F2E5D0}
.found .dots i.on{background:var(--cocoa)}
.corner{border-color:var(--lime)}
.scanline{background:var(--lime)}

.welcome .welcome-top{top:calc(env(safe-area-inset-top) + 16%)}

/* ---- ranking ---- */
.rank-teaser{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:none;border-radius:16px;background:var(--cocoa)}
.rt-pos{width:44px;height:44px;border-radius:22px;background:rgba(254,212,109,.15);color:var(--lime);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:20px;flex-shrink:0}
.prize{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;background:var(--lime);color:var(--cocoa)}
.rk-me{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:#fff;border:2px solid var(--cocoa)}
.rk-me-pos{min-width:56px;height:56px;padding:0 8px;border-radius:28px;background:var(--cocoa);color:var(--lime);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:19px;white-space:nowrap}
.podium{display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:end;gap:8px;margin-top:10px}
.pod{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.pod-av{position:relative;width:52px;height:52px;border-radius:50%;background:var(--paper);border:2px solid var(--cocoa);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:22px;color:var(--cocoa)}
.p1 .pod-av{width:64px;height:64px;font-size:28px;background:var(--lime)}
.pod.me .pod-av{box-shadow:0 0 0 4px rgba(254,212,109,.6)}
.crown{position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:13px;background:var(--lime);border:2px solid var(--cocoa);display:flex;align-items:center;justify-content:center}
.pod-name{font-family:var(--display);font-weight:600;font-size:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod-v{font-size:12px;font-weight:700;color:var(--muted)}
.pod-step{width:100%;margin-top:4px;border-radius:12px 12px 4px 4px;color:var(--lime);display:flex;align-items:flex-start;justify-content:center;padding-top:8px;font-family:var(--display);font-weight:600;font-size:26px}
.p1 .pod-step{height:96px;background:var(--cocoa)}
.p2 .pod-step{height:70px;background:#9C3A22}
.p3 .pod-step{height:52px;background:#8C6B5C}
.rk-list{display:flex;flex-direction:column}
.rk-row{display:flex;align-items:center;gap:14px;padding:13px 6px;border-bottom:1px solid var(--line2)}
.rk-row.me{background:var(--lime);border-radius:12px;border-bottom-color:transparent;padding-inline:12px}
.rk-pos{width:28px;font-family:var(--display);font-weight:600;font-size:17px;color:var(--muted)}
.rk-row.me .rk-pos{color:var(--cocoa)}
.rk-name{flex:1;font-size:15px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-v{font-size:13px;font-weight:800;color:var(--cocoa)}
.rk-gap{text-align:center;color:var(--faint);padding:4px 0;letter-spacing:.3em}
.rank-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--cocoa);color:var(--lime);font-family:var(--display);font-weight:600;font-size:13px}
.nav button{font-size:10.5px}

/* ---- ticket del camarero ---- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.prod{position:relative}
.prod-main{width:100%;min-height:96px;border:1.5px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.05);color:#FBF4E6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 4px}
.prod-main:active{transform:scale(.97)}
.prod.on .prod-main{background:var(--lime);border-color:var(--lime);color:var(--cocoa)}
.prod-name{font-family:var(--display);font-weight:600;font-size:14px;line-height:1.1;text-align:center}
.prod-st{font-size:11px;font-weight:700;opacity:.7}
.prod-q{position:absolute;top:6px;right:6px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--cocoa);color:var(--lime);font-family:var(--display);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center}
.prod-minus{position:absolute;top:6px;left:6px;width:26px;height:26px;border-radius:13px;border:none;background:rgba(134,34,17,.85);color:var(--lime);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center}
.biz .scroll{overflow-y:auto}
.amount{display:flex;align-items:center;justify-content:center;gap:8px;border-bottom:2px solid var(--lime);padding:8px 0}
.amount input{width:200px;background:transparent;border:none;color:#fff;font-family:var(--display);font-weight:600;font-size:56px;text-align:right}
.amount input:focus{box-shadow:none}
.amount span{font-family:var(--display);font-weight:600;font-size:44px;color:var(--lime)}
.pay-pulse{width:120px;height:120px;border-radius:50%;background:var(--lime);color:var(--cocoa);display:flex;align-items:center;justify-content:center;animation:payPulse 1.6s ease-in-out infinite}
.pay-pulse svg{width:56px;height:56px}
@keyframes payPulse{0%,100%{box-shadow:0 0 0 0 rgba(254,212,109,.5)}50%{box-shadow:0 0 0 22px rgba(254,212,109,0)}}
/* ---- cobro en la app del cliente ---- */
.pay-sheet{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:18px;background:var(--cocoa);color:#FBF4E6;animation:riseIn .3s ease}
.pay-sheet .amt{font-family:var(--display);font-weight:600;font-size:38px;color:var(--lime);line-height:1}
.btn-pay{background:#000;color:#fff;height:56px}
.btn-pay:hover{background:#222}
.extra-note{text-align:center;font-size:13px;font-weight:700;color:var(--cocoa);margin-top:-6px}

/* ---- pagar con el QR ---- */
.wallet-row{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;border-radius:16px;border:1.5px solid var(--line);background:#fff;color:var(--cocoa)}
.wr-ic{width:40px;height:40px;border-radius:20px;background:var(--lime);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wr-go{font-size:14px;font-weight:700;color:var(--olive)}
.money{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:18px;background:var(--cocoa);color:#FBF4E6}
.money-amt{font-family:var(--display);font-weight:600;font-size:44px;line-height:1;color:var(--lime)}
.topup-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.topup{height:48px;border:none;border-radius:12px;background:var(--lime);color:var(--cocoa);font-family:var(--display);font-weight:600;font-size:17px}
.topup:disabled{opacity:.6}
.seg-pays{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg-pay{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px;border-radius:14px;border:2px solid var(--line);background:#fff;color:var(--cocoa);text-align:left}
.seg-pay b{font-family:var(--display);font-weight:600;font-size:18px}
.seg-pay span{font-size:12px;color:var(--muted)}
.seg-pay.on{border-color:var(--cocoa);background:var(--lime)}
.seg-pay.on span{color:var(--cocoa)}
.seg-pay:disabled{opacity:.5}
.paywith{border:none;background:none;font-size:14px;color:var(--brown);padding:4px 8px;text-decoration:underline;text-underline-offset:3px}
/* camarero: métodos de cobro */
.pay-methods{display:flex;flex-direction:column;gap:8px}
.pm-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;height:60px;padding:0 18px;border-radius:14px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-family:var(--display);font-weight:600;font-size:17px;width:100%}
.pm-btn small{font-family:var(--body);font-weight:700;font-size:12px;opacity:.7}
.pm-btn.main{background:var(--lime);border-color:var(--lime);color:var(--cocoa);height:68px;font-size:20px}
.pm-btn:disabled{opacity:.4}
.qr-warn{font-size:13px;color:#FFD9CF;background:rgba(162,59,42,.25);border-radius:10px;padding:10px 12px;text-align:center}

.staff-wallet{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:6px;font-size:13px;font-weight:700;color:var(--cocoa)}
.staff-wallet span{background:var(--lime);border-radius:8px;padding:3px 8px}
.staff-wallet span:last-child{background:#F2E5D0}

.amount-hint{text-align:center;font-size:13px;color:rgba(255,255,255,.65);margin-top:-6px}

.bday-banner{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:2px solid var(--cocoa);border-radius:16px;background:var(--lime);color:var(--cocoa);font-size:14px;line-height:1.35}
.bday-banner b{font-family:var(--display);font-weight:600;font-size:17px}

.qr-short{font-size:14px;color:var(--brown)}
.qr-short b{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:.06em;color:var(--cocoa);margin-left:6px;font-variant-numeric:tabular-nums}

.push-ask{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:#fff;border:1.5px dashed var(--cocoa);font-size:14px;line-height:1.35;color:var(--cocoa)}
.push-ask b{font-family:var(--display);font-weight:600;font-size:16px}

/* ---- jefe ---- */
.boss-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:rgba(255,255,255,.06);border-radius:12px;padding:4px;margin-top:-8px}
.boss-tabs button{height:36px;border:none;border-radius:9px;background:transparent;color:rgba(255,255,255,.75);font-family:var(--display);font-weight:600;font-size:13px}
.boss-tabs button.on{background:var(--lime);color:var(--cocoa)}
.boss-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.boss-stats div{background:rgba(255,255,255,.06);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:2px}
.boss-stats b{font-family:var(--display);font-weight:600;font-size:20px;color:var(--lime)}
.boss-stats span{font-size:11px;opacity:.7}
.boss-list{display:flex;flex-direction:column;gap:6px}
.boss-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05)}
.br-av,.br-pos{width:36px;height:36px;border-radius:18px;background:var(--lime);color:var(--cocoa);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;flex-shrink:0}
.br-pos{background:rgba(255,255,255,.1);color:#fff}
.br-pos.top{background:var(--lime);color:var(--cocoa)}
.br-name{font-family:var(--display);font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-sub{font-size:12px;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-num{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.br-num b{font-family:var(--display);font-weight:600;color:var(--lime)}
.br-num span{font-size:11px;opacity:.65}

.place{display:flex;flex-direction:column;gap:3px;padding:16px;border-radius:16px;background:#fff;border:1px solid var(--line2);font-size:14px;color:var(--cocoa)}

/* carta del camarero */
.cat-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:0 4px 2px}
.cat-row::-webkit-scrollbar{display:none}
.cat-row button{flex-shrink:0;height:34px;padding:0 12px;border-radius:17px;border:1px solid rgba(255,255,255,.18);background:transparent;color:rgba(255,255,255,.8);font-family:var(--display);font-weight:600;font-size:13px;white-space:nowrap}
.cat-row button.on{background:var(--lime);border-color:var(--lime);color:var(--cocoa)}
.cat-row button .cq{margin-left:6px;background:var(--cocoa);color:var(--lime);border-radius:9px;padding:0 6px;font-size:11px}
.prod-main{min-height:84px}
.prod-name{font-size:13px}
.ticket-line{font-size:13px;color:rgba(255,255,255,.75);line-height:1.4}

.biz .scroll>*{flex-shrink:0}

.staff-link{display:block;text-align:center;margin-top:6px;padding:10px;font-size:14px;font-weight:700;color:var(--cocoa);opacity:.75;text-decoration:none}
.cam-tip{max-width:320px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.75);text-align:left;margin-top:6px}
.cam-tip summary{cursor:pointer;color:var(--lime);font-weight:700;text-align:center;list-style:none}

.boss-row[data-cust]{cursor:pointer}
.boss-row[data-cust]:active{background:rgba(255,255,255,.1)}
.adj-row{display:grid;grid-template-columns:64px 1fr 64px;gap:8px}
.adj-btn{height:56px;border-radius:14px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-size:28px;font-family:var(--display);font-weight:600}
.adj-num{height:56px;border-radius:14px;border:1.5px solid var(--lime);background:transparent;color:#fff;text-align:center;font-family:var(--display);font-weight:600;font-size:28px;width:100%}
.pm-btn.danger{background:#9A3B22;border-color:#9A3B22;color:#fff}

/* ---- transiciones ---- */
@view-transition{navigation:auto}
@keyframes vtIn{from{opacity:0;transform:translateX(var(--vt-x,24px))}to{opacity:1;transform:none}}
@keyframes vtOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(calc(var(--vt-x,24px) * -.6))}}
::view-transition-old(root){animation:vtOut .2s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .32s cubic-bezier(.16,1,.3,1) both}
.nav{view-transition-name:nav}
.boss-tabs{view-transition-name:tabs}
::view-transition-group(nav),::view-transition-group(tabs){animation:none}
::view-transition-old(nav),::view-transition-old(tabs){display:none}
::view-transition-new(nav),::view-transition-new(tabs){animation:none}
.screen{animation:none}
.screen.enter{animation:screenIn .32s cubic-bezier(.16,1,.3,1)}
@keyframes screenIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* aparición escalonada de listas y tarjetas */
@keyframes itemIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.enter .reward,.enter .rk-row,.enter .boss-row,.enter .hist,.enter .promo,.enter .prod,.enter .pm-btn,.enter .pay-sheet,.enter .stampcard,.enter .rank-teaser,.enter .wallet-row,.enter .money,.enter .row-card{animation:itemIn .42s cubic-bezier(.16,1,.3,1) both}
.enter .reward:nth-child(2),.enter .rk-row:nth-child(2),.enter .boss-row:nth-child(2),.enter .hist:nth-child(2),.enter .promo:nth-child(3),.enter .prod:nth-child(2),.enter .pm-btn:nth-child(2){animation-delay:.04s}
.enter .reward:nth-child(3),.enter .rk-row:nth-child(3),.enter .boss-row:nth-child(3),.enter .hist:nth-child(3),.enter .promo:nth-child(4),.enter .prod:nth-child(3),.enter .pm-btn:nth-child(3){animation-delay:.08s}
.enter .reward:nth-child(4),.enter .rk-row:nth-child(4),.enter .boss-row:nth-child(4),.enter .hist:nth-child(4),.enter .prod:nth-child(4){animation-delay:.12s}
.enter .reward:nth-child(5),.enter .rk-row:nth-child(5),.enter .boss-row:nth-child(5),.enter .hist:nth-child(5),.enter .prod:nth-child(5){animation-delay:.16s}
.enter .rk-row:nth-child(n+6),.enter .boss-row:nth-child(n+6),.enter .hist:nth-child(n+6),.enter .prod:nth-child(n+6){animation-delay:.2s}
.enter .podium .pod{animation:itemIn .5s cubic-bezier(.16,1,.3,1) both}
.enter .podium .p1{animation-delay:.05s}.enter .podium .p2{animation-delay:.15s}.enter .podium .p3{animation-delay:.25s}
.enter .pod-step{transform-origin:bottom;animation:growUp .6s cubic-bezier(.16,1,.3,1) .2s both}
@keyframes growUp{from{transform:scaleY(0)}to{transform:none}}
/* respuesta al tocar */
button,.btn,.mini,.topup,.seg-pay,.prod-main,.reward,.boss-row,.promo-banner,.rank-teaser,.wallet-row{transition:transform .14s ease,background-color .2s ease,box-shadow .2s ease,opacity .2s ease}
button:active:not(:disabled),.btn:active,.topup:active,.seg-pay:active,.promo-banner:active,.rank-teaser:active,.wallet-row:active,.boss-row[data-cust]:active{transform:scale(.97)}
.nav button{transition:color .2s ease,transform .14s ease}
.nav button.on svg{animation:navPop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes navPop{0%{transform:scale(.8)}100%{transform:scale(1)}}
.toast{animation:toastIn .35s cubic-bezier(.16,1,.3,1)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

#rank-slot:empty{display:none}
#rank-slot .rank-teaser{animation:itemIn .42s cubic-bezier(.16,1,.3,1) both}

.test-banner{padding:10px 14px;border-radius:12px;background:#FFF1C9;color:#6B4E00;font-size:13px;font-weight:700;line-height:1.35;border:1.5px dashed #C99A1E}
.test-banner.dark{background:rgba(255,200,60,.15);color:#FFD66B;border-color:rgba(255,214,107,.5);margin-top:6px}

.show-pass{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:13px;padding:6px;text-decoration:none;color:var(--olive)}
.note-ok{font-size:14px;font-weight:700;color:var(--cocoa);background:var(--lime);border-radius:10px;padding:10px 14px}
.reset-code{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;border-radius:14px;background:var(--lime);color:var(--cocoa);text-align:center;margin-bottom:10px;font-size:13px}
.reset-code b{font-family:var(--display);font-weight:600;font-size:38px;letter-spacing:.15em}

/* =====================================================================
   ESTÉTICA DALI CATESSEN: el rojo de la fachada del Museo Dalí y el dorado
   del logo. Títulos en serifa clásica (como DALI CATESSEN), los sellos son
   los huevos del logo y las fotos rematan en forma de huevo.
   ===================================================================== */
:root{--r-s:8px;--r:12px;--r-l:18px}
.display{font-weight:600;text-transform:uppercase;letter-spacing:.03em;line-height:.98}
.h1{font-weight:600;letter-spacing:-.005em}
.kicker{font-family:var(--body);font-weight:700;letter-spacing:.22em}
/* botones: bloques sobrios, letras de cartel */
.btn{border-radius:var(--r);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:17px}
.btn-olive{background:var(--cocoa);color:var(--lime)}
.btn-cream{font-size:16px}
.btn-line{border:2px solid var(--cocoa);color:var(--cocoa);background:transparent}
.mini,.topup,.redeem button{border-radius:var(--r-s);font-weight:700}
.input,.prefix{border-radius:var(--r);border:2px solid var(--line)}
.field label{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cocoa)}
.error,.note-ok,.ready-note,.test-banner{border-radius:var(--r-s)}
.round,.back-float{border-radius:var(--r);border:none;background:var(--cream)}
.pill,.rank-chip{border-radius:var(--r-s)}
.row-card,.reward,.place,.wallet-row,.push-ask,.qr-box{border-radius:var(--r-l);box-shadow:none}
.reward,.row-card,.place,.wallet-row{border:2px solid var(--line2)}
.reward.ready{border-color:var(--cocoa)}
.reward .t{font-family:var(--display);font-weight:600;font-size:18px}
.badge{border-radius:var(--r-s);font-weight:700}
/* fotos con remate de huevo */
.promo{border-radius:50% 50% var(--r-l) var(--r-l) / 120px 120px var(--r-l) var(--r-l)}
.reward .thumb{border-radius:50% 50% 46% 46% / 58% 58% 42% 42%}
.promo .ttl{font-weight:600;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.promo,.promo-banner,.money,.pay-sheet,.rank-teaser,.prize,.rk-me,.bday-banner{box-shadow:none}
.promo-banner,.money,.pay-sheet,.rank-teaser,.prize,.rk-me,.bday-banner{border-radius:var(--r-l)}
.promo .badge{right:auto;left:50%;transform:translateX(-50%);top:22px}

/* tarjeta de sellos: un trozo de fachada roja con huevos dorados */
.stampcard{background:var(--cocoa);border-radius:22px;padding:6px;box-shadow:0 14px 30px -18px rgba(70,15,5,.7)}
.stampcard-in{border:1.5px solid rgba(254,212,109,.35);border-radius:17px;padding:20px 16px 20px}
.stampcard .kicker{color:var(--lime);opacity:.8}
.stampcard-in [style*="color:var(--cocoa)"]{color:var(--lime)!important}
.stampcard-in [style*="color:var(--brown)"]{color:var(--cream)!important}
.stampcard-in [style*="color:var(--faint)"]{color:rgba(251,244,230,.5)!important}
.stamp-grid{grid-template-columns:repeat(5,48px);gap:20px 12px}
.stamp,.stamp.on{width:48px;height:56px;border:none;background:none;box-shadow:none;border-radius:0}
.stamp .free{color:var(--lime);font-family:var(--body);font-weight:700;letter-spacing:.14em;bottom:-15px}
@media (max-width:360px){.stamp-grid{grid-template-columns:repeat(5,44px);gap:18px 8px}.stamp,.stamp.on{width:44px;height:52px}}
.seal{border:none;background:var(--cocoa);box-shadow:0 0 0 8px var(--cream),0 0 0 11px var(--lime);border-radius:50% 50% 50% 50% / 58% 58% 42% 42%}
.seal > div{color:var(--lime)!important}
.check{box-shadow:0 0 0 8px var(--night),0 0 0 11px var(--lime);border-radius:50% 50% 50% 50% / 58% 58% 42% 42%}
.pay-pulse{box-shadow:0 0 0 6px var(--night),0 0 0 9px var(--lime)}
.avatar{border:none;background:var(--cocoa);color:var(--lime);font-family:var(--display);font-weight:600}
.pod-av{border:none;background:var(--paper)}
.p1 .pod-av{box-shadow:0 0 0 3px var(--cream),0 0 0 6px var(--cocoa)}
.crown{border:none;box-shadow:0 0 0 2px var(--cream)}
.pod-step{border-radius:var(--r) var(--r) 0 0;font-weight:700}
.rk-row.me{border-radius:var(--r)}
.rk-pos,.rt-pos,.rk-me-pos{font-weight:700}
.rk-me{border-width:2px}
.money-amt,.pay-sheet .amt{font-weight:700;letter-spacing:-.01em}
.seg-pay{border-radius:var(--r)}
.seg-pay b{font-weight:700}
.pill{background:var(--cocoa);color:var(--lime)}
.pill svg path:first-child{fill:var(--lime)}
.qr-box{border-color:var(--cocoa)}
/* barra inferior: la pestaña activa lleva un huevo dorado detrás del icono */
.nav{background:var(--cream);border-top:2px solid var(--line2);backdrop-filter:none;-webkit-backdrop-filter:none}
.nav button{color:var(--muted);font-family:var(--body);font-weight:700;letter-spacing:.02em}
.nav button svg{box-sizing:content-box;padding:4px 14px;border-radius:var(--r-s);transition:background-color .2s ease}
.nav button.on{color:var(--cocoa)}
.nav button.on svg{background:var(--lime)}
.toast{border-radius:var(--r);background:var(--cocoa);color:var(--lime);font-family:var(--body);font-weight:700}

/* logo */
.logo-svg{display:inline-block;-webkit-mask:url(/img/logo.svg) center/contain no-repeat;mask:url(/img/logo.svg) center/contain no-repeat}
.logo-stack{display:inline-flex;flex-direction:column;align-items:center;gap:.55em}
.logo-mark,.logo-word{display:block}
.logo-mark{-webkit-mask:url(/img/mark.svg) center/contain no-repeat;mask:url(/img/mark.svg) center/contain no-repeat}
.logo-word{-webkit-mask:url(/img/wordmark.svg) center/contain no-repeat;mask:url(/img/wordmark.svg) center/contain no-repeat}

/* bienvenida: la fachada roja, el logo dorado y huevos gigantes de fondo */
.welcome{background:var(--cocoa)}
.welcome::before{content:"";position:absolute;left:-90px;right:-90px;bottom:-40px;height:330px;background:var(--lime);opacity:.08;-webkit-mask:url(/img/mark.svg) center bottom/contain no-repeat;mask:url(/img/mark.svg) center bottom/contain no-repeat;pointer-events:none}
.welcome .welcome-top{top:calc(env(safe-area-inset-top) + 13%)}
.welcome-bottom{z-index:1}
.welcome .kicker{color:var(--lime);opacity:.85}
.welcome .display{color:var(--cream)}
.welcome [style*="color:var(--brown)"]{color:rgba(251,244,230,.82)!important}
.welcome .btn-olive{background:var(--lime);color:var(--cocoa)}
.welcome .btn-olive:hover{background:#F8D08A}
.welcome .btn-cream{background:transparent;color:var(--lime);border:2px solid rgba(254,212,109,.6)}
.welcome .staff-link{color:rgba(251,244,230,.6)}
.reg-hero{background:var(--cocoa)}
.reg-hero::before{content:"";position:absolute;left:-40px;right:-40px;top:-30px;height:240px;background:var(--lime);opacity:.07;-webkit-mask:url(/img/mark.svg) center/contain no-repeat;mask:url(/img/mark.svg) center/contain no-repeat}
.reg-body{border-radius:26px 26px 0 0}
/* ---- modo negocio ---- */
.biz{--night:#3B0E07}
.biz .out,.pm-btn,.prod-main,.adj-btn,.adj-num,.manual input,.manual button,.pin-input,.boss-row,.boss-stats div,.cat-row button,.big,.ghost{border-radius:var(--r)}
.cat-row button{border-radius:var(--r-s)}
.found{border-radius:22px}
.big,.pm-btn.main{font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.boss-tabs{border-radius:var(--r)}
.boss-tabs button{border-radius:var(--r-s)}
.viewer{border-radius:26px}
.corner{border-radius:0!important}
.corner.tl{border-top-left-radius:12px!important}.corner.tr{border-top-right-radius:12px!important}.corner.bl{border-bottom-left-radius:12px!important}.corner.br{border-bottom-right-radius:12px!important}
.prod-q,.prod-minus{border-radius:var(--r-s)}
.amount input,.amount span{font-weight:800}
.reset-code{border-radius:var(--r)}
.reset-code b{font-weight:800}