/* ============================================================
   Casa de Ísis — folha de estilo
   Linguagem visual puxada do astroline: fundo azul-petróleo,
   acento teal para o sistema (barra, destaques, ícones) e ouro
   reservado ao que é do tarô (moldura, nome do arcano, selo).
   Mobile-first, tudo em unidade relativa.
   ============================================================ */

:root{
  --fundo:#0f1e25;
  --fundo2:#152b34;
  --painel:rgba(255,255,255,.045);
  --borda:rgba(255,255,255,.055);

  --teal:#4fd8b6;
  --teal-forte:#7defcd;
  --teal-fraco:rgba(79,216,182,.16);

  --ouro:#e3c68d;
  --ouro-forte:#f4dcaa;
  --ouro-fraco:rgba(227,198,141,.22);

  --texto:#e9f1f3;
  --texto-fraco:#8fa8b2;
  --vermelho:#ef7a8c;

  /* Fraunces no lugar da Cormorant Garamond. A Cormorant e a serifada padrao
     de site gerado por IA, e o corpo dela e minusculo pro tamanho declarado.
     A Fraunces e o contrario: eixo WONK liga as formas tortas de proposito
     (letreiro antigo, meio Windsor), SOFT arredonda a ponta da serifa, e o
     opsz engrossa sozinho conforme o tamanho. Como ela desenha bem maior que
     a Cormorant no mesmo px, todo tamanho serifado desta folha desceu junto. */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* Escala de cantos. Quadrado com o canto quebrado, não cápsula: o raio
     serve pra tirar a aresta dura, não pra virar forma. Toda caixa da
     página puxa daqui — raio solto no meio do arquivo é o que faz a
     interface perder a unidade. Círculo de verdade (avatar, o disco do
     toque, pontinho, radio) continua 50%: são forma, não canto. */
  --raio-pp:4px;      /* selos, fitas, chips */
  --raio-p:6px;       /* versos de carta, miniaturas, placas */
  --raio:8px;         /* campos, botões, blocos */
  --raio-g:12px;      /* painéis grandes */
  --raio-carta:6px;   /* cartas */
  --larg:min(520px,100%);

  /* amplitude do movimento, num lugar só. Pra um riffle ler como DOIS
     montes, a abertura total (2 × riffle-x) tem que passar da largura
     de uma carta (92px) — senão as metades ficam sobrepostas e a coisa
     lê como um monte só tremendo. */
  --riffle-x:78px;    /* quanto cada monte abre pro lado no embaralho */
  --riffle-y:-7px;    /* espaçamento vertical do leque de cada monte */
  --carta-sobe:-28px; /* quanto a carta levanta da mesa ao virar */

  /* verso da carta: um só lugar pra mexer, usado no embaralho,
     no leque e na face de trás da carta grande */
  --verso:
    repeating-linear-gradient(45deg,rgba(227,198,141,.07) 0 5px,transparent 5px 10px),
    linear-gradient(155deg,#26485a,#1a3340);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--fundo);
  background-image:
    radial-gradient(ellipse 90% 42% at 50% 0%,rgba(46,120,140,.36),transparent 68%),
    radial-gradient(ellipse 70% 38% at 12% 26%,rgba(74,60,150,.24),transparent 70%),
    radial-gradient(ellipse 80% 45% at 100% 88%,rgba(38,130,116,.16),transparent 72%);
  background-attachment:fixed;
  color:var(--texto);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* herdado por tudo. A Instrument Sans nao tem esses eixos e ignora a linha,
     entao da pra declarar num lugar so em vez de repetir em cada regra serifada. */
  font-optical-sizing:auto;
  font-variation-settings:"SOFT" 34,"WONK" 1;
}

/* céu de fundo */
.ceu{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.38}
.ceu i{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:#fff;animation:cintila 4s ease-in-out infinite;
}
@keyframes cintila{0%,100%{opacity:.12;transform:scale(.7)}50%{opacity:.85;transform:scale(1.25)}}

/* ============ estrutura: tela sempre centralizada ============ */
.app{
  position:relative;z-index:1;
  max-width:var(--larg);margin:0 auto;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  padding:0 20px 40px;
}
.app.com-fixo{padding-bottom:104px}

.topo{
  display:flex;align-items:center;gap:10px;
  /* sangra os 20px de respiro do .app: no celular o header tem que encostar */
  margin:0 -20px;padding:14px 16px 10px;
  position:sticky;top:0;z-index:20;flex:0 0 auto;
  background:linear-gradient(to bottom,var(--fundo) 62%,transparent);
}
.marca{
  font-family:var(--serif);font-size:17px;font-weight:500;letter-spacing:.05em;
  color:var(--ouro);flex:1;text-align:center;
}
.icone{
  background:none;border:0;color:var(--texto-fraco);font-size:14px;
  cursor:pointer;padding:6px 4px;font-family:var(--sans);
  min-width:52px;text-align:left;line-height:1;
}
.icone:last-child{text-align:right}
.icone[hidden]{visibility:hidden;display:block}
.icone.som{display:flex;justify-content:flex-end;align-items:center}
.icone.som svg{width:19px;height:19px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icone.som[data-mudo="1"]{color:rgba(143,168,178,.45)}

.barra{
  height:3px;background:rgba(255,255,255,.09);
  overflow:hidden;margin:0 -20px 9px;flex:0 0 auto;
}
.barra i{
  display:block;height:100%;width:0;border-radius:0 var(--raio-pp) var(--raio-pp) 0;
  background:linear-gradient(90deg,var(--teal),var(--teal-forte));
  box-shadow:0 0 12px rgba(79,216,182,.5);
  transition:width .65s cubic-bezier(.4,0,.2,1);
}
.etapa{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--texto-fraco);text-align:center;margin:0 0 18px;min-height:15px;flex:0 0 auto;
}

/* o palco cresce e centraliza o conteúdo enquanto ele couber */
#palco{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.tela{
  flex:1 1 auto;display:flex;flex-direction:column;min-height:0;width:100%;
  animation:entra .55s cubic-bezier(.2,.8,.2,1) both;
}
.tela.topo-fixo{display:block}
/* o que vem depois do balão ocupa a sobra e centraliza nela */
.corpo{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:0}
.tela.topo-fixo .corpo{display:block}
@keyframes entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ============ tipografia ============ */
h1.t{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(25px,6.7vw,34px);line-height:1.14;
  margin:0 0 12px;letter-spacing:-.01em;text-align:center;
}
.sub{color:var(--texto-fraco);margin:0 0 24px;font-size:15.5px;text-align:center;
  max-width:31ch;margin-left:auto;margin-right:auto}
.olho{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);margin:0 0 10px;font-weight:600;text-align:center;
}
.risco{width:46px;height:1px;background:var(--ouro-fraco);margin:0 auto 18px}
em.g{color:var(--teal-forte);font-style:normal;font-weight:600}
em.o{color:var(--ouro-forte);font-style:normal;font-weight:600}
b,strong{font-weight:600;color:#fff}

/* ============ painéis ============ */
.painel{
  background:rgba(255,255,255,.04);
  border:0;border-radius:var(--raio-g);
  padding:22px 20px;position:relative;overflow:hidden;
}
/* o halo só na oferta, que é onde ele tem função de atenção */
.painel.oferta::before{
  content:"";position:absolute;left:50%;top:-42%;translate:-50% 0;
  width:150%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(79,216,182,.14),transparent 62%);
}

/* ============ formulário ============ */
.campo{
  width:100%;background:rgba(255,255,255,.05);
  border:1px solid var(--borda);border-radius:var(--raio);
  color:var(--texto);font-size:17px;font-family:var(--sans);
  padding:17px 18px;outline:none;text-align:center;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.campo::placeholder{color:rgba(143,168,178,.55)}
.campo:focus{
  border-color:var(--teal);background:rgba(79,216,182,.07);
  box-shadow:0 0 0 4px rgba(79,216,182,.10);
}

.datas{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:10px}
.dcampo label{
  display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-fraco);margin-bottom:6px;text-align:center;
}
.dcampo .campo{padding:16px 8px;font-variant-numeric:tabular-nums}

.erro{color:var(--vermelho);font-size:13.5px;min-height:20px;margin:10px 0 0;text-align:center}

