/* ==========================================================================
   fezinha-v2.css — a variante B: paleta, casca escura e componentes.

   A mecânica vem de base.css, que é cópia local e não conhece paleta.

   ESTA FOLHA ERA O lotoapp.css. Ela mudou de nome, não de desenho: a decisão
   de 22/09/2026 foi manter a pele e trocar a marca. O prefixo --la-/.la- virou
   --fz2-/.fz2- porque "la" queria dizer LotoApp, e o LotoApp agora é outro
   repositório — nome que mente é o que faz alguém procurar no lugar errado.

   O que saiu junto com a marca: roleta, medidor de bônus, gerador, conquistas
   e o selo PREMIUM. A diretriz do Igor de 11/09/2026 proíbe gamificação na
   Fezinha, e regra de CSS sem tela é resíduo que convida a tela de volta.
   ========================================================================== */

:root {
  /* ---------- Fezinha v2 · comprometida com o escuro ---------- */
  --fz2-bg:       #0b0f0c;
  --fz2-fg:       #eef4ea;
  --fz2-fg-2:     #9aa795;
  --fz2-card:     rgba(255, 255, 255, 0.055);
  --fz2-campo:    rgba(255, 255, 255, 0.06);
  --fz2-elevado:  rgba(255, 255, 255, 0.09);
  --fz2-linha:    rgba(255, 255, 255, 0.10);
  --fz2-fio:      rgba(255, 255, 255, 0.03);
  --fz2-lima:     #a8ff35;
  --fz2-lima-d:   #7ed321;
  --fz2-sobre-lima:#0b0f0c;
  --fz2-luz:
    radial-gradient(1500px 720px at 34% -20%, rgba(215, 255, 164, 0.10), transparent 66%),
    radial-gradient(1100px 600px at 84% -28%, rgba(170, 240, 190, 0.05), transparent 68%),
    radial-gradient(1800px 900px at 96% 104%, rgba(215, 255, 164, 0.045), transparent 68%);


  /* ---------- os quatro papéis que base.css espera ---------- */
  --foco:       var(--fz2-lima);
  --tinta-3:    var(--fz2-fg-2);
  --superficie: var(--fz2-card);
  --fio:        var(--fz2-fio);
}

body {
  margin: 0;
  background-color: var(--fz2-bg);
  background-image: var(--fz2-luz);
  background-attachment: fixed;   /* a luz fica ancorada na tela, não rola */
  background-repeat: no-repeat;
  color: var(--fz2-fg);
  font-family: var(--fonte);
  font-weight: 400;
  font-optical-sizing: none;
  font-size: 0.875rem;
  line-height: 1.55;
  padding-bottom: var(--barra-h);
  -webkit-font-smoothing: antialiased;
}

.vidro {
  background: var(--fz2-card);
  box-shadow: inset 0 1px 0 0 var(--fz2-fio);
}

/* ==========================================================================
   LotoApp — o produto pago dentro da conta.
   Mesma mecânica da Fezinha (vidro em alfa, fio por dentro, raios, aperto no
   clique), pele oposta: casca escura e lima elétrica.

   A DIVERGÊNCIA DELIBERADA é a tipografia. A Fezinha é peso único, porque
   sobriedade é o pedido dela. Aqui o pedido é agressividade comercial, então o
   display vai em Expanded pesado — é o que separa os dois produtos à distância.
   Roleta, bônus, XP e conquistas moram só neste arquivo.
   ========================================================================== */

/* Duas colunas: a navegação à esquerda, o resto à direita. O min-width: 0 no
   corpo é o que permite a coluna encolher — sem ele, conteúdo largo (a roda da
   roleta, uma tabela) empurraria a grade e criaria rolagem horizontal. */
/* Coluna única: a navegação subiu para o topo. Ver o comentário do navLotoApp
   — sete destinos na lateral comiam a largura das telas que mais precisam. */
.fz2 { min-height: calc(100vh - var(--barra-h)); display: flex; flex-direction: column; min-width: 0; }

/* display agressivo: largura e peso no talo */
.fz2-hero h1, .sec-head-fz2 .t-tela, .btn-fz2 {
  font-family: Archivo, var(--fonte);
  font-variation-settings: "wdth" 112, "wght" 800;
  font-stretch: 112%;
  font-weight: 800;
}

/* ---------- barra do app ---------- */
/* O fundo do cabeçalho sangra; o CONTEÚDO dele para no mesmo teto da coluna.
   Sem isto a marca ficaria na borda de 1920px e o saldo na outra, enquanto a
   página embaixo mora em 1126px centrados — duas larguras discordando na
   mesma tela. */
