/* ============================================================
   2Maker Widgets — FAMAK
   Design tokens + estilos por seção (fiel ao Figma FAMAK)
   ============================================================ */

:root {
	--fmk-azul-500: #1D3960;
	--fmk-azul-700: #101F35;
	--fmk-azul-900: #0D1929;
	--fmk-azul-400: #687A94;
	--fmk-azul-200: #B9C2CE;
	--fmk-cinza: #566375;
	--fmk-bg: #F2F5FB;
	--fmk-branco: #FFFFFF;
	--fmk-ease: cubic-bezier(.25, .1, .25, 1);
}

/* Fundo do site inteiro. No Figma nenhuma tela é branca: tudo assenta sobre
   #F2F5FB, e é esse contraste que faz os cards, formulários e caixas brancas
   se destacarem. O tema pinta .content-area e .uicore-body-content de branco
   por cima do body, então esses wrappers precisam ficar transparentes. */
body {
	background-color: var(--fmk-bg);
}

.uicore-body-content,
.content-area,
.entry-content {
	background: transparent;
}

/* ---------- Base compartilhada ---------- */

.fmk-section-title {
	margin: 0;
	color: var(--fmk-azul-700);
	line-height: 1.15;
}

/* Containers do Elementor (.e-con-inner) são flex column com align-items:center,
   o que faz o widget encolher até o tamanho do conteúdo — um título curto
   colapsava a largura da seção.
   --align-self é a variável que o próprio Elementor lê em `.e-con > .elementor-widget`;
   setá-la vence a regra dele sem disputa de especificidade (um `align-self:stretch`
   solto aqui seria sobrescrito). O width:100% cobre o caso de o tema não usar a var. */
[class*="elementor-widget-famak-"] {
	--align-self: stretch;
	width: 100%;
}

[class*="elementor-widget-famak-"] > .elementor-widget-container {
	width: 100%;
}

/* Widgets sempre ocupam 100% do container (mesmo se align-items=center no pai) */
.fmk-section,
.fmk-hero,
.fmk-banner,
.fmk-sobre,
.fmk-depo,
.fmk-marquee {
	width: 100%;
}

.fmk-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 50px;
}

.fmk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 24px;
	background: var(--fmk-azul-500);
	color: var(--fmk-branco);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 0;
	transition: background-color .5s ease;
}

.fmk-btn:hover {
	background: var(--fmk-azul-700);
	color: var(--fmk-branco);
}

.fmk-btn-light {
	background: var(--fmk-branco);
	color: var(--fmk-azul-500);
}

.fmk-btn-light:hover {
	background: var(--fmk-bg);
	color: var(--fmk-azul-500);
}

.fmk-btn-full {
	width: 100%;
	font-weight: 400;
	padding: 15px 14px;
}

/* Setas de navegação */
.fmk-setas {
	display: flex;
}

.fmk-seta {
	width: 50px;
	height: 50px;
	border: 1px solid var(--fmk-azul-500);
	background: transparent;
	cursor: pointer;
	position: relative;
	transition: background-color .45s ease;
}

.fmk-seta+.fmk-seta {
	border-left: 0;
}

.fmk-seta::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 12px;
	height: 12px;
	border-top: 2px solid var(--fmk-azul-500);
	border-right: 2px solid var(--fmk-azul-500);
	transform: rotate(45deg) translate(-2px, 2px);
	transition: border-color .45s ease;
}

.fmk-seta-prev::before {
	transform: rotate(-135deg) translate(-2px, 2px);
}

.fmk-seta:hover {
	background: var(--fmk-azul-500);
}

.fmk-seta:hover::before {
	border-color: var(--fmk-branco);
}

/* Trilho de carousel (scroll-snap) */
.fmk-track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 12px;
	margin-bottom: -12px;
}

.fmk-track::-webkit-scrollbar {
	display: none;
}

.fmk-track>* {
	scroll-snap-align: start;
	flex: 0 0 calc(25% - 18px);
	min-width: 260px;
}

/* ---------- Hero Categorias ---------- */

.fmk-hero {
	display: flex;
	width: 100%;
}

.fmk-hero-card {
	position: relative;
	flex: 1 1 0;
	min-height: 80vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	text-decoration: none;
}

.fmk-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, var(--fmk-azul-500) 5%, rgba(29, 57, 96, 0) 70%);
	transition: background .3s ease-in-out;
	pointer-events: none;
}

.fmk-hero-card:hover .fmk-hero-overlay {
	background: #1d3960c9;
}

.fmk-hero-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	padding: 40px 40px 80px 60px;
}

.fmk-hero-icon {
	width: 45px;
	height: 45px !important;
}

.fmk-hero-title {
	margin: 0;
	color: var(--fmk-branco);
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.2;
}

.fmk-hero-desc {
	margin: 0;
	color: var(--fmk-branco);
	font-size: 15px;
	line-height: 1.5;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .9s var(--fmk-ease), opacity .8s ease-in-out;
}

.fmk-hero-card:hover .fmk-hero-desc {
	max-height: 260px;
	opacity: 1;
}

.fmk-hero-corner {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60px;
	z-index: 2;
}

/* ---------- Banner CTA ---------- */

.fmk-banner {
	display: flex;
	align-items: stretch;
	min-height: 460px;
}

.fmk-banner-box {
	flex: 0 0 57%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 30px;
	padding: 60px 73px;
	background: var(--fmk-azul-500);
	border: 1px solid var(--fmk-bg);
	/* corte diagonal no canto inferior esquerdo (igual Figma) */
	clip-path: polygon(0 0, 100% 0, 100% 100%, 55px 100%, 0 calc(100% - 55px));
}

.fmk-banner-title {
	margin: 0;
	color: var(--fmk-branco);
}

.fmk-banner-text {
	max-width: 535px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--fmk-branco);
}

.fmk-banner-text p {
	margin: 0 0 1em;
}

.fmk-banner-text p:last-child {
	margin-bottom: 0;
}

.fmk-banner-media {
	flex: 1 1 auto;
	background-size: cover;
	background-position: center;
	position: relative;
}

.fmk-banner-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(29, 57, 96, .2);
}

/* ---------- Produtos ---------- */

.fmk-prod-card {
	display: flex;
	flex-direction: column;
	background: var(--fmk-branco);
	overflow: hidden;
	/* corte diagonal no canto superior direito (igual Figma) */
	clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
	transition: transform .6s var(--fmk-ease), box-shadow .6s ease;
}

.fmk-prod-img {
	position: relative;
	overflow: hidden;
	height: 340px;
}

.fmk-prod-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	transition: transform .8s ease, opacity .6s ease;
}

/* segunda imagem revelada no hover (image-swap) */
.fmk-prod-img-hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.fmk-prod-card:hover .fmk-prod-img img {
	transform: scale(1.05);
}

.fmk-prod-card:hover .fmk-prod-img-hover {
	opacity: 1;
}

.fmk-prod-info {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 18px 18px;
}

.fmk-prod-text {
	margin: 0;
	color: #000;
	height: 65px;
	line-height: 1.35;
}

/* ---------- Downloads ---------- */

.fmk-dl-row {
	display: flex;
	gap: 40px;
	align-items: stretch;
}

.fmk-dl-card {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	background: var(--fmk-branco);
	overflow: hidden;
	transition: box-shadow .6s ease;
	/* corte diagonal no canto inferior esquerdo (igual Figma) */
	clip-path: polygon(0 0, 100% 0, 100% 100%, 55px 100%, 0 calc(100% - 55px));
}

.fmk-dl-card:hover {
	box-shadow: 0 18px 40px rgba(16, 31, 53, .18);
}

/* card inteiro clicável */
.fmk-dl-card--link {
	color: inherit;
	text-decoration: none;
}

.fmk-dl-card--link:focus-visible {
	outline: 3px solid var(--fmk-azul-500);
	outline-offset: 3px;
}

.fmk-dl-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: 40px;
}

.fmk-dl-icon {
	width: 60px;
	height: 45px !important;
	margin-bottom: 10px;
}

.fmk-dl-title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--fmk-azul-700);
}

.fmk-dl-text {
	color: var(--fmk-azul-500);
	line-height: 1.5;
}

.fmk-dl-text p {
	margin: 0;
}

.fmk-dl-media {
	margin-top: auto;
	overflow: hidden;
	height: 300px;
}

.fmk-dl-media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform .8s ease;
}

.fmk-dl-card:hover .fmk-dl-media img {
	transform: scale(1.05);
}

.fmk-dl-arrow {
	position: absolute;
	right: 0;
	bottom: 275px;
	width: 50px;
	height: 50px;
	background: var(--fmk-azul-500);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition: background-color .5s ease;
}

.fmk-dl-arrow svg {
	transition: transform .4s ease;
}

.fmk-dl-card:hover .fmk-dl-arrow {
	background: var(--fmk-azul-700);
}

.fmk-dl-card:hover .fmk-dl-arrow svg {
	transform: translateX(4px);
}

/* ---------- Sobre ---------- */

.fmk-sobre {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 60px;
}

.fmk-sobre-media {
	flex: 0 0 34%;
	overflow: hidden;
	border: 1px solid var(--fmk-bg);
}

.fmk-sobre-media img {
	width: 100%;
	height: 650px;
	object-fit: cover;
	display: block;
	transition: filter .6s ease;
}

.fmk-sobre-media:hover img {
	filter: brightness(1.08);
}

.fmk-sobre-body {
	flex: 0 1 36%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 40px;
	/* min-height: 650px; */
}

.fmk-sobre-title {
	align-self: stretch;
	text-align: right;
}

.fmk-sobre-text {
	color: var(--fmk-cinza);
	text-align: justify;
	line-height: 1.5;
}

.fmk-sobre-badge {
	position: relative;
	width: 272px;
	height: 290px;
	flex: 0 0 auto;
	background-size: contain;
	background-repeat: no-repeat;
}

.fmk-badge-label {
	position: absolute;
	left: 30px;
	top: 74px;
	color: var(--fmk-branco);
	font-weight: 700;
	font-size: 18px;
}

.fmk-badge-year {
	position: absolute;
	right: 20px;
	bottom: 15px;
	color: var(--fmk-branco);
	font-weight: 700;
	font-size: 40px;
}

/* ---------- Depoimentos ---------- */

.fmk-depo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 80px;
}

.fmk-depo-head {
	flex: 0 0 35%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}

.fmk-depo-title,
.fmk-depo-desc {
	text-align: left;
}

.fmk-depo-desc {
	margin: 0;
	color: var(--fmk-azul-700);
	line-height: 1.5;
}

.fmk-depo-track {
	flex: 1 1 auto;
}

.fmk-depo-track>* {
	flex: 0 0 calc(50% - 12px);
}

.fmk-depo-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	padding: 48px;
	background: var(--fmk-branco);
	transition: box-shadow .6s ease, transform .6s ease;
	/* corte diagonal no canto superior direito (igual Figma) */
	clip-path: polygon(0 0, calc(100% - 55px) 0, 100% 55px, 100% 100%, 0 100%);
}

.fmk-depo-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(16, 31, 53, .15);
}

.fmk-depo-stars {
	display: flex;
	gap: 4px;
}

.fmk-depo-quote {
	margin: 0;
	color: var(--fmk-cinza);
	line-height: 1.5;
}

.fmk-depo-author {
	display: flex;
	flex-direction: column;
}

.fmk-depo-name {
	font-size: 20px;
	font-weight: 700;
	color: var(--fmk-azul-700);
}

.fmk-depo-role {
	font-size: 16px;
	font-weight: 700;
	color: var(--fmk-azul-700);
}

/* ---------- Logos Marquee ---------- */

.fmk-marquee {
	overflow: hidden;
	width: 100%;
	padding: 40px 0;
}

.fmk-marquee-track {
	display: flex;
	align-items: center;
	gap: 84px;
	width: max-content;
	animation: fmk-scroll 40s linear infinite;
}

.fmk-marquee-track img {
	height: 74px;
	width: auto;
	display: block;
}

.fmk-marquee:hover .fmk-marquee-track {
	animation-play-state: paused;
}

/* Faixa azul do Figma: a tira de logos é monocromática, então basta virar
   tudo branco em vez de manter um segundo arquivo de imagem. */
.fmk-marquee.is-white .fmk-marquee-track img {
	filter: brightness(0) invert(1);
}

/* A tira já traz o próprio espaçamento entre logos: um gap extra abriria
   um buraco visível a cada emenda. */
.fmk-marquee.is-strip .fmk-marquee-track {
	gap: 0;
}

@keyframes fmk-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* ---------- Notícias ---------- */

