/* ==========================================================================
   Eletromatrix — folha de estilo do tema
   Tokens da marca extraídos do logo oficial: vermelho #D42E27, grafite #2B2B2B,
   escuro #23282D, tipografia Montserrat.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	--em-vermelho: #d42e27;
	--em-vermelho-escuro: #ab241e;
	--em-vermelho-claro: #f03c34;
	--em-grafite: #2b2b2b;
	--em-escuro: #23282d;
	--em-escuro-2: #1a1e22;
	--em-texto: #33383d;
	--em-texto-suave: #565d63;   /* 6.7:1 no branco — o #6b7278 anterior ficava no limite do AA */
	--em-linha: #e3e6e8;
	--em-cinza: #f4f6f7;
	--em-cinza-2: #eceff1;
	--em-suave-escuro: #c5ccd1;  /* texto secundário sobre seção escura — 9.2:1 */
	--em-branco: #fff;

	--em-fonte: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	--em-container: 1240px;
	--em-gap: 28px;
	--em-radio: 4px;

	--em-secao: clamp(56px, 7vw, 104px);
	--em-sombra: 0 12px 32px rgba(35, 40, 45, .1);
	--em-sombra-forte: 0 20px 48px rgba(35, 40, 45, .16);
	--em-trans: .25s cubic-bezier(.4, 0, .2, 1);
	--em-trans-lento: .4s cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* overflow-x fica no HTML, nunca no body: no body ele é propagado para o
   viewport e trava a rolagem da página inteira além de quebrar sticky. No html
   corta a barra horizontal sem nenhum desses efeitos. */
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}

body {
	margin: 0;
	font-family: var(--em-fonte);
	font-size: 16px;
	line-height: 1.7;
	color: var(--em-texto);
	background: var(--em-branco);
}

img,
svg,
video { max-width: 100%; height: auto; display: block; }

a { color: var(--em-vermelho); text-decoration: none; transition: color var(--em-trans); }
a:hover { color: var(--em-vermelho-escuro); }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--em-escuro);
}

h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.2em; }

address { font-style: normal; }

:focus-visible {
	outline: 3px solid var(--em-vermelho);
	outline-offset: 3px;
}

.em-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 12px 20px;
	background: var(--em-vermelho);
	color: #fff;
	font-weight: 700;
}
.em-skip:focus { left: 0; color: #fff; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.em-container {
	width: 100%;
	max-width: var(--em-container);
	margin: 0 auto;
	padding: 0 24px;
}

.em-secao { padding: var(--em-secao) 0; }
.em-secao--cinza { background: var(--em-cinza); }
.em-secao--compacta { padding: calc(var(--em-secao) * .6) 0; }

/* Seção escura com textura metálica sutil — dá peso industrial sem virar bloco chapado. */
.em-secao--escura {
	position: relative;
	background:
		linear-gradient(135deg, var(--em-escuro) 0%, var(--em-escuro-2) 55%, #202429 100%);
	color: var(--em-suave-escuro);
}
.em-secao--escura::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 2px, transparent 2px 7px);
	pointer-events: none;
}
.em-secao--escura > * { position: relative; z-index: 1; }
.em-secao--escura h1,
.em-secao--escura h2,
.em-secao--escura h3 { color: #fff; }

.em-grid { display: grid; gap: var(--em-gap); }
.em-grid--2 { grid-template-columns: repeat(2, 1fr); }
.em-grid--3 { grid-template-columns: repeat(3, 1fr); }
.em-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
	.em-grid--3,
	.em-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.em-grid--2,
	.em-grid--3,
	.em-grid--4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   4. Títulos de seção
   -------------------------------------------------------------------------- */
.em-chapeu {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--em-vermelho);
}
.em-chapeu::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--em-vermelho);
}
.em-secao--escura .em-chapeu { color: var(--em-vermelho-claro); }

.em-titulo-secao { margin-bottom: 16px; }

.em-secao__cab {
	max-width: 720px;
	margin-bottom: clamp(32px, 4vw, 56px);
}
.em-secao__cab--centro {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.em-secao__cab--centro .em-chapeu { justify-content: center; }

.em-lead {
	font-size: 1.05rem;
	color: var(--em-texto-suave);
}
.em-secao--escura .em-lead { color: var(--em-suave-escuro); }

/* --------------------------------------------------------------------------
   5. Botões
   -------------------------------------------------------------------------- */
.em-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	border: 2px solid transparent;
	border-radius: var(--em-radio);
	font-family: inherit;
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: all var(--em-trans);
}

.em-btn--primario {
	background: var(--em-vermelho);
	border-color: var(--em-vermelho);
	color: #fff;
}
.em-btn--primario:hover {
	background: var(--em-vermelho-escuro);
	border-color: var(--em-vermelho-escuro);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(212, 46, 39, .3);
}

.em-btn--vazado {
	background: transparent;
	border-color: currentColor;
	color: var(--em-escuro);
}
.em-btn--vazado:hover {
	background: var(--em-escuro);
	border-color: var(--em-escuro);
	color: #fff;
}

