/*
  Pagina de resgate da FF Private Project. Sem dependencia externa: fonte em fonte/, arte em artes/ (fundo.webp e procedural, o gerador
  esta em relatorios/site-codigos-128/gera-fundo.py). A CSP do servidor proibe style="" e <style>: tudo mora aqui.
  Medidas tomadas com regua: amarelo FFD543, regua FCA316 de 3 px com dentes de 2x9 a cada 50 px, corte de 47% no topo a 27% na base.
*/
/* Metropolis (licenca livre, fonte/LICENSE-Metropolis.txt). Nada de fonte com copyright de terceiros: a que esteve aqui traz o copyright dela dentro do arquivo (MEDIDO, 02/11). */
@font-face { font-family: "Metropolis"; font-weight: 400 500; font-display: swap; src: url(fonte/metropolis-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: "Metropolis"; font-weight: 600 700; font-display: swap; src: url(fonte/metropolis-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: "Metropolis"; font-weight: 800 900; font-display: swap; src: url(fonte/metropolis-latin-800-normal.woff2) format('woff2'); }

:root {
  --amarelo: #ffd543;
  --regua: #fca316;
  --laranja: #ff7200;
  --laranja-janela: #ffa618;
  --destaque: #ff3600;
  --cinza: #736357;
  --borda-campo: #ffcd1e;
  --tinta: #010101;
  --branco: #ffffff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: #000;
  color: var(--tinta);
  font: 400 16px/1.22 "Metropolis", "Segoe UI", Roboto, Arial, sans-serif;
}
h1, h2, p, ol, ul { margin: 0; padding: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.faixa-demo {
  position: fixed;
  z-index: 8;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .78);
  color: var(--amarelo);
  font-size: 11px;
  font-weight: 700;
}

/* ═══ a capa ═══ */
.pagina { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.capa {
  position: relative;
  flex: 1 0 auto;
  min-height: calc(100vh - 110px);
  min-height: calc(100dvh - 110px);
  overflow: hidden;
  background: var(--amarelo);
}
.capa-fundo {
  position: absolute;
  inset: 0 50% 0 0;
  background: #2a1274 url(artes/fundo.webp) no-repeat left top / cover;
  clip-path: polygon(0 0, 94% 0, 54.2% 100%, 0 100%);
}
/* a arte vem cortada numa borda: espelhada, o corte fica na esquerda e some no fundo de luz, longe do amarelo */
.capa-heroi {
  position: absolute;
  bottom: 0;
  left: 29.600%;
  width: auto;
  height: min(90%, 45.500vw);
  max-width: none;
  transform: translateX(-50%) scaleX(-1);
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 6%), linear-gradient(to right, transparent 0, #000 3%), linear-gradient(to bottom, transparent 0, #000 2%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to left, transparent 0, #000 6%), linear-gradient(to right, transparent 0, #000 3%), linear-gradient(to bottom, transparent 0, #000 2%);
  mask-composite: intersect;
}
.capa-sombra { display: none; }
.regua {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto 0;
  height: 9px;
  background:
    linear-gradient(var(--regua), var(--regua)) 0 0 / 100% 3px no-repeat,
    repeating-linear-gradient(to right, transparent 0 40px, var(--regua) 40px 42px, transparent 42px 50px);
}

/* topo: logo a 20vw e botao branco no canto */
.topo { position: relative; z-index: 4; height: 78px; }
.marca {
  position: absolute;
  top: 14px;
  left: 20vw;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--branco);
}
.logo { display: block; flex: none; width: 48px; height: 50px; }
.marca-nome {
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.02;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(20, 6, 70, .7);
}
.botao-recarga {
  position: absolute;
  top: 58px;
  right: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 142px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--branco);
  color: #000;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
/* hover dos botoes como no de referencia (MEDIDO 02/11): escurece 10% em 100 ms ease-in-out na entrada; a transicao so
   existe no :hover, entao a saida e seca, sem animar */
.botao-recarga:hover { filter: brightness(.9); transition: filter .1s ease-in-out; }

/* metade direita: comeca a 45vw */
.direita { position: relative; z-index: 2; margin-left: 45vw; padding-bottom: 28px; }
.coluna { width: 100%; }
.tela { margin-left: 4.500vw; margin-right: 8vw; }
.cabeca { max-width: 550px; }
.titulo { font-size: 28px; font-weight: 700; line-height: 1.22; }
.chamada { font-size: 18px; line-height: 1.22; }
/* caixa alta condensada, abaixo do botao do canto: a largura de layout compensa o aperto para a linha caber inteira */
.titulo-grande {
  width: calc(100% / .86);
  margin-top: 26px;
  font-size: clamp(30px, 2.900vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
  transform: scaleX(.86);
  transform-origin: 0 50%;
}

/* botoes redondos de entrada */
.entradas { display: flex; justify-content: center; gap: 10px; margin-top: 35px; }
.redondo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 72px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta);
}
.redondo-bola {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--branco);
  /* o icone de entrada do de referencia (MEDIDO): 80% de brilho em 300 ms na curva easeOutSine, na ida e na volta */
  transition: filter .3s cubic-bezier(.39, .575, .565, 1);
}
.redondo-bola svg { width: 30px; height: 30px; fill: #111; }
.redondo:hover .redondo-bola { filter: brightness(.8); }
.redondo[aria-selected="true"] .redondo-bola { box-shadow: 0 0 0 3px var(--laranja); }
.redondo[aria-selected="true"] .redondo-bola svg { fill: var(--laranja); }
.redondo-nome { font-size: 14px; font-weight: 700; line-height: 1.15; }

/* campos */
.formulario { display: flex; flex-direction: column; width: 100%; max-width: 400px; margin: 18px auto 0; }
label { margin-bottom: 4px; font-size: 14px; font-weight: 700; }
input {
  width: 100%;
  height: 38px;
  margin: 0 0 10px;
  padding: 5px 10px;
  border: 2px solid var(--borda-campo);
  border-radius: 5px;
  background: var(--branco);
  color: #000;
  font-size: 18px;
  font-weight: 500;
}
.dica { margin: -4px 0 10px; font-size: 14px; }
.dica-live { font-weight: 700; }
input:focus-visible { border-color: var(--laranja); outline: 0; }
button:focus-visible, a:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 5px 16px;
  border: 0;
  border-radius: 5px;
  color: var(--branco);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}
