@font-face {
	font-family: 'Outfit';
	src: url('/fontes/outfit-latin-wght.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('/fontes/inter-latin-wght-normal.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--noite: #06182b;
	--mar: #0d2740;
	--mar-claro: #16385a;
	--azul: #1b76bf;
	--ceu: #5ccbf7;
	/* A luz quente dos beirais da foto do topo: é o único acento fora da marca. */
	--luz: #f6c66f;
	--luz-forte: #eeb04b;
	--papel: #f8f6f1;
	--branco: #fff;
	--tinta: #0e1f30;
	--tinta-2: #4c5c6c;
	--linha: #e3dfd6;
	--linha-noite: rgb(255 255 255 / 12%);
	--texto-noite: #eaf1f7;
	--texto-noite-2: #a6b9ca;

	--titulo: 'Outfit', system-ui, sans-serif;
	--corpo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--largura: 1200px;
	--calha: clamp(16px, 4vw, 40px);
	--secao: clamp(72px, 10vw, 136px);
	--raio: 14px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font: 400 1.0625rem/1.65 var(--corpo);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img {
	display: block;
	max-width: 100%;
	height: auto;
}
h1,
h2,
h3 {
	margin: 0;
	font-family: var(--titulo);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.08;
	text-wrap: balance;
}
p {
	margin: 0;
	text-wrap: pretty;
}
a {
	color: inherit;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
:focus-visible {
	outline: 2px solid var(--ceu);
	outline-offset: 3px;
	border-radius: 4px;
}
.envelope {
	width: min(100%, calc(var(--largura) + var(--calha) * 2));
	margin-inline: auto;
	padding-inline: var(--calha);
}
.pular {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 100;
	padding: 8px 14px;
	border-radius: 8px;
	background: var(--branco);
	color: var(--tinta);
}
.pular:focus {
	top: 12px;
}

/* Botões */
.botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: 600 1rem/1.2 var(--corpo);
	text-decoration: none;
	cursor: pointer;
	transition:
		background 0.18s,
		border-color 0.18s,
		transform 0.18s;
}
.botao:hover {
	transform: translateY(-1px);
}
.botao:disabled {
	opacity: 0.6;
	cursor: wait;
}
.botao-luz {
	background: var(--luz);
	color: #1c1405;
}
.botao-luz:hover {
	background: var(--luz-forte);
}
.botao-fantasma {
	border-color: rgb(255 255 255 / 32%);
	color: var(--branco);
}
.botao-fantasma:hover {
	border-color: var(--branco);
}
.botao-tinta {
	background: var(--mar);
	color: var(--branco);
}
.botao-tinta:hover {
	background: var(--mar-claro);
}
.botao-contorno {
	border-color: #c9c3b6;
	color: var(--tinta);
}
.botao-contorno:hover {
	border-color: var(--tinta);
}
.botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Cabeçalho */
.cabecalho {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	color: var(--branco);
	transition:
		background 0.2s,
		box-shadow 0.2s;
}
.cabecalho[data-rolou],
.cabecalho:has([data-aberto]) {
	background: rgb(6 24 43 / 92%);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 var(--linha-noite);
}
.cabecalho-linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 72px;
}
.logo img {
	width: 146px;
}
.menu {
	display: flex;
	align-items: center;
	gap: 28px;
	font-size: 0.9375rem;
}
.menu a:not(.botao) {
	color: var(--texto-noite);
	text-decoration: none;
}
.menu a:not(.botao):hover {
	color: var(--branco);
	text-decoration: underline;
	text-underline-offset: 5px;
}
.menu .botao {
	min-height: 42px;
	padding: 8px 18px;
	font-size: 0.9375rem;
}
.menu-botao {
	display: none;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
@media (max-width: 880px) {
	.com-js .menu-botao {
		display: grid;
		place-items: center;
	}
	.com-js .menu {
		position: absolute;
		inset: 100% 0 auto;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding: 12px var(--calha) 24px;
		background: rgb(6 24 43 / 98%);
	}
	.com-js .menu[data-aberto] {
		display: flex;
	}
	.menu a:not(.botao) {
		padding: 10px 0;
		font-size: 1.0625rem;
	}
	.menu .botao {
		min-height: 50px;
		margin-top: 8px;
	}
	.menu {
		flex-wrap: wrap;
	}
}

/* Topo */
.topo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Termina na cor da seção seguinte: a captura desce para a noite sem emenda. */
	background: linear-gradient(180deg, #05366f 0%, #0a4f9c 38%, #0d3f7c 62%, var(--noite) 100%);
	color: var(--branco);
}
.topo-foto {
	position: absolute;
	z-index: -1;
	/* Abaixo do cabeçalho: o telhado encostado no menu atrapalhava a leitura. */
	top: 80px;
	right: 0;
	width: min(64%, 1120px);
	/* O raio no canto apaga o céu claro da foto, que destoava do azul. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 30%), linear-gradient(180deg, transparent, #000 11%, #000 72%, transparent), radial-gradient(75% 85% at 100% 0, transparent 25%, #000 75%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent, #000 30%), linear-gradient(180deg, transparent, #000 11%, #000 72%, transparent), radial-gradient(75% 85% at 100% 0, transparent 25%, #000 75%);
	mask-composite: intersect;
}
@media (min-width: 1841px) {
	/*
	  Em tela larga a foto já parou de crescer: presa à direita da janela, se afastava do texto.
	  Aqui ela acompanha o bloco central (começa onde o texto termina, como em 1440px) e ganha
	  esmaecido à direita. Em 1840px o deslocamento é zero: não há salto.
	*/
	.topo-foto {
		right: calc((100% - var(--largura)) / 2 - 320px);
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent), linear-gradient(180deg, transparent, #000 11%, #000 72%, transparent), radial-gradient(75% 85% at 100% 0, transparent 25%, #000 75%);
		mask-image: linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent), linear-gradient(180deg, transparent, #000 11%, #000 72%, transparent), radial-gradient(75% 85% at 100% 0, transparent 25%, #000 75%);
	}
}
@media (max-width: 900px) {
	/* No celular a casa não cabe ao lado do texto: entra no fluxo, de borda a borda. */
	.topo-foto {
		position: static;
		width: 100vw;
		max-width: none;
		margin: 28px calc(var(--calha) * -1) 0;
		-webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
		mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
		-webkit-mask-composite: source-over;
		mask-composite: add;
	}
}
.topo-grade {
	padding-top: clamp(120px, 15vh, 168px);
}
.topo-texto {
	max-width: 560px;
}
.selo {
	display: inline-block;
	margin-bottom: 20px;
	color: var(--luz);
	font: 600 0.8125rem/1.3 var(--corpo);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
@media (max-width: 640px) {
	.selo {
		display: none;
	}
}
.topo h1 {
	font-size: clamp(2.5rem, 5vw, 4.125rem);
}
.topo-sub {
	max-width: 500px;
	margin-top: 22px;
	color: #e3ecf6;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.55;
}
.topo .botoes {
	margin-top: 32px;
}
.topo-nota {
	margin-top: 16px;
	color: #d3e0ee;
	font-size: 0.9375rem;
}
/* `.topo` na frente: `.janela`, mais abaixo, zera a margem. */
.topo .topo-tela {
	margin-top: clamp(56px, 7vw, 96px);
}

/* Janela que emoldura as capturas */
.janela {
	overflow: hidden;
	margin: 0;
	border: 1px solid rgb(14 31 48 / 12%);
	border-radius: var(--raio);
	background: var(--branco);
	box-shadow:
		0 2px 6px rgb(6 24 43 / 8%),
		0 28px 60px -20px rgb(6 24 43 / 32%);
}
.janela-noite {
	border-color: var(--linha-noite);
	box-shadow: 0 40px 90px -30px rgb(0 0 0 / 70%);
}


/*
  Maquetes: as telas do app refeitas em HTML, nítidas em qualquer densidade. O texto fica em
  tamanho real (não escala com a largura) e o que não cabe some por container query. Dados da
  conta fictícia "Casa Prisma Automação" (ver site/README.md).
*/
.maquete {
	--mq-tinta: #0f172a;
	--mq-tinta-2: #64748b;
	--mq-linha: #e2e8f0;
	--mq-fundo: #f8fafc;
	--mq-cartao: #fff;
	--mq-azul: #1d72c4;
	container-type: inline-size;
	color: var(--mq-tinta);
	font: 400 0.8125rem/1.4 var(--corpo);
	text-align: left;
	user-select: none;
	pointer-events: none;
}
.maquete b,
.maquete strong {
	font-weight: 600;
}
.maquete svg {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.maquete svg.mq-cheio {
	fill: currentColor;
	stroke: none;
}
.mq-mudo {
	color: var(--mq-tinta-2);
}
.mq-cor-vermelho { --mq-cor: #ef4444; }
.mq-cor-ambar { --mq-cor: #f59e0b; }
.mq-cor-roxo { --mq-cor: #8b5cf6; }
.mq-cor-verde { --mq-cor: #22c55e; }
.mq-cor-azul { --mq-cor: #3b82f6; }
.mq-cor-ciano { --mq-cor: #0891b2; }
.mq-cor-cinza { --mq-cor: #64748b; }

/* Janela do app (topo) */
.mq-escura {
	--mq-tinta: #e2e8f0;
	--mq-tinta-2: #94a3b8;
	--mq-linha: rgb(255 255 255 / 10%);
	--mq-fundo: #0b1322;
	--mq-cartao: #111c2e;
	--mq-azul: #2b86d9;
	background: #08101d;
}
.mq-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 12px;
}
.mq-titulo {
	font: 600 1rem/1.2 var(--corpo);
}
.mq-acoes {
	display: flex;
	gap: 8px;
}
.mq-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 11px;
	border: 1px solid var(--mq-linha);
	border-radius: 7px;
	font-weight: 500;
	white-space: nowrap;
}
.mq-primario {
	border-color: var(--mq-azul);
	background: var(--mq-azul);
	color: #fff;
}
.mq-abas {
	display: flex;
	gap: 22px;
	padding: 0 20px;
	border-bottom: 1px solid var(--mq-linha);
	color: var(--mq-tinta-2);
	font-weight: 500;
}
.mq-abas span {
	padding: 8px 2px 10px;
}
.mq-aba-ativa {
	box-shadow: inset 0 -2px 0 var(--mq-azul);
	color: var(--mq-azul);
}
/* Colunas de largura mínima: no celular cabem duas e a terceira aparece cortada, como no app. */
.mq-quadro {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(190px, 1fr);
	gap: 12px;
	padding: 16px 20px 22px;
}
.mq-coluna {
	display: grid;
	align-content: start;
	gap: 8px;
	padding: 12px 10px 10px;
	border: 1px solid var(--mq-linha);
	border-radius: 10px;
	background: var(--mq-fundo);
}
.mq-coluna-cab {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding-left: 10px;
}
.mq-coluna-cab::before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 3px;
	border-radius: 2px;
	background: var(--mq-cor);
}
.mq-coluna-cab span,
.mq-coluna-total {
	color: var(--mq-tinta-2);
	font-size: 0.75rem;
}
.mq-coluna-total {
	margin: -6px 0 2px 10px;
}
.mq-card {
	display: grid;
	gap: 1px;
	padding: 9px 11px;
	border: 1px solid var(--mq-linha);
	border-radius: 8px;
	background: var(--mq-cartao);
	color: var(--mq-tinta-2);
	font-size: 0.75rem;
}
.mq-card b {
	color: var(--mq-tinta);
	font-size: 0.8125rem;
	font-weight: 500;
}
.mq-card strong {
	margin-top: 2px;
	color: var(--mq-tinta);
}
.mq-arrastando {
	border-color: var(--mq-azul);
	transform: rotate(-2.5deg) translate(6px, -2px);
	box-shadow: 0 20px 34px -14px rgb(0 0 0 / 55%);
}
@container (max-width: 520px) {
	.mq-some {
		display: none;
	}
	.mq-topo,
	.mq-abas,
	.mq-quadro {
		padding-inline: 14px;
	}
	.mq-quadro {
		grid-auto-columns: 168px;
	}
}

/* Palco: a feature de uma etapa, em cartões sobre um fundo claro */
.mq-palco {
	position: relative;
	display: grid;
	gap: 14px;
	margin: 0;
	padding: clamp(18px, 3.5vw, 36px);
	border: 1px solid rgb(14 31 48 / 8%);
	border-radius: var(--raio);
	background: linear-gradient(155deg, #e4f0fb 0%, #f4efe4 100%);
}
.mq-cartao {
	margin: 0;
	padding: 16px;
	border: 1px solid var(--mq-linha);
	border-radius: 12px;
	background: #fff;
	box-shadow:
		0 1px 2px rgb(6 24 43 / 6%),
		0 18px 36px -20px rgb(6 24 43 / 30%);
}
.mq-cartao-titulo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	font-size: 0.875rem;
	font-weight: 600;
}
.mq-cartao-titulo small {
	color: var(--mq-tinta-2);
	font-size: 0.75rem;
	font-weight: 400;
}
.mq-lista {
	padding: 0;
	list-style: none;
}
.mq-lista li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 9px 0;
	border-top: 1px solid var(--mq-linha);
}
.mq-pessoa {
	display: grid;
	justify-items: start;
	gap: 3px;
	min-width: 0;
}
.mq-pessoa b {
	font-weight: 500;
}

/* Blocos do painel Resumo (etapas 1, 2 e 5): mesma marcação dos blocos do app */
.mq-apoio {
	overflow: hidden;
	color: var(--mq-tinta-2);
	font-size: 0.75rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mq-iniciais {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f1f5f9;
	color: var(--mq-tinta-2);
	font-size: 0.6875rem;
	font-weight: 600;
}
.mq-etapa {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	white-space: nowrap;
}
.mq-etapa::before,
.mq-ponto {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mq-cor);
}
.mq-contagem {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
	color: var(--mq-tinta-2);
}
.mq-contagem strong {
	color: var(--mq-tinta);
	font-size: 1.25rem;
}
.mq-lado {
	display: grid;
	justify-items: end;
	gap: 2px;
}
.mq-quando {
	color: #94a3b8;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}
.mq-lista li:first-child {
	border-top: 0;
}
.mq-dia {
	margin: 10px 0 2px;
	color: var(--mq-tinta-2);
	font-size: 0.75rem;
	font-weight: 600;
}
.mq-dia-hoje {
	margin-top: 0;
	color: var(--mq-azul);
}
.mq-compromissos li {
	grid-template-columns: 3.2em auto minmax(0, 1fr);
	padding: 7px 0;
}
.mq-hora {
	color: var(--mq-tinta-2);
	font-variant-numeric: tabular-nums;
}
.mq-link {
	display: inline-block;
	margin-top: 10px;
	color: var(--mq-azul);
	font-size: 0.8125rem;
}
.mq-kpis {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.mq-kpi {
	display: grid;
	align-content: start;
	gap: 6px;
	padding: 14px;
}
.mq-kpi-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	color: var(--mq-tinta-2);
	font-size: 0.75rem;
}
.mq-kpi-topo i {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: #eef5fc;
	color: var(--mq-azul);
}
.mq-kpi b {
	font: 600 1.25rem/1.1 var(--corpo);
	white-space: nowrap;
}
.mq-kpi small {
	color: var(--mq-tinta-2);
	font-size: 0.6875rem;
}
.mq-dupla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	align-items: start;
}
.mq-ranking li {
	grid-template-columns: 1em auto minmax(0, 1fr) auto;
	padding: 7px 0;
}
.mq-pos {
	color: var(--mq-tinta-2);
	font-weight: 600;
}
.mq-ranking li:first-child .mq-pos {
	color: #d29614;
}
.mq-proposta {
	display: grid;
	gap: 3px;
	padding: 12px;
	border: 1px solid var(--mq-linha);
	border-radius: 10px;
}
.mq-linha-proposta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}
.mq-selo-info {
	background: #e0ecfb;
	color: #1d5fa8;
}
@container (max-width: 720px) {
	.mq-kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@container (max-width: 520px) {
	.mq-dupla {
		grid-template-columns: 1fr;
	}
}

/* 3. Proposta */
.mq-ambientes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	align-items: start;
	padding: 16px 20px 20px;
}
.mq-ambiente {
	border: 1px solid var(--mq-linha);
	border-radius: 10px;
}
.mq-ambiente-cab {
	display: grid;
	gap: 8px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--mq-linha);
}
.mq-ambiente-cab span {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	color: var(--mq-tinta-2);
	font-size: 0.6875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.mq-ambiente-cab strong {
	color: var(--mq-tinta);
	font-size: 0.9375rem;
	letter-spacing: 0;
}
.mq-solucao {
	display: grid;
	gap: 4px;
	padding: 10px 14px;
}
.mq-solucao + .mq-solucao {
	border-top: 1px solid var(--mq-linha);
}
.mq-solucao div {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}
.mq-solucao b {
	font-weight: 500;
}
.mq-preco {
	color: #c2410c;
	white-space: nowrap;
}
.mq-item {
	color: var(--mq-tinta-2);
	font-size: 0.6875rem;
	text-transform: uppercase;
}
@container (max-width: 520px) {
	.mq-ambientes {
		grid-template-columns: 1fr;
		padding-inline: 14px;
	}
	.mq-ambiente + .mq-ambiente {
		display: none;
	}
}
.mq-topo-proposta {
	align-items: flex-start;
}
.mq-trilha {
	color: var(--mq-tinta-2);
}
.mq-bloco {
	display: block;
	margin-top: 4px;
}
@container (max-width: 520px) {
	.mq-trilha {
		display: none;
	}
}

/* 4. Fechamento: o celular do cliente e a faixa do que você vê */
.mq-celular {
	display: grid;
	gap: 8px;
	width: min(100%, 300px);
	padding: 22px 16px 18px;
	border: 7px solid var(--noite);
	border-radius: 30px;
	background: #f1f5f9;
	box-shadow: 0 30px 60px -20px rgb(0 0 0 / 60%);
}
.mq-cel-total {
	display: grid;
	gap: 6px;
	margin-top: 6px;
	padding: 12px;
	border-radius: 10px;
	background: #e3f0fb;
	color: var(--mq-tinta-2);
	font-size: 0.6875rem;
}
.mq-cel-total b {
	color: var(--mq-azul);
	font-size: 1.375rem;
	white-space: nowrap;
}
.mq-rotulo {
	margin-top: 4px;
	color: var(--mq-tinta-2);
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.mq-etapas {
	display: grid;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}
.mq-etapas li {
	display: grid;
	align-content: start;
	gap: 1px;
	padding-top: 6px;
	border-top: 2px solid var(--mq-azul);
	font-size: 0.6875rem;
}
.mq-etapas li span {
	color: #b6c3d1;
	font-weight: 600;
}
.mq-etapas small {
	color: var(--mq-tinta-2);
	font-size: 0.625rem;
}
.mq-etapas strong {
	color: var(--mq-azul);
}
.mq-aceite {
	display: grid;
	gap: 8px;
	margin-top: 6px;
	padding: 14px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 20px -14px rgb(6 24 43 / 40%);
}
.mq-aceite > b {
	font: 600 1rem/1.2 var(--titulo);
}
.mq-aceite > span:not([class]) {
	color: var(--mq-tinta-2);
	font-size: 0.75rem;
}
.mq-rotulo-campo {
	font-weight: 500;
}
.mq-rotulo-campo i {
	color: #dc2626;
	font-style: normal;
}
.mq-campo {
	height: 34px;
	padding: 7px 10px;
	border: 1px solid #cbd5e1;
	border-radius: 7px;
}
.mq-aceite .mq-botao {
	padding-block: 9px;
}
.mq-faixa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 10px;
	width: min(100%, 520px);
	padding: 10px 14px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 16px 30px -18px rgb(0 0 0 / 60%);
}
.mq-faixa b {
	color: var(--mq-azul);
}
.mq-faixa > span:not([class]) {
	color: var(--mq-tinta-2);
}
.mq-selo {
	padding: 2px 9px;
	border-radius: 999px;
	background: #eef2f6;
	color: var(--mq-tinta-2);
	font-size: 0.75rem;
	font-weight: 500;
}

/* Lux */
.mq-chat {
	display: grid;
	gap: 12px;
	padding: 18px;
	border-radius: var(--raio);
	background: #fff;
	box-shadow: 0 40px 90px -30px rgb(0 0 0 / 70%);
	font-size: 0.875rem;
}
.mq-chat-cab {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1rem;
}
.mq-chat-cab svg {
	color: var(--mq-azul);
}
.mq-msg-eu {
	justify-self: end;
	display: grid;
	gap: 6px;
	max-width: 85%;
	padding: 12px 14px;
	border-radius: 14px 14px 4px 14px;
	background: #eaf4fd;
}
.mq-msg-eu small {
	justify-self: end;
	color: var(--mq-tinta-2);
	font-size: 0.6875rem;
}
.mq-msg-lux {
	display: grid;
	gap: 8px;
	max-width: 92%;
	padding: 12px 14px;
	border-radius: 14px 14px 14px 4px;
	background: var(--mq-fundo);
}
.mq-msg-lux ul {
	display: grid;
	gap: 4px;
	padding-left: 1.1em;
	list-style: disc;
}
.mq-chat-campo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 4px;
	padding: 8px 8px 8px 14px;
	border: 1px solid var(--mq-linha);
	border-radius: 12px;
	color: #94a3b8;
}
.mq-enviar {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--mq-azul);
	color: #fff;
}

/* Seções */
.secao {
	padding-block: var(--secao);
}
.secao-noite {
	background: var(--noite);
	color: var(--texto-noite);
}
.secao-branca {
	background: var(--branco);
}
.cabeca {
	max-width: 760px;
	margin-bottom: clamp(40px, 6vw, 72px);
}
.cabeca h2 {
	font-size: clamp(2rem, 4.2vw, 3.25rem);
}
.cabeca p {
	margin-top: 18px;
	color: var(--tinta-2);
	font-size: 1.1875rem;
}
.secao-noite .cabeca p {
	color: var(--texto-noite-2);
}
.sobre {
	margin-bottom: 14px;
	color: var(--azul);
	font: 600 0.8125rem/1.3 var(--corpo);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.secao-noite .sobre {
	color: var(--luz);
}

/* A dor: a captura do topo já desce para a noite, então a seção começa perto dela. */
.secao.dor {
	padding-top: clamp(56px, 6vw, 80px);
}
.dores {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--linha-noite);
}
.dores li {
	padding: 28px 32px 8px 0;
}
.dores li + li {
	padding-left: 32px;
	border-left: 1px solid var(--linha-noite);
}
.dores h3 {
	font-size: 1.375rem;
	color: var(--branco);
}
.dores p {
	margin-top: 12px;
	color: var(--texto-noite-2);
}
@media (max-width: 800px) {
	.dores {
		grid-template-columns: 1fr;
	}
	.dores li,
	.dores li + li {
		padding: 24px 0;
		border-left: 0;
		border-top: 1px solid var(--linha-noite);
	}
	.dores li:first-child {
		border-top: 0;
	}
}

/* A jornada: texto e tela alternados */
.etapa {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
}
.etapa + .etapa {
	margin-top: clamp(80px, 11vw, 148px);
}
.etapa:nth-of-type(even) .etapa-texto {
	order: 2;
}
.etapa-numero {
	display: block;
	margin-bottom: 14px;
	color: var(--azul);
	font: 600 1.1875rem/1.2 var(--titulo);
}
.etapa h3 {
	font-size: clamp(1.625rem, 3vw, 2.25rem);
}
.etapa-texto > p {
	margin-top: 14px;
	color: var(--tinta-2);
}
.marcas {
	display: grid;
	gap: 10px;
	margin-top: 20px;
}
.marcas li {
	position: relative;
	padding-left: 24px;
}
.marcas li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0.62em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ceu);
	box-shadow: 0 0 0 3px rgb(92 203 247 / 22%);
}
@media (max-width: 900px) {
	.etapa {
		grid-template-columns: 1fr;
	}
	.etapa:nth-of-type(even) .etapa-texto {
		order: 0;
	}
}

/* Etapa do fechamento: o celular do cliente e a faixa do que você vê */
.duo {
	display: grid;
	justify-items: center;
	gap: 20px;
	margin: 0;
	padding: clamp(24px, 4vw, 44px);
	border-radius: var(--raio);
	background: linear-gradient(160deg, var(--mar), #0a4f9c);
}

/* Faixa de foto */
.faixa {
	position: relative;
	isolation: isolate;
	display: grid;
	min-height: clamp(380px, 46vw, 560px);
	align-items: end;
	color: var(--branco);
}
.faixa img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.faixa::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Escuro onde está o texto (esquerda e base): a foto clara apagava o parágrafo. */
	background:
		linear-gradient(0deg, rgb(6 24 43 / 55%), transparent 60%),
		linear-gradient(90deg, rgb(6 24 43 / 92%), rgb(6 24 43 / 70%) 55%, rgb(6 24 43 / 20%));
}
.faixa-texto {
	max-width: 620px;
	padding-block: clamp(40px, 6vw, 72px);
}
.faixa h2 {
	font-size: clamp(1.875rem, 3.8vw, 2.875rem);
}
.faixa p {
	margin-top: 14px;
	color: var(--branco);
	font-size: 1.125rem;
	text-shadow: 0 1px 12px rgb(6 24 43 / 70%);
}

/* Lux */
.lux {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
}
.lux .marcas li::before {
	background: var(--luz);
	box-shadow: 0 0 0 3px rgb(246 198 111 / 22%);
}
.lux-cabeca {
	margin-bottom: 24px;
}
.lux-painel {
	width: min(100%, 580px);
	margin: 0 auto;
}
.lux-frases {
	display: grid;
	justify-items: start;
	gap: 12px;
}
.lux-frases blockquote {
	margin: 0;
	padding: 14px 18px;
	border: 1px solid var(--linha-noite);
	border-radius: 16px 16px 16px 4px;
	background: var(--mar);
	color: var(--branco);
}
.lux-frases blockquote:nth-child(even) {
	margin-left: clamp(0px, 4vw, 40px);
}
.lux-nota {
	margin-top: 24px;
	color: var(--texto-noite-2);
	font-size: 0.9375rem;
}
@media (max-width: 900px) {
	.lux {
		grid-template-columns: 1fr;
	}
	.lux-painel {
		width: min(100%, 340px);
	}
}

/* O que mais vem junto */
.extras {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px clamp(28px, 4vw, 56px);
}
.extras h3 {
	font-size: 1.1875rem;
}
.extras p {
	margin-top: 8px;
	color: var(--tinta-2);
	font-size: 1rem;
}
@media (max-width: 900px) {
	.extras {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 560px) {
	.extras {
		grid-template-columns: 1fr;
	}
}

/* Passos */
.passos {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 48px);
	counter-reset: passo;
}
.passos li {
	counter-increment: passo;
	padding-top: 20px;
	border-top: 2px solid var(--azul);
}
.passos li::before {
	content: counter(passo);
	display: block;
	margin-bottom: 18px;
	color: var(--azul);
	font: 500 2.5rem/1 var(--titulo);
}
.passos h3 {
	font-size: 1.3125rem;
}
.passos p {
	margin-top: 8px;
	color: var(--tinta-2);
}
@media (max-width: 800px) {
	.passos {
		grid-template-columns: 1fr;
	}
}

/* Planos */
.planos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}
.plano {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 32px 28px;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--branco);
}
.plano-destaque {
	border-color: var(--mar);
	background: var(--mar);
	color: var(--texto-noite);
}
.plano-etiqueta {
	position: absolute;
	top: 30px;
	right: 24px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--luz);
	color: #1c1405;
	font-size: 0.8125rem;
	font-weight: 600;
}
.plano h3 {
	font-size: 1.5rem;
}
.plano-descricao {
	min-height: 3.3em;
	margin-top: 8px;
	color: var(--tinta-2);
	font-size: 0.9875rem;
}
.plano-destaque .plano-descricao {
	color: var(--texto-noite-2);
}
.plano-preco {
	margin-top: 20px;
	font: 600 2.75rem/1 var(--titulo);
	letter-spacing: -0.02em;
}
.plano-preco small {
	font: 400 1rem var(--corpo);
	letter-spacing: 0;
	color: var(--tinta-2);
}
.plano-destaque .plano-preco small {
	color: var(--texto-noite-2);
}
.plano-equivalente {
	margin-top: 6px;
	color: var(--tinta-2);
	font-size: 0.9375rem;
}
.plano-destaque .plano-equivalente {
	color: var(--texto-noite-2);
}
.periodos {
	display: flex;
	width: fit-content;
	margin: 0 auto 28px;
	padding: 4px;
	border: 1px solid var(--linha);
	border-radius: 999px;
	background: var(--branco);
}
.periodos[hidden] {
	display: none;
}
.periodos button {
	padding: 8px 20px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--tinta-2);
	font: 500 0.9375rem var(--corpo);
	cursor: pointer;
}
.periodos button[aria-checked='true'] {
	background: var(--mar);
	color: var(--texto-noite);
}
.periodos button span {
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--luz);
	color: #1c1405;
	font-size: 0.75rem;
	font-weight: 600;
}
.periodos button:focus-visible {
	outline: 2px solid var(--azul);
	outline-offset: 2px;
}
.plano .marcas {
	flex: 1;
	margin-block: 24px 28px;
}
/* `.marcas` tem flex:1, então os adicionais ficam alinhados no pé dos três cartões. */
.plano-adicionais {
	margin: -8px 0 24px;
	padding-top: 16px;
	border-top: 1px solid var(--linha);
	color: var(--tinta-2);
	font-size: 0.875rem;
}
.plano-destaque .plano-adicionais {
	border-color: var(--linha-noite);
	color: var(--texto-noite-2);
}
.plano-adicionais p {
	margin-bottom: 6px;
	color: var(--tinta);
	font-weight: 600;
}
.plano-destaque .plano-adicionais p {
	color: var(--texto-noite);
}
.plano-adicionais li + li {
	margin-top: 4px;
}
.plano-adicionais small {
	font-size: inherit;
	opacity: 0.8;
}
.plano .botao {
	width: 100%;
}
.planos-nota {
	margin-top: 24px;
	color: var(--tinta-2);
	font-size: 0.9375rem;
}
@media (max-width: 900px) {
	.planos {
		grid-template-columns: 1fr;
	}
	.plano-descricao {
		min-height: 0;
	}
}

