/* =======================================================================
   DellaTorre Engenharia — folha de estilo do site
   Gerado por organiza_site.py a partir do index.html de uma peça (v3.47).

   A ordem das regras é a original. Nada foi movido, renomeado, agrupado ou
   minificado: mover uma regra aqui pode mudar a cascata, então as seções
   abaixo apenas marcam onde cada parte começa.

   ÍNDICE
     1.  Reset mínimo (era o primeiro <style> do HTML)
     2.  Variáveis e tema (claro/escuro, movimento reduzido)
     3.  Barra fixa, guias e botão de tema
     4.  Bloco-título (carimbo da prancha)
     5.  Painéis das seções
     6.  Abertura (capa) e placa da logo
     7.  Números (obras entregues, anos)
     8.  Listas, cartões e colunas
     9.  Obras por quadra
     10. Fotos
     11. Mapas (moldura, carregamento sob demanda)
     12. Contato
     13. Chat que leva ao WhatsApp
     14. Rodapé
     15. CSS herdado dos mapas (Tocantins e Palmas)
     16. Mapas no estilo quadro: quadras, Plano Diretor, ponte, pinos, legenda
     17. Ajustes dos mapas para o papel frio da v3
   ======================================================================= */

/* ---------------------------------------------------------------------
   1. Reset mínimo
   Estava no primeiro <style> do <head>, antes do CSS das fontes. Mantido
   aqui na mesma posição relativa para não alterar a cascata.
   --------------------------------------------------------------------- */
  /* reset mínimo — o mesmo que o Claude injeta ao publicar, para o arquivo
     independente ficar idêntico ao que você já viu */
  html{ color-scheme:light dark; }
  body{ margin:0; }
  img{ max-width:100%; }
  [hidden]{ display:none !important; }

/* ---------------------------------------------------------------------
   2 a 17. Folha do site (o segundo <style> do <head>, na ordem original)
   Os comentários de seção originais foram mantidos.
   --------------------------------------------------------------------- */
/* ======================================================================
   DellaTorre Engenharia — v3.0
   Direção: prancha técnica. Neutros frios de papel vegetal, laranja da
   marca como único marcador, retículas hairline, bloco-título como
   estrutura. Archivo (títulos) · IBM Plex Sans (texto) · IBM Plex Mono (dados).
   ====================================================================== */
