/* assets/diagnostico.css — tela do diagnóstico. Escopo total sob #kawe-diagnostico-app. */ #kawe-diagnostico-app{--kd-bg:#0b0f14;--kd-panel:#121821;--kd-line:#243040;--kd-ink:#e8eef6; --kd-dim:#8fa0b5;--kd-dim2:#64748b;--kd-accent:#3ddc97;--kd-accent-dim:#1f6f52; --kd-warn:#f0b429;--kd-bad:#f4685f;color:var(--kd-ink);font-size:15px;line-height:1.55} #kawe-diagnostico-app .kd-hidden{display:none} #kawe-diagnostico-app .kd-card{background:var(--kd-panel);border:1px solid var(--kd-line); border-radius:14px;padding:22px} #kawe-diagnostico-app .kd-stepnote{font-size:12px;text-transform:uppercase; letter-spacing:.14em;color:var(--kd-dim2);margin:0 0 10px} #kawe-diagnostico-app .kd-lede{color:var(--kd-dim);margin:0 0 22px;max-width:60ch} #kawe-diagnostico-app .kd-split{display:grid;grid-template-columns:1fr 1.25fr;gap:18px;align-items:start} @media(max-width:860px){#kawe-diagnostico-app .kd-split{grid-template-columns:1fr}} #kawe-diagnostico-app .kd-scanrow{display:flex;align-items:center;gap:10px;padding:8px 0; font-size:14px;color:var(--kd-dim2);transition:color .3s} #kawe-diagnostico-app .kd-scanrow.ativa{color:var(--kd-ink)} #kawe-diagnostico-app .kd-scanrow.feita{color:var(--kd-dim)} #kawe-diagnostico-app .kd-dot{width:16px;height:16px;flex:0 0 16px;border-radius:50%; border:2px solid var(--kd-line);position:relative} #kawe-diagnostico-app .kd-scanrow.ativa .kd-dot{border-color:var(--kd-accent); border-top-color:transparent;animation:kd-spin .8s linear infinite} #kawe-diagnostico-app .kd-scanrow.feita .kd-dot{border-color:var(--kd-accent-dim); background:var(--kd-accent-dim)} #kawe-diagnostico-app .kd-scanrow.feita .kd-dot::after{content:"";position:absolute; left:4px;top:1px;width:4px;height:8px;border:solid #0b0f14;border-width:0 2px 2px 0; transform:rotate(45deg)} @keyframes kd-spin{to{transform:rotate(360deg)}} #kawe-diagnostico-app .kd-bar{height:3px;background:#0d131b;border-radius:2px; overflow:hidden;margin:14px 0 4px} #kawe-diagnostico-app .kd-bar i{display:block;height:100%;background:var(--kd-accent); width:0;transition:width .5s ease} #kawe-diagnostico-app .kd-counter{font-size:12.5px;color:var(--kd-dim2);margin-top:14px} /* Linha do prazo declarado (KAW-50). A cor é o único sinal de que a espera mudou de fase — por isso ela nunca é o único sinal: o texto também muda, e a linha é aria-live. */ #kawe-diagnostico-app .kd-espera{font-size:12.5px;color:var(--kd-dim2); margin:6px 0 0;min-height:1.5em} #kawe-diagnostico-app .kd-espera-instavel{color:var(--kd-warn)} #kawe-diagnostico-app .kd-espera-parcial_tempo, #kawe-diagnostico-app .kd-espera-parcial_erro{color:var(--kd-warn)} #kawe-diagnostico-app .kd-espera-pronto{color:var(--kd-accent)} #kawe-diagnostico-app .kd-parcial-aviso{color:var(--kd-warn)} #kawe-diagnostico-app .kd-q{border-top:1px solid var(--kd-line);padding:18px 0} #kawe-diagnostico-app .kd-q:first-child{border-top:0;padding-top:2px} #kawe-diagnostico-app .kd-q p{margin:0 0 12px;font-weight:550} #kawe-diagnostico-app .kd-opts{display:flex;flex-wrap:wrap;gap:8px} #kawe-diagnostico-app .kd-opt{border:1px solid var(--kd-line);background:#0d131b; color:var(--kd-dim);padding:9px 14px;border-radius:999px;cursor:pointer; font-size:13.5px;transition:.15s;font-family:inherit} #kawe-diagnostico-app .kd-opt:hover{border-color:#31435a;color:var(--kd-ink)} #kawe-diagnostico-app .kd-opt.sel{border-color:var(--kd-accent);color:var(--kd-accent);background:#0f1d18} #kawe-diagnostico-app .kd-finding{display:flex;gap:13px;padding:15px 0;border-top:1px solid var(--kd-line)} #kawe-diagnostico-app .kd-finding:first-child{border-top:0} #kawe-diagnostico-app .kd-sev{width:8px;height:8px;border-radius:50%;margin-top:8px;flex:0 0 8px} #kawe-diagnostico-app .kd-sev.bad{background:var(--kd-bad)} #kawe-diagnostico-app .kd-sev.warn{background:var(--kd-warn)} #kawe-diagnostico-app .kd-sev.ok{background:var(--kd-accent)} #kawe-diagnostico-app .kd-finding h4{margin:0 0 3px;font-size:15px;font-weight:600} #kawe-diagnostico-app .kd-finding p{margin:0;color:var(--kd-dim);font-size:13.5px} #kawe-diagnostico-app .kd-metric{color:var(--kd-dim2);font-size:12.5px;margin-top:5px; font-variant-numeric:tabular-nums} #kawe-diagnostico-app .kd-partial{margin-top:18px;font-size:13px;color:var(--kd-dim2); border-left:2px solid var(--kd-line);padding-left:12px} #kawe-diagnostico-app .kd-locked{margin-top:22px;border:1px dashed #2c3a4d;border-radius:14px; padding:22px;background:linear-gradient(180deg,#121821,#0e141c)} #kawe-diagnostico-app .kd-locked h3{margin:0 0 8px;font-size:17px} #kawe-diagnostico-app .kd-locked p{color:var(--kd-dim);margin:0 0 14px;font-size:14px;max-width:58ch} #kawe-diagnostico-app .kd-blur{filter:blur(5px);opacity:.5;pointer-events:none; user-select:none;margin-bottom:0} /* Exemplo borrado, rotulado como exemplo (KAW-52). O
zera a margem de 1em/40px que o navegador dá por padrão — sem isso o bloco desalinha do resto do cartão. A legenda vem ANTES do borrão de propósito: é a primeira coisa lida, por voz e por olho, e é o que impede a ilustração de ser confundida com medida. O borrão em si leva aria-hidden no JS; aqui embaixo ele só continua ilegível. */ #kawe-diagnostico-app .kd-exemplo{margin:0 0 16px;padding:0} #kawe-diagnostico-app .kd-exemplo-rotulo{margin:0 0 10px;font-size:12.5px;line-height:1.5; color:var(--kd-dim);max-width:58ch} /* Rótulo de seção: separa fato medido de recomendação com a tipografia que a tela já usa para etapa (kd-stepnote), sem inventar um estilo novo. */ #kawe-diagnostico-app .kd-rotulo{margin:22px 0 8px} #kawe-diagnostico-app .kd-pill{display:inline-block;font-size:11.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--kd-accent);border:1px solid var(--kd-accent-dim); border-radius:999px;padding:4px 11px;margin-bottom:12px} #kawe-diagnostico-app .kd-btn{background:var(--kd-accent);color:#06231a;border:0; border-radius:10px;padding:14px 22px;font-family:inherit;font-size:15px; font-weight:650;cursor:pointer} #kawe-diagnostico-app .kd-btn:disabled{opacity:.4;cursor:not-allowed} #kawe-diagnostico-app .kd-btn.ghost{background:transparent;border:1px solid var(--kd-line);color:var(--kd-dim)} #kawe-diagnostico-app .kd-erro{color:var(--kd-bad);font-size:13.5px;margin-top:10px} #kawe-diagnostico-app h2{font-size:26px;line-height:1.2;margin:0 0 10px;letter-spacing:-.02em;color:var(--kd-ink)} /* Palco de largura inteira: o app substitui o conteúdo da seção ao iniciar. */ #kawe-diagnostico-app{width:100%;max-width:1080px;margin:0 auto;padding:48px 22px;box-sizing:border-box} #kawe-diagnostico-app *,#kawe-diagnostico-app *::before,#kawe-diagnostico-app *::after{box-sizing:border-box} /* Cores explícitas: o tema pinta h3/h4/p com cores próprias e alta especificidade; sem isto, título de achado some em fundo escuro. */ #kawe-diagnostico-app .kd-finding h4{color:var(--kd-ink)} #kawe-diagnostico-app .kd-locked h3{color:var(--kd-ink)} #kawe-diagnostico-app .kd-q p{color:var(--kd-ink)} #kawe-diagnostico-app .kd-stepnote{color:var(--kd-dim2)} #kawe-diagnostico-app .kd-pill{color:var(--kd-accent)} /* Veredito: a primeira linha carrega o peso da tela. */ .kd-veredito { line-height: 1.3; } .kd-pior { font-weight: 600; } /* Cartões dos três mais graves — peso visual muito acima da lista recolhida. */ .kd-destaques { display: grid; gap: 12px; margin: 20px 0; } .kd-cartao { border-left: 4px solid currentColor; border-radius: 8px; padding: 14px 16px; background: rgba(127,127,127,.06); } .kd-cartao.bad { color: #c0392b; } .kd-cartao.warn { color: #b8860b; } .kd-cartao h4 { margin: 6px 0 4px; color: inherit; } .kd-cartao .kd-metric { color: inherit; opacity: .85; margin: 0; } .kd-cartao-tag { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; } /* O resto: recolhido, sem peso visual. A tinta, o corpo e os filetes do `summary` estão no bloco do palco claro, no fim do arquivo — aqui ficam só a caixa e o cursor, que valem nos dois fundos. */ .kd-restantes { margin: 16px 0; } .kd-restantes summary { cursor: pointer; } .kd-restantes .kd-card { margin-top: 4px; } .kd-btn-copia { margin-top: 16px; width: 100%; } .kd-destino { font-size: 13px; opacity: .7; margin-top: 8px; text-align: center; } /* Captura de e-mail do visitante anônimo, depois da varredura (0.5.1). */ #kawe-diagnostico-app .kd-copia { margin-top: 18px; } #kawe-diagnostico-app .kd-copia-chamada { margin: 0 0 12px; font-weight: 600; color: var(--kd-ink); } #kawe-diagnostico-app .kd-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--kd-line); background: transparent; color: inherit; font: inherit; font-size: 15px; } #kawe-diagnostico-app .kd-input::placeholder { color: var(--kd-dim); opacity: 1; } #kawe-diagnostico-app .kd-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--kd-dim); cursor: pointer; } /* O quadradinho não pode encolher junto com o texto que quebra em duas linhas. */ #kawe-diagnostico-app .kd-check input { flex: 0 0 auto; margin-top: 2px; } /* ------------------------------------------------------------------------ Caixa de medição da landing /pulso/ (0.5.2). Escopo pela classe, não só pelo id: `#kawe-diagnostic-form-slot` também existe na home, onde o formulário é do Breakdance e já tem estilo próprio. Só a landing marca o slot com `.kd-caixa`, e é ela que recebe estas regras. A paleta repete a de #kawe-diagnostico-app de propósito — a caixa é o primeiro degrau da mesma tela, e a troca para o palco do app não pode parecer troca de site. ------------------------------------------------------------------------ */ #kawe-diagnostic-form-slot.kd-caixa { --kd-panel: #121821; --kd-line: #243040; --kd-ink: #e8eef6; --kd-dim: #8fa0b5; --kd-dim2: #64748b; --kd-accent: #3ddc97; background: var(--kd-panel); border: 1px solid var(--kd-line); border-radius: 14px; padding: 22px; margin: 28px 0; color: var(--kd-ink); max-width: 620px; box-sizing: border-box; position: relative; } #kawe-diagnostic-form-slot.kd-caixa *, #kawe-diagnostic-form-slot.kd-caixa *::before, #kawe-diagnostic-form-slot.kd-caixa *::after { box-sizing: border-box; } #kawe-diagnostic-form-slot.kd-caixa label { display: block; font-size: 13.5px; font-weight: 600; color: var(--kd-ink); margin-bottom: 8px; } #kawe-diagnostic-form-slot.kd-caixa .kd-input { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--kd-line); background: transparent; color: var(--kd-ink); font: inherit; font-size: 15px; } #kawe-diagnostic-form-slot.kd-caixa .kd-input::placeholder { color: var(--kd-dim2); opacity: 1; } #kawe-diagnostic-form-slot.kd-caixa .kd-btn { margin-top: 12px; width: 100%; background: var(--kd-accent); color: #06231a; border: 0; border-radius: 10px; padding: 14px 22px; font-family: inherit; font-size: 15px; font-weight: 650; cursor: pointer; } #kawe-diagnostic-form-slot.kd-caixa .kd-btn:disabled { opacity: .4; cursor: not-allowed; } #kawe-diagnostic-form-slot.kd-caixa .kd-micro { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--kd-dim); } /* Honeypot: fora da tela, fora do fluxo do teclado. `display:none` não serve — parte dos robôs ignora campo escondido assim. */ #kawe-diagnostic-form-slot.kd-caixa .kd-mel { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; } /* Botão do CTA final: é um link para a caixa, não um segundo formulário. `!important` aqui não é preguiça. O tema pinta TODO link do corpo de roxo (#5146e5) e sublinhado, com especificidade maior que uma classe; medido na página publicada, o botão saía com texto roxo sublinhado sobre fundo verde. As três declarações abaixo são as únicas que o tema disputa. */ .kd-cta-link { display: inline-block; background: #3ddc97; border-radius: 10px; padding: 14px 22px; font-weight: 650; color: #06231a !important; text-decoration: none !important; } .kd-cta-link:hover, .kd-cta-link:focus { opacity: .9; } .kd-nota-lgpd { font-size: 13.5px; line-height: 1.6; opacity: .8; } /* Lede da landing: fica ABAIXO do H1 (38px no tema) e ACIMA do corpo. A classe `has-large-font-size` do core resolvia para 36px neste tema — a frase-definição ficava do tamanho do H1 e brigava com ele. */ .kd-lede-pagina { font-size: 21px; line-height: 1.45; font-weight: 500; margin-bottom: 6px; } /* FAQ: o tema estiliza h3 (31,25px) MAIOR que h2 (22px) — hierarquia visual invertida em relação à semântica. As perguntas continuam h3 no HTML, que é o que o FAQPage e o leitor de tela leem; só o tamanho é corrigido. */ .kd-faq-pergunta { font-size: 19px; line-height: 1.35; margin-top: 22px; } /* ------------------------------------------------------------------------ Tinta do palco claro (KAW-70). O app declara `--kd-bg: #0b0f14` e NUNCA o aplica: quem pinta o fundo é a página, e a /pulso/ é clara (#f6f7fb). Os cartões trazem fundo escuro próprio (`.kd-card`, `.kd-locked`), então lá dentro a tinta clara está certa. O que fica SOLTO no palco herdava a mesma tinta clara e saía quase branco sobre branco — medido na 0.6.3 em produção: o veredito "Medimos N pontos no seu site…" em #e8eef6 sobre #f6f7fb, e o `summary` "Ver as outras N medidas", que é a única porta para o resto das medidas, junto com ele. O conserto NÃO pinta o palco de escuro: isso trocaria o fundo da página inteira e faria a landing parecer outro site no meio da leitura. Ele dá tinta própria a quem fica direto no palco, por combinador de filho — o que está dentro de cartão continua com a tinta do cartão. Este bloco fica no FIM do arquivo de propósito: `#id .classe` empata em especificidade com as regras lá de cima (o combinador `>` não soma nada), e quem empata e vem depois é quem vale. Mover isto para cima desfaz o conserto — inclusive o de `.kd-parcial-aviso`, que é declarado na linha 41. ------------------------------------------------------------------------ */ #kawe-diagnostico-app{--kd-ink-palco:#0f172a;--kd-dim-palco:#475569; --kd-line-palco:#cbd5e1;--kd-accent-palco:#14804a;--kd-warn-palco:#92400e} #kawe-diagnostico-app > h2{color:var(--kd-ink-palco)} #kawe-diagnostico-app > .kd-lede{color:var(--kd-dim-palco)} #kawe-diagnostico-app > .kd-lede.kd-pior{color:var(--kd-ink-palco)} #kawe-diagnostico-app > .kd-lede.kd-parcial-aviso{color:var(--kd-warn-palco)} #kawe-diagnostico-app > .kd-partial{color:var(--kd-dim-palco); border-left-color:var(--kd-line-palco)} #kawe-diagnostico-app > .kd-rotulo{color:var(--kd-dim-palco)} #kawe-diagnostico-app > .kd-pill{color:var(--kd-accent-palco); border-color:var(--kd-accent-palco)} /* "Ver as outras N medidas": era a única porta para as medidas que não estão nos três cartões, e estava invisível E do tamanho do corpo. Ganha tinta, 17 px e dois filetes — some com o triângulo padrão do
ela não fica, porque o triângulo é o que diz que abre. Escopado pelo id porque o tema pinta `summary` do conteúdo com regra própria; `#id .classe elemento` (0,1,1,1) ganha dela sem `!important`. */ #kawe-diagnostico-app .kd-restantes > summary{color:var(--kd-ink-palco); font-size:17px;font-weight:650;padding:14px 0; border-top:1px solid var(--kd-line-palco); border-bottom:1px solid var(--kd-line-palco)} #kawe-diagnostico-app .kd-restantes[open] > summary{border-bottom-color:transparent} #kawe-diagnostico-app .kd-restantes > summary:hover{color:var(--kd-accent-palco)} /* Cabeçalho do passo 2 (KAW-70, texto L3-07 aprovado pelo Marcio em 07/09). Vive DENTRO do cartão escuro das perguntas — aqui a tinta certa é a do cartão, não a do palco. Sem filete próprio: o `.kd-q` da primeira pergunta deixa de ser `:first-child` e já traz o `border-top` que separa os dois. */ #kawe-diagnostico-app .kd-perguntas-cab{margin:0 0 6px} #kawe-diagnostico-app .kd-perguntas-cab h3{margin:0 0 6px;font-size:18px; line-height:1.3;font-weight:650;letter-spacing:-.01em;color:var(--kd-ink)} #kawe-diagnostico-app .kd-perguntas-cab p{margin:0 0 4px;font-size:13.5px; line-height:1.5;color:var(--kd-dim);max-width:58ch} /* Pulso 0.7.1: experiência guiada, somente no painel da landing própria. */ #kawe-diagnostico-app .kd-guided{max-width:960px;margin:0 auto} #kawe-diagnostico-app .kd-guided-status{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:4px 0 18px} #kawe-diagnostico-app .kd-status-title{font-size:clamp(24px,3vw,30px);line-height:1.3;font-weight:700;color:#f4f1ff;margin:0} #kawe-diagnostico-app .kd-ready-open{width:auto;margin:0;background:#6845f5;color:#fff;font-size:14px;padding:12px 18px} #kawe-diagnostico-app .kd-scan-details{margin:0 0 24px;color:#c1c8e0;font-size:13px} #kawe-diagnostico-app .kd-scan-details summary{cursor:pointer;padding:7px 0;width:fit-content} #kawe-diagnostico-app .kd-scan-details #kd-painel{padding:18px 0 0} #kawe-diagnostico-app .kd-question-card{background:#fff;color:#1b2137;padding:36px 40px;border-radius:18px;border:1px solid #e4dff8} #kawe-diagnostico-app .kd-question-count{font-size:12px;text-transform:uppercase;letter-spacing:1.3px;color:#6a4cdb;margin:0 0 12px;font-weight:700} #kawe-diagnostico-app .kd-guided-title{color:#181d34;font-size:27px;line-height:1.2;letter-spacing:-.6px;margin:0 0 12px} #kawe-diagnostico-app .kd-guided-title:focus{outline:none} #kawe-diagnostico-app .kd-guided-intro{color:#656d83;font-size:14px;line-height:1.7;max-width:680px;margin:0 0 24px} #kawe-diagnostico-app .kd-question-card .kd-q{border:0;padding:12px 0 26px;margin:0} #kawe-diagnostico-app .kd-question-card .kd-q>p{font-size:21px;line-height:1.45;color:#20253f;font-weight:650;margin:0 0 20px} #kawe-diagnostico-app .kd-question-card .kd-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #kawe-diagnostico-app .kd-question-card .kd-opt{border:1px solid #d9dcec;border-radius:10px;background:#fff;color:#343c57;font-size:15px;text-align:left;padding:16px 18px;min-height:54px;line-height:1.4} #kawe-diagnostico-app .kd-question-card .kd-opt:hover{background:#f8f6ff;border-color:#9d89f3} #kawe-diagnostico-app .kd-question-card .kd-opt.sel{background:#f0ebff;border-color:#7452ec;color:#4f31b5;box-shadow:inset 0 0 0 1px #7452ec} #kawe-diagnostico-app .kd-guided-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:22px;border-top:1px solid #e8e7f1} #kawe-diagnostico-app .kd-guided-nav .kd-btn{width:auto;min-width:190px;padding:15px 22px;background:#6442ef;color:#fff;border-radius:9px;margin:0} #kawe-diagnostico-app .kd-guided-nav .kd-btn:disabled{background:#e7e5ef;color:#656078;opacity:1;cursor:not-allowed} #kawe-diagnostico-app .kd-back{background:transparent;color:#5f6780;font-size:14px;padding:12px 4px;border:0;cursor:pointer} #kawe-diagnostico-app .kd-back:disabled{opacity:.4;cursor:default} #kawe-diagnostico-app .kd-skip{display:block;margin:22px auto 0;background:transparent;color:#665c83;font-size:13px;border:0;text-decoration:underline;text-underline-offset:4px;padding:10px;cursor:pointer;line-height:1.5} #kawe-diagnostico-app .kd-guided button:focus-visible,#kawe-diagnostico-app .kd-scan-details summary:focus-visible{outline:3px solid #9476f2;outline-offset:4px} #kawe-diagnostico-app .kd-question-card .kd-erro{color:#a72d43;background:#fff2f4;border-radius:8px;padding:14px;line-height:1.6} @media(max-width:767px){ #kawe-diagnostico-app .kd-question-card{padding:25px 22px} #kawe-diagnostico-app .kd-guided-status{align-items:flex-start;flex-direction:column;gap:12px} #kawe-diagnostico-app .kd-guided-title{font-size:24px} #kawe-diagnostico-app .kd-question-card .kd-q>p{font-size:19px} #kawe-diagnostico-app .kd-question-card .kd-opts{grid-template-columns:minmax(0,1fr)} #kawe-diagnostico-app .kd-question-card .kd-opt{padding:14px 16px;min-height:48px} #kawe-diagnostico-app .kd-guided-nav{gap:12px} #kawe-diagnostico-app .kd-guided-nav .kd-btn{min-width:0;font-size:14px;padding:14px 16px} } @media(prefers-reduced-motion:reduce){#kawe-diagnostico-app .kd-dot{animation:none}} #kawe-diagnostico-app .kd-question-card{scroll-margin-top:calc(var(--wp-admin--admin-bar--height,0px) + 24px)} .kp-panel #kawe-diagnostico-app{scroll-margin-top:calc(var(--wp-admin--admin-bar--height,0px) + 24px)} @media(max-width:767px){#kawe-diagnostico-app .kd-guided-nav{position:sticky;bottom:0;background:#fff;padding-bottom:12px}} .kp-panel #kawe-diagnostico-app.kd-guided-app{padding:8px 0} @media(max-width:767px){ #kawe-diagnostico-app .kd-question-card{padding:24px 18px} #kawe-diagnostico-app .kd-guided-title{font-size:22px;line-height:1.35} #kawe-diagnostico-app .kd-guided-intro{font-size:13px;line-height:1.6;margin-bottom:10px} #kawe-diagnostico-app .kd-guided-nav .kd-btn{white-space:nowrap} } /* Pulso 0.9.0 — resumo público e entrega consentida; sem dependências. */ .kp-panel #kawe-diagnostico-app.kd-result-app{padding:0;color:#eff1fb;max-width:none;width:100%;--kd-dim:#bdc4da;--kd-dim2:#bdc4da} #kawe-diagnostico-app.kd-result-app h2{color:#fff;font-size:clamp(30px,3.4vw,48px);line-height:1.12;letter-spacing:-.035em;margin:20px 0} #kawe-diagnostico-app.kd-result-app h3{color:#fff;font-size:25px;line-height:1.22;letter-spacing:-.025em;margin:0 0 16px} #kawe-diagnostico-app.kd-result-app p{line-height:1.65} #kawe-diagnostico-app .kd-result-hero{max-width:850px;margin-bottom:30px} #kawe-diagnostico-app .kd-result-intro{font-size:18px;color:#cbd0e2;margin:0} #kawe-diagnostico-app .kd-result-strip{display:grid;grid-template-columns:1fr 1fr;border:1px solid #3d425f;border-radius:14px;background:#ffffff05;margin:0 0 32px;overflow:hidden} #kawe-diagnostico-app .kd-result-strip>div{padding:18px 24px;display:flex;gap:6px;flex-direction:column} #kawe-diagnostico-app .kd-result-strip>div+div{border-left:1px solid #3d425f;background:#6951ef12} #kawe-diagnostico-app .kd-result-strip span,#kawe-diagnostico-app .kd-result-label{font-size:11px;letter-spacing:.12em;font-weight:650;color:#b9b4e5} #kawe-diagnostico-app .kd-result-strip strong{font-size:16px;color:#fff} #kawe-diagnostico-app .kd-result-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:start} #kawe-diagnostico-app .kd-result-summary{min-width:0;padding-top:10px} #kawe-diagnostico-app .kd-result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0 30px} #kawe-diagnostico-app .kd-result-stats>div{display:flex;flex-direction:column;gap:6px;padding:18px 13px;border:1px solid #3b405b;border-radius:14px;background:#ffffff04} #kawe-diagnostico-app .kd-result-stats strong{color:#fff;font-size:34px;line-height:1.1} #kawe-diagnostico-app .kd-result-stats>div:nth-child(2) strong{color:#f2c264} #kawe-diagnostico-app .kd-result-stats>div:nth-child(3) strong{color:#49dda8} #kawe-diagnostico-app .kd-result-stats span{color:#c6cce0;font-size:12px;line-height:1.4} #kawe-diagnostico-app.kd-result-app .kd-cartao{background:#ffffff06;border:1px solid #41435b;border-left:3px solid #f2c264;border-radius:12px;margin:12px 0;padding:20px} #kawe-diagnostico-app.kd-result-app .kd-cartao.bad{border-left-color:#ff938c} #kawe-diagnostico-app.kd-result-app .kd-cartao h4{font-size:21px;color:#fff;margin:8px 0} #kawe-diagnostico-app.kd-result-app .kd-cartao-tag{font-size:10px;letter-spacing:.09em;color:#f2c264} #kawe-diagnostico-app.kd-result-app .kd-cartao.bad .kd-cartao-tag{color:#ff938c} #kawe-diagnostico-app.kd-result-app .kd-metric{font-size:14px;color:#cbd0df} #kawe-diagnostico-app .kd-result-clear{padding:20px;border:1px solid #386754;border-radius:12px;background:#3ddc970a;color:#d5e9e3} #kawe-diagnostico-app .kd-result-email{background:#fbfaff;color:#424763;border:1px solid #e4dffa;border-radius:20px;padding:30px;box-shadow:0 18px 44px #080b2429;min-width:0} #kawe-diagnostico-app .kd-result-email h3{color:#181b34;font-size:30px;margin:18px 0 14px} #kawe-diagnostico-app .kd-result-email p{color:#555c79;font-size:14px} #kawe-diagnostico-app .kd-result-free{background:#e8f7f0;color:#176549;border-radius:99px;padding:7px 11px;font-size:10px;font-weight:750;letter-spacing:.08em;display:inline-block} #kawe-diagnostico-app .kd-result-benefits{list-style:none;padding:0;margin:22px 0;color:#353b56;font-size:14px} #kawe-diagnostico-app .kd-result-benefits li{padding:6px 0 6px 24px;position:relative} #kawe-diagnostico-app .kd-result-benefits li::before{content:'✓';position:absolute;left:0;color:#16835e;font-weight:700} #kawe-diagnostico-app .kd-result-email .kd-copia{border-top:1px solid #deddec;padding-top:22px;margin-top:20px} #kawe-diagnostico-app .kd-result-input-label{display:block;font-size:13px;font-weight:650;color:#242b47;margin:0 0 8px} #kawe-diagnostico-app .kd-result-email .kd-input{background:#fff;color:#171d35;border:1px solid #c9c9df;border-radius:9px;padding:14px;min-height:50px;width:100%;box-sizing:border-box} #kawe-diagnostico-app .kd-result-email .kd-input::placeholder{color:#777d96} #kawe-diagnostico-app .kd-result-email .kd-check{color:#4e5471;font-size:12px;line-height:1.6;margin-top:14px;align-items:flex-start;gap:9px} #kawe-diagnostico-app .kd-result-email .kd-check input{accent-color:#6242ef;flex:0 0 16px;width:16px;height:16px;margin-top:3px} #kawe-diagnostico-app .kd-result-email .kd-btn{background:#6242ef;color:white;border-radius:10px;font-size:14px;padding:15px 12px;width:100%;margin-top:22px;white-space:normal} #kawe-diagnostico-app .kd-result-email .kd-btn:hover{background:#5132d7} #kawe-diagnostico-app .kd-result-email .kd-erro{color:#a12630} #kawe-diagnostico-app .kd-result-note{font-size:12px;color:#bfc6dc;margin:20px 0 0} #kawe-diagnostico-app .kd-result-email .kd-result-note{font-size:11px;color:#666a84;margin-bottom:0} #kawe-diagnostico-app .kd-result-footer{border-top:1px solid #3b405c;padding-top:28px;margin-top:36px} #kawe-diagnostico-app .kd-result-footer h3{font-size:21px;margin-bottom:8px} #kawe-diagnostico-app .kd-result-footer p{font-size:14px;color:#bfc6dc;margin:0 0 16px} #kawe-diagnostico-app .kd-result-link{display:inline-block;color:#d0c5ff;font-size:14px;font-weight:650;text-decoration:none;padding:8px 0} #kawe-diagnostico-app .kd-result-context{display:block;color:#bfc6dc;background:none;border:0;text-decoration:underline;font:inherit;font-size:12px;padding:12px 0;cursor:pointer} #kawe-diagnostico-app.kd-result-app :is(button,a,input):focus-visible{outline:3px solid #9982ff;outline-offset:4px} @media(max-width:900px){#kawe-diagnostico-app .kd-result-grid{grid-template-columns:1fr;gap:24px}#kawe-diagnostico-app .kd-result-email{max-width:none}} @media(max-width:479px){#kawe-diagnostico-app .kd-result-email{padding:22px 18px}#kawe-diagnostico-app .kd-result-email h3{font-size:27px}#kawe-diagnostico-app .kd-result-strip>div{padding:14px 12px}#kawe-diagnostico-app .kd-result-strip strong{font-size:13px}#kawe-diagnostico-app .kd-result-strip span{font-size:9px}#kawe-diagnostico-app .kd-result-stats>div{padding:14px 9px}#kawe-diagnostico-app .kd-result-intro{font-size:16px}} #kawe-diagnostico-app .kd-result-domain{display:inline-block;margin:0 0 0 16px;font-size:13px;color:#c5cce1;overflow-wrap:anywhere} #kawe-diagnostico-app .kd-result-email h3{text-wrap:balance}