/* /hub no celular — só o que esta página tem de próprio.
   Os cartões são .m-card do kit: se precisarem de ajuste, ele vai para css/m/kit.css e vale
   nas cinco. */

#hub-hero{padding-top:96px}
.m-hero__eyebrow{opacity:.55;margin-bottom:18px}
.m-hero__t{font-size:clamp(40px,12vw,66px);line-height:.96}
.m-hero__para{font-size:17px;line-height:1.55;margin-top:28px}
#hub-hero .m-bolt{margin-block:32px}

/* ═══════════════════════════════════════════════════════ as três contagens
   Em linha, porque são três números curtos: empilhá-los gastaria uma tela inteira para dizer
   "sete, dezoito, quatro". */
.m-stats{
  display:flex;gap:28px;
  margin-top:var(--m-respiro);
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.16);
}
.m-stats li{display:flex;flex-direction:column;gap:6px}
.m-stats b{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght);
  font-size:34px;line-height:1;font-weight:400;
}
.m-stats span{opacity:.5}

/* ═══════════════════════════════════════════════════════ você está aqui
   Sem borda de cartão, de propósito: os cartões acima são links, este não é, e a diferença
   tem de ser visível antes do dedo descobrir. */
.m-aqui{
  margin-top:var(--m-gap);
  padding:24px;
  background:rgba(255,255,255,.05);
  border-radius:4px;
}
.m-aqui__chip{opacity:.5;margin-bottom:12px}
.m-aqui__t{font-size:21px;line-height:1.15;margin-bottom:8px}
.m-aqui__rota{opacity:.45;margin-bottom:12px;line-height:1.5}
.m-aqui__d{font-size:15px;line-height:1.5;opacity:.85}

/* ═══════════════════════════════════════════════════════ o cartão de página */
.m-card__t a{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.m-hub__rota{opacity:.45;margin:-4px 0 12px;line-height:1.5}
.m-hub__resolve{font-size:15px;line-height:1.5;opacity:.85;margin-top:10px}
.m-hub__desc{font-size:15px;line-height:1.5;opacity:.7;margin-top:10px}
.m-hub__atalhos{
  margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.14);
  /* 15px e não 13: juntando dez nomes de seção isto vira um bloco de prosa de verdade, e o
     piso de leitura vale para ele como vale para o resto. Menor "parecia" secundário — e
     secundário que não se lê é só ruído ocupando espaço. */
  font-size:15px;line-height:1.5;opacity:.6;
}
.m-hub__atalhos__lbl{display:block;opacity:.7;margin-bottom:6px}
/* O link de abrir atravessa o cartão: alvo de 44px sem depender de mira, e é o único destino
   do cartão além do título. */
.m-card__abrir{
  display:flex;align-items:center;justify-content:space-between;
  min-height:var(--m-toque);
  margin-top:18px;padding-top:16px;
  border-top:1px solid currentColor;
}

/* ═══════════════════════════════════════════════════════ por onde começar
   O link vira o alvo: 26px de altura de texto não é alvo de toque, e a linha inteira dá 44px
   sem mudar o desenho. */
.m-ordem__link{
  display:flex;align-items:center;
  min-height:var(--m-toque);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}