/* =====================================================================
   PÁGINAS DE MÓDULO — o que se repete em todas elas.

   POR QUE ESTA FOLHA EXISTE. Cada módulo do c·hunt tem uma página que
   MOSTRA a tela dele funcionando, em vez de descrever o que ela faz.
   São catorze páginas, e o palco, a trilha de passos e o quadro de
   ligações são idênticos em todas. Catorze cópias do mesmo CSS é a
   maneira mais confiável de as páginas passarem a discordar entre si sem
   ninguém perceber.

   O QUE ENTRA AQUI: só o que aparece em mais de uma página. O mockup
   específico de cada módulo (a conversa do C·Whats, as colunas do funil,
   o cartão da vaga) mora na própria página, porque é dela e de mais
   ninguém.

   NENHUMA COR NOVA. Tudo vem das variáveis do chunt.css, que é carregado
   antes desta folha. Cor inventada numa página só faz o site parecer
   costurado de pedaços.
   ===================================================================== */

/* ---- o palco: uma tela de sistema, sem dado de gente de verdade ----- */
/* Largura da COLUNA, e nao 920 centrados: com 920 dentro de uma coluna de
   1080 o palco nascia 80px a direita do titulo logo acima dele, e a pagina
   inteira parecia desalinhada. Tudo agora comeca na mesma borda. */
.palco{position:relative;width:100%;background:var(--navy);
  border-radius:18px;padding:10px;box-shadow:0 2px 4px rgba(10,17,32,.2),0 44px 90px -44px rgba(10,17,32,.75)}