.em-btn--claro {
	background: #fff;
	border-color: #fff;
	color: var(--em-escuro);
}
.em-btn--claro:hover { background: transparent; color: #fff; }

.em-btn-grupo {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* --------------------------------------------------------------------------
   6. Cabeçalho
   -------------------------------------------------------------------------- */
.em-topbar {
	background: var(--em-escuro);
	color: var(--em-suave-escuro);
	font-size: .8rem;
}
.em-topbar__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 46px;
	flex-wrap: wrap;
}
.em-topbar__info,
.em-topbar__redes {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}
.em-topbar__info li {
	display: flex;
	align-items: baseline;
	gap: 7px;
}
.em-topbar__rot {
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #b4bbc1;
}
.em-topbar a { color: #dfe4e7; font-weight: 600; }
.em-topbar a:hover { color: var(--em-vermelho-claro); }
.em-topbar__redes a { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; }

@media (max-width: 860px) {
	.em-topbar__rot { display: none; }
}
@media (max-width: 620px) {
	.em-topbar__redes { display: none; }
	.em-topbar__in { justify-content: center; }
}

/* O wrapper vira "transparente" ao layout: sem ele criando uma caixa de
   altura própria, o .em-nav sticky gruda relativo à página, não ao header. */
.em-header { display: contents; }

.em-nav {
	position: sticky;
	top: 0;
	z-index: 200;
	background: #fff;
	border-bottom: 1px solid var(--em-linha);
	transition: box-shadow var(--em-trans);
}
.em-nav.is-fixo { box-shadow: 0 6px 22px rgba(35, 40, 45, .13); }

.em-nav__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 108px;
	/* Padding lateral explícito: sem ele, a barra ganhava padding 0 horizontal
	   e a logo colava (e cortava, no mobile) na borda. Com ele, a logo também
	   alinha com o conteúdo das seções. */
	padding: 8px 24px;
}

/* Lockup empilhado (símbolo + duas linhas): limitar só pela altura encolhe
   demais o texto, então a barra ganha altura junto. */
.em-marca img,
.em-marca .custom-logo {
	width: auto;
	max-height: 76px;
}

/* 7 itens + CTA: o respiro cede antes de o botão quebrar em duas linhas. */
.em-menu { display: flex; align-items: center; gap: 18px; }

.em-menu__lista {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.em-menu__lista li { position: relative; }
.em-menu__lista > li > a {
	display: block;
	padding: 12px 11px;
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--em-escuro);
}
.em-menu__lista > li > a::after {
	content: "";
	display: block;
	width: 0;
	height: 2px;
	margin-top: 5px;
	background: var(--em-vermelho);
	transition: width var(--em-trans);
}
.em-menu__lista > li > a:hover::after,
.em-menu__lista > li.current-menu-item > a::after,
.em-menu__lista > li.current_page_item > a::after { width: 100%; }
.em-menu__lista > li:hover > a,
.em-menu__lista > li.current-menu-item > a { color: var(--em-vermelho); }

/* Submenu */
.em-menu__lista .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 240px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border-top: 3px solid var(--em-vermelho);
	box-shadow: var(--em-sombra);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all var(--em-trans);
}
.em-menu__lista li:hover > .sub-menu,
.em-menu__lista li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.em-menu__lista .sub-menu a {
	display: block;
	padding: 10px 20px;
	font-size: .85rem;
	font-weight: 600;
	color: var(--em-texto);
}
.em-menu__lista .sub-menu a:hover {
	background: var(--em-cinza);
	color: var(--em-vermelho);
	padding-left: 25px;
}

/* Dropdown grande (7+ itens: Revestimentos com 13, Segmentos com 10) vira duas
   colunas para não virar uma tira que estoura a altura da tela. Tratamentos, com
   3, segue em coluna única. Detecção por :has() — sem classe extra no markup. */
.em-menu__lista .sub-menu:has( > li:nth-child(7) ) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-width: 460px;
	column-gap: 8px;
}
/* alinha o dropdown à direita nos últimos itens do menu, senão vaza pela borda */
.em-menu__lista > li:nth-last-child(-n+2) .sub-menu { left: auto; right: 0; }

/* Botão de acordeão dos submenus — criado por JS, visível só no mobile
   (no desktop os submenus abrem no hover). */
.em-menu__item-toggle {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 54px;
	height: 52px;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--em-escuro);
}
.em-menu__item-toggle::before {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--em-trans);
}
.em-menu__lista > li.is-aberto > .em-menu__item-toggle::before {
	transform: rotate(-135deg) translateY(-2px);
}

.em-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 0;
	background: var(--em-escuro);
	border: 0;
	border-radius: var(--em-radio);
	cursor: pointer;
}
.em-burger span {
	display: block;
	width: 22px;
	height: 2px;
	margin: 0 auto;
	background: #fff;
	transition: all var(--em-trans);
}
.em-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.em-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.em-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
	.em-burger { display: flex; }
	.em-nav__in { min-height: 82px; }
	.em-marca img,
	.em-marca .custom-logo { max-height: 60px; }

	.em-menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0 24px;
		max-height: 0;
		overflow: hidden;
		background: #fff;
		border-bottom: 1px solid var(--em-linha);
		box-shadow: var(--em-sombra);
		transition: max-height var(--em-trans), padding var(--em-trans);
	}
	.em-menu.is-aberto {
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		padding: 12px 24px 24px;
	}
	.em-menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
	.em-menu__lista > li > a { padding: 14px 0; border-bottom: 1px solid var(--em-linha); }
	.em-menu__lista > li > a::after { display: none; }
	/* Submenu no mobile: acordeão vertical, coluna ÚNICA — sobrescreve o
	   mega-menu de 2 colunas do desktop. Fica fechado até tocar na seta. */
	.em-menu__lista .sub-menu {
		position: static;
		/* !important vence o mega-menu do desktop, cuja regra usa :has() e tem
		   especificidade maior — no mobile é sempre coluna única. */
		display: block !important;
		grid-template-columns: 1fr !important;
		min-width: 0 !important;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border-top: 0;
		max-height: 0;
		overflow: hidden;
		padding: 0 0 0 14px;
		transition: max-height var(--em-trans);
	}
	.em-menu__lista > li.is-aberto > .sub-menu {
		/* Alto o bastante para os 13 revestimentos (o maior grupo) nunca serem
		   cortados; o menu inteiro rola se precisar (.em-menu tem overflow). */
		max-height: 900px;
		padding-bottom: 10px;
	}
	.em-menu__lista .sub-menu a {
		padding: 13px 0;
		font-size: .92rem;
		border-bottom: 1px solid var(--em-linha);
	}
	.em-menu__lista .sub-menu li:last-child a { border-bottom: 0; }
	/* botão de acordeão (seta) ao lado do item-pai */
	.em-menu__item-toggle { display: flex; }

	.em-menu__acao { padding-top: 18px; }
	.em-menu__acao .em-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   7. Banner (hero) da Home
   -------------------------------------------------------------------------- */
.em-hero { position: relative; background: var(--em-escuro); }