.cta{
  display:block;width:100%;margin-top:22px;padding:17px 20px;
  background:var(--teal);
  color:#06231c;border:0;border-radius:var(--raio);
  font-family:var(--sans);font-size:16.5px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;transition:transform .12s,background .2s,opacity .2s;
}
.cta:hover{background:var(--teal-forte)}
.cta.ouro:hover{background:var(--ouro-forte)}
.cta:active{transform:translateY(1px) scale(.994)}
.cta:disabled{opacity:.32;box-shadow:none;cursor:default}
.cta.ouro{
  background:var(--ouro);color:#2b2312;
}
.cta.fantasma{
  background:none;border:1px solid var(--borda);color:var(--texto-fraco);
  box-shadow:none;font-weight:500;font-size:15px;padding:14px;
}
.nota{font-size:12.5px;color:var(--texto-fraco);text-align:center;margin:14px 0 0;line-height:1.55}
/* o aviso que vem depois da leitura da carta: placa centrada entre fios de ouro */
.leitura + .nota{
  text-align:center;max-width:29ch;margin:20px auto 0;
  padding:15px 16px;position:relative;
  font-family:var(--serif);font-size:16.5px;line-height:1.48;
  color:var(--ouro-forte);
}
.leitura + .nota::before,
.leitura + .nota::after{
  content:"";position:absolute;left:50%;translate:-50% 0;
  width:58px;height:1px;background:var(--ouro-fraco);
}
.leitura + .nota::before{top:0}
.leitura + .nota::after{bottom:0}
.leitura + .nota b{color:#fff;font-weight:600}
.nota.solta{max-width:33ch;margin:22px auto 0;font-size:13.5px}
.nota.solta b{color:var(--ouro-forte)}

/* ============ roda de data ============ */
.roda{
  position:relative;display:grid;grid-template-columns:1fr 1.7fr 1.25fr;
  gap:2px;height:198px;margin:6px 0 0;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 76%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 76%,transparent);
}
/* faixa que marca o valor escolhido */
.roda::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:44px;
  translate:0 -50%;border-radius:var(--raio);background:rgba(255,255,255,.05);
  pointer-events:none;
}
.coluna{
  overflow-y:auto;overscroll-behavior:contain;
  scroll-snap-type:y mandatory;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;
}
.coluna::-webkit-scrollbar{display:none}
.coluna .pad{height:77px}
.coluna .item{
  height:44px;display:grid;place-items:center;scroll-snap-align:center;
  font-size:18px;color:var(--texto-fraco);opacity:.42;
  font-variant-numeric:tabular-nums;cursor:pointer;
  transition:opacity .18s,color .18s,font-size .18s;
}
.coluna .item.sel{
  opacity:1;color:var(--ouro-forte);font-size:22px;font-weight:600;
}
.coluna .item.viz{opacity:.72}
.rodarot{
  display:grid;grid-template-columns:1fr 1.7fr 1.25fr;gap:2px;
  margin:0 0 2px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-fraco);text-align:center;
}

/* ============ cenas de cada etapa ============ */
.cena{display:grid;place-items:center;margin:14px 0 18px;position:relative}

/* nome e alvo: a inicial acendendo dentro de um selo */
.selo-letra{
  position:relative;width:104px;height:104px;display:grid;place-items:center;
}
.selo-letra .anel-l{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--ouro-fraco);
  animation:giraSelo 22s linear infinite;
}
.selo-letra .anel-l::after{
  content:"";position:absolute;top:-3px;left:50%;translate:-50% 0;
  width:5px;height:5px;border-radius:50%;background:var(--ouro);
}
.selo-letra .anel-l:nth-child(2){inset:11%;animation-duration:15s;animation-direction:reverse}
@keyframes giraSelo{to{transform:rotate(360deg)}}
.selo-letra .l{
  font-family:var(--serif);font-size:37px;color:var(--ouro-forte);line-height:1;
  transition:opacity .3s,transform .3s;
}
.selo-letra.acesa .l{text-shadow:0 0 22px rgba(227,198,141,.75)}
.selo-letra.acesa .anel-l{border-color:rgba(227,198,141,.5)}

/* alvo: o fio entre as duas pessoas */
.fio{display:flex;align-items:center;justify-content:center;gap:0}
.fio .selo-letra{width:86px;height:86px}
.fio .selo-letra .l{font-size:30px}
.fio .linha{
  width:52px;height:1px;background:linear-gradient(90deg,var(--ouro-fraco),var(--teal),var(--ouro-fraco));
  position:relative;opacity:.5;transition:opacity .4s;
}
.fio.ligado .linha{opacity:1;animation:pulsaFio 2.2s ease-in-out infinite}
@keyframes pulsaFio{0%,100%{filter:brightness(.7)}50%{filter:brightness(1.6)}}

/* ============ guia: balão de fala + avatar ============ */
.fala{margin:0 auto 8px;max-width:33ch;text-align:center;flex:0 0 auto}
.balao .frase1{display:block;font-family:var(--serif);font-size:21px;
  line-height:1.18;font-weight:600;margin-bottom:6px}
