/* ==========================================================================
   fezinha-v3.css — a variante C: chão branco, faixa verde, folhas de papel.

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

   O CHÃO. Nasceu verde de mesa em 25/09/2026, para testar a cor da marca como
   fundo. Em 30/09/2026 o Caio pediu fundo branco, com o público 40+ em mente:
   o verde saiu do chão e ficou na FAIXA — o topo e o rodapé —, onde a marca
   (o lockup é branco) precisa dele. O que ainda separa esta variante da A, que
   também é branca, é a faixa verde, a fonte Poppins e os cards de bolão (FEZ-17:
   visual igual entrega as variantes ao Google como a mesma rede).

   O MATERIAL É PAPEL, NÃO VIDRO. Superfície branca e opaca, contornada por um
   fio de 1px e sombra curta. Opaco é mais barato no Android velho, que o
   PRODUCT.md registra como piso.

   O OURO SAIU DO PRÊMIO. No branco ele dá 1,5:1; a cifra estimada passou para
   o verde da ação. O ouro ficou no anel de foco da faixa verde e na seleção.

   DUAS TINTAS, UMA POR SUPERFÍCIE. Na faixa verde escreve o giz (branco); no
   resto da página, a tinta (quase-preto). O teste mede os dois.

   Prefixo fz3: as classes são as da variante B com o número trocado, porque o
   app.js é o mesmo. O botão primário chama-se -acao e não -lime: aqui ele é
   verde, nunca lima.
   ========================================================================== */

:root {
  /* ---------- a faixa verde ---------- */
  /* DESDE 30/09/2026 O CHÃO É BRANCO, pedido do Caio para o público 40+. O
     verde de mesa saiu do fundo e ficou só no topo e no rodapé: é onde a marca
     mora (o lockup é branco) e é o que ainda separa esta variante da A. O giz
     escreve só ali. */
  --fz3-faixa:    #124a27;   /* o topo e o rodapé */
  --fz3-faixa-3:  rgba(255, 255, 255, 0.10);   /* cápsula sobre a faixa */
  --fz3-faixa-4:  rgba(255, 255, 255, 0.18);   /* a mesma, em hover */
  --fz3-giz:      #ffffff;   /* tinta sobre a faixa */
  --fz3-giz-2:    rgba(255, 255, 255, 0.76);   /* tinta secundária sobre a faixa */

  /* ---------- o papel ---------- */
  --fz3-papel:    #ffffff;
  --fz3-papel-2:  #eef4ef;   /* campo, célula, faixa dentro do papel */
  --fz3-papel-3:  #dfe9e2;   /* o mesmo, em hover */
  --fz3-tinta:    #14201a;
  --fz3-tinta-2:  #4f6156;
  --fz3-fio:      rgba(20, 32, 26, 0.12);

  /* ---------- a ação ---------- */
  /* O verde da marca é #268a32, e com tinta branca miúda ele dá 4,41:1 — a
     variante A mediu e trocou. Aqui a ação nasce no tom profundo, que dá 6,26:1
     com branco, e sobe de tom no hover (escurecer, nunca clarear: clarear anda
     na direção do 4,41). */
  --fz3-verde:    #1d6f27;
  --fz3-verde-d:  #16611f;
  --fz3-sobre-verde: #ffffff;

  /* ---------- o prêmio ---------- */
  --fz3-ouro:     #ffc94d;

  /* Papel sobre papel: a folha se separa do chão branco por um fio de 1px e uma
     sombra curta, não mais pela sombra funda que ela fazia sobre o verde. */
  --fz3-sombra:
    0 0 0 1px var(--fz3-fio),
    0 0.05rem 0.1rem rgba(20, 32, 26, 0.06),
    0 0.5rem 1.2rem -0.7rem rgba(20, 32, 26, 0.22);
  --fz3-sombra-alta:
    0 0 0 1px var(--fz3-fio),
    0 0.1rem 0.2rem rgba(20, 32, 26, 0.08),
    0 0.9rem 1.8rem -0.8rem rgba(20, 32, 26, 0.30);

  /* ---------- os quatro papéis que base.css espera ---------- */
  /* O foco é verde no chão branco (o ouro daria 1,5:1) e volta a ser ouro na
     faixa verde, onde o verde sumiria. */
  --foco:       var(--fz3-verde);
  --tinta-3:    var(--fz3-tinta-2);
  --superficie: var(--fz3-papel);
  --fio:        var(--fz3-fio);

  /* Canto de papel cortado, não de cartão de app: menor que o 12/8 da base.
     Sobrescrito aqui porque base.css declara os raios no mesmo :root e esta
     folha vem depois. */
  --raio-card:  0.3rem;
  --raio-campo: 0.2rem;

  /* O display vale para título de tela, de seção e de painel. Era Zilla Slab,
     depois Google Sans 600 (29/09/2026); de 30/09/2026 a REM 600; desde 05/10/2026
     é a Poppins 600, como o resto da variante. */
  --fonte-display: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  color-scheme: light;
  /* Superfícies do navegador que ninguém desenha e que mesmo assim aparecem:
     barra de rolagem e o cursor de texto nos campos. */
  scrollbar-color: rgba(20, 32, 26, 0.30) var(--fz3-papel-2);
  accent-color: var(--fz3-verde);
  caret-color: var(--fz3-verde);
}

body {
  margin: 0;
  background-color: var(--fz3-papel);
  color: var(--fz3-tinta);
  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;
}

::selection { background: var(--fz3-ouro); color: var(--fz3-tinta); }

/* Na faixa verde o anel de foco é ouro: 3:1 é o mínimo para componente, e o
   verde da ação sobre o verde da faixa não chega a isso. */
