:root{
  --lime:#B8CF42;--lime-d:#A6BD33;--cocoa:#4E4027;
  --olive:#4E4027;--olive-h:#3F3320;--olive-a:#33291A;
  --ink:#33291A;--brown:#4E4027;--muted:#7A7057;--faint:#A39A7C;
  --cream:#F7F6EA;--paper:#E6EDC0;--line:#DCDAC3;--line2:#E7E6D2;--soft:#EEEEDD;
  --gold:#B8CF42;--gold-d:#4E4027;--gold-l:#B8CF42;--gold-bg:#EEF4CC;
  --dark:#4E4027;--night:#2E2517;
  --serif:'Fredoka',system-ui,sans-serif;--display:'Fredoka',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#E9EBD6;font-family:'Nunito Sans',system-ui,sans-serif;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(78,64,39,.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(60,40,20,.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,#B8CF42,#A6BD33)}
.ph-register{background-image:url(/img/registro.jpg),linear-gradient(135deg,#B8CF42,#A6BD33)}
.ph-tortitas{background-image:url(/img/tortitas.jpg),linear-gradient(120deg,#4E4027 30%,#7E8F2C)}
.ph-cumple{background-image:url(/img/cumple.jpg),linear-gradient(120deg,#4E4027 30%,#8FA52A)}
.ph-croissant{background-image:url(/img/croissant.jpg),linear-gradient(135deg,#B8CF42,#8FA52A)}
.ph-cafe{background-image:url(/img/cafe.jpg),linear-gradient(135deg,#6A5838,#4E4027)}
.ph-brunch{background-image:url(/img/brunch.jpg),linear-gradient(135deg,#DCE78F,#B8CF42)}
.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(78,64,39,.08),0 12px 28px -14px rgba(78,64,39,.28)}
.stampcard-in{border:1.5px dashed rgba(78,64,39,.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(78,64,39,.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(78,64,39,.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(78,64,39,.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:#E6EDC0}
.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(60,40,20,.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%,#4E4027,#241D12);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(184,207,66,.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:#4A3D27}
.dots i.on{background:var(--gold)}
.ready-note{padding:10px 14px;border-radius:10px;background:var(--gold-bg);color:#4E4027;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:#C5DA55}.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(78,64,39,.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:'Fredoka',system-ui,sans-serif;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(78,64,39,.35)}
.stamp{background:rgba(247,246,234,.5);border-color:rgba(78,64,39,.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:#E4E2CE}
.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(184,207,66,.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(184,207,66,.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:#6A5838}
.p3 .pod-step{height:52px;background:#7E6C4A}
.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}