/* (v186) O vídeo da capa do site da loja (app/video_capa.py, templates/_video_capa.html, static/js/video-capa.js). */
.capa-video { display: block; width: 100%; height: auto; background: transparent; }

/* Na Vitrine, o quadro do vídeo tem o formato do próprio vídeo (as medidas do <video>), sem cortar nada; vídeo em pé
   demais fica até 72% da altura da tela, cortado no meio. Sem a sombra de baixo das fotos com nome. */
.hero-video { aspect-ratio: auto; grid-column: 1 / -1; background: rgba(255, 255, 255, .08); }
.hero-video::after { display: none; }
.hero-video .capa-video { max-height: 72vh; object-fit: cover; }

/* Por cima da foto, no mesmo recorte (os layouts de página única): aparece quando começa a tocar. */
.capa-video-sobre {
  position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover;
  opacity: 0; transition: opacity .45s ease; z-index: 0;
}
.capa-video-sobre.capa-video-tocando { opacity: 1; }
/* Os recortes que não eram "relative" (a foto ditava o tamanho): o vídeo fica preso a eles. */
.inst-capa-quadro, .ms-capa-recorte, .at-arco-recorte, .em-capa-foto { position: relative; }
/* O Cartaz recorta a foto num círculo; o vídeo, no mesmo círculo. O Urbano tira um pouco da cor. */
.ct-banner-foto .capa-video-sobre { clip-path: circle(78% at 92% 50%); }
.ur-fundo .capa-video-sobre { filter: saturate(.85); }
@media (max-width: 720px) { .ct-banner-foto .capa-video-sobre { clip-path: circle(70% at 100% 50%); } }

/* O botão de pausar, no canto do quadro (aparece quando o vídeo toca). */
.capa-video-pausa {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(15, 23, 42, .58); color: #FFFFFF; backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.capa-video-pausa[hidden] { display: none; }
.capa-video-pausa:hover { background: rgba(15, 23, 42, .75); }
.capa-video-pausa:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.capa-video-icone-tocar { display: none; }
.capa-video-pausa[aria-pressed="true"] .capa-video-icone-tocar { display: block; }
.capa-video-pausa[aria-pressed="true"] .capa-video-icone-pausa { display: none; }

/* Na página única o botão fica no canto de cima (embaixo moram a etiqueta do destaque e a legenda do Empório). */
.ms-capa-recorte .capa-video-pausa, .at-arco-recorte .capa-video-pausa, .inst-capa-quadro .capa-video-pausa,
.em-capa-foto .capa-video-pausa { top: 12px; bottom: auto; }
/* No Mostruário o selo da entrega mora no canto de cima à direita e o cartão do destaque embaixo à esquerda: o botão
   vai no canto de cima à esquerda. */
.ms-capa-recorte .capa-video-pausa { top: 14px; left: 14px; right: auto; bottom: auto; }
/* No Ateliê o alto do arco é redondo e embaixo fica o selo de aberto: o botão vai no meio da lateral. */
.at-arco-recorte .capa-video-pausa { top: 50%; bottom: auto; right: 12px; transform: translateY(-50%); }
/* Nos fundos que ocupam a capa toda (Galpão, Brasa, Urbano, Monte, o banner do Aplicativo e o do Cartaz): no canto de
   cima, à direita, onde a capa só tem a foto. */
.capa-video-pausa-canto { top: 16px; right: 16px; bottom: auto; z-index: 3; }
.gp-capa > .capa-video-pausa-canto, .br-capa > .capa-video-pausa-canto, .ur-capa > .capa-video-pausa-canto { top: 20px; right: 20px; }
/* O Empório põe a foto atrás de tudo (z-index -2) e o degradê da legenda por cima (-1): o vídeo fica entre os dois. */
.em-capa-foto > .capa-video-sobre { z-index: -2; }

/* (v188) O botão grande de tocar, no meio do vídeo: quando o aparelho não deixa o vídeo começar sozinho (o iPhone no
   modo Pouca Energia), ou para quem pediu menos movimento ou economia de dados. Um toque toca. */
.capa-video-tocar {
  position: absolute; inset: 0; z-index: 3; margin: auto; display: grid; place-items: center;
  width: 64px; height: 64px; padding: 0 0 0 4px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(15, 23, 42, .58); color: #FFFFFF; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28); transition: transform .15s ease, background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.capa-video-tocar[hidden] { display: none; }
.capa-video-tocar:hover { background: rgba(15, 23, 42, .75); }
.capa-video-tocar:active { transform: scale(.94); }
.capa-video-tocar:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
/* O botão de tocar do próprio iPhone (aparece no modo Pouca Energia) sai: o nosso é o que vale, um só. */
video[data-capa-video]::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
/* Vídeo que o aparelho não abre: fica a primeira imagem, do mesmo tamanho do vídeo. */
.capa-video-foto { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: cover; }
.capa-video[hidden] { display: none; }

/* (v190) O vídeo como imagem animada (o iPhone no modo Pouca Energia não deixa o vídeo começar sozinho, mas mostra o
   próprio .mp4 numa <img>, como um GIF): as mesmas classes do vídeo, o mesmo lugar e o mesmo tamanho. */
.hero-video .capa-video-imagem { height: auto; }
.capa-video-imagem { pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }