/* Sistema de interface do app Run&Co.
   ═══════════════════════════════════════════════════════════════════════════
   Este arquivo existe porque o app tinha padrão demais e sistema de menos: cada
   tela reinventava a sua caixa, e o resultado era uma pilha de retângulos sem
   hierarquia nenhuma. Contando só o que estava em uso havia cinco escalas de
   canto arredondado (7, 10, 12, 14 e 16px) e caixa dentro de caixa em quase
   toda tela: um card branco com três caixas cinzas de número dentro, e ao lado
   uma fileira de caixas de atalho.

   A regra dura deste arquivo é uma só:

       NUNCA UMA CAIXA DENTRO DE UMA CAIXA.

   São três níveis de superfície e nada além disso:

     Nível 0 — a página.       Fundo --bg. Rótulo de seção e texto de apoio
                               ficam soltos no fundo, sem contorno nenhum.
     Nível 1 — a superfície.   Um bloco branco por assunto (.r-sup). Raio 16.
     Nível 2 — a linha.        Dentro da superfície os itens são linhas
                               separadas por um fio de 1px (.r-linha). Sem
                               fundo próprio, sem borda, sem raio.

   Se um item dentro de um card parece precisar de destaque, ele é uma linha
   com divisória, não um card menor.

   As classes levam o prefixo `r-` de propósito: `.linha`, `.pill`, `.selo` e
   `.btn` já existiam no <style> local de várias páginas, e sem prefixo o
   sistema brigaria com elas durante a migração.

   As duas vozes
   ─────────────
   O que fazia o app parecer site era abrir toda tela de membro com uma capa
   editorial: sobrancelha, h1 de 40px em duas linhas e um lead de três linhas.
   Num iPhone isso comia uns 200px antes de qualquer conteúdo. Capa é linguagem
   de site.

     Voz editorial (público, não logado): landing, desafios abertos, vitrine de
     parceiros. Hero de 34px+, neon de marca-texto, lead longo. Continua certa
     lá, e mora no app.css legado e no vitrine.css.

     Voz app (logado): .r-titulo de 23px mais uma linha de contexto, e o
     conteúdo começa na primeira dobra. É o que este arquivo define.

   A casca (barra de cima, ilha de abas, gaveta) mora no nav.css, separada de
   propósito: as páginas editoriais usam a casca sem herdar este tema.
*/

:root {
  /* ── Cor ────────────────────────────────────────────────────────────────
     Quatro tons de texto, e só quatro. O app tinha meia dúzia de cinzas
     inventados no meio do caminho, e o efeito é o de cada linha ter uma cor
     própria. --muted saiu de #8a8a85 para #6e6e68 porque #8a8a85 sobre o
     nosso papel dá 2,9:1 de contraste e reprova em AA; #6e6e68 dá 4,7:1. */
  --bg: #f5f5f0;          /* o papel */
  --surface: #ffffff;     /* a superfície, nível 1 */
  --card: #efefe9;        /* preenchimento discreto: avatar vazio, selo */
  --line: #e4e4dc;        /* o fio que separa linha de linha */
  --border: #e0e0d8;      /* contorno de controle (input, botão fantasma) */

  --ink: #1a1a1a;         /* título e valor */
  --soft: #4a4a45;        /* texto corrido */
  --muted: #6e6e68;       /* meta, legenda, descrição de linha */
  --faint: #9a9a94;       /* placeholder e desabilitado, nunca frase */

  --neon: #CCFF00;
  /* Neon lavado. O #CCFF00 cheio é a cor do gesto (a aba ativa, o benefício, o
     botão), um por tela. Este é o neon rebaixado do IRMÃO RaceLog+: um verde
     quase branco que BANHA a superfície em vez de marcá-la. É com ele que as
     telas logadas ganham vida, um card levemente esverdeado no meio do papel
     bege e dos cards brancos, sem gritar. Preenchimento, não pontuação. */
  --neon-muted: #f5ffe0;
  --neon-borda: #e4f2bf;   /* o fio esverdeado que define o card lavado */
  --danger: #c8362f;

  /* ── Espaço ─────────────────────────────────────────────────────────────
     Seis passos. Escolha o mais próximo, não invente o valor no olho. */
  --e1: 4px;  --e2: 8px;  --e3: 12px;  --e4: 16px;  --e5: 24px;  --e6: 32px;

  /* ── Canto ──────────────────────────────────────────────────────────────
     Três, contra os cinco de antes. Superfície, controle, selo. */
  --raio-sup: 16px;
  --raio-ctl: 12px;
  --raio-selo: 6px;

  /* ── Tipo ───────────────────────────────────────────────────────────────
     Unbounded é a voz da marca: título, número, rótulo em caixa alta.
     DM Sans é a voz de leitura: tudo que a pessoa lê como frase ou digita.
     Sete passos, e frase nenhuma desce abaixo de 13px. */
  --ui: 'Unbounded', sans-serif;
  --texto: 'DM Sans', sans-serif;

  --t-tela: 23px;         /* título de tela */
  --t-num: 26px;          /* número grande */
  --t-titulo: 16px;       /* título de linha e de superfície */
  --t-corpo: 15px;        /* texto corrido e campo de formulário */
  --t-meta: 13px;         /* descrição de linha, legenda */
  --t-secao: 11px;        /* rótulo de seção, caixa alta */
  --t-micro: 11px;        /* selo */
}

/* ── Base ──────────────────────────────────────────────────────────────── */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--texto); font-size: var(--t-corpo); line-height: 1.5;
}
.escondido { display: none !important; }

