/* ===== mini filme: telas do celular mais reais ===== */
.cel-tela{font-family:-apple-system,"SF Pro Text",var(--corpo),system-ui,sans-serif}

/* barra de status do celular */
.cel-status{position:absolute;z-index:6;top:0;left:0;right:0;height:9%;display:flex;align-items:center;justify-content:space-between;padding:0 11%;font:700 clamp(6px,.75vw,9px)/1 var(--corpo);color:#fff;pointer-events:none;transition:color .3s}
.cel-status i{width:16%;height:32%;border:1.5px solid currentColor;border-radius:3px;position:relative}
.cel-status i::after{content:"";position:absolute;inset:1.5px;right:30%;background:currentColor;border-radius:1px}
.filme[data-passo="2"] .cel-status,.filme[data-passo="3"] .cel-status{color:#14182b}

/* 0 · tela de bloqueio */
.cena-inicio{justify-content:flex-start;padding:20% 6% 0;background:linear-gradient(180deg,rgba(16,32,96,.35),rgba(16,32,96,.75)),url('/img/3i3xy8z782njgju1t01jta9p') center/cover;color:#fff}
.cena-inicio small{font:600 clamp(6px,.8vw,9px)/1 var(--corpo);opacity:.9}
.cena-inicio span{font:300 clamp(28px,4.6vw,52px)/1 -apple-system,"Helvetica Neue",var(--corpo),sans-serif;letter-spacing:-.02em;margin-top:2%}
.notif{position:absolute;left:5%;right:5%;top:33%;display:flex;gap:7%;align-items:center;text-align:left;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);color:#14182b;border-radius:14px;padding:6% 6%;box-shadow:0 8px 20px rgba(0,0,0,.25);opacity:0;transform:translateY(-140%);transition:transform .55s cubic-bezier(.2,.9,.3,1.2),opacity .3s}
.notif-ico{flex:0 0 22%;aspect-ratio:1;border-radius:24%;display:grid;place-items:center;background:var(--marinho);color:#fff;font:900 clamp(4px,.55vw,7px)/1 var(--corpo);letter-spacing:-.04em;white-space:nowrap}
.notif-ico em{font-style:normal;color:var(--laranja)}
.notif strong{display:block;font:800 clamp(6px,.75vw,9px)/1.2 var(--corpo)}
.notif p{margin:2px 0 0;font:600 clamp(6px,.72vw,9px)/1.25 var(--corpo);color:#3c4058}
.filme[data-modo="nfc"][data-passo="1"] .notif{opacity:1;transform:none;transition-delay:.9s}

/* 1 (QR) · câmera de verdade */
.cena-camera{padding:0;background:#000}
.cam-fundo{position:absolute;inset:-10%;background:url('/img/3i3xy8z782njgju1t01jta9p') 50% 75%/280% auto no-repeat;filter:blur(2px) brightness(.75) saturate(1.1);transform:scale(1.05);animation:mao 3s ease-in-out infinite}
@keyframes mao{50%{transform:scale(1.08) translate(1.5%,-1%)}}
.cam-tag{position:absolute;left:50%;top:44%;width:58%;aspect-ratio:3/4;transform:translate(-50%,-50%) rotate(-5deg);background:#B1D4E7;border-radius:10px;border:3px solid rgba(255,255,255,.85);box-shadow:0 10px 26px rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;color:#1c2230;animation:maoTag 3s ease-in-out infinite}
@keyframes maoTag{0%,100%{transform:translate(-50%,-50%) rotate(-5deg)}50%{transform:translate(-49%,-51.5%) rotate(-3.5deg) scale(1.02)}}
.cam-tag b{font:900 clamp(7px,1.1vw,12px)/1 var(--corpo)}
.cam-tag small{font:900 clamp(5px,.75vw,8px)/1 var(--corpo);letter-spacing:.08em}
.cam-qr{width:66%;background:#fff;padding:4px;border-radius:3px;image-rendering:pixelated}
.cam-mira{position:absolute;left:50%;top:43%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%)}
.cam-mira i{position:absolute;width:24%;height:24%;border:3px solid #ffd60a}
.cam-mira i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.cam-mira i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.cam-mira i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 8px}
.cam-mira i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 8px 0}
.cam-linha{position:absolute;left:6%;right:6%;top:10%;height:2px;background:#ffd60a;box-shadow:0 0 8px #ffd60a;animation:varre 1.3s ease-in-out infinite alternate}
@keyframes varre{to{top:88%}}
.filme[data-modo="qr"][data-passo="1"] .cam-mira{animation:trava .35s ease 1.2s forwards}
@keyframes trava{to{transform:translate(-50%,-50%) scale(.86)}}
.cam-link{position:absolute;left:50%;bottom:22%;transform:translate(-50%,30%) scale(.9);display:flex;align-items:center;gap:6px;white-space:nowrap;background:#ffd60a;color:#14182b;border-radius:999px;padding:5% 7%;font:700 clamp(6px,.8vw,9px)/1 var(--corpo);box-shadow:0 6px 16px rgba(0,0,0,.35);opacity:0;transition:opacity .3s,transform .4s cubic-bezier(.2,.9,.3,1.3)}
.cam-link b{background:#14182b;color:#ffd60a;border-radius:4px;padding:1px 3px;font-size:.85em}
.filme[data-modo="qr"][data-passo="1"] .cam-link{opacity:1;transform:translate(-50%,0) scale(1);transition-delay:1.3s}
.cam-botoes{position:absolute;left:0;right:0;bottom:0;height:16%;display:flex;align-items:center;justify-content:center;gap:12%;background:rgba(0,0,0,.55);color:#fff;font:700 clamp(5px,.65vw,8px)/1 var(--corpo);letter-spacing:.06em}
.cam-botoes span:first-child{color:#ffd60a}
.cam-botoes i{width:20%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #000,0 0 0 5px #fff}

/* 2 · navegador abrindo o link */
.cena-abrindo{justify-content:flex-start;padding:10% 0 0;background:#fff}
.nav-barra{position:relative;margin:0 5%;background:#eef0f4;border-radius:9px;padding:6% 5%;font:600 clamp(6px,.72vw,9px)/1 var(--corpo);color:#3c4058;text-align:center;overflow:hidden;align-self:stretch}
.nav-progresso{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--azul)}
.filme[data-passo="2"] .nav-progresso{animation:progresso 1.1s ease-out forwards}
@keyframes progresso{60%{width:70%}to{width:100%}}
.nav-esqueleto{align-self:stretch;display:grid;justify-items:center;gap:6%;padding:12% 10% 0}
.nav-esqueleto i{display:block;width:70%;height:10px;border-radius:6px;background:linear-gradient(90deg,#eef0f4 0%,#f8f9fb 50%,#eef0f4 100%) 0 0/200% 100%;animation:brilho 1s linear infinite}
.nav-esqueleto i.redondo{width:46%;aspect-ratio:1;height:auto;border-radius:50%}
.nav-esqueleto i.curto{width:45%}
.nav-esqueleto i.botao{width:100%;height:24px;border-radius:10px}
@keyframes brilho{to{background-position:-200% 0}}

/* 3 · a página de verdade da Maggie, em miniatura */
.cena-perfil{justify-content:flex-start;padding:10% 0 0;background:#fff}
.nav-barra.fixa{flex:0 0 auto}
.mini-pagina{position:relative;flex:1;align-self:stretch;margin-top:3%;overflow:hidden}
.mini-pagina iframe{position:absolute;left:0;top:0;width:390px;border:0;transform-origin:0 0;transform:scale(var(--mini-escala,.4));pointer-events:none;background:#fff}

/* dedo tocando o WhatsApp (posição medida na página de verdade) */
.filme-dedo{position:absolute;z-index:7;left:50%;top:var(--dedo-y,74%);width:16%;aspect-ratio:1;margin:-8% 0 0 -8%;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 4px 12px rgba(0,0,0,.25);opacity:0;transform:scale(1.4);transition:opacity .3s,transform .3s;pointer-events:none}
.filme[data-passo="3"] .filme-dedo{opacity:1;transform:scale(1);transition-delay:1.2s}
.filme[data-passo="3"] .filme-dedo::after{content:"";position:absolute;inset:-30%;border-radius:50%;border:2px solid rgba(255,255,255,.9);opacity:0;animation:toque .6s ease-out 1.6s 1}
@keyframes toque{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(1.3)}}

/* 4 · WhatsApp com a cara do app */
.zap-topo{display:flex;align-items:center;gap:8%;background:#075e54}
.zap-topo::before{content:"";flex:0 0 18%;aspect-ratio:1;border-radius:50%;background:url('/img/3i3xy8z782njgju1t01jta9p') center/cover;border:1.5px solid rgba(255,255,255,.7)}
.cena-zap{background:#efe7dd}