/* ==========================================================================
   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.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fontes servidas pelo próprio site (sem Google Fonts)
   Outfit (títulos) e Manrope (texto) são variáveis: um arquivo por subset cobre todos os pesos.
   O subset latin cobre o português e tem preload no _Layout; o latin-ext só baixa se a página usar
   um caractere dele. Licença SIL OFL 1.1 em assets/fonts/OFL-*.txt.
   -------------------------------------------------------------------------- */
@font-face{
	font-family:"Outfit";
	font-style:normal;
	font-weight:500 800;
	font-display:swap;
	src:url("../fonts/outfit-latin-ext.woff2") format("woff2");
	unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
	font-family:"Outfit";
	font-style:normal;
	font-weight:500 800;
	font-display:swap;
	src:url("../fonts/outfit-latin.woff2") format("woff2");
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
	font-family:"Manrope";
	font-style:normal;
	font-weight:400 800;
	font-display:swap;
	src:url("../fonts/manrope-latin-ext.woff2") format("woff2");
	unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
	font-family:"Manrope";
	font-style:normal;
	font-weight:400 800;
	font-display:swap;
	src:url("../fonts/manrope-latin.woff2") format("woff2");
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   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 ¹) e o foco do teclado (inclusive com Shift+Tab) não ficam sob o header fixo */
html{
	scroll-padding-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; }
}

/* 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,
.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,
.offer-one_heading,
.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,
.landing-page-hero a:focus-visible,
.landing-band--dark a:focus-visible,
.landing-band--dark button:focus-visible,
.landing-band--grad a:focus-visible,
.landing-band--grad button: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{
	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;
}

/* Links do logo (header e rodapé): o <a> inline só com um img display:block fica sem caixa, e o anel de foco não aparece */
.main-header .header-lower .logo-box .logo a,
.footer-three_logo a{
	display:block;
	width:fit-content;
}

.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.
   Vale também no hero das páginas internas e nas bandas escuras. */
.landing-hero .btn-style-two,
.landing-page-hero .btn-style-two,
.landing-band--dark .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,
.landing-page-hero .btn-style-two .btn-wrap .text-one,
.landing-band--dark .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,
[data-faq-page] .accordion-box .block .content .text{
	margin:0;
	font-size:17px;
	line-height:1.7;
	color:var(--ink);
}

.accordion-box .block .content .text a{
	color:var(--brand-ink);
	text-decoration:underline;
	text-underline-offset:3px;
}

/* Home: link discreto para o /faq, abaixo do acordeão */
.landing-faq_all{
	margin:36px 0 0;
	font-size:17px;
	text-align:center;
}

@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;
	}
}

/* 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_text a,
.footer-three_location-text a,
.footer-three_list li a{
	color:var(--white-color);
}

.footer-three_text a,
.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;
}

/* Dois grupos de links lado a lado (VendaAI e Empresa), com título */
.footer-three_nav{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	column-gap:24px;
}

.footer-three_nav .footer-three_title{
	margin:0 0 18px;
	font-size:18px;
	line-height:1.3;
	font-weight:600;
	color:var(--white-color);
	font-family:"Outfit", sans-serif;
}

.footer-three_nav .footer-three_list{
	margin-top:0;
	padding:0;
}

.footer-three_list li a[aria-current="page"]{
	color:var(--brand-sky);
	font-weight:700;
}

.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;
}

.footer-three_legal{
	margin-top:4px;
	font-size:13px;
	line-height:1.6;
	color:rgba(255,255,255,0.8);
}

@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;
		}
	}
}

/* --------------------------------------------------------------------------
   18. Páginas internas (Sobre, FAQ, Contato, Privacidade, Termos e Blog)
   Componentes genéricos sobre os tokens de :root. Markup e exemplos: README da infraestrutura.
   -------------------------------------------------------------------------- */

/* Hero interno (_PageTitle): banda escura encostada no topo, com raio só embaixo, como o hero da home.
   O header é absoluto e translúcido: o padding de cima põe o conteúdo abaixo dele. */
