/* =====================================================================
   PROPOSTA HARBOR RESIDENCE · by alvs
   Direção: paleta brandbook alvs (preto-câmara + osso + vermelho REC)
   Estrutura, fontes e animações herdadas da do Pedro Vargas — só a cor muda.
   ===================================================================== */
@property --ang{syntax:'<angle>';inherits:false;initial-value:120deg}
@property --bgx{syntax:'<number>';inherits:false;initial-value:50}
@property --bgy{syntax:'<number>';inherits:false;initial-value:50}
@property --rotate{syntax:'<number>';inherits:false;initial-value:0}
@property --gty{syntax:'<number>';inherits:false;initial-value:-22}

*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* 60% — preto-câmara */
  --bg:#0A0A0A;
  --surface:#141414;
  --surface-2:#1B1B1B;
  /* 30% — osso */
  --ink:#EFEDE6;
  --ink-soft:#C7C4BB;
  --mut:#8F8C85;
  --line:rgba(239,237,230,.13);
  --line-2:rgba(239,237,230,.22);
  /* 10% — vermelho */
  --red:#AD2926;
  --red-hot:#FF1F14;
  --red-deep:#6B1311;
  --red-text:#FF6B5A;          /* acento legível sobre preto */
  --grad:linear-gradient(120deg,#FF1F14,#AD2926 58%,#6B1311);
  --grad-soft:linear-gradient(120deg,#FF4A3A,#AD2926);
  /* prisma RETRÔ (dispersão light-leak, vermelho dominante + sliver frio · NÃO arco-íris) — brandbook */
  --aurora:linear-gradient(100deg,#AD2926 0%,#FF1F14 26%,#FF7A1E 42%,#EFEDE6 54%,#3FA0E6 66%,#AD2926 100%);
  /* glow prismático reusável (conic girando via --ang) — balão, borda dos cards 3-5, blocos das telas 06/08 */
  --prism-glow:conic-gradient(from var(--ang),rgba(255,31,20,.82),rgba(255,122,30,.52),rgba(239,237,230,.44),rgba(63,160,230,.58),rgba(173,41,38,.64),rgba(255,31,20,.82));
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:22px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'General Sans',sans-serif;
  /* fundo do site inteiro: gradiente ESTÁTICO adaptado pro brandbook (cinzas neutros + preto-câmara), fixo — não recarrega/anima ao trocar de tela */
  background:linear-gradient(135deg,#232323 0%,#0a0a0a 48%,#1b1b1b 100%) fixed;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::selection{background:var(--red-hot);color:#fff;}

/* grain de filme (overlay claro sobre o preto) */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- borda em gradiente girando (molten vermelho) ---------- */
.gb{position:relative;border-radius:20px;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
    conic-gradient(from var(--ang),#6B1311,#FF1F14 25%,#AD2926 50%,#FF1F14 75%,#6B1311) border-box;
  border:1.5px solid transparent;animation:spin 7s linear infinite;}
.gb-dark{background:linear-gradient(#0A0A0A,#0A0A0A) padding-box,
    conic-gradient(from var(--ang),#6B1311,#FF1F14 25%,#AD2926 50%,#FF1F14 75%,#6B1311) border-box;}
.gb-2{background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,
    conic-gradient(from var(--ang),#6B1311,#FF1F14 25%,#AD2926 50%,#FF1F14 75%,#6B1311) border-box;}
.gb-fast{animation-duration:3.2s;border-width:2px;}
@keyframes spin{to{--ang:480deg}}

/* =====================================================================
   TIPOGRAFIA BASE
   ===================================================================== */
.eyebrow{font-family:'Satoshi',sans-serif;font-weight:500;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--mut);}
.eyebrow .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--grad);
  margin-right:8px;vertical-align:middle;}
.disp{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.04em;line-height:.86;color:var(--ink);}
.disp em{font-weight:300;font-style:italic;letter-spacing:-.02em;}
.body-txt{font-size:15px;line-height:1.62;color:var(--ink-soft);}
.body-txt strong{color:var(--ink);font-weight:600;}
.body-txt em{font-style:italic;color:var(--ink);}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}

/* =====================================================================
   HERO
   ===================================================================== */
.hero-frame{padding:30px 22px 26px;display:flex;flex-direction:column;gap:26px;border-radius:26px;}
.hero-top{display:flex;justify-content:space-between;align-items:center;}
.hero-h{font-size:clamp(52px,15vw,86px);}
.hero-h .l{display:block;overflow:hidden;}
.pv-card{padding:22px 20px;border-radius:18px;display:flex;flex-direction:column;gap:14px;}
.client-logos{display:flex;align-items:center;gap:18px;}
.client-logos .cl-mark{width:auto;filter:brightness(0) invert(1);} /* branco total */
.client-logos .cl-somar{height:46px;}
.client-logos .cl-milk{height:58px;}
.client-logos .cl-plus{font-family:'Bricolage Grotesque',sans-serif;font-weight:300;font-size:30px;line-height:1;color:var(--mut);}
.alvs-line{display:flex;align-items:center;gap:9px;font-family:'Satoshi',sans-serif;font-weight:500;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);}
.alvs-line img{height:18px;width:auto;}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;padding-top:6px;}
.teaser .lbl{font-family:'Satoshi',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:4px;}
.teaser .val{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:40px;letter-spacing:-.03em;color:var(--ink);}
.teaser .val small{font-size:18px;font-weight:500;}

/* =====================================================================
   INTRO
   ===================================================================== */
.big{font-size:clamp(34px,8vw,52px);margin:18px 0 0;}
/* destaque prismático (marca atrás da palavra) — só em poucos pontos de ênfase. Barra fina + glow suave do mesmo prisma */
.hl{position:relative;white-space:nowrap;}
.hl::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.08em;height:.30em;z-index:-1;
  background:var(--aurora);opacity:.95;border-radius:3px;}
.hl::before{content:"";position:absolute;left:-.12em;right:-.12em;bottom:-.02em;height:.62em;z-index:-2;
  background:var(--aurora);filter:blur(13px);opacity:.42;border-radius:7px;}

/* =====================================================================
   WORK CARDS (telas 3–4)
   ===================================================================== */
.work{display:none;border-radius:24px;padding:24px 22px 22px;
  flex-direction:column;min-height:472px;background:var(--surface);width:100%;}
.work-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:auto;}
.work-pick{display:flex;align-items:center;gap:10px;}
.work-pick .pick-lbl{font-family:'Satoshi',sans-serif;font-weight:600;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);transition:color .3s var(--ease);}
.work-card.sel .work-pick .pick-lbl{color:var(--red-text);}
.work-idx{font-family:'Bricolage Grotesque',sans-serif;font-weight:300;font-size:14px;color:var(--mut);letter-spacing:.02em;}
.work-tag{font-family:'Satoshi',sans-serif;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);border:1px solid var(--line-2);border-radius:100px;padding:4px 10px;white-space:nowrap;}
.work-tag.tag-on{border-color:var(--red);color:var(--red-text);}
.work h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:34px;line-height:.96;
  letter-spacing:-.03em;margin:18px 0 12px;color:var(--ink);}
