/* ============================================================
KIT MODERNO — "Cacau e Medida"
Camada 2. A segunda pele do sistema, ao lado do kit de saúde.
POR QUE ELE EXISTE
O Layout 1 e o Layout 2 ficaram gêmeos, e o Daniel viu de cara.
O erro foi meu e foi de camada: variei a ORDEM DOS BLOCOS e mantive
o kit idêntico. A cara de uma página é a camada 2 — paleta e fontes.
Trocar bloco de lugar não muda a cara de nada.
DE ONDE VEIO
Medido na referência "renew" (docs/referencias/), amostrada pixel a
pixel. Não é releitura de memória: os quatro tons abaixo marcados
como MEDIDO saíram do arquivo.
O QUE ELE INVERTE, em relação ao kit de saúde
família de matiz 30-36° âmbar → 18° chocolate avermelhado
dominante creme claro → escuro, 43% da tela
display serifada → grotesca
rótulo grotesca CAPS → MONOESPAÇADA CAPS
acento verde 158° → lavanda 224°, quase complementar
raio 3-6px → 0
============================================================ */
/* Space Grotesk e Space Mono são irmãs, da mesma fundição, desenhadas
para andar juntas. E nenhuma das duas é Inter — que é o ponto.
OS PESOS 500 E 600 ESTAVAM FALTANDO AQUI, e o efeito era invisível:
o CSS pedia `font-weight: 600` em cinco lugares, o navegador só tinha
400 e 700 para escolher, e encaixava 600 em 700. Medido na página:
54 elementos a 400, 27 a 700, ZERO a 600. Hierarquia de dois níveis
onde o CSS declarava quatro — sem erro, sem aviso no console.
É por isso que peso declarado e peso carregado têm que bater.
⚠ O @import SAIU DAQUI, e a página precisa carregar isto no :
Medido na cadeia de requisições, com o @import ainda aqui:
kit.css 166ms → 215ms
fonts.googleapis 222ms ← só COMEÇA depois do kit.css terminar
`@import` dentro de CSS serializa: o navegador precisa baixar e ler o
arquivo para só então descobrir que existe outra folha a pedir. Em
localhost são 7ms e não se nota; numa rede de celular são 100-300ms de
texto invisível, e aí se nota muito.
Como no HTML, o pedido da fonte sai junto com o dos outros CSS,
e o preconnect ainda adianta DNS e TLS. Custo: o kit deixa de ser
autossuficiente — quem usar este kit tem que levar as três linhas. */
:root {
--fonte-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
--fonte-corpo: 'Space Grotesk', system-ui, -apple-system, sans-serif;
/* A monoespaçada é o maior diferencial visual do kit. Ela não é
decoração: ela marca o que é DADO — rótulo, número, medida. */
--fonte-mono: 'Space Mono', ui-monospace, 'Cascadia Mono', monospace;
/* --- Escuro: o dominante -------------------------------- */
/* A ESCADA. Quatro degraus, e a ordem importa: cada um é um passo de
luminosidade acima do anterior, e é ISSO que carrega profundidade.
Contado nos 74 DESIGN.md de sites reais: 64 declaram que EVITAM drop
shadow, e na coleção inteira existe um único valor de sombra concreto.
Linear, literal: "depth is carried by surface ladder + hairline
borders". Ferrari tem uma sombra em todo o site, e só no hover.
A gente tinha os três primeiros tokens e usava só dois: o degrau 2
(#60473C) estava comentado como "superfície elevada" e aparecia
apenas em seleção de texto e barra de rolagem. Medido no navegador,
a página renderizava três cores de fundo e essa não estava entre
elas. Faltando o degrau, a profundidade caiu no gradiente — e
gradiente espalhado não lê como profundidade, lê como névoa. */
--cacau-fundo: #2C170E; /* 0 · piso — MEDIDO, o painel do hero */
--cacau: #49291B; /* 1 · banda — MEDIDO, 43% da referência */
--cacau-claro: #60473C; /* 2 · card — MEDIDO, elevado sobre a banda */
/* 3 · DERIVADO, não medido: mesma matiz e saturação do degrau 2, um
passo de luminosidade acima. Serve a card sobre card e a hover.
Fica marcado como derivado para não se confundir com os medidos. */
--cacau-alto: #6E564A;
/* --- Claro: a pausa -------------------------------------- */
--creme: #FFFDF5; /* MEDIDO · 17% da referência */
--creme-fundo: #F6EFE4;
--areia: #E2D5C6;
/* --- Texto ------------------------------------------------ */
--tinta: #1A0E08; /* 18,6:1 sobre o creme */
--tinta-fraca: #6B5346; /* 7,0:1 */
--sobre-escuro: #F2E9DE; /* 10,8:1 sobre o cacau */
--sobre-escuro-medio: #BFAB9B; /* 5,9:1 */
--sobre-escuro-fraco: #AE978A; /* 4,7:1 — subiu de #9A8477, que dava 3,68 */
/* CONSEQUÊNCIA DA ESCADA, e ela me pegou na medição desta mesma passada.
Construir o degrau 2 (#60473C) como superfície de card clareou o
fundo — e clarear o fundo DERRUBA o texto fraco que está sobre ele.
Os seis `cite` dos depoimentos caíram de 4,7:1 para 3,08:1 sem que
uma linha de cor fosse tocada.
Calculado, não tentado: sobre o #60473C o texto precisa de luminância
relativa ≥ 0,504 para bater 4,5:1. O --sobre-escuro-medio (#BFAB9B)
tem 0,426 e dá 3,86 — melhor e ainda insuficiente. Este tom tem
0,678 e mede 5,9:1, e continua claramente mais quieto que o
--sobre-escuro, então a hierarquia dentro do card sobrevive.
A lição é de sistema: cada degrau de superfície precisa do seu
degrau de tinta. Escada de fundo sem escada de texto quebra
acessibilidade em silêncio. */
--sobre-card-fraco: #E2D5C6; /* 5,9:1 sobre o degrau 2 */
/* --- O fio de 1px ----------------------------------------
A outra metade do mecanismo, junto com a escada. O detalhe que a
Ferrari ensina: o fio escuro dela (#303030) é o MESMO hex de
canvas-elevated. A borda não é cor nova — é o próximo degrau da
escada, virado de lado. O nosso #5A4034 segue a mesma lógica: fica
entre o degrau 2 e o 3.
`--borda-no-escuro` conserva o nome: são 9 usos no kit e no layout,
e renomear por gosto é mexer em 9 lugares para mudar nada. */
--borda-no-escuro: #5A4034;
/* Faltava o par para superfície clara: sobre o creme não havia fio
nenhum. Derivado do --creme-fundo, um passo abaixo. */
--fio-no-claro: #E8DECE;
/* --- O brilho de topo -------------------------------------
Duas fontes independentes descrevem o mesmo recurso, e é o único
item da skill high-end-visual-design que entra sem ressalva.
Linear: "subtle white edge highlight on the top edge of lifted
panels — gives the dark surface a faint pixel-rendered feel"
high-end-visual-design: inset 0 1px 1px rgba(255,255,255,0.15)
Alfa 0,08 e não 0,15: nosso escuro é cacau quente, não preto. A
0,15 sobre o #49291B isso vira uma linha cinza visível; a 0,08 lê
como aresta iluminada. CONFERIDO no navegador, não estimado.
Funciona com canto reto, então sobrevive ao raio zero do kit. */
--brilho-topo: inset 0 1px 0 rgb(255 255 255 / 0.08);
/* --- Movimento -------------------------------------------
Esta curva vem da high-end-visual-design, e ela é a ÚNICA fonte que
a gente tem: contado nos 74 DESIGN.md, zero têm seção de movimento e
só 2 citam cubic-bezier de passagem. Os 74 respondem superfície,
fio e sombra; não respondem movimento.
0.32, 0.72, 0, 1 sai rápido e assenta devagar — o objeto tem massa.
O terceiro valor é 0: a chegada não tem aceleração nenhuma, e é isso
que faz parecer que encostou em vez de parar.
⚠ PENDÊNCIA: hoje há QUATRO curvas no sistema (0.4/0/0.2/1 no núcleo,
0.16/1/0.3/1 nas entradas, 0.22/1/0.36/1 no kit, e esta). Unificar
mexe nos dois kits e nos três layouts, então fica para uma passada
própria — mas fica escrito, porque curva inconsistente é o tipo de
coisa que ninguém aponta e todo mundo sente. */
--curva: cubic-bezier(0.32, 0.72, 0, 1);
--duracao-hover: 200ms;
/* --- Lavanda: o acento, e ele tem UM emprego --------------
MEDIDO na barra de resultado da referência. É quase complementar
do chocolate (224° contra 18°), e essa tensão é a assinatura do
kit. Emprego único: marcar NÚMERO MEDIDO — a nota, a contagem de
avaliações, o tempo de atuação. Nunca em botão, nunca em borda,
nunca em texto corrido. No dia em que ele virar cor de botão, o
kit perde o acento e vira mais um marrom. */
--lavanda: #D2DDFB;
/* --- Luz ---------------------------------------------------
O que faltava na página não era efeito, era FONTE DE LUZ. Tudo
era cor chapada, e cor chapada não tem profundidade porque não
tem de onde vir.
Este âmbar é a luz de janela das próprias fotos do consultório —
a mesma que cai na parede atrás dela. Ele nunca aparece como cor
de elemento: só como luz sobre superfície, sempre da mesma
direção. Fonte de luz que muda de lugar destrói a ilusão. */
--luz: #D9A567;
--erro: #A33A22; /* tijolo, 11° — da família, não vermelho de framework */
/* Canto reto. O kit de saúde usa 3-6px; aqui é ZERO, e é decisão
estrutural, não economia: é metade do que separa os dois. */
--raio-p: 0; --raio-m: 0; --raio-pilula: 0;
}
body {
font-family: var(--fonte-corpo);
color: var(--sobre-escuro);
background: var(--cacau);
}
/* --- Tipografia -------------------------------------------
A grotesca faz TUDO que é fala. A monoespaçada faz tudo que é
etiqueta. A separação é rígida e é ela que dá o tom do kit. */
.display, .titulo { font-family: var(--fonte-display); font-weight: 700; }
/* Tracking negativo forte: Space Grotesk foi desenhada com espaço de
sobra, e em tamanho de display isso lê como frouxo. */
.display { letter-spacing: -0.035em; }
.titulo { letter-spacing: -0.025em; }
.sobrelinha {
font-family: var(--fonte-mono);
font-weight: 400;
letter-spacing: 0.1em; /* menos que os 0,14 do kit de saúde: mono já
vem espaçada, e somar os dois esparrama */
color: var(--sobre-escuro-medio);
}
.conduz { color: var(--sobre-escuro-medio); }
/* --- Seção clara: a pausa dentro do escuro ------------------
Aqui a polaridade inverte por completo. É o ritmo do kit: blocos
escuros longos, cortados por um claro que respira. */
.secao-clara { background: var(--creme); color: var(--tinta); }
.secao-clara .conduz,
.secao-clara .texto-corrido { color: var(--tinta-fraca); }
.secao-clara .sobrelinha { color: var(--tinta-fraca); }
.secao-fundo { background: var(--cacau-fundo); }
/* --- Botões: a ação é INVERSÃO, não cor ---------------------
A referência não tem botão colorido: ele é sempre o oposto do fundo.
Isso é mais forte do que parece — a ação vira o ponto de maior
contraste da tela, e nenhum outro elemento pode competir. */
.botao {
font-family: var(--fonte-mono);
font-weight: 700;
font-size: var(--texto-peq);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Uma reflexão atravessa o botão ao passar o mouse. Não é gradiente de
fundo, que brigaria com o canto reto e o chapado do kit — é uma faixa
de luz cruzando uma superfície sólida, como acontece em material de
verdade. Some sozinha ao sair, e sob movimento reduzido nem entra. */
.botao { position: relative; overflow: hidden; isolation: isolate; }
.botao::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(105deg, transparent 38%,
color-mix(in srgb, var(--luz) 40%, transparent) 50%, transparent 62%);
transform: translateX(-120%);
transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.botao:hover::after, .botao:focus-visible::after { transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) { .botao::after { display: none; } }
/* Mas NÃO no botão principal: ele ganhou a luz contínua logo abaixo, e
duas luzes no mesmo elemento é uma competindo com a outra. Uma por
estado — contínua em repouso, escala no hover. O botão secundário
fica com a faixa, que é o efeito dele. */
.botao-principal::after { display: none; }
.botao-principal { background: var(--creme); color: var(--tinta); }
/* ============================================================
A LUZ QUE VAI E VEM — adaptado do CSS que o Daniel usa nos botões
da Orbis (docs/Recursos/codigos-do-daniel.md).
O original é Elementor e faz três coisas. Entram duas:
ENTRA a luz percorrendo o botão sem parar, 5s, ida e volta.
É o que dá vida sem depender do cursor — e num CTA de
página de conversão isso é a função, não enfeite.
ENTRA o `scale` no hover, que é resposta física ao cursor.
SAI `border-radius: 10px`. Decisão do kit, canto reto.
SAI a pilha de sombras 3D (`0 5px 0 #2a4575` mais um borrão de
30px a 56% de alfa). Contado nos 74 DESIGN.md: 64 evitam
drop shadow, e esse borrão é exatamente a "harsh drop
shadow" que a high-end-visual-design proíbe por nome.
⚠ O ORIGINAL TEM UM BUG, e vale avisar a Orbis: a primeira sombra é
`inset 0px 0px 5px 5px #,` — um `#` sozinho, que não é cor válida.
Quando um valor da lista é inválido, o navegador descarta a
DECLARAÇÃO INTEIRA, e nem `!important` salva. Ou seja: hoje aquele
botão não tem sombra nenhuma das três, nem a de baixo-relevo.
POR QUE EU NÃO ANIMO `background-position`, que é o que o original faz:
essa propriedade força REPINTURA a cada quadro. Com cinco botões numa
página, rodando infinito, é repintura constante — cara no celular.
`transform` roda na GPU e faz o mesmo desenho. Mesma luz, sem o custo.
============================================================ */
.botao-principal::before {
content: ""; position: absolute; inset: -1px; z-index: -1;
background: linear-gradient(100deg,
transparent 34%,
color-mix(in srgb, var(--luz) 42%, transparent) 50%,
transparent 66%);
animation: luz-passando 5s ease-in-out infinite;
will-change: transform;
}
@keyframes luz-passando {
0%, 100% { transform: translateX(-62%); }
50% { transform: translateX(62%); }
}
/* Sob movimento reduzido a luz SAI, não para. O núcleo encurta toda
animação para uma volta de 0,01ms, e sem keyframe ativo o `transform`
cai para `none` — a faixa ficava estacionada no MEIO do botão, uma
mancha dourada atrás do texto. Medido no print. */
@media (prefers-reduced-motion: reduce) { .botao-principal::before { display: none; } }
/* O hover: cresce e se arma. O `scale` é o que o Daniel gosta no botão
da Orbis; 1,03 e não 1,05 porque o nosso botão é largo — quanto maior
o elemento, menos escala ele precisa para o olho registrar o mesmo
salto. Em botão de 300px, 5% são 15px de crescimento e lê como pulo. */
.botao-principal:hover { transform: scale(1.03); }
/* E afunda ao clicar, que é a outra metade do gesto: o original usa
scale(1) partindo de 1,05; aqui vai abaixo do repouso, para o clique
ter reação própria em vez de só desfazer o hover. */
.botao-principal:active { transform: scale(0.99); }
/* O ANEL SAIU. Eu tinha escrito aqui que "o hover não clareia, ele se
ARMA: um anel por dentro, na cor do fundo". Era defensável e era demais:
com a luz contínua já rodando e o scale no hover, o anel virava um
terceiro acontecimento no mesmo gesto, e lia como borda aparecendo.
Decisão do Daniel, e ela é melhor: o hover do botão é UMA coisa só —
ele cresce. Igual ao botão da Orbis, que é o que ele já sabe que
converte. Menos é o ponto. */
.secao-clara .botao-principal { background: var(--tinta); color: var(--creme); }
/* --- Superfícies do navegador -------------------------------
As partes que ninguém desenha continuam carregando o design. Seleção,
cursor de texto, barra de rolagem, anel de foco e os algarismos vêm
com o padrão do navegador, que não pertence a sistema nenhum.
É o sinal mais barato de que a página foi construída, e o mais
esquecido. */
::selection { background: var(--cacau-claro); color: var(--sobre-escuro); }
html {
caret-color: var(--lavanda);
scrollbar-color: var(--cacau-claro) var(--cacau-fundo);
scrollbar-width: thin;
}
/* `currentColor` dava 1,46:1 no botão creme — um anel de foco invisível,
que é pior que anel nenhum porque parece resolvido. A lavanda tem
contraste nas duas polaridades e é o único uso dela fora de número. */
:focus-visible { outline: 3px solid var(--lavanda); outline-offset: 3px; }
/* Algarismo de largura fixa onde número se compara ou se alinha. */
/* Só onde a fonte não é monoespaçada — em mono já é o padrão. */
.nota-numero, .hero-assinatura { font-variant-numeric: tabular-nums; }
/* --- O número medido ---------------------------------------
O dispositivo que o kit de saúde não tem: o dado em monoespaçada,
grande, com a lavanda. Só entra número CONFERÍVEL. */
.medida {
font-family: var(--fonte-mono);
font-size: var(--texto-lg); line-height: 1;
font-weight: 700; color: var(--lavanda);
/* `font-variant-numeric` e não `font-feature-settings: 'tnum'`: fazem a
mesma coisa, mas o segundo é a porta de baixo — qualquer outra regra
que declare `font-feature-settings` apaga esta inteira, porque a
propriedade substitui a lista toda em vez de somar. A de cima não tem
esse problema.
(A Space Mono já tem dígito de largura fixa por ser monoespaçada;
isto garante o alinhamento se o kit trocar de fonte um dia.) */
font-variant-numeric: tabular-nums;
}
/* A monoespaçada fica no NÚMERO, onde ela alinha algarismo. Sai do
rótulo, onde ela era só fantasia de "técnico" — que é exatamente o
tell que as duas skills apontam. */
.medida-rotulo {
font-size: var(--texto-micro); line-height: 1.4;
color: var(--sobre-escuro-fraco); margin-top: var(--e2);
}
/* DENTRO DO CARTÃO DE VIDRO o rótulo sobe para a tinta mais clara, e isto
é a mesma lição da escada de superfícies: superfície diferente precisa
de degrau de tinta diferente.
Aqui é pior que no card comum, porque o fundo é uma FOTO — ele muda de
cliente para cliente. Medido nos pixels renderizados, com o tom fraco:
2,7:1 sobre a foto do consultório. Tinta fraca sobre fundo imprevisível
é aposta, e numa ferramenta que gera página nova toda semana a aposta
sai cara. */
.cartao-dado .medida-rotulo,
.cartao-dado .cartao-rotulo { color: var(--sobre-escuro); }
/* --- Cartão de dado sobre a foto ----------------------------
O recurso mais copiável da referência: um retângulo escuro, meio
transparente, encostado na foto, com um rótulo mono e um número.
Ele faz a foto virar evidência em vez de enfeite. */
/* Vidro embaçado, de verdade. A primeira versão tinha 88% de opacidade e
2px de desfoque — na prática era um quadrado marrom com transparência,
e o Daniel viu na hora. Vidro precisa de três coisas ao mesmo tempo:
fundo BEM translúcido, desfoque forte o bastante para a imagem atrás
virar cor em vez de forma, e uma borda clara de 1px que faz a luz
"pegar" na quina. Sem a borda, fica névoa; com ela, fica painel. */
.cartao-dado {
/* 74% e não 52%, e o motivo é medido NOS PIXELS, não no token: este
cartão flutua sobre uma FOTO, então o contraste do texto depende da
imagem que estiver atrás — e foto clara deixava o rótulo ilegível.
Medido no recorte renderizado, antes: 2,70:1 sobre a foto do
consultório e 3,55:1 no hero. Os dois abaixo do mínimo de 4,5.
Subir a opacidade firma o fundo e tira a leitura das mãos da foto.
O vidro continua: `backdrop-filter` segue borrando, e 26% de
transparência ainda deixa a imagem aparecer por baixo. Perde-se um
pouco de translucidez para ganhar texto legível em qualquer foto,
e numa ferramenta que gera página para cliente diferente toda
semana, esse é o lado certo da troca. */
background: color-mix(in srgb, var(--cacau-fundo) 74%, transparent);
border: 1px solid color-mix(in srgb, var(--sobre-escuro) 20%, transparent);
padding: var(--e4) var(--e6);
backdrop-filter: blur(16px) saturate(1.2);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
/* O brilho de topo, no elemento em que ele tem mais função: vidro.
A skill descreve isto como "edge refraction" — a aresta de cima de
uma placa de vidro pega luz porque o material tem espessura. Aqui
vale um pouco mais que o 0,08 padrão, porque a placa está sobre uma
FOTO, e foto tem ruído que engole detalhe fino. */
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14);
}
/* Quem não tem backdrop-filter recebe o fundo quase opaco, senão o texto
fica ilegível sobre a foto. */
@supports not (backdrop-filter: blur(1px)) {
.cartao-dado { background: color-mix(in srgb, var(--cacau-fundo) 92%, transparent); }
}
/* --- Lista com régua e ícone de traço ----------------------- */
.lista-regua { list-style: none; padding: 0; margin: 0; }
.lista-regua li {
display: flex; align-items: center; gap: var(--e3);
padding-block: var(--e3);
border-bottom: 1px solid var(--borda-no-escuro);
font-size: var(--texto-peq);
}
.secao-clara .lista-regua li { border-bottom-color: var(--areia); }
.lista-regua svg {
width: 18px; height: 18px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.5;
opacity: 0.65;
}
/* --- Lista com luz ------------------------------------------
Adaptada do "radio glider" do uiverse (MIT). No original a luz vai até
o item CLICADO; aqui ela vai até o item sob o cursor, e no celular até
o item que passa pelo meio da tela. Quem decide qual é o luz-lista.js;
este bloco só desenha.
Do original entram três coisas e saem três.
ENTRA o trilho de 1px que some nas pontas
ENTRA a barra com brilho desfocado em volta
ENTRA o degradê que escorre da barra para dentro do item
SAI o amarelo #f7e479, que é cor de outro projeto. Aqui é a --luz,
o âmbar medido na foto
SAI a curva com quique (cubic-bezier(.37,1.95,.66,.56)). Passa do
ponto e volta, e em página de consultório isso lê como
brinquedo. Vai a --curva do kit
SAI a altura dividida em partes iguais. Nossos itens têm alturas
diferentes, e no celular o texto quebra em mais linhas: a barra
pararia fora do lugar. O script mede o item de verdade e passa
posição e altura em --luz-y e --luz-h
Tudo em pseudo-elemento: o trilho é o FUNDO da lista, a barra é o
::before, o degradê é o ::after. Nada é inserido no HTML, então a
lista continua sendo uma lista para o leitor de tela.
`isolation` pela lição dos passos: os dois pseudos ficam em z-index -1
para passar POR TRÁS do texto, e sem contexto próprio eles desceriam
para trás do fundo da seção. */
.lista-luz {
--trilho: var(--borda-no-escuro);
--barra: var(--luz);
--escorrido: color-mix(in srgb, var(--luz) 12%, transparent);
position: relative;
isolation: isolate;
padding-left: var(--e4);
background: linear-gradient(to bottom, transparent, var(--trilho) 18%, var(--trilho) 82%, transparent)
left top / 1px 100% no-repeat;
}
.secao-clara .lista-luz {
/* Âmbar sobre creme quase não se vê: a barra fica cacau, e o âmbar
sobra só no brilho em volta dela e no escorrido. */
--trilho: var(--areia);
--barra: var(--cacau);
--escorrido: color-mix(in srgb, var(--luz) 16%, transparent);
}
.lista-luz::before,
.lista-luz::after {
content: ""; position: absolute; left: 0; top: 0; z-index: -1;
height: var(--luz-h, 0px);
transform: translateY(var(--luz-y, 0px));
opacity: 0;
pointer-events: none;
transition: transform 480ms var(--curva), height 480ms var(--curva), opacity 280ms var(--curva);
}
.lista-luz::before {
width: 2px;
background: linear-gradient(to bottom, transparent, var(--barra) 50%, transparent);
/* drop-shadow e não box-shadow: ele segue o desenho do degradê, então
o brilho também some nas pontas, como no original. */
filter: drop-shadow(0 0 6px var(--luz));
}
.lista-luz::after {
/* Ajustável por lista: 24rem cobre um item de lista curta, mas numa
linha de tabela de 1.500px o brilho morria antes do título. */
width: var(--escorrido-largura, min(70%, 24rem));
background: linear-gradient(90deg, var(--escorrido), transparent);
}
.lista-luz.luz-acesa::before,
.lista-luz.luz-acesa::after { opacity: 1; }
/* A primeira vez que acende não tem de onde deslizar: aparece no lugar. */
.lista-luz.luz-instante::before,
.lista-luz.luz-instante::after { transition: opacity 280ms var(--curva); }
/* O item aceso sobe um degrau de tinta. */
.lista-luz > li { transition: color var(--duracao-hover) var(--curva); }
.lista-luz > li.luz-ativo { color: var(--sobre-escuro); }
.secao-clara .lista-luz > li.luz-ativo { color: var(--tinta); }
.lista-luz svg { transition: color var(--duracao-hover) var(--curva), opacity var(--duracao-hover) var(--curva); }
.lista-luz > li.luz-ativo svg { color: var(--luz); opacity: 1; }
/* --- WhatsApp ----------------------------------------------- */
.zap-flutuante {
position: fixed; right: var(--e4); bottom: var(--e4); z-index: 50;
background: var(--creme); color: var(--tinta);
font-family: var(--fonte-mono); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
padding: var(--e3) var(--e6);
box-shadow: 0 2px 10px rgba(26, 14, 8, 0.4);
}
body:has(.zap-flutuante) { padding-bottom: 4.5rem; }
@media (min-width: 48rem) { body:has(.zap-flutuante) { padding-bottom: 0; } }
/* --- Véu do hero --------------------------------------------
Mais fechado que o do kit de saúde porque o fundo é escuro: a foto
precisa emendar no painel sem costura visível. */
.hero-veu {
background: linear-gradient(to top,
rgba(28, 14, 8, 0.94) 0%, rgba(28, 14, 8, 0.72) 34%,
rgba(28, 14, 8, 0.40) 66%, rgba(28, 14, 8, 0.58) 100%);
}
/* ============================================================
LUZ E SUPERFÍCIE
A página era cor chapada. Cor chapada não tem profundidade porque
não tem de onde a luz vir.
Uma fonte só, sempre do ALTO À ESQUERDA, que é de onde vem a janela
nas fotos do consultório. Toda superfície escura recebe a mesma
queda de luz; toda superfície clara recebe o mesmo calor no topo.
Fonte que muda de lugar entre seções destrói a ilusão na hora.
============================================================ */
/* O GRADIENTE MUDOU DE EMPREGO, e isto é o item 8 da folha de valores.
ANTES: as três superfícies levavam um radial de --luz espalhado por
toda a área. Toda superfície com um brilho difuso. O relato de quem
viu a página foi exato: "percebi um leve gradient nas sessões escuras,
nada além". Difuso não lê como profundidade — lê como névoa.
Linear, literal: "No atmospheric gradients, no spotlight cards."
Ferrari usa gradiente em exatamente dois lugares, e um deles é a
TRANSIÇÃO ENTRE SEÇÕES (linear-gradient(180deg, #3c3c3c, #030303 64%)).
AGORA: a luz marca a JUNTA. Ela entra na borda de cima, onde a seção
anterior encosta nesta, e morre em 14rem. Deixa de ser atmosfera e
passa a ser acontecimento — a mesma diferença entre esfregada e evento
que a gente aprendeu nas entradas de bloco.
A profundidade que o gradiente tentava fazer agora é trabalho da
escada de superfícies e do fio, que é como os 74 fazem. */
.superficie-escura {
background-color: var(--cacau);
background-image:
/* A junta: luz na borda de cima, apagando rápido. */
linear-gradient(to bottom,
color-mix(in srgb, var(--luz) 9%, transparent) 0,
transparent 14rem),
/* E o peso acumulando no rodapé do bloco, que dá o chão. */
linear-gradient(to bottom,
transparent 78%, color-mix(in srgb, #120804 22%, transparent) 100%);
}
.superficie-funda {
background-color: var(--cacau-fundo);
background-image:
linear-gradient(to bottom,
color-mix(in srgb, var(--luz) 6%, transparent) 0,
transparent 10rem);
}
.superficie-clara {
background-color: var(--creme);
background-image:
linear-gradient(to bottom,
color-mix(in srgb, var(--luz) 7%, transparent) 0,
transparent 12rem);
}
/* ---------- O card elevado: o degrau 2 finalmente em uso ----------
Medido antes desta mudança: os cards de depoimento usavam
--cacau-fundo (#2C170E) DENTRO de uma seção --cacau (#49291B). O card
era mais escuro que a seção em que estava — afundado, não elevado.
E o #60473C, medido na foto justamente como superfície elevada,
não aparecia em lugar nenhum da página.
Card sobe, nunca desce. Fio de 1px para recortar da banda, e o brilho
de topo para a aresta pegar luz. Nenhuma sombra: é o que os 74 fazem. */
.superficie-card {
background-color: var(--cacau-claro);
border: 1px solid var(--borda-no-escuro);
box-shadow: var(--brilho-topo);
}
/* Sobre superfície clara o mesmo papel, com o fio que faltava. */
.secao-clara .superficie-card,
.superficie-clara .superficie-card {
background-color: var(--creme-fundo);
border-color: var(--fio-no-claro);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7);
}