:root{
  --paper:#EFF2F1; --surface:#FFFFFF; --surface-2:#E4EAE8;
  --text:#111619; --ink:#111619; --text-muted:#5C6B6F; --line:#C8D2CF; --border:#C8D2CF;
  --accent:#D9761A; --accent-strong:#D9761A; --accent-deep:#9E520D; --pin:#D9761A;
  --accent-text:#9E520D;   /* laranja legivel em texto no tema claro: 5,08 */
  --land-1:#DFE7E2; --land-2:#CBD7D1; --land-border:#8B9D97; --water:#6C97AA;
  --shadow:0 1px 2px rgba(17,22,25,.07);
  --grid:rgba(17,22,25,.05);
  --f-disp:'Archivo','Archivo Narrow',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1316; --surface:#161D21; --surface-2:#1B2328;
    --text:#E7ECEA; --ink:#0A0E10; --text-muted:#93A2A5; --line:#27332F; --border:#27332F;
    --accent:#EF9440; --accent-strong:#EF9440; --accent-deep:#F0A75F; --pin:#EF9440;
    --accent-text:#EF9440;   /* no escuro o laranja da marca ja da 7,99 */
    --land-1:#1F2A2D; --land-2:#182123; --land-border:#5A6D71; --water:#3E606F;
    --shadow:0 1px 2px rgba(0,0,0,.35);
    --grid:rgba(231,236,234,.05);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1316; --surface:#161D21; --surface-2:#1B2328;
  --text:#E7ECEA; --ink:#0A0E10; --text-muted:#93A2A5; --line:#27332F; --border:#27332F;
  --accent:#EF9440; --accent-strong:#EF9440; --accent-deep:#F0A75F; --pin:#EF9440;
  --accent-text:#EF9440;   /* no escuro o laranja da marca ja da 7,99 */
  --land-1:#1F2A2D; --land-2:#182123; --land-border:#5A6D71; --water:#3E606F;
  --shadow:0 1px 2px rgba(0,0,0,.35);
  --grid:rgba(231,236,234,.05);
  color-scheme:dark;
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent); color:var(--ink); }
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }
.mono{ font-family:var(--f-mono); }
h1,h2,h3,h4{ font-family:var(--f-disp); font-weight:600; margin:0; text-wrap:balance; letter-spacing:-0.015em; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

.shell{ max-width:1240px; margin:0 auto; padding-inline:clamp(16px,3.5vw,40px); }

/* ---------- barra fixa + guias ---------- */
.dt-bar{
  position:sticky; top:0; z-index:40; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.dt-bar-in{
  display:flex; align-items:stretch; gap:clamp(12px,3vw,32px);
  max-width:1240px; margin:0 auto; padding-inline:clamp(16px,3.5vw,40px);
}
.dt-brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  padding-block:12px; flex:0 0 auto;
}
.dt-brand img{ width:30px; height:auto; }
.dt-brand b{ font-family:var(--f-disp); font-weight:700; font-size:1.02rem; letter-spacing:-0.02em; display:block; line-height:1.1; }
.dt-brand span{ font-family:var(--f-mono); font-size:0.6rem; letter-spacing:0.22em; color:var(--accent-text); display:block; }
.dt-tabs{
  position:relative; display:flex; gap:0; margin-inline:auto;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.dt-tabs::-webkit-scrollbar{ display:none; }
.dt-tabs button{
  appearance:none; background:none; border:0; cursor:pointer; white-space:nowrap;
  font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--text-muted); padding:0 clamp(10px,1.6vw,20px); min-height:54px;
  transition:color .16s ease;
}
.dt-tabs button:hover{ color:var(--text); }
.dt-tabs button[aria-selected="true"]{ color:var(--text); }
.dt-ind{
  position:absolute; bottom:-1px; height:2px; background:var(--accent);
  transition:left .26s cubic-bezier(.4,0,.2,1), width .26s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.dt-tema{
  align-self:center; flex:0 0 auto; margin-left:2px;
  appearance:none; cursor:pointer; background:none;
  border:1px solid var(--line); border-radius:2px; padding:7px 8px;
  color:var(--text-muted); display:flex; align-items:center;
  transition:color .16s ease, border-color .16s ease;
}
.dt-tema:hover{ color:var(--text); border-color:var(--text-muted); }
.dt-tema svg{ width:17px; height:17px; display:block; fill:currentColor; }
.dt-tema .ico-lua{ display:none; }
.dt-tema.is-escuro .ico-lua{ display:block; }
.dt-tema.is-escuro .ico-sol{ display:none; }
.dt-cta{
  align-self:center; flex:0 0 auto; text-decoration:none;
  font-family:var(--f-mono); font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase;
  background:none; color:var(--text); padding:9px 15px; border-radius:2px;
  border:1px solid var(--accent); transition:background .16s ease, color .16s ease;
}
.dt-cta:hover{ background:var(--accent); color:var(--ink); }
@media (max-width:900px){ .dt-tema{
  align-self:center; flex:0 0 auto; margin-left:2px;
  appearance:none; cursor:pointer; background:none;
  border:1px solid var(--line); border-radius:2px; padding:7px 8px;
  color:var(--text-muted); display:flex; align-items:center;
  transition:color .16s ease, border-color .16s ease;
}
.dt-tema:hover{ color:var(--text); border-color:var(--text-muted); }
.dt-tema svg{ width:17px; height:17px; display:block; fill:currentColor; }
.dt-tema .ico-lua{ display:none; }
.dt-tema.is-escuro .ico-lua{ display:block; }
.dt-tema.is-escuro .ico-sol{ display:none; }
.dt-tabs{ margin-inline:0; } }


/* ---------- C1: no celular as cinco guias nao cabem ----------
   Medido a 390 px: a regua tinha 395 px de conteudo em 166 px visiveis, e
   "A empresa" e "Contato" ficavam inteiramente fora da tela, sem nenhuma
   indicacao de que existiam. Cinco itens em 390 px nao vao caber nunca, entao
   a regua vira lista suspensa. No desktop nada muda. */
.dt-menu{ display:none; }
.cta-curto{ display:none; }
@media (max-width:820px){
  .dt-bar-in{ position:relative; }
  .dt-menu{
    display:flex; align-items:center; gap:8px; align-self:center; margin-left:auto;
    appearance:none; background:none; cursor:pointer; color:var(--text);
    border:1px solid var(--line); border-radius:2px; padding:8px 12px;
    font-family:var(--f-mono); font-size:0.74rem; letter-spacing:0.12em; text-transform:uppercase;
  }
  .dt-menu svg{ width:16px; height:16px; fill:currentColor; flex:0 0 auto; }
  .dt-menu[aria-expanded="true"]{ border-color:var(--accent); }
  .dt-tabs{
    position:absolute; top:100%; left:0; right:0; z-index:45;
    display:none; flex-direction:column; margin:0; overflow:visible;
    background:var(--surface); border-bottom:1px solid var(--line);
    box-shadow:0 14px 30px rgba(0,0,0,.20);
  }
  .dt-tabs.aberto{ display:flex; }
  .dt-tabs button{
    width:100%; text-align:left; min-height:52px; font-size:0.8rem;
    padding-inline:clamp(16px,3.5vw,40px);
    border-bottom:1px solid var(--line); border-left:3px solid transparent;
  }
  .dt-tabs button:last-of-type{ border-bottom:0; }
  .dt-tabs button[aria-selected="true"]{
    border-left-color:var(--accent); background:var(--surface-2); color:var(--text);
  }
  .dt-ind{ display:none; }
  /* o CTA do cabecalho e a unica acao de contato sempre visivel (o flutuante
     saiu), entao ele aparece tambem no celular — com rotulo curto, e o menu
     so com o icone, para os quatro itens caberem em 390 px */
  .dt-menu span{ display:none; }
  .dt-menu{ padding:8px 10px; }
  .cta-longo{ display:none; }
  .cta-curto{ display:inline; }
  .dt-cta{ padding:8px 12px; }
  .dt-bar-in{ gap:10px; }
}




/* ---------- filtros de situacao e de tipo (aba Obras) ----------
   Pedido do cliente em 17/09. A contagem dentro de cada botao mostra a divisao
   entre em obra e concluidas sem precisar clicar. Uma quadra mista (2
   entregues + 2 em obra) atende aos dois filtros. */
.filtros{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
  margin-bottom:clamp(16px,2.4vw,24px);
}
.fgrupo{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.fgrupo[hidden]{ display:none; }
.flabel{
  font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--text-muted); margin-right:2px;
}
.fchip{
  appearance:none; cursor:pointer; background:none; color:var(--text);
  border:1px solid var(--line); border-radius:2px; padding:7px 12px;
  font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.08em;
  display:inline-flex; align-items:center; gap:7px;
  transition:border-color .16s ease, background .16s ease;
}
.fchip i{
  font-style:normal; font-size:0.7rem; color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.fchip i:empty{ display:none; }
.fchip:hover{ border-color:var(--text-muted); }
/* o estado ativo nao e so cor: ganha borda laranja, fundo E peso, para nao
   depender de quem distingue pouco o laranja do cinza */
.fchip.on{ border-color:var(--accent); background:var(--surface-2); font-weight:600; }
.fchip.on i{ color:var(--accent-text); }
.fconta{
  font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.08em;
  color:var(--text-muted); margin-left:auto;
}
.obras-galeria .ob-card[hidden], .obras-sem-foto .ob-card[hidden]{
  display:none !important;
}
/* o aviso de vazio fica FORA do container filtrado: dentro dele ele quebrava a
   checagem `if(!lista.childNodes.length)` do construtor da lista */
.fvazio{
  padding:22px; color:var(--text-muted); font-size:0.93rem;
  background:var(--surface); border:1px solid var(--line);
}
@media (max-width:620px){ .fconta{ margin-left:0; width:100%; } }

/* ---------- bloco-título (carimbo da prancha) ---------- */
.dt-rail{
  border-bottom:1px solid var(--line); background:var(--surface-2);
  font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-muted);
}
.dt-rail-in{
  /* era flex com overflow-x:auto e white-space:nowrap: a 1280 px os quatro
     itens pediam 1285 px em 1240 e a faixa rolava por dentro (o telefone
     ficava escondido). Grade de quatro colunas nao depende do texto caber. */
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 14px;
  max-width:1240px; margin:0 auto; padding-inline:clamp(16px,3.5vw,40px);
}
.dt-rail .f{
  display:flex; gap:8px; align-items:baseline; padding:8px 14px 8px 0;
  white-space:normal; min-width:0;
}
.dt-rail .f + .f{ padding-left:18px; border-left:1px solid var(--line); }
.dt-rail .f i{ font-style:normal; opacity:.62; }
.dt-rail .f b{ font-weight:500; color:var(--text); }
.dt-rail .f b a{ color:var(--accent-text); text-decoration:none; }
.dt-rail .f b a:hover{ text-decoration:underline; }
/* ---------- C2: a faixa superior era cortada ----------
   A 390 px so o primeiro item aparecia (e ja estourando a borda) e os outros
   tres ficavam em 405-620 px, fora da tela — inclusive o telefone. Duas
   colunas no celular, uma abaixo de 420 px, com o rotulo em cima do valor. */
@media (max-width:820px){
  .dt-rail-in{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 14px; overflow:visible;
  }
  .dt-rail .f{
    display:flex; flex-direction:column; align-items:flex-start; gap:1px;
    white-space:normal; padding:7px 0;
  }
  .dt-rail .f + .f{ padding-left:0; border-left:0; }
  .dt-rail .f:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:420px){
  .dt-rail-in{ grid-template-columns:1fr; }
  .dt-rail .f:nth-child(n+2){ border-top:1px solid var(--line); }
}



/* ---------- painéis ---------- */
.dt-panel[hidden]{ display:none !important; }
.blk{ padding-block:clamp(40px,6vw,76px); border-top:1px solid var(--line); }
/* ritmo entre secoes: um tom alternado, em secao alternada. Sao tres tons no
   total na pagina (papel, este, e o cartao), o suficiente para o olho separar
   as secoes sem a pagina virar colagem. */
.blk.tint{ background:var(--surface-2); }
.dt-panel section.blk:nth-of-type(even){ background:var(--surface-2); }
.blk:first-child{ border-top:0; }
/* o max-width:64ch estava no BLOCO, e ch se mede no font-size dele (16 px):
   dava 652 px e todo h2 quebrava em duas linhas numa pagina de 1240 px.
   Agora cada um tem a sua medida: o titulo mais largo, o paragrafo na
   medida de leitura. */
.blk-head{ display:flex; flex-direction:column; gap:10px;
  margin-bottom:clamp(24px,3.5vw,40px); }
.blk-head h2{ max-width:min(100%, 28em); }
.blk-head p{ max-width:min(100%, 41em); }
.blk-head .tag{
  font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--accent-text); display:flex; align-items:center; gap:10px;
}
.blk-head .tag::before{ content:''; width:22px; height:1px; background:var(--accent); }
.blk-head h2{ font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.16; }
.blk-head p{ color:var(--text-muted); }

/* ---------- abertura ---------- */
.open-grid{
  display:grid; grid-template-columns:1.25fr 0.75fr; gap:clamp(24px,4vw,56px);
  align-items:end; padding-block:clamp(44px,7vw,88px);
  position:relative;
}
.open-grid::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg, #000 10%, transparent 88%);
}
.open-grid /* balance reparte as linhas do titulo sozinho: com <br> fixo a
   ultima linha saia com uma palavra so ("Tocantins.") */
h1{ text-wrap:balance; 
  font-size:clamp(2.1rem,5.4vw,3.5rem); line-height:1.04; letter-spacing:-0.03em;
}
.open-grid h1 em{ font-style:normal; color:var(--accent-text); }
/* a frase de marca saiu do h1 (que agora diz o que a empresa faz e
   onde) e virou o mote: corpo grande, logo abaixo do titulo. */
.open-mote{
  margin-top:14px; font-family:var(--f-disp); font-weight:500;
  font-size:clamp(1.06rem,1.5vw,1.26rem); line-height:1.34;
  color:var(--text); max-width:34ch;
}
.open-lead{ margin-top:14px; color:var(--text-muted); font-size:1.04rem; max-width:56ch; }
.open-acts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.bt{
  font-family:var(--f-mono); font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase;
  padding:12px 18px; border-radius:2px; text-decoration:none; border:1px solid var(--accent);
  background:var(--accent); color:var(--ink); cursor:pointer; transition:background .16s ease, color .16s ease;
}
.bt.ghost{ background:none; color:var(--text); border-color:var(--line); }
.bt.ghost:hover{ border-color:var(--text); }
.bt:hover{ background:var(--accent-deep); border-color:var(--accent-deep); }
.stamp{
  border:1px solid var(--line); background:var(--surface); padding:22px;
}
/* a placa acompanha o tema: no escuro entra a versão clara da logo
   (o nome DellaTorre é quase preto no arquivo original) */
