/* =============================================================================
   Hora de Prosperar — estilo do quiz (index.html) e da oferta (oferta.html)

   Imagens: cada fundo é declarado duas vezes — primeiro WebP (todo navegador),
   depois image-set() com AVIF. Navegador que entende AVIF baixa só o AVIF
   (metade do tamanho); o que não entende ignora a 2ª linha e fica no WebP.
   ========================================================================== */

/* ------------------------------------------------------------------ fontes
   Servidas do próprio site: nada de Google Fonts travando a primeira pintura.
   Cinzel e Cormorant são variáveis (um arquivo cobre todos os pesos).
   Licença das três: SIL Open Font License. */
@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-italico.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ouro: #edc46b;
  --ouro-vivo: #f6c84f;
  --tinta: #24120a;
  --ambar: #8a4a0f;
  --creme: #f5ecda;
  --noite: #120c07;

  --serifa: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --capitular: "Cinzel", Georgia, "Times New Roman", serif;
  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Largura do pergaminho (com os rolos) e altura do rolo: tudo nele escala daqui. */
  --larg: min(calc(100vw - 16px), 414px);
  --rolo: calc(var(--larg) / 9.4);
  --entrada: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--noite);
  color: var(--creme);
  font-family: var(--serifa);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
button, input { touch-action: manipulation; }   /* sem zoom de toque duplo no iPhone */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- cenário */
.cena {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  background-color: var(--noite);
  background-image: url("../img/fundo-celular.webp");
  background-image: image-set(url("../img/fundo-celular.avif") type("image/avif"),
                              url("../img/fundo-celular.webp") type("image/webp"));
  background-position: 50% 0;
  background-size: cover;
  background-repeat: no-repeat;
}
.cena::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(14, 8, 3, 0) 50%, rgba(14, 8, 3, .5) 82%, rgba(14, 8, 3, .78) 100%);
}
@media (min-width: 760px) and (min-aspect-ratio: 1/1) {
  .cena {
    background-image: url("../img/fundo-computador.webp");
    background-image: image-set(url("../img/fundo-computador.avif") type("image/avif"),
                                url("../img/fundo-computador.webp") type("image/webp"));
    background-position: 50% 20%;
  }
}

/* Poeira dourada subindo devagar (as partículas são criadas pelo funil.js). */
.poeira {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.poeira i {
  position: absolute;
  bottom: -12px;
  width: var(--t, 3px);
  height: var(--t, 3px);
  border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 6px 2px rgba(255, 200, 90, .55);
  opacity: 0;
  animation: poeira var(--d, 11s) linear var(--a, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes poeira {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  15% { opacity: .85; }
  75% { opacity: .45; }
  100% { transform: translate3d(var(--x, 20px), -105vh, 0); opacity: 0; }
}

/* ------------------------------------------------------- coluna e telas */
.palco {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  width: min(100%, 440px);
  margin: 0 auto;
  padding: 0 8px;
}
.tela { display: none; }
.tela.ativa {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(14px + env(safe-area-inset-top));
  animation: surgir .45s ease both;
}
@keyframes surgir { from { opacity: 0; } to { opacity: 1; } }

.logo {
  width: clamp(88px, min(30vw, 15.5vh), 132px);
  height: auto;
  margin: 0 auto clamp(8px, 2vh, 16px);
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45));
}
.tela--popup .logo { animation: brotar .7s ease both; }

/* -------------------------------------------------------------- pergaminho */
.pergaminho { position: relative; width: var(--larg); }
/* Sombra num elemento parado: não é recalculada quando o conteúdo anima
   (um filter: drop-shadow no pergaminho inteiro seria refeito a cada quadro). */
.pergaminho::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 12%;
  right: 12%;
  top: calc(var(--rolo) * .5);
  bottom: calc(var(--rolo) * .5);
  border-radius: 12px;
  box-shadow: 0 16px 36px 8px rgba(0, 0, 0, .5);
}
.pergaminho__rolo {
  position: relative;
  z-index: 2;
  height: var(--rolo);
  background-image: url("../img/rolo.webp");
  background-image: image-set(url("../img/rolo.avif") type("image/avif"),
                              url("../img/rolo.webp") type("image/webp"));
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
}
.pergaminho__papel {
  position: relative;
  z-index: 1;
  width: calc(var(--larg) * .79);
  margin: calc(var(--rolo) * -.5) auto;
  padding: calc(var(--rolo) * .3 + 58px) calc(var(--larg) * .026) calc(var(--rolo) * .5 + 16px);
  background-image: url("../img/papel.webp");
  background-image: image-set(url("../img/papel.avif") type("image/avif"),
                              url("../img/papel.webp") type("image/webp"));
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: var(--tinta);
  text-align: center;
}
.pergaminho--sem-faixa .pergaminho__papel { padding-top: calc(var(--rolo) * .5 + 30px); }
.pergaminho--sem-faixa .faixa { display: none; }