.work .desc{font-size:13.5px;line-height:1.5;color:var(--ink-soft);max-width:34ch;}
.work .meta{margin-top:16px;display:flex;flex-direction:column;gap:8px;}
.work .meta .mrow{display:flex;align-items:flex-start;gap:9px;font-family:'Satoshi',sans-serif;font-size:11.5px;color:var(--ink-soft);letter-spacing:.01em;line-height:1.35;}
.work .meta .mrow::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--red);margin-top:6px;flex-shrink:0;}
.work-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px;}
.price{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:24px;letter-spacing:-.02em;color:var(--ink);}

/* toggle */
.toggle{width:52px;height:30px;border-radius:100px;background:#2a2a28;position:relative;flex-shrink:0;
  transition:background .35s var(--ease);}
.toggle::before{content:"";position:absolute;inset:0;border-radius:100px;background:var(--grad);opacity:0;transition:opacity .35s var(--ease);}
.toggle i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;z-index:2;
  box-shadow:0 2px 7px rgba(0,0,0,.5);transition:transform .4s var(--ease);}
.toggle.on::before{opacity:1;}
.toggle.on i{transform:translateX(22px);}
/* auto-ativação: flip mais lento e suave (ease-in-out) que o toggle manual */
.toggle.auto-on{transition-duration:.75s;}
.toggle.auto-on::before{transition-duration:.75s;}
.toggle.auto-on i{transition-duration:.85s;transition-timing-function:cubic-bezier(.4,0,.2,1);}