.stamp img{ width:100%; height:auto; max-width:230px; margin:0 auto 16px; display:block; }
.stamp .lg-escuro{ display:none; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .stamp .lg-claro{ display:none; }
  :root:not([data-theme="light"]) .stamp .lg-escuro{ display:block; }
}
:root[data-theme="dark"] .stamp .lg-claro{ display:none; }
:root[data-theme="dark"] .stamp .lg-escuro{ display:block; }
:root[data-theme="light"] .stamp .lg-claro{ display:block; }
:root[data-theme="light"] .stamp .lg-escuro{ display:none; }
.stamp .slogan{
  font-family:var(--f-disp); font-style:italic; font-weight:500; text-align:center;
  color:var(--text-muted); font-size:0.94rem; padding-bottom:16px; border-bottom:1px solid var(--line);
}
.stamp dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:7px 14px; padding-top:14px;
  font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; }
.stamp dt{ color:var(--text-muted); }
.stamp dd{ margin:0; text-align:right; color:var(--text); font-variant-numeric:tabular-nums; }
@media (max-width:860px){ .open-grid{ grid-template-columns:1fr; align-items:start; }
  /* o cartao do logotipo vinha antes do titulo e comia a primeira tela do
     celular; o titulo e os botoes ficavam abaixo da dobra */
  .stamp{ order:2; } }

/* ---------- números ---------- */
.figs{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.figs.tres{ grid-template-columns:repeat(3,1fr); }
.figs .fg{ padding:20px 18px 20px 0; }
.figs .fg + .fg{ padding-left:18px; border-left:1px solid var(--line); }
.figs b{
  display:block; font-family:var(--f-disp); font-weight:700; font-size:clamp(2rem,4.2vw,2.9rem);
  letter-spacing:-0.03em; line-height:1; font-variant-numeric:tabular-nums;
}
.figs span{ display:block; margin-top:8px; font-size:0.88rem; color:var(--text-muted); }
@media (max-width:700px){
  .figs, .figs.tres{ grid-template-columns:1fr; }
  .figs .fg{ padding-left:0 !important; border-left:0 !important; }
  .figs .fg + .fg{ border-top:1px solid var(--line); }
  .figs .fg:nth-child(odd){ padding-left:0; border-left:0; }
  .figs .fg:nth-child(n+3){ border-top:1px solid var(--line); }
}

/* ---------- listas e cartões ---------- */
.cols{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.cols.c2{ grid-template-columns:repeat(2,1fr); }
.cols.c3{ grid-template-columns:repeat(3,1fr); }
.cols.c4{ grid-template-columns:repeat(4,1fr); }
/* auto-fit com minimo de 212 px punha as CINCO areas numa linha so, com
   20 caracteres por linha de texto. Tres colunas no desktop dao ~44. */
.cols.flex{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1000px){ .cols.flex{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .cols.flex{ grid-template-columns:1fr; } }
.cols > *{ background:var(--paper); padding:clamp(18px,2.4vw,26px); }
/* com contagem impar sobrava uma celula vazia mostrando o fundo da grade,
   e parecia defeito (era o caso dos 5 servicos em 2 colunas e das 5 areas
   em 3). O ultimo item ocupa o que sobrou. */
/* ATENCAO: span 2 numa grade de UMA coluna nao preenche o resto — cria uma
   segunda coluna implicita. Sem os @media abaixo, o celular saia com duas
   colunas de 167 px e 14 caracteres por linha. */
@media (min-width:561px){
  .cols.c2 > *:last-child:nth-child(odd){ grid-column:span 2; }
}
@media (min-width:641px) and (max-width:1000px){
  .cols.flex > *:last-child:nth-child(odd){ grid-column:span 2; }
}
@media (min-width:1001px){
  .cols.flex > *:last-child:nth-child(3n+2){ grid-column:span 2; }
}
.cols h3{ font-size:1.02rem; margin-bottom:8px; }
/* o item que ocupa a linha inteira (contagem impar) chegava a 121
   caracteres por linha; a medida de leitura para o cartao fica em ~60 */
.cols p{ color:var(--text-muted); font-size:0.9rem; max-width:min(100%, 62ch); }
.cols .k{
  font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent-text); display:block; margin-bottom:12px;
}
/* quatro etapas em quatro colunas davam 26 caracteres por linha. Em 2x2 a
   sequencia continua legivel (01-02 / 03-04) e a linha dobra de tamanho. */
.cols.c4{ grid-template-columns:repeat(2,1fr); }
@media (max-width:860px){ .cols.c3{ grid-template-columns:1fr; } }
@media (max-width:560px){ .cols.c4, .cols.c2{ grid-template-columns:1fr; } }

/* era texto | ficha. Com a foto da sede sao tres colunas no desktop e
   uma pilha no celular, na ordem texto -> foto -> ficha. */
.prose{ display:grid; grid-template-columns:1.15fr 0.7fr 0.95fr;
  gap:clamp(22px,3vw,40px); }
.sede{ margin:0; }
.sede img{
  display:block; width:100%; height:auto; aspect-ratio:3/4;
  object-fit:cover; border:1px solid var(--border);
}
.sede figcaption{
  margin-top:9px; font-family:var(--f-mono); font-size:0.72rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted);
}
/* ATENCAO ao limite de baixo: a regra que colapsa a prosa em UMA coluna no
   celular (@media max-width:860px) vem ANTES desta na folha. Media query nao
   soma especificidade, entao sem o `min-width` esta regra vencia tambem em
   390 px e o texto ficava numa coluna de 182 px. E a terceira vez que esse
   mesmo erro aparece neste site (v3.22, v3.35 e aqui): regra nova depois de
   uma media query antiga tem de declarar as DUAS pontas da faixa. */
@media (min-width:861px) and (max-width:1080px){
  /* em janela media a foto de 3:4 aperta as tres colunas: ela desce e
     ocupa a largura da ficha, ao lado do texto */
  .prose{ grid-template-columns:1.1fr 0.9fr; }
  .sede{ grid-column:2; }
  .sede img{ aspect-ratio:4/3; }
}
@media (max-width:860px){
  /* uma coluna: texto, foto, ficha, empilhados. A foto volta ao retrato, que
     e o formato original, e ganha um teto de altura para nao tomar a tela. */
  .sede img{ aspect-ratio:3/4; max-height:62vh; width:auto; }
}
.prose p{ color:var(--text-muted); max-width:62ch; }
.prose p + p{ margin-top:14px; }
.specs{ border-top:1px solid var(--line); }
.specs div{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); align-items:baseline; }
/* o item do fundador tem nome e profissao em duas linhas */
.specs .v em{ display:block; font-style:normal; font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); margin-top:2px; }
.specs dt, .specs .k{
  font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted);
}
.specs .v{ font-size:0.9rem; text-align:right; }
@media (max-width:860px){ .prose{ grid-template-columns:1fr; } }

/* ---------- cartao de obra sem foto (item 5 do cliente, 17/09) ----------
   Mesmo padrao do cartao da galeria: mesma moldura, mesmo nome, mesmo local,
   mesmos chips. A diferenca e o lugar da foto, que vira uma faixa baixa com o
   desenho de casa e a marca "Foto em breve" — a mesma casa que a miniatura do
   mapa mostra quando a obra ainda nao tem registro.
   A grade e mais densa (4 colunas) e o cartao e baixo de proposito: a
   preferencia do cliente e a parte das fotos, e as 16 obras sem foto cabem em
   ~680 px de altura, contra ~1200 px da lista descrita que saiu daqui. */
