/* ============================================================
   VAGA — ThunderLab
   Site próprio, sem nenhuma ligação com o CRM. O visual segue o
   guia da marca: fundo é MESCLA de preto (#000) com navy (#001429),
   nunca cor sólida isolada; o dourado (#ccb054) só em destaque
   pontual, nunca em área grande.
   ============================================================ */

:root {
  --preto:   #000000;
  --navy:    #001429;
  --carta:   #0b1728;
  --linha:   rgba(255, 255, 255, .10);
  --texto:   #ffffff;
  --dim:     #a9b4c2;
  --faint:   #6f7c8c;
  --ouro:    #ccb054;
  /* Superficies sutis e o fundo de tela cheia. Existem nos DOIS temas
     porque tudo que eu escrevi com `rgba(255,255,255,.05)` some no
     branco -- e some SEM ERRO, que e a pior forma. */
  --sup:     rgba(255, 255, 255, .05);
  --sup2:    rgba(255, 255, 255, .028);
  --verde:   #43c99a;
  --verde-f: rgba(67, 201, 154, .16);
  --vermelho:   #e08a80;
  --vermelho-f: rgba(194, 69, 61, .18);
  --azul:       #3f5f8f;
  --azul-claro: #6a86b8;
  --fundo-tela: #04101f;
  --ouro-cheio: #ccb054;
  --display: 'Inter', 'Inter Roboto', 'Inter Arial', system-ui, -apple-system, sans-serif;
  --corpo:   'Inter', 'Inter Roboto', 'Inter Arial', system-ui, -apple-system, sans-serif;
}

/* A FONTE MORA AQUI (22/10/2026), e não no Google Fonts: lá eram dois
   servidores a mais antes de o texto poder aparecer (~0,5 s no 4G lento).
   É o mesmo arquivo que o Google entregava: o Inter variável com as letras
   do português, do 400 ao 800. Sem <link rel="preload"> de propósito:
   medido no 4G lento, ele dividia a rede com este CSS e o texto aparecia
   0,14 s depois. Com a fonte do aparelho no tamanho certo (abaixo), o
   texto aparece antes e a troca não mexe a página.

   'Inter Roboto' e 'Inter Arial': até a Inter chegar, o texto aparece na
   fonte do aparelho (Roboto no Android, Arial no iPhone) esticada para
   ocupar o mesmo espaço, e a troca não mexe a página. As mesmas medidas da
   lp (src/landing.css). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Roboto'; src: local('Roboto'), local('Roboto-Regular'); font-weight: 100 549;
  size-adjust: 107.16%; ascent-override: 90.40%; descent-override: 22.54%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Roboto'; src: local('Roboto Bold'), local('Roboto-Bold'); font-weight: 550 900;
  size-adjust: 108.05%; ascent-override: 89.66%; descent-override: 22.35%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Arial'; src: local('Arial'), local('ArialMT'); font-weight: 100 549;
  size-adjust: 106.60%; ascent-override: 90.88%; descent-override: 22.65%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Arial'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 550 900;
  size-adjust: 100.66%; ascent-override: 96.24%; descent-override: 23.99%; line-gap-override: 0%; }

* { box-sizing: border-box; }

/* Nem o `html` nem o `body` têm altura fixa (até 01/11/2026 os dois
   tinham 100%). Presos na altura da janela, o conteúdo mais alto que ela
   vazava para cima, onde não se rola (o logo da página da vaga saía
   cortado no celular), e o degradê do fundo, que se mede pela caixa do
   `html`, se repetia a cada altura de tela, com uma emenda visível no
   meio do formulário. A altura mínima é o `min-height` do `body`. */

body {
  margin: 0;
  /* a mescla das duas cores da marca, e não uma delas sozinha */
  background:
    radial-gradient(120% 90% at 50% 0%, #04101f 0%, var(--preto) 78%),
    var(--navy);
  color: var(--texto);
  font: 400 16px/1.55 var(--corpo);
  -webkit-font-smoothing: antialiased;

  /* Uma tela, sem rolagem — pedido do Daniel. `min-height` e não
     `height`: se o conteúdo não couber (telefone pequeno, fonte
     aumentada por acessibilidade), a página ROLA em vez de cortar.
     Cortar esconde informação sem avisar, e aqui o que sumiria seria
     justamente o salário ou o botão. */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
}

.caixa {
  width: 100%;
  max-width: 620px;
  text-align: center;
}

.logo {
  display: block;
  width: 150px;
  height: 42px;
  margin: 0 auto 26px;
  background: url('/logo-thunderlab.png') center / contain no-repeat;
}

.olho {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro);
}

h1 {
  margin: 0 0 26px;
  font-family: var(--display);
  font-size: clamp(30px, 7vw, 46px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
}

/* ---------- o quadro de fatos ---------- */
.fatos {
  margin: 0 0 28px;
  display: grid;
  gap: 1px;                      /* o próprio fundo vira a divisória */
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
}

.fato {
  background: var(--carta);
  padding: 13px 18px;
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 14px;
  align-items: baseline;
}

.fato dt {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}

.fato dd {
  margin: 0;
  font-size: 15px;
  color: var(--dim);
}

/* O dinheiro é o que a pessoa procura primeiro. É o único lugar da
   página com dourado e com texto claro — um destaque só, senão
   destaque nenhum. */
.fato.forte { background: linear-gradient(90deg, rgba(204,176,84,.09), transparent 70%); }
.fato.forte dd { color: var(--texto); font-weight: 500; }
.fato.forte dt { color: var(--ouro); }

.extra {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--ouro);
  font-weight: 500;
}

/* O número que a pessoa está procurando não pode ter o mesmo tamanho da
   frase que o explica: ela lê a linha do fixo, e o olho precisa cair
   neste valor logo depois. */
.extra strong { font-size: 16.5px; font-weight: 700; letter-spacing: -.1px; }