/* card de trabalho — borda em path-reveal (SVG) */
.work-card{position:relative;}
.wb{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible;}
.wb-rect{fill:none;stroke:#2e2e2c;stroke-width:2;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round;
  transition:stroke .8s cubic-bezier(.4,0,.2,1),stroke-width .8s cubic-bezier(.4,0,.2,1);} /* borda vermelha ativa com o MESMO ease do toggle */
.work-card.sel .wb-rect{stroke:var(--red-hot);stroke-width:2.4;}
.work-card > *:not(.wb){position:relative;z-index:2;}
/* glow prismático na borda dos cards (telas 3-5): some por padrão, acende ao selecionar (mesmo ease do toggle) + permanência sutil (rotação lenta, só na tela ativa). Mantém o desenho SVG da borda intacto */
.work-card::after{content:"";position:absolute;inset:-6px;z-index:-1;border-radius:30px;pointer-events:none;
  background:var(--prism-glow);filter:blur(14px);opacity:0;transition:opacity .8s cubic-bezier(.4,0,.2,1);}
.work-card.sel::after{opacity:.5;}
.screen.active .work-card.sel::after{animation:spin 8s linear infinite;}
@media (prefers-reduced-motion:reduce){.work-card.sel::after{animation:none;}}

/* =====================================================================
   REFERÊNCIAS / REELS
   ===================================================================== */
.ref-btns{margin-top:6px;display:flex;gap:10px;}
.ref-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:13px 16px;border-radius:100px;
  text-decoration:none;white-space:nowrap;
  font-family:'Satoshi',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.02em;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);}
.ref-btn .arr{font-weight:400;opacity:.75;}
.ref-btn:active{transform:scale(.97);}
.ref-btn-fill{background:var(--grad);color:#fff;box-shadow:0 10px 26px -14px rgba(255,31,20,.6);}
.ref-btn-fill:hover{transform:translateY(-2px);}
.ref-btn-line{border:1.5px solid var(--line-2);color:var(--ink);}
.ref-btn-line:hover{border-color:var(--red);color:var(--red-text);}
/* reels emoldurados: card escuro + label mono + frame branco arredondado (o branco do IG vira intencional) */
.ig-embeds{margin-top:22px;display:flex;flex-direction:column;gap:16px;}
.ig-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:12px;}
.ig-head{display:flex;align-items:center;gap:9px;padding:3px 4px 12px;
  font-family:'Satoshi',sans-serif;font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);}
