/* Título em três linhas, com o serviço sozinho na última. Nome comprido
   ganha a linha inteira em vez de disputar espaço com o resto da frase.
   Só a quebra muda: tamanho da letra, largura da coluna e foto seguem os da
   página inicial.

   No celular a quebra forçada sai: lá cada linha quebrava de novo e o título
   virava cinco linhas. O espaço antes do <br>, no modelo, é o que separa as
   palavras quando ele some. */
@media(max-width:920px){.h1-quebra{display:none;}}

/* Nada mais é preciso aqui. O campo de comarca desta página nasce vazio, e o
   contorno animado da inicial já vale para campo em branco — ao contrário da
   página de cidade, onde a comarca vem preenchida e o contorno precisava ser
   reposto à mão. Os fóruns e unidades também não existem nesta página. */

/* ============================================ Herói com a foto do serviço
   As fotos de serviço são 1200x393 e a moldura do herói é 4/3: o navegador
   corta as laterais. O ponto de corte não pode ser fixo — na foto da
   audiência o assunto está à esquerda, na da delegacia está à direita —
   então ele vem no style do próprio <img>, do campo `foco` do JSON.
   A regra da inicial (.foto-moldura img) já posiciona e recorta; aqui só
   garantimos o recorte caso aquela regra mude de ideia um dia. */
.foto-moldura .heroi-servico{ object-fit:cover; }

/* ====================== Seção "Terceirize": painel de tipos de serviço
   Entre o herói e a esteira. Texto e botão à esquerda; à direita, um painel
   com uma linha por tipo de serviço — bolinha, nome, uma linha curta e um
   interruptor. A cada quatro segundos a fila anda uma linha, a linha da vez
   liga o interruptor (verde, com visto) e recebe o contorno animado do
   buscador de comarca. A fila não tem fim: quem sai por cima volta para o
   fim, fora da janela, e não se vê a virada.

   Três coisas que custaram rodadas e é melhor não desfazer sem pensar:

   - a altura das linhas vem do script (`--pn-altura`), que divide a janela
     pelo número de linhas. É o que faz elas acabarem exatamente no pé da
     janela, em qualquer largura, sem meio cartão sobrando;
   - o contorno animado fica no <li>, não no botão: dentro de um contexto de
     empilhamento, um filho com z-index negativo ainda pinta por cima do
     fundo do próprio elemento, e o brilho lavava a linha inteira de azul.
     No <li>, que não tem fundo, o botão branco entra depois e cobre o miolo;
   - nada de aspect-ratio nesta grade: com align-items:stretch o navegador
     recalcula a largura pela proporção e a coluna invade a vizinha. */
.terc{ background:#fff; padding:clamp(54px, 7vw, 92px) 0; --pn-larg:392px; --pn-gap:20px; }

/* stretch iguala a altura das duas colunas: é o que põe o topo do painel na
   linha do título e o pé na linha do botão. */
.terc-grid{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(26px, 3.6vw, 56px); align-items:stretch;
}
/* space-between gruda o texto no topo e o botão no pé. */
.terc-texto{ display:flex; flex-direction:column; justify-content:space-between; }
.terc-texto h2{
  margin:0; color:var(--ink); font-size:clamp(24px, 2.9vw, 36px); font-weight:800;
  line-height:1.14; letter-spacing:-.03em;
}
.terc-frase{
  margin:22px 0 0; color:var(--ink); font-size:17.5px; font-weight:700; line-height:1.5;
}
.terc-bloco p:not(.terc-frase){
  margin:18px 0 0; max-width:54ch;
  color:var(--muted); font-size:16.5px; line-height:1.65;
}
/* Mesmas cores e medidas do .serv-cta, o botão azul do cabeçalho dos
   serviços: é a mesma ação, leva ao mesmo lugar. */
.terc-cta{
  align-self:flex-start; margin-top:30px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--blue-500); color:#fff; border-radius:12px; padding:14px 30px;
  font:700 15px/1 Inter,sans-serif; text-decoration:none; white-space:nowrap;
  box-shadow:0 12px 24px -8px rgba(54,82,255,.55);
  transition:transform .15s ease, box-shadow .15s ease;
}
.terc-cta:hover{
  transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(54,82,255,.65);
}

/* ------------------------------------------- o fio azul ao lado do painel
   O mesmo fio da seção "Como funciona": 2px cinza, azul no item da vez. Lá
   ele é a borda esquerda de cada etapa; aqui a fila desliza e a linha da
   vez fica sempre no mesmo lugar da janela, então o pedaço azul marca QUAL
   item está ativo — o trilho é dividido em tantos degraus quantos forem os
   itens, e o script põe o pedaço no degrau certo. A transição é a mesma do
   deslize da fila, para os dois andarem juntos. */
