/* ══════════════════════════════════════════════════════════
   TOKYOU · TOTEM v2 — reconstruído sobre a Fundação de UX
   Regras aplicadas:
   · alvos ≥60px (primário maior) · folga generosa
   · contraste: sobre vermelho usa PRETO; branco só grande/bold
   · nada de botão fantasma translúcido
   · zonas: topo = marca/preview · centro-baixo = ação · base = CTA
   · copy literal (sem gíria) · Fira Sans
   ══════════════════════════════════════════════════════════ */
:root{
  /* cor (guia da marca) */
  --red:#FF0024; --red-dk:#C30024; --ink:#000000; --white:#fff;
  --paper:#F4F4F5; --surface:#EAEAEE; --line:#DEDEE3; --muted:#63636B; /* ≥5,5:1 sobre paper */
  --lime:#9FF558; --lime-dk:#3C6B00;
  /* tokens de layout — fonte única de verdade */
  --pad-x:5cqw;            /* gutter lateral de TODAS as telas */
  --gap-touch:2cqw;        /* folga mínima entre alvos tocáveis (~8mm no 43") */
  --target-min:clamp(46px,4.4cqh,54px);   /* alvo secundário */
  --target-cta:clamp(50px,4.8cqh,56px);  /* alvo primário */
  --r-lg:30px; --r-md:22px; --r-sm:16px;
  --font:'Fira Sans',Verdana,sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%}
