/* ═══════════════════════════════════════════════════════════════════
   Transnoronha · camada autoral
   Modelada na linguagem de composição da referência lumina (energia
   solar, outro segmento): fotografia de borda a borda como base,
   interface de vidro por cima, título em duas linhas (leve + pesada),
   números como lista de fio fino, cartões numerados com um na cor de
   acento, e a seção de processo presa à tela.
   O acento é o laranja da logo, que é a cor da caçamba nas fotos.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --e-20:20px;
  --vidro:rgba(255,255,255,.12);
  --vidro-borda:rgba(255,255,255,.22);
  --vidro-forte:rgba(255,255,255,.94);
  --noite:#101210;
  --noite-2:#191C18;
}

/* ── título em duas linhas: a primeira leve, a segunda pesada ───── */
.duplo{font-family:var(--fonte-titulo);letter-spacing:-.03em;line-height:1.04;text-wrap:balance;margin:0}
.duplo .leve{display:block;font-weight:300}
.duplo .forte{display:block;font-weight:600}
.duplo--g{font-size:clamp(2rem,5.4vw,4rem)}
.duplo--m{font-size:clamp(1.7rem,3.8vw,2.75rem)}

/* ── etiqueta em pílula com ponto ───────────────────────────────── */
.pilula{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px 6px 11px;border-radius:999px;
  background:var(--acao-fundo);border:1px solid var(--acao-contorno);
  font-family:var(--fonte-titulo);font-size:.75rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--acao-pressionada);
}
.pilula::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--acao)}
.pilula--escura{background:rgba(239,145,10,.14);border-color:rgba(239,145,10,.4);color:var(--acao)}

/* ── topo de borda a borda ──────────────────────────────────────── */
.palco{position:relative;min-height:min(92vh,860px);display:flex;flex-direction:column;
  color:#fff;overflow:hidden;background:var(--noite)}
.palco__fundo{position:absolute;inset:0}
.palco__fundo img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
/* Duas camadas: uma vertical, que segura o menu em cima e os cartões
   embaixo, e uma da esquerda para a direita, que escurece o lado do
   texto sem apagar o caminhão, que é o que a foto tem de bom. */
.palco__fundo::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(103deg,rgba(16,18,16,.90) 0%,rgba(16,18,16,.62) 38%,rgba(16,18,16,.12) 68%,rgba(16,18,16,0) 100%),
    linear-gradient(180deg,rgba(16,18,16,.62) 0%,rgba(16,18,16,.18) 30%,rgba(16,18,16,.46) 70%,rgba(16,18,16,.88) 100%)}
.palco__conteudo{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;
  gap:clamp(40px,6vh,88px);
  padding-top:clamp(28px,4vw,40px);padding-bottom:clamp(28px,3vw,40px)}

.barra-flutua{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--e-24)}
.barra-flutua__logo{flex:none}
.barra-flutua .botao-vidro{flex:none}
.barra-flutua__logo img{width:clamp(150px,17vw,186px);filter:brightness(0) invert(1)}
.menu-pilula{position:absolute;left:50%;translate:-50% 0;display:flex;gap:4px;padding:5px;border-radius:999px;
  background:var(--vidro);border:1px solid var(--vidro-borda);backdrop-filter:blur(14px)}
.menu-pilula a{padding:9px 16px;border-radius:999px;text-decoration:none;color:rgba(255,255,255,.82);
  font-size:.9375rem;font-weight:500;transition:background-color .15s var(--entrada),color .15s var(--entrada)}
.menu-pilula a:hover{background:rgba(255,255,255,.14);color:#fff}
.menu-pilula a[aria-current="page"]{background:var(--acao);color:var(--preto-900);font-weight:600}
.botao-vidro{
  display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:11px 22px;
  border-radius:999px;background:var(--vidro-forte);color:var(--preto-900);text-decoration:none;
  font-family:var(--fonte-titulo);font-weight:600;font-size:.9375rem;white-space:nowrap;
  transition:transform .15s var(--entrada),background-color .15s var(--entrada)}
.botao-vidro:hover{transform:translateY(-1px);background:#fff}
.botao-vidro svg{width:17px;height:17px}

.palco__miolo{margin-top:auto;max-width:min(100%,62rem)}
.palco__chip{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:7px 16px 7px 12px;margin-bottom:var(--e-24);
  border-radius:999px;background:var(--vidro);border:1px solid var(--vidro-borda);backdrop-filter:blur(14px);
  font-size:.8125rem;color:rgba(255,255,255,.92)}
.palco__chip svg{width:17px;height:17px;stroke:var(--acao);fill:none;stroke-width:1.8;flex:none}
.palco .duplo{color:#fff}
.palco__texto{margin-top:var(--e-20);max-width:52ch;font-size:1.0625rem;color:rgba(255,255,255,.84);line-height:1.5}
.palco__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--e-32)}
.botao-acento{
  display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:999px;
  background:var(--acao);color:var(--preto-900);text-decoration:none;border:0;cursor:pointer;
  font-family:var(--fonte-titulo);font-weight:600;font-size:1rem;
  transition:transform .15s var(--entrada),background-color .15s var(--entrada)}
.botao-acento:hover{transform:translateY(-1px);background:#FFA41F}
.botao-contorno-claro{
  display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:999px;
  background:var(--vidro);border:1px solid var(--vidro-borda);backdrop-filter:blur(14px);
  color:#fff;text-decoration:none;font-family:var(--fonte-titulo);font-weight:600;font-size:1rem;
  transition:background-color .15s var(--entrada)}
.botao-contorno-claro:hover{background:rgba(255,255,255,.2)}

.palco__cartoes{display:flex;gap:12px;margin-top:clamp(32px,5vw,56px);flex-wrap:wrap}
.cartao-vidro{flex:0 1 258px;padding:var(--e-20,20px) var(--e-24);border-radius:14px;
  background:var(--vidro);border:1px solid var(--vidro-borda);backdrop-filter:blur(16px)}
.cartao-vidro b{display:block;font-family:var(--fonte-titulo);font-size:2.25rem;font-weight:500;
  line-height:1;letter-spacing:-.03em;color:#fff}
.cartao-vidro span{display:block;margin-top:8px;font-size:.875rem;color:rgba(255,255,255,.76);line-height:1.4}

/* ── painéis fotográficos de segmento ───────────────────────────── */
.paineis{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-16)}
.painel{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(320px,38vw,440px);padding:var(--e-32);border-radius:var(--raio-g);
  overflow:hidden;text-decoration:none;color:#fff;isolation:isolate}
.painel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .5s var(--entrada)}
.painel::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(16,18,16,.2) 0%,rgba(16,18,16,.5) 52%,rgba(16,18,16,.88) 100%)}
.painel:hover img{transform:scale(1.04)}
.painel__tag{position:absolute;top:var(--e-24);left:var(--e-32);
  padding:6px 14px;border-radius:999px;background:var(--vidro);border:1px solid var(--vidro-borda);
  backdrop-filter:blur(14px);font-family:var(--fonte-titulo);font-size:.6875rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase}
