/* featured.css — spec D, refino de 29/10 (vitrine dos empreendimentos). Posições (de LEVEL.featured, postas
   inline em calc(* var(--u))) relativas ao topo da seção. O card é um link com três camadas: .fw__fundo
   (fotos; é o que abre por recorte), .fw__etq (etiqueta, fora do recorte: D §6.4) e o botão (fora do recorte
   na 1ª fileira; dentro da camada das fotos na 2ª, D §6.5). Embaixo da foto fica a ficha (.fw__ficha).
   A seção cresce 110 no fim: as fichas empurraram a coluna B e a 2ª fileira para baixo. */
#featured{--extra:90}
/* título: left e letter-spacing calibrados contra D q300 (D-titulo). O CSS herda -.045em de .d (base.css);
   aqui abre para -.029em: a caixa de tinta "FEATURED" bate 246 px (vídeo) só com a letra menos apertada. */
.fw__tit{left:calc(59 * var(--u));top:calc(150 * var(--u));--cap:46;--lh:63;color:#0b0b0b;letter-spacing:-.029em}
.fw__card{position:absolute;display:block;color:inherit;outline:none;-webkit-tap-highlight-color:transparent}
.fw__fundo{position:absolute;inset:0;overflow:hidden}
.fw__card:focus-visible .fw__fundo{outline:calc(2 * var(--u)) solid var(--c-limao);outline-offset:calc(5 * var(--u))}
.fw__camada{position:absolute;inset:0;transform-origin:50% 50%}
/* .fw__resp é a camada que respira no hover (escala lenta); a 2ª foto e o fio verde vivem dentro dela */
.fw__resp{position:absolute;inset:0;transform-origin:50% 55%}
.fw__foto{position:absolute;inset:0;margin:0}
.fw__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fw__foto--b,.fw__fio{clip-path:polygon(0 0,0 0,0 0)}
.fw__fio{position:absolute;inset:0;background:var(--c-limao);pointer-events:none}
/* "Perspectiva ilustrativa" nos renders: corpo pequeno, no canto oposto ao botão */
.fw__ilus{position:absolute;left:calc(18 * var(--u));bottom:calc(18 * var(--u));--cap:7.2;--lh:8;
  padding:calc(7 * var(--u)) calc(10 * var(--u));border-radius:calc(20 * var(--u));background:rgba(12,12,12,.46);
  color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
/* ----- etiqueta: status, nome (letras sobem de dentro do recorte) e bairro ----- */
.fw__etq{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:calc(12 * var(--u));
  padding:calc(19 * var(--u)) calc(26 * var(--u)) calc(19 * var(--u)) calc(21 * var(--u));
  background:#fff;border-radius:calc(16 * var(--u));transform-origin:50% 50%}
.fw__st{--cap:7.4;--lh:8;display:flex;align-items:center;gap:calc(8 * var(--u));font-weight:600;
  text-transform:uppercase;letter-spacing:.11em;color:#2a2c2c;white-space:nowrap}
.fw__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) */
.fw__q--obra{background:none;box-shadow:inset 0 0 0 calc(1.7 * var(--u)) var(--c-limao)}
/* o recorte das letras abre 14 acima (til e acento do SÃO, IRAÍ) e corta 5 abaixo da linha de base */
.fw__nome{--cap:var(--cap-n);--lh:var(--cap-n);color:#0a0a0a;letter-spacing:-.03em;
  padding:calc(14 * var(--u)) 0 calc(5 * var(--u));margin:calc(-14 * var(--u)) 0 calc(-5 * var(--u))}
.fw__loc{--cap:9.4;--lh:10;color:#5f5f5f;white-space:nowrap}
.fw__card--g .fw__etq{gap:calc(14 * var(--u));padding:calc(21 * var(--u)) calc(30 * var(--u)) calc(21 * var(--u)) calc(22 * var(--u))}
.fw__card--g .fw__st{--cap:8}
.fw__card--g .fw__loc{--cap:10.4;--lh:11}
/* ----- botão: seta ↗ que sai por cima e outra entra por baixo (js) ----- */
.fw__bt{position:absolute;border-radius:50%;background:#fff;color:#090909;display:grid;place-items:center;
  transform-origin:50% 50%;overflow:hidden}
.fw__bt svg{grid-area:1/1;width:calc(10 * var(--u));height:calc(10 * var(--u));stroke-width:2}
.fw__bt--g svg{width:calc(21 * var(--u));height:calc(20 * var(--u));stroke-width:1.45}
/* ----- ficha embaixo da foto ----- */
.fw__ficha{position:absolute;left:0;right:0;top:calc(100% + 22 * var(--u))}
/* a linha se desenha da esquerda; o trecho verde é a ponta que puxa */
.fw__linha{position:absolute;left:0;top:0;width:100%;height:1px;background:rgba(12,12,12,.16);transform-origin:0 50%}
.fw__linha::before{content:'';position:absolute;left:0;top:-.5px;width:calc(30 * var(--u));height:2px;background:var(--c-limao)}
.fw__dados{position:absolute;left:0;top:calc(19 * var(--u));display:flex;gap:calc(36 * var(--u))}
.fw__dado{display:flex;flex-direction:column;align-items:flex-start;gap:calc(9 * var(--u))}
/* valor no display, sem caixa alta (m² continua m²). A largura final fica travada no js (min-width), então
   o número conta sem empurrar o dado do lado. A unidade vai menor, encostada no número. */
.fw__v{--cap:17;--lh:17;text-transform:none;letter-spacing:-.02em;color:#0a0a0a}
.fw__un{font-size:.66em;letter-spacing:0;margin-left:.16em}
.fw__r{--cap:8.4;--lh:9;color:#666;letter-spacing:-.01em;white-space:nowrap}
.fw__card--g .fw__v{--cap:19;--lh:19}
/* "Ver no mapa" na linha de base dos valores (19 + 17 − 8,2; no card grande, 19 + 19 − 8,2) */
.fw__mapa{position:absolute;right:0;top:calc(27.8 * var(--u));--cap:8.2;--lh:9;display:flex;align-items:center;
  gap:calc(9 * var(--u));font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#0a0a0a;white-space:nowrap}
.fw__card--g .fw__mapa{top:calc(29.8 * var(--u))}
.fw__chev{flex:none;width:calc(7 * var(--u));height:calc(11 * var(--u));color:var(--c-limao);overflow:visible}
/* ----- blocos de texto e o link para o mapa ----- */
.fw__bh{--cap:26;--lh:36.5;color:#0a0a0a}
.fw__bp{--cap:16;--lh:31;width:calc(290 * var(--u));color:#111}
.fw__todos{--cap:8.6;--lh:9;display:flex;align-items:center;gap:calc(10 * var(--u));font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:#0a0a0a;white-space:nowrap}
.fw__todos .fw__chev{transform:rotate(90deg)}
.fw__todos:focus-visible{outline:calc(2 * var(--u)) solid var(--c-limao);outline-offset:calc(6 * var(--u))}