/* ---------- o botão ---------- */
.btn {
  display: inline-block;
  width: 100%;
  max-width: 340px;
  padding: 15px 28px;
  border: 0;
  border-radius: 11px;
  background: var(--ouro);
  color: #14100a;
  font: 600 16px/1 var(--corpo);
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover  { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.obra {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--ouro);
}

/* ---------- telas pequenas ----------
   O objetivo continua sendo caber numa tela. O que encolhe é o
   espaçamento, não o tamanho do texto: reduzir a fonte para caber é
   trocar "sem rolagem" por "não dá para ler". */
@media (max-width: 520px) {
  body { padding: 20px 14px; }
  .logo { width: 124px; height: 34px; margin-bottom: 18px; }
  h1 { margin-bottom: 18px; }
  .fatos { margin-bottom: 20px; }
  .fato {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 11px 15px;
  }
  .btn { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================
   O POP-UP DE NOME E WHATSAPP
   ============================================================ */

/* Trava a rolagem do fundo enquanto o pop-up está aberto: no celular,
   sem isso, o teclado sobe e a página de trás desliza atrás dele. */
body.travado { overflow: hidden; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal[hidden] { display: none; }

.modal-fundo {
  position: absolute;
  inset: 0;
  background: rgba(0, 4, 10, .74);
  backdrop-filter: blur(3px);
}

.modal-caixa {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 28px 26px 26px;
  text-align: left;
  box-shadow: 0 30px 70px -30px #000;
  animation: sobe .18s ease-out;
  /* Pop-up alto em tela baixa rola por dentro, e nunca corta: o que
     sumiria embaixo é justamente o botão. */
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}

@keyframes sobe {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.modal-x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--faint);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.modal-x:hover { color: var(--texto); }
.modal-x:focus-visible { outline: 2px solid var(--ouro); outline-offset: 1px; }

.modal-caixa h2 {
  margin: 0 0 6px;
  padding-right: 30px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.modal-sub {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--dim);
}

.campo { display: block; margin-bottom: 14px; }

.campo span {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}

.campo input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: #071120;
  color: var(--texto);
  /* 16px é o mínimo que impede o iPhone de dar zoom sozinho ao focar o
     campo — e o zoom desalinha o pop-up inteiro. */
  font: 400 16px/1.3 var(--corpo);
}
.campo input:focus {
  outline: none;
  border-color: var(--ouro);
  box-shadow: 0 0 0 3px rgba(204, 176, 84, .16);
}

.erro {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(240, 87, 90, .12);
  color: #f0716a;
  font-size: 13.5px;
}
.erro[hidden] { display: none; }

.modal-caixa .btn { max-width: none; margin-top: 4px; }

/* ============================================================
   AS PÁGINAS DE VÍDEO — uma por vídeo
   ============================================================ */

/* A página da vaga é uma tela travada e centrada. Estas não: o vídeo
   tem altura própria e, no celular deitado, forçar tudo numa tela
   esconderia o botão. Aqui o conteúdo manda e a página acompanha. */
body.tela-video {
  display: block;
  align-items: initial;
  padding: 0;
}

/* O trilho do progresso mora no topo da janela, e não no fluxo: ele
   aparece e some conforme a pessoa avança, e overlay que entra no
   fluxo empurra a página inteira.

   6px e não 3px: o Daniel pediu bem visível. Com 3px ela lia como
   detalhe de carregamento; com 6 e o brilho, lê como "quanto falta". */
.trilho {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: rgba(255, 255, 255, .07);
  z-index: 10;
}
.trilho i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #a8892f, var(--ouro));
  box-shadow: 0 0 12px rgba(204, 176, 84, .55);
  border-radius: 0 3px 3px 0;
  /* Curta: a barra é atualizada a cada 250ms e uma transição longa
     faria uma perseguir a outra, e o movimento sairia aos trancos. */
  transition: width .3s linear;
}

.video-caixa {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 38px 20px 56px;
  text-align: center;
}

.video-caixa h1 {
  font-size: clamp(22px, 4.6vw, 32px);
  margin: 0 0 22px;
}

/* ---------- o palco do vídeo ----------
   Os vídeos são 9:16 (612x1088, medido).

   A TELA TODA TEM QUE CABER SEM ROLAR: título, vídeo e botão juntos.
   Pedido do Daniel, e a conta é simples — tudo que não é vídeo ocupa
   225px medidos no computador e ~190 no celular -- o logo e o
   título são maiores ali. Por isso são dois números, e não um:
   240 aqui, 210 no bloco do celular mais abaixo. A folga cobre título
   que quebra em duas linhas e para o recorte da tela.

   A LARGURA NASCE DA ALTURA, e não o contrário. Assim o vídeo cresce
   até onde couber e para ali, em qualquer tamanho de tela, sem número
   mágico por aparelho. O `min(100%)` segura o caso da tela alta e
   estreita, onde a altura disponível pediria mais largura do que
   existe.

   A proporção fica reservada desde o começo: sem isso a página "pula"
   quando o vídeo carrega, e pular no meio da leitura faz a pessoa
   perder o lugar. */
.palco {
  position: relative;
  aspect-ratio: 9 / 16;
  width: min(100%, calc((100dvh - 240px) * 9 / 16));
  height: auto;
  margin: 0 auto 14px;
  border-radius: 14px;
  overflow: hidden;
  background: #060d18;
  border: 1px solid var(--linha);
}

.palco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- enquanto o vídeo não chega ---------- */
.palco.vazio {
  border-style: dashed;
  border-color: rgba(204, 176, 84, .35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.reservado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
}
.reservado-txt {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ouro);
}
.reservado-sub {
  font-size: 13.5px;
  color: var(--faint);
  margin-bottom: 10px;
}
.reservado-btn {
  padding: 9px 16px;
  border: 1px solid var(--linha);
  border-radius: 9px;
  background: none;
  color: var(--dim);
  font: 500 13px/1 var(--corpo);
  cursor: pointer;
}
.reservado-btn:hover { border-color: var(--ouro); color: var(--texto); }
.reservado-btn:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }

.aviso {
  margin: 0;
  font-size: 14px;
  color: var(--faint);
}
.aviso[hidden] { display: none; }

/* O botão de avançar entra com um leve movimento: ele APARECE, e um
   elemento que surge parado no meio da tela passa despercebido. */
#liberado[hidden] { display: none; }
#liberado { animation: sobe .22s ease-out; }

/* ============================================================
   CONTINUAR DEPOIS
   ============================================================ */

.depois-linha { margin-top: 26px; }

/* Discreto de propósito: é uma saída, não um convite. Se competir com o
   botão de avançar, vira o caminho fácil e todo mundo sai. */
.depois-abrir {
  border: 0;
  background: none;
  padding: 8px 10px;
  color: var(--faint);
  font: 500 13px/1 var(--corpo);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.depois-abrir:hover { color: var(--dim); }
.depois-abrir:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; border-radius: 6px; }

.depois-caixa { text-align: left; }

/* O link aparece inteiro e selecionável: quando o navegador bloqueia a
   cópia automática (acontece sem cadeado e em alguns celulares), a
   pessoa ainda consegue copiar à mão. Nunca um "não deu" sem saída. */
.depois-link {
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 1px solid var(--linha);
  border-radius: 9px;
  background: #071120;
  color: var(--dim);
  font-family: var(--corpo);
  font-size: 12.5px;
  word-break: break-all;
  user-select: all;
}

/* ============================================================
   O FORMULÁRIO — uma pergunta por tela
   ============================================================ */

.form-caixa {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

/* A logo fica centrada (pedido do Daniel); o resto continua alinhado à
   esquerda, porque aqui há texto para LER e campo para preencher, e
   leitura centrada cansa a partir da segunda linha. */
.form-caixa .logo { margin: 0 auto 26px; }

.form-caixa h1 {
  font-size: clamp(23px, 5.4vw, 29px);
  line-height: 1.3;
  margin: 0 0 8px;
  text-wrap: balance;
}

.ajuda {
  margin: 0 0 18px;
  font-size: 15.5px;
  color: var(--faint);
}
.ajuda[hidden] { display: none; }

.form-caixa h1 + #campo { margin-top: 20px; }
#campo { margin-bottom: 18px; }

/* ---------- as opções ----------
   Botões largos, empilhados. Clicar já avança: um clique a mais por
   pergunta, vezes dezoito, é atrito que faz gente parar no meio. */
#campo { counter-reset: op; }

.op {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  min-height: 70px;
  text-align: left;
  padding: 16px 18px;
  margin-bottom: 12px;
  border: 1px solid var(--linha);
  border-radius: 13px;
  background: var(--carta);
  color: var(--texto);
  font: 400 17px/1.35 var(--corpo);
  cursor: pointer;
  transition: border-color .13s, background .13s, transform .13s;
}

/* O quadrado com a letra. Serve de tres coisas ao mesmo tempo: da a
   forma de cartao que o Daniel pediu, mostra sem texto que ali se
   escolhe UMA, e nomeia a opcao -- "a B" e mais facil de falar numa
   conversa sobre o formulario que "a segunda de cima para baixo".
   Vem de contador do CSS: opcao nova nao precisa de nada no JS. */
.op::before {
  counter-increment: op;
  content: counter(op, upper-alpha);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--linha);
  background: #0a1424;
  color: var(--faint);
  font: 500 14px/1 var(--display);
  transition: border-color .13s, background .13s, color .13s;
}

/* O HOVER SO EXISTE ONDE HA PONTEIRO -- e este `@media` e o conserto
   de um bug que o Daniel achou: no celular, ao tocar numa opcao a tela
   troca e o DEDO CONTINUA no mesmo ponto. O botao novo que nasce
   debaixo dele herda o `:hover`, que fica grudado ate se tocar em
   outro lugar. Com o quadrado aceso, a pergunta seguinte parecia ja
   vir respondida. */
@media (hover: hover) {
  .op:hover {
    border-color: var(--ouro);
    background: #101d31;
  }
  .op:hover::before {
    border-color: var(--ouro);
    background: var(--ouro);
    color: #000;
  }
}

.op:active { transform: translateY(1px); }
.op:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }

/* ---------- discursivas ---------- */
#campo textarea {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid var(--linha);
  border-radius: 11px;
  background: #071120;
  color: var(--texto);
  /* 16px impede o iPhone de dar zoom sozinho ao focar o campo. */
  font: 400 16px/1.55 var(--corpo);
  resize: vertical;
  min-height: 130px;
}
#campo textarea:focus {
  outline: none;
  border-color: var(--ouro);
  box-shadow: 0 0 0 3px rgba(204, 176, 84, .16);
}

.publico {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--faint);
}

.form-caixa .btn { max-width: 260px; }
.form-caixa .btn[hidden] { display: none; }

/* ---------- telas de fim ---------- */
.fim-caixa { max-width: 480px; }
.fim-caixa h1 { margin-bottom: 16px; }
.fim-texto {
  margin: 0 0 12px;
  color: var(--dim);
  font-size: 15.5px;
  line-height: 1.6;
}
.fim-nota { color: var(--faint); font-size: 14px; }

.tique {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 1px solid var(--ouro);
  color: var(--ouro);
  font-size: 24px;
}

@media (max-width: 520px) {
  .form-caixa { padding: 28px 16px 48px; }
  .form-caixa .btn { max-width: none; }
}

/* ============================================================
   HIERARQUIA DO FORMULÁRIO
   Pedido do Daniel: mais amigável, sem perder a seriedade.
   ============================================================ */

/* O rótulo do bloco entrou no lugar do "1 de 18". Ele ORIENTA sem
   prometer: a pessoa sabe que está nos seus dados, e não que faltam
   dezesseis. Número grande na frente afasta antes de a primeira
   pergunta ser lida. */
.bloco {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(204, 176, 84, .3);
  border-radius: 999px;
  background: rgba(204, 176, 84, .08);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ouro);
}
.bloco svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* A pergunta é a heroína da tela: display, grande, com respiro. O
   destaque cai só no pivô dela — a palavra que muda o que se responde.
   Dourado em duas ou três palavras é destaque; em toda a frase seria
   ruído, e contra a marca. */
.form-caixa h1 {
  font-family: var(--display);
  font-weight: 500;
  color: var(--texto);
}
.form-caixa h1 b {
  font-weight: 700;
  color: var(--ouro);
}

/* O erro fala como gente e não como sistema: fundo discreto, sem
   berrar. Quem está preenchendo já sabe que errou — a mensagem existe
   para dizer o que fazer, não para repreender. */
.form-caixa .erro {
  border-left: 2px solid #f0716a;
  background: rgba(240, 87, 90, .10);
}

@media (max-width: 520px) {
  .bloco { font-size: 11px; }
}

/* ============================================================
   O PAINEL DO PROCESSO SELETIVO
   ============================================================ */

body.tela-painel {
  display: block;
  align-items: initial;
  padding: 0;
}

/* ---------- entrar ---------- */
#login {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#login[hidden] { display: none; }
.login-caixa { width: 100%; max-width: 360px; }
.login-caixa .logo { margin: 0 auto 24px; }
.login-caixa h1 { font-size: 22px; margin: 0 0 6px; text-align: center; }
.sub-login {
  margin: 0 0 22px;
  text-align: center;
  font-size: 13.5px;
  color: var(--faint);
  line-height: 1.5;
}
.login-caixa .btn { max-width: none; margin-top: 6px; }

/* ---------- o painel ---------- */
#painel { max-width: 1180px; margin: 0 auto; padding: 26px 20px 60px; }
/* Dentro do RH (24/09/2026): o quadro já tem menu, logo e título, então
   aqui some o topo e o espaçamento de fora. */
/* Dentro do RH a largura é a da página do RH, e a rolagem é a de lá: aqui não
   sobra moldura nem barra própria. */