.fz2-top > * { width: 100%; max-width: var(--largura-max); margin-inline: auto; }
.fz2-top {
  position: sticky; top: 0; z-index: 40;
  display: grid; gap: var(--e-2);
  padding: 0.7rem clamp(1rem, 4vw, 4.5rem);
  background: rgba(11, 15, 12, 0.72);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 -1px 0 0 var(--fz2-fio);
}
/* NO TELEFONE O TOPO CARREGA SÓ MARCA E CARRINHO. Decisão do Caio em
   22/09/2026: tirar as cápsulas no mobile para a linha parar de quebrar.

   A conta que levou até aqui: em 390px a faixa útil tem ~359px e as três
   cápsulas mais a marca ocupavam ~451px. Encolher geometria chegou a ~331px e
   coube, mas com 28px de folga estimada — apertado demais para um cabeçalho
   que precisa aguentar nome de usuário maior, saldo com mais dígitos ou
   tradução. Tirar o que é informativo resolve por subtração, e sobra folga de
   verdade: ~207px numa faixa de ~359.

   SAI O QUE INFORMA, FICA O QUE AGE.
     · saldo — é informativo, e reaparece no checkout, que é onde ele decide
       alguma coisa: lá o pagamento por saldo é uma opção de rádio que se
       desabilita sozinha quando o valor não cobre o pedido.
     · "Olá, Ana" — é um <span>, nem clicável é. Cumprimento não paga o
       espaço que custa no telefone.
     · O CARRINHO FICA, e isto não é negociável por espaço: é um <a> para
       #/carrinho e o ÚNICO caminho para o checkout. Tirá-lo cortaria o funil
       justamente no aparelho onde está a maioria do público.

   E A MARCA VOLTA A 1,5rem, que era a divergência de A/B que a versão
   anterior tinha aberto: as duas variantes voltam a mostrar o logo do mesmo
   tamanho em toda largura. Com as cápsulas fora, não há por que encolher.

   36rem, que é o ponto de virada que este arquivo já tinha para o topo. */
@media (max-width: 36rem) {
  .fz2-top { padding: 0.6rem 1rem; gap: 0.5rem; }
  .fz2-topo-linha { gap: 0.4rem; }

  /* Só o SALDO sai. Ele é o mais largo dos três (~147px, porque carrega rótulo
     e cifra) e é o único puramente informativo — e desde 22/09 ele vive no
     resumo do carrinho, ao lado do total, que é onde decide alguma coisa. */
  .fz2-top .saldo-pill { display: none; }

  /* O CARRINHO PERDE A CÁPSULA, NÃO O ALVO. Some o fundo; ficam o ícone, a
     contagem em lima e — o que importa — o min-height de var(--toque) e a
     goteira, que continuam sendo área de toque mesmo sem nada pintado atrás.
     Alvo invisível é alvo; alvo pequeno é que não.
     O hover deixa de acender fundo e passa a acender o ícone: com a cápsula
     fora, pintar um retângulo no hover devolveria a cápsula que acabou de
     sair. Abaixo de 576px isso só aparece em janela estreita de desktop. */
  .fz2-top .cart-fz2 { background: none; padding-inline: 0.35rem; }
  .fz2-top .cart-fz2:hover { background: none; color: var(--fz2-lima); }
}
.fz2-mark { display: flex; align-items: center; text-decoration: none; color: var(--fz2-fg); }
/* A marca é imagem, e imagem mede em altura: a largura sai da proporção do
   arquivo. 1,5rem é a mesma altura da variante A — as duas têm de sair do
   mesmo tamanho, senão o A/B mede logo junto com pele. */
.fz2-marca { display: block; height: 1.5rem; width: auto; }
/* AS TRÊS CÁPSULAS SÃO UM BLOCO SÓ, e isto não depende de ponto de virada.

   O defeito: a .dir era `flex-wrap: wrap`, então quando o conjunto não cabia
   ao lado da marca o flex derrubava só a ÚLTIMA cápsula — o "Olá, Ana" ficava
   órfão numa linha, desencontrado do saldo e do carrinho. Eu tentei consertar
   com @media em 30rem e errei duas vezes: primeiro porque o problema aparece
   acima de 480px, e principalmente porque largura de conteúdo não se adivinha
   por breakpoint. Nome de usuário longo, moeda com mais dígitos ou tradução
   quebram qualquer número que eu escolhesse.

   O certo é intrínseco: `nowrap` na .dir faz dela um item indivisível, e
   `wrap` no pai faz o pai descer o BLOCO INTEIRO quando ele não couber. O que
   se lê junto desce junto, em qualquer largura, com qualquer conteúdo.

   `space-between` no lugar do `margin-inline-start: auto` porque ele resolve
   os dois estados de uma vez: com as duas na mesma linha, marca à esquerda e
   cápsulas à direita; com a .dir sozinha na linha de baixo, ela alinha à
   esquerda, embaixo da marca — que é onde ela deve estar. A margem automática
   a empurraria para a borda direita, sozinha. */