.em-hero__slide {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(460px, 72vh, 720px);
	padding: 80px 0;
	background-size: cover;
	background-position: center;
}
.em-hero__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(26,30,34,.94) 0%, rgba(26,30,34,.78) 45%, rgba(26,30,34,.35) 100%);
}
.em-hero__in { position: relative; z-index: 2; max-width: 660px; color: #fff; }
.em-hero__chapeu {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--em-vermelho-claro);
}
.em-hero__chapeu::before { content: ""; width: 34px; height: 2px; background: var(--em-vermelho); }
.em-hero__titulo { color: #fff; margin-bottom: 18px; }
.em-hero__titulo strong { color: var(--em-vermelho-claro); font-weight: 800; }
.em-hero__texto {
	max-width: 540px;
	margin-bottom: 32px;
	font-size: 1.06rem;
	color: #d6dbdf;
}

/* Cartão de destaque sobreposto — herda a ideia do bloco vermelho da referência,
   mas ancorado à direita e com corte diagonal próprio. */
.em-hero__destaque {
	position: absolute;
	right: max(24px, calc((100vw - var(--em-container)) / 2 + 24px));
	bottom: 0;
	z-index: 3;
	width: min(360px, 40vw);
	padding: 32px 30px 36px;
	background: var(--em-vermelho);
	color: #fff;
	clip-path: polygon(0 26px, 26px 0, 100% 0, 100% 100%, 0 100%);
}
.em-hero__destaque h2 {
	margin-bottom: 10px;
	font-size: 1.28rem;
	color: #fff;
}
.em-hero__destaque p { font-size: .92rem; color: rgba(255,255,255,.9); }

@media (max-width: 980px) {
	.em-hero__destaque {
		position: static;
		width: 100%;
		clip-path: none;
	}
	.em-hero__slide { min-height: 420px; }
}

/* Carrossel */
.em-hero__slides > .em-hero__slide { display: none; }
.em-hero__slides > .em-hero__slide.is-ativo { display: flex; }
.em-hero__slides.is-unico > .em-hero__slide { display: flex; }

.em-hero__nav {
	position: absolute;
	right: max(24px, calc((100vw - var(--em-container)) / 2 + 24px));
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.em-hero__ponto {
	width: 34px;
	height: 34px;
	padding: 0;
	background: rgba(255,255,255,.14);
	border: 0;
	color: #fff;
	font-size: .74rem;
	font-weight: 700;
	cursor: pointer;
	transition: all var(--em-trans);
}
.em-hero__ponto.is-ativo,
.em-hero__ponto:hover { background: var(--em-vermelho); }

@media (max-width: 980px) { .em-hero__nav { display: none; } }

/* --------------------------------------------------------------------------
   8. Banner interno
   -------------------------------------------------------------------------- */
.em-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(260px, 34vw, 400px);
	padding: 64px 0 56px;
	background: var(--em-escuro) center/cover no-repeat;
	color: #fff;
}
.em-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(95deg, rgba(26,30,34,.93) 0%, rgba(26,30,34,.72) 60%, rgba(26,30,34,.45) 100%);
}
.em-banner__in { position: relative; z-index: 2; max-width: 760px; }
.em-banner__titulo { color: #fff; margin-bottom: 12px; }
.em-banner__sub { font-size: 1.02rem; color: #ccd2d6; max-width: 620px; }

.em-migalhas {
	margin-bottom: 16px;
	font-size: .8rem;
	color: #98a1a8;
}
.em-migalhas a { color: #ccd2d6; }
.em-migalhas a:hover { color: var(--em-vermelho-claro); }
.em-migalhas span { margin: 0 8px; opacity: .5; }

/* --------------------------------------------------------------------------
   9. Cards de processo
   -------------------------------------------------------------------------- */
.em-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--em-linha);
	border-radius: var(--em-radio);
	overflow: hidden;
	transition: all var(--em-trans);
}
.em-card:hover {
	transform: translateY(-6px);
	border-color: transparent;
	box-shadow: var(--em-sombra-forte);
}

.em-card__img {
	position: relative;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: var(--em-cinza-2);
}
/* Ícone do segmento quando não há foto enviada. Fica acima da textura de
   placeholder e herda o vermelho da marca via currentColor. */
.em-card__icone {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--em-vermelho);
	transition: transform var(--em-trans);
}
.em-card__icone svg {
	width: clamp(52px, 26%, 78px);
	height: auto;
}
.em-card:hover .em-card__icone { transform: scale(1.07); }

.em-segmento__icone {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--em-vermelho);
}
.em-segmento__icone svg { width: 34px; height: 34px; }

/* Placeholder discreto enquanto a foto do processo não foi enviada:
   evita o retângulo cinza chapado. */
.em-card__img:empty::before,
.em-card__img:not(:has(img))::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, var(--em-cinza) 0%, var(--em-cinza-2) 100%),
		repeating-linear-gradient(115deg, rgba(35,40,45,.03) 0 2px, transparent 2px 9px);
	background-blend-mode: multiply;
}
.em-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.em-card:hover .em-card__img img { transform: scale(1.06); }

/* Marcador diagonal no canto — assinatura visual do tema. */
.em-card__img::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 54px;
	height: 54px;
	background: var(--em-vermelho);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	transition: width var(--em-trans), height var(--em-trans);
}
.em-card:hover .em-card__img::after { width: 72px; height: 72px; }