body.embutido { overflow: hidden; }
body.embutido #painel { max-width: none; padding: 0 0 8px; }
body.embutido .pn-topo .logo,
body.embutido #painel > h1 { display: none; }
body.embutido .pn-topo { justify-content: flex-end; margin-bottom: 14px; }
#painel[hidden] { display: none; }

.pn-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 26px;
}
.pn-topo .logo { margin: 0; width: 120px; height: 34px; }
.pn-acoes { display: flex; gap: 8px; }

.btn-fino {
  padding: 8px 14px;
  border: 1px solid var(--linha);
  border-radius: 9px;
  background: none;
  color: var(--dim);
  font: 500 13px/1 var(--corpo);
  cursor: pointer;
}
.btn-fino:hover { border-color: var(--ouro); color: var(--texto); }
.btn-fino:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }

#painel h1 { font-size: 25px; margin: 0 0 20px; }

/* ---------- o funil ----------
   Cada degrau mostra quantos chegaram e, em vermelho, quantos se
   perderam do anterior para ele. O número que interessa não é o que
   ficou: é o que sumiu, porque é nele que dá para mexer. */
.funil-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.funil-tit {
  margin: 0;
  font: 600 12.5px/1 var(--corpo);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}
.funil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
/* SETE EM UMA LINHA, E DEZ EM DUAS DE CINCO (20/09/2026). Com
   `auto-fit` sozinho, dez degraus viram nove numa linha e um sozinho
   na de baixo -- o "não está ocupando o espaço todo" do Daniel. */
