/* Abitué Stamps — mesma linha da app 2.0 (fundo quente com brilhos, cartões brancos redondos,
   Plus Jakarta Sans nos títulos, DM Sans no texto, coral #ff825d). */
[hidden]{display:none!important}
:root{
  --bg:#f6f2ed;--sur:#fff;--ink:#1a1210;--ink2:#4b423d;--mut:#8e857e;--mut2:#c3bbb3;
  --line:#ebe4dc;--line2:#f3ede6;--soft:#faf7f3;
  --coral:#ff825d;--coral-dk:#e8623c;--coral-lt:#ffe0d3;--coral-pale:#fff3ec;
  --ok:#1f9d63;--ok-lt:#e1f5ea;--err:#d94a3a;--err-lt:#fdeae7;--warn-lt:#fff1da;
  --r:26px;--r2:18px;--r3:14px;
  --sh:0 1px 0 rgba(26,18,16,.02),0 14px 34px -14px rgba(26,18,16,.16);
  --disp:"Plus Jakarta Sans","DM Sans",system-ui,sans-serif;
  --body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:
    radial-gradient(900px 480px at 92% -10%,#ffdccb 0%,rgba(255,220,203,0) 62%),
    radial-gradient(700px 420px at -10% 110%,#e9e0ff 0%,rgba(233,224,255,0) 58%),
    var(--bg);background-attachment:fixed}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
svg{display:block}
.app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;position:relative}

/* topo */
.top{display:flex;align-items:center;gap:10px;margin:calc(10px + env(safe-area-inset-top)) 12px 0;padding:10px 12px 10px 16px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.8);
  border-radius:999px;box-shadow:var(--sh);position:sticky;top:calc(10px + env(safe-area-inset-top));z-index:5}
.top .lg{display:flex;align-items:center;gap:8px}
.top .lg img{height:22px;width:auto}
.top .lg em{font-style:normal;font-family:var(--disp);font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--coral);background:var(--coral-pale);border-radius:999px;padding:4px 8px}
.sp{flex:1}
.chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:600;max-width:52%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 3px var(--ok-lt)}

.corpo{flex:1;padding:20px 16px 190px}
.tela{display:none}.tela.on{display:block;animation:entra .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h2{margin:0 0 6px;font-family:var(--disp);font-size:26px;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.sub{margin:0 0 18px;color:var(--mut);font-size:14.5px;line-height:1.5}
.tit{padding:4px 4px 0}
.spin{width:36px;height:36px;margin:90px auto;border-radius:50%;border:3px solid var(--line);border-top-color:var(--coral);animation:roda .8s linear infinite}
@keyframes roda{to{transform:rotate(360deg)}}

/* ligar */
.hero{background:var(--sur);border-radius:var(--r);box-shadow:var(--sh);padding:22px;margin-bottom:14px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,130,93,.22),transparent 65%)}
.hero-tag{display:inline-block;font-family:var(--disp);font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--coral);background:var(--coral-pale);border-radius:999px;padding:5px 10px;margin-bottom:12px}
.hero .sub{margin-bottom:14px}
.passos{list-style:none;counter-reset:p;margin:0;padding:0;display:grid;gap:8px}
.passos li{counter-increment:p;position:relative;padding:2px 0 2px 36px;min-height:24px;font-size:14px;line-height:1.45;color:var(--ink2)}
.passos li::before{content:counter(p);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--disp);font-weight:800;font-size:12px;display:grid;place-items:center}

/* visor da câmara */
.visor{position:relative;aspect-ratio:1/1;border-radius:var(--r);background:radial-gradient(120% 90% at 50% 25%,#3d2b24,#120c0a);overflow:hidden;display:grid;place-items:center;box-shadow:0 24px 50px -24px rgba(26,18,16,.55)}
.visor::after{content:"";position:absolute;inset:0;background:radial-gradient(380px 220px at 110% -20%,rgba(255,130,93,.35),transparent 60%);pointer-events:none}
.visor video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.visor.ativo video{opacity:1}.visor.ativo::after{display:none}
.visor .cant{position:absolute;inset:18%;pointer-events:none}
.visor .cant span{position:absolute;width:44px;height:44px;border:4px solid #fff;border-radius:10px}
.visor .cant span:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:14px 0 0 0}.visor .cant span:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 14px 0 0}
.visor .cant span:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 14px}.visor .cant span:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 14px 0}
.visor .linha{position:absolute;left:20%;right:20%;height:2px;border-radius:2px;background:var(--coral);box-shadow:0 0 16px 4px rgba(255,130,93,.65);animation:scan 2.2s ease-in-out infinite;pointer-events:none}
@keyframes scan{0%,100%{top:22%}50%{top:76%}}
.vbtn{position:relative;z-index:2;border:0;border-radius:999px;background:#fff;color:var(--ink);font-weight:700;padding:13px 22px;box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.visor.ativo .vbtn{display:none}
.visor.semcam .vbtn::after{content:" (sem acesso à câmara)";font-weight:500;color:var(--mut)}

.ou{display:flex;align-items:center;gap:10px;margin:20px 4px 12px;color:var(--mut);font-size:12.5px;font-weight:500}.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--line)}
.campo{display:flex;gap:8px;background:var(--sur);border-radius:999px;padding:6px;box-shadow:var(--sh)}
.campo input{flex:1;min-width:0;height:48px;border:0;background:transparent;padding:0 16px;font:inherit;font-size:17px;letter-spacing:.05em;outline:none}
.campo .btn{height:48px;padding:0 22px}

