/*
Theme Name: Puzl
Description: Tema institucional da Puzl Place — peça por peça.
Version: 1.80.2
*/

/* ---------- Tokens ---------- */
:root {
	--verde: #149E57;
	--verde-fundo: #0E6B3D;
	--amarelo: #F2B532;
	--amarelo-fundo: #C7902A;
	--azul: #1A70B7;
	--azul-fundo: #14507F;
	--vermelho: #DB4539;
	--cinza: #606062;
	--ink: #232326;
	--teal: #28E3D3;          /* acento do hero (do vídeo de referência) */
	--hero-navy-1: #0C3B5A;   /* navy petróleo do hero, topo */
	--hero-navy-2: #081726;   /* navy fundo, casa com o carvão */
	--carvao: #0B0F1A;      /* dark canvas: preto-azulado profundo */
	--carvao-elev: #131A28; /* uma camada acima (cards, header) */
	--carvao-borda: rgba(255,255,255,.08);
	--concreto: #EDEDEF;
	--branco: #FFFFFF;
	--texto-suave-escuro: #BFC5D3; /* sobre carvão */
	--texto-suave-claro: #4E4E54;  /* sobre concreto */
	/* paleta clara (ritmo Terminal Industries: painéis claros com batidas escuras) */
	--papel: #F1EFE9;        /* base clara quente das seções light */
	--papel-elev: #FBFAF6;   /* superfície de card sobre o claro */
	--papel-borda: rgba(20,25,35,.12);
	--tinta: #191A1E;        /* texto sobre o claro (quase preto) */
	--tinta-suave: #55565C;  /* texto secundário sobre o claro */
	--stack-r: clamp(1.75rem, 4vw, 2.75rem); /* raio do topo dos painéis empilhados */
	--display: "Fredoka", "Trebuchet MS", sans-serif;
	--body: "Fredoka", system-ui, sans-serif;
	--dobra: clamp(5rem, 12vw, 9rem);
	--borda-suave: color-mix(in oklab, currentColor 25%, transparent);
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--peca-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M8 26 H34 C30 4 70 4 66 26 H92 V46 C72 44 72 66 92 64 V92 H66 C70 112 30 112 34 92 H8 Z'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* com Lenis ativo o smooth do navegador precisa sair do caminho,
   senão cada frame do Lenis é re-suavizado e o scroll chega atrasado */
html.lenis { scroll-behavior: auto !important; }
body {
	margin: 0;
	font-family: var(--body);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ink);
	background: var(--concreto);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, figure, blockquote, dl { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { max-width: 100%; }
::selection { background: var(--amarelo); color: var(--ink); }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; border-radius: 4px; }

.skip-link {
	position: absolute; left: -999px; top: 8px; z-index: 100;
	background: var(--ink); color: var(--branco); padding: .6rem 1rem; border-radius: 8px;
}
.skip-link:focus { left: 8px; }

/* ---------- Header ---------- */
.site-header {
	/* pill claro: a logo oficial tem o wordmark cinza-escuro, precisa de fundo claro */
	position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
	width: min(1160px, calc(100% - 1.5rem));
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .5rem .6rem .5rem 1.1rem;
	border-radius: 999px;
	background: color-mix(in oklab, var(--branco) 94%, transparent);
	box-shadow: 0 2px 18px rgba(0, 0, 0, .14);
	color: var(--ink);
	z-index: 50;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { display: block; height: 38px; width: auto; }
.site-nav { display: flex; align-items: center; gap: .25rem; }
.site-nav a {
	font-weight: 600; font-size: .95rem; text-decoration: none;
	padding: .5rem .8rem; border-radius: 999px;
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-cta { background: var(--amarelo); color: var(--ink); }
.nav-cta:hover { text-decoration: none; }

/* ---------- Botões ---------- */
.btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .95rem 1.75rem; border-radius: 999px;
	font-family: var(--body); font-weight: 700; font-size: 1rem;
	text-decoration: none; transition: transform .25s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn-light { background: var(--branco); color: var(--ink); }
.btn-ghost { border: 2px solid currentColor; }
.btn-amarelo { background: var(--amarelo); color: var(--ink); }
.btn-chapter { background: var(--branco); color: var(--chapter-cor, var(--ink)); }

/* ---------- Hero cinematográfico (cicla entre cenas) ---------- */
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero {
	position: relative; overflow: clip;
	min-height: 100svh; display: flex; flex-direction: column;
	color: var(--branco);
	background:
		radial-gradient(120% 90% at 78% 40%, rgba(40,227,211,.10), transparent 55%),
		linear-gradient(160deg, var(--hero-navy-1) 0%, var(--hero-navy-2) 62%, var(--carvao) 100%);
}
.hero-eyebrow {
	display: inline-flex; align-items: center; gap: .7rem;
	font-family: var(--display); font-weight: 600; font-size: .85rem;
	text-transform: uppercase; letter-spacing: .18em; color: var(--teal);
	margin-bottom: 1.5rem;
}
.hero-eyebrow span { width: 2rem; height: 2px; background: var(--teal); }
.hero-h {
	font-family: var(--display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: .98; letter-spacing: .002em;
	text-wrap: balance;
}
.hero-h em { font-style: normal; color: var(--teal); }
.hero-sub { max-width: 40ch; margin-top: 1.5rem; color: var(--texto-suave-escuro); font-size: 1.15rem; text-wrap: pretty; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.5rem; }
.btn-teal { background: var(--teal); color: #06231f; }
.btn-ghost-teal { border: 2px solid rgba(255,255,255,.28); color: var(--branco); }
.btn-ghost-teal:hover { border-color: var(--teal); }

/* ---------- Hero-obra: o canteiro que constrói no scroll ---------- */
.hero-obra { min-height: auto; display: block; }
.obra-pin { position: relative; height: 100svh; overflow: clip; }

.obra-copy {
	position: absolute; z-index: 2;
	left: clamp(1.5rem, 6vw, 6rem); top: 50%; translate: 0 -50%;
	width: min(560px, 82vw);
	display: grid;
}
.obra-stage { grid-area: 1 / 1; }
.obra-stage:not(.is-active) { opacity: 0; pointer-events: none; }
.obra-copy .hero-actions { grid-area: 2 / 1; }

.obra-hint {
	position: absolute; z-index: 2; left: 50%; bottom: 1.4rem; translate: -50% 0;
	font-family: var(--display); font-weight: 600; font-size: .8rem;
	text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.55);
}
.obra-hint span { display: inline-block; animation: desce 1.6s ease-in-out infinite; }
@keyframes desce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* — a cena: fotografia real com graduação da marca — */
.obra-foto-wrap { position: absolute; inset: 0; overflow: clip; }
.obra-foto, .obra-foto img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 62% 38%; /* enquadra o guindaste principal à direita */
}
.obra-foto img { transform-origin: 60% 45%; will-change: transform; }
/* canvas da sequência (desktop): assume o lugar do poster quando os frames chegam */
.obra-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
/* graduação navy só no poster: nos frames do canvas ela é embutida no pré-processamento
   (CSS filter em canvas full-viewport reprocessa a cada draw e trava o scroll) */
.obra-foto img { filter: saturate(.78) brightness(.82) contrast(1.06); }

/* graduação: horizonte âmbar que intensifica no final (blend screen numa cópia de gradiente) */
.obra-horizonte {
	position: absolute; inset: 0; opacity: 0; pointer-events: none;
	background: radial-gradient(75% 55% at 50% 78%, rgba(242,181,50,.4), transparent 65%);
	mix-blend-mode: screen;
}
/* scrim navy: legibilidade do texto à esquerda + fusão com o carvão embaixo */
.obra-scrim {
	position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(100deg, rgba(8,17,30,.88) 0%, rgba(8,17,30,.55) 34%, rgba(8,17,30,.08) 62%, transparent 78%),
		linear-gradient(180deg, rgba(8,17,30,.5) 0%, transparent 22%, transparent 62%, rgba(11,15,26,.92) 100%);
}
/* linhas técnicas discretas por cima da foto (assinatura blueprint, bem sutil) */
.obra-gridlines {
	position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image:
		linear-gradient(rgba(40,227,211,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(40,227,211,.05) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask: linear-gradient(180deg, #000 55%, transparent);
	mask: linear-gradient(180deg, #000 55%, transparent);
}
/* pings de GPS sobre a foto (tempo real) */
.obra-ping {
	position: absolute; left: var(--px); top: var(--py);
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--teal); box-shadow: 0 0 12px rgba(40,227,211,.8);
}
.obra-ping::after {
	content: ""; position: absolute; inset: -14px; border-radius: 50%;
	border: 2px solid var(--teal);
	animation: pingFoto 2.8s ease-out infinite; animation-delay: var(--pd, 0s);
}
.obra-ping-amarelo { background: var(--amarelo); box-shadow: 0 0 12px rgba(242,181,50,.8); }
.obra-ping-amarelo::after { border-color: var(--amarelo); }
@keyframes pingFoto { 0% { transform: scale(.3); opacity: .95; } 70%, 100% { transform: scale(1.5); opacity: 0; } }

/* marquee inferior (agora fora do hero, entre a obra e a ticker) */
.hero-marquee { position: relative; z-index: 2; overflow: hidden; background: var(--carvao); border-top: 1px solid rgba(255,255,255,.08); padding: 1.1rem 0; }
.hero-marquee-track { display: flex; width: max-content; animation: correr 32s linear infinite; }
.hero-marquee span {
	font-family: var(--display); font-weight: 600; font-size: 1.05rem; white-space: nowrap;
	text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.32); padding-right: .4rem;
}
.hero-marquee b { color: var(--teal); margin: 0 .7rem; }

/* ---------- Ticker ---------- */
/* padding-bottom extra = tamanho do overlap: a seção clara cobre só o amarelo vazio de baixo,
   deixando os números visíveis acima da dobra arredondada */
.ticker { overflow: hidden; background: var(--amarelo); color: var(--ink); padding: .9rem 0 calc(.9rem + var(--stack-r)); }
.ticker-track { display: flex; width: max-content; animation: correr 38s linear infinite; }
.ticker-run {
	font-family: var(--display); font-weight: 600; font-size: 1.2rem;
	text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; padding-right: .5rem;
}
.ticker-run i { font-style: normal; color: var(--vermelho); margin: 0 .9rem; font-size: .8em; }
@keyframes correr { to { transform: translateX(-50%); } }

/* ---------- Seções escuras base ---------- */
.secao {
	position: relative;
	padding: var(--dobra) clamp(1.25rem, 5vw, 4rem);
	background: var(--carvao); color: var(--branco);
}
.secao-elev { background: var(--carvao-elev); }

/* ---------- Painéis empilhados (transição estilo Terminal Industries) ----------
   cada seção sobe com o topo arredondado e cobre a anterior; os cantos revelam
   a cor da seção de baixo. Puro CSS: robusto, sem JS.
   A .ticker fica DE FORA: se entrar no overlap, é puxada por trás do marquee
   transparente do hero e o amarelo vaza. Ela fica flush, e a 1ª seção clara
   (#problema) é que arredonda por cima dela. */
.secao, .produtos-quadro, .sobre, .cta-final, .site-footer {
	position: relative;
	border-radius: var(--stack-r) var(--stack-r) 0 0;
	margin-top: calc(var(--stack-r) * -1);
	box-shadow: 0 -1.5rem 3.5rem rgba(0, 0, 0, .16);
}
.site-footer { box-shadow: 0 -1.5rem 3.5rem rgba(0, 0, 0, .28); }

/* ---------- Seções claras (papel) ---------- */
.secao--light { background: var(--papel); color: var(--tinta); }
.secao--light .secao-lede { color: var(--tinta-suave); }
.secao--light .statement em { color: var(--vermelho); } /* âmbar não tem contraste no claro; vermelho passa em display */
.secao--light .eyebrow { background: var(--amarelo); color: var(--ink); border-color: transparent; } /* pill âmbar preenchido */

/* problema */
/* solução (bento) — o card de integração fica escuro de propósito, como contraste */
.secao--light .bento-card { background: var(--papel-elev); border-color: var(--papel-borda); }
.secao--light .bento-card h3 { color: var(--tinta); }
.secao--light .bento-card p { color: var(--tinta-suave); }
.secao--light .bento-link { color: var(--tinta); }
.secao--light .bento-integracao { /* fica escuro de propósito: pop dentro da seção clara */
	background: linear-gradient(120deg, var(--azul-fundo) 0%, var(--carvao-elev) 60%);
	color: var(--branco);
}
/* especificidade extra: o texto do card escuro tem que vencer .secao--light .bento-card p */
.secao--light .bento-integracao .bento-integracao-tag { color: var(--amarelo); }
.secao--light .bento-integracao .bento-integracao-titulo { color: var(--branco); }
.secao--light .bento-integracao .bento-integracao-texto { color: var(--texto-suave-escuro); }
/* conexão (fluxo + barramento) */
.secao--light .fluxo-passo { background: var(--papel-elev); border-color: var(--papel-borda); }
.secao--light .fluxo-passo h3 { color: var(--tinta); }
.secao--light .fluxo-passo p { color: var(--tinta-suave); }
.secao--light .fluxo-num { background: var(--tinta); color: var(--papel); }
.secao--light .pilares li { border-color: var(--papel-borda); color: var(--tinta-suave); }
.secao--light .bus-rail, .secao--light .bus-loop { stroke: var(--papel-borda); }
.secao--light .bus-node circle:first-child { fill: var(--papel-elev); }
/* prova */
.secao--light .prova-numeros { border-color: var(--papel-borda); }
.secao--light .prova-numeros dd { color: var(--tinta); }
.secao--light .prova-numeros dt { color: var(--tinta-suave); }
.secao--light .prova-logos span { color: var(--tinta-suave); }
.secao--light .prova-depoimentos blockquote { background: var(--papel-elev); border-color: var(--papel-borda); }
.secao--light .prova-depoimentos p { color: var(--tinta); }
.secao--light .prova-depoimentos p::before, .secao--light .prova-depoimentos p::after { color: var(--vermelho); }
.secao--light .prova-depoimentos cite { color: var(--tinta-suave); }
.secao-inner { max-width: 1160px; margin: 0 auto; }
.secao-lede { max-width: 60ch; margin-top: 1.25rem; font-size: 1.15rem; color: var(--texto-suave-escuro); text-wrap: pretty; }

.eyebrow {
	display: inline-block; font-family: var(--display); font-weight: 600;
	font-size: .85rem; text-transform: uppercase; letter-spacing: .18em;
	color: var(--amarelo); margin-bottom: 1rem;
	padding: .3rem .8rem; border: 1px solid currentColor; border-radius: 999px;
}

/* Sobre (Quem é a Puzl) — seção clara */
.sobre {
	position: relative;
	background: var(--papel); color: var(--tinta);
	padding: var(--dobra) clamp(1.25rem, 5vw, 4rem);
}
.sobre .statement em { color: var(--vermelho); }
.sobre-prosa p { color: var(--tinta-suave); }
.sobre-prosa strong { color: var(--tinta); }
.valores li { border-color: var(--papel-borda); border-top-color: var(--tinta); }
.valores h3 { color: var(--tinta); }
.valores p { color: var(--tinta-suave); }
.statement {
	font-family: var(--display); font-weight: 600; text-transform: uppercase;
	font-size: clamp(1.9rem, 4.5vw, 3.1rem);
	line-height: 1.12; max-width: 26ch; text-wrap: balance;
}
.statement em { font-style: normal; color: var(--vermelho); }


.sobre-grid {
	display: grid; grid-template-columns: 1.1fr 1fr;
	gap: clamp(2.5rem, 6vw, 5rem);
	max-width: 1160px; margin: clamp(2.5rem, 6vw, 4rem) auto 0;
}
.sobre .statement { margin-inline: auto; max-width: 1160px; width: 100%; }
.sobre-prosa p { max-width: 62ch; text-wrap: pretty; }
.sobre-prosa p + p { margin-top: 1.25rem; }

.valores li { position: relative; border-top: 2px solid var(--ink); padding: 1.4rem 0 1.6rem 0; }
.valores li::before {
	content: ""; position: absolute; top: -11px; left: 28px;
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--vermelho);
}
.valores li:nth-child(1)::before { background: var(--verde); }
.valores li:nth-child(2)::before { background: var(--azul); }
.valores li:nth-child(3)::before { background: var(--amarelo); }
.valores h3 {
	font-family: var(--display); font-weight: 600; font-size: 1.6rem;
	text-transform: uppercase; letter-spacing: .02em;
}
.valores p { margin-top: .4rem; color: var(--texto-suave-claro); max-width: 46ch; }
.valores li:nth-child(4)::before { background: var(--vermelho); }

/* ---------- Rodapé-cartão (formato landonorris.com) ----------
   Moldura âmbar com painel escuro arredondado dentro; notch trapezoidal
   no topo, statement em duas vozes (Fredoka branco + serif âmbar), peça
   central como "capacete", colunas de páginas/sociais, faixa de clientes,
   pill central e barra âmbar de base. */
.rodape-cartao {
	position: relative;
	margin-top: calc(var(--stack-r) * -1);
	/* a moldura é a continuação do papel da seção anterior: o painel navy
	   flutua sobre ela (sem sombra própria na emenda, para não haver costura) */
	background: var(--papel);
	padding: clamp(10px, 1.2vw, 14px) clamp(10px, 1.2vw, 14px) 0;
}
.rodape-painel {
	position: relative; overflow: hidden;
	/* grade blueprint finíssima + glow azul atrás do chip: engenharia + software */
	background:
		radial-gradient(46% 34% at 50% 62%, rgba(26, 112, 183, .28), transparent 72%),
		radial-gradient(58% 42% at 50% 88%, rgba(242, 181, 50, .10), transparent 70%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 44px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 44px),
		linear-gradient(172deg, var(--hero-navy-1) 0%, var(--carvao) 64%);
	border-radius: calc(var(--stack-r) - 8px);
	/* respiro generoso: o conteúdo flutua no navy */
	padding: clamp(6rem, 11vw, 9rem) clamp(1.5rem, 6vw, 5rem) clamp(3rem, 5vw, 4.5rem);
	color: var(--branco); text-align: center;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .18); /* flutua sobre o papel */
}
.rodape-notch {
	position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: min(330px, 42vw); height: 22px;
	background: var(--papel); /* recorte: o papel "vaza" para dentro do painel */
	clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 26px 100%);
	z-index: 2;
}
/* linhas-fantasma com luz nadando (efeito terminal-industries) */
.rodape-linhas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.rodape-colunas, .rodape-cta-wrap { position: relative; z-index: 1; }
.rl-trilho { stroke: rgba(255, 255, 255, .07); stroke-width: 1.5; }
.rl-luz {
	stroke: rgba(255, 255, 255, .9); stroke-width: 1.5; stroke-linecap: round;
	stroke-dasharray: 46 954; /* dash + vão = pathLength: uma luz por trilho, loop contínuo */
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, .75));
	animation: rl-nada 15s linear infinite;
}
.rl-luz--b { animation-duration: 21s; animation-delay: -8s; }
.rl-luz--c { animation-duration: 12s; animation-delay: -4s; }
@keyframes rl-nada {
	from { stroke-dashoffset: 0; }
	to { stroke-dashoffset: -1000; }
}
.rodape-hero { position: relative; z-index: 1; display: inline-block; }
/* a peça pequena faz o papel da assinatura sobre o título */
.rodape-assinatura {
	position: absolute; top: -2.4rem; right: -1rem;
	width: clamp(46px, 6vw, 76px); height: auto;
	fill: var(--amarelo); rotate: 14deg;
}
.rodape-frase {
	font-family: var(--display); font-weight: 600; text-transform: uppercase;
	font-size: clamp(2.3rem, 7vw, 5.6rem); line-height: 1.03; letter-spacing: -.01em;
}
.rf-linha { display: block; }
.rodape-frase em {
	font-family: "Playfair Display", Georgia, serif;
	font-style: normal; font-weight: 500; letter-spacing: .01em;
	color: var(--amarelo);
}
.rodape-colunas {
	display: grid; grid-template-columns: 1fr 1fr;
	align-items: start; gap: clamp(1.5rem, 4vw, 3rem);
	max-width: 880px; margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}
