/* M14: abertura de impacto em tela cheia; foto e vinho em uma composição só. */
.hero.clmr-hero {
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	height: auto;
	min-height: min(100svh, 880px);
	margin: -130px 0 0;
	padding: 340px 0 70px;
	background-position: center;
	background-size: cover;
}
/* Ícone com a saudação logo abaixo, centralizados: só no celular. No computador, a abertura fica sem os dois. */
@media (min-width: 701px) {
	.hero.clmr-hero .clmr-hero-bemvindo, .hero.clmr-hero .alignContenCenter:has(> h1)::before { display: none; }
	/* A abertura começa 130 px acima da tela, atrás do menu: com esses 130 px a mais, ela preenche a tela inteira e as promoções só aparecem ao descer. */
	.hero.clmr-hero { min-height: calc(100vh + 130px); min-height: calc(100svh + 130px); }
}
.hero.clmr-hero .clmr-hero-bemvindo { margin: 0 0 14px; color: #fff; font-family: Sora, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; text-align: center; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.hero.clmr-hero .clmr-hero-bemvindo::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 16px; background: url(../img/icone-coliseum.png) center / contain no-repeat; }
/* Com a saudação, o ícone vai junto com ela; sem a saudação, fica sozinho em cima do título. */
.hero.clmr-hero .alignContenCenter:has(> .clmr-hero-bemvindo)::before { display: none; }
/* A própria foto, em camada separada, com aproximação lenta. */
.hero.clmr-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: inherit;
	animation: clmr-hero-zoom 16s ease-out both;
}
.hero.clmr-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 64%, #000 100%),
		linear-gradient(90deg, rgba(0, 0, 0, .94) 0%, rgba(70, 10, 24, .68) 36%, rgba(70, 10, 24, 0) 66%);
	pointer-events: none;
}
/* A faixa seguinte cobre o último pixel da abertura: evita um fio da foto quando a altura é fracionada. */
.hero.clmr-hero + .boxPromocoesSuites { position: relative; z-index: 1; margin-top: -2px; }
@keyframes clmr-hero-zoom {
	from { transform: scale(1); }
	to { transform: scale(1.09); }
}
.hero.clmr-hero > .container { position: relative; z-index: 1; }
.hero.clmr-hero .alignContenCenter { justify-content: flex-start; width: 100%; margin: 0; }
/* Ícone do Coliseum em cima do título (celular), quando a saudação não existe. */
.hero.clmr-hero .alignContenCenter:has(> h1) { flex-direction: column; }
.hero.clmr-hero .alignContenCenter:has(> h1)::before {
	content: "";
	flex: none;
	align-self: flex-start;
	width: 64px;
	height: 64px;
	margin-bottom: 10px;
	border-radius: 16px;
	background: url(../img/icone-coliseum.png) center / contain no-repeat;
}
.hero.clmr-hero h1 {
	margin: 0 0 22px;
	color: #fff;
	font-size: clamp(50px, 6vw, 92px);
	line-height: 1.05;
	text-align: left;
	text-shadow: 0 0 34px rgba(232, 40, 76, .85), 0 3px 10px rgba(0, 0, 0, .75);
}
.hero.clmr-hero .fraseApresentacao {
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
	text-align: left;
}
.hero.clmr-hero .fraseApresentacao > img { display: none; }
.hero.clmr-hero .fraseApresentacao p { margin: 0 0 22px; padding: 0; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.45; text-align: left; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.hero.clmr-hero .fraseApresentacao .clmr-hero-place {
	order: -1;
	margin-bottom: 10px !important;
	color: #e2bc62;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
/* A frase em caixa escura com borda vinho, como no celular. */
.hero.clmr-hero .fraseApresentacao > p:not(.clmr-hero-place) {
	align-self: flex-start;
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	padding: 8px 16px;
	border: 1px solid rgba(142, 21, 38, .6);
	border-radius: 12px;
	background: rgba(15, 4, 7, .38);
	font-size: 16px;
	line-height: 1.4;
}
.hero.clmr-hero .clmr-hero-actions { justify-content: flex-start; gap: 12px; }
/* Os ramos da logo, sem o nome, ao lado do botão de reserva, centralizados na altura dos botões. */
.hero.clmr-hero .clmr-hero-actions { align-items: center; }
.hero.clmr-hero .clmr-hero-actions::after {
	content: "";
	flex: none;
	width: 200px;
	height: 41px;
	margin-left: 10px;
	background: url(../img/ramos.svg) left center / contain no-repeat;
}
.hero.clmr-hero .clmr-hero-actions .clmr-btn { flex: 0 1 auto; min-height: 54px; padding: 12px 28px; font-size: 16px; }
.hero.clmr-hero .clmr-btn-light { border-color: #e2bc62; background: rgba(43, 8, 17, .5); color: #fff; }
.hero.clmr-hero .clmr-btn-wa { box-shadow: 0 0 26px rgba(0, 255, 129, .35); }

@media (max-width: 700px) {
	.hero.clmr-hero { min-height: 92svh; padding: 240px 0 44px; background-position: center; }
	/* Ícone, título, local e frase centralizados. */
	.hero.clmr-hero .alignContenCenter:has(> h1)::before { align-self: center; width: 56px; height: 56px; margin-bottom: 10px; border-radius: 14px; }
	.hero.clmr-hero .clmr-hero-bemvindo::before { width: 56px; height: 56px; border-radius: 14px; }
	.hero.clmr-hero .fraseApresentacao, .hero.clmr-hero .fraseApresentacao p { width: 100%; text-align: center; text-wrap: balance; }
	/* Título centralizado, em duas linhas. */
	.hero.clmr-hero h1 { width: 100%; text-align: center; }
	.hero.clmr-hero h1 br, .hero.clmr-hero h1 .clmr-hero-recuo { display: none; }
	.hero.clmr-hero h1 .clmr-hero-linha { display: block; }
	/*
	 * Cada foto, deitada, é recortada em pé: este é o ponto de cada uma que fica no centro da tela.
	 * As que não aparecem aqui já ficam boas no centro. Foto nova entra centralizada.
	 */
	.hero.clmr-hero[style*="COL-134"] { background-position: 36% center; }
	.hero.clmr-hero[style*="COL-580"] { background-position: 35% center; }
	.hero.clmr-hero[style*="IMG_5173"] { background-position: 66% center; }
	.hero.clmr-hero[style*="COL-583"] { background-position: 34% center; }
	.hero.clmr-hero[style*="IMG_4899"] { background-position: 70% center; }
	.hero.clmr-hero[style*="IMG_5919"] { background-position: 28% center; }
	.hero.clmr-hero[style*="PL5"] { background-position: 30% center; }
	.hero.clmr-hero[style*="COL-670"] { background-position: 46% center; }
	.hero.clmr-hero[style*="COL-675"] { background-position: 40% center; }
	.hero.clmr-hero[style*="IMG_5233"] { background-position: 45% center; }
	.hero.clmr-hero[style*="IMG_4960"] { background-position: 40% center; }
	.hero.clmr-hero[style*="IMG_5142"] { background-position: 46% center; }
	.hero.clmr-hero[style*="IMG_5191"] { background-position: 42% center; }
	.hero.clmr-hero[style*="IMG_5236"] { background-position: 40% center; }
	.hero.clmr-hero[style*="IMG_5241"] { background-position: 46% center; }
	.hero.clmr-hero[style*="muro-coliseum"] { background-position: 46% center; }
	/*
	 * Abertura acolhedora: foto mais clara e quente, luz âmbar vindo de cima e sombra só atrás do texto,
	 * em vez de escurecer a foto inteira. O preto fica só no fim, para emendar com a faixa seguinte.
	 */
	.hero.clmr-hero::after { filter: brightness(1.14) saturate(1.14) sepia(.08); }
	.hero.clmr-hero::before {
		background:
			linear-gradient(180deg, rgba(0, 0, 0, 0) 86%, #000 100%),
			radial-gradient(ellipse 95% 30% at 50% 46%, rgba(28, 12, 6, .58) 0%, rgba(28, 12, 6, 0) 100%),
			radial-gradient(ellipse 120% 45% at 50% 0%, rgba(255, 196, 120, .22) 0%, rgba(255, 196, 120, 0) 100%),
			linear-gradient(180deg, rgba(25, 10, 5, .22) 0%, rgba(25, 10, 5, .1) 30%, rgba(25, 10, 5, .22) 70%, rgba(0, 0, 0, .45) 100%);
	}
	.hero.clmr-hero .fraseApresentacao p { text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
	.hero.clmr-hero .clmr-hero-bemvindo {
		display: block;
		width: 100%;
		margin: 0 0 26px;
		color: #fff;
		font-family: Sora, sans-serif;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.3;
		text-align: center;
		text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
	}
	/* A frase, em caixa escura com borda vinho, no meio exato entre o local e os botões: 32 px acima e abaixo. */
	.hero.clmr-hero .fraseApresentacao .clmr-hero-place { margin-bottom: 32px !important; font-size: 9px; letter-spacing: .06em; line-height: 1.3; }
	.hero.clmr-hero .fraseApresentacao > p:not(.clmr-hero-place) {
		align-self: center;
		box-sizing: border-box;
		width: fit-content;
		max-width: 100%;
		margin: 0 auto 22px;
		padding: 6px 14px;
		border: 1px solid rgba(142, 21, 38, .6);
		border-radius: 12px;
		background: rgba(15, 4, 7, .38);
		font-size: 13.5px;
		line-height: 1.4;
	}
	.hero.clmr-hero h1 { margin-left: 0; font-size: clamp(30px, 9vw, 54px); text-shadow: 0 2px 6px rgba(0, 0, 0, .6), 0 0 8px rgba(196, 26, 54, .55), 0 0 18px rgba(196, 26, 54, .45), 0 0 36px rgba(125, 18, 38, .55); } /* Neon vinho fraco atrás do título. */
	/* Um botão em cima do outro, na largura do texto, mais abaixo e mais afastados. */
	.hero.clmr-hero .clmr-hero-actions { flex-direction: column; flex-wrap: nowrap; gap: 16px; margin-top: 10px; }
	.hero.clmr-hero .clmr-hero-actions .clmr-btn { flex: none; width: 100%; min-height: 44px; padding: 8px 12px; font-size: 14px; line-height: 1.15; white-space: nowrap; }
	/* Os ramos, centralizados. */
	.hero.clmr-hero .clmr-hero-actions::after {
		flex: none;
		align-self: center;
		width: 62%;
		max-width: 260px;
		height: auto;
		aspect-ratio: 148 / 30;
		margin: 12px 0 0;
		background: url(../img/ramos.svg) center / contain no-repeat;
	}
}
.hero.clmr-hero .clmr-hero-actions .clmr-btn-wa { gap: 8px; }
.hero.clmr-hero .clmr-hero-actions .clmr-btn-wa .fa-whatsapp { font-size: 1.45em; line-height: 1; }
/* Botões da abertura: com o mouse ou o dedo em cima, vêm para a frente; a volta é lenta e suave. */
.hero.clmr-hero .clmr-hero-actions .clmr-btn {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	transition: transform .7s cubic-bezier(.25, .8, .25, 1), box-shadow .7s ease, background-color .7s ease, color .7s ease;
}
.hero.clmr-hero .clmr-hero-actions .clmr-btn.clmr-btn-pressed { transform: scale(1.06); transition-duration: .18s; }
.hero.clmr-hero .clmr-hero-actions .clmr-btn-wa.clmr-btn-pressed { box-shadow: 0 8px 26px rgba(0, 255, 129, .55); }
.hero.clmr-hero .clmr-hero-actions .clmr-btn-light.clmr-btn-pressed { background: #e2bc62; box-shadow: 0 8px 24px rgba(226, 188, 98, .45); color: #22070d; }
@media (hover: hover) {
	.hero.clmr-hero .clmr-hero-actions .clmr-btn:hover { transform: scale(1.06); transition-duration: .18s; }
	.hero.clmr-hero .clmr-hero-actions .clmr-btn-wa:hover { box-shadow: 0 8px 26px rgba(0, 255, 129, .55); }
	.hero.clmr-hero .clmr-hero-actions .clmr-btn-light:hover { background: #e2bc62; box-shadow: 0 8px 24px rgba(226, 188, 98, .45); color: #22070d; }
}
@media (prefers-reduced-motion: reduce) {
	.hero.clmr-hero .clmr-hero-actions .clmr-btn { transition: none; }
	.hero.clmr-hero::after { animation: none; }
}