.fmk-news-card {
	display: flex;
	flex-direction: column;
	background: var(--fmk-branco);
	overflow: hidden;
	text-decoration: none;
	cursor: pointer;
	transition: transform .6s var(--fmk-ease), box-shadow .6s ease;
	/* corte diagonal no canto inferior esquerdo (igual Figma) */
	clip-path: polygon(0 0, 100% 0, 100% 100%, 55px 100%, 0 calc(100% - 55px));
}

.fmk-news-body {
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fmk-news-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--fmk-azul-700);
	line-height: 1.35;
}

.fmk-news-excerpt {
	margin: 0;
	font-size: 16px;
	color: var(--fmk-azul-500);
	line-height: 1.5;
}

.fmk-news-media {
	margin-top: auto;
	overflow: hidden;
	height: 240px;
	background: #fafafa;
}

.fmk-news-media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform .8s ease;
}

.fmk-news-card:hover .fmk-news-media img {
	transform: scale(1.06);
}

/* ---------- Footer ---------- */

.fmk-footer {
	width: 100%;
	background: var(--fmk-azul-500);
	padding: 120px 0 40px;
}

/* conteúdo boxed (fundo azul continua full-width) */
.fmk-footer-inner {
	width: min(95%, 1380px);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 45px;
}

.fmk-foot-main {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 48px;
	flex-wrap: nowrap;
}

/* bloco esquerdo: logo + selo de certificação empilhados */
.fmk-foot-brand {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.fmk-foot-logo-img {
	width: 200px !important;
	height: auto !important;
}

/* inverter SÓ a logo (o selo é colorido, não inverter) */
.fmk-logo-invert .fmk-foot-logo-img {
	filter: brightness(0) invert(1);
}

.fmk-foot-cert-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fmk-foot-heading {
	margin: 0 0 5px;
	color: var(--fmk-branco);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
}

.fmk-foot-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.fmk-foot-links a,
.fmk-foot-links span {
	color: var(--fmk-azul-200);
	text-decoration: none;
	transition: color .4s ease, padding-left .4s ease;
}

.fmk-foot-links a:hover {
	color: var(--fmk-branco);
	padding-left: 4px;
}

.fmk-foot-item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

/* trava ícones dos itens (tema força img height:auto e explode o tamanho) */
.fmk-foot-item img {
	width: 24px !important;
	height: 24px !important;
	object-fit: contain;
	flex: none;
	margin-top: 2px;
}

.fmk-foot-contact {
	max-width: 300px;
}

.fmk-foot-cert {
	display: block;
	width: 75px !important;
	height: auto !important;
}

.fmk-foot-divider {
	border: 0;
	border-top: 2px solid rgba(255, 255, 255, .1);
	margin: 0;
	width: 100%;
}

.fmk-foot-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--fmk-branco);
	font-size: 14px;
}

/* ---------- Responsivo ---------- */

@media (max-width: 1024px) {
	.fmk-section-title {
		font-size: 32px;
	}

	.fmk-prod-img {
		height: 120px;
	}

	.fmk-sobre-media img {
		height: 200px !important;
	}

	.fmk-prod-text {
		height: 70px;
	}

	.fmk-hero {
		flex-wrap: wrap;
	}

	.fmk-hero-card {
		flex: 1 1 50%;
		min-height: 60vh !important;
	}

	.fmk-dl-media {
		height: 150px;
	}

	.fmk-dl-body {
		gap: 5px;
		padding: 22px;
	}

	.fmk-banner {
		flex-direction: column;
		min-height: unset;
	}

	.fmk-banner-box {
		flex-basis: auto;
		padding: 50px;
	}

	.fmk-sobre-badge {
		display: none;
	}

	.fmk-pg-card-media {
		height: 120px !important;
	}

	.fmk-pg-grid {
		gap: 10px !important;
	}

	.fmk-banner-media {
		min-height: 320px;
		display: none;
	}

	.fmk-track>* {
		flex: 0 0 calc(50% - 12px);
	}

	.fmk-sobre {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.fmk-sobre-media,
	.fmk-sobre-body {
		flex: 1 1 100%;
	}

	.fmk-sobre-body {
		min-height: 0;
	}

	.fmk-depo {
		flex-direction: column;
		align-items: stretch;
	}

	.fmk-depo-head {
		flex: 1 1 auto;
		align-items: flex-start;
	}

	.fmk-pg-card-title {
		font-size: 12px !important;
	}

	.fmk-pg-card-line {
		display: none;
	}

	.fmk-depo-title,
	.fmk-depo-desc {
		text-align: left;
	}

	.fmk-pg-card-body {
		padding: 18px 10px 10px;
	}

	.fmk-btn-full {
		padding: 15px 5px;
	}

	.fmk-btn {
		font-size: 13px;
	}

	.fmk-footer {
		padding: 80px 0 30px;
	}

	.fmk-foot-main {
		flex-wrap: wrap;
		gap: 40px;
	}

	.fmk-foot-brand {
		flex: 0 0 100%;
	}

	.fmk-dl-card {
		flex: unset;
	}
}

@media (max-width: 640px) {
	.fmk-section-title {
		font-size: 26px;
		text-align: left;
	}

	.fmk-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	/* hero vira carrossel (swipe + snap) em vez de empilhar */
	.fmk-hero {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.fmk-hero::-webkit-scrollbar {
		display: none;
	}

	.fmk-hero-card {
		flex: 0 0 88%;
		min-height: 460px;
		scroll-snap-align: center;
	}

	/* sem hover no touch: descrição sempre visível */
	.fmk-hero-desc {
		max-height: 260px;
		opacity: 1;
	}

	.fmk-hero-overlay {
		opacity: .55;
	}

	/* 2 cards por vez também no mobile (igual ao grid da página de produtos) */
	.fmk-track {
		gap: 12px;
	}

	.fmk-track>* {
		flex: 0 0 calc(50% - 6px);
		min-width: 0;
	}

	/* blog/notícias continua 1 por vez no mobile */
	.fmk-noticias .fmk-track>* {
		flex: 0 0 85%;
	}

	.fmk-depo-track>* {
		flex: 0 0 90%;
	}

	.fmk-dl-row {
		flex-direction: column;
	}

	.fmk-foot-bottom {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}
}

/* ============================================================
   Header + Mega Menu
   ============================================================ */

.fmk-header {
	position: relative;
	z-index: 100;
	width: 100%;
	background: var(--fmk-branco);
	box-shadow: 0 4px 20px rgba(16, 31, 53, .08);
}

/* Fixo no topo. position:fixed pois um ancestral do UiCore (.uicore-body-content)
   usa overflow:clip, o que quebra position:sticky. O espaçador é criado via JS. */
.fmk-header--sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

/* ---- Barra superior ---- */

.fmk-header-top {
	background: #ececec;
}

.fmk-header-top-inner {
	display: flex;
	justify-content: flex-end;
	gap: 34px;
	width: min(95%, 1380px);
	margin: 0 auto;
	padding: 9px 0;
}

.fmk-header-top-link {
	color: var(--fmk-azul-700);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: color .3s ease;
}

.fmk-header-top-link:hover {
	color: var(--fmk-azul-500);
}

.fmk-header-inner {
	display: flex;
	align-items: center;
	gap: 34px;
	/* mesma caixa do conteúdo (Elementor usa min(95%, 1380px)) para que o
	   header não fique mais largo que as seções da página */
	width: min(95%, 1380px);
	margin: 0 auto;
	padding: 14px 0px;
}

.fmk-header-logo {
	flex: 0 0 auto;
}

.fmk-header-logo img {
	display: block;
	height: 38px;
	width: auto;
	max-width: none;
}

.fmk-nav-list {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: nowrap;
}

/* static so the mega panel can span the full header width */
.fmk-nav-item {
	position: static;
}

.fmk-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 22px 0;
	color: var(--fmk-azul-500);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.fmk-nav-caret {
	width: 6px;
	height: 6px;
	border: solid var(--fmk-azul-500);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .3s ease;
}

.fmk-nav-item.has-mega:hover .fmk-nav-caret {
	transform: rotate(-135deg) translateY(-2px);
}

/* wrapper de nav + ações (vira painel no mobile) */
.fmk-header-collapse {
	display: flex;
	align-items: center;
	gap: 34px;
	flex: 1;
}

.fmk-header-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 20px;
}

/* hamburger (só mobile) */
.fmk-header-burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	margin-left: auto;
	padding: 8px;
	border: 0;
	background: none;
	cursor: pointer;
}

.fmk-header-burger span {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--fmk-azul-500);
	transition: transform .3s ease, opacity .3s ease;
}

.fmk-header-burger.is-open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.fmk-header-burger.is-open span:nth-child(2) {
	opacity: 0;
}

.fmk-header-burger.is-open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.fmk-header-search {
	display: flex;
	align-items: center;
	gap: 10px;
	/* min-width: 260px; */
	padding: 9px 16px;
	border: 1px solid #d5dbe6;
}

/* telas menores: aperta o gap para o menu caber (Buscar sem min-width) */
@media (max-width: 1500px) {
	.fmk-header-inner {
		gap: 22px;
	}
}

.fmk-header-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	padding: 0;
	background: transparent;
	font-size: 16px;
	color: var(--fmk-azul-700);
}

.fmk-header-search button {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--fmk-azul-500) !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	width: auto;
	min-width: 0;
	padding: 0 !important;
	margin: 0;
}

.fmk-header-search button svg {
	display: block;
}

.fmk-header-cta {
	white-space: nowrap;
}

/* ---- Mega panel ---- */

.fmk-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 90;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

/* escurece a página atrás do mega, começando abaixo do header (não cobre o
   header nem a barra superior) */
.fmk-mega::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 100vh;
	z-index: -1;
	background: rgba(16, 31, 53, .55);
	pointer-events: none;
}

.fmk-nav-item.has-mega:hover .fmk-mega {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* O .fmk-mega ocupa a largura toda do header, mas o card visível tem largura
   fixa e é posicionado sob o item disparador — sobra uma faixa transparente
   dos dois lados que mantinha o :hover do item e travava o menu aberto.
   Só o card recebe ponteiro; o painel em si fica inerte.
   Desktop apenas: no mobile o mega vira acordeão e precisa receber clique. */
@media (min-width: 1025px) {
	.fmk-mega {
		pointer-events: none;
	}

	.fmk-mega-grid {
		pointer-events: auto;
		position: relative;
	}

	/* Ponte sobre o vão entre o link do menu e o topo do card (~14px), para o
	   hover não se perder no caminho ao descer o mouse. */
	.fmk-mega-grid::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 22px;
	}
}

.fmk-mega-grid {
	display: flex;
	/* largura fixa; o JS posiciona sob o item disparador (margin-left) */
	width: 1120px;
	max-width: calc(100vw - 40px);
	box-shadow: 0 24px 40px rgba(16, 31, 53, .18);
	overflow: hidden;
}

/* menu de 1 nível (sem sublinks): imagem + uma coluna, mais estreito.
   width fixo deixava sobra transparente quando o menu não tem imagem (a caixa
   ficava com 720px e o card pintado com ~360px) e essa sobra segurava o hover.
   max-content faz a caixa acompanhar o card; o teto continua em 720px. */
.fmk-mega-grid.is-simple {
	width: max-content;
	max-width: min(720px, calc(100vw - 40px));
}

/* Colunas do painel de 3 níveis com largura fixa.
   Antes eram flexíveis, então um rótulo longo no 3º nível (por exemplo
   "Perfil de Cobertura de Ranhura e Montagem de Chapas") roubava espaço da
   imagem e do 2º nível, e o painel mudava de proporção a cada categoria.
   Agora o texto quebra dentro da própria coluna. */
.fmk-mega-grid:not(.is-simple) {
	width: 780px; /* 420 + 360, quando o menu não tem imagem */
}

.fmk-mega-grid:not(.is-simple).has-media {
	width: 1120px; /* 340 + 420 + 360 */
}

.fmk-mega-grid:not(.is-simple) .fmk-mega-media {
	flex: 0 0 340px;
}

.fmk-mega-grid:not(.is-simple) .fmk-mega-main {
	flex: 0 0 420px;
	min-width: 0;
}

.fmk-mega-grid:not(.is-simple) .fmk-mega-subs {
	flex: 0 0 360px;
	min-width: 0;
}

.fmk-mega-media {
	/* flex: 0 0 34%; */
	overflow: hidden;
}

.fmk-mega-media img {
	width: auto !important;
	height: 100% !important;
	object-fit: contain;
	display: block;
}

.fmk-mega-main {
	/* flex: 1 1 0; */
	background: var(--fmk-azul-500);
	padding: 40px 56px;
}

