/* Link Affiliattes — #demo no celular (18/10/2026).
   A moldura é o device.png do iPhone 17 Pro da extensão Mobile Simulator (878×1806) e a tela entra
   pelos números do viewport do simulator.js: 402×873 em (19,15) num quadro de 439×903.
   O contorno da tela (cantos e a ilha) é o próprio caminho "portrait" do simulator.js, usado como máscara.
   A tela do app copia o app real no celular (assets/painel-inicio-390.webp): cabeçalho, "Olá", quatro números
   numa caixa só, saldo vermelho e barra de abas embaixo. Tudo dentro da tela mede em --u = 1/330 da largura. */

#demo .stage{--cw:min(290px,80cqw)}
#demo .cel{position:relative;width:var(--cw);aspect-ratio:878/1806;margin-inline:auto;animation:bob 7s ease-in-out infinite;filter:drop-shadow(0 40px 50px rgba(0,0,0,.7))}
#demo .cel .moldura{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none}
#demo .cel-tela{position:absolute;left:4.328%;top:1.6611%;width:91.5718%;height:96.6777%;container-type:size;overflow:hidden;-webkit-mask:url(../assets/iphone-17-pro-tela.svg?v=1) 0 0/100% 100% no-repeat;mask:url(../assets/iphone-17-pro-tela.svg?v=1) 0 0/100% 100% no-repeat}

/* ---------- o app ---------- */
#demo .app{--u:calc(100cqw / 330);position:absolute;inset:0;display:flex;flex-direction:column;font-size:calc(14 * var(--u));background:radial-gradient(120% 50% at 50% 0,rgba(140,24,18,.28),transparent 70%),linear-gradient(180deg,#121316,#0b0c0e)}
#demo .app .ic{width:calc(19 * var(--u));height:calc(19 * var(--u))}

#demo .app-status{flex:none;display:flex;align-items:center;justify-content:space-between;height:calc(50 * var(--u));padding:calc(4 * var(--u)) calc(24 * var(--u)) 0 calc(34 * var(--u))}
#demo .app-status b{font-size:calc(15 * var(--u));font-weight:600;letter-spacing:-.01em}
#demo .app-sb{display:flex;align-items:center;gap:calc(5 * var(--u))}
#demo .app-sb svg{height:calc(10.5 * var(--u));width:auto;fill:#fff}
#demo .app-bat{position:relative;display:block;width:calc(24 * var(--u));height:calc(11.5 * var(--u));border-radius:calc(3.5 * var(--u));box-shadow:0 0 0 1px rgba(255,255,255,.45) inset}
#demo .app-bat i{position:absolute;inset:calc(2 * var(--u));right:calc(5 * var(--u));border-radius:calc(2 * var(--u));background:#fff}

#demo .app-top{flex:none;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:calc(10 * var(--u));padding:calc(6 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u));border-bottom:1px solid rgba(255,255,255,.07)}
#demo .app-bt{position:relative;display:grid;place-items:center;width:calc(38 * var(--u));height:calc(38 * var(--u));border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;color:#e6e8eb}
#demo .app-bt .ic{width:calc(17 * var(--u));height:calc(17 * var(--u))}
#demo .app-logo{height:calc(26 * var(--u));width:auto;justify-self:start}
#demo .app-sino i{position:absolute;top:calc(-3 * var(--u));right:calc(-3 * var(--u));display:grid;place-items:center;min-width:calc(17 * var(--u));height:calc(17 * var(--u));border-radius:999px;background:var(--red);color:#fff;font-style:normal;font-size:calc(10 * var(--u));font-weight:700}
#demo .app-av{display:grid;place-items:center;width:calc(34 * var(--u));height:calc(34 * var(--u));border-radius:50%;background:#14532d;color:#86efac;font-size:max(12px,calc(12 * var(--u)));font-weight:600} /* a tela do aparelho encolhe com a moldura: as iniciais desciam a 9,6px no celular; 12px cabem no círculo de 27px */

#demo .app-corpo{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(12 * var(--u));padding:calc(34 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));overflow:hidden}
#demo .app-corpo>*{flex-shrink:0}
#demo .app .p-top{flex-wrap:wrap;align-items:center;gap:calc(6 * var(--u)) calc(8 * var(--u))}
#demo .app .eyebrow{font-size:calc(12 * var(--u));font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#a9b0b9}
#demo .app .tag-ex{font-size:max(12px,calc(10.5 * var(--u)));white-space:nowrap;padding:calc(3 * var(--u)) calc(9 * var(--u))}
#demo .app-ola{font-size:calc(25 * var(--u));font-weight:700;letter-spacing:-.045em;line-height:1.1}

/* os quatro números numa caixa só, com as divisórias do app */
#demo .app .p-stats{grid-template-columns:1fr 1fr;gap:1px;border-radius:calc(14 * var(--u));overflow:hidden;background:rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(255,255,255,.12)}
#demo .app .s{text-align:left;padding:calc(12 * var(--u)) calc(14 * var(--u));border-radius:0;background-color:#121417;box-shadow:none}
#demo .app .s span{font-size:max(12px,calc(12.5 * var(--u)));font-weight:500;white-space:nowrap;color:#b4bac2}
#demo .app .s b{justify-content:flex-start;gap:calc(8 * var(--u));font-size:calc(26 * var(--u));margin-top:calc(4 * var(--u))}
#demo .app-dot{flex:none;width:calc(7 * var(--u));height:calc(7 * var(--u));border-radius:50%;background:var(--ok);box-shadow:0 0 calc(6 * var(--u)) rgba(53,208,127,.6)}
#demo .stage[data-step="0"] .app .s0,#demo .stage[data-step="1"] .app .s1,#demo .stage[data-step="2"] .app .s2{background-color:#22110f;box-shadow:0 0 0 1.5px rgba(255,84,72,.75) inset}
#demo.la-a .app .la-delta{font-size:calc(11 * var(--u))}