.fz3-top, .fz3-foot { --foco: var(--fz3-ouro); }

/* .vidro existe na base para as variantes de vidro; aqui é papel. */
.vidro {
  background: var(--fz3-papel);
  box-shadow: var(--fz3-sombra);
  backdrop-filter: none;
}

.fz3 { min-height: calc(100vh - var(--barra-h)); display: flex; flex-direction: column; min-width: 0; }

/* ---------- display ---------- */
.fz3-hero h1, .t-tela, .t-secao, .painel-fz3 h3, .passo-fz3 h3, .vazio strong {
  font-family: var(--fonte-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- a folha de papel ---------- */
/* Tudo que está sobre o papel escreve em tinta. A regra mora aqui, num lugar
   só, e os componentes só dizem onde o papel está. */
.painel-fz3, .bol-fz3, .passo-fz3, .res-fz3, .vazio {
  background: var(--fz3-papel);
  color: var(--fz3-tinta);
  border-radius: var(--raio-card);
  box-shadow: var(--fz3-sombra);
}

/* AS FICHAS ASSENTAM NA MESA. É o único movimento autoral desta pele: quando a
   tela monta, as folhas caem 10px e a sombra cresce, em cascata. Só nas listas
   e na home — o painel do volante re-renderiza a cada dezena marcada, e uma
   folha que pula a cada toque não é assentar, é tremer. */
@keyframes assenta-fz3 {
  from { opacity: 0; transform: translateY(0.5rem); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
}
.bol-fz3, .passo-fz3, .res-fz3, .vazio {
  animation: assenta-fz3 var(--t-longo) var(--ease) both;
}
.bol-fz3:nth-child(2), .passo-fz3:nth-child(2) { animation-delay: 50ms; }
.bol-fz3:nth-child(3), .passo-fz3:nth-child(3) { animation-delay: 100ms; }
.bol-fz3:nth-child(4) { animation-delay: 150ms; }
.bol-fz3:nth-child(5) { animation-delay: 200ms; }
.bol-fz3:nth-child(n+6) { animation-delay: 240ms; }
.res-fz3 { animation-delay: 120ms; }

/* ---------- 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. */
.fz3-top > * { width: 100%; max-width: var(--largura-max); margin-inline: auto; }
.fz3-top {
  position: sticky; top: 0; z-index: 40;
  display: grid; gap: var(--e-2);
  padding: 0.7rem clamp(1rem, 4vw, 4.5rem);
  background: var(--fz3-faixa);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25);
}
/* NO TELEFONE O TOPO CARREGA SÓ MARCA E CARRINHO — a mesma decisão da variante
   B (22/09/2026): em 390px as três cápsulas mais a marca não cabem numa linha
   sem folga. Sai o que informa (saldo, cumprimento) e fica o que age (o
   carrinho, único caminho para o checkout). O saldo reaparece no resumo do
   carrinho, ao lado do total. */
@media (max-width: 36rem) {
  .fz3-top { padding: 0.6rem 1rem; gap: 0.5rem; }
  .fz3-topo-linha { gap: 0.4rem; }
  .fz3-top .saldo-pill { display: none; }
  .fz3-top .cart-fz3 { background: none; padding-inline: 0.35rem; }
  .fz3-top .cart-fz3:hover { background: none; color: var(--fz3-ouro); }
}
.fz3-mark { display: flex; align-items: center; text-decoration: none; color: var(--fz3-giz); }
/* 1,5rem é a mesma altura da marca nas variantes A e B: as três têm de sair do
   mesmo tamanho, senão o A/B mede logo junto com pele. */
.fz3-marca { display: block; height: 1.5rem; width: auto; }
.fz3-topo-linha {
  display: flex; align-items: center; gap: 0.8rem;
  flex-wrap: wrap; justify-content: space-between;
}
/* A navegação mora entre a marca e as cápsulas no HTML. No computador é uma
   linha só — marca, navegação no meio, cápsulas —, pedido do Caio em
   29/09/2026. Abaixo de 70rem as cinco não cabem ao lado das cápsulas, e a
   navegação desce para a linha de baixo, inteira. */
.fz3-topo-linha > .fz3-nav { order: 3; flex-basis: 100%; }
@media (min-width: 70rem) {
  .fz3-topo-linha { flex-wrap: nowrap; }
  .fz3-top .conta-fz3 { white-space: nowrap; }
  .fz3-topo-linha > .fz3-nav { order: 0; flex: 1 1 auto; flex-wrap: nowrap; }
}
.fz3-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(--fz3-faixa-3); 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(--fz3-giz-2); text-transform: uppercase; }
.saldo-pill b { color: var(--fz3-giz); }

/* ---------- corpo ---------- */
.fz3-main { flex: 1 1 auto; padding-bottom: 2rem; }
/* A SEÇÃO ocupa a tela; a COLUNA para em 64rem, que é o max-w-7xl do
   fezinha-web. Os dois modificadores são compostos (.fz3-wrap.sangra) de
   propósito: em seletor solto a especificidade empataria e quem decidiria
   seria a ordem no arquivo. */
.fz3-wrap {
  width: 100%; max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 4.5rem);
}
.fz3-wrap.sangra { max-width: none; }
.fz3-wrap.col-estreita { max-width: 50rem; }

/* ---------- abertura: a promessa vem primeiro ---------- */
/* Pedido do Caio em 25/09/2026, resumido em 05/10: à esquerda o convite, uma
   frase sobre o bolão e a contagem regressiva; à direita o bolão em destaque. O
   símbolo da marca fica vazado atrás, entre os dois. */