/* Também é link, com o mesmo destino do item do menu que abriu o painel. */
.fmk-mega-title {
	display: block;
	margin-bottom: 24px;
	color: var(--fmk-branco);
	font-size: 28px;
	font-weight: 700;
	text-decoration: none;
	transition: opacity .3s ease;
}

.fmk-mega-title:hover,
.fmk-mega-title:focus {
	color: var(--fmk-branco);
	opacity: .75;
}

.fmk-mega-cats {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.fmk-mega-cat a {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--fmk-branco);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	opacity: .8;
	transition: opacity .3s ease;
}

.fmk-mega-cat.is-active a,
.fmk-mega-cat:hover a {
	opacity: 1;
}

.fmk-mega-arrow {
	width: 6px;
	height: 6px;
	border: solid var(--fmk-branco);
	border-width: 0 2px 2px 0;
	transform: rotate(-45deg);
	flex: none;
}

.fmk-mega-subs {
	/* flex: 0 0 27%; */
	background: #24406a;
	padding: 40px;
}

.fmk-mega-sub {
	display: none;
}

.fmk-mega-sub.is-active {
	display: block;
}

.fmk-mega-sub-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
	color: var(--fmk-branco);
	font-size: 16px;
	font-weight: 700;
}

/* 14px de gap somados a 30px de line-height davam 44px por item: com listas
   de 7 subitens a coluna ficava esparsa demais. */
.fmk-mega-sub ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fmk-mega-sub a {
	display: block;
	color: var(--fmk-azul-200);
	font-size: 16px;
	line-height: 22px;
	text-decoration: none;
	transition: color .3s ease;
}

.fmk-mega-sub a:hover {
	color: var(--fmk-branco);
}

@media (max-width: 1024px) {
	.fmk-header-inner {
		gap: 16px;
		padding: 12px 20px;
	}

	/* logo esquerda, hamburger direita */
	.fmk-header-burger {
		display: flex;
	}

	/* painel colapsável abaixo do header */
	.fmk-header-collapse {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--fmk-branco);
		box-shadow: 0 22px 30px rgba(16, 31, 53, .14);
		padding: 8px 24px 24px;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
		display: none;
	}

	.fmk-header-collapse.is-open {
		display: flex;
	}

	.fmk-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.fmk-nav-item {
		border-bottom: 1px solid #eef1f6;
	}

	.fmk-nav-link {
		width: 100%;
		justify-content: space-between;
		padding: 16px 0;
	}

	.fmk-nav-caret {
		margin-left: auto;
	}

	.fmk-nav-item.is-open>.fmk-nav-link .fmk-nav-caret {
		transform: rotate(-135deg) translateY(-2px);
	}

	/* mega vira acordeão (abre no clique, sem hover) */
	.fmk-mega {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		max-height: 0;
		overflow: hidden;
		transition: max-height .4s ease;
	}

	.fmk-nav-item.is-open .fmk-mega {
		max-height: 1400px;
	}

	.fmk-mega-grid {
		flex-direction: column;
		min-height: 0;
		box-shadow: none;
	}

	.fmk-mega-media {
		display: none;
	}

	.fmk-mega-main,
	.fmk-mega-subs {
		background: transparent;
		padding: 8px 0 16px;
	}

	.fmk-mega-title {
		font-size: 20px;
		margin-bottom: 16px;
		color: var(--fmk-azul-700);
	}

	.fmk-mega-title:hover,
	.fmk-mega-title:focus {
		color: var(--fmk-azul-700);
	}

	.fmk-mega-cat a {
		color: var(--fmk-azul-700);
	}

	.fmk-mega-arrow {
		border-color: var(--fmk-azul-700);
	}

	/* no mobile mostra todos os sub-links (sem hover) */
	.fmk-mega-sub {
		display: block;
		margin-bottom: 14px;
	}

	.fmk-mega-sub-title {
		color: var(--fmk-azul-500);
	}

	.fmk-mega-sub a {
		color: var(--fmk-cinza);
	}

	.fmk-header-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		margin: 18px 0 0;
	}

	.fmk-header-search {
		min-width: 0;
	}

	.fmk-header-cta {
		text-align: center;
	}
}

/* ============================================================
   Banner de Categoria (página de listagem)
   ============================================================ */

.fmk-catbanner-wrap {
	width: 100%;
}

.fmk-catbanner {
	display: flex;
	align-items: stretch;
	min-height: 360px;
	border: 1px solid var(--fmk-bg);
}

.fmk-catbanner-content {
	flex: 0 0 55%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 26px;
	padding: 60px 70px;
	background: var(--fmk-azul-500);
}

.fmk-catbanner-title {
	margin: 0;
	color: var(--fmk-branco);
	font-size: 2rem;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
}

.fmk-catbanner-desc {
	color: var(--fmk-azul-200);
}

.fmk-catbanner-desc p {
	margin: 0 0 12px;
}

.fmk-catbanner-media {
	flex: 1 1 auto;
	background-size: cover;
	background-position: center;
	position: relative;
}

.fmk-catbanner-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(29, 57, 96, .15);
}

.fmk-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 18px 2px 0;
	font-size: 14px;
	color: var(--fmk-cinza);
}

.fmk-breadcrumb a {
	color: var(--fmk-cinza);
	text-decoration: none;
	transition: color .3s ease;
}

.fmk-breadcrumb a:hover {
	color: var(--fmk-azul-500);
}

.fmk-breadcrumb .is-current {
	color: var(--fmk-azul-700);
	font-weight: 600;
}

.fmk-breadcrumb-sep {
	color: var(--fmk-azul-200);
}

/* ============================================================
   Grid de Produtos + Sidebar de Categorias
   ============================================================ */

.fmk-pg {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	width: 100%;
}

/* Soluções: sem barra de filtros, a grade usa a largura toda e vai a 4
   colunas, igual à página /solucoes/ (.fmk-sol-grid) */
.fmk-pg-sem-filtros {
	gap: 0;
}

.fmk-pg-sem-filtros .fmk-pg-main {
	width: 100%;
}

.fmk-pg-sem-filtros .fmk-pg-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
}

@media (max-width: 1200px) {
	.fmk-pg-sem-filtros .fmk-pg-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.fmk-pg-sem-filtros .fmk-pg-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* no celular volta a 1 coluna: sem isto a regra acima, mais específica que
   a base, deixaria dois cards espremidos lado a lado */
@media (max-width: 600px) {
	.fmk-pg-sem-filtros .fmk-pg-grid {
		grid-template-columns: 1fr;
	}
}

.fmk-pg-sidebar {
	flex: 0 0 280px;
	align-self: flex-start;
	background: var(--fmk-branco);
	padding: 32px 28px;
	box-shadow: 0 8px 24px rgba(16, 31, 53, .06);
}

/* controles do drawer: só existem no mobile (ativados no @media 1024) */
.fmk-pg-filter-toggle,
.fmk-pg-overlay,
.fmk-pg-sidebar-head {
	display: none;
}

.fmk-pg-group {
	margin-bottom: 34px;
}

.fmk-pg-group-title {
	margin: 0 0 18px;
	color: var(--fmk-azul-700);
	font-size: 20px;
	font-weight: 700;
}

.fmk-pg-catlist {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fmk-pg-cat>a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--fmk-azul-500);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: color .3s ease;
}

.fmk-pg-cat>a:hover,
.fmk-pg-cat.is-active>a {
	color: var(--fmk-azul-700);
	font-weight: 700;
}

.fmk-pg-caret {
	width: 5px;
	height: 5px;
	border: solid var(--fmk-azul-500);
	border-width: 0 2px 2px 0;
	transform: rotate(-45deg);
	flex: none;
}

.fmk-pg-sublist {
	margin: 12px 0 0;
	padding: 0 0 0 16px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fmk-pg-sublist a {
	color: var(--fmk-cinza);
	font-size: 14px;
	text-decoration: none;
	transition: color .3s ease;
}

.fmk-pg-sublist a:hover,
.fmk-pg-sublist .is-active a {
	color: var(--fmk-azul-500);
	font-weight: 600;
}

.fmk-pg-main {
	flex: 1 1 0;
	min-width: 0;
}

.fmk-pg-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.fmk-pg-card {
	display: flex;
	flex-direction: column;
	background: var(--fmk-branco);
	border: 1px solid #e6eaf1;
	/* corte diagonal no canto superior direito (igual Figma) */
	clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
	transition: box-shadow .5s ease, transform .5s ease;
}

.fmk-pg-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 34px rgba(16, 31, 53, .14);
}

.fmk-pg-card-media {
	display: block;
	height: 240px;
	overflow: hidden;
}

.fmk-pg-card-media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	transition: transform .7s ease;
}

.fmk-pg-card:hover .fmk-pg-card-media img {
	transform: scale(1.04);
}

.fmk-pg-card-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 18px 10px;
}

/* min-height mantém os cards alinhados quando o produto não tem referência */
.fmk-pg-card-line {
	font-size: 13px;
	line-height: 18px;
	min-height: 18px;
	color: var(--fmk-cinza);
}

.fmk-pg-card-title {
	color: var(--fmk-azul-700);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	height: 44px;
	text-decoration: none;
}

.fmk-pg-card .fmk-btn {
	margin: 12px 18px 18px;
	width: auto;
}

.fmk-pg-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	padding: 40px;
	color: var(--fmk-cinza);
	font-size: 16px;
	text-align: center;
	background: var(--fmk-branco);
	border: 1px solid #e6eaf1;
}

@media (max-width: 1024px) {
	.fmk-catbanner {
		flex-direction: column;
	}

	.fmk-catbanner-content {
		flex: none;
		padding: 40px 28px;
	}

	.fmk-catbanner-media {
		min-height: 220px;
	}

	.fmk-pg {
		flex-direction: column;
		gap: 24px;
	}

	/* botão que abre o drawer */
	.fmk-pg-filter-toggle {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		align-self: flex-end;
		padding: 12px 22px;
		background: var(--fmk-azul-700);
		color: var(--fmk-branco);
		font-size: 16px;
		font-weight: 600;
		border: 0;
		cursor: pointer;
	}

	/* sidebar vira painel off-canvas deslizante */
	.fmk-pg-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 1000;
		width: min(320px, 86%);
		margin: 0;
		padding: 24px 22px 40px;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform .3s var(--fmk-ease);
		box-shadow: 0 12px 40px rgba(16, 31, 53, .2);
	}

	.fmk-pg.is-filter-open .fmk-pg-sidebar {
		transform: translateX(0);
	}

	.fmk-pg-sidebar-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24px;
		padding-bottom: 16px;
		border-bottom: 1px solid #e3e8f0;
	}

	.fmk-pg-sidebar-head span {
		font-size: 20px;
		font-weight: 700;
		color: var(--fmk-azul-700);
	}

	.fmk-pg-filter-close {
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28px;
		line-height: 1;
		background: transparent;
		border: 0;
		color: var(--fmk-azul-700);
		cursor: pointer;
	}

	.fmk-pg-overlay {
		position: fixed;
		inset: 0;
		z-index: 999;
		background: rgba(16, 31, 53, .5);
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease, visibility .3s;
	}

	.fmk-pg.is-filter-open .fmk-pg-overlay {
		opacity: 1;
		visibility: visible;
	}

	.fmk-pg-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.fmk-pg-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Produto (single)
   ============================================================ */

.fmk-ps {
	width: 100%;
}

.fmk-ps .fmk-breadcrumb {
	padding: 0 0 24px;
}

.fmk-ps-hero {
	display: flex;
	gap: 48px;
	align-items: flex-start;
}

.fmk-ps-gallery {
	flex: 0 0 46%;
}

.fmk-ps-main-img {
	border: 1px solid #e6eaf1;
	background: var(--fmk-branco);
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.fmk-ps-main-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}

.fmk-ps-thumbs {
	display: flex;
	gap: 12px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.fmk-ps-thumb {
	width: 78px;
	height: 78px;
	padding: 0;
	border: 1px solid #e6eaf1;
	background: var(--fmk-branco);
	cursor: pointer;
	overflow: hidden;
	transition: border-color .3s ease;
}

.fmk-ps-thumb.is-active,
.fmk-ps-thumb:hover {
	border-color: var(--fmk-azul-500);
}

.fmk-ps-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}

.fmk-ps-info {
	flex: 1 1 0;
	min-width: 0;
}

.fmk-ps-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.fmk-ps-stars {
	display: inline-flex;
	gap: 2px;
}

.fmk-ps-rating-count {
	color: var(--fmk-cinza);
	font-size: 14px;
}

.fmk-ps-title {
	margin: 0 0 8px;
	color: var(--fmk-azul-700);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
}

