/* =========================================================
   VÍDEO DAS PÁGINAS DE PRODUTO
   =========================================================
   Um vídeo por página, logo abaixo do texto de abertura. Foi
   gravado no próprio Evolubaby com dados fictícios
   (ferramentas/videos/) e fica em static/videos/, servido pelo
   próprio site: a CSP (default-src 'self') já cobre vídeo e
   legenda sem liberar nenhum domínio de fora.

   Começa sem som e com legenda, porque navegador nenhum deixa
   um vídeo tocar sozinho com áudio. O botão "Ouvir narração"
   liga o som e volta ao início. Com "reduzir movimento" ligado
   no sistema, ele não começa sozinho (video-produto.js).
   ========================================================= */

.video-produto {
    max-width: 920px;
    margin: 0 auto 60px;
}

.video-moldura {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #1c2736;
    box-shadow: 0 12px 32px rgba(44, 62, 80, 0.16);
}

.video-produto-player {
    display: block;
    width: 100%;
    height: 100%;
}

.video-som {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(90deg, var(--ciano, #3db8c6) 0%, var(--rosa, #f17c8d) 100%);
    color: #fff;
    font: 600 0.88rem 'Poppins', sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: opacity 0.3s;
}

.video-som:hover { opacity: 0.85; }

.video-som:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.video-som[hidden] { display: none; }

.video-aviso {
    margin-top: 10px;
    text-align: center;
    font-size: 0.8rem;
    color: #7a8a91;
}

@media (max-width: 700px) {
    .video-produto { margin-bottom: 44px; }
    .video-moldura { border-radius: 12px; }
    .video-som { top: 10px; right: 10px; padding: 8px 14px; font-size: 0.8rem; }
}