/* Hero em vídeo da página inicial. */

.cme-hero {
	width: 100%;
}

.cme-hero__media {
	position: relative;
	width: 100%;
	height: var(--cme-hero-h, 78vh);
	overflow: hidden;
	background: #000;
}

/* O elemento picture é só um seletor de formato; quem posiciona é a imagem. */
.cme-hero__media picture {
	display: contents;
}

/* Dois seletores de classe (0,2,0) porque o hero fica dentro do Elementor, e a
   regra `.elementor img { height: auto }` (0,1,1) vence um seletor de classe
   único — era o que fazia a capa parar na altura natural e sobrar o vazio
   preto embaixo. */
.cme-hero .cme-hero__poster,
.cme-hero .cme-hero__video {
	position: absolute;
	/* 1px de sangria de cada lado: a altura do bloco é fracionária (ex.: 506,39px)
	   e o arredondamento do navegador deixava escapar um fio do fundo preto na
	   borda de baixo. Sangrar mata o fio sem depender de arredondamento. */
	top: -1px;
	left: -1px;
	right: auto;
	bottom: auto;
	display: block;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	max-width: none;
	margin: 0;
	object-fit: cover;
	/* enquadra um pouco acima do centro: em recorte vertical o rosto e o busto
	   do vestido importam mais que o chão */
	object-position: center 38%;
}

/* A capa aparece primeiro; o vídeo faz fade por cima quando começa a tocar. */
.cme-hero .cme-hero__poster {
	z-index: 1;
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.cme-hero .cme-hero__video {
	z-index: 2;
	opacity: 0;
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.cme-hero__media.is-playing .cme-hero__video {
	opacity: 1;
}

.cme-hero__media.is-playing .cme-hero__poster {
	opacity: 0;
}

.cme-hero__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	background: #000;
	pointer-events: none;
}

@media (max-width: 767px) {
	.cme-hero__media {
		height: var(--cme-hero-h-mobile, 60vh);
	}

	/* Sangra de ponta a ponta: o hero fica dentro de uma coluna do Elementor
	   que tem respiro lateral. Puxar as margens até a borda da viewport tira
	   as faixas brancas dos lados sem mexer na página do construtor.
	   No celular não há barra de rolagem ocupando largura, então 100vw é
	   exatamente a largura visível — sem risco de rolagem horizontal. */
	.cme-hero {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
}

/* Troca entre vídeos no modo sequência: a capa reaparece por um instante, e
   um corte mais curto que a entrada inicial evita parecer travamento. */
.cme-hero__media.is-switching .cme-hero__video,
.cme-hero__media.is-switching .cme-hero__poster {
	transition-duration: 0.35s;
}

/* Sem vídeo para quem pede menos animação — o JS também não o carrega. */
@media (prefers-reduced-motion: reduce) {
	.cme-hero__video {
		display: none;
	}

	.cme-hero__media.is-playing .cme-hero__poster {
		opacity: 1;
	}
}