/* As duas fontes da marca, servidas da casa.
Elas vinham do fonts.googleapis.com num e a
caixa de marcar em preto no meio de uma página de papel. `accent-color`
porque a marca de "marcado" é a mesma em toda parte — sem ela, todo rádio e
todo checkbox sem regra própria sai no AZUL do sistema. */
color-scheme: light;
accent-color: var(--ouro-forte);
--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 do post) 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;
/* O mesmo piso do painel.css: palavra sem espaço não quebra sozinha e sai da
caixa. Aqui a folha é a base de duas jornadas que exibem texto de gente —
o checkout (marca e e-mail digitados) e o briefing inteiro —, e o
`overflow-x: hidden` acima esconde o sintoma sem segurar o culpado: o
conteúdo fica cortado em vez de rolar, que é pior. */
overflow-wrap: break-word;
}
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);
}
.chapeu i { font-style: normal; color: var(--ouro); } /* a faísca ✦ */
.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;
gap: 10px; /* o glifo do WhatsApp, quando o botão leva para a conversa */
}
.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); }
/* O botão de contorno, sobre o papel: o SEGUNDO caminho, quando o primeiro já
é o de ouro. Ele não compete — só o traço, e a tinta só chega no toque. É o
par do .btn-tinta, que é o mesmo botão preenchido; usa-se um ou outro,
nunca os dois lado a lado. */
.btn-vazado {
background: transparent; color: var(--tinta);
border: 1.5px solid var(--tinta);
min-height: 50px; padding: 0 var(--e6);
font-size: 15px; font-weight: 700;
}
.btn-vazado:hover { background: var(--noite); color: var(--claro); }
.micro { font-size: 14px; color: var(--tinta-3); }
/* O glifo do WhatsApp dentro dos botões. Herda a cor do texto do botão — sobre
o ouro ele é noite, sobre a noite é creme — e nunca cresce com a fonte: é
sinal de destino, não pontuação. */
.glifo-zap { width: 19px; height: 19px; flex: none; }
/* O glifo do Instagram, ao lado da palavra na headline do herói. Ao contrário
do irmão acima ele CRESCE com a fonte (medida em em), porque não é sinal de
destino: é a palavra que ele acompanha, e uma palavra não muda de corpo
sozinha. O `nowrap` do pai é o que impede a headline de quebrar entre a
palavra e o ícone e deixar o quadradinho órfão no começo da linha. */
.palavra-ig { white-space: nowrap; }
.glifo-ig {
display: inline-block; width: .62em; height: .62em;
margin-left: .13em; vertical-align: .01em;
color: var(--ouro-claro);
}
/* 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);
}
/* A ilha escura acende um halo quando entra em cena — a mesma luz dos halos da
capa, agora respondendo ao scroll. */
.preco-bloco { position: relative; overflow: hidden; }
.preco-bloco::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 { opacity: 0; }
/* Cartões respondem ao ponteiro com a gramática da casa: borda, não sombra. */
.passo, .frente {
transition: transform .25s var(--curva), border-color .25s var(--curva);
}
.passo:hover { transform: translateY(-2px); border-color: var(--ouro); }
.frente:hover { transform: translateY(-2px); border-color: rgba(255, 214, 151, .45); }
/* ------------------------------------------------------------------ capa */
/* A única faixa escura da página. 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; }
/* Área de toque, não desenho. No celular estes são os únicos alvos da barra e
a letra deles tem 22px de altura — meio centímetro no canto de cima da tela.
O padding leva os dois a 44px sem mover nada: a barra tem 76px (64 quando
volta flutuando) e alinha pelo centro. O botão fica de fora porque a altura
dele já é a do .btn-pequeno. */
.topo > a { padding-block: 7px; }
.topo-links a:not(.btn) { padding-block: 11px; }
.topo-links a:hover { color: var(--claro); }
/* "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); }
.heroi .chapeu i { color: var(--ouro-claro); }
.titulo {
margin-top: var(--e5);
font-size: clamp(34px, 8.6vw, 44px); line-height: 1.08; letter-spacing: -.02em;
text-wrap: balance;
}
.titulo em { font-style: normal; color: var(--ouro-claro); }
.olho { margin-top: var(--e6); max-width: 46ch; 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); }
/* A oferta de entrada, entre o olho e o botão da primeira dobra
(views/publico/_oferta-heroi.ejs — home e landings).
Uma nota da casa, e não um adesivo. Até 02/09/2026 aqui havia o "14 dias"
em ouro a 1,35em e um carimbo torto em caixa alta ("Sem compromisso") — a
gramática de promoção, que o Escobar mandou tirar. O bloco virou um aparte:
filete de ouro à esquerda (é um ), a postura em Lora na voz do
título, um degrau abaixo da headline, e os fatos em texto corrido na cor do
olho. Nada maior que o texto, nada em caixa alta, nada torto. O "14 dias"
fica em negrito claro, do tamanho do corpo — achável, não anunciado.
A entrada é a mesma dos outros [data-revela]: sob a luz ele acende como o
resto da página; sem JS, nasce aceso. */
.oferta-heroi {
margin-top: var(--e7); max-width: 46ch;
padding-left: var(--e5);
border-left: 1px solid rgba(255, 214, 151, .55); /* --ouro-claro, esmaecido */
}
.oferta-heroi-chamada {
font-family: var(--f-titulo);
font-size: clamp(20px, 2.4vw, 23px); line-height: 1.35; color: var(--claro);
letter-spacing: -.01em; text-wrap: balance;
}
.oferta-heroi-texto {
margin-top: var(--e3);
font-size: 15.5px; line-height: 1.55; color: var(--claro-2);
}
.oferta-heroi-texto b { color: var(--claro); font-weight: 600; white-space: nowrap; }
/* ------------------------------------------------------------- o post */
/* Desde 04/09/2026 a home abre com a vitrine de estilos (bloco "os estilos no
herói", no fim desta folha), e desde 05/09 as /para/* também; este bloco
serve à moldura (views/publico/_produto.ejs), que hoje só uma página de
DECISÃO com `vitrine:` no frontmatter imprime — nenhuma tem. Fica com ela.
O produto na vitrine é um post de verdade, saído do editor: as cinco páginas
do carrossel de clareamento da Dra. Ana Beatriz. A moldura imita o Instagram
de propósito — fonte do sistema, ícones de contorno, barra de ações, os
pontos azuis — porque é isso que se promete: o feed do profissional, não uma
vitrine nossa. Daí as cores daqui de dentro serem as do Instagram e não as da marca.
O recorte é a parte honesta: os templates desenham em 3:4 e é o navegador que
corta para 4:5 na hora de publicar (ver o README). `aspect-ratio: 4/5` com
`object-fit: cover` sobre a arte 3:4 refaz exatamente esse corte — 45px em
cada borda —, então o que se vê aqui é o que vai ao ar. */
.produto { margin: 0; }
/* Enquanto o herói está EMPILHADO (abaixo de 1040px), o post entra logo depois
das ações — e o adesivo "Post automático" sobe 13px para fora da moldura,
onde pousava em cima da linha do preço. Medido em 390px: o preço termina em
y=687 e o adesivo começa em y=674. A folga é do lado do post, e não do lado
das ações, porque quem invade é ele. No desktop as duas viram colunas
irmãs, e aí a folga é ruído — por isso o reset lá embaixo. */
.heroi .produto { margin-top: var(--e7); }
/* A caixa é o objeto sobre a mesa: ela carrega a inclinação e o adesivo, para
que o cartão do Instagram lá dentro continue sendo só o Instagram. O torto
fica pequeno de propósito — 2,5° dá vida sem borrar o texto da arte — e some
quando o ponteiro chega: quem vai arrastar o carrossel recebe ele reto.
No celular ele nasce reto; ali o post já está numa tela de telefone, e a
diagonal só custaria as quinas, cortadas pela margem da coluna. */
.produto-caixa { position: relative; width: 100%; max-width: 340px; margin: 0 auto; }
.selo-auto {
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-family: var(--f-corpo);
font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
.selo-auto i { font-style: normal; font-size: 13px; line-height: 0; }
.ig {
--ig-tinta: #262626;
--ig-cinza: #737373; /* o cinza do próprio Instagram; 4,7:1 no branco */
--ig-linha: #DBDBDB;
--ig-azul: #0095F6;
width: 100%;
background: #FFFFFF; color: var(--ig-tinta);
border-radius: var(--r-m); overflow: hidden;
box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size: 14px; line-height: 1.4;
}
.ig-topo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.ig-avatar {
width: 32px; height: 32px; flex: none; border-radius: 50%;
background: #16202A; color: #F6F1E9;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
.ig-quem { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ig-quem b { font-size: 13px; font-weight: 600; }
.ig-quem span { font-size: 11px; color: var(--ig-cinza); }
.ig-menu { margin-left: auto; font-size: 15px; letter-spacing: 1px; color: var(--ig-tinta); }
/* --------------------------------------------------------------- a mídia */
.ig-media { position: relative; }
/* Sem JS o trilho continua deslizando no dedo; o script só acrescenta setas,
pontos e contador vivos. */
.ig-trilho {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
scrollbar-width: none; -ms-overflow-style: none;
}
.ig-trilho::-webkit-scrollbar { display: none; }
/* `height: auto` é obrigatório: os atributos width//height do
continuar sendo o item da grade e o véu, o rótulo e o degrau do desktop não
mudarem de referência. Só existe para quem já tem página escrita — os outros
retratos seguem sem link, com o mesmo desenho. */
.publico-ir { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.publico-ir:focus-visible { outline: 2px solid var(--ouro); outline-offset: -3px; }
@media (hover: hover) {
.publico-quem:has(.publico-ir):hover img { transform: scale(1.03); }
.publico-quem img { transition: transform .5s ease; }
}
@media (prefers-reduced-motion: reduce) {
.publico-quem img { transition: none; }
.publico-quem:has(.publico-ir):hover img { transform: none; }
}
.publico-pe {
margin-top: var(--e7); max-width: 56ch;
font-size: 17px; color: var(--tinta-2);
}
.publico-pe strong { color: var(--tinta); font-weight: 700; }
/* --------------------------------------------------------- a constância */
.titulo-secao { font-size: clamp(28px, 6.6vw, 40px); line-height: 1.15; }
.chapeu + .titulo-secao { margin-top: var(--e4); }
/* 26ch quebra este título em três linhas — a medida foi ajustada quando ele
deixou de ser a pergunta curta ("E no próximo?") e virou a frase inteira. */
.constancia .titulo-secao { max-width: 26ch; }
.subtitulo { margin-top: var(--e4); max-width: 60ch; font-size: 17px; color: var(--tinta-2); }
/* Quatro meses como uma régua: o filete de cima é o mês, e só o primeiro é
preto — é o único em que alguma coisa aconteceu. */
.etapas { margin-top: var(--e8); display: grid; gap: var(--e6); }
.etapa { border-top: 2px solid var(--linha-3); padding-top: var(--e5); }
.etapa:first-child { border-top-color: var(--tinta); }
.etapa b { font-family: var(--f-titulo); font-size: 15px; color: var(--ouro-forte); }
.etapa h3 { margin-top: var(--e2); font-family: var(--f-corpo); font-size: 18px; font-weight: 700; letter-spacing: 0; }
.etapa p { margin-top: var(--e2); font-size: 15px; color: var(--tinta-2); }
/* A grade "perfil que se preenche" morou aqui até 24/08/2026: saiu quando a
home ficou com duas grades do mesmo persona (esta e a vitrine) e as duas
liam como repetição. Se a ideia voltar, o markup está no histórico do
home.ejs e o comportamento era o perfil() do landing.js. */
.tese { margin-top: var(--e8); max-width: 62ch; font-size: 18px; color: var(--tinta-media); }
.tese em { font-style: normal; border-bottom: 3px solid var(--ouro-claro); }
/* --------------------------------------------------------- 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: 40px; font-weight: 600; color: var(--ouro); line-height: 1; }
.passo h3 { margin-top: var(--e4); font-family: var(--f-corpo); font-size: 19px; font-weight: 700; letter-spacing: 0; }
.passo p { margin-top: var(--e3); font-size: 15px; color: var(--tinta-2); }
/* ---------------------------------------- a demonstração (celular + semana) */
/* O passo 3 em causa e efeito: a tela de aprovação do produto (o celular) e a
agenda da semana (a tira). Com luz, a sequência roda uma vez quando o bloco
acende: o anel de toque pulsa no botão, o botão comprime, o chip "agendado"
surge, os três posts pousam nos dias. O estado final — chip visível, tira
preenchida — é o padrão; o anel só existe dentro do keyframe. */
.demonstra { margin-top: var(--e8); display: grid; gap: var(--e7); align-items: start; }
.celular { margin: 0; }
.celular-moldura {
max-width: 300px; margin: 0 auto;
background: var(--branco); border: 1px solid var(--linha); border-radius: 26px;
padding: var(--e5) var(--e5) var(--e6);
box-shadow: 0 24px 60px rgba(20, 18, 16, .14);
display: flex; flex-direction: column; gap: var(--e4);
}
.celular-titulo { font-size: 15px; font-weight: 700; text-align: center; }
.celular-post { position: relative; border-radius: var(--r-m); overflow: hidden; }
.celular-post img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #16202A; }
.celular-paginas {
position: absolute; top: 8px; right: 8px;
background: rgba(20, 18, 16, .78); color: var(--claro);
border-radius: var(--r-redondo); padding: 3px 10px;
font-size: 10.5px; font-weight: 700;
}
/* O verde é o mesmo do botão real do painel (painel.css, --verde). */
.celular-aprovar {
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 46px; border-radius: var(--r-redondo);
background: #1f5c46; color: #FFFFFF;
font-size: 14.5px; font-weight: 700;
}
.celular-aprovar i { font-style: normal; }
.celular-ajustes { text-align: center; font-size: 12.5px; color: var(--tinta-3); text-decoration: underline; text-underline-offset: 3px; }
.celular-chip {
align-self: center;
display: inline-flex; align-items: center; gap: 7px;
background: rgba(31, 92, 70, .1); color: #1f5c46;
border: 1px solid rgba(31, 92, 70, .3); border-radius: var(--r-redondo);
padding: 7px 14px; font-size: 12px; font-weight: 700;
}
.celular-chip i { font-style: normal; }
.semana { margin: 0; align-self: center; }
.semana-tira { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e2); max-width: 420px; margin: 0 auto; }
.dia { display: flex; flex-direction: column; align-items: center; gap: var(--e2); min-width: 0; }
.dia b { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.dia img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-p); }
.dia i { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-p); border: 1px dashed var(--linha-3); }
/* A coreografia, toda por delay a partir do [data-aceso] do .demonstra. */
html[data-luz] .demonstra[data-aceso] .celular-aprovar::after {
content: ''; position: absolute; inset: -5px;
border: 2px solid rgba(31, 92, 70, .55); border-radius: var(--r-redondo);
opacity: 0; /* o anel só existe dentro do keyframe — o estado final é sem ele */
animation: tocar .9s var(--curva) .9s 2 backwards;
pointer-events: none;
}
html[data-luz] .demonstra[data-aceso] .celular-aprovar { animation: comprimir .35s var(--curva) 1.5s; }
@keyframes tocar {
from { opacity: 0; transform: scale(.96); }
40% { opacity: 1; }
to { opacity: 0; transform: scale(1.06); }
}
@keyframes comprimir {
50% { transform: scale(.96); }
}
.celular-chip { transition: opacity .4s var(--curva-pulo), transform .4s var(--curva-pulo); }
html[data-luz] .demonstra:not([data-aceso]) .celular-chip { opacity: 0; transform: translateY(6px) scale(.9); }
.demonstra[data-aceso] .celular-chip { transition-delay: 1.9s; }
.dia img { transition: opacity .45s var(--curva-pulo), transform .45s var(--curva-pulo); }
html[data-luz] .demonstra:not([data-aceso]) .dia img { opacity: 0; transform: translateY(-10px); }
.demonstra[data-aceso] .dia-cheio:nth-child(1) img { transition-delay: 2.2s; }
.demonstra[data-aceso] .dia-cheio:nth-child(3) img { transition-delay: 2.4s; }
.demonstra[data-aceso] .dia-cheio:nth-child(5) img { transition-delay: 2.6s; }
/* ----------------------------------------------------------- as frentes */
/* Quatro cartões de PAPEL, e não de noite. Até 03/09/2026 eles eram escuros
(gradiente de noite, borda de ouro), e no celular os quatro empilhados
viravam uma faixa escura de uns 700px — colada na presença, que é
escuro, na home, e colada na ilha dos 14 dias nas páginas de profissão que
põem as frentes logo antes dela (medicos, psicologos). A régua da página é
que dois escuros nunca se encostam, e as frentes são explicação, não
palco (ver o cabeçalho de views/marketing/home.ejs): branco sobre o papel,
borda fina, a etiqueta em ouro-forte. O que muda é só a cor; a grade e a
tipografia são as mesmas. */
.frentes { margin-top: var(--e8); display: grid; gap: var(--e6); }
.frente {
border-radius: var(--r-g); padding: var(--e6);
background: var(--branco);
border: 1px solid var(--linha);
color: var(--tinta);
display: flex; flex-direction: column;
}
.frente b { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ouro-forte); }
.frente h3 { margin-top: var(--e3); font-size: 19px; line-height: 1.3; }
.frente p { margin-top: var(--e3); font-size: 14px; color: var(--tinta-2); }
/* ---------------------------------------------------------- a vitrine */
/* Um mês do perfil de demonstração, aberto post a post: à esquerda a grade do
perfil, à direita o post que a pessoa escolheu. Reaproveita o cartão do
Instagram do herói (.ig e filhos) — o que muda aqui é o entorno, porque este
cartão vive sobre o papel e não sobre a noite.
O interruptor do layout é html[data-vjs], e não uma media query: sem script
os doze posts ficam empilhados e a grade é um índice de âncoras — a seção
inteira continua legível. Com script, a grade escolhe e só um post ocupa a
coluna. É esse recorte que também segura o peso: página escondida é página
que o navegador nunca baixa (as imagens são todas `lazy`).
O atributo é da vitrine, e não o data-js de toda página com script: a seção
também vive fora da landing, e nas páginas de profissão o data-js valeria
sem que ninguém tivesse carregado o assets/vitrine.js que reabre os doze.
Quem o põe é views/publico/_vitrine-cabeca.ejs, no . */
.vitrine-corpo { margin-top: var(--e8); display: grid; gap: var(--e8); }
/* ---- a grade do perfil */
.vitrine-perfil { margin: 0; }
.vperfil {
max-width: 420px; margin: 0 auto;
background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-m);
overflow: hidden;
/* Como no post do herói: aqui dentro vale a tipografia do Instagram. */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.vperfil-topo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--linha-2); }
.vperfil-avatar {
width: 36px; height: 36px; flex: none; border-radius: 50%;
background: #16202A; color: #F6F1E9;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; letter-spacing: .06em;
}
.vperfil-quem { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.vperfil-quem b { font-size: 13.5px; font-weight: 600; color: #262626; }
.vperfil-quem span { font-size: 11.5px; color: #737373; }
.vperfil-grade {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
background: var(--branco);
}
/* O recorte é 4:5, e não o quadrado antigo do Instagram: é nele que o perfil
mostra hoje, e é o que preserva o título da arte — um corte quadrado comeria
justamente a linha de texto que vive no pé de cada peça. */
.vgrade-post {
display: block; position: relative; aspect-ratio: 4 / 5;
background: #F4EFE6; overflow: hidden;
}
.vgrade-post img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--curva); }
/* O mesmo véu faz os dois estados da célula: escurece no ponteiro e vira anel
de ouro na célula aberta. Ele existe porque é preciso alguma coisa POR CIMA
da imagem — um box-shadow no próprio link pintaria atrás dela — e o anel é
por dentro para a marcação não empurrar os 2px de intervalo da grade. */
.vgrade-post::after {
content: ''; position: absolute; inset: 0;
background: rgba(20, 18, 16, .28);
opacity: 0; transition: opacity .2s;
}
@media (hover: hover) {
.vgrade-post:hover img { transform: scale(1.05); }
.vgrade-post:hover::after { opacity: 1; }
}
.vgrade-post[aria-current]::after,
.vgrade-post[aria-current]:hover::after {
opacity: 1; background: transparent; box-shadow: inset 0 0 0 3px var(--ouro);
}
.vgrade-post:focus-visible { outline-offset: -3px; }
.vgrade-carrossel {
position: absolute; top: 6px; right: 6px; color: var(--branco);
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
pointer-events: none;
}
.vgrade-carrossel svg { width: 15px; height: 15px; display: block; }
/* ---- o post aberto */
.vitrine-leitor { display: grid; gap: var(--e9); justify-items: center; }
/* Sem script os doze ficam empilhados e a âncora da grade leva até eles; o
recuo é para o topo do post não encostar na barra do navegador. */
.vpost { width: 100%; max-width: 420px; scroll-margin-top: var(--e8); }
html[data-vjs] .vpost { display: none; }
html[data-vjs] .vpost[data-aberto] { display: block; }
/* A ficha fica FORA do cartão de propósito: ela é a nossa voz sobre o post
(qual frente, qual formato), e dentro da moldura viraria interface falsa do
Instagram. */
.vpost-ficha {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3);
margin-bottom: var(--e4); font-size: 13px; color: var(--tinta-3);
}
.vpost-ficha b {
padding: 4px 11px; border-radius: var(--r-redondo);
background: var(--noite); color: var(--ouro-claro);
font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.vpost-ficha span + span::before { content: '· '; color: var(--linha-3); }
/* O cartão do Instagram sobre o papel: a sombra pesada do herói (feita para a
noite) vira uma sombra de objeto sobre a mesa, e ganha borda para não
flutuar sem contorno no creme. */
.ig-vitrine {
border: 1px solid var(--linha);
box-shadow: 0 18px 44px rgba(20, 18, 16, .13);
}
/* A legenda de verdade — a que o cliente aprovaria. Vários parágrafos, como o
post tem; as hashtags saem no azul de link do Instagram.
Não há curtida nem comentário aqui, nem congelados como no herói: ali os
números são cenário de uma encenação declarada, aqui o material é real e um
número ao lado dele seria lido como resultado. */
.ig-texto { margin-top: 10px; font-size: 14px; line-height: 1.45; }
.ig-texto p + p { margin-top: 9px; }
.ig-texto b { font-weight: 600; }
.ig-tags { color: #00376B; }
/* ---- o fecho da vitrine: a chamada */
/* Aqui ficava a contagem do mês por frente. Depois de doze posts abertos a
pessoa já viu a prova — o que falta no fim da seção é o próximo passo, e ele
é o mesmo da página inteira: a conversa. O cartão branco separa o convite do
material sem gritar; é o mesmo desenho do bloco "conhecer". */
.chamada {
margin: var(--e8) auto 0; max-width: 62ch;
display: grid; justify-items: center; gap: var(--e5); text-align: center;
padding: var(--e7) var(--e6);
border: 1px solid var(--linha); border-radius: var(--r-gg); background: var(--branco);
}
.chamada-texto { max-width: 46ch; font-size: 16px; color: var(--tinta-2); }
.chamada-texto strong {
display: block; margin-bottom: var(--e2);
font-family: var(--f-titulo); font-weight: 600; font-size: clamp(21px, 4.8vw, 25px);
line-height: 1.2; color: var(--tinta);
}
.chamada .micro { color: var(--tinta-3); }
/* --------------------------------------------------- a oferta de entrada */
/* Os catorze dias por nossa conta, ditos por inteiro, logo depois dos estilos.
Na home é a QUARTA ilha escura (herói, régua, presença, esta, preço) e
a régua da página vale aqui: nenhum escuro encosta em outro. Antes dela
vêm os estilos, claros e compridos; depois, os depoimentos e o FAQ, também
claros — só então o preço. Até 03/09/2026 a régua de preço, que é escura,
ficava colada aqui embaixo com só a lista do incluído entre as duas; subiu
para a terceira dobra por isso (home.ejs, D-034). Nas páginas de profissão
a posição é do markdown, e a mesma régua vale lá.
O escuro aqui faz o mesmo trabalho que faz no preço: interrompe. A pessoa
acabou de rolar dez feeds de fundo claro, e o corte é o que transforma
rolagem em leitura. */
.amostra {
background: var(--noite); color: var(--claro); border-radius: var(--r-ggg);
padding: var(--e8) var(--e6);
display: grid; gap: var(--e8); align-items: start;
}
.amostra .chapeu, .amostra .chapeu i { color: var(--ouro-claro); }
.amostra h2 { margin-top: var(--e4); font-size: clamp(27px, 6.4vw, 38px); line-height: 1.16; max-width: 20ch; }
.amostra-linha { margin-top: var(--e5); max-width: 50ch; font-size: 16px; color: var(--claro-2); }
.amostra .acoes { gap: var(--e5); }
.amostra .acoes .micro { max-width: 36ch; font-size: 13px; color: var(--claro-3); }
/* Os três tempos da oferta. Eles não são decoração de layout: "de graça"
levanta na hora a pergunta de sempre — qual é a pegadinha —, e a resposta é
ver o trabalho aparecendo. Por isso : a ordem é a informação.
Filete e numeral, e não cartão. O cartão branco de canto redondo é o
vocabulário da parte CLARA da página (o passo, a chamada, o incluído); usá-lo
dentro de um bloco escuro abriria um terceiro nível de caixa, e a seção
passaria a parecer uma tabela de plano. */
.amostra-passos { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e6); }
.amostra-passos li {
display: grid; grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--e5); row-gap: 4px;
padding-top: var(--e6); border-top: 1px solid rgba(255, 214, 151, .22);
}
.amostra-passos li:first-child { padding-top: 0; border-top: 0; }
/* O numeral atravessa as duas linhas do item (o título e o texto), e é por isso
que ele fica alinhado ao topo e não ao meio: é uma marca de ordem, não um
ícone. */
.amostra-n {
grid-row: span 2; width: 34px; height: 34px;
display: grid; place-items: center;
border: 1px solid rgba(255, 214, 151, .4); border-radius: var(--r-redondo);
font-family: var(--f-titulo); font-size: 16px; line-height: 1;
color: var(--ouro-claro);
}
.amostra-passos b { font-size: 16px; font-weight: 700; color: var(--claro); }
.amostra-passos p { font-size: 14.5px; line-height: 1.55; color: var(--claro-2); }
/* ------------------------------------------------------- os depoimentos */
/* A faixa de falas entre a vitrine e a oferta. É a única seção da página que
SANGRA para fora da .coluna: o cabeçalho fica na coluna com todo o resto, e
só as fileiras atravessam de borda a borda — é isso que dá a sensação de
fila que continua depois da tela.
**A forma é de filetes, e não de cartões.** A página já usa o cartão branco
de canto redondo no passo, na chamada, no incluído e no preço; um sexto uso
aqui teria feito da prova social a seção mais genérica de todas. O que ela é:
três filetes correndo de borda a borda — topo, meio e pé — e um filete
vertical entre cada fala, como duas linhas de uma tabela. Régua e hairline
são o vocabulário de confiança desta marca — a mesma gramática da .etapa e
da .inclui —, e é ele que faz a faixa parecer registro em vez de
propaganda.
**Duas fileiras, e em sentidos contrários.** Uma esteira só é o que todo
site faz; duas que se cruzam viram parede de vozes, e o cruzamento é o que
entrega movimento sem que nada precise correr — a faixa anda a 40px/s, mais
DEVAGAR que a versão de uma fileira, e ainda assim parece mais viva. As duas
larguras de fala (460px em cima, 450px embaixo) existem para dois fins: com
a mesma medida as duas fileiras cairiam em fase e a parede viraria xadrez; e
quatro falas por fileira só cobrem um monitor largo se cada uma for larga —
em 400px a quinta fala de um monitor de 1920 já era a primeira outra vez, e
ver a mesma pessoa duas vezes na mesma tela é o defeito que denuncia a
esteira. Com 460px as quatro medem 1840px, e o que sobra cai dentro do
apagamento da máscara.
**A luz é o que substitui a sombra.** A gramática de destaque da casa é
borda e não sombra (ver o bloco "a luz"), então o relevo desta faixa vem de
iluminação: um clarão de ouro descendo do filete de cima, o próprio filete
virando facho no meio da tela, e a fala acesa em branco puro quando o
ponteiro para nela. Nada aqui flutua; o que muda é onde bate a luz.
Cada .faixa-rolo recorta e apaga as pontas da sua fileira, e a .faixa por
fora desenha o fundo e os filetes, que precisam chegar inteiros à borda da
tela. Numa camada só, a máscara comeria os filetes junto com o conteúdo.
O contrato do movimento é o da casa, com uma diferença que vale escrever: o
estado padrão desta seção não é um cartão parado, são duas TIRAS
ARRASTÁVEIS. Sem JS, ou com prefers-reduced-motion, nada anda e nada some —
a pessoa empurra cada fileira com o dedo e lê os oito depoimentos. As
repetições (.dep-copia) só existem sob html[data-luz], porque elas são a
emenda do laço e não conteúdo.
O laço, que é onde este tipo de faixa costuma falhar: as repetições são
idênticas e encostadas (o vão entre falas é o padding de cada uma, não um
gap do flex), então a volta é exatamente -50% e a emenda cai pixel a pixel —
conferido pondo o trilho em translateX(0) e em translateX(-50%) e comparando
o md5 dos dois PNGs, em 1440 e em 390. Um `gap` aqui obrigaria a descontar
metade dele na volta, e é essa metade esquecida que faz o pulinho que se vê
em faixa de site por aí. As durações são a mesma velocidade escrita duas
vezes: 3680px em 92s e 3600px em 90s dão 40px/s nas duas fileiras, e é por
isso que mexer numa largura obriga a mexer na duração da mesma fileira.
Os 450px de baixo não são um número redondo escolhido a esmo: em 430 a fala
do Dr. Eduardo virava três linhas, e como a assinatura de todas mora no
mesmo pé (é o `flex` da fala que empurra), UMA fala de três linhas abre um
vão embaixo das outras três. Mexer no texto muda a conta — vale medir as
linhas de novo quando os depoimentos de verdade entrarem. */
/* 23ch é a medida que faz a frase quebrar onde ela tem ponto final: com 24 o
"O" da segunda oração ainda cabe na primeira linha e fica pendurado lá. */
.depoimentos .titulo-secao { max-width: 23ch; }
/* O fundo não é branco chapado: é branco com um clarão de ouro descendo do
filete de cima, como se a luz entrasse pela borda da faixa. É de longe o que
mais faz esta seção parecer objeto e não bloco — e custa um gradiente. */
.faixa {
position: relative;
margin-top: var(--e8);
background:
/* O facho: nasce fora da faixa, no meio da tela, e desce até quase sumir.
O "quase" é o ponto — a parada do meio (alfa .07, aos 56%) deixa um resto
de ouro na fileira de baixo, e é ele que impede a faixa de virar duas
seções, uma dourada em cima e uma branca embaixo. */
radial-gradient(155% 150% at 50% -22%,
rgba(255, 214, 151, .46), rgba(255, 214, 151, .07) 56%, rgba(255, 214, 151, 0) 100%),
/* O pé recuando: um véu de tinta quase invisível no último terço, para a
fileira de baixo assentar em vez de flutuar. */
linear-gradient(180deg, transparent 66%, rgba(20, 18, 16, .022)),
var(--branco);
border-block: 1px solid var(--linha);
}
/* O filete de cima acende no meio da tela, onde o clarão nasce. Fica SOBRE a
borda (top: -1px) porque ele não é uma segunda linha: é a mesma linha, com
luz em cima. Um filete inteiro de ouro seria enfeite; iluminado só no meio,
ele é a boca do facho. */
.faixa::before {
content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
pointer-events: none;
background: linear-gradient(90deg,
transparent, rgba(185, 126, 36, .55) 26%, rgba(185, 126, 36, .8) 50%,
rgba(185, 126, 36, .55) 74%, transparent);
}
/* Sem cabeçalho a faixa É a seção, e os 40px que a separavam do subtítulo
viram vão à toa: o que fica acima dela passa a ser o respiro de seção, que
já é o da página inteira. */
.depoimentos-seca .faixa { margin-top: 0; }
.faixa-rolo {
--dep-larg: min(460px, calc(100vw - 64px));
overflow-x: auto; /* sem luz: tira arrastável */
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.faixa-rolo::-webkit-scrollbar { display: none; }
/* O filete do meio é a segunda linha da tabela. A segunda fileira é mais
estreita e anda ao contrário — as duas coisas juntas é que impedem as falas
de cima e as de baixo de andarem em bloco. */
.faixa-rolo + .faixa-rolo {
--dep-larg: min(450px, calc(100vw - 64px));
border-top: 1px solid var(--linha);
}
.faixa-trilho { display: flex; width: max-content; }
.dep-fila { display: flex; margin: 0; padding: 0; list-style: none; }
.dep-copia { display: none; }
/* O respiro mora DENTRO da fala, e não na faixa: fosse padding da faixa, o
filete vertical nasceria solto no meio do branco e a linha de tabela viraria
uma fileira de riscos. */
.dep {
/* No celular a fala mede a tela menos uma sobra fixa, e não uma fração dela:
`84vw` dava 327,6px, largura fracionária que põe a volta do laço em meio
pixel e faz o texto reamostrar na emenda. Com a conta em pixels inteiros a
emenda fecha igual no celular e no desktop — e de quebra a sobra que
aparece da próxima fala é sempre a mesma. */
position: relative;
flex: 0 0 var(--dep-larg);
/* A mesma medida dita duas vezes, e a segunda não é redundância.
O trilho é `width: max-content`, e para essa conta o WebKit pergunta a cada
fala qual é a largura DELA em max-content — a frase inteira numa linha só,
uns 780px — em vez de aceitar o flex-basis. O saía com 3109px para
1304px de falas, e os 1805px de sobra desfilavam como BRANCO: no Safari do
celular a fileira passava as falas e depois sumia por meio minuto. Medido na
produção, em 390px: trilho de 12437px para 5216px de falas.
`max-width` é o que o motor respeita nessa conta e, com o box-sizing
border-box da casa, ele nunca chega a mudar a largura usada — no Blink é
literalmente um no-op. O invariante que ele defende: o trilho tem de medir
exatamente a soma das falas, senão o laço tem buraco. */
max-width: var(--dep-larg);
display: flex; flex-direction: column;
padding: var(--e7) var(--e6);
/* O filete da direita é desenhado como fundo, e não como `border-right`,
para poder DISSOLVER nas pontas: um traço que morre antes de encostar no
filete de cima e no de baixo separa sem cravar uma grade. É a diferença
entre uma tabela e uma partitura, e é o detalhe que mais se sente de perto
nesta faixa. (Fundo e não pseudo-elemento porque os dois desta fala já têm
dono: a aspa e o filete do destaque.) */
background-image: linear-gradient(180deg,
transparent, var(--linha) 14%, var(--linha) 86%, transparent);
background-size: 1px 100%; background-position: 100% 0; background-repeat: no-repeat;
transition: background-color .35s var(--curva), opacity .35s var(--curva);
}
/* A aspa que abre. Ela é grande, é de ouro e é a única coisa que se vê de
longe quando a faixa passa — é ela que diz "aqui é gente falando" antes de
qualquer palavra ser lida. Por isso a fala não carrega mais aspas no texto:
com as duas coisas, a citação apareceria entre aspas dentro de uma aspa.
Fica ATRÁS do texto de propósito — é assim que se compõe capitular em livro,
e é o que impede a aspa de virar mais um elemento empilhado no cartão. Quem
a manda para trás é o `position: relative` da .dep-fala: entre dois
posicionados sem z-index quem pinta por cima é o último do DOM, e o
pseudo-elemento nasce antes do conteúdo. Tirar aquele `relative` esconde a
primeira linha da fala atrás da aspa. */
.dep::before {
content: '“';
/* `top: 0` e não um valor negativo: a fileira recorta na vertical (é o preço
do overflow-x que a faz arrastável sem JS), e um desenho que sobe acima do
zero volta cortado reto no filete de cima. */
position: absolute; left: 13px; top: 0;
font-family: var(--f-titulo); font-size: 128px; line-height: 1;
color: var(--ouro); opacity: .15;
pointer-events: none;
transition: opacity .35s var(--curva), color .35s var(--curva);
}
/* O filete de ouro que entra pelo topo quando o ponteiro para na fala: é o
destaque na gramática da casa (borda, não sombra), e ele cresce da esquerda
para a direita como a régua da .constancia. */
.dep::after {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: var(--ouro);
transform: scaleX(0); transform-origin: left;
transition: transform .45s var(--curva);
}
/* **A parede escurece e a fala acende.** Com o ponteiro numa fala, a fileira
inteira recua para 45% e só aquela fica de pé: fundo branco puro sobre o
clarão, filete de ouro no topo, aspa acesa. É o único gesto da página em que
o entorno cede lugar — e ele vale aqui porque a faixa é a única seção com
oito coisas competindo ao mesmo tempo. Vem junto com a pausa do desfile (mais
abaixo): quem aponta quer LER, e ler é o que a página quer que aconteça.
Só onde o ponteiro existe de verdade. No dedo, `:hover` gruda no que foi
tocado por último e a parede ficaria apagada até a pessoa tocar noutro
lugar — o oposto do que este bloco quer. */
@media (hover: hover) and (pointer: fine) {
.faixa-rolo:hover .dep { opacity: .45; }
.faixa-rolo .dep:hover { opacity: 1; background-color: var(--branco); }
.dep:hover::after { transform: scaleX(1); }
.dep:hover::before { opacity: .34; }
.dep:hover .dep-quem::before { width: 40px; }
}
/* A fala é a única coisa desta página em Lora fora dos títulos, e é de
propósito: voz de gente, não texto de interface. */
.dep-fala {
flex: 1; margin: 0;
position: relative; /* põe o texto na frente da aspa — ver .dep::before */
font-family: var(--f-titulo); font-size: 19px; line-height: 1.5;
color: var(--tinta-media);
text-wrap: pretty; /* sem palavra sozinha na última linha, onde houver */
}
/* A assinatura é empurrada para baixo pelo flex da fala: com todas no mesmo
pé, os nomes formam uma linha só atravessando a faixa inteira enquanto ela
anda. O tracinho de ouro é o mesmo filete-régua da .etapa, deitado, e ele
cresce junto com o destaque — o único movimento de dentro da fala. */
/* Ela virou GRADE de duas colunas para receber a arte à esquerda — e é grade, e
não um flex com um embrulhando o nome, para `b` e `span` continuarem
filhos diretos do e as regras de baixo não trocarem de seletor. A
coluna do texto é `minmax(0, 1fr)` e não `1fr` porque um ofício comprido
("Implantodontista · Recife") estouraria a célula em vez de quebrar. */
.dep-quem {
margin-top: var(--e6);
display: grid;
grid-template-columns: auto minmax(0, 1fr);
/* Quatro linhas para três coisas, e a primeira é vazia de propósito. A arte
atravessa a grade inteira e é mais alta que régua + nome + ofício somados;
como o sobressalente de um item que ATRAVESSA linhas é repartido entre as
linhas que ele cobre, o tracinho de ouro descolava do nome e ficava
boiando no branco (e `align-content` não salva: a repartição acontece no
dimensionamento das linhas, antes). A linha `1fr` no topo come a sobra
inteira, e as três de baixo voltam a medir o conteúdo — régua, nome e
ofício colados como antes, assentados na mesma base da arte. */
grid-template-rows: 1fr auto auto auto;
column-gap: var(--e3);
}
.dep-quem::before {
content: ''; grid-area: 2 / 2; display: block; width: 22px; height: 2px;
margin-bottom: var(--e4); background: var(--ouro);
transition: width .45s var(--curva);
}
.dep-quem b { grid-area: 3 / 2; display: block; font-size: 15px; font-weight: 700; }
.dep-quem span { grid-area: 4 / 2; display: block; margin-top: 2px; font-size: 12.5px; color: var(--tinta-3); }
/* A miniatura: um post que a produção fez de verdade no perfil de demonstração
da casa, a mesma fonte da vitrine. Quatro decisões, e nenhuma é detalhe:
**Ela SANGRA até o filete de baixo** (o margin negativo come o respiro da
fala). Encostada na régua ela é coluna de tabela; parada 32px antes, seria um
cartãozinho pousado no branco — e o cartão é justamente o que esta seção
existe para não ser. É também o que a faz caber quase de graça: a arte só
empurra a altura da célula no que passar do pé que já existia (assinatura 64
+ respiro 32 = 96px).
**Nada de canto redondo nem sombra.** O relevo desta faixa é luz, e a arte já
entra no gesto que existe: a opacidade do .dep apaga a peça junto com a fala
quando o ponteiro para na vizinha, e acende as duas juntas. Moldura de
aplicativo, além de fora da gramática, seria o sinal de PROVA que a seção não
pode gastar enquanto as falas forem de casa.
**O filete por dentro não é enfeite.** Metade das peças do mês é quase branca
(as de tipografia sobre papel), e sem contorno elas viram um buraco no meio
do clarão da faixa — some justamente a arte que mostra o trabalho de texto. O
filete é `inset` e não `border` para não roubar pixel do desenho, e é borda e
não sombra, que é a gramática da casa.
**Ela abre a assinatura, e não fecha a fala pelo outro lado.** No canto oposto
ficaria a 250px do nome e a um filete da fala seguinte, e em movimento o olho
hesita sobre de quem ela é. Colada ao nome, não hesita.
`object-fit: cover` porque o CSS pede 4:5 e o arquivo já é 4:5 — o cover é a
rede, não o recorte. O fundo é o creme fraco da casa: enquanto a peça não
pinta, o que se vê é papel, e não um vão branco. */
.dep-arte {
grid-area: 1 / 1 / 5 / 2; align-self: end;
display: block; width: 72px; height: 90px;
object-fit: cover; background: var(--linha-2);
box-shadow: inset 0 0 0 1px var(--linha);
margin-bottom: calc(var(--e7) * -1);
}
/* ---------------------------------------------- a nota e o selo da fala
Os dois sinais de PROVA da assinatura: as cinco estrelas da avaliação e o
selo azul de verificado. Quem os acende é o dado da fala (`nota` e
`verificado`, em srv/landing.js) — uma fala sem os campos sai sem eles, e
este bloco não precisa saber de nenhuma das duas coisas.
**As estrelas ocupam a linha do tracinho de ouro, e não uma linha nova.** É
a única decisão de layout aqui, e ela é a que importa: a assinatura de toda
a faixa tem de medir a mesma altura, senão a fala com nota empurra o pé e a
linha de nomes que atravessa a seção — o que faz esta faixa parecer registro
e não propaganda — deixa de ser uma linha. O tracinho e as estrelas são a
mesma régua de ouro dita de dois jeitos, então trocar um pelo outro no mesmo
lugar é continuidade, não substituição.
**A nota é largura, não markup.** O trilho pinta cinco estrelas em cinza de
filete; o por cima pinta as mesmas cinco em ouro e é cortado em
`--n / 5`. Meia estrela sai de graça, e uma nota de 4,5 não precisa de um
segundo desenho nem de um `if` na view. As duas camadas usam a MESMA máscara
com a mesma origem, e é isso que faz as pontas coincidirem pixel a pixel — a
máscara é `repeat-x` a partir da esquerda nas duas, e o começa na mesma
esquerda.
Máscara e não repetido: são 32 falas na tela (as repetições do laço),
e cinco estrelas em cada dariam 160 desenhos no HTML para um enfeite de 13px.
**O selo é uma roseta nossa.** Doze lóbulos, azul, com o tique vazado em
branco — reconhecível como "verificado" à distância de um metro, que é o
trabalho dele, e propositalmente diferente do selo do Instagram: aquele
afirmaria que quem verificou foi o Instagram. Este afirma o que a casa pode
afirmar, e o .selo-txt diz a palavra por extenso a quem usa leitor de tela.
O azul é o único da página fora do mockup do Instagram, e por isso ele não
pode ser um azul qualquer: #0A7CD4 é o tom de verificado que ainda passa AA
(4,6:1) sobre o branco da faixa, o que o --ig-azul (#0095F6, 2,9:1) não faz.
Ele fica em variável para a diferença ser deliberada e não parecer engano. */
.dep-quem { --azul-selo: #0A7CD4; }
/* O tracinho cede a vez às estrelas. `display: none` e não `width: 0`: com
largura zero ele continuaria comendo o `margin-bottom` da própria linha, e a
nota assentaria 8px mais alta que o tracinho das falas vizinhas. */
.dep-quem.tem-nota::before { display: none; }
/* `.dep-quem .dep-estrelas` e não `.dep-estrelas`: a regra do ofício logo
acima é `.dep-quem span`, que também casa com este e que, com uma
classe e um tipo, ganha de uma classe só. Sem os dois níveis aqui as
estrelas caem na linha 4 e imprimem por cima de "Ortopedista · Belo
Horizonte" — foi o que aconteceu na primeira medição. */
.dep-quem .dep-estrelas {
grid-area: 2 / 2; position: relative;
/* 5 estrelas de 14,6px, e a altura é a do desenho (20:19). O `block` é o que
impede a linha de base do inline de somar os três pixels do descendente
debaixo das estrelas. */
display: block; width: 73px; height: 13.9px;
margin-bottom: var(--e4);
background: var(--linha);
-webkit-mask: var(--estrela) repeat-x left center / 14.6px 13.9px;
mask: var(--estrela) repeat-x left center / 14.6px 13.9px;
}
.dep-quem .dep-estrelas i {
position: absolute; inset: 0 auto 0 0;
width: calc(var(--n) / 5 * 100%);
background: var(--ouro);
-webkit-mask: inherit;
mask: inherit;
}
/* A estrela, desenhada uma vez. Fica no :root porque a máscara do trilho e a
do preenchimento têm de ser literalmente o mesmo arquivo — duas cópias do
mesmo path renderizam igual, mas qualquer ajuste futuro numa delas
desalinharia as pontas em silêncio. */
:root {
--estrela: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath fill='black' d='M9.67 1.23Q10 0.4 10.33 1.23L12.05 5.49Q12.38 6.32 13.27 6.38L17.86 6.7Q18.75 6.76 18.06 7.33L14.54 10.28Q13.85 10.85 14.07 11.72L15.19 16.18Q15.41 17.04 14.65 16.57L10.76 14.13Q10 13.65 9.24 14.13L5.35 16.57Q4.59 17.04 4.81 16.18L5.93 11.72Q6.15 10.85 5.46 10.28L1.94 7.33Q1.25 6.76 2.14 6.7L6.73 6.38Q7.62 6.32 7.95 5.49Z'/%3E%3C/svg%3E");
}
/* O selo entra na linha do nome, e o nome vira `flex` para isso. `inline` no
meio do deixaria o selo pendurado na linha de base do texto, 2px baixo
demais — num desenho de 15px isso se vê. */
.dep-quem.tem-selo b { display: flex; align-items: center; gap: 5px; }
.dep-selo {
flex: none; color: var(--azul-selo);
/* Ele não é ícone de interface: é uma marca ao lado de um nome, e por isso
não tem estado nem sombra. O halo de 3px é o mesmo recurso da faixa — luz,
não relevo — e é ele que impede o azul de virar um pontinho perdido no
clarão de ouro do fundo. */
border-radius: var(--r-redondo);
box-shadow: 0 0 0 3px rgba(10, 124, 212, .09);
}
/* A palavra que o desenho diz. Fora da tela e não `display: none`, senão o
leitor de tela também não a lê. Dois níveis pela mesma razão das estrelas:
`.dep-quem span` alcança este lá de dentro do . */
.dep-quem .selo-txt {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
/* A nota das artes. À esquerda e na coluna, como o cabeçalho da seção — a
.legenda-papel é centralizada porque a figura da vitrine é, e aqui o que vem
antes é uma faixa que sangra de borda a borda. */
/* Os três tamanhos da arte, e cada degrau tem a mesma causa: o que sobra para
o ofício. "Implantodontista · Recife" tem de caber numa linha, porque é a
linha de nomes atravessando a faixa que faz esta seção parecer registro — e
ela vale mais que vinte pixels de arte. Medido fala a fala, com Range, em
320, 360, 375, 384, 390, 412, 430, 600, 768 e 1440. */
@media (min-width: 384px) {
.dep-quem { column-gap: var(--e4); }
.dep-arte { width: 88px; height: 110px; }
}
/* Abaixo de 360 não cabe arte NENHUMA: a fala mede 256px, e qualquer coluna à
esquerda quebra metade dos ofícios em duas linhas. Antes da miniatura esta
seção estava inteira até 320px, e tirar a arte é o único jeito de ela
continuar assim — aparelho de 2016 fica com a fala, que é o que importa. */
@media (max-width: 359px) {
.dep-arte { display: none; }
.dep-quem { column-gap: 0; }
}
/* Com luz, as fileiras andam. Elas param sob o ponteiro e sob o foco do
teclado, que é como se lê um cartão inteiro sem correr atrás dele. A máscara
só existe aqui: paradas, as tiras não têm entrada nem saída para disfarçar,
e apagar a primeira fala pela metade seria defeito e não acabamento. Ela
apaga o CONTEÚDO, não o fundo — a fala se dissolve no clarão da faixa em vez
de bater numa parede branca. */
html[data-luz] .faixa-rolo {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
/* A máscara é declarada com tamanho e posição porque é ela que faz a
ENTRADA: encolhida a 14% da largura, sobra só uma greta acesa no meio da
tela; ao acender, ela abre até 100% e as duas fileiras aparecem de dentro
para fora, como cortina de luz. Fora do desenho da máscara o conteúdo é
transparente (mask-repeat: no-repeat), e é isso que dispensa um segundo
véu por cima.
Abrir a máscara e não deslocar o rolo: `transform` no rolo levaria a
máscara junto e descobriria a borda da faixa; `transform` no trilho é do
desfile. A máscara é a única peça livre, e ela já estava aqui. */
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
transition: -webkit-mask-size 1.1s var(--curva), mask-size 1.1s var(--curva);
}
html[data-luz] .faixa:not([data-aceso]) .faixa-rolo {
-webkit-mask-size: 14% 100%; mask-size: 14% 100%;
}
/* A de baixo abre um pouco depois da de cima: sem o atraso as duas cortinas
são uma cortina só, e o que se vê é um retângulo crescendo. */
html[data-luz] .faixa-rolo + .faixa-rolo { transition-delay: .16s; }
html[data-luz] .dep-copia { display: flex; }
html[data-luz] .faixa-trilho { animation: desfilar 92s linear infinite; }
/* A de baixo volta pelo mesmo caminho: `reverse` anda de -50% a 0, que é a
mesma emenda lida ao contrário — não há um segundo @keyframes a manter. */
html[data-luz] .faixa-volta { animation-duration: 90s; animation-direction: reverse; }
/* A pausa mora dentro de (hover: hover), e a lição custou uma ida à produção:
fora dela, no celular, ela PARAVA A FAIXA PARA SEMPRE. `:hover` é grudento no
toque — encosta e fica até a pessoa tocar noutro lugar —, e aqui o dedo
encosta o tempo todo, porque se rola a página arrastando e a faixa ocupa a
largura inteira. O que se via era uma fileira congelada ao lado de outra
andando, e nada que a destravasse. No PC em modo celular não aparece: o mouse
sai de cima e o estado limpa.
Vale para toda regra de :hover desta folha, e é por isso que as outras já
nascem dentro de um @media — esta escapou por estar longe do bloco do realce. */
@media (hover: hover) {
html[data-luz] .faixa-rolo:hover .faixa-trilho { animation-play-state: paused; }
}
/* O foco de teclado fica de fora do @media de propósito: ele não gruda no
toque, e um dia em que a fala tenha um link dentro é ele que segura o cartão
parado enquanto se lê. */
html[data-luz] .faixa-rolo:focus-within .faixa-trilho { animation-play-state: paused; }
@keyframes desfilar { to { transform: translateX(-50%); } }
/* No dedo as fileiras andam mais devagar, e o critério é o ponteiro e não a
largura (a régua da casa). Não é capricho de ritmo: no celular cabe uma fala
e um pedaço da seguinte, então a mesma velocidade que no desktop dá meia
dúzia de segundos para ler cada uma — e sem ponteiro não há como pausar. Nos
326px de fala de um aparelho de 390, isto dá cerca de trinta segundos para a
fala atravessar a tela. */
@media (pointer: coarse) {
html[data-luz] .faixa-trilho { animation-duration: 108s; }
html[data-luz] .faixa-volta { animation-duration: 97s; }
/* E o apagamento das pontas passa a ser medido em PIXELS. Os 10% que no
desktop são 144px de acabamento viram 39px num aparelho de 390 — só que
ali a fala inteira mede 326px e a janela limpa sobrava com 312px, ou seja,
MENOR que a fala: nenhuma delas conseguia estar inteira e nítida ao mesmo
tempo, e o texto passava sempre com uma ponta apagada. O teto é a conta:
a fala mede a tela menos 64px, então cada ponta pode gastar no máximo
32px — 28 deixa a folga e ainda apaga com jeito. */
html[data-luz] .faixa-rolo {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
}
/* A trava dupla da folha inteira vale aqui também: se por qualquer caminho o
data-luz sobreviver à preferência de menos movimento, a faixa volta a ser
tira antes que o `animation: none` do fim do arquivo a deixe parada e
cortada pela metade. */
@media (prefers-reduced-motion: reduce) {
html[data-luz] .faixa-rolo {
overflow-x: auto;
-webkit-mask-image: none;
mask-image: none;
}
html[data-luz] .dep-copia { display: none; }
}
/* -------------------------------------------------- incluído e comparação */
/* As duas metades EMPILHAM, e não dividem a linha como até 03/09/2026. A régua
é larga por natureza — duas colunas, os rótulos embaixo, a tira do mês no pé
— e espremida em 7/12 da coluna ela vira gráfico de relatório. Empilhadas,
elas também dão o ritmo da página: a lista é clara, a ilha da régua é
escura, e é o corte entre as duas que transforma rolagem em leitura. */
.oferta { display: grid; gap: var(--e9); align-items: start; }
.oferta .inclui-bloco h2 { font-size: clamp(24px, 5.6vw, 32px); }
.inclui { margin-top: var(--e7); list-style: none; padding: 0; }
.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; }
/* ---------------------------------------------------------------- a régua */
/* A comparação com a agência é uma RÉGUA, e não uma tabela: duas colunas cuja
ALTURA é o preço, lado a lado. A tabela de cinco linhas que estava aqui
dizia muita coisa e não dizia a que decide — quanto isto custa perto do que
a pessoa já orçou —, e o desenho novo faz esse argumento num olhar.
O valor que comanda tudo é `--p`, que vem do DADO no style= do elemento (a
fração do preço da agência que o nosso ocupa, calculada em srv/landing.js).
A coluna cara tem `--alta`, a nossa tem `--alta * --p`, e é só isso: a frase
"as alturas são proporcionais aos preços" continua verdadeira sozinha no dia
em que um dos dois preços mudar. Altura escrita à mão aqui seria uma régua
que mente sem ninguém perceber.
A ilha escura é a mesma gramática do preço e da amostra (fundo noite, canto
de 24px, halo que acende ao entrar em cena) com uma camada a mais: a trama
de pontos, que dá superfície ao vazio atrás das colunas sem desenhar caixa
nenhuma.
Onde ela mora: na home é a TERCEIRA DOBRA desde 03/09/2026 (logo depois do
"para quem é", antes da constância — o preço como vantagem se mostra onde é
visto; a razão inteira está no cabeçalho de views/marketing/home.ejs e na
D-034). Nas páginas de profissão a posição é do marcador no markdown. Em
qualquer uma, o que fica em volta é claro: a lista do incluído acima, a
tira do mês abaixo, e nunca outra ilha escura encostada. */
.compara {
position: relative; overflow: hidden;
background: var(--noite); color: var(--claro);
border-radius: var(--r-ggg); padding: var(--e8) var(--e6);
display: grid; gap: var(--e8); align-items: center;
--alta: 150px;
--baixa: calc(var(--alta) * var(--p));
}
.compara::before, .compara::after { content: ''; position: absolute; pointer-events: none; }
.compara::before {
inset: 0;
background-image: radial-gradient(rgba(251, 247, 240, .045) 1px, transparent 1px);
background-size: 22px 22px;
}
.compara::after {
top: -200px; right: -140px; width: 560px; height: 560px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 214, 151, .16) 0%, transparent 65%);
opacity: .5; transition: opacity 1.2s var(--curva);
}
html[data-luz] .compara:not([data-aceso])::after { opacity: 0; }
.compara > * { position: relative; }
.compara .chapeu, .compara .chapeu i { color: var(--ouro-claro); }
.compara-texto h2 { max-width: 18ch; }
/* O grifo do título. `font-style: normal` porque o aqui não é ênfase de
voz — é a mesma frase, com duas palavras acesas. */
.compara-texto h2 em { font-style: normal; color: var(--ouro-claro); }
.compara-linha { margin-top: var(--e4); max-width: 42ch; font-size: 16px; color: var(--claro-2); }
.compara .acoes { gap: var(--e5); }
.compara .acoes .micro { max-width: 30ch; font-size: 13px; color: var(--claro-3); }
/* O teto de 560px é para a faixa em que o cartão ainda EMPILHA (o desenho de
duas colunas só entra em 1040): sem ele a régua se espicha pela largura
inteira, as duas barras de 128px ficam a meia tela uma da outra e a
comparação vira dois objetos soltos em vez de um gráfico. Acima de 1040 a
coluna já é mais estreita que isto e o teto não encosta em nada. */
.regua { display: grid; gap: var(--e3); max-width: 560px; margin-inline: auto; }
/* A pista é o sistema de coordenadas da grade: o `bottom` das linhas conta a
partir da BASE dela, que é a mesma base das colunas. Sem esta caixa a grade
mediria da borda do cartão, e as linhas descolariam das barras no dia em que
os rótulos de baixo mudassem de altura. */
.regua-pista { position: relative; border-bottom: 1px solid rgba(251, 247, 240, .28); }
.regua-grade { position: absolute; inset: 0; pointer-events: none; }
.regua-grade i { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(251, 247, 240, .1); }
.regua-grade i:nth-child(1) { bottom: calc(var(--alta) * .5); }
.regua-grade i:nth-child(2) { bottom: calc(var(--alta) * .75); }
.regua-grade i:nth-child(3) { bottom: var(--alta); border-top-color: rgba(251, 247, 240, .18); }
/* A única linha que atravessa a régua inteira em ouro é a NOSSA: é ela que faz
a leitura acontecer — o olho segue o traço e vê o quanto sobra em cima. */
.regua-nossa-linha { bottom: var(--baixa); border-top-color: rgba(255, 214, 151, .55) !important; }
.regua-nossa-linha span {
position: absolute; left: 0; bottom: 6px;
/* A linha é um — o rótulo dentro dele sairia em itálico de graça. */
font-style: normal;
font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--ouro-claro);
/* A placa de noite atrás dele não é enfeite: em toda largura em que as duas
colunas ocupam a pista, o rótulo cai POR CIMA da barra cara — e ouro
translúcido sobre a barra vira sujeira. Com a placa ele lê como anotação
de gráfico, que é o que ele é. */
background: var(--noite); padding-right: var(--e2);
}
.regua-barras {
position: relative;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e7);
align-items: end; height: calc(var(--alta) + 92px);
}
.regua-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--e3); height: 100%; }
.regua-barra { width: 100%; max-width: 128px; border-radius: var(--r-p) var(--r-p) 0 0; box-sizing: border-box; }
.regua-col .regua-barra {
height: var(--alta);
background: rgba(251, 247, 240, .08);
border: 1px solid rgba(251, 247, 240, .22); border-bottom: 0;
}
.regua-col-marca .regua-barra {
height: var(--baixa); border: 0;
background: linear-gradient(180deg, var(--ouro-claro) 0%, var(--ouro) 100%);
position: relative; overflow: hidden;
}
.regua-valor { margin: 0; font-family: var(--f-titulo); font-size: clamp(20px, 4.6vw, 26px); line-height: 1; color: var(--claro-3); white-space: nowrap; }
/* .62 e não .58: no celular o valor cai para 20px, e .58 punha o "/mês" em
11,6px — abaixo do piso de 12 da casa. Em .62 ele fecha em 12,4 no celular e
nos 16px do .preco-cartao no desktop, que é a mesma medida da mesma coisa. */
.regua-valor .mes { font-size: .62em; }
.regua-col-marca .regua-valor { font-family: var(--f-corpo); font-weight: 800; color: var(--ouro-claro); }
.regua-col-marca .cifrao { font-size: 18px; vertical-align: 18px; }
.regua-col-marca .inteiro { font-size: clamp(34px, 8vw, 48px); letter-spacing: -.03em; }
.regua-col-marca .centavos { font-size: 22px; }
.regua-col-marca .mes { font-size: 14px; font-weight: 600; color: var(--claro-2); }
.regua-selo {
border: 1px solid rgba(255, 214, 151, .5); border-radius: var(--r-redondo);
padding: 4px 13px; font-size: 12.5px; font-weight: 800;
color: var(--ouro-claro); white-space: nowrap;
}
/* O mesmo gap das colunas, pelo mesmo motivo de sempre: rótulo que não fica
embaixo da sua barra não é rótulo. */
.regua-pes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e7); text-align: center; }
.regua-pes > p { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--claro-3); }
.regua-quem { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--ouro-claro); }
.regua-diferenca { margin: 3px 0 0; font-size: 12px; color: rgba(255, 214, 151, .85); }
/* O escopo do preço, e ele é de PAPEL — fora da ilha. Os cartõezinhos são
brancos com sombra e o segundo botão é de contorno escuro: os dois só
existem sobre o claro. */
.compara-mes { margin-top: var(--e8); display: flex; align-items: center; gap: var(--e6); flex-wrap: wrap; }
.mes-posts {
flex: 1 1 200px; max-width: 340px;
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px;
}
.mes-posts i {
border-radius: var(--r-p); background: var(--branco); border: 1px solid var(--linha);
padding: 4px; display: flex; flex-direction: column; gap: 3px;
box-shadow: 0 4px 12px rgba(20, 18, 16, .1);
}
.mes-posts i::before { content: ''; height: 26px; border-radius: 5px; background: linear-gradient(135deg, var(--ouro-claro), var(--ouro)); }
.mes-posts i:nth-child(3n)::before { background: linear-gradient(160deg, var(--ouro-toque), var(--ouro-forte)); }
.mes-posts i:nth-child(3n+1)::before { background: linear-gradient(120deg, var(--ouro-claro), var(--ouro-forte)); }
/* A inclinação alternada é o que faz doze retângulos iguais parecerem doze
peças empilhadas à mão, e não uma tabela. */
.mes-posts i:nth-child(4n+1) { transform: rotate(-1.5deg); }
.mes-posts i:nth-child(4n+2) { transform: rotate(1deg); }
.mes-posts i:nth-child(4n+3) { transform: rotate(-1deg); }
.mes-posts i:nth-child(4n) { transform: rotate(1.4deg); }
.mes-posts b { height: 3px; width: 76%; border-radius: 2px; background: rgba(20, 18, 16, .4); }
.mes-posts b + b { width: 52%; background: rgba(20, 18, 16, .18); }
.mes-texto { flex: 1 1 240px; }
.mes-texto p:last-child { margin: var(--e2) 0 0; max-width: 44ch; font-size: 15.5px; line-height: 1.55; color: var(--tinta-2); }
.compara-mes .btn-vazado { flex: none; }
/* O brilho que atravessa a coluna de ouro e o halo que respira. São idle, e
não entrada: o contrato da casa manda o estado padrão ser o final, então o
padrão aqui é a coluna PARADA — o movimento só entra onde a pessoa não pediu
para ele não entrar. */
@media (prefers-reduced-motion: no-preference) {
.regua-col-marca .regua-barra { animation: pulsar-ouro 4s ease-in-out infinite; }
.regua-col-marca .regua-barra::after {
content: ''; position: absolute; top: -10%; bottom: -10%; width: 46%;
background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
animation: brilhar-ouro 3.6s ease-in-out infinite;
}
}
@keyframes brilhar-ouro {
0%, 55% { transform: translateX(-130%) skewX(-12deg); }
90%, 100% { transform: translateX(230%) skewX(-12deg); }
}
@keyframes pulsar-ouro {
0%, 100% { box-shadow: 0 0 32px rgba(255, 214, 151, .28); }
50% { box-shadow: 0 0 58px rgba(255, 214, 151, .5); }
}
/* ------------------------------------------------------------- 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; }
.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 desconto — o mesmo dispositivo do "Post automático" da vitrine. */
.selo-ano {
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-family: var(--f-corpo);
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-ano i { font-style: normal; font-size: 13px; line-height: 0; }
.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; }
/* O único link do cartão de preço, e é a outra porta da venda — quem não quer
o anual sai por aqui. A linha tem 13,5px, o que dá um alvo de 18: o padding
engorda a área de toque para 38 sem mexer no desenho, porque em elemento
inline ele não entra no cálculo da linha. Sobra por cima e por baixo, e ali
não há nada clicável para roubar o toque. */
.preco-cartao .preco-alt a { color: inherit; padding-block: 10px; }
/* A porta do cartão de crédito quando o botão grande virou conversa: quem já
decidiu não precisa falar com ninguém, e encontra o checkout aqui — abaixo
da alternativa mensal, e ainda dentro do cartão. */
.preco-cartao .preco-direto { border-top: 0; margin-top: 0; padding-top: var(--e3); }
.preco-cartao .preco-direto a { color: var(--ouro-claro); font-weight: 700; }
/* ------------------------------------------------- a fila de confiança */
/* As três garantias sob o cartão de preço — o mesmo desenho do checkout
(publico.css), copiado porque a landing não carrega aquela folha: quem está
com o cartão na mão não precisa de um parágrafo, precisa de três fatos. O
embrulho .confianca-home aproxima a fila da seção do preço, que só tem
padding no topo. */
.confianca-home { margin-top: var(--e6); }
.confianca {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--e2) var(--e5);
font-size: 13px;
color: var(--tinta-3);
}
.confianca i { font-style: normal; font-weight: 800; color: var(--ouro); margin-right: var(--e1); }
/* --------------------------------------------------------------- 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); }
/* A dúvida que sobrou do FAQ vai para a mesma conversa dos botões — o link é
o .link-conversa do papel, e o pé fica no tom de apoio para não competir
com as perguntas. */
.faq-pe { margin-top: var(--e6); font-size: 15px; color: var(--tinta-3); }
/* ------------------------------------------------------------- o fecho */
.fecho { display: grid; gap: var(--e9); align-items: center; }
.fecho h2 { font-size: clamp(30px, 7.4vw, 44px); line-height: 1.12; max-width: 24ch; }
.fecho .acoes { margin-top: var(--e7); }
.fecho .acoes .micro { max-width: 34ch; }
/* O retrato do fecho é a promessa em objeto: a foto do consultório, e por cima
dela a etiqueta que diz de quem é o nome que fica. */
.retrato { position: relative; justify-self: center; max-width: 100%; }
.retrato > img { width: 300px; max-width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: 18px; box-shadow: 0 24px 60px rgba(20, 18, 16, .18); }
.retrato-nome {
position: absolute; left: -16px; bottom: var(--e6);
background: var(--noite); color: var(--claro);
border-radius: var(--r-m); padding: var(--e3) var(--e5);
box-shadow: 0 12px 32px rgba(20, 18, 16, .3);
}
.retrato-nome b { font-family: var(--f-titulo); font-size: 15px; font-weight: 600; color: var(--ouro-claro); }
.retrato-nome p { margin-top: 2px; font-size: 11.5px; color: var(--claro-3); }
.retrato-faisca {
position: absolute; top: -14px; right: -14px;
width: 52px; height: 52px; border-radius: 50%; background: var(--ouro-claro);
display: flex; align-items: center; justify-content: center;
font-size: 22px; color: var(--noite);
}
/* ------------------------------------------------------------- conhecer */
/* A saída de quem não quer assinar sem falar com alguém. O estado padrão aqui
é o final, como no resto da página — a revelação por scroll é [data-revela],
e o pré-estado dela só existe sob html[data-luz]. */
.conhecer {
border: 1px solid var(--linha); background: var(--branco); border-radius: var(--r-gg);
padding: var(--e7); display: grid; gap: var(--e6);
}
.conhecer-texto h2 { margin-top: var(--e3); font-size: clamp(24px, 5.6vw, 32px); line-height: 1.18; max-width: 20ch; }
.conhecer-texto p { margin-top: var(--e4); font-size: 15.5px; color: var(--tinta-2); max-width: 52ch; }
/* O botão da conversa é o caminho principal do bloco, e mora na coluna do
texto — o formulário ao lado é a alternativa de quem não quer ser o primeiro
a falar. */
.conhecer-texto .btn { margin-top: var(--e6); }
.conhecer-texto .micro { margin-top: var(--e3); }
.conhecer-form { display: grid; gap: var(--e3); align-content: start; }
.conhecer-linha { display: grid; gap: var(--e3); }
/* A pergunta que apresenta o formulário como segunda via. Não é rótulo de
campo nenhum — é a fala que muda de caminho. */
.conhecer-ou {
margin-bottom: var(--e2); font-size: 15px; font-weight: 700; color: var(--tinta);
}
/* O contrato de campo da LANDING. Ele mora aqui, e não no publico.css, por um
motivo que custou uma regressão para aparecer: a home **não carrega o
publico.css** (só landing.css + landing-luz.css), e o formulário "Quero
conhecer" — o que traz o lead — vive nela. Escrito lá, ele deixava estes
campos com o desenho cru do navegador justamente na página de aquisição.
Por EXCLUSÃO e não por enumeração: a lista `text/email/tel` que estava aqui
deixava de fora qualquer `type` novo, e a isca `website` já caía nela.
A medida é a mesma do `.campo` do publico.css (52px de altura, borda
`--linha-3`, raio `--r-m`) — antes eram duas alturas de campo na mesma
jornada, uma na home e outra no checkout. O 16px é piso e não gosto: abaixo
disso o Safari do iPhone dá zoom na página inteira ao focar o campo, e não
desfaz sozinho. */
.conhecer input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']):not([type='submit']):not([type='button']):not([type='hidden']),
.conhecer select,
.conhecer textarea {
width: 100%;
min-height: 52px;
font: inherit;
font-size: 16px;
color: var(--tinta);
background: var(--branco);
border: 1px solid var(--linha-3);
border-radius: var(--r-m);
padding: 0 var(--e4);
appearance: none;
-webkit-appearance: none;
transition: border-color .15s var(--curva), box-shadow .15s var(--curva);
}
.conhecer textarea { min-height: 110px; padding: 12px var(--e4); resize: vertical; }
.conhecer input::placeholder, .conhecer textarea::placeholder { color: var(--tinta-3); opacity: 1; }
.conhecer input:hover:not(:focus), .conhecer textarea:hover:not(:focus) { border-color: var(--linha-3); }
.conhecer input:focus, .conhecer textarea:focus {
outline: none;
border-color: var(--ouro-forte);
box-shadow: 0 0 0 3px rgba(143, 95, 20, .16);
}
/* O raio repetido: o `:focus-visible` global desta folha achata o canto de
qualquer coisa focada, e com a caixa do campo escrita por exclusão (0,1,1
com o `:not`) o empate ia para ele. Aqui a regra devolve o raio do campo. */
.conhecer input:focus-visible, .conhecer textarea:focus-visible {
outline: 2px solid var(--ouro-forte);
outline-offset: 2px;
border-radius: var(--r-m);
}
/* `:user-invalid` e não `:invalid`: `:invalid` acenderia no campo obrigatório
vazio assim que a seção entra em cena, e o formulário nasceria vermelho. */
.conhecer input:user-invalid { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(168, 50, 31, .14); }
/* O preenchimento automático do Chrome pinta o campo de lilás; a sombra interna
é o único jeito de repintar aquele fundo. */
.conhecer input:-webkit-autofill,
.conhecer input:-webkit-autofill:hover,
.conhecer input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--tinta);
-webkit-box-shadow: 0 0 0 1000px var(--branco) inset;
caret-color: var(--tinta);
transition: background-color 9999s;
}
/* A isca da armadilha de robô mora fora da tela e não pode ganhar altura. */
.conhecer .fora-de-vista input { min-height: 0; }
.conhecer .btn { justify-self: start; margin-top: var(--e2); }
.conhecer .micro { color: var(--tinta-3); }
.conhecer-pronto {
border: 1px solid var(--linha); border-radius: var(--r-g); padding: var(--e5) var(--e6);
background: rgba(185, 126, 36, .06); align-self: start;
}
.conhecer-pronto strong { font-size: 16px; }
.conhecer-pronto p { margin-top: var(--e2); font-size: 14.5px; color: var(--tinta-2); }
.conhecer-pronto .btn { margin-top: var(--e5); }
/* "Abrindo o WhatsApp para você…" só é verdade quando alguém vai abrir — e
quem abre é o script, só no celular (ver assets/landing.js). Por isso esta é
a única linha da página que nasce escondida, e quem a mostra é o próprio
script, no mesmo passo em que agenda a abertura: sem isso ela seria uma
promessa falsa em toda tela que não abre nada. */
.conhecer-abrindo { display: none; }
.conhecer-abrindo[data-abrindo] { display: block; margin-top: var(--e3); }
/* Isca de robô e rótulos para leitor de tela: fora da vista, nunca do DOM
(display:none tiraria o campo do envio e o rótulo do leitor). */
.fora-de-vista { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Link discreto ao lado do botão: o caminho principal segue sendo assinar.
O padrão é o do papel — é onde ele aparece no fecho. Dentro da capa a única
faixa escura da página inverte as duas cores: o repouso é o creme fraco e o
hover é o creme cheio, senão o hover cairia no --tinta, que é o mesmo tom do
--noite do fundo, e o link sumiria debaixo do cursor.
A altura vem do padding, e não do tamanho da letra: sem ele este link é uma
faixa de 24px no meio da tela, que no dedo é alvo de menos. */
.link-conversa {
display: inline-block; padding-block: 8px;
font-size: 15px; font-weight: 600; color: var(--tinta-2);
text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--linha);
}
.link-conversa:hover { color: var(--tinta); text-decoration-color: currentColor; }
.capa .link-conversa { color: var(--claro-2); text-decoration-color: rgba(251, 247, 240, .3); }
.capa .link-conversa:hover { color: var(--claro); text-decoration-color: currentColor; }
/* ---------------------------------------------------- o botão da conversa */
/* O destino da página ao alcance da página inteira: da primeira dobra ao
rodapé, sem depender de a pessoa estar parada em cima de um CTA. É HTML e
existe sem script — só não existe sem número configurado (ver home.ejs).
No celular ele é o disco com o glifo, que é o quanto cabe sem tapar a
leitura; da tela média para cima ganha a legenda. O nome acessível vem do
aria-label do link nos dois casos, então esconder a legenda não esconde
nada de quem lê por leitor de tela. */
.zap-flutua {
position: fixed; z-index: 9;
right: var(--margem); bottom: max(var(--margem), env(safe-area-inset-bottom));
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px; border-radius: var(--r-redondo);
background: var(--zap); color: var(--branco);
font-size: 15px; font-weight: 700; text-decoration: none;
box-shadow: 0 12px 30px rgba(20, 18, 16, .3);
}
.zap-flutua:hover { background: var(--zap-toque); color: var(--branco); }
.zap-flutua .glifo-zap { width: 26px; height: 26px; }
.zap-flutua span { display: none; }
.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%; }
/* O botão fixo pousa exatamente aqui no fim da página: a folga é para os links
legais não morarem debaixo dele. Só existe quando o botão existe — sem
`:has` a página perde a folga e nada mais, que é degradação de sobra. */
body:has(.zap-flutua) .rodape { padding-bottom: calc(var(--e9) + 56px); }
/* Inline-block por causa do dedo: com a letra de 13px o link tem 17px de
altura, e é ele que a pessoa erra no rodapé. O padding leva o alvo a 33px e
afasta as duas linhas quando a frase quebra; de quebra, o nome do link deixa
de partir no meio ("Já é cliente? / Entrar"). */
.rodape a { color: var(--tinta-2); text-decoration: none; display: inline-block; padding-block: 8px; }
.rodape a:hover { color: var(--ouro-forte); text-decoration: underline; }
/* -------------------------------------------------------------- respostas */
@media (min-width: 600px) {
:root { --margem: var(--e7); }
/* Com largura, o disco vira pílula e diz o que faz. */
.zap-flutua { width: auto; height: auto; min-height: 52px; padding: 0 var(--e5); gap: 10px; }
.zap-flutua span { display: inline; }
.zap-flutua .glifo-zap { width: 21px; height: 21px; }
/* 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; }
.titulo { font-size: 48px; }
.subtitulo { font-size: 18px; }
.produto-caixa {
max-width: 360px;
transform: rotate(-2.5deg);
transition: transform .35s var(--curva);
}
.produto-caixa:hover, .produto-caixa:focus-within { transform: rotate(0); }
.etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demonstra { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.passos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.frentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.publico-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5); }
/* A ficha do post cresce junto com o cartão. */
.vpost-ficha { font-size: 14px; }
.frente { min-height: 200px; }
/* Com o título de 40px, os 40px de respiro colavam a faixa nele: de perto o
filete de cima parecia sublinhar a manchete em vez de abrir a seção. */
.faixa { margin-top: var(--e9); }
/* Sobrando largura, a fala pode gastar mais no respiro interno. Fixo em
32px e não em var(--margem): a partir de 1040px a margem da coluna vai a
40px, e com 40 de cada lado a fala mais comprida da fileira de baixo cai
para três linhas — o que abre o vão de assinatura que os 450px foram
escolhidos para fechar. No celular ficam os 24px do padrão. */
.dep { padding-inline: var(--e7); }
/* A arte cresce no mesmo ponto em que o respiro da fala cresce, e não é
coincidência: é daqui para cima que a fala trava em 460px e para de
disputar largura com a assinatura. Abaixo de 600 ela fica menor, que é o
que mantém "Nutricionista · Florianópolis" numa linha só num aparelho de
360 — e a linha de nomes inteira vale mais que 24px de arte. */
.dep-quem { column-gap: var(--e5); }
.dep-arte { width: 112px; height: 140px; }
/* Com largura, o incluído vira duas colunas: em uma só, seis itens curtos
abrem linhas de 1000px com quatro palavras dentro. */
.inclui { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e8); }
/* A régua cresce com a tela, e o `--alta` é o único número a mexer: as
colunas, as linhas da grade e o vão de cima saem todos dele. */
.compara { padding: var(--e9) var(--e8); --alta: 200px; }
.mes-posts { flex: none; grid-template-columns: repeat(6, 46px); gap: 9px; }
.amostra { padding: var(--e9) var(--e8); }
.preco-bloco { padding: var(--e9) var(--e8); }
.retrato-nome { left: -28px; }
}
@media (min-width: 1040px) {
:root { --margem: var(--e8); --secao: var(--e10); }
.topo-logo { height: 44px; }
.topo-links { gap: var(--e6); }
.heroi { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e9); align-items: center; padding: var(--e9) 0 var(--e10); }
/* Duas colunas: o post não está mais debaixo de nada (ver a folga lá em cima). */
.heroi .produto { margin-top: 0; }
.titulo { font-size: 52px; }
.etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e6); }
/* Com largura, a oferta abre em duas colunas: o convite de um lado, a
mecânica do outro. Os três tempos continuam empilhados — em fileira eles
virariam três cartões de plano, e a leitura de cima para baixo é o que
mantém a ordem sendo informação. */
.amostra { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--e9); align-items: center; }
/* Os seis de uma vez, e o degrau das pares (ver o bloco "para quem é"). */
.publico-fila { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e5); }
.publico-quem:nth-child(even) { margin-top: var(--e6); }
/* Só onde as quatro etapas são uma linha única: a linha de ouro se desenha
por cima dos filetes quando a régua acende. Os filetes ficam — eles dizem
"só no primeiro aconteceu algo"; a Be Visible acende os quatro. */
.constancia .etapas { position: relative; }
.constancia .etapas::after {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--ouro), var(--ouro-claro));
transform-origin: left; pointer-events: none;
transition: transform 1.6s var(--curva);
}
html[data-luz] .constancia .etapas:not([data-aceso])::after { transform: scaleX(0); }
.tese { font-size: 19px; }
.frentes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e6); }
/* A vitrine se abre: a grade de um lado, o post escolhido do outro. As duas
colunas têm a medida exata dos dois cartões — a grade na largura de perfil
do Instagram, o post um pouco maior, como na web dele. Em colunas
fracionárias os cartões ficavam presos à esquerda de caixas largas demais e
abriam um vão morto entre eles.
O `align-items: start` segura o leitor no topo: o post aberto quase sempre
é mais alto que a grade, mas um post de feed curto não deve descer atrás
das quatro semanas. */
.vitrine-corpo { grid-template-columns: 420px minmax(0, 460px); justify-content: start; gap: var(--e9); align-items: start; }
.vitrine-perfil .vperfil { margin-left: 0; }
.vitrine-leitor { justify-items: start; }
.vitrine-leitor .vpost { max-width: 460px; }
.compara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e9); padding: var(--e9); }
.preco-bloco { grid-template-columns: minmax(0, 1fr) auto; gap: var(--e8); padding: var(--e9); }
.preco-cartao { padding: var(--e8); }
.conhecer { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e8); padding: var(--e8); align-items: center; }
.conhecer-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fecho { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.fecho .acoes { gap: var(--e7); }
}
/* 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; }
}
/* ------------------------------------------------- a vitrine de estilos */
/* Dez perfis fictícios, um por registro visual, e um seletor de PESSOAS que
troca o perfil inteiro (views/publico/_estilos.ejs, a seção longa, hoje sem
página que a invoque; no herói da home e das /para/* é _estilos-heroi.ejs,
com a tira de rostos — o celular dos dois é o parcial comum
_estilos-cel.ejs). O cartão do perfil é
primo do .vperfil da vitrine das /para/* — mesma tipografia do Instagram,
mesma grade de três colunas —, e o que muda é que aqui existem dez grades
empilhadas na mesma célula do grid, e só a do perfil escolhido é exibida.
Três engrenagens, e as três no CSS:
1. QUEM manda na exibição. Sem script, o rádio: o