/* ==========================================================================
   Embracom — dobras da home

   Cada cena tem dois layouts:
   - base: tudo parado e em fluxo normal (editor do Elementor, "reduzir
     movimento" no sistema, sem JavaScript);
   - html.em-anima: o layout do design, com as cenas presas na tela
     (sticky) e os elementos posicionados pela tela; o assets/js/theme.js
     move tudo conforme a rolagem.
   O corte do celular (819.98px) e o mesmo do script.
   ========================================================================== */

/* ==========================================================================
   01 Hero
   ========================================================================== */

.em-hero {
	position: relative;
	background: var(--em-blue);
	color: var(--em-ink);
}

.em-hero__pin {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 5vh;
	min-height: 100vh;
	padding: clamp(110px, 18vh, 180px) 4vw 8vh;
	overflow: hidden;
	background: var(--em-blue);
}

.em-hero__forma {
	position: absolute;
	right: -8vw;
	top: 14vh;
	width: 46vw;
	height: 34vh;
	border-radius: 34vh 0 34vh 0;
	background: var(--em-accent);
}

.em-hero__etiqueta {
	position: relative;
	order: 1;
	color: #DCE2EE;
}

.em-body .em-hero__titulo {
	position: relative;
	order: 2;
	display: flex;
	flex-direction: column;
	gap: 1.4vh;
	color: var(--em-ink);
	font-weight: inherit;
}

.em-hero__base {
	display: flex;
	flex-direction: column;
	gap: 1.4vh;
}

.em-hero__a,
.em-hero__b {
	display: block;
	font: 400 clamp(22px, 2.8vw, 44px)/1.1 var(--em-sans);
	letter-spacing: -.02em;
}

.em-hero__b {
	margin-top: 3vh;
}

.em-hero__f,
.em-hero__d {
	display: block;
	font: 800 12.4vw/.86 var(--em-sans);
	letter-spacing: -.045em;
	white-space: nowrap;
}

.em-hero__aux {
	position: relative;
	order: 3;
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 520px;
}

.em-hero__texto {
	color: #E4E7EE;
	font: 400 clamp(16px, 1.3vw, 20px)/1.5 var(--em-sans);
	text-wrap: pretty;
}

.em-hero__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
}

.em-hero__dica {
	display: none;
}

/* Animado ------------------------------------------------------------------ */

.em-anima .em-hero {
	height: calc(220vh * var(--em-len));
}

.em-anima .em-hero__pin {
	position: sticky;
	top: 0;
	display: block;
	height: 100vh;
	min-height: 0;
	padding: 0;
}

.em-anima .em-hero__forma {
	left: 0;
	top: 0;
	right: auto;
	width: 64vw;
	height: 50vh;
	transform: translate(72vw, 12vh);
	border-radius: 50vh 0 50vh 0;
	will-change: transform, width, height;
}

.em-anima .em-hero__etiqueta {
	position: absolute;
	left: 4vw;
	top: 17vh;
}

.em-anima .em-hero__aux {
	position: absolute;
	left: 4vw;
	top: 23vh;
	width: min(420px, 40vw);
	max-width: none;
}

.em-anima .em-hero__titulo {
	position: static;
	display: block;
}

.em-anima .em-hero__base {
	position: absolute;
	left: 4vw;
	right: 4vw;
	bottom: 7vh;
	gap: 2vh;
}

.em-anima .em-hero__f {
	line-height: .82;
	transform-origin: 0 100%;
}

.em-anima .em-hero__b {
	position: absolute;
	left: 4vw;
	top: calc(50vh - 4.4em);
	margin: 0;
	opacity: 0;
}

.em-anima .em-hero__d {
	position: absolute;
	left: 4vw;
	top: calc(67vh - .5em);
	font-size: min(15vw, 30vh);
	line-height: 1;
	color: var(--em-bg);
	transform: translateX(110vw);
}

.em-anima .em-hero__dica {
	display: block;
	position: absolute;
	right: 4vw;
	bottom: 5vh;
	color: #DCE2EE;
}

@media (max-width: 819.98px) {
	.em-anima .em-hero__aux {
		top: 22vh;
		width: 92vw;
	}

	.em-anima .em-hero__d {
		top: calc(65vh - .5em);
	}
}

