/* socialclub/estilo.css — a fundação visual do site do Social Club (socialclub.sanmarinokart.com.br).
   «Noite de gala» (direção do Hugo, 22/10/2026: «cores mais fortes, de mais destaque», com os sites de jogo de
   referência — o GTA Online: fundo quase preto, vermelho saturado, título branco grosso, a força da imagem e do contraste):
   · um tema só, escuro, como os sites de jogo. O fundo vai fundo (#121011); a faixa onde o selo aparece leva o preto do selo
     (#231F20, o fundo do arquivo sc-selo-creme-no-preto, que não se recorta): ela parece de propósito, não um quadrado
   · vermelho em BLOCO, não em fio: o #B80000 do selo em faixa ou peça inteira (o fim da vitrine, o cartão do sócio), com
     texto branco ou creme; o botão de ação em #D40000 com texto branco em negrito; o #FF0000 do kartódromo só em detalhe
     pequeno (a zebra curta da assinatura, no rodapé)
   · texto: creme #EBE8E8 nos títulos grandes, branco no texto corrido, cinza só no texto de apoio (≥ 4,5:1 onde estiver)
   · letra: Montserrat; título em 900, caixa alta, entreletra justa, grande — o equivalente da casa ao condensado dos sites de jogo
   · um gesto forte por página: o título enorme em creme sobre o preto, e uma faixa vermelha cheia. Fora: mancha de cor
     desfocada, brilho em texto, degradê em cartão, cartão com faixa colorida em cima, dourado, título com a segunda linha
     em outra cor, emoji, ícone genérico empilhado
   · as fotos reais da pista, em cor (a força vem da imagem)
   · cor só por papel, declarada no bloco :root; fora dele, nenhuma cor literal (o guarda reprova)
   · escala tipográfica nomeada; espaço em grade de 4; movimento em 3 durações e 3 curvas; prefers-reduced-motion zera
   · alvo de toque de 44 px (48 no botão principal); campo com 16 px (o iPhone não amplia a tela)                     */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fontes/montserrat-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  /* a marca do Social Club (medida no selo) e a do kartódromo */
  --marca: #b80000;            /* o vermelho do selo: a faixa e a peça inteira (branco sobre ele: 6,9:1) */
  --acao: #d40000;             /* o vermelho-ação do botão (branco em negrito sobre ele: 5,5:1) — para o Hugo aprovar */
  --acao-tinta: #ffffff;
  --casa: #ff0000;             /* o vermelho do kartódromo: só o detalhe pequeno da assinatura */
  --casa-claro: #f4f1f1;       /* o branco da zebra da casa */
  /* superfícies */
  --fundo: #121011;            /* a página */
  --selo-fundo: #231f20;       /* = o fundo do arquivo sc-selo-creme-no-preto: a faixa onde o selo aparece */
  --painel: #1c191a;           /* o cartão de formulário, o bloco */
  --painel-2: #272324;         /* o selecionado, a pílula, o botão comum */
  --linha: #322d2e;            /* filete: enfeite, não identifica controle */
  --linha-forte: #4a4344;
  --borda-campo: #857d7e;      /* a borda que DIZ onde está o campo: 4,7:1 sobre o fundo, 4,4:1 sobre o painel (WCAG 1.4.11) */
  /* tinta */
  --titulo: #ebe8e8;           /* o creme do selo nos títulos grandes: 15,6:1 sobre o fundo */
  --tinta: #ffffff;            /* o texto corrido: 19:1 */
  --tinta-2: #bbb4b5;          /* o texto de apoio: 7,6:1 sobre o painel-2 */
  --tinta-suave: #a29b9c;      /* legenda e instrução: 5,7:1 sobre o painel-2, 6,0:1 sobre a faixa do selo */
  --foco: #ffffff;             /* o anel do foco: branco, visível no preto e no vermelho */
  /* o vermelho em bloco: o que vai em cima dele */
  --sobre-marca: #ffffff;      /* 6,9:1 */
  --sobre-marca-titulo: #ebe8e8; /* 5,7:1 */
  --sobre-marca-2: #f6dcdc;    /* o apoio sobre o vermelho: 5,3:1 */
  --marca-funda: #8f0000;      /* a pílula dentro do cartão vermelho (branco sobre ela: 9,7:1) */
  /* estados — cor E texto, nunca só cor */
  --ok: #7fcf9f;     --ok-suave: #1b2a21;
  --aviso: #e6b85c;  --aviso-suave: #30281a;
  --erro: #ff8a80;   --erro-suave: #361f20;
  --info: #9cc3ec;   --info-suave: #1c2531;
  --sombra: rgba(0, 0, 0, .5);
  --esqueleto: #241f20;
  --esqueleto-brilho: #2f2a2b;

  /* tipografia: Montserrat em tudo; o título em 900, caixa alta, entreletra justa */
  --fonte: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --t-hero: 900 clamp(48px, 8.6vw, 116px)/.9 var(--fonte);       /* a abertura da vitrine */
  --t-display: 900 clamp(36px, 6vw, 76px)/.95 var(--fonte);      /* a frase grande das faixas */
  --t-secao: 900 clamp(30px, 4.4vw, 52px)/1 var(--fonte);        /* o título de seção da vitrine */
  --t-pagina: 900 clamp(30px, 3.8vw, 42px)/1.02 var(--fonte);    /* o h1 das páginas de conta */
  --t-bloco: 800 21px/1.25 var(--fonte);                         /* o título de bloco (área, documento) */
  --t-passo: 900 64px/1 var(--fonte);                            /* o número do passo (como funciona) */
  --t-numero: 900 clamp(22px, 7.4vw, 32px)/1.05 var(--fonte);    /* o número de sócio: cabe numa linha do cartão, de 320 px a 1280 */
  --t-lead: 500 clamp(17px, 1.9vw, 20px)/1.55 var(--fonte);
  --t-corpo: 500 16px/1.6 var(--fonte);
  --t-detalhe: 500 14px/1.55 var(--fonte);
  --t-legenda: 500 13px/1.5 var(--fonte);
  --t-rotulo: 700 11px/1.3 var(--fonte);                         /* caixa alta espaçada, como a assinatura do selo */
  --espaco-titulo: -.025em;
  --espaco-rotulo: .22em;

  /* espaço (grade de 4) e raio (cantos quase retos) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px;
  --e12: 48px; --e16: 64px; --e20: 80px; --e24: 96px;
  --r-campo: 3px; --r-cartao: 4px; --r-pilula: 999px;
  --largura: 1180px;

  /* movimento */
  --d-curta: 120ms; --d-media: 200ms; --d-longa: 320ms;
  --c-sai: cubic-bezier(.4, 0, 1, 1);
  --c-entra: cubic-bezier(0, 0, .2, 1);
  --c-padrao: cubic-bezier(.4, 0, .2, 1);

  /* toque */
  --toque: 44px;
  --toque-primario: 48px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-curta: 0ms; --d-media: 0ms; --d-longa: 0ms; }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--fundo); color: var(--tinta); font: var(--t-corpo); }
