/**
 * Seccao "10 · Information form".
 *
 * Frames 783:4654 (1440) e 783:19395 (402).
 *
 *   cartao   1320x835, raio 10, fundo #ffffff, borda #e4e7ec, duas metades de 659
 *   visual   padding 48/44, foto com veu, eyebrow em cima e o resto encostado em baixo
 *   campos   padding 48, gap 20, input de 56 com raio 5, fundo #f7f9fc, borda #e4e7ec
 *   rotulo   16/24/600 #101828   placeholder 16/24/400 #98a2b3
 *   mobile   uma coluna, campos todos empilhados, botao a toda a largura
 */

.els-form {
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	/* referencia para as medidas fluidas la dentro */
	container-type: inline-size;
}

/**
 * O cartao nao corta o que sai dele: as listas dos dropdowns abrem por cima e o
 * `overflow: hidden` comia-lhes o fim quando o campo estava ao pe do rodape do
 * cartao. Quem arredonda a foto agora e a propria foto, aqui em baixo.
 */
.els-form__card {
	display: flex;
	align-items: stretch;
	border: 1px solid #e4e7ec;
	border-radius: 10px;
	background-color: #ffffff;
}

/* ------------------------------------------------------------- o visual */

.els-form__visual {
	/* o raio interior do cartao: 10 do cartao menos 1 da borda */
	border-radius: 9px 0 0 9px;
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding: 48px 44px;
	background-color: #101828;
	background-size: cover;
	background-position: center;
	color: #ffffff;
	position: relative;
	isolation: isolate;
}

/* o veu do Figma: escuro em cima, azul Primary a meio, quase opaco em baixo */
.els-form__visual::before {
	content: "";
	position: absolute;
	inset: 0;
	/* segue os cantos da foto: sem isto o veu pinta-os em esquadria por cima */
	border-radius: inherit;
	z-index: -1;
	background-image: linear-gradient(
		180deg,
		rgba(16, 24, 40, .15) 0%,
		rgba(40, 97, 145, .62) 45%,
		rgba(16, 24, 40, .92) 100%
	);
}

/**
 * O pre-titulo do formulario segue o padrao do site: Urbanist bold 14, em
 * maiusculas, em todos os ecras. So a cor e propria da seccao - branco, porque
 * assenta sobre o painel escuro, como no Figma.
 */
.els-form .els-form__eyebrow {
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #ffffff;
}

