/* ==========================================================================
   Westcode - hotsite · sistema ESTRATO
   Dark premium com profundidade. Duas ideias sustentam o arquivo:

   1. ESCADA DE SUPERFÍCIES - o que faz uma interface escura parecer cara não é
      sombra, é uma escada de superfícies com luz consistente. Fonte única
      superior: todo nível eleva combinando cor de fundo + borda de 1px +
      realce interno no topo. Nunca um sem o outro.

   2. ESCASSEZ - vidro em 3 elementos, glow em 4 lugares, âmbar só em ação.
      Se tudo brilha, nada brilha.

   A ordem de camadas define a cascata inteira: nenhuma regra precisa de
   !important para vencer outra.
   ========================================================================== */

@layer tokens, base, layout, components, motion, state, responsive;

/* Propriedades tipadas: sem registro, o gradiente do spotlight salta em vez
   de deslizar. */
@property --mx {
	syntax: '<length>';
	inherits: false;
	initial-value: 50%;
}

@property --my {
	syntax: '<length>';
	inherits: false;
	initial-value: 50%;
}

/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
	:root {
		/* --- Escada de superfícies (único lugar com hexadecimal) --- */
		--s0: #080B14;
		/* poço - fundo do documento */
		--s1: #0D1220;
		/* base - corpo das seções */
		--s2: #131A2B;
		/* placa - cards */
		--s3: #1B2238;
		/* elevada - anoitecer, agora promovido a superfície ativa */

		--amber: #F2A341;
		--amber-lo: #F8C179;
		--clay: #E0704A;
		--azure: #4A6FA5;
		--mint: #7EE0A6;
		--whatsapp: #25D366;

		/* Texto: areia como primário. Branco puro nunca aparece. */
		--tx: #F4F1EA;
		--tx-2: #B9C0CF;
		--tx-3: #7F8899;

		--line: rgba(244, 241, 234, .07);
		--line-2: rgba(244, 241, 234, .11);
		--line-3: rgba(244, 241, 234, .18);

		/* Superfícies e acento, em nome semântico. O âmbar da MARCA continua
       em --amber (fundo de botão, onde o texto escuro por cima resolve o
       contraste). O --accent é o âmbar usado como TEXTO/traço, e precisa
       escurecer em fundo claro: #F2A341 sobre areia dá 1.8:1. */
		--surface: var(--s1);
		--surface-cell: var(--s2);
		--surface-cell-hi: var(--s3);
		--accent: var(--amber);
		--accent-quiet: var(--clay);
		--spot-rgb: 242, 163, 65;

		/* --- Luz: realce superior + sombra, sempre em par --- */
		--lift-1: inset 0 1px 0 rgba(255, 255, 255, .04);
		--lift-2: inset 0 1px 0 rgba(255, 255, 255, .07), 0 16px 40px -20px rgba(2, 4, 10, .8);
		--lift-3: inset 0 1px 0 rgba(255, 255, 255, .09), 0 48px 100px -44px rgba(2, 4, 10, .95), 0 8px 28px -14px rgba(2, 4, 10, .7);
		--glow: 0 14px 44px -14px rgba(242, 163, 65, .5);

		/* --- Tipografia --- */
		--f-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
		--f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
		--f-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

		/* Travas fluidas calculadas entre 390px e 1440px.
       display 36>60 · h2 28>40 · h3 17>20 · lead 16>18 */
		--fs-display: clamp(2.25rem, 1.693rem + 2.286vw, 3.75rem);
		--fs-h2: clamp(1.75rem, 1.471rem + 1.143vw, 2.5rem);
		--fs-h3: clamp(1.0625rem, 0.993rem + 0.286vw, 1.25rem);
		--fs-lead: clamp(1rem, 0.954rem + 0.190vw, 1.125rem);
		--fs-sm: .9375rem;
		--fs-xs: .8125rem;
		--fs-lbl: .6875rem;

		/* Tracking como função inversa do tamanho */
		--tr-display: -.042em;
		--tr-title: -.022em;
		--tr-lbl: .18em;

		/* --- Espaço: baseline de 8px --- */
		--u: .5rem;
		--sp-1: calc(var(--u) * .5);
		--sp-2: var(--u);
		--sp-3: calc(var(--u) * 1.5);
		--sp-4: calc(var(--u) * 2);
		--sp-5: calc(var(--u) * 3);
		--sp-6: calc(var(--u) * 4);
		--sp-7: calc(var(--u) * 6);
		--sp-8: calc(var(--u) * 8);
		--sp-9: calc(var(--u) * 12);
		--sp-10: calc(var(--u) * 16);

		--w-max: 1220px;
		--w-narrow: 60rem;
		--gutter: clamp(1.25rem, .55rem + 2.9vw, 4.5rem);
		--sec-py: clamp(3.5rem, 1.8rem + 7vw, 8rem);
		--nav-h: 76px;
		--measure: 64ch;

		--r-sm: 8px;
		--r-md: 14px;
		--r-lg: 22px;
		--r-pill: 999px;

		/* --- Movimento --- */
		--d-1: 140ms;
		--d-2: 260ms;
		--d-3: 620ms;
		--stag: 70ms;
		--e-out: cubic-bezier(.16, 1, .3, 1);
		--e-std: cubic-bezier(.4, 0, .2, 1);
		--e-spring: cubic-bezier(.34, 1.4, .5, 1);
	}

	/* --- Superfície CLARA -------------------------------------------------
     Redefine o conjunto semântico inteiro. Como nenhum componente toca cor
     primitiva, a seção inverte sozinha e a falha de contraste vira
     impossível por construção. Razões medidas sobre a areia #F5F2EC:
       texto #1B2238 = 13.0:1 · secundário #454B5E = 7.6:1
       terciário #5C6378 = 5.2:1 · acento #8F5A0B = 5.1:1 · poente #A6421F = 5.4:1
     A luz também inverte: em superfície clara o realce superior é branco. */
	.sec--light {
		--surface: #F5F2EC;
		--surface-cell: #FFFFFF;
		--surface-cell-hi: #FFFFFF;

		--tx: #1B2238;
		--tx-2: #454B5E;
		--tx-3: #5C6378;

		--line: rgba(27, 34, 56, .11);
		--line-2: rgba(27, 34, 56, .17);
		--line-3: rgba(27, 34, 56, .26);

		--accent: #8F5A0B;
		--accent-quiet: #A6421F;
		/* "A Linha" (#servicos): mesma família --clay/--azure/--mint da marca,
       escurecida pra 4.5:1+ sobre --surface - as versões puras dão 2.8:1
       (clay) e 1.4:1 (mint), reprovam AA em texto pequeno. */
		--azure-quiet: #3D628F;
		--mint-quiet: #1E7A4E;
		--spot-rgb: 143, 90, 11;

		--lift-1: inset 0 1px 0 rgba(255, 255, 255, .9);
		--lift-2: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 30px -16px rgba(27, 34, 56, .26);
		--lift-3: inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 60px -28px rgba(27, 34, 56, .34);
		--glow: 0 14px 40px -14px rgba(242, 163, 65, .45);
	}
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
		padding: 0;
	}

	html {
		scroll-behavior: smooth;
		scroll-padding-top: calc(var(--nav-h) + var(--sp-5));
		-webkit-text-size-adjust: 100%;
	}

	body {
		background: var(--s1);
		color: var(--tx);
		font-family: var(--f-body);
		font-size: 1rem;
		line-height: 1.625;
		font-variation-settings: 'opsz' 16;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
		overflow-x: hidden;
	}

	/* ESTE é o fundo que você vê na primeira seção.
     Não está em `.hero` - está aqui, num pseudo-elemento fixo do body. Para
     inspecionar no DevTools: selecione <body> e clique no nó `::before`.

     Ponto claro embaixo (50% 100%): a dobra fica ESCURA EM CIMA e mais clara
     descendo. O header transparente no topo se apoia justamente na parte
     escura, o que mantém o texto branco legível sem precisar de fundo. */
	body::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -2;
		pointer-events: none;
		background: radial-gradient(130% 100% at 50% 100%, #2C3757 0%, var(--s3) 30%, var(--s1) 62%, var(--s0) 100%);
	}

	/* Grade blueprint: a textura que dá leitura de "prancha técnica" ao fundo. */
	body::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background-image:
			linear-gradient(rgba(130, 142, 175, .05) 1px, transparent 1px),
			linear-gradient(90deg, rgba(130, 142, 175, .05) 1px, transparent 1px);
		background-size: 54px 54px;
		-webkit-mask-image: radial-gradient(85% 75% at 50% 78%, #000 12%, transparent 100%);
		mask-image: radial-gradient(85% 75% at 50% 78%, #000 12%, transparent 100%);
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	img,
	svg,
	canvas {
		display: block;
		max-width: 100%;
	}

	img {
		height: auto;
	}

	ul,
	ol {
		list-style: none;
	}

	button,
	input,
	textarea {
		font: inherit;
		color: inherit;
	}

	button {
		background: none;
		border: 0;
		cursor: pointer;
	}

	h1,
	h2,
	h3,
	h4,
	h5 {
		font-family: var(--f-display);
		font-weight: 600;
		letter-spacing: var(--tr-title);
		line-height: 1.22;
	}

	h1,
	h2,
	h3,
	p {
		text-wrap: pretty;
	}

	::selection {
		background: var(--amber);
		color: var(--s1);
	}

	:where(a, button, summary, input, textarea, [tabindex]):focus-visible {
		outline: 2px solid var(--accent);
		outline-offset: 3px;
		border-radius: var(--r-sm);
	}
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
	.container {
		width: 100%;
		max-width: var(--w-max);
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	.container--narrow {
		max-width: var(--w-narrow);
	}

	/* Antes ia de borda a borda (1905px em 1920) e ficava largo demais.
     Agora respeita o mesmo container do resto da pagina. */
	.bleed {
		width: 100%;
		max-width: var(--w-max);
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	main {
		display: block;
	}

	.sec {
		position: relative;
		padding-block: var(--sec-py);
		background: var(--surface);
		color: var(--tx);
	}

	/* Só #servicos pede um respiro menor: as abas + as paradas da linha já
	   entregam bastante altura por conta própria, e o degrau clara→escura
	   antes/depois deste bloco fica mais lido apertando aqui. */
	#servicos {
		padding-block: clamp(2.25rem, 1.1rem + 4vw, 4.5rem);
	}

	/* Superfície um degrau acima, para alternância sem sair do dark. */
	.sec--raised {
		--surface: var(--s2);
	}

	/* --- Seção-tela: #diagnostico, #cases e #contato ----------------------
	   As três ocupam exatamente uma tela e centram o conteúdo na vertical, em
	   vez de cada uma terminar numa altura arbitrária. `svh` (e não `vh`) para
	   a barra do navegador móvel não empurrar o rodapé da seção pra fora.

	   O respiro vertical passa a ser proporcional à ALTURA da janela
	   (`svh` no clamp) e não mais à largura: numa seção que se compromete a
	   caber na tela, é a altura que manda. O piso de 2rem é o que impede o
	   conteúdo de encostar na borda em notebook de tela baixa; o teto de 5rem
	   evita que numa tela muito alta o padding coma o centro.

	   min-height só entra a partir de 64rem de largura E 40rem de altura: no
	   celular o conteúdo dessas seções é naturalmente mais alto que a tela, e
	   prender a altura só criaria buraco ou corte. Ver camada `responsive`. */
	.sec--screen {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-block: clamp(2rem, 5svh, 5rem);
	}

	/* Moldura clara do bloco de contato. Só o --surface muda: o cartão .diag
	   (glass) não lê essa variável - continua com o vidro escuro de sempre,
	   agora como uma peça de contraste sobre fundo claro em vez de mais uma
	   seção inteira escura. */
	.sec--contato {
		--surface: #F5F2EC;
	}

	.sec--raised::before,
	.sec--contato::before {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: radial-gradient(100% 55% at 50% 0%, rgba(255, 255, 255, .028), transparent 72%);
	}

	/* Sobre fundo claro o halo âmbar precisa de mais corpo para não desaparecer
	   contra o creme - a mesma regra em .aura--contato usa opacidade calibrada
	   para o fundo escuro que essa seção não tem mais. */
	.sec--contato .aura--contato {
		background: radial-gradient(ellipse, rgba(242, 163, 65, .16), transparent 66%);
	}

	.sec>* {
		position: relative;
	}

	.sec[id] {
		scroll-margin-top: var(--nav-h);
	}

	/* O alvo da âncora é a borda da seção, mas o que o visitante precisa ver é
	   o cabeçalho dela - com o padding de topo somado à nav e ao scroll-padding
	   do html, o link parava com o cabeçalho no meio da tela. Descontar o
	   padding faz a parada cair exatamente nele. (#servicos fica de fora: tem
	   padding próprio, menor, e a parada dele já está calibrada.) */
	#faq {
		scroll-margin-top: calc(-1 * var(--sec-py));
	}

	/* Uma seção-tela mede exatamente uma tela: a parada certa é a BORDA dela,
	   não um ponto adiantado dentro do conteúdo. O valor negativo aqui só
	   cancela o scroll-padding-top do html (nav + respiro) - sem ele a âncora
	   pararia 100px antes e a seção não fecharia na tela. */
	/* [id] no seletor não é decoração: `.sec[id]` logo acima vale (0,2,0) e
	   `.sec--screen` sozinho valeria (0,1,0) - perderia a disputa e a regra
	   viraria letra morta. Com o atributo os dois empatam e ganha quem vem
	   depois, que é esta. */
	.sec--screen[id] {
		scroll-margin-top: calc(-1 * (var(--nav-h) + var(--sp-5)));
	}

	/* --- Glows: gradientes ESTÁTICOS. Nunca animo filter:blur em área grande. */
	.aura {
		position: absolute;
		pointer-events: none;
		z-index: 0;
		border-radius: 50%;
	}

	.aura--hero {
		right: -8%;
		top: 6%;
		width: min(52vw, 680px);
		aspect-ratio: 1;
		background: radial-gradient(circle, rgb(242 163 65 / 7%), transparent 62%);
	}

	.aura--contato {
		left: 50%;
		top: 12%;
		translate: -50% 0;
		width: min(80vw, 900px);
		aspect-ratio: 1.6;
		background: radial-gradient(ellipse, rgba(242, 163, 65, .10), transparent 66%);
	}

	/* --- Cabeçalho de seção: 12 colunas com vazio deliberado --- */
	.sec-head {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--sp-6);
		row-gap: var(--sp-5);
		align-items: end;
		margin-bottom: clamp(var(--sp-7), 5vw, var(--sp-9));
		padding-bottom: var(--sp-6);
		border-bottom: 1px solid var(--line);
	}

	.sec-head .sec-kicker {
		grid-column: 1 / -1;
	}

	.sec-head .sec-title {
		grid-column: 1 / 8;
	}

	.sec-head .sec-sub {
		grid-column: 9 / -1;
	}

	.sec-head--stack .sec-title {
		grid-column: 1 / -1;
	}

	.sec-kicker {
		display: flex;
		align-items: center;
		gap: var(--sp-3);
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		font-weight: 500;
		letter-spacing: var(--tr-lbl);
		text-transform: uppercase;
		color: var(--accent);
		margin-bottom: var(--sp-5);
	}

	.sec-kicker::after {
		content: "";
		flex: 1;
		height: 1px;
		background: currentColor;
		opacity: .26;
	}

	.sec-title {
		font-family: var(--f-display);
		font-weight: 700;
		font-size: var(--fs-h2);
		letter-spacing: var(--tr-display);
		line-height: 1.06;
	}

	.sec-sub {
		font-size: var(--fs-lead);
		line-height: 1.5;
		color: var(--tx-2);
		max-width: var(--measure);
	}

	/* Cabeçalho dentro de seção-tela: o respiro depois do título vira função
	   da altura da janela, igual ao padding da seção. Numa página normal ele
	   pode ser generoso; aqui cada pixel gasto no cabeçalho é um pixel que
	   falta pro conteúdo caber sem rolagem. */
	.sec--screen .sec-head {
		margin-bottom: clamp(var(--sp-4), 3.4svh, var(--sp-7));
		padding-bottom: clamp(var(--sp-3), 2svh, var(--sp-5));
	}

}