/* Foco de teclado. Nunca tire o contorno sem pôr outro no lugar. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* ── A tela ────────────────────────────────────────────────────────────────
   Uma coluna. Sempre.

   O app já tentou virar duas colunas acima de 900px, e foi rejeitado com
   razão: lista de gente em duas colunas quebra a ordem de leitura (o item 3
   fica ao LADO do 1 e não embaixo do 2), e é exatamente isso que faz uma tela
   virar tabela de site. Quem usa a largura do desktop é a casca, não o
   conteúdo: a ilha de abas fica flutuando embaixo e o texto continua numa
   medida que se lê.

   Quem abre espaço para a ilha de abas NÃO é o padding daqui: é o
   `.abas-espaco`, um elemento vazio que a casca põe no fim do body. Um
   elemento resolve isso igual para toda página (convertida, legada ou
   editorial) de uma vez, enquanto padding em `body` seria sobrescrito sem
   avisar pelo <style> local, que carrega depois deste arquivo. */
.r-tela {
  max-width: 620px; margin: 0 auto;
  padding: var(--e2) var(--e4) var(--e5);
}

/* O que só faz sentido fora do app das lojas: o convite pra instalar, a
   explicação de que o aviso não chega sozinho, e um dia a faixa de "baixe o
   app". Dentro do binário isso vira mentira ou, no caso da faixa, motivo de
   recusa da Apple (a regra 2.3.10 proíbe citar outra loja). A classe
   `runco-native` é marcada pelo plataforma.js antes da primeira pintura. */
html.runco-native .so-fora-do-app { display: none !important; }

/* As telas que não têm a barra do app em cima: entrar, suspenso, ranking e
   apagar conta. Elas nem carregam o nav.js, então não há nada segurando o topo,
   e dentro do app o conteúdo sobe até a faixa do relógio e da câmera. No
   simulador a marca da tela de entrar ficou em cima da hora. As telas COM a
   barra não precisam disto: quem cuida delas é o padding do .app-nav.
   Fora do app, e em tela sem notch, o env() vale 0 e nada muda. */
.r-tela.sem-casca {
  padding-top: calc(var(--e2) + env(safe-area-inset-top, 0px));
}

/* Cabeçalho de tela. Substitui a capa editorial (.cover + .eyebrow + h1 + .lead).
   Título de 23px e UMA linha de contexto: o parágrafo de três linhas que
   explicava a tela virava capa e empurrava o conteúdo para fora da dobra. */
.r-tela-topo {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e4) 0 var(--e2);
}
.r-tela-topo > div { flex: 1; min-width: 0; }
.r-titulo {
  font-family: var(--ui); font-weight: 900; font-size: var(--t-tela);
  letter-spacing: -0.02em; line-height: 1.15; color: var(--ink);
}
.r-sub {
  font-size: var(--t-meta); color: var(--muted); line-height: 1.45;
  margin-top: var(--e1);
}

/* Botão de ação do cabeçalho: a engrenagem do perfil. É onde a pessoa procura,
   e é o que aposenta o botão neon "Editar meu perfil" de largura cheia, que
   competia com o conteúdo da própria tela. 44px de alvo, como todo controle. */
.r-acao {
  flex-shrink: 0; width: 44px; height: 44px; margin: -6px -8px 0 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--soft);
  text-decoration: none;
}
.r-acao:hover { color: var(--ink); }
.r-acao svg { width: 22px; height: 22px; }

/* A marca no topo da tela. Só para as telas SEM a casca do app (o Entrar, que
   é a porta de entrada e não tem barra nem abas). Nas telas com casca a marca
   já está na barra de cima, e repetir aqui dá dois logos empilhados. */
.r-marca-topo { display: flex; align-items: baseline; gap: 10px; padding: var(--e5) 0 var(--e2); }
.r-logo {
  font-family: var(--ui); font-weight: 900; font-size: 20px;
  letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
}
.r-logo .amp { background: var(--neon); padding: 0 0.1em; border-radius: 4px; }
.r-logo-sufixo { font-family: var(--ui); font-weight: 900; font-size: 15px; color: var(--muted); }

/* Rótulo de seção. Nível 0: solto no papel, sem caixa. É ele que agrupa as
   superfícies e dá a categoria sem gastar um card só para o título.
   Na direção de ago/26 ele subiu de voz: grafite e um ponto maior, porque com
   o título de página morando na barra de cima ele virou o título que sobra
   dentro da tela, e cinza 11px não segura esse papel. */
.r-secao {
  font-family: var(--ui); font-weight: 700; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
  margin: var(--e5) 0 var(--e2); padding: 0 var(--e1);
}

/* Nota de página. Frase de apoio solta no papel, fora de qualquer superfície:
   "esqueceu de marcar? fala com quem liderou". É o que sobra do `.rodape`
   depois que os LINKS dele viraram linhas navegáveis: o que era instrução
   continua sendo texto, o que era navegação virou alvo de dedo. */
.r-nota {
  font-size: var(--t-meta); color: var(--muted); line-height: 1.5;
  margin-top: var(--e3); padding: 0 var(--e1);
}

/* Barra de controle: um ou dois controles em linha, acima de uma lista (o
   seletor de dia do check-in). Fora da superfície, porque controla a lista e
   não faz parte dela. */
.r-barra { display: flex; align-items: stretch; gap: var(--e2); }
.r-barra > .r-input { flex: 1; min-width: 0; }
.r-barra > .r-btn { flex-shrink: 0; }

/* ── Nível 1: a superfície ─────────────────────────────────────────────────
   Um bloco branco por assunto. Sem borda: um fio de sombra de 1px separa do
   papel sem desenhar mais um retângulo. */
.r-sup {
  background: var(--surface); border-radius: var(--raio-sup);
  box-shadow: 0 1px 0 rgba(26,26,24,0.05), 0 0 0 1px rgba(26,26,24,0.045);
  overflow: hidden;
  margin-top: var(--e2);
}
/* A superfície PRINCIPAL da tela: o corre acontecendo agora, a pessoa em foco
   na árvore. Traço neon no topo, que marca sem desenhar borda em volta de tudo. */
