/* palco em pé (celular e tablet em pé, html.empe, que o celular.js liga): cada cena presa vira um palco de 100svh preso à
   rolagem, como no computador. Composição da home: a peça na metade de cima, o texto na de baixo, o menu livre.
   O celular.js escreve transform e opacity; aqui só a casa de cada peça. Sem a classe, vale a página empilhada */
/* o toque mostra o :active de cada controle, não o clarão cinza do navegador */
html.empe{-webkit-tap-highlight-color:transparent}
html.empe .pula:active{transform:scale(.97)}
html.empe [data-cena] .presa{position:sticky;top:0;height:100svh;overflow:hidden;padding:0;--gut:max(16px,5vw)}
html.empe .pula{position:absolute;right:var(--gut);bottom:14px;z-index:8;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font:500 12px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--apoio-2);touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:transform .12s ease-out}
/* o laço escreve direto em cada peça; a entrada da página empilhada não pode correr atrás dele */
html.empe .presa .sobe{opacity:1;transform:none;transition:none}
html.empe .mk-e{display:block;overflow:hidden;padding:.06em .06em .14em;margin:-.06em -.06em -.14em}
html.empe .pi-e{display:block;will-change:transform}

/* criação: o fundo é o próprio trilho, que rola por trás do palco, e termina no preto do céu que vem depois */
html.empe .cria{background:linear-gradient(180deg,oklch(0.11 0.012 255) 0,oklch(0.15 0.022 252) 35%,oklch(0.12 0.016 254) 70%,#040405 100%)}
html.empe .cria .presa{background:none}
html.empe .cria .sx{display:block;position:absolute;inset:0;pointer-events:none}
html.empe .cria .sx > :not(.ha-raiz),html.empe .cria :is(#tl,#tl-sombra){display:none}
html.empe .cria #hp-tela{background:#0b0b0b url(nexus/img/vitrine-modelos.webp) center/cover}
html.empe .cria .sx #hp-aparelhos{position:absolute;transform-origin:0 0;will-change:transform,opacity}
html.empe .cria .ha-peca{will-change:translate,opacity}
html.empe .abre-tx{position:absolute;z-index:5;left:var(--gut);right:var(--gut);top:clamp(84px,11svh,112px);max-width:none}
html.empe .abre-base{position:absolute;z-index:5;left:var(--gut);right:var(--gut);bottom:max(64px,7svh);margin:0}
html.empe .abre-base .btns{margin-top:0}
html.empe .cria [data-h]{will-change:transform,opacity}
html.empe .ps{position:absolute;inset:0;z-index:6;margin:0;max-width:none;display:block;pointer-events:none}
html.empe .ps-i{position:absolute;inset:0;display:block;visibility:hidden}
html.empe .ps-t{position:absolute;left:var(--gut);right:var(--gut);top:var(--tx,54%)}
html.empe .ps-t > *{will-change:transform,opacity}
html.empe .ps-t .lk{pointer-events:auto}
html.empe .ps-f{position:absolute;left:0;top:0;width:calc(100vw - 2 * var(--gut));max-width:760px;margin:0;transform-origin:0 0;opacity:0;will-change:transform,opacity}
html.empe .ps .fm-palco{max-width:360px}
html.empe .ps .col-f{max-width:420px}
html.empe .ps .q1 .seta{transform-origin:20% 10%;will-change:transform}
html.empe .ps .q2 .tit{color:#2E211D;transition:color .3s}
html.empe .ps .q2.ac .tit{color:#7A2E3B}
html.empe .ps .q2:not(.ac) .cores i:nth-of-type(2){box-shadow:none}
html.empe .ps .q3 .nav{will-change:transform}
html.empe .ps .q3 .noar{opacity:0}
html.empe .ps .fm-palco .env{transition:background-color .3s}
html.empe .ps .col-f .ct{opacity:0}