/* ==========================================================================
   VendaAI - overrides da landing sobre o template iThub
   Carregado por último no Views/Layout/_Layout.cshtml (depois do responsive.css).
   Regra: só sobrescreve o que a página usa; o CSS do template fica intacto.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Paleta
   Gradiente do logo: #57CCFE -> #CA97FA (azul-céu -> lilás). Para texto branco
   em botões e faixas usamos a versão escura do mesmo eixo, com contraste AA:
   branco sobre #1D6FE0 = 4,77:1; sobre #8B4FE0 = 4,89:1; no meio (#545FE0) = 5,13:1.
   -------------------------------------------------------------------------- */
:root{
	--brand-a:#1D6FE0;
	--brand-b:#8B4FE0;
	--brand-sky:#57CCFE;
	--brand-lilac:#CA97FA;
	--brand-ink:#1552C0;       /* texto de destaque sobre fundo claro (5,76:1 em #E6E9F1) */
	--brand-dark:#0B1233;      /* fundos escuros */
	--brand-grad:linear-gradient(90deg, var(--brand-a) 0%, var(--brand-b) 100%);
	--brand-grad-v:linear-gradient(180deg, var(--brand-a) 0%, var(--brand-b) 100%);
	--brand-grad-rev:linear-gradient(90deg, var(--brand-b) 0%, var(--brand-a) 100%);
	--ink:#1B2033;             /* texto forte */
	--ink-muted:#4F566B;       /* texto de apoio (7,3:1 no branco) */
	--surface:#F3F5FA;         /* blocos claros */
	--line:#DCE1EF;

	/* variáveis do template reapontadas para a marca */
	--main-color:var(--brand-ink);
	--main-color-rgb:21,82,192;
	--color-two:var(--brand-b);
	--color-two-rgb:139,79,224;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html{
	scroll-behavior:smooth;
}

/* Durante o carregamento a rolagem é direta: ao abrir uma URL com #secao (volta do formulário,
   link de outra página) o navegador não atravessa a página inteira até a seção.
   A classe sai no load (script.js); o bootstrap.css também liga o smooth em :root. */
:root.is-loading{
	scroll-behavior:auto;
}

/* Âncoras (seções e a nota ¹) não ficam sob o header fixo */
[id]{
	scroll-margin-top:90px;
}

/* Header fixo usava o fadeInDown do animate.css, que saiu do layout */
@keyframes fadeInDown{
	from{ opacity:0; transform:translate3d(0,-100%,0); }
	to{ opacity:1; transform:none; }
}

/* Raleway saiu do carregamento: os usos decorativos passam para Outfit */
.page-title_big-title{
	font-family:"Outfit", sans-serif;
}

/* Caixa de frase: o template aplica capitalize/uppercase em títulos, botões e parágrafos.
   Uppercase fica só nos eyebrows (.sec-title_title). */
.btn-style-one,
.btn-style-two,
.btn-style-three,
.sec-title_heading,
.main-header .main-menu .navigation > li > a,
.main-header .mobile-menu .navigation li > a,
.slider-three_title,
.slider-three_heading,
.slider-three_text,
.empower-block_one-title,
.about-two_title,
.offer-one_heading,
.page-title h1,
.team-tabs .tab-btns .tab-btn,
.news-block_one-title,
.styled-pagination li a{
	text-transform:none;
}

/* Foco visível. O global.css zera o outline com !important
   (button, a:focus { outline:none !important }), então aqui também precisa de !important,
   inclusive na cor: o shorthand com !important trava outline-color. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
	outline:3px solid var(--brand-ink) !important;
	outline-offset:3px;
}

.main-header a:focus-visible,
.main-header button:focus-visible,
.landing-hero a:focus-visible,
.business-one a:focus-visible,
.contact-one a:focus-visible,
.contact-one button:focus-visible,
.contact-one input:focus-visible,
.contact-one [tabindex]:focus-visible,
.footer-style_three a:focus-visible{
	outline-color:#FFFFFF !important;
}

/* o menu mobile fica dentro do header, mas tem fundo branco */
.main-header .mobile-menu a:focus-visible,
.main-header .mobile-menu button:focus-visible{
	outline-color:var(--brand-ink) !important;
}

@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior:auto; }
	*,
	*::before,
	*::after{
		animation-duration:0.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:0.01ms !important;
		transition-delay:0s !important;
	}

	/* Os pontos só aparecem pela animação (a base do template é opacity 0): sem ela, ficam visíveis e parados */
	.sec-title_dots span{
		animation:none !important;
		opacity:1;
	}
}

/* --------------------------------------------------------------------------
   3. Componentes do template recoloridos (só os que a página usa)
   -------------------------------------------------------------------------- */
.btn-style-one{
	background-color:var(--brand-a);
	background-image:var(--brand-grad);
}

.btn-style-one:before,
.btn-style-two:before,
.btn-style-three:before{
	background-image:var(--brand-grad-rev);
}

.btn-style-two .btn-wrap .text-one{
	color:var(--ink);
}

button.theme-btn{
	cursor:pointer;
}

.sec-title_dots{
	flex-shrink:0;
	white-space:nowrap; /* eyebrow longo no celular não quebra os 3 pontos */
}

.sec-title_dots span{
	background-image:linear-gradient(0deg, var(--brand-a) 0%, var(--brand-b) 100%);
}

.sec-title_heading{
	font-size:clamp(30px, 1.6vw + 20px, 48px);
	line-height:1.18;
}

.sec-title_subtitle{
	position:relative;
	margin:18px 0 0;
	font-size:20px;
	line-height:1.5;
	font-weight:600;
	color:var(--ink);
	font-family:"Outfit", sans-serif;
}

.sec-title_text{
	margin-bottom:0;
}

.sec-title.light .sec-title_subtitle{
	color:var(--white-color);
}

.sec-title.centered .sec-title_heading{
	max-width:960px;
	margin-left:auto;
	margin-right:auto;
}

.sec-title.centered .sec-title_subtitle,
.sec-title.centered .sec-title_text{
	max-width:820px;
	margin-left:auto;
	margin-right:auto;
}

/* Títulos sem palavra sozinha na última linha */
.sec-title_heading,
.cta-one_heading,
.landing-aba_title,
.slider-three_heading{
	text-wrap:balance;
}

