/* 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; }

/* 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-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); }
}

/* Vídeos longos (16:9): dois exemplos lado a lado no desktop, empilhados no mobile. Usam os mesmos cards .dv da galeria. */
.dv-longo { aspect-ratio: 16 / 9; }
.longos { display: grid; gap: clamp(40px, 7vw, 56px); max-width: 1020px; margin-inline: auto; }
.longo { display: grid; gap: 12px; align-content: start; min-width: 0; }
.longo .dv { margin-bottom: 6px; }
.longo-tit { font-size: var(--fs-apoio); line-height: 1.25; text-wrap: balance; }
.longo-txt { color: var(--texto-2); font-size: calc(var(--fs-corpo) - 1px); line-height: var(--lh-corpo); text-wrap: pretty; }
.longo-pedido {
  margin-top: 4px; padding: 12px 16px; border-radius: 18px 18px 18px 6px; font-size: calc(var(--fs-corpo) - 2px); line-height: 1.4; color: var(--tx);
  background: var(--azul-tinta-escuro); border: 1px solid color-mix(in srgb, var(--azul-claro) 40%, transparent);
}
.longo-pedido span { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--azul-texto-escuro); margin-right: .4em; }
@media (min-width: 900px) { .longos { grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 48px); } }