.botao:hover:not(:disabled) { filter: brightness(.9); transition: filter .1s ease-in-out; }
.botao-primario { background: var(--laranja); }
.botao-cinza { background: var(--cinza); }
.botao:disabled { filter: grayscale(.9); cursor: not-allowed; }
.botao[aria-busy="true"] { opacity: .75; cursor: progress; }

/* o codigo: caixas separadas por traco */
.form-codigo { max-width: 500px; margin-top: 22px; }
.caixas { display: flex; align-items: center; gap: 8px; }
.caixa {
  flex: 1 1 0;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 5px 2px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.caixa::placeholder { color: #b9b9b9; letter-spacing: .06em; }
.traco { flex: none; font-size: 18px; font-weight: 500; }
.botao-confirmar { min-width: 150px; min-height: 40px; margin-top: 18px; }

.conta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; max-width: 700px; margin-top: 22px; }
.conta-dados { display: flex; flex-direction: column; min-width: 0; margin-right: 8px; font-size: 18px; }
.conta-nome { overflow-wrap: anywhere; }
.conta-nome strong { font-weight: 700; }
.conta .botao { min-height: 32px; padding: 4px 12px; font-size: 14px; }
.confere { max-width: 620px; margin-top: 8px; font-size: 14px; color: #7a1a00; font-weight: 500; }

/* aviso importante: a coluna de 700 com 5vw de recuo */
.aviso {
  max-width: 700px;
  margin-top: calc(10vw - 26px); /* os rotulos dos botoes redondos gastam 26 px: o texto fica na altura medida */
  padding: 15px 20px 15px 5vw;
  color: var(--tinta);
}
.tela-logada .aviso { margin-top: 4vw; }
.com-campo .aviso { margin-top: 18px; }
.aviso h2 { font-size: 16px; font-weight: 700; line-height: 1.2; }
.aviso ol { list-style: none; counter-reset: aviso; }
.aviso li { counter-increment: aviso; font-size: 18px; line-height: 22px; }
.aviso li::before { content: counter(aviso) ". "; }
.aviso a { color: inherit; font-weight: 500; overflow-wrap: anywhere; }
.destaque { color: var(--destaque); }

/* ═══ rodape ═══ */
.rodape {
  position: relative;
  z-index: 5;
  flex: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  padding: 30px;
  background: #000;
  color: #8c8c8c;
  font-size: 16px;
}
.rodape-icone {
  flex: none;
  width: 50px;
  height: 50px;
  padding: 6px;
  border-radius: 3px;
  background: var(--branco);
}
.rodape-icone svg { display: block; width: 100%; height: 100%; }
.rodape-texto { min-width: 0; padding-top: 6px; line-height: 19px; }
.rodape-marca { color: #c0c0c0; }

.idioma { position: relative; display: inline-flex; margin-top: 10px; }
.idioma-botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -8px -6px;
  padding: 8px 6px;
  border: 0;
  background: none;
  color: #c0c0c0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  transition: color .2s ease; /* MEDIDO no de referencia: cinza para branco em 200 ms ease */
}
.idioma-botao:hover, .idioma-botao[aria-expanded="true"] { color: var(--branco); }
.idioma-botao:focus-visible { outline: 2px solid var(--branco); outline-offset: 0; }
.idioma-botao svg { flex: none; }
.idioma-lista {
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  margin: 0 0 10px;
  padding: 12px 8px;
  list-style: none;
  border-radius: 8px;
  background: var(--branco);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  font-size: 16px;
  line-height: 1;
  /* a lista do de referencia (MEDIDO): aparece e some subindo 4 px, 200 ms ease; com mouse abre no hover e fecha 200 ms
     depois que o mouse sai (resgate.js) */
  transition: opacity .2s ease, transform .2s ease;
}
.idioma-lista.fora { opacity: 0; transform: translateY(4px); pointer-events: none; }
.idioma-lista.saindo[hidden] { display: flex !important; }
.idioma-lista button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #6c6c6c;
  font-size: 16px;
  text-align: left;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.idioma-lista button:hover { color: #000; background: #f1f1f1; }
.idioma-lista button[aria-selected="true"] { color: #000; font-weight: 700; }

/* ═══ a janela preta com a faixa laranja ═══ */
.janela { position: fixed; z-index: 6; inset: 0; display: grid; place-items: center; padding: 12px; color: var(--branco); }
/* entra e sai como a do de referencia (MEDIDO 02/11): a janela inteira, com o fundo escuro, vem 60 px de cima enquanto
   aparece, 300 ms ease-in-out, e faz o caminho de volta ao fechar. La anima o top; aqui o transform faz o mesmo desenho sem
   refazer o layout a cada quadro no celular. "fora" e o ponto de partida e de chegada; "saindo" segura na tela a que ja
   fechou (hidden) ate a transicao acabar, sem receber toque nem foco (resgate.js) */
.janela { transition: opacity .3s ease-in-out, transform .3s ease-in-out; }
.janela.fora { opacity: 0; transform: translateY(-60px); pointer-events: none; }
.janela.saindo[hidden] { display: grid !important; }
.janela-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.janela-caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 580px;
  min-height: 355px;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  padding: 34px 28px 22px 64px;
  background: rgba(14, 12, 9, .9);
  /* a caixa do de referencia tem "all .3s ease-in-out": quando a largura da tela cruza um degrau, ela muda de tamanho devagar */
  transition: max-width .3s ease-in-out, min-height .3s ease-in-out, padding .3s ease-in-out;
}
.janela-caixa::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 16px;
  background: linear-gradient(180deg, #ffca33, #ff8914);
}
.janela-titulo { color: var(--laranja-janela); font-size: 40px; font-weight: 700; line-height: 1.1; }
.janela-sub { margin-top: 2px; color: var(--laranja-janela); font-size: 22px; font-weight: 500; line-height: 1.2; }
.janela-corpo {
  flex: 1 1 auto;
  min-height: 0;
  margin: 14px 0 12px;
  overflow: auto;
  font-size: 18px;
  line-height: 1.32;
  overflow-wrap: anywhere;
}
.janela-corpo-alto { min-height: 180px; }
.janela-pe { flex: none; display: flex; justify-content: flex-end; }
.botao-janela {
  width: 110px;
  min-height: 40px;
  border: 0;
  border-radius: 2px;
  background: var(--laranja-janela);
  color: #000;
  font-size: 18px;
  font-weight: 700;
}
.botao-janela:hover { filter: brightness(.9); transition: filter .1s ease-in-out; }
.janela button:focus-visible { outline-color: var(--branco); }

/* ═══ carregando: a cobertura do de referencia durante cada pedido (MEDIDO): tela toda a 80% de preto, por cima da janela,
   sem transicao para entrar ou sair; no meio, 12 raios cinza (237 no raio da frente, 18 a menos a cada raio no sentido do
   relogio) numa caixa de 80 px, raio de 11,2 a 20,8 px e 4,8 px de espessura, dando uma volta em 900 ms aos saltos de 30
   graus. Desenhado aqui, em CSS: nada da imagem deles ═══ */
.carregando { position: fixed; z-index: 7; inset: 0; }
.carregando-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .8); }
.carregando-roda {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  animation: carregando-gira .9s steps(12, end) infinite;
}
.carregando-roda i {
  position: absolute;
  top: 19.200px;
  left: 37.600px;
  width: 4.800px;
  height: 9.600px;
  border-radius: 2.400px;
  background: #ededee;
  transform-origin: 2.400px 20.800px;
}
.carregando-roda i:nth-child(2) { transform: rotate(30deg); background: #dcdcdd; }
.carregando-roda i:nth-child(3) { transform: rotate(60deg); background: #cacacc; }
.carregando-roda i:nth-child(4) { transform: rotate(90deg); background: #b8b9ba; }
.carregando-roda i:nth-child(5) { transform: rotate(120deg); background: #a6a6a9; }
.carregando-roda i:nth-child(6) { transform: rotate(150deg); background: #949497; }
.carregando-roda i:nth-child(7) { transform: rotate(180deg); background: #828386; }
.carregando-roda i:nth-child(8) { transform: rotate(210deg); background: #707074; }
.carregando-roda i:nth-child(9) { transform: rotate(240deg); background: #5e5f63; }
.carregando-roda i:nth-child(10) { transform: rotate(270deg); background: #4c4d52; }
.carregando-roda i:nth-child(11) { transform: rotate(300deg); background: #3b3b41; }
.carregando-roda i:nth-child(12) { transform: rotate(330deg); background: #28292f; }
@keyframes carregando-gira { to { transform: rotate(360deg); } }

/* a frase do premio: a lista corre dentro do texto */
.premio ul, .premio li { display: inline; }
.premio ul { list-style: none; }
.premio strong { font-weight: 700; }

.historico-lista { list-style: none; }
.historico-lista li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  font-size: 15px;
}
.historico-lista li:last-child { border-bottom: 0; }
.historico-lista .h-itens { font-weight: 500; }
.historico-lista time { color: #cfcfcf; white-space: nowrap; font-size: 14px; }
.historico-lista code { grid-column: 1 / -1; color: var(--laranja-janela); font: 500 13px ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.historico-nota { margin-top: 8px; font-size: 14px; color: #dcdcdc; }

/* ═══ meus codigos (influenciador): o aviso da live em destaque, um codigo por linha, escondido ate o Mostrar ═══ */
.meus-aviso {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-left: 4px solid var(--laranja-janela);
  background: rgba(255, 166, 24, .14);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}
.meus-login { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.meus-login .botao { align-self: flex-start; min-height: 40px; padding: 6px 14px; font-size: 14px; color: #000; }
.meus-vincular { color: #dcdcdc; }
.meus-erro { margin-bottom: 8px; color: #ffb199; font-size: 14px; font-weight: 500; }
.meus-ok { margin-bottom: 8px; color: #9be59b; font-size: 14px; font-weight: 500; }
.meus-lote + .meus-lote { margin-top: 14px; }
.meus-lote-nome { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.2; }
.meus-lote-info { margin-top: 2px; color: #cfcfcf; font-size: 14px; }
.meus-lista { list-style: none; margin-top: 6px; }
.meus-codigo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "n valor acoes" "n estado acoes";
  align-items: center;
  gap: 0 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  font-size: 15px;
}
.meus-codigo:last-child { border-bottom: 0; }
.meus-n { grid-area: n; min-width: 76px; color: #cfcfcf; font-size: 13px; white-space: nowrap; }
.meus-valor { grid-area: valor; color: #9b9b9b; font: 600 16px ui-monospace, Consolas, monospace; letter-spacing: .04em; overflow-wrap: anywhere; }
.meus-valor-aberto { color: var(--laranja-janela); font-size: 18px; user-select: all; -webkit-user-select: all; }
.meus-estado { grid-area: estado; color: #cfcfcf; font-size: 13px; }
.meus-codigo[data-estado="disponivel"] .meus-estado { color: #9be59b; }
.meus-acoes { grid-area: acoes; display: flex; gap: 6px; }
.meus-botao {
  min-width: 84px;
  min-height: 36px;
  padding: 4px 10px;
  border: 0;
  border-radius: 2px;
  background: var(--laranja-janela);
  color: #000;
  font-size: 13px;
  font-weight: 700;
}
.meus-botao-esconder { min-width: 0; background: #5b5b5b; color: var(--branco); }
.meus-botao:hover { filter: brightness(.9); }

/* ═══ larguras menores: o botao do canto chega para a borda como na regua ═══ */
@media (max-width: 1919px) {
  /* a Metropolis e mais larga: o titulo da entrada quebra antes do botao de recarga (o titulo da tela logada ja nasce abaixo dele). 50,5vw = a coluna menos a margem; 282 = 120 + 142 + 20 */
  .cabeca { max-width: min(550px, calc(50.5vw - 282px)); }
  /* o titulo cabe em 1 linha no espaco ate o botao (achado da revisao: de 1280 a 1366 quebrava em 2 e descia). MEDIDO no navegador: a frase em
     portugues, a mais longa dos 3 idiomas, tem 15,3 vezes o tamanho da fonte em Metropolis 700; 15,6 deixa folga. Nunca passa de 28px. */
  .titulo { font-size: min(28px, calc((50.5vw - 282px) / 15.6)); }
  .botao-recarga { right: 120px; }
}
@media (max-width: 1365px) {
  .botao-recarga { right: 16px; }
  .cabeca { max-width: min(550px, calc(50.5vw - 178px)); }
  .titulo { font-size: min(28px, calc((50.5vw - 178px) / 15.6)); }
}
@media (max-width: 1199px) {
  .cabeca { max-width: 550px; }
  .titulo { font-size: 28px; }
  .botao-recarga { min-width: 101px; height: 32px; border-radius: 4px; top: 22px; }
  .marca { left: 12vw; }
}
/* tablet e celular deitado: a mesma divisao, menos ar */
@media (max-width: 991px) {
  .capa { min-height: 0; }
  .direita { margin-left: 44vw; padding-top: 8px; }
  .tela { margin-left: 3vw; margin-right: 16px; }
  .marca { left: 16px; }
  .marca-nome { font-size: 16px; }
  .logo { width: 38px; height: 40px; }
  .titulo { font-size: 26px; }
  .titulo-grande { margin-top: 0; font-size: 28px; }
  .capa-heroi { left: 24%; height: min(90%, 60vw); }
  .conta-dados { flex: 1 1 100%; margin: 0; }
  .aviso, .tela-logada .aviso, .com-campo .aviso { margin-top: 28px; padding: 15px 16px 15px 3vw; }
  .aviso li { font-size: 16px; line-height: 20px; }
  .rodape { font-size: 14px; padding: 18px 16px; }
  .rodape-texto { line-height: 17px; }
}

/* ═══ celular: arte escurecida por tras, texto branco no meio, aviso em cartao claro ═══ */
@media (max-width: 666px) {
  .pagina { min-height: 100dvh; }
  .capa { flex: none; }
  .capa-fundo { inset: 0; clip-path: polygon(0 0, 72% 0, 38% 100%, 0 100%); background-position: center top; }
  .capa-heroi { left: 50%; height: auto; width: 128%; top: 26px; bottom: auto; }
  .capa-sombra { display: block; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .6); }
  .regua {
    height: 5px;
    background:
      linear-gradient(var(--regua), var(--regua)) 0 0 / 100% 2px no-repeat,
      repeating-linear-gradient(to right, transparent 0 5px, var(--regua) 5px 6.500px, transparent 6.500px 26.667px);
  }
  .topo { height: 74px; }
  .marca { top: 12px; left: 10px; gap: 7px; }
  .logo { width: 34px; height: 36px; }
  .marca-nome { font-size: 15px; }
  .botao-recarga { top: 18px; right: 10px; min-width: 101px; height: 27px; padding: 0 8px; }
  .botao-recarga svg { width: 18px; height: 16px; }
  .direita { margin: 0; padding: 18px 10px 0; color: var(--branco); }
  .tela { margin: 0; text-align: center; }
  .cabeca { max-width: none; }
  .titulo, .titulo-grande { color: var(--branco); }
  .titulo { font-size: 28px; }
  .titulo-grande { width: 116.280%; margin: 0 0 0 -8.140%; font-size: 30px; transform-origin: 50% 50%; }
  .chamada { margin-top: 2px; }
  .entradas { margin-top: 20px; }
  .redondo { min-width: 76px; color: var(--branco); }
  .redondo-bola { width: 48px; height: 48px; }
  .redondo-bola svg { width: 25px; height: 25px; }
  .formulario { max-width: none; margin-top: 16px; text-align: left; }
  label { color: var(--branco); }
  input { height: 44px; font-size: 18px; }
  .dica { color: #f0f0f0; }
  .form-codigo { margin: 18px auto 0; }
  .caixas { gap: 5px; }
  .caixa { height: 46px; padding: 5px 0; font-size: 17px; letter-spacing: .02em; }
  .caixas-4 .caixa { font-size: 15px; letter-spacing: 0; }
  .caixas-4 { gap: 3px; }
  .traco { color: var(--branco); }
  .botao { min-height: 44px; }
  .botao-confirmar { width: 100%; min-height: 46px; }
  .conta { justify-content: center; margin-top: 16px; text-align: left; }
  .conta-dados { flex: 1 1 100%; margin: 0; text-align: center; font-size: 16px; color: var(--branco); }
  .conta .botao { flex: 1 1 0; min-height: 40px; }
  .confere { color: #ffd543; text-align: center; }
  .aviso, .tela-logada .aviso, .com-campo .aviso {
    margin: 20px 0 18px;
    padding: 10px 15px;
    border-radius: 5px;
    background: hsla(0, 0%, 100%, .8);
  }
  .aviso li { font-size: 14px; line-height: 18px; }
  .aviso h2 { font-size: 16px; }
  .rodape {
    flex: 1 0 auto;
    justify-content: flex-start;
    padding: 12px 15px 22px;
    color: var(--branco);
    font-size: 12px;
    gap: 8px;
  }
  .rodape-icone { width: 27px; height: 27px; padding: 3px; }
  .rodape-texto { padding-top: 0; line-height: 15px; }
  .rodape-marca { color: var(--branco); }
  .idioma { margin-top: 18px; }
  .idioma-botao { font-size: 14px; }
  /* a janela: mais apertada, sem cortar nada */
  .janela-caixa { min-height: 0; padding: 18px 16px 14px 30px; }
  .janela-caixa::before { width: 8px; }
  .janela-titulo { font-size: 26px; }
  .janela-sub { font-size: 17px; }
  .janela-corpo { margin: 10px 0; font-size: 15px; }
  .janela-corpo-alto { min-height: 120px; }
  .botao-janela { width: 88px; min-height: 42px; font-size: 16px; }
  /* meus codigos no celular: o botao ganha a linha toda; cada codigo em duas linhas, os botoes embaixo com area de toque de 44 px */
  .conta .botao-meus { flex: 1 1 100%; }
  .meus-aviso { font-size: 14px; }
  .meus-login .botao { align-self: stretch; min-height: 44px; }
  .meus-codigo { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n estado" "valor valor" "acoes acoes"; gap: 4px 8px; }
  .meus-n { min-width: 0; }
  .meus-estado { text-align: right; }
  .meus-valor { font-size: 17px; }
  .meus-valor-aberto { font-size: 19px; }
  .meus-acoes { gap: 8px; }
  .meus-botao { flex: 1 1 0; min-height: 44px; font-size: 14px; }
}

/* movimento reduzido: nada desliza nem esmaece; a janela e a lista abrem e fecham na hora (resgate.js le a duracao 0) e a roda
   do carregando fica parada, ainda dizendo que esta carregando */
@media (prefers-reduced-motion: reduce) {
  .redondo-bola, .botao:hover:not(:disabled), .botao-recarga:hover, .botao-janela:hover, .idioma-botao, .idioma-lista,
  .idioma-lista button, .janela, .janela-caixa { transition: none; }
  .janela.fora, .idioma-lista.fora { transform: none; }
  .carregando-roda { animation: none; }
}