.fz2-topo-linha {
  display: flex; align-items: center; gap: 0.8rem;
  flex-wrap: wrap; justify-content: space-between;
}
.fz2-top .dir { display: flex; align-items: center; gap: var(--e-2); flex-wrap: nowrap; }
.saldo-pill {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  background: var(--fz2-campo); border-radius: var(--raio-pill); padding: 0.4rem 0.85rem;
  font-family: var(--fonte-num); font-size: 0.875rem;
}
.saldo-pill .rot { font-size: 0.5rem; letter-spacing: .14em; color: var(--fz2-fg-2); text-transform: uppercase; }
.saldo-pill b { color: var(--fz2-lima); }

/* ---------- corpo ---------- */
.fz2-main { flex: 1 1 auto; padding-bottom: 2rem; }
/* Sem teto de coluna, igual à Fezinha: a seção ocupa a tela e o que segura o
   texto é a goteira, que cresce com a largura. */
/* A SEÇÃO ocupa a tela; a COLUNA para. Este wrap não tinha teto NENHUM — nem
   usava o --largura-max — então o conteúdo esticava até onde o monitor
   permitisse. Com box-sizing: border-box o teto inclui a goteira: em 1920px o
   conteúdo legível fica em 1126px em vez de 1766px.
   Para voltar ao anterior basta --largura-max: 100%. Uma linha.

   Os dois modificadores são compostos (.fz2-wrap.sangra) de propósito: em
   seletor solto a especificidade empataria com .fz2-wrap e quem ganharia seria
   a ordem no arquivo, que é a espécie de dependência que quebra sem avisar. */
.fz2-wrap {
  width: 100%; max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 4.5rem);
}
/* Paisagem, não leitura: abertura e vitrine seguem de ponta a ponta. */
.fz2-wrap.sangra { max-width: none; }
/* Lista de um item por linha — resultados. O teto geral existe para a linha do
   comparador, que tem cinco colunas; um card sozinho herdando aquela largura
   fica com o conteúdo de um lado e a borda do outro. */
.fz2-wrap.col-estreita { max-width: 50rem; }

/* ---------- abertura: a promessa vem primeiro ---------- */
.fz2-hero {
  /* Só o cabeçalho desconta agora: a navegação virou coluna e não come altura. */
  min-height: calc(100svh - 3.1rem - var(--barra-h));
  display: grid; align-content: center;
  padding-block: 2.5rem;
  background: var(--fz2-card);
  box-shadow: inset 0 -1px 0 0 var(--fz2-fio);
  text-align: center;
}
/* No telefone a tela cheia viraria uma dobra só com o título: desliga. */
@media (max-width: 48rem) { .fz2-hero { min-height: 0; padding-block: 1.8rem; } }
.fz2-hero .kicker {
  font-family: var(--fonte-num); font-size: 0.6875rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fz2-lima); margin-bottom: 0.7rem;
}
.fz2-hero h1 {
  /* a medida curta é o que quebra o título em três linhas curtas; o balance
     reparte as palavras entre elas em vez de deixar uma órfã no fim */
  margin: 0 auto; max-width: 15ch;
  font-size: clamp(1.9rem, 4.8vw, 3.4rem); line-height: 1.02;
  letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance;
}
.fz2-hero h1 em { font-style: normal; color: var(--fz2-lima); }
.fz2-hero p { margin: 1.2rem auto 0; font-size: 1rem; color: var(--fz2-fg-2); max-width: 44ch; line-height: 1.55; text-wrap: pretty; }
.fz2-hero .acoes { margin-top: 1.8rem; display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }

.btn-fz2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font: inherit; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .03em;
  height: 3.1rem; padding-inline: 1.7rem;
  border: 0; border-radius: var(--raio-campo);
  cursor: pointer; text-decoration: none;
  transition: background var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease),
              transform var(--t-rapido) var(--ease);
}
.btn-fz2:active { transform: scale(.985); }
.btn-fz2-lime { background: var(--fz2-lima); color: var(--fz2-sobre-lima); }
.btn-fz2-lime:hover { background: var(--fz2-lima-d); }
.btn-fz2-out { background: var(--fz2-campo); color: var(--fz2-fg); }
.btn-fz2-out:hover { background: var(--fz2-elevado); }
.btn-fz2[disabled] { opacity: .4; cursor: not-allowed; }
.btn-fz2-block { width: 100%; }

/* ---------- dezena ---------- */
/* Estas três regras moravam no bloco do gerador, e o gerador saiu. A pastilha
   de dezena não era dele: resultado, carrinho e linha de jogo do bolão
   desenham a mesma coisa. Quem mede o tamanho em cada tela é a regra local
   (.res-fz2 .dz-fz2 e companhia); aqui fica só a forma. */
