/* enderecos.css (celular) — endereços (#enderecos), js/m/enderecos.js. Desenho em 390 (u); larguras fluidas.
   Cabeçalho branco (título, texto, resumo 2 × 2) e o palco escuro: o mapa na largura da tela, o painel do endereço
   aberto e a lista. No mapa, --k (unidades do SVG por px real, posto pelo js) mantém traços e textos em px reais
   quando o SVG estica: font-size e stroke-width em calc(var(--k) * N px). */
#enderecos{background:#fff;padding:calc(72 * var(--u)) 0 calc(28 * var(--u))}
/* alvos de toque: 44 px reais no mínimo, mesmo no iPhone SE (onde 44u < 44 px) */
#enderecos{--toque:max(44px, calc(44 * var(--u)))}

/* ---------- cabeçalho ---------- */
.em__tit{font-size:calc(45 * var(--u));color:#0b0b0b;letter-spacing:-.03em}
.em__txt{margin-top:calc(20 * var(--u));font-size:calc(17 * var(--u));line-height:1.55;color:#151515;max-width:calc(330 * var(--u))}
.em__res{display:grid;grid-template-columns:1fr 1fr;gap:calc(34 * var(--u)) calc(18 * var(--u));margin-top:calc(42 * var(--u))}
.em__rn{position:relative;padding-top:calc(20 * var(--u))}
.em__rn-fio{position:absolute;left:0;top:0;width:100%;height:1px;background:rgba(12,12,12,.18);transform-origin:0 50%}
.em__rn-q{position:absolute;left:0;top:calc(-3 * var(--u));width:calc(7 * var(--u));height:calc(7 * var(--u));background:var(--c-limao)}
.em__rn-num{font-size:calc(58 * var(--u));line-height:.9;letter-spacing:-.02em;color:#0b0b0b}
.em__rn-num span:first-child:not(.em__rn-v){margin-right:.02em}
.em__rn-rot{margin-top:calc(12 * var(--u));font:600 calc(11 * var(--u))/1.45 var(--f-texto);letter-spacing:.07em;text-transform:uppercase;
  color:rgba(12,12,12,.62)}

/* ---------- palco ---------- */
.em__palco{position:relative;margin:calc(46 * var(--u)) calc(10 * var(--u)) 0;border-radius:calc(30 * var(--u));background:var(--c-ink);
  color:#fff;overflow:hidden;isolation:isolate;padding-bottom:calc(22 * var(--u))}
.em__mapabox{position:relative;width:100%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.em__mapa,.em__sobre{position:absolute;left:0;top:0;width:100%;height:100%;display:block;overflow:visible}
/* o mapa some nas bordas (em cima, embaixo e dos lados), como o do desktop */
.em__mapa{pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.em__sobre{pointer-events:none}
.em__cruzes path{stroke:rgba(255,255,255,.22);stroke-width:calc(var(--k,1) * .8px);fill:none}
.em__cid{fill:rgba(255,255,255,.04);stroke:none}
.em__malha{fill:none;stroke:rgba(255,255,255,.09);stroke-width:calc(var(--k,1) * .6px);stroke-linejoin:round;stroke-linecap:round}
.em__lim{fill:none;stroke:rgba(255,255,255,.26);stroke-width:calc(var(--k,1) * .9px);stroke-linejoin:round;stroke-dasharray:1 1}
.em__lim--cwb{stroke:rgba(255,255,255,.5);stroke-width:calc(var(--k,1) * 1.15px)}
.em__eixo{fill:none;stroke:rgba(255,255,255,.42);stroke-width:calc(var(--k,1) * 1.3px);stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1 1}
.em__eixo--sec{stroke:rgba(255,255,255,.2);stroke-width:calc(var(--k,1) * 1px)}
/* rótulos com auréola da cor do fundo (paint-order): passam por cima das linhas sem embolar */
.em__rc{font-family:var(--f-texto);font-weight:600;font-size:calc(var(--k,1) * 11px);letter-spacing:.16em;fill:rgba(255,255,255,.5);
  paint-order:stroke;stroke:var(--c-ink);stroke-width:calc(var(--k,1) * 3.2px);stroke-linejoin:round}
.em__rc--forte{font-size:calc(var(--k,1) * 13px);letter-spacing:.34em;fill:rgba(255,255,255,.66)}
/* escala (em unidades do mapa: a barra mede 5 km de verdade) e norte (grupo em px reais, escalado por K no js) */
.em__esc path{stroke:rgba(255,255,255,.55);stroke-width:calc(var(--k,1) * 1px);fill:none}
.em__esc text{font:600 calc(var(--k,1) * 11px) var(--f-texto);letter-spacing:.06em;fill:rgba(255,255,255,.5)}
.em__norte text{font:600 11px var(--f-texto);letter-spacing:.06em;fill:rgba(255,255,255,.5)}
.em__norte path{fill:rgba(255,255,255,.6)}

/* marcadores: a seta ↙ da marca em verde; parada é só o chevron, ativa ganha a haste e o pulso (grupo em px reais) */
.em__seta path{fill:var(--c-limao)}
.em__pulso,.em__flash{fill:none;stroke:var(--c-limao);stroke-width:1.1}
.em__num{font:600 11px var(--f-texto);letter-spacing:.04em;fill:rgba(255,255,255,.55);paint-order:stroke;stroke:var(--c-ink);
  stroke-width:3px;stroke-linejoin:round;transition:fill .3s}
.em__pt.is-on .em__num{fill:#fff}
.em__guia{fill:none;stroke:var(--c-limao);stroke-width:calc(var(--k,1) * 1.1px);stroke-dasharray:1 1;stroke-dashoffset:1}
.em__no{fill:var(--c-limao)}

.em__rodape{padding:calc(2 * var(--u)) calc(20 * var(--u)) 0;display:flex;flex-direction:column;gap:calc(6 * var(--u))}
.em__dica{font:500 calc(13 * var(--u))/1.4 var(--f-texto);color:rgba(255,255,255,.62);letter-spacing:-.01em}
.em__dica::before{content:'';display:inline-block;width:calc(6 * var(--u));height:calc(6 * var(--u));margin:0 calc(8 * var(--u)) calc(1 * var(--u)) 0;
  background:var(--c-limao);vertical-align:middle}
.em__fonte{font:500 max(11px, calc(11 * var(--u)))/1.4 var(--f-texto);color:rgba(255,255,255,.4)}

/* ---------- painel ---------- */
.em__painel{position:relative;margin:calc(22 * var(--u)) calc(10 * var(--u)) 0;padding:calc(10 * var(--u)) calc(10 * var(--u)) calc(24 * var(--u));
  border-radius:calc(24 * var(--u));background:#161717;border:1px solid rgba(255,255,255,.07);overflow:clip}
/* navegação no topo: fica parada enquanto o conteúdo de baixo muda de altura (e longe do chip do menu) */
.em__nav{display:flex;align-items:center;gap:calc(10 * var(--u));padding:calc(2 * var(--u)) calc(2 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u))}
.em__cont{margin-right:auto;display:flex;font-size:calc(19 * var(--u));line-height:1;color:rgba(255,255,255,.45);letter-spacing:.01em}
.em__cont-w{display:block;overflow:hidden;padding:.12em 0;margin:-.12em 0}
.em__cont-i{display:block;color:#fff}
.em__bt{display:grid;place-items:center;width:var(--toque);height:var(--toque);border-radius:50%;background:#fff;color:#0c0c0c;
  transition:background-color .25s,transform .35s var(--e-expo);-webkit-tap-highlight-color:transparent}
.em__bt svg{width:calc(16 * var(--u));height:calc(12 * var(--u))}
.em__bt:active{background:var(--c-limao);transform:scale(.92)}

.em__foto{position:relative;aspect-ratio:3/2;border-radius:calc(16 * var(--u));overflow:hidden;background:#1f2121;touch-action:pan-y pinch-zoom;isolation:isolate}
.em__camada{position:absolute;inset:0;overflow:hidden}
.em__camada img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:0 100%;-webkit-user-drag:none;user-select:none}
.em__fio{position:absolute;left:0;top:0;width:calc(900 * var(--u));height:calc(2 * var(--u));margin:calc(-1 * var(--u)) 0 0 calc(-450 * var(--u));
  background:var(--c-limao);transform:rotate(-45deg);z-index:2;opacity:0;visibility:hidden;pointer-events:none}
.em__tag{position:absolute;left:calc(12 * var(--u));top:calc(12 * var(--u));z-index:3;display:flex;align-items:center;gap:calc(7 * var(--u));
  height:calc(28 * var(--u));padding:0 calc(11 * var(--u)) 0 calc(9 * var(--u));border-radius:calc(8 * var(--u));background:#fff;color:#0a0a0a;
  font-family:var(--f-display);font-variation-settings:'wdth' 87,'wght' 500;font-size:calc(14 * var(--u));text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.em__tag:not([class*="em__st--"]){visibility:hidden}
.em__tag i{width:calc(8 * var(--u));height:calc(8 * var(--u));background:var(--c-limao)}
.em__tag b{font-weight:inherit}
.em__tag.em__st--obra i{background:linear-gradient(135deg,var(--c-limao) 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px var(--c-limao)}
.em__tag.em__st--inaugura i,.em__tag.em__st--retrofit i{background:none;box-shadow:inset 0 0 0 1.5px #0a0a0a}
.em__tag.em__st--projeto i{background:none;outline:1.5px dashed #0a0a0a;outline-offset:-1.5px}
/* planta de situação (endereço sem foto publicada) */
.em__det{position:absolute;inset:0;background:#1b1d1d}
.em__det svg{position:absolute;inset:0;width:100%;height:100%;transform-origin:0 100%}
.em__det-rua,.em__det-eixo,.em__det-via{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.em__det-rua{stroke:rgba(255,255,255,.26);stroke-width:.9}
.em__det-anel{fill:none;stroke:var(--c-limao);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:2 3;opacity:.8}
.em__det-eixo{stroke:rgba(255,255,255,.5);stroke-width:1.6}
.em__det-via{stroke:#fff;stroke-width:3}
.em__det-seta{fill:var(--c-limao)}
.em__det-rot{position:absolute;left:calc(14 * var(--u));bottom:calc(12 * var(--u));font:600 calc(11 * var(--u))/1.3 var(--f-texto);
  color:rgba(255,255,255,.62);letter-spacing:.08em;text-transform:uppercase}

.em__corpo{padding:calc(22 * var(--u)) calc(12 * var(--u)) 0}
.em__meta{display:flex;align-items:center;gap:calc(10 * var(--u));font:600 calc(11 * var(--u))/1.3 var(--f-texto);color:rgba(255,255,255,.55);
  letter-spacing:.12em;text-transform:uppercase}
.em__meta i{width:calc(18 * var(--u));height:1px;background:rgba(255,255,255,.4)}
.em__nome{margin-top:calc(4 * var(--u));padding-top:calc(8 * var(--u));font-size:calc(31 * var(--u));line-height:1.02;color:#fff;overflow:clip;
  letter-spacing:-.025em}
.em__nome-in{display:block}
.em__end{margin-top:calc(12 * var(--u));font:500 calc(15 * var(--u))/1.5 var(--f-texto);color:rgba(255,255,255,.72);letter-spacing:-.01em}
.em__dados{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(16 * var(--u));margin-top:calc(20 * var(--u));border-top:1px solid rgba(255,255,255,.12)}
.em__dado{padding:calc(13 * var(--u)) 0 calc(12 * var(--u));border-bottom:1px solid rgba(255,255,255,.08);min-width:0}
.em__dado dt{font:600 calc(10.5 * var(--u))/1.2 var(--f-texto);color:rgba(255,255,255,.5);letter-spacing:.14em;text-transform:uppercase}
.em__dado dd{margin-top:calc(8 * var(--u));font-size:calc(20 * var(--u));line-height:1.1;color:#fff;letter-spacing:-.015em}
.em__sep{display:block;margin-top:calc(20 * var(--u));height:1px;background:rgba(255,255,255,.12)}
.em__mix{margin-top:calc(16 * var(--u));font:500 calc(14.5 * var(--u))/1.55 var(--f-texto);color:rgba(255,255,255,.76);letter-spacing:-.01em}
.em__mix b{display:block;margin-bottom:calc(4 * var(--u));font-weight:600;font-size:calc(10.5 * var(--u));letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.em__nota{margin-top:calc(14 * var(--u));font:500 calc(14.5 * var(--u))/1.55 var(--f-texto);color:rgba(255,255,255,.62);letter-spacing:-.01em}
.em__cred{margin-top:calc(14 * var(--u));font:500 max(11px, calc(11.5 * var(--u)))/1.45 var(--f-texto);color:rgba(255,255,255,.46)}

.em__viz{display:flex;flex-wrap:wrap;gap:calc(6 * var(--u));padding:calc(20 * var(--u)) calc(12 * var(--u)) 0}
.em__viz:empty{display:none}
.em__viz-rot{flex:0 0 100%;margin-bottom:calc(4 * var(--u));font:600 calc(10.5 * var(--u))/1.2 var(--f-texto);color:rgba(255,255,255,.5);
  letter-spacing:.14em;text-transform:uppercase}
.em__chip{display:inline-flex;align-items:center;gap:calc(6 * var(--u));min-height:var(--toque);padding:0 calc(14 * var(--u)) 0 calc(12 * var(--u));
  border:1px solid rgba(255,255,255,.18);border-radius:calc(22 * var(--u));font-family:var(--f-display);font-variation-settings:'wdth' 87,'wght' 500;
  font-size:calc(15 * var(--u));text-transform:uppercase;color:rgba(255,255,255,.88);letter-spacing:-.01em;
  transition:border-color .25s,background-color .25s;-webkit-tap-highlight-color:transparent}
.em__chip span{font:600 calc(11 * var(--u)) var(--f-texto);letter-spacing:.04em;color:rgba(255,255,255,.45)}
.em__chip b{font-weight:inherit}
.em__chip:active{border-color:var(--c-limao);background:rgba(154,212,38,.12)}

/* ---------- lista ---------- */
.em__lista{padding:calc(34 * var(--u)) calc(20 * var(--u)) 0}
.em__gr{display:flex;justify-content:space-between;align-items:center;height:calc(36 * var(--u));
  font:600 calc(11 * var(--u)) var(--f-texto);letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.48);
  border-bottom:1px solid rgba(255,255,255,.14)}
.em__ul + .em__gr{margin-top:calc(30 * var(--u))}
.em__it{position:relative;display:grid;grid-template-columns:calc(36 * var(--u)) 1fr auto;align-items:baseline;row-gap:calc(5 * var(--u));
  width:100%;min-height:max(60px, calc(62 * var(--u)));padding:calc(14 * var(--u)) 0 calc(12 * var(--u));text-align:left;
  border-bottom:1px solid rgba(255,255,255,.08);-webkit-tap-highlight-color:transparent;transition:background-color .2s}
.em__it-n{grid-row:1;font:600 calc(11 * var(--u)) var(--f-texto);letter-spacing:.06em;color:rgba(255,255,255,.42);
  transition:color .3s}
.em__it-nome{grid-row:1;grid-column:2;font-size:calc(19 * var(--u));line-height:1.05;color:rgba(255,255,255,.9);letter-spacing:-.02em;
  transition:color .3s,transform .5s var(--e-expo)}
.em__it-cid{grid-row:2;grid-column:2;font:500 calc(13 * var(--u))/1.3 var(--f-texto);color:rgba(255,255,255,.5);letter-spacing:-.01em;
  transition:transform .5s var(--e-expo)}
.em__it-st{grid-row:1 / 3;grid-column:3;align-self:center;font:700 calc(10.5 * var(--u))/1 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;
  padding:calc(5 * var(--u)) calc(8 * var(--u));border:1px solid rgba(255,255,255,.3);border-radius:calc(5 * var(--u));color:rgba(255,255,255,.75)}
.em__it-st.em__st--obra{border-color:var(--c-limao);color:var(--c-limao)}
.em__it-st.em__st--projeto{border-style:dashed}
/* barra verde à esquerda do item ativo, que cresce do meio */
.em__it::before{content:'';position:absolute;left:calc(-12 * var(--u));top:calc(15 * var(--u));width:calc(3 * var(--u));height:calc(32 * var(--u));
  background:var(--c-limao);transform:scaleY(0);transition:transform .5s var(--e-expo)}
.em__it.is-on::before{transform:scaleY(1)}
.em__it.is-on .em__it-n{color:var(--c-limao)}
.em__it.is-on .em__it-nome{color:#fff;transform:translateX(calc(4 * var(--u)))}
.em__it.is-on .em__it-cid{transform:translateX(calc(4 * var(--u)))}
.em__it:active{background:rgba(255,255,255,.04)}
.em__it:focus-visible{outline:none;box-shadow:inset 0 0 0 1px rgba(154,212,38,.7);border-radius:calc(6 * var(--u))}
.em__bt:focus-visible,.em__chip:focus-visible{outline:2px solid var(--c-limao);outline-offset:3px}

.em__vivo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- tablet: o resumo em 4 colunas; no palco, o mapa à esquerda e o painel à direita, a lista embaixo em 2 colunas ---------- */
@media (min-width: 700px){
  .em__txt{max-width:calc(420 * var(--u))}
  .em__res{grid-template-columns:repeat(4,1fr)}
  .em__rn-num{font-size:calc(46 * var(--u))}
  /* no palco a unidade segue a largura de cada coluna (metade da tela), para o painel e a lista terem as proporções do
     celular em vez de crescer até 1,4 px; o painel acompanha a rolagem ao lado da lista (sticky dentro do palco) */
  .em__palco{--u:min(calc((100vw - 60px) / 2 / 350), 1.4px);display:grid;grid-template-columns:1.1fr 1fr;
    grid-template-rows:auto auto 1fr;grid-template-areas:'mapa painel' 'rodape painel' 'lista painel';
    align-items:start;column-gap:calc(8 * var(--u));margin:calc(46 * var(--u)) 14px 0;padding:calc(12 * var(--u)) calc(12 * var(--u)) calc(24 * var(--u));
    overflow:hidden;overflow:clip}
  .em__mapabox{grid-area:mapa}
  .em__rodape{grid-area:rodape;padding:calc(4 * var(--u)) calc(14 * var(--u)) 0}
  .em__painel{grid-area:painel;margin:0;position:sticky;top:12px}
  .em__lista{grid-area:lista;padding:calc(32 * var(--u)) calc(14 * var(--u)) 0}
  .em__it::before{left:calc(-10 * var(--u))}
}
@media (prefers-reduced-motion: reduce){
  .em__it::before,.em__it-nome,.em__it-cid,.em__bt,.em__num{transition:none}
}
/* App.linhas: a mesma correção do colapso de margens das máscaras de linha (ver css/m/featured.css) */
#enderecos .ln-mask + .ln-mask{margin-top:0}
#enderecos .ln-mask:not(:last-child){margin-bottom:-.34em}