/* botões */
.btn{height:54px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:15.5px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 10px 22px -12px rgba(26,18,16,.6);transition:transform .12s,background .15s,opacity .15s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.55}
.btn.br{background:var(--coral);box-shadow:0 12px 26px -12px rgba(255,130,93,.9)}.btn.br:active{background:var(--coral-dk)}
.btn.sec{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}.btn.full{width:100%}

.erro{color:var(--err);font-size:14px;margin:12px 4px 0;line-height:1.4}
.instalar{display:flex;gap:12px;align-items:center;background:var(--sur);border-radius:var(--r2);box-shadow:var(--sh);padding:12px 14px;margin-top:16px;font-size:13px;line-height:1.4}
.instalar button{border:0;background:none;font-size:22px;color:var(--mut);margin-left:auto;padding:0 4px}
.ic-i{width:36px;height:36px;border-radius:12px;background:var(--coral-pale);display:grid;place-items:center;flex:none}
.ic-i svg{width:20px;height:20px;stroke:var(--coral);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.marca{display:flex;align-items:center;justify-content:center;gap:6px;margin:28px 0 0;color:var(--mut2);font-size:12px}
.marca img{opacity:.55;height:13px;width:auto}

/* cartão do cliente (escuro, como o "card dk" da app) */
.passe{position:relative;overflow:hidden;background:#1a1210;color:#fff;border-radius:var(--r);padding:18px 18px 20px;box-shadow:0 26px 50px -24px rgba(26,18,16,.6)}
.passe::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 240px at 115% -25%,rgba(255,130,93,.45),transparent 60%),radial-gradient(300px 200px at -20% 120%,rgba(160,130,255,.18),transparent 60%);pointer-events:none}
.passe>*{position:relative}
.passe-top{display:flex;align-items:center;gap:12px}
.passe .avg{width:46px;height:46px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:16px;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.passe-q{flex:1;min-width:0}
.passe-q b{display:block;font-family:var(--disp);font-size:18px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.passe-q span{font-size:12.5px;color:rgba(255,255,255,.6);letter-spacing:.02em}
.passe-lg{height:16px;width:auto;filter:brightness(0) invert(1);opacity:.55;flex:none}
.passe-n{display:flex;align-items:baseline;gap:8px;margin:18px 0 12px}
.passe-n span{font-family:var(--disp);font-size:20px;font-weight:700;color:rgba(255,255,255,.55)}
.passe-n span b{font-size:44px;font-weight:800;color:#fff;letter-spacing:-.03em}
.passe-n small{font-size:13px;color:rgba(255,255,255,.6);font-weight:500}
.passe .prog{color:rgba(255,255,255,.7)}

/* carimbos */
.carimbos{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.carimbos i{aspect-ratio:1;border-radius:50%;border:2px dashed var(--mut2);display:block;position:relative}
.passe .carimbos i{border-color:rgba(255,255,255,.25)}
.carimbos i.on{border:0;background:var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/52% no-repeat;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.14),0 6px 14px -6px rgba(255,130,93,.8);animation:carimba .45s var(--d,0ms) cubic-bezier(.2,1.5,.4,1) both}
.carimbos i.prox{border-color:var(--coral);border-style:solid;animation:pulsa 1.8s ease-in-out infinite}
.passe .carimbos i.prox{border-color:var(--coral)}
.carimbos i.novo{animation:carimbaNovo .6s var(--d,0ms) cubic-bezier(.2,1.6,.4,1) both}
@keyframes carimba{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes carimbaNovo{0%{transform:scale(2.2) rotate(-14deg);opacity:0}60%{transform:scale(.9);opacity:1}100%{transform:none}}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(255,130,93,.45)}50%{box-shadow:0 0 0 7px rgba(255,130,93,0)}}
.prog{font-size:13.5px;color:var(--mut);margin-top:14px;line-height:1.45}

/* blocos */
.blk{background:var(--sur);border-radius:var(--r);box-shadow:var(--sh);padding:18px;margin-top:12px}
.blk-t{display:flex;align-items:center;justify-content:space-between;font-family:var(--disp);font-size:16px;font-weight:800;letter-spacing:-.01em;margin-bottom:12px}
.premio{display:flex;align-items:center;gap:12px;background:var(--coral-pale);border:1.5px solid var(--coral-lt);border-radius:var(--r2);padding:12px;margin-top:8px}
.premio:first-child{margin-top:0}
.premio .ic,.ic-g{width:44px;height:44px;border-radius:14px;background:var(--coral);display:grid;place-items:center;flex:none;box-shadow:0 8px 16px -8px rgba(255,130,93,.9)}
.premio .ic svg,.ic-g svg{width:22px;height:22px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.premio b{display:block;font-size:15.5px;font-weight:700}.premio span{font-size:12.5px;color:var(--mut)}
.badge{display:inline-flex;align-items:center;background:var(--coral);color:#fff;border-radius:999px;padding:5px 11px;font-family:var(--body);font-size:12px;font-weight:700}
.badge.zero{background:var(--line2);color:var(--mut)}
.aviso{background:var(--err-lt);border-radius:var(--r2);padding:16px;margin-top:12px}
.aviso b{display:block;color:#8a2a1e;font-size:16px;margin-bottom:4px;font-family:var(--disp)}.aviso p{margin:0;font-size:14px;line-height:1.45;color:#6d2a20}.aviso p b{display:inline;font-size:inherit;margin:0;font-family:inherit}

/* rodapé com as ações */
.rodape{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:560px;bottom:0;padding:24px 16px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(246,242,237,.98) 70%,rgba(246,242,237,0));z-index:6}
.conf{background:var(--sur);border-radius:var(--r);box-shadow:0 -10px 40px -16px rgba(26,18,16,.35);padding:16px;animation:entra .2s ease both}
.conf p{margin:0 0 12px;font-size:15px;line-height:1.45}.conf .row{display:flex;gap:8px;margin-top:4px}.conf .row .btn{flex:1}
.func small{display:block;font-size:12.5px;color:var(--mut);margin-bottom:6px}
.func div{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.func button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:10px 15px;font-weight:700}
.func button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pin{width:100%;height:52px;border-radius:999px;border:1.5px solid var(--line);font:inherit;font-size:22px;letter-spacing:.5em;text-align:center;margin-bottom:10px;outline:none}
.pin:focus{border-color:var(--coral);box-shadow:0 0 0 4px var(--coral-lt)}

/* ecrãs de sucesso */
.ok{text-align:center;padding-top:28px}
.ok .circ{width:104px;height:104px;margin:0 auto 16px;border-radius:50%;background:var(--ok);display:grid;place-items:center;animation:pop .5s cubic-bezier(.2,1.4,.4,1) both;box-shadow:0 0 0 10px var(--ok-lt),0 20px 40px -16px rgba(31,157,99,.7)}
.ok .circ svg{width:50px;height:50px;stroke:#fff;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:tick .5s .25s ease forwards}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}@keyframes tick{to{stroke-dashoffset:0}}
.ok .circ.cor{background:var(--coral);box-shadow:0 0 0 10px var(--coral-pale),0 20px 40px -16px rgba(255,130,93,.9)}
.ok .circ.cor b{color:#fff;font-family:var(--disp);font-size:34px;font-weight:800}
.ok .carimbos{background:var(--sur);border-radius:var(--r);box-shadow:var(--sh);padding:16px}
.recibo{background:var(--sur);border-radius:var(--r);box-shadow:var(--sh);padding:4px 18px;margin:20px 0 0;text-align:left}
.recibo div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;font-size:14px}.recibo div+div{border-top:1px dashed var(--line)}
.recibo span{color:var(--mut)}.recibo b{text-align:right}
.dica{display:flex;gap:10px;align-items:flex-start;background:var(--warn-lt);border-radius:var(--r2);padding:12px 14px;font-size:13px;line-height:1.45;margin-top:12px;text-align:left;color:#6b4708}
.ic-d{width:20px;height:20px;border-radius:50%;background:#d98c1f;color:#fff;font-weight:800;font-size:12px;display:grid;place-items:center;flex:none;font-family:var(--disp)}
.ganhou{display:flex;gap:12px;align-items:center;background:var(--sur);border:1.5px solid var(--coral-lt);border-radius:var(--r2);box-shadow:var(--sh);padding:12px 14px;font-size:14px;line-height:1.45;margin:16px auto 0;max-width:420px;text-align:left}

/* dar carimbo (modo manual) */
.dar{display:flex;gap:8px}
.qtd{display:flex;align-items:center;gap:2px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:0 4px;flex:none}
.qtd button{width:40px;height:46px;border:0;background:none;font-size:22px;font-weight:700;color:var(--ink)}
.qtd b{min-width:22px;text-align:center;font-size:18px;font-family:var(--disp)}

@media (min-width:600px){.corpo{padding-top:28px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* 2.148 */
.nota{background:var(--coral-pale);border:1.5px solid var(--coral-lt);border-radius:var(--r3);padding:10px 14px;margin:12px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink2)}
#t-ligado .btn{margin-top:18px}