.fz3-hero {
  position: relative; overflow: hidden;
  min-height: calc(100svh - 3.1rem - var(--barra-h));
  display: grid; align-content: center;
  padding-block: 2.5rem;
  /* Um véu verde, muito leve, que desce da faixa: é o que resta da mesa. */
  background: radial-gradient(60rem 26rem at 50% -10%, rgba(29, 111, 39, 0.07), transparent 70%);
}
@media (max-width: 48rem) { .fz3-hero { min-height: 0; padding-block: 1.8rem; } }
.hero-simbolo {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(18rem, 36vw, 30rem); height: auto;
  left: 50%; top: 50%; transform: translate(-42%, -50%) rotate(-8deg);
  color: var(--fz3-verde); opacity: 0.05;
}
/* V4, pedido do Caio em 07/10/2026: uma coluna só. O convite centralizado em
   cima e, embaixo, o carrossel dos bolões em cartaz. */
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0;
  gap: clamp(1.5rem, 4vw, 2.6rem); justify-items: center;
}
.hero-texto { display: grid; gap: 0.35rem; justify-items: center; text-align: center; }
.fz3-hero h1 {
  /* Sem max-width: as linhas são as do <br>, e a de baixo não quebra. */
  margin: 0;
  font-size: clamp(1.75rem, 4.2vw, 3.1rem); line-height: 1.06;  /* 1.75: a tarja cabe inteira em 390px */
  text-wrap: balance;
}
/* A segunda linha do título numa tarja verde, pedido do Caio em 05/10/2026.
   Branco sobre o verde dá 6,26:1. É inline-block para a tarja não encostar
   no "j" de "jogo" na linha de cima. */
.hero-destaque {
  display: inline-block; white-space: nowrap;
  margin-top: 0.12em; padding: 0.04em 0.28em 0.1em;
  background: var(--fz3-verde); color: #fff;
  border-radius: var(--raio-campo);
}
/* A frase termina onde o título termina: o bloco tem a largura do h1, e a
   frase, com largura 0 e mínimo de 100%, não alarga o bloco — só o ocupa. */
.hero-cabeca { display: grid; width: fit-content; max-width: 100%; }
.hero-sub {
  width: 0; min-width: 100%;
  margin: 0.9rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--fz3-tinta-2);
  text-wrap: pretty;
}
.hero-falta {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin-top: 1.2rem; font-size: 0.9375rem; font-weight: 500; color: var(--fz3-tinta);
}
.hero-falta[hidden] { display: none; }
.hero-falta svg { flex: none; }
@media (max-width: 56rem) {
  /* No telefone o título cresce com a largura (9vw), nas mesmas duas linhas. */
  .fz3-hero h1 { font-size: clamp(1.75rem, 9vw, 2.8rem); line-height: 1.12; }
  .hero-destaque { margin-top: 0.08em; padding: 0.02em 0.14em 0.06em; }
}

/* ---------- carrossel da abertura ---------- */
/* Um trilho que rola de verdade, com encaixe por card. O padding em bloco dá
   lugar à sombra e ao levantar do hover, que o overflow cortaria. */
.car-fz3 { width: 100%; min-width: 0; display: grid; gap: var(--e-3); }
.car-trilho {
  display: flex; gap: var(--e-4);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 0.6rem 0.2rem 1.2rem; scrollbar-width: none;
}
.car-trilho::-webkit-scrollbar { display: none; }
.car-trilho:focus-visible { outline: 2px solid var(--fz3-verde); outline-offset: 2px; border-radius: var(--raio-card); }
/* CADA RODADA MOSTRA OS CARDS INTEIROS, pedido do Caio em 09/10/2026: a
   largura do card é uma fração do trilho — três no desktop, dois no tablet,
   um no telefone — e não uma medida fixa, que deixava o último cortado. O
   botão de avançar anda uma rodada inteira (ligarCarrossel, no app.js). */
.car-trilho { --por-vez: 3; scroll-padding-inline: 0.2rem; }
/* Três só a partir de ~1150px: abaixo disso o nome da Independência corta e o
   botão encosta no preço. */
@media (max-width: 72rem) { .car-trilho { --por-vez: 2; } }
/* Abaixo de ~700px dois cards não cabem o preço e o botão lado a lado. */
@media (max-width: 44rem) { .car-trilho { --por-vez: 1; } }
.car-trilho > .bol-fz3 {
  flex: 0 0 calc((100% - (var(--por-vez) - 1) * var(--e-4)) / var(--por-vez));
  min-width: 0; scroll-snap-align: start;
}
@media (prefers-reduced-motion: reduce) { .car-trilho { scroll-behavior: auto; } }
.car-ctrl { display: flex; justify-content: center; gap: var(--e-2); }
.car-btn {
  display: grid; place-items: center;
  width: var(--toque); height: var(--toque); border: 0; border-radius: 50%;
  background: var(--fz3-papel-2); color: var(--fz3-tinta); cursor: pointer;
  transition: background var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease);
}
.car-btn:hover { background: var(--fz3-papel-3); }
.car-btn:active { transform: scale(.94); }
.car-ant svg { transform: rotate(180deg); }
.fz3-hero .hero-nota { margin: 0; text-align: center; }

/* ---------- botões ---------- */
.btn-fz3 {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font: inherit; font-weight: 500; font-size: 0.875rem;
  height: 3.1rem; padding-inline: 1.6rem;
  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), box-shadow var(--t-rapido) var(--ease);
}
.btn-fz3:active { transform: scale(.985); }
/* O primário é verde em toda parte: com o chão branco não existe mais o botão
   de papel sobre a mesa que a abertura pedia. */
