/* ===== ATENDENTE VIRTUAL JE =====================================
   Ocupa o lugar da busca no hero. Usa as mesmas variaveis da pagina,
   entao qualquer mudanca de identidade da Central vale aqui tambem.

   O bloco e um cartao fechado com uma TARJA DOURADA no alto: a faixa
   fina onde moram a marca, o nome e o estado. Da linha para baixo tudo
   segue escuro, como o resto da pagina. O dourado marca quem esta
   falando, nao o territorio inteiro -- o topo da Central ja e uma faixa
   verde, e duas faixas cheias brigariam entre si. */
.je-chat{max-width:1144px;margin:30px auto 0;text-align:left;position:relative;z-index:1;
  background:linear-gradient(180deg,#0c1a13,#070e0a);border:1px solid var(--border);
  border-radius:18px;padding:22px 22px 0}

/* A TARJA. As margens negativas colam ela nas bordas do cartao; o raio
   de 17px acompanha o do cartao por dentro da borda de 1px. */
.je-cab{display:flex;align-items:center;gap:13px;margin:-22px -22px 0;padding:16px 22px;
  background:linear-gradient(170deg,var(--ou2),var(--ou));border-radius:17px 17px 0 0;
  border-bottom:1px solid rgba(22,50,31,.25)}
.je-mono{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;
  color:var(--ou3);background:linear-gradient(160deg,#1d4030,#0d2017);border:1px solid rgba(22,50,31,.4)}
.je-quem{flex:1;min-width:0}
.je-quem b{display:block;font-family:'Inter',sans-serif;font-weight:600;font-size:16px;
  letter-spacing:0;line-height:1.2;color:#16321f}
.je-quem b em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;color:#16321f;
  background:rgba(22,50,31,.15);border:1px solid rgba(22,50,31,.32);border-radius:100px;
  padding:2px 8px;margin-left:8px;vertical-align:2px}
.je-quem span{display:block;font-size:12.5px;color:rgba(22,50,31,.75);margin-top:1px}
.je-on{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(22,50,31,.72);white-space:nowrap}
.je-on i{position:relative;width:7px;height:7px;border-radius:50%;background:#16321f;display:block;flex:0 0 7px}
/* as ondas: dois aneis que nascem no ponto e se abrem, em tempos
   diferentes, para nao virar um pisca-pisca mecanico */
.je-on i::before,.je-on i::after{content:'';position:absolute;inset:0;border-radius:50%;
  border:1.5px solid #16321f;animation:jeOnd 2.4s cubic-bezier(.2,.6,.3,1) infinite}
.je-on i::after{animation-delay:1.2s}
@keyframes jeOnd{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.4);opacity:0}}

/* A SAUDACAO de abertura: grande e centrada, como quem recebe alguem.
   Sai de cena assim que a conversa comeca -- dai em diante o lugar e
   das mensagens. */
.je-ola{padding:26px 0 0;text-align:center}
.je-ola h2{font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:-.4px;
  font-size:clamp(19px,2.6vw,25px);margin:0 0 6px;min-height:1.2em;text-wrap:balance}
/* Dourado claro e largura para DUAS linhas: em 52ch a frase quebrava em
   tres, e tres linhas de apoio competem com o titulo. */
/* Peso 300. Texto claro sobre fundo escuro parece mais grosso do que
   e -- a borda clara irradia sobre o escuro. O que no papel seria
   peso normal, aqui lia como seminegrito. */
.je-ola p{margin:0 auto;font-size:14px;font-weight:300;color:var(--ou3);max-width:80ch;line-height:1.6}
.je-chat:not(.je-virgem) .je-ola{display:none}

.je-msgs{display:flex;flex-direction:column;gap:28px;padding:24px 0}
.je-virgem .je-msgs{padding:0}
.je-b{max-width:100%}
.je-ia{border-left:2px solid rgba(var(--ac-rgb),.3);padding-left:19px}
.je-ia>p{margin:0 0 11px;font-size:15.5px;line-height:1.68;color:var(--text)}
.je-eu{align-self:flex-end;max-width:82%;background:rgba(var(--ac-rgb),.08);border:1px solid rgba(var(--ac-rgb),.18);border-radius:14px 14px 4px 14px;padding:12px 17px}
.je-eu p{margin:0;font-size:15px}
.je-pensando{display:flex;gap:5px;align-items:center;border-left:2px solid rgba(var(--ac-rgb),.3);padding:8px 0 8px 19px}
.je-pensando i{width:6px;height:6px;border-radius:50%;background:var(--text3);animation:jeBl 1.2s infinite}
.je-pensando i:nth-child(2){animation-delay:.18s}
.je-pensando i:nth-child(3){animation-delay:.36s}
@keyframes jeBl{0%,60%,100%{opacity:.22}30%{opacity:1}}

/* FICHA DE UNIDADE */
.je-fichas{margin:18px 0 0;display:flex;flex-direction:column;gap:11px}
.je-un{background:var(--surface2);border:1px solid var(--border);border-radius:3px;overflow:hidden;animation:jeSobe .4s ease both}
@keyframes jeSobe{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.je-foto{position:relative;height:210px;background:var(--surface);overflow:hidden;border-bottom:1px solid var(--border)}
.je-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.je-sel{position:absolute;right:12px;top:12px;padding:6px 13px 7px;text-align:center;background:rgba(6,11,8,.82);border:1px solid rgba(var(--ac-rgb),.3);border-radius:2px}
.je-sel small{display:block;font-size:8px;font-weight:700;letter-spacing:1.4px;color:var(--text2)}
.je-sel b{font-family:'Montserrat',sans-serif;font-weight:800;font-size:19px;color:var(--ou);line-height:1.15;font-variant-numeric:tabular-nums}
.je-corpo{padding:16px 18px 15px}
.je-obra{color:var(--ou);margin:0 0 7px;font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase}
.je-val{font-family:'Montserrat',sans-serif;font-weight:800;font-size:25px;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;margin:0}
.je-esp{color:var(--text2);font-size:12.5px;margin:8px 0 0;line-height:1.55}
/* Tres colunas que se ajustam ao conteudo e dividem por igual o que
   sobra. Medido antes: cada coluna tinha 266px para um texto de 115px
   -- sobrava mais da metade, e o olho tenta preencher esse buraco.
   O auto-fit anterior ainda gerava seis colunas vazias no grid. */
/* Tres colunas iguais que preenchem a largura toda. A versao anterior
   encolhia as celulas ao conteudo e deixava vaos escuros entre elas. */
.je-pag{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:14px;background:var(--border);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
/* 16px de respiro nas laterais: com 2px o numero encostava na linha
   divisoria, e numero colado em linha le como erro de montagem. */
/* Rotulo e valor na MESMA linha. Empilhado, o rotulo gastava uma linha
   inteira de altura para dizer uma palavra -- e sobrava largura. */
.je-pag div{background:var(--surface2);display:flex;align-items:baseline;
  gap:8px;padding:11px 14px 12px;min-width:0}
.je-pag small{flex:0 0 auto;font-size:8.5px;font-weight:700;letter-spacing:1.1px;
  color:var(--text3);text-transform:uppercase;white-space:nowrap}
/* 17px: o espaco que o rotulo liberou vai todo para o numero, que e o
   dado que o corretor procura na ficha. */
.je-pag b{flex:1;min-width:0;font-size:17px;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.je-entrega{font-size:11.5px;color:var(--text3);margin:9px 0 0}
.je-mats{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.je-mat{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;color:var(--text2);text-decoration:none;background:rgba(255,255,255,.028);border:1px solid var(--border);border-radius:2px;padding:6px 10px 6px 7px}
.je-mat i{display:grid;place-items:center;width:20px;height:20px;border-radius:2px;background:rgba(var(--ac-rgb),.1);color:var(--ou);flex:0 0 20px}
.je-mat:hover{color:var(--text);border-color:rgba(var(--ac-rgb),.3);background:rgba(var(--ac-rgb),.06)}
.je-mat:hover i{background:var(--ou);color:#16321f}
.je-acao{display:flex;justify-content:flex-end;margin-top:13px;padding-top:12px;border-top:1px solid var(--border)}
.je-mk{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--ou);background:transparent;border:1px solid rgba(var(--ac-rgb),.3);border-radius:2px;padding:8px 14px;cursor:pointer;white-space:nowrap}
.je-mk:hover{background:var(--ou);color:#16321f;border-color:var(--ou)}
@media (max-width:560px){.je-foto{height:158px}.je-corpo{padding:14px}.je-val{font-size:22px}}

/* LEITURA DA JE E CONTATO */
.je-leitura{margin:19px 0 0;padding:15px 18px;background:rgba(var(--ac-rgb),.05);border:1px solid rgba(var(--ac-rgb),.13);border-radius:3px}
.je-leitura span{display:block;font-size:10.5px;font-weight:700;letter-spacing:1.9px;text-transform:uppercase;color:var(--ou);margin-bottom:8px}
.je-leitura p{margin:0;font-size:15px;line-height:1.66;color:var(--text)}
.je-fecha{margin:16px 0 0;font-size:15.5px;color:var(--text)}
/* O rodape de cada resposta: procedencia do dado e o aviso de que
   consulta nao e proposta. Dourado apagado e bem miudo -- em cinza e
   em 11px ele se confundia com a fala logo acima, e o corretor lia duas
   vezes para entender que aquilo nao era resposta. Sem limite de
   largura de proposito: nesse tamanho, linha curta viraria um paragrafo
   de cinco linhas. */
/* Precisa ser ".je-ia>p.je-fonte", nao so ".je-fonte": a regra
   ".je-ia>p" la de cima tem uma classe E um elemento, e por isso vencia
   esta aqui, que so tinha a classe. O rodape herdava os 15,5px brancos
   da fala -- era esse o texto que se confundia com a resposta. */
.je-ia>p.je-fonte{font-size:9px;line-height:1.75;letter-spacing:.2px;color:rgba(var(--ac-rgb),.58);max-width:none;margin:16px 0 0;padding-top:11px;border-top:1px solid rgba(var(--ac-rgb),.14)}
.je-contato{margin:17px 0 0;border:1px solid rgba(var(--ac-rgb),.13);border-radius:3px;background:rgba(var(--ac-rgb),.04);overflow:hidden}
.je-ct-topo{display:flex;align-items:center;gap:13px;padding:14px 16px 12px}
/* O avatar do comercial: a foto do Adriano, redonda, como um contato de
   WhatsApp — que é o que o cartão é. O enquadramento sobe (28%) porque a
   foto é de corpo e o rosto fica na parte de cima; centrado no meio,
   apareceria o terno. Se a foto faltar, o onerror tira o <img> e sobra o
   círculo dourado, que continua apresentável. */
.je-ct-av{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;
  color:var(--ou);background:rgba(var(--ac-rgb),.12);border:1px solid rgba(var(--ac-rgb),.3);
  overflow:hidden}
.je-ct-av img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block}
.je-ct-topo b{display:block;font-size:15px;font-weight:600}
.je-ct-topo span{display:block;font-size:12px;color:var(--text3);margin-top:2px}
.je-ct-msg{margin:0;padding:0 16px 13px;font-size:13px;color:var(--text2);line-height:1.6}
.je-ct-msg em{color:var(--text3);font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;display:block;margin-bottom:5px}
.je-ct-btn{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;font-size:13.5px;font-weight:600;color:#16321f;background:var(--ou);text-decoration:none;border-top:1px solid rgba(var(--ac-rgb),.3)}
.je-ct-btn:hover{background:var(--ou2)}

/* MENSAGEM PRONTA */
.je-msgbox{margin-top:12px;border:1px solid rgba(var(--ac-rgb),.13);border-radius:3px;background:rgba(0,0,0,.4)}
.je-msgbox-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border)}
.je-msgbox-topo span{font-size:9.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--text3)}
.je-msgbox pre{margin:0;padding:14px;white-space:pre-wrap;font-family:'Inter',sans-serif;font-size:13.5px;line-height:1.7;color:var(--text2)}
.je-cp{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;color:var(--ou);background:none;border:1px solid rgba(var(--ac-rgb),.3);border-radius:2px;padding:4px 11px;cursor:pointer}
.je-cp:hover{background:var(--ou);color:#16321f}

/* BARRA DE ENTRADA
   O campo nasce compacto e cresce quando a pessoa clica dentro: so entao
   aparecem Falar e Perguntar. Fechado, so o microfone fica a vista, no
   canto -- quem quer falar nao precisa escrever primeiro. */
.je-barra{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(7,14,10,0),#070e0a 26%);
  padding-top:22px;padding-bottom:22px;z-index:2}
.je-campo{position:relative;display:block;background:var(--surface2);border:1px solid var(--border2);
  border-radius:16px;padding:14px 16px;box-shadow:0 18px 44px -28px rgba(0,0,0,.9);
  transition:padding .3s cubic-bezier(.2,.8,.3,1),border-color .2s,box-shadow .3s,transform .3s cubic-bezier(.2,.8,.3,1)}
.je-campo:focus-within{border-color:rgba(var(--ac-rgb),.45);padding-bottom:58px;transform:translateY(-3px);
  box-shadow:0 30px 68px -22px rgba(0,0,0,1),0 0 0 4px rgba(var(--ac-rgb),.07)}
.je-campo textarea{display:block;width:100%;background:transparent;border:none;outline:none;resize:none;
  color:var(--text);font-family:'Inter',sans-serif;font-size:15.5px;line-height:1.5;height:26px;
  max-height:150px;padding:0;margin:0;transition:height .3s cubic-bezier(.2,.8,.3,1)}
.je-campo:focus-within textarea{height:78px}
.je-campo textarea::placeholder{color:var(--text3)}

/* o microfone do canto some quando o campo abre: ali ja existe o botao
   Falar, com nome e tudo. Gravando, ele volta -- e o jeito de parar. */
.je-ico{position:absolute;right:14px;top:12px;width:30px;height:30px;border-radius:50%;display:grid;
  place-items:center;padding:0;color:var(--ou);background:transparent;
  border:1px solid rgba(var(--ac-rgb),.3);cursor:pointer;
  transition:opacity .18s,background .15s,border-color .15s}
.je-ico:hover{background:rgba(var(--ac-rgb),.12);border-color:rgba(var(--ac-rgb),.6)}
.je-campo:focus-within .je-ico{opacity:0;pointer-events:none}
.je-ico.rec{color:#fff;background:#b5342a;border-color:#d4493c;animation:jeRec 1.2s ease-in-out infinite}
/* O microfone NAO some quando e ele que tem o foco. A regra acima
   existe para ele sair da frente enquanto a pessoa digita -- e
   clicar no microfone nao e digitar. Sem este :focus, o clique
   fazia o proprio botao desaparecer debaixo do cursor. */
.je-campo:focus-within .je-ico:focus,
.je-campo:focus-within .je-ico.rec{opacity:1;pointer-events:auto}
@keyframes jeRec{0%,100%{box-shadow:0 0 0 0 rgba(181,52,42,.5)}70%{box-shadow:0 0 0 10px rgba(181,52,42,0)}}

.je-campo-bts{position:absolute;right:12px;bottom:12px;display:flex;gap:8px;opacity:0;
  transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.je-campo:focus-within .je-campo-bts{opacity:1;transform:none;pointer-events:auto}
.je-bt{display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;font-size:12.5px;
  font-weight:600;border-radius:100px;padding:9px 15px;cursor:pointer;
  border:1px solid rgba(var(--ac-rgb),.3);background:rgba(var(--ac-rgb),.08);color:var(--ou);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),background .18s,border-color .18s,box-shadow .18s}
.je-bt:hover{transform:translateY(-2px);background:rgba(var(--ac-rgb),.16);
  border-color:rgba(var(--ac-rgb),.6);box-shadow:0 8px 18px -10px rgba(var(--ac-rgb),.8)}
.je-bt:active{transform:translateY(0) scale(.97)}
.je-bt svg{transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.je-bt:hover svg{transform:translateX(2px)}
.je-bt.cheio{background:var(--ou);color:#16321f;border-color:var(--ou)}
.je-bt.cheio:hover{background:var(--ou2);box-shadow:0 10px 22px -10px rgba(var(--ac-rgb),.95)}
.je-bt[disabled]{opacity:.4;cursor:default;transform:none;box-shadow:none}

.je-erro{color:#e59a84;font-size:12.5px;min-height:17px;padding:7px 2px 0}

/* OS ATALHOS: perguntas de partida, que somem quando a conversa comeca. */
.je-sug{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding-top:8px}
.je-chat:not(.je-virgem) .je-sug{display:none}
.je-sg{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-size:12.5px;
  color:var(--text2);background:var(--surface);border:1px solid var(--border);border-radius:100px;
  padding:9px 16px;cursor:pointer;text-align:left;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),border-color .2s,color .2s,background .2s,box-shadow .2s}
.je-sg svg{flex:0 0 15px;color:var(--ou);opacity:.85;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),opacity .2s}
.je-sg:hover{transform:translateY(-3px);border-color:rgba(var(--ac-rgb),.5);color:var(--text);
  background:var(--surface3);box-shadow:0 10px 22px -14px rgba(0,0,0,.95)}
.je-sg:hover svg{transform:scale(1.15) rotate(-6deg);opacity:1}
.je-sg:active{transform:translateY(-1px) scale(.98)}
/* PLAYER — primeira coisa dentro da resposta.
   A pagina usa dourado como CONTORNO; preenchimento dourado e so do botao
   enviar, a acao principal. O player segue essa gramatica: contorno fino,
   e um equalizador que so ganha vida quando ela esta falando. */
.je-player{margin:0 0 17px}
.je-play{display:inline-flex;align-items:center;gap:11px;padding:9px 16px 9px 10px;
  background:transparent;border:1px solid rgba(var(--ac-rgb),.32);border-radius:100px;
  cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s,border-color .15s}
.je-play:hover{background:rgba(var(--ac-rgb),.08);border-color:rgba(var(--ac-rgb),.55)}
.je-play-ico{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  color:var(--ou);background:rgba(var(--ac-rgb),.12)}
.je-play-ico svg{display:block;margin-left:1px}
.je-play.on .je-play-ico svg{margin-left:0}
.je-play-txt{font-size:13px;font-weight:500;color:var(--text2);letter-spacing:.2px;white-space:nowrap}
.je-play:hover .je-play-txt,.je-play.on .je-play-txt{color:var(--ou2)}
.je-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(var(--ac-rgb),.25);border-top-color:var(--ou);animation:jeGira .7s linear infinite}
@keyframes jeGira{to{transform:rotate(360deg)}}

/* equalizador: parado vira trac inho; tocando, vira onda */
.je-eq{display:flex;align-items:center;gap:3px;height:16px;margin-left:3px}
.je-eq i{width:2px;height:3px;border-radius:1px;background:rgba(var(--ac-rgb),.45);transition:height .2s}
.je-play.on .je-eq i{background:var(--ou);animation:jeOnda .9s ease-in-out infinite}
.je-play.on .je-eq i:nth-child(2){animation-delay:.15s}
.je-play.on .je-eq i:nth-child(3){animation-delay:.3s}
.je-play.on .je-eq i:nth-child(4){animation-delay:.45s}
@keyframes jeOnda{0%,100%{height:3px}50%{height:15px}}
@media (prefers-reduced-motion:reduce){.je-play.on .je-eq i{animation:none;height:9px}}
@media (max-width:560px){.je-play-txt{font-size:12.5px}}

/* ===== CELULAR =================================================
   Dois defeitos corrigidos aqui:
   1. A barra de digitar era sticky. Em tela baixa ela grudava no fundo do
      visor e passava POR CIMA da conversa, escondendo a fala da Je. No
      celular ela volta ao fluxo: fica depois da conversa e rola junto.
   2. O brilho decorativo do hero tem 520px fixos. Em tela menor que isso
      ele empurrava a pagina para o lado e criava o arrastar horizontal. */
@media (max-width:768px){
  .hero{overflow:hidden}
  .je-barra{position:static;background:none;padding-top:18px;padding-bottom:18px}
  .je-chat{margin-top:20px;padding:18px 16px 0;border-radius:15px}
  .je-msgs{gap:22px;padding:18px 0 4px}
  .je-cab{gap:11px;margin:-18px -16px 0;padding:14px 16px;border-radius:14px 14px 0 0}
  .je-mono{width:42px;height:42px;flex:0 0 42px;border-radius:12px}
  .je-ola{padding-top:22px}
  .je-ola p{font-size:13.5px}
  .je-quem b{font-size:14px}
  .je-quem span{font-size:11.5px}
  .je-on{font-size:10px}
  .je-ia{padding-left:14px}
  .je-ia>p{font-size:15px;line-height:1.62}
  .je-eu{max-width:90%}
  .je-eu p{font-size:14.5px}
  .je-player{margin-bottom:13px}
  .je-play{padding:7px 14px 7px 8px;gap:9px}
  .je-play-ico{flex:0 0 26px;width:26px;height:26px}
  .je-leitura{padding:13px 15px}
  .je-leitura p{font-size:14.5px}
  .je-fecha{font-size:15px}
  .je-sg{font-size:12px;padding:8px 13px;gap:7px}
  .je-mats{gap:5px}
  .je-mat{font-size:11px;padding:5px 9px 5px 6px}
  .je-mat i{width:18px;height:18px;flex:0 0 18px}
  .je-pag{grid-template-columns:repeat(3,1fr)}
  .je-pag div{padding:10px 11px 11px;gap:6px}
  .je-pag b{font-size:14px}
  .je-pag b{font-size:12.5px}
  .je-pag small{font-size:8px;letter-spacing:.8px}
  .je-ct-btn{padding:14px;font-size:13px}
  .je-msgbox pre{font-size:12.5px;padding:12px}
}
@media (max-width:400px){
  .je-pag{grid-template-columns:repeat(2,1fr)}
  .je-play-txt{font-size:12px}
  .je-campo{padding:12px 14px}
  .je-foto{height:140px}
}

/* Em tela bem estreita a grade de pagamento deixava "Parcelas" sozinho num
   canto. Vira lista: rotulo a esquerda, numero a direita. */
@media (max-width:420px){
  .je-pag{display:block;background:none;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:13px}
  .je-pag div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}
  .je-pag div:last-child{border-bottom:none}
  .je-pag small{margin:0;white-space:nowrap}
  .je-pag b{font-size:15px;text-align:right;flex:0 0 auto}
}

/* MENSAGEM PRO CLIENTE — previa de como fica no WhatsApp */
.je-msgbox-acoes{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.je-wpp{display:inline-flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;
  color:#16321f;background:var(--ou);border-radius:2px;padding:5px 11px;text-decoration:none;white-space:nowrap}
.je-wpp:hover{background:var(--ou2)}
.je-wpp svg{width:13px;height:13px}
.je-preview{padding:16px;font-size:13.5px;line-height:1.62;color:var(--text);
  background:rgba(255,255,255,.02);border-bottom:1px solid var(--border)}
.je-preview b{font-weight:600;color:var(--text)}
.je-preview i{font-style:normal;color:var(--text2)}
.je-link{color:var(--ou2);word-break:break-all}
.je-cru{display:block;width:100%;height:84px;resize:vertical;font-family:'Inter',sans-serif;font-size:11.5px;
  line-height:1.5;color:var(--text3);background:rgba(0,0,0,.35);border:none;border-top:1px solid var(--border);padding:11px 14px;outline:none}
@media (max-width:560px){.je-preview{padding:13px;font-size:13px}.je-cru{height:64px}}

/* botao do comparativo com varias opcoes */
.je-comparar{display:flex;flex-direction:column;align-items:flex-end;gap:0;margin-top:12px}
.je-comparar .je-msgbox{width:100%;margin-top:10px}
.je-cmp{border-color:rgba(var(--ac-rgb),.5)}

/* As etapas da consulta: entram uma a uma e vao sendo marcadas como feitas. */
.je-etapas{display:flex;flex-direction:column;gap:7px;border-left:2px solid rgba(var(--ac-rgb),.3);padding:10px 0 10px 19px}
.je-etapa{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text3);opacity:0;transform:translateY(-3px);transition:opacity .3s,transform .3s,color .3s}
.je-etapa.on{opacity:1;transform:none}
.je-etapa.feito{color:var(--text2)}
.je-etapa i{width:14px;height:14px;flex:0 0 14px;border-radius:50%;border:1.5px solid rgba(var(--ac-rgb),.35);display:grid;place-items:center}
.je-etapa.feito i{border-color:rgba(var(--ac-rgb),.6);background:rgba(var(--ac-rgb),.14)}
.je-etapa.feito i::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--ou)}
/* A etapa que está acontecendo AGORA: anel girando e texto respirando, em vez
   de bolinha parada. É o que diz "continuo trabalhando" durante os segundos
   em que não há mais nada para mostrar. */
.je-etapa.agora{color:var(--ou2)}
.je-etapa.agora i{border-color:rgba(var(--ac-rgb),.25);border-top-color:var(--ou);
  animation:jeGira .75s linear infinite}
.je-etapa.agora span{animation:jeRespira 1.7s ease-in-out infinite}
@keyframes jeRespira{0%,100%{opacity:1}50%{opacity:.5}}
/* O relógio entra só depois de 5s: antes disso ele apressa quem está lendo
   as etapas, e a maioria das respostas nem chega lá. */
.je-tempo{font-weight:500;font-size:11px;font-variant-numeric:tabular-nums;
  color:var(--text3);margin-left:9px;opacity:0;transition:opacity .4s}
.je-tempo.on{opacity:1}
.je-demora{font-size:11.5px;color:var(--text3);padding:6px 0 0;opacity:0;
  transition:opacity .5s}
.je-demora.on{opacity:1}
@media (prefers-reduced-motion:reduce){
  .je-etapa.agora i,.je-etapa.agora span{animation:none}
}
/* O cursor que pisca enquanto a fala e escrita. */
.je-cursor{display:inline-block;width:2px;height:1.05em;vertical-align:-.16em;background:var(--ou);margin-left:2px;animation:jePisca .9s step-end infinite}
@keyframes jePisca{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.je-etapa{opacity:1;transform:none}.je-cursor{animation:none}}

/* A tabela em PDF, quando o corretor pede: o pedido dele vira um botao so. */
.je-tabela{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:15px 0 0;padding:14px 16px;border:1px solid rgba(var(--ac-rgb),.3);border-radius:12px;background:rgba(var(--ac-rgb),.06)}
.je-tb-txt{flex:1;min-width:150px}
.je-tb-txt b{display:block;font-size:13.5px;font-weight:600;color:var(--text)}
.je-tb-txt span{display:block;font-size:11.5px;color:var(--text3);margin-top:2px}
.je-tb-bt{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.3px;color:#16321f;background:var(--ou);border-radius:100px;padding:10px 17px;text-decoration:none;transition:background .15s}
.je-tb-bt:hover{background:var(--ou2)}
.je-tb-bt svg{width:15px;height:15px}

/* Aviso de valor que nao bate com a ficha. Discreto de proposito: nao e erro
   do corretor nem falha de sistema, e um pedido de conferencia. */
.je-confira{display:flex;align-items:center;gap:9px;margin:12px 0 0!important;padding:10px 13px;font-size:12.5px;line-height:1.5;color:var(--ou3);background:rgba(var(--ac-rgb),.07);border:1px solid rgba(var(--ac-rgb),.28);border-radius:9px}
.je-confira svg{flex:0 0 14px;color:var(--ou)}

/* A ENTRADA EM CENA ==============================================
   A saudacao e escrita letra a letra, como quem fala com a pessoa;
   depois entram, em ordem, a descricao, o campo e os atalhos. O JS
   cuida do texto -- aqui ficam o cursor e a subida dos elementos. */
.je-cursor-ola{display:inline-block;width:2px;height:.95em;vertical-align:-.1em;background:currentColor;
  margin-left:3px;animation:jePisca .85s step-end infinite}
.je-entra{opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1)}
.je-entra.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .je-entra{opacity:1;transform:none;transition:none}
  .je-on i::before,.je-on i::after{animation:none;opacity:0}
  .je-cursor-ola{animation:none;opacity:0}
}

/* No celular o rotulo ONLINE rouba a largura que o nome da empresa
   precisa, e "J.E Vargas" quebra no meio. Fica so o ponto, que ja diz
   a mesma coisa -- e continua com as ondas. */
@media (max-width:560px){
  .je-on{font-size:0;gap:0}
  .je-quem span{font-size:11.5px}
}

/* A LARGURA ====================================================
   O bloco acompanha os cartoes de baixo: 1144px, que e a .page de
   1200 menos os 28 de respiro de cada lado. Mas linha de texto com
   1144px de largura obriga a vista a voltar do fim ao comeco e
   perder a linha -- entao a fala dela para em 76 caracteres. */
.je-ia>p{max-width:76ch}
.je-leitura p,.je-fecha{max-width:76ch}

/* O botão de mudo, na tarja dourada. Discreto: quem não liga para som
   nunca precisa reparar nele. */
.je-som-bt{display:grid;place-items:center;width:28px;height:28px;padding:0;margin-left:auto;
  border:1px solid rgba(22,50,31,.28);border-radius:50%;background:rgba(22,50,31,.07);
  color:rgba(22,50,31,.7);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.je-som-bt:hover{background:rgba(22,50,31,.14);color:#16321f;border-color:rgba(22,50,31,.45)}
.je-som-bt .corte{opacity:0}
.je-som-bt.mudo .onda1,.je-som-bt.mudo .onda2{opacity:0}
.je-som-bt.mudo .corte{opacity:1}
.je-som-bt + .je-on{margin-left:9px}
.je-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:560px){.je-som-bt{width:26px;height:26px}}

/* Area de toque no celular. O desenho continua com 26 e 30px -- o que
   cresce e so a area que responde ao dedo, por um pseudo-elemento
   centrado de 44px, que e o minimo recomendado. Inchar o botao de
   verdade estragaria a tarja e a barra de digitar. */
@media (pointer:coarse){
  .je-som-bt,.je-ico{position:relative}
  .je-som-bt::after,.je-ico::after{content:'';position:absolute;
    left:50%;top:50%;transform:translate(-50%,-50%);
    width:44px;height:44px;border-radius:50%}
  .je-ico{position:absolute}      /* o je-ico ja era absoluto: preserva */
  .je-sg,.je-bt{min-height:40px}
}

/* O BOTAO DE ENVIAR. Nasceu sem estilo nenhum: o capa.css so lhe
   dava posicao, e aqui nao havia regra. Ficava cinza, em Arial e de
   cantos retos -- um <button> cru no meio da marca.
   Dourado cheio porque e a acao principal da pagina; o microfone,
   ao lado, fica so contornado, que e a hierarquia correta entre
   uma acao primaria e uma secundaria. */
.je-env{display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;border:1px solid transparent;cursor:pointer;
  font-family:'Inter',sans-serif;padding:0;
  background:linear-gradient(170deg,var(--ou2),var(--ou));
  color:#15210f;
  transition:transform .14s cubic-bezier(.2,.8,.3,1),box-shadow .18s,filter .18s}
.je-env:hover{filter:brightness(1.08);
  box-shadow:0 4px 16px rgba(var(--ac-rgb),.3)}
.je-env:active{transform:scale(.94)}
.je-env[disabled]{opacity:.45;cursor:default;filter:none;
  box-shadow:none;transform:none}
@media (max-width:620px){.je-env{width:40px;height:40px}}

/* ---- os materiais do empreendimento ---------------------------------
   Mesma familia do bloco da tabela: cartao escuro, borda fina, titulo
   dourado. Duas formas diferentes de entregar material na mesma conversa
   confundiriam mais do que ajudariam. */
.je-materiais{background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:15px 16px 16px;margin:4px 0 13px}
.je-mat-tit{display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:800;
  letter-spacing:.04em;color:var(--ou2)}
.je-mat-tit svg{flex:0 0 15px}
.je-mat-bts{display:flex;flex-wrap:wrap;gap:7px}
.je-mat-bt{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  color:var(--text2);background:var(--surface2);border:1px solid var(--border);
  border-radius:100px;padding:8px 14px;text-decoration:none;
  transition:border-color .16s,color .16s,background .16s}
.je-mat-bt:hover{border-color:rgba(var(--ac-rgb),.5);color:var(--ou3);
  background:rgba(var(--ac-rgb),.07)}
.je-mat-bt svg{flex:0 0 14px}

/* O Drive em destaque: e o que o corretor mais pede, e o unico que abre
   uma pasta com tudo dentro. Dourado cheio, como o botao de enviar. */
.je-mat-drive{display:flex;align-items:center;gap:12px;margin-top:11px;
  padding:12px 15px;border-radius:12px;text-decoration:none;
  background:linear-gradient(170deg,var(--ou2),var(--ou));color:#15210f;
  transition:filter .16s,box-shadow .18s,transform .12s}
.je-mat-drive:hover{filter:brightness(1.06);
  box-shadow:0 4px 18px rgba(var(--ac-rgb),.28)}
.je-mat-drive:active{transform:scale(.99)}
.je-mat-drive svg{flex:0 0 17px}
.je-mat-drive span{flex:1;min-width:0;display:block}
.je-mat-drive b{display:block;font-size:13.5px;font-weight:700;line-height:1.3}
.je-mat-drive em{display:block;font-style:normal;font-size:11.5px;opacity:.72;
  margin-top:1px}
.je-mat-seta{opacity:.7}
@media (max-width:620px){
  .je-materiais{padding:13px 14px 14px}
  .je-mat-bt{font-size:12px;padding:9px 13px}
  .je-mat-drive b{font-size:13px}
}
@media (pointer:coarse){
  .je-mat-bt{min-height:40px}
}

/* ---- campo de imagem da ficha ---------------------------------------
   A versao antiga era uma <img> esticada na largura com altura fixa: o
   navegador cortava o que sobrava, e o que sobrava era quase tudo.
   Aqui a imagem tem um espaco proprio e aparece pelo meio. */
.je-img{border-radius:12px 12px 0 0;overflow:hidden;background:var(--surface2)}

/* A faixa: os dois dados que identificam a ficha, um em cada ponta. */
.je-img-faixa{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:9px 12px;background:rgba(0,0,0,.35);
  border-bottom:1px solid var(--border)}
.je-img-un{display:flex;align-items:baseline;gap:5px;color:var(--ou3)}
.je-img-un small{font-size:9.5px;letter-spacing:.14em;opacity:.75}
.je-img-un b{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:800;
  letter-spacing:.5px}
.je-img-logo{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;
  border-radius:9px;background:rgba(255,255,255,.06);
  border:1px solid var(--border);padding:5px}
.je-img-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}

/* As fotos: tercos iguais, cada imagem centralizada no seu. O
   object-position:center e o que faz a foto mostrar o meio -- a versao
   antiga mostrava o topo, que costuma ser ceu. */
.je-img-fotos{display:grid;gap:2px;background:var(--border)}
.je-img-fotos[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.je-img-fotos[data-n="2"]{grid-template-columns:repeat(2,1fr)}
.je-img-fotos[data-n="1"]{grid-template-columns:1fr}
.je-img-cel{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--surface3)}
.je-img-cel img{width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.je-un:hover .je-img-cel img{transform:scale(1.04)}

/* No celular as tres lado a lado ficariam selos de 100px. Duas em cima,
   uma embaixo ocupando a largura: cada uma ganha tamanho de foto. */
@media (max-width:560px){
  .je-img-fotos[data-n="3"]{grid-template-columns:repeat(2,1fr)}
  .je-img-fotos[data-n="3"] .je-img-cel:first-child{grid-column:1 / -1;
    aspect-ratio:16/9}
  .je-img-logo{width:34px;height:34px;flex-basis:34px}
}
@media (prefers-reduced-motion:reduce){
  .je-un:hover .je-img-cel img{transform:none}
}

/* "Unidade" por extenso: a faixa tem largura de sobra, e palavra
   inteira le mais rapido que abreviacao, mesmo uma obvia. O "UN."
   so volta quando a faixa estreita e passa a disputar espaco com a
   logo. As duas formas moram no HTML; aqui se escolhe. */
.je-img-un i{font-style:normal}
.je-un-curto{display:none}
@media (max-width:420px){
  .je-un-longo{display:none}
  .je-un-curto{display:inline}
}