/* Comparador Bruto x Pronto (seção "O que muda quando você transforma uma gravação bruta..."): vídeos do Mux dentro das duas camadas. */
.cmp-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }

/* Ícones de som, um por lado (Bruto à esquerda, Pronto à direita), acima da área de arrastar. Só um áudio por vez. */
.cmp-som {
  position: absolute; bottom: 10px; z-index: 5; width: 40px; height: 40px; 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);
}
.cmp-som::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }   /* área de toque de 48 px */
.cmp-som-b { left: 10px; }
.cmp-som-p { right: 10px; }
.cmp-som .ic { width: 18px; height: 18px; }
.cmp-som .i-on { display: none; }
.cmp-som[data-som="on"] { background: var(--azul); border-color: var(--azul); }
.cmp-som[data-som="on"] .i-on { display: block; }
.cmp-som[data-som="on"] .i-off { display: none; }
@media (hover: hover) { .cmp-som:hover { background: var(--azul); border-color: var(--azul); } }
.cmp-som:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cmp-som { transition: none; } }