/* ═══════════════════════════════════════════════════════════════════
   Transnoronha Entulhos · sistema visual
   Direção: limpa e corporativa. Autoridade vem de prova (licença,
   pátio próprio, numeração da prefeitura), não de peso gráfico.
   Cores da logo da empresa. Escala tipográfica 1.250, espaços de 4.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* ── primitivos (da logo) ─────────────────────────────────────── */
  --laranja-600:#C2760A;
  --laranja-500:#EF910A;
  --laranja-100:#FDF0DC;
  --laranja-50:#FEF8EF;
  --preto-900:#161616;
  --cinza-700:#494948;
  --cinza-500:#7A7E79;
  --cinza-200:#E2E4E0;
  --cinza-100:#F1F2EF;
  --branco:#FFFFFF;
  --profundo-900:#1C1F1A;
  --vermelho-600:#B4301F;
  --vermelho-50:#FBEFEC;
  --verde-zap:#1FA855;

  /* ── semânticos (a interface usa só estes) ────────────────────── */
  --acao:var(--laranja-500);
  --acao-pressionada:var(--laranja-600);
  --acao-fundo:var(--laranja-50);
  --acao-contorno:var(--laranja-100);
  --tinta:var(--preto-900);
  --tinta-apoio:var(--cinza-700);
  --tinta-leve:var(--cinza-500);
  --superficie:var(--branco);
  --superficie-alt:var(--cinza-100);
  --superficie-escura:var(--profundo-900);
  --linha:var(--cinza-200);
  --perigo:var(--vermelho-600);
  --perigo-fundo:var(--vermelho-50);
  --foco:var(--laranja-600);

  /* ── tipografia: escala 1.250 sobre 16 ────────────────────────── */
  --fonte-titulo:"Lexend",system-ui,sans-serif;
  --fonte-corpo:"Source Sans 3",system-ui,-apple-system,sans-serif;
  --t-12:0.75rem; --t-14:0.875rem; --t-16:1rem; --t-20:1.25rem;
  --t-25:1.5625rem; --t-31:1.9531rem; --t-39:2.4414rem; --t-49:3.0518rem;

  /* ── espaço: múltiplos de 4 ───────────────────────────────────── */
  --e-4:4px; --e-8:8px; --e-12:12px; --e-16:16px; --e-24:24px;
  --e-32:32px; --e-48:48px; --e-64:64px; --e-96:96px;

  --raio:8px;
  --raio-g:14px;
  --sombra-1:0 1px 2px rgba(22,22,22,.06), 0 1px 3px rgba(22,22,22,.05);
  --sombra-2:0 4px 6px -2px rgba(22,22,22,.05), 0 12px 20px -8px rgba(22,22,22,.12);
  --limite:1180px;
  --entrada:cubic-bezier(0,0,0.2,1);
  --saida:cubic-bezier(0.4,0,1,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--superficie);color:var(--tinta);
  font-family:var(--fonte-corpo);font-size:var(--t-16);line-height:1.6;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:3px solid var(--foco);outline-offset:3px;border-radius:3px;
}
.pular-para-conteudo{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--tinta);color:var(--branco);padding:var(--e-12) var(--e-24);
}
.pular-para-conteudo:focus{left:var(--e-16);top:var(--e-16)}
.so-no-celular{display:none}
.so-para-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── estrutura ─────────────────────────────────────────────────── */
.limite{width:min(100% - 40px,var(--limite));margin-inline:auto}
.secao{padding:var(--e-96) 0}
.secao--alt{background:var(--superficie-alt)}
.secao--escura{background:var(--superficie-escura);color:#E7E9E4}
.secao--compacta{padding:var(--e-64) 0}

.rotulo{
  display:block;font-family:var(--fonte-titulo);font-size:var(--t-12);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acao-pressionada);
  margin-bottom:var(--e-12);
}
.secao--escura .rotulo{color:var(--acao)}
.titulo{
  font-family:var(--fonte-titulo);font-weight:600;letter-spacing:-.022em;
  font-size:clamp(var(--t-25),3.4vw,var(--t-39));line-height:1.15;text-wrap:balance;
}
.intro{
  margin-top:var(--e-16);max-width:64ch;color:var(--tinta-apoio);
  font-size:var(--t-20);line-height:1.55;
}
.secao--escura .intro{color:#B6BAB2}
.cabeca-secao{max-width:72ch;margin-bottom:var(--e-48)}

/* ── botões ────────────────────────────────────────────────────── */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-8);
  min-height:48px;padding:var(--e-12) var(--e-24);
  font-family:var(--fonte-titulo);font-size:var(--t-16);font-weight:600;
  border:1.5px solid transparent;border-radius:var(--raio);
  background:var(--acao);color:var(--preto-900);text-decoration:none;cursor:pointer;
  box-shadow:var(--sombra-1);
  transition:background-color .15s var(--entrada),box-shadow .15s var(--entrada),transform .1s var(--entrada);
}
.botao:hover{background:var(--acao-pressionada);color:var(--branco);box-shadow:var(--sombra-2)}
.botao:active{transform:translateY(1px);box-shadow:var(--sombra-1)}
.botao--contorno{background:transparent;border-color:var(--linha);color:var(--tinta);box-shadow:none}
.botao--contorno:hover{background:var(--superficie-alt);border-color:var(--tinta-leve);color:var(--tinta);box-shadow:none}
.botao--claro{background:var(--branco);color:var(--tinta)}
.botao--claro:hover{background:var(--superficie-alt);color:var(--tinta)}
.botao--zap{background:var(--verde-zap);color:var(--branco)}
.botao--zap:hover{background:#178643;color:var(--branco)}
.botao svg{width:20px;height:20px;flex:none}

/* ── ícones ────────────────────────────────────────────────────── */
.icone{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.icone--g{width:28px;height:28px}

/* ── barra de serviço e cabeçalho ──────────────────────────────── */
.barra-topo{background:var(--superficie-escura);color:#B6BAB2;font-size:var(--t-14)}
.barra-topo__itens{display:flex;flex-wrap:wrap;gap:var(--e-8) var(--e-32);align-items:center;padding:var(--e-8) 0}
.barra-topo__item{display:inline-flex;align-items:center;gap:var(--e-8)}
.barra-topo__item svg{width:16px;height:16px;stroke:var(--acao);fill:none;stroke-width:1.8}
.barra-topo b{color:var(--branco);font-weight:600}
.barra-topo__tel{margin-left:auto;font-weight:600;color:var(--branco);text-decoration:none}
.barra-topo__tel:hover{color:var(--acao)}

.cabecalho{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--linha)}
.cabecalho__linha{display:flex;align-items:center;gap:var(--e-32);padding:var(--e-16) 0;min-width:0}
.cabecalho__logo{flex:none}
.cabecalho__logo img{width:clamp(160px,20vw,204px)}
.menu{display:flex;gap:var(--e-32);margin-left:auto;font-size:var(--t-16);font-weight:500}
.menu a{text-decoration:none;color:var(--tinta-apoio);padding:var(--e-4) 0;border-bottom:2px solid transparent;transition:color .15s var(--entrada),border-color .15s var(--entrada)}
.menu a:hover{color:var(--tinta);border-bottom-color:var(--acao)}
.menu a[aria-current="page"]{color:var(--tinta);border-bottom-color:var(--acao)}
.cabecalho .botao{min-height:44px;padding:var(--e-8) var(--e-16);font-size:var(--t-14)}

/* ── topo da página ────────────────────────────────────────────── */
.topo{padding:var(--e-64) 0 var(--e-48);background:
  linear-gradient(180deg,var(--superficie) 0%,var(--superficie-alt) 100%)}
.topo__grade{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--e-64);align-items:center}
.topo h1{
  font-family:var(--fonte-titulo);font-weight:600;letter-spacing:-.028em;
  font-size:clamp(var(--t-31),4.6vw,var(--t-49));line-height:1.08;text-wrap:balance;
}
.topo__sub{margin-top:var(--e-16);font-size:var(--t-20);color:var(--tinta-apoio);max-width:52ch}
.topo__foto{position:relative;border-radius:var(--raio-g);overflow:hidden;box-shadow:var(--sombra-2)}
.topo__foto img{aspect-ratio:4/3;object-fit:cover;width:100%}
.topo__creditos{
  position:absolute;left:var(--e-16);bottom:var(--e-16);
  background:rgba(28,31,26,.88);color:#fff;font-size:var(--t-12);
  padding:var(--e-8) var(--e-12);border-radius:6px;letter-spacing:.02em;
}

/* ── seletor de caminho (morador ou obra) ──────────────────────── */
.caminhos{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-16);margin-top:var(--e-32)}
.caminho{
  display:flex;flex-direction:column;gap:var(--e-8);
  padding:var(--e-24);background:var(--superficie);border:1.5px solid var(--linha);
  border-radius:var(--raio-g);text-decoration:none;box-shadow:var(--sombra-1);
  transition:border-color .15s var(--entrada),box-shadow .15s var(--entrada),transform .15s var(--entrada);
}
.caminho:hover{border-color:var(--acao);box-shadow:var(--sombra-2);transform:translateY(-2px)}
.caminho__icone{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--acao-fundo);color:var(--acao-pressionada)}
.caminho b{font-family:var(--fonte-titulo);font-size:var(--t-20);font-weight:600;line-height:1.2}
.caminho span{color:var(--tinta-apoio);font-size:var(--t-16)}
.caminho__ir{margin-top:var(--e-8);font-weight:600;color:var(--acao-pressionada);font-size:var(--t-14);display:inline-flex;align-items:center;gap:var(--e-4)}
.caminho:hover .caminho__ir{gap:var(--e-12)}
.caminho__ir svg{width:16px;height:16px;transition:transform .15s var(--entrada)}