.sf-tit{
  font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-muted);
  margin:clamp(22px,3vw,34px) 0 12px; display:flex; align-items:center; gap:12px;
}
.sf-tit::after{ content:''; flex:1; height:1px; background:var(--line); }
.sf-tit[hidden]{ display:none !important; }
.obras-sem-foto{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.obras-sem-foto[hidden]{ display:none !important; }
/* o cartao cortado continua no HTML (o Google le os 99); some so da tela */
.obras-sem-foto .ob-card.sf-corte{ display:none; }
.sf-mais{
  display:block; width:100%; margin-top:14px; padding:13px 18px;
  font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--accent-text); cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border);
}
.sf-mais:hover{ border-color:var(--accent); }
.sf-mais:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sf-mais[hidden]{ display:none !important; }
.ob-card.sf{ cursor:default; }
.ob-card.sf:hover{ border-color:var(--border); transform:none; }
/* ATENCAO ao seletor: `.sf-foto` sozinho perde para `.ob-foto`, que vem DEPOIS
   na folha (a CSS da galeria e colada no fim) e tem a mesma especificidade —
   a faixa herdava display:block, aspect-ratio:4/3 e o fundo escuro var(--ink),
   com o desenho da casa fora do centro e quase invisivel. Com
   `.ob-card.sf .ob-foto` (0,3,0) a ordem deixa de decidir. */
.ob-card.sf .ob-foto{
  display:flex; align-items:center; justify-content:center; position:relative;
  aspect-ratio:auto; height:78px; background:var(--paper);
  border-bottom:1px dashed var(--line);
}
.ob-card.sf .ob-foto svg{ width:46px; height:32px; opacity:.45; }
.ob-card.sf .ob-foto svg path{ stroke:var(--text-muted); }
.ob-card.sf .sf-tag{
  position:absolute; bottom:6px; right:7px; font-family:var(--f-mono);
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-muted);
}
.ob-card.sf .ob-info{ padding:10px 12px 12px; }
.ob-card.sf .ob-nome{ font-size:0.92rem; }
.ob-card.sf .ob-chips{ margin-top:7px; gap:5px; }
/* eu tinha encolhido o chip para 0.56rem (9 px) no celular, para caber dois
   por linha no cartao estreito. Chip que diz "Em obra" e informacao: ele
   quebra linha, nao diminui. */
@media (max-width:1000px){ .obras-sem-foto{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .obras-sem-foto{ grid-template-columns:repeat(2,1fr); } }

/* ---------- fotos ---------- */
.shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.shot{
  aspect-ratio:4/3; border:1px dashed var(--line); background:var(--surface-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:var(--text-muted); text-align:center; padding:14px;
}
.shot .n{ font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; opacity:.7; }
.shot .c{ font-size:0.85rem; }
@media (max-width:860px){ .shots{ grid-template-columns:repeat(2,1fr); } }

/* ---------- mapas ---------- */
.maps-wrap{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; align-items:start; }
.maps-wrap > .map-card{ grid-column:span 2; }
@media (max-width:980px){ .maps-wrap{ grid-template-columns:1fr; } .maps-wrap > .map-card{ grid-column:1; } }
.map-lazy{ position:relative; }
.map-skel{
  width:100%; aspect-ratio:300/462; border:1px solid var(--line);
  background:linear-gradient(105deg, var(--surface-2) 34%, var(--surface) 50%, var(--surface-2) 66%);
  background-size:280% 100%; animation:skel 1.2s linear infinite;
}
@keyframes skel{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
.map-lazy.ready .map-skel{ display:none; }

/* ---------- contato ---------- */
.contato{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,36px); align-items:start; }
/* a proporcao do bloco Portfolio era um style= no elemento, que vence a
   media query e travava duas colunas ate em 390 px */
.contato.c-port{ grid-template-columns:0.9fr 1.1fr; }
@media (max-width:860px){
  .contato, .contato.c-port{ grid-template-columns:1fr; }
}
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.cards > *{ background:var(--paper); padding:18px; text-decoration:none; display:block; }
.cards .k{ display:block; font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted); }
.cards .v{ display:block; margin-top:6px; font-size:0.92rem; overflow-wrap:anywhere; }
.cards a.on{ background:var(--surface); }
.cards a.on .v{ color:var(--accent-text); }
.cards .off .v{ color:var(--text-muted); opacity:.7; }
@media (max-width:560px){ .cards{ grid-template-columns:1fr; } }
.appeal{ border:1px solid var(--accent); padding:clamp(20px,3vw,30px); background:var(--surface); }
.appeal h3{ font-size:1.2rem; }
.appeal p{ color:var(--text-muted); margin:10px 0 20px; font-size:0.93rem; }

/* ---------- chat que leva ao WhatsApp ---------- */
.zap-body{ padding:16px; display:flex; flex-direction:column; gap:12px; }
.zap-bubble{
  background:var(--surface-2); border:1px solid var(--line); border-radius:2px;
  padding:12px 13px; font-size:0.89rem; color:var(--text); line-height:1.5;
}
.zap-field{ display:flex; flex-direction:column; gap:5px; }
.zap-field label{
  font-family:var(--f-mono); font-size:0.82rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--text-muted);
}
.zap-field input, .zap-field select, .zap-field textarea{
  font-family:var(--f-body); font-size:0.92rem; color:var(--text);
  background:var(--paper); border:1px solid var(--line); border-radius:2px;
  padding:9px 10px; width:100%;
}
.zap-field textarea{ min-height:76px; resize:vertical; }
.zap-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.zap-send{
  appearance:none; cursor:pointer; border:0; border-radius:2px;
  background:var(--accent); color:var(--ink); padding:13px 16px;
  font-family:var(--f-mono); font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:9px;
  transition:background .16s ease;
}
.zap-send:hover{ background:var(--accent-deep); }
.zap-send svg{ width:16px; height:16px; fill:currentColor; }
.zap-alt{
  font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-muted); text-align:center; line-height:1.9;
}
.zap-alt a{ color:var(--accent-text); text-decoration:none; }
.zap-inline{ border:1px solid var(--line); background:var(--surface); border-radius:2px; }
.zap-inline .zap-body{ padding:clamp(16px,2.4vw,22px); }
.zap-inline .zap-row{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width:620px){ .zap-inline .zap-row, .zap-row{ grid-template-columns:1fr; } }

/* ---------- rodapé ---------- */
footer{ border-top:1px solid var(--line); background:var(--surface-2); }
.foot-in{
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between;
  padding-block:22px;
}
.foot-in img{ width:24px; }
.foot-brand{ display:flex; align-items:center; gap:9px; font-family:var(--f-disp); font-weight:600; font-size:0.92rem; }
.foot-meta{ font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); }
.foot-meta a{ color:var(--accent-text); text-decoration:none; }
.versao{ color:var(--accent-text); }

/* ---------- eyebrow usado pelo modal herdado ---------- */
.eyebrow{ font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-text); }

/* ====================== CSS herdado dos mapas ====================== */

  .mono{
    font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  }

  .maps-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; align-items:start; }

  .maps-grid > .map-card{ grid-column:span 2; }