/* ==========================================================================
   02 Sobre
   ========================================================================== */

.em-sobre {
	position: relative;
	background: var(--em-accent);
	color: var(--em-bg);
}

.em-sobre__pin {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 5vh;
	padding: 14vh 4vw 10vh;
	overflow: hidden;
	background: var(--em-accent);
}

.em-sobre__titulo {
	font: 800 min(6.4vw, 12vh)/.94 var(--em-sans);
	letter-spacing: -.05em;
}

.em-sobre__linha {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 5vh 6vw;
	margin-top: 4vh;
}

.em-sobre__texto {
	max-width: 400px;
	font: 500 clamp(17px, 1.4vw, 22px)/1.4 var(--em-sans);
	letter-spacing: -.01em;
	text-wrap: pretty;
}

.em-sobre__num {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.em-sobre__valor {
	font: 800 min(10vw, 18vh)/.84 var(--em-sans);
	letter-spacing: -.055em;
}

.em-sobre__azul {
	display: none;
}

@media (max-width: 819.98px) {
	.em-sobre__titulo {
		font-size: 11vw;
	}
}

/* Animado ------------------------------------------------------------------ */

.em-anima .em-sobre {
	height: calc(200vh * var(--em-len));
}

.em-anima .em-sobre__pin {
	position: sticky;
	top: 0;
	display: block;
	height: 100vh;
	padding: 0;
}

.em-anima .em-sobre__etiqueta {
	position: absolute;
	left: 4vw;
	top: 14vh;
}

.em-anima .em-sobre__titulo {
	position: absolute;
	left: 4vw;
	right: 4vw;
	top: 20vh;
}

.em-anima .em-sobre__titulo .em-mascara__linha {
	transform: translateY(105%);
}

.em-anima .em-sobre__linha {
	position: absolute;
	left: 4vw;
	right: 4vw;
	bottom: 9vh;
	margin: 0;
}

.em-anima .em-sobre [data-p="f"] {
	opacity: 0;
}

.em-anima .em-sobre__azul {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	background: var(--em-blue);
	will-change: transform, width, height;
}

@media (max-width: 819.98px) {
	.em-anima .em-sobre__titulo {
		top: 18vh;
	}

	.em-anima .em-sobre__linha {
		bottom: 6vh;
	}
}

/* ==========================================================================
   03 Solucoes
   ========================================================================== */

.em-sol {
	position: relative;
	background: var(--em-blue);
	color: var(--em-ink);
}

.em-sol__pin {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12vh;
	padding: 16vh 4vw 14vh;
	overflow: hidden;
	background: var(--em-blue);
}

.em-sol__g,
.em-sol__media,
.em-sol__idx,
.em-sol__w {
	display: none;
}

.em-sol__intro {
	display: flex;
	flex-direction: column;
	gap: 4vh;
}

.em-sol__h2 {
	font: 800 max(30px, min(7vw, 12.6vh))/.92 var(--em-sans);
	letter-spacing: -.05em;
}

.em-sol__sub {
	max-width: 520px;
	font: 500 clamp(18px, 1.8vw, 28px)/1.2 var(--em-sans);
	letter-spacing: -.015em;
}

.em-sol__lista {
	display: flex;
	flex-direction: column;
	gap: 12vh;
}

.em-sol__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 38vw);
	grid-template-areas: "t f" "c f";
	align-items: start;
	gap: 0 6vw;
}

.em-sol__titulo {
	grid-area: t;
	align-self: end;
	font: 800 min(6.6vw, 13vh)/.88 var(--em-sans);
	letter-spacing: -.05em;
}

.em-sol__corpo {
	grid-area: c;
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 440px;
	margin-top: 5vh;
}

.em-sol__texto {
	font: 400 clamp(16px, 1.25vw, 19px)/1.5 var(--em-sans);
	text-wrap: pretty;
}

.em-sol .em-sol__tags {
	color: #DCE2EE;
	font-size: 11px;
	line-height: 1.7;
	letter-spacing: .12em;
}

.em-sol__foto {
	grid-area: f;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: clamp(60px, 10vw, 200px) 0 clamp(60px, 10vw, 200px) 0;
	background: var(--em-blue-media);
}

