/* ── P48-32 — o mini-player da VSL no celular (docs/347) ────────────────────────────────────

   A decisão do owner de 21/09/2026: quem começou a assistir e rola a página continua vendo o
   vídeo num quadro pequeno no canto. É a EX-18 do 47º (`docs/146`), traduzida para a 48.

   Esta folha carrega DEPOIS de `pagina-vendas-48-uau.css` e de `pagina-vendas-48-casca.css`, e
   ⛔ não pinta nada por conta própria: sem a classe que o JS escreve, nenhuma regra daqui tem
   alvo. Acima de 760px o arquivo inteiro ⛔ existe — o desktop ⛔ muda um pixel.

   O quadro é o quadro do papel: 16:9, fio de tinta de 1px (`--rule2`, o mesmo fio das molduras
   da página) e raio de 4px — o mesmo raio do slot original. ⛔ Sombra, ⛔ brilho, ⛔ dourado do
   47º, ⛔ selo, ⛔ botão de fechar: o mini é o vídeo continuando, ⛔ um componente novo.

   ⭐ O CANTO É O SUPERIOR DIREITO — decisão do owner, 21/09/2026, 22h40, depois de usar o mini
   na prévia com o vídeo real. Antes ele morava no canto inferior, 12px acima do botão fixo de
   compra, e a altura dele entrava na conta por uma variável escrita pelo JS. O defeito que isso
   produzia ⛔ é de geometria: é de MOVIMENTO. O botão fixo aparece e some sozinho (cartão de
   preço, rodapé, aviso, os dois pontos de compra) deslizando em 220ms, e o mini, que dependia
   da altura dele, PULAVA 76px de uma vez a cada ida e volta. No topo desta página, no celular,
   ⛔ há nada fixo — o cabeçalho com o menu rola com o conteúdo —, então o quadro ⛔ muda de
   lugar nunca: o vídeo em cima, o botão de compra embaixo, e ⛔ dois flutuantes disputando a
   mesma borda. Esta folha ⛔ conhece mais o `.pv-fixo`.

   (O `pv-pular`, que só existe enquanto tem foco, mora no alto à ESQUERDA e tem `z-index: 80`;
   o menu aberto continua devolvendo o vídeo ao lugar dele, pela fórmula, ⛔ pelo empilhamento.)

   ⚠ NADA AQUI CRIA CAIXA NOVA. O elemento que flutua é o MESMO `<iframe>` que já está tocando;
   o slot `.sp5-vsl` continua no fluxo, com a mesma `aspect-ratio` e a mesma altura, e é por
   isso que ⛔ há salto de layout quando o vídeo sai e volta. Quem liga e desliga as classes é
   `static/js/pagina-vendas-48-mini.js`; esta folha ⛔ tem opinião sobre quando. */

