/* ============================================================
   CUKI 50 ANOS — Resgate de Prêmios
   Paleta e tipografia conforme SPEC_original.md (seção 6).
   ============================================================ */

:root {
  --pessego:      #F7C9AE;  /* fundo geral */
  --rosa:         #FCE4E2;  /* cards e seções claras */
  --bordo:        #7A3B42;  /* banner, botões, nav */
  --bordo-claro:  #96555C;
  --dourado:      #C9A24B;
  --texto:        #3A2A2C;
  --texto-suave:  #7C6062;
  --branco-rosa:  #F3D9D5;

  --largura: 430px;
  --raio: 20px;
  --raio-p: 16px;
  --nav-altura: 68px;

  --sombra: 0 2px 10px rgba(122, 59, 66, .10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #E9BEA2;
  color: var(--texto);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.app {
  max-width: var(--largura);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--pessego);
  position: relative;
  overflow-x: hidden;
}

[hidden] { display: none !important; }

button { font: inherit; cursor: pointer; }

/* ============================================================
   LOGO
   ============================================================ */

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #8B4A50;
  user-select: none;
}

/**
 * O logo é o SVG oficial, embutido (ver src/Visao/_logo.php). O tamanho é dado
 * pela ALTURA — a largura acompanha sozinha, porque a proporção do desenho
 * (~3,55:1) tem que ser respeitada. Fixar largura aqui distorceria a marca na
 * primeira vez que alguém mudasse a fonte ou o tamanho da tela.
 *
 * A cor vem do `color` de .logo, via fill="currentColor" no SVG.
 */
.logo__svg {
  display: block;
  height: 44px;
  width: auto;
}

.logo--grande .logo__svg { height: 64px; }

/* Telas estreitas: o logo inteiro tem que caber com folga na largura útil. */
@media (max-width: 380px) {
  .logo__svg { height: 36px; }
  .logo--grande .logo__svg { height: 52px; }
}

/* ============================================================
   LOGIN
   ============================================================ */

.view--login {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  padding: 32px 20px;
}

/* `margin: auto` em vez de `align-items: center`: centraliza igual, mas o
   conteúdo continua rolável quando não cabe na tela — que é o caso do celular
   em paisagem, com o teclado aberto. Com align-items:center o topo do card
   fica inalcançável. */
.login {
  width: 100%;
  max-width: 420px;
  margin: auto;
}

.login .logo { margin-bottom: 30px; }

.login__caixa {
  background: var(--rosa);
  border-radius: var(--raio);
  padding: 24px 20px;
  box-shadow: var(--sombra);
}

.login__titulo {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 4px;
  color: var(--bordo);
}

.login__texto {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--texto-suave);
}

.campo { display: block; }
.campo--espaco { margin-top: 14px; }

.campo__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-suave);
  margin-bottom: 6px;
}

.campo__opcional {
  font-weight: 400;
  text-transform: none;
  opacity: .8;
}

.campo__input {
  width: 100%;
  border: 1.5px solid #E9C4BE;
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  color: var(--texto);
}

.campo__input:focus {
  outline: none;
  border-color: var(--bordo);
  box-shadow: 0 0 0 3px rgba(122, 59, 66, .14);
}

/* O código chega por e-mail e é digitado à mão: espaçado e grande para não
   ter dúvida entre 0 e O, e centralizado porque são só 6 caracteres. */
.campo__input--codigo {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .32em;
  text-indent: .32em;
  text-align: center;
  padding: 10px 14px;
}

.alerta {
  margin: 12px 0 0;
  background: #FBE0DC;
  border-left: 3px solid #B3454E;
  color: #8E2F38;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 8px;
}

.lembrar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--texto-suave);
  line-height: 1.35;
  cursor: pointer;
}

.lembrar input {
  margin: 1px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--bordo);
  flex: none;
}

.login__rodape {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

/* A etapa do e-mail tem um atalho só ("Corrigir CPF"); com o space-between ele
   ficaria encostado à esquerda, parecendo desalinhado com o resto do card. */
.login__rodape > .link:only-child {
  margin-left: auto;
  margin-right: auto;
}

/* Não existe cadastro pelo app: a conta nasce no painel. A nota evita que
   quem ainda não é do clube fique tentando entrar e recebendo erro. */
.login__rodape-nota {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--texto-suave);
}

