/* Meu CDN, TRAVESSIA v4, página APPS: o momento assinatura (o celular na mão do buldogue passa pelos apps) e os blocos
   próprios (a mesma base com outra marca). Base = versão parada: cada app com a sua cena (a foto do lugar e as duas telas).
   html.mov no computador: a figura fica presa à direita (sticky) e os apps passam à esquerda (assets/js/pg/apps.js).
   Safari/iPhone: a figura presa, o buldogue, o quadro e CADA tela têm camada de composição permanente (will-change +
   translateZ fixos) e as imagens decodificam antes de a seção chegar; a troca é só de opacidade. É isso que impede o
   tremor que aparecia na troca de tela da home. No celular não há figura presa: cada app tem a própria cena, em camadas. */

/* =========================================================================================================
   MOMENTO ASSINATURA
   ========================================================================================================= */
.mo { position: relative; padding: clamp(80px, 9vw, 128px) var(--lado) 0; background: radial-gradient(55% 50% at 78% 30%, rgb(139 43 226 / .2), transparent 70%), radial-gradient(40% 40% at 10% 85%, rgb(240 0 208 / .08), transparent 70%), #0a0517; }
.mo-grade { max-width: 1320px; margin: 0 auto; }
.mo-cabeca { margin-bottom: clamp(40px, 5vw, 72px); }
.mo-cabeca > * { max-width: 640px; }
.mo-mundo { display: none; }
.mo-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(56px, 7vw, 110px); }
.mo-passo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.mo-passo__tipo { display: inline-flex; align-items: center; gap: 6px; font: 700 .76rem/1.3 var(--fonte); letter-spacing: .12em; text-transform: uppercase; color: var(--magenta); }
.mo-passo__tipo--exemplo { padding: 6px 10px; border-radius: 8px; border: 1px dashed rgb(255 199 119 / .55); background: rgb(255 199 119 / .1); color: var(--ambar); letter-spacing: .08em; }
.mo-passo__nome { margin: 10px 0 12px; font-weight: 800; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.05; }
.mo-passo__txt > p:not(.mo-passo__tipo) { color: var(--tinta-2); font-size: clamp(1rem, 1.1vw, 1.08rem); line-height: 1.58; max-width: 32em; }
.mo-passo .sv-acoes { margin-top: 22px; }
.mo-fig { position: relative; width: 100%; max-width: 560px; aspect-ratio: 10 / 9; justify-self: center; margin: 0; }
.mo-fig__lugar { position: absolute; left: 0; top: 0; width: 58%; height: 94%; object-fit: cover; border-radius: 22px; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 40px 80px -40px rgb(0 0 0 / .9); }
.mo-fig__tela { position: absolute; width: 33%; height: auto; border-radius: 18px; box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 36px 70px -30px rgb(0 0 0 / .95), 0 0 60px -30px rgb(240 0 208 / .5); }
.mo-fig__tela--a { left: 42%; top: 4%; }
.mo-fig__tela--b { right: 0; top: 17%; }
.mo-nota { max-width: 1320px; margin: 0 auto; padding: clamp(32px, 4vw, 56px) 0 clamp(64px, 7vw, 96px); }