.balao{
  position:relative;background:#f6f0e4;color:#16262d;
  border-radius:var(--raio-g);padding:16px 18px;
  font-size:16.5px;line-height:1.46;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.balao::after{
  content:"";position:absolute;left:50%;bottom:-8px;translate:-50% 0;
  width:17px;height:17px;background:#f6f0e4;
  clip-path:polygon(50% 100%,0 0,100% 0);
}
.balao em{font-style:normal;font-weight:700;color:#0f8f70}
.balao b{color:#16262d}
.guia{
  width:36px;height:36px;border-radius:50%;object-fit:cover;
  margin:14px auto 0;display:block;
  border:2px solid rgba(246,240,228,.85);
  box-shadow:0 3px 12px rgba(0,0,0,.35);
}
/* texto surgindo letra a letra, como no astroline */
.ltr{opacity:0;transition:opacity .26s ease}
.ltr.on{opacity:1}

/* ============================================================
   DEDO NA TELA — o alvo de toque
   ------------------------------------------------------------
   O que faz um leitor biométrico ser óbvio (Touch ID, prompt de
   digital do Android, botões de "pressione e segure") não é enfeite,
   são quatro coisas, e a ordem importa:

     1. SUPERFÍCIE — o alvo tem que parecer um objeto físico, com borda
        e volume. Um brilho difuso lê como decoração; um disco com aro
        lê como botão.
     2. GLIFO      — a digital no centro diz o que encostar. Nenhum
        texto substitui esse desenho.
     3. CONVERGÊNCIA — os anéis fecham PRA DENTRO. Onda saindo do
        centro empurra o olho pra fora; onda entrando traz o olho pro
        alvo. O anterior fazia o contrário.
     4. PROGRESSO NO PRÓPRIO ALVO — o anel de progresso mora no aro do
        disco, junto do dedo. Barra longe do toque quebra a relação
        entre o que a pessoa faz e o que ela vê.

   O preenchimento da digital acompanha `--p` (0→1), escrito pelo JS a
   cada quadro: a digital acende de baixo pra cima conforme o tempo
   passa, que é o gesto que todo mundo já viu desbloqueando o celular.
   ============================================================ */
.ritual{text-align:center}

.alvo{
  position:relative;width:min(300px,84vw);aspect-ratio:1;margin:6px auto 0;
  display:grid;place-items:center;
  touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;
}

/* --- anéis que fecham pra dentro: o funil de atenção --- */
.alvo .conv{
  position:absolute;width:100%;aspect-ratio:1;border-radius:50%;
  border:1.5px solid var(--teal);pointer-events:none;opacity:0;
  animation:convergir 2.8s cubic-bezier(.3,.1,.2,1) infinite;
  /* o atraso vem inline pelo JS: nth-of-type contaria todas as divs
     irmãs (mira, pad, dedo) e não só os anéis */
  animation-delay:var(--atraso,0s);
}
@keyframes convergir{
  0%  {transform:scale(1.05);opacity:0}
  22% {opacity:.55}
  78% {opacity:.28}
  100%{transform:scale(.62);opacity:0}
}
.alvo.on .conv,.alvo.pronto .conv{animation:none;opacity:0}

/* --- aro de mira tracejado, girando devagar --- */
.alvo .mira{
  position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  border:1px dashed rgba(227,198,141,.3);pointer-events:none;
  animation:giraMira 26s linear infinite;
}
@keyframes giraMira{to{transform:rotate(360deg)}}
.alvo.pronto .mira{opacity:0;transition:opacity .5s}

/* --- o disco: é ISTO que a pessoa encosta --- */
.alvo .pad{
  position:relative;width:62%;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  /* volume: claro em cima, escuro embaixo, como um botão de verdade */
  background:
    radial-gradient(circle at 50% 34%,rgba(255,255,255,.10),transparent 58%),
    linear-gradient(168deg,#1d3b47,#132a34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(79,216,182,.22),
    0 14px 34px rgba(0,0,0,.55),
    0 0 0 8px rgba(79,216,182,.05);
  transition:transform .22s cubic-bezier(.3,1.2,.5,1),box-shadow .3s;
}
/* afunda quando o dedo encosta — é o retorno tátil que falta na tela */
.alvo.on .pad{
  transform:scale(.955);
  box-shadow:
    inset 0 2px 12px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(79,216,182,.6),
    0 6px 18px rgba(0,0,0,.5),
    0 0 0 14px rgba(79,216,182,.09);
}
.alvo.pronto .pad{
  transform:scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 0 0 1px rgba(79,216,182,.8),
    0 14px 40px rgba(0,0,0,.5),
    0 0 46px rgba(79,216,182,.42);
}

/* --- anel de progresso, no aro do próprio disco --- */
.alvo .anel{
  position:absolute;inset:-5%;width:110%;height:110%;
  transform:rotate(-90deg);pointer-events:none;overflow:visible;
}
.alvo .trilho{fill:none;stroke:rgba(255,255,255,.09);stroke-width:3}
.alvo .prog{
  fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:301;stroke-dashoffset:301;
  filter:drop-shadow(0 0 6px rgba(79,216,182,.9));
  transition:stroke-dashoffset .1s linear,opacity .2s;
  /* com traço de comprimento zero a ponta arredondada ainda desenha um
     pontinho no topo do anel. Em repouso ele não significa nada e parece
     sujeira, então o anel só existe enquanto o dedo está lá. */
  opacity:0;
}
.alvo.on .prog,.alvo.pronto .prog{opacity:1}

/* --- a digital: base apagada + cópia acesa que sobe com --p --- */
.alvo .dig{
  position:absolute;width:52%;line-height:0;pointer-events:none;
}
.alvo .dig svg{width:100%;height:auto;display:block;fill:none;
  stroke-width:3.4;stroke-linecap:round}
.alvo .dig.base svg{stroke:rgba(227,198,141,.32)}
.alvo .dig.viva{
  /* A parte acesa cresce de baixo pra cima conforme --p vai de 0 a 1.
     As laterais negativas existem porque o clip corta TAMBÉM o brilho do
     drop-shadow: com 0 nos lados, o halo virava um retângulo com quinas
     visíveis em volta da digital. Abrindo o recorte pra fora das bordas,
     só a linha de cima — que é a linha de preenchimento, e deve mesmo
     ser reta — continua cortando. */
  clip-path:inset(calc((1 - var(--p,0)) * 100%) -12% 0 -12%);
  transition:clip-path .1s linear;
}
.alvo .dig.viva svg{
  /* o raio do brilho fica abaixo da folga que existe entre o desenho e a
     borda da caixa (as cristas vão de 11 a 89 num viewBox de 100) */
  filter:drop-shadow(0 0 calc(3px + var(--p,0) * 7px) rgba(79,216,182,.9));
  stroke:var(--teal-forte);
}
.alvo.pronto .dig.viva svg{stroke:var(--ouro-forte);
  filter:drop-shadow(0 0 22px rgba(227,198,141,.9))}

/* linha de leitura correndo pela digital enquanto o dedo está lá */
.alvo .feixe{
  position:absolute;width:52%;height:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,var(--teal-forte),transparent);
  box-shadow:0 0 12px rgba(79,216,182,.9);
}
.alvo.on .feixe{opacity:1;animation:feixePad 1.4s ease-in-out infinite}
@keyframes feixePad{
  0%,100%{transform:translateY(-26px)}
  50%    {transform:translateY(26px)}
}

/* --- fecho do ritual ---
   Quem confirma é a própria digital: ela fica na tela, acesa em ouro pela
   regra lá de cima. Aqui havia um símbolo entrando por cima enquanto a
   digital sumia, o que trocava a coisa lida por um enfeite no lugar dela. */
.alvo.pronto .feixe{opacity:0;transition:opacity .35s}

/* clarão único no instante em que fecha */
.alvo .flash{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(227,198,141,.55),transparent 62%);
}
.alvo.pronto .flash{animation:clarao .75s ease-out forwards}
@keyframes clarao{
  0%  {opacity:0;transform:scale(.6)}
  30% {opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.5)}
}

/* --- a mão que desce e encosta no disco --- */
/* As margens colocam a PONTA DO DEDO no ponto de toque — não o centro do
   desenho. Na arte (viewBox 44×54) a ponta cai em ~26/58 da largura e
   ~14/71 da altura já em pixels finais. O alvo do toque fica um pouco
   abaixo e à direita do meio do disco de propósito: com a ponta no centro
   exato, a mão cobria a digital inteira e sumia justamente com o desenho
   que diz o que fazer. O transform-origin repete a ponta pra que o
   "apertar" gire em torno dela e o dedo não escorregue do alvo. */
.alvo .dedo{
  position:absolute;left:50%;top:50%;width:58px;pointer-events:none;
  margin-left:-22px;margin-top:4px;
  transform-origin:26px 14px;
  animation:encosta 2.8s cubic-bezier(.4,0,.3,1) infinite;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.65));
}
.alvo .dedo svg{width:100%;height:auto;display:block;
  stroke:#0f1e25;fill:#f6f0e4;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
/* a mão nasce embaixo, sobe até encostar no centro, aperta e recua */
@keyframes encosta{
  0%   {transform:translate(0,64px) scale(1);opacity:0}
  16%  {transform:translate(0,36px) scale(1);opacity:1}
  44%  {transform:translate(0,0) scale(1)}
  54%  {transform:translate(0,0) scale(.88)}
  68%  {transform:translate(0,0) scale(1)}
  86%  {transform:translate(0,36px) scale(1);opacity:1}
  100% {transform:translate(0,64px) scale(1);opacity:0}
}
.alvo.on .dedo,.alvo.pronto .dedo{opacity:0;animation:none}

/* --- rótulo: onde encostar, dito com todas as letras --- */
.rotulo-alvo{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:14px 0 0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal-forte);font-weight:700;
  transition:opacity .3s;
}
/* setas de cada lado apontando pro centro, piscando pra dentro */
.rotulo-alvo::before,.rotulo-alvo::after{
  content:"";width:22px;height:1px;background:var(--teal);opacity:.5;
  animation:puxa 1.8s ease-in-out infinite;
}
.rotulo-alvo::before{transform-origin:right}
.rotulo-alvo::after{transform-origin:left}
@keyframes puxa{0%,100%{transform:scaleX(1);opacity:.25}50%{transform:scaleX(.5);opacity:.9}}
.alvo-feito .rotulo-alvo{opacity:0}

.dica{color:var(--texto-fraco);font-size:15px;margin:14px 0 0;min-height:44px}
.dica b{color:var(--teal-forte)}

/* ============================================================
   LEITURA DE ENERGIA — o scan
   ------------------------------------------------------------
   Antes o SVG só piscava de opacidade, o que lê como imagem com
   defeito. Um scan de verdade tem três camadas empilhadas:

     base   — a digital apagada, o que ainda não foi lido
     viva   — a mesma digital acesa, recortada até onde o feixe passou
     feixe  — a linha que desce e vai "revelando" a camada viva

   É o mesmo truque de leitor de digital e de scanner de documento: o
   que convence não é a linha andando, é o rastro que ela deixa aceso
   atrás de si. As cristas ainda se desenham traço a traço na entrada,
   com stroke-dashoffset, pra tela não começar com tudo pronto.
   ============================================================ */
.energia{
  position:relative;width:min(250px,68vw);aspect-ratio:1;margin:6px auto 0;
  display:grid;place-items:center;
}