@media only screen and (max-width: 767px){
	.sec-title_title{
		font-size:16px;
	}

	/* Eyebrow que quebra em duas linhas: os pontos seguem a última palavra, não a borda direita */
	.sec-title:not(.centered) .sec-title_title{
		display:block;
	}

	.sec-title:not(.centered) .sec-title_dots{
		display:inline-block;
		margin-left:8px;
	}
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.header-top_list-two:before{
	background-image:linear-gradient(-90deg, var(--brand-a) 0%, var(--brand-b) 100%);
}

.main-header.header-style-three .main-menu .navigation > li > a:hover{
	background-image:var(--brand-grad-v);
}

.main-header .header-lower .logo-box .logo img{
	display:block;
	width:165px;
	height:auto;
}

.main-header .mobile-nav-toggler{
	background:none;
	border:0;
	padding:0 4px;
}

.mobile-menu .close-btn{
	background:none;
	border:0;
	padding:0;
	/* o "transition:all" do template atrasava também o visibility em 900ms: o X não recebia o foco ao abrir */
	transition-property:transform, opacity;
}

.mobile-menu .nav-logo img{
	width:165px;
	height:auto;
}

/* ícones SVG no lugar do Font Awesome (header, menu mobile e rodapé) */
.landing-icon{
	display:inline-block;
	width:1em;
	height:1em;
	vertical-align:-0.125em;
	fill:currentColor;
}

.landing-icon--line{
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.footer-three_socials .landing-icon{
	width:16px;
	height:16px;
	vertical-align:middle;
}

.main-header .mobile-nav-toggler .landing-icon{
	width:24px;
	height:24px;
	vertical-align:middle;
}

.mobile-menu .close-btn .landing-icon{
	width:20px;
	height:20px;
	vertical-align:middle;
}

/* CTA no fim do menu mobile: no celular o botão do header não cabe */
.mobile-menu_cta{
	padding:10px 25px 30px;
}

.mobile-menu_cta .theme-btn{
	display:block;
	width:100%;
}

.mobile-menu_cta .theme-btn .btn-wrap{
	float:none;
	display:block;
}

@media only screen and (max-width: 1240px){
	.main-header.header-style-three .main-menu .navigation > li > a{
		padding:8px 10px;
		font-size:15px;
	}
}

/* O responsive.css do template esconde o botão em ≤1032px e só o traz de volta em ≤1023px:
   entre 1024 e 1032 (iPad na horizontal) o header ficava sem CTA e sem hambúrguer. */
@media only screen and (min-width: 1024px) and (max-width: 1032px){
	.main-header.header-style-three .main-header_button{
		display:block;
	}
}

/* Blocos arredondados (fundo com margem de 20px): até o contêiner de 1320px ter folga,
   o conteúdo encostava ou passava da borda do fundo. */
@media only screen and (min-width: 768px) and (max-width: 1365px){
	.landing-beneficios .auto-container,
	.landing-licencas .auto-container{
		padding-left:30px;
		padding-right:30px;
	}

	.landing-demo .auto-container{
		padding-left:50px;
		padding-right:50px;
	}
}

@media only screen and (max-width: 767px){
	.main-header .header-lower .logo-box .logo img{
		width:140px;
	}

	/* blocos arredondados com margem de 10px: respiro interno maior no celular */
	.landing-beneficios .auto-container,
	.landing-integracao .auto-container,
	.landing-licencas .auto-container,
	.landing-demo .auto-container{
		padding-left:30px;
		padding-right:30px;
	}
}

/* --------------------------------------------------------------------------
   5. Hero (Slider Three com 1 slide: sem Swiper, clip-path, opacity e delays)
   -------------------------------------------------------------------------- */
.landing-hero_slide{
	position:relative;
	overflow:hidden;
	padding:230px 0 150px;
	border-radius:0 0 40px 40px;
	background-color:var(--brand-dark);
}

.landing-hero .slider-three_image-layer{
	opacity:1;
	clip-path:none;
	transition:none;
	border-radius:0;
}

.landing-hero .slider-three_image-layer picture,
.landing-hero .slider-three_image-layer img{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:block;
}

.landing-hero .slider-three_image-layer img{
	object-fit:cover;
	object-position:70% center;
}

/* Degradê escuro da esquerda para a direita: o texto fica à esquerda, as pessoas no terço direito */
.landing-hero .slider-three_image-layer:before{
	z-index:1;
	opacity:1;
	background-color:transparent;
	background-image:linear-gradient(90deg, rgba(8,13,40,0.94) 0%, rgba(8,13,40,0.86) 44%, rgba(8,13,40,0.5) 62%, rgba(8,13,40,0.08) 78%, rgba(8,13,40,0) 100%);
}

.landing-hero .slider-three_content{
	display:block;
	max-width:690px;
}

.landing-hero .slider-three_title,
.landing-hero .slider-three_heading,
.landing-hero .slider-three_text,
.landing-hero .slider-three_button{
	clip-path:none;
	transition:none;
}

/* eyebrow em azul-céu mais claro e com sombra: no fim da linha o fundo já é a foto */
.landing-hero .slider-three_title{
	margin:0 0 22px;
	font-size:18px;
	line-height:1.5;
	font-weight:600;
	color:#A9E3FF;
	text-shadow:0 1px 3px rgba(8,13,40,0.7);
	font-family:"Manrope", sans-serif;
}

/* ERP em destaque no eyebrow: pílula translúcida com borda no gradiente do logo.
   O script.js troca a palavra; a grade empilha a pílula e as palavras invisíveis (.landing-erp_sizer),
   então o espaço reservado é sempre o da maior palavra e a linha não quebra diferente a cada troca. */
.landing-erp{
	display:inline-grid;
	margin:-4px 0; /* a pílula é mais alta que o texto: a margem negativa mantém a altura da linha */
}

.landing-erp > *{
	grid-area:1 / 1;
	justify-self:start;
}

.landing-erp_pill,
.landing-erp_sizer{
	padding:2px 13px;
	border:1.5px solid transparent;
	white-space:nowrap;
	font-weight:700;
}

.landing-erp_sizer{
	visibility:hidden;
}

/* a palavra que sai e a que entra ocupam a mesma célula; o clip-path corta as duas no contorno da pílula
   (overflow:hidden mudaria a linha de base e desalinharia o texto) */
.landing-erp_pill{
	position:relative;
	display:grid;
	border-radius:999px;
	color:var(--white-color);
	background-image:linear-gradient(90deg, rgba(87,204,254,0.2) 0%, rgba(202,151,250,0.24) 100%);
	clip-path:inset(0 round 999px);
	transition:width .5s cubic-bezier(.2,.7,.2,1);
}

.landing-erp_pill:before{
	content:"";
	position:absolute;
	inset:-1.5px;
	padding:1.5px;
	border-radius:inherit;
	background-image:linear-gradient(90deg, var(--brand-sky) 0%, var(--brand-lilac) 100%);
	-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	mask-composite:exclude;
}

/* a que sai some rápido; a que entra espera um instante, para as duas não se sobreporem no meio */
.landing-erp_word{
	grid-area:1 / 1;
	justify-self:start;
	transition:opacity .35s ease .12s, translate .5s cubic-bezier(.2,.7,.2,1) .12s;
}

.landing-erp_word.is-entering{
	opacity:0;
	translate:0 1em;
}

.landing-erp_word.is-leaving{
	opacity:0;
	translate:0 -1em;
	transition:opacity .16s ease-out, translate .4s cubic-bezier(.4,0,.2,1);
}

/* movimento reduzido: a lista inteira, parada, já na primeira pintura (o script.js não troca o texto: sem CLS);
   pode quebrar em duas linhas */
.landing-erp_all{
	display:none;
}

@media (prefers-reduced-motion: reduce){
	.landing-erp_word{
		display:none;
	}

	.landing-erp_all{
		display:block;
	}

	.landing-erp_pill{
		white-space:normal;
		border-radius:14px;
		clip-path:none;
	}
}

/* mesmo rotador no meio do texto (cards da integração): sem pílula, a palavra na altura da linha.
   Duas classes: vence o padding da pílula no celular (max-width: 767px, logo abaixo) */
.landing-erp.landing-erp--text{
	margin:0;
}

.landing-erp--text .landing-erp_pill,
.landing-erp--text .landing-erp_sizer{
	padding:0;
	border:0;
	font-weight:inherit;
}

.landing-erp--text .landing-erp_pill{
	color:inherit;
	background-image:none;
	clip-path:inset(0);
}

.landing-erp--text .landing-erp_pill:before{
	content:none;
}

/* no título do card, o nome em gradiente escuro da marca (#1D6FE0 4,8:1 e #8B4FE0 4,9:1 no branco) */
.landing-card_title .landing-erp_word,
.landing-card_title .landing-erp_all{
	color:var(--brand-a);
	background-image:var(--brand-grad);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
}

.landing-hero .slider-three_heading{
	margin:0 0 24px;
	font-size:72px;
	line-height:1.06;
	letter-spacing:-0.01em;
}

.landing-hero .slider-three_text{
	max-width:610px;
	margin:0 0 36px;
	font-size:20px;
	line-height:1.6;
	color:var(--white-color);
}

.landing-hero .slider-three_button{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:16px;
}

/* CTA secundário em contorno: o principal continua sendo o de maior destaque */
.landing-hero .btn-style-two{
	padding:16px 34px;
	background-color:transparent;
	box-shadow:inset 0 0 0 2px rgba(255,255,255,0.85);
}

.landing-hero .btn-style-two .btn-wrap .text-one{
	color:var(--white-color);
}

.landing-hero .slider-three_options{
	border-color:var(--brand-lilac);
}

.landing-hero .slider-three_authors{
	padding:16px 30px;
}

.landing-hero .slider-three_reviews{
	margin:0;
	font-size:20px;
	line-height:1.3;
}

.landing-hero .slider-three_reviews span{
	display:block;
	margin-top:2px;
	font-size:15px;
	font-weight:500;
	color:var(--ink-muted);
	font-family:"Manrope", sans-serif;
}

@media only screen and (max-width: 1140px){
	.landing-hero .slider-three_heading{
		font-size:60px;
	}

	/* telas médias: o texto avança sobre a foto, então o degradê vai mais longe */
	.landing-hero .slider-three_image-layer:before{
		background-image:linear-gradient(90deg, rgba(8,13,40,0.94) 0%, rgba(8,13,40,0.86) 55%, rgba(8,13,40,0.68) 80%, rgba(8,13,40,0.45) 100%);
	}
}

/* Celular: foto no topo (versão retrato) e texto sobre o degradê que escurece para baixo.
   A faixa da foto é curta o bastante para o CTA principal caber na primeira dobra (360x740). */
@media only screen and (max-width: 767px){
	.landing-hero_slide{
		padding:calc(min(80vw, 460px) - 120px) 0 110px;
		border-radius:0 0 30px 30px;
	}

	.landing-hero .slider-three_image-layer{
		bottom:auto;
		height:min(80vw, 460px);
	}

	.landing-hero .slider-three_image-layer img{
		object-position:center top;
	}

	.landing-hero .slider-three_image-layer:before{
		background-image:linear-gradient(180deg, rgba(8,13,40,0.55) 0%, rgba(8,13,40,0.1) 22%, rgba(8,13,40,0.25) 45%, rgba(8,13,40,0.88) 72%, rgba(11,18,51,1) 100%);
	}

	.landing-hero .slider-three_title{
		font-size:15px;
		margin-bottom:14px;
	}

	.landing-erp_pill,
	.landing-erp_sizer{
		padding:1px 10px;
	}

	.landing-hero .slider-three_heading{
		font-size:40px;
		line-height:1.1;
		margin-bottom:18px;
	}

	.landing-hero .slider-three_text{
		font-size:17px;
		margin-bottom:28px;
	}

	.landing-hero .slider-three_button{
		flex-direction:column;
		align-items:stretch;
		gap:12px;
	}

	.landing-hero .slider-three_button .theme-btn{
		display:block;
	}

	.landing-hero .slider-three_button .theme-btn .btn-wrap{
		float:none;
		display:block;
	}

	.landing-hero .slider-three_options{
		left:15px;
		right:15px;
		border-radius:24px;
	}

	.landing-hero .slider-three_authors{
		border-radius:22px;
		padding:14px 20px;
	}

	.landing-hero .slider-three_reviews{
		font-size:17px;
	}

	.landing-hero .slider-three_reviews span{
		font-size:14px;
	}
}

@media only screen and (max-width: 400px){
	.landing-hero .slider-three_heading{
		font-size:34px;
	}

	.landing-hero .slider-three_text{
		font-size:16px;
		margin-bottom:24px;
	}

	/* rótulos longos ("Quero ver um pedido de ponta a ponta") em uma linha só */
	.landing-hero .slider-three_button .theme-btn,
	.landing-passos .theme-btn,
	.landing-cta .theme-btn,
	.landing-licencas .theme-btn,
	.landing-clientes .theme-btn,
	.landing-demo .default-form .form-group .theme-btn{
		padding-left:18px;
		padding-right:18px;
	}
}

/* --------------------------------------------------------------------------
   6. Solução (Video One sem play)
   -------------------------------------------------------------------------- */
.landing-solucao.video-one.style-two{
	margin-top:0;
	padding:150px 0 30px;
}

.landing-solucao .video-box .video-image{
	margin:10px 0 0;
	border:0;
	border-radius:24px;
	background-color:var(--surface);
	box-shadow:0 30px 80px rgba(14,24,64,0.16);
}

.landing-solucao .video-box .video-image img{
	display:block;
	border-radius:24px;
}

.landing-chips{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:12px;
	margin:32px 0 0;
	padding:0;
}

.landing-chips li{
	padding:10px 20px;
	border-radius:50px;
	font-size:15px;
	font-weight:600;
	line-height:1.4;
	color:var(--ink);
	background-color:var(--surface);
	border:1px solid var(--line);
}

.landing-chips li:before{
	content:'';
	display:inline-block;
	width:8px;
	height:8px;
	margin-right:10px;
	border-radius:50%;
	vertical-align:middle;
	background-image:var(--brand-grad);
}

@media only screen and (max-width: 767px){
	.landing-solucao.video-one.style-two{
		padding-top:120px;
	}

	.landing-solucao .video-box .video-image,
	.landing-solucao .video-box .video-image img{
		border-radius:14px;
	}

	.landing-chips{
		justify-content:flex-start;
	}

	.landing-chips li{
		font-size:14px;
	}
}

/* --------------------------------------------------------------------------
   7. Passo a passo (Empower One)
   -------------------------------------------------------------------------- */
.landing-passos.empower-one{
	padding:110px 0 100px;
}

.landing-passos .auto-container{
	max-width:1500px;
}

/* Flex em vez do inline-block do template: os 19,8% + o espaço entre os cards (que depende da fonte)
   quebravam o 5º card para uma 2ª linha até a fonte web carregar, e a página pulava ~500px */
.landing-passos_list{
	display:flex;
	margin:60px 0 0;
	padding:0;
}

.landing-passos .empower-block_one{
	width:20%;
	vertical-align:top;
}

.landing-passos .empower-block_one-inner{
	border-width:2px;
	border-color:var(--brand-lilac);
}

/* sem o fundo preto no hover: o recorte (vector-6.png) é branco */
.landing-passos .empower-block_one .empower-block_one-inner:hover{
	background-color:var(--white-color);
}

.landing-passos .empower-block_one-inner:hover .empower-block_one-text{
	color:var(--ink);
}

.landing-passos .empower-block_one-icon{
	padding:0;
	line-height:50px;
	text-align:center;
	font-size:16px;
	font-weight:700;
	color:var(--white-color);
	font-family:"Outfit", sans-serif;
	background-image:var(--brand-grad-v);
}

.landing-passos .empower-block_one-image img{
	aspect-ratio:212 / 250;
	object-fit:cover;
	object-position:left top;
	background-color:var(--surface);
}

.empower-block_one-tag{
	margin-bottom:6px;
	font-size:14px;
	font-weight:700;
	color:var(--brand-ink);
}

.landing-passos .empower-block_one-title{
	margin-bottom:10px;
	font-size:21px;
	line-height:1.25;
}

.landing-passos .empower-block_one-text{
	margin:0;
	font-size:15px;
	line-height:1.6;
	color:var(--ink);
}

.landing-passos_final{
	margin:0;
	font-size:18px;
	font-weight:600;
	color:var(--ink);
}

@media only screen and (max-width: 1140px){
	/* 3+2 (ou 2+2+1) centralizados, sem buraco à direita na última linha */
	.landing-passos_list{
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		margin-top:10px;
	}

	.landing-passos .empower-block_one{
		width:33%;
	}
}

@media only screen and (max-width: 767px){
	.landing-passos .empower-block_one{
		width:49%;
	}
}

/* Celular: cartão horizontal (recorte da tela à esquerda) para não virar uma coluna de 3.000px */
@media only screen and (max-width: 599px){
	.landing-passos .empower-block_one{
		width:100%;
		padding:0;
		margin-bottom:16px;
	}

	.landing-passos .empower-block_one-inner{
		display:grid;
		grid-template-columns:104px 1fr;
		gap:14px;
		align-items:start;
	}

	.landing-passos .empower-block_one-image{
		border-radius:16px;
	}

	/* selo e recorte proporcionais à miniatura de 104px (o de 50px cobria 40% dela) */
	.landing-passos .empower-block_one-image:before{
		width:44px;
		height:43px;
		background-size:100% 100%;
	}

	.landing-passos .empower-block_one-icon{
		width:32px;
		height:32px;
		line-height:32px;
		font-size:13px;
	}

	.landing-passos .empower-block_one-content{
		padding:4px 4px 6px 0;
	}

	.landing-passos .empower-block_one-title{
		font-size:19px;
	}
}

/* --------------------------------------------------------------------------
   8. Benefícios (Team Tabs: texto com avatar da área + print grande em moldura de navegador)
   -------------------------------------------------------------------------- */
.landing-beneficios{
	position:relative;
	margin:0 20px;
	padding:110px 0 100px;
	border-radius:50px;
	background-color:var(--surface);
}

.landing-beneficios .sec-title{
	margin-bottom:10px;
}

.landing-beneficios .team-tabs .tab-btns{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px;
}

.landing-beneficios .team-tabs .tab-btns .tab-btn{
	margin:0;
	border:0;
	font-family:inherit;
	font-weight:600;
	color:var(--ink);
	background-color:var(--white-color);
}

.landing-beneficios .team-tabs .tab-btns .tab-btn:hover,
.landing-beneficios .team-tabs .tab-btns .tab-btn.active-btn{
	color:var(--white-color);
	background-color:var(--brand-a);
	background-image:var(--brand-grad);
}

.landing-beneficios .team-tabs .tabs-content{
	padding-top:50px;
}

.landing-aba_text{
	padding:8px 20px 0 0;
}

.landing-aba_text .landing-aba_who{
	display:flex;
	align-items:center;
	gap:16px;
	margin:0 0 22px;
	font-family:"Outfit", sans-serif;
	font-size:18px;
	font-weight:600;
	line-height:1.3;
	color:var(--brand-ink);
}

.landing-aba_avatar{
	flex-shrink:0;
	width:68px;
	height:68px;
	border-radius:50%;
	border:3px solid var(--white-color);
	background-color:#DDE2EE;
	box-shadow:0 6px 18px rgba(14,24,64,0.16);
}

.landing-aba_title{
	margin-bottom:20px;
	font-size:32px;
	line-height:1.25;
}

.landing-aba_text p{
	margin:0;
	font-size:17px;
	line-height:1.75;
	color:var(--ink);
}

/* Moldura de janela de navegador. Todas as abas têm a mesma proporção (3:2; 1:1 no celular):
   a página não muda de altura ao trocar de aba. */
.landing-browser{
	overflow:hidden;
	border:1px solid var(--line);
	border-radius:16px;
	background-color:var(--white-color);
	box-shadow:0 24px 60px rgba(14,24,64,0.14);
}

.landing-browser_bar{
	display:flex;
	align-items:center;
	gap:7px;
	height:34px;
	padding:0 16px;
	border-bottom:1px solid var(--line);
	background-color:#E9EDF5;
}

.landing-browser_bar span{
	width:11px;
	height:11px;
	border-radius:50%;
	background-color:#C3CAD9;
}

.landing-browser picture{
	display:block;
}

.landing-browser img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:3 / 2;
	object-fit:cover;
	object-position:left top;
	background-color:var(--surface);
}

/* Desktop estreito: coluna de texto com ~370px, título e texto menores para não passar muito da altura do print */
@media only screen and (min-width: 992px) and (max-width: 1199px){
	.landing-aba_title{
		font-size:26px;
	}

	.landing-aba_text p{
		font-size:16px;
		line-height:1.65;
	}
}

@media only screen and (max-width: 991px){
	.landing-aba_text{
		padding:0;
		margin-bottom:34px;
	}
}

@media only screen and (max-width: 767px){
	.landing-beneficios{
		margin:0 10px;
		padding:80px 0 70px;
		border-radius:30px;
	}

	.landing-beneficios .team-tabs .tab-btns{
		justify-content:flex-start;
	}

	.landing-beneficios .team-tabs .tab-btns .tab-btn{
		padding:10px 18px;
		font-size:15px;
	}

	.landing-beneficios .team-tabs .tabs-content{
		padding-top:36px;
	}

	.landing-aba_text .landing-aba_who{
		gap:14px;
		margin-bottom:18px;
		font-size:17px;
	}

	.landing-aba_avatar{
		width:56px;
		height:56px;
	}

	.landing-aba_title{
		font-size:24px;
	}

	.landing-aba_text p{
		font-size:16px;
	}

	.landing-browser{
		border-radius:12px;
		box-shadow:0 16px 40px rgba(14,24,64,0.14);
	}

	.landing-browser_bar{
		gap:6px;
		height:26px;
		padding:0 12px;
	}

	.landing-browser_bar span{
		width:8px;
		height:8px;
	}

	.landing-browser img{
		aspect-ratio:1 / 1;
	}
}

/* --------------------------------------------------------------------------
   9. Módulos (Offer One: imagem troca no hover e no clique)
   -------------------------------------------------------------------------- */
.landing-modulos.offer-one{
	overflow:visible; /* o hidden do template impede o sticky da imagem */
	overflow-x:clip;  /* corta a rotação das imagens inativas sem virar contêiner de rolagem */
	padding:120px 0 100px;
}

.landing-modulos.offer-one .auto-container{
	max-width:1320px;
}

.landing-modulos .offer-one_content-outer{
	max-width:none;
	padding:0 30px 0 0;
}

.landing-pills{
	display:grid;
	gap:12px;
	margin:0 0 44px;
	padding:0;
}

.landing-pills li{
	padding:14px 24px;
	border-radius:40px;
	font-size:16px;
	line-height:1.5;
	color:var(--ink);
	background-image:linear-gradient(90deg, rgba(87,204,254,0.16) 0%, rgba(202,151,250,0.2) 100%);
}

.landing-pills li strong{
	color:var(--brand-ink);
}

.landing-modulos .offer-one_title{
	cursor:pointer;
	padding-top:0;
	padding-left:92px;
	margin-bottom:28px;
	padding-bottom:28px;
	border-bottom-color:var(--line);
}

.landing-modulos .offer-one_icon-outer{
	top:0;
}

.landing-modulos .offer-one_icon{
	width:64px;
	height:64px;
	line-height:62px;
	font-size:18px;
	font-weight:700;
	color:var(--brand-ink);
	font-family:"Outfit", sans-serif;
	border-color:#B8BFD3;
	transition:all 300ms ease;
}

.landing-modulos .offer-one_title.active .offer-one_icon,
.landing-modulos .offer-one_title:hover .offer-one_icon{
	color:var(--white-color);
	border-color:transparent;
	background-image:var(--brand-grad-v);
}

.landing-modulos .offer-one_title.active .offer-one_icon:before,
.landing-modulos .offer-one_title:hover .offer-one_icon:before{
	border-color:rgba(255,255,255,0.35);
}

.landing-modulos .offer-one_heading{
	margin:2px 0 6px;
	font-size:26px;
	line-height:1.25;
	font-family:"Outfit", sans-serif;
}

.landing-modulos .offer-one_title.active .offer-one_heading{
	color:var(--brand-ink);
}

/* o título do módulo é um <button> dentro do h3: pelo teclado, Tab + Enter/Espaço trocam a imagem */
.landing-modulos .offer-one_heading button{
	margin:0;
	padding:0;
	border:0;
	background:none;
	font:inherit;
	color:inherit;
	text-align:left;
	cursor:pointer;
}

.offer-one_text{
	margin:0;
	font-size:16px;
	line-height:1.6;
	color:var(--ink-muted);
}

.landing-modulos .offer-one_tags{
	display:block; /* o responsive.css do template esconde as tags abaixo de 1032px */
	margin:14px 0 0;
	padding:0;
}

.landing-modulos .offer-one_tags li{
	margin:0 6px 8px 0;
}

.landing-modulos .offer-one_tags li span{
	display:inline-block;
	padding:6px 14px;
	border-radius:50px;
	font-size:13px;
	font-weight:600;
	line-height:1.4;
	color:var(--ink-muted);
	border:1px solid #B8BFD3;
	background-color:var(--white-color);
}

/* Print 4:5 com até 580 px na moldura das abas. A largura também acompanha a altura da janela,
   para a moldura inteira (barra de 36 px + print) caber abaixo do header fixo enquanto fica sticky. */
.landing-modulos .offer-one_images_outer{
	position:sticky;
	top:104px;
	display:grid;
	height:auto;
	max-width:clamp(360px, calc((100vh - 170px) * 0.8), 580px);
	margin-left:auto;
}

/* a moldura (.landing-browser) já tem borda, raio e sombra */
.landing-modulos .offer-one_image{
	position:relative;
	grid-area:1 / 1;
	left:auto;
	right:auto;
	top:auto;
	overflow:visible;
	border-radius:0;
	text-align:left;
}

.landing-modulos .landing-browser img{
	aspect-ratio:4 / 5;
}

/* O sticky termina no fim da coluna de texto: sem esse respiro, a moldura já subia para baixo do header
   enquanto o visitante lia o módulo 04 */
@media only screen and (min-width: 992px){
	.landing-modulos .offer-one_content-outer{
		padding-bottom:180px;
	}
}

@media only screen and (max-width: 991px){
	.landing-modulos .offer-one_content-outer{
		padding-right:0;
	}

	/* Sem hover e com a imagem abaixo da lista, trocar a imagem no toque não aparecia na tela:
	   as quatro telas ficam numa faixa com rolagem horizontal. */
	.landing-modulos .offer-one_images_outer{
		position:relative;
		top:0;
		display:flex;
		gap:16px;
		max-width:none;
		margin:10px -15px 0;
		padding:0 15px 28px;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		scroll-padding-inline:15px;
		-webkit-overflow-scrolling:touch;
	}

	.landing-modulos .offer-one_image,
	.landing-modulos .offer-one_image.active{
		flex:0 0 80vw; /* 80% da tela (o % seria da faixa, já sem o respiro lateral) */
		max-width:400px;
		opacity:1;
		transform:none;
		scroll-snap-align:start;
	}

	/* sombra curta: a faixa com rolagem corta o que passa da sua altura */
	.landing-modulos .landing-browser{
		box-shadow:0 10px 24px rgba(14,24,64,0.14);
	}
}

@media only screen and (max-width: 767px){
	.landing-modulos.offer-one{
		padding:90px 0 60px;
	}

	.landing-modulos .offer-one_title{
		padding-left:68px;
	}

	.landing-modulos .offer-one_icon{
		width:50px;
		height:50px;
		line-height:48px;
		font-size:16px;
	}

	.landing-modulos .offer-one_heading{
		font-size:22px;
	}

	.landing-pills li{
		border-radius:20px;
		padding:12px 18px;
		font-size:15px;
	}
}

/* --------------------------------------------------------------------------
   10. CTA do meio (CTA One)
   -------------------------------------------------------------------------- */
.landing-cta.cta-one{
	padding:30px 0 100px;
}

.cta-one .inner-container{
	gap:24px 40px; /* quando o botão desce para a linha de baixo, não encosta no título */
	border-color:var(--brand-lilac);
	background-image:linear-gradient(90deg, #FFFFFF 0%, #EAF4FF 100%);
}

.landing-cta .cta-one_title{
	font-size:16px;
	font-weight:700;
	color:var(--brand-ink);
}

.landing-cta .cta-one_heading{
	max-width:700px;
	margin-top:8px;
	font-size:34px;
	line-height:1.25;
}

@media only screen and (max-width: 767px){
	.landing-cta .cta-one_heading{
		font-size:26px;
	}
}

/* --------------------------------------------------------------------------
   11. Integração (About Three: sem selo, avatares e marquee)
   -------------------------------------------------------------------------- */
.landing-integracao.about-three{
	padding:110px 0 100px;
	background-color:#EEF1F8;
}

.landing-integracao .about-three_title-outer{
	padding-right:30px;
}

.landing-integracao .about-three_content{
	padding-left:0;
}

.landing-integracao .about-three_title{
	margin:0;
	font-size:22px;
	line-height:1.4;
	color:var(--brand-ink);
}

.landing-integracao .about-three_text{
	margin:16px 0 0;
	font-size:17px;
	line-height:1.75;
	color:var(--ink);
}

/* O card de impostos fica à esquerda, sobre a lista de pedidos (esmaecida no print):
   à direita ele cobria o evento "Venda integrada ao ERP" do histórico. */
.landing-integracao .about-three_image-outer{
	margin-left:0;
	padding:0 0 60px 40px;
}

.landing-integracao .about-three_image{
	border-radius:24px;
	background-color:var(--white-color);
	box-shadow:0 24px 60px rgba(14,24,64,0.14);
}

.landing-integracao .about-three_image-two{
	left:0;
	right:auto;
	bottom:0;
	width:44%;
	max-width:270px;
	border-radius:20px;
	border:6px solid var(--white-color);
	background-color:var(--white-color);
	box-shadow:0 24px 60px rgba(14,24,64,0.22);
}

.landing-integracao .about-three_image-two img{
	display:block;
	width:100%;
	border-radius:14px;
}

.landing-integracao_cards{
	margin-top:60px;
}

.landing-integracao_cards > [class*="col-"]{
	margin-bottom:24px;
}

.landing-card{
	height:100%;
	padding:28px 26px;
	border-radius:24px;
	background-color:var(--white-color);
	border:1px solid var(--line);
}

.landing-card_label{
	display:inline-block;
	margin-bottom:16px;
	padding:6px 14px;
	border-radius:50px;
	font-size:13px;
	font-weight:700;
	color:var(--brand-ink);
	background-color:#E6EEFD;
}

.landing-card_title{
	margin-bottom:10px;
	font-size:22px;
	line-height:1.3;
}

.landing-card_text{
	margin:0;
	font-size:15px;
	line-height:1.65;
	color:var(--ink-muted);
}

.landing-integracao_lower{
	gap:30px;
	margin-top:24px;
}

.landing-checklist,
.landing-licencas .business-one_list{
	margin:0;
	padding:0;
}

.landing-checklist{
	flex:1 1 560px;
	max-width:860px;
}

.landing-checklist li,
.landing-licencas .business-one_list li{
	position:relative;
	padding-left:38px;
	margin-bottom:14px;
	font-size:16px;
	line-height:1.6;
}

.landing-checklist li{
	color:var(--ink);
}

/* check em SVG (sem depender da fonte de ícones, que atrasava o desenho do check) */
.landing-checklist li:before,
.landing-licencas .business-one_list li:before{
	position:absolute;
	content:"";
	left:0;
	top:1px;
	width:24px;
	height:24px;
	border-radius:50%;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"), var(--brand-grad-v);
	background-size:14px 14px, cover;
	background-position:center;
	background-repeat:no-repeat;
}

.landing-integracao .about-three_button{
	margin-top:0;
}

@media only screen and (max-width: 991px){
	.landing-integracao .about-three_title-outer{
		padding-right:0;
	}

	.landing-integracao .about-three_image-outer{
		padding:0;
	}
}

@media only screen and (max-width: 767px){
	.landing-integracao.about-three{
		margin:0 10px;
		padding:80px 0 60px;
		border-radius:30px;
	}

	.landing-integracao .about-three_image,
	.landing-integracao .about-three_image img{
		border-radius:14px;
	}
}

/* --------------------------------------------------------------------------
   12. Licenças (Business One em gradiente, imagem circular)
   -------------------------------------------------------------------------- */
.landing-licencas.business-one{
	margin:90px 20px 0;
	border-radius:50px;
	padding:120px 0 110px;
	background-color:var(--brand-a);
	background-image:linear-gradient(135deg, var(--brand-a) 0%, var(--brand-b) 100%);
}

.landing-licencas .business-one_video-outer{
	max-width:470px;
	margin:0 auto;
}

.landing-licencas .business-one_video{
	border-width:10px;
	aspect-ratio:1 / 1;
	background-color:rgba(255,255,255,0.15);
}

.landing-licencas .business-one_video img{
	display:block;
	height:100%;
	object-fit:cover;
}

.landing-licencas .business-one_content-outer{
	padding-left:30px;
}

.landing-licencas .sec-title_text,
.landing-licencas .sec-title_subtitle{
	color:var(--white-color);
}

.landing-licencas .sec-title_subtitle{
	font-size:18px;
	font-weight:500;
	line-height:1.6;
	font-family:"Manrope", sans-serif;
}

.landing-licencas sup a,
.landing-footnote a{
	color:var(--white-color);
	text-decoration:underline;
}

.landing-licencas sup a{
	padding:0 4px;
	margin:0 -4px;
}

.landing-licencas .business-one_content{
	padding-left:0;
	margin:30px 0 0;
}

.business-one_list-title{
	margin:0 0 14px;
	font-size:18px;
	font-weight:700;
	color:var(--white-color);
	font-family:"Outfit", sans-serif;
}

.landing-licencas .business-one_list li{
	list-style:none;
	color:var(--white-color);
}

/* o template põe negrito no hover (e a linha pula) */
.landing-licencas .business-one_content .business-one_list li:hover{
	font-weight:400;
}

.landing-licencas .business-one_list li:before{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231552C0' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
	background-color:var(--white-color);
}

.landing-licencas .business-one_button{
	margin-top:34px;
}

.landing-footnote{
	margin:34px 0 0;
	font-size:13px;
	line-height:1.6;
	color:var(--white-color);
}

@media only screen and (max-width: 991px){
	.landing-licencas .business-one_content-outer{
		padding-left:0;
	}

	.landing-licencas .business-one_video-column{
		margin-top:20px;
	}
}

@media only screen and (max-width: 767px){
	.landing-licencas.business-one{
		margin:60px 10px 0;
		border-radius:30px;
		padding:80px 0 60px;
	}

	.landing-licencas .business-one_button .theme-btn{
		white-space:normal;
	}
}

/* --------------------------------------------------------------------------
   13. Clientes (Testimonial Two em grade + Clients Two)
   -------------------------------------------------------------------------- */
.landing-clientes.testimonial-two{
	padding:120px 0 40px;
}

.landing-depoimento{
	display:flex;
	flex-direction:column;
	height:calc(100% - 30px);
	margin:0 0 30px;
	padding:36px 32px 30px;
	border-radius:28px;
	background-color:var(--surface);
}

.landing-depoimento .testimonial-block_two-text{
	flex:1;
	margin:0 0 28px;
	font-size:17px;
	line-height:1.7;
	color:var(--ink);
}

.landing-depoimento .testimonial-block_two-author{
	display:grid;
	grid-template-columns:72px 1fr;
	column-gap:16px;
	align-items:center;
	min-height:0;
	margin:0;
	padding:0;
	text-align:left;
}

.landing-depoimento .testimonial-block_two-author span{
	margin-top:0;
}

.landing-depoimento .testimonial-block_two-author_image{
	position:relative;
	grid-row:1 / span 2;
	display:flex;
	align-items:center;
	justify-content:center;
	width:72px;
	height:72px;
	border-radius:50%;
	background-color:var(--white-color);
	border:1px solid var(--line);
}

.landing-depoimento .testimonial-block_two-author_image img{
	width:58px;
	height:auto;
}

.landing-depoimento .landing-initials{
	border:0;
	font-size:22px;
	font-weight:700;
	color:var(--white-color);
	font-family:"Outfit", sans-serif;
	background-image:var(--brand-grad-v);
}

.landing-depoimento .landing-depoimento_name{
	align-self:end;
	font-size:20px;
	font-weight:700;
	line-height:1.3;
	color:var(--brand-ink);
	font-family:"Outfit", sans-serif;
}

.landing-depoimento .landing-depoimento_company{
	align-self:start;
	font-size:15px;
	color:var(--ink-muted);
}

.landing-clientes_button{
	margin-top:10px;
}

.landing-logos.clients-two{
	padding:80px 0 0;
}

.landing-logos_title{
	margin-bottom:26px;
	font-size:18px;
	line-height:1.4;
	font-weight:600;
	text-align:center;
	color:var(--ink-muted);
	font-family:"Manrope", sans-serif;
}

.landing-logos.clients-two .inner-container{
	margin:0;
	padding:0;
	border-color:var(--line);
}

.landing-logos.clients-two .column{
	border-color:var(--line);
}

.landing-logos .client-image{
	display:flex;
	align-items:center;
	justify-content:center;
	height:110px;
	padding:20px;
}

.landing-logos .client-image img{
	max-width:145px;
	height:auto;
}

.landing-logos.clients-two .client-image:hover img{
	opacity:1;
}

@media only screen and (max-width: 991px){
	.landing-depoimento{
		height:auto;
	}
}

@media only screen and (max-width: 767px){
	.landing-clientes.testimonial-two{
		padding-top:90px;
	}

	.landing-depoimento{
		padding:28px 22px 24px;
	}

	.landing-depoimento .testimonial-block_two-text{
		font-size:16px;
	}
}

@media only screen and (max-width: 479px){
	.landing-logos.clients-two .column{
		width:50%;
	}

	.landing-logos .client-image{
		height:90px;
		padding:12px;
	}
}

/* --------------------------------------------------------------------------
   14. FAQ (accordion com <button> e aria-expanded)
   -------------------------------------------------------------------------- */
.landing-faq.faq-two{
	padding:110px 0 110px;
}

.landing-faq_list{
	max-width:960px;
	margin:0 auto;
	padding:0;
}

.accordion-box.style-two .block{
	background-color:#F2EEFC;
}

.acc-heading{
	margin:0;
	font-size:inherit;
	line-height:inherit;
}

.accordion-box .block button.acc-btn{
	display:block;
	width:100%;
	border:0;
	background:none;
	text-align:left;
	font-size:20px;
	line-height:1.4;
	padding:22px 84px 22px 30px;
	border-radius:50px;
}

.accordion-box .block .acc-btn.active{
	color:var(--brand-ink);
}

.accordion-box .block button.acc-btn .icon-outer{
	top:50%;
	right:14px;
	transform:translateY(-50%);
}

.accordion-box .block .icon-outer .icon{
	background-image:var(--brand-grad-v);
}

.landing-faq .accordion-box .block .content .text{
	margin:0;
	font-size:17px;
	line-height:1.7;
	color:var(--ink);
}

@media only screen and (max-width: 767px){
	.accordion-box .block button.acc-btn{
		font-size:17px;
		padding:18px 70px 18px 22px;
	}

	.accordion-box .block .content{
		padding:0 22px 24px;
	}

	.accordion-box .block .icon-outer .icon{
		width:42px;
		height:42px;
		line-height:40px;
	}
}

/* --------------------------------------------------------------------------
   15. Demonstração (Contact One) e formulários
   -------------------------------------------------------------------------- */
.landing-demo.contact-one{
	padding:110px 0 70px;
	margin-bottom:0;
}

.landing-demo.contact-one:before{
	background-color:var(--brand-dark);
}

.landing-demo .contact-one_form-outer{
	padding:40px 40px 50px;
	border-radius:30px;
}

.landing-demo .contact-one_form-outer:before{
	display:none;
}

.landing-demo .contact-one_form-title{
	font-size:30px;
	line-height:1.25;
}

.landing-demo .contact-one_form-text{
	margin:14px 0 0;
	color:rgba(255,255,255,0.88);
}

.landing-demo .default-form .form-group{
	margin-bottom:20px;
}

.landing-demo .default-form .form-group label{
	margin-bottom:8px;
	padding-left:0;
	font-size:15px;
}

.landing-demo .default-form .form-group input[type="text"],
.landing-demo .default-form .form-group input[type="tel"],
.landing-demo .default-form .form-group input[type="email"]{
	height:54px;
	padding:12px 16px;
	border-radius:12px;
	border:1px solid rgba(255,255,255,0.45); /* contorno com 3:1+ sobre o fundo escuro */
	background-color:rgba(255,255,255,0.06);
}

.landing-demo .default-form .form-group input:focus{
	border-color:var(--white-color);
	background-color:rgba(255,255,255,0.1);
}

.landing-demo .default-form input::placeholder{
	color:rgba(255,255,255,0.6);
}

.landing-demo .default-form .form-group .theme-btn{
	width:100%;
	margin-top:4px;
}

.landing-demo .default-form .form-group .theme-btn .btn-wrap{
	float:none;
}

/* Honeypot fora da tela (sem display:none, que alguns robôs detectam) */
.landing-hp{
	position:absolute !important;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

.landing-form_status{
	font-size:15px;
	line-height:1.5;
}

.landing-form_status.is-success,
.landing-form_status.is-error{
	margin:0 0 18px;
	padding:14px 18px;
	border-radius:12px;
}

.landing-form_status.is-success{
	color:#0E4D2A;
	background-color:#DDF6E8;
	border:1px solid #7BD3A3;
}

.landing-form_status.is-error{
	color:#7A1620;
	background-color:#FDE4E6;
	border:1px solid #F2A1A8;
}

.landing-form_lgpd{
	margin:18px 0 0;
	font-size:13px;
	line-height:1.6;
	color:rgba(255,255,255,0.8);
}

.landing-form_lgpd a{
	color:var(--white-color);
	text-decoration:underline;
}

.landing-demo .contact-one_info-outer{
	padding-left:40px;
}

.landing-demo_list.contact-one_info{
	margin-top:34px;
	padding:0;
}

.landing-demo_list.contact-one_info li{
	margin-bottom:30px;
	padding-left:70px;
	line-height:1.6;
}

.landing-demo_list.contact-one_info li span{
	width:48px;
	height:48px;
	line-height:48px;
	font-size:18px;
	color:var(--white-color);
	background-image:var(--brand-grad-v);
}

.landing-demo_list.contact-one_info li span .landing-icon{
	width:24px;
	height:24px;
	vertical-align:middle;
}

.landing-demo_list.contact-one_info li strong{
	margin-bottom:6px;
	font-size:22px;
	line-height:1.3;
	text-wrap:balance;
}

/* Como funciona: 3 passos numerados, lado a lado (empilhados no celular) */
.landing-demo_steps{
	margin-top:14px;
	padding:26px 28px 28px;
	border-radius:20px;
	border:1px solid rgba(255,255,255,0.16);
	background-color:rgba(255,255,255,0.05);
}

.landing-demo_steps-title{
	margin:0 0 18px;
	font-size:15px;
	font-weight:600;
	line-height:1.4;
	letter-spacing:0.08em;
	text-transform:uppercase;
	color:var(--brand-lilac);
}

.landing-demo_steps ol{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:24px;
	margin:0;
	padding:0;
	list-style:none;
	counter-reset:passo;
}

.landing-demo_steps li{
	position:relative;
	padding-top:48px;
	font-size:16px;
	line-height:1.5;
	color:var(--white-color);
	text-wrap:pretty;
	counter-increment:passo;
}

.landing-demo_steps li:before{
	content:counter(passo);
	position:absolute;
	left:0;
	top:0;
	width:34px;
	height:34px;
	line-height:34px;
	text-align:center;
	border-radius:50%;
	font-family:"Outfit", sans-serif;
	font-size:16px;
	font-weight:600;
	color:var(--white-color);
	background-image:var(--brand-grad-v);
}

/* linha ligando um passo ao próximo */
.landing-demo_steps li:not(:last-child):after{
	content:"";
	position:absolute;
	left:46px;
	right:-12px;
	top:17px;
	height:1px;
	background-color:rgba(255,255,255,0.22);
}

/* Desktop: os passos descem até o fim do formulário, e as duas colunas terminam juntas */
@media only screen and (min-width: 992px){
	.landing-demo .contact-one_info-outer{
		display:flex;
		flex-direction:column;
		height:100%;
	}

	.landing-demo_steps{
		margin-top:auto;
	}
}

@media only screen and (max-width: 991px){
	/* O responsive.css do template põe o texto antes do formulário (order 1/2). Os CTAs trazem para
	   #demonstracao: no celular e no tablet o formulário vem primeiro e o texto fica como reforço. */
	.landing-demo .contact-one_form-column{
		order:0;
	}

	.landing-demo .contact-one_info-column{
		order:0;
		margin-top:50px;
		margin-bottom:0;
	}

	.landing-demo .contact-one_info-outer{
		padding-left:0;
	}
}

@media only screen and (max-width: 767px){
	.landing-demo.contact-one{
		padding:80px 0 30px;
	}

	.landing-demo.contact-one:before{
		margin:0 10px;
		border-radius:30px;
	}


	.landing-demo .contact-one_form-outer{
		padding:28px 20px 34px;
	}

	.landing-demo .contact-one_form-title{
		font-size:26px;
	}

	.landing-demo_list.contact-one_info li{
		padding-left:62px;
	}

	.landing-demo_list.contact-one_info li strong{
		font-size:20px;
	}

	.landing-demo_steps{
		padding:22px 20px 24px;
	}

	.landing-demo_steps ol{
		grid-template-columns:minmax(0, 1fr);
		gap:16px;
	}

	.landing-demo_steps li{
		min-height:34px;
		padding:5px 0 0 48px;
	}

	.landing-demo_steps li:not(:last-child):after{
		display:none;
	}
}

/* Formulário da página /contact (card branco) */
.contact-form .form-group input[type="text"],
.contact-form .form-group input[type="tel"],
.contact-form .form-group input[type="email"]{
	border:1px solid #858CA1; /* o #F5F5F5 sozinho não delimita o campo (1,1:1) */
	background-color:var(--white-color);
}

.contact-form .form-group label{
	display:block;
	margin:0 0 8px 20px;
	font-size:15px;
	font-weight:600;
	color:var(--ink);
}

.contact-form .form-group input::placeholder{
	color:#6B7285;
}

.contact-form .landing-form_lgpd{
	max-width:760px;
	margin:18px auto 0;
	color:var(--ink-muted);
}

.contact-form .landing-form_lgpd a{
	color:var(--brand-ink);
}

/* Páginas de erro: o header é absoluto, então o conteúdo começa abaixo dele */
.landing-error{
	padding:220px 0 120px;
}

.landing-error h1{
	margin-bottom:16px;
	font-size:clamp(34px, 2vw + 24px, 56px);
	line-height:1.15;
}

.landing-error p{
	max-width:640px;
	margin:0 0 30px;
	font-size:18px;
	line-height:1.6;
	color:var(--ink);
}

@media only screen and (max-width: 767px){
	.landing-error{
		padding:170px 0 90px;
	}
}

/* Banner das páginas internas (_PageTitle): o background/3.jpg do template é um placeholder
   cinza escrito "1878 X 616". Enquanto não houver foto, fica o gradiente escuro da marca. */
.page-title_bg-image{
	background-image:linear-gradient(135deg, #0B1233 0%, #1A2A6E 55%, #4A2A8F 100%) !important;
}

/* Voltar ao topo: fundo branco (o anel azul sumia sobre a Demonstração e o rodapé) e seta em SVG.
   No celular sai: cobria o ícone do FAQ e o aviso do formulário, e o menu fixo já leva às seções. */
.progress-wrap{
	background-color:var(--white-color);
	box-shadow:0 6px 18px rgba(14,24,64,0.25), inset 0 0 0 2px rgba(0,0,0,0.1);
}

.progress-wrap::after{
	content:"";
	background-color:var(--brand-ink);
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2 14 8l-1.4 1.4L9 5.8V14H7V5.8L3.4 9.4 2 8z'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2 14 8l-1.4 1.4L9 5.8V14H7V5.8L3.4 9.4 2 8z'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

@media only screen and (max-width: 767px){
	.progress-wrap{
		display:none;
	}
}

/* Sem JavaScript: todas as abas e respostas do FAQ ficam abertas (o <html> perde a classe no-js no <head>) */
.no-js .team-tabs .tabs-content .tab,
.no-js .accordion-box .acc-content{
	display:block;
}

.no-js .team-tabs .tabs-content .tab + .tab{
	margin-top:60px;
}

/* --------------------------------------------------------------------------
   16. Rodapé
   -------------------------------------------------------------------------- */
.footer-style_three-bg{
	background-color:var(--brand-dark);
	background-image:linear-gradient(160deg, #0B1233 0%, #161A4A 55%, #2A1A63 100%);
}

/* Na home o rodapé não fica sob um CTA One: sem a sobreposição de -88,5px e sem o respiro de 170px */
.footer-style_three.footer-home{
	margin-top:30px;
}

.footer-style_three.footer-home .widgets-section{
	padding-top:90px;
}

.footer-three_logo{
	margin-bottom:28px;
}

.footer-three_logo img{
	display:block;
	width:165px;
	height:auto;
}

.footer-three_text{
	max-width:480px;
	margin-bottom:24px;
}

.footer-three_location-text a,
.footer-three_list li a{
	color:var(--white-color);
}

.footer-three_location-text a{
	text-decoration:underline;
}

.footer-three_list li a:hover{
	color:var(--brand-sky);
}

.footer-three_widget.links-widget{
	padding-left:0;
}

.footer-three_list--grid{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	column-gap:24px;
	margin-top:0;
	padding:0;
}

.footer-three_socials a{
	width:44px;
	height:44px;
	margin-right:8px;
	line-height:44px;
	border:1px solid rgba(255,255,255,0.35);
}

.footer-three_socials a:hover{
	border-color:transparent;
	background-image:var(--brand-grad-v);
}

.footer-three_copyright{
	font-size:14px;
	line-height:1.6;
}

@media only screen and (max-width: 767px){
	.footer-style_three{
		margin-left:10px;
		margin-right:10px;
	}

	.footer-style_three.footer-home .widgets-section{
		padding-top:70px;
	}

	.footer-three_bottom{
		border-radius:20px;
	}
}

/* Menu mobile: o template só mostrava os links ~600 ms depois do toque, e um segundo toque
   caía no backdrop e fechava o menu. Abre e fecha em 0,35 s, sem atraso. */
.mobile-menu .menu-box,
.mobile-menu .menu-backdrop,
.mobile-menu-visible .mobile-menu .menu-box,
.mobile-menu-visible .mobile-menu .menu-backdrop{
	transition-duration:.35s;
	transition-delay:0s;
}

/* Páginas de erro não têm o banner escuro: o header translúcido ficaria cinza sobre o branco
   (contraste 4:1 nos links brancos). */
body:has(.landing-error) .main-header.header-style-three .header-lower .inner-container:before{
	background:rgba(3,6,30,0.92);
}

/* --------------------------------------------------------------------------
   17. Animações de entrada (hero ao carregar, demais seções ao rolar)
   Só opacity, translate e scale (não mexem no layout: sem CLS). translate/scale são propriedades
   próprias e se somam ao transform do template (ex.: a onda do passo a passo).
   Tudo fica dentro de screen e prefers-reduced-motion: no-preference: com movimento reduzido nada anima e na impressão nada fica escondido.
   -------------------------------------------------------------------------- */
:root{
	--reveal-y:32px;
	--reveal-x:40px;
	--reveal-scale:.96;
	--reveal-ease:cubic-bezier(.2,.7,.2,1);
}

@media only screen and (max-width: 767px){
	:root{
		--reveal-y:20px;
		--reveal-x:24px;
	}
}

@keyframes landing-rise{
	from{ opacity:0; transform:translate3d(0,var(--reveal-y),0); }
	to{ opacity:1; transform:none; }
}

/* o h1 só sobe, sem fade: com opacity 0 no início, o navegador adiaria o LCP */
@keyframes landing-rise-move{
	from{ transform:translate3d(0,var(--reveal-y),0); }
	to{ transform:none; }
}

@keyframes landing-hero-zoom{
	from{ transform:scale(1.06); }
	to{ transform:none; }
}

@keyframes landing-hero-parallax{
	to{ transform:translate3d(0,220px,0); }
}

@keyframes landing-tab-text{
	from{ opacity:0; translate:-16px 0; }
	to{ opacity:1; translate:none; }
}

@keyframes landing-tab-frame{
	from{ opacity:0; translate:28px 0; }
	to{ opacity:1; translate:none; }
}

@media screen and (prefers-reduced-motion: no-preference){
	/* Hero: entra ao carregar, em sequência, só com CSS (não depende do script.js).
	   A foto não some: só sai de um zoom leve, para não atrasar o LCP. Sem JS (.no-js), nada anima. */
	html:not(.no-js) .landing-hero .slider-three_title,
	html:not(.no-js) .landing-hero .slider-three_heading,
	html:not(.no-js) .landing-hero .slider-three_text,
	html:not(.no-js) .landing-hero .slider-three_button,
	html:not(.no-js) .landing-hero .slider-three_options{
		animation:landing-rise .7s var(--reveal-ease) both;
	}

	html:not(.no-js) .landing-hero .slider-three_heading{ animation-name:landing-rise-move; }
	html:not(.no-js) .landing-hero .slider-three_text{ animation-delay:.16s; }
	html:not(.no-js) .landing-hero .slider-three_button{ animation-delay:.24s; }
	html:not(.no-js) .landing-hero .slider-three_options{ animation-delay:.5s; }

	html:not(.no-js) .landing-hero .slider-three_image-layer img{
		animation:landing-hero-zoom 1.2s var(--reveal-ease) both;
	}

	/* Rolagem: o script.js marca os elementos com data-reveal e só então põe reveal-ready no <html>.
	   Sem JS, ou se o script falhar antes disso, nada fica escondido. */
	.reveal-ready .page-wrapper{
		overflow-x:clip; /* o que entra de lado não cria rolagem horizontal (clip preserva o sticky dos módulos) */
	}

	.reveal-ready [data-reveal]{
		transition:opacity .7s var(--reveal-ease), translate .7s var(--reveal-ease), scale .7s var(--reveal-ease);
		transition-delay:var(--reveal-delay, 0s);
	}

	.reveal-ready [data-reveal]:not(.is-revealed){
		opacity:0;
		translate:0 var(--reveal-y);
	}

	.reveal-ready [data-reveal="left"]:not(.is-revealed){
		translate:calc(var(--reveal-x) * -1) 0;
	}

	.reveal-ready [data-reveal="right"]:not(.is-revealed){
		translate:var(--reveal-x) 0;
	}

	.reveal-ready [data-reveal="fade"]:not(.is-revealed){
		translate:none;
	}

	.reveal-ready [data-reveal="zoom"]:not(.is-revealed){
		scale:var(--reveal-scale);
	}

	.reveal-ready [data-reveal="scale"]:not(.is-revealed){
		translate:none;
		scale:var(--reveal-scale);
	}

	/* a tela do pedido e o círculo da foto: movimento um pouco mais longo */
	.reveal-ready .landing-solucao .video-image[data-reveal],
	.reveal-ready .landing-licencas .business-one_video[data-reveal]{
		transition-duration:.9s;
	}

	.landing-licencas .business-one_video{
		--reveal-scale:.88;
	}

	/* Benefícios: ao trocar de aba, o texto e a moldura entram com um deslize curto */
	.landing-beneficios .tab.is-switching .landing-aba_text{
		animation:landing-tab-text .45s var(--reveal-ease) both;
	}

	.landing-beneficios .tab.is-switching .landing-browser{
		animation:landing-tab-frame .55s var(--reveal-ease) .04s both;
	}
}

/* Parallax leve na foto do hero, na linha do tempo da rolagem (roda fora da thread principal).
   Só em telas largas; onde o navegador não suporta, a foto fica parada. */
@supports (animation-timeline: scroll()){
	@media (prefers-reduced-motion: no-preference) and (min-width: 992px){
		html:not(.no-js) .landing-hero .slider-three_image-layer picture{
			animation:landing-hero-parallax linear both;
			animation-timeline:scroll(root);
			animation-range:0 1100px;
		}
	}
}