.em-card__corpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 26px 26px 28px;
}
.em-card__titulo {
	margin-bottom: 10px;
	font-size: 1.16rem;
}
.em-card__titulo a { color: inherit; }
.em-card:hover .em-card__titulo a { color: var(--em-vermelho); }
.em-card__texto {
	flex: 1;
	margin-bottom: 18px;
	font-size: .92rem;
	color: var(--em-texto-suave);
}
.em-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.em-card__link::after {
	content: "→";
	transition: transform var(--em-trans);
}
.em-card:hover .em-card__link::after { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   10. Blocos de conteúdo
   -------------------------------------------------------------------------- */
.em-duas-colunas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.em-duas-colunas--invertida .em-duas-colunas__midia { order: 2; }
@media (max-width: 900px) {
	.em-duas-colunas { grid-template-columns: 1fr; }
	.em-duas-colunas--invertida .em-duas-colunas__midia { order: 0; }
}

/* Usada quando a seção não tem imagem: o texto respira em coluna única
   confortável de ler, em vez de ficar espremido em meia largura. */
.em-coluna-unica { max-width: 860px; }

/* Missão / visão: dois cards em destaque, texto entre aspas. */
.em-mv {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--em-gap);
}
@media (max-width: 720px) { .em-mv { grid-template-columns: 1fr; } }
.em-mv__card {
	padding: 34px 36px;
	background: #fff;
	border-left: 4px solid var(--em-vermelho);
	border-radius: var(--em-radio);
	box-shadow: var(--em-sombra);
}
.em-mv__texto {
	margin: 12px 0 0;
	font-size: 1.15rem;
	line-height: 1.6;
	font-style: italic;
	color: var(--em-texto);
}
.em-mv__texto::before { content: "\201C"; }
.em-mv__texto::after { content: "\201D"; }

/* Política: faixa central de destaque, fecha o bloco institucional. */
.em-politica {
	max-width: 900px;
	margin: 48px auto 0;
	padding: 34px 40px;
	text-align: center;
	background: #fff;
	border-radius: var(--em-radio);
	box-shadow: var(--em-sombra);
}
.em-politica p {
	margin: 12px 0 0;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--em-texto-suave);
}

.em-duas-colunas__midia { position: relative; }
.em-duas-colunas__midia img {
	width: 100%;
	border-radius: var(--em-radio);
}
/* Moldura deslocada — dá profundidade sem depender de sombra genérica. */
.em-duas-colunas__midia::before {
	content: "";
	position: absolute;
	left: -16px;
	bottom: -16px;
	width: 55%;
	height: 55%;
	border-left: 4px solid var(--em-vermelho);
	border-bottom: 4px solid var(--em-vermelho);
	z-index: -1;
}

/* Números */
.em-numeros {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 24px;
	margin-top: 36px;
	padding-top: 32px;
	border-top: 1px solid var(--em-linha);
}
.em-numero__valor {
	display: block;
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--em-vermelho);
}
.em-numero__legenda {
	display: block;
	margin-top: 8px;
	font-size: .84rem;
	font-weight: 600;
	color: var(--em-texto-suave);
}
.em-secao--escura .em-numeros { border-color: rgba(255,255,255,.12); }
.em-secao--escura .em-numero__legenda { color: var(--em-suave-escuro); }

/* Itens com ícone */
.em-item-icone {
	padding: 30px 26px;
	background: #fff;
	border: 1px solid var(--em-linha);
	border-radius: var(--em-radio);
	transition: all var(--em-trans);
}
.em-item-icone:hover {
	border-color: transparent;
	box-shadow: var(--em-sombra);
	transform: translateY(-4px);
}
.em-item-icone__icone {
	width: 52px;
	height: 52px;
	margin-bottom: 18px;
	object-fit: contain;
}
.em-item-icone__num {
	display: inline-block;
	margin-bottom: 14px;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--em-vermelho);
}
.em-item-icone h3 { margin-bottom: 8px; font-size: 1.06rem; }
.em-item-icone p { font-size: .9rem; color: var(--em-texto-suave); }

.em-secao--escura .em-item-icone {
	background: rgba(255,255,255,.04);
	border-color: rgba(255,255,255,.1);
}
.em-secao--escura .em-item-icone p { color: var(--em-suave-escuro); }
.em-secao--escura .em-item-icone:hover { background: rgba(255,255,255,.07); }

/* Card de aplicação que leva ao segmento correspondente */
a.em-item-icone--link { display: block; color: inherit; }
a.em-item-icone--link:hover {
	border-color: transparent;
	box-shadow: var(--em-sombra);
	transform: translateY(-4px);
}
a.em-item-icone--link h3 { transition: color var(--em-trans); }
a.em-item-icone--link:hover h3 { color: var(--em-vermelho); }
.em-item-icone__ver {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--em-vermelho);
}
.em-item-icone__ver::after { content: "\2192"; transition: transform var(--em-trans); }
a.em-item-icone--link:hover .em-item-icone__ver::after { transform: translateX(4px); }


/* Seção escura com foto de fundo (ex.: processo). Overlay pesado mantém a
   legibilidade — a foto entra como atmosfera, não como protagonista. */
.em-secao--bg { background: var(--em-escuro); }
.em-secao--bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Overlay profundo e uniforme: a imagem entra como textura de baixa
	   exposição, só para dar profundidade — nunca compete com o conteúdo.
	   A imagem vem por --em-bg-img (inline na seção); sem ela, cai no
	   bg-processo.jpg (usado na seção de processo das LPs). */
	background:
		linear-gradient(rgba(26,30,34,.90), rgba(26,30,34,.93)),
		var(--em-bg-img, url(../img/bg-processo.jpg)) center/cover no-repeat;
}
.em-secao--bg > * { position: relative; z-index: 1; }

/* Etapas do processo */
.em-etapas { counter-reset: etapa; display: grid; gap: 18px; }
.em-etapa {
	position: relative;
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 22px;
	align-items: start;
	padding: 24px 26px;
	background: #fff;
	border: 1px solid var(--em-linha);
	border-left: 3px solid var(--em-vermelho);
	border-radius: var(--em-radio);
}
.em-etapa::before {
	counter-increment: etapa;
	content: counter(etapa, decimal-leading-zero);
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1;
	color: var(--em-vermelho);
	opacity: .38;
}
.em-etapa h3 { margin-bottom: 6px; font-size: 1.04rem; }
.em-etapa p { font-size: .92rem; color: var(--em-texto-suave); }
/* A etapa é um card branco dentro da seção escura; sem isto o h3 herdaria o
   branco de .em-secao--escura h3 e sumiria sobre o próprio card. */
.em-secao--escura .em-etapa h3 { color: var(--em-escuro); }
@media (max-width: 560px) {
	.em-etapa { grid-template-columns: 1fr; gap: 8px; }
}

