/* ===== mini filme: veja funcionando ===== */
.secao.filme{background:var(--papel)}
.filme-modos{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 18px}
.filme-modo{border:2px solid var(--marinho);background:transparent;color:var(--marinho);border-radius:999px;padding:11px 18px;font:800 14px var(--corpo);cursor:pointer;text-transform:uppercase;letter-spacing:.02em}
.filme-modo.ativo{background:var(--marinho);color:#fff}
.filme{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:34px;align-items:center}
.filme-palco{position:relative;aspect-ratio:16/11;border-radius:34px;overflow:hidden;background:radial-gradient(80% 70% at 30% 40%,#ffe2c7,#fff4e8 60%),var(--creme);box-shadow:0 30px 70px rgba(16,32,96,.14)}

/* pet com a coleira e a tag */
.filme-pet{position:absolute;left:7%;top:12%;width:42%;aspect-ratio:1}
.filme-foto{width:100%;height:100%;object-fit:cover;border-radius:50%;border:6px solid #fff;box-shadow:0 18px 40px rgba(16,32,96,.18)}
.filme-coleira{position:absolute;left:30%;right:30%;bottom:16%;height:7%;border-radius:20px;background:var(--laranja);box-shadow:0 3px 0 rgba(0,0,0,.12)}
.filme-tag{position:absolute;left:50%;bottom:-6%;width:26%;aspect-ratio:3/4;transform:translateX(-50%) rotate(-6deg);perspective:500px;animation:balancaTag 2.4s ease-in-out infinite;transform-origin:50% 0}
@keyframes balancaTag{50%{transform:translateX(-50%) rotate(5deg)}}
.tag-frente,.tag-verso{position:absolute;inset:0;border-radius:10px;border:3px solid rgba(255,255,255,.9);box-shadow:0 8px 18px rgba(16,32,96,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;color:#1c2230;backface-visibility:hidden;transition:transform .8s cubic-bezier(.3,.7,.2,1);background:#B1D4E7}
.tag-verso{transform:rotateY(180deg)}
.filme[data-modo="qr"] .tag-frente{transform:rotateY(-180deg)}
.filme[data-modo="qr"] .tag-verso{transform:none}
.tag-frente b,.tag-verso b{font:900 clamp(8px,1.4vw,13px)/1 var(--corpo)}
.tag-frente small,.tag-verso small{font:800 clamp(5px,.75vw,7px)/1 var(--corpo);letter-spacing:.04em}
.tag-frente em{font:900 clamp(8px,1.2vw,11px)/1 var(--corpo);font-style:normal;color:var(--marinho);letter-spacing:-.04em}
.tag-frente em span{color:var(--laranja)}
.tag-pata{width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 62%,#fff 30%,transparent 31%),radial-gradient(circle at 26% 30%,#fff 11%,transparent 12%),radial-gradient(circle at 50% 22%,#fff 11%,transparent 12%),radial-gradient(circle at 74% 30%,#fff 11%,transparent 12%),var(--laranja);margin:3px 0}
.tag-qr{width:58%;background:#fff;padding:3px;border-radius:3px;image-rendering:pixelated}

/* ondas do NFC */
.filme-ondas{position:absolute;left:44%;top:56%;width:14%;aspect-ratio:1;opacity:0;transition:opacity .3s}
.filme-ondas i{position:absolute;inset:0;border:3px solid var(--azul);border-radius:50%;opacity:0}
.filme[data-modo="nfc"][data-passo="1"] .filme-ondas{opacity:1}
.filme[data-modo="nfc"][data-passo="1"] .filme-ondas i{animation:onda 1.2s ease-out infinite}
.filme-ondas i:nth-child(2){animation-delay:.3s!important}
.filme-ondas i:nth-child(3){animation-delay:.6s!important}
@keyframes onda{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.6);opacity:0}}

/* o celular */
.filme-cel{position:absolute;width:27%;aspect-ratio:9/18.5;right:9%;top:9%;border-radius:26px;background:#161a2e;padding:7px;box-shadow:0 26px 50px rgba(16,32,96,.35);transition:transform 1s cubic-bezier(.3,.7,.2,1)}
.filme[data-passo="1"] .filme-cel{transform:translate(-62%,22%) rotate(-12deg)}
.filme[data-modo="qr"][data-passo="1"] .filme-cel{transform:translate(-58%,10%) rotate(-4deg)}
.cel-ilha{position:absolute;top:11px;left:50%;width:30%;height:4%;border-radius:20px;background:#000;transform:translateX(-50%);z-index:3}
.cel-tela{position:relative;width:100%;height:100%;border-radius:20px;overflow:hidden;background:#fff}
.cena{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14% 8% 8%;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s;font-family:var(--corpo);color:var(--marinho)}
@keyframes toca{50%{transform:scale(.94);filter:brightness(1.15)}}
.cena-zap{justify-content:flex-start;align-items:stretch;gap:7px;padding:0 0 8%;background:#e9dfd3}
.zap-topo{background:#128c4a;color:#fff;font:800 clamp(7px,.9vw,10px)/1 var(--corpo);padding:22% 8% 8%;text-align:left}
.zap-msg{max-width:84%;padding:6% 7%;border-radius:10px;font:600 clamp(6px,.85vw,10px)/1.3 var(--corpo);text-align:left;color:#1c2230;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.zap-msg.eu{align-self:flex-end;background:#d7fbc8;margin-right:6%}
.zap-msg.ela{align-self:flex-start;background:#fff;margin-left:6%;transition-delay:.9s}
.filme[data-passo="4"] .zap-msg{opacity:1;transform:none}

/* qual cena aparece em cada passo */
.filme[data-passo="0"] .cena-inicio,
.filme[data-modo="nfc"][data-passo="1"] .cena-inicio,
.filme[data-modo="qr"][data-passo="1"] .cena-camera,
.filme[data-passo="2"] .cena-abrindo,
.filme[data-passo="3"] .cena-perfil,
.filme[data-passo="4"] .cena-zap{opacity:1;transform:none}


/* legenda */
.filme-legenda{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.filme-legenda li{display:flex;gap:14px;align-items:center;background:#fff;border-radius:18px;padding:16px 18px;font:800 17px/1.3 var(--corpo);color:var(--marinho);opacity:.4;transition:opacity .35s,transform .35s;box-shadow:0 8px 22px rgba(16,32,96,.06)}
.filme-legenda li b{flex:0 0 38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--creme);font:400 20px var(--display);color:var(--laranja)}
.filme-legenda li.agora{opacity:1;transform:translateX(6px)}
.filme-legenda li.agora b{background:var(--laranja);color:#fff}
.filme .so-qr{display:none}
.filme[data-modo="qr"] .so-qr{display:inline}
.filme[data-modo="qr"] .so-nfc{display:none}

@media (max-width:980px){
  .filme{grid-template-columns:1fr;gap:18px}
  .filme-palco{aspect-ratio:1/1.02;border-radius:26px}
  .filme-pet{left:6%;top:10%;width:50%}
  .filme-cel{width:36%;right:6%;top:14%}
  .filme[data-passo="1"] .filme-cel{transform:translate(-40%,30%) rotate(-12deg)}
  .filme[data-modo="qr"][data-passo="1"] .filme-cel{transform:translate(-38%,18%) rotate(-4deg)}
  .filme-ondas{left:42%;top:62%;width:18%}
  .tag-frente b,.tag-verso b{font-size:10px}
  .filme-legenda li{font-size:16px;padding:13px 14px}
  .filme-modo{flex:1 1 auto;font-size:13px;padding:10px 12px}
}