.fmk-ps-line {
	margin: 0 0 4px;
	color: var(--fmk-cinza);
	font-size: 15px;
}

.fmk-ps-code {
	margin: 0 0 22px;
	color: var(--fmk-cinza);
	font-size: 15px;
}

.fmk-ps-code strong {
	color: var(--fmk-azul-700);
}

/* Quantidade à esquerda + botão ocupando o resto da linha (igual Figma).
   Estilo próprio (sem herdar .fmk-qp-qty da página de orçamento, que é
   cinza e vem depois no arquivo): caixa branca com borda fina e setas. */
.fmk-ps-buy {
	display: flex;
	align-items: stretch;
	gap: 12px;
	margin-top: 26px;
	margin-bottom: 26px;
	padding-top: 26px;
	border-top: 1px solid #e6eaf1;
}

.fmk-ps-qty {
	flex: none;
	display: inline-flex;
	align-items: center;
	background: var(--fmk-branco);
	border: 1px solid #e6eaf1;
}

.fmk-ps-qty button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	align-self: stretch;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fmk-azul-500);
	cursor: pointer;
	transition: color .3s ease;
}

.fmk-ps-qty button:hover {
	color: var(--fmk-azul-700);
}

/* padding + line-height fecham 50px, a mesma altura do botão ao lado */
.fmk-ps-qty .fmk-qty-num {
	min-width: 38px;
	padding: 14px 0;
	text-align: center;
	background: transparent;
	color: var(--fmk-azul-700);
	font-size: 16px;
	line-height: 20px;
	font-weight: 700;
}

.fmk-ps-quote {
	flex: 1 1 auto;
	width: auto;
	margin-bottom: 0;
}

@media (max-width: 480px) {
	.fmk-ps-buy {
		flex-wrap: wrap;
	}

	.fmk-ps-quote {
		flex: 1 1 100%;
	}
}

/* Cartão branco: com o fundo do site em #F2F5FB, o formulário precisa ser
   branco para continuar se destacando (antes a página é que era branca). */
.fmk-ps-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px;
	background: var(--fmk-branco);
}

.fmk-ps-form-row {
	display: flex;
	gap: 14px;
}

.fmk-ps-form input,
.fmk-ps-form textarea {
	flex: 1;
	min-width: 0;
	padding: 13px 14px;
	border: 1px solid #d5dbe6;
	background: var(--fmk-branco);
	font-size: 15px;
	color: var(--fmk-azul-700);
	font-family: inherit;
}

.fmk-ps-form textarea {
	resize: vertical;
}

.fmk-ps-form-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: var(--fmk-cinza);
}

.fmk-ps-form-check input {
	flex: none;
	margin-top: 2px;
}

.fmk-ps-form .fmk-btn {
	align-self: flex-start;
}

/* Descrições técnicas */
.fmk-ps-specs {
	margin-top: 90px;
}

/* Na coluna ao lado da galeria o bloco é estreito: espaçamento e título
   menores que os da versão em largura total. */
.fmk-ps-info .fmk-ps-specs {
	margin-top: 34px;
}

.fmk-ps-info .fmk-ps-specs .fmk-section-title {
	font-size: 20px;
	margin-bottom: 16px;
}

.fmk-ps-specs .fmk-section-title {
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 34px;
}

.fmk-ps-desc {
	color: var(--fmk-cinza);
	font-size: 16px;
	line-height: 1.7;
}

.fmk-ps-desc p {
	margin: 0 0 16px;
}

/* Características técnicas: ocupam o lugar do antigo formulário, na coluna
   de informações ao lado da galeria. */
.fmk-ps-caract {
	background: var(--fmk-branco);
	border: 1px solid #e6eaf1;
	padding: 30px;
}

.fmk-ps-caract-title {
	margin: 0 0 18px;
	color: var(--fmk-azul-700);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.fmk-ps-table {
	width: 100%;
	border-collapse: collapse;
}

.fmk-ps-table th,
.fmk-ps-table td {
	padding: 10px 0;
	text-align: left;
	font-size: 14px;
	vertical-align: top;
	border-bottom: 1px solid #eef1f6;
}

.fmk-ps-table th {
	color: var(--fmk-azul-700);
	font-weight: 700;
	width: 45%;
	padding-right: 12px;
}

.fmk-ps-table td {
	color: var(--fmk-cinza);
}

/* Relacionados */
.fmk-ps-related {
	margin-top: 90px;
}

/* Tipos de aplicação */
.fmk-ps-apps {
	margin-top: 90px;
}

.fmk-ps-apps .fmk-section-title {
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 34px;
}

.fmk-ps-apps-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
}

.fmk-ps-app {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: flex-end;
	padding: 16px;
	background-size: cover;
	background-position: center;
	text-decoration: none;
	overflow: hidden;
}

.fmk-ps-app::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(16, 31, 53, .85) 0%, rgba(16, 31, 53, .1) 60%);
}

.fmk-ps-app-title,
.fmk-ps-app > span {
	position: relative;
	z-index: 1;
	/* !important: em algumas telas (solução single) o tema pinta o span de
	   cinza, deixando o texto escuro sobre o overlay. Forçamos branco. */
	color: var(--fmk-branco) !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

@media (max-width: 1024px) {

	.fmk-ps-hero {
		flex-direction: column;
	}

	.fmk-ps-gallery,
	.fmk-ps-caract {
		flex: none;
		width: 100%;
	}

	.fmk-ps-apps-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.fmk-ps-form-row {
		flex-direction: column;
	}

	.fmk-ps-apps-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   Página de Orçamento (lista)
   ============================================================ */

.fmk-qp {
	width: 100%;
}

/* Banner */
.fmk-qp-banner {
	background: var(--fmk-azul-500);
	padding: 46px 24px 38px;
	text-align: center;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 55px 100%, 0 calc(100% - 55px));
}

.fmk-qp-banner-title {
	margin: 0 0 10px;
	color: var(--fmk-branco);
	font-size: 34px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.fmk-qp-crumb {
	display: flex;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	color: var(--fmk-azul-200);
}

.fmk-qp-crumb a {
	color: var(--fmk-azul-200);
	text-decoration: none;
}

.fmk-qp-crumb a:hover {
	color: var(--fmk-branco);
}

.fmk-qp-crumb .is-current {
	color: var(--fmk-branco);
	font-weight: 600;
}

/* Alertas */
.fmk-qp-alert {
	margin: 24px 0 0;
	padding: 14px 18px;
	font-size: 15px;
}

.fmk-qp-alert.is-ok {
	background: #e8f5ec;
	color: #1c6b39;
	border: 1px solid #b7e0c4;
}

.fmk-qp-alert.is-err {
	background: #fdecec;
	color: #a12626;
	border: 1px solid #f2c2c2;
}

/* Seções */
.fmk-qp-section {
	margin-top: 56px;
}

.fmk-qp-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
}

.fmk-qp-head-left {
	display: flex;
	align-items: center;
	gap: 14px;
}

.fmk-qp-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--fmk-azul-500);
	flex: none;
}

.fmk-qp-h2 {
	margin: 0;
	color: var(--fmk-azul-700);
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
}

.fmk-qp-sub {
	margin: 2px 0 0;
	color: var(--fmk-cinza);
	font-size: 13px;
}

.fmk-qp-count {
	color: var(--fmk-azul-700);
	font-size: 18px;
	font-weight: 700;
}

/* Itens */
.fmk-qp-items {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fmk-qp-item {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px 20px;
	background: var(--fmk-branco);
	border: 1px solid #e6eaf1;
}

.fmk-qp-thumb {
	width: 74px;
	height: 74px;
	flex: none;
	overflow: hidden;
	background: var(--fmk-bg);
}

.fmk-qp-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}

.fmk-qp-info {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.fmk-qp-title {
	color: var(--fmk-azul-500);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.fmk-qp-title:hover {
	color: var(--fmk-azul-700);
}

.fmk-qp-line,
.fmk-qp-code {
	color: var(--fmk-cinza);
	font-size: 13px;
}

/* Stepper */
.fmk-qp-qty {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.fmk-qp-qty button {
	width: 34px;
	height: 34px;
	border: 0;
	background: var(--fmk-bg);
	color: var(--fmk-azul-500);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .3s ease;
}

.fmk-qp-qty button:hover {
	background: var(--fmk-azul-200);
}

.fmk-qp-qtynum {
	min-width: 40px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fmk-bg);
	color: var(--fmk-azul-700);
	font-weight: 700;
	font-size: 14px;
}

.fmk-qp-remove {
	width: 30px;
	height: 30px;
	flex: none;
	border: 0;
	background: transparent;
	color: var(--fmk-cinza);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: color .3s ease;
}

.fmk-qp-remove:hover {
	color: #a12626;
}

.fmk-qp-empty {
	margin: 0;
	padding: 40px;
	background: var(--fmk-branco);
	border: 1px dashed #d5dbe6;
	color: var(--fmk-cinza);
	text-align: center;
	font-size: 15px;
}

/* Formulário */
.fmk-qp-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
	background: var(--fmk-branco);
	border: 1px solid #e6eaf1;
}

.fmk-qp-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.fmk-qp-form input[type="text"],
.fmk-qp-form input[type="email"],
.fmk-qp-form textarea {
	width: 100%;
	padding: 13px 15px;
	border: 0;
	background: var(--fmk-bg);
	font-size: 15px;
	color: var(--fmk-azul-700);
	font-family: inherit;
}

.fmk-qp-form textarea {
	resize: vertical;
}

.fmk-qp-file {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--fmk-bg);
	cursor: pointer;
}

.fmk-qp-file-ico {
	display: flex;
	flex: none;
}

.fmk-qp-file-txt {
	display: flex;
	flex-direction: column;
}

.fmk-qp-file-txt strong {
	color: var(--fmk-azul-700);
	font-size: 14px;
}

.fmk-qp-file-txt small {
	color: var(--fmk-cinza);
	font-size: 12px;
}

.fmk-qp-file input[type="file"] {
	margin-left: auto;
	font-size: 13px;
	color: var(--fmk-cinza);
	max-width: 50%;
}

.fmk-qp-form-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.fmk-qp-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--fmk-cinza);
	max-width: 360px;
}

.fmk-qp-check input {
	flex: none;
	margin-top: 2px;
}

.fmk-qp-check a {
	color: var(--fmk-azul-500);
}

/* Feedback do botão adicionar */
.fmk-add-quote {
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

.fmk-add-quote.is-added {
	background: #1c6b39 !important;
}

@media (max-width: 768px) {
	.fmk-qp-form-grid {
		grid-template-columns: 1fr;
	}

	.fmk-qp-item {
		flex-wrap: wrap;
		gap: 14px;
	}

	.fmk-qp-info {
		flex: 1 1 60%;
	}

	.fmk-qp-form-footer {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ============================================================
   Botão de carrinho (header) + Carrinho lateral (drawer)
   ============================================================ */

.fmk-cart-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--fmk-azul-500);
	text-decoration: none;
	transition: color .3s ease;
}

.fmk-cart-btn:hover {
	color: var(--fmk-azul-700);
}

.fmk-cart-badge {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fmk-azul-500);
	color: var(--fmk-branco);
	border-radius: 10px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* Drawer */
.fmk-drawer {
	position: fixed;
	inset: 0;
	z-index: 999999;
	visibility: hidden;
	pointer-events: none;
}

/* O botão "voltar ao topo" do tema cria seu próprio contexto de empilhamento
   e passa por cima do drawer. Esconde enquanto o carrinho lateral está aberto. */
body.fmk-drawer-open .uicore-back-to-top,
body.fmk-drawer-open #uicore-back-to-top {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.fmk-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.fmk-drawer-overlay {
	position: absolute;
	inset: 0;
	background: rgba(16, 31, 53, .5);
	opacity: 0;
	transition: opacity .35s ease;
}

.fmk-drawer.is-open .fmk-drawer-overlay {
	opacity: 1;
}

.fmk-drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 380px;
	max-width: 90vw;
	display: flex;
	flex-direction: column;
	background: var(--fmk-branco);
	box-shadow: -10px 0 40px rgba(16, 31, 53, .2);
	transform: translateX(100%);
	transition: transform .4s var(--fmk-ease);
}

.fmk-drawer.is-open .fmk-drawer-panel {
	transform: none;
}

.fmk-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 22px;
	background: var(--fmk-azul-500);
}

.fmk-drawer-head h3 {
	margin: 0;
	color: var(--fmk-branco);
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
}

.fmk-drawer-close {
	width: 30px;
	height: 30px;
	border: 0;
	background: transparent;
	color: var(--fmk-branco);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.fmk-drawer-items {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 8px 0;
}

.fmk-drawer-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 22px;
	border-bottom: 1px solid #eef1f6;
}