/* Tabela de especificações */
.em-specs {
	width: 100%;
	border-collapse: collapse;
	font-size: .93rem;
}
.em-specs th,
.em-specs td {
	padding: 15px 18px;
	text-align: left;
	border-bottom: 1px solid var(--em-linha);
}
.em-specs th {
	width: 42%;
	font-weight: 700;
	color: var(--em-escuro);
	background: var(--em-cinza);
}
.em-specs tr:last-child th,
.em-specs tr:last-child td { border-bottom: 0; }
.em-tabela-rolagem { overflow-x: auto; border: 1px solid var(--em-linha); border-radius: var(--em-radio); }

/* Lista de checagem */
.em-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.em-checks li {
	position: relative;
	padding-left: 32px;
	font-size: .95rem;
}
.em-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 16px;
	height: 9px;
	border-left: 3px solid var(--em-vermelho);
	border-bottom: 3px solid var(--em-vermelho);
	transform: rotate(-45deg);
}

/* Materiais e peças — lista em colunas para não virar uma tira longa */
/* 320px mínimo: em 4 colunas os itens quebravam no meio da observação. */
.em-checks--colunas {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 12px 32px;
}
.em-checks__obs { color: var(--em-texto-suave); }

/* Alertas técnicos — o nível muda a cor da borda e do rótulo */
.em-alertas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}
.em-alerta {
	position: relative;
	padding: 22px 24px 22px 26px;
	background: #fff;
	border: 1px solid var(--em-linha);
	border-left: 4px solid var(--em-texto-suave);
	border-radius: var(--em-radio);
}
.em-alerta h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 8px;
	font-size: 1.02rem;
}
.em-alerta h3::before {
	content: "";
	width: 9px;
	height: 9px;
	flex-shrink: 0;
	border-radius: 50%;
	background: currentColor;
	opacity: .55;
}
.em-alerta p { font-size: .92rem; color: var(--em-texto-suave); }

.em-alerta--info { border-left-color: #4a6272; }
.em-alerta--info h3 { color: #3d5261; }

.em-alerta--atencao { border-left-color: #d38b0a; }
.em-alerta--atencao h3 { color: #96620a; }

.em-alerta--critico { border-left-color: var(--em-vermelho); }
.em-alerta--critico h3 { color: var(--em-vermelho-escuro); }

/* Certificações */
.em-selos {
	display: grid;
	/* 216px é o maior valor que ainda encaixa os 5 selos numa linha só
	   (5×216 + 4×18 = 1152, dentro dos 1192 úteis do container). */
	grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
	gap: 18px;
}
.em-selo {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px 24px;
	background: #fff;
	border: 1px solid var(--em-linha);
	border-radius: var(--em-radio);
}
/* Chip branco atrás de cada selo: uniformiza selos de origens diferentes
   (uns com fundo branco, outros transparentes) e garante contraste tanto no
   card escuro quanto no claro. Sem ele, o ISO (fundo branco sólido) parece
   recortado e os transparentes somem no escuro. */
.em-selo img {
	width: 72px;
	height: 72px;
	padding: 9px;
	object-fit: contain;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
	box-sizing: border-box;
	flex-shrink: 0;
}
.em-selo__nome { display: block; font-weight: 700; font-size: .95rem; line-height: 1.3; color: var(--em-escuro); }
.em-selo__desc { display: block; margin-top: 3px; font-size: .84rem; line-height: 1.45; color: var(--em-texto-suave); }
.em-secao--escura .em-selo {
	background: rgba(255,255,255,.05);
	border-color: rgba(255,255,255,.12);
}
.em-secao--escura .em-selo__nome { color: #fff; }
.em-secao--escura .em-selo__desc { color: var(--em-suave-escuro); }

/* Logos de clientes */
.em-logos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	align-items: center;
}
.em-logos img {
	max-height: 56px;
	margin: 0 auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .58;
	transition: all var(--em-trans);
}
.em-logos img:hover { filter: none; opacity: 1; }

/* Segmentos — são links para as landings de fundo de funil */
.em-segmentos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}

/* Listagem completa (10 segmentos): 5 colunas fecham em duas linhas iguais.
   Com auto-fit saía 6+4, desequilibrado, e os nomes longos quebravam. */
.em-segmentos--todos {
	grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1080px) {
	.em-segmentos--todos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
	.em-segmentos--todos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
	.em-segmentos--todos { grid-template-columns: 1fr; }
}

.em-segmento {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 82px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--em-linha);
	border-left: 3px solid var(--em-linha);
	border-radius: var(--em-radio);
	font-size: .9rem;
	font-weight: 600;
	color: var(--em-escuro);
	transition: all var(--em-trans);
}
.em-segmento:hover {
	border-left-color: var(--em-vermelho);
	color: var(--em-vermelho);
	box-shadow: var(--em-sombra);
	transform: translateY(-3px);
}
.em-segmento img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Card de segmento com foto de fundo (a foto do setor + overlay escuro).
   Proporção controlada por --seg-ar (4/5 padrão; 1/1 no teste quadrado).
   -------------------------------------------------------------------------- */
.em-cardseg {
	position: relative;
	display: block;
	aspect-ratio: var(--seg-ar, 1 / 1);
	overflow: hidden;
	border-radius: var(--em-radio);
	background: var(--em-escuro);
	box-shadow: var(--em-sombra);
	text-decoration: none;
	isolation: isolate;
}
.em-cardseg__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--seg-img) center / cover no-repeat;
	transform: scale(1.02);
	transition: transform var(--em-trans-lento);
}
/* Overlay forte na base (leitura) que clareia no hover; véu geral por cima. */
.em-cardseg__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(20, 23, 26, .94) 0%, rgba(20, 23, 26, .78) 42%, rgba(20, 23, 26, .62) 100%);
	transition: background var(--em-trans-lento);
}
.em-cardseg__veu {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(20, 23, 26, .28);
	transition: opacity var(--em-trans-lento);
}
.em-cardseg__faixa {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	width: 46px;
	height: 4px;
	background: var(--em-vermelho);
	transition: width var(--em-trans-lento), height var(--em-trans-lento);
}
.em-cardseg__conteudo {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 26px 24px 24px;
	color: #fff;
}
.em-cardseg__icone {
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
	color: var(--em-suave-escuro);
	transition: color var(--em-trans-lento), transform var(--em-trans-lento);
}
.em-cardseg__icone svg { width: 100%; height: 100%; }
.em-cardseg__titulo {
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.01em;
	margin-bottom: 8px;
	color: #fff;
}
.em-cardseg__texto {
	font-size: .86rem;
	line-height: 1.5;
	margin-bottom: 16px;
	color: var(--em-suave-escuro);
	transition: color var(--em-trans-lento);
}
.em-cardseg__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
}
.em-cardseg__link span { color: var(--em-vermelho); font-size: 1rem; transition: transform var(--em-trans-lento); }