.em-sol__item:nth-child(even) .em-sol__foto {
	border-radius: 0 clamp(60px, 10vw, 200px) 0 clamp(60px, 10vw, 200px);
}

.em-body .em-sol__foto img,
.em-body .em-sol__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.em-sol__fecho {
	display: flex;
	flex-direction: column;
	gap: 6vh;
}

.em-sol__eco {
	display: flex;
	flex-direction: column;
	gap: .1em;
	font: 800 min(4.6vw, 8.4vh)/1 var(--em-sans);
	letter-spacing: -.045em;
}

.em-sol__eco li:nth-child(even) {
	color: transparent;
	-webkit-text-stroke: 2px var(--em-ink);
}

.em-sol__eco-txt {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-self: flex-end;
	max-width: 560px;
	padding: clamp(28px, 4vw, 56px);
	border-radius: clamp(40px, 6vw, 90px) 0 clamp(40px, 6vw, 90px) 0;
	background: var(--em-accent);
	color: var(--em-bg);
}

.em-sol__eco-titulo {
	font: 800 max(28px, min(4.4vw, 8vh))/.92 var(--em-sans);
	letter-spacing: -.05em;
}

.em-sol__eco-texto {
	max-width: 380px;
	font: 500 clamp(15px, 1.15vw, 18px)/1.45 var(--em-sans);
	text-wrap: pretty;
}

@media (max-width: 819.98px) {
	.em-sol__item {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "t" "c" "f";
		gap: 0;
	}

	.em-sol__titulo {
		font-size: 12.4vw;
	}

	.em-sol__foto {
		margin-top: 5vh;
	}

	.em-sol__eco {
		font-size: 7.6vw;
	}
}

/* Animado ------------------------------------------------------------------ */

.em-anima .em-sol {
	height: calc(420vh * var(--em-len));
}

.em-anima .em-sol__pin {
	position: sticky;
	top: 0;
	display: block;
	height: 100vh;
	padding: 0;
}

.em-anima .em-sol__g {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 30vw;
	height: 12vh;
	transform: translate(70vw, 58vh);
	background: var(--em-accent);
	will-change: transform, width, height;
}

.em-anima .em-sol__media {
	display: block;
	position: absolute;
	left: 58vw;
	top: 16vh;
	width: 38vw;
	height: 68vh;
	overflow: hidden;
	border-radius: 34vh 0 34vh 0;
	background: var(--em-blue-media);
	opacity: 0;
}

.em-sol__slide {
	position: absolute;
	inset: 0;
}

.em-sol__slide + .em-sol__slide {
	clip-path: inset(100% 0 0 0);
}

.em-anima .em-sol__intro {
	position: absolute;
	left: 4vw;
	right: 4vw;
	top: 15vh;
}

.em-anima .em-sol__idx {
	display: block;
	position: absolute;
	left: 4vw;
	top: 15vh;
	opacity: 0;
}

.em-anima .em-sol__lista,
.em-anima .em-sol__fecho {
	display: contents;
}

.em-anima .em-sol__item {
	position: absolute;
	left: 4vw;
	right: 4vw;
	top: 21vh;
	display: block;
}

.em-anima .em-sol__foto {
	display: none;
}

.em-anima .em-sol__item .em-mascara__linha {
	transform: translateY(105%);
}

.em-anima .em-sol__corpo {
	opacity: 0;
}

.em-anima .em-sol__eco {
	position: absolute;
	left: 4vw;
	top: 18vh;
	white-space: nowrap;
}

.em-anima .em-sol__eco li {
	opacity: 0;
}

.em-anima .em-sol__eco-txt {
	position: absolute;
	left: 62vw;
	top: 62vh;
	width: 30vw;
	max-width: none;
	padding: 0;
	border-radius: 0;
	background: none;
	opacity: 0;
}

.em-anima .em-sol__w {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	background: var(--em-ink);
	will-change: transform, width, height;
}

@media (max-width: 819.98px) {
	.em-anima .em-sol__item {
		top: 20vh;
	}

	.em-anima .em-sol__media {
		left: 4vw;
		top: 70vh;
		width: 92vw;
		height: 24vh;
	}

	.em-anima .em-sol__eco {
		top: 16vh;
	}

	.em-anima .em-sol__eco-txt {
		left: 9vw;
		top: 62vh;
		width: 82vw;
	}
}