.painel h3{font-family:var(--fonte-titulo);font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:500;
  letter-spacing:-.025em;line-height:1.08}
.painel p{margin-top:10px;max-width:38ch;color:rgba(255,255,255,.84);font-size:1rem}
.painel__ir{margin-top:var(--e-20,20px);display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fonte-titulo);font-weight:600;font-size:.9375rem;color:var(--acao)}
.painel__ir svg{width:17px;height:17px;transition:transform .15s var(--entrada)}
.painel:hover .painel__ir svg{transform:translateX(4px)}

/* ── medidas como lista de fio fino ─────────────────────────────── */
.medidas{border-top:1px solid var(--linha)}
.medida{display:grid;grid-template-columns:7.5rem 1fr auto;gap:var(--e-24);align-items:baseline;
  padding:var(--e-24) 0;border-bottom:1px solid var(--linha);
  transition:background-color .15s var(--entrada)}
.medida:hover{background:var(--superficie-alt)}
.medida__n{font-family:var(--fonte-titulo);font-size:clamp(2rem,3.6vw,2.75rem);font-weight:300;
  letter-spacing:-.04em;line-height:1}
.medida__n sup{font-size:.45em;font-weight:400;vertical-align:super;margin-left:2px}
.medida__o-que b{display:block;font-family:var(--fonte-titulo);font-size:1.0625rem;font-weight:600}
.medida__o-que span{color:var(--tinta-apoio);font-size:1rem}
.medida__preco{text-align:right;font-family:var(--fonte-titulo);font-size:1.25rem;font-weight:600;white-space:nowrap}
.medida__preco small{display:block;font-family:var(--fonte-corpo);font-size:.75rem;font-weight:400;
  color:var(--perigo);letter-spacing:0}
.medida--destaque{background:var(--acao-fundo)}
.medida--destaque:hover{background:var(--acao-fundo)}
.medida__selo{display:inline-block;margin-left:10px;padding:3px 10px;border-radius:999px;
  background:var(--acao);color:var(--preto-900);font-family:var(--fonte-titulo);
  font-size:.6875rem;font-weight:600;letter-spacing:.04em;vertical-align:middle}

/* ── cartões numerados ──────────────────────────────────────────── */
.numerados{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-16)}
.numerado{padding:var(--e-32);border-radius:var(--raio-g);border:1px solid rgba(255,255,255,.14);
  background:var(--noite-2);display:flex;flex-direction:column;gap:10px;min-height:208px}
.numerado__n{font-family:var(--fonte-titulo);font-size:2.75rem;font-weight:300;line-height:1;
  letter-spacing:-.04em;color:var(--acao);margin-bottom:var(--e-16)}
.numerado h3{font-family:var(--fonte-titulo);font-size:1.3125rem;font-weight:600;color:#fff}
.numerado p{color:rgba(255,255,255,.74);font-size:1rem}
.numerado--acento{background:var(--acao);border-color:var(--acao)}
.numerado--acento .numerado__n{color:rgba(22,22,22,.46)}
.numerado--acento h3{color:var(--preto-900)}
.numerado--acento p{color:rgba(22,22,22,.8)}

/* ── processo preso à tela ──────────────────────────────────────── */
.processo{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--e-64);align-items:start}
.processo__fixo{position:sticky;top:var(--e-32);align-self:start}
.processo__barra{display:flex;gap:6px;margin-top:var(--e-32)}
.processo__barra i{height:3px;flex:1;border-radius:999px;background:var(--linha);transition:background-color .3s var(--entrada)}
.processo__barra i.ativo{background:var(--acao)}
.processo__conta{margin-top:12px;font-family:var(--fonte-titulo);font-size:.8125rem;
  letter-spacing:.1em;color:var(--tinta-leve)}
