/* frase.css (celular) — "REINVENTAMOS / ESPAÇOS. / CRIAMOS DESTINOS." (#frase), fundo branco. js/m/frase.js monta.
   O bloco é um container (container-type: inline-size) e tudo dentro dele é medido em cqw: o tipo, os avatares,
   as posições e a pílula. "REINVENTAMOS" enche a largura (16,6cqw de corpo; 599,6 de avanço em 100 px, menos a
   folga lateral do R), e a composição só muda de escala de 375 ao tablet. Grade (em cqw, topo do bloco):
   - linhas: topo do texto em 40; uma linha = 0,94 × 16,6 = 15,6; o Ç de ESPAÇOS. ganha 1,6 de folga embaixo;
   - obra (33 × 33) em x 0, y 0; fachada em x 67, entre ESPAÇOS. e CRIAMOS (2 abaixo do centro, para não encostar no S de cima); hoje em x 67, 5 abaixo de
     DESTINOS.; o rótulo do lugar ao lado da obra. */
#frase{background:#fff;color:var(--c-ink);padding:calc(104 * var(--u)) var(--pad) calc(84 * var(--u))}
.fm__bloco{position:relative;container-type:inline-size}

.fm__frase{position:relative;z-index:1;padding:40cqw 0 38.2cqw;font-size:16.6cqw;line-height:.94;letter-spacing:-.035em;color:var(--c-ink)}
/* flow-root: a margem negativa da máscara (SplitText) não colapsa através da linha; sem isso cada linha ficava
   .16em mais alta durante a subida e o texto pulava no fim */
.fm__l{display:flow-root;margin-left:-.035em;white-space:nowrap}
.fm__l2{padding-bottom:1.6cqw}
/* recorte das letras (SplitText, linesClass fm-ln): folga para o acento em cima e para a cedilha embaixo */
.fm-ln-mask{padding:.16em 0 .26em;margin:-.16em 0 -.26em}

/* avatares: quadrados de 33cqw com raio, na frente do texto; o recorte também segura a etiqueta, que sobe de dentro */
.fm__av{position:absolute;z-index:2;width:33cqw;height:33cqw;margin:0;border-radius:5cqw;overflow:hidden;isolation:isolate;
  will-change:transform}
.fm__av img{width:100%;height:100%;max-width:none;object-fit:cover}
.fm__av::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(12,12,12,.08);pointer-events:none}
.fm__av1{left:0;top:0}
.fm__av2{left:67cqw;top:57.4cqw}
.fm__av3{left:67cqw;top:108.8cqw}

/* etiqueta: pílula branca no pé do avatar, com o quadrado verde e o tempo */
.fm__tag{position:absolute;left:2.6cqw;bottom:2.6cqw;z-index:1;display:flex;align-items:center;gap:.5em;height:2.2em;
  padding:0 .85em 0 .7em;border-radius:1.1em;background:#fff;font-family:var(--f-display);font-weight:500;
  font-size:clamp(11px, 3.3cqw, 16px);line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--c-ink);white-space:nowrap}
.fm__q{flex:none;display:block;width:.55em;height:.55em;background:var(--c-limao)}
.fm__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* o lugar, uma vez, ao lado da obra (a rota sai embaixo dele) */
.fm__lugar{position:absolute;left:38cqw;top:1.4cqw;display:flex;align-items:center;gap:.6em;font-family:var(--f-texto);font-weight:600;
  font-size:clamp(11px, 3.1cqw, 15px);line-height:1;letter-spacing:.11em;text-transform:uppercase;color:#555}

/* a rota: linha fina verde por trás das letras e dos avatares */
.fm__rota{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.fm__rota path{fill:none;stroke:var(--c-limao);stroke-width:clamp(1.5px, .45cqw, 2.4px);stroke-linecap:round;stroke-linejoin:round}