/* Vídeos da seção de recursos (Mux · HLS): sempre mudos, um por vez, no quadro 9:16 do player da VSL (vsl.css). */
.rec {
  box-shadow: none;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(9, 77, 252, .26), transparent 62%),
    linear-gradient(180deg, var(--sup-3), var(--sup-1));
}
.rec .vsl-video { background: transparent; }
.rec .vsl-alvo { z-index: 3; }

/* O mesmo tamanho do espaço reservado de antes; no mobile um pouco maior para ler bem */
.ben-painel .rec { width: min(100%, 250px); }
@media (min-width: 900px) { .ben-painel .rec { width: 250px; order: 2; } }

/* Ícone de reproduzir: só quando o vídeo está parado (início ou pausa do usuário) */
.rec .vsl-ic { width: 56px; height: 56px; margin: -28px 0 0 -28px; box-shadow: 0 0 0 8px var(--azul-tinta-escuro), 0 10px 30px var(--azul-brilho); }
.rec .vsl-ic .ic { width: 22px; height: 22px; margin-left: 2px; }
.rec[data-estado="ocioso"] .vsl-ic, .rec[data-estado="pausado"] .vsl-ic { opacity: 1; transform: none; }

/* Carregando / buffering */
.rec .dv-espera {
  position: absolute; left: 50%; top: 50%; z-index: 4; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; pointer-events: none;
  border: 3px solid rgba(255, 255, 255, .22); border-top-color: #fff; opacity: 0; transition: opacity .2s var(--e-ctrl);
}
.rec[data-espera] .dv-espera, .rec[data-estado="carregando"] .dv-espera { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .rec[data-espera] .dv-espera, .rec[data-estado="carregando"] .dv-espera { animation: rec-gira .8s linear infinite; }
  @keyframes rec-gira { to { transform: rotate(360deg); } }
}
@media (prefers-reduced-motion: reduce) { .rec .dv-espera { transition: none !important; } }

/* Erro, em escala de card */
.rec .vsl-erro { gap: 12px; padding: 16px; }
.rec .vsl-erro p { font-size: .875rem; }
.rec .vsl-erro button { padding: .65em 1.1em; font-size: .8125rem; }