.r-sup.destaque { border-top: 3px solid var(--neon); }
/* A superfície LAVADA (direção RaceLog+, ago/26): em vez de branca, o card de
   destaque das telas logadas (a ficha do perfil, os números do clube, o resumo
   do console) ganha um banho de neon rebaixado e um fio esverdeado no lugar da
   sombra. É o que tira o bege-e-branco de cima dessas telas sem tingir todo card
   nem gastar o neon cheio, que fica pro gesto (a aba, o benefício). */
.r-sup.calor {
  background: var(--neon-muted);
  box-shadow: 0 1px 0 rgba(26,26,24,0.04), 0 0 0 1px var(--neon-borda);
}
/* O que já passou continua na tela, esmaecido. */
.r-sup.apagada { opacity: 0.7; }
/* Para conteúdo corrido dentro da superfície (formulário, parágrafo). */
.r-sup-corpo { padding: var(--e4) var(--e4) var(--e5); }
.r-sup-corpo > h2 {
  font-family: var(--ui); font-weight: 900; font-size: var(--t-titulo);
  letter-spacing: -0.01em;
}

/* ── Nível 2: a linha ──────────────────────────────────────────────────────
   O item dentro da superfície. UMA anatomia para membro, corre, aviso,
   benefício, parceiro e item de navegação:

       [glifo 44]  título              [selos/valor]  [›]
                   uma linha de meta

   Separadas por um fio, não por espaço com borda. Quando a linha é um <a> ela
   ganha o chevron sozinha: navegação entre telas é a linha inteira como alvo,
   não uma palavra sublinhada no meio de uma frase. */
.r-linha {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4); min-height: 60px;
  color: var(--ink); text-decoration: none;
  background: none; border: none; width: 100%; text-align: left;
  font-family: inherit; font-size: inherit;
}
.r-linha + .r-linha { box-shadow: inset 0 1px 0 var(--line); }
a.r-linha, button.r-linha { cursor: pointer; }
a.r-linha:active, button.r-linha:active { background: var(--bg); }

.r-linha-corpo { flex: 1; min-width: 0; }
.r-linha-corpo b {
  display: block; font-weight: 600; font-size: var(--t-titulo);
  line-height: 1.3; letter-spacing: -0.005em;
}
.r-linha-corpo span {
  display: block; font-size: var(--t-meta); color: var(--muted);
  line-height: 1.4; margin-top: 2px;
}
.r-linha-fim {
  flex-shrink: 0; display: flex; align-items: center; gap: var(--e2);
  font-family: var(--ui); font-weight: 700; font-size: var(--t-meta); color: var(--soft);
}

/* Ícone à esquerda da linha de destino (console de quem lidera, atalhos do
   perfil). Injetado por svgNav, a mesma fonte única dos ícones do Clube; à
   esquerda, e não no topo como no cartão, porque a linha lê na horizontal. */
.r-linha > svg {
  flex-shrink: 0; width: 24px; height: 24px; color: var(--ink);
}

/* Rótulo interno da linha: a categoria, acima do título ("PARCEIRO NOVO · há
   2 dias" num aviso). Serve pra não gastar uma QUARTA camada de texto na
   linha: tipo e data cabem juntos aqui, e a regra de três camadas se mantém. */
.r-linha-corpo .r-rot {
  display: block; font-family: var(--ui); font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--e1);
}

/* A linha ACESA: você no meio de uma lista de gente, ou a pessoa que já teve a
   presença marcada. Preenchimento neon esmaecido, e não uma borda de 2px em
   volta: borda em volta de uma linha dentro de uma superfície é onde a caixa
   dentro de caixa recomeça. */
.r-linha.aceso { background: rgba(204, 255, 0, 0.20); }

/* Caixa de marcar, no lugar do glifo da linha. O visto só existe quando está
   marcado; o quadrado vazio já diz que dá pra marcar. */
.r-check {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: transparent;
}
.r-linha.aceso .r-check { background: var(--neon); border-color: var(--ink); color: var(--ink); }

/* A linha do AGORA: o dia de hoje na agenda, o corre de hoje na escala. Traço
   neon na lateral da superfície, pelo mesmo motivo do `eu` acima. */
.r-linha.marcada { box-shadow: inset 3px 0 0 var(--neon), inset 0 1px 0 var(--line); }
.r-linha.marcada:first-child { box-shadow: inset 3px 0 0 var(--neon); }
/* Passado e cancelado: continuam na lista, esmaecidos. Sumir faria parecer que
   nunca foram combinados, e quem já tinha se organizado ficaria sem entender. */
.r-linha.passado { opacity: 0.55; }

/* Marcador de não lido. Bolinha neon com anel grafite, que é o que sobrevive
   ao fundo branco. Quando não há nada novo ela fica invisível mas continua
   ocupando o lugar, senão a lista dança a cada visita. */
.r-ponto {
  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 0 1.5px var(--ink);
}
.r-ponto.vazio { background: transparent; box-shadow: none; }

/* Valor à direita da linha: o número grande mais a unidade embaixo. */
.r-valor { text-align: right; }
.r-valor b {
  display: block; font-family: var(--ui); font-weight: 900; font-size: 21px;
  line-height: 1; letter-spacing: -0.02em; color: var(--ink);
}
.r-valor span {
  display: block; font-family: var(--ui); font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: var(--e1);
}

/* O chevron. Nasce sozinho em toda linha navegável, e é o que substitui o
   `.rodape` com link sublinhado que existia em meia dúzia de telas. */
a.r-linha::after, button.r-linha.leva::after {
  content: ''; flex-shrink: 0; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(-45deg);
}
a.r-linha:hover::after { border-color: var(--ink); }
/* Linha navegável que já tem conteúdo à direita: o chevron vem depois dele. */
.r-linha-fim + .r-linha-fim { margin-left: 0; }

