/* Loja IMT Academy — o VÍDEO COM SOM das landings (24/09/2026)
*
* Componente da base, em arquivo próprio porque a Agência não carrega o
* lp.css (tem o agencia.css dela) e o player precisa ser o mesmo nas quatro
* páginas. Usa os tokens das duas bases (--acento, --acento-tx, --f, --tx,
* --tx-fraco, --branco) e tem reserva para cada um.
*
* ── COMO UMA PÁGINA USA ─────────────────────────────────────────────────────
*
* (o botão se posiciona aqui, no vídeo, e não na legenda)
*
*
*
* (ícones + Ativar som )
*
* …
*
*
*
* O vídeo nasce MUDO, em laço. O botão (escondido sem JS: sem JS o vídeo
* fica com os controles do navegador, que já têm o som) liga e desliga o
* som; ligar volta ao começo. Um vídeo com som por vez.
* Cor do botão: --som-bg e --som-tx (padrão: o acento da página).
* Largura: --som-larg (padrão 330px). Seção pronta de duas colunas: .som-secao.
* Moldura própria (o mostrador do Motion): o elemento em volta leva data-som
* e position: relative, o a classe som__video, e o botão sai de
* lojaVideoSomBotao() (assets/loja/video-som.php).
*/
.som { position: relative; isolation: isolate; margin: 0; justify-self: center; width: min(100%, var(--som-larg, 330px)); }
.som__quadro { position: relative; }
.som__video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 26px; background: #0b0b0b;
box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -36px rgba(0,0,0,.9); }
/* o botão: grande, no pé do vídeo, texto que diz o que ele faz */
.som__botao { position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px 0 18px; border: 0; border-radius: 999px; cursor: pointer;
background: var(--som-bg, var(--acento, #D8FF00)); color: var(--som-tx, var(--acento-tx, #000));
font: 800 .88rem/1 var(--f, 'Montserrat', system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); -webkit-tap-highlight-color: transparent; transition: background-color .2s, box-shadow .2s; }
.som__botao[hidden] { display: none; }
.som__botao:active { transform: translateX(-50%) scale(.96); }
.som__botao:focus-visible { outline: 3px solid var(--som-foco, var(--branco, #FCFCFC)); outline-offset: 3px; border-radius: 999px; }
.som__ic { width: 22px; height: 22px; flex: none; }
.som__ic--on { display: none; }
.som--ligado .som__ic--off { display: none; }
.som--ligado .som__ic--on { display: block; }
.som--ligado .som__botao { background: var(--branco, #FCFCFC); color: #000; }
/* com os controles do navegador (menos movimento, ou o navegador recusou tocar): o botão sobe acima deles */
.som__video[controls] ~ .som__botao { bottom: 64px; }
/* vídeo estreito (o mostrador do Motion no tablet e no 320 px): o botão encolhe, o texto fica.
Medido: "Desativar som" ocupa 213 px no tamanho normal e o vídeo chega a 207 px. */
[data-som] { container-type: inline-size; }
@container (max-width: 259px) {
.som__botao { min-height: 46px; gap: 6px; padding: 0 14px 0 11px; font-size: .72rem; letter-spacing: .04em; }
.som__ic { width: 18px; height: 18px; }
.som__video[controls] ~ .som__botao { bottom: 60px; }
}
@media (hover: hover) { .som__botao:hover { box-shadow: 0 0 0 4px rgba(252,252,252,.2), 0 12px 30px -10px rgba(0,0,0,.7); } }
.som__legenda { margin-top: 16px; font: 500 .9rem/1.4 var(--f, 'Montserrat', system-ui, sans-serif); color: var(--tx-fraco, rgba(252,252,252,.7)); text-align: center; }
.som__legenda b { color: var(--tx, inherit); }
/* seção pronta: o vídeo e o texto lado a lado a partir de 900px */
.som-secao { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .som-secao { grid-template-columns: 5fr 7fr; gap: 72px; } }
@media (prefers-reduced-motion: reduce) { .som__botao { transition: none; } .som__botao:active { transform: translateX(-50%); } }