/* ========================================================================== Fluent Plus — Motor de Estimativa de Fluência (motor.html) Estilos específicos da jornada de 8 etapas (docs/spec-motor-fluencia.md, Parte 11). Reaproveita as variáveis, cores, tipografia e a maioria das classes já definidas em css/style.css (.container, .hero, .diagnostico, .progress-bar-*, .opcoes-lista/.opcao, .btn*, .campo, .erro-mensagem, .nav-botoes, .resultado/.resultado-bloco). Este arquivo só acrescenta o que não tem equivalente lá: lista da apresentação, tela de processamento (carregando) e tela de erro inesperado. ========================================================================== */ /* .btn define display:inline-block, o que anula o display:none padrão do atributo [hidden] do navegador para qualquer botão escondido via JS (ex.: "Voltar" na primeira pergunta). Reforça o comportamento nativo. */ [hidden] { display: none !important; } .hero-lista { list-style: none; padding: 0; margin: 0 0 28px; text-align: left; display: inline-block; } .hero-lista li { padding: 6px 0 6px 26px; position: relative; color: var(--cor-texto-suave); } .hero-lista li::before { content: "✓"; position: absolute; left: 0; color: var(--cor-secundaria-escura); font-weight: 700; } /* Nota discreta abaixo do botão da apresentação: informa a duração sem competir com a chamada para ação. */ .hero-nota { margin-top: 14px; font-size: 0.9rem; color: var(--cor-texto-suave); } /* ---------- Progresso (segunda linha: percentual) ---------- */ .progress-percent { font-size: 0.8rem; color: var(--cor-texto-suave); margin: -24px 0 28px; } /* ---------- Etapa 4 — Processamento (estado "carregando") ---------- */ .tela-processamento { padding: 80px 20px; text-align: center; } .spinner { width: 40px; height: 40px; margin: 0 auto 24px; border: 4px solid var(--cor-borda); border-top-color: var(--cor-secundaria); border-radius: 50%; animation: girar 0.8s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } .processamento-mensagem { font-size: 1.1rem; color: var(--cor-texto); } /* ---------- Estado "erro inesperado" ---------- */ .tela-erro { padding: 80px 20px; text-align: center; } .tela-erro p { color: var(--cor-erro); font-size: 1.05rem; margin-bottom: 24px; } /* ========================================================================== TELAS DE RESULTADO — Etapas 5 a 8 (Parte 11 §11.13–11.18) Prefixo .rv-* ("resultado visual"). Tudo aqui é montado por js/motor-fluencia/resultado-visual.js — o HTML das quatro etapas tem só o container e os botões. Reescrito em 09/09/2026. Antes disso o resultado inteiro era .resultado-bloco (style.css): um

e parágrafos, oito vezes seguidas, tudo no mesmo peso. A informação estava lá e ninguém achava nada. As regras da identidade, aplicadas aqui: - creme é a página, branco é o cartão (relação invertida em relação à maioria dos softwares — dá aparência de material impresso, não de painel); - o dourado é régua, marcador, ícone e número de resultado. Nunca preenche campo grande e nunca compõe texto corrido: --cor-secundaria-escura é o tom mais claro que passa em contraste sobre branco; - Playfair só em título e em número que precisa parecer resultado; - nenhum gradiente, nenhuma textura. Campos de cor chapada e olho só. ========================================================================== / / Fundo creme só nas telas de resultado. A classe entra e sai do em mostrarTela() (jornada.js) porque a cor precisa sangrar até a borda da janela, e .container para em 640px. / body.fundo-creme { background: var(--cor-fundo-alt); } .resultado { padding: 32px 20px 64px; } / ---------- Etiqueta de seção (o "eyebrow" da marca) ---------- / .rv-etiqueta { margin: 0 0 14px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cor-secundaria-escura); } / Da segunda etiqueta em diante (a Etapa 7 tem duas), o espaço acima separa os dois assuntos da tela. / .rv-cartao + .rv-etiqueta { margin-top: 34px; } / ---------- Cartão ---------- / .rv-cartao { margin: 0 0 16px; padding: 24px 20px; background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra); } .rv-cartao-titulo { margin: 0 0 12px; font-size: 1.3rem; color: var(--cor-primaria); } .rv-cartao p { margin: 0 0 12px; color: var(--cor-texto-suave); } .rv-cartao p:last-child { margin-bottom: 0; } / Ressalvas obrigatórias (CEFR, natureza da estimativa) e o perfil informado. Continuam na tela inteiras — só param de disputar atenção com o resultado. / .rv-nota { font-size: .82rem; line-height: 1.5; color: var(--cor-texto-suave); opacity: .85; } .rv-cartao .rv-nota { margin-top: 16px; } / Frase de virada: a única linha de cada cartão que fala direto com a pessoa. / .rv-cartao .rv-frase { margin: 20px 0 0; padding-left: 14px; border-left: 2px solid var(--cor-secundaria); font-weight: 600; color: var(--cor-primaria); } / ---------- Etapa 5 — o número ---------- / .rv-destaque { margin: 0 0 16px; padding: 40px 24px 30px; background: var(--cor-primaria); color: var(--cor-fundo-alt); border-radius: var(--raio); text-align: center; box-shadow: 0 10px 28px rgba(0, 49, 83, .18); } .rv-destaque-numero { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 0; } .rv-destaque-valor { font-family: var(--fonte-titulo); font-weight: 800; / clamp para o número não estourar a linha no celular nem ficar tímido no desktop — é a única coisa na tela que pode ocupar esse tamanho. / font-size: clamp(3.4rem, 17vw, 5rem); line-height: 1; color: var(--cor-secundaria); } .rv-destaque-unidade { font-family: var(--fonte-titulo); font-weight: 700; font-size: clamp(1.4rem, 6vw, 2rem); color: var(--cor-secundaria); } .rv-destaque-legenda { margin: 12px 0 0; font-size: 1.05rem; } / Régua dourada de 40px — o único traço expressivo da identidade. / .rv-regra { display: block; width: 40px; height: 2px; margin: 22px auto; background: var(--cor-secundaria); } .rv-destaque-ritmo { margin: 0; font-size: .9rem; / Creme com transparência em vez de uma cor nova: continua legível sobre o navy e não introduz mais um valor fixo na paleta. / color: rgba(253, 246, 227, .75); } / ---------- Faixa provável (Etapas 5 e 6) ---------- / .rv-faixa { margin-top: 26px; } .rv-faixa-trilho { position: relative; height: 2px; border-radius: 999px; background: rgba(200, 151, 58, .45); } .rv-faixa-ponto { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--cor-secundaria); box-shadow: 0 0 0 4px rgba(200, 151, 58, .22); } .rv-faixa-limites { display: flex; justify-content: space-between; margin: 12px 0 0; font-size: .85rem; color: rgba(253, 246, 227, .75); } .rv-faixa-centro { margin: 8px 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--cor-secundaria); } / Mesma peça dentro de um cartão branco (seção da margem, Etapa 6). / .rv-faixa-clara .rv-faixa-trilho { background: var(--cor-borda); } .rv-cartao .rv-faixa-clara .rv-faixa-limites { color: var(--cor-texto-suave); } .rv-cartao .rv-faixa-clara .rv-faixa-centro { color: var(--cor-secundaria-escura); } / ---------- Etapa 6 — pontuação e escala ---------- / .rv-cartao .rv-placar { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; } .rv-placar-valor { font-family: var(--fonte-titulo); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--cor-secundaria-escura); } .rv-placar-total { font-size: 1.05rem; color: var(--cor-texto-suave); } .rv-cartao .rv-placar-faixa { margin: 0 0 24px; font-weight: 600; color: var(--cor-primaria); } .rv-escala { position: relative; } .rv-escala-trilho { position: relative; height: 8px; border-radius: 999px; background: var(--cor-fundo-alt); } .rv-escala-preenchida { width: 0; height: 100%; border-radius: 999px; background: var(--cor-secundaria); transition: width .5s cubic-bezier(.2, .6, .3, 1); } .rv-escala-marcador { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--cor-primaria); border: 3px solid var(--cor-fundo); } / "Você está aqui" é centrado no marcador. O left vem do JS, preso entre 12% e 88% para o rótulo não sair do cartão nas pontas da escala. / .rv-cartao .rv-escala-aqui { position: relative; display: inline-block; margin: 10px 0 0; transform: translateX(-50%); white-space: nowrap; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-primaria); } .rv-cartao .rv-escala-limites { display: flex; justify-content: space-between; margin: 2px 0 0; font-size: .8rem; } / ---------- Etapa 6 — horas restantes ---------- / .rv-cartao .rv-medio { display: flex; align-items: baseline; gap: 8px; margin: 0; color: var(--cor-secundaria-escura); font-family: var(--fonte-titulo); } .rv-medio-aprox { font-size: 1.5rem; } .rv-medio-valor { font-weight: 800; font-size: 2.7rem; line-height: 1; } .rv-medio-unidade { font-size: 1.3rem; } .rv-cartao .rv-medio-legenda { margin: 4px 0 16px; font-size: .9rem; } / ---------- Trilhas verticais (jornada da Etapa 6, caminho da Etapa 7) ---------- / .rv-jornada, .rv-caminho { position: relative; list-style: none; margin: 24px 0 0; padding: 0 0 0 26px; } .rv-jornada::before, .rv-caminho::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--cor-borda); } .rv-jornada-item, .rv-caminho-item { position: relative; padding-bottom: 20px; } .rv-jornada-item:last-child, .rv-caminho-item:last-child { padding-bottom: 0; } / A trilha não tem margem inferior própria; quem vier depois dela (o parágrafo de benefício do Roadmap) precisa do respiro, senão encosta no último item. / .rv-cartao .rv-jornada + p, .rv-cartao .rv-caminho + p { margin-top: 22px; } .rv-jornada-item::before, .rv-caminho-item::before { content: ""; position: absolute; left: -26px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--cor-fundo); border: 2px solid var(--cor-borda); } / Onde a pessoa está: dourado. Onde ela quer chegar: navy. O meio fica neutro. / .rv-jornada-atual::before, .rv-caminho-atual::before { background: var(--cor-secundaria); border-color: var(--cor-secundaria); } .rv-jornada-destino::before, .rv-caminho-destino::before { background: var(--cor-primaria); border-color: var(--cor-primaria); } .rv-jornada-rotulo, .rv-caminho-rotulo { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-secundaria-escura); } .rv-jornada-nome, .rv-caminho-nome { display: block; font-weight: 600; color: var(--cor-primaria); } .rv-jornada-destino .rv-jornada-nome, .rv-caminho-destino .rv-caminho-nome { font-family: var(--fonte-titulo); font-size: 1.2rem; } / No destino o rótulo é legenda ("Autonomia em inglês"), não versalete. / .rv-jornada-destino .rv-jornada-rotulo, .rv-caminho-destino .rv-caminho-rotulo { font-size: .85rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cor-texto-suave); } / ---------- Etapa 6 — confiança ---------- / .rv-info { display: flex; gap: 12px; margin-top: 22px; padding: 14px 16px; border-radius: var(--raio); background: var(--cor-fundo-alt); } .rv-info-icone { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: var(--cor-secundaria-escura); } .rv-cartao .rv-info-titulo { margin: 0 0 4px; font-weight: 700; color: var(--cor-primaria); } .rv-cartao .rv-info-texto p:last-child { font-size: .9rem; } / ---------- Etapa 6 — fatores ---------- / .rv-fatores { display: grid; gap: 12px; list-style: none; margin: 18px 0 0; padding: 0; } .rv-fator { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--cor-borda); border-radius: var(--raio); } .rv-fator-icone { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cor-fundo-alt); color: var(--cor-secundaria-escura); } .rv-fator-icone svg { width: 19px; height: 19px; } .rv-cartao .rv-fator-titulo { margin: 0 0 2px; font-weight: 600; color: var(--cor-primaria); } .rv-cartao .rv-fator-texto { margin: 0; font-size: .9rem; } / ---------- Etapa 6 — ritmo atual x eficiência ---------- / .rv-comparativo { display: grid; gap: 12px; margin-top: 22px; } / Coluna flex com o meio crescendo: as duas descrições têm comprimentos diferentes, e sem isto a seta e o resultado de um lado ficavam em altura diferente do outro — o paralelo que a seção inteira está fazendo se perde. / .rv-comparativo-lado { display: flex; flex-direction: column; padding: 18px 16px; border: 1px solid var(--cor-borda); border-radius: var(--raio); text-align: center; } .rv-comparativo-alvo { border-color: var(--cor-secundaria); background: rgba(200, 151, 58, .07); } .rv-cartao .rv-comparativo-rotulo { margin: 0 0 8px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-secundaria-escura); } .rv-cartao .rv-comparativo-valor { / flex:1 para as duas descrições ocuparem a mesma altura e a seta sair no mesmo ponto dos dois lados. / flex: 1; margin: 0; font-size: .92rem; } .rv-comparativo-seta { display: block; margin: 10px 0; color: var(--cor-borda); } .rv-cartao .rv-comparativo-resultado { margin: 0; font-family: var(--fonte-titulo); font-size: 1.15rem; font-weight: 700; color: var(--cor-primaria); } / ---------- Etapa 7 — prioridades ---------- / .rv-prioridades { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 18px 0 0; padding: 0; } .rv-prioridade { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-fundo-alt); } .rv-prioridade-numero { flex-shrink: 0; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.25rem; line-height: 1.3; color: var(--cor-secundaria); } .rv-cartao .rv-prioridade-titulo { margin: 0 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-primaria); } .rv-cartao .rv-prioridade-texto { margin: 0; font-size: .95rem; } / ---------- Bloco lateral (personalização, perfil informado) ---------- / .rv-lateral { margin-top: 22px; padding: 16px 18px; border-left: 2px solid var(--cor-secundaria); border-radius: 0 var(--raio) var(--raio) 0; background: var(--cor-fundo-alt); } .rv-cartao .rv-lateral-titulo { margin: 0 0 6px; font-weight: 700; color: var(--cor-primaria); } .rv-cartao .rv-lateral p:last-child { margin-bottom: 0; } / ---------- Etapa 7 — o que o Roadmap organiza ---------- / .rv-cartao .rv-organiza { margin: 24px 0 10px; font-weight: 600; color: var(--cor-primaria); } .rv-checklist { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; } .rv-checklist li { display: flex; align-items: flex-start; gap: 10px; color: var(--cor-texto-suave); } .rv-checklist-icone { flex-shrink: 0; width: 17px; height: 17px; margin-top: 3px; color: var(--cor-secundaria); } / ---------- Etapa 8 — o número de novo, no fechamento ---------- / .rv-fecho { margin: 22px 0; padding: 22px 18px; border-radius: var(--raio); background: var(--cor-primaria); text-align: center; } .rv-cartao .rv-fecho-numero { margin: 0; font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.1rem; color: var(--cor-secundaria); } .rv-cartao .rv-fecho-ritmo { margin: 4px 0 0; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(253, 246, 227, .75); } #encerramento-rodape { margin-top: 28px; } #encerramento-rodape .rv-nota { margin: 0 0 10px; } / ---------- Botões das telas de resultado ---------- / / .btn-large tem width:100%, então botões irmãos ficam empilhados e encostados um no outro. style.css não tem espaçamento entre botões irmãos (.nav-botoes é flex horizontal, de outro contexto), então a margem entra aqui. / .resultado .btn-large { margin-top: 14px; } #btn-lista-espera { margin: 28px 0 0; } / Ocupa o lugar do botão depois do clique, com a mesma margem, para a tela não dar um pulo quando um some e a outra aparece. / .lista-espera-confirmacao { margin: 28px 0 0; padding: 16px 18px; border-left: 3px solid var(--cor-secundaria); background: rgba(200, 151, 58, 0.08); font-weight: 600; text-align: left; } / ---------- Microinterações ---------- / / Entrada dos blocos. A classe .rv-visivel é posta por IntersectionObserver (resultado-visual.js) quando o bloco aparece — e posta de imediato, sem observador, quando o navegador pede menos movimento ou não tem a API. Nada aqui esconde conteúdo de forma permanente: se a animação não roda, o estado final é o padrão. / .rv-anima { opacity: 0; transform: translateY(12px); transition: opacity .38s cubic-bezier(.2, .6, .3, 1), transform .38s cubic-bezier(.2, .6, .3, 1); } .rv-anima.rv-visivel { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rv-anima, .rv-anima.rv-visivel { opacity: 1; transform: none; transition: none; } .rv-escala-preenchida { transition: none; } } / ---------- Telas maiores ---------- */ @media (min-width: 560px) { .rv-fatores, .rv-comparativo { grid-template-columns: 1fr 1fr; } } @media (min-width: 700px) { .resultado { padding: 48px 20px 80px; } .rv-cartao { padding: 28px 26px; } .rv-destaque { padding: 48px 32px 34px; } .rv-cartao-titulo { font-size: 1.45rem; } }