@charset "UTF-8";
/* ==========================================================================
   Diagnóstico 360º
   Só o que a folha do site não cobre. Cores, fontes e escala vêm dos tokens
   do próprio site (--color-*, --font-*), então o cartão nasce falando a mesma
   língua do resto das páginas.
   ========================================================================== */

/* Esta folha só carrega nesta página, então pode pintar o documento. O body
   do site é papel; aqui a página é navy do topo ao rodapé, e qualquer folga
   que sobrasse aparecia como uma faixa branca no fim. */
html.q-diag,html.q-diag body{background-color:var(--color-navy-900)}

/* O layout mora aqui, não em classes do Tailwind. O CSS do site é compilado
   e só contém as classes que o projeto já usava: max-w-[42rem], min-h-[100dvh],
   py-28 e sm:px-6 não existem lá, então o cartão esticava a tela inteira. */
.q-palco{
  position:relative;isolation:isolate;
  min-height:100dvh;
  display:grid;align-content:center;justify-items:center;
  padding:calc(var(--q-topo,4.5rem) + clamp(1.5rem,4vw,3rem)) clamp(1.25rem,4vw,2rem) clamp(2.5rem,6vw,4.5rem);
  background:var(--color-navy-900);
  color:var(--color-paper);
  overflow:hidden;
}
/* em px, nao em rem: a raiz do site e 17px, entao 42rem virava 714 e o
   cartao ficava largo demais para uma pergunta por tela */
.q-wrap{position:relative;z-index:1;width:100%;max-width:560px;margin-inline:auto}

/* brilho de fundo, contido: o cartão é quem tem de puxar o olho */
.q-brilho{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 76% at 86% 2%, #06263f 0%, transparent 58%),
    radial-gradient(100% 78% at 8% 100%, #041e33 0%, transparent 52%);
}

/* --------------------------------------------------------------- o cartão */
.q-card{
  background:var(--color-paper);
  border-radius:3px;
  overflow:clip;
  box-shadow:0 46px 90px -50px rgba(0,0,0,.85);
  color:var(--color-navy-900);
}
.q-card__topo{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem clamp(1.4rem,3.5vw,2.1rem) 0;
}
.q-selo{
  margin:0;font-family:var(--font-mono);font-weight:500;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--color-gold-700);
}
.q-passo{
  margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  color:var(--color-navy-400);font-variant-numeric:tabular-nums;
}
.q-trilho{
  height:2px;margin:1.05rem clamp(1.4rem,3.5vw,2.1rem) 0;
  background:rgba(0,19,36,.1);border-radius:2px;overflow:hidden;
}
.q-trilho__fill{
  height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--color-gold-500),var(--color-gold-300));
  transition:width .42s cubic-bezier(.22,.61,.36,1);
}
.q-tela{padding:clamp(1.5rem,3.5vw,2.1rem)}
.q-tela > * + *{margin-top:1rem}

/* ----------------------------------------------------------- a tipografia */
.q-titulo{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(25px,1.2rem + 1.1vw,32px);line-height:1.1;
  letter-spacing:-.02em;color:var(--color-navy-900);text-wrap:balance;
}
.q-titulo--capa{font-size:clamp(28px,1.3rem + 1.9vw,40px);line-height:1.06}
.q-ajuda{margin:0;color:var(--color-navy-500);font-size:15px;line-height:1.5}
.q-diz{margin:0;color:var(--color-navy-600);font-size:16px;line-height:1.6}
/* respiro entre o título e o texto de apoio */
.q-titulo + .q-diz{margin-top:clamp(1.2rem,2.6vw,1.6rem)}
.q-titulo--capa + .q-diz{margin-top:clamp(1.5rem,3.2vw,2rem)}
.q-titulo + .q-ajuda{margin-top:.8rem}