.fmk-drawer-thumb {
	width: 56px;
	height: 56px;
	flex: none;
	background: var(--fmk-bg);
	overflow: hidden;
}

.fmk-drawer-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}

.fmk-drawer-info {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fmk-drawer-title {
	color: var(--fmk-azul-700);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.fmk-drawer-title:hover {
	color: var(--fmk-azul-500);
}

.fmk-drawer-qty {
	display: flex;
	align-items: center;
	gap: 6px;
}

.fmk-drawer-qty button {
	width: 26px;
	height: 26px;
	border: 0;
	background: var(--fmk-bg);
	color: var(--fmk-azul-500);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.fmk-drawer-qty .fmk-qp-qtynum {
	min-width: 32px;
	height: 26px;
	font-size: 13px;
}

.fmk-drawer-empty {
	margin: 0;
	padding: 40px 22px;
	color: var(--fmk-cinza);
	text-align: center;
	font-size: 14px;
}

.fmk-drawer-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 22px;
	border-top: 1px solid #eef1f6;
}

.fmk-drawer-foot .fmk-cart-items-label {
	color: var(--fmk-azul-700);
	font-weight: 700;
	font-size: 15px;
}

@media (max-width: 1024px) {
	.fmk-cart-btn {
		margin-left: auto;
	}
}

/* ============================================================
   PÁGINA SOBRE
   Cada widget é full-width; o conteúdo é encaixotado em 1380px
   via .fmk-sh-inner, para que os fundos continuem sangrando.
   ============================================================ */

.fmk-sh,
.fmk-swhy,
.fmk-sess,
.fmk-stl,
.fmk-svid,
.fmk-sst {
	width: 100%;
}

.fmk-sh-inner {
	max-width: 1380px;
	margin: 0 auto;
}

/* no mobile o container do Elementor deixa de dar margem lateral;
   garantimos o respiro aqui para o conteúdo não colar nas bordas */
@media (max-width: 1024px) {
	.fmk-sh-inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ---------- Sobre :: Hero + Missão/Visão/Valores ---------- */

.fmk-sh-top {
	padding-top: 60px;
}

.fmk-sh-top .fmk-sh-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}

.fmk-sh-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 38px;
	padding-top: 70px;
}

.fmk-sh-title {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--fmk-azul-500);
	text-transform: uppercase;
}

.fmk-sh-lead {
	margin: 0;
	max-width: 580px;
	font-size: 18px;
	line-height: 1.5;
	color: var(--fmk-azul-500);
}

/* A imagem invade verticalmente a faixa azul (igual ao Figma) */
.fmk-sh-media {
	position: relative;
	z-index: 2;
	aspect-ratio: 1;
	margin-bottom: -240px;
	clip-path: polygon(48px 0, 100% 0, 100% 100%, 0 100%, 0 48px);
}

.fmk-sh-media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.fmk-sh-since {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 33.4%;
	height: 28%;
	padding: 26px 22px 18px 30px;
	background: var(--fmk-branco);
	clip-path: polygon(48px 0, 100% 0, 100% 100%, 0 100%, 0 48px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.fmk-sh-since-label {
	font-size: 18px;
	color: var(--fmk-azul-500);
}

.fmk-sh-since-year {
	font-size: 55px;
	font-weight: 700;
	line-height: 1;
	text-align: right;
	color: var(--fmk-azul-500);
}

.fmk-sh-mvv {
	position: relative;
	z-index: 1;
	background: var(--fmk-azul-500);
	padding: 87px 0 70px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 60px 100%, 0 calc(100% - 60px));
}

/* Mesma grade do hero, com a coluna de texto um pouco mais larga, para que as
   três abas caibam sem passar por baixo da imagem. */
.fmk-sh-mvv .fmk-sh-inner {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 60px;
}

.fmk-sh-mvv-box {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.fmk-sh-tabs {
	display: flex;
	align-items: center;
	border-bottom: 2px solid rgba(255, 255, 255, .1);
}

.fmk-sh-tab {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	padding: 10px 22px;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
	font-size: clamp(15px, 1.6vw, 22px);
	font-weight: 700;
	color: var(--fmk-azul-200);
	transition: color .4s var(--fmk-ease), border-color .4s var(--fmk-ease);
}

.fmk-sh-tab:first-child {
	padding-left: 0;
}

.fmk-sh-tab:hover {
	color: var(--fmk-branco);
}

.fmk-sh-tab.is-active {
	color: var(--fmk-branco);
	border-bottom-color: var(--fmk-branco);
}

.fmk-sh-tab-ico {
	display: flex;
}

.fmk-sh-tab-ico svg {
	width: 20px;
	height: 20px;
}

.fmk-sh-panes {
	min-height: 81px;
}

.fmk-sh-pane {
	display: none;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--fmk-branco);
}

.fmk-sh-pane.is-active {
	display: block;
	animation: fmk-pane-in .45s var(--fmk-ease);
}

/* título dentro do pane: só aparece no modo empilhado (mobile) */
.fmk-sh-pane-title {
	display: none;
}

@keyframes fmk-pane-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Sobre :: Por que a FAMAK ---------- */

.fmk-swhy {
	position: relative;
	background: var(--fmk-azul-500);
	padding: 100px 0;
	overflow: hidden;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 60px 100%, 0 calc(100% - 60px));
}

.fmk-swhy-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	opacity: .5;
}

/* gradiente separado do fundo para não herdar o opacity da foto */
.fmk-swhy::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(29, 57, 96, .85) 35%, rgba(29, 57, 96, 0));
}

.fmk-swhy-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.fmk-swhy-title {
	margin: 0;
	max-width: 550px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--fmk-branco);
	text-transform: uppercase;
}

.fmk-swhy-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

.fmk-swhy-card {
	background: var(--fmk-branco);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	transition: transform .5s var(--fmk-ease), box-shadow .5s var(--fmk-ease);
}

.fmk-swhy-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 18px 40px rgba(16, 31, 53, .28);
}

.fmk-swhy-card-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--fmk-azul-500);
}

.fmk-swhy-card-text {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--fmk-azul-400);
}

/* ---------- Sobre :: Nossa essência ---------- */

.fmk-sess {
	display: flex;
	align-items: stretch;
}

.fmk-sess-body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 52px;
	padding: 90px 60px 90px max(20px, calc((100vw - 1380px) / 2));
}

.fmk-sess-title {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--fmk-azul-700);
	text-transform: uppercase;
}

.fmk-sess-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 52px;
}

.fmk-sess-item {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fmk-sess-item-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--fmk-azul-500);
}

.fmk-sess-item-text {
	margin: 0;
	font-size: 18px;
	line-height: 1.4;
	color: var(--fmk-azul-400);
}

.fmk-sess-media {
	flex: 0 0 46.7%;
	overflow: hidden;
}

.fmk-sess-media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* ---------- Sobre :: Linha do tempo ---------- */

/* Faixa própria: os cards são brancos e precisam do cinza-azulado do Figma
   atrás deles, independente da cor de fundo da página. */
.fmk-stl {
	background: var(--fmk-bg);
	padding: 90px 0;
	overflow: hidden;
}

/* O trilho sangra até a borda direita da tela, para os cards entrarem
   "de fora" quando o carrossel roda. */
.fmk-stl-inner {
	max-width: none;
	margin: 0;
	padding-left: max(20px, calc((100vw - 1380px) / 2));
	padding-right: 0;
	display: grid;
	grid-template-columns: 436px 1fr;
	gap: 80px;
	align-items: start;
}

.fmk-stl-head {
	display: flex;
	flex-direction: column;
	gap: 84px;
}

.fmk-stl-title {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--fmk-azul-700);
	text-transform: uppercase;
}

.fmk-stl-track {
	display: flex;
	gap: 90px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.fmk-stl-track::-webkit-scrollbar {
	display: none;
}

.fmk-stl-slide {
	flex: 0 0 350px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.fmk-stl-year {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fmk-stl-year-num {
	font-size: 28px;
	font-weight: 700;
	color: var(--fmk-azul-500);
}

/* linha contínua: cada marcador estende a régua até o próximo slide */
.fmk-stl-marker {
	position: relative;
	display: block;
	height: 24px;
}

.fmk-stl-marker::before {
	content: "";
	position: absolute;
	left: 0;
	right: -90px;
	top: 50%;
	height: 1px;
	background: var(--fmk-azul-500);
}

/* a régua do último marco continua para fora da tela */
.fmk-stl-slide:last-child .fmk-stl-marker::before {
	right: -100vw;
}

.fmk-stl-marker::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--fmk-bg);
	border: 1px solid var(--fmk-azul-500);
}

.fmk-stl-card {
	min-height: 360px;
	padding: 24px;
	background: var(--fmk-branco);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(100% - 48px) 100%, 0 100%);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fmk-stl-card-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--fmk-azul-500);
}

.fmk-stl-card-text {
	font-size: 18px;
	line-height: 1.5;
	color: var(--fmk-azul-400);
}

/* ---------- Sobre :: Banner de vídeo ---------- */

.fmk-svid {
	position: relative;
	height: 700px;
	overflow: hidden;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 100px 100%, 0 calc(100% - 100px));
}

.fmk-svid-poster,
.fmk-svid-media {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.fmk-svid-overlay {
	position: absolute;
	inset: 0;
	background: rgba(29, 57, 96, .4);
}

.fmk-svid-title {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	color: var(--fmk-branco);
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
}

.fmk-svid-play {
	position: absolute;
	right: 117px;
	bottom: 117px;
	width: 70px;
	height: 70px;
	border: 0;
	background: var(--fmk-azul-500);
	color: var(--fmk-branco);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .4s var(--fmk-ease), transform .4s var(--fmk-ease);
}

.fmk-svid-play:hover {
	background: var(--fmk-azul-700);
	transform: scale(1.08);
}

.fmk-svid.is-playing .fmk-svid-poster,
.fmk-svid.is-playing .fmk-svid-overlay,
.fmk-svid.is-playing .fmk-svid-title {
	display: none;
}

/* YouTube/Vimeo assumem os próprios controles; o botão sai de cena */
.fmk-svid.is-embed .fmk-svid-play {
	display: none;
}

.fmk-svid-ico-pause {
	display: none;
}

.fmk-svid.is-playing .fmk-svid-ico-play {
	display: none;
}

.fmk-svid.is-playing .fmk-svid-ico-pause {
	display: block;
}

.fmk-svid iframe,
.fmk-svid video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* ---------- Sobre :: Números ---------- */

.fmk-sst-inner {
	display: grid;
	grid-template-columns: 57% 43%;
	align-items: stretch;
}

.fmk-sst-box {
	min-height: 460px;
	padding: 70px 60px;
	background: var(--fmk-azul-500);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 60px 100%, 0 calc(100% - 60px));
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
}

.fmk-sst-title {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--fmk-branco);
	text-transform: uppercase;
}

.fmk-sst-row {
	display: flex;
	gap: 30px;
}

.fmk-sst-item {
	flex: 1 1 0;
	min-width: 0;
	padding: 24px 24px 24px 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fmk-sst-num {
	font-size: 28px;
	font-weight: 700;
	color: var(--fmk-branco);
}

.fmk-sst-label {
	font-size: 18px;
	color: var(--fmk-branco);
}

.fmk-sst-media {
	position: relative;
	overflow: hidden;
}

.fmk-sst-media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.fmk-sst-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(29, 57, 96, .2);
}

/* ---------- Sobre :: responsivo ---------- */

@media (max-width: 1200px) {

	.fmk-sh-title,
	.fmk-swhy-title,
	.fmk-sess-title,
	.fmk-stl-title,
	.fmk-svid-title,
	.fmk-sst-title {
		font-size: 32px;
	}

	.fmk-stl-inner {
		grid-template-columns: 320px 1fr;
		gap: 48px;
	}
}

@media (max-width: 1024px) {

	.fmk-sh-top .fmk-sh-inner,
	.fmk-sh-mvv .fmk-sh-inner,
	.fmk-swhy-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.fmk-sh-text {
		padding-top: 40px;
	}

	.fmk-sh-media {
		margin-bottom: 0;
	}

	.fmk-sh-mvv {
		padding: 50px 0;
	}

	.fmk-sess {
		flex-direction: column;
	}

	.fmk-sess-body {
		padding: 60px 20px;
	}

	.fmk-sess-media {
		flex: 0 0 auto;
		width: 100%;
		height: 420px;
	}

	.fmk-stl-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.fmk-stl-head {
		gap: 32px;
	}

	.fmk-svid {
		max-height: 460px;
	}

	.fmk-svid-play {
		right: 40px;
		bottom: 40px;
	}

	.fmk-sst-inner {
		grid-template-columns: 1fr;
	}

	.fmk-sst-box {
		min-height: 0;
		padding: 50px 30px;
	}

	.fmk-sst-media {
		height: 320px;
	}
}