/* Botão de suporte por WhatsApp, embaixo do card de login. Quem não consegue
   entrar não tem outro caminho dentro do app — é a única saída da tela, então
   fica visível nas duas etapas do login, e não escondido num link pequeno. */
.suporte {
  margin-top: 18px;
  text-align: center;
}

.suporte__texto {
  display: block;
  font-size: 12.5px;
  color: var(--texto-suave);
  margin-bottom: 8px;
}

.btn--suporte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: var(--bordo);
  box-shadow: inset 0 0 0 1.5px var(--bordo);
  text-decoration: none;
}

/* O verde é o da marca do WhatsApp, e é ele que faz o botão ser reconhecido
   antes de a pessoa ler o texto. O resto fica na paleta da CUKI. */
.suporte__icone {
  width: 18px;
  height: 18px;
  fill: #25D366;
  flex: none;
}

.link {
  background: none;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bordo);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link[disabled] { opacity: .5; text-decoration: none; }

/* Só aparece em ambiente de desenvolvimento: mostra o código na tela para
   dar para testar o fluxo inteiro sem SMTP configurado. */
.dica-dev {
  margin: 12px 0 0;
  background: #F1E4C8;
  border-left: 3px solid var(--dourado);
  color: #6B5520;
  font-size: 12.5px;
  padding: 9px 12px;
  border-radius: 8px;
}

.dica-dev b {
  font-family: 'Baloo 2', sans-serif;
  font-size: 16px;
  letter-spacing: .1em;
}

/* ============================================================
   BOTÕES
   ============================================================ */

.btn {
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  transition: transform .12s ease, opacity .12s ease;
}

.btn:active { transform: scale(.97); }

.btn--principal { background: var(--bordo); color: var(--dourado); }
.btn--secundario { background: transparent; color: var(--bordo); box-shadow: inset 0 0 0 1.5px var(--bordo); }
.btn--bloco { display: block; width: 100%; margin-top: 18px; }
.btn[disabled] { opacity: .55; cursor: default; }

/* ============================================================
   TOPO / CONTEÚDO
   ============================================================ */

.view--home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.topo {
  padding: 22px 20px 14px;
  text-align: center;
}

.conteudo {
  flex: 1;
  padding: 4px 16px calc(var(--nav-altura) + 28px);
}

/* ============================================================
   CARD DO USUÁRIO
   ============================================================ */

.card-usuario {
  background: var(--rosa);
  border-radius: var(--raio);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--sombra);
}

.avatar {
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--bordo);
  color: #fff;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .02em;
  overflow: hidden;
}

.card-usuario__info { min-width: 0; }

.card-usuario__nome {
  font-weight: 800;
  font-size: 17px;
  margin: 0;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-usuario__nivel {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--texto-suave);
}

.card-usuario__nivel strong { font-weight: 800; }

.card-usuario__pontos {
  margin-left: auto;
  text-align: right;
  flex: none;
}

.card-usuario__rotulo {
  display: block;
  font-size: 11.5px;
  color: var(--texto-suave);
  margin-bottom: 1px;
}

.card-usuario__valor {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--texto);
  line-height: 1.15;
}

.card-usuario__unidade {
  font-size: 15px;
  font-weight: 400;
  color: var(--texto);
}

/* ============================================================
   BANNER
   ============================================================ */

.banner {
  background: var(--bordo);
  border-radius: var(--raio);
  padding: 24px 18px;
  margin-top: 14px;
  text-align: center;
}

.banner__titulo {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  color: var(--dourado);
  margin: 0;
}

.banner__sub {
  margin: 8px 0 0;
  color: #fff;
  font-size: 13.5px;
}

.banner__sub strong { font-weight: 800; }

/* ============================================================
   GRADE DE PRÊMIOS
   ============================================================ */

/* 3 colunas é o mockup. As variações por largura estão todas juntas na seção
   RESPONSIVIDADE, no fim do arquivo. */
.grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.premio {
  position: relative;
  background: var(--rosa);
  border-radius: 18px;
  padding: 16px 10px 14px;
  min-height: 152px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: var(--sombra);
}

.premio__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 2px;
}

.premio__nome {
  font-weight: 800;
  font-size: 15px;
  text-align: center;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.premio__custo {
  font-size: 12.5px;
  color: var(--texto);
}

.premio__btn {
  margin-top: auto;
  background: var(--bordo);
  color: var(--dourado);
  border: 0;
  border-radius: 999px;
  padding: 7px 15px;
  font-weight: 700;
  font-size: 12.5px;
  transition: transform .12s ease;
}

.premio__btn:active { transform: scale(.95); }

.premio__btn.is-desativado {
  background: var(--bordo);
  opacity: .38;
  cursor: not-allowed;
}

.premio__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--bordo);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
}

