/* numeros.css — spec I. Cards 440 × 515,7, raio 30, #0c0c0c; painel colorido de raio 30 nos quatro cantos,
   por cima do card e SEM recorte (I §2: ele passa da base do card durante a subida). Conteúdo relativo ao painel.
   Refino: --extra 100 para a régua embaixo dos cards (fio em 764, base do rótulo em 861). O painel do rodapé
   assentado fica ~43 abaixo do topo da seção dele, então da base da régua até ele sobram ~186: o mesmo respiro
   de I §1 (187), agora contado da régua e não da base dos cards. */
#numeros{--extra:100}
.nm__card{position:absolute;width:calc(440 * var(--u));height:calc(515.7 * var(--u));border-radius:calc(30 * var(--u));background:var(--c-ink)}
/* selo: pílula de contorno com o quadrado verde da marca antes do nome */
.nm__pil{position:absolute;width:calc(173 * var(--u));height:calc(57 * var(--u));border:1px solid #fff;border-radius:calc(28.5 * var(--u));
  display:flex;align-items:center;justify-content:center;gap:calc(9 * var(--u));padding-right:calc(4 * var(--u))}
.nm__pil span{--cap:16;color:#fff}
.nm__q{display:block;flex:none;width:calc(7 * var(--u));height:calc(7 * var(--u));background:var(--c-limao);
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.nm__painel{position:absolute;left:0;width:100%;border-radius:calc(30 * var(--u));z-index:1}
.nm__corpo{left:calc(31.6 * var(--u));top:calc(40.6 * var(--u));--cap:14;--lh:31;width:calc(377 * var(--u));color:rgba(255,255,255,.9)}
.nm__card:nth-child(2) .nm__corpo{color:rgba(12,12,12,.82)}
.nm__rot{--cap:27;--lh:36;color:#0a0a0a}
/* card 1: corpo em cima, rótulo e número embaixo (mesma grade do card 2) e o botão à direita do número */
.nm__card:first-child .nm__rot{left:calc(31.6 * var(--u));top:calc(151.3 * var(--u));color:#fff}
.nm__card:nth-child(2) .nm__rot{left:calc(31.3 * var(--u));top:calc(151.3 * var(--u))}
.nm__card:nth-child(3) .nm__rot{left:calc(31.7 * var(--u));top:calc(192 * var(--u));--lh:36.5}
.nm__bt{position:absolute;left:calc(327.6 * var(--u));top:calc(290.6 * var(--u));width:calc(82 * var(--u));height:calc(82 * var(--u));
  border-radius:50%;background:#fff;color:#0f0f0f;display:grid;place-items:center}
.nm__bt svg{width:calc(18 * var(--u));height:calc(14 * var(--u));transition:transform .7s cubic-bezier(.16,1,.3,1)}
/* número grande: algarismos PROPORCIONAIS (os tabulares da Mona Sans têm zero cortado e 1 com pé). O recorte é a
   própria linha (lt-linha) com 8 de folga acima e abaixo da maiúscula: o arredondado do 0/3/5 passa ~2 px da
   maiúscula e não pode ser cortado; a casa vizinha da fita fica a ~190 de distância, fora da folga. */
.nm__num{--cap:117;letter-spacing:-.01em;color:#0a0a0a;padding:calc(8 * var(--u)) 0}
.nm__card:first-child .nm__num{color:#fff}
/* top = topo da maiúscula − 8 (folga); left = sidebearing do "+" contra o x do texto do card (31,5) */
.nm__n304{left:calc(28.3 * var(--u));top:calc(238.3 * var(--u))}
.nm__n49{left:calc(29.7 * var(--u));top:calc(34 * var(--u));--cap:118}
.nm__estrela{position:absolute;left:calc(240.7 * var(--u));top:calc(49 * var(--u));width:calc(42 * var(--u));height:calc(40 * var(--u));color:#0b0a08}
/* fita do contador de rolo: 11 casas (0–9 e 0) com a entrelinha da caixa do glifo; só transform */
.nm__fita{display:block;white-space:pre;will-change:transform}
.nm__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* hover: o painel sobe (JS), o quadrado do selo gira 45° (o corte da marca) e a seta do botão vira ↗ */
.nm__card:hover .nm__q{transform:rotate(45deg)}
.nm__card:hover .nm__bt svg{transform:rotate(-45deg)}
/* ===== régua: um dado por coluna, alinhado ao texto dos cards (card x + 31,6) ===== */
.nm__regua{position:absolute;left:0;top:calc(764 * var(--u));width:100%}
.nm__fio{position:absolute;left:calc(57.4 * var(--u));top:0;width:calc(1363 * var(--u));height:1px;background:rgba(12,12,12,.16);transform-origin:0 50%}
.nm__it{position:absolute;top:0;width:calc(440 * var(--u))}
.nm__marco{position:absolute;left:calc(31.6 * var(--u));top:calc(-3.5 * var(--u));width:calc(8 * var(--u));height:calc(8 * var(--u));margin-top:-.5px;background:var(--c-limao)}
.nm__fig{left:calc(31.6 * var(--u));top:calc(14 * var(--u));--cap:40;letter-spacing:-.02em;color:var(--c-ink);padding:calc(16 * var(--u)) 0 calc(6 * var(--u))}
.nm__leg{left:calc(32 * var(--u));top:calc(82 * var(--u));--cap:11;letter-spacing:.03em;color:var(--c-apagado);padding:calc(4 * var(--u)) 0}
@media (prefers-reduced-motion:reduce){.nm__q,.nm__bt svg{transition:none}}