.etapas{display:flex;flex-direction:column;gap:var(--e-24)}
.etapa{display:grid;grid-template-columns:4.5rem 1fr;gap:var(--e-24);align-items:start;
  padding:var(--e-32);border-radius:var(--raio-g);background:var(--superficie);border:1px solid var(--linha)}
.etapa__n{font-family:var(--fonte-titulo);font-size:2.25rem;font-weight:300;line-height:1;
  letter-spacing:-.04em;color:var(--acao-pressionada)}
.etapa h3{font-family:var(--fonte-titulo);font-size:1.3125rem;font-weight:600}
.etapa p{margin-top:8px;color:var(--tinta-apoio)}
.etapa__foto{grid-column:1/-1;margin-top:var(--e-20,20px);border-radius:10px;overflow:hidden}
.etapa__foto img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ── colunas de fio fino ────────────────────────────────────────── */
.colunas-fio{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-64)}
.coluna-fio h3{display:flex;align-items:center;gap:10px;font-family:var(--fonte-titulo);
  font-size:1.25rem;font-weight:600;padding-bottom:var(--e-16);border-bottom:2px solid var(--tinta)}
.coluna-fio--nao h3{border-bottom-color:var(--perigo)}
.coluna-fio h3 svg{width:22px;height:22px;stroke-width:1.7;fill:none;stroke:currentColor}
.coluna-fio--pode h3 svg{color:var(--acao-pressionada)}
.coluna-fio--nao h3 svg{color:var(--perigo)}
.coluna-fio li{padding:var(--e-12) 0;border-bottom:1px solid var(--linha);font-size:1.0625rem}
.coluna-fio__nota{margin-top:var(--e-16);font-size:.9375rem;color:var(--tinta-leve)}

/* ── declaração grande ──────────────────────────────────────────── */
.declaracao{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-64);align-items:center}
.declaracao__frase{font-family:var(--fonte-titulo);font-size:clamp(1.75rem,3.4vw,2.6rem);
  font-weight:300;letter-spacing:-.03em;line-height:1.14;text-wrap:balance}
.declaracao__frase b{font-weight:600}
.declaracao__lista{border-top:1px solid var(--linha)}
.declaracao__lista li{display:flex;justify-content:space-between;gap:var(--e-24);
  padding:var(--e-16) 0;border-bottom:1px solid var(--linha);font-size:1.0625rem}
.declaracao__lista b{font-family:var(--fonte-titulo);font-weight:600;white-space:nowrap}

/* ── telas menores ──────────────────────────────────────────────── */
@media (max-width:1024px){
  .processo{grid-template-columns:1fr;gap:var(--e-32)}
  .processo__fixo{position:static}
  .declaracao,.colunas-fio{gap:var(--e-32)}
}
@media (max-width:1024px){
  .menu-pilula{display:none}
}
@media (max-width:860px){
  .paineis,.numerados,.declaracao,.colunas-fio{grid-template-columns:1fr}
  .palco{min-height:0;padding-bottom:var(--e-16)}
  .palco__miolo{margin-top:var(--e-64)}
}
@media (max-width:620px){
  .medida{grid-template-columns:4.5rem 1fr;row-gap:10px}
  .medida__preco{grid-column:1/-1;text-align:left}
  .etapa{grid-template-columns:1fr;gap:12px;padding:var(--e-24)}
  .palco__acoes .botao-acento,.palco__acoes .botao-contorno-claro{width:100%;justify-content:center}
  .palco__cartoes{gap:10px}
  .cartao-vidro{flex:1 1 100%}
  .barra-flutua__logo img{width:140px}
  .botao-vidro{padding:10px 16px;font-size:.875rem}
  .painel{padding:var(--e-24);min-height:300px}
  .painel__tag{left:var(--e-24)}
}

/* ═══ segunda rodada (25/10) ═══════════════════════════════════════
   Saíram: a escada de cinco tamanhos (a empresa tem uma caçamba só, de
   6 m³) e o preço (varia por localidade). Saiu também a grade de
   cartões numerados, que era o pedaço mais template da página.
   ═══════════════════════════════════════════════════════════════════ */

/* ── a caçamba: duas colunas de verdade ─────────────────────────────
   Antes o cabeçalho ficava preso em 573 px de 1180 e a lista começava
   em 526, sem alinhar com nada: o vazio à direita era sobra, não
   coluna. Agora são duas colunas, e cada lado tem sua borda. */
.cacamba{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(40px,6vw,88px);align-items:start}
.cacamba__lado{min-width:0}
.cacamba__texto{margin-top:var(--e-24);font-size:1.0625rem;color:var(--tinta-apoio);line-height:1.55}
.cacamba__numero{margin-top:clamp(32px,4vw,56px);padding-top:var(--e-32);border-top:1px solid var(--linha)}
.cacamba__n{display:block;font-family:var(--fonte-titulo);font-size:clamp(4.5rem,9vw,7.5rem);
  font-weight:300;line-height:.84;letter-spacing:-.055em}
.cacamba__n sup{font-size:.28em;font-weight:400;vertical-align:super}
.cacamba__eq{display:block;margin-top:var(--e-16);font-size:1.0625rem;color:var(--tinta-apoio)}
.cacamba__pergunta{font-family:var(--fonte-titulo);font-size:1.25rem;font-weight:600;
  padding-bottom:var(--e-16);border-bottom:2px solid var(--tinta)}