body > main, .palco { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
em { font-style: normal; }
ol, ul { padding: 0; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
strong, b { font-weight: 700; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--r-campo); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: var(--e4); top: -100px; z-index: 30; padding: var(--e3) var(--e4); border-radius: var(--r-campo);
         background: var(--acao); color: var(--acao-tinta); font-weight: 700; text-decoration: none; }
.pular:focus { top: var(--e4); }
/* --pad: a margem da página */
:root { --pad: 16px; }
@media (min-width: 700px) { :root { --pad: 32px; } }
.largura { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--pad); }
.detalhe { font: var(--t-detalhe); color: var(--tinta-2); }
.legenda { font: var(--t-legenda); color: var(--tinta-suave); }
/* o crédito de quem fotografou: sempre a última linha da legenda, debaixo da foto, no cinza de apoio (≥ 4,5:1 no fundo) */
.credito { display: block; margin-top: var(--e1); font: var(--t-legenda); color: var(--tinta-suave); }
.num { font-variant-numeric: tabular-nums lining-nums; }
/* o título da casa: Montserrat 900, caixa alta, entreletra justa, em creme (uma cor só: a segunda linha não muda de cor) */
.titulo-casa, .abertura h1, .secao h2, .titulo-faixa, .nao-existe h1 { color: var(--titulo); text-transform: uppercase; letter-spacing: var(--espaco-titulo); }
/* o rótulo pequeno em caixa alta espaçada (a assinatura do selo): só onde rotula algo */
.rotulo-caps { font: var(--t-rotulo); letter-spacing: var(--espaco-rotulo); text-transform: uppercase; color: var(--tinta-2); }
/* o selo: sempre o arquivo inteiro, numa faixa do fundo dele (o guarda confere o --selo-fundo contra o arquivo) */
.selo-marca { background: var(--selo-fundo); }
.selo-marca img { width: 100%; height: auto; }

/* ------------------------------------------------------------------ topo */
/* (22/10, o Hugo: «pode publicar o banner tambem como logotipo no canto superior esquerdo») o cabeçalho inteiro é a faixa
   da cor do fundo do banner (--selo-fundo, a classe selo-marca no HTML): o banner entra sem recorte e sem parecer um
   retângulo solto */
.topo { position: relative; z-index: 2; border-bottom: 1px solid var(--linha); background: var(--selo-fundo); }
/* quando a marca e as ações não cabem numa linha (celular de 320 px), as ações descem para a linha de baixo, à direita */
.topo-dentro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--e3); min-height: 68px; }
/* o logotipo: o banner do Hugo (sc-banner-creme-no-preto, o derivado leve do gerar-derivados.py), 88 px de altura no
   celular e 96 no computador — o «SOCIAL CLUB» do banner ocupa 16% da altura dele, e fica com 14 e 15 px de letra, o tamanho
   do nome em texto que ele substitui. O
   arquivo traz uma borda clara de 1 px na esquerda, na direita e embaixo (o preto do fundo não chega à beirada): o
   clip-path tira da tela só esse 1 px de beirada, sem mexer no arquivo nem no desenho */
.marca { display: inline-flex; align-items: center; min-height: var(--toque); text-decoration: none; flex: none; }
.topo .marca img { width: auto; height: 88px; clip-path: inset(0 1px 1px 1px); }
.topo-acoes { display: flex; align-items: center; gap: var(--e2); flex: none; margin-left: auto; }
@media (min-width: 700px) {
  .topo-dentro { min-height: 76px; }
  .topo .marca img { height: 96px; }
}
@media (max-width: 699px) { .so-largo { display: none !important; } }
@media (max-width: 419px) {
  .topo-dentro { column-gap: var(--e2); }
  .topo-acoes .botao, .topo-acoes button { font-size: 15px; padding: 0 var(--e2); }
  .topo-acoes .botao.primario { padding: 0 var(--e3); }
}