/* ==========================================================================
   04 Projetos
   ========================================================================== */

.em-proj {
	position: relative;
	background: var(--em-ink);
	color: var(--em-bg);
}

.em-proj__faixa {
	overflow: hidden;
	padding: 12vh 0 2vh;
}

.em-proj__trilho {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .1em 3vw;
	padding: 0 4vw;
	font: 800 min(8vw, 14vh)/1 var(--em-sans);
	letter-spacing: -.05em;
	white-space: nowrap;
}

.em-proj__folha {
	flex: none;
	width: 12vw;
	height: .46em;
	border-radius: .46em 0 .46em 0;
	background: var(--em-accent);
}

.em-proj__folha--azul {
	border-radius: 0 .46em 0 .46em;
	background: var(--em-blue);
}

.em-proj__palavra--caixa {
	padding: .04em .28em .06em;
	border-radius: .8em 0 .8em 0;
	background: var(--em-bg);
	color: var(--em-ink);
}

.em-proj__palavra--contorno {
	color: transparent;
	-webkit-text-stroke: 2px var(--em-bg);
}

.em-proj__palavra--azul {
	color: var(--em-blue);
}

.em-proj__cab {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 24px;
	padding: 6vh 4vw 4vh;
}

.em-proj__cab-txt {
	display: flex;
	flex-direction: column;
	gap: 3vh;
}

.em-h2 {
	font-size: max(32px, min(5.4vw, 92px));
}

/* Case em destaque -------------------------------------------------------- */

.em-dest {
	position: relative;
}

.em-dest__pin {
	position: relative;
	height: 90vh;
	min-height: 520px;
	overflow: hidden;
	color: var(--em-ink);
}

.em-body .em-dest__mascara {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	background: #C9CBCC;
}

.em-dest__img {
	position: absolute;
	inset: 0;
	display: block;
}

.em-body .em-dest__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.em-dest__veu {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(10, 11, 13, .78) 0%, rgba(10, 11, 13, .42) 38%, rgba(10, 11, 13, .42) 62%, rgba(10, 11, 13, .88) 100%);
	pointer-events: none;
}

.em-dest__txt {
	position: absolute;
	left: 4vw;
	top: 12vh;
	display: flex;
	flex-direction: column;
	gap: 2.6vh;
	color: var(--em-ink);
	pointer-events: none;
}

.em-dest__titulo {
	font: 800 max(30px, min(5.6vw, 10.6vh))/.9 var(--em-sans);
	letter-spacing: -.05em;
}

.em-dest__info {
	position: absolute;
	left: 4vw;
	right: 4vw;
	bottom: 7vh;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 24px;
	color: var(--em-ink);
}

.em-dest__tags {
	line-height: 1.6;
}

/* Grade de cases ----------------------------------------------------------- */

.em-proj__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	align-items: start;
	gap: 10vh 3vw;
	padding: 14vh 4vw 30vh;
	background: var(--em-bg);
	color: var(--em-ink);
}

.em-case {
	display: flex;
	flex-direction: column;
	gap: 2.4vh;
}

@media (min-width: 820px) {
	.em-case:nth-child(3n+2) {
		margin-top: 14vh;
	}
}

.em-body .em-case__foto {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 4vh 0 4vh 0;
	background: #16181C;
}

.em-body .em-case--inv .em-case__foto {
	border-radius: 0 4vh 0 4vh;
}

.em-case__img {
	position: absolute;
	inset: 0;
	display: block;
}

.em-body .em-case__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.em-case__rotulo {
	color: #8A8D93;
}

.em-case__titulo {
	font: 800 clamp(28px, 2.6vw, 42px)/.95 var(--em-sans);
	letter-spacing: -.04em;
}

.em-case__tags {
	color: #B4B6BA;
	font: 400 15px/1.4 var(--em-sans);
}

/* Animado ------------------------------------------------------------------ */

.em-anima .em-proj__trilho {
	flex-wrap: nowrap;
	width: max-content;
	padding-right: 0;
	font-size: min(11vw, 19vh);
	will-change: transform;
}

.em-anima .em-dest {
	height: calc(220vh * var(--em-len));
}

.em-anima .em-dest__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	min-height: 0;
}