.btn-fz3-acao { background: var(--fz3-verde); color: var(--fz3-sobre-verde); }
.btn-fz3-acao:hover { background: var(--fz3-verde-d); }
.btn-fz3-out { background: var(--fz3-papel-2); color: var(--fz3-tinta); }
.btn-fz3-out:hover { background: var(--fz3-papel-3); }
.btn-fz3[disabled] { opacity: .4; cursor: not-allowed; }
.btn-fz3-block { width: 100%; }

/* ---------- dezena ---------- */
/* Sobre o papel a dezena é uma pastilha de campo; sorteada, vai em verde com
   tinta branca. É a mesma forma no resultado, no carrinho e na linha de jogo. */
.dzs-fz3 { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.dz-fz3 {
  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(--fz3-papel-2); color: var(--fz3-tinta);
}
.dz-fz3.on { background: var(--fz3-verde); color: var(--fz3-sobre-verde); }

/* ---------- lista vazia ---------- */
.vazio { padding: 2rem 1.2rem; text-align: center; color: var(--fz3-tinta-2); margin-top: 1.1rem; font-size: 0.8125rem; }
.vazio strong { display: block; color: var(--fz3-tinta); font-size: 1.125rem; margin-bottom: 0.3rem; }

/* ---------- navegação ---------- */
/* Faixa no topo, mesma topologia da variante B: cinco destinos que quebram
   para a linha de baixo quando não cabem, nunca somem. O atual é papel sobre a
   faixa verde: o que está ativo é folha.
   Centralizada na faixa, pedido do Caio em 29/09/2026; ao quebrar, a linha de
   baixo também sai centrada. */
.fz3-nav { display: flex; gap: var(--e-1); flex-wrap: wrap; justify-content: center; }
.fz3-nav a {
  display: inline-flex; align-items: center; min-height: var(--toque);
  padding: 0.45rem clamp(0.5rem, 2.2vw, 0.8rem); border-radius: var(--raio-pill);
  text-decoration: none; color: var(--fz3-giz-2); white-space: nowrap;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: .01em;
  transition: color var(--t-rapido) var(--ease), background var(--t-rapido) var(--ease);
}
/* Os cinco rótulos em peso 500 estouravam a linha em 390px por poucos pixels e
   "Sobre" caía sozinho embaixo. No estreito o peso volta a 400 e a goteira
   encolhe; o alvo de toque segue em var(--toque). Abaixo de ~370px ainda
   quebra, e quebrar está certo: o que não pode é sumir.
   Com a Google Sans (29/09/2026), mais larga que a Instrument Sans, "Sobre"
   voltou a cair em 375px; a goteira desceu de 0.45rem para 0.35rem. */
@media (max-width: 36rem) { .fz3-nav { gap: 0; } .fz3-nav a { font-weight: 400; padding-inline: 0.35rem; } }
.fz3-nav a:hover { color: var(--fz3-giz); background: var(--fz3-faixa-3); }
.fz3-nav a[aria-current="page"] { color: var(--fz3-verde); background: var(--fz3-papel); }

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

/* ---------- clique é aperto ---------- */
.fz3-nav a, .fz3-mark {
  transition-property: color, background, transform;
  transition-duration: var(--t-rapido);
  transition-timing-function: var(--ease);
}
.fz3-nav a:active, .fz3-mark:active { transform: scale(.985); }

/* ---------- topo: saldo, carrinho e conta ---------- */
.cart-fz3, .conta-fz3 {
  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(--fz3-faixa-3); color: var(--fz3-giz);
  font-size: 0.75rem; text-decoration: none;
}
.cart-fz3 b { font-family: var(--fonte-num); color: var(--fz3-giz); }
.cart-fz3:hover, .conta-fz3:hover { background: var(--fz3-faixa-4); }

/* ---------- rodapé ---------- */
/* Na faixa verde, como o topo: a página abre e fecha na cor da marca. */
.fz3-foot { margin-top: auto; padding-block: 1.6rem 2.4rem; background: var(--fz3-faixa); }
.fz3-foot .fz3-legal { margin-top: 0; box-shadow: none; padding-top: 0; color: var(--fz3-giz-2); }
.idade {
  display: inline-flex; align-items: center; font-family: var(--fonte-num); font-size: 0.625rem;
  background: var(--fz3-faixa-4); color: var(--fz3-giz); border-radius: var(--raio-pill); padding: 0.1rem 0.5rem; margin-inline: 0.25rem;
}

/* ---------- cabeçalho de tela ---------- */
.sec-head-fz3 {
  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-fz3 h1, .sec-head-fz3 h2 { margin: 0; line-height: 1.08; }
.sub-fz3 { margin: 0.7rem 0 0; color: var(--fz3-tinta-2); font-size: 0.9375rem; max-width: 58ch; text-wrap: pretty; }
.sub-fz3 strong { color: var(--fz3-tinta); }
.sec-mais-fz3 {
  display: inline-flex; align-items: center; gap: 0.3rem; min-height: var(--toque);
  font-size: 0.8125rem; font-weight: 500;
  color: var(--fz3-verde); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--fz3-papel-3);
}
.sec-mais-fz3:hover { text-decoration-color: var(--fz3-verde); }
.hero-nota { margin: 1.2rem 0 0; font-size: 0.6875rem; color: var(--fz3-tinta-2); }

/* ---------- a loteria, com o ponto na cor dela ---------- */
/* O app.js escreve a cor da modalidade inline (color: #c91d8f), e é dela que o
   ponto tira o preenchimento por currentColor. Só que magenta e verde como
   TINTA de texto dão 4,4:1 sobre o branco. O text-fill-color separa as duas
   coisas — o ponto continua na cor da loteria e o texto sai na tinta — sem
   tocar na marcação, que é a mesma das outras variantes. */
.loteria-fz3 { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 500; -webkit-text-fill-color: var(--fz3-tinta); }
.loteria-fz3 .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- os cards de bolão ---------- */
/* Pedido do Caio em 25/09/2026: card, não linha. Três por linha no desktop,
   um no telefone. O prêmio é a maior coisa do card, em verde sobre o papel. */
.bol-lista {
  display: grid; gap: var(--e-4); margin-top: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}

.ordenar-lista {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2);
  margin-top: var(--e-5);
}
/* Coluna flex, não grade: o botão leva margin-top auto e desce para o pé,
   então três cards na mesma linha terminam na mesma altura mesmo quando a
   frase de chances cabe numa linha num deles e em duas nos outros. */
