/* experiência "role e veja o vídeo sendo editado": pensada primeiro para o celular */
.xp{background:#2e2c2c;color:#ededed;font-family:var(--font-body)}
.xp-stage{display:flex;flex-direction:column;gap:18px;padding:40px 16px}
.xp-steps{display:flex;flex-direction:column;gap:18px}
.xp-step span{display:flex;align-items:center;gap:8px;font:600 11px/1.3 var(--font-head);letter-spacing:.14em;text-transform:uppercase;color:#b3aeae}
.xp-step span::before{content:"";width:8px;height:8px;border-radius:50%;background:#e61919;flex:none}
.xp-step h2{margin:6px 0 0;color:#ededed;font:700 clamp(22px,6.4vw,34px)/1.2 var(--font-head);letter-spacing:-.015em}
.xp-phone{position:relative;container-type:inline-size;aspect-ratio:9/16;width:min(70vw,300px);margin:0 auto;background:#141313 url(f/001.webp) center/cover;border-radius:22px;overflow:hidden;box-shadow:0 0 0 5px #141313,0 18px 50px #0008}
.xp-phone canvas,.xp-phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.xp-phone canvas{display:none;transform-origin:50% 38%}
.xp-tag{position:absolute;left:6cqw;top:7cqw;margin:0;display:flex;align-items:center;gap:2.4cqw;background:#ededed;color:#2e2c2c;border-radius:99px;padding:1.6cqw 4cqw 1.6cqw 1.8cqw;font:600 4.2cqw/1.2 var(--font-head);opacity:0}
.xp-tag b{background:#e61919;color:#fff;border-radius:99px;padding:.8cqw 2.6cqw;font-weight:700}
.xp-cap{position:absolute;left:6cqw;right:6cqw;top:128cqw;margin:0;text-align:center;color:#ededed;font:600 6.6cqw/1.25 var(--font-head);text-shadow:0 .6cqw 2.4cqw #000a;opacity:0}
.xp-cap mark{background:#ededed;color:#2e2c2c;border-radius:1.4cqw;padding:0 1.1cqw;font-weight:700;text-shadow:none}
.xp-som{position:absolute;right:4cqw;bottom:4cqw;z-index:4;display:none;border:0;border-radius:99px;background:#e61919;color:#fff;font:700 4.4cqw/1 var(--font-head);padding:3.2cqw 4.6cqw;min-height:44px;cursor:pointer}
.xp-time{display:none}
.xp-acts{display:flex;gap:10px;align-items:center;justify-content:center}
.xp-skip{color:#ededed;font:600 14px/1 var(--font-head);padding:15px 12px;min-height:44px}
.xp-cta{flex:1;max-width:320px;text-align:center;background:#e61919;color:#fff;border-radius:99px;font:700 15px/1.1 var(--font-head);text-decoration:none;padding:15px 18px;min-height:44px}
.xp-barra{display:none}
/* com JS e sem pedido de movimento reduzido, a rolagem conduz a edição */
.xp.on{height:380vh;height:380svh}
.xp.on .xp-stage{position:sticky;top:0;height:100vh;height:100svh;padding:14px 16px max(10px,env(safe-area-inset-bottom));gap:10px;overflow:hidden}
.xp.on .xp-steps{position:relative;display:block;min-height:112px;flex:none}
.xp.on .xp-step{position:absolute;inset:0 0 auto;opacity:0}
.xp.on .xp-barra{display:flex;gap:4px;flex:none}
.xp.on .xp-barra b{flex:1;height:5px;border-radius:3px;background:#4a4646;overflow:hidden}
.xp.on .xp-barra i{display:block;height:100%;background:#e61919;transform:scaleX(0);transform-origin:left center}
.xp-selo{position:absolute;left:50%;top:21%;z-index:3;margin:0;transform:translate(-50%,-50%);opacity:0;white-space:nowrap;background:#e61919;color:#fff;border-radius:99px;padding:3cqw 6.5cqw;font:700 8cqw/1 var(--font-head);box-shadow:0 2cqw 7cqw #0008;pointer-events:none}
.xp-dica{position:absolute;left:50%;bottom:4cqw;z-index:3;margin:0;transform:translateX(-50%);display:none;white-space:nowrap;background:#ededed;color:#2e2c2c;border-radius:99px;padding:2.4cqw 4.6cqw;font:700 4.4cqw/1 var(--font-head);pointer-events:none}
.xp-dica.ver{display:block;animation:xp-pula 1s ease-in-out infinite}
@keyframes xp-pula{50%{transform:translate(-50%,-1.6cqw)}}
.xp.on .xp-area{flex:1;min-height:0;display:flex;justify-content:center;align-items:center}
.xp.on .xp-phone{height:100%;width:auto;max-width:100%;margin:0}
.xp.on .xp-phone canvas{display:block}
.xp.on .xp-phone video{opacity:0}
.xp.on .xp-time{display:flex;align-items:center;gap:10px;flex:none;height:30px}
.xp-cont{font:700 16px/1 var(--font-head);font-variant-numeric:tabular-nums;min-width:40px}
.xp-blocos{flex:1;display:flex;gap:1px;height:22px;border-radius:5px;overflow:hidden}
.xp-blocos i{display:block;min-width:0}
.xp-blocos .ok{background:#ededed}
.xp-blocos .fora{background:#6b6767}
@media (max-height:640px){.xp.on .xp-steps{min-height:92px}.xp-step h2{font-size:21px}}
@media (min-width:900px){
  .xp.on .xp-stage{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto auto;padding:28px 8vw;gap:14px 7vw}
  .xp.on .xp-barra{grid-column:1/-1}
  .xp.on .xp-steps{align-self:center;min-height:240px;grid-column:1;grid-row:2}
  .xp-step h2{font-size:clamp(34px,3.8vw,56px)}
  .xp-step span{font-size:13px}
  .xp.on .xp-area{grid-column:2;grid-row:2/5;height:100%;min-height:0}
  .xp.on .xp-time{grid-column:1;grid-row:3}
  .xp.on .xp-acts{grid-column:1;grid-row:4;justify-content:flex-start}
}
/* celular: foto menor para o título e os botões aparecerem mais cedo */
@media (max-width:700px){.hero .wrap{gap:22px;padding-block:22px 44px}.hero-text{gap:14px}.portrait{width:150px}.portrait .rec{white-space:nowrap}}