body{font-family:var(--font);background:#0a0a0a;color:var(--ink);display:grid;place-items:center;overflow:hidden}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ── DEVICE (retrato 9:16, dimensiona por container query units) ── */
.stage{width:100%;height:100%;display:grid;place-items:center}
.device{
  position:relative;overflow:hidden;background:var(--paper);
  width:min(100vw, calc(100vh * 1080 / 1920));
  height:min(100vh, calc(100vw * 1920 / 1080));
  display:flex;flex-direction:column;container-type:size;
}

/* ── STATUS BAR (fina, no topo — fora da zona de toque) ── */
.statusbar{flex:0 0 auto;height:4.2cqh;min-height:30px;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad-x);font-size:clamp(9px,1.5cqh,13px);font-weight:700;letter-spacing:.04em;color:#2a2a2a;background:var(--paper);z-index:20}
.sb-mid{color:#6b6b6b;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 8px}
.sb-online{display:flex;align-items:center;gap:6px;color:var(--ink);white-space:nowrap}
.sb-online i{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(159,245,88,.3)}
.device.is-dark .statusbar{background:#000;color:#fff}
.device.is-dark .sb-mid{color:rgba(255,255,255,.55)}
.device.is-dark .sb-online{color:#fff}

/* ── SCREEN SWITCHER ── */
.screens{position:relative;flex:1 1 auto;min-height:0}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(12px);transition:opacity .4s ease, transform .4s cubic-bezier(.16,.84,.44,1), visibility .4s}
.screen.active{opacity:1;visibility:visible;pointer-events:auto;transform:none}

/* ══ CHROME PADRÃO (cabeçalho, corpo, rodapé de ação) ══ */
/* cabeçalho: só o stepper. Navegação (Voltar) mora no rodapé,
   dentro da zona de alcance (fundação: topo da tela sem toque). */
.phead{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:3cqh var(--pad-x) 0;min-height:5.4cqh}
.steps{display:flex;gap:7px;flex:1}
.steps i{height:7px;border-radius:99px;flex:1;background:var(--surface);transition:.4s}
.steps i.on{background:var(--red)}
.steps i.done{background:var(--ink)}

.pbody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:1.6cqh var(--pad-x) 1.4cqh;overflow:hidden}
/* eyebrow em red-dk: #FF0024 sobre fundo claro dá 3,7:1 e reprova texto pequeno; #C30024 passa */
.eyebrow{font-size:clamp(11px,1.6cqh,15px);font-weight:800;letter-spacing:.14em;color:var(--red-dk);margin-bottom:1.4cqh}
.ptitle{font-weight:900;line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;font-size:clamp(20px,5.2cqw,42px);white-space:nowrap;color:var(--ink)}
.ptitle em{font-style:normal;color:var(--red)}
.psub{margin-top:1.8cqh;font-size:clamp(15px,2.2cqh,22px);line-height:1.35;color:#3a3a3f;font-weight:500;max-width:92%}

/* rodapé de ação — Voltar + status + CTA, sempre visível, sempre à mão */
.pfoot{flex:0 0 auto;display:flex;align-items:center;gap:var(--gap-touch);padding:1.7cqh var(--pad-x);background:var(--white);
  border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(0,0,0,.05)}
.btn-back{min-height:var(--target-min);flex:0 0 auto;display:flex;align-items:center;gap:7px;
  padding:0 3cqw;border-radius:99px;background:var(--white);border:2.5px solid var(--ink);
  font-weight:800;font-size:clamp(13px,1.8cqh,17px);transition:transform .15s}
.btn-back:active{transform:scale(.95)}
.btn-back svg{width:1.1em;height:1.1em;stroke-width:3}
.pfoot-solo{justify-content:flex-start}
.foot-sel{display:flex;align-items:center;gap:12px;margin-right:auto;min-width:0}
.foot-sel small{display:block;font-size:clamp(11px,1.5cqh,13px);color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.foot-sel b{font-size:clamp(16px,2.4cqh,24px);font-weight:800;white-space:nowrap}
.foot-thumb{width:clamp(44px,6.5cqh,60px);height:clamp(44px,6.5cqh,60px);border-radius:12px;background:var(--surface);flex:0 0 auto;background-size:cover;background-position:center}

/* ══ BOTÕES PADRONIZADOS (nada abaixo de ~60px na zona de ação) ══ */
/* CTA PRIMÁRIO ÚNICO — mesmo estilo em todas as telas (btn-primary === btn-next) */
.btn-primary,.btn-next{
  min-height:var(--target-cta);background:var(--red);color:#fff;
  font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(15px,2cqh,19px);
  padding:0 3.6cqw;border-radius:99px;display:flex;align-items:center;justify-content:center;gap:9px;
  white-space:nowrap;box-shadow:0 14px 30px rgba(255,0,36,.3);transition:transform .15s}
.btn-primary:active,.btn-next:active{transform:scale(.97)}
.btn-primary svg,.btn-next svg{width:1.05em;height:1.05em;stroke-width:3;flex:0 0 auto}
.btn-primary[disabled],.btn-next[disabled]{background:var(--surface);color:#9a9aa2;box-shadow:none;pointer-events:none}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.22)}
.btn-outline{ /* secundário — SÓLIDO, contorno forte, nunca fantasma */
  min-height:clamp(60px,8cqh,92px);width:100%;background:var(--white);color:var(--ink);border:2.5px solid var(--ink);
  font-weight:800;font-size:clamp(16px,2.4cqh,22px);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;gap:12px;transition:transform .15s}
.btn-outline:active{transform:scale(.98)}
.btn-outline svg{width:1.2em;height:1.2em}

/* ════════ ATTRACT / STANDBY ════════ */
.standby{background:var(--white)}
.std-diagonal{position:absolute;inset:0;z-index:0;background:var(--red);clip-path:polygon(0 0,100% 0,100% 34%,0 94%)}
.std-content{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;padding:4cqh 6cqw 4cqh}
.std-logo{align-self:flex-start;height:clamp(50px,8cqh,94px);width:auto;filter:brightness(0) invert(1);margin-bottom:auto}
.std-title{font-weight:900;line-height:.9;letter-spacing:-.02em;text-transform:uppercase;
  font-size:clamp(32px,6cqh,66px);color:var(--white);margin:2.4cqh 0}
.std-title em{font-style:normal;color:var(--ink)}
.std-tags{display:flex;flex-wrap:wrap;gap:2.2cqw;row-gap:1.1cqh;margin-bottom:3cqh}
.std-tags span{background:var(--white);color:var(--ink);font-weight:700;font-size:clamp(12px,1.8cqh,17px);
  padding:1.1cqh 3.4cqw;border-radius:99px;box-shadow:0 8px 20px rgba(0,0,0,.1)}
/* CTA do attract: branco sólido, texto vermelho grande (passa como grande) */
.std-cta{min-height:clamp(70px,10cqh,116px);width:100%;background:var(--white);color:var(--red);
  font-weight:900;text-transform:uppercase;font-size:clamp(22px,3.6cqh,38px);border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;gap:16px;box-shadow:0 20px 46px rgba(0,0,0,.22);transition:transform .15s}
.std-cta:active{transform:scale(.97)}
.std-cta svg{width:1em;height:1em;stroke-width:3.2}
/* "ver como funciona" — agora SÓLIDO e legível (era o botão invisível) */
.std-ghost{margin-top:2.2cqh;min-height:clamp(56px,7.5cqh,88px);width:100%;background:rgba(0,0,0,.9);color:#fff;
  font-weight:700;font-size:clamp(15px,2.2cqh,20px);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;gap:10px}
.std-ghost svg{width:1.1em;height:1.1em;fill:currentColor;stroke:none}

/* ════════ MÉTODO — dois caminhos iguais ════════ */
.choice-grid{margin-top:auto;margin-bottom:2.5cqh;display:grid;gap:2.4cqh;padding-top:2.5cqh}
.choice{text-align:left;background:var(--white);border:2px solid var(--line);border-radius:var(--r-lg);
  padding:3.4cqh 6cqw;box-shadow:0 12px 32px rgba(0,0,0,.06);transition:transform .16s;display:flex;align-items:center;gap:5cqw}
.choice:active{transform:scale(.985)}
.choice-ico{width:clamp(58px,9cqh,92px);height:clamp(58px,9cqh,92px);border-radius:20px;background:var(--red);color:#fff;
  display:grid;place-items:center;flex:0 0 auto;box-shadow:0 12px 26px rgba(255,0,36,.3)}
.choice-ico svg{width:52%}
.choice-tx{flex:1;min-width:0}
.choice-tx h3{font-size:clamp(20px,3cqh,30px);font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
.choice-tx p{margin-top:.6cqh;font-size:clamp(14px,2cqh,18px);color:#4a4a50;font-weight:500}
.choice-arrow{flex:0 0 auto;width:clamp(30px,4.4cqh,44px);color:var(--red)}
.choice-arrow svg{width:100%;stroke-width:3}

/* ════════ APARELHO — marca → modelo ════════ */
.sub{display:none;flex-direction:column;flex:1;min-height:0}
.sub.on{display:flex}
/* marca: grid de blocos grandes */
.brandgrid{margin-top:2.6cqh;display:grid;grid-template-columns:1fr 1fr;gap:2.4cqh;align-content:start;flex:1;min-height:0;overflow-y:auto;scrollbar-width:none}
.brandgrid::-webkit-scrollbar{display:none}
.brandcell{min-height:clamp(78px,13cqh,150px);background:var(--white);border:2px solid var(--line);border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqh;transition:transform .15s,border-color .15s}
.brandcell:active{transform:scale(.97)}
.brandcell b{font-size:clamp(19px,2.8cqh,28px);font-weight:800}
.brandcell small{font-size:clamp(12px,1.7cqh,15px);color:var(--muted);font-weight:600}
.brandcell.wide{grid-column:1 / -1;min-height:clamp(58px,8cqh,92px)}
/* modelo: busca-atalho + lista em 2 colunas por família */
.searchbtn{margin-top:5.6cqh;min-height:clamp(60px,7.5cqh,86px);width:100%;background:var(--surface);border:2px solid var(--line); /* margem maior: alvo só abaixo da linha dos 30% (zona de alcance) */
  border-radius:var(--r-md);display:flex;align-items:center;gap:12px;padding:0 5cqw;color:#4a4a50;font-weight:600;font-size:clamp(15px,2.1cqh,19px)}
.searchbtn svg{width:clamp(22px,3cqh,28px);flex:0 0 auto}
.modelscroll{flex:1 1 auto;min-height:0;overflow-y:auto;margin-top:2cqh;scrollbar-width:none}
.modelscroll::-webkit-scrollbar{display:none}
.famhead{font-size:clamp(12px,1.7cqh,15px);font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:1.6cqh 0 1cqh}
.modelgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.6cqh}
.modelcell{min-height:clamp(60px,8cqh,92px);background:var(--white);border:2px solid var(--line);border-radius:16px;
  display:flex;align-items:center;gap:12px;padding:0 4cqw;transition:.15s}
.modelcell:active{transform:scale(.98)}
.modelcell.sel{border-color:var(--red);background:#fff}
.mphone{display:block;width:clamp(46px,8.4cqw,74px);aspect-ratio:1080/2160;border-radius:20%/9%;background:linear-gradient(150deg,#edeef2,#c9cad3);box-shadow:inset 0 0 0 2px rgba(0,0,0,.1),0 5px 12px rgba(0,0,0,.14);position:relative;flex:0 0 auto}
.mphone::before{content:"";position:absolute;top:6%;left:9%;width:36%;aspect-ratio:1;border-radius:26%;background:radial-gradient(circle at 32% 30%,#55555e,#17171c)}
.modelcell b{font-size:clamp(15px,2.1cqh,20px);font-weight:700}
/* red-dk: mesmo motivo do eyebrow (contraste de texto pequeno) + alvo de toque decente */
.notfound{margin:1cqh 0;min-height:var(--target-min);display:flex;align-items:center;justify-content:center;width:100%;
  font-size:clamp(13px,1.9cqh,17px);font-weight:700;color:var(--red-dk);text-decoration:underline;text-underline-offset:3px}

/* ════════ BIBLIOTECA — arte real em mockup, 2 colunas ════════ */
.lib-filters{display:flex;gap:var(--gap-touch);margin:6.2cqh 0 1.6cqh;overflow-x:auto;padding-bottom:6px;flex:0 0 auto;scrollbar-width:none} /* chips abaixo da linha dos 30% */
.lib-filters::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-height:var(--target-min);padding:0 5cqw;border-radius:99px;background:var(--white);
  border:2px solid var(--line);font-weight:700;font-size:clamp(13px,1.9cqh,17px);color:#4a4a50;white-space:nowrap;transition:.2s;display:flex;align-items:center}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.lib-grid{flex:1 1 auto;min-height:0;overflow-y:auto;padding-bottom:2cqh;display:grid;grid-template-columns:1fr 1fr;gap:3cqw;align-content:start;scrollbar-width:none}
.lib-grid::-webkit-scrollbar{display:none}
.lib-tile{background:var(--white);border:2.5px solid transparent;border-radius:20px;overflow:hidden;transition:transform .16s,border-color .16s;
  box-shadow:0 8px 22px rgba(0,0,0,.08);display:flex;flex-direction:column}
.lib-tile:active{transform:scale(.97)}
.lib-tile.sel{border-color:var(--red);box-shadow:0 10px 26px rgba(255,0,36,.28)}
/* mockup de capinha dentro do tile */
.lib-mock{height:40cqw;background:var(--surface);display:grid;place-items:center;position:relative;overflow:hidden}
.lib-case{width:52%;aspect-ratio:1080/2160;border-radius:20% / 10%;background-size:cover;background-position:center;
  box-shadow:0 14px 30px rgba(0,0,0,.25);position:relative}
.lib-case::before{content:"";position:absolute;top:6%;left:12%;width:22%;aspect-ratio:1;border-radius:26%;background:rgba(0,0,0,.25)}
.lib-check{position:absolute;top:8%;right:8%;width:30px;height:30px;border-radius:50%;background:var(--red);display:none;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.lib-check svg{width:60%;color:#fff;stroke-width:3.4}
.lib-tile.sel .lib-check{display:grid}
.lib-meta{padding:1.6cqh 5%;display:flex;flex-direction:column;gap:2px}
.lib-meta b{font-size:clamp(14px,2cqh,18px);font-weight:800}
.lib-meta small{font-size:clamp(11px,1.5cqh,13px);color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* .btn-next unificado com .btn-primary no topo do arquivo (mesmo padrão) */

/* ════════ ENVIAR FOTO (QR) ════════ */
.foto-wrap{margin-top:auto;margin-bottom:2.5cqh;display:grid;gap:2.6cqh;padding-top:2.5cqh}
.qr-card{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:4cqh 6cqw;text-align:center;box-shadow:0 20px 44px rgba(0,0,0,.24)}
.qr-label{font-size:clamp(13px,1.9cqh,17px);font-weight:700;color:rgba(255,255,255,.75);margin-bottom:2.6cqh}
.qr-box{width:min(46%,240px);aspect-ratio:1;margin:0 auto;position:relative;background:#fff;border-radius:20px;padding:8%}
.qr-pattern{position:absolute;inset:8%;border-radius:6px;background-image:repeating-linear-gradient(90deg,#000 0 7%,transparent 7% 14%),repeating-linear-gradient(0deg,#000 0 7%,transparent 7% 14%);background-size:14% 14%;opacity:.9}
.qr-eye{position:absolute;width:26%;aspect-ratio:1;border:5px solid #000;border-radius:8px;background:#fff;z-index:2}
.qr-eye::after{content:"";position:absolute;inset:22%;background:#000;border-radius:3px}
.qr-eye.tl{top:10%;left:10%}.qr-eye.tr{top:10%;right:10%}.qr-eye.bl{bottom:10%;left:10%}
.qr-logo{position:absolute;inset:0;margin:auto;width:26%;height:26%;background:var(--red);border-radius:7px;z-index:3;display:grid;place-items:center;box-shadow:0 0 0 4px #fff}
.qr-logo img{width:64%;filter:brightness(0) invert(1)}
.qr-hint{margin-top:2.6cqh;font-size:clamp(13px,1.9cqh,17px);line-height:1.35;color:rgba(255,255,255,.75);font-weight:500}
.foto-cam svg{width:1.3em;height:1.3em;color:var(--red)}
.wait-note{display:flex;align-items:center;justify-content:center;gap:10px;font-size:clamp(13px,1.9cqh,16px);color:var(--muted);font-weight:600}
.wait-note .pulse{width:11px;height:11px;border-radius:50%;background:var(--red);animation:pulse 1.3s infinite}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ════════ AJUSTAR (crop/zoom) ════════ */
.edit-stage,.rev-stage{flex:1 1 auto;min-height:0;display:grid;place-items:center;width:100%;padding:2cqh 0;overflow:hidden}
.edit-case,.rev-case{height:min(100%,46cqh);aspect-ratio:1080/2160;border-radius:13% / 6.5%;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#ff8a5c,#FF0024 45%,#8a0f14);background-size:150%;background-position:center;
  box-shadow:0 30px 66px rgba(0,0,0,.32), inset 0 0 0 3px rgba(255,255,255,.14)}
.rev-case{animation:caseFloat 5s ease-in-out infinite}
@keyframes caseFloat{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-10px) rotate(2.5deg)}}
.edit-cam{position:absolute;top:5%;left:8%;width:24%;aspect-ratio:1;border-radius:26%;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 5px rgba(0,0,0,.16);z-index:2}
.edit-cam::before,.edit-cam::after{content:"";position:absolute;width:38%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5a5a5a,#111);top:12%;left:12%}
.edit-cam::after{top:52%;left:52%}
.zoom-row{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:1.6cqh 0 2.4cqh}
.zoom-btn{width:clamp(60px,7.4cqh,76px);height:clamp(60px,7.4cqh,76px);border-radius:50%;background:var(--white);border:2.5px solid var(--ink);
  font-size:clamp(26px,3.6cqh,36px);font-weight:700;color:var(--ink);flex:0 0 auto;display:grid;place-items:center;line-height:1;transition:transform .12s}
.zoom-btn:active{transform:scale(.9)}
.zoom-track{flex:1;height:10px;border-radius:99px;background:var(--surface);position:relative;overflow:hidden}
.zoom-fill{position:absolute;inset:0 auto 0 0;width:40%;background:var(--red);border-radius:99px;transition:width .12s}

/* ════════ REVISAR ════════ */
.rev-body{align-items:stretch}
.rev-specs{display:flex;gap:12px;width:100%;padding:2cqh 0 1cqh;flex:0 0 auto}
.rev-spec{flex:1;background:var(--white);border:1.5px solid var(--line);border-radius:16px;padding:2cqh 2cqw;text-align:center}
.rev-spec small{display:block;font-size:clamp(11px,1.5cqh,13px);color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.rev-spec b{display:block;margin-top:4px;font-size:clamp(14px,2cqh,18px);font-weight:800}

/* ════════ PAGAMENTO ════════ */
.order-info{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-md);padding:2.2cqh 5cqw;margin:1.2cqh 0}
.order-info-title{font-size:clamp(17px,2.5cqh,22px);font-weight:800;color:var(--ink);margin-bottom:1.2cqh}
.oi-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:clamp(13px,1.9cqh,17px);color:#6a6a72;font-weight:500;padding:.75cqh 0;border-top:1px solid var(--line)}
.oi-row:first-of-type{border-top:none}
.oi-row b{font-weight:700;color:var(--ink);text-align:right}
.oi-total{margin-top:.3cqh;border-top:1.5px dashed var(--line);padding-top:1.1cqh;font-size:clamp(15px,2.2cqh,20px);color:var(--ink);font-weight:800}
.oi-total b{color:var(--red);font-weight:900}
.pay-heading{font-size:clamp(15px,2.2cqh,20px);font-weight:800;color:var(--ink);margin:.4cqh 0 1.4cqh}
.pay-actions{display:grid;grid-template-columns:1fr 1fr;gap:3.5cqw;flex:0 0 auto}
.pay-action{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.6cqh;
  min-height:clamp(120px,16cqh,200px);padding:2.6cqh 2cqw;
  background:var(--white);border:2.5px solid var(--line);border-radius:22px;transition:transform .15s}
.pa-ic{width:clamp(52px,8cqh,80px);height:clamp(52px,8cqh,80px);border-radius:50%;background:var(--surface);display:grid;place-items:center;flex:0 0 auto;transition:.15s}
.pay-action svg{width:48%;height:48%;color:var(--ink)}
.pay-action b{font-size:clamp(15px,2.3cqh,21px);font-weight:800;color:var(--ink);line-height:1.12}
.pay-action:active{transform:scale(.98)}
.pay-action-primary{border-color:var(--red);background:#fff;box-shadow:0 0 0 1.5px var(--red),0 12px 28px rgba(255,0,36,.16)}
.pay-action-primary .pa-ic{background:var(--red)}
.pay-action-primary svg{color:#fff}

/* ════════ PRODUÇÃO (dark) ════════ */
.device.is-dark{background:#000}
.dark{background:#000;color:#fff;padding:0 var(--pad-x);justify-content:flex-start}
.prod-head{padding:2.6cqh 0 1cqh;flex:0 0 auto}
.prod-eyebrow{font-size:clamp(11px,1.6cqh,15px);font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.5);margin-bottom:1cqh}
.prod-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:1cqh}
.prod-title{font-weight:900;line-height:1.02;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(19px,3.2cqh,34px);white-space:nowrap}
.prod-title em{font-style:normal;color:var(--red)}
.prod-timer{text-align:right;flex:0 0 auto}
.prod-timer b{font-size:clamp(30px,5.4cqh,56px);font-weight:900;line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.prod-timer small{display:block;font-size:clamp(9px,1.2cqh,12px);letter-spacing:.14em;color:rgba(255,255,255,.5);font-weight:700}
.prod-cam{flex:1 1 auto;min-height:0;margin:2cqh 0;border-radius:var(--r-lg);position:relative;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%,#2a2130,#141018 60%,#0d0b11);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);display:flex;flex-direction:column}
.cam-tag,.cam-live{position:absolute;top:4.5%;font-size:clamp(9px,1.4cqh,13px);font-weight:800;letter-spacing:.05em;color:#fff;display:flex;align-items:center;gap:7px;z-index:3}
.cam-tag{left:6%}.cam-live{right:6%}
.cam-tag svg{width:16px;height:16px;color:#fff}
.cam-live i{width:9px;height:9px;border-radius:50%;background:var(--red);animation:pulse 1.2s infinite}
.cam-case{height:clamp(180px,27cqh,520px);width:auto;aspect-ratio:1080/2160;flex:0 0 auto;margin:6cqh auto auto;border-radius:12% / 6%;
  background:linear-gradient(135deg,#ff8a5c,#FF0024 40%,#c026d3 90%);background-size:cover;background-position:center;
  box-shadow:0 30px 60px rgba(0,0,0,.5);animation:printReveal 3s ease-in-out infinite alternate}
@keyframes printReveal{from{clip-path:inset(0 0 78% 0)}to{clip-path:inset(0 0 0 0)}}
.cam-step{margin-top:auto;background:rgba(15,12,18,.7);backdrop-filter:blur(8px);display:flex;align-items:center;gap:14px;padding:3cqh 6%}
.cam-num{width:clamp(36px,4.6cqh,46px);height:clamp(36px,4.6cqh,46px);border-radius:50%;background:var(--red);display:grid;place-items:center;font-weight:900;font-size:clamp(16px,2.2cqh,22px);flex:0 0 auto;color:#fff}
.cam-step small{display:block;font-size:clamp(9px,1.3cqh,12px);letter-spacing:.1em;color:rgba(255,255,255,.55);font-weight:700}
.cam-step b{display:block;font-size:clamp(16px,2.2cqh,21px);font-weight:800;margin-top:2px}
.cam-status{margin-left:auto;font-size:clamp(9px,1.3cqh,12px);font-weight:800;letter-spacing:.06em;color:var(--red);white-space:nowrap}
.prod-bars{display:flex;gap:8px;flex:0 0 auto;padding:.6cqh 0}
.prod-bars i{flex:1;height:9px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;position:relative}
.prod-bars i.done{background:var(--lime)}
.prod-bars i.now::after{content:"";position:absolute;inset:0 auto 0 0;background:var(--red);border-radius:99px;animation:fill 2s ease-in-out infinite}
@keyframes fill{0%{width:10%}100%{width:90%}}
.prod-note{display:flex;align-items:center;justify-content:center;gap:9px;padding:2cqh 0 3cqh;flex:0 0 auto;font-size:clamp(13px,1.9cqh,16px);color:rgba(255,255,255,.65);font-weight:600}
.prod-note svg{width:19px;height:19px;color:var(--lime);stroke-width:3}

/* ════════ PRONTO ════════ */
.done-screen{background:var(--red)}
.done-content{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;padding:5cqh 7cqw}
.done-check{width:clamp(84px,12cqh,130px);height:clamp(84px,12cqh,130px);border-radius:50%;background:#fff;color:var(--red);display:grid;place-items:center;box-shadow:0 24px 50px rgba(0,0,0,.22);margin-bottom:4cqh;animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.done-check svg{width:48%;stroke-width:3}
@keyframes pop{0%{transform:scale(0)}100%{transform:scale(1)}}
.done-title{font-weight:900;line-height:.9;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(38px,6.6cqh,74px);color:#fff}
.done-title em{font-style:normal;color:var(--ink)}
/* branco sobre vermelho só passa como texto GRANDE e bold (regra 3:1) */
.done-sub{margin:3cqh 0;font-size:clamp(19px,2.4cqh,24px);line-height:1.45;color:#fff;font-weight:700}
.done-order{font-size:clamp(14px,2cqh,19px);font-weight:800;letter-spacing:.05em;color:#fff;border:2px solid rgba(255,255,255,.45);border-radius:99px;padding:1.4cqh 5cqw;margin-bottom:4cqh}
.done-cta{background:#fff!important;color:var(--red)!important;width:auto;padding:0 9cqw}

:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ═══════════════════════════════════════════════
   v3 — componentes do fluxo canônico
   ═══════════════════════════════════════════════ */
.pulse{width:11px;height:11px;border-radius:50%;background:var(--red);animation:pulse 1.3s infinite;flex:0 0 auto}

/* header (logo + progresso) — não-interativo, ok no topo */
.khead{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1cqh;padding:1.7cqh var(--pad-x) 0}

.khead-logo{height:clamp(28px,4.2cqh,50px);width:auto}
.prog{width:100%}
.prog-row{display:flex;justify-content:space-between;font-size:clamp(10px,1.4cqh,13px);font-weight:800;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin-bottom:.8cqh}
.prog-bar{height:8px;border-radius:99px;background:var(--surface);overflow:hidden}
.prog-bar i{display:block;height:100%;background:var(--red);border-radius:99px;transition:width .4s}

/* botão de ajuda no rodapé (zona de alcance) */
.btn-help{width:clamp(48px,4.6cqh,54px);height:clamp(48px,4.6cqh,54px);border-radius:50%;background:var(--white);border:2.5px solid var(--ink);font-weight:800;font-size:clamp(17px,2.1cqh,20px);color:var(--ink);flex:0 0 auto;display:grid;place-items:center}

/* ETAPA 1 · modelo */
.model-layout{flex:1 1 auto;min-height:0;display:flex;gap:2.4cqw}
/* coluna de marcas com logos + feedback (espelha o original) */
.brand-col{flex:0 0 auto;width:20cqw;max-width:132px;display:flex;flex-direction:column;gap:1cqh}
.brand-rail{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:1cqh;overflow-y:auto;scrollbar-width:none}
.brand-rail::-webkit-scrollbar{display:none}
.brand-btn{min-height:clamp(52px,6.6cqh,84px);border-radius:16px;background:var(--surface);border:2px solid transparent;color:#4a4a52;flex:0 0 auto;display:grid;place-items:center;transition:.15s}
.brand-btn.on{background:#fff;border-color:var(--red);color:var(--ink);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.brand-ic{width:clamp(26px,3.6cqh,40px);height:clamp(26px,3.6cqh,40px);color:currentColor}
.brand-fill{fill:currentColor;stroke:none}
.brand-word{font-weight:800;font-size:clamp(11px,1.55cqh,15px);letter-spacing:.02em;color:currentColor;white-space:nowrap}
.brand-btn.on .brand-ic,.brand-btn.on .brand-word{color:var(--ink)}
.brand-feedback{flex:0 0 auto;min-height:clamp(50px,6.2cqh,72px);border-radius:16px;background:linear-gradient(120deg,#ff5a8a,#c30024);color:#fff;font-weight:800;font-size:clamp(11px,1.5cqh,14px);line-height:1.12;padding:0 1cqw}
/* painel direito: busca + grid */
.model-right{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;gap:1.4cqh}
.model-search{flex:0 0 auto;margin:0;display:flex;align-items:center;gap:12px;min-height:var(--target-min);background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:0 4cqw}
.model-search svg{width:clamp(22px,3cqh,28px);color:var(--muted);flex:0 0 auto}
.model-search input{flex:1;border:none;background:none;font-family:inherit;font-size:clamp(14px,2cqh,19px);font-weight:600;color:var(--ink);outline:none;min-width:0}
.model-grid{flex:1 1 auto;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5cqh;align-content:start;scrollbar-width:none}
.model-grid::-webkit-scrollbar{display:none}
.model-cell{background:var(--white);border:2px solid var(--line);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.8cqh;padding:1.6cqh .6cqw;transition:.15s}
.model-cell.sel{border-color:var(--red);background:#fff;box-shadow:0 6px 16px rgba(255,0,36,.12)}
.model-cell b{font-size:clamp(11px,1.6cqh,15px);font-weight:700;text-align:center;line-height:1.12;color:var(--ink)}
.mc-price{font-size:clamp(12px,1.7cqh,16px);font-weight:800;color:var(--red-dk);white-space:nowrap}
.model-notfound{grid-column:1/-1;min-height:var(--target-min);color:var(--red-dk);font-weight:800;text-decoration:underline;text-underline-offset:3px;font-size:clamp(14px,2cqh,18px)}
.model-empty{grid-column:1/-1;color:var(--muted);font-weight:600;padding:2cqh 0;font-size:clamp(14px,2cqh,18px)}

/* ETAPA 2 · método */
.method-cards{margin-top:3cqh;margin-bottom:auto;display:grid;gap:2.8cqh}
.mcard{display:flex;align-items:center;gap:4cqw;text-align:left;border-radius:var(--r-lg);padding:5.5cqh 6cqw;transition:transform .16s}
.mcard:active{transform:scale(.985)}
.mcard-dark{background:var(--ink);color:#fff}
.mcard-red{background:var(--red);color:#fff}
.mcard-ico{width:clamp(52px,8cqh,80px);height:clamp(52px,8cqh,80px);border-radius:18px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:0 0 auto}
.mcard-ico svg{width:52%;color:#fff}
.mcard-tx{flex:1;min-width:0}
.mcard-tx b{display:block;font-size:clamp(19px,2.8cqh,28px);font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
.mcard-tx small{display:block;margin-top:.8cqh;font-size:clamp(15px,2.1cqh,19px);font-weight:700;opacity:.92}
.mcard-arrow{width:clamp(28px,4cqh,40px);color:#fff;flex:0 0 auto;stroke-width:3}

/* ETAPA 3 · upload QR (reusa .qr-card/.qr-box/.qr-eye/.qr-logo do v2) */
.qr-status{margin-top:2.6cqh;display:flex;align-items:center;justify-content:center;gap:10px;font-size:clamp(13px,1.9cqh,17px);color:rgba(255,255,255,.8);font-weight:600}
.qr-status b{color:var(--lime);font-weight:800}
.lnk-alt{margin-top:auto;min-height:var(--target-min);width:100%;background:var(--white);border:2.5px solid var(--ink);border-radius:var(--r-md);font-weight:800;font-size:clamp(15px,2.1cqh,19px);margin-bottom:1.4cqh}
.lnk-demo{min-height:clamp(48px,6cqh,64px);width:100%;color:var(--muted);font-weight:700;font-size:clamp(13px,1.8cqh,16px);text-decoration:underline;text-underline-offset:3px;margin-bottom:2cqh}

/* ETAPA 3' · drops */
.drop-filters{display:flex;gap:var(--gap-touch);margin:2.4cqh 0 1.8cqh;overflow-x:auto;flex:0 0 auto;scrollbar-width:none;padding-bottom:4px}
.drop-filters::-webkit-scrollbar{display:none}
.drop-grid{flex:1 1 auto;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:24cqh;gap:2.4cqw;align-content:start;scrollbar-width:none;padding-bottom:2cqh}
.drop-grid::-webkit-scrollbar{display:none}
/* card = mockup de capinha em fundo neutro + nome/categoria (altura explícita: sem bug de aspect-ratio em grid) */
.drop-card{background:var(--white);border:2.5px solid transparent;border-radius:20px;overflow:hidden;display:block;box-shadow:0 8px 22px rgba(0,0,0,.08);transition:transform .16s,border-color .16s;text-align:left}
.drop-card:active{transform:scale(.97)}
.drop-card.sel{border-color:var(--red);box-shadow:0 10px 26px rgba(255,0,36,.3)}
.drop-mock{width:100%;height:17cqh;background:var(--surface);display:grid;place-items:center;position:relative;overflow:hidden}
.drop-case{height:82%;aspect-ratio:1080/2160;border-radius:20% / 10%;background-size:cover!important;background-position:center;box-shadow:0 12px 28px rgba(0,0,0,.24);position:relative}
.drop-case::before{content:"";position:absolute;top:6%;left:12%;width:22%;aspect-ratio:1;border-radius:26%;background:rgba(0,0,0,.22)}
.drop-badge{position:absolute;top:6%;left:6%;z-index:2;font-size:clamp(8px,1.15cqh,11px);font-weight:800;letter-spacing:.04em;padding:.5cqh 2cqw;border-radius:99px;background:var(--ink);color:#fff}
.drop-badge.novo{background:var(--lime);color:var(--ink)}
.drop-meta{padding:1.1cqh 8%;display:flex;flex-direction:column;gap:1px}
.drop-meta b{font-size:clamp(12px,1.7cqh,15px);font-weight:800;line-height:1.12}
.drop-meta small{font-size:clamp(9px,1.3cqh,12px);color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}

/* ETAPA 4 · editor */
.editor-body{gap:1.1cqh}
.ed-title{font-size:clamp(19px,3.2cqh,32px)!important;text-transform:none!important;letter-spacing:-.01em;line-height:1;margin-bottom:.2cqh;text-align:center}
/* área principal: coluna esquerda · capa · barra lateral */
.ed-main{flex:1 1 auto;min-height:0;display:flex;align-items:stretch;gap:2.4cqw}
.ed-left{flex:0 0 auto;width:19cqw;max-width:128px;display:flex;flex-direction:column;gap:1.2cqh}
.ed-tut{min-height:clamp(42px,5.6cqh,60px);border-radius:14px;background:linear-gradient(100deg,#ff5a8a,#c026d3);color:#fff;font-weight:800;font-size:clamp(12px,1.8cqh,16px)}
.ed-del{width:clamp(44px,5.6cqh,60px);height:clamp(44px,5.6cqh,60px);border-radius:14px;background:var(--red);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.ed-del svg{width:46%;color:#fff}
.ed-stage{flex:1 1 auto;min-width:0;display:grid;place-items:center;position:relative}
.editor-case{height:min(100%,42cqh);aspect-ratio:1080/2160;border-radius:13%/6.5%;position:relative;overflow:hidden;background-size:cover;background-position:center;box-shadow:0 24px 54px rgba(0,0,0,.3),inset 0 0 0 3px rgba(255,255,255,.14);display:flex;align-items:flex-end;justify-content:center}
.ed-text{position:relative;z-index:2;font-weight:900;font-size:clamp(14px,2.4cqh,22px);text-align:center;padding:0 8% 12%;text-shadow:0 2px 8px rgba(0,0,0,.45);word-break:break-word;line-height:1.1;text-transform:uppercase}
.ed-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4cqh;color:#fff;font-weight:800;font-size:clamp(12px,1.8cqh,16px);z-index:3;background:linear-gradient(160deg,#4a4a52,#2a2a30)}
.ed-empty-ic{width:clamp(46px,6.6cqh,64px);height:clamp(46px,6.6cqh,64px);border-radius:50%;background:var(--lime);display:grid;place-items:center}
.ed-empty-ic svg{width:52%;color:var(--ink)}
.ed-side{flex:0 0 auto;width:21cqw;max-width:140px;background:var(--ink);border-radius:20px;padding:1.4cqh 1cqw;display:flex;flex-direction:column;justify-content:space-around;gap:1cqh}
.ed-sidebtn{display:flex;flex-direction:column;align-items:center;gap:.5cqh;color:#fff;text-align:center}
.ed-sic{width:clamp(30px,4.2cqh,44px);height:clamp(30px,4.2cqh,44px);display:grid;place-items:center;flex:0 0 auto}
.ed-sic svg{width:100%;height:100%;color:#fff}
.ed-sidebtn small{font-size:clamp(9px,1.35cqh,13px);font-weight:700;line-height:1.05}
.ed-sidebtn:active{opacity:.6}
/* painel de texto (revelado por Adicionar Texto / Ajustar Cores) */
.ed-textpanel{flex:0 0 auto;display:flex;flex-direction:column;gap:1.1cqh}
.ed-textrow{display:flex;align-items:center;gap:12px;min-height:var(--target-min);background:var(--white);border:2px solid var(--line);border-radius:16px;padding:0 4cqw}
.ed-textrow svg{width:clamp(20px,2.6cqh,26px);color:var(--muted);flex:0 0 auto}
.ed-textrow input{flex:1;border:none;background:none;font-family:inherit;font-size:clamp(15px,2.1cqh,20px);font-weight:600;outline:none;color:var(--ink)}
.ed-colors{display:flex;gap:2.2cqw;flex-wrap:wrap;justify-content:center}
.ed-color{width:clamp(40px,5.2cqh,54px);height:clamp(40px,5.2cqh,54px);border-radius:50%;border:3px solid var(--line)}
.ed-color.on{border-color:#fff;box-shadow:0 0 0 3px var(--ink)}
/* sliders matiz + brilho */
.ed-sliders{flex:0 0 auto;display:flex;flex-direction:column;gap:1.2cqh;padding:.2cqh 1cqw}
.ed-range{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:99px;outline:none}
.ed-range-hue{background:linear-gradient(90deg,#ff0000,#ffea00,#00e000,#00e0e0,#0000ff,#e000e0,#ff0000)}
.ed-range-bri{background:linear-gradient(90deg,#000,#8a8a8a,#fff)}
.ed-range::-webkit-slider-thumb{-webkit-appearance:none;width:clamp(24px,3.2cqh,32px);height:clamp(24px,3.2cqh,32px);border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.3);cursor:pointer}
.ed-range::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--ink)}
/* ferramentas inferiores */
.ed-bottools{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw;padding:.2cqh 0}
.ed-btool{display:flex;flex-direction:column;align-items:center;gap:.6cqh;color:#6a6a72}
.ed-btic{width:clamp(30px,4cqh,44px);height:clamp(30px,4cqh,44px);border-radius:12px;display:grid;place-items:center;background:var(--surface);transition:.15s}
.ed-btic svg{width:56%;color:var(--ink)}
.ed-btool small{font-size:clamp(9px,1.35cqh,13px);font-weight:700;text-align:center;line-height:1.05}
.ed-btool-on .ed-btic{background:var(--red)}
.ed-btool-on .ed-btic svg{color:#fff}
.ed-btool-on small{color:var(--red-dk)}
/* modal Aviso Legal */
.ed-modal{position:absolute;inset:0;background:rgba(10,8,12,.62);display:grid;place-items:center;z-index:60;padding:0 8cqw}
.ed-modal-box{background:#fff;border-radius:24px;width:100%;max-width:560px;padding:3cqh 6cqw 3.4cqh;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.ed-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2cqh}
.ed-modal-head b{font-size:clamp(18px,2.8cqh,26px);font-weight:900;color:var(--ink)}
.ed-modal-x{width:clamp(38px,4.6cqh,48px);height:clamp(38px,4.6cqh,48px);border-radius:50%;display:grid;place-items:center;color:var(--muted);flex:0 0 auto}
.ed-modal-x svg{width:52%}
.ed-modal-body{background:var(--surface);border-radius:14px;padding:2.2cqh 5cqw;font-size:clamp(15px,2.1cqh,19px);color:var(--ink);font-weight:600;margin-bottom:2.4cqh}
.ed-modal-confirm{width:100%}

/* ETAPA 5 · cupom (pay-* reusa v2) */
.coupon{display:flex;align-items:center;gap:12px;min-height:var(--target-min);background:var(--surface);border:2px dashed var(--line);border-radius:16px;padding:0 4cqw;margin:1.4cqh 0}
.coupon svg{width:clamp(22px,3cqh,28px);color:var(--muted);flex:0 0 auto}
.coupon input{flex:1;border:none;background:none;font-family:inherit;font-size:clamp(14px,2cqh,18px);font-weight:700;outline:none;text-transform:uppercase;color:var(--ink)}
.coupon-apply{flex:0 0 auto;min-height:clamp(46px,5.8cqh,66px);padding:0 5cqw;border-radius:12px;background:var(--ink);color:#fff;font-weight:800;font-size:clamp(13px,1.8cqh,16px)}
.coupon-apply.done{background:var(--lime);color:var(--ink)}

/* benefits */
.benefit-card{margin-top:2.4cqh;background:var(--red);color:#fff;border-radius:var(--r-lg);padding:4cqh 6cqw}
.benefit-tag{display:inline-block;font-size:clamp(12px,1.7cqh,15px);font-weight:800;letter-spacing:.04em;background:rgba(255,255,255,.22);padding:.9cqh 3.2cqw;border-radius:99px;margin-bottom:2cqh}
.benefit-card h3{font-size:clamp(21px,3.2cqh,32px);font-weight:900;text-transform:uppercase;line-height:.98;letter-spacing:-.01em}
.benefit-card p{margin-top:1.4cqh;font-size:clamp(15px,2.2cqh,20px);font-weight:700;opacity:.96}
.benefit-input{margin-top:2.6cqh;display:flex;gap:12px}
.benefit-input input{flex:1;min-height:var(--target-min);border:none;border-radius:14px;background:#fff;padding:0 4cqw;font-family:inherit;font-size:clamp(15px,2.1cqh,20px);font-weight:700;color:var(--ink);outline:none}
.benefit-btn{flex:0 0 auto;min-height:var(--target-min);padding:0 6cqw;border-radius:14px;background:var(--ink);color:#fff;font-weight:800;font-size:clamp(15px,2.1cqh,19px)}
.benefit-alt{margin-top:2.4cqh;display:flex;align-items:center;gap:14px;text-align:left;width:100%;min-height:var(--target-cta);background:var(--white);border:2px solid var(--line);border-radius:var(--r-md);padding:0 5cqw}
.benefit-alt span{flex:1;min-width:0}
.benefit-alt b{display:block;font-size:clamp(16px,2.4cqh,22px);font-weight:800}
.benefit-alt small{display:block;margin-top:2px;font-size:clamp(13px,1.8cqh,16px);color:#6a645c;font-weight:500}
.benefit-alt svg{width:clamp(28px,4cqh,40px);color:var(--red);stroke-width:3;flex:0 0 auto}
.benefits-foot{display:flex;align-items:center;gap:14px}
.prod-mini{flex:1;display:flex;align-items:center;gap:12px;min-width:0}
.prod-mini-dot{width:11px;height:11px;border-radius:50%;background:var(--red);animation:pulse 1.3s infinite;flex:0 0 auto}
.prod-mini small{display:block;font-size:clamp(10px,1.4cqh,12px);font-weight:700;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.prod-mini b{display:block;font-size:clamp(14px,2cqh,18px);font-weight:800}
.prod-mini-timer{margin-left:auto;font-size:clamp(16px,2.4cqh,22px);font-weight:900;color:var(--red)}

/* how-it-works + help (dark) */
.howto-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:3cqh 0 1cqh}
.howto-close{width:clamp(56px,7cqh,72px);height:clamp(56px,7cqh,72px);border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.28);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.howto-close svg{width:42%;stroke-width:2.6}
.howto-list,.help-body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:1.6cqh;padding:1cqh 0 2cqh;scrollbar-width:none}
.howto-list::-webkit-scrollbar,.help-body::-webkit-scrollbar{display:none}
.howto-item,.help-item{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:2.6cqh 5cqw}
.howto-item{display:flex;gap:16px;align-items:flex-start}
.howto-num{width:clamp(40px,5.4cqh,54px);height:clamp(40px,5.4cqh,54px);border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:900;font-size:clamp(18px,2.6cqh,24px);flex:0 0 auto}
.howto-item b,.help-item b{display:block;font-size:clamp(17px,2.4cqh,22px);font-weight:800;color:#fff}
.howto-item p,.help-item p{margin-top:.6cqh;font-size:clamp(14px,1.9cqh,17px);color:rgba(255,255,255,.75);font-weight:500;line-height:1.4}
.dark-foot{background:#0a0a0a;border-top:1px solid rgba(255,255,255,.14);box-shadow:none}
.dark-foot .prod-note{margin-right:auto}
.btn-back.light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
/* correções da auditoria v3 */
.eyebrow.light{color:var(--lime)}
.benefit-tag{background:rgba(255,255,255,.95);color:var(--red-dk)}
.ed-color{width:clamp(48px,6cqh,64px);height:clamp(48px,6cqh,64px)}

/* ═══ v3 · camada de sistema (boas práticas) ═══ */
/* feedback de toque */
.tap-ripple{position:fixed;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:rgba(255,0,36,.3);pointer-events:none;transform:scale(0);opacity:0;z-index:9998}
@media (prefers-reduced-motion:no-preference){ .tap-ripple.go{animation:tapr .45s ease-out} }
@keyframes tapr{0%{transform:scale(0);opacity:.55}100%{transform:scale(9);opacity:0}}

/* inatividade */
.idle-overlay{position:absolute;inset:0;z-index:9999;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:8cqw}
.idle-box{background:var(--white);border-radius:var(--r-lg);padding:5cqh 7cqw;text-align:center;width:100%;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.idle-box h3{font-size:clamp(26px,4cqh,40px);font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
.idle-box p{margin-top:1.4cqh;font-size:clamp(15px,2.1cqh,20px);color:#4a4a50;font-weight:500}
.idle-count{width:clamp(84px,12cqh,120px);height:clamp(84px,12cqh,120px);border-radius:50%;border:5px solid var(--red);color:var(--red);display:grid;place-items:center;font-size:clamp(34px,5cqh,52px);font-weight:900;margin:3cqh auto;font-variant-numeric:tabular-nums}
.idle-box .btn-primary{width:100%}

/* consentimento LGPD + expiração Pix */
.consent{margin:2cqh 0 .6cqh;font-size:clamp(12px,1.7cqh,15px);line-height:1.4;color:#5a5a60;font-weight:500;text-align:center}
.consent-link{display:block;width:100%;min-height:clamp(48px,6cqh,60px);color:var(--red-dk);font-weight:800;text-decoration:underline;text-underline-offset:3px;font-size:clamp(13px,1.8cqh,16px)}
.qr-expired{margin-top:2.6cqh;font-size:clamp(13px,1.9cqh,17px);color:#fff;font-weight:700;text-align:center}
.qr-regen{color:var(--lime);font-weight:800;text-decoration:underline;text-underline-offset:3px;font-size:inherit}

/* alerta de pagamento recusado */
.pay-alert{display:flex;align-items:center;gap:12px;background:rgba(255,0,36,.08);border:2px solid var(--red);border-radius:16px;padding:1.6cqh 4cqw;margin-bottom:1.2cqh;color:var(--red-dk);font-weight:700;font-size:clamp(14px,2cqh,18px);line-height:1.3}
.pay-alert svg{width:clamp(28px,3.6cqh,36px);color:var(--red);flex:0 0 auto}
.demo-row{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;padding:1.4cqh 0 .4cqh}
.demo-row .lnk-demo{width:auto;min-height:clamp(30px,3.4cqh,40px);padding:0 3cqw;font-size:clamp(11px,1.5cqh,13px)}

/* fora de serviço */
.oos-content,.pf-content{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;padding:6cqh 8cqw}
.oos-ico,.pf-ico{width:clamp(72px,11cqh,110px);height:clamp(72px,11cqh,110px);color:var(--red);display:grid;place-items:center;margin-bottom:2.6cqh}
.oos-ico svg,.pf-ico svg{width:100%;stroke-width:1.8}
.oos-title,.pf-title{font-weight:900;text-transform:uppercase;line-height:.9;font-size:clamp(30px,5.4cqh,56px);color:#fff}
.oos-title em,.pf-title em{font-style:normal;color:var(--red)}
.oos-sub,.pf-sub{margin:2.6cqh 0;font-size:clamp(16px,2.3cqh,22px);color:rgba(255,255,255,.82);font-weight:600}
.oos-alt{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:2.4cqh 5cqw;margin-bottom:1.4cqh;text-align:left}
.oos-alt b{display:block;font-size:clamp(15px,2.1cqh,19px);color:#fff;font-weight:800}
.oos-alt span{display:block;margin-top:2px;font-size:clamp(14px,1.9cqh,16px);color:rgba(255,255,255,.75)}
.lnk-demo.light{color:rgba(255,255,255,.6);margin-top:2cqh}

/* falha de impressão + estorno */
.pf-refund{background:rgba(159,245,88,.12);border:1.5px solid var(--lime);border-radius:16px;padding:2.6cqh 5cqw;font-size:clamp(15px,2.1cqh,19px);color:#fff;font-weight:500;line-height:1.45;margin-bottom:2cqh}
.pf-refund svg{color:var(--lime);width:20px;height:20px;vertical-align:-4px;stroke-width:3}
.pf-refund b{font-weight:800}
.pf-order{font-size:clamp(13px,1.7cqh,16px);color:rgba(255,255,255,.62);font-weight:600;letter-spacing:.03em;margin-bottom:3cqh}
.printfail-cta{background:#fff!important;color:var(--red)!important;width:auto;padding:0 9cqw}

/* toggle de som */
.help-toggle{text-align:left;width:100%}
.help-toggle:active{transform:scale(.99)}

/* rodapé empilhado (produção): aviso em cima, CTA full-width embaixo — nunca corta */
.pfoot-stack{flex-direction:column;align-items:stretch;gap:1.8cqh}
.pfoot-stack .btn-primary,.pfoot-stack .btn-next{width:100%}
.pfoot-stack .prod-note{margin:0;justify-content:center}

/* ═══════════════════════════════════════════════
   CAPA (attract) — dark premium, identidade do site
   ═══════════════════════════════════════════════ */
.standby{background:#000;overflow:hidden}
.std-glow{position:absolute;inset:0;z-index:0;background:radial-gradient(95% 55% at 50% -6%,rgba(255,0,36,.6),rgba(255,0,36,.12) 42%,transparent 66%)}
.std-kanji{position:absolute;top:0;right:-10%;z-index:0;font-weight:900;line-height:.72;font-size:min(66cqw,380px);color:rgba(255,255,255,.045);pointer-events:none}
.std-spine{position:absolute;top:15%;right:3.4%;z-index:3;writing-mode:vertical-rl;font-size:clamp(11px,1.5cqh,15px);letter-spacing:.32em;font-weight:700;color:rgba(255,255,255,.5)}
.std-content{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;padding:3cqh 6cqw 4cqh}
.std-top{flex:0 0 auto;display:flex;align-items:center}
.std-logo{height:clamp(46px,7cqh,88px);width:auto;filter:none}
.std-kicker{flex:0 0 auto;margin-top:2.2cqh;font-size:clamp(12px,1.7cqh,16px);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82);display:flex;align-items:center;gap:8px}
.std-kicker b{color:var(--red);font-weight:800;font-size:1.2em}
.std-title{flex:0 0 auto;margin-top:1.4cqh;font-weight:900;line-height:.9;letter-spacing:-.02em;text-transform:uppercase;font-size:clamp(30px,5.8cqh,58px);color:#fff}
.std-title em{font-style:normal;color:var(--red)}
.std-hero{flex:1 1 auto;min-height:0;display:grid;place-items:center;padding:2cqh 0;margin:0}
.std-hero img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 20px 46px rgba(0,0,0,.7))}
.std-marquee{flex:0 0 auto;overflow:hidden;border-top:1.5px solid rgba(255,255,255,.16);border-bottom:1.5px solid rgba(255,255,255,.16);padding:1.3cqh 0;margin-bottom:2.6cqh}
.std-mqt{display:inline-flex;white-space:nowrap;animation:stdmq 14s linear infinite;font-weight:800;font-size:clamp(13px,1.8cqh,17px);text-transform:uppercase;color:#fff;letter-spacing:.03em}
.std-mqt span{padding:0 2.6cqw}
.std-mqt i{padding:0 2.6cqw;color:var(--red);font-style:normal}
@media (prefers-reduced-motion:reduce){.std-mqt{animation:none}}
@keyframes stdmq{to{transform:translateX(-50%)}}
.std-cta{position:relative;flex:0 0 auto;min-height:clamp(48px,5.2cqh,58px);width:100%;background:#fff;color:var(--red);
  font-weight:900;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(19px,2.5cqh,24px);border-radius:99px;
  display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;transition:transform .15s;
  animation:ctaPulse 2.2s ease-out infinite}
.std-cta:active{transform:scale(.97)}
.std-cta svg{width:1em;height:1em;stroke-width:3}
@media (prefers-reduced-motion:reduce){.std-cta{animation:none}}
@keyframes ctaPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%,100%{box-shadow:0 0 0 24px rgba(255,255,255,0)}}
.std-ghost{flex:0 0 auto;margin-top:1.2cqh;min-height:clamp(42px,4.4cqh,50px);width:100%;background:rgba(255,255,255,.1);
  color:#fff;border:1.5px solid rgba(255,255,255,.32);font-weight:700;font-size:clamp(13px,1.7cqh,16px);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;gap:10px}
.std-ghost svg{width:1.1em;height:1.1em;fill:currentColor}

/* ═══ melhorias do lote ═══ */
/* preço cedo */
.price-tag{display:inline-block;font-size:.8em;font-weight:800;color:var(--red-dk);background:rgba(255,0,36,.09);padding:2px 11px;border-radius:99px;white-space:nowrap}

/* attract em loop (crossfade de quadros) */
.std-hero{position:relative;overflow:hidden}
.std-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1s ease;filter:drop-shadow(0 20px 46px rgba(0,0,0,.7))}
.std-frame.on{opacity:1}
@media (prefers-reduced-motion:reduce){.std-frame{transition:none}}

/* clímax do "retire": capinha real + confete */
.done-confetti{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.done-confetti i{position:absolute;top:-8%;width:10px;height:16px;border-radius:2px;animation-name:conf;animation-timing-function:linear;animation-fill-mode:forwards}
@keyframes conf{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(118cqh) rotate(760deg);opacity:.85}}
@media (prefers-reduced-motion:reduce){.done-confetti{display:none}}
.done-content{position:relative;z-index:1}
.done-case{position:relative;margin:0 auto 4cqh;width:min(40%,190px)}
.done-caseinner{aspect-ratio:1080/2160;border-radius:14% / 7%;background-size:cover;background-position:center;background-color:#111;position:relative;overflow:hidden;box-shadow:0 24px 54px rgba(0,0,0,.4),inset 0 0 0 3px rgba(255,255,255,.18);animation:donePop .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes donePop{0%{transform:scale(0) rotate(-14deg)}100%{transform:scale(1) rotate(0)}}
.done-badge{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);background:#0A0A0A;color:var(--lime);font-weight:800;font-size:clamp(12px,1.7cqh,15px);padding:6px 15px;border-radius:99px;display:flex;align-items:center;gap:6px;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.done-badge svg{width:16px;height:16px;stroke-width:3;color:var(--lime)}

/* editor interativo: arrastar + zoom */
.editor-case{touch-action:none;cursor:grab}
.editor-case:active{cursor:grabbing}
.ed-draghint{position:absolute;bottom:1.6cqh;left:50%;transform:translateX(-50%);font-size:clamp(11px,1.5cqh,14px);font-weight:700;color:#fff;background:rgba(0,0,0,.55);padding:5px 12px;border-radius:99px;pointer-events:none;transition:opacity .3s;white-space:nowrap;z-index:4}

/* modo acessível (abaixa a interface) */
.a11y-btn{position:absolute;left:3cqw;bottom:2.6cqh;z-index:60;width:clamp(50px,6.4cqh,64px);height:clamp(50px,6.4cqh,64px);border-radius:50%;
  background:rgba(255,255,255,.92);border:2px solid var(--ink);display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.a11y-btn svg{width:52%;fill:none;stroke:var(--ink);stroke-width:1.9}
.a11y-btn.on{background:var(--red);border-color:var(--red)}
.a11y-btn.on svg{stroke:#fff}
.device.reach .screens{transform:scale(.84);transform-origin:bottom center;transition:transform .35s cubic-bezier(.16,.84,.44,1)}
.screens{transition:transform .35s cubic-bezier(.16,.84,.44,1)}

/* correções de corte (revisão) */
/* upload: compactar pra caber sem cortar a política/rodapé */
.foto-wrap{gap:1.8cqh}
[data-screen="upload"] .qr-card{padding:2.2cqh 6cqw}
[data-screen="upload"] .qr-box{width:min(33%,150px)}
[data-screen="upload"] .qr-label,[data-screen="upload"] .qr-hint{display:none}
.consent{margin:1.2cqh 0 .2cqh}
.consent-link{min-height:clamp(44px,5cqh,54px);margin-bottom:1.6cqh}
.lnk-alt{margin-top:0;margin-bottom:1cqh}
.lnk-demo{min-height:clamp(44px,5cqh,56px);margin-bottom:1.2cqh}
.demo-row{margin-top:1.8cqh}
/* produção: "EM ANDAMENTO" não corta (div do meio encolhe) */
.cam-step > div{flex:1;min-width:0}
.cam-step b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cam-status{flex:0 0 auto;margin-left:8px}
/* pronto: compactar pra caber com a capinha + confete */
.done-content{padding:3.4cqh 7cqw}
.done-case{width:min(33%,148px);margin:0 auto 3cqh}
.done-title{font-size:clamp(28px,5.2cqh,54px)}
.done-sub{margin:2.2cqh 0}
.done-order{margin-bottom:2.8cqh}
/* "não acho meu aparelho" perto da busca */
.model-help-link{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:clamp(46px,5.6cqh,60px);margin:0 0 1.8cqh;padding:0 1cqw;color:var(--red-dk);font-weight:700;font-size:clamp(13px,1.8cqh,16px);text-decoration:underline;text-underline-offset:3px}
.model-help-link svg{width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:2}

/* teclado on-screen */
.kbd{position:absolute;left:0;right:0;bottom:0;z-index:9500;background:#17171b;padding:1.4cqh 1.6cqw 2.2cqh;
  display:flex;flex-direction:column;gap:1cqh;box-shadow:0 -14px 44px rgba(0,0,0,.55);
  transform:translateY(106%);pointer-events:none;transition:transform .28s cubic-bezier(.16,.84,.44,1)}
.kbd.open{transform:translateY(0);pointer-events:auto}
@media (prefers-reduced-motion:reduce){.kbd{transition:none}}
.kbd-row{display:flex;gap:1.4cqw;justify-content:center}
.kbd-key{flex:1;min-width:0;min-height:clamp(54px,6.6cqh,86px);border-radius:12px;background:#2e2e34;color:#fff;
  font-family:inherit;font-weight:700;font-size:clamp(17px,2.6cqh,26px);border:none;display:grid;place-items:center;transition:transform .08s,background .12s}
.kbd-key:active{transform:scale(.93);background:#43434c}
.kbd-fn{background:#3c3c44;flex:1.3;font-size:clamp(18px,2.8cqh,28px)}
.kbd-shift.on{background:var(--red)}
.kbd-space{flex:5;font-size:clamp(13px,2cqh,18px);color:rgba(255,255,255,.72);font-weight:600}
.kbd-done{flex:2.6;background:var(--red);font-weight:800}

/* ── QR DE PAREAMENTO REAL (spec QR §4.2) — substitui o QR decorativo ──
   ≥320px CSS na tela de upload; contraste máximo; sem animação/filtro. */
.qr-box.qr-live{padding:0;position:relative;overflow:hidden}
.qr-box.qr-live canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
[data-screen="upload"] .qr-card{padding:2.2cqh 2.6cqw}
[data-screen="upload"] .qr-box.qr-live{width:min(100%,340px)}
.qr-url{margin-top:1.6cqh;text-align:center;font-size:clamp(12px,1.7cqh,15px);font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.85);word-break:break-all}