/* ==========================================================================
FullON — sistema da landing page
Fonte da verdade: marketing/lp-vendas/00-prompt-mestre.json
Nenhum valor de cor, espaçamento ou raio deve aparecer hardcoded fora do
:root. Se precisar de um valor novo, crie o token primeiro.
========================================================================== */
/* --------------------------------------------------------------------------
1. FONTES
Variáveis, subset latin (U+0000-00FF cobre todos os acentos do português).
3 arquivos, 88kb no total.
Aktiv Grotesk (kit Typekit jcl7jxt) é a fonte do logo, mas o kit da Adobe
é travado por domínio e por assinatura Creative Cloud. Para ligar:
1. cadastre o domínio de produção no kit jcl7jxt no Adobe Fonts
2. descomente o no do HTML
3. descomente o @font-face de ajuste abaixo
Enquanto isso, Archivo é o display real — é o substituto oficial previsto
em _memoria/DESIGN-fullon.md, mesmo esqueleto de grotesca neutra.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Archivo';
src: url('fontes/archivo-latin.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Instrument Sans';
src: url('fontes/instrument-sans-latin.woff2') format('woff2');
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Martian Mono';
src: url('fontes/martian-mono-latin.woff2') format('woff2');
font-weight: 100 800;
font-style: normal;
font-display: swap;
}
/* Quando o Aktiv for habilitado, este bloco alinha as métricas do Archivo às
dele para que a troca não gere salto de layout (CLS).
@font-face {
font-family: 'Archivo Fallback';
src: local('Archivo');
size-adjust: 97%;
ascent-override: 92%;
descent-override: 24%;
line-gap-override: 0%;
}
*/
/* --------------------------------------------------------------------------
2. TOKENS
-------------------------------------------------------------------------- */
:root {
/* cor — paleta da marca */
/* Tom único de preto da página inteira, do topo ao CTA final. --abyss
continua existindo como "cor sobre neon" (texto de botão, marcador de
radio), que é outro papel — não é fundo de página. */
--void: #050507;
--abyss: #080808;
--panel: #121212;
--surface: #1A1A1A;
--elevated: #232323;
--hairline: #262626;
--neon: #39FF14;
--neon-hover: #4DFF2E;
--neon-active: #2BD10E;
--offwhite: #F5F5F5;
--soft: #D8D8D8;
--gray: #AAAAAA;
/* gray só passa em AA sobre --surface a partir de 16px.
Abaixo disso, usar --gray-sm. Não trocar por --gray "porque fica igual". */
--gray-sm: #C4C4C4;
/* --dim é decorativo. Reprova em AA como texto: 3.4:1 sobre --surface.
Para texto de baixa ênfase (placeholder, "(opcional)", legenda de apoio)
usar --dim-text, que entrega 5.0:1 sobre --surface e 5.4:1 sobre --panel. */
--dim: #6E6E6E;
--dim-text: #8A8A8A;
/* Marca d'água decorativa (numeral gigante atrás das fases). Um degrau
acima de --hairline para existir sem competir. É aria-hidden, então
não está sujeita a contraste mínimo. */
--watermark: #2E2E2E;
/* cor — estado. Só em dado e validação, nunca como cor de marca. */
--up: #22B470;
--warn: #F59F0A;
--down: #DE353B;
/* neon derivado — transparências para borda e fundo de baixa intensidade */
--neon-08: rgba(57, 255, 20, 0.08);
--neon-12: rgba(57, 255, 20, 0.12);
--neon-25: rgba(57, 255, 20, 0.25);
--neon-30: rgba(57, 255, 20, 0.30);
--neon-40: rgba(57, 255, 20, 0.40);
--warn-12: rgba(245, 159, 10, 0.12);
--warn-30: rgba(245, 159, 10, 0.30);
/* halo do CTA — o neon acendendo o botão principal, em duas intensidades */
--glow-cta: 0 4px 16px var(--neon-30), 0 0 38px var(--neon-25);
--glow-cta-hover: 0 6px 22px var(--neon-40), 0 0 60px var(--neon-30);
/* tipografia */
--ff-display: 'aktiv-grotesk', 'Archivo', system-ui, -apple-system, sans-serif;
--ff-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
--ff-mono: 'Martian Mono', ui-monospace, 'Cascadia Code', monospace;
--fs-micro: 0.6875rem; /* 11px */
--fs-eyebrow: 0.75rem; /* 12px */
--fs-caption: 0.8125rem; /* 13px */
--fs-body-sm: 0.9375rem; /* 15px */
--fs-body: 1rem; /* 16px */
--fs-body-lg: 1.125rem; /* 18px */
--fs-title: 1.3125rem; /* 21px */
--fs-display-md: clamp(1.5rem, 3vw, 2.25rem);
--fs-display-lg: clamp(2rem, 5.5vw, 3.75rem);
--fs-display-xl: clamp(2.75rem, 9vw, 6.5rem);
--fs-kpi: clamp(2.25rem, 6vw, 4rem);
/* Martian Mono já nasce larga. O JSON pede 0.12–0.18em de tracking, mas
nessa família isso vira bloco ilegível — 0.08em entrega a mesma leitura
de HUD sem esticar. Desvio deliberado, documentado. */
--ls-mono: 0.08em;
--ls-tight: -0.02em;
--ls-tighter: -0.03em;
/* espaçamento — base 4px */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
--sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
--sp-28: 112px; --sp-32: 128px;
/* raio */
--r-xs: 4px; --r-sm: 6px; --r-md: 10px;
--r-lg: 12px; --r-xl: 16px; --r-pill: 9999px;
/* layout */
--container: 1240px;
--pad: 20px;
--nav-h: 72px;
--banda: var(--sp-16);
/* Faixa ampla: usada nas duas batidas emocionais da página — onde a dor
abre e onde o CTA fecha. É o contraste que cria cadência; sem ela toda
seção teria o mesmo peso. */
--banda-amplo: var(--sp-20);
/* movimento */
--t-fast: 160ms;
--t-base: 220ms;
--t-reveal: 280ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 768px) {
:root { --pad: 24px; --banda: var(--sp-20); --banda-amplo: var(--sp-24); }
}
@media (min-width: 1024px) {
:root { --pad: 40px; --banda: var(--sp-24); --banda-amplo: var(--sp-28); }
}
/* Monitores grandes: 1240px no meio de uma tela de 1920 deixa 340px mortos de
cada lado e a página lê como uma coluna centralizada. O container acompanha
a tela — os limites de linha em ch seguem protegendo a leitura do texto. */
@media (min-width: 1440px) {
:root { --container: 1400px; --pad: 56px; }
}
@media (min-width: 1760px) {
:root { --container: 1600px; --pad: 72px; }
}
/* --------------------------------------------------------------------------
3. RESET E BASE
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* O fundo sólido mora no , não no body: assim a camada de luz
ambiente (body::before, z-index -1) pinta por cima dele e por baixo do
conteúdo. Se o fundo ficasse no body, ele taparia a luz. */
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
background: var(--void);
}
body {
background: transparent;
color: var(--offwhite);
font-family: var(--ff-body);
font-size: var(--fs-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
/* O [hidden] do navegador é `display:none` na folha do UA, então qualquer
classe nossa com display explícito ganha dele. Sem isso, o card de sucesso
e o botão "Voltar" aparecem mesmo com hidden. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4 {
font-family: var(--ff-display);
font-weight: 800;
line-height: 1.05;
letter-spacing: var(--ls-tight);
}
p { max-width: 68ch; }
::selection { background: var(--neon); color: var(--abyss); }
:focus-visible {
outline: 2px solid var(--neon);
outline-offset: 3px;
border-radius: var(--r-xs);
}
/* Âncoras não podem ficar embaixo da nav sticky */
[id] { scroll-margin-top: calc(var(--nav-h) + var(--sp-4)); }
.skip {
position: absolute;
left: var(--sp-4);
top: calc(-1 * var(--sp-20));
z-index: 200;
background: var(--neon);
color: var(--abyss);
font-family: var(--ff-display);
font-weight: 700;
font-size: var(--fs-body-sm);
padding: var(--sp-3) var(--sp-5);
border-radius: var(--r-md);
text-decoration: none;
transition: top var(--t-fast) var(--ease);
}
.skip:focus { top: var(--sp-4); }
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
/* --------------------------------------------------------------------------
4. LAYOUT
-------------------------------------------------------------------------- */
.wrap {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--pad);
}
.banda { padding-block: var(--banda); position: relative; }
.banda--panel { background: var(--panel); }
.banda--tight { padding-block: var(--sp-12); }
/* Camada de luz ambiente — o único quebra-monotonia do preto agora que as
grades saíram. Fica fixa na janela (não rola junto): as manchas passam
por trás do conteúdo conforme a página sobe, então o fundo respira sem
nenhum elemento entrando em cena. Opacidades baixas de propósito — é luz
difusa, não mancha verde. Fica atrás de tudo via z-index negativo, com o
fundo sólido no pra não haver disputa de pintura. */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(46vw 38vw at 12% 14%, rgba(57, 255, 20, 0.070), transparent 70%),
radial-gradient(38vw 32vw at 88% 32%, rgba(57, 255, 20, 0.055), transparent 70%),
radial-gradient(52vw 40vw at 24% 62%, rgba(57, 255, 20, 0.050), transparent 72%),
radial-gradient(34vw 30vw at 78% 84%, rgba(57, 255, 20, 0.060), transparent 70%),
radial-gradient(30vw 26vw at 50% 46%, rgba(57, 255, 20, 0.035), transparent 72%);
}
/* --------------------------------------------------------------------------
5. TIPOGRAFIA UTILITÁRIA
-------------------------------------------------------------------------- */
.micro {
font-family: var(--ff-mono);
font-weight: 500;
font-size: var(--fs-micro);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--gray);
line-height: 1.4;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-family: var(--ff-mono);
font-weight: 500;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--neon);
line-height: 1.3;
}
.eyebrow--pill {
background: var(--neon-08);
border: 1px solid var(--neon-25);
border-radius: var(--r-pill);
padding: var(--sp-2) var(--sp-4);
}
/* Versão recuada. A dobra do hero tem três destaques neon — claim da headline,
CTA primário e botão do interruptor. O eyebrow é rótulo, não foco: cede o
neon para o gráfico e mantém só a forma de pílula. */
.eyebrow--quiet { color: var(--gray); background: transparent; border-color: var(--hairline); }
.h-xl { font-size: var(--fs-display-xl); letter-spacing: var(--ls-tighter); line-height: 0.95; }
.h-lg { font-size: var(--fs-display-lg); letter-spacing: var(--ls-tight); line-height: 1.02; }
.h-md { font-size: var(--fs-display-md); line-height: 1.1; }
.h-sm { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-title); line-height: 1.2; letter-spacing: var(--ls-tight); }
.lead { font-size: var(--fs-body-lg); color: var(--gray); line-height: 1.55; max-width: 46ch; }
.sub { color: var(--gray); }
.sm { font-size: var(--fs-body-sm); color: var(--gray-sm); }
.num { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }
.on { color: var(--neon); }
/* Cabeçalho de seção — a escada que toda banda repete */
.sec-head { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-10); max-width: 62ch; }
@media (min-width: 1024px) { .sec-head { margin-bottom: var(--sp-12); } }
.sec-head--center { align-items: center; text-align: center; margin-inline: auto; }
/* --------------------------------------------------------------------------
6. HUD — micro-labels, crosshair, grid
Assinatura técnica. Discreto por decisão: orienta sem virar ruído.
-------------------------------------------------------------------------- */
.cross {
position: absolute;
width: 12px; height: 12px;
color: var(--hairline);
pointer-events: none;
}
.cross::before, .cross::after {
content: ''; position: absolute; background: currentColor;
}
.cross::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.cross::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }
.cross--tl { top: -6px; left: -6px; }
.cross--tr { top: -6px; right: -6px; }
.cross--bl { bottom: -6px; left: -6px; }
.cross--br { bottom: -6px; right: -6px; }
/* .grid-bg mantido só como âncora de empilhamento: a grade quadriculada
saiu da página inteira, quem quebra o preto agora é a luz ambiente. */
.grid-bg { position: relative; }
.grid-bg > * { position: relative; z-index: 1; }
/* Fundo de pontos do hero (DotGrid). O canvas é pintado pelo JS; sem JS a
dobra fica no fundo liso, sem buraco de layout. Não recebe ponteiro — quem
escuta mouse e clique é a própria section, então botão e link seguem
clicáveis por cima. A máscara evita que a malha termine em corte reto
contra a nav e contra a seção seguinte. */
.dot-bg { position: relative; }
.dot-bg > * { position: relative; z-index: 1; }
.dot-bg__canvas {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 58%, transparent 94%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 58%, transparent 94%);
}
/* --------------------------------------------------------------------------
7. BOTÕES
Hierarquia por superfície, não por tamanho. Primário e secundário têm a
mesma altura — só um é neon.
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
min-height: 52px;
padding: var(--sp-4) var(--sp-6);
font-family: var(--ff-display);
font-weight: 700;
font-size: var(--fs-body-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
text-decoration: none;
text-align: center;
border: 1px solid transparent;
border-radius: var(--r-pill);
cursor: pointer;
transition: background-color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
box-shadow var(--t-base) var(--ease),
color var(--t-fast) var(--ease);
}
.btn--pri { background: var(--neon); color: var(--abyss); }
.btn--pri:hover { background: var(--neon-hover); }
.btn--pri:active { background: var(--neon-active); }
.btn--sec { background: var(--surface); color: var(--offwhite); border-color: var(--hairline); }
.btn--sec:hover { background: var(--elevated); border-color: var(--neon-40); }
.btn--ghost { background: transparent; color: var(--gray); min-height: 44px; padding-inline: var(--sp-4); }
.btn--ghost:hover { color: var(--offwhite); }
.btn--pill { min-height: 44px; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-caption); }
.btn:disabled, .btn[aria-disabled='true'] {
background: var(--elevated); color: var(--dim);
border-color: var(--hairline); cursor: not-allowed;
}
.btn svg { width: 16px; height: 16px; flex: none; }
/* Par de CTAs do hero — pill (padrão de todo .btn agora) com hierarquia
feita por luz. O primário é o único elemento aceso da dobra: halo neon
permanente que cresce no hover. O secundário perde a superfície e fica só
em contorno, de modo que a escolha padrão se leia à distância. */
.hero .cta-par .btn--pri {
font-weight: 800;
letter-spacing: 0.05em;
box-shadow: var(--glow-cta);
}
.hero .cta-par .btn--pri:hover,
.hero .cta-par .btn--pri:focus-visible { box-shadow: var(--glow-cta-hover); }
.hero .cta-par .btn--sec {
background: transparent;
border-color: var(--elevated);
}
.hero .cta-par .btn--sec:hover { background: var(--surface); border-color: var(--neon-40); }
.cta-par { display: flex; flex-direction: column; gap: var(--sp-3); }
.cta-par .btn { width: 100%; }
@media (min-width: 480px) {
.cta-par { flex-direction: row; flex-wrap: wrap; }
.cta-par .btn { width: auto; flex: 1 1 220px; }
}
/* --------------------------------------------------------------------------
8. CARDS, CHIPS, KPI
-------------------------------------------------------------------------- */
.card {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-lg);
padding: var(--sp-5);
transition: background-color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease);
}
@media (min-width: 768px) { .card { padding: var(--sp-6); } }
.card--hover:hover { background: var(--elevated); border-color: var(--neon-30); }
.chip {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
border: 1px solid var(--hairline);
border-radius: var(--r-pill);
padding: var(--sp-2) var(--sp-4);
font-family: var(--ff-mono);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--gray-sm);
white-space: nowrap;
min-height: 34px; /* mesma altura para todos, com ou sem ícone */
}
.chip svg { width: 14px; height: 14px; color: var(--neon); flex: none; }
/* Chips com textos de comprimentos diferentes: centrados, a fileira fica
simétrica em vez de terminar com um vão à direita, e a quebra em telas
menores acontece pelo meio, não escalonada. */
.chip-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--sp-3);
}
.kpi { display: flex; flex-direction: column; gap: var(--sp-2); }
.kpi__v {
font-family: var(--ff-display);
font-weight: 800;
font-size: var(--fs-kpi);
line-height: 1;
letter-spacing: var(--ls-tight);
font-variant-numeric: tabular-nums;
}
.kpi__l { color: var(--gray); }
/* --------------------------------------------------------------------------
9. PENDÊNCIA
Tudo que ainda não tem conteúdo real nasce visível em âmbar. Se subir
assim, é impossível não notar. Buscar por [data-pendente].
-------------------------------------------------------------------------- */
[data-pendente] { position: relative; }
.pend {
border: 1px dashed var(--warn-30);
background: var(--warn-12);
border-radius: var(--r-md);
padding: var(--sp-4);
color: var(--warn);
font-family: var(--ff-mono);
font-size: var(--fs-micro);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
line-height: 1.6;
}
.pend--vazia {
display: grid;
place-items: center;
text-align: center;
min-height: 180px;
}
/* Moldura da foto que ainda não existe.
O padding inferior reserva a faixa onde o card de credencial flutua, para
o label não ficar por baixo dele no mobile. */
.moldura {
position: relative;
border: 1px dashed var(--warn-30);
border-radius: var(--r-lg);
background-image:
linear-gradient(to right, var(--hairline) 1px, transparent 1px),
linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
background-size: 40px 40px;
display: grid;
place-items: center;
min-height: 440px;
padding-block: var(--sp-16) 140px;
}
.moldura__lbl {
font-family: var(--ff-mono);
font-size: var(--fs-micro);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--warn);
text-align: center;
padding: var(--sp-4);
}
/* --------------------------------------------------------------------------
10. NAV
Barra escura, de ponta a ponta, fixa no topo — sem pílula flutuante.
Logo à esquerda, GooeyNav centralizado (≥1024px), WhatsApp à direita.
Abaixo de 1024px o GooeyNav cede lugar a um botão de menu com painel.
-------------------------------------------------------------------------- */
/* Glassmorphism: bem mais translúcido que um fundo escuro sólido — o que
estiver atrás (imagem, gradiente) precisa aparecer borrado através da
barra, não ficar tapado. saturate() é o que dá a "vidro", não só o blur. */
.nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(24, 24, 26, 0.45);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.nav[data-scrolled='true'] { background: rgba(24, 24, 26, 0.65); border-bottom-color: var(--hairline); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); min-height: var(--nav-h); }
.nav__logo { display: flex; align-items: center; color: var(--offwhite); text-decoration: none; flex: none; }
.nav__logo svg { height: 22px; width: auto; }
.nav__acoes { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.nav__toggle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 40px;
height: 40px;
flex: none;
border: 0;
border-radius: var(--r-pill);
background: var(--surface);
border: 1px solid var(--hairline);
cursor: pointer;
}
.nav__toggle-linha {
display: block;
width: 16px;
height: 2px;
background: var(--offwhite);
transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.nav[data-aberto='true'] .nav__toggle-linha:first-child { transform: translateY(6px) rotate(45deg); }
.nav[data-aberto='true'] .nav__toggle-linha:last-child { transform: translateY(-6px) rotate(-45deg); }
/* Abaixo de 480px o rótulo quebraria em duas linhas e espremeria o logo. */
.nav__wa { white-space: nowrap; }
@media (max-width: 479px) {
.nav__wa span { display: none; }
.nav__wa { width: 44px; min-height: 44px; padding: 0; }
.nav__wa svg { width: 20px; height: 20px; }
}
/* Painel de mobile/tablet — mesmo truque de grid 0fr→1fr da versão anterior. */
.nav__painel-outer {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 90;
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 420ms var(--ease);
pointer-events: none;
}
.nav[data-aberto='true'] .nav__painel-outer { grid-template-rows: 1fr; pointer-events: auto; }
.nav__painel {
overflow: hidden;
min-height: 0;
display: grid;
gap: var(--sp-3);
padding-block: var(--sp-3);
opacity: 0;
transition: opacity var(--t-fast) var(--ease);
}
.nav[data-aberto='true'] .nav__painel { opacity: 1; transition-delay: 160ms; }
@media (min-width: 640px) { .nav__painel { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .nav__toggle, .nav__painel-outer { display: none; } }
.nav__card {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-lg);
padding: var(--sp-5);
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
.nav__card--destaque { background: var(--elevated); border-color: var(--neon-25); }
.nav__card-titulo {
font-family: var(--ff-mono);
font-size: var(--fs-micro);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--neon);
margin-bottom: var(--sp-2);
}
.nav__card-link {
color: var(--gray-sm);
text-decoration: none;
font-size: var(--fs-body-sm);
padding-block: var(--sp-1);
transition: color var(--t-fast) var(--ease);
}
.nav__card-link:hover, .nav__card-link[aria-current='true'] { color: var(--offwhite); }
/* --------------------------------------------------------------------------
10b. NAV — LINKS CENTRAIS
Simples: sem pílula gooey, sem partícula, sem clique animado. O item da
seção visível ganha só uma linha verde ao redor (via aria-current, que o
scroll-spy do initNav() já mantém — nenhum JS novo precisa disso).
-------------------------------------------------------------------------- */
.gooeynav { position: relative; display: none; }
@media (min-width: 1024px) { .gooeynav { display: block; } }
.gooeynav__lista {
display: flex;
align-items: center;
gap: var(--sp-2);
list-style: none;
margin: 0;
padding: 0;
}
.gooeynav__item { position: relative; }
.gooeynav__item:focus-within { outline: 2px solid var(--neon); outline-offset: 2px; border-radius: var(--r-pill); }
.gooeynav__link {
display: inline-block;
padding: var(--sp-2) var(--sp-4);
font-family: var(--ff-mono);
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--gray);
text-decoration: none;
border: 1px solid transparent;
border-radius: var(--r-pill);
transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.gooeynav__link:hover { color: var(--offwhite); }
.gooeynav__link[aria-current='true'] { color: var(--offwhite); border-color: var(--neon); }
/* --------------------------------------------------------------------------
11. HERO
-------------------------------------------------------------------------- */
/* O fecho da hero acompanha a faixa das seções — antes era 64 fixo, e no
desktop a emenda com a prova ficava com metade do vão das demais. */
.hero { padding-top: var(--sp-8); padding-bottom: var(--banda); }
/* Indicador de scroll — trilho fixo e um segmento que desce e desaparece,
voltando ao topo. Só aparece no desktop: no mobile o polegar já ocupa
essa área e a dobra é curta o bastante pra não precisar do aviso. */
.scroll-hint {
display: none;
position: absolute;
left: 50%;
bottom: var(--sp-10);
transform: translateX(-50%);
flex-direction: column;
align-items: center;
gap: var(--sp-3);
pointer-events: none;
z-index: 1;
}
@media (min-width: 1024px) { .scroll-hint { display: flex; } }
.scroll-hint__trilho { position: relative; width: 1px; height: 40px; overflow: hidden; background: var(--hairline); }
.scroll-hint__trilho::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%;
height: 14px;
background: var(--neon);
animation: scroll-hint-desce 1.8s ease-in-out infinite;
}
.scroll-hint__label {
font-family: var(--ff-mono);
font-size: var(--fs-micro);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--gray-sm);
}
@keyframes scroll-hint-desce {
0% { transform: translateY(-100%); opacity: 0; }
25% { opacity: 1; }
75% { opacity: 1; }
100% { transform: translateY(280%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.scroll-hint__trilho::after { animation: none; height: 100%; opacity: 0.5; }
}
.hero__grid { display: grid; gap: var(--sp-10); align-items: center; }
@media (min-width: 1024px) {
.hero { min-height: calc(92vh - var(--nav-h)); display: flex; align-items: center; padding-block: var(--sp-12); }
.hero__grid { grid-template-columns: 55fr 45fr; gap: var(--sp-12); width: 100%; }
}
.hero__conteudo { position: relative; display: flex; flex-direction: column; gap: var(--sp-6); align-items: flex-start; }
.hero__conteudo .lead { margin-top: calc(-1 * var(--sp-2)); }
/* Linha que nomeia o ponto de diferença, logo abaixo do subtítulo. Fio verde
à esquerda: separa da promessa sem virar mais um parágrafo de corpo. */
/* Coluna da direita — o interruptor em escala */
.hero__midia { position: relative; }
@media (min-width: 1024px) {
.hero__midia { align-self: center; }
}
.hero__foto { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); }
/* Marca ON em 3D — peça da dobra.
O logo da nav é o lockup completo a 22px; aqui é o ON em escala de render,
sangrando pela direita. Escala e tratamento diferentes o suficiente para
não ler como logo repetido na mesma dobra. */
.hero__grafico { position: relative; margin: 0; }
@media (min-width: 1024px) {
/* sangra além do container até a borda da viewport, empurrando a marca para
a direita e deixando a esquerda livre para a leitura */
.hero__grafico { margin-right: calc(-1 * var(--pad)); }
}
/* O arquivo já vem com fundo recortado em alpha real: a luminância do render
virou canal alpha, então o glow continua difuso e translúcido e não existe
caixa preta em volta. Blend mode não serve aqui — `.grid-bg > *` abre um
stacking context e o screen ficaria preso nele, remontando o quadrado. */
.hero__marca {
display: block;
width: 100%;
height: auto;
animation: flutua 7s var(--ease) infinite;
}
@media (min-width: 1024px) {
/* passa da coluna e sangra pela direita; o overflow-x do body corta o resto */
.hero__marca { width: 112%; }
}
@keyframes flutua {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -14px, 0); }
}
/* Cards flutuantes sobre a mídia */
.float-card {
position: absolute;
z-index: 2;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-lg);
padding: var(--sp-3) var(--sp-4);
max-width: min(280px, 78%);
}
.float-card--credencial { bottom: var(--sp-4); left: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); }
.float-card--selo { top: var(--sp-4); right: var(--sp-4); }
.float-card__ava {
width: 40px; height: 40px; flex: none;
border-radius: var(--r-pill);
background: var(--elevated);
border: 1px solid var(--hairline);
display: grid; place-items: center;
font-family: var(--ff-display); font-weight: 800; font-size: var(--fs-caption);
color: var(--neon);
}
.float-card__nome { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-body-sm); line-height: 1.2; }
.float-card__cargo { font-size: var(--fs-micro); color: var(--gray-sm); line-height: 1.4; margin-top: 2px; }
/* --------------------------------------------------------------------------
12. TICKER
Única superfície neon grande da página. Por isso as bandas vizinhas não
levam nenhum outro destaque neon além do CTA.
-------------------------------------------------------------------------- */
/* Emenda hero -> prova numérica.
As duas dobras dividem o fundo do body, sem painel próprio e sem faixa entre
elas: lidas como uma seção só. O que marca a passagem é a malha de pontos do
hero se apagando, não uma borda. */
/* Metade da faixa: a prova numérica lê como continuação da hero, não como
seção nova. Proporcional, não fixo, senão desalinha em cada breakpoint. */
.banda--emenda { padding-top: calc(var(--banda) / 2); }
/* --------------------------------------------------------------------------
13. PROVA NUMÉRICA
Células separadas por hairline, sem card. Um único valor em neon.
-------------------------------------------------------------------------- */
/* Sem linha nenhuma — nem vertical entre os números, nem horizontal em
cima e embaixo. O grupo se separa pelo espaço, não por traço. */
.stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats__cel { padding: var(--sp-8) var(--sp-4); text-align: center; }
.stats .kpi { align-items: center; }
/* Prova social: texto em cima, logos soltas embaixo — de margem a margem
com o resto do conteúdo (mesmas bordas do .wrap), sem moldura nenhuma. */
.clientes {
display: flex;
flex-direction: column;
gap: var(--sp-8);
margin-top: var(--sp-12);
}
.clientes__texto { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; max-width: 60ch; margin-inline: auto; }
/* O título fica numa linha só. text-wrap:balance seria o ideal, mas ele
distribui em várias linhas equilibradas — aqui a regra é não quebrar.
O nowrap vale só a partir de 560px: abaixo disso a frase não cabe na
tela e forçar linha única estouraria a largura do celular. */
@media (min-width: 560px) {
.clientes__texto .h-md { white-space: nowrap; }
}
.clientes__mais { color: var(--gray-sm); margin-top: var(--sp-2); }
/* --------------------------------------------------------------------------
LOOP DE LOGOS — porte vanilla do LogoLoop (React Bits). O JS clona a
lista o quanto for preciso pra cobrir a largura do container e desliza
sem costura, voltando ao início por módulo — sem React, sem lib nenhuma.
-------------------------------------------------------------------------- */
/* O fade das pontas é MÁSCARA, não degradê de cor. Pintar um degrau de
preto por cima só funciona quando o fundo é preto chapado — e não é
mais: a luz ambiente passa por trás, então a faixa "preta" do degradê
aparecia como um retângulo escuro destoando. Com mask, quem some é a
própria logo, e o que estiver atrás (luz inclusive) atravessa intacto. */
.loop-logos {
position: relative;
width: 100%;
overflow: hidden;
--loop-fade: clamp(24px, 12%, 100px);
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--loop-fade), #000 calc(100% - var(--loop-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 var(--loop-fade), #000 calc(100% - var(--loop-fade)), transparent 100%);
}
.loop-logos__trilho { display: flex; width: max-content; will-change: transform; }
.loop-logos__lista { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
/* Só a logo solta — sem moldura, sem preenchimento, sem texto. */
.loop-logos__item {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin-right: var(--loop-gap, 56px);
}
.loop-logos__item img {
height: var(--loop-altura, 48px);
width: auto;
max-width: none;
display: block;
object-fit: contain;
transition: transform var(--t-base) var(--ease);
}
.loop-logos__item:hover img { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
.loop-logos__trilho { transform: none !important; }
.loop-logos__item img { transition: none !important; }
}
/* --------------------------------------------------------------------------
14. ROTINA — grid 2x2 de cards escuros com ícone em linha
Mesma paleta escopada do .process (não mexe no --neon do resto do site).
Valores vieram prontos de um sistema real, sem aproximação.
-------------------------------------------------------------------------- */
.rotina {
--bg-base: #050507;
--bg-surface: #14141A;
--card-border: rgba(255, 255, 255, 0.08);
--accent: #12C45C;
--accent-light: #36E67F;
--accent-rgb: 18, 196, 92;
--text: #F5F5F7;
--text-muted: rgba(245, 245, 247, 0.6);
--ease-rotina: cubic-bezier(0.19, 1, 0.22, 1);
padding-block: var(--banda-amplo);
background: var(--bg-base);
}
/* Em tela larga vira duas colunas: cabeçalho fixo à esquerda, grid 2x2 à
direita. Abaixo disso empilha — o cabeçalho volta pra cima do grid. */
/* Vão de coluna generoso (64), vão de linha alinhado com o resto da
página (48) — empilhado, 64 abria um buraco entre o texto e os cards. */
.rotina__in { display: grid; gap: var(--sp-12) var(--sp-16); align-items: start; }
@media (min-width: 1024px) {
.rotina__in { grid-template-columns: 1fr 1.35fr; }
}
.rotina__head { max-width: 720px; }
.rotina .label {
display: inline-block;
font-size: 11.2px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-light);
margin-bottom: 16px;
}
.rotina h2 {
font-size: clamp(32px, 5vw, 60px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
color: var(--text);
}
.rotina h2 .accent { color: var(--accent); }
.rotina__intro { margin-top: 20px; font-size: 17.6px; line-height: 1.6; color: var(--text-muted); }
/* O bloco .rotina__pitch (título + parágrafos separados por um fio) foi
unificado no h2 + .rotina__intro acima: eram 4 textos dizendo a mesma
coisa em dois tempos. As regras dele saíram junto. */
.rotina__cta { margin-top: 32px; }
/* align-items: stretch — cards da mesma linha fecham na mesma altura, como
na referência. Só funciona porque os textos foram equalizados: com
descrições de tamanhos muito diferentes sobraria vazio no card mais curto
e ficaria pior que a versão desalinhada. */
.rotina__grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: stretch;
min-width: 0;
}
@media (min-width: 640px) { .rotina__grid { grid-template-columns: repeat(2, 1fr); } }
/* Sem sombra em repouso — card que já brilha parado não tem pra onde
crescer quando o mouse chega. */
.rotina__card {
background: var(--bg-surface);
border: 1.25px solid var(--card-border);
border-radius: 16px;
padding: 40px 24px 44px;
box-shadow: none;
opacity: 0;
transform: translateY(24px);
transition: opacity .45s var(--ease-rotina), transform .45s var(--ease-rotina),
border-color .35s var(--ease-rotina), box-shadow .45s var(--ease-rotina);
}
.rotina__card.is-visible { opacity: 1; transform: translateY(0); }
.rotina__card:hover {
transform: translateY(-6px);
border-color: rgba(var(--accent-rgb), 0.35);
box-shadow: 0 8px 28px -8px rgba(var(--accent-rgb), 0.6);
}
/* Ícones: uma biblioteca só (Lucide), todos com o mesmo stroke-width.
Misturar preenchido com contorno é o que faz grid parecer montado às pressas. */
.rotina__icon {
width: 40px; height: 40px;
color: var(--accent);
margin-bottom: 24px;
transition: transform .45s var(--ease-rotina), color .35s var(--ease-rotina);
}
.rotina__icon svg {
width: 100%; height: 100%;
stroke: currentColor;
stroke-width: 1.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.rotina__card:hover .rotina__icon { transform: scale(1.08); color: var(--accent-light); }
.rotina__title {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--text);
margin-bottom: 12px;
line-height: 1.3;
}
/* 34ch trava o ritmo de 3 linhas — sem isso, em tela larga o parágrafo
vira uma linha só e o card desmonta. */
/* 24ch (e nao 34ch) e o que empurra o card pra cima em vez de pros lados:
a linha quebra antes, o texto ocupa mais linhas e o cartao fica vertical. */
.rotina__desc { font-size: 14.72px; line-height: 1.6; color: var(--text-muted); max-width: 24ch; }
@media (prefers-reduced-motion: reduce) {
.rotina__card { opacity: 1 !important; transform: none !important; }
}
/* --------------------------------------------------------------------------
15. MOTOR ON — 4 estágios, gauge, linha de progresso com faísca
Paleta própria (escopada em .process, não mexe no --neon do resto do
site): valores vieram prontos de um sistema real, sem aproximação.
-------------------------------------------------------------------------- */
.process {
--bg-base: #050507;
--bg-surface: #14141A;
--line-soft: rgba(255, 255, 255, 0.08);
--accent-dark: #0A6E34;
--accent: #12C45C;
--accent-light: #36E67F;
--accent-rgb: 18, 196, 92;
--text: #F5F5F7;
--text-muted: rgba(245, 245, 247, 0.6);
--ease-process: cubic-bezier(0.19, 1, 0.22, 1);
}
.process .accent { color: var(--accent-light); }
/* O nome do método é o protagonista da seção — escala de marca, não de
título de seção. O "ON" aceso em verde com halo é o mesmo gesto do
interruptor do logo: o método é o motor ligado. Uma só cor acesa aqui,
por isso o lema abaixo fica em branco e não disputa. */
.process__head { max-width: 900px; }
.process__marca {
font-family: var(--ff-display);
font-weight: 800;
font-size: clamp(52px, 9vw, 108px);
line-height: 0.95;
letter-spacing: -0.04em;
text-transform: uppercase;
color: var(--text);
}
/* O "ON" do título não é texto: é o próprio lockup do logo (interruptor + N),
dimensionado pra bater com a altura de caixa-alta da palavra "Motor" ao
lado. O viewBox tem 750 de altura mas a haste do N tem 714 — o "O" passa
um pouco em cima e embaixo, como toda letra redonda. Por isso a altura é
0.78em (e não 0.73em, a cap-height nua) e o `top` compensa a sobra
inferior, senão o N flutuaria acima da linha de base do "Motor". */
.process__marca-on {
display: inline-block;
height: 0.78em;
width: auto;
position: relative;
top: 0.02em;
filter: drop-shadow(0 0 34px rgba(57, 255, 20, 0.5));
}
.process__tm {
font-size: 0.26em;
font-weight: 700;
vertical-align: super;
letter-spacing: 0;
color: var(--text-muted);
text-transform: none;
}
.process__lema {
font-family: var(--ff-display);
font-weight: 700;
font-size: clamp(20px, 2.6vw, 30px);
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--text);
}
.process__intro { max-width: 54ch; margin-inline: auto; }
.process__journey { margin-top: var(--sp-12); }
.process__stages {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-6);
position: relative;
}
@media (min-width: 640px) { .process__stages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .process__stages { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.process__stage {
position: relative;
background: var(--bg-surface);
border: 1.25px solid var(--line-soft);
border-radius: 16px;
padding: 64px 28px 32px;
box-shadow: none;
opacity: 0;
transform: translateY(24px);
transition: opacity .45s var(--ease-process), transform .45s var(--ease-process),
border-color .35s var(--ease-process), box-shadow .45s var(--ease-process);
}
.process__stage.is-visible { opacity: 1; transform: translateY(0); }
.process__stage:hover {
transform: translateY(-6px);
border-color: rgba(var(--accent-rgb), 0.35);
box-shadow: 0 8px 28px -8px rgba(var(--accent-rgb), 0.6);
}
/* Furo perfurado no card: fundo mais escuro que o card (--bg-base, não
--bg-surface) + glow — não é um adesivo colado em cima. */
.process__node {
position: absolute;
top: 16px; left: 50%;
transform: translateX(-50%);
width: 44px; height: 44px;
display: grid; place-items: center;
background: var(--bg-base);
border: 1.25px solid var(--accent);
border-radius: 50%;
box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.5);
}
.process__node span { font-size: 13.6px; font-weight: 800; color: var(--accent-light); }
/* Nome da fase do Motor ON (Ignição, Injeção…) acima do que ela entrega.
É o único verde-texto do card — por isso o rótulo do gauge desce pra
cor muted: duas etiquetas verdes competiriam entre si. */
.process__fase {
display: block;
text-align: center;
font-family: var(--ff-mono);
font-size: 11.2px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-light);
margin-bottom: var(--sp-2);
}
.process__name {
font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
color: var(--text); text-align: center; margin-bottom: var(--sp-4);
}
.process__gauge { position: relative; width: 120px; margin: 0 auto var(--sp-4); }
.process__gauge svg { width: 100%; height: auto; display: block; }
.gauge__track { fill: none; stroke: var(--line-soft); stroke-width: 7; stroke-linecap: round; }
.gauge__fill {
fill: none;
stroke: url(#gaugeGrad);
stroke-width: 7;
stroke-linecap: round;
stroke-dasharray: 151;
stroke-dashoffset: 151;
transition: stroke-dashoffset 1.2s var(--ease-process);
}
.process__gauge-label {
display: block; text-align: center;
font-size: 11.2px; font-weight: 700; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--text-muted);
}
.process__desc { font-size: 14.72px; line-height: 1.6; color: var(--text-muted); text-align: center; }
/* Linha de progresso com faísca — amarrada ao scroll (JS), não a hover. */
.process__line { position: relative; height: 60px; margin-top: 70px; }
.process__line-track { position: absolute; top: 30px; left: 0; right: 0; height: 2px; background: var(--line-soft); border-radius: 2px; }
.process__line-fill {
position: absolute; top: 29px; left: 0;
width: 0%; height: 2px;
background: var(--accent);
border-radius: 2px;
box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.55);
}
/* A ponta que corre é o interruptor da marca, não um raio genérico.
Proporção 1088x750 do ícone original — largura maior que a altura. */
.process__spark {
position: absolute; top: 30px; left: 0;
width: 32px; height: 22px;
transform: translate(-50%, -50%);
filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.8));
color: var(--accent-light);
display: grid; place-items: center;
will-change: left;
}
.process__spark svg { width: 100%; height: 100%; display: block; }
.process__particles { position: absolute; inset: 0; height: 60px; pointer-events: none; }
.process__particula {
position: absolute;
width: 3px; height: 3px;
background: var(--accent-light);
border-radius: 50%;
box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.8);
opacity: 1;
transition: opacity 600ms ease, transform 600ms ease;
pointer-events: none;
}
.process__particula.is-fading { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: reduce) {
.process__stage { transition: border-color .35s var(--ease-process), box-shadow .45s var(--ease-process); }
.gauge__fill { transition: none; }
.process__line-fill, .process__spark { transition: none; }
}
/* --------------------------------------------------------------------------
16. QUEM SOMOS
-------------------------------------------------------------------------- */
/* Cartão único de liderança: foto à esquerda com o nome sobreposto, texto
à direita. Substituiu o bloco antigo de manifesto + credenciais + mosaico. */
.lider {
display: grid;
gap: var(--sp-8);
align-items: center;
padding: var(--sp-8);
/* Só a linha de demarcação: sem preenchimento, o preto da página atravessa
o cartão. A moldura é o neon da marca — é o único contorno verde da
página, então ele marca o bloco sem precisar de fundo. */
background: transparent;
border: 1px solid var(--neon);
border-radius: var(--r-xl);
}
@media (min-width: 860px) {
/* Coluna da foto 15% mais larga que a medida original de 340px — o
cartão inteiro cresce junto, via padding e gap um degrau acima. */
.lider { grid-template-columns: minmax(0, 391px) minmax(0, 1fr); gap: var(--sp-12); padding: var(--sp-10); }
}
/* A foto é o próprio figure: o degradê do rodapé nasce nela, então o nome
fica legível sobre qualquer imagem que entre ali. */
.lider__foto {
position: relative;
margin: 0;
max-width: 391px;
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: var(--r-lg);
background: var(--elevated);
}
.lider__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lider__id {
position: absolute;
left: 0; right: 0; bottom: 0;
display: flex; flex-direction: column; gap: 2px;
padding: var(--sp-8) var(--sp-5) var(--sp-5);
background: linear-gradient(to top, rgba(5, 5, 7, 0.92), transparent);
}
.lider__nome {
font-family: var(--ff-display); font-weight: 800;
font-size: var(--fs-display-md); line-height: 1.1;
letter-spacing: var(--ls-tight); text-transform: uppercase;
color: var(--offwhite);
}
.lider__papel { font-size: var(--fs-body-sm); color: var(--neon); }
.lider__texto { min-width: 0; }
.lider__t {
font-family: var(--ff-display); font-weight: 800;
font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05;
letter-spacing: var(--ls-tight); text-transform: uppercase;
color: var(--offwhite);
}
.lider__sub { margin-top: var(--sp-2); font-size: var(--fs-body); color: var(--neon); }
.lider__p { margin-top: var(--sp-5); font-size: var(--fs-body-sm); line-height: 1.7; color: var(--gray-sm); }
/* Fio separando a biografia das marcas — mesmo gesto da referência. */
.lider__exp { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--hairline); }
.lider__exp-l {
display: block;
font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--gray-sm);
}
.lider__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.lider__chip {
padding: var(--sp-2) var(--sp-4);
font-size: var(--fs-caption);
color: var(--soft);
background: var(--elevated);
border: 1px solid var(--hairline);
border-radius: var(--r-pill);
}
.lider__chip--vazio { color: var(--dim-text); background: transparent; border-style: dashed; }
/* --------------------------------------------------------------------------
17. PROVA — cases à esquerda, mídia à direita
-------------------------------------------------------------------------- */
.prova__grid { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) {
/* stretch: a órbita passa a ter exatamente a altura da pilha de cards, e o
JS encolhe o palco pra caber nela. Assim o topo e a base do conjunto de
fotos batem com o primeiro e o último card, em vez de a órbita definir a
própria altura por aspect-ratio e sobrar/faltar. Como todo o conteúdo da
órbita é absoluto, ela não empurra a linha: quem manda na altura são os
cards. */
.prova__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: stretch; }
.orbita { aspect-ratio: auto; min-height: 320px; }
}
/* O título desta seção cola nos cards: é rótulo do que vem logo abaixo, não
abertura de bloco novo. */
#cases .sec-head { margin-bottom: var(--sp-6); }
/* Respiro menor embaixo das cases. Continua sobrando ar (as cases merecem
destaque), mas sem o buraco que o --banda de 96px abria no desktop. */
#cases { padding-bottom: var(--sp-16); }
/* 2x2 ao lado da órbita, no mesmo desenho dos cards do bastidor: âncora
numérica no lugar do ícone, título curto, descrição de 2-3 linhas. */
.prova__cases { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); min-width: 0; }
@media (min-width: 560px) { .prova__cases { grid-template-columns: 1fr 1fr; } }
/* --------------------------------------------------------------------------
ÓRBITA DE MÍDIA — porte do OrbitImages (React Bits) sem React nem motion.
O caminho é uma elipse desenhada em coordenadas fixas (espaço de 700x700)
e cada item corre por ela via offset-path + offset-distance. A distribuição
sai de animation-delay negativo, não de JS: seis itens, cada um adiantado
1/6 da volta. O JS só calcula a escala do palco pro tamanho do container.
-------------------------------------------------------------------------- */
.orbita {
--orbita-base: 700; /* lado do espaço de desenho, em px */
--orbita-dur: 45s;
--orbita-n: 6;
--orbita-item: 150px;
--orbita-giro: -17deg; /* inclinação da elipse */
--orbita-escala: 1;
position: relative;
width: 100%;
/* 7/5 e não 1/1: o palco tem 700x700, mas a elipse (rx 290, ry 140,
inclinada -17deg) mais o item de 150px ocupam só de y=117 a y=583.
Como quadrado, sobravam 117px vazios em cima e embaixo — era isso que
jogava a órbita pra baixo das cases e abria o vão antes de Serviços.
500 de altura cobre os 467 usados com folga, e o palco fica centrado. */
aspect-ratio: 7 / 5;
min-width: 0;
}
/* O palco tem sempre 700x700 e é reduzido pra caber na coluna — assim as
coordenadas do path continuam válidas em qualquer largura de tela. */
.orbita__escala {
position: absolute;
left: 50%; top: 50%;
width: 700px; height: 700px;
transform-origin: center center;
transform: translate(-50%, -50%) scale(var(--orbita-escala));
}
.orbita__palco { position: absolute; inset: 0; transform: rotate(var(--orbita-giro)); }
.orbita__item {
position: absolute;
width: var(--orbita-item);
height: var(--orbita-item);
offset-path: path('M 60 350 A 290 140 0 1 0 640 350 A 290 140 0 1 0 60 350');
offset-rotate: 0deg;
offset-anchor: center center;
animation: orbita-corre var(--orbita-dur) linear infinite;
animation-delay: calc(var(--orbita-dur) / var(--orbita-n) * var(--i) * -1);
will-change: offset-distance;
}
@keyframes orbita-corre {
from { offset-distance: 0%; }
to { offset-distance: 100%; }
}
/* Contra-rotação: cancela a inclinação do palco pra foto não entrar torta. */
.orbita__giro {
width: 100%; height: 100%;
transform: rotate(calc(var(--orbita-giro) * -1));
border-radius: var(--r-lg);
overflow: hidden;
}
.orbita__giro img, .orbita__giro video {
width: 100%; height: 100%;
object-fit: cover;
display: block;
user-select: none;
-webkit-user-drag: none;
}
/* Contorno fino no mesmo verde do resto da seção — sem ele o clipe fica
boiando no preto sem borda definida. */
.orbita__giro { border: 1px solid var(--neon-40); background: var(--surface); }
/* Sem movimento: a órbita para, mas os itens continuam distribuídos pela
elipse — o atraso negativo já os posiciona antes de a animação rodar. */
@media (prefers-reduced-motion: reduce) {
.orbita__item { animation-play-state: paused; }
}
/* Só a linha verde, sem preenchimento — vem depois de .card na folha,
então sobrepõe o fundo dele sem precisar de !important. */
.case {
display: flex; flex-direction: column; gap: var(--sp-2);
padding: var(--sp-5);
background: transparent;
border-color: var(--neon);
}
.case__t {
font-size: var(--fs-body-lg); font-weight: 700; line-height: 1.25;
letter-spacing: var(--ls-tight); color: var(--offwhite);
margin-top: var(--sp-1);
}
.case__d { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--gray-sm); }
.case__metrica { font-family: var(--ff-display); font-weight: 800; font-size: var(--fs-display-md); line-height: 1; color: var(--neon); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); }
/* --------------------------------------------------------------------------
18. SERVIÇOS — lista de linhas
Cada linha é um : índice, nome, descrição, tags e o "+" que
abre o escopo. Sem fundo próprio — o preto da página atravessa, e o que
separa uma linha da outra é só o hairline.
-------------------------------------------------------------------------- */
.servicos__lista { border-top: 1px solid var(--hairline); }
.servico { border-bottom: 1px solid var(--hairline); }
.servico__resumo {
display: grid;
gap: var(--sp-2) var(--sp-6);
grid-template-columns: 1fr auto;
grid-template-areas:
'indice mais'
'nome nome'
'desc desc'
'tags tags';
align-items: center;
padding-block: var(--sp-5);
cursor: pointer;
list-style: none;
transition: background-color var(--t-fast) var(--ease);
}
/* tira o triângulo nativo do nos dois motores */
.servico__resumo::-webkit-details-marker { display: none; }
.servico__resumo::marker { content: ''; }
.servico__resumo:focus-visible { outline: 2px solid var(--neon); outline-offset: -2px; border-radius: var(--r-sm); }
@media (min-width: 1024px) {
.servico__resumo {
grid-template-columns: 68px minmax(0, 22ch) minmax(0, 1fr) minmax(0, 26ch) 20px;
grid-template-areas: 'indice nome desc tags mais';
gap: var(--sp-8);
padding-block: var(--sp-6);
}
}
.servico__indice { grid-area: indice; color: var(--dim-text); letter-spacing: var(--ls-mono); }
.servico__nome {
grid-area: nome;
font-family: var(--ff-display);
font-weight: 700;
font-size: clamp(24px, 2.6vw, 34px);
line-height: 1.15;
letter-spacing: var(--ls-tight);
color: var(--offwhite);
transition: color var(--t-fast) var(--ease);
}
.servico__desc { grid-area: desc; font-size: var(--fs-body-sm); color: var(--gray-sm); }
.servico__tags { grid-area: tags; color: var(--dim-text); text-transform: uppercase; letter-spacing: var(--ls-mono); }
/* O "+" é desenhado em CSS (duas barras) pra girar virando "×" ao abrir. */
.servico__mais { grid-area: mais; position: relative; width: 16px; height: 16px; justify-self: end; flex: none; }
.servico__mais::before, .servico__mais::after {
content: '';
position: absolute;
top: 50%; left: 50%;
background: var(--gray);
transition: background-color var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
}
.servico__mais::before { width: 16px; height: 1.5px; transform: translate(-50%, -50%); }
.servico__mais::after { width: 1.5px; height: 16px; transform: translate(-50%, -50%); }
.servico:hover .servico__nome,
.servico[open] .servico__nome { color: var(--neon); }
.servico:hover .servico__mais::before,
.servico:hover .servico__mais::after,
.servico[open] .servico__mais::before,
.servico[open] .servico__mais::after { background: var(--neon); }
.servico[open] .servico__mais::before { transform: translate(-50%, -50%) rotate(135deg); }
.servico[open] .servico__mais::after { transform: translate(-50%, -50%) rotate(135deg); }
.servico__corpo { padding-bottom: var(--sp-6); color: var(--soft); }
@media (min-width: 1024px) {
/* alinha o corpo com a coluna da descrição, não com a margem da linha */
.servico__corpo { padding-left: calc(68px + 22ch + var(--sp-8) * 2); max-width: 70ch; }
}
@media (prefers-reduced-motion: reduce) {
.servico__mais::before, .servico__mais::after { transition: none; }
}
/* --------------------------------------------------------------------------
19. DIAGNÓSTICO — 3 passos
-------------------------------------------------------------------------- */
.passos { display: grid; gap: var(--sp-8); }
@media (min-width: 768px) { .passos { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
.passo { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-5); border-top: 1px solid var(--hairline); }
.passo__t { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-title); line-height: 1.2; }
.passo__d { font-size: var(--fs-body-sm); color: var(--gray-sm); }
/* --------------------------------------------------------------------------
20. FAQ — details/summary nativo, zero JS
-------------------------------------------------------------------------- */
.faq { max-width: 760px; margin-inline: auto; }
/* Duas colunas no desktop pra cortar a rolagem: com 11 perguntas empilhadas
a seção ficava mais alta que a tela três vezes. Colunas de verdade (grid
com dois containers no HTML), não column-count: abrir um não
pode reflowar as perguntas da outra coluna. No mobile continua uma só. */
.faq__col { min-width: 0; }
@media (min-width: 1024px) {
.faq {
max-width: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 var(--sp-10);
align-items: start;
}
}
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__item:first-child { border-top: 1px solid var(--hairline); }
.faq__q {
display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
padding: var(--sp-5) 0;
cursor: pointer;
list-style: none;
font-family: var(--ff-display);
font-weight: 700;
font-size: var(--fs-title);
line-height: 1.25;
letter-spacing: var(--ls-tight);
transition: color var(--t-fast) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--neon); }
.faq__ico { flex: none; width: 20px; height: 20px; position: relative; margin-top: 4px; color: var(--gray); transition: transform var(--t-base) var(--ease), color var(--t-fast) var(--ease); }
.faq__ico::before, .faq__ico::after { content: ''; position: absolute; background: currentColor; }
.faq__ico::before { left: 50%; top: 2px; width: 1.5px; height: 16px; transform: translateX(-50%); }
.faq__ico::after { top: 50%; left: 2px; height: 1.5px; width: 16px; transform: translateY(-50%); }
.faq__item[open] .faq__ico { transform: rotate(45deg); color: var(--neon); }
.faq__a { display: grid; grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; padding-bottom: var(--sp-5); }
.faq__a p { color: var(--gray-sm); font-size: var(--fs-body-sm); max-width: 62ch; }
.faq__a p + p { margin-top: var(--sp-3); }
/* --------------------------------------------------------------------------
21. FORMULÁRIO
-------------------------------------------------------------------------- */
.form-sec__grid { display: grid; gap: var(--sp-10); align-items: start; }
@media (min-width: 1024px) { .form-sec__grid { grid-template-columns: 45fr 55fr; gap: var(--sp-16); } }
.form-bullets { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-6); }
.form-bullets li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-body-sm); color: var(--soft); }
.form-bullets svg { width: 16px; height: 16px; color: var(--neon); flex: none; margin-top: 4px; }
.formcard {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-xl);
padding: var(--sp-6);
}
@media (min-width: 768px) { .formcard { padding: var(--sp-8); } }
.progresso { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.progresso__barras { display: flex; gap: var(--sp-2); }
.progresso__seg { flex: 1; height: 3px; border-radius: var(--r-pill); background: var(--hairline); transition: background-color var(--t-base) var(--ease); }
.progresso__seg[data-estado='feito'] { background: var(--neon); }
.progresso__seg[data-estado='atual'] { background: var(--neon-40); }
.etapa { display: flex; flex-direction: column; gap: var(--sp-5); }
/* Nome/Sobrenome e E-mail/Telefone dividem a linha a partir de 560px.
Abaixo disso empilham — dois campos de 16px lado a lado no celular
deixariam cada um estreito demais pra ler o que foi digitado. */
.campo-par { display: grid; gap: var(--sp-5); }
@media (min-width: 560px) { .campo-par { grid-template-columns: 1fr 1fr; } }
.etapa[hidden] { display: none; }
.campo { display: flex; flex-direction: column; gap: var(--sp-2); }
.campo__label {
font-family: var(--ff-mono);
font-weight: 500;
font-size: var(--fs-micro);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--gray);
}
.campo__opc { color: var(--dim-text); text-transform: none; letter-spacing: 0; }
.campo input[type='text'],
.campo input[type='tel'],
.campo input[type='url'],
.campo input[type='email'],
.campo textarea,
.campo select {
width: 100%;
min-height: 52px;
padding: var(--sp-4);
/* 16px é obrigatório: abaixo disso o iOS dá zoom ao focar e quebra o layout */
font-size: var(--fs-body);
color: var(--offwhite);
background: var(--panel);
border: 1px solid var(--hairline);
border-radius: var(--r-md);
transition: border-color var(--t-fast) var(--ease);
appearance: none;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--dim-text); }
.campo textarea { min-height: 132px; resize: vertical; line-height: 1.6; font-family: inherit; }
.campo textarea:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 2px var(--neon-25); }
.campo textarea[aria-invalid='true'] { border-color: var(--down); }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 2px var(--neon-25); }
.campo input[aria-invalid='true'], .campo select[aria-invalid='true'] { border-color: var(--down); }
.campo select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23AAAAAA' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--sp-4) center;
background-size: 16px;
padding-right: var(--sp-10);
}
.campo select:invalid { color: var(--dim-text); }
.erro { font-size: var(--fs-caption); color: var(--down); min-height: 0; }
.erro:empty { display: none; }
.radios { display: flex; flex-direction: column; gap: var(--sp-2); }
.radio, .check {
display: flex; align-items: flex-start; gap: var(--sp-3);
min-height: 44px;
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--hairline);
border-radius: var(--r-md);
cursor: pointer;
font-size: var(--fs-body-sm);
color: var(--soft);
transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.radio:hover, .check:hover { border-color: var(--neon-30); }
.radio:has(input:checked) { border-color: var(--neon); background: var(--neon-08); color: var(--offwhite); }
.radio input, .check input {
appearance: none; flex: none;
width: 20px; height: 20px; margin: 0;
background: var(--panel);
border: 1px solid var(--hairline);
cursor: pointer;
transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.radio input { border-radius: var(--r-pill); }
.check input { border-radius: var(--r-xs); }
.radio input:checked { border-color: var(--neon); box-shadow: inset 0 0 0 4px var(--abyss), inset 0 0 0 20px var(--neon); }
.check input:checked {
background: var(--neon); border-color: var(--neon);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23080808' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
background-size: 14px; background-position: center; background-repeat: no-repeat;
}
.check { align-items: flex-start; }
.check span { font-size: var(--fs-caption); color: var(--gray-sm); line-height: 1.5; }
.check a { color: var(--neon); }
/* Respiro entre os campos e o botão: o CTA final não pode parecer "mais um
campo" da pilha. O fio separa sem pesar. */
.form-nav {
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-3);
margin-top: var(--sp-8);
padding-top: var(--sp-6);
border-top: 1px solid var(--hairline);
}
.form-nav .btn--pri { flex: 1; position: relative; overflow: hidden; }
/* Hover: sobe e acende. O brilho que atravessa é um pseudo-elemento em
translate — não anima background-position, que forçaria repaint. */
.form-nav .btn--pri { transition: background-color var(--t-fast) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.form-nav .btn--pri:hover { transform: translateY(-2px); box-shadow: var(--glow-cta-hover); }
.form-nav .btn--pri:active { transform: translateY(0) scale(0.985); box-shadow: var(--glow-cta); }
.form-nav .btn--pri::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
transform: translateX(-120%);
pointer-events: none;
}
.form-nav .btn--pri:hover::after { animation: btn-brilho 700ms var(--ease) 1; }
@keyframes btn-brilho {
to { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
.form-nav .btn--pri:hover { transform: none; }
.form-nav .btn--pri:hover::after { animation: none; }
}
.honey { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form-ok { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; text-align: left; }
.form-ok__ico { width: 48px; height: 48px; border-radius: var(--r-pill); background: var(--neon); color: var(--abyss); display: grid; place-items: center; }
.form-ok__ico svg { width: 24px; height: 24px; }
/* --------------------------------------------------------------------------
22. CTA FINAL E RODAPÉ
-------------------------------------------------------------------------- */
.cta-final { text-align: center; padding-block: var(--banda-amplo); }
/* 1000px e não 780px: em display_xl a 104px, um container estreito quebra a
headline de fechamento em cinco linhas e ela perde o impacto. */
.cta-final__in { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-6); padding: var(--sp-8); max-width: 1000px; }
.cta-final .lead { max-width: 54ch; text-align: center; }
.cta-final .cta-par { justify-content: center; }
/* Brilho radial no topo + linha central desfocada — mesmo recurso visual do
rodapé em blur que veio de referência, refeito em CSS puro (sem Framer
Motion) reaproveitando os tokens de neon já existentes. */
.rodape {
/* a referencia arredonda o topo em 32px e sobe pra 48px no desktop
(rounded-t-4xl / md:rounded-t-6xl). Como o raio nao e um token do site,
ele fica local aqui em vez de poluir a escala global. */
--rodape-raio: 28px;
position: relative;
border-top: 1px solid var(--hairline);
border-radius: var(--rodape-raio) var(--rodape-raio) 0 0;
background: radial-gradient(38% 140px at 50% 0%, var(--neon-08), transparent 70%);
/* respiro entre a seção anterior e a borda arredondada do rodapé */
margin-top: var(--sp-10);
padding-block: var(--sp-16) var(--sp-10);
}
@media (min-width: 768px) {
.rodape { --rodape-raio: 44px; margin-top: var(--sp-16); padding-block: var(--sp-20) var(--sp-12); }
}
.rodape::before {
content: '';
position: absolute;
top: -1px;
left: 50%;
width: 33%;
height: 1px;
transform: translateX(-50%);
background: var(--neon-40);
filter: blur(3px);
pointer-events: none;
}
/* Mesma divisao da referencia: uma coluna de marca a esquerda e o bloco de
listas a direita (la sao 4 listas, aqui 3 — nao existe perfil social
oficial da FullON pra linkar ainda). */
.rodape__grid { display: grid; gap: var(--sp-10); }
@media (min-width: 960px) {
.rodape__grid { grid-template-columns: minmax(220px, 1fr) 2.4fr; gap: var(--sp-12); align-items: start; }
}
.rodape__logo svg { height: 26px; width: auto; color: var(--offwhite); }
.rodape__sig { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-caption); letter-spacing: 0.32em; text-transform: uppercase; color: var(--gray); margin-top: var(--sp-4); }
.rodape__claim { margin-top: var(--sp-4); max-width: 34ch; color: var(--gray); font-size: var(--fs-body-sm); line-height: 1.6; }
/* As quatro colunas têm largura idêntica (1fr cada), então os títulos
ficam alinhados na mesma linha e as listas começam juntas. */
.rodape__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); }
@media (min-width: 760px) { .rodape__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rodape__col-t { display: block; color: var(--offwhite); margin-bottom: var(--sp-4); }
.rodape__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.rodape__lista a,
.rodape__lista span {
/* flex-start em vez de center: com 4 colunas o e-mail quebra em duas
linhas e o ícone precisa ficar preso na primeira, não no meio. */
display: inline-flex; align-items: flex-start; gap: 8px;
color: var(--gray-sm); text-decoration: none;
font-size: var(--fs-body-sm); line-height: 1.5;
overflow-wrap: anywhere;
transition: color var(--t-fast) var(--ease);
}
.rodape__lista span { color: var(--gray); }
.rodape__lista a:hover { color: var(--neon); }
.rodape__lista svg {
width: 15px; height: 15px; flex: none; margin-top: 3px;
stroke: currentColor; stroke-width: 1.5; fill: none;
stroke-linecap: round; stroke-linejoin: round;
}
.rodape__fim {
margin-top: var(--sp-12);
padding-top: var(--sp-5);
border-top: 1px solid var(--hairline);
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: var(--sp-3) var(--sp-6);
}
.rodape__topo { color: var(--gray); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.rodape__topo:hover { color: var(--neon); }
/* --------------------------------------------------------------------------
23. WHATSAPP FLUTUANTE
-------------------------------------------------------------------------- */
.wa-float {
position: fixed;
right: var(--sp-5); bottom: var(--sp-5);
z-index: 90;
width: 56px; height: 56px;
border-radius: var(--r-pill);
background: var(--neon);
color: var(--abyss);
display: grid; place-items: center;
border: 0;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity var(--t-base) var(--ease),
transform var(--t-base) var(--ease),
visibility var(--t-base);
}
.wa-float[data-visivel='true'] { opacity: 1; visibility: visible; transform: translateY(0); }
.wa-float:hover { background: var(--neon-hover); }
.wa-float svg { width: 26px; height: 26px; }
/* --------------------------------------------------------------------------
24. REVEAL
-------------------------------------------------------------------------- */
[data-reveal] {
opacity: 0;
transform: translateY(12px);
transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}
[data-reveal][data-visto='true'] { opacity: 1; transform: none; }
/* No rodapé o bloco entra com um leve desfoque, igual à referência —
escopado só aqui pra não alterar o reveal padrão usado no resto do site. */
.rodape [data-reveal] {
filter: blur(4px);
transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease), filter var(--t-reveal) var(--ease);
}
.rodape [data-reveal][data-visto='true'] { filter: blur(0); }
/* Escalonamento das colunas, equivalente ao delay: 0.1 + i * 0.1 da
referencia. Feito por atributo pra nao precisar de JS novo. */
.rodape [data-reveal][data-atraso='1'] { transition-delay: 100ms; }
.rodape [data-reveal][data-atraso='2'] { transition-delay: 200ms; }
.rodape [data-reveal][data-atraso='3'] { transition-delay: 300ms; }
.rodape [data-reveal][data-atraso='4'] { transition-delay: 400ms; }
/* --------------------------------------------------------------------------
24b. BLUR TEXT — título da hero entra palavra por palavra, de cima,
desfocado. Cada palavra é um span independente; o JS escalona o atraso.
-------------------------------------------------------------------------- */
.blur-palavra {
display: inline-block;
opacity: 0;
filter: blur(12px);
transform: translateY(-20px);
transition: opacity var(--t-reveal) var(--ease), filter var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}
.blur-palavra[data-visto='true'] { opacity: 1; filter: blur(0); transform: none; }
@media (prefers-reduced-motion: reduce) {
.blur-palavra { opacity: 1 !important; filter: none !important; transform: none !important; }
}
/* --------------------------------------------------------------------------
25. MOVIMENTO REDUZIDO
Não é opcional. Tudo nasce no estado final.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
/* sem isso o escalonamento do rodape ainda seguraria o conteudo
parado por ate 300ms mesmo com a transicao zerada */
transition-delay: 0s !important;
}
[data-reveal] { opacity: 1 !important; transform: none !important; }
/* a faixa em arco não corre: o JS não inicia o laço e o texto fica parado */
.curva { cursor: auto; }
.process__stage { opacity: 1 !important; transform: none !important; }
}