/* ── A ficha ───────────────────────────────────────────────────────────────
   O topo da tela de perfil: retrato, nome, número de membro e a engrenagem.
   Não é um cabeçalho de tela separado de propósito, porque a ficha JÁ é o
   título desta tela: pôr "Meu perfil" escrito acima do nome da pessoa é dizer
   duas vezes a mesma coisa e gastar uma dobra com isso. */
.r-ficha {
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e5) var(--e4) var(--e4);
}
.r-ficha-corpo { flex: 1; min-width: 0; }
.r-ficha-corpo b {
  display: block; font-family: var(--ui); font-weight: 900; font-size: 19px;
  letter-spacing: -0.02em; line-height: 1.15;
}
.r-ficha-corpo span {
  display: block; font-family: var(--ui); font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  margin-top: 6px;
}

/* ── Avatar e glifo ──────────────────────────────────────────────────────── */
.r-avatar {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--card); background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-weight: 900; font-size: 13px; color: var(--muted);
}
.r-avatar.g { width: 72px; height: 72px; font-size: 21px; }
.r-avatar.vazio { opacity: 0.55; }

/* Célula de data. Ocupa o lugar do avatar na linha, e é a MESMA em toda lista
   de coisa datada do app. Um estilo só: dia grande, dia-da-semana embaixo em
   caixa alta. O mês e o ano moram no título da tela, nunca repetidos por linha. */
.r-data { flex-shrink: 0; width: 44px; text-align: center; }
.r-data b {
  display: block; font-family: var(--ui); font-weight: 900; font-size: 19px;
  line-height: 1; letter-spacing: -0.02em;
}
.r-data span {
  display: block; font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.1em; margin-top: 4px;
}

/* Posição no ranking. Fica no lugar do avatar, mesma caixa de 44px. */
.r-lugar {
  flex-shrink: 0; width: 30px; text-align: center;
  font-family: var(--ui); font-weight: 900; font-size: var(--t-meta); color: var(--soft);
}
.r-lugar.podio {
  background: var(--neon); color: var(--ink);
  border-radius: var(--raio-selo); padding: 6px 0;
}

/* ── A faixa de números ────────────────────────────────────────────────────
   Antes eram três retângulos cinzas empilhados DENTRO de um card branco, que é
   o caso mais visível de caixa dentro de caixa no app. Agora é uma fileira só,
   sem preenchimento, separada por fios verticais.

   A altura mínima é reservada porque a faixa nasce vazia e o JS preenche
   quando a resposta chega: sem reserva, a página inteira desce de uma vez no
   momento em que o número aparece, e ele fica justo no alto da tela. */
.r-nums {
  display: flex; align-items: stretch;
  padding: var(--e4) 0; min-height: 82px;
}
.r-num {
  flex: 1; min-width: 0; padding: 0 var(--e3);
  display: flex; flex-direction: column; justify-content: center;
}
.r-num + .r-num { box-shadow: inset 1px 0 0 var(--line); }
.r-num b {
  display: block; font-family: var(--ui); font-weight: 900;
  font-size: var(--t-num); line-height: 1; letter-spacing: -0.02em;
}
.r-num span {
  display: block; font-size: 12px; color: var(--muted);
  margin-top: var(--e2); line-height: 1.3; text-wrap: balance;
}
/* Dentro de uma superfície a faixa encosta nas bordas dela e ganha um fio em
   cima, em vez de flutuar solta. */
.r-sup > .r-nums { padding: var(--e4) var(--e2); box-shadow: inset 0 1px 0 var(--line); }
/* GRADE: mais de três células. Quatro ou mais numa fileira só espremem o rótulo
   até ele virar três linhas de uma palavra. Duas por linha devolvem largura.

   Quebrado em duas linhas, o `.r-num + .r-num` daria um fio à ESQUERDA da
   terceira célula, que é a primeira da segunda linha: um fio solto encostado na
   borda da superfície. Em duas colunas só a coluna da direita leva fio, e as
   linhas se separam pelo espaço.

   A partir de 560px cabem quatro em fileira; acima disso a grade continua
   quebrando de duas em duas só quando há mais de quatro (o placar da escala,
   que tem uma célula por pessoa que lidera). */
.r-nums.grade { flex-wrap: wrap; }
.r-nums.grade .r-num {
  flex: 1 1 45%; box-shadow: none;
  padding-top: var(--e2); padding-bottom: var(--e2);
}
.r-nums.grade .r-num:nth-child(2n) { box-shadow: inset 1px 0 0 var(--line); }
@media (min-width: 560px) {
  .r-nums.grade .r-num { flex: 1 1 22%; }
  .r-nums.grade .r-num:nth-child(2n) { box-shadow: none; }
  .r-nums.grade .r-num + .r-num { box-shadow: inset 1px 0 0 var(--line); }
}

/* ── Selos ─────────────────────────────────────────────────────────────────
   Atributo de linha vira selo, nunca mais uma linha solta de texto. */
.r-selos { display: flex; gap: var(--e1); flex-wrap: wrap; margin-top: 6px; }
.r-selo {
  font-size: var(--t-micro); font-weight: 600; line-height: 1.5;
  padding: 2px 7px; border-radius: var(--raio-selo);
  background: var(--card); color: var(--soft); white-space: nowrap;
}
.r-selo.neon { background: var(--neon); color: var(--ink); font-weight: 700; }
.r-selo.fora { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--muted); }
/* O selo de AÇÃO: grafite cheio com o texto em neon, o par mais forte da marca.
   É o que diz "esta linha faz alguma coisa", contra o selo cinza que só informa
   um atributo. Um por linha, no máximo. */