.bol-fz3 {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 1.1rem 1.3rem 1.3rem;
  transition: transform var(--t-rapido) var(--ease), box-shadow var(--t-rapido) var(--ease);
}
.bol-fz3:hover { box-shadow: var(--fz3-sombra-alta); transform: translateY(-0.1rem); }
/* O destaque da abertura se separa pela sombra alta; o topo já é da faixa. */
.bol-fz3.destaque { box-shadow: var(--fz3-sombra-alta); }

/* A FAIXA DO CONCURSO, pedido do Caio em 29/09/2026: o topo do card é um
   bloco na cor da loteria, com o nome dela e o número do concurso em branco.
   Sangra até as bordas do card pela margem negativa, que desfaz o padding.
   A cor sai aprofundada pelo mesmo color-mix da célula marcada do volante —
   branco sobre a cor pura reprova na Mega-Sena e na Independência — e o
   navegador sem color-mix fica com a cor pura. */
.faixa-fz3 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
  margin: -1.1rem -1.3rem 0.6rem; padding: 0.75rem 1.3rem;
  border-radius: var(--raio-card) var(--raio-card) 0 0;
  background: var(--marca, var(--fz3-verde));
  background: color-mix(in srgb, var(--marca, var(--fz3-verde)) 78%, #000);
  color: #fff;
}
/* Modalidade com degradê pinta a faixa por cima da cor; sem --marca-grad a
   imagem é none e fica a cor de sempre. Nenhuma usa desde 30/09/2026, quando a
   Mega da Virada voltou ao verde oficial da Caixa; o mecanismo fica. */
.faixa-fz3 { background-image: var(--marca-grad, none); }
.faixa-fz3 .nome { font-size: 1rem; font-weight: 600; line-height: 1.2; }
.faixa-fz3 .conc { font-size: 0.8rem; white-space: nowrap; }
/* NO CARD DE BOLÃO A FAIXA TEM SEMPRE DUAS LINHAS — o nome em cima, o concurso
   embaixo —, pedido do Caio em 30/09/2026. Com os dois na mesma linha,
   "Lotofácil da Independência" quebrava e a faixa dela ficava mais alta que a
   da Mega-Sena, e o card inteiro descia. O nome não quebra: se um dia faltar
   largura, ele corta com reticências em vez de desalinhar a fileira. */