/* grade técnica de fundo, à deriva devagar */
.energia .grade{
  position:absolute;inset:0;border-radius:50%;opacity:.5;pointer-events:none;
  background-image:
    linear-gradient(rgba(79,216,182,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,216,182,.12) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle,#000 42%,transparent 72%);
  mask-image:radial-gradient(circle,#000 42%,transparent 72%);
  animation:derivaGrade 8s linear infinite;
}
@keyframes derivaGrade{to{background-position:22px 22px,22px 22px}}

.energia .onda{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--teal);opacity:0;
  animation:onda 2.6s cubic-bezier(.2,.6,.3,1) infinite;
  animation-delay:var(--atraso,0s);   /* inline pelo JS, mesmo motivo do .conv */
}
@keyframes onda{
  0%  {transform:scale(.28);opacity:0}
  18% {opacity:.85}
  100%{transform:scale(1);opacity:0}
}

/* --- a digital em três camadas --- */
.energia .marca{position:relative;width:46%;aspect-ratio:1;line-height:0}
.energia .marca .cam{position:absolute;inset:0}
.energia .marca svg{width:100%;height:100%;display:block;fill:none;
  stroke-width:3.4;stroke-linecap:round}

/* base: apagada, e cada crista se desenha na entrada */
.energia .cam.base svg{stroke:rgba(227,198,141,.28)}
.energia .cam.base path{
  stroke-dasharray:420;stroke-dashoffset:420;
  animation:desenhaCrista .9s ease-out forwards;
}
.energia .cam.base path:nth-child(1){animation-delay:.05s}
.energia .cam.base path:nth-child(2){animation-delay:.13s}
.energia .cam.base path:nth-child(3){animation-delay:.21s}
.energia .cam.base path:nth-child(4){animation-delay:.29s}
.energia .cam.base path:nth-child(5){animation-delay:.37s}
.energia .cam.base path:nth-child(6){animation-delay:.45s}
.energia .cam.base path:nth-child(7){animation-delay:.53s}
@keyframes desenhaCrista{to{stroke-dashoffset:0}}

/* viva: acesa, recortada até a altura por onde o feixe já passou.
   Os -12% nas laterais são o mesmo cuidado do alvo do dedo: sem eles o
   clip recorta o brilho e desenha um retângulo em volta da digital. */
.energia .cam.viva svg{
  stroke:var(--teal-forte);
  filter:drop-shadow(0 0 7px rgba(79,216,182,.85));
}
.energia .cam.viva{
  clip-path:inset(0 -12% 100% -12%);
  animation:revelaScan 2.4s cubic-bezier(.45,0,.55,1) .6s infinite;
}
@keyframes revelaScan{
  0%  {clip-path:inset(0 -12% 100% -12%);opacity:1}
  62% {clip-path:inset(0 -12% 0 -12%);opacity:1}
  84% {clip-path:inset(0 -12% 0 -12%);opacity:1}
  97% {clip-path:inset(0 -12% 0 -12%);opacity:0}
  100%{clip-path:inset(0 -12% 100% -12%);opacity:0}
}

/* feixe: a linha que desce, com um rastro de brilho embaixo dela */
.energia .feixe{
  position:absolute;left:-12%;width:124%;height:2px;top:0;opacity:0;
  background:linear-gradient(90deg,transparent,var(--teal-forte) 22%,#fff 50%,var(--teal-forte) 78%,transparent);
  box-shadow:0 0 16px 2px rgba(79,216,182,.85);
  animation:varreDesce 2.4s cubic-bezier(.45,0,.55,1) .6s infinite;
}
.energia .feixe::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34px;
  background:linear-gradient(to top,rgba(79,216,182,.22),transparent);
}
@keyframes varreDesce{
  0%  {top:-3%;opacity:0}
  8%  {opacity:1}
  62% {top:100%;opacity:1}
  78% {top:100%;opacity:0}
  100%{top:100%;opacity:0}
}

.energia .pct{
  position:absolute;bottom:-4px;left:50%;translate:-50% 0;
  font-family:var(--serif);font-size:25px;color:var(--teal-forte);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px rgba(79,216,182,.5);
}
/* etiqueta de leitura, com o ponto piscando como equipamento ligado */
.energia .estado{
  position:absolute;top:-6px;left:50%;translate:-50% 0;
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--texto-fraco);
}
.energia .estado::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 8px var(--teal);animation:piscaLed 1s steps(2,end) infinite;
}
@keyframes piscaLed{0%,49%{opacity:1}50%,100%{opacity:.15}}

/* ============ embaralhamento (riffle) ============
   Um riffle de verdade tem quatro tempos, e é a ordem deles que faz a
   coisa ler como baralho e não como retângulos tremendo:
     1. corta   — o monte parte em dois
     2. abre    — cada metade vira leque na mão
     3. chuvisca— as cartas caem intercaladas, uma de cada lado
     4. bate    — o monte é batido na mesa e fica quadrado
   O `--dir` (-1 esquerda, +1 direita) deixa um único keyframe servir
   os dois montes, e o `--i` dá a cada carta o lugar dela no leque. */
.embaralho{
  position:relative;height:250px;display:grid;place-items:center;margin:6px 0 0;
  perspective:900px;
}
.embaralho .c{
  position:absolute;width:92px;height:150px;border-radius:var(--raio-carta);
  background:var(--verso);
  border:1px solid var(--ouro-fraco);
  box-shadow:0 10px 26px rgba(0,0,0,.55);
  will-change:transform;backface-visibility:hidden;
}
/* aresta clara na borda de cima: dá espessura ao monte quando as cartas
   se separam, sem precisar desenhar carta por carta */
.embaralho .c::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.13),transparent 42%);
}

@keyframes riffle{
  /* monte inteiro, quadrado na mesa */
  0%   {transform:translate3d(0,0,0) rotate(0deg)}

  /* 1. CORTA — as metades se afastam em bloco. O deslocamento é igual
        pra todas as cartas do monte de propósito: elas ainda são um
        monte, e é a folga no meio que anuncia o corte. */
  20%  {transform:translate3d(calc(var(--dir) * var(--riffle-x)),
                              calc(var(--i) * -2px),0)
                  rotate(calc(var(--dir) * 3deg))}

  /* 2. ABRE — agora sim cada carta ganha o SEU lugar: escalonada pra
        fora e pra cima, com a inclinação crescendo carta a carta. É
        este escalonamento por --i que faz virar leque na mão em vez de
        bloco inclinado. */
  44%  {transform:translate3d(calc(var(--dir) * (var(--riffle-x) + var(--i) * 6px)),
                              calc(var(--i) * var(--riffle-y)),0)
                  rotate(calc(var(--dir) * (7deg + var(--i) * 1.4deg)))}

  /* 3. APROXIMA — as pontas se encontram e as cartas começam a cair
        juntas. O atraso inline de cada carta é o que intercala. */
  70%  {transform:translate3d(calc(var(--dir) * (16px + var(--i) * 2px)),
                              calc(var(--i) * -2px),0)
                  rotate(calc(var(--dir) * 3deg))}

  /* 4. BATE — passa um pouco do centro e volta, como monte batido */
  86%  {transform:translate3d(calc(var(--dir) * -6px),2px,0)
                  rotate(calc(var(--dir) * -1.5deg))}
  100% {transform:translate3d(0,0,0) rotate(0deg)}
}
.embaralho .c{
  animation-name:riffle;
  animation-duration:1.05s;
  animation-timing-function:cubic-bezier(.36,.02,.22,1);
  animation-iteration-count:3;
  animation-fill-mode:both;
  /* o atraso de cada carta vem inline pelo JS: é ele que intercala os
     dois montes em vez de derrubar os dois de uma vez */
}
.embaralho .c.e{--dir:-1}
.embaralho .c.d{--dir: 1}

/* a mão que segura balança de leve junto — sem isso o monte parece
   preso no ar enquanto só as cartas se mexem */
.embaralho{animation:balancoMao 1.05s ease-in-out 3 both}
@keyframes balancoMao{
  0%,100%{transform:translateY(0) rotate(0deg)}
  30%    {transform:translateY(-4px) rotate(-.6deg)}
  70%    {transform:translateY(2px) rotate(.5deg)}
}