/* ==========================================================================
   COMPONENTES
   ========================================================================== */
@layer components {

	/* --- Marca --- */
	.wordmark {
		font-family: var(--f-display);
		font-weight: 700;
		font-size: 1.5rem;
		letter-spacing: var(--tr-display);
		line-height: 1;
		white-space: nowrap;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: var(--tx);
	}

	.wordmark-icon {
		height: 28px;
		width: 28px;
		border-radius: 6px;
		flex-shrink: 0;
	}

	.wordmark .code {
		color: var(--accent);
	}

	.wordmark--ft {
		cursor: default;
		font-size: 1.7rem;
		display: inline-flex;
		align-items: center;
	}

	.wordmark--ft .wordmark-icon {
		height: 30px;
		width: 30px;
		border-radius: 7px;
	}

	
	
	
	.amber {
		color: var(--accent);
	}

	/* Em fundo claro o âmbar da marca vira MARCAÇÃO, não cor de texto: como
     texto ele daria 1.8:1, e o marrom escuro que passaria em contraste
     perderia a vivacidade da marca. Sublinhado guarda as duas coisas -
     texto em 13:1 e o âmbar vivo presente. */
	.sec--light .amber {
		color: var(--tx);
		text-decoration: underline;
		text-decoration-color: var(--amber);
		text-decoration-thickness: .075em;
		text-underline-offset: .14em;
	}

	/* --- Navegação: VIDRO 1 de 3 --- */
	/* Duas cores, e so duas. No topo o header e transparente e deixa o hero
     (gradiente + particulas) passar por baixo. Ao primeiro scroll assume o
     creme claro (mesma superfície de #servicos, a seção que fica logo
     abaixo do hero) e NAO muda mais, seja a secao clara ou escura por trás.
     As variáveis --tx/--tx-2/--tx-3/--accent são redefinidas aqui porque o
     header não é filho de nenhuma .sec--light: sem isso o texto claro do
     estado transparente ficaria ilegível sobre o novo fundo claro. */
	header.nav {
		position: sticky;
		top: 0;
		z-index: 60;
		background: transparent;
		border-bottom: 1px solid transparent;
		transition: background-color var(--d-2) var(--e-std), border-color var(--d-2) var(--e-std), box-shadow var(--d-2) var(--e-std);
	}

	header.nav.is-scrolled {
		background: #F5F2EC;
		border-bottom-color: rgba(27, 34, 56, .12);
		box-shadow: 0 12px 32px -18px rgba(27, 34, 56, .18);
		--tx: #1B2238;
		--tx-2: #454B5E;
		--tx-3: #5C6378;
		--line: rgba(27, 34, 56, .11);
		--line-2: rgba(27, 34, 56, .17);
		--line-3: rgba(27, 34, 56, .26);
		--accent: #8F5A0B;
	}

	.nav-progress {
		position: absolute;
		left: 0;
		right: 0;
		bottom: -1px;
		height: 2px;
		transform: scaleX(0);
		transform-origin: 0 50%;
		background: linear-gradient(90deg, var(--clay), var(--accent));
		pointer-events: none;
	}

	.nav-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-5);
		height: var(--nav-h);
	}

	.nav-links {
		display: flex;
		align-items: center;
		gap: var(--sp-6);
	}

	.nav-link {
		position: relative;
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		letter-spacing: .12em;
		color: #cececede;
		transition: color var(--d-2) var(--e-std);
	}

	/* Sobre o creme do header rolado, o cinza claro pensado para o hero escuro
     vira ilegível - troca pelo --tx-3 já redefinido em .is-scrolled. */
	header.nav.is-scrolled .nav-link {
		color: var(--tx-3);
	}

	.nav-link::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1px;
		background: var(--accent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--d-2) var(--e-out);
	}

	.nav-link:hover,
	.nav-link.is-current {
		color: var(--tx);
	}

	.nav-link:hover::after,
	.nav-link.is-current::after {
		transform: scaleX(1);
	}

	.nav-toggle {
		display: none;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		color: var(--tx);
		margin-right: calc(var(--sp-2) * -1);
	}

	.nav-toggle svg {
		width: 26px;
		height: 26px;
	}

	/* --- Botões --- */
	.btn {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--sp-2);
		min-height: 48px;
		padding: .875rem 1.5rem;
		border: 1px solid transparent;
		border-radius: var(--r-sm);
		font-weight: 600;
		font-size: var(--fs-sm);
		line-height: 1.2;
		overflow: hidden;
		/* --mgx/--mgy vêm do JS (magnetismo); o CSS decide a amplitude. */
		translate: var(--mgx, 0) var(--mgy, 0);
		transition: translate var(--d-2) var(--e-spring), background-color var(--d-2) var(--e-std), border-color var(--d-2) var(--e-std), box-shadow var(--d-2) var(--e-std);
	}

	.btn svg {
		width: 18px;
		height: 18px;
		flex: none;
	}

	.btn-amber {
		background: var(--amber);
		color: var(--s1);
		box-shadow: var(--lift-1);
	}

	.btn-amber:hover {
		background: var(--amber-lo);
		box-shadow: var(--lift-1), var(--glow);
	}

	
	
	.nav-cta {
		min-height: 42px;
		padding: .6875rem 1.125rem;
	}

	.nav-links .nav-cta,
	.nav-links .nav-cta:hover {
		color: var(--s1);
	}

	/* --- Hero --- */
	/* A dobra NÃO ocupa a tela inteira: o desconto de 5rem abaixo do viewport é
     o que deixa a faixa de números aparecer por baixo e sinalizar que a página
     continua. `svh` para o mobile não contar a barra do navegador. */
	.hero {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: calc(92svh - var(--nav-h) - 5rem);
		padding-block: clamp(1.25rem, .6rem + 2.2vw, 2.5rem);
		overflow: hidden;
		perspective: 1200px;
	}

	.hero-motif {
		position: absolute;
		inset: -6%;
		z-index: 0;
		pointer-events: none;
		opacity: 0.25;
	}

	/* Partículas visíveis: a máscara antes apagava 20% da largura e a opacidade
     de .32 sobre fundo quase preto tornava o campo imperceptível. */
	#particles {
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		opacity: .75;
		-webkit-mask-image: linear-gradient(105deg, transparent 2%, #000 42%);
		mask-image: linear-gradient(105deg, transparent 2%, #000 42%);
	}

	.hero-grid {
		position: relative;
		z-index: 2;
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--sp-6);
		row-gap: clamp(var(--sp-7), 6vw, var(--sp-9));
		align-items: center;
	}

	.hero-copy {
		grid-column: 1 / 7;
	}

	/* min-width: 0 é obrigatório: sem ele o `max-content` da trilha do carrossel
     atravessa o item de grade e estoura a coluna. */
	.hero-grid>.hero-side {
		grid-column: 8 / -1;
		min-width: 0;
	}

	.eyebrow {
		display: block;
		padding-top: var(--sp-4);
		margin-bottom: var(--sp-5);
		border-top: 1px solid var(--line);
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		letter-spacing: .06em;
		color: var(--tx-3);
		max-width: 52ch;
	}

	.eyebrow b {
		color: var(--accent);
		font-weight: 500;
	}

	.hero-title {
		font-family: var(--f-display);
		font-weight: 700;
		/* 0.87x: a linha "gargalos operacionais" só cabe em uma linha da coluna
		   de 6/12 com o display no tamanho reduzido - ver hero-lead abaixo. */
		font-size: calc(var(--fs-display) * .87);
		line-height: .98;
		letter-spacing: var(--tr-display);
		max-width: 22ch;
	}

	.hero-lead {
		margin-top: var(--sp-5);
		max-width: 72ch;
		/* 0.9x junto com a quebra depois de "Apenas" (ver view) é o que fecha
		   em 2 linhas dentro da coluna de 6/12. */
		font-size: calc(var(--fs-lead) * .9);
		line-height: 1.5;
		color: var(--tx-2);
	}

	.hero-actions {
		margin-top: var(--sp-6);
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-3);
	}

	.hero-trust {
		margin-top: var(--sp-5);
		padding-top: var(--sp-4);
		/* border-top: 1px solid var(--line); */
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		letter-spacing: .06em;
		color: var(--tx-3);
		max-width: 44ch;
	}

	.hero-trust b {
		color: var(--accent);
		font-weight: 500;
	}

	/* --- Cartão de código: VIDRO 2 de 3 --- */
	.glass {
		background: color-mix(in srgb, var(--s0) 70%, transparent);
		backdrop-filter: blur(14px) saturate(1.6);
		-webkit-backdrop-filter: blur(14px) saturate(1.6);
		border: 1px solid var(--line-3);
		box-shadow: var(--lift-3);
	}

	.code-card {
		border-radius: var(--r-lg);
		overflow: hidden;
		transform-style: preserve-3d;
		will-change: transform;
		rotate: y calc(var(--tx-deg, 0) * 1deg);
		transition: rotate var(--d-2) var(--e-std);
	}

	.code-top {
		display: flex;
		align-items: center;
		gap: var(--sp-2);
		padding: var(--sp-4) var(--sp-5);
		border-bottom: 1px solid var(--line);
	}

	.code-dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
	}

	.code-dot--clay {
		background: var(--clay);
	}

	.code-dot--amber {
		background: var(--accent);
	}

	.code-dot--azure {
		background: var(--azure);
	}

	.code-file {
		margin-left: var(--sp-3);
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		letter-spacing: .06em;
		color: var(--tx-3);
	}

	.code-body {
		padding: var(--sp-6);
		font-family: var(--f-mono);
		font-size: var(--fs-xs);
		line-height: 2;
		color: var(--tx-2);
		overflow-x: auto;
	}

	.code-body .k {
		color: var(--accent);
	}

	.code-body .s {
		color: var(--clay);
	}

	.code-body .c {
		color: var(--tx-3);
	}

	/* --- Mock de sistema web dentro da "tela" do computador ---------------
     Reaproveita .code-card/.glass/.code-top/.code-dot/.code-file como
     moldura da janela (mesmo vidro, mesmo tilt); só o miolo muda: navegação
     por abas troca entre 3 telas de um app fake (dashboard, clientes,
     sprint), tudo clicável, sem framework - ver initAppMock() em hotsite.js. */
	.app-mock {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Selo flutuando sobre o mockup, tipo "sticker" de destaque colado na tela. */
	.float-badge {
		position: absolute;
		top: 310px;
		left: -100px;
		z-index: 4;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		max-width: 350px;
		padding: 11px 18px 11px 14px;
		border-radius: var(--r-lg);
		rotate: -3deg;
		font-family: var(--f-body);
		font-size: .8125rem;
		font-weight: 600;
		line-height: 1.25;
		letter-spacing: -.005em;
		box-shadow: var(--lift-2);
	}

	.float-badge--amber {
		color: #ffffff;
		border: solid #F2A341 0px;
		/* background-color: #F2A341; */
		background: color-mix(in srgb, var(--accent) 16%, transparent);
		backdrop-filter: blur(5px);
	}

	.float-badge-emoji {
		flex: none;
		font-size: 1.9em;
	}

	/* Janela de tamanho fixo (um pouco mais larga que alta), como um monitor de
     verdade - não infla com o conteúdo da tela ativa. `rotate` no .code-card
     já cria containing block pra posicionar o cursor-robô por transform. */
	.app-mock .code-card {
		cursor: default;
		width: 440px;
		height: 340px;
		max-width: 100%;
		/* Coluna flex: a barra de título tem altura própria e o corpo do app
		   ocupa exatamente o que sobra. Antes o corpo se media por
		   aspect-ratio (6/5 = 365px de altura numa janela de 289px úteis) e os
		   76px de diferença eram simplesmente cortados pelo overflow do
		   cartão - o menu lateral terminava sem fundo, no meio do nada. */
		display: flex;
		flex-direction: column;
	}

	.app-mock .code-top {
		flex: 0 0 auto;
	}

	/* --- Cursor-robô: demo autônoma do mock, ver initBotCursor() no JS.
     left/top ficam presos em 0 e todo o deslocamento é por `translate` -
     única propriedade que a seção MOMENTOS-ASSINATURA autoriza animar a
     cada quadro. Maior que um cursor de verdade e na cor da marca: é
     decoração, não deveria ser confundido com o ponteiro real do visitante. */
	.bot-cursor {
		position: absolute;
		left: 0;
		top: 0;
		width: 22px;
		height: 22px;
		translate: -999px -999px;
		opacity: 0;
		pointer-events: none;
		z-index: 5;
		filter: drop-shadow(0 3px 6px rgba(2, 4, 10, .55));
		transition: opacity var(--d-2) var(--e-std);
	}

	.bot-cursor.is-visible {
		opacity: 1;
	}

	.bot-cursor svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	.bot-cursor path {
		fill: var(--amber);
		stroke: rgba(8, 11, 20, .6);
		stroke-width: 1.4;
		stroke-linejoin: round;
	}

	/* Sinônimos de :hover que o cursor falso aciona por classe: dispatch de
     evento sintético não liga o pseudo-elemento :hover de verdade (quem
     decide é o SO, não o JS), então pra "acender" o mesmo destaque que um
     mouse real acenderia, a animação alterna essas classes em vez de
     depender do :hover. Ver initBotCursor(). */

	.app-body {
		display: flex;
		flex: 1 1 auto;
		min-height: 0;
		overflow: hidden;
	}

	.app-nav {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		gap: var(--sp-1);
		padding: var(--sp-4) var(--sp-3);
		border-right: 1px solid var(--line);
		background: color-mix(in srgb, var(--s0) 35%, transparent);
	}

	.app-nav-btn {
		display: flex;
		align-items: center;
		gap: var(--sp-2);
		padding: var(--sp-2) var(--sp-3);
		border-radius: var(--r-sm);
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		letter-spacing: .04em;
		color: var(--tx-3);
		white-space: nowrap;
		transition: background-color var(--d-2) var(--e-std), color var(--d-2) var(--e-std);
	}

	.app-nav-btn svg {
		flex: 0 0 auto;
		opacity: .8;
	}

	.app-nav-btn:hover {
		color: var(--tx-2);
		background: var(--line);
	}

	.app-nav-btn.is-active {
		color: var(--accent);
		background: color-mix(in srgb, var(--accent) 14%, transparent);
	}

	.app-screens {
		flex: 1 1 auto;
		min-width: 0;
		min-height: 0;
		padding: var(--sp-4);
		padding-top: 20px;
		overflow: hidden;
		display: flex;
	}

	.app-screen {
		display: none;
		width: 100%;
	}

	.app-screen.is-active {
		display: flex;
		flex-direction: column;
		min-height: 0;
		animation: appScreenIn .3s var(--e-std);
	}

	@keyframes appScreenIn {
		from {
			opacity: 0;
			translate: 0 4px;
		}

		to {
			opacity: 1;
			translate: 0 0;
		}
	}

	.app-kpis {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--sp-4);
		margin-bottom: var(--sp-5);
	}

	.app-kpi {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.app-kpi-lbl {
		font-family: var(--f-mono);
		font-size: .625rem;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--tx-3);
	}

	.app-kpi-val {
		font-family: var(--f-display);
		font-size: 1.15rem;
		font-weight: 700;
		color: var(--tx);
		line-height: 1.15;
	}

	.app-kpi-sub {
		font-family: var(--f-mono);
		font-size: .625rem;
		color: var(--tx-3);
	}

	.app-kpi-sub--amber {
		color: var(--accent);
	}

	.app-chart {
		width: 100%;
		height: 84px;
		display: block;
		overflow: visible;
	}

	.app-chart-line {
		fill: none;
		stroke: var(--accent);
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.app-chart-fill {
		fill: color-mix(in srgb, var(--accent) 16%, transparent);
		stroke: none;
	}

	.app-table-head,
	.app-table li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--sp-2) 0;
	}

	.app-table-head {
		flex: 0 0 auto;
		font-family: var(--f-mono);
		font-size: .625rem;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--tx-3);
		border-bottom: 1px solid var(--line);
		padding-right: var(--sp-2);
	}

	/* Só a lista rola (efeito parallax de app de verdade): cabeçalho e botão
     "+ novo cliente" ficam fixos, a tabela ganha uma altura própria por
     dentro da tela fixa do monitor. Trilho fino em âmbar - discreto o
     bastante pra não competir com o conteúdo, mas visível o bastante pra
     avisar que aquele bloco rola por dentro da "tela" do app. padding-right
     abre um respiro pro conteúdo não colar no trilho; o cabeçalho ganha o
     mesmo respiro (acima) pra continuar alinhado com as linhas de baixo. */
	.app-table {
		/* flex: 1 1 auto; */
		min-height: 0;
		overflow-y: auto;
		overflow-x: hidden;
		list-style: none;
		margin: 0;
		padding: 0;
		padding-right: var(--sp-2);
		scrollbar-width: thin;
		scrollbar-color: color-mix(in srgb, var(--accent) 55%, transparent) transparent;
	}

	.app-table::-webkit-scrollbar {
		width: 4px;
	}

	.app-table::-webkit-scrollbar-track {
		background: transparent;
	}

	.app-table::-webkit-scrollbar-thumb {
		background: color-mix(in srgb, var(--accent) 55%, transparent);
		border-radius: 999px;
	}

	.app-table::-webkit-scrollbar-thumb:hover {
		background: var(--accent);
	}

	/* Mesmo hover do menu lateral (.app-nav-btn:hover): fundo --line, texto
     sobe pra --tx. Sangra 1 "sp-2" pras bordas com margem negativa, senão o
     fundo do hover ficaria mais estreito que a linha divisória embaixo. */
	.app-table li {
		font-size: var(--fs-xs);
		color: var(--tx-2);
		border-bottom: 1px solid var(--line);
		margin-inline: calc(var(--sp-2) * -1);
		padding-inline: var(--sp-2);
		border-radius: var(--r-sm);
		transition: background-color var(--d-2) var(--e-std), color var(--d-2) var(--e-std);
	}

	.app-table li:hover,
	.app-table li.is-bot-hover {
		background: var(--line);
		color: var(--tx);
	}

	.app-table li:last-child {
		border-bottom: 0;
	}

	.app-chip {
		font-family: var(--f-mono);
		font-size: .625rem;
		letter-spacing: .04em;
		padding: 3px 9px;
		border-radius: 999px;
		white-space: nowrap;
	}

	.app-chip--ok {
		color: var(--accent);
		background: color-mix(in srgb, var(--accent) 14%, transparent);
	}

	.app-chip--wait {
		color: var(--azure);
		background: color-mix(in srgb, var(--azure) 18%, transparent);
	}

	.app-mini-btn {
		flex: 0 0 auto;
		align-self: flex-end;
		margin-top: var(--sp-3);
		font-family: var(--f-mono);
		font-size: .6875rem;
		letter-spacing: .04em;
		color: var(--accent);
		border: 1px dashed var(--line-3);
		border-radius: var(--r-sm);
		padding: var(--sp-2) var(--sp-3);
		transition: background-color var(--d-2) var(--e-std), border-color var(--d-2) var(--e-std), scale var(--d-1) var(--e-std);
	}

	.app-mini-btn:hover,
	.app-mini-btn.is-bot-hover {
		background: color-mix(in srgb, var(--accent) 10%, transparent);
		border-color: var(--accent);
	}

	/* Sensação de "foi clicado de verdade": :active cobre o clique humano;
     is-bot-press é o sinônimo pro cursor falso, que não gera :active real
     (evento sintético não passa por mousedown). Mesmo squish nos dois. */
	.app-mini-btn:active,
	.app-mini-btn.is-bot-press {
		scale: .94;
		background: color-mix(in srgb, var(--accent) 16%, transparent);
	}

	.app-kanban {
		flex: 1 1 auto;
		min-height: 0;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--sp-3);
	}

	.app-kanban-col {
		display: flex;
		flex-direction: column;
		gap: var(--sp-2);
		min-height: 0;
		overflow-y: auto;
		border-radius: var(--r-sm);
		outline: 1px dashed transparent;
		outline-offset: 3px;
		transition: outline-color var(--d-2) var(--e-std), background-color var(--d-2) var(--e-std);
	}

	/* Contorno neutro só de passar o mouse pela coluna (dica discreta de zona
     de soltar); o âmbar fica reservado pro card em si (.app-card:hover) e
     pra coluna recebendo o card de verdade durante o arraste. */
	.app-kanban-col:hover {
		outline-color: var(--line-3);
	}

	.app-kanban-col.is-dragover {
		outline-color: var(--accent);
		background: color-mix(in srgb, var(--accent) 8%, transparent);
	}

	.app-kanban-col p {
		font-family: var(--f-mono);
		font-size: .5625rem;
		letter-spacing: .06em;
		text-transform: uppercase;
		text-align: center;
		color: var(--tx-3);
		padding-bottom: var(--sp-2);
		border-bottom: 1px solid var(--line);
	}

	/* Cursor de "mão fechando" ao segurar: sinaliza que o card é arrastável
     sem precisar de setas - arraste nativo, sem lib. */
	.app-card {
		background: var(--s2);
		border: 1px solid var(--line-2);
		border-radius: var(--r-sm);
		padding: var(--sp-1) var(--sp-2);
		font-size: .625rem;
		line-height: 1.3;
		color: var(--tx-2);
		cursor: grab;
		animation: appScreenIn .3s var(--e-std);
		transition: opacity var(--d-2) var(--e-std), box-shadow var(--d-2) var(--e-std), border-color var(--d-2) var(--e-std), background-color var(--d-2) var(--e-std);
	}

	.app-card:hover,
	.app-card.is-bot-hover {
		border-color: var(--accent);
		background: color-mix(in srgb, var(--accent) 10%, var(--s2));
	}

	.app-card:active {
		cursor: grabbing;
	}

	.app-card.is-dragging {
		opacity: .4;
		box-shadow: none;
	}

	/* "Pé" do monitor: transforma o cartão de vidro numa tela sobre uma base,
     reforçando a leitura de "computador ligado" sem precisar de imagem. */
	
	
	/* --- Fileira de logos em rolagem contínua ---
     Só entram marcas de fundo transparente, achatadas em branco translúcido
     (ver .marquee-row img) - as de fundo sólido virariam um bloco chapado. */
	.marquee-wrap {
		margin-top: calc(clamp(var(--sp-5), 2.4vw, var(--sp-6)) + var(--sp-3));
		margin-left: calc(var(--sp-2) * -1);
	}

	
	/* Esvanecimento nas duas pontas por MÁSCARA, não por gradiente sobreposto:
     assim funciona por cima das partículas sem precisar saber a cor do fundo. */
	.marquee {
		overflow: hidden;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	}

	.marquee-track {
		display: flex;
		width: max-content;
		animation: marquee var(--marquee-duration, 26s) linear infinite;
	}

	/* -50% = exatamente uma das duas cópias, então o laço não tem emenda. */
	@keyframes marquee {
		to {
			transform: translateX(-50%);
		}
	}

	/* padding-right (não gap no .marquee-track) porque o loop depende de
     ul1 e ul2 terem EXATAMENTE a mesma largura - um gap no pai quebra a
     matemática do -50% no keyframe (ver comentário abaixo) e trava a cada
     volta. Botando o respiro dentro de cada <ul> como padding, as duas
     cópias continuam do mesmo tamanho. */
	.marquee-row {
		display: flex;
		align-items: center;
		gap: var(--sp-7);
		padding-right: var(--sp-7);
	}

	/* Cada <li> é a CAIXA DE RECORTE da tinta daquele logo específico - não um
     slot genérico. object-fit:contain sozinho não bastava: os arquivos têm
     quantidades de margem transparente muito diferentes entre si (uma marca
     quadrada de 1080×1080 com o desenho ocupando só o centro, contra um
     wordmark de 2438×704 que já preenche quase tudo), então a mesma caixa
     "contain" fazia uma virar 32×32 e outra 116×32 - 3,6× de área de
     diferença por causa do enquadramento do arquivo, não do desenho em si.
     Aqui cada <li> mede exatamente a "tinta" (bounding box do que não é
     transparente) daquele arquivo, escalada para 28px de altura - a mesma
     altura para todos - com overflow:hidden cortando a margem. Os valores
     foram medidos pixel a pixel em cada arquivo; se a logo for trocada, os
     números precisam ser recalculados. */
	.marquee-row li {
		flex: none;
		position: relative;
		height: 28px;
		overflow: hidden;
	}

	/* brightness(0) achata a marca em preto e invert(1) devolve ela em branco:
     todas entram com o MESMO peso visual, independentemente da cor original.
     Só funciona com fundo transparente - por isso a triagem de quais logos
     entram foi feita na view. */
	.marquee-row img {
		position: absolute;
		max-width: none;
		filter: grayscale(1) brightness(0) invert(1);
		opacity: .5;
		transition: opacity var(--d-2) var(--e-std);
	}

	.marquee-row li:hover img {
		opacity: .9;
	}

	/* Este item foge do padrão "caixa de recorte de 28px" dos outros: é um
     selo redondo cuja identidade é o texto na borda, então qualquer corte
     (em cima/embaixo) apaga a parte que faz ele ser reconhecível como
     "Instinto Criativo" e não só uma bolota cinza. Em vez de recortar,
     mostra o círculo inteiro - por isso a altura própria (maior que os
     28px da fileira) e overflow:visible em vez de hidden. Também foge do
     brightness(0) dos outros pelo mesmo motivo do comentário acima deles:
     o selo é 100% opaco, então grayscale + invert (sem achatar tudo em
     preto primeiro) é o que preserva o contraste navy/dourado como cinza. */
	.marquee-row li.lg-instintocriativo {
		width: 40px;
		height: 40px;
		overflow: visible;
	}

	.lg-instintocriativo img {
		width: 40px;
		height: 40px;
		left: 0;
		top: 0;
		filter: grayscale(1) invert(1);
	}

	/* Pede Fácil e Everest fogem da altura de tinta uniforme (28px) das
     demais de propósito - pedido pra aparecerem um pouco maiores na
     fileira. Mesma proporção da caixa de recorte, só escalada ~1.15×
     (largura, altura, img e offsets todos no mesmo fator, senão o recorte
     desalinha da tinta de novo). */
	.lg-padfacil {
		width: 51px;
	}

	/* Precisa da especificidade extra (mesmo truque do instintocriativo
     acima): `.marquee-row li` já fixa height:28px, e um seletor de classe
     sozinha não vence um composto classe+tag. */
	.marquee-row li.lg-padfacil {
		height: 32px;
	}

	.lg-padfacil img {
		width: 56px;
		height: 32px;
		left: -3.2px;
		top: 0;
	}

	.lg-planetbrindes {
		width: 55px;
	}

	.lg-planetbrindes img {
		width: 56px;
		height: 56px;
		left: -0.7px;
		top: -14px;
	}

	.lg-everest {
		width: 61px;
	}

	.marquee-row li.lg-everest {
		height: 32px;
	}

	.lg-everest img {
		width: 69px;
		height: 69px;
		left: -4.3px;
		top: -18.4px;
	}

	/* temsolar: logo horizontal 302×97 → escala para caber na altura padrão de 28px */
	.lg-temsolar {
		width: 87px;
	}

	.lg-temsolar img {
		width: 87px;
		height: 28px;
		left: 0;
		top: 0;
	}

	/* thesecur: logo retrato 1448×1750 → ~0.83:1, cabe em quadrado de 32px */
	.lg-thesecur {
		width: 26px;
	}

	.marquee-row li.lg-thesecur {
		height: 32px;
	}

	.lg-thesecur img {
		width: 26px;
		height: 32px;
		left: 0;
		top: 0;
	}

	/* --- Barra da lacuna (dados de mercado) ---
     Faixa no poço (--s0) entre o hero e a primeira seção clara: respiro escuro
     antes da inversão. Numerais em areia e UM em âmbar - o 22% é a piada toda,
     e destacar os quatro seria não destacar nenhum. */
	
	
	
	
	
	
	
	/* Fonte à vista: é o que separa "dado de mercado" de "número inventado".
     O <span> guarda a citação num tom abaixo do argumento. */
	
	
	
	/* ======================================================================
     SUPERFÍCIE PADRÃO + SPOTLIGHT DE BORDA
     A borda reage ao ponteiro: gradiente radial recortado no anel de 1px.
     --mx/--my são publicados por célula pelo JS (um listener por grade).
     ====================================================================== */
	.cell,
	.acc-item,
	.signal,
	.case {
		position: relative;
		background: var(--surface-cell);
		border: 1px solid var(--line);
		border-radius: var(--r-md);
		box-shadow: var(--lift-1);
		transition: background-color var(--d-2) var(--e-std), border-color var(--d-2) var(--e-std), box-shadow var(--d-2) var(--e-std), transform var(--d-2) var(--e-out);
	}

	.sec--raised .cell {
		background: color-mix(in srgb, var(--s3) 65%, var(--s2));
	}

	.cell::after,
	.signal::after,
	.case::after,
	.acc-item::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		padding: 1px;
		background: radial-gradient(240px circle at var(--mx) var(--my), rgba(var(--spot-rgb), .65), transparent 62%);
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--d-2) var(--e-std);
	}

	[data-spotlight]:hover .cell::after,
	[data-spotlight]:hover .signal::after,
	[data-spotlight]:hover .case::after,
	[data-spotlight]:hover .acc-item::after {
		opacity: .55;
	}

	.cell:hover,
	.signal:hover,
	.case:hover {
		background: var(--surface-cell-hi);
		box-shadow: var(--lift-2);
	}

	[data-spotlight]:hover .cell:hover::after,
	[data-spotlight]:hover .signal:hover::after,
	[data-spotlight]:hover .case:hover::after {
		opacity: 1;
	}

	.ico {
		flex: none;
		display: grid;
		place-items: center;
		width: var(--ico, 40px);
		height: var(--ico, 40px);
		color: var(--accent);
		transition: transform var(--d-2) var(--e-spring);
	}

	.cell:hover .ico {
		transform: translateY(-2px) scale(1.06);
	}

	/* --- Problema --- */
	
	
	/* Linha de base deslocada: leitura diagonal em vez de colunas espelhadas. */
	
	
	
	
	
	.prob-cta {
		margin-top: clamp(var(--sp-4), 3svh, var(--sp-6));
	}

	/* --- Acordeão (dores e FAQ) ---
     `name` no <details> dá acordeão exclusivo nativo, zero JS. Onde não houver
     suporte, todos podem abrir - degradação inofensiva. */
	.acc {
		display: grid;
		gap: var(--sp-3);
	}

	.acc-item {
		overflow: hidden;
	}

	.acc-item summary {
		display: flex;
		align-items: center;
		gap: var(--sp-4);
		padding: var(--sp-4) var(--sp-5);
		cursor: pointer;
		list-style: none;
		min-height: 56px;
	}

	.acc-item summary::-webkit-details-marker {
		display: none;
	}

	.acc-item summary h3 {
		flex: 1;
		font-size: var(--fs-h3);
		font-weight: 600;
		transition: color var(--d-2) var(--e-std);
	}

	.acc-item summary:hover h3 {
		color: var(--accent);
	}

	.acc-item summary .ico {
		--ico: 26px;
		color: var(--clay);
	}

	.acc-item .chev {
		flex: none;
		width: 20px;
		height: 20px;
		color: var(--tx-3);
		transition: transform var(--d-2) var(--e-out), color var(--d-2) var(--e-std);
	}

	.acc-item[open] .chev {
		transform: rotate(180deg);
		color: var(--accent);
	}

	.acc-item[open] {
		border-color: var(--line-2);
		background: var(--surface-cell-hi);
	}

	.acc-item>p {
		padding: 0 var(--sp-5) var(--sp-5);
		font-size: var(--fs-sm);
		color: var(--tx-2);
		max-width: var(--measure);
	}

	/* Abertura NATIVA, sem animação de altura - decisão fechada, com medição.
     Tentei duas construções sobre ::details-content: repouso em `block-size:0`
     e repouso em `auto` com @starting-style. Ambas medidas em block-size 0px
     com a resposta clipada (item 74px, conteúdo 122px) quando o pipeline de
     renderização está parado - a transição trava no valor inicial e nunca sai.
     Numa página de conversão, 260ms de elegância não valem o risco de a
     resposta ficar invisível. O chevron girando já sinaliza o estado. */
	.acc--faq {
		gap: var(--sp-2);
	}

	.acc--faq summary {
		padding-block: var(--sp-5);
	}

	/* --- Sinais --- */
	
	.signal {
		display: flex;
		align-items: center;
		gap: var(--sp-3);
		padding: var(--sp-3) var(--sp-4);
		min-height: 60px;
	}

	.signal .ico {
		--ico: 24px;
		color: var(--clay);
	}

	.signal span:last-child {
		font-family: var(--f-display);
		font-weight: 600;
		font-size: var(--fs-sm);
		line-height: 1.32;
		letter-spacing: var(--tr-title);
	}

	/* --- Abas --- */
	.tabs {
		display: flex;
		justify-content: center;
		gap: var(--sp-6);
		border-bottom: 1px solid var(--line);
	}

	.tab {
		position: relative;
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		letter-spacing: var(--tr-lbl);
		text-transform: uppercase;
		color: var(--tx-3);
		padding: var(--sp-4) 0;
		min-height: 48px;
		transition: color var(--d-2) var(--e-std);
	}

	.tab:hover {
		color: var(--tx-2);
	}

	.tab.is-active {
		color: var(--tx);
	}

	.tab::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -1px;
		height: 2px;
		background: var(--accent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--d-2) var(--e-out);
	}

	.tab.is-active::after {
		transform: scaleX(1);
	}

	/* Grid stacking: ambos os painéis ficam na mesma célula.
	   O painel inativo mantém altura (visibility: hidden) sem ocupar fluxo visual.
	   A seção não pula ao trocar de aba. */
	.bleed:has(.tab-panel) {
		display: grid;
	}

	.tab-panel {
		grid-area: 1 / 1;
		padding-top: clamp(var(--sp-6), 4vw, var(--sp-8));
		min-height: clamp(300px, 32vw, 460px);
	}

	.tab-panel[hidden] {
		display: block;
		visibility: hidden;
		pointer-events: none;
	}

	/* --- BENTO ---
     Células de tamanhos significativamente diferentes. Bento com células
     aleatórias vira bagunça; a hierarquia é que faz o padrão funcionar. */
	
	/* 3 colunas: 2+1 / 1+2. Assimétrico, sem buraco, sem span vertical. */
	
	
	
	/* Container query: a célula responde ao PRÓPRIO tamanho, não ao viewport.
     É o que permite a mesma célula funcionar em destaque e em tamanho normal
     sem duplicar CSS nem depender de :nth-child. */
	.cell {
		display: flex;
		flex-direction: column;
		padding: clamp(var(--sp-4), 1.4vw, var(--sp-6));
		container-type: inline-size;
	}

	.cell h3 {
		font-size: var(--fs-h3);
		margin-block: var(--sp-3) var(--sp-2);
	}

	/* Rótulo de alavanca, reutilizado também pela rota de #servicos (.rt-stop
     .lever): dash + mono maiúsculo em uppercase, cor herdada por quem chama. */
	.lever {
		display: inline-flex;
		align-items: center;
		gap: var(--sp-2);
		align-self: flex-start;
		margin-top: var(--sp-4);
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		font-weight: 500;
		letter-spacing: var(--tr-lbl);
		text-transform: uppercase;
		color: var(--accent);
	}

	.lever::before {
		content: "";
		width: 14px;
		height: 1px;
		background: currentColor;
		opacity: .6;
	}

	.cell .lever+h3 {
		margin-top: var(--sp-2);
	}

	.cell p {
		font-size: var(--fs-sm);
		color: var(--tx-2);
		max-width: var(--measure);
	}

	
	
	/* Container query: a célula responde ao PRÓPRIO tamanho, não ao viewport -
     é o que permite a mesma célula servir em destaque e em tamanho normal sem
     duplicar CSS nem depender de :nth-child.
     Precisa vir DEPOIS de `.cell h3`: mesma especificidade, ganha quem vem
     por último dentro da camada. */
	@container (min-width: 48rem) {
		.cell h3 {
			font-size: clamp(1.375rem, 1rem + 1.4vw, 1.875rem);
		}

		.cell .ico {
			--ico: 48px;
		}

		.cell p {
			font-size: 1rem;
		}
	}

	/* --- A Linha (#servicos) ---
     "O que fazemos": 7 entregas sem ordem entre si, plotadas como paradas
     de uma linha que ziguezagueia. "Como fazemos": 4 etapas com ordem real,
     rota reta com seta. Zero ícone-em-círculo, zero card uniforme - a cor
     de cada parada É a alavanca (--accent-quiet/--azure-quiet/--mint-quiet),
     não decoração. */
	.rt-stop .lever {
		margin-top: 0;
	}

	.rt-stop h3,
	.rt-como-stop h4 {
		font-family: var(--f-display);
		font-weight: 600;
		font-size: var(--fs-h3);
		margin-block: var(--sp-2) var(--sp-1);
	}

	.rt-stop p,
	.rt-como-stop p {
		font-size: var(--fs-sm);
		color: var(--tx-2);
	}

	.rt-como-stop {
		padding-inline: var(--sp-3);
	}

	.rt-idx {
		display: flex;
		justify-content: center;
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		color: var(--accent);
		font-weight: 700;
		/* width: 5.5ch; */

	}

	.rt-como-stop .rt-idx svg {
		color: var(--tx-2);
	}

	.rt-band {
		display: block;
		overflow: visible;
	}

	/* nível 1 · desktop ≥75rem: 4 colunas, alternando acima/abaixo da linha */
	.rt-oque {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: auto minmax(88px, auto) auto;
		column-gap: var(--sp-3);
	}

	.rt-oque .rt-band {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
		height: 100%;
	}

	.rt-stop {
		padding-inline: 2px;
	}

	.rt-above {
		grid-row: 1;
		align-self: end;
		padding-bottom: var(--sp-4);
	}

	.rt-below {
		grid-row: 3;
		align-self: start;
		padding-top: var(--sp-4);
	}

	/* A cor da parada é declarada UMA vez, na view, como --dot. Aqui ela vira
	   cor de texto da alavanca; no trilho vertical (abaixo de 75rem) a mesma
	   variável vira o preenchimento da bolinha. */
	.rt-stop .lever {
		color: var(--dot, var(--accent));
	}

	/* "como fazemos": reta com seta, do desktop até o tablet.
	   Sem column-gap: os pontos do SVG (x=88,263,438,613 em viewBox 700)
	   coincidem com os centros das 4 colunas iguais sem gap. */
	.rt-como {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.rt-como .rt-band {
		grid-column: 1 / -1;
		width: 100%;
		height: 32px;
		margin-bottom: var(--sp-4);
	}

	.rt-como-band {
		position: relative;
	}

	/* Linha reta de bolinha a bolinha */
	.rt-como-band::before {
		content: '';
		position: absolute;
		left: 12.57%;
		right: 12.43%;
		top: 50%;
		height: 1.5px;
		margin-top: -0.75px;
		background: var(--tx-3);
		opacity: .55;
	}

	/* Bolinha externa (fundo) + interna (cor) */
	.rt-como-dot {
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: var(--surface);
	}

	.rt-como-dot::after {
		content: '';
		position: absolute;
		inset: 3px;
		border-radius: 50%;
		background: var(--dot-color);
	}

	/* ------------------------------------------------------------------
	   Rotas em pilha (tablet e celular)

	   Antes deste bloco, `.rt-oque` sumia abaixo de 75rem e `.rt-como` abaixo
	   de 44rem - os dois com `display:none` e sem nenhuma marcação alternativa
	   na view. O efeito prático: em tablet a aba "O que fazemos" (a que abre
	   por padrão) ficava VAZIA, e no celular as duas abas ficavam vazias, com
	   a seção inteira reduzida a um par de botões.

	   A rota horizontal não cabe deitada em tela estreita, então ela gira 90°:
	   o mesmo dispositivo - trilho + bolinha na cor da alavanca - passa a
	   correr pela lateral esquerda, uma parada por linha. A cor continua
	   vindo do --dot declarado na view; nada é duplicado.
	   ------------------------------------------------------------------ */
	@media (max-width: 75rem) {

		/* flex (não grid) nos dois casos, de propósito: as paradas carregam
		   `grid-column:1..4` inline, herdado do layout de desktop. Num
		   contêiner grid essa propriedade recriaria as 4 colunas mesmo que a
		   regra pedisse 2; em flex ela é simplesmente ignorada - sem
		   !important e sem precisar de marcação alternativa na view. */
		.rt-oque,
		.rt-como {
			display: flex;
			flex-wrap: wrap;
			gap: var(--sp-6) var(--sp-6);
		}

		/* As faixas (onda em ziguezague e reta com bolinhas) são calibradas em
		   porcentagem para 4 colunas; em 2 colunas apontariam para o vazio. */
		.rt-oque .rt-band,
		.rt-como .rt-band {
			display: none;
		}

		/* `align-self` e o padding vertical de .rt-above/.rt-below existem só
		   para afastar o texto da onda - sem onda, viram desalinhamento. */
		.rt-stop,
		.rt-como-stop {
			flex: 1 1 calc(50% - var(--sp-6));
			min-width: 0;
			align-self: stretch;
			padding: 0;
		}

		/* Marca de cor da parada, no lugar da bolinha que estava na faixa:
		   mesma variável --dot, agora como filete no topo do bloco. */
		.rt-oque .rt-stop {
			padding-top: var(--sp-4);
			border-top: 2px solid var(--dot, var(--accent));
		}
	}

	/* Celular: 2 colunas não cabem. Uma parada por linha e a rota gira 90° -
	   o trilho passa a correr pela lateral esquerda, com a mesma bolinha na
	   cor da alavanca que a faixa horizontal usava no desktop. */
	@media (max-width: 44rem) {

		.rt-oque,
		.rt-como {
			flex-direction: column;
			gap: 0;
		}

		.rt-stop,
		.rt-como-stop {
			position: relative;
			flex: 0 0 auto;
			padding: 0 0 var(--sp-6) var(--sp-7);
			border-top: 0;
		}

		/* :last-of-type e não :last-child - o último filho de .rt-oque é o
		   <svg> da faixa, e o de .rt-como é uma div irmã; o "of-type" cai no
		   último bloco de texto, que é o que precisa perder o rabo do trilho. */
		.rt-oque .rt-stop:last-of-type,
		.rt-como .rt-como-stop:last-of-type {
			padding-bottom: 0;
		}

		/* Trilho: desce do centro da bolinha até o fim da parada; no último
		   item some, para a linha não continuar depois da última bolinha. */
		.rt-stop::before,
		.rt-como-stop::before {
			content: "";
			position: absolute;
			left: 7px;
			top: var(--sp-3);
			bottom: 0;
			width: 1px;
			background: var(--tx-3);
			opacity: .3;
		}

		.rt-oque .rt-stop:last-of-type::before,
		.rt-como .rt-como-stop:last-of-type::before {
			display: none;
		}

		.rt-stop::after,
		.rt-como-stop::after {
			content: "";
			position: absolute;
			left: 0;
			top: calc(var(--sp-3) - 7px);
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background: var(--dot, var(--accent));
			box-shadow: 0 0 0 4px var(--surface);
		}

		/* Ícone alinhado à esquerda e menor: centralizado e em 60px ele
		   empurraria o texto para longe do trilho. */
		.rt-como-stop .rt-idx {
			justify-content: flex-start;
			margin-bottom: var(--sp-2);
		}

		.rt-como-stop .rt-idx svg {
			width: 42px;
			height: 42px;
		}
	}

	/* --- Carrossel de projetos: densidade pelo viewport, nada escondido --- */
	.rail-wrap {
		position: relative;
		margin-top: clamp(var(--sp-3), 2.5svh, var(--sp-6));
	}

	/* Rotação contínua, mesma receita da fileira de logos: máscara nas pontas
     em vez de gradiente sobreposto, pra funcionar sobre as partículas sem
     saber a cor do fundo. */
	.rail {
		overflow: hidden;
		padding-block: var(--sp-2);
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	}

	.rail-track {
		display: flex;
		width: max-content;
		animation: railSpin var(--rail-duration, 90s) linear infinite;
	}

	.rail-track.is-paused {
		animation-play-state: paused;
	}

	/* -50% = exatamente uma das duas cópias do rail-row, então o laço fecha
     sem emenda (mesma matemática da fileira de logos, ver .marquee-track). */
	@keyframes railSpin {
		to {
			transform: translateX(-50%);
		}
	}

	/* padding-right (não gap no .rail-track) pelo mesmo motivo do
     .marquee-row: as duas cópias precisam da MESMA largura pro -50% bater. */
	.rail-row {
		display: flex;
		gap: var(--sp-3);
		padding-right: var(--sp-3);
	}

	/* A altura do cartão é o que decide se #cases cabe numa tela: a marca e o
	   respiro interno encolhem junto com a janela (svh), e o parágrafo é
	   limitado em linhas - sem isso o cartão mais falante define a altura de
	   todos e o carrossel sozinho passa de 400px. */
	.case {
		/* Um pouco mais largo que antes (19rem): cada linha de descrição
		   ganha ~15% de texto, e é isso que faz a maioria dos cartões caber
		   nas 5 linhas do clamp sem cortar frase. */
		flex: 0 0 clamp(15rem, 22vw, 21rem);
		display: flex;
		flex-direction: column;
		gap: clamp(var(--sp-2), 1.2svh, var(--sp-3));
		padding: clamp(var(--sp-4), 2.2svh, var(--sp-5));
	}

	/* Flex, e não grid, por causa do teto de altura da logo: com `display:grid`
	   a linha implícita é `auto`, então o `max-height:100%` da imagem entra em
	   ciclo (a faixa mede o item, o item mede a faixa) e o navegador descarta a
	   porcentagem. Resultado: a logo saía no tamanho natural e era decepada pelo
	   `overflow:hidden` - as marcas altas (The Secur, Everest) apareciam cortadas.
	   Em flex a altura da caixa é definida antes do item e a porcentagem resolve. */
	.case-mark {
		display: flex;
		align-items: center;
		justify-content: center;
		height: clamp(52px, 6.5svh, 92px);
		margin-bottom: var(--sp-1);
		overflow: hidden;
	}

	/* Teto ABSOLUTO: com medida percentual o item não esticado escapa da célula. */
	.case-mark img {
		width: auto;
		height: auto;
		max-height: 100%;
		max-width: 74%;
		object-fit: contain;
		/* Normalização cromática das 8 marcas sem tocar nos arquivos. */
		filter: grayscale(1) opacity(.55);
		transition: filter var(--d-3) var(--e-std);
		pointer-events: none;
	}

	.case:hover .case-mark img {
		filter: grayscale(0) opacity(1);
	}

	
	
	
	
	.case .tag {
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		letter-spacing: var(--tr-lbl);
		text-transform: uppercase;
		color: var(--accent);
	}

	.case h3 {
		font-size: var(--fs-h3);
		line-height: 1.24;
	}

	/* Teto de linhas: é ele que dá altura igual aos seis cartões e, por
	   consequência, o que permite a #cases caber numa tela. `overflow:hidden`
	   segura a promessa onde -webkit-line-clamp não existir. */
	.case p {
		font-size: var(--fs-sm);
		line-height: 1.5;
		color: var(--tx-2);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
		line-clamp: 5;
		overflow: hidden;
	}

	.cases-note {
		margin-top: clamp(var(--sp-3), 2svh, var(--sp-5));
		font-size: var(--fs-xs);
		line-height: 1.55;
		color: var(--tx-2);
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 5px
	}

	.cases-note a {
		color: var(--accent);
		box-shadow: inset 0 -1px 0 currentColor;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.cases-note a:hover {
		opacity: .7;
	}

	/* --- Faixa de rodapé de seção (chips do repertório, condições do diagnóstico) --- */
	.meta-row {
		margin-top: clamp(var(--sp-4), 3.2svh, var(--sp-8));
		padding-top: clamp(var(--sp-3), 2svh, var(--sp-6));
		border-top: 1px solid var(--line);
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-5) var(--sp-6);
		align-items: start;
	}

	.meta-row .lbl {
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		letter-spacing: var(--tr-lbl);
		text-transform: uppercase;
		color: var(--tx-3);
		margin-bottom: var(--sp-3);
	}

	/* A mesma faixa serve para chips (diferenciais) e para texto corrido (as
     condições comerciais do diagnóstico). Só o parágrafo que NÃO é rótulo
     precisa de tratamento - o `.lbl` já tem o dele acima. */
	.meta-row p:not(.lbl) {
		font-size: var(--fs-sm);
		color: var(--tx-2);
		max-width: 38ch;
	}

	@media (max-width: 38rem) {
		.meta-row {
			grid-template-columns: 1fr;
		}
	}

	.chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-2);
	}

	.chip {
		font-family: var(--f-mono);
		font-size: var(--fs-xs);
		color: var(--tx-2);
		border: 1px solid var(--line-2);
		border-radius: var(--r-pill);
		padding: .3125rem var(--sp-4);
		transition: border-color var(--d-2) var(--e-std), color var(--d-2) var(--e-std);
	}

	.chip:hover {
		border-color: var(--accent);
		color: var(--tx);
	}

	/* --- Contato: VIDRO 3 de 3, único nível 3 da página --- */
	.diag {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		border-radius: var(--r-lg);
		overflow: hidden;
	}

	/* .glass foi calibrado para vidro sobre fundo ESCURO (--s0 a 70% ainda lê
     como painel escuro quando o que passa atrás pelo blur já é escuro). Aqui
     o backdrop é o creme de .sec--contato, e a mesma mistura de 70% deixa o
     blur puxar o creme para dentro do vidro - o cartão sai cinza/embaçado em
     vez do azul-marinho escuro do resto da página. Sobe a opacidade só neste
     cartão para o vidro ler como painel escuro de verdade, sem perder o leve
     brilho translúcido que o justifica ser "vidro". */
	.diag.glass {
		/* background: color-mix(in srgb, var(--s0) 94%, transparent); */
		background: #1B2238;
	}

	/* Os dois lados do cartão respiram pela ALTURA da janela, não pela largura:
	   #contato é seção-tela, e o que aperta aqui é o eixo vertical. */
	.diag-left {
		grid-column: 1 / 6;
		padding: clamp(var(--sp-5), 3.5svh, var(--sp-8)) clamp(var(--sp-5), 3.2vw, var(--sp-8));
		border-right: 1px solid var(--line);
	}

	.diag-chat {
		grid-column: 6 / -1;
		display: flex;
	}

	.diag-title {
		font-family: var(--f-display);
		font-weight: 700;
		font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
		line-height: 1.08;
		letter-spacing: var(--tr-display);
		max-width: 14ch;
	}

	.diag-sub {
		margin-top: var(--sp-4);
		font-size: var(--fs-sm);
		color: var(--tx-2);
		max-width: 42ch;
	}

	.diag-points {
		margin-top: clamp(var(--sp-5), 3.5svh, var(--sp-8));
		display: grid;
		border-top: 1px solid var(--line);
	}

	.dpoint {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--sp-4);
		align-items: start;
		padding-block: clamp(var(--sp-3), 2.4svh, var(--sp-5));
		border-bottom: 1px solid var(--line);
	}

	.dpoint .ico {
		--ico: 28px;
	}

	.dpoint h3 {
		font-size: var(--fs-sm);
		margin-bottom: var(--sp-1);
	}

	.dpoint p {
		font-size: var(--fs-xs);
		color: var(--tx-2);
	}

	/* Bloco de contatos: está comentado na view, mas segue tokenizado para que
     reativá-lo não exija reescrever estilo do zero. */
	
	
	
	
	
	.diag-form {
		flex: 1;
		padding: clamp(var(--sp-5), 3.5svh, var(--sp-8)) clamp(var(--sp-5), 3.2vw, var(--sp-8));
		display: flex;
		flex-direction: column;
	}

	.df-head {
		margin-bottom: clamp(var(--sp-4), 2.6svh, var(--sp-6));
	}

	.df-title {
		font-family: var(--f-display);
		font-weight: 600;
		font-size: var(--fs-h3);
	}

	.df-block {
		margin-bottom: clamp(var(--sp-4), 2.6svh, var(--sp-6));
	}

	.df-label {
		display: block;
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		letter-spacing: var(--tr-lbl);
		text-transform: uppercase;
		color: var(--tx-3);
		margin-bottom: clamp(var(--sp-2), 1.8svh, var(--sp-4));
	}

	.df-opt-tag {
		text-transform: none;
		letter-spacing: 0;
	}

	.df-opts {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-2);
	}

	.df-opt {
		font-size: var(--fs-sm);
		color: var(--tx-2);
		border: 1px solid var(--line-2);
		border-radius: var(--r-sm);
		padding: .6875rem var(--sp-4);
		min-height: 44px;
		transition: border-color var(--d-2) var(--e-std), color var(--d-2) var(--e-std), background-color var(--d-2) var(--e-std), transform var(--d-1) var(--e-spring);
	}

	.df-opt:hover {
		border-color: var(--accent);
		color: var(--tx);
		transform: translateY(-1px);
	}

	.df-opt.on {
		background: rgba(242, 163, 65, .14);
		border-color: var(--accent);
		color: var(--tx);
	}

	.df-row {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
		gap: var(--sp-4);
		margin-bottom: clamp(var(--sp-4), 2.6svh, var(--sp-6));
	}

	.cap-field {
		display: flex;
		flex-direction: column;
		gap: var(--sp-2);
	}

	.cap-field label {
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		letter-spacing: var(--tr-lbl);
		text-transform: uppercase;
		color: var(--tx-3);
		transition: color var(--d-2) var(--e-std);
	}

	.cap-field:focus-within label {
		color: var(--accent);
	}

	.cap-field input,
	#df-msg {
		width: 100%;
		background: transparent;
		border: 0;
		border-bottom: 1px solid var(--line-2);
		border-radius: 0;
		padding: .75rem 0;
		font-size: 1rem;
		transition: border-color var(--d-2) var(--e-std);
	}

	#df-msg {
		resize: vertical;
		min-height: 3.5rem;
		font-family: var(--f-body);
	}

	.cap-field input::placeholder,
	#df-msg::placeholder {
		color: var(--tx-3);
		opacity: 1;
	}

	.cap-field input:focus,
	#df-msg:focus {
		outline: none;
		border-bottom-color: var(--accent);
	}

	.cap-err {
		display: none;
		font-size: var(--fs-xs);
		color: var(--clay);
	}

	.df-send {
		width: 100%;
		margin-top: var(--sp-2);
	}

	.df-send:disabled {
		cursor: default;
		opacity: 1;
	}

	.df-note {
		margin-top: var(--sp-4);
		font-size: var(--fs-xs);
		color: var(--tx-2);
	}

	/* Botão secundário: mesma caixa do .btn, sem o âmbar. Existe para o
	   agendamento poder ficar ao lado do envio sem disputar a atenção com ele. */
	.btn-ghost {
		background: transparent;
		border-color: var(--line-2);
		color: var(--tx);
	}

	.btn-ghost:hover {
		border-color: var(--accent);
		color: var(--accent);
	}

	/* Agendar, logo abaixo do enviar: quem não quer esperar resposta escolhe
	   o horário na hora. Só aparece com AGENDA_URL preenchida. */
	.df-agenda {
		margin-top: var(--sp-4);
		padding-top: var(--sp-4);
		border-top: 1px solid var(--line);
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-2);
	}

	.df-agenda-ou {
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--tx-3);
		text-align: center;
	}

	/* --- Página de obrigado / 404 --- */
	/* Uma coluna centrada, sem seção nem cartão: nestas duas páginas o
	   visitante tem exatamente uma decisão a tomar. */
	.aviso {
		min-height: 78svh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: var(--sp-4);
		padding-block: clamp(var(--sp-10), 12vh, 9rem);
	}

	.aviso-title {
		font-family: var(--f-display);
		font-size: var(--fs-h2);
		line-height: 1.05;
		letter-spacing: var(--tr-title);
		margin: 0;
	}

	.aviso-lead {
		max-width: 46ch;
		font-size: var(--fs-lead);
		color: var(--tx-2);
		margin: 0;
	}

	.aviso-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-3);
		justify-content: center;
		margin-top: var(--sp-2);
	}

	.aviso-nota {
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		letter-spacing: .06em;
		color: var(--tx-3);
		margin: var(--sp-2) 0 0;
	}

	/* --- Rodapé --- */
	/* A foto do rodape voltou: eu a havia trocado por cor chapada na reescrita
     do Estrato, sem avisar. O diff de conteudo nao pegou porque ela vive num
     background-image do CSS, nao numa tag <img>. */
	footer.ft {
		position: relative;
		isolation: isolate;
		border-top: 1px solid var(--line);
		/* A foto do rodapé só existe como área: quanto mais respiro vertical,
		   mais paisagem aparece atrás do véu escuro. min-height garante um piso
		   de altura mesmo quando o conteúdo (marca + slogan + linha de baixo) é
		   curto - sem ele a imagem vira uma tarja fina em telas largas. */
		min-height: clamp(28rem, 46svh, 38rem);
		padding-block: clamp(7.5rem, 4.5rem + 10vw, 13rem) clamp(4rem, 3rem + 4.5vw, 7rem);
		background-image:
			linear-gradient(rgba(8, 11, 20, .80), rgba(8, 11, 20, .96)),
			url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Fotos_do_Centro_de_Cascavel.jpg/1920px-Fotos_do_Centro_de_Cascavel.jpg);
		background-size: cover;
		background-position: center 45%;
		background-repeat: no-repeat;
		background-attachment: scroll;
	}

	.ft-col h5 {
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		text-transform: uppercase;
		letter-spacing: var(--tr-lbl);
		color: var(--tx-3);
		margin-bottom: var(--sp-4);
		font-weight: 500;
	}

	.ft-col p {
		display: block;
		color: var(--tx-2);
		font-size: var(--fs-sm);
		margin-bottom: var(--sp-3);
	}

	/* Alvo confortável em qualquer largura, não só no mobile. */
	.ft-col a {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		min-height: 40px;
		color: var(--tx-2);
		font-size: var(--fs-sm);
		transition: color var(--d-2) var(--e-std);
	}

	.ft-col a:hover {
		color: var(--accent);
	}

	/* Marca e copyright dividem a mesma linha: wordmark na ponta esquerda,
	   crédito na direita, alinhados pela baseline visual do meio. */
	.ft-bottom {
		margin-top: clamp(var(--sp-8), 7vw, var(--sp-10));
		padding-top: var(--sp-5);
		border-top: 1px solid var(--line);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-4);
		flex-wrap: wrap;
		text-align: right;
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		letter-spacing: .06em;
		color: var(--tx-3);
	}

	.ft-bottom a {
		color: inherit;
		text-decoration: none;
		transition: color var(--d-1) var(--e-std);
	}

	.ft-bottom a:hover {
		color: #fff;
	}

	/* --- Antes/Depois (#diagnostico) --------------------------------------- */
	.vs-table {
		width: 100%;
		margin-top: clamp(var(--sp-4), 3svh, var(--sp-7));
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.vs-table table {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--fs-sm);
	}

	.vs-table thead th {
		padding: var(--sp-3) var(--sp-5);
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		font-weight: 500;
		letter-spacing: var(--tr-lbl);
		text-transform: uppercase;
		text-align: left;
		border-bottom: 1px solid var(--line-2);
		color: var(--tx-3);
	}

	.vs-table thead th:first-child {
		width: 14%;
	}

	/* Cabeçalho da coluna Westcode em âmbar - a única distinção visual de coluna,
	   no lugar de fundo colorido que pesaria demais na superfície escura. */
	.vs-col-good {
		color: var(--accent) !important;
	}

	.vs-table tbody tr {
		border-bottom: 1px solid var(--line);
		transition: background-color var(--d-2) var(--e-std);
	}

	.vs-table tbody tr:last-child {
		border-bottom: 0;
	}

	.vs-table tbody tr:hover {
		background: rgba(244, 241, 234, .03);
	}

	.vs-table td {
		padding: var(--sp-4) var(--sp-5);
		vertical-align: top;
		line-height: 1.45;
	}

	.vs-crit {
		font-family: var(--f-mono);
		font-size: var(--fs-lbl);
		font-weight: 600;
		letter-spacing: var(--tr-lbl);
		text-transform: uppercase;
		color: var(--tx-3);
		white-space: nowrap;
	}

	/* ✕ / ✓ como prefixo de conteúdo: não depende de ícone externo, semântica
	   correta via ::before, tom calibrado pra não dominar o texto. */
	.vs-bad {
		color: var(--tx-3);
	}

	.vs-bad::before {
		content: "✕  ";
		color: var(--clay);
		font-weight: 700;
	}

	.vs-good {
		color: var(--tx);
		font-weight: 500;
	}

	.vs-good::before {
		content: "✓  ";
		color: var(--accent);
		font-weight: 700;
	}

	/* 4 fases abaixo da tabela: reutiliza .rt-idx (âmbar/mono), sequência
	   visual sem trilho - a tabela acima já cumpriu o papel de contexto. */
	
	
	
	/* --- Atalho flutuante para o formulário --- */
	.cta-float {
		position: fixed;
		right: var(--sp-5);
		bottom: max(var(--sp-5), env(safe-area-inset-bottom));
		z-index: 70;
		width: 54px;
		height: 54px;
		border-radius: 50%;
		background: var(--amber);
		color: var(--s1);
		display: grid;
		place-items: center;
		box-shadow: var(--lift-2);
		transition: transform var(--d-2) var(--e-spring), background var(--d-2) var(--e-out);
	}

	.cta-float:hover {
		background: var(--amber-lo);
		transform: scale(1.08) translateY(-2px);
	}

	.cta-float svg {
		width: 26px;
		height: 26px;
	}
}