@media (max-width: 700px) {

	.fmk-swhy-grid,
	.fmk-sess-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* MVV empilhado e aberto: esconde as abas, mostra os 3 panes com título */
	.fmk-sh-tabs {
		display: none;
	}

	.fmk-sh-panes {
		min-height: 0;
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	.fmk-sh-pane {
		display: block !important;
		animation: none !important;
	}

	.fmk-sh-pane-title {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 12px;
		font-size: 20px;
		font-weight: 700;
		color: var(--fmk-branco);
	}

	.fmk-sh-pane-title .fmk-sh-tab-ico svg {
		width: 22px;
		height: 22px;
	}

	.fmk-sh-since {
		width: 46%;
		height: 34%;
		padding: 18px 16px 14px 22px;
	}

	.fmk-sh-since-year {
		font-size: 36px;
	}

	.fmk-stl-slide {
		flex: 0 0 84vw;
	}

	.fmk-sst-row {
		flex-direction: column;
		gap: 0;
	}

	.fmk-svid-title {
		white-space: normal;
		width: 90%;
	}
}

/* ============================================================
   PÁGINA CONTATO
   ============================================================ */

.fmk-pbanner,
.fmk-ct,
.fmk-map {
	width: 100%;
}

/* ---------- Contato :: banner de página ---------- */

.fmk-pbanner-box {
	background: var(--fmk-azul-500);
	padding: 62px 40px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 60px 100%, 0 calc(100% - 60px));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.fmk-pbanner-title {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--fmk-branco);
	text-transform: uppercase;
	text-align: center;
}

.fmk-pbanner-crumb {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--fmk-branco);
}

.fmk-pbanner-crumb a {
	color: #A4A4A4;
	text-decoration: none;
	transition: color .3s var(--fmk-ease);
}

.fmk-pbanner-crumb a:hover {
	color: var(--fmk-branco);
}

.fmk-pbanner-sep {
	color: #A4A4A4;
}

/* ---------- Contato :: infos + formulário ---------- */

.fmk-ct-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: start;
}

.fmk-ct-left {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.fmk-ct-head {
	display: flex;
	flex-direction: column;
	gap: 38px;
}

.fmk-ct-title {
	margin: 0;
	font-weight: 700;
	line-height: 1.15;
	color: var(--fmk-azul-500);
	text-transform: uppercase;
}

.fmk-ct-intro {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--fmk-azul-500);
}

.fmk-ct-cards {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fmk-ct-card {
	background: var(--fmk-branco);
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 18px;
	text-decoration: none;
	transition: transform .4s var(--fmk-ease), box-shadow .4s var(--fmk-ease);
}

a.fmk-ct-card:hover {
	transform: translateX(6px);
	box-shadow: 0 12px 28px rgba(16, 31, 53, .12);
}

.fmk-ct-card-ico {
	flex: 0 0 53px;
	width: 53px;
	height: 53px;
	background: var(--fmk-azul-500);
	color: var(--fmk-branco);
	display: flex;
	align-items: center;
	justify-content: center;
}

.fmk-ct-card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.fmk-ct-card-label {
	font-size: 16px;
	line-height: 1.5;
	color: var(--fmk-azul-400);
	text-transform: uppercase;
	letter-spacing: .32px;
}

.fmk-ct-card-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--fmk-azul-500);
}

/* Formulário */

.fmk-ct-form {
	background: var(--fmk-branco);
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.fmk-ct-radios {
	display: flex;
	gap: 28px;
}

.fmk-ct-radio {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 16px;
	color: var(--fmk-azul-500);
}

/* o input nativo fica escondido; o círculo é o .fmk-ct-radio-dot */
.fmk-ct-radio input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.fmk-ct-radio-dot {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid #EEE;
	background: #E8EBEF;
	transition: background-color .3s var(--fmk-ease);
}

.fmk-ct-radio input:checked+.fmk-ct-radio-dot {
	background: var(--fmk-azul-500);
}

.fmk-ct-radio input:focus-visible+.fmk-ct-radio-dot {
	outline: 2px solid var(--fmk-azul-500);
	outline-offset: 2px;
}

.fmk-ct-field {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.fmk-ct-label {
	font-size: 16px;
	color: var(--fmk-azul-500);
}

.fmk-ct-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.fmk-ct-form input[type="text"],
.fmk-ct-form input[type="email"],
.fmk-ct-form input[type="tel"],
.fmk-ct-form select,
.fmk-ct-form textarea {
	width: 100%;
	background: #E8EBEF;
	border: 1px solid #EEE;
	border-radius: 0;
	padding: 8px 8px 8px 20px;
	font-family: inherit;
	font-size: 16px;
	color: var(--fmk-azul-500);
}

.fmk-ct-form input[type="text"],
.fmk-ct-form input[type="email"],
.fmk-ct-form input[type="tel"],
.fmk-ct-form select {
	height: 50px;
}

.fmk-ct-form textarea {
	min-height: 121px;
	padding-top: 16px;
	resize: vertical;
}

.fmk-ct-form ::placeholder {
	color: var(--fmk-azul-500);
	opacity: .75;
}

.fmk-ct-file {
	display: flex;
	align-items: center;
	gap: 18px;
	cursor: pointer;
}

.fmk-ct-file input[type="file"] {
	display: none;
}

.fmk-ct-file-ico {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border: 1px dashed var(--fmk-azul-500);
	color: var(--fmk-azul-500);
	display: flex;
	align-items: center;
	justify-content: center;
}

.fmk-ct-file-txt {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fmk-ct-file-txt strong {
	font-size: 18px;
	font-weight: 400;
	color: var(--fmk-azul-500);
}

.fmk-ct-file-txt small {
	font-size: 14px;
	color: #8E8E8E;
}

.fmk-ct-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.fmk-ct-check {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 278px;
	font-size: 14px;
	line-height: 1.4;
	color: #151515;
	cursor: pointer;
}

.fmk-ct-check input {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border: 1px solid var(--fmk-neutral-200, #ECECEC);
	border-radius: 0;
	accent-color: var(--fmk-azul-500);
}

.fmk-ct-check a {
	color: inherit;
	text-decoration: underline;
}

/* ---------- Contato :: mapa ---------- */

.fmk-map-frame {
	position: relative;
	width: 100%;
	height: 460px;
	overflow: hidden;
}

.fmk-map-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Contato :: responsivo ---------- */

@media (max-width: 1200px) {

	.fmk-pbanner-title,
	.fmk-ct-title {
		font-size: 32px;
	}

	.fmk-ct-inner {
		gap: 48px;
	}
}

@media (max-width: 1024px) {

	.fmk-ct-inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.fmk-ct-form {
		padding: 28px;
	}

	.fmk-map-frame {
		height: 360px;
	}
}

@media (max-width: 700px) {

	.fmk-ct-row {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.fmk-ct-foot {
		flex-direction: column;
		align-items: stretch;
	}

	.fmk-ct-check {
		max-width: none;
	}

	.fmk-pbanner-box {
		padding: 40px 24px;
	}
}

/* ============================================================
   PÁGINA TRABALHE CONOSCO
   ============================================================ */

.fmk-cv,
.fmk-vagas {
	width: 100%;
}

.fmk-cv-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: start;
}

.fmk-cv-left {
	display: flex;
	flex-direction: column;
	gap: 54px;
}

.fmk-cv-block {
	display: flex;
	flex-direction: column;
	gap: 38px;
}

.fmk-cv-title {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--fmk-azul-500);
	text-transform: uppercase;
}

.fmk-cv-sub {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--fmk-azul-500);
	text-transform: uppercase;
}

.fmk-cv-text {
	font-size: 18px;
	line-height: 1.5;
	color: var(--fmk-azul-500);
}

.fmk-cv-text p {
	margin: 0 0 1em;
}

.fmk-cv-text p:last-child {
	margin-bottom: 0;
}

.fmk-cv-text a {
	color: inherit;
	text-decoration: underline;
}

.fmk-cv-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.fmk-cv-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	line-height: 1.5;
	color: var(--fmk-azul-500);
}

.fmk-cv-bullet {
	flex: 0 0 26px;
	display: flex;
	color: var(--fmk-azul-500);
}

.fmk-cv-form-title {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--fmk-azul-500);
}

/* linha de 2 colunas (nome + e-mail); a de 3 vem do formulário de contato */
.fmk-ct-row.is-2 {
	grid-template-columns: repeat(2, 1fr);
}

/* ---------- Trabalhe conosco :: vagas ---------- */

.fmk-vagas-title {
	margin: 0 0 38px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--fmk-azul-500);
	text-transform: uppercase;
}

.fmk-vagas-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	align-items: stretch;
}

.fmk-vaga-card {
	background: var(--fmk-branco);
	padding: 30px;
	min-height: 327px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 58px 100%, 0 calc(100% - 58px));
	transition: transform .45s var(--fmk-ease), box-shadow .45s var(--fmk-ease);
}

.fmk-vaga-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(16, 31, 53, .14);
}

.fmk-vaga-nome {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--fmk-azul-700);
}

.fmk-vaga-desc,
.fmk-vaga-req {
	font-size: 16px;
	line-height: 1.5;
	color: var(--fmk-azul-500);
}

.fmk-vaga-desc p {
	margin: 0 0 .5em;
}

.fmk-vaga-desc p:last-child {
	margin-bottom: 0;
}

.fmk-vaga-req strong {
	display: block;
	font-weight: 400;
}

.fmk-vagas-empty {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--fmk-azul-400);
}

/* ---------- Trabalhe conosco :: responsivo ---------- */

@media (max-width: 1200px) {
	.fmk-cv-title {
		font-size: 32px;
	}

	.fmk-cv-inner {
		gap: 48px;
	}

	.fmk-vagas-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.fmk-cv-inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.fmk-cv-list li {
		align-items: flex-start;
	}
}

@media (max-width: 900px) {
	.fmk-vagas-grid {
		grid-template-columns: 1fr !important;
	}

	.fmk-vaga-card {
		min-height: 200px;
	}
}

@media (max-width: 700px) {
	.fmk-ct-row.is-2 {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   BLOG / CONTEÚDO
   ============================================================ */

.fmk-blog,
.fmk-art {
	width: 100%;
}

/* ---------- Blog :: listagem ---------- */

.fmk-blog-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 40px;
	border-bottom: 1px solid rgba(29, 57, 96, .12);
}

.fmk-blog-tab {
	position: relative;
	padding: 0 0 12px;
	font-size: 18px;
	color: var(--fmk-azul-400);
	text-decoration: none;
	transition: color .35s var(--fmk-ease);
}

.fmk-blog-tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--fmk-azul-500);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--fmk-ease);
}

.fmk-blog-tab:hover {
	color: var(--fmk-azul-500);
}

.fmk-blog-tab.is-active {
	font-weight: 700;
	color: var(--fmk-azul-500);
}

.fmk-blog-tab.is-active::after,
.fmk-blog-tab:hover::after {
	transform: scaleX(1);
}

.fmk-blog-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	/* stretch: todos os cards da linha ficam com a mesma altura; a imagem
	   (margin-top:auto + altura fixa) alinha na base, como na home */
	align-items: stretch;
}

.fmk-blog-empty {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--fmk-azul-400);
}

/* Paginação */

.fmk-blog-pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 60px;
}

.fmk-blog-page {
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fmk-branco);
	border: 1px solid rgba(29, 57, 96, .18);
	font-size: 16px;
	color: var(--fmk-azul-500);
	text-decoration: none;
	transition: background-color .35s var(--fmk-ease), color .35s var(--fmk-ease);
}

.fmk-blog-page:hover {
	background: var(--fmk-azul-200);
}

.fmk-blog-page.is-active,
.fmk-blog-page.is-next {
	background: var(--fmk-azul-500);
	border-color: var(--fmk-azul-500);
	color: var(--fmk-branco);
	font-weight: 700;
}

.fmk-blog-page.is-next {
	margin-left: 16px;
}

.fmk-blog-page.is-active:hover,
.fmk-blog-page.is-next:hover {
	background: var(--fmk-azul-700);
}

/* ---------- Blog :: artigo ---------- */

.fmk-art-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 45px;
	align-items: start;
}

/* !important: o tema aplica um estilo de h1 (16px cinza) que vence por
   ordem de carga; forçamos o título do artigo no tamanho correto. */