.cacamba__acao{margin-top:var(--e-32)}
.cacamba__dica{margin-top:var(--e-12);font-size:.9375rem;color:var(--tinta-leve);max-width:46ch}
.cabe{border-top:1px solid var(--linha)}
.cabe li{display:grid;grid-template-columns:1fr auto;gap:var(--e-24);align-items:baseline;
  padding:var(--e-16) 0;border-bottom:1px solid var(--linha)}
.cabe b{font-family:var(--fonte-titulo);font-weight:600;font-size:1.0625rem}
.cabe span{color:var(--tinta-apoio)}
.cabe em{font-style:normal;font-family:var(--fonte-titulo);font-weight:600;font-size:.9375rem;
  color:var(--acao-pressionada);white-space:nowrap}

/* ── comparação: o jeito comum × o nosso ────────────────────────── */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--linha);
  border-radius:var(--raio-g);overflow:hidden}
.versus__col{padding:var(--e-32)}
.versus__col--comum{background:var(--superficie-alt);color:var(--tinta-apoio)}
.versus__col--nosso{background:var(--superficie);border-left:1px solid var(--linha)}
.versus__topo{display:flex;align-items:center;gap:10px;padding-bottom:var(--e-16);
  margin-bottom:var(--e-8);border-bottom:2px solid currentColor;
  font-family:var(--fonte-titulo);font-size:1.125rem;font-weight:600}
.versus__col--comum .versus__topo{color:var(--tinta-leve)}
.versus__col--nosso .versus__topo{color:var(--acao-pressionada)}
.versus__item{padding:var(--e-16) 0;border-bottom:1px solid var(--linha);min-height:116px}
.versus__item:last-child{border-bottom:0}
.versus__rot{display:block;font-family:var(--fonte-placa,var(--fonte-titulo));font-size:.6875rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-leve);margin-bottom:6px}
.versus__col--nosso .versus__item p{color:var(--tinta);font-weight:500}
.versus__item p{font-size:1.0625rem;line-height:1.45}
@media (max-width:860px){
  .versus{grid-template-columns:1fr}
  .versus__col--nosso{border-left:0;border-top:1px solid var(--linha)}
  .versus__item{min-height:0}
}

/* ── material: busca + grupos por fase ──────────────────────────── */
.busca-material{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:var(--e-32)}
.busca-material input{flex:1 1 300px;min-height:52px;padding:12px 18px;font-family:var(--fonte-corpo);
  font-size:1.0625rem;border:1.5px solid var(--linha);border-radius:999px;background:var(--superficie)}
.busca-material input:focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-color:var(--acao)}
.busca-aviso{align-self:center;font-size:.9375rem;color:var(--tinta-leve)}
.material{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px)}
.grupo{margin-bottom:var(--e-32)}
.grupo h4{font-family:var(--fonte-titulo);font-size:.75rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-leve);margin-bottom:var(--e-8)}
.grupo li{padding:10px 0;border-bottom:1px solid var(--linha);font-size:1.0625rem}
.grupo li[hidden]{display:none}
.material__lado h3{display:flex;align-items:center;gap:10px;font-family:var(--fonte-titulo);
  font-size:1.25rem;font-weight:600;padding-bottom:var(--e-16);margin-bottom:var(--e-24);
  border-bottom:2px solid var(--tinta)}
.material__lado--nao h3{border-bottom-color:var(--perigo)}
.material__lado h3 svg{width:22px;height:22px;stroke-width:1.7;fill:none;stroke:currentColor}
.material__lado--pode h3 svg{color:var(--acao-pressionada)}
.material__lado--nao h3 svg{color:var(--perigo)}
.grupo--nao li{display:grid;grid-template-columns:1fr auto;gap:var(--e-16);align-items:baseline}
.grupo--nao li i{font-style:normal;font-size:.875rem;color:var(--tinta-leve);text-align:right}
.sem-resultado{padding:var(--e-24);background:var(--acao-fundo);border-radius:var(--raio);
  font-size:1.0625rem;color:var(--tinta-apoio)}
@media (max-width:860px){.material{grid-template-columns:1fr}}

/* ── a regra: declaração + o decreto como documento ─────────────────
   Saíram as duas caixas pastel arredondadas lado a lado e a fileira de
   pílulas: é o arranjo mais batido que existe e dava cara de template.
   No lugar, a declaração grande e o decreto tratado como o que é, um
   documento oficial, no mesmo tom escuro que a página usa para prova. */
.regra-topo{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,6vw,88px);align-items:start}
.regra-prosa p{font-size:1.0625rem;line-height:1.6;color:var(--tinta-apoio)}
.regra-prosa p + p{margin-top:var(--e-16);padding-top:var(--e-16);border-top:1px solid var(--linha)}
.regra-prosa strong{color:var(--tinta);font-weight:600}

.decreto-doc{margin-top:clamp(40px,5vw,72px);background:var(--superficie-escura);
  border-radius:var(--raio-g);overflow:hidden;color:#E7E9E4}
.decreto-doc__cabeca{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e-12) var(--e-16);
  padding:var(--e-20) var(--e-32);border-bottom:1px solid rgba(255,255,255,.14)}
