/* #644/#786 — player próprio da VSL (components/vsl_player.php + shared/js/vsl_player.js). Usado na /convite e, depois, na home.
   A caixa reserva 9:16 pela largura (aspect-ratio): o vídeo carregar não mexe em nada (CLS 0). Altura máx. ~70% da tela. */
.vsl{margin:0;--vsl-h:min(640px,70vh)}
@supports (height:1svh){.vsl{--vsl-h:min(640px,70svh)}}
.vsl-box{position:relative;width:min(100%,calc(var(--vsl-h) * 9 / 16));aspect-ratio:9/16;margin:0 auto;border-radius:20px;overflow:hidden;background:var(--night-900,#070D1C);box-shadow:0 24px 60px -24px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1);outline:none}
.vsl-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:transparent}
.vsl-video::cue{opacity:0} /* a faixa só alimenta a camada abaixo */
/* legenda: altura fixa para 3 linhas, texto encostado embaixo — trocar a fala não mexe em nada (CLS 0) */
.vsl-cc{position:absolute;left:12px;right:12px;bottom:66px;height:calc(3 * 1.35em + 12px);display:none;align-items:flex-end;justify-content:center;text-align:center;pointer-events:none;font:600 15px/1.35 var(--font-body,Inter,sans-serif)}
.vsl.cc-on .vsl-cc{display:flex}
.vsl-cc span{background:rgba(7,13,28,.84);color:#fff;border-radius:8px;padding:3px 9px;white-space:pre-line;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* botão grande no poster */
.vsl-big{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px 0 8px;border:0;border-radius:var(--radius-pill,999px);background:var(--brand-gold,#D4A84B);color:var(--night-900,#070D1C);font:700 16px/1 var(--font-body,Inter,sans-serif);white-space:nowrap;cursor:pointer;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);transition:transform .18s var(--ease-out,ease),background .18s}
.vsl-big:hover{background:var(--gold-400,#E8C36A);transform:translateX(-50%) translateY(-1px)}
.vsl-big-ic{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--night-900,#070D1C);color:var(--brand-gold,#D4A84B)}
.vsl-big-ic svg{width:20px;height:20px;margin-left:2px}
.vsl-big-dur{font-weight:600;opacity:.72;margin-left:4px}
.vsl.is-started .vsl-big{display:none}

/* barra de controles: aparece depois do 1º play */
.vsl-bar{position:absolute;left:0;right:0;bottom:0;display:none;align-items:center;gap:2px;padding:24px 6px 6px;background:linear-gradient(to top,rgba(7,13,28,.88),rgba(7,13,28,0));color:#fff;transition:opacity .25s}
.vsl.is-started .vsl-bar{display:flex}
.vsl.is-idle .vsl-bar{opacity:0}
.vsl.is-idle .vsl-box{cursor:none}
.vsl-btn{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:#fff;cursor:pointer}
.vsl-btn:hover{background:rgba(255,255,255,.12)}
.vsl-btn svg{width:22px;height:22px}
.vsl-btn[aria-pressed="true"][data-act="cc"]{color:var(--brand-gold,#D4A84B)}
.vsl .i-pause,.vsl.is-playing .i-play,.vsl .i-mute,.vsl.is-muted .i-vol{display:none}
.vsl.is-playing .i-pause,.vsl.is-muted .i-mute{display:block}
.vsl-seek{flex:1;min-width:0;height:44px;margin:0 4px;accent-color:var(--brand-gold,#D4A84B);cursor:pointer;background:transparent}
.vsl-time{flex:none;font:600 12.5px/1 var(--font-body,Inter,sans-serif);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85);padding:0 4px}
@media(max-width:340px){.vsl-time{display:none}}

/* VSL horizontal (ratio 16x9): ocupa a largura toda, 16:9 reservado; o botão fica embaixo, fora do rosto do Brandon */
.vsl-wide .vsl-box{width:100%;aspect-ratio:16/9;border-radius:16px}
.vsl-wide .vsl-big{bottom:12%}
.vsl-wide .vsl-cc{bottom:56px;height:calc(2 * 1.35em + 8px);font-size:14px}
@media(min-width:1024px){.lp-stage .vsl-wide{align-self:start;margin-top:58px}}
@media(max-width:480px){.vsl-wide .vsl-big{min-height:46px;font-size:15px;padding-right:18px}.vsl-wide .vsl-big-ic{width:32px;height:32px}.vsl-wide .vsl-bar{padding-top:14px}}

/* tela cheia: o vídeo inteiro, sem corte */
.vsl-box:fullscreen{width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:#000}
.vsl-box:fullscreen .vsl-video{object-fit:contain}
.vsl-box:-webkit-full-screen{width:100%;height:100%;border-radius:0;background:#000}
@media(prefers-reduced-motion:reduce){.vsl-big,.vsl-bar{transition:none}}