.em-cardseg:hover .em-cardseg__img { transform: scale(1.09); }
.em-cardseg:hover .em-cardseg__veu { opacity: 0; }
.em-cardseg:hover .em-cardseg__overlay {
	background: linear-gradient(to top, rgba(20, 23, 26, .9) 0%, rgba(20, 23, 26, .55) 45%, rgba(20, 23, 26, .32) 100%);
}
.em-cardseg:hover .em-cardseg__icone { color: #fff; transform: translateY(-2px); }
.em-cardseg:hover .em-cardseg__texto { color: #eef1f3; }
.em-cardseg:hover .em-cardseg__link span { transform: translateX(5px); }
.em-cardseg:hover .em-cardseg__faixa { width: 72px; height: 6px; }

/* Card órfão (10 segmentos em 3 colunas → o último fica sozinho): centraliza. */
.em-grid--3 > .em-cardseg:last-child:nth-child(3n + 1) { grid-column: 2; }
@media (max-width: 980px) {
	.em-grid--3 > .em-cardseg:last-child:nth-child(3n + 1) { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   Carrossel (cards de segmento na Home). Setas FORA do trilho (flex lateral),
   3 cards por vez; o JS avança 2 a cada clique. Scroll-snap nativo.
   -------------------------------------------------------------------------- */
.em-carrossel {
	display: flex;
	align-items: center;
	gap: 12px;
}
.em-carrossel__trilho {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	gap: var(--em-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 2px 14px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.em-carrossel__trilho::-webkit-scrollbar { display: none; }
/* 3 cards visiveis: cada item ocupa um terco do trilho, descontados os gaps. */
.em-carrossel__item {
	flex: 0 0 calc((100% - 2 * var(--em-gap)) / 3);
	scroll-snap-align: start;
}
.em-carrossel__seta {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding-bottom: 3px;
	background: #fff;
	color: var(--em-escuro);
	border: 1px solid var(--em-linha);
	border-radius: 50%;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--em-sombra);
	transition: all var(--em-trans);
}
.em-carrossel__seta:hover:not(:disabled) {
	background: var(--em-vermelho);
	color: #fff;
	border-color: var(--em-vermelho);
}
.em-carrossel__seta:disabled { opacity: .3; cursor: default; }
@media (max-width: 980px) {
	.em-carrossel__item { flex-basis: calc((100% - var(--em-gap)) / 2); }
}
@media (max-width: 720px) {
	.em-carrossel__seta { display: none; }
	.em-carrossel__item { flex-basis: 80%; }
}

/* Resposta direta — o parágrafo que motores generativos extraem para citar
   a empresa. Destacado para o leitor e semanticamente isolado. */
.em-resposta-direta {
	margin-bottom: 1.2em;
	padding: 20px 24px;
	background: var(--em-cinza);
	border-left: 3px solid var(--em-vermelho);
	border-radius: var(--em-radio);
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.65;
	color: var(--em-escuro);
}

/* Linha do tempo */
.em-timeline { display: grid; gap: 0; }
.em-timeline__item {
	position: relative;
	padding: 0 0 32px 34px;
	border-left: 2px solid var(--em-linha);
}
.em-timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.em-timeline__item::before {
	content: "";
	position: absolute;
	left: -8px;
	top: 4px;
	width: 14px;
	height: 14px;
	background: var(--em-vermelho);
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--em-vermelho);
}
.em-timeline__ano {
	display: block;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--em-vermelho);
}
.em-timeline__item h3 { margin: 4px 0 6px; font-size: 1.08rem; }
.em-timeline__item p { font-size: .92rem; color: var(--em-texto-suave); }

/* Galeria */
.em-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
}
.em-galeria img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--em-radio);
}

/* --------------------------------------------------------------------------
   10b. Prova social — nota do Google + depoimentos
   -------------------------------------------------------------------------- */