/* ============ leque ============ */
.contador{
  text-align:center;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal);margin:0 0 4px;min-height:19px;font-weight:600;
}
.leque{
  position:relative;height:min(212px,32vh);margin:14px -20px 0;
  display:flex;align-items:flex-end;justify-content:center;
}
.leque .vaga{
  position:absolute;bottom:14px;width:72px;height:118px;
  transform-origin:50% 185%;cursor:pointer;
  transform:rotate(var(--ang));
  animation:distribui .55s cubic-bezier(.2,.9,.35,1.15) both;
  animation-delay:var(--atraso);
  -webkit-tap-highlight-color:transparent;will-change:transform;
}
@keyframes distribui{
  from{transform:translateY(165px) rotate(0deg) scale(.78);opacity:0}
  to  {transform:rotate(var(--ang));opacity:1}
}
/* terminada a distribuição a animação sai do caminho e as classes assumem */
.leque.pronto .vaga{
  animation:none;
  transition:transform .38s cubic-bezier(.2,.9,.3,1.25),filter .3s,opacity .3s;
}
.leque .vaga .verso{
  width:100%;height:100%;border-radius:var(--raio-carta);
  background:
    repeating-linear-gradient(45deg,rgba(227,198,141,.07) 0 5px,transparent 5px 10px),
    linear-gradient(155deg,#26485a,#1a3340);
  border:1px solid var(--ouro-fraco);
  box-shadow:0 8px 20px rgba(0,0,0,.55);
}
.leque.pronto .vaga:not(.usada):not(.escolhida):hover{transform:rotate(var(--ang)) translateY(-12px)}
.leque .vaga.escolhida{transform:rotate(var(--ang)) translateY(-30px)}
.leque .vaga.escolhida .verso{
  border-color:var(--teal);
  box-shadow:0 0 26px rgba(79,216,182,.55),0 8px 20px rgba(0,0,0,.5);
}
.leque .vaga.usada{opacity:.34;pointer-events:none}
.selo{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--teal);color:#07231d;font-size:11px;font-weight:800;
  width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
  animation:selopop .35s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes selopop{from{transform:translateX(-50%) scale(0)}to{transform:translateX(-50%) scale(1)}}

/* ============================================================
   VIRADA DA CARTA
   ------------------------------------------------------------
   Antes a virada era uma `transition` no .giro e, ao mesmo tempo, uma
   `animation` de subida no .carta3d — que é justamente o elemento que
   carrega o `perspective`. Transformar o elemento da perspectiva move
   e escala o ponto de fuga junto, então a profundidade da virada ia
   embora e o giro achatava.

   Agora é uma animação só, no .giro: sobe, gira e assenta no mesmo
   keyframe. O .carta3d fica parado segurando a perspectiva, que é a
   única função dele.
   ============================================================ */
.mesa{display:grid;place-items:center;margin:2px 0 20px;position:relative}
.mesa .halo{
  position:absolute;width:118%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(227,198,141,.28),transparent 58%);
  opacity:0;transition:opacity .9s ease;
}
.mesa.revelada .halo{opacity:1}
/* sombra na mesa: encolhe e clareia enquanto a carta está no ar,
   que é o que faz a subida ser lida como subida */
.mesa .sombra{
  position:absolute;bottom:2px;width:52%;height:18px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.62),transparent 70%);
  filter:blur(6px);pointer-events:none;
}
.mesa.virando .sombra{animation:sombraVira 1.15s cubic-bezier(.36,.06,.22,1) both}
@keyframes sombraVira{
  0%   {transform:scale(1);opacity:.9}
  55%  {transform:scale(.66);opacity:.45}
  100% {transform:scale(1);opacity:.9}
}

.carta3d{
  width:min(228px,60vw);aspect-ratio:.62;perspective:1300px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;position:relative;
}
.carta3d .giro{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;will-change:transform;
}
/* parada, a carta respira de leve: diz que é tocável sem mexer no alvo */
.carta3d:not(.aberta) .giro{animation:flutuaCarta 3.8s ease-in-out infinite}
@keyframes flutuaCarta{
  0%,100%{transform:translateY(0) rotateY(0deg)}
  50%    {transform:translateY(-7px) rotateY(0deg)}
}
.carta3d.aberta .giro{animation:viraCarta 1.15s cubic-bezier(.36,.06,.22,1) forwards}
@keyframes viraCarta{
  0%   {transform:translateY(0) scale(1) rotateY(0deg)}
  20%  {transform:translateY(var(--carta-sobe)) scale(1.06) rotateY(18deg)}
  55%  {transform:translateY(calc(var(--carta-sobe) * 1.18)) scale(1.09) rotateY(104deg)}
  80%  {transform:translateY(calc(var(--carta-sobe) * .38)) scale(1.03) rotateY(166deg)}
  100% {transform:translateY(0) scale(1) rotateY(180deg)}
}

/* aro de ouro pulsando em volta da carta fechada: o "toque aqui" */
.carta3d:not(.aberta)::after{
  content:"";position:absolute;inset:-10px;border-radius:calc(var(--raio-carta) + 5px);
  border:1px solid var(--ouro);pointer-events:none;
  animation:aroConvite 2.4s ease-out infinite;
}
@keyframes aroConvite{
  0%  {transform:scale(1);opacity:0}
  35% {opacity:.55}
  100%{transform:scale(1.07);opacity:0}
}
.carta3d:not(.aberta) .tras{animation:convida 2.4s ease-in-out infinite}
@keyframes convida{
  0%,100%{box-shadow:0 18px 46px rgba(0,0,0,.62),0 0 0 rgba(227,198,141,0)}
  50%    {box-shadow:0 18px 46px rgba(0,0,0,.62),0 0 26px rgba(227,198,141,.42)}
}

.carta3d .face{
  position:absolute;inset:0;backface-visibility:hidden;
  border-radius:var(--raio-carta);overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.62);
}
.carta3d .tras{
  background:
    repeating-linear-gradient(45deg,rgba(227,198,141,.07) 0 6px,transparent 6px 12px),
    linear-gradient(155deg,#26485a,#1a3340);
  border:1px solid var(--ouro-fraco);
}
.carta3d .frente{
  transform:rotateY(180deg);border:1px solid var(--ouro-fraco);background:#12252d;
}
.carta3d .frente img{width:100%;height:100%;object-fit:cover;display:block}
/* brilho que atravessa a carta assim que ela passa da lateral */
.carta3d .frente::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.42) 47%,transparent 62%);
  transform:translateX(-130%);
}
.carta3d.aberta .frente::after{animation:brilho 1s ease-out .7s both}
@keyframes brilho{to{transform:translateX(130%)}}

.nomecarta{
  font-family:var(--serif);font-size:26px;text-align:center;
  margin:16px 0 2px;color:var(--ouro-forte);
}
.poscarta{
  text-align:center;font-size:13px;color:var(--teal);
  margin:0 0 16px;font-weight:600;font-style:italic;
}
/* a ponte encosta no preço: sem o respiro de baixo que a leitura de carta usa */
.leitura.ponte{margin-bottom:0;max-width:32ch}
.leitura.ponte::after{margin:14px 0 2px}
.leitura{
  background:none;border:0;border-radius:0;padding:0;
  margin:4px auto 6px;max-width:34ch;
  font-size:17px;line-height:1.82;text-align:left;
  color:#dfe9ec;text-wrap:pretty;
}
.leitura p{margin:0 0 15px}
.leitura p:last-child{margin:0}
.leitura b{color:var(--ouro-forte);font-weight:600}
@media (max-width:380px){
  .leitura{font-size:16.2px;line-height:1.76}
}

/* entrada escalonada dos blocos de texto */
.sobe{animation:sobefade .6s cubic-bezier(.2,.8,.2,1) both}
/* Passo irregular. Escada de 90 em 90 ms e a cadencia que sai pronta de
   gerador e o olho reconhece como automatica; variar o intervalo faz a
   entrada parecer cronometrada por alguem. */
.sobe:nth-child(1){animation-delay:.04s}
.sobe:nth-child(2){animation-delay:.15s}
.sobe:nth-child(3){animation-delay:.21s}
.sobe:nth-child(4){animation-delay:.34s}
.sobe:nth-child(5){animation-delay:.44s}
@keyframes sobefade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ============ resultado ============ */
.bloco{margin:0 0 28px}
.rot{
  font-family:var(--serif);font-size:17.5px;letter-spacing:0;
  color:var(--texto);margin:0 0 14px;font-weight:600;text-align:left;
  padding-bottom:9px;position:relative;
}
/* Fio curto preso à esquerda, no lugar da régua que atravessava a largura
   toda. Linha de ponta a ponta debaixo de cada título é o desenho que sai
   pronto de gerador; um traço que não fecha a caixa lê como escolha. */
.rot::after{
  content:"";position:absolute;left:0;bottom:0;width:46px;height:2px;
  background:linear-gradient(90deg,var(--ouro),transparent);
}

/* As tres nao ficam alinhadas no esquadro de proposito: carta que alguem
   acabou de virar na mesa cai torta. Grade perfeita e o que denuncia
   layout montado por maquina, e aqui ela ainda contradiz a cena. */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:5px 0 3px}