.dzs-fz2 { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.dz-fz2 {
  font-family: var(--fonte-num); font-size: 0.875rem;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border-radius: var(--raio-campo); background: var(--fz2-elevado); color: var(--fz2-fg);
}
.dz-fz2.on { background: var(--fz2-lima); color: var(--fz2-sobre-lima); }

/* ---------- lista vazia ---------- */
.vazio {
  border-radius: var(--raio-card); padding: 2rem 1.2rem; text-align: center;
  color: var(--fz2-fg-2); margin-top: 1.1rem; font-size: 0.8125rem;
  background: var(--fz2-campo);
}
.vazio strong { display: block; color: var(--fz2-fg); font-size: 0.9375rem; margin-bottom: 0.3rem; }

/* ---------- navegação lateral ---------- */
/* Gruda no topo e ocupa a tela inteira de altura, então acompanha a rolagem do
   conteúdo sem sair de vista. O fio mudou de lado junto com ela: antes
   contornava por cima, agora pela direita, que é onde ela encosta no conteúdo. */
/* Faixa horizontal, não coluna. Some o ícone: com cinco rótulos curtos ele era
   redundante, e ícone sem rótulo é adivinhação — o público-alvo tem baixa
   alfabetização digital (FEZ-19). No telefone a faixa rola no eixo x em vez de
   quebrar em duas alturas, para não empurrar o conteúdo para baixo da dobra. */
/* NADA DE ROLAGEM ESCONDIDA. Esta faixa era `overflow-x: auto` com
   `scrollbar-width: none` e a barra do webkit apagada: quando os destinos não
   cabiam, eles saíam da vista SEM NENHUM SINAL de que havia mais. É o mesmo
   defeito que a variante A tinha com display:none, na outra roupa — esconder é
   a saída errada para um produto cujo piso é o público idoso.

   As margens negativas também saíram, e elas eram defeito NOVO, meu: o teto de
   coluna dá `margin-inline: auto` a todo filho do .fz2-top, mas o
   `margin-inline: calc(...)` daqui vinha depois no arquivo e ganhava. A nav
   ficava 76,8px à esquerda da marca — as duas linhas do cabeçalho
   desalinhadas uma da outra.

   Agora ela quebra para a linha de baixo em vez de sumir, e alinha com o topo. */
.fz2-nav { display: flex; gap: var(--e-1); flex-wrap: wrap; }
.fz2-nav a {
  display: inline-flex; align-items: center; min-height: var(--toque);
  /* A goteira lateral encolhe com a tela; a ALTURA não. São cinco destinos
     desde que Loterias e Sobre voltaram, e com 0,8rem fixo de cada lado eles
     estouravam a linha por poucos pixels — "Sobre" caía sozinho embaixo. O
     clamp devolve ~40px no estreito sem tocar no alvo de toque, que segue em
     var(--toque). Abaixo de ~390px ainda quebra, e quebrar está certo: o que
     não pode é sumir. */
  padding: 0.45rem clamp(0.5rem, 2.2vw, 0.8rem); border-radius: var(--raio-pill);
  text-decoration: none; color: var(--fz2-fg-2); white-space: nowrap;
  font-size: 0.8125rem; letter-spacing: .01em;
  transition: color var(--t-rapido) var(--ease), background var(--t-rapido) var(--ease);
}
.fz2-nav a:hover { color: var(--fz2-fg); background: var(--fz2-campo); }
.fz2-nav a[aria-current="page"] { color: var(--fz2-sobre-lima); background: var(--fz2-lima); }


.fz2-legal { padding: 1.1rem 0 0.3rem; font-size: 0.625rem; color: var(--fz2-fg-2); line-height: 1.6; margin-top: 1.4rem; box-shadow: inset 0 1px 0 0 var(--fz2-fio); }

/* ---------- clique é aperto ---------- */
/* Mesmo idioma da Fezinha, aplicado aos clicáveis que faltavam aqui: a faixa
   de navegação do topo e a marca. Botão (.btn-fz2) e cartão de modo (.modo)
   já apertavam. */
.fz2-nav a, .fz2-mark {
  transition-property: color, background, transform;
  transition-duration: var(--t-rapido);
  transition-timing-function: var(--ease);
}
.fz2-nav a:active, .fz2-mark:active { transform: scale(.985); }


/* ==========================================================================
   A PLATAFORMA, NA MARCA AGRESSIVA

   LotoApp e Fezinha são a mesma plataforma em duas marcas (FEZ-42/FEZ-44). O
   que diverge é a estética, e tem de divergir de verdade: visual igual entrega
   as duas como a mesma rede para o Google (FEZ-17). Por isso nada aqui é a
   folha da Fezinha repintada — é outra forma, outro peso, outra hierarquia.
   ========================================================================== */

/* ---------- topo: saldo, carrinho e conta ---------- */
.cart-fz2, .conta-fz2 {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: var(--toque);
  padding: 0.4rem 0.7rem; border-radius: var(--raio-pill);
  background: var(--fz2-campo); color: var(--fz2-fg);
  font-size: 0.75rem; text-decoration: none;
}
.cart-fz2 b { font-family: var(--fonte-num); color: var(--fz2-lima); }
.cart-fz2:hover, .conta-fz2:hover { background: var(--fz2-elevado); }

/* ---------- rodapé ---------- */
.fz2-foot { margin-top: auto; padding-block: 1.6rem 2.4rem; box-shadow: inset 0 1px 0 0 var(--fz2-linha); }
.idade {
  display: inline-flex; align-items: center; font-family: var(--fonte-num); font-size: 0.625rem;
  background: var(--fz2-elevado); border-radius: var(--raio-pill); padding: 0.1rem 0.5rem; margin-inline: 0.25rem;
}

/* ---------- cabeçalho de tela ---------- */
/* Substitui o antigo .gerador-cab, que servia só ao gerador: agora as onze
   telas internas abrem igual, e o que varia é o bloco extra da direita. */
.sec-head-fz2 {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-block: clamp(1.6rem, 3.6vw, 2.8rem) 0.2rem;
}
.sec-head-fz2 h1, .sec-head-fz2 h2 {
  margin: 0; text-transform: uppercase; letter-spacing: -.025em; line-height: 1;
}
.sub-fz2 { margin: 0.7rem 0 0; color: var(--fz2-fg-2); font-size: 0.875rem; max-width: 58ch; text-wrap: pretty; }
.sec-mais-fz2 {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--fz2-lima); text-decoration: none;
}
.sec-mais-fz2:hover { color: var(--fz2-lima-d); }
.hero-nota { margin: 1.2rem 0 0; font-size: 0.6875rem; color: var(--fz2-fg-2); }

