@import url('/fontes/fontes.css');

/* =========================================================================
   Parceria Hipopó + Rede Inova
   Identidade: o laranja do pacote Hiper como base, o verde da marca Hipopó
   como acento, o vermelho da Inova só nos pontos de assinatura.
   Formas: tudo derivado do "blob" do logo — nada de retângulo seco.
   ========================================================================= */

:root {
  --verde: #5cb531;
  --verde-escuro: #3f8a1f;
  --verde-claro: #8ed45f;

  --laranja: #f26522;
  --laranja-forte: #dc4f10;
  /* Os mesmos dois, em componentes: os tons transparentes precisam de rgba(),
     e rgba() nao aceita um hex vindo de var(). Sem isto, cada tint de laranja
     ficava cravado no arquivo e nenhuma campanha conseguia repintar. */
  --laranja-rgb: 242, 101, 34;
  --laranja-forte-rgb: 220, 79, 16;
  --laranja-claro: #ff9a5c;
  /* Amostrado da própria embalagem HIPER: é o laranja da Hipopó, não um
     parecido. A barra do topo usa ele para o letreiro BRANCO da Rede Inova
     poder ficar solto, sem placa. */
  --laranja-hipopo: #e4601e;

  --vermelho: #e4032e;
  --dourado: #e0a01c;
  --dourado-claro: #ffd76e;

  --creme: #fff5ea;
  --papel: #fffdf9;
  --areia: #f6e6d4;

  --tinta: #22303d;
  --tinta-media: #5a6b7a;
  --tinta-fraca: #93a3b1;

  --raio: 22px;
  --raio-g: 34px;
  --sombra: 0 2px 0 rgba(34, 48, 61, .06), 0 12px 30px -12px rgba(34, 48, 61, .28);
  --sombra-alta: 0 4px 0 rgba(34, 48, 61, .08), 0 26px 50px -18px rgba(34, 48, 61, .4);
  --borda: 2px solid rgba(34, 48, 61, .1);

  --limite: 560px;

  /* ---------------------------------------------------------------- camadas
     Havia SETE valores de z-index soltos em quatro arquivos, escolhidos um a
     um. Quem escrevia o próximo chutava um número maior que o vizinho — e a
     barra de baixo do Clube (40) empatava com o cabeçalho do portal (40) sem
     que nada avisasse.

     OS NÚMEROS AQUI SÃO OS MESMOS QUE JÁ ESTAVAM NA TELA. Isto é só dar nome:
     nada muda de lugar. O que muda é daqui pra frente — camada nova escolhe um
     degrau desta escada, não um número maior que o do vizinho.

     A ordem, de baixo para cima, e o porquê de cada uma:
       conteudo   coisa que sobe dentro do próprio cartão (foto, selo, halo)
       sub-barra  filtro que gruda ABAIXO de outra barra
       sticky     barra secundária: as sub-abas do painel, o filtro do Clube
       topo       cabeçalho que gruda rolando com a página
       fixo       preso à moldura da tela e nunca sai dela: o cabeçalho do
                  portal e a barra inferior do Clube. Dividem o mesmo degrau
                  porque um vive em cima e o outro embaixo — nunca se cruzam
       cortina    o escuro atrás do modal
       modal      a caixa em si, e as folhas que sobem de baixo
       aviso      o toast. ACIMA do modal de propósito: erro que aparece com
                  um modal aberto ficaria escondido atrás dele, e a pessoa
                  clicaria de novo achando que nada aconteceu
       festa      confete. É o teto, e tem pointer-events: none — passa por
                  cima de tudo sem bloquear nenhum clique

     Os z-index de 0 a 3 espalhados pelo arquivo NÃO entram nesta escada e
     ficam como estão: são ordem interna de um cartão, dentro do contexto de
     empilhamento dele. Não disputam nada com barra, modal ou toast. */
  --z-conteudo: 1;
  --z-sub-barra: 10;
  --z-sticky: 20;
  --z-topo: 30;
  --z-fixo: 40;
  --z-cortina: 60;
  --z-modal: 70;
  --z-aviso: 80;
  --z-festa: 90;
}

*, *::before, *::after { box-sizing: border-box; }

/* text-size-adjust: sem isso o Safari do iPhone aumenta o corpo do texto
   sozinho ao girar a tela, e o layout quebra. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  /* vh primeiro: iOS anterior ao 15.4 não conhece dvh e ficaria sem altura. */
  min-height: 100vh;
  min-height: 100dvh;
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta);
  background-color: var(--creme);
  /* Textura de papel: pontinhos quase invisíveis, tira o "chapado" de tela. */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(var(--laranja-rgb), .10), transparent 42%),
    radial-gradient(circle at 84% 4%, rgba(92, 181, 49, .10), transparent 38%),
    radial-gradient(rgba(34, 48, 61, .045) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px;
  background-attachment: fixed;
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0;
}

button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

.oculto { display: none !important; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ topo */

.topo {
  position: sticky; top: 0; z-index: var(--z-fixo);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(14px, env(safe-area-inset-left)) 10px max(14px, env(safe-area-inset-right));
  /* Barra sólida no laranja da Hipopó. A logo da Rede Inova é arte branca:
     aqui ela lê direto, sem precisar de placa por trás. */
  background: var(--laranja-hipopo);
  box-shadow: 0 2px 12px -4px rgba(180, 70, 20, .5);
}

/* Respiro para o gesto de voltar do iPhone não cobrir o último botão. */
.palco { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

.marcas { display: flex; align-items: center; gap: 9px; min-width: 0; }

/* A logo da Inova é uma marca EMPILHADA (girafa ao lado de três linhas de
   texto), quase quadrada. Abaixo de ~44px o letreiro vira borrão. Foi medido:
   a 30px ela saía com 46px de largura e o texto com uns 3px. */
.placa-inova { display: inline-flex; align-items: center; }
.placa-inova img { height: 46px; width: auto; }

.logo-hipopo { height: 30px; width: auto; }

.mais {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 20px;
  color: rgba(255, 255, 255, .7); flex: 0 0 auto;
}

/* No celular estreito a barra tem logo, volta e catálogo. O texto da volta sai
   e fica só a seta — o alvo de toque continua do mesmo tamanho. */
@media (max-width: 420px) {
  .placa-inova img { height: 25px; }
  .logo-hipopo { height: 23px; }
  .mais { display: none; }
  .topo-acao { font-size: 13px; padding: 7px 11px; }
  .topo-acao.voltar-central { font-size: 0; padding: 7px 12px; }
  .topo-acao.voltar-central span { font-size: 22px; margin: 0; }
}

.acoes-topo { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }

.topo-acao {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 999px;
  background: rgba(255, 255, 255, .14); padding: 8px 14px; cursor: pointer;
  font-weight: 800; font-size: 13.5px; color: #fff; text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.topo-acao:hover { background: rgba(255, 255, 255, .28); border-color: #fff; }
.topo-acao.voltar-central span { font-size: 19px; line-height: 1; margin-top: -2px; }

/* ------------------------------------------------------------------ base */

.palco { max-width: var(--limite); margin: 0 auto; padding: 20px 16px 64px; }

.tela { animation: entra .42s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.cartao {
  background: var(--papel);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  border: var(--borda);
  padding: 22px;
}

.cartao + .cartao { margin-top: 16px; }

.selo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  background: var(--verde); color: #fff;
}
.selo.laranja { background: var(--laranja); }
.selo.dourado { background: linear-gradient(135deg, var(--dourado-claro), var(--dourado)); color: #4a3202; }
.selo.cinza   { background: var(--areia); color: var(--tinta-media); }

.olho {
  font-size: 12.5px; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--laranja); margin-bottom: 6px;
}

.legenda { color: var(--tinta-media); font-size: 15px; margin: 8px 0 0; }

/* ------------------------------------------------------------------ botões */

.botao {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 17px 22px; border: 0; cursor: pointer;
  border-radius: 18px;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 19px;
  color: #fff; background: var(--laranja);
  box-shadow: 0 5px 0 var(--laranja-forte), 0 14px 26px -12px rgba(var(--laranja-forte-rgb), .8);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.botao:hover { filter: brightness(1.05); }
.botao:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--laranja-forte); }
.botao:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Botão que divide a linha com outra coisa: o COPIAR ao lado do link de
   indicação, o TROCAR dentro do card do prêmio. Não é o botão principal da
   tela, então não ocupa a largura toda nem grita. */
.botao.pequeno {
  width: auto; flex: 0 0 auto; padding: 11px 16px;
  border-radius: 12px; font-size: 15px;
  box-shadow: 0 3px 0 var(--laranja-forte);
}
.botao.pequeno:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--laranja-forte); }