/* ── faixa de confiança ────────────────────────────────────────── */
.confianca{border-block:1px solid var(--linha);background:var(--superficie)}
.confianca__grade{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-32);padding:var(--e-32) 0}
.confianca__item{display:flex;gap:var(--e-12);align-items:flex-start}
.confianca__item svg{color:var(--acao-pressionada)}
.confianca__item b{display:block;font-family:var(--fonte-titulo);font-weight:600;font-size:var(--t-16);line-height:1.3}
.confianca__item span{color:var(--tinta-apoio);font-size:var(--t-14);line-height:1.45}

/* ── tabela de tamanhos ────────────────────────────────────────── */
.tamanhos{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--e-16)}
.tamanho{
  position:relative;display:flex;flex-direction:column;gap:var(--e-12);
  padding:var(--e-24) var(--e-16);background:var(--superficie);
  border:1.5px solid var(--linha);border-radius:var(--raio-g);
  transition:border-color .15s var(--entrada),box-shadow .15s var(--entrada);
}
.tamanho:hover{border-color:var(--tinta-leve);box-shadow:var(--sombra-1)}
.tamanho--destaque{border-color:var(--acao);box-shadow:var(--sombra-2)}
.tamanho__selo{
  position:absolute;top:-11px;left:var(--e-16);background:var(--acao);color:var(--preto-900);
  font-family:var(--fonte-titulo);font-size:var(--t-12);font-weight:600;letter-spacing:.04em;
  padding:3px var(--e-12);border-radius:999px;
}
.tamanho__medida{font-family:var(--fonte-titulo);font-size:var(--t-39);font-weight:600;line-height:1;letter-spacing:-.03em}
.tamanho__medida span{font-size:var(--t-20);font-weight:500;color:var(--tinta-apoio)}
.tamanho__cabe{font-size:var(--t-14);color:var(--tinta-apoio);line-height:1.45;flex:1}
.tamanho__preco{padding-top:var(--e-12);border-top:1px solid var(--linha);font-family:var(--fonte-titulo);font-size:var(--t-25);font-weight:600}
.tamanho__preco small{display:block;font-family:var(--fonte-corpo);font-size:var(--t-12);font-weight:400;color:var(--perigo);letter-spacing:0;margin-top:2px}
.tamanho .botao{width:100%;min-height:44px;padding:var(--e-8) var(--e-12);font-size:var(--t-14)}
.nota-legal{
  margin-top:var(--e-32);display:flex;gap:var(--e-16);align-items:flex-start;
  padding:var(--e-24);background:var(--acao-fundo);border:1px solid var(--acao-contorno);
  border-radius:var(--raio-g);font-size:var(--t-16);color:var(--tinta-apoio);
}
.nota-legal svg{color:var(--acao-pressionada)}
.nota-legal b{color:var(--tinta)}

