/* ==================================================================
Cofre. Folha exclusiva da landing page (landing.html).
------------------------------------------------------------------
Ela NÃO importa css/style.css de propósito. O aplicativo carrega
um design system inteiro para montar telas com dados reais; a
página comercial precisa de outra coisa: uma superfície escura,
tipografia grande e um punhado de componentes que só existem aqui.
Misturar as duas folhas custaria peso, cascata imprevisível e um
acoplamento que faria qualquer ajuste de marketing arriscar o app.
O que É compartilhado, e de propósito, são os VALORES: a paleta
abaixo nasce do tema escuro de css/base.css (esmeralda de cofre,
latão, tinta quente). A página parece feita do mesmo material que
o produto porque ela é.
Regra de segurança desta folha: a CSP do projeto proíbe estilo
inline e atributo `style`. Toda variação visual mora aqui, em
classe, inclusive as posições dos elementos decorativos.
================================================================== */
/* ------------------------------------------------------------------
1. FONTES
------------------------------------------------------------------
ESTA FOLHA NÃO BAIXA NENHUMA FONTE. Nem de terceiro, nem do próprio
site. É uma decisão, não uma pendência.
A versão anterior declarava `@font-face` apontando para
`fonts/inter-400.woff2` e `fonts/space-grotesk-500.woff2`. Esses
arquivos nunca existiram no repositório (`fonts/` só tem o README), e
o resultado era o pior dos dois mundos:
* em produção, uma requisição por família devolvendo a página de
404 em HTML, que o navegador tenta interpretar como WOFF2 e
descarta com erro no console;
* no servidor de desenvolvimento, que devolve `index.html` para
caminho desconhecido, o mesmo HTML com status 200;
* e uma tipografia que mudava de aparelho para aparelho, porque
só quem tivesse Inter ou Space Grotesk instalada localmente
via o desenho pretendido.
Enquanto não houver arquivo licenciado dentro de `fonts/`, referenciar
o caminho é pedir um recurso quebrado. A pilha abaixo é escolhida, não
herdada: `ui-sans-serif`/`system-ui` entrega a fonte de interface do
sistema (SF Pro, Segoe UI Variable, Roboto), que é desenhada para
texto em tela e tem numeral tabular. As compensações de tamanho,
entrelinha e espaçamento do restante da folha foram ajustadas para
essa pilha; ver `--lp-font-display`, `--lp-font-body` e os
`letter-spacing` dos títulos.
PARA VOLTAR ÀS FONTES DO PROJETO: coloque os WOFF2 em `fonts/`
(ver fonts/README.md), declare os `@font-face` aqui e ponha o nome da
família na frente das duas variáveis abaixo. O `scripts/build-dist.js`
já copia a pasta quando ela tem arquivos, e a CSP já permite
`font-src 'self'`.
------------------------------------------------------------------ */
/* ------------------------------------------------------------------
2. TOKENS
------------------------------------------------------------------ */
:root {
--lp-void: #050B09;
--lp-void-2: #04100D;
--lp-surface: #0B1512;
--lp-surface-2: #101B18;
--lp-surface-3: #16211E;
--lp-line: rgba(233,240,237,0.075);
--lp-line-2: rgba(233,240,237,0.14);
--lp-text: #EAF1EE;
--lp-soft: #A2B0AA;
--lp-faint: #77857F;
--lp-brand: #1FB394;
--lp-brand-2: #35DDB6;
--lp-brand-deep: #04231E;
--lp-brass: #D9AB57;
--lp-neg: #E9736A;
--lp-paper: #EFF2F0;
--lp-paper-alt: #E3E9E6;
--lp-paper-ink: #0B1512;
--lp-paper-soft:#55655F;
/* Uma pilha só para os dois papéis: com fonte de sistema, misturar duas
famílias diferentes não cria hierarquia, cria ruído. A distinção entre
título e texto vem de peso, tamanho e `letter-spacing`. */
--lp-font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Display",
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--lp-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--lp-shell: 1200px;
--lp-pad: clamp(20px, 4vw, 40px);
--lp-sec-y: clamp(84px, 11vw, 168px);
--lp-r-sm: 12px;
--lp-r: 18px;
--lp-r-lg: 26px;
--lp-r-xl: 34px;
--lp-ease: cubic-bezier(0.22, 1, 0.36, 1);
--lp-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
--lp-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 18px 42px -14px rgba(0,0,0,0.7);
--lp-shadow-lg: 0 8px 20px rgba(0,0,0,0.45), 0 48px 96px -28px rgba(0,0,0,0.85);
--lp-sheen: inset 0 1px 0 rgba(255,255,255,0.06);
}
/* ------------------------------------------------------------------
3. RESET E BASE
------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
/* CONTENÇÃO HORIZONTAL: `clip`, NÃO `hidden`.
`overflow-x: hidden` transforma o elemento em contêiner de rolagem, e um
contêiner de rolagem no é o que costuma quebrar `position: sticky`
e `position: fixed` de descendentes. `clip` corta a pintura sem criar
rolagem nenhuma, que é exatamente o que os elementos decorativos pedem.
`hidden` fica antes como reserva para navegador antigo.
Isto é rede de segurança, não conserto: a página é medida a 1920, 1440,
1280, 1024, 768, 430, 390 e 360 px e nenhum elemento de layout pode
ultrapassar a largura. Ver tests/browser/run-landing.js. */
html, body.lp { overflow-x: hidden; overflow-x: clip; }
body.lp {
background: var(--lp-void);
color: var(--lp-text);
color-scheme: dark;
font-family: var(--lp-font-body);
font-size: 16px;
line-height: 1.55;
/* A pilha do sistema é ligeiramente mais larga que a Inter no corpo de
texto; um pouco menos de tracking devolve a densidade do desenho. */
letter-spacing: -0.008em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-wrap: break-word;
}
.lp img, .lp svg { display: block; max-width: 100%; }
/* RESET COM ESPECIFICIDADE ZERO, E NÃO POR CAPRICHO.
Escrito como `.lp h2` / `.lp ul`, este reset vale (0,1,1): uma classe MAIS
um tipo. Isso é mais forte que qualquer regra de componente de uma classe
só, como `.lp-final__title` ou `.lp-shell` — e o reset passava a ganhar
delas. O efeito não era teórico:
* `.lp-final__title { margin-inline: auto }` e
`.lp-final__lead { margin: 22px auto 0 }` eram zerados, e o
fechamento da página aparecia encostado na margem esquerda, 254px
fora do centro, ao lado de botões que continuavam centralizados;
* o mesmo com `.lp-hero__lead`, 140px fora do centro;
* `ul.lp-shell` (a faixa de confiança) perdia `margin-inline: auto` e
`padding-inline` de uma vez, e a faixa inteira saía 120px à esquerda;
* todo `margin-bottom` de kicker e `margin-top` de lead morria, e o
ritmo vertical desenhado nas regras nunca chegava à tela.
`:where()` não soma especificidade: o seletor abaixo vale (0,0,0). Um
reset precisa ser exatamente isso — o piso que qualquer regra de
componente vence sem precisar de truque. */
:where(.lp) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
:where(.lp) :where(ul, ol) { list-style: none; padding: 0; }
.lp a { color: inherit; text-decoration: none; }
.lp b, .lp strong { font-weight: 600; }
.lp :focus-visible {
outline: 2px solid var(--lp-brand-2);
outline-offset: 3px;
border-radius: 6px;
}
.lp-skip {
position: fixed;
top: 10px; left: 10px;
z-index: 999;
padding: 10px 16px;
border-radius: 10px;
background: var(--lp-brand);
color: #03211B;
font-weight: 600;
transform: translateY(-160%);
transition: transform 180ms var(--lp-ease);
}
.lp-skip:focus-visible { transform: translateY(0); }
/* ------------------------------------------------------------------
4. ESTRUTURA
------------------------------------------------------------------ */
.lp-shell {
width: 100%;
max-width: var(--lp-shell);
margin-inline: auto;
padding-inline: var(--lp-pad);
}
.lp-shell--narrow { max-width: 800px; }
.lp-sec { position: relative; padding-block: var(--lp-sec-y); }
.lp-sec > .lp-shell { position: relative; z-index: 1; }
/* Respiro entre seções: um halo baixíssimo marca onde a página troca de
assunto. É deliberadamente fraco; se der para apontar o gradiente, está
forte demais. */
.lp-sim::before, .lp-price::before, .lp-trust::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(64% 52% at 50% 0%, rgba(31,179,148,0.055), transparent 64%);
}
.lp-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 72px); }
.lp-head--center { margin-inline: auto; text-align: center; }
.lp-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--lp-brand-2);
}
.lp-kicker--center { display: block; text-align: center; }
.lp-h2 {
font-family: var(--lp-font-display);
font-size: clamp(2rem, 4.6vw, 3.5rem);
line-height: 1.06;
letter-spacing: -0.035em;
font-weight: 600;
/* Os títulos que cabem em duas linhas trazem o
no HTML, e para eles
isto não muda nada. Vale para os que sobram da largura: sem o equilíbrio,
o navegador enche a primeira linha e deixa uma palavra sozinha na última.
Onde a propriedade não existe, a quebra volta a ser a de sempre. */
text-wrap: balance;
}
.lp-lead {
margin-top: 22px;
font-size: clamp(1rem, 1.35vw, 1.16rem);
line-height: 1.65;
color: var(--lp-soft);
max-width: 62ch;
/* Parágrafo de abertura não termina com uma palavra sozinha. */
text-wrap: pretty;
}
.lp-head--center .lp-lead { margin-inline: auto; }
/* Ponte conceitual: a frase que liga a seção anterior ao título desta.
Fica entre o kicker e o H2, em corpo médio e cor apagada, para que o
título continue sendo o primeiro elemento que o olho pega. */
.lp-bridge {
max-width: 30ch;
margin: 0 0 14px;
font-size: clamp(1.05rem, 2vw, 1.35rem);
line-height: 1.35;
letter-spacing: -0.02em;
color: var(--lp-faint);
}
.lp-head--center .lp-bridge { margin-inline: auto; }
.lp-accent {
color: var(--lp-brand-2);
background: linear-gradient(180deg, var(--lp-brand-2), var(--lp-brand));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.lp-badge {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid var(--lp-line-2);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--lp-faint);
white-space: nowrap;
}
.lp-badge--demo { background: rgba(217,171,87,0.1); border-color: rgba(217,171,87,0.28); color: var(--lp-brass); }
.lp-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(31,179,148,0.12);
border: 1px solid rgba(31,179,148,0.24);
color: var(--lp-brand-2);
font-size: 11px;
font-weight: 500;
}
/* ------------------------------------------------------------------
5. BOTÕES
O brilho segue o cursor por duas variáveis escritas pelo JS
(--mx/--my). Sem JS, o gradiente fica centrado e nada quebra.
------------------------------------------------------------------ */
.lp-btn {
--mx: 50%;
--my: 50%;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 22px;
border: 1px solid transparent;
border-radius: 999px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
cursor: pointer;
isolation: isolate;
overflow: hidden;
transition: transform 260ms var(--lp-ease), box-shadow 260ms var(--lp-ease),
background-color 200ms var(--lp-ease), border-color 200ms var(--lp-ease);
}
.lp-btn svg { width: 16px; height: 16px; flex: none; }
.lp-btn--sm { padding: 9px 17px; font-size: 14px; }
.lp-btn--lg { padding: 16px 28px; font-size: 16px; }
.lp-btn--block { width: 100%; }
.lp-btn--primary {
background: linear-gradient(180deg, var(--lp-brand-2), var(--lp-brand));
color: #032019;
box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 10px 26px -10px rgba(31,179,148,0.72);
}
.lp-btn--primary::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(120px 120px at var(--mx) var(--my), rgba(255,255,255,0.5), transparent 62%);
opacity: 0;
transition: opacity 260ms var(--lp-ease);
}
.lp-btn--primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 16px 34px -12px rgba(31,179,148,0.85); }
.lp-btn--primary:hover::after { opacity: 1; }
.lp-btn--primary:active { transform: translateY(1px) scale(0.995); }
.lp-btn--ghost {
background: rgba(233,240,237,0.03);
border-color: var(--lp-line-2);
color: var(--lp-text);
backdrop-filter: blur(8px);
}
.lp-btn--ghost:hover { background: rgba(233,240,237,0.07); border-color: rgba(233,240,237,0.24); }
.lp-btn__arrow { transition: transform 260ms var(--lp-ease); }
.lp-btn:hover .lp-btn__arrow { transform: translateX(3px); }
.lp-link-quiet {
font-size: 14px;
color: var(--lp-soft);
padding: 8px 4px;
transition: color 180ms var(--lp-ease);
}
.lp-link-quiet:hover { color: var(--lp-text); }
/* ------------------------------------------------------------------
6. ATMOSFERA
Grade técnica quase invisível, um brilho lento que acompanha o
cursor e granulação para tirar o aspecto de gradiente digital.
Tudo em posição fixa e fora do fluxo: nunca empurra conteúdo.
------------------------------------------------------------------ */
.lp-atmos {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.lp-atmos__grid {
position: absolute;
inset: -10%;
background-image:
linear-gradient(rgba(233,240,237,0.032) 1px, transparent 1px),
linear-gradient(90deg, rgba(233,240,237,0.032) 1px, transparent 1px);
background-size: 72px 72px;
-webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 8%, transparent 72%);
mask-image: radial-gradient(120% 90% at 50% 0%, #000 8%, transparent 72%);
}
.lp-atmos__glow {
--gx: 50vw;
--gy: 20vh;
position: absolute;
top: 0; left: 0;
width: 900px; height: 900px;
margin: -450px 0 0 -450px;
border-radius: 50%;
background: radial-gradient(circle, rgba(31,179,148,0.20), rgba(31,179,148,0.06) 42%, transparent 68%);
transform: translate3d(var(--gx), var(--gy), 0);
will-change: transform;
}
.lp-atmos__noise {
position: absolute;
inset: 0;
opacity: 0.42;
mix-blend-mode: overlay;
background-image: var(--lp-noise);
}
/* EMPILHAMENTO ACIMA DA ATMOSFERA.
Aqui existia `body.lp > *:not(.lp-atmos) { position: relative; z-index: 1 }`.
A regra tem especificidade (0,2,1) e vencia o `position: fixed` de
`.lp-skip` e de `.lp-dock`, que são (0,1,0). Duas consequências reais:
1. A doca de CTA do celular deixava de ser fixa. Como ela mantinha
`left: 12px` (aplicado a elemento relativo como deslocamento) e
largura de 100%, o documento ficava 12px mais largo que a janela:
era ela a origem do `scrollWidth > clientWidth` a 390px.
2. O link "pular para o conteúdo" ocupava espaço no fluxo, empurrado
para fora só pelo `translateY`.
Elevar o conteúdo acima da atmosfera não exige mexer em `position`: basta
nomear os blocos que realmente compõem a página. Quem já é posicionado
(`.lp-nav`, `.lp-skip`, `.lp-dock`) traz o próprio `z-index`. */
body.lp > main,
body.lp > .lp-foot { position: relative; z-index: 1; }
/* Granulação em SVG embutido: 1 KB, sem requisição e sem imagem no disco.
As aspas internas vão percent-encoded para caber dentro do url(""). */
:root {
--lp-noise: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%223%22/%3E%3C/filter%3E%3Crect width=%22140%22 height=%22140%22 filter=%22url(%23n)%22 opacity=%220.3%22/%3E%3C/svg%3E");
}
/* ------------------------------------------------------------------
7. NAVEGAÇÃO
------------------------------------------------------------------ */
.lp-nav {
position: sticky;
top: 0;
z-index: 60;
border-bottom: 1px solid transparent;
transition: background-color 320ms var(--lp-ease), border-color 320ms var(--lp-ease);
}
.lp-nav.is-stuck {
background: color-mix(in srgb, var(--lp-void) 76%, transparent);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border-bottom-color: var(--lp-line);
}
.lp-nav__inner {
max-width: var(--lp-shell);
margin-inline: auto;
padding: 14px var(--lp-pad);
display: flex;
align-items: center;
gap: 20px;
transition: padding 320ms var(--lp-ease);
}
.lp-nav.is-stuck .lp-nav__inner { padding-block: 9px; }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; }
.lp-brand__mark {
width: 30px; height: 30px;
display: grid; place-items: center;
border-radius: 9px;
color: var(--lp-brand-2);
background: linear-gradient(160deg, rgba(31,179,148,0.2), rgba(31,179,148,0.04));
border: 1px solid rgba(31,179,148,0.26);
}
.lp-brand__mark svg { width: 19px; height: 19px; }
.lp-brand__word {
font-family: var(--lp-font-display);
font-size: 19px;
font-weight: 600;
letter-spacing: -0.02em;
}
.lp-nav__links { display: flex; gap: 2px; margin-inline: auto; }
.lp-nav__links a {
position: relative;
padding: 8px 13px;
border-radius: 999px;
font-size: 14px;
color: var(--lp-soft);
transition: color 180ms var(--lp-ease);
}
.lp-nav__links a::after {
content: "";
position: absolute;
left: 13px; right: 13px; bottom: 3px;
height: 1px;
background: var(--lp-brand-2);
transform: scaleX(0);
transform-origin: left;
transition: transform 300ms var(--lp-ease);
}
.lp-nav__links a:hover { color: var(--lp-text); }
.lp-nav__links a:hover::after { transform: scaleX(1); }
.lp-nav__actions { display: flex; align-items: center; gap: 12px; }
.lp-nav__toggle {
display: none;
width: 42px; height: 42px;
align-items: center; justify-content: center;
border-radius: 12px;
border: 1px solid var(--lp-line-2);
background: rgba(233,240,237,0.04);
color: var(--lp-text);
cursor: pointer;
}
.lp-nav__bars { display: grid; gap: 5px; width: 17px; }
.lp-nav__bars i { height: 1.6px; background: currentColor; border-radius: 2px; transition: transform 260ms var(--lp-ease); }
.lp-nav__toggle[aria-expanded="true"] .lp-nav__bars i:first-child { transform: translateY(3.3px) rotate(45deg); }
.lp-nav__toggle[aria-expanded="true"] .lp-nav__bars i:last-child { transform: translateY(-3.3px) rotate(-45deg); }
.lp-nav__sheet {
display: grid;
gap: 0;
padding: 6px var(--lp-pad) calc(20px + env(safe-area-inset-bottom, 0px));
padding-left: max(var(--lp-pad), env(safe-area-inset-left, 0px));
padding-right: max(var(--lp-pad), env(safe-area-inset-right, 0px));
background: color-mix(in srgb, var(--lp-void) 97%, transparent);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid var(--lp-line);
/* Numa tela baixa (paisagem, ou navegador com barra grande) a lista
precisa rolar dentro do próprio painel em vez de empurrar a barra
para fora da janela. `dvh` acompanha a barra do navegador móvel. */
max-height: calc(100vh - 62px);
max-height: calc(100dvh - 62px);
overflow-y: auto;
overscroll-behavior: contain;
}
.lp-nav__sheet[hidden] { display: none; }
.lp-nav__sheet a {
display: flex;
align-items: center;
/* 48px de alvo: acima dos 44 pedidos, porque aqui o dedo chega em
movimento e a lista é densa. */
min-height: 48px;
padding: 12px 4px;
font-size: 17px;
border-bottom: 1px solid var(--lp-line);
color: var(--lp-soft);
transition: color 180ms var(--lp-ease);
}
.lp-nav__sheet a:hover { color: var(--lp-text); }
.lp-nav__sheet-cta {
justify-content: center;
margin-top: 18px;
min-height: 52px;
padding: 12px 18px;
border-bottom: 0;
border-radius: 999px;
text-align: center;
background: linear-gradient(180deg, var(--lp-brand-2), var(--lp-brand));
color: #032019;
font-weight: 600;
box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 10px 26px -12px rgba(31,179,148,0.7);
}
.lp-nav__sheet-cta:hover { color: #032019; }
/* Enquanto o painel está aberto o corpo não rola por baixo dele. A classe
é escrita pelo JS; sem JS o painel nem abre. */
html.lp-locked, html.lp-locked body.lp { overflow: hidden; }
.lp-nav__progress {
position: absolute;
left: 0; bottom: -1px;
height: 2px;
width: 100%;
transform: scaleX(var(--lp-progress, 0));
transform-origin: left;
background: linear-gradient(90deg, var(--lp-brand), var(--lp-brand-2), var(--lp-brass));
opacity: 0;
transition: opacity 300ms var(--lp-ease);
}
.lp-nav.is-stuck .lp-nav__progress { opacity: 0.9; }
/* ------------------------------------------------------------------
8. HERO
------------------------------------------------------------------ */
.lp-hero {
position: relative;
padding-top: clamp(36px, 6vh, 72px);
padding-bottom: clamp(64px, 9vh, 116px);
text-align: center;
}
.lp-hero__intro { max-width: 900px; margin-inline: auto; }
.lp-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 16px 7px 12px;
border-radius: 999px;
border: 1px solid var(--lp-line-2);
background: rgba(233,240,237,0.035);
font-size: 13px;
color: var(--lp-soft);
}
.lp-eyebrow__dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--lp-brand-2);
box-shadow: 0 0 0 3px rgba(31,179,148,0.18);
animation: lp-breathe 2.8s var(--lp-ease-io) infinite;
}
@keyframes lp-breathe {
0%, 100% { box-shadow: 0 0 0 3px rgba(31,179,148,0.16); }
50% { box-shadow: 0 0 0 6px rgba(31,179,148,0.05); }
}
.lp-hero__title {
margin-top: clamp(22px, 3vw, 34px);
font-family: var(--lp-font-display);
font-size: clamp(2.5rem, 6.4vw, 4.9rem);
line-height: 1.0;
letter-spacing: -0.045em;
font-weight: 600;
}
.lp-line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.lp-line > span { display: block; }
.lp-hero__lead {
margin: clamp(20px, 2.6vw, 30px) auto 0;
max-width: 62ch;
font-size: clamp(1.02rem, 1.4vw, 1.2rem);
line-height: 1.62;
color: var(--lp-soft);
}
.lp-hero__lead em { font-style: normal; color: var(--lp-text); font-weight: 500; }
.lp-hero__actions {
margin-top: clamp(30px, 3.6vw, 44px);
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.lp-hero__micro { margin-top: 18px; font-size: 13.5px; color: var(--lp-faint); }
/* Palco do produto. A inclinação vem da rolagem (JS escreve --lp-tilt),
de modo que o painel parece deitar e entrar na seção seguinte. */
.lp-hero__stage {
position: relative;
max-width: 1220px;
margin: clamp(40px, 5vw, 68px) auto 0;
padding-inline: var(--lp-pad);
transform: perspective(1900px) rotateX(var(--lp-tilt, 0deg)) scale(var(--lp-shrink, 1));
transform-origin: 50% 0%;
will-change: transform;
}
.lp-stage__halo {
position: absolute;
left: 50%; top: -6%;
width: min(1000px, 96%);
height: 76%;
transform: translateX(-50%);
background: radial-gradient(60% 60% at 50% 40%, rgba(31,179,148,0.24), transparent 68%);
filter: blur(46px);
z-index: 0;
}
.lp-scrollhint {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: clamp(38px, 5vw, 62px);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--lp-faint);
transition: color 200ms var(--lp-ease);
}
.lp-scrollhint:hover { color: var(--lp-soft); }
.lp-scrollhint__rail {
width: 20px; height: 32px;
border: 1px solid var(--lp-line-2);
border-radius: 999px;
display: grid;
justify-items: center;
padding-top: 6px;
}
.lp-scrollhint__rail i {
width: 3px; height: 6px;
border-radius: 2px;
background: var(--lp-brand-2);
animation: lp-scrolldot 1.9s var(--lp-ease-io) infinite;
}
@keyframes lp-scrolldot {
0% { transform: translateY(0); opacity: 0; }
25% { opacity: 1; }
75% { transform: translateY(12px); opacity: 0; }
100% { transform: translateY(12px); opacity: 0; }
}
/* Cartões que flutuam ao redor do painel. Decorativos: some no celular. */
.lp-float {
position: absolute;
z-index: 3;
display: grid;
gap: 4px;
padding: 13px 16px;
border-radius: var(--lp-r);
background: color-mix(in srgb, var(--lp-surface-2) 88%, transparent);
border: 1px solid var(--lp-line-2);
box-shadow: var(--lp-shadow);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
text-align: left;
animation: lp-drift 9s var(--lp-ease-io) infinite;
}
@keyframes lp-drift {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
/* ONDE CADA CARTÃO POUSA, E POR QUE NÃO É ONDE ESTAVA.
Os dois flutuam por cima da maquete de propósito: é o que dá profundidade.
O que não pode é pousar em cima de NÚMERO. Medido em 1121, 1180, 1280,
1440, 1600 e 1920px, com a deriva de 9px incluída na conta, o par anterior
(26% e 58%) cobria "8,4% nos últimos 6 meses" e, do outro lado, três
valores de categoria de uma vez. A maquete não lia como composição em
camadas; lia como defeito de renderização.
O da esquerda desce para a faixa do gráfico, onde a linha ainda corre
baixa e o canto de cima está vazio: 32% é a única altura livre em todas
as larguras medidas.
O da direita é outro caso: a coluna da direita tem linha em toda altura,
e não existe faixa livre enquanto ele estiver DENTRO do palco. Por isso
ele passa a pender para fora, como um aviso de sistema pende da janela.
A conta do `right` é a folga: `50vw - 610px` é o que sobra de cada lado
quando o palco chega ao teto de 1220px. Sobrando, ele pende até 34px e
guarda 8px de respiro da borda da janela; faltando, o valor vira positivo
sozinho e ele volta para dentro, sem estouro horizontal em nenhuma
largura. Abaixo de 1120px os dois somem, como já sumiam. */
.lp-float--alert {
left: max(0px, calc(50% - 700px));
top: 32%;
grid-template-columns: auto 1fr;
align-items: center;
gap: 11px;
}
.lp-float--proj {
right: max(calc(618px - 50vw), -34px);
top: 26%;
animation-delay: -4.5s;
min-width: 178px;
}
.lp-float__dot {
width: 9px; height: 9px;
border-radius: 50%;
background: var(--lp-brass);
box-shadow: 0 0 0 4px rgba(217,171,87,0.15);
}
.lp-float__body b { display: block; font-size: 13px; font-weight: 600; }
.lp-float__body small { font-size: 11.5px; color: var(--lp-faint); }
.lp-float__label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lp-faint); }
.lp-float__value { font-family: var(--lp-font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.lp-float__spark { display: block; color: var(--lp-brand-2); height: 22px; }
.lp-float__spark svg { width: 100%; height: 22px; }
/* ------------------------------------------------------------------
9. MAQUETE DO APLICATIVO
Não é print: é HTML. Fica nítida em qualquer tela, pesa pouco,
herda o tema e pode animar peça por peça.
------------------------------------------------------------------ */
.lp-app {
position: relative;
z-index: 2;
border-radius: var(--lp-r-xl);
border: 1px solid var(--lp-line-2);
background: linear-gradient(180deg, var(--lp-surface), var(--lp-void-2));
box-shadow: var(--lp-shadow-lg), var(--lp-sheen);
overflow: hidden;
text-align: left;
}
.lp-app__bar {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 18px;
border-bottom: 1px solid var(--lp-line);
background: rgba(233,240,237,0.022);
}
.lp-app__dots { display: flex; gap: 6px; }
.lp-app__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(233,240,237,0.14); }
.lp-app__crumb {
margin-inline: auto;
font-size: 12px;
color: var(--lp-faint);
letter-spacing: 0.01em;
}
.lp-app__crumb span { opacity: 0.5; margin-inline: 5px; }
.lp-app__body { display: grid; grid-template-columns: 62px minmax(0, 1fr); }
.lp-app__rail {
display: grid;
gap: 6px;
align-content: start;
padding: 16px 0;
border-right: 1px solid var(--lp-line);
justify-items: center;
background: rgba(0,0,0,0.16);
}
.lp-app__railitem {
width: 36px; height: 36px;
display: grid; place-items: center;
border-radius: 11px;
color: var(--lp-faint);
}
.lp-app__railitem svg { width: 18px; height: 18px; }
.lp-app__railitem.is-active {
color: var(--lp-brand-2);
background: rgba(31,179,148,0.13);
box-shadow: inset 0 0 0 1px rgba(31,179,148,0.2);
}
.lp-app__railitem--foot { margin-top: 14px; }
.lp-app__screen { padding: clamp(14px, 1.6vw, 22px); display: grid; gap: 14px; align-content: start; }
.lp-app__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-app__hello { font-family: var(--lp-font-display); font-size: clamp(15px, 1.5vw, 19px); font-weight: 600; letter-spacing: -0.02em; }
.lp-app__when { font-size: 12px; color: var(--lp-faint); }
.lp-app__headright { display: flex; align-items: center; gap: 10px; }
.lp-app__avatar {
width: 30px; height: 30px;
display: grid; place-items: center;
border-radius: 50%;
background: linear-gradient(150deg, var(--lp-brand), var(--lp-brand-deep));
font-size: 12px; font-weight: 600; color: #041E19;
}
.lp-app__layout {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: 12px;
align-content: start;
}
.lp-card--balance { grid-column: 1; grid-row: 1; }
.lp-card--goal { grid-column: 2; grid-row: 1; }
.lp-card--tiles { grid-column: 1; grid-row: 2; }
.lp-card--cats { grid-column: 2; grid-row: 2 / span 2; }
.lp-card--moves { grid-column: 1; grid-row: 3; }
.lp-app__insight { grid-column: 1 / -1; }
.lp-card {
padding: 14px 16px;
border-radius: 16px;
border: 1px solid var(--lp-line);
background: var(--lp-surface-2);
box-shadow: var(--lp-sheen);
}
.lp-card__label {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lp-faint);
}
.lp-card--balance { background: linear-gradient(165deg, rgba(31,179,148,0.10), rgba(31,179,148,0.01) 58%), var(--lp-surface-2); }
.lp-card__amount {
margin-top: 6px;
font-family: var(--lp-font-display);
font-size: clamp(26px, 3.1vw, 40px);
font-weight: 600;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
line-height: 1.05;
}
.lp-card__delta {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 6px;
font-size: 12.5px;
color: var(--lp-brand-2);
font-variant-numeric: tabular-nums;
}
.lp-card__delta svg { width: 12px; height: 12px; }
/* Gráfico ------------------------------------------------------- */
.lp-chart { margin-top: 12px; }
.lp-chart svg { width: 100%; height: clamp(84px, 9.5vw, 116px); overflow: visible; }
.lp-chart__grid line { stroke: var(--lp-line); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
/* POR QUE NÃO TEM `vector-effect: non-scaling-stroke` AQUI.
O traço é revelado pelo par `pathLength="1"` + `stroke-dasharray: 1`: com o
comprimento normalizado, um tracejado de 1 cobre o caminho inteiro, e animar
o deslocamento de 1 para 0 desenha a linha. `non-scaling-stroke` quebra
exatamente isso, porque manda calcular o tracejado DEPOIS da transformação:
o valor deixa de ser "uma vez o caminho" e vira "162 pixels de tela", que é
menos da metade do caminho na maioria das larguras. O resultado não era um
detalhe de animação — a linha ficava PARTIDA em pedaços soltos, parada, em
768, 1024, 1440 e 1920px, e o estado escondido também vazava um pedaço.
Sem o efeito, a espessura acompanha a escala vertical do viewBox (a altura
renderizada dividida por 180, entre 0,46 e 0,64). A largura declarada aqui
já leva isso em conta: o que chega à tela fica entre 1,8 e 2,6px. */
.lp-chart__line {
stroke: var(--lp-brand-2);
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset 1700ms var(--lp-ease);
}
.lp-chart__area { opacity: 0; transition: opacity 900ms var(--lp-ease) 500ms; }
.lp-chart__head {
fill: var(--lp-brand-2);
stroke: var(--lp-void);
stroke-width: 3;
opacity: 0;
transition: opacity 400ms var(--lp-ease) 1400ms;
}
.is-in .lp-chart__line, .lp-chart.is-in .lp-chart__line { stroke-dashoffset: 0; }
.is-in .lp-chart__area, .lp-chart.is-in .lp-chart__area { opacity: 1; }
.is-in .lp-chart__head, .lp-chart.is-in .lp-chart__head { opacity: 1; }
.lp-chart__axis {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 10px;
letter-spacing: 0.04em;
color: var(--lp-faint);
}
.lp-chart__axis span:last-child { color: var(--lp-brand-2); }
/* Meta e anel ---------------------------------------------------- */
.lp-card--goal { display: grid; align-content: space-between; gap: 12px; }
.lp-goal { display: flex; align-items: center; gap: 14px; }
.lp-ring { position: relative; width: 78px; height: 78px; flex: none; }
.lp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lp-ring__track { fill: none; stroke: rgba(233,240,237,0.08); stroke-width: 8; }
.lp-ring__value {
fill: none;
stroke: var(--lp-brass);
stroke-width: 8;
stroke-linecap: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset 1500ms var(--lp-ease) 300ms;
}
.lp-ring--61.is-in .lp-ring__value, .is-in .lp-ring--61 .lp-ring__value { stroke-dashoffset: 0.39; }
.lp-ring__num {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--lp-font-display);
font-size: 17px;
font-weight: 600;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.lp-goal__name { font-size: 13.5px; font-weight: 600; }
.lp-goal__value { margin-top: 3px; font-size: 12.5px; color: var(--lp-soft); font-variant-numeric: tabular-nums; }
.lp-goal__value b { color: var(--lp-brass); }
.lp-goal__hint { margin-top: 6px; font-size: 11.5px; color: var(--lp-faint); }
.lp-goal__foot { display: grid; gap: 9px; padding-top: 13px; border-top: 1px solid var(--lp-line); }
.lp-goal__pace { font-size: 11.5px; color: var(--lp-faint); }
.lp-goal__pace b { color: var(--lp-text); font-variant-numeric: tabular-nums; }
.lp-goal__months { display: flex; gap: 4px; }
.lp-goal__months i { flex: 1; height: 5px; border-radius: 3px; background: rgba(233,240,237,0.07); }
.lp-goal__months i.is-done { background: var(--lp-brass); opacity: 0.75; }
/* Três indicadores do mês ---------------------------------------- */
.lp-card--tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; overflow: hidden; }
.lp-tile { padding: 13px 15px; position: relative; }
.lp-tile + .lp-tile { border-left: 1px solid var(--lp-line); }
.lp-tile__label { font-size: 11px; color: var(--lp-faint); }
.lp-tile__value {
margin-top: 4px;
font-family: var(--lp-font-display);
font-size: clamp(15px, 1.7vw, 20px);
font-weight: 600;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.lp-tile__bar {
display: block;
margin-top: 9px;
height: 3px;
border-radius: 2px;
background: currentColor;
opacity: 0.28;
transform: scaleX(0);
transform-origin: left;
transition: transform 900ms var(--lp-ease) 400ms;
}
.is-in .lp-tile__bar { transform: scaleX(1); }
.lp-tile--in { color: var(--lp-brand-2); }
.lp-tile--out { color: var(--lp-neg); }
.lp-tile--net { color: var(--lp-brass); }
.lp-tile__label, .lp-tile__value { color: var(--lp-text); }
.lp-tile--in .lp-tile__value { color: var(--lp-brand-2); }
.lp-tile--out .lp-tile__value { color: var(--lp-neg); }
.lp-tile--net .lp-tile__value { color: var(--lp-brass); }
.lp-tile__label { color: var(--lp-faint); }
/* Categorias ----------------------------------------------------- */
.lp-card--cats { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.lp-cats { display: grid; gap: 9px; margin-top: 12px; align-content: space-between; }
.lp-cat {
display: grid;
grid-template-columns: 84px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
font-size: 11.5px;
}
.lp-cat__name { color: var(--lp-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-cat__track { height: 6px; border-radius: 4px; background: rgba(233,240,237,0.06); overflow: hidden; }
.lp-cat__track i {
display: block;
height: 100%;
border-radius: 4px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform 950ms var(--lp-ease);
}
.is-in .lp-cat__track i { transform: scaleX(var(--w, 0.5)); }
.lp-cat__value { font-variant-numeric: tabular-nums; color: var(--lp-text); font-size: 11px; white-space: nowrap; }
.lp-cat--1 { color: #1FB394; --w: 1; }
.lp-cat--2 { color: #35DDB6; --w: 0.75; }
.lp-cat--3 { color: #7FD6BE; --w: 0.47; }
.lp-cat--4 { color: #D9AB57; --w: 0.34; }
.lp-cat--5 { color: #C58ED6; --w: 0.25; }
.lp-cat--6 { color: #6E837C; --w: 0.31; }
.lp-cat--1 .lp-cat__track i { transition-delay: 250ms; }
.lp-cat--2 .lp-cat__track i { transition-delay: 320ms; }
.lp-cat--3 .lp-cat__track i { transition-delay: 390ms; }
.lp-cat--4 .lp-cat__track i { transition-delay: 460ms; }
.lp-cat--5 .lp-cat__track i { transition-delay: 530ms; }
.lp-cat--6 .lp-cat__track i { transition-delay: 600ms; }
/* Lançamentos ---------------------------------------------------- */
.lp-moves { display: grid; gap: 2px; margin-top: 10px; }
.lp-moves li {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
align-items: center;
gap: 11px;
padding: 6px 0;
}
.lp-moves li + li { border-top: 1px solid var(--lp-line); }
.lp-moves__icon {
width: 28px; height: 28px;
border-radius: 9px;
background: rgba(233,240,237,0.05);
position: relative;
}
.lp-moves__icon::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 11px; height: 11px;
border-radius: 3px;
background: currentColor;
opacity: 0.9;
}
.lp-moves__icon--food { color: #35DDB6; }
.lp-moves__icon--in { color: #1FB394; }
.lp-moves__icon--home { color: #D9AB57; }
.lp-moves__main b { display: block; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-moves__main small { font-size: 11px; color: var(--lp-faint); }
.lp-moves__val { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--lp-soft); white-space: nowrap; }
.lp-moves__val--in { color: var(--lp-brand-2); }
/* Insight -------------------------------------------------------- */
.lp-app__insight {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 15px;
border-radius: 13px;
border: 1px solid rgba(31,179,148,0.2);
background: rgba(31,179,148,0.07);
font-size: 12.5px;
color: var(--lp-soft);
}
.lp-app__insight svg { width: 15px; height: 15px; flex: none; color: var(--lp-brand-2); }
.lp-app__insight b { color: var(--lp-brand-2); }
/* ------------------------------------------------------------------
9b. FAIXA DE CONFIANÇA
Três objeções derrubadas logo depois do hero. É faixa, não seção: sem
título, sem cartão, sem ícone grande. Altura total de uma linha no
desktop; no estreito vira 2 + 1, porque o rótulo do meio é o mais
longo e é ele que precisa da largura inteira.
------------------------------------------------------------------ */
.lp-strip {
position: relative;
border-block: 1px solid var(--lp-line);
background: linear-gradient(180deg, rgba(233,240,237,0.022), transparent);
}
.lp-strip__list {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
padding-block: 4px;
}
.lp-strip__item {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px clamp(16px, 3vw, 36px);
font-size: 13.5px;
line-height: 1.3;
color: var(--lp-soft);
}
/* Divisor exatamente entre os itens, sem elemento extra no HTML e sem
margem negativa: o item vizinho carrega a própria linha. */
.lp-strip__item + .lp-strip__item { border-left: 1px solid var(--lp-line-2); }
.lp-strip__item svg {
width: 18px; height: 18px;
flex: none;
color: var(--lp-brand-2);
opacity: 0.9;
}
/* ------------------------------------------------------------------
10. CAOS
As pontas soltas do mês entram espalhadas e convergem para o painel
conforme a rolagem. O JS escreve --p (0 a 1) e adiciona .is-ready.
Sem JS, ou com movimento reduzido, o estado final aparece pronto.
------------------------------------------------------------------ */
.lp-caos__punch {
margin-top: clamp(28px, 4vw, 46px);
text-align: center;
font-family: var(--lp-font-display);
font-size: clamp(1.3rem, 2.6vw, 2rem);
letter-spacing: -0.03em;
font-weight: 600;
}
.lp-caos__stage {
position: relative;
margin-top: clamp(36px, 5vw, 64px);
height: clamp(300px, 40vw, 440px);
display: grid;
place-items: center;
}
.lp-caos__field { position: absolute; inset: 0; --k: 1; }
.lp-chip {
--x: 0px; --y: 0px; --r: 0deg;
position: absolute;
left: 50%; top: 50%;
padding: 9px 15px;
border-radius: 999px;
border: 1px solid var(--lp-line-2);
background: color-mix(in srgb, var(--lp-surface-2) 92%, transparent);
box-shadow: var(--lp-shadow);
font-size: 12.5px;
color: var(--lp-soft);
white-space: nowrap;
transform: translate(-50%, -50%) translate3d(calc(var(--x) * var(--k)), calc(var(--y) * var(--k)), 0) rotate(var(--r));
}
.lp-caos.is-ready .lp-chip {
--f: calc(1 - var(--p, 0));
transform:
translate(-50%, -50%)
translate3d(calc(var(--x) * var(--k) * var(--f)), calc(var(--y) * var(--k) * var(--f)), 0)
rotate(calc(var(--r) * var(--f)))
scale(calc(0.6 + 0.4 * var(--f)));
opacity: calc(0.15 + 0.85 * var(--f));
}
/* Doze camadas de composição só valem enquanto a seção está por perto. A
classe `is-near` é escrita e retirada pelo JS. */
.lp-caos.is-ready.is-near .lp-chip { will-change: transform, opacity; }
.lp-chip--1 { --x: -430px; --y: -148px; --r: -6deg; }
.lp-chip--2 { --x: -338px; --y: 62px; --r: 4deg; }
.lp-chip--3 { --x: -252px; --y: -232px; --r: -3deg; }
.lp-chip--4 { --x: -146px; --y: 182px; --r: 7deg; }
.lp-chip--5 { --x: -66px; --y: -122px; --r: -5deg; }
.lp-chip--6 { --x: 112px; --y: -208px; --r: 5deg; }
.lp-chip--7 { --x: 214px; --y: 132px; --r: -4deg; }
.lp-chip--8 { --x: 332px; --y: -78px; --r: 3deg; }
.lp-chip--9 { --x: 428px; --y: 168px; --r: -6deg; }
.lp-chip--10 { --x: -436px; --y: 212px; --r: 5deg; }
.lp-chip--11 { --x: 58px; --y: 232px; --r: -3deg; }
.lp-chip--12 { --x: 404px; --y: -224px; --r: 4deg; }
.lp-caos__target { position: relative; z-index: 2; }
.lp-caos.is-ready .lp-caos__target {
opacity: var(--p, 0);
transform: scale(calc(0.88 + 0.12 * var(--p, 0)));
}
.lp-caos.is-ready.is-near .lp-caos__target { will-change: transform, opacity; }
.lp-caos__panel {
display: grid;
gap: 12px;
width: min(360px, 82vw);
padding: 20px 22px;
border-radius: var(--lp-r-lg);
border: 1px solid var(--lp-line-2);
background: linear-gradient(170deg, rgba(31,179,148,0.12), transparent 60%), var(--lp-surface-2);
box-shadow: var(--lp-shadow-lg);
}
.lp-caos__panelhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lp-caos__panelhead b { font-family: var(--lp-font-display); font-size: 17px; letter-spacing: -0.02em; }
.lp-caos__panelhead span { font-size: 11px; color: var(--lp-brand-2); }
.lp-caos__rows { display: grid; gap: 7px; }
.lp-caos__row { height: 8px; border-radius: 4px; background: rgba(233,240,237,0.07); }
.lp-caos__row--a { width: 100%; background: linear-gradient(90deg, rgba(31,179,148,0.55), rgba(31,179,148,0.12)); }
.lp-caos__row--b { width: 76%; }
.lp-caos__row--c { width: 52%; }
.lp-caos__row--d { width: 34%; }
.lp-caos__total { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--lp-line); }
.lp-caos__total small { font-size: 11px; color: var(--lp-faint); }
.lp-caos__total b {
font-family: var(--lp-font-display);
font-size: 27px;
font-weight: 600;
letter-spacing: -0.035em;
color: var(--lp-brand-2);
font-variant-numeric: tabular-nums;
}
/* ------------------------------------------------------------------
11. HISTÓRIA DO PRODUTO (sticky showcase)
------------------------------------------------------------------ */
.lp-story__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
gap: clamp(36px, 5vw, 80px);
align-items: start;
}
.lp-story__steps { grid-column: 1; grid-row: 1; }
.lp-story__stage { grid-column: 2; grid-row: 1; position: sticky; top: 104px; }
.lp-step {
padding-block: clamp(52px, 14vh, 116px);
transition: opacity 520ms var(--lp-ease);
}
/* Sem JavaScript nenhuma etapa e esmaecida: as quatro sao texto util.
O contraste so vira ferramenta narrativa quando existe quem ative.
E só no desktop: no celular cada etapa é um bloco autônomo, com o
próprio recorte de tela embaixo; apagar os vizinhos ali só atrapalha
a leitura de quem está rolando devagar. */
@media (min-width: 981px) {
.lp-story.is-live .lp-step { opacity: 0.4; }
.lp-story.is-live .lp-step.is-active { opacity: 1; }
}
.lp-step:first-child { padding-top: 0; }
.lp-step:last-child { padding-bottom: clamp(20px, 6vh, 60px); }
/* Recorte de tela por etapa. Só existe no estreito (ver o bloco
responsivo); no desktop quem conta essa história é o painel fixo. */
.lp-step__art { display: none; }
.lp-step__num {
display: inline-block;
font-family: var(--lp-font-display);
font-size: 12px;
letter-spacing: 0.2em;
color: var(--lp-brand-2);
margin-bottom: 14px;
}
.lp-step__title {
font-family: var(--lp-font-display);
font-size: clamp(1.35rem, 2.5vw, 1.95rem);
line-height: 1.18;
letter-spacing: -0.03em;
font-weight: 600;
}
.lp-step p { margin-top: 14px; color: var(--lp-soft); max-width: 46ch; }
.lp-story__frame {
position: relative;
height: clamp(400px, 52vh, 540px);
border-radius: var(--lp-r-xl);
border: 1px solid var(--lp-line-2);
background: linear-gradient(180deg, var(--lp-surface), var(--lp-void-2));
box-shadow: var(--lp-shadow-lg), var(--lp-sheen);
overflow: hidden;
}
.lp-story__chrome {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 16px;
border-bottom: 1px solid var(--lp-line);
background: rgba(233,240,237,0.022);
}
.lp-story__chrome i { width: 8px; height: 8px; border-radius: 50%; background: rgba(233,240,237,0.14); }
.lp-story__chrome b {
margin-left: auto;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--lp-brass);
}
.lp-panel {
position: absolute;
left: 0; right: 0; bottom: 0;
top: 45px;
padding: clamp(18px, 2.2vw, 26px);
display: grid;
gap: 14px;
align-content: start;
opacity: 0;
transform: translateY(16px) scale(0.985);
transition: opacity 460ms var(--lp-ease), transform 520ms var(--lp-ease);
pointer-events: none;
}
.lp-panel.is-active { opacity: 1; transform: none; }
.lp-panel__title { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--lp-faint); }
.lp-panel__big {
font-family: var(--lp-font-display);
font-size: clamp(26px, 3.2vw, 38px);
font-weight: 600;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
line-height: 1.05;
}
.lp-panel__big small { font-size: 0.42em; font-weight: 500; color: var(--lp-faint); letter-spacing: 0; }
.lp-panel__big .lp-up { color: var(--lp-brand-2); }
.lp-panel__note { font-size: 12.5px; color: var(--lp-faint); line-height: 1.5; }
.lp-panel__alert {
padding: 11px 14px;
border-radius: 12px;
border: 1px solid rgba(233,115,106,0.26);
background: rgba(233,115,106,0.08);
font-size: 12.5px;
color: #F0A49D;
}
.lp-stackbar { display: flex; height: 12px; border-radius: 8px; overflow: hidden; gap: 2px; }
.lp-stackbar i { display: block; height: 100%; }
.lp-stackbar--a { flex: 32; background: #1FB394; }
.lp-stackbar--b { flex: 24; background: #35DDB6; }
.lp-stackbar--c { flex: 15; background: #7FD6BE; }
.lp-stackbar--d { flex: 11; background: #D9AB57; }
.lp-stackbar--e { flex: 8; background: #C58ED6; }
.lp-stackbar--f { flex: 10; background: #46564F; }
.lp-panel__list { display: grid; gap: 10px; }
.lp-panel__list li {
display: grid;
grid-template-columns: 10px minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--lp-soft);
}
.lp-panel__list b { color: var(--lp-text); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.lp-panel__list em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--lp-text); min-width: 92px; text-align: right; }
.lp-panel__list--plain li { grid-template-columns: 10px minmax(0, 1fr) 0 auto; }
.lp-swatch { width: 10px; height: 10px; border-radius: 3px; }
.lp-swatch--a { background: #1FB394; }
.lp-swatch--b { background: #35DDB6; }
.lp-swatch--c { background: #7FD6BE; }
.lp-swatch--d { background: #D9AB57; }
/* Orçamento ------------------------------------------------------ */
.lp-budget { display: grid; gap: 13px; }
.lp-budget li {
display: grid;
grid-template-columns: 92px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
font-size: 12.5px;
color: var(--lp-soft);
}
.lp-budget b { font-variant-numeric: tabular-nums; color: var(--lp-text); font-size: 12px; white-space: nowrap; }
.lp-budget__track { height: 8px; border-radius: 5px; background: rgba(233,240,237,0.06); overflow: hidden; }
.lp-budget__track i {
display: block;
height: 100%;
border-radius: 5px;
background: var(--lp-brand);
transform: scaleX(0);
transform-origin: left;
transition: transform 900ms var(--lp-ease) 200ms;
}
.lp-panel.is-active .lp-budget__track i,
.lp-step__art.is-in .lp-budget__track i { transform: scaleX(var(--w, 0.5)); }
.lp-budget--85 { --w: 0.85; }
.lp-budget--85b { --w: 0.85; }
.lp-budget--87 { --w: 0.87; }
.lp-budget--106 { --w: 1; background: var(--lp-neg); }
.lp-budget li.is-over b { color: var(--lp-neg); }
/* Metas ---------------------------------------------------------- */
.lp-goals { display: grid; gap: 16px; }
.lp-goals li { display: grid; gap: 7px; }
.lp-goals__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.lp-goals__row em { font-style: normal; font-family: var(--lp-font-display); color: var(--lp-brass); font-variant-numeric: tabular-nums; }
.lp-goals__track { height: 8px; border-radius: 5px; background: rgba(233,240,237,0.06); overflow: hidden; }
.lp-goals__track i {
display: block;
height: 100%;
border-radius: 5px;
background: linear-gradient(90deg, var(--lp-brass), #F0CE8C);
transform: scaleX(0);
transform-origin: left;
transition: transform 950ms var(--lp-ease) 220ms;
}
.lp-panel.is-active .lp-goals__track i,
.lp-step__art.is-in .lp-goals__track i { transform: scaleX(var(--w, 0.5)); }
.lp-goals--61 { --w: 0.61; }
.lp-goals--38 { --w: 0.38; }
.lp-goals--84 { --w: 0.84; }
.lp-goals small { font-size: 11.5px; color: var(--lp-faint); font-variant-numeric: tabular-nums; }
/* Barras de patrimônio ------------------------------------------- */
.lp-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.lp-bars i {
flex: 1;
border-radius: 5px 5px 2px 2px;
background: linear-gradient(180deg, var(--lp-brand-2), rgba(31,179,148,0.22));
transform: scaleY(0);
transform-origin: bottom;
height: var(--h, 40%);
transition: transform 700ms var(--lp-ease);
}
.lp-panel.is-active .lp-bars i,
.lp-step__art.is-in .lp-bars i { transform: scaleY(1); }
.lp-bars--1 { --h: 30%; transition-delay: 60ms; }
.lp-bars--2 { --h: 36%; transition-delay: 105ms; }
.lp-bars--3 { --h: 41%; transition-delay: 150ms; }
.lp-bars--4 { --h: 52%; transition-delay: 195ms; }
.lp-bars--5 { --h: 48%; transition-delay: 240ms; }
.lp-bars--6 { --h: 61%; transition-delay: 285ms; }
.lp-bars--7 { --h: 67%; transition-delay: 330ms; }
.lp-bars--8 { --h: 73%; transition-delay: 375ms; }
.lp-bars--9 { --h: 82%; transition-delay: 420ms; }
.lp-bars--10 { --h: 87%; transition-delay: 465ms; }
.lp-bars--11 { --h: 93%; transition-delay: 510ms; }
.lp-bars--12 { --h: 100%; transition-delay: 555ms; }
.lp-bars i { height: var(--h); }
/* ------------------------------------------------------------------
12. SIMULADORES
------------------------------------------------------------------ */
.lp-sim__live {
display: grid;
grid-template-columns: minmax(0, 370px) minmax(0, 1fr);
gap: clamp(22px, 3vw, 46px);
padding: clamp(22px, 2.8vw, 38px);
border-radius: var(--lp-r-xl);
border: 1px solid var(--lp-line-2);
background:
radial-gradient(90% 120% at 100% 0%, rgba(31,179,148,0.10), transparent 62%),
linear-gradient(180deg, var(--lp-surface), var(--lp-void-2));
box-shadow: var(--lp-shadow-lg), var(--lp-sheen);
}
.lp-sim__eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-brand-2); }
.lp-sim__title {
margin-top: 8px;
font-family: var(--lp-font-display);
font-size: clamp(1.4rem, 2.2vw, 1.85rem);
font-weight: 600;
letter-spacing: -0.03em;
}
.lp-sim__sub { margin-top: 8px; font-size: 13.5px; color: var(--lp-soft); }
.lp-field { margin-top: 22px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 12px; }
.lp-field label { font-size: 13px; color: var(--lp-soft); }
.lp-field output {
font-family: var(--lp-font-display);
font-size: 14px;
font-weight: 600;
color: var(--lp-text);
font-variant-numeric: tabular-nums;
}
.lp-field input[type="range"] {
grid-column: 1 / -1;
width: 100%;
height: 26px;
margin: 2px 0 0;
background: transparent;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.lp-field input[type="range"]::-webkit-slider-runnable-track {
height: 5px;
border-radius: 4px;
background: rgba(233,240,237,0.1);
}
.lp-field input[type="range"]::-moz-range-track {
height: 5px;
border-radius: 4px;
background: rgba(233,240,237,0.1);
}
.lp-field input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px; height: 20px;
margin-top: -7.5px;
border-radius: 50%;
background: linear-gradient(180deg, var(--lp-brand-2), var(--lp-brand));
border: 2px solid var(--lp-void);
box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 0 0 rgba(31,179,148,0.3);
transition: box-shadow 200ms var(--lp-ease), transform 200ms var(--lp-ease);
}
.lp-field input[type="range"]::-moz-range-thumb {
width: 18px; height: 18px;
border-radius: 50%;
background: linear-gradient(180deg, var(--lp-brand-2), var(--lp-brand));
border: 2px solid var(--lp-void);
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.lp-field input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 0 7px rgba(31,179,148,0.16); }
.lp-field input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.08); }
.lp-sim__disclaimer {
margin-top: 26px;
padding-top: 16px;
border-top: 1px solid var(--lp-line);
font-size: 11.5px;
line-height: 1.55;
color: var(--lp-faint);
}
.lp-sim__result { display: grid; align-content: start; gap: clamp(16px, 2vw, 24px); }
.lp-sim__label { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lp-faint); }
.lp-sim__amount {
margin-top: 6px;
font-family: var(--lp-font-display);
font-size: clamp(2.1rem, 5vw, 3.4rem);
font-weight: 600;
letter-spacing: -0.045em;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--lp-brand-2);
}
.lp-sim__split { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--lp-soft); }
.lp-sim__split span { display: inline-flex; align-items: center; gap: 8px; }
.lp-sim__split b { color: var(--lp-text); font-variant-numeric: tabular-nums; }
.lp-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.lp-dot--in { background: rgba(31,179,148,0.5); }
.lp-dot--juros { background: var(--lp-brass); }
.lp-sim__bars { display: flex; align-items: flex-end; gap: clamp(2px, 0.6vw, 6px); height: clamp(150px, 22vh, 230px); }
.lp-simbar {
flex: 1;
display: flex;
flex-direction: column-reverse;
height: var(--t, 10%);
min-height: 3px;
border-radius: 5px 5px 2px 2px;
overflow: hidden;
transition: height 460ms var(--lp-ease);
}
.lp-simbar i { display: block; width: 100%; transition: height 460ms var(--lp-ease); }
.lp-simbar__own { height: var(--seg-a, 60%); background: rgba(31,179,148,0.42); }
.lp-simbar__int { height: var(--seg-b, 40%); background: linear-gradient(180deg, var(--lp-brass), rgba(217,171,87,0.55)); }
.lp-sim__axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; color: var(--lp-faint); }
.lp-sim__foot { font-size: 13px; color: var(--lp-soft); }
/* CATÁLOGO DOS OUTROS OITO.
Antes eram oito cartões com parágrafo, o que no celular virava mais de
mil pixels de rolagem para uma lista de nomes. Aqui o catálogo é um
índice: um painel só, linhas com nome e uma dica curta, hierarquia
igual à de um sumário de produto. Ocupa um terço da altura e parece
mais o aplicativo. */
.lp-sim__catalog {
margin-top: clamp(32px, 4vw, 56px);
border: 1px solid var(--lp-line);
border-radius: var(--lp-r-lg);
background: var(--lp-surface);
overflow: hidden;
}
.lp-sim__catalogtitle {
padding: 14px clamp(18px, 2vw, 24px);
border-bottom: 1px solid var(--lp-line);
background: rgba(233,240,237,0.02);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--lp-faint);
}
.lp-simlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-simlist > li { border-bottom: 1px solid var(--lp-line); }
.lp-simlist > li:nth-child(odd) { border-right: 1px solid var(--lp-line); }
.lp-simlist > li:nth-last-child(-n+2) { border-bottom: 0; }
.lp-simcard {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 3px 14px;
padding: 14px clamp(18px, 2vw, 24px);
min-height: 68px;
height: 100%;
transition: background-color 260ms var(--lp-ease);
}
.lp-simcard:hover { background: var(--lp-surface-2); }
.lp-simcard__name {
grid-column: 1; grid-row: 1;
font-family: var(--lp-font-display);
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.018em;
}
.lp-simcard__hint {
grid-column: 1; grid-row: 2;
font-size: 12px;
line-height: 1.45;
color: var(--lp-faint);
}
.lp-simcard__go {
grid-column: 2; grid-row: 1 / span 2;
position: relative;
width: 22px; height: 22px;
flex: none;
border-radius: 50%;
border: 1px solid var(--lp-line-2);
color: var(--lp-soft);
opacity: 0.6;
transition: opacity 260ms var(--lp-ease), transform 260ms var(--lp-ease),
border-color 260ms var(--lp-ease), color 260ms var(--lp-ease);
}
.lp-simcard__go::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 5px; height: 5px;
border-top: 1.4px solid currentColor;
border-right: 1.4px solid currentColor;
transform: translateX(-1.5px) rotate(45deg);
}
.lp-simcard:hover .lp-simcard__go,
.lp-simcard:focus-visible .lp-simcard__go {
opacity: 1;
transform: translateX(3px);
border-color: rgba(31,179,148,0.4);
color: var(--lp-brand-2);
}
/* O simulador que quase não existe em outro lugar ganha a única marca de
destaque do catálogo: latão no nome, um fio de fundo. */
.lp-simcard--star { background: linear-gradient(100deg, rgba(217,171,87,0.08), transparent 62%); }
.lp-simcard--star:hover { background: linear-gradient(100deg, rgba(217,171,87,0.12), transparent 62%), var(--lp-surface-2); }
.lp-simcard--star .lp-simcard__name { color: var(--lp-brass); }
/* ------------------------------------------------------------------
13. BENTO DE RECURSOS
------------------------------------------------------------------ */
.lp-bento__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.lp-bx {
--mx: 50%;
--my: 0%;
position: relative;
display: flex;
flex-direction: column;
padding: clamp(18px, 2vw, 24px);
border-radius: var(--lp-r-lg);
border: 1px solid var(--lp-line);
background: var(--lp-surface);
overflow: hidden;
transition: transform 380ms var(--lp-ease), border-color 380ms var(--lp-ease);
}
.lp-bx::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(340px 260px at var(--mx) var(--my), rgba(31,179,148,0.11), transparent 68%);
opacity: 0;
transition: opacity 380ms var(--lp-ease);
}
.lp-bx:hover { transform: translateY(-4px); border-color: var(--lp-line-2); }
.lp-bx:hover::after { opacity: 1; }
.lp-bx__art {
position: relative;
z-index: 1;
min-height: 132px;
margin-bottom: 20px;
display: grid;
align-content: center;
}
.lp-bx h3 {
position: relative;
z-index: 1;
font-family: var(--lp-font-display);
font-size: clamp(15px, 1.5vw, 17px);
font-weight: 600;
letter-spacing: -0.02em;
}
/* Limite de medida: nos blocos que ocupam quatro colunas a frase passava
de 75 caracteres por linha, que é longo demais para um texto de apoio de
13px. O bloco continua largo; a linha, não. */
.lp-bx p { position: relative; z-index: 1; margin-top: 8px; max-width: 46ch; font-size: 13px; line-height: 1.55; color: var(--lp-faint); }
/* MALHA DE SEIS COLUNAS, QUATRO FILEIRAS EXATAS.
A ordem no HTML é nlp, subs, forecast, health, qr, rules, offline,
debts, import, e os `span` abaixo fecham 6 em cada fileira:
3+3 | 4+2 | 2+2+2 | 3+3
Trocar a sequência sem refazer os números deixa buraco na malha. */
.lp-bx--nlp { grid-column: span 3; }
.lp-bx--subs { grid-column: span 3; }
.lp-bx--forecast { grid-column: span 4; }
.lp-bx--health { grid-column: span 2; }
.lp-bx--qr { grid-column: span 2; }
.lp-bx--rules { grid-column: span 2; }
.lp-bx--offline { grid-column: span 2; }
.lp-bx--debts { grid-column: span 3; }
.lp-bx--import { grid-column: span 3; }
/* Lançamento por frase ------------------------------------------- */
.lp-nlp { display: grid; gap: 16px; }
.lp-nlp__field {
display: flex;
align-items: center;
gap: 2px;
padding: 13px 16px;
border-radius: 13px;
border: 1px solid var(--lp-line-2);
background: var(--lp-void-2);
font-size: 14px;
min-height: 46px;
}
.lp-nlp__caret { width: 2px; height: 17px; background: var(--lp-brand-2); animation: lp-caret 1.05s steps(2) infinite; }
@keyframes lp-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.lp-nlp__out { display: flex; flex-wrap: wrap; gap: 7px; }
.lp-nlp__chip {
padding: 6px 11px;
border-radius: 999px;
font-size: 12px;
border: 1px solid rgba(31,179,148,0.26);
background: rgba(31,179,148,0.1);
color: var(--lp-brand-2);
transition: opacity 340ms var(--lp-ease), transform 340ms var(--lp-ease);
}
/* O estado de repouso deste bloco é a frase escrita e as etiquetas na tela,
que é o que ele precisa comunicar. Só quando a máquina de escrever começa
de fato (classe abaixo) as etiquetas somem para reaparecer no fim da
digitação. Assim, se a animação nunca rodar, o bloco continua contando
a história inteira em vez de mostrar um campo vazio. */
.lp-bx--nlp.is-typing .lp-nlp__chip { opacity: 0; transform: translateY(6px); }
.lp-bx--nlp.is-typing.is-parsed .lp-nlp__chip { opacity: 1; transform: none; }
.lp-nlp__chip--1 { transition-delay: 40ms; }
.lp-nlp__chip--2 { transition-delay: 140ms; }
.lp-nlp__chip--3 { transition-delay: 240ms; }
.lp-nlp__chip--4 { transition-delay: 340ms; border-color: rgba(233,115,106,0.3); background: rgba(233,115,106,0.1); color: #F0A49D; }
/* Assinaturas ---------------------------------------------------- */
.lp-subs { display: grid; gap: 1px; }
.lp-subs li {
display: grid;
grid-template-columns: 8px minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px;
padding: 8px 0;
font-size: 12.5px;
}
.lp-subs li + li { border-top: 1px solid var(--lp-line); }
.lp-subs__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(233,240,237,0.16); }
.lp-subs__dot--now { background: var(--lp-brass); box-shadow: 0 0 0 3px rgba(217,171,87,0.16); }
.lp-subs b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-subs em { font-style: normal; font-size: 11.5px; color: var(--lp-faint); white-space: nowrap; }
.lp-subs li span:last-child { font-variant-numeric: tabular-nums; color: var(--lp-soft); white-space: nowrap; }
.lp-subs__total { margin-top: 12px; font-size: 12px; color: var(--lp-brass); }
/* Saúde financeira ----------------------------------------------- */
.lp-gauge { position: relative; width: 100%; max-width: 190px; margin-inline: auto; text-align: center; }
.lp-gauge svg { width: 100%; height: auto; }
.lp-gauge__track { fill: none; stroke: rgba(233,240,237,0.08); stroke-width: 9; stroke-linecap: round; }
.lp-gauge__value {
fill: none;
stroke: var(--lp-brand-2);
stroke-width: 9;
stroke-linecap: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset 1400ms var(--lp-ease) 200ms;
}
.lp-bx--health.is-in .lp-gauge__value { stroke-dashoffset: 0.26; }
.lp-gauge__num {
position: absolute;
left: 0; right: 0; bottom: 4px;
font-family: var(--lp-font-display);
font-size: 30px;
font-weight: 600;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
}
.lp-gauge__cap { display: block; margin-top: 4px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-brand-2); }
/* Previsão ------------------------------------------------------- */
.lp-forecast { display: grid; gap: 12px; }
.lp-forecast__line svg { width: 100%; height: clamp(90px, 12vw, 118px); }
/* Sem `vector-effect: non-scaling-stroke`, pelo mesmo motivo de
`.lp-chart__line`: ele desfaz a normalização de `pathLength` e parte a
linha ao meio. Aqui a escala vertical fica entre 0,94 e 1,23, então a
espessura declarada já é a que aparece. */
.lp-forecast__real, .lp-forecast__proj {
fill: none;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.lp-forecast__real { stroke: var(--lp-brand-2); transition: stroke-dashoffset 1100ms var(--lp-ease); }
.lp-forecast__proj { stroke: var(--lp-brass); transition: stroke-dashoffset 1000ms var(--lp-ease) 900ms; }
.lp-forecast__now { fill: var(--lp-brand-2); stroke: var(--lp-void); stroke-width: 3; opacity: 0; transition: opacity 300ms var(--lp-ease) 900ms; }
.lp-bx--forecast.is-in .lp-forecast__real,
.lp-bx--forecast.is-in .lp-forecast__proj { stroke-dashoffset: 0; }
.lp-bx--forecast.is-in .lp-forecast__now { opacity: 1; }
.lp-forecast__legend { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--lp-faint); }
.lp-forecast__legend i { width: 14px; height: 2px; border-radius: 2px; background: var(--lp-brand-2); }
.lp-forecast__legend i.is-proj { margin-left: 12px; background: var(--lp-brass); }
/* Dívidas -------------------------------------------------------- */
.lp-debts { display: grid; gap: 12px; }
.lp-debts li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 11px; font-size: 12.5px; }
.lp-debts b { font-weight: 500; }
.lp-debts em { font-style: normal; font-size: 11.5px; color: var(--lp-faint); font-variant-numeric: tabular-nums; }
.lp-debts__track { height: 8px; border-radius: 5px; background: rgba(233,240,237,0.06); overflow: hidden; }
.lp-debts__track i {
display: block;
height: 100%;
border-radius: 5px;
transform: scaleX(0);
transform-origin: left;
transition: transform 900ms var(--lp-ease) 200ms;
}
.lp-bx--debts.is-in .lp-debts__track i { transform: scaleX(var(--w, 0.5)); }
.lp-debts--72 { --w: 0.72; background: linear-gradient(90deg, var(--lp-neg), #F2A29B); }
.lp-debts--44 { --w: 0.44; background: linear-gradient(90deg, var(--lp-brass), #F0CE8C); }
.lp-debts--18 { --w: 0.18; background: linear-gradient(90deg, var(--lp-brand), var(--lp-brand-2)); }
.lp-debts__note { margin-top: 14px; font-size: 12px; color: var(--lp-faint); }
.lp-debts__note b { color: var(--lp-brand-2); }
/* QR ------------------------------------------------------------- */
.lp-qr { position: relative; width: 116px; height: 116px; margin-inline: auto; }
.lp-qr__frame { position: absolute; inset: 0; }
.lp-qr__frame i { position: absolute; width: 22px; height: 22px; border: 2px solid var(--lp-brand-2); border-radius: 4px; }
.lp-qr__frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.lp-qr__frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.lp-qr__frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.lp-qr__frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.lp-qr__code {
position: absolute;
inset: 18px;
border-radius: 4px;
background-image:
linear-gradient(90deg, var(--lp-soft) 25%, transparent 25% 50%, var(--lp-soft) 50% 62%, transparent 62%),
linear-gradient(var(--lp-soft) 20%, transparent 20% 44%, var(--lp-soft) 44% 58%, transparent 58%);
background-size: 16px 16px, 16px 16px;
opacity: 0.35;
}
.lp-qr__scan {
position: absolute;
left: 8px; right: 8px;
top: 14px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--lp-brand-2), transparent);
box-shadow: 0 0 12px rgba(53,221,182,0.8);
animation: lp-scan 2.6s var(--lp-ease-io) infinite;
}
/* A varredura anda por `transform`, não por `top`: `top` reposiciona e
repinta a cada quadro; `transform` fica no compositor. E a distância é
variável, para que a moldura possa encolher no estreito sem a linha
escapar do quadro. */
@keyframes lp-scan {
0%, 100% { transform: translateY(0); opacity: 0; }
12%, 88% { opacity: 1; }
50% { transform: translateY(var(--lp-scan, 86px)); }
}
/* Importar extrato ------------------------------------------------ */
.lp-import { display: grid; justify-items: center; gap: 12px; }
.lp-import__file {
padding: 9px 14px;
border-radius: 10px;
border: 1px dashed var(--lp-line-2);
background: var(--lp-void-2);
font-size: 12px;
color: var(--lp-soft);
}
.lp-import__arrow {
width: 2px; height: 22px;
background: linear-gradient(180deg, var(--lp-brand-2), transparent);
position: relative;
}
.lp-import__arrow::after {
content: "";
position: absolute;
left: -3px; bottom: 0;
width: 8px; height: 8px;
border-right: 2px solid var(--lp-brand-2);
border-bottom: 2px solid var(--lp-brand-2);
transform: rotate(45deg);
}
.lp-import__rows { display: grid; gap: 5px; width: 100%; }
.lp-import__rows i {
height: 7px;
border-radius: 4px;
background: rgba(31,179,148,0.28);
transform: scaleX(0);
transform-origin: left;
transition: transform 460ms var(--lp-ease);
}
.lp-bx--import.is-in .lp-import__rows i { transform: scaleX(1); }
.lp-import__rows i:nth-child(1) { transition-delay: 120ms; }
.lp-import__rows i:nth-child(2) { transition-delay: 210ms; width: 88%; }
.lp-import__rows i:nth-child(3) { transition-delay: 300ms; width: 72%; }
.lp-import__rows i:nth-child(4) { transition-delay: 390ms; width: 90%; }
.lp-import__rows i:nth-child(5) { transition-delay: 480ms; width: 64%; }
/* Regras --------------------------------------------------------- */
.lp-rules { display: grid; justify-items: center; gap: 12px; text-align: center; }
.lp-rules__if, .lp-rules__cat {
padding: 9px 14px;
border-radius: 10px;
font-size: 12.5px;
border: 1px solid var(--lp-line-2);
background: var(--lp-void-2);
color: var(--lp-soft);
}
.lp-rules__if b { color: var(--lp-text); }
.lp-rules__cat { border-color: rgba(31,179,148,0.3); background: rgba(31,179,148,0.1); color: var(--lp-brand-2); }
.lp-rules__then {
width: 2px; height: 20px;
background: linear-gradient(180deg, transparent, var(--lp-brand-2));
position: relative;
}
.lp-rules__then::after {
content: "";
position: absolute;
left: -3px; bottom: 0;
width: 8px; height: 8px;
border-right: 2px solid var(--lp-brand-2);
border-bottom: 2px solid var(--lp-brand-2);
transform: rotate(45deg);
}
/* Offline --------------------------------------------------------- */
.lp-offline { position: relative; display: grid; place-items: center; height: 118px; }
.lp-offline b {
position: relative;
z-index: 2;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--lp-line-2);
background: var(--lp-void-2);
font-size: 12px;
font-weight: 500;
color: var(--lp-brand-2);
}
.lp-offline__wave {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(31,179,148,0.28);
animation: lp-wave 3.4s var(--lp-ease-io) infinite;
}
.lp-offline__wave--1 { width: 92px; height: 92px; }
.lp-offline__wave--2 { width: 92px; height: 92px; animation-delay: -1.7s; }
@keyframes lp-wave {
0% { transform: scale(0.6); opacity: 0; }
30% { opacity: 0.9; }
100% { transform: scale(1.5); opacity: 0; }
}
/* ------------------------------------------------------------------
14. MOMENTO WOW
A rolagem é a linha do tempo. O JS escreve --p (0 a 1) na seção e
troca a legenda; a cor das barras interpola de vermelho a esmeralda.
------------------------------------------------------------------ */
.lp-wow { position: relative; --p: 1; }
.lp-wow__sticky { position: sticky; top: 0; height: 100vh; display: grid; align-content: center; }
.lp-wow__scrollarea { height: 220vh; }
.lp-wow__inner { width: 100%; }
.lp-wow__stage {
display: grid;
grid-template-columns: minmax(0, 1fr) 250px;
column-gap: clamp(24px, 4vw, 56px);
row-gap: 0;
align-items: end;
margin-top: clamp(24px, 4vh, 48px);
}
/* Posicionamento explícito: com colocação automática o eixo dos meses caía
na coluna dos números, e não embaixo das barras que ele nomeia. */
.lp-wow__chart { grid-column: 1; grid-row: 1; }
.lp-wow__axis { grid-column: 1; grid-row: 2; }
.lp-wow__side { grid-column: 2; grid-row: 1 / span 2; }
.lp-wow__chart {
position: relative;
display: flex;
align-items: flex-end;
gap: clamp(4px, 1vw, 14px);
height: clamp(170px, 32vh, 300px);
}
.lp-wow__zero {
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 1px;
background: var(--lp-line-2);
/* A linha do zero aparece junto com a estrutura: em janeiro quase não
existe régua; em dezembro ela está desenhada. */
opacity: calc(0.45 + 0.55 * var(--p));
}
.lp-wbar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.lp-wbar i {
width: 100%;
height: 100%;
/* Três sinais somados contam a mesma história sem número nenhum:
a cor sai do vermelho e chega no esmeralda, a barra ganha nitidez
(opacidade) e o topo ganha acabamento (raio). Tudo em propriedades
que o compositor resolve sozinho. */
border-radius: calc(3px + 4px * var(--p)) calc(3px + 4px * var(--p)) 3px 3px;
transform-origin: bottom;
transform: scaleY(calc(var(--a) + (var(--b) - var(--a)) * var(--p)));
background: color-mix(in srgb, var(--lp-neg) calc(100% - var(--p) * 92%), var(--lp-brand-2));
opacity: calc(0.66 + 0.34 * var(--p));
}
/* `will-change` só enquanto a seção está perto da janela. Doze camadas de
composição permanentes custam memória em celular e não servem para nada
enquanto a seção está a três telas de distância. */
.lp-wow.is-near .lp-wbar i { will-change: transform; }
.lp-wbar--1 i { --a: 0.62; --b: 0.22; }
.lp-wbar--2 i { --a: 0.28; --b: 0.26; }
.lp-wbar--3 i { --a: 0.85; --b: 0.31; }
.lp-wbar--4 i { --a: 0.20; --b: 0.30; }
.lp-wbar--5 i { --a: 0.70; --b: 0.38; }
.lp-wbar--6 i { --a: 0.34; --b: 0.44; }
.lp-wbar--7 i { --a: 0.92; --b: 0.47; }
.lp-wbar--8 i { --a: 0.18; --b: 0.55; }
.lp-wbar--9 i { --a: 0.55; --b: 0.62; }
.lp-wbar--10 i { --a: 0.26; --b: 0.71; }
.lp-wbar--11 i { --a: 0.78; --b: 0.84; }
.lp-wbar--12 i { --a: 0.30; --b: 1.00; }
.lp-wow__axis {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 10px;
letter-spacing: 0.05em;
color: var(--lp-faint);
opacity: calc(0.4 + 0.6 * var(--p));
}
.lp-wow__axis span:last-child { color: var(--lp-brand-2); }
.lp-wow__side { display: grid; gap: 16px; align-content: start; }
.lp-wow__stat { display: grid; gap: 4px; }
.lp-wow__statlabel { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-faint); }
.lp-wow__statvalue {
font-family: var(--lp-font-display);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.035em;
font-variant-numeric: tabular-nums;
}
.lp-wow__statvalue--big { font-size: clamp(26px, 3vw, 34px); color: var(--lp-brand-2); }
.lp-wow__statvalue--sm { font-size: 15px; color: var(--lp-brass); }
.lp-wow__meter { display: block; height: 7px; border-radius: 5px; background: rgba(233,240,237,0.07); overflow: hidden; margin-block: 4px 2px; }
.lp-wow__meter i {
display: block;
height: 100%;
border-radius: 5px;
background: linear-gradient(90deg, var(--lp-brass), #F0CE8C);
transform: scaleX(var(--p));
transform-origin: left;
}
.lp-wow__captions { position: relative; margin-top: clamp(28px, 4vh, 52px); min-height: 96px; }
.lp-wow__caption {
position: absolute;
left: 0; right: 0; top: 0;
font-family: var(--lp-font-display);
font-size: clamp(1.15rem, 2.6vw, 2.05rem);
line-height: 1.24;
letter-spacing: -0.03em;
font-weight: 600;
max-width: 26ch;
opacity: 0;
transform: translateY(12px);
transition: opacity 480ms var(--lp-ease), transform 480ms var(--lp-ease);
}
.lp-wow__caption:last-child { opacity: 1; transform: none; }
.lp-wow.is-live .lp-wow__caption { opacity: 0; transform: translateY(12px); }
.lp-wow.is-live .lp-wow__caption.is-on { opacity: 1; transform: none; }
/* ------------------------------------------------------------------
15. FAIXA CLARA: PLANILHA x COFRE
Uma única área clara na página inteira. Ela existe para o olho
descansar e para marcar a virada da narrativa.
------------------------------------------------------------------ */
.lp-light {
background: linear-gradient(180deg, var(--lp-paper), var(--lp-paper-alt));
color: var(--lp-paper-ink);
border-block: 1px solid rgba(11,21,18,0.08);
}
.lp-light .lp-kicker { color: #0B6B5C; }
.lp-light .lp-lead { color: var(--lp-paper-soft); }
.lp-vs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 30px); }
.lp-vs__col {
padding: clamp(22px, 2.6vw, 34px);
border-radius: var(--lp-r-lg);
border: 1px solid rgba(11,21,18,0.09);
background: #FFFFFF;
}
.lp-vs__col h3 {
font-family: var(--lp-font-display);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--lp-paper-soft);
}
.lp-vs__col--new { background: linear-gradient(170deg, rgba(11,107,92,0.07), #FFFFFF 58%); border-color: rgba(11,107,92,0.22); }
.lp-vs__col--new h3 { color: #0B6B5C; }
.lp-sheet {
margin: 20px 0 22px;
display: grid;
gap: 1px;
padding: 10px;
border-radius: 14px;
background: #F1F4F2;
border: 1px solid rgba(11,21,18,0.08);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.lp-sheet__head, .lp-sheet__row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 1px; }
.lp-sheet__head i, .lp-sheet__row i {
padding: 7px 9px;
background: #FFFFFF;
font-style: normal;
color: var(--lp-paper-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lp-sheet__head i { background: #E7EBE9; font-size: 10px; letter-spacing: 0.08em; }
/* A linha do total não é um erro: é a fórmula que alguém precisa manter.
Por isso ela ganha duas colunas (a fórmula não cabe numa célula estreita a
360px) e um destaque âmbar, não vermelho — a seção inteira parte de que a
planilha FUNCIONA; o que ela cobra é trabalho, não conserto. */
.lp-sheet__row--formula { grid-template-columns: minmax(0, 1.5fr) minmax(0, 3fr); }
.lp-sheet__row--formula i { color: #8A6A26; background: #FBF5E8; font-weight: 600; }
.lp-sheet--app { background: #0B1512; border-color: rgba(11,21,18,0.2); padding: 16px; gap: 12px; }
.lp-sheet__apphead { display: flex; align-items: baseline; justify-content: space-between; color: #EAF1EE; }
.lp-sheet__apphead b { font-family: var(--lp-font-display); font-size: 15px; }
.lp-sheet__apphead em { font-style: normal; font-size: 11px; color: #35DDB6; }
.lp-sheet__appbar { display: flex; height: 10px; gap: 2px; border-radius: 6px; overflow: hidden; }
.lp-sheet__appbar i { display: block; height: 100%; }
.lp-sheet__appbar--a { flex: 32; background: #1FB394; }
.lp-sheet__appbar--b { flex: 24; background: #35DDB6; }
.lp-sheet__appbar--c { flex: 26; background: #D9AB57; }
.lp-sheet__appbar--d { flex: 18; background: #46564F; }
.lp-sheet__approw { display: flex; justify-content: space-between; color: #A2B0AA; font-size: 12.5px; }
.lp-sheet__approw em { font-style: normal; color: #EAF1EE; font-weight: 600; }
.lp-vs__list { display: grid; gap: 11px; }
.lp-vs__list li {
position: relative;
padding-left: 28px;
font-size: 14px;
line-height: 1.5;
color: var(--lp-paper-soft);
}
.lp-vs__list li::before {
content: "";
position: absolute;
left: 0; top: 4px;
width: 16px; height: 16px;
border-radius: 50%;
background: #FBEAE7;
box-shadow: inset 0 0 0 1px rgba(190,68,59,0.28);
}
.lp-vs__list li::after {
content: "";
position: absolute;
left: 5px; top: 9px;
width: 6px; height: 6px;
background: #BE443B;
clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%);
}
.lp-vs__list--good li::before { background: #E1F2EC; box-shadow: inset 0 0 0 1px rgba(11,107,92,0.28); }
.lp-vs__list--good li::after {
left: 4.5px; top: 8px;
width: 7px; height: 4px;
background: transparent;
border-left: 1.8px solid #0B6B5C;
border-bottom: 1.8px solid #0B6B5C;
transform: rotate(-45deg);
clip-path: none;
}
/* ------------------------------------------------------------------
16. CONFIANÇA
------------------------------------------------------------------ */
.lp-trust__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-trustcard {
padding: clamp(20px, 2.2vw, 28px);
border-radius: var(--lp-r-lg);
border: 1px solid var(--lp-line);
background: var(--lp-surface);
transition: border-color 320ms var(--lp-ease), transform 320ms var(--lp-ease);
}
.lp-trustcard:hover { border-color: var(--lp-line-2); transform: translateY(-3px); }
.lp-trustcard__icon {
display: grid;
place-items: center;
width: 42px; height: 42px;
border-radius: 13px;
margin-bottom: 18px;
color: var(--lp-brand-2);
background: rgba(31,179,148,0.1);
border: 1px solid rgba(31,179,148,0.2);
}
.lp-trustcard__icon svg { width: 21px; height: 21px; }
.lp-trustcard h3 { font-family: var(--lp-font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.lp-trustcard p { margin-top: 9px; font-size: 13.5px; line-height: 1.6; color: var(--lp-faint); }
.lp-trust__foot { margin-top: 26px; font-size: 13px; color: var(--lp-faint); }
.lp-trust__foot a { color: var(--lp-brand-2); border-bottom: 1px solid currentColor; margin-left: 6px; }
/* ------------------------------------------------------------------
17. COMO FUNCIONA
------------------------------------------------------------------ */
.lp-howto { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.lp-howto__item { position: relative; z-index: 2; padding-top: 42px; }
.lp-howto__num {
position: absolute;
top: 0; left: 0;
display: grid;
place-items: center;
width: 46px; height: 46px;
border-radius: 50%;
border: 1px solid var(--lp-line-2);
background: var(--lp-void);
font-family: var(--lp-font-display);
font-size: 13px;
font-weight: 600;
color: var(--lp-brand-2);
letter-spacing: 0.02em;
transform: translateY(-50%);
}
.lp-howto__item h3 { font-family: var(--lp-font-display); font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 600; letter-spacing: -0.025em; }
.lp-howto__item p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--lp-soft); }
.lp-howto__line {
position: absolute;
top: 0; left: 46px; right: 46px;
height: 1px;
background: var(--lp-line);
z-index: 1;
}
.lp-howto__line i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--lp-brand), var(--lp-brand-2), var(--lp-brass));
transform: scaleX(0);
transform-origin: left;
transition: transform 1500ms var(--lp-ease);
}
.lp-howto.is-in .lp-howto__line i { transform: scaleX(1); }
/* ------------------------------------------------------------------
18. PROVA SOCIAL — DESLIGADA
------------------------------------------------------------------
A landing NÃO renderiza esta seção. O marcador em landing.html está
dentro de um , cujo conteúdo fica fora do documento.
As regras continuam aqui prontas para o dia em que existir depoimento
de gente de verdade; até lá, cartão vazio ou uma seção anunciando que
não há depoimento custa conversão e parece obra inacabada.
Nada de nome, foto, nota, logo ou número de clientes inventado.
------------------------------------------------------------------ */
.lp-social__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-quote {
display: grid;
gap: 20px;
align-content: space-between;
padding: clamp(22px, 2.4vw, 30px);
border-radius: var(--lp-r-lg);
border: 1px solid var(--lp-line);
background: var(--lp-surface);
min-height: 200px;
}
.lp-quote blockquote { font-size: 15px; line-height: 1.6; color: var(--lp-soft); }
.lp-quote figcaption { display: flex; align-items: center; gap: 12px; }
.lp-quote__avatar {
width: 38px; height: 38px;
border-radius: 50%;
border: 1px solid var(--lp-line-2);
background: rgba(233,240,237,0.04);
flex: none;
}
.lp-quote figcaption b { display: block; font-size: 13.5px; font-weight: 600; color: var(--lp-text); }
.lp-quote figcaption small { font-size: 12px; color: var(--lp-faint); }
/* ------------------------------------------------------------------
19. PREÇOS
------------------------------------------------------------------ */
/* UMA OFERTA SÓ, PORQUE É ISSO QUE EXISTE.
Aqui havia duas colunas: o beta e um "espaço reservado" com R$ XX,XX.
Preço fictício na tela não prepara o futuro, comunica obra inacabada —
e ainda divide a atenção de quem chegou até o fim da página. Enquanto
não houver preço real, a seção tem um cartão centrado. */
.lp-price__grid { display: grid; max-width: 560px; margin-inline: auto; }
.lp-plan {
display: grid;
align-content: start;
gap: 16px;
padding: clamp(26px, 3vw, 40px);
border-radius: var(--lp-r-xl);
border: 1px solid var(--lp-line);
background: var(--lp-surface);
}
.lp-plan--now {
border-color: rgba(31,179,148,0.34);
background:
radial-gradient(120% 90% at 50% 0%, rgba(31,179,148,0.13), transparent 62%),
var(--lp-surface);
box-shadow: 0 24px 60px -30px rgba(31,179,148,0.6);
}
.lp-plan__tag {
justify-self: start;
padding: 5px 12px;
border-radius: 999px;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
border: 1px solid var(--lp-line-2);
color: var(--lp-faint);
}
.lp-plan--now .lp-plan__tag { border-color: rgba(31,179,148,0.34); color: var(--lp-brand-2); background: rgba(31,179,148,0.08); }
.lp-plan__name { font-family: var(--lp-font-display); font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: -0.03em; }
.lp-plan__value {
display: flex;
align-items: baseline;
gap: 4px;
font-family: var(--lp-font-display);
letter-spacing: -0.045em;
}
.lp-plan__value b { font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 600; line-height: 1; }
.lp-plan--now .lp-plan__value b { color: var(--lp-brand-2); }
.lp-plan__note { font-size: 13.5px; color: var(--lp-soft); line-height: 1.55; }
.lp-plan__list { display: grid; gap: 10px; padding-top: 4px; }
.lp-plan__list li { position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.5; color: var(--lp-soft); }
.lp-plan__list li::before {
content: "";
position: absolute;
left: 3px; top: 6px;
width: 8px; height: 5px;
border-left: 1.8px solid var(--lp-brand-2);
border-bottom: 1.8px solid var(--lp-brand-2);
transform: rotate(-45deg);
}
/* A ressalva comercial fica dentro do cartão, colada no botão, porque é
ali que ela é lida: quem está decidindo clicar. */
.lp-plan__foot {
padding-top: 14px;
border-top: 1px solid var(--lp-line);
font-size: 12px;
line-height: 1.55;
color: var(--lp-faint);
}
/* ------------------------------------------------------------------
20. FAQ
Accordion nativo (details/summary): abre sem JavaScript e responde
ao teclado de graça. O JS só suaviza a altura.
------------------------------------------------------------------ */
.lp-faq__list { display: grid; gap: 10px; }
.lp-faq__item {
border-radius: var(--lp-r);
border: 1px solid var(--lp-line);
background: var(--lp-surface);
overflow: hidden;
transition: border-color 260ms var(--lp-ease), background-color 260ms var(--lp-ease);
}
.lp-faq__item[open] { border-color: var(--lp-line-2); background: var(--lp-surface-2); }
.lp-faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 19px 22px;
cursor: pointer;
list-style: none;
font-family: var(--lp-font-display);
font-size: clamp(15px, 1.6vw, 17px);
font-weight: 500;
letter-spacing: -0.015em;
}
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__sign { position: relative; width: 15px; height: 15px; flex: none; }
.lp-faq__sign::before, .lp-faq__sign::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
background: var(--lp-brand-2);
border-radius: 2px;
transition: transform 300ms var(--lp-ease);
}
.lp-faq__sign::before { width: 15px; height: 1.8px; }
.lp-faq__sign::after { width: 1.8px; height: 15px; }
.lp-faq__item[open] .lp-faq__sign::after { transform: scaleY(0); }
.lp-faq__body { padding: 0 22px 22px; }
.lp-faq__body p { font-size: 14px; line-height: 1.68; color: var(--lp-soft); max-width: 68ch; }
/* ------------------------------------------------------------------
21. FECHAMENTO
------------------------------------------------------------------ */
.lp-final { position: relative; padding-block: clamp(90px, 12vw, 170px) clamp(70px, 9vw, 120px); overflow: hidden; text-align: center; }
.lp-final__glow {
position: absolute;
left: 50%; top: 8%;
width: min(1100px, 130%);
height: 620px;
transform: translateX(-50%);
background: radial-gradient(52% 52% at 50% 40%, rgba(31,179,148,0.24), transparent 70%);
filter: blur(40px);
}
.lp-final__inner { position: relative; z-index: 1; }
.lp-final__title {
font-family: var(--lp-font-display);
font-size: clamp(2rem, 5.2vw, 3.9rem);
line-height: 1.05;
letter-spacing: -0.042em;
font-weight: 600;
max-width: 18ch;
margin-inline: auto;
}
.lp-final__lead { margin: 22px auto 0; max-width: 54ch; text-wrap: pretty; font-size: clamp(1rem, 1.4vw, 1.12rem); color: var(--lp-soft); }
.lp-final__actions { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.lp-final__proof { margin-top: clamp(50px, 7vw, 84px); display: grid; place-items: center; }
.lp-mini {
display: grid;
gap: 6px;
width: min(320px, 88vw);
padding: 22px 24px;
border-radius: var(--lp-r-lg);
border: 1px solid var(--lp-line-2);
background: linear-gradient(170deg, rgba(31,179,148,0.12), transparent 62%), var(--lp-surface-2);
box-shadow: var(--lp-shadow-lg);
text-align: left;
}
.lp-mini__head { display: flex; align-items: baseline; justify-content: space-between; }
.lp-mini__head b { font-family: var(--lp-font-display); font-size: 15px; }
.lp-mini__head em { font-style: normal; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-brass); }
.lp-mini__amount {
font-family: var(--lp-font-display);
font-size: 34px;
font-weight: 600;
letter-spacing: -0.04em;
color: var(--lp-brand-2);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.lp-mini__label { font-size: 11.5px; color: var(--lp-faint); }
.lp-mini__bars { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-top: 10px; }
.lp-mini__bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--lp-brand-2), rgba(31,179,148,0.2)); }
.lp-mini__bars i:nth-child(1) { height: 32%; }
.lp-mini__bars i:nth-child(2) { height: 44%; }
.lp-mini__bars i:nth-child(3) { height: 38%; }
.lp-mini__bars i:nth-child(4) { height: 56%; }
.lp-mini__bars i:nth-child(5) { height: 63%; }
.lp-mini__bars i:nth-child(6) { height: 74%; }
.lp-mini__bars i:nth-child(7) { height: 86%; }
.lp-mini__bars i:nth-child(8) { height: 100%; }
/* ------------------------------------------------------------------
22. RODAPÉ E DOCA MÓVEL
------------------------------------------------------------------ */
.lp-foot { border-top: 1px solid var(--lp-line); padding-block: clamp(48px, 6vw, 76px) 34px; }
.lp-foot__inner { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.lp-foot__tag { margin-top: 16px; font-size: 13px; color: var(--lp-faint); max-width: 30ch; }
.lp-foot__nav { display: grid; gap: 11px; align-content: start; }
.lp-foot__nav h2 { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-faint); font-weight: 600; }
.lp-foot__nav a { font-size: 13.5px; color: var(--lp-soft); transition: color 180ms var(--lp-ease); }
.lp-foot__nav a:hover { color: var(--lp-brand-2); }
.lp-foot__base {
margin-top: clamp(38px, 5vw, 60px);
padding-top: 24px;
border-top: 1px solid var(--lp-line);
display: grid;
gap: 10px;
}
.lp-foot__base p { font-size: 11.5px; line-height: 1.6; color: var(--lp-faint); max-width: 86ch; }
/* DOCA DE CTA DO CELULAR.
Ela é `position: fixed` de verdade — ver a nota sobre empilhamento na
seção 6. Como está fora do fluxo e presa às duas bordas, não participa
da largura do documento: `left`/`right` iguais garantem que ela nunca
some largura ao `scrollWidth`. O `max()` com a área segura cobre o
recorte lateral em paisagem. */
.lp-dock {
position: fixed;
left: max(12px, env(safe-area-inset-left, 0px));
right: max(12px, env(safe-area-inset-right, 0px));
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
z-index: 55;
display: none;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 8px 8px 18px;
border-radius: 999px;
border: 1px solid var(--lp-line-2);
background: color-mix(in srgb, var(--lp-surface-2) 92%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: var(--lp-shadow-lg);
transform: translateY(160%);
transition: transform 420ms var(--lp-ease);
}
.lp-dock[hidden] { display: none; }
.lp-dock.is-on { transform: none; }
.lp-dock__text { font-size: 13px; line-height: 1.25; color: var(--lp-soft); }
.lp-dock .lp-btn { min-height: 44px; white-space: nowrap; }
/* ------------------------------------------------------------------
23. ENTRADAS E REVELAÇÕES
------------------------------------------------------------------
Regra de ouro desta seção: o estado ESCONDIDO só existe quando
`js/landing-boot.js` marca . Sem
JavaScript, ou com `prefers-reduced-motion: reduce`, o atributo
nunca aparece e a página é entregue inteira, visível e estática.
Nenhum conteúdo depende de animação para ser lido.
------------------------------------------------------------------ */
[data-lp-motion="on"] .lp-anim,
[data-lp-motion="on"] .lp-reveal,
[data-lp-motion="on"] [data-stagger] {
opacity: 0;
transform: translateY(22px);
transition: opacity 760ms var(--lp-ease), transform 860ms var(--lp-ease);
}
[data-lp-motion="on"] .lp-line > span {
transform: translateY(110%);
transition: transform 950ms var(--lp-ease);
}
[data-lp-motion="on"] .lp-line.is-in > span { transform: none; }
[data-lp-motion="on"] .lp-anim.is-in,
[data-lp-motion="on"] .lp-reveal.is-in,
[data-lp-motion="on"] [data-stagger].is-in { opacity: 1; transform: none; }
[data-lp-motion="on"] .lp-line { opacity: 1; transform: none; }
[data-anim="1"] { transition-delay: 40ms; }
[data-anim="2"] { transition-delay: 110ms; }
[data-anim="3"] { transition-delay: 190ms; }
[data-anim="4"] { transition-delay: 270ms; }
[data-anim="5"] { transition-delay: 380ms; }
[data-anim="6"] { transition-delay: 470ms; }
[data-anim="7"] { transition-delay: 560ms; }
[data-anim="8"] { transition-delay: 300ms; }
[data-anim="9"] { transition-delay: 1150ms; }
[data-anim="10"] { transition-delay: 1300ms; }
/* O painel entra de baixo, com um resto de perspectiva. */
[data-lp-motion="on"] .lp-app.lp-anim { transform: translateY(56px) scale(0.985); }
[data-lp-motion="on"] .lp-app.lp-anim.is-in { transform: none; }
[data-stagger="1"] { transition-delay: 620ms; }
[data-stagger="2"] { transition-delay: 700ms; }
[data-stagger="3"] { transition-delay: 780ms; }
[data-stagger="4"] { transition-delay: 860ms; }
[data-stagger="5"] { transition-delay: 940ms; }
[data-stagger="6"] { transition-delay: 1020ms; }
/* Cartões do bento revelam em cascata pela ordem no grid. */
[data-lp-motion="on"] .lp-bento__grid > .lp-reveal:nth-child(3n+2) { transition-delay: 80ms; }
[data-lp-motion="on"] .lp-bento__grid > .lp-reveal:nth-child(3n+3) { transition-delay: 160ms; }
[data-lp-motion="on"] .lp-trust__grid > .lp-reveal:nth-child(3n+2) { transition-delay: 80ms; }
[data-lp-motion="on"] .lp-trust__grid > .lp-reveal:nth-child(3n+3) { transition-delay: 160ms; }
/* ------------------------------------------------------------------
24. RESPONSIVO
Cada faixa reorganiza a composição. Celular não é desktop empilhado:
a maquete perde a barra lateral, o showcase troca de eixo, os
cartões flutuantes saem e a doca de CTA entra.
A régua de densidade do estreito é deliberada. A versão anterior da
página passava de 19 mil pixels de rolagem num aparelho de 390px, e
quase um terço disso não vendia nada: um catálogo de oito cartões
para listar oito nomes, uma seção inteira anunciando que não havia
depoimento, dois planos quando existe um. Aqui o corte veio de
decisão editorial, não de apertar padding: as experiências grandes
(maquete, caos, história, WOW, simulador ao vivo) continuam com o
mesmo espaço para respirar.
------------------------------------------------------------------ */
@media (max-width: 1280px) {
/* Só o encosto lateral muda nesta faixa: com o palco chegando à borda da
janela, o cartão da esquerda ganha 6px para não ficar colado nela.
As alturas continuam sendo as do bloco base, e por um motivo simples:
as daqui (20% e 62%) pousavam em cima de "R$ 18.750,00" de um lado e de
três valores de categoria do outro. */
.lp-float--alert { left: 6px; }
}
/* O CARTÃO DA DIREITA PRECISA DE FOLGA QUE SÓ EXISTE NO LARGO.
A coluna da direita da maquete tem linha em toda altura, então o cartão
de projeção só cabe pendendo para fora do palco. A folga para pender é
`(largura da janela - 1220) / 2`, e ela some conforme a janela encolhe:
abaixo de 1300px não há como pousar sem cobrir "Viagem para a Europa" e
o valor da meta. Entre 1120 e 1300px, portanto, fica só o cartão da
esquerda. Um flutuante a menos é perda pequena; número coberto na
maquete do produto não é. */
@media (max-width: 1299px) {
.lp-float--proj { display: none; }
}
@media (max-width: 1120px) {
.lp-float { display: none; }
/* O CAMPO DE ETIQUETAS DO CAOS PRECISA CABER.
As coordenadas do desktop somam mil pixels de extensão (de -436 a +428,
mais a largura da etiqueta mais longa). Entre 861 e 1120px a composição
ainda usava a escala cheia e três etiquetas saíam pela lateral —
invisível na página, porque a contenção horizontal do apara o
excesso, e visível na medição: `scrollWidth` passava do `clientWidth`
em ~27px a 900px de largura.
A escala resolve sem refazer coordenada: o desenho é o mesmo, menor.
Abaixo de 860px a composição é outra (ver o bloco daquela faixa). */
.lp-caos__field { --k: 0.82; }
}
@media (max-width: 1000px) {
.lp-caos__field { --k: 0.72; }
}
/* Abaixo disto, seis colunas produziriam blocos de 100px de largura com
parágrafo dentro. Duas colunas largas leem melhor do que seis apertadas.
O seletor descendente (0,2,0) vence a classe do bloco (0,1,0) sem
precisar de `!important`; sem ele, um `span 4` numa malha de duas
colunas cria colunas implícitas e estoura a largura. */
@media (max-width: 980px) {
.lp-bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-bento__grid > .lp-bx { grid-column: span 1; }
.lp-bento__grid > .lp-bx--nlp,
.lp-bento__grid > .lp-bx--subs,
.lp-bento__grid > .lp-bx--forecast { grid-column: span 2; }
.lp-bx__art { min-height: 118px; }
}
@media (max-width: 980px) {
.lp-nav__links { display: none; }
.lp-nav__toggle { display: inline-flex; }
.lp-link-quiet { display: none; }
.lp-nav__actions { margin-left: auto; }
/* ----------------------------------------------------------------
HISTÓRIA DO PRODUTO NO ESTREITO.
A versão anterior mantinha a mesma interface fixa do desktop, presa
no topo, e empurrava as quatro etapas para baixo dela. Como elemento
posicionado pinta acima de irmão estático, o texto das etapas passava
POR TRÁS do painel a partir de ~430px. Margem grande ou deslocamento
manual só empurram o defeito para outra altura de tela.
A composição aqui é outra: a interface fixa sai de cena e cada etapa
carrega o próprio recorte de tela, logo abaixo do parágrafo que ele
ilustra. A leitura vira texto → prova → texto → prova, que é como se
lê no celular, e a sobreposição deixa de ser possível por construção,
com ou sem JavaScript. O recorte usa o mesmo material do aplicativo
(borda, gradiente, verniz) para não virar cartão genérico.
---------------------------------------------------------------- */
.lp-story__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.lp-story__stage { display: none; }
.lp-story__steps { grid-column: 1; grid-row: 1; }
.lp-step { padding-block: 0; }
.lp-step + .lp-step { padding-top: clamp(32px, 5.4vh, 52px); }
.lp-step p { max-width: 62ch; }
.lp-step__art {
display: grid;
gap: 10px;
margin-top: 18px;
padding: clamp(15px, 3.4vw, 21px);
border-radius: var(--lp-r-lg);
border: 1px solid var(--lp-line-2);
background: linear-gradient(180deg, var(--lp-surface), var(--lp-void-2));
box-shadow: var(--lp-shadow), var(--lp-sheen);
}
.lp-step__art .lp-panel__big { font-size: clamp(24px, 6.4vw, 30px); }
.lp-step__art .lp-panel__list em { min-width: 84px; }
.lp-step__art .lp-bars { height: 92px; }
.lp-sim__live { grid-template-columns: minmax(0, 1fr); }
.lp-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-howto { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.lp-howto__line { display: none; }
.lp-howto__item { padding-top: 0; padding-left: 62px; min-height: 46px; }
.lp-howto__num { transform: none; }
.lp-foot__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-social__grid { grid-template-columns: minmax(0, 1fr); }
.lp-quote { min-height: 0; }
}
@media (max-width: 860px) {
.lp-app__body { grid-template-columns: minmax(0, 1fr); }
.lp-app__rail {
grid-auto-flow: column;
justify-content: start;
gap: 4px;
padding: 8px 12px;
border-right: 0;
border-bottom: 1px solid var(--lp-line);
}
.lp-app__railitem--foot { margin-top: 0; margin-left: auto; }
/* A MAQUETE NO ESTREITO NÃO É A MAQUETE DO DESKTOP EMPILHADA.
Com os cinco cartões um embaixo do outro o painel passava de 1200px:
uma tela e meia de captura antes de a página começar a argumentar.
Aqui o hero fica com a pergunta que traz a pessoa até ele (quanto tenho,
quanto entrou, quanto saiu, quanto sobrou, e uma leitura). Metas,
categorias e lançamentos aparecem logo adiante, no showcase e no bento,
onde há espaço para mostrá-los direito. */
.lp-app__layout { grid-template-columns: minmax(0, 1fr); }
.lp-card--balance, .lp-card--tiles { grid-column: 1; grid-row: auto; }
.lp-card--goal, .lp-card--cats, .lp-card--moves { display: none; }
.lp-caos__field { --k: 0.52; }
.lp-chip { font-size: 11px; padding: 7px 12px; }
.lp-chip--9, .lp-chip--10, .lp-chip--12 { display: none; }
.lp-wow__stage { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.lp-wow__chart, .lp-wow__axis, .lp-wow__side { grid-column: 1; grid-row: auto; }
.lp-wow__side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px 18px; margin-top: 16px; }
/* 120vh de curso em vez de 180vh: no celular a mesma história cabe em
menos rolagem — sobra mais de uma tela por legenda — e rolagem longa
demais em seção fixa dá a sensação de que a página travou. */
.lp-wow__scrollarea { height: 120vh; }
.lp-vs__grid { grid-template-columns: minmax(0, 1fr); }
.lp-dock { display: flex; }
}
@media (max-width: 720px) {
/* Duas colunas continuam, mas agora a malha é 5 blocos largos + 4 pares.
Os quatro que viram par (saúde, QR, regras, offline) são os de arte
pequena e frase curta; os que têm lista ou gráfico com rótulo à direita
(assinaturas, previsão, dívidas, importação) ficam com a linha inteira,
senão a tabela interna quebra. A ordem no HTML já deixa os quatro pares
lado a lado, então a malha fecha sem buraco. */
.lp-bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lp-bento__grid > .lp-bx { grid-column: span 2; }
.lp-bento__grid > .lp-bx--health,
.lp-bento__grid > .lp-bx--qr,
.lp-bento__grid > .lp-bx--rules,
.lp-bento__grid > .lp-bx--offline { grid-column: span 1; }
.lp-bx { padding: 17px 18px; }
.lp-bx__art { min-height: 88px; margin-bottom: 13px; }
.lp-bx p { margin-top: 6px; }
/* Os seis compromissos de privacidade viram uma lista densa: ícone à
esquerda, título e frase à direita. Mesmo conteúdo, um terço a menos
de altura, e a leitura em varredura fica melhor do que em seis
cartões altos empilhados. */
.lp-trust__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.lp-trustcard {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: start;
gap: 6px 14px;
padding: 16px 18px;
}
.lp-trustcard__icon {
grid-row: 1 / span 2;
align-self: start;
width: 34px; height: 34px;
margin-bottom: 0;
border-radius: 10px;
}
.lp-trustcard__icon svg { width: 17px; height: 17px; }
.lp-trustcard h3 { align-self: center; }
.lp-trustcard p { margin-top: 0; font-size: 13px; }
.lp-simlist { grid-template-columns: minmax(0, 1fr); }
.lp-simlist > li:nth-child(odd) { border-right: 0; }
.lp-simlist > li:nth-last-child(-n+2) { border-bottom: 1px solid var(--lp-line); }
.lp-simlist > li:last-child { border-bottom: 0; }
/* A faixa de confiança vira 2 + 1: o rótulo do meio é o mais longo e é
ele que ganha a linha inteira. */
.lp-strip__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 0; }
.lp-strip__item { justify-content: center; padding: 13px 12px; font-size: 12.5px; text-align: center; }
.lp-strip__item:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--lp-line-2); }
.lp-hero__actions .lp-btn { flex: 1 1 auto; }
.lp-final__actions .lp-btn { flex: 1 1 auto; }
}
@media (max-width: 560px) {
:root { --lp-sec-y: clamp(46px, 11vw, 78px); }
.lp-head { margin-bottom: clamp(26px, 6vw, 42px); }
.lp-hero { padding-top: 30px; padding-bottom: clamp(46px, 8vh, 76px); }
.lp-hero__title { font-size: clamp(2.1rem, 10vw, 2.9rem); letter-spacing: -0.038em; }
.lp-h2 { font-size: clamp(1.65rem, 7.4vw, 2.2rem); }
.lp-hero__stage { padding-inline: 0; margin-top: 34px; }
.lp-app { border-radius: var(--lp-r-lg); }
.lp-card--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-tile + .lp-tile { border-left: 1px solid var(--lp-line); }
.lp-tile--net { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--lp-line); }
.lp-tile__value { font-size: 17px; }
.lp-cat { grid-template-columns: 72px minmax(0, 1fr) auto; }
/* No celular a composicao do caos e refeita, nao reduzida. Encolher as
mesmas coordenadas jogaria metade das etiquetas para fora da tela e a
outra metade em cima do painel. Aqui elas ocupam so as faixas de cima
e de baixo, deixando a faixa central livre para o painel. */
.lp-caos__stage { height: 344px; }
.lp-caos__field { --k: 1; }
.lp-chip--3, .lp-chip--6, .lp-chip--11 { display: none; }
.lp-chip--1 { --x: -96px; --y: -134px; }
.lp-chip--2 { --x: 94px; --y: -136px; }
.lp-chip--7 { --x: 0px; --y: -96px; }
.lp-chip--4 { --x: -100px; --y: 112px; }
.lp-chip--5 { --x: 96px; --y: 110px; }
.lp-chip--8 { --x: 4px; --y: 150px; }
/* ----------------------------------------------------------------
BENTO: ARTE AO LADO DO TEXTO NOS QUATRO BLOCOS PEQUENOS.
Empilhados, os quatro custavam quase 900px de rolagem. Pareados em
duas colunas (o que vale de 561px para cima) a 390px cada um fica
com 173px, e o parágrafo cai para 19 caracteres por linha — isso é
apertar, não desenhar. Aqui a arte vira uma coluna de 92px à
esquerda e o texto ganha a largura que precisa: mesma economia de
altura, leitura inteira. As artes encolhem junto, senão o gauge e o
QR ficariam maiores que a própria coluna.
---------------------------------------------------------------- */
.lp-bento__grid > .lp-bx--health,
.lp-bento__grid > .lp-bx--qr,
.lp-bento__grid > .lp-bx--rules,
.lp-bento__grid > .lp-bx--offline {
grid-column: span 2;
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
align-content: center;
column-gap: 16px;
}
.lp-bx--health .lp-bx__art,
.lp-bx--qr .lp-bx__art,
.lp-bx--rules .lp-bx__art,
.lp-bx--offline .lp-bx__art {
grid-row: 1 / span 2;
align-self: center;
min-height: 0;
margin-bottom: 0;
}
.lp-bx--health h3, .lp-bx--qr h3, .lp-bx--rules h3, .lp-bx--offline h3 { align-self: end; }
.lp-bx--health p, .lp-bx--qr p, .lp-bx--rules p, .lp-bx--offline p { align-self: start; }
.lp-bx--qr .lp-qr { --lp-scan: 56px; width: 84px; height: 84px; }
.lp-bx--qr .lp-qr__code { inset: 14px; background-size: 12px 12px, 12px 12px; }
.lp-bx--qr .lp-qr__frame i { width: 17px; height: 17px; }
.lp-bx--health .lp-gauge { max-width: 92px; }
.lp-bx--health .lp-gauge__num { font-size: 21px; bottom: 2px; }
.lp-bx--health .lp-gauge__cap { font-size: 9px; letter-spacing: 0.06em; margin-top: 2px; }
.lp-bx--offline .lp-offline { height: 86px; }
.lp-bx--offline .lp-offline__wave--1,
.lp-bx--offline .lp-offline__wave--2 { width: 66px; height: 66px; }
.lp-bx--offline .lp-offline b { font-size: 10px; padding: 5px 8px; }
.lp-bx--rules .lp-rules { gap: 7px; }
.lp-bx--rules .lp-rules__if,
.lp-bx--rules .lp-rules__cat { font-size: 10.5px; padding: 6px 8px; }
.lp-bx--rules .lp-rules__then { height: 13px; }
.lp-wow__caption { font-size: clamp(1.05rem, 5.4vw, 1.5rem); max-width: none; }
.lp-wow__statvalue--big { font-size: 24px; }
.lp-foot__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
.lp-foot__brand { grid-column: 1 / -1; }
.lp-foot__base { margin-top: 30px; }
.lp-final { padding-block: clamp(64px, 14vw, 110px) clamp(52px, 11vw, 88px); }
.lp-final__proof { margin-top: clamp(34px, 8vw, 60px); }
}
@media (max-width: 400px) {
:root { --lp-pad: 16px; }
.lp-brand__word { font-size: 17px; }
.lp-app__screen { padding: 12px; }
.lp-card { padding: 12px 13px; }
.lp-moves__main b { font-size: 12px; }
.lp-cat { grid-template-columns: 62px minmax(0, 1fr) auto; font-size: 10.5px; }
/* Abaixo disto o rótulo da doca disputaria espaço com o próprio botão.
Some o rótulo, não o alvo. */
.lp-dock__text { display: none; }
.lp-dock { justify-content: stretch; padding: 8px; }
.lp-dock .lp-btn { flex: 1; }
}
/* ------------------------------------------------------------------
24b. ALVOS DE TOQUE
O aplicativo já garante 44 por 44 pixels em controle tocável; a
página comercial segue a mesma régua. O aumento é de área clicável,
não de desenho: o traço do controle deslizante continua fino.
------------------------------------------------------------------ */
@media (pointer: coarse) {
.lp-field input[type="range"] { height: 44px; }
.lp-brand { padding-block: 7px; }
.lp-scrollhint { padding-block: 7px; }
.lp-foot__nav a { padding-block: 11px; }
.lp-foot__nav { gap: 0; }
.lp-foot__nav h2 { margin-bottom: 6px; }
.lp-trust__foot a { display: inline-block; padding-block: 12px; }
.lp-nav__toggle { width: 44px; height: 44px; }
.lp-btn--sm { padding-block: 12px; }
.lp-simcard { min-height: 72px; }
}
/* ------------------------------------------------------------------
24c. CUSTO DE PINTURA NO APARELHO TOCÁVEL
------------------------------------------------------------------
A personalidade visual continua inteira; o que muda é COMO ela é
pintada. Três efeitos dominam o custo num celular e nenhum deles
entrega nada em ponteiro grosso:
* `mix-blend-mode` num plano fixo do tamanho da janela obriga o
navegador a compor o fundo inteiro a cada quadro de rolagem.
Aqui a granulação continua, só que sem mesclagem;
* `filter: blur()` em superfícies grandes (o halo do palco e o
brilho do fechamento) redesenha uma textura cara. Como os dois
já são gradiente radial, o borrão é redundante;
* `backdrop-filter` pede a leitura do que está atrás. Na barra e na
doca, um fundo mais opaco entrega a mesma legibilidade.
O brilho que segue o cursor já não é ligado sem ponteiro fino (ver
js/landing.js); aqui ele também perde a camada de composição, que
custa memória sem servir para nada parado.
------------------------------------------------------------------ */
@media (pointer: coarse) {
.lp-atmos__noise { mix-blend-mode: normal; opacity: 0.05; }
.lp-atmos__glow {
width: 620px; height: 620px;
margin: -310px 0 0 -310px;
will-change: auto;
}
.lp-stage__halo, .lp-final__glow { filter: none; }
.lp-nav.is-stuck {
background: color-mix(in srgb, var(--lp-void) 94%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.lp-dock {
background: color-mix(in srgb, var(--lp-surface-2) 98%, transparent);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.lp-btn--ghost { backdrop-filter: none; }
.lp-float { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* ------------------------------------------------------------------
24d. LAÇOS DECORATIVOS FORA DA TELA
------------------------------------------------------------------
Varredura do QR, ondas do "sem internet", pulso do indicador e deriva
dos cartões flutuantes são animações infinitas. Rodando fora da janela
elas gastam bateria para ninguém. O JS marca `data-lp-loops="on"` na
raiz (só quando existe IntersectionObserver para religar) e põe
`is-onscreen` em quem está por perto.
A ordem importa: o padrão continua sendo TOCAR. Sem JavaScript, sem
observador, ou se este arquivo carregar antes do script, nada congela.
------------------------------------------------------------------ */
[data-lp-loops="on"] [data-loop] { animation-play-state: paused; }
[data-lp-loops="on"] [data-loop].is-onscreen { animation-play-state: running; }
/* ------------------------------------------------------------------
24b. QUANDO NÃO HÁ QUEM ANIME, NADA PODE FICAR PELA METADE
As micro-visualizações da maquete (a linha do patrimônio, o arco da
meta, as barras de categoria, o anel de saúde) nascem no estado ZERO e
só chegam ao valor quando o observador de rolagem põe `.is-in`. Quem
põe `.is-in` é o `js/landing.js`. Sem ele, a maquete não fica sóbria:
fica quebrada. O gráfico do herói vira uma grade pontilhada vazia, o
anel da meta vira um círculo cinza ao lado de "61%", e toda barra de
categoria vira um trilho vazio ao lado do valor em reais.
São três os casos em que isso acontece, e os três já estavam previstos
em outro lugar do projeto: navegador sem JavaScript, sistema pedindo
menos movimento, e o trinco do `js/landing-boot.js` desistindo depois
de 4s porque o `landing.js` não chegou. Nos três, `data-lp-motion` não
está no , e é esse o gancho usado aqui.
O bloco de movimento reduzido lá embaixo declara a mesma coisa. Ele
continua onde está de propósito: um cobre a preferência do sistema, o
outro cobre a ausência do script, e nenhum dos dois depende do outro
estar certo. Aqui não há piscada: o `landing-boot.js` escreve o
atributo no , antes da primeira pintura.
------------------------------------------------------------------ */
:root:not([data-lp-motion="on"]) .lp-chart__line,
:root:not([data-lp-motion="on"]) .lp-forecast__real,
:root:not([data-lp-motion="on"]) .lp-forecast__proj { stroke-dashoffset: 0; }
:root:not([data-lp-motion="on"]) .lp-ring__value { stroke-dashoffset: 0.39; }
:root:not([data-lp-motion="on"]) .lp-gauge__value { stroke-dashoffset: 0.26; }
:root:not([data-lp-motion="on"]) .lp-chart__area,
:root:not([data-lp-motion="on"]) .lp-chart__head,
:root:not([data-lp-motion="on"]) .lp-forecast__now { opacity: 1; }
:root:not([data-lp-motion="on"]) .lp-cat__track i,
:root:not([data-lp-motion="on"]) .lp-budget__track i,
:root:not([data-lp-motion="on"]) .lp-goals__track i,
:root:not([data-lp-motion="on"]) .lp-debts__track i { transform: scaleX(var(--w, 0.6)); }
:root:not([data-lp-motion="on"]) .lp-tile__bar,
:root:not([data-lp-motion="on"]) .lp-import__rows i,
:root:not([data-lp-motion="on"]) .lp-howto__line i { transform: scaleX(1); }
:root:not([data-lp-motion="on"]) .lp-bars i { transform: scaleY(1); }
:root:not([data-lp-motion="on"]) .lp-nlp__chip { opacity: 1; transform: none; }
:root:not([data-lp-motion="on"]) .lp-wbar i,
:root:not([data-lp-motion="on"]) .lp-wow__axis,
:root:not([data-lp-motion="on"]) .lp-wow__zero { opacity: 1; }
/* A BARRA FIXA PRECISA DE FUNDO MESMO SEM ROLAGEM OBSERVADA.
`.lp-nav` é `position: sticky` desde sempre, mas o fundo só entra com
`.is-stuck`, que o `landing.js` liga ao passar de 24px. Sem o script, a
barra continua grudada no topo e continua TRANSPARENTE: o menu inteiro
flutua ilegível por cima do conteúdo que passa por baixo.
O gancho aqui é `data-lp-ready`, e não `data-lp-motion`, porque este
caso é diferente dos de cima: quem pede menos movimento tem o script
funcionando e merece a barra transparente no topo como todo mundo. O
que precisa de reserva é a ausência do script, e é exatamente isso que
`data-lp-ready` marca. */
:root:not([data-lp-ready="on"]) .lp-nav {
background: color-mix(in srgb, var(--lp-void) 76%, transparent);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border-bottom-color: var(--lp-line);
}
/* ------------------------------------------------------------------
25. MOVIMENTO REDUZIDO
O atributo data-lp-motion nem chega a ser escrito quando o sistema
pede menos movimento; estas regras desligam o que é puramente
decorativo e roda sozinho (pulsos, varreduras, deriva).
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.lp *, .lp *::before, .lp *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.lp-atmos__glow { display: none; }
.lp-chart__line, .lp-forecast__real, .lp-forecast__proj { stroke-dashoffset: 0; }
.lp-ring__value { stroke-dashoffset: 0.39; }
.lp-gauge__value { stroke-dashoffset: 0.26; }
.lp-chart__area, .lp-chart__head, .lp-forecast__now { opacity: 1; }
.lp-cat__track i, .lp-budget__track i, .lp-goals__track i, .lp-debts__track i { transform: scaleX(var(--w, 0.6)); }
.lp-tile__bar, .lp-import__rows i, .lp-howto__line i { transform: scaleX(1); }
.lp-bars i { transform: scaleY(1); }
.lp-nlp__chip { opacity: 1; transform: none; }
.lp-panel { opacity: 0; }
.lp-panel.is-active { opacity: 1; }
/* O recorte de tela de cada etapa no celular não depende de rolagem
para existir: com movimento reduzido ele já chega desenhado. */
.lp-step__art { opacity: 1; transform: none; }
/* O momento WOW é rolagem, e rolagem não é "movimento" no sentido que
a preferência combate; mas sem o JS escrevendo `--p` a seção
precisa nascer no estado final, não no vermelho de janeiro. */
.lp-wow { --p: 1; }
.lp-wbar i, .lp-wow__axis, .lp-wow__zero { opacity: 1; }
}
/* ------------------------------------------------------------------
26. ÂNCORAS
A barra fixa mede cerca de 64px. Sem esta folga, clicar em "Preços"
deixa o título da seção debaixo da própria navegação.
------------------------------------------------------------------ */
.lp [id] { scroll-margin-top: 88px; }
.lp-wow { scroll-margin-top: 0; }