/* ===========================================================================
LANDING H2HSCOUT — folha única.
NENHUM `#` AQUI. Cor vem de `tokens.css` via `var(--p-*)`. Se faltar cor,
o conserto é um token novo lá, não um hex aqui.
ORIENTAÇÃO DE COMPOSIÇÃO (é o que separa esta página de um template):
1. Nada é centralizado por padrão. Texto de seção mora à esquerda, num
bloco de medida de leitura; o que ocupa o resto da largura é DADO.
2. O número é o herói e vive em mono tabular. Título é Archivo Black.
3. Um acento só. Âmbar nunca é texto — é lâmpada acesa com tinta escura em
cima. Verde é positivo, tijolo é risco, ardósia é neutro.
4. Raio pequeno: a página é peça IMPRESSA. Só o que de fato flutua ganha
12px, e quase nada flutua.
5. Ritmo vem de FAIXA INVERTIDA (`.inverso`), não de gradiente.
=========================================================================== */
/* ---------------------------------------------------------------------------
FONTES — auto-hospedadas em `landing/fonts/`, subset latin.
POR QUE NÃO O `` do fonts.googleapis.com: são duas conexões a um
terceiro (CSS e depois o woff2) antes de a primeira letra aparecer, e a
página inteira pesa menos que aquele ida-e-volta. Os 8 arquivos somam 216 KB
e são servidos do mesmo nginx, com cache de um ano.
`font-display: swap` de propósito: o texto aparece na hora em fonte de
sistema e troca quando a nossa chega. Numa página que vende leitura de
número, texto invisível por 3s é pior que uma troca de fonte visível.
--------------------------------------------------------------------------- */
@font-face {
font-family: "Archivo";
src: url("../fonts/archivo-400.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Archivo";
src: url("../fonts/archivo-500.woff2") format("woff2");
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Archivo";
src: url("../fonts/archivo-600.woff2") format("woff2");
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Archivo";
src: url("../fonts/archivo-700.woff2") format("woff2");
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Archivo Black";
src: url("../fonts/archivo-black-400.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("../fonts/plex-mono-400.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("../fonts/plex-mono-500.woff2") format("woff2");
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("../fonts/plex-mono-600.woff2") format("woff2");
font-weight: 600; font-style: normal; font-display: swap;
}
/* ---------------------------------------------------------------------------
BASE
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
background: var(--p-bg);
/* `dvh` e não `vh`: no celular a barra do navegador entra e sai, e `vh`
mede a viewport SEM ela — o que corta a última linha do rodapé e faz a
página inteira dar um salto ao rolar. */
min-height: 100dvh;
scroll-behavior: smooth;
/* Âncora não pode parar embaixo do cabeçalho grudado. */
scroll-padding-top: 5rem;
-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
min-height: 100dvh;
/* NAO e cor lisa: um radial de duas paradas ancorado FORA DO CENTRO (canto
superior direito). A diferenca entre `--p-surface-2` e `--p-bg` e de um
degrau da escala de superficie, ou seja, quase imperceptivel de perto —
e e justo esse "quase" que faz a pagina parar de parecer um retangulo de
uma cor. Fora do centro de proposito: radial centralizado lê como vinheta
de apresentacao. */
background: var(--p-bg);
background-image: radial-gradient(
120% 90% at 88% 0%,
color-mix(in srgb, var(--p-surface-2) 70%, var(--p-bg)) 0%,
var(--p-bg) 62%
);
background-attachment: fixed;
color: var(--p-ink);
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-read);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* Sem isto, a marca d'água gigante do rodapé cria barra horizontal. */
overflow-x: hidden;
}
h1, h2, h3, h4 {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
line-height: var(--leading-figure);
letter-spacing: var(--track-display);
/* Título curto nunca deve deixar uma palavra sozinha na última linha. */
text-wrap: balance;
}
p, li, dd, figcaption { text-wrap: pretty; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
/* Imagem de conteúdo encosta na superfície do card sem separação, o que borra
a borda dela. Um fio interno neutro devolve o recorte, e `outline-offset`
negativo o mantém DENTRO da caixa — não empurra layout. */
img { outline: 1px solid var(--p-fio); outline-offset: -1px; }
::selection { background: var(--p-lamp); color: var(--p-on-lamp); }
/* Anel de foco só na navegação por TECLADO (não no clique), e no âmbar
profundo — o âmbar de lâmpada é invisível como anel sobre papel. */
:focus-visible {
outline: 2px solid var(--p-focus);
outline-offset: 2px;
border-radius: 2px;
}
/* Pular para o conteúdo: obrigatório, e tem que ser VISÍVEL ao receber foco.
Fica fora da tela por posição, nunca por `display:none` — leitor de tela
ignora o que não é renderizado. */
.pular {
position: absolute;
left: var(--gutter-page);
top: 0;
z-index: 90;
transform: translateY(-120%);
padding: 0.625rem 1rem;
background: var(--p-lamp);
color: var(--p-on-lamp);
font-size: var(--text-cell);
font-weight: 600;
border-radius: 0 0 var(--radius-control) var(--radius-control);
transition: transform var(--dur-base) var(--ease-out);
}
.pular:focus-visible { transform: translateY(0); }
/* ---------------------------------------------------------------------------
PRIMITIVOS DE TEXTO
--------------------------------------------------------------------------- */
/* O algarismo é a voz da marca: mono tabular, sempre. `tabular-nums` é o que
impede o número de dançar quando ele muda (a contagem do herói depende
disso para não empurrar o layout a cada frame). */
.tnum {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
letter-spacing: var(--track-tnum);
}
/* A cifra: o número grande com rótulo miúdo. É o momento da marca. */
.cifra {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: var(--text-figure);
line-height: var(--leading-figure);
letter-spacing: -0.05em;
}
.cifra--sm { font-size: var(--text-figure-sm); }
/* Rótulo em caixa alta. O tracking aberto é o que torna caixa alta miúda
legível; sem ele as letras colam. */
.rotulo {
font-size: var(--text-label);
font-weight: 600;
letter-spacing: var(--track-caps);
text-transform: uppercase;
color: var(--p-faint);
line-height: var(--leading-dense);
}
.rotulo--lamp { color: var(--p-ink); }
/* Rótulo com fio que corre até o fim da linha. Custa uma linha de CSS e é o
que faz um rótulo miúdo virar cabeçalho de seção sem precisar de tamanho —
o fio dá a largura que o tipo não tem. Vem do vocabulário de ficha técnica,
que é o mesmo do placar. */
.rotulo--regua {
display: flex;
align-items: center;
gap: 0.75rem;
}
.rotulo--regua::after {
content: "";
flex: 1;
height: 1px;
background: var(--p-border);
}
.meta {
font-size: var(--text-meta);
line-height: var(--leading-dense);
color: var(--p-faint);
}
.lead {
font-size: var(--text-lead);
line-height: var(--leading-read);
color: var(--p-muted);
max-width: var(--measure-read);
}
/* ---------------------------------------------------------------------------
ASSINATURA — a régua de medição.
É o elemento mais original da direção: vem do mundo do placar e do
instrumento, e substitui o kit de atmosfera (brilho + grade + grão) que faz
toda landing de SaaS parecer a mesma. Serve como divisor e como base de
cifra. Idêntica à `.scale-rule` do dashboard.
--------------------------------------------------------------------------- */
.regua {
height: 7px;
background-image: repeating-linear-gradient(
90deg, var(--p-border-strong) 0 1px, transparent 1px 7px
);
-webkit-mask-image: linear-gradient(90deg, black 0 55%, transparent 100%);
mask-image: linear-gradient(90deg, black 0 55%, transparent 100%);
}
/* Variante com marca alta a cada 5 traços, como escala de instrumento. */
.regua--maior {
height: 11px;
background-image:
repeating-linear-gradient(90deg, var(--p-border-strong) 0 1px, transparent 1px 35px),
repeating-linear-gradient(90deg, var(--p-border) 0 1px, transparent 1px 7px);
background-size: 100% 11px, 100% 6px;
background-position: 0 0, 0 100%;
background-repeat: repeat-x, repeat-x;
-webkit-mask-image: none;
mask-image: none;
}
/* ---------------------------------------------------------------------------
MARCA — wordmark tipográfico.
`H2H` em tinta + `SCOUT` em tom secundário. Palavra e não imagem: herda a
cor por `currentColor`, é nítida em qualquer densidade, não tem variante por
tema para invalidar, e não pesa byte além da fonte que a página já carrega.
O tracking é constante de LOCKUP (-0.045em) e não herda a escala de display:
ele foi escolhido para fechar "H2H" contra "SCOUT" sem espaço aparente. Um
wordmark que muda de tracking quando alguém ajusta um token não é wordmark.
--------------------------------------------------------------------------- */
.marca {
/* `inline-flex` com altura minima: o wordmark do cabecalho e do rodape e um
LINK, e um link de 17px de altura e alvo de toque reprovado (WCAG 2.2 pede
24px, e em cabecalho o razoavel e 40px). O tipo continua com 17px; o que
cresce e a area clicavel. */
display: inline-flex;
align-items: center;
min-height: 2.5rem;
font-family: var(--font-display);
font-size: 1.0625rem;
letter-spacing: -0.045em;
line-height: 1;
color: var(--p-ink);
white-space: nowrap;
}
.marca span { color: var(--p-brand-2); }
/* ---------------------------------------------------------------------------
CONTROLES
Um alvo de toque nunca abaixo de 44px de altura — é piso de acessibilidade,
não gosto. Transição só em `background`, `border-color`, `color` e
`transform`: as quatro que o compositor resolve sem recalcular layout.
--------------------------------------------------------------------------- */
.botao {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2.75rem;
padding: 0.6875rem 1.125rem;
border: 1px solid transparent;
border-radius: var(--radius-control);
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 600;
letter-spacing: -0.01em;
cursor: pointer;
white-space: nowrap;
transition-property: background-color, border-color, color, transform;
transition-duration: var(--dur-base);
transition-timing-function: var(--ease-out);
}
/* O toque afunda de leve, e em 90ms: o dedo já saiu da tela quando a animação
termina, então mais que isso é atraso percebido, não carinho. */
.botao:active { transform: scale(0.97); transition-duration: var(--dur-snap); }
/* A lâmpada: âmbar de preenchimento com tinta escura em cima. É o único botão
âmbar da página, e existe um por seção no máximo. */
.botao--lamp {
background: var(--p-lamp);
color: var(--p-on-lamp);
}
.botao--lamp:hover { background: var(--p-lamp); filter: brightness(1.06); }
/* Secundário: fio, não preenchimento. Hover troca a superfície. */
.botao--fio {
background: transparent;
border-color: var(--p-border-strong);
color: var(--p-ink);
}
.botao--fio:hover { background: var(--p-elevated); border-color: var(--p-ink); }
/* Terciário: só texto com um fio embaixo que cresce no hover. `scaleX` e não
`width`, para não recalcular layout a cada frame. */
.link-fio {
position: relative;
font-weight: 600;
color: var(--p-ink);
}
.link-fio::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -3px;
height: 1.5px;
background: var(--p-ink);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-base) var(--ease-out);
}
.link-fio:hover::after { transform: scaleX(1); }
/* Pastilha. `--sinal` é herdado: quem usa escolhe verde, tijolo ou ardósia
trocando UMA variável, em vez de existir uma classe por cor. */
.pastilha {
--sinal: var(--p-info);
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.1875rem 0.5rem;
border: 1px solid color-mix(in srgb, var(--sinal) 35%, transparent);
border-radius: var(--radius-control);
background: color-mix(in srgb, var(--sinal) 10%, transparent);
color: var(--sinal);
font-size: var(--text-meta);
font-weight: 600;
line-height: var(--leading-dense);
}
.pastilha--positivo { --sinal: var(--p-signal); }
.pastilha--risco { --sinal: var(--p-risk); }
.pastilha--cartola { --sinal: var(--p-cartola); }
/* A LÂMPADA como pastilha. Âmbar aqui é preenchimento cheio com tinta escura,
nunca `color: amber`. É o que a regra da casa quer dizer. */
.lampada {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-control);
background: var(--p-lamp);
color: var(--p-on-lamp);
font-size: var(--text-meta);
font-weight: 700;
letter-spacing: var(--track-caps);
text-transform: uppercase;
line-height: var(--leading-dense);
}
/* ---------------------------------------------------------------------------
LAYOUT
--------------------------------------------------------------------------- */
.calha {
width: 100%;
max-width: var(--measure-page);
margin-inline: auto;
padding-inline: var(--gutter-page);
}
.secao { padding-block: 4.5rem; }
.secao--curta { padding-block: 3rem; }
/* Fio de separação entre seções do MESMO tom. Entre faixas invertidas não
entra: ali a troca de superfície já separa. */
.secao + .secao:not(.inverso) { border-top: 1px solid var(--p-border); }
/* Cabeçalho de seção: eyebrow + título + lead, ancorado à ESQUERDA.
Centralizar aqui seria a decisão que faz toda seção parecer a mesma. */
.cabeca { max-width: 42rem; }
.cabeca .rotulo { margin-bottom: 0.875rem; }
.cabeca h2 {
font-size: var(--text-title);
margin-bottom: 1rem;
}
.cabeca .lead { margin-bottom: 0; }
@media (min-width: 62rem) {
.secao { padding-block: 6rem; }
.cabeca h2 { font-size: 2.375rem; }
}
/* ---------------------------------------------------------------------------
CABEÇALHO
--------------------------------------------------------------------------- */
/* O CABECALHO FLUTUA SOBRE O HEROI E ENDURECE DEPOIS.
POR QUE: com o heroi virando faixa escura, uma barra clara colada em cima
dele cortava a foto numa linha reta e anunciava "aqui comeca o template".
Sobre o heroi ele herda a paleta escura (via `.inverso` no HTML) e fica
transparente; passado o heroi, ganha superficie e fio.
Quem controla o estado e o `data-preso` escrito pelo JS a partir de um
sentinela — sem listener de rolagem. */
.topo {
position: sticky;
top: 0;
z-index: 40;
/* PUXA O HEROI PARA BAIXO DELE. Sem esta margem negativa o cabecalho
OCUPA 56px de fluxo ANTES do heroi, e o resultado (medido) era uma tira
clara de papel em cima da foto — exatamente o corte reto que a barra
flutuante existe para evitar. Com -3.5rem o heroi sobe e a barra passa a
flutuar sobre a arena; o `padding-top` do heroi devolve os 56px por
dentro, para o titulo nao nascer atras da barra. */
margin-bottom: -3.5rem;
background: transparent;
border-bottom: 1px solid transparent;
transition: background-color var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
/* 94% e não 88%: o alfa da barra é o que decide se o texto que passa por
baixo aparece através dela. Com 88% + blur ainda dava para ler a palavra de
trás em título de 56px (Archivo Black tem muita mancha), e barra por onde
se lê o conteúdo é justamente o defeito que este estado existe para
resolver. O blur continua, porque ele é o que impede que a foto do herói
vire uma mancha chapada ao passar. */
.topo[data-preso="true"] {
background: color-mix(in srgb, var(--p-bg) 94%, transparent);
backdrop-filter: blur(14px) saturate(1.1);
border-bottom-color: var(--p-border);
}
/* Sem JS o cabecalho nunca recebe `data-preso`, e ai ele tem que ser legivel
por conta propria — este e o estado de seguranca. */
/* Sem JS o atributo nunca e escrito, e ai o cabecalho tem que ser legivel por
conta propria: ganha superficie. Este e o estado de seguranca, e a razao de
o estado viver em ATRIBUTO e nao em classe — com classe, "sem JS" e "sobre
o heroi" seriam indistinguiveis. */
.topo:not([data-preso]) {
background: color-mix(in srgb, var(--p-bg) 88%, transparent);
backdrop-filter: blur(10px);
border-bottom-color: var(--p-border);
}
.topo__linha {
display: flex;
align-items: center;
gap: 1.5rem;
min-height: 3.5rem;
}
.topo__nav {
display: none;
margin-left: auto;
align-items: center;
gap: 1.5rem;
}
/* Os itens de nav ganham corpo de 40px sem mudar de tamanho de fonte: a
altura vem do `inline-flex`, nao de `padding` que empurraria a linha. */
.topo__nav a {
display: inline-flex;
align-items: center;
min-height: 2.5rem;
font-size: var(--text-cell);
font-weight: 500;
color: var(--p-muted);
transition: color var(--dur-base) var(--ease-out);
}
.topo__nav a:hover { color: var(--p-ink); }
.topo__acoes { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.topo__acoes .botao { min-height: 2.25rem; padding: 0.4375rem 0.875rem; font-size: var(--text-cell); }
@media (min-width: 56rem) {
.topo__nav { display: flex; }
.topo__acoes { margin-left: 0; }
}
/* ---------------------------------------------------------------------------
HERÓI
Assimétrico de propósito, 7/5. À esquerda o argumento; à direita o PRODUTO
ACONTECENDO — um número real com a frase que a plataforma geraria. Não é
mockup vazio nem captura de tela: é o painel de verdade, em HTML, com o
aviso de amostra visível. O que se vende aqui é o rigor, e rigor não cabe em
ilustração.
--------------------------------------------------------------------------- */
.heroi { padding-block: 6.5rem 4rem; }
.heroi__grade { display: grid; gap: 3rem; }
.heroi h1 {
font-size: var(--text-display);
letter-spacing: var(--track-display);
margin-bottom: 1.25rem;
/* `isolation: isolate` NÃO é enfeite, é o que faz a lâmpada do ``
aparecer. O realce é um `::after` com `z-index: -1` para ficar ATRÁS da
letra; sem um contexto de empilhamento aqui, esse -1 sobe a árvore e a
barra vai parar atrás do fundo da PÁGINA — ou seja, invisível.
(Aferido em 08/set/2026: o realce não aparecia em nenhum dos dois temas.)
Com o contexto isolado no h1, o -1 fica contido: pinta sobre o fundo da
seção e sob o texto, que é exatamente o que se quer. */
isolation: isolate;
}
/* A palavra que carrega a promessa. Sublinhado espesso em âmbar POR BAIXO da
linha de base — âmbar como marca-texto, não como cor de letra. */
.heroi h1 em {
font-style: normal;
position: relative;
white-space: nowrap;
}
.heroi h1 em::after {
content: "";
position: absolute;
/* A barra SOBREPÕE o terço de baixo das letras, em vez de ficar encostada
embaixo delas. É a regra da casa aplicada ao pé da letra: âmbar nunca é
cor de texto, é lâmpada acesa com TINTA ESCURA EM CIMA — e para a tinta
estar em cima a lâmpada tem que passar por baixo do glifo, não ao lado.
Encostada embaixo (bottom: 0.02em, como estava) lia como sublinhado
grosso, que é outro gesto. */
left: -0.05em; right: -0.05em; bottom: 0.17em;
height: 0.26em;
background: var(--p-lamp);
z-index: -1;
transform: scaleX(0);
transform-origin: left;
animation: varrer 0.5s var(--ease-out) 0.25s both;
}
/* A ENTRADA DO TÍTULO, palavra por palavra.
Escalonar por PALAVRA e não por letra é a diferença entre "a frase está
chegando" e efeito de máquina de escrever. 45ms por palavra, 260ms cada:
a frase inteira assenta em menos de meio segundo, e quem chegou rolando já
encontra o título parado.
Anima em `` de wrapper e não no `
` para não brigar com
`text-wrap: balance`. O `data-palavra` é escrito pelo JS; sem JS o `both`
nunca roda e o título simplesmente já está lá — que é o comportamento
correto para o elemento mais importante da página. */
.heroi h1 > span[data-palavra] {
display: inline-block;
animation: subir var(--dur-enter) var(--ease-out) both;
animation-delay: calc(var(--passo, 0) * 45ms);
}
.heroi__sub { margin-bottom: 1.75rem; }
.heroi__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
/* Linha de verdade sob os botões: o que a assinatura dá, sem número
inventado. */
.heroi__nota { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; }
.heroi__nota li {
font-size: var(--text-meta);
color: var(--p-faint);
display: flex;
align-items: center;
gap: 0.375rem;
}
.heroi__nota li::before {
content: "";
width: 3px; height: 3px;
border-radius: 50%;
background: var(--p-border-strong);
}
@media (min-width: 62rem) {
.heroi { padding-block: 8rem 5.5rem; }
.heroi__grade { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: start; }
.heroi h1 { font-size: var(--text-hero); }
}
/* --- O PAINEL: a análise real como protagonista ------------------------- */
.painel {
background: var(--p-surface);
border: 1px solid var(--p-border);
border-radius: var(--radius-card);
overflow: hidden;
}
.painel__topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 1rem;
background: var(--p-surface-2);
border-bottom: 1px solid var(--p-border);
}
.painel__corpo { padding: 1.25rem 1rem; }
/* O confronto, em duas colunas com o versus miúdo no meio. */
.confronto {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.confronto__lado { min-width: 0; }
.confronto__lado--fora { text-align: right; }
.confronto__time {
font-family: var(--font-display);
font-size: var(--text-cell);
letter-spacing: var(--track-display-sm);
line-height: var(--leading-dense);
}
.confronto__x {
font-family: var(--font-mono);
font-size: var(--text-meta);
color: var(--p-faint);
}
/* A cifra e a régua embaixo dela. A régua é o que diz "isto é medição". */
.medida { margin-bottom: 0.875rem; }
.medida__valor { display: flex; align-items: baseline; gap: 0.5rem; }
.medida__valor .cifra { color: var(--p-ink); }
.medida__unidade { font-size: var(--text-meta); color: var(--p-faint); }
.medida .regua { margin-top: 0.5rem; }
/* Barra comparativa. Anima por `scaleX`, nunca por `width`: largura força
reflow a cada frame, escala não sai do compositor. */
.barra {
display: grid;
grid-template-columns: 6.5rem 1fr auto;
align-items: center;
gap: 0.625rem;
padding-block: 0.4375rem;
}
.barra + .barra { border-top: 1px solid var(--p-border); }
.barra__nome { font-size: var(--text-meta); color: var(--p-muted); }
.barra__trilha {
height: 6px;
background: var(--p-sunken);
border-radius: 1px;
overflow: hidden;
}
.barra__preenche {
--frac: 0;
height: 100%;
background: var(--p-info);
transform: scaleX(var(--frac));
transform-origin: left;
transition: transform var(--dur-reveal) var(--ease-out);
}
.barra--positivo .barra__preenche { background: var(--p-signal); }
.barra--risco .barra__preenche { background: var(--p-risk); }
.barra__valor {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--text-cell);
font-weight: 500;
letter-spacing: var(--track-tnum);
}
/* A LINHA DO TEMPO, desenhada por `stroke-dashoffset`.
O traço se desenha da esquerda para a direita porque é assim que a pessoa
lê a sequência de rodadas — o gesto conta a mesma coisa que o dado. É SVG
à mão, sem biblioteca de gráfico: uma polilinha de 12 pontos não justifica
40 KB de dependência, e o `dashoffset` não é propriedade de layout, então
o navegador resolve sem recalcular a caixa.
`vector-effect` mantém a espessura do traço em 1.5px mesmo com o SVG
esticado pelo `viewBox` — sem isso o traço engorda junto com a largura. */
.faixa { margin-block: 0.25rem 0.875rem; }
.faixa svg { width: 100%; height: 2.75rem; overflow: visible; }
.faixa path {
fill: none;
stroke: var(--p-signal);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
.faixa[data-visto="true"] path {
animation: tracar 900ms var(--ease-out) both;
}
.faixa__base {
stroke: var(--p-border) !important;
stroke-dasharray: 2 3 !important;
stroke-dashoffset: 0 !important;
animation: none !important;
}
/* A FRASE. É o que o produto entrega de fato: o número traduzido. Fica em
corpo de leitura, não em miúdo — ela é o produto, não legenda. */
.veredito {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--p-border);
font-size: var(--text-cell);
line-height: var(--leading-read);
color: var(--p-ink);
}
.veredito strong { font-weight: 700; }
/* O AVISO DE AMOSTRA — o diferencial, e ele aparece já no herói.
Tijolo é o token de risco, e o texto é o do produto, palavra por palavra. */
.aviso {
display: flex;
gap: 0.5rem;
align-items: flex-start;
margin-top: 0.875rem;
padding: 0.625rem 0.75rem;
background: var(--p-risk-dim);
border-left: 2px solid var(--p-risk);
border-radius: 0 var(--radius-control) var(--radius-control) 0;
font-size: var(--text-meta);
line-height: var(--leading-read);
color: var(--p-ink);
}
.aviso svg { flex: none; margin-top: 0.125rem; color: var(--p-risk); }
/* ---------------------------------------------------------------------------
OS CINCO ERROS — livro-caixa, não cartão.
POR QUE NÃO SÃO CARDS: cinco cards iguais em grade é exatamente o padrão que
o dono chamou de AI slop, e pior, ele destrói a única coisa que importa aqui
— a comparação PAR A PAR entre o que os outros fazem e o que fazemos. Linha
com fio embaixo e duas colunas põe erro e conserto no mesmo eixo de leitura.
--------------------------------------------------------------------------- */
.erros { margin-top: 3rem; }
.erro {
display: grid;
gap: 0.75rem 1.5rem;
padding-block: 1.5rem;
border-top: 1px solid var(--p-border);
}
.erro:last-child { border-bottom: 1px solid var(--p-border); }
.erro__n {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--text-figure-sm);
font-weight: 600;
letter-spacing: var(--track-tnum);
line-height: 1;
/* `faint` e nao `border-strong`: aferido em 08/set/2026, o fio forte media
cerca de 2:1 sobre o papel e o numero desaparecia — deixava de ser indice
e virava mancha. `faint` e o degrau de "texto quieto" do sistema, que e o
papel deste algarismo. */
color: var(--p-faint);
}
.erro__mal h3 {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-body);
letter-spacing: -0.01em;
line-height: var(--leading-dense);
margin-bottom: 0.375rem;
}
.erro__mal p { font-size: var(--text-cell); color: var(--p-muted); }
/* A coluna do conserto ganha um fio âmbar à esquerda: é a lâmpada acesa do
lado certo da comparação, sem pintar texto de âmbar. */
.erro__bem {
padding-left: 0.875rem;
border-left: 2px solid var(--p-lamp);
}
.erro__bem .rotulo { margin-bottom: 0.25rem; color: var(--p-muted); }
.erro__bem p { font-size: var(--text-cell); color: var(--p-ink); }
@media (min-width: 48rem) {
.erro { grid-template-columns: 2.5rem 1fr 1fr; align-items: start; }
}
/* ---------------------------------------------------------------------------
COMO FUNCIONA — painéis que se ladrilham, sem vão.
POR QUE ASSIM: com `gap`, três blocos em linha são três CARDS, e card em
linha de três é o padrão que o dono recusou. Com `gap: 0` e cada painel
carregando o próprio fio à direita e embaixo, eles deixam de ser cards e
viram uma TABELA — que é a forma nativa deste produto. O último de cada
fileira dispensa o fio da direita, senão sobra um traço solto na borda.
O ganho não é só de estilo: sem vão, o olho lê a fileira como uma sequência
contínua (passo 1 → 2 → 3), que é exatamente o que a seção afirma.
--------------------------------------------------------------------------- */
.ladrilho {
margin-top: 2.5rem;
display: grid;
gap: 0;
border: 1px solid var(--p-border);
border-radius: var(--radius-card);
overflow: hidden;
}
.ladrilho > * {
padding: 1.5rem 1.375rem;
border-bottom: 1px solid var(--p-border);
}
.ladrilho > *:last-child { border-bottom: 0; }
.passo__n {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--text-label);
font-weight: 600;
letter-spacing: var(--track-caps);
color: var(--p-faint);
display: block;
margin-bottom: 0.75rem;
}
/* A régua miúda sob o número do passo: a marca de medição no lugar em que
normalmente entraria um ícone genérico. */
.passo__n::after {
content: "";
display: block;
width: 2.5rem;
height: 7px;
margin-top: 0.5rem;
background-image: repeating-linear-gradient(
90deg, var(--p-border-strong) 0 1px, transparent 1px 7px
);
}
.passo h3 {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-lead);
letter-spacing: -0.015em;
line-height: var(--leading-dense);
margin-bottom: 0.5rem;
}
.passo p { font-size: var(--text-cell); color: var(--p-muted); }
@media (min-width: 48rem) {
.ladrilho--3 { grid-template-columns: repeat(3, 1fr); }
.ladrilho--3 > * { border-bottom: 0; border-right: 1px solid var(--p-border); }
.ladrilho--3 > *:last-child { border-right: 0; }
}
/* ---------------------------------------------------------------------------
SELO DE CONFIANÇA — faixa invertida, seção própria.
É o diferencial verificável do produto e por isso não divide seção com nada.
A inversão de faixa é o recurso de ênfase da página; aqui ela ganha o peso
máximo porque este é o argumento que nenhum concorrente pode copiar sem
admitir que o número dele às vezes não vale.
--------------------------------------------------------------------------- */
.selo__grade { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
/* A demonstração: dois estados do MESMO número, um com base e um sem. Mostrar
os dois lado a lado é a prova; descrever seria propaganda. */
.demo {
background: var(--p-surface);
border: 1px solid var(--p-border);
border-radius: var(--radius-card);
padding: 1.125rem;
}
.demo__topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1rem;
}
.demo__filtro {
font-family: var(--font-mono);
font-size: var(--text-meta);
color: var(--p-muted);
letter-spacing: var(--track-tnum);
}
.demo__valor { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; }
.demo .regua { margin-block: 0.625rem 0.875rem; }
.demo__base { font-size: var(--text-meta); color: var(--p-faint); }
.demo--fraca { border-color: color-mix(in srgb, var(--p-risk) 45%, var(--p-border)); }
@media (min-width: 48rem) {
.selo__grade { grid-template-columns: 1fr 1fr; }
}
/* ---------------------------------------------------------------------------
COBERTURA — o que é verdade, em tipo.
POR QUE NOME E NÃO ESCUDO: os 20 escudos pesam 3,7 MB, sete vezes o
orçamento inteiro desta página. E há um ganho junto com a economia — o nome
em Archivo Black lê como elenco de campeonato, o que é a promessa da seção;
uma fileira de emblemas lê como logo de patrocinador.
--------------------------------------------------------------------------- */
.numeros {
display: grid;
gap: 1.5rem;
margin-top: 2.5rem;
padding-block: 1.75rem;
border-block: 1px solid var(--p-border);
}
.numeros > div .cifra { color: var(--p-ink); }
.numeros .rotulo { margin-top: 0.375rem; }
.clubes {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
}
.clubes li {
padding: 0.3125rem 0.625rem;
border: 1px solid var(--p-border);
border-radius: var(--radius-control);
background: var(--p-surface);
font-family: var(--font-display);
font-size: var(--text-meta);
letter-spacing: var(--track-display-sm);
color: var(--p-muted);
transition: color var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.clubes li:hover { color: var(--p-ink); border-color: var(--p-border-strong); }
@media (min-width: 40rem) {
.numeros { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}
/* ---------------------------------------------------------------------------
DOIS CAMINHOS — apostas e Cartola.
Larguras DESIGUAIS (3fr/2fr) porque as audiências são desiguais: quem aposta
é o público declarado, Cartola é o secundário. Dois painéis do mesmo tamanho
afirmariam uma paridade que o produto não tem.
--------------------------------------------------------------------------- */
.caminhos { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
.caminho {
--sinal: var(--p-signal);
padding: 1.5rem;
background: var(--p-surface);
border: 1px solid var(--p-border);
border-top: 3px solid var(--sinal);
border-radius: var(--radius-card);
}
.caminho--cartola { --sinal: var(--p-cartola); }
.caminho h3 {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-lead);
letter-spacing: -0.015em;
margin-block: 0.875rem 0.625rem;
}
.caminho > p { font-size: var(--text-cell); color: var(--p-muted); margin-bottom: 1rem; }
.caminho ul { display: grid; gap: 0.5rem; }
.caminho li {
display: flex;
gap: 0.5rem;
font-size: var(--text-cell);
line-height: var(--leading-read);
}
.caminho li::before {
content: "";
flex: none;
width: 6px; height: 6px;
margin-top: 0.45em;
background: var(--sinal);
border-radius: 1px;
}
@media (min-width: 52rem) {
.caminhos { grid-template-columns: 3fr 2fr; }
}
/* ---------------------------------------------------------------------------
PREÇO — duas colunas, não três, e com os furos de canto.
Os quatro pontos de canto vêm do vocabulário de peça impressa (ficha
perfurada, placa aparafusada). É detalhe barato que faz o cartão parecer
OBJETO em vez de `div` com sombra — e sombra é justo o que a direção proíbe
em card.
--------------------------------------------------------------------------- */
/* A BANDEJA: os dois planos ficam DENTRO de uma superfície rebaixada, e a
observação de preço fica FORA dela. Assim a seção não é "três caixas
iguais": é um par que se compara mais um recado que não compete com o par.
A bandeja também resolve a borda — sem ela, dois cards claros sobre fundo
claro precisam de sombra para existir, e sombra em card é proibida aqui. */
.bandeja {
margin-top: 2.5rem;
padding: 0.75rem;
background: var(--p-sunken);
border: 1px solid var(--p-border);
border-radius: var(--radius-card);
}
.precos { display: grid; gap: 0.75rem; }
.preco {
position: relative;
padding: 1.75rem 1.5rem;
background: var(--p-surface);
border: 1px solid var(--p-border);
border-radius: var(--radius-card);
}
.preco--destaque { border-color: var(--p-border-strong); }
/* As duas listas tem tamanhos diferentes, entao sem isto cada botao parava
numa altura propria e a comparacao entre os planos ficava torta. Coluna
flex + `margin-top: auto` no botao cola os dois no rodape do card. */
.preco { display: flex; flex-direction: column; }
.preco .botao { margin-top: auto; }
/* Os furos: quatro pontos nos cantos, desenhados em um gradiente só. */
.preco::before {
content: "";
position: absolute;
inset: 7px;
pointer-events: none;
background-image: radial-gradient(circle, var(--p-border-strong) 1.5px, transparent 1.5px);
background-position: 0 0, 100% 0, 0 100%, 100% 100%;
background-size: 3px 3px;
background-repeat: no-repeat;
}
.preco__nome {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-body);
letter-spacing: -0.01em;
margin-bottom: 0.25rem;
}
.preco__valor { display: flex; align-items: baseline; gap: 0.375rem; margin-block: 0.75rem 0.25rem; }
.preco__valor .cifra { color: var(--p-ink); }
.preco__ciclo { font-size: var(--text-meta); color: var(--p-faint); }
.preco__nota { font-size: var(--text-meta); color: var(--p-faint); }
.preco hr {
border: 0;
border-top: 1px solid var(--p-border);
margin-block: 1.25rem;
}
.preco ul { display: grid; gap: 0.625rem; margin-bottom: 1.5rem; }
.preco li {
display: flex;
gap: 0.5rem;
font-size: var(--text-cell);
line-height: var(--leading-read);
}
.preco li svg { flex: none; margin-top: 0.2em; color: var(--p-signal); }
.preco li[data-sem] { color: var(--p-faint); }
.preco li[data-sem] svg { color: var(--p-border-strong); }
.preco .botao { width: 100%; }
/* O recado de fora da bandeja. Fio à esquerda, sem fundo: ele informa, não
oferece, e por isso não pode ter a mesma presença de um plano. */
.recado {
margin-top: 1.25rem;
padding-left: 1rem;
border-left: 2px solid var(--p-border-strong);
}
.recado p { font-size: var(--text-cell); color: var(--p-muted); }
.recado p + p { margin-top: 0.5rem; }
@media (min-width: 48rem) {
.precos { grid-template-columns: 1fr 1fr; }
}
/* ---------------------------------------------------------------------------
FAQ + CHAMADA FINAL — uma seção, duas colunas assimétricas.
POR QUE JUNTAS: separadas, são duas faixas de largura cheia seguidas, e a
segunda (o CTA) é sempre a mais genérica da página — título grande
centralizado, dois botões, nada. Juntas, a coluna estreita da esquerda
carrega o convite e fica GRUDADA enquanto a pessoa percorre as perguntas:
o CTA acompanha justo o momento em que a dúvida está sendo respondida, que
é quando ele tem chance.
`` nativo: abre sem JS, é acessível de fábrica, e o teclado já
funciona. Sem biblioteca de acordeão.
--------------------------------------------------------------------------- */
.faq__grade { display: grid; gap: 2.5rem; }
.faq__lista { display: grid; }
/* A coluna do convite. Fio âmbar no topo em vez de fundo âmbar: a lâmpada
marca a borda, e o texto continua legível em tinta. */
.convite {
padding: 1.5rem;
background: var(--p-surface);
border: 1px solid var(--p-border);
border-top: 3px solid var(--p-lamp);
border-radius: var(--radius-card);
}
.convite h3 {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-lead);
letter-spacing: -0.015em;
margin-bottom: 0.625rem;
}
.convite p { font-size: var(--text-cell); color: var(--p-muted); margin-bottom: 1.25rem; }
.convite .botao { width: 100%; }
.convite .meta { margin-top: 0.75rem; text-align: center; }
.faq details {
border-top: 1px solid var(--p-border);
}
.faq details:last-of-type { border-bottom: 1px solid var(--p-border); }
.faq summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding-block: 1.125rem;
cursor: pointer;
font-weight: 600;
font-size: var(--text-body);
line-height: var(--leading-dense);
list-style: none;
transition: color var(--dur-base) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--p-signal); }
/* O sinal de mais que vira menos: duas barras, e a vertical gira. Rotação é
`transform`, então não custa layout. */
.faq__mais {
position: relative;
flex: none;
width: 12px; height: 12px;
margin-top: 0.3em;
}
.faq__mais::before,
.faq__mais::after {
content: "";
position: absolute;
inset: 50% 0 auto 0;
height: 1.5px;
background: var(--p-ink);
}
.faq__mais::after {
transform: rotate(90deg);
transition: transform var(--dur-base) var(--ease-out);
}
.faq details[open] .faq__mais::after { transform: rotate(0deg); }
.faq details > div {
padding-bottom: 1.25rem;
max-width: var(--measure-read);
font-size: var(--text-cell);
line-height: var(--leading-read);
color: var(--p-muted);
}
/* A entrada do corpo é só `opacity` + `translateY`. A ALTURA não é animada de
propósito: `` nativo troca a altura de uma vez, e animar isso
exigiria medir `scrollHeight` em JS e escrever `height` frame a frame — que
é justo o que a direção de movimento proíbe. Trocar altura sem transição e
revelar o texto com transform dá a mesma sensação sem custo de layout. */
.faq details[open] > div {
animation: subir var(--dur-enter) var(--ease-out) both;
}
@media (min-width: 56rem) {
.faq__grade { grid-template-columns: 5fr 7fr; gap: 3.5rem; }
/* Gruda a coluna do convite. `align-self: start` é obrigatório: sem ele o
item de grade estica até a altura da fileira e `sticky` não tem folga
para onde correr — é o erro clássico de sticky dentro de grid. */
.faq__esq { position: sticky; top: 5.5rem; align-self: start; }
}
.faq__esq .cabeca { margin-bottom: 1.75rem; }
/* ---------------------------------------------------------------------------
RODAPÉ — com a marca d'água que sangra pela borda de baixo.
A palavra gigante cortada pela borda é o recurso mais forte do rodapé, e
funciona aqui por um motivo específico deste produto: a marca já é usada
como marca d'água de campinho em seis telas do dashboard, e ali ela lê como
TEXTURA. É o mesmo gesto, no mesmo lugar da hierarquia — o que fecha o
sanduíche entre landing e produto.
--------------------------------------------------------------------------- */
.rodape { position: relative; overflow: hidden; padding-top: 3.5rem; }
.rodape__grade { display: grid; gap: 2.5rem; }
.rodape__marca { max-width: 22rem; }
.rodape__marca .marca { font-size: 1.25rem; margin-bottom: 0.875rem; }
.rodape__marca p { font-size: var(--text-cell); color: var(--p-muted); }
.rodape__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.rodape h2 { /* usado como título de coluna, mas não é hierarquia de conteúdo */
font-family: var(--font-body);
font-size: var(--text-label);
font-weight: 600;
letter-spacing: var(--track-caps);
text-transform: uppercase;
color: var(--p-faint);
margin-bottom: 0.875rem;
}
.rodape__cols ul { display: grid; gap: 0.625rem; }
/* 28px de alvo no rodape: acima do piso de 24px da WCAG 2.2, e o `gap` de
10px entre itens garante que dois alvos vizinhos nao se confundam no dedo. */
.rodape__cols a {
display: inline-flex;
align-items: center;
min-height: 1.75rem;
font-size: var(--text-cell);
color: var(--p-muted);
transition: color var(--dur-base) var(--ease-out);
}
.rodape__cols a:hover { color: var(--p-ink); }
.rodape__fim {
position: relative;
z-index: 1;
margin-top: 3rem;
padding-block: 1.25rem;
border-top: 1px solid var(--p-border);
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
align-items: baseline;
}
.rodape__fim p { font-size: var(--text-meta); color: var(--p-faint); }
/* Links legais da barra final (usados na 404): mesmo piso de 24px. */
.rodape__fim a {
display: inline-flex;
align-items: center;
min-height: 1.5rem;
color: var(--p-muted);
text-decoration: underline;
text-underline-offset: 2px;
}
.rodape__fim a:hover { color: var(--p-ink); }
/* A marca d'água. `aria-hidden` no HTML, e aqui `user-select: none`: é
textura, não conteúdo, e não deve entrar em cópia de texto nem em leitor
de tela. */
.dagua {
position: absolute;
left: 50%;
/* -0.44em e nao -0.28em: com o recorte mais alto, as letras subiam ate a
linha do copyright e a palavra parava de ler como TEXTURA para ler como
erro de sobreposicao. Cortada mais embaixo, sobra so o ombro dos
caracteres — que e o efeito pretendido.
A opacidade tambem cai (0.045), porque no grafite do rodape 0.06 de tinta
clara rende mais contraste do que a mesma conta renderia no papel. */
bottom: -0.44em;
transform: translateX(-50%);
z-index: 0;
font-family: var(--font-display);
font-size: clamp(4rem, 19vw, 15rem);
line-height: 0.8;
letter-spacing: -0.045em;
color: var(--p-ink);
opacity: 0.045;
white-space: nowrap;
user-select: none;
pointer-events: none;
}
@media (min-width: 52rem) {
.rodape { padding-top: 4.5rem; }
.rodape__grade { grid-template-columns: 2fr 3fr; gap: 4rem; }
.rodape__cols { grid-template-columns: repeat(3, 1fr); }
}
/* ---------------------------------------------------------------------------
PÁGINAS DE TEXTO (termos, privacidade, 404)
--------------------------------------------------------------------------- */
.doc { max-width: 44rem; padding-block: 3rem 4.5rem; }
.doc h1 { font-size: var(--text-title); margin-bottom: 0.75rem; }
.doc > .meta { margin-bottom: 2.5rem; }
.doc h2 {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-lead);
letter-spacing: -0.015em;
margin-block: 2.25rem 0.75rem;
}
.doc p, .doc li { font-size: var(--text-cell); color: var(--p-muted); }
.doc p + p { margin-top: 0.875rem; }
.doc ul { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.doc ul li { display: flex; gap: 0.625rem; }
.doc ul li::before {
content: "";
flex: none;
width: 5px; height: 5px;
margin-top: 0.55em;
background: var(--p-border-strong);
border-radius: 1px;
}
.doc strong { color: var(--p-ink); font-weight: 600; }
.doc a { color: var(--p-signal); font-weight: 600; }
.doc a:hover { text-decoration: underline; }
/* 404: a cifra como protagonista. É o único lugar onde um número sem
significado estatístico pode ser o herói, e recusar a piada seria perder a
única chance de a página de erro parecer deste produto. */
.erro404 {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-height: 60dvh;
padding-block: 3rem;
}
.erro404 .cifra { font-size: clamp(4rem, 16vw, 8rem); color: var(--p-ink); }
.erro404 .regua { width: min(100%, 22rem); margin-block: 1rem 1.5rem; }
.erro404 h1 { font-size: var(--text-title); margin-bottom: 0.75rem; }
.erro404 p { margin-bottom: 1.75rem; }
/* ---------------------------------------------------------------------------
MOVIMENTO — entrada por rolagem, com escalonamento.
`.revelar` começa deslocado e transparente; o `IntersectionObserver` em
`js/site.js` põe `data-visto="true"` e a transição corre. Só `opacity` e
`transform`: nada de `top`, `left`, `width` ou `height`, que forçam o
navegador a recalcular layout a cada frame.
O deslocamento é de 14px, não de 40: entrada longa em página de venda vira
espera, e o conteúdo tem que estar legível no primeiro instante em que
entra no campo de visão.
--------------------------------------------------------------------------- */
.revelar {
opacity: 0;
transform: translateY(14px);
transition-property: opacity, transform;
transition-duration: var(--dur-reveal);
transition-timing-function: var(--ease-out);
/* O atraso é escrito pelo JS em `--passo`, um índice por irmão. 55ms é curto
de propósito: escalonamento perceptível sem que o último item da fileira
chegue meio segundo depois do primeiro. */
transition-delay: calc(var(--passo, 0) * 55ms);
}
.revelar[data-visto="true"] { opacity: 1; transform: none; }
@keyframes subir {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@keyframes varrer {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes tracar {
from { stroke-dashoffset: 1000; }
to { stroke-dashoffset: 0; }
}
/* QUEM PEDIU MENOS MOVIMENTO NÃO PERDE A RESPOSTA, perde o deslocamento.
A troca de cor no hover e no foco continua — é ela que confirma que o
clique chegou. Zerar a transição toda deixaria a página sem retorno nenhum,
o que é acessibilidade pior, não melhor. */
@media (prefers-reduced-motion: reduce) {
.revelar {
opacity: 1;
transform: none;
transition: none;
}
.heroi h1 em::after { animation: none; transform: scaleX(1); }
.heroi h1 > span[data-palavra] { animation: none; }
.faixa[data-visto="true"] path { animation: none; stroke-dashoffset: 0; }
.faq details[open] > div { animation: none; }
.barra__preenche { transition: none; }
.botao:active { transform: none; }
}
/* Impressão: a página é um documento de venda, e alguém vai imprimir os
termos. Faixa invertida em papel gasta tinta e não comunica nada. */
@media print {
.topo, .dagua, .pular { display: none; }
.inverso { background: none; color: black; }
.revelar { opacity: 1; transform: none; }
}
/* ===========================================================================
FUNDOS — profundidade sem virar catálogo de banco de imagem.
POR QUE EXISTE: a primeira versão desta página estava certa de estrutura e
plana de leitura. Seção que é só texto sobre cor lisa lê como inacabada, e
o dono apontou isso em uma frase ("ainda está com cara de IA").
O CATÁLOGO É DELIBERADAMENTE CURTO — duas fotos, textura gerada no resto:
FOTO (2 lugares) herói e cobertura. Foto em TODA seção é exatamente o
que faz uma landing parecer catálogo de stock.
TEXTURA GERADA o resto. Régua, grade milimetrada, campo de calor e
grão — o vocabulário do PLACAR, que é a direção da
casa. Pesa zero byte de rede, e não parece nem stock
nem imagem de IA.
A REGRA DURA DA FOTO: nunca entra crua. Ela já vem dessaturada e escurecida
do arquivo (`infra/gerar-imagens.py`) e recebe VÉU DA PALETA por cima aqui.
O véu usa `var(--p-*)`: nenhum hex desce para este arquivo, senão a foto
deixa de acompanhar a marca e o portão de identidade do deploy não pega.
=========================================================================== */
/* --- A CAMADA DE FOTO -----------------------------------------------------
`` absoluto dentro de uma seção `position: relative`, e não
`background-image`, por três motivos concretos:
1. `srcset` só existe em ``. Com `background-image`, o celular baixa
a versão de 1920px e paga o dobro do peso por nada.
2. `width`/`height` no `` reservam a caixa antes de o arquivo
chegar, o que evita o salto de layout.
3. AVIF com fallback WebP se faz com ``, que também só
existe dentro de ``.
--------------------------------------------------------------------------- */
.fundo {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
/* Foto e textura são decoração: nunca capturam clique nem seleção. */
pointer-events: none;
user-select: none;
}
.fundo img {
width: 100%;
height: 100%;
object-fit: cover;
/* Sem o fio interno que `img` ganha na base: aqui a imagem É o fundo, e um
contorno de 1px viraria moldura em volta da seção inteira. */
outline: none;
}
/* O VÉU. Duas camadas num só pseudo-elemento:
1. um degradê DIRECIONAL que escurece mais o lado onde o texto mora — é
ele que compra contraste sem apagar a imagem toda;
2. uma chapada da cor de fundo do tema, que puxa a foto para dentro da
paleta (o verde do gramado para de brigar com o âmbar).
`--veu` é a opacidade da chapada, e cada seção escolhe a sua. */
.fundo::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
100deg,
var(--p-bg) 0%,
color-mix(in srgb, var(--p-bg) 82%, transparent) 42%,
color-mix(in srgb, var(--p-bg) 46%, transparent) 100%
),
color-mix(in srgb, var(--p-bg) calc(var(--veu, 55) * 1%), transparent);
}
/* Esmaece a borda de baixo, para a seção seguinte não começar num corte seco.
Mesma ideia do `.edge-fade` do dashboard, no eixo vertical. */
.fundo--pe::before {
content: "";
position: absolute;
z-index: 1;
left: 0; right: 0; bottom: 0;
height: 38%;
background: linear-gradient(to bottom, transparent, var(--p-bg));
}
/* Conteúdo de seção com fundo precisa subir acima da camada 0. */
.acima { position: relative; z-index: 1; }
/* --- TEXTURAS GERADAS -----------------------------------------------------
Nenhuma baixa um byte: são gradientes repetidos. Todas usam token de cor,
então acompanham tema claro, tema escuro e faixa invertida de graça.
--------------------------------------------------------------------------- */
/* 1. CAMPO DE RÉGUA — a assinatura da casa, ampliada e esmaecida até virar
textura de parede. Traço de 1px a cada 14px, com marca alta a cada 5:
é a `.scale-rule` do dashboard em outra escala. Some para baixo por
máscara, então o texto da seção nunca disputa com ela. */
.tex-regua { position: relative; }
.tex-regua::before {
content: "";
position: absolute;
z-index: 0;
inset: 0 0 auto 0;
height: 190px;
pointer-events: none;
/* 0.32 e nao 0.5: a 0.5 a fileira de tracos lia como CERCA no limite da
secao — forma reconhecivel disputando com o texto, que e o oposto de
textura. Textura e o que se ve sem olhar. */
opacity: 0.32;
background-image:
repeating-linear-gradient(90deg, var(--p-border-strong) 0 1px, transparent 1px 70px),
repeating-linear-gradient(90deg, var(--p-border) 0 1px, transparent 1px 14px);
background-size: 100% 34px, 100% 18px;
background-repeat: repeat-x, repeat-x;
-webkit-mask-image: linear-gradient(to bottom, black, transparent);
mask-image: linear-gradient(to bottom, black, transparent);
}
/* 2. GRADE PONTILHADA — papel milimetrado. Ponto de 1px a cada 22px, com
máscara radial FORA DO CENTRO: grade uniforme de borda a borda é o que
lê como template, e a máscara é o que a transforma em iluminação. */
.tex-grade { position: relative; }
.tex-grade::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.55;
background-image: radial-gradient(circle at 1px 1px, var(--p-border-strong) 1px, transparent 0);
background-size: 22px 22px;
-webkit-mask-image: radial-gradient(80% 60% at 82% 12%, black, transparent 72%);
mask-image: radial-gradient(80% 60% at 82% 12%, black, transparent 72%);
}
/* 3. MAPA DE CALOR — dois campos de cor muito desfocados, um verde e um
tijolo, fora do centro. É o vocabulário do mapa de gols do produto, e
NÃO o "orb" de landing de IA: a diferença é concreta — sem anel, sem
núcleo aceso, opacidade de 10-13%, e raio gigante (58vw) para ler como
iluminação de ambiente em vez de objeto flutuante.
`--calor-a`/`--calor-b` posicionam, `--calor-cor-a`/`--calor-cor-b`
escolhem a cor. A seção "dois caminhos" troca o tijolo por OCRE + VERDE
de propósito: ali as duas colunas são Apostas (verde) e Cartola (ocre),
então a iluminação passa a dizer a mesma coisa que o conteúdo. Também
resolve um problema real — verde com tijolo em opacidade baixa dava um
lavado rosado no canto, que é a vizinhança exata do gradiente de IA que
esta página existe para não parecer. */
.tex-calor { position: relative; }
.tex-calor::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(58vw 46vw at var(--calor-a, 12% 18%),
color-mix(in srgb, var(--calor-cor-a, var(--p-signal)) 13%, transparent), transparent 70%),
radial-gradient(46vw 40vw at var(--calor-b, 88% 82%),
color-mix(in srgb, var(--calor-cor-b, var(--p-risk)) 10%, transparent), transparent 70%);
}
/* 4. GRÃO — o item que faz cor lisa parar de parecer cor lisa. `feTurbulence`
em SVG embutido na própria `url()`, sem arquivo e sem requisição.
Fica FIXO na viewport de propósito: grão que rola junto lê como sujeira
na imagem; grão fixo lê como grão do papel.
Opacidade 0.035 — acima de 0.05 vira chuvisco em tela de alta densidade. */
.grao::after {
content: "";
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
/* `overlay` e nao opacidade pura: chapada cinza por cima esbranquica o
escuro e suja o claro. Em `overlay` o grao MODULA o que esta embaixo, e
e assim que ele cumpre a funcao principal — matar o bandeamento do
degrade do heroi, que e o defeito que mais entrega fundo escuro barato.
`stitchTiles=stitch` faz o azulejo de 140px casar nas bordas; sem ele
aparece uma grade de costura visivel em tela grande. */
mix-blend-mode: overlay;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* --- AJUSTES POR SEÇÃO --------------------------------------------------- */
/* O HERÓI vira faixa escura com a arena atrás. Véu forte (66%) porque aqui há
texto de display claro em cima, e o contraste é medido, não estimado. */
.heroi { position: relative; --veu: 34; }
.heroi .fundo::after {
/* O DEGRADE FAZ O TRABALHO PESADO, A CHAPADA SO ACERTA O TOM.
Primeira tentativa usou chapada de 66% e a arena desapareceu — o que
derrota o proposito de ter foto. A divisao certa e: degrade quase opaco
onde o texto mora (0-38%), abrindo rapido depois disso, e chapada baixa
(34%) so para puxar o verde do gramado para dentro da paleta.
Resultado medido: 12,8:1 no titulo e 7,4:1 no paragrafo — folga larga
sobre o piso AA de 4,5:1, com a arquibancada e os refletores visiveis. */
background:
linear-gradient(
98deg,
var(--p-bg) 0%,
color-mix(in srgb, var(--p-bg) 94%, transparent) 38%,
color-mix(in srgb, var(--p-bg) 62%, transparent) 68%,
color-mix(in srgb, var(--p-bg) 30%, transparent) 100%
),
color-mix(in srgb, var(--p-bg) calc(var(--veu) * 1%), transparent);
}
/* COBERTURA: o gramado desfocado. Véu ALTO e, ao contrário do herói, aqui ele
não escurece a foto — CLAREIA, até o papel voltar a ser papel, porque o
texto desta seção é escuro.
POR QUE 90 E NÃO 84: com 84 o rótulo em caixa alta (o texto mais miúdo da
seção, em `--p-faint`) mediu 4,73:1 — passa o piso de 4,5:1, mas com 0,23 de
folga, e folga dessa ordem desaparece na primeira vez que alguém trocar a
foto ou mexer num degrau de superfície. Com 90 o mesmo par vai a 5,4:1.
Contraste medido, não estimado — a conta está em `logs/contraste.mjs`. */
#cobertura { position: relative; --veu: 90; }
@media (prefers-reduced-motion: reduce) {
/* Nada aqui anima, mas grão fixo incomoda em tela com rolagem elástica. */
.grao::after { opacity: 0.02; }
}
/* Impressão: fundo é tinta gasta e nada mais. */
@media print {
.fundo, .grao::after,
.tex-regua::before, .tex-grade::before, .tex-calor::before { display: none; }
}
/* ===========================================================================
PREÇO — tabela comparativa, alternador de ciclo, e o utilitário `.sr`.
=========================================================================== */
/* Só para leitor de tela. `clip-path` + 1px e NÃO `display:none` nem
`visibility:hidden`: essas duas removem o elemento da árvore de
acessibilidade, que é o oposto do que se quer. É o padrão da casa para
rótulo que a coluna já comunica visualmente (o "Incluído" de cada célula,
que no olho é uma marca e no ouvido tem que ser uma palavra). */
.sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* --- ALTERNADOR DE CICLO -------------------------------------------------- */
.ciclo {
display: inline-flex;
gap: 2px;
margin-top: 2rem;
padding: 2px;
background: var(--p-sunken);
border: 1px solid var(--p-border);
border-radius: var(--radius-control);
}
.ciclo__opcao {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 2.25rem;
padding: 0.375rem 0.875rem;
border: 0;
border-radius: 2px;
background: transparent;
color: var(--p-muted);
font-family: var(--font-body);
font-size: var(--text-cell);
font-weight: 600;
cursor: pointer;
}
/* O estado vem de `aria-pressed`, não de uma classe paralela: assim é
impossível o visual e o anúncio do leitor de tela discordarem — não há dois
lugares para manter em sincronia, há um. */
.ciclo__opcao[aria-pressed="true"] {
background: var(--p-surface);
color: var(--p-ink);
box-shadow: var(--shadow-raise);
}
.ciclo__opcao .lampada { font-size: var(--text-tick); padding: 0.125rem 0.375rem; }
/* No mensal a etiqueta de desconto não faz sentido, e escondê-la é melhor que
deixá-la cinza: informação que não se aplica não deve ocupar espaço. */
.ciclo__opcao[data-ciclo="mensal"] .lampada { display: none; }
/* --- A TABELA ------------------------------------------------------------- */
/* Quatro colunas não cabem em 360px. A tabela rola DENTRO da própria caixa —
regra da casa: conteúdo largo rola no seu container, nunca no corpo da
página (é o que mantém o `estouro horizontal: 0px` da auditoria).
`min-width` na tabela é o que força a rolagem em vez de esmagar a coluna
de recursos até o texto quebrar letra por letra. */
.tabela-preco {
margin-top: 1.5rem;
overflow-x: auto;
border: 1px solid var(--p-border);
border-radius: var(--radius-card);
background: var(--p-surface);
/* Esmaece a borda direita enquanto houver conteúdo escondido, para o corte
não parecer bug. Some quando a tabela cabe inteira. */
-webkit-mask-image: linear-gradient(90deg, black 0 96%, transparent 100%);
mask-image: linear-gradient(90deg, black 0 96%, transparent 100%);
}
@media (min-width: 62rem) {
.tabela-preco { -webkit-mask-image: none; mask-image: none; }
}
.tabela-preco table {
width: 100%;
min-width: 44rem;
border-collapse: collapse;
text-align: left;
}
/* Cabeçalho de plano: é a única célula com peso. Sem `gap` entre as colunas —
o fio faz a separação, como no resto da página. */
.plano {
vertical-align: top;
min-width: 11rem;
padding: 1.25rem 1rem 1.375rem;
border-bottom: 1px solid var(--p-border);
border-left: 1px solid var(--p-border);
/* FIO DE 3px TRANSPARENTE nos tres, e nao so no destacado. O Analista tem
`border-top: 3px` em ambar; sem a mesma caixa nos vizinhos, o conteudo
dele nascia 3px mais abaixo e a fileira saia desalinhada — medido em
451/451/452 e 521/521/523. Reservar o espaco nos tres resolve sem truque
de posicionamento. */
border-top: 3px solid transparent;
font-weight: 400;
background: var(--p-surface-2);
}
/* ALINHAMENTO POR GRADE, e é o conserto do que o dono chamou de "torto".
Cinco faixas fixas, nesta ordem: rótulo, nome, cifra, nota, botão. Como os
três planos declaram os cinco espaços (antes só o Analista tinha o rótulo
de cima), cada faixa começa no MESMO Y nas três colunas — a linha de base
da cifra, a do "/mês" e o topo do botão batem.
`1fr` na última faixa empurra o botão para o rodapé, então nome mais longo
em um plano não desalinha os botões dos outros.
A GRADE VIVE NUM WRAPPER, E NÃO NO `
`, e isto não é preferência:
`display: grid` numa célula de tabela a RETIRA do algoritmo de tabela, e as
três colunas empilham uma embaixo da outra. Medido — os topos saíram em
449 / 681 / 916 em vez de iguais. A célula continua `table-cell`; quem
organiza por dentro é o `div`. */
.plano__caixa {
display: grid;
grid-template-rows: auto auto auto auto 1fr;
align-content: start;
height: 100%;
}
.plano__nome {
display: block;
margin-top: 0.5rem;
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-lead);
letter-spacing: -0.015em;
line-height: var(--leading-dense);
}
/* A CIFRA E A UNIDADE COMPARTILHAM A LINHA DE BASE.
É o gesto que a referência `nex-max-upgrade` acerta: preço grande com a
unidade num `` miúdo na MESMA baseline. Sem `align-items: baseline`
os dois se alinham pelo topo e o "/mês" flutua na altura do algarismo, o
que faz duas informações competirem em vez de uma qualificar a outra. */
.plano__valor {
display: flex;
align-items: baseline;
gap: 0.1875rem;
margin-top: 0.75rem;
}
.plano__valor .cifra {
color: var(--p-ink);
/* `tabular-nums` (via `.tnum`) é obrigatório aqui: sem ele, trocar 24 por
29 muda a largura do bloco e a fileira toda dança na troca de ciclo. */
font-size: var(--text-figure);
line-height: 1;
}
.plano__un {
font-size: var(--text-meta);
font-weight: 600;
color: var(--p-muted);
}
/* A NOTA: o total do ano, e o equivalente exato com centavos. Miúda de
propósito — ela informa, não vende. */
.plano__nota b { color: var(--p-muted); font-weight: 600; }
.plano__nota {
display: block;
margin-top: 0.4375rem;
/* Duas linhas reservadas: no ciclo mensal a nota tem uma linha só ("ou R$
24/mês no plano anual") e no anual tem duas. Sem a altura mínima, o botão
subia 1 linha ao trocar de ciclo e a fileira inteira pulava. */
min-height: 2.6em;
font-size: var(--text-meta);
line-height: var(--leading-dense);
color: var(--p-faint);
}
.plano .botao { width: 100%; margin-top: 1rem; align-self: end; }
.plano .rotulo { display: block; }
.plano .rotulo--lamp { color: var(--p-muted); }
/* A troca de ciclo: a cifra some 4px para cima, o texto muda, e ela volta.
Só na CIFRA e não no bloco — a 6px, e no bloco inteiro, o cartão dava um
pulo que lia como recarregamento de página. */
.plano__valor .cifra {
transition: opacity var(--dur-snap) var(--ease-out),
transform var(--dur-snap) var(--ease-out);
}
.plano__valor .cifra[data-virando="true"] {
opacity: 0;
transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
.plano__valor .cifra { transition: none; }
.plano__valor .cifra[data-virando="true"] { opacity: 1; transform: none; }
}
/* O DESTAQUE do plano recomendado: fio âmbar no topo e superfície um degrau
acima. NÃO ganha altura nem escala — a coluna dele já se destaca por ter
marca em todas as linhas, que é o argumento real. */
.plano--destaque {
background: var(--p-surface);
border-top: 3px solid var(--p-lamp);
box-shadow: inset 0 0 0 1px var(--p-border);
}
/* A CÉLULA DE CANTO. Numa tabela comparativa ela costuma ficar vazia, e um
retângulo branco daquele tamanho no alto da seção lê como erro de
renderização. Aqui ela carrega o rótulo da própria tabela — que é
informação de verdade e ainda ancora a leitura das linhas de baixo. */
.tabela-preco thead th:first-child {
vertical-align: bottom;
padding: 1.25rem 1rem 1.375rem;
border-bottom: 1px solid var(--p-border);
font-weight: 400;
background: var(--p-surface);
}
.canto {
display: block;
max-width: 18rem;
font-size: var(--text-cell);
line-height: var(--leading-read);
color: var(--p-muted);
}
.canto strong { display: block; color: var(--p-ink); font-weight: 700; }
/* Linhas de recurso. `row-hover` é a mesma classe de interação do dashboard:
só a superfície muda, sem escala — linha que encolhe no hover faz a tabela
inteira tremer. */
.tabela-preco tbody tr { transition: background-color var(--dur-base) var(--ease-out); }
.tabela-preco tbody tr:hover { background: var(--p-surface-2); }
.tabela-preco th[scope="row"] {
/* 38% e nao "o que sobrar": sem largura declarada, a coluna de texto come o
espaco disponivel e as tres de plano ficam estreitas demais para o nome do
plano caber em uma linha. */
width: 38%;
padding: 0.75rem 1rem;
border-top: 1px solid var(--p-border);
font-weight: 400;
font-size: var(--text-cell);
line-height: var(--leading-dense);
color: var(--p-ink);
}
.tabela-preco tbody td {
width: 1%;
min-width: 8.5rem;
padding: 0.75rem 1rem;
border-top: 1px solid var(--p-border);
border-left: 1px solid var(--p-border);
text-align: center;
}
/* A MARCA de incluído/ausente é desenhada em CSS, não é caractere de texto:
um "✓" tipográfico muda de forma e de peso por fonte, e é lido em voz alta
como "marca de seleção" por alguns leitores. Aqui a forma é geométrica e o
anúncio vem do `.sr` ("Incluído" / "Não incluído"), que é uma frase. */
.tabela-preco td[data-tem]::before {
content: "";
display: inline-block;
vertical-align: middle;
}
/* Incluído: a marca de conferência, em verde-garrafa (o token do positivo). */
.tabela-preco td[data-tem="sim"]::before {
width: 9px;
height: 5px;
border-left: 2px solid var(--p-signal);
border-bottom: 2px solid var(--p-signal);
transform: rotate(-45deg) translate(1px, -2px);
}
/* Ausente: um traço neutro, e não um "X" vermelho. Tijolo é o token de RISCO
neste sistema, e não ter um recurso não é um risco — é só não ter. Pintar
de vermelho aqui gastaria o único sinal de perigo da paleta com uma
informação que não é perigo nenhum. */
.tabela-preco td[data-tem="nao"]::before {
width: 10px;
height: 2px;
background: var(--p-border-strong);
}
/* No celular a primeira coluna gruda, senão a pessoa rola para a direita e
perde de vista de qual recurso a linha fala. */
@media (max-width: 61.99rem) {
.tabela-preco th[scope="row"] {
position: sticky;
left: 0;
z-index: 1;
background: var(--p-surface);
/* Fio à direita desenhado como sombra: `border-right` em célula grudada
desaparece no Safari durante a rolagem. */
box-shadow: 1px 0 0 var(--p-border);
}
.tabela-preco tbody tr:hover th[scope="row"] { background: var(--p-surface-2); }
}
/* A faixa dos "dois mundos": o terceiro público, e o vínculo com o plano
Analista. Assimétrica de propósito (texto largo, botão à direita) — três
colunas iguais aqui repetiria a torre tripla que a tabela de preço evita. */
.ambos {
display: grid;
gap: 1.25rem;
align-items: center;
margin-top: 1.25rem;
padding: 1.5rem;
background: var(--p-surface);
border: 1px solid var(--p-border);
border-left: 3px solid var(--p-lamp);
border-radius: var(--radius-card);
}
.ambos h3 {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-lead);
letter-spacing: -0.015em;
margin-block: 0.5rem 0.5rem;
}
.ambos p:last-of-type { font-size: var(--text-cell); color: var(--p-muted); }
.ambos .rotulo--lamp { color: var(--p-muted); }
.caminho__plano { margin-top: 1rem; font-size: var(--text-cell); }
@media (min-width: 52rem) {
.ambos { grid-template-columns: 1fr auto; gap: 2.5rem; padding: 1.75rem 2rem; }
}
/* ===========================================================================
MOSTRAR O PRODUTO — mostruário em movimento e mosaico de telas.
POR QUE ESTAS DUAS SEÇÕES EXISTEM: a página descrevia funcionalidade em
cartão de texto, e o dono foi direto — "a pessoa dificilmente vai parar
para ler isso". Ele está certo, e a saída não é escrever melhor: são 22
telas prontas e no ar, e uma captura da tabela prova mais que qualquer
parágrafo sobre "número ajustado".
As imagens são CAPTURAS REAIS do dashboard (`infra/capturar-telas.mjs`),
com dado real de rodada real. Nada de mockup: mockup é a mesma promessa
vazia do parágrafo, só em pixel.
Receita composta a partir de `nexora-features` — ver `landing/REFERENCIAS.md`
para o prompt e o que mudou entre a primeira e a última versão.
=========================================================================== */
/* ---------------------------------------------------------------------------
1. MOSTRUÁRIO — duas trilhas em movimento contínuo, sentidos opostos.
Movimento CONTÍNUO e não por gesto: é o que a referência do dono
(instat.hudl.com) faz, e o motivo é de leitura — a pessoa não precisa
descobrir que dá para arrastar. A trilha é DUPLICADA no HTML e anda até
-50%, então o ponto de emenda cai exatamente onde a segunda cópia começa e
o laço é invisível.
Só `transform`. Duração longa (68s e 84s, propositalmente não múltiplas)
para as duas fileiras nunca sincronizarem — quando sincronizam, o olho
percebe o laço.
--------------------------------------------------------------------------- */
.mostruario {
padding-block: 3rem 3.5rem;
overflow: hidden;
}
.mostruario__cabeca {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem 1rem;
margin-bottom: 1.75rem;
}
.mostruario__cabeca h2 {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-lead);
letter-spacing: -0.015em;
}
.mostruario__cabeca p { font-size: var(--text-cell); color: var(--p-muted); }
.trilha {
display: flex;
gap: 0.75rem;
width: max-content;
/* `will-change` só nas duas trilhas: promove a camada uma vez, em vez de o
compositor decidir a cada frame. Em mais elementos que isto, viraria
consumo de memória de vídeo por nada. */
will-change: transform;
}
.trilha--a { animation: correr 68s linear infinite; }
.trilha--b { animation: correr 84s linear infinite reverse; margin-top: 0.75rem; }
/* Pausa no hover: quem quer olhar uma tela específica consegue parar sem
precisar de controle. É a única interação do mostruário. */
.mostruario:hover .trilha { animation-play-state: paused; }
@keyframes correr {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Esmaece as duas pontas: sem isso o cartão cortado na borda lê como bug de
recorte, e não como trilha que continua. */
.mostruario__janela {
/* `clip` ao lado da máscara: a máscara esconde, mas NÃO tira do layout —
ela é pintura. `overflow-x: clip` garante que a trilha (que é
`width: max-content`, muito maior que a tela) não possa contribuir para a
rolagem horizontal da página em nenhum instante da animação. Custa nada
e fecha a única porta por onde uma trilha em movimento poderia empurrar
a página de lado. */
overflow-x: clip;
-webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.peca {
flex: none;
width: 17.5rem;
border: 1px solid var(--p-border);
border-radius: var(--radius-card);
background: var(--p-surface);
overflow: hidden;
}
.peca img {
display: block;
width: 100%;
height: 9.5rem;
object-fit: cover;
/* TOPO e não centro: captura de tabela cortada ao meio deixa meia linha de
número em cada borda e lê como imagem quebrada. Ancorada no topo, ela lê
como "a tela continua abaixo", que é verdade. */
object-position: top;
outline: none;
}
.peca__pe {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.5rem 0.6875rem;
border-top: 1px solid var(--p-border);
background: var(--p-surface-2);
}
.peca__nome {
font-size: var(--text-meta);
font-weight: 600;
color: var(--p-ink);
}
.peca__tag {
font-family: var(--font-mono);
font-size: var(--text-tick);
letter-spacing: var(--track-caps);
text-transform: uppercase;
color: var(--p-faint);
}
@media (min-width: 62rem) {
.peca { width: 21rem; }
.peca img { height: 11.5rem; }
}
/* ---------------------------------------------------------------------------
2. MOSAICO — bento onde a CAPTURA é o cartão.
A diferença em relação ao que estava aqui antes: o cartão não tem
parágrafo. Tem um índice, uma manchete curta, e a tela. Se a manchete não
se explica ao lado da imagem, a imagem está errada — não o texto.
--------------------------------------------------------------------------- */
.mosaico {
display: grid;
gap: 0.75rem;
margin-top: 2.5rem;
}
.quadro {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 15rem;
padding: 1.125rem;
border: 1px solid var(--p-border);
border-radius: var(--radius-card);
background: var(--p-surface);
overflow: hidden;
}
/* A captura preenche o cartão e fica ATRÁS de tudo. */
.quadro img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
outline: none;
}
/* O VÉU SÓ NO RODAPÉ, e é a correção que a referência não previu: ela usa
vídeo escuro, então dispensa véu; a nossa captura tem célula clara, e a
manchete caía sobre número claro. Degradê no pé compra contraste onde o
texto está sem apagar a prova, que é o resto da imagem. */
.quadro::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
/* 72% de altura e a parada do meio em 88%: a primeira tentativa usou 62% e
72%, e no print o ÍNDICE (que mora acima da manchete) caía sobre linha de
tabela e se perdia. O degradê tem que cobrir também o índice, não só a
manchete. Depois do ajuste, medido: 6,33:1 no índice e 13,25:1 na
manchete (`infra/checar-landing.mjs`).
Ainda assim ele começa transparente: os 28% de cima da captura ficam
limpos, e é ali que a prova aparece. */
height: 72%;
background: linear-gradient(
to bottom,
transparent,
color-mix(in srgb, var(--p-bg) 55%, transparent) 32%,
color-mix(in srgb, var(--p-bg) 88%, transparent) 62%,
var(--p-bg) 100%
);
}
.quadro__texto { position: relative; z-index: 1; }
.quadro__n {
display: block;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--text-label);
font-weight: 600;
letter-spacing: var(--track-caps);
color: var(--p-faint);
}
/* A régua miúda sob o índice: a assinatura da casa no lugar em que uma
referência genérica poria um ícone de biblioteca. */
.quadro__n::after {
content: "";
display: block;
width: 2rem;
height: 6px;
margin-top: 0.375rem;
background-image: repeating-linear-gradient(
90deg, var(--p-border-strong) 0 1px, transparent 1px 8px
);
}
.quadro h3 {
margin-top: 0.625rem;
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-body);
letter-spacing: -0.01em;
line-height: var(--leading-dense);
color: var(--p-ink);
}
/* O cartão ALTO é o campinho, e a escolha não é estética: é o único conteúdo
VERTICAL que o produto tem (dois campos empilhados). Pôr uma tabela num
cartão alto mostraria três linhas e muito vazio — foi o que aconteceu na
primeira versão. */
@media (min-width: 52rem) {
.mosaico {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
}
.quadro--alto { grid-row: span 2; min-height: 28rem; }
.quadro--larga { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
/* Quem pediu menos movimento vê a trilha PARADA, não vazia: o conteúdo é a
prova do produto, e sumir com ele seria perder informação em nome de
acessibilidade. */
.trilha--a, .trilha--b { animation: none; }
}
/* A TELA DENTRO DO PAINEL DE CAMINHO.
Substituiu a lista de bullets de cada público — eram sete itens descrevendo
entregável, e entregável descrito é o cartão de texto que o dono disse que
ninguém lê. Aqui a mesma informação aparece como a tela que a entrega.
Altura fixa com `object-position: top`: as duas capturas têm proporções
muito diferentes (uma é 2,3:1, a outra 5:1), e sem altura fixa os dois
painéis ficariam de tamanhos diferentes e desalinhariam a fileira. */
.caminho__tela {
margin: 0 0 1rem;
border: 1px solid var(--p-border);
border-radius: var(--radius-card);
overflow: hidden;
background: var(--p-surface-2);
}
.caminho__tela img {
display: block;
width: 100%;
height: 8.5rem;
object-fit: cover;
object-position: top;
outline: none;
}
.caminho__tela figcaption {
padding: 0.5rem 0.6875rem;
border-top: 1px solid var(--p-border);
font-size: var(--text-meta);
line-height: var(--leading-dense);
color: var(--p-muted);
}
@media (min-width: 52rem) {
.caminho__tela img { height: 10.5rem; }
}