/* -------------------------------------------------------------- as opções */
.q-opcoes{display:grid;gap:.6rem;margin-top:1.35rem}
.q-opt{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.85rem;
  width:100%;text-align:left;
  padding:1.05rem 1.15rem;
  background:var(--color-white);color:var(--color-navy-900);
  border:1.5px solid rgba(0,19,36,.16);border-radius:3px;
  font-family:var(--font-sans);font-size:16px;font-weight:400;line-height:1.3;
  cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.q-opt__mk{
  width:1.05rem;height:1.05rem;border-radius:50%;flex:0 0 auto;
  border:1.5px solid rgba(0,19,36,.28);position:relative;
  transition:border-color .18s ease;
}
.q-opt__mk::after{
  content:'';position:absolute;inset:3px;border-radius:50%;
  background:var(--color-gold-500);transform:scale(0);
  transition:transform .2s cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover){
  .q-opt:hover{border-color:var(--color-gold-500);background:#fffdf8}
  .q-opt:hover .q-opt__mk{border-color:var(--color-gold-500)}
}
.q-opt.marcado{
  border-color:var(--color-gold-500);background:#fffaf0;
  box-shadow:inset 0 0 0 1px var(--color-gold-500);
}
.q-opt.marcado .q-opt__mk{border-color:var(--color-gold-500)}
.q-opt.marcado .q-opt__mk::after{transform:scale(1)}

.q-nome{
  width:100%;padding:1.05rem 1.15rem;margin-top:1.35rem;
  background:var(--color-white);color:var(--color-navy-900);
  border:1.5px solid rgba(0,19,36,.28);border-radius:3px;
  font-family:var(--font-sans);font-size:17px;
}
.q-nome::placeholder{color:var(--color-navy-300)}
.q-nome:focus{outline:0;border-color:var(--color-gold-500);box-shadow:0 0 0 3px rgba(200,152,64,.26)}

/* -------------------------------------------------------------- os botões */
.q-bt{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  width:100%;margin-top:1.35rem;
  padding:1.15rem 1.4rem;border:1.5px solid var(--color-gold-500);border-radius:3px;
  background:var(--color-gold-500);color:var(--color-navy-900);
  font-family:var(--font-sans);font-size:16px;font-weight:500;
  text-decoration:none;cursor:pointer;
  transition:background-color .22s ease,border-color .22s ease,transform .12s ease;
}
.q-bt:hover{background:var(--color-gold-400);border-color:var(--color-gold-400)}
.q-bt:active{transform:translateY(1px)}
.q-bt__seta{transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.q-bt:hover .q-bt__seta{transform:translateX(4px)}
/* verde do WhatsApp com tinta navy: branco sobre esse verde não passa no
   contraste mínimo, e escurecer o verde tiraria o reconhecimento do canal */
.q-bt--zap{background:#25d366;border-color:#25d366;color:var(--color-navy-900)}
.q-bt--zap:hover{background:#1eb455;border-color:#1eb455}

.q-volta{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;
  background:none;border:0;padding:.45rem 0;cursor:pointer;
  color:var(--color-navy-400);font-family:var(--font-sans);font-size:14px;
}
.q-volta:hover{color:var(--color-gold-700)}

/* ----------------------------------------------------------- o resultado */
.q-placar{
  margin:1.35rem calc(clamp(1.5rem,3.5vw,2.1rem) * -1) 0;
  padding:clamp(1.5rem,3.5vw,2rem) clamp(1.4rem,3.5vw,2.1rem);
  background:var(--color-navy-900);color:var(--color-paper);
}
.q-placar__rot{
  margin:0;font-family:var(--font-mono);font-weight:500;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--color-gold-400);
}
.q-placar__v{
  margin:.6rem 0 0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(30px,1.4rem + 2.4vw,46px);line-height:1;letter-spacing:-.03em;
  color:var(--color-gold-300);font-variant-numeric:tabular-nums;
}
.q-placar__l{margin:.55rem 0 0;color:var(--color-navy-200);font-size:14px;line-height:1.45}

.q-achados{display:grid;gap:.7rem;margin:1.35rem 0 0;padding:0;list-style:none}
.q-achado{
  display:grid;gap:.3rem;
  padding:1rem 1.15rem;
  background:var(--color-paper-2);border-radius:3px;
  border-inline-start:2px solid var(--color-gold-500);
}
.q-achado b{
  font-family:var(--font-display);font-weight:600;font-size:17px;
  line-height:1.2;letter-spacing:-.01em;color:var(--color-navy-900);
}
.q-achado span{color:var(--color-navy-600);font-size:15px;line-height:1.5}
.q-achado--bom{border-inline-start-color:var(--color-positive)}
.q-achado--ativo{border-inline-start-color:var(--color-gold-300);background:#fffaf0}

.q-legal{
  margin:1.35rem 0 0;padding-top:1.1rem;border-top:1px solid var(--color-line);
  color:var(--color-navy-400);font-size:13px;line-height:1.5;
}
/* o aviso legal fixo mora fora do cartão, sobre o fundo escuro */
.q-legal-fora{
  margin:1.5rem auto 0;max-width:44rem;text-align:center;
  color:var(--color-navy-300);font-size:12.5px;line-height:1.55;
}

@media (prefers-reduced-motion:reduce){
  .q-trilho__fill,.q-opt,.q-opt__mk::after,.q-bt,.q-bt__seta{transition:none!important}
}

/* ------------------------------------------------- CTA FIXO NO CELULAR
   Só no resultado, e só em tela estreita. A barra é o mesmo link do botão
   de dentro do cartão; para não haver dois, o de dentro se esconde quando
   a barra aparece. A classe q-fim entra no <html> quando o quiz termina. */
.q-barra{display:none}

@media (max-width:768px){
  .q-fim .q-barra{
    /* teto do inteiro de 32 bits: nada do site nem de widget de terceiro
       passa por cima. O popup de contato ficava na frente com z-index 100. */
    display:block;position:fixed;z-index:2147483647;
    left:0;right:0;bottom:0;
    padding:.7rem clamp(1rem,4vw,1.25rem) calc(.7rem + env(safe-area-inset-bottom,0px));
    background:rgba(0,19,36,.94);
    backdrop-filter:blur(12px);
    border-top:1px solid rgba(226,197,140,.22);
    animation:q-sobe .34s cubic-bezier(.22,.61,.36,1) both;
  }
  .q-fim .q-barra .q-bt{margin-top:0}
  /* aqui o cartão guarda o formulário inteiro, então nada some do conteúdo:
     a barra é só o atalho até ele. A classe q-form-avista entra pelo
     diagnostico.js quando o formulário aparece na tela — aí a barra sai,
     senão cobriria justamente o campo que a pessoa está preenchendo. */
  /* espaço para a barra não cobrir o fim do conteúdo */
  /* a folga fica no rodapé, que já é navy, e não no body, que é papel */
  .q-fim footer{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom,0px))}
}

/* com o popup do site aberto a barra some: ela está acima de tudo e cobriria
   o modal. A classe entra pelo diagnostico.js, que observa o popup. */
.q-modal-aberto .q-barra{display:none!important}
.q-form-avista .q-barra{display:none!important}

@keyframes q-sobe{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .q-fim .q-barra{animation:none}
}

/* ============================================================ FORMULÁRIO
   Só nesta página. No lugar do botão de WhatsApp da /diagnostico, o fim do
   quiz pede os dados do lead. Mesmos tokens do cartão, para o formulário
   não parecer um bloco colado de outro lugar. */
.q-form{
  display:grid;gap:.9rem;
  margin:1.6rem calc(clamp(1.5rem,3.5vw,2.1rem) * -1) 0;
  padding:clamp(1.4rem,3.2vw,1.9rem) clamp(1.4rem,3.5vw,2.1rem);
  background:var(--color-paper-2);
  border-top:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line);
}
.q-form__rot{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(20px,1rem + .8vw,24px);line-height:1.15;letter-spacing:-.015em;
  color:var(--color-navy-900);
}
.q-form__diz{margin:-.35rem 0 .2rem;color:var(--color-navy-600);font-size:14.5px;line-height:1.5}

/* mesma tinta do aviso de restrição do popup do site, para a resalva de MEI
   ser lida como aviso e não como mais uma linha de apoio */
.q-form__aviso{
  margin:.15rem 0 .35rem;
  padding:.7rem .9rem;
  background:#fbf5e7;border:1px solid #e7d4a6;border-radius:3px;
  color:var(--color-navy-800);font-size:13.5px;line-height:1.5;
}
.q-form__aviso strong{font-weight:600}

.q-campo{display:grid;gap:.4rem;margin:0;padding:0;border:0}
.q-campo__rot{
  font-family:var(--font-mono);font-weight:500;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--color-navy-600);
  padding:0;
}
.q-campo__inp{
  width:100%;padding:.85rem 1rem;
  background:var(--color-white);color:var(--color-navy-900);
  border:1.5px solid rgba(0,19,36,.2);border-radius:3px;
  font-family:var(--font-sans);font-size:16px;line-height:1.3;
}
.q-campo__inp::placeholder{color:var(--color-navy-300)}
.q-campo__inp:focus{
  outline:0;border-color:var(--color-gold-500);
  box-shadow:0 0 0 3px rgba(200,152,64,.26);
}
.q-campo--grupo{display:block;margin-top:.25rem}
.q-campo--grupo legend{padding:0}

.q-form__opcoes{display:grid;gap:.45rem;margin-top:.55rem}
.q-form__opt{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.7rem;
  padding:.7rem .9rem;
  background:var(--color-white);
  border:1.5px solid rgba(0,19,36,.16);border-radius:3px;
  font-family:var(--font-sans);font-size:15px;line-height:1.35;
  color:var(--color-navy-900);cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease;
}
.q-form__opt input{
  width:1.05rem;height:1.05rem;margin:0;flex:0 0 auto;
  accent-color:var(--color-gold-500);cursor:pointer;
}
@media (hover:hover){
  .q-form__opt:hover{border-color:var(--color-gold-500);background:#fffdf8}
}
.q-form__opt:focus-within{
  border-color:var(--color-gold-500);
  box-shadow:0 0 0 3px rgba(200,152,64,.26);
}
.q-form__opt:has(input:checked){
  border-color:var(--color-gold-500);background:#fffaf0;
  box-shadow:inset 0 0 0 1px var(--color-gold-500);
}

.q-form__lgpd{
  display:grid;grid-template-columns:auto 1fr;align-items:start;gap:.7rem;
  margin-top:.35rem;
  color:var(--color-navy-700);font-size:13px;line-height:1.5;cursor:pointer;
}
.q-form__lgpd input{
  width:1rem;height:1rem;margin:.15rem 0 0;flex:0 0 auto;
  accent-color:var(--color-gold-500);cursor:pointer;
}
.q-form__lgpd a{color:var(--color-gold-700);text-underline-offset:2px}

.q-form__erro{
  margin:0;padding:.7rem .9rem;
  background:#f8ecec;border:1px solid #e0c2c0;border-radius:3px;
  color:#8c3b36;font-size:13.5px;line-height:1.45;
}
.q-form__erro[hidden]{display:none}

.q-form .q-bt{margin-top:.35rem}
.q-form .q-bt[disabled]{opacity:.65;cursor:progress}