.trio .mini{transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
.trio .mini:nth-child(1){transform:rotate(-1.7deg) translateY(3px)}
.trio .mini:nth-child(2){transform:rotate(.6deg)  translateY(-3px)}
.trio .mini:nth-child(3){transform:rotate(2.2deg) translateY(2px)}
.trio .mini img{
  width:100%;border-radius:var(--raio-carta);display:block;border:1px solid var(--ouro-fraco);
  box-shadow:0 8px 20px rgba(0,0,0,.45);
}
.trio .mini .cn{
  font-family:var(--serif);font-size:13.5px;text-align:center;
  margin:8px 0 0;color:var(--ouro-forte);line-height:1.28;
}
.trio .mini .cp{
  font-size:11px;font-style:italic;
  text-align:center;color:var(--texto-fraco);margin:3px 0 0;
}

.selocard{padding:20px}
.selocard .linha{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.09);position:relative;
}
.selocard .linha:last-child{border:0;padding-bottom:0}
.selocard .linha.com-medidor{flex-wrap:wrap}
/* das quatro linhas do selo a do vinculo e a unica que e MEDIDA; com barra ela
   deixa de ser mais um par chave-valor e vira a linha que o olho procura */
.selocard .medidor{
  flex:0 0 100%;height:5px;margin:10px 0 1px;border-radius:99px;
  background:rgba(255,255,255,.08);overflow:hidden;
}
.selocard .medidor i{
  display:block;height:100%;width:var(--pct,0%);border-radius:99px;
  background:linear-gradient(90deg,var(--ouro),var(--ouro-forte));
  box-shadow:0 0 10px rgba(227,198,141,.5);
  animation:enche 1.1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes enche{from{width:0}}
.selocard .k{font-size:12.5px;color:var(--texto-fraco)}
.selocard .v{font-family:var(--serif);font-size:18px;color:var(--ouro-forte);text-align:right}

/* ============================================================
   A CARTA E O QUE ELA RETEVE
   ------------------------------------------------------------
   Eram dois desenhos: `.cartalinha`, o resumo carta a carta, e
   `.trancado`, os blocos de revelação logo abaixo. Duas pilhas
   seguidas de caixa com tira borrada dentro — a segunda repetia
   a forma da primeira e a revelação aparecia longe da carta que
   a produziu. Viraram um bloco só.

   Cada bloco é uma pilha de faixas, e cada faixa faz uma coisa:

     cima   a miniatura da carta, o nome e o que ela abriu
     cofre  a tira fechada — é aqui, e só aqui, que mora o que
            não se lê
     pede   o que a compra abre

   A tira desceu pra largura inteira do bloco em vez de ficar
   espremida na coluna ao lado da miniatura: o que está retido é
   o que precisa de espaço, não a imagem. E o borrado nunca
   divide linha com texto legível — antes vinha inline no meio da
   frase, serifada dourada de 18px costurada dentro de um
   parágrafo sans de 16,5, com o parágrafo ainda recuado 44px pra
   desviar do cadeado. Era dali que vinha a sujeira.
   ============================================================ */
.revelacao{
  position:relative;cursor:pointer;
  background:var(--painel);border:1px solid rgba(227,198,141,.12);
  border-radius:var(--raio);padding:14px;margin:0 0 12px;
  transition:background .2s,border-color .2s;
}
.revelacao:hover{background:rgba(255,255,255,.06);border-color:rgba(227,198,141,.3)}

.revelacao .cima{display:flex;gap:14px;align-items:flex-start}
.revelacao .cima img{
  width:70px;flex:0 0 auto;display:block;border-radius:var(--raio-carta);
  border:1px solid var(--ouro-fraco);box-shadow:0 6px 16px rgba(0,0,0,.45);
}
.revelacao .lado{flex:1;min-width:0}
.revelacao .cn{
  font-family:var(--serif);font-size:19px;font-weight:600;
  color:var(--ouro-forte);margin:0;line-height:1.16;
}
.revelacao .cp{
  font-size:11px;font-style:italic;font-weight:600;
  color:var(--teal);margin:3px 0 9px;
}
.revelacao .abre{font-size:14.2px;line-height:1.58;margin:0;color:#dfe9ec}

.revelacao .pt{
  display:flex;align-items:center;gap:8px;margin:0 0 7px;
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ouro-forte);font-weight:700;
}
.revelacao .pt .cad{margin-top:0}
.revelacao .pede{
  margin:11px 0 0;padding-left:18px;position:relative;
  font-size:12.5px;line-height:1.45;color:var(--texto-fraco);
}
/* cadeado aberto, em teal: é o que a compra destranca, não o que está preso */
.revelacao .pede::before{
  content:"";position:absolute;left:0;top:.52em;
  width:8px;height:6px;border-radius:1.5px;background:var(--teal);
}
.revelacao .pede::after{
  content:"";position:absolute;left:1.5px;top:.05em;
  width:5px;height:5px;border:1.5px solid var(--teal);
  border-bottom:0;border-radius:99px 99px 0 0;
}

/* ---- a tira fechada ---- */
.cofre{
  position:relative;overflow:hidden;margin:11px 0 0;
  border-radius:var(--raio-p);padding:12px 14px;
  background:
    repeating-linear-gradient(-45deg,rgba(227,198,141,.05) 0 7px,transparent 7px 14px),
    rgba(6,15,20,.55);
  border:1px solid rgba(227,198,141,.2);
  box-shadow:inset 0 0 20px rgba(0,0,0,.45);
}
/* clarão passando POR DENTRO da tira. Antes ele atravessava o cartão inteiro,
   inclusive por cima do texto legível, e ali não significava nada: o que está
   retido é o conteúdo da tira, então é a tira que tem que brilhar. */
.cofre::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 36%,rgba(255,255,255,.13) 50%,transparent 64%);
  transform:translateX(-120%);
  animation:varreCofre 4.2s ease-in-out infinite;
}
@keyframes varreCofre{0%{transform:translateX(-120%)}58%,100%{transform:translateX(120%)}}

/* frase retida: os degraus, agora sozinhos na tira e no corpo do texto */
.borrado{
  display:block;user-select:none;pointer-events:none;
  font-size:14.5px;line-height:1.72;color:#e9ddc2;
}
.borrado i{font-style:normal;display:inline}
.borrado i:nth-child(1){filter:blur(0);opacity:1}
.borrado i:nth-child(2){filter:blur(4px);opacity:.7}
.borrado i:nth-child(3){filter:blur(10px);opacity:.46}

/* ---- valor curto: grande, centrado, sozinho na tira ---- */
.revelacao .cofre{margin-top:13px}
/* folga a mais: o halo do borrão do glífo grande não pode bater no
   `overflow:hidden` da tira e virar um corte reto */
.cofre.valor{display:grid;place-items:center;padding:26px 14px}
.cofre .par{display:flex;align-items:baseline;gap:11px;user-select:none}
/* O borrão tem um ponto ideal estreito. Forte demais apaga o caractere e a
   tira lê como caixa vazia — não sobra nada pra querer. Fraco demais e dá pra
   ler. O que prende é o quase: dá pra ver que tem ALGO ali, com forma e
   tamanho, sem conseguir resolver o que é. Corpo grande e halo antes do blur
   porque um glifo pequeno some inteiro quando borrado: o blur espalha a mesma
   tinta por uma área muito maior e derruba o pico de opacidade. */
.cofre .v{
  font-family:var(--serif);font-size:40px;font-weight:600;line-height:1;
  letter-spacing:.04em;color:#fff6e2;
  text-shadow:0 0 14px rgba(244,220,170,.95);
  filter:blur(8px);min-width:1.3em;text-align:center;
}
/* Uma letra sozinha é o valor mais fácil de adivinhar da página: o olho
   reconstrói a silhueta inteira de um glífo único mesmo bem borrado, e a
   inicial da terceira presença estava sendo lida. Só aumentar o blur não
   resolve: apaga o glífo e a tira passa a ler como caixa vazia, e caixa
   vazia não dá vontade de nada. Então o corpo cresce JUNTO com o borrão —
   a mesma quantidade de tinta continua na tela, só que espalhada por uma
   área grande demais pra forma fechar. */
.cofre .v.solo{
  font-size:56px;letter-spacing:.08em;min-width:1.5em;
  filter:blur(13px);text-shadow:0 0 20px rgba(244,220,170,1);
}
.cofre .resto{font-family:var(--serif);font-size:23px;color:var(--ouro-forte)}

/* cadeado desenhado em CSS: corpo + arco, sem depender de fonte de ícone */
.cad{
  position:relative;display:inline-block;flex:0 0 auto;
  width:calc(10px * var(--esc,1));height:calc(8px * var(--esc,1));
  border-radius:2px;background:var(--cor,var(--ouro-forte));
  margin-top:calc(4px * var(--esc,1));
}
.cad::before{
  content:"";position:absolute;left:50%;translate:-50% 0;
  top:calc(-5px * var(--esc,1));
  width:calc(6px * var(--esc,1));height:calc(5px * var(--esc,1));
  border:calc(1.6px * var(--esc,1)) solid var(--cor,var(--ouro-forte));
  border-bottom:0;border-radius:99px 99px 0 0;
}