/* ---------- computador com movimento: figura presa à direita, apps passando à esquerda ---------- */
@media (min-width: 761px) and (min-aspect-ratio: 4/5) {
  html.mov .mo-grade { display: grid; grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); column-gap: clamp(32px, 4vw, 64px); }
  html.mov .mo-cabeca { grid-column: 1; grid-row: 1; margin-bottom: 0; padding-bottom: 8vh; }
  html.mov .mo-passos { grid-column: 1; grid-row: 2; gap: 0; padding-bottom: 50vh; }   /* a figura continua presa até o último app passar do meio */
  html.mov .mo-passo { display: flex; flex-direction: column; justify-content: center; min-height: 78vh; opacity: .32; transition: opacity .5s ease; }
  html.mov .mo-passo.is-agora { opacity: 1; }
  html.mov .mo-fig { display: none; }
  html.mov .mo-mundo { display: block; grid-column: 2; grid-row: 1 / span 2; align-self: start; position: -webkit-sticky; position: sticky; top: var(--cab);
    height: calc(var(--alto) - var(--cab)); min-height: 560px; will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
  html.mov .mo-nota { padding-top: 0; }
}
.mo-palco { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%); }
.mo-luz { position: absolute; left: 12%; top: 8%; width: 88%; height: 84%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--cor) 34%, transparent), transparent); opacity: 0; will-change: opacity; transform: translateZ(0); }
.mo-luz[data-k="0"] { opacity: 1; }
.mo-quadro { position: absolute; left: 0; top: 12%; width: 46%; height: 76%; border-radius: 24px; overflow: hidden; background: #140b2a; box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 50px 100px -40px rgb(0 0 0 / .95); will-change: transform; transform: translateZ(0); }
.mo-lugar { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; max-width: none; object-fit: cover; opacity: 0; will-change: transform, opacity; transform: translateZ(0); backface-visibility: hidden; }
.mo-lugar[data-k="0"] { opacity: 1; }
.mo-quadro__veu { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(8 4 20 / .55) 0%, rgb(8 4 20 / 0) 22%, rgb(8 4 20 / 0) 52%, rgb(8 4 20 / .78) 100%); }
.mo-quadro__onde { position: absolute; left: 14px; top: 14px; right: 14px; height: 32px; }
.mo-quadro__onde span { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 99px; background: rgb(12 6 28 / .74); font: 700 .78rem/1.2 var(--fonte); color: #fff; white-space: nowrap; opacity: 0; will-change: opacity; }
.mo-quadro__onde span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 10px var(--magenta); }
.mo-quadro__onde span[data-k="0"] { opacity: 1; }
.mo-chips { list-style: none; margin: 0; padding: 0; position: absolute; left: 12px; right: 12px; bottom: 14px; height: 116px; }
.mo-chips li { position: absolute; left: 0; bottom: calc(var(--i, 0) * 38px); display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 11px; background: #fff; color: #1d1530; font: 700 .78rem/1.2 var(--fonte); white-space: nowrap; box-shadow: 0 14px 30px -14px rgb(0 0 0 / .8); opacity: 0; will-change: transform, opacity; }
.mo-chips li::before { content: ''; flex: none; width: 16px; height: 16px; border-radius: 5px; background: var(--degrade); }
.mo-chips li::after { content: ''; position: absolute; left: 14px; top: 50%; width: 4px; height: 7px; margin-top: -5px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mo-boris { position: absolute; right: 0; top: -3%; width: 64%; aspect-ratio: 705 / 1100; will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
.mo-boris__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; filter: drop-shadow(-24px 30px 40px rgb(4 2 12 / .65)); }
.mo-px { position: absolute; left: 0; top: 0; width: 705px; height: 1100px; transform-origin: 0 0; }
.mo-tela { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; border-radius: 38px; background: #05030c; will-change: transform; backface-visibility: hidden; }
.mo-tela__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; opacity: 0; will-change: opacity; transform: translateZ(0); backface-visibility: hidden; }
.mo-tela__img[data-k="0"][data-t="0"] { opacity: 1; }
.mo-tela__brilho { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgb(255 255 255 / .16) 0%, rgb(255 255 255 / 0) 34%, rgb(255 255 255 / 0) 70%, rgb(255 255 255 / .06) 100%); box-shadow: inset 0 0 22px rgb(0 0 0 / .35); }
.mo-conta { position: absolute; right: 4px; top: 12px; font: 700 .82rem/1 var(--fonte); color: var(--tinta-3); }
.mo-conta b { color: #fff; font-size: 1.05rem; }

/* =========================================================================================================
   A MESMA BASE, OUTRA MARCA
   ========================================================================================================= */
.mo-marca__fig { position: relative; height: clamp(400px, 42vw, 560px); }
.mo-marca__tela { position: absolute; top: 0; width: 41%; aspect-ratio: 620 / 1040; height: auto; object-fit: cover; object-position: 50% 0; border-radius: 26px; box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 44px 90px -40px rgb(0 0 0 / .95); }
.mo-marca__tela--a { left: 8%; transform: rotate(-5deg); }
.mo-marca__tela--b { left: 50%; top: 7%; transform: rotate(4deg); }
.mo-marca__rotulos { position: absolute; left: 8%; right: 9%; bottom: 0; display: flex; justify-content: space-between; font: 800 .82rem/1 var(--fonte); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.mo-marca__rotulos span:last-child { padding-right: 12%; }
.mo-marca .sv-lista a { color: #fff; text-decoration-color: var(--magenta); text-underline-offset: 3px; }

/* =========================================================================================================
   CELULAR (até 760 px ou tela em pé): cada app com a própria cena, em camadas
   ========================================================================================================= */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .mo { padding: 72px 16px 0; }
  .mo-passos { gap: 64px; }
  .mo-passo { grid-template-columns: 1fr; gap: 22px; }
  .mo-passo__nome { font-size: 1.75rem; }
  .mo-fig { max-width: none; aspect-ratio: 1 / 1.02; }
  .mo-fig__lugar { width: 62%; height: 90%; border-radius: 18px; }
  .mo-fig__tela { width: 36%; border-radius: 14px; }
  .mo-fig__tela--a { left: 40%; top: 6%; }
  .mo-fig__tela--b { right: 0; top: 22%; }
  html.mov .mo-fig__lugar, html.mov .mo-fig__tela { will-change: transform; }
  .mo-nota { padding: 32px 0 56px; }
  .mo-marca__fig { height: 380px; }
  .mo-marca__tela { width: 46%; }
  .mo-marca__tela--a { left: 2%; }
  .mo-marca__tela--b { left: 50%; }
  .mo-marca__rotulos { left: 4%; right: 4%; }
}

/* seis recursos: três por linha no computador (sem sobrar dois sozinhos) */
@media (min-width: 761px) and (min-aspect-ratio: 4/5) { .mo-recursos .sv-recursos__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }