/* Título em três linhas, com a cidade sozinha na última. Nome comprido
   ganha a linha inteira em vez de disputar espaço com o resto da frase.
   Só a quebra muda: o tamanho da letra, a largura da coluna e a foto
   seguem os da página inicial. Chegamos a testar 44 e 48px, mas a letra
   maior não cabe nos 600px da coluna, e estreitar a foto para abrir
   espaço jogava a faixa "+10.000 correspondentes parceiros" para duas
   linhas no Chrome da usuária. Em 40px a folga da linha mais longa é de
   ~11% da coluna, sem mexer em mais nada.

   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> é o que separa as
   palavras quando ele some. */
@media(max-width:920px){.h1-quebra{display:none;}}

/* Contorno animado do campo de cidade. A inicial troca o halo girando por
   um contorno azul estável assim que o campo tem texto — ali isso quer
   dizer que a pessoa está digitando. Aqui a cidade já vem preenchida, e a
   regra disparava sozinha: o campo nascia sem a animação. Enquanto o
   visitante não toca no campo, cidade.js mantém .cidade-intocada e estas
   duas regras repõem exatamente o estado da inicial. O :not(:focus-within)
   não é enfeite: sem ele o seletor da inicial, que usa :has(), pesa mais
   e continua vencendo. */
@media(prefers-reduced-motion:no-preference){
  .cidade-destaque.cidade-intocada:not(:focus-within)::before{
    inset:-5px; border-radius:17px;
    background:conic-gradient(from var(--cidade-borda-angulo),#b9e5ff 0deg,#8ccfff 70deg,#3652ff 160deg,#789bff 230deg,#e2f4ff 285deg,#b9e5ff 360deg);
    box-shadow:0 0 0 1px rgba(125,116,199,.15);
    animation:cidade-borda-girar 6s linear infinite;
  }
  .cidade-destaque.cidade-intocada:not(:focus-within)::after{
    inset:-8px; border-radius:20px; z-index:-1; opacity:1;
    background:conic-gradient(from var(--cidade-borda-angulo),#96d8ff,#687aff,#bfebff,#96d8ff);
    filter:blur(7px);
    animation:cidade-borda-girar 6s linear infinite,cidade-brilho 9s ease-in-out infinite;
  }
}

/* Extensões locais do modelo aprovado da CJE. */
.cidade-unidades-sec{padding:clamp(56px,7vw,96px) 0;}
.cidade-unidades-cab{max-width:720px;margin-bottom:30px;}
.cidade-unidades-sec{background:#fff;}
.cidade-unidades-cab h2{font-size:clamp(28px,3vw,38px);line-height:1.2;letter-spacing:-.035em;}
.cidade-unidades{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;}
.cidade-unidades li{padding:16px 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.6;}
.cidade-preenchida-cursor{display:none;position:absolute;left:var(--cidade-caret-x,160px);top:50%;height:1.15em;width:1px;background:var(--ink);transform:translateY(-50%);pointer-events:none;z-index:2;}
.cidade-destaque.cidade-recem-preenchida .cidade-preenchida-cursor{display:block;animation:cidade-cursor-piscar .9s steps(1,end) 3;}
.cidade-destaque.cidade-recem-preenchida>input{animation:cidade-preenchida-realce 1.6s ease-out 1;}
@keyframes cidade-preenchida-realce{0%{background:#e5f3ff;box-shadow:0 0 0 6px #8ccfff55;}100%{background:#fff;box-shadow:0 0 0 0 #8ccfff00;}}
@media(max-width:920px){.cidade-unidades{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.cidade-unidades{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){.cidade-destaque.cidade-recem-preenchida>input,.cidade-destaque.cidade-recem-preenchida .cidade-preenchida-cursor{animation:none;}.cidade-preenchida-cursor{display:none!important;}}