/* ==========================================================================
   Área do Piloto: design "garagem HUD" (design system 2 da marca).
   Página escura por decisão de design (o mockup final aprovado é dark-only):
   fundo asfalto, Racing Sans One no display, Montserrat no corpo, cartões
   chanfrados com borda em degradê e detalhes em xadrez de chegada.
   ========================================================================== */

:root {
  /* Cores de marca (design system 2, ekarts-marketing/design-system-2) */
  --vermelho: #C80000;
  --vermelho-escuro: #8F0000;
  --vermelho-neon: #ff1e1e;
  --amarelo: #E6E600;
  --asfalto: #1A1A1A;
  --grafite: #4B4B4B;
  --cinza-pista: #A4A4A4;
  --branco: #FFFFFF;
  --azul: #0000C8;
  --azul-noite: #00006E;
  --azul-vivo: #2929FF;
  --fundo: #141414;
  --carbono-1: #191919;
  --carbono-2: #121212;
  --claro: #D9D9D9;
  --verde-ok: #5dff7c;

  --display: 'Racing Sans One', sans-serif;
  --corpo: 'Montserrat', sans-serif;

  --linha-forte: rgba(255, 255, 255, .25);
  --linha-media: rgba(255, 255, 255, .35);
  --pattern-xadrez-claro: repeating-conic-gradient(rgba(255, 255, 255, .14) 0% 25%, transparent 0% 50%);

  --grad-card: linear-gradient(180deg, var(--carbono-1), var(--carbono-2));
  --grad-vermelho: linear-gradient(135deg, var(--vermelho), var(--vermelho-escuro));
  --grad-barra: linear-gradient(90deg, var(--vermelho), var(--vermelho-escuro));

  /* Bordas em degradê dos cartões chanfrados */
  --bd-sutil: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.06) 40%, rgba(255,30,30,.25));
  --bd-vivo: linear-gradient(160deg, #ff1e1e, rgba(255,30,30,.25) 45%, rgba(255,255,255,.1));
  --bd-rosa: linear-gradient(160deg, rgba(255,80,80,.45), rgba(255,80,80,.45));
  --bd-ouro: linear-gradient(160deg, var(--amarelo), rgba(230,230,0,.3) 45%, rgba(255,255,255,.15));
  --bd-azul: linear-gradient(160deg, var(--azul-vivo), rgba(41,41,255,.25) 45%, rgba(255,255,255,.1));
  --bd-branco: linear-gradient(160deg, rgba(255,255,255,.35), rgba(255,255,255,.35));

  /* Metais das medalhas */
  --metal-ouro: radial-gradient(circle at 35% 28%, #FFF6C2, #F5D76B 38%, #D4A62A 62%, #8A6410);
  --metal-prata: radial-gradient(circle at 35% 28%, #FFFFFF, #DCDCE2 40%, #9A9AA6 65%, #5F5F6B);
  --metal-bronze: radial-gradient(circle at 35% 28%, #FFDDBB, #E0A171 40%, #B4713A 65%, #6E4520);
  --metal-diamante: radial-gradient(circle at 35% 28%, #EAFBFF, #A8E4F2 40%, #5BB8D4 65%, #23708C);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fundo); color: #fff;
  font-family: var(--corpo); font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
button { font-family: inherit; }
a { color: var(--amarelo); }

/* ---------- utilitários da linguagem visual ---------- */

/* Kicker: risquinho vermelho + rótulo espaçado em caixa alta */
.ek-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .04em; color: rgba(255,255,255,.92);
  font-weight: 600; text-transform: uppercase;
}
.ek-kicker::before { content: ""; width: 22px; height: 2px; background: var(--vermelho-neon); flex: none; }

/* Cabeçalho de seção: kicker + linha com losango */
.ek-secao { display: flex; align-items: center; gap: 10px; margin: 26px 0 14px; }
.ek-secao .ek-kicker { flex: none; }
.ek-secao > i {
  flex: 1; position: relative; height: 1px;
  background: linear-gradient(90deg, transparent, var(--linha-forte) 15%, var(--linha-forte) 85%, transparent);
}
.ek-secao > i::after {
  content: ""; position: absolute; left: 68%; top: -2px;
  width: 5px; height: 5px; background: var(--vermelho-neon); transform: rotate(45deg);
}
.ek-secao .ver-mais {
  flex: none; border: 0; background: none; cursor: pointer; padding: 0;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: var(--amarelo); text-transform: uppercase;
}

/* Cartão chanfrado: casca de 1px com degradê + miolo carbono no mesmo corte.
   --c = tamanho do chanfro; .ch corta os cantos opostos, .ch--br só o de baixo. */
.ch {
  --c: 20px; padding: 1px; background: var(--bd-sutil);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.ch__in {
  height: 100%; background: var(--grad-card); padding: 16px 18px;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.ch--br, .ch--br .ch__in {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);
}
/* Dentro de células de grid, a casca estica pra igualar as alturas */
.kpi > .ch, .rec > .ch, .pr > .ch, .tr > .ch, .podio .ch { height: 100%; }
.ch--c14 { --c: 14px; }
.ch--c16 { --c: 16px; }
.ch--c20 { --c: 20px; }
.ch--vivo { background: var(--bd-vivo); }
.ch--rosa { background: var(--bd-rosa); }
.ch--ouro { background: var(--bd-ouro); padding: 2px; }
.ch--azul { background: var(--bd-azul); }
.ch--branco { background: var(--bd-branco); }
.ch--apagado { background: rgba(255,255,255,.22); }
.ch--quente .ch__in { background: linear-gradient(120deg, rgba(200,0,0,.28), transparent 65%), var(--grad-card); }

/* Botões chanfrados */
.ek-btn {
  --c: 10px; display: inline-block; border: 0; cursor: pointer;
  padding: 12px 20px; font-family: var(--display); font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: #fff; text-decoration: none;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: filter .15s;
}
.ek-btn:hover { filter: brightness(1.15); }
.ek-btn:disabled { opacity: .55; cursor: default; }
.ek-btn--vermelho { background: var(--grad-vermelho); }
.ek-btn--amarelo { background: var(--amarelo); color: var(--asfalto); }
.ek-btn--vazado { background: transparent; border: 1px solid var(--linha-media); clip-path: none; }
.ek-btn--sm { padding: 8px 14px; font-size: 11px; --c: 8px; }
.ek-btn--cheio { width: 100%; }

/* Medalhas (metais) */
.med {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 2px solid #fff; display: inline-grid; place-items: center; font-size: 18px;
}
.med--ouro { background: var(--metal-ouro); }
.med--prata { background: var(--metal-prata); color: #3f3f4a; }
.med--bronze { background: var(--metal-bronze); color: #3d2510; }
.med--diamante { background: var(--metal-diamante); color: #123c4e; }
.med--txt { font-family: var(--display); font-size: 12px; }
.med--vaga {
  background: none; border: 2px dashed rgba(255,255,255,.45);
  filter: grayscale(1); opacity: .7;
}
/* Moldura do Rei da Pista: asas em SVG transbordando por fora, wrapper do
   tamanho exato da medalha pra não desalinhar as colunas de ícones. */
.med-rei { position: relative; display: inline-grid; place-items: center; }
.med-rei .med { position: relative; }
.med-rei__asas {
  position: absolute; left: -50%; top: -33%; width: 200%; height: 175%;
  pointer-events: none;
}
/* Arte do 5º degrau (diamante alado estilo Legend), mesmo princípio da coroa:
   wrapper do tamanho da medalha, arte transbordando com brilho gelado. */
.med-lenda { position: relative; display: inline-grid; place-items: center; }
.med-lenda .med { position: relative; }
.med-lenda__arte {
  position: absolute; left: -50%; top: -41%; width: 200%; height: 200%;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(170,225,255,.85)) drop-shadow(0 0 14px rgba(120,200,255,.45));
}
.med--sm { width: 30px; height: 30px; font-size: 13px; border-width: 1px; }
.med--sm.med--txt { font-size: 9px; }
.med--lg { width: 54px; height: 54px; font-size: 22px; }

/* Anel de progresso em volta de uma medalha (--p em %) */
.anel {
  --p: 0; position: relative; width: 62px; height: 62px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--amarelo) calc(var(--p) * 1%), rgba(255,255,255,.15) 0);
  display: grid; place-items: center;
}
.anel .med { border-color: var(--fundo); }

/* Barra de progresso pílula */
.barra {
  height: 8px; background: rgba(255,255,255,.14);
  border: 1px solid var(--linha-media); border-radius: 999px; overflow: hidden;
}
.barra > i { display: block; height: 100%; background: var(--grad-barra); }

/* Selo amarelo chanfrado */
.selo {
  display: inline-block; background: var(--amarelo); color: var(--asfalto);
  font-family: var(--display); font-size: 9px; letter-spacing: .04em; padding: 3px 12px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.mc-erro { color: #ff8080; font-weight: 700; font-size: 12px; margin: 10px 0 0; }
/* Escolha de piloto na tela do convite */
.mc-radio { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 14px; cursor: pointer; }
.mc-radio input { accent-color: var(--amarelo); width: 16px; height: 16px; margin: 0; }
.mc-ok { color: var(--verde-ok); }
.mc-link {
  border: 0; background: none; color: var(--amarelo); cursor: pointer;
  font-weight: 700; font-size: 12px; margin-top: 14px; padding: 0;
}
/* Dois links embaixo do login (esqueci a senha / criar conta): um por linha e
   com área de toque de dedo. Lado a lado eles viravam uma frase só no celular. */
.lg__card .mc-link { display: block; text-align: left; padding: 6px 0; }

/* ---------- formulários ---------- */
form label {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  color: var(--cinza-pista); text-transform: uppercase; margin-bottom: 14px;
}
form input {
  display: block; width: 100%; margin-top: 6px;
  border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.3);
  padding: 11px 14px; font: 600 14px var(--corpo); color: #fff; border-radius: 0;
}
form input:focus { outline: 2px solid var(--amarelo); outline-offset: -1px; }

/* ---------- login ---------- */
.mc-main { min-height: 100vh; }
.lg { display: grid; min-height: 100vh; }
.lg__promo {
  position: relative; overflow: hidden; display: none;
  background: radial-gradient(900px 500px at 20% 0%, rgba(200,0,0,.25), transparent 60%), linear-gradient(180deg, #161616, #0f0f0f);
  padding: 44px 46px; border-right: 1px solid var(--linha-forte);
  flex-direction: column;
}
.lg__promo::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 120px;
  background-image: var(--pattern-xadrez-claro); background-size: 26px 26px;
  opacity: .35; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent);
}
.lg__promo::after {
  content: ""; position: absolute; top: -40px; right: -60px; width: 280px; height: 400px;
  background: linear-gradient(135deg, rgba(200,0,0,.4), rgba(143,0,0,.03));
  transform: skewX(-18deg); border-left: 2px solid rgba(255,255,255,.3);
}
/* Marca oficial (logo em arquivo, nunca a logo digitada): a mesma
   logo-ekarts-branco.webp do cabeçalho do site. */
.lg__marca, .top__marca { display: flex; align-items: center; gap: 8px; }
.lg__marca img { height: 34px; width: auto; }
.top__marca img { height: 26px; width: auto; }
.lg__marca span, .top__marca span {
  font-family: var(--display); font-size: 11px; letter-spacing: .04em; color: var(--amarelo);
}
.lg__meio { margin: auto 0; position: relative; }
.lg__titulo {
  font-family: var(--display); font-size: clamp(30px, 3.4vw, 44px); font-style: italic;
  text-transform: uppercase; line-height: 1.05; margin: 10px 0 0; font-weight: 400;
}
.lg__titulo span { color: var(--amarelo); }
.lg__frase { font-size: 14px; color: var(--claro); font-weight: 600; margin: 12px 0 0; max-width: 380px; line-height: 1.5; }
.lg__medalhas { display: flex; gap: 16px; margin-top: 22px; }
.lg__lado { display: flex; flex-direction: column; justify-content: center; padding: 28px 16px; }
.lg__lado > .ch { width: min(460px, 100%); margin: 0 auto; }
.lg__card { padding: 28px 26px; }
.lg__box {
  font-family: var(--display); font-size: 24px; font-style: italic;
  text-transform: uppercase; margin: 8px 0 4px; font-weight: 400;
}
.lg__nota { font-size: 11px; color: var(--cinza-pista); font-weight: 600; margin: 0 0 18px; }
.lg .ek-btn { width: 100%; --c: 12px; }

@media (min-width: 900px) {
  .lg { grid-template-columns: 1.15fr 1fr; }
  .lg--solo { grid-template-columns: 1fr; }
  .lg__promo { display: flex; }
  .lg--solo .lg__promo { display: none; }
}

/* ---------- topo do app ---------- */
/* Topbar + chips grudam juntos, como UM bloco só: um único sticky no
   wrapper, em vez de dois sticky independentes (a versão antiga prendia
   os chips num `top: 61px` chutado, e a diferença para a altura real da
   topbar virava uma faixa por onde o conteúdo passava rolando). O fundo
   opaco fica aqui, cobrindo o bloco inteiro sem emenda. */
.topo {
  position: sticky; top: 0; z-index: 20;
  background: #0F0F0F;
}
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--linha-forte);
  min-width: 0;
}
.top__marca { font-size: 20px; white-space: nowrap; }
.top__marca span { display: none; }
.top__nav { display: none; gap: 22px; font-weight: 600; font-size: 13px; }
.top__nav button {
  border: 0; background: none; color: var(--claro); cursor: pointer;
  font: inherit; padding: 4px 0; border-bottom: 2px solid transparent;
}
.top__nav button.on { color: var(--amarelo); border-bottom-color: var(--amarelo); }
.top__dir { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.top__pts {
  display: flex; align-items: baseline; gap: 5px; border: 1px solid #fff; padding: 5px 12px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.top__pts b { font-family: var(--display); font-size: 16px; color: var(--amarelo); font-weight: 400; }
.top__pts span { font-size: 9px; font-weight: 800; letter-spacing: .04em; color: var(--cinza-pista); }
.top__avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--grad-vermelho);
  border: 2px solid #fff; display: grid; place-items: center;
  font-family: var(--display); font-size: 14px;
}
.top__sair {
  border: 1px solid var(--linha-media); background: none; color: var(--claro);
  cursor: pointer; font: 700 11px var(--corpo); padding: 7px 12px;
}
.top__sair:hover { border-color: #fff; color: #fff; }
.mc-familia { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mc-familia label { display: none; }
.mc-familia select {
  max-width: 110px; background: rgba(0,0,0,.3); color: #fff;
  border: 1px solid var(--linha-media); padding: 7px 8px;
  font: 700 12px var(--corpo); cursor: pointer;
}
@media (min-width: 900px) {
  .mc-familia label {
    display: block; font-size: 9px; font-weight: 800; color: var(--cinza-pista);
    text-transform: uppercase; letter-spacing: .04em;
  }
  .mc-familia select { max-width: 170px; }
}

@media (min-width: 900px) {
  .top { padding: 14px 28px; }
  .top__marca span { display: inline; }
  .top__nav { display: flex; }
}

/* chips do painel (só mobile) */
.chips {
  display: flex; gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--linha-forte); overflow-x: auto;
}
.chips button {
  flex: none; font-family: var(--display); font-size: 10px; letter-spacing: .05em;
  padding: 7px 13px; border: 1px solid rgba(255,255,255,.4); color: var(--claro);
  background: none; cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.chips button.on { background: var(--vermelho); border-color: #fff; color: #fff; }
@media (min-width: 900px) { .chips { display: none; } }

/* ---------- miolo ---------- */
.mio { max-width: 1180px; margin: 0 auto; padding: 16px 16px 40px; }
@media (min-width: 900px) { .mio { padding: 20px 28px 40px; } }
.vw__cab { display: flex; justify-content: space-between; align-items: flex-end; margin: 4px 0 16px; }
.vw__kicker { font-family: var(--display); font-size: 11px; letter-spacing: .04em; color: var(--amarelo); }
.vw__titulo {
  font-family: var(--display); font-size: clamp(23px, 3vw, 30px); font-style: italic;
  text-transform: uppercase; margin: 0; font-weight: 400;
}
.mc-vazio { color: var(--cinza-pista); font-weight: 600; padding: 14px 0; }
/* Âncoras roladas por baixo do topo grudado (topbar + chips no mobile) */
#pn-sala, #sec-corridas { scroll-margin-top: 118px; }
@media (min-width: 900px) { #pn-sala, #sec-corridas { scroll-margin-top: 76px; } }

/* ---------- banner do painel ---------- */
.bn {
  position: relative; overflow: hidden; margin-bottom: 16px; padding: 22px 18px;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(200,0,0,.18), transparent 60%), linear-gradient(180deg, #161616, #111);
  border: 1px solid var(--linha-forte);
}
.bn::before {
  content: ""; position: absolute; top: -60px; left: 34%; width: 46%; height: 420px;
  background: linear-gradient(135deg, rgba(200,0,0,.55), rgba(143,0,0,.05));
  transform: skewX(-18deg); border-left: 2px solid rgba(255,255,255,.4);
}
.bn::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 200px;
  background-image: var(--pattern-xadrez-claro); background-size: 26px 26px; opacity: .4;
  -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent);
}
.bn__grid { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.bn__quem { display: flex; align-items: center; gap: 18px; flex: 1 1 300px; }
.bn__avatar {
  width: 74px; height: 74px; border-radius: 50%; background: var(--grad-vermelho);
  border: 3px solid #fff; display: grid; place-items: center; flex: none;
  font-family: var(--display); font-size: 30px; box-shadow: 0 10px 30px rgba(200,0,0,.4);
}
.bn__nome {
  font-family: var(--display); font-size: clamp(26px, 4vw, 42px); text-transform: uppercase;
  font-style: italic; line-height: 1.02; text-shadow: 3px 3px 0 rgba(0,0,0,.6); font-weight: 400;
}
.bn__nome span { color: #fff; }
.bn__stats { font-size: 13px; color: var(--claro); font-weight: 700; margin-top: 8px; }
.bn__meio { flex: 1 1 300px; display: flex; flex-direction: column; gap: 9px; }
.bn__chips { display: flex; gap: 8px; }
.bn__chip {
  flex: 1; display: flex; align-items: center; gap: 9px; padding: 8px 12px;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.3);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.bn__chip .tit { font-weight: 800; font-size: 12px; line-height: 1.1; }
.bn__chip .sub { font-size: 10.5px; color: var(--cinza-pista); font-weight: 700; }
.bn__rumo .rot {
  display: flex; justify-content: space-between; font-size: 10px; font-weight: 800;
  letter-spacing: .04em; margin-bottom: 5px; text-transform: uppercase;
}
.bn__rumo .rot .a { color: #fff; }
.bn__rumo .rot .b { color: var(--cinza-pista); }
.bn__nivel { position: relative; width: 170px; height: 170px; flex: none; margin: 0 auto; }
@media (max-width: 899px) {
  .bn { padding: 18px 14px; margin-bottom: 12px; }
  .bn__grid { gap: 14px; }
  .bn__nivel { width: 148px; height: 148px; }
  .bn__nivel .nome { font-size: 17px; }
}
.bn__nivel .disco {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--vermelho) 0deg, var(--amarelo) calc(var(--p) * 3deg), rgba(255,255,255,.12) calc(var(--p) * 3deg), rgba(255,255,255,.12) 300deg, transparent 300deg);
}
.bn__nivel .miolo {
  position: absolute; inset: 12px; border-radius: 50%; background: #151515;
  border: 1px solid var(--linha-media); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 0 10px;
}
.bn__nivel .rot { font-family: var(--display); font-size: 9px; letter-spacing: .04em; color: var(--cinza-pista); }
.bn__nivel .nome { font-family: var(--display); font-size: 19px; font-style: italic; color: var(--amarelo); text-transform: uppercase; line-height: 1.1; }
.bn__nivel .meta { font-size: 10px; font-weight: 700; color: var(--claro); margin-top: 2px; }
.bn__nivel .selo { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); border: 2px solid #fff; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.kpi .ch__in { padding: 14px 16px; }
.kpi .num { font-family: var(--display); font-size: 30px; font-style: italic; margin-top: 6px; line-height: 1; }
.kpi .num small { font-size: .55em; }
.kpi .num.destaque { color: #fff; }
.kpi .sub {
  font-size: 10.5px; letter-spacing: .04em; color: rgba(255,255,255,.7);
  font-weight: 600; margin-top: 4px; text-transform: uppercase;
}
@media (min-width: 900px) {
  .kpis { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .kpi .num { font-size: 36px; }
}

/* ---------- destaque do voucher no painel ---------- */
.pnv { margin: 0 0 6px; }
.pnv .ch__in { padding: 14px 16px; }
.pnv__linha { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.pnv__linha .pr__key { font-size: 40px; flex: none; }
.pnv__meio { flex: 1; min-width: 0; }
.pnv__sub { font-size: 11.5px; color: var(--cinza-pista); font-weight: 600; margin-top: 2px; }
.pnv__preco { flex: none; font-family: var(--display); font-size: 16px; color: #fff; }
.pnv__cta { flex: none; }
.pnv__regua { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pnv__regua .pr__barra { flex: 1; }

/* ---------- recompensas ---------- */
.recs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rec .ch__in { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.rec .tit { display: flex; align-items: baseline; gap: 8px; }
.rec .tit b { font-family: var(--display); font-size: 20px; font-style: italic; font-weight: 400; }
.rec .tit span { font-size: 12px; color: var(--cinza-pista); font-weight: 700; }
.rec .ek-btn { margin-top: auto; }
.rec .feito { margin-top: auto; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--verde-ok); text-transform: uppercase; }
.mc-creditos { margin-top: 10px; }
.mc-creditos .ch__in { padding: 14px 16px; }
.mc-creditos .nota { font-size: 12px; color: var(--cinza-pista); font-weight: 600; margin-top: 4px; }
@media (min-width: 900px) { .recs { grid-template-columns: repeat(3, 1fr); gap: 14px; } }

/* ---------- trilhas (sala de troféus) ---------- */
.trilhas { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .trilhas { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (min-width: 1060px) { .trilhas--painel { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.tr { cursor: pointer; }
.tr .ch__in { padding: 15px 16px 10px; display: flex; flex-direction: column; }
.tr__topo { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.tr__nome {
  font-family: var(--display); font-size: 16px; text-transform: uppercase;
  line-height: 1.15; margin-top: 4px; font-weight: 400;
}
.tr__meta {
  font-size: 10.5px; letter-spacing: .04em; color: rgba(255,255,255,.75);
  font-weight: 600; text-transform: uppercase; margin-top: 2px;
}
/* Caixa da próxima meta: ancorada no pé e com altura igual entre os cartões
   da fileira (os títulos variam de 1 a 3 linhas e desalinhavam tudo) */
.tr__prox {
  margin-top: auto; padding: 8px 10px; min-height: 68px;
  display: flex; flex-direction: column; justify-content: center;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.15);
}
.tr__topo { margin-bottom: 12px; }
.tr__prox.quase { border-color: rgba(230,230,0,.4); }
.tr__prox .rot {
  font-size: 10.5px; letter-spacing: .04em; color: rgba(255,255,255,.7);
  font-weight: 700; text-transform: uppercase;
}
.tr__prox .rot b { color: #fff; font-weight: 700; }
.tr__prox .txt { font-size: 11.5px; color: var(--claro); font-weight: 700; margin-top: 2px; }
.tr__prox .txt.quase { font-weight: 800; }
.tr__cta {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #fff; text-transform: uppercase;
}
.tr--feita .ch__in { background: linear-gradient(120deg, rgba(200,0,0,.28), transparent 65%), var(--grad-card); }

/* cartão aberto (sala de troféus): a escada já vem à mostra, sem popup */
.tr--aberta { cursor: default; }
.tr--aberta .ch__in { padding-bottom: 16px; }
.tr--aberta .degraus { margin-top: 16px; }

/* especiais e repetíveis: fileira compacta */
.esp { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.esp .nm { font-weight: 800; font-size: 13px; flex: 1; }
.esp .nm small { display: block; font-size: 10.5px; color: var(--cinza-pista); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.esp .vezes { font-family: var(--display); font-size: 14px; color: var(--amarelo); }

/* popup da trilha (folha que sobe) */
.folha { position: fixed; inset: 0; z-index: 40; }
/* Folha aberta trava o scroll da página atrás (bug do "treme" no mobile,
   29/08/2026): sem isso o scroll dentro da folha vazava pro fundo, a barra do
   navegador encolhia, o vh mudava e a folha pulava junto. Navegador sem :has
   só volta ao comportamento antigo. */
html:has(.folha), body:has(.folha) { overflow: hidden; }
.folha__veu { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.folha__corpo {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 84vh; overflow: auto;
  /* dvh: altura estável mesmo com a barra do navegador aparecendo/sumindo */
  max-height: 84dvh;
  /* o fim da lista não arrasta a página de trás junto */
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: #202020; border: 1px solid #fff; border-bottom: none;
  border-radius: 20px 20px 0 0; padding: 20px 20px 24px;
  animation: folhaSobe .28s ease-out;
}
@keyframes folhaSobe { from { transform: translateY(40px); opacity: 0; } }
.folha__alca { width: 44px; height: 4px; border-radius: 999px; background: var(--linha-media); margin: 0 auto 16px; }
.folha__cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.folha__rot { font-family: var(--display); font-size: 10px; letter-spacing: .04em; color: var(--amarelo); }
.folha__x { border: 0; background: none; color: var(--cinza-pista); font-size: 15px; font-weight: 800; cursor: pointer; }
.folha__tit {
  font-family: var(--display); font-size: 20px; font-style: italic;
  text-transform: uppercase; margin: 0 0 18px; font-weight: 400;
}
.folha .ek-btn { width: 100%; margin-top: 14px; --c: 12px; }
@media (min-width: 900px) {
  .folha__corpo {
    left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%);
    width: min(520px, 92vw); border-bottom: 1px solid #fff; border-radius: 20px;
  }
}

/* onboarding: pop-up de gênero */
.gen__linha {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.gen__nome { font-weight: 800; font-size: 14px; }
.gen__opcoes { display: flex; gap: 6px; flex: none; }
.gen__opcoes button {
  border: 1px solid var(--linha-media); background: none; color: var(--claro);
  cursor: pointer; font: 700 12px var(--corpo); padding: 8px 14px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.gen__opcoes button.on { background: var(--grad-vermelho); border-color: #fff; color: #fff; }
.folha .ek-btn { margin-top: 16px; }
.folha .mc-erro { text-align: center; }
.folha form label { margin-top: 12px; margin-bottom: 0; }
.folha form .ek-btn { width: 100%; --c: 12px; }

/* degraus da trilha */
.degraus { display: grid; grid-template-columns: 48px 1fr; column-gap: 22px; padding-top: 12px; }
.degraus .col { display: flex; flex-direction: column; align-items: center; }
.degraus .fio { width: 3px; flex: 1; margin-top: 4px; background: rgba(255,255,255,.18); }
.degraus .fio.feito { background: var(--vermelho); }
.degraus .fio.meio { background: linear-gradient(180deg, var(--vermelho), rgba(255,255,255,.2)); }
.degraus .info { padding-bottom: 26px; }
.degraus .info .nm { font-weight: 800; font-size: 13px; line-height: 1.2; }
.degraus .info .dt { font-size: 10px; color: var(--cinza-pista); font-weight: 600; margin-top: 2px; }
.degraus .info.prox .nm { font-size: 14px; }
.degraus .info.prox .dt { color: var(--claro); }
.degraus .info.prox .dt b { color: #fff; }
.degraus .info.longe .nm { color: #8a8a8a; }
.degraus .info.longe .dt { color: #777; }
/* O selo flutua ACIMA do nome (absoluto): assim o nome da próxima meta fica na
   mesma altura dos nomes das outras linhas e a medalha não desalinha. */
.degraus .info.prox { position: relative; }
.degraus .selo {
  border-radius: 999px; clip-path: none; font-size: 8px; padding: 2px 9px;
  position: absolute; top: -17px; left: 0; margin-bottom: 0;
}
.degraus .barra { margin-top: 8px; }
.degraus .quase { font-size: 11px; font-weight: 800; margin-top: 6px; color: #fff; }
/* Próxima meta ainda está bloqueada: nada de contorno dourado, só um anel
   cinza-claro mais firme que o dos degraus distantes (pedido do Gui, 29/08). */
.degraus .med--meta {
  border: 3px solid rgba(255,255,255,.55); background: rgba(255,255,255,.06);
  box-shadow: none;
}

/* ---------- tabelas (últimas corridas, ranking, histórico) ---------- */
.tb { font-variant-numeric: tabular-nums; }
.tb__cab, .tb__row { display: grid; gap: 8px; align-items: baseline; }
.tb__cab {
  font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--cinza-pista);
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.2); text-transform: uppercase;
}
.tb__row { font-size: 13px; font-weight: 600; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.tb__row:last-child { border-bottom: none; }
.tb__row .dir, .tb__cab .dir { text-align: right; }
.tb__row .destaque { font-weight: 800; }
.tb__row.eu {
  font-weight: 800; padding: 10px 8px; margin: 0 -8px;
  background: rgba(255,30,30,.1); border: 1px solid var(--linha-media); color: var(--amarelo);
}
.tb__nota { font-size: 11.5px; color: var(--cinza-pista); font-weight: 600; margin-top: 12px; }

/* ---------- ranking ---------- */
.rk__cab { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; }
.rk__tabs { display: flex; border: 1px solid rgba(255,255,255,.4); }
.rk__tabs button {
  border: 0; background: none; cursor: pointer; color: var(--claro);
  font-size: 11px; letter-spacing: .04em; font-weight: 700; padding: 9px 14px; text-transform: uppercase;
}
.rk__tabs button + button { border-left: 1px solid rgba(255,255,255,.4); }
.rk__tabs button.on { background: var(--grad-vermelho); color: #fff; }
@media (min-width: 500px) { .rk__tabs button { padding: 9px 20px; } }
.podio { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; align-items: end; margin-bottom: 20px; }
.podio .ch__in { padding: 14px 10px; text-align: center; }
.podio .p1 .ch__in {
  padding: 20px 12px; position: relative; overflow: hidden;
  background: linear-gradient(120deg, rgba(200,0,0,.25), transparent 70%), var(--grad-card);
}
.podio .p1 .ch__in::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 120px;
  background-image: var(--pattern-xadrez-claro); background-size: 16px 16px; opacity: .3;
  -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent);
}
.podio .med { width: 54px; height: 54px; margin: 0 auto 8px; font-family: var(--display); font-size: 18px; }
.podio .p1 .med { width: 64px; height: 64px; font-size: 24px; border-width: 3px; box-shadow: 0 0 0 5px rgba(230,230,0,.2), 0 12px 28px rgba(230,185,60,.4); }
.podio .nm { font-weight: 800; font-size: 13px; }
.podio .p1 .nm { font-family: var(--display); font-size: 16px; text-transform: uppercase; font-style: italic; font-weight: 400; }
.podio .tempo { font-size: 12px; color: var(--cinza-pista); font-weight: 700; }
.podio .premio { font-size: 11px; color: var(--amarelo); font-weight: 800; margin-top: 4px; }
.podio .nm, .podio .tempo, .podio .premio { position: relative; }
@media (min-width: 900px) { .podio { gap: 14px; } }

/* ---------- pit shop ---------- */
.sh__grade { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }
@media (min-width: 700px) { .sh__grade { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (min-width: 1060px) {
  .sh__grade--vouchers { grid-template-columns: 1fr 1fr 1fr 1.2fr; }
  .sh__grade--fisicos { grid-template-columns: repeat(4, 1fr); }
}
.saldo-pilula {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid #fff; border-radius: 999px; padding: 8px 18px;
}
.saldo-pilula span { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--cinza-pista); }
.saldo-pilula b { font-family: var(--display); font-size: 18px; color: var(--amarelo); font-weight: 400; white-space: nowrap; }
.pr .ch__in { padding: 18px 20px; display: flex; flex-direction: column; }
.pr__key { font-family: var(--display); font-size: 48px; font-style: italic; line-height: 1; color: var(--amarelo); }
.pr__key small { font-size: .55em; }
.pr__key--branco { color: #fff; }
.pr__nome {
  font-family: var(--display); font-size: 16px; text-transform: uppercase;
  line-height: 1.15; margin-top: 4px; font-weight: 400;
}
.pr__sub { font-size: 12.5px; color: var(--cinza-pista); font-weight: 600; margin: 2px 0 12px; }
.pr__pe { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pr__custo { font-size: 12px; color: var(--cinza-pista); font-weight: 700; flex: none; }
/* Régua do prêmio: saldo à esquerda, "faltam" no meio da barra, preço à direita */
.pr__pe--regua { gap: 8px; }
.pr__tem {
  flex: none; font-size: 10px; color: var(--cinza-pista); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; line-height: 1.25; text-align: left;
}
.pr__tem b { font-size: 14px; color: #fff; }
.pr__barra {
  position: relative; flex: 1; height: 20px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.14); border: 1px solid var(--linha-media);
}
.pr__barra i { display: block; height: 100%; background: var(--grad-barra); }
.pr__barra b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.85); white-space: nowrap;
}
.pr__preco { flex: none; font-family: var(--display); font-size: 16px; color: var(--amarelo); }
/* Card estreito (vouchers em 4 colunas, prêmios físicos): a régua quebra em
   duas linhas, barra inteira em cima e "você tem" + preço embaixo, senão o
   "faltam" sai espremido. */
.sh__grade--vouchers .pr__pe--regua, .sh__grade--fisicos .pr__pe--regua { flex-wrap: wrap; }
.sh__grade--vouchers .pr__barra, .sh__grade--fisicos .pr__barra { flex: 1 1 100%; order: -1; }
.pr__resgatar { width: 100%; margin-top: 8px; }
.pr__foto {
  height: 96px; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.3);
  display: grid; place-items: center; font-size: 34px; margin-bottom: 10px;
}
/* ---------- raridade dos prêmios (Pit Shop) ----------
   Escala de 5 níveis fechada com o dono em 07/08/2026. NÃO são cores de marca:
   existem só para ranquear prêmio, por isso ficam neste bloco e fora do :root
   da marca. O RARO é um dourado fechado de propósito, para não se confundir com
   o amarelo de assinatura (#E6E600) nem com o laranja do lendário.
   `--rar-txt` é o texto do selo, escolhido por contraste sobre a cor do nível
   (AA em todos: verde 12,7:1, azul 4,8:1, dourado 8,3:1, roxo 4,9:1, laranja
   6,9:1). Trocar a cor aqui repinta borda e selo do card de uma vez. */
.rar--comum, .rar--incomum { --rar: #1EFF00; --rar-suave: rgba(30,255,0,.25); --rar-txt: var(--asfalto); } /* base renomeada pra COMUM em 29/08/2026; alias antigo fica de compatibilidade */
.rar--valioso  { --rar: #0070DD; --rar-suave: rgba(0,112,221,.25);  --rar-txt: var(--branco); }
.rar--raro     { --rar: #D4AF37; --rar-suave: rgba(212,175,55,.25); --rar-txt: var(--asfalto); }
.rar--epico    { --rar: #A335EE; --rar-suave: rgba(163,53,238,.25); --rar-txt: var(--branco); }
.rar--lendario { --rar: #FF8000; --rar-suave: rgba(255,128,0,.25);  --rar-txt: var(--asfalto); }
/* A borda chanfrada do card sai do nível; só o lendário engrossa (o tratamento
   completo, borda grossa + xadrez, segue exclusivo dele). */
.ch--rar { background: linear-gradient(160deg, var(--rar), var(--rar-suave) 45%, rgba(255,255,255,.1)); }
.ch--rar.rar--lendario { padding: 2px; }
.selo--rar { background: var(--rar); color: var(--rar-txt); }

.pr--lendario .ch__in { background: linear-gradient(180deg, #241705, var(--carbono-2)); }
/* Xadrez de chegada em TODOS os cards do Pit Shop (pedido do dono, 29/08/2026:
   o fundo quadriculado do lendário agradou). A casca grossa e o fundo quente
   seguem exclusivos do lendário. */
.pr .ch__in { position: relative; overflow: hidden; }
.pr .ch__in::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 120px;
  background-image: var(--pattern-xadrez-claro); background-size: 16px 16px; opacity: .35;
  -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent);
  pointer-events: none;
}
/* Etiqueta do card não estica na coluna flex (vale pro LENDÁRIO e pro EM BREVE) */
.pr .selo { align-self: flex-start; margin-bottom: 6px; }
/* EM BREVE: prêmio que ainda não chegou na loja. Neutro de propósito, o amarelo
   do selo normal é de conquista, não de espera. Contorno branco (tela escura). */
.selo--breve { background: none; border: 1px solid var(--branco); color: var(--branco); }

/* ---------- presentes de boas-vindas (decisão do dono, 11/09/2026) ----------
   Prêmio de custo ZERO: o card não fala em pontos, então no lugar da régua de
   progresso entram duas etiquetas (o rótulo amarelo e a regra do uso único, de
   contorno branco) e, depois do resgate, o código com o estado. Nenhuma cor
   nova: tudo sai dos tokens que o Pit Shop já usa. */
.pr__selos { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; margin-bottom: 6px; }
.pr__selos .selo { margin-bottom: 0; }
.pr__pe--cod { flex-wrap: wrap; }
.pr__cod { display: flex; flex-direction: column; gap: 2px; }
.pr__cod small { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--cinza-pista); }
.pr__cod b {
  font-family: var(--display); font-size: 22px; letter-spacing: .12em; line-height: 1;
  color: var(--amarelo); font-weight: 400;
}
.pr .st {
  flex: none; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  padding: 3px 8px; border: 1px solid var(--linha-media); color: var(--claro);
}
.pr .st.ATIVO { border-color: var(--verde-ok); color: var(--verde-ok); }
.pr__nota { font-size: 11.5px; color: var(--cinza-pista); font-weight: 600; margin-top: 8px; }
.sh__nota, .mc-shop-nota { font-size: 12px; color: var(--cinza-pista); font-weight: 600; margin-top: 6px; }
.mc-shop-aviso { margin-bottom: 16px; }
.mc-shop-aviso .ch__in { padding: 14px 16px; font-weight: 600; font-size: 13px; }
.mc-codigo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--linha-forte); padding: 10px 14px; margin-top: 8px; font-size: 13px;
}
.mc-codigo b { font-family: var(--display); font-size: 15px; letter-spacing: .06em; color: var(--amarelo); font-weight: 400; }
.mc-codigo .st { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 3px 8px; border: 1px solid var(--linha-media); color: var(--claro); }
.mc-codigo .st.ATIVO { border-color: var(--verde-ok); color: var(--verde-ok); }

/* extrato */
.mc-extrato { margin-top: 8px; }
.mc-extrato-resumo { font-size: 13px; font-weight: 600; margin: 8px 0 10px; }
.mc-extrato-resumo b { color: var(--amarelo); }
.mc-extrato-linha {
  display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 600;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.mc-extrato-linha .dt { color: var(--cinza-pista); font-size: 11px; white-space: nowrap; }
.mc-extrato-linha .oq { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-extrato-linha .pts { font-weight: 800; white-space: nowrap; }
.mc-extrato-linha .pts.mais { color: var(--verde-ok); }
.mc-extrato-linha .pts.menos { color: #ff8080; }

/* ---------- reservas ---------- */
.rs-destaque { margin-bottom: 12px; }
.rs-destaque .ch__in { padding: 16px; position: relative; overflow: hidden; }
.rs-destaque .ch__in::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 90px;
  background-image: var(--pattern-xadrez-claro); background-size: 16px 16px; opacity: .3;
  -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent);
  pointer-events: none;
}
.rs-destaque .rot { font-size: 9px; letter-spacing: .04em; color: var(--amarelo); font-weight: 700; text-transform: uppercase; }
.rs-destaque .quando {
  font-family: var(--display); font-size: clamp(20px, 3vw, 24px); font-style: italic;
  text-transform: uppercase; line-height: 1.05; margin-top: 3px;
}
.rs-destaque .meta { font-size: 12.5px; color: var(--claro); font-weight: 700; margin-top: 5px; }
.rs-destaque .acoes { display: flex; gap: 10px; margin-top: 12px; position: relative; }
.rs { margin-bottom: 10px; }
.rs .ch__in { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rs .oq { font-weight: 800; font-size: 13px; }
.rs .sub { font-size: 10.5px; color: var(--cinza-pista); font-weight: 700; margin-top: 2px; }
.rs .acoes { display: flex; gap: 8px; flex: none; }
.mc-btn-mini {
  border: 1px solid var(--linha-media); background: none; color: var(--claro);
  cursor: pointer; text-decoration: none; display: inline-block;
  font: 700 11px var(--corpo); padding: 6px 10px; letter-spacing: .04em;
}
.mc-btn-mini:hover { border-color: #fff; color: #fff; }
.mc-embed iframe { width: 100%; min-height: 900px; border: 1px solid var(--linha-forte); background: #fff; }

/* ---------- festas ---------- */
.fs-cab { display: flex; justify-content: space-between; align-items: flex-end; margin: 4px 0 16px; gap: 12px; }
.mc-festa { margin-bottom: 14px; }
.mc-festa .ch__in { padding: 16px; position: relative; overflow: hidden; }
.mc-festa .ch__in::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 80px;
  background-image: var(--pattern-xadrez-claro); background-size: 16px 16px; opacity: .3;
  -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent);
  pointer-events: none;
}
.mc-festa__tag { font-size: 9px; letter-spacing: .04em; color: var(--amarelo); font-weight: 700; text-transform: uppercase; }
.mc-festa__data {
  font-family: var(--display); font-size: clamp(20px, 3vw, 24px); font-style: italic;
  text-transform: uppercase; line-height: 1.05; margin-top: 3px;
}
.mc-festa__hora { font-size: 12.5px; color: var(--claro); font-weight: 700; margin-top: 5px; }
.mc-festa__conta { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--amarelo); text-transform: uppercase; }
.mc-festa__rsvp { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; position: relative; }
.mc-festa__conf { font-size: 12px; font-weight: 700; color: var(--claro); }
.mc-festa__nao { color: var(--cinza-pista); font-weight: 600; }
.mc-festa__aviso { font-size: 11.5px; color: var(--cinza-pista); font-weight: 600; margin: 10px 0 0; position: relative; }
.mc-festa__zap {
  display: inline-block; margin-top: 10px; position: relative;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--verde-ok);
  border: 1px solid var(--verde-ok); background: rgba(93,255,124,.08);
  padding: 8px 12px; text-decoration: none; text-transform: uppercase;
}
.mc-festa-show { margin-bottom: 12px; }
.mc-festa-show .ch__in { padding: 16px; }
.mc-festa-show__topo { display: flex; align-items: center; gap: 10px; }
.mc-festa-show__topo .emoji { font-size: 24px; }
.mc-festa-show__topo .titulo { font-family: var(--display); font-size: 16px; text-transform: uppercase; line-height: 1.15; }
.mc-festa-show__topo .data { font-size: 11px; color: var(--cinza-pista); font-weight: 700; }
.mc-festa-show__niver { font-size: 12px; font-weight: 700; margin-top: 8px; }
.mc-festa-show__minha { font-size: 13px; color: var(--claro); font-weight: 600; margin-top: 6px; }
.mc-festa-show__minha b { color: var(--amarelo); }
.mc-festa-show__rotulo {
  font-size: 9px; letter-spacing: .04em; color: rgba(255,255,255,.92);
  font-weight: 600; text-transform: uppercase; margin: 14px 0 8px;
}
.mc-festa-show__palco { display: flex; align-items: flex-end; gap: 8px; }
.mc-festa-show__palco .lugar { flex: 1; text-align: center; }
.mc-festa-show__palco .piloto { font-weight: 800; font-size: 11px; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-festa-show__palco .degrau {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1px solid var(--linha-forte); background: rgba(0,0,0,.35); padding: 8px 4px;
}
.mc-festa-show__palco .p1 .degrau { padding: 16px 4px; border-color: rgba(230,230,0,.5); background: rgba(230,230,0,.07); }
.mc-festa-show__palco .p2 .degrau { padding: 11px 4px; }
.mc-festa-show__palco .medalha { font-size: 18px; }
.mc-festa-show__palco .pos { font-family: var(--display); font-size: 13px; }
.mc-festa-show__palco .pts { font-size: 9px; color: var(--amarelo); font-weight: 800; }
.mc-festa-show__bats { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-festa-show__bats .bat { flex: 1 1 150px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.35); padding: 8px 10px; }
.mc-festa-show__bats .rotulo { font-size: 8px; letter-spacing: .04em; color: var(--cinza-pista); font-weight: 800; }
.mc-festa-show__bats .dados { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.mc-festa-show__bats .dado b { font-size: 13px; }
.mc-festa-show__bats .dado span { display: block; font-size: 8px; color: var(--cinza-pista); font-weight: 700; text-transform: uppercase; }
.mc-anim-btn {
  margin-top: 12px; width: 100%; border: 0; cursor: pointer; padding: 12px;
  font-family: var(--display); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--grad-vermelho);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.mc-festa-vazia { text-align: center; padding: 30px 16px; }
.mc-festa-vazia .baloes { font-size: 30px; }
.mc-festa-vazia h2 { font-family: var(--display); font-size: 22px; font-style: italic; text-transform: uppercase; margin: 10px 0 6px; font-weight: 400; }
.mc-festa-vazia p { color: var(--claro); font-weight: 600; max-width: 420px; margin: 0 auto 16px; }

/* ---------- amigos ---------- */
.am-add { display: flex; gap: 8px; margin-bottom: 16px; font-size: 12px; color: var(--cinza-pista); font-weight: 600; align-items: center; }
.am-turma { margin-bottom: 16px; }
.am-turma .ch__in { padding: 12px 16px; }
.am-turma .linha {
  display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
  font-weight: 700; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.am-turma .linha:last-of-type { border-bottom: none; }
.am-turma .linha .pos { font-family: var(--display); margin-right: 7px; }
.am-turma .linha.eu {
  font-weight: 800; padding: 7px 6px; margin: 0 -6px;
  background: rgba(255,30,30,.1); border: 1px solid var(--linha-media); color: var(--amarelo);
}
.am-turma .nota { font-size: 11.5px; color: var(--claro); font-weight: 700; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.2); }
.am-turma .nota b { color: var(--amarelo); }
.mc-amigo { margin-bottom: 8px; }
.mc-amigo .ch__in { padding: 10px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mc-amigo .foto {
  width: 38px; height: 38px; flex: none; border-radius: 50%; border: 2px solid #fff;
  display: grid; place-items: center; font-family: var(--display); font-size: 14px;
}
.mc-amigo .foto.f0 { background: var(--grad-vermelho); }
.mc-amigo .foto.f1 { background: linear-gradient(135deg, var(--azul), var(--azul-noite)); }
.mc-amigo .foto.f2 { background: linear-gradient(135deg, var(--grafite), #2b2b2b); }
.mc-amigo .foto.vaga { background: none; border: 2px dashed rgba(255,255,255,.4); color: #888; }
.mc-amigo .quem { flex: 1; min-width: 140px; }
.mc-amigo .nm { font-weight: 800; font-size: 13px; }
.mc-amigo .st-mini { font-size: 10.5px; color: var(--cinza-pista); font-weight: 700; margin-top: 2px; }
.mc-amigo .acoes { display: flex; gap: 8px; }

/* ---------- celebração de novidade no login ---------- */
#mc-nov { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 16px; }
#mc-nov[hidden] { display: none; }
#mc-nov::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.72); }
body.mc-nov-aberta { overflow: hidden; }
.mc-nov__card {
  position: relative; width: min(520px, 94vw); max-height: 90vh; overflow: auto;
  padding: 2px; background: linear-gradient(160deg, var(--amarelo), rgba(230,230,0,.3) 45%, rgba(255,30,30,.4));
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
  animation: mc-nov-pop .5s cubic-bezier(.2, .9, .3, 1.2);
}
.mc-nov__miolo {
  background: radial-gradient(500px 300px at 50% -20%, rgba(200,0,0,.35), transparent 70%), linear-gradient(180deg, var(--carbono-1), #111);
  clip-path: polygon(23px 0, 100% 0, 100% calc(100% - 23px), calc(100% - 23px) 100%, 0 100%, 0 23px);
  padding: 30px 26px; text-align: center; position: relative; overflow: hidden;
}
.mc-nov__miolo::before, .mc-nov__miolo::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px;
  background-image: var(--pattern-xadrez-claro); background-size: 18px 18px; opacity: .25;
}
.mc-nov__miolo::before { left: 0; -webkit-mask-image: linear-gradient(to right, #000, transparent); mask-image: linear-gradient(to right, #000, transparent); }
.mc-nov__miolo::after { right: 0; -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent); }
@keyframes mc-nov-pop { from { transform: scale(.72) translateY(34px); opacity: 0; } }
.mc-nov__tag { font-size: 10px; letter-spacing: .04em; color: var(--amarelo); font-weight: 800; text-transform: uppercase; position: relative; }
.mc-nov__pontos { font-family: var(--display); font-size: 44px; font-style: italic; color: var(--amarelo); margin-top: 10px; position: relative; }
.mc-nov__pontos i { font-size: 16px; font-style: italic; color: var(--claro); }
.mc-nov__extra { font-size: 12px; color: var(--claro); font-weight: 700; margin-top: 6px; position: relative; }
.mc-nov__nivel { font-family: var(--display); font-size: 20px; font-style: italic; text-transform: uppercase; margin-top: 14px; position: relative; }
.mc-nov__barra {
  height: 9px; background: rgba(255,255,255,.14); border: 1px solid var(--linha-media);
  border-radius: 999px; overflow: hidden; margin-top: 8px; position: relative;
}
.mc-nov__barra .fill { height: 100%; width: 0; background: var(--grad-barra); }
.mc-nov__barra .fill.anda { transition: width 1.2s cubic-bezier(.2, .8, .3, 1); }
.mc-nov__meta { font-size: 11px; color: var(--cinza-pista); font-weight: 700; margin-top: 6px; position: relative; }
.mc-nov__levelup {
  font-family: var(--display); font-size: 22px; font-style: italic; color: var(--amarelo);
  text-transform: uppercase; margin-top: 12px; position: relative;
  animation: mc-nov-levelup .45s cubic-bezier(.2, .9, .3, 1.4);
}
@keyframes mc-nov-levelup { from { transform: scale(0); } }
.mc-nov__medalhas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; position: relative; }
.mc-nov__medalha {
  border: 1px solid var(--linha-media); background: rgba(0,0,0,.4); padding: 10px 14px;
  animation: mc-nov-medalha .4s cubic-bezier(.2, .9, .3, 1.4);
}
@keyframes mc-nov-medalha { from { transform: scale(0) rotate(-14deg); opacity: 0; } }
.mc-nov__medalha .emoji { font-size: 24px; }
.mc-nov__medalha .nome { font-weight: 800; font-size: 11px; margin-top: 4px; }
.mc-nov__medalha .pts { font-size: 10px; color: var(--amarelo); font-weight: 800; }
.mc-nov__btn {
  margin-top: 22px; border: 0; cursor: pointer; padding: 13px 26px; position: relative;
  font-family: var(--display); font-size: 14px; letter-spacing: .06em; color: #fff;
  background: var(--grad-vermelho); text-transform: uppercase;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

/* ---------- confete ---------- */
#mc-confete { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
#mc-confete i {
  position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px;
  animation: mc-cai linear forwards;
}
@keyframes mc-cai { to { transform: translateY(105vh) rotate(720deg); } }

/* ---------- toast ---------- */
.mc-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: #191919; color: #fff; border: 1px solid var(--linha-media);
  padding: 12px 20px; font: 700 13px var(--corpo);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 8px 30px rgba(0,0,0,.5); max-width: 92vw;
}

/* ==========================================================================
   Animação de recordação da festa: Radical (.s1) e Fofa (.s2), porta fiel do
   telão da loja (app, AnimacaoFesta.tsx). Responsiva porque a família abre no
   celular. Overlay independente do tema da página.
   ========================================================================== */
#mc-anim { position: fixed; inset: 0; z-index: 60; overflow: hidden; color: #fff; }
#mc-anim .mc-anim-x, #mc-anim .mc-anim-rep {
  position: absolute; top: 14px; z-index: 6; border: 0; border-radius: 999px; cursor: pointer;
  width: 40px; height: 40px; font-size: 17px; color: #fff; background: rgba(255,255,255,.16); backdrop-filter: blur(4px);
}
#mc-anim .mc-anim-x { right: 14px; }
#mc-anim .mc-anim-rep { right: 62px; }
#mc-anim-cena { position: absolute; inset: 0; z-index: 2; display: flex; align-items: stretch; justify-content: center; }
#mc-anim .mc-anim-prog { position: absolute; bottom: 0; left: 0; height: 5px; width: 0; background: #F2EE0C; transition: width .4s linear; z-index: 5; }

/* peças comuns às duas */
#mc-anim .a-mid { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2.2vh, 26px); text-align: center; padding: 46px 18px 60px; overflow: hidden; }
#mc-anim .a-col { position: relative; flex: 1; display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 16px); padding: clamp(14px, 3vh, 40px) clamp(12px, 4vw, 90px) clamp(40px, 6vh, 70px); min-height: 0; max-width: 1500px; margin: 0 auto; width: 100%; }
#mc-anim .a-lista { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(5px, 1vh, 12px); min-height: 0; }
#mc-anim .a-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; font-size: clamp(14px, 2.6vh, 27px); }
#mc-anim .a-coroa { font-size: clamp(20px, 3.4vh, 40px); }
#mc-anim .a-coroona { font-size: clamp(70px, 14vh, 150px); line-height: 1; animation: aDesce 1.2s 1.2s both; }
#mc-anim .a-med { font-size: clamp(14px, 2.4vh, 26px); }
#mc-anim .a-selo { border-radius: 999px; padding: 1px 10px; font-weight: 800; white-space: nowrap; font-size: clamp(10px, 1.7vh, 17px); }
#mc-anim .a-mid > div { animation: aEntra .7s both; }
@keyframes aEntra { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes aPop { 0% { opacity: 0; transform: scale(.5); } 70% { opacity: 1; transform: scale(1.09); } 100% { opacity: 1; transform: scale(1); } }
@keyframes aDesce { from { opacity: 0; transform: translateY(-160px); } 70% { opacity: 1; transform: translateY(12px); } 100% { opacity: 1; transform: none; } }
@keyframes aPisca { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes aConfete { to { transform: translateY(120vh) rotate(740deg); } }
@keyframes aRow { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }

/* ---- 1 · Radical: dark racing ---- */
#mc-anim.s1 { background: radial-gradient(1200px 700px at 50% -10%, #101a3a 0%, #04060b 60%); font-family: "Chakra Petch", "Orbitron", sans-serif; }
#mc-anim.s1 .r-xadrez { position: absolute; left: 0; right: 0; height: 22px; background: repeating-conic-gradient(#fff 0% 25%, #111318 0% 50%) 0 0 / 44px 44px; opacity: .5; animation: rFaixa 6s linear infinite; z-index: 1; }
#mc-anim.s1 .r-xadrez.topo { top: 0; } #mc-anim.s1 .r-xadrez.base { bottom: 0; }
@keyframes rFaixa { to { background-position: -176px 0; } }
#mc-anim.s1 .r-semaforo { display: flex; gap: clamp(12px, 2vw, 26px); background: #0b0d14; border: 3px solid #232838; border-radius: 26px; padding: clamp(12px, 2vh, 22px) clamp(16px, 2.6vw, 30px); }
#mc-anim.s1 .r-semaforo i { width: clamp(34px, 6.5vh, 74px); height: clamp(34px, 6.5vh, 74px); border-radius: 50%; background: #C80000; box-shadow: 0 0 44px #C80000; animation: rAcende .3s 1.2s both; }
#mc-anim.s1 .r-semaforo i.l2 { animation-delay: 2.2s; }
#mc-anim.s1 .r-semaforo i.l3 { background: #F2EE0C; box-shadow: 0 0 54px #F2EE0C; animation-delay: 3.4s; }
@keyframes rAcende { from { opacity: .14; } to { opacity: 1; } }
#mc-anim.s1 .r-apres { font-size: clamp(13px, 2.6vh, 30px); font-weight: 700; letter-spacing: .32em; color: #8FA3DD; animation-delay: .5s; }
#mc-anim.s1 .r-titulo { font-style: italic; font-weight: 700; font-size: clamp(34px, 10vh, 116px); line-height: 1.05; text-transform: uppercase; text-shadow: 0 6px 0 #C80000; overflow-wrap: anywhere; }
#mc-anim.s1 .r-titulo.pop { animation: aPop .8s 3.6s both; }
#mc-anim.s1 .a-mid .r-oficial { font-size: clamp(15px, 2.8vh, 32px); font-weight: 700; letter-spacing: .18em; color: #F2EE0C; animation-delay: 4.4s; }
#mc-anim.s1 .r-live { font-size: clamp(14px, 2.6vh, 30px); font-weight: 800; letter-spacing: .16em; color: #FF6B71; animation: aPisca 1.4s 5s infinite !important; }
#mc-anim.s1 .r-h { font-size: clamp(17px, 3.4vh, 40px); font-weight: 700; font-style: italic; letter-spacing: .1em; color: #F2EE0C; animation: aEntra .5s both; }
#mc-anim.s1 .r-aniv { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 24px); border-radius: 18px; padding: clamp(6px, 1.4vh, 14px) clamp(12px, 2vw, 30px); background: linear-gradient(90deg, rgba(242,238,12,.18), rgba(200,0,0,.2)); border: 3px solid #F2EE0C; box-shadow: 0 0 40px rgba(242,238,12,.18); animation: aPop .6s .2s both; }
#mc-anim.s1 .r-aniv .a-nm { font-size: clamp(16px, 3.2vh, 38px); }
#mc-anim.s1 .r-aniv-sub { font-size: clamp(10px, 2vh, 24px); font-weight: 700; letter-spacing: .1em; color: #FFB3B6; white-space: nowrap; }
#mc-anim.s1 .r-aniv-pts { font-size: clamp(16px, 2.9vh, 34px); font-weight: 800; color: #5BE87A; font-variant-numeric: tabular-nums; }
#mc-anim.s1 .r-row { display: flex; align-items: center; gap: clamp(8px, 1vw, 16px); border-radius: 14px; padding: clamp(3px, .8vh, 8px) clamp(10px, 1.6vw, 26px); background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.3); animation: aRow .45s both; min-height: 0; }
#mc-anim.s1 .r-row.p1 { background: rgba(242,238,12,.13); border: 3px solid #F2EE0C; }
#mc-anim.s1 .r-pos { font-style: italic; font-weight: 700; font-size: clamp(16px, 3.2vh, 38px); min-width: 2.1em; color: #8FA3DD; }
#mc-anim.s1 .r-row.p1 .r-pos { color: #F2EE0C; }
#mc-anim.s1 .r-pts { font-size: clamp(14px, 2.6vh, 30px); font-weight: 800; color: #5BE87A; font-variant-numeric: tabular-nums; }
#mc-anim.s1 .a-selo { border: 2px dashed #F2EE0C; color: #F2EE0C; }
#mc-anim.s1 .r-rodape { font-size: clamp(11px, 2.2vh, 26px); color: #8FA3DD; text-align: center; animation: aEntra .6s 1.2s both; }
#mc-anim.s1 .r-confete { position: absolute; top: -30px; width: 14px; height: 24px; border-radius: 4px; animation-name: aConfete; animation-timing-function: linear; animation-fill-mode: both; }
#mc-anim.s1 .r-camp { font-style: italic; font-weight: 700; font-size: clamp(20px, 4.8vh, 56px); letter-spacing: .06em; color: #F2EE0C; text-transform: uppercase; animation-delay: 2.4s; }
#mc-anim.s1 .a-mid .r-regra { font-size: clamp(15px, 2.8vh, 32px); font-weight: 700; color: #FFB3B6; animation-delay: 4.2s; }
#mc-anim.s1 .r-box { background: rgba(41,41,255,.16); border: 3px solid #2929FF; border-radius: 18px; padding: clamp(12px, 1.8vh, 20px) clamp(18px, 3vw, 38px); font-size: clamp(14px, 2.6vh, 30px); font-weight: 800; animation-delay: 5.4s; }
#mc-anim.s1 .r-box b { color: #F2EE0C; font-weight: 800; }
#mc-anim.s1 .a-mid .a-coroona { animation: aDesce 1.2s 1.4s both; }

/* ---- 2 · Fofa: clara infantil ---- */
#mc-anim.s2 { background: linear-gradient(180deg, #7db9ff 0%, #a8d4ff 55%, #d8edff 100%); color: #1A2440; font-family: "Baloo 2", "Chakra Petch", sans-serif; }
#mc-anim.s2 .mc-anim-x, #mc-anim.s2 .mc-anim-rep { background: rgba(255,255,255,.85); color: #00006E; font-weight: 800; }
#mc-anim.s2 .f-nuvem { position: absolute; left: 0; font-size: clamp(50px, 10vh, 110px); opacity: .9; animation: fNuvem 46s linear infinite; pointer-events: none; z-index: 1; top: 90px; }
#mc-anim.s2 .f-nuvem.n2 { top: 230px; font-size: clamp(38px, 7.5vh, 80px); opacity: .75; animation: fNuvem 62s -20s linear infinite; }
@keyframes fNuvem { from { transform: translateX(-300px); } to { transform: translateX(110vw); } }
#mc-anim.s2 .f-sol { position: absolute; top: 46px; right: clamp(16px, 4vw, 80px); font-size: clamp(56px, 11vh, 120px); animation: fBalanca 4s ease-in-out infinite; pointer-events: none; z-index: 1; }
@keyframes fBalanca { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
#mc-anim.s2 .f-chao { position: absolute; bottom: 0; left: 0; right: 0; height: clamp(64px, 12vh, 130px); background: #3f4652; z-index: 1; }
#mc-anim.s2 .f-faixa { position: absolute; bottom: clamp(28px, 5.2vh, 56px); left: 0; right: 0; height: clamp(7px, 1.3vh, 14px); background: repeating-linear-gradient(90deg, #fff 0 90px, transparent 90px 200px); opacity: .85; z-index: 1; }
#mc-anim.s2 .a-mid { padding-bottom: clamp(90px, 16vh, 160px); }
#mc-anim.s2 .a-col { padding-bottom: clamp(80px, 15vh, 170px); }
#mc-anim.s2 .f-sub { font-size: clamp(22px, 4.8vh, 56px); font-weight: 700; color: #0000C8; animation-delay: .4s; }
#mc-anim.s2 .f-titulo { font-weight: 800; font-size: clamp(38px, 11vh, 126px); line-height: 1.05; color: #C80000; text-shadow: 0 5px 0 #fff; overflow-wrap: anywhere; }
#mc-anim.s2 .f-titulo.pop { animation: aPop 1s 1.6s both; }
#mc-anim.s2 .f-sub2 { font-size: clamp(17px, 3.8vh, 44px); font-weight: 700; color: #00006E; animation-delay: 3s; }
#mc-anim.s2 .f-baloes { display: flex; gap: clamp(20px, 4vw, 44px); font-size: clamp(36px, 6.4vh, 70px); animation-delay: 4s; }
#mc-anim.s2 .f-baloes span { animation: fFlutua 3s ease-in-out infinite; }
#mc-anim.s2 .f-baloes .b2 { animation: fFlutua 3.4s -.8s ease-in-out infinite; }
#mc-anim.s2 .f-baloes .b3 { animation: fFlutua 3.2s -1.6s ease-in-out infinite; }
@keyframes fFlutua { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-20px) rotate(4deg); } }
#mc-anim.s2 .f-kart { position: absolute; bottom: clamp(44px, 8vh, 88px); left: 0; font-size: clamp(54px, 10vh, 110px); animation: fKart 7s 1s linear both !important; pointer-events: none; }
@keyframes fKart { from { transform: translateX(-400px); } to { transform: translateX(120vw); } }
#mc-anim.s2 .f-h { font-weight: 800; font-size: clamp(24px, 5.2vh, 60px); color: #0000C8; text-align: center; animation: aPop .7s both; }
#mc-anim.s2 .f-aniv { display: flex; align-items: center; gap: clamp(8px, 1.2vw, 22px); background: linear-gradient(90deg, #fff2a8, #ffd9b0); border: 4px solid #F2EE0C; border-radius: 999px; padding: clamp(5px, 1vh, 10px) clamp(14px, 2vw, 34px) clamp(5px, 1vh, 10px) clamp(8px, 1.2vw, 18px); box-shadow: 0 8px 0 rgba(0,0,110,.15); animation: aPop .6s .2s both; }
#mc-anim.s2 .f-aniv .a-nm { font-size: clamp(16px, 3.1vh, 36px); font-weight: 800; color: #C80000; }
#mc-anim.s2 .f-aniv-sub { font-size: clamp(10px, 2vh, 24px); font-weight: 800; color: #00006E; white-space: nowrap; }
#mc-anim.s2 .f-aniv-pts { font-weight: 800; font-size: clamp(15px, 2.8vh, 32px); color: #0000C8; font-variant-numeric: tabular-nums; }
#mc-anim.s2 .f-row { display: flex; align-items: center; gap: clamp(8px, 1vw, 16px); background: rgba(255,255,255,.92); border: 4px solid transparent; border-radius: 999px; padding: clamp(2px, .6vh, 6px) clamp(14px, 2vw, 30px) clamp(2px, .6vh, 6px) clamp(4px, .6vw, 10px); box-shadow: 0 6px 0 rgba(0,0,110,.12); animation: aRow .5s both; min-height: 0; }
#mc-anim.s2 .a-lista .f-row:first-child { border-color: #F2EE0C; }
#mc-anim.s2 .f-pos { width: clamp(28px, 5vh, 56px); height: clamp(28px, 5vh, 56px); border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: clamp(12px, 2.2vh, 25px); flex: none; }
#mc-anim.s2 .f-pts { font-weight: 800; font-size: clamp(14px, 2.5vh, 28px); color: #0000C8; font-variant-numeric: tabular-nums; }
#mc-anim.s2 .a-selo { background: #fff; border: 3px dashed #C80000; color: #C80000; }
#mc-anim.s2 .f-rodape { font-size: clamp(12px, 2.4vh, 28px); font-weight: 700; color: #00006E; text-align: center; animation: aEntra .6s 1.2s both; }
#mc-anim.s2 .f-confete { position: absolute; top: -30px; width: 16px; height: 26px; border-radius: 6px; animation-name: aConfete; animation-timing-function: linear; animation-fill-mode: both; }
#mc-anim.s2 .f-cor { position: absolute; bottom: 200px; font-size: clamp(34px, 5.5vh, 60px); animation: fCoracao 4s 2s ease-out infinite; }
#mc-anim.s2 .f-cor.c1 { left: 16%; }
#mc-anim.s2 .f-cor.c2 { right: 18%; animation-duration: 4.4s; animation-delay: 3s; }
@keyframes fCoracao { 0% { opacity: 0; transform: translateY(0) scale(.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-300px) scale(1.25); } }
#mc-anim.s2 .f-box { background: #fff; border-radius: 22px; padding: clamp(12px, 1.7vh, 18px) clamp(18px, 3vw, 34px); font-size: clamp(14px, 2.6vh, 30px); font-weight: 800; box-shadow: 0 8px 0 rgba(0,0,110,.15); animation-delay: 5s; }
#mc-anim.s2 .f-box b { color: #0000C8; font-weight: 800; }

/* Celular: o selo de 10% e os rótulos compridos esmagavam os nomes; em tela
   estreita eles saem (coroa e medalha já contam a história). */
@media (max-width: 620px) {
  #mc-anim .a-selo, #mc-anim .r-aniv-sub, #mc-anim .f-aniv-sub { display: none; }
}

/* Clube eKarts (assinatura do responsável) */
#pn-clube { margin-top: 18px; }
.clb + .clb { margin-top: 10px; }
.clb__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.clb__plano { font-family: var(--display); font-size: 20px; letter-spacing: .02em; }
.clb__preco { color: var(--claro); font-weight: 600; }
.clb__st { font-size: 12px; font-weight: 700; padding: 4px 10px; border: 1px solid var(--linha-media); color: var(--claro); white-space: nowrap; }
.clb__st--active { color: var(--verde-ok); border-color: var(--verde-ok); }
.clb__st--past_due { color: var(--amarelo); border-color: var(--amarelo); }
.clb__st--pending { color: var(--claro); }
.clb__st--cancelled { color: var(--cinza-pista); }
.clb__dados { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 14px 0 0; }
.clb__dados dt { color: var(--cinza-pista); font-weight: 600; }
.clb__dados dd { margin: 0; overflow-wrap: anywhere; }
.clb__acao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.clb__acao .ek-btn:disabled { background: transparent; border: 1px solid var(--grafite); color: var(--cinza-pista); clip-path: none; opacity: 1; }
.clb__acao .ek-btn:disabled:hover { filter: none; }
.clb__conf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; }
.clb__nota { font-size: 12px; color: var(--cinza-pista); font-weight: 600; }
.clb__erro { width: 100%; color: var(--amarelo); font-weight: 600; font-size: 13px; }
.clb-vazio { color: var(--cinza-pista); font-weight: 600; }
.clb-vazio a { color: var(--amarelo); }
@media (max-width: 480px) { .clb__dados { grid-template-columns: 1fr; gap: 2px; } .clb__dados dd { margin-bottom: 6px; } }

/* Cancelar assinatura: discreto de propósito (decisão do dono, 17/09/2026). */
.clb__link-discreto { background: none; border: 0; padding: 2px 0; cursor: pointer; font-family: var(--corpo); font-size: 11px; font-weight: 500; color: var(--grafite); text-transform: none; letter-spacing: 0; }
.clb__link-discreto:hover { color: var(--cinza-pista); text-decoration: underline; }
.clb__lista { margin: 14px 0 18px; padding-left: 18px; color: var(--claro); }
.clb__lista li { margin: 4px 0; }
.clb__assinar { display: inline-block; }

/* Card em linha no desktop (regra do dono, 18/09/2026): a ação nunca fica
   isolada na ponta direita de um card comprido, longe da informação. Em tela
   larga o card encolhe até uma largura de leitura e o botão fica ao lado do
   texto. Vale para todo card de uma linha da Área do Piloto; card novo desse
   tipo entra nesta lista. No celular nada muda. */
@media (min-width: 900px) {
  .pnv, .rs, .rs-destaque, .mc-festa, .clb { max-width: 640px; }
  /* Cabeçalho de seção: o botão ou as abas ficam junto do título. */
  .fs-cab, .rk__cab, .vw__cab { justify-content: flex-start; gap: 24px; }
}