.ig-head .dot{width:7px;height:7px;border-radius:50%;background:var(--red-hot);box-shadow:0 0 9px rgba(255,31,20,.85);flex-shrink:0;}
.ig-frame{border-radius:14px;overflow:hidden;background:#fff;}
.ig-frame .instagram-media{min-width:0!important;width:100%!important;max-width:100%!important;margin:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;}
.ig-frame blockquote a{display:inline-block;padding:26px 16px;font-family:'Satoshi',sans-serif;font-weight:700;font-size:13px;color:#3897f0;text-decoration:none;}

/* entregas dinâmicas (tela Entregas) */
.deliver{margin-top:20px;display:flex;flex-direction:column;gap:10px;}
.deliver-row{display:flex;align-items:center;gap:18px;padding:16px 18px;border-radius:16px;position:relative;
  background:var(--surface);border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
/* hover: cresce um tico + glow prismático AO REDOR (box-shadow) — NÃO tinge o retângulo */
.deliver-row:hover{transform:scale(1.03)!important;
  box-shadow:0 6px 30px -8px rgba(255,31,20,.42),0 9px 46px -12px rgba(63,160,230,.24),0 0 20px -4px rgba(255,122,30,.32);}
.deliver-row .dn{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:32px;letter-spacing:-.04em;
  line-height:1;min-width:46px;text-align:center;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.deliver-row .dt{display:flex;flex-direction:column;gap:3px;}
.deliver-row .dt .dl{font-family:'Satoshi',sans-serif;font-weight:700;font-size:14px;color:var(--ink);}
.deliver-row .dt .ds{font-size:11px;color:var(--mut);}

/* =====================================================================
   SUMMARY / TOTAL (tela 7)
   ===================================================================== */
.sum-card{padding:16px 18px;border-radius:22px;}
.sum-line{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);}
.sum-line:last-of-type{border-bottom:none;}
.sum-line .sl{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.sum-line .nm{font-family:'Satoshi',sans-serif;font-weight:600;font-size:14px;color:var(--ink);}
.sum-line .sub{font-size:11px;color:var(--mut);}
.sum-line.off{opacity:.34;}
.sum-line .amt{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:17px;white-space:nowrap;color:var(--ink);}
.total-block{margin-top:14px;padding:22px;border-radius:22px;
  box-shadow:0 24px 60px -30px rgba(255,31,20,.45);}
.total-block .tlbl{font-family:'Satoshi',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);}
.total-block .tbig{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.04em;
  font-size:clamp(46px,13.5vw,68px);line-height:.92;color:var(--ink);margin-top:8px;}
.total-block .tbig small{font-size:.4em;font-weight:500;vertical-align:baseline;}
.total-block .tnote{font-size:12px;color:var(--mut);margin-top:10px;line-height:1.4;}
.total-block .tnote .em{color:var(--red-text);}
.total-block .tcut{font-family:'Bricolage Grotesque',sans-serif;font-weight:300;font-size:19px;color:var(--mut);
  text-decoration:line-through;margin-top:6px;}
.total-block .tcut.hide{display:none;}
.sum-line.disc{border:none;margin-top:8px;border-radius:14px;padding:13px 14px;
  background:linear-gradient(120deg,rgba(173,41,38,.20),rgba(255,31,20,.10));}
.sum-line.disc.hide{display:none;}
.sum-line.disc .nm{font-weight:700;color:var(--ink);}
.sum-line.disc .sub{color:var(--ink-soft);}
.sum-line.disc .amt{font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* =====================================================================
   CONDIÇÕES (tela 8) — spec list (label mono + valor)
   ===================================================================== */
.spec{margin-top:22px;border-top:1px solid var(--line);}
.spec-row{display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:15px 2px;border-bottom:1px solid var(--line);}
.spec-row .k{font-family:'Satoshi',sans-serif;font-weight:600;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut);flex-shrink:0;}
.spec-row .v{font-family:'Satoshi',sans-serif;font-weight:500;font-size:13.5px;color:var(--ink-soft);
  text-align:right;line-height:1.45;}
.spec-row .v b{color:var(--ink);font-weight:700;}

/* =====================================================================
   CTA (tela 9)
   ===================================================================== */
.cta-h{font-size:clamp(40px,11vw,64px);margin:16px 0 8px;}
.wa-btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:19px 38px;border-radius:100px;text-decoration:none;
  background:linear-gradient(135deg,#29E66B 0%,#13A05B 100%);color:#fff;font-family:'Satoshi',sans-serif;font-weight:700;font-size:16px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);box-shadow:0 14px 42px -14px rgba(37,211,102,.6);}
.wa-btn:hover{transform:translateY(-3px);box-shadow:0 22px 54px -16px rgba(37,211,102,.78);}
.wa-btn svg{width:22px;height:22px;}
.wa-btn .arr{font-weight:400;opacity:.82;margin-left:-1px;}

/* =====================================================================
   CONDIÇÕES (accordion discreto)
   ===================================================================== */
.acc{border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 2px;text-align:left;}
.acc-head .at{font-family:'Satoshi',sans-serif;font-weight:500;font-size:13px;color:var(--ink-soft);letter-spacing:.01em;}
.acc-head .ai{width:16px;height:16px;position:relative;flex-shrink:0;}
.acc-head .ai::before,.acc-head .ai::after{content:"";position:absolute;background:var(--mut);transition:transform .35s var(--ease);}
.acc-head .ai::before{top:7px;left:0;width:16px;height:1.5px;}
.acc-head .ai::after{top:0;left:7px;width:1.5px;height:16px;}
.acc-item.open .ai::after{transform:scaleY(0);}
.acc-body{max-height:0;overflow:hidden;transition:max-height .45s var(--ease);}
.acc-body .inner{padding:0 2px 18px;font-size:12.5px;line-height:1.65;color:var(--mut);}
.acc-body .inner strong{color:var(--ink-soft);font-weight:600;}
.acc-cap{display:block;}
.cta-foot{display:flex;gap:20px;justify-content:center;margin-top:30px;}
.cta-foot a{font-family:'Satoshi',sans-serif;font-weight:500;font-size:13px;color:var(--ink-soft);
  text-decoration:none;letter-spacing:.02em;transition:color .3s var(--ease);}
.cta-foot a:hover{color:var(--red-text);}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;}
  .gb,.gb-dark,.gb-2{animation:none!important;}
}

/* =====================================================================
   DECK · telas navegadas por Voltar / Prosseguir
   ===================================================================== */
html,body{height:100%;overflow:hidden;}

.deck-progress{position:fixed;top:0;left:0;right:0;height:3px;background:rgba(239,237,230,.08);z-index:60;}
/* barra de progresso = feixe prismático REVELADO (bg fixo na largura da tela; a largura cresce e revela o prisma, sem esticar/escalar a cor) */
.deck-progress i{display:block;height:100%;width:11%;border-radius:0 3px 3px 0;transition:width .55s var(--ease);
  background:var(--aurora);background-size:100vw 100%;background-position:left center;background-repeat:no-repeat;}
.deck-count{position:fixed;top:13px;right:16px;z-index:60;font-family:'Satoshi',sans-serif;font-weight:500;font-size:10px;letter-spacing:.16em;color:var(--mut);}
/* barra fosca translúcida no topo */
.deck-topbar{position:fixed;top:0;left:0;right:0;height:46px;z-index:55;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,10,10,.66),rgba(10,10,10,.32) 72%,rgba(10,10,10,0));
  backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent);mask-image:linear-gradient(to bottom,#000 62%,transparent);}
/* label da etapa (esquerda) */
.deck-step{position:fixed;top:13px;left:16px;z-index:60;width:180px;height:14px;overflow:hidden;
  font-family:'Satoshi',sans-serif;font-weight:500;font-size:10px;letter-spacing:.16em;color:var(--mut);}
.deck-step .ds-cur{position:absolute;left:0;top:0;white-space:nowrap;
  transition:transform .42s var(--ease),opacity .42s var(--ease);}

.deck{position:fixed;top:0;left:0;right:0;bottom:calc(86px + env(safe-area-inset-bottom));overflow:hidden;z-index:2;}
.screen{position:absolute;inset:0;padding:0;overflow-y:auto;overflow-x:hidden;opacity:0;visibility:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.screen::-webkit-scrollbar{display:none;}
.screen.active{opacity:1;visibility:visible;}
.screen-inner{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start;
  max-width:560px;margin:0 auto;padding:44px 20px 104px;}
.screen-vc .screen-inner{justify-content:safe center;padding-top:64px;}

.screen-kick{font-family:'Satoshi',sans-serif;font-weight:500;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mut);margin-bottom:16px;}
.hint-next{margin-top:34px;font-family:'Satoshi',sans-serif;font-size:12px;letter-spacing:.03em;color:var(--mut);}
.hint-next b{color:var(--ink);}

/* work é o card principal da tela (sempre visível no deck) */
.screen .work{display:flex;width:100%;min-height:auto;}
.screen .hero-frame{padding:30px 22px 26px;}
.screen .hero-h .l{display:block;overflow:hidden;}

/* NAV */
.deck-nav{position:fixed;left:0;right:0;bottom:0;min-height:86px;z-index:50;display:flex;align-items:center;
  background:rgba(10,10,10,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);}
.deck-nav .nav-inner{max-width:560px;margin:0 auto;width:100%;display:flex;align-items:center;gap:10px;padding:14px 16px;}
/* NAV buttons: encolhe/revela só nas bordas, transição suave */
.deck-nav .wbtn{flex:1 1 0;min-width:0;padding:15px 12px;font-size:13.5px;margin:0;
  font-family:'Satoshi',sans-serif;font-weight:700;letter-spacing:.02em;text-align:center;border-radius:100px;
  overflow:hidden;white-space:nowrap;
  transition:flex-grow .5s var(--ease),opacity .42s var(--ease),margin .5s var(--ease),
    padding .5s var(--ease),transform .28s var(--ease),box-shadow .28s var(--ease),background .28s var(--ease);}
.deck-nav .wbtn span{display:block;}
.deck-nav .wbtn-next{color:#fff;border:1.5px solid transparent;background:var(--grad);
  background-clip:padding-box;-webkit-background-clip:padding-box;
  box-shadow:0 10px 26px -12px rgba(255,31,20,.6);}
.deck-nav .wbtn-back{background:transparent;border:1.5px solid var(--line-2);color:var(--ink);}
.deck-nav .wbtn.is-collapsed{flex-grow:0;opacity:0;pointer-events:none;padding-left:0;padding-right:0;}
.deck-nav .wbtn-back.is-collapsed{margin-right:-10px;}
.deck-nav .wbtn-next.is-collapsed{margin-left:-10px;}
.deck-nav .wbtn.noanim{transition:none;}
.deck-nav .wbtn-back:hover{background:var(--ink);color:var(--bg);transform:translateY(-2px);}
.deck-nav .wbtn-next:hover{transform:translateY(-2px);filter:saturate(1.12) brightness(1.05);}

/* =====================================================================
   LIQUID GLASS (iOS 26) — Voltar e @by.alvs
   ===================================================================== */
.deck-nav .wbtn-back, .ref-btn-line{
  position:relative;overflow:hidden;color:var(--ink);border:1px solid rgba(239,237,230,.16);
  background:rgba(239,237,230,.07);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 2px rgba(0,0,0,.35),0 4px 18px -6px rgba(0,0,0,.5);}
.deck-nav .wbtn-back::after, .ref-btn-line::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(158deg,rgba(255,255,255,.20),rgba(255,255,255,0) 44%);}
.deck-nav .wbtn-back:hover, .ref-btn-line:hover{transform:translateY(-1px);color:var(--ink);
  background:rgba(239,237,230,.12);border-color:rgba(239,237,230,.30);}