@media (min-width: 1000px) {
  .funil { grid-template-columns: repeat(7, 1fr); }
  .funil.inteiro { grid-template-columns: repeat(5, 1fr); }
}
.fn {
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.fn b { font-family: var(--display); font-size: 26px; line-height: 1.1; }
.fn-rot { font-size: 12.5px; color: var(--dim); }
.fn-pct { font-size: 11.5px; color: var(--faint); }
.fn-caiu {
  position: absolute;
  top: 12px; right: 14px;
  font-size: 11.5px;
  font-weight: 600;
  color: #f0716a;
}

.pn-filtros { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.input-busca {
  flex: 1 1 240px;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: #071120;
  color: var(--texto);
  font: 400 14.5px/1.3 var(--corpo);
}
.input-busca:focus { outline: none; border-color: var(--ouro); }
.sel { flex: 0 0 auto; }

.pn-tabela { width: 100%; border-collapse: collapse; min-width: 740px; }
.pn-tabela th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 12px 9px 0;
  white-space: nowrap;
}
.pn-tabela td {
  padding: 11px 12px 11px 0;
  border-top: 1px solid var(--linha);
  font-size: 14px;
  vertical-align: top;
}
.pn-tabela tr[data-id] { cursor: pointer; }
.pn-tabela tr[data-id]:hover td { background: #0e1a2b; }
.nm { font-weight: 500; }
.sub { color: var(--faint); font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.vazio { color: var(--faint); padding: 26px 0; text-align: center; }

/* ---------- os três quadrados ---------- */
.trilha { display: flex; gap: 3px; }
.q {
  width: 20px; height: 20px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  border: 1px solid transparent;
  flex: 0 0 auto;
}
.q.ok    { background: rgba(61,217,164,.13); color: #3dd9a4; border-color: #3dd9a4; }
.q.meio  { background: rgba(245,158,66,.13); color: #f59e42; border-color: #f59e42; }
.q.vazio { color: var(--faint); border-color: var(--linha); }

.et {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  font-size: 11.5px;
  color: var(--faint);
  white-space: nowrap;
}
.et.ok   { border-color: #3dd9a4; color: #3dd9a4; }
.et.meio { border-color: #f59e42; color: #f59e42; }
.et.fora { border-color: rgba(240,113,106,.5); color: #f0716a; }

/* ---------- a ficha ---------- */
.ficha-caixa { max-width: 620px; text-align: left; }
.ficha-caixa .sec { margin-bottom: 22px; }
.ficha-caixa h3 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 10px;
}
.dl { margin: 0; display: grid; gap: 5px; }
.dl > div { display: flex; gap: 10px; font-size: 13.5px; }
.dl dt { color: var(--faint); min-width: 128px; margin: 0; }
.dl dd { margin: 0; color: var(--texto); }

.vd { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13.5px; color: var(--dim); }

/* A pergunta em cima, a resposta embaixo e destacada: quem lê está
   procurando a RESPOSTA, e a pergunta é só a âncora. */
.rs { padding: 12px 0; border-top: 1px solid var(--linha); }
.rs:first-child { border-top: 0; }
.rs-p { font-size: 12.5px; color: var(--faint); margin-bottom: 5px; line-height: 1.45; }
.rs-r { font-size: 14.5px; color: var(--texto); line-height: 1.6; white-space: pre-wrap; }

@media (max-width: 620px) {
  #painel { padding: 20px 14px 48px; }
  .fn b { font-size: 22px; }
  .dl > div { flex-direction: column; gap: 1px; }
  .dl dt { min-width: 0; }
}

/* ============================================================
   O PAINEL É CLARO — e só ele
   Pedido do Daniel: é a tela em que ELE passa horas lendo resposta
   discursiva. O candidato continua vendo o escuro.

   Tudo escopado em `body.tela-painel`: redefinir os tokens aqui troca
   a paleta inteira do painel sem encostar em nenhuma outra página.
   ============================================================ */
body.tela-painel {
  --carta:  #ffffff;
  --linha:  rgba(0, 20, 41, .13);
  --texto:  #001429;
  --dim:    #4a5561;
  --faint:  #7c8794;

  /* O dourado da marca (#ccb054) não tem contraste suficiente para
     TEXTO sobre branco. Aqui ele se divide: um tom escuro para o que
     se lê, e o dourado original para o que se preenche (botão, faixa),
     onde ele funciona. */
  --ouro:      #8a7220;
  --ouro-cheio: #ccb054;
  /* No claro as mesmas superficies precisam ESCURECER em vez de
     clarear, e o verde precisa de contraste sobre branco. */
  --sup:     #f2f4f7;
  --sup2:    #f8f9fb;
  --verde:   #1d7a5a;
  --verde-f: rgba(29, 122, 90, .12);
  --vermelho:   #a8371f;
  --vermelho-f: rgba(168, 55, 31, .10);
  --azul:       #4a6fa5;
  --azul-claro: #7a97c4;
  --fundo-tela: #f4f6f9;

  background: #ffffff;
  color: var(--texto);
}

/* A versão do logo com o "LAB" branco desapareceria no claro. */
body.tela-painel .logo {
  background-image: url('/logo-fundo-claro.png');
}

/* ---------- campos e caixas ---------- */
body.tela-painel .campo input,
body.tela-painel .input-busca {
  background: #f7f8fa;
  border-color: var(--linha);
  color: var(--texto);
}
body.tela-painel .campo input:focus,
body.tela-painel .input-busca:focus {
  border-color: var(--ouro-cheio);
  box-shadow: 0 0 0 3px rgba(204, 176, 84, .22);
}

body.tela-painel .fn,
body.tela-painel .modal-caixa {
  background: #ffffff;
  border-color: var(--linha);
  box-shadow: 0 1px 2px rgba(0, 20, 41, .05), 0 14px 34px -22px rgba(0, 20, 41, .45);
}

body.tela-painel .pn-tabela tr[data-id]:hover td { background: #f4f6f9; }
body.tela-painel .modal-fundo { background: rgba(0, 20, 41, .42); }
body.tela-painel .modal-x { color: var(--faint); }
body.tela-painel .modal-x:hover { color: var(--texto); }

/* O botão dourado com texto escuro já funciona no claro; o de contorno
   precisava de borda mais firme para não sumir. */
body.tela-painel .btn-fino { border-color: rgba(0, 20, 41, .18); }
body.tela-painel .btn-fino:hover { border-color: var(--ouro-cheio); color: var(--ouro); }

body.tela-painel .erro {
  background: #fdecea;
  color: #9d2b28;
  border-left-color: #b8332f;
}

/* ---------- os sinais de estado ----------
   Os tons de verde, âmbar e vermelho do escuro clareiam demais sobre
   branco. Aqui entram as versões escurecidas, com o mesmo significado. */
body.tela-painel .q.ok {
  background: #e4f5ef; color: #0f6b51; border-color: #0f6b51;
}
body.tela-painel .q.meio {
  background: #fdf0dd; color: #96610f; border-color: #96610f;
}
body.tela-painel .q.vazio {
  background: #f4f6f9; color: var(--faint); border-color: var(--linha);
}

body.tela-painel .et      { border-color: var(--linha); color: var(--faint); }
body.tela-painel .et.ok   { border-color: #0f6b51; color: #0f6b51; }
body.tela-painel .et.meio { border-color: #96610f; color: #96610f; }
body.tela-painel .et.fora { border-color: #b8332f; color: #b8332f; }

body.tela-painel .fn-caiu { color: #b8332f; }

/* O botão é PREENCHIDO, então usa o dourado cheio da marca — o tom
   escurecido acima serve para texto, e como fundo fica um oliva sem
   graça, com o texto ilegível por cima. */
body.tela-painel .btn {
  background: var(--ouro-cheio);
  color: #14100a;
}
body.tela-painel .btn:hover { filter: brightness(1.04); }

/* No claro, a tabela precisa de um pouco mais de peso no cabeçalho
   para separar da lista — no escuro o contraste já fazia isso sozinho. */
body.tela-painel .pn-tabela th {
  color: #6b7683;
  border-bottom: 1px solid var(--linha);
  padding-bottom: 10px;
}
body.tela-painel .pn-tabela td { border-top-color: rgba(0, 20, 41, .08); }

/* ---------- a coluna da formação no painel ----------
   Progresso e prazo juntos, um sobre o outro. Separados não dizem
   nada: "2 de 10" é ótimo no primeiro dia e é abandono no sexto. */
.ac-cel { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.ac-prog { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ac-prazo { font-size: 11.5px; color: var(--faint); }
.ac-prazo.apertando { color: #f59e42; font-weight: 600; }
.ac-prazo.venceu { color: #f0716a; font-weight: 600; }

body.tela-painel .ac-prazo.apertando { color: #96610f; }
body.tela-painel .ac-prazo.venceu { color: #b8332f; }


/* ---------- o vídeo no celular ----------
   O Daniel quer ele "quase ocupando a tela toda", com o título em cima
   e o botão embaixo. Para isso a largura passa a mandar e todo o resto
   encolhe — logo menor, margens finas, menos respiro entre as peças.
   Nada disso corta nada: só aperta o que sobrava. */
@media (max-width: 620px) {
  .video-caixa { padding: 16px 12px 22px; }
  .video-caixa .logo { width: 104px; height: 30px; margin-bottom: 12px; }
  .video-caixa .olho { margin-bottom: 4px; }
  .video-caixa h1 { font-size: 19px; margin-bottom: 14px; }
  .video-caixa .aviso { font-size: 13px; }
  .video-caixa .depois-linha { margin-top: 16px; }
}


/* O aviso e o botão dividem o mesmo lugar: um some quando o outro
   aparece. Reservando a mesma altura para os dois, a página não dá um
   pulo no instante em que o vídeo termina — que é justamente quando a
   pessoa está olhando. */
.video-caixa .aviso,
.video-caixa #liberado {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-caixa .aviso[hidden],
.video-caixa #liberado[hidden] { display: none; }


/* ---------- o topo da tela de vídeo ----------
   Logo à esquerda, etapa à direita, na MESMA linha. Empilhados eles
   comiam duas linhas e empurravam o vídeo para baixo — sobrava vazio
   embaixo e faltava vídeo. */
.v-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.v-topo .logo { margin: 0; width: 104px; height: 30px; flex: 0 0 auto; }
.v-topo .olho { margin: 0; }

/* O respiro em volta do vídeo encolhe junto: o que sobrava embaixo era
   espaçamento, não conteúdo. */
.video-caixa { padding-top: 20px; padding-bottom: 20px; }
.video-caixa h1 { margin-bottom: 12px; }
.video-caixa .aviso,
.video-caixa #liberado { min-height: 48px; }
.video-caixa .depois-linha { margin-top: 8px; }

@media (max-width: 620px) {
  /* No celular tudo em volta encolhe, então sobra mais para o vídeo. */
  .palco { width: min(100%, calc((100dvh - 210px) * 9 / 16)); }
  .v-topo .logo { width: 92px; height: 26px; }
  .v-topo { margin-bottom: 8px; }
  .video-caixa { padding: 14px 12px 16px; }
  .video-caixa h1 { font-size: 19px; margin-bottom: 10px; }
}

/* ---------- o aviso de sair vira ALERTA ----------
   Pedido do Daniel. A caixa deixa de ser neutra: ganha o âmbar de
   atenção na borda e um ícone. O texto continua sendo o dele — o que
   muda é o peso com que ele chega. */
.modal-caixa.alerta {
  border-color: rgba(245, 158, 66, .45);
  box-shadow: 0 0 0 1px rgba(245, 158, 66, .12),
              0 30px 70px -30px #000;
}

/* Uma faixa fina no topo em vez de fundo colorido: alerta que pinta a
   caixa inteira compete com o texto que ele deveria destacar. */
.modal-caixa.alerta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, #f59e42, #ccb054);
}

.alerta-topo {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 8px;
  padding-right: 30px;
}
.alerta-topo h2 { margin: 0; }

.alerta-icone {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: #f59e42;
}

.modal-caixa.alerta .modal-sub b { color: var(--texto); font-weight: 600; }


/* ============================================================
   O FORMULÁRIO NO CELULAR

   Pedido do Daniel (02/09): *"a fonte do texto do formulário muito
   pequenininha para o celular, tem muito espaço vazio. Eu quero que
   seja grande"*.

   Eram dois problemas somados. A letra era pensada para monitor, e o
   corpo ficava centrado na vertical — com uma pergunta curta, sobrava
   metade da tela em branco em cima e embaixo, e a pergunta nascia no
   meio do nada. Agora o conteúdo começa no alto e usa a largura toda.

   ESTE BLOCO FICA NO FIM DO ARQUIVO DE PROPÓSITO. Neste CSS, media
   query escrita no meio é sobrescrita em silêncio por qualquer regra
   do mesmo seletor que venha depois — já aconteceu com a barra de
   menu do celular, que passou dias sem funcionar por isso.
   ============================================================ */
@media (max-width: 620px) {

  .form-caixa { padding: 22px 18px 44px; }
  .form-caixa .logo { margin: 0 auto 18px; }

  .op {
    min-height: 78px;
    padding: 16px;
    margin-bottom: 11px;
    font-size: 17.5px;
    border-radius: 14px;
  }
  .op::before {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 15px;
  }

  /* 16px é o piso: abaixo disso o iPhone dá zoom sozinho ao focar o
     campo, e a página inteira sai do lugar. */
  #campo textarea {
    font-size: 16.5px;
    min-height: 150px;
  }
  #campo input { font-size: 16.5px; }

  .form-caixa .btn {
    max-width: none;
    font-size: 16px;
    padding: 16px 20px;
  }
}


/* ============================================================
   A ABERTURA DO FORMULÁRIO

   Seletores novos e exclusivos desta tela, então não há regra
   anterior no arquivo para brigar com estas.
   ============================================================ */
#abertura[hidden], #formulario[hidden] { display: none; }

#abertura h1 { margin-bottom: 18px; }

.abre-txt {
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--dim);
}

/* ------------------------------------------------------------
   O AVISO DE HONESTIDADE (28/10/2026)

   Pedido do Daniel para a vaga em que o formulário mede nível de
   conhecimento: "um alerta bem forte, bem antes dela começar". Por
   isso é um bloco e não mais um parágrafo: a barra dourada e o fundo
   separado param o olho antes do botão.

   Quem decide se ele aparece é o `cadastro.js`, pela vaga. No funil de
   Social Seller nada muda.
   ------------------------------------------------------------ */
.aviso-forte {
  position: relative;
  margin: 26px 0 26px;
  padding: 20px 22px 18px;
  border: 1px solid rgba(201, 162, 39, .22);
  border-radius: 14px;
  /* Um fundo que sobe para o dourado, de leve: o bloco se separa da
     página sem virar uma caixa de alerta de sistema. */
  background:
    linear-gradient(180deg, rgba(201, 162, 39, .07) 0%, rgba(201, 162, 39, 0) 60%),
    #0a1221;
  text-align: left;
}

.aviso-forte[hidden] { display: none; }

/* O selo diz o que é isto antes de a pessoa ler a frase, e é o que
   tira do bloco a cara de aviso de erro. */
.aviso-selo {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  border: 1px solid rgba(201, 162, 39, .34);
  border-radius: 999px;
  color: var(--ouro);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.aviso-forte p {
  margin: 0 0 10px;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--dim);
}

.aviso-forte p:last-child { margin-bottom: 0; }

/* A frase que precisa ser lida até por quem passa o olho. */
.aviso-forte-l {
  margin-bottom: 12px !important;
  color: var(--texto) !important;
  font-size: 19px !important;
  font-weight: 600;
  line-height: 1.4 !important;
  letter-spacing: -.01em;
}

/* O fecho é a parte que acalma, e por isso vem depois de um fio. */
.aviso-fecho {
  margin-top: 14px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 14.5px !important;
  color: var(--dim2, var(--dim));
}

@media (max-width: 620px) {
  .aviso-forte { padding: 18px 16px 16px; }
  .aviso-forte p { font-size: 16px; }
  .aviso-forte-l { font-size: 18px !important; }
}

/* O botão respira: ele é o único gesto da tela, e a distância diz
   "leia primeiro" sem precisar de instrução. */
#abertura .btn { margin-top: 12px; }

@media (max-width: 620px) {
  .abre-txt { font-size: 17px; }
  #abertura .btn { width: 100%; max-width: none; }
}

/* O quadro do acesso à Academia, na tela de fim. */
.acesso {
  margin: 18px 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--linha);
  border-left: 2px solid var(--ouro);
  border-radius: 11px;
  background: #071120;
  text-align: left;
}
.acesso-l {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
}
.acesso-l:last-child { margin-bottom: 0; }
.acesso-l span {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}


/* ============================================================
   O PAINEL: MARCAR CANDIDATOS E AGIR EM VARIOS

   Seletores exclusivos desta tela — nenhuma regra anterior do arquivo
   disputa com estas.
   ============================================================ */

/* A barra só existe enquanto há alguém marcado. Botão de excluir
   sempre visível é botão que se clica sem querer. */
.pn-massa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 11px 15px;
  border: 1px solid var(--linha);
  border-left: 2px solid var(--ouro);
  border-radius: 10px;
  background: var(--carta);
  font-size: 13.5px;
}
.pn-massa[hidden] { display: none; }
.pn-massa-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* Vermelho só na borda e no texto: um botão inteiro vermelho no meio
   de uma tabela puxa o olho o tempo todo e ensina a ignorá-lo. */
.btn-fino.perigo {
  border-color: #e0736c;
  color: #c2453d;
}
.btn-fino.perigo:hover { background: rgba(224, 115, 108, .10); }
.btn-fino[disabled] { opacity: .5; cursor: default; }

.col-marca { width: 34px; padding-right: 0; }
.pn-tabela .marca,
.pn-tabela #marca-todos {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--ouro);
}

/* A caixinha é pequena, mas o alvo do dedo cresce por baixo dela sem
   aparecer: alvo grande não precisa de desenho grande. */
@media (pointer: coarse) {
  .col-marca { width: 44px; }
  .pn-tabela .marca, .pn-tabela #marca-todos { width: 20px; height: 20px; }
}

/* Excluído visto pelo filtro "Excluídos": apagado, e o nome riscado —
   para não haver dúvida sobre o que aquela lista é. */
.pn-tabela tr.fora { opacity: .55; }
.pn-tabela tr.fora .nm { text-decoration: line-through; }


/* ============================================================
   O HISTÓRICO DA FICHA

   Uma linha por coisa que aconteceu. A hora à esquerda, alinhada, e o
   fato à direita: assim o olho desce pela coluna das horas e vê o
   ritmo da pessoa sem ler uma palavra.
   ============================================================ */
.hs {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 13.5px;
  line-height: 1.5;
}
.hs:last-child { border-bottom: 0; }

.hs-q {
  flex: 0 0 96px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  padding-top: 1px;
}
.hs-t { color: var(--texto); min-width: 0; }
.hs-t i { color: var(--faint); font-style: normal; }
.hs-t em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: var(--faint);
}

/* A prova é o evento que interessa de verdade — é o único em que a
   pessoa foi medida. Ganha a marca dourada; o resto fica cinza para
   não competir. */
.hs-prova .hs-t { font-weight: 500; }
.hs-prova .hs-q { color: var(--ouro); }
.hs-espera .hs-q { color: #c2453d; }

@media (max-width: 620px) {
  .hs { flex-direction: column; gap: 2px; }
  .hs-q { flex: none; }
}

/* O link do acesso na tela de fim: precisa parecer clicável sem virar
   um azul de navegador no meio da identidade da marca. */
.acesso-l a { color: var(--ouro); text-decoration: none; border-bottom: 1px solid rgba(204,176,84,.4); }
.acesso-l a:hover { border-bottom-color: var(--ouro); }

/* ============================================================
   O DESAFIO FINAL NA FICHA

   As duas partes que o candidato faz por último: o perfil
   comportamental e as dez casas do Tabuleiro.

   Reaproveita a paleta e as variáveis da ficha. Nada aqui
   inventa cor nova: `var(--card)` e `var(--bg)` foram usadas
   uma vez num componente deste projeto sem existir, e o
   resultado foi meia tela transparente sem erro nenhum.
   ============================================================ */

.df-bloco{
  background:var(--sup2);
  border:1px solid var(--linha);
  border-radius:12px;padding:16px 18px;margin-bottom:12px;
}
.df-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.df-topo b{font-size:17px;color:var(--texto)}
.df-tag{
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:20px;
  background:var(--linha);color:var(--dim);
}
.df-tag.bom{background:var(--verde-f);color:var(--verde)}
.df-tag.medio{background:rgba(204,176,84,.18);color:var(--ouro)}
.df-tag.ruim{background:var(--vermelho-f);color:var(--vermelho)}

/* ---------- as quatro réguas do perfil ----------
   Partem do MEIO. O índice vai de -30 a +30 e o zero é o
   equilíbrio: régua começando na esquerda faria -20 parecer
   "pouco de alguma coisa" em vez de "o oposto disso". */
.df-eixos{display:flex;flex-direction:column;gap:9px}
.df-eixo{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,1.6fr) 38px;
  align-items:center;gap:10px}
.df-l{font-weight:700;font-size:14px;color:var(--dim);text-align:center}
.df-eixo.alto .df-l{color:var(--ouro)}
.df-nome{font-size:12.5px;color:var(--faint);min-width:0}
.df-reg{position:relative;height:10px;background:var(--sup);
  border-radius:6px;min-width:0}
.df-reg::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;
  width:1px;background:var(--linha)}
.df-reg i{position:absolute;top:1px;bottom:1px;border-radius:4px}
.df-reg i.p{left:50%;background:var(--ouro)}
.df-reg i.n{right:50%;background:var(--azul)}
.df-v{font-size:13px;color:var(--texto);text-align:right;
  font-variant-numeric:tabular-nums}
.df-obs{font-size:12.5px;color:var(--faint);line-height:1.55;margin:12px 0 0}

.df-somas{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--faint)}
.df-somas b{color:var(--texto);font-size:15px}

/* ---------- casa a casa ---------- */
.df-casa{
  border:1px solid var(--linha);border-radius:12px;
  padding:14px 16px;margin-bottom:10px;
}
.df-casa-t{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px}
.df-casa-t b{font-size:14px;color:var(--texto)}
.df-pt{font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;
  font-variant-numeric:tabular-nums}
.df-pt.max{background:var(--verde-f);color:var(--verde)}
.df-pt.meio{background:rgba(204,176,84,.16);color:var(--ouro)}
.df-pt.zero{background:var(--vermelho-f);color:var(--vermelho)}
.df-pt.tot{background:var(--linha);color:var(--dim)}

.df-frase{font-size:13px;font-style:italic;color:var(--faint);
  border-left:2px solid var(--ouro);padding-left:11px;margin-bottom:12px;line-height:1.5}
.df-q{font-size:13.5px;color:var(--dim);line-height:1.5;margin-bottom:9px}
.df-rot{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.df-perg{font-size:12.5px;color:var(--faint);margin:12px 0 6px;line-height:1.45}

/* A justificativa é a única com fundo próprio. É a parte escrita
   por gente, para gente, e é a que o Daniel disse que vale mais
   que a alternativa marcada. */
.df-just{
  background:var(--sup);border-radius:9px;
  padding:12px 14px;font-size:14.5px;line-height:1.6;color:var(--texto);
  white-space:pre-wrap;
}
.df-ler{margin-top:12px;padding-top:11px;border-top:1px dashed var(--linha);
  font-size:12.5px;color:var(--faint);line-height:1.5}
.df-ler b{display:block;color:var(--ouro);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:4px}

@media (max-width:620px){
  .df-eixo{grid-template-columns:20px minmax(0,1fr) 38px}
  .df-reg{grid-column:1/-1;height:12px}
  .df-just{font-size:15px}
  .df-casa{padding:13px 14px}
}

/* A décima aula é o Desafio Final, e a linha diz isso. Somar sem
   explicar transformaria "prova aprovada" em "coisa feita". */
.ok-txt{color:var(--verde)}

/* ============================================================
   O QUADRO

   Cinco colunas, e elas não são escolha de ninguém: são o caminho
   que o candidato percorre. Não se arrasta, e isso é decisão.

   No CRM arrastar move o cartão porque a coluna registra o que a
   PESSOA DO TIME fez. Aqui a coluna registra o que o CANDIDATO
   fez: arrastar alguém de "vídeos" para "cadastro" seria dizer
   que ela preencheu um formulário que ela não preencheu.
   ============================================================ */

.pn-vistas{display:flex;gap:6px;margin:0 0 14px}
.pn-vista{
  background:none;border:1px solid var(--linha);color:var(--dim);
  font:500 12.5px/1 var(--corpo);letter-spacing:.04em;
  padding:9px 16px;border-radius:8px;cursor:pointer;transition:.15s;
}
.pn-vista.on{background:var(--ouro-cheio);border-color:var(--ouro-cheio);color:#14100a;font-weight:600}
.pn-vista:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
@media (hover:hover){ .pn-vista:not(.on):hover{border-color:var(--ouro);color:var(--ouro)} }

.pn-quadro[hidden]{display:none}
.qd-trilho{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);
  gap:12px;overflow-x:auto;padding-bottom:10px;
}

.qd-col{
  background:var(--sup2);
  border:1px solid var(--linha);border-radius:12px;
  display:flex;flex-direction:column;min-width:0;
}
.qd-cab{
  padding:13px 14px 11px;border-bottom:1px solid var(--linha);
  display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;
}
.qd-nome{font:600 13px/1.2 var(--corpo);color:var(--texto)}
.qd-n{
  font:700 11px/1 var(--corpo);color:var(--dim);
  background:var(--linha);padding:3px 8px;border-radius:20px;
  font-variant-numeric:tabular-nums;
}
.qd-dica{grid-column:1/-1;font-size:11px;color:var(--faint);line-height:1.35}

.qd-pilha{padding:10px;display:flex;flex-direction:column;gap:8px;min-height:60px}
.qd-vazio{font-size:12px;color:var(--faint);text-align:center;padding:14px 0;margin:0}

/* ---------- o cartão ----------
   Mesma anatomia do CRM: nome em cima com a ação rápida, e embaixo
   UMA linha com dois cantos. */
.qd-card{
  background:var(--carta);border:1px solid var(--linha);
  border-left:3px solid var(--linha);
  border-radius:10px;padding:10px 11px;
  display:flex;flex-direction:column;gap:6px;
  cursor:pointer;transition:.15s;
}
.qd-card:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
@media (hover:hover){
  .qd-card:hover{border-color:rgba(204,176,84,.4);transform:translateY(-1px)}
}

/* A cor da borda esquerda diz a coluna sem depender de ler o
   cabeçalho. É a Temperatura do cartão do CRM, por outro nome. */
.qd-contato  .qd-card{border-left-color:var(--azul)}
.qd-videos   .qd-card{border-left-color:var(--azul-claro)}
.qd-cadastro .qd-card{border-left-color:var(--ouro)}
.qd-academia .qd-card{border-left-color:var(--ouro-cheio, var(--ouro))}
.qd-fim      .qd-card{border-left-color:var(--verde)}

.qd-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.qd-quem{font:600 14px/1.3 var(--corpo);color:var(--texto);min-width:0;
  overflow-wrap:anywhere}
.qd-zap{
  flex:0 0 auto;width:26px;height:26px;border-radius:7px;
  display:grid;place-items:center;color:var(--faint);
  background:var(--sup);transition:.15s;
}
.qd-zap svg{width:14px;height:14px}
@media (hover:hover){ .qd-zap:hover{color:var(--verde);background:var(--verde-f)} }

/* Esta linha existe SEMPRE, mesmo vazia. É o que faz todos os
   cartões terem a mesma altura e a coluna parar de parecer uma
   escada -- foi assim que o quadro do CRM resolveu isso. */
.qd-sinais{display:flex;align-items:center;justify-content:space-between;
  gap:6px;min-height:16px}
.qd-esq{display:flex;align-items:center;min-width:0;overflow:hidden}
.qd-dir{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.qd-al{font-size:11px;color:var(--faint);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.qd-al.urgente{color:var(--vermelho);font-weight:600}
.qd-al.fora{color:var(--vermelho)}
.qd-f{font:600 11px/1 var(--corpo);color:var(--dim);
  background:var(--sup);padding:3px 7px;border-radius:5px;
  font-variant-numeric:tabular-nums}
.qd-f.ouro{background:rgba(204,176,84,.18);color:var(--ouro)}

.qd-barra{height:2px;background:var(--sup);border-radius:2px;overflow:hidden}
.qd-barra i{display:block;height:100%;background:var(--ouro)}

@media (max-width:620px){
  .qd-trilho{grid-auto-columns:minmax(200px,80vw)}
  .qd-quem{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .qd-card,.pn-vista,.qd-zap{transition:none}
}

/* ============================================================
   TODOS OS CARTÕES COM A MESMA ALTURA

   Medido no navegador: 79, 81 e 89px na mesma coluna. Duas causas,
   e as duas são de conteúdo e não de estilo.

     nome de duas linhas   "Yasmim Bezerra de Carvalho" quebra,
                           "Igor Teodoro" não
     a barra de prazo      some quando o prazo venceu, e leva 2px
                           junto

   Altura desigual faz a coluna parecer escada, e o olho lê degrau
   como hierarquia: o cartão mais alto parece mais importante. Não é.

   O conserto é RESERVAR o espaço nos dois casos, e não encolher o
   conteúdo. Nome continua inteiro em duas linhas; a barra continua
   sumindo, mas o lugar dela fica.
   ============================================================ */

.qd-quem{
  /* duas linhas sempre, cheias ou não */
  min-height:2.6em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.qd-card > .qd-barra{margin-top:auto}

/* O lugar da barra existe mesmo quando ela não. Um pseudo-elemento
   em vez de uma barra vazia: barra vazia e barra cheia se parecem de
   longe, e "venceu" já está dito em vermelho na linha de cima. */
.qd-card::after{content:"";display:block;height:2px}
.qd-card:has(.qd-barra)::after{display:none}

/* ============================================================
   A FICHA EM TELA CHEIA

   Mesmo desenho do CRM desde 03/09, com a referência que o Daniel
   escolheu: Pipedrive.

   NÃO É POP-UP. O clique no fundo não fecha: em pop-up isso é
   esperado, em tela cheia um clique fora de um campo fecharia a
   tela no meio de uma leitura. Fecha pelo botão ou pelo Esc.

   356px de dados à esquerda, o resto para a direita. Duas colunas
   iguais era a proporção errada: dado de cadastro é curto, texto
   discursivo precisa de largura.

   E A ESQUERDA NÃO TEM ABA. Três abas de 90px numa coluna de 340
   gastam meia largura para esconder dois terços do conteúdo. Quem
   tem aba é a direita, que é larga.
   ============================================================ */

.ficha-tela{
  position:fixed;inset:0;z-index:60;overflow-y:auto;
  background:var(--fundo-tela);
}
.ficha-tela[hidden]{display:none}
.ficha-quadro{max-width:1180px;margin:0 auto;padding:0 20px 60px}

/* O topo grudado precisa de fundo OPACO, senão o conteúdo passa por
   baixo dele ao rolar. */
.ficha-topo{
  position:sticky;top:0;z-index:3;
  background:var(--fundo-tela);
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding:18px 0 14px;border-bottom:1px solid var(--linha);
}
.ficha-voltar{
  background:none;border:1px solid var(--linha);color:var(--dim);
  font:500 12.5px/1 var(--corpo);padding:9px 14px;border-radius:8px;
  cursor:pointer;flex:0 0 auto;transition:.15s;
}
@media (hover:hover){ .ficha-voltar:hover{border-color:var(--ouro);color:var(--ouro)} }
.ficha-voltar:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}

.ficha-ident{flex:1 1 240px;min-width:0}
.ficha-ident h2{
  font:700 clamp(20px,2.3vw,27px)/1.15 var(--display);
  margin:0;color:var(--texto);overflow-wrap:anywhere;
}
.ficha-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:5px;font-size:12.5px;color:var(--faint)}


/* ---------- as duas colunas ----------
   A esquerda vai dentro de um container para a grade ter DUAS células
   e nenhuma linha para repartir. Sem isso, o item que atravessa as
   linhas força a altura delas e abre vãos — foi o que aconteceu no
   CRM em 03/09, com 194px de buraco entre dois blocos. */
.ficha-corpo{
  display:grid;grid-template-columns:356px minmax(0,1fr);
  gap:18px;align-items:start;padding-top:18px;
}
.ficha-esq{display:grid;gap:12px;align-content:start}
.ficha-dir{min-width:0;display:flex;flex-direction:column;gap:10px}

.fb{
  background:var(--carta);border:1px solid var(--linha);
  border-radius:12px;padding:15px 17px;
}
.fb h3{
  font:600 11px/1 var(--corpo);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:0 0 12px;
}

/* ---------- as abas da direita ---------- */
.ficha-abas{display:flex;gap:6px;flex-wrap:wrap}
.fa{
  background:none;border:1px solid var(--linha);color:var(--dim);
  font:500 12.5px/1 var(--corpo);padding:9px 15px;border-radius:8px;
  cursor:pointer;transition:.15s;
}
.fa.on{background:var(--ouro-cheio);border-color:var(--ouro-cheio);color:#14100a;font-weight:600}
.fa:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
@media (hover:hover){ .fa:not(.on):hover{border-color:var(--ouro);color:var(--ouro)} }

/* A direita rola sozinha: descer até o fim do histórico não pode
   levar os dados do candidato junto — e a pergunta que se responde
   lendo o histórico é quase sempre sobre o cadastro. */
.b-larga{max-height:calc(100vh - 250px);overflow-y:auto;scrollbar-width:thin}
.b-larga::-webkit-scrollbar{width:7px}
.b-larga::-webkit-scrollbar-thumb{background:var(--linha);border-radius:4px}

@media (max-width:900px){
  .ficha-corpo{grid-template-columns:1fr}
  .b-larga{max-height:none}
}
@media (max-width:620px){
  .ficha-quadro{padding:0 14px 50px}
  .ficha-topo{padding:14px 0 12px}
}
@media (prefers-reduced-motion:reduce){
  .ficha-voltar,.fa{transition:none}
}

/* ============================================================
   A BARRA DE ETAPAS, EM CHEVRON

   Copiada do desenho da ficha do CRM, e não aproximada: o mesmo
   `clip-path`, a mesma ponta de 9px, o mesmo encaixe à esquerda.

   Cada coluna é uma ALTURA no caminho. `andou` fica no que ficou
   para trás, `aqui` no atual.

   NO CRM CLICAR NELA MOVE O LEAD. Aqui ela não move ninguém, e
   isso é a mesma decisão do quadro: a etapa é consequência do que
   o CANDIDATO fez, e não do que quem olha decidiu.
   ============================================================ */
.ficha-etapas{display:flex;gap:3px;margin:12px 0 0;overflow-x:auto;padding-bottom:2px}
.fe-passo{
  flex:1 1 0;min-width:88px;
  background:var(--sup);color:var(--faint);
  padding:7px 10px 7px 16px;font-size:11.5px;
  display:flex;align-items:center;justify-content:center;
  /* a seta: a ponta à direita e o encaixe à esquerda */
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%);
}
.fe-passo:first-child{clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%)}
.fe-passo:last-child{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 9px 50%)}
.fe-passo b{font-weight:500;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}
.fe-passo.andou{background:var(--verde-f);color:var(--verde)}
.fe-passo.aqui{background:var(--verde);color:#fff}
.fe-passo.aqui b{font-weight:700}

/* A linha de contagem, como a da ficha do CRM: as parcelas somando
   da esquerda para a direita, e o total destacado no fim. */
.ficha-nota-conta{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid var(--linha);
  font-size:12px;color:var(--faint);
}
.ficha-nota-conta span{display:inline-flex;align-items:baseline;gap:5px}
.ficha-nota-conta b{color:var(--dim);font-size:14px;
  font-variant-numeric:tabular-nums}
.ficha-nota-conta span + span::before{content:'+';color:var(--faint);
  margin-right:3px;opacity:.6}
.ficha-total{margin-left:auto}
.ficha-total::before{content:'=' !important}
.ficha-total b{color:var(--ouro);font-size:21px;font-weight:700}

@media (max-width:620px){
  .fe-passo{min-width:76px;font-size:10.5px;padding:6px 8px 6px 14px}
}

/* ---------- depois da formação: o único bloco da ficha com botão ----
   As cinco colunas de cima do quadro são calculadas do que o CANDIDATO
   fez, e por isso não têm gesto. Estas quatro registram o que NÓS
   fizemos, e por isso têm.

   Herda `.fb`: nada aqui redefine fundo, borda ou raio — só acrescenta
   o que é próprio. Duas maneiras de desenhar a mesma caixa não convivem
   (o `columns: 2` da ficha do CRM já ensinou isso em 03/09).

   As cores saem dos tokens do `body.tela-painel`. Nenhum valor fixo:
   escrever `#001429` aqui deixaria o bloco invisível se um dia esta
   ficha aparecer no tema escuro, e foi exatamente esse o erro de 05/09,
   quando construí a ficha inteira escura sobre fundo branco. */
.et-bloco { border-color: var(--ouro-cheio); }

.et-rot {
  display: block;
  font: 500 12px/1.4 var(--corpo);
  color: var(--dim);
  margin: 12px 0 6px;
}

.et-bts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* O campo ocupa a largura do bloco: `.input-busca` nasceu para a barra
   de busca, que é estreita de propósito. Sem isto, o campo de data
   ficaria com metade da caixa e sobraria um vão do lado. */
.et-bloco .input-busca { width: 100%; }
.et-bloco textarea.input-busca { resize: vertical; min-height: 48px; }

/* ============================================================
   PRECISAM DE VOCÊ

   A lista de gestos seus, acima do quadro. Ela existe porque as quatro
   colunas que exigem ação sua ficavam no fim de uma fila de nove,
   fora da tela e vazias — o que você precisa fazer estava invisível,
   e o que o candidato faz sozinho ocupava a largura toda.

   Some quando não há nada a fazer: caixa vazia grudada na tela todo
   dia ensina a não olhar para ela.
   ============================================================ */
.pv {
  background: var(--carta);
  border: 1px solid var(--ouro-cheio);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
.pv-cab {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--linha);
}
.pv-cab h3 {
  margin: 0;
  font: 600 13px/1 var(--corpo);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto);
}
.pv-n {
  font: 600 12px/1 var(--corpo);
  background: var(--ouro-cheio); color: #001429;
  border-radius: 999px; padding: 4px 9px;
}

.pv-lista { display: flex; flex-direction: column; }

.pv-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--linha);
}
.pv-linha:first-child { border-top: none; }
/* A entrevista que passou é a única com alguém esperando do outro
   lado. Faixa e não fundo inteiro: fundo colorido em linha de lista
   vira semáforo e some no meio de outras cores. */
.pv-linha.urgente { box-shadow: inset 3px 0 0 var(--vermelho, #b8332f); }

/* Botão porque é clicável — abre a ficha. `text-align:left` porque
   `button` centraliza por padrão e a lista tem que alinhar à esquerda. */
.pv-quem {
  flex: 1; min-width: 0;
  background: none; border: none; padding: 0;
  text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  font: inherit; color: inherit;
}
.pv-quem b { font: 500 14px/1.3 var(--corpo); color: var(--texto); }
.pv-quem span { font: 400 12.5px/1.3 var(--corpo); color: var(--dim); }
.pv-quem:hover b { text-decoration: underline; }

/* `.btn` desta folha é o CTA das páginas do candidato: largo, alto e
   dourado. Numa linha de lista ele engoliria tudo. Estes dois modos
   só valem onde as duas classes aparecem juntas, então nada muda nas
   telas do candidato. */
.btn.pequeno {
  width: auto; max-width: none;
  padding: 8px 14px;
  font-size: 13px;
  white-space: nowrap;
  flex: none;
  margin: 0;
}
.btn.pequeno.ghost {
  background: none;
  color: var(--texto);
  border: 1px solid var(--linha);
}
.btn.pequeno.ghost:hover { border-color: var(--ouro-cheio); }

/* ---------- o quadro: as colunas que são suas ----------
   Nove colunas de 232px pedem 2.088px e são cortadas na direita — que
   é justamente onde ficam as quatro que exigem gesto seu. Coluna nossa
   e vazia vira faixa estreita: continua dizendo que existe, e devolve
   a largura para onde há gente. */
.qd-nossa { border-color: var(--ouro-cheio); }
.qd-magra { min-width: 92px; }
.qd-magra .qd-dica,
.qd-magra .qd-vazio { display: none; }
.qd-magra .qd-nome { font-size: 11.5px; }

/* ---------- o funil: onde a régua vira outra ---------- */
.fn-nossa { border-style: dashed; }
/* A virada entre "o que ele faz" e "o que você faz". Uma linha, e não
   um título: título novo ali quebraria a fileira em duas e o funil
   deixaria de se ler de uma vez. */
.fn-vira { box-shadow: inset 3px 0 0 var(--ouro-cheio); }

/* ============================================================
   PENTE FINO DE 16/09/2026

   Medido numa cópia local do painel com doze candidatos de verdade,
   em 1366px e em 390px, contando o que transborda, o que sai do pai e
   o que é cortado. Cada regra abaixo corresponde a um defeito achado.
   ============================================================ */

/* 1. A COLUNA DA ESQUERDA PASSAVA POR BAIXO DAS ABAS.
   Item de grade tem `min-width: auto`, e isso quer dizer "nunca menor
   que a palavra mais comprida". Um link de Instagram ou um e-mail
   longo, sem espaço para quebrar, alargava a coluna de 356px para
   472px, e ela entrava debaixo da direita: as abas ficavam em cima do
   bloco "Depois da formação" e o cadastro saía cortado. */
.ficha-esq, .ficha-esq > .fb { min-width: 0; }
.dl dt { flex: 0 0 118px; min-width: 0; }
.dl dd { min-width: 0; overflow-wrap: anywhere; }
.vd > span { min-width: 0; overflow-wrap: anywhere; }

/* 2. AS ETAPAS QUE AINDA NÃO ACONTECERAM ERAM INVISÍVEIS.
   O fundo delas (`--sup`, #f2f4f7) era quase o mesmo da tela
   (#f4f6f9): sobrava só o texto solto, sem a seta. */
body.tela-painel .fe-passo { background: #e5e9ef; color: var(--dim); }
body.tela-painel .fe-passo.andou { background: var(--verde-f); color: var(--verde); }
body.tela-painel .fe-passo.aqui { background: var(--verde); color: #fff; }

/* 3. AS COLUNAS VAZIAS "NOSSAS" NÃO ENCOLHIAM.
   `.qd-magra` pedia 92px, mas a grade dava 232px para toda coluna, e
   as quatro etapas de depois da formação ficavam fora da tela, na
   rolagem. Com flex cada coluna diz a própria largura. */
.qd-trilho { display: flex; align-items: flex-start; }
.qd-trilho > .qd-col { flex: 1 0 232px; }
.qd-trilho > .qd-col.qd-magra { flex: 0 0 112px; min-width: 112px; }
@media (max-width: 620px) {
  .qd-trilho > .qd-col { flex: 0 0 80vw; }
  .qd-trilho > .qd-col.qd-magra { flex: 0 0 112px; }
}

/* 4. "FALTAM 4 DIAS" SAÍA CORTADO NO CELULAR.
   O canto da esquerda do cartão era `overflow: hidden` e dividia a
   linha com os números da direita. Agora a linha quebra quando não
   cabe, em vez de esconder o prazo, que é a informação urgente. */
.qd-sinais { flex-wrap: wrap; row-gap: 4px; }
.qd-esq { overflow: visible; }

/* 5. NO CELULAR A LISTA ESTICAVA A PÁGINA INTEIRA.
   A tabela tem 740px de largura mínima, e a caixa em volta dela
   (`.tabela-rolante`) nunca teve regra nenhuma: o nome estava no HTML e
   não no CSS. A tabela empurrava a página para 833px numa tela de 390,
   o celular encolhia tudo para caber, e a ficha abria do mesmo tamanho.
   Conteúdo largo rola dentro da própria caixa, nunca a página. */
.tabela-rolante { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela-rolante[hidden] { display: none; }

/* 6. "ENTREVISTADO" SAÍA CORTADO NO CELULAR: a etapa tinha 76px, e a
   palavra pede 84. A barra já rola de lado, então cada etapa pode ter
   o tamanho do próprio nome. */
@media (max-width: 620px) {
  .fe-passo { min-width: 96px; }
}

/* 7. O ERRO DA FICHA E O MOTIVO QUE FALTA.
   `#ficha-erro` existe porque o erro do painel ficava atrás da ficha
   em tela cheia. E o campo do motivo ganha a borda dourada quando é
   ele que falta: cinza e dourado dizem "continua", vermelho diria
   "você errou". */
#ficha-erro { margin: 12px 0 0; }
.et-bloco textarea.falta { border-color: var(--ouro-cheio); box-shadow: 0 0 0 3px rgba(204, 176, 84, .22); }

/* ============================================================
   O TESTE DE PERFIL (29/10/2026)
   O cartão de opção é o mesmo do formulário (`.op`). Muda o
   quadrado: no lugar da letra entra o número que a pessoa tocou, e
   vazio enquanto ela não toca. Ordenar quatro coisas pede ver a
   ordem inteira de uma vez, e o número no quadrado é isso.
   ============================================================ */
.teste-caixa h1 b { color: var(--ouro); }
.teste-carregando { color: var(--faint); text-align: center; padding: 40px 0; }

/* Mesma conta do palco dos vídeos (a largura nasce da altura), com
   mais espaço reservado: aqui, além do título e do botão, entram o
   rótulo da etapa e a linha dos números. Tudo cabe sem rolar. */
.teste-caixa .palco {
  margin: 16px auto 14px;
  width: min(100%, calc((100dvh - 330px) * 9 / 16));
}

.teste-fatos {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  color: var(--dim); font-size: 14.5px;
}
.teste-fatos b { color: var(--texto); font-weight: 600; }

.btn:disabled { opacity: .45; cursor: default; filter: none; transform: none; }

.teste-sit { margin: 0 0 14px; color: var(--dim); font-size: 16px; line-height: 1.55; }
.teste-caixa .ajuda b { color: var(--texto); }

.op.ordem::before { content: attr(data-n); counter-increment: none; }
.op.ordem.marcada { border-color: var(--ouro); background: #101d31; }
.op.ordem.marcada::before { border-color: var(--ouro); background: var(--ouro); color: #000; font-weight: 700; }

.teste-pe {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px;
  margin-top: 6px;
}
.teste-pe .btn { justify-self: end; max-width: 220px; }
.teste-leve {
  border: 0; background: transparent; color: var(--faint);
  font: 500 14.5px/1 var(--corpo); padding: 12px 6px; cursor: pointer;
}
@media (hover: hover) { .teste-leve:hover { color: var(--texto); } }
.teste-leve:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; border-radius: 6px; }

/* O resultado: uma barra por letra, com o zero no meio. Para a direita
   é acima do equilíbrio, para a esquerda é abaixo. */
.teste-barras { display: grid; gap: 12px; margin: 18px 0 20px; }
.teste-linha {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 40px;
  align-items: center; gap: 12px; font-size: 15px;
}
.teste-linha .letra {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  border: 1px solid var(--linha); color: var(--faint); font-weight: 700;
}
.teste-linha.alto .letra { border-color: var(--ouro); color: var(--ouro); }
.teste-linha .nome { color: var(--texto); line-height: 1.25; }
.teste-linha .nome i { display: block; font-style: normal; color: var(--faint); font-size: 13px; }
.teste-linha .eixo { position: relative; height: 8px; border-radius: 999px; background: var(--sup); }
.teste-linha .eixo::after { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--linha); }
.teste-linha .eixo i { position: absolute; top: 0; height: 100%; border-radius: 999px; }
.teste-linha .eixo i.pos { left: 50%; background: var(--ouro); }
.teste-linha .eixo i.neg { right: 50%; background: var(--azul-claro); }
.teste-linha .valor { text-align: right; font-variant-numeric: tabular-nums; color: var(--dim); }

@media (max-width: 520px) {
  .teste-pe { grid-template-columns: 1fr 1fr; }
  .teste-pe .btn { grid-column: 1 / -1; max-width: none; justify-self: stretch; order: -1; }
  .teste-linha { grid-template-columns: 28px minmax(0, 1fr) 70px 34px; gap: 9px; }
}
/* Os botões do teste falam mais ("Seguir para o vídeo de 1 minuto"):
   no computador cabem numa linha. */
.teste-caixa .btn { max-width: 340px; }

/* ============================================================
   O VÍDEO DE 1 MINUTO (30/10/2026)

   Seletores exclusivos desta tela (`grav-`). O campo de arquivo é o
   botão inteiro, e não o "Escolher arquivo" do navegador: no celular
   aquele é pequeno demais para o polegar e fala inglês em metade dos
   aparelhos.
   ============================================================ */
.grav-arquivo {
  position: relative;
  display: block;
  margin: 4px 0 14px;
  padding: 22px 18px;
  border: 1.5px dashed rgba(204, 176, 84, .55);
  border-radius: 14px;
  background: rgba(204, 176, 84, .06);
  text-align: center;
  cursor: pointer;
}
.grav-arquivo:hover { border-color: var(--ouro); background: rgba(204, 176, 84, .10); }
.grav-arquivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.grav-arquivo:focus-within { outline: 2px solid var(--ouro); outline-offset: 2px; }
.grav-arquivo-t { display: block; color: var(--texto); font-size: 17px; font-weight: 600; }
.grav-arquivo-s { display: block; margin-top: 4px; color: var(--dim); font-size: 14px; }

.grav-ou {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; color: var(--faint); font-size: 13px;
}
.grav-ou::before, .grav-ou::after { content: ''; flex: 1; height: 1px; background: var(--linha); }

.grav-link label { display: block; margin-bottom: 8px; color: var(--dim); font-size: 14.5px; }
.grav-link-l { display: flex; gap: 8px; }
.grav-link input {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--sup);
  color: var(--texto);
  font: 400 16px/1.3 var(--corpo);
}
.grav-link input:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(204, 176, 84, .16); }
.teste-caixa .grav-link .btn { width: auto; max-width: none; flex: 0 0 auto; }
.grav-nota { margin: 8px 0 0; color: var(--faint); font-size: 13px; }

.grav-barra { height: 10px; margin: 18px 0 10px; border-radius: 99px; background: var(--sup); overflow: hidden; }
.grav-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a8892f, var(--ouro)); transition: width .3s; }
.grav-conta { margin: 0; color: var(--dim); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.grav-troca { margin: 14px 0 0; }

@media (max-width: 620px) {
  .grav-link-l { flex-direction: column; }
  .teste-caixa .grav-link .btn { width: 100%; }
}

/* O aviso do link aberto (30/10/2026). A regra que importa ("qualquer
   pessoa com o link pode ver") fica numa faixa própria, em destaque, e
   não no meio do parágrafo: é ela que a pessoa vai procurar no Drive. */
.grav-aviso h2 { font-size: 20px; line-height: 1.3; }
/* Sem o X de fechar: a pessoa precisa responder. O espaço guardado para ele sai. */
.grav-aviso .alerta-topo { padding-right: 0; }
.grav-regra {
  margin: 14px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(204, 176, 84, .45);
  border-radius: 11px;
  background: rgba(204, 176, 84, .08);
}
.grav-regra span { display: block; margin-bottom: 4px; color: var(--dim); font-size: 13.5px; }
.grav-regra b { display: block; color: var(--ouro); font-size: 17px; font-weight: 700; }
.grav-espera { margin: 4px 0 0; color: var(--faint); font-size: 14px; text-align: center; }
.grav-espera b { color: var(--texto); font-variant-numeric: tabular-nums; }
.grav-espera[hidden], .grav-respostas[hidden] { display: none; }
.grav-respostas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grav-op {
  min-height: 74px;
  padding: 12px 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  background: var(--sup);
  color: var(--texto);
  font: 600 15px/1.35 var(--corpo);
  text-align: center;
  cursor: pointer;
}
.grav-op:hover { border-color: var(--ouro); background: rgba(204, 176, 84, .08); }
.grav-op:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }

/* ============================================================
   PENTE FINO DO FUNIL (01/11/2026)

   Medido tela por tela, da página da vaga ao "Você terminou", em 375,
   768, 1080 em pé e 1600 de largura. Cada regra abaixo corresponde a um
   defeito achado na medição.
   ============================================================ */

/* 1. UMA MARGEM SÓ NO CELULAR. Eram três: 14px na página da vaga e no
   fim, 12px nos vídeos e 18px no formulário. Quem passa de uma tela para
   a outra via o conteúdo pular de lado. Agora todas usam 18px. */
@media (max-width: 520px) {
  body { padding: 20px 18px; }
}
@media (max-width: 620px) {
  .video-caixa { padding-left: 18px; padding-right: 18px; }
}

/* 2. OS VÍDEOS NA MESMA COLUNA DO RESTO. A tela de vídeo tinha 860px e o
   resto do funil, 620: no computador o logo e o "Vídeo 1 de 3" ficavam
   longe do vídeo, soltos nos cantos da janela. */
.video-caixa { max-width: 620px; }

/* 3. O BOTÃO DO VÍDEO TEM A LARGURA DO VÍDEO. Antes ele tinha 340px
   embaixo de um vídeo de 370 (computador) ou era mais largo que o vídeo
   (celular): as bordas não batiam. A conta é a mesma do palco, numa
   variável só, para os dois nunca divergirem. */
.video-caixa { --palco-w: min(100%, calc((100dvh - 240px) * 9 / 16)); }
@media (max-width: 620px) {
  .video-caixa { --palco-w: min(100%, calc((100dvh - 210px) * 9 / 16)); }
}
.video-caixa .palco { width: var(--palco-w); }
.video-caixa #avancar { width: var(--palco-w); max-width: none; }

/* 4. TESTE E VÍDEO DE 1 MINUTO: A TELA DO VÍDEO É CENTRADA, COMO AS DOS
   VÍDEOS. O vídeo ficava no meio e o título, os números e o botão à
   esquerda, cada um num alinhamento. E a abertura do teste passava da
   altura da janela (38px no computador): o espaço reservado para o que
   não é vídeo era menor que o que ocupa de verdade. */
.teste-caixa:has(.palco) { padding-bottom: 24px; }
.teste-caixa { --palco-w: min(100%, calc((100dvh - 350px) * 9 / 16)); }
@media (max-width: 620px) {
  .teste-caixa:has(.palco) { padding-bottom: 20px; }
  .teste-caixa { --palco-w: min(100%, calc((100dvh - 340px) * 9 / 16)); }
}
.teste-caixa .palco { width: var(--palco-w); }
.teste-caixa:has(.palco) { text-align: center; }
.teste-caixa:has(.palco) .teste-fatos { justify-content: center; }
/* No computador o botão tem a largura do vídeo, como nas telas dos
   vídeos. No celular ele ocupa a linha toda, como todo botão do funil
   no celular: embaixo de um vídeo estreito, o texto quebraria. */
@media (min-width: 621px) {
  .teste-caixa:has(.palco) .btn { width: var(--palco-w); max-width: none; padding-left: 16px; padding-right: 16px; }
}

/* 5. UM BOTÃO PRINCIPAL SÓ, DO MESMO TAMANHO EM TODO O FUNIL. O
   formulário tinha 260px e as outras telas, 340. */
@media (min-width: 621px) {
  .form-caixa .btn { max-width: 340px; }
}
/* Depois de um parágrafo o botão respira como depois dos campos. */
.form-caixa .abre-txt + .btn { margin-top: 8px; }

/* 6. O RODAPÉ DA SITUAÇÃO DO TESTE. Na primeira situação não há
   "Voltar", e o "Recomeçar esta" ficava solto no meio da linha, longe
   da borda do texto. No computador ele encosta na borda; no celular,
   "Voltar" fica à esquerda e "Recomeçar esta" à direita, nas bordas
   do botão de cima. */
.teste-pe > button.teste-leve:first-of-type { padding-left: 0; }
@media (min-width: 521px) {
  .teste-pe > span:first-child { display: none; }
  .teste-pe .btn { grid-column: 3; }
}
@media (max-width: 520px) {
  .teste-pe #t-voltar { justify-self: start; }
  .teste-pe #t-limpar { justify-self: end; padding-left: 6px; padding-right: 0; }
}

/* 7. O CAMPO DO LINK COM A MESMA CARA DOS OUTROS CAMPOS do funil. */
.grav-link input { background: #071120; }