/* Vídeo de apresentação que toca sozinho (18/10/2026): botão "Ouvir com som" por cima do vídeo. Par do video-auto.js. */
.moldura-video.va{position:relative}
.va-botao{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:inline-flex;align-items:center;gap:12px;
  padding:16px 28px 16px 22px;border:0;border-radius:999px;cursor:pointer;font:inherit;font-weight:800;font-size:1.12rem;letter-spacing:.01em;white-space:nowrap;
  color:#0B1A3A;background:linear-gradient(135deg,#FFC233 0%,#FF7A1A 100%);
  box-shadow:0 12px 34px rgba(0,0,0,.45),0 0 0 0 rgba(255,194,51,.55);animation:va-pulso 2.2s ease-out infinite;
  -webkit-tap-highlight-color:transparent;transition:transform .18s ease}
.va-botao:hover{transform:translate(-50%,-50%) scale(1.05)}
.va-botao:focus-visible{outline:3px solid #fff;outline-offset:4px}
.va-botao svg{width:28px;height:28px;flex-shrink:0;fill:#0B1A3A;stroke:#0B1A3A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.va-botao[hidden]{display:none}
/* enquanto toca mudo, o botão desce um pouco para não cobrir o miolo do vídeo (a legenda fica embaixo, ele fica acima dela) */
.va.va-tocando .va-botao{top:auto;bottom:22%;transform:translate(-50%,0)}
.va.va-tocando .va-botao:hover{transform:translate(-50%,0) scale(1.05)}
@keyframes va-pulso{0%{box-shadow:0 12px 34px rgba(0,0,0,.45),0 0 0 0 rgba(255,194,51,.55)}70%{box-shadow:0 12px 34px rgba(0,0,0,.45),0 0 0 18px rgba(255,194,51,0)}100%{box-shadow:0 12px 34px rgba(0,0,0,.45),0 0 0 0 rgba(255,194,51,0)}}
/* celular: o balão de compra e o aviso de cookies ficam embaixo da tela, então o botão sobe para o alto do vídeo */
@media (max-width:700px){.va .va-botao,.va.va-tocando .va-botao{top:13%;bottom:auto;transform:translate(-50%,0)}.va .va-botao:hover{transform:translate(-50%,0)}}
/* vídeo em pé: a moldura abraça o vídeo, sem faixa preta dos lados */
.moldura-video.va-vertical{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
@media (max-width:520px){.va-botao{font-size:1rem;padding:14px 22px 14px 18px;gap:10px}.va-botao svg{width:24px;height:24px}}
@media (max-width:360px){.va-botao{font-size:.94rem;padding:12px 18px 12px 15px}}
@media (prefers-reduced-motion:reduce){.va-botao{animation:none;transition:none}}