/* ============ oferta ============ */
.oferta{padding:26px 20px;margin:0 0 20px}
.oferta h2{font-family:var(--serif);font-size:25px;font-weight:600;line-height:1.22;margin:0 0 8px;text-align:center}
.oferta .lead{color:var(--texto-fraco);font-size:14.5px;text-align:center;margin:0 0 20px}
.lista{list-style:none;margin:0 0 22px;padding:0;text-align:left}
.lista li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:15.3px;line-height:1.5}
.lista li .ck{color:var(--teal);flex:0 0 auto;margin-top:.55em;
  width:6px;height:6px;border-radius:50%;background:var(--teal);font-size:0}

/* ------------------------------------------------------------
   O contador do que ficou retido.
   Estava deitado em linha, com o número à esquerda da frase, e
   nessa posição o "4" lia como marcador de lista. Empilhado e
   centrado ele volta a ser o que é: o dado da tela.
   ------------------------------------------------------------ */
.contatrancas{
  display:flex;flex-direction:column;align-items:center;gap:11px;
  margin:22px 0 18px;font-size:14px;color:var(--texto-fraco);
  text-align:center;line-height:1.42;
}
.contatrancas b{
  flex:0 0 auto;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(227,198,141,.12);border:1px solid var(--ouro-fraco);
  box-shadow:0 0 0 7px rgba(227,198,141,.05);
  color:var(--ouro-forte);font-family:var(--serif);font-size:27px;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.contatrancas span{max-width:26ch}

/* escrita da leitura surgindo linha a linha */
.escreve{opacity:0;filter:blur(4px);transform:translateY(6px);
  transition:opacity .7s ease,filter .7s ease,transform .7s ease}
.escreve.on{opacity:1;filter:blur(0);transform:none}

/* ============ depoimentos ============ */
.depo{
  background:var(--painel);border:0;
  border-radius:var(--raio);padding:16px 17px;margin:0 0 11px;text-align:left;
}
.depo .cab{display:flex;align-items:center;gap:11px;margin:0 0 9px}
.depo .av{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;object-fit:cover;
  border:1px solid var(--borda);background:linear-gradient(140deg,#25454f,var(--teal-fraco));
  display:grid;place-items:center;font-size:15px;font-weight:700;color:var(--teal-forte);
}
.depo .quem{flex:1;min-width:0}
.depo .nm{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:14.3px;font-weight:600;margin:0;line-height:1.25;
}
/* selo de verificado: o mesmo chip que prova social de aplicativo usa */
.depo .ver{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:600;color:var(--teal);
  background:var(--teal-fraco);border-radius:999px;padding:2px 9px 2px 6px;
}
.depo .ver .ck{
  position:relative;flex:0 0 auto;width:12px;height:12px;
  border-radius:50%;background:var(--teal);
}
.depo .ver .ck::after{
  content:"";position:absolute;left:4px;top:2.4px;width:3px;height:5.6px;
  border:solid #07231d;border-width:0 1.5px 1.5px 0;transform:rotate(42deg);
}
.depo .mt{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--texto-fraco);margin:4px 0 0;
}
.depo .uf{
  font-size:9.5px;font-weight:800;letter-spacing:.06em;color:var(--texto);
  background:rgba(255,255,255,.09);border-radius:var(--raio-pp);padding:2px 5px;
}
.depo .tx{font-size:14.3px;line-height:1.62;margin:0;color:var(--texto)}
.estrelas{color:var(--ouro);font-size:12px;letter-spacing:1px;margin:0 0 7px}

/* ============ carregando ============ */
.carregando{text-align:center;padding:22px 0}
.orbita{position:relative;width:170px;height:170px;margin:0 auto 26px}
.orbita .anelo{
  position:absolute;inset:0;border-radius:50%;
  border:1px dashed rgba(255,255,255,.16);
  animation:girao 14s linear infinite;
}
.orbita .anelo:nth-child(2){inset:18%;animation-duration:10s;animation-direction:reverse}
.orbita .anelo:nth-child(3){inset:34%;animation-duration:7s}
.orbita .anelo i{
  position:absolute;top:-4px;left:50%;translate:-50% 0;
  width:9px;height:9px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 12px rgba(79,216,182,.8);
}
.orbita .anelo:nth-child(2) i{background:var(--ouro);box-shadow:0 0 12px rgba(227,198,141,.8)}
.orbita .anelo:nth-child(3) i{background:#b79cf0;box-shadow:0 0 12px rgba(183,156,240,.8)}
.orbita .nucleo{
  position:absolute;inset:44%;border-radius:50%;
  background:radial-gradient(circle,var(--ouro-forte),rgba(227,198,141,.15));
  box-shadow:0 0 26px rgba(227,198,141,.6);
  animation:pulsa 2.4s ease-in-out infinite;
}
@keyframes girao{to{transform:rotate(360deg)}}
@keyframes pulsa{0%,100%{transform:scale(.88)}50%{transform:scale(1.14)}}

.ctit{font-family:var(--serif);font-size:20px;margin:0 0 24px}
.passos{display:flex;flex-direction:column;gap:11px;max-width:320px;margin:0 auto;text-align:left}
.passo{
  display:flex;gap:10px;align-items:center;font-size:14.5px;
  color:var(--texto-fraco);opacity:.3;transition:opacity .5s,color .5s;
  background:var(--painel);border:0;border-radius:var(--raio);padding:11px 14px;
}
.passo.on{opacity:1;color:var(--texto)}
.passo .ck{color:var(--teal)}

/* ============ rodapé fixo ============ */
.fixo{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--fundo) 70%,transparent);
}
.fixo .dentro{max-width:var(--larg);margin:0 auto}
.fixo .cta{margin:0;font-size:15.5px}

.rodape{
  text-align:center;color:var(--texto-fraco);font-size:11.5px;
  line-height:1.6;margin:30px 0 0;opacity:.7;
}

/* ============================================================
   O FECHO EM ATOS
   ------------------------------------------------------------
   Cada ato entra por baixo do anterior e a página rola até ele.
   O que já foi aberto continua na página: é isso que faz o valor
   acumular em vez de a pessoa só descer atrás do preço.
   ============================================================ */