.els-form__pitch {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.els-form .els-form__title {
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 42px;
	font-weight: 600;
	line-height: 1.19;
	letter-spacing: -0.01em;
	color: #ffffff;
	text-wrap: balance;
}

.els-form .els-form__lead {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: #b5d5f0;
}

.els-form__contact {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.els-form__contact li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #ffffff;
}

.els-form__contact svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

/* tres classes: o Global Kit pinta todo <a> com a cor de destaque */
.els-form .els-form__contact a,
.els-form__contact a {
	color: #ffffff;
	text-decoration: none;
}

.els-form__contact a:hover,
.els-form__contact a:focus-visible {
	text-decoration: underline;
}

/* ------------------------------------------------------------ os campos */

.els-form__fields {
	/* o outro par de cantos do cartao: sem isto o branco quadrado dos campos
	   passa por cima da curva da borda */
	border-radius: 0 9px 9px 0;
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 48px;
	background-color: #ffffff;
}

.els-form__row {
	display: flex;
	gap: 20px;
}

.els-form__row .els-form__field {
	flex: 1 1 0;
	min-width: 0;
}

.els-form__field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.els-form .els-form__label {
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: #101828;
}

.els-form__req {
	color: #d92d20;
	margin-left: 4px;
}

/* O tema e o Global Kit pintam campos por conta propria; tres classes chegam
   para os travar sem !important. */
.els-form .els-form__fields .els-form__input,
.els-form__input {
	width: 100%;
	min-height: 56px;
	box-sizing: border-box;
	padding: 15px 16px;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #101828;
	background-color: #f7f9fc;
	border: 1px solid #e4e7ec;
	border-radius: 5px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.els-form__input::placeholder {
	color: #98a2b3;
	opacity: 1;
}

.els-form__input:focus-visible {
	outline: none;
	border-color: #286191;
	box-shadow: 0 0 0 3px rgba(40, 97, 145, .18);
}

.els-form__input[aria-invalid="true"] {
	border-color: #d92d20;
}

.els-form__textarea {
	min-height: 136px;
	resize: vertical;
}

/* a seta do select e nossa: a nativa muda de forma em cada sistema */
.els-form__selectwrap {
	position: relative;
	display: block;
}

.els-form__select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 48px;
	cursor: pointer;
}

/**
 * O dropdown proprio.
 *
 * O <select> continua no formulario, so que fora da vista: e ele que leva o
 * valor e e enviado. O que se ve e o botao abaixo, com a lista por baixo. Sem
 * JS o <select> fica visivel e o site continua a funcionar.
 */
/* tres classes: a regra dos campos e `.els-form .els-form__fields
   .els-form__input`, e uma classe unica nao lhe tirava a largura */
.els-form .els-form__fields .els-form__select--oculto,
.els-form__select--oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	min-height: 0;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* tres classes: o Global Kit tem `.elementor-kit-5 button` e o tema pinta
   <button> por conta propria */
.els-form .els-form__selectwrap .els-form__combo,
.els-form__combo {
	display: flex;
	align-items: center;
	text-align: left;
	padding-right: 48px;
	cursor: pointer;
	background-color: #f7f9fc;
	color: #101828;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

.els-form__combo.is-vazio .els-form__combo-valor {
	color: #98a2b3;
}

.els-form__combo-valor {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.els-form__combo[aria-expanded="true"] {
	border-color: #286191;
	box-shadow: 0 0 0 3px rgba(40, 97, 145, .18);
}

.els-form__selectwrap.is-open .els-form__chevron {
	rotate: 180deg;
}

.els-form__list {
	position: absolute;
	overscroll-behavior: contain;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 264px;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: 6px;
	background-color: #ffffff;
	border: 1px solid #e4e7ec;
	border-radius: 5px;
	box-shadow: 0 12px 28px rgba(16, 24, 40, .12);
}

.els-form__option {
	padding: 10px 12px;
	border-radius: 5px;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #101828;
	cursor: pointer;
}

.els-form__option--vazia { color: #98a2b3; }

.els-form__option.is-active {
	background-color: #eaf2fb;
}

.els-form__option.is-selected {
	background-color: #286191;
	color: #ffffff;
	font-weight: 600;
}

.els-form__chevron {
	position: absolute;
	top: 50%;
	right: 16px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	color: #101828;
	pointer-events: none;
	transition: rotate .2s ease;
}

/* ------------------------------------------------------- consentimento */

.els-form__consent {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.els-form__consent input {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	margin: 0;
	accent-color: #286191;
	border: 1px solid #e4e7ec;
	border-radius: 5px;
	cursor: pointer;
}

.els-form .els-form__consent label {
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #475467;
	cursor: pointer;
}

.els-form__consent a {
	color: #286191;
	text-decoration: underline;
}

/* isco para robos: fora do ecra, mas sem display:none, que alguns ignoram */
.els-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* ----------------------------------------------------------- o rodape */

.els-form__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 4px;
}

.els-form .els-form__submit {
	flex: 0 0 auto;
	text-transform: uppercase;
	font-weight: 700;
}

.els-form__submit[disabled] {
	opacity: .6;
	cursor: progress;
}

.els-form__status {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: #475467;
	min-width: 0;
}

.els-form__status--erro { color: #d92d20; }
.els-form__status--ok   { color: #067647; }

/* quando corre bem, o formulario sai e fica so o agradecimento */
.els-form__fields.is-done .els-form__field,
.els-form__fields.is-done .els-form__row,
.els-form__fields.is-done .els-form__consent,
.els-form__fields.is-done .els-form__submit {
	display: none;
}

.els-form__fields.is-done .els-form__status {
	font-size: 18px;
	font-weight: 600;
	color: #101828;
}

/* --------------------------------------------------------- responsivo */

@media (max-width: 1024px) {
	.els-form__visual { padding: 40px 32px; gap: 32px; }
	.els-form__fields { padding: 32px; }
	.els-form .els-form__title { font-size: 34px; }
}

@media (max-width: 767px) {
	/**
	 * No frame 402 o cartao e uma coluna so: a foto em cima com o texto por
	 * baixo dela, e depois os campos todos empilhados, incluindo o nome e o
	 * email, que no desktop partilham a linha. O botao vai a largura toda.
	 */
	.els-form__card { flex-direction: column; }

	.els-form__visual {
		/* empilhado: a foto fica em cima, os campos em baixo */
		border-radius: 9px 9px 0 0;
		flex: 0 0 auto;
		gap: 14px;
		padding: 180px 20px 24px;
		justify-content: flex-end;
	}
	.els-form .els-form__title { font-size: 26px; line-height: 1.23; }
	.els-form .els-form__lead { font-size: 14px; line-height: 1.5; }
	.els-form__pitch { gap: 14px; }
	.els-form__contact { margin-top: 4px; gap: 10px; }
	.els-form__contact li { font-size: 15px; }

	.els-form__fields { border-radius: 0 0 9px 9px; flex: 0 0 auto; padding: 24px 20px; gap: 16px; }
	.els-form__row { flex-direction: column; gap: 16px; }
	.els-form .els-form__label { font-size: 15px; }
	.els-form .els-form__fields .els-form__input,
	.els-form__input { font-size: 15px; }
	.els-form .els-form__consent label { font-size: 14px; }

	.els-form__option { font-size: 15px; }
	.els-form__list { max-height: 220px; }

	.els-form__foot { flex-direction: column; align-items: stretch; }
	.els-form .els-form__submit { width: 100%; justify-content: space-between; }
	.els-form__status:empty { display: none; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 0px) /* ignorado a pedido do cliente, ver docs 4 sec. 8 */ {
	.els-form__input { transition: none; }
}

/* ============================== o formulario sozinho ============================== */

/**
 * Sem o lado da foto, o cartao e so os campos.
 *
 * Serve as paginas que ja tem o convite feito por fora - a Contact Us poe o
 * pre-titulo, o titulo, o texto e a foto a esquerda, e o formulario entra a
 * direita como um cartao branco. Aqui os campos deixam de estar limitados a
 * metade e ocupam o cartao todo.
 */
.els-form--so-campos .els-form__fields {
	flex: 1 1 100%;
}

/* no desenho o cartao sozinho respira um pouco mais por dentro */
.els-form--so-campos .els-form__fields { padding: 48px; border-radius: 9px; }

/**
 * O nome e o email deixam de partilhar a linha.
 *
 * Quando o cartao ocupa metade da pagina os dois lado a lado ficam apertados,
 * e no desenho da Contact Us cada um tem a linha toda para si.
 */
.els-form--so-campos .els-form__row { flex-direction: column; }

@media (max-width: 1024px) {
	.els-form--so-campos .els-form__fields { padding: 32px; }
}

@media (max-width: 767px) {
	.els-form--so-campos .els-form__fields { padding: 24px 20px; border-radius: 9px; }
}

/* a nota que substitui a mensagem no pedido de disponibilidade */
.els-form__nota {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #475467;
}

/**
 * O pedido de disponibilidade no telemovel.
 *
 * O frame 783:24898 muda o cartao: o paragrafo sai daqui e passa para a
 * introducao da pagina, e a faixa escura fica so com o titulo e os contactos -
 * uma tira de 154 em vez de meia pagina. A foto tambem sai e fica o azul
 * escuro liso; como a foto entra por atributo style, so um !important a tira.
 */
@media (max-width: 767px) {

	.els-form--disp .els-form__visual {
		background-image: none !important;
		justify-content: flex-start;
		gap: 14px;
		padding: 24px 20px;
	}
	.els-form--disp .els-form__visual::before { display: none; }

	.els-form--disp .els-form__eyebrow,
	.els-form--disp .els-form__lead { display: none; }

	.els-form--disp .els-form__title { font-size: 24px; line-height: 1.25; }
	.els-form--disp .els-form__pitch { gap: 14px; }
	.els-form--disp .els-form__contact { margin-top: 4px; gap: 10px; }
	.els-form--disp .els-form__contact li { font-size: 16px; }
}

/* a lista abre para cima quando nao ha espaco por baixo */
.els-form__selectwrap.is-up .els-form__list {
	top: auto;
	bottom: calc(100% + 6px);
}

/* O desenho do checkbox (.els-check) passou para els-base.css: o formulario
   de reserva usa-o e nao carrega esta folha. */

/**
 * Contact us: a foto ao lado do formulario acaba na mesma linha que ele.
 *
 * As duas colunas do heroi (ct2h002 a esquerda, ct2h008 a direita) eram
 * alinhadas ao topo e a foto tinha a altura da sua proporcao: sobrava por baixo
 * do cartao. Agora a linha estica as colunas a mesma altura e a foto ocupa o
 * que resta da coluna dela, recortada (`cover`) em vez de deformada. Quem manda
 * na altura e o formulario; os 320px sao o minimo da foto enquanto o formulario
 * do HubSpot ainda nao chegou, para a pagina quase nao saltar.
 *
 * So com as colunas lado a lado. Tres classes para passar a frente das regras
 * que o Elementor gera para estes elementos (`.elementor .e-ct2h001-s`).
 */
@media (min-width: 1025px) {
	.elementor .e-con[data-id="ct2h001"] {
		align-items: stretch;
	}

	.elementor .e-con[data-id="ct2h002"] > img {
		flex: 1 1 0;
		height: 0;
		min-height: 320px;
		object-fit: cover;
	}
}