/* ---------------------------------------------------------------- botões */
.botao, button { font: 700 15px/1.2 var(--fonte); letter-spacing: .01em; cursor: pointer; border: 1px solid transparent; border-radius: var(--r-campo);
                 min-height: var(--toque); padding: 0 var(--e5); background: var(--painel-2); color: var(--tinta);
                 display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); text-decoration: none; text-align: center;
                 transition: background-color var(--d-curta) var(--c-padrao), transform var(--d-curta) var(--c-padrao), border-color var(--d-curta) var(--c-padrao); }
.botao:hover, button:hover { filter: brightness(1.12); }
.botao:active, button:active { transform: translateY(1px) scale(.985); }
/* a ação: o vermelho-ação cheio, o texto branco em negrito */
.botao.primario, button.primario { background: var(--acao); color: var(--acao-tinta); font-weight: 800; min-height: var(--toque-primario); padding: 0 var(--e6); }
.botao.secundario, button.secundario { background: transparent; border-color: var(--tinta); color: var(--tinta); }
.botao.fantasma, button.fantasma { background: transparent; color: var(--tinta-2); padding: 0 var(--e3); }
.botao.fantasma:hover, button.fantasma:hover { color: var(--tinta); filter: none; }
button.perigo { background: transparent; border-color: var(--erro); color: var(--erro); }
button.perigo.armado { background: var(--erro); border-color: var(--erro); color: var(--fundo); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
button.ocupado::after { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
                        animation: gira 700ms linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button.ocupado::after { animation-duration: 2400ms; } }
.largo-inteiro { width: 100%; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.link { color: var(--tinta); font-weight: 700; }
.link-linha { display: inline-flex; align-items: center; min-height: var(--toque); font: 600 15px/1.3 var(--fonte); color: var(--tinta); }
/* o bloco vermelho cheio (a faixa do fim da vitrine, o cartão do sócio): branco e creme por cima; a ação vira creme, para
   não sumir vermelho sobre vermelho */
.bloco-vermelho { background: var(--marca); color: var(--sobre-marca); }
.bloco-vermelho .botao.primario, .bloco-vermelho button.primario { background: var(--titulo); color: var(--selo-fundo); }
.bloco-vermelho .botao.secundario, .bloco-vermelho button.secundario { border-color: var(--sobre-marca); color: var(--sobre-marca); }
.bloco-vermelho a:not(.botao) { color: var(--sobre-marca); }
.bloco-vermelho .legenda, .bloco-vermelho .detalhe { color: var(--sobre-marca-2); }

/* ---------------------------------------------------------------- campos */
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > label, .campo-rotulo { font: 600 14px/1.3 var(--fonte); color: var(--tinta); }
input, select, textarea { font: 500 16px/1.4 var(--fonte); color: var(--tinta); background: var(--fundo); border: 1px solid var(--borda-campo);
                          border-radius: var(--r-campo); padding: 11px var(--e3); min-height: var(--toque-primario); width: 100%; }
input::placeholder { color: var(--tinta-suave); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; border-color: transparent; }
input[aria-invalid="true"] { border-color: var(--erro); }
.ajuda { font: var(--t-legenda); color: var(--tinta-suave); min-height: 19px; }
.ajuda:empty { min-height: 0; }   /* campo sem linha de apoio não abre vão; o erro, quando vem, aparece ali */
.ajuda.erro { color: var(--erro); font-weight: 600; }
.ajuda.ok { color: var(--ok); }
.senha-campo { position: relative; }
.senha-campo input { padding-right: 96px; }
.senha-campo .mostrar { position: absolute; right: 2px; top: 2px; min-height: var(--toque); padding: 0 var(--e3); font: 700 14px/1 var(--fonte); color: var(--tinta-2); background: transparent; }
.senha-campo .mostrar:hover { color: var(--tinta); filter: none; }
/* a força da senha: quatro traços e a palavra (nunca só cor) */
.forca { display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: center; gap: var(--e1); }
.forca i { height: 4px; border-radius: 2px; background: var(--linha-forte); transition: background-color var(--d-media) var(--c-padrao); }
.forca span { margin-left: var(--e2); font: 600 13px/1.2 var(--fonte); color: var(--tinta-2); min-width: 7.5em; text-align: right; }
.forca[data-nivel="1"] i:nth-child(-n+1) { background: var(--erro); }
.forca[data-nivel="2"] i:nth-child(-n+2) { background: var(--aviso); }
.forca[data-nivel="3"] i:nth-child(-n+3) { background: var(--ok); }
.forca[data-nivel="4"] i:nth-child(-n+4) { background: var(--ok); }
/* caixa de marcar: o alvo é a linha inteira */
.marcar { display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: start; padding: var(--e3); min-height: var(--toque);
          border: 1px solid var(--borda-campo); border-radius: var(--r-campo); cursor: pointer; font: 500 15px/1.45 var(--fonte); color: var(--tinta); }
.marcar input { width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--acao); }
.marcar:has(input:checked) { border-color: var(--tinta); background: var(--painel-2); }
.marcar:has(input:disabled) { cursor: not-allowed; color: var(--tinta-suave); }
.falta { font: 600 13px/1.45 var(--fonte); color: var(--tinta-2); min-height: 19px; }
.form { display: grid; gap: var(--e4); }
/* o lugar da resposta e da espera, vazio, não abre vão no formulário (e segue no leitor de tela, para avisar quando encher) */
.form > div:empty, .form > .contagem:empty { margin-top: calc(var(--e4) * -1); }

/* -------------------------------------------------------- caixas de aviso */
.caixa { display: grid; gap: var(--e2); padding: var(--e4); border-radius: var(--r-campo); border: 1px solid var(--linha); border-left: 3px solid var(--info);
         background: var(--info-suave); font: var(--t-detalhe); color: var(--tinta); }
.caixa h2, .caixa h3, .caixa .caixa-titulo { font: 700 16px/1.35 var(--fonte); }
.caixa.ok { border-left-color: var(--ok); background: var(--ok-suave); }
.caixa.erro { border-left-color: var(--erro); background: var(--erro-suave); }
.caixa.espera { border-left-color: var(--aviso); background: var(--aviso-suave); }
.caixa .acoes { margin-top: var(--e1); }
.caixa ul { padding-left: var(--e5); display: grid; gap: var(--e1); }

/* ---------------------------------------------- estados: esqueleto, vazio, falha */
.esqueleto { border-radius: var(--r-campo); min-height: 18px;
             background: linear-gradient(90deg, var(--esqueleto) 0%, var(--esqueleto-brilho) 50%, var(--esqueleto) 100%);
             background-size: 200% 100%; animation: brilho 1.3s var(--c-padrao) infinite; }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }
.esqueleto.linha-texto { height: 14px; min-height: 14px; }
.esqueleto.curto { width: 45%; }
.esqueleto.medio { width: 70%; }
.esqueleto.bloco { height: 64px; }
.esqueletos { display: grid; gap: var(--e3); overflow: hidden; }
.vazio, .falha, .sem-sessao { display: grid; gap: var(--e3); justify-items: start; padding: var(--e6); border-radius: var(--r-cartao);
                              border: 1px dashed var(--linha-forte); background: var(--painel); }
.vazio p:first-child, .falha p:first-child, .sem-sessao p:first-child { font: 700 17px/1.35 var(--fonte); }
.falha { border-style: solid; border-color: var(--erro); background: var(--erro-suave); }
.falha.sem-rede { border-color: var(--aviso); background: var(--aviso-suave); }   /* sem conexão não é erro do servidor */
.sem-sessao { border-style: solid; border-color: var(--linha); }

/* ---------------------------------------------------------- pílula e contador */
.pilula { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pilula); font: 600 13px/1.3 var(--fonte);
          white-space: nowrap; color: var(--tinta-2); background: var(--painel-2); border: 1px solid var(--linha); }
.pilula::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pilula.ok { color: var(--ok); background: var(--ok-suave); border-color: transparent; }
.pilula.espera { color: var(--aviso); background: var(--aviso-suave); border-color: transparent; }
.pilula.erro { color: var(--erro); background: var(--erro-suave); border-color: transparent; }
.pilula.info { color: var(--info); background: var(--info-suave); border-color: transparent; }
/* o contador sobre a aba (a classe se chama selo desde antes da marca nova: é o número de pedidos, não o selo do clube) */
.selo { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-pilula);
        font: 800 12px/1 var(--fonte); background: var(--acao); color: var(--acao-tinta); }