/* ---------- comparador de bolões ---------- */
/* Grade nomeada em vez de tabela: a linha inteira é UM link, e <a> não pode
   conter <tr>. Cada célula carrega o próprio rótulo, que some no desktop e
   reaparece no telefone, onde a linha vira bloco e o cabeçalho não existe. */
.cmp-lista { display: grid; gap: var(--e-2); margin-top: var(--e-2); }

/* A ordenação morava no canto superior direito do .sec-head-fz2, o que no
   desktop a punha a mais de mil pixels da lista que ela reordena, e no
   telefone a jogava para baixo de um parágrafo de 58ch — empurrando o primeiro
   bolão para fora da dobra, antes de qualquer dado. Agora é a faixa imediata
   acima da lista: controle e coisa controlada se tocam. */
.ordenar-lista {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2);
  margin-top: var(--e-5);
}
.cmp-fz2 {
  display: grid; align-items: center; gap: 0.8rem;
  grid-template-columns: minmax(11rem, 2.2fr) 7rem 6rem minmax(9rem, 1.4fr) auto;
  padding: 0.9rem 1.1rem; border-radius: var(--raio-card);
  background: var(--fz2-card); box-shadow: inset 0 1px 0 0 var(--fz2-fio);
  color: var(--fz2-fg); text-decoration: none;
}
.cmp-fz2:hover { background: var(--fz2-elevado); }
.cmp-nome { display: grid; gap: 0.15rem; min-width: 0; }
.cmp-conc { font-size: 0.6875rem; color: var(--fz2-fg-2); }
.loteria-fz2 { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; }
.loteria-fz2 .dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; flex: none; }
.cmp-cel { display: grid; gap: 0.1rem; }
.cmp-cel b { font-size: 0.9375rem; letter-spacing: -.02em; }
.cmp-rot { font-size: 0.5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fz2-fg-2); }
.cmp-cel.ef b { color: var(--fz2-lima); }
/* A barra é a coluna que o controle não tem: põe cota barata e cota cara no
   mesmo eixo, de relance, sem o leitor ter de dividir de cabeça. */
.cmp-fz2 .barra { display: block; height: 0.2rem; border-radius: var(--raio-pill); background: var(--fz2-elevado); margin-top: 0.25rem; }
.cmp-fz2 .barra i { display: block; height: 100%; border-radius: inherit; background: var(--fz2-lima); }
.cmp-cta {
  display: inline-flex; align-items: center; gap: 0.4rem; justify-self: end;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fz2-lima);
}
.cmp-vend { font-size: 0.625rem; color: var(--fz2-fg-2); text-transform: none; letter-spacing: 0; }
@media (max-width: 60rem) {
  .cmp-fz2 { grid-template-columns: 1fr 1fr; }
  .cmp-nome { grid-column: 1 / -1; }
  .cmp-cta { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- vitrine ---------- */
.vitrine-fz2 { overflow: hidden; padding-block: 1.6rem; margin-top: 1.4rem; box-shadow: inset 0 1px 0 0 var(--fz2-linha), inset 0 -1px 0 0 var(--fz2-linha); }
.vitrine-fita { display: flex; gap: 0.6rem; width: max-content; animation: fita-fz2 44s linear infinite; }
@keyframes fita-fz2 { from { transform: translateX(0); } to { transform: translateX(-25%); } }
/* Passar o mouse segura a fita para dar tempo de ler — a variante A já fazia
   isso e aqui faltava. */
.vitrine-fz2:hover .vitrine-fita { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  /* Parar a animação num container com overflow:hidden deixava o resto da fita
     INALCANÇÁVEL: quem pediu menos movimento perdia o conteúdo em vez de
     ganhar calma. Com overflow-x: auto ele passa a rolar à mão. */
  .vitrine-fz2 { overflow-x: auto; }
  .vitrine-fita { animation: none; }
}
.vit-fz2 {
  display: grid; gap: 0.2rem; min-width: 13rem;
  padding: 0.9rem 1.1rem; border-radius: var(--raio-card);
  background: var(--fz2-card); box-shadow: inset 0 1px 0 0 var(--fz2-fio);
}
.vit-premio { font-size: 1.25rem; letter-spacing: -.03em; color: var(--fz2-lima); }
.vit-conc { font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fz2-fg-2); }

/* ---------- como funciona ---------- */
.passos-fz2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-top: 2.2rem; }
@media (max-width: 52rem) { .passos-fz2 { grid-template-columns: 1fr; } }
.passo-fz2 {
  display: flex; gap: 0.8rem; padding: 1.2rem;
  border-radius: var(--raio-card); background: var(--fz2-card); box-shadow: inset 0 1px 0 0 var(--fz2-fio);
}
.passo-fz2 .n {
  width: 1.8rem; height: 1.8rem; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--fz2-lima); color: var(--fz2-sobre-lima); font-size: 0.8125rem;
}
.passo-fz2 h3 { margin: 0 0 0.3rem; font-size: 0.9375rem; letter-spacing: -.015em; }
.passo-fz2 p { margin: 0; font-size: 0.8125rem; color: var(--fz2-fg-2); }