.premio.is-esgotado .premio__nome,
.premio.is-esgotado .premio__custo,
.premio.is-esgotado .premio__img { opacity: .55; }

/* ============================================================
   TELAS (Início / Pontos / Perfil)
   ============================================================
   As quatro seções da nav são telas de verdade, não modais: dá para rolar,
   dá para voltar e o conteúdo não fica preso numa caixa de 340px. */

.tela__titulo {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--bordo);
  margin: 6px 0 14px;
}

.secao { margin-top: 22px; }

.secao__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.secao__titulo {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--bordo);
  margin: 0;
}

.secao__contagem { font-size: 12px; color: var(--texto-suave); }

/* ---------- Início: saldo em destaque ---------- */

.destaque {
  background: var(--rosa);
  border-radius: var(--raio);
  padding: 20px 20px 18px;
  box-shadow: var(--sombra);
  text-align: center;
}

.destaque__ola {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--texto);
}

.destaque__rotulo {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.destaque__valor {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.05;
  color: var(--bordo);
  margin: 2px 0 0;
}

.destaque__unidade { font-size: 20px; font-weight: 400; color: var(--texto); }
.destaque__nivel { margin: 6px 0 0; font-size: 13.5px; color: var(--texto-suave); }
.destaque__nivel strong { font-weight: 800; }

/* ---------- Início: progresso de nível ---------- */

.progresso {
  background: var(--rosa);
  border-radius: var(--raio-p);
  padding: 14px 16px;
  margin-top: 12px;
  box-shadow: var(--sombra);
}

.progresso__texto { margin: 0 0 10px; font-size: 13px; color: var(--texto-suave); }
.progresso__texto strong { font-weight: 800; color: var(--texto); }

.progresso__barra {
  height: 10px;
  border-radius: 999px;
  background: #EFD5CE;
  overflow: hidden;
}

.progresso__preenchida {
  height: 100%;
  border-radius: 999px;
  background: var(--dourado);
  transition: width .5s ease;
}

.progresso__escala {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 11px;
  color: var(--texto-suave);
}

@media (prefers-reduced-motion: reduce) {
  .progresso__preenchida { transition: none; }
}

/* O banner do Início ganha um botão; o da tela de Prêmios continua estático. */
.banner--acao { margin-top: 18px; }

.btn--claro {
  background: var(--rosa);
  color: var(--bordo);
  margin-top: 14px;
}

/* ---------- Pontos: resumo ---------- */

.resumo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.resumo__cartao {
  background: var(--rosa);
  border-radius: var(--raio-p);
  padding: 12px 10px;
  text-align: center;
  box-shadow: var(--sombra);
}

.resumo__rotulo {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.resumo__valor {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--bordo);
  margin: 3px 0 0;
  line-height: 1.1;
}

.resumo__unidade { font-size: 11px; font-weight: 400; color: var(--texto-suave); display: block; }

/* ---------- Extrato ---------- */

.extrato { display: flex; flex-direction: column; gap: 8px; }

.extrato__item {
  background: var(--rosa);
  border-radius: var(--raio-p);
  padding: 12px 14px;
  box-shadow: var(--sombra);
}

.extrato__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.extrato__nome {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.extrato__pontos {
  flex: none;
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--bordo);
  white-space: nowrap;
}

/* Cancelado devolveu os Cukis: o sinal vira "+" e a cor sai do vermelho. */
.extrato__pontos.is-devolvido { color: #2F7D5B; }

.extrato__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.extrato__data { font-size: 12px; color: var(--texto-suave); }

.extrato__nota {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--texto-suave);
  border-top: 1px dashed #E9C4BE;
  padding-top: 7px;
}

.extrato__item.is-cancelado .extrato__nome { color: var(--texto-suave); }

.extrato .btn--bloco { margin-top: 6px; }

/* ---------- Etiquetas de status ---------- */

.etiqueta {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
}

.etiqueta--ok        { background: #DFF0E7; color: #1E5B40; }
.etiqueta--espera    { background: #FBEEDC; color: #8A5A16; }
.etiqueta--cancelado { background: #F3E3E1; color: #8E6A6E; }
.etiqueta--neutro    { background: #EEE0DC; color: var(--texto-suave); }
.etiqueta--nivel     { color: #fff; }

/* ---------- Perfil ---------- */

.perfil__cartao {
  background: var(--rosa);
  border-radius: var(--raio);
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow: var(--sombra);
}

.avatar--grande {
  width: 84px;
  height: 84px;
  font-size: 28px;
  margin: 0 auto 12px;
}

.perfil__nome {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--texto);
  margin: 0 0 8px;
}

.dados {
  background: var(--rosa);
  border-radius: var(--raio-p);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.dados__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  border-bottom: 1px solid #EFD5CE;
  font-size: 13.5px;
}

.dados__linha:last-child { border-bottom: 0; }
.dados__rotulo { color: var(--texto-suave); flex: none; }

.dados__valor {
  font-weight: 700;
  color: var(--texto);
  text-align: right;
  overflow-wrap: anywhere;
}

.secao .estado__texto { margin-top: 12px; }

.perfil__acoes { margin-top: 22px; }

/* ============================================================
   ESTADOS (vazio / erro / skeleton)
   ============================================================ */

.estado {
  background: var(--rosa);
  border-radius: var(--raio);
  padding: 28px 20px;
  margin-top: 18px;
  text-align: center;
  box-shadow: var(--sombra);
}

.estado__titulo {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--bordo);
  margin: 0 0 4px;
}

.estado__texto {
  margin: 0;
  font-size: 13.5px;
  color: var(--texto-suave);
}

.estado .btn { margin-top: 16px; }

.sk {
  background: linear-gradient(100deg, #F1D2C8 20%, #FBE6DE 40%, #F1D2C8 60%);
  background-size: 300% 100%;
  animation: brilho 1.4s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes brilho {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

.sk--card {
  height: 86px;
  border-radius: var(--raio);
}

.sk--premio {
  height: 152px;
  border-radius: 18px;
}

/* Linha do extrato enquanto carrega. */
.sk--linha {
  height: 64px;
  border-radius: var(--raio-p);
  margin-bottom: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
  .btn:active, .premio__btn:active { transform: none; }
}

/* ============================================================
   NAVEGAÇÃO INFERIOR
   ============================================================ */

.nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--largura);
  z-index: 20;
  background: var(--bordo);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 9px 0 calc(9px + env(safe-area-inset-bottom, 0px));
}

.nav__item {
  background: none;
  border: 0;
  padding: 2px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--branco-rosa);
  font-size: 11px;
  font-weight: 600;
  position: relative;
}

.nav__icone {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav__item.is-ativo { color: #fff; }

.nav__item.is-ativo::before {
  content: "";
  position: absolute;
  top: -7px;
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background: var(--dourado);
}

/* ============================================================
   MODAL
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 22px;
}

.modal__fundo {
  position: absolute;
  inset: 0;
  background: rgba(58, 42, 44, .55);
}

.modal__caixa {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: #FFF4F0;
  border-radius: var(--raio);
  padding: 22px 20px 18px;
  box-shadow: 0 18px 50px rgba(58, 42, 44, .35);
  animation: sobe .18s ease-out;
}

@keyframes sobe {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .modal__caixa { animation: none; }
}

.modal__titulo {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--bordo);
  margin: 0 0 8px;
}

.modal__corpo {
  font-size: 14px;
  color: var(--texto);
}

.modal__corpo p { margin: 0 0 8px; }
.modal__corpo p:last-child { margin-bottom: 0; }
.modal__corpo strong { font-weight: 800; }

.modal__saldo {
  margin-top: 14px;
  background: var(--rosa);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  text-align: center;
}

.modal__saldo b {
  font-family: 'Baloo 2', sans-serif;
  font-size: 17px;
}

.modal__erro {
  margin-top: 14px;
  background: #FBE0DC;
  border-left: 3px solid #B3454E;
  color: #8E2F38;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 8px;
}

.modal__acoes {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.modal__acoes .btn { flex: 1; }

/* ============================================================
   TOAST
   ============================================================ */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-altura) + 18px);
  transform: translateX(-50%);
  z-index: 70;
  max-width: min(340px, calc(100vw - 40px));
  background: var(--bordo);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 11px 16px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(58, 42, 44, .3);
  animation: sobe .18s ease-out;
}

/* ============================================================
   RESPONSIVIDADE
   ============================================================
   Toda a variação por largura mora aqui, de propósito: dá para ler a história
   inteira num lugar só — e dá para apagar a partir de 560px e voltar ao
   comportamento de app de celular, se o cliente preferir assim.

   Até 559px NADA muda em relação ao mockup aprovado.

     ~320–359   telas estreitas: 2 colunas de prêmio
     360–559    o mockup (430px, 3 colunas, nav de borda a borda)
     560–899    tablet em pé: container maior, 4 colunas, nav vira dock
     900–1199   tablet deitado / notebook: 5 colunas
     1200+      desktop: 6 colunas, container de 1120px
   ============================================================ */

/* ---------- telas muito estreitas ---------- */

@media (max-width: 359px) {
  .grade { grid-template-columns: repeat(2, 1fr); }
  .card-usuario__valor { font-size: 20px; }
  .conteudo { padding-left: 12px; padding-right: 12px; }
}

/* ---------- a partir de tablet em pé ---------- */

@media (min-width: 560px) {
  :root {
    --largura: 680px;
    --nav-altura: 62px;
  }

  .app { box-shadow: 0 0 40px rgba(122, 59, 66, .18); }

  /* Na tela de login não existe conteúdo para preencher um painel de 1120px:
     ele encolhe até a largura do card. Navegador sem `:has()` mostra o painel
     largo — continua correto, só menos elegante. */
  .app:has(#view-login:not([hidden])) { max-width: 520px; }

  .conteudo {
    padding: 8px 24px calc(var(--nav-altura) + 44px);
  }

  .grade {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 22px;
  }

  .premio { min-height: 172px; padding: 18px 12px 16px; }
  .banner { padding: 30px 24px; }
  .banner__titulo { font-size: 30px; }
  .card-usuario { padding: 16px 20px; }

  /* A nav deixa de ser uma barra colada na borda e vira um dock flutuante.
     Uma barra de 680px com quatro ícones espalhados parece um erro de
     layout; o dock mantém os itens juntos e lê como escolha. */
  .nav {
    bottom: 18px;
    max-width: 460px;
    border-radius: 999px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 12px 32px rgba(58, 42, 44, .28);
  }

  .nav__item {
    padding: 6px 4px;
    border-radius: 999px;
  }

  /* O tracinho dourado no topo seria cortado pela borda arredondada do dock;
     no lugar dele, o item ativo ganha fundo. */
  .nav__item.is-ativo::before { display: none; }

  .nav__item.is-ativo {
    background: rgba(255, 255, 255, .16);
  }

  .toast { bottom: calc(var(--nav-altura) + 34px); }
  .modal__caixa { max-width: 400px; }

  /* Telas internas ganham ar sem esticar a linha de texto. */
  .destaque { padding: 26px 24px 22px; }
  .destaque__valor { font-size: 52px; }
  .tela__titulo { font-size: 25px; }

  /* Numa tela larga, uma coluna de extrato deixa muito espaço vazio à direita
     e obriga a rolar mais do que o necessário. */
  .extrato { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .extrato .btn--bloco { grid-column: 1 / -1; }

  .dados { max-width: 560px; }
  .perfil__cartao { padding: 30px 24px 24px; }
}

/* ---------- notebook ---------- */

@media (min-width: 900px) {
  :root { --largura: 900px; }

  .topo { padding: 26px 24px 16px; }
  .grade { grid-template-columns: repeat(5, 1fr); }
  .premio__nome { font-size: 15.5px; }
}

/* ---------- desktop ---------- */

@media (min-width: 1200px) {
  :root { --largura: 1120px; }

  .conteudo { padding: 10px 32px calc(var(--nav-altura) + 48px); }
  .grade { grid-template-columns: repeat(6, 1fr); gap: 18px; }

  .card-usuario__nome { font-size: 18px; }
  .card-usuario__valor { font-size: 24px; }
  .banner__titulo { font-size: 34px; }
  .banner__sub { font-size: 15px; }

  .extrato { grid-template-columns: repeat(3, 1fr); }
  .resumo { max-width: 720px; }
}

/* ---------- telas baixas (celular deitado) ---------- */
/* Com o teclado aberto sobra pouca altura: o banner some para o card do
   usuário e os prêmios continuarem visíveis. */

@media (max-height: 460px) and (orientation: landscape) {
  .banner { padding: 14px 18px; margin-top: 10px; }
  .banner__titulo { font-size: 20px; }
  .banner__sub { display: none; }
  .topo { padding: 12px 20px 8px; }
}