/* Página da VSL do funil de desconto na conta de luz (desconto/).
   Só o vídeo e o botão. Padrão de player da Donu (Vantt): a pessoa assiste, não navega.
   Sem barra de progresso, sem arrastar, sem tela cheia, sem atalho de teclado. */
:root { --verde-zap: #25d366; --verde-zap-esc: #128c7e; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; width: 100%; background: #000; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.palco { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #000; }
/* Vídeo só em 9:16: a caixa cresce até a altura da tela e nunca passa da largura */
.caixa { position: relative; height: 100%; width: min(100vw, calc(100dvh * 9 / 16)); max-height: 100dvh; background: #000; overflow: hidden; }
video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; outline: none; pointer-events: none; }
video::-webkit-media-controls, video::-webkit-media-controls-panel, video::-webkit-media-controls-start-playback-button { display: none !important; }
.toque { position: absolute; inset: 0; z-index: 4; cursor: pointer; background: transparent; }
.toque.fora { display: none; }

/* "Toque para ouvir": o vídeo começa mudo, e este toque liga o som */
.ouvir { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8;
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border: 0; border-radius: 60px;
  background: var(--verde-zap); color: #fff; font-family: inherit; font-weight: 700; font-size: clamp(16px, 4.6vw, 20px); line-height: 1.2; cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45); white-space: nowrap; animation: pulsa 2.2s infinite; }
.ouvir svg { width: 24px; height: 24px; flex: none; }
.ouvir.fora { display: none; }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5), 0 8px 30px rgba(0, 0, 0, .45); } 50% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0), 0 8px 30px rgba(0, 0, 0, .45); } }

.aviso-video { position: absolute; left: 16px; right: 16px; top: 18px; z-index: 6; display: none; text-align: center;
  color: #fff; font-size: 14px; background: rgba(0, 0, 0, .6); padding: 10px 14px; border-radius: 10px; }
.sem-video .aviso-video { display: block; }

/* Botão que abre a conversa: nasce escondido e sobe só depois do pitch */
.chamada { position: absolute; left: 0; right: 0; bottom: 0; z-index: 12; padding: 0 17px calc(22px + env(safe-area-inset-bottom));
  transform: translateY(150%); opacity: 0; pointer-events: none; visibility: hidden;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .45s ease, visibility .45s; }
.chamada.aparece { transform: none; opacity: 1; pointer-events: auto; visibility: visible; }
.botao { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%;
  background: var(--verde-zap); color: #fff; font-family: inherit; font-weight: 700; font-size: clamp(16px, 4.6vw, 19px);
  letter-spacing: .2px; padding: 17px 24px; border: 0; border-radius: 60px; cursor: pointer;
  box-shadow: 0 8px 30px rgba(37, 211, 102, .38); animation: respira 2.6s ease-in-out infinite; }
.botao:hover { filter: brightness(1.06); }
.botao:active { transform: scale(.98); }
.botao svg { width: 22px; height: 22px; flex: none; }
@keyframes respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.botao:focus-visible, .ouvir:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .chamada { transition: none; }
  .botao, .ouvir { animation: none; }
}