/* ═══════════════════════════════════════════════════════════════════════ KAia · SISTEMA DE DESIGN ─────────────────────────────────────────────────────────────────────── Uma folha só, carregada por todas as páginas. Define cor, tipografia, espaçamento, sombra, botão, card, modal, formulário, tabela e animação. Se algo precisa mudar de aparência no site inteiro, muda aqui. Ordem do arquivo: 1. Tokens 6. Formulários 2. Base + mobile 7. Tabelas 3. Tipografia 8. Modais e toasts 4. Botões 9. Animações e revelação 5. Cards 10. Botão flutuante do WhatsApp 11. Acessibilidade e impressão ═══════════════════════════════════════════════════════════════════════ */ /* ─── 1 · TOKENS ─────────────────────────────────────────────────────── */ :root{ /* Cor — extraída das ilustrações da Karina */ --k-areia:#FAF7F0; --k-areia-2:#F3EDE1; --k-papel:#FFFDF9; --k-petroleo:#3A5A85; --k-petroleo-fundo:#2E4767; --k-camelo:#756648; --k-ambar:#D9A24E; /* camelo era #A89268 (2,8:1 sobre fundo claro) — escurecido pra 5,2:1, 11/08. Corrigido aqui em 21/08: index.html e apresentacao.html já tinham o valor certo numa cópia local, mas esta folha (a fonte real que termos.html/admin.html/app usam) tinha ficado pra trás. */ --k-cv-cor:#F0B93E; /* achado real por ela (24/08): a "Conta ao vivo" (calculadora) tem fundo --k-petroleo FIXO (nunca troca com o tema do site), mas usava --k-camelo como cor de destaque no valor arrastado — e --k-camelo é escurecido de propósito no tema claro pra contraste de TEXTO sobre fundo CLARO, um contexto que não existe aqui. Resultado: no tema claro, o traço/bolinha do arrasto ficava um marrom escuro quase invisível sobre o azul. Token próprio, um valor só (não troca por tema, porque o fundo do cartão também não troca), amarelo vivo de propósito. */ --k-terracota:#D97A2B; --k-terracota-escuro:#BC6520; --k-tinta:#2A2724; --k-tinta-suave:#6E665D; --k-tinta-fraca:#9C9287; --k-linha:#948F84; --k-linha-forte:#D4C8B0; /* linha era #E4DCCC (1,3:1) — mesmo conserto de contraste do camelo acima, mesma data de origem (11/08), mesmo atraso até chegar aqui (21/08). */ --k-ok:#2E7D32; --k-alerta:#E65100; --k-erro:#C62828; --k-wpp:#25D366; --k-wpp-escuro:#128C7E; /* Espaçamento — escala de 4px, sem números soltos pelo CSS */ --k-e1:4px; --k-e2:8px; --k-e3:12px; --k-e4:16px; --k-e5:24px; --k-e6:32px; --k-e7:48px; --k-e8:64px; --k-e9:96px; /* Raio e sombra */ --k-raio:4px; --k-raio-md:10px; --k-raio-lg:18px; --k-raio-full:999px; --k-sombra-1:0 1px 2px rgba(42,39,36,.05); --k-sombra-2:0 4px 16px rgba(42,39,36,.08); --k-sombra-3:0 14px 44px rgba(42,39,36,.13); --k-sombra-foco:0 0 0 3px rgba(58,90,133,.28); /* Tipografia */ --k-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --k-sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; /* Movimento — uma curva só no site inteiro */ --k-rapido:.16s cubic-bezier(.4,0,.2,1); --k-medio:.28s cubic-bezier(.4,0,.2,1); --k-lento:.55s cubic-bezier(.16,1,.3,1); --k-mola:.5s cubic-bezier(.34,1.56,.64,1); /* Camadas — nunca mais z-index chutado */ --k-z-topo:60; --k-z-fab:70; --k-z-modal:90; --k-z-toast:100; /* Área segura do iPhone (notch e barra inferior) */ --k-safe-t:env(safe-area-inset-top,0px); --k-safe-b:env(safe-area-inset-bottom,0px); --k-safe-l:env(safe-area-inset-left,0px); --k-safe-r:env(safe-area-inset-right,0px); } /* ─── TEMA ESCURO DA VITRINE (21/08) ──────────────────────────────────── Só index.html e apresentacao.html aplicam a classe `.k-escuro` no `` — nunca app/index.html, termos.html ou admin.html. O app tem seu próprio sistema de tema (classe `.tema-escuro`, tokens `--w`/`--card`/`--t1..4` só dele, nada a ver com os `--k-*` daqui), então os dois sistemas nunca se cruzam mesmo dividindo esta folha. Mesma chave de localStorage do app (`kaia-tema`), de propósito: quem troca de tema na vitrine e depois assina já abre o app no tema que escolheu, sem configurar de novo. Resolução de "sem preferência salva, segue o sistema operacional" fica no JS de cada página (só decide UMA classe, igual ao app já faz) — aqui é só o resultado. */ body.k-escuro{ color-scheme:dark; --k-areia:#211E1A; --k-areia-2:#2B2621; --k-papel:#322C25; --k-petroleo:#8FB9EC; --k-petroleo-fundo:#4A6FA0; --k-camelo:#D7B37E; --k-ambar:#E8B863; --k-terracota:#E2914A; --k-terracota-escuro:#C97025; --k-tinta:#F2ECE0; --k-tinta-suave:#C9BFAF; --k-tinta-fraca:#A79E8E; --k-linha:#4A433A; --k-linha-forte:#5E5548; --k-ok:#66BB6A; --k-alerta:#FFA452; --k-erro:#EF5350; } /* O selo de vagas (index.html) tem cor de texto fixa (pensada pra ler sobre o fundo claro translúcido dele) — não é var(--k-*), então não troca sozinho com os tokens acima. */ body.k-escuro .k-selo-vagas{color:#F0B87A} /* ─── REGRA DE GRADIENTE · redesign 2026 ────────────────────────────── Nenhum `background: linear-gradient(...)` cobrindo um bloco inteiro — é o efeito que mais lê como "gerado por IA". Gradiente só entra em dois lugares: 1. como `border-top` de 3px (linha de destaque no topo de um card ou hero — use `.k-acento-topo` abaixo, ou a variante de cor própria de cada ferramenta no app); 2. no botão de CTA principal (ex.: `.k-btn-primario`). Fora disso, bloco inteiro é tinta chapada (um token de superfície: `--k-papel`, `--k-areia`, `--k-areia-2`) com uma borda fina — nunca um degradê de canto a canto. ── */ .k-acento-topo{border-top:3px solid var(--k-petroleo)} .k-acento-topo-ambar{border-top:3px solid var(--k-ambar)} .k-acento-topo-terracota{border-top:3px solid var(--k-terracota)} .k-acento-topo-camelo{border-top:3px solid var(--k-camelo)} /* ─── 2 · BASE E COMPORTAMENTO MOBILE ────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; /* Safari não aumenta fonte no giro */ text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px; /* âncora não fica sob o topo fixo */ } body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; /* nada empurra a página de lado */ overscroll-behavior-y:none; /* sem "puxar pra atualizar" acidental */ text-rendering:optimizeLegibility; } /* Toque com cara de app: sem flash azul, sem atraso de 300ms */ a,button,[role="button"],input,select,textarea,.k-toque{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; } img,svg,video{max-width:100%;height:auto;display:block} img{content-visibility:auto} /* o navegador pula o que está fora da tela */ /* Rolagem horizontal contida — tabela larga rola dentro de si, não na página */ .k-rola-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; overscroll-behavior-x:contain; } .k-rola-x::-webkit-scrollbar{height:4px} .k-rola-x::-webkit-scrollbar-thumb{background:var(--k-linha-forte);border-radius:var(--k-raio-full)} /* Unidade de altura que não pula quando a barra do Safari some */ .k-tela-cheia{min-height:100vh;min-height:100svh} /* ─── 3 · TIPOGRAFIA ─────────────────────────────────────────────────── */ .k-h1,.k-h2,.k-h3{font-family:var(--k-serif);font-weight:400;line-height:1.12;letter-spacing:-.01em} .k-h1{font-size:clamp(2.3rem,6vw,4.4rem)} .k-h2{font-size:clamp(1.8rem,4.4vw,3.1rem)} .k-h3{font-size:clamp(1.25rem,2.6vw,1.6rem)} .k-olho{font-family:var(--k-sans);font-size:.72rem;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:var(--k-camelo)} .k-lead{font-size:clamp(1.02rem,2.2vw,1.18rem);color:var(--k-tinta-suave);font-weight:300;line-height:1.7} .k-mini{font-size:.82rem;color:var(--k-tinta-fraca)} /* Quebra de linha honesta em telas estreitas — nada de palavra estourando */ .k-h1,.k-h2,.k-h3,p{overflow-wrap:break-word;hyphens:auto} /* ─── 4 · BOTÕES ─────────────────────────────────────────────────────── */ .k-btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--k-e2); font-family:var(--k-sans);font-size:.95rem;font-weight:500;letter-spacing:.03em; padding:15px 30px;border-radius:var(--k-raio);border:1px solid transparent; min-height:48px; /* alvo de toque confortável (WCAG 2.5.5) */ text-decoration:none;cursor:pointer;position:relative;overflow:hidden; transition:background var(--k-rapido),color var(--k-rapido), border-color var(--k-rapido),transform var(--k-rapido), box-shadow var(--k-medio); will-change:transform; } .k-btn:active{transform:scale(.975)} /* resposta tátil imediata, como app nativo */ .k-btn:focus-visible{outline:none;box-shadow:var(--k-sombra-foco)} .k-btn[disabled],.k-btn[aria-disabled="true"]{opacity:.5;pointer-events:none} .k-btn-primario{background:var(--k-terracota);color:#fff} .k-btn-primario:hover{background:var(--k-terracota-escuro);box-shadow:var(--k-sombra-2)} .k-btn-fantasma{background:transparent;color:var(--k-petroleo);border-color:var(--k-petroleo)} .k-btn-fantasma:hover{background:var(--k-petroleo);color:var(--k-areia)} .k-btn-suave{background:var(--k-papel);color:var(--k-tinta);border-color:var(--k-linha)} .k-btn-suave:hover{border-color:var(--k-camelo)} .k-btn-wpp{background:var(--k-wpp);color:#fff} .k-btn-wpp:hover{background:var(--k-wpp-escuro)} .k-btn-g{padding:18px 40px;font-size:1rem;min-height:56px} .k-btn-bloco{width:100%} /* Brilho que atravessa o botão no hover — sutil, só em ponteiro fino */ @media (hover:hover) and (pointer:fine){ .k-btn-primario::after{ content:'';position:absolute;inset:0; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%); transform:translateX(-120%); } .k-btn-primario:hover::after{transform:translateX(120%);transition:transform .7s ease} } /* Botão carregando: o texto some, o anel gira, a largura não pula */ .k-btn.k-carregando{color:transparent!important;pointer-events:none} .k-btn.k-carregando::before{ content:'';position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px; border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%; animation:k-girar .7s linear infinite; } .k-btn-fantasma.k-carregando::before,.k-btn-suave.k-carregando::before{ border-color:rgba(58,90,133,.3);border-top-color:var(--k-petroleo); } @keyframes k-girar{to{transform:rotate(360deg)}} /* ─── 5 · CARDS ──────────────────────────────────────────────────────── */ .k-card{ background:var(--k-papel);border:1px solid var(--k-linha); border-radius:var(--k-raio-md);padding:var(--k-e5); transition:transform var(--k-medio),box-shadow var(--k-medio),border-color var(--k-medio); } .k-card-clicavel{cursor:pointer} @media (hover:hover){ .k-card-clicavel:hover{transform:translateY(-3px);box-shadow:var(--k-sombra-3);border-color:var(--k-linha-forte)} } .k-card-clicavel:active{transform:translateY(0) scale(.995)} .k-card-destaque{border-color:var(--k-camelo);box-shadow:var(--k-sombra-2)} /* Esqueleto de carregamento — a tela nunca fica em branco */ .k-esqueleto{ background:linear-gradient(90deg,var(--k-areia-2) 25%,var(--k-papel) 37%,var(--k-areia-2) 63%); background-size:400% 100%;animation:k-brilho 1.3s ease-in-out infinite; border-radius:var(--k-raio);color:transparent!important;user-select:none; } @keyframes k-brilho{0%{background-position:100% 50%}100%{background-position:0 50%}} /* ─── 6 · FORMULÁRIOS ────────────────────────────────────────────────── */ .k-campo{display:block;margin-bottom:var(--k-e4)} .k-rotulo{display:block;font-size:.8rem;font-weight:500;letter-spacing:.06em; text-transform:uppercase;color:var(--k-tinta-suave);margin-bottom:var(--k-e2)} .k-input,.k-select,.k-textarea{ width:100%; font-family:var(--k-sans); font-size:16px; /* < 16px faz o iOS dar zoom no foco */ font-weight:300;line-height:1.5;color:var(--k-tinta); background:var(--k-papel);border:1px solid var(--k-linha); border-radius:var(--k-raio);padding:14px 16px;min-height:48px; transition:border-color var(--k-rapido),box-shadow var(--k-rapido),background var(--k-rapido); -webkit-appearance:none;appearance:none; } .k-textarea{min-height:140px;resize:vertical} .k-input:focus,.k-select:focus,.k-textarea:focus{ outline:none;border-color:var(--k-petroleo);box-shadow:var(--k-sombra-foco);background:#fff; } .k-input::placeholder,.k-textarea::placeholder{color:var(--k-tinta-fraca);opacity:1} .k-input[aria-invalid="true"]{border-color:var(--k-erro);box-shadow:0 0 0 3px rgba(198,40,40,.15)} .k-ajuda{display:block;font-size:.8rem;color:var(--k-tinta-fraca);margin-top:6px} .k-erro-campo{display:block;font-size:.82rem;color:var(--k-erro);margin-top:6px; animation:k-tremer .3s ease} @keyframes k-tremer{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}} .k-select{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236E665D' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;background-size:12px; padding-right:42px; } /* Campo de senha com o olhinho — cadastro na vitrine e qualquer outro formulário fora do app (que tem a mesma peça no seu próprio CSS). */ .campo-senha{position:relative} .campo-senha .k-input{padding-right:44px!important} .olho-senha{ position:absolute;right:4px;top:50%;transform:translateY(-50%); width:44px;height:44px;border:none;background:transparent;cursor:pointer; display:flex;align-items:center;justify-content:center; color:var(--k-tinta-fraca);font-size:16px;border-radius:50%;padding:0; transition:color var(--k-rapido),background var(--k-rapido); } .olho-senha:hover{color:var(--k-tinta-suave);background:rgba(190,132,94,.1)} .olho-senha:focus-visible{outline:2px solid var(--k-petroleo);outline-offset:1px} /* Teclado virtual: quando ele sobe, o conteúdo focado continua visível */ .k-form-mobile{padding-bottom:calc(var(--k-e6) + var(--k-safe-b))} /* ─── 7 · TABELAS ────────────────────────────────────────────────────── */ .k-tabela{width:100%;border-collapse:collapse;font-size:.92rem} .k-tabela th,.k-tabela td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--k-linha)} .k-tabela th{ font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--k-tinta-suave);background:var(--k-areia-2); position:sticky;top:0;z-index:2; /* cabeçalho fica visível ao rolar */ } .k-tabela tbody tr{transition:background var(--k-rapido)} .k-tabela tbody tr:hover{background:var(--k-areia)} .k-tabela td.k-num{text-align:right;font-variant-numeric:tabular-nums} /* Em telas estreitas a tabela vira lista, sem cortar informação. Use data-rotulo="Nome da coluna" em cada . */ @media (max-width:720px){ .k-tabela-responsiva thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .k-tabela-responsiva tr{ display:block;margin-bottom:var(--k-e3);border:1px solid var(--k-linha); border-radius:var(--k-raio-md);padding:var(--k-e2) var(--k-e3);background:var(--k-papel); } .k-tabela-responsiva td{ display:flex;justify-content:space-between;gap:var(--k-e4); border:none;padding:8px 0;text-align:right; } .k-tabela-responsiva td::before{ content:attr(data-rotulo);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--k-tinta-fraca);text-align:left;flex-shrink:0; } } /* Selos de estado, usados no painel e no app */ .k-selo{ display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--k-raio-full); font-size:.72rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap; } .k-selo-ok{background:rgba(46,125,50,.1);color:var(--k-ok)} .k-selo-alerta{background:rgba(230,81,0,.1);color:var(--k-alerta)} .k-selo-erro{background:rgba(198,40,40,.1);color:var(--k-erro)} .k-selo-neutro{background:var(--k-areia-2);color:var(--k-tinta-suave)} /* ─── 8 · MODAIS E TOASTS ────────────────────────────────────────────── */ .k-modal-fundo{ position:fixed;inset:0;z-index:var(--k-z-modal); background:rgba(42,39,36,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); display:flex;align-items:center;justify-content:center;padding:var(--k-e4); opacity:0;pointer-events:none;transition:opacity var(--k-medio); } .k-modal-fundo.k-aberto{opacity:1;pointer-events:auto} /* Ver o mesmo achado em .topo (assets/kaia-home.css): quem pede vidro reduzido recebe o escurecido sólido, sem desfoque. */ @media (prefers-reduced-transparency:reduce){ .k-modal-fundo{background:rgba(42,39,36,.86);backdrop-filter:none;-webkit-backdrop-filter:none} } .k-modal{ background:var(--k-papel);border-radius:var(--k-raio-lg); width:100%;max-width:480px;max-height:88vh;max-height:88svh;overflow-y:auto; padding:var(--k-e6);box-shadow:var(--k-sombra-3); transform:translateY(18px) scale(.97);opacity:0; transition:transform var(--k-mola),opacity var(--k-medio); -webkit-overflow-scrolling:touch;overscroll-behavior:contain; } .k-modal-fundo.k-aberto .k-modal{transform:translateY(0) scale(1);opacity:1} /* No celular o modal sobe de baixo, como folha de app nativo */ @media (max-width:620px){ .k-modal-fundo{align-items:flex-end;padding:0} .k-modal{ max-width:100%;border-radius:var(--k-raio-lg) var(--k-raio-lg) 0 0; padding:var(--k-e5) var(--k-e5) calc(var(--k-e5) + var(--k-safe-b)); transform:translateY(100%);max-height:92svh; } .k-modal-fundo.k-aberto .k-modal{transform:translateY(0)} /* Puxador visual, para a pessoa entender que dá pra arrastar/fechar */ .k-modal::before{ content:'';display:block;width:38px;height:4px;border-radius:var(--k-raio-full); background:var(--k-linha-forte);margin:0 auto var(--k-e4); } } .k-toasts{ position:fixed;left:50%;bottom:calc(var(--k-e5) + var(--k-safe-b)); transform:translateX(-50%);z-index:var(--k-z-toast); display:flex;flex-direction:column;gap:var(--k-e2);align-items:center; pointer-events:none;width:calc(100% - var(--k-e6));max-width:420px; } .k-toast{ background:var(--k-tinta);color:var(--k-areia); padding:13px 20px;border-radius:var(--k-raio-full); font-size:.9rem;box-shadow:var(--k-sombra-3); display:flex;align-items:center;gap:var(--k-e2); animation:k-toast-entra var(--k-mola);max-width:100%; } .k-toast-ok{background:var(--k-ok)} .k-toast-erro{background:var(--k-erro)} .k-toast.k-saindo{animation:k-toast-sai var(--k-medio) forwards} @keyframes k-toast-entra{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}} @keyframes k-toast-sai{to{opacity:0;transform:translateY(12px) scale(.96)}} /* ─── 9 · ANIMAÇÕES E REVELAÇÃO ──────────────────────────────────────── */ /* Toda a camada de movimento do projeto mora aqui, e não em cada página. Duas consequências que valem o esforço: · uma página nova ganha os efeitos sem escrever uma linha — o `kaia-core.js` marca os blocos sozinho (ver `KAia.ui.efeitos`); · quem pede menos movimento no sistema recebe menos movimento em tudo de uma vez, porque a regra de `prefers-reduced-motion` no fim deste arquivo alcança todos eles. A régua estética é a mesma da marca: nada pisca, nada salta, nada compete com a leitura. Movimento aqui é para guiar o olho, não para chamar atenção para si. */ /* Elementos com .k-revela entram quando chegam à tela (ver kaia-core.js). Começam visíveis: se o JS falhar, o conteúdo aparece do mesmo jeito. */ html.k-js .k-revela{opacity:0;transform:translateY(22px)} html.k-js .k-revela.k-visivel{ opacity:1;transform:none; transition:opacity var(--k-lento),transform var(--k-lento); } html.k-js .k-revela-1{transition-delay:.08s} html.k-js .k-revela-2{transition-delay:.16s} html.k-js .k-revela-3{transition-delay:.24s} html.k-js .k-revela-4{transition-delay:.32s} .k-fade-in{animation:k-fade var(--k-lento) both} @keyframes k-fade{from{opacity:0}to{opacity:1}} .k-sobe{animation:k-sobe var(--k-lento) both} @keyframes k-sobe{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} /* Número que "conta" quando aparece (contador de créditos) */ .k-num-anima{font-variant-numeric:tabular-nums;transition:color var(--k-medio)} .k-num-anima.k-baixou{animation:k-pulso-num .5s ease} @keyframes k-pulso-num{ 0%{transform:scale(1)}40%{transform:scale(1.18);color:var(--k-terracota)}100%{transform:scale(1)} } /* Transição entre abas/telas do app */ .k-troca{animation:k-troca var(--k-medio) both} @keyframes k-troca{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* Barra de progresso fina no topo, durante geração de conteúdo */ .k-progresso-topo{ position:fixed;top:0;left:0;height:2px;z-index:var(--k-z-toast); background:linear-gradient(90deg,var(--k-ambar),var(--k-terracota)); width:0;opacity:0;transition:width .3s ease,opacity var(--k-medio); } .k-progresso-topo.k-ativo{opacity:1} /* ─── 10 · BOTÃO FLUTUANTE DO WHATSAPP ───────────────────────────────── */ .k-wpp-fab{ position:fixed;z-index:var(--k-z-fab); right:calc(var(--k-e5) + var(--k-safe-r)); bottom:calc(var(--k-e5) + var(--k-safe-b)); width:60px;height:60px;border-radius:50%; background:var(--k-wpp);color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 26px rgba(37,211,102,.42); text-decoration:none;border:none;cursor:pointer; transition:transform var(--k-mola),box-shadow var(--k-medio),opacity var(--k-medio); animation:k-fab-entra .6s cubic-bezier(.34,1.56,.64,1) both; } .k-wpp-fab svg{width:31px;height:31px;fill:currentColor;pointer-events:none} @media (hover:hover){ .k-wpp-fab:hover{transform:scale(1.08);box-shadow:0 12px 34px rgba(37,211,102,.55)} } .k-wpp-fab:active{transform:scale(.94)} .k-wpp-fab:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(37,211,102,.4)} @keyframes k-fab-entra{from{opacity:0;transform:scale(.4) translateY(20px)}to{opacity:1;transform:none}} /* Pulso: dois anéis saindo do botão, em ritmo de respiração */ .k-wpp-fab::before,.k-wpp-fab::after{ content:'';position:absolute;inset:0;border-radius:50%; background:var(--k-wpp);z-index:-1; animation:k-pulso 2.6s cubic-bezier(.4,0,.2,1) infinite; } .k-wpp-fab::after{animation-delay:1.3s} @keyframes k-pulso{ 0%{transform:scale(1);opacity:.55} 70%{transform:scale(1.85);opacity:0} 100%{transform:scale(1.85);opacity:0} } /* O pulso para quando o cursor chega — para não competir com o clique */ @media (hover:hover){ .k-wpp-fab:hover::before,.k-wpp-fab:hover::after{animation-play-state:paused;opacity:0} } /* Balão que aparece uma vez, convidando a conversa */ .k-wpp-balao{ position:fixed;z-index:var(--k-z-fab); right:calc(var(--k-e5) + var(--k-safe-r) + 74px); bottom:calc(var(--k-e5) + var(--k-safe-b) + 12px); background:var(--k-papel);color:var(--k-tinta); border:1px solid var(--k-linha);border-radius:var(--k-raio-lg); padding:12px 16px;font-size:.86rem;line-height:1.4; box-shadow:var(--k-sombra-3);max-width:238px; opacity:0;transform:translateX(12px) scale(.94);pointer-events:none; transition:opacity var(--k-medio),transform var(--k-mola); } .k-wpp-balao.k-aberto{opacity:1;transform:none;pointer-events:auto} .k-wpp-balao strong{display:block;font-weight:600;margin-bottom:2px} .k-wpp-balao small{display:block;color:var(--k-tinta-fraca);font-size:.76rem;margin-top:4px} .k-wpp-balao-x{ position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%; background:var(--k-tinta);color:#fff;border:none;cursor:pointer; display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1; } @media (max-width:520px){ .k-wpp-fab{width:54px;height:54px;right:calc(16px + var(--k-safe-r));bottom:calc(16px + var(--k-safe-b))} .k-wpp-fab svg{width:28px;height:28px} .k-wpp-balao{right:calc(16px + var(--k-safe-r));bottom:calc(80px + var(--k-safe-b));max-width:calc(100vw - 32px)} } /* Dentro do app assinado (data-wpp-contexto="app"), o botão vira ícone estático e discreto — sem os anéis de pulso (eram convite de captação, fora de propósito pra quem já assina) e menor, pra não competir com a tela de trabalho. Continua clicável e visível, só parou de chamar atenção sozinho. */ body[data-wpp-contexto="app"] .k-wpp-fab{ width:44px;height:44px; box-shadow:0 2px 10px rgba(37,211,102,.28); opacity:.82;animation:none; } body[data-wpp-contexto="app"] .k-wpp-fab svg{width:22px;height:22px} @media (hover:hover){ body[data-wpp-contexto="app"] .k-wpp-fab:hover{opacity:1;transform:none;box-shadow:0 4px 14px rgba(37,211,102,.38)} } body[data-wpp-contexto="app"] .k-wpp-fab::before, body[data-wpp-contexto="app"] .k-wpp-fab::after{display:none} /* ─── 11 · ACESSIBILIDADE, PROTEÇÃO E IMPRESSÃO ──────────────────────── */ /* Pular para o conteúdo — primeiro Tab da página */ .k-pular{ position:absolute;left:-9999px;top:0;z-index:var(--k-z-toast); background:var(--k-petroleo);color:#fff;padding:12px 20px;border-radius:0 0 var(--k-raio) 0; } .k-pular:focus{left:0} /* Só para leitor de tela */ .k-so-leitor{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* Foco visível e consistente em tudo que recebe teclado. Os componentes que já têm anel próprio (.k-input, .k-btn) ficam de fora: dois anéis somados deixam a tela pesada e confusa. */ a:focus-visible, button:not(.k-btn):focus-visible, input:not(.k-input):focus-visible, select:not(.k-select):focus-visible, textarea:not(.k-textarea):focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--k-petroleo);outline-offset:2px; } /* Quem pediu menos movimento, recebe menos movimento */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } html.k-js .k-revela{opacity:1;transform:none} } /* ─── 9b · VOCABULÁRIO DE EFEITOS ───────────────────────────────────── Cada classe faz UMA coisa. O núcleo aplica as combinações; escrevê-las à mão numa página continua valendo. */ /* Entradas. Todas partem do estado final, para a página funcionar sem JS. */ html.k-js .k-ef-sobe {opacity:0;transform:translateY(26px)} html.k-js .k-ef-desce {opacity:0;transform:translateY(-18px)} html.k-js .k-ef-esq {opacity:0;transform:translateX(-26px)} html.k-js .k-ef-dir {opacity:0;transform:translateX(26px)} html.k-js .k-ef-cresce {opacity:0;transform:scale(.94)} html.k-js .k-ef-clareia{opacity:0} html.k-js [class*="k-ef-"].k-visivel{ opacity:1;transform:none; transition:opacity .78s cubic-bezier(.22,.68,.32,1), transform .78s cubic-bezier(.22,.68,.32,1); } /* Escada: irmãos entram em sequência, e não todos de uma vez. O atraso é pequeno de propósito — acima de ~90ms a página parece lenta. */ html.k-js [style*="--k-passo"].k-visivel{transition-delay:calc(var(--k-passo) * 70ms)} /* Cartão que responde ao ponteiro. Só onde existe ponteiro: no celular `:hover` fica grudado depois do toque e o cartão volta torto. */ @media (hover:hover) and (pointer:fine){ .k-ef-flutua{transition:transform .32s cubic-bezier(.22,.68,.32,1), box-shadow .32s ease} .k-ef-flutua:hover{transform:translateY(-5px); box-shadow:0 18px 40px rgba(42,39,36,.13)} /* Varredura de luz no botão principal, no sentido da leitura. */ .k-ef-luz{position:relative;overflow:hidden;isolation:isolate} .k-ef-luz::after{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(105deg,transparent 38%, rgba(255,255,255,.28) 50%,transparent 62%); transform:translateX(-120%); } .k-ef-luz:hover::after{transform:translateX(120%);transition:transform .72s ease} /* Título que ganha um traço, desenhado da esquerda para a direita. */ .k-ef-traco{position:relative;display:inline-block} .k-ef-traco::after{ content:'';position:absolute;left:0;bottom:-6px;height:2px;width:100%; background:var(--k-camelo);transform:scaleX(0);transform-origin:left; transition:transform .6s cubic-bezier(.22,.68,.32,1); } .k-ef-traco.k-visivel::after{transform:scaleX(1)} } /* Fundo que respira devagar. Serve para faixa de destaque e capa — 16 segundos é lento o bastante para ninguém "ver" acontecendo. */ .k-ef-respira{ background-size:200% 200%; animation:k-respira 16s ease-in-out infinite; } @keyframes k-respira{ 0%,100%{background-position:0% 50%} 50% {background-position:100% 50%} } /* ─── O selo de escassez ────────────────────────────────────────────── Precisa ser visto sem gritar. Três camadas somadas, todas na paleta: 1. o ponto que pulsa, como um sinal de "ao vivo"; 2. um halo que abre e some, dando volume ao ponto; 3. uma varredura de luz âmbar a cada 6 segundos, que faz o olho voltar sem o selo estar em movimento o tempo todo. Movimento contínuo em elemento pequeno vira ruído e a pessoa aprende a ignorar. Movimento espaçado é o que continua funcionando na décima visita. */ .k-selo-vagas{ position:relative;display:inline-flex;align-items:center;gap:10px; padding:8px 18px 8px 14px;border-radius:999px;overflow:hidden;isolation:isolate; font-size:.76rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase; color:#A2521A; background:linear-gradient(100deg,rgba(217,122,43,.10),rgba(168,146,104,.13),rgba(217,122,43,.10)); background-size:220% 100%; border:1px solid rgba(217,122,43,.34); box-shadow:0 2px 14px rgba(217,122,43,.13); animation:k-selo-respira 5.5s ease-in-out infinite; } /* O ponto e o halo. */ .k-selo-vagas::before{ content:'';width:8px;height:8px;border-radius:50%;flex:none; background:var(--k-terracota); box-shadow:0 0 0 0 rgba(217,122,43,.55); animation:k-selo-ponto 2.4s ease-in-out infinite, k-selo-halo 2.4s ease-out infinite; } /* A varredura, espaçada. */ .k-selo-vagas::after{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%); transform:translateX(-130%); animation:k-selo-brilho 6s ease-in-out infinite; } @keyframes k-selo-ponto{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.78)}} @keyframes k-selo-halo{ 0% {box-shadow:0 0 0 0 rgba(217,122,43,.5)} 70% {box-shadow:0 0 0 9px rgba(217,122,43,0)} 100%{box-shadow:0 0 0 0 rgba(217,122,43,0)} } @keyframes k-selo-brilho{ 0%,72%{transform:translateX(-130%)} 88% {transform:translateX(130%)} 100% {transform:translateX(130%)} } @keyframes k-selo-respira{ 0%,100%{background-position:0% 50%; box-shadow:0 2px 14px rgba(217,122,43,.13)} 50% {background-position:100% 50%; box-shadow:0 3px 20px rgba(217,122,43,.22)} } /* Mais contraste para quem precisa */ @media (prefers-contrast:more){ :root{--k-tinta-suave:#4A443D;--k-tinta-fraca:#5F584F;--k-linha:#C9BFA9} } /* Proteção de conteúdo — ligada por kaia-core.js só onde faz sentido. Campos de digitação continuam selecionáveis: proteger não é atrapalhar. */ .k-protegido{ -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; -webkit-touch-callout:none; } .k-protegido input,.k-protegido textarea,.k-protegido [contenteditable], .k-protegido .k-selecionavel{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default} .k-protegido img{-webkit-user-drag:none;user-drag:none;pointer-events:none} /* Marca d'água com o nome de quem está logado — o texto sai daqui identificado */ .k-marca-dagua{position:relative} .k-marca-dagua::after{ content:attr(data-marca); position:absolute;inset:0;pointer-events:none; display:flex;align-items:center;justify-content:center; font-family:var(--k-sans);font-size:clamp(.8rem,2.4vw,1.15rem);letter-spacing:.2em; color:rgba(42,39,36,.055);transform:rotate(-24deg); white-space:pre-wrap;text-align:center;line-height:3.4; } /* Impressão: sai limpo, com a marca d'água legível e sem elementos de tela */ @media print{ .k-wpp-fab,.k-wpp-balao,.k-toasts,.k-topo,.k-nao-imprime{display:none!important} body{background:#fff;color:#000;font-size:11pt} .k-card{break-inside:avoid;border:1px solid #ccc} a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#666} .k-marca-dagua::after{color:rgba(0,0,0,.18)} @page{margin:1.5cm} } /* Instalado como app (PWA): sem barra do navegador, respeita o notch */ @media (display-mode:standalone){ body{padding-top:var(--k-safe-t)} .k-so-navegador{display:none!important} } /* Robustez visual do redesign — entrada com profundidade ao trocar de aba ou renderizar um resultado novo, e uma régua só de hover/foco em vez de cada tela inventar a sua. Lista de seletores estendida (item 1 do checklist de redesign) para cobrir todo card/item de lista dinâmico do app, não só os 5 do guia original — banco de estruturas (.escard), MAPE (.pc), Ká Recicla (.rc-fcard/.rc-scard), Threads (.tcard/.tcard2), TikTok (.tk-out-card), Ideias (.gc). A vitrine pública usa `.card` também, mas com seu próprio sistema de revelação por scroll (`.k-revela`, mais abaixo neste arquivo) — de propósito não entra aqui para não competir com ele. */ .panel.on{animation:kaia-entra .22s ease both} @keyframes kaia-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .stp,.mcard,.icard,.bcard,.th-card,.escard,.pc,.gc,.rc-fcard,.rc-scard,.tcard,.tcard2,.tk-out-card{ animation:kaia-entra .22s ease both} .stp:nth-child(2),.mcard:nth-child(2),.icard:nth-child(2),.escard:nth-child(2){animation-delay:.04s} .stp:nth-child(3),.mcard:nth-child(3),.icard:nth-child(3),.escard:nth-child(3){animation-delay:.08s} .stp:nth-child(4),.mcard:nth-child(4),.icard:nth-child(4),.escard:nth-child(4){animation-delay:.12s} .stp:nth-child(5),.mcard:nth-child(5),.icard:nth-child(5),.escard:nth-child(5){animation-delay:.16s} .tab:focus-visible,.btn:focus-visible,.icard-btn:focus-visible,a:focus-visible{ outline:2px solid var(--petroleo);outline-offset:2px} .mcard:hover,.icard:hover,.bcard:hover,.th-card:hover,.pc:hover,.gc:hover, .rc-fcard:hover,.rc-scard:hover,.tcard:hover,.tcard2:hover,.tk-out-card:hover{ transform:translateY(-1px);box-shadow:0 6px 18px rgba(42,39,36,.08)} /* Triagem — o mesmo componente de 5 perguntas dentro de KAia.ui.modal, usado em três lugares que carregam sem depender um do outro (app/index.html no primeiro acesso, apresentacao.html na seção 08, e aqui — kaia-captacao.js, antes do pagamento). Compartilhado aqui para os três ficarem com a MESMA cara, sem duplicar CSS. */ .tri-cabecalho{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:var(--k-e4)} .tri-progresso{font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--k-tinta-fraca)} .tri-pular{background:none;border:none;font-size:.82rem;color:var(--k-tinta-fraca);cursor:pointer; padding:6px 10px;font-family:var(--k-sans);min-height:44px;display:inline-flex;align-items:center} .tri-pular:focus-visible{outline:2px solid var(--k-terracota);outline-offset:2px;border-radius:6px} .tri-pular:hover{color:var(--k-tinta-suave);text-decoration:underline} .tri-titulo{font-family:var(--k-serif);font-size:1.35rem;font-weight:400;color:var(--k-tinta);margin-bottom:6px;line-height:1.28} .tri-apoio{font-size:.86rem;color:var(--k-tinta-suave);margin-bottom:var(--k-e2)} .tri-subrotulo{font-size:.72rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--k-tinta-fraca);margin:var(--k-e4) 0 var(--k-e2)} .tri-opcoes{display:flex;flex-wrap:wrap;gap:9px} /* Escolha múltipla com teto (Triagem): ao bater o limite, as opções ainda não marcadas apagam e uma linha explica — em vez de o clique simplesmente não fazer nada. */ .tri-opc-bloq{opacity:.4} .tri-limite{font-size:.78rem;color:var(--k-terracota-escuro,#A8481A);margin-top:8px;min-height:1.1em} .tri-conta{font-size:.72rem;font-weight:500;letter-spacing:.05em;text-transform:none;opacity:.75;margin-left:6px} .tri-outro{width:100%;margin-top:11px;padding:10px 12px;border:1px solid var(--k-linha,rgba(0,0,0,.14)); border-radius:10px;font-family:inherit;font-size:.9rem;background:var(--k-papel,#fff);color:var(--k-tinta,#2A2724)} .tri-outro:focus{outline:2px solid var(--k-terracota,#D97A2B);outline-offset:1px} .tri-opc{ font-family:var(--k-sans);font-size:.86rem;color:var(--k-tinta); background:var(--k-papel);border:1.5px solid var(--k-linha);border-radius:var(--k-raio-full); padding:11px 19px;cursor:pointer;transition:border-color var(--k-rapido),background var(--k-rapido),color var(--k-rapido); min-height:44px; } .tri-opc:hover{border-color:var(--k-camelo)} .tri-opc.on{border-color:var(--k-terracota);background:rgba(217,122,43,.09);color:var(--k-terracota-escuro);font-weight:500} .tri-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:var(--k-e6)} .tri-nav .k-btn{flex:1} .tri-fechamento{text-align:center;padding:var(--k-e2) 0} .tri-fechamento h3{font-family:var(--k-serif);font-size:1.55rem;font-weight:400;margin-bottom:var(--k-e5);line-height:1.32;color:var(--k-tinta)} /* ═══════════════════════════════════════════════════════════════════ INSTALAR COMO APLICATIVO · assets/kaia-instalar.js ─────────────────────────────────────────────────────────────────── Mora aqui, e não dentro do .js, porque esta folha já é a fonte de verdade do desenho do projeto: os tokens (--k-*) ficam num lugar só e o card acompanha qualquer troca de paleta sem ninguém lembrar dele. ═══════════════════════════════════════════════════════════════════ */ .kinst{ background:var(--k-papel); border:1px solid var(--k-linha); border-top:3px solid var(--k-terracota); border-radius:var(--k-raio-2, 16px); padding:clamp(20px, 4vw, 30px); box-shadow:var(--k-sombra-1); } .kinst-hd{margin-bottom:var(--k-e5, 20px)} .kinst-tt{ font-family:var(--k-serif); font-size:clamp(1.25rem, 3vw, 1.6rem); font-weight:400; color:var(--k-tinta); line-height:1.25; text-wrap:balance; margin-bottom:8px; } .kinst-sub{font-size:.94rem;color:var(--k-tinta-suave);line-height:1.7;max-width:60ch} /* O botão real — só aparece onde o navegador oferece instalar. */ .kinst-botao-area{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:16px 18px;margin-bottom:var(--k-e5, 20px); background:var(--k-areia-2);border-radius:var(--k-raio-1, 12px); } /* O botão de instalar nasce com `hidden` e só aparece quando o navegador avisa que sabe instalar. Só que `display:flex` numa classe vence o `hidden`, que é um seletor de atributo mais fraco — então o botão aparecia sempre, inclusive onde clicar nele não faz nada. */ .kinst-botao-area[hidden]{display:none} .kinst-botao{ background:var(--k-terracota);color:#fff;border:none; border-radius:var(--k-raio-full, 999px); padding:12px 26px;font-family:var(--k-sans);font-size:.95rem;font-weight:500; cursor:pointer;transition:background .18s, box-shadow .18s, transform .18s; } .kinst-botao:hover:not(:disabled){background:var(--k-terracota-escuro);box-shadow:var(--k-sombra-2);transform:translateY(-1px)} .kinst-botao:disabled{opacity:.6;cursor:progress} .kinst-botao:focus-visible{outline:2px solid var(--k-tinta);outline-offset:3px} .kinst-botao-nota{font-size:.84rem;color:var(--k-tinta-suave)} /* As abas de aparelho */ .kinst-abas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--k-e4, 16px)} .kinst-aba{ background:transparent;border:1px solid var(--k-linha-forte); border-radius:var(--k-raio-full, 999px); padding:8px 18px;font-family:var(--k-sans);font-size:.88rem; color:var(--k-tinta-suave);cursor:pointer;transition:all .18s; /* 34px de altura é menos que a ponta de um dedo. Quem erra o alvo acha que o botão não funciona, não que errou a mira. */ min-height:44px;display:inline-flex;align-items:center; } .kinst-aba:focus-visible{ outline:2px solid var(--k-terracota);outline-offset:2px; } .kinst-aba:hover{border-color:var(--k-terracota);color:var(--k-tinta)} /* Branco sobre terracota mede 3,1:1, e sobre o tom fechado, 4,18:1 — os dois abaixo do mínimo de 4,5:1 para texto deste tamanho. Tinta escura sobre o terracota da marca dá 4,54:1: passa, mantém a cor exata da identidade e não obriga a inventar um tom só para este botão. Continua lendo como selecionado por ser o único preenchido. */ .kinst-aba.on{ background:var(--k-terracota);border-color:var(--k-terracota); color:var(--k-tinta);font-weight:600; } .kinst-aba:focus-visible{outline:2px solid var(--k-tinta);outline-offset:2px} .kinst-nota{ font-size:.88rem;color:var(--k-tinta-suave);line-height:1.65; background:var(--k-areia);border-left:3px solid var(--k-linha-forte); border-radius:0 8px 8px 0;padding:10px 14px;margin-bottom:var(--k-e4, 16px); } .kinst-nota b, .kinst-passos b, .kinst-fim b, .kinst-rodape b{ font-weight:600;color:var(--k-tinta); } .kinst-passos{ margin:0 0 var(--k-e4, 16px);padding-left:1.35em; display:flex;flex-direction:column;gap:11px; } .kinst-passos li{font-size:.95rem;color:var(--k-tinta);line-height:1.62} .kinst-passos li::marker{color:var(--k-terracota);font-weight:600} .kinst-fim{ font-size:.9rem;color:var(--k-tinta-suave);line-height:1.65; font-style:italic;margin:0; } .kinst-rodape{ margin-top:var(--k-e5, 20px);padding-top:14px; border-top:1px solid var(--k-linha); font-size:.8rem;color:var(--k-tinta-fraca);line-height:1.6; } /* Já instalado: confirma em vez de sumir. Silêncio parece defeito. */ .kinst-pronto{border-top-color:#4E7A52} .kinst-ok{display:flex;align-items:flex-start;gap:14px} .kinst-ok-ico{ flex:none;width:34px;height:34px;border-radius:50%; background:#4E7A52;color:#fff;font-size:1rem; display:flex;align-items:center;justify-content:center; } .kinst-ok-tt{font-size:1rem;color:var(--k-tinta);font-weight:500;margin-bottom:3px} .kinst-ok-dc{font-size:.88rem;color:var(--k-tinta-suave);line-height:1.6} @media (max-width:480px){ .kinst-botao{width:100%} .kinst-botao-area{flex-direction:column;align-items:stretch;text-align:center} } /* Título do caso sem instalação (Firefox): nas outras plataformas quem nomeia o aparelho é a aba selecionada; aqui não há abas. */ .kinst-titulo-solo{ font-size:.95rem;font-weight:500;color:var(--k-tinta); margin-bottom:10px; } /* ─── "A KAia se paga no primeiro post" · index.html ──────────────── Três colunas de comparação de custo, com a terceira em destaque. Números grandes com tabular-nums para alinharem entre si. */ .paga-se{ margin:clamp(28px,5vw,44px) auto 0;max-width:940px; background:var(--k-papel);border:1px solid var(--k-linha); border-radius:var(--k-raio-2,16px);padding:clamp(20px,4vw,30px); } .paga-se-tt{ font-family:var(--k-serif);font-size:clamp(1.2rem,3vw,1.5rem); font-weight:400;color:var(--k-tinta);text-align:center; margin-bottom:clamp(16px,3vw,24px);text-wrap:balance; } .paga-se-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} /* Achado dela num print real (24/08): "continua junto os retângulos, colocar um espaço entre eles". O gap:14px acima sempre existiu — o problema nunca foi a distância, foi o contraste: --k-areia (fundo de CADA coluna) e --k-papel (fundo do cartão .paga-se por trás delas) são dois tons de creme quase idênticos (#FAF7F0 vs #FFFDF9), então a faixa de 14px entre as duas primeiras colunas lia como a MESMA cor contínua — só a terceira coluna (com border própria, .paga-se-col- destaque) parecia separada de verdade. Border própria em toda coluna resolve na raiz: agora as três têm uma borda visível marcando onde cada uma começa e termina, gap ou não. */ .paga-se-col{ background:var(--k-areia);border:1px solid var(--k-linha);border-radius:var(--k-raio-1,12px); padding:18px 16px;text-align:center; } .paga-se-col-destaque{ background:rgba(217,122,43,.09); border:1px solid var(--k-terracota); } .paga-se-n{ font-size:clamp(1.05rem,2.6vw,1.35rem);font-weight:600; color:var(--k-tinta);font-variant-numeric:tabular-nums; margin-bottom:7px;line-height:1.2; } .paga-se-col-destaque .paga-se-n{color:var(--k-terracota-escuro)} .paga-se-l{font-size:.84rem;color:var(--k-tinta-suave);line-height:1.55} .paga-se-l b{color:var(--k-tinta);font-weight:600} .paga-se-fecho{ margin-top:clamp(16px,3vw,22px);text-align:center; font-family:var(--k-serif);font-style:italic; font-size:clamp(.98rem,2.2vw,1.12rem);color:var(--k-tinta-suave); line-height:1.55;text-wrap:balance; } @media (max-width:640px){ .paga-se-grade{grid-template-columns:1fr} } /* ─── Calculadora de tempo e dinheiro · index.html ────────────────── Fundo escuro de propósito: é a única seção escura da página, e isso a separa do resto sem precisar de borda nem de título gritado. Os números usam tabular-nums porque eles MUDAM enquanto a pessoa arrasta — sem isso a linha inteira treme a cada dígito. */ .conta-viva{ margin:clamp(28px,5vw,44px) auto 0;max-width:940px; background:var(--k-petroleo,#3A5A85);color:#fff; border-radius:var(--k-raio-2,16px); padding:clamp(24px,4vw,38px); box-shadow:var(--k-sombra-2); } .conta-viva-tt{ font-family:var(--k-serif);font-size:clamp(1.3rem,3vw,1.7rem); font-weight:400;text-align:center;margin-bottom:6px;text-wrap:balance; } .conta-viva-sub{ text-align:center;font-size:.88rem;color:rgba(255,255,255,.72); margin-bottom:clamp(20px,4vw,30px); } .conta-viva-campos{ display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(14px,3vw,24px);margin-bottom:clamp(22px,4vw,32px); } /* Rótulo à esquerda, valor à direita, barra embaixo ocupando a linha inteira. É a arrumação de instrumento: você lê o que está regulando e quanto está, na mesma linha, e a barra fica livre para o dedo. */ .cv-campo{ display:grid;grid-template-columns:1fr auto;align-items:baseline; gap:4px 12px; } /* No HTML a ordem é rótulo, barra, valor — que é a ordem certa para quem lê por leitor de tela. Na grade, o valor é trazido de volta para a primeira linha, ao lado do rótulo. */ .cv-rot{ grid-row:1;grid-column:1; font-size:.74rem;font-weight:500;letter-spacing:.09em; text-transform:uppercase;color:rgba(255,255,255,.72); } .cv-val{ grid-row:1;grid-column:2; font-size:1.12rem;font-weight:600;font-variant-numeric:tabular-nums; color:var(--k-cv-cor,#F0B93E);text-align:right; } /* A barra mostra o valor nela mesma: preenchida da esquerda até onde a pessoa arrastou. Antes era um fio cinza igual do começo ao fim, então nada dizia se 12 posts era pouco ou muito dentro da escala. O preenchimento vem da variável --cv-preenchido, que o script atualiza a cada arrasto. A altura de 24px é o alvo do dedo; o fio visível continua fino, desenhado no trilho. */ .cv-campo input[type=range]{ -webkit-appearance:none;appearance:none;grid-row:2;grid-column:1/-1; width:100%;height:24px;margin:2px 0 0;background:transparent; cursor:pointer; } .cv-campo input[type=range]::-webkit-slider-runnable-track{ height:6px;border-radius:99px; background:linear-gradient(90deg, var(--k-cv-cor,#F0B93E) 0 var(--cv-preenchido,50%), rgba(255,255,255,.24) var(--cv-preenchido,50%) 100%); } .cv-campo input[type=range]::-moz-range-track{ height:6px;border-radius:99px;background:rgba(255,255,255,.24); } .cv-campo input[type=range]::-moz-range-progress{ height:6px;border-radius:99px;background:var(--k-cv-cor,#F0B93E); } .cv-campo input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:22px;height:22px; margin-top:-8px; border-radius:50%;background:#fff; border:5px solid var(--k-cv-cor,#F0B93E);cursor:grab; box-shadow:0 2px 10px rgba(0,0,0,.35); transition:transform .15s var(--k-mola,cubic-bezier(.22,.68,.32,1)), box-shadow .15s; } .cv-campo input[type=range]::-moz-range-thumb{ width:22px;height:22px;border-radius:50%;background:#fff; border:5px solid var(--k-cv-cor,#F0B93E);cursor:grab; box-shadow:0 2px 10px rgba(0,0,0,.35); } @media (hover:hover) and (pointer:fine){ .cv-campo input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.14)} } .cv-campo input[type=range]:active::-webkit-slider-thumb{ cursor:grabbing;transform:scale(1.2); box-shadow:0 0 0 9px rgba(232,195,154,.22),0 2px 10px rgba(0,0,0,.35); } .cv-campo input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px var(--k-petroleo,#3A5A85),0 0 0 7px #fff; } .cv-campo input[type=range]:focus-visible{outline:none} .cv-campo input[type=range]:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 4px var(--k-petroleo,#3A5A85),0 0 0 7px #fff; } @media (prefers-reduced-motion:reduce){ .cv-campo input[type=range]::-webkit-slider-thumb{transition:none} } /* "Quanto a KAia corta" não é mais um arrasto de opinião — é um número travado, calculado a partir de dado de mercado (prazo de redator freelance). Ocupa a linha inteira, não a metade da grade, porque carrega uma frase de explicação que os outros três campos não têm; espremer isso na metade da largura ficaria ilegível. */ .cv-campo-travado{ grid-column:1/-1;grid-template-columns:1fr auto; } .cv-fonte{ grid-row:2;grid-column:1/-1; font-size:.76rem;line-height:1.6;color:rgba(255,255,255,.68); margin-top:2px; } .cv-fonte b{color:var(--k-cv-cor,#F0B93E);font-weight:600} /* A prova de onde vem o número travado, fechada por padrão. Ela precisa continuar existindo inteira — é o que separa este número de um chute, e quem desconfia tem que poder conferir. Mas aberta, eram cinco linhas de texto corrido no meio de um painel de controles, e o olho batia nelas antes de chegar no resultado. Quem não duvida segue direto; quem duvida clica. */ .cv-fonte-abre{grid-row:2;grid-column:1/-1;margin-top:4px} .cv-fonte-abre > summary{ font-size:.74rem;color:rgba(255,255,255,.6);cursor:pointer; list-style:none;display:inline-flex;align-items:center;gap:6px; /* 44px de alvo mesmo com texto pequeno: o dedo tem que acertar. */ min-height:44px;-webkit-tap-highlight-color:transparent; } .cv-fonte-abre > summary::-webkit-details-marker{display:none} .cv-fonte-abre > summary::before{ content:'';width:5px;height:5px;flex:none; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(-45deg);transition:transform .2s ease; } .cv-fonte-abre[open] > summary::before{transform:rotate(45deg)} .cv-fonte-abre > summary:hover, .cv-fonte-abre > summary:focus-visible{color:var(--k-cv-cor,#F0B93E)} .cv-fonte-abre .cv-fonte{margin-top:0;padding-bottom:4px} /* A leitura de apoio embaixo do número grande: as mesmas horas, para quem quiser conferir a conta que virou "dias". */ .cv-sub{ font-size:.78rem;color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums;margin-top:8px; } /* A resposta que a pessoa veio buscar é uma só: quanto sobra depois de pagar. Antes os três resultados tinham o mesmo tamanho e a mesma caixa, então o olho tinha de ler os três para descobrir qual era a conclusão. Agora os dois primeiros são a memória de cálculo, lado a lado e menores, e a resposta ocupa a linha inteira embaixo — na ordem em que se lê uma conta. */ .conta-viva-saida{display:grid;grid-template-columns:1fr 1fr;gap:12px} .cv-bloco{ background:rgba(255,255,255,.09);border-radius:var(--k-raio-1,12px); padding:16px 14px;text-align:center; } .cv-bloco-destaque{ grid-column:1/-1; background:rgba(240,185,62,.16); border:1px solid rgba(240,185,62,.45); padding:24px 18px; display:flex;flex-direction:column;align-items:center;gap:2px; } .cv-n{ font-size:clamp(1.05rem,4vw,1.55rem);font-weight:600; font-variant-numeric:tabular-nums;line-height:1.15;margin-bottom:6px; white-space:nowrap; } .cv-bloco-destaque .cv-n{ color:var(--k-cv-cor,#F0B93E); font-size:clamp(2rem,5.6vw,3.1rem);margin-bottom:0;letter-spacing:-.015em; } .cv-n-negativo{color:#FFB871!important} .cv-l{font-size:.82rem;color:rgba(255,255,255,.78);line-height:1.5} .cv-bloco-destaque .cv-l{font-size:.9rem;color:rgba(255,255,255,.88);max-width:34ch} .conta-viva-fecho{ margin-top:clamp(18px,3vw,26px);text-align:center; font-family:var(--k-serif);font-style:italic; font-size:clamp(.98rem,2.2vw,1.12rem);color:rgba(255,255,255,.92); line-height:1.55;text-wrap:balance;min-height:3em; } @media (max-width:640px){ .conta-viva-campos{grid-template-columns:1fr} /* Os dois números de apoio continuam lado a lado no celular: são curtos, cabem, e empilhá-los afastaria a resposta do fim da conta. */ .conta-viva-saida{grid-template-columns:1fr 1fr} } /* ═══════════════════════════════════════════════════════════════════ COTA DE DESENHO TÉCNICO · divisor entre seções da vitrine ─────────────────────────────────────────────────────────────────── O elemento assinatura do redesenho de 15/08/2026. Em vez de um espaço vazio entre seções (que uma pessoa lendo rápido não registra como "pausa desenhada" e sim como "página com buraco"), entra a marca que todo projeto de arquitetura carrega: a linha de cota, com os tracinhos de medida nas pontas — o traço que um desenho técnico usa para dizer "esta é a distância entre estes dois pontos". É um elemento com raiz no ofício de quem assina o produto, não um enfeite genérico — é o motivo de existir aqui e não em qualquer outro projeto. Sem legenda inventada: uma cota que mede algo fictício seria pior que gap nenhum. É só o traço. ═══════════════════════════════════════════════════════════════════ */ .cota-divisoria{ display:flex;align-items:center;justify-content:center;gap:0; max-width:96px;margin:0 auto;height:18px; opacity:0;transform:scaleX(.55); transition:opacity 1s cubic-bezier(.22,.68,.32,1), transform 1s cubic-bezier(.22,.68,.32,1); } html.k-js .cota-divisoria{opacity:0;transform:scaleX(.55)} html.k-js .cota-divisoria.k-visivel{opacity:1;transform:scaleX(1)} .cota-tick{width:1px;height:11px;background:var(--linha,var(--k-linha-forte));flex:none} .cota-linha{flex:1;height:1px;background:var(--linha,var(--k-linha-forte))} @media (prefers-reduced-motion:reduce){ .cota-divisoria{opacity:1!important;transform:none!important} } /* Removido em auditoria contra a régua apple-design (princípio 13, utilidade): "reserve o feedback pra momentos que têm significado — excesso de feedback treina a pessoa a ignorar tudo". A flutuação de -9px a cada 7s na foto do herói não tinha gatilho nenhum — não respondia a clique, scroll, nem hover — e o princípio 14 nomeia exatamente esse padrão como algo a evitar: "oscilação lenta em loop, perto de 0,2Hz". A foto está bem sem: a entrada dela (foto-pousa, em kaia-home.css) já é o movimento com propósito — chegar, pousar, ficar parada. Ficar parada é o estado de descanso; não precisa continuar se mexendo pra sempre depois de chegar. */