.palco-barra{display:flex;align-items:center;gap:6px;padding:6px 8px 10px}
.palco-barra i{width:9px;height:9px;border-radius:50%;background:#2C3B57;font-style:normal}
.palco-barra span{margin-left:8px;font:500 11px var(--mono);color:var(--dim);letter-spacing:.04em}
.palco-tela{background:var(--bg);border-radius:12px;overflow:hidden;min-height:420px;display:flex;flex-direction:column}

/* ---- as etapas, uma de cada vez ------------------------------------ */
.etapa{display:none;flex-direction:column;flex:1;padding:16px}
.etapa.on{display:flex;animation:etapa-entra .45s cubic-bezier(.2,.8,.3,1) both}
@keyframes etapa-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.etapa-topo{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.etapa-selo{font:700 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  background:var(--accsoft);color:var(--acc);border-radius:999px;padding:4px 10px}
.etapa-topo b{font:700 15px var(--display);color:var(--ink)}
.etapa-topo small{font:400 12px var(--body);color:var(--ink3)}

/* ---- campos e botões de mentira, para imitar a barra de filtros ----- */
.mini-filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.mini-campo{background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 11px;
  font:500 12px var(--body);color:var(--ink2);display:flex;gap:6px;align-items:center}
.mini-campo b{color:var(--ink);font-weight:600}
.mini-campo.acao{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}

/* ---- a trilha de passos embaixo do palco --------------------------- */
.trilha{display:flex;gap:8px;width:100%;margin:14px 0 0;flex-wrap:wrap}
.tr{flex:1;min-width:140px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;
  text-align:left;cursor:pointer;font:inherit;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.tr:hover{border-color:var(--line2);transform:translateY(-1px)}
.tr.on{border-color:var(--acc);box-shadow:0 0 0 3px var(--accsoft)}
.tr b{display:block;font:700 12.5px var(--body);color:var(--ink)}
.tr span{display:block;font:400 11.5px/1.45 var(--body);color:var(--ink3);margin-top:3px}
.tr-n{font:700 10px var(--mono);color:var(--acc);letter-spacing:.08em}
.tr-barra{height:3px;border-radius:2px;background:var(--line);margin-top:9px;overflow:hidden}
.tr-barra i{display:block;height:100%;width:0;background:var(--acc);font-style:normal}
/* 6s é o mesmo valor que o script usa em TEMPO. Se um mudar, o outro
   muda junto: a barra existe para dizer quanto falta, e barra que mente
   é pior que barra nenhuma. */
.tr.on .tr-barra i{animation:tr-anda 6s linear forwards}
@keyframes tr-anda{to{width:100%}}

/* ---- o quadro de ligações com os outros módulos -------------------- */
.liga{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.lg{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.lg-de{font:700 10.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--acc)}
.lg h3{font:700 15px var(--display);color:var(--ink);margin:6px 0 6px}
.lg p{font:400 13.5px/1.6 var(--body);color:var(--ink3);margin:0}
/* A Vega tem cor própria no produto (roxo), e as páginas respeitam isso:
   quem já usa o sistema reconhece o bloco antes de ler o título. */
.lg.vega{border-color:#DED5FA;background:linear-gradient(180deg,#FBFAFF,#fff)}
.lg.vega .lg-de{color:#6D28D9}

/* ---- números soltos ------------------------------------------------ */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:18px}
.nr{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.nr b{display:block;font:700 26px var(--display);color:var(--ink);letter-spacing:-.02em}
.nr span{display:block;font:400 12px var(--body);color:var(--ink3);margin-top:2px}

/* ---- a faixa de "onde isso se liga" no fim ------------------------- */
.vizinhos{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.viz{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:8px 14px;font:600 12.5px var(--body);color:var(--ink2);text-decoration:none;
  transition:border-color .2s ease,color .2s ease,transform .2s ease}
.viz:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-1px)}
.viz i{font-style:normal;font:700 10px var(--mono);color:var(--dim);letter-spacing:.06em}

/* ---- o celular do heroi ---------------------------------------------
   O heroi e uma grade de duas colunas do chunt.css. Sem nada na segunda,
   metade da tela nasce vazia. Aqui entra o celular: e como o c-hunt e de
   fato usado, que e no telefone, e mostra um pedaco da tela daquele
   modulo em vez de uma foto de banco de imagem.

   DOIS MODOS, e a diferenca nao e estetica:

   .fone-fio  conversa com a Vega. So nas paginas dos modulos em que ela
              REALMENTE atua. Comissao e testes comportamentais nao tem
              Vega de proposito: ela nao faz conta de dinheiro nem decide
              sobre pessoa, e a vitrine nao vai sugerir que faz.

   .fone-app  um pedaco da propria tela do modulo, em lista.
   --------------------------------------------------------------------- */
.hero-media.fone-wrap{display:flex;flex-direction:column;align-items:center;position:relative}
.fone{position:relative;width:min(300px,100%);margin:0 auto;background:var(--navy);border-radius:38px;padding:11px;
  box-shadow:0 2px 4px rgba(10,17,32,.2),0 36px 74px -36px rgba(10,17,32,.7)}
.fone::before{content:"";position:absolute;left:50%;top:0;width:98px;height:23px;transform:translateX(-50%);
  background:var(--navy);border-radius:0 0 16px 16px;z-index:3}
.fone-tela{background:#EFF3F8;border-radius:28px;overflow:hidden;height:498px;display:flex;flex-direction:column}
.fone-topo{background:var(--navy2);color:#fff;padding:31px 14px 11px;display:flex;align-items:center;gap:9px}
.fone-av{width:32px;height:32px;border-radius:50%;background:var(--accsoft);display:flex;align-items:center;
  justify-content:center;font:700 12px var(--display);color:var(--acc);flex:0 0 auto}
.fone-topo b{display:block;font:700 13px var(--body);line-height:1.2}
.fone-topo span{display:block;font:400 10.5px var(--body);color:var(--dim);margin-top:2px}

/* modo conversa */
.fone-fio{flex:1;overflow:hidden;padding:12px 11px 9px;display:flex;flex-direction:column;gap:7px;justify-content:flex-end}
.fone-bol{max-width:86%;padding:9px 11px;border-radius:15px;font:400 12.5px/1.45 var(--body);color:var(--ink);
  box-shadow:0 1px 1px rgba(10,17,32,.06);opacity:0;transform:translateY(10px) scale(.98);
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.3,1)}
.fone-bol.on{opacity:1;transform:none}
.fone-bol.eu{align-self:flex-end;background:#E7F0FB;border-bottom-right-radius:5px}
.fone-bol.bot{align-self:flex-start;background:#fff;border-bottom-left-radius:5px}
.fone-bol b{font-weight:600}
.fone-digita{align-self:flex-start;background:#fff;border-radius:15px;border-bottom-left-radius:5px;
  padding:10px 13px;display:none;gap:4px}
.fone-digita.on{display:flex}
.fone-digita i{width:6px;height:6px;border-radius:50%;background:var(--dim);animation:fone-pula 1s infinite}
.fone-digita i:nth-child(2){animation-delay:.15s}
.fone-digita i:nth-child(3){animation-delay:.3s}
@keyframes fone-pula{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.fone-pe{background:#fff;border-top:1px solid var(--line);padding:9px 11px;display:flex;gap:7px;align-items:center}
.fone-pe span{flex:1;border:1px solid var(--line2);border-radius:999px;padding:7px 11px;
  font:400 12px var(--body);color:var(--dim)}
.fone-pe i{width:31px;height:31px;border-radius:50%;background:var(--acc);display:flex;align-items:center;
  justify-content:center;color:#fff;font-style:normal;font-size:13px}

/* modo tela do modulo */
.fone-app{flex:1;overflow:hidden;padding:11px 10px;display:flex;flex-direction:column;gap:7px}
.fone-lin{background:#fff;border-radius:12px;padding:10px 11px;box-shadow:0 1px 1px rgba(10,17,32,.06);
  display:flex;align-items:center;gap:9px;opacity:0;transform:translateY(10px) scale(.98);
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.3,1)}
.fone-lin.on{opacity:1;transform:none}
.fone-lin-t{flex:1;min-width:0}
.fone-lin-t b{display:block;font:600 12.5px var(--body);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fone-lin-t span{display:block;font:400 11px var(--body);color:var(--ink3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fone-lin-e{flex:0 0 auto;font:700 9.5px var(--mono);border-radius:999px;padding:3px 8px;background:var(--soft);color:var(--ink3)}
.fone-lin-e.ok{background:#E9F8F0;color:var(--oktexto)}
.fone-lin-e.at{background:#FFF3D6;color:#8A6100}
.fone-lin-e.no{background:#FDECEA;color:var(--erro)}
.fone-lin-e.ac{background:#E7F0FB;color:var(--acc)}

@media (max-width:1000px){
  .fone{margin-top:8px}
}
@media (max-width:760px){
  .palco{padding:7px;border-radius:14px}
  .palco-tela{min-height:0}
  .etapa{padding:12px}
  .tr{min-width:calc(50% - 4px)}
  /* A coluna do topo encolhe (18/09/2026): numa tela de 360px ela
     ficava com 345px, 6px alem da tela, e a pagina inteira rolava de
     lado. minmax(0,1fr) deixa a coluna ser menor que o conteudo minimo. */
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero>*{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .etapa.on{animation:none}
  .tr.on .tr-barra i{animation:none;width:100%}
  .fone-bol,.fone-lin{opacity:1;transform:none;transition:none}
  .fone-digita{display:none!important}
}