.botao.verde   { background: var(--verde); box-shadow: 0 5px 0 var(--verde-escuro), 0 14px 26px -12px rgba(63, 138, 31, .8); }
.botao.escuro  { background: var(--tinta); box-shadow: 0 5px 0 #101a24; }
.botao.zap     { background: #25d366; box-shadow: 0 5px 0 #128c4a; color: #05341c; }
.botao.dourado { background: linear-gradient(135deg, #ffcc4d, var(--dourado)); box-shadow: 0 5px 0 #a97400; color: #4a3202; }

.botao-fantasma {
  width: 100%; padding: 14px; margin-top: 10px; cursor: pointer;
  border: 2px solid rgba(34, 48, 61, .16); border-radius: 16px;
  background: transparent; font-weight: 800; font-size: 15.5px; color: var(--tinta-media);
}
.botao-fantasma:hover { border-color: var(--laranja); color: var(--laranja); background: rgba(var(--laranja-rgb), .05); }

.link-texto {
  background: none; border: 0; padding: 6px; cursor: pointer;
  color: var(--laranja); font-weight: 800; font-size: 15px; text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ capa */

.capa { text-align: center; padding-top: 8px; }

.capa-arte { position: relative; margin: 0 auto 6px; width: min(340px, 86%); }
.capa-arte .balao {
  position: absolute; inset: 8% 0 auto; height: 78%;
  background: radial-gradient(ellipse at 50% 45%, var(--verde-claro), var(--verde) 62%, transparent 71%);
  filter: blur(2px); opacity: .28; border-radius: 50%;
}
.capa-mascotes { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.capa-mascotes .hipo {
  width: 82%;
  filter: drop-shadow(0 18px 26px rgba(34, 48, 61, .28));
  animation: balanca 6s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes balanca {
  0%, 100% { transform: rotate(-1.6deg) translateY(0); }
  50%      { transform: rotate(1.6deg) translateY(-6px); }
}

.capa h1 { font-size: clamp(34px, 10vw, 46px); margin-bottom: 8px; }
.capa h1 .destaque { color: var(--laranja); display: block; }

.capa-frase { font-size: 17.5px; color: var(--tinta-media); margin: 0 auto 22px; max-width: 30ch; }

.vantagens { display: grid; gap: 10px; margin: 22px 0; text-align: left; }
.vantagem {
  display: flex; align-items: center; gap: 13px;
  background: var(--papel); border: var(--borda); border-radius: 18px; padding: 13px 15px;
}
.vantagem .icone {
  flex: 0 0 42px; height: 42px; display: grid; place-items: center;
  border-radius: 14px; background: rgba(var(--laranja-rgb), .12); color: var(--laranja);
}
.vantagem b { display: block; font-size: 15.5px; }
.vantagem span { font-size: 13.5px; color: var(--tinta-media); }

/* ------------------------------------------------------------------ formulário */

.campo { margin-bottom: 15px; }
.campo label { display: block; font-weight: 800; font-size: 14.5px; margin-bottom: 6px; }

.campo input {
  width: 100%; padding: 15px 16px;
  border: 2px solid rgba(34, 48, 61, .14); border-radius: 16px;
  background: #fff; font-weight: 600;
  /* Nunca abaixo de 16px: o Safari do iPhone dá zoom sozinho ao focar o campo
     e a tela fica torta pelo resto da sessão. */
  font-size: 17px;
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.campo input:focus {
  outline: 0; border-color: var(--laranja);
  box-shadow: 0 0 0 4px rgba(var(--laranja-rgb), .16);
}
.campo input.erro { border-color: var(--vermelho); }
.campo .aviso { display: block; margin-top: 5px; font-size: 13.5px; font-weight: 700; color: var(--vermelho); }

/* Todo campo é obrigatório: em vez de marcar o opcional, marca-se o exigido —
   assim ninguém descobre no meio do caminho que faltou preencher. */
.obrigatorio {
  margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: rgba(228, 3, 46, .1); color: var(--vermelho);
  font-size: 11.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  vertical-align: 1px;
}

.opcional {
  margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: rgba(34, 48, 61, .08); color: var(--tinta-media);
  font-size: 11.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  vertical-align: 1px;
}

.ajuda-campo { margin-top: 5px; font-size: 12.5px; color: var(--tinta-fraca); font-weight: 700; }

/* Cadastro reconhecido pelo CPF: os dados guardados aparecem para conferência
   antes de seguir, em vez de entrar calado. */
.reconhecido {
  padding: 16px 18px; border-radius: var(--raio); margin-bottom: 16px;
  background: rgba(92, 181, 49, .1); border: 2px solid rgba(92, 181, 49, .35);
  animation: abrindo .35s cubic-bezier(.2, .8, .3, 1) both;
}
.cabeca-reconhecido {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
  color: var(--verde-escuro); font-family: 'Baloo 2', sans-serif;
  font-weight: 800; font-size: 19px;
}
.reconhecido .bilhete-linha { border-bottom-color: rgba(63, 138, 31, .2); }
.reconhecido .link-texto { margin-top: 10px; padding-left: 0; color: var(--tinta-media); }

.conferindo {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 13.5px; font-weight: 800; color: var(--laranja);
}
.rodinha-mini {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2.5px solid rgba(var(--laranja-rgb), .25); border-top-color: var(--laranja);
  animation: gira .7s linear infinite;
}

.consentimento {
  display: flex; gap: 11px; align-items: flex-start;
  background: rgba(34, 48, 61, .04); border-radius: 16px; padding: 13px 15px; margin: 16px 0;
  font-size: 13.5px; color: var(--tinta-media); line-height: 1.5;
}
.consentimento input { width: 21px; height: 21px; flex: 0 0 21px; margin-top: 1px; accent-color: var(--laranja); }

/* ------------------------------------------------------------------ carrossel */

.trilho {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 14px; margin-inline: -4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.trilho::-webkit-scrollbar { display: none; }

.opcao {
  scroll-snap-align: center; flex: 0 0 clamp(150px, 46%, 190px);
  background: var(--papel); border: 3px solid transparent; border-radius: var(--raio);
  padding: 12px 12px 14px; cursor: pointer; text-align: center;
  box-shadow: var(--sombra); transition: transform .16s, border-color .16s, box-shadow .16s;
}
.opcao:hover { transform: translateY(-4px); }
.opcao img { width: 100%; height: 132px; object-fit: contain; margin-bottom: 8px; }
.opcao .rotulo { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 25px; line-height: 1; }
.opcao .sub { font-size: 12.5px; color: var(--tinta-media); font-weight: 700; }

.opcao[aria-pressed='true'] {
  border-color: var(--laranja); transform: translateY(-4px);
  box-shadow: 0 0 0 5px rgba(var(--laranja-rgb), .14), var(--sombra-alta);
}
.opcao[aria-pressed='true'] .rotulo { color: var(--laranja); }

.opcao.boneco { position: relative; }
.opcao.boneco .sem-foto { height: 132px; display: grid; place-items: center; font-size: 46px; }

/* Quando são 2 bonequinhos, a fita mostra a ORDEM (1º, 2º) — assim a pessoa vê
   quantos já escolheu sem contar card por card. */
.opcao.boneco .fita {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  min-width: 26px; height: 26px; padding: 0 7px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--verde); color: #fff; font-size: 12.5px; font-weight: 900;
  box-shadow: 0 2px 8px rgba(63, 138, 31, .5);
  animation: fitaEntra .28s cubic-bezier(.2, 1.6, .4, 1) both;
}
.opcao.boneco[aria-pressed='true'] { border-color: var(--verde); }
.opcao.boneco[aria-pressed='true'] .rotulo { color: var(--verde-escuro); }

@keyframes fitaEntra { from { transform: scale(0) rotate(-30deg); } to { transform: none; } }

.dica-arrasta {
  text-align: center; font-size: 13px; font-weight: 800; color: var(--tinta-fraca);
  letter-spacing: .04em; margin-top: -4px;
}

/* ------------------------------------------------------------------ combo */

/* A oferta do lenço tem fundo próprio para se destacar do fluxo da fralda —
   é outra decisão, não um passo obrigatório. */
.combo {
  margin: 4px 0 8px; padding: 16px 14px 6px; border-radius: var(--raio-g);
  background: linear-gradient(150deg, rgba(92, 181, 49, .12), rgba(142, 212, 95, .06));
  border: 2px dashed rgba(92, 181, 49, .4);
}
.combo-cabeca h3 { font-size: 21px; margin: 8px 0 2px; }
.combo-cabeca p { margin: 0 0 12px; font-size: 14px; color: var(--tinta-media); }

.selo.verde-claro { background: var(--verde-escuro); }

.combo-trilho .opcao { flex-basis: clamp(132px, 40%, 158px); }
.opcao.lenco { position: relative; }
.opcao.lenco img { height: 108px; }
.opcao.lenco .sem-foto { height: 108px; display: grid; place-items: center; font-size: 40px; }
.opcao.lenco .risco { text-decoration: line-through; color: var(--tinta-fraca); font-size: 12px; }
.opcao.lenco .preco-lenco {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 19px; color: var(--verde-escuro);
}
.opcao.lenco[aria-pressed='true'] { border-color: var(--verde); box-shadow: 0 0 0 5px rgba(92, 181, 49, .16), var(--sombra-alta); }
.opcao.lenco.recusar[aria-pressed='true'] { border-color: var(--tinta-fraca); box-shadow: 0 0 0 4px rgba(147, 163, 177, .2); }

.etiqueta-off {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 9px; border-radius: 999px;
  background: var(--vermelho); color: #fff; font-size: 12px; font-weight: 900;
  box-shadow: 0 2px 8px rgba(228, 3, 46, .45);
}

.preco-detalhe {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--tinta-media);
}
.preco-detalhe span { background: rgba(34, 48, 61, .06); padding: 3px 10px; border-radius: 999px; }

/* ------------------------------------------------------------------ preço */

.preco-bloco { text-align: center; margin: 20px 0 4px; }
.preco-antes {
  font-size: 17px; color: var(--tinta-fraca); font-weight: 800; text-decoration: line-through;
  text-decoration-color: var(--vermelho); text-decoration-thickness: 2px;
}
.preco-agora {
  font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: clamp(48px, 15vw, 62px); line-height: 1; color: var(--verde-escuro);
}
.preco-agora .cifrao { font-size: .46em; vertical-align: .55em; margin-right: 2px; }
.preco-nota {
  font-size: 13.5px; font-weight: 800; color: var(--tinta-fraca);
  letter-spacing: .04em; text-transform: uppercase;
}

/* Com o tamanho escolhido, a nota deixa de ser instrução e vira o argumento
   de venda: o preço por fralda. Ganha destaque e sai do caixa-alta, porque
   número em maiúsculo é mais difícil de ler. */
.preco-nota.economia {
  display: inline-block; margin-top: 6px; padding: 8px 16px; border-radius: 999px;
  background: rgba(92, 181, 49, .14); color: var(--verde-escuro);
  font-size: 14.5px; letter-spacing: 0; text-transform: none;
  animation: pulsaEconomia .45s cubic-bezier(.2, 1.4, .4, 1);
}
.preco-nota.economia b {
  font-family: 'Baloo 2', sans-serif; font-size: 19px; font-weight: 800;
  vertical-align: -1px;
}
.preco-nota .miudinho { font-size: 12.5px; opacity: .75; font-weight: 700; }

@keyframes pulsaEconomia {
  0%   { transform: scale(.9); opacity: .4; }
  100% { transform: scale(1); opacity: 1; }
}

/* ------------------------------------------------------------------ cupom */

/* O cupom é desenhado como bilhete de papel: dois recortes laterais e uma
   linha picotada. É o objeto que a pessoa mostra no balcão — precisa parecer
   uma coisa, não um texto na tela. */
.bilhete {
  position: relative; margin-top: 6px;
  background: linear-gradient(160deg, #fffaf2, #fff);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-alta);
  border: 2px dashed rgba(var(--laranja-rgb), .45);
  overflow: hidden;
  animation: carimba .5s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes carimba {
  0%   { transform: scale(.82) rotate(-3deg); opacity: 0; }
  60%  { transform: scale(1.03) rotate(.6deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

.bilhete.dourado { border-color: var(--dourado); background: linear-gradient(160deg, #fffbee, #fff6db); }

.bilhete-topo {
  padding: 18px 20px 14px; text-align: center;
  background: repeating-linear-gradient(135deg, rgba(var(--laranja-rgb),.07) 0 12px, transparent 12px 24px);
  border-bottom: 2px dashed rgba(34, 48, 61, .18);
}
.bilhete.dourado .bilhete-topo { background: repeating-linear-gradient(135deg, rgba(224,160,28,.14) 0 12px, transparent 12px 24px); }

/* Os recortes que dão o formato de ticket. */
.bilhete-topo::before, .bilhete-topo::after {
  content: ''; position: absolute; bottom: -15px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--creme);
  box-shadow: inset 0 2px 3px rgba(34, 48, 61, .12);
}
.bilhete-topo::before { left: -15px; }
.bilhete-topo::after  { right: -15px; }

/* Só números, então dá pra usar tabular-nums e espaçar bem: o cliente lê em voz
   alta e o balconista digita. Quanto maior e mais separado, menos erro. */
.bilhete-codigo {
  font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: clamp(38px, 12vw, 52px); letter-spacing: .06em;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
  color: var(--tinta); margin: 10px 0 4px; white-space: nowrap;
}
.bilhete-corpo { padding: 18px 20px 20px; }

.bilhete-linhas { display: grid; gap: 9px; margin-bottom: 15px; }
.bilhete-linha {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 14.5px; padding-bottom: 8px;
  border-bottom: 1px dashed rgba(34, 48, 61, .13);
}
.bilhete-linha:last-child { border-bottom: 0; padding-bottom: 0; }
.bilhete-linha .chave { color: var(--tinta-media); font-weight: 700; }
.bilhete-linha .valor { font-weight: 900; text-align: right; }

.relogio {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; border-radius: 14px; margin-bottom: 14px;
  background: rgba(var(--laranja-rgb), .1); color: var(--laranja-forte);
  font-weight: 900; font-size: 14.5px;
}
.relogio.urgente { background: rgba(228, 3, 46, .1); color: var(--vermelho); animation: pulsa 1.6s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .58; } }

.instrucao {
  display: flex; gap: 11px; align-items: flex-start; margin-top: 14px;
  padding: 13px 15px; border-radius: 16px;
  background: rgba(92, 181, 49, .1); font-size: 14px; line-height: 1.5;
}
.instrucao b { color: var(--verde-escuro); }

/* ------------------------------------------------------------------ checkout */

/* A escolha entrega/retirada vem antes de tudo: o endereço só nasce depois,
   para não pedir rua e número a quem vai buscar na loja. */
.escolha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 6px; }

.cartela {
  position: relative; cursor: pointer; text-align: center;
  padding: 18px 12px 16px; border-radius: var(--raio);
  background: var(--papel); border: 3px solid rgba(34, 48, 61, .12);
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.cartela:hover { transform: translateY(-3px); }
.cartela .emoji { font-size: 32px; line-height: 1; margin-bottom: 8px; }
.cartela b { display: block; font-size: 15.5px; }
.cartela small { display: block; font-size: 13px; color: var(--tinta-media); font-weight: 700; margin-top: 3px; }

.cartela[aria-pressed='true'] {
  border-color: var(--verde); transform: translateY(-3px);
  box-shadow: 0 0 0 5px rgba(92, 181, 49, .14), var(--sombra);
}
.cartela[aria-pressed='true']::after {
  content: '✓'; position: absolute; top: 7px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--verde); color: #fff;
  font-size: 13px; font-weight: 900; display: grid; place-items: center;
}

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  flex: 1 1 0; min-width: 96px; cursor: pointer; padding: 13px 12px;
  border-radius: 15px; background: var(--papel);
  border: 2.5px solid rgba(34, 48, 61, .12);
  font-weight: 800; font-size: 15.5px; text-align: center; line-height: 1.25;
  transition: border-color .15s, background .15s;
}
/* "maquininha" entra como legenda, não como parte do nome do botão. */
.chip small {
  display: block; margin-top: 2px;
  font-size: 11.5px; font-weight: 700; color: var(--tinta-fraca); letter-spacing: .01em;
}
.chip[aria-pressed='true'] { border-color: var(--laranja); background: rgba(var(--laranja-rgb), .08); color: var(--laranja-forte); }
.chip[aria-pressed='true'] small { color: var(--laranja); }

/* O bloco de endereço entra deslizando quando "entrega" é escolhida. */
.abre {
  overflow: hidden;
  animation: abrindo .38s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes abrindo {
  from { opacity: 0; max-height: 0; transform: translateY(-8px); }
  to   { opacity: 1; max-height: 900px; transform: none; }
}

.linha-campos { display: grid; grid-template-columns: 2fr 1fr; gap: 11px; }

.resumo-conta {
  margin-top: 18px; padding: 16px 18px; border-radius: var(--raio);
  background: rgba(34, 48, 61, .04); border: var(--borda);
}
.resumo-conta .linha {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 14.5px; padding: 6px 0; color: var(--tinta-media); font-weight: 700;
}
.resumo-conta .linha.total {
  border-top: 2px dashed rgba(34, 48, 61, .18); margin-top: 6px; padding-top: 11px;
  font-family: 'Baloo 2', sans-serif; font-size: 23px; color: var(--tinta); font-weight: 800;
}
.resumo-conta .linha.total .valor { color: var(--verde-escuro); }

.passo-titulo {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 19px;
  margin: 22px 0 10px;
}
.passo-titulo .numero {
  flex: 0 0 27px; height: 27px; border-radius: 50%;
  background: var(--laranja); color: #fff;
  font-size: 14px; display: grid; place-items: center;
}

/* ------------------------------------------------------------------ status do pedido */

/* Trilha vertical: a linha que liga os passos só é colorida até onde o pedido
   chegou, então dá pra ver o progresso sem ler nada. */
.trilha-status { position: relative; margin-top: 20px; padding-left: 6px; }

.passo { position: relative; display: flex; gap: 14px; padding-bottom: 22px; }
.passo:last-child { padding-bottom: 0; }

.passo::before {
  content: ''; position: absolute; left: 12px; top: 26px; bottom: 0;
  width: 2px; background: rgba(34, 48, 61, .14);
}
.passo:last-child::before { display: none; }
.passo.feito::before { background: var(--verde); }

.passo .marca {
  flex: 0 0 26px; height: 26px; border-radius: 50%; z-index: 1;
  display: grid; place-items: center;
  background: #fff; border: 2px solid rgba(34, 48, 61, .18); color: #fff;
}
.passo.feito .marca { background: var(--verde); border-color: var(--verde); }

.passo .texto b { display: block; font-size: 15.5px; color: var(--tinta-fraca); }
.passo.feito .texto b { color: var(--tinta); }
.passo .texto span { display: block; font-size: 13.5px; color: var(--tinta-media); margin-top: 2px; }

/* O passo atual pulsa de leve: é o único jeito de a pessoa saber, de relance,
   em que ponto o pedido está. */
.passo.agora .marca {
  box-shadow: 0 0 0 0 rgba(92, 181, 49, .55);
  animation: pulsoStatus 2s ease-out infinite;
}
.passo.agora .texto b { color: var(--verde-escuro); font-size: 17px; }

@keyframes pulsoStatus {
  70%  { box-shadow: 0 0 0 12px rgba(92, 181, 49, 0); }
  100% { box-shadow: 0 0 0 0 rgba(92, 181, 49, 0); }
}

.cartao-pedido {
  display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer;
  margin-top: 12px; padding: 14px 16px; text-align: left;
  border: 2px solid rgba(92, 181, 49, .4); border-radius: var(--raio);
  background: rgba(92, 181, 49, .07);
}
.cartao-pedido:hover { border-color: var(--verde); }
.cartao-pedido .info { flex: 1; min-width: 0; }
.cartao-pedido b { display: block; font-size: 15.5px; color: var(--verde-escuro); }
.cartao-pedido span { font-size: 13px; color: var(--tinta-media); }
.cartao-pedido .seta { color: var(--verde); font-size: 20px; font-weight: 900; }

/* Aviso do que vem na PRÓXIMA compra. Aparece enquanto ela está na primeira:
   saber que tem mais coisa depois é o que faz ela voltar. */
.aviso-proxima {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 18px; padding: 14px 16px; border-radius: var(--raio);
  background: rgba(92, 181, 49, .1);
  border: 2px dashed rgba(92, 181, 49, .4);
  font-size: 14px; line-height: 1.5; color: var(--verde-escuro);
}
.aviso-proxima svg { flex: 0 0 auto; margin-top: 1px; }

/* ------------------------------------------------------------------ a escada */

/* Os cinco degraus, com o de hoje aceso. Ver o caminho inteiro é o que faz ela
   querer o próximo: "na terceira eu ainda ganho boneco". */
.escada { display: flex; gap: 5px; margin: 16px 0 6px; }

.degrau {
  flex: 1; text-align: center; padding: 9px 3px 8px;
  border-radius: 12px; background: rgba(34, 48, 61, .05);
  border: 2px solid transparent;
}
.degrau .ordem { display: block; font-size: 11.5px; font-weight: 900; color: var(--tinta-fraca); }
.degrau .off {
  display: block; font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: 17px; color: var(--tinta-media); line-height: 1.15;
}
.degrau .brinde { display: block; height: 17px; color: var(--tinta-fraca); }

.degrau.feito { background: rgba(92, 181, 49, .12); }
.degrau.feito .off, .degrau.feito .ordem { color: var(--verde-escuro); }
.degrau.feito .brinde { color: var(--verde); }

.degrau.agora {
  background: var(--laranja); border-color: var(--laranja-forte);
  box-shadow: 0 4px 14px -4px rgba(var(--laranja-rgb), .8);
  transform: scale(1.06);
}
.degrau.agora .ordem, .degrau.agora .off, .degrau.agora .brinde { color: #fff; }

.escada-nota {
  text-align: center; font-size: 13.5px; font-weight: 700;
  color: var(--verde-escuro); margin: 4px 0 0;
}

/* ------------------------------------------------------------------ surpresa */

.aviso-surpresa {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 18px 0 6px; padding: 14px 16px; border-radius: var(--raio);
  background: rgba(224, 160, 28, .1); border: 2px dashed rgba(224, 160, 28, .45);
  color: #8a6100;
}
.aviso-surpresa svg { flex: 0 0 auto; margin-top: 1px; }
.aviso-surpresa b { display: block; font-size: 15.5px; }
.aviso-surpresa > div > span { font-size: 13.5px; }

/* As chances ficam à mostra: esconder a probabilidade seria enganar. */
.chances { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.chance-peca {
  padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .7);
  font-size: 11.5px; font-weight: 800; color: var(--tinta-media);
}
/* Cada faixa com a cor dela: uma pílula dourada para todas apagaria a escada
   entre raro, épico e lendário — e é essa escada que faz querer o próximo. */
.chance-peca.rara { background: var(--dourado); color: #fff; }
.chance-peca[data-raridade="raro"] { background: #3b82f6; color: #fff; }
.chance-peca[data-raridade="epico"] { background: #a855f7; color: #fff; }
.chance-peca[data-raridade="lendario"] { background: #f59e0b; color: #2b1a00; }

/* ------------------------------------------------------------------ pontos */

.usar-pontos {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  margin: 6px 0 4px; padding: 15px 16px; border-radius: var(--raio);
  background: rgba(92, 181, 49, .1); border: 2px solid rgba(92, 181, 49, .35);
}
.usar-pontos input { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 1px; accent-color: var(--verde); }
.usar-pontos .texto b { display: block; font-size: 15.5px; color: var(--verde-escuro); }
.usar-pontos .texto span { font-size: 13.5px; color: var(--tinta-media); }

.preco-detalhe .abatido { background: rgba(92, 181, 49, .16); color: var(--verde-escuro); }

/* ------------------------------------------------------------------ indicação */

.convite-indicacao {
  background: linear-gradient(155deg, rgba(92, 181, 49, .12), var(--papel) 60%);
  border-color: rgba(92, 181, 49, .35);
}

.caixa-link {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 12px; border-radius: 14px;
  background: rgba(34, 48, 61, .05); border: var(--borda);
}
.caixa-link input {
  flex: 1 1 160px; min-width: 0; border: 0; background: none;
  /* 16px e o minimo: abaixo disso o Safari do iPhone da zoom sozinho ao
     focar, e a tela fica torta pelo resto da sessao. */
  font-size: 16px; font-weight: 700; color: var(--tinta-media);
}
.caixa-link input:focus { outline: 0; }

.marca-afiliado {
  padding: 5px 12px; border-radius: 8px; background: var(--tinta); color: #fff;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .06em;
}

/* ------------------------------------------------------------------ loja de pontos */

.grade-premios { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

.premio {
  background: var(--papel); border: var(--borda); border-radius: var(--raio);
  padding: 14px 12px; text-align: center; box-shadow: var(--sombra);
}
.premio img { width: 100%; height: 96px; object-fit: contain; }
.premio .sem-foto { height: 96px; display: grid; place-items: center; color: var(--tinta-fraca); }
.premio b { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.25; }
.premio .custo {
  display: block; margin-top: 3px;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 18px; color: var(--laranja);
}
.premio .barra { height: 7px; margin: 10px 0 8px; }
.premio .falta { display: block; font-size: 12.5px; font-weight: 700; color: var(--tinta-fraca); }
/* Dentro do card do prêmio o botão volta a ocupar a linha inteira, mesmo sendo
   ".pequeno". Especificidade explícita de propósito: se dependesse da ordem do
   arquivo, mover um bloco de lugar mudaria a tela sem ninguém encostar nela. */
.premio .botao, .premio .botao.pequeno { width: 100%; padding: 11px; font-size: 15px; }

/* Alcançou: o prêmio se destaca do resto da vitrine. */
.premio.alcancou {
  border-color: var(--verde); box-shadow: 0 0 0 4px rgba(92, 181, 49, .14), var(--sombra-alta);
}
.premio.alcancou .custo { color: var(--verde-escuro); }

/* ------------------------------------------------------------------ roleta */

/* Abertura de caixa. A fita corre na horizontal e para na peça sorteada.
   A animação não decide nada: ela conta, com suspense, um resultado que o
   servidor já produziu. */
.roleta {
  position: relative; overflow: hidden;
  padding: 18px 0; margin: 4px 0 8px;
  border-radius: var(--raio-g);
  background: linear-gradient(180deg, #1b2733, #2c3d4f);
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, .5);
}

.roleta .fita { display: flex; gap: 10px; will-change: transform; }

.roleta .carta {
  position: relative; flex: 0 0 132px; width: 132px;
  padding: 12px 8px 10px; border-radius: 14px; text-align: center;
  background: linear-gradient(170deg, #f8fafc, #dfe6ee);
  border-bottom: 4px solid #93a3b1;
}
.roleta .carta img { width: 100%; height: 78px; object-fit: contain; }
.roleta .carta .sem-foto {
  height: 78px; display: grid; place-items: center;
  font-family: 'Baloo 2', sans-serif; font-size: 34px; color: var(--tinta-fraca);
}
.roleta .carta .nome {
  display: block; margin-top: 6px; font-size: 12.5px; font-weight: 800; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.roleta .carta .chance { display: block; font-size: 11.5px; font-weight: 700; color: var(--tinta-fraca); }

/* A peça rara se anuncia antes de sair: é o que dá graça em tirar ela. */
.roleta .carta.rara {
  background: linear-gradient(170deg, #fff6db, #ffdf9e);
  border-bottom-color: var(--dourado);
  box-shadow: 0 0 18px rgba(224, 160, 28, .55);
}
.roleta .carta.rara .chance { color: #a97400; }

/* A agulha do centro: é nela que a peça para. */
.roleta .agulha {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; z-index: 3;
  margin-left: -1.5px; background: var(--laranja);
  box-shadow: 0 0 12px 2px rgba(var(--laranja-rgb), .9);
}
.roleta .agulha::before, .roleta .agulha::after {
  content: ''; position: absolute; left: 50%; margin-left: -7px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
}
.roleta .agulha::before { top: 0; border-top: 9px solid var(--laranja); }
.roleta .agulha::after { bottom: 0; border-bottom: 9px solid var(--laranja); }

/* Degradê nas pontas: a fita some em vez de cortar seco. */
.roleta .borda-esq, .roleta .borda-dir {
  position: absolute; top: 0; bottom: 0; width: 56px; z-index: 2; pointer-events: none;
}
.roleta .borda-esq { left: 0; background: linear-gradient(90deg, #1b2733, transparent); }
.roleta .borda-dir { right: 0; background: linear-gradient(270deg, #1b2733, transparent); }

/* Parou: a peça ganha acende e o resto apaga. */
.roleta.parou .carta { opacity: .35; filter: saturate(.4); transition: opacity .4s, filter .4s; }
.roleta.parou .carta.ganha {
  opacity: 1; filter: none;
  animation: cartaGanha .6s cubic-bezier(.2, 1.6, .4, 1) both;
  box-shadow: 0 0 0 3px var(--laranja), 0 0 26px 6px rgba(var(--laranja-rgb), .7);
}
@keyframes cartaGanha {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.14) translateY(-4px); }
  100% { transform: scale(1.06); }
}

.roleta-texto {
  text-align: center; margin: 12px 0 0;
  font-size: 15px; font-weight: 800; color: var(--tinta-media);
}
.roleta-texto.revelado {
  font-family: 'Baloo 2', sans-serif; font-size: 24px; color: var(--verde-escuro);
  animation: pulsaEconomia .5s cubic-bezier(.2, 1.4, .4, 1);
}
.roleta-texto b { color: var(--laranja-forte); }

/* ------------------------------------------------------------------ álbum */

.album { margin-top: 16px; }
.album-cabeca { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.album-contador { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 22px; color: var(--laranja); }

.barra {
  height: 11px; border-radius: 999px; background: rgba(34, 48, 61, .1);
  overflow: hidden; margin: 10px 0 16px;
}
.barra i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--verde-claro), var(--verde));
  transition: width .7s cubic-bezier(.2, .9, .3, 1);
}

/* A prateleira: peça conquistada acende, peça que falta fica só silhueta.
   O buraco visível é o que traz a pessoa de volta à loja. */
.prateleira {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px;
  padding: 14px 12px 16px; border-radius: var(--raio);
  background: linear-gradient(180deg, rgba(34,48,61,.05), rgba(34,48,61,.02));
  border: var(--borda);
}
.peca { text-align: center; }
.peca .moldura {
  position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden;
  display: grid; place-items: center; background: rgba(34, 48, 61, .09);
  border: 2px dashed rgba(34, 48, 61, .18);
}
.peca img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.peca .interrogacao { font-family: 'Baloo 2', sans-serif; font-size: 30px; font-weight: 800; color: rgba(34, 48, 61, .26); }
.peca .nome { font-size: 12px; font-weight: 800; margin-top: 6px; color: var(--tinta-fraca); }

.peca.faltando img { filter: brightness(0) opacity(.17); }

.peca.tem .moldura {
  background: linear-gradient(160deg, #fff, var(--areia));
  border: 2px solid var(--verde); border-style: solid;
  box-shadow: 0 0 0 4px rgba(92, 181, 49, .16);
}
.peca.tem .nome { color: var(--verde-escuro); }
.peca.tem .moldura::after {
  content: '✓'; position: absolute; top: 4px; right: 5px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--verde); color: #fff;
  font-size: 12px; font-weight: 900; display: grid; place-items: center;
}

/* ------------------------------------------------------------------ instagram */

.portao {
  text-align: center; padding: 26px 20px;
  border-radius: var(--raio-g);
  background: linear-gradient(140deg, #f9ce5c, #ee5f68 45%, #b13ab5 78%, #6b3cd4);
  color: #fff; box-shadow: var(--sombra-alta);
}
.portao h2 { font-size: 26px; margin-bottom: 8px; }
.portao p { margin: 0 auto 18px; max-width: 30ch; font-size: 15px; opacity: .95; }
.portao .botao { background: #fff; color: #c1358a; box-shadow: 0 5px 0 rgba(0, 0, 0, .18); }
.portao .arroba { font-weight: 900; font-size: 19px; margin-bottom: 14px; letter-spacing: .02em; }

.confirma-insta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 12px; padding: 12px; width: 100%; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .55); border-radius: 16px;
  background: rgba(255, 255, 255, .14); color: #fff; font-weight: 800; font-size: 15.5px;
}
.confirma-insta:hover { background: rgba(255, 255, 255, .24); }

/* ------------------------------------------------------------------ catálogo */

/* Barra de linhas fixa no topo: com 11 linhas, rolar até achar a certa cansa. */
.filtro-linhas {
  position: sticky; top: 51px; z-index: var(--z-sticky);
  display: flex; gap: 7px; overflow-x: auto;
  padding: 10px 14px; margin: 0 -16px 18px;
  background: rgba(255, 245, 234, .93);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(34, 48, 61, .08);
  scrollbar-width: none;
}
.filtro-linhas::-webkit-scrollbar { display: none; }

.pilula {
  flex: 0 0 auto; padding: 8px 15px; cursor: pointer;
  border: 2px solid rgba(34, 48, 61, .12); border-radius: 999px;
  background: var(--papel); font-weight: 800; font-size: 14px; color: var(--tinta-media);
  white-space: nowrap; transition: all .16s;
}
.pilula:hover { border-color: var(--laranja); color: var(--laranja); }
.pilula[aria-pressed='true'] {
  background: var(--laranja); border-color: var(--laranja); color: #fff;
  box-shadow: 0 4px 12px -4px rgba(var(--laranja-rgb), .7);
}

.linha-catalogo { margin-bottom: 30px; scroll-margin-top: 108px; }
.linha-catalogo .cabeca-linha {
  display: flex; align-items: center; gap: 11px; margin-bottom: 3px;
}
.linha-catalogo .risca {
  flex: 1; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--verde), transparent);
}
.linha-catalogo h3 { font-size: 23px; }
.linha-catalogo .resumo { font-size: 14px; color: var(--tinta-media); margin: 2px 0 13px; }

.grade-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; }

.item-catalogo {
  position: relative; overflow: hidden;
  background: var(--papel); border: var(--borda); border-radius: var(--raio);
  padding: 12px 10px 12px; text-align: center; box-shadow: var(--sombra);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s;
}
.item-catalogo:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); }

/* Brilho que atravessa a embalagem ao passar o dedo/mouse. Só enfeite, mas é o
   que separa "grade de fotos" de vitrine. */
.item-catalogo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.item-catalogo:hover::after { transform: translateX(120%); }

.item-catalogo img { width: 100%; height: 124px; object-fit: contain; }
.item-catalogo .tam {
  display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 999px;
  background: rgba(92, 181, 49, .14); color: var(--verde-escuro);
  font-weight: 900; font-size: 13.5px;
}
.item-catalogo .det { display: block; font-size: 12px; color: var(--tinta-fraca); font-weight: 700; margin-top: 4px; }

.catalogo-vazio { text-align: center; padding: 40px 20px; color: var(--tinta-fraca); font-weight: 800; }

/* ------------------------------------------------------------------ loja */

.loja-caixa {
  margin-top: 18px; padding: 18px; border-radius: var(--raio-g);
  background: var(--tinta); color: #fff;
}
.loja-caixa h3 { font-size: 20px; margin-bottom: 4px; }
.loja-caixa p { margin: 4px 0; font-size: 14.5px; color: rgba(255, 255, 255, .78); }
.loja-caixa .botao-fantasma { border-color: rgba(255, 255, 255, .3); color: #fff; margin-top: 12px; }
.loja-caixa .botao-fantasma:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }

/* ------------------------------------------------------------------ central de campanhas */

/* A página central é da REDE INOVA: vermelho da casa, logo grande.
   Regra de cor aqui: texto é BRANCO. Cinza sobre vermelho suja e some —
   quando precisa de hierarquia, muda o peso ou o tamanho, não a cor. */
body.central {
  background-color: var(--vermelho);
  background-image:
    radial-gradient(circle at 50% -8%, #ff2a4d, transparent 55%),
    radial-gradient(circle at 92% 96%, #8f0016, transparent 55%),
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px;
  background-attachment: fixed;
  color: #fff;
}

/* Halo que respira devagar atrás de tudo. */
.brilho-central {
  position: fixed; top: -18%; left: 50%; margin-left: -320px;
  width: 640px; height: 640px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 62%);
  filter: blur(52px);
  animation: respiraCentral 9s ease-in-out infinite alternate;
}
@keyframes respiraCentral {
  from { transform: scale(1) translateY(0); opacity: .75; }
  to   { transform: scale(1.18) translateY(22px); opacity: 1; }
}

.topo-central {
  position: relative; z-index: 1;
  display: flex; justify-content: center;
  padding: 30px 20px 4px;
}
/* A logo já vem completa, com a girafa. Nada de mascote solto ao lado. */
.logo-central {
  height: clamp(78px, 26vw, 118px); width: auto;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .4));
  animation: entraLogo .6s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes entraLogo {
  from { opacity: 0; transform: translateY(-14px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

.selo-central {
  display: inline-block; margin: 16px 0 10px; padding: 7px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); border: 1.5px solid rgba(255, 255, 255, .45);
  color: #fff; font-size: 12.5px; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

.titulo-central {
  font-size: clamp(34px, 11vw, 50px); color: #fff; margin: 0 0 10px; line-height: 1.02;
  text-shadow: 0 3px 20px rgba(0, 0, 0, .3);
}
.frase-central {
  color: #fff; opacity: .92; font-size: 17px; font-weight: 700;
  margin: 0 auto 26px; max-width: 28ch;
}

/* Cada campanha é um cartão claro sobre o vermelho. A pessoa reconhece a MARCA,
   então a logo do parceiro é o elemento maior do cartão. */
.cartao-campanha-publica {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 15px; padding: 22px 20px 22px 26px; overflow: hidden;
  background: #fff; border-radius: var(--raio-g);
  box-shadow: 0 4px 0 rgba(120, 0, 18, .35), 0 22px 40px -18px rgba(0, 0, 0, .6);
  text-decoration: none; color: var(--tinta);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s;
  animation: sobeCartao .5s cubic-bezier(.2, .8, .3, 1) both;
}
.cartao-campanha-publica:nth-child(2) { animation-delay: .07s; }
.cartao-campanha-publica:nth-child(3) { animation-delay: .14s; }
.cartao-campanha-publica:nth-child(4) { animation-delay: .21s; }

@keyframes sobeCartao {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.cartao-campanha-publica:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 0 rgba(120, 0, 18, .35), 0 30px 50px -20px rgba(0, 0, 0, .7);
}
.cartao-campanha-publica:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(120, 0, 18, .35); }

/* Faixa na cor do parceiro: é a única pista de cor antes de abrir o portal. */
.cartao-campanha-publica .faixa {
  position: absolute; left: 0; top: 0; bottom: 0; width: 9px;
  background: var(--cor-parceiro, var(--laranja));
}
.cartao-campanha-publica img { height: 56px; width: auto; flex: 0 0 auto; }
.cartao-campanha-publica .conteudo { flex: 1; min-width: 0; text-align: left; }
.cartao-campanha-publica .conteudo b {
  display: block; font-family: 'Baloo 2', sans-serif; font-size: 20px; line-height: 1.12;
}
.cartao-campanha-publica .conteudo span {
  display: block; margin-top: 3px; font-size: 13.5px; color: var(--tinta-media); font-weight: 700;
}
.cartao-campanha-publica .ir {
  font-family: 'Baloo 2', sans-serif; font-size: 34px; font-weight: 800;
  color: var(--cor-parceiro, var(--laranja)); line-height: 1;
}

/* Como funciona: quatro passos, numerados na cor da casa. */
.passos-central { position: relative; z-index: 1; margin-top: 34px; text-align: left; }
.passos-central h2 {
  font-size: 22px; color: #fff; text-align: center; margin-bottom: 16px;
}
.passos-central ol { list-style: none; counter-reset: passo; margin: 0; padding: 0; }
.passos-central li {
  counter-increment: passo; position: relative;
  padding: 0 0 20px 52px;
}
.passos-central li::before {
  content: counter(passo);
  position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--vermelho);
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 17px;
}
.passos-central li::after {
  content: ''; position: absolute; left: 17px; top: 34px; bottom: 4px; width: 2px;
  background: rgba(255, 255, 255, .3);
}
.passos-central li:last-child { padding-bottom: 0; }
.passos-central li:last-child::after { display: none; }
.passos-central li b { display: block; color: #fff; font-size: 16.5px; }
.passos-central li span { display: block; color: #fff; opacity: .8; font-size: 14px; margin-top: 2px; }

.loja-central {
  position: relative; z-index: 1;
  margin-top: 30px; padding: 20px; border-radius: var(--raio-g);
  background: rgba(0, 0, 0, .22); border: 1.5px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff;
}
.loja-central h3 { font-size: 19px; margin-bottom: 6px; }
.loja-central p { margin: 3px 0; font-size: 14.5px; opacity: .9; }
.loja-central a {
  display: block; margin-top: 14px; padding: 13px; border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, .5); color: #fff;
  text-decoration: none; font-weight: 800; text-align: center;
}
.loja-central a:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }

.rodape-central { position: relative; z-index: 1; color: #fff; opacity: .75; }
.rodape-central strong { color: #fff; }
.rodape-central .assinatura { border-top-color: rgba(255, 255, 255, .22); }
.rodape-central .assinatura strong { color: #fff; }

body.central .carregando { color: #fff; }
body.central .rodinha { border-color: rgba(255, 255, 255, .28); border-top-color: #fff; }
body.central .palco { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ avisos */

.recado {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 16px; border-radius: 16px; margin-bottom: 14px;
  font-size: 14.5px; font-weight: 700; line-height: 1.5;
}
.recado svg { flex: 0 0 auto; margin-top: 1px; }
.recado.ruim  { background: rgba(228, 3, 46, .09); color: #a30020; }
.recado.bom   { background: rgba(92, 181, 49, .12); color: var(--verde-escuro); }
.recado.atento{ background: rgba(var(--laranja-rgb), .12); color: var(--laranja-forte); }

/* Ícones dentro de blocos de texto e botões: alinham pela linha de base do
   texto em vez de flutuar no meio. */
.instrucao svg { flex: 0 0 auto; margin-top: 2px; color: var(--verde-escuro); }
.relogio svg, .confirma-insta svg, .botao svg { flex: 0 0 auto; }
.cartela .emoji { display: flex; align-items: center; justify-content: center; gap: 3px; color: var(--laranja); }
.cartela[aria-pressed='true'] .emoji { color: var(--verde-escuro); }
.opcao .sem-foto { color: var(--tinta-fraca); }
.opcao.lenco[aria-pressed='true'] .sem-foto { color: var(--tinta-media); }
.peca .moldura svg { color: var(--verde); }

.carregando {
  display: grid; place-items: center; padding: 60px 20px; gap: 14px;
  color: var(--tinta-media); font-weight: 800;
}
.rodinha {
  width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid rgba(var(--laranja-rgb), .2); border-top-color: var(--laranja);
  animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ celebração */

#confete {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: var(--z-festa);
}

.celebra { text-align: center; padding: 26px 20px 30px; }
.celebra .medalha {
  width: 116px; height: 116px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 56px;
  background: radial-gradient(circle at 35% 30%, var(--verde-claro), var(--verde));
  box-shadow: 0 0 0 10px rgba(92, 181, 49, .18), var(--sombra-alta);
  animation: chega .6s cubic-bezier(.2, 1.7, .4, 1) both;
}
.celebra.ouro .medalha { background: radial-gradient(circle at 35% 30%, #ffe08a, var(--dourado)); box-shadow: 0 0 0 10px rgba(224, 160, 28, .2), var(--sombra-alta); }

@keyframes chega { from { transform: scale(0) rotate(-25deg); } to { transform: none; } }

.celebra h1 { font-size: clamp(32px, 9.5vw, 42px); color: var(--verde-escuro); margin-bottom: 10px; }
.celebra.ouro h1 { color: #a97400; }
.celebra p { font-size: 16.5px; color: var(--tinta-media); margin: 0 auto 22px; max-width: 32ch; }

.rodape {
  text-align: center; padding: 26px 16px 40px;
  font-size: 12.5px; color: var(--tinta-fraca); line-height: 1.7;
}
.rodape strong { color: var(--tinta-media); }

.assinatura {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(34, 48, 61, .1);
  font-size: 12px; letter-spacing: .03em;
}
.assinatura strong { color: var(--laranja); font-weight: 900; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------ a área do cliente (central)

   Os cupons de TODAS as campanhas no mesmo lugar: o cadastro é um só, então a
   Hipopó e a Vitafor moram lado a lado. Cada cartão veste a cor do parceiro
   dele, que chega por --cor-parceiro. */

.faixa-cliente {
  display: grid; gap: 8px; justify-items: center;
  margin: 0 0 22px; padding: 18px 20px; border-radius: 20px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff;
}
.faixa-cliente > b { font-family: 'Baloo 2', sans-serif; font-size: 20px; }
.faixa-cliente > span { font-size: 14.5px; color: rgba(255, 255, 255, .88); }
.faixa-cliente .botao { width: auto; min-width: 220px; }

.cabeca-cupons { text-align: center; margin-bottom: 18px; }
.cabeca-cupons h1 { font-family: 'Baloo 2', sans-serif; font-size: 30px; color: #fff; margin: 0 0 4px; }

/* O placar: o número que dá orgulho é o que ela economizou. */
.placar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 18px; }
.marco {
  padding: 14px 8px; border-radius: 16px; text-align: center;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
}
.marco b {
  display: block; font-family: 'Baloo 2', sans-serif; font-size: 26px; line-height: 1;
}
.marco span { font-size: 12px; color: rgba(255, 255, 255, .78); }
.marco.aceso { background: rgba(255, 255, 255, .2); }
.marco.ganho b { color: var(--verde-claro); font-size: 22px; }

/* ----------------------------------------------------------- cupom do cliente */

.cupom-meu {
  background: var(--papel); border-radius: 18px; overflow: hidden;
  margin-bottom: 12px; box-shadow: var(--sombra);
  border-left: 5px solid var(--cor-parceiro, var(--laranja));
}
.cupom-meu.usado, .cupom-meu.vencido, .cupom-meu.cancelado { opacity: .86; }

.cupom-meu header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid rgba(34, 48, 61, .08);
}
.cupom-meu header img { height: 26px; width: auto; object-fit: contain; }
.cupom-meu .campanha {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-fraca);
}
.cupom-meu .codigo {
  font-family: ui-monospace, Consolas, monospace; font-size: 16px; letter-spacing: .04em;
}

.marca-situacao {
  margin-left: auto; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; white-space: nowrap;
  background: rgba(34, 48, 61, .08); color: var(--tinta-media);
}
.cupom-meu.ativo .marca-situacao { background: var(--cor-parceiro); color: #fff; }
.cupom-meu.usado .marca-situacao { background: rgba(92, 181, 49, .16); color: var(--verde-escuro); }

.cupom-meu .corpo { display: flex; gap: 12px; align-items: center; padding: 14px; }
.cupom-meu .corpo > div { flex: 1; min-width: 0; }
.cupom-meu .corpo > div > b { display: block; font-size: 15px; line-height: 1.3; margin-bottom: 5px; }
.cupom-meu img.produto {
  flex: 0 0 58px; width: 58px; height: 58px; object-fit: contain;
  border-radius: 12px; background: #f6f7f9; padding: 5px;
}

.cupom-meu .precos { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cupom-meu .precos .de { font-size: 13px; color: var(--tinta-fraca); text-decoration: line-through; }
.cupom-meu .precos .por {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 20px;
  color: var(--cor-parceiro);
}
.cupom-meu .precos .off {
  padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
  background: var(--cor-parceiro); color: #fff;
}
.cupom-meu .pontos {
  display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--verde-escuro);
}

.rodape-cupom {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; background: rgba(34, 48, 61, .04);
}
.rodape-cupom .prazo { font-size: 13px; color: var(--tinta-media); }
.rodape-cupom .prazo.frio { color: var(--tinta-fraca); }
.rodape-cupom .botao { margin-left: auto; width: auto; }

/* O COMPROVANTE. Cupom usado não é lixo: é prova de que a pessoa passou na
   loja, com quem falou e quanto levou de desconto. */
.comprovante {
  display: grid; gap: 3px;
  padding: 12px 14px; background: rgba(92, 181, 49, .08);
  border-top: 1px dashed rgba(92, 181, 49, .4);
}
.comprovante > b {
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--verde-escuro);
}
.comprovante span { font-size: 13.5px; color: var(--tinta-media); }
.comprovante .ganho { font-weight: 800; color: var(--verde-escuro); }

/* A contagem ao lado do nome do filtro. Vive no estilo.css porque a central e o
   portal de campanha usam a mesma pílula. */
.pilula .conta {
  display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px;
  background: rgba(34, 48, 61, .1); color: var(--tinta-media);
  font-size: 12px; font-weight: 800; vertical-align: middle;
}
.pilula.ativa .conta { background: rgba(255, 255, 255, .28); color: #fff; }

/* ------------------------------------------- a coleção na porta de entrada */

/* Ninguém coleciona o que não sabe que existe. As cinco peças aparecem
   inteiras, coloridas, com a raridade e a chance à mostra — e a roleta ao lado
   deixa sentir como é a abertura, SEM entregar nada. */

.capa-colecao { margin: 26px 0 8px; text-align: center; }
.capa-colecao h2 {
  font-family: 'Baloo 2', sans-serif; font-size: 22px; margin: 0 0 4px;
}
.capa-colecao-frase {
  margin: 0 0 14px; font-size: 14.5px; color: var(--tinta-media);
}

.capa-pecas {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px;
}
/* No celular estreito cinco colunas espremem a peça a nada. */
@media (max-width: 430px) {
  .capa-pecas { grid-template-columns: repeat(3, 1fr); }
}

.peca-mini { text-align: center; }
.peca-mini .palco {
  position: relative; display: block; border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, var(--claro, #f2f2f2), var(--fundo, #e9e9e9) 72%);
}
/* Retângulo em pé, igual ao álbum: o dedoche é 297x520, e num quadrado ele
   encolheria até caber na largura sobrando vazio dos dois lados. */
.peca-mini .palco img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; padding: 3px;
}
.peca-mini .sem-foto {
  display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4;
  font-size: 26px; font-weight: 900; opacity: .3;
}
.peca-mini b { display: block; margin-top: 5px; font-size: 12px; line-height: 1.2; }
.peca-mini .chance { display: block; font-size: 11.5px; color: var(--tinta-fraca); font-weight: 700; }

.peca-mini .faixa-raridade {
  display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 999px;
  background: var(--faixa, #94a3b8); color: var(--faixa-tinta, #fff);
  font-size: 11.5px; font-weight: 900; letter-spacing: .07em;
}
.peca-mini[data-raridade="comum"] { --faixa: #94a3b8; --faixa-tinta: #fff; }
.peca-mini[data-raridade="raro"] { --faixa: #3b82f6; --faixa-tinta: #fff; }
.peca-mini[data-raridade="epico"] { --faixa: #a855f7; --faixa-tinta: #fff; }
.peca-mini[data-raridade="lendario"] { --faixa: #f59e0b; --faixa-tinta: #2b1a00; }

/* O matiz sai da própria foto da peça — a mesma medição usada no álbum. */
.peca-mini[data-cor="VER"] { --fundo: hsl(112 62% 78%); --claro: hsl(112 70% 93%); }
.peca-mini[data-cor="LAR"] { --fundo: hsl( 22 62% 78%); --claro: hsl( 22 70% 93%); }
.peca-mini[data-cor="AZU"] { --fundo: hsl(204 62% 78%); --claro: hsl(204 70% 93%); }
.peca-mini[data-cor="ROS"] { --fundo: hsl(346 62% 78%); --claro: hsl(346 70% 93%); }
/* A que brilha no escuro fica sobre a noite — é o que ela faz. */
.peca-mini[data-cor="BRI"] { --fundo: #2b2f4a; --claro: #6a6f9c; }

/* 🚫 O AVISO VEM ANTES DE GIRAR, não depois. Lido só no fim, a cliente já teria
   visto a peça parar sob a agulha e formado a ideia de que ganhou — e a frase
   seguinte viraria letra miúda. */
.so-brincadeira {
  margin: 16px auto 10px; max-width: 40ch;
  font-size: 13.5px; line-height: 1.45; color: var(--tinta-media);
}
.so-brincadeira b { color: var(--tinta); }

.caixa-demo { margin-top: 14px; }
.caixa-demo .roleta-texto .so-teste {
  display: block; margin-top: 4px;
  font-size: 12.5px; font-weight: 600; color: var(--tinta-fraca);
}
/* Na roleta de brincar a peça que para NÃO ganha moldura de prêmio: é o mesmo
   desenho de uma peça qualquer, para não parecer conquista. */
.roleta.demo .carta.ganha { box-shadow: none; }

/* --------------------------------------------- a folha de escolher tamanho */

/* Sobe de baixo no celular, como toda folha de ação deste projeto. O kit são
   TRÊS escolhas independentes, e repetir é permitido: quem quer três iguais
   escolhe o mesmo três vezes. */

.folha-tamanhos {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(20, 24, 30, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.folha-conteudo {
  width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0; background: var(--papel, #fff);
}
@media (min-width: 560px) {
  .folha-tamanhos { align-items: center; }
  .folha-conteudo { border-radius: 22px; }
}

.folha-conteudo h2 {
  font-family: 'Baloo 2', sans-serif; font-size: 21px; margin: 0 0 2px;
}
.folha-conteudo .miudo { margin: 0 0 16px; font-size: 13.5px; color: var(--tinta-media); }
.folha-conteudo .botao { margin-top: 6px; }
.folha-conteudo .botao-fantasma { margin-top: 8px; width: 100%; }

.linha-tamanho { margin-bottom: 14px; }
.linha-tamanho .rotulo {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-fraca);
}
.linha-tamanho .opcoes { display: flex; flex-wrap: wrap; gap: 6px; }

.opcao-tamanho {
  flex: 1 1 auto; min-width: 62px; padding: 11px 8px; border-radius: 12px;
  background: var(--papel, #fff); border: 2px solid var(--linha, #e3e7ec);
  /* 16px é o piso: abaixo disso o Safari do iPhone dá zoom sozinho ao tocar. */
  font-size: 16px; font-weight: 800; color: var(--tinta, #22303d);
  cursor: pointer;
}
.opcao-tamanho:hover { border-color: var(--cor-parceiro, var(--vermelho, #e4032e)); }
.opcao-tamanho.ativa {
  background: var(--cor-parceiro, var(--vermelho, #e4032e));
  border-color: var(--cor-parceiro, var(--vermelho, #e4032e)); color: #fff;
}

/* ------------------------------------------------- as faixas da marca */

/* Peça oficial da parceria, na largura inteira da coluna. É VITRINE, NÃO
   OFERTA: sem preço, sem botão, sem cupom — arte com preço escrito dentro é
   preço fora do controle do painel. */

.faixas-marca { display: grid; gap: 10px; margin: 2px 0 18px; }

.faixa-marca {
  margin: 0; border-radius: 16px; overflow: hidden;
  background: var(--claro, #f4f5f7);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}
/* `height: auto` com width/height no HTML: o navegador reserva o espaco certo
   antes de a imagem chegar, e a pagina nao pula quando ela carrega. */
.faixa-marca img { display: block; width: 100%; height: auto; }

/* CODIGO DE BARRAS DO CUPOM
 *
 * O leitor laser do balcao le a barra; o numero escrito em cima continua ali
 * para quem preferir digitar. Fundo branco fixo mesmo em tema escuro: leitor
 * le contraste, e barra preta sobre fundo escuro simplesmente nao le. */
.barras-cupom {
  background: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 10px auto 2px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  line-height: 0;
}
.codigo-barras { display: block; max-width: 100%; height: auto; }

/* INSTRUÇÕES PARA O BALCONISTA
 *
 * Fechado por padrão: é a folha de serviço do balcão, não a conta do cliente.
 * Abre quando ela estende o celular. Tipografia maior que o miúdo normal —
 * quem lê isto está em pé, com fila. */
.para-balconista {
  margin-top: 16px;
  border: 1px dashed var(--borda);
  border-radius: 12px;
  background: rgba(0, 0, 0, .02);
  text-align: left;
}
.para-balconista > summary {
  cursor: pointer;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta-media);
  letter-spacing: .02em;
  list-style: none;
}
.para-balconista > summary::-webkit-details-marker { display: none; }
.para-balconista > summary::after {
  content: '+'; float: right; font-size: 18px; line-height: 1; color: var(--tinta-fraca);
}
.para-balconista[open] > summary::after { content: '–'; }
.para-balconista[open] > summary { border-bottom: 1px dashed var(--borda); }

.pb-corpo { padding: 12px 14px 14px; display: grid; gap: 10px; }
.pb-linha { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: start; }
.pb-rotulo {
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-fraca); padding-top: 2px;
}
.pb-lista { margin: 0; padding-left: 17px; display: grid; gap: 3px; font-size: 15px; }
.pb-valor { font-size: 19px; font-weight: 800; color: var(--tinta); }
.pb-aviso {
  margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--tinta-media);
  border-top: 1px dashed var(--borda); padding-top: 9px;
}

/* ------------------------------------------------------------ aviso flutuante
 *
 * Sobe de baixo no celular (perto do polegar, longe do cabeçalho) e desce do
 * topo no desktop, onde a atenção está em cima. `pointer-events: none` na
 * caixa: ela cobre a largura da tela e não pode roubar clique de nada — só os
 * avisos dentro dela recebem toque, para poderem ser fechados. */
.avisos {
  position: fixed;
  z-index: var(--z-aviso);
  left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid; gap: 8px; justify-items: center;
  padding: 0 14px;
  pointer-events: none;
}
.aviso {
  pointer-events: auto;
  max-width: min(440px, 100%);
  padding: 13px 17px;
  border-radius: 13px;
  font-size: 15px; font-weight: 700; line-height: 1.35;
  color: #fff; background: #22303d;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45);
  cursor: pointer;
  animation: avisoEntra .26s cubic-bezier(.2, .8, .3, 1) both;
}
.aviso.bom    { background: #2f7d32; }
.aviso.atento { background: #a86a06; }
.aviso.ruim   { background: #b3202f; }
.aviso.saindo { animation: avisoSai .3s ease-in forwards; }

@keyframes avisoEntra { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes avisoSai   { to   { opacity: 0; transform: translateY(10px) scale(.98); } }

@media (min-width: 720px) {
  .avisos { top: 18px; bottom: auto; }
  @keyframes avisoEntra { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
  @keyframes avisoSai   { to   { opacity: 0; transform: translateY(-10px) scale(.98); } }
}

/* Movimento é gatilho de enjoo para quem tem sensibilidade vestibular. Sem
   deslize, mas ainda com o fade — sumir de repente confunde mais que ajuda. */
@media (prefers-reduced-motion: reduce) {
  .aviso { animation: avisoAparece .01s both; }
  .aviso.saindo { animation: avisoSome .2s ease-in forwards; }
  @keyframes avisoAparece { from { opacity: 0; } }
  @keyframes avisoSome { to { opacity: 0; } }
}

/* ------------------------------------------------------------ página 404 */

.palco-404 {
  min-height: 100vh; min-height: 100dvh;
  max-width: var(--limite); margin: 0 auto;
  padding: 40px 22px calc(40px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 4px;
}
.marca-404 { height: 46px; width: auto; margin-bottom: 26px; opacity: .9; }

/* O número grande é o sinal imediato de "erro", antes de qualquer leitura.
   Fica atrás do texto em peso visual: quem manda é a frase, não o código. */
.numero-404 {
  font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: clamp(64px, 22vw, 104px); line-height: 1;
  margin: 0; color: var(--areia); letter-spacing: -.02em;
}
.palco-404 h1 {
  font-size: clamp(23px, 6vw, 29px); margin: 0 0 10px; color: var(--tinta);
}
.texto-404 {
  margin: 0 0 26px; max-width: 34ch;
  font-size: 16px; line-height: 1.55; color: var(--tinta-media);
}
.palco-404 .botao { width: 100%; max-width: 320px; }
.palco-404 .link-texto { margin-top: 14px; }

/* --------------------------------------------------- WhatsApp flutuante
 *
 * Canto inferior direito, o lugar que todo mundo já procura. O `bottom` sobe
 * quando a página tem barra inferior fixa (o Clube) — cobrir o "Meu cupom"
 * seria trocar a venda pela dúvida. Fica ABAIXO do toast na pilha: aviso é
 * mais urgente que atendimento. */
.zap-flutuante {
  position: fixed;
  z-index: var(--z-fixo);
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 0;
  height: 54px; padding: 0 14px;
  border-radius: 27px;
  background: #25d366; color: #fff; text-decoration: none;
  box-shadow: 0 6px 18px -4px rgba(37, 211, 102, .6), 0 2px 6px rgba(0, 0, 0, .18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.zap-flutuante:active { transform: scale(.94); }

/* O rótulo nasce fechado e só abre no hover, que é coisa de mouse. No celular
   o ícone verde já é reconhecido sozinho, e um balão permanente comeria a
   tela. */
.zap-dica {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font-size: 15px; font-weight: 800;
  transition: max-width .26s ease, margin-left .26s ease;
}
@media (hover: hover) {
  .zap-flutuante:hover { box-shadow: 0 10px 26px -4px rgba(37, 211, 102, .75); }
  .zap-flutuante:hover .zap-dica { max-width: 200px; margin-left: 9px; }
}

/* No Clube a barra de baixo tem 64px + a área segura do iPhone. */
body.clube .zap-flutuante { bottom: calc(78px + env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce) {
  .zap-flutuante, .zap-dica { transition: none; }
}

/* --------------------------------------------- erro de carregamento com saída
 *
 * Ocupa a área que o conteúdo ocuparia, para a pessoa entender que a falha é
 * daquele bloco e não da tela toda. O botão é escuro, não laranja: não é a
 * ação que se quer incentivar, é a tábua de salvação. */
.erro-carregar {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px;
  padding: 34px 20px; margin: 0 auto; max-width: 380px;
}
.erro-icone { color: var(--tinta-fraca); margin-bottom: 6px; line-height: 0; }
.erro-carregar b { font-size: 17px; color: var(--tinta); line-height: 1.35; }
.erro-carregar p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: var(--tinta-media); }
.erro-carregar .botao { width: auto; padding: 13px 24px; font-size: 16px; }

/* ------------------------------------------------- convite para instalar
 *
 * Sobe de baixo, acima da barra do Clube e abaixo do toast. Aparece depois de
 * 20 segundos de uso e some por 30 dias se a pessoa dispensar — pedir para
 * instalar antes de ela ver valor é o jeito mais rápido de nunca instalar. */
.convite-instalar {
  position: fixed;
  z-index: var(--z-fixo);
  left: 12px; right: 12px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  max-width: 520px; margin: 0 auto;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--papel);
  border: var(--borda);
  box-shadow: var(--sombra-alta);
  animation: conviteEntra .3s cubic-bezier(.2, .8, .3, 1) both;
}
body.clube .convite-instalar { bottom: calc(80px + env(safe-area-inset-bottom)); }

.ci-icone { width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto; }
.ci-texto { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ci-texto b { font-size: 15px; line-height: 1.25; }
.ci-texto span { font-size: 13.5px; line-height: 1.4; color: var(--tinta-media); }
.convite-instalar .botao { width: auto; flex: 0 0 auto; }

.ci-fechar {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(34, 48, 61, .07); color: var(--tinta-media);
  font-size: 19px; line-height: 1;
}
.ci-fechar:hover { background: rgba(34, 48, 61, .14); }

@keyframes conviteEntra { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  .convite-instalar { animation: none; }
}

/* ------------------------------------------------------ leitor da nota fiscal
 *
 * Folha que sobe de baixo, como todas as folhas de ação do projeto. A câmera
 * ocupa o topo com proporção fixa: sem `aspect-ratio` o vídeo entra com a
 * altura real do sensor e empurra o resto da folha para fora da tela. */
.folha-nota {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(20, 14, 8, .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: notaFundo .2s ease both;
}
@keyframes notaFundo { from { opacity: 0; } }

.fn-caixa {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: 92dvh; overflow-y: auto;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  border-radius: var(--raio-g) var(--raio-g) 0 0;
  background: var(--papel);
  animation: notaSobe .3s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes notaSobe { from { transform: translateY(24px); opacity: 0; } }

.fn-caixa h2 { font-size: 23px; margin: 0 0 4px; }
.fn-ajuda { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--tinta-media); }

.fn-fechar {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%;
  background: rgba(34, 48, 61, .08); color: var(--tinta-media); font-size: 21px; line-height: 1;
}

.fn-palco {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: 16px; overflow: hidden; background: #14100c;
  margin-bottom: 14px;
}
.fn-palco video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A mira não recorta nada — só diz para onde apontar. */
.fn-mira {
  position: absolute; inset: 50% 50%; width: 62%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(255, 255, 255, .9); border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .32);
}

.fn-manual { margin-top: 14px; border-top: var(--borda); padding-top: 12px; }
.fn-manual > summary {
  cursor: pointer; font-size: 16px; font-weight: 800; color: var(--tinta-media);
  padding: 6px 0; list-style: none;
}
.fn-manual > summary::-webkit-details-marker { display: none; }
.fn-manual > summary::after { content: ' ›'; }
.fn-manual[open] > summary::after { content: ' ⌄'; }

#fn-chave {
  width: 100%; padding: 14px; border-radius: 14px;
  border: var(--borda); background: #fff;
  /* 16px é o piso: abaixo disso o Safari do iPhone dá zoom sozinho ao focar. */
  font-size: 17px; font-family: monospace; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.fn-conta {
  margin: 6px 0 12px; text-align: right;
  font-size: 13px; color: var(--tinta-fraca); font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .folha-nota, .fn-caixa { animation: none; }
}

/* --------------------------------------------------------------- esqueleto
 *
 * A forma do que está chegando, para a espera não parecer maior do que é.
 *
 * O brilho corre da esquerda para a direita com `transform`, não com
 * `background-position`: animar posição de fundo repinta o elemento inteiro a
 * cada quadro e trava em celular fraco — que é exatamente o aparelho de quem
 * mais espera. */
.ossos { display: grid; gap: 10px; }

.osso {
  position: relative; overflow: hidden;
  background: rgba(34, 48, 61, .07);
  border-radius: 8px; height: 15px;
}
.osso::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: translateX(-100%);
  animation: ossoBrilho 1.4s ease-in-out infinite;
}
@keyframes ossoBrilho { to { transform: translateX(100%); } }

.osso.fino { height: 11px; }
.osso.faixa { width: 6px; height: auto; align-self: stretch; border-radius: 0; }
.osso.quadro { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; }
.osso.foto { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; }
.osso.marco { height: 74px; border-radius: 16px; }

/* A ALTURA IMPORTA: esqueleto mais baixo que o conteúdo faz a tela pular
   quando o real chega — e pular na hora em que o dedo desce faz tocar na
   coisa errada. Estas medidas acompanham `.cartao-campanha` e `.marco`. */
.ossos-cartao {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 14px 0; overflow: hidden;
  border-radius: 18px; background: var(--papel); border: var(--borda);
  min-height: 78px;
}
.ossos-corpo { flex: 1; display: grid; gap: 7px; padding-left: 14px; }

.ossos-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ossos-item {
  display: grid; gap: 7px; padding: 12px;
  border-radius: 16px; background: var(--papel); border: var(--borda);
}
.ossos-placar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }

@media (min-width: 720px) {
  .ossos-grade { grid-template-columns: repeat(3, 1fr); }
}

/* Movimento contínuo é gatilho de enjoo. Sem brilho, o cinza sozinho já diz
   "está chegando". */
@media (prefers-reduced-motion: reduce) {
  .osso::after { animation: none; display: none; }
}