.fmk-art .fmk-art-title,
.fmk-art-title {
	margin: 0 0 32px !important;
	font-size: 40px !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	color: var(--fmk-azul-700) !important;
	text-transform: none !important;
}

@media screen and (max-width: 1024px) {

	.fmk-art .fmk-art-title,
	.fmk-art-title {
		font-size: 26px !important;
	}
}

/* Nos posts, o tema (Outgrid) já renderiza um hero com a imagem destacada e
   o título sobrepostos — redundante com o nosso widget. Escondemos para o
   artigo começar limpo, com um único título e sem imagem no topo. */
body.single-post .uicore-page-title {
	display: none;
}

.fmk-art-body {
	line-height: 1.7;
	color: #4a4a48;
}

.fmk-art-body> :first-child {
	margin-top: 0;
}

.fmk-art-body> :last-child {
	margin-bottom: 0;
}

.fmk-art-body p {
	margin: 0 0 40px;
}

.fmk-art-body h2,
.fmk-art-body h3,
.fmk-art-body h4 {
	margin: 40px 0 20px;
	color: var(--fmk-azul-700);
	line-height: 1.2;
}

.fmk-art-body h2 {
	font-size: 24px;
}

.fmk-art-body h3 {
	font-size: 20px;
}

.fmk-art-body h4 {
	font-size: 22px;
}

.fmk-art-body img,
.fmk-art-body iframe {
	display: block;
	width: 100%;
	height: auto;
	margin: 40px 0;
}

.fmk-art-body figure {
	margin: 40px 0;
}

.fmk-art-body a {
	color: var(--fmk-azul-500);
	text-decoration: underline;
}

.fmk-art-body ul,
.fmk-art-body ol {
	margin: 0 0 40px;
	padding-left: 24px;
}

.fmk-art-body li {
	margin-bottom: 12px;
}

/* citação: filete azul à esquerda e texto menor que o corpo */
.fmk-art-body blockquote {
	margin: 40px 0;
	padding: 0 24px;
	border-left: 8px solid var(--fmk-azul-500);
	font-size: 18px;
	line-height: 1.5;
	color: #000;
}

.fmk-art-body blockquote p:last-child {
	margin-bottom: 0;
}

/* Barra lateral */

.fmk-art-side {
	display: flex;
	flex-direction: column;
	gap: 40px;
	position: sticky;
	top: 140px;
}

.fmk-art-block {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fmk-art-side-title {
	margin: 0;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.2;
	color: #191615;
}

.fmk-art-divider {
	margin: 0;
	border: 0;
	border-top: 1px solid rgba(25, 22, 21, .18);
}

.fmk-art-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.fmk-art-tag {
	padding: 8px 16px;
	border: 1px solid var(--fmk-azul-500);
	font-size: 14px;
	color: var(--fmk-azul-500);
	text-decoration: none;
	transition: background-color .35s var(--fmk-ease), color .35s var(--fmk-ease);
}

.fmk-art-tag:hover {
	background: var(--fmk-azul-500);
	color: var(--fmk-branco);
}

.fmk-art-share {
	display: flex;
	align-items: center;
	gap: 16px;
}

.fmk-art-share-btn {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fmk-azul-500);
	color: var(--fmk-branco);
	text-decoration: none;
	transition: background-color .35s var(--fmk-ease), transform .35s var(--fmk-ease);
}

.fmk-art-share-btn:hover {
	background: var(--fmk-azul-700);
	transform: translateY(-3px);
}

/* ---------- Blog :: responsivo ---------- */

@media (max-width: 1200px) {

	.fmk-art-title {
		font-size: 32px;
	}

	.fmk-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {

	.fmk-art-inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.fmk-art-side {
		position: static;
	}
}

@media (max-width: 700px) {

	.fmk-blog-grid {
		grid-template-columns: 1fr !important;
	}

	.fmk-blog-filter {
		gap: 20px;
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}

	.fmk-blog-filter::-webkit-scrollbar {
		display: none;
	}

	.fmk-blog-tab {
		white-space: nowrap;
	}

	.fmk-art-body {
		font-size: 16px;
	}
}

/* ============================================================
   SOLUÇÕES
   ============================================================ */

.fmk-sol {
	width: 100%;
}

.fmk-sol-title {
	margin: 0 0 40px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--fmk-azul-700);
	text-transform: uppercase;
}

.fmk-sol-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	align-items: stretch;
}

.fmk-sol-card {
	display: flex;
	flex-direction: column;
	background: var(--fmk-branco);
}

.fmk-sol-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 11;
	background: var(--fmk-azul-500);
	overflow: hidden;
}

.fmk-sol-media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform .6s var(--fmk-ease);
}

.fmk-sol-card:hover .fmk-sol-media img {
	transform: scale(1.06);
}

.fmk-sol-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	background: var(--fmk-azul-700);
	color: var(--fmk-branco);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .35s var(--fmk-ease), transform .35s var(--fmk-ease);
}

.fmk-sol-media:hover .fmk-sol-play {
	background: var(--fmk-azul-500);
	transform: translate(-50%, -50%) scale(1.1);
}

.fmk-sol-body {
	flex: 1 1 auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.fmk-sol-tag {
	padding: 4px 12px;
	background: var(--fmk-azul-500);
	font-size: 13px;
	color: var(--fmk-branco);
}

.fmk-sol-name {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--fmk-azul-700);
}

.fmk-sol-name a {
	color: inherit;
	text-decoration: none;
}

.fmk-sol-excerpt {
	margin: 0;
	flex: 1 1 auto;
	font-size: 15px;
	line-height: 1.5;
	color: var(--fmk-azul-400);
}

.fmk-sol-link {
	font-size: 15px;
	font-weight: 700;
	color: var(--fmk-azul-500);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	transition: opacity .3s var(--fmk-ease);
}

.fmk-sol-link:hover {
	opacity: .65;
}

.fmk-sol-empty {
	margin: 0;
	font-size: 18px;
	color: var(--fmk-azul-400);
}

/* ---------- Solução :: single ---------- */

.fmk-solp-obs {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--fmk-azul-400);
}

.fmk-solp-block {
	margin-top: 80px;
}

/* Mesmos títulos de seção da tela de produto (.fmk-ps-specs). Sem isto a
   solução herdava o h2 do tema, e "Tipos de Aplicação" — que pega a regra de
   .fmk-ps-apps — ficava diferente das outras seções da mesma página. */
.fmk-solp .fmk-section-title {
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 34px;
}

/* Mesmo corpo de texto da tela de produto (.fmk-ps-desc): as duas telas
   mostram descrição técnica e precisam ler igual. */
.fmk-solp-rich {
	font-size: 16px;
	line-height: 1.7;
	color: var(--fmk-cinza);
}

.fmk-solp-rich p {
	margin: 0 0 1em;
}

.fmk-solp-rich p:last-child {
	margin-bottom: 0;
}

.fmk-solp-rich ul,
.fmk-solp-rich ol {
	margin: 0 0 1em;
	padding-left: 22px;
}

.fmk-solp-rich li {
	margin-bottom: 8px;
}

@media (max-width: 1200px) {

	.fmk-sol-title {
		font-size: 32px;
	}

	.fmk-sol-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {

	.fmk-sol-grid {
		grid-template-columns: 1fr !important;
	}

	.fmk-solp-block {
		margin-top: 48px;
	}
}

/* ---------- Solução :: hero sobre faixa azul ---------- */

/* A faixa azul sangra de ponta a ponta mesmo dentro do container do Elementor.
   Margem negativa (em vez de width:100vw) para não criar scroll horizontal
   quando a barra de rolagem ocupa espaço. */
.fmk-solp-hero {
	width: auto;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding: 24px 20px 60px;
	background: var(--fmk-azul-500);
}

/* Container igual ao do resto do site: a faixa azul sangra, mas o conteúdo
   alinha com as demais seções (1380px do .fmk-sh-inner padrão). */
.fmk-solp .fmk-sh-inner {
	margin-left: auto;
	margin-right: auto;
}

.fmk-solp-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	font-size: 13px;
	color: var(--fmk-branco);
}

.fmk-solp-crumb a,
.fmk-solp-crumb span {
	color: rgba(255, 255, 255, .6);
	text-decoration: none;
	transition: color .3s var(--fmk-ease);
}

.fmk-solp-crumb a:hover,
.fmk-solp-crumb .is-current {
	color: var(--fmk-branco);
}

/* Mesma proporção da tela de produto (.fmk-ps-hero: galeria 46%, gap 48px) */
.fmk-solp-top {
	display: grid;
	grid-template-columns: 46% 1fr;
	gap: 48px;
	align-items: start;
}

/* na solução a foto preenche a área, sem a moldura branca do produto */
.fmk-solp-gallery .fmk-ps-main-img {
	background: transparent;
	border: 0;
}

/* Imagem inteira, como na tela de produto: os renders são em fundo branco e
   o corte do cover comia topo e base das fotos em retrato. */
.fmk-solp-gallery .fmk-ps-main-img img {
	object-fit: contain;
}

.fmk-solp-gallery .fmk-ps-thumb {
	border-color: rgba(255, 255, 255, .35);
}

.fmk-solp-gallery .fmk-ps-thumb.is-active {
	border-color: var(--fmk-branco);
}

.fmk-solp-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding-bottom: 40px;
}

.fmk-solp-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--fmk-branco);
}

.fmk-solp-rating span {
	display: inline-flex;
	gap: 2px;
}

.fmk-solp-reviews {
	font-size: 14px;
}

.fmk-solp-title {
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--fmk-branco);
}

.fmk-solp-ref {
	margin: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, .7);
}

.fmk-solp-obs {
	margin: 8px 0 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--fmk-branco);
}

.fmk-solp-divider {
	width: 100%;
	margin: 20px 0 8px;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, .25);
}

/* cartão branco do formulário */
.fmk-solp-form {
	width: 100%;
	background: var(--fmk-branco);
	padding: 32px;
	display: flex;
	flex-direction: column;
	/* com rótulo em cada campo, 20px de respiro entre blocos ficava solto */
	gap: 14px;
}

.fmk-solp-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

/* Todos os campos com a mesma aparência: mesmo fundo, borda, altura de
   linha e tipografia. A altura vem do atributo rows, não de min-height —
   assim "tipo/carga" (2 linhas) e "resumo" (3) não ficam do mesmo tamanho. */
.fmk-solp-form input[type="text"],
.fmk-solp-form input[type="email"],
.fmk-solp-form input[type="tel"],
.fmk-solp-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: #E8EBEF;
	border: 1px solid #EEE;
	border-radius: 0;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fmk-azul-500);
	display: block;
}

.fmk-solp-form textarea {
	resize: vertical;
}

/* O tema pinta submit com o verde global (regra mais específica que .fmk-btn),
   então o CTA precisa desta especificidade extra para ficar azul. */
.fmk-solp-form button[type="submit"].fmk-btn {
	padding: 12px 26px;
	background: var(--fmk-azul-500);
	color: var(--fmk-branco);
}

.fmk-solp-form button[type="submit"].fmk-btn:hover {
	background: var(--fmk-azul-700);
	color: var(--fmk-branco);
}

.fmk-solp-form ::placeholder {
	color: var(--fmk-azul-500);
	opacity: .7;
}

.fmk-solp-form-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

/* barra inferior da faixa azul */
.fmk-solp-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 0;
	border-top: 1px solid rgba(255, 255, 255, .15);
}

.fmk-solp-cart {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--fmk-branco);
}

.fmk-solp-cart-ico {
	position: relative;
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, .12);
	display: flex;
	align-items: center;
	justify-content: center;
}

.fmk-solp-cart-txt {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.fmk-solp-cart-txt small {
	font-size: 12px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.fmk-solp-cart-txt strong {
	font-size: 15px;
}

.fmk-solp-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.fmk-solp-action {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border: 1px solid var(--fmk-branco);
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--fmk-branco);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .35s var(--fmk-ease), color .35s var(--fmk-ease);
}

.fmk-solp-action:hover {
	background: var(--fmk-branco);
	color: var(--fmk-azul-500);
}

.fmk-solp-action.is-solid {
	background: var(--fmk-branco);
	color: var(--fmk-azul-500);
}

.fmk-solp-action.is-solid:hover {
	background: var(--fmk-azul-200);
}

/* ---------- Solução :: corpo ---------- */

.fmk-solp-body {
	padding-top: 80px;
	padding-bottom: 80px;
}

.fmk-solp-specs {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	gap: 60px;
	align-items: start;
}

/* caixa "Detalhes da Solução": filete azul à esquerda, como no Figma */
.fmk-solp-details {
	background: var(--fmk-branco);
	border-left: 8px solid var(--fmk-azul-500);
	padding: 28px 30px;
}

/* alinhado com .fmk-ps-caract-title da tela de produto */
.fmk-solp-details-title {
	margin: 0 0 18px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fmk-azul-700);
}