.bol-fz3 .faixa-fz3 { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.bol-fz3 .faixa-fz3 .nome { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bol-fz3 .faixa-fz3 .conc { opacity: 0.92; }
.vit-fz3 .faixa-fz3 { margin: -0.9rem -1.1rem 0.3rem; padding: 0.55rem 1.1rem; }
.vit-fz3 .faixa-fz3 .nome { font-size: 0.875rem; }
.bol-fz3.destaque:hover { transform: none; }
/* O CARD PARA QUEM TEM 40+ (30/09/2026). Cinco blocos e um piso de 0,8rem
   (16px na raiz de 125%): nada no card é menor que isso. Os rótulos em caixa
   alta de 11px saíram — caixa alta miúda é a primeira coisa que some para
   quem já usa óculos de leitura — e cada número vem com a palavra que o
   explica em caixa normal, ao lado ou acima dele. */
/* O SELO MORA NO PÉ, entre a cota e o botão (30/09/2026). No topo ele abria
   uma linha a mais só no card que lidera, e tudo abaixo descia em relação aos
   vizinhos. No pé ele ocupa o espaço que o botão, preso ao fundo por
   margin-top: auto, já deixa livre nos outros cards da fileira: prêmio,
   sorteio, chances, cota e botão ficam na mesma altura nos três. E fica junto
   do preço, que é do que ele fala. */
.bol-selo {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.3rem;
  margin: -0.3rem 0 1rem;
  padding: 0.2rem 0.6rem 0.2rem 0.45rem; border-radius: var(--raio-pill);
  background: var(--fz3-papel-2); color: var(--fz3-verde);
  font-size: 0.8rem; font-weight: 600;
}
.bol-selo svg { flex: none; stroke-width: 2.6; }
.bol-premio-rot { font-size: 0.8rem; color: var(--fz3-tinta-2); }
.bol-premio {
  /* No card de três colunas (~340px) "R$ 300 milhões" só cabe numa linha até 1,8rem. */
  font-size: clamp(1.6rem, 2.4vw, 1.8rem); line-height: 1.05; letter-spacing: -.03em;
  color: var(--fz3-verde); font-weight: 600;
}
.bol-sorteio { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-size: 0.85rem; font-weight: 500; }
.bol-sorteio svg { flex: none; color: var(--fz3-tinta-2); }
.bol-chances {
  margin: 0.8rem 0 0; padding: 0.6rem 0.8rem; border-radius: var(--raio-campo);
  background: var(--fz3-papel-2); font-size: 0.85rem; line-height: 1.4; color: var(--fz3-tinta);
}
.bol-chances b { color: var(--fz3-verde); font-weight: 600; }
/* Cota à esquerda, o que resta à direita, na faixa pontilhada do talão. */
.bol-cota {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
  padding-top: 0.8rem; margin: 0.8rem 0 1.1rem;
  border-top: 1px dashed var(--fz3-fio);
}
.bol-cota > div { display: grid; }
.bol-cota b { font-size: 1.4rem; line-height: 1.1; letter-spacing: -.02em; font-weight: 600; }
.bol-sub { font-size: 0.8rem; color: var(--fz3-tinta-2); }
.bol-restam { font-size: 0.8rem; color: var(--fz3-tinta-2); padding-bottom: 0.2rem; }
.bol-restam b { font-size: inherit; letter-spacing: 0; color: var(--fz3-tinta); }
.bol-fz3 .btn-fz3 { margin-top: auto; font-size: 0.9rem; }
/* A versão reduzida do carrossel da abertura (09/10/2026): prêmio em cima e,
   na faixa pontilhada, o preço da cota com o botão ao lado. O piso de 0,8rem
   do card continua valendo. */
.bol-fz3.compacto { gap: 0.15rem; padding: 0.9rem 1.1rem 1rem; }
.bol-fz3.compacto .faixa-fz3 { margin: -0.9rem -1.1rem 0.5rem; padding: 0.55rem 1.1rem; }
.bol-fz3.compacto .faixa-fz3 .nome { font-size: 0.9375rem; }
.bol-fz3.compacto .bol-premio { font-size: 1.6rem; }
.bol-fz3.compacto .bol-cota { align-items: center; flex-wrap: nowrap; margin: 0.8rem 0 0; padding-top: 0.7rem; }
.bol-fz3.compacto .bol-cota b { font-size: 1.2rem; }
.bol-fz3.compacto .btn-fz3 { margin-top: 0; height: var(--toque); padding-inline: 1rem; flex: none; }
.rot-fz3 { font-size: 0.5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fz3-tinta-2); }
/* Na faixa de ordenação o rótulo acompanha os botões, que são para ler. */
.ordenar-lista .rot-fz3 { font-size: 0.75rem; letter-spacing: 0; text-transform: none; }

/* ---------- vitrine ---------- */
/* Placas de concurso em fita contínua. Elemento deliberado, presente nas três
   variantes; o mouse por cima pausa, e quem pediu menos movimento rola à mão. */
.vitrine-fz3 { overflow: hidden; padding-block: 1.4rem; margin-top: 0; box-shadow: inset 0 1px 0 0 var(--fz3-fio), inset 0 -1px 0 0 var(--fz3-fio); }
.vitrine-fita { display: flex; gap: 0.6rem; width: max-content; animation: fita-fz3 44s linear infinite; }
@keyframes fita-fz3 { from { transform: translateX(0); } to { transform: translateX(-25%); } }
.vitrine-fz3:hover .vitrine-fita { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .vitrine-fz3 { overflow-x: auto; }
  .vitrine-fita { animation: none; }
}
.vit-fz3 {
  display: grid; gap: 0.2rem; min-width: 13rem;
  padding: 0.9rem 1.1rem; border-radius: var(--raio-card);
  background: var(--fz3-papel-2); color: var(--fz3-tinta);
}
.vit-premio { font-size: 1.25rem; letter-spacing: -.03em; color: var(--fz3-verde); font-weight: 500; }
.vit-conc { font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fz3-tinta-2); }

/* ---------- como funciona ---------- */
.passos-fz3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-top: 2.2rem; }
@media (max-width: 52rem) { .passos-fz3 { grid-template-columns: 1fr; } }
.passo-fz3 { display: flex; gap: 0.8rem; padding: 1.2rem; }
.passo-fz3 .n {
  width: 1.8rem; height: 1.8rem; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--fz3-verde); color: var(--fz3-sobre-verde); font-size: 0.8125rem;
}
.passo-fz3 h3 { margin: 0 0 0.3rem; font-size: 1.125rem; line-height: 1.2; }
.passo-fz3 p { margin: 0; font-size: 0.8125rem; color: var(--fz3-tinta-2); }

/* ---------- painel: a folha de todas as telas internas ---------- */
.duas-fz3 { display: grid; grid-template-columns: 1fr 20rem; gap: 1.2rem; align-items: start; margin-top: 1.2rem; }
@media (max-width: 56rem) { .duas-fz3 { grid-template-columns: 1fr; } }
.painel-fz3 { padding: clamp(1.1rem, 2.4vw, 1.6rem); }
.painel-fz3 h3 { margin: 0 0 0.9rem; font-size: 1.125rem; line-height: 1.2; color: var(--fz3-tinta); }
.painel-nota { margin: 0.7rem 0 0; font-size: 0.6875rem; color: var(--fz3-tinta-2); line-height: 1.55; }
.premio-fz3 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.04em; line-height: 1; color: var(--fz3-verde); margin-top: 0.8rem; }

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

.progresso-fz3 { height: 0.3rem; border-radius: var(--raio-pill); background: var(--fz3-papel-3); overflow: hidden; }
.progresso-fz3 i { display: block; height: 100%; background: var(--fz3-verde); }