/* Desenrolar: o rolo de baixo desce e o papel aparece junto (popups, revelação,
   selamento). --percurso é medido pelo funil.js. */
.desenrolando .pergaminho__papel { animation: abrir-papel .65s var(--entrada) backwards; }
.desenrolando .pergaminho__rolo--baixo { animation: descer-rolo .65s var(--entrada) backwards; }
.desenrolando::before { animation: surgir .65s ease backwards; }
@keyframes abrir-papel { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes descer-rolo { from { transform: translateY(calc(var(--percurso, 0px) * -1)); } }

/* Placa do título: as pontas ornamentadas ficam fixas e só o miolo estica. */
.faixa {
  position: absolute;
  z-index: 3;
  top: calc(var(--rolo) * .74);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: calc(var(--larg) * .92);
  height: 34px;
  padding: 1px 8px 0;
  border-style: solid;
  border-width: 0 42px;
  border-image-source: url("../img/faixa.webp");
  border-image-source: image-set(url("../img/faixa.avif") type("image/avif"),
                                 url("../img/faixa.webp") type("image/webp"));
  border-image-slice: 0 118 fill;
  border-image-width: 0 42px;
  border-image-repeat: stretch;
  font: 600 clamp(10.5px, 3.1vw, 12.5px)/1 var(--capitular);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ouro);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

/* ------------------------------------------------------------------ texto */
.titulo {
  margin: 0 0 10px;
  font: 700 clamp(19px, 5.7vw, 22.5px)/1.28 var(--serifa);
}
.texto {
  margin: 0 0 12px;
  font: 650 clamp(16.5px, 4.9vw, 19.5px)/1.35 var(--serifa);
}
.texto--menor {
  font-size: clamp(14px, 4.1vw, 16px);
  font-weight: 550;
}

/* Pergunta: letra mais forte, halo claro atrás (apaga as manchas do papel),
   leve relevo e um ornamento separando das opções. */
.pergunta {
  position: relative;
  margin: 0 0 14px;
  font: 700 clamp(18.5px, 5.4vw, 21.5px)/1.36 var(--serifa);
  letter-spacing: .005em;
  color: var(--tinta);
  text-shadow: 0 1px 0 rgba(255, 246, 225, .7);
}
.pergunta::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -14px;
  right: 0;
  bottom: -4px;
  left: 0;
  background: radial-gradient(closest-side, rgba(255, 248, 230, .78), rgba(255, 248, 230, 0));
}
.pergunta::after {
  content: "";
  display: block;
  width: 46%;
  height: 9px;
  margin: 12px auto 0;
  background:
    radial-gradient(circle, #8a5a1c 0 2.4px, transparent 2.9px) center / 9px 9px no-repeat,
    linear-gradient(90deg, transparent, rgba(138, 90, 28, .75) 30%, transparent 46%,
                    transparent 54%, rgba(138, 90, 28, .75) 70%, transparent) center / 100% 1.5px no-repeat;
}
.nome-destaque { color: var(--ambar); }

/* Palavras entrando como tinta assentando no papel (atraso por palavra no JS). */
.palavra { display: inline-block; max-width: 100%; }
/* Nome longo sem espaço quebra em vez de estourar o pergaminho. */
.nome-destaque, .popup__titulo, .titulo { overflow-wrap: anywhere; }
.animar .palavra { animation: tinta .5s var(--entrada) backwards; animation-delay: var(--atraso, 0ms); }
@keyframes tinta {
  from { opacity: 0; transform: translateY(.32em); color: #c58f2d; text-shadow: 0 0 12px rgba(246, 200, 79, .9); }
}
.animar .opcao,
.animar .campo,
.animar .botao { animation: subir .45s var(--entrada) backwards; animation-delay: var(--atraso, 0ms); }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } }

.rotulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 10px;
  font: 700 clamp(13px, 3.7vw, 15px)/1 var(--capitular);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rotulo svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ campos */
