/* ===== tokens.css ===== */
/* ==========================================================================
Vértice White Label · tokens
ÂNCORA DE SENSAÇÃO: estrutura silenciosa e portante.
A página tem que parecer uma fundação. Peso, base, carga.
Zero ornamento. Sem sombra flutuante. Profundidade por borda e superfície.
O único elemento vivo em toda a tela é o ponto verde do parceiro.
Se uma decisão não serve a essa âncora, ela sai.
Direção: Minimalism & Swiss Style, página clara com blocos invertidos.
Cor e posicionamento: Brandbook Vértice White Label, seções 10 e 04.
Layout, ritmo e escala: critérios do cliente mais renda-site-designer.
========================================================================== */
/* --- Poppins: a marca. Pesos extremos, 300 e 800, como contraste principal. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap;
src: url('/fonts/poppins-300-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap;
src: url('/fonts/poppins-300-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
src: url('/fonts/poppins-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
src: url('/fonts/poppins-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
src: url('/fonts/poppins-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
src: url('/fonts/poppins-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
src: url('/fonts/poppins-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
src: url('/fonts/poppins-600-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
src: url('/fonts/poppins-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
src: url('/fonts/poppins-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
src: url('/fonts/poppins-800-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
src: url('/fonts/poppins-800-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* --- JetBrains Mono: só o registro técnico. Um peso, 400.
Norma, arquivo legal, prazo, domínio, dado de tabela.
Nunca em título, nunca em texto corrido, nunca em negrito:
peso alto destrói o caráter da mono. Licença OFL, servida local. */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
src: url('/fonts/jetbrains-mono-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
/* ==== primitivos de cor. Tabela fechada do brandbook. ================= */
--lime-200: #E2F2BA;
--lime-400: #BFF73B;
--lime-600: #A7E90A;
--lime-700: #85BA08;
--lime-900: #435D04;
--azul-300: #C3CEE9;
--azul-500: #5D8AD5;
--azul-700: #25479D;
--azul-800: #1E3E74;
--azul-950: #0C1733;
--n-100: #F7F7F7;
--n-300: #D6D6D6;
--n-500: #999999;
--n-700: #616161;
--n-950: #1C1C1C;
--ambar: #FFB020;
--coral: #FF6B4A;
--sucesso: #3DD68C;
/* Papel do modo claro, seção 10 do brandbook. */
--papel: #F7F8F5;
/* Placa de marca de terceiro. Branco em todo tema, de propósito: o logo do
parceiro integrado vem na cor dele, e recolorir marca de terceiro é
publicar marca errada. Como a placa aparece dentro de bloco azul, sem
ela o logo escuro sumiria no fundo. Por isso NÃO entra na lista de
inversão do fim deste arquivo. */
--placa-marca: #FFFFFF;
/* Sinais em versão texto. O âmbar, o coral e o verde de sucesso do
brandbook são cor de PREENCHIMENTO: sobre papel dão 1.9:1, 2.8:1 e
1.9:1 e reprovam como texto. Estes são os mesmos sinais rebaixados
até passar 4.5:1, e só entram onde o sinal é palavra ou ícone. */
--ambar-txt: #8A5B00; /* 5.87:1 no branco */
--coral-txt: #C0341A; /* 5.60:1 no branco */
--sucesso-txt: #0F7A4A; /* 5.38:1 no branco */
/* ======================================================================
SEMÂNTICOS · TEMA CLARO, que é o padrão da página.
Receita do brandbook, seção 10: papel dominante, card em branco puro,
e o azul entrando como BLOCO INVERTIDO dentro da página clara.
O motivo do bloco invertido não é estético, é de contraste: o lime
#A7E90A sobre papel dá 1.38:1, e o próprio brandbook o declara
tecnicamente ilegível e o proíbe. No claro não existe texto verde: o
acento de texto é azul (ver --acento, abaixo). O lime da marca continua
vivo, em cheio, dentro dos blocos escuros e como preenchimento de botão.
====================================================================== */
--fundo: var(--papel);
--fundo-2: #FFFFFF;
--fundo-3: var(--azul-950);
/* Profundidade é borda, não sombra. Três degraus de linha estrutural. */
--borda: #E4E6E0;
--borda-media: #D3D6CD;
--borda-forte: #ADB1A6;
/* Contorno de COMPONENTE INTERATIVO. WCAG 1.4.11 pede 3:1.
No claro quem passa é n-700: 5.81:1 no papel e 6.19:1 no card.
Campo, botão secundário, aba e hambúrguer usam este, nunca --borda-*. */
--borda-interativa: var(--n-700);
/* A hierarquia vem de peso, escala e da mono, nunca de rebaixar a cor. */
--txt: var(--n-950); /* 15.99:1 no papel */
--txt-2: #3D3D3D; /* 10.2:1. Não é cinza de rebaixamento, é leitura */
--txt-azul: #E4E9F2; /* SÓ dentro de bloco azul escuro. Nunca no papel */
/* Decorativo apenas: linha, ponto, marcador. NUNCA em texto. */
--txt-3: var(--n-500);
/* Acento em duas camadas, que é o que torna o tema claro possível.
--acento cor de TEXTO, ícone e linha. Muda com o tema.
--acento-fundo cor de PREENCHIMENTO. É sempre o lime da marca.
No claro o acento de TEXTO é AZUL, não verde. O lime cheio dá 1.38:1 no
papel e reprova; o lime-900 passa no contraste mas lê como verde-oliva,
que não é a identidade. O azul-700 é cor de marca, dá 7.99:1 no papel e
8.51:1 no card, e devolve cor ao site sem inventar tom nenhum.
Decisão do cliente. O lime continua vivo em dois lugares: preenchimento
(botão, ponto) e qualquer coisa dentro de bloco invertido. */
--acento: var(--azul-700); /* 7.99:1 no papel, 8.51:1 no card */
--acento-hover: var(--azul-800); /* 9.87:1 */
--acento-press: var(--azul-950);
--acento-fundo: var(--lime-600);
--acento-fundo-hover: var(--lime-400);
--acento-fundo-press: var(--lime-700);
/* Botão sem fio, decisão do cliente. Registrado: sem o contorno, o LIMITE
do botão lime sobre papel fica em 1.38:1 e não atende a WCAG 1.4.11.
O texto dentro dele passa com folga (11.61:1), então o rótulo é legível;
o que não se distingue do papel é a borda da pílula. */
--acento-contorno: transparent;
--sobre-acento: var(--n-950);
/* Sinais: texto e ícone usam a versão rebaixada, preenchimento usa a
cor cheia do brandbook. */
--sinal-ok: var(--sucesso-txt);
--sinal-aviso: var(--ambar-txt);
--sinal-erro: var(--coral-txt);
/* Lavagens e superfícies de estado. */
--lavagem-acento: rgba(37, 71, 157, 0.05);
--hover-superficie: rgba(28, 28, 28, 0.04);
--acento-linha: rgba(37, 71, 157, 0.28);
--linha-grade: rgba(28, 28, 28, 0.055);
--holofote: rgba(37, 71, 157, 0.07);
/* O ponto verde é 9px. No papel o lime some, então ganha um fio escuro
em volta. É contorno de legibilidade, não decoração. */
--ponto-anel: 0 0 0 1px rgba(28, 28, 28, 0.28);
/* ==== gradientes ====================================================== */
/* Estes dois SÃO o bloco escuro: não mudam com o tema. */
--grad-profundidade: linear-gradient(160deg, #0C1733 0%, #1E3E74 100%);
--grad-acao: linear-gradient(90deg, #85BA08 0%, #BFF73B 100%);
/* Estes dois são superfície de página: acompanham o tema. */
/* Sem azul clarinho: lavagem azul pálida sobre papel não é a identidade.
No claro a superfície é papel ou branco; cor vem do bloco azul ESCURO. */
--grad-card: linear-gradient(180deg, #FFFFFF 0%, #F2F3EF 100%);
/* Seta do select: precisa casar com --borda-interativa e, por ser data
URI, não aceita var(). Uma por tema. */
--chevron-campo: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
/* ==== tipografia ====================================================== */
--fonte: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
--fonte-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
/* Escala fluida. Um termo em rem sempre, para respeitar o zoom. */
/* Escala rebaixada a pedido do cliente: mais amigável, clean e profissional.
Display caiu de 4.5rem para 3.25rem, H2 foi de 4rem para 2.25 e depois subiu para 2.625, ver abaixo. */
--t-display: clamp(1.875rem, 3.6vw, 3.25rem);
/* 2.625rem e nao 2.25. Em 36px o titulo ficava pequeno para a coluna de
1008px que ocupa: lia como texto boiando no canto de uma faixa larga,
nao como titulo comandando a secao. A escala veio de 4rem, que era
grande demais, mas 2.25 passou do ponto para o outro lado. */
--t-h2: clamp(1.5rem, 2.9vw, 2.625rem);
--t-h2-menor: clamp(1.25rem, 1.9vw, 1.75rem);
--t-h3: clamp(1.0625rem, 1.4vw, 1.25rem);
--t-sub: clamp(1rem, 1.15vw, 1.125rem);
--t-corpo: 1.0625rem;
--t-peq: 0.9375rem;
--t-impacto: clamp(2.25rem, 4.2vw, 3.5rem);
--t-impacto-menor: clamp(1.5rem, 2.4vw, 2rem);
/* Eyebrow: critério 7 do cliente. 0.4em de tracking, peso 700. */
--t-eyebrow: 0.75rem;
--tracking-eyebrow: 0.4em;
/* Mono: três tamanhos, nada entre eles. Entrelinha 1.2, tracking normal. */
--t-mono-p: 0.75rem;
--t-mono: 0.8125rem;
--t-mono-g: 0.875rem;
/* ==== espaço. Régua de 8 do brandbook. ================================ */
--e-1: 8px;
--e-2: 16px;
--e-3: 24px;
--e-4: 32px;
--e-6: 48px;
--e-8: 64px;
--e-12: 96px;
--e-16: 128px;
--e-20: 160px;
/* Ritmo de seção.
Estava travado em 160px no desktop, o mesmo valor em toda seção do site.
Com o conteúdo que essas seções têm, 160 em cima MAIS 160 embaixo deixa
o bloco majoritariamente vazio e o site inteiro com a mesma respiração,
que é o que fazia as páginas parecerem espaçadas demais e monótonas.
Agora escala com a viewport e para em 120. */
--secao-y: clamp(72px, 7.6vw, 120px);
/* A dobra respira mais que o corpo: é ela que dá o tom de entrada. */
--dobra-y: clamp(88px, 9.5vw, 152px);
/* Conteúdo ocupa 70% da largura da tela, com piso e teto.
Texto corrido continua limitado por medida em ch, dentro dos 70%. */
--container-largura: 70%;
--container-min: 320px;
--container-max: 1600px;
--prosa: 68ch;
--gutter: 24px;
--grade-gap: var(--e-3);
/* ==== forma ===========================================================
Duas camadas, de propósito.
ESTRUTURA em canto vivo, coerente com as terminações retas do símbolo:
card, bloco, tabela, mega menu, faixa.
AÇÃO arredondada, por decisão do cliente, contrariando o brandbook
("sem arredondamento em card, bloco e botão"): botão e selo em pílula.
O contraste entre as duas camadas é o que torna o CTA o elemento mais
óbvio da tela sem precisar de mais cor. */
--raio: 0px; /* estrutura */
--raio-acao: 999px; /* botão e selo, pílula */
--raio-campo: 10px; /* campo de formulário, parente do botão */
/* No claro a sombra é leve e quente: sombra preta forte sobre papel lê
como sujeira. Dentro do bloco invertido ela volta a ser preta. */
--elev-flutuante: 0 1px 2px rgba(28, 28, 28, .05),
0 16px 40px rgba(28, 28, 28, .12);
--elev-hover: 0 1px 3px rgba(28, 28, 28, .05),
0 12px 30px rgba(28, 28, 28, .1),
0 0 0 1px rgba(28, 28, 28, .05);
/* ==== movimento ======================================================= */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--dur-ui: 200ms;
/* Duração da entrada por scroll. Estava faltando: sem ela o atalho
`animation: entrar var(--dur-entrada) ...` era inválido e NENHUM
efeito de carregamento rodava. */
--dur-entrada: 620ms;
--header-h: 72px;
}
/* ==========================================================================
BLOCO INVERTIDO
O mesmo conjunto semântico, em escuro. Não é um segundo tema: é a receita
de bloco invertido do brandbook aplicada dentro da página clara.
Como todo componente consome só o semântico, redefinir os tokens no escopo
do bloco já veste tudo que estiver dentro dele: card, campo, selo, mockup,
ícone, sombra. Nenhuma view precisa saber que isso existe.
Onde entra, e por quê:
.hero, .secao--tese, .artigo__hero primeira dobra de cada página
.secao--atmosfera a seção de respiro no meio da página
.cta o bloco de conversão
.rodape, .zap a base da página e a ação flutuante
.zap-modal__caixa o formulário que o botão do zap abre
.pnl__lateral, .pnl-login a lateral e o login do painel
.sim-entrada a entrada do simulador white label
.pnl-card__capa a capa do card, sempre em degradê azul
.inverso utilitário, para inverter à mão
========================================================================== */
.zap-modal__caixa,
.inverso,
.hero,
.secao--tese,
.secao--atmosfera,
.artigo__hero,
.cta,
.rodape,
.zap,
.pnl__lateral,
.pnl-login,
.sim-entrada,
.pnl-card__capa {
--fundo: #141414;
--fundo-2: var(--n-950);
--borda: #262626;
--borda-media: #333333;
--borda-forte: #454545;
/* No escuro só n-500 passa a 1.4.11: 6.47:1 no fundo, 5.98:1 no card.
n-700 para em 2.97:1 e reprova. */
--borda-interativa: var(--n-500);
/* REGRA: nunca cinza em texto sobre fundo escuro. Ver CLAUDE.md, item 1. */
--txt: #EDEFEC; /* 15.93:1 */
--txt-2: #D9DBD7; /* 13.2:1. Branco levemente rebaixado, não é cinza */
--txt-3: var(--n-700);
/* Aqui o lime da marca volta em cheio: é para isto que o bloco existe. */
--acento: var(--lime-600);
--acento-hover: var(--lime-400);
--acento-press: var(--lime-700);
--acento-contorno: transparent;
--sobre-acento: #141414;
--sinal-ok: var(--sucesso);
--sinal-aviso: var(--ambar);
--sinal-erro: var(--coral);
--lavagem-acento: rgba(167, 233, 10, 0.05);
--hover-superficie: rgba(237, 239, 236, 0.05);
--acento-linha: rgba(167, 233, 10, 0.3);
--linha-grade: rgba(228, 233, 242, 0.07);
--holofote: rgba(167, 233, 10, 0.09);
--ponto-anel: none;
--grad-card: linear-gradient(180deg, #1C1C1C 0%, #0C1733 100%);
--chevron-campo: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--elev-flutuante: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 48px rgba(0, 0, 0, .34);
--elev-hover: 0 2px 6px rgba(0, 0, 0, .34), 0 14px 36px rgba(0, 0, 0, .3),
0 0 0 1px rgba(237, 239, 236, .06);
color: var(--txt);
}
@media (min-width: 768px) {
:root {
--header-h: 84px;
--grade-gap: var(--e-4);
}
}
/* ==========================================================================
Superfície dentro do bloco azul
Card preto chapado sobre o degradê vira um buraco: come a cor da seção e
deixa o ícone parecendo apagado. Aqui a superfície é um AZUL quase preto
translúcido, mais escuro que a ponta escura do próprio degradê. O card
afunda em vez de flutuar, o matiz continua azul, e o degradê ainda passa
por baixo o bastante para a seção não achatar.
Contraste conferido nas duas pontas do degradê, porque a sonda automática
pula elemento sobre gradiente. Pior caso: azul-300 sobre o selo na ponta
clara, 8.51:1. Melhor: texto sobre o card na ponta escura, 16.16:1.
========================================================================== */
.secao--atmosfera,
.pnl-login {
/* Card: azul quase preto. Na ponta escura do degradê ele quase encosta no
fundo, então quem desenha o limite é a borda, e por isso ela sobe. */
--fundo-2: rgba(7, 14, 32, 0.62);
/* Selo do ícone e campos: um degrau ACIMA do card, para o disco do ícone
aparecer contra ele. */
--fundo: rgba(237, 239, 236, 0.07);
--borda: rgba(228, 233, 242, 0.22);
--borda-media: rgba(228, 233, 242, 0.32);
--borda-forte: rgba(228, 233, 242, 0.48);
}
/* Mockup é exceção: uma tela de produto precisa parecer opaca, senão o
degradê da seção atravessa o "monitor" e destrói a ilusão. */
.secao--atmosfera .mock,
.secao--atmosfera .pmock {
--fundo-2: var(--n-950);
--fundo: #141414;
--borda: #262626;
--borda-media: #333333;
--borda-forte: #454545;
}
/* Dentro do bloco azul, o TÍTULO do card é lime e só a descrição fica
branca. Pedido do cliente. O lime dá 6.2:1 sobre a superfície do card na
ponta clara do degradê, que é o pior caso, então passa AA como texto
normal. Fora do bloco azul nada muda: no papel o acento é azul e título
de card continua em --txt. */
.secao--atmosfera .h3,
.secao--atmosfera .entrega__titulo,
.secao--atmosfera .fonte__nome,
.secao--atmosfera .vertical-item b,
.secao--atmosfera .comp__nome,
.secao--atmosfera .quem__bloco h3,
.secao--atmosfera .solucao__texto .h2 { color: var(--acento); }
/* ===== base.css ===== */
/* ==========================================================================
Base, tipografia e ritmo
Regra de agrupamento: o espaço DENTRO de um grupo é sempre menor que o
espaço EM VOLTA dele. Onde o espaço já agrupa, não entra borda.
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 24px);
}
body {
background: var(--fundo);
color: var(--txt);
font-family: var(--fonte);
font-size: var(--t-corpo);
font-weight: 400;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/* O atributo `hidden` só vale pelo `display: none` que o navegador aplica,
e qualquer classe com display próprio o derrota em silêncio. Foi o que
aconteceu com um `.btn hidden`, que continuava na tela por causa do
`display: inline-flex` do botão. */
[hidden] { display: none !important; }
img,
svg,
video { display: block; max-width: 100%; }
img { height: auto; }
button,
input,
select,
textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--acento);
outline-offset: 3px;
}
::selection {
/* Preenchimento, nao texto: aqui vale o lime cheio da marca nos dois temas,
com o texto preto por cima. */
background: var(--acento-fundo);
color: var(--n-950);
}
/* ==========================================================================
Tipografia
Hierarquia por escala, peso e espaço. Poppins em 300 e 800 como extremos.
========================================================================== */
h1, h2, h3, h4 {
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
}
/* Display do hero. Duas linhas, sempre. A medida em ch controla a quebra,
nunca . */
.display {
font-size: var(--t-display);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.08;
/* Com o hero em 100% da largura, a medida pode crescer: o que segura a
quebra em duas linhas passa a ser o destaque em bloco, e nao um teto
estreito que empurrava titulo longo para tres linhas. */
max-inline-size: 42ch;
text-wrap: balance;
}
/* Título em duas linhas, uma cor em cima e outra embaixo.
O trecho em destaque vira BLOCO: a quebra deixa de depender da medida e
passa a ser estrutural, então nunca sai uma linha com metade de cada cor.
Pedido do cliente. */
.display .destaque,
.h2 .destaque { display: block; }
.h2 {
font-size: var(--t-h2);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.18;
/* 34ch da ~925px no container de 1008px: o titulo ocupa a faixa mas para
antes da borda, que e o que faz a direita irregular ler como escolha e
nao como sobra. Teto maior joga titulo de duas partes para 3 linhas. */
max-inline-size: 34ch;
text-wrap: balance;
}
/* Para seção de apoio, onde o H2 no topo da escala roubaria a cena. */
.h2--menor {
font-size: var(--t-h2-menor);
max-inline-size: 52ch;
}
.h3 {
font-size: var(--t-h3);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.3;
max-inline-size: 32ch;
text-wrap: balance;
}
/* A escala caiu, então o subtítulo sai do peso 300: abaixo de 18px o 300
desaparece. Vai para 400, que é o mínimo legível nesse tamanho. */
.sub {
font-size: var(--t-sub);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.55;
color: var(--txt-2);
max-inline-size: 62ch;
text-wrap: pretty;
}
.eyebrow {
display: block;
font-size: var(--t-eyebrow);
font-weight: 700;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
line-height: 1.2;
color: var(--txt-2);
}
/* Só nas seções que carregam a tese. Mantém o lime abaixo de 3% da tela. */
.eyebrow--acento { color: var(--acento); }
.corpo {
max-inline-size: 68ch;
text-wrap: pretty;
color: var(--txt-2);
}
.corpo + .corpo { margin-top: var(--e-2); }
.atenuado { color: var(--txt-2); }
/* Número de impacto. Poppins 500, tabular, nunca mono. */
.impacto {
font-size: var(--t-impacto);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 0.92;
font-variant-numeric: tabular-nums;
}
.impacto--menor {
font-size: var(--t-impacto-menor);
line-height: 1;
}
strong, b { font-weight: 600; }
/* --- registro técnico: JetBrains Mono, peso 400, três tamanhos ---------- */
.mono {
font-family: var(--fonte-mono);
font-weight: 400;
font-size: var(--t-mono);
line-height: 1.2;
letter-spacing: normal;
font-variant-numeric: tabular-nums;
}
.mono--p { font-size: var(--t-mono-p); }
.mono--g { font-size: var(--t-mono-g); }
/* Carimbo de norma: Portaria 671, AFD, SLA. O que prova conformidade. */
.norma {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--fonte-mono);
font-weight: 400;
font-size: var(--t-mono-p);
line-height: 1;
letter-spacing: normal;
padding: 7px 10px;
border: 1px solid var(--borda-media);
color: var(--txt-2);
white-space: nowrap;
}
/* ==========================================================================
Layout e ritmo
========================================================================== */
/* 70% da largura da tela, com piso e teto. Regra do CLAUDE.md, item 4. */
.container {
width: var(--container-largura);
min-width: var(--container-min);
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Abaixo de 1100px os 70% deixariam a coluna estreita demais para ler. */
@media (max-width: 1099px) {
.container { width: 100%; }
}
.secao {
padding-block: var(--secao-y);
position: relative;
}
/* Hero de texto: mesma respiração da dobra com mockup, para a primeira
tela ter o mesmo peso em toda página. */
.secao--tese {
background: var(--grad-profundidade);
padding-block: var(--dobra-y);
}
/* Mesmo azul do hero e do CTA: o degradê de profundidade é O azul da marca.
O site alterna papel e este bloco, e como dois blocos azuis nunca ficam
colados, usar a mesma receita nos três não achata nada. Pedido do cliente. */
.secao--atmosfera { background: var(--grad-profundidade); }
.secao--linha { border-top: 1px solid var(--borda); }
/* Cabeçalho de seção: eyebrow e título colados, bloco afastado do conteúdo. */
/* Sem teto aqui. O 72ch resolvia em 769px e era ELE que fazia o titulo de
secao parar em 76% do container: o titulo nunca chegava a usar a largura,
por mais que a medida do proprio h2 permitisse. Quem governa a medida do
titulo agora e o .h2. */
.cabecalho-secao {
display: grid;
gap: var(--e-2);
margin-bottom: var(--e-6);
}
@media (min-width: 768px) {
.cabecalho-secao { margin-bottom: var(--e-8); }
}
/* Duas colunas a partir de 900px.
Antes o cabeçalho inteiro ficava travado em 72ch e ocupava pouco mais da
metade do container, deixando a direita vazia em TODA seção do site. O
título ficando à esquerda e o texto de apoio à direita, alinhados pela
base, usa a largura e cria uma entrada de leitura em vez de uma coluna
solta. Seção sem texto de apoio não muda de aparência. */
/* O cabeçalho de seção voltou a UMA coluna.
Ele tinha sido dividido em duas (título à esquerda, apoio à direita) para
usar a largura que sobrava quando o H2 era 2.25rem. Com o H2 em 2.625rem
o próprio título passou a ocupar a faixa, e as duas mudanças começaram a
se atropelar: a coluna de 537px jogava títulos de duas linhas para
quatro. Título grande resolve o vazio melhor do que layout de duas
colunas com tipo pequeno. */
.cabecalho-secao .eyebrow { margin-bottom: 4px; }
.pilha-1 { display: grid; gap: var(--e-1); }
.pilha-2 { display: grid; gap: var(--e-2); }
.pilha-3 { display: grid; gap: var(--e-3); }
.pilha-4 { display: grid; gap: var(--e-4); }
.pilha-6 { display: grid; gap: var(--e-6); }
/* Grade responsiva 1 → 2 → 3, gap 24 no mobile e 32 a partir de md. */
.grade-2,
.grade-3 {
display: grid;
gap: var(--grade-gap);
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Guarda de grade: sem min-width 0 o conteúdo intrínseco de um filho
(um mockup, uma tabela, uma URL longa) empurra a trilha 1fr e estoura
o container. É a causa mais comum de scroll horizontal em grid. */
.hero__grade > *,
.split > *,
.receita > *,
.contato > *,
.manifesto__grade > *,
.grade-2 > *,
.grade-3 > *,
.pilares > *,
.quem > *,
.etapas > * { min-width: 0; }
.linha-acoes {
display: flex;
flex-wrap: wrap;
gap: var(--e-2);
align-items: center;
}
.so-leitor {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.pular {
position: absolute;
left: var(--e-2);
top: -100px;
z-index: 200;
background: var(--acento-fundo);
color: var(--n-950);
font-weight: 600;
padding: var(--e-2) var(--e-3);
border-radius: var(--raio-acao);
transition: top var(--dur-ui) var(--ease);
}
.pular:focus { top: var(--e-2); }
/* --- lockup de produto, regra do pipe ---------------------------------- */
.lockup {
display: inline-flex;
align-items: baseline;
white-space: nowrap;
}
.lockup__pipe {
font-weight: 300;
opacity: 0.45;
margin-inline: 0.32em;
transform: scaleY(0.85);
display: inline-block;
}
@media (max-width: 599px) {
.lockup--empilha {
flex-direction: column;
align-items: flex-start;
white-space: normal;
}
.lockup--empilha .lockup__pipe { display: none; }
}
/* --- o ponto verde ------------------------------------------------------
Nunca é bullet, nunca é enfeite. Só aparece onde significa o parceiro:
no símbolo, no selo de estado ativo e no marcador de fonte recorrente. */
.ponto {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--acento-fundo);
/* No papel o lime da 1.38:1 e um ponto de 9px sumiria. O fio escuro so
existe no tema claro; no bloco invertido --ponto-anel e none. */
box-shadow: var(--ponto-anel);
flex: none;
}
/* Marcador neutro de lista. É isto que substitui o ponto verde. */
.lista-marcada {
display: grid;
gap: var(--e-2);
list-style: none;
padding: 0;
margin: 0;
}
.lista-marcada li {
display: grid;
grid-template-columns: 14px minmax(0, 1fr);
gap: 14px;
align-items: start;
color: var(--txt-2);
line-height: 1.6;
}
.lista-marcada li::before {
content: '';
width: 14px;
height: 1px;
background: var(--borda-forte);
margin-top: 0.75em;
}
/* ==========================================================================
Movimento
Conteúdo estático no primeiro frame. Sem reveal por scroll, sem contador.
Movimento só em hover, foco, e nas duas peças onde ele é informação.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
/* ===== componentes.css ===== */
/* ==========================================================================
Componentes
Estrutura em canto vivo. Ação em pílula.
Profundidade por borda e por superfície, não por sombra. A única sombra do
site é a de camada que flutua de verdade: header, mega menu e WhatsApp.
========================================================================== */
/* --- botões: a camada de ação ------------------------------------------ */
.btn {
--btn-y: 15px;
--btn-x: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 50px;
padding: var(--btn-y) var(--btn-x);
border: 1px solid transparent;
border-radius: var(--raio-acao);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1;
cursor: pointer;
text-align: center;
transition: transform var(--dur-ui) var(--ease),
background-color var(--dur-ui) var(--ease),
border-color var(--dur-ui) var(--ease),
color var(--dur-ui) var(--ease),
opacity var(--dur-ui) var(--ease);
}
.btn:hover { transform: translate3d(0, -2px, 0); }
.btn:active { transform: none; }
.btn[disabled],
.btn[aria-disabled='true'] {
opacity: 0.45;
cursor: not-allowed;
transform: none;
}
/* Verde padrão da marca, chapado, e sem fio em volta. Decisão do cliente:
o degradê e a borda escura estavam descaracterizando o botão. */
.btn--primario {
background-image: none;
background-color: var(--acento-fundo);
border-color: var(--acento-contorno);
color: var(--sobre-acento);
}
.btn--primario:hover { background-color: var(--acento-fundo-hover); }
.btn--primario:active { background-color: var(--acento-fundo-press); }
.btn--secundario {
background: transparent;
border-color: var(--borda-interativa);
color: var(--txt);
}
.btn--secundario:hover {
border-color: var(--txt);
background: var(--hover-superficie);
}
.btn--largo { width: 100%; }
.btn[data-carregando='true'] { pointer-events: none; opacity: 0.7; }
.btn__seta {
width: 16px;
height: 16px;
flex: none;
transition: transform var(--dur-ui) var(--ease);
}
.btn:hover .btn__seta { transform: translate3d(3px, 0, 0); }
/* --- link de texto ------------------------------------------------------ */
.link {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding-block: 12px;
font-weight: 500;
color: var(--acento);
transition: color var(--dur-ui) var(--ease), gap var(--dur-ui) var(--ease);
}
.link:hover { color: var(--acento-hover); gap: 12px; }
/* --- selo de estado: pílula, camada de ação ----------------------------- */
.selo {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 15px;
border: 1px solid var(--borda-media);
border-radius: var(--raio-acao);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--txt-2);
line-height: 1.2;
/* Pilula nao quebra linha: em duas linhas o raio de 999px deforma e o
selo deixa de parecer selo. */
white-space: nowrap;
}
.selo--ativo { color: var(--txt); border-color: var(--borda-forte); }
/* Indicador de estado usa a família de APOIO, nunca o lime.
No brandbook o lime é a marca e o ponto verde significa o parceiro.
Status é sinal, e sinal tem cor própria: sucesso e neutro. */
.selo--ativo .ponto { background: var(--sucesso); }
/* --- card: estrutura ---------------------------------------------------- */
/* Padrão único de card do site. Todos com borda nos quatro lados.
O comportamento de hover mora em efeitos.css: borda, subida, zoom e
sombra em volta, sempre os quatro juntos. Ver CLAUDE.md, item 2. */
.card {
position: relative;
background: var(--fundo-2);
border: 1px solid var(--borda);
padding: var(--e-4);
border-radius: var(--raio);
}
@media (min-width: 768px) {
.card { padding: var(--e-6); }
}
/* Densidade do card por contexto.
Os 48px do card padrão servem a uma grade de duas colunas. Numa grade de
três ou quatro, dentro dos 70% de largura, sobram menos de 200px de texto
por card e a leitura vira coluna de jornal estreita. Nessas grades o card
cede o padding para o texto. Uma regra só, para não virar exceção solta. */
@media (min-width: 768px) {
/* Ícone em cima, texto embaixo, conteúdo centralizado. Pedido do cliente. */
.grade-3 > .card { justify-items: center; text-align: center; }
.grade-3 > .card,
.pilares > .card,
.jornada > .card,
.entregas > .card,
.fontes > .card,
.verticais > .card { padding: var(--e-4); }
}
/* Acento estrutural. Só onde a cor significa algo, e nunca em série:
num trio de cards, ou todos têm ou nenhum tem. */
.card--acento { border-left-width: 3px; border-left-color: var(--acento); }
.card--profundo { background-image: var(--grad-card); }
/* --- placeholder de asset pendente -------------------------------------- */
.placeholder {
display: grid;
gap: 8px;
padding: var(--e-3);
border: 1px dashed var(--borda-forte);
background: var(--fundo-2);
color: var(--txt-2);
font-size: 0.8125rem;
line-height: 1.55;
}
.placeholder b {
font-family: var(--fonte-mono);
font-weight: 400;
font-size: var(--t-mono-p);
letter-spacing: normal;
text-transform: uppercase;
color: var(--sinal-aviso);
}
/* ==========================================================================
Header e mega menu
========================================================================== */
.header {
position: sticky;
top: 0;
z-index: 80;
/* Barra clara: o header acompanha o visitante a página inteira, então é
ele que decide se o site é escuro. Papel translucido sobre o hero azul,
papel opaco sobre o conteúdo. O lockup preto entra junto, no partial. */
background: rgba(247, 248, 245, 0.82);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid transparent;
transition: border-color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease);
}
.header[data-rolado='true'] {
border-bottom-color: var(--borda);
background: rgba(247, 248, 245, 0.96);
}
/* Volta para o container de 70%, alinhado com o conteúdo, a pedido do
cliente. Consequência medida: a barra precisa de 1081px e o container só
chega a isso em viewport de 1545px, então o menu de desktop passa a
aparecer bem mais tarde e o hambúrguer cobre o resto. */
.header__barra {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-3);
height: var(--header-h);
}
.header__marca {
display: flex;
align-items: center;
flex: none;
padding-block: 8px;
min-height: 44px;
}
.header__marca img { width: 132px; height: 29px; }
@media (min-width: 768px) {
.header__marca img { width: 140px; height: 31px; }
}
.nav { display: none; }
/* 1240, medido: em 1220 ainda estoura. Com o header dentro do container
de 70%, a barra so cabe a partir daqui. Chegou a precisar de 1380, o que
deixava notebook de 1280 e 1366 sem menu; apertar o padding do item, a
fonte do menu, o logo e o botao trouxe o ponto para 1240 sem mexer no
texto de nenhum item. */
@media (min-width: 1240px) {
.nav {
display: flex;
align-items: center;
gap: 4px;
margin-inline-start: var(--e-3);
margin-inline-end: auto;
}
}
.nav__item { position: relative; }
.nav__link {
display: inline-flex;
align-items: center;
gap: 6px;
height: 44px;
/* 10px e 14px de fonte, nao 14px e 15px: sao 6 itens de menu, e cada 1px
de padding custa 12px na largura total da barra. Apertar aqui foi o que
trouxe o menu de desktop de volta para notebook sem mexer no texto. */
padding-inline: 10px;
font-size: 0.875rem;
/* Nome de menu nunca quebra: "Modelo de Negócio" em três linhas some com
a altura da barra e destrói a leitura horizontal do nav. */
white-space: nowrap;
font-weight: 500;
color: var(--txt-2);
transition: color var(--dur-ui) var(--ease);
background: none;
border: 0;
cursor: pointer;
}
.nav__link:hover,
.nav__link[aria-expanded='true'],
.nav__link[aria-current='page'] { color: var(--txt); }
.nav__link[aria-current='page']::after {
content: '';
position: absolute;
left: 14px;
right: 14px;
bottom: 4px;
height: 2px;
background: var(--acento);
}
.nav__chevron {
width: 14px;
height: 14px;
transition: transform var(--dur-ui) var(--ease);
}
.nav__link[aria-expanded='true'] .nav__chevron { transform: rotate(180deg); }
.header__acoes {
display: flex;
align-items: center;
gap: var(--e-2);
flex: none;
}
.header__cta { display: none; }
@media (min-width: 1240px) {
.header__cta { display: inline-flex; --btn-y: 12px; --btn-x: 18px; min-height: 44px; }
}
/* --- mega menu: camada flutuante ---------------------------------------- */
.mega {
position: absolute;
inset-inline: 0;
top: 100%;
z-index: 79;
display: none;
background: var(--fundo-2);
border-top: 1px solid var(--borda);
border-bottom: 1px solid var(--borda);
box-shadow: var(--elev-flutuante);
}
.mega[data-aberto='true'] {
display: block;
animation: megaEntra var(--dur-ui) var(--ease) both;
}
@keyframes megaEntra {
from { opacity: 0; transform: translate3d(0, -6px, 0); }
to { opacity: 1; transform: none; }
}
/* Mockup a ESQUERDA, lista de menu a DIREITA. A lista ganhou largura fixa
generosa para os nomes de produto nao quebrarem linha. */
.mega__grade {
display: grid;
/* Metade e metade: palco à esquerda, lista à direita. Pedido do cliente. */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--e-6);
padding-block: var(--e-4) var(--e-6);
align-items: start;
}
.mega__palco { grid-column: 1; }
.mega__lista-area { grid-column: 2; }
.mega__lista { display: grid; gap: 2px; align-content: start; }
/* Uma coluna: o ícone da Vértice saiu daqui, quem mostra o produto é o palco. */
.mega__item {
display: block;
padding: 14px 16px;
border-left: 3px solid transparent;
background: transparent;
text-align: left;
transition: background-color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.mega__item:hover,
.mega__item[data-ativo='true'] {
background: var(--hover-superficie);
border-left-color: var(--acento);
}
.mega__nome {
display: block;
white-space: nowrap;
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--txt);
line-height: 1.25;
}
.mega__estado {
display: block;
font-family: var(--fonte-mono);
font-weight: 400;
font-size: var(--t-mono-p);
letter-spacing: normal;
text-transform: uppercase;
color: var(--txt-2);
margin-top: 7px;
}
.mega__linha {
display: block;
font-size: 0.875rem;
font-weight: 400;
color: var(--txt-2);
line-height: 1.55;
margin-top: 8px;
}
.mega__rodape {
margin-top: var(--e-3);
padding: 14px 16px 0;
border-top: 1px solid var(--borda);
font-size: 0.8125rem;
color: var(--txt-2);
line-height: 1.55;
}
/* palco: troca de visual conforme o cursor ou o foco entra no item */
/* As cenas ficam empilhadas na MESMA celula de grade, nao em position
absolute. Com absolute elas nao empurravam a altura, o palco ficava preso
no min-height e o mockup era cortado. Em grade, o palco cresce ate a cena
mais alta e nada pode ser cortado. */
.mega__palco {
display: grid;
grid-template-areas: 'palco';
border: 1px solid var(--borda);
background: var(--fundo);
}
.mega__cena {
grid-area: palco;
padding: var(--e-4);
display: flex;
flex-direction: column;
gap: var(--e-2);
min-width: 0;
opacity: 0;
transform: translate3d(0, 8px, 0);
pointer-events: none;
visibility: hidden;
transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
.mega__cena[data-ativo='true'] {
opacity: 1;
transform: none;
pointer-events: auto;
visibility: visible;
}
/* A tela real do produto dentro da cena, INTEIRA. Sem corte e sem
desvanecimento: aqui o visitante abriu o menu para ver o que é o produto,
e meia tela responde pela metade. */
.mega__tela { border: 1px solid var(--borda); }
.mega__tela img { display: block; width: 100%; height: auto; }
.mega__cena-topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-2);
}
.mega__cena-titulo {
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.02em;
}
/* --- menu mobile em painel de tela cheia -------------------------------- */
.hamburguer {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
background: transparent;
border: 1px solid var(--borda-interativa);
border-radius: var(--raio-acao);
cursor: pointer;
color: var(--txt);
transition: border-color var(--dur-ui) var(--ease);
}
.hamburguer:hover { border-color: var(--borda-forte); }
@media (min-width: 1240px) {
.hamburguer { display: none; }
}
.hamburguer__traco {
display: block;
width: 18px;
height: 1.5px;
background: currentColor;
position: relative;
transition: background-color var(--dur-ui) var(--ease);
}
.hamburguer__traco::before,
.hamburguer__traco::after {
content: '';
position: absolute;
left: 0;
width: 18px;
height: 1.5px;
background: currentColor;
transition: transform var(--dur-ui) var(--ease);
}
.hamburguer__traco::before { top: -6px; }
.hamburguer__traco::after { top: 6px; }
.hamburguer[aria-expanded='true'] .hamburguer__traco { background: transparent; }
.hamburguer[aria-expanded='true'] .hamburguer__traco::before { transform: translateY(6px) rotate(45deg); }
.hamburguer[aria-expanded='true'] .hamburguer__traco::after { transform: translateY(-6px) rotate(-45deg); }
.painel {
position: fixed;
inset: var(--header-h) 0 0 0;
z-index: 78;
background: var(--fundo);
border-top: 1px solid var(--borda);
overflow-y: auto;
overscroll-behavior: contain;
display: none;
}
.painel[data-aberto='true'] { display: block; }
@media (min-width: 1240px) {
.painel { display: none !important; }
}
.painel__lista { display: grid; padding-block: var(--e-2) var(--e-6); }
.painel__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-2);
min-height: 62px;
padding: 16px 0;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.02em;
border-bottom: 1px solid var(--borda);
background: none;
border-inline: 0;
border-top: 0;
width: 100%;
text-align: left;
color: var(--txt);
cursor: pointer;
}
.painel__sub { display: grid; gap: 2px; padding: 4px 0 20px; }
.painel__sublink {
display: grid;
gap: 5px;
padding: 14px 16px;
border-left: 3px solid var(--borda);
color: var(--txt-2);
}
.painel__sublink:hover { border-left-color: var(--acento); color: var(--txt); }
.painel__sublink b { color: var(--txt); font-weight: 600; }
.painel__sublink span {
font-family: var(--fonte-mono);
font-weight: 400;
font-size: var(--t-mono-p);
letter-spacing: normal;
text-transform: uppercase;
color: var(--txt-2);
}
.painel__acao { padding-block: var(--e-2) var(--e-8); display: grid; gap: var(--e-2); }
/* ==========================================================================
WhatsApp flutuante
========================================================================== */
.zap {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 85;
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 54px;
padding: 15px 22px;
background: var(--fundo-2);
border: 1px solid var(--borda-forte);
border-radius: var(--raio-acao);
box-shadow: var(--elev-flutuante);
color: var(--txt);
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
transition: transform var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.zap:hover { transform: translate3d(0, -3px, 0); border-color: var(--acento); }
.zap svg { width: 20px; height: 20px; flex: none; color: var(--acento); }
@media (max-width: 599px) {
.zap { padding: 0; width: 54px; justify-content: center; }
.zap__texto { display: none; }
}
/* ==========================================================================
Formulário
========================================================================== */
.form { display: grid; gap: var(--e-3); }
/* Rótulo colado no campo, campos afastados entre si: o espaço agrupa. */
.campo { display: grid; gap: 7px; }
.campo__rotulo {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--txt);
}
.campo__rotulo span { color: var(--txt-2); font-weight: 400; }
.campo__entrada,
.campo__area,
.campo__selecao {
width: 100%;
min-height: 50px;
padding: 14px 16px;
background: var(--fundo);
border: 1px solid var(--borda-interativa);
border-radius: var(--raio-campo);
color: var(--txt);
font-size: 1rem;
transition: border-color var(--dur-ui) var(--ease);
}
.campo__area { min-height: 120px; resize: vertical; line-height: 1.6; }
.campo__selecao {
appearance: none;
background-image: var(--chevron-campo);
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 18px;
padding-right: 46px;
}
.campo__entrada::placeholder,
.campo__area::placeholder { color: var(--txt-2); }
.campo__entrada:hover,
.campo__area:hover,
.campo__selecao:hover { border-color: var(--borda-forte); }
.campo__entrada:focus,
.campo__area:focus,
.campo__selecao:focus { border-color: var(--acento); }
.campo[data-erro='true'] .campo__entrada,
.campo[data-erro='true'] .campo__area,
.campo[data-erro='true'] .campo__selecao { border-color: var(--sinal-erro); }
.campo__erro {
font-size: 0.8125rem;
color: var(--sinal-erro);
line-height: 1.4;
}
.campo:not([data-erro='true']) .campo__erro { display: none; }
.campo--duplo {
display: grid;
gap: var(--e-3);
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.campo--duplo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* O asterisco do campo obrigatório. Usa `--acento`, que no papel é azul e no
bloco invertido é lime: nos dois casos é a cor de texto do tema, e não um
vermelho de erro, porque campo obrigatório não é campo com problema. */
.campo__obrigatorio { margin-left: 2px; color: var(--acento); }
.form__legenda {
margin-top: calc(var(--e-2) * -1);
font-size: 0.8125rem;
color: var(--txt-2);
}
.consentimento {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
gap: 12px;
align-items: start;
padding-block: 4px;
}
.consentimento input {
width: 24px;
height: 24px;
margin-top: 1px;
accent-color: var(--acento);
}
.consentimento label {
font-size: 0.8125rem;
color: var(--txt-2);
line-height: 1.55;
}
.consentimento a { color: var(--acento); }
.consentimento a:hover { text-decoration: underline; }
.isca {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
/* Estado de retorno do envio. Sucesso e erro, ambos declarados. */
.form__aviso {
display: grid;
gap: 6px;
padding: 16px 18px;
border-left: 3px solid var(--acento);
background: var(--fundo);
font-size: 0.9375rem;
line-height: 1.6;
}
.form__aviso b { display: block; color: var(--txt); }
.form__aviso span { color: var(--txt-2); }
.form__aviso[data-tipo='erro'] { border-left-color: var(--sinal-erro); }
.form__aviso[hidden] { display: none; }
/* ==========================================================================
Acordeão de perguntas
========================================================================== */
.faq { border-top: 1px solid var(--borda); }
.faq__item { border-bottom: 1px solid var(--borda); }
.faq__gatilho {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--e-3);
width: 100%;
padding: var(--e-3) 0;
background: none;
border: 0;
text-align: left;
cursor: pointer;
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.4;
color: var(--txt);
min-height: 62px;
transition: color var(--dur-ui) var(--ease);
}
.faq__gatilho:hover { color: var(--acento); }
.faq__mais {
position: relative;
width: 16px;
height: 16px;
flex: none;
margin-top: 6px;
}
.faq__mais::before,
.faq__mais::after {
content: '';
position: absolute;
inset-block: 50%;
inset-inline: 0;
height: 1.5px;
background: currentColor;
transform: translateY(-50%);
transition: transform var(--dur-ui) var(--ease), opacity var(--dur-ui) var(--ease);
}
.faq__mais::after { transform: translateY(-50%) rotate(90deg); }
.faq__gatilho[aria-expanded='true'] .faq__mais::after {
transform: translateY(-50%) rotate(0deg);
opacity: 0;
}
.faq__resposta {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-ui) var(--ease);
}
.faq__resposta[data-aberto='true'] { grid-template-rows: 1fr; }
/* min-height 0 é obrigatório: sem ele o item de grid não colapsa em 0fr. */
.faq__resposta > div { overflow: hidden; min-height: 0; }
.faq__resposta p {
padding-bottom: var(--e-3);
color: var(--txt-2);
max-inline-size: 72ch;
}
/* ==========================================================================
Rodapé
========================================================================== */
.rodape {
/* Bloco invertido: o rodapé fecha a página junto com o CTA, e os dois
lidos como uma base única é o que sustenta a âncora de fundação. */
background: var(--fundo);
border-top: 1px solid var(--borda);
padding-block: var(--e-8) var(--e-4);
}
.rodape__grade {
display: grid;
gap: var(--e-6);
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.rodape__grade { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: var(--e-4); }
}
.rodape__marca { display: grid; gap: var(--e-3); align-content: start; }
.rodape__marca img { width: 148px; height: 33px; }
.rodape__frase {
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.3;
max-inline-size: 20ch;
}
.rodape__coluna { display: grid; gap: 2px; align-content: start; }
.rodape__titulo {
font-size: var(--t-eyebrow);
font-weight: 700;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--txt-2);
margin-bottom: var(--e-1);
}
.rodape__link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-block: 8px;
font-size: 0.9375rem;
color: var(--txt-2);
transition: color var(--dur-ui) var(--ease);
}
.rodape__link:hover { color: var(--acento); }
.rodape__base {
margin-top: var(--e-8);
padding-top: var(--e-3);
border-top: 1px solid var(--borda);
display: flex;
flex-wrap: wrap;
gap: var(--e-2) var(--e-4);
justify-content: space-between;
align-items: center;
font-size: 0.8125rem;
color: var(--txt-2);
}
.rodape__nota { max-inline-size: 70ch; line-height: 1.6; }
/* ==========================================================================
Modal do WhatsApp, e o formulário da Plataforma X dentro dele
O botão flutuante abre este modal em vez de ir direto para a conversa.
A caixa é INVERTIDA, como todo bloco de atmosfera do site: o botão que a
abre é escuro e o modal precisa parecer a continuação dele, não uma folha
branca saltando de um botão azul.
========================================================================== */
.sem-rolagem { overflow: hidden; }
.zap-modal {
position: fixed;
inset: 0;
z-index: 120;
display: grid;
place-items: end center;
padding: var(--e-4) var(--e-3);
background: rgba(7, 14, 32, 0.72);
overflow-y: auto;
}
/* A caixa nasce do canto do botão, e não do meio da tela: é dali que veio o
clique. Acima de 720px de altura ela centraliza, porque encostada no pé
numa tela alta ela fica longe demais do olho. */
@media (min-height: 720px) {
.zap-modal { place-items: center; }
}
.zap-modal__caixa {
position: relative;
/* 680 e não 520: com e-mail e telefone dividindo linha, e CNPJ com razão
social, a caixa estreita espremia os pares de volta para uma coluna só e
desfazia justamente o que o pareamento resolve. Acima de 640px o
`.campo--duplo` abre em duas colunas, então a caixa precisa passar disso
com folga. */
width: min(680px, 100%);
max-height: calc(100dvh - var(--e-6));
overflow-y: auto;
padding: var(--e-4);
background: var(--grad-profundidade, var(--fundo));
border: 1px solid var(--borda-forte);
box-shadow: var(--elev-flutuante);
}
.zap-modal__fecha {
position: absolute;
top: 10px;
right: 10px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: none;
border: 0;
border-radius: var(--raio-acao);
color: var(--txt-2);
cursor: pointer;
}
.zap-modal__fecha:hover { color: var(--txt); }
.zap-modal__fecha svg { width: 20px; height: 20px; }
.zap-modal__topo { margin-bottom: var(--e-4); padding-right: 44px; }
.zap-modal__titulo {
margin-top: var(--e-2);
font-size: 1.375rem;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.25;
}
.zap-modal__texto {
margin-top: var(--e-2);
font-size: 0.9375rem;
color: var(--txt-2);
line-height: 1.6;
}
.zap-modal__pronto { display: grid; gap: var(--e-3); }
.zap-modal__pronto .zap-modal__titulo { margin-top: 0; }
/* --- grupos de escolha do formulário ------------------------------------ */
.px-opcoes { display: grid; gap: 10px; margin-top: 6px; }
.px-opcao {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9375rem;
line-height: 1.4;
cursor: pointer;
}
/* 24px é a exceção de alvo de toque que o projeto já abre para checkbox, e
vale aqui pelo mesmo motivo: o rótulo inteiro é clicável. */
.px-opcao input { width: 24px; height: 24px; flex: none; accent-color: var(--acento-fundo); }
.px-estado {
padding: var(--e-4) 0;
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
color: var(--txt-2);
}
/* ==========================================================================
Aviso de cookies
Informativo, não bloqueante: a medição carrega de qualquer jeito, e a
caixa existe para informar e registrar o ciente. Decisão do cliente,
registrada no CLAUDE.md com o custo anotado.
`position: fixed` e construída em JS depois do conteúdo: assim ela não
desloca layout nenhum e não entra no HTML de quem já aceitou.
========================================================================== */
.cookies {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 90;
width: min(420px, calc(100vw - 40px));
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--e-2);
align-items: center;
padding: var(--e-3);
padding-right: calc(var(--e-3) + 20px);
background: var(--fundo-2);
border: 1px solid var(--borda-forte);
box-shadow: var(--elev-hover);
}
.cookies__texto {
grid-column: 1 / -1;
font-size: 0.8125rem;
line-height: 1.55;
color: var(--txt-2);
}
.cookies__ok { justify-self: start; }
.cookies__x {
position: absolute;
top: 6px;
right: 6px;
width: 32px;
height: 32px;
display: grid;
place-items: center;
padding: 0;
border: 0;
background: transparent;
color: var(--txt-2);
cursor: pointer;
}
.cookies__x svg { width: 16px; height: 16px; }
.cookies__x:hover { color: var(--txt); }
@media (prefers-reduced-motion: no-preference) {
.cookies { animation: cookies-entra var(--dur-entrada) var(--ease) both; }
}
@keyframes cookies-entra {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* No celular o botão do WhatsApp fica embaixo à direita e a caixa ocupa a
largura toda: sem subir, ela cobriria o alvo de toque do botão, que é o
canal principal de contato do site. */
@media (max-width: 700px) {
.cookies {
left: 12px;
right: 12px;
width: auto;
bottom: calc(74px + env(safe-area-inset-bottom, 0px));
}
}
/* ==========================================================================
Migalhas de navegação
Sai da mesma lista que vira o BreadcrumbList no JSON-LD. Fica na faixa
clara entre o cabeçalho e o hero, então usa cor de texto de papel. Já
esteve com a cor do bloco escuro, por eu ter suposto que ela se
sobreporia ao hero: no papel aquilo dava azul claro sobre off-white e não
se lia. Ver a regra de cor de texto no CLAUDE.md, item 1.
========================================================================== */
.migalhas {
position: relative;
z-index: 2;
width: var(--container-largura);
min-width: var(--container-min);
max-width: var(--container-max);
margin-inline: auto;
padding: var(--e-2) var(--gutter) 0;
}
.migalhas__lista {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
font-family: var(--mono);
font-size: 0.75rem;
font-weight: 400;
}
/* A barra separadora é desenhada pelo CSS e não vai no HTML: separador é
decoração, e leitor de tela não deve anunciar "barra" entre os degraus. */
.migalhas__item + .migalhas__item::before {
content: '/';
margin-right: 6px;
color: var(--txt-3);
}
.migalhas__item { display: flex; align-items: center; color: var(--txt-2); }
.migalhas__item a { color: var(--acento); text-decoration: none; }
.migalhas__item a:hover { text-decoration: underline; }
/* A página atual não é link, e é o degrau que o leitor está procurando
quando bate o olho: peso, e não cor, para não competir com o acento. */
.migalhas__item [aria-current='page'] { color: var(--txt); font-weight: 500; }
@media (max-width: 700px) {
.migalhas { padding-top: var(--e-1); }
.migalhas__lista { font-size: 0.6875rem; }
}
/* ===== paginas.css ===== */
/* ==========================================================================
Seções de página
Eixo e densidade nunca se repetem em seções vizinhas.
========================================================================== */
/* --- hero --------------------------------------------------------------- */
/* Hero mais alto que uma seção comum: a primeira dobra precisa de ar.
ALTURA, não largura: o conteúdo segue no mesmo container de 70% do resto
do site. */
.hero {
position: relative;
background: var(--grad-profundidade);
border-bottom: 1px solid var(--borda);
overflow: hidden;
padding-block: var(--dobra-y);
}
.hero__grade {
display: grid;
gap: var(--e-6);
align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.hero__grade { grid-template-columns: 58fr 42fr; gap: var(--e-8); }
}
/* Espaço agrupa: eyebrow perto do título, título perto do subtítulo,
e um salto maior antes dos botões. */
.hero__texto { display: grid; align-content: start; }
.hero__texto .eyebrow { margin-bottom: var(--e-2); color: var(--azul-300); }
/* O hero dividido com mockup dá 520px para o título. Nessa medida o display
cheio de 52px cabe uns 16 caracteres por linha, e qualquer título de duas
partes estoura para três linhas. Aqui ele desce um degrau; nos heros de
container inteiro (.secao--tese) o display continua no tamanho cheio. */
.hero__display {
color: var(--txt);
font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.hero__sub { margin-top: var(--e-3); color: var(--azul-300); max-inline-size: 44ch; }
.hero__acoes { margin-top: var(--e-4); }
.hero__prova {
margin-top: var(--e-6);
padding-top: var(--e-3);
border-top: 1px solid rgba(195, 206, 233, 0.2);
display: flex;
flex-wrap: wrap;
gap: var(--e-1) var(--e-2);
}
.hero__prova .norma {
border-color: rgba(195, 206, 233, 0.28);
color: var(--azul-300);
}
.hero__visual { display: grid; place-items: center; }
/* --- faixa de prova ------------------------------------------------------ */
.provas {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: var(--borda);
border-block: 1px solid var(--borda);
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 900px) {
.provas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Faixa de quatro. Em duas colunas a célula fica com 720px e o número
boiando na ponta esquerda; em quatro a banda volta a ter ritmo. */
.provas--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.provas__item {
/* Branco sobre papel: com o gap de 1px em --borda, a faixa vira uma banda
nítida logo abaixo do hero, em vez de sumir no fundo. */
background: var(--fundo-2);
padding: var(--e-4) var(--e-3);
display: grid;
gap: 10px;
align-content: center;
}
.provas__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) {
.provas__item:last-child:nth-child(odd) { grid-column: auto; }
}
/* Número de impacto reduzido aqui, porque são seis lado a lado. */
.provas__valor {
font-size: var(--t-impacto-menor);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 0.95;
font-variant-numeric: tabular-nums;
color: var(--txt);
}
/* O zero é o número que carrega a tese inteira. Único em lime na faixa. */
.provas__item--zero .provas__valor { color: var(--acento); }
.provas__rotulo {
font-size: 0.8125rem;
color: var(--txt-2);
line-height: 1.4;
}
/* --- pilares em bento ---------------------------------------------------- */
.pilares {
display: grid;
gap: var(--e-2);
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.pilares {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: auto auto;
}
.pilares__card:nth-child(1) { grid-column: span 2; }
.pilares__card:nth-child(2) { grid-row: span 2; }
.pilares__card:nth-child(3) { grid-column: span 2; }
}
/* O bento de .pilares codifica hierarquia: o primeiro card domina, o
segundo vira coluna alta, o terceiro fecha. Isso serve aos três pilares
da home, onde o peso do conteúdo é mesmo diferente.
Onde os três cards são PARES entre si (os três inimigos, os três perfis
de parceiro), a assimetria vira ruído: o leitor procura a hierarquia que
o layout promete e não acha. Nesses casos entra .pilares--pares, que
devolve a grade de três colunas iguais. */
@media (min-width: 900px) {
.pilares--pares { grid-template-rows: none; }
.pilares--pares > .pilares__card:nth-child(1),
.pilares--pares > .pilares__card:nth-child(2),
.pilares--pares > .pilares__card:nth-child(3) {
grid-column: auto;
grid-row: auto;
}
}
.pilares__card {
display: grid;
gap: var(--e-3);
align-content: start;
}
.pilares__topo {
display: flex;
align-items: baseline;
gap: var(--e-2);
}
/* Índice em mono: é numeração, registro, não retórica. */
.pilares__n {
font-family: var(--fonte-mono);
font-weight: 400;
font-size: var(--t-mono);
letter-spacing: normal;
color: var(--txt-2);
}
.pilares__destaque {
margin-top: auto;
padding-top: var(--e-3);
border-top: 1px solid var(--borda);
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
.pilares__destaque b {
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-weight: 500;
letter-spacing: -0.02em;
color: var(--acento);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.pilares__destaque span { font-size: 0.8125rem; color: var(--txt-2); }
/* --- split de solução ---------------------------------------------------- */
.split {
display: grid;
gap: var(--e-4);
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 900px) {
.split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); }
.split--inverso .split__texto { order: 2; }
}
.split + .split { margin-top: var(--e-12); }
.split__texto { display: grid; gap: var(--e-2); align-content: start; }
.split__texto .selo { justify-self: start; margin-bottom: var(--e-1); }
/* Lista de módulos: etiquetas, não bullets. */
.modulos {
display: flex;
flex-wrap: wrap;
gap: var(--e-1);
list-style: none;
padding: 0;
margin: 0;
}
.modulos li {
padding: 9px 14px;
border: 1px solid var(--borda-media);
background: var(--fundo-2);
font-size: 0.8125rem;
color: var(--txt-2);
line-height: 1.2;
}
/* --- CTA final ----------------------------------------------------------- */
.cta { background: var(--grad-profundidade); border-top: 1px solid var(--borda); }
.cta__grade {
display: grid;
gap: var(--e-4);
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 900px) {
.cta__grade { grid-template-columns: 1.25fr 1fr; gap: var(--e-8); }
}
/* O título do CTA vive numa coluna estreita: no tamanho cheio do H2 ele ia
para três linhas. Um degrau abaixo resolve, e ainda devolve peso para o
botão, que é o que precisa ganhar a atenção neste bloco. */
.cta__titulo { font-size: var(--t-h2-menor); }
.cta__texto { color: var(--azul-300); max-inline-size: 48ch; }
/* --- página de contato --------------------------------------------------- */
.contato {
display: grid;
gap: var(--e-6);
grid-template-columns: 1fr;
align-items: start;
}
@media (min-width: 1024px) {
/* Metade e metade. Pedido do cliente. */
.contato { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); }
}
.contato__lado { display: grid; gap: var(--e-3); align-content: start; }
.contato__bloco {
border-left: 3px solid var(--borda-forte);
padding-left: var(--e-3);
display: grid;
gap: 6px;
}
.contato__bloco b { font-weight: 600; }
.contato__bloco span { font-size: 0.9375rem; color: var(--txt-2); line-height: 1.6; }
/* --- texto legal --------------------------------------------------------- */
.legal { max-inline-size: var(--prosa); display: grid; gap: var(--e-3); }
.legal h2 { font-size: var(--t-h3); margin-top: var(--e-3); }
.legal p, .legal li { color: var(--txt-2); }
.legal ul { padding-left: 20px; display: grid; gap: 8px; }
/* Link dentro do texto legal precisa se distinguir do parágrafo por mais que
cor: sublinhado é o único sinal que sobrevive a daltonismo e a impressão.
A página cita a LGPD e o canal de exercício de direitos, e o leitor tem
que enxergar que aquilo é clicável. */
.legal a {
color: var(--acento);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.legal a:hover { text-decoration-thickness: 2px; }
/* --- página de erro ------------------------------------------------------ */
/* Página de erro: o hero é a página inteira, então ganha altura de dobra. */
.erro { min-height: 62vh; display: grid; align-content: center; }
/* Citação de fonte oficial.
O site inteiro afirmava conformidade com a Portaria 671 sem nunca apontar
para a norma. Link para a origem é o que separa alegação de fato
verificável, e é o que um mecanismo de resposta procura antes de citar.
`nofollow` porque é referência, não endosso de ranqueamento. */
.fonte-oficial {
margin-top: var(--e-3);
padding-left: var(--e-2);
border-left: 2px solid var(--borda-media);
font-size: 0.9375rem;
line-height: 1.6;
color: var(--txt-2);
max-inline-size: 68ch;
}
.fonte-oficial a {
color: var(--acento);
text-decoration: underline;
text-underline-offset: 3px;
}
/* --- V-Agents: catálogo de modelos ---------------------------------------
Grade de segmentos, sem ícone. A biblioteca não tem padaria nem açougue,
e repetir o mesmo ícone genérico seis vezes vira ruído. O nome do
segmento é o conteúdo, e o rótulo em mono abaixo diz o que ele é.
Três colunas para seis itens: fecha 3x2, sem órfão. */
.catalogo {
display: grid;
gap: var(--e-2);
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .catalogo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .catalogo { grid-template-columns: repeat(3, 1fr); } }
.catalogo__item {
display: grid;
gap: 4px;
padding: var(--e-3);
text-align: center;
place-content: center;
min-height: 92px;
}
.catalogo__item b {
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--acento);
}
.catalogo__item span {
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
text-transform: uppercase;
color: var(--txt-2);
}
/* Faixa de faturamento do parceiro, no card de fonte de receita.
Não usa `.impacto`: as strings aqui são longas ("R$ 750,00 a R$ 2.000,00
por mês") e no tamanho de impacto quebravam em três linhas, virando
bloco em vez de número. Aqui o valor pesa pelo peso e pela cor, não pelo
corpo, e a mono mantém o alinhamento dos dígitos. */
.fonte__faixa {
margin: var(--e-2) 0;
font-family: var(--fonte-mono);
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.45;
letter-spacing: -0.01em;
color: var(--acento);
}
/* ==========================================================================
Hero em três palcos
Os palcos ocupam a MESMA célula de grade, um sobre o outro. Assim a altura
da seção é a do palco mais alto e a troca não empurra a página, que é o
defeito clássico de carrossel: o conteúdo abaixo dança a cada rotação.
O palco inativo some por `visibility`, não só por `opacity`. Transparente
e presente, ele continuaria recebendo Tab e leitor de tela, e o visitante
tabularia para dentro de links invisíveis.
========================================================================== */
.hero__palcos { display: grid; }
.hero__palco {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transform: translate3d(0, 6px, 0);
transition:
opacity var(--dur-entrada) var(--ease),
transform var(--dur-entrada) var(--ease),
visibility 0s linear var(--dur-entrada);
}
.hero__palco[data-ativo='true'] {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s, 0s, 0s;
}
/* --- controles ----------------------------------------------------------- */
.hero__controles {
display: flex;
align-items: center;
gap: var(--e-3);
margin-top: var(--e-4);
}
.hero__pontos { display: flex; align-items: center; gap: 10px; }
/* O alvo tem 44px de toque; o que se vê é o traço de 28px dentro dele.
Ponto de 9px seria alvo pequeno demais para o dedo. */
.hero__ponto {
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
.hero__ponto::after {
content: '';
width: 28px;
height: 3px;
background: var(--borda-forte);
transition: background-color var(--dur-ui) var(--ease), width var(--dur-ui) var(--ease);
}
.hero__ponto:hover::after { background: var(--txt-2); }
.hero__ponto[aria-selected='true']::after { width: 40px; background: var(--acento); }
.hero__pausa {
min-height: 44px;
padding-inline: var(--e-2);
background: none;
border: 1px solid var(--borda-interativa);
border-radius: var(--raio-acao);
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--txt-2);
cursor: pointer;
transition: color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.hero__pausa:hover { color: var(--txt); border-color: var(--borda-forte); }
/* --- as duas soluções, no primeiro palco --------------------------------
Duas janelas em escada, não dois mockups sobrepostos. A sobreposição foi
tentada e não fecha: o mockup do atendimento tem 764px de altura natural
contra 248 do painel, e encolher a largura dele para caber ao lado corta
o texto das mensagens. Aqui cada um fica na largura cheia da coluna,
legível, recortado numa janela de altura fixa, e o deslocamento lateral
mais a sombra dão a sensação de peça solta.
O desvanecimento no pé diz que a tela continua fora do quadro, que é
verdade, em vez de fingir que aquilo é a tela inteira. */
.pilha { display: grid; gap: var(--e-3); }
.pilha__peca { min-width: 0; }
/* O print entra MAIOR que a janela e é cortado por ela. Encolhido para
caber nos ~320px da peça, a tela de produto vira mancha cinza: é o mesmo
motivo pelo qual a base dos palcos tem largura em pixel. Aqui o corte
ainda diz a verdade, porque a janela já desvanece no pé dizendo que a
tela continua fora do quadro. */
.pilha__tela { display: block; width: 880px; max-width: none; height: auto; }
.pilha__janela {
max-height: 208px;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.pilha__selo {
display: inline-block;
margin-top: 10px;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--acento);
}
@media (min-width: 900px) {
.pilha__peca--fundo { margin-right: 14%; }
.pilha__peca--frente { margin-left: 14%; }
.pilha__janela { filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.42)); }
}
/* O mockup do atendimento, na largura inteira da coluna, passa de 700px de
altura e sozinho definiria a altura dos três palcos, já que eles dividem
a mesma célula. Recortado, a dobra volta ao tamanho de sempre. */
.hero__palco .pmock {
max-height: 430px;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
/* --- entrada em cascata --------------------------------------------------
A saída é do palco inteiro, de uma vez; a entrada é elemento por elemento.
Fazer os dois em cascata cruzaria conteúdo saindo com conteúdo entrando na
mesma célula, e o leitor veria duas frases sobrepostas por meio segundo.
Os filhos voltam ao estado inicial sozinhos quando o palco perde o
`data-ativo`, porque a regra de repouso é a que vale por padrão. É isso
que faz a cascata rodar de novo a cada volta do carrossel. */
/* A cascata entra pelo LADO, e não de baixo. Subir é o gesto de conteúdo
que chega numa página parada; aqui o conteúdo está sendo TROCADO por
outro, e vir da direita é o gesto que diz "o próximo". Com três palcos
se revezando, a diferença decide se o visitante entende que há mais
coisa para ver ou acha que a página piscou. */
.hero__palco .hero__texto > *,
.hero__palco .hero__visual {
opacity: 0;
transform: translate3d(34px, 0, 0);
transition:
opacity 520ms var(--ease),
transform 520ms var(--ease);
}
.hero__palco[data-ativo='true'] .hero__texto > *,
.hero__palco[data-ativo='true'] .hero__visual {
opacity: 1;
transform: none;
}
.hero__palco[data-ativo='true'] .hero__texto > :nth-child(1) { transition-delay: 60ms; }
.hero__palco[data-ativo='true'] .hero__texto > :nth-child(2) { transition-delay: 130ms; }
.hero__palco[data-ativo='true'] .hero__texto > :nth-child(3) { transition-delay: 200ms; }
.hero__palco[data-ativo='true'] .hero__texto > :nth-child(4) { transition-delay: 270ms; }
.hero__palco[data-ativo='true'] .hero__texto > :nth-child(5) { transition-delay: 340ms; }
.hero__palco[data-ativo='true'] .hero__visual { transition-delay: 160ms; }
/* Redução de movimento: nada se move e nada espera a vez. O palco continua
trocando pelo `visibility`, que é troca de conteúdo, não animação. */
@media (prefers-reduced-motion: reduce) {
.hero__palco { transition: none; }
.hero__palco .hero__texto > *,
.hero__palco .hero__visual {
opacity: 1;
transform: none;
transition: none;
transition-delay: 0s;
}
}
/* ===== mockups.css ===== */
/* ==========================================================================
Mockups de sistema
O produto é o que a Vértice vende, então é o produto que aparece.
Construídos em CSS, sem imagem: não pesam e não fingem ser captura de tela.
São representações estilizadas, sempre vestidas com marca de parceiro
fictícia, e sempre rotuladas como representação.
Isto substitui o uso do símbolo da Vértice como preenchimento visual.
========================================================================== */
.mock {
--marca: #2D6CDF;
--sobre-marca: #FFFFFF;
position: relative;
max-width: 100%;
min-width: 0;
}
/* --- janela de navegador: o portal do gestor ---------------------------- */
.mock__janela {
border: 1px solid var(--borda-media);
background: var(--fundo-2);
overflow: hidden;
box-shadow: var(--elev-flutuante);
}
.mock__topo {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
background: var(--fundo);
border-bottom: 1px solid var(--borda);
}
.mock__bolinhas { display: flex; gap: 5px; flex: none; }
.mock__bolinhas i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--borda-forte);
display: block;
}
.mock__url {
flex: 1;
min-width: 0;
padding: 5px 10px;
background: var(--fundo-2);
border: 1px solid var(--borda);
border-radius: var(--raio-campo);
font-family: var(--fonte-mono);
font-size: 11px;
line-height: 1.3;
color: var(--txt-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mock__url b { color: var(--txt); font-weight: 400; }
.mock__corpo { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
.mock__lateral {
padding: 12px 10px;
border-right: 1px solid var(--borda);
background: var(--fundo);
display: grid;
gap: 12px;
align-content: start;
overflow: hidden;
min-width: 0;
}
.mock__marca { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mock__logo {
width: 20px;
height: 20px;
flex: none;
display: grid;
place-items: center;
background: var(--marca);
color: var(--sobre-marca);
font-size: 10px;
font-weight: 700;
line-height: 1;
}
.mock__nome {
font-size: 10px;
font-weight: 600;
color: var(--txt);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.mock__itens { display: grid; gap: 5px; }
.mock__itens i { display: block; height: 5px; background: var(--borda-media); }
.mock__itens i:first-child { background: var(--marca); width: 80%; }
.mock__itens i:nth-child(2) { width: 60%; }
.mock__itens i:nth-child(3) { width: 72%; }
.mock__itens i:nth-child(4) { width: 52%; }
.mock__painel { padding: 14px; display: grid; gap: 12px; align-content: start; }
.mock__linha-topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.mock__titulo {
font-size: 11px;
font-weight: 600;
color: var(--txt);
letter-spacing: -0.01em;
}
.mock__botao {
padding: 5px 12px;
background: var(--marca);
color: var(--sobre-marca);
border-radius: var(--raio-acao);
font-size: 9px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
.mock__grade {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.mock__kpi {
border: 1px solid var(--borda);
background: var(--fundo);
padding: 8px 9px;
display: grid;
gap: 4px;
}
.mock__kpi b {
font-family: var(--fonte-mono);
font-size: 13px;
font-weight: 400;
color: var(--txt);
line-height: 1;
}
.mock__kpi span {
font-size: 8px;
color: var(--txt-2);
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.mock__tabela {
display: grid;
gap: 1px;
background: var(--borda);
border: 1px solid var(--borda);
}
.mock__tr {
display: grid;
grid-template-columns: minmax(0, 1fr) 40px 40px 28px;
gap: 8px;
align-items: center;
padding: 7px 9px;
background: var(--fundo);
}
.mock__tr--cab { background: var(--fundo-2); }
.mock__tr span { height: 5px; background: var(--borda-forte); display: block; }
.mock__tr--cab span { background: var(--borda-media); }
.mock__tr span:first-child { width: 84%; }
.mock__tr em {
font-family: var(--fonte-mono);
font-size: 9px;
font-style: normal;
color: var(--txt-2);
line-height: 1;
}
.mock__ok {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sinal-ok);
justify-self: end;
}
/* --- telefone: o app de marcação ---------------------------------------- */
.mock__fone {
position: absolute;
right: -18px;
bottom: -26px;
width: 112px;
border: 1px solid var(--borda-forte);
border-radius: 14px;
background: var(--fundo);
padding: 7px 6px 9px;
box-shadow: var(--elev-flutuante);
}
.mock__fone-topo {
width: 30px;
height: 3px;
border-radius: 2px;
background: var(--borda-forte);
margin: 0 auto 8px;
}
.mock__fone-tela {
border: 1px solid var(--borda);
background: var(--fundo-2);
padding: 10px 8px;
display: grid;
gap: 9px;
justify-items: center;
}
.mock__fone-marca {
width: 18px;
height: 18px;
display: grid;
place-items: center;
background: var(--marca);
color: var(--sobre-marca);
font-size: 9px;
font-weight: 700;
line-height: 1;
}
/* Enquadramento de reconhecimento facial: quatro cantos e um alvo. */
.mock__rosto {
width: 46px;
height: 46px;
display: grid;
place-items: center;
position: relative;
}
.mock__rosto::before,
.mock__rosto::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
border: 1px solid var(--marca);
}
.mock__rosto::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.mock__rosto::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.mock__rosto i {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid var(--txt-2);
display: block;
}
.mock__hora {
font-family: var(--fonte-mono);
font-size: 14px;
color: var(--txt);
line-height: 1;
}
.mock__fone-botao {
width: 100%;
padding: 6px;
background: var(--marca);
color: var(--sobre-marca);
border-radius: var(--raio-acao);
font-size: 8px;
font-weight: 600;
text-align: center;
line-height: 1.4;
}
.mock__nota {
margin-top: var(--e-6);
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
color: var(--txt-2);
line-height: 1.5;
text-align: center;
}
/* No hero o conjunto ganha respiro para o telefone não sangrar na borda.
O min-width 0 no invólucro é o que impede o mockup de empurrar a coluna. */
.hero__visual > * { min-width: 0; max-width: 100%; }
.hero__visual .mock { width: min(460px, 100%); }
@media (max-width: 899px) {
.hero__visual .mock { width: min(360px, 100%); margin-inline: auto; }
.mock__fone { width: 92px; right: -2px; bottom: -18px; }
}
/* Abaixo de 640px o mockup precisa caber de verdade, não só ser cortado.
A lateral vira só o logo do parceiro, que é o que ela comunica. */
@media (max-width: 639px) {
.mock__corpo { grid-template-columns: 54px minmax(0, 1fr); }
.mock__lateral { padding: 10px 8px; justify-items: center; }
.mock__nome { display: none; }
.mock__painel { padding: 10px; gap: 10px; }
.mock__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mock__kpi:last-child { display: none; }
.mock__tr { grid-template-columns: minmax(0, 1fr) 34px 34px 16px; gap: 6px; padding: 6px 8px; }
.mock__botao { font-size: 8px; padding: 5px 9px; }
.mock__fone { width: 82px; right: 0; bottom: -14px; }
.mock__rosto { width: 38px; height: 38px; }
.mock__hora { font-size: 12px; }
}
/* --- mockup pequeno, para o palco do mega menu -------------------------- */
.mock--mini .mock__corpo { grid-template-columns: 76px minmax(0, 1fr); }
.mock--mini .mock__painel { padding: 10px; gap: 8px; }
.mock--mini .mock__lateral { padding: 10px 8px; gap: 9px; }
.mock--mini .mock__grade { gap: 5px; }
.mock--mini .mock__janela { box-shadow: none; }
/* ==========================================================================
Diagrama de integração, para o V-Agents
O produto está em desenvolvimento e não existe tela para mostrar.
Um diagrama de arquitetura é honesto: descreve o caminho, não inventa UI.
========================================================================== */
.fluxo {
display: grid;
gap: var(--e-1);
border: 1px solid var(--borda);
background: var(--fundo-2);
padding: var(--e-3);
}
.fluxo__no {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-2);
flex-wrap: wrap;
padding: 13px 15px;
border: 1px solid var(--borda-media);
background: var(--fundo);
}
.fluxo__no b { font-size: 0.9375rem; font-weight: 600; }
.fluxo__no span {
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
color: var(--txt-2);
text-transform: uppercase;
}
.fluxo__no--vertice { border-left: 3px solid var(--acento); }
.fluxo__seta {
justify-self: center;
width: 1px;
height: 20px;
background: var(--borda-forte);
position: relative;
}
.fluxo__seta::after {
content: '';
position: absolute;
bottom: 0;
left: -3px;
width: 7px;
height: 7px;
border-right: 1px solid var(--borda-forte);
border-bottom: 1px solid var(--borda-forte);
transform: rotate(45deg);
}
/* ==========================================================================
Trilha, para a Universidade
========================================================================== */
.trilha {
display: grid;
gap: 1px;
background: var(--borda);
border: 1px solid var(--borda);
}
.trilha__passo {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 12px;
align-items: baseline;
padding: 13px 15px;
background: var(--fundo);
}
.trilha__n {
font-family: var(--fonte-mono);
font-size: var(--t-mono);
color: var(--txt-2);
}
.trilha__passo b { font-size: 0.9375rem; font-weight: 600; display: block; }
.trilha__passo span {
font-size: 0.8125rem;
color: var(--txt-2);
line-height: 1.45;
}
/* ===== mockups-produto.css ===== */
/* ==========================================================================
Mockups de produto, animados
Sistema de Ponto: gráfico de horas, absenteísmo e rotatividade, com as
barras subindo em laço lento.
V-Agents: um atendimento acontecendo, com o agente digitando, mandando
imagem e link de pagamento.
Tudo em CSS, sem imagem e sem JS. Representação estilizada, rotulada como
tal na tela. Laço lento de propósito: é ambiente, não chama atenção.
========================================================================== */
.pmock {
--marca: #2D6CDF;
--sobre-marca: #FFFFFF;
border: 1px solid var(--borda-media);
background: var(--fundo-2);
overflow: hidden;
min-width: 0;
max-width: 100%;
}
.pmock__topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-2);
padding: 11px 14px;
background: var(--fundo);
border-bottom: 1px solid var(--borda);
}
.pmock__id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pmock__logo {
width: 22px;
height: 22px;
flex: none;
display: grid;
place-items: center;
background: var(--marca);
color: var(--sobre-marca);
font-size: 11px;
font-weight: 700;
line-height: 1;
}
.pmock__nome {
font-size: 12px;
font-weight: 600;
color: var(--txt);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pmock__tag {
font-family: var(--fonte-mono);
font-size: 10px;
color: var(--txt-2);
text-transform: uppercase;
white-space: nowrap;
flex: none;
}
.pmock__corpo { padding: var(--e-3); display: grid; gap: var(--e-3); }
/* ==========================================================================
Sistema de Ponto · painel de indicadores
========================================================================== */
.pmock__kpis {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.pmock__kpi {
border: 1px solid var(--borda);
background: var(--fundo);
padding: 10px 11px;
display: grid;
gap: 5px;
min-width: 0;
}
.pmock__kpi b {
font-family: var(--fonte-mono);
font-size: 17px;
font-weight: 400;
color: var(--txt);
line-height: 1;
}
.pmock__kpi span {
font-size: 9px;
line-height: 1.25;
color: var(--txt-2);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.pmock__kpi--ok b { color: var(--sinal-ok); }
.pmock__kpi--atencao b { color: var(--sinal-aviso); }
/* --- gráfico de barras, subindo em laço ---------------------------------- */
.pmock__grafico {
border: 1px solid var(--borda);
background: var(--fundo);
padding: 12px;
display: grid;
gap: 10px;
}
.pmock__legenda {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
font-size: 9px;
color: var(--txt-2);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.pmock__legenda span { display: inline-flex; align-items: center; gap: 6px; }
.pmock__legenda i {
width: 8px;
height: 8px;
display: block;
flex: none;
}
.pmock__legenda i:nth-of-type(1) { background: var(--acento); }
.pmock__barras {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
align-items: end;
gap: 6px;
height: 108px;
}
.pmock__col {
display: grid;
gap: 2px;
align-content: end;
height: 100%;
}
.pmock__b {
transform-origin: 50% 100%;
animation: pmockSubir 5.2s var(--ease) infinite;
}
/* Horas trabalhadas, a barra alta. */
.pmock__b--horas { background: var(--acento); }
/* Absenteísmo, o pedaço menor em cima. */
.pmock__b--falta { background: var(--ambar); opacity: 0.85; }
.pmock__col:nth-child(1) .pmock__b { animation-delay: 0s; }
.pmock__col:nth-child(2) .pmock__b { animation-delay: .12s; }
.pmock__col:nth-child(3) .pmock__b { animation-delay: .24s; }
.pmock__col:nth-child(4) .pmock__b { animation-delay: .36s; }
.pmock__col:nth-child(5) .pmock__b { animation-delay: .48s; }
.pmock__col:nth-child(6) .pmock__b { animation-delay: .6s; }
.pmock__col:nth-child(7) .pmock__b { animation-delay: .72s; }
.pmock__col:nth-child(8) .pmock__b { animation-delay: .84s; }
@keyframes pmockSubir {
0% { transform: scaleY(.35); }
40% { transform: scaleY(1); }
70% { transform: scaleY(1); }
100% { transform: scaleY(.35); }
}
.pmock__eixo {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 6px;
font-family: var(--fonte-mono);
font-size: 9px;
color: var(--txt-2);
text-align: center;
}
/* --- linha de rotatividade ----------------------------------------------- */
.pmock__linha-svg { width: 100%; height: 54px; display: block; }
.pmock__traco {
fill: none;
stroke: var(--marca);
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 320;
animation: pmockTracar 5.2s var(--ease) infinite;
}
@keyframes pmockTracar {
0% { stroke-dashoffset: 320; }
45% { stroke-dashoffset: 0; }
85% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 320; }
}
.pmock__ponto-svg {
fill: var(--acento);
animation: pmockPulsar 5.2s var(--ease) infinite;
}
@keyframes pmockPulsar {
0%, 40% { opacity: 0; r: 0; }
50% { opacity: 1; r: 3.5; }
85% { opacity: 1; r: 3.5; }
100% { opacity: 0; r: 0; }
}
/* ==========================================================================
V-Agents · atendimento acontecendo
========================================================================== */
.pmock__chat {
display: grid;
gap: 9px;
padding: 12px;
border: 1px solid var(--borda);
background: var(--fundo);
min-height: 250px;
align-content: start;
}
.pmock__msg {
max-width: 84%;
padding: 9px 12px;
font-size: 11.5px;
line-height: 1.5;
opacity: 0;
animation: pmockMsg 11s var(--ease) infinite;
}
/* Cliente à esquerda, agente à direita. */
.pmock__msg--cliente {
justify-self: start;
background: var(--fundo-2);
border: 1px solid var(--borda-media);
color: var(--txt);
}
.pmock__msg--agente {
justify-self: end;
background: var(--marca);
color: var(--sobre-marca);
border: 1px solid transparent;
}
.pmock__msg:nth-of-type(1) { animation-delay: .3s; }
.pmock__msg:nth-of-type(2) { animation-delay: 1.9s; }
.pmock__msg:nth-of-type(3) { animation-delay: 3.5s; }
.pmock__msg:nth-of-type(4) { animation-delay: 5.6s; }
.pmock__msg:nth-of-type(5) { animation-delay: 7.4s; }
@keyframes pmockMsg {
0%, 2% { opacity: 0; transform: translate3d(0, 8px, 0); }
6%, 88% { opacity: 1; transform: none; }
96%,100% { opacity: 0; transform: none; }
}
/* Cardápio que o agente manda: bloco de imagem estilizado. */
.pmock__foto {
justify-self: end;
width: 132px;
border: 1px solid var(--borda-media);
background: var(--fundo-2);
padding: 7px;
display: grid;
gap: 6px;
opacity: 0;
animation: pmockMsg 11s var(--ease) 5.6s infinite;
}
.pmock__foto-area {
aspect-ratio: 4 / 3;
background:
linear-gradient(135deg, var(--lavagem-acento), transparent 60%),
var(--fundo);
border: 1px solid var(--borda);
display: grid;
place-items: center;
color: var(--txt-2);
}
.pmock__foto-area .ico { width: 26px; height: 26px; }
.pmock__foto span {
font-family: var(--fonte-mono);
font-size: 9px;
color: var(--txt-2);
text-align: center;
}
/* Link de pagamento: o fecho do atendimento. */
.pmock__pgto {
justify-self: end;
width: 176px;
border: 1px solid var(--acento);
background: var(--lavagem-acento);
padding: 10px 11px;
display: grid;
gap: 7px;
opacity: 0;
animation: pmockMsg 11s var(--ease) 7.4s infinite;
}
.pmock__pgto-topo {
display: flex;
align-items: center;
gap: 7px;
font-family: var(--fonte-mono);
font-size: 9px;
color: var(--acento);
text-transform: uppercase;
}
.pmock__pgto b {
font-family: var(--fonte-mono);
font-size: 15px;
font-weight: 400;
color: var(--txt);
line-height: 1;
}
.pmock__pgto-btn {
padding: 6px;
background: var(--acento-fundo);
color: var(--n-950);
border-radius: var(--raio-acao);
font-size: 9.5px;
font-weight: 600;
text-align: center;
line-height: 1.4;
}
/* Três pontinhos de "digitando", entre as mensagens. */
.pmock__digitando {
justify-self: end;
display: flex;
gap: 4px;
padding: 9px 12px;
background: var(--fundo-2);
border: 1px solid var(--borda-media);
opacity: 0;
animation: pmockDigitando 11s var(--ease) 2.7s infinite;
}
.pmock__digitando i {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--txt-2);
display: block;
animation: pmockPula 1.1s var(--ease) infinite;
}
.pmock__digitando i:nth-child(2) { animation-delay: .16s; }
.pmock__digitando i:nth-child(3) { animation-delay: .32s; }
@keyframes pmockDigitando {
0%, 2% { opacity: 0; }
5%, 7% { opacity: 1; }
9%, 100% { opacity: 0; }
}
@keyframes pmockPula {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
/* --- rodapé de funcionalidades ------------------------------------------- */
.pmock__recursos {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 11px 14px;
border-top: 1px solid var(--borda);
background: var(--fundo);
}
.pmock__recursos span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border: 1px solid var(--borda-media);
font-size: 10px;
color: var(--txt-2);
line-height: 1.3;
white-space: nowrap;
}
.pmock__recursos .ico { width: 13px; height: 13px; color: var(--acento); }
.pmock__nota {
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
color: var(--txt-2);
line-height: 1.5;
margin-top: var(--e-2);
}
/* --- redução de movimento ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.pmock__b { animation: none !important; transform: scaleY(1) !important; }
.pmock__traco { animation: none !important; stroke-dashoffset: 0 !important; }
.pmock__ponto-svg { animation: none !important; opacity: 1 !important; r: 3.5; }
.pmock__msg,
.pmock__foto,
.pmock__pgto { animation: none !important; opacity: 1 !important; transform: none !important; }
.pmock__digitando { display: none !important; }
}
/* ==========================================================================
Palco de produto: print real da tela, com widgets flutuando por cima
Serve os dois produtos. O print é bitmap, os widgets são CSS. Os
originais dos widgets traziam nome completo de funcionário e foto de
rosto, e isso não sobe para página pública; refeitos aqui, usam as
pessoas fictícias do resto do site.
Os widgets são CLAROS dentro de um bloco escuro, e por isso redeclaram os
próprios tokens em vez de herdar os do hero. Widget de produto é um
pedaço da interface real invadindo a página, e a interface real é clara.
Cada palco só escolhe a largura da base, em `--base-larg`. O resto do
comportamento é igual, e por isso mora aqui uma vez só.
========================================================================== */
.palco-print { position: relative; }
/* Onde há widget flutuando, a base fica larga e baixa e são eles que dão
altura ao palco, transbordando para fora dela em cima e embaixo. A folga
reserva esse espaço, senão a dobra os cortaria. Palco sem widget não
precisa dela. */
@media (min-width: 900px) {
.palco-print--widgets { padding-block: 16%; }
}
/* O print é MAIOR que a coluna e sangra para a direita, onde o
`overflow: hidden` do hero o corta. Encolhido para caber, ele vira mancha
cinza ilegível: a coluna do visual tem 376px, e o painel tem 1100px de
origem, então caber significa 0,34 de escala e nada nele se lê.
Por isso a largura é em PIXEL e não em porcentagem: no Ponto, 880px é o
original de 1100 a 0,8 de escala, que é onde o texto do painel volta a
ter corpo de leitura e passa a bater com o dos cartões em CSS por cima.
É essa igualdade de escala que sustenta a ilusão, e porcentagem a
quebrava: a mesma regra saía a 0,55 em 390px e a 1,12 em 768px.
O preço é que em tela estreita sobra menos painel à vista. Vale: um
pedaço legível da tela real diz mais que a tela inteira ilegível, e o
corte na direita já diz que ela continua fora da página. */
.palco-print__base { width: var(--base-larg); max-width: none; }
/* Mesma conta do V-Agents: a base precisa caber no que se vê, senão as
quinas dela ficam fora do quadro e não existe peça "em volta". 680px
sangra só o suficiente para o corte dizer que a tela continua. */
.palco-print--ponto { --base-larg: 680px; }
/* A TELA PRINCIPAL é a protagonista: fica nítida, por baixo, e as peças
menores decoram as quinas DELA sem entrar no miolo.
Medido: da coluna do visual até a borda da tela há 616px. Base mais larga
que isso tem as próprias quinas fora do quadro, e aí não existe "em
volta": qualquer peça ancorada no palco cai no meio da tela. Por isso
620px, que é a base cabendo quase inteira no que se vê. */
.palco-print--agentes { --base-larg: 620px; }
/* O degradê no pé dissolve o print no azul do hero, em vez de terminar num
corte reto. Fade e não borda: a tela continua, ela só sai de cena. */
.palco-print__base img {
display: block;
width: 100%;
height: auto;
border: 1px solid rgba(228, 233, 242, 0.16);
-webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
}
.wid {
--w-fundo: #FFFFFF;
--w-txt: #101828;
--w-txt-2: #667085;
--w-borda: #E4E7EC;
--w-sinal: #B54708;
--w-sinal-fundo: #FFFAEB;
position: absolute;
display: grid;
gap: 8px;
padding: 12px 14px;
background: var(--w-fundo);
border: 1px solid var(--w-borda);
/* A barra verde na aresta esquerda existe na interface real e é o único
lugar onde a cor da marca aparece dentro do widget. */
border-left: 3px solid var(--acento-fundo);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
color: var(--w-txt);
text-align: left;
}
/* Inconsistência é erro, solicitação pendente é aviso. O selo do ícone
segue essa diferença, como na tela do produto. */
.wid--alerta {
--w-sinal: #D92D20;
--w-sinal-fundo: #FEF3F2;
}
.wid__topo { display: flex; align-items: center; gap: 8px; }
.wid__titulo { display: grid; gap: 1px; min-width: 0; }
.wid__titulo b {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: -0.01em;
white-space: nowrap;
}
.wid__titulo span { font-size: 0.6875rem; color: var(--w-txt-2); }
.wid__ico {
display: grid;
place-items: center;
width: 22px;
height: 22px;
flex: none;
background: var(--w-sinal-fundo);
color: var(--w-sinal);
}
.wid__ico .ico { width: 13px; height: 13px; }
.wid__chip {
padding: 2px 7px;
border-radius: 999px;
background: var(--w-sinal-fundo);
font-size: 0.625rem;
font-weight: 600;
color: var(--w-sinal);
white-space: nowrap;
}
.wid__chip--espera { margin-left: auto; }
.wid__resumo { display: flex; align-items: baseline; gap: 6px; }
.wid__resumo b { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em; }
.wid__resumo span { font-size: 0.6875rem; color: var(--w-txt-2); }
.wid__prazo { margin-left: auto; font-size: 0.625rem; color: var(--w-txt-2); white-space: nowrap; }
.wid__pessoa { display: flex; align-items: center; gap: 8px; }
.wid__avatar {
display: grid;
place-items: center;
width: 26px;
height: 26px;
flex: none;
border-radius: 999px;
background: #F2F4F7;
font-size: 0.625rem;
font-weight: 600;
color: var(--w-txt-2);
}
.wid__quem { display: grid; gap: 1px; min-width: 0; }
.wid__quem b { font-size: 0.75rem; font-weight: 600; }
.wid__quem span { font-size: 0.6875rem; color: var(--w-txt-2); }
/* Abaixo de 900px os widgets saem de cima do print: em coluna estreita eles
cobririam a tela inteira em vez de decorar a borda dela. */
.wid { position: static; }
@media (min-width: 900px) {
.wid { position: absolute; }
/* As três peças moram NAS QUINAS da tela e transbordam para fora dela.
Nenhuma entra no miolo: o apurador é a tela principal e precisa
aparecer, e peça por cima do meio dele tapa justamente o que ela
deveria estar destacando.
Largura em PIXEL e ancoragem por `left`, inclusive na de baixo: `right`
é relativo ao palco, que tem 376px, enquanto a tela tem 680 e sangra à
direita. Ancorada à direita a peça cairia no meio da tela. */
.wid--fila { top: -11%; left: -20%; width: 280px; }
.wid--alerta { bottom: -7%; left: 84%; width: 272px; }
.peca--acoes { top: 46%; left: -26%; width: 300px; }
}
@media (prefers-reduced-motion: no-preference) {
@media (min-width: 900px) {
.wid--fila { animation: flutuar 8.5s var(--ease) infinite; }
.wid--alerta { animation: flutuar 7s var(--ease) 0.7s infinite; }
.peca--acoes { animation: flutuar 9.5s var(--ease) 1.4s infinite; }
}
}
/* --- Peça flutuante de imagem ------------------------------------------
O Ponto flutua cartões refeitos em CSS, porque os originais traziam nome
e rosto de gente de verdade. O V-Agents flutua RECORTE do print, porque a
tela dele é de demonstração e não há o que proteger. Mesmo efeito, duas
origens diferentes.
A borda é clara porque a peça é um pedaço de interface clara sobre o
azul do hero: sem ela o branco do print encosta no degradê e a peça
perde o limite. */
.peca {
position: static;
border: 1px solid rgba(228, 233, 242, 0.22);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
background: #FFFFFF;
}
.peca img { display: block; width: 100%; height: auto; }
/* Abaixo de 900px as peças saem de cima da tela e empilham: em coluna
estreita elas cobririam a base inteira em vez de decorar a borda dela.
E aí a tela ao fundo vira repetição do que já está nas peças, então
ela sai de cena. */
@media (max-width: 899px) {
.palco-print--agentes .palco-print__base { display: none; }
.peca + .peca { margin-top: 14px; }
}
@media (min-width: 900px) {
.peca { position: absolute; }
/* Largura em PIXEL pelo mesmo motivo da base: é a escala que decide se o
texto da peça se lê, e porcentagem amarra a escala à coluna.
As peças são MENORES que a tela e moram nas quinas dela, transbordando
para fora. Encostam na borda e param: o miolo da tela principal é o que
precisa ser visto, e peça por cima dele apaga justamente aquilo que ela
deveria estar destacando. */
/* Quinas OPOSTAS da tela, transbordando para fora dela. A conversa ancora
por `left` e não por `right`: `right` é relativo ao palco, que tem
376px, enquanto a tela tem 620 e sangra à direita. Ancorada à direita
ela cairia no meio da tela em vez de na quina. */
.peca--fila { top: -16%; left: -24%; width: 196px; }
.peca--conversa { bottom: -12%; left: 76%; width: 340px; }
}
@media (prefers-reduced-motion: no-preference) {
@media (min-width: 900px) {
.peca--fila { animation: flutuar 8.5s var(--ease) infinite; }
.peca--conversa { animation: flutuar 7s var(--ease) 0.7s infinite; }
}
}
@keyframes flutuar {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -8px, 0); }
}
/* ==========================================================================
Tela esfumaçada
Print real do produto dissolvendo no fundo do bloco azul. A mesma imagem
que o mega menu usa. Ver views/parciais/tela-esfumacada.ejs.
========================================================================== */
.tela-fumaca {
position: relative;
/* A borda fica só em cima e nas laterais: embaixo a imagem já dissolveu, e
um fio cruzando o nada denunciaria onde a máscara termina.
Pelo mesmo motivo NÃO há `box-shadow` aqui. Já teve, e era o bug: a
sombra é desenhada a partir da caixa, que continua retangular e inteira
mesmo com a imagem dissolvida, então ela riscava uma linha no vazio e a
esfumaçada sumia. Máscara apaga o pixel, não a geometria. */
border: 1px solid var(--borda);
border-bottom: 0;
}
.tela-fumaca img {
display: block;
width: 100%;
height: auto;
/* A dissolução. Começa opaca, some nos últimos 32% da altura.
`-webkit-` junto: o Safari só entende a versão com prefixo. */
/* Opaca até a metade, e some de vez no último terço. A sombra que
destacava a peça do fundo saiu junto, então a dissolução precisa ser
longa o bastante para ser lida como efeito, e não como imagem cortada. */
-webkit-mask-image: linear-gradient(to bottom, #000 46%, rgba(0, 0, 0, .55) 72%, rgba(0, 0, 0, .12) 92%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 46%, rgba(0, 0, 0, .55) 72%, rgba(0, 0, 0, .12) 92%, transparent 100%);
}
/* Onde o navegador não tem máscara, a imagem aparece inteira e com a borda
fechada: sem a esfumaçada, um lado aberto pareceria imagem cortada. */
@supports not ((mask-image: linear-gradient(#000, transparent)) or
(-webkit-mask-image: linear-gradient(#000, transparent))) {
.tela-fumaca { border-bottom: 1px solid var(--borda); }
}
.tela-fumaca__nota {
margin-top: var(--e-2);
font-family: var(--mono);
font-size: 0.75rem;
font-weight: 400;
line-height: 1.5;
color: var(--txt-2);
}
/* ===== composicao.css ===== */
/* ==========================================================================
Vocabulário de composição
Extraído da apresentação comercial da Vértice, que é a referência visual
escolhida pelo cliente. Trago dela a COMPOSIÇÃO e o RITMO.
Não trago a tipografia nem a paleta: a apresentação usa IBM Plex Mono,
Space Grotesk, #80FF00 e #B5E849, todos na lista de descarte permanente
do brandbook. Aqui os mesmos gestos são feitos com Poppins, JetBrains Mono
e a paleta travada.
========================================================================== */
/* --- eyebrow com traço --------------------------------------------------
O traço curto antes do rótulo é a assinatura da peça de referência. */
.eyebrow--traco {
display: flex;
align-items: center;
gap: 14px;
}
.eyebrow--traco::before {
content: '';
width: 28px;
height: 2px;
background: var(--acento);
flex: none;
}
/* --- título com a segunda linha em lime ---------------------------------
Ênfase curta em acento é permitida. Nunca em parágrafo, nunca em bloco. */
.destaque { color: var(--acento); }
/* --- grade de fundo -----------------------------------------------------
Textura estrutural, não decoração: reforça a âncora de fundação.
Contraste baixíssimo e fora do caminho da leitura. */
.secao--grade { position: relative; isolation: isolate; }
.secao--grade::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
linear-gradient(to right, var(--linha-grade) 1px, transparent 1px),
linear-gradient(to bottom, var(--linha-grade) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
/* --- callout: o bloco que o vendedor lê em voz alta --------------------- */
/* Lavagem de 5% sobre papel sumia: o bloco lia como caixa desbotada em
vez de destaque. Agora usa a mesma superfície do card, com a barra de
acento carregando a ênfase. */
.callout {
display: grid;
gap: 10px;
padding: var(--e-3) var(--e-4);
border: 1px solid var(--borda);
border-left: 3px solid var(--acento);
background: var(--fundo-2);
/* 66ch na CAIXA, e o parágrafo enche a caixa. Antes a caixa tinha 78ch e
o parágrafo 60ch, então sobrava espaço morto dentro do próprio bloco. */
max-inline-size: 66ch;
}
.callout__rotulo {
font-family: var(--fonte-mono);
font-weight: 400;
font-size: var(--t-mono-p);
letter-spacing: normal;
text-transform: uppercase;
color: var(--acento);
}
.callout p {
font-size: 0.9375rem;
line-height: 1.65;
color: var(--txt);
}
/* --- linha de fecho -----------------------------------------------------
Uma frase branca por seção, com as palavras que importam em lime. */
.fecho {
margin-top: var(--e-6);
padding-top: var(--e-3);
border-top: 1px solid var(--borda);
font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
font-weight: 500;
letter-spacing: -0.015em;
line-height: 1.5;
max-inline-size: 70ch;
color: var(--txt);
}
.fecho .destaque { font-weight: 600; }
/* ==========================================================================
News
========================================================================== */
/* filtro por eixo */
.news__filtros {
display: flex;
flex-wrap: wrap;
gap: var(--e-1);
margin-bottom: var(--e-4);
}
.news__filtro {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 11px 18px;
border: 1px solid var(--borda-interativa);
border-radius: var(--raio-acao);
background: transparent;
color: var(--txt-2);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease);
}
.news__filtro:hover { color: var(--txt); }
.news__filtro[aria-pressed='true'] {
background: var(--fundo-2);
color: var(--txt);
}
.news__item[hidden] { display: none; }
/* --- artigo -------------------------------------------------------------- */
.artigo { max-inline-size: var(--prosa); display: grid; gap: var(--e-3); }
.artigo__meta {
display: flex;
flex-wrap: wrap;
gap: var(--e-1) var(--e-3);
align-items: center;
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
color: var(--txt-2);
text-transform: uppercase;
}
.artigo__corpo { display: grid; gap: var(--e-2); }
.artigo__corpo p { color: var(--txt-2); max-inline-size: 68ch; line-height: 1.75; }
.artigo__relacionados { display: grid; gap: 1px; background: var(--borda); border: 1px solid var(--borda); }
/* ==========================================================================
Quem somos
========================================================================== */
/* Quadros separados, não colados. Cada um é um .card, com o hover padrão. */
.quem {
display: grid;
gap: var(--e-3);
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.quem { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
}
.quem__bloco {
display: grid;
gap: 12px;
align-content: start;
min-width: 0;
}
.quem__topo {
display: grid;
gap: 12px;
justify-items: start;
}
.quem__n {
font-family: var(--fonte-mono);
font-weight: 400;
font-size: var(--t-mono);
letter-spacing: normal;
color: var(--acento);
}
/* ==========================================================================
Chamada de uma linha
Mora dentro da seção, herda o tema dela, e por isso funciona igual no
papel e no bloco invertido sem uma única cor escrita à mão. Ver
views/parciais/cta-linha.ejs para o porquê de ela existir.
========================================================================== */
/* Dentro de uma grade de duas colunas (`.split`), a chamada atravessa as
duas: ela fecha a seção inteira, não uma das metades. */
.split > .cta-linha { grid-column: 1 / -1; }
.cta-linha {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--e-3);
margin-top: var(--e-6);
padding-top: var(--e-3);
border-top: 1px solid var(--borda);
}
.cta-linha__texto {
flex: 1 1 32ch;
min-width: 0;
max-inline-size: 60ch;
font-size: clamp(1rem, 1.4vw, 1.125rem);
font-weight: 500;
line-height: 1.5;
letter-spacing: -0.01em;
color: var(--txt);
}
.cta-linha__acoes { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.cta-linha__alt { font-size: 0.875rem; }
@media (max-width: 700px) {
.cta-linha { margin-top: var(--e-4); }
/* O botão ocupa a linha inteira: alvo de toque grande vale mais que
economia de altura no fim de uma seção que o leitor acabou de vencer. */
.cta-linha__acoes { width: 100%; }
.cta-linha__acoes .btn { width: 100%; justify-content: center; }
}
/* ===== secoes.css ===== */
/* ==========================================================================
Seções reformuladas
Fontes de receita com ícone, comparativo em cards, jornada da parceria,
entregas da Universidade e o ecossistema com as duas soluções.
========================================================================== */
/* ==========================================================================
Fontes de receita
Cada fonte explica de onde sai o dinheiro e qual o argumento de venda.
========================================================================== */
.fontes {
display: grid;
gap: var(--e-2);
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.fontes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
.fontes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fonte {
display: grid;
gap: var(--e-2);
align-content: start;
min-width: 0;
}
.fonte__topo {
display: grid;
gap: 12px;
justify-items: start;
}
.fonte__nome {
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--txt);
line-height: 1.25;
}
.fonte__tipo {
display: block;
margin-top: 5px;
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
letter-spacing: normal;
text-transform: uppercase;
color: var(--txt-2);
}
/* Recorrente é a tese: ganha o acento. Única fica neutra. */
.fonte[data-tipo='recorrente'] .fonte__tipo { color: var(--acento); }
.fonte__como {
font-size: 0.9375rem;
line-height: 1.65;
color: var(--txt-2);
}
.fonte__venda {
margin-top: auto;
padding-top: var(--e-2);
border-top: 1px solid var(--borda);
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 10px;
align-items: start;
font-size: 0.875rem;
line-height: 1.55;
color: var(--txt);
}
.fonte__venda .ico { width: 18px; height: 18px; color: var(--acento); margin-top: 2px; }
/* Resumo da seção: a conta que fecha o argumento. */
.fontes__resumo {
display: grid;
gap: var(--e-3);
grid-template-columns: 1fr;
margin-top: var(--e-4);
}
@media (min-width: 768px) {
.fontes__resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.resumo-num {
display: grid;
gap: 8px;
padding: var(--e-3);
border: 1px solid var(--borda);
background: var(--fundo-2);
}
.resumo-num b {
font-size: var(--t-impacto-menor);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1;
color: var(--acento);
font-variant-numeric: tabular-nums;
}
.resumo-num span { font-size: 0.875rem; color: var(--txt-2); line-height: 1.5; }
/* ==========================================================================
Comparativo em cards
Três modelos lado a lado. O white label é o único destacado.
========================================================================== */
.comp {
display: grid;
gap: var(--e-2);
grid-template-columns: 1fr;
align-items: start;
}
@media (min-width: 900px) {
.comp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.comp__card {
display: grid;
gap: 0;
min-width: 0;
}
/* O card da casa: acento no topo e fundo levemente esverdeado. */
.comp__card--vencedor {
border-color: var(--acento);
border-top-width: 3px;
background:
linear-gradient(180deg, var(--lavagem-acento), transparent 40%),
var(--fundo-2);
}
.comp__cabeca {
display: grid;
gap: 10px;
padding: var(--e-3);
border-bottom: 1px solid var(--borda);
}
.comp__card--vencedor .comp__cabeca { border-bottom-color: var(--acento-linha); }
.comp__nome {
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--txt);
}
.comp__card--vencedor .comp__nome { color: var(--acento); }
.comp__resumo { font-size: 0.875rem; line-height: 1.55; color: var(--txt-2); }
.comp__linhas { display: grid; }
.comp__linha {
display: grid;
gap: 4px;
padding: 13px var(--e-3);
border-bottom: 1px solid var(--borda);
}
.comp__linha:last-child { border-bottom: 0; }
.comp__rotulo {
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
letter-spacing: normal;
text-transform: uppercase;
color: var(--txt-2);
}
/* O valor precisa ler bem: branco no neutro, lime no card da casa. */
.comp__valor {
display: flex;
align-items: center;
gap: 9px;
font-size: 0.9375rem;
font-weight: 500;
color: var(--txt);
line-height: 1.45;
}
.comp__valor .ico { width: 17px; height: 17px; flex: none; }
.comp__valor--sim .ico { color: var(--acento); }
.comp__valor--nao .ico { color: var(--sinal-erro); }
.comp__card--vencedor .comp__valor { color: var(--acento); font-weight: 600; }
.comp__pe { padding: var(--e-3); border-top: 1px solid var(--borda); }
.comp__card--vencedor .comp__pe { border-top-color: var(--acento-linha); }
/* ==========================================================================
Jornada da parceria
Seis etapas afastadas, com linha ligando uma na outra.
========================================================================== */
.jornada {
display: grid;
gap: var(--e-6);
grid-template-columns: 1fr;
position: relative;
}
@media (min-width: 700px) {
.jornada { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6) var(--e-8); }
}
@media (min-width: 1100px) {
.jornada { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.jornada__etapa {
position: relative;
display: grid;
gap: var(--e-2);
align-content: start;
min-width: 0;
}
/* A linha que liga uma etapa na próxima. Só no desktop, onde há linha. */
@media (min-width: 1100px) {
/* 54px = os 32 de padding do card mais metade do selo de 44. E o que
coloca a linha na altura do icone, e nao boiando acima dele. */
.jornada__etapa::after {
content: '';
position: absolute;
top: 54px;
left: calc(100% + 1px);
width: var(--e-8);
height: 1px;
background: linear-gradient(90deg, var(--borda-forte), transparent);
pointer-events: none;
}
/* Fim de linha não puxa para o vazio. */
.jornada__etapa:nth-child(3n)::after { display: none; }
/* A etapa 3 desce e liga na 4, que começa a segunda fileira. */
.jornada__etapa:nth-child(3)::before {
content: '';
position: absolute;
top: 54px;
right: -1px;
width: 1px;
height: calc(100% + var(--e-6) - 54px);
background: linear-gradient(180deg, var(--borda-forte), transparent);
pointer-events: none;
}
}
.jornada__topo {
display: grid;
gap: 12px;
justify-items: start;
}
.jornada__n {
font-family: var(--fonte-mono);
font-size: var(--t-mono);
letter-spacing: normal;
color: var(--txt-2);
}
.jornada__prazo {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
letter-spacing: normal;
text-transform: uppercase;
color: var(--acento);
}
.jornada__prazo .ico { width: 14px; height: 14px; }
.jornada__texto { font-size: 0.9375rem; line-height: 1.65; color: var(--txt-2); }
/* ==========================================================================
Universidade: o que entrega
========================================================================== */
/* Esta grade tem sempre QUATRO itens, e é isso que decide o número de
colunas. Quatro colunas dentro dos 70% de container davam 230px por card
e 166px de texto: parágrafo virava coluna de jornal. Três colunas
consertavam a largura mas deixavam o quarto card órfão numa fileira
sozinho. Duas colunas fecham 2x2 sem sobra, com 424px de texto por card.
Quatro só volta quando a tela é larga o bastante para o card não
estrangular de novo. */
.entregas {
display: grid;
gap: var(--e-2);
grid-template-columns: 1fr;
}
@media (min-width: 700px) {
.entregas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1800px) {
.entregas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.entrega {
display: grid;
gap: var(--e-2);
align-content: start;
justify-items: center;
text-align: center;
min-width: 0;
}
.entrega__titulo {
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--txt);
line-height: 1.3;
}
.entrega__texto { font-size: 0.875rem; line-height: 1.6; color: var(--txt-2); }
/* Faixa de gratuidade: o argumento que não pode passar batido. */
.gratis {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--e-2) var(--e-3);
padding: var(--e-3);
border: 1px solid var(--acento);
background: var(--lavagem-acento);
margin-bottom: var(--e-4);
}
.gratis .ico-selo { border-color: var(--acento); }
/* Sem flex:none aqui. Ele impedia o texto de encolher e estourava a
viewport em 320px. */
.gratis b {
font-size: 1.0625rem;
min-width: 0;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--acento);
}
/* 113ch de medida na faixa cheia. Trava em medida de leitura. */
.gratis span {
font-size: 0.9375rem;
color: var(--txt);
line-height: 1.55;
max-inline-size: 62ch;
}
/* ==========================================================================
Ecossistema: as duas soluções com mockup
========================================================================== */
.solucao {
display: grid;
gap: var(--e-4);
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 1000px) {
.solucao { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--e-8); }
.solucao--inversa .solucao__texto { order: 2; }
}
.solucao + .solucao { margin-top: var(--e-12); }
.solucao__texto { display: grid; gap: var(--e-2); align-content: start; min-width: 0; }
.solucao__texto .selo { justify-self: start; }
.solucao__visual { min-width: 0; }
.solucao__recursos {
display: grid;
gap: 10px;
margin-top: var(--e-1);
}
.solucao__recursos li {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 12px;
align-items: start;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--txt-2);
list-style: none;
}
.solucao__recursos .ico { width: 20px; height: 20px; color: var(--acento); margin-top: 1px; }
.solucao__recursos b { color: var(--txt); font-weight: 600; }
/* Verticais: onde o modelo se aplica. */
.verticais {
display: grid;
gap: var(--e-2);
grid-template-columns: 1fr;
margin-top: var(--e-8);
}
@media (min-width: 700px) {
.verticais { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vertical-item {
display: grid;
gap: 12px;
justify-items: center;
text-align: center;
}
.vertical-item b {
font-size: 0.9375rem;
font-weight: 600;
color: var(--txt);
display: block;
line-height: 1.3;
}
.vertical-item span {
display: block;
margin-top: 4px;
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
letter-spacing: normal;
text-transform: uppercase;
color: var(--txt-2);
}
/* ==========================================================================
Manifesto reorganizado
Duas colunas de troca, uma de cada lado, com o fecho embaixo.
========================================================================== */
.troca {
display: grid;
gap: var(--e-2);
grid-template-columns: 1fr;
}
@media (min-width: 800px) {
.troca { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.troca__lado {
display: grid;
gap: var(--e-3);
align-content: start;
min-width: 0;
}
.troca__rotulo {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
letter-spacing: normal;
text-transform: uppercase;
color: var(--txt-2);
}
.troca__lado--voce .troca__rotulo { color: var(--acento); }
.troca__itens { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.troca__itens li {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 12px;
align-items: baseline;
font-size: 1.0625rem;
font-weight: 500;
letter-spacing: -0.015em;
line-height: 1.4;
color: var(--txt);
}
.troca__itens .ico { width: 18px; height: 18px; color: var(--txt-2); }
.troca__lado--voce .troca__itens .ico { color: var(--acento); }
.manifesto__intro { display: grid; gap: var(--e-2); margin-bottom: var(--e-6); }
/* ==========================================================================
News: cards com capa
Sem imagem real ainda. A capa e gerada por eixo: composicao geometrica
com a grade da marca e o numero do eixo em mono. Le como design, nao como
imagem faltando. Quando houver arte, troca o bloco pela .
========================================================================== */
.posts {
display: grid;
gap: var(--e-3);
grid-template-columns: 1fr;
}
@media (min-width: 700px) {
.posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
.posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.post {
display: grid;
grid-template-rows: auto 1fr;
gap: 0;
padding: 0;
overflow: hidden;
min-width: 0;
}
.post__capa {
position: relative;
aspect-ratio: 16 / 9;
border-bottom: 1px solid var(--borda);
overflow: hidden;
background: var(--fundo);
display: grid;
place-items: center;
}
.post__capa::before {
/* Estas duas linhas NAO viram token de propósito: a capa e sempre um
degrade escuro, entao a grade sobre ela e sempre clara. */
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(237, 239, 236, .06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(237, 239, 236, .06) 1px, transparent 1px);
background-size: 28px 28px;
}
/* Um degrade por eixo, para os cards nao virarem todos iguais. */
.post__capa[data-eixo='1'] { background-image: linear-gradient(150deg, #0C1733, #1E3E74); }
.post__capa[data-eixo='2'] { background-image: linear-gradient(150deg, #141414, #25479D); }
.post__capa[data-eixo='3'] { background-image: linear-gradient(150deg, #0C1733, #435D04); }
.post__capa[data-eixo='4'] { background-image: linear-gradient(150deg, #1C1C1C, #1E3E74); }
.post__capa[data-eixo='5'] { background-image: linear-gradient(150deg, #0C1733, #1C1C1C); }
.post__capa[data-eixo='6'] { background-image: linear-gradient(150deg, #141414, #0C1733); }
.post__capa[data-eixo='7'] { background-image: linear-gradient(150deg, #1E3E74, #0C1733); }
.post__marca {
position: relative;
display: grid;
gap: 10px;
justify-items: center;
/* A capa e sempre um degrade escuro, mesmo com a pagina clara: le como
arte de capa, nao como bloco vazado. Por isso o texto aqui e claro
fixo, e nao --txt, que no tema claro seria quase preto e sumiria. */
color: var(--txt-azul);
}
.post__marca .ico { width: 30px; height: 30px; opacity: .9; }
.post__eixo-n {
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
letter-spacing: normal;
text-transform: uppercase;
color: var(--txt-azul);
}
.post__corpo {
display: grid;
gap: 10px;
align-content: start;
padding: var(--e-3);
}
.post__eixo {
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
letter-spacing: normal;
text-transform: uppercase;
color: var(--txt-2);
}
.post__eixo[data-classe='produto'] { color: var(--acento); }
.post__titulo {
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.35;
color: var(--txt);
}
.post__resumo {
font-size: 0.875rem;
line-height: 1.6;
color: var(--txt-2);
}
.post__pe {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--acento);
}
.post__pe .ico { width: 15px; height: 15px; transition: transform var(--dur-ui) var(--ease); }
@media (hover: hover) and (pointer: fine) {
.post:hover .post__pe .ico { transform: translate3d(3px, 0, 0); }
}
/* --- artigo: leitura mais sugeridos a direita ---------------------------- */
.leitura {
display: grid;
gap: var(--e-6);
grid-template-columns: 1fr;
align-items: start;
}
@media (min-width: 1100px) {
.leitura { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e-8); }
}
.leitura__aside { display: grid; gap: var(--e-3); align-content: start; min-width: 0; }
.sugerido {
display: grid;
gap: 8px;
padding: var(--e-3);
min-width: 0;
}
.sugerido__eixo {
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
letter-spacing: normal;
text-transform: uppercase;
color: var(--txt-2);
}
.sugerido__titulo {
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.4;
color: var(--txt);
}
/* Hero do artigo com metadados. */
.artigo__hero {
background: var(--grad-profundidade);
border-bottom: 1px solid var(--borda);
padding-block: var(--e-8);
}
@media (min-width: 768px) {
.artigo__hero { padding-block: var(--e-12); }
}
.artigo__hero .artigo__meta { color: var(--txt-azul); }
.artigo__hero .h2 { color: var(--txt); max-inline-size: 32ch; }
/* ==========================================================================
Painel de artigos, em /admin
Nao e parte do site publico. Reaproveita card, campo e botao.
========================================================================== */
.admin-entrar {
min-height: 100vh;
display: grid;
place-items: center;
padding: var(--e-4);
}
.admin-caixa {
width: 100%;
max-width: 420px;
display: grid;
gap: var(--e-3);
padding: var(--e-6);
border: 1px solid var(--borda);
background: var(--fundo-2);
}
.admin-marca { display: block; margin-bottom: var(--e-2); }
.admin-marca img { width: 148px; height: 33px; }
.admin-cabeca {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--e-3);
margin-bottom: var(--e-3);
}
.admin-tabela { display: grid; gap: var(--e-2); }
.admin-linha {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--e-3);
padding: var(--e-3);
}
.admin-linha__info { display: grid; gap: 5px; min-width: 0; flex: 1 1 320px; }
.admin-linha__eixo {
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
letter-spacing: normal;
text-transform: uppercase;
color: var(--txt-2);
}
.admin-linha__titulo {
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.4;
color: var(--txt);
}
.admin-linha__slug {
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
color: var(--txt-2);
word-break: break-all;
}
.admin-linha__acoes {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--e-2);
flex: none;
}
.admin-form { max-width: 860px; }
.admin-corpo {
font-family: var(--fonte-mono);
font-size: var(--t-mono);
line-height: 1.6;
min-height: 340px;
}
/* Pauta ainda sem texto escrito. Diferencia do artigo pronto sem esconder. */
.post__estado {
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
letter-spacing: normal;
text-transform: uppercase;
color: var(--sinal-aviso);
font-weight: 400;
}
.post__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- V-Agents: bloco largo da integração com ERP -------------------------
Card de largura inteira, metade texto e metade marcas. Ele saiu da grade
de funcionalidades porque a lista de ERPs integrados cresce com o tempo,
e uma fileira de marcas espremida em um terço de coluna não teria espaço
para respirar quando o segundo e o terceiro entrarem. */
.erp {
display: grid;
gap: var(--e-4);
align-items: center;
margin-top: var(--e-2);
padding: var(--e-4);
}
@media (min-width: 960px) {
.erp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.erp__texto { display: grid; gap: var(--e-2); align-content: start; }
.erp__marcas { display: grid; gap: var(--e-2); }
.erp__rotulo {
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--txt-2);
}
.erp__grade {
display: grid;
gap: var(--e-2);
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
/* Slot de marca. Tem altura fixa para que a fileira continue alinhada
quando entrar um logo de proporção diferente do primeiro. */
.erp__marca {
display: grid;
place-items: center;
min-height: 86px;
padding: var(--e-2) var(--e-3);
background: var(--placa-marca);
border: 1px solid var(--borda);
}
.erp__marca img { max-width: 100%; height: auto; object-fit: contain; }
/* Sem placa branca o nome perderia contraste, então quando não há arquivo
o slot volta a ser a superfície do bloco e o nome usa o acento. */
.erp__marca:not(:has(img)) { background: var(--fundo); }
/* Sem o arquivo da marca, o nome. Nunca um logo redesenhado por nós. */
.erp__nome {
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--acento);
}
/* --- V-Agents: card de canal, com os casos de uso -------------------------
`.grade-3` centraliza, e estes cards têm parágrafo mais lista. Por isso o
canal alinha à esquerda: centralizar item de lista quebra a leitura logo
no segundo marcador. Ver CLAUDE.md, item 6. */
/* `.card.canal` e não `.canal`: a regra que centraliza é `.grade-3 > .card`,
com duas classes, e um seletor de uma classe só perde dela por
especificidade, esteja onde estiver na folha. Com duas classes o empate
se resolve pela ordem, e secoes.css vem depois de componentes.css. */
.card.canal {
display: grid;
gap: 10px;
align-content: start;
justify-items: start;
text-align: left;
}
.card.canal .ico-selo { margin-bottom: 2px; }
.card.canal .lista-marcada { justify-self: stretch; }
.canal__rotulo {
margin-top: 6px;
font-family: var(--fonte-mono);
font-size: var(--t-mono-p);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--txt-2);
}
/* ===== efeitos.css ===== */
/* ==========================================================================
Efeitos
Carregamento, hover padronizado e a sombra que acompanha o mouse.
Regra do CLAUDE.md: todo card do site tem o MESMO comportamento de hover.
Só transform e opacity. Tudo desligado em prefers-reduced-motion, com o
estado final declarado à mão para nada desaparecer.
========================================================================== */
/* --- ícones -------------------------------------------------------------- */
.ico {
width: 22px;
height: 22px;
flex: none;
color: currentColor;
}
.ico--g { width: 28px; height: 28px; }
.ico--p { width: 18px; height: 18px; }
/* Selo de ícone: o quadrado com borda que envolve o ícone nas listas.
Agora redondo, para casar com a pílula do botão: a camada de AÇÃO e a
camada de MARCAÇÃO usam o mesmo raio. Estrutura continua em canto vivo. */
.ico-selo {
width: 44px;
height: 44px;
flex: none;
display: grid;
place-items: center;
border-radius: var(--raio-acao);
border: 1px solid var(--borda-media);
background: var(--fundo);
color: var(--acento);
transition: border-color var(--dur-ui) var(--ease),
transform var(--dur-ui) var(--ease);
}
/* ==========================================================================
Entrada por scroll: o efeito de carregamento
========================================================================== */
.entra {
animation: entrar var(--dur-entrada) var(--ease) both;
animation-timeline: view();
animation-range: entry 4% cover 26%;
}
@keyframes entrar {
from { opacity: 0; transform: translate3d(0, 20px, 0); }
to { opacity: 1; transform: none; }
}
/* Escalonado, para grade de card. O atraso vem da posição, sem JS. */
.entra-grade > * {
animation: entrar var(--dur-entrada) var(--ease) both;
animation-timeline: view();
}
.entra-grade > :nth-child(1) { animation-range: entry 3% cover 22%; }
.entra-grade > :nth-child(2) { animation-range: entry 6% cover 25%; }
.entra-grade > :nth-child(3) { animation-range: entry 9% cover 28%; }
.entra-grade > :nth-child(4) { animation-range: entry 12% cover 31%; }
.entra-grade > :nth-child(5) { animation-range: entry 15% cover 34%; }
.entra-grade > :nth-child(6) { animation-range: entry 18% cover 37%; }
.entra-grade > :nth-child(n+7) { animation-range: entry 21% cover 40%; }
/* Navegador sem timeline de scroll: IntersectionObserver em efeitos.js */
@supports not (animation-timeline: view()) {
.entra,
.entra-grade > * {
animation: none;
opacity: 0;
transform: translate3d(0, 20px, 0);
transition: opacity var(--dur-entrada) var(--ease),
transform var(--dur-entrada) var(--ease);
}
.entra.visivel,
.entra-grade > .visivel { opacity: 1; transform: none; }
}
/* --- barra que cresce ---------------------------------------------------- */
.barra-cresce {
transform-origin: 0 50%;
animation: crescerBarra 900ms var(--ease) both;
animation-timeline: view();
animation-range: entry 8% cover 34%;
}
@keyframes crescerBarra {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@supports not (animation-timeline: view()) {
.barra-cresce { animation: none; transform: scaleX(1); }
}
/* ==========================================================================
Hover padronizado de card
Quatro coisas juntas: borda, subida, zoom e sombra em volta.
========================================================================== */
.card,
.card-efeito {
transition: border-color var(--dur-ui) var(--ease),
transform var(--dur-ui) var(--ease),
box-shadow var(--dur-ui) var(--ease),
background-color var(--dur-ui) var(--ease);
will-change: auto;
}
@media (hover: hover) and (pointer: fine) {
.card:hover,
.card-efeito:hover {
border-color: var(--borda-forte);
transform: translate3d(0, -4px, 0) scale(1.015);
box-shadow: var(--elev-hover);
z-index: 1;
}
.card:hover .ico-selo,
.card-efeito:hover .ico-selo {
border-color: var(--acento);
transform: scale(1.06);
}
}
/* Card clicável inteiro: o foco precisa aparecer no card, não só no texto.
O display vai em :where() para ter especificidade ZERO: uma âncora nua
precisa virar bloco, mas .post e .sugerido já definem o próprio grid e
não podem ser sobrescritos por este atalho. Sem o :where(), a lista
"Leia também" perdia o grid e eixo e título colavam na mesma linha. */
:where(a.card, a.card-efeito) { display: block; }
a.card:focus-visible,
a.card-efeito:focus-visible {
outline: 2px solid var(--acento);
outline-offset: 3px;
}
/* ==========================================================================
Sombra que acompanha o mouse
Só em bloco de fundo azul, um por seção. Nunca no caminho da leitura.
========================================================================== */
.holofote { position: relative; isolation: isolate; }
.holofote::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 400ms var(--ease);
background: radial-gradient(
420px circle at var(--mx, 50%) var(--my, 50%),
var(--holofote),
transparent 68%
);
}
@media (hover: hover) and (pointer: fine) {
.holofote:hover::after { opacity: 1; }
}
@media (hover: none) {
.holofote::after { display: none; }
}
/* O conteúdo fica acima do holofote. */
.holofote > * { position: relative; z-index: 1; }
/* ==========================================================================
Grade quadriculada de fundo
Textura estrutural. Reforça a âncora de fundação, não decora.
========================================================================== */
.quadriculado { position: relative; isolation: isolate; }
.quadriculado::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
linear-gradient(to right, var(--linha-grade) 1px, transparent 1px),
linear-gradient(to bottom, var(--linha-grade) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
/* ==========================================================================
Número que conta
========================================================================== */
.conta { font-variant-numeric: tabular-nums; }
/* ==========================================================================
Redução de movimento
Desliga tudo, e declara cada estado final à mão.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.entra,
.entra-grade > * {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.barra-cresce { animation: none !important; transform: scaleX(1) !important; }
.card:hover,
.card-efeito:hover { transform: none !important; }
.holofote::after { display: none !important; }
}
/* ===== simulador.css ===== */
/* ==========================================================================
Simulador white label
Duas telas: a entrada, que é bloco invertido de ponta a ponta, e a
personalização, que é papel com os previews à direita.
A regra que organiza o arquivo inteiro: A MOLDURA É VÉRTICE, O CONTEÚDO
DO PREVIEW É DO PARCEIRO. Tudo que está fora de `.sim-palco` usa token do
site. Tudo que está dentro usa `--cor-parceiro` e `--cor-parceiro-2`, que
entram por `style` na própria tag e mudam ao vivo pelo JS.
Dentro do palco não entra token de cor da marca. Se entrar, a tela deixa
de ser a do parceiro e vira a nossa, que é justamente o que ele está aqui
para não ver.
========================================================================== */
/* --------------------------------------------------------------------------
Entrada
-------------------------------------------------------------------------- */
.sim-entrada {
min-height: 100dvh;
display: grid;
place-items: center;
padding: var(--e-6) var(--e-3);
background: var(--grad-profundidade);
}
.sim-entrada__caixa {
width: 100%;
max-width: 560px;
display: grid;
gap: var(--e-4);
}
.sim-entrada__marca { justify-self: start; }
.sim-entrada__marca img { display: block; height: 33px; width: auto; }
.sim-entrada__par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
/* Em tela estreita, dois campos lado a lado deixam o CNPJ sem espaço para a
máscara inteira. Cada par volta a empilhar. */
@media (max-width: 560px) {
.sim-entrada__par { grid-template-columns: 1fr; }
}
.sim-entrada__nota {
font-size: 0.8125rem;
line-height: 1.5;
color: var(--txt-2);
}
/* --------------------------------------------------------------------------
Personalização: moldura
-------------------------------------------------------------------------- */
.sim { min-height: 100dvh; background: var(--papel); }
.sim__topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-2);
padding: var(--e-2) var(--e-3);
border-bottom: 1px solid var(--borda);
background: var(--fundo-2);
position: sticky;
top: 0;
z-index: 10;
}
.sim__marca img { display: block; height: 29px; width: auto; }
.sim__salvo {
font-family: var(--mono);
font-size: 0.75rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--sinal-ok);
}
/* Tela cheia e 50/50, a pedido do cliente.
Esta é a única tela do projeto que não usa o container de 70% com teto de
1600px: ela é ferramenta de trabalho, não coluna de leitura. Metade para
os controles, metade para o preview, e o preview precisa da metade
inteira para o login web caber legível. Ver CLAUDE.md, seção 11.1. */
.sim__grade {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--e-4);
align-items: start;
padding: var(--e-4) var(--e-3);
}
.sim__controles { display: grid; gap: var(--e-3); }
.sim__bloco {
display: grid;
gap: var(--e-3);
padding: var(--e-3);
}
.sim__bloco-titulo {
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--acento);
}
.sim__dados { display: grid; gap: var(--e-1); }
/* Empresa e CNPJ numa linha, contato e telefone e e-mail na outra. `auto-fit`
e não coluna fixa: o e-mail é o campo que mais varia de tamanho, e com
largura fixa ele ou sobra ou é cortado. */
.sim__dados--linha {
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: var(--e-3);
}
.sim__dados--linha span { min-width: 0; }
.sim__dados--linha span > *,
.sim__dados--linha span { overflow-wrap: anywhere; }
/* Empilha cedo: três colunas de dado de contato não cabem em coluna de
metade de tela quando a tela é de notebook. */
@media (max-width: 1400px) {
.sim__dados--linha { grid-auto-flow: row; gap: var(--e-1); }
}
.sim__dados span {
display: grid;
gap: 2px;
font-size: 0.9375rem;
color: var(--txt);
}
.sim__dados i {
font-style: normal;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--txt-2);
}
.sim__aviso {
font-size: 0.8125rem;
line-height: 1.5;
color: var(--txt-2);
}
.sim__cores { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.sim__cor { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--e-1); }
/* 44px é o alvo de toque mínimo. O seletor nativo é pequeno por padrão. */
.sim__cor input[type='color'] {
width: 44px;
height: 44px;
padding: 3px;
border: 1px solid var(--borda-interativa);
border-radius: var(--raio-campo);
background: var(--fundo-2);
cursor: pointer;
}
/* --- imagens --- */
.sim__imagem { display: grid; gap: var(--e-1); }
.sim__imagem-ajuda { font-size: 0.8125rem; line-height: 1.5; color: var(--txt-2); }
.sim__imagem-linha {
display: flex;
align-items: center;
gap: var(--e-2);
flex-wrap: wrap;
margin-top: 4px;
}
/* `flex` e não `grid`: com grid, a linha implícita é dimensionada pelo
conteúdo e cresce além da altura fixa da caixa, então logo alta vazava
por baixo da borda e invadia o bloco seguinte. Em flex o `max-height` da
imagem resolve contra a altura definida do contêiner. O `overflow` é o
cinto de segurança para o caso de uma imagem que não respeite nem isso. */
.sim__quadro {
width: 128px;
height: 72px;
flex: none;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 6px;
border: 1px solid var(--borda);
background: var(--fundo-2);
}
/* A logo escura só se enxerga contra escuro. O quadro repete o fundo onde
ela vai ser usada, senão o parceiro sobe uma logo branca e vê um quadro
vazio, achando que o envio falhou. */
.sim__quadro[data-escuro='true'] { background: var(--azul-950); border-color: var(--azul-800); }
.sim__quadro img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.sim__quadro-vazio {
font-size: 0.75rem;
text-align: center;
color: var(--txt-3);
}
.sim__quadro[data-escuro='true'] .sim__quadro-vazio { color: var(--azul-300); }
/* O input de arquivo some e quem recebe o clique é o