/* Vídeo-montra dentro da moldura em pé (.video-slot), igual em todas as páginas.
   Sempre mudo e em loop; a barra de cima mostra o tempo, o botão de baixo liga o som. */
.video-slot .video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; background: var(--amarelo-suave);
}

/* barra do tempo, no lugar das barrinhas do story */
.video-slot .tempo {
  position: absolute; top: 16px; left: 18px; right: 18px; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.55); box-shadow: 0 0 0 .5px rgba(22,53,42,.10); overflow: hidden; z-index: 2;
}
.video-slot .tempo i {
  position: absolute; inset: 0; border-radius: inherit; background: var(--verde);
  transform-origin: left center; transform: scaleX(0);
}

/* botão do som: pílula de vidro claro, alvo de toque de 44px */
.video-slot .som {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; min-width: 44px; padding: 0 13px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.82); color: var(--verde);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 1px 2px rgba(27,26,21,.08), 0 10px 22px -10px rgba(27,26,21,.35);
  font: 700 13px/1 "Manrope", ui-sans-serif, system-ui, sans-serif; cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.video-slot .som svg { width: 20px; height: 20px; flex: none; }
.video-slot .som .ligado { display: none; }
.video-slot .som[aria-pressed="true"] .ligado { display: block; }
.video-slot .som[aria-pressed="true"] .desligado { display: none; }
/* a palavra só aparece enquanto está mudo; com som fica só o ícone */
.video-slot .som[aria-pressed="true"] .rotulo-som { display: none; }
.video-slot .som:hover { background: #fff; }
.video-slot .som:active { transform: scale(.94); }
.video-slot .som:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .video-slot .som { transition: none; }
}