.landing-page-hero{
	position:relative;
	padding:220px 0 90px;
	border-radius:0 0 40px 40px;
	color:var(--white-color);
	background-color:var(--brand-dark);
	background-image:linear-gradient(160deg, #0B1233 0%, #161A4A 55%, #2A1A63 100%);
}

.landing-page-hero_content{
	max-width:860px;
}

.landing-page-hero .sec-title{
	margin-bottom:18px;
}

.landing-page-hero_heading{
	margin:0;
	font-size:clamp(36px, 2.2vw + 24px, 60px);
	line-height:1.1;
	letter-spacing:-0.01em;
	color:var(--white-color);
	text-wrap:balance;
}

.landing-page-hero_lead{
	max-width:720px;
	margin:22px 0 0;
	font-size:20px;
	line-height:1.6;
	color:rgba(255,255,255,0.88);
	text-wrap:pretty;
}

/* Trilha: separador em CSS (sem Font Awesome), fora da leitura do leitor de tela */
.landing-breadcrumb{
	margin-top:36px;
}

.landing-breadcrumb ol{
	display:flex;
	flex-wrap:wrap;
	margin:0;
	padding:0;
	font-size:15px;
	line-height:1.6;
}

.landing-breadcrumb li{
	color:rgba(255,255,255,0.8);
}

.landing-breadcrumb li + li:before{
	content:"/";
	content:"/" / "";
	margin:0 10px;
	color:rgba(255,255,255,0.5);
}

.landing-breadcrumb a{
	color:var(--white-color);
	text-decoration:underline;
	text-decoration-color:rgba(255,255,255,0.5);
	text-underline-offset:3px;
}

.landing-breadcrumb a:hover{
	color:var(--brand-sky);
}

@media only screen and (max-width: 991px){
	.landing-page-hero{
		padding-top:200px;
	}
}

@media only screen and (max-width: 767px){
	.landing-page-hero{
		padding:160px 0 60px;
		border-radius:0 0 30px 30px;
	}

	.landing-page-hero_lead{
		margin-top:18px;
		font-size:17px;
	}

	.landing-breadcrumb{
		margin-top:28px;
	}

	.landing-breadcrumb ol{
		font-size:14px;
	}
}

/* Link de texto (fora de parágrafo corrido), com ícone opcional depois do texto */
a.landing-link{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-weight:700;
	color:var(--brand-ink);
	text-decoration:underline;
	text-underline-offset:4px;
}

a.landing-link:hover{
	color:var(--brand-b);
}

.landing-link .landing-icon{
	flex-shrink:0;
	width:16px;
	height:16px;
}

/* ícone num contêiner aria-hidden (<span aria-hidden="true">@{ Icon(…); }</span>): fica na mesma altura do svg solto */
.landing-link > span[aria-hidden="true"]{
	display:inline-flex;
}

/* Bandas: seção com respiro vertical. Sem modificador, fundo branco.
   --surface, --dark e --grad ganham fundo, margem lateral de 20px e raio, como as bandas da home. */
.landing-band{
	position:relative;
	padding:110px 0 100px;
}

.landing-band--surface,
.landing-band--dark,
.landing-band--grad{
	margin:0 20px;
	border-radius:50px;
}

.landing-band--surface{
	background-color:var(--surface);
}

.landing-band--dark{
	color:var(--white-color);
	background-color:var(--brand-dark);
	background-image:linear-gradient(160deg, #0B1233 0%, #161A4A 55%, #2A1A63 100%);
}

.landing-band--grad{
	color:var(--white-color);
	background-color:var(--brand-a);
	background-image:linear-gradient(135deg, var(--brand-a) 0%, var(--brand-b) 100%);
}

/* parágrafo solto em banda escura: branco (o template pinta todo <p> de #666); classes próprias continuam valendo */
:where(.landing-band--dark, .landing-band--grad) p{
	color:rgba(255,255,255,0.88);
}

@media only screen and (min-width: 768px) and (max-width: 1365px){
	.landing-band--surface .auto-container,
	.landing-band--dark .auto-container,
	.landing-band--grad .auto-container{
		padding-left:30px;
		padding-right:30px;
	}
}

@media only screen and (max-width: 767px){
	.landing-band{
		padding:80px 0 70px;
	}

	.landing-band--surface,
	.landing-band--dark,
	.landing-band--grad{
		margin:0 10px;
		border-radius:30px;
	}

	.landing-band--surface .auto-container,
	.landing-band--dark .auto-container,
	.landing-band--grad .auto-container{
		padding-left:30px;
		padding-right:30px;
	}

	.landing-band .landing-card{
		padding:24px 20px;
	}

	a.landing-channel_link{
		font-size:16px;
	}
}

/* Duas colunas (texto e mídia, ou texto e texto) a partir de 992px; uma coluna abaixo, na ordem do HTML */
.landing-split{
	display:grid;
	grid-template-columns:minmax(0, 1fr);
	gap:40px;
	align-items:center;
}

.landing-split--top{
	align-items:start;
}

.landing-split_media img{
	display:block;
	width:100%;
	height:auto;
	border-radius:24px;
	background-color:var(--surface);
	box-shadow:0 24px 60px rgba(14,24,64,0.14);
}

@media only screen and (min-width: 992px){
	.landing-split{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:60px;
	}

	.landing-split--reverse > .landing-split_media{
		order:-1;
	}
}

@media only screen and (max-width: 767px){
	.landing-split_media img{
		border-radius:14px;
	}
}

/* Cards: grade com a mesma altura (row.landing-cards > col > .landing-card), slot de ícone e link no rodapé do card */
.landing-cards > [class*="col-"]{
	margin-bottom:24px;
}

.landing-card_icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:52px;
	height:52px;
	margin-bottom:18px;
	border-radius:50%;
	color:var(--white-color);
	background-image:var(--brand-grad-v);
}

.landing-card_icon .landing-icon{
	width:24px;
	height:24px;
}

/* Com link ou ícone, o card vira coluna flex: o link desce para o fim e os cards da linha terminam alinhados */
.landing-card:has(> .landing-card_link),
.landing-card:has(> .landing-card_icon){
	display:flex;
	flex-direction:column;
}

.landing-card > .landing-card_label,
.landing-card > .landing-card_icon{
	align-self:flex-start;
}

.landing-card > :has(+ .landing-card_link){
	margin-bottom:20px;
}

a.landing-card_link{
	display:inline-flex;
	align-items:center;
	align-self:flex-start;
	gap:8px;
	margin-top:auto;
	font-weight:700;
	line-height:1.4;
	color:var(--brand-ink);
}

a.landing-card_link:hover{
	text-decoration:underline;
	text-underline-offset:4px;
}

.landing-card_link .landing-icon{
	flex-shrink:0;
	width:18px;
	height:18px;
	transition:translate .2s ease;
}

.landing-card_link:hover .landing-icon{
	translate:3px 0;
}

/* Canais de contato: ícone, rótulo pequeno e link (e-mail, telefone, WhatsApp) */
.landing-channel{
	display:grid;
	gap:16px;
	margin:22px 0 0;
	padding:0;
}

.landing-channel:not(:last-child){
	margin-bottom:20px;
}

.landing-channel li{
	display:grid;
	grid-template-columns:44px minmax(0, 1fr);
	column-gap:14px;
	align-items:center;
}

.landing-channel_icon{
	grid-row:1 / span 2;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	border-radius:50%;
	color:var(--brand-ink);
	background-color:#E6EEFD;
}

.landing-channel_icon .landing-icon{
	width:22px;
	height:22px;
}

.landing-channel_label{
	font-size:13px;
	font-weight:700;
	line-height:1.3;
	color:var(--ink-muted);
}

a.landing-channel_link{
	justify-self:start; /* na grade do .landing-channel li: foco e clique só sobre o texto, não a coluna inteira */
	font-size:17px;
	font-weight:700;
	line-height:1.4;
	color:var(--ink);
	overflow-wrap:anywhere;
	text-decoration:underline;
	text-decoration-color:#B8BFD3;
	text-underline-offset:3px;
}

a.landing-channel_link:hover{
	color:var(--brand-ink);
	text-decoration-color:currentColor;
}

/* Dados em lista (dl): rótulo pequeno e valor, fora do texto longo (ex.: razão social e CNPJ num card) */
.landing-dl{
	margin:0;
}

.landing-dl dt{
	margin:0 0 2px;
	font-size:14px;
	font-weight:700;
	line-height:1.4;
	color:var(--ink-muted);
}

.landing-dl dd{
	margin:0 0 16px;
	font-size:17px;
	line-height:1.6;
	color:var(--ink);
	overflow-wrap:anywhere;
}

.landing-dl dd:last-child{
	margin-bottom:0;
}

/* Etapas numeradas em fundo claro (ol > li > span.landing-steps_num + h3 + p), com uma linha ligando os números.
   4 colunas a partir de 1200px, 2x2 de 768 a 1199px e uma coluna vertical abaixo. */
.landing-steps{
	display:grid;
	grid-template-columns:minmax(0, 1fr);
	gap:32px;
	margin:50px 0 0;
	padding:0;
}

.landing-steps > li{
	position:relative;
	padding-left:72px;
}

.landing-steps_num{
	position:absolute;
	left:0;
	top:0;
	z-index:1;
	width:52px;
	height:52px;
	line-height:52px;
	border-radius:50%;
	text-align:center;
	font-family:"Outfit", sans-serif;
	font-size:17px;
	font-weight:700;
	color:var(--white-color);
	background-image:var(--brand-grad-v);
}

.landing-steps > li:not(:last-child):after{
	content:"";
	position:absolute;
	left:26px;
	top:60px;
	bottom:-24px;
	width:2px;
	background-color:var(--line);
}

.landing-steps h3{
	margin:0 0 10px;
	font-size:22px;
	line-height:1.3;
}

.landing-steps p{
	margin:0;
	font-size:16px;
	line-height:1.7;
	color:var(--ink-muted);
}

@media only screen and (min-width: 768px){
	.landing-steps{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:48px 40px;
	}

	.landing-steps > li{
		padding:76px 0 0;
	}

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

	/* linha entre os dois números da mesma linha */
	.landing-steps > li:nth-child(odd):not(:last-child):after{
		display:block;
		left:64px;
		right:-28px;
		top:25px;
		bottom:auto;
		width:auto;
		height:2px;
	}
}

@media only screen and (min-width: 1200px){
	.landing-steps{
		grid-template-columns:repeat(4, minmax(0, 1fr));
		gap:40px 30px;
	}

	.landing-steps > li:not(:last-child):after{
		display:block;
		left:64px;
		right:-18px;
		top:25px;
		bottom:auto;
		width:auto;
		height:2px;
	}
}

/* Texto longo (Privacidade e Termos). Filhos diretos de .landing-prose, nesta ordem:
   p.landing-prose_date (opcional), nav.landing-toc (sumário) e div.landing-prose_body (o texto).
   Celular: data, sumário em <details> fechado e texto. A partir de 992px: sumário fixo à esquerda. */
.landing-prose{
	display:grid;
	grid-template-columns:minmax(0, 1fr);
	grid-template-areas:"date" "toc" "body";
}

.landing-prose_date{
	grid-area:date;
	margin:0 0 20px;
	font-size:15px;
	line-height:1.5;
	color:var(--ink-muted);
}

.landing-prose_body{
	grid-area:body;
	min-width:0;
	font-size:17px;
	line-height:1.75;
	color:var(--ink);
	overflow-wrap:break-word;
}

/* :where() zera a especificidade: vence o template (p #666, listas sem marcador), mas qualquer classe
   própria (ex.: .landing-card_label) continua valendo */
/* texto com 68 a 75 caracteres por linha (17px, Manrope); as tabelas podem usar a coluna inteira */
:where(.landing-prose_body) :is(h2, h3, p, ul, ol, dl, address, aside){
	max-width:35em;
}

:where(.landing-prose_body) h2{
	margin:56px 0 18px;
	font-size:clamp(26px, 0.8vw + 20px, 32px);
	line-height:1.25;
	color:var(--ink);
}

:where(.landing-prose_body) h3{
	margin:32px 0 12px;
	font-size:21px;
	line-height:1.35;
	color:var(--ink);
}

:where(.landing-prose_body) p,
:where(.landing-prose_body) li,
:where(.landing-prose_body) dd,
:where(.landing-prose_body) address{
	font-size:17px;
	line-height:1.75;
	color:var(--ink);
}

:where(.landing-prose_body) p{
	margin:0 0 18px;
}

:where(.landing-prose_body) ul,
:where(.landing-prose_body) ol{
	margin:0 0 20px;
	padding-left:1.5em;
}

:where(.landing-prose_body) li{
	margin-bottom:8px;
	padding-left:4px;
}

:where(.landing-prose_body) ul > li{
	list-style:disc;
}

:where(.landing-prose_body) ol > li{
	list-style:decimal;
}

:where(.landing-prose_body) ol.upper-roman{
	padding-left:2.6em;
}

:where(.landing-prose_body) ol.upper-roman > li{
	list-style:upper-roman;
}

:where(.landing-prose_body) li::marker{
	color:var(--brand-ink);
}

:where(.landing-prose_body) dl{
	margin:0 0 20px;
}

:where(.landing-prose_body) dt{
	font-weight:700;
	color:var(--ink);
}

:where(.landing-prose_body) dd{
	margin:0 0 12px;
}

:where(.landing-prose_body) address{
	margin:0 0 18px;
	font-style:normal;
}

/* Nomes longos levam <wbr> depois dos pontos (.AspNetCore.<wbr>Mvc.<wbr>…): a linha quebra ali, e não na quebra
   de emergência do overflow-wrap antes do ")", que ficava sozinho na linha de baixo em 390px */
:where(.landing-prose_body) code{
	padding:2px 4px;
	border-radius:6px;
	font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size:0.86em;
	color:var(--ink);
	background-color:var(--surface);
	overflow-wrap:anywhere;
}

:where(.landing-prose_body) strong{
	font-weight:700;
}

.landing-prose_body a{
	color:var(--brand-ink);
	text-decoration:underline;
	text-underline-offset:3px;
}

.landing-prose_body a .landing-icon{
	width:15px;
	height:15px;
	vertical-align:-2px;
}

/* Resumo no topo do texto: aside.landing-card com p.landing-card_label e ul */
.landing-prose_body aside{
	height:auto; /* o .landing-card tem height:100% (grade de cards) */
	margin:0 0 40px;
	padding:28px 30px 12px;
	border:0;
	border-radius:24px;
	background-color:var(--surface);
}

/* Tabela: rola nunca; abaixo de 768px (tela) cada linha vira um bloco, com o rótulo de td[data-label] */
.landing-prose_table{
	margin:8px 0 28px;
}

.landing-prose_table table{
	width:100%;
	border-collapse:collapse;
	font-size:15px;
	line-height:1.6;
}

.landing-prose_table caption{
	caption-side:top;
	padding:0 0 10px;
	text-align:left;
	font-size:16px;
	font-weight:700;
	color:var(--ink);
}

.landing-prose_table th,
.landing-prose_table td{
	padding:12px 14px;
	border-bottom:1px solid var(--line);
	text-align:left;
	vertical-align:top;
	color:var(--ink);
	overflow-wrap:break-word;
}

.landing-prose_table thead th{
	font-weight:700;
	background-color:var(--surface);
	border-bottom-width:2px;
}

.landing-prose_table tbody th{
	font-weight:700;
}

.landing-prose_table :where(p, ul, ol, li){
	font-size:inherit;
	line-height:inherit;
}

.landing-prose_table :where(p, ul, ol):last-child{
	margin-bottom:0;
}

@media only screen and (max-width: 767px){
	.landing-prose_table table,
	.landing-prose_table caption,
	.landing-prose_table tbody,
	.landing-prose_table tr,
	.landing-prose_table th,
	.landing-prose_table td{
		display:block;
		width:auto;
	}

	.landing-prose_table thead{
		position:absolute;
		width:1px;
		height:1px;
		overflow:hidden;
		clip-path:inset(50%);
		white-space:nowrap;
	}

	.landing-prose_table tr{
		margin:0 0 16px;
		padding:12px 16px;
		border:1px solid var(--line);
		border-radius:16px;
	}

	.landing-prose_table th,
	.landing-prose_table td{
		padding:6px 0;
		border:0;
	}

	.landing-prose_table tbody th{
		margin-bottom:4px;
		padding-bottom:10px;
		border-bottom:1px solid var(--line);
		font-size:16px;
	}

	.landing-prose_table td[data-label]:before{
		content:attr(data-label);
		display:block;
		font-size:12px;
		font-weight:700;
		letter-spacing:0.04em;
		text-transform:uppercase;
		color:var(--ink-muted);
	}
}

/* Sumário "Nesta página": nav.landing-toc > details.landing-toc_details > summary.landing-toc_title + ol.
   Celular: <details> fechado. A partir de 992px: aberto (script.js e ::details-content), fixo abaixo do header. */
.landing-toc{
	grid-area:toc;
	margin:0 0 36px;
}

.landing-toc_details{
	border:1px solid var(--line);
	border-radius:16px;
	background-color:var(--white-color);
}

.landing-toc_title{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:14px 18px;
	cursor:pointer;
	list-style:none;
	font-family:"Outfit", sans-serif;
	font-size:17px;
	font-weight:700;
	color:var(--ink);
}

.landing-toc_title::-webkit-details-marker{
	display:none;
}

.landing-toc_title:after{
	content:"";
	flex-shrink:0;
	width:9px;
	height:9px;
	margin-top:-4px;
	border-right:2px solid currentColor;
	border-bottom:2px solid currentColor;
	rotate:45deg;
	transition:rotate .2s ease;
}

.landing-toc_details[open] .landing-toc_title:after{
	margin-top:4px;
	rotate:-135deg;
}

.landing-toc ol{
	margin:0;
	padding:0 18px 14px;
}

.landing-toc li{
	list-style:none;
}

.landing-toc a{
	display:block;
	padding:7px 0;
	font-size:15px;
	line-height:1.45;
	color:var(--ink-muted);
}

.landing-toc a:hover{
	color:var(--brand-ink);
}

@media only screen and (min-width: 992px){
	.landing-prose{
		grid-template-columns:240px minmax(0, 1fr);
		grid-template-areas:"toc date" "toc body";
		column-gap:64px;
		align-items:start;
	}

	.landing-toc{
		position:sticky;
		top:100px;
		margin:0;
	}

	.landing-toc_details{
		border:0;
		border-radius:0;
		background:none;
	}

	.landing-toc_title{
		padding:0 0 12px;
		cursor:default;
		pointer-events:none;
		font-family:inherit;
		font-size:13px;
		letter-spacing:0.08em;
		text-transform:uppercase;
		color:var(--ink-muted);
	}

	.landing-toc_title:after{
		display:none;
	}

	.landing-toc ol{
		padding:0;
		border-left:2px solid var(--line);
	}

	.landing-toc a{
		margin-left:-2px;
		padding:6px 0 6px 16px;
		border-left:2px solid transparent;
	}

	.landing-toc a:hover{
		border-left-color:var(--brand-ink);
	}

	/* aberto mesmo sem JavaScript, onde o navegador tem ::details-content */
	.landing-toc_details::details-content{
		content-visibility:visible;
		block-size:auto;
	}
}

/* 992 a 1199px: o texto ainda é estreito. Sumário e respiro menores e células mais justas, para a tabela
   de 5 colunas da privacidade não quebrar em uma ou duas palavras por linha (medido: 2.118 -> 1.590px em 1024) */
@media only screen and (min-width: 992px) and (max-width: 1199px){
	.landing-prose{
		grid-template-columns:200px minmax(0, 1fr);
		column-gap:40px;
	}

	.landing-prose_table th,
	.landing-prose_table td{
		padding:12px 10px;
	}
}

/* FAQ do /faq: chips-âncora para os temas (links, não filtro) e grupos numa coluna de ~880px.
   O contêiner dos grupos leva data-faq-page (script.js: nenhum item abre sozinho; o #id abre o item). */
.landing-faq_temas{
	text-align:center;
}

.landing-faq_temas > p{
	margin:0 0 16px;
	font-size:16px;
	font-weight:600;
	color:var(--ink);
}

.landing-faq_temas .landing-chips{
	justify-content:center;
	margin:0;
}

.landing-faq_temas .landing-chips li{
	padding:0;
	border:0;
	background:none;
}

.landing-faq_temas .landing-chips li:before{
	content:none;
}

.landing-faq_temas .landing-chips a{
	display:inline-block;
	padding:10px 20px;
	border-radius:50px;
	border:1px solid var(--line);
	color:var(--ink);
	background-color:var(--surface);
}

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

.landing-faq_temas .landing-chips a:hover{
	color:var(--brand-ink);
	border-color:var(--brand-a);
}

.landing-faq_grupo{
	max-width:880px;
	margin:0 auto;
	padding-bottom:88px;
}

.landing-faq_grupo:last-child{
	padding-bottom:0;
}

@media only screen and (max-width: 767px){
	.landing-faq_grupo{
		padding-bottom:48px;
	}
}

/* Faixa CTA (.cta-one.landing-cta) no fim da página interna: encosta no rodapé */
main > .landing-cta.cta-one:last-child{
	padding-bottom:60px;
}

/* Impressão (páginas legais): só o conteúdo, tabelas como tabela e <details> abertos.
   O header, o rodapé e a faixa CTA só somem onde há .landing-prose: a impressão da home e do Blog não muda. */
@media print{
	body:has(.landing-prose) .main-header,
	body:has(.landing-prose) .footer-style_three,
	body:has(.landing-prose) .cta-one,
	body:has(.landing-prose) .progress-wrap,
	.landing-toc{
		display:none !important;
	}

	.landing-page-hero{
		padding:0 0 16px;
		border-radius:0;
		background:none;
	}

	.landing-page-hero_heading,
	.landing-page-hero_lead,
	.landing-page-hero .sec-title.light .sec-title_title{
		color:#000000;
	}

	.landing-page-hero .sec-title_dots,
	.landing-breadcrumb{
		display:none;
	}

	.landing-band{
		margin:0;
		padding:16px 0;
		border-radius:0;
		background:none;
	}

	.landing-prose{
		display:block;
	}

	:where(.landing-prose_body) :is(h2, h3, p, ul, ol, dl, address, aside){
		max-width:none;
	}

	details::details-content{
		content-visibility:visible;
		block-size:auto;
	}

	:where(.landing-prose_body) h2,
	:where(.landing-prose_body) h3{
		break-after:avoid;
	}

	.landing-prose_table tr{
		break-inside:avoid;
	}
}

/* --------------------------------------------------------------------------
   19. Aviso de cookies (Views/Shared/_CookieConsent.cshtml + consent.js)
   Só existe com App:Tracking configurado. Fixo embaixo (sem CLS) e sem cobrir o voltar ao topo:
   card à esquerda no desktop; no celular, largura total com 12px de margem (lá o .progress-wrap some).
   Um botão só ("Entendi"): o aviso informa a coleta, não liga nem desliga as tags.
   -------------------------------------------------------------------------- */
.landing-consent{
	position:fixed;
	left:20px;
	bottom:20px;
	z-index:1000; /* acima do conteúdo e do voltar ao topo (99); abaixo do header fixo e do menu mobile */
	width:calc(100% - 40px);
	max-width:560px;
	padding:22px 24px;
	border:1px solid rgba(255,255,255,0.18); /* contorno visível sobre o hero e o rodapé escuros */
	border-radius:20px;
	background-color:var(--brand-dark);
	box-shadow:0 12px 40px rgba(11,18,51,0.35);
}

.landing-consent_text{
	margin:0 0 16px;
	font-size:15px;
	line-height:1.6;
	color:var(--white-color);
}

.landing-consent_text a{
	color:var(--white-color);
	font-weight:700;
	text-decoration:underline;
}

.landing-consent_actions{
	display:flex;
	justify-content:flex-end;
}

/* "Entendi": contorno branco; no hover, preenchido */
.landing-consent_btn{
	min-width:140px;
	min-height:48px;
	padding:10px 24px;
	border:2px solid var(--white-color);
	border-radius:50px;
	background-color:transparent;
	color:var(--white-color);
	font-family:"Manrope", sans-serif;
	font-size:15px;
	font-weight:700;
	line-height:1.2;
	cursor:pointer;
	transition:background-color .2s, color .2s;
}

.landing-consent_btn:hover{
	background-color:var(--white-color);
	color:var(--brand-dark);
}

.landing-consent a:focus-visible,
.landing-consent button:focus-visible{
	outline-color:#FFFFFF !important;
}

@media only screen and (max-width: 767px){
	.landing-consent{
		left:12px;
		right:12px;
		bottom:12px;
		width:auto;
		max-width:none;
		padding:18px 16px;
	}
}

@media print{
	.landing-consent{
		display:none !important;
	}
}

/* --------------------------------------------------------------------------
   20. Regiões de cada página (o CSS entregue pelos agentes de página entra aqui)
   -------------------------------------------------------------------------- */

/* === Página: FAQ === */

/* Faixa clara dos temas (chips-âncora), logo abaixo do hero: mais baixa que uma banda de conteúdo
   e com o mesmo respiro do hero que as bandas têm nas laterais */
.landing-faq_faixa{
	margin-top:20px;
	padding:44px 0 48px;
}

/* CTA de licenças: uma linha abaixo do acordeão do grupo, na mesma coluna; o botão desce no celular */
.landing-faq_cta{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:16px 28px;
	margin-top:32px;
}

.landing-faq_cta p{
	margin:0;
	font-size:18px;
	font-weight:600;
	line-height:1.5;
	color:var(--ink);
}

@media only screen and (max-width: 767px){
	.landing-faq_faixa{
		margin-top:10px;
		padding:32px 0 36px;
	}

	.landing-faq_cta{
		margin-top:24px;
	}

	.landing-faq_cta p{
		font-size:17px;
	}
}

/* === Página: Sobre === */

/* Sobre (/about): só o que os componentes genéricos da seção 18 não cobrem. Escopo: classes .landing-about_* da view. */

/* Origem e Dados da empresa: o .sec-title fica numa coluna do .landing-split, sem a margem de baixo do template */
.landing-about_origem .sec-title,
.landing-about_empresa .sec-title{
	margin-bottom:0;
}

/* Origem: o texto inteiro fica no .sec-title (entra junto, com "up"); a foto usa o .landing-split_media */
.landing-about_origem .sec-title_text{
	margin-top:18px;
	font-size:17px;
	line-height:1.75;
	color:var(--ink-muted);
}

p.landing-about_destaque{
	margin:22px 0 0;
	font-size:18px;
	line-height:1.6;
	font-weight:600;
	color:var(--ink);
}

/* O que entregamos: moldura pequena no topo do card, sempre em 4:3 a partir do topo do print
   (o arquivo é 4:5; o landing.css põe 1:1 abaixo de 768px). Sombra curta: a padrão passava da borda do card. */
.landing-about_modulo .landing-browser{
	margin-bottom:20px;
	border-radius:12px;
	box-shadow:0 10px 24px rgba(14,24,64,0.10);
}

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

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

.landing-about_modulo .landing-browser img{
	aspect-ratio:4 / 3;
}

p.landing-about_nota{
	margin:16px 0 0;
	font-size:15px;
	line-height:1.6;
	text-align:center;
	color:var(--ink-muted);
}

/* Como trabalhamos: fecho e botão abaixo das etapas */
.landing-about_etapas-fim{
	margin-top:56px;
	text-align:center;
}

.landing-about_etapas-fim p{
	margin:0 0 24px;
	font-size:18px;
	line-height:1.6;
	font-weight:600;
	color:var(--ink);
}

/* Clientes: segue outra seção branca (Como trabalhamos), sem o respiro dobrado entre as duas */
.landing-about_clientes.landing-band{
	padding-top:20px;
}

/* depoimento único, centralizado; sem a altura da grade de 3 da home */
.landing-about_depoimento.landing-depoimento{
	max-width:760px;
	height:auto;
	margin:0 auto;
}

.landing-about_depoimento .testimonial-block_two-text{
	font-size:20px;
	line-height:1.65;
}

p.landing-about_relatos{
	margin:24px 0 0;
	text-align:center;
}

/* Dados da empresa: card branco com a <dl>, fora de grade de cards. Entra só com fade (o grupo .landing-card sobe). */
.landing-about_dados.landing-card{
	height:auto;
	--reveal-y:0px;
}

.landing-about_dados a.landing-link{
	margin-top:6px;
}

/* Redes: os dois links (ícone + nome) e o "e" alinhados pelo centro, não pela base do ícone */
.landing-about_redes{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:4px 8px;
}

.landing-about_redes a{
	display:inline-flex;
	align-items:center;
	gap:8px;
}

.landing-about_redes .landing-icon{
	flex-shrink:0;
	width:18px;
	height:18px;
}

/* CTA: com o rótulo longo do botão, o título de 700px empurrava o botão para baixo dele já em 1440px */
.landing-about_cta .cta-one_heading{
	max-width:600px;
}

@media only screen and (max-width: 767px){
	.landing-about_etapas-fim{
		margin-top:40px;
	}

	.landing-about_etapas-fim p{
		font-size:17px;
	}

	.landing-about_depoimento .testimonial-block_two-text{
		font-size:19px;
	}

	/* CTA: o rótulo longo ("Quero ver um pedido de ponta a ponta") cabe numa linha a partir de ~390px;
	   o template dá 50px de padding ao botão e 30px à faixa */
	.landing-about_cta .inner-container{
		padding-left:20px;
		padding-right:20px;
	}

	.landing-about_cta .theme-btn{
		padding-left:18px;
		padding-right:18px;
	}
}

/* Abaixo de 390px o rótulo ainda quebrava ("ponta" sozinha): menos respiro na faixa e no botão (cabe em 360) */
@media only screen and (max-width: 389px){
	.landing-about_cta .inner-container{
		padding-left:12px;
		padding-right:12px;
	}

	.landing-about_cta .theme-btn{
		padding-left:12px;
		padding-right:12px;
	}
}

/* === Página: Contato === */

/* Contato: o bloco escuro da demonstração vem logo depois do hero escuro. 30px de respiro, como o rodapé
   depois do mesmo bloco na home, e a banda clara dos canais também se separa dele. */
.landing-contact_demo{
	padding-top:30px;
}

#canais{
	margin-top:30px;
}

