/* Peças compartilhadas: vídeo em tela cheia e texto dividido. Cores via --mm-acento. */

/* TESTE: esconde o selo do plano gratuito da Netlify. Remover ao assinar o plano pago. */
#nl-badge-frame { display: none !important; }
.mm-p { display: inline-block; white-space: nowrap; }
.mm-pi, .mm-l { display: inline-block; }
html.mm-travado { overflow: hidden; }

.mm-caixa {
	position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
	pointer-events: none; opacity: 0; transition: opacity .4s ease;
}
.mm-caixa.aberta { pointer-events: auto; opacity: 1; }
.mm-caixa__fundo { position: absolute; inset: 0; background: rgba(4, 2, 3, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.mm-caixa__quadro {
	position: relative; margin: 0; width: min(92vw, calc(86vh * 9 / 16)); transform: scale(.94) translateY(16px);
	transition: transform .55s cubic-bezier(.2, .9, .2, 1);
}
.mm-caixa.aberta .mm-caixa__quadro { transform: none; }
.mm-caixa video {
	display: block; width: 100%; max-height: 86vh; aspect-ratio: 9 / 16; object-fit: contain; background: #000;
	border-radius: 18px; box-shadow: 0 40px 120px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);
}
.mm-caixa figcaption { margin-top: 14px; text-align: center; color: rgba(255, 255, 255, .78); font: 500 14px/1.4 system-ui, sans-serif; letter-spacing: .02em; }
.mm-caixa__x {
	position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2);
	background: rgba(255, 255, 255, .08); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s;
}
.mm-caixa__x:hover { background: var(--mm-acento, #d7192d); transform: rotate(90deg); }
.mm-caixa__x:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.mm-caixa, .mm-caixa__quadro { transition: none; }
}