.r-selo.acao { background: var(--ink); color: var(--neon); font-weight: 700; }
.r-selo.num {
  font-family: var(--ui); font-weight: 900; font-size: 9.5px;
  letter-spacing: 0.06em; padding: 3px 7px;
}

/* ── Chips ─────────────────────────────────────────────────────────────────
   O selo é passivo (um atributo da linha). O CHIP é a versão tocável: um corre
   dentro do dia, na agenda. Mesma família visual, alvo de 44px e estado.
   `on` = aberto agora; `fui` = você esteve; `vou` = você avisou que vai. */
.r-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.r-chip {
  display: inline-flex; align-items: center; gap: 7px; position: relative;
  font-family: var(--texto); font-size: var(--t-meta); font-weight: 500;
  padding: 7px 11px; border-radius: var(--raio-selo);
  background: var(--card); color: var(--soft);
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
}
.r-chip::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.r-chip.fui { background: var(--neon); color: var(--ink); font-weight: 700; }
.r-chip.on { background: var(--surface); border-color: var(--ink); color: var(--ink); font-weight: 600; }
/* Cancelado continua na agenda, riscado: sumir faria parecer que nunca foi
   combinado, e quem já tinha se organizado ficaria sem entender. */
.r-chip.cancelado { text-decoration: line-through; color: var(--muted); }
.r-chip .n {
  font-family: var(--ui); font-weight: 900; font-size: 10px;
  background: var(--neon); color: var(--ink); border-radius: 4px; padding: 2px 5px;
}
.r-chip.vou .n { background: var(--ink); color: var(--neon); }
.r-chip.fui .n { background: rgba(0,0,0,0.12); color: var(--ink); }

/* ── Pessoas ───────────────────────────────────────────────────────────────
   A fileira de quem vai / quem foi. Retrato pequeno e nome, sem caixa. */
.r-pessoas { display: flex; flex-wrap: wrap; gap: 6px; }
.r-pessoa {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border-radius: 999px;
  padding: 4px 12px 4px 4px; font-size: 14px;
}
/* Você no meio da lista: procurar o próprio nome numa lista de vinte é o
   primeiro reflexo de quem abre um corre que já passou. */
.r-pessoa.eu { background: var(--neon); font-weight: 600; }
.r-avatar.p { width: 26px; height: 26px; font-size: 9.5px; }
.r-pessoa.eu .r-avatar.p { background-color: rgba(0,0,0,0.10); color: var(--soft); }

/* ── Botões ────────────────────────────────────────────────────────────────
   Três, e só três: principal (neon), fantasma e perigo. O botão de texto
   sublinhado se aposenta: ele era link disfarçado de botão, com alvo de dedo
   do tamanho de uma palavra. */
.r-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 44px; padding: var(--e3) var(--e5);
  font-family: var(--ui); font-weight: 700; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: none; border-radius: var(--raio-ctl); cursor: pointer; text-decoration: none;
  background: var(--neon); color: var(--ink);
}
.r-btn.bloco { display: flex; width: 100%; }
.r-btn.peq { min-height: 40px; padding: var(--e2) var(--e4); font-size: 11px; }
/* Grafite com neon, o par mais forte da marca. É o botão que ACOMPANHA um
   valor (copiar o código), onde o neon cheio competiria com o benefício em
   neon logo acima. */
.r-btn.escuro { background: var(--ink); color: var(--neon); }
.r-btn.fantasma { background: transparent; color: var(--soft); box-shadow: inset 0 0 0 1.5px var(--border); }
.r-btn.fantasma:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.r-btn.perigo { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1.5px rgba(200,54,47,0.3); }
.r-btn:disabled { opacity: 0.45; cursor: default; }

/* O botão de método da tela de entrar: um por caminho (Apple, Google, e-mail),
   largura cheia, com a marca do provedor na frente do nome. É o fantasma com o
   branco da superfície por dentro, porque ali ele NÃO mora dentro de um card:
   fica solto no papel, e é ele mesmo quem faz a superfície. Mais alto que os
   outros (54px) porque escolher o método é a única decisão daquela tela.
   O ícone é do provedor, não nosso: tamanho fixo, e o alinhamento sai da
   esquerda pra que os três nomes comecem na mesma coluna. */
.r-btn.social {
  justify-content: flex-start; gap: var(--e3);
  min-height: 54px; padding: var(--e3) var(--e4);
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--border);
}
.r-btn.social:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.r-btn.social > svg { flex: 0 0 auto; width: 20px; height: 20px; }
/* Os métodos empilhados. Grid e não margem solta em cada botão: a lista muda
   de tamanho conforme os flags de provedor, e espaçamento por irmão some junto
   com o irmão. */
.r-opcoes { display: grid; gap: var(--e2); }

/* ── Formulário ────────────────────────────────────────────────────────────
   O campo é linha de leitura: DM Sans, 15px, nunca caixa alta. */
.r-campo { display: block; font-weight: 600; font-size: var(--t-corpo); margin: var(--e5) 0 var(--e2); }
.r-campo:first-child { margin-top: 0; }
.r-dica { font-size: var(--t-meta); color: var(--muted); margin-top: 6px; line-height: 1.45; }

/* Todo tipo de campo que o app usa está nesta lista. Um tipo que fica de fora
   (foi o caso do `time` e do `search`) não herda nada e sai com a aparência do
   fabricante do navegador no meio de um formulário do sistema. */