.rodape-col { display: grid; gap: .35rem; justify-items: center; }
.rodape-col a {
	font-family: var(--display); font-weight: 600; text-transform: uppercase;
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	color: var(--branco); text-decoration: none;
}
.rodape-col a:hover { color: var(--amarelo); }
.rodape-rotulo {
	font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
	opacity: .58; margin-bottom: .55rem;
}
.rodape-acento { color: var(--amarelo) !important; margin-top: .9rem; }
.rodape-clientes {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 1rem clamp(1.4rem, 3.5vw, 3rem);
	margin-top: clamp(2rem, 4vw, 3rem);
	font-family: var(--display); font-weight: 600; text-transform: uppercase;
	font-size: .92rem; letter-spacing: .06em; opacity: .5;
}
.rodape-cta-wrap { margin-top: clamp(2.5rem, 5vw, 4rem); }
.rodape-cta { background: var(--amarelo); color: var(--ink); }
.rodape-base {
	display: flex; justify-content: space-between; align-items: center;
	gap: .5rem 1.5rem; flex-wrap: wrap;
	min-height: 48px;
	padding: .9rem clamp(.6rem, 2vw, 1.6rem);
	color: var(--tinta-suave); font-size: .85rem;
}
.rodape-base strong { color: var(--tinta); }
.rodape-base p { margin: 0; }
/* aba central escura que desce do painel sobre a barra de base, com
   chanfros de 45° e um fio âmbar embaixo — o recorte da referência */