/* ── passos ────────────────────────────────────────────────────── */
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-32);counter-reset:passo}
.passo{display:flex;flex-direction:column;gap:var(--e-8);padding-top:var(--e-24);border-top:3px solid var(--linha)}
.passo--feito{border-top-color:var(--acao)}
.passo::before{
  counter-increment:passo;content:counter(passo);
  font-family:var(--fonte-titulo);font-size:var(--t-14);font-weight:600;
  color:var(--acao-pressionada);letter-spacing:.1em;
}
.passo h3{font-family:var(--fonte-titulo);font-size:var(--t-20);font-weight:600;line-height:1.25}
.passo p{color:var(--tinta-apoio);font-size:var(--t-16)}

/* ── usos ──────────────────────────────────────────────────────── */
.usos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-24)}
.uso{padding:var(--e-24);background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-g)}
.uso b{display:block;font-family:var(--fonte-titulo);font-size:var(--t-20);font-weight:600;margin-bottom:var(--e-4)}
.uso span{color:var(--tinta-apoio);font-size:var(--t-16)}

/* ── pode / não pode ───────────────────────────────────────────── */
.duas{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-24)}
.lista-caixa{padding:var(--e-32);border-radius:var(--raio-g);border:1px solid var(--linha);background:var(--superficie)}
.lista-caixa--nao{background:var(--perigo-fundo);border-color:#F2D9D3}
.lista-caixa h3{display:flex;align-items:center;gap:var(--e-8);font-family:var(--fonte-titulo);font-size:var(--t-20);font-weight:600}
.lista-caixa--pode h3 svg{color:var(--acao-pressionada)}
.lista-caixa--nao h3 svg{color:var(--perigo)}
.lista-caixa__nota{margin:var(--e-4) 0 var(--e-16);color:var(--tinta-apoio);font-size:var(--t-14)}
.lista-caixa li{padding:var(--e-8) 0;border-top:1px solid var(--linha);font-size:var(--t-16)}
.lista-caixa--nao li{border-top-color:#F2D9D3}
.lista-caixa li:first-child{border-top:0}

/* ── pátio (faixa escura) ──────────────────────────────────────── */
.patio__grade{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-64);align-items:center}
.patio__foto{border-radius:var(--raio-g);overflow:hidden;box-shadow:var(--sombra-2)}
.patio__foto img{aspect-ratio:3/2;object-fit:cover;width:100%}
.provas{margin-top:var(--e-32);display:grid;gap:var(--e-16)}
.prova{display:flex;gap:var(--e-12);align-items:flex-start}
.prova svg{color:var(--acao);margin-top:2px}
.prova b{color:#fff;font-weight:600}
.prova span{color:#B6BAB2}

/* ── regra ─────────────────────────────────────────────────────── */
.regra__grade{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--e-48);align-items:start}
.tabela-regra{width:100%;border-collapse:collapse;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-g);overflow:hidden}
.tabela-regra caption{text-align:left;padding:var(--e-16) var(--e-24);background:var(--superficie-alt);font-family:var(--fonte-titulo);font-weight:600;font-size:var(--t-14);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-apoio)}
.tabela-regra td{padding:var(--e-12) var(--e-24);border-top:1px solid var(--linha);font-size:var(--t-16)}
.tabela-regra td:last-child{text-align:right;font-weight:600;white-space:nowrap}
.fonte-legal{margin-top:var(--e-12);font-size:var(--t-12);color:var(--tinta-leve)}
.destaque-legal{padding:var(--e-32);background:var(--acao-fundo);border:1.5px solid var(--acao);border-radius:var(--raio-g)}
.destaque-legal h3{font-family:var(--fonte-titulo);font-size:var(--t-25);font-weight:600;line-height:1.2;letter-spacing:-.02em}
.destaque-legal p{margin-top:var(--e-16);color:var(--tinta-apoio)}
.destaque-legal p b{color:var(--tinta)}