.r-input, .r-tela input[type=text], .r-tela input[type=email],
.r-tela input[type=tel], .r-tela input[type=date], .r-tela input[type=time],
.r-tela input[type=search], .r-tela input[type=number], .r-tela input[type=password],
.r-tela textarea {
  width: 100%; font-family: var(--texto); font-size: var(--t-corpo); color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--raio-ctl);
  padding: var(--e3) var(--e4); outline: none; min-height: 48px; min-width: 0;
}
.r-sup .r-input, .r-sup input[type=text], .r-sup input[type=email],
.r-sup input[type=tel], .r-sup input[type=date], .r-sup textarea { background: var(--bg); }
/* O seletor perde a aparência do sistema operacional e vira um campo igual aos
   outros, com a seta desenhada por nós: sem isto ele é o único controle da tela
   com fonte, altura e raio do fabricante do navegador. */
.r-tela select {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-width: 0;
  font-family: var(--texto); font-size: var(--t-corpo); color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--raio-ctl);
  padding: var(--e3) var(--e5) var(--e3) var(--e4); min-height: 48px; outline: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--soft) 50%),
                    linear-gradient(135deg, var(--soft) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.r-tela select:focus { border-color: var(--ink); }
.r-tela select:disabled { opacity: 0.5; }
/* Seletor CURTO, dentro de uma linha (quem puxa cada corre, na escala). A
   largura é fixa de propósito: acompanhando o nome, cada linha ficava de um
   tamanho e a coluna virava um serrote. */
.r-tela select.curto {
  width: 138px; flex-shrink: 0; min-height: 42px; font-size: 14px;
  padding: var(--e2) var(--e5) var(--e2) var(--e3);
}
.r-tela select.curto.vazio { color: var(--muted); }

.r-tela textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.r-tela input:focus, .r-tela textarea:focus { border-color: var(--ink); }
.r-tela input::placeholder, .r-tela textarea::placeholder { color: var(--faint); }
.r-tela input[type=file] { display: none; }

/* Caixa de marcar com rótulo e explicação. O <label> envolve tudo, então o alvo
   é a linha inteira e não o quadrado de 20px. */
.r-marcar { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-corpo); cursor: pointer; }
.r-marcar input[type=checkbox] {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; accent-color: var(--ink);
}
.r-marcar > span { flex: 1; min-width: 0; }
.r-marcar .r-dica { margin-top: 2px; }
.r-marcar + .r-marcar { margin-top: var(--e3); }

/* Dois campos lado a lado, empilhados no celular. */
.r-duas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
@media (max-width: 560px) { .r-duas { grid-template-columns: 1fr; } }

/* Prévia de imagem (a logo do parceiro antes de salvar). */
.r-previa {
  background: var(--card); border-radius: var(--raio-ctl); padding: var(--e4);
  display: flex; align-items: center; justify-content: center; min-height: 96px;
  color: var(--muted); font-size: 14px;
}
.r-previa img { max-width: 100%; max-height: 90px; object-fit: contain; }

/* Escolher a foto. É um <label> vestido de botão fantasma, e não a palavra
   sublinhada de antes: "Escolher foto" com sublinhado tinha alvo de dedo do
   tamanho da palavra e se lia como link no meio do formulário. */
.r-foto { display: flex; align-items: center; gap: var(--e4); }
/* Só o bloco de texto estica. `> div` pegava o avatar junto (ele também é um
   div) e o círculo de 72px virava uma elipse da largura da coluna. */
.r-foto > div:last-child { flex: 1; min-width: 0; }

/* Lista longa dentro de uma superfície (achar-se na árvore, escolher um corre).
   Rola por dentro em vez de esticar a tela. */