/* ---------- painel: a superfície de todas as telas internas ---------- */
.duas-fz2 { display: grid; grid-template-columns: 1fr 20rem; gap: 1.2rem; align-items: start; margin-top: 1.2rem; }
@media (max-width: 56rem) { .duas-fz2 { grid-template-columns: 1fr; } }
.painel-fz2 {
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border-radius: var(--raio-card);
  background: var(--fz2-card); box-shadow: inset 0 1px 0 0 var(--fz2-fio);
  backdrop-filter: blur(16px) saturate(130%);
}
.painel-fz2 h3 {
  margin: 0 0 0.9rem; font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fz2-fg-2);
}
.painel-nota { margin: 0.7rem 0 0; font-size: 0.6875rem; color: var(--fz2-fg-2); line-height: 1.55; }
.premio-fz2 { font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: -.045em; line-height: 1; color: var(--fz2-lima); margin-top: 0.8rem; }

.linhas-fz2 { margin: 0; }
.linha-fz2 { display: flex; justify-content: space-between; gap: 0.9rem; padding: 0.5rem 0; font-size: 0.8125rem; box-shadow: 0 1px 0 0 var(--fz2-fio); }
.linha-fz2:last-of-type { box-shadow: none; }
.linha-fz2 dt { color: var(--fz2-fg-2); margin: 0; }
.linha-fz2 dd { margin: 0; }
.linha-fz2.total { margin-top: 0.4rem; padding-top: 0.8rem; font-size: 0.9375rem; box-shadow: inset 0 1px 0 0 var(--fz2-linha); }
.linha-fz2.total dd { font-size: 1.125rem; color: var(--fz2-lima); }

.progresso-fz2 { height: 0.3rem; border-radius: var(--raio-pill); background: var(--fz2-elevado); overflow: hidden; }
.progresso-fz2 i { display: block; height: 100%; background: var(--fz2-lima); }

/* jogos registrados do bolão: muitas dezenas por linha, então a ficha encolhe */
.jogos-reg { display: grid; gap: 0.35rem; }
.jogo-linha-fz2 {
  display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap;
  padding: 0.5rem 0.65rem; border-radius: var(--raio-campo); background: var(--fz2-campo);
}
.jogo-linha-fz2 .rot { font-size: 0.625rem; color: var(--fz2-fg-2); width: 1.6rem; flex: none; }
.jogo-linha-fz2 .dz-fz2 { width: 1.7rem; height: 1.7rem; font-size: 0.6875rem; border-radius: 50%; }

/* ---------- trilha do funil ---------- */
.trilha-fz2 { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; padding-block: 1.4rem 0.4rem; }
.trilha-fz2 .et {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--fonte-num); font-size: 0.5625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fz2-fg-2);
}
.trilha-fz2 .et .n {
  width: 1.15rem; height: 1.15rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.5625rem; background: var(--fz2-campo);
}
.trilha-fz2 .et[aria-current="step"] { color: var(--fz2-lima); }
.trilha-fz2 .et[aria-current="step"] .n { background: rgba(168, 255, 53, .16); }
/* Concluído troca o número pelo tique: passado e presente não podem ter a
   mesma forma, senão a trilha não diz onde se está. */
.trilha-fz2 .et.feito { color: var(--fz2-fg); }
.trilha-fz2 .et.feito .n { background: var(--fz2-lima); color: var(--fz2-sobre-lima); }
.trilha-fz2 .tr { width: 0.8rem; height: 1px; background: var(--fz2-linha); }

