/* ==========================================================================
   Botão "Book a Call" + popup de contacto — igual ao tema MINTER 2026
   (Figma 5079:1099). Independente do resto da página temporária.
   ========================================================================== */
:root {
	--mint: #8fffbb;
	--blue: #0883d1;
	--bordeaux: #871e34;
	--white: #fff;
	--serif: "Instrument Serif", Georgia, serif;
	--sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--gentle: cubic-bezier(0.25, 1, 0.5, 1);
	--u: min(1px, 100vw / 1920);
}

/* Botão da mockup: cápsula bordô, centrada em baixo (alinhada com o botão de som) */
.mc-book-call {
	position: fixed;
	left: 50%;
	bottom: 20px;
	z-index: 10;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	padding: 9px 10px;
	border: 1px solid var(--bordeaux);
	border-radius: 42px;
	background: var(--bordeaux);
	color: var(--white);
	font: 700 16px/normal var(--sans);
	text-decoration: none;
	white-space: nowrap;
	-webkit-font-smoothing: antialiased;
	transition: background-color 1s var(--gentle), color 1s var(--gentle), border-color 1s var(--gentle);
}
.mc-book-call:hover,
.mc-book-call:focus-visible {
	background-color: var(--white);
	border-color: var(--white);
	color: var(--bordeaux);
}
.mc-book-call:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

/* ------------------------------------------------------------------------ */
.contact-modal {
	width: min(calc(1486 * var(--u)), 100% - 32px);
	min-width: min(760px, 100% - 32px);
	max-width: none;
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: max(24px, 48 * var(--u));
	background: var(--bordeaux);
	color: var(--white);
	overflow: auto;
	overscroll-behavior: contain;
}
.contact-modal::backdrop {
	background: rgb(135 30 52 / 0.25);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.contact-modal[open] { animation: contact-in 0.8s var(--gentle); }
.contact-modal[open]::backdrop { animation: contact-fade 0.8s var(--gentle); }
.contact-modal.is-closing { animation: contact-out 0.35s ease-in forwards; }
.contact-modal.is-closing::backdrop { animation: contact-fade 0.35s ease-in reverse forwards; }
@keyframes contact-in { from { opacity: 0; transform: translateY(40px) scale(0.97); } }
@keyframes contact-out { to { opacity: 0; transform: translateY(24px) scale(0.98); } }
@keyframes contact-fade { from { opacity: 0; } }

.contact-modal__close {
	position: absolute;
	top: max(20px, 32 * var(--u));
	right: max(20px, 40 * var(--u));
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: 50%;
	background: transparent;
	color: var(--white);
	cursor: pointer;
	transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
.contact-modal__close span::before,
.contact-modal__close span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}
.contact-modal__close span::after { transform: translate(-50%, -50%) rotate(-45deg); }
.contact-modal__close:hover { background: var(--white); color: var(--bordeaux); }

.contact-form,
.contact-form__done {
	display: flex;
	flex-direction: column;
	gap: max(32px, 52 * var(--u));
	padding: max(48px, 120 * var(--u)) max(24px, 80 * var(--u)) max(40px, 100 * var(--u));
}
.contact-form[hidden],
.contact-form__done[hidden] { display: none; }
.contact-form__title {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: max(44px, 100 * var(--u));
	line-height: 1.1;
}
.contact-form__lead,
.contact-form__label {
	font-weight: 300;
	font-size: max(18px, 30 * var(--u));
	line-height: 1.2;
}
.contact-form__lead { margin-top: 8px; }
.contact-form__fields { display: flex; flex-direction: column; gap: max(24px, 32 * var(--u)); }
.contact-form__row { display: flex; flex-direction: column; gap: 16px; }
.contact-form__input {
	width: 100%;
	min-height: 48px;
	padding: 12px 8px 12px 13px;
	border: 1px solid var(--white);
	border-radius: 200px;
	background: transparent;
	color: var(--white);
	font: 300 16px/1.4 var(--sans);
	outline: none;
	transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
}
.contact-form__input--area {
	resize: none;
	field-sizing: content; /* cresce com o texto (browsers recentes) */
	max-height: 200px;
	border-radius: 24px;
}
.contact-form__input::placeholder { color: rgb(255 255 255 / 0.75); }
.contact-form__input:focus { background: rgb(255 255 255 / 0.08); }
.contact-form__input:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.contact-form__input[aria-invalid="true"] { border-color: var(--mint); }
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.contact-form__submit {
	align-self: flex-start;
	padding: 10px 20px;
	border: 0.5px solid var(--white);
	border-radius: 200px;
	background: transparent;
	color: var(--white);
	font: 400 max(18px, 24 * var(--u)) / 1.2 var(--sans);
	cursor: pointer;
	transition: background-color 0.3s ease-out, color 0.3s ease-out, opacity 0.3s;
}
.contact-form__submit:hover,
.contact-form__submit:focus-visible { background: var(--white); color: var(--bordeaux); }
.contact-form__submit[disabled] { opacity: 0.5; cursor: progress; }
.contact-form__status { font-size: 14px; color: var(--mint); }


/* Reset local (esta página não tem o reset do tema 2026) */
.contact-modal {
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
}
.contact-modal h2,
.contact-modal p { margin: 0; }
.contact-modal button,
.contact-modal input,
.contact-modal textarea { font-family: inherit; }
.contact-form__lead { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
	.mc-book-call,
	.contact-modal[open],
	.contact-modal[open]::backdrop,
	.contact-modal.is-closing,
	.contact-modal.is-closing::backdrop { animation: none; transition: none; }
}