/*
 * Peças compartilhadas pelas 6 landing pages: barra de rolagem em degradê, cor de seleção,
 * selo de informação provisória e vídeo em tela cheia.
 * Cada página pode trocar as cores redefinindo as variáveis --mm-* no seu próprio CSS.
 */
:root {
	--mm-acento: #d7192d;
	--mm-sb-trilho: #0d0a0b;
	--mm-sb-a: #ff4157;
	--mm-sb-b: #7a0c18;
	--mm-sel-fundo: #d7192d;
	--mm-sel-texto: #fff;
}

/* Barra de rolagem em degradê (Chrome, Edge, Safari). */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--mm-sb-trilho); }
::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--mm-sb-a), var(--mm-sb-b));
	border: 3px solid var(--mm-sb-trilho); border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--mm-sb-b), var(--mm-sb-a)); }
::-webkit-scrollbar-corner { background: var(--mm-sb-trilho); }
/* O Firefox não aceita degradê na barra; recebe a cor sólida. No Chrome, scrollbar-color anularia o degradê. */
@supports not selector(::-webkit-scrollbar) {
	html { scrollbar-color: var(--mm-sb-a) var(--mm-sb-trilho); }
}

::selection { background: var(--mm-sel-fundo); color: var(--mm-sel-texto); }

/* Selo para dados de exemplo (valores, datas, vagas) que ainda serão confirmados. */
.provisorio {
	display: inline-flex; align-items: center; gap: 0.45em; vertical-align: middle;
	padding: 0.32em 0.7em 0.3em; border: 1px dashed currentColor; border-radius: 999px;
	font: 700 10.5px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
	white-space: nowrap; opacity: 0.85; cursor: help;
}
.provisorio::before {
	content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
	animation: mm-pisca 1.6s ease-in-out infinite;
}
@keyframes mm-pisca { 50% { opacity: 0.25; } }
.mm-nota-provisoria { font-size: 12px; opacity: 0.7; }

/* Texto dividido em palavras/letras pelo base.js */
.mm-p { display: inline-block; white-space: nowrap; }
.mm-pi, .mm-l { display: inline-block; }
html.mm-travado { overflow: hidden; }

/* Vídeo em tela cheia */
.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); transform: rotate(90deg); }
.mm-caixa__x:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/*
 * Pop-up de reserva (reserva.js). Cada página pode mudar as cores redefinindo as variáveis em .mm-reserva.
 * A fonte vem da própria página.
 */
.mm-reserva {
	--rv-fundo: #120e0f; --rv-texto: #f7f3f0; --rv-suave: rgba(247, 243, 240, .62); --rv-acento: #d7192d;
	--rv-acento-2: #ff3347; --rv-borda: rgba(255, 255, 255, .12); --rv-campo: rgba(255, 255, 255, .05); --rv-erro: #ff7685;
	position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px;
	opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.mm-reserva.aberta { opacity: 1; pointer-events: auto; }
.mm-reserva__fundo { position: absolute; inset: 0; background: rgba(5, 3, 4, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mm-reserva__painel {
	position: relative; width: min(460px, 100%); max-height: calc(100svh - 32px); overflow: auto; margin: 0;
	padding: 34px 30px 24px; border-radius: 24px; border: 1px solid var(--rv-borda); color: var(--rv-texto);
	background:
		radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--rv-acento) 30%, transparent), transparent 60%),
		var(--rv-fundo);
	box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .2);
	transform: translateY(26px) scale(.96); transition: transform .55s cubic-bezier(.2, .9, .2, 1);
}
.mm-reserva.aberta .mm-reserva__painel { transform: none; }
.mm-reserva__x {
	position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
	border: 1px solid var(--rv-borda); background: transparent; color: inherit; cursor: pointer; transition: background .2s, transform .3s;
}
.mm-reserva__x:hover { background: var(--rv-acento); color: #fff; transform: rotate(90deg); }
.mm-reserva__selo {
	display: inline-block; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; background: var(--rv-acento); color: #fff;
	font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.mm-reserva__titulo { margin: 0 44px 6px 0; font-size: clamp(22px, 5.4vw, 28px); line-height: 1.12; letter-spacing: -.01em; }
.mm-reserva__turma { margin: 0; color: var(--rv-suave); font-size: 15px; }
.mm-reserva__preco { margin: 18px 0 22px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mm-reserva__preco span { color: var(--rv-suave); font-size: 14px; }
.mm-reserva__preco strong { font-size: clamp(34px, 9vw, 44px); line-height: 1; letter-spacing: -.02em; color: var(--rv-acento-2); }
.mm-reserva__campo { display: block; margin-bottom: 12px; }
.mm-reserva__campo span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--rv-suave); }
.mm-reserva__campo input {
	width: 100%; box-sizing: border-box; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--rv-borda);
	background: var(--rv-campo); color: var(--rv-texto); font: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s;
}
.mm-reserva__campo input::placeholder { color: var(--rv-suave); opacity: .7; }
.mm-reserva__campo input:focus { outline: none; border-color: var(--rv-acento-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rv-acento) 28%, transparent); }
.mm-reserva__campo input[aria-invalid='true'] { border-color: var(--rv-erro); }
.mm-reserva__erro { min-height: 1.3em; margin: 2px 0 10px; color: var(--rv-erro); font-size: 14px; font-weight: 600; }
.mm-reserva__enviar {
	position: relative; overflow: hidden; width: 100%; height: 58px; display: flex; align-items: center; justify-content: center; gap: 10px;
	border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--rv-acento-2), var(--rv-acento) 55%, #8f0f1d);
	color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
	box-shadow: 0 18px 40px -16px var(--rv-acento); transition: transform .25s, box-shadow .25s;
}
.mm-reserva__enviar::after {
	content: ''; position: absolute; inset: 0; transform: translateX(-120%);
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transition: transform .7s ease;
}
.mm-reserva__enviar:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -16px var(--rv-acento); }
.mm-reserva__enviar:hover::after { transform: translateX(120%); }
.mm-reserva__enviar svg { transition: transform .25s; }
.mm-reserva__enviar:hover svg { transform: translateX(4px); }
.mm-reserva__enviar:disabled { cursor: progress; opacity: .8; transform: none; }
.mm-reserva__enviar:focus-visible, .mm-reserva__x:focus-visible { outline: 2px solid var(--rv-texto); outline-offset: 3px; }
.mm-reserva__nota { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; color: var(--rv-suave); font-size: 12.5px; text-align: center; }

/* Contagem regressiva (reserva.js) */
[data-contagem-fim] { display: none; }
.encerrada [data-contagem-fim] { display: block; }

@media (prefers-reduced-motion: reduce) {
	.mm-caixa, .mm-caixa__quadro, .mm-reserva, .mm-reserva__painel { transition: none; }
	.provisorio::before { animation: none; }
}