#demo .app .p-bal{padding:calc(16 * var(--u));border-radius:calc(16 * var(--u))}
#demo .app .bal-head{flex-wrap:wrap;gap:calc(6 * var(--u)) calc(8 * var(--u))}
#demo .app .bal-head .eyebrow{font-size:max(12px,calc(13 * var(--u)));letter-spacing:0;text-transform:none;color:#fff}
#demo .app .chip{font-size:max(12px,calc(11.5 * var(--u)));letter-spacing:0;text-transform:none;padding:calc(4 * var(--u)) calc(10 * var(--u));background:rgba(255,255,255,.14);box-shadow:0 0 0 1px rgba(255,255,255,.45) inset}
#demo .app .bal-val{font-size:calc(36 * var(--u));margin:calc(8 * var(--u)) 0 calc(4 * var(--u))}
/* a nota fixa do saldo sai: o que muda a cada passo (chip, saldo e a fileira) é o que conta, e assim tudo cabe com letra de 12px */
#demo .app .bal-note{display:none}
#demo .app .bal-row{grid-template-columns:repeat(3,auto);justify-content:space-between;align-items:end;gap:max(6px,calc(8 * var(--u)));margin-top:calc(12 * var(--u));padding:calc(10 * var(--u)) calc(10 * var(--u));border:1px solid rgba(255,255,255,.18);border-radius:calc(12 * var(--u));background:rgba(0,0,0,.12)}
#demo .app .bal-row span{font-size:max(12px,calc(11.5 * var(--u)));line-height:1.2}
#demo .app .bal-row b{font-size:max(12px,calc(13.5 * var(--u)));white-space:nowrap}

#demo .app-tab{flex:none;display:grid;grid-template-columns:repeat(5,1fr);gap:calc(4 * var(--u));padding:calc(8 * var(--u)) calc(8 * var(--u)) calc(24 * var(--u));border-top:1px solid rgba(255,255,255,.08);background:rgba(10,11,13,.92)}
#demo .app-tab b{display:flex;flex-direction:column;align-items:center;gap:calc(4 * var(--u));padding:calc(7 * var(--u)) 0;border-radius:calc(12 * var(--u));font-size:calc(11.5 * var(--u));font-weight:600;color:#a9b0b9}
#demo .app-tab b.on{background:rgba(217,45,32,.16);color:#ff6b61}

/* ---------- o aviso desce do topo, por baixo da ilha, como no iPhone ---------- */
#demo .cel .push{--u:calc(100cqw / 330);left:calc(9 * var(--u));right:calc(9 * var(--u));top:calc(48 * var(--u));bottom:auto;gap:calc(11 * var(--u));padding:calc(11 * var(--u)) calc(13 * var(--u));border-radius:calc(22 * var(--u));background:rgba(46,48,54,.94);transform:translateY(calc(-18 * var(--u))) scale(.96)}
#demo .stage:not([data-step="0"]) .cel .push{transform:none}
#demo .cel .push img{width:calc(36 * var(--u));height:calc(36 * var(--u));border-radius:calc(9 * var(--u))}
#demo .cel .push small{font-size:max(12px,calc(11.5 * var(--u)));color:#b4bac2}
#demo .cel .push b{font-size:max(13px,calc(14.5 * var(--u)))}
#demo .cel .push p{font-size:max(12px,calc(12.5 * var(--u)))}
/* o aviso anterior fica por baixo, aparecendo na borda de baixo */
#demo.la-a .cel .la-push-ant{--u:calc(100cqw / 330);left:calc(9 * var(--u));right:calc(9 * var(--u));top:calc(48 * var(--u));bottom:auto;border-radius:calc(22 * var(--u));background:rgba(44,46,52,.7)}
#demo.la-a .stage[data-step="2"] .cel .la-push-ant,#demo.la-a .stage[data-step="3"] .cel .la-push-ant{transform:translateY(calc(9 * var(--u))) scale(.93)}

/* ---------- composição por largura ---------- */
/* celular: o aparelho entra recortado em pé (sem a barra de abas), maior e legível, e a seção fica curta */
@media (max-width:599px){#demo .stage{--cw:min(310px,88cqw);margin-top:calc(min(.405 * (100vw - 2 * var(--pad)), 220px) - 32px)}}
@media (max-width:1199px){
  #demo .tilt{box-sizing:border-box;height:calc(var(--cw) * 2.057 * .8 + 8px);padding-top:8px;-webkit-mask-image:linear-gradient(#000 calc(100% - 64px),transparent);mask-image:linear-gradient(#000 calc(100% - 64px),transparent)}
  #demo .app-corpo{padding-top:calc(14 * var(--u))}
}
#demo .stepper{width:min(100%,460px)}
@media (min-width:600px){#demo .stage{--cw:320px}}
@media (min-width:900px){#demo .stage{--cw:300px}}
@media (min-width:1200px){
  #demo .stage{--cw:clamp(280px,calc((100svh - 300px) * .4862),330px)}
  #demo{padding-bottom:var(--sec)}
  #demo .stepper{width:64%}
  /* o Lynk sobe para o lado do celular: a mão aponta para o aviso que desce do topo da tela */
  #demo .lynk{--lw:min(46cqw,360px);align-self:start;margin-right:-2cqw}
  #demo .lynk-in{top:calc(var(--cw) * .15)}
  #demo .lynk-body img{-webkit-mask-image:none;mask-image:none}
}

@media (prefers-reduced-motion:reduce){#demo .cel{animation:none}}