/* ============================================================
   PWA — banner "Instalar app" + página de instalação no iPhone
   (mesmo idioma liquid glass do resto do site)
   ============================================================ */

/* ---- Banner flutuante (Android: instala; iOS: leva pra /instalar/) ---- */
.nvx-pwa{position:fixed;left:12px;right:12px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:300;
  display:flex;align-items:center;gap:12px;padding:11px 11px 11px 13px;border-radius:18px;
  background:linear-gradient(160deg,rgba(42,38,58,.72),rgba(14,14,20,.82));
  backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 48px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1);
  transform:translateY(160%);opacity:0;transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .3s}
.nvx-pwa.show{transform:none;opacity:1}
.nvx-pwa__ic{width:46px;height:46px;border-radius:12px;flex:0 0 auto;box-shadow:0 5px 14px rgba(0,0,0,.45)}
.nvx-pwa__tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.nvx-pwa__tx b{font-size:14.5px;font-weight:800;color:#fff}
.nvx-pwa__tx span{font-size:11.5px;color:#c7c7d2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nvx-pwa__btn{flex:0 0 auto;background:linear-gradient(135deg,#ff2d6b,#ff5e8a);color:#fff;font-weight:800;font-size:13px;
  border:0;border-radius:12px;padding:0 15px;min-height:42px;box-shadow:0 6px 18px rgba(255,45,107,.4)}
.nvx-pwa__x{flex:0 0 auto;background:rgba(255,255,255,.1);color:#fff;border:0;width:30px;height:30px;border-radius:50%;
  font-size:19px;line-height:1;display:grid;place-items:center}
.nvx-pwa__x:active{background:rgba(255,255,255,.18)}
/* só faz sentido no mobile; some no desktop */
@media(min-width:821px){.nvx-pwa{display:none!important}}

/* ============================================================
   Página /instalar/ (guia iPhone) — iPhone ANIMADO (tipo vídeo) + passos limpos
   ============================================================ */
.nvx-inst{padding-top:calc(var(--hd) + 32px);padding-bottom:70px}
.nvx-inst__hero{text-align:center;margin-bottom:24px}
.nvx-inst__icon{width:78px;height:78px;border-radius:19px;margin:0 auto 15px;box-shadow:0 14px 40px rgba(255,45,107,.35)}
.nvx-inst__hero h1{font-size:clamp(23px,5.4vw,33px);font-weight:900;line-height:1.14;letter-spacing:-.5px}
.nvx-inst__hero h1 span{background:linear-gradient(135deg,#ff2d6b,#ff5e8a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nvx-inst__hero p{color:#c9c9d4;font-size:15px;max-width:46ch;margin:11px auto 0}
.nvx-inst__note{display:flex;gap:9px;align-items:flex-start;text-align:left;max-width:520px;margin:16px auto 0;
  padding:11px 14px;border-radius:14px;font-size:12.5px;color:#ffe0b0;line-height:1.45;
  background:linear-gradient(160deg,rgba(255,190,90,.12),rgba(255,190,90,.04));border:1px solid rgba(255,190,90,.28)}
.nvx-inst__note b{color:#fff}

/* layout: telefone (sticky no PC) + passos ao lado */
.nvx-inst__grid{display:grid;grid-template-columns:272px 1fr;gap:38px;align-items:start;max-width:770px;margin:30px auto 0}
@media(max-width:760px){.nvx-inst__grid{grid-template-columns:1fr;gap:28px;justify-items:center}}

/* ---------- iPhone mockup ---------- */
.nvx-inst__demo{position:sticky;top:calc(var(--hd) + 20px)}
@media(max-width:760px){.nvx-inst__demo{position:static}}
.ipx{position:relative;width:250px;height:512px;border-radius:46px;padding:11px;
  background:linear-gradient(155deg,#3c3c48,#111116 62%);
  box-shadow:0 34px 82px rgba(0,0,0,.62),inset 0 0 0 2px rgba(255,255,255,.07),0 0 0 1px #000}
.ipx__scr{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#0a0a0f}
.ipx__notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:88px;height:24px;border-radius:0 0 15px 15px;background:#0a0a0f;z-index:30}
.ipx__bar{position:absolute;top:0;left:0;right:0;height:34px;z-index:26;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:11px;font-weight:800;color:#fff}
.ipx-sc{position:absolute;inset:0;opacity:0;animation:ipxFade 13s infinite}
.ipx-s1{animation-delay:0s}.ipx-s2{animation-delay:3.25s}.ipx-s3{animation-delay:6.5s}.ipx-s4{animation-delay:9.75s}
@keyframes ipxFade{0%,26%,100%{opacity:0}3%{opacity:1}23%{opacity:1}}
.ipx-cap{position:absolute;left:10px;right:10px;bottom:12px;z-index:28;text-align:center;
  font-size:12.5px;font-weight:800;color:#fff;padding:9px 8px;border-radius:13px;
  background:linear-gradient(160deg,rgba(255,45,107,.92),rgba(200,20,90,.82));box-shadow:0 8px 22px rgba(255,45,107,.42)}

/* cena 1 — Safari */
.ipx-web{position:absolute;inset:0;background:#0c0c12;padding:42px 14px 0}
.ipx-web__logo{font-weight:900;font-size:13.5px;color:#fff}.ipx-web__logo b{color:#ff5e8a}
.ipx-web__hero{height:96px;border-radius:12px;margin:10px 0;background:linear-gradient(120deg,#31183a,#421e4a)}
.ipx-web__row{display:flex;gap:8px;margin-bottom:8px}
.ipx-web__row i{flex:1;height:54px;border-radius:9px;background:linear-gradient(160deg,#21212b,#16161e)}
.ipx-safaribar{position:absolute;left:0;right:0;bottom:0;height:50px;background:rgba(24,24,30,.97);
  display:flex;align-items:center;justify-content:space-around;border-top:1px solid rgba(255,255,255,.08)}
.ipx-safaribar svg{width:21px;height:21px;color:#8b8b98}
.ipx-share{position:relative;color:#ff5e8a!important}
.ipx-tap{position:absolute;left:50%;top:50%;width:36px;height:36px;border-radius:50%;border:2px solid #ff8fb0;
  transform:translate(-50%,-50%);opacity:0;animation:ipxTap 1.5s infinite}
@keyframes ipxTap{0%{opacity:.9;transform:translate(-50%,-50%) scale(.4)}75%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}100%{opacity:0}}

/* cena 2 — share sheet */
.ipx-dim{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.ipx-sheet{position:absolute;left:8px;right:8px;bottom:8px;border-radius:20px;overflow:hidden;background:rgba(40,40,48,.99)}
.ipx-sheet__apps{display:flex;gap:11px;padding:14px 14px 8px}
.ipx-sheet__apps i{width:38px;height:38px;border-radius:11px;background:#4c4c58}
.ipx-row{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;color:#e6e6ee;font-size:13.5px;font-weight:600;border-top:1px solid rgba(255,255,255,.07)}
.ipx-row .ib{width:26px;height:26px;border-radius:7px;border:1.7px solid currentColor;display:grid;place-items:center;flex:0 0 auto}
.ipx-row .ib svg{width:14px;height:14px}
.ipx-row.hl{background:rgba(255,45,107,.22);color:#fff;position:relative}
.ipx-tapdot{position:absolute;right:14px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:rgba(255,255,255,.4);animation:ipxPulse 1.4s infinite}
@keyframes ipxPulse{0%,100%{transform:scale(.55);opacity:.15}50%{transform:scale(1.05);opacity:.65}}

/* cena 3 — confirmar */
.ipx-top{position:absolute;top:34px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:11px 15px;font-size:13px;color:#9a9aa6;border-bottom:1px solid rgba(255,255,255,.08);background:#131319}
.ipx-top .add{position:relative;color:#ff5e8a;font-weight:800}
.ipx-top .add .ipx-tapdot{right:auto;left:-8px;top:-7px;margin:0;inset:-7px -9px;width:auto;height:auto;border-radius:9px}
.ipx-preview{display:flex;align-items:center;gap:12px;padding:86px 16px 0}
.ipx-preview img{width:50px;height:50px;border-radius:12px;box-shadow:0 6px 14px rgba(255,45,107,.4)}
.ipx-preview b{color:#fff;font-size:15px;display:block}.ipx-preview span{color:#8b8b98;font-size:12px}

/* cena 4 — home screen */
.ipx-home{position:absolute;inset:0;background:radial-gradient(120% 85% at 50% 0%,#2e1436,#0a0a12)}
.ipx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 13px;padding:56px 18px 0}
.ipx-grid i{aspect-ratio:1;border-radius:13px;background:rgba(255,255,255,.09)}
.ipx-grid .app{background:none;display:flex;align-items:center;justify-content:center;animation:ipxPop 1.7s cubic-bezier(.2,.8,.3,1.5) infinite}
.ipx-grid .app img{width:100%;border-radius:13px;box-shadow:0 8px 18px rgba(255,45,107,.55)}
@keyframes ipxPop{0%{transform:scale(0);opacity:0}30%{transform:scale(1.14);opacity:1}45%{transform:scale(1)}100%{transform:scale(1);opacity:1}}

/* ---------- passos (texto limpo, respirando) ---------- */
.nvx-inst__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;width:100%;max-width:440px}
.nvx-inst__steps li{display:flex;align-items:flex-start;gap:15px;padding:17px 18px}
.nvx-inst__num{flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  font-weight:900;font-size:16px;color:#fff;background:linear-gradient(135deg,#ff2d6b,#ff5e8a);box-shadow:0 6px 16px rgba(255,45,107,.4)}
.nvx-inst__c{flex:1;min-width:0}
.nvx-inst__c b{display:block;font-size:15.5px;font-weight:800;color:#fff;margin-bottom:5px}
.nvx-inst__c p{font-size:13.5px;color:#c2c2ce;line-height:1.55;margin:0}
.nvx-inst__c em{color:#ff8fb0;font-style:normal;font-weight:700}

.nvx-inst__done{text-align:center;margin:38px auto 0;max-width:560px}
.nvx-inst__done .btn{margin-top:14px}

@media(prefers-reduced-motion:reduce){
  .ipx-sc{animation:none;opacity:0}.ipx-s1{opacity:1}
  .ipx-tap,.ipx-tapdot,.ipx-grid .app{animation:none}
}