.em-google {
	display: flex;
	align-items: center;
	gap: 16px;
	width: fit-content;
	margin: 0 auto clamp(36px, 4vw, 52px);
	padding: 16px 26px;
	background: #fff;
	border: 1px solid var(--em-linha);
	border-radius: 999px;
	box-shadow: var(--em-sombra);
	transition: transform var(--em-trans), box-shadow var(--em-trans);
}
a.em-google:hover { transform: translateY(-2px); box-shadow: var(--em-sombra-forte); }
.em-google__nota { font-size: 2.1rem; font-weight: 800; line-height: 1; color: var(--em-escuro); }
.em-google__estrelas { display: inline-flex; color: #f5b301; }
.em-google__texto { display: flex; flex-direction: column; line-height: 1.25; }
.em-google__texto strong { font-size: .95rem; color: var(--em-escuro); }
.em-google__texto span { font-size: .82rem; color: var(--em-texto-suave); }

.em-depoimentos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}
.em-depoimento {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 26px 28px;
	background: #fff;
	border: 1px solid var(--em-linha);
	border-top: 3px solid var(--em-vermelho);
	border-radius: var(--em-radio);
	box-shadow: var(--em-sombra);
}
.em-depoimento__estrelas { display: inline-flex; color: #f5b301; }
.em-depoimento blockquote {
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: .96rem;
	font-style: normal;
	line-height: 1.65;
	color: var(--em-texto);
}
.em-depoimento blockquote::before { content: "\201C"; }
.em-depoimento blockquote::after { content: "\201D"; }
.em-depoimento figcaption { font-size: .88rem; font-weight: 700; color: var(--em-escuro); }
.em-depoimento figcaption::before { content: "— "; color: var(--em-vermelho); }
.em-secao--escura .em-depoimento { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.em-secao--escura .em-depoimento blockquote { color: var(--em-suave-escuro); }
.em-secao--escura .em-depoimento figcaption { color: #fff; }

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */
.em-faq { display: grid; gap: 12px; max-width: 860px; }
.em-faq__item {
	background: #fff;
	border: 1px solid var(--em-linha);
	border-radius: var(--em-radio);
	overflow: hidden;
}
.em-faq__item[open] { border-color: var(--em-vermelho); }
.em-faq__p {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--em-escuro);
	cursor: pointer;
	list-style: none;
}
.em-faq__p::-webkit-details-marker { display: none; }
.em-faq__p::after {
	content: "+";
	flex-shrink: 0;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--em-vermelho);
	transition: transform var(--em-trans);
}
.em-faq__item[open] .em-faq__p::after { transform: rotate(45deg); }
.em-faq__r {
	padding: 0 24px 22px;
	font-size: .95rem;
	color: var(--em-texto-suave);
}

/* --------------------------------------------------------------------------
   12. CTA e formulário
   -------------------------------------------------------------------------- */
.em-cta {
	position: relative;
	padding: clamp(44px, 5vw, 68px) 0;
	background: var(--em-vermelho);
	color: #fff;
	overflow: hidden;
}
.em-cta::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 320px;
	height: 320px;
	background: rgba(255,255,255,.06);
	transform: rotate(45deg);
}
.em-cta__in {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
.em-cta h2 { color: #fff; margin-bottom: 8px; }
.em-cta p { color: rgba(255,255,255,.92); max-width: 560px; }

.em-form-secao__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}
@media (max-width: 900px) {
	.em-form-secao__grid { grid-template-columns: 1fr; }
}

.em-form-caixa {
	padding: clamp(26px, 3vw, 40px);
	background: #fff;
	border: 1px solid var(--em-linha);
	border-top: 4px solid var(--em-vermelho);
	border-radius: var(--em-radio);
	box-shadow: var(--em-sombra);
}

/* Estilo do formulário do MO WhatsApp Tracker */
.em-form-caixa .mo-form label,
.em-form-caixa .mo-form .mo-label {
	display: block;
	margin-bottom: 6px;
	font-size: .84rem;
	font-weight: 700;
	color: var(--em-escuro);
}
.em-form-caixa .mo-form input[type="text"],
.em-form-caixa .mo-form input[type="email"],
.em-form-caixa .mo-form input[type="tel"],
.em-form-caixa .mo-form select,
.em-form-caixa .mo-form textarea {
	width: 100%;
	margin-bottom: 16px;
	padding: 13px 15px;
	font-family: inherit;
	font-size: .95rem;
	color: var(--em-texto);
	background: var(--em-cinza);
	border: 1px solid var(--em-linha);
	border-radius: var(--em-radio);
	transition: border-color var(--em-trans), background var(--em-trans);
}
.em-form-caixa .mo-form input:focus,
.em-form-caixa .mo-form select:focus,
.em-form-caixa .mo-form textarea:focus {
	background: #fff;
	border-color: var(--em-vermelho);
	outline: none;
}
.em-form-caixa .mo-form textarea { min-height: 120px; resize: vertical; }
.em-form-caixa .mo-form button,
.em-form-caixa .mo-form input[type="submit"] {
	width: 100%;
	padding: 15px 30px;
	font-family: inherit;
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--em-vermelho);
	border: 0;
	border-radius: var(--em-radio);
	cursor: pointer;
	transition: all var(--em-trans);
}
.em-form-caixa .mo-form button:hover,
.em-form-caixa .mo-form input[type="submit"]:hover {
	background: var(--em-vermelho-escuro);
	transform: translateY(-2px);
}

.em-aviso {
	padding: 16px 20px;
	background: #fff8e5;
	border-left: 4px solid #e0a800;
	font-size: .9rem;
	color: #6b5600;
}

/* Contato: cartões de canal */
.em-canais { display: grid; gap: 14px; }
.em-canal {
	display: block;
	padding: 20px 24px;
	background: #fff;
	border: 1px solid var(--em-linha);
	border-left: 3px solid var(--em-vermelho);
	border-radius: var(--em-radio);
	transition: all var(--em-trans);
}
.em-canal:hover { box-shadow: var(--em-sombra); transform: translateX(4px); }
.em-canal__rot {
	display: block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--em-texto-suave);
}
.em-canal__valor {
	display: block;
	margin-top: 4px;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--em-escuro);
}
.em-canal:hover .em-canal__valor { color: var(--em-vermelho); }

/* Vídeo — capa estática até o clique (ver template-parts/blocks/video.php) */
.em-video {
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 960px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: var(--em-radio);
	background: var(--em-escuro);
	box-shadow: var(--em-sombra-forte);
}
/* Short (9:16): mais estreito, para não virar uma coluna gigante no desktop. */
.em-video--vertical {
	aspect-ratio: 9 / 16;
	max-width: min(400px, 92vw);
}

.em-video__capa,
.em-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}
.em-video__capa { transition: transform .5s cubic-bezier(.4, 0, .2, 1), filter var(--em-trans); }
.em-video:hover .em-video__capa { transform: scale(1.03); filter: brightness(.88); }

.em-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.em-video__play svg { width: 86px; height: auto; }
.em-video__play-bg {
	fill: var(--em-escuro);
	fill-opacity: .82;
	transition: fill var(--em-trans), fill-opacity var(--em-trans);
}
.em-video__play:hover .em-video__play-bg,
.em-video__play:focus-visible .em-video__play-bg {
	fill: var(--em-vermelho);
	fill-opacity: 1;
}

/* Mapa */
.em-mapa {
	position: relative;
	min-height: 380px;
	background: var(--em-cinza-2);
}
.em-mapa iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 380px;
	border: 0;
	filter: grayscale(.25);
}