/* JOGOS REGISTRADOS DO BOLÃO. As dezenas moram numa grade própria, ao lado do
   número do jogo, com uma coluna por dezena (--n) de até 2,4rem: as 15 da
   Lotofácil enchem a linha, as 6 da Mega-Sena ficam juntas em vez de espalhadas.
   Antes era flex com quebra: as 15 dezenas da Lotofácil não cabiam, a 15ª
   caía sozinha embaixo do rótulo e a linha ficava torta — apontado pelo Caio
   em 29/09/2026. Onde uma linha não comporta a ficha legível, a grade passa a
   --meia colunas e as dezenas se dividem em duas linhas iguais (8 + 7). */
.jogos-reg { display: grid; gap: 0.35rem; container-type: inline-size; }
.jogo-linha-fz3 {
  display: grid; grid-template-columns: 1.6rem 1fr; align-items: center; column-gap: 0.4rem;
  padding: 0.5rem 0.65rem; border-radius: var(--raio-campo); background: var(--fz3-papel-2);
}
.jogo-linha-fz3 .rot { font-size: 0.625rem; color: var(--fz3-tinta-2); }
.jogo-dzs { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 2.4rem)); gap: 0.3rem 0.2rem; justify-items: center; }
.jogo-linha-fz3 .dz-fz3 { width: 100%; max-width: 1.9rem; height: auto; aspect-ratio: 1; font-size: 0.6875rem; border-radius: 50%; background: var(--fz3-papel); }
@container (width < 30rem) {
  .jogo-dzs { grid-template-columns: repeat(var(--meia), minmax(0, 2.4rem)); }
}

