/* ================== /diagnostico — estilos das três versões (v0, v1 e v2)
Tela de app, no padrão da Fenix (21/09/2026): cabeçalho fino, a 1ª etapa já na abertura
(sem botão "começar") e rodapé de duas linhas. A marca assina e não disputa com a pergunta.
Regras herdadas da persona: opção nunca menor que 17px, toque mínimo de 56px, uma
pergunta por tela. A v0 não pede dado nenhum (o contato é a conversa no WhatsApp); a v1 e a
v2 pedem nome e telefone, um por tela. Motor em /diagnostico/quiz.js. */
body { background: var(--marinho-900); }
.app {
min-height: 100vh;
min-height: 100svh;
display: flex; flex-direction: column;
background:
radial-gradient(120% 70% at 85% 0%, rgba(202, 163, 72, .12) 0%, rgba(202, 163, 72, 0) 55%),
linear-gradient(178deg, var(--marinho-800) 0%, var(--marinho-900) 60%);
color: var(--off-white);
}
/* cabeçalho fino. Fundo marinho-900 chapado: é a cor do fundo do selo, que some nele */
.app-topo {
flex: none;
display: flex; justify-content: center; align-items: center;
padding: 9px 16px;
background: var(--marinho-900);
border-bottom: 1px solid rgba(202, 163, 72, .2);
}
.app-topo .marca { gap: 10px; }
.app-topo .marca img { width: 34px; height: 34px; }
.app-topo .marca span { font-size: .9rem; letter-spacing: .08em; }
.app-topo .marca small { font-size: .56rem; letter-spacing: .2em; margin-top: 1px; }
.app-corpo { flex: 1 0 auto; padding: clamp(14px, 2.4vh, 30px) 0 clamp(18px, 3vh, 34px); }
.app-corpo .env { max-width: 600px; padding: 0 16px; }
/* abertura: a promessa, só junto da 1ª pergunta. O selo fica embaixo dela e acompanha
todas as telas, colado no cartão */
.abertura { text-align: center; margin: 0 0 clamp(10px, 1.8vh, 16px); }
.selo-linha { text-align: center; margin: 0 0 clamp(10px, 1.8vh, 14px); }
.selo-gratuito {
display: inline-block;
margin: 0;
padding: 5px 14px;
border: 1px solid rgba(202, 163, 72, .55);
border-radius: 999px;
font-size: .72rem; font-weight: 800; line-height: 1.4;
letter-spacing: .14em; text-transform: uppercase;
color: var(--dourado-claro);
}
.abertura h1 {
margin: 0;
font-size: clamp(1.3rem, 5.4vw, 1.95rem);
line-height: 1.2;
color: #fff;
text-wrap: balance;
}
/* a frase de destaque começa em linha própria, no celular e no computador */
.abertura h1 .ouro { display: block; color: var(--dourado-brilho); }
.abertura[hidden], .quiz-voltar[hidden] { display: none; }
/* No celular, a promessa fica em exatamente duas linhas: uma para cada frase/cor. */
@media (max-width: 600px) {
.abertura h1 {
font-size: clamp(1rem, 4.6vw, 1.2rem);
letter-spacing: -.02em;
}
.abertura h1 .frase { white-space: nowrap; }
}
/* o cartão do quiz */
.quiz-caixa {
background: var(--papel);
color: var(--tinta);
border-radius: 16px;
border-top: 4px solid var(--dourado);
box-shadow: var(--sombra-alta);
padding: clamp(16px, 4.2vw, 28px);
text-align: left;
}
.quiz-tela { display: none; }
.quiz-tela.ativa { display: block; }
.quiz-progresso { margin-bottom: 14px; }
.quiz-progresso .rotulo {
display: flex; justify-content: space-between;
font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--tinta-suave);
margin-bottom: 6px;
}
.quiz-progresso #prog-pct { color: var(--dourado-escuro); }
.quiz-progresso .trilha {
height: 6px; border-radius: 999px; background: var(--papel-borda); overflow: hidden;
}
.quiz-progresso .barra {
height: 100%; width: 0; border-radius: 999px;
background: linear-gradient(90deg, var(--dourado), var(--dourado-claro));
transition: width .25s ease;
}
.quiz-pergunta {
font-family: var(--serifa);
font-size: clamp(1.2rem, 4.6vw, 1.5rem);
line-height: 1.22; font-weight: 700; color: var(--marinho-900);
margin: 0 0 4px;
}
.quiz-apoio { font-size: .92rem; color: var(--tinta-suave); margin: 0 0 14px; line-height: 1.45; }
.quiz-opcoes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.quiz-opcoes button {
width: 100%; min-height: 56px;
padding: 12px 16px;
font-size: 1.06rem; font-family: inherit; font-weight: 600;
text-align: left; line-height: 1.3;
color: var(--tinta);
background: var(--papel-quente);
border: 2px solid var(--papel-borda);
border-radius: var(--raio);
cursor: pointer;
transition: border-color .12s ease, background .12s ease, transform .08s ease;
}
/* hover só onde existe mouse: no toque ele fica grudado e a opção que cai no mesmo lugar,
na pergunta seguinte, parece já marcada */
@media (hover: hover) {
.quiz-opcoes button:hover { border-color: var(--dourado); background: #fdf9ef; }
}
.quiz-opcoes button:active { transform: scale(.99); border-color: var(--dourado); }
.quiz-voltar {
display: inline-block; margin-top: 8px;
font-size: .9rem; font-weight: 600; color: var(--tinta-suave);
background: none; border: none; cursor: pointer; padding: 8px 0;
}
.quiz-voltar:hover { color: var(--marinho-900); }
/* resultado */
.olho-quiz {
margin: 0 0 8px;
font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--dourado-escuro);
}
.quiz-tela h3 { font-size: clamp(1.08rem, 4vw, 1.25rem); }
.res-espelho {
list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px;
}
.res-espelho li {
position: relative; padding-left: 26px; font-size: 1rem; line-height: 1.45;
}
.res-espelho li::before {
content: ""; position: absolute; left: 0; top: .38em;
width: 14px; height: 14px; border-radius: 50%;
background: linear-gradient(135deg, var(--dourado-claro), var(--dourado));
}
.res-virada {
margin-top: 18px; padding: 14px 16px;
background: var(--papel-quente); border-left: 4px solid var(--dourado);
border-radius: 0 var(--raio) var(--raio) 0;
}
.res-virada h3 { margin-bottom: .3em; }
.res-virada p { font-size: 1rem; line-height: 1.5; }
.res-caso {
margin-top: 18px; padding: 16px 18px;
background: var(--marinho-900); color: var(--off-white);
border-radius: var(--raio);
}
.res-caso h3 { color: #fff; }
.res-caso p { font-size: 1rem; line-height: 1.5; }
.res-caso .num { color: var(--dourado-brilho); font-weight: 700; white-space: nowrap; }
.res-caso .aviso {
margin-top: 12px; padding-top: 12px;
border-top: 1px solid rgba(232, 233, 237, .2);
font-size: .88rem; line-height: 1.5; color: rgba(232, 233, 237, .78);
}
.res-proximo { margin-top: 18px; }
.res-proximo h3 { color: var(--marinho-900); }
.res-proximo ol { margin: 8px 0 0; padding-left: 22px; }
.res-proximo li { margin-bottom: 8px; font-size: 1rem; line-height: 1.5; }
.botao-zap {
background: linear-gradient(180deg, #2ec267 0%, #1f9e50 60%, #188343 100%);
color: #fff;
box-shadow: 0 6px 18px rgba(31, 158, 80, .35);
}
.botao-zap:hover { box-shadow: 0 9px 24px rgba(31, 158, 80, .45); }
.botao-zap svg { flex: none; width: 24px; height: 24px; fill: currentColor; }
/* texto longo precisa poder quebrar linha no celular (vence o nowrap de a[href^="https://wa.me"]) */
a.botao.botao-zap { white-space: normal; margin-top: 20px; }
/* O botão do resultado gruda no pé da tela enquanto a leitura não chega nele: quem já
decidiu não precisa rolar para agir. É o MESMO link (#btn-zap), então continua saindo um
código de atendimento só. */
#btn-zap {
position: sticky;
bottom: 12px;
z-index: 5;
box-shadow: 0 6px 18px rgba(31, 158, 80, .35), 0 0 0 6px rgba(255, 255, 255, .92);
}
/* tela de análise — o intervalo que dá peso ao diagnóstico antes do resultado */
.analise-caixa { text-align: center; }
.analise-selo {
width: 64px; height: 64px; margin: 4px auto 0;
display: grid; place-items: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--dourado-claro), var(--dourado));
box-shadow: 0 8px 24px rgba(202, 163, 72, .35);
}
.analise-selo span {
display: block; width: 28px; height: 28px;
border: 4px solid rgba(2, 21, 51, .22);
border-top-color: var(--marinho-900);
border-radius: 50%;
animation: gira .9s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
.analise-caixa .quiz-pergunta { margin-top: 16px; }
.analise-passos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.analise-passos li {
display: flex; align-items: center; gap: 12px;
padding: 11px 14px; border-radius: var(--raio);
border: 1.5px solid var(--papel-borda); background: var(--papel-quente);
font-size: 1rem; line-height: 1.35; color: var(--tinta-suave);
transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.analise-passos li .tique {
flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
border: 2px solid var(--papel-borda);
display: grid; place-items: center;
font-size: 1rem; line-height: 1; font-weight: 700; color: transparent;
transition: all .3s ease;
}
.analise-passos li.feito { border-color: var(--dourado); background: #fdf9ef; color: var(--tinta); font-weight: 600; }
.analise-passos li.feito .tique { border-color: var(--dourado); background: var(--dourado); color: #fff; }
@media (prefers-reduced-motion: reduce) {
.analise-selo span { animation: none; }
}
/* etapas de contato (v1 e v2): um campo por tela e SEM