/* =========================================================================
AKROS — Seção 8 · Bot de fluxo, vendedor humano — ou Akros.
Veio da landing page do Akros (componente Comparativo.tsx +
customizacao/conteudo/secoes.json → `comparativo`). O título, as três
colunas, os oito critérios, os oito valores de cada coluna e a linha do pé
são os de lá, palavra por palavra. O desenho é o daqui.
ENTRA ANTES DO PREÇO, e não depois, porque é isso que a landing faz e é o
que a ordem do argumento pede: a tabela é a justificativa da seção 9. Quem
lê "R$ 1.999" já passou por "um vendedor humano custa R$ 4-8 mil e dorme".
Invertido, o preço chega sem defesa.
── O QUE NÃO VEIO JUNTO: OS EMOJIS ─────────────────────────────────────
Na origem os valores são ❌ ✅ 😅. Emoji não é desenho: é a fonte de
emoji do sistema operacional de quem está lendo. No Windows sai o Segoe
UI Emoji chapado e colorido, no Mac sai o Apple Color Emoji em 3D, no
Android sai outro — a mesma célula muda de cor, de peso e de tamanho
conforme a máquina, e nenhuma dessas três versões é a paleta deste site.
Num quadro cujo argumento inteiro se lê pelas marcas, isso é o elemento
mais visível da seção sendo decidido por terceiros.
As marcas são desenhadas no CSS, em duas barras e um "L" — a mesma
receita do `.faq__sinal` da seção 10, que já desenha "+" e "×" assim.
Herdam `currentColor`, então acompanham a cor da coluna sem nenhuma
regra a mais.
── E OS "NÃO" NÃO SÃO VERMELHOS ────────────────────────────────────────
A tentação era pintar de `#DC2626` o que falha. Esse vermelho existe no
site, mas só DENTRO das telas simuladas (leads.css, implanta.css): é a
cor da interface de outro produto, não da nossa página. Trazê-lo para a
página abriria uma quarta cor de marca para dizer o que o cinza já diz.
E diz melhor. Quadro comparativo que grita em vermelho no concorrente
soa como ataque; o que se quer é o contrário — as duas colunas de fora
CALADAS, em cinza, e só a nossa acesa. O olho acha a resposta em um
movimento, e a página não parece estar brigando com ninguém.
Reaproveita de pipeline.css e estudio.css: .bloco, .faixa, .sechead.
========================================================================= */
/* A pilha que centra o conteúdo na altura que sobrou depois do menu — o
mesmo arranjo de `.fecho__pilha`, `.planos__pilha` e `.faq__pilha`.
`.bloco` empilha a partir do topo; sem esta camada o quadro fica colado no
menu e sobra vão no pé. */
.vs__pilha{
flex:1;min-height:0;
display:flex;flex-direction:column;justify-content:center;
gap:clamp(18px,3.2vh,44px);
}
/* ---------------- o cabeçalho, centrado ----------------
A largura é a MESMA do quadro (1040), e não os 900 das outras seções
centradas. Medido: a 900 a manchete quebra em duas em toda tela grande e
o "— ou Akros." cai sozinho na segunda linha. A frase inteira é uma
virada — bot, humano, e então nós — e virada que quebra antes do golpe
deixa de ser virada. A 1040 ela cabe numa linha de 1180px para cima, que
é onde o site ainda está em uma tela por capítulo. Abaixo disso quebra,
e aí quebrar é o certo. */
#comparativo .sechead{max-width:min(1040px,100%);margin:0 auto;text-align:center}
#comparativo .sechead__eyebrow{margin-bottom:clamp(10px,1.6vh,18px)}
/* o fio do olho fica à ESQUERDA do texto; centrado, empurra a linha inteira
para a direita e o eixo do cabeçalho deixa de bater com o do quadro */
#comparativo .sechead__eyebrow i{display:none}
#comparativo .sechead__title{
font-size:min(clamp(1.95rem,3.6vw,3.35rem),5.6vh);
margin-bottom:0;
text-wrap:balance;
}
/* =======================================================================
O QUADRO
TABELA DE VERDADE, e não uma grade de divs. São oito critérios medidos em
três colunas: com `
` e `
` o leitor de tela
anuncia "Vendedor humano, Lembra do cliente após meses: não" ao entrar na
célula. Numa grade de divs ele leria oito "não" soltos. A origem usa
`
` no critério; aqui ele é `
`, que é o que ele é.
Largura de 1040px, e não os 1780 da faixa. Quatro colunas soltas na faixa
inteira afastam o critério da resposta a ponto de o olho perder a linha no
meio do caminho — e é justamente percorrer a linha que esta seção pede.
SEM MOLDURA E SEM GRADE. Só fios de cabelo horizontais, os mesmos `--line`
do resto do site. Fio vertical entre colunas transformaria o quadro em
planilha; moldura por fora fecharia oito linhas de texto numa caixa, que é
exatamente o erro que a seção 10 já pagou. O que separa as colunas aqui é
o alinhamento e o silêncio.
======================================================================= */
.vs__quadro{
margin:0 auto;width:100%;max-width:min(1040px,100%);
/* o quadro pode passar da largura útil em telas estreitas de desktop; a
rolagem é DELE, nunca da página */
overflow-x:auto;
}
.vs{
width:100%;border-collapse:separate;border-spacing:0;
/* a tabela inteira num tamanho só: as células herdam e os degraus de
altura mexem numa linha em vez de em nove */
font-size:clamp(.87rem,.95vw,1rem);
}
/* ---------------- a fileira de rótulos ----------------
Mesma tipografia do `.sechead__eyebrow` — versalete pequeno, espaçado,
em tinta fraca. São rótulos de eixo, não títulos: têm de nomear a coluna
e sumir. */
.vs thead th{
padding:0 clamp(10px,1.1vw,18px) clamp(11px,1.6vh,16px);
font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--faint);
text-align:center;vertical-align:bottom;
white-space:nowrap;
}
.vs__canto{width:34%}
/* A TAMPA DA NOSSA COLUNA. Tinta cheia, texto branco — é o único bloco
sólido da seção e o que faz a coluna existir como coluna antes de
qualquer marca ser lida. Escuro, e não azul de marca: o azul já é a cor
das oito marcas lá embaixo, e repeti-lo aqui em chapado tiraria delas o
destaque que a coluna inteira serve para dar. */
.vs thead .vs__nos{
padding-top:clamp(10px,1.5vh,15px);
background:var(--ink);
color:#FFFFFF;
letter-spacing:.2em;
border-radius:calc(10px * var(--r)) calc(10px * var(--r)) 0 0;
}
/* ---------------- as linhas ---------------- */
.vs tbody th,.vs tbody td{
padding:clamp(11px,1.75vh,17px) clamp(10px,1.1vw,18px);
border-top:1px solid var(--line);
vertical-align:middle;
}
.vs tbody th{
text-align:left;font-weight:600;letter-spacing:-.014em;color:var(--ink);
}
.vs tbody td{text-align:center;color:var(--muted)}
/* O sopro de tinta na linha inteira sob o cursor, do mesmo jeito que a lista
da seção 10 responde. Nada se move e nada muda de tamanho: o quadro tem de
continuar parecendo quadro. */
.vs tbody tr{transition:background .3s var(--ease)}
.vs tbody tr:hover{background:rgba(10,128,226,.03)}
/* ---------------- a coluna que interessa ----------------
Fundo azul lavado e dois trilhos laterais. Os trilhos são o que amarra a
tampa escura às oito células de baixo: sem eles a coluna é um cabeçalho
colorido com texto solto embaixo. O pé fecha na última linha. */
.vs .vs__nos{
background:rgba(10,128,226,.05);
border-left:1px solid rgba(10,128,226,.16);
border-right:1px solid rgba(10,128,226,.16);
}
.vs tbody .vs__nos{color:var(--accent-ink);font-weight:600}
/* os fios de DENTRO da coluna também viram azul. Com o `--line` do resto da
tabela, o primeiro deles corre rente ao pé da tampa escura e lê como
emenda mal fechada — uma linha de tinta a 12% encostada num bloco de
tinta cheia. Em azul lavado ele continua marcando a fileira e a coluna
passa a ser uma peça só, da tampa ao pé. */
.vs tbody .vs__nos{border-top-color:rgba(10,128,226,.13)}
.vs tbody tr:last-child .vs__nos{
border-bottom:1px solid rgba(10,128,226,.16);
border-radius:0 0 calc(10px * var(--r)) calc(10px * var(--r));
}
/* a tinta da coluna vence a tinta do hover, senão a linha sob o cursor apaga
justamente a coluna que o quadro existe para acender */
.vs tbody tr:hover .vs__nos{background:rgba(10,128,226,.075)}
/* ---------------- o conteúdo da célula ---------------- */
.vs__v{display:inline-flex;align-items:center;justify-content:center;gap:8px}
/* =======================================================================
AS MARCAS — duas barras e um "L", desenhadas aqui
Por que não `