/* ---------- trilha do funil ---------- */
.trilha-fz3 { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; padding-block: 1.4rem 0.4rem; }
.trilha-fz3 .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(--fz3-tinta-2);
}
.trilha-fz3 .et .n {
  width: 1.15rem; height: 1.15rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.5625rem; background: var(--fz3-papel-2); color: var(--fz3-tinta);
}
.trilha-fz3 .et[aria-current="step"] { color: var(--fz3-tinta); }
.trilha-fz3 .et[aria-current="step"] .n { background: var(--fz3-verde); color: var(--fz3-sobre-verde); }
/* 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-fz3 .et.feito { color: var(--fz3-tinta); }
.trilha-fz3 .et.feito .n { background: var(--fz3-papel-3); color: var(--fz3-verde); }
.trilha-fz3 .tr { width: 0.8rem; height: 1px; background: var(--fz3-fio); }

/* ---------- volante ---------- */
.volante-head-fz3 { display: flex; align-items: baseline; justify-content: space-between; gap: 0.9rem; flex-wrap: wrap; }
.volante-head-fz3 h3 { margin: 0; }
.volante-head-fz3 .painel-nota { margin: 0; }
.grade-fz3 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.3rem; margin-top: 1rem; max-width: 22rem; }
.grade-fz3.mega { grid-template-columns: repeat(10, 1fr); max-width: 34rem; }
@media (max-width: 36rem) { .grade-fz3 { max-width: none; } .grade-fz3.mega { grid-template-columns: repeat(6, 1fr); max-width: none; } }
.cel-fz3 {
  aspect-ratio: 1 / 1; border: 0; border-radius: var(--raio-campo);
  background: var(--fz3-papel-2); color: var(--fz3-tinta);
  font-family: var(--fonte-num); font-size: 0.875rem;
  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-fz3:hover:not([aria-pressed="true"]):not([disabled]) { background: var(--fz3-papel-3); }
/* A célula marcada vai na cor da modalidade, que o app.js passa em --marca.
   Branco sobre as cores de identidade reprova em duas das quatro loterias
   (Mega-Sena, no verde #209869 da Caixa, 3,65; Lotofácil da
   Independência 4,30); o color-mix aprofunda o tom em 22% de preto e as
   quatro passam. Navegador sem color-mix fica com a
   primeira declaração, a cor pura — o mesmo que a variante B entrega. */
.cel-fz3[aria-pressed="true"] { background: var(--marca, var(--fz3-verde)); color: #fff; }
.cel-fz3[aria-pressed="true"] { background: color-mix(in srgb, var(--marca, var(--fz3-verde)) 78%, #000); }
.cel-fz3:active { transform: scale(.94); }
/* LOTERIA DE COR CLARA: a faixa do card e a dezena marcada saem na cor pura,
   sem aprofundar, escritas em tinta (a faixa, no verde da ação). O app.js marca
   o card com data-marca-clara quando a modalidade tem clara: true no dados.js.
   Nasceu para a Mega-Sena no ouro (29/09/2026); desde 30/09 ela está no verde
   oficial da Caixa e nenhuma modalidade é clara, mas o mecanismo fica. */
[data-marca-clara] .faixa-fz3,
[data-marca-clara] .cel-fz3[aria-pressed="true"] { background: var(--marca); color: var(--fz3-tinta); }
[data-marca-clara] .faixa-fz3 { color: var(--fz3-verde); }
.cel-fz3[disabled] { opacity: .3; cursor: not-allowed; }
.surpresinha-fz3 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.1rem; }
.surpresinha-fz3 select {
  font: inherit; font-size: 0.8125rem; padding: 0.55rem 0.6rem; min-height: var(--toque); border: 0;
  border-radius: var(--raio-campo); background: var(--fz3-papel-2); color: var(--fz3-tinta);
}
.btn-fz3-sm { height: var(--toque); padding-inline: 0.85rem; font-size: 0.75rem; }

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

/* ---------- carrinho ---------- */
.item-fz3 { padding: 0.9rem 0; box-shadow: 0 1px 0 0 var(--fz3-fio); display: grid; gap: 0.3rem; }
.item-fz3:last-of-type { box-shadow: none; }
/* O ponto alinha com a PRIMEIRA linha do título, não com o meio: no telefone o
   título quebra em duas e um ponto centrado fica flutuando entre elas. */
.item-fz3 .tit { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.9375rem; font-weight: 500; line-height: 1.35; }
.item-fz3 .tit .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; margin-top: 0.42em; }
.item-fz3 .val { font-family: var(--fonte-num); color: var(--fz3-verde); }
.item-fz3 .det { font-size: 0.6875rem; color: var(--fz3-tinta-2); }
.item-fz3 .dzs-fz3 .dz-fz3 { width: 1.7rem; height: 1.7rem; font-size: 0.6875rem; }
/* Alvo de 44px num rótulo miúdo: a caixa cresce em volta do texto, com margem
   negativa para ele não se deslocar. */
.rm-fz3 {
  justify-self: start; font: inherit; font-size: 0.75rem; font-weight: 500;
  border: 0; background: none; color: var(--fz3-tinta-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);
  text-decoration: underline; text-underline-offset: 0.2em;
}
.rm-fz3:hover { color: var(--fz3-tinta); background: var(--fz3-papel-2); }

/* ---------- pagamento ---------- */
.pagamento-fz3 { display: grid; gap: 0.5rem; }
.opcao-fz3 {
  display: flex; align-items: center; gap: 0.7rem; cursor: pointer;
  padding: 0.9rem 1rem; border-radius: var(--raio-campo); background: var(--fz3-papel-2);
}
.opcao-fz3:hover { background: var(--fz3-papel-3); }
.opcao-fz3 .nome { font-size: 0.875rem; font-weight: 500; }
.opcao-fz3 .obs { font-size: 0.6875rem; color: var(--fz3-tinta-2); }
.opcao-fz3 .sld { margin-inline-start: auto; font-family: var(--fonte-num); color: var(--fz3-verde); flex: none; }
.opcao-fz3.indisp { opacity: .45; cursor: not-allowed; }
.aviso-fz3 {
  display: flex; gap: 0.6rem; margin-top: 1.1rem; padding: 0.8rem 1rem;
  border-radius: var(--raio-campo); background: var(--fz3-papel-2);
  font-size: 0.75rem; color: var(--fz3-tinta-2);
}
.aviso-fz3 strong { color: var(--fz3-tinta); }
/* O ícone não encolhe: no telefone o texto de quatro linhas o espremia até
   virar um ponto. Desce 2px para alinhar com a primeira linha. */
.aviso-fz3 svg { flex: none; margin-top: 0.1rem; color: var(--fz3-tinta); }

/* ---------- pedido confirmado ---------- */
.obrigado-fz3 { max-width: 40rem; margin: 2.4rem auto; padding: clamp(1.4rem, 3vw, 2.2rem); }
/* No telefone os dois botões empilham na largura inteira, os dois iguais;
   antes cada um tinha a largura do próprio texto e a pilha saía torta. */
.obrigado-fz3 .acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
@media (max-width: 36rem) { .obrigado-fz3 .acoes .btn-fz3 { flex: 1 1 100%; } }
.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: var(--fz3-verde); color: var(--fz3-sobre-verde);
}

/* ---------- resultados ---------- */
/* Ordenação e filtro dividem o visual de propósito: é o mesmo gesto. O ativo
   é verde cheio. */
.ordenar-fz3 { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.ordenar-fz3 button, .ordenar-fz3 a {
  display: inline-flex; align-items: center; min-height: var(--toque);
  font: inherit; font-size: 0.8rem; font-weight: 500; cursor: pointer; text-decoration: none;
  padding: 0.4rem 0.85rem; border: 0; border-radius: var(--raio-pill);
  background: var(--fz3-papel-2); color: var(--fz3-tinta);
  transition: background var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease);
}
.ordenar-fz3 button:hover, .ordenar-fz3 a:hover { background: var(--fz3-papel-3); }
.ordenar-fz3 button[aria-pressed="true"], .ordenar-fz3 a[aria-current] { background: var(--fz3-verde); color: var(--fz3-sobre-verde); }

.res-lista-fz3 { 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-fz3 { margin-top: 0.9rem; }
.res-card .dz-fz3 { width: 1.9rem; height: 1.9rem; font-size: 0.75rem; border-radius: 50%; }
.res-conc { font-size: 0.6875rem; color: var(--fz3-tinta-2); margin-top: 0.15rem; }

/* Rateio é dado tabular: <table> com <th>, numeral alinhado à direita. */
.rateio-fz3 { width: 100%; border-collapse: collapse; margin-top: var(--e-4); font-size: 0.8125rem; }
.rateio-fz3 th, .rateio-fz3 td { text-align: end; padding: 0.45rem 0; box-shadow: 0 1px 0 0 var(--fz3-fio); }
.rateio-fz3 th:first-child, .rateio-fz3 td:first-child { text-align: start; }
.rateio-fz3 thead th {
  font-weight: 400; font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fz3-tinta-2);
}
.rateio-fz3 tbody tr:last-child td { box-shadow: none; }
.rateio-fz3 .acum td { color: var(--fz3-verde); }
@media (max-width: 26rem) { .rateio-fz3 { font-size: 0.75rem; } }

/* tira de resultado na home */
.res-fz3 {
  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); margin-top: var(--e-4);
}
@media (max-width: 48rem) {
  .res-fz3 { grid-template-columns: 1fr; gap: var(--e-3); }
  .res-premio { margin-inline-start: 0; text-align: left; }
}
.res-fz3 .dzs-fz3 { min-width: 0; }
.res-fz3 .dz-fz3 { 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(--fz3-verde); }
.res-rot { font-size: 0.5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fz3-tinta-2); }
.res-ganh { font-size: 0.6875rem; color: var(--fz3-tinta-2); }

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

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