/* =========================================================
   CONSULTA DE PROCESSO — linha do tempo
   Acrescentar ao final de styles.css
   Prefixo .cp para não colidir com .step / .steps / .dot do site
   ========================================================= */

/* O menu do topo ganhou mais um item ("Meu processo") e passa a não caber em
   telas de notebook entre 1025px e 1150px — os links quebravam em duas linhas.
   Em vez de espremer a fonte, o hambúrguer (que já existe no site) entra antes.
   Se um dia o item sair do menu, esta regra pode ser removida. */
@media(max-width:1150px){
  .nav__links,.nav__cta{display:none;}
  .burger{display:block;}
}

.section--consulta{background:var(--paper);}
.cp{max-width:1010px;margin-inline:auto;}

.cp__head{text-align:center;max-width:700px;margin:0 auto clamp(30px,4.4vw,54px);}
.cp__head .h2{margin-bottom:.34em;}
.cp__lead{margin:0;color:var(--muted);font-size:clamp(1rem,1.6vw,1.14rem);}

/* ---------- campo de busca ---------- */
.cp__busca{
  display:flex;align-items:center;gap:10px;
  max-width:640px;margin:0 auto;
  background:var(--white);border:1.5px solid var(--line);border-radius:999px;
  padding:8px 8px 8px 26px;
  box-shadow:0 34px 62px -48px rgba(10,28,84,.75);
  transition:border-color .35s var(--ease),box-shadow .5s var(--ease);
}
.cp__busca:focus-within{
  border-color:rgba(245,94,46,.55);
  box-shadow:0 34px 62px -42px rgba(245,94,46,.72);
}
.cp__busca input{
  flex:1;min-width:0;padding:15px 0;border:0;background:none;outline:none;
  font:inherit;font-size:1.05rem;font-weight:600;color:var(--navy);letter-spacing:-.01em;
}
.cp__busca input::placeholder{font-weight:400;color:rgba(94,102,140,.6);letter-spacing:0;}
.cp__busca .btn{flex:0 0 auto;padding:15px 30px;}
.cp__ajuda{
  margin:16px auto 0;text-align:center;font-size:.88rem;color:var(--muted);max-width:52ch;
}
@media(max-width:600px){
  .cp__busca{flex-direction:column;align-items:stretch;gap:12px;
    border-radius:var(--r);padding:16px;}
  .cp__busca input{padding:6px 10px;text-align:center;}
  .cp__busca .btn{width:100%;}
}

/* ---------- área de resultado ---------- */
.cp__res{margin-top:clamp(28px,4vw,46px);}
.cp__res[hidden]{display:none;}
.cp__res{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .8s var(--ease);}
.cp__res.is-in{opacity:1;transform:none;}