/* ── bairros ───────────────────────────────────────────────────── */
.bairros{display:flex;flex-wrap:wrap;gap:var(--e-8)}
.bairros li{padding:var(--e-8) var(--e-16);background:var(--superficie);border:1px solid var(--linha);border-radius:999px;font-size:var(--t-14);color:var(--tinta-apoio)}
.bairros-fecho{margin-top:var(--e-32);display:flex;flex-wrap:wrap;gap:var(--e-16);align-items:center}

/* ── chamada para obra grande ──────────────────────────────────── */
.ponte{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--e-48);align-items:center;
  padding:var(--e-48);background:var(--superficie-escura);color:#E7E9E4;border-radius:var(--raio-g)}
.ponte h2{font-family:var(--fonte-titulo);font-size:var(--t-31);font-weight:600;line-height:1.15;letter-spacing:-.02em}
.ponte p{margin-top:var(--e-12);color:#B6BAB2}
.ponte__numeros{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-24)}
.ponte__numeros b{display:block;font-family:var(--fonte-titulo);font-size:var(--t-31);font-weight:600;color:var(--acao);line-height:1}
.ponte__numeros span{font-size:var(--t-14);color:#B6BAB2}

/* ── perguntas ─────────────────────────────────────────────────── */
.perguntas{border-top:1px solid var(--linha)}
.pergunta{border-bottom:1px solid var(--linha)}
.pergunta summary{
  cursor:pointer;list-style:none;padding:var(--e-24) 0;
  font-family:var(--fonte-titulo);font-size:var(--t-20);font-weight:500;
  display:flex;justify-content:space-between;gap:var(--e-24);align-items:center;
}
.pergunta summary::-webkit-details-marker{display:none}
.pergunta summary::after{content:"";width:12px;height:12px;flex:none;border-right:2px solid var(--acao-pressionada);border-bottom:2px solid var(--acao-pressionada);transform:rotate(45deg) translateY(-3px);transition:transform .2s var(--entrada)}
.pergunta[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.pergunta p{padding-bottom:var(--e-24);color:var(--tinta-apoio);max-width:74ch}

/* ── chamada final ─────────────────────────────────────────────── */
.fecho{text-align:center;background:var(--acao-fundo);border-top:1px solid var(--acao-contorno)}
.fecho h2{font-family:var(--fonte-titulo);font-size:clamp(var(--t-25),3.6vw,var(--t-39));font-weight:600;letter-spacing:-.022em;line-height:1.12;text-wrap:balance}
.fecho p{margin:var(--e-16) auto 0;max-width:54ch;color:var(--tinta-apoio);font-size:var(--t-20)}
.fecho__acoes{margin-top:var(--e-32);display:flex;gap:var(--e-16);justify-content:center;flex-wrap:wrap}

/* ── rodapé ────────────────────────────────────────────────────── */
.rodape{background:var(--superficie-escura);color:#9EA39B;padding:var(--e-64) 0 var(--e-32);font-size:var(--t-14)}
.rodape__grade{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--e-48)}
.rodape h4{font-family:var(--fonte-titulo);font-size:var(--t-12);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:var(--e-16);font-weight:600}
.rodape li{padding:var(--e-4) 0}
.rodape a{text-decoration:none;transition:color .15s var(--entrada)}
.rodape a:hover{color:var(--acao)}
.rodape__marca img{width:188px}
.rodape__frase{margin-top:var(--e-16);color:#B6BAB2;max-width:34ch;line-height:1.5}
.rodape__pe{margin-top:var(--e-48);padding-top:var(--e-24);border-top:1px solid #2E322C;display:flex;flex-wrap:wrap;gap:var(--e-8) var(--e-32);font-size:var(--t-12)}

/* ── WhatsApp flutuante ────────────────────────────────────────── */
.zap{
  position:fixed;right:20px;bottom:20px;z-index:50;
  display:inline-flex;align-items:center;gap:var(--e-8);
  min-height:52px;padding:var(--e-12) var(--e-24);
  background:var(--verde-zap);color:#fff;text-decoration:none;
  font-family:var(--fonte-titulo);font-weight:600;font-size:var(--t-16);
  border-radius:999px;box-shadow:0 6px 16px rgba(22,22,22,.22);
  transition:transform .15s var(--entrada),box-shadow .15s var(--entrada);
}
.zap:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(22,22,22,.28)}
.zap svg{width:22px;height:22px;flex:none;fill:currentColor;stroke:none}

/* ── telas menores ─────────────────────────────────────────────── */
@media (max-width:1024px){
  .tamanhos{grid-template-columns:repeat(3,1fr)}
  .rodape__grade{grid-template-columns:1fr 1fr}
  .confianca__grade{grid-template-columns:1fr 1fr;gap:var(--e-24)}
}
@media (max-width:860px){
  .secao{padding:var(--e-64) 0}
  .topo__grade,.patio__grade,.regra__grade,.duas,.ponte{grid-template-columns:1fr}
  .passos,.usos{grid-template-columns:1fr 1fr}
  .menu{display:none}
  .ponte{padding:var(--e-32);gap:var(--e-32)}
}
@media (max-width:620px){
  .fora-do-celular{display:none}
  .so-no-celular{display:inline}
  .limite{width:min(100% - 32px,var(--limite))}
  .tamanhos{grid-template-columns:1fr 1fr}
  .passos,.usos,.caminhos,.confianca__grade{grid-template-columns:1fr}
  .rodape__grade{grid-template-columns:1fr}
  .topo{padding-top:var(--e-32)}
  .barra-topo__itens{gap:var(--e-4) var(--e-16);font-size:var(--t-12)}
  .barra-topo__item--opcional{display:none}
  .cabecalho__linha{gap:var(--e-12);justify-content:space-between}
  .cabecalho__logo img{width:146px}
  .cabecalho .botao{padding:var(--e-8) var(--e-12);font-size:var(--t-14);white-space:nowrap}
  .zap span{display:none}
  .zap{padding:var(--e-16);border-radius:50%;min-height:0}
  .fecho__acoes .botao,.topo .botao{width:100%}
}

/* ── página de bairro ──────────────────────────────────────────── */
.trilha{padding:var(--e-16) 0;font-size:var(--t-14);color:var(--tinta-leve);border-bottom:1px solid var(--linha)}
.trilha ol{display:flex;flex-wrap:wrap;gap:var(--e-8);align-items:center}
.trilha li::after{content:"/";margin-left:var(--e-8);color:var(--linha)}
.trilha li:last-child::after{content:""}
.trilha a{text-decoration:none;color:var(--tinta-apoio)}
.trilha a:hover{color:var(--acao-pressionada)}
.trilha [aria-current="page"]{color:var(--tinta)}

.topo-bairro{padding:var(--e-48) 0;background:linear-gradient(180deg,var(--superficie) 0%,var(--superficie-alt) 100%)}
.topo-bairro__grade{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--e-48);align-items:center}
.topo-bairro h1{font-family:var(--fonte-titulo);font-weight:600;letter-spacing:-.026em;
  font-size:clamp(var(--t-25),4vw,var(--t-39));line-height:1.1;text-wrap:balance}
.topo-bairro__sub{margin-top:var(--e-16);font-size:var(--t-20);color:var(--tinta-apoio);max-width:54ch}
.topo-bairro__acoes{display:flex;flex-wrap:wrap;gap:var(--e-12);margin-top:var(--e-24)}
.selo-casa{display:inline-flex;align-items:center;gap:var(--e-8);margin-top:var(--e-24);
  padding:var(--e-12) var(--e-16);background:var(--acao-fundo);border:1px solid var(--acao-contorno);
  border-radius:var(--raio);font-size:var(--t-14);color:var(--tinta-apoio)}
.selo-casa svg{color:var(--acao-pressionada);width:20px;height:20px;flex:none}
.selo-casa b{color:var(--tinta)}

.vizinhos{display:flex;flex-wrap:wrap;gap:var(--e-8);margin-top:var(--e-24)}
.vizinhos a{padding:var(--e-8) var(--e-16);background:var(--superficie);border:1px solid var(--linha);
  border-radius:999px;font-size:var(--t-14);color:var(--tinta-apoio);text-decoration:none;
  transition:border-color .15s var(--entrada),color .15s var(--entrada)}
.vizinhos a:hover{border-color:var(--acao);color:var(--tinta)}

.indice-regiao{margin-bottom:var(--e-48)}
.indice-regiao h3{font-family:var(--fonte-titulo);font-size:var(--t-20);font-weight:600;margin-bottom:var(--e-16);
  padding-bottom:var(--e-8);border-bottom:2px solid var(--acao)}
.indice-regiao__lista{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-8) var(--e-24)}
.indice-regiao__lista a{text-decoration:none;color:var(--tinta-apoio);padding:var(--e-4) 0;display:block;
  border-bottom:1px solid transparent;transition:color .15s var(--entrada)}
.indice-regiao__lista a:hover{color:var(--acao-pressionada)}
@media (max-width:860px){
  .topo-bairro__grade{grid-template-columns:1fr}
  .indice-regiao__lista{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .indice-regiao__lista{grid-template-columns:1fr}
  .topo-bairro__acoes .botao{width:100%}
}

/* A tabela de tamanhos da página de bairro tem texto longo na última
   coluna. A regra geral da .tabela-regra não quebra linha ali (serve para
   valores curtos como "10 m³"), e isso empurrava a página para fora da
   tela no celular. Aqui o texto quebra, e abaixo de 620 px cada linha
   vira um bloco. */
.tabela-regra--tamanhos td{white-space:normal;vertical-align:top}
.tabela-regra--tamanhos td:last-child{text-align:left;font-weight:400;color:var(--tinta-apoio)}
.tabela-regra--tamanhos td:first-child{width:6rem}
@media (max-width:620px){
  .tabela-regra--tamanhos,
  .tabela-regra--tamanhos tbody,
  .tabela-regra--tamanhos tr,
  .tabela-regra--tamanhos td{display:block;width:auto}
  .tabela-regra--tamanhos tr{border-top:1px solid var(--linha);padding:var(--e-12) var(--e-16)}
  .tabela-regra--tamanhos tr:first-child{border-top:0}
  .tabela-regra--tamanhos td{border-top:0;padding:1px 0}
  .tabela-regra--tamanhos td:first-child{width:auto;font-size:var(--t-20)}
}