/* Cards dos canais: a última linha da grade não soma os 24px ao padding da banda */
#canais .landing-cards{
	margin-bottom:-24px;
}

/* "Ler a política de privacidade", no fim do card de dados pessoais */
.landing-contact_mais{
	margin:20px 0 0;
}

/* Endereço: pin à esquerda; endereço e link do Maps na coluna do texto */
.landing-contact_endereco{
	display:grid;
	grid-template-columns:44px minmax(0, 1fr);
	column-gap:14px;
	align-items:start;
}

.landing-contact_endereco > address,
.landing-contact_endereco > .landing-link{
	grid-column:2;
}

.landing-contact_endereco > address{
	margin:0;
	font-size:17px;
	line-height:1.75;
	color:var(--ink);
	overflow-wrap:anywhere;
}

.landing-contact_endereco > .landing-link{
	justify-self:start;
	margin-top:14px;
}

/* === Página: Privacidade === */

/* Política de privacidade (/privacy). O layout vem do genérico (.landing-prose, tabelas e sumário);
   aqui só o ícone dos links externos e o destaque do canal (seção 11). */

/* Ícone de link externo no texto corrido. O helper Icon() escreve espaços em volta do <svg>: com font-size 0
   eles somem (nada de espaço antes do ponto final) e o nowrap segura o ícone junto da última palavra */