@media (max-width:820px){ .maps-grid > .map-card{ grid-column:1; }}
@media (max-width:820px){ .maps-grid{ grid-template-columns:1fr; }}


  /* ---------- PAINEL DE CIDADES ---------- */
  .cities-panel{
    border:1px solid var(--border); border-radius:4px; background:var(--surface);
    display:flex; flex-direction:column; overflow:hidden;
  }

  .cities-head{ padding:18px 22px; border-bottom:1px solid var(--border); }

  .cities-head h3{ font-size:1.1rem; }

  .cities-head .place{ font-size:0.82rem; color:var(--text-muted); margin-top:2px; }

  .cities-list{ list-style:none; margin:0; padding:6px 20px 10px; }

  .cities-list li{
    display:flex; align-items:baseline; justify-content:space-between; gap:10px;
    padding:9px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent);
  }

  .cities-list li:last-child{ border-bottom:none; }

  .cities-list .c-name{ font-size:0.9rem; }

  .cities-list .c-num{
    font-family:'IBM Plex Mono', monospace; font-size:0.9rem; font-weight:500;
    color:var(--accent-strong); white-space:nowrap;
  }

  .cities-foot{ padding:14px 22px 18px; border-top:1px solid var(--border); font-size:0.82rem; color:var(--text-muted); }

  .cities-foot .mono{ font-family:'IBM Plex Mono', monospace; color:var(--text); }


  .map-card{
    border:1px solid var(--border); border-radius:4px; background:var(--surface);
    overflow:hidden; display:flex; flex-direction:column;
  }

  .map-card-head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:18px 22px; border-bottom:1px solid var(--border);
  }

  .map-card-head h3{ font-size:1.1rem; }

  .map-card-head .place{ font-size:0.82rem; color:var(--text-muted); margin-top:2px; }

  .illus-tag{
    font-family:'IBM Plex Mono', monospace; font-size:0.62rem; letter-spacing:0.09em;
    text-transform:uppercase; color:var(--pin); border:1px solid var(--pin);
    padding:4px 9px; border-radius:100px; white-space:nowrap;
  }

  .map-svg-wrap{
    position:relative; background:var(--surface-2);
    background-image:
      linear-gradient(color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px);
    background-size:22px 22px;
  }

  .map-svg-wrap svg{ display:block; width:100%; height:auto; }

  .map-shape{ stroke:var(--land-border); stroke-width:1.5; stroke-linejoin:round; }

  .map-river-real{ fill:none; stroke:var(--water); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0.85; }

  /* modern marker: soft halo + surface-badge ring + core dot */
  .marker-halo{ fill:var(--pin); opacity:0.16; transition:opacity .2s ease, fill .15s ease; }

  .marker-ring{
    fill:var(--surface); stroke:var(--pin); stroke-width:1.8;
    filter:drop-shadow(0 2px 5px rgba(20,18,16,0.28)); transition:stroke .15s ease;
  }

  .marker-dot{ fill:var(--pin); transition:fill .15s ease; }

  .ref-mark{ fill:var(--text-muted); r:2.1px; transition:fill .15s ease, r .15s ease; filter:drop-shadow(0 1px 1.5px rgba(20,18,16,0.3)); }

  .ref-ring{ fill:none; stroke:var(--text-muted); stroke-width:1; opacity:0.45; r:4px; transition:stroke .15s ease, r .15s ease; }

  .poi-ref:hover .ref-mark, .poi-ref.active .ref-mark, .ref-city:hover .ref-mark, .ref-city.active .ref-mark{ r:2.6px; }

  .pin-label{
    font-family:'IBM Plex Mono', monospace; font-size:5.6px; letter-spacing:0.03em; fill:var(--text);
    paint-order:stroke fill; stroke:var(--surface); stroke-width:2.3px; stroke-linejoin:round;
    transition:opacity .15s ease, fill .15s ease;
  }

  .pin-label.capital{ font-size:6.4px; font-weight:600; }

  .lbl-detail{ opacity:0; fill:var(--pin); font-weight:600; }

  .poi{ cursor:default; }

  /* rótulos de referência ficam fixos: não trocam no hover e não capturam o mouse */
  .poi-ref{ pointer-events:none; }

  .poi:hover .marker-halo, .poi.active .marker-halo{ opacity:0.32; fill:var(--accent-strong); }

  .poi:hover .marker-ring, .poi.active .marker-ring{ stroke:var(--accent-strong); }

  .poi:hover .marker-dot, .poi.active .marker-dot{ fill:var(--accent-strong); }

  .poi:hover .ref-mark, .poi.active .ref-mark{ fill:var(--pin); }

  .poi:hover .ref-ring, .poi.active .ref-ring{ stroke:var(--pin); }

  .obra-pin:hover .lbl-main, .obra-pin.active .lbl-main{ opacity:0; }

  .obra-pin:hover .lbl-detail, .obra-pin.active .lbl-detail{ opacity:1; }

  .poi-ref .lbl-main{ font-weight:600; }

  .map-legend{ display:flex; flex-wrap:wrap; gap:16px; padding:14px 22px; border-top:1px solid var(--border); }

  .map-legend .item{ display:flex; align-items:center; gap:7px; font-size:0.78rem; color:var(--text-muted); }

  .map-legend .swatch{ width:11px; height:11px; border-radius:50%; flex:none; }

  .map-legend .swatch.obra-sw{ background:var(--accent-strong); border-radius:50%; }

  .map-legend .obras-palmas-aviso{ font-style:normal; opacity:0.75; margin-left:4px; }

  .map-legend .swatch.land{ background:linear-gradient(135deg, var(--land-1), var(--land-2)); border:1px solid var(--land-border); }

  .map-legend .swatch.water{ background:var(--water); }

  .map-legend .swatch.pin{ background:var(--pin); }

  .map-legend .swatch.ref{ background:var(--text); }

  .map-legend .swatch.quadra{ background:none; border:1px solid var(--land-border); border-radius:1px; opacity:0.7; }

  .map-legend .swatch.avenida{ background:var(--land-border); opacity:0.6; border-radius:2px; height:3px; align-self:center; }

  .map-legend .swatch.rodovia{ background:var(--text-muted); opacity:0.5; border-radius:2px; width:14px; height:4px; align-self:center; }

  .map-legend .swatch.empreend{ background:color-mix(in srgb, var(--accent-strong) 40%, transparent); border:1px solid var(--accent-strong); }

  .map-legend .swatch.urban{ background:color-mix(in srgb, var(--pin) 40%, var(--land-1)); border:1px solid var(--pin); }

  .map-legend .swatch.dashed{
    background:none; border-top:2px dashed var(--land-border); border-radius:0;
    height:0; width:14px; align-self:center;
  }

  .map-card-foot{ padding:12px 22px 16px; font-size:0.8rem; color:var(--text-muted); }

  .maps-note{ margin-top:0; font-size:0.86rem; color:var(--text-muted); max-width:70ch; }


  /* ---------- MUNICIPALITY BORDERS (Tocantins) ---------- */
  .muni-borders{ fill:none; stroke:var(--land-border); stroke-width:0.4; opacity:0.28; stroke-linejoin:round; pointer-events:none; }

  .ref-city .lbl-main, .ref-city .lbl-detail{ font-size:5.1px; }

  .tier-minor .lbl-main, .tier-minor .lbl-detail{ font-size:4.8px; }

  .muni-name{
    font-family:'IBM Plex Mono', monospace; font-size:4.1px; letter-spacing:0.12em;
    text-transform:uppercase; fill:var(--text-muted); opacity:0.5; pointer-events:none;
  }

  .muni-name.is-district{ font-size:5.8px; fill:var(--land-border); opacity:0.85; }

  .district-borders{
    fill:none; stroke:var(--land-border); stroke-width:0.9; stroke-dasharray:4 3;
    opacity:0.7; stroke-linejoin:round; pointer-events:none;
  }

  .city-faint{
    font-family:'IBM Plex Mono', monospace; font-size:3.2px; letter-spacing:0em;
    fill:var(--text-muted); opacity:0.66; pointer-events:none;
    paint-order:stroke fill; stroke:var(--surface-2); stroke-width:1px; stroke-linejoin:round;
  }
@media (max-width:820px){
    .city-faint{ display:none; }
    .city-faint.pri{ display:block; font-size:5.4px; stroke-width:2.1px; opacity:0.7; }
    .pin-label{ font-size:9px; stroke-width:3.4px; }
    .pin-label.capital{ font-size:10px; }
    .ref-city .lbl-main, .ref-city .lbl-detail{ font-size:8.2px; }
    .tier-minor .lbl-main, .tier-minor .lbl-detail{ font-size:7.8px; }
    .muni-name{ font-size:6.6px; }
    .muni-name.is-orla{ font-size:5px; }
    .muni-name.is-parque{ font-size:5px; }
    .muni-name.is-celula, .muni-name.is-equip,
    .muni-name.is-cond{ visibility:hidden; }
    .pd-quadras{ stroke-width:0.4; opacity:0.3; }}

  .empreendimentos{ pointer-events:none; }

  .empreend{ fill:var(--pin); fill-opacity:0.05; stroke:var(--pin); stroke-width:0.5; stroke-opacity:0.3; stroke-linejoin:round; }

  .empreend-lbl{
    font-family:'IBM Plex Mono', monospace; font-size:3.2px; letter-spacing:0.05em; text-transform:uppercase; fill:var(--text-muted); opacity:0.6;
    paint-order:stroke fill; stroke:var(--surface); stroke-width:1.1px; stroke-linejoin:round;
  }
@media (max-width:820px){ .empreend-lbl{ font-size:4.6px; stroke-width:1.8px; letter-spacing:0.02em; }}

  /* ---------- MAPA DE PALMAS: rótulos discretos ---------- */
  .pd-card .pin-label{
    font-size:3.6px; letter-spacing:0.09em; text-transform:uppercase; font-weight:500;
    fill:var(--text-muted); stroke-width:1.4px;
  }

  .pd-card .sec-min .pin-label{ font-size:3.0px; letter-spacing:0.06em; }