.pn-area{ display:flex; align-items:stretch; gap:14px; min-width:0; }
.ln-trilho{ position:relative; flex:0 0 12px; width:12px; }
.ln-trilho::before{
  content:""; position:absolute; left:5px; top:0; bottom:0; width:2px;
  background:var(--line); border-radius:2px;
}
.ln-azul{
  position:absolute; left:5px; width:2px; top:0; height:0; border-radius:2px;
  background:var(--blue-500);
  transition:top var(--pn-deslize, .5s) cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------- o painel */
.pn-painel{
  flex:0 0 var(--pn-larg); width:var(--pn-larg); box-sizing:border-box;
  background:var(--bg); border-radius:22px; padding:18px;
  display:flex; flex-direction:column; min-height:0;
}
.pn-titulo{
  margin:0 0 12px; padding-left:4px; color:var(--ink);
  font:700 15px/1.2 Sora, sans-serif; letter-spacing:-.01em;
}
/* A folga de cima é onde cabe o contorno da primeira linha, que é a da vez
   enquanto nada deslizou. O script desconta essa folga na divisão. */
.pn-janela{
  position:relative; flex:1 1 auto; min-height:0; overflow:hidden;
  margin:0 -14px; padding:10px 14px 0;
}
.pn-lista{
  position:absolute; top:0; left:14px; right:14px; list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--pn-gap);
  transition:transform var(--pn-deslize, .5s) cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.pn-lista > li{ position:relative; isolation:isolate; }

/* ------------------------------------------------------ cada linha */
.pn-linha{
  display:grid; grid-template-columns:12px minmax(0,1fr) 42px; align-items:center;
  gap:13px; width:100%; box-sizing:border-box; text-align:left; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:0 12px;
  height:var(--pn-altura, 52px);
  font-family:inherit; box-shadow:0 1px 2px rgba(11,7,84,.04);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.pn-linha.is-ativo{ border-color:transparent; box-shadow:0 2px 4px rgba(11,7,84,.05); }
.pn-linha:focus-visible{ outline:3px solid var(--blue-400); outline-offset:2px; }
.pn-ico{
  width:10px; height:10px; border-radius:50%; justify-self:center;
  background:var(--blue-500);
}
.pn-txt{ min-width:0; display:block; }
/* Uma linha cada: se o nome quebrasse, a linha mudava de altura e o passo
   da fila saía errado. */
.pn-nome, .pn-sub{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pn-nome{ color:var(--ink); font:700 14.5px/1.3 Sora, sans-serif; letter-spacing:-.01em; }
.pn-sub{ margin-top:1px; color:var(--muted-light); font-size:11.5px; line-height:1.35; }

/* -------------------------------------------------- o interruptor */
.pn-chave{
  position:relative; justify-self:end; width:42px; height:24px; border-radius:999px;
  background:#D5D8E4; transition:background .3s ease;
}
.pn-chave i{
  position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; display:grid; place-items:center;
  box-shadow:0 1px 2px rgba(11,7,84,.28); transition:left .3s cubic-bezier(.4,.9,.3,1.3);
}
.pn-visto{
  width:11px; height:11px; fill:none; stroke:#15A34A; stroke-width:3.4;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0; scale:.5; transition:opacity .2s ease .08s, scale .2s ease .08s;
}
.pn-linha.is-on .pn-chave{ background:#16A34A; }
.pn-linha.is-on .pn-chave i{ left:21px; }
.pn-linha.is-on .pn-visto{ opacity:1; scale:1; }

/* -------------------------------- o contorno animado da linha da vez
   O mesmo do buscador de comarca e dos cartões de serviço: gradiente cônico
   girando em 6s e, por trás, o mesmo gradiente desfocado pulsando em 9s. A
   variável do ângulo, o @property e os dois @keyframes já vêm da página. */
.pn-lista > li.is-ativo::before, .pn-lista > li.is-ativo::after{
  content:""; position:absolute; pointer-events:none;
}
.pn-lista > li.is-ativo::before{
  inset:-3px; border-radius:17px; z-index:-1;
  background:conic-gradient(from var(--cidade-borda-angulo),
    #b9e5ff 0deg, #6aa8ff 70deg, #3652ff 160deg,
    #7c3aed 230deg, #c9a7ff 285deg, #b9e5ff 360deg);
  box-shadow:0 0 0 1px rgba(125,116,199,.15);
  animation:cidade-borda-girar 6s linear infinite;
}
.pn-lista > li.is-ativo::after{
  inset:-5px; border-radius:19px; z-index:-2; filter:blur(5px);
  background:conic-gradient(from var(--cidade-borda-angulo),
    #8ccfff, #7c4dff, #b9e5ff, #8ccfff);
  animation:cidade-borda-girar 6s linear infinite, cidade-brilho 9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .pn-lista, .pn-chave, .pn-chave i, .pn-visto{ transition:none; }
  .pn-lista > li.is-ativo::before, .pn-lista > li.is-ativo::after{ animation:none; }
}

@media(max-width:920px){
  /* Em uma coluna não há o que alinhar, e a quebra forçada do título sai:
     na largura do celular cada linha quebrava de novo. */
  .terc-quebra{ display:none; }
  .terc-grid{ grid-template-columns:1fr; gap:26px; align-items:start; }
  .terc-texto{ display:block; }
  .terc-bloco p:not(.terc-frase){ font-size:16px; }
  .terc-cta{ width:100%; }
  .terc{ --pn-larg:min(392px, 100%); }
  .pn-area{ height:clamp(380px, 96vw, 430px); justify-content:center; }
  .pn-painel{ flex:1 1 auto; }
}