*, *::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-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;
	}
}