/* ------------------------------------------------------------------ toast */
#toasts { position: fixed; left: var(--e4); right: var(--e4); bottom: var(--e4); z-index: 40; display: grid; gap: var(--e2); justify-items: center; pointer-events: none; }
@media (min-width: 700px) { #toasts { left: auto; justify-items: end; max-width: 440px; } }
.toast { pointer-events: auto; padding: var(--e3) var(--e4); border-radius: var(--r-campo); background: var(--painel-2); color: var(--tinta);
         border: 1px solid var(--linha-forte); border-left: 3px solid var(--ok); box-shadow: 0 8px 24px var(--sombra); font: 600 15px/1.4 var(--fonte);
         max-width: 100%; animation: entra var(--d-longa) var(--c-entra);
         transition: opacity var(--d-media) var(--c-sai), transform var(--d-media) var(--c-sai); }
.toast.erro { border-left-color: var(--erro); }
.toast.info { border-left-color: var(--info); }
.toast.sai { opacity: 0; transform: translateY(8px); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------- rodapé: a assinatura do kartódromo */
.rodape { padding: var(--e10) 0 var(--e12); font: var(--t-legenda); background: var(--fundo); color: var(--tinta-2); border-top: 1px solid var(--linha); }
.rodape .largura { display: grid; gap: var(--e6); }
.rodape nav { display: flex; flex-wrap: wrap; gap: 0 var(--e5); }
.rodape nav a { display: inline-flex; align-items: center; min-height: var(--toque); color: var(--tinta); font: 600 14px/1.3 var(--fonte); }
.assinatura { display: grid; gap: var(--e3); justify-items: start; padding-top: var(--e6); border-top: 1px solid var(--linha); }
.assinatura img { width: 116px; height: 44px; }
/* o detalhe do kartódromo: um trecho curto da zebra da pista, debaixo do logotipo — o único lugar do #FF0000 */
.assinatura-zebra { width: 66px; height: 4px; background: repeating-linear-gradient(90deg, var(--casa) 0 11px, var(--casa-claro) 11px 22px); }

/* ================================================================ A VITRINE */
/* a abertura: a faixa do preto do selo, o selo inteiro e o título enorme em creme */
.abertura { padding: 0 0 var(--e12); }
.abertura-dentro { display: grid; align-items: center; }
/* o selo tem margem própria (o fundo dele, da mesma cor da faixa); a margem negativa aproxima o texto sem cobrir o desenho */
.abertura-selo { --lado: min(80vw, 380px); width: var(--lado); margin: calc(var(--lado) * -.08) auto calc(var(--lado) * -.17); }
.abertura-texto { display: grid; gap: var(--e5); justify-items: start; max-width: 680px; }
.abertura h1 { font: var(--t-hero); }
.abertura-lead { max-width: 36ch; font: var(--t-lead); color: var(--tinta); }
.abertura-quando { font: 600 15px/1.45 var(--fonte); color: var(--tinta-2); }
.abertura .acoes { margin-top: var(--e2); }
@media (min-width: 900px) {
  .abertura { padding: var(--e10) 0 var(--e16); }
  .abertura-dentro { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--e8); }
  .abertura-selo { --lado: min(38vw, 500px); order: 2; margin: calc(var(--lado) * -.08) 0 calc(var(--lado) * -.1) auto; }
  .abertura-texto { order: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .abertura-selo img { animation: assenta 900ms var(--c-entra) both; }
  @keyframes assenta { from { opacity: 0; } }
  .abertura-texto > * { animation: sobe var(--d-longa) var(--c-entra) both; }
  .abertura-texto > :nth-child(2) { animation-delay: 80ms; }
  .abertura-texto > :nth-child(3) { animation-delay: 160ms; }
  .abertura-texto > :nth-child(4) { animation-delay: 240ms; }
  .abertura-texto > :nth-child(5) { animation-delay: 300ms; }
  @keyframes sobe { from { opacity: 0; transform: translateY(10px); } }
}

/* as seções da vitrine: um filete fino em cima, o título da casa */
.secao { padding: var(--e16) 0; }
.secao + .secao { padding-top: 0; }
.secao-topo { border-top: 1px solid var(--linha-forte); padding-top: var(--e8); }
.secao h2 { font: var(--t-secao); }
.secao .apoio { margin-top: var(--e3); font: var(--t-lead); color: var(--tinta-2); max-width: 46ch; }

/* o que é: a frase grande e o texto ao lado */
.intro .secao-topo { display: grid; gap: var(--e6); }
.intro h2 { max-width: 15ch; }
.intro .texto { display: grid; gap: var(--e4); max-width: 60ch; font: var(--t-lead); color: var(--tinta-2); }
.intro .texto strong { color: var(--tinta); }
@media (min-width: 900px) { .intro .secao-topo { grid-template-columns: 1.1fr 1fr; align-items: start; gap: var(--e10); } }

/* a foto da pista em faixa: inteira na largura, em cor */
.foto-faixa { margin: 0; }
.foto-faixa img { width: 100%; height: clamp(260px, 60vh, 680px); object-fit: cover; }
.foto-faixa.curva img { object-position: 50% 55%; }
.foto-faixa.album img { object-position: 50% 50%; }

/* o que tem: a lista com filetes; a frota ao lado */
.recursos .secao-topo { display: grid; gap: var(--e10); }
.recursos-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.recursos-foto figcaption { margin-top: var(--e2); }
.recursos-lista { margin-top: var(--e8); display: grid; gap: 0 var(--e8); }
.recursos-lista > div { border-top: 1px solid var(--linha-forte); padding: var(--e4) 0 var(--e5); min-width: 0; }
.recursos-lista dt { font: 800 19px/1.25 var(--fonte); color: var(--titulo); }
.recursos-lista dd { margin-top: var(--e2); font: var(--t-detalhe); font-size: 15px; color: var(--tinta-2); }
@media (min-width: 640px) { .recursos-lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .recursos .secao-topo { grid-template-columns: 5fr 7fr; align-items: start; gap: var(--e12); }
  .recursos-foto { position: sticky; top: var(--e8); }
}

/* o álbum: a frase grande debaixo da foto aérea */
.titulo-faixa { font: var(--t-display); }
.titulo-faixa span { display: block; }
.album-texto { display: grid; gap: var(--e5); padding-top: var(--e8); }
.album-texto p { max-width: 46ch; font: var(--t-lead); color: var(--tinta-2); }
@media (min-width: 900px) { .album-texto { grid-template-columns: 1.3fr 1fr; align-items: end; gap: var(--e10); } }

/* como funciona: quatro passos, o número grande em creme */
.passos-como { margin-top: var(--e10); list-style: none; display: grid; gap: var(--e8) var(--e6); }
.passos-como li { display: grid; gap: var(--e2); align-content: start; border-top: 1px solid var(--linha-forte); padding-top: var(--e4); }
.passo-n { font: var(--t-passo); color: var(--titulo); letter-spacing: var(--espaco-titulo); }
.passos-como h3 { font: 800 18px/1.3 var(--fonte); color: var(--titulo); }
.passos-como p { font: var(--t-detalhe); font-size: 15px; color: var(--tinta-2); }
@media (min-width: 640px) { .passos-como { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .passos-como { grid-template-columns: repeat(4, 1fr); } }
.nota-2027 { margin-top: var(--e10); padding: var(--e4) var(--e5); background: var(--painel); border: 1px solid var(--linha); border-radius: var(--r-cartao); font: var(--t-corpo); max-width: 70ch; }

/* dúvidas */
.duvidas .secao-topo > * { max-width: 820px; }
.duvidas h2 { margin-bottom: var(--e5); }
.duvidas details { border-top: 1px solid var(--linha-forte); }
.duvidas details:last-of-type { border-bottom: 1px solid var(--linha-forte); }
.duvidas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--e4);
                   min-height: var(--toque-primario); padding: var(--e3) 0; font: 600 17px/1.4 var(--fonte); }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after { content: "+"; flex: none; font: 500 26px/1 var(--fonte); color: var(--tinta-2); transition: transform var(--d-media) var(--c-padrao); }
.duvidas details[open] summary::after { transform: rotate(45deg); }
.duvidas details p { margin: 0 0 var(--e5); color: var(--tinta-2); max-width: 64ch; }

/* o fim: a faixa vermelha cheia, de ponta a ponta */
.final { padding: var(--e16) 0; }
.final .largura { display: grid; gap: var(--e6); justify-items: start; }
.final .titulo-faixa { color: var(--sobre-marca-titulo); }

/* ====================================================== AS PÁGINAS DE CONTA */
.pagina { padding: var(--e8) 0 var(--e16); }
.pagina-entrada .largura { max-width: 560px; }
/* o palco das entradas: no computador, a faixa do selo à esquerda (o preto do selo, de cima a baixo) e o formulário ao
   lado; no celular, só o formulário (ação antes de enfeite) */
.palco-selo { display: none; }
@media (min-width: 960px) {
  .palco-entrada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .palco-selo { display: block; }
  .palco-selo .selo-dentro { position: sticky; top: 0; padding: var(--e10) var(--e8); }
  .palco-selo img { width: min(100%, 460px); margin: 0 auto; }
  .palco-entrada .pagina-entrada { padding: var(--e10) var(--pad) var(--e16) var(--e10); }
  .palco-entrada .pagina-entrada .largura { padding: 0; margin: 0; }
}
.cartao { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--r-cartao); padding: var(--e6) var(--e5); min-width: 0; }
@media (min-width: 560px) { .cartao { padding: var(--e8); } }
.entrada { display: grid; gap: var(--e5); }
.entrada h1, .pagina h1 { font: var(--t-pagina); color: var(--titulo); text-transform: uppercase; letter-spacing: var(--espaco-titulo); }
.entrada .sub { font: var(--t-corpo); color: var(--tinta-2); }
.entrada .outros { display: grid; gap: 0; border-top: 1px solid var(--linha); padding-top: var(--e3); }
/* duas linhas de detalhe seguidas (o balcão, o menor) não se colam numa só */
.entrada .outros .detalhe + .detalhe { margin-top: var(--e2); }
/* o botão que mora entre os links («Já tenho o código», «Pedir outro código») tem a cara deles */
.entrada .outros button.fantasma { justify-self: start; padding: 0; font: 600 15px/1.3 var(--fonte); color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.passos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); font: 600 14px/1.3 var(--fonte); color: var(--tinta-suave); }
.passos li { display: inline-flex; align-items: center; gap: var(--e2); }
.passos li b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--linha-forte); font-size: 12px; }
.passos li[aria-current="step"] { color: var(--tinta); }
.passos li[aria-current="step"] b { border-color: var(--acao); background: var(--acao); color: var(--acao-tinta); }   /* o passo atual: o vermelho cheio, o número em branco (5,5:1) */
.passos li.feito b { border-color: var(--tinta-2); }
.contagem { font: 600 13px/1.4 var(--fonte); color: var(--tinta-2); }