.fmk-solp-details ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* mesmos 14px da tabela de características do produto (.fmk-ps-table) */
.fmk-solp-details li {
	font-size: 14px;
	line-height: 1.5;
	color: var(--fmk-cinza);
}

.fmk-solp-details .fmk-solp-det-label {
	color: var(--fmk-azul-700);
	font-weight: 700;
}

.fmk-solp-det-label {
	font-weight: 400;
}

@media (max-width: 1200px) {

	.fmk-solp-title {
		font-size: 26px;
	}

	.fmk-solp-specs {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 40px;
	}
}

@media (max-width: 1024px) {

	.fmk-solp-top,
	.fmk-solp-specs {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.fmk-solp-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.fmk-solp-actions {
		justify-content: stretch;
	}

	.fmk-solp-action {
		flex: 1 1 0;
		justify-content: center;
	}
}

@media (max-width: 700px) {

	.fmk-solp-form-row {
		grid-template-columns: 1fr;
	}

	.fmk-solp-form {
		padding: 20px;
	}

	.fmk-solp-form-foot {
		flex-direction: column;
		align-items: stretch;
	}

	.fmk-solp-actions {
		flex-direction: column;
	}
}

/* card de produto da home: imagem e título levam para o produto */
a.fmk-prod-img {
	display: block;
}

.fmk-prod-link {
	color: inherit;
	text-decoration: none;
}

.fmk-prod-link:hover {
	text-decoration: underline;
}

/* ---------- Header :: encolher ao rolar ---------- */

.fmk-header--shrink .fmk-header-top {
	overflow: hidden;
	transition: height .35s var(--fmk-ease), opacity .25s var(--fmk-ease);
}

.fmk-header--shrink .fmk-header-inner {
	transition: padding .35s var(--fmk-ease);
}

/* a barra superior recolhe e o miolo aperta: ~60px de volta para o conteúdo */
.fmk-header--shrink.is-compact .fmk-header-top {
	height: 0;
	opacity: 0;
}

.fmk-header--shrink.is-compact .fmk-header-inner {
	padding-top: 14px;
	padding-bottom: 14px;
}

@media (prefers-reduced-motion: reduce) {

	.fmk-header--shrink .fmk-header-top,
	.fmk-header--shrink .fmk-header-inner {
		transition: none;
	}
}

/* ============================================================
   RESULTADOS DE BUSCA (Produtos + Conteúdos)
   ============================================================ */

.fmk-search {
	width: 100%;
}

.fmk-search-summary {
	margin: 0 0 40px;
	font-size: 18px;
	color: var(--fmk-azul-400);
}

.fmk-search-block {
	margin-bottom: 70px;
}

.fmk-search-block:last-child {
	margin-bottom: 0;
}

.fmk-search-title {
	margin: 0 0 30px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 28px;
	font-weight: 700;
	color: var(--fmk-azul-700);
	text-transform: uppercase;
}

.fmk-search-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 10px;
	background: var(--fmk-azul-500);
	color: var(--fmk-branco);
	font-size: 15px;
	border-radius: 999px;
}

/* herda os grids de produto (.fmk-pg-grid) e de blog (.fmk-blog-grid);
   só garante altura uniforme dos cards */
.fmk-search-grid {
	align-items: stretch;
}

/* sem sidebar aqui, cabem 4 produtos por linha no desktop */
@media (min-width: 1025px) {
	.fmk-search .fmk-pg-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.fmk-search-empty {
	margin: 0;
	font-size: 16px;
	color: var(--fmk-azul-400);
}

/* rodapé: logo clicável + atribuição com logo */
.fmk-foot-logo {
	display: inline-block;
}

.fmk-foot-attr {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.fmk-foot-attr-logo {
	height: 20px;
	width: auto;
	display: block;
}

/* dots do carrossel do hero — só aparecem no mobile (carrossel ativo) */
.fmk-hero-dots {
	display: none;
}

@media (max-width: 640px) {
	.fmk-hero-dots {
		display: flex;
		justify-content: center;
		gap: 10px;
		padding: 18px 0 4px;
	}

	.fmk-hero-dot {
		width: 9px;
		height: 9px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: #c3ccd9;
		cursor: pointer;
		transition: background .25s, width .25s;
	}

	.fmk-hero-dot.is-active {
		width: 26px;
		background: var(--fmk-azul-500);
	}
}
/* ============================================================
   MOBILE: títulos (H's) proporcionalmente menores
   uppercase + tamanho grande pesa demais em telas pequenas
   ============================================================ */
@media (max-width: 600px) {
	.fmk-section-title,
	.fmk-sh-title,
	.fmk-swhy-title,
	.fmk-sess-title,
	.fmk-stl-title,
	.fmk-svid-title,
	.fmk-sst-title,
	.fmk-cv-title,
	.fmk-vagas-title,
	.fmk-search-title,
	.fmk-catbanner-title,
	.fmk-pbanner-title {
		font-size: 24px !important;
	}

	.fmk-art-title {
		font-size: 26px !important;
	}
}

/* acessibilidade / SEO: elemento presente no DOM mas invisível */
.fmk-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Barra fixa de cotação (single de produto) ---------- */

/* Sempre visível. z-index acima do "voltar ao topo" do tema (que cria o
   próprio contexto de empilhamento), mas abaixo do drawer — o JS move a
   barra para o <body> para não herdar contexto de empilhamento do Elementor. */
.fmk-qbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99998;
	background: var(--fmk-azul-500);
	transition: opacity .3s ease, visibility .3s ease;
}

/* O carrinho lateral tem prioridade sobre a barra. */
body.fmk-drawer-open .fmk-qbar {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.fmk-qbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1600px;
	margin: 0 auto;
	padding: 12px 40px;
}

.fmk-qbar-status {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--fmk-azul-200);
}

.fmk-qbar-icon {
	flex: none;
	color: var(--fmk-azul-200);
}

.fmk-qbar-count {
	font-weight: 700;
	color: var(--fmk-branco);
}

.fmk-qbar-actions {
	display: flex;
	align-items: center;
	gap: 24px;
}

/* "Ver lista": link simples, sem caixa */
.fmk-qbar-link {
	color: var(--fmk-branco);
	font-size: 15px;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .4);
	padding-bottom: 2px;
	transition: border-color .4s ease;
}

.fmk-qbar-link:hover {
	color: var(--fmk-branco);
	border-bottom-color: var(--fmk-branco);
}

.fmk-qbar-cta {
	padding: 10px 22px;
	font-size: 15px;
}

/* espaço no fim da página para a barra não cobrir o rodapé */
body.fmk-qbar-on {
	padding-bottom: 60px;
}

/* Empurra o "voltar ao topo" do tema para cima da barra. */
body.fmk-qbar-on .uicore-back-to-top,
body.fmk-qbar-on #uicore-back-to-top {
	margin-bottom: 60px;
}

@media (max-width: 767px) {
	.fmk-qbar-inner {
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		padding: 10px 16px;
	}

	.fmk-qbar-status {
		font-size: 14px;
	}

	.fmk-qbar-actions {
		gap: 16px;
	}

	body.fmk-qbar-on {
		padding-bottom: 100px;
	}

	body.fmk-qbar-on .uicore-back-to-top,
	body.fmk-qbar-on #uicore-back-to-top {
		margin-bottom: 100px;
	}
}

/* ---------- Dúvidas Frequentes ---------- */

.fmk-faq {
	width: 100%;
	/* respiro em relação ao banner de topo da página */
	margin-top: 60px;
	margin-bottom: 40px;
}

.fmk-faq-title {
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 34px;
}

.fmk-faq-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #e6eaf1;
}

.fmk-faq-item {
	border-bottom: 1px solid #e6eaf1;
}

.fmk-faq-pergunta-wrap {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.fmk-faq-pergunta {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	padding: 22px 0;
	border: 0;
	background: transparent;
	color: var(--fmk-azul-700);
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	transition: color .3s ease;
}

.fmk-faq-pergunta:hover {
	color: var(--fmk-azul-500);
}

.fmk-faq-num {
	flex: none;
	color: var(--fmk-azul-400);
}

.fmk-faq-texto {
	flex: 1 1 auto;
}

/* seta que gira ao abrir */
.fmk-faq-seta {
	flex: none;
	width: 12px;
	height: 12px;
	margin-top: 5px;
	border-right: 2px solid var(--fmk-azul-500);
	border-bottom: 2px solid var(--fmk-azul-500);
	transform: rotate(45deg);
	transition: transform .3s ease;
}

.fmk-faq-item.is-open .fmk-faq-seta {
	transform: rotate(-135deg);
}

.fmk-faq-resposta {
	overflow: hidden;
}

.fmk-faq-resposta[hidden] {
	display: none;
}

.fmk-faq-resposta-inner {
	padding: 0 0 26px;
	color: var(--fmk-cinza);
	font-size: 16px;
	line-height: 1.7;
	max-width: 900px;
}

.fmk-faq-resposta-inner p {
	margin: 0 0 14px;
}

.fmk-faq-resposta-inner p:last-child {
	margin-bottom: 0;
}

.fmk-faq-resposta-inner ul {
	margin: 0 0 14px;
	padding-left: 22px;
}

.fmk-faq-resposta-inner li {
	margin-bottom: 8px;
}

.fmk-faq-resposta-inner a {
	color: var(--fmk-azul-500);
	text-decoration: underline;
}

@media (max-width: 767px) {
	.fmk-faq-title {
		font-size: 24px;
		margin-bottom: 24px;
	}

	.fmk-faq-pergunta {
		font-size: 15px;
		gap: 10px;
		padding: 18px 0;
	}
}

/* ---------- Modal de solicitação (cards de Solução) ---------- */

.fmk-solmodal {
	position: fixed;
	inset: 0;
	z-index: 999997;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s;
}

.fmk-solmodal.is-open {
	opacity: 1;
	visibility: visible;
}

.fmk-solmodal[hidden] {
	display: none;
}

.fmk-solmodal-fundo {
	position: absolute;
	inset: 0;
	background: rgba(16, 31, 53, .6);
}

.fmk-solmodal-caixa {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 40px;
	background: var(--fmk-branco);
	transform: translateY(12px);
	transition: transform .3s ease;
}

.fmk-solmodal.is-open .fmk-solmodal-caixa {
	transform: none;
}

.fmk-solmodal-x {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: var(--fmk-bg);
	color: var(--fmk-azul-500);
	cursor: pointer;
	transition: background-color .3s ease;
}

.fmk-solmodal-x:hover {
	background: var(--fmk-azul-200);
}

.fmk-solmodal-titulo {
	margin: 0 0 4px;
	color: var(--fmk-azul-700);
	font-size: 22px;
	font-weight: 700;
}

.fmk-solmodal-produto {
	margin: 0 0 22px;
	color: var(--fmk-cinza);
	font-size: 15px;
}

.fmk-solmodal-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fmk-solmodal-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.fmk-solmodal-form input[type="text"],
.fmk-solmodal-form input[type="email"],
.fmk-solmodal-form input[type="tel"],
.fmk-solmodal-form textarea {
	width: 100%;
	padding: 11px 14px;
	background: #E8EBEF;
	border: 1px solid #EEE;
	border-radius: 0;
	font-family: inherit;
	font-size: 14px;
	color: var(--fmk-azul-500);
}

.fmk-solmodal-form ::placeholder {
	color: var(--fmk-azul-500);
	opacity: .7;
}

.fmk-solmodal-form button[type="submit"].fmk-btn {
	margin-top: 4px;
	background: var(--fmk-azul-500);
	color: var(--fmk-branco);
}

.fmk-solmodal-form button[type="submit"].fmk-btn:hover {
	background: var(--fmk-azul-700);
}

/* campos de projeto com rótulo (solução e modal) */
.fmk-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fmk-campo-rotulo {
	font-size: 13px;
	font-weight: 700;
	color: var(--fmk-azul-700);
}

/* asterisco de obrigatório, discreto */
.fmk-campo-rotulo em {
	font-style: normal;
	opacity: .65;
}

/* O formulário da solução é um card BRANCO: rótulo branco aqui some.
   Mantém o azul escuro padrão e só ajusta o respiro entre rótulo e campo. */
.fmk-solp-form .fmk-campo {
	min-width: 0;
	gap: 6px;
}

@media (max-width: 600px) {
	.fmk-solmodal-caixa {
		padding: 30px 20px;
	}

	.fmk-solmodal-row {
		grid-template-columns: 1fr;
	}
}