/* Perguntas */
.perguntas {
	max-width: 820px;
}
.perguntas details {
	border-top: 1px solid var(--linha);
}
.perguntas details:last-child {
	border-bottom: 1px solid var(--linha);
}
.perguntas summary {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	font: 600 1.125rem/1.35 var(--corpo);
	cursor: pointer;
	list-style: none;
}
.perguntas summary::-webkit-details-marker {
	display: none;
}
.perguntas summary::after {
	content: '+';
	flex: none;
	color: var(--azul);
	font: 400 1.5rem/1 var(--titulo);
}
.perguntas details[open] summary::after {
	content: '\2212';
}
.perguntas details p {
	padding-bottom: 22px;
	color: var(--tinta-2);
}

/* Chamada final */
.final {
	background: linear-gradient(180deg, #0a4f9c, var(--noite));
	color: var(--branco);
	text-align: center;
}
.final h2 {
	max-width: 780px;
	margin-inline: auto;
	font-size: clamp(2.125rem, 4.8vw, 3.5rem);
}
.final p {
	max-width: 560px;
	margin: 18px auto 0;
	color: #d6e2ee;
	font-size: 1.1875rem;
}
.final .botoes {
	justify-content: center;
	margin-top: 32px;
}

/* Rodapé */
.rodape {
	padding-block: 48px;
	background: var(--noite);
	color: var(--texto-noite-2);
	font-size: 0.9375rem;
}
.rodape-linha {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px;
}
.rodape-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}
.rodape img {
	width: 130px;
	margin-bottom: 12px;
}
.rodape-base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--linha-noite);
	font-size: 0.8125rem;
}
/* "Software desenvolvido por" e a marca numa linha só, ao lado da razão social. */
.rodape-autoria {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--texto-noite-2);
	text-decoration: none;
}
/* Wordmark oficial (TANGERINEAI/static/brand): mínimo de 120px de largura. */
.rodape .rodape-marca {
	width: 125px;
	height: auto;
	margin: 0;
}