@media (max-width:820px){ .pd-card .sec-min .pin-label{ font-size:4.4px; } .pd-card .sec-min .lbl-detail{ display:none; }}

  .pd-card .lbl-detail{ fill:var(--accent-strong); text-transform:none; letter-spacing:0.03em; }

  .pd-card .ref-ring{ r:3.1px; stroke-width:1.2; opacity:0.45; }

  .pd-card .ref-mark{ r:1.5px; }

  .pd-card .ref-mark{ fill:var(--text-muted); opacity:0.8; }

  .pd-card .poi:hover .ref-mark, .pd-card .poi.active .ref-mark{ fill:var(--accent-strong); opacity:1; }
@media (max-width:820px){
    .pd-card .pin-label{ font-size:5.4px; letter-spacing:0.05em; stroke-width:2.1px; }}

  /* ---------- OBRAS EM PALMAS (pinos gerados a partir dos endereços) ---------- */
  .obras-palmas .obra-lbl{
    font-family:'IBM Plex Mono', monospace; font-size:3.1px; letter-spacing:0.04em;
    fill:var(--accent-strong); opacity:0.95; pointer-events:none;
    paint-order:stroke fill; stroke:var(--surface); stroke-width:1.3px; stroke-linejoin:round;
  }

  .obras-palmas .marker-halo{ fill:var(--accent-strong); opacity:0.18; }

  .obras-palmas .marker-ring{ stroke:var(--accent-strong); }

  .obras-palmas .marker-dot{ fill:var(--accent-strong); }

  .obras-palmas .is-exemplo .marker-ring{ stroke-dasharray:2.4 2; }

  .obras-palmas .is-exemplo .marker-halo{ opacity:0.09; }
@media (max-width:820px){ .obras-palmas .obra-lbl{ font-size:4.6px; stroke-width:1.9px; }}

  /* a quadra é identificada pelo número que a cidade usa (509, 407, 706, 803),
     não pelo código oficial do Plano Diretor: menos tinta no mapa e é o que o
     cliente fala. O número vale para qualquer bloco da grade — residencial,
     comercial ou de serviço: 803 Sul é a AC SO 81, 712 Sul é a ASR SE 75. */
  .quadra-lbl{
    font-family:'IBM Plex Mono', monospace; font-size:3.3px; letter-spacing:0.01em;
    font-variant-numeric:tabular-nums;
    fill:#8E9BA0; opacity:0.62; pointer-events:none;
    paint-order:stroke fill; stroke:var(--surface); stroke-width:1.1px; stroke-linejoin:round;
  }
@media (max-width:820px){
    .quadra-lbl{ font-size:4.3px; stroke-width:1.6px; opacity:0.7; }
    .quadra-lbl.sm{ display:none; }}
@media (max-width:560px){
    .quadra-lbl{ font-size:5.4px; stroke-width:2px; opacity:0.74; }}

  .avenidas{ pointer-events:none; }

  .avenida{ fill:none; stroke:var(--land-border); stroke-width:1.1; opacity:0.55; stroke-linecap:round; }

  .avenida-lbl{
    font-family:'IBM Plex Mono', monospace; font-size:3.3px; letter-spacing:0.1em; text-transform:uppercase;
    fill:var(--land-border); opacity:0.8;
    paint-order:stroke fill; stroke:var(--surface); stroke-width:1.6px; stroke-linejoin:round;
  }

  /* o eixo fica fora do plano, num trecho vazio: pode ser mais discreto */
  .avenida-lbl.av-eixo{ opacity:0.5; }
@media (max-width:820px){ .avenida-lbl.av-eixo{ font-size:3.6px; }}
@media (max-width:820px){ .avenida-lbl{ font-size:4.8px; stroke-width:2px; letter-spacing:0.04em; }}

  .rodovia{ fill:var(--text-muted); opacity:0.42; }

  .rod-badge rect{ fill:var(--surface); stroke:var(--text-muted); stroke-width:0.7; opacity:0.95; }

  .rod-badge text{ font-family:'IBM Plex Mono', monospace; font-size:5.2px; letter-spacing:0.04em; fill:var(--text-muted); }
