/* Página inicial pública do Be Visible Sites — a landing comercial.
Veio do desenho feito no Claude Design (projeto "Be Visible Instagram/Sites", arquivo
`Be Visible Sites.dc.html`), e é irmã da landing do Be Visible Instagram: mesmos tokens,
mesmas classes, mesma gramática. Herói escuro, resto cor de papel — a marca
acende (ouro sobre a noite) e depois assina (preto sobre o creme). O que foi
acrescentado aqui é o que um desenho de tela larga não tem: respostas de
tela, foco visível, contraste.
Os mesmos três ajustes de contraste da irmã, todos na mesma direção: o ouro
claro é LUZ, não texto.
1. #FFD697 só vive sobre o escuro. Sobre o creme ele some (1,4:1), então na
parte clara o ouro que carrega texto é --ouro-forte (5,1:1) e o que é só
grafismo — filete, ✓, numeral, seta — é --ouro.
2. O cinza miúdo do desenho (#8A857B, 3,3:1) escureceu para #6A665D (5,2:1),
o mesmo movimento que o painel já fazia.
3. Sobre a noite, o texto apagado para em 58% de opacidade (6,4:1); abaixo
disso o miúdo não passa AA.
A exceção é o navegador do herói: ele é a maquete de um site de corretor,
desenhada para parecer com o produto e não com a nossa página — ver o bloco
"o navegador".
O movimento tem um contrato só (ver o bloco "a luz"): o estado padrão de
qualquer coisa animada é o estado FINAL, e o pré-estado (apagado, deslocado)
só existe sob html[data-luz] — o atributo que o inline do põe quando
há JS e o visitante não pediu menos movimento. Sem JS ou com
prefers-reduced-motion, nada daqui embaixo esconde conteúdo. Os dispositivos
novos usam as mesmas quatro funções do ouro; nenhum texto novo fica abaixo
de AA. */
:root {
--noite: #141210; /* o fundo da marca */
--noite-2: #1D1915; /* cartão sobre a noite */
--papel: #FBF7F0;
--branco: #FFFFFF;
--tinta: #141210;
--tinta-media: #2B2823; /* o parágrafo-tese: preto que respira */
--tinta-2: #55524B;
--tinta-3: #6A665D; /* miúdo; 5,2:1 sobre o papel */
--linha: #EAE3D6;
--linha-2: #F1EBDF; /* divisória interna, mais fraca */
--linha-3: #D9D2C6; /* borda de pílula e filete de etapa */
--ouro-claro: #FFD697; /* só sobre a noite */
--ouro: #B97E24; /* grafismo sobre o papel */
--ouro-forte: #8F5F14; /* texto e link sobre o papel */
--ouro-toque: #F3C271; /* hover do botão de ouro */
/* Texto sobre a noite, em três forças. */
--claro: #FBF7F0;
--claro-2: rgba(251, 247, 240, .72);
--claro-3: rgba(251, 247, 240, .58);
--e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px;
--e6: 24px; --e7: 32px; --e8: 40px; --e9: 64px; --e10: 96px;
--r-p: 8px; --r-m: 12px; --r-g: 16px; --r-gg: 20px; --r-ggg: 24px;
--r-redondo: 999px;
--margem: var(--e5);
--secao: var(--e9); /* respiro entre seções; vira --e10 no desktop */
--f-titulo: Lora, Georgia, 'Times New Roman', serif;
--f-corpo: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* As duas curvas do movimento: a da casa (a mesma da inclinação da maquete)
e a do pulo, com overshoot, para as coisas que "pousam". */
--curva: cubic-bezier(.2, .7, .3, 1);
--curva-pulo: cubic-bezier(.34, 1.56, .64, 1);
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--papel);
color: var(--tinta);
font-family: var(--f-corpo);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--ouro-forte); text-underline-offset: 3px; }
a:hover { color: var(--ouro); }
:focus-visible { outline: 2px solid var(--ouro-forte); outline-offset: 3px; border-radius: 2px; }
.capa :focus-visible { outline-color: var(--ouro-claro); }
/* ------------------------------------------------------------- estrutura */
.coluna { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 var(--margem); }
.secao { padding-top: var(--secao); }
.chapeu {
font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: var(--ouro-forte);
}
.btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: 56px; padding: 0 var(--e7);
border: 0; border-radius: var(--r-redondo);
background: var(--ouro-claro); color: var(--noite);
font-family: var(--f-corpo); font-size: 17px; font-weight: 800;
text-decoration: none; cursor: pointer; text-align: center;
}
.btn:hover { background: var(--ouro-toque); color: var(--noite); }
.btn:active { transform: translateY(1px); }
.btn-pequeno { min-height: 40px; padding: 0 var(--e5); font-size: 14px; font-weight: 700; }
.btn-tinta { background: var(--noite); color: var(--claro); }
.btn-tinta:hover { background: var(--tinta-media); color: var(--claro); }
.micro { font-size: 14px; color: var(--tinta-3); }
/* Legenda de figura sobre o papel (a .legenda vive na capa, em tom claro). */
.legenda-papel { margin-top: var(--e5); max-width: 46ch; margin-inline: auto; text-align: center; font-size: 13px; color: var(--tinta-3); }
/* ------------------------------------------------------------------ a luz */
/* O contrato da revelação: quem carrega [data-revela] acende sozinho ao entrar
em cena; num [data-revela-filhos] quem acende são os filhos, em cascata (o
JS escalona o transition-delay). O estado padrão é o final — o pré-estado só
existe sob html[data-luz] e antes do [data-aceso] que o script põe. */
html[data-luz] [data-revela],
html[data-luz] [data-revela-filhos] > * {
transition: opacity .55s var(--curva), transform .55s var(--curva);
}
html[data-luz] [data-revela]:not([data-aceso]),
html[data-luz] [data-revela-filhos]:not([data-aceso]) > * {
opacity: 0; transform: translateY(14px);
}
/* As ilhas escuras acendem um halo quando entram em cena — a mesma luz dos
halos da capa, agora respondendo ao scroll. */
.preco-bloco, .fluxo-marca { position: relative; overflow: hidden; }
.preco-bloco::after, .fluxo-marca::after {
content: ''; position: absolute; top: -160px; right: -120px;
width: 440px; height: 440px; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgba(255, 214, 151, .16) 0%, transparent 65%);
opacity: .5; transition: opacity 1.2s var(--curva);
}
html[data-luz] .preco-bloco:not([data-aceso])::after,
html[data-luz] .fluxos:not([data-aceso]) .fluxo-marca::after { opacity: 0; }
/* Cartões respondem ao ponteiro com a gramática da casa: borda, não sombra. */
.passo, .fluxo, .combo {
transition: transform .25s var(--curva), border-color .25s var(--curva);
}
.passo:hover, .combo:hover { transform: translateY(-2px); border-color: var(--ouro); }
.fluxo-hoje:hover { transform: translateY(-2px); border-color: var(--ouro); }
.fluxo-marca:hover { transform: translateY(-2px); }
/* ------------------------------------------------------------------ capa */
/* A única faixa escura do topo. Os dois halos são luz de fundo: ficam presos
pelo overflow da faixa e nunca recebem clique. */
.capa { position: relative; overflow: hidden; background: var(--noite); color: var(--claro); }
.capa::before, .capa::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.capa::before {
top: -220px; right: -160px; width: 720px; height: 720px;
background: radial-gradient(circle, rgba(255, 214, 151, .14) 0%, rgba(255, 214, 151, .05) 45%, transparent 70%);
}
.capa::after {
bottom: -260px; left: -200px; width: 560px; height: 560px;
background: radial-gradient(circle, rgba(185, 126, 36, .10) 0%, transparent 65%);
}
.capa .coluna { position: relative; }
.topo { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--e4); }
.topo-logo { height: 30px; width: auto; }
.topo-links { display: flex; align-items: center; gap: var(--e4); }
.topo-links a { color: var(--claro-2); text-decoration: none; font-size: 14px; font-weight: 600; }
.topo-links a:hover { color: var(--claro); }
/* O convite ao produto irmão é o primeiro a sair quando a tela aperta: ele
volta inteiro, com preço, na tira de combo lá embaixo. */
.topo-irmao { display: none; }
/* "Preços" também espera a tela alargar: no celular o espaço do topo é do
"Entrar", e a seção de preço chega rolando de qualquer jeito. */
.topo-precos { display: none; }
/* No celular o botão do topo também sai: o CTA grande do herói está logo
abaixo, e o que precisa sobrar aqui em cima é o "Entrar" do cliente. */
.topo-cta { display: none; }
.topo-links .btn { color: var(--noite); }
/* O topo solto: quando a capa sai de vista, a barra volta flutuando — com o
CTA junto, inclusive no celular. O padding-top na capa devolve a altura que
a barra levou ao sair do fluxo; como isso só acontece com a capa já fora da
tela, nada visível se move. */
body[data-topo-solto] .topo {
position: fixed; inset: 0 0 auto; z-index: 10; min-height: 64px;
padding-inline: max(var(--margem), calc((100% - 1140px) / 2 + var(--margem)));
background: rgba(20, 18, 16, .94);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(255, 214, 151, .16);
animation: descer .3s var(--curva);
}
body[data-topo-solto] .capa { padding-top: 76px; }
body[data-topo-solto] .topo-logo { height: 28px; }
body[data-topo-solto] .topo-cta { display: inline-flex; }
@keyframes descer { from { transform: translateY(-100%); } }
/* ----------------------------------------------------------------- herói */
.heroi { padding: var(--e8) 0 var(--e9); }
.heroi .chapeu { color: var(--ouro-claro); }
.titulo {
margin-top: var(--e5);
font-size: clamp(36px, 9.4vw, 48px); line-height: 1.06; letter-spacing: -.02em;
text-wrap: balance;
}
.olho { margin-top: var(--e6); max-width: 44ch; font-size: 17px; color: var(--claro-2); }
.acoes { margin-top: var(--e7); display: flex; align-items: center; gap: var(--e6); flex-wrap: wrap; }
.acoes .preco { font-size: 14px; color: var(--claro-3); }
/* ------------------------------------------------------------ o navegador */
/* A maquete é o produto na vitrine: o site de um corretor, com o nome e o CRECI
dele na barra e o WhatsApp dele no pé — a promessa da página inteira em um
objeto só. É enfeite declarado (`aria-hidden`), e quem conta o que está ali é
a legenda embaixo, em texto de verdade.
Ela mora numa caixa própria para carregar a inclinação sem embaralhar o
conteúdo: 1,5° dá o ar de "coisa em cima da mesa" sem borrar o texto miúdo.
No celular nasce reta — ali a coluna é estreita e a diagonal só custaria as
quinas, cortadas pela margem. */
.vitrine { margin: 0; }
.vitrine-caixa { position: relative; width: 100%; max-width: 460px; margin: 0 auto; }
.navegador {
background: var(--papel); color: var(--tinta);
border-radius: 14px; overflow: hidden;
box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.nav-barra {
display: flex; align-items: center; gap: 6px;
padding: 10px 14px; border-bottom: 1px solid var(--linha); background: var(--branco);
}
.nav-barra i { width: 9px; height: 9px; border-radius: 50%; background: #E4DDD0; }
.nav-url {
margin-left: 10px; font-size: 11px; color: var(--tinta-3);
background: #F4EFE6; border-radius: 6px; padding: 2px 10px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-corpo { padding: var(--e5) var(--e5) var(--e4); }
.nav-cabeca { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); }
.nav-quem { font-family: var(--f-titulo); font-size: 15px; font-weight: 600; }
.nav-quem .nav-creci { font-family: var(--f-corpo); font-weight: 400; font-size: 11.5px; color: var(--ouro-forte); }
/* O menu do site do corretor só aparece quando há largura: no celular ele
viraria uma linha de letra ilegível dentro de uma maquete já pequena. */
.nav-menu { display: none; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.nav-grade { margin-top: var(--e4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.imovel { border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; background: var(--branco); }
.imovel-foto { position: relative; }
/* `height: auto` é obrigatório: os atributos width//height do ![]()
entram como
height:333px e ganhariam do aspect-ratio, esticando a maquete inteira. As
fotos são 3:2 e o cartão pede 4:3 — o `cover` faz o corte. */
.imovel-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #EFE7D8; }
.imovel-foto .selo {
position: absolute; left: 6px; bottom: 6px;
font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
background: rgba(255, 255, 255, .92); border-radius: var(--r-redondo); padding: 2px 7px;
}
.imovel-corpo { padding: 8px 9px 10px; }
.imovel-corpo b { display: block; font-size: 12px; letter-spacing: -.01em; }
.imovel-corpo p { margin-top: 2px; font-size: 10px; line-height: 1.35; color: var(--tinta-2); }
.nav-zap { margin-top: var(--e3); display: flex; justify-content: flex-end; }
.nav-zap span {
display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--e4);
border-radius: var(--r-redondo); background: var(--noite); color: var(--claro);
font-size: 11.5px; font-weight: 700;
}
.legenda { margin-top: var(--e5); max-width: 46ch; margin-inline: auto; text-align: center; font-size: 13px; color: var(--claro-3); }
/* ---------------------------------------------------------- o nascimento */
/* Com luz, a maquete se monta ao carregar: o script digita a URL, e ao marcar
[data-nasceu] o CSS assume — o cabeçalho acende, os três cartões sobem em
cascata, a pílula de WhatsApp pula por último. A largura da pílula da URL é
do flex, não do texto, para nada pulsar durante a digitação. */
.nav-url { flex: 1; min-width: 0; }
.nav-cabeca, .imovel {
transition: opacity .5s var(--curva), transform .5s var(--curva);
}
html[data-luz] .vitrine:not([data-nasceu]) .nav-cabeca,
html[data-luz] .vitrine:not([data-nasceu]) .imovel {
opacity: 0; transform: translateY(8px) scale(.98);
}
html[data-luz] .vitrine:not([data-nasceu]) .nav-zap span { opacity: 0; }
/* A URL fica invisível só até o script começar a digitar (data-nascendo). */
html[data-luz] .vitrine:not([data-nasceu]):not([data-nascendo]) .nav-url { color: transparent; }
.vitrine[data-nasceu] .imovel:nth-child(1) { transition-delay: .15s; }
.vitrine[data-nasceu] .imovel:nth-child(2) { transition-delay: .3s; }
.vitrine[data-nasceu] .imovel:nth-child(3) { transition-delay: .45s; }
html[data-luz] .vitrine[data-nasceu] .nav-zap span { animation: pular .5s var(--curva-pulo) .75s backwards; }
/* Sem frame final de propósito: o pulo termina no estilo-base do elemento —
assim o selo do preço, que vive rodado (-3°), pousa já torto. */
@keyframes pular {
from { opacity: 0; transform: translateY(6px) scale(.9); }
}
/* ------------------------------------------------------------ o provador */
/* Sem JS o form não funciona, então fica invisível — mas segura a própria
altura, para a capa não mudar de tamanho entre visitas com e sem script. */
.provador { visibility: hidden; margin: var(--e6) auto 0; max-width: 340px; min-height: 92px; text-align: center; }
html[data-js] .provador { visibility: visible; }
.provador-rotulo {
display: block; font-size: 12px; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: var(--ouro-claro);
}
.provador input {
margin-top: var(--e3); width: 100%; min-height: 44px; padding: 0 var(--e5);
border: 1px solid rgba(251, 247, 240, .25); border-radius: var(--r-redondo);
background: rgba(251, 247, 240, .07); color: var(--claro);
font-family: var(--f-corpo); font-size: 15px; text-align: center;
transition: border-color .25s var(--curva), background .25s var(--curva);
}
.provador input::placeholder { color: var(--claro-3); }
.provador input:focus { outline: none; border-color: var(--ouro-claro); background: rgba(251, 247, 240, .1); }
.provador-nota { margin-top: var(--e2); font-size: 11.5px; color: var(--claro-3); }
/* O brilho de confirmação nos pontos da maquete que o nome tocou. */
[data-vitrine] { border-radius: 4px; transition: background .4s var(--curva); }
html[data-luz] [data-vitrine][data-trocado] { background: rgba(255, 214, 151, .45); transition: none; }
/* -------------------------------------------------------- o canal próprio */
.titulo-secao { font-size: clamp(28px, 6.6vw, 40px); line-height: 1.15; }
.chapeu + .titulo-secao { margin-top: var(--e4); }
.canal .titulo-secao { max-width: 24ch; }
.subtitulo { margin-top: var(--e5); max-width: 62ch; font-size: 17px; color: var(--tinta-2); }
/* Os dois caminhos lado a lado — o de hoje em cartão claro, o nosso na noite.
O contraste entre os dois cartões É o argumento; por isso o segundo é o
único bloco escuro da seção. */
.fluxos { margin-top: var(--e8); display: grid; gap: var(--e6); }
.fluxo { border-radius: var(--r-g); padding: var(--e7); }
.fluxo b { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.fluxo ol { margin: var(--e5) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--e3); font-size: 15.5px; }
/* A seta entre os passos é grafismo puro: nasce do CSS para não virar item de
lista para quem lê com leitor de tela. */
.fluxo li + li::before { content: '↓'; display: block; margin-bottom: var(--e3); }
.fluxo em { font-style: italic; }
.fluxo-hoje { border: 1px solid var(--linha); background: var(--branco); }
.fluxo-hoje b { color: var(--tinta-3); }
/* Cinza próprio da seta: --linha-3 é borda e some como grafismo solto. */
.fluxo-hoje li + li::before { color: #B0AA9E; }
.fluxo-hoje .virada { font-weight: 700; }
.fluxo-hoje .fim { color: var(--tinta-3); }
.fluxo-marca { background: var(--noite); color: var(--claro); }
.fluxo-marca b { color: var(--ouro-claro); }
.fluxo-marca li + li::before { color: rgba(255, 214, 151, .5); }
.fluxo-marca .virada { font-weight: 700; color: var(--ouro-claro); }
/* A ignição: com luz, os passos dos dois cartões acendem em sequência quando a
seção entra em cena — o mesmo compasso nos dois lados, para ninguém sair
perdendo. O leque ↓ ↓ ↓ do último passo do caminho coletivo é grafismo
permanente: a distribuição ramifica, e é só isso que ele diz. */
.fluxo li { transition: opacity .5s var(--curva); }
html[data-luz] .fluxos:not([data-aceso]) .fluxo li { opacity: .15; }
.fluxos[data-aceso] .fluxo li:nth-child(2) { transition-delay: .45s; }
.fluxos[data-aceso] .fluxo li:nth-child(3) { transition-delay: .9s; }
.fluxos[data-aceso] .fluxo li:nth-child(4) { transition-delay: 1.35s; }
.fluxo-hoje .fim::before { content: '↓ ↓ ↓'; letter-spacing: .5em; }
/* A virada do caminho Be Visible brilha: um glow atrás do texto, que pulsa duas
vezes quando a seção acende e repousa aceso. O z-index: 0 no li cria o
contexto que deixa o ::after ficar atrás do texto sem sumir atrás do fundo
do cartão. */
.fluxo-marca .virada { position: relative; z-index: 0; }
.fluxo-marca .virada::after {
content: ''; position: absolute; inset: -10px -18px; z-index: -1;
border-radius: var(--r-g); pointer-events: none;
background: radial-gradient(ellipse at 30% 50%, rgba(255, 214, 151, .22) 0%, transparent 70%);
opacity: .35;
}
html[data-luz] .fluxos[data-aceso] .virada::after { animation: pulsar 1.1s var(--curva) 1.8s 2; }
@keyframes pulsar {
0%, 100% { opacity: .35; }
50% { opacity: 1; }
}
.tese { margin-top: var(--e8); max-width: 60ch; font-size: 18px; color: var(--tinta-media); }
.tese strong { font-weight: 700; }
/* --------------------------------------------------------- como funciona */
.passos { margin-top: var(--e8); display: grid; gap: var(--e6); }
.passo { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-g); padding: var(--e7); }
.passo b { font-family: var(--f-titulo); font-size: 36px; font-weight: 600; color: var(--ouro); line-height: 1; }
.passo h3 { margin-top: var(--e3); font-family: var(--f-corpo); font-size: 17.5px; font-weight: 700; letter-spacing: 0; }
.passo p { margin-top: var(--e2); font-size: 14.5px; color: var(--tinta-2); }
/* ------------------------------------------------- a conversa (whatsapp) */
/* O passo 4 encenado: o lead chegando no WhatsApp do corretor, com o imóvel
junto — o mesmo apartamento do terceiro cartão da vitrine. Como no post do
herói da irmã, aqui dentro valem as cores do WhatsApp, não as nossas. Os
balões ocupam o próprio espaço desde o início (só opacity/transform animam);
os pontinhos de "digitando" são absolutos e não reservam nada. */
.conversa { margin: var(--e8) auto 0; max-width: 400px; }
.zap {
border-radius: var(--r-g); overflow: hidden;
background: #EFEAE2; color: #111B21;
border: 1px solid var(--linha);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size: 14px; line-height: 1.45;
}
.zap-topo { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #F0F2F5; border-bottom: 1px solid #E4E0DB; }
.zap-avatar {
width: 34px; height: 34px; flex: none; border-radius: 50%;
background: var(--noite); color: var(--ouro-claro);
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700;
}
.zap-quem { display: flex; flex-direction: column; line-height: 1.25; }
.zap-quem b { font-size: 14px; font-weight: 600; }
.zap-quem span { font-size: 11.5px; color: #667781; }
.zap-corpo { position: relative; padding: var(--e5) var(--e4) var(--e5); display: flex; flex-direction: column; gap: var(--e3); }
.balao { position: relative; max-width: 86%; border-radius: 10px; padding: 8px 10px 20px; box-shadow: 0 1px 1px rgba(17, 27, 33, .1); }
.balao p { font-size: 13.5px; }
.balao-lead { align-self: flex-start; background: #FFFFFF; border-top-left-radius: 2px; }
.balao-resposta { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 2px; }
.balao-hora { position: absolute; right: 9px; bottom: 5px; font-size: 10.5px; color: #667781; white-space: nowrap; }
.balao-visto { font-style: normal; color: #53BDEB; letter-spacing: -.08em; }
/* O link-preview do site do corretor dentro do balão — a prova de onde o
contato veio. */
.balao-preview { display: flex; gap: 9px; margin-bottom: 7px; padding: 7px; border-radius: 7px; background: #F5F6F6; }
.balao-preview img { width: 62px; height: 52px; object-fit: cover; border-radius: 5px; flex: none; }
.balao-preview-texto { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.balao-preview-texto b { font-size: 12.5px; line-height: 1.3; }
.balao-preview-texto i { font-style: normal; font-size: 11px; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A coreografia: pontinhos digitando (1,3s), o balão da lead, a resposta.
Estado final estático: os dois balões postos, pontinhos inexistentes. */
.balao-digitando {
position: absolute; top: var(--e5); left: var(--e4);
display: inline-flex; gap: 4px; align-items: center;
background: #FFFFFF; border-radius: 10px; border-top-left-radius: 2px;
padding: 12px 12px; box-shadow: 0 1px 1px rgba(17, 27, 33, .1);
opacity: 0; pointer-events: none;
}
.balao-digitando i { width: 7px; height: 7px; border-radius: 50%; background: #8696A0; }
html[data-luz] .conversa[data-aceso] .balao-digitando { animation: digitando 1.3s var(--curva) forwards; }
html[data-luz] .conversa[data-aceso] .balao-digitando i { animation: quicar 1s ease-in-out 2; }
html[data-luz] .conversa[data-aceso] .balao-digitando i:nth-child(2) { animation-delay: .15s; }
html[data-luz] .conversa[data-aceso] .balao-digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes digitando {
0%, 8% { opacity: 0; }
12%, 88% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes quicar {
0%, 100% { transform: none; }
35% { transform: translateY(-3px); }
}
.balao-lead, .balao-resposta { transition: opacity .4s var(--curva-pulo), transform .4s var(--curva-pulo); }
html[data-luz] .conversa:not([data-aceso]) .balao-lead,
html[data-luz] .conversa:not([data-aceso]) .balao-resposta { opacity: 0; transform: translateY(8px) scale(.96); }
.conversa[data-aceso] .balao-lead { transition-delay: 1.3s; }
.conversa[data-aceso] .balao-resposta { transition-delay: 2.4s; }
/* A ressalva do "nada escondido" fecha a seção em voz baixa, de propósito. */
.nota { margin-top: var(--e8); max-width: 66ch; font-size: 14.5px; color: var(--tinta-3); }
.nota em { font-style: italic; }
/* ------------------------------------------------------- o campo de luz */
/* Irmão do campo da landing do Be Visible Instagram — mesma estética, e a diferença é a
ideia: lá a luz se espalha de você para fora; aqui ela VOLTA. Uma visitante
chega, guarda o endereço, volta meses depois pelo mesmo caminho e traz
outros. Por isso os fios se desenham de fora para dentro (no markup eles
nascem no ponto e terminam na ponta do braço da marca) e o desfecho é uma
pessoa com nome falando com você, não uma metáfora.
É a única faixa escura desta metade da página — o lugar que era da conta,
porque é o argumento que precisa de silêncio em volta.
O nome da seção é .campo-luz, e nunca .campo: `.campo` é o par rótulo+input
dos formulários, definido em publico.css e painel.css, e as telas públicas
(/entrar, o cadastro, o plano) carregam este arquivo junto com aquele. Com o
nome curto, a regra de fundo daqui pintava cada campo de formulário de preto
de ponta a ponta. Nada neste arquivo pode usar um nome que os formulários já
usam.
Três decisões seguram a cena inteira; mexer nelas é refazê-la:
1. Não há moldura. A caixa é só a medida — quadrada, igual ao viewBox, para
uma unidade do SVG valer sempre 1/120 dela. O céu se dissolve na noite por
uma máscara radial: sem borda e sem cartão, o campo não tem fim visível.
A medida quadrada é também o que deixa o recado da Camila (HTML, fora do
SVG) pousar em cima do ponto dela, por --mx/--my.
2. A luz tem uma causa. Uma onda sai de você a cada ciclo — é o seu endereço
circulando — e cada ponto acende quando ela passa por cima, com o atraso
do seu próprio --d. Os pontos não "aparecem": são alcançados. O estágio
manda só em até onde a luz chega (anel 1, 2, 3); a onda manda no ritmo.
3. Você é a marca da Be Visible desenhada em oito braços, e aqui ela nasce inteira
e fica — o site está no ar desde o primeiro dia, e nada nesta cena pode
sugerir que ele se monta aos poucos (é o oposto do que a página promete).
Na landing irmã a marca se abre ato a ato porque lá o que se constrói é a
presença; aqui o que cresce é o alcance dela e o número de caminhos que
voltam. Os fios chegam na ponta dos oito braços — a volta desemboca na
marca, não num ponto qualquer.
O contrato da luz vale inteiro: o estado base de todo seletor abaixo é o
ESTÁGIO 4. Os estágios 1 a 3 são regressões declaradas só sob
html[data-luz] .campo-corpo[data-estagio="n"], e o landing.js só escreve o
atributo quando há luz. As animações contínuas (a onda, a faísca, o eco do
ato) são acréscimo pelo mesmo caminho: nascem desligadas e só existem sob
html[data-luz]. Sem JS, sem data-luz ou com prefers-reduced-motion a cena
nasce completa e parada, com o céu inteiro aceso e o recado na tela.
Cuidado ao mexer: o palco é sticky, então nenhum ancestral dele pode ganhar
overflow: hidden — o halo daqui é preso por ::before com inset, nunca
cortando o pai. */
.campo-luz {
position: relative;
margin-top: var(--secao);
padding: var(--secao) 0;
background: var(--noite);
color: var(--claro);
}
.campo-luz::before {
content: ''; position: absolute; inset: 0; overflow: hidden; pointer-events: none;
background:
radial-gradient(620px 420px at 78% 8%, rgba(255, 214, 151, .10) 0%, transparent 70%),
radial-gradient(520px 380px at 12% 92%, rgba(185, 126, 36, .10) 0%, transparent 70%);
}
.campo-luz > .coluna { position: relative; }
/* ---- o céu de fundo: o campo não acaba na caixa
Uma segunda camada de pontos, esparsa e fraca, ocupando a seção inteira. O
palco vira o miolo aceso de uma coisa maior, e o quadrado some de vez.
Dois cuidados que não são estilo, são mecânica:
1. `overflow: clip`, nunca `hidden`. O hidden faria desta caixa um contêiner
de rolagem, e a camada sticky lá dentro passaria a grudar NELA — ou seja,
pararia de grudar. O clip recorta sem virar scroller.
2. A camada de estrelas é sticky em 100vh: enquanto os atos passam, elas
ficam paradas na tela, no mesmo compasso do palco. É esse descolamento
entre o que anda (o texto) e o que fica (o céu) que dá a profundidade.
Fica na camada de baixo, antes da .coluna na ordem do DOM, e não intercepta
ponteiro nenhum. */
.campo-fundo {
position: absolute; inset: 0; z-index: 0;
overflow: clip; pointer-events: none;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.campo-estrelas { position: sticky; top: 0; height: 100vh; }
.campo-estrelas span {
position: absolute; left: var(--x); top: var(--y);
width: var(--r); height: var(--r); margin: calc(var(--r) / -2);
border-radius: 50%; background: var(--ouro-claro); opacity: var(--o);
}
.campo-estrelas span[data-viva] { box-shadow: 0 0 9px 1px rgba(255, 214, 151, .3); }
/* Cada estrela respira no seu tempo (o atraso é negativo, para nenhuma esperar
a primeira volta) — e o topo da respiração é o estado base, sem luz. */
@keyframes campo-cintila {
from { opacity: calc(var(--o) * .4); }
to { opacity: var(--o); }
}
.campo-abre { max-width: 60ch; }
.campo-abre .chapeu { color: var(--ouro-claro); }
.campo-abre .chapeu i { color: var(--ouro-claro); }
.campo-abre h2 { margin-top: var(--e4); font-size: clamp(26px, 6.2vw, 36px); line-height: 1.18; }
.campo-abre > p { margin-top: var(--e5); font-size: 17px; color: var(--claro-2); }
.campo-corpo { margin-top: var(--e8); display: grid; gap: var(--e7); align-items: start; }
/* ---- o palco (sticky)
No celular ele gruda no alto e os atos correm por baixo — daí o fundo opaco
e o z-index, que o mantêm acima do texto que sobe. O 64px é a altura da
barra do topo quando ela volta flutuando (z-index 10, sempre por cima). */
/* O fundo opaco sangra até a borda da tela (margem negativa devolvida em
padding): sem isso ele para na coluna e sobram duas faixas de céu de fundo
ao lado dele, que leem como emenda. No desktop nada disso existe — lá o
palco não tem fundo. */
.campo-palco {
margin: 0 calc(var(--margem) * -1); position: sticky; top: 64px; z-index: 2;
padding: 0 var(--margem) var(--e4); background: var(--noite);
}
/* A saia do palco: sem ela o ato que sobe é decepado no fio da borda opaca.
Aqui ele se apaga. No desktop nada corre por baixo e a saia some. */
.campo-palco::after {
content: ''; position: absolute; left: 0; right: 0; top: 100%; height: var(--e8);
background: linear-gradient(180deg, var(--noite) 0%, rgba(20, 18, 16, 0) 100%);
pointer-events: none;
}
/* A caixa é quadrada porque o viewBox é: só assim 1 unidade do SVG = 1/120 da
caixa, que é a régua que o recado da Camila usa. O `width` faz o quadrado
(aspect-ratio + max-height não faria: a altura seria limitada e a largura
não). Sem borda e sem fundo de cartão — o pouco de brilho é o do próprio
campo, e a máscara dissolve as beiradas na noite. */
.campo-ceu {
position: relative;
width: min(100%, 46vh);
aspect-ratio: 1 / 1;
margin-inline: auto;
background: radial-gradient(circle at 50% 50%, rgba(255, 214, 151, .055) 0%, transparent 62%);
overflow: hidden;
}
.campo-ceu svg {
width: 100%; height: 100%; display: block;
-webkit-mask-image: radial-gradient(78% 78% at 50% 50%, #000 0 60%, rgba(0, 0, 0, .55) 82%, transparent 100%);
mask-image: radial-gradient(78% 78% at 50% 50%, #000 0 60%, rgba(0, 0, 0, .55) 82%, transparent 100%);
}
/* ---- a onda: o seu endereço circulando
O raio é um scale() (o `r` não é animável em todo motor) sobre um círculo de
raio 1, com vector-effect para o traço não engordar com ele. O ciclo e o
alcance (scale 2 → 85, que é o canto do viewBox) conversam com o atraso de
cada ponto, que é o --d dele vezes o ciclo: no instante em que a onda cruza o
ponto, é ele que acende. Mexeu num, mexa no outro. */
.campo-corpo { --onda-ciclo: 6s; }
.ceu-onda circle {
fill: none; stroke: var(--ouro-claro); stroke-width: 1.6;
transform-origin: var(--centro); opacity: 0;
}
@keyframes campo-onda {
0% { transform: scale(2); opacity: 0; }
7% { opacity: .20; }
70% { opacity: .09; }
100% { transform: scale(85); opacity: 0; }
}
/* ---- o céu
A opacidade do estágio mora no grupo do anel e o brilho da onda no ponto: as
duas se multiplicam, em vez de a animação atropelar a transição. O atraso por
anel é só cortesia — a luz chega antes perto e depois longe. */
.ceu-pontos g { transition: opacity .8s var(--curva); }
.ceu-pontos g[data-anel="1"] { opacity: .95; }
.ceu-pontos g[data-anel="2"] { opacity: .74; transition-delay: .12s; }
.ceu-pontos g[data-anel="3"] { opacity: .48; transition-delay: .26s; }
.ceu-pontos circle { fill: var(--ouro-claro); }
/* O ponto acende no clarão e volta para um ouro de brasa até a onda seguinte. */
@keyframes campo-acende {
0% { fill: #FFF6E6; }
14% { fill: var(--ouro-claro); }
46%, 100% { fill: #BC9257; }
}
/* O traço se desenha por dashoffset, e os números são 1 porque o carrega
pathLength="1" — com ele o dash passa a falar em fração da linha, não em
comprimento. Nada de vector-effect: non-scaling-stroke mede o dasharray em
pixels de tela e briga com o pathLength, e o fio sai tracejado. Por isso a
espessura também é em unidade de viewBox (1 unidade ≈ 4px na tela). */
.ceu-fios line, .visita-fio {
stroke: var(--ouro-claro); stroke-width: .3; opacity: .45;
stroke-dasharray: 1; stroke-dashoffset: 0;
transition: stroke-dashoffset 1.1s var(--curva), opacity .7s var(--curva);
}
/* O começo de cada fio é um indicado: o ponto anônimo ganha um anel em volta
quando o caminho dele até você existe. */
.ceu-conhecidos circle {
fill: none; stroke: var(--ouro-claro); stroke-width: .26; opacity: .3;
transition: opacity .7s var(--curva);
}
/* ---- a Camila: o único ponto do céu com nome */
.visita-fio { opacity: .8; stroke-width: .4; }
.visita-brilho { fill: url(#brilho-visita); }
/* O anel é o "salvo" que se fecha em volta dela, e é o beat do ato 2. */
.visita-anel {
fill: none; stroke: var(--ouro-claro); stroke-width: .34; opacity: .6;
transform-box: fill-box; transform-origin: center;
}
/* O rabicho só existe onde o recado pende do ponto: no celular ele é uma tarja
no pé do campo, e um fio apontando para o nada seria só sujeira. */
.visita-rabo { stroke: var(--ouro-claro); stroke-width: .38; opacity: 0; }
/* Ela é um ponto como os outros — mesmo ouro, quase o mesmo raio. O que a
distingue não é o ponto: é o brilho, o anel e o fio que sai dela. */
.visita-ponto { fill: var(--ouro-claro); }
.visita-brilho, .visita-anel, .visita-rabo, .visita-fio {
transition: opacity .7s var(--curva), stroke-dashoffset 1.1s var(--curva),
transform .5s var(--curva-pulo);
}
/* A faísca corre no mesmo sentido do fio — dela para você. Um dash de 10% da
linha passeando pelo dashoffset; some no fim e espera a volta. */
.visita-faisca {
stroke: #FFF6E6; stroke-width: .75; stroke-linecap: round;
stroke-dasharray: .1 1; stroke-dashoffset: 0; opacity: 0;
}
@keyframes campo-faisca {
0% { stroke-dashoffset: 0; opacity: 0; }
8% { opacity: 1; }
44% { stroke-dashoffset: -1.02; opacity: 1; }
50%, 100% { stroke-dashoffset: -1.02; opacity: 0; }
}
/* ---- você: o halo, a marca em oito braços e o núcleo
O brilho é um gradiente do (um círculo chapado em opacity vira um
disco sujo). A marca usa transform-origin em unidades de viewBox, que é o
default de transform-box em SVG — daí o --centro vir do markup. */
.voce-halo { fill: url(#brilho-voce); transition: opacity .8s var(--curva); }
.voce-marca {
transform-origin: var(--centro);
transition: transform .9s var(--curva-pulo), opacity .9s var(--curva);
}
.voce-marca path {
fill: none; stroke: var(--ouro-claro); stroke-width: .55; stroke-linejoin: round;
}
.voce-nucleo { fill: #FFF6E6; }
@keyframes campo-respira {
0%, 100% { opacity: .74; }
8% { opacity: 1; }
}
/* ---- o recado: onde a cena abstrata vira uma pessoa
Sem backdrop-filter de propósito: sobre a noite ele não acrescenta nada e
custa uma camada composta a mais numa cena que já anima. */
.campo-recado {
position: absolute; left: var(--e3); right: var(--e3); bottom: var(--e3);
padding: var(--e4);
border-radius: var(--r-g);
background: linear-gradient(180deg, #251F19 0%, #1A1613 100%);
border: 1px solid rgba(255, 214, 151, .26);
box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
transition: opacity .6s var(--curva), transform .6s var(--curva-pulo);
}
.recado-quem { display: flex; align-items: center; gap: var(--e2); }
.recado-avatar {
width: 26px; height: 26px; flex: none; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 214, 151, .14); color: var(--ouro-claro);
box-shadow: inset 0 0 0 1px rgba(255, 214, 151, .38);
font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.recado-quem b { font-size: 13.5px; font-weight: 700; color: var(--ouro-claro); }
.recado-quem i { font-style: normal; font-size: 11.5px; color: var(--claro-3); }
.recado-texto { display: block; margin-top: var(--e3); font-size: 14px; line-height: 1.45; color: var(--claro-2); }
/* O endereço que ela guardou, no pé da mensagem: é o link que ela abriu para
voltar, e é a única coisa literal da cena. O provador troca o slug junto com
o da maquete — o site salvo é o de quem está lendo. */
.recado-salvo {
display: block; margin-top: var(--e3); padding-top: var(--e2);
border-top: 1px solid rgba(255, 214, 151, .14);
font-size: 11.5px; color: var(--claro-3);
/* Quebra na palavra inteira, nunca no meio do endereço: "bevisible.com.b / r"
é o tipo de detalhe que denuncia maquete. */
overflow-wrap: break-word;
}
.recado-salvo i { font-style: normal; color: var(--ouro-claro); }
.campo-palco .legenda { margin-top: var(--e5); }
/* ---- os quatro atos (texto de verdade: contam a história sem o céu)
O min-height é o percurso: é ele que dá ao scroll o espaço para atravessar
os quatro estágios enquanto o palco fica parado. Sem fio ligando os atos, de
propósito — uma linha vertical de ponta a ponta nesta altura da tela lê como
divisória de coluna e briga com o palco. Quem dá a sequência são os pontos,
que é o mesmo vocabulário do céu ao lado. */
.campo-atos {
--recuo-topo: 0px; --recuo-pe: 0px;
position: relative; margin: 0; list-style: none; display: grid;
padding: var(--recuo-topo) 0 var(--recuo-pe);
}
.ato {
position: relative; padding-left: var(--e6);
min-height: 30vh; display: flex; flex-direction: column; justify-content: center;
transition: color .45s var(--curva);
}
/* O numeral é o mesmo "01 — 04" que a arte da marca usa no canto: a sequência
dita no vocabulário do próprio produto. Como o é flex-column, o ::before
já entra como primeira linha, acima do rótulo. */
.ato::before {
content: '0' attr(data-n);
font-size: 12px; font-weight: 700; letter-spacing: .2em;
color: var(--claro-3); margin-bottom: var(--e3);
transition: color .45s var(--curva);
}
/* O ato é um dos quatro tempos do argumento, não um item de lista: o corpo
pede o mesmo peso do palco ao lado. Daí o rótulo em serifa grande e o
parágrafo acima do miúdo — a coluna da direita não pode ler como legenda. */
.ato b {
position: relative; display: block;
font-family: var(--f-titulo); font-weight: 600;
font-size: clamp(22px, 5.4vw, 26px); line-height: 1.2;
letter-spacing: -.02em; color: var(--ouro-claro);
transition: color .45s var(--curva);
}
/* O ponto do ato é o mesmo ponto do céu, do lado de fora: pendura no rótulo
(não no , que é flex e centra) para nascer sempre na linha do texto. */
.ato b::before {
content: ''; position: absolute; left: calc(var(--e6) * -1); top: .55em;
width: 8px; height: 8px; border-radius: 50%;
background: var(--ouro-claro);
box-shadow: 0 0 0 4px rgba(255, 214, 151, .14);
transition: opacity .45s var(--curva), box-shadow .45s var(--curva);
}
/* O eco do ato da vez: um anel que sai do ponto no mesmo compasso da onda do
céu, para as duas colunas baterem juntas. É um círculo transparente em cima
do ponto de verdade — quem desenha o anel é o spread do box-shadow, e é por
isso que ele precisa ter tamanho: o spread de uma caixa 0×0 sai quadrado. */
.ato b::after {
content: ''; position: absolute; left: calc(var(--e6) * -1); top: .55em;
width: 8px; height: 8px; border-radius: 50%; pointer-events: none;
}
@keyframes campo-eco {
0% { box-shadow: 0 0 0 0 rgba(255, 214, 151, .45); }
70%, 100% { box-shadow: 0 0 0 11px rgba(255, 214, 151, 0); }
}
.ato p { margin-top: var(--e3); font-size: 16px; line-height: 1.55; color: var(--claro-2); }
/* ---- o fecho: o que fica sendo seu, sem diluir o preço */
.campo-fecho {
margin-top: var(--e8); padding-top: var(--e7);
border-top: 1px solid rgba(255, 214, 151, .16);
max-width: 62ch;
}
.campo-fecho p { font-size: 17px; color: var(--claro-2); }
.campo-fecho strong { color: var(--claro); }
.campo-fecho .campo-pe { margin-top: var(--e3); font-size: 14px; color: var(--claro-3); }
/* ---- as regressões: só com luz, e só antes do estágio 4 */
/* O ato que não é o da vez recua, mas nunca abaixo de AA: o texto fica em
--claro-3 (58%, 6,4:1), nunca em opacity que apagaria o parágrafo junto. */
html[data-luz] .campo-corpo[data-estagio] .ato:not([data-atual]) b { color: var(--claro-3); }
html[data-luz] .campo-corpo[data-estagio] .ato:not([data-atual]) b::before {
opacity: .3; box-shadow: 0 0 0 4px rgba(255, 214, 151, 0);
}
html[data-luz] .campo-corpo[data-estagio] .ato[data-atual]::before { color: var(--ouro-claro); }
html[data-luz] .campo-corpo[data-estagio] .ato[data-atual] b::after {
animation: campo-eco 2.6s var(--curva) infinite;
}
/* Estágio 1 — alguém te encontra: o mercado em volta ainda está no escuro e a
sua marca ainda não alcança ninguém. Quem existe é ela, o ponto que chegou.
A marca fica inteira (ver a decisão 3 lá em cima); o que falta é o alcance. */
html[data-luz] .campo-corpo[data-estagio="1"] .ceu-pontos g { opacity: .09; }
html[data-luz] .campo-corpo[data-estagio="1"] .voce-halo { opacity: 0; }
html[data-luz] .campo-corpo[data-estagio="1"] .voce-marca { transform: scale(.9); opacity: .8; }
/* Estágio 2 — ela guarda o endereço: o anel do "salvo" fecha em volta dela, a
onda começa a sair (dali em diante o endereço circula) e o primeiro anel do
céu acende. */
html[data-luz] .campo-corpo[data-estagio="2"] .ceu-pontos g[data-anel="2"],
html[data-luz] .campo-corpo[data-estagio="2"] .ceu-pontos g[data-anel="3"] { opacity: .09; }
html[data-luz] .campo-corpo[data-estagio="2"] .voce-halo { opacity: .5; }
html[data-luz] .campo-corpo[data-estagio="2"] .voce-marca { transform: scale(.96); opacity: .92; }
/* Estágio 3 — ela volta: a faísca corre pelo fio dela até você e o recado pousa.
A borda do campo ainda não acendeu. */
html[data-luz] .campo-corpo[data-estagio="3"] .ceu-pontos g[data-anel="3"] { opacity: .11; }
html[data-luz] .campo-corpo[data-estagio="3"] .voce-marca { transform: scale(.99); }
/* O caminho dela se desenha de fora para dentro assim que a cena abre — é o ato
1 inteiro —, e vai ganhando força até ela voltar por ele. Keyframe só com
`from`: o destino é o estilo base, como o resto da casa. */
@keyframes fio-chega { from { stroke-dashoffset: 1; opacity: 0; } }
html[data-luz] .campo-corpo[data-estagio="1"] .visita-fio {
opacity: .5; animation: fio-chega 1.4s var(--curva) backwards;
}
html[data-luz] .campo-corpo[data-estagio="2"] .visita-fio { opacity: .62; }
/* O anel do "salvo" só fecha no ato 2 — antes disso ela é só uma visita. */
html[data-luz] .campo-corpo[data-estagio="1"] .visita-anel { opacity: 0; transform: scale(.35); }
/* O brilho e o rabicho vêm com o recado, no ato 3: até ali ela é um ponto com
um fio, e nada mais. */
html[data-luz] .campo-corpo[data-estagio="1"] .visita-brilho,
html[data-luz] .campo-corpo[data-estagio="2"] .visita-brilho,
html[data-luz] .campo-corpo[data-estagio="1"] .visita-rabo,
html[data-luz] .campo-corpo[data-estagio="2"] .visita-rabo { opacity: 0; }
/* Os indicados chegam no ato 4, e o caminho deles é o mesmo dela: nasce no
ponto e termina na sua marca. */
html[data-luz] .campo-corpo[data-estagio="1"] .ceu-fios line,
html[data-luz] .campo-corpo[data-estagio="2"] .ceu-fios line,
html[data-luz] .campo-corpo[data-estagio="3"] .ceu-fios line {
stroke-dashoffset: 1; opacity: 0;
}
html[data-luz] .campo-corpo[data-estagio="1"] .ceu-conhecidos circle,
html[data-luz] .campo-corpo[data-estagio="2"] .ceu-conhecidos circle,
html[data-luz] .campo-corpo[data-estagio="3"] .ceu-conhecidos circle { opacity: 0; }
/* O recado é o desfecho do ato 3: ela volta e o contato chega em você. */
html[data-luz] .campo-corpo[data-estagio="1"] .campo-recado,
html[data-luz] .campo-corpo[data-estagio="2"] .campo-recado {
opacity: 0; transform: translateY(12px);
}
/* ---- o que só existe com luz: a onda, o brilho dos pontos, a faísca
Nada aqui tem estado base — sem data-luz a cena fica no estágio 4 parada, que
é o contrato. A onda começa no ato 2 (antes de alguém guardar, não há
endereço circulando) e o atraso de cada ponto é o tempo que ela leva para
chegar até ele. */
html[data-luz] .campo-corpo[data-estagio="2"] .ceu-onda circle,
html[data-luz] .campo-corpo[data-estagio="3"] .ceu-onda circle,
html[data-luz] .campo-corpo[data-estagio="4"] .ceu-onda circle {
animation: campo-onda var(--onda-ciclo) linear infinite;
}
html[data-luz] .campo-corpo[data-estagio="2"] .ceu-pontos circle,
html[data-luz] .campo-corpo[data-estagio="3"] .ceu-pontos circle,
html[data-luz] .campo-corpo[data-estagio="4"] .ceu-pontos circle,
html[data-luz] .campo-corpo[data-estagio="2"] .visita-ponto,
html[data-luz] .campo-corpo[data-estagio="3"] .visita-ponto,
html[data-luz] .campo-corpo[data-estagio="4"] .visita-ponto {
animation: campo-acende var(--onda-ciclo) linear infinite;
animation-delay: calc(var(--d) * var(--onda-ciclo));
}
html[data-luz] .campo-corpo[data-estagio="3"] .voce-halo,
html[data-luz] .campo-corpo[data-estagio="4"] .voce-halo {
animation: campo-respira var(--onda-ciclo) var(--curva) infinite;
}
/* Linear de propósito: a faísca é um objeto atravessando o fio, e uma curva por
trecho de keyframe a faria acelerar e frear no meio do caminho. */
html[data-luz] .campo-corpo[data-estagio="3"] .visita-faisca,
html[data-luz] .campo-corpo[data-estagio="4"] .visita-faisca {
animation: campo-faisca 4.2s linear infinite;
}
/* As estrelas do fundo não têm estágio: respiram enquanto a seção está na tela,
e só isso. Ficam de fora do bloco de regressões de propósito — elas são o
mundo, não a sua história. */
html[data-luz] .campo-luz[data-cena] .campo-estrelas span {
animation: campo-cintila 7s var(--curva) infinite alternate;
animation-delay: calc(var(--t) * -1);
}
/* E o interruptor: fora da tela, nada disso gira. O data-cena mora na seção e
vem do mesmo observador que liga o medidor de estágio no landing.js.
Especificidade igual à das regras acima, e vem depois — é o que faz este
bloco vencer. */
html[data-luz] .campo-luz:not([data-cena]) .ceu-onda circle,
html[data-luz] .campo-luz:not([data-cena]) .ceu-pontos circle,
html[data-luz] .campo-luz:not([data-cena]) .visita-ponto,
html[data-luz] .campo-luz:not([data-cena]) .visita-faisca,
html[data-luz] .campo-luz:not([data-cena]) .voce-halo,
html[data-luz] .campo-luz:not([data-cena]) .ato[data-atual] b::after { animation: none; }
/* ------------------------------------------------------------- o incluído */
.incluidos h2 { font-size: clamp(24px, 5.6vw, 32px); }
.inclui { margin-top: var(--e6); list-style: none; padding: 0; display: grid; gap: 0 var(--e9); }
.inclui li {
display: flex; gap: var(--e4); align-items: baseline;
padding: var(--e4) 0; border-bottom: 1px solid var(--linha);
font-size: 16px;
}
.inclui li i { font-style: normal; color: var(--ouro); font-weight: 800; }
/* --------------------------------------------------------------- o preço */
.preco-bloco {
background: var(--noite); color: var(--claro); border-radius: var(--r-ggg);
padding: var(--e8) var(--e6);
display: grid; gap: var(--e8); align-items: center;
}
.preco-bloco .chapeu { color: var(--ouro-claro); }
.preco-bloco h2 { margin-top: var(--e4); font-size: clamp(26px, 6.2vw, 36px); line-height: 1.2; }
/* O sublinhado de ouro é o mesmo dispositivo da tese da irmã: a frase que
importa, riscada de luz — sem virar itálico. */
.preco-bloco h2 .pordia { font-style: normal; border-bottom: 3px solid var(--ouro-claro); }
.preco-texto > p { margin-top: var(--e4); max-width: 52ch; font-size: 16px; color: var(--claro-2); }
.preco-cartao {
position: relative;
text-align: center;
background: rgba(255, 214, 151, .08); border: 1px solid rgba(255, 214, 151, .3);
border-radius: var(--r-gg); padding: var(--e8) var(--e6);
}
/* O adesivo do cartão — o mesmo dispositivo do "Post automático" da irmã.
Com luz ele pousa (pula) quando o bloco acende. */
.selo-dia {
position: absolute; z-index: 2; top: -13px; right: -10px;
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 15px; border-radius: var(--r-redondo);
background: var(--ouro-claro); color: var(--noite);
font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
white-space: nowrap; transform: rotate(-3deg);
box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
.selo-dia i { font-style: normal; font-size: 13px; line-height: 0; }
html[data-luz] .preco-bloco[data-aceso] .selo-dia { animation: pular .5s var(--curva-pulo) .6s backwards; }
.preco-cartao .plano { font-size: 14px; color: var(--claro-3); }
.preco-cartao .valor { margin-top: var(--e2); font-family: var(--f-titulo); color: var(--ouro-claro); white-space: nowrap; }
.preco-cartao .cifrao { font-size: 22px; vertical-align: 22px; }
.preco-cartao .inteiro { font-size: 64px; font-weight: 600; letter-spacing: -.03em; }
.preco-cartao .centavos { font-size: 26px; }
.preco-cartao .mes { font-size: 16px; color: var(--claro-3); }
.preco-cartao .preco-parcela { margin-top: var(--e2); font-size: 14px; color: var(--claro-2); }
.preco-cartao .btn { margin-top: var(--e6); }
.preco-cartao .micro { margin-top: var(--e4); font-size: 13px; color: var(--claro-3); }
/* A alternativa sem compromisso: presente, e menor que o plano que queremos
vender. Quem só quer o mês avulso encontra; quem não procurava, não tropeça. */
.preco-cartao .preco-alt {
margin-top: var(--e5); padding-top: var(--e5);
border-top: 1px solid rgba(255, 214, 151, .22);
font-size: 13.5px; line-height: 1.6; color: var(--claro-3);
}
.preco-cartao .preco-alt b { color: var(--claro-2); font-weight: 700; }
.preco-cartao .preco-alt a { color: inherit; }
/* ----------------------------------------------------------------- o faq */
.faq { max-width: 820px; }
.faq h2 { font-size: clamp(26px, 6.2vw, 36px); }
.faq-lista { margin-top: var(--e7); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
display: flex; justify-content: space-between; align-items: center; gap: var(--e4);
padding: var(--e5) 0; font-size: 17px; font-weight: 700;
list-style: none; cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i {
flex: none; font-style: normal; font-size: 20px; font-weight: 400; color: var(--ouro);
transition: transform .2s;
}
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { padding: 0 0 var(--e5); max-width: 64ch; font-size: 15.5px; color: var(--tinta-2); }
/* --------------------------------------------------------------- o fecho */
.fecho h2 { font-size: clamp(30px, 7.4vw, 44px); line-height: 1.12; max-width: 24ch; }
.fecho .acoes { margin-top: var(--e7); gap: var(--e6); }
.fecho .acoes .micro { max-width: 34ch; }
/* A saída para quem não quer se cadastrar sem falar com alguém. Discreta de
propósito: o caminho principal é criar a conta. */
.link-conversa {
font-size: 15px; font-weight: 600; color: var(--tinta-media);
text-decoration: underline; text-underline-offset: 4px;
text-decoration-color: var(--linha-forte, var(--tinta-3));
}
.link-conversa:hover { color: var(--noite); text-decoration-color: currentColor; }
.combo {
margin-top: var(--e9);
border: 1px solid var(--linha); background: var(--branco); border-radius: var(--r-g);
padding: var(--e6);
display: flex; justify-content: space-between; align-items: center; gap: var(--e6); flex-wrap: wrap;
}
.combo p { font-size: 15.5px; color: var(--tinta-2); max-width: 58ch; }
.combo strong { color: var(--tinta); }
.combo em { font-style: normal; font-weight: 700; color: var(--ouro-forte); }
.combo a { flex: none; font-size: 15px; font-weight: 700; color: var(--tinta); text-decoration: none; }
.combo a:hover { color: var(--ouro-forte); text-decoration: underline; }
.rodape {
margin-top: var(--e9); padding: var(--e7) 0 var(--e9);
border-top: 1px solid var(--linha);
display: flex; justify-content: space-between; align-items: center; gap: var(--e4) var(--e6); flex-wrap: wrap;
}
/* A versão "preto" do logo: a palavra BE VISIBLE é preta e o cone é o
ouro da marca — sobre o creme ele quase some em tamanho pequeno, daí
os 34px do desenho em vez de menos. */
.rodape-logo { height: 34px; width: auto; }
.rodape p { font-size: 13px; color: var(--tinta-3); }
/* A linha dos documentos ocupa a largura inteira e fecha o rodapé embaixo, em
vez de disputar espaço com o logo e os links do produto. */
.rodape-legais { flex-basis: 100%; }
.rodape a { color: var(--tinta-2); text-decoration: none; }
.rodape a:hover { color: var(--ouro-forte); text-decoration: underline; }
/* -------------------------------------------------------------- respostas */
@media (min-width: 600px) {
:root { --margem: var(--e7); }
/* A costura: com largura, a noite vira objeto sobre o papel. */
.capa { border-radius: 0 0 var(--r-ggg) var(--r-ggg); }
.topo-logo { height: 38px; }
.topo-cta { display: inline-flex; }
.topo-precos { display: inline; }
.subtitulo { font-size: 18px; }
.vitrine-caixa { max-width: 520px; }
.nav-menu { display: inline; }
.nav-corpo { padding: var(--e6) var(--e6) var(--e5); }
.imovel-corpo b { font-size: 13px; }
.imovel-corpo p { font-size: 10.5px; }
.fluxos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e7); }
.passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inclui { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preco-bloco { padding: var(--e9) var(--e8); }
}
@media (min-width: 1040px) {
:root { --margem: var(--e8); --secao: var(--e10); }
.topo-logo { height: 44px; }
.topo-links { gap: var(--e6); }
.topo-irmao { display: inline; }
.heroi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e9); align-items: center; padding: var(--e9) 0 var(--e10); }
.titulo { font-size: 56px; }
/* Só aqui a maquete entorta: com a coluna larga ela tem espaço para inclinar
sem encostar no texto do herói. */
.vitrine-caixa {
max-width: 100%;
transform: rotate(1.5deg);
transition: transform .35s var(--curva);
}
.vitrine-caixa:hover { transform: rotate(0); }
.passos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e6); }
.tese { font-size: 19px; }
/* Com duas colunas o palco deixa de tapar o texto: ele fica de um lado,
parado, e os quatro atos passam do outro. O fundo opaco e o z-index do
celular saem — aqui nada corre por baixo dele. */
.campo-corpo {
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
gap: var(--e9); align-items: start;
}
/* O palco fica alto e quase quadrado, e gruda a 13vh — na prática centrado
na tela enquanto os atos passam. */
.campo-palco { top: 13vh; z-index: auto; background: none; margin: 0; padding: 0; }
.campo-palco::after { display: none; }
.campo-ceu { width: min(100%, 60vh); }
.visita-rabo { opacity: .7; }
/* Aqui o recado deixa de ser uma tarja no pé e passa a pender do ponto da
Camila: --mx/--my são a posição dele em porcentagem da caixa (o viewBox é
quadrado como a caixa, por isso a conta fecha) e --mr é o rabicho que desce
dali. Os 22px são o quanto do recado fica à esquerda do fio — sempre em px,
para o rabicho cair no mesmo lugar da bolha em qualquer tamanho de tela. */
.campo-recado {
left: calc(var(--mx) - 22px); right: auto;
top: calc(var(--my) + var(--mr)); bottom: auto;
width: min(272px, 60%);
border-top-left-radius: var(--r-p);
}
/* Os dois recuos são o que reparte o scroll entre os quatro atos. O de cima
nasce o primeiro ato na altura do núcleo do campo e impede que o segundo
já comece acima da linha de leitura (a cena abriria no estágio 2); o de
baixo dá ao quarto o mesmo tempo de tela que os do meio, em vez de deixá-lo
durar só o último quadro. Mexer num deles desequilibra a cena inteira. */
.campo-atos { --recuo-topo: 24vh; --recuo-pe: 50vh; }
.ato { min-height: 30vh; }
.ato b { font-size: clamp(26px, 2.2vw, 31px); }
.ato p { font-size: 18px; max-width: 40ch; }
.preco-bloco { grid-template-columns: minmax(0, 1fr) auto; gap: var(--e8); padding: var(--e9); }
.preco-cartao { padding: var(--e8); }
}
/* A trava dupla: o inline do já não põe data-luz com esta preferência,
e aqui qualquer transição ou animação que sobre é desligada na marra. */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}