/* Card de localização sobre o mapa: endereço em texto (reforça o NAP para SEO
   local) + atalho "Como chegar". Flutua no canto no desktop; empilha no mobile. */
.em-mapa__card {
	position: absolute;
	z-index: 2;
	left: clamp(16px, 4vw, 44px);
	bottom: clamp(16px, 4vw, 44px);
	max-width: 340px;
	padding: 26px 28px;
	background: #fff;
	border-left: 4px solid var(--em-vermelho);
	border-radius: var(--em-radio);
	box-shadow: var(--em-sombra-forte);
}
.em-mapa__end {
	margin: 8px 0 18px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--em-texto);
}
.em-btn--sm { padding: 12px 22px; font-size: .8rem; }

/* --------------------------------------------------------------------------
   Banner de consentimento de cookies (LGPD)
   -------------------------------------------------------------------------- */
.em-cookies {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 300;
	display: flex;
	align-items: center;
	gap: 22px;
	max-width: 940px;
	margin: 0 auto;
	padding: 18px 24px;
	background: var(--em-escuro);
	color: var(--em-suave-escuro);
	border-radius: var(--em-radio);
	box-shadow: var(--em-sombra-forte);
	animation: em-cookies-in .4s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes em-cookies-in {
	from { opacity: 0; transform: translateY(18px); }
}
.em-cookies.is-oculto {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--em-trans), transform var(--em-trans);
}
.em-cookies__txt { margin: 0; font-size: .88rem; line-height: 1.55; }
.em-cookies__txt a { color: #fff; text-decoration: underline; }
.em-cookies__acoes { display: flex; gap: 10px; flex-shrink: 0; }
.em-footer__legal { margin-left: 14px; color: inherit; text-decoration: underline; opacity: .85; }
.em-footer__legal:hover { opacity: 1; color: var(--em-vermelho-claro); }

.em-cookies .em-btn--vazado { color: #fff; border-color: rgba(255, 255, 255, .5); }
.em-cookies .em-btn--vazado:hover { background: #fff; border-color: #fff; color: var(--em-escuro); }
@media (max-width: 640px) {
	.em-cookies { flex-direction: column; align-items: stretch; gap: 14px; }
	.em-cookies__acoes .em-btn { flex: 1; }
}

@media (max-width: 640px) {
	.em-mapa__card {
		position: static;
		max-width: none;
		border-radius: 0;
	}
}

/* --------------------------------------------------------------------------
   13. Rodapé
   -------------------------------------------------------------------------- */
.em-footer {
	padding: clamp(48px, 6vw, 76px) 0 0;
	background: var(--em-escuro);
	color: var(--em-suave-escuro);
	font-size: .92rem;
}
.em-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
	gap: 36px;
	padding-bottom: 44px;
}
@media (max-width: 980px) { .em-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .em-footer__grid { grid-template-columns: 1fr; } }

.em-footer__col--marca img { max-height: 92px; width: auto; margin-bottom: 20px; }
.em-footer__sobre { font-size: .9rem; line-height: 1.75; }

.em-footer__titulo {
	margin-bottom: 18px;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}
.em-footer__titulo::after {
	content: "";
	display: block;
	width: 30px;
	height: 2px;
	margin-top: 10px;
	background: var(--em-vermelho);
}

.em-footer__lista,
.em-footer__contato {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}
.em-footer__lista a,
.em-footer__contato a { color: var(--em-suave-escuro); }
.em-footer__lista a:hover,
.em-footer__contato a:hover { color: var(--em-vermelho-claro); }
.em-footer__todos { font-weight: 700; color: #fff !important; }

.em-footer__base {
	padding: 22px 0 26px;
	border-top: 1px solid rgba(255,255,255,.1);
	font-size: .84rem;
}
.em-footer__base p { margin: 0; }
.em-footer__cnpj { margin-left: 10px; opacity: .7; }

/* WhatsApp flutuante */
.em-whats-flutuante {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: #25d366;
	color: #fff;
	border-radius: 50%;
	box-shadow: 0 8px 24px rgba(37, 211, 102, .4);
	transition: transform var(--em-trans);
}
.em-whats-flutuante:hover { transform: scale(1.08); color: #fff; }

/* --------------------------------------------------------------------------
   13b. Blog
   -------------------------------------------------------------------------- */
/* Medida de leitura: ~70 caracteres por linha é o confortável para texto longo. */
.em-artigo {
	max-width: 720px;
	margin: 0 auto;
}
.em-artigo__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--em-linha);
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--em-texto-suave);
}
.em-artigo .em-conteudo { font-size: 1.06rem; line-height: 1.8; }
.em-artigo .em-conteudo h2 {
	margin-top: 1.9em;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}
.em-artigo .em-conteudo h3 {
	margin-top: 1.6em;
	font-size: 1.12rem;
	color: var(--em-vermelho-escuro);
}

.em-card__meta {
	display: block;
	margin-bottom: 8px;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--em-texto-suave);
}

/* --------------------------------------------------------------------------
   14. Conteúdo editorial (editor do WordPress)
   -------------------------------------------------------------------------- */
.em-conteudo h2 { margin-top: 1.6em; }
.em-conteudo h3 { margin-top: 1.4em; }
.em-conteudo img { border-radius: var(--em-radio); margin: 1.4em 0; }
.em-conteudo ul,
.em-conteudo ol { margin-bottom: 1.2em; }
.em-conteudo li { margin-bottom: .4em; }
.em-conteudo blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--em-vermelho);
	font-size: 1.05rem;
	font-style: italic;
	color: var(--em-escuro);
}
.em-conteudo table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.em-conteudo th,
.em-conteudo td { padding: 12px 14px; border: 1px solid var(--em-linha); text-align: left; }

/* --------------------------------------------------------------------------
   15. Utilidades e animação de entrada
   -------------------------------------------------------------------------- */
.em-revelar {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s ease, transform .6s ease;
}
.em-revelar.is-visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
	.em-revelar { opacity: 1; transform: none; }
}

.em-centro { text-align: center; }
.em-mt-0 { margin-top: 0; }