.r-rolagem { max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ── A banda ───────────────────────────────────────────────────────────────
   Uma região de sangria completa DENTRO de uma superfície: o detalhe que abre
   embaixo de uma linha na agenda, o benefício em neon no cartão do parceiro.

   NÃO é um card dentro da superfície, que seria caixa dentro de caixa: é uma
   faixa encostada nas duas laterais, sem raio e sem borda. É justamente a
   ausência de raio que faz ela ler como "isto pertence ao bloco acima" em vez
   de "isto é outra coisa".

   Três tons: `papel` (o fundo da página, para conteúdo expandido), `neon` (o
   destaque, um por superfície) e `calma` (cinza, para o que ainda não vale). */
.r-banda { padding: var(--e4); box-shadow: inset 0 1px 0 var(--line); }
.r-banda.papel { background: var(--bg); }
.r-banda.neon { background: var(--neon); color: var(--ink); box-shadow: none; }
.r-banda.calma { background: var(--card); color: var(--soft); box-shadow: none; }

/* Rótulo interno da banda: menor que o rótulo de seção da página, porque está
   um nível abaixo dele. */
.r-banda-rot {
  display: block; font-family: var(--ui); font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.r-banda.neon .r-banda-rot { color: var(--ink); opacity: 0.6; }
.r-banda-titulo { font-family: var(--ui); font-weight: 900; font-size: var(--t-titulo); letter-spacing: -0.01em; }
/* A versão herói do título da banda: o benefício em si, que é o motivo de a
   tela de Benefícios existir. */
.r-banda-titulo.forte { font-size: 18px; letter-spacing: -0.02em; line-height: 1.2; margin-top: 6px; }
.r-banda-sub { font-size: var(--t-meta); color: var(--muted); margin-top: var(--e1); }
.r-banda.neon .r-banda-sub, .r-banda.calma .r-banda-sub { color: inherit; font-size: 14px; margin-top: var(--e2); line-height: 1.5; }
/* Rótulo de um bloco DENTRO da banda (a lista de quem vai, no detalhe do
   corre): precisa de ar em cima porque abre um assunto novo. */
.r-banda .r-banda-rot.solto { margin-top: var(--e4); margin-bottom: var(--e2); }

/* ── QR e código do corre ──────────────────────────────────────────────────
   O par que quem lidera mostra no fim do corre, com vinte pessoas esperando na
   calçada. Os dois precisam ser lidos de longe, e nenhum dos dois pode vazar da
   tela num celular. Abaixo de 430px empilham e o código cresce, porque aí a
   pessoa está segurando o aparelho no alto pra todo mundo ver. */
.r-qr { display: flex; align-items: center; gap: 18px; }
.r-qr-imagem {
  width: 132px; height: 132px; flex-shrink: 0;
  background: #fff; border-radius: 8px; padding: 5px;
}
.r-qr-imagem svg { display: block; width: 100%; height: 100%; }
.r-qr > div:last-child { min-width: 0; }
/* Grafite cheio, sempre: o código herda a cor da banda que o carrega, e na
   banda `calma` isso o deixava cinza. Ele é a coisa que alguém lê de três
   metros de distância, na calçada. */
.r-codigo {
  font-family: var(--ui); font-weight: 900; color: var(--ink);
  font-size: clamp(26px, 8.5vw, 40px); letter-spacing: 0.06em; line-height: 1;
}
@media (max-width: 430px) {
  .r-qr { flex-direction: column; align-items: stretch; text-align: center; gap: 14px; }
  .r-qr-imagem { width: 168px; height: 168px; margin: 0 auto; }
  .r-codigo { font-size: 44px; letter-spacing: 0.12em; }
}

/* ── Valor copiável ────────────────────────────────────────────────────────
   O código de desconto. Fonte monoespaçada e grande, e um botão do tamanho do
   dedo ao lado: ninguém quer digitar isso na frente do caixa. O tracejado diz
   "isto é para levar", contra a borda sólida dos campos que se preenchem. */
.r-copia { display: flex; gap: var(--e2); align-items: stretch; }
.r-copia-valor {
  flex: 1; min-width: 0; display: flex; align-items: center;
  background: var(--bg); border: 1.5px dashed var(--border); border-radius: var(--raio-ctl);
  padding: var(--e3) var(--e4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 19px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink);
  overflow-x: auto; white-space: nowrap;
}

/* ── Marca do parceiro ─────────────────────────────────────────────────────
   Ocupa o lugar do retrato na linha. Sem logo NÃO desenha a caixa: a caixa
   vazia empurrava o nome 68px pra direita e parecia imagem que não carregou. */
.r-marca {
  flex-shrink: 0; width: 62px; height: 44px; border-radius: var(--raio-selo);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.r-marca img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Logo clara (a do Ultra100K é amarela com o subtítulo em branco) sumiria no
   branco da superfície; o dado do parceiro diz de que cor é o fundo que ela pede. */
.r-marca.escuro { background: var(--ink); padding: 5px 7px; }

/* ── Caminho ───────────────────────────────────────────────────────────────
   O rastro até a raiz da árvore. Era uma fila de palavras SUBLINHADAS, que é
   o padrão que este sistema aposenta: sublinhado no meio de texto lê como
   link solto e o alvo do dedo vira do tamanho da palavra. Aqui cada passo é
   um alvo de 44px, e o último, que é onde você está, é o único em grafite. */
.r-caminho {
  display: flex; align-items: center; gap: 2px; padding: var(--e2) 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.r-caminho::-webkit-scrollbar { display: none; }
.r-caminho button {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-family: var(--texto); font-size: var(--t-meta); font-weight: 500;
  color: var(--muted); padding: var(--e3) 6px; white-space: nowrap;
}
.r-caminho button:hover { color: var(--ink); }
.r-caminho button:last-of-type { color: var(--ink); font-weight: 600; }
.r-caminho i { flex-shrink: 0; color: var(--faint); font-style: normal; font-size: 12px; }

/* ── Foco ──────────────────────────────────────────────────────────────────
   A pessoa em destaque na árvore. O traço neon no topo é o que marca "este é o
   bloco principal" sem desenhar uma borda de 2px em volta da superfície. */
.r-foco { text-align: center; padding: var(--e5) var(--e4); border-top: 3px solid var(--neon); }
.r-foco .r-avatar { width: 84px; height: 84px; font-size: 24px; margin: 0 auto var(--e3); }
.r-foco-nome {
  font-family: var(--ui); font-weight: 900; font-size: clamp(21px, 5.6vw, 27px);
  letter-spacing: -0.02em; line-height: 1.1;
}
.r-foco .r-selos { justify-content: center; margin-top: var(--e3); }

/* O fio que liga uma pessoa à outra na árvore. */
.r-conector { width: 2px; height: 16px; background: var(--line); margin: 0 auto; }

/* Linha desabilitada (corre que ainda não abriu, ou já encerrou). */
.r-linha:disabled { opacity: 0.5; cursor: default; }
.r-linha:disabled::after { display: none; }
/* Desabilitada porque JÁ ESTÁ FEITA é outra coisa: não há o que fazer, mas o
   estado é bom. Esmaecer a linha da presença confirmada fazia a conquista
   parecer indisponível. */
.r-linha:disabled.feito { opacity: 1; }

/* ── Pills de filtro ───────────────────────────────────────────────────────
   Filtrar uma lista. Não confundir com o seletor de modo: pill filtra por
   categoria, e várias podem existir. A ativa é grafite cheio. */
/* A altura é reservada porque as pills nascem vazias e só aparecem depois da
   lista chegar: sem reserva, tudo que vem abaixo desce de uma vez nesse
   momento. 100px é medido, duas linhas num celular de 375px. */
.r-pills { display: flex; gap: 6px; flex-wrap: wrap; padding: var(--e2) 0; min-height: 100px; }
@media (min-width: 480px) { .r-pills { min-height: 60px; } }
.r-pill {
  font-family: var(--ui); font-weight: 700; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--surface); color: var(--soft);
  border: none; box-shadow: inset 0 0 0 1.5px var(--border);
  border-radius: var(--raio-selo); padding: 9px 13px; cursor: pointer;
  position: relative;
}
.r-pill.on { background: var(--ink); color: var(--bg); box-shadow: none; }
.r-pill b { font-weight: 700; opacity: 0.6; margin-left: 5px; }
/* O alvo de dedo cresce até 44px sem a pill crescer junto. */
.r-pill::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

/* ── Faixa de alerta ───────────────────────────────────────────────────────
   Uma só, no lugar do .aviso e do .nudge, que eram dois componentes fazendo o
   mesmo trabalho. O "×" é o que faz o lembrete ser pedido e não cobrança. */
.r-faixa {
  display: flex; align-items: flex-start; gap: var(--e3);
  background: var(--card); border-radius: var(--raio-ctl);
  padding: var(--e3) var(--e2) var(--e3) var(--e4); margin-top: var(--e3);
  font-size: 14px; line-height: 1.45;
}
.r-faixa.ok { background: rgba(204,255,0,0.34); }
.r-faixa.ruim { background: #fbeceb; color: #8a2420; }
.r-faixa-corpo { flex: 1; min-width: 0; }
.r-faixa-corpo b { display: block; font-weight: 600; font-size: var(--t-corpo); line-height: 1.3; }
.r-faixa-corpo span { display: block; font-size: var(--t-meta); color: var(--muted); margin-top: 3px; }
.r-faixa-corpo a {
  display: inline-block; margin-top: var(--e2); font-size: 14px; font-weight: 600;
  color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--neon); padding-bottom: 2px;
}
.r-faixa-x {
  flex-shrink: 0; width: 40px; height: 40px; margin: -4px 0 0 0; padding: 0;
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 22px; line-height: 1;
}
.r-faixa-x:hover { color: var(--ink); }

/* ── Vazio ─────────────────────────────────────────────────────────────────
   Uma linha curta. Tela nenhuma renderiza em branco. */
.r-vazio { padding: var(--e6) var(--e4); text-align: center; color: var(--muted); font-size: 14px; }

/* ── A capa tipográfica ────────────────────────────────────────────────────
   O card de destaque da direção adidas Running (ago/26): grafite, uma palavra
   gigante ecoando atrás em contorno e a informação em CHIPS
   empilhados no pé, cada um com fundo próprio, como etiqueta sobre foto.
   No lugar de foto, tipografia, que é a linguagem das artes do clube.
   É <a> quando leva pra algum lugar, como toda superfície navegável. */
.r-capa {
  position: relative; display: block; overflow: hidden;
  background: var(--ink); border-radius: var(--raio-sup);
  min-height: 190px; margin-top: var(--e2); text-decoration: none;
}
.r-capa .eco {
  position: absolute; right: -10px; top: 6px; pointer-events: none;
  font-family: var(--ui); font-weight: 900; font-size: 62px; line-height: 0.95;
  letter-spacing: -0.01em; text-transform: uppercase; text-align: right;
  white-space: pre-line; color: transparent; -webkit-text-stroke: 1px #3a3a34;
}
.r-capa-chips {
  position: absolute; left: 14px; bottom: 14px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  max-width: calc(100% - 28px);
}
.r-capa-chip {
  background: var(--surface); color: var(--ink);
  font-family: var(--texto); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 9px; white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.r-capa-chip.titulo { font-family: var(--ui); font-size: 13px; letter-spacing: 0.01em; padding: 8px 10px; }
.r-capa-chip.neon { background: var(--neon); }

/* Cabeça de seção com ação: o rótulo à esquerda e um "Ver tudo" à direita,
   sublinhado grosso, no jeito da referência. Usar só quando a seção TEM uma
   tela inteira dela; um sublinhado prometendo nada é pior que nada. */
.r-secao-linha {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--e3); margin: var(--e5) 0 var(--e2); padding: 0 var(--e1);
}
.r-secao-linha .r-secao { margin: 0; padding: 0; }
.r-secao-mais {
  flex-shrink: 0; font-family: var(--texto); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
}
/* O alvo de 44px do sublinhado pequeno, mesmo truque do .r-chip. */
.r-secao-mais { position: relative; }
.r-secao-mais::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }

/* ── Cartões-botão ─────────────────────────────────────────────────────────
   Navegação em grade de dois: o índice do Clube. Cada cartão é uma superfície
   pequena com título e uma linha de contexto. Grade e não linhas porque aqui a
   tela É um índice: quatro destinos de peso igual, não uma lista de itens. */
.r-atalhos {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3);
  margin-top: var(--e2);
}
.r-atalho {
  background: var(--surface); border-radius: var(--raio-sup);
  box-shadow: 0 1px 0 rgba(26,26,24,0.05), 0 0 0 1px rgba(26,26,24,0.045);
  padding: var(--e4); text-decoration: none; color: var(--ink);
}
.r-atalho b {
  display: block; font-family: var(--ui); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.r-atalho span {
  display: block; font-size: var(--t-meta); color: var(--muted);
  line-height: 1.4; margin-top: var(--e1);
}
/* O ícone mora no topo do cartão, acima do título: âncora visual antes da
   palavra, na direção adidas. Traço fino geométrico, definido no nav.js e
   injetado por svgNav, pra fonte da verdade dos ícones ser uma só. */
.r-atalho > svg {
  display: block; width: 26px; height: 26px; color: var(--ink);
  margin-bottom: var(--e3);
}

/* ── Carrossel ─────────────────────────────────────────────────────────────
   Capas em fileira com rolagem própria. A rolagem estoura o padding da tela
   de propósito, pra última capa sumir na borda e dizer que tem mais. */
.r-rolo {
  display: flex; gap: var(--e3); overflow-x: auto;
  margin: var(--e2) calc(-1 * var(--e4)) 0; padding: 0 var(--e4) var(--e2);
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.r-rolo::-webkit-scrollbar { display: none; }
.r-rolo > .r-capa { flex: 0 0 250px; min-height: 170px; margin-top: 0; scroll-snap-align: start; }