/* featured.css (celular) — empreendimentos (#featured), js/m/featured.js. Desenho em 390 (u); larguras fluidas.
   Título, carrossel nativo (scroll-snap) com os 4 malls, indicador de progresso, dois blocos de texto e o link para o
   mapa. O card é a foto em pé (4:5) com a etiqueta branca e o botão ↗ do desktop, e a ficha embaixo. */
#featured{background:#fff;padding:calc(88 * var(--u)) 0 calc(52 * var(--u))}
.fm__tit{font-size:calc(45 * var(--u));color:#0b0b0b;letter-spacing:-.03em}

/* ---------- carrossel ----------
   Rolagem horizontal nativa: o card encaixa no começo (margem da página) e o próximo aparece à direita. A barra de
   rolagem some; o indicador é o 01 / 04 com a barra verde embaixo. */
.fm__car{margin-top:calc(34 * var(--u))}
.fm__trilho{--gap:calc(12 * var(--u));display:flex;gap:var(--gap);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scroll-padding-inline:var(--pad);
  padding:0 var(--pad) calc(6 * var(--u));scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none}
.fm__trilho::-webkit-scrollbar{display:none}
/* folga do fim: o padding da direita não conta na rolagem de todos os navegadores */
.fm__trilho::after{content:'';flex:0 0 calc(var(--pad) - var(--gap))}
.fm__trilho:focus-visible{outline:2px solid var(--c-limao);outline-offset:-2px}
.fm__card{position:relative;flex:0 0 auto;width:calc(100vw - var(--pad) - 64 * var(--u));scroll-snap-align:start}

/* ----- foto (4:5) com as camadas do desktop: fundo (abre de baixo), camada (zoom da entrada), resp (respira) ----- */
.fm__foto{position:relative;aspect-ratio:4/5;border-radius:calc(26 * var(--u))}
.fm__fundo{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:var(--cor,#2a2c2c);isolation:isolate}
.fm__camada,.fm__resp{position:absolute;inset:0;transform-origin:50% 55%}
.fm__img{position:absolute;inset:0;margin:0}
.fm__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fm__img--b,.fm__fio{clip-path:polygon(0 0,0 0,0 0)}
.fm__fio{position:absolute;inset:0;background:var(--c-limao);pointer-events:none}
/* "Perspectiva ilustrativa" nos renders: canto de baixo à esquerda (o botão ↗ fica à direita) */
.fm__ilus{position:absolute;left:calc(14 * var(--u));bottom:calc(16 * var(--u));padding:calc(6 * var(--u)) calc(10 * var(--u));
  border-radius:calc(20 * var(--u));background:rgba(12,12,12,.5);color:#fff;font:700 calc(10.5 * var(--u))/1 var(--f-texto);
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
/* a foto inteira é o botão que troca as duas fotos (a etiqueta deixa o toque passar) */
.fm__troca{position:absolute;inset:0;border-radius:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.fm__troca:focus-visible{outline:2px solid var(--c-limao);outline-offset:3px}

/* ----- etiqueta: status, nome (letras sobem de dentro do recorte) e bairro ----- */
.fm__etq{position:absolute;left:calc(12 * var(--u));top:calc(12 * var(--u));max-width:calc(100% - 24 * var(--u));
  display:flex;flex-direction:column;align-items:flex-start;gap:calc(8 * var(--u));
  padding:calc(13 * var(--u)) calc(17 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  background:#fff;border-radius:calc(14 * var(--u));transform-origin:0% 0%;pointer-events:none}
.fm__st{display:flex;align-items:center;gap:calc(7 * var(--u));font:700 calc(10.5 * var(--u))/1 var(--f-texto);
  letter-spacing:.11em;text-transform:uppercase;color:#2a2c2c;white-space:nowrap}
.fm__q{flex:none;width:calc(7 * var(--u));height:calc(7 * var(--u));background:var(--c-limao)}
/* em obra: o quadrado da marca vazado (só o contorno) */
.fm__q--obra{background:none;box-shadow:inset 0 0 0 calc(1.7 * var(--u)) var(--c-limao)}
.fm__nome{font-size:calc(25 * var(--u));line-height:1;color:#0a0a0a;letter-spacing:-.025em;white-space:nowrap}
/* o recorte das letras abre acima (til e acento do SÃO, IRAÍ) e um pouco abaixo da linha de base */
.fm-l-mask{padding:.24em 0 .08em;margin:-.24em 0 -.08em}
.fm__loc{font:500 calc(12.5 * var(--u))/1.2 var(--f-texto);color:#5a5a5a;letter-spacing:-.01em;white-space:nowrap}

/* ----- botão ↗ (link para o mapa): a seta sai por cima e outra entra por baixo (js) ----- */
.fm__bt{position:absolute;right:calc(12 * var(--u));bottom:calc(12 * var(--u));width:calc(58 * var(--u));height:calc(58 * var(--u));
  border-radius:50%;background:#fff;color:#090909;display:grid;place-items:center;overflow:hidden;
  transition:transform .35s var(--e-expo),background-color .3s;-webkit-tap-highlight-color:transparent}
.fm__bt svg{grid-area:1/1;width:calc(13 * var(--u));height:calc(13 * var(--u));stroke-width:1.8}
.fm__bt:active{transform:scale(.9);background:var(--c-limao)}
.fm__bt:focus-visible{outline:2px solid var(--c-limao);outline-offset:3px}

/* ----- ficha embaixo da foto ----- */
.fm__ficha{position:relative;margin-top:calc(18 * var(--u));padding-top:calc(16 * var(--u))}
/* a linha se desenha da esquerda; o trecho verde é a ponta que puxa */
.fm__linha{position:absolute;left:0;top:0;width:100%;height:1px;background:rgba(12,12,12,.16);transform-origin:0 50%}
.fm__linha::before{content:'';position:absolute;left:0;top:-.5px;width:calc(30 * var(--u));height:2px;background:var(--c-limao)}
.fm__dados{display:flex;flex-wrap:wrap;gap:calc(12 * var(--u)) calc(24 * var(--u))}
.fm__dado{display:flex;flex-direction:column;gap:calc(5 * var(--u));min-width:0}
.fm__v{order:-1;font-size:calc(22 * var(--u));line-height:1;text-transform:none;letter-spacing:-.02em;color:#0a0a0a;white-space:nowrap}
.fm__un{font-size:.62em;letter-spacing:0;margin-left:.14em}
.fm__r{font:500 calc(12 * var(--u))/1.25 var(--f-texto);color:#626262;letter-spacing:-.01em;max-width:calc(150 * var(--u))}
/* "Ver no mapa": linha inteira tocável (44 px+), o chevron verde na ponta */
.fm__mapa{display:flex;align-items:center;justify-content:space-between;margin-top:calc(14 * var(--u));min-height:calc(46 * var(--u));
  border-top:1px solid rgba(12,12,12,.08);font:700 calc(11 * var(--u))/1 var(--f-texto);letter-spacing:.11em;text-transform:uppercase;color:#0a0a0a;
  -webkit-tap-highlight-color:transparent;transition:color .2s}
.fm__mapa:active{color:#5d8a00}
.fm__chev{flex:none;width:calc(8 * var(--u));height:calc(12 * var(--u));color:var(--c-limao);overflow:visible}
.fm__mapa:focus-visible,.fm__todos:focus-visible{outline:2px solid var(--c-limao);outline-offset:4px}

/* ----- indicador: 01 / 04 e a barra que corre ----- */
.fm__prog{display:flex;align-items:center;gap:calc(16 * var(--u));margin-top:calc(22 * var(--u))}
.fm__cont{flex:none;display:flex;font-size:calc(17 * var(--u));line-height:1;letter-spacing:.01em;color:rgba(12,12,12,.4)}
.fm__cont-w{display:block;overflow:hidden;padding:.12em 0;margin:-.12em 0}
.fm__cont-i{display:block;color:#0a0a0a}
.fm__trilha{position:relative;flex:1;height:2px;background:rgba(12,12,12,.1);overflow:hidden}
.fm__barra{position:absolute;left:0;top:0;height:100%;background:var(--c-limao);will-change:transform}

/* ---------- blocos de texto ---------- */
.fm__blocos{margin-top:calc(64 * var(--u));display:grid;gap:calc(46 * var(--u))}
.fm__bl{position:relative;padding-top:calc(26 * var(--u))}
.fm__bl-fio{position:absolute;left:0;top:0;width:100%;height:1px;background:rgba(12,12,12,.16);transform-origin:0 50%}
.fm__bl-q{position:absolute;left:0;top:calc(-3 * var(--u));width:calc(7 * var(--u));height:calc(7 * var(--u));background:var(--c-limao)}
.fm__bh{font-size:calc(30 * var(--u));line-height:1.02;color:#0a0a0a}
.fm__bp{margin-top:calc(16 * var(--u));font-size:calc(17 * var(--u));line-height:1.55;color:#151515;max-width:calc(340 * var(--u))}
.fm__todos{display:flex;align-items:center;gap:calc(12 * var(--u));min-height:calc(48 * var(--u));margin-top:calc(-14 * var(--u));
  font:700 calc(11 * var(--u))/1 var(--f-texto);letter-spacing:.11em;text-transform:uppercase;color:#0a0a0a;justify-self:start;
  -webkit-tap-highlight-color:transparent}
.fm__todos .fm__chev{rotate:90deg}
.fm__todos:active{color:#5d8a00}

/* ---------- tablet: dois cards inteiros e o terceiro à mostra; os blocos lado a lado ---------- */
@media (min-width: 700px){
  /* o card tem metade da tela; dentro dele a unidade segue a largura do card (o desenho de 306 do celular), em vez
     de crescer até 1,4 px e apertar a ficha */
  .fm__card{width:calc(50vw - 72px)}
  .fm__foto,.fm__ficha{--u:min(calc((50vw - 72px) / 306), 1.4px)}
  .fm__blocos{grid-template-columns:1fr 1fr;column-gap:calc(28 * var(--u))}
  .fm__todos{grid-column:1 / -1;margin-top:0}
}
@media (prefers-reduced-motion: reduce){
  .fm__bt,.fm__mapa{transition:none}
}
/* App.linhas: as máscaras das linhas têm margem negativa em cima e embaixo (folga do acento e da cedilha, base.css), e
   margens negativas de blocos vizinhos colapsam (vale a maior, não a soma). Com o texto dividido, o título ficava .14em
   mais alto por quebra e encolhia quando o SplitText voltava ao texto: a página andava uns px no fim da entrada. Aqui a
   margem entre duas linhas vem inteira de baixo, e a soma bate (ver o relatório; o certo é corrigir no base.css). */
#featured .ln-mask + .ln-mask{margin-top:0}
#featured .ln-mask:not(:last-child){margin-bottom:-.34em}