/* hero.css — spec B, refeito no refino de 29/10 (docs/refino/hero.md). Posições em px da página (o hero começa
   em 0). Topos = topo da maiúscula (.tb). .hero__grupo escala ligado ao scroll em torno de (700; 763,3)
   (geometria §1). As caixas da foto e do totem vêm do hero.js (FOTO e TOTEM), em style inline.
   Grade: tinta do título de 112 a 1368; foto nas colunas 1–3 (112 → 1028) e totem na coluna 4 (1060 → 1368),
   com 32 de calha; a foto e o totem começam 48 abaixo da base do título (395) e terminam juntos (910). */
.hero__grupo{position:absolute;inset:0;transform-origin:calc(700 * var(--u)) calc(763.3 * var(--u));will-change:transform}
/* rótulo (esquerda) e subtítulo (coluna 4) na mesma linha de base, 40 acima do título; o top vem do JS */
.hero__rot{left:calc(112 * var(--u));--cap:18.9;color:#fff;z-index:3;letter-spacing:-.022em}
/* título com as letras do logo: caixa, recorte e posição de cada letra vêm do JS (hero.js, titulo()),
   a partir de LEVEL.hero.marca; o recorte mantém 8,1 acima da maiúscula e 6,1 abaixo da base (B §6.2) */
.hero__tit{color:#fff;z-index:1}
.hero__tit .lt svg{display:block;width:100%;height:100%}
/* duas linhas como dois .tb independentes (não um <br> só): o text-box-trim do Chromium não corta
   com precisão a base alfabética da última linha de um bloco multilinha. */
/* o subtítulo espelha o rótulo: alinhado à direita na tinta do último S (1368 = 1480 − 112), qualquer que
   seja o comprimento da linha */
.hero__sub{right:calc(112 * var(--u));width:0;--cap:18.7;color:#fff;z-index:3}
/* letter-spacing tem de ir direto no filho: a .d (base.css) casa com o próprio elemento e vence a
   herança de um valor posto só no pai */
.hero__sub p{position:absolute;right:0;top:0;white-space:nowrap;letter-spacing:-.02em}
.hero__sub p+p{top:calc(31 * var(--u))}

/* a fileira (foto + totem) desce dentro do grupo enquanto ele escala (cortina, hero.js) */
.hero__fila{position:absolute;inset:0;z-index:2;will-change:transform}
/* ===== foto da fachada =====
   A intro abre a foto com um clip-path triangular (corte a 45°, hero.js) e assenta a escala da imagem a partir
   do mesmo canto de baixo à esquerda. O véu (opacidade ligada à rolagem) escurece enquanto o grupo recua. */
.hero__foto{overflow:hidden;background:#151515;z-index:2}
.hero__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:0 100%}
.hero__veu{position:absolute;inset:0;z-index:1;background:var(--c-ink);opacity:0;pointer-events:none}
/* legenda da foto, em tinta sobre o céu (canto de cima à esquerda): nome em negrito e os dados em corpo pequeno.
   Cada linha é um recorte e o texto sobe de dentro dele na intro, com a legenda do totem. */
.hero__fleg{position:absolute;left:calc(22 * var(--u));top:calc(20 * var(--u));color:var(--c-ink)}
.hero__fleg>span{display:block;overflow:hidden;white-space:nowrap;font-family:var(--f-texto);
  font-size:calc(13 * var(--u));line-height:calc(18 * var(--u));height:calc(18 * var(--u));letter-spacing:-.01em;font-weight:500}
.hero__fleg>span:first-child{font-weight:700}
.hero__fleg>span>span{display:block}

/* ===== totem =====
   A janela vertical (vídeo real em 616 px para 308 de caixa: nunca ampliado) com o canto de cima à direita
   cortado a 45°, como o topo dos totens da sinalética, de pé sobre a base verde. Na intro a base se desenha
   da esquerda e a janela sobe de dentro dela (.hero__sobe, yPercent). */
.hero__totem{z-index:2}
.hero__janela{position:absolute;left:0;top:0;width:100%;height:calc(var(--janela) * var(--u));overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 34 * var(--u)) 0,100% calc(34 * var(--u)),100% 100%,0 100%)}
.hero__sobe{position:absolute;inset:0;background:#151515}
.hero__poster,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__base{position:absolute;left:0;right:0;top:calc(var(--janela) * var(--u));height:calc(70 * var(--u));
  background:var(--c-limao);color:var(--c-ink);transform-origin:0 50%}
/* três traços, um por trecho do laço: o do trecho que passa enche da esquerda (scaleX, hero.js) */
.hero__barras{position:absolute;left:calc(14 * var(--u));right:calc(14 * var(--u));top:calc(13 * var(--u));
  height:calc(2 * var(--u));display:flex;gap:calc(6 * var(--u))}
.hero__barras i{position:relative;flex:1;overflow:hidden;background:rgba(12,12,12,.2)}
.hero__barras b{position:absolute;inset:0;background:var(--c-ink);transform-origin:0 50%;transform:scaleX(0)}
/* legenda: cada linha é um recorte (overflow hidden) e o texto sobe de dentro dele */
.hero__leg>span{position:absolute;overflow:hidden;white-space:nowrap;font-family:var(--f-texto);
  font-size:calc(13 * var(--u));line-height:calc(17 * var(--u));height:calc(17 * var(--u));letter-spacing:-.01em}
.hero__leg>span>span{display:block}
.hero__nome{left:calc(14 * var(--u));top:calc(25 * var(--u));font-weight:700}
.hero__lugar{left:calc(14 * var(--u));top:calc(43 * var(--u));font-weight:500;color:rgba(12,12,12,.66)}
.hero__num{right:calc(14 * var(--u));top:calc(25 * var(--u));font-weight:500;font-variant-numeric:tabular-nums;color:rgba(12,12,12,.66)}
.hero__num b{font-weight:700;color:var(--c-ink)}

.hero--copia .hero__grupo{transform:none}