.em-anima .em-dest__mascara {
	inset: auto;
	left: 0;
	top: 0;
	width: 40vw;
	height: 44vh;
	transform: translate(56vw, 44vh);
	border-radius: 44vh 0 44vh 0;
	will-change: transform, width, height;
}

.em-anima .em-dest__img {
	inset: auto;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
}

.em-anima .em-dest__txt {
	top: 18vh;
	color: var(--em-bg);
}

.em-anima .em-dest__info {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 819.98px) {
	.em-anima .em-dest__txt {
		top: 16vh;
	}
}

/* ==========================================================================
   05 Metodo
   ========================================================================== */

.em-metodo {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 10vh;
	margin-top: -16vh;
	padding: 16vh 4vw 10vh;
	background: var(--em-ink);
	color: var(--em-bg);
}

.em-metodo__cab {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 32px;
}

.em-metodo__cab-txt {
	display: flex;
	flex-direction: column;
	gap: 3vh;
}

.em-metodo__titulo {
	max-width: 15ch;
	text-wrap: balance;
}

.em-metodo__frase {
	display: flex;
	align-items: center;
	gap: 14px;
	font: 500 clamp(18px, 1.8vw, 28px)/1.2 var(--em-sans);
	letter-spacing: -.015em;
}

.em-metodo__folha {
	flex: none;
	width: 44px;
	height: 16px;
	border-radius: 16px 0 16px 0;
	background: var(--em-blue);
}

.em-metodo__passos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 5vh 2vw;
}

.em-metodo__passo {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.em-metodo__trilho {
	display: block;
	height: 2px;
	background: rgba(10, 11, 13, .12);
}

.em-metodo__barra {
	display: block;
	height: 100%;
	background: var(--em-blue);
	transform-origin: 0 50%;
}

.em-anima .em-metodo__barra {
	transform: scaleX(0);
}

.em-metodo__num {
	color: var(--em-blue);
}

.em-metodo__etapa {
	font: 700 clamp(20px, 1.6vw, 26px)/1.08 var(--em-sans);
	letter-spacing: -.025em;
}

.em-metodo__texto {
	color: #3E4146;
	font: 400 15px/1.45 var(--em-sans);
}

/* ==========================================================================
   06 Clientes e depoimentos
   ========================================================================== */

.em-cli {
	padding: 0 4vw 12vh;
	background: var(--em-ink);
	color: var(--em-bg);
}

.em-cli__caixa {
	display: flex;
	flex-direction: column;
	gap: 7vh;
	padding: 10vh 0 9vh;
	overflow: hidden;
	border-radius: 14vh 0 14vh 0;
	background: var(--em-blue);
	color: var(--em-ink);
}

.em-cli__cab {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 24px;
	padding: 0 5vw;
}

.em-cli__titulo {
	max-width: 18ch;
	font: 800 max(28px, min(4.6vw, 78px))/.94 var(--em-sans);
	letter-spacing: -.05em;
}

.em-cli__faixas {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.em-cli__faixa {
	overflow: hidden;
}

.em-cli__trilho {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	padding: 0 5vw;
}

.em-cli__logo {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(160px, 14vw, 220px);
	height: clamp(80px, 7vw, 110px);
	overflow: hidden;
	border-radius: 26px 0 26px 0;
	background: #FFFFFF;
}

.em-cli__logo--b {
	border-radius: 0 26px 0 26px;
}

.em-cli__logo[data-copia] {
	display: none;
}

.em-body .em-cli__logo img {
	width: 72%;
	height: 72%;
	object-fit: contain;
	filter: grayscale(1) contrast(1.1);
	opacity: .6;
	transition: filter .4s, opacity .4s;
}

.em-body .em-cli__logo:hover img {
	filter: none;
	opacity: 1;
}

.em-anima .em-cli__trilho {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	padding: 0;
	will-change: transform;
}

.em-anima .em-cli__logo[data-copia] {
	display: flex;
}

.em-cli__deps {
	display: flex;
	flex-direction: column;
	gap: 5vh;
	padding: 0 5vw;
}

.em-cli__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 5vh 3vw;
}

.em-dep {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-top: 28px;
	border-top: 1px solid rgba(238, 237, 232, .3);
}

.em-dep__aspas {
	height: 36px;
	color: var(--em-accent);
	font: 800 72px/.6 var(--em-sans);
}

.em-body .em-dep__texto {
	border: 0;
	quotes: none;
	font: 500 clamp(17px, 1.3vw, 21px)/1.45 var(--em-sans);
	letter-spacing: -.01em;
	text-wrap: pretty;
}

.em-dep__autor {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: auto;
}

.em-dep__nome {
	font: 700 16px/1.2 var(--em-sans);
}

.em-dep__empresa {
	color: #DCE2EE;
	line-height: 1.4;
}

/* ==========================================================================
   07 Contato
   ========================================================================== */

.em-contato-fundo {
	background: var(--em-ink);
}

.em-contato {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	align-items: start;
	gap: 8vh 5vw;
	min-height: 100vh;
	padding: 18vh 4vw 12vh;
	overflow: hidden;
	background: var(--em-accent);
	color: var(--em-bg);
}

.em-contato__chamada {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 4vh;
}

.em-contato__titulo {
	max-width: 20ch;
	font: 800 max(30px, min(4.2vw, 72px))/.95 var(--em-sans);
	letter-spacing: -.045em;
	text-wrap: balance;
}

.em-contato__texto {
	max-width: 480px;
	font: 500 clamp(17px, 1.35vw, 21px)/1.45 var(--em-sans);
	text-wrap: pretty;
}

.em-contato__caixa {
	padding: clamp(28px, 4vw, 56px);
	border-radius: min(12vw, 120px) 0 min(12vw, 120px) 0;
	background: var(--em-blue);
	color: var(--em-ink);
}

.em-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.em-form__duplo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 22px 16px;
}