.landing-prose_body .landing-privacy_ext{
	font-size:0;
	white-space:nowrap;
}

.landing-prose_body .landing-privacy_ext .landing-icon{
	margin-left:5px;
}

/* Seção 11: o canal em destaque leve, com o ícone de e-mail num círculo da marca */
.landing-prose_body .landing-privacy_canal{
	display:flex;
	align-items:center;
	gap:14px;
	padding:16px 20px;
	border-radius:16px;
	font-weight:600;
	background-color:var(--surface);
}

.landing-privacy_canal > span:last-child{
	min-width:0;
}

.landing-privacy_canal-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	width:40px;
	height:40px;
	border-radius:50%;
	color:var(--white-color);
	background-image:var(--brand-grad-v);
}

.landing-privacy_canal-icon .landing-icon{
	width:20px;
	height:20px;
}

@media only screen and (max-width: 767px){
	.landing-prose_body .landing-privacy_canal{
		gap:12px;
		padding:14px 16px;
	}
}

/* Impressão: o canal vira texto simples (sem fundo nem círculo) */
@media print{
	.landing-prose_body .landing-privacy_canal{
		padding:0;
		background:none;
	}

	.landing-privacy_canal-icon{
		display:none;
	}
}

/* === Página: Termos === */

/* Sem o resumo da /privacy, o primeiro h2 vem logo depois da data (ou do sumário, no celular):
   sem a margem de cima do h2 do texto longo, a distância fica a da própria data ou do sumário */
.landing-terms .landing-prose_body > section:first-child > h2:first-child{
	margin-top:0;
}