:root{--tomate:#E0472A;--tomate-d:#C23A20;--tomate-t:#B8361D;--manj:#24493F;--gelo:#EAF3F1;--grafite:#1F2A27;--muted:#56625E;--line:#D9E5E1;--fita:#F4E7B5;--ok:#2E7D57}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Figtree',system-ui,sans-serif;background:var(--gelo);color:var(--grafite);line-height:1.55;min-height:100vh}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em;color:var(--manj);line-height:1.1;text-wrap:balance}
.muted{color:var(--muted)}
header.top{background:#fff;border-bottom:1px solid var(--line);padding:14px 20px;display:flex;justify-content:space-between;align-items:center}
.logo{display:inline-flex;align-items:center;gap:8px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;color:var(--manj);text-decoration:none}
.logo i{width:28px;height:28px;border-radius:8px;background:var(--tomate);color:#fff;display:grid;place-items:center;font-style:normal;font-size:17px}
.steps{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.steps b{color:var(--manj)}
.testbar{background:var(--fita);color:#3b3312;text-align:center;font-size:14px;padding:9px 16px}
.wrap{max-width:760px;margin:32px auto 60px;padding:0 16px}
.card{animation:rise .5s cubic-bezier(.2,.7,.2,1) both;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.card .pic{aspect-ratio:16/8;object-fit:cover;width:100%}
.card .in{padding:30px}
.alert{display:inline-block;background:var(--fita);color:#3b3312;font-weight:700;font-size:14px;padding:6px 12px;border-radius:3px;margin-bottom:12px}
.card h1{font-size:clamp(30px,5vw,44px);margin-bottom:12px}
.card .lead{font-size:18px;color:#34413D;margin-bottom:18px}
.list{list-style:none;margin:0 0 22px}
.list li{display:flex;gap:10px;padding:6px 0}
.ico{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.list .ico{color:var(--ok);margin-top:3px}
.price{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--manj);margin:8px 0 18px}
.price s{color:#8a9592;font-weight:500;font-size:22px;margin-right:10px}
.price b{font-size:52px;letter-spacing:-.03em}
.btn{display:flex;align-items:center;justify-content:center;width:100%;background:var(--tomate);color:#fff;border:0;border-radius:14px;padding:17px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:19px;cursor:pointer;min-height:56px;text-decoration:none;box-shadow:0 2px 0 var(--tomate-d);margin-top:12px}
.btn:hover{background:var(--tomate-d)}.btn:disabled{opacity:.6;cursor:wait}
.btn.sim{background:#fff;color:var(--manj);border:2px dashed var(--manj);box-shadow:none;font-size:16px}
.no{display:block;text-align:center;margin-top:16px;color:var(--muted);font-size:15px}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--manj);outline-offset:3px}
.err{color:#b3261e;font-size:14px;margin-top:12px;min-height:20px}
.pixbox{text-align:center}
.pixbox h2{font-size:26px;margin-bottom:6px}
.qr{display:grid;place-items:center;margin:16px auto;width:220px;height:220px}
.qr img,.qr canvas{width:220px!important;height:220px!important}
.pixbox textarea{width:100%;font:13px/1.4 monospace;padding:10px;border:1px solid var(--line);border-radius:10px;resize:none;height:84px;background:#f6faf9}
.wait{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:16px;color:var(--muted);font-size:14px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--tomate);animation:p 1.2s infinite}
@keyframes p{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.dot{animation:none}}
@media(max-width:520px){.card .in{padding:22px}}
.pixsteps{text-align:left;max-width:360px;margin:12px auto 0;padding-left:20px;color:var(--grafite);font-size:15px}
.pixsteps li{padding:3px 0}
.btn.ok{background:var(--ok);box-shadow:0 2px 0 #1f5e40}
.reassure{display:flex;gap:10px;align-items:center;background:#E6F4EC;color:#1f5e40;border-radius:12px;padding:10px 14px;font-size:14px;margin-bottom:16px}
.reassure .ico{color:var(--ok)}

/* ===== Movimento (leve, só CSS; desliga em 'reduzir movimento') ===== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.rise{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.rise-2{animation-delay:.08s}.rise-3{animation-delay:.16s}
@supports (animation-timeline:view()){
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
}
/* intervalo entre etapas do funil */
#jf-step{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(234,243,241,.94);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s}
#jf-step.on{opacity:1}
#jf-step .c{text-align:center;max-width:320px;padding:24px}
#jf-step .ring{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:#2E7D57;color:#fff;transform:scale(.6);opacity:0;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s}
#jf-step.on .ring{transform:scale(1);opacity:1}
#jf-step .ring svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .4s .2s}
#jf-step.on .ring svg{stroke-dashoffset:0}
#jf-step .ring.soft{background:#24493F}
#jf-step b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:22px;color:#24493F;margin-bottom:4px}
#jf-step span{color:#56625E;font-size:15px}
#jf-step .bar{height:4px;border-radius:4px;background:#D9E5E1;margin:16px auto 0;width:180px;overflow:hidden}
#jf-step .bar i{display:block;height:100%;width:0;background:#E0472A;transition:width var(--d,1.4s) linear}
#jf-step.on .bar i{width:100%}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .rise,.reveal{animation:none!important}
  #jf-step,#jf-step .ring,#jf-step .ring svg,#jf-step .bar i{transition:none!important}
}