/* faixa de aviso do modo demonstração — não aparece em produção */
.cp__demo{
  margin-bottom:16px;padding:14px 18px;border-radius:var(--r-sm);
  background:#3B2C00;color:#FFE9A8;font-size:.9rem;line-height:1.5;
  border-left:4px solid #F5B72E;
}
.cp__demo b{display:block;font-size:.72rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#F5B72E;margin-bottom:4px;}
.cp__demo code{background:rgba(255,255,255,.14);padding:2px 6px;border-radius:5px;
  font-family:ui-monospace,Menlo,monospace;font-size:.85em;}

.cp__vazio{
  text-align:center;background:var(--white);border:1.5px dashed rgba(10,28,84,.2);
  border-radius:var(--r-lg);padding:clamp(30px,4vw,46px);
}
.cp__vazio strong{display:block;font-size:1.2rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;}
.cp__vazio p{margin:8px auto 0;color:var(--muted);max-width:46ch;font-size:.98rem;}

/* ---------- cartão ---------- */
.cp__card{
  --cor:var(--orange);--cor-esc:#C2410C;--cor-suave:var(--orange-soft);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3.4vw,42px);
  box-shadow:0 46px 96px -68px rgba(10,28,84,.65);
}
.cp__card[data-situacao="ganho"]  {--cor:#12A150;--cor-esc:#0B7A3B;--cor-suave:#DEF4E8;}
.cp__card[data-situacao="perdido"]{--cor:#9B1C2E;--cor-esc:#7A1524;--cor-suave:#F6E3E6;}
/* 5.7 — extinto usa o mesmo vermelho do perdido: para o cliente é
   igualmente fim de linha. O que muda é a palavra, não a cor. */
.cp__card[data-situacao="extinto"]{--cor:#9B1C2E;--cor-esc:#7A1524;--cor-suave:#F6E3E6;}

.cp__topo{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--line);
}
.cp__num span{
  display:block;font-size:.74rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px;
}
.cp__num strong{
  font-size:clamp(1.05rem,2vw,1.35rem);font-weight:800;color:var(--navy);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.cp__selo{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  padding:10px 20px;border-radius:999px;
  background:var(--cor-suave);color:var(--cor-esc);
  font-size:.95rem;font-weight:700;letter-spacing:-.01em;
}
.cp__selo i{width:9px;height:9px;border-radius:50%;background:currentColor;font-style:normal;}
.cp__card[data-situacao="andamento"] .cp__selo i,
.cp__card[data-situacao="ganho"] .cp__selo i{animation:cpBlip 2s var(--ease-2) infinite;}
@keyframes cpBlip{0%,100%{opacity:1;}50%{opacity:.22;}}

/* ---------- linha do tempo ---------- */
.cp__tl{position:relative;margin:clamp(38px,5vw,58px) 0 0;}

/* ---------- aviso acima da linha (não move a barra) ---------- */
.cp__alerta{
  display:flex;flex-direction:column;gap:2px;
  margin-top:24px;padding:16px 20px;border-radius:var(--r-sm);
  background:var(--orange-soft);border-left:4px solid var(--orange);
}
.cp__alerta[hidden]{display:none;}
.cp__alerta[data-tipo="boa"]{background:#DEF4E8;border-left-color:#12A150;}
.cp__alerta b{
  font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#C2410C;
}
.cp__alerta[data-tipo="boa"] b{color:#0B7A3B;}
.cp__alerta p{margin:0;font-size:.98rem;font-weight:600;color:var(--navy);}

/* ---------- etapas ---------- */
.cp__etapas{display:grid;grid-template-columns:repeat(9,1fr);position:relative;}
.cp__etapa{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;}

/* cada etapa desenha o trecho de linha até a etapa seguinte —
   assim o preenchimento nunca depende de cálculo de porcentagem */
.cp__etapa::after{
  content:"";position:absolute;z-index:0;left:50%;top:16px;width:100%;height:6px;
  background:rgba(10,28,84,.10);transition:background .5s var(--ease);
}
.cp__etapa:last-child::after{display:none;}
.cp__etapa.is-feita:not(.is-atual)::after{background:var(--cor);}
.cp__card[data-situacao="andamento"] .cp__etapa.is-feita:not(.is-atual)::after,
.cp__card[data-situacao="ganho"] .cp__etapa.is-feita:not(.is-atual)::after{
  animation:cpLinha 2s var(--ease-2) infinite;
}
@keyframes cpLinha{0%,100%{opacity:1;}50%{opacity:.42;}}

.cp__ponto{
  position:relative;z-index:2;width:38px;height:38px;
  display:grid;place-items:center;padding:0;background:none;border:0;cursor:default;
}
.cp__ponto b{
  display:block;position:relative;width:16px;height:16px;border-radius:50%;
  background:var(--white);border:3px solid rgba(10,28,84,.22);
  transition:width .5s var(--ease),height .5s var(--ease),background .5s,border-color .5s,box-shadow .5s;
}
.cp__etapa.is-feita .cp__ponto b{background:var(--cor);border-color:var(--cor);}
.cp__etapa.is-atual .cp__ponto{cursor:pointer;}
.cp__etapa.is-atual .cp__ponto b{
  width:28px;height:28px;background:var(--cor);border-color:var(--white);
  box-shadow:0 0 0 4px var(--cor),0 6px 18px -6px var(--cor);
}
.cp__etapa.is-atual .cp__ponto b::after{
  content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;
  border-radius:50%;background:var(--white);
}
.cp__card[data-situacao="andamento"] .cp__etapa.is-atual .cp__ponto::before,
.cp__card[data-situacao="ganho"] .cp__etapa.is-atual .cp__ponto::before{
  content:"";position:absolute;z-index:-1;width:28px;height:28px;border-radius:50%;
  background:var(--cor);animation:cpHalo 2s var(--ease) infinite;
}
@keyframes cpHalo{0%{transform:scale(1);opacity:.5;}70%,100%{transform:scale(2.5);opacity:0;}}

.cp__txt{padding:9px 5px 0;}
.cp__n{font-size:.7rem;font-weight:800;letter-spacing:.1em;color:var(--muted);}
.cp__etapa.is-feita .cp__n{color:var(--cor-esc);}
.cp__rot{display:block;font-size:.79rem;line-height:1.32;color:var(--muted);margin-top:2px;}
.cp__etapa.is-feita .cp__rot{color:var(--navy);font-weight:500;}
.cp__etapa.is-atual .cp__rot{color:var(--navy);font-weight:800;letter-spacing:-.01em;}

/* balão de observação */
.cp__balao{
  position:absolute;left:50%;bottom:calc(100% + 16px);transform:translate(-50%,6px);
  width:272px;max-width:74vw;z-index:20;text-align:left;pointer-events:none;
  background:var(--navy);color:#fff;border-radius:var(--r-sm);padding:14px 16px;
  font-size:.9rem;line-height:1.5;
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),transform .45s var(--ease),visibility .3s;
  box-shadow:0 26px 46px -26px rgba(10,28,84,.95);
}
.cp__balao::after{
  content:"";position:absolute;top:100%;left:50%;margin-left:-8px;
  border:8px solid transparent;border-top-color:var(--navy);
}
.cp__balao span{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);margin-bottom:6px;
}
.cp__etapa.is-aberta .cp__balao{opacity:1;visibility:visible;transform:translate(-50%,0);}
@media (hover:hover) and (pointer:fine){
  .cp__etapa.is-atual:hover .cp__balao{opacity:1;visibility:visible;transform:translate(-50%,0);}
}
.cp__etapa:nth-child(-n+2) .cp__balao{left:0;transform:translate(0,6px);}
.cp__etapa:nth-child(-n+2) .cp__balao::after{left:27px;}
.cp__etapa:nth-child(-n+2).is-aberta .cp__balao{transform:translate(0,0);}
@media (hover:hover) and (pointer:fine){
  .cp__etapa:nth-child(-n+2).is-atual:hover .cp__balao{transform:translate(0,0);}
}
.cp__etapa:nth-last-child(-n+2) .cp__balao{left:auto;right:0;transform:translate(0,6px);}
.cp__etapa:nth-last-child(-n+2) .cp__balao::after{left:auto;right:22px;}
.cp__etapa:nth-last-child(-n+2).is-aberta .cp__balao{transform:translate(0,0);}
@media (hover:hover) and (pointer:fine){
  .cp__etapa:nth-last-child(-n+2).is-atual:hover .cp__balao{transform:translate(0,0);}
}

.cp__dica{margin:22px 0 0;text-align:center;font-size:.85rem;color:var(--muted);}
@media (hover:hover) and (pointer:fine){.cp__dica{display:none;}}

/* ---------- detalhe ---------- */
.cp__detalhe{
  margin-top:clamp(30px,4vw,44px);background:var(--paper);
  border-left:4px solid var(--cor);border-radius:0 var(--r) var(--r) 0;
  padding:22px clamp(20px,2.6vw,28px);
}
.cp__detalhe .cp__k{
  font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--cor-esc);
}
.cp__detalhe .cp__v{margin:6px 0 0;font-size:1.08rem;font-weight:700;color:var(--navy);letter-spacing:-.02em;}
.cp__obs{margin-top:16px;padding-top:16px;border-top:1px dashed rgba(10,28,84,.16);}
.cp__obs p{margin:6px 0 0;color:var(--muted);font-size:.98rem;}
.cp__quando{margin:18px 0 0;font-size:.84rem;color:var(--muted);opacity:.85;}

.cp__rodape{
  margin-top:22px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.cp__rodape p{margin:0;font-size:.86rem;color:var(--muted);max-width:46ch;}

/* ---------- escritório parceiro ---------- */
.cp__contato{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}

.cp__parceiro{
  position:relative;flex:0 0 auto;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:var(--white);
  border:3px solid var(--navy);outline:none;
  transition:border-color .4s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.cp__parceiro img{width:70%;height:70%;object-fit:contain;border-radius:50%;}
.cp__parceiro:hover,.cp__parceiro:focus-visible{
  border-color:var(--orange);transform:translateY(-3px);
  box-shadow:0 16px 30px -16px rgba(10,28,84,.75);
}

.cp__parceiro-tip{
  position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,6px);
  padding:9px 15px;border-radius:999px;background:var(--navy);color:#fff;
  font-size:.82rem;font-weight:700;white-space:nowrap;letter-spacing:-.01em;
  opacity:0;visibility:hidden;pointer-events:none;z-index:20;
  transition:opacity .3s var(--ease),transform .4s var(--ease),visibility .3s;
  box-shadow:0 16px 30px -18px rgba(10,28,84,.95);
}
.cp__parceiro-tip::after{
  content:"";position:absolute;top:100%;left:50%;margin-left:-6px;
  border:6px solid transparent;border-top-color:var(--navy);
}
.cp__parceiro:hover .cp__parceiro-tip,
.cp__parceiro:focus-visible .cp__parceiro-tip{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}

/* no celular não existe passar o mouse: o nome fica escrito ao lado */
.cp__parceiro-nome{display:none;font-size:.9rem;font-weight:700;color:var(--navy);letter-spacing:-.01em;}
@media (hover:none){
  .cp__parceiro-nome{display:block;}
  .cp__parceiro-tip{display:none;}
}

/* =========================================================
   Celular — linha do tempo na vertical
   ========================================================= */
@media(max-width:820px){
  .cp__tl{margin-top:34px;}
  .cp__etapas{grid-template-columns:1fr;}
  .cp__etapa{flex-direction:row;align-items:flex-start;text-align:left;gap:14px;padding:7px 0;}
  .cp__etapa::after{left:16px;top:26px;width:6px;height:100%;}
  .cp__ponto{flex:0 0 38px;}
  .cp__txt{padding:8px 0 0;flex:1;min-width:0;}
  .cp__n{margin-right:8px;}
  .cp__rot{display:inline;font-size:.98rem;margin-top:0;}
  .cp__balao{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    width:auto;max-width:none;display:none;margin-top:12px;
  }
  .cp__balao::after{display:none;}
  .cp__etapa.is-aberta .cp__balao{display:block;transform:none;}
}

/* Aviso de que o número pesquisado era um cumprimento de sentença e o
   que está na tela é o processo principal. Sem ele o cliente vê um
   número diferente do que digitou e acha que pesquisou errado. */
.cp__origem{
  display:block;margin-top:7px;font-size:.82rem;line-height:1.45;
  color:var(--muted);font-weight:500;max-width:44ch;
}