/* Páginas internas */
.pagina {
	background: var(--mar);
	color: var(--branco);
	padding-block: 136px 72px;
}
.pagina h1 {
	max-width: 760px;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
}
.pagina p {
	max-width: 620px;
	margin-top: 16px;
	color: var(--texto-noite-2);
	font-size: 1.1875rem;
}
.contato {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: clamp(32px, 6vw, 72px);
	align-items: start;
}
.formulario {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
.campo {
	display: grid;
	gap: 6px;
	font-size: 0.9375rem;
	font-weight: 500;
}
.campo-largo,
.formulario > p,
.formulario > .botao {
	grid-column: 1 / -1;
}
.campo input,
.campo select,
.campo textarea {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	border: 1px solid #c9c3b6;
	border-radius: 10px;
	background: var(--branco);
	color: var(--tinta);
	font: 400 1rem/1.4 var(--corpo);
}
.campo textarea {
	min-height: 140px;
	resize: vertical;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
	border-color: var(--azul);
	outline: 2px solid rgb(27 118 191 / 24%);
	outline-offset: 0;
}
.armadilha {
	position: absolute;
	left: -9999px;
}
.aviso {
	padding: 12px 14px;
	border-radius: 10px;
	background: #fdecea;
	color: #8a2118;
	font-size: 0.9375rem;
}
.consentimento {
	color: var(--tinta-2);
	font-size: 0.875rem;
}
.contato-lado h2 {
	font-size: 1.375rem;
}
.contato-lado p {
	margin-top: 8px;
	color: var(--tinta-2);
}
.contato-lado p + h2 {
	margin-top: 32px;
}
@media (max-width: 800px) {
	.contato {
		grid-template-columns: 1fr;
	}
	.formulario {
		grid-template-columns: 1fr;
	}
}

/* Entrada suave: só com JS, e nunca com movimento reduzido (ver site.js). */
@media (prefers-reduced-motion: no-preference) {
	.com-js [data-revelar]:not([data-visivel]) {
		opacity: 0;
		transform: translateY(18px);
	}
	[data-revelar] {
		transition:
			opacity 0.6s ease,
			transform 0.6s ease;
	}
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.botao {
		transition: none;
	}
}

/* Blog (páginas geradas por site/blog/gerar.mjs) */
.blog-topo {
	padding-bottom: 56px;
}
.blog-topo h1 {
	max-width: 860px;
}
.trilha {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	color: var(--texto-noite-2);
	font-size: 0.9375rem;
}
.trilha a {
	color: var(--texto-noite);
	text-underline-offset: 4px;
}
.pagina .blog-meta,
.blog-meta {
	margin-top: 20px;
	color: var(--texto-noite-2);
	font-size: 0.9375rem;
}
.secao-artigo {
	padding-block: clamp(48px, 7vw, 88px);
}
.artigo-grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(40px, 6vw, 80px);
	align-items: start;
}
.artigo {
	max-width: 720px;
	font-size: 1.125rem;
	line-height: 1.75;
}
.artigo > * + * {
	margin-top: 1.1em;
}
.artigo h2 {
	margin-top: 2.2em;
	font-size: clamp(1.625rem, 3vw, 2.125rem);
	scroll-margin-top: 96px;
}
.artigo h3 {
	margin-top: 1.8em;
	font-size: 1.3125rem;
	line-height: 1.25;
}
.artigo h2 + *,
.artigo h3 + * {
	margin-top: 0.6em;
}
.artigo ul,
.artigo ol {
	padding-left: 1.4em;
}
.artigo ul {
	list-style: disc;
}
.artigo li + li {
	margin-top: 0.4em;
}
.artigo li::marker {
	color: var(--azul);
}
.artigo a {
	color: var(--azul);
	text-underline-offset: 3px;
}
.artigo blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--luz-forte);
	color: var(--tinta-2);
}
.artigo table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
	line-height: 1.5;
}
.artigo th,
.artigo td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--linha);
	text-align: left;
	vertical-align: top;
}
.artigo th {
	background: var(--branco);
	font-weight: 600;
}
.artigo .perguntas {
	margin-top: 0.6em;
}
.artigo-sumario {
	padding: 20px 24px;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--branco);
	font-size: 1rem;
	line-height: 1.5;
}
.artigo-sumario b {
	font-family: var(--titulo);
	font-weight: 600;
}
.artigo-sumario ol {
	margin: 10px 0 0;
}
.artigo-sumario a {
	color: var(--tinta);
	text-decoration: none;
}
.artigo-sumario a:hover {
	color: var(--azul);
	text-decoration: underline;
}
.artigo-lado {
	position: sticky;
	top: 104px;
}
.artigo-cta {
	display: grid;
	gap: 12px;
	padding: 28px;
	border-radius: var(--raio);
	background: var(--noite);
	color: var(--texto-noite);
}
.artigo-cta b {
	font: 600 1.375rem/1.2 var(--titulo);
}
.artigo-cta p {
	color: var(--texto-noite-2);
	font-size: 1rem;
}
.artigo-cta .botao {
	margin-top: 6px;
	justify-content: center;
}
.artigo-cta span {
	color: var(--texto-noite-2);
	font-size: 0.875rem;
	text-align: center;
}
.blog-mais h2 {
	margin-bottom: 32px;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
}
.blog-lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 24px;
}
.blog-cartao {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--branco);
	color: var(--tinta);
	text-decoration: none;
	transition: border-color 0.2s, transform 0.2s;
}
.blog-cartao:hover {
	border-color: var(--azul);
	transform: translateY(-2px);
}
.blog-cartao h2,
.blog-cartao h3 {
	font-size: 1.375rem;
	line-height: 1.2;
}
.blog-cartao p {
	color: var(--tinta-2);
	font-size: 1rem;
}
.blog-cartao .blog-meta {
	margin-top: auto;
	color: var(--azul);
	font-size: 0.875rem;
	font-weight: 600;
}
.blog-mais .blog-cartao {
	background: var(--papel);
}
@media (max-width: 900px) {
	.artigo-grade {
		grid-template-columns: minmax(0, 1fr);
	}
	.artigo-lado {
		position: static;
	}
	.artigo {
		font-size: 1.0625rem;
	}
}
@media (max-width: 640px) {
	.artigo table {
		display: block;
		overflow-x: auto;
	}
}
@media (prefers-reduced-motion: reduce) {
	.blog-cartao {
		transition: none;
	}
}
.artigo-fontes {
	font-size: 0.9375rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}