.decreto-doc__selo{font-family:var(--fonte-titulo);font-size:.6875rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acao);
  border:1px solid rgba(239,145,10,.5);border-radius:3px;padding:4px 9px}
.decreto-doc__num{font-family:var(--fonte-titulo);font-size:1.125rem;font-weight:600;color:#fff}
.decreto-doc__data{font-size:.8125rem;color:#9EA39B;margin-left:auto}
.decreto-doc__grade{display:grid;grid-template-columns:repeat(6,1fr)}
.decreto-doc__grade > div{padding:var(--e-32) var(--e-24);border-left:1px solid rgba(255,255,255,.14)}
.decreto-doc__grade > div:first-child{border-left:0}
.decreto-doc dt{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#9EA39B;
  margin-bottom:10px;line-height:1.3}
.decreto-doc dd{margin:0;font-family:var(--fonte-titulo);font-size:clamp(1.25rem,2vw,1.6rem);
  font-weight:300;letter-spacing:-.02em;color:#fff;line-height:1.1}
/* O 10 m³ é o teto da lei, não o tamanho da caçamba. Sem a nossa medida
   do lado, quem lê rápido entende que a empresa tem caçamba de 10 m³. */
.decreto-doc dd small{display:block;margin-top:8px;font-family:var(--fonte-corpo);font-size:.8125rem;
  font-weight:600;letter-spacing:0;line-height:1.35;color:var(--acao)}

/* ── bairros por região ─────────────────────────────────────────── */
.regioes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-16)}
.regiao{padding:var(--e-24);background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--raio-g);display:flex;flex-direction:column;
  transition:border-color .15s var(--entrada),box-shadow .15s var(--entrada)}
.regiao:hover{border-color:var(--acao);box-shadow:var(--sombra-1)}
.regiao--casa{background:var(--acao-fundo);border-color:var(--acao-contorno)}
.regiao__topo{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e-12);
  padding-bottom:var(--e-12);margin-bottom:var(--e-12);border-bottom:1px solid var(--linha)}
.regiao__nome{font-family:var(--fonte-titulo);font-size:1.1875rem;font-weight:600}
.regiao__conta{font-family:var(--fonte-titulo);font-size:.8125rem;color:var(--tinta-leve)}
.regiao__bairros{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:.9375rem}
.regiao__bairros a{color:var(--tinta-apoio);text-decoration:none;border-bottom:1px solid transparent}
.regiao__bairros a:hover{color:var(--acao-pressionada);border-bottom-color:var(--acao)}
.regiao__nota{margin-top:auto;padding-top:var(--e-16);font-size:.875rem;color:var(--tinta-leve)}
.regiao--casa .regiao__nota{color:var(--acao-pressionada);font-weight:600}
@media (max-width:1024px){.regioes{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.regioes{grid-template-columns:1fr}}

/* ── perguntas por tema ─────────────────────────────────────────── */
.tema{margin-bottom:var(--e-48)}
.tema__nome{font-family:var(--fonte-titulo);font-size:.75rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acao-pressionada);margin-bottom:var(--e-12)}

/* ── celular, por último ────────────────────────────────────────────
   Regra de celular tem que vir DEPOIS da regra base: media query não
   aumenta especificidade, então quem aparece por último no arquivo é
   quem vale. Foi assim que a lista 'cabe' e o botão do topo ficaram
   empurrando a página 167 px para fora da tela a 375 px. */
@media (max-width:620px){
  .botao-vidro{white-space:normal;min-width:0;padding:10px 14px;font-size:.875rem}
  .barra-flutua{gap:10px}
  .cacamba{grid-template-columns:1fr;gap:var(--e-48)}
  .cacamba__acao{width:100%}
  .cabe li{grid-template-columns:1fr;row-gap:6px}
  .cabe em{white-space:normal}
  .busca-material input{flex:1 1 100%}
  .grupo--nao li{grid-template-columns:1fr;row-gap:2px}
  .grupo--nao li i{text-align:left}
  .decreto li{width:100%}
}

@media (max-width:1024px){
  .decreto-doc__grade{grid-template-columns:repeat(3,1fr)}
  .decreto-doc__grade > div:nth-child(4){border-left:0}
  .decreto-doc__grade > div:nth-child(n+4){border-top:1px solid rgba(255,255,255,.14)}
}
@media (max-width:860px){
  .regra-topo{grid-template-columns:1fr;gap:var(--e-32)}
}
@media (max-width:620px){
  .decreto-doc__grade{grid-template-columns:1fr 1fr}
  .decreto-doc__grade > div{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding:var(--e-24)}
  .decreto-doc__grade > div:nth-child(-n+2){border-top:0}
  .decreto-doc__grade > div:nth-child(even){border-left:1px solid rgba(255,255,255,.14)}
  .decreto-doc__data{margin-left:0;width:100%}
}

/* ── cabeçalho de seção em duas colunas ─────────────────────────────
   O .cabeca-secao do sistema é limitado a 72 caracteres. Com isso o
   título espremia numa coluna estreita e sobrava metade da largura
   vazia, sem nada alinhado: parecia sobra, não composição. Agora o
   título ocupa a coluna da esquerda e o texto de apoio a da direita,
   alinhados pela base. Vale para todas as seções de uma vez. */
