/* faixa.css (celular) — pilares (#faixa), fundo escuro. Ver js/m/faixa.js e docs/refino/m-faixa-timeline.md.
   Desenho em 390: margem de 20u, 350u úteis. A palavra grande tem 62u nas quatro fileiras (CORPORATIVO = 340u).
   Fileira: fio no topo → índice e seta → palavra → foto (140 × 98u, a proporção dos recortes de p32) com a linha
   curta ao lado. O zigue-zague do desktop continua: nas fileiras 2 e 4 a foto vai para a direita. */
#faixa{background:var(--c-ink);color:#fff;padding:calc(96 * var(--u)) 0 calc(92 * var(--u))}

/* ---------- cabeçalho ---------- */
.fx__tit{font-size:calc(54 * var(--u));color:#fff;letter-spacing:-.04em;line-height:.94}
/* cada linha do título no próprio recorte (sobe de dentro dele); folga em cima para não cortar a maiúscula */
.fx__msk{display:block;overflow:hidden;padding:.1em 0 .04em;margin:-.1em 0 -.04em}
.fx__l{display:block;white-space:nowrap}
/* contagem dos pilares no fim do título, na altura da maiúscula da 2ª linha (como no desktop) */
.fx__n{display:inline-block;margin-left:calc(7 * var(--u));vertical-align:top;position:relative;top:.06em;
  font-size:calc(13 * var(--u));line-height:1;letter-spacing:.02em;color:#8a8a8a}
.fx__par{margin-top:calc(26 * var(--u));max-width:calc(340 * var(--u));font-size:calc(17 * var(--u));line-height:1.5;color:#fff}

/* ---------- lista ---------- */
.fs{position:relative;margin-top:calc(60 * var(--u))}
.fs__f{position:relative;padding:calc(16 * var(--u)) 0 calc(28 * var(--u))}
/* linhas finas (13% de branco) no topo de cada fileira e uma no fim; a da fileira acesa ganha o fio verde por cima,
   que se desenha da esquerda e recolhe para a direita */
.fs__fio{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.13);transform-origin:0 50%}
.fs__fio i{position:absolute;left:0;right:0;top:calc(-.5 * var(--u));height:calc(2 * var(--u));background:var(--c-limao);transform-origin:0 50%}
.fs__fio--fim{position:relative;display:block;left:auto;right:auto}
.fs .fs__fio--fim{width:100%}

.fs__topo{display:flex;align-items:center;justify-content:space-between;height:calc(30 * var(--u))}
/* índice: #666 nas apagadas; na acesa fica branco e a barra verde */
.fs__i{font-size:calc(20 * var(--u));line-height:1;letter-spacing:.02em;color:var(--c-apagado);transition:color .32s linear}
.fs__i b{font-weight:inherit;transition:color .32s linear}
.is-ativa .fs__i{color:#fff}
.is-ativa .fs__i b{color:var(--c-limao)}
/* a seta ↗ da sinalética: a caixa é o recorte; ela entra pelo canto de baixo à esquerda e sai pela ponta */
.fs__seta{display:block;width:calc(30 * var(--u));height:calc(30 * var(--u));overflow:hidden;color:var(--c-limao)}
.fs__seta svg{width:100%;height:100%}

/* palavra: o recorte das letras é a própria palavra; folga em cima para o acento de LOGÍSTICA */
.fs__w{margin-top:calc(6 * var(--u));font-size:calc(62 * var(--u));line-height:.94;letter-spacing:-.04em;white-space:nowrap;
  color:var(--c-apagado);transition:color .32s linear}
.fs__wi{display:block;overflow:hidden;padding:.16em 0 .03em;margin:-.16em 0 -.03em}
.is-ativa .fs__w{color:#fff}

.fs__corpo{display:flex;align-items:flex-start;gap:calc(14 * var(--u));margin-top:calc(16 * var(--u))}
.fs__f--par .fs__corpo{flex-direction:row-reverse}
/* foto: a mesma imagem em P&B por baixo e em cor por cima, recortada pelo corte de 45° (js) */
.fs__m{position:relative;flex:none;width:calc(140 * var(--u));height:calc(98 * var(--u));border-radius:calc(14 * var(--u));
  overflow:hidden;background:#1c1c1c;isolation:isolate}
.fs__m img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.fs__mb{filter:grayscale(1) brightness(.52) contrast(1.08)}
.fs__mc{position:absolute;inset:0;overflow:hidden}
/* fio verde da borda do corte: centrado no canto de baixo à esquerda, girado 45° e levado pela diagonal */
.fs__corte{position:absolute;left:-150%;top:100%;width:300%;height:calc(1.5 * var(--u));margin-top:calc(-.75 * var(--u));
  background:var(--c-limao);opacity:0;pointer-events:none}
/* linha curta (texto de p32): só aparece na fileira acesa; as letras sobem do recorte da própria linha */
.fs__d{flex:1;min-width:0;max-width:calc(300 * var(--u));padding-top:calc(1 * var(--u));font-size:calc(15 * var(--u));line-height:1.45;
  color:#a8a8a8;letter-spacing:-.02em;text-wrap:balance}
.fd-l-mask{padding:.12em 0 .2em;margin:-.12em 0 -.2em}

/* ---------- tablet (820): o título e o parágrafo lado a lado; a foto vai para a coluna da direita ---------- */
@media (min-width:700px){
  .fx__cab{display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:calc(48 * var(--u))}
  .fx__par{margin:0 0 .3em;justify-self:end;max-width:calc(300 * var(--u));font-size:calc(15 * var(--u))}
  .fs{margin-top:calc(56 * var(--u))}
  .fs__f{display:grid;grid-template-columns:1fr auto;grid-template-areas:"topo m" "w m" "d m";column-gap:calc(32 * var(--u));
    padding:calc(18 * var(--u)) 0 calc(22 * var(--u))}
  .fs__topo{grid-area:topo}
  .fs__w{grid-area:w}
  .fs__corpo{display:contents}
  /* a foto fica com 140 × 98u (196 × 137 px): os recortes de p32 têm 414 px, o 2x dessa caixa */
  .fs__m{grid-area:m;align-self:center}
  .fs__d{grid-area:d;margin-top:calc(12 * var(--u));max-width:none}
  .fs__f--par{grid-template-columns:auto 1fr;grid-template-areas:"m topo" "m w" "m d"}
}
@media (prefers-reduced-motion:reduce){
  .fs__i,.fs__i b,.fs__w{transition:none}
}