@media (max-width: 760px) {
  /* O slot recorta o quadro no raio da borda (`overflow: hidden`, na folha da pele). Enquanto o
     vídeo flutua, o recorte sai do caminho — a caixa, a altura e a posição do slot no fluxo
     continuam exatamente as mesmas. */
  body.pv48 .sp5-vsl.pv48-mini {
    overflow: visible;
  }

  /* ⭐ A ARMADILHA QUE ESTA REGRA FECHA — e ela ⛔ é a que esta fatia supôs a princípio.

     O DEFEITO, MEDIDO em dois navegadores (Chrome real com a VSL verdadeira e Chrome 153 com
     a ponte dublada, ambos em 390×844): o quadro flutuava com `position: fixed` e ficava
     ACIMA da tela, em `top: -232`, e ROLAVA com a página (mais 300px de rolagem levavam-no a
     `top: -522`). O `fixed` ⛔ estava preso à janela; estava preso ao SLOT.

     A causa ⛔ é nenhum ancestral — a cadeia inteira computa `transform: none`, `filter:
     none`, `contain: none`. É o PRÓPRIO slot, que carrega a animação de entrada da primeira
     dobra (`.pv-hero__video .sp5-vsl { animation: pv-entra … both }`, em
     `pagina-vendas-48-uau.css`), cujos keyframes animam `transform`. **O Chrome trata um
     elemento com animação de `transform` PRESENTE como criador de bloco de contenção** —
     mesmo terminada, mesmo com `fill: both` fixando `transform: none`, mesmo com uma
     declaração `!important` vencendo a cascata. `!important` muda o VALOR computado; ⛔ muda
     o FATO de a animação existir. (Era exatamente isso que a versão anterior desta folha
     tentava, e por isso ⛔ funcionava.)

     Então a correção ⛔ é de valor: é de EXISTÊNCIA. Terminada a entrada, o JS escreve
     `pv48-entrada-feita` no slot e esta regra REMOVE a animação. É seguro porque o estado
     final dela — `opacity: 1; transform: none` — é o estado base: remover ⛔ muda um pixel e
     ⛔ reanima nada, nunca. E é o OPOSTO de `animation: none` no estado mini, que faria a
     entrada tocar de novo a cada volta do vídeo ao lugar dele.

     Medido depois da correção, na mesma tela: com o quadro ainda no pé, `top: 662` = 844 − 12
     (folga) − 73 (o botão fixo) − 96,5 (a altura do quadro); com o quadro no topo (a decisão
     das 22h40), `top: 12`. Nos dois, rolar 300px ⛔ o move um pixel — que é o que esta regra
     garante. */
  body.pv48 .sp5-vsl.pv48-entrada-feita {
    animation: none;
  }

  body.pv48 .sp5-vsl.pv48-mini > .sp5-vsl__frame {
    position: fixed;
    /* `inset: auto` ANTES de right/top: a regra da pele declara `inset: 0`, e sem zerá-la o
       quadro flutuante herdaria `bottom`/`left` e voltaria a ocupar a tela inteira. */
    inset: auto;
    right: max(12px, env(safe-area-inset-right));
    top: max(12px, env(safe-area-inset-top));
    /* Acima do conteúdo e ABAIXO de tudo o que a página abre por cima: o botão fixo de compra
       (40), o topo (60), o painel do menu (70), o painel de privacidade (60, `app.css`). Um
       `<dialog>` aberto vive na top layer e vence qualquer z-index — e o JS ainda devolve o
       vídeo ao slot quando qualquer um desses aparece. Este número é o cinto; o JS é o suspensório. */
    z-index: 30;
    /* 44vw dá 140,8px em 320 e 171,6px em 390; o teto de 176px impede que o quadro cresça
       demais em celular largo. Somado à folga de 12px, cabe inteiro na tela nas duas larguras,
       sem rolagem lateral. A folga é a mesma nos dois eixos, e ⛔ depende de peça nenhuma da
       página: 12px do alto e 12px da direita, respeitadas as safe areas. */
    width: clamp(140px, 44vw, 176px);
    height: auto;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--rule2);
    border-radius: 4px;
    background: var(--raised);
    /* O mini é vitrine, ⛔ controle: o toque atravessa para a página. ⛔ Há botão de fechar,
       play, pause, velocidade, preço ou texto — e o JS ainda tira o quadro da ordem de foco e
       da árvore acessível enquanto ele estiver aqui. */
    pointer-events: none;
    /* Entrada e saída instantâneas, em qualquer preferência de movimento. O único momento de
       movimento da página é o do carregamento (P48-25), e ⛔ é este. */
    transition: none;
  }

  /* ⭐ SUPRESSÃO VISUAL POR COLISÃO (a EX-19/EX-21 do 47º, aqui).

     Os dois blocos de WhatsApp carregam `data-vsl-mini-avoid`. Quando a rolagem faz o quadro
     flutuante cobrir um deles, o vídeo continua tocando, continua sendo a mesma instância — só
     deixa de ser desenhado enquanto durar a colisão.

     `visibility: hidden` e ⛔ `display: none`, por mecânica e ⛔ por gosto: `display: none`
     zeraria o retângulo, a colisão deixaria de ser medida, o quadro voltaria, colidiria de
     novo — pisca-pisca a cada quadro. Mantendo a caixa mensurável, o veredito é estável. */
  body.pv48 .sp5-vsl.pv48-mini.pv48-mini--oculto > .sp5-vsl__frame {
    visibility: hidden;
  }
}