.ref-btn-line .ig-ico{width:15px;height:15px;flex-shrink:0;}
.deck-nav .wbtn:active{transform:scale(.97);}

/* balão flutuante do valor + logo (by alvs) */
.value-balloon{position:fixed;bottom:calc(100px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) scaleX(1);transform-origin:center;z-index:46;
  display:none;align-items:center;gap:11px;padding:9px 17px;border-radius:100px;overflow:hidden;white-space:nowrap;
  background:rgba(20,20,20,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);box-shadow:0 14px 34px -14px rgba(0,0,0,.7);max-width:calc(100vw - 60px);}
/* glow prismático do balão = feature de HOVER: some por padrão (opacity 0), acende ao passar o mouse no balão (.hot via JS) e espalha um tico. Atrás do pill → halo, não tinge o interior */
/* sem halo base ("glow de traz" removido) — só os efeitos do componente: highlight da borda + orbe, ambos CONTIDOS no balão */
.vb-glow{position:fixed;bottom:calc(98px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);transform-origin:center;z-index:45;
  width:226px;height:46px;border-radius:100px;pointer-events:none;display:none;opacity:1;}
/* highlight prismático viajando pela borda (= .glow-content:before do componente, recolorido) */
.vb-glow::before{content:"";position:absolute;inset:-1px;border-radius:100px;
  background:radial-gradient(38% 78% at calc(var(--bgx)*1%) calc(var(--bgy)*1%),
    rgba(255,175,105,.95),rgba(255,31,20,.6) 42%,transparent 70%);
  filter:blur(6px);animation:vbOrbit 4.2s linear infinite;}
