/* Vídeos de demonstração (Mux · HLS): Bruto x Pronto e galeria de estilos.
   Reaproveita o quadro do player da VSL (vsl.css) e só acrescenta o que é próprio dos cards. */
.dv {
  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));
}
.dv .vsl-video { background: transparent; }
.dv .vsl-alvo { z-index: 3; }

/* Ícone de reproduzir: aparece parado, no começo ou no fim */
.dv .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); }
.dv .vsl-ic .ic { width: 22px; height: 22px; margin-left: 2px; }
.dv[data-estado="ocioso"] .vsl-ic, .dv[data-estado="pausado"] .vsl-ic, .dv[data-estado="fim"] .vsl-ic { opacity: 1; transform: none; }

/* Ícone de som: sempre à vista, discreto; o toque/clique liga e desliga o áudio sem reiniciar o vídeo */
.dv-somb {
  position: absolute; top: 10px; right: 10px; z-index: 6; width: 36px; height: 36px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgba(5, 11, 31, .72); border: 1px solid color-mix(in srgb, var(--azul-claro) 55%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer;
  transition: background-color var(--d-ctrl) var(--e-ctrl), border-color var(--d-ctrl) var(--e-ctrl);
}
.dv-somb::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }   /* área de toque de 48 px */
.dv-somb .ic { width: 18px; height: 18px; }
.dv-somb .i-on { display: none; }
.dv-somb[data-som="on"] { background: var(--azul); border-color: var(--azul); }
.dv-somb[data-som="on"] .i-on { display: block; }
.dv-somb[data-som="on"] .i-off { display: none; }
@media (hover: hover) { .dv-somb:hover { background: var(--azul); border-color: var(--azul); } }
.dv-somb:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.dv[data-estado="erro"] .dv-somb { display: none; }

/* Carregando / buffering */
.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);
}
.dv[data-espera] .dv-espera, .dv[data-estado="carregando"] .dv-espera { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .dv[data-espera] .dv-espera, .dv[data-estado="carregando"] .dv-espera { animation: dv-gira .8s linear infinite; }
  @keyframes dv-gira { to { transform: rotate(360deg); } }
}
@media (prefers-reduced-motion: reduce) { .dv-somb, .dv-espera { transition: none !important; } }

/* Barra de progresso do vsl.css, mais fina nos cards */
.dv .vsl-barra { height: 4px; }

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

/* Bruto e Pronto */
.demo-pronto .dv { border-color: var(--azul-claro); box-shadow: 0 0 0 1px var(--azul-tinta-escuro), 0 24px 60px -24px var(--azul-brilho); }
.car-card .dv { margin-bottom: 10px; }

/* Mobile: Bruto primeiro e Pronto logo abaixo, em coluna, sem alternador */
@media (max-width: 639px) {
  .demo .seg { display: none; }
  .demo-par { flex-direction: column; gap: 14px; }
  .demo .demo-par[data-ativo] .demo-q { display: grid; flex: 0 0 auto; width: min(100%, 280px); }
  .demo-seta { display: block; margin: 0; transform: rotate(90deg); }
}