/* o documento (termos e aviso de privacidade) */
.documento { display: grid; gap: var(--e5); max-width: 760px; }
.documento .versao { font: 600 14px/1.4 var(--fonte); color: var(--tinta-2); }
.documento-texto { display: grid; gap: var(--e3); font: 500 16px/1.7 var(--fonte); color: var(--tinta); }
.documento-texto h2 { margin-top: var(--e6); font: var(--t-bloco); color: var(--titulo); scroll-margin-top: var(--e4); }
.documento-texto ul { padding-left: var(--e5); display: grid; gap: var(--e2); }
.sumario { border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--painel); padding: 0 var(--e4); }
.sumario summary { cursor: pointer; min-height: var(--toque-primario); display: flex; align-items: center; justify-content: space-between; gap: var(--e3); font: 700 16px/1.3 var(--fonte); list-style: none; }
.sumario summary::-webkit-details-marker { display: none; }
.sumario summary::after { content: "+"; flex: none; font: 500 24px/1 var(--fonte); color: var(--tinta-2); transition: transform var(--d-media) var(--c-padrao); }
.sumario[open] summary::after { transform: rotate(45deg); }
.sumario ol { padding: 0 0 var(--e3) var(--e5); display: grid; }
.sumario a { display: inline-flex; align-items: center; min-height: var(--toque); }

/* ============================================================== A MINHA ÁREA */
/* (22/10, noite) o molde da área do Social Club, na «noite de gala»: a faixa de perfil larga no vermelho do selo,
   com o padrão tom sobre tom (desenho/padrao-casa.svg: o kart, o coqueiro, a bandeira e o troféu, desenhos próprios, num
   vermelho mais escuro que o fundo — o texto claro em cima só ganha contraste); a barra larga das abas; o conteúdo em
   painéis. Um gesto forte só: a faixa. Sem brilho, sem degradê */
.pagina-area .largura > h1 { margin-bottom: var(--e6); }
.pagina-area.com-faixa { padding-top: 0; }
.perfil-faixa { background: var(--marca) url("/desenho/padrao-casa.svg") repeat 0 0 / 240px 240px; color: var(--sobre-marca); }
.perfil-dentro { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e4) var(--e6);
                 padding-top: var(--e8); padding-bottom: var(--e8); }