/* ---------- volante ---------- */
.volante-head-fz2 { display: flex; align-items: baseline; justify-content: space-between; gap: 0.9rem; flex-wrap: wrap; }
.volante-head-fz2 h3 { margin: 0; }
.volante-head-fz2 .painel-nota { margin: 0; }
.grade-fz2 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.3rem; margin-top: 1rem; max-width: 22rem; }
.grade-fz2.mega { grid-template-columns: repeat(10, 1fr); max-width: 34rem; }
@media (max-width: 36rem) { .grade-fz2 { max-width: none; } .grade-fz2.mega { grid-template-columns: repeat(6, 1fr); max-width: none; } }
.cel-fz2 {
  aspect-ratio: 1 / 1; border: 0; border-radius: var(--raio-campo);
  background: var(--fz2-campo); color: var(--fz2-fg);
  font-family: var(--fonte-num); font-size: 0.8125rem;
  cursor: pointer; display: grid; place-items: center;
  transition: background var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease);
}
.cel-fz2:hover:not([aria-pressed="true"]):not([disabled]) { background: var(--fz2-elevado); }
.cel-fz2[aria-pressed="true"] { background: var(--marca, var(--fz2-lima)); color: #fff; }
.cel-fz2:active { transform: scale(.94); }
.cel-fz2[disabled] { opacity: .3; cursor: not-allowed; }
.surpresinha-fz2 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.1rem; }
.surpresinha-fz2 select {
  font: inherit; font-size: 0.75rem; padding: 0.4rem 0.6rem; border: 0;
  border-radius: var(--raio-campo); background: var(--fz2-campo); color: var(--fz2-fg);
}
.btn-fz2-sm { height: 2.2rem; padding-inline: 0.85rem; font-size: 0.625rem; }

.contador-fz2 { display: flex; align-items: baseline; gap: 0.5rem; }
.contador-fz2 .q { font-size: 2.6rem; letter-spacing: -.04em; line-height: 1; color: var(--fz2-lima); }
.contador-fz2 .falta { font-size: 0.6875rem; color: var(--fz2-fg-2); }

/* ---------- carrinho ---------- */
.item-fz2 { padding: 0.9rem 0; box-shadow: 0 1px 0 0 var(--fz2-fio); display: grid; gap: 0.3rem; }
.item-fz2:last-of-type { box-shadow: none; }
.item-fz2 .tit { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9375rem; }
.item-fz2 .tit .dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; flex: none; }
.item-fz2 .val { font-family: var(--fonte-num); color: var(--fz2-lima); }
.item-fz2 .det { font-size: 0.6875rem; color: var(--fz2-fg-2); }
.item-fz2 .dzs-fz2 .dz-fz2 { width: 1.7rem; height: 1.7rem; font-size: 0.6875rem; }
/* Era 0,625rem em caixa alta com padding de 0,2rem: ~16px de alvo, num produto
   cujo piso declarado é o público idoso. A caixa cresce em volta do rótulo, com
   margem negativa para o texto não se deslocar na tela. */
.rm-fz2 {
  justify-self: start; font: inherit; font-size: 0.625rem; text-transform: uppercase; letter-spacing: .06em;
  border: 0; background: none; color: var(--fz2-fg-2); cursor: pointer;
  display: inline-flex; align-items: center; min-height: var(--toque);
  padding-inline: var(--e-2); margin-inline-start: calc(var(--e-2) * -1);
  border-radius: var(--raio-campo);
}
.rm-fz2:hover { color: var(--fz2-lima); background: var(--fz2-campo); }

/* ---------- pagamento ---------- */
.pagamento-fz2 { display: grid; gap: 0.5rem; }
.opcao-fz2 {
  display: flex; align-items: center; gap: 0.7rem; cursor: pointer;
  padding: 0.9rem 1rem; border-radius: var(--raio-campo); background: var(--fz2-campo);
}
.opcao-fz2:hover { background: var(--fz2-elevado); }
.opcao-fz2 .nome { font-size: 0.875rem; }
.opcao-fz2 .obs { font-size: 0.6875rem; color: var(--fz2-fg-2); }
.opcao-fz2 .sld { margin-inline-start: auto; font-family: var(--fonte-num); color: var(--fz2-lima); flex: none; }
.opcao-fz2.indisp { opacity: .45; cursor: not-allowed; }
.aviso-fz2 {
  display: flex; gap: 0.6rem; margin-top: 1.1rem; padding: 0.8rem 1rem;
  border-radius: var(--raio-campo); background: rgba(168, 255, 53, .08);
  font-size: 0.75rem; color: var(--fz2-fg-2);
}
.aviso-fz2 strong { color: var(--fz2-fg); }