/* ==========================================================================
   MOVIMENTO
   ========================================================================== */
@layer motion {
	.reveal {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity var(--d-3) var(--e-out), transform var(--d-3) var(--e-out);
		transition-delay: calc(var(--i, 0) * var(--stag));
	}

	.reveal.in {
		opacity: 1;
		transform: none;
	}

	.reveal:nth-child(1) {
		--i: 0;
	}

	.reveal:nth-child(2) {
		--i: 1;
	}

	.reveal:nth-child(3) {
		--i: 2;
	}

	.reveal:nth-child(n+4) {
		--i: 3;
	}

	.tab-panel.is-active {
		animation: panel-in var(--d-3) var(--e-out);
	}

	@keyframes panel-in {
		from {
			opacity: 0;
			transform: translateY(14px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	/* Progresso de leitura sem JS onde houver suporte. */
	@supports (animation-timeline: scroll()) {
		.nav-progress {
			animation: nav-progress linear both;
			animation-timeline: scroll(root block);
		}

		@keyframes nav-progress {
			to {
				transform: scaleX(1);
			}
		}
	}
}

/* ==========================================================================
   ESTADO
   ========================================================================== */
@layer state {
	.df-send.is-loading {
		color: transparent;
		pointer-events: none;
	}

	.df-send.is-loading::after {
		content: "";
		position: absolute;
		inset: 50% auto auto 50%;
		width: 18px;
		height: 18px;
		margin: -9px 0 0 -9px;
		border: 2px solid rgba(13, 18, 32, .35);
		border-top-color: var(--s1);
		border-radius: 50%;
		animation: spin .6s linear infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	.df-send.is-ok {
		background: rgba(126, 224, 166, .18);
		border-color: rgba(126, 224, 166, .55);
		color: var(--mint);
		cursor: default;
		box-shadow: none;
	}

	.df-send.is-ok::after {
		display: none;
	}

	.df-note.err {
		color: var(--clay);
	}

	.df-note.ok {
		color: var(--tx-2);
	}

	.cap-field.has-err .cap-err {
		display: block;
	}

	.cap-field.has-err input {
		border-bottom-color: var(--clay);
	}
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@layer responsive {

	/* A promessa de "uma seção = uma tela" só vale onde ela é cumprível: com
	   largura de desktop (as três seções ainda em 2 colunas ou com o carrossel
	   inteiro à vista) e altura suficiente para o conteúdo caber sem corte.
	   Abaixo disso a seção volta a ter a altura do próprio conteúdo - prender
	   a altura no celular só produziria buraco ou texto cortado. */
	@media (min-width: 64rem) and (min-height: 40rem) {
		.sec--screen {
			min-height: 100svh;
		}
	}

	/* Notebook de tela baixa (≤52rem ≈ 832px de altura). Os respiros já
	   encolhem sozinhos - são todos `svh` - mas o conteúdo intrínseco não:
	   quatro linhas de descrição no cartão e duas fileiras de chips continuam
	   medindo o mesmo em qualquer tela. Este degrau tira exatamente essas duas
	   coisas de circulação, que é o que faz #cases continuar cabendo numa tela
	   sem cortar nenhuma informação - a descrição do projeto perde uma linha,
	   não o projeto. */
	@media (min-width: 64rem) and (max-height: 52rem) {

		/* O título é o bloco intrínseco mais alto do cabeçalho (3 linhas em
		   #cases). Uma coluna a mais de largura e um degrau a menos de corpo
		   devolvem ~40px sem tocar no texto. A sub continua em 9/-1, então as
		   duas faixas seguem sem se encostar. */
		.sec--screen .sec-head .sec-title {
			grid-column: 1 / 9;
			font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem);
		}

		.sec--screen .case p {
			-webkit-line-clamp: 3;
			line-clamp: 3;
		}

		.sec--screen .case-mark {
			height: clamp(48px, 7svh, 72px);
		}

		.sec--screen .chips {
			gap: var(--sp-1);
		}

		.sec--screen .chip {
			padding: .25rem var(--sp-3);
		}

		/* A faixa de rodapé da seção vai para o piso do clamp: aqui ela é o
		   último lugar de onde ainda dá pra tirar respiro sem apertar leitura. */
		.sec--screen .meta-row {
			margin-top: var(--sp-4);
			padding-top: var(--sp-3);
		}

		.sec--screen .cases-note {
			margin-top: var(--sp-3);
		}
	}

	@media (max-width: 64rem) {

		/* Colapsa as grades de 12 colunas para coluna única. Mandar os filhos
       ocuparem 1/-1 não basta: as 11 goteiras de 32px continuam existindo e
       somam mais que a largura disponível em telas estreitas. */
		.sec-head,
		.hero-grid,
		.diag {
			grid-template-columns: minmax(0, 1fr);
		}

		.sec-head {
			align-items: start;
		}

		.sec-head .sec-title,
		.sec-head .sec-sub {
			grid-column: 1 / -1;
		}

		.hero {
			min-height: auto;
			perspective: none;
		}

		.hero-copy,
		.hero-grid>.hero-side {
			grid-column: 1 / -1;
		}

		.code-card {
			rotate: none;
		}

		/* Sem a coluna de texto ao lado, o mock deixa de ser "a peça da
		   direita" e passa a ser o centro da dobra: alinhado ao meio e com
		   teto de largura pra não virar uma faixa esticada no tablet. */
		.app-mock {
			align-items: center;
		}

		.app-mock .code-card {
			width: min(440px, 100%);
		}

		.diag {
			grid-template-columns: minmax(0, 1fr);
		}

		.diag-left,
		.diag-chat {
			grid-column: 1 / -1;
		}

		.diag-left {
			border-right: 0;
			border-bottom: 1px solid var(--line);
		}
	}

	/* Notebook de tela baixa: a dobra não cabe inteira e os números sumiriam
     abaixo do corte. Aqui o espaçamento encolhe e o rótulo da fileira sai -
     as logos continuam dizendo o que ele dizia. */
	@media (min-width: 54rem) and (max-height: 52rem) {
		.hero {
			padding-block: var(--sp-4);
		}

		.hero-lead {
			margin-top: var(--sp-4);
		}

		.hero-actions {
			margin-top: var(--sp-5);
		}

		.hero-trust {
			margin-top: var(--sp-4);
			padding-top: var(--sp-3);
		}

		.eyebrow {
			padding-top: var(--sp-3);
			margin-bottom: var(--sp-4);
		}

		.marquee-wrap {
			margin-top: var(--sp-4);
		}
	}

	/* ------------------------------------------------------------------
	   Tablet e abaixo (≤64rem): o selo do mock sai do posicionamento
	   absoluto.

	   Ele vivia em `top:310px; left:-100px` relativo ao .app-mock - número
	   calibrado para a coluna estreita da direita no desktop, onde o
	   transbordo à esquerda é justamente a graça. Em coluna única esse mesmo
	   -100px joga metade do selo para fora da tela (medido: 82px cortados a
	   375px de largura). Em vez de recalibrar o deslocamento por breakpoint,
	   ele volta ao fluxo, logo abaixo do monitor, e nunca mais é cortado.
	   `order` é o que o mantém DEPOIS do cartão, já que no HTML ele vem antes.
	   ------------------------------------------------------------------ */
	@media (max-width: 64rem) {
		.float-badge {
			position: static;
			order: 1;
			max-width: min(26rem, 100%);
			margin-top: var(--sp-5);
			rotate: -1.2deg;
		}
	}

	@media (max-width: 54rem) {
		.nav-toggle {
			display: inline-flex;
		}

		.nav-links {
			position: absolute;
			top: var(--nav-h);
			left: 0;
			right: 0;
			flex-direction: column;
			align-items: stretch;
			gap: 0;
			background: var(--s0);
			border-bottom: 1px solid var(--line-2);
			padding: var(--sp-2) var(--gutter) var(--sp-5);
			box-shadow: var(--lift-3);
			max-height: calc(100dvh - var(--nav-h));
			overflow-y: auto;
			opacity: 0;
			visibility: hidden;
			transform: translateY(-10px);
			transition: opacity var(--d-2) var(--e-std), transform var(--d-2) var(--e-out), visibility var(--d-2);
		}

		/* Painel mobile herda o mesmo creme do header quando rolado, em vez de
       abrir um retalho escuro sob um cabeçalho agora claro. */
		header.nav.is-scrolled .nav-links {
			background: #F5F2EC;
			border-bottom-color: rgba(27, 34, 56, .17);
			box-shadow: 0 20px 44px -22px rgba(27, 34, 56, .3);
		}

		.nav-links.open {
			opacity: 1;
			visibility: visible;
			transform: none;
		}

		.nav-link {
			padding: var(--sp-4) 0;
			font-size: var(--fs-sm);
			border-bottom: 1px solid var(--line);
		}

		.nav-link::after {
			display: none;
		}

		.nav-links .nav-cta {
			margin-top: var(--sp-5);
			justify-content: center;
			padding: var(--sp-4);
		}
	}

	@media (max-width: 44rem) {

		.hero-actions {
			flex-direction: column;
			align-items: stretch;
		}

		.hero-actions .btn {
			width: 100%;
		}

		.hero-title {
			max-width: none;
		}

		/* No desktop os dois painéis dividem a mesma célula de grade e o
		   inativo segura a altura (visibility:hidden), para a seção não pular
		   ao trocar de aba. Empilhados a diferença entre eles passa de 350px:
		   a aba curta ganharia um vazio do tamanho de meia tela só para
		   reservar espaço da outra. Aqui o painel inativo sai do fluxo e a
		   seção passa a medir a aba que está aberta. */
		.bleed:has(.tab-panel) {
			display: block;
		}

		.tab-panel {
			min-height: 0;
		}

		.tab-panel[hidden] {
			display: none;
		}

		.case {
			flex-basis: min(82vw, 20rem);
		}

		/* Abas: em duas linhas o rótulo fica ilegível e o alvo de toque some.
		   Aqui elas dividem a largura e ganham altura de dedo. */
		.tabs {
			gap: 0;
		}

		.tab {
			flex: 1 1 0;
			padding-inline: var(--sp-2);
			text-align: center;
		}

		/* Tabela → pilha de cartões. Cada linha vira um bloco e cada valor
		   carrega o próprio rótulo (data-lbl na view): a 375px a tabela media
		   419px e obrigava a arrastar de lado para ler a coluna da Westcode,
		   justamente a que interessa. */
		.vs-table {
			overflow-x: visible;
		}

		.vs-table thead {
			display: none;
		}

		.vs-table table,
		.vs-table tbody,
		.vs-table tr,
		.vs-table td {
			display: block;
			width: 100%;
		}

		.vs-table tbody tr {
			border: 1px solid var(--line-2);
			border-radius: var(--r-md);
			padding: var(--sp-4);
			margin-bottom: var(--sp-3);
		}

		.vs-table tbody tr:last-child {
			margin-bottom: 0;
			border-bottom: 1px solid var(--line-2);
		}

		.vs-table td {
			padding: var(--sp-2) 0;
		}

		.vs-table .vs-crit {
			font-size: var(--fs-sm);
			letter-spacing: .12em;
			color: var(--tx-2);
			padding-bottom: var(--sp-3);
			margin-bottom: var(--sp-2);
			border-bottom: 1px solid var(--line);
			white-space: normal;
		}

		.vs-table td[data-lbl]::after {
			content: attr(data-lbl);
			display: block;
			margin-top: 2px;
			font-family: var(--f-mono);
			font-size: var(--fs-lbl);
			letter-spacing: var(--tr-lbl);
			text-transform: uppercase;
			color: var(--tx-3);
		}

		/* Empilhado no celular a marca continua abrindo a barra, agora com o
		   crédito logo abaixo - os dois encostados à esquerda. */
		.ft-bottom {
			flex-direction: column;
			align-items: flex-start;
			text-align: left;
		}

		.ft-col a {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			min-height: 44px;
			margin-bottom: 0;
		}

		.cta-float {
			right: var(--sp-4);
			width: 52px;
			height: 52px;
		}
	}

	/* ------------------------------------------------------------------
	   Celular estreito (≤30rem)
	   ------------------------------------------------------------------ */
	@media (max-width: 30rem) {

		/* O menu lateral do mock comia 135px de uma tela de 335px - 40% da
		   largura para três rótulos. Deitado, sobra largura para o conteúdo,
		   que é o que a demonstração precisa mostrar. */
		.app-mock .code-card {
			height: 360px;
		}

		.app-body {
			flex-direction: column;
		}

		.app-nav {
			flex-direction: row;
			gap: var(--sp-1);
			padding: var(--sp-2);
			border-right: 0;
			border-bottom: 1px solid var(--line);
			overflow-x: auto;
			scrollbar-width: none;
		}

		.app-nav::-webkit-scrollbar {
			display: none;
		}

		/* Os três rótulos com ícone somam ~356px e não cabem deitados nem numa
		   tela de 375px. O ícone é o que sai: ele decora, o rótulo é que diz
		   qual tela do sistema está sendo mostrada. */
		.app-nav-btn {
			padding: var(--sp-2);
		}

		.app-nav-btn svg {
			display: none;
		}

		.app-kpis {
			gap: var(--sp-2);
		}

		.app-kpi-val {
			font-size: 1rem;
		}

		/* O carrossel de projetos passa a mostrar um cartão por vez, com uma
		   fresta do próximo - sinal de que a fileira continua. */
		.case {
			flex-basis: min(78vw, 17rem);
		}

		.chip {
			padding: .3125rem var(--sp-3);
		}

		/* Alvo de toque cheio nas opções do formulário, uma por linha. */
		.df-opts {
			flex-direction: column;
			align-items: stretch;
		}

		.df-opt {
			text-align: left;
		}

		.wordmark {
			font-size: 1.3rem;
		}

		.wordmark--ft {
			font-size: 1.45rem;
		}
	}

	/* Celular pequeno (≤22.5rem / 360px). O <br> do título é uma quebra
	   calibrada para o desktop: ele força "gargalos operacionais" a caber numa
	   linha só, e abaixo desta largura essa linha não cabe em nenhuma fonte
	   que ainda pareça um título. Encolher o display é o que mantém a quebra
	   pretendida sem estourar a coluna. */
	@media (max-width: 22.5rem) {
		.hero-title {
			font-size: calc(var(--fs-display) * .73);
		}
	}

	/* Celular deitado: a altura útil é curta e o menu aberto precisa rolar
	   por dentro em vez de empurrar o conteúdo pra fora da tela. */
	@media (max-height: 32rem) and (orientation: landscape) {
		.hero {
			min-height: auto;
			padding-block: var(--sp-6);
		}

		.cta-float {
			width: 46px;
			height: 46px;
		}

		.cta-float svg {
			width: 22px;
			height: 22px;
		}
	}

	/* Sem JavaScript, a página continua inteira.
     `.reveal` nasce com opacity 0 e só a classe `.in` - vinda do JS - a revela.
     Se o hotsite.js falhar (404, bloqueio, erro de parse), metade do conteúdo
     ficaria invisível. Aqui o conteúdo volta, as abas deixam de esconder o
     painel e os controles que dependem de JS somem em vez de enganar. */
	@media (scripting: none) {
		.reveal {
			opacity: 1;
			transform: none;
		}

		.tab-panel[hidden] {
			display: block;
		}

		.tabs {
			display: none;
		}

		.nav-progress {
			display: none;
		}
	}

	/* Interruptor global: estado final, imediato. */
	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			animation-duration: .01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: .01ms !important;
		}

		.reveal {
			opacity: 1;
			transform: none;
		}

		.btn {
			translate: none;
		}

		.code-card {
			rotate: none;
		}

		/* A regra global de .01ms mandaria a trilha direto para o fim do laço.
       Aqui ela para de vez e o visitante rola a fileira com o dedo. */
		.marquee-track {
			animation: none !important;
			transform: none !important;
		}

		.marquee {
			overflow-x: auto;
		}

		/* Mesmo raciocínio do .marquee-track logo acima: sem a animação
       global também paralisaria a fileira no meio do laço. Aqui ela para
       de vez e o rail volta a rolar no toque/scroll manual. */
		.rail-track {
			animation: none !important;
			transform: none !important;
		}

		.rail {
			overflow-x: auto;
		}

		.cell::after,
		.signal::after,
		.case::after,
		.acc-item::after {
			display: none;
		}
	}
}