/* M09: links de contato legíveis sobre o fundo do rodapé e da página. */
.clmr-tel, .clmr-map-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.clmr-tel:hover, .clmr-map-link:hover { color: inherit; }
.contentContato a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Página de contato: foto da caixa d'água no topo, dados em cartões, formulário em painel e mapa em moldura. */
.oMotel:has(.contactPage)::before {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .2) 110px, rgba(30, 6, 12, .3) 210px, rgba(43, 8, 17, .65) 300px, rgba(43, 8, 17, .9) 380px, #2b0811 450px, #6b1224 100%),
		url(../img/caixa-dagua.jpg) center top / 100% auto no-repeat,
		#2b0811;
}
.oMotel .oMotelColiseum:has(.contactPage) .clmr-h1 { font-size: clamp(34px, 6vw, 50px); line-height: 1.15; text-shadow: 0 2px 8px rgba(0, 0, 0, .75), 0 0 20px rgba(196, 26, 54, .45); }
.oMotel .oMotelColiseum:has(.contactPage) h4 { margin: 8px 0 120px; color: #e2bc62; font-family: Sora, sans-serif; font-size: 16px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .85); }
.contactPage > .row { align-items: stretch; row-gap: 20px; }

.contactPage .contentContato { display: grid; gap: 12px; text-align: left; }
.contactPage .contentContato p.clmr-contato-card {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 16px;
	border: 1px solid rgba(226, 188, 98, .35);
	border-radius: 16px;
	background: rgba(0, 0, 0, .45);
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	transition: border-color .7s ease, transform .7s cubic-bezier(.25, .8, .25, 1);
}
@media (hover: hover) {
	.contactPage .contentContato p.clmr-contato-card:hover { border-color: #e2bc62; transform: translateY(-3px); transition-duration: .25s; }
}
.clmr-contato-card > i { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(226, 188, 98, .16); color: #e2bc62; font-size: 18px; }
.clmr-contato-texto { display: block; min-width: 0; }
.contactPage .contentContato p strong { display: block; margin-bottom: 2px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.contactPage .contentContato p br { display: none; }
.contactPage .contentContato a:not(.clmr-btn) { color: #e2bc62; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; text-decoration: none; }
.contactPage .contentContato a:not(.clmr-btn):hover { color: #e2bc62; text-decoration: underline; }
.contactPage .contentContato .clmr-tel { white-space: nowrap; }

.clmr-contato-fones { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 12px; margin-top: 6px; }
.clmr-contato-fone { display: block; }
.clmr-contato-fone + .clmr-contato-fone { padding-left: 12px; border-left: 1px solid rgba(226, 188, 98, .4); }
.clmr-contato-fone small { display: block; color: #f4efe6; font-size: 11px; line-height: 1.4; }

.clmr-contato-acoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 4px; }
.contactPage .contentContato .clmr-contato-acoes .clmr-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 12px; font-size: 14px; text-decoration: none; transition: transform .7s cubic-bezier(.25, .8, .25, 1), background-color .7s ease, color .7s ease; }
.contactPage .contentContato .clmr-contato-acoes .clmr-btn-wa { color: #05321c; }
.contactPage .contentContato .clmr-contato-acoes .clmr-btn-light { border-color: #e2bc62; background: rgba(43, 8, 17, .6); color: #fff; }
.contactPage .contentContato .clmr-contato-acoes .clmr-btn:active { transform: scale(1.05); transition-duration: .18s; }
.clmr-contato-acoes .clmr-btn i { font-size: 1.3em; line-height: 1; }
@media (hover: hover) {
	.contactPage .contentContato .clmr-contato-acoes .clmr-btn:hover { transform: scale(1.05); transition-duration: .18s; }
	.contactPage .contentContato .clmr-contato-acoes .clmr-btn-light:hover { background: #e2bc62; color: #22070d; }
}

.contactPage .wpcf7 { height: 100%; padding: 24px; border: 1px solid rgba(226, 188, 98, .35); border-radius: 20px; background: rgba(0, 0, 0, .45); box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }
.clmr-contato-titulo { margin: 0 0 16px; color: #fff; font-family: Sora, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.25; text-align: left; }
.contactPage .wpcf7-form p { margin: 0 0 12px; padding: 0; }
.contactPage .wpcf7-form input.wpcf7-form-control:not(.wpcf7-submit),
.contactPage .wpcf7-form textarea.wpcf7-form-control {
	display: block;
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid rgba(226, 188, 98, .45);
	border-radius: 12px;
	background: rgba(0, 0, 0, .4);
	color: #fff;
	font-size: 16px;
}
.contactPage .wpcf7-form textarea.wpcf7-form-control { height: 120px; line-height: 1.4; }
.contactPage .wpcf7-form .wpcf7-form-control::placeholder { color: #d9d2c3; opacity: 1; }
.contactPage .wpcf7-form .wpcf7-form-control:focus { border-color: #e2bc62; outline: none; }
.contactPage .wpcf7-form .wpcf7-submit {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 4px 0 0;
	padding: 10px 16px;
	border: 1.4px solid #a8162c;
	border-radius: 30px;
	background: linear-gradient(90deg, #c41a36 0%, #7d1226 100%);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	transition: transform .7s cubic-bezier(.25, .8, .25, 1);
}
.contactPage .wpcf7-form .wpcf7-submit:active { transform: scale(1.03); transition-duration: .18s; }
@media (hover: hover) {
	.contactPage .wpcf7-form .wpcf7-submit:hover { transform: scale(1.03); transition-duration: .18s; }
}

.boxMapa { margin-top: 0 !important; padding: 24px 16px 40px; }
.boxMapa iframe { display: block; width: 100%; max-width: 1130px; height: 380px; margin: 0 auto; border: 1px solid rgba(226, 188, 98, .5) !important; border-radius: 20px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }

/* Computador: título à esquerda sobre a foto, como em O Motel. */
@media (min-width: 992px) {
	.oMotel:has(.contactPage)::before {
		background:
			linear-gradient(180deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .1) 240px, rgba(43, 8, 17, .6) 390px, rgba(43, 8, 17, .9) 490px, #2b0811 550px, #6b1224 100%),
			linear-gradient(90deg, #16040a calc(100% - 680px), rgba(22, 4, 10, .75) calc(100% - 540px), rgba(22, 4, 10, 0) calc(100% - 300px)) left top / 100% 560px no-repeat,
			url(../img/caixa-dagua.jpg) right top / auto 1020px no-repeat,
			#2b0811;
	}
	.oMotel .oMotelColiseum:has(.contactPage) .container { text-align: left; }
	.oMotel .oMotelColiseum:has(.contactPage) .clmr-h1 { margin-top: 44px; font-size: clamp(52px, 5vw, 76px); text-align: left; }
	.oMotel .oMotelColiseum:has(.contactPage) .fa-sort-down { display: none; }
	.oMotel .oMotelColiseum:has(.contactPage) h4 { margin: 12px 0 130px; font-size: 19px; text-align: left; }
}
@media (max-width: 767px) {
	.oMotel:has(.contactPage) { padding: 170px 0 20px; }
	/*
	 * A foto sobe até o "M" de Coliseum quase encostar na barra do topo (o M está a 30,9% da largura da foto),
	 * e os dados descem para o muro aparecer. Ela se dissolve por completo antes de terminar.
	 */
	.oMotel:has(.contactPage)::before {
		background:
			linear-gradient(180deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .2) 110px, rgba(30, 6, 12, .2) 88vw, rgba(43, 8, 17, .55) 112vw, rgba(43, 8, 17, .88) 127vw, #2b0811 134vw, #6b1224 100%),
			url(../img/caixa-dagua.jpg) center calc(66px - 30.9vw) / 100% auto no-repeat,
			#2b0811;
	}
	.oMotel .oMotelColiseum:has(.contactPage) .clmr-h1 { margin-top: 56px; }
	.oMotel .oMotelColiseum:has(.contactPage) h4 { margin: 8px 0 34vw; }
	.contactPage > .row { margin: 0; }
	.contactPage > .row > [class*="col-"] { padding: 0; }
	.contactPage .wpcf7-form .row { margin: 0; }
	.contactPage .wpcf7-form [class*="col-"] { padding: 0; }
	/* Fontes menores nos cartões: o e-mail da gerência cabe em uma linha, inclusive em celular estreito. */
	.contactPage .contentContato p.clmr-contato-card { font-size: 13px; }
	.contactPage .contentContato a:not(.clmr-btn) { font-size: min(12.5px, 3.35vw); }
	.contactPage .contentContato a[href^="mailto:"] { overflow-wrap: normal; white-space: nowrap; }
	.contactPage .wpcf7 { padding: 20px 16px; }
	.boxMapa { padding: 16px 12px 30px; }
	.boxMapa iframe { height: 300px; }
}