/* Ultrafibra — página da cidade. */


.uf-bairros { display: grid; gap: 1.25rem; }
.uf-busca { position: relative; display: block; max-width: 420px; }
.uf-busca .uf-i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--uf-texto-suave); }
.uf-busca input { width: 100%; height: 52px; padding: 0 1rem 0 3rem; border: 1.5px solid var(--uf-borda); border-radius: 999px; background: var(--uf-superficie); color: var(--uf-texto); font: inherit; }
.uf-busca input:focus { outline: none; border-color: var(--uf-destaque); box-shadow: 0 0 0 4px color-mix(in srgb, var(--uf-destaque) 20%, transparent); }
.uf-bairros__lista { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.uf-bairro { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border: 1px solid var(--uf-borda); border-radius: calc(var(--uf-raio) * .8); background: var(--uf-superficie); font-weight: 600; }
.uf-bairro .uf-i { flex: none; color: var(--uf-destaque); }
.uf-bairro small { margin-left: auto; color: var(--uf-texto-suave); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.uf-bairro[hidden] { display: none; }
.uf-bairros__vazio { padding: 1rem 1.25rem; border-radius: var(--uf-raio); background: var(--uf-fundo-alt); }

.uf-atendimento { display: grid; gap: 1.25rem; }
.uf-atendimento--mapa { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.uf-atendimento__cartao { display: grid; gap: 1.25rem; align-content: start; }
.uf-atendimento__titulo { font-size: 1.6rem; font-weight: 800; }
.uf-atendimento__cartao .uf-sobretitulo { margin-bottom: -.75rem; }
.uf-mapa { display: grid; place-items: center; min-height: 340px; border-radius: var(--uf-raio); overflow: hidden; background: var(--uf-superficie) repeating-linear-gradient(45deg, transparent 0 14px, color-mix(in srgb, var(--uf-borda) 60%, transparent) 14px 15px); border: 1px solid var(--uf-borda); }
.uf-mapa iframe { width: 100%; height: 100%; min-height: 340px; border: 0; }
.uf-bairros__tecnologia { display: inline-flex; align-items: center; gap: .5rem; justify-self: start; padding: .45rem .9rem; border-radius: 999px; background: color-mix(in srgb, var(--uf-destaque) 12%, transparent); color: var(--uf-texto); font-weight: 600; font-size: .9rem; }
.uf-bairros__tecnologia .uf-i { color: var(--uf-destaque); }
.uf-atendimento:not(.uf-atendimento--mapa) { max-width: 640px; }