.rodape-cartao::after {
	content: ""; position: absolute; z-index: 1;
	left: 50%; transform: translateX(-50%);
	bottom: 7px; width: min(42%, 640px); height: 58px;
	background: var(--carvao);
	clip-path: polygon(0 0, 100% 0, calc(100% - 42px) 100%, 42px 100%);
}
@media (max-width: 820px) {
	.rodape-colunas { grid-template-columns: 1fr; }
	.rodape-assinatura { top: -1.8rem; right: .2rem; }
	.rodape-base { justify-content: center; text-align: center; }
	.rodape-cartao::after { display: none; } /* no empilhado, a aba cobriria os textos */
}

/* ---------- Conexão: cards estilo lusion.co (Featured Work) ----------
   Grid 2 colunas com defasagem vertical na coluna direita; cada card tem a
   mídia (painel na cor do módulo com a peça e a grade blueprint), uma linha
   de meta em caixa alta e o título gigante em marquee — o título se repete
   numa fita com a seta fixa à esquerda, deslizando continuamente e reagindo
   à velocidade do scroll (JS). Sem JS ou com prefers-reduced-motion, a fita
   dá lugar ao título estático. */
.lw-grid {
	display: grid; grid-template-columns: 1fr 1fr;
	column-gap: 2vw; row-gap: clamp(3rem, 6vw, 5rem);
	max-width: 1160px;
	margin: clamp(3rem, 6vw, 4.5rem) auto 0;
}
.lw-card { display: block; min-width: 0; text-decoration: none; color: var(--tinta); } /* min-width: a fita max-content não pode inflar a coluna */
.lw-card:nth-child(even) { margin-top: clamp(3.5rem, 9vw, 8rem); } /* defasagem lusion */
.lw-media {
	position: relative; overflow: hidden;
	aspect-ratio: 100 / 65; border-radius: 15px;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 44px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 44px),
		linear-gradient(150deg, var(--cx-cor) 0%, color-mix(in srgb, var(--cx-cor), var(--carvao) 58%) 100%);
}
.lw-peca {
	position: absolute; inset: 0; margin: auto;
	width: 34%; height: auto; fill: rgba(255, 255, 255, .95);
	rotate: -5deg;
	filter: drop-shadow(0 22px 36px rgba(0, 0, 0, .3));
	transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.lw-card:hover .lw-peca { transform: scale(1.08) rotate(3deg); }
.lw-meta {
	margin: 1.4em 0 .55em;
	font-family: var(--display); font-weight: 500;
	font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
	color: var(--tinta-suave);
}
.lw-titulo {
	position: relative;
	padding-left: 1.2em;
	font-family: var(--display); font-weight: 600; text-transform: uppercase;
	font-size: clamp(1.4rem, 2.3vw, 2.1rem); line-height: 1.15;
	color: var(--tinta); text-wrap: balance;
}
.lw-seta { position: absolute; left: 0; color: var(--cx-cor); transition: translate .35s cubic-bezier(.16, 1, .3, 1); }
.lw-card:hover .lw-seta { translate: .25em 0; }
.lw-desc { margin-top: .5rem; padding-left: 1.55em; font-size: .98rem; color: var(--tinta-suave); max-width: 46ch; text-wrap: pretty; }
@media (max-width: 820px) {
	.lw-grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
	.lw-card:nth-child(even) { margin-top: 0; }
	.lw-titulo { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
	.lw-desc { padding-left: 0; }
}

/* ---------- Prova: carrossel de depoimentos (marquee) ----------
   Título + dashboard à esquerda; trilho infinito de cards à direita.
   Sem JS ou com prefers-reduced-motion, o trilho vira scroll manual
   (overflow-x) sem rotação — o JS liga o modo marquee via .carrossel-on. */
.prova-split {
	display: grid; grid-template-columns: minmax(280px, 400px) 1fr;
	gap: clamp(2rem, 4vw, 3.5rem); align-items: stretch;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
/* a coluna espelha o padding vertical do carrossel (2.6rem): o subtexto
   começa na altura do topo dos cards e o dashboard termina na do fundo */
.prova-painel-titulo {
	display: flex; flex-direction: column; justify-content: space-between;
	padding: 2.6rem 0;
}
.prova-painel-titulo .secao-lede { margin-top: 0; }
.prova-split .prova-numeros {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 1.4rem 1.5rem; margin-top: 2.2rem;
}
.prova-carrossel {
	overflow-x: auto; touch-action: pan-y;
	padding: 2.6rem 0; /* respiro para a escala do card central não cortar */
}
.prova-carrossel.carrossel-on {
	overflow: hidden; cursor: grab;
	/* as bordas do trilho somem em fade: o loop não mostra emenda */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.prova-carrossel.carrossel-on:active { cursor: grabbing; }
.carrossel-trilho {
	display: flex; gap: 1.4rem; width: max-content;
	list-style: none; margin: 0; padding: 0;
	will-change: transform;
}
.dep-card {
	position: relative; flex: 0 0 auto;
	width: min(320px, 76vw);
	min-height: 430px; /* formato retrato: citação no alto, autor ancorado embaixo */
	display: flex; flex-direction: column;
	border-radius: 24px; padding: 1.8rem 1.7rem;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .09);
	will-change: transform;
	user-select: none; -webkit-user-select: none;
}
/* cores sólidas alternadas: branco com borda fina, azul, âmbar claro */
.dep-card:nth-child(3n+1) { background: #FFFFFF; border: 1px solid var(--papel-borda); color: var(--tinta); }
.dep-card:nth-child(3n+2) { background: var(--azul); color: var(--branco); }
.dep-card:nth-child(3n+3) { background: #FBF1D8; color: var(--tinta); } /* âmbar 100 */
.dep-card h3 {
	font-family: var(--display); font-weight: 600;
	font-size: 1.02rem; margin-bottom: .55rem;
}
.dep-card p { font-size: 1.05rem; line-height: 1.5; }
.dep-card p::before { content: "\201C"; margin-right: .05em; }
.dep-card p::after { content: "\201D"; margin-left: .03em; }
.dep-card cite {
	display: block; margin-top: auto; /* autor ancorado no pé do card */
	padding-top: 1.1rem;
	font-style: normal; font-size: .88rem; opacity: .78;
}
@media (max-width: 900px) {
	.prova-split { grid-template-columns: 1fr; }
}

/* ---------- Quadro (mesa dos produtos) ---------- */
.produtos-quadro {
	background: var(--carvao);
	color: var(--branco);
	padding: var(--dobra) clamp(1.25rem, 5vw, 4rem);
	position: relative;
	overflow: clip; /* nubs não podem quebrar o layout horizontal, mas devem sobrar verticalmente */
}
.produtos-quadro-intro {
	max-width: 1160px; margin: 0 auto clamp(4rem, 8vw, 7rem);
	text-align: center;
}
.produtos-quadro-intro .statement { margin-inline: auto; color: var(--branco); }
.produtos-quadro-intro .statement em { color: var(--amarelo); }
.produtos-quadro-intro p {
	margin-top: 1.25rem; font-size: 1.125rem; color: var(--texto-suave-escuro);
	max-width: 46ch; margin-inline: auto;
}

/* ---------- Peças (módulos) ---------- */
.peca {
	position: relative;
	width: min(100%, 1040px);
	margin-inline: auto;
	/* grade blueprint finíssima só nos cards */
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 44px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 44px),
		var(--peca-cor);
	color: var(--peca-tinta, var(--branco));
	border-radius: clamp(16px, 1.6vw, 22px);
	padding: clamp(2.25rem, 4.5vw, 3.75rem);
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--peca-hairline, rgba(255, 255, 255, .12));
}
.peca + .peca { margin-top: clamp(6rem, 10vw, 9rem); }
/* cor-âncora por módulo (planejamento 2026): Mix=azul, Task=âmbar, Chat=verde */
.peca-mix   { --peca-cor: var(--azul-fundo);    margin-left: 0; margin-right: auto; rotate: -1deg; }
.peca-task  { --peca-cor: var(--amarelo); --peca-tinta: var(--ink); --peca-hairline: rgba(0,0,0,.14); margin-left: auto; margin-right: 0; rotate: 0.8deg; }
.peca-chat  { --peca-cor: var(--verde-fundo);   rotate: -0.5deg; }

/* textura de grid de engenharia (não cobre os tabs nem o conteúdo) */
.peca::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	border-radius: inherit;
	background-image:
		linear-gradient(var(--peca-grid, rgba(255,255,255,.045)) 1px, transparent 1px),
		linear-gradient(90deg, var(--peca-grid, rgba(255,255,255,.045)) 1px, transparent 1px);
	background-size: 42px 42px;
	-webkit-mask: linear-gradient(180deg, #000, transparent 78%);
	mask: linear-gradient(180deg, #000, transparent 78%);
}
.peca-task { --peca-grid: rgba(0,0,0,.06); }

/* tabs de conexão — retangulares, geométricos (módulos que se encaixam, não jigsaw de brinquedo) */
.nub {
	position: absolute; z-index: 0;
	background: var(--peca-cor);
	border-radius: 8px;
}
.nub-t, .nub-b { width: clamp(92px, 13%, 148px); height: clamp(26px, 3.4vw, 40px); left: 50%; }
.nub-t { top: 0;    translate: -50% -46%; }
.nub-b { bottom: 0; translate: -50%  46%; }
.nub-r, .nub-l { height: clamp(92px, 18%, 148px); width: clamp(26px, 3.4vw, 40px); }
.nub-r { top: 38%; right: 0; translate:  46% 0; }
.nub-l { top: 60%; left: 0;  translate: -46% 0; }

.peca-conteudo { position: relative; z-index: 1; }
.peca-conteudo-centro { text-align: center; max-width: 62ch; margin-inline: auto; }

.peca-head { max-width: 64ch; }
.peca-role {
	font-family: var(--display); font-weight: 600; font-size: .82rem;
	text-transform: uppercase; letter-spacing: .16em; opacity: .82;
}
.peca-tag-breve {
	display: inline-block; margin-left: .6rem; vertical-align: middle;
	background: var(--amarelo); color: var(--ink);
	font-size: .68rem; letter-spacing: .12em; font-weight: 600;
	padding: .2rem .6rem; border-radius: 999px; opacity: 1;
}
.peca-nome {
	font-family: var(--display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.02; letter-spacing: .005em;
	margin-top: .5rem; overflow: hidden;
}
.peca-nome .ch { display: inline-block; will-change: transform; }
.peca-desc {
	margin-top: 1rem;
	font-size: clamp(1rem, 1.5vw, 1.1rem); text-wrap: pretty;
}
.peca-conteudo-centro .peca-desc { margin-inline: auto; }

/* split em 2 colunas de altura igual: conteúdo à esquerda, painel de dados à direita.
   O painel sobe até o nível do título e centra o conteúdo — sem vazio no topo/base. */
.peca-split {
	display: grid; grid-template-columns: 1.12fr .88fr;
	gap: clamp(2rem, 4vw, 3.5rem); align-items: stretch;
}
.peca-main { display: flex; flex-direction: column; }
.peca-main .peca-lista { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.peca-main .btn-peca { align-self: flex-start; margin-top: auto; }

.peca-lista { margin: 0; }
.peca-lista li { position: relative; padding: .9rem 0 .9rem 1.9rem; border-top: 1px solid var(--borda-suave); }
.peca-lista li:last-child { border-bottom: 1px solid var(--borda-suave); }
.peca-lista li::before {
	content: ""; position: absolute; left: 0; top: 1.15rem;
	width: 14px; height: 14px; background: var(--amarelo);
	-webkit-mask: var(--peca-mask) no-repeat center / contain;
	mask: var(--peca-mask) no-repeat center / contain;
}
.peca-task .peca-lista li::before { background: var(--ink); } /* amarelo no amarelo = invisível */

.peca-painel {
	display: flex; flex-direction: column; justify-content: center;
	gap: clamp(1.75rem, 3vw, 2.5rem);
	padding-left: clamp(1.75rem, 3vw, 3rem);
	border-left: 1px solid var(--peca-hairline, rgba(255,255,255,.16));
}
.painel-label {
	font-family: var(--display); font-weight: 600; font-size: .72rem;
	text-transform: uppercase; letter-spacing: .18em; opacity: .6;
	margin-bottom: 1rem;
}
/* destaque grande (Task): número herói do painel */
.painel-destaque { display: block; }
.painel-destaque-num {
	display: block; font-family: var(--display); font-weight: 700;
	font-size: clamp(3rem, 6vw, 4.5rem); line-height: .95;
	color: var(--peca-tinta, var(--branco)); /* ink no amarelo do Task = ~8:1, salta por tamanho */
}
.painel-destaque-label {
	display: block; margin-top: .5rem; font-size: .95rem; opacity: .82; max-width: 22ch;
}

.peca-numeros { margin: 0; display: grid; gap: 1.1rem; }
.peca-numeros > div { display: flex; flex-direction: column-reverse; }
.peca-numeros dd {
	margin: 0; font-family: var(--display); font-weight: 700;
	font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1; color: var(--amarelo);
}
.peca-numeros dt { font-size: .85rem; opacity: .82; margin-top: .3rem; text-transform: uppercase; letter-spacing: .04em; }
.peca-task .peca-numeros dd { color: var(--vermelho); } /* contraste em cima do amarelo */

/* specs (Task): chips de ficha técnica que preenchem a coluna direita */
.peca-specs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.peca-specs li {
	padding: .5rem .85rem; border-radius: 8px;
	border: 1px solid var(--peca-hairline, rgba(255,255,255,.2));
	font-family: var(--display); font-weight: 600; font-size: .85rem;
	text-transform: uppercase; letter-spacing: .04em;
}

.peca-quote { margin: 0; }
.peca-quote p { font-size: 1.02rem; font-style: italic; line-height: 1.5; text-wrap: pretty; }
.peca-quote p::before, .peca-quote p::after { font-family: var(--display); font-weight: 700; font-size: 2em; line-height: 0; vertical-align: -0.35em; color: var(--amarelo); }
.peca-quote p::before { content: "\201C"; margin-right: .08em; }
.peca-quote p::after { content: "\201D"; margin-left: .05em; }
.peca-quote cite { display: block; margin-top: .75rem; font-style: normal; font-size: .88rem; opacity: .82; }

.peca-nota { margin: 0; font-size: .9rem; opacity: .82; }

.peca-em-breve {
	display: block; width: fit-content; margin: 1.75rem auto 0;
	font-family: var(--display); font-weight: 600; font-size: 1.05rem;
	text-transform: uppercase; letter-spacing: .12em;
	border: 3px solid var(--ink); border-radius: 8px; padding: .3rem .95rem;
	rotate: -3deg;
}

.btn-peca {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--branco); color: var(--peca-cor);
	border: 2px solid var(--branco);
}
.peca-task .btn-peca { background: var(--ink); color: var(--branco); border-color: var(--ink); }
.peca-conteudo-centro .btn-peca { margin-inline: auto; display: inline-flex; }
.peca-em-breve { border-color: var(--amarelo); color: var(--amarelo); } /* Chat agora é verde/branco: badge vira amarela */

/* (vinhetas SVG e proof-stats do sistema anterior removidos — a peça inteira virou a assinatura visual) */

/* ---------- Seção "O problema" ---------- */
/* .secao-problema agora é clara (.secao--light no HTML) */
/* ---------- TextRoll: letras rolam no hover do título da dor ----------
   Adaptação vanilla do componente de referência (framer-motion): cada
   letra é uma janela com duas cópias empilhadas; no hover do título a de
   cima sobe (-100%) e a de baixo entra (100% → 0), com delay proporcional
   à distância do centro (stagger 24ms). O JS fatia e calcula os delays. */
.statement-roll .tr-l {
	display: inline-block; position: relative; overflow: hidden;
	vertical-align: top;
	padding-bottom: .08em; margin-bottom: -.08em; /* vírgula não corta */
}
.statement-roll .tr-a,
.statement-roll .tr-b {
	display: inline-block; will-change: transform;
	transition: transform .4s cubic-bezier(.42, 0, .58, 1) var(--d, 0s);
}
.statement-roll .tr-b { position: absolute; inset: 0; transform: translateY(100%); }
/* entrada: letras escondidas abaixo da janela até a seção chegar (IO → .rolou);
   o hover só assume depois da entrada */
.statement-roll.pronto .tr-a { transform: translateY(100%); }
.statement-roll.rolou .tr-a { transform: translateY(0); }
.statement-roll.rolou:hover .tr-a { transform: translateY(-100%); }
.statement-roll.rolou:hover .tr-b { transform: translateY(0); }

/* ---------- Ponte: da dor para a resposta ----------
   "A dor" e "A resposta" são uma superfície contínua (sem a costura de
   painéis empilhados entre elas); no meio, o encaixe tracejado das dores
   recebe a peça âmbar no scroll e a frase vira resposta. Estado padrão
   (sem JS/GSAP) = já encaixado. */
.secao-solucao { margin-top: 0; border-radius: 0; box-shadow: none; } /* continua a superfície da dor */
/* a ponte encerra a seção: o respiro de baixo encolhe para a linha
   quase tocar "A resposta" */
.secao-problema { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.ponte { position: relative; text-align: center; padding-top: clamp(3.5rem, 7vw, 6rem); }
.ponte-frase {
	position: relative; height: 1.5em;
	font-family: var(--display); font-weight: 600; text-transform: uppercase;
	font-size: clamp(1.3rem, 2.6vw, 2rem);
}
.ponte-falta, .ponte-tem { position: absolute; inset: 0; }
.ponte-falta { color: var(--vermelho); opacity: 0; }
.ponte-tem { color: var(--tinta); }
.ponte-tem em { font-style: normal; color: var(--verde); }
.ponte-encaixe { position: relative; width: clamp(92px, 10vw, 132px); margin: 1.6rem auto 0; }
.ponte-socket {
	display: block; width: 100%; height: auto;
	fill: none; stroke: var(--vermelho); stroke-width: 2.5;
	stroke-dasharray: 7 7; stroke-linecap: round;
}
.ponte-peca {
	position: absolute; inset: 0; width: 100%; height: auto;
	fill: var(--amarelo);
	filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .22));
	will-change: transform;
}
.ponte-linha {
	/* absoluta e acima da seção seguinte: o JS mede a altura até o fim do
	   subtexto da resposta; sem JS fica o traço curto no lugar natural */
	position: absolute; left: calc(50% - 1px); z-index: 1;
	display: block; width: 2px; height: clamp(2.5rem, 5vw, 4rem);
	margin-top: 1.2rem;
	background: linear-gradient(180deg, var(--vermelho), var(--verde));
	transform-origin: top;
}

/* ---------- Dores: encaixes vazios (baralho que abre no scroll) ----------
   Cards claros; cada dor é a peça que falta (silhueta tracejada em
   vermelho vazando pelo canto). No desktop os cards chegam empilhados e
   tortos — a bagunça do mercado — e o scroll abre o baralho (GSAP). */
.dores {
	list-style: none; padding: 0;
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
}
.dor-card {
	position: relative; overflow: hidden;
	background: #FFFFFF;
	border: 1px solid var(--papel-borda);
	border-radius: 22px;
	padding: clamp(1.6rem, 3vw, 2.2rem);
	color: var(--tinta);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .1);
	will-change: transform;
}
.dor-peca {
	position: absolute; right: -16%; bottom: -22%;
	width: 62%; height: auto; rotate: 12deg;
	fill: none; stroke: var(--vermelho); stroke-width: 2.5;
	stroke-dasharray: 7 7; stroke-linecap: round;
	opacity: .38;
}
.dor-tag {
	font-family: var(--display); font-weight: 600;
	font-size: .75rem; text-transform: uppercase; letter-spacing: .18em;
	color: var(--vermelho);
}
.dor-card h3 {
	font-family: var(--display); font-weight: 600; text-transform: uppercase;
	font-size: clamp(1.15rem, 1.8vw, 1.4rem);
	margin: .7rem 0 .55rem;
}
.dor-card p { position: relative; font-size: .98rem; color: var(--tinta-suave); max-width: 34ch; }
@media (max-width: 900px) {
	.dores { grid-template-columns: 1fr; }
	.dor-card p { max-width: none; }
}

/* ---------- Seção "A solução — ecossistema" (bento) ---------- */
/* .secao-solucao é clara: em usa o vermelho do .secao--light */
.secao-solucao { overflow: clip; } /* os cards voam de fora da tela durante o encaixe pinado */
/* na cena pinada (mesma media query do matchMedia no JS) a seção vira uma
   "tela": padding e respiros encolhem para os cards caberem na viewport */
@media (min-width: 900px) and (min-height: 620px) {
	/* o fundo inferior soma o overlap do painel seguinte (--stack-r) + folga
	   generosa: o pin congela a altura com ~25px de drift de medição */
	.secao-solucao { padding-top: clamp(1.5rem, 4vh, 3rem); padding-bottom: calc(var(--stack-r) + clamp(3.5rem, 7vh, 5.5rem)); }
	.secao-solucao .bento { margin-top: clamp(1.5rem, 3.5vh, 2.5rem); }
}
.bento {
	margin-top: clamp(3rem, 6vw, 5rem);
	display: grid; gap: var(--bgap, clamp(1rem, 2vw, 1.5rem)); /* var animável: o vão fecha no encaixe */
}
.bento-solucao {
	grid-template-columns: repeat(3, 1fr);
	grid-auto-flow: dense;
}
/* cards-peça: a silhueta SVG (aba saliente + encaixe côncavo) É o corpo do card.
   z-index decrescente: a aba de cada peça pinta por cima do encaixe do vizinho */
.bento-card-mix { z-index: 3; }
.bento-card-task { z-index: 2; }
.bento-card-chat { z-index: 1; }
.bento-solucao > a.bento-card {
	background: transparent; border: 0; border-radius: 0;
	overflow: visible;
	filter: drop-shadow(0 16px 26px rgba(20, 25, 35, .12));
}
.bento-solucao > a.bento-card:hover { border-color: transparent; filter: drop-shadow(0 22px 32px rgba(20, 25, 35, .18)); }
.peca-svg {
	position: absolute; inset: 0; width: 100%; height: 100%;
	overflow: visible; z-index: -1; /* atrás do conteúdo, dentro do card */
}
.peca-svg path { fill: url(#peca-grad); stroke: var(--papel-borda); stroke-width: 1.5; transition: stroke .25s; }
/* o hover acende a silhueta na cor do próprio módulo */
.bento-card-mix:hover .peca-svg path { stroke: var(--azul); }
.bento-card-task:hover .peca-svg path { stroke: var(--amarelo); }
.bento-card-chat:hover .peca-svg path { stroke: var(--verde); }
/* a barra de cor acompanha os cantos da silhueta */
.bento-solucao > a.bento-card .bento-cor { left: 26px; right: 26px; border-radius: 0 0 6px 6px; }
/* ponto de encaixe: a aba mostra a cor do vizinho que a recebe */
.bento-plug {
	position: absolute; top: 50%; right: -8px; margin-top: -8px;
	width: 16px; height: 16px; border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(20, 25, 35, .25);
	z-index: 2;
}
.bento-card-mix .bento-plug { background: var(--amarelo); }  /* → Task */
.bento-card-task .bento-plug { background: var(--verde); }   /* → Chat */

@media (max-width: 1080px) {
	/* grade empilhada: sem junção lateral — cards voltam a ser retângulos */
	.peca-svg { display: none; }
	.bento-solucao > a.bento-card {
		background: var(--papel-elev); border: 1px solid var(--papel-borda);
		border-radius: 24px; overflow: hidden; filter: none;
	}
	.bento-solucao > a.bento-card .bento-cor { left: 0; right: 0; border-radius: 0; }
	.bento-plug { display: none; } /* sem junção lateral no empilhado */
	.bento-solucao > a.bento-card { background: #fff; } /* acompanha o gradiente das peças */
}
.bento-card {
	position: relative; padding: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--carvao-elev); border: 1px solid var(--carvao-borda);
	border-radius: 24px;
	text-decoration: none; color: inherit;
	display: flex; flex-direction: column; gap: .5rem;
	transition: transform .3s var(--ease-out), border-color .3s;
	overflow: hidden;
}
a.bento-card:hover { transform: translateY(-4px); border-color: var(--amarelo); }
.bento-cor {
	position: absolute; inset: 0 0 auto 0; height: 6px;
}
.bento-card-mix  .bento-cor { background: linear-gradient(90deg, var(--azul), color-mix(in srgb, var(--azul), #fff 40%)); box-shadow: 0 6px 18px -6px var(--azul); }
.bento-card-task .bento-cor { background: linear-gradient(90deg, var(--amarelo), color-mix(in srgb, var(--amarelo), #fff 40%)); box-shadow: 0 6px 18px -6px var(--amarelo); }
.bento-card-chat .bento-cor { background: linear-gradient(90deg, var(--verde), color-mix(in srgb, var(--verde), #fff 40%)); box-shadow: 0 6px 18px -6px var(--verde); }
.bento-card h3 {
	font-family: var(--display); font-weight: 700; text-transform: uppercase;
	font-size: 1.5rem; letter-spacing: .01em; margin-top: .75rem;
}
.bento-card p { color: var(--texto-suave-escuro); font-size: 1rem; text-wrap: pretty; }
.bento-link { margin-top: auto; font-weight: 700; color: var(--amarelo); font-size: .95rem; display: inline-flex; align-items: center; gap: .35rem; }
.bl-seta { transition: translate .3s cubic-bezier(.16, 1, .3, 1); }
a.bento-card:hover .bl-seta { translate: 5px 0; }
/* link na cor do módulo (tons com contraste no claro) */
.secao--light .bento-card-mix  .bento-link { color: var(--azul); }
.secao--light .bento-card-task .bento-link { color: var(--amarelo-fundo); }
.secao--light .bento-card-chat .bento-link { color: var(--verde); }

.bento-integracao {
	grid-column: span 3;
	background: linear-gradient(120deg, var(--azul-fundo) 0%, var(--carvao-elev) 60%);
	border-color: transparent;
}
.bento-integracao-tag {
	font-family: var(--display); font-weight: 600; font-size: .8rem;
	text-transform: uppercase; letter-spacing: .18em; color: var(--amarelo);
}
.bento-integracao-titulo {
	font-family: var(--display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.08;
	color: var(--branco); margin: .35rem 0 1rem;
}
.bento-integracao-texto { color: var(--texto-suave-escuro); font-size: 1.05rem; max-width: 60ch; }

/* ---------- Seção "Como as peças se conectam" (fluxo) ---------- */
/* .secao-conexao agora é clara (.secao--light no HTML) */
/* barramento de dados que se desenha no scroll */
.fluxo-bus { margin-top: clamp(2.5rem, 5vw, 4rem); }
.fluxo-bus svg { width: 100%; height: auto; overflow: visible; display: block; }
.bus-rail, .bus-loop { fill: none; stroke: var(--carvao-borda); stroke-width: 2; }
.bus-flow { fill: none; stroke: var(--amarelo); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 22; animation: busFlow 2.6s linear infinite; }
.bus-flow-loop { stroke: var(--vermelho); animation-duration: 3.4s; animation-direction: reverse; }
@keyframes busFlow { to { stroke-dashoffset: -120; } }
.bus-node circle:first-child { fill: var(--carvao); stroke: var(--c); stroke-width: 3; }
.bus-core { fill: var(--c); }

.fluxo {
	margin-top: clamp(2rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem; align-items: stretch;
}
.fluxo-passo {
	background: var(--carvao); border: 1px solid var(--carvao-borda);
	border-radius: 20px; padding: 1.5rem 1.4rem;
	display: flex; flex-direction: column; gap: .5rem;
	border-top-width: 4px;
}
.fluxo-mix   { border-top-color: var(--azul); }
.fluxo-task  { border-top-color: var(--amarelo); }
.fluxo-chat  { border-top-color: var(--verde); }
.fluxo-volta { border-top-color: var(--vermelho); }
.fluxo-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--branco); color: var(--ink);
	font-family: var(--display); font-weight: 700; font-size: 1rem;
}
.fluxo-passo h3 {
	font-family: var(--display); font-weight: 700; text-transform: uppercase;
	font-size: 1.15rem; letter-spacing: .01em; margin-top: .35rem;
}
.fluxo-passo p { color: var(--texto-suave-escuro); font-size: .95rem; }
.fluxo-seta {
	display: flex; align-items: center; justify-content: center;
	color: var(--amarelo); font-size: 1.6rem; font-weight: 700;
}
.fluxo-seta-loop { color: var(--vermelho); }

.pilares {
	margin-top: clamp(2rem, 4vw, 3rem);
	display: flex; flex-wrap: wrap; gap: .75rem;
	justify-content: center;
}
.pilares li {
	padding: .55rem 1.1rem; border: 1px solid var(--carvao-borda);
	border-radius: 999px;
	font-family: var(--display); font-weight: 600; font-size: .95rem;
	text-transform: uppercase; letter-spacing: .05em;
	color: var(--texto-suave-escuro);
}

/* ---------- Seção "Prova" ---------- */
/* .secao-prova é clara: em usa o vermelho do .secao--light */
.prova-numeros {
	margin-top: clamp(3rem, 6vw, 5rem);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(1rem, 2vw, 2rem);
	border-top: 1px solid var(--carvao-borda);
	border-bottom: 1px solid var(--carvao-borda);
	padding: 2rem 0;
}
.prova-numeros > div { display: flex; flex-direction: column-reverse; align-items: flex-start; }
.prova-numeros dd {
	margin: 0; font-family: var(--display); font-weight: 700;
	font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1; color: var(--amarelo);
}
.prova-numeros dt { font-size: .85rem; opacity: .82; margin-top: .4rem; }

.prova-logos {
	margin-top: 3rem;
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: clamp(1.25rem, 3vw, 3rem);
}
.prova-logos span {
	font-family: var(--display); font-weight: 600; font-size: 1.15rem;
	text-transform: uppercase; letter-spacing: .04em;
	color: var(--texto-suave-escuro);
}

.prova-depoimentos {
	margin-top: clamp(3rem, 5vw, 4rem);
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.prova-depoimentos blockquote {
	background: var(--carvao-elev); border: 1px solid var(--carvao-borda);
	border-radius: 20px; padding: 1.75rem;
}
.prova-depoimentos p {
	font-size: 1.05rem; line-height: 1.5; font-style: italic;
	color: var(--branco); text-wrap: pretty;
}
.prova-depoimentos p::before,
.prova-depoimentos p::after {
	font-family: var(--display); font-weight: 700;
	font-size: 2em; line-height: 0; vertical-align: -0.35em; color: var(--amarelo);
}
.prova-depoimentos p::before { content: "\201C"; margin-right: .08em; }
.prova-depoimentos p::after { content: "\201D"; margin-left: .05em; }
.prova-depoimentos cite {
	display: block; margin-top: 1rem; font-style: normal;
	font-size: .9rem; color: var(--texto-suave-escuro);
}

/* ---------- Seção "Diferenciais tecnológicos" (bento) ---------- */
.secao-diferenciais { background: var(--carvao-elev); }
.secao-diferenciais .statement em { color: var(--amarelo); }
.bento-diferenciais { grid-template-columns: repeat(4, 1fr); }
.bento-diferenciais .bento-card { background: var(--carvao); }
.bento-icone {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 12px;
	background: var(--amarelo); color: var(--ink);
	font-size: 1.4rem; font-weight: 700;
}
.bento-wide { grid-column: span 2; }

/* ---------- CTA final ---------- */
.cta-final {
	padding: var(--dobra) clamp(1.25rem, 5vw, 4rem);
	background: var(--carvao); color: var(--branco);
	text-align: center;
}
.cta-final h2 {
	font-family: var(--display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06; text-wrap: balance;
	max-width: 22ch; margin: 0 auto;
}
.cta-final h2 em { color: var(--amarelo); font-style: normal; }
.cta-final p {
	margin-top: 1.5rem; color: var(--texto-suave-escuro);
	font-size: 1.1rem; max-width: 50ch; margin-inline: auto;
}
.cta-final-acoes {
	margin-top: 2.5rem; display: flex; flex-wrap: wrap;
	gap: .9rem; justify-content: center;
}


/* ---------- Footer ---------- */
.site-footer { background: var(--carvao); color: var(--branco); padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem) 3rem; }
.footer-inner { max-width: 1160px; margin: 0 auto; }
.footer-meta { display: grid; gap: .8rem; color: var(--texto-suave-escuro); font-size: .95rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-nav a { text-underline-offset: 4px; }
.footer-copy { opacity: .8; }

/* ---------- Reveals ---------- */
html.js .reveal {
	opacity: 0; transform: translateY(28px);
	transition: opacity .7s ease, transform .7s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 100ms);
}
html.js .reveal.in { opacity: 1; transform: none; }
/* No modo GSAP quem anima é o ScrollTrigger, sem transições CSS */
html.gsap .reveal { transition: none; }
/* animation de transform do CSS vence inline style: no modo GSAP o loop do ticker é do GSAP */
html.gsap .ticker-track { animation: none; }

/* ---------- Preloader ---------- */
.preloader {
	position: fixed; inset: 0; z-index: 200;
	display: none; place-content: center; justify-items: center; gap: 1.25rem;
	background: var(--carvao); color: var(--branco);
}
html.gsap .preloader { display: grid; }
.preloader-piece { width: 74px; fill: var(--amarelo); }
.preloader-count { font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 8vw, 4.5rem); line-height: 1; }

/* ---------- Cursor custom ---------- */
.cursor-dot, .cursor-ring {
	/* centralização via xPercent/yPercent no JS — transform de CSS conflita com o GSAP */
	position: fixed; top: 0; left: 0; z-index: 300;
	pointer-events: none; border-radius: 50%; display: none;
}
.cursor-dot { width: 10px; height: 10px; background: var(--amarelo); }
.cursor-ring { width: 44px; height: 44px; border: 2px solid var(--amarelo); opacity: .55; transition: background-color .25s, border-color .25s; }
.cursor-ring.is-card { background: color-mix(in oklab, var(--amarelo) 12%, transparent); }
@media (pointer: fine) {
	html.gsap .cursor-dot, html.gsap .cursor-ring { display: block; }
	html.gsap, html.gsap a, html.gsap button { cursor: none; }
}

/* (marquees dos capítulos removidos — não fazem sentido agora que a peça é o objeto) */

/* ---------- Granulação global ---------- */
html.gsap body::after {
	content: ""; position: fixed; inset: 0; z-index: 120; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
	.bento-solucao, .bento-diferenciais, .prova-numeros {
		grid-template-columns: repeat(2, 1fr);
	}
	.bento-integracao, .bento-wide { grid-column: span 2; }
	.fluxo { grid-template-columns: repeat(2, 1fr); }
	.fluxo-bus { display: none; } /* o barramento horizontal não mapeia os passos empilhados */
}
@media (max-width: 560px) {
	.fluxo { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
	/* obra no mobile: copy no topo, foto reenquadrada no guindaste principal */
	.obra-copy { top: clamp(5rem, 11vh, 7rem); translate: 0 0; left: 1.25rem; width: min(560px, calc(100vw - 2.5rem)); }
	.obra-foto, .obra-foto img { object-position: 68% 40%; }
	.obra-scrim {
		background:
			linear-gradient(180deg, rgba(8,17,30,.82) 0%, rgba(8,17,30,.45) 40%, rgba(8,17,30,.1) 60%, rgba(11,15,26,.92) 100%);
	}
	.obra-copy .hero-actions { margin-top: 1.5rem; }
}
@media (max-width: 900px) {
	.sobre-grid { grid-template-columns: 1fr; }
	.peca { rotate: 0deg !important; margin-inline: auto !important; }
	.peca + .peca { margin-top: clamp(5rem, 12vw, 7rem); }
	.peca-split { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); }
	.peca-main .btn-peca { margin-top: clamp(1.75rem, 3vw, 2.5rem); } /* sem esticar coluna, botão volta ao fluxo */
	.peca-painel { border-left: 0; padding-left: 0; justify-content: flex-start; } /* some o divisor quando empilha */
}
@media (max-width: 720px) {
	/* header compacto: logo + Contato (demais âncoras acessíveis rolando as seções) */
	.site-nav a:not([href="#contato"]) { display: none; }
	.site-nav a[href="#contato"] { background: var(--amarelo); color: var(--ink); }
}
@media (max-width: 640px) {
	.bento-solucao, .bento-diferenciais, .prova-numeros {
		grid-template-columns: 1fr;
	}
	.bento-integracao, .bento-wide { grid-column: span 1; }
	.ticker-run { font-size: 1.1rem; }
	.hero-right { max-width: 280px; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	/* hero-obra: sem GSAP a cena já fica no estado final (prédio pronto e aceso);
	   mostra só o estágio 0 e esconde a dica de rolar (nada constrói) */
	.obra-stage { opacity: 0; }
	.obra-stage.is-active { opacity: 1; }
	.obra-hint { display: none !important; }
	.hero-actions { opacity: 1; }
	html.js .reveal { opacity: 1; transform: none; }
	.ticker-track, .hero-marquee-track { flex-wrap: wrap; width: auto; }
	.ticker-run[aria-hidden], .hero-marquee span[aria-hidden] { display: none; }
	.ticker-run { white-space: normal; }
	.preloader, .cursor-dot, .cursor-ring { display: none !important; }
	.rl-luz { display: none; } /* sem animação, a luz parada viraria um risco solto */
}