.em-campo {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.em-campo__rotulo {
	font: 500 12px/1 var(--em-mono-f);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.em-campo__opc {
	color: #C9D3E6;
	font: 400 13px/1 var(--em-sans);
	letter-spacing: 0;
	text-transform: none;
}

.em-body .em-campo__input {
	width: 100%;
	margin: 0;
	padding: 15px 16px;
	border: 1px solid rgba(238, 237, 232, .28);
	border-radius: 14px 0 14px 0;
	background-color: rgba(10, 11, 13, .18);
	color: var(--em-ink);
	font: 400 16px/1.3 var(--em-sans);
	outline: none;
	transition: border-color .3s, background-color .3s;
}

.em-body .em-campo__input:focus,
.em-body .em-campo__input:focus-visible {
	border-color: var(--em-accent);
	background-color: rgba(10, 11, 13, .3);
	outline: none;
}

.em-body .em-campo__input[aria-invalid="true"] {
	border-color: #FFB4A8;
}

.em-body .em-campo__select {
	padding-right: 44px;
	-webkit-appearance: none;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--em-ink) 50%), linear-gradient(135deg, var(--em-ink) 50%, transparent 50%);
	background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
	background-size: 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.em-campo__select option {
	color: var(--em-bg);
}

.em-body .em-campo__area {
	min-height: 120px;
	resize: vertical;
}

.em-form__isca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.em-form__aviso {
	color: #DCE2EE;
	font: 400 13px/1.5 var(--em-sans);
	text-wrap: pretty;
}

.em-body .em-form__aviso a {
	color: var(--em-ink);
	text-decoration: underline;
}

.em-form__erro {
	padding: 12px 16px;
	border-left: 3px solid #FFB4A8;
	background: rgba(10, 11, 13, .3);
	font: 500 14px/1.4 var(--em-sans);
}

.em-form__erro[hidden],
.em-form__ok[hidden] {
	display: none;
}

.em-body .em-btn--envio {
	align-self: flex-start;
}

.em-form__ok {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 22px;
	min-height: 420px;
}

.em-form__folha {
	display: block;
	width: 64px;
	height: 24px;
	border-radius: 24px 0 24px 0;
	background: var(--em-accent);
}

.em-form__ok-titulo {
	font: 800 max(32px, min(4.4vw, 64px))/.94 var(--em-sans);
	letter-spacing: -.045em;
	outline: none;
}

.em-form__ok-texto {
	max-width: 380px;
	color: #DCE2EE;
	font: 400 17px/1.5 var(--em-sans);
}