.ato{animation:atoEntra .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes atoEntra{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.ato + .ato{margin-top:30px}

/* o portão entre um ato e o outro */
.proximo{margin:26px 0 2px}
.proximo::before{
  content:"";display:block;height:1px;margin:0 0 22px;
  background:linear-gradient(90deg,transparent,var(--ouro-fraco) 28%,var(--ouro-fraco) 72%,transparent);
}
.proximo .cta{margin-top:0}
.proximo .nota{margin-top:11px}

/* ------------------------------------------------------------
   O GANCHO DO PRIMEIRO ATO
   ------------------------------------------------------------
   A contagem estava dita dentro do balao, no fim de um paragrafo,
   e era ELA que tinha que fazer a pessoa apertar o botao. Frase
   enterrada em prosa nao puxa ninguem. Aqui o numero e o maior
   elemento da tela e nao divide espaco com mais nada: e a unica
   coisa que este painel diz.
   ------------------------------------------------------------ */
.revela{
  position:relative;overflow:hidden;text-align:center;
  margin:24px 0 2px;padding:26px 18px 22px;border-radius:var(--raio-g);
  background:
    radial-gradient(ellipse 100% 78% at 50% 20%,rgba(227,198,141,.15),transparent 66%),
    rgba(255,255,255,.035);
  border:1px solid var(--ouro-fraco);
}
.revela b{
  display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(72px,23vw,96px);line-height:.88;color:var(--ouro-forte);
  text-shadow:0 0 48px rgba(227,198,141,.45);
  font-variant-numeric:tabular-nums;
}
.revela .rot2{
  margin:10px auto 0;max-width:19ch;
  font-size:12.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--texto);font-weight:700;line-height:1.5;
}
.revela .sob{
  margin:16px auto 0;max-width:31ch;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:12.5px;color:var(--texto-fraco);line-height:1.55;
}
/* o <b> da linha de baixo nao pode herdar o corpo do numero gigante */
.revela .sob b{
  display:inline;font-family:inherit;font-size:inherit;line-height:inherit;
  color:var(--ouro-forte);text-shadow:none;
}

/* ---- o que o sistema captou: a ficha da pessoa, item a item ---- */
.captou{display:grid;gap:7px;margin:20px 0 2px}
.captou .item{
  display:flex;align-items:center;gap:10px;
  background:var(--painel);border-radius:var(--raio-p);
  padding:11px 14px;font-size:14px;
  animation:atoEntra .5s cubic-bezier(.2,.8,.2,1) both;
}
/* os quatro não entram no mesmo compasso: a ficha se preenchendo
   em intervalo irregular lê como leitura acontecendo, e não como
   lista com transição em escada */
.captou .item:nth-child(1){animation-delay:.18s}
.captou .item:nth-child(2){animation-delay:.46s}
.captou .item:nth-child(3){animation-delay:.68s}
.captou .item:nth-child(4){animation-delay:.99s}
.captou .ok{
  flex:0 0 auto;width:17px;height:17px;border-radius:50%;
  background:var(--teal-fraco);position:relative;
}
.captou .ok::after{
  content:"";position:absolute;left:5.6px;top:3.4px;width:4px;height:8px;
  border:solid var(--teal);border-width:0 1.7px 1.7px 0;transform:rotate(42deg);
}
.captou .k{color:var(--texto-fraco);flex:1;min-width:0}
.captou .v{
  color:var(--ouro-forte);font-weight:600;text-align:right;
  max-width:54%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}


/* ============================================================
   A FAIXA DE ESCALA
   ------------------------------------------------------------
   Mapa pontilhado do Brasil, a nota flutuando em cima e o total
   ancorado embaixo. O mapa é um .svg em `assets/` e não markup
   inline de propósito: são 769 pontos, que em <circle> no DOM
   custariam mais que a página inteira e ainda entrariam na árvore
   de acessibilidade. Como imagem, o navegador cacheia e ignora.

   ⚠️ Os números vêm de CASA_CFG.ESCALA e são EXEMPLO. Número de
   entrega e nota de avaliação são afirmação de fato: só publique
   o que você consegue provar.
   ============================================================ */
.escala{
  position:relative;overflow:hidden;border-radius:var(--raio-g);
  padding:14px 12px 18px;
  background:radial-gradient(ellipse 96% 64% at 50% 38%,#183a46,#0b181f);
  border:1px solid rgba(255,255,255,.05);
}
.escala .palco{position:relative;width:100%;max-width:290px;margin:0 auto;aspect-ratio:.97}
.escala .mapa{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;opacity:.55;pointer-events:none;
}
.escala .selo-nota{
  position:absolute;left:50%;top:1%;translate:-50% 0;z-index:2;
  display:flex;align-items:center;gap:13px;white-space:nowrap;
  background:linear-gradient(160deg,#f7ebd1,#e6cf9f);
  color:#22303a;border-radius:999px;padding:9px 19px 9px 16px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.escala .selo-nota .n{
  font-family:var(--serif);font-size:29px;font-weight:600;line-height:1;color:#1c2b33;
  font-variant-numeric:tabular-nums;
}
.escala .selo-nota .d{text-align:left}
.escala .selo-nota .q{margin:0;font-size:10.5px;color:#4a5a63;line-height:1.2}
.escala .selo-nota .es{margin:3px 0 0;font-size:12px;color:#199e6c;letter-spacing:2px;line-height:1}
.escala .selo-nota .qt{margin:3px 0 0;font-size:10px;color:#63737c;line-height:1.2}
.escala .fecho{position:absolute;left:0;right:0;bottom:1%;z-index:2;text-align:center}
.escala .grandao{
  font-family:var(--serif);font-weight:600;line-height:1;
  font-size:clamp(34px,10.5vw,46px);color:var(--ouro-forte);
  text-shadow:0 4px 28px rgba(0,0,0,.75);
}
.escala .frase{
  margin:7px 0 0;font-size:13.5px;color:var(--texto);
  text-shadow:0 2px 14px rgba(0,0,0,.85);
}

/* ---- preço único ---- */
.preco{
  text-align:center;margin:2px 0 18px;padding:18px 14px;
  border-radius:var(--raio);background:rgba(8,18,23,.42);
  border:1px solid var(--ouro-fraco);
}
.preco .antes{margin:0;font-size:13px;color:var(--texto-fraco)}
.preco .antes s{opacity:.8}
.preco .agora{
  margin:5px 0 0;font-family:var(--serif);font-weight:600;line-height:1;
  font-size:clamp(38px,12vw,50px);color:var(--ouro-forte);
  text-shadow:0 0 36px rgba(227,198,141,.26);
}
.preco .obs{margin:10px 0 0;font-size:12.5px;color:var(--texto-fraco)}

/* ------------------------------------------------------------
   A dica de rolagem do fecho.
   A mesma mao do ritual do dedo, agora descendo: e o gesto que a
   pessoa vai fazer, nao um icone que representa o gesto.
   ------------------------------------------------------------ */
.deslize{
  position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));
  translate:-50% 0;z-index:25;width:38px;pointer-events:none;
  opacity:0;animation:deslizeEntra .45s ease-out forwards;
  filter:drop-shadow(0 7px 16px rgba(0,0,0,.75));
}
@keyframes deslizeEntra{to{opacity:.95}}
.deslize svg{
  width:100%;height:auto;display:block;
  stroke:#0f1e25;fill:#f6f0e4;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  animation:deslizaMao 2s cubic-bezier(.4,0,.3,1) infinite;
}
@keyframes deslizaMao{
  0%  {transform:translateY(-11px);opacity:.1}
  20% {opacity:1}
  60% {transform:translateY(19px);opacity:1}
  100%{transform:translateY(30px);opacity:0}
}
/* a seta desce logo atras da mao, meio ciclo depois */
.deslize::after{
  content:"";position:absolute;left:50%;bottom:-19px;
  width:13px;height:13px;margin-left:-8px;
  border-right:2px solid var(--teal-forte);border-bottom:2px solid var(--teal-forte);
  animation:deslizaSeta 2s cubic-bezier(.4,0,.3,1) infinite .18s;
}
@keyframes deslizaSeta{
  0%  {transform:rotate(45deg) translate(-6px,-6px);opacity:0}
  30% {opacity:.9}
  70% {transform:rotate(45deg) translate(5px,5px);opacity:.55}
  100%{transform:rotate(45deg) translate(9px,9px);opacity:0}
}
.deslize.saiu{opacity:0;transition:opacity .35s}

/* ============================================================
   MOVIMENTO REDUZIDO
   ------------------------------------------------------------
   ⚠️ Aqui existia `*{animation-duration:.01ms!important}`, que apagava
   TODA animação da página — embaralho, virada, scan, tudo. E não é um
   caso raro: o Windows 11 desliga "Efeitos de animação" sozinho em
   modo economia de bateria e em máquina fraca, e o Chrome passa isso
   pra cá como prefers-reduced-motion. Ou seja: parte do tráfego via
   um funil sem nenhuma animação.

   A regra certa é cirúrgica. O que o ajuste protege é enjoo vestibular,
   causado por movimento GRANDE, CONTÍNUO e PERIFÉRICO. Então corta-se o
   enfeite que roda pra sempre no canto do olho, e mantém-se o ritual
   (embaralho, virada, scan): ele é curto, fica no centro da atenção e
   carrega informação. Tirar o embaralho não é acessibilidade, é apagar
   a frase "o seu baralho está sendo embaralhado".

   Uma armadilha que já caiu aqui: encurtar a duração não é suavizar.
   Animação mais curta é animação mais RÁPIDA, ou seja, pior justamente
   pra quem o ajuste protege. Por isso nada aqui mexe em duração.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  /* laços decorativos infinitos: saem de cena */
  .ceu i,
  .cofre::after,
  .alvo .dedo,
  .alvo .mira,
  .alvo .conv,
  .selo-letra .anel-l,
  .orbita .anelo,
  .fio.ligado .linha,
  .energia .grade,
  .energia .onda,
  .carta3d:not(.aberta) .giro,
  .carta3d:not(.aberta)::after,
  .carta3d:not(.aberta) .tras,
  .rotulo-alvo::before,
  .rotulo-alvo::after,
  .deslize svg,
  .deslize::after{
    animation:none!important;
  }
  /* sem o laço, os anéis do alvo somem em vez de congelar meio abertos */
  .alvo .conv{opacity:0!important}
  /* a mão para de acenar mas fica na tela: ali ela carrega informação
     (a página continua embaixo), não é enfeite rodando no canto do olho */
  .deslize::after{transform:rotate(45deg);opacity:.8}
}