/* no lugar do avatar (o site não tem foto de perfil): o ícone do kart do Hugo, na faixa da cor do fundo dele, com o filete creme */
.perfil-avatar { width: 128px; aspect-ratio: 1; border-radius: var(--r-cartao); overflow: hidden; border: 2px solid var(--sobre-marca); }
.perfil-avatar img { display: block; width: 100%; height: 100%; }
.perfil-quem { display: grid; gap: var(--e2); justify-items: start; min-width: 0; }
.perfil-rotulo { font: var(--t-rotulo); letter-spacing: var(--espaco-rotulo); text-transform: uppercase; color: var(--sobre-marca-2); }
.perfil-nome { font: 900 clamp(32px, 5vw, 56px)/1 var(--fonte); letter-spacing: var(--espaco-titulo); text-transform: uppercase;
               color: var(--sobre-marca-titulo); overflow-wrap: anywhere; }
.perfil-sub { font: 600 17px/1.3 var(--fonte); color: var(--sobre-marca); overflow-wrap: anywhere; }
.perfil-selos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e1); }
/* o selo do número de sócio (e o do nível, quando o programa o trouxer): a etiqueta creme com o sublinhado curto, como um selo
   de equipe */
.etiqueta { position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--e3); border-radius: 2px;
            background: var(--titulo); color: var(--selo-fundo); font: 800 14px/1 var(--fonte); letter-spacing: .08em; text-transform: uppercase;
            font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.etiqueta::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; background: var(--marca-funda); }
.etiqueta-escura { background: var(--selo-fundo); color: var(--titulo); }
.etiqueta-escura::after { background: var(--titulo); }
.perfil-desde { font: 600 13px/1.3 var(--fonte); color: var(--sobre-marca-2); }
.perfil-desde strong { color: var(--sobre-marca); }
.botao.perfil-editar { align-self: start; background: var(--selo-fundo); border-color: var(--selo-fundo); color: var(--titulo); }
.perfil-faixa :focus-visible { outline-color: var(--sobre-marca); }
.esqueleto.perfil-avatar-sk { width: 128px; height: 128px; border-radius: var(--r-cartao); }
.esqueleto.perfil-nome-sk { height: 44px; width: 60%; }
.esqueleto.abas-sk { height: 56px; }
.perfil-faixa-sk .perfil-quem, .perfil-faixa-sk .perfil-quem .esqueletos { width: 100%; }
@media (max-width: 699px) {
  .perfil-dentro { grid-template-columns: auto minmax(0, 1fr); padding-top: var(--e6); padding-bottom: var(--e6); }
  .perfil-avatar, .esqueleto.perfil-avatar-sk { width: 76px; height: 76px; align-self: start; }
  .botao.perfil-editar { grid-column: 1 / -1; justify-self: start; }
}

/* a barra das abas: larga, as abas lado a lado com o filete entre elas; a ativa com o fundo, o peso e a barra vermelha (nunca só cor) */
.area-gala { padding-top: var(--e6); }
.abas-barra { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--r-cartao); overflow: hidden; }
.abas { display: flex; overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.aba { position: relative; flex: none; min-height: 56px; background: transparent; color: var(--tinta-2); border-radius: 0; border-right: 1px solid var(--linha);
       font: 600 16px/1.2 var(--fonte); letter-spacing: 0; padding: 0 var(--e6); white-space: nowrap; }
.aba:hover { color: var(--tinta); filter: none; }
.aba[aria-selected="true"] { color: var(--tinta); font-weight: 800; background: var(--painel-2); }
.aba[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--acao); }
.aba .selo { margin-left: var(--e1); }
/* no celular as quatro abas não cabem numa linha: viram duas linhas de duas, todas à vista */
@media (max-width: 559px) {
  .abas { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .aba { padding: 0 var(--e2); min-height: 52px; }
  .aba:nth-child(2n) { border-right: 0; }
  .aba:nth-child(-n + 2) { border-bottom: 1px solid var(--linha); }
}
/* os painéis: cada bloco do conteúdo num painel escuro sobre o fundo (o Hugo escolheu os escuros em 22/10; os claros saíram) */
.area-gala .painel-dentro { gap: var(--e6); }
.area-gala .painel-dentro > .bloco { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--r-cartao); padding: var(--e6); }
.area-gala .bloco .pessoa { background: var(--fundo); }
@media (max-width: 559px) { .area-gala .painel-dentro > .bloco { padding: var(--e5) var(--e4); } }
/* o dependente, como um cartão de amigo: o quadrado com as iniciais, o nome, a situação */
.pessoa-avatar { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 2px;
                 background: var(--selo-fundo); color: var(--sobre-marca); font: 900 17px/1 var(--fonte); letter-spacing: .02em; }
.pessoa-topo .pessoa-nome { flex: 1 1 10ch; }
/* o álbum dos traçados, no molde de «Seus jogos»: uma capa por traçado e sentido; vazio até 2027 */
.capas { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--e4); }
.capa { display: grid; gap: var(--e2); align-content: start; min-width: 0; }
.capa-arte { aspect-ratio: 3 / 4; display: grid; place-items: center; background: var(--fundo); border: 1px solid var(--linha); border-radius: 2px; }
.capa-vazia .capa-arte { border: 1px dashed var(--linha-forte); }
.capa-arte img { width: 40px; height: auto; }
.capa-titulo { font: 700 14px/1.3 var(--fonte); overflow-wrap: anywhere; }
.capa-vazia .capa-titulo { color: var(--tinta-2); font-weight: 600; }
.capa-detalhe { font: var(--t-legenda); color: var(--tinta-suave); }
.painel { display: grid; gap: var(--e6); padding-top: var(--e6); }
.painel:focus-visible { outline-offset: 4px; }
.painel-dentro { display: grid; gap: var(--e10); }
.avisos:empty { display: none; }
.proximos { padding-left: var(--e5); display: grid; gap: var(--e3); font: var(--t-corpo); }
.proximos strong { font-weight: 700; color: var(--titulo); }
.bloco { display: grid; gap: var(--e4); }
.bloco > h2, .bloco-topo h2 { font: var(--t-bloco); color: var(--titulo); }
.bloco-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4); }

