/* Player da VSL (Mux · HLS). Mesmo quadro 9:16 do placeholder: borda, raio e proporção idênticos. */
.vsl {
  --vsl-marinho: #050b1f;
  position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; isolation: isolate;
  border-radius: var(--r-quadro); border: 1px solid var(--borda-2); background: #000;
  box-shadow: 0 28px 64px -32px var(--azul-brilho);
  -webkit-tap-highlight-color: transparent;
}
.vsl-video {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: #000;
  pointer-events: none; /* o clique vai para o botão de cima, nunca para o <video> */
}
.vsl-video::-webkit-media-controls { display: none !important; }
.vsl-video::-webkit-media-controls-enclosure { display: none !important; }

/* Botões que cobrem o quadro */
.vsl-alvo, .vsl-ouvir {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit;
  background: none; color: inherit; font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none;
}
.vsl-alvo:focus-visible, .vsl-ouvir:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }

/* Ícone de pausa/continuar: aparece no centro só quando o vídeo está pausado */
.vsl-ic {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--azul); color: #fff; pointer-events: none;
  box-shadow: 0 0 0 10px var(--azul-tinta-escuro), 0 14px 40px var(--azul-brilho);
  opacity: 0; transform: scale(.85); transition: opacity .2s var(--e-ctrl), transform .2s var(--e-ctrl);
}
.vsl-ic .ic { width: 28px; height: 28px; margin-left: 3px; }
.vsl[data-estado="pausado"] .vsl-ic { opacity: 1; transform: none; }

/* Sobreposição inicial */
.vsl-ouvir {
  z-index: 3; display: grid; place-items: center; padding: 20px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(5, 11, 31, .52));
  transition: opacity .25s var(--e-ctrl), visibility 0s linear .25s;
}
.vsl-ouvir[hidden] { display: none; }
.vsl-cartao {
  display: grid; justify-items: center; width: min(100%, 248px); padding: 24px 20px 22px; text-align: center;
  color: var(--tx); border-radius: var(--r-cartao); border: 1px solid color-mix(in srgb, var(--azul-claro) 55%, transparent);
  background: linear-gradient(180deg, rgba(8, 18, 52, .86), rgba(3, 6, 18, .9));
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: border-color .24s var(--e-ctrl), box-shadow .24s var(--e-ctrl), transform .24s var(--e-ctrl);
}
.vsl-tit { display: block; font-size: 1.1875rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.vsl-acao {
  display: inline-flex; align-items: center; gap: .55em; padding: .75em 1.25em; border-radius: var(--r-pilula);
  background: var(--azul); color: var(--tinta-do-botao); font-size: .9375rem; font-weight: 600; line-height: 1.2;
  box-shadow: 0 8px 24px -8px var(--azul-brilho);
  transition: background-color .24s var(--e-ctrl), box-shadow .24s var(--e-ctrl);
}
.vsl-acao .ic { width: 1.25em; height: 1.25em; flex: none; }
.vsl-ouvir:active .vsl-cartao { transform: scale(.98); }
@media (hover: hover) {
  .vsl-ouvir:hover .vsl-cartao { border-color: var(--azul-claro); transform: translateY(-2px); box-shadow: 0 22px 50px -14px rgba(0, 0, 0, .8), 0 0 0 1px var(--azul-tinta-escuro), 0 0 36px -6px var(--azul-brilho), inset 0 1px 0 rgba(255, 255, 255, .08); }
  .vsl-ouvir:hover .vsl-acao { background: var(--azul-hover); box-shadow: 0 10px 28px -8px var(--azul-brilho); }
}
@media (prefers-reduced-motion: no-preference) {
  .vsl-acao { animation: vsl-pulso 2.6s var(--e-ctrl) infinite; }
  @keyframes vsl-pulso { 0%, 100% { box-shadow: 0 8px 24px -8px var(--azul-brilho), 0 0 0 0 rgba(9, 77, 252, .45); } 60% { box-shadow: 0 8px 24px -8px var(--azul-brilho), 0 0 0 10px rgba(9, 77, 252, 0); } }
}

/* Estados em que o vídeo não está passando ao fundo: o texto muda, o resto fica igual */
.vsl-t-mudo, .vsl-t-bloq { display: grid; justify-items: center; gap: 14px; }
.vsl-t-bloq { display: none; }
.vsl[data-estado="bloqueado"] .vsl-t-mudo { display: none; }
.vsl[data-estado="bloqueado"] .vsl-t-bloq { display: grid; }
.vsl[data-estado="carregando"] .vsl-ouvir { cursor: progress; }

/* Barra de progresso: só leitura, nunca recebe clique */
.vsl-barra {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 5px; background: rgba(255, 255, 255, .22);
  pointer-events: none; opacity: 0; transition: opacity .3s var(--e-ctrl);
}
.vsl-barra i { display: block; width: 100%; height: 100%; background: var(--azul-claro); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.vsl[data-iniciado] .vsl-barra { opacity: 1; }

/* Erro */
.vsl-erro {
  position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center;
  background: rgba(3, 6, 18, .94); color: var(--tx);
}
.vsl-erro[hidden] { display: none; }
.vsl-erro p { font-size: 1rem; line-height: 1.4; max-width: 24ch; }
.vsl-erro button {
  padding: .75em 1.4em; border: 0; border-radius: var(--r-pilula); background: var(--azul); color: var(--tinta-do-botao);
  font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; transition: background-color .24s var(--e-ctrl);
}
.vsl-erro button:hover { background: var(--azul-hover); }
.vsl-erro button:active { background: var(--azul-ativo); }
.vsl-erro button:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .vsl-ouvir, .vsl-cartao, .vsl-acao, .vsl-ic, .vsl-barra { transition: none !important; animation: none !important; }
  .vsl-ouvir:hover .vsl-cartao { transform: none; }
}