/* Janela "Cidades atendidas", peça única das páginas de serviço.
   Par de /assets/js/cidades-atendidas.js. Usa as cores de cada página. */
.cidades{border:0;border-radius:6px;padding:0;margin:auto;width:min(640px,calc(100% - 32px));max-height:calc(100vh - 48px);
  background:var(--bg);color:var(--text);box-shadow:0 30px 80px -20px rgba(45,42,38,.45)}
.cidades::backdrop{background:rgba(45,42,38,.55)}
.cidades .caixa{display:flex;flex-direction:column;max-height:calc(100vh - 48px)}
.cidades .topo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 28px 14px}
.cidades h2{font-size:clamp(24px,3vw,30px)}
.cidades .fechar{border:0;background:var(--sage-light);color:var(--sage-ink);width:40px;height:40px;border-radius:50%;
  font-size:22px;line-height:1;cursor:pointer;flex:none}
.cidades .rolagem{overflow-y:auto;padding:0 28px}
.cidades .intro{color:var(--muted);margin-bottom:14px}
.cidades ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:32px;margin:0;padding:0}
.cidades li.capital{grid-column:1/-1;font-weight:700}
.cidades li{padding:9px 0;border-bottom:1px solid var(--border);font-size:15.5px}
.cidades .rodape{padding:18px 28px 26px;border-top:1px solid var(--border);margin-top:18px}
.cidades .rodape p{color:var(--muted);font-size:14.5px;margin-bottom:14px}
@media(max-width:560px){.cidades ul{grid-template-columns:1fr}.cidades .topo,.cidades .rolagem,.cidades .rodape{padding-left:20px;padding-right:20px}}
/* o botão que abre a janela pode ter a cara de link sublinhado */
button.link-zap{background:none;border:0;border-bottom:1px solid var(--clay);border-radius:0;padding:0 0 3px;cursor:pointer;font-family:inherit}