@media (max-width:820px){ .rod-badge rect{ width:30px; x:-15px; height:13px; y:-6.5px; } .rod-badge text{ font-size:7.6px; }}

  .pd-water{ fill:var(--water); opacity:0.17; }

  .pd-land{ stroke:none; }

  .pd-quadras{ fill:none; stroke:var(--land-border); stroke-width:0.22; opacity:0.42; stroke-linejoin:round; pointer-events:none; }

  .pd-shore{ fill:none; stroke:var(--water); stroke-width:0.9; opacity:0.4; stroke-linecap:round; stroke-linejoin:round; }

  .urban-regions{ pointer-events:none; }

  .pd-zona{ stroke:none; }

  .pd-zona.z-norte{ fill:var(--pin); fill-opacity:0.10; }

  .pd-zona.z-sul{ fill:var(--pin); fill-opacity:0.055; }

  .pd-contorno{ fill:none; stroke:var(--pin); stroke-width:0.7; stroke-opacity:0.55; stroke-linejoin:round; }

  .muni-name.is-orla{ fill:var(--water); opacity:0.72; font-size:3.5px; }

  /* o parque tem nome, e ali o nome diz mais que o número da quadra */
  .muni-name.is-parque{ fill:#7F9C79; opacity:0.85; font-size:3.5px; letter-spacing:0.06em; }

  /* nome que mora DENTRO de uma célula de ~15 unidades: fonte e
     espaçamento menores, senão o nome sai da quadra que ele nomeia */
  .muni-name.is-celula{ fill:#8BA884; opacity:0.95; font-size:2.4px; letter-spacing:0.02em; }

  .muni-name.is-equip{ fill:#A7B3B8; opacity:0.9; font-size:2.4px; letter-spacing:0.02em; }

  /* condomínio no meio da malha densa: laranja da marca, como os
     outros empreendimentos, mas no tamanho que cabe dentro da quadra */
  .muni-name.is-cond{ fill:var(--accent-strong); opacity:0.92; font-size:2.4px; letter-spacing:0.02em; }


  .map-svg-wrap{ position:relative; }

  .map-thumb{
    position:absolute; z-index:5; width:132px;
    background:var(--surface); border:1px solid var(--border); border-radius:5px;
    box-shadow:var(--shadow); padding:6px; pointer-events:none;
    opacity:0; transform:translateY(4px); transition:opacity .15s ease, transform .15s ease;
  }

  .map-thumb.show{ opacity:1; transform:translateY(0); }

  .map-thumb .thumb-img{
    width:100%; aspect-ratio:4/3; border-radius:3px; background:var(--ink);
    display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
  }

  .map-thumb .thumb-img svg{ width:52%; opacity:0.9; }

  /* foto real no balão do pino e no cartão grande */
  .map-thumb .thumb-img{ overflow:hidden; }

  .map-thumb .thumb-real{ width:100%; height:100%; object-fit:cover; display:block; }

  .map-thumb .thumb-real[hidden]{ display:none; }

  .obra-modal-img{ overflow:hidden; }

  .obra-modal-img .modal-real{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  }

  .obra-modal-img .modal-real[hidden]{ display:none; }

  /* setas e contador das fotos, dentro da imagem do cartão */
  .modal-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:38px; height:54px; font-size:1.5rem; line-height:1; cursor:pointer;
    color:#F3EFE7; background:rgba(16,20,22,0.55);
    border:1px solid rgba(243,239,231,0.3);
  }

  .modal-nav.prev{ left:10px; }

  .modal-nav.next{ right:10px; }

  .modal-nav:hover{ background:rgba(16,20,22,0.8); border-color:var(--accent); color:var(--accent); }

  .modal-nav[hidden]{ display:none !important; }

  .modal-cont{
    position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:2;
    font-family:'IBM Plex Mono', monospace; font-size:0.66rem; letter-spacing:0.12em;
    color:#F3EFE7; background:rgba(16,20,22,0.62); padding:3px 9px;
  }

  .modal-cont[hidden]{ display:none !important; }
@media (max-width:560px){
    .modal-nav{ width:34px; height:46px; font-size:1.2rem; }}

  .map-thumb .thumb-cap{ margin-top:6px; font-size:0.68rem; color:var(--text-muted); line-height:1.3; }

  .map-thumb .thumb-cap b{ display:block; color:var(--text); font-size:0.74rem; font-family:'Fraunces',serif; font-weight:600; }

  .map-thumb .thumb-tag{
    display:inline-block; margin-top:3px; font-family:'IBM Plex Mono',monospace; font-size:0.56rem;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--pin);
  }


  .obra-modal{
    position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
    padding:24px; background:rgba(20,18,16,0.68); opacity:0; visibility:hidden;
    transition:opacity .2s ease; backdrop-filter:blur(2px);
  }

  .obra-modal.open{ opacity:1; visibility:visible; }

  .obra-modal-card{
    width:100%; max-width:560px; background:var(--surface); border-radius:6px; overflow:hidden;
    box-shadow:0 30px 70px -20px rgba(0,0,0,0.5); transform:translateY(10px); transition:transform .2s ease;
  }

  .obra-modal.open .obra-modal-card{ transform:translateY(0); }

  .obra-modal-img{
    aspect-ratio:16/9; background:var(--ink); display:flex; align-items:center; justify-content:center; position:relative;
  }

  .obra-modal-img .grid-lines{ position:absolute; inset:0; background-image:linear-gradient(rgba(243,239,231,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(243,239,231,0.07) 1px, transparent 1px); background-size:20px 20px; }

  .obra-modal-img svg{ width:22%; position:relative; opacity:0.9; }

  .obra-modal-body{ padding:26px 28px 28px; }

  .obra-modal-body .eyebrow{ margin-bottom:10px; }

  .obra-modal-body h3{ font-size:1.4rem; margin-bottom:8px; }

  .obra-modal-body p{ color:var(--text-muted); font-size:0.94rem; max-width:48ch; }

  .obra-modal-close{
    position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
    background:rgba(20,18,16,0.55); color:#F3EFE7; border:none; cursor:pointer;
    font-size:1.1rem; line-height:1; display:flex; align-items:center; justify-content:center;
  }

  .obra-modal-close:hover{ background:rgba(20,18,16,0.8); }

/* ---- mapas no estilo quadro: terra escura, separações em cinza claro ---- */
.map-svg-wrap{
  --land-1:#414A4F; --land-2:#313A3E; --land-border:#9CA8AD;
  --water:#33566E; --surface:#1F2528; --surface-2:#2E373B;
  --text:#EEF2F3; --text-muted:#C8D1D5; --ink:#171B1E;
  border-bottom:1px solid var(--line);
  /* o fundo (fora do território) mais escuro que a terra: a silhueta aparece
     pelo contraste, então o contorno pode ser fino e não engole os nomes */
  background-color:#191F22;
}
.map-shape{ stroke-width:0.6; stroke-opacity:0.75; }
.muni-borders{ stroke-width:0.5; opacity:0.5; }
.city-faint{ opacity:0.72; }
.muni-name{ opacity:0.6; }
.pd-malha{
  /* malha urbana (setores do IBGE): textura de ruas dentro das quadras.
     Cinza mais apagado e traço mais fino que as quadras oficiais, para
     ficar por baixo na hierarquia visual. */
  fill:none; stroke:#7E888D; stroke-width:0.22; opacity:0.62;
  stroke-linejoin:round; pointer-events:none;
}
/* quadras com mais definição: o traço separa uma da vizinha */
.pd-quadras{ stroke:#C2CED3; stroke-width:0.42; opacity:0.92; }
/* célula que é área verde, e não quadra: 204 Norte (Parque dos Povos
   Indígenas) e 206 Norte. Tom leve, só para distinguir da quadra — não é
   mancha de cor como o laranja que saiu; são duas células pequenas. */
.pd-verde{ fill:#6E8F6A; fill-opacity:0.26; stroke:#7F9C79; stroke-width:0.4;
  stroke-opacity:0.7; }
.pd-contorno{ stroke-width:0.85; stroke-opacity:0.85; }
/* os dois preenchimentos laranja saíram: eles cobriam o desenho. O laranja
   fica só nos destaques (obras, empreendimentos, contorno do plano). */
/* As duas manchas laranja do Plano Diretor saem MESMO aqui. A regra anterior
   era .pd-zona{fill:none} — uma classe — e perdia para as originais
   .pd-zona.z-norte{fill:var(--pin);fill-opacity:0.10} e .z-sul{0.055}, que têm
   duas. Ordem no arquivo não resolve especificidade, então o seletor precisa
   ser tão específico quanto o que ele substitui. Era por isso que a mancha
   continuava visível no Norte (o dobro da do Sul) mesmo depois da v3.22. */
.pd-zona, .pd-zona.z-norte, .pd-zona.z-sul{ fill:none; fill-opacity:0; }
/* o nome da região identifica o Plano Diretor sem precisar de mancha de cor:
   grande, espaçado e apagado, por baixo de tudo na hierarquia */
.pd-card .poi-ref.regiao .pin-label{
  font-size:5.6px; letter-spacing:0.34em; font-weight:500;
  fill:var(--text-muted); opacity:0.42; stroke-width:1.5px;
}
.pd-card .poi-ref.regiao .ref-ring,
.pd-card .poi-ref.regiao .ref-mark{ display:none; }
/* ---- ponte sobre o Lago de Palmas (TO-080) ---- */
.ponte{ fill:none; stroke:#DDE5E8; stroke-width:0.62; opacity:0.95; }
.ponte-borda{ fill:none; stroke:var(--surface); stroke-width:2.6; opacity:0.55; }
.ponte-tie{ stroke:#DDE5E8; stroke-width:0.34; opacity:0.6; }
.ponte-lbl.curto{ display:none; }
.ponte-lbl{
  font-family:'IBM Plex Mono', monospace; font-size:3.1px; letter-spacing:0.12em;
  text-transform:uppercase; fill:#DDE5E8; opacity:0.8;
  paint-order:stroke fill; stroke:#1C3346; stroke-width:1.5px; stroke-linejoin:round;
}
/* ---- empreendimento: marcador losango, sem mancha de cor ---- */
.empreend{ fill:none; stroke:var(--pin); stroke-width:0.7; stroke-opacity:0.85; }
.empreend-mark{ fill:var(--surface); stroke:var(--pin); stroke-width:0.8; }
/* ruas internas do loteamento: mesmo traço fino da malha urbana, para o
   perímetro não ficar sendo um contorno vazio */
/* malha de ruas do sul: um pouco mais presente que a malha herdada, porque
   ali ela é a única coisa que desenha o bairro (não há quadra por cima) */
.pd-malha-sul{ stroke-width:0.3; stroke-opacity:0.6; }
@media (max-width:820px){ .pd-malha-sul{ stroke-width:0.38; stroke-opacity:0.5; } }
/* ---- rodovia estadual: o fim da quadra a leste ----
   O cliente apontou que a TO estava sendo tratada como parte das quadras 12
   (512, 612, 712, 812...). Ela agora fecha a quadra: o bloco e o contorno param
   recuados 24 m do eixo (pd_refaz.py) e a rodovia tem traco proprio por cima da
   malha — mais grossa que rua, com casca escura para se soltar do fundo. */
/* Sem casca: a casca em var(--surface) pintava uma faixa escura em cima das
   quadras 1312/1412 no tema escuro. Mesmo tom das rodovias do mapa do
   Tocantins (var(--text-muted)), so em traco. */
.pd-rodovia{
  fill:none; stroke:var(--text-muted); stroke-width:0.75; stroke-opacity:0.5;
  stroke-linecap:round; stroke-linejoin:round; pointer-events:none;
}
@media (max-width:820px){ .pd-rodovia{ stroke-width:0.95; } }
/* a leste da rodovia e zona rural — o nome diz o que a mancha vazia e */
.muni-name.is-rural{
  fill:#9CA8AD; opacity:0.6; font-size:3.2px; letter-spacing:0.16em;
}
@media (max-width:820px){ .muni-name.is-rural{ font-size:4.4px; } }
.emp-malha{
  fill:none; stroke:#9CA8AD; stroke-width:0.26; stroke-opacity:0.5;
  stroke-linecap:round; pointer-events:none;
}
@media (max-width:820px){ .emp-malha{ stroke-width:0.34; stroke-opacity:0.42; } }
.empreend-mark-in{ fill:var(--pin); }
.emp-poi{ cursor:pointer; }
.emp-poi:focus{ outline:none; }
.emp-poi:focus .empreend-mark, .emp-poi.active .empreend-mark{ stroke-width:1.4; }
.empreend-lbl{ fill:var(--accent-strong); opacity:0.9; }
/* ---- quadra com obra: número em laranja, para casar com o pino ---- */
.quadra-lbl.is-obra{ fill:var(--accent-strong); opacity:0.95; font-weight:500; }
/* obra em construção: anel tracejado — a situação não depende só da cor */
.obras-palmas .em-obra .marker-ring{ stroke-dasharray:2.6 1.8; }
.obras-palmas .em-obra .marker-halo{ opacity:0.12; }
/* área de toque do pino: invisível, mas confortável no dedo */
.pin-hit{ fill:transparent; stroke:none; }
.obra-pin{ cursor:pointer; }
/* Linha-guia do rotulo de pino. Existe para o canto cheio do mapa (Palmas,
   Luzimangues, Porto Nacional e Paraiso em 25 unidades de raio), onde o nome
   nao cabe ao lado do proprio ponto. Sem ela, o nome empurrado para longe
   parece nomear a cidade vizinha — foi o que aconteceu com "Luzimangues"
   parando ao lado do pino de Paraiso do Tocantins. Fina e discreta: ela liga,
   nao chama atencao. */
.pin-guia{
  stroke:var(--accent); stroke-width:0.35; stroke-opacity:0.55;
  pointer-events:none;
}
.obra-pin:hover .pin-guia, .obra-pin:focus-visible .pin-guia{ stroke-opacity:0.95; }
/* ---- curso d'água ---- */
.rio-lbl{
  font-family:'IBM Plex Mono', monospace; font-size:3px; letter-spacing:0.1em;
  fill:#84AECA; opacity:0.9; paint-order:stroke fill;
  stroke:var(--surface); stroke-width:1.3px; stroke-linejoin:round;
}
@media (max-width:820px){
  .pd-card .poi-ref.regiao .pin-label{ font-size:8px; letter-spacing:0.28em; }
  .ponte{ stroke-width:0.9; } .ponte-borda{ stroke-width:3.4; }
  .ponte-lbl{ font-size:4.4px; stroke-width:2px; }
  .ponte-lbl.longo{ display:none; }
  .ponte-lbl.curto{ display:block; }
  .rio-lbl{ font-size:4.3px; stroke-width:1.9px; }
  .empreend{ stroke-width:0.9; }
}
.pd-water{ opacity:0.85; }
.pd-shore{ opacity:0.6; stroke-width:0.85; }
.map-thumb .thumb-tag{ color:var(--accent-strong); }
.muni-name.is-orla{ fill:#84AECA; opacity:0.85; }
/* legenda combinando com o quadro */
.map-legend .swatch.land{ background:linear-gradient(135deg,#414A4F,#313A3E); border:1px solid #9CA8AD; }
.map-legend .swatch.water{ background:#33566E; }
.map-legend .swatch.quadra{ border:1px solid #8C989D; opacity:0.95; }
.map-legend .swatch.avenida{ background:#9CA8AD; opacity:0.9; }
.map-legend .swatch.rodovia{ background:#9CA8AD; opacity:0.9; }
.map-legend .swatch.ref{ background:#9CA8AD; }
/* o Plano Diretor deixou de ser mancha: virou contorno fino */
.map-legend .swatch.urban{ background:none; border:1.5px solid var(--accent-strong); border-radius:2px; }
.map-legend .swatch.emp{
  background:none; border:1.5px solid var(--accent-strong); border-radius:1px;
  width:9px; height:9px; transform:rotate(45deg); align-self:center;
}
.map-legend .swatch.ponte{
  background:none; border-top:1.5px solid #DDE5E8; border-bottom:1.5px solid #DDE5E8;
  width:14px; height:5px; border-radius:0; align-self:center;
}
.map-legend .swatch.rio{ background:#84AECA; width:14px; height:2px; border-radius:2px; align-self:center; }
.map-legend .swatch.parque{ background:#7F9C79; }
.map-legend .swatch.obra-and{
  background:none; border:2px dashed var(--accent-strong);
}

/* ---- ajustes dos mapas para o papel frio da v3 ---- */
.map-shape{ stroke:var(--land-border); }
.map-card{ border-radius:2px; }
.map-legend{ font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; }
.map-card-head h3{ font-family:var(--f-disp); }
/* as duas regras herdadas do template antigo pintam texto com --pin e
   --accent-strong, que no tema claro dao 3,20 — reprova. Aqui elas passam ao
   token de texto; a regra vem depois na folha, com a mesma especificidade. */
.illus-tag{ font-family:var(--f-mono); color:var(--accent-text); font-size:0.75rem; }
/* a etiqueta da miniatura do pino vinha a 9 px do template antigo */
.map-thumb .thumb-tag{ font-size:0.72rem; }
.cities-panel{ border-radius:2px; }
.cities-list .c-num{ font-variant-numeric:tabular-nums; color:var(--accent-text); }

/* ---------- galeria das obras ---------- */
.obras-galeria{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ob-card{
  display:block; padding:0; border:1px solid var(--border); background:var(--surface-2);
  text-align:left; cursor:pointer; font:inherit; color:inherit;
  transition:border-color .18s ease, transform .18s ease;
}
.ob-card:hover, .ob-card:focus-visible{ border-color:var(--accent); transform:translateY(-2px); }
.ob-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ob-foto{ display:block; position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ink); }
.ob-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 0.62rem dava 9,9 px. Estes selos dizem coisa que muda a leitura da foto
   ("Projeto" = render, nao obra executada), entao vao para o mono pequeno do
   site (0.75rem = 12 px) */
.ob-marca, .ob-mais{
  position:absolute; bottom:8px; font-family:var(--f-mono); font-size:0.75rem;
  letter-spacing:0.1em; text-transform:uppercase; padding:3px 7px;
  background:rgba(16,20,22,0.82); color:#F3EFE7;
}
.ob-marca{ left:8px; color:var(--accent); }
.ob-mais{ right:8px; }
.ob-info{ display:block; padding:12px 14px 14px; }
/* era var(--f-title), que NAO existe no site (as fontes sao --f-disp,
   --f-body e --f-mono): a declaracao ficava invalida e era descartada, e o
   nome da obra vinha na fonte do corpo em vez da Archivo. */
.ob-nome{ display:block; font-family:var(--f-disp); font-size:0.98rem; font-weight:600; }
.ob-local{
  display:block; font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--text-muted); margin-top:3px;
}
.ob-chips{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.ob-tipo, .ob-sit{
  font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.08em;
  text-transform:uppercase; padding:3px 7px; border:1px solid var(--border);
  color:var(--text-muted);
}
/* era color:var(--accent) — laranja da marca sobre o cartao claro da 2,63 de
   contraste, contra 4,5 exigidos. A borda pode ser o laranja da marca (nao e
   texto); a letra usa o token de texto. */
.ob-sit.entregue{ border-color:var(--accent); color:var(--accent-text); }
.ob-sit.emobra{ border-style:dashed; }
@media (max-width:860px){ .obras-galeria{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .obras-galeria{ grid-template-columns:1fr; } }

/* ---------- ampliação ---------- */
.ob-lb{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center;
  justify-content:center; gap:4px; padding:calc(16px + env(safe-area-inset-top,0px)) 8px
  calc(16px + env(safe-area-inset-bottom,0px)); background:rgba(10,13,15,0.94);
}
.ob-lb[hidden]{ display:none !important; }
.ob-lb-fig{ margin:0; max-width:min(1100px,100%); max-height:100%; display:flex;
  flex-direction:column; gap:10px; min-width:0; }
.ob-lb-fig img{ max-width:100%; max-height:calc(100vh - 130px); object-fit:contain;
  display:block; margin:0 auto; }
.ob-lb-fig figcaption{
  display:flex; justify-content:space-between; gap:12px; color:#F3EFE7;
  font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.1em;
  text-transform:uppercase;
}
.ob-lb-close{
  position:absolute; top:calc(10px + env(safe-area-inset-top,0px)); right:12px;
  width:40px; height:40px; font-size:1.7rem; line-height:1; color:#F3EFE7;
  background:none; border:1px solid rgba(243,239,231,0.35); cursor:pointer;
}
.ob-lb-nav{
  width:44px; height:64px; flex:0 0 auto; font-size:1.8rem; line-height:1;
  color:#F3EFE7; background:none; border:1px solid rgba(243,239,231,0.25);
  cursor:pointer;
}
.ob-lb-nav:hover, .ob-lb-close:hover{ border-color:var(--accent); color:var(--accent); }
.ob-lb-nav[hidden]{ visibility:hidden; display:block !important; }
@media (max-width:560px){
  .ob-lb-nav{ width:38px; height:54px; font-size:1.4rem; }
  .ob-lb-fig img{ max-height:calc(100vh - 160px); }
}