/* os dados do cadastro: rótulo e valor */
.dados { display: grid; border-top: 1px solid var(--linha); }
.dados > div { display: grid; gap: 2px; padding: var(--e3) 0; border-bottom: 1px solid var(--linha); min-width: 0; }
.dados dt { font: 600 13px/1.3 var(--fonte); color: var(--tinta-2); }
.dados dd { font: 600 16px/1.4 var(--fonte); overflow-wrap: anywhere; }
.dados dd.falta-dado { color: var(--tinta-suave); font-weight: 500; }
@media (min-width: 560px) { .dados > div { grid-template-columns: 200px minmax(0, 1fr); align-items: baseline; gap: var(--e4); } }

/* o bloco do clube (em 2027): o título da casa; quando o motor ligar, os números entram grandes, em branco, e a barra do nível
   em vermelho cheio (as peças rs-numero e rs-barra, abaixo) */
.clube { border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--painel); }
.clube-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4); padding: var(--e5) var(--e5) 0; }
.clube-topo h2 { font: 900 26px/1 var(--fonte); color: var(--titulo); text-transform: uppercase; letter-spacing: var(--espaco-titulo); }
.clube > p { padding: var(--e3) var(--e5) 0; color: var(--tinta-2); max-width: 62ch; }
.clube-lista { display: grid; margin-top: var(--e4); border-top: 1px solid var(--linha); }
.clube-lista > div { display: grid; gap: 2px; padding: var(--e3) var(--e5); border-bottom: 1px solid var(--linha); }
.clube-lista > div:last-child { border-bottom: 0; }
.clube-lista dt { font: 800 16px/1.3 var(--fonte); color: var(--titulo); }
.clube-lista dd { font: var(--t-detalhe); color: var(--tinta-2); }
@media (min-width: 640px) { .clube-lista { grid-template-columns: 1fr 1fr; } .clube-lista > div:nth-child(odd) { border-right: 1px solid var(--linha); } }
.rs-numero { font: 900 clamp(32px, 6vw, 44px)/1 var(--fonte); color: var(--tinta); font-variant-numeric: tabular-nums lining-nums; letter-spacing: var(--espaco-titulo); }
.rs-barra { height: 8px; background: var(--painel-2); border-radius: var(--r-pilula); overflow: hidden; }
.rs-barra > i { display: block; height: 100%; background: var(--acao); }

/* as corridas */
.corridas { list-style: none; display: grid; border-top: 1px solid var(--linha); }
.corrida { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e1) var(--e3); align-items: center; padding: var(--e3) 0; border-bottom: 1px solid var(--linha); }
.corrida-quando { font: 700 16px/1.35 var(--fonte); }
.corrida-quando span { font-weight: 500; color: var(--tinta-2); }
.corrida-tipo { grid-column: 1; font: var(--t-detalhe); color: var(--tinta-2); }
.corrida .pilula { grid-column: 2; grid-row: 1 / span 2; }
.corrida.estornada .corrida-quando { color: var(--tinta-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.corridas-fim { display: grid; gap: var(--e3); justify-items: start; }

/* dependentes e responsáveis */
.pessoas { display: grid; gap: var(--e3); }
.pessoa { display: grid; gap: var(--e3); padding: var(--e4); border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--painel); min-width: 0; }
.pessoa-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e2) var(--e3); }
.pessoa-nome { font: 700 17px/1.3 var(--fonte); overflow-wrap: anywhere; }
.pessoa-fatos { font: var(--t-detalhe); color: var(--tinta-2); }
.pessoa .painel-acao { display: grid; gap: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--linha); }

/* aparelhos conectados */
.aparelhos { list-style: none; display: grid; border-top: 1px solid var(--linha); }
.aparelho { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--e3); align-items: center; padding: var(--e3) 0; border-bottom: 1px solid var(--linha); }
.aparelho-nome { font: 700 16px/1.35 var(--fonte); overflow-wrap: anywhere; }
.aparelho-fatos { grid-column: 1; font: var(--t-detalhe); color: var(--tinta-2); }
.aparelho .pilula { grid-column: 2; grid-row: 1 / span 2; }
.separador { border: 0; border-top: 1px solid var(--linha); margin: var(--e2) 0; }
.confirmacao { display: grid; gap: var(--e3); padding: var(--e4); border: 1px solid var(--erro); border-radius: var(--r-campo); background: var(--erro-suave); }

/* a página que não existe: a faixa do selo e a frase */
.nao-existe { padding: 0 0 var(--e16); }
.nao-existe .selo-marca { padding: var(--e4) 0 0; margin-bottom: var(--e8); }
.nao-existe .selo-marca img { width: min(70vw, 340px); margin: 0 auto; }
.nao-existe .largura { max-width: 760px; display: grid; justify-items: center; text-align: center; }
.nao-existe-texto { display: grid; gap: var(--e5); justify-items: center; }
.nao-existe h1 { font: var(--t-display); }