.cabeca-secao{display:grid;grid-template-columns:1.35fr 1fr;
  gap:clamp(32px,5vw,80px);align-items:end;
  max-width:none;margin-bottom:clamp(40px,5vw,64px)}
.cabeca-secao__titulo{min-width:0}
.cabeca-secao .intro{margin-top:0;max-width:44ch;padding-bottom:6px}
.cabeca-secao .duplo{max-width:none}
@media (max-width:860px){
  .cabeca-secao{grid-template-columns:1fr;gap:var(--e-20);align-items:start}
  .cabeca-secao .intro{max-width:60ch}
}

/* ── barra fixa com efeito vidro, acompanhando a rolagem ───────────
   Pedido do Wallyson (26/10): o menu segue a página inteira e ganha
   vidro. Sobre a foto do topo ela é transparente com texto claro;
   passado o topo, vira vidro claro com texto escuro. */
.barra-fixa{position:fixed;inset:0 0 auto;z-index:60;
  padding-block:clamp(14px,1.8vw,20px);
  transition:background-color .25s var(--entrada),box-shadow .25s var(--entrada)}
.barra-fixa--solida{background:rgba(255,255,255,.74);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 1px 0 var(--linha)}

/* o topo perde a barra de dentro, então precisa de espaço para ela */
.palco__conteudo{padding-top:clamp(92px,10vw,124px)}