@keyframes vbOrbit{0%{--bgx:6;--bgy:16}25%{--bgx:94;--bgy:16}50%{--bgx:94;--bgy:84}75%{--bgx:6;--bgy:84}100%{--bgx:6;--bgy:16}}
/* orbe de glow prismático orbitando atrás (= .glow/.glow:after do componente) — blob fixo (sem scaleX no blur) + órbita curta, contido */
.vb-glow .glow{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;
  transform-origin:center;transform:rotateZ(calc(var(--rotate)*1deg));animation:vbRotate 4s linear infinite;}
.vb-glow .glow::after{content:"";display:block;position:absolute;width:132px;height:50px;left:-46px;top:-5px;border-radius:50%;
  background:var(--aurora);filter:blur(15px);opacity:.72;transform:translateY(calc(var(--gty)*1%));}
@keyframes vbRotate{from{--rotate:-70}to{--rotate:290}}
@media (prefers-reduced-motion:reduce){.vb-glow::before,.vb-glow .glow{animation:none;}}
.value-balloon .vb-logo{display:flex;align-items:center;gap:5px;flex-shrink:0;}
.value-balloon .vb-logo .vb-by{font-family:'Satoshi',sans-serif;font-weight:500;font-size:9px;color:var(--mut);letter-spacing:.04em;}
.value-balloon .vb-logo img{height:15px;width:auto;}
.value-balloon .vb-sep{width:1px;height:17px;background:rgba(239,237,230,.16);flex-shrink:0;}
.value-balloon .vb-val{display:flex;flex-direction:column;line-height:1.05;min-width:0;max-width:54vw;}
.value-balloon .vb-lbl{font-family:'Satoshi',sans-serif;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.value-balloon .vb-tot{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15px;color:var(--ink);letter-spacing:-.01em;}

@media (prefers-reduced-motion:reduce){
  .deck-progress i{transition:none;}
}

/* =====================================================================
   SPLASH de abertura (lottie "made by alvs" → degradê pro site)
   ===================================================================== */
#splash{position:fixed;inset:0;z-index:9999;background:#07070a;display:grid;place-items:center;
  overflow:hidden;transition:opacity 1.5s var(--ease),filter 1.5s var(--ease);}
#splash.fade{opacity:0;filter:brightness(2.3) saturate(.45);}
#splash.gone{display:none;}
#splash-wave{position:absolute;inset:0;width:100%;height:100%;z-index:0;}   /* fundo de ondas (mesma animação, recolorida pro prisma no JS) */
#splash-logo{position:relative;z-index:1;width:min(52vw,230px);aspect-ratio:1;}
#splash-logo svg,#splash-logo canvas{width:100%!important;height:100%!important;display:block;}