/* ---------- pedido confirmado ---------- */
.obrigado-fz2 { max-width: 40rem; margin: 2.4rem auto; padding: clamp(1.4rem, 3vw, 2.2rem); }
.obrigado-topo { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.selo-ok {
  width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: rgba(168, 255, 53, .16); color: var(--fz2-lima);
}

/* ---------- resultados ---------- */
/* O filtro é NAVEGAÇÃO — cada modalidade tem rota própria —, então são <a> e o
   estado ativo é aria-current, não aria-pressed. Divide o visual com os botões
   de ordenação de propósito: é o mesmo gesto. */
.ordenar-fz2 { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.ordenar-fz2 button, .ordenar-fz2 a {
  display: inline-flex; align-items: center; min-height: var(--toque);
  font: inherit; font-size: 0.6875rem; cursor: pointer; text-decoration: none;
  padding: 0.4rem 0.8rem; border: 0; border-radius: var(--raio-pill);
  background: var(--fz2-campo); color: var(--fz2-fg-2);
  transition: background var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease);
}
.ordenar-fz2 button:hover, .ordenar-fz2 a:hover { background: var(--fz2-elevado); color: var(--fz2-fg); }
.ordenar-fz2 button[aria-pressed="true"], .ordenar-fz2 a[aria-current] { background: var(--fz2-lima); color: var(--fz2-sobre-lima); }

.res-lista-fz2 { display: grid; gap: var(--e-3); margin-top: var(--e-5); }
.res-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.res-card .dzs-fz2 { margin-top: 0.9rem; }
.res-card .dz-fz2 { width: 1.9rem; height: 1.9rem; font-size: 0.75rem; border-radius: 50%; }
.res-conc { font-size: 0.6875rem; color: var(--fz2-fg-2); margin-top: 0.15rem; }

/* Rateio é dado tabular de verdade: acertos, ganhadores e prêmio se cruzam.
   Então é <table> com <th>, e quem lê por leitor de tela ouve a coluna junto. */
/* Sem teto próprio: quem tem teto é a COLUNA da tela (.col-estreita). Limitar a
   tabela e deixar o card com a largura da coluna geral faz só a data chegar na
   borda direita e o resto morrer no meio — duas larguras dentro do mesmo card. */
.rateio-fz2 { width: 100%; border-collapse: collapse; margin-top: var(--e-4); font-size: 0.8125rem; }
.rateio-fz2 th, .rateio-fz2 td { text-align: end; padding: 0.45rem 0; box-shadow: 0 1px 0 0 var(--fz2-fio); }
.rateio-fz2 th:first-child, .rateio-fz2 td:first-child { text-align: start; }
.rateio-fz2 thead th {
  font-weight: 400; font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fz2-fg-2);
}
.rateio-fz2 tbody tr:last-child td { box-shadow: none; }
.rateio-fz2 .acum td { color: var(--fz2-lima); }
@media (max-width: 26rem) { .rateio-fz2 { font-size: 0.75rem; } }

/* tira de resultado na home */
/* GRADE, não flex com um filho em `flex: 1 1 auto`. A faixa de dezenas era a
   única coisa que crescia, e a sobra caía toda entre ela e o prêmio. Aqui a
   sobra continua sendo das dezenas — que GANHAM com a largura, porque quebram
   menos — mas o prêmio encosta na direita por estrutura, não por sobra. */
.res-fz2 {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--e-4) var(--e-5);
  padding: var(--e-4) var(--e-5); border-radius: var(--raio-card);
  background: var(--fz2-card); box-shadow: inset 0 1px 0 0 var(--fz2-fio); margin-top: var(--e-4);
}
/* No estreito as três viram uma só. Texto alinhado à direita em coluna estreita
   é o que mais custa a quem tem vista ruim, que é o piso deste produto. */
@media (max-width: 48rem) {
  .res-fz2 { grid-template-columns: 1fr; gap: var(--e-3); }
  .res-premio { margin-inline-start: 0; text-align: left; }
}
.res-fz2 .dzs-fz2 { min-width: 0; }
.res-fz2 .dz-fz2 { width: 1.9rem; height: 1.9rem; font-size: 0.75rem; border-radius: 50%; }
.res-premio { margin-inline-start: auto; text-align: end; }
.res-premio .num { font-size: 1rem; color: var(--fz2-lima); }
.res-rot { font-size: 0.5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fz2-fg-2); }
.res-ganh { font-size: 0.625rem; color: var(--fz2-fg-2); }

/* ---------- o vazio ganha ação, não só aviso ---------- */
.vazio .btn-fz2 { margin-top: 0.9rem; }

/* ---------- clique é aperto, no que a plataforma trouxe ---------- */
.cmp-fz2, .vit-fz2, .cart-fz2, .conta-fz2, .ordenar-fz2 button,
.ordenar-fz2 a, .rm-fz2, .opcao-fz2, .sec-mais-fz2 {
  transition-property: background, color, transform;
  transition-duration: var(--t-rapido);
  transition-timing-function: var(--ease);
}
.cart-fz2:active, .conta-fz2:active, .ordenar-fz2 button:active,
.ordenar-fz2 a:active, .rm-fz2:active, .sec-mais-fz2:active { transform: scale(.985); }
/* Superfície larga aperta menos: em .985 a linha do comparador vira sobressalto. */
.cmp-fz2:active, .opcao-fz2:active { transform: scale(.995); }