:root{font-family:Arial,Helvetica,sans-serif;color:#191919;background:#f5f5f5;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh}.page-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.rewards-page{position:relative;width:min(100%,430px);height:min(900px,calc(100dvh - 48px));min-height:680px;overflow:hidden;background:#fff9cf;box-shadow:0 20px 60px #17171725}.topline{height:38px;padding:8px 22px;display:flex;justify-content:space-between;font-size:13px;font-weight:700}.page-hero{height:225px;position:relative;padding:18px 32px;background:#ffe63d;overflow:hidden}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.5px;margin:0 0 10px}.page-hero h1{position:relative;z-index:1;font-size:27px;line-height:1.15;margin:0;max-width:295px}.page-hero strong{color:#ff593e}.hero-coin{position:absolute;right:-28px;top:73px;border:16px solid #f2a700;border-radius:50%;width:150px;height:150px;background:#ffc516;display:grid;place-items:center;color:#ffde3b;font-size:100px;font-weight:900;text-shadow:2px 5px #bd7b00;transform:rotate(-15deg)}.reward-section{margin:16px 20px;padding:14px 13px;border-radius:16px;background:#fff1a6}.reward-section h2{margin:0 0 12px;font-size:17px;line-height:1.3}.reward-section--second{margin-top:30px}.reward-tile{background:white;border-radius:15px;padding:17px 13px;display:flex;gap:13px;align-items:center;min-height:116px}.reward-tile strong{display:block;font-size:15px;line-height:1.35}.reward-tile small{display:block;margin-top:5px;color:#707070;font-size:13px;line-height:1.3}.tile-icon{font-size:24px}.overlay{position:fixed;inset:0;background:#000b;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:115px 18px 34px;z-index:5}.overlay[hidden],.reopen-button[hidden]{display:none}.reward-modal{position:relative;background:#fff;border-radius:21px;width:min(100%,386px);min-height:360px;box-shadow:0 10px 0 #16100a4d;animation:enter .35s cubic-bezier(.18,.9,.25,1.2) both}.reward-art{position:absolute;width:min(96%,370px);height:auto;left:50%;top:-105px;transform:translateX(-50%);filter:drop-shadow(0 3px 1px #0001);pointer-events:none}.modal-inner{position:relative;padding:52px 30px 39px;text-align:center}.modal-inner h2{font-size:21px;line-height:1.31;letter-spacing:-.35px;margin:0 auto 15px;max-width:330px;font-weight:800}.amount-wrap{height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center}.amount{color:#ff6044;font-size:40px;line-height:1.08;font-weight:800;letter-spacing:1px;font-variant-numeric:tabular-nums}.amount.rolling{animation:amount-pop .5s ease-out}.amount-gain{min-height:18px;color:#555;font-size:14px;margin-top:4px;opacity:0;transform:translateY(4px);transition:.3s}.amount-gain.show{opacity:1;transform:translateY(0)}.hint{font-size:17px;line-height:1.4;color:#646464;margin:22px 0 15px}.check-button{position:relative;width:100%;height:54px;border:0;border-radius:999px;background:#ff5d40;color:#fff;font-size:18px;cursor:pointer;box-shadow:0 4px 0 #e74b31;transition:transform .15s,background .2s,box-shadow .15s}.check-button:active{transform:translateY(3px);box-shadow:0 1px 0 #e74b31}.check-button:focus-visible,.close-button:focus-visible,.reopen-button:focus-visible{outline:3px solid #1b70ec;outline-offset:4px}.tap-hand{position:absolute;right:16%;top:34px;font-size:42px;line-height:1;transform:rotate(44deg);filter:drop-shadow(2px 3px 1px #0002);animation:tap-pulse 1.25s ease-in-out infinite;pointer-events:none}.spinner{display:none;width:19px;height:19px;border:2.5px solid #ffffff85;border-top-color:#fff;border-radius:50%;margin:auto;animation:spin .7s linear infinite}.check-button.loading{background:#ffb9aa;box-shadow:none;cursor:wait}.check-button.loading .button-label,.check-button.loading .tap-hand{display:none}.check-button.loading .spinner{display:block}.check-button.completed{background:#ff5d40}.check-button.completed .tap-hand{display:none}.progress{margin:15px 0 0}.progress[hidden]{display:none}.progress-track{height:15px;background:#ffd1c6;border-radius:999px;overflow:hidden}.progress-fill{height:100%;width:0;background:#ff6044;border-radius:999px;transition:width .7s ease}.progress-label{display:block;margin-top:7px;color:#ff6044;font-size:13px;font-weight:700}.reward-modal.is-complete .hint{margin:11px 0 16px}.reward-modal.is-complete .modal-inner{padding-bottom:35px}.close-button{border:0;background:#1b1b1b;color:#fff;font-size:34px;line-height:1;width:36px;height:36px;border-radius:50%;margin-top:28px;cursor:pointer}.reopen-button{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:2;border:0;border-radius:30px;background:#ff5d40;color:#fff;font-size:16px;font-weight:700;padding:14px 24px;box-shadow:0 5px 14px #0003;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes tap-pulse{0%,100%{transform:translateY(0) rotate(44deg) scale(1)}45%{transform:translateY(-9px) rotate(44deg) scale(1.12)}65%{transform:translateY(-3px) rotate(44deg) scale(.96)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes amount-pop{0%{transform:scale(.95);filter:blur(1px)}55%{transform:scale(1.07)}100%{transform:scale(1);filter:blur(0)}}@keyframes enter{from{opacity:0;transform:translateY(24px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:480px){.page-shell{padding:0}.rewards-page{width:100%;height:100dvh;min-height:620px;box-shadow:none}.overlay{padding-top:95px}.reward-modal{width:min(100%,386px)}.reward-art{top:-91px;width:min(96%,350px)}.modal-inner{padding:52px 28px 36px}.modal-inner h2{font-size:20px}.amount{font-size:38px}}@media(max-width:350px){.modal-inner{padding-left:20px;padding-right:20px}.modal-inner h2{font-size:18px}.amount{font-size:34px}.hint{font-size:15px}.check-button{font-size:16px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Ilustração menor e separada do título; mão desenhada como recurso próprio. */
.reward-art{width:min(78%,300px);top:-86px}
.modal-inner{padding-top:82px}
.tap-hand{right:14%;top:31px;width:58px;height:58px;object-fit:contain;font-size:0;transform:none;animation:hand-tap 1.25s ease-in-out infinite}
@keyframes hand-tap{0%,100%{transform:translate(0,0) scale(1)}45%{transform:translate(-5px,-8px) scale(1.08)}65%{transform:translate(-2px,-3px) scale(.98)}}
@media(max-width:480px){.reward-art{width:min(76%,285px);top:-85px}.modal-inner{padding-top:82px}}
/* Movimento mais discreto e entrada suave do popup. */
.tap-hand{animation:hand-tap-soft 3.4s ease-in-out infinite}
@keyframes hand-tap-soft{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5px,-7px) scale(1.06)}}
.overlay:not([hidden]){animation:backdrop-in .32s ease-out both}
.reward-modal{animation:popup-enter .58s cubic-bezier(.2,.85,.25,1) both}
@keyframes backdrop-in{from{background:#0000}to{background:#000b}}
@keyframes popup-enter{0%{opacity:0;transform:translateY(18px) scale(.965)}72%{opacity:1;transform:translateY(-2px) scale(1.008)}100%{opacity:1;transform:translateY(0) scale(1)}}
.confetti{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}
.confetti i{position:absolute;left:50%;top:-25px;width:8px;height:13px;border-radius:2px;background:#ffdb1d;opacity:0;animation:confetti-pop 1.7s ease-out both;animation-delay:.36s}
.confetti i:nth-child(1){--x:-174px;--y:48px;--r:-120deg;background:#2fe978;animation-delay:.34s}
.confetti i:nth-child(2){--x:-132px;--y:-76px;--r:100deg;background:#ffe21c;animation-delay:.41s}
.confetti i:nth-child(3){--x:-86px;--y:83px;--r:160deg;background:#fa37ae;animation-delay:.45s}
.confetti i:nth-child(4){--x:-46px;--y:-110px;--r:-140deg;background:#42e8f5;animation-delay:.38s}
.confetti i:nth-child(5){--x:54px;--y:-108px;--r:130deg;background:#ffe21c;animation-delay:.43s}
.confetti i:nth-child(6){--x:101px;--y:76px;--r:-115deg;background:#fb49a9;animation-delay:.36s}
.confetti i:nth-child(7){--x:149px;--y:-58px;--r:160deg;background:#33dcf2;animation-delay:.47s}
.confetti i:nth-child(8){--x:180px;--y:39px;--r:-95deg;background:#43dc63;animation-delay:.40s}
.confetti i:nth-child(9){--x:-153px;--y:102px;--r:85deg;background:#ff6349;animation-delay:.53s}
.confetti i:nth-child(10){--x:-103px;--y:-102px;--r:-85deg;background:#55ebf1;animation-delay:.49s}
.confetti i:nth-child(11){--x:-16px;--y:92px;--r:190deg;background:#ffe21c;animation-delay:.51s}
.confetti i:nth-child(12){--x:18px;--y:-119px;--r:-145deg;background:#41df72;animation-delay:.48s}
.confetti i:nth-child(13){--x:81px;--y:-85px;--r:140deg;background:#fc5eaa;animation-delay:.55s}
.confetti i:nth-child(14){--x:126px;--y:97px;--r:-175deg;background:#ffe21c;animation-delay:.44s}
.confetti i:nth-child(15){--x:163px;--y:-12px;--r:110deg;background:#ff654c;animation-delay:.58s}
.confetti i:nth-child(16){--x:-184px;--y:-19px;--r:-165deg;background:#38e4e9;animation-delay:.50s}
@keyframes confetti-pop{0%{opacity:0;transform:translate(0,5px) rotate(0) scale(.5)}14%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1)}}
/* Estas animações fazem parte da interação solicitada e permanecem perceptíveis no preview. */
@media(prefers-reduced-motion:reduce){.tap-hand{animation-duration:3.4s!important}.confetti i{animation-duration:1.7s!important}.reward-modal{animation-duration:.58s!important}.overlay:not([hidden]){animation-duration:.32s!important}}
.check-button.loading{background:linear-gradient(110deg,#ff8b70,#ffb5a2,#ff8b70);background-size:220% 100%;box-shadow:0 4px 18px #ff755a55;animation:button-shimmer 1.8s ease-in-out infinite}
.check-button.loading .spinner{position:relative;width:24px;height:24px;border-width:3px;border-color:#ffffff70;border-top-color:#fff;box-shadow:0 0 12px #ffffff55;animation:spin 1.05s linear infinite}
.check-button.loading .spinner::after{content:"";position:absolute;inset:4px;border:2px solid transparent;border-bottom-color:#fff;border-radius:50%}
@keyframes button-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.check-button.loading{animation-duration:1.8s!important}.check-button.loading .spinner{animation-duration:1.05s!important}}

/* Segunda etapa: tela de saldo inspirada nas novas referências. */
.stage-page{background:#fff934;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.stage-page::-webkit-scrollbar{display:none}
.stage-header{height:190px;position:relative;overflow:hidden;background:#fff934}
.back-mark{position:absolute;top:10px;left:18px;color:#fff;font-size:38px;line-height:1;z-index:2}
.stage-header h1{position:relative;z-index:1;margin:36px 0 0 34px;font-size:28px;line-height:1.12;letter-spacing:-.7px;font-weight:800;max-width:300px}
.stage-header h1 strong{color:#ff6044;white-space:nowrap}
.stage-header-art{position:absolute;right:-8px;top:-9px;width:210px;height:auto;pointer-events:none}
.stage-one,.stage-two{margin:0 16px;background:#ffd409;border-radius:17px;padding-top:18px}
.stage-one h2,.stage-two h2{font-size:18px;line-height:1.26;color:#8d5516;margin:0 18px 13px;font-weight:800}
.balance-card{background:#fff;border-radius:20px;padding:30px 28px 29px;text-align:center;min-height:402px}
.countdown{display:inline-block;background:#f1f1f1;border-radius:5px;padding:4px 8px;font-size:13px;font-weight:700;color:#292929}
.balance-card h3{font-size:22px;line-height:1.28;letter-spacing:-.3px;margin:22px auto 26px;max-width:360px;font-weight:800}
.stage-amount{display:block;font-size:clamp(43px,11.5vw,61px);letter-spacing:-2px;line-height:1.1;margin-bottom:25px;color:#15171e;font-variant-numeric:tabular-nums;white-space:nowrap}
.stage-progress{position:relative;height:18px;border-radius:999px;background:#ffb19c;margin:0 18px;overflow:hidden}
.stage-progress-fill{height:100%;width:0;background:#ff6044;border-radius:999px;transition:width .7s ease}
.stage-progress span{position:absolute;right:0;top:0;border-radius:999px;background:#ff6044;padding:1px 10px;height:18px;line-height:16px;color:#fff;font-size:12px;white-space:nowrap}
.balance-card>p{font-size:16px;margin:20px 0 21px;line-height:1.3}
.balance-button{position:relative;width:100%;height:55px;border:0;border-radius:999px;background:#ff6044;color:#fff;font-size:25px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 #e84c33}
.balance-button:disabled{opacity:.6;cursor:not-allowed}
.balance-button:focus-visible,.stage-footer button:focus-visible,.share-sheet button:focus-visible{outline:3px solid #146cff;outline-offset:3px}
.balance-button img{position:absolute;width:58px;height:58px;object-fit:contain;right:22%;top:33px;pointer-events:none;animation:hand-tap-soft 3.4s ease-in-out infinite}
.balance-button:disabled img{display:none}
.stage-two{margin-top:24px;padding-top:16px}
.stage-two h2{margin-bottom:12px}
.stage-two h2 strong{white-space:nowrap}
.invite-card{display:flex;gap:14px;align-items:flex-start;background:#f9f9f9;border-radius:19px;padding:17px 15px;min-height:110px}
.invite-card p{margin:0;font-size:16px;line-height:1.25;color:#777}
.invite-card strong{color:#151515}
.invite-card em{color:#ff6044;font-style:normal}
.lock-icon{flex:none;position:relative;width:48px;height:48px;border-radius:50%;background:#ededed;font-size:0}
.lock-icon::before{content:"";position:absolute;width:16px;height:15px;left:16px;top:22px;border:2px solid #333;border-radius:3px}
.lock-icon::after{content:"";position:absolute;width:9px;height:10px;left:19px;top:13px;border:2px solid #333;border-bottom:0;border-radius:7px 7px 0 0}
.stage-footer{display:flex;justify-content:space-around;gap:20px;padding:20px 18px 17px}
.stage-footer button{border:0;background:transparent;color:#fff;font-size:15px;cursor:pointer}
.balance-overlay{position:fixed;inset:0;z-index:10;background:#000b;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;animation:backdrop-in .25s ease-out both}
.balance-overlay[hidden]{display:none}
.balance-dialog-group{width:min(100%,430px);display:flex;flex-direction:column;align-items:center;animation:sheet-enter .42s cubic-bezier(.2,.8,.25,1) both}
.how-card{position:relative;width:calc(100% - 38px);background:#fff;border-radius:17px 17px 14px 14px;padding:38px 23px 25px;min-height:211px;box-shadow:0 3px 0 #d9ce35}
.how-art{position:absolute;width:228px;height:auto;right:15px;top:-61px;pointer-events:none}
.how-card h2{font-size:19px;margin:0 0 12px;font-weight:800}
.how-card ol{list-style:none;padding:0;margin:0}
.how-card li{display:flex;align-items:flex-start;gap:10px;margin:8px 0}
.how-card li span{flex:none;width:19px;height:19px;border-radius:50%;background:#fff9b6;color:#202020;font-size:13px;font-weight:800;display:grid;place-items:center}
.how-card li p{font-size:13px;line-height:1.25;margin:0}
.how-note{font-size:12px;line-height:1.3;color:#888;margin:14px 0 0}
.share-sheet{background:#2e2e2e;color:#eee;width:100%;padding:14px 15px 20px;min-height:182px}
.share-title{position:relative;text-align:center;font-size:13px;margin:0 0 21px}
.share-title button{position:absolute;right:0;top:-6px;border:0;background:none;color:#eee;font-size:25px;line-height:1;cursor:pointer}
.share-options{display:flex;justify-content:space-between;gap:4px}
.share-options button{width:16.666%;border:0;background:transparent;color:#ddd;display:flex;align-items:center;flex-direction:column;gap:6px;padding:0;cursor:pointer}
.share-icon{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:27px;line-height:1}
.share-icon svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.share-icon--copy{background:#2d72f5;font-size:21px}
.share-icon--whatsapp,.share-icon--status{background:#0fd16a}
.share-icon--instagram{background:linear-gradient(135deg,#6855e9,#e642a4,#f79043);font-size:23px}
.share-icon--facebook{background:#1384ed;font-family:Arial,sans-serif;font-size:43px;padding-top:12px}
.share-icon--sms{background:#17ce69;font-size:27px}
.share-options small{font-size:10px;line-height:1.05;text-align:center;min-height:22px}
#share-feedback{font-size:11px;text-align:center;margin:10px 0 0;color:#fff}
#share-feedback:empty{display:none}
@keyframes sheet-enter{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){.stage-page{width:100%;height:100dvh;min-height:620px}.stage-header{height:190px}.balance-card{padding-left:25px;padding-right:25px}.balance-card h3{font-size:21px}.stage-amount{font-size:clamp(43px,11.5vw,61px)}}
@media(max-width:360px){.stage-header h1{font-size:24px;margin-left:25px}.stage-header-art{width:175px}.stage-one,.stage-two{margin-left:10px;margin-right:10px}.stage-one h2,.stage-two h2{font-size:16px}.balance-card{padding-left:18px;padding-right:18px}.balance-card h3{font-size:19px}.stage-amount{font-size:41px}.share-icon{width:40px;height:40px}}

/* Acabamento, tipografia e tamanhos para telefones. */
@font-face{font-family:Poppins;src:url('./assets/fonts/poppins-latin-400-normal.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url('./assets/fonts/poppins-latin-500-normal.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url('./assets/fonts/poppins-latin-600-normal.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url('./assets/fonts/poppins-latin-700-normal.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url('./assets/fonts/poppins-latin-800-normal.woff2') format('woff2');font-style:normal;font-weight:800;font-display:swap}
:root{font-family:Poppins,Arial,sans-serif}
*,*::before,*::after{-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button{touch-action:manipulation;-webkit-appearance:none;appearance:none}
.check-button:focus-visible,.close-button:focus-visible,.balance-button:focus-visible,.how-close:focus-visible,.advance-button:focus-visible,.stage-footer button:focus-visible,.registration-actions button:focus-visible,input:focus-visible{outline:3px solid #ff8b44;outline-offset:3px}
.stage-header h1{font-size:26px;max-width:270px;margin-top:38px;line-height:1.14;letter-spacing:-.5px}
.stage-header-art{width:160px;right:-15px;top:7px}
.back-mark{top:11px;left:14px;display:grid;place-items:center;width:30px;height:30px}
.back-mark svg,.lock-icon svg,.how-close svg,.advance-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lock-icon{display:grid;place-items:center;font-size:inherit}
.lock-icon::before,.lock-icon::after{content:none}
.lock-icon svg{width:21px;height:21px;color:#333}
.balance-button .tap-hand{animation:hand-tap-soft 3.4s ease-in-out infinite}
.balance-overlay{justify-content:center;padding:78px 16px 24px;overflow-y:auto}
.balance-dialog-group{margin:auto;width:min(100%,430px)}
.how-card{width:100%;max-height:calc(100dvh - 110px);overflow-y:auto;padding:52px 26px 27px;border-radius:19px;box-shadow:0 12px 35px #0003}
.how-art{width:185px;right:24px;top:-54px}
.how-close{position:absolute;right:15px;top:15px;border:0;background:#f3f3f3;color:#363636;border-radius:50%;width:31px;height:31px;display:grid;place-items:center;cursor:pointer}
.how-close svg{width:17px;height:17px}
.how-card h2{font-size:22px;line-height:1.25;margin:0 0 17px}
.how-copy{font-size:15px;line-height:1.5;color:#474747;margin:0 0 20px}
.how-balance{background:#fff8d7;border-radius:12px;padding:14px 15px;margin:0 0 21px;font-size:13px;color:#6b5b37}
.how-balance strong{display:block;font-size:25px;line-height:1.2;color:#ff6044;margin-top:3px}
.advance-button{width:100%;height:51px;border:0;border-radius:999px;background:#ff6044;color:#fff;font-size:17px;font-weight:700;display:flex;justify-content:center;align-items:center;gap:9px;cursor:pointer;box-shadow:0 3px 0 #e74b31}
.advance-button svg{width:18px;height:18px}
#registration-step[hidden],#how-intro[hidden]{display:none}
#registration-step label{display:block;font-size:13px;font-weight:600;color:#3a3a3a;margin:11px 0}
#registration-step input{display:block;width:100%;height:43px;border:1px solid #dedede;border-radius:10px;background:#fff;padding:0 12px;margin-top:5px;font-size:15px}
#registration-step input:focus{border-color:#ff8b44;outline:none}
.form-note{font-size:11px;color:#777;line-height:1.4;margin:10px 0 15px}
.registration-actions{display:flex;gap:10px}
.registration-actions button{flex:1;min-height:45px;border:0;border-radius:999px;cursor:pointer;font-size:14px;font-weight:700}
.registration-actions button:first-child{background:#f2f2f2;color:#383838}
.registration-actions button:last-child{background:#ff6044;color:#fff}
.registration-feedback{font-size:12px;color:#555;margin:12px 0 0}
.registration-feedback:empty{display:none}
@media(max-width:480px){.page-shell{display:block;padding:0}.stage-page{width:100%;height:100dvh;min-height:100dvh}.stage-footer{padding-bottom:max(18px,env(safe-area-inset-bottom))}.balance-overlay{padding-top:max(75px,env(safe-area-inset-top));padding-bottom:max(22px,env(safe-area-inset-bottom))}.how-card{max-height:calc(100dvh - 105px)}.stage-amount{font-size:clamp(38px,11.5vw,55px)}}
@media(max-width:390px){.stage-header h1{font-size:23px;max-width:245px;margin-left:25px;margin-top:43px}.stage-header-art{width:141px;right:-10px;top:15px}.stage-one,.stage-two{margin-left:10px;margin-right:10px}.stage-one h2,.stage-two h2{font-size:16px}.balance-card{padding-left:18px;padding-right:18px}.balance-card h3{font-size:18px}.stage-amount{font-size:clamp(37px,10.8vw,43px)}.balance-card>p{font-size:14px}.how-card{padding-left:21px;padding-right:21px}}
@media(max-width:340px){.stage-header h1{font-size:21px;max-width:220px}.stage-header-art{width:122px;right:-12px;top:25px}.stage-amount{font-size:36px}.balance-button{font-size:20px}.balance-button img{right:15%}}
@media(max-height:650px){.overlay{justify-content:flex-start;overflow-y:auto;padding-top:100px;padding-bottom:24px}.reward-modal{flex:none;min-height:0}.close-button{flex:none}.balance-overlay{justify-content:flex-start}.balance-dialog-group{margin:auto}}
@media(prefers-reduced-motion:reduce){.balance-button .tap-hand{animation-duration:3.4s!important}}
/* A arte ultrapassa a borda superior sem ser cortada; a tela pode rolar em aparelhos baixos. */
.how-card{max-height:none;overflow:visible}
.back-mark{top:4px}
@media(max-width:480px){.how-card{max-height:none}}
@media(max-width:340px){.stage-header-art{width:112px;right:-18px}}

/* Modal Pix: entra de baixo e muda de conteúdo sem trocar de página. */
.balance-dialog-group{animation:modal-rise .58s cubic-bezier(.18,.85,.25,1) both}
@keyframes modal-rise{0%{opacity:0;transform:translateY(72px) scale(.975)}72%{opacity:1;transform:translateY(-4px) scale(1.005)}100%{opacity:1;transform:translateY(0) scale(1)}}
.how-card{padding-top:76px;padding-bottom:26px}
.how-art[hidden]{display:none}
.how-art--intro{width:235px;right:19px;top:-72px}
.how-art--pix{width:225px;right:20px;top:-75px}
.how-copy{margin-bottom:13px;line-height:1.52}
.how-copy + .how-copy{margin-bottom:20px}
#registration-step[hidden],#how-intro[hidden],#validation-step[hidden],#ready-step[hidden]{display:none}
.step-enter{animation:step-rise .36s ease-out both}
@keyframes step-rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
#registration-title{display:flex;align-items:center;gap:9px;font-size:21px;margin-bottom:7px}
.pix-mark{width:29px;height:29px;fill:none;stroke:#08b6ad;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.form-intro{font-size:12px;line-height:1.38;color:#666;margin:0 0 14px}
#registration-step label{font-size:12px;font-weight:700;margin:11px 0 5px}
#registration-step input,#registration-step select{width:100%;height:45px;border:1.5px solid #dedede;border-radius:11px;background:#fff;padding:0 12px;font-family:Poppins,Arial,sans-serif;font-size:16px;color:#222;outline:none;transition:border-color .18s,box-shadow .18s}
#registration-step input{margin-top:0}
#registration-step input:focus,#registration-step select:focus{border-color:#02b9ad;box-shadow:0 0 0 3px #02b9ad24}
#registration-step input[aria-invalid="true"],#registration-step select[aria-invalid="true"]{border-color:#e05252;box-shadow:0 0 0 3px #e0525220}
#registration-step input:disabled{background:#f5f5f5;color:#999}
.pix-select-wrap{position:relative}
.pix-select-wrap .pix-mark{position:absolute;z-index:1;left:12px;top:10px;width:24px;height:24px;pointer-events:none}
.pix-select-wrap::after{content:"";position:absolute;right:17px;top:17px;width:8px;height:8px;border-right:2px solid #777;border-bottom:2px solid #777;transform:rotate(45deg);pointer-events:none}
#registration-step select{-webkit-appearance:none;appearance:none;padding:0 35px 0 45px;cursor:pointer}
#registration-step .form-note{font-size:11px;line-height:1.35;margin:12px 0 14px;color:#777}
.registration-actions button:last-child{flex:1.45}
.registration-feedback{min-height:0;color:#cf3e3e;font-size:12px}
.validation-step{text-align:center}
.validation-orb{position:relative;width:86px;height:86px;margin:0 auto 22px;border-radius:50%;background:linear-gradient(145deg,#31e8d4,#00a89f);display:grid;place-items:center;box-shadow:0 9px 24px #00b8a955;animation:orb-breathe 2.1s ease-in-out infinite}
.validation-orb>.pix-mark{width:45px;height:45px;stroke:#fff;stroke-width:2.2}
.orbit{position:absolute;border-radius:50%;pointer-events:none}
.orbit--one{inset:-11px;border:2px dashed #04b9af88;animation:spin 5s linear infinite}
.orbit--two{inset:-20px;border:2px solid transparent;border-top-color:#ffd94a;border-bottom-color:#ffd94a;animation:spin 3s linear infinite reverse}
@keyframes orb-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
.validation-step h2,.ready-step h2{text-align:center;font-size:21px;margin:0 0 8px}
.validation-status{font-size:13px;color:#5f6464;margin:0 auto 17px;min-height:38px;max-width:300px;line-height:1.35}
.validation-progress{height:12px;background:#e9f6f3;border-radius:999px;overflow:hidden;margin:0 0 19px}
.validation-progress span{display:block;width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,#00b9af,#6de7cf,#00b9af);background-size:200% 100%;transition:width 1.4s linear;animation:progress-glow 1.8s ease-in-out infinite}
@keyframes progress-glow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.validation-list{list-style:none;text-align:left;margin:0;padding:0;display:grid;gap:8px}
.validation-list li{display:flex;align-items:center;gap:10px;background:#f5f7f7;border:1px solid transparent;border-radius:12px;padding:10px 12px;color:#8b9191;font-size:12px;font-weight:600;transition:background .3s,color .3s,border-color .3s,transform .3s}
.validation-list li.active{background:#e9fbf8;border-color:#9be7de;color:#067d76;transform:translateX(3px)}
.validation-list li.done{background:#f0fbf2;color:#238c57}
.validation-icon{width:24px;height:24px;border-radius:50%;background:#e3e7e7;color:#858b8b;display:grid;place-items:center;flex:none;font-size:12px;font-weight:800}
.validation-list li.active .validation-icon{background:#00b9af;color:#fff;animation:active-pulse 1s ease-in-out infinite}
.validation-list li.done .validation-icon{background:#30c875;color:#fff;animation:check-pop .3s ease-out both}
@keyframes active-pulse{0%,100%{box-shadow:0 0 0 0 #00b9af55}50%{box-shadow:0 0 0 5px #00b9af18}}
@keyframes check-pop{from{transform:scale(.6)}to{transform:scale(1)}}
.validation-note{font-size:10px;color:#929292;line-height:1.3;margin:16px 0 12px}
.validation-cancel{border:0;background:transparent;color:#787878;font-size:12px;text-decoration:underline;cursor:pointer}
.ready-step{text-align:center}
.ready-symbol{width:77px;height:77px;border-radius:50%;margin:0 auto 18px;background:#00b9af;display:grid;place-items:center;box-shadow:0 0 0 10px #ddf8f4;animation:ready-pop .65s cubic-bezier(.2,.9,.2,1.2) both}
.ready-symbol svg{width:42px;height:42px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@keyframes ready-pop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
.ready-step>p{font-size:14px;line-height:1.45;color:#5e5e5e;margin:0 0 11px}
.ready-step .ready-note{font-size:11px;color:#888;margin-bottom:23px}
@media(max-width:390px){.how-card{padding-top:70px}.how-art--intro{width:205px;top:-65px;right:13px}.how-art--pix{width:198px;top:-66px;right:12px}#registration-title{font-size:19px}.how-copy{font-size:14px}.validation-orb{width:75px;height:75px}}
@media(max-height:650px){.balance-overlay{padding-top:85px}.how-card{padding-bottom:21px}}
@media(prefers-reduced-motion:reduce){.balance-dialog-group{animation-duration:.58s!important}.step-enter{animation-duration:.36s!important}.validation-orb{animation-duration:2.1s!important}.orbit--one{animation-duration:5s!important}.orbit--two{animation-duration:3s!important}.validation-progress span{animation-duration:1.8s!important;transition-duration:1.4s!important}.validation-list li.active .validation-icon{animation-duration:1s!important}.validation-list li.done .validation-icon{animation-duration:.3s!important}.ready-symbol{animation-duration:.65s!important}}
/* O cartão se ajusta quando a arte sai para dar lugar ao progresso. */
.how-card{transition:padding-top .3s ease}
.how-card.mode-loading,.how-card.mode-ready{padding-top:33px}
.how-art--pix:not([hidden]){animation:art-appear .45s ease-out both}
@keyframes art-appear{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.how-art--pix:not([hidden]){animation-duration:.45s!important}.how-card{transition-duration:.3s!important}}
/* Ícone Pix fornecido para o cadastro e a conferência. */
.pix-icon{display:block;object-fit:contain;background:#fff}
.pix-icon--title{width:29px;height:29px;border-radius:3px;flex:none}
.pix-select-wrap .pix-icon--select{position:absolute;z-index:1;left:13px;top:11px;width:23px;height:23px;pointer-events:none}
.validation-orb{background:#fff;border:3px solid #d7f7f3;box-shadow:0 9px 24px #00b8a955,0 0 0 7px #edfbf9}
.pix-icon--loading{width:53px;height:53px;border-radius:6px}