/* sobre a foto: claro. depois do topo: escuro. */
.barra-fixa--solida .barra-flutua__logo img{filter:none}
.barra-fixa--solida .menu-pilula{background:rgba(22,22,22,.05);border-color:var(--linha)}
.barra-fixa--solida .menu-pilula a{color:var(--tinta-apoio)}
.barra-fixa--solida .menu-pilula a:hover{background:rgba(22,22,22,.07);color:var(--tinta)}
.barra-fixa--solida .menu-pilula a[aria-current="page"]{background:var(--acao);color:var(--preto-900)}
.barra-fixa--solida .botao-vidro{background:var(--acao);color:var(--preto-900);box-shadow:var(--sombra-1)}
.barra-fixa--solida .botao-vidro:hover{background:var(--acao-pressionada);color:#fff}

/* ── WhatsApp só aparece quando a pessoa sobe com a rolagem ────────
   Fica fora da tela no topo e enquanto desce; volta ao subir. */
.zap{transition:transform .28s var(--entrada),opacity .2s var(--entrada)}
.zap--oculto{transform:translateY(160%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .zap--oculto{transform:none;opacity:0}
}

/* ═══ páginas internas (26/10): obra, bairros e índice de bairros ═══
   Saíram da primeira linguagem (cabeçalho branco, foto num quadro,
   tabela, pílulas) e passam a usar as mesmas peças da página principal. */

/* topo de foto mais baixo: a página interna vai direto ao assunto */
.palco--curto{min-height:min(78vh,700px)}
.palco--curto .palco__miolo{max-width:min(100%,52rem)}

/* trilha sobre a foto */
.trilha-clara{margin-bottom:var(--e-24);font-size:.875rem;color:rgba(255,255,255,.7)}
.trilha-clara ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.trilha-clara li::after{content:"/";margin-left:8px;color:rgba(255,255,255,.4)}
.trilha-clara li:last-child::after{content:""}
.trilha-clara a{color:rgba(255,255,255,.86);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.trilha-clara a:hover{color:#fff;border-bottom-color:var(--acao)}
.trilha-clara [aria-current="page"]{color:#fff}

/* três ideias lado a lado, cada uma com o fio grosso em cima */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.trio__item{padding-top:var(--e-20,20px);border-top:2px solid var(--tinta)}
.trio__item:first-child{border-top-color:var(--acao)}
.trio__item h3{font-family:var(--fonte-titulo);font-size:1.25rem;font-weight:600;letter-spacing:-.01em}
.trio__item p{margin-top:10px;font-size:1.0625rem;line-height:1.55;color:var(--tinta-apoio)}

/* lista de provas no bloco escuro */
.provas-fio{margin-top:var(--e-32);border-top:1px solid rgba(255,255,255,.14)}
.provas-fio li{padding:var(--e-16) 0;border-bottom:1px solid rgba(255,255,255,.14);
  font-size:1.0625rem;line-height:1.5;color:#B6BAB2}
.provas-fio b{display:block;font-family:var(--fonte-titulo);font-weight:600;color:#fff;margin-bottom:2px}

/* bairros vizinhos como lista de fio fino com seta */
.vizinhos-fio{display:grid;grid-template-columns:repeat(4,1fr);gap:0 var(--e-32);border-top:1px solid var(--linha)}
.vizinhos-fio a{display:flex;align-items:center;justify-content:space-between;gap:var(--e-12);
  min-height:56px;padding:var(--e-12) 0;border-bottom:1px solid var(--linha);
  font-family:var(--fonte-titulo);font-size:1.0625rem;font-weight:500;color:var(--tinta);text-decoration:none;
  transition:color .15s var(--entrada)}
.vizinhos-fio a svg{width:18px;height:18px;flex:none;color:var(--acao-pressionada);
  transition:transform .15s var(--entrada)}
.vizinhos-fio a:hover{color:var(--acao-pressionada)}
.vizinhos-fio a:hover svg{transform:translateX(4px)}
.vizinhos-fecho{margin-top:var(--e-32);display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-16) var(--e-24)}
.vizinhos-fecho p{color:var(--tinta-apoio);font-size:1.0625rem}

/* índice: a região inteira, com todos os bairros */
.regioes--todas .regiao__bairros{gap:8px 14px;font-size:1rem}
.regioes--todas .regiao__bairros a{color:var(--tinta)}

/* celular das páginas internas, por último (ver a nota mais acima) */
@media (max-width:1024px){
  .vizinhos-fio{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .trio{grid-template-columns:1fr;gap:var(--e-32)}
  .vizinhos-fio{grid-template-columns:1fr 1fr}
  .palco--curto{min-height:0}
}
@media (max-width:620px){
  .vizinhos-fio{grid-template-columns:1fr}
  .vizinhos-fecho .botao-acento{width:100%;justify-content:center}
  .bairros-fecho .botao-acento{width:100%;justify-content:center}
  .fecho__acoes .botao-acento{width:100%;justify-content:center}
}

/* ── o que vai dentro, compacto (26/10) ─────────────────────────────
   As duas listas de fio fino ocupavam mais de mil pixels de altura e
   liam como lista de supermercado. Agora cada lado é um quadro: o que
   pode ir vira etiquetas lado a lado, o que não pode ir mostra o motivo
   embaixo do nome. A busca continua filtrando os mesmos itens. */
.material{align-items:stretch}
.material__lado{padding:clamp(24px,3vw,36px);background:var(--superficie);
  border:1px solid var(--linha);border-radius:var(--raio-g)}
.material__lado--pode{border-top:4px solid var(--acao)}
.material__lado--nao{border-top:4px solid var(--perigo)}
.material__lado h3{border-bottom:1px solid var(--linha)}
.material__lado--pode .grupo ul{display:flex;flex-wrap:wrap;gap:8px}
.material__lado--pode .grupo li{padding:7px 14px;border:1px solid var(--linha);border-radius:999px;
  background:var(--superficie-alt);font-size:.9375rem;line-height:1.3}
.material__lado--nao .grupo li{display:block;padding:10px 0}
.material__lado--nao .grupo li span{display:block;font-size:1rem}
.material__lado--nao .grupo li i{display:block;margin-top:2px;text-align:left;font-size:.875rem;color:var(--tinta-leve)}
.material .grupo{margin-bottom:var(--e-24)}
.material .grupo:last-child{margin-bottom:0}
.material .grupo li:last-child{border-bottom:0}

/* ═══ pente fino (26/10) ═══════════════════════════════════════════
   Medido em 20 tamanhos de tela. Cada regra diz o defeito que corrige. */

/* a lista 'cabe' escorregava a página para o lado entre 621 e 860 px:
   a grade ficava em duas colunas e a etiqueta não quebrava linha */
@media (max-width:860px){ .cacamba{grid-template-columns:1fr;gap:var(--e-48)} }
@media (max-width:1180px){ .cabe li{grid-template-columns:1fr;row-gap:4px} .cabe em{white-space:normal} }

/* o aviso vazio da busca ocupava espaço e deixava o campo 10 px mais
   curto que os quadros; agora mora dentro do campo, à direita */
.busca-material{position:relative}
.busca-material input{flex-basis:100%;padding-right:clamp(18px,24%,220px)}
.busca-aviso{position:absolute;right:22px;top:26px;translate:0 -50%;pointer-events:none}
.busca-aviso:empty{display:none}

/* os dois quadros do material terminam na mesma linha, e o pé do
   'pode ir' leva para o WhatsApp em vez de sobrar vazio */
.material__lado{display:flex;flex-direction:column}
.material__pe{margin-top:auto;padding-top:var(--e-24);border-top:1px solid var(--linha);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-12) var(--e-16)}
.material__pe p{font-size:1rem;color:var(--tinta-apoio)}
.material__pe p b{color:var(--tinta)}

/* a coluna presa do processo ficava escondida atrás da barra de vidro */
.processo__fixo{top:128px}

/* painéis e caçamba são duas seções brancas seguidas: 192 px de vazio */
.secao--paineis{padding-bottom:0}

/* o botão de ligar vinha do sistema antigo, de canto quadrado */
.botao--contorno{border-radius:999px;min-height:52px;padding:14px 26px;background:transparent;
  border:1.5px solid var(--acao-contorno);font-family:var(--fonte-titulo);font-weight:600}

/* letra abaixo de 12 px nas etiquetas */
.painel__tag,.versus__rot,.decreto-doc__selo{font-size:.75rem}

/* a seta girada das perguntas passava da linha da direita */
.pergunta summary{padding-right:4px}

/* 'ver mais bairros' no fim de cada região da página principal */
.regiao__mais{font-weight:600;color:var(--acao-pressionada) !important}

/* topo no tablet: três cartões na mesma linha, sem um sozinho embaixo */
@media (min-width:621px) and (max-width:1024px){ .cartao-vidro{flex:1 1 0;min-width:0} }

/* sem a coluna presa, a barrinha de progresso não acompanha nada */
@media (max-width:1024px){ .processo__barra,.processo__conta{display:none} }

/* links de bairro com altura de dedo em tela de toque */
@media (max-width:1199px){ .regiao__bairros{gap:0 14px} .regiao__bairros a,.regiao__bairros span{display:inline-block;padding-block:8px} }

@media (max-width:620px){
  .busca-aviso{position:static;translate:none;padding-left:18px}
  .busca-material input{padding-right:18px}
  .cacamba__acao{justify-content:center}
  .material__pe .botao-acento{width:100%;justify-content:center}
  .fecho__acoes .botao--contorno,.vizinhos-fecho .botao--contorno{width:100%;justify-content:center}
  /* rodapé em duas colunas: eram quase duas telas de blocos empilhados */
  .rodape__grade{grid-template-columns:1fr 1fr}
  .rodape__marca,.rodape__grade > div:last-child{grid-column:1/-1}
}

/* link que pula para uma seção não pode parar com o título atrás da barra fixa */
html{scroll-padding-top:120px}

/* ── menu no celular e no tablet ────────────────────────────────────
   Até 1024 px a pílula do menu some; sem isto, quem estava no celular
   só chegava em Bairros e Obra pelo rodapé. */
.botao-menu{display:none}
@media (max-width:1024px){
  .barra-flutua__logo{margin-right:auto}
  .botao-menu{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:999px;
    background:var(--vidro);border:1px solid var(--vidro-borda);backdrop-filter:blur(14px);color:#fff;cursor:pointer;
    font:600 .9375rem var(--fonte-titulo)}
  .botao-menu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .barra-fixa--solida .botao-menu,.barra-fixa--menu-aberto .botao-menu{background:rgba(22,22,22,.05);border-color:var(--linha);color:var(--tinta)}
  .menu-pilula.aberto{display:flex;flex-direction:column;gap:2px;position:absolute;top:calc(100% + 10px);left:0;right:0;translate:none;
    padding:8px;border-radius:18px;background:#fff;border:1px solid var(--linha);box-shadow:var(--sombra-2);backdrop-filter:none}
  .menu-pilula.aberto a{color:var(--tinta);padding:14px 16px;font-size:1.0625rem}
  .menu-pilula.aberto a:hover{background:var(--superficie-alt);color:var(--tinta)}
  .barra-fixa--menu-aberto{background:rgba(255,255,255,.92);backdrop-filter:blur(18px)}
  .barra-fixa--menu-aberto .barra-flutua__logo img{filter:none}
}
@media (max-width:620px){
  /* só o ícone, para caber ao lado da logo e do botão de orçamento */
  .botao-menu{padding:0;width:46px;justify-content:center}
  .botao-menu span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

/* a pílula do topo ficava a 8 px da barra entre 861 e 1100 px */
.palco__conteudo{padding-top:clamp(100px,calc(9.15vw + 24px),125px)}

/* o contorno laranja-claro sumia sobre o fundo laranja-claro do fecho */
.fecho .botao--contorno{background:#fff;border-color:rgba(22,22,22,.28)}

/* bloco escuro da documentação: a foto acompanha a altura do texto */
.patio__grade--docs{align-items:stretch}
.patio__grade--docs .patio__foto{height:100%}
.patio__grade--docs .patio__foto img{height:100%;aspect-ratio:auto;object-fit:cover}

/* o último tema somava 48 px ao respiro da seção */
.tema:last-child{margin-bottom:0}

/* nome e destaque na mesma base */
.declaracao__lista li{align-items:baseline}

/* links do rodapé com altura de dedo */
@media (max-width:1199px){ .rodape li{padding:0} .rodape li a{display:inline-block;padding-block:10px} }

/* tablet: passos em duas colunas em vez de uma linha de 130 letras;
   o trio continua em três colunas até o celular */
@media (min-width:621px) and (max-width:1024px){
  .etapas{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .etapa{grid-template-columns:1fr;gap:12px}
  .etapa:last-child:nth-child(odd){grid-column:1/-1}
  .trio{grid-template-columns:repeat(3,1fr);gap:var(--e-24)}
}
@media (max-width:860px){ .patio__grade--docs .patio__foto img{height:auto;aspect-ratio:3/2} }
@media (max-width:620px){ .declaracao__lista li{flex-direction:column;gap:2px} }
@media (max-width:1024px){
  .barra-fixa--menu-aberto .botao-vidro{background:var(--acao);color:var(--preto-900)}
}

/* ── pente fino das páginas de bairro ───────────────────────────── */
/* botão com nome de bairro comprido: texto centralizado se quebrar */
.palco__acoes a,.fecho__acoes a{text-align:center;text-wrap:balance}
/* contorno laranja-claro sumia sobre o cinza: contorno escuro e fundo branco em todo lugar */
.botao--contorno{background:#fff;border-color:rgba(22,22,22,.28)}
.botao--contorno:hover{background:#fff;border-color:var(--tinta)}
/* 'no Parque Oeste Industrial.' cabe em uma linha no computador */
.palco--curto .palco__miolo{max-width:min(100%,56rem)}
/* índice: cartão com poucos bairros não estica até a altura do maior */
.regioes--todas{align-items:start}
.regioes--todas .regiao__nota{margin-top:var(--e-16)}
.regioes--todas .regiao__bairros a{text-decoration:underline;text-decoration-color:var(--linha);text-underline-offset:4px}
.regioes--todas .regiao__bairros a:hover{text-decoration-color:var(--acao)}
@media (max-width:1199px){
  .trilha-clara a{display:inline-block;padding-block:10px}
  .trilha-clara{margin-bottom:var(--e-12)}
}
@media (max-width:860px){ .cacamba__dica{max-width:none} }