.campo {
  display: block;
  width: 100%;
  height: 58px;
  padding: 0 14px;
  border: 2px solid #7a5530;
  border-radius: 14px;
  background: var(--creme);
  box-shadow: inset 0 2px 4px rgba(60, 35, 10, .15);
  color: var(--tinta);
  font: 700 clamp(17px, 5.2vw, 21px)/1 var(--sans);
  text-align: center;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.campo::placeholder { color: #8b7a66; opacity: 1; }
.campo:focus {
  border-color: #b98a2e;
  box-shadow: 0 0 0 3px rgba(237, 196, 107, .45), inset 0 2px 4px rgba(60, 35, 10, .15);
}
.campo--erro { animation: tremer .4s ease; border-color: #a5321f; }
@keyframes tremer {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* ------------------------------------------------------------------ botão */
.botao {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--larg) * .69);
  height: calc(var(--larg) * .69 / 4.225);
  margin: 20px auto 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background-color: transparent;
  background-image: url("../img/moldura-botao.webp");
  background-image: image-set(url("../img/moldura-botao.avif") type("image/avif"),
                              url("../img/moldura-botao.webp") type("image/webp"));
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 5px 10px rgba(40, 20, 5, .4);
  color: var(--tinta);
  font: 700 clamp(15.5px, 4.7vw, 18.5px)/1.22 var(--sans);
  cursor: pointer;
  transition: transform .15s ease;
}
/* Reflexo passando de tempos em tempos: chama o olho para o botão. */
.botao::after {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 0;
  width: 26%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  transform: translateX(-160%) skewX(-14deg);
  animation: reflexo 3.6s ease-in-out 1.4s infinite;
  pointer-events: none;
}
@keyframes reflexo {
  0% { transform: translateX(-160%) skewX(-14deg); }
  32%, 100% { transform: translateX(440%) skewX(-14deg); }
}
.botao:active { transform: scale(.97); }
.botao:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; }
.botao__texto { position: relative; max-width: 66%; }
.botao__icone {
  position: absolute;
  top: 50%;
  left: 14%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.botao__icone--cheio { fill: currentColor; stroke: none; }

/* ----------------------------------------------------------------- opções */
.opcoes { display: grid; gap: 11px; }
.opcao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 9px 12px 9px 9px;
  overflow: hidden;
  border: 1px solid rgba(116, 80, 40, .5);
  border-radius: 12px;
  background: linear-gradient(180deg, #f7eedc 0%, #ebd9b9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 5px rgba(60, 35, 10, .25);
  color: var(--tinta);
  font: 650 clamp(16px, 4.7vw, 18.5px)/1.25 var(--serifa);
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.opcao > span { position: relative; z-index: 1; }
/* Faixa de luz que atravessa a opção escolhida. */
.opcao::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(105deg, rgba(255, 250, 235, 0), rgba(255, 250, 235, .9), rgba(255, 250, 235, 0));
  transform: translateX(-130%);
  pointer-events: none;
}
.opcao--escolhida::after { animation: varrer .7s ease-out; }
@keyframes varrer { to { transform: translateX(330%); } }
.opcao:hover { background: linear-gradient(180deg, #fbf4e6, #f0e0c4); }
.opcao:active, .opcao--escolhida {
  transform: scale(.985);
  background: linear-gradient(180deg, #f6e4b8, #e6c98e);
}
.opcao:focus-visible { outline: 3px solid #b98a2e; outline-offset: 2px; }
.opcao__letra {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background-image: url("../img/medalhao.webp");
  background-image: image-set(url("../img/medalhao.avif") type("image/avif"),
                              url("../img/medalhao.webp") type("image/webp"));
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  font: 700 15px/1 var(--capitular);
  color: #3a2209;
  text-shadow: 0 1px 0 rgba(255, 235, 170, .6);
  transition: transform .2s ease;
}
.opcao--escolhida .opcao__letra { transform: scale(1.14); filter: drop-shadow(0 0 6px rgba(255, 196, 70, .95)); }

/* -------------------------------------------------- topo (saldo e portais) */
.tela--quiz::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
  height: 360px;
  background: linear-gradient(180deg, rgba(14, 8, 3, .94) 0%, rgba(14, 8, 3, .62) 50%, rgba(14, 8, 3, 0) 100%);
  pointer-events: none;
}
.tela--quiz.ativa { padding-top: calc(10px + env(safe-area-inset-top)); }
.topo { width: 100%; text-align: center; padding-bottom: clamp(8px, 1.7vh, 14px); }
.topo__ola {
  margin: 0 50px 5px;
  font: 600 clamp(11px, 3.3vw, 13px)/1.3 var(--capitular);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ouro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.topo__rotulo {
  margin: 0;
  font: 600 clamp(10px, 2.9vw, 11.5px)/1.2 var(--capitular);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--creme);
}
.topo__saldo {
  margin: 1px 0 0;
  font: 700 clamp(23px, min(7.2vw, 3.9vh), 29px)/1.15 var(--capitular);
  color: var(--ouro-vivo);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(246, 200, 79, .45), 0 2px 3px rgba(0, 0, 0, .6);
}
.topo__aviso {
  margin: 3px auto clamp(6px, 1.3vh, 10px);
  font: 500 clamp(10px, 2.85vw, 11px)/1.35 var(--sans);
  color: rgba(245, 236, 218, .88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95);
}
.progresso { display: flex; align-items: center; gap: 10px; margin: 0 1px clamp(6px, 1.3vh, 10px); }
.progresso__trilho {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(245, 236, 218, .2);
  overflow: hidden;
}
.progresso__barra {
  position: relative;
  width: 0;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, #b8862c, #f6c84f);
  box-shadow: 0 0 8px rgba(246, 200, 79, .6);
  transition: width .6s ease;
}
.progresso__barra::after,
.carga__barra::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 46px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  animation: correr 2.2s ease-in-out infinite;
}
@keyframes correr { from { transform: translateX(-46px); } to { transform: translateX(420px); } }
.progresso__pct {
  min-width: 2.4em;
  font: 600 13px/1 var(--serifa);
  color: var(--creme);
  text-align: right;
}

/* Em tela baixa a grade de portais encolhe junto com a altura. */
.portais {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(var(--larg) * .032);
  width: 100%;
  max-width: max(250px, 52vh);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.portal {
  position: relative;
  background: radial-gradient(circle at 50% 42%, #2b1d10 0%, #0c0805 78%);
}
.portal::before { content: ""; display: block; padding-top: 100%; }   /* quadrado em qualquer navegador */
.portal::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url("../img/moldura-portal.webp");
  background-image: image-set(url("../img/moldura-portal.avif") type("image/avif"),
                              url("../img/moldura-portal.webp") type("image/webp"));
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* Emblema no meio da moldura; o nome por cima da barra de baixo, como no original. */
.portal__icone {
  position: absolute;
  left: 50%;
  top: 13%;
  width: 70%;
  height: 58%;
  transform: translateX(-50%);
  object-fit: contain;
}
.portal--livre .portal__icone {
  top: 10%;
  width: 76%;
  height: 62%;
  filter: drop-shadow(0 0 5px rgba(255, 186, 72, .6));
}
.portal__nome {
  position: absolute;
  z-index: 1;
  left: 4%;
  right: 4%;
  bottom: 8%;
  font: 700 clamp(5.4px, 1.55vw, 6.6px)/1.05 var(--capitular);
  text-transform: uppercase;
  color: var(--ouro);
  text-align: center;
  text-shadow: 0 1px 1px #000, 0 0 3px #000;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.portal--novo { animation: acender 1.3s ease both; }
@keyframes acender {
  0% { transform: scale(.82); filter: brightness(2.2); }
  55% { transform: scale(1.07); filter: brightness(1.4); }
  100% { transform: none; filter: none; }
}

/* --------------------------------------------------------- processando */
.processando {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 170px;
}
.processando__giro {
  width: 48px;
  height: 48px;
  border: 3px solid transparent;
  border-top-color: var(--tinta);
  border-left-color: var(--tinta);
  border-radius: 50%;
  animation: girar .85s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.processando__texto { margin: 0; font: 600 clamp(15px, 4.5vw, 18px)/1.2 var(--sans); }
.pontos { display: flex; gap: 6px; }
.pontos i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tinta);
  animation: piscar 1s infinite both;
}
.pontos i:nth-child(2) { animation-delay: .15s; }
.pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes piscar { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ----------------------------------------------------- preparação (voto) */
.voto {
  margin: 16px 0 4px;
  padding: 16px 12px 14px;
  border: 1.5px solid rgba(116, 80, 40, .5);
  border-radius: 12px;
  background: rgba(247, 238, 220, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.voto__deixa {
  margin: 0 0 8px;
  font: 700 clamp(13px, 3.8vw, 15px)/1.2 var(--capitular);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.voto__frase {
  margin: 0;
  font: italic 600 clamp(17px, 5.1vw, 20px)/1.35 var(--serifa);
}

/* -------------------------------------------------------------- popups */
.selo {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: calc(var(--larg) * .39);
  height: calc(var(--larg) * .39);
  margin: 0 auto 16px;
  border-radius: 16px;
  background: rgba(255, 247, 230, .45);
  box-shadow: 0 0 22px 8px rgba(255, 247, 230, .4);
}
/* Raios de luz girando atrás do emblema. */
.selo::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -42%; right: -42%; bottom: -42%; left: -42%;
  background: repeating-conic-gradient(rgba(255, 222, 140, .55) 0deg 6deg, rgba(255, 222, 140, 0) 6deg 22.5deg);
  -webkit-mask: radial-gradient(closest-side, #000 22%, transparent 100%);
  mask: radial-gradient(closest-side, #000 22%, transparent 100%);
  animation: girar 24s linear infinite;
}
.selo .portal { width: 86%; }
.selo .portal__icone {
  top: 16%;
  width: 68%;
  height: 68%;
  animation: brotar .75s .1s ease both;
}
@keyframes brotar { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
.popup__titulo {
  margin: 0 0 8px;
  font: 700 clamp(20px, 6.2vw, 25px)/1.2 var(--capitular);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.novo-saldo {
  margin: 14px 0 0;
  padding: 11px 12px;
  border: 1px solid rgba(116, 80, 40, .55);
  border-radius: 10px;
  background: linear-gradient(#f6eddc, #ecdcbe);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  font: 600 clamp(15px, 4.5vw, 17.5px)/1.2 var(--capitular);
}
.aviso-papel {
  margin: 7px 0 0;
  font: 500 12px/1.35 var(--sans);
  color: #5b3d21;
}

/* ----------------------------------------------------------- selamento */
.selamento__status { min-height: 2.7em; margin-bottom: 4px; }
.selamento__status.trocou { animation: subir .45s var(--entrada) both; }
.carga {
  height: 12px;
  margin: 10px 0 8px;
  border-radius: 999px;
  background: #d8c29b;
  box-shadow: inset 0 1px 3px rgba(60, 35, 10, .45);
  overflow: hidden;
}
.carga__barra {
  position: relative;
  width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(90deg, #d79a1e, #f7cf55);
}
.carga__legenda {
  display: flex;
  justify-content: space-between;
  font: 600 clamp(14px, 4.1vw, 16px)/1.2 var(--serifa);
}
.selamento__subtitulo {
  margin: 22px 0 12px;
  font: 700 clamp(13px, 3.9vw, 16px)/1 var(--capitular);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.portais--mini { gap: 5px; max-width: none; }
.portais--mini .portal__nome { font-size: clamp(4.8px, 1.4vw, 6px); }

/* ---------------------------------------------------------- botão de som */
.som {
  position: fixed;
  z-index: 10;
  top: calc(8px + env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid rgba(237, 196, 107, .85);
  border-radius: 50%;
  background: rgba(15, 10, 5, .62);
  color: var(--ouro);
  cursor: pointer;
}
.som svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.som[aria-pressed="true"] .som__mudo,
.som[aria-pressed="false"] .som__ondas { display: none; }

/* ---------------------------------------------------------------- rodapé */
.rodape {
  margin: auto 0 0;
  padding: 18px 12px calc(14px + env(safe-area-inset-bottom));
  font: 500 11px/1.4 var(--sans);
  color: rgba(245, 236, 218, .66);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}

/* -------------------------------------------- telas baixas e muito estreitas */
@media (max-height: 700px) {
  .pergaminho__papel { padding-top: calc(var(--rolo) * .3 + 52px); padding-bottom: calc(var(--rolo) * .5 + 10px); }
  .pergunta { margin-bottom: 10px; }
  .pergunta::after { margin-top: 9px; }
  .opcoes { gap: 8px; }
  .opcao { min-height: 54px; padding-top: 6px; padding-bottom: 6px; }
  .opcao__letra { width: 34px; height: 34px; font-size: 14px; }
  .botao { margin-top: 14px; }
  .rotulo { margin: 12px 0 8px; }
  .titulo { margin-bottom: 6px; }
  .selo { width: calc(var(--larg) * .33); height: calc(var(--larg) * .33); margin-bottom: 12px; }
}
/* iPhone SE e Android pequeno com a barra do navegador: o botão da 1ª tela e o
   dos popups precisam caber sem rolar. */
@media (max-height: 600px) {
  .tela.ativa { padding-top: calc(8px + env(safe-area-inset-top)); }
  .logo { width: 72px; margin-bottom: 6px; }
  .pergaminho__papel { padding-top: calc(var(--rolo) * .3 + 46px); padding-bottom: calc(var(--rolo) * .5 + 6px); }
  .titulo { font-size: 18.5px; }
  .texto { font-size: 16px; margin-bottom: 8px; }
  .texto--menor { font-size: 14px; }
  .rotulo { margin: 8px 0 6px; }
  .campo { height: 50px; }
  .botao { margin-top: 10px; }
  .voto { margin-top: 10px; padding: 10px 10px 9px; }
  .selo { width: calc(var(--larg) * .27); height: calc(var(--larg) * .27); margin-bottom: 10px; }
  .popup__titulo { font-size: 20px; margin-bottom: 4px; }
  .novo-saldo { margin-top: 8px; padding: 8px 10px; }
  .selamento__subtitulo { margin: 12px 0 8px; }
}
/* Celular deitado: pouca altura e largura sobrando — opções em duas colunas e,
   nos popups, o conteúdo no lugar do logo. */
@media (orientation: landscape) and (max-height: 500px) {
  .opcoes { grid-template-columns: 1fr 1fr; gap: 8px; }
  .opcao { min-height: 50px; font-size: 15.5px; }
  .logo { width: 60px; margin-bottom: 4px; }
  .tela--popup picture, #tela-revelacao picture { display: none; }
  .selo { width: calc(var(--larg) * .22); height: calc(var(--larg) * .22); }
}
@media (max-width: 345px) {
  .faixa { border-width: 0 34px; border-image-width: 0 34px; height: 30px; letter-spacing: .08em; }
  .opcao { gap: 9px; padding-left: 7px; }
  .topo__ola { margin: 0 48px 4px 6px; text-align: left; }
}

/* ============================================================== OFERTA */
.oferta {
  min-height: 100vh;
  background: radial-gradient(120% 55% at 50% 0%, #2b1d11 0%, #160f09 58%, #0e0905 100%) var(--noite);
}
.oferta__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  width: min(100%, 460px);
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) 16px 0;
  text-align: center;
}
.logo--oferta { width: 76px; margin-bottom: 18px; }
.oferta__titulo {
  margin: 0 0 14px;
  font: 700 clamp(20px, 5.6vw, 25px)/1.3 var(--sans);
  color: #fff;
}
.oferta__data {
  margin: 0;
  font: 500 clamp(15px, 4.3vw, 17px)/1.45 var(--sans);
  color: #e8b93c;
}
.oferta__divisor {
  width: 74px;
  height: 1px;
  margin: 22px auto;
  border: 0;
  background: rgba(232, 185, 60, .6);
}
.oferta__chamada {
  margin: 0 0 16px;
  font: 400 clamp(15px, 4.3vw, 17px)/1.45 var(--sans);
  color: #ece4d6;
}
.oferta__chamada b { color: #fff; font-weight: 700; }
.vsl { width: 100%; max-width: 400px; margin: 0 auto; }
.vsl-vazio {
  display: grid;
  place-items: center;
  aspect-ratio: 9 / 16;
  padding: 24px;
  border: 1px dashed rgba(232, 185, 60, .5);
  border-radius: 10px;
  background: rgba(0, 0, 0, .35);
  color: rgba(245, 236, 218, .7);
  font: 500 14px/1.5 var(--sans);
}
.oferta__som {
  margin: 12px 0 0;
  font: 400 13px/1.4 var(--sans);
  color: rgba(236, 228, 214, .7);
}

/* Botões de valor (aparecem depois do atraso do vídeo). */
.precos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  margin: 22px auto 0;
  animation: subir .6s var(--entrada) both;
}
.precos__titulo {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  font: 600 clamp(17px, 5vw, 20px)/1.35 var(--sans);
  color: #f3e7cf;
  text-align: center;
}
.preco {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 12px 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 150, .7);
  border-radius: 12px;
  background: linear-gradient(180deg, #f8d775 0%, #e2a93a 55%, #c98a22 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
  color: #2a1505;
  font: 700 clamp(20px, 6vw, 24px)/1 var(--sans);
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 240, 200, .6);
  touch-action: manipulation;
  transition: transform .15s ease;
}
.preco::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
  transform: translateX(-160%) skewX(-14deg);
  animation: reflexo 3.6s ease-in-out 1s infinite;
  pointer-events: none;
}
.preco:active { transform: scale(.97); }
.preco:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; }

/* ------------------------------------------------------- menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  .poeira { display: none; }
  .processando__giro { animation: girar 1.6s linear infinite !important; }
}