/* =============================================================================
Diagnóstico de Maturidade — risk5
=============================================================================
⚠️ AS CORES NÃO SÃO ESCOLHA DESTA PÁGINA — vêm do produto.
A paleta `surface-*` e o acento são copiados de frontend/tailwind.config.js e
frontend/src/index.css do risk5. Motivo: esta é a porta de entrada do
produto; se o visitante clicar em "falar com especialista" e depois virar
cliente, ele encontra a mesma identidade. Divergir aqui criaria duas marcas.
Se o produto mudar a paleta, ESTE ARQUIVO precisa acompanhar — não há
importação automática entre os dois repositórios (o de conteúdo é separado de
propósito). É acoplamento consciente, registrado aqui para não virar deriva
silenciosa.
TEMA: a página é CLARA. A única superfície escura é a capa (`.start`), que
reproduz o painel esquerdo do login (surface-950/900 com grade e halos de
acento). Isso é identidade, não "tema escuro" — não há alternador.
========================================================================== */
@font-face {
font-family: 'Satoshi';
src: url('fonts/satoshi-variable.woff2') format('woff2-variations');
font-weight: 300 900;
font-display: swap;
}
:root {
/* Superfície — tailwind.config.js do produto */
--s-50: #f6f8fb;
--s-100: #eef2f7;
--s-200: #e1e7f0;
--s-300: #cbd5e4;
--s-400: #93a0b4;
--s-500: #64748b;
--s-600: #475569;
--s-700: #2c374b;
--s-800: #1b2436;
--s-900: #121a29;
--s-950: #0b0f17;
/* ⚠️ ACENTO — valores LIDOS DA PRODUÇÃO, não do código-fonte.
O tailwind.config.js define `brand-*` como `rgb(var(--accent-rgb))`, e o
index.css traz um default AZUL — mas o BrandingContext sobrescreve os
tokens em runtime com a cor da organização. Em https://risk5.com.br/login o
valor real é vermelho. Ler o computed style da página no ar foi o que
desfez o engano; o código-fonte sozinho leva à cor errada. */
--acento: #ff3d3d; /* --accent-rgb: 255 61 61 */
--acento-brilho: #ff7a7a; /* --accent-bright-rgb: 255 122 122 */
--acento-forte: #ff0a0a; /* --accent-strong-rgb: 255 10 10 */
--acento-profundo: #cc0000;/* --accent-deep-rgb: 204 0 0 */
/* Escala de maturidade — severidade, constante e independente da marca */
--nivel-1: #d20000;
--nivel-2: #e85d00;
--nivel-3: #d9a400;
--nivel-4: #4a9c2d;
--nivel-5: #157a3f;
--fonte: 'Satoshi', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
--sombra: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .07);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: var(--fonte);
color: var(--s-900);
background: #fff;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
/* `tela()` em app.js move o foco pro h1/h2 a cada troca de tela (pra quem
navega por teclado/leitor de tela perceber a mudança de conteúdo) — mas
título não é controle interativo, então a moldura vermelha do focus-ring
aí é só ruído visual pra quem usa mouse. O foco em si continua (screen
reader/teclado ainda percebem), só sem o quadrado. */
h1:focus, h2:focus { outline: none; }
.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;
}
#app { min-height: 100%; display: flex; flex-direction: column; }
/* =========================================================================
CAPA — reproduz o painel esquerdo do login do produto
========================================================================= */
.start {
flex: 1; min-height: 100vh;
display: flex; align-items: center; justify-content: center;
background: var(--s-950);
color: var(--s-100);
padding: 48px 24px;
position: relative; overflow: hidden;
}
/* Grade sutil + halos de acento: os mesmos elementos do login. */
.start::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px),
linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px);
background-size: 48px 48px;
}
.start::after {
content: ""; position: absolute; pointer-events: none;
top: -140px; left: -110px; width: 520px; height: 420px;
border-radius: 50%; filter: blur(80px);
background: rgb(255 61 61 / .13);
}
.start-inner { max-width: 620px; width: 100%; position: relative; z-index: 2; }
.start .logo { height: 40px; width: auto; margin-bottom: 44px; display: block; }
/*
* O que envolve o logo (achado da revisão do PR #32): sem isto, ele herda
* o layout do container em cada uso -- vira item de flex esticado em .side
* (column, align-items:stretch) e continua inline (fatiado em caixas
* anônimas ao redor do ![]()
) em .start-inner, que é bloco comum. Fixar aqui
* faz a área clicável e o outline de foco seguirem o tamanho do logo nos
* dois lugares, e não o do container.
*/
.logo-link { display: block; width: max-content; }
.eyebrow {
color: var(--acento); font-weight: 700; letter-spacing: .16em;
text-transform: uppercase; font-size: 12px; margin: 0 0 18px;
}
.start h1 {
font-size: clamp(30px, 5.4vw, 44px); line-height: 1.1; font-weight: 800;
letter-spacing: -.025em; margin: 0 0 20px; color: var(--s-100);
text-wrap: balance;
}
.start h1 span { color: var(--acento); }
.start .lead { font-size: 16px; color: var(--s-400); max-width: 520px; margin: 0 0 36px; }
.modos { display: grid; gap: 14px; margin-bottom: 26px; }
@media (min-width: 620px) { .modos { grid-template-columns: 1fr 1fr; } }
/* Container do widget de CAPTCHA (AWS WAF) -- o SDK desenha o próprio
custom element/puzzle dentro.
Nome fora do padrão óbvio ("captcha-container"), de propósito: achado da
revisão do PR #33 -- é o id que o auto-hook do próprio bundle procura.
⚠️ O FUNDO CLARO NÃO É ENFEITE -- é o que torna o texto legível.
Reportado em produção logo após o passo 4 entrar no ar: o enunciado
("Vamos confirmar que você é humano" / "Escolha todos os ...") aparecia
ilegível. Causa, medida no bundle do SDK (`jsapi.js`, 198 KB):
1. o widget aplica `:host{all:initial;}` no shadow root, o que ZERA a
herança -- o texto não fica branco como o resto da capa, cai no
`color` inicial (PRETO) e o fundo do host fica transparente;
2. a capa desta tela é escura (`.start` = `--s-950`), então o resultado
é preto sobre azul-escuro;
3. o SDK é desenhado PARA fundo claro -- ele mesmo pinta os próprios
elementos com `#ECECEC` e `#F2F3F3` (slider, painel de ajuda).
Por que não "pintar o texto de branco", que era a correção intuitiva: o
`all:initial` bloqueia a herança, então CSS nosso não alcança o texto; e
o SDK não expõe tema nenhum (medido: zero ocorrência de
`darkMode`/`theme`/`skin`/`colorScheme` e zero custom property no bundle).
Mesmo que alcançasse, texto branco quebraria os elementos claros do item
3. Dar ao widget a superfície clara que ele já espera é o único conserto
que não depende de interno de bundle minificado de terceiro.
`color-scheme: light` impede o navegador de auto-escurecer os controles
de formulário de dentro do widget quando o SO está em tema escuro. */
.risk5-captcha {
margin-bottom: 26px;
background: #fff;
color: var(--s-900);
color-scheme: light;
border-radius: 14px;
padding: 14px;
width: max-content;
max-width: 100%;
box-shadow: var(--sombra);
}
.modo {
text-align: left; padding: 20px; border-radius: 14px;
border: 1px solid var(--s-800); background: var(--s-900); color: var(--s-100);
transition: border-color .18s, background .18s;
}
.modo:hover { border-color: var(--acento); background: var(--s-800); }
.modo b { display: block; font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.modo span { display: block; font-size: 13px; color: var(--s-400); }
/* Sem isto, um botão disabled fica visualmente IGUAL a um clicável — o clique
some sem aviso nenhum. Precisa parecer inerte de longe. */
.modo:disabled { opacity: .45; cursor: not-allowed; }
.modo:disabled:hover { border-color: var(--s-800); background: var(--s-900); }
.start .nota { font-size: 13px; color: var(--s-500); margin: 0; }
/* Variante clara da capa — SÓ a primeira tela, via `?t=l` na URL (pro
comercial escolher em link de campanha, sem precisar de botão). Sem o
parâmetro, ou com `?t=d`, o padrão continua o escuro de sempre. */
.start.light { background: #fff; color: var(--s-900); }
.start.light::before { background-image: linear-gradient(rgb(0 0 0 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(0 0 0 / .035) 1px, transparent 1px); }
.start.light::after { background: rgb(255 61 61 / .08); }
.start.light h1 { color: var(--s-900); }
.start.light .lead { color: var(--s-600); }
.start.light .nota { color: var(--s-500); }
.start.light .modo { border-color: var(--s-200); background: var(--s-50); color: var(--s-900); }
.start.light .modo:hover { border-color: var(--acento); background: #fff; }
.start.light .modo span { color: var(--s-500); }
.start.light .field label { color: var(--s-600); }
.start.light .field input { background: #fff; color: var(--s-900); border-color: var(--s-200); }
.start.light .field input::placeholder { color: var(--s-400); }
.start.light .field input:focus { background: var(--s-50); }
.start.light .consent { color: var(--s-600); }
.row2 { display: flex; gap: 14px; flex-wrap: wrap; }
.row2 .field { flex: 1; min-width: 220px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--s-400); margin-bottom: 8px; }
.field input {
width: 100%; padding: 14px 15px; border-radius: 12px; border: 1px solid var(--s-800);
background: var(--s-900); color: #fff; font-size: 15px; font-family: var(--fonte); transition: border-color .2s, background .2s;
}
.field input:focus { outline: none; border-color: var(--acento); background: var(--s-800); }
.field input::placeholder { color: var(--s-600); }
.field label .obrig { color: var(--acento); font-weight: 700; }
.field label .campo-opcional { color: var(--s-600); font-weight: 400; }
/* min-height evita o layout "pular" quando o texto aparece/some. */
.aviso-campos { min-height: 20px; font-size: 13px; color: var(--acento); margin: 2px 0 18px; }
.consent {
display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 26px;
font-size: 13px; color: var(--s-400); cursor: pointer; max-width: 540px;
}
.consent input { margin-top: 3px; flex: none; accent-color: var(--acento); }
/* =========================================================================
QUIZ — claro
========================================================================= */
.quiz { flex: 1; display: grid; grid-template-columns: 300px 1fr; min-height: 100vh; }
@media (max-width: 900px) { .quiz { grid-template-columns: 1fr; } .side { display: none; } }
/* A lateral é escura, como a do login — âncora de identidade durante o quiz.
Mesma grade sutil da capa (.start::before), pra manter a identidade durante
o quiz inteiro, não só na tela de abertura. `position:relative; z-index:0`
cria um contexto de empilhamento próprio, então o `z-index:-1` do
pseudo-elemento fica atrás do conteúdo real sem precisar mexer em cada
filho (logo, progresso, lista de pilares). */
.side { background: var(--s-950); color: var(--s-100); padding: 26px 22px; display: flex; flex-direction: column; position: relative; z-index: 0; overflow: hidden; }
.side::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
background-image:
linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px),
linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px);
background-size: 48px 48px;
}
.side .logo { height: 26px; width: auto; margin-bottom: 24px; display: block; }
.side .side-sub {
font-size: 10px; color: var(--s-500); margin: 0 0 26px; text-align: center;
text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
}
.overall { background: var(--s-900); border: 1px solid var(--s-800); border-radius: 14px; padding: 16px; margin-bottom: 20px; }
.overall .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--s-500); margin: 0 0 6px; }
.overall .num { font-size: 28px; font-weight: 800; margin: 0; }
.overall .num small { font-size: 14px; color: var(--s-500); font-weight: 500; }
.overall .bar { height: 6px; background: var(--s-800); border-radius: 4px; margin-top: 10px; overflow: hidden; }
.overall .bar i { display: block; height: 100%; background: var(--acento); width: 0; transition: width .4s; }
.plist { list-style: none; flex: 1; overflow-y: auto; margin: 0 -6px; padding: 0; }
.plist li { padding: 10px; border-radius: 10px; display: flex; align-items: center; gap: 11px; margin-bottom: 2px; cursor: pointer; transition: background .15s; }
.plist li:hover { background: var(--s-900); }
.plist li.active { background: var(--s-900); }
.plist li .dot {
width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--s-800);
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; color: var(--s-400);
}
.plist li.done .dot { background: var(--acento); color: #fff; }
.plist li .pn { font-size: 13px; line-height: 1.25; flex: 1; }
.side .foot { font-size: 11px; color: var(--s-600); margin-top: 18px; }
.main { display: flex; flex-direction: column; background: var(--s-50); }
.topbar {
background: #fff; border-bottom: 1px solid var(--s-200);
padding: 14px 28px; display: flex; align-items: center; gap: 18px;
}
.topbar .pill-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--acento); }
.topbar .prog { flex: 1; height: 8px; background: var(--s-200); border-radius: 5px; overflow: hidden; }
.topbar .prog i { display: block; height: 100%; background: var(--acento); width: 0; transition: width .4s; }
.topbar .prog-txt { font-size: 13px; color: var(--s-500); font-weight: 600; white-space: nowrap; }
.qwrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 36px 20px; }
.qcard {
background: #fff; border: 1px solid var(--s-200); border-radius: 18px;
box-shadow: var(--sombra); padding: 36px; max-width: 720px; width: 100%;
}
.qcard .qnum { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-400); margin: 0 0 10px; }
.qcard h2 { font-size: clamp(19px, 2.4vw, 24px); font-weight: 700; line-height: 1.32; letter-spacing: -.015em; margin: 0 0 24px; }
.opts { display: grid; gap: 10px; margin-bottom: 28px; }
.opt {
display: flex; gap: 12px; align-items: flex-start;
padding: 14px 16px; border: 1.5px solid var(--s-200); border-radius: 12px;
background: var(--s-50); cursor: pointer; transition: border-color .15s, background .15s;
}
.opt:hover { border-color: var(--acento); }
.opt input { margin: 2px 0 0; accent-color: var(--acento); flex: none; }
.opt:has(input:checked) { border-color: var(--acento); background: rgb(255 61 61 / .06); }
.opt span { font-size: 15px; }
.acoes { display: flex; gap: 12px; justify-content: space-between; }
.btn {
display: inline-block; font-weight: 700; font-size: 15px; border-radius: 12px; padding: 14px 28px;
background: var(--acento); color: #fff; text-decoration: none; transition: background .18s;
}
.btn:hover { background: var(--acento-profundo); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--s-700); border: 1.5px solid var(--s-200); }
.btn-ghost:hover { background: var(--s-50); }
/* =========================================================================
RESULTADO — deck de slides (capa, resumo executivo, radar, 8 pilares,
recomendações, CTA), estrutura idêntica ao protótipo v2 já aprovado —
só com os tokens do tema atual (--acento*, --s-*) em vez da paleta
--nf-red fixa do protótipo.
========================================================================= */
.deck-shell { flex: 1; min-height: 100vh; background: var(--s-950); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px; }
.slide { width: 100%; max-width: 1120px; aspect-ratio: 16 / 9; background: #fff; border-radius: 18px; overflow: hidden; position: relative; box-shadow: 0 30px 90px rgb(0 0 0 / .5); }
.deck-nav { display: flex; align-items: center; gap: 18px; margin-top: 20px; color: #fff; }
.deck-nav button, .deck-nav a {
width: 46px; height: 46px; border-radius: 50%; background: var(--s-900); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 20px;
border: 1px solid var(--s-800); transition: background .15s, border-color .15s; text-decoration: none;
}
.deck-nav button:hover, .deck-nav a:hover { background: var(--acento); border-color: var(--acento); }
.deck-nav button:disabled { opacity: .3; cursor: not-allowed; }
.deck-nav .count { font-size: 14px; color: var(--s-400); min-width: 64px; text-align: center; font-weight: 600; }
.deck-nav .sp { width: 1px; height: 26px; background: var(--s-800); margin: 0 4px; }
.deck-nav .txtbtn { width: auto; padding: 0 18px; border-radius: 23px; font-size: 13px; font-weight: 700; gap: 8px; }
.dots { display: flex; gap: 7px; margin-top: 16px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--s-800); cursor: pointer; transition: background .15s, width .15s; }
.dots i.on { background: var(--acento); width: 22px; border-radius: 4px; }
/* ⚠️ TAMANHO FIXO DE PROPÓSITO (1120×630, o mesmo 16:9 do `.slide`/`.laudo
.sl-wrap` que o envolve) — NÃO responsivo. `.sl` é um design de canvas +
texto em px absolutos (gauge 280px, radar 460px, padding 56/64px…) que
nunca escalava com o contêiner; só o contêiner encolhia, sobrando os
filhos fixos por fora — era isso que "saía da tela" no celular. Em vez de
tentar tornar CADA medida responsiva, o `.sl` inteiro escala como bloco via
`transform: scale()`, e quem calcula a escala (JS, em `app.js`/`results.js`)
é sempre `larguraDoContêiner / 1120` — a mesma imagem, do mesmo tamanho de
design, só menor. `transform` não afeta o cálculo de posição dos filhos
absolutos (`.pg`, `.barcode`, `.logo.slogo`): eles continuam relativos ao
box de 1120×630 não-escalado, só o PAINT final é que sai menor. */
.sl {
position: absolute; top: 0; left: 0;
width: 1120px; height: 630px;
transform: scale(var(--escala-slide, 1));
transform-origin: top left;
padding: 56px 64px; display: flex; flex-direction: column; background: #fff;
/* ⚠️ Achado da 3ª rodada de revisão: o `overflow-wrap` que eu tinha posto
só em `.sl.cover h2`/`.sl.cta h2` (pro caso da palavra destacada do
título) não cobria o dado real que estoura mais — `empresa` digitado
pelo visitante (até 200 caracteres, sem espaço garantido) entra em
VÁRIOS lugares do slide (h4 do resumo executivo, `.cmeta` da capa) via
interpolação de i18n. Sem quebra, isso não só pana a página no celular
— no DESKTOP o `.sl-wrap`/`.slide` tem `overflow:hidden`, então o nome
da empresa simplesmente CORTA no PDF entregue por e-mail. Uma regra
aqui, em vez de listar seletor por seletor, cobre qualquer texto futuro
também. */
overflow-wrap: anywhere;
}
.sl .kicker { color: var(--acento); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; margin: 0 0 14px; }
.sl h3 { font-size: 34px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 8px; }
/* ⚠️ QUEM POSICIONA É O LINK, não a imagem. O logo virou clicável (leva ao
site institucional) e o invólucro `` precisa ser o elemento absoluto:
deixar o `position` no `![]()
` faria o `` entrar como item a mais no
flex column do `.sl` e empurrar o conteúdo — o mesmo layout que vira o PDF
do e-mail. */
.sl .logo-link.slogo-link { position: absolute; top: 38px; right: 56px; }
.sl .logo.slogo { height: 22px; width: auto; }
.sl .pg { position: absolute; bottom: 34px; right: 56px; font-size: 12px; color: var(--s-400); font-weight: 600; margin: 0; }
.sl .barcode { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--acento); }
.sl.cover, .sl.cta {
color: #fff;
background: radial-gradient(1000px 500px at 85% 0%, #2a2a2a, transparent 60%), linear-gradient(160deg, #151515, #000);
}
.sl.cta { background: radial-gradient(900px 500px at 15% 100%, #2a2a2a, transparent 60%), linear-gradient(160deg, #151515, #000); justify-content: center; }
/* Capa: logo ancorado perto do topo, não centralizado no meio do slide —
centralizar deixava uma sobra vazia grande acima e o logo "colado" na
eyebrow logo abaixo dele, sem respiro nenhum entre os dois. */
.sl.cover { justify-content: flex-start; padding-top: 72px; }
.sl.cover .logo { margin-bottom: 56px; }
.sl.cover::before, .sl.cta::before {
content: ""; position: absolute; inset: 0;
background-image: linear-gradient(rgb(255 61 61 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 61 61 / .07) 1px, transparent 1px);
background-size: 40px 40px;
}
.sl.cover::before { mask-image: radial-gradient(700px 400px at 75% 40%, #000, transparent 72%); }
.sl.cta::before { mask-image: radial-gradient(700px 400px at 25% 60%, #000, transparent 72%); }
.sl.cover > *, .sl.cta > * { position: relative; z-index: 2; }
.sl.cover .logo { height: 46px; width: auto; }
/* Mesmo problema do slide 1 (ver .sl.cover acima): sem margem própria, o
logo ficava colado no título logo abaixo — e pequeno demais (34px) pra
ter presença num slide de fechamento. */
.sl.cta .logo { height: 44px; width: auto; margin-bottom: 40px; }
.sl.cover .eyebrow { color: var(--acento); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 20px; }
.sl.cover h2 { font-size: 52px; font-weight: 900; letter-spacing: -.025em; line-height: 1.04; max-width: 80%; margin: 0; }
.sl.cover h2 span { color: var(--acento); }
.sl.cover .csub { font-size: 18px; color: #c4c4c4; margin-top: 22px; }
.sl.cover .cmeta { margin-top: 44px; display: flex; gap: 40px; }
.sl.cover .cmeta .l { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.sl.cover .cmeta .v { font-size: 19px; font-weight: 700; margin: 4px 0 0; }
.exec-grid { display: grid; grid-template-columns: 320px 1fr; gap: 40px; flex: 1; align-items: center; }
.gauge-wrap { text-align: center; }
/* Círculo maior que o mínimo pro texto caber: "Em Desenvolvimento" (o nome de
nível mais longo) raspava na borda do anel no tamanho antigo. */
.gauge { position: relative; width: 280px; height: 280px; margin: 0 auto; }
.gauge .lvltxt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 28px; }
.gauge .lvltxt .pct { font-size: 48px; font-weight: 900; line-height: 1; margin: 0; }
.gauge .lvltxt .lv { font-size: 14px; font-weight: 700; color: var(--acento); text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 0; text-align: center; }
.exec-txt h4 { font-size: 20px; font-weight: 800; margin: 0 0 12px; }
.exec-txt p { font-size: 15px; color: #444; line-height: 1.6; margin: 0 0 16px; }
.exec-stats { display: flex; gap: 14px; margin-top: 8px; }
.exec-stats .st { flex: 1; background: var(--s-50); border-radius: 12px; padding: 14px 16px; }
/* `overflow-wrap: normal` sobrepõe o `anywhere` herdado de `.sl` — achado
BAIXO da 4ª rodada: sem isto, abaixo de ~333px de largura o `overflow-wrap:
anywhere` (que existe pra não deixar `empresa` cortar em outro lugar do
slide) quebra até "70%"/"22%" em duas linhas, quando cabiam numa só —
cosmético, mas gratuito nesse rótulo curto e sem risco de overflow real. */
.exec-stats .st .n { font-size: 26px; font-weight: 900; color: var(--s-900); margin: 0; overflow-wrap: normal; }
.exec-stats .st .n.red { color: var(--acento); }
.exec-stats .st .t { font-size: 12px; color: var(--s-500); margin: 2px 0 0; }
.radar-grid { display: grid; grid-template-columns: 1fr 380px; gap: 30px; flex: 1; align-items: center; }
.radar-box { position: relative; height: 100%; min-height: 380px; display: flex; align-items: center; justify-content: center; }
.rank-list { display: flex; flex-direction: column; gap: 9px; }
.rank { display: flex; align-items: center; gap: 12px; }
.rank .rn { font-size: 12px; font-weight: 700; color: #333; width: 150px; line-height: 1.15; }
.rank .rbar { flex: 1; height: 22px; background: var(--s-50); border-radius: 6px; overflow: hidden; position: relative; }
.rank .rbar i { display: block; height: 100%; border-radius: 6px; }
.rank .rv { font-size: 12px; font-weight: 800; width: 40px; text-align: right; }
.pd { flex: 1; display: grid; grid-template-columns: 250px 1fr; gap: 36px; align-items: center; }
.pd-score { text-align: center; }
/* Mesmo racional do .gauge — anel maior pro nome de nível mais longo caber. */
.pd-ring { position: relative; width: 210px; height: 210px; margin: 0 auto 14px; }
.pd-ring .in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 20px; }
.pd-ring .in .p { font-size: 38px; font-weight: 900; margin: 0; }
.pd-ring .in .l { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 2px 0 0; text-align: center; }
.pd-body h4 { font-size: 15px; font-weight: 800; color: var(--acento); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 8px; }
.pd-body .diag { font-size: 15px; color: #333; line-height: 1.55; margin: 0 0 18px; }
.pd-body .rec-t { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--s-600); margin: 0 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 13px; font-weight: 600; background: rgb(255 61 61 / .06); color: var(--acento-profundo); border: 1px solid rgb(255 61 61 / .28); padding: 7px 13px; border-radius: 20px; }
.rec-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: center; }
.reccard { background: #fff; border: 1px solid var(--s-200); border-left: 4px solid var(--acento); border-radius: 12px; padding: 18px 20px; }
.reccard .pr { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--acento); display: inline-block; padding: 3px 9px; border-radius: 6px; margin-bottom: 9px; }
.reccard .pr.med { background: var(--s-600); }
.reccard h5 { font-size: 16px; font-weight: 800; margin: 0 0 5px; }
.reccard p { font-size: 13px; color: #555; line-height: 1.5; margin: 0; }
.reccard .svc { font-size: 12px; color: var(--acento); font-weight: 700; margin-top: 9px; }
.sl.cta h2 { font-size: 40px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; max-width: 78%; margin: 0; }
.sl.cta h2 span { color: var(--acento); }
.sl.cta > p { font-size: 17px; color: #c4c4c4; margin-top: 18px; max-width: 60%; }
.sl.cta .steps { display: flex; gap: 16px; margin-top: 34px; }
.sl.cta .steps .s { flex: 1; background: rgb(255 255 255 / .05); border: 1px solid #2a2a2a; border-radius: 14px; padding: 20px; }
.sl.cta .steps .no { color: var(--acento); font-weight: 900; font-size: 22px; margin: 0; }
.sl.cta .steps .t { font-size: 15px; font-weight: 700; margin: 8px 0 0; }
.sl.cta .steps .d { font-size: 13px; color: #a5a5a5; margin: 4px 0 0; line-height: 1.45; }
.sl.cta .contact { margin-top: 34px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sl.cta .contact .btn.ghost { background: transparent; border: 1px solid #444; color: #fff; }
.sl.cta .contact .btn.ghost:hover { border-color: #fff; background: rgb(255 255 255 / .06); }
/* ⚠️ 03/08/2026, achado da revisão adversarial do PR #35: escalar `.sl` como
bloco sem piso deixava o texto ILEGÍVEL no celular (fonte efetiva de 5px a
375px de largura — medido, não suposição). O objetivo do usuário era o
PDF ser independente de dispositivo, não a TELA — e quem garante isso pro
PDF é só o `@media print` (results.css), que já ignora completamente o que
acontece aqui embaixo. Por isso: abaixo de ~620px a régua muda de "encolher
o mesmo design" pra "reempilhar em coluna única, tamanho real" — nunca os
dois ao mesmo tempo. `screen` explícito: nunca alcança a impressão, mesmo
que uma folha física acabe sendo mais estreita que 620px de alguma forma. */
@media screen and (max-width: 620px) {
/* `.slide` também sai do molde 16:9 fixo com `overflow:hidden` — senão o
`.sl` reempilhado (mais alto que 630px em coluna única) fica cortado
por baixo em vez de a página simplesmente crescer e rolar. */
.slide { aspect-ratio: unset; overflow: visible; }
.sl {
position: static;
width: 100%;
height: auto;
transform: none;
padding: 24px;
}
.exec-grid, .radar-grid, .pd, .rec-grid { grid-template-columns: 1fr; }
/* ⚠️ CORREÇÃO (achado ALTO da 4ª rodada, e uma 2ª camada achada medindo o
próprio fix): a versão original desta regra (`.gauge, .pd-ring {
max-width:100%; aspect-ratio:1 }`, sem o resto) era um NO-OP — medido,
geometria idêntica com e sem ela. Dois motivos: (1) `max-width:100%`
persegue a largura do `.gauge-wrap`/track do grid, cujo tamanho mínimo
automático é o min-content do próprio `.gauge` (280px fixo) — o
percentual nunca clampa nada; (2) `aspect-ratio` só age quando PELO MENOS
UM eixo é `auto` — `.gauge`/`.pd-ring` têm width E height fixos em px,
então a propriedade é ignorada.
Depois de resolver isso com `min-width:0` no item do grid + `height:auto`
no wrapper, o círculo ainda saía OVAL (medido: 252×280 num viewport de
300px) — a largura clampava certo, a altura não seguia. Causa: o
`