*, *::before, *::after {box-sizing : border-box;margin : 0;padding : 0}
html {scroll-behavior : smooth}
body {font-family : 'Inter', sans-serif;color : #1A1A1A;background : #FFF;line-height : 1.6}

/* drawer */
.drawer-overlay {display : none;position : fixed;inset : 0;background : rgba(0, 0, 0, .4);z-index : 150}
.drawer {position : fixed;top : 0;right : -320px;width : 300px;height : 100%;background : #FFF;z-index : 200;transition : right .3s ease;padding : 24px;overflow-y : auto}
.drawer.open {right : 0}
.drawer-overlay.open {display : block}
.drawer-close {margin-bottom : 24px;cursor : pointer;font-size : 22px;background : none;border : none;color : #1A1A1A}
.drawer nav a {display : block;font-size : 16px;font-weight : 500;color : #333;text-decoration : none;padding : 13px 0;border-bottom : 1px solid #F0F0F0}
.drawer nav .btn-cta-mobile {display : block;margin-top : 24px;background : #036;color : #FFF;text-align : center;padding : 14px 22px;border-radius : 100px;font-weight : 600;text-decoration : none;font-size : 15px}
.drawer-services {padding-left : 16px}
.drawer-services a {font-size : 14px;color : #666;border-bottom : 1px solid #F8F8F8}

/* ─── HERO SWIPER ─────────────────────────────────── */
.swiper {width : 100%;height : 620px}
.swiper.menor {width : 100%;height : 320px}
.swiper-slide {position : relative;overflow : hidden}
.swiper-slide img {width : 100%;height : 100%;object-fit : cover;display : block}
.slide-overlay {position : absolute;inset : 0;background : linear-gradient(to right, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .2) 60%, transparent 100%)}
.slide-content {position : absolute;inset : 0;display : flex;align-items : center;padding : 0 80px}
.slide-text {max-width : 560px;color : #FFF}
.slide-text h2 {font-size : clamp(28px, 4vw, 48px);font-weight : 700;line-height : 1.2;margin-bottom : 16px}
.slide-text p {font-size : clamp(15px, 1.8vw, 18px);font-weight : 300;margin-bottom : 32px;opacity : .92}
.slide-btn {display : inline-block;background : #FFF;color : #1A1A1A;font-weight : 600;font-size : 14px;padding : 14px 28px;border-radius : 100px;text-decoration : none;transition : background .18s, transform .15s}
.slide-btn:hover {background : #F0F0F0;transform : translateY(-1px)}
.swiper-pagination-bullet {background : #FFF;opacity : .6;width : 10px;height : 10px}
.swiper-pagination-bullet-active {opacity : 1;width : 24px;border-radius : 100px}

/* ─── SECTIONS ────────────────────────────────────── */
section {padding : 80px 24px}
.container {max-width : 1200px;margin : 0 auto}
.section-tag {font-size : 12px;font-weight : 600;letter-spacing : .12em;text-transform : uppercase;color : #888;margin-bottom : 12px}
.section-title {font-size : clamp(26px, 3.5vw, 38px);font-weight : 700;color : #111;line-height : 1.25;margin-bottom : 16px}
.section-sub {font-size : 16px;color : #666;line-height : 1.7}
.centered {text-align : center}
.centered .section-sub {margin : 0 auto 48px}
.centered .section-tag, .centered .section-title {text-align : center}

/* ─── DORES ────────────────────────────────────────── */
.dores {background : #FAFAFA;border-top : 1px solid #F0F0F0;border-bottom : 1px solid #F0F0F0}
.dores-grid {display : grid;grid-template-columns :repeat(auto-fit, minmax(260px, 1fr));gap : 20px;margin-top : 48px}
.dor-card {background : #FFF;border : 1px solid #EBEBEB;border-radius : 14px;padding : 28px;position : relative;overflow : hidden}
.dor-card::before {content : '';position : absolute;top : 0;left : 0;width : 4px;height : 100%;background : #3190E7}
.dor-card h4 {font-size : 15px;font-weight : 600;margin-bottom : 8px;color : #1A1A1A}
.dor-card p {font-size : 14px;color : #666;line-height : 1.6}

/* ─── SERVIÇOS ─────────────────────────────────────── */
.servicos-grid {display : grid;grid-template-columns :repeat(auto-fit, minmax(280px, 1fr));gap : 24px;margin-top : 48px}
.servico-card {border : 1px solid #EBEBEB;border-radius : 16px;padding : 32px;transition : box-shadow .2s, transform .2s;background : #FFF}
.servico-card:hover {box-shadow : 0 8px 32px rgba(0, 0, 0, .08);transform : translateY(-3px)}
.servico-icon {width : 44px;height : 44px;border-radius : 12px;background : #F0EEFF;display : flex;align-items : center;justify-content : center;margin-bottom : 18px;font-size : 20px}
.servico-card h3 {font-size : 16px;font-weight : 600;margin-bottom : 10px;color : #111}
.servico-card p {font-size : 14px;color : #666;line-height : 1.65}

/* ─── DIFERENCIAIS ──────────────────────────────────── */
.diferenciais {background : #F8F7FF}
.difs-grid {display : grid;grid-template-columns :repeat(auto-fit, minmax(220px, 1fr));gap : 20px;margin-top : 48px}
.dif-item {text-align : center;padding : 32px 24px;background : #FFF;border-radius : 16px;border : 1px solid #EBEBEB}
.dif-number {font-size : 42px;font-weight : 700;color : #3190E7;line-height : 1}
.dif-label {font-size : 14px;color : #888;margin-top : 8px}

/* ─── COMO FUNCIONA ─────────────────────────────────── */
.steps {display : grid;grid-template-columns :repeat(auto-fit, minmax(220px, 1fr));gap : 24px;margin-top : 48px;position : relative}
.step {padding : 28px;text-align : center}
.step-num {width : 48px;height : 48px;border-radius : 50%;background : #1A1A1A;color : #FFF;font-weight : 700;font-size : 18px;display : flex;align-items : center;justify-content : center;margin : 0 auto 16px}
.step h4 {font-size : 15px;font-weight : 600;margin-bottom : 8px;color : #111}
.step p {font-size : 14px;color : #666}

/* ─── DEPOIMENTOS ───────────────────────────────────── */
.testimonials {background : #FAFAFA}
.testi-grid {display : grid;grid-template-columns :repeat(auto-fit, minmax(300px, 1fr));gap : 24px;margin-top : 48px}
.testi-card {background : #FFF;border : 1px solid #EBEBEB;border-radius : 16px;padding : 32px}
.testi-quote {font-size : 15px;color : #444;line-height : 1.7;margin-bottom : 20px;font-style : italic}
.testi-author {font-size : 14px;font-weight : 600;color : #111}
.testi-role {font-size : 13px;color : #888}

/* ─── CLIENTES / LOGOS ──────────────────────────────── */
.logos-row {display : flex;flex-wrap : wrap;gap : 32px;justify-content : center;align-items : center;margin-top : 48px}
.logos-row img {height : 36px;object-fit : contain;filter : grayscale(1);opacity : .55;transition : opacity .2s}
.logos-row img:hover {opacity : .85}

/* ─── CTA BAND ───────────────────────────────────────── */
.cta-band {background : #323138;color : #FFF;text-align : center;padding : 80px 24px}
.cta-band h2 {font-size : clamp(26px, 3.5vw, 38px);font-weight : 700;margin-bottom : 16px}
.cta-band p {font-size : 16px;opacity : .75;margin-bottom : 36px;max-width : 540px;margin-left : auto;margin-right : auto}
.btn-white {display : inline-block;background : #FFF;color : #1A1A1A;font-weight : 600;font-size : 15px;padding : 15px 36px;border-radius : 100px;text-decoration : none;transition : background .18s, transform .15s}
.btn-white:hover {background : #E8E8E8;transform : translateY(-1px)}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width : 900px) {
	nav.desktop {display : none}
	.hamburger {display : flex}
	.slide-content {padding : 0 32px}
	.footer-grid {grid-template-columns :1fr 1fr;gap : 32px}
}
@media (max-width : 640px) {
	.swiper {height : 480px}
	.slide-content {padding : 0 24px}
	.footer-grid {grid-template-columns :1fr}
	section {padding : 60px 20px}
}
.corAzulEscuro {
	color : #036
}
.corBranca {
	color : #FFF;
}
.corAzul {
	color : #3190E7
}
.justificado {
	text-align : justify;
	max-width  : 600px;
}

#servicos {
	background : linear-gradient(
		to bottom,
		#383B45 0%, /* Cinza mais aberto */ #31343C 100% /* Cinza da logo levemente ajustado */
	);
	color      : #FFF; /* Garante que títulos e textos fiquem brancos */
}

/* Ajusta o subtítulo da seção para não sumir no fundo escuro */
#servicos .section-sub {
	color : rgba(255, 255, 255, 0.8);
}

/* Ajusta a tag (Nossos Serviços) para destacar no dark mode */
#servicos .section-tag {
	color : #3190E7; /* Azul da sua logo */
}

/* Ajusta os cards de serviços para um visual "Glassmorphism" ou Branco Sólido */
#servicos .servico-card {
	background : #FFF; /* Mantemos o fundo branco para contraste máximo */
	border     : none;
	box-shadow : 0 10px 30px rgba(0, 0, 0, 0.2);
}

.servico-icon {
	display         : flex;
	align-items     : center;
	justify-content : center;
	margin-bottom   : 20px;
	color           : #3190E7; /* Ou a cor azul que você está usando */
}

.servico-icon i {
	width        : 40px; /* Tamanho do ícone */
	height       : 40px;
	stroke-width : 1.5px; /* Deixa o ícone mais elegante (fino) */
}

/* CSS apenas para o efeito de passar o mouse no botão */
.btn-video-cta:hover { background : #3190E7 !important; transform : translateY(-2px); }

.servico-card {
	cursor : pointer;

}

.resultados-section {
	width               : 100%;
	min-height          : 450px; /* Aumentei um pouco para garantir que a imagem apareça bem */
	display             : flex;
	align-items         : center;

	/* Usar o gradiente direto no background-image garante que o overlay funcione */
	background-image    : linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)),
	url('../assets/imgs/fundo2.jpg');

	background-size     : cover !important;
	background-position : center center !important;
	background-repeat   : no-repeat;
}

.saibaMais:hover {
	background : #3994E8 !important;
	transform  : translateY(-1px);
}

.whatsapp-cta-section {
	padding       : 50px 24px;
	background    : linear-gradient(90deg, #036 0%, #036 45%, #080D14 100%);
	color         : #FFF;
	border-bottom : 1px solid rgba(255, 255, 255, 0.05);
}

.whatsapp-container {
	display         : flex;
	flex-wrap       : wrap;
	align-items     : center;
	justify-content : space-around; /* Espaçamento igual entre os blocos */
	max-width       : 1200px;
	margin          : 0 auto;
}

.whatsapp-content {
	display     : flex;
	align-items : center;
	gap         : 20px;
}

.wa-svg-icon {
	width  : 65px;
	height : 65px;
	fill   : #7DD3B3; /* Cor exata da imagem */
}

.whatsapp-title {
	font-size   : 28px;
	font-weight : 700;
	line-height : 1.1;
	color       : #A5EBD2; /* Tom mais claro para leitura */
	margin      : 0;
}

.whatsapp-title span {
	color : #48C2A1; /* O verde mais vibrante para a palavra WhatsApp */
}

.whatsapp-text-side p {
	font-size   : 16px;
	font-weight : 400;
	line-height : 1.4;
	color       : #FFF;
	margin      : 0;
}

/* Responsividade para celulares */
@media (max-width : 768px) {
	.whatsapp-container {
		flex-direction : column;
		text-align     : center;
		gap            : 30px;
	}
	.whatsapp-content {
		flex-direction : column;
	}
	.wa-svg-icon {
		width  : 60px;
		height : 60px;
	}
}
.whatsapp-content {
	cursor : pointer;
}

/* ─── TIMELINE CUSTOMIZADA ────────────────────────── */
:root {
	--cor-linha       : #EBEBEB;
	--cor-azul-escuro : #036; /* Azul da logo */
	--cor-azul-claro  : #3190E7; /* Azul destaque */
	--espessura       : 4px;
	--altura-curva    : 160px;
	--tamanho-circulo : 70px;
}

.timeline-section {
	padding    : 100px 24px;
	background : #FFF;
	overflow   : hidden;
}

.timeline-wrapper {
	width           : 100%;
	display         : flex;
	justify-content : center;
	margin-top      : 60px;
}

.linha-do-tempo {
	display        : flex;
	flex-direction : column;
	width          : 320px;
}

.passo {
	width      : 50%;
	height     : var(--altura-curva);
	position   : relative;
	box-sizing : border-box;
}

.passo + .passo {
	margin-top : calc(var(--espessura) * -1);
}

.passo.direita {
	align-self    : flex-end;
	border        : var(--espessura) solid var(--cor-linha);
	border-left   : none;
	border-radius : 0 160px 160px 0;
}

.passo.esquerda {
	align-self    : flex-start;
	border        : var(--espessura) solid var(--cor-linha);
	border-right  : none;
	border-radius : 160px 0 0 160px;
}

.bolinha {
	position      : absolute;
	width         : 12px;
	height        : 12px;
	background    : var(--cor-azul-claro);
	border-radius : 50%;
	top           : calc(var(--espessura) / -2 - 6px);
}

.passo.direita .bolinha { left : -6px; }
.passo.esquerda .bolinha { right : -6px; }
.passo:first-child .bolinha { display : none; }

.ancora-circulo {
	position : absolute;
	top      : 50%;
	width    : var(--tamanho-circulo);
	height   : var(--tamanho-circulo);
	z-index  : 2;
}

.passo.direita .ancora-circulo {
	right     : calc(var(--espessura) * -0.5);
	transform : translate(50%, -50%);
}

.passo.esquerda .ancora-circulo {
	left      : calc(var(--espessura) * -0.5);
	transform : translate(-50%, -50%);
}

.circulo {
	width            : 100%;
	height           : 100%;
	background-color : var(--cor-azul-escuro);
	border           : 4px solid #FFF;
	box-shadow       : 0 4px 15px rgba(0, 0, 0, 0.1);
	border-radius    : 50%;
	display          : flex;
	align-items      : center;
	justify-content  : center;
	color            : #FFF;
}

.circulo i { width : 30px; height : 30px; }

.texto {
	position  : absolute;
	top       : 50%;
	transform : translateY(-50%);
	width     : 260px;
}

.texto.esq { right : calc(100% + 30px); text-align : right; }
.texto.dir { left : calc(100% + 30px); text-align : left; }

.titulo {
	font-size   : 18px;
	font-weight : 800;
	color       : var(--cor-azul-escuro);
	margin      : 0;
}

.titulo .num {
	font-size   : 24px;
	font-weight : 300;
	color       : var(--cor-azul-claro);
	display     : block;
}

.descricao {
	font-size   : 14px;
	color       : #666;
	margin      : 0;
	line-height : 1.5;
}

/* Ajustes Responsivos */
@media (max-width : 768px) {
	.linha-do-tempo { width : 100%; align-items : center; }
	.passo {
		width         : 4px; /* Vira uma linha reta no mobile */
		height        : 200px;
		border        : none !important;
		border-left   : 4px solid var(--cor-linha) !important;
		border-radius : 0 !important;
		align-self    : center !important;
		margin-left   : 20px;
	}
	.texto { width : 200px; }
	.texto.esq { text-align : left; left : 60px; right : auto; top : 30%; }
	.texto.dir { text-align : left; left : 60px; top : 70%; }
	.ancora-circulo { left : -2px !important; transform : translate(-50%, -50%) !important; }
}

.servicos-grid {
	display               : grid;
	/* Ajustamos o minmax para 300px para evitar cards muito estreitos */
	grid-template-columns : repeat(auto-fit, minmax(300px, 1fr));
	gap                   : 24px;
	margin-top            : 48px;
	/* Garante que todos os itens do grid ocupem a altura total disponível na linha */
	align-items           : stretch;
}

.servico-card {
	border         : 1px solid #EBEBEB;
	border-radius  : 16px;
	padding        : 32px;
	transition     : box-shadow .2s, transform .2s;
	background     : #FFF;

	/* Flexbox interno para garantir que o conteúdo preencha o card */
	display        : flex;
	flex-direction : column;
	height         : 100%;
}

.servico-card p {
	font-size   : 14px;
	color       : #666;
	line-height : 1.65;
	/* Faz o parágrafo crescer para empurrar o card se necessário,
	   mantendo o alinhamento visual */
	flex-grow   : 1;
}
.cta-band {
	background : linear-gradient(90deg, #036 0%, #024 60%, #0B141D 100%);
}

/* ─── CTA BAND COM IMAGEM (NOVO) ───────────────────── */
.cta-band {
	/* Gradiente Premium Quantifiq (Misturando o #036 e #3190E7) */
	background : linear-gradient(135deg, #036 0%, #004080 50%, #3190E7 100%);
	color      : #FFF;
	padding    : 100px 24px;
	overflow   : hidden; /* Garante que as animações AOS funcionem bem */
}

.cta-container {
	display         : flex;
	align-items     : center; /* Alinha os blocos verticalmente ao centro */
	justify-content : space-between; /* Dá espaço igual entre texto e imagem */
	gap             : 60px; /* Espaço de respiro entre o texto e a imagem */
}

/* Estilização do Bloco de Texto */
.cta-content {
	flex : 1 1 500px; /* Faz o texto crescer, mas ter no mínimo 500px */
}

.cta-band h2 {
	font-size     : clamp(28px, 4vw, 42px);
	font-weight   : 700;
	line-height   : 1.2;
	margin-bottom : 20px;
	margin-top    : 0;
}

.cta-band p {
	font-size     : 18px;
	opacity       : 0.9;
	line-height   : 1.6;
	margin-bottom : 40px;
	max-width     : 540px;
}

/* Estilização do Botão (Reaproveitando o que você já tem) */
.btn-white {
	display         : inline-block;
	background      : #FFF;
	color           : #036; /* Texto volta para o azul marinho da logo */
	font-weight     : 600;
	font-size       : 16px;
	padding         : 16px 36px;
	border-radius   : 100px;
	text-decoration : none;
	transition      : background .18s, transform .15s, box-shadow 0.2s;
}

.btn-white:hover {
	background : #E8E8E8;
	transform  : translateY(-2px);
	box-shadow : 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Estilização do Bloco da Imagem */
.cta-image {
	flex            : 0 0 450px; /* Imagem tem tamanho fixo de 450px */
	display         : flex;
	justify-content : center;
	align-items     : center;
}

.img-fluid {
	max-width     : 100%;
	height        : auto;
	border-radius : 12px; /* Cantos arredondados como o resto do site */
	/* Adiciona uma leve sombra para dar profundidade na imagem */
	box-shadow    : 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* ─── RESPONSIVIDADE (MOBILE) ─────────────────────── */
@media (max-width : 991px) {
	.cta-container {
		flex-direction : column-reverse; /* Imagem fica em cima, texto embaixo no mobile */
		text-align     : center;
		gap            : 40px;
	}

	.cta-band p {
		margin-left  : auto;
		margin-right : auto;
	}

	.cta-image {
		flex      : 0 0 auto;
		width     : 100%;
		max-width : 400px; /* Limita o tamanho da imagem em telas menores */
	}
}

/* ─── CORREÇÃO DO CARROSSEL GIGANTE ────────────────── */
.logosSwiper {
	max-width  : 1100px;
	margin     : 30px auto 0;
	padding    : 20px 0;
	height     : auto !important; /* MATA OS 600PX */
	min-height : 0 !important;
	overflow   : hidden;
}

.logosSwiper .swiper-wrapper {
	height      : auto !important; /* GARANTE QUE A TRILHA NÃO ESTIQUE */
	align-items : center; /* Alinha os logos no centro vertical */
}

.logosSwiper .swiper-slide {
	height          : 80px !important; /* DEFINE A ALTURA REAL DO SLIDE */
	display         : flex;
	justify-content : center;
	align-items     : center;
}

.logosSwiper .swiper-slide img {
	height         : 60px !important; /* TAMANHO DO LOGO */
	width          : auto;
	max-width      : 140px;
	object-fit     : contain;
	/*filter         : grayscale(1);*/
	opacity        : 0.5;
	pointer-events : none; /* Melhora o arraste do mouse */
}
/* Estilo dos Mini Ícones no Slide */
.slide-features {
	display               : grid;
	grid-template-columns : repeat(2, 1fr); /* 2 colunas no mobile */
	gap                   : 20px;
	margin-bottom         : 35px;
	max-width             : 600px;
}

.feature-item-mini {
	display        : flex;
	flex-direction : column;
	align-items    : flex-start;
	gap            : 10px;
	color          : #FFF;
}

.feature-item-mini i {
	width         : 32px;
	height        : 32px;
	color         : #3190E7; /* Azul da Quantifiq */
	background    : rgba(255, 255, 255, 0.1);
	padding       : 6px;
	border-radius : 8px;
}

.feature-item-mini span {
	font-size   : 14px;
	font-weight : 400;
	line-height : 1.3;
	opacity     : 0.9;
}

/* Ajuste para telas maiores (Desktop) */
@media (min-width : 768px) {
	.slide-features {
		grid-template-columns : repeat(4, 1fr); /* 4 colunas no desktop */
		max-width             : 800px;
	}
}

/* ─── GRID PARA QUEM É ─── */
.para-quem-grid {
	display               : grid;
	grid-template-columns : 1fr 1fr;
	gap                   : 64px;
	align-items           : center;
}

/* Responsividade: Transforma em 1 coluna no Mobile e Tablets */
@media (max-width : 991px) {
	.para-quem-grid {
		grid-template-columns : 1fr;
		gap                   : 40px;
		text-align            : center; /* Opcional: Centraliza o texto no mobile */
	}

	/* Se centralizar o texto, garante que os cards continuem alinhados à esquerda */
	.para-quem-grid .section-title,
	.para-quem-grid .section-tag {
		text-align : center;
	}

	.para-quem-grid > div:last-child {
		text-align : left;
	}
}

/* ─── SUBSTITUA O BLOCO RESPONSIVO DA TIMELINE POR ESTE (CORRIGIDO) ─── */
@media (max-width : 768px) {
	.timeline-wrapper { margin-top : 30px; }

	.linha-do-tempo {
		width        : 100%;
		position     : relative;
		padding-left : 10px;
		align-items  : flex-start;
	}

	.linha-do-tempo::before {
		content    : '';
		position   : absolute;
		left       : 43px;
		top        : 0;
		bottom     : 0;
		width      : 4px;
		background : var(--cor-linha);
		z-index    : 1;
	}

	.passo {
		width  : 100% !important;
		height : auto !important;
		border : none !important;
		margin : 0 0 40px 0 !important;
	}

	.bolinha { display : none !important; }

	.ancora-circulo {
		position        : relative !important;
		top             : auto !important;
		left            : auto !important;
		right           : auto !important;
		transform       : none !important;
		width           : 100% !important;
		height          : auto !important;
		display         : flex !important;
		flex-direction  : column;
		justify-content : flex-start;
		padding-left    : 90px;
		min-height      : 70px;
		z-index         : 2;
	}

	/* 🔥 O CONSERTO ESTÁ AQUI: Trava o tamanho do círculo para ele não esticar */
	.circulo {
		position      : absolute !important;
		left          : 0 !important;
		top           : 0 !important;
		width         : 70px !important; /* Trava a largura */
		height        : 70px !important; /* Trava a altura */
		border-radius : 50% !important;
	}

	.texto {
		position : static !important;
		width    : 100% !important;
		display  : contents;
	}

	.titulo {
		order         : 1;
		text-align    : left !important;
		margin-bottom : 8px !important;
		position      : relative;
		z-index       : 3;
	}

	.titulo .num {
		display      : inline-block;
		margin-right : 8px;
		font-size    : 20px;
	}

	.descricao {
		order      : 2;
		text-align : left !important;
		width      : 100% !important;
		position   : relative;
		z-index    : 3;
	}
}

/* Força o Título para cima, alinhado à esquerda e usa Flexbox */
.titulo {
	order           : 1;
	display         : flex !important;
	align-items     : center; /* Alinha o número e o texto na mesma altura */
	justify-content : flex-start;
	text-align      : left !important;
	margin-bottom   : 8px !important;
	position        : relative;
	z-index         : 3;
}

/* O SEGREDO: order: -1 obriga o número a vir ANTES do texto */
.titulo .num {
	order        : -1 !important;
	margin-right : 8px !important;
	margin-left  : 0 !important; /* Limpa margens invertidas do desktop */
	font-size    : 20px;
}

/* ─── AJUSTE DE TAMANHO DA CTA BAND NO MOBILE ─── */
@media (max-width : 991px) {
	/* 1. MATA O BURACO GIGANTE: Reseta a altura de 500px forçada pelo Flexbox */
	.cta-content {
		flex : 1 1 auto !important;
	}

	.cta-image {
		flex      : 1 1 auto !important;
		width     : 100%;
		max-width : 400px; /* Limita a imagem */
	}

	/* 2. Reduz o espaçamento no topo e na base */
	.cta-band {
		padding : 50px 24px !important;
	}

	/* 3. Aproxima a imagem do bloco de texto */
	.cta-container {
		gap : 30px !important;
	}

	/* 4. Aperta os espaços entre os textos e o botão */
	.cta-band h2 {
		font-size     : 26px !important;
		margin-bottom : 12px !important;
	}

	.cta-band p {
		font-size     : 16px !important;
		margin-bottom : 24px !important;
		line-height   : 1.5 !important;
	}
}

#heroSwiper.menor .slide-content {
	justify-content : center; /* Centraliza horizontalmente */
	align-items     : center; /* Centraliza verticalmente */
	text-align      : center; /* Centraliza as linhas de texto */
	padding         : 0 24px; /* Margem de segurança para mobile */
}

/* Garante que o bloco de texto não fique alinhado à esquerda */
#heroSwiper.menor .slide-text {
	max-width : 800px; /* Aumentei um pouco para o texto respirar */
	margin    : 0 auto; /* Reforço da centralização */
}

.h2Maior {
	font-size : clamp(48px, 5vw, 60px) !important;
}
@media (max-width : 991px) {
	.h2Maior {
		font-size : clamp(28px, 4vw, 48px) !important;
	}
}

.pMaior {
	font-size   : clamp(20px, 2vw, 24px) !important;
	font-weight : 300; /* Mantém a leveza que você já tinha */
	max-width   : 800px; /* Garante que a linha não fique larga demais para ler */
	margin      : 0 auto;
}

@media (max-width : 991px) {
	.pMaior {
		/* Retorna ao tamanho padrão de leitura em dispositivos menores */
		font-size : clamp(15px, 1.8vw, 18px) !important;
	}
}

/* Ajuste para grid de 2 em 2 na página Como Funciona */
.fases-detalhadas .servicos-grid {
	grid-template-columns : repeat(2, 1fr); /* Força 2 colunas no desktop */
	gap                   : 30px;
}

/* No tablet e celular, ele volta para 1 por 1 automaticamente para não espremer */
@media (max-width : 768px) {
	.fases-detalhadas .servicos-grid {
		grid-template-columns : 1fr;
	}
}
/* =========================================
   ESTILO QUANTIFIQ PREMIUM - SERVIÇOS
   ========================================= */

:root {
	--q-marinho      : #036;
	--q-marinho-rgb  : 0, 51, 102;
	--q-azul         : #3190E7;
	--q-azul-rgb     : 49, 144, 231;
	--q-bg-fundo     : #FDFDFD;
	--q-text-body    : #495057;
	--q-text-heading : #1A1D20;
}

/* Fundo da Página com Padrão Sutil (Opcional, mas dá classe) */
.services-container {
	background-color : var(--q-bg-fundo);
	background-image : url("data:image/svg+xml,%DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3Es%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%233190e7' fill-opacity='0.03'%3E%3Cpath d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h40v40H40V0zM0 40h40v40H0V40z'/%3E%3C/g%3E%3C/svg%3E");
	padding          : 100px 0;
}

/* Títulos e Introdução */
.section-tag-premium {
	font-size      : 12px;
	font-weight    : 700;
	text-transform : uppercase;
	letter-spacing : 2px;
	color          : var(--q-azul);
	margin-bottom  : 10px;
	display        : block;
}

.service-main-title {
	font-size     : clamp(32px, 4vw, 48px);
	font-weight   : 800;
	color         : var(--q-marinho);
	line-height   : 1.2;
	margin-bottom : 25px;
}

.service-main-intro {
	font-size     : 18px;
	color         : var(--q-text-body);
	line-height   : 1.8;
	max-width     : 800px;
	margin-bottom : 80px;
}

/* =========================================
   MENU LATERAL MODERNO (STUCK)
   ========================================= */
.service-nav-premium {
	position        : sticky;
	top             : 120px; /* Ajuste conforme seu header */
	background      : rgba(255, 255, 255, 0.9);
	backdrop-filter : blur(10px);
	border-radius   : 20px;
	box-shadow      : 0 15px 40px rgba(0, 0, 0, 0.04);
	padding         : 30px;
	border          : 1px solid rgba(0, 0, 0, 0.05);
}

.service-nav-premium h4 {
	font-weight    : 800;
	font-size      : 16px;
	text-transform : uppercase;
	letter-spacing : 1px;
	margin-bottom  : 25px;
	color          : var(--q-marinho);
	text-align     : center;
}

.service-nav-premium ul { list-style : none; padding : 0; margin : 0; }

.service-nav-premium li { margin-bottom : 5px; }

.service-nav-premium a {
	color           : var(--q-text-body);
	text-decoration : none;
	font-size       : 15px;
	display         : flex;
	align-items     : center;
	gap             : 12px;
	padding         : 12px 18px;
	border-radius   : 12px;
	transition      : 0.3s;
	font-weight     : 500;
}

/* Ícones do Menu */
.nav-icon {
	width      : 20px;
	height     : 20px;
	color      : var(--q-azul);
	opacity    : 0.6;
	transition : 0.3s;
}

/* Estado Hover e Ativo do Menu */
.service-nav-premium a:hover {
	background-color : rgba(var(--q-azul-rgb), 0.05);
	color            : var(--q-azul);
	padding-left     : 22px;
}

.service-nav-premium a.active {
	background : linear-gradient(135deg, var(--q-marinho) 0%, #004080 100%);
	color      : #FFF;
	box-shadow : 0 8px 20px rgba(var(--q-marinho-rgb), 0.2);
}

.service-nav-premium a.active .nav-icon {
	color   : #FFF;
	opacity : 1;
}

/* Separadores de Categoria no Menu */
.nav-category-label {
	font-size      : 11px;
	text-transform : uppercase;
	color          : #B0B0B0;
	font-weight    : 700;
	margin         : 20px 0 8px 18px;
	letter-spacing : 1px;
}

/* =========================================
   CARDS DE SERVIÇOS PREMIUM
   ========================================= */
.service-block-wrapper {
	margin-bottom : 100px;
}

.block-title-premium {
	font-size     : 28px;
	font-weight   : 800;
	color         : var(--q-marinho);
	margin-bottom : 40px;
	display       : flex;
	align-items   : center;
	gap           : 15px;
}

.block-title-premium::after {
	content    : '';
	flex       : 1;
	height     : 1px;
	background : linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
}

.service-card-premium {
	background        : #FFF;
	border-radius     : 20px;
	padding           : 40px;
	margin-bottom     : 30px;
	transition        : 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	box-shadow        : 0 10px 30px rgba(0, 0, 0, 0.02);
	border            : 1px solid rgba(0, 0, 0, 0.03);
	position          : relative;
	overflow          : hidden;
	scroll-margin-top : 130px; /* Importante para o scroll da âncora */
}

.service-card-premium:hover {
	transform    : translateY(-8px);
	box-shadow   : 0 25px 60px rgba(0, 0, 0, 0.06);
	border-color : rgba(var(--q-azul-rgb), 0.1);
}

/* Detalhe Visual no Hover */
.service-card-premium::before {
	content    : '';
	position   : absolute;
	top        : 0; left : 0; width : 5px; height : 100%;
	background : linear-gradient(to bottom, var(--q-azul), var(--q-marinho));
	opacity    : 0;
	transition : 0.3s;
}

.service-card-premium:hover::before {
	opacity : 1;
}

/* Cabeçalho do Card (Ícone + Título) */
.card-header-premium {
	display       : flex;
	align-items   : center;
	gap           : 20px;
	margin-bottom : 25px;
}

.card-icon-box {
	width            : 60px;
	height           : 60px;
	background-color : rgba(var(--q-azul-rgb), 0.08);
	color            : var(--q-azul);
	border-radius    : 15px;
	display          : flex;
	align-items      : center;
	justify-content  : center;
	font-size        : 24px;
}

.service-card-premium h4 {
	font-weight : 800;
	color       : var(--q-text-heading);
	margin      : 0;
	font-size   : 22px;
}

/* Conteúdo do Card */
.card-content-premium p {
	font-size     : 16px;
	color         : var(--q-text-body);
	line-height   : 1.7;
	margin-bottom : 25px;
}

/* Box de Impacto (Resultado) */
.impact-box-premium {
	background-color : #F8FAFF;
	border-radius    : 15px;
	padding          : 20px 25px;
	border           : 1px solid rgba(var(--q-azul-rgb), 0.05);
	display          : flex;
	align-items      : flex-start;
	gap              : 15px;
}

.impact-icon {
	color       : var(--q-azul);
	margin-top  : 3px;
	flex-shrink : 0;
}

.impact-text strong {
	font-size      : 11px;
	text-transform : uppercase;
	letter-spacing : 1px;
	color          : var(--q-azul);
	display        : block;
	margin-bottom  : 5px;
}

.impact-text p {
	margin      : 0;
	font-size   : 14px;
	color       : #505860;
	font-style  : italic;
	line-height : 1.6;
}

/* =========================================
   CTA FINAL DE ALTO IMPACTO
   ========================================= */
.cta-final-premium {
	margin-top    : 100px;
	background    : linear-gradient(135deg, var(--q-marinho) 0%, #004080 60%, var(--q-azul) 100%);
	border-radius : 24px;
	padding       : 60px;
	color         : #FFF;
	position      : relative;
	overflow      : hidden;
	box-shadow    : 0 20px 50px rgba(var(--q-marinho-rgb), 0.15);
}

/* Brilho Decorativo no CTA */
.cta-final-premium::after {
	content       : '';
	position      : absolute;
	top           : -50%; right : -20%;
	width         : 300px; height : 300px;
	background    : rgba(255, 255, 255, 0.03);
	border-radius : 50%;
}

.cta-final-premium h3 {
	font-size     : clamp(26px, 3vw, 36px);
	font-weight   : 800;
	color         : #FFF;
	margin-bottom : 20px;
	max-width     : 600px;
	line-height   : 1.3;
}

.cta-final-premium p {
	font-size     : 18px;
	color         : rgba(255, 255, 255, 0.8);
	margin-bottom : 40px;
	max-width     : 500px;
	font-weight   : 400;
}

/* Botão WhatsApp Premium */
.btn-whats-premium {
	background-color : #25D366;
	background       : linear-gradient(135deg, #25D366 0%, #1EB954 100%);
	color            : #FFF;
	padding          : 18px 40px;
	border-radius    : 50px;
	font-weight      : 700;
	font-size        : 16px;
	display          : inline-flex;
	align-items      : center;
	gap              : 12px;
	text-decoration  : none;
	transition       : 0.3s;
	border           : none;
	box-shadow       : 0 10px 25px rgba(37, 211, 102, 0.3);
}

.btn-whats-premium:hover {
	color      : #FFF;
	transform  : translateY(-3px) scale(1.02);
	box-shadow : 0 15px 30px rgba(37, 211, 102, 0.4);
}

/* Responsividade */
@media (max-width : 991px) {
	.service-nav-premium {
		position      : static;
		margin-bottom : 50px;
		padding       : 20px;
	}
	.service-nav-premium h4 { margin-bottom : 15px; }
	.service-nav-premium a { padding : 10px; font-size : 14px; }
	.nav-category-label { margin-top : 15px; }

	.cta-final-premium { padding : 40px; text-align : center; }
	.cta-final-premium h3, .cta-final-premium p { max-width : 100%; margin-left : auto; margin-right : auto; }
}

/* =========================================
   ESTILO QUANTIFIQ PREMIUM - SERVIÇOS
   ========================================= */

:root {
	--q-marinho      : #036;
	--q-marinho-rgb  : 0, 51, 102;
	--q-azul         : #3190E7;
	--q-azul-rgb     : 49, 144, 231;
	--q-bg-fundo     : #FDFDFD;
	--q-text-body    : #495057;
	--q-text-heading : #1A1D20;
}

/* Fundo da Página com Padrão Sutil (Opcional, mas dá classe) */
.services-container {
	background-color : var(--q-bg-fundo);
	background-image : url("data:image/svg+xml,%DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3Es%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%233190e7' fill-opacity='0.03'%3E%3Cpath d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h40v40H40V0zM0 40h40v40H0V40z'/%3E%3C/g%3E%3C/svg%3E");
	padding          : 100px 0;
}

/* Títulos e Introdução */
.section-tag-premium {
	font-size      : 12px;
	font-weight    : 700;
	text-transform : uppercase;
	letter-spacing : 2px;
	color          : var(--q-azul);
	margin-bottom  : 10px;
	display        : block;
}

.service-main-title {
	font-size     : clamp(32px, 4vw, 48px);
	font-weight   : 800;
	color         : var(--q-marinho);
	line-height   : 1.2;
	margin-bottom : 25px;
}

.service-main-intro {
	font-size     : 18px;
	color         : var(--q-text-body);
	line-height   : 1.8;
	max-width     : 800px;
	margin-bottom : 80px;
}

/* =========================================
   MENU LATERAL MODERNO (STUCK)
   ========================================= */
.service-nav-premium {
	position        : sticky;
	top             : 120px; /* Ajuste conforme seu header */
	background      : rgba(255, 255, 255, 0.9);
	backdrop-filter : blur(10px);
	border-radius   : 20px;
	box-shadow      : 0 15px 40px rgba(0, 0, 0, 0.04);
	padding         : 30px;
	border          : 1px solid rgba(0, 0, 0, 0.05);
}

.service-nav-premium h4 {
	font-weight    : 800;
	font-size      : 16px;
	text-transform : uppercase;
	letter-spacing : 1px;
	margin-bottom  : 25px;
	color          : var(--q-marinho);
	text-align     : center;
}

.service-nav-premium ul { list-style : none; padding : 0; margin : 0; }

.service-nav-premium li { margin-bottom : 5px; }

.service-nav-premium a {
	color           : var(--q-text-body);
	text-decoration : none;
	font-size       : 15px;
	display         : flex;
	align-items     : center;
	gap             : 12px;
	padding         : 12px 18px;
	border-radius   : 12px;
	transition      : 0.3s;
	font-weight     : 500;
}

/* Ícones do Menu */
.nav-icon {
	width      : 20px;
	height     : 20px;
	color      : var(--q-azul);
	opacity    : 0.6;
	transition : 0.3s;
}

/* Estado Hover e Ativo do Menu */
.service-nav-premium a:hover {
	background-color : rgba(var(--q-azul-rgb), 0.05);
	color            : var(--q-azul);
	padding-left     : 22px;
}

.service-nav-premium a.active {
	background : linear-gradient(135deg, var(--q-marinho) 0%, #004080 100%);
	color      : #FFF;
	box-shadow : 0 8px 20px rgba(var(--q-marinho-rgb), 0.2);
}

.service-nav-premium a.active .nav-icon {
	color   : #FFF;
	opacity : 1;
}

/* Separadores de Categoria no Menu */
.nav-category-label {
	font-size      : 11px;
	text-transform : uppercase;
	color          : #B0B0B0;
	font-weight    : 700;
	margin         : 20px 0 8px 18px;
	letter-spacing : 1px;
}

/* =========================================
   CARDS DE SERVIÇOS PREMIUM
   ========================================= */
.service-block-wrapper {
	margin-bottom : 100px;
}

.block-title-premium {
	font-size     : 28px;
	font-weight   : 800;
	color         : var(--q-marinho);
	margin-bottom : 40px;
	display       : flex;
	align-items   : center;
	gap           : 15px;
}

.block-title-premium::after {
	content    : '';
	flex       : 1;
	height     : 1px;
	background : linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
}

.service-card-premium {
	background        : #FFF;
	border-radius     : 20px;
	padding           : 40px;
	margin-bottom     : 30px;
	transition        : 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	box-shadow        : 0 10px 30px rgba(0, 0, 0, 0.02);
	border            : 1px solid rgba(0, 0, 0, 0.03);
	position          : relative;
	overflow          : hidden;
	scroll-margin-top : 130px; /* Importante para o scroll da âncora */
}

.service-card-premium:hover {
	transform    : translateY(-8px);
	box-shadow   : 0 25px 60px rgba(0, 0, 0, 0.06);
	border-color : rgba(var(--q-azul-rgb), 0.1);
}

/* Detalhe Visual no Hover */
.service-card-premium::before {
	content    : '';
	position   : absolute;
	top        : 0; left : 0; width : 5px; height : 100%;
	background : linear-gradient(to bottom, var(--q-azul), var(--q-marinho));
	opacity    : 0;
	transition : 0.3s;
}

.service-card-premium:hover::before {
	opacity : 1;
}

/* Cabeçalho do Card (Ícone + Título) */
.card-header-premium {
	display       : flex;
	align-items   : center;
	gap           : 20px;
	margin-bottom : 25px;
}

.card-icon-box {
	width            : 60px;
	height           : 60px;
	background-color : rgba(var(--q-azul-rgb), 0.08);
	color            : var(--q-azul);
	border-radius    : 15px;
	display          : flex;
	align-items      : center;
	justify-content  : center;
	font-size        : 24px;
}

.service-card-premium h4 {
	font-weight : 800;
	color       : var(--q-text-heading);
	margin      : 0;
	font-size   : 22px;
}

/* Conteúdo do Card */
.card-content-premium p {
	font-size     : 16px;
	color         : var(--q-text-body);
	line-height   : 1.7;
	margin-bottom : 25px;
}

/* Box de Impacto (Resultado) */
.impact-box-premium {
	background-color : #F8FAFF;
	border-radius    : 15px;
	padding          : 20px 25px;
	border           : 1px solid rgba(var(--q-azul-rgb), 0.05);
	display          : flex;
	align-items      : flex-start;
	gap              : 15px;
}

.impact-icon {
	color       : var(--q-azul);
	margin-top  : 3px;
	flex-shrink : 0;
}

.impact-text strong {
	font-size      : 11px;
	text-transform : uppercase;
	letter-spacing : 1px;
	color          : var(--q-azul);
	display        : block;
	margin-bottom  : 5px;
}

.impact-text p {
	margin      : 0;
	font-size   : 14px;
	color       : #505860;
	font-style  : italic;
	line-height : 1.6;
}

/* =========================================
   CTA FINAL DE ALTO IMPACTO
   ========================================= */
.cta-final-premium {
	margin-top    : 100px;
	background    : linear-gradient(135deg, var(--q-marinho) 0%, #004080 60%, var(--q-azul) 100%);
	border-radius : 24px;
	padding       : 60px;
	color         : #FFF;
	position      : relative;
	overflow      : hidden;
	box-shadow    : 0 20px 50px rgba(var(--q-marinho-rgb), 0.15);
}

/* Brilho Decorativo no CTA */
.cta-final-premium::after {
	content       : '';
	position      : absolute;
	top           : -50%; right : -20%;
	width         : 300px; height : 300px;
	background    : rgba(255, 255, 255, 0.03);
	border-radius : 50%;
}

.cta-final-premium h3 {
	font-size     : clamp(26px, 3vw, 36px);
	font-weight   : 800;
	color         : #FFF;
	margin-bottom : 20px;
	max-width     : 600px;
	line-height   : 1.3;
}

.cta-final-premium p {
	font-size     : 18px;
	color         : rgba(255, 255, 255, 0.8);
	margin-bottom : 40px;
	max-width     : 500px;
	font-weight   : 400;
}

/* Botão WhatsApp Premium */
.btn-whats-premium {
	background-color : #25D366;
	background       : linear-gradient(135deg, #25D366 0%, #1EB954 100%);
	color            : #FFF;
	padding          : 18px 40px;
	border-radius    : 50px;
	font-weight      : 700;
	font-size        : 16px;
	display          : inline-flex;
	align-items      : center;
	gap              : 12px;
	text-decoration  : none;
	transition       : 0.3s;
	border           : none;
	box-shadow       : 0 10px 25px rgba(37, 211, 102, 0.3);
}

.btn-whats-premium:hover {
	color      : #FFF;
	transform  : translateY(-3px) scale(1.02);
	box-shadow : 0 15px 30px rgba(37, 211, 102, 0.4);
}

/* Responsividade */
@media (max-width : 991px) {
	.service-nav-premium {
		position      : static;
		margin-bottom : 50px;
		padding       : 20px;
	}
	.service-nav-premium h4 { margin-bottom : 15px; }
	.service-nav-premium a { padding : 10px; font-size : 14px; }
	.nav-category-label { margin-top : 15px; }

	.cta-final-premium { padding : 40px; text-align : center; }
	.cta-final-premium h3, .cta-final-premium p { max-width : 100%; margin-left : auto; margin-right : auto; }
}

.service-nav-premium {
	position      : sticky;
	top           : 100px;
	background    : #FFF;
	border-radius : 16px;
	padding       : 25px;
	/* Sombras mais suaves e modernas */
	box-shadow    : 0 4px 24px rgba(0, 0, 0, 0.04);
	border        : 1px solid rgba(0, 51, 102, 0.05);
	/* Limita a largura para não esticar */
	max-width     : 280px;
	margin-bottom : 30px;
}

/* Centralizar o título "NAVEGAÇÃO" com uma linha sutil */
.service-nav-premium h4 {
	font-size      : 12px;
	letter-spacing : 2px;
	font-weight    : 800;
	color          : #036;
	text-align     : center;
	margin-bottom  : 25px;
	padding-bottom : 15px;
	border-bottom  : 1px solid #F0F0F0;
}

/* Melhorar os links para não ficarem "perdidos" no branco */
.service-nav-premium a {
	display         : flex;
	align-items     : center;
	gap             : 12px;
	padding         : 12px 15px;
	border-radius   : 10px;
	color           : #555;
	text-decoration : none;
	font-weight     : 500;
	transition      : all 0.3s ease;
	margin-bottom   : 4px;
}

.service-nav-premium a:hover {
	background : rgba(49, 144, 231, 0.05); /* Azul Quantifiq clarinho */
	color      : #3190E7;
	transform  : translateX(5px);
}

/* Item ativo (onde o usuário está) */
.service-nav-premium a.active {
	background : #036;
	color      : #FFF;
	box-shadow : 0 4px 12px rgba(0, 51, 102, 0.2);
}

/* Sidebar Fixa e Estreita */
.service-nav-premium {
	position      : sticky;
	top           : 120px; /* Ajuste conforme a altura do seu header fixo */
	background    : #FFF;
	border-radius : 16px;
	padding       : 25px;
	box-shadow    : 0 4px 24px rgba(0, 0, 0, 0.04);
	border        : 1px solid rgba(0, 51, 102, 0.05);
	width         : 100%;
}

/* Garante que no desktop as colunas se comportem como flexbox */
@media (min-width : 992px) {
	.services-container .row {
		display : flex;
	}
}

/* No mobile, o menu lateral pode ser escondido ou virar uma lista simples */
@media (max-width : 991px) {
	.service-nav-premium {
		position      : relative;
		top           : 0;
		margin-bottom : 30px;
	}
}

@media (max-width : 991px) {
	.service-nav-premium {
		position           : sticky;
		top                : 70px;
		z-index            : 100;
		background         : #FFF;
		max-width          : none !important;
		width              : 100vw !important;
		margin-left        : -24px !important;
		margin-right       : -24px !important;
		padding            : 12px 0;
		border-bottom      : 1px solid #EEE;

		/* MÁGICA AQUI: Cria o efeito de transparência nas bordas */
		-webkit-mask-image : linear-gradient(to right, transparent, black 5%, black 90%, transparent);
		mask-image         : linear-gradient(to right, transparent, black 5%, black 90%, transparent);
	}

	.service-nav-premium ul {
		display                    : flex !important;
		flex-direction             : row !important;
		overflow-x                 : auto !important;
		white-space                : nowrap;
		/* Padding maior na direita para garantir que o último item não fique sob o fade */
		padding                    : 0 40px 0 24px !important;
		gap                        : 12px;
		-webkit-overflow-scrolling : touch;
		scroll-snap-type           : x mandatory; /* Faz o scroll "parar" certinho no botão */
	}

	.service-nav-premium ul::-webkit-scrollbar {
		display : none;
	}

	.service-nav-premium a {
		display           : inline-flex !important;
		align-items       : center;
		background        : #F4F7FA;
		border            : 1px solid #E1E8ED;
		padding           : 10px 20px !important;
		border-radius     : 50px !important;
		font-size         : 14px !important;
		color             : #555 !important;
		flex-shrink       : 0;
		scroll-snap-align : start; /* Alinha o botão ao início ao scrollar */
	}

	.service-nav-premium a.active {
		background   : #036 !important;
		color        : #FFF !important;
		border-color : #036 !important;
	}

	/* Opcional: Adiciona um ícone de seta bem pequeno ou instrução visual */
	.service-nav-premium::after {
		content        : '→';
		position       : absolute;
		right          : 15px;
		top            : 50%;
		transform      : translateY(-50%);
		font-size      : 12px;
		color          : #3190E7;
		animation      : pulseArrow 1.5s infinite;
		pointer-events : none;
		opacity        : 0.7;
	}
}

@keyframes pulseArrow {
	0% { transform : translateY(-50%) translateX(0); opacity : 0.3; }
	50% { transform : translateY(-50%) translateX(5px); opacity : 0.8; }
	100% { transform : translateY(-50%) translateX(0); opacity : 0.3; }
}

/* Correção de Margens Globais para Mobile */
@media (max-width : 991px) {
	/* Garante que o container principal tenha respiro lateral */
	.services-container .container {
		padding-left  : 20px !important;
		padding-right : 20px !important;
	}

	/* Ajuste de títulos que podem estar forçando a largura */
	.service-main-title {
		padding       : 0 10px;
		margin-bottom : 20px;
	}

	/* Ajuste dos Cards para não colarem */
	.service-card-premium {
		padding      : 25px 20px !important; /* Reduz padding interno para ganhar espaço */
		margin-left  : 5px;
		margin-right : 5px;
	}

	/* BARRA DE NAVEGAÇÃO HORIZONTAL (Ajuste para não cortar) */
	.service-nav-premium {
		margin-left  : -20px !important; /* Compensa o padding do container para sangrar */
		margin-right : -20px !important;
		width        : calc(100% + 40px) !important;
	}
}

/* AJUSTE DO BOTÃO WHATSAPP (Floating Action Button) */
/* Se for o botão fixo que você criou via CSS */
@media (max-width : 768px) {
	#WAButton,
	.whatsapp-button,
	a[href*="wa.me"] {
		bottom : 20px !important;
		right  : 20px !important;
	}

	/* Se estiver usando a biblioteca floating-whatsapp, ajuste o container dela */
	.floating-wpp {
		right  : 20px !important;
		bottom : 20px !important;
	}
}

@media (max-width : 991px) {
	.service-nav-premium {
		position           : sticky;
		/* Aumente esse valor! Se o header tem 80px, coloque 80px ou 90px */
		top                : 80px;
		z-index            : 99; /* Garante que fique abaixo do menu sanduíche se necessário */
		background         : #FFF;

		/* Adicione uma margem superior para descolar do header */
		margin-top         : 0;

		/* O efeito de máscara que fizemos antes */
		-webkit-mask-image : linear-gradient(to right, transparent, black 5%, black 90%, transparent);
		mask-image         : linear-gradient(to right, transparent, black 5%, black 90%, transparent);

		/* Limpa as margens negativas que podem estar puxando para cima */
		padding            : 15px 0;
	}
}

@media (max-width : 991px) {
	.service-nav-premium {
		position       : sticky !important;
		top            : 80px; /* Garante que não suba demais */
		z-index        : 1000;
		background     : #FFF;
		width          : 100% !important; /* Mude de 100vw para 100% */
		margin         : 0 !important; /* Zere as margens negativas */
		padding        : 10px 0;
		overflow       : hidden; /* Impede que o container pai trave */
		pointer-events : auto; /* Garante que o clique passe para o que está atrás se necessário */
	}

	.service-nav-premium ul {
		display                    : flex;
		overflow-x                 : auto;
		-webkit-overflow-scrolling : touch;
		padding                    : 5px 20px;
		gap                        : 10px;
	}
}

.service-card-premium {
	/* Ajuste o valor (150px) para ser a altura do seu Header + a barra de navegação mobile */
	scroll-margin-top : 160px !important;
}

html, body {
	overflow-x : hidden;
	width      : 100%;
	position   : relative;
}

/* Container da sobreposição */
.video-overlay {
	position        : absolute;
	top             : 0;
	left            : 0;
	width           : 100%;
	height          : 100%;
	display         : flex;
	align-items     : center;
	justify-content : center;
	background      : rgba(0, 0, 0, 0.3); /* Escurece levemente o poster */
	cursor          : pointer;
	transition      : all 0.4s ease;
	z-index         : 10;
}

/* Esconde a sobreposição quando o vídeo der play */
.video-overlay.hidden {
	opacity        : 0;
	visibility     : hidden;
	pointer-events : none;
}

/* Estilo do Botão */
.play-button {
	background    : #3190E7; /* Cor da sua marca */
	color         : white;
	border        : none;
	padding       : 15px 30px;
	border-radius : 50px;
	font-weight   : 700;
	display       : flex;
	align-items   : center;
	gap           : 10px;
	font-size     : 16px;
	box-shadow    : 0 10px 20px rgba(49, 144, 231, 0.4);
	transition    : transform 0.2s ease;
}

.play-button:hover {
	transform  : scale(1.05);
	background : #287CC7;
}

/* Efeito de pulso opcional no ícone */
.play-button i {
	width  : 20px;
	height : 20px;
}

.play-button {

	cursor : pointer;
}