/* numeros.css (celular) — números (#numeros). Fundo branco (fim da #frase), cards empilhados de largura cheia e a
   régua embaixo. Medidas em u (desenho em 390); larguras fluidas. No tablet (≥ 700): cards 1 e 2 lado a lado e o
   card 3 inteiro embaixo, com o número ao lado do rótulo; régua em três colunas, como no desktop. */
#numeros{background:#fff;padding:calc(56 * var(--u)) 0 calc(84 * var(--u))}
.nm__cards{display:flex;flex-direction:column;gap:calc(14 * var(--u))}

/* card: fundo tinta com o selo em cima; o painel colorido sobe por dentro (gaveta). O recorte é clip-path (o
   overflow com raio falha no Safari quando o filho tem transform). */
.nm__card{position:relative;display:flex;flex-direction:column;padding-top:calc(72 * var(--u));border-radius:calc(26 * var(--u));background:var(--c-ink);
  clip-path:inset(0 round calc(26 * var(--u)))}
.nm__pil{position:absolute;left:calc(20 * var(--u));top:calc(16 * var(--u));height:calc(40 * var(--u));padding:0 calc(18 * var(--u)) 0 calc(16 * var(--u));
  display:flex;align-items:center;gap:calc(9 * var(--u));border:1px solid rgba(255,255,255,.92);border-radius:calc(20 * var(--u));color:#fff}
.nm__pil span{font-family:var(--f-display);font-variation-settings:'wdth' 87,'wght' 500;font-weight:500;text-transform:uppercase;
  font-size:calc(16.5 * var(--u));line-height:1;letter-spacing:-.03em}
.nm__q{display:block;flex:none;width:calc(6.5 * var(--u));height:calc(6.5 * var(--u));background:var(--c-limao);
  transition:rotate .6s var(--e-expo)}
/* o card no meio da tela (js): o quadrado gira 45°, como no hover do desktop. rotate (e não transform), porque o
   transform é do GSAP na entrada */
.nm__card.is-centro .nm__q{rotate:45deg}

.nm__painel{position:relative;z-index:1;flex:1 0 auto;display:flex;flex-direction:column;min-height:calc(316 * var(--u));
  padding:calc(24 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u));border-radius:calc(26 * var(--u));background:var(--cor);color:#0a0a0a}
.nm__card--1 .nm__painel{color:#fff}
.nm__corpo{font-size:calc(15 * var(--u));line-height:1.45;color:rgba(12,12,12,.8);max-width:calc(300 * var(--u))}
.nm__card--1 .nm__corpo{color:rgba(255,255,255,.88)}
.nm__rot{margin-top:calc(22 * var(--u));font-size:calc(30 * var(--u));line-height:.96}
.nm__card--topo .nm__rot{margin-top:auto;padding-top:calc(16 * var(--u))}
/* número embaixo (cards 1 e 2) ou em cima (card 3); o botão do card 1 fica à direita dele */
.nm__pe{margin-top:auto;padding-top:calc(14 * var(--u));display:flex;align-items:flex-end;justify-content:space-between;gap:calc(12 * var(--u))}
.nm__pe--topo{margin-top:0;padding-top:0}

/* ===== número de rolo =====
   Mona Sans em algarismos proporcionais (os tabulares têm zero cortado e 1 com pé; docs/refino/frase-numeros.md).
   Cada trecho é um inline-block da altura da linha (0,9 em), alinhado pelo topo: o texto dentro de todos fica na
   mesma linha de base. A janela do algarismo corta só na vertical; com 0,9 em de passo, a maiúscula (0,73 em) tem
   ~0,1 em de folga em cima e ~0,06 em embaixo, e a casa vizinha da fita fica fora (0,17 em entre uma e outra). */
.nm__num,.nm__fig{font-family:var(--f-display);font-variation-settings:'wdth' 87,'wght' 500;font-weight:500;line-height:.9;white-space:nowrap}
.nm__num{font-size:calc(132 * var(--u));letter-spacing:-.01em;margin-left:-.035em}
.nm__in{display:inline-block;vertical-align:top}
.nm__run,.nm__dig{display:inline-block;vertical-align:top}
.nm__dig{position:relative;overflow-x:visible;overflow-y:clip}
.nm__fant{visibility:hidden}
.nm__fita{position:absolute;left:0;top:0;white-space:pre;will-change:transform}
.nm__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* botão do card 1: leva ao contato; no toque ele afunda e a seta vira ↗ */
.nm__bt{flex:none;display:grid;place-items:center;width:calc(56 * var(--u));height:calc(56 * var(--u));margin-bottom:calc(6 * var(--u));
  border-radius:50%;background:#fff;color:#0f0f0f;touch-action:manipulation}
.nm__bt svg{width:calc(17 * var(--u));height:calc(13 * var(--u));transition:transform .5s var(--e-expo)}
.nm__bt:active{background:var(--c-limao)}
.nm__bt:active svg{transform:rotate(-45deg)}

/* ===== régua: R$ 1 bilhão numa linha; +100 e +30 lado a lado ===== */
.nm__regua{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(20 * var(--u));row-gap:calc(34 * var(--u));margin-top:calc(60 * var(--u))}
.nm__it{position:relative;padding-top:calc(20 * var(--u))}
.nm__it--1{grid-column:1 / -1}
.nm__fio{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(12,12,12,.16);transform-origin:0 50%}
.nm__marco{position:absolute;left:0;top:calc(-3.5 * var(--u));width:calc(8 * var(--u));height:calc(8 * var(--u));margin-top:.5px;background:var(--c-limao)}
/* recortes: o do número tem folga para o til do Ã; o do rótulo, para o acento */
.nm__fig,.nm__leg{overflow-x:visible;overflow-y:clip}
.nm__fig{font-size:calc(54 * var(--u));letter-spacing:-.02em;color:var(--c-ink);padding:.16em 0 .06em;margin:-.16em 0 -.06em}
.nm__leg{margin-top:calc(10 * var(--u));padding:calc(3 * var(--u)) 0;font-family:var(--f-display);font-variation-settings:'wdth' 87,'wght' 500;
  font-weight:500;font-size:calc(14.5 * var(--u));line-height:1.1;letter-spacing:.03em;text-transform:uppercase;color:#5f5f5f}

/* ===== tablet ===== */
@media (min-width:700px){
  .nm__cards{display:grid;grid-template-columns:1fr 1fr}
  .nm__card--3{grid-column:1 / -1}
  .nm__num{font-size:calc(112 * var(--u))}
  .nm__card--topo .nm__painel{min-height:0;display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:calc(40 * var(--u))}
  .nm__card--topo .nm__rot{margin:0 0 calc(10 * var(--u));padding:0}
  .nm__regua{grid-template-columns:repeat(3,1fr)}
  .nm__it--1{grid-column:auto}
  .nm__fig{font-size:calc(36 * var(--u))}
}
@media (prefers-reduced-motion:reduce){.nm__q,.nm__bt svg{transition:none}}