/* ============================================================ LGPD de Todos - estilos da landing page Identidade oficial: Azul-marinho #0F3D5E (principal: texto, botoes, superficies escuras) Verde #16A34A (acento secundario) Base branca. Semaforo (verde/amarelo/vermelho) SO no score de risco. ============================================================ */ :root{ /* ============================================================ A PALETA · 22/09/2026 ------------------------------------------------------------ Levantamento: o projeto tinha 251 cores diferentes escritas no código e 35 tokens, e 594 usos escritos à mão repetiam o valor de um token que já existia. O Edu aprovou uma régua por família, com 30 cores, e o vermelho A (#D23B3B). As três cores do logotipo (#0F3D5E, #16A34A e #FFFFFF) são a base da régua, com o mesmo valor. Marca azul, azul-escuro, azul 5% (--azul-05), 12% (--azul-suave) e 35% (--azul-fio) Tinta --tinta (título e texto forte), 72% (texto corrido), 65% (texto de apoio, 5,02:1), 32%, 15%, 8% e 4% Estados verde, âmbar e vermelho, cada um com base, texto, fundo e fio Fundos --fundo-pagina, --fundo-destaque, --branco e o branco a 12%, 72% e 95% sobre o azul Sombra não é cor da paleta: é elevação, e fica com os degraus de véu do testes/tinta-unica.js. Máscara (#000 em mask-image) também não. Os nomes antigos (--preto, --tinta-90, --tinta-70, --tinta-55, --azul-forte, --verde-escuro, --risco-baixo, --amber, e no app --amarelo, --verde-esc, --t04 a --t90, --tinta-40) saíram no mesmo dia, depois que o site e o app passaram pela régua. O testes/paleta.js barra a volta deles. */ --tinta:#0a2540; /* título e texto forte (marinho bem escuro) */ --tinta-72:rgba(10,37,64,.72); /* texto corrido */ --branco:#ffffff; --branco-12:rgba(255,255,255,.12); /* fio e fundo sobre o azul */ --branco-72:rgba(255,255,255,.72); /* texto de apoio sobre o azul */ --branco-95:rgba(255,255,255,.95); /* texto sobre o azul */ /* Os ícones da pílula de situação (23/09/2026): visto, relógio, alerta, informação e seta, da família de ícones do produto. Entram como máscara, na cor da letra. */ --ico-ok:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPSczJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnPjxwYXRoIGQ9J001IDEyLjVsNC41IDQuNUwxOSA3LjUnLz48L3N2Zz4="); --ico-rel:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScyLjYnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOScvPjxwYXRoIGQ9J00xMiA3djVsMyAyJy8+PC9zdmc+"); --ico-al:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScyLjYnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOScvPjxwYXRoIGQ9J00xMiA4djUnLz48cGF0aCBkPSdNMTIgMTZ2LjAxJy8+PC9zdmc+"); --ico-inf:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScyLjYnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOScvPjxwYXRoIGQ9J00xMiAxMXY1Jy8+PHBhdGggZD0nTTEyIDh2LjAxJy8+PC9zdmc+"); --ico-seta:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScyLjgnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBhdGggZD0nTTUgMTJoMTQnLz48cGF0aCBkPSdNMTMgNmw2IDYtNiA2Jy8+PC9zdmc+"); /* O cinza do botao neutro. Medido em 04/09/2026 contra fundo branco: .65 da 5,02:1, acima do minimo 4,5:1 da WCAG AA, com folga. O piso real e .62 (4,54:1); abaixo disso a letra parada e o branco do hover reprovam os dois. Estava em .72 (6,29:1) e ficava pesado demais para um botao que existe justamente para nao chamar atencao. */ --tinta-65:rgba(10,37,64,.65); --tinta-32:rgba(10,37,64,.32); --tinta-15:rgba(10,37,64,.15); --tinta-08:rgba(10,37,64,.08); --tinta-04:rgba(10,37,64,.04); /* ============================================================ A SUPERFICIE DE PAGINA, e ela NAO e a tinta. · 08/09/2026 ------------------------------------------------------------ O Edu olhou a barra do topo e perguntou qual era o cinza mais claro do projeto. O levantamento achou SEIS cinzas claros entre rgb 243 e 250, e o mais usado de todos nao era variavel nenhuma: era este #f4f6f8, com 29 usos contra 20 do --tinta-04, e a UM ponto de RGB dele. A proposta natural era padronizar tudo no mais usado. Nao da, e o motivo e material, nao estetico: ELES SAO COISAS DIFERENTES. 1. Este hexadecimal nao e a nossa tinta em opacidade nenhuma. Para chegar nele seria preciso alfa .0449 no vermelho, .0413 no verde e .0366 no azul. Alfas diferentes por canal quer dizer hue diferente: e uma segunda cor base, um pouco mais azul. 2. Ele JA E o fundo de pagina dos assistentes (RoPA, RIPD, LIA, incidente, treino, formulario, consentimento, titular). Painel pintado da cor do fundo desaparece dentro dele: sobre este fundo, --tinta-04 por cima -> rgb(235,238,241), aparece sobre este fundo, #f4f6f8 por cima -> rgb(244,246,248), some Sobre BRANCO os dois quase se tocam, e e por isso que parecem redundantes. Sobre qualquer outra coisa eles se separam: veu adapta ao que esta embaixo, cor fixa nao. OS DOIS PAPEIS, que existiam de fato e nao estavam escritos em lugar nenhum: --fundo-pagina SUPERFICIE opaca. E o "papel" sobre o qual a tela se apoia: body, e a barra fixa que precisa tapar o conteudo rolando por baixo. --tinta-04 VEU transparente. Painel, faixa ou realce POR CIMA de alguma coisa. Quem escolhe entre os dois responde uma pergunta so: isto e o papel, ou esta em cima do papel? POR QUE 15 DAS 18 TELAS DO APP CONTINUAM COM O HEXADECIMAL NA MAO: elas nao carregam este arquivo, entao nao alcancam variavel nenhuma. A causa da bagunca nunca foi descuido de quem escreveu; e que o padrao nao chega onde o codigo esta. Enquanto isso nao mudar, o testes/superficie.js vigia o VALOR nelas, ja que nao da para vigiar o nome. ============================================================ */ --fundo-pagina:#f4f6f8; /* A TROCA DE COR, e ela e parte do padrao de botao. · 08/09/2026 ------------------------------------------------------------ O Edu olhou os "Editar" da tela de Dados da empresa e perguntou se eles nao deveriam ganhar a animacao de cor do nosso padrao. Deveriam, e o levantamento mostrou que o problema era maior que os dois: SO O .btn tinha transicao. Os seis botoes de classe propria que tem hover (.modal-x, .ob-ghost, .ob-pular, .gv-acao, .btn-voltar, .q-edit) trocavam de cor no susto. Em 07/09/2026 a segunda populacao de botoes entrou no padrao da PALETA, e ninguem olhou o MOVIMENTO. Cor e movimento sao a mesma promessa: um botao que muda de cor instantaneamente parece outro componente, mesmo pintado com as cores certas. .2s e o valor que o .btn ja usava desde sempre; aqui ele so ganhou nome para poder ser reusado e conferido. O transform do .btn fica de fora porque e o afundar do clique, e nem todo botao tem. */ --troca-cor:background .2s ease, color .2s ease, border-color .2s ease; /* Azul-marinho (principal) - nomes --azul* mantidos para o app.css */ --azul:#0F3D5E; --azul-05:rgba(15,61,94,.05); /* fundo sutil */ --azul-escuro:#0a2c44; --azul-suave:rgba(15,61,94,.12); /* O fio do botao neutro. Mesma familia do veu acima, so que com peso suficiente para o botao ter contorno. Escolhido em 07/09/2026 para tirar o CINZA de dentro dos botoes: letra cinza le como desativado, e o Edu apontou que o tom claro que ele reconhece como padrao do site e este azul rebaixado, e nao um cinza. */ --azul-fio:rgba(15,61,94,.35); /* azul 35%: era .32 aqui e .35 no app; a régua fica com .35 */ /* Verde (acento secundario) */ --verde:#16A34A; --verde-texto:#0f7a37; --verde-fundo:#E3F4E9; --verde-fio:#BFE3CB; --ambar:#E8A100; --ambar-texto:#7A5407; --ambar-fundo:#FCF1DA; --ambar-fio:#F0D9A8; --vermelho:#D23B3B; --vermelho-texto:#A32D2D; --vermelho-fundo:#FCEBEB; --vermelho-fio:#EFC3C3; --fundo-destaque:#EEF4F8; /* Semaforo - apenas no diagnostico de risco */ --radius:14px; --radius-sm:9px; --maxw:1120px; /* A MEDIDA DA PROSA, em caracteres e não em pixels. 640px dá cerca de 86 caracteres por linha no nosso corpo de texto. A régua tipográfica clássica é 45 a 75, e o critério 1.4.8 da WCAG (nível AAA) fixa o teto em 80. Se um dia a gente quiser bater o AAA, é aqui que muda, para 600px. Medido em 31/08/2026 renderizando o artigo em várias larguras e contando os caracteres das linhas cheias; a coluna de 712px que existia antes dava 94. */ --leitura:640px; /* ============================================================ A ESCALA DE ÍCONE · 21/09/2026 ------------------------------------------------------------ Regra do Edu, e ela veio de um problema medido: o produto tinha DEZ tamanhos de ícone, e oito deles espremidos entre 15 e 22px. Quinze, dezesseis, dezessete, dezoito, dezenove, vinte, vinte e um e vinte e dois. Nenhuma dessas diferenças foi decidida; são cópias que foram derivando, e ninguém acerta um valor desses de memória. Um tamanho literal só é impossível, porque ícone dentro de botão não pode ter a medida do ícone que abre uma tela. O que dá para ter é uma escala curta com nome de FUNÇÃO, igual à escala de texto logo acima: quem escreve um componente escolhe a função, não o número. Quatro degraus, o menor salto de 25%, para nenhum par ficar perto o bastante de se confundir de novo. O testes/escala-de-icone.js reprova qualquer largura de svg que não seja uma destas. */ --ic-botao:16px; /* dentro de botão, linha de meta, aba */ --ic-texto:20px; /* ao lado de uma linha, em nota, em caixa */ --ic-cartao:28px; /* cabeça de cartão, e dentro do medalhão de conclusão */ --ic-tela:72px; /* elemento grande de tela de estado */ /* ============================================================ O LADRILHO DO ÍCONE · 21/09/2026 ------------------------------------------------------------ Regra do Edu: tamanho diferente não incomoda, FORMA diferente para coisa igual incomoda. E o cartão era o caso mais gritante: o mesmo objeto, um cartão com ícone e título, tinha quatro formas. home (kit, pilar, risco) círculo de 38px, invisível até o hover home (planos) nada, o desenho solto índice do blog quadrado de 40px, raio 10 app e painel quadrado de 38 e de 34, raio 10 e 9, e QUATRO receitas de fundo para o mesmo cinza-azulado Agora é um: quadrado arredondado, raio `--radius-sm`, fundo `--azul-suave`. O raio não é novo: 9px já era o raio pequeno da casa, o mesmo do botão e do campo de formulário. Inventar um 10 aqui seria criar o quinto valor em vez de usar o que existe. DOIS TAMANHOS, pela densidade da tela. O desenho de dentro sai da escala de ícone, e a proporção é a mesma nos dois (53%), que é o que faz eles parecerem irmãos apesar da medida diferente. O CÍRCULO NÃO ACABOU: ele fica reservado à conclusão, verde, nas telas de "deu certo". Quando só existem duas formas, a rara passa a significar alguma coisa. */ --cx-cartao:38px; /* ladrilho de cartão, com --ic-texto dentro */ --cx-denso:30px; /* ladrilho de linha densa, com --ic-botao dentro */ /* O RAIO DO LADRILHO TEM NOME PRÓPRIO, e não é firula. Ele vale o mesmo que o --radius-sm daqui, 9px, mas o painel-operacao.html tem paleta própria e lá o --radius-sm é 10px: o mesmo nome com dois valores, achado na varredura de 21/09/2026. Se o ladrilho usasse --radius-sm, ele sairia com 9px no site e 10px no painel, que é exatamente a divergência que esta frente veio consertar. */ --cx-raio:9px; /* O MESMO LADRILHO, SOBRE O AZUL. Duas telas põem o ladrilho dentro de um bloco azul-marinho: a chamada do fim dos artigos e a das telas de estado. Ali o --azul-suave sumiria, porque ele é azul sobre azul. Branco a 12% é o mesmo gesto com o material invertido, e ganha nome para não virar um valor solto escrito na mão. */ --cx-fundo-azul:var(--branco-12); /* ============================================================ O MEDALHÃO DE CONCLUSÃO · 21/09/2026 ------------------------------------------------------------ O círculo reservado, logo acima, tinha três donos e nenhum dono: fim da aula 56px, desenho de 28, verde a 12% resultado do teste 64px, desenho de 32, #E3F4E9 e #FBEAE5 escritos na mão pedido recebido no portal 56px, e um caractere ✓ de 30px no lugar do nosso desenho Três telas da mesma frase, "deu certo", em três medidas. O caractere era o pior dos três: ele muda de forma conforme o sistema de quem lê, não tem o traço da casa, e essa tela é a que o cliente do nosso cliente vê. A CAIXA É 56px porque é o valor que já aparecia duas vezes, e porque o desenho fica em metade exata dela. O desenho é o --ic-cartao, que existia declarado e sem nenhum uso desde que os cartões passaram a usar o --ic-texto: ele era a "cabeça de cartão" e virou o medalhão. O ESTADO TROCA A COR, NUNCA A CAIXA, igual ao ladrilho do cartão. Os dois fundos saem da cor da marca a 12%, a mesma receita do --azul-suave, em vez de hex escrito à mão. O vermelho é o #D9573D da atenção, não um vermelho novo. */ --md-conclusao:56px; /* o círculo, com --ic-cartao dentro */ --md-fundo-ok:rgba(22,163,74,.12); --md-fundo-nao:rgba(210,59,59,.12); /* ============================================================ A ESCALA DA PÍLULA · 22/09/2026 ------------------------------------------------------------ A pílula já tinha padrão, decidido pelo Edu em 07/09/2026, com duas medidas e duas famílias. O que ela não tinha era ADOÇÃO: o teste vigiava seis pílulas, e a varredura de 22/09 achou 141 regras de pílula no produto, com TREZE espessuras diferentes. As outras 135 nunca vieram. O Edu olhou o back e disse de novo o que tinha dito em 07/09: está grossa. Da outra vez o caminho certo foi baixar a medida, e não abrir exceção. É o mesmo caminho aqui. A ALTURA AGORA É DECLARADA, e essa é a mudança de fundo. Antes ela saía da fonte com a entrelinha, e por isso duas pílulas com as MESMAS declarações saíam diferentes: no painel, uma etiqueta inline media 16px e a irmã em inline-flex media 20,3px, com a mesma fonte e o mesmo recheio. Com a altura escrita e a entrelinha em 1, as duas saem iguais. QUATRO DEGRAUS, DOIS PAPÉIS. Rótulo não se clica e pode ser fino; ação se clica e precisa de alvo. Dentro de cada papel, dois degraus pela densidade da tela, exatamente como o ladrilho do ícone tem 38 e 30. Os saltos são de 25%, 40% e 21%, acima do piso de 25% que a escala de ícone usa para degraus vizinhos não ficarem indistinguíveis. */ /* DOIS DEGRAUS, e não quatro. · Edu, 22/09/2026 A primeira versão desta escala tinha quatro. O Edu olhou e disse que ainda havia pílula grossa, e ao separar as causas ficou claro que a altura era a MENOR das três: o peso da letra e a cor cheia pesavam mais. Os degraus do meio caíram por não terem papel próprio, e sobrou o que de fato divide a pílula em duas coisas: se clica ou não se clica. A HIERARQUIA DA ABA PRINCIPAL não vem mais da altura, e está melhor: vem do preenchimento quando ativa e da posição na primeira linha. Hierarquia por tamanho é a mais frágil, porque só funciona quando as duas peças estão lado a lado. */ --pil-rotulo:16px; /* tudo que não se clica */ --pil-acao:28px; /* tudo que se clica; é também o piso do alvo de clique */ /* ============================================================ O NUMERADOR · 22/09/2026 ------------------------------------------------------------ Número dentro de cápsula: número de pergunta, de seção, de passo, e os contadores. Tem raio de pílula e NÃO é pílula: não é rótulo nem ação, é índice. Por isso tem régua própria, como o ladrilho e o medalhão. Dois tamanhos, pela hierarquia (Edu, 22/09/2026). No Diagnóstico há título e subtítulo: o numerador do título (seção, módulo, passo, fase) e os contadores têm 20px e são preenchidos; o do subtítulo (pergunta, item de checklist) tem 16px, a altura da pílula de rótulo, e é só contornado. A família inteira fica com três alturas: 16 e 20 que não se clicam, 28 que se clica. O de pergunta fica dentro da frase e sobe 1px para ficar no meio da letra maiúscula. Largura mínima igual à altura e número tabular: é o que faz um dígito e dois dígitos ocuparem o mesmo lugar. */ --numerador:20px; /* título: seção, módulo, passo, fase, e os contadores */ /* ============================================================ A ESCALA DO LOGOTIPO · 21/09/2026 ------------------------------------------------------------ Varredura de marca do projeto inteiro: o logotipo tinha NOVE alturas, e o pior era que a MESMA classe `.brand-logo` rendia valores diferentes conforme a folha que vencia -- 70px no site, 64px no cabeçalho do app, 44px no consent e no controles, que declaram a classe por conta própria. Quem escrevesse uma página nova usando a classe não tinha como saber o que ia sair. DOIS DEGRAUS, e não um. Um número só não serve porque as barras têm alturas diferentes: 70px transborda a barra de 62px do consent (109%) e 64px a preenche inteira. E igualar as barras também não dá: a do site tem 90px e esse número está preso no `--topo-site` do legal.css e no deslocamento de rolagem daqui. Mexer nela move a barra de título dos artigos junto. Então o logotipo é um só em toda barra, e a barra pequena é que cresce para caber, em vez de o logotipo encolher para servir à menor delas. O LOGOTIPO DOS POPUPS FICA FORA, e é exceção declarada, não esquecimento: o `.ui-marca` usa `clamp(20px,5.2vw,28px)`, e aquele valor foi MEDIDO contra os dezoito pares de rótulo do produto até 320px, para cumprir duas regras do Edu ao mesmo tempo -- logotipo e os dois botões sempre na mesma linha, e logotipo nunca cortado. Trocar por um número redondo quebra as duas. */ --logo-barra:64px; /* cabeçalho e rodapé, no site e no app */ --logo-tela:72px; /* tela centrada: login do app e telas de estado */ /* A LARGURA DA LISTA DE ARTIGOS, e ela é um meio-termo escolhido pelo Edu em 31/08/2026, contra a minha recomendação, que era duas colunas. A primeira tentativa levou a lista aos 1120px do cabeçalho e ele reprovou vendo na tela: o resumo passou a rodar em linhas de ~130 caracteres, a data e o "Ler o artigo" ficaram separados por quase 900px de vazio, e o card virou uma caixa larga e baixa. 860 é escolhido, e não redondo: fecha um terço do vão até o logo e deixa o resumo em cerca de 100 caracteres, contra 87 dos 760px antigos. Subir daqui volta a esticar; descer não resolve nada. Se um dia a lista voltar a incomodar, a saída boa não é mexer neste número, é quebrar em duas colunas. */ --lista:860px; } *{box-sizing:border-box} /* O CABEÇALHO É STICKY, ENTÃO A ÂNCORA PRECISA DE FOLGA · 20/09/2026 Sem o scroll-padding, o salto de âncora põe o topo da seção no topo da janela, e o cabeçalho de 91px fica por cima. Medido antes: o h2 parava em 84px em seis destinos (Como funciona, Documentos, Planos, Por que se adequar, Apoio e Perguntas frequentes), ou seja, a pessoa clicava no menu e chegava numa seção sem título visível. 108px = os 91 do cabeçalho mais 17 de respiro. */ html{scroll-behavior:smooth;scroll-padding-top:108px} /* Rolagem suave é movimento, e movimento incomoda quem pediu para não ter. O resto do arquivo já respeita esse pedido; a rolagem faltava. */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} } /* ============================================================ TIPOGRAFIA DECLARADA · 17/09/2026 ------------------------------------------------------------ UMA FAMÍLIA SÓ, a Manrope, servida do nosso domínio (assets/css/fontes.css explica as duas decisões: por que os arquivos são nossos e por que a família é única). A primeira versão desta rodada misturava serifada no título com sans no corpo. O Edu vetou a mistura, e a regra passou a ser esta: título e tabela mudam de TAMANHO e de PESO, nunca de família. Hierarquia por peso e por escala é mais difícil de errar e envelhece melhor do que hierarquia por contraste de família. O ITÁLICO: a Manrope não tem itálico desenhado, então sai inclinado por síntese do navegador. Onde o destaque precisa ser firme, o peso resolve melhor. A ESCALA. Até hoje cada tamanho era escolhido a olho, um por um, e o CSS acumulou dezenas deles. Daqui em diante todo tamanho novo sai desta régua, que cresce em passos reconhecíveis e não em números soltos. OS DÍGITOS. O produto é cheio de número (score, porcentagem, preço, prazo, data). Sem tabular-nums cada dígito tem largura própria, as colunas dançam ao atualizar e um score que vai de 71 para 16 muda de largura na tela. A régua abaixo liga os dígitos de largura fixa onde isso importa, e SÓ ali: em texto corrido a largura proporcional lê melhor. ============================================================ */ :root{ --fonte:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --t-12:12px; /* rótulo miúdo, etiqueta, nota de rodapé */ --t-13:13px; /* legenda, dica abaixo de campo */ --t-14:14px; /* texto secundário, tabela */ --t-15:15px; /* botão, texto de interface */ --t-17:17px; /* corpo de página */ --t-19:19px; /* linha de apoio do hero */ --t-24:24px; /* h3 */ --t-30:30px; /* h2 */ --t-38:38px; /* h1 interno */ --t-48:48px; /* h1 de página */ --t-62:62px; /* display do hero */ } /* Onde o número é dado, e não prosa. */ table, .num, .tabular, time, .doc-selo-n, .kpi-num, .score, .prop-cont, .mnum{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; } body{ margin:0; font-family:var(--fonte); color:var(--tinta); background:var(--branco); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3{line-height:1.2;color:var(--tinta);margin:0 0 .5em} p{margin:0 0 1em} a{color:var(--azul)} img{max-width:100%} /* ============================================================ O TRAÇO DO ÍCONE É MEDIDA DE TELA, E NÃO DO DESENHO · 21/09/2026 ------------------------------------------------------------ Todo ícone do produto é desenhado numa caixa de 24 e traçado com 1.8. Sem esta linha, o navegador entende esse 1.8 como unidade do DESENHO e multiplica junto com o tamanho: 15px na tela -> traço de 1,1px, fino demais 20px na tela -> traço de 1,5px 28px na tela -> traço de 2,1px 72px na tela -> traço de 5,4px, um borrão Ou seja, os ícones pequenos do produto eram mais finos que os grandes e ninguém tinha escolhido isso. Foi o que fez a primeira tentativa de ícone grande na tela de estado ficar feia, em 21/09/2026. `non-scaling-stroke` faz o traço ser lido em pixel de tela, então 1.8 sai 1,8 em qualquer degrau da escala. Um conjunto só de desenhos passa a servir de 16px a 72px sem engordar, e os 825 ícones que já existem continuam exatamente como estão: nenhum deles precisou ser tocado. */ svg *{vector-effect:non-scaling-stroke} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px} .narrow{max-width:760px} .center{text-align:center} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} /* ===== Botoes ===== */ /* O `text-decoration:none` faltava, e a falta aparecia em 16 lugares. Metade dos nossos botões é (leva para outra página), e o navegador sublinha por padrão. A regra `a{color:...}` lá em cima troca a cor e não desliga o sublinhado, então todo botão-link do site saía com a letra sublinhada dentro do retângulo, cara de link colado num botão, não de botão. O .btn-topo e o .btn-claro já desligavam isso cada um por conta, o que era o sintoma de que faltava aqui na raiz. */ .btn{ display:inline-block;border:1.5px solid transparent;border-radius:var(--radius-sm); padding:14px 24px;font-size:16px;font-weight:600;cursor:pointer; transition:transform .06s ease, var(--troca-cor); font-family:inherit;text-align:center;text-decoration:none; } .btn:hover{text-decoration:none} .btn:active{transform:translateY(1px)} /* ============================================================ O BOTÃO DO PROJETO INTEIRO · decisão do Edu, 04/09/2026 ------------------------------------------------------------ Um desenho só, no site e na área logada: fundo branco, letra e contorno coloridos, e ao passar o mouse ele se preenche com a própria cor. A COR NÃO DIZ QUAL BOTÃO É MAIS IMPORTANTE. Ela diz O QUE ACONTECE QUANDO A PESSOA CLICA. Essa é a regra inteira, e é ela que faz um botão novo não reabrir a discussão: .btn-primary / .btn-outline AZUL ação comum. É a maioria: avançar, visualizar, baixar, entrar. .btn-verde VERDE confirma e fecha alguma coisa: validar, concluir, publicar, salvar. .btn-neutro AZUL LEVE não muda nada: voltar, cancelar, fechar, sair. .btn-perigo VERMELHO não tem volta: excluir, apagar, revogar, descartar. NADA DE CINZA DENTRO DE BOTÃO. A primeira versão do neutro tinha letra cinza, e o Edu reprovou vendo na tela: letra cinza lê como DESATIVADO, e um botão que parece desligado custa clique. Ele também apontou que o tom claro que ele reconhece como padrão do site não é cinza coisa nenhuma: é o azul da marca a 12%, o mesmo das pílulas "RoPA gratuito" da home. Então o neutro ficou na mesma família do comum, distinguido pelo PESO: o comum tem contorno azul cheio e enche sólido; o neutro tem o fio a 32% e enche com o véu de 12%. Três pesos do mesmo azul, e nenhum cinza. POR QUE "ENTRAR" NÃO É VERDE: no produto, verde já quer dizer "aconteceu" (a etiqueta "Validado em", o Concluir, o Validar). Dar a ele um segundo sentido é o mesmo defeito de dois documentos com o mesmo código: quando um sinal significa duas coisas, ele não significa nenhuma. POR QUE "SAIR" NÃO É VERMELHO: sair não destrói nada, e a pessoa clica nele todo dia. Vermelho gasto na rotina não segura mais a mão de ninguém quando aparecer "excluir os dados do titular". Num produto de LGPD, esse vermelho precisa estar inteiro no dia em que for preciso. A ÚNICA EXCEÇÃO é .btn-cta, o botão de conversão da home. Ali a página tem um trabalho só, e o preenchido carrega esse peso. A exceção é nominal e vigiada pelo testes/botao-padrao.js: se alguém espalhar .btn-cta por aí, a bateria reprova. ============================================================ */ .btn-primary,.btn-outline{background:var(--branco);color:var(--azul);border-color:var(--azul)} .btn-primary:hover,.btn-outline:hover{background:var(--azul);color:var(--branco);border-color:var(--azul)} .btn-verde{background:var(--branco);color:var(--verde-texto);border-color:var(--verde)} .btn-verde:hover{background:var(--verde);color:var(--branco);border-color:var(--verde)} .btn-neutro{background:var(--branco);color:var(--tinta-65);border-color:var(--tinta-32)} .btn-neutro:hover{background:var(--tinta-65);color:var(--branco);border-color:var(--tinta-65)} .btn-perigo{background:var(--branco);color:var(--vermelho);border-color:var(--vermelho)} .btn-perigo:hover{background:var(--vermelho);color:var(--branco);border-color:var(--vermelho)} .btn-cta{background:var(--azul);color:var(--branco);border-color:var(--azul)} /* O hover do CTA e verde, e nao um azul mais escuro: e o unico lugar do projeto onde o verde nao quer dizer "aconteceu". Pode, porque o .btn-cta nao existe dentro do app (o testes/botao-padrao.js reprova se aparecer), entao ninguem aprende os dois sentidos ao mesmo tempo. Decisao do Edu em 04/09/2026: dar energia ao botao que traz cliente sem abrir um segundo sistema de cor. */ .btn-cta:hover{background:var(--verde);border-color:var(--verde);color:var(--branco)} .btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed} .btn-lg{padding:16px 30px;font-size:17px} .btn-sm{padding:10px 18px;font-size:14px} /* ===== Cabecalho ===== */ .site-header{position:sticky;top:0;z-index:50;background:var(--branco-95);backdrop-filter:blur(8px);border-bottom:1px solid var(--tinta-15)} .header-inner{display:flex;align-items:center;justify-content:space-between;height:90px} /* ===== Animacoes (discretas) ===== */ .site-header{transition:box-shadow .25s ease, background .25s ease} .site-header.scrolled{box-shadow:0 6px 20px rgba(10,37,64,.06);background:var(--branco-95)} .pilar,.kit-item,.risco-card,.step{transition:transform .18s ease, box-shadow .18s ease} .pilar:hover,.kit-item:hover,.risco-card:hover,.step:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(10,37,64,.12)} /* HOVER DOS CARTÕES DOS CARROSSÉIS · 18/09/2026 Escolha do Edu entre três: o sublinhado verde varre o título da esquerda para a direita e o texto escurece, em cima da subida de 4px e da sombra que os cartões já tinham. Nos cartões com ícone, o ícone acende: ganha um círculo azul e o traço vira branco. Só cores da paleta, nada novo. O sublinhado é um degradê no fundo do título que cresce de 0% a 100% de largura, e por isso o título do kit é inline (para a linha seguir o texto, inclusive quando quebra) e o título do pilar encolhe ao texto na grade. */ .kit-item h3,.pilar h3,.risco-card h3,.step h3{background-image:linear-gradient(var(--verde),var(--verde));background-repeat:no-repeat;background-size:0% 2px;background-position:0 100%;padding-bottom:2px;transition:background-size .28s ease} .kit-item:hover h3,.pilar:hover h3,.risco-card:hover h3,.step:hover h3{background-size:100% 2px} .kit-item p,.pilar p,.risco-card p,.step p{transition:color .2s ease} .kit-item:hover p,.pilar:hover p,.risco-card:hover p,.step:hover p{color:var(--tinta)} /* O CÍRCULO DO ÍCONE · medido em 18/09/2026 Duas correções, as duas medidas no navegador antes e depois: 1. align-items faltava. Com justify-content sozinho o desenho centralizava só na horizontal e ficava COLADO NO TOPO do círculo: 28px de desenho num círculo de 38px, 10px de sobra toda embaixo. Era o "torto" de todos. 2. flex:none. O círculo é item de grade aqui, mas basta alguém mudar o arranjo para ele virar item de flex e encolher: 38px é 38px. A terceira correção não é CSS: alguns desenhos nasciam fora do centro do próprio viewBox. Ver o comentário dos ícones no index.html. */ .pilar-ic,.kit-ic,.risco-ic{width:var(--cx-cartao);height:var(--cx-cartao);flex:none;border-radius:var(--cx-raio);background:var(--azul-suave);display:inline-flex;align-items:center;justify-content:center;line-height:0;transition:background .2s ease} .pilar-ic svg,.kit-ic svg,.risco-ic svg{transition:stroke .2s ease} .pilar:hover .pilar-ic,.kit-item:hover .kit-ic,.risco-card:hover .risco-ic{background:var(--azul)} .pilar:hover .pilar-ic svg,.kit-item:hover .kit-ic svg,.risco-card:hover .risco-ic svg{stroke:var(--branco)} /* O MESMO EFEITO NAS QUATRO FAMÍLIAS DE CARTÃO · 18/09/2026 Pedido do Edu: "esses cards poderiam ganhar o mesmo efeito, né?". Ganharam: .pilar, .kit-item, .risco-card e .step animam igual. Duas famílias de cartão animando diferente na mesma página é a mesma coisa que duas larguras de carrossel: lê como dois sistemas, que é o incômodo que abriu esta reforma. O .step-num não acende porque já é um círculo azul cheio, com o número dentro: acender o que já está aceso não é efeito, é ruído. */ /* Durante o arrasto do carrossel nenhum cartão reage ao mouse: com os cartões passando debaixo da mão, o hover viraria um pisca-pisca. */ .car-trilho.arrastando > *{pointer-events:none} @media (prefers-reduced-motion: reduce){ .kit-item h3,.pilar h3,.risco-card h3,.step h3,.kit-item p,.pilar p,.risco-card p,.step p,.pilar-ic,.pilar-ic svg,.kit-ic,.kit-ic svg,.risco-ic,.risco-ic svg,.hero-tira .container a > span{transition:none} } .plan{transition:box-shadow .18s ease, transform .18s ease} .plan:hover{box-shadow:0 16px 34px rgba(10,37,64,.12)} /* O card em destaque ja nasce com sombra (14px / .14), quase igual a do hover (16px / .13). Enquanto o destaque era do Plus ninguem notava, porque o mouse ia parar no Gratuito, que nao tinha sombra em repouso. Com o destaque no Gratuito, o hover dele passou a nao mudar nada visivel, e parecia que a animacao tinha sumido. Aqui ele ganha uma reacao propria: sombra mais funda e mais 4px de elevacao sobre os 8px que ja tem. */ .plan-featured:hover{box-shadow:0 22px 48px rgba(10,37,64,.22);transform:translateY(-12px)} @media (prefers-reduced-motion: reduce){ .plan{transition:none} .plan-featured:hover{transform:translateY(-8px)} } @media (prefers-reduced-motion: no-preference){ .anim-hide{opacity:0;transform:translateY(20px);transition:opacity .55s ease, transform .55s ease} .anim-hide.anim-in{opacity:1;transform:none} } /* Grupo da esquerda da barra do topo: logo e, colado nele, o Voltar. Mesmo arranjo do .topo-esq das telas do app, para o site e o produto não terem dois padrões de navegação. Ver assets/js/voltar.js. */ .header-esq{display:flex;align-items:center;gap:16px} /* PESO NEUTRO, porque este botão é o "Voltar" da barra do topo, e voltar não muda nada. Ele tinha DOIS defeitos que a cópia do app não tinha, e é por isso que a mesma classe se comportava diferente nos dois lados: - fio CINZA (--tinta-15), banido dos botões em 07/09/2026; - hover com #f4f6f8, que é a cor de FUNDO DE PÁGINA, não um véu de hover. Agora é o fio a 32% e o véu de 12%, como todo neutro do projeto. */ .btn-topo{font-family:inherit;font-size:13px;font-weight:700;color:var(--tinta-65);background:var(--branco); border:1.5px solid var(--tinta-32);border-radius:8px;padding:6px 12px;cursor:pointer; white-space:nowrap;text-decoration:none;display:inline-block;transition:var(--troca-cor)} .btn-topo:hover{background:var(--tinta-65);color:var(--branco);border-color:var(--tinta-65);text-decoration:none} /* E o que CRIA alguma coisa ("Novo registro", "Nova avaliação") é ação comum: fio cheio e enche sólido. Mesma classe, papéis diferentes, declarados. */ .btn-topo.btn-novo{color:var(--azul);border-color:var(--azul)} .btn-topo.btn-novo:hover{background:var(--azul);color:var(--branco);border-color:var(--azul)} .btn-topo[hidden]{display:none} .brand{display:flex;align-items:center;gap:8px} .brand-logo{height:var(--logo-barra);width:auto;display:block} .nav{display:flex;align-items:center;gap:26px} /* white-space:nowrap: item de menu não pode quebrar em duas linhas. Se quebrar, o cabeçalho cresce de altura e todo o resto da página desce junto, e com "Diário de conformidade" no meio isso passou a ser possível. Quando não couber, quem resolve é o rótulo curto do .nav-mini, e não a quebra de linha. */ /* SEM SUBLINHADO PARADO (01/09/2026) O navegador sublinha por padrão e o site não desliga isso em lugar nenhum: `a{color:var(--azul)}` lá em cima só troca a cor. Numa barra de navegação isso é ruído, porque a posição já diz que o item é clicável, e era o que fazia a barra animada do :after virar uma segunda linha embaixo de outra. NÃO subir esta regra para o `a` global: na prosa dos artigos o sublinhado é acessibilidade, porque cor sozinha não distingue link para quem não enxerga bem cor. Aqui some, lá fica. */ /* A cor do menu NAO pode encostar em botao. ".nav a" e (0,1,1) e ".nav a:hover" e (0,2,1); os dois vencem ".btn-primary" (0,1,0) e ".btn-primary:hover" (0,2,0). Resultado em 04/09/2026: o "Entrar" do topo virou um retangulo azul com a letra azul por cima, ilegivel, porque o fundo vinha do botao e a cor vinha do menu. A saida nao e escrever um seletor ainda mais forte, e sim tirar o menu da disputa: quem pinta botao e a classe do botao. */ .nav a{font-weight:500;font-size:15px;white-space:nowrap;text-decoration:none} .nav a:not(.btn){color:var(--tinta-72)} .nav a:not(.btn):hover{color:var(--azul)} /* RÓTULO QUE ENCOLHE (.nav-full / .nav-mini) "Diário de conformidade" tem 22 caracteres e, somado ao resto, exige uns 780px só de cabeçalho. Os links do menu só somem abaixo de 560px, então entre 560 e 780 o menu estouraria. Em vez de esconder o item, ou de subir o ponto em que o menu inteiro desaparece (o que tiraria a navegação do tablet), o rótulo encolhe para "Diário". Perde clareza para quem chega frio, e é o preço mais barato dos três. */ .nav-mini{display:none} @media (max-width:900px){ .nav-full{display:none} .nav-mini{display:inline} } .nav a:not(.btn){position:relative} .nav a:not(.btn):after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--azul);transform:scaleX(0);transform-origin:left;transition:transform .22s ease} .nav a:not(.btn):hover:after{transform:scaleX(1)} /* A nav pintava o texto de branco porque o botao era azul cheio. Com o botao branco por baixo, isso deixaria letra branca em fundo branco. */ .nav a.btn{transition:background .18s ease, color .18s ease, border-color .18s ease} .nav a.btn-cta{color:var(--branco)} /* ===== Hero ===== */ .hero{padding:60px 0 0;background:var(--branco);border-bottom:1px solid var(--tinta-08)} /* A grade não é mais 50/50 nem centrada no eixo vertical: o texto manda, o documento encosta na base e sangra para a direita. Simetria com card flutuante é a assinatura do template. */ /* O vão entre as duas colunas cresceu de 40 para 56px quando o texto passou a ocupar a coluna inteira: com 40 a última linha do parágrafo encostava na folha de trás do documento, que é inclinada e avança para a esquerda. */ .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:56px;align-items:end} .hero-copy{padding-bottom:56px} /* ============================================================ A PÍLULA · decisão do Edu, 07/09/2026 ------------------------------------------------------------ Ele viu na home que as pílulas não batiam com as de dentro do site, e o inventário deu pior: SETE formatos, seis tamanhos de letra, sete recheios e duas espessuras de borda. Nenhuma dessas diferenças foi decidida; elas foram aparecendo, uma por vez, em cada tela nova. DUAS MEDIDAS, e não uma. Um marcador dentro de um card e a etiqueta do topo da home têm hierarquias diferentes de propósito, e achatar as duas num tamanho só resolveria a planilha e estragaria a página: .pil-p 11px, recheio 2/8, peso 600 marcador, selo de artigo .pil 12px, recheio 4/10, peso 600 etiqueta e aba A medida desceu mais um degrau em 07/09/2026, com o Edu olhando na tela: a da Central ainda estava grossa para ele. Desceu tambem o PESO da letra, de 700 para 600, que e o que mais engorda uma pilula pequena, e ninguem olha primeiro. E A MEDIDA VEM DE DENTRO, nao da home. Na primeira tentativa eu fiz o contrario: puxei as nove pilulas para a medida da home, que e a mais gorda. O Edu corrigiu, e ele tinha razao duas vezes. Primeiro porque a medida de dentro ja estava DECIDIDA, e escrita: o testes/categoria.js diz desde 01/09/2026 que a pilula da Central e a referencia e que a do blog tem que ter o tamanho da de la. Segundo porque eu li exatamente esse teste naquele dia, quando ele reprovou, e mesmo assim empurrei todo mundo para o outro lado. A borda tambem volta a 1px. Sete pilulas tinham 1px e uma tinha 1,5px, e eu engrossei as sete em vez de afinar a uma. Pilula e peca pequena: fio de 1px e o certo, e o 1,5px fica para o botao, que e maior. DUAS FAMÍLIAS, e essa é a parte que importa mais que os números. Cinco dessas pílulas são ETIQUETA e duas são BOTÃO (as abas do blog e o "ver todos" da busca vazia). Hoje as sete têm a mesma cara, e a pessoa não sabe onde pode clicar. A que clica passa a usar o fio e o véu do botão neutro, os mesmos do padrão de botão, então ela se anuncia. Borda sempre 1,5px, como o botão. E nada de cinza: as duas clicáveis tinham letra --tinta-70 e fio --tinta-15, que é justamente o que saiu dos botões hoje de manhã. A EXCEÇÃO é a .plan-tag, o selo "Gratuito" que fica montado na borda do card de preço. Ela não é uma etiqueta entre várias, é o rótulo do card, e preenchida ela carrega esse peso. Exceção escrita e vigiada pelo testes/pilula-padrao.js. ============================================================ */ /* A .pil-p SAIU EM 22/09/2026. Ela era a medida pequena de uma escala que tinha duas para rótulo; com um degrau só de rótulo, ela e a .pil passaram a dizer a mesma coisa, e duas classes para a mesma medida é como o projeto volta a ter sete formatos. Nenhuma marcação usava as duas: elas existem para SER o padrão que as outras seguem. */ .pil{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap; font-weight:600;border-radius:999px;height:var(--pil-rotulo);font-size:10px;padding:0 8px; border:1px solid var(--azul);color:var(--azul);background:transparent;line-height:1} /* A que clica: fio rebaixado e véu no hover, igual ao botão neutro. */ .pil-bt{height:var(--pil-acao);font-size:12px;padding:0 13px; cursor:pointer;font-family:inherit;background:var(--branco); border-color:var(--azul-fio);transition:background .15s ease,border-color .15s ease} .pil-bt:hover{background:var(--azul-suave);border-color:var(--azul)} .pil-bt.ativa{background:var(--azul);color:var(--branco);border-color:var(--azul)} /* A ENTRELINHA DA PILULA E 1,2, E ELA ESTA ESCRITA EM TODAS. Oito das nove pilulas nao declaravam line-height e herdavam o 1,6 do body, que e a medida de PARAGRAFO. Numa peca de 13px isso sao 7,8px de vazio que ninguem escolheu, mais que os 8px de recheio que eu ajustava de 1 em 1 pixel. A altura da pilula deixou de ser digitada: ela sai da fonte. */ .eyebrow{display:block;font-size:var(--t-13);line-height:1.2;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-65);margin:0 0 12px;padding:0;border:0;border-radius:0} /* A marca abre o h1 como rótulo pequeno: o buscador lê o nome (é o que testes/marca-na-busca.js cobra) sem que ele dispute tamanho com a frase. */ .h1-marca{display:block;font-family:var(--fonte);font-size:var(--t-13);line-height:1.2;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--verde-texto);margin-bottom:14px} .hero h1{font-size:var(--t-62);font-weight:800;line-height:1.02;letter-spacing:-.03em;margin:0 0 20px} .hero h1 em{font-style:italic;color:var(--verde-texto)} /* Mesma regra da abertura de seção: o texto acompanha a largura da coluna em vez de parar antes dela. Aqui a coluna já é estreita (o documento ocupa a outra metade), então o conforto de leitura vem da própria grade. */ .hero .lead{font-size:var(--t-19);max-width:none;margin-bottom:24px} .hero .cta-form{max-width:none;gap:18px;flex-wrap:wrap;margin:0} .hero .form-hint{max-width:17em;line-height:1.45} .lead{font-size:19px;color:var(--tinta-72);max-width:36em} .cta-form{display:flex;gap:10px;margin:18px 0 8px;max-width:480px;align-items:center} .cta-form input{flex:1;min-width:0;padding:14px 16px;border:1.5px solid var(--tinta-15);border-radius:var(--radius-sm);font-size:16px;font-family:inherit;color:var(--tinta)} .cta-form input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-suave)} .cta-form-center{margin-left:auto;margin-right:auto;justify-content:center} /* O CONTRASTE DA FRASE DE APOIO · 20/09/2026 Estava em .55, que da 3,68:1 e reprova no minimo 4,5:1 da WCAG AA. A nota do topo deste arquivo ja dizia que .65 e o degrau mais claro que passa (5,02:1) e que o piso real e .62. A frase "Sem compromisso. O acesso chega por link no seu e-mail comercial" fica logo abaixo do botao principal e e justamente a que tira o receio de quem vai clicar: era a menos legivel da pagina. Mesma tinta, nenhum token novo, paleta intacta. As variantes .success e .error tem cor propria e nao mudam. */ .form-hint{font-size:13.5px;color:var(--tinta-65);margin:0} .form-hint.success{color:var(--verde-texto);font-weight:700} .form-hint.error{color:var(--vermelho);font-weight:700} /* ============================================================ O DOCUMENTO NO HERO (17/09/2026) Substitui o cartão de risco com medidor circular e checklist verde, que era o elemento mais genérico da página. Aqui a direita mostra um recorte do RoPA que o motor gera, com as colunas de app/ropa.html e um exemplo preenchido, marcado como exemplo na própria folha. ============================================================ */ /* OS DOIS PAPÉIS E O REVEZAMENTO · 17/09/2026 Mesma caixa para os dois: quem define quem está na frente é a CLASSE DE POSIÇÃO, não o tamanho do elemento. Assim o JS troca as classes e o CSS anima a troca inteira, sem redesenhar nada. O papel também subiu: antes ele terminava rente à tira do rodapé do hero e passava por trás de "Evidências guardadas para auditoria". Agora para 30px acima dela. transform-origin no canto de baixo à direita: a folha de trás encolhe em direção a esse canto, então ela nunca avança para a esquerda e nunca encosta no texto da outra coluna. O "bottom" das duas posições é diferente de propósito: a folha de trás é inclinada, e girar 4 graus faz o canto de baixo à esquerda descer 23px (medido). Sem essa compensação ela voltaria a passar por trás da tira. */ .hero-doc{position:relative;height:470px} .papel{position:absolute;width:410px;height:412px;background:var(--branco);border:1px solid var(--tinta-08);border-top-left-radius:8px;border-top-right-radius:8px;padding:20px 22px;display:flex;flex-direction:column;transform-origin:right bottom; transition:right .8s cubic-bezier(.4,0,.2,1), bottom .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1), opacity .8s ease, box-shadow .8s ease} /* AS DUAS POSIÇÕES DA FOLHA · medidas em 18/09/2026 A folha da frente terminava 34px depois da régua da direita da página (1290 contra 1256 em 1440), porque tinha right:-34px. Com right:0 ela encosta exatamente na régua, como todo o resto da página. A de trás NÃO andou junto. Andar os 34px levaria a ponta dela a 763px, e a linha mais longa do texto do hero termina em 753: dez pixels de folga entre a folha inclinada e o texto é o encontro que já consertei uma vez (foi por isso que o vão da grade virou 56px). Ela fica onde está, e o que muda é a sobra dela à esquerda da outra, de 83px para 49px. As duas subiram 24px (30 para 54, 44 para 68). O par continua com a mesma diferença de 14px entre elas, que é o que compensa a queda do canto inferior esquerdo na rotação de -4°. Sobra de 54px até a tira. */ .papel.pos-frente{right:0;bottom:54px;transform:rotate(0deg) scale(1);opacity:1;z-index:2;box-shadow:0 18px 44px rgba(10,37,64,.15)} .papel.pos-tras{right:100px;bottom:68px;transform:rotate(-4deg) scale(.82);opacity:.55;z-index:1;box-shadow:0 10px 26px rgba(10,37,64,.12)} @media (prefers-reduced-motion: reduce){ .papel{transition:none} } .papel-cod{font-size:10.5px;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-65);font-weight:700} .papel-tit{display:block;font-size:15.5px;line-height:1.25;font-weight:700;color:var(--tinta);margin-top:3px} .papel-emp{display:block;font-size:11.5px;color:var(--tinta-65);margin-top:3px} .papel-ex{display:inline-block;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--tinta-65);border:1px solid var(--tinta-15);border-radius:4px;padding:1px 5px;margin-left:4px;vertical-align:1px} /* O corpo do segundo documento é texto de verdade, porque ele vem para a frente no revezamento e precisa aguentar ser lido. */ .papel-texto{font-size:10.5px;line-height:1.5;color:var(--tinta-72);margin-top:2px} .papel-texto b{display:block;color:var(--tinta);font-size:10.5px;margin-top:9px} .papel-texto b:first-child{margin-top:0} .papel-texto p{margin:2px 0 0} .doc-selo-neutro{border-color:var(--tinta-15);background:var(--tinta-04)} .doc-selo-neutro .doc-selo-r,.doc-selo-neutro .doc-selo-n{color:var(--tinta-72)} .papel-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px solid var(--tinta-08);padding-bottom:10px;margin-bottom:10px} .doc-selo{flex:none;text-align:center;border:1px solid var(--verde-fio);background:var(--verde-fundo);border-radius:7px;padding:5px 9px} .doc-selo-r{display:block;font-size:9px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--verde-texto)} .doc-selo-n{display:block;font-size:15px;font-weight:800;color:var(--verde-texto);font-variant-numeric:tabular-nums} .doc-selo-n s{color:var(--tinta-32);font-weight:600;margin-right:5px} .papel-tab{width:100%;border-collapse:collapse;font-size:10.5px;font-variant-numeric:tabular-nums} .papel-tab th{text-align:left;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-65);font-weight:700;border-bottom:1px solid var(--tinta-15);padding:0 6px 5px 0} .papel-tab td{padding:5.5px 6px 5.5px 0;border-bottom:1px solid var(--tinta-04);color:var(--tinta)} .papel-rot{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--tinta-65);margin-top:14px} .papel-barra{display:block;height:5px;border-radius:3px;background:var(--tinta-08);margin-top:5px} .papel-barra i{display:block;height:5px;border-radius:3px;background:var(--verde);width:84%} .papel-nota{display:block;font-size:10.5px;color:var(--tinta-65);margin-top:5px} .papel-pe{display:flex;justify-content:space-between;font-size:9.5px;color:var(--tinta-32);border-top:1px solid var(--tinta-04);padding-top:8px;margin-top:auto} /* A tira fecha o hero com o que antes eram chips soltos no meio do texto. */ /* A tira fica ACIMA do papel na pilha: o documento desliza para trás dela em vez de cobrir "Evidências guardadas para auditoria". Sem isto o papel, que encosta na base da grade, passa por cima do texto da tira. */ /* A FAIXA É BRANCA, PORQUE ELA É O HERO · 22/09/2026 Ela nasceu com `var(--superficie)`, um token que nunca existiu, e por isso ficava transparente, mostrando o branco do hero atrás. Em 20/09 isso foi corrigido para `--fundo-pagina`, que é o cinza do papel da página, e a faixa passou a ser o único pedaço cinza DENTRO de um bloco branco. O Edu apontou: "isso faz parte do primeiro bloco, o fundo deveria estar branco, não cinza". A correção de 20/09 acertou o que precisava (a faixa tem que ser OPACA, senão o documento do hero, que sangra para a direita, aparece por baixo dela) e errou a cor. Agora ela é opaca e branca, que é o fundo do bloco em que ela vive. O fio de cima fica: ele separa a faixa do conteúdo do hero sem quebrar o bloco, que é o papel dele. A LIÇÃO, que virou regra no testes/ritmo-do-fecho.js: a alternância de fundo da home é por BLOCO, e bloco inclui o que mora dentro dele. A conferência de vizinhança só olhava as seções, e por isso não viu esta faixa por dois dias. */ .hero-tira{position:relative;z-index:3;background:var(--branco);border-top:1px solid var(--tinta-08)} .hero-tira .container{display:flex;flex-wrap:wrap;gap:8px 34px;padding-top:14px;padding-bottom:14px;font-size:var(--t-14);color:var(--tinta-72)} /* A FAIXA VIROU NAVEGAÇÃO · 22/09/2026 O Edu perguntou se dava para animar as frases no hover. As cinco eram que não levavam a lugar nenhum, e hover em texto que não clica promete e não entrega. Elas viraram links para as seções que entregam cada coisa, e aí o hover passa a significar alguma coisa. O GESTO É UMA CAIXA, e não o sublinhado verde dos títulos dos cards: eu propus o sublinhado, por ser o que a casa já tinha, e o Edu recusou ("não gosto desse formato, tá muito manjado, pensei numa caixa retangular em volta do texto"). Fica a caixa, no azul suave e no raio de 9px dos botões, que são tokens da casa: o gesto é novo, a matéria-prima não. A CAIXA PINTA O MIOLO DO LINK, E NÃO O LINK INTEIRO. O traço que separa dois itens é um `::before` do PRÓPRIO link, ou seja, um filho dele: pintar o fundo do link engolia o traço, que aparecia dentro do retângulo em vez de separar duas coisas. Com o miolo num , o traço fica de fora. O ESPAÇO DA CAIXA É RESERVADO DESDE SEMPRE, e a margem negativa o devolve ao layout. Sem isso o padding nasceria no hover e empurraria a frase e as vizinhas: a faixa inteira tremeria ao passar o mouse. Medido: as cinco frases ficam no mesmo pixel com e sem o hover. O LINK NÃO MUDA A TIPOGRAFIA: herda a cor da faixa e não ganha sublinhado de navegador, senão a faixa deixaria de ser uma frase e viraria uma fila de links azuis, que é outra coisa. */ .hero-tira .container a{color:inherit;text-decoration:none} .hero-tira .container a > span{display:inline-block; padding:6px 10px;margin:-6px -10px; border-radius:var(--radius-sm); transition:background-color .18s ease} .hero-tira .container a:hover > span, .hero-tira .container a:focus-visible > span{background-color:var(--azul-suave)} .hero-tira .container a:focus-visible{outline:none} .hero-tira .container a:focus-visible > span{outline:2px solid var(--azul);outline-offset:2px} /* A TIRA OCUPA A LARGURA INTEIRA · 18/09/2026 Ela nascia encostada à esquerda e sobravam 43px de branco na direita, que o Edu não queria ver. Com space-between os cinco itens se distribuem de ponta a ponta: o primeiro começa na régua da esquerda e o último termina na da direita, com os quatro vãos iguais (34px viram 44,75px em 1440). SÓ ACIMA DE 1080px, e a medida é o motivo: a tira quebra em duas linhas a partir de 1077px de janela. Justificada, uma linha quebrada de dois itens jogaria um em cada ponta da página, com um buraco no meio. Abaixo do limite ela volta a ser encostada à esquerda, com o vão fixo de 34px, que é como ela sempre foi. Mexeu no texto de um item? Meça de novo. */ @media (min-width:1080px){ /* A BARRINHA ENTRE OS ITENS · 18/09/2026 Cada item é "termo em negrito mais texto claro", e só com espaço o olho às vezes junta o fim de um com o começo do outro. A barrinha separa, e é o mesmo fio das linhas do rodapé e das tabelas (o degrau .15 da escala de tinta: inventar um .20 no canto reprova em testes/tinta-unica.js). O VÃO NÃO CRESCEU, e é isso que a faz caber: aqui o column-gap vai a zero e os 34px voltam como as margens da própria barrinha, 18 de cada lado. Medido, os textos continuam a 45px um do outro, como antes dela. ELA SÓ EXISTE ACIMA DE 1080px, junto com a distribuição de ponta a ponta, e o motivo é o mesmo: abaixo disso a tira quebra em duas linhas, e o primeiro item da segunda linha nasceria com uma barrinha solta na frente, separando ele de nada. Lá embaixo volta o vão de 34px, sem fio. */ .hero-tira .container{justify-content:space-between;column-gap:0} .hero-tira .container a + a::before{content:"";display:inline-block;width:1px;height:13px;margin:0 18px;vertical-align:-1px;background:var(--tinta-15)} } .hero-tira b{color:var(--tinta);font-weight:600} /* ===== Barra de confianca ===== */ .trust-bar{background:var(--azul);color:var(--branco);padding:26px 0} .trust-lead{font-size:14px;color:var(--branco-72);margin:0 0 12px;text-align:center;font-weight:500} .trust-points{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px} .trust-points span{font-size:14.5px;font-weight:600;color:var(--branco);position:relative;padding-left:20px} .trust-points span:before{content:"\25CF";color:var(--verde);position:absolute;left:0;font-size:11px;top:4px} .cert-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-top:4px} .cert-chip{background:var(--branco);border-radius:8px;padding:9px 16px;display:flex;align-items:center;justify-content:center;height:54px} .cert-chip img{max-height:34px;max-width:150px;width:auto;height:auto;display:block;object-fit:contain} /* ===== Secoes ===== */ /* ============================================================ A ABERTURA DE SEÇÃO FALA A LÍNGUA DA CAPA · 17/09/2026 ------------------------------------------------------------ Depois do hero novo, as sete seções do corpo continuavam com a estrutura antiga, repetida sete vezes: pílula verde no centro, h2 em Inter 800 no centro, parágrafo no centro e uma grade de cards. Composição sempre igual quer dizer que nada se destaca, e foi isso que criou a monotonia que o hero acabou de resolver. Agora a abertura é a mesma da capa: rótulo pequeno em caixa alta, título em serifada, tudo alinhado à esquerda, com a largura de leitura limitada. A grade de cards continua ocupando a largura inteira embaixo. O RÓTULO DEIXOU DE SER VERDE. Ele aparecia sete vezes na página, e verde repetido sete vezes não destaca nada. O verde volta a ser raro: fica na marca do hero e no itálico do título. Aqui o rótulo é tinta .65, o degrau mais claro que ainda passa em AA para texto pequeno (5,02:1, medido em 04/09/2026 e anotado no topo deste arquivo). ============================================================ */ .section{padding:56px 0} .section-alt{background:var(--tinta-04)} /* A LARGURA DO TEXTO É A LARGURA DA PÁGINA · 17/09/2026 Primeiro eu limitei a abertura a 38em, pela regra clássica de conforto de leitura. O Edu olhou e disse o que importa mais: o parágrafo parava no meio enquanto a grade de cards ia até o fim, e isso lê como desalinhamento, não como cuidado. Agora abertura, texto e cards começam E TERMINAM na mesma vertical, que é a régua do container. */ .section-head{margin-bottom:32px;max-width:none} .section-head .section-lead{max-width:none;margin-left:0;margin-right:0} /* A ABERTURA FICA ABAIXO DO TÍTULO, E NÃO AO LADO · 21/09/2026 Em 20/09 este bloco virou uma grade de duas colunas: rótulo e título à esquerda, abertura à direita. A conta que motivou era boa (em 1440px a abertura de "O custo de não estar adequado" dava 124 caracteres numa linha, e o conforto de leitura fica entre 60 e 75), e o comentário registrava que o Edu tinha aceitado o preço. Em 21/09 ele viu renderizado e recusou: "colocou o texto ao lado do título, ficou péssimo, volte da forma que estava". O preço era o título perder largura e quebrar em duas ou três linhas, e na tela isso pesa mais do que a conta de caracteres previa. Fica a lição, e ela não é sobre grade: número que resolve no papel precisa ser olhado na tela antes de virar decisão. O problema de leitura que motivou a mudança continua de pé. Se for atacado de novo, que seja sem estreitar o título: limitar a abertura por `max-width` em ch, ou aceitar a linha longa, são caminhos que não tiram largura do h2. */ .section h2{font-size:var(--t-38);font-weight:800;letter-spacing:-.03em;line-height:1.1} .section-lead{font-size:18px;color:var(--tinta-72)} /* Passos */ .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .step{background:var(--branco);border:1px solid var(--tinta-15);border-radius:var(--radius);padding:28px 24px;display:grid;grid-template-columns:auto 1fr;column-gap:14px;grid-template-rows:minmax(44px,auto) auto;align-content:start} .step-num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--azul);color:var(--branco);font-weight:800;font-size:19px;grid-row:1;grid-column:1;align-self:center} .step h3{font-size:19px;grid-row:1;grid-column:2;align-self:center;justify-self:start;margin:0} /* idem: o sublinhado segue o texto */ .step p{grid-column:1 / -1;margin:8px 0 0;color:var(--tinta-72)} /* Kit */ /* .kit-grid também NÃO declara display nem colunas: é o mesmo carrossel da seção de cima, com as MESMAS medidas. A lição da cascata vale aqui igual. Três por vez desde 18/09/2026: com quatro, o cartão ficava em 204px contra os 267px do carrossel de cima, quatro dos oito títulos quebravam em três linhas e o cartão crescia 64px. Duas larguras para o mesmo componente na mesma página é o que fazia esta seção parecer de outro sistema. Sem exceção aqui, as duas filas herdam o --porvez do .car-trilho. */ .kit-grid{margin-bottom:12px} /* Ícones nos títulos por pedido do Edu (18/09/2026), no desenho dos de cima e na MESMA posição: ao lado do título, na grade do .pilar. A primeira versão pôs o ícone numa linha acima para o título não quebrar em três linhas no cartão de 204px; o Edu recusou: "está fora do padrão, os ícones aparecem ao lado do título, não acima". Padrão vale mais do que a quebra. */ .kit-item{background:var(--branco);border:1px solid var(--tinta-15);border-top:3px solid var(--verde);border-radius:var(--radius-sm);padding:20px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;grid-template-rows:minmax(38px,auto) auto;align-content:start} .kit-ic{display:inline-flex;grid-row:1;grid-column:1;align-self:start;color:var(--azul);margin:0} /* start, e não center: quatro dos oito títulos têm três linhas, e o círculo descia junto */ .kit-ic svg{width:var(--ic-texto);height:var(--ic-texto);fill:none;stroke:var(--azul);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .kit-item h3{font-size:16px;grid-row:1;grid-column:2;align-self:center;justify-self:start;margin:0} /* justify-self:start encolhe o bloco ao texto, para o sublinhado do hover */ .kit-item p{font-size:14px;color:var(--tinta-65);grid-column:1 / -1;margin:6px 0 0} /* Cobertura 360 (pilares) */ /* ============================================================ CARROSSEL DE UMA LINHA · 18/09/2026 ------------------------------------------------------------ A grade de nove cartões virou uma fila de três por vez, com laço infinito para os dois lados. SEM BOTÃO. O Edu viu as setas prontas e cortou: "não quero botão, quero que a rolagem seja manual ao clicar e arrastar os cards". Quem anda a fila é a mão, no dedo, no trackpad, na roda do mouse, arrastando com o cursor ou pelo teclado com o trilho focado. Não existe seta nem passagem automática. A CONTA DOS 33%. O pedido foi "sempre 3 inteiros e 33% dos cantos dos outros cards, para a pessoa saber que tem mais". Então a faixa visível é 0,33 cartão + 3 cartões + 0,33 cartão, com quatro vãos entre eles: 3,66 cartões + 4 vãos = 100%. Daí o flex-basis, e daí o scroll-padding: sem ele o encaixe grudaria o cartão na borda esquerda e o canto de 33% da esquerda sumiria. O QUE É CSS E O QUE É JS. Aqui mora a fila rolável: sem JavaScript ela já funciona no dedo e no trackpad, com encaixe por cartão, e os nove continuam no HTML para o buscador. O JS acrescenta as cópias que fecham o laço e o arrasto com o mouse, que é a única parte que o navegador não dá de graça. A barra de rolagem fica escondida de propósito: quem arrasta não precisa dela, e ela cortaria 12px do cartão de baixo. O teclado continua funcionando porque o trilho é focável (tabindex no HTML), que é o que a WCAG 2.1.1 pede para qualquer região rolável. ============================================================ */ .carrossel{position:relative} .car-trilho{--vao:24px;--canto:.33;--porvez:3; display:flex;gap:var(--vao);overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-padding-left:calc((100% - (var(--porvez) + 1) * var(--vao)) / (var(--porvez) + 2 * var(--canto)) * var(--canto) + var(--vao)); scrollbar-width:none;-ms-overflow-style:none;padding:6px 0 18px} /* folga para o cartão levantar no hover sem a sombra ser cortada pelo overflow */ .car-trilho::-webkit-scrollbar{display:none} /* OS CANTOS ESMAECEM. O cartão cortado nas duas bordas some no fundo em vez de terminar numa linha reta: é máscara, não camada de cor, então funciona sobre qualquer fundo e não entra cor nova. Os 9% de cada lado cobrem o canto de 33% quase inteiro. O arrasto continua valendo na área esmaecida, porque a máscara é só visual. Escolha do Edu, entre três, em 18/09/2026. */ .car-trilho{-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)} .car-trilho:focus-visible{outline:2px solid var(--azul);outline-offset:4px;border-radius:var(--radius-sm)} .car-trilho > *{flex:0 0 calc((100% - (var(--porvez) + 1) * var(--vao)) / (var(--porvez) + 2 * var(--canto)));scroll-snap-align:start} /* O cursor avisa que a fila se pega com a mão. Enquanto o arrasto acontece o encaixe sai do caminho, senão ele briga com o dedo a cada pixel, e a seleção de texto também: arrastar cartão não é marcar parágrafo. */ .carrossel.pronto .car-trilho{cursor:grab} .car-trilho.arrastando{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none} /* A CÓPIA TAMBÉM RESPONDE AO MOUSE · corrigido em 18/09/2026 Ela nasceu com pointer-events:none e a justificativa era "a cópia é enfeite". Não é: o laço para em qualquer ponto dos três blocos, e em 4 das 11 posições de descanso medidas havia cópia à vista. Quem passasse o mouse ali não via animação nenhuma, e foi assim que o Edu achou o defeito. Cartão aqui não tem link nem botão, então a única coisa que o mouse faz é o hover, e desligá-lo não protegia nada. O aria-hidden continua na cópia: para o leitor de tela os cartões seguem sendo oito, e não vinte e quatro. */ .car-clone{cursor:inherit} /* .pilares NÃO declara mais display: a fila vem de .car-trilho. Na primeira versão as duas regras conviviam, e como .pilares vinha depois no arquivo com a mesma especificidade, o display:grid vencia e o carrossel nascia empilhado. Cascata não é opinião: as duas mandavam na mesma coisa, e a de baixo ganhou. */ .pilar{background:var(--branco);border:1px solid var(--tinta-15);border-radius:var(--radius-sm);padding:22px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;grid-template-rows:minmax(38px,auto) auto;align-content:start} .pilar-ic{display:inline-flex;grid-row:1;grid-column:1;align-self:start;color:var(--azul);margin:0} /* start, e não center: com título de três linhas o círculo descia e deixava de bater com o dos cartões vizinhos */ .pilar-ic svg{width:var(--ic-texto);height:var(--ic-texto);fill:none;stroke:var(--azul);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pilar h3{font-size:16px;grid-row:1;grid-column:2;align-self:center;justify-self:start;margin:0} /* justify-self:start encolhe o bloco ao texto, para o sublinhado do hover */ .pilar p{font-size:14px;color:var(--tinta-72);grid-column:1 / -1;margin:6px 0 0} /* Planos */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch} .plan{position:relative;background:var(--branco);border:1px solid var(--tinta-15);border-radius:var(--radius);padding:30px 26px;display:flex;flex-direction:column} .plan-featured{border:2px solid var(--azul);position:relative;box-shadow:0 14px 34px rgba(10,37,64,.12);transform:translateY(-8px)} /* O ÍCONE DO CARTÃO DE PLANO NÃO TEM LADRILHO. · decisão do Edu, 21/09/2026 Ele entrou no ladrilho junto com kit, pilares e riscos na padronização do dia anterior, e o Edu pediu de volta olhando os três cartões no ar: o cartão de plano é bem mais arejado que os outros, e o retângulo cinza puxava o olho para um lugar que não é o preço, que é a peça de maior peso ali. A decisão é de composição, e é dele. ISSO NÃO REABRE A BAGUNÇA DOS QUATRO FORMATOS. O que a varredura fechou foi o ladrilho ter uma forma só, um raio só e um fundo só onde ele existe. Não ter ladrilho é a ausência do componente, e não uma segunda versão dele: é a mesma escolha do ícone de nota e do ícone de aviso, que também são desenhos soltos ao lado de um texto. O DESENHO É O --ic-cartao, 28px, e não os 30px que estavam aqui antes. Os 30 eram um número solto, e a diferença de 2px não se vê; o que se vê é a escala voltar a ter doze degraus se cada cartão puder escolher o seu. O nome do degrau sempre foi "cabeça de cartão", e é exatamente este lugar. */ .plan-ic{display:inline-flex;flex:none;color:var(--azul);margin:0} .plan-head{display:flex;align-items:center;gap:10px;margin-bottom:12px} .plan-head h3{margin:0} .plan-ic svg{width:var(--ic-cartao);height:var(--ic-cartao);fill:none;stroke:var(--azul);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* .plan-ap saiu em 19/09/2026 junto com o "a partir de" do Premium: sem valor publicado, nao havia piso para ele qualificar. Se o "a partir de" voltar quando os planos abrirem, a regra volta com ele. */ /* EXCEÇÃO da pílula: o selo do card de preço fica preenchido. Ele não disputa com outras etiquetas, é o rótulo do card, e vazado ele some. */ /* O SELO USA A MEDIDA NORMAL, e nao a pequena. Ele e o ROTULO DO CARD, na mesma hierarquia da etiqueta de secao (.eyebrow) que abre cada bloco da home -- e nao um marcador miudo dentro de um card, que e o papel da .badge. Na medida pequena ele ficava 6,4px mais baixo que as pilulas ao redor, e foi isso que o Edu viu em 08/09/2026. E O RECHEIO COMPENSA A BORDA QUE ELE NAO TEM. As outras pilulas normais sao 4px de recheio mais 1px de fio; como este e preenchido e sem contorno, o 1px do fio vira 1px de recheio, dos dois lados. Assim a ALTURA EXTERNA bate exatamente com a delas, 25,6px, que e o que o olho compara. */ /* O SELO DO CARTÃO NÃO É PÍLULA. · Edu, 22/09/2026 Ele foi desenhado como pílula e por isso vivia dando trabalho: em 07/09/2026 precisou virar EXCEÇÃO declarada no testes/pilula-padrao.js, com uma conta só para ele compensar a borda que não tinha, e em 22/09 a régua de rótulo, feita para etiqueta em linha densa, o encolheu demais. A causa era a forma. O Edu apontou: na home inteira não há outra pílula. Os botões têm raio 9, os cartões 14, os ladrilhos 9. O selo era a única peça redonda da página, e não é uma etiqueta entre muitas: é o rótulo de um cartão inteiro, e o trabalho dele é ser visto antes do cartão. Agora ele é retângulo com o raio da casa, o mesmo do botão e do ladrilho, e sai da escala de pílula. A exceção que existia some junto. */ .plan-tag{position:absolute;top:-11px;left:24px;display:inline-flex;align-items:center;justify-content:center; height:22px;background:var(--azul);color:var(--branco);font-size:11.5px;line-height:1; font-weight:700;padding:0 11px;border-radius:var(--radius-sm)} /* "Disponivel agora" x "Em breve": duas etiquetas com o mesmo azul se leriam como a mesma coisa. O verde aqui e o unico caso fora do score de risco em que ele aparece, e cabe: significa exatamente o que significa no resto do produto, que e "isto esta em ordem, pode usar". Uso o verde ESCURO e nao o verde da marca: branco sobre #16A34A da 3.3:1, abaixo do minimo de leitura; sobre #0f7a37 da 5.4:1. */ .plan-tag-agora{background:var(--verde-texto)} .plan h3{font-size:20px} .plan-price{font-size:26px;font-weight:800;color:var(--tinta);margin:0 0 4px} /* VALOR BORRADO, enquanto o plano nao esta a venda (19/09/2026). O borrao mantem o desenho do cartao e a altura da linha do preco, sem entregar o numero ao olho. Nao seleciona, para o texto nao sair por copiar e colar sem querer. Esconde do OLHO, e nao do codigo-fonte. */ .plan-borrado{display:inline-block;padding:0 2px;filter:blur(6px);user-select:none} .plan-desc{color:var(--tinta-72);font-size:15px} .plan-list{list-style:none;margin:8px 0 24px;padding:0;display:flex;flex-direction:column;gap:9px;flex:1} .plan-list li{position:relative;padding-left:26px;font-size:15px;color:var(--tinta-72)} .plan-list li:before{content:"\2713";position:absolute;left:0;color:var(--verde);font-weight:800} .plan-mes{font-size:15px;font-weight:600;color:var(--tinta-65)} /* Alinhada à esquerda desde 17/09/2026: com a abertura de seção alinhada à esquerda, um bloco centralizado no meio da coluna ficava flutuando fora de eixo. O limite de largura continua, porque linha longa demais cansa. */ .legal-nota{max-width:none;margin:0 0 30px;background:var(--azul-suave);border:1px solid var(--azul);border-left:4px solid var(--azul);border-radius:var(--radius-sm);padding:16px 20px;font-size:14px;color:var(--tinta-72);line-height:1.65;text-align:left} #por-que-gratis .section-lead{text-align:center;max-width:62ch;margin-left:auto;margin-right:auto} .legal-nota strong{display:block;color:var(--azul);margin-bottom:4px;font-size:15px} /* Nota COM ícone. Mesmo mecanismo das caixas de observação das páginas legais (.legal-obs.lo-ico), e pelo mesmo motivo: com flex o texto vira um bloco e TODAS as linhas ficam recuadas; com `float` o ícone empurra só a primeira, e da segunda em diante o texto volta para a margem da caixa. O :after limpa o float, senão uma nota curta deixaria o ícone escapar. */ .legal-nota.ln-ico:after{content:"";display:block;clear:both} .legal-nota.ln-ico > svg{float:left;width:var(--ic-texto);height:var(--ic-texto);margin:2px 11px 0 0;color:var(--azul)} .nota-base{max-width:none;margin:24px 0 0;background:var(--branco);border:1px solid var(--tinta-15);border-left:1px solid var(--tinta-15)} .nota-base strong{display:inline;margin-right:4px} /* Custo de nao se adequar */ .risco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .risco-card{background:var(--branco);border:1px solid var(--tinta-15);border-top:3px solid var(--azul);border-radius:var(--radius-sm);padding:22px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;grid-template-rows:minmax(40px,auto) auto;align-content:start} .risco-card h3{font-size:17px;grid-row:1;grid-column:2;align-self:center;justify-self:start;margin:0} /* justify-self:start: o sublinhado do hover mede o texto, não a coluna */ .risco-card p{font-size:14px;color:var(--tinta-72);grid-column:1 / -1;margin:6px 0 0} .risco-ic{display:inline-flex;grid-row:1;grid-column:1;align-self:start;color:var(--azul);margin:0} /* start: "Custo de um incidente" tem duas linhas, e com center o círculo dele descia */ .risco-ic svg{width:var(--ic-texto);height:var(--ic-texto);fill:none;stroke:var(--azul);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* Certificacoes (Quem somos) */ .cert-grupos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:8px 0 8px} .cert-grupo h3{font-size:16px;margin-bottom:6px;color:var(--tinta)} .cert-grupo ul{list-style:none;margin:0;padding:0} .cert-grupo li{font-size:14px;color:var(--tinta-72);padding:6px 0;border-top:1px solid var(--tinta-08)} .cert-grupo li:first-child{border-top:0} @media (max-width:720px){.cert-grupos{grid-template-columns:1fr;gap:18px}} /* Comparativo */ .compara{width:100%;border-collapse:collapse;font-size:15px;margin-top:8px;border:1px solid var(--tinta-15);border-radius:var(--radius-sm);overflow:hidden} .compara th,.compara td{padding:13px 16px;text-align:center;border-bottom:1px solid var(--tinta-15)} .compara thead th{font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--branco-72);font-weight:700;background:var(--azul);border-bottom-color:var(--azul)} .compara thead th:last-child{background:var(--azul-escuro);color:var(--branco)} .compara tbody td:first-child{font-weight:600;color:var(--tinta)} .compara td:last-child,.compara th:last-child{background:var(--azul-suave);color:var(--azul);font-weight:700} .compara tbody tr:last-child td{border-bottom:0} /* FAQ */ /* O FAQ É UM BLOCO ESTREITO, E INTEIRO · 17/09/2026 Ele passou por três estados no mesmo dia, e o terceiro é o certo: 1. lista centralizada em 820px com a abertura à esquerda, em 144px. A abertura e a lista começavam em verticais diferentes; 2. lista esticada até a margem, como as outras seções. O Edu viu e recusou: numa linha de pergunta com o "+" na ponta direita, a largura inteira vira um vão vazio no meio; 3. A SEÇÃO INTEIRA estreita e centralizada, abertura e lista juntas. Nada desalinhado dentro dela, e sem o vão. É o mesmo tratamento que o convite final (.cta-section) já tinha. O texto continua alinhado à esquerda dentro do bloco; quem é centralizado é o bloco, não a letra. */ /* A MEDIDA ESTREITA DA HOME, UMA SÓ. Duas seções não ganham nada com a largura inteira e perdem legibilidade com ela: o FAQ (a pergunta fica de um lado e o "+" do outro, com um vão no meio) e a comparação de caminhos (três colunas esticadas, com a terceira enorme). As duas passam a viver no mesmo bloco estreito e centralizado, com abertura e conteúdo juntos, então nada fica desalinhado dentro delas. O resto da página continua de margem a margem. CLASSE, E NÃO ID. A primeira versão desta regra era "#faq > .container", e o testes/cascata-css.js reprovou na hora: o id vence qualquer classe, e a mesma seção existe nas páginas legais, onde o rodapé do documento depende de .container.narrow com 760px. Um id no CSS de layout atravessa página. */ .bloco-estreito{max-width:868px} /* 820 de conteúdo + os 24px de recheio de cada lado */ .faq{max-width:none;margin:0} .faq details{border:1px solid var(--tinta-15);border-radius:var(--radius-sm);padding:0 18px;margin-bottom:10px;background:var(--branco)} .faq summary{cursor:pointer;font-weight:600;font-size:15.5px;padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--tinta)} .faq summary:-webkit-details-marker{display:none} .faq summary:after{content:"+";font-size:20px;color:var(--azul);font-weight:700;flex:none} .faq details[open] summary:after{content:"\2212"} .faq .faq-a{padding:0 0 18px;font-size:14.5px;color:var(--tinta-72);line-height:1.65} .faq .faq-a a{color:var(--azul);font-weight:600} /* CTA final */ /* O BLOCO DE FECHO É BRANCO, E NÃO CINZA · 22/09/2026 O Edu perguntou se o fundo não deveria ser branco. Deveria, e o motivo é estrutural: a home alterna branco e cinza de cima a baixo, e o bloco de fecho era a única quebra da alternância. Medido no navegador: hero branco Como funciona cinza Muito além branco Documentos cinza Por que branco Apoio cinza Planos branco Perguntas cinza Cadastro CINZA <- dois cinzas seguidos Dois cinzas colados fazem o fecho ler como rabo da seção de perguntas, e não como o momento próprio que ele é. O fio de 1px que existia aqui, e em nenhuma outra emenda da página, era o band-aid disso: separava o que a cor tinha juntado. Com o branco, a própria troca de cor separa, e o fio sai. De quebra o fecho fica claro contra o rodapé azul, que é o contraste que um bloco de conversão quer na última dobra. */ /* O RITMO DO BLOCO DE FECHO · 21/09/2026 O Edu olhou o bloco pronto e perguntou se dava para melhorar os espaços. Dava, e o defeito não era o tamanho de nenhum vão isolado: era a FALTA DE HIERARQUIA entre eles. Medido no navegador, como estava: 56 recuo da seção título 19 título -> abertura abertura 18 abertura -> botão botão 8 botão -> letra miúda letra miúda 56 recuo da seção Dezenove e dezoito são o MESMO vão para o olho. Com eles iguais, a abertura fica equidistante do título e do botão, ou seja, não pertence a nenhum dos dois, e é isso que a fazia parecer solta no meio. Os 8px de baixo, por sua vez, colavam a letra miúda no botão, como se fosse legenda DELE, e não nota do bloco inteiro. O bloco tem três partes, e não quatro: o RECADO (título e abertura), a AÇÃO (botão) e a NOTA. Os vãos passam a dizer isso: 12 título -> abertura são a mesma frase, dita em dois tamanhos 30 abertura -> botão aqui muda de assunto: sai o texto, entra o que se faz 30 botão -> letra miúda o MESMO vão de cima OS DOIS LADOS DO BOTÃO SÃO IGUAIS, E ISSO MUDOU EM 22/09. Na primeira rodada eu pus 30 em cima e 16 embaixo, por agrupamento: recado, ação e nota. O Edu olhou e disse que os espaços continuavam sem padrão, "entre o botão e o subtítulo tem um espaço, depois do botão tem um espaço diferente". Ele tem razão, e o motivo é que aqui o agrupamento não manda: num bloco CENTRALIZADO, com tudo no mesmo eixo, o olho lê os vãos como ritmo, e não como semântica. Ar desigual em volta de um objeto centralizado faz o objeto parecer empurrado para cima. O botão é o objeto do bloco, e agora tem o mesmo ar dos dois lados. O vão do título para a abertura continua menor que os dois, porque essas duas são mesmo uma coisa só, e disso ele não reclamou. É o desenho que o hero já usa (20px do título para a abertura, 24px até o botão), na escala desta seção, cujo título e abertura são menores. OS 56px DA SEÇÃO NÃO MUDAM. São os de toda seção do site, e a régua vertical da página não se quebra por causa de um bloco. As margens vizinhas colapsam, então cada vão é o MAIOR dos dois lados: é por isso que a abertura vai a zero embaixo e quem declara os 30px é o botão. Mexer num lado só não move o vão. E AQUI VAI `margin-top`/`margin-bottom`, E NUNCA O ATALHO `margin`. Quem centraliza o botão nesta seção é o `margin-left:auto` do `.cta-form-center`, e o atalho zera os quatro lados de uma vez. Eu escrevi `margin:30px 0 16px` na primeira versão, que tem especificidade maior que a do `.cta-form-center`, e o botão saiu 116px à esquerda do centro num bloco em que todo o resto é centralizado. Apareceu na foto. */ .cta-section h2{margin-bottom:12px} .cta-section .section-lead{margin-bottom:0} .cta-section .cta-form{margin-top:30px;margin-bottom:30px} /* Rodape */ .site-footer{background:var(--azul);color:var(--branco-95);padding:48px 0 24px} /* ESPAÇO MORTO NO ALTO DO RODAPÉ · medido em 18/09/2026 align-items:start é a linha que interessa. Sem ela, a grade esticava o aviso até a altura da coluna da marca: a caixa ficava com 137px para um texto de 99px, ou seja, 38px de vazio azul embaixo do texto, dentro da própria caixa. Era o que mais saltava na tela. O recuo de baixo caiu de 28px para 20px: a linha que separa este bloco da fila de links tinha 28px em cima e 18px embaixo, e não havia motivo para a assimetria. */ .footer-inner{display:grid;grid-template-columns:1fr 1.4fr;gap:36px;align-items:start;padding-bottom:20px;position:relative} /* A LINHA SEPARADORA ALINHADA COM A MARGEM DO SITE · 19/09/2026 Era um `border-bottom` no próprio `.footer-inner`. Borda se desenha na BORDA da caixa, e esta caixa é `.container`, que carrega 24px de recuo de cada lado: a linha nascia 24px mais larga que o conteúdo, dos dois lados. Ela não era nem uma coisa nem outra. As outras linhas da página são de ponta a ponta (cabeçalho, faixa do hero, bloco de cadastro) ou alinhadas com a régua do conteúdo (a nota legal). Esta ficava no meio do caminho, e o Edu viu assim que a fila de links voltou para a régua certa. O traço agora é um `::after` medido a partir da caixa de recuo, com os mesmos 24px do `.container`, então ele começa e termina exatamente onde o logotipo começa e o aviso importante termina. `position:absolute` é o que impede o pseudo-elemento de virar uma célula da grade. */ .footer-inner::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:1px;background:var(--branco-12)} /* MARCA E FRASE NA MESMA LINHA · 18/09/2026 A frase ficava embaixo do logotipo, e o Edu pediu ao lado. O flex-wrap com flex-basis de 220px é o que faz isso sozinho: enquanto couber, a frase fica ao lado; quando a coluna aperta (celular), ela desce de volta para baixo do logotipo, sem media query. A LARGURA DAS COLUNAS NÃO MUDA. Eu tinha alargado a da marca para a frase caber em duas linhas, e isso estreitou o aviso importante, que passou de três para quatro linhas. O Edu cortou na hora: "não era para mexer no aviso importante". A caixa dele volta aos 604px e às três linhas de sempre. O align-self:center é o que fecha o buraco: o bloco da marca tem 70px e o aviso tem 99px, e centrar reparte a diferença em 15px em cima e 15 embaixo, em vez de deixar 30px de vazio debaixo do logotipo. */ .footer-brand{display:flex;align-items:center;align-self:center;gap:18px;flex-wrap:wrap;font-weight:700;color:var(--branco);font-size:18px} .footer-logo{height:var(--logo-barra);width:auto;display:block;margin:0;flex:none} /* 1919x667 no arquivo, então 64px de altura dão 184px de largura */ .footer-brand p{margin:0;flex:1 1 220px;font-weight:400;color:var(--branco-72);font-size:14.5px;max-width:24em} /* `flex-start` e não `center`: o bloco das redes tem duas linhas (ícones em cima, rótulo embaixo) e a fila de links tem uma. Centralizado, o navegador empurrava a fila para o meio da altura das redes, e os ícones subiam acima da linha dos links, que foi o desalinhamento visível. Alinhados pelo topo, a linha dos ícones e a linha dos links começam na mesma altura, e o rótulo desce sozinho por baixo. */ .footer-links{justify-content:space-between;align-items:flex-start} .fl-nav{display:flex;gap:24px;flex-wrap:wrap} /* OS ÍCONES FICAM ONDE ESTAVAM; o rótulo é que desce para a linha de baixo, encostado na direita. Antes os dois dividiam a mesma linha, e o rótulo empurrava os ícones para dentro conforme a fila de links da esquerda crescia. `column-reverse` em vez de trocar a ordem no HTML: o continua vindo antes dos links no código, que é como o leitor de tela quer ouvir (primeiro o que é aquilo, depois os links), e só a pintura inverte. */ .fl-social{display:flex;flex-direction:column-reverse;align-items:flex-end;gap:7px} .fl-social span{font-size:13px;color:var(--branco-72)} .footer-social{display:flex;gap:12px} .footer-social a{display:inline-flex;color:var(--branco-95);transition:color .18s ease, transform .18s ease} .footer-social a:hover{color:var(--branco);transform:translateY(-2px)} .footer-social svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .disclaimer{font-size:14px;color:var(--branco-95);background:var(--branco-12);border-left:3px solid var(--verde);padding:16px 18px;border-radius:0;margin:0} .disclaimer strong{color:var(--branco)} .footer-certs{padding:16px 0 0;font-size:13px;color:var(--branco-72);line-height:1.7;text-align:center} .footer-certs .fc-lead{color:var(--branco-72);font-weight:600} .footer-certs .fc-sep{margin:0 8px;color:var(--branco-72)} /* PADDING-TOP, E NUNCA O ATALHO `padding` · 19/09/2026 Estes blocos do rodapé são `.container` no HTML, e o `.container` dá o recuo lateral de 24px que mantém o texto longe da borda da tela. Um atalho `padding:14px 0 0` aqui tem a mesma especificidade e vem depois no arquivo, então ele reescrevia os lados para ZERO e o recuo sumia. No desktop passava despercebido, porque sobra margem dos dois lados; no celular a identificação e a fila de links encostavam nas duas bordas. Por isso só a face de cima é declarada, como o `.footer-bottom` já fazia. */ .footer-id{font-size:12.5px;color:var(--branco-72);padding-top:14px;line-height:1.6;text-align:center} /* O RODAPÉ DA HOME NO CELULAR · 19/09/2026 A fila de links quebrava em duas por linha e sobrava o "Blog" sozinho na terceira, o que lia como defeito e não como decisão. Empilhado, um link por linha, ele ganha a mesma coluna do logotipo e da frase logo acima, e passa a ser o MESMO rodapé das 51 páginas de blog e de documento, onde a `.fl-fila` já empilha à esquerda abaixo de 560px. Os ícones sobem para a primeira linha, encostados na direita: é o lugar que eles ocupam no desktop, e assim eles não viram uma quarta fileira solta entre os links e a identificação. */ @media (max-width:640px){ .fl-nav{flex-direction:column;gap:14px} /* A IDENTIFICAÇÃO DA HOME VOLTA PARA A ESQUERDA SÓ AQUI · 19/09/2026 Do tablet para cima ela é centralizada, como nas 51 páginas de documento, e forma um bloco só com o copyright logo abaixo. Até 28/08 ela era centralizada em tudo; foi para a esquerda porque dividia a linha com o rótulo "Acompanhe nas redes", ancorado na direita, e texto centralizado ao lado de outro preso numa borda não parece centralizado. O rótulo saiu em 19/09 e o motivo saiu com ele. No celular o alinhamento à esquerda continua, e por outro motivo: aqui o rodapé inteiro é uma coluna só, o CNPJ ocupa duas linhas, e centralizado ele fica com as duas de larguras diferentes penduradas embaixo de uma fila de links alinhada à esquerda. A classe existe só para isto, e por isso ela diz a página, e não o lado. */ .footer-id.fid-home{text-align:left} /* Os ícones ficam na primeira linha, à direita dos links, que é onde eles estão no desktop. `flex-start` aqui é o topo da coluna invertida, e não a esquerda: o `.fl-social` é `column-reverse`. */ .fl-social{align-items:flex-start;margin-top:4px} /* Uma coluna só, e tudo nela começa na mesma linha de margem: o logotipo, a frase, os links, a identificação e o copyright. O `text-align:center` que o `.footer-id` traz e o `right` do rótulo das redes são regras de desktop, e no celular deixavam três eixos na mesma pilha. */ } .footer-links{display:flex;gap:24px;flex-wrap:wrap;padding-top:18px} /* padding-top pelo motivo registrado no .footer-id */ /* LINHA QUE CRESCE NO HOVER, igual à do menu do topo (.nav a:not(.btn)). Duas coisas precisaram acontecer juntas, e a primeira é a que importa: `text-decoration:none`. O site NÃO desliga o sublinhado padrão do navegador em lugar nenhum: a regra `a{color:var(--azul)}` lá em cima troca a cor e não mexe na decoração, como o comentário dos botões já registrava. Então o `text-decoration:underline` que estava aqui no hover era regra morta, porque o link já vinha sublinhado parado. Sem desligar isso, a barra animada vira uma SEGUNDA linha embaixo de uma que já existe, e é isso que acontece no menu do topo hoje. Mesma duração e mesma origem à esquerda do topo, para o gesto ser reconhecível como o mesmo. */ .footer-links a{color:var(--branco-95);font-size:14px;font-weight:600; text-decoration:none;position:relative;transition:color .18s ease} .footer-links a:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px; background:var(--branco);transform:scaleX(0);transform-origin:left;transition:transform .22s ease} .footer-links a:hover{color:var(--branco)} .footer-links a:hover:after{transform:scaleX(1)} /* Teclado enxerga o mesmo que o mouse: quem navega por Tab precisa do mesmo sinal, senão o link fica sem estado visível nenhum agora que o sublinhado saiu. */ .footer-links a:focus-visible:after{transform:scaleX(1)} /* Quem pediu menos movimento continua vendo a linha, ela só não cresce. */ @media (prefers-reduced-motion: reduce){ .footer-links a:after{transition:none} } .footer-bottom{display:flex;justify-content:center;text-align:center;font-size:13px;color:var(--branco-72);padding-top:18px;flex-wrap:wrap;gap:8px} /* ESTE BLOCO PRECISA FICAR DEPOIS DA REGRA ACIMA. Media query não aumenta especificidade: com o mesmo peso, quem vem por último no arquivo ganha. Escrito lá em cima, junto das outras regras de celular do rodapé, o `justify-content:center` desta linha o anulava, e o copyright continuava centralizado embaixo de uma coluna alinhada à esquerda. */ @media (max-width:640px){ .footer-bottom{justify-content:flex-start;text-align:left} } /* RODAPÉ SEM O BLOCO DA MARCA (.footer-simples) Número diferente para chegar no mesmo lugar, e é isso que alinha o rodapé dos documentos com o da home. Na home o rodapé abre com 48px e logo depois vem o `.footer-inner`, o bloco da marca, que não tem recuo próprio: o primeiro conteúdo aparece aos 48px. Nas páginas de documento não existe bloco da marca, então a primeira coisa é a fila de links, que carrega os seus próprios 18px de `.footer-links`. Somando, o conteúdo caía aos 66px, e sobrava no alto uma faixa navy vazia que na home não existe. 30 + 18 fecha nos mesmos 48px. Se um dia alguém "padronizar" isto de volta para 48px achando que conserta, o rodapé desalinha de novo. E se um desses rodapés ganhar o bloco da marca, esta classe sai dele. */ .site-footer.footer-simples{padding-top:30px} /* A FILA DE LINKS DO RODAPÉ (.fl-fila) Um na esquerda, um no meio, um na direita, ocupando a largura da coluna de texto da própria página. É GRADE E NÃO space-between, e a diferença não é implicância. O space-between reparte o espaço VAGO em partes iguais, então o link do meio só cai no centro se os rótulos das pontas tiverem o mesmo tamanho. "Quem somos" tem 11 caracteres e "Política de Cookies" tem 19: o do meio ficaria visivelmente torto, e pior, mudaria de lugar em cada página, porque em cada uma o trio de rótulos é outro. Com três colunas de 1fr, o centro é o centro sempre. POR QUE SÓ TRÊS: o link "Preferências de cookies" NÃO entra aqui. Ele nasce escondido e o consent.js só o revela quando existe medição ou publicidade configurada, ou seja, ele não existe hoje e vai existir no lançamento. Se ele morasse nesta linha, o rodapé teria três colunas antes do lançamento e quatro depois, e o alinhamento que o Edu pediu se desfaria sozinho no dia da virada, sem ninguém mexer em nada. Ele vive na linha de baixo, com o copyright, que é o lugar certo também por categoria: os três são documentos para ler, ele é uma ação para executar. */ /* A GRADE DEIXOU DE SER FIXA EM TRÊS (28/08/2026). Ela nascia com `repeat(3,1fr)` e três regras de `nth-child`, o que travava o rodapé em exatamente três links. Quando o blog entrou, o "Artigos" não coube e foi parar na linha do copyright, pendurado ao lado dele como se fosse sobra. Foi o que o Edu apontou. Agora a grade cria uma coluna por link, quantos forem: o primeiro ancora à esquerda, o último à direita, e o que estiver no meio centraliza. Com três, o resultado é idêntico ao de antes; com quatro, funciona igual, sem regra nova. E POR ISSO A CLASSE MUDOU DE NOME, de `fl-tres` para `fl-fila`. Eu tinha deixado o nome velho como "dívida assumida", chamando a troca de estética. Estava errado, e o Edu não deixou passar. Nome que mente não é estética, é armadilha para quem ler depois, e este projeto já pagou por isso: teve comentário de CSS defendendo um comportamento que o código não tinha, e ninguém viu porque o comentário parecia confiável. Um contêiner chamado "três" com quatro links dentro é a mesma família de problema, esperando a próxima pessoa. O custo real da troca foi um token em doze arquivos, com os testes confirmando. Muito mais barato do que o dia que alguém perderia tentando entender por que "três" tem quatro. */ /* NINGUÉM QUEBRA EM DUAS LINHAS, nem que a fila passe da coluna de leitura (Edu, 28/08/2026). A grade repartia a largura em colunas IGUAIS (`1fr`). Com três links sobrava espaço; com cinco, "Aviso de Privacidade" e "Exercer os seus direitos" não cabiam na fatia deles e quebravam no meio, então a linha virava dois andares e o rodapé ficou desalinhado. A troca é de princípio: a largura deixa de mandar no texto e passa a ser consequência dele. Cada link ocupa o que precisa (`nowrap`), a fila fica do tamanho da soma (`width:fit-content`) e se centraliza. O `max-width:none` é o que permite ultrapassar o limite do `.container`, e é intencional: numa linha de rótulos, quebrar palavra custa mais do que passar alguns pixels da margem. O QUE SE PERDE, e vale saber: as pontas não ancoram mais nas margens da coluna, porque a fila agora é um bloco centralizado. Com cinco itens isso lê melhor do que ancorar, mas se um dia voltarem a ser três, o antigo pode fazer mais sentido. `flex-wrap:wrap` é rede de segurança, não layout: em tela estreita ele quebra ENTRE links, nunca dentro de um. Abaixo de 560px a regra do celular assume e empilha tudo. */ .footer-links.fl-fila{display:flex;flex-wrap:wrap;align-items:center; justify-content:center;gap:12px clamp(18px,3vw,34px); max-width:none;width:fit-content;margin-left:auto;margin-right:auto} .footer-links.fl-fila a{white-space:nowrap;text-align:center} /* Linha de baixo dos documentos (.fb-doc) Esta classe NÃO mexe em alinhamento: a linha continua centralizada e com o mesmo respiro da home, porque é a assinatura do site e não parte da coluna de leitura. ELA QUASE NÃO TEM MAIS MOTIVO PARA EXISTIR, e isso é de propósito deixar escrito. Ela nasceu para acomodar dois itens aqui embaixo, o copyright e o "Preferências de cookies", com o gap e a cor de link que esta linha não herdava. Em 28/08/2026 o Edu pediu o "Preferências de cookies" na mesma fila dos outros links, e ele subiu. Agora só o copyright mora aqui. As regras de cor de link continuam abaixo porque o link pode voltar, e sem elas ele voltaria no azul padrão do navegador sobre fundo navy, quase invisível. Esse erro só apareceria depois do lançamento, porque esse link nasce escondido e só acende quando houver anúncio configurado. Quatro linhas de CSS dormindo custam menos do que isso. */ /* O FECHO FICA CENTRALIZADO, em todas as páginas. Chegou a ir para a esquerda em 28/08/2026, por coerência com a linha da identificação, e voltou no mesmo dia. O motivo da volta vale registrar, porque as duas linhas parecem o mesmo caso e não são: a identificação divide a linha com o rótulo das redes, e num par o item da esquerda centralizado parece torto. O fecho está SOZINHO na linha. Sem vizinho não há leitura de duas colunas, e linha de fecho centralizada lê como fim de página. Coerência de alinhamento se resolve por linha, não por rodapé. */ .footer-bottom.fb-doc{gap:18px} /* Mesma linha animada da .footer-links, pelo mesmo motivo. Ver o comentário lá em cima: sem `text-decoration:none` a barra vira a segunda linha embaixo do sublinhado padrão do navegador. */ .footer-bottom.fb-doc a{color:var(--branco-95);font-size:13px;font-weight:600; text-decoration:none;position:relative;transition:color .18s ease} .footer-bottom.fb-doc a:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px; background:var(--branco);transform:scaleX(0);transform-origin:left;transition:transform .22s ease} .footer-bottom.fb-doc a:hover{color:var(--branco)} .footer-bottom.fb-doc a:hover:after, .footer-bottom.fb-doc a:focus-visible:after{transform:scaleX(1)} @media (prefers-reduced-motion: reduce){ .footer-bottom.fb-doc a:after{transition:none} } /* Na coluna estreita dos documentos a linha de identificação chega perto de virar duas. Se virar, que ela quebre ANTES do CNPJ, e não no meio de "São Paulo/SP", que é onde o navegador quebraria sozinho por causa da barra. */ .fid-nb{white-space:nowrap} /* Numa tela estreita três colunas viram três colunas espremidas, com "Aviso de Privacidade" quebrando no meio da palavra. Abaixo de 560px elas viram uma lista empilhada, tudo encostado à esquerda. */ @media (max-width:560px){ /* No celular vira uma coluna só, alinhada à esquerda. O `width:auto` desfaz o `fit-content` do desktop: aqui a fila volta a ocupar a largura toda, senão a coluna de links ficaria centralizada como um bloco estreito no meio da tela. */ .footer-links.fl-fila{flex-direction:column;flex-wrap:nowrap; align-items:flex-start;gap:12px;width:auto} .footer-links.fl-fila a{text-align:left} } /* A TABELA DE PLANOS NÃO EMPURRA MAIS A PÁGINA (17/09/2026) Medido em 390px de largura: a página inteira rolava 58px para o lado, e a culpada era esta tabela, com quatro colunas e recheio de 16px. Rolagem lateral na página toda é defeito de celular clássico: some o canto direito de tudo, inclusive do texto que nada tem com a tabela. Agora quem rola é a própria tabela, dentro dela mesma. */ @media (max-width:760px){ .compara{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} .compara th,.compara td{white-space:nowrap} } /* ===== Responsivo ===== */ @media (max-width:920px){ .hero-grid{grid-template-columns:1fr;gap:30px} .hero h1{font-size:40px} .hero-copy{padding-bottom:0} .hero-doc{height:auto;padding-bottom:24px} /* No celular não há revezamento: uma folha só, sem inclinação e sem sobra. */ .papel{position:static;box-shadow:0 12px 30px rgba(10,37,64,.12);width:100%;max-width:410px;height:auto;transform:none;opacity:1} .papel.pos-tras{display:none} .steps{grid-template-columns:1fr} .risco-grid{grid-template-columns:repeat(2,1fr)} .car-trilho{--porvez:2} /* dois inteiros, com os cantos dos vizinhos */ .plans{grid-template-columns:1fr} .plan-featured{transform:none} .footer-inner{grid-template-columns:1fr} } @media (max-width:560px){ .nav a:not(.btn){display:none} .hero{padding:40px 0 0} .hero h1{font-size:33px} .cta-form{flex-direction:column} /* Empilhado, o .cta-form herdava align-items:center e centralizava o botão debaixo de um texto alinhado à esquerda. Isso não se via antes porque o hero antigo tinha campo mais botão ocupando a linha inteira. */ .hero .cta-form{align-items:flex-start;gap:12px} .risco-grid{grid-template-columns:1fr} /* No celular um cartão inteiro de 177px ficaria ilegível: aqui o canto aparece só do lado direito, que já diz que a fila continua. */ .car-trilho{--porvez:1;--canto:0;scroll-padding-left:0; -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)} .car-trilho > *{flex-basis:82%} .section{padding:54px 0} .section h2{font-size:26px} } /* ============================================================ TELAS DE ESTADO · 20/09/2026 ------------------------------------------------------------ Uma anatomia só para toda tela que interrompe a pessoa: página não encontrada, manutenção, acesso restrito, link expirado, erro inesperado, falha ao carregar. Elas nascem em momentos diferentes e, se cada uma nascer sozinha, divergem. Foi o que aconteceu com a de acesso restrito, montada como string dentro do staff-gate.js, com fonte do sistema, três cores escritas na mão e um cadeado em emoji. A ORDEM É SEMPRE A MESMA, e ela é a ordem em que a pessoa precisa das informações: marca (onde eu estou), título (o que aconteceu), uma ou duas linhas (o que isso significa), a chamada (o que eu faço agora) e, quando faz sentido, uma caixa com destinos. O ELEMENTO GRANDE ACIMA DO TÍTULO · 21/09/2026 Teve um ícone AO LADO do título e o Edu mandou tirar. Eu anotei aqui que ele "não explicava nada", e essa foi a minha leitura, não a dele: o que ele disse depois foi que estava horrível, e que o caminho era fazer ícones maiores e melhores. A diferença importa, porque a minha versão do motivo teria proibido o acerto. Então o ícone voltou, e voltou outro objeto: grande, ACIMA do título, no degrau --ic-tela. Nesse tamanho ele diz a natureza do acontecimento antes de qualquer leitura, que é o mesmo princípio que o ui-aviso.js já usava ao escolher um glifo por tipo de aviso. Pequeno e ao lado de uma frase que já diz tudo, ele de fato não servia para nada. O 404 É A ÚNICA EXCEÇÃO, e ela tem motivo. Em 21/09/2026 o Edu mandou uma busca de exemplos de página 404 para eu olhar. A convenção esmagadora ali é o NÚMERO como elemento visual; o segundo grupo usa personagem de marca, que a gente não tem e que brigaria com a régua de tom logo abaixo. O número é reconhecido sem interpretação, e é desenhado com a nossa própria fonte e a nossa cor, então não parece emprestado. Ele ocupa a mesma fatia e a mesma altura óptica do ícone das outras telas, então a anatomia continua idêntica. Ícone pequeno continua valendo onde ele diferencia uma linha da outra: dentro da caixa de destinos e dentro da chamada. A RÉGUA DO TOM, decidida em 21/09/2026: o humor diminui na mesma medida em que o incômodo aumenta. 404 .................. cabe leveza. A pessoa clicou em um link velho, não estava no meio de nada, e o prejuízo é zero. manutenção ........... não cabe. É a única tela em que a pessoa está sendo impedida de trabalhar, e em um produto de conformidade ela vai pensar "os meus dados estão bem?". Piada ali responde a pergunta errada. link expirado ........ não cabe, pelo mesmo motivo. acesso restrito ...... muito menos: ali a pessoa pode achar que fez algo errado, e graça em cima disso soa deboche. E nada de "Ops". É a interjeição mais gasta de página de erro no país, ocupa a linha mais visível da tela sem dizer nada e pede desculpa por algo que quase nunca é culpa de alguém. Personalidade aqui se faz com o que a frase diz, não com interjeição. NADA DE EXPRESSÃO QUE REBAIXA O LEITOR. Eu escrevi "em português de gente" no rótulo de um link do 404, e o Edu pegou em 21/09/2026. A intenção era dizer "sem juridiquês", mas a frase sugere que a pessoa não entenderia o português comum, e o produto inteiro existe para tratar quem tem empresa pequena como adulto. "Em linguagem simples" diz a mesma coisa sem a piscadela. O teste não pega isto: quem pega é quem escreve. O da aba fica sempre literal, mesmo quando o h1 tem graça: ele aparece no resultado de busca e na aba, longe da tela, e fora de contexto a graça vira ruído. O DESENHO NÃO É NOVO, e isso é de propósito. A chamada é o mesmo bloco que fecha cada artigo do blog (.legal-contato.lc-grade) e a caixa de destinos é a mesma do "Continue lendo" (.bc-lista). Aqui as regras são próprias porque o blog carrega o legal.css e estas telas carregam só o styles.css: mesmo desenho, sem arrastar 111 kB de folha para uma página de erro. Nada aqui inventa cor, tamanho ou fonte: tudo sai dos tokens. ============================================================ */ .estado{ min-height:100vh;display:flex;flex-direction:column;align-items:center; justify-content:center;text-align:center;padding:56px 24px; background:var(--fundo-pagina); } /* A MESMA ANATOMIA EM DOIS LUGARES DIFERENTES, e a diferença é ter ou não ter o site em volta. · 21/09/2026 O 404 e a manutenção são páginas DO SITE: respondem em lgpddetodos.com.br, e o Edu pegou que elas estavam despadronizadas das outras. Estavam mesmo. Das oito páginas na raiz do site, seis traziam o cabeçalho e o rodapé, e as duas sem eram exatamente estas. Agora elas vestem o esqueleto do site, e é o `testes/esqueleto-do-site.js` que não deixa a próxima nascer sem. As quatro telas que o `tela-estado.js` desenha continuam sem: elas acontecem DENTRO do app, onde cabeçalho de site não existe. Botar um ali seria o erro contrário, e é por isso que a diferença mora numa classe a mais e não em duas famílias separadas. O QUE MUDA COM O SITE EM VOLTA são duas coisas, e as duas são consequência direta de haver cabeçalho e rodapé: · a altura travada em 100vh sai. Ela existe para centralizar a tela do app, que é a página inteira. Com um cabeçalho de 90px e o rodapé embaixo, 100vh empurraria o rodapé para fora e criaria barra de rolagem numa página que cabia na tela. · a marca sai do meio do conteúdo. O cabeçalho já traz o logotipo, e repetir daria dois. A regra de 20/09 continua cumprida: toda tela de estado mostra a marca, e aqui ela está onde está em toda página do site. Nas telas do app o `.estado-marca` continua sendo a única. */ .estado-no-site{min-height:0;padding:64px 24px 72px} /* A MARCA SUBIU DE 52 PARA 64px em 21/09/2026, a pedido do Edu. Ela tinha sido dimensionada quando era o único elemento acima do título; numa tela que é quase toda vazia, 52px ficava tímido. No 404 e na manutenção esta regra não vale, porque lá a marca é a do cabeçalho do site, que tem 70px e é a mesma de todas as outras páginas. */ .estado-marca{display:block;margin-bottom:32px} .estado-marca img{display:block;height:var(--logo-tela);width:auto} /* O ELEMENTO GRANDE: um ícone nas sete telas, o número no 404. Sem recipiente, sem círculo atrás. Eu tentei um círculo de fundo claro e ele ficou com cara de botão desligado: o ícone ficava pequeno dentro de uma bolha grande, e a bolha chamava mais atenção que o desenho. Traço e cor da marca, sozinhos, leem melhor. O traço vem do `non-scaling-stroke` declarado lá em cima: sem ele, 1.8 neste tamanho renderiza 5,4px e o desenho engorda. */ .estado-ic{display:block;margin:0 auto 26px;color:var(--azul)} .estado-ic svg{width:var(--ic-tela);height:var(--ic-tela);display:block; fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round; /* 2 e não 1.8, e é o único lugar do produto que foge do 1.8. Com o traço lido em pixel de tela, 1,8px num desenho de 72px fica fino a ponto de parecer frágil; 2px devolve o mesmo peso ÓPTICO que 1.8 tem nos degraus pequenos. É correção de percepção, não inconsistência. */ stroke-width:2} /* O NÚMERO DO 404. Mesma fatia do ícone e mesma altura óptica, para a anatomia das oito telas continuar a mesma. Tabular porque os dois quatros precisam ter a mesma largura: com numeral proporcional o "404" fica torto no meio de uma tela centralizada. */ .estado-num{display:block;margin:0 auto 18px;font-size:96px;font-weight:800; letter-spacing:-.04em;line-height:1;color:var(--azul);font-variant-numeric:tabular-nums} .estado h1{font-size:var(--t-38);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--azul);margin:0 0 16px} /* A medida vale aqui também: sem o teto, a linha estica com a janela e a frase mais importante da tela vira a mais difícil de ler. */ .estado-lead{font-size:var(--t-17);line-height:1.6;color:var(--tinta-72);max-width:52ch;margin:0 0 18px} .estado-lead:last-of-type{margin-bottom:34px} /* A CHAMADA, igual à do fim dos artigos. Primeira linha: ícone, título e botão. Segunda linha: o subtexto inteiro, separado por um fio claro. O botão é branco com a letra da marca, e ele só funciona assim PORQUE está sobre o azul: o mesmo botão solto no cinza da página viraria um retângulo branco sem peso nenhum, que é justamente o defeito que o .btn-primary tem hoje no app. */ .estado-chamada{ background:var(--azul);color:var(--branco);border-radius:var(--radius); padding:22px 24px;max-width:720px;width:100%;text-align:left; display:grid;column-gap:18px;row-gap:14px;align-items:center; /* O TÍTULO FICA COM A COLUNA ELÁSTICA, E ISSO É O QUE O DEIXA EM UMA LINHA SÓ. No blog a coluna do título é max-content com teto de 26ch, porque lá o bloco tem 712px e trinta títulos diferentes passam por ele. Copiei o teto junto com o desenho e ele quebrou "Enquanto isso, o blog continua no ar" em duas linhas com espaço de sobra ao lado. Aqui o 1fr resolve sem número mágico: o botão fica com a largura que ele precisa, o título fica com todo o resto, e só quebra quando não couber de verdade. */ grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"ico tit bt" "txt txt txt"; } .estado-chamada-ic{ grid-area:ico;width:var(--cx-cartao);height:var(--cx-cartao);border-radius:var(--cx-raio);flex:none; display:flex;align-items:center;justify-content:center; background:var(--cx-fundo-azul);color:var(--branco); } .estado-chamada-ic svg{width:var(--ic-texto);height:var(--ic-texto);display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* Sem teto de largura: quem limita é a coluna. O text-wrap:balance só entra em cena quando o título realmente quebra, e aí distribui as palavras entre as linhas em vez de encher a primeira. */ .estado-chamada h2{grid-area:tit;margin:0;font-size:18px;line-height:1.32;color:var(--branco);text-wrap:balance} .estado-chamada-txt{grid-area:txt;margin:0;font-size:14.5px;line-height:1.55;color:var(--branco-95);border-top:1px solid var(--branco-12);padding-top:15px} .estado-chamada-bt{ grid-area:bt;justify-self:end;align-self:center; display:inline-flex;align-items:center;gap:9px; background:var(--branco);color:var(--azul);border:1.5px solid var(--branco); border-radius:var(--radius-sm);padding:12px 22px;font-weight:700;font-size:15px; text-decoration:none;line-height:1.3;text-align:left;text-wrap:balance; transition:background-color .15s ease; } .estado-chamada-bt:hover{background:var(--branco-95);color:var(--azul);text-decoration:none} .estado-chamada-bt svg{width:var(--ic-botao);height:var(--ic-botao);flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .estado-chamada-bt:focus-visible{outline:2px solid var(--branco);outline-offset:3px} /* Abaixo de 900px de janela não cabem ícone, título e botão na mesma linha: o botão desce para depois do subtexto, como no blog. */ @media (max-width:900px){ .estado-chamada{grid-template-columns:auto 1fr;grid-template-areas:"ico tit" "txt txt" "bt bt"} .estado-chamada-bt{justify-self:start} } /* A caixa de destinos, igual à do "Continue lendo": cartão com borda fina, ícone flutuando à esquerda e a borda acendendo no hover. */ .estado-mais{margin-top:44px;max-width:720px;width:100%} .estado-mais h2{font-size:var(--t-13);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-65);margin:0 0 16px} .estado-mais ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;text-align:left} .estado-mais a{ display:block;padding:13px 15px;border:1px solid var(--tinta-15); border-radius:var(--radius);background:var(--branco);text-decoration:none; font-size:15.5px;font-weight:600;line-height:1.35;color:var(--azul); transition:border-color .15s ease,background-color .15s ease; } .estado-mais a:hover{border-color:var(--azul);background:var(--azul-suave)} .estado-mais a:focus-visible{outline:2px solid var(--azul);outline-offset:2px} /* O ícone flutua para o texto de duas linhas alinhar pela coluna, e não pelo centro do cartão. Mesmo cuidado do .bc-ico, inclusive o clear. contido-por: .estado-mais a */ .estado-mais-ic{float:left;display:flex;align-items:center;height:18px;color:var(--tinta-65);margin:2px 10px 0 0;transition:color .15s ease} .estado-mais-ic svg{width:var(--ic-texto);height:var(--ic-texto);display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .estado-mais a:hover .estado-mais-ic{color:var(--azul)} .estado-mais a:after{content:"";display:block;clear:both} /* Ação solta, para as telas que não têm chamada: a de acesso restrito e a de falha ao confirmar o acesso. Ali não cabe convidar para nada, cabe uma porta só. O botão é o .btn .btn-cta do site, sem classe nova. */ /* A AÇÃO PRINCIPAL, COM ÍCONE. · 21/09/2026 Pedido do Edu, e ele cabe aqui por um motivo que não vale para todo botão do produto: nestas telas o botão é a ÚNICA coisa clicável da página, e o ícone diz o que vai acontecer antes da leitura do rótulo. Sair, recarregar e pedir um link novo são ações bem diferentes, e o desenho separa as três mais rápido que a frase. O 404 e a manutenção ficam de fora: lá a ação mora dentro da chamada azul, que já tem o seu próprio ícone e a sua própria seta. inline-flex fica AQUI e não no .btn: o botão do produto inteiro é inline-block, e trocar isso mexeria em toda tela do site por causa de seis. */ .estado-acao{margin:0} .estado-acao .btn{display:inline-flex;align-items:center;gap:10px} .estado-acao .btn svg{width:var(--ic-botao);height:var(--ic-botao);flex:none; fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* A SAÍDA SECUNDÁRIA PRECISAVA DE AR, e ela não tinha NENHUMA regra. Achado em 21/09/2026: o tela-estado.js desenhava `.estado-2a` desde que nasceu e o CSS nunca teve essa classe. O parágrafo caía na regra geral de `p`, que zera a margem de cima, e o `.estado-acao` logo acima zera a de baixo. Resultado: zero pixel entre o botão e o link, que foi exatamente o que o Edu viu na tela. Vinte e dois pixels, e não uma folga qualquer: é o suficiente para o par ler como duas escolhas e não como um bloco só, sem afastar tanto a ponto de a segunda saída parecer rodapé. O `.estado-rodape` logo abaixo continua a 36px, então a hierarquia fica em três níveis: ação, saída, rodapé. */ .estado-2a{margin:22px 0 0;font-size:var(--t-14)} .estado-2a a{color:var(--tinta-65);text-decoration:underline} .estado-2a a:hover{color:var(--azul)} .estado-rodape{margin-top:36px;font-size:var(--t-13);color:var(--tinta-65)} .estado-rodape a{color:var(--tinta-65);text-decoration:underline} @media (max-width:560px){ .estado{padding:40px 20px} .estado h1{font-size:26px} .estado-marca{margin-bottom:32px} .estado-chamada{padding:20px} }