/* ═══════════════════════════════════════════════════════════════
   Mãe Kassia — interface da cliente

   Direção: luz de vela num quarto à noite. A luz cai de cima, é âmbar
   e baixa, e o resto se dissolve no escuro. Tudo que importa fica no
   halo; o resto recua.

   Tema único, noturno, de propósito: consulta de tarot é coisa de
   madrugada, e uma versão clara seria pior. Por isso toda cor é
   pintada explicitamente, sem depender do tema de quem hospeda.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── o crepúsculo ──
     Tirado do céu noturno da carta da Lua (#203542) e do rio dela
     (#2D6681), com o violeta da Sacerdotisa entrando pelo meio do
     gradiente. Nada aqui tem borda: o que separa um plano do outro é
     luz, nunca linha. */
  --noite:#1B2430;          /* a bruma funda, o chão de tudo */
  --quarto:#1F2B38;         /* onde o azul ainda ganha do violeta */
  --violeta:#241E38;        /* o meio do céu, onde ele vira roxo */
  --mesa:rgba(255,255,255,.06);   /* vidro: um plano é mais luz, não outra cor */
  --vidro:rgba(255,255,255,.05);
  --vidro-alto:rgba(255,255,255,.09);

  /* as vozes */
  --dela:rgba(255,255,255,.075);  /* a Kassia: névoa clara */
  --dela-borda:transparent;
  --eu:rgba(127,179,200,.17);     /* a cliente: a água da carta */
  --eu-borda:transparent;

  /* a tinta — a escala foi medida, não escolhida no olho.
     Pior caso (sobre o balão) em ordem: 9,7 · 6,2 · 4,7 · 3,1. */
  --tinta:#E7EDF3;          /* texto principal */
  --tinta2:#B4C1CE;         /* secundário */
  --tinta3:#9BA8B6;         /* pequeno, mas ainda para ler */
  --tinta4:#78879A;         /* só decoração: marca-d'água, ornamento */

  /* a luz */
  --brasa:#7FB3C8;          /* a água: é ela que marca onde a mão toca */
  --brasa-rgb:127,179,200;  /* os mesmos canais, para compor com alfa */
  --brasa-viva:#A6CEDD;
  --brasa-fundo:rgba(127,179,200,.16);
  --ouro:#E8D4A0;           /* um fio de ouro pálido, e só quando precisa */

  --linha:rgba(255,255,255,.09);
  --linha-fraca:rgba(255,255,255,.06);
  --verde:#7FC0A0;
  --sangue:#D98A80;

  --t:"Cormorant Garamond",Georgia,serif;
  --c:"Karla","Segoe UI",system-ui,sans-serif;

  --r:18px;                 /* raio generoso: nada corta o olho */
  --r-g:24px;
  --gav:.5rem;                   /* respiro interno da gaveta */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--noite);color:var(--tinta);
  font-family:var(--c);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* a vela: luz que desce do alto e some nas bordas */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(90% 44% at 50% -4%, rgba(127,179,200,.20), transparent 66%),
    linear-gradient(168deg, var(--quarto) 0%, var(--violeta) 58%, var(--noite) 100%);
}

/* ─────────── moldura ─────────── */

.tela{position:relative;z-index:1;max-width:33rem;margin:0 auto;height:100dvh;
  display:flex;flex-direction:column;background:var(--quarto);
  box-shadow:0 0 90px -20px rgba(0,0,0,.9)}

.cab{display:flex;align-items:center;gap:.75rem;padding:.85rem 1.1rem;flex-shrink:0;
  background:transparent;
  border-bottom:1px solid var(--linha);position:relative}
.cab::after{content:"";position:absolute;left:1.1rem;right:1.1rem;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--brasa-rgb),.35),transparent)}

.avatar{width:2.5rem;height:2.5rem;flex-shrink:0;display:grid;place-items:center}
.avatar img{width:100%;height:100%;display:block;
  /* o halo acompanha o desenho, nao um circulo em volta dele: a lua ja
     tem forma propria e moldura so competiria com ela */
  filter:drop-shadow(0 0 7px rgba(var(--brasa-rgb),.55))}

.cab .nome{font-family:var(--t);font-size:1.08rem;letter-spacing:.03em;line-height:1.2;color:var(--tinta)}
.cab .status{font-size:.7rem;color:var(--tinta3);letter-spacing:.04em}
.cab .status.digitando{color:var(--brasa)}

.reiniciar{margin-left:auto;color:var(--tinta3);text-decoration:none;font-size:1.05rem;
  padding:.3rem .45rem;border-radius:7px;line-height:1;background:none;border:none;
  font-family:inherit;cursor:pointer;transition:color .18s,background .18s}
.reiniciar:hover{color:var(--brasa);background:rgba(var(--brasa-rgb),.10)}
.reiniciar + .reiniciar{margin-left:0}

/* ─────────── conversa ─────────── */

.fluxo{flex:1;overflow-y:auto;padding:1.4rem 1rem 1.8rem;
  display:flex;flex-direction:column;gap:.5rem;scrollbar-width:thin;
  scrollbar-color:var(--linha) transparent}
.fluxo::-webkit-scrollbar{width:5px}
.fluxo::-webkit-scrollbar-thumb{background:var(--linha);border-radius:3px}

.balao{max-width:86%;padding:.7rem .95rem;font-size:.955rem;word-wrap:break-word;
  animation:sobe .34s cubic-bezier(.22,.9,.32,1) both}
.balao.ela{align-self:flex-start;background:var(--dela);color:var(--tinta);
  border:1px solid var(--dela-borda);border-radius:14px 14px 14px 5px}
.balao.eu{align-self:flex-end;background:var(--eu);color:#DCE6EC;
  border:1px solid var(--eu-borda);border-radius:14px 14px 5px 14px}

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

/* respirar, não pular */
.pensando{align-self:flex-start;background:var(--dela);border:1px solid var(--dela-borda);
  border-radius:14px 14px 14px 5px;padding:.75rem .95rem;display:flex;gap:.32rem;align-items:center}
.pensando i{width:.4rem;height:.4rem;border-radius:50%;background:var(--brasa);
  animation:respira 1.9s ease-in-out infinite}
.pensando i:nth-child(2){animation-delay:.28s}
.pensando i:nth-child(3){animation-delay:.56s}
@keyframes respira{0%,100%{opacity:.2;transform:scale(.72)}45%{opacity:1;transform:scale(1)}}

/* ─────────── a carta ─────────── */
/* É o momento da leitura. Chega sozinha, no centro, com halo de vela. */

.carta-msg{align-self:center;width:min(15rem,72%);margin:1.1rem 0 .9rem;text-align:center;
  animation:vira .78s cubic-bezier(.2,.75,.25,1) both}
.carta-msg img{width:100%;display:block;border-radius:10px;aspect-ratio:768/1376;object-fit:cover;
  border:0}
.carta-msg.inv img{transform:rotate(180deg)}

.carta-msg .legenda{margin-top:.7rem}
.carta-msg .legenda b{display:block;font-family:var(--t);font-size:1.04rem;font-weight:400;
  letter-spacing:.055em;color:var(--brasa-viva);line-height:1.3}
.carta-msg .legenda i{display:inline-block;font-style:normal;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sangue);margin-top:.22rem}
.carta-msg .legenda span{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta3);margin-top:.3rem}

@keyframes vira{
  0%{opacity:0;transform:translateY(16px) scale(.9) rotate(-2.5deg)}
  55%{opacity:1}
  100%{opacity:1;transform:none}
}

/* ─────────── PIX ─────────── */
/* Um objeto na mesa, não um widget de checkout. */

.pix-msg{align-self:center;width:min(14.5rem,74%);margin:.9rem 0;text-align:center;
  background:var(--mesa);border:1px solid var(--linha);border-radius:14px;padding:.85rem;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.95);animation:sobe .4s ease both}
.pix-qr{width:100%;display:block;border-radius:9px;background:#F6F1E8;padding:.55rem}
.pix-valor{font-family:var(--t);font-size:1.5rem;letter-spacing:.03em;color:var(--brasa-viva);
  margin:.6rem 0 .15rem}
.pix-dica{font-size:.7rem;color:var(--tinta3);line-height:1.4;margin-bottom:.5rem}
.pix-codigo{font-size:.55rem;line-height:1.4;color:var(--tinta3);background:var(--noite);
  border:1px solid var(--linha);border-radius:7px;padding:.45rem;word-break:break-all;
  max-height:3.2rem;overflow:hidden;text-align:left;user-select:all}
.pix-copiar{width:100%;margin-top:.55rem;font-family:var(--c);font-size:.85rem;font-weight:600;
  letter-spacing:.02em;background:var(--brasa);color:#12212A;border:none;border-radius:9px;
  padding:.6rem;cursor:pointer;transition:filter .18s}
.pix-copiar:hover{filter:brightness(1.12)}
.pix-copiar.feito{background:var(--verde);color:#0C1710}
.pix-msg.pago{opacity:.5}
.pix-msg.pago .pix-codigo,.pix-msg.pago .pix-copiar{display:none}
.pix-msg.pago .pix-dica::after{content:" · confirmado";color:var(--verde)}
.pix-msg.pago .planos{display:none}

/* ─────────── escolha de plano ─────────── */
/* Dentro do proprio bloco de PIX, porque tirar a pessoa da conversa para
   um checkout e' onde ela desiste. A opcao ativa e' a unica que recebe
   luz; as outras ficam em brasa apagada ate o dedo passar por cima. */
.planos{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--linha)}
.planos-tit{font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--tinta3);margin-bottom:.45rem}
.plano{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 .5rem;
  width:100%;margin-bottom:.3rem;padding:.45rem .55rem;text-align:left;cursor:pointer;
  font-family:var(--c);color:var(--tinta2);background:transparent;
  border:1px solid var(--linha);border-radius:9px;
  transition:border-color .18s,background .18s,color .18s}
.plano:hover:not(:disabled){border-color:var(--brasa);color:var(--tinta)}
.plano.ativo{border-color:var(--brasa);background:var(--brasa-fundo);color:var(--tinta)}
.plano-q{font-size:.78rem;font-weight:500}
.plano-v{font-family:var(--t);font-size:.92rem;color:var(--brasa-viva);
  font-variant-numeric:tabular-nums}
.plano-c{grid-column:1/-1;font-size:.6rem;color:var(--verde);margin-top:.1rem}
.plano:disabled{opacity:.45;cursor:default}
.plano.trocando{opacity:.5}
.plano.falhou{border-color:var(--sangue)}
/* mesmo .6rem do titulo e das linhas: as tres bordas esquerdas caem na
   mesma vertical. */

.planos-pe{font-size:.6rem;line-height:1.4;color:var(--tinta3);margin-top:.4rem;text-align:center}

/* ─────────── campo ─────────── */

.barra{display:block;padding:.7rem .95rem .3rem;flex-shrink:0;
  background:var(--quarto);border-top:1px solid var(--linha)}
.compositor{display:flex;align-items:flex-end;gap:.55rem;
  padding:5px 5px 5px 1rem;border-radius:24px;
  background:var(--noite);border:1px solid var(--linha);
  transition:background .18s,box-shadow .18s,border-color .18s}
.compositor:focus-within{border-color:var(--brasa)}
.barra textarea{flex:1;min-width:0;font-family:var(--c);font-size:.95rem;line-height:1.45;
  color:var(--tinta);background:transparent;border:0;border-radius:0;outline:none;
  padding:.5rem 0;resize:none;overflow-y:hidden;max-height:150px;min-height:2.35rem}
.barra textarea::placeholder{color:var(--tinta3)}
/* Enquanto não há o que enviar, o botão recua. Nada pisca, nada aparece
   do nada: só a diferença entre estar pronto e não estar. */
.barra textarea:placeholder-shown + button{opacity:.4}
.barra button{width:2.35rem;height:2.35rem;flex-shrink:0;border:none;border-radius:50%;
  background:var(--brasa);color:#12212A;font-size:.9rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:filter .18s,transform .18s,opacity .18s}
.barra button:hover{filter:brightness(1.12)}
.barra button:active{transform:scale(.94)}
.barra button:disabled{opacity:.35;cursor:not-allowed}
.barra button:focus-visible,.pix-copiar:focus-visible,.plano:focus-visible{
  outline:1px solid var(--brasa-viva);outline-offset:-3px}
.reiniciar:focus-visible{outline:none;color:var(--brasa);background:rgba(var(--brasa-rgb),.14)}

.rodape{margin:0;padding:.4rem .9rem .65rem;text-align:center;font-size:.64rem;line-height:1.5;
  color:var(--tinta3);background:var(--quarto);flex-shrink:0}
.rodape b{color:var(--tinta2)}

.erro-box{align-self:center;background:rgba(180,84,74,.14);color:#E0A59D;
  border:1px solid rgba(180,84,74,.3);border-radius:9px;padding:.5rem .8rem;
  font-size:.82rem;max-width:88%;text-align:center}

/* ─────────── sino e consultas ─────────── */
/* O sino puxa o olho de um jeito que um hamburguer nunca puxa: ele
   promete que tem coisa dela ali dentro. */

/* Dois botoes, dois trabalhos. Antes era um sino so' guardando saldo,
   historico e "nova consulta" — um icone de notificacao anunciando tres
   coisas que nao sao notificacao. */
.cab .quem{flex:1;min-width:0}
.cab-btn{position:relative;width:2.3rem;height:2.3rem;flex-shrink:0;
  display:grid;place-items:center;background:none;border:none;cursor:pointer;
  color:var(--tinta3);border-radius:9px;text-decoration:none;
  transition:color .18s,background .18s}
.cab-btn[hidden]{display:none}
.cab-btn svg{width:1.2rem;height:1.2rem}
.cab-btn:hover{color:var(--brasa);background:rgba(var(--brasa-rgb),.10)}
/* Apagado, nao escondido: sumir com o botao mudaria o cabecalho embaixo do
   nariz dela. Apagado ele explica que existe e que ainda nao serve. */
.cab-btn.inativa{color:var(--tinta4);opacity:.5;cursor:default}
.cab-btn.inativa:hover{color:var(--tinta4);background:none}
.cab-btn:focus-visible{outline:none;color:var(--brasa);background:rgba(var(--brasa-rgb),.14)}

/* O bolso mostra o numero ao lado da carta, nao um badge: badge e' alerta,
   e ter carta nao e' alerta — e' patrimonio. */
/* Os tres glifos no mesmo tamanho: o leque precisava de folga extra, uma
   carta so' nao precisa. */
.bolso.tem{color:var(--brasa)}

.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* O numero desce se for centrado por line-height: *{box-sizing:border-box}
   somado a borda de 2px deixa a caixa interna com 12.3px, e a linha pedia
   16.3px — sobrava tudo pra baixo. grid+place-items centra na caixa que
   existe de verdade, seja qual for a borda.
   border-radius maior que a altura mantem pilula quando chegar em 2 digitos,
   e tabular-nums impede a pastilha de mudar de largura a cada numero. */
/* Menor e mais no canto que a versao anterior: com 1.02rem ele cobria a
   carta da direita do leque, e leque sem as pontas abertas nao e' leque.
   Assim ele morde so' o cantinho vazio do glifo. */
.cab-btn .conta{position:absolute;top:.06rem;right:.06rem;
  display:grid;place-items:center;
  /* padding curto de proposito: com um digito o min-width manda e a
     pastilha sai redonda; com dois ela cresce e vira pilula. */
  min-width:.88rem;height:.88rem;padding:0 .13rem;
  border-radius:1rem;color:#12212A;
  font-size:.56rem;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;
  border:1.75px solid var(--noite);
  /* saldo nao pisca: pulso e' pedido de atencao, e ter carta nao e'
     urgencia. Zerado ele fica cinza — some do olho sem sumir da tela,
     porque quantas cartas ela tem e' informacao, nao notificacao. */
  background:var(--tinta4)}
.bolso.tem .conta{background:var(--brasa)}
/* display:grid atropela o [hidden] nativo; devolvendo ele. */
.cab-btn .conta[hidden]{display:none}

/* painel ancorado no sino, nao modal cobrindo tudo */
.gaveta[hidden]{display:none}
.gaveta{position:absolute;inset:0;z-index:20;background:rgba(6,4,10,.55);
  backdrop-filter:blur(2px);display:block;animation:apaga .16s ease both}
@keyframes apaga{from{opacity:0}to{opacity:1}}

/* A gaveta mora dentro da .sala, entao a conta e' feita a partir dela: a
   sala recua .7rem da tela, o sino recua 1.15rem — a diferenca, .45rem, e'
   o que alinha a borda direita do painel com a borda direita do sino.
   Sem overflow:hidden — os filhos ja andam pra dentro pelo --gav, e a seta
   precisa poder sair pra cima. */
.gaveta-caixa{position:absolute;top:.3rem;right:.45rem;left:.45rem;max-width:19.5rem;
  margin-left:auto;padding:0 var(--gav) var(--gav);
  background:var(--mesa);border:1px solid var(--linha);border-radius:13px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.95);
  animation:cai .22s cubic-bezier(.2,.9,.3,1) both}
@keyframes cai{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
/* a setinha apontando para o sino */
/* Sem seta, de proposito. O sino fica a 18px da borda e o painel tem 24px
   de raio: qualquer bico ali cai em cima da curva e sobra um degrau. O
   vinculo com o sino e' feito de outro jeito — borda direita alinhada com
   a dele, e o proprio sino acende enquanto a gaveta esta aberta. */
.cab-btn.aberto{color:var(--brasa);background:rgba(var(--brasa-rgb),.16)}

.gaveta-topo{position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:.62rem .6rem .6rem;font-family:var(--t);font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta3)}
/* o risco recua junto com o resto: linha cheia encostaria no canto redondo */
.gaveta-topo::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:0;
  height:1px;background:var(--linha)}
.gaveta-topo button{display:grid;place-items:center;width:1.9rem;height:1.9rem;
  margin:-.45rem -.35rem -.45rem 0;background:none;border:none;border-radius:50%;
  font-size:1.15rem;color:var(--tinta3);cursor:pointer;line-height:1;padding:0;
  transition:color .16s,background .16s}
.gaveta-topo button:hover{color:var(--brasa);background:rgba(var(--brasa-rgb),.10)}

#lista-consultas{max-height:52vh;overflow-y:auto;overscroll-behavior:contain;
  margin-top:.4rem;scrollbar-width:thin;scrollbar-color:var(--linha) transparent}
#lista-consultas::-webkit-scrollbar{width:4px}
#lista-consultas::-webkit-scrollbar-thumb{background:var(--linha);border-radius:2px}

.item{display:flex;align-items:center;gap:.7rem;padding:.55rem .6rem;text-decoration:none;
  color:var(--tinta);border-top:1px solid rgba(41,31,51,.6);transition:background .16s}
.item + .item{margin-top:2px}
.item:hover{background:rgba(var(--brasa-rgb),.06)}
.item.atual{background:rgba(var(--brasa-rgb),.08)}

/* leque de cartas: a leitura dela, em miniatura */
.leque{position:relative;width:2.5rem;height:2.5rem;flex-shrink:0;display:block}
.leque img{position:absolute;top:50%;left:50%;width:1.3rem;border-radius:2px;
  border:1px solid rgba(var(--brasa-rgb),.35);box-shadow:0 2px 6px -2px rgba(0,0,0,.9);
  transform:translate(-50%,-50%) rotate(calc((var(--i) - 1) * 13deg))
            translateX(calc((var(--i) - 1) * 6px))}
.leque.vazio{display:grid;place-items:center}
.leque.vazio::after{content:"";width:1.05rem;height:1.05rem;border-radius:50%;
  box-shadow:inset -4px -1px 0 0 rgba(231,237,243,.5)}

.item .txt{flex:1;min-width:0}
.item .txt b{display:block;font-family:var(--t);font-weight:400;font-size:.94rem;
  letter-spacing:.035em;color:var(--brasa-viva);line-height:1.25}
.item .txt i{display:block;font-style:normal;font-size:.74rem;color:var(--tinta3);
  line-height:1.35;margin-top:.1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .quando{font-size:.66rem;color:var(--tinta3);flex-shrink:0;letter-spacing:.03em}

#lista-consultas .vazio{margin:0;padding:1.1rem .6rem;font-size:.82rem;
  color:var(--tinta3);text-align:center}

@media (prefers-reduced-motion:reduce){
  .balao,.carta-msg,.pix-msg,.gaveta,.gaveta-caixa{animation:none}
  .pensando i,.cab-btn .conta{animation:none}
  .pensando i{opacity:.65}
}

/* ═══════════════════════════════════════════════════════════════
   Entrada e fila — o limiar

   Ela chega de madrugada, no celular, provavelmente machucada.
   A primeira tela tem que parecer um lugar onde dá para falar,
   não um formulário. Muito ar, pouca coisa, luz baixa.
   ═══════════════════════════════════════════════════════════════ */

.tela-entrada{background:var(--noite);min-height:100dvh;display:grid;place-items:center;
  padding:2rem 1.4rem;position:relative;z-index:1}
.entrada{width:100%;max-width:21rem;text-align:center}

.luar{font-size:2.2rem;line-height:1;margin-bottom:1.1rem;
  filter:drop-shadow(0 0 22px rgba(var(--brasa-rgb),.55))}
.luar.girando{animation:flutua 5.5s ease-in-out infinite}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.entrada h1{font-family:var(--t);font-weight:400;font-size:clamp(1.9rem,7vw,2.5rem);
  letter-spacing:.06em;line-height:1.15;margin:0 0 .7rem;color:var(--tinta);
  text-wrap:balance}
.entrada .chamada{font-size:.98rem;line-height:1.6;color:var(--tinta2);margin:0 0 2rem;
  text-wrap:balance}

/* O campo tem que parecer campo. Tirar a borda ficou bonito e ruim:
   sem caixa some o convite de digitar, e serifa de titulo dentro de input
   nao assenta. Aqui a moldura fica, so que trabalhada. */
.form-entrada{text-align:left}
.form-entrada label{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta3);margin-bottom:.5rem}
.form-entrada input{width:100%;font-family:var(--c);font-size:1rem;color:var(--tinta);
  background:var(--mesa);border:1px solid var(--linha);border-radius:10px;
  padding:.85rem 1rem;margin-bottom:1.1rem;
  transition:border-color .2s,background .2s}
.form-entrada input::placeholder{color:var(--tinta3)}
.form-entrada input:hover{background:var(--vidro-alto)}
/* Uma coisa muda, nao tres. A borda acender ja diz onde o cursor esta,
   com contraste de sobra — halo e anel por cima seria enfeite. */
.form-entrada input:focus,
.form-entrada input:focus-visible{outline:none;background:var(--vidro-alto)}
.form-entrada button{width:100%;font-family:var(--c);font-size:.95rem;font-weight:600;
  letter-spacing:.04em;background:var(--brasa);color:#12212A;border:none;border-radius:10px;
  padding:.85rem;cursor:pointer;transition:filter .18s,transform .18s}
.form-entrada button:hover{filter:brightness(1.12)}
.form-entrada button:active{transform:scale(.985)}
.form-entrada button:focus-visible{outline:1px solid var(--brasa-viva);outline-offset:-3px}
/* ─────────── portas de entrada ─────────── */
/* A home nao podia presumir coracao partido: quem chega para decidir sobre
   um emprego tinha de traduzir a propria situacao para caber numa frase de
   amor. As portas deixam ela se reconhecer em vez de traduzir. */
.rotulo-portas{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta3);margin-bottom:.5rem}
.portas{position:relative;display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.3rem}
.portas input[type=radio]{position:absolute;width:1px;height:1px;margin:0;opacity:0;
  pointer-events:none}
.form-entrada label.porta{display:inline-block;margin:0;padding:.42rem .72rem;
  font-size:.8rem;letter-spacing:0;text-transform:none;color:var(--tinta2);
  background:var(--mesa);border:1px solid var(--linha);border-radius:999px;cursor:pointer;
  transition:border-color .18s,background .18s,color .18s}
.form-entrada label.porta:hover{background:var(--vidro-alto);color:var(--tinta)}
.portas input[type=radio]:checked + label.porta{border-color:var(--brasa);
  background:var(--brasa-fundo);color:var(--tinta)}
.portas input[type=radio]:focus-visible + label.porta{outline:1px solid var(--brasa-viva);
  outline-offset:2px}

/* Como a Kassia fala com a pessoa. Mesma pastilha das portas, de proposito:
   e' a mesma natureza de escolha, e inventar um controle novo aqui so' faria
   o formulario parecer maior do que e'. Menor e mais junto que as portas
   porque e' ajuste, nao assunto: o olho passa por cima sem parar. */
.rotulo-trato{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta3);margin:0 0 .45rem}
.tratos{position:relative;display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.1rem}
.tratos input[type=radio]{position:absolute;width:1px;height:1px;margin:0;opacity:0;
  pointer-events:none}
.form-entrada label.trato{display:inline-block;margin:0;padding:.34rem .64rem;
  font-size:.76rem;letter-spacing:0;text-transform:none;color:var(--tinta2);
  background:var(--mesa);border:1px solid var(--linha);border-radius:999px;cursor:pointer;
  transition:border-color .18s,background .18s,color .18s}
.form-entrada label.trato:hover{background:var(--vidro-alto);color:var(--tinta)}
.tratos input[type=radio]:checked + label.trato{border-color:var(--brasa);
  background:var(--brasa-fundo);color:var(--tinta)}
.tratos input[type=radio]:focus-visible + label.trato{outline:1px solid var(--brasa-viva);
  outline-offset:2px}

.sem-cartas{text-align:center}
.sc-oi{font-family:var(--t);font-size:1.3rem;color:var(--tinta);margin:0 0 .5rem}
.sc-oi b{font-weight:400;color:var(--brasa-viva)}
.sc-txt{font-size:.92rem;line-height:1.55;color:var(--tinta2);margin:0 0 1.2rem}
.sem-cartas .botao-texto{width:100%;text-align:center}
.sc-pe{margin:.9rem 0 0;font-size:.74rem}
.sc-pe a{color:var(--tinta3);text-decoration:underline;text-underline-offset:2px}

.ja-conhecida{margin:0 0 1.1rem;padding:.7rem .85rem;border-radius:14px;
  background:var(--brasa-fundo);font-size:.88rem;line-height:1.5;color:var(--tinta2)}
.ja-conhecida b{color:var(--tinta);font-weight:600}
.ja-conhecida a{display:block;margin-top:.15rem;font-size:.72rem;color:var(--tinta3);
  text-decoration:underline;text-underline-offset:2px}
.ja-conhecida a:hover{color:var(--brasa-viva)}

.dica-campo{margin:-.75rem 0 1.1rem;font-size:.76rem;line-height:1.45;color:var(--tinta3)}

.erro-entrada{background:rgba(180,84,74,.14);color:#E0A59D;border-radius:7px;padding:.5rem .7rem;
  font-size:.83rem;margin-bottom:.9rem}

.vagas{margin-top:1.5rem;font-size:.78rem;color:var(--tinta3);display:flex;align-items:center;
  justify-content:center;gap:.5rem;letter-spacing:.02em}
.vagas b{color:var(--brasa);font-weight:500}
.ponto{width:.4rem;height:.4rem;border-radius:50%;background:var(--verde);flex-shrink:0;
  box-shadow:0 0 8px var(--verde);animation:pulsa 2.8s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.3}}

.esgotado{border:1px solid var(--linha);border-radius:12px;padding:1.3rem;background:var(--mesa)}
.esgotado b{display:block;font-family:var(--t);font-size:1.1rem;letter-spacing:.04em;
  margin-bottom:.5rem;color:var(--brasa-viva)}
.esgotado span{font-size:.88rem;line-height:1.55;color:var(--tinta2)}

.aviso-pe{margin:2.2rem 0 0;font-size:.66rem;line-height:1.65;color:var(--tinta3);letter-spacing:.01em}
.aviso-pe b{color:var(--tinta2)}

/* ── a espera ── */

.posicao{border:1px solid var(--linha);border-radius:12px;padding:1.05rem 1.15rem;
  margin-bottom:1.8rem;background:var(--mesa)}
.posicao b{display:block;font-family:var(--t);font-size:1.12rem;letter-spacing:.035em;
  color:var(--brasa-viva);margin-bottom:.35rem;line-height:1.3;text-wrap:balance}
.posicao span{font-size:.82rem;color:var(--tinta2);line-height:1.5}

.ritual{list-style:none;padding:0;margin:0 0 1.9rem;text-align:left}
.ritual li{font-size:.88rem;color:var(--tinta3);padding:.5rem 0 .5rem 1.75rem;position:relative;
  transition:color .6s ease;letter-spacing:.01em}
.ritual li::before{content:"·";position:absolute;left:.4rem;top:.5rem;font-size:1.1rem;line-height:1}
.ritual li.feito{color:var(--tinta2)}
.ritual li.feito::before{content:"·";color:var(--verde)}
.ritual li.agora{color:var(--tinta)}
.ritual li.agora::before{content:"";left:.42rem;top:.95rem;width:.4rem;height:.4rem;border-radius:50%;
  background:var(--brasa);box-shadow:0 0 10px var(--brasa);animation:pulsa 1.8s ease-in-out infinite}

.tempo{margin-bottom:.9rem}
.tempo span{display:block;font-family:var(--t);font-size:2.6rem;letter-spacing:.06em;
  color:var(--brasa-viva);line-height:1.05;font-variant-numeric:tabular-nums}
.tempo small{font-size:.68rem;color:var(--tinta3);letter-spacing:.1em;text-transform:uppercase}
.trilho{height:2px;background:var(--linha);border-radius:2px;overflow:hidden}
.trilho i{display:block;height:100%;width:0;transition:width 1s linear;
  background:linear-gradient(90deg,rgba(var(--brasa-rgb),.4),var(--brasa))}

@media (prefers-reduced-motion:reduce){
  .luar.girando,.ponto,.ritual li.agora::before{animation:none}
}

/* uma linha só, sobre o ritual — não sobre o que custa */
.oferta-clara{margin-top:1.4rem;text-align:center}
.oferta-clara b{display:block;font-family:var(--t);font-weight:400;font-size:.96rem;
  letter-spacing:.05em;color:var(--tinta2)}
.vagas{margin-top:.9rem}

.volta{margin:1.3rem 0 0;font-size:.8rem;color:var(--tinta3)}
.volta a{color:var(--brasa);text-decoration:none;border-bottom:1px solid rgba(var(--brasa-rgb),.35)}
.volta a:hover{border-bottom-color:var(--brasa)}
.aviso-ok{background:rgba(92,154,120,.14);color:#8FCBA9;border-radius:7px;padding:.6rem .75rem;
  font-size:.84rem;line-height:1.45;margin-bottom:.9rem}
.form-entrada label + input + label{margin-top:.2rem}

/* outros pacotes, discretos: o avulso continua sendo o caminho rápido */
.planos{display:flex;flex-direction:column;gap:.3rem;margin-top:.55rem;
  padding-top:.55rem;border-top:1px solid var(--linha)}
.troca-plano{background:none;border:1px solid var(--linha);border-radius:8px;
  color:var(--tinta2);font-family:var(--c);font-size:.75rem;padding:.4rem .5rem;
  cursor:pointer;line-height:1.3;transition:border-color .16s,color .16s}
.troca-plano:hover{border-color:rgba(var(--brasa-rgb),.5);color:var(--brasa-viva)}
.troca-plano i{display:block;font-style:normal;font-size:.65rem;color:var(--tinta3);margin-top:.1rem}
.troca-plano:focus-visible{outline:1px solid var(--brasa-viva);outline-offset:-3px}

/* ─────────── páginas de texto (privacidade, apagar) ─────────── */
/* Utilitárias, não editoriais: o trabalho aqui é ser lido sem esforço e
   sem parecer contrato. Mesma noite das outras telas, medida de linha
   curta, e o único ponto de brasa é onde ela precisa clicar. */
.tela-texto{background:var(--noite);min-height:100dvh;padding:2rem 1.2rem 3rem}
.texto{max-width:34rem;margin:0 auto;color:var(--tinta2);font-size:.95rem;line-height:1.68}
.texto h1{font-family:var(--t);font-weight:400;font-size:clamp(1.6rem,5.5vw,2.1rem);
  color:var(--tinta);margin:.6rem 0 1rem;line-height:1.2;text-wrap:balance}
.texto h2{font-family:var(--c);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brasa);margin:2rem 0 .5rem}
.texto p{margin:0 0 .9rem}
.texto b{color:var(--tinta);font-weight:600}
.texto a{color:var(--brasa-viva)}
.texto .entrelinha{font-size:1.02rem;color:var(--tinta2);
  padding-bottom:.6rem;border-bottom:1px solid var(--linha)}
.texto .miudo{font-size:.8rem;color:var(--tinta3);line-height:1.6}
.voltar{display:inline-block;font-size:.8rem;color:var(--tinta3);text-decoration:none;
  margin-bottom:.4rem}
.voltar:hover{color:var(--brasa)}
.botao-texto{display:inline-block;font-family:var(--c);font-size:.9rem;font-weight:600;
  letter-spacing:.02em;background:var(--brasa);color:#12212A;text-decoration:none;
  border-radius:10px;padding:.7rem 1.2rem;transition:filter .18s}
.botao-texto:hover{filter:brightness(1.12)}
/* Apagar é irreversível, então o botão não usa a cor de "siga em frente".
   Fica em contorno de sangue: visível, alcançável, e nunca confundido
   com o caminho que a maioria quer seguir. */
.botao-perigo{font-family:var(--c);font-size:.9rem;font-weight:600;letter-spacing:.02em;
  background:transparent;color:#E0A59D;border:1px solid var(--sangue);border-radius:10px;
  padding:.7rem 1.2rem;cursor:pointer;transition:background .18s,color .18s}
.botao-perigo:hover{background:rgba(180,84,74,.16);color:#F0C9C3}
.botao-texto:focus-visible,.botao-perigo:focus-visible,.voltar:focus-visible{
  outline:1px solid var(--brasa-viva);outline-offset:2px}
.rodape a,.aviso-pe a{color:var(--tinta3);text-decoration:underline;text-underline-offset:2px}
.rodape a:hover,.aviso-pe a:hover{color:var(--brasa)}

/* ═══════════════════════════════════════════════════════════════
   NÉVOA — a camada que tira as arestas

   A regra desta direção é uma só e vale para tudo: nada tem contorno.
   O que separa um plano do outro é luz — um vidro um pouco mais claro
   sobre a bruma — nunca uma linha. Onde havia borda, agora há
   translucidez; onde havia canto, raio grande.

   A cor de acento é a água do rio da carta da Lua. Ela aparece só
   onde a mão toca: o campo em foco, a porta escolhida, o botão.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── sem contorno, em lugar nenhum ─────────── */
.balao,.carta-msg,.pix-msg,.mesa-posta,.gaveta-caixa,.esgotado,
.form-entrada input,.barra span,.plano,.bolso,.pix-codigo{
  border-color:transparent}
.balao.ela{background:var(--dela)}
.balao.eu{background:var(--eu)}
.balao{border-radius:var(--r);box-shadow:none}
.balao.ela{border-bottom-left-radius:6px}
.balao.eu{border-bottom-right-radius:6px}

/* ─────────── a conversa flutua ─────────── */
/* Ela deixa de ocupar a tela inteira e passa a pousar sobre a névoa,
   com folga em volta. O fundo continua visível por trás, e é isso que
   faz a conversa parecer um objeto e não um aplicativo. */
.tela-conversa .tela{background:transparent;box-shadow:none}
.tela-conversa .cab{background:transparent;border-bottom:0;box-shadow:none;
  padding:.85rem 1.15rem .7rem}
.tela-conversa .cab::after{display:none}
.tela-conversa .sala{
  flex:1;min-height:0;display:flex;flex-direction:column;
  margin:0 .7rem .5rem;padding:.3rem;
  background:var(--vidro);border-radius:var(--r-g);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 20px 50px -26px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.05)}
.tela-conversa .fluxo{
  flex:1;min-height:0;margin:0;padding:.85rem .75rem .7rem;
  background:transparent;border-radius:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.tela-conversa .fluxo::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14)}
.tela-conversa .barra{background:transparent;border-top:0;padding:0 .35rem .35rem}
.tela-conversa .compositor{background:rgba(0,0,0,.20);border:0}
.tela-conversa .compositor:focus-within{background:rgba(0,0,0,.28);
  box-shadow:0 0 0 1px var(--brasa)}
/* Quando o texto passa de cinco linhas o campo rola, e a barra do sistema
   entrava com moldura, seta e cinza de janela — tudo que esta direção não
   tem. Aqui ela vira um fio: sem trilho, sem seta, recuada das pontas
   arredondadas para não encostar na curva, e clara o bastante para se
   achar sem chamar atenção. */
.tela-conversa .barra textarea{
  scrollbar-width:thin;scrollbar-color:rgba(231,237,243,.22) transparent;
  scrollbar-gutter:stable}
.tela-conversa .barra textarea::-webkit-scrollbar{width:4px}
.tela-conversa .barra textarea::-webkit-scrollbar-track{background:transparent}
.tela-conversa .barra textarea::-webkit-scrollbar-thumb{
  background:rgba(231,237,243,.20);border-radius:99px}
.tela-conversa .barra textarea::-webkit-scrollbar-thumb:hover{
  background:rgba(231,237,243,.36)}
.tela-conversa .barra textarea::-webkit-scrollbar-button{display:none;height:0}
.tela-conversa .barra button{background:var(--brasa);color:#12212A;border:0}
.tela-conversa .rodape{background:transparent;padding-top:.1rem}

/* O avatar deixa de ser emoji: a mesma lua difusa da entrada, para a
   conversa começar com o mesmo rosto que a home. */
/* A lua falsa em box-shadow saiu: agora existe o logo de verdade. */

/* ─────────── o céu da entrada ─────────── */
.ceu{position:relative;height:5.4rem;display:flex;align-items:center;justify-content:center;
  margin-bottom:.2rem}
/* Estrelas em box-shadow: o campo inteiro sem um nó a mais no DOM.
   Duas camadas com tempos diferentes — céu que pisca junto vira
   pisca-pisca, não firmamento. */
.ceu::before,.ceu::after{content:"";position:absolute;top:0;left:50%;width:2px;height:2px;
  border-radius:50%;background:transparent}
.ceu::before{
  box-shadow:
    -8.4rem 1.1rem 0 rgba(231,237,243,.55), -5.9rem 4.4rem 0 rgba(166,206,221,.36),
    -3.2rem .4rem 0 rgba(231,237,243,.30),  -6.8rem 2.2rem 0 rgba(166,206,221,.22),
     4.1rem 3.6rem 0 rgba(231,237,243,.44),  6.6rem 1.0rem 0 rgba(166,206,221,.34),
     8.8rem 4.9rem 0 rgba(231,237,243,.26),  2.7rem 5.8rem 0 rgba(166,206,221,.20);
  animation:cintila 5.5s ease-in-out infinite}
.ceu::after{
  box-shadow:
    -7.1rem 5.6rem 0 rgba(231,237,243,.38), -2.2rem 3.1rem 0 rgba(166,206,221,.26),
     5.4rem 5.2rem 0 rgba(231,237,243,.32),  7.9rem 2.8rem 0 rgba(166,206,221,.21),
    -4.6rem 6.4rem 0 rgba(231,237,243,.23),  1.4rem 1.3rem 0 rgba(166,206,221,.30);
  animation:cintila 7.9s ease-in-out infinite .9s}
@keyframes cintila{0%,100%{opacity:.55}50%{opacity:1}}

/* Aqui morava uma lua sem disco, luz difusa e sem borda. Era a resposta
   certa enquanto a marca não existia: um contorno inventado por CSS teria
   sido borda arbitrária. Agora existe contorno de verdade, e ele carrega o
   nome junto — no primeiro contato isso vale mais que a névoa.

   O halo continua: é o que costura o desenho ao céu atrás dele, para a
   marca não parecer adesivo colado por cima. Menor que a caixa do gradiente
   antigo porque aquele desvanecia antes da borda, e peso ótico é o que o
   olho mede, não a caixa. */
.astro{display:block;width:4.1rem;height:4.1rem;
  filter:drop-shadow(0 0 14px rgba(var(--brasa-rgb),.45))}

/* ─────────── marca-d'água ─────────── */
/* Os mesmos glifos que a Sacerdotisa traz no fundo. Quase invisíveis,
   sem pedir atenção: quem reparar, reparou. */
.glifos{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.glifos i{position:absolute;font-family:var(--t);font-style:normal;color:var(--brasa-viva);
  line-height:1;user-select:none}
.glifos i:nth-child(1){top:4%;   left:-3rem;   font-size:12rem;opacity:.022;transform:rotate(-12deg)}
.glifos i:nth-child(2){top:30%;  right:-2rem;  font-size:7rem; opacity:.018;transform:rotate(9deg)}
.glifos i:nth-child(3){bottom:8%;left:-1.5rem; font-size:9rem; opacity:.02; transform:rotate(6deg)}
.glifos i:nth-child(4){bottom:26%;right:4%;    font-size:4.5rem;opacity:.016;transform:rotate(-14deg)}
.entrada,.texto{position:relative;z-index:1}

/* ─────────── ornamento ─────────── */
.ornamento{display:flex;align-items:center;gap:.75rem;margin:1.4rem 0}
.ornamento::before,.ornamento::after{content:"";flex:1;height:1px}
.ornamento::before{background:linear-gradient(90deg,transparent,rgba(127,179,200,.34))}
.ornamento::after{background:linear-gradient(90deg,rgba(127,179,200,.34),transparent)}
.ornamento span{color:var(--brasa);font-size:.6rem;line-height:1;opacity:.9}

/* ─────────── o nome ─────────── */
/* Cormorant em peso leve: a letra fina abre espaço dentro da própria
   palavra, e isso faz mais pela calma da página que qualquer margem. */
.entrada h1,.texto h1{font-family:var(--t);font-weight:300}
.tela-entrada .entrada h1{font-size:clamp(2.3rem,9vw,3.2rem);letter-spacing:.04em;
  color:var(--tinta);margin:.4rem 0 .6rem;
  text-shadow:0 0 3rem rgba(127,179,200,.30)}
.tela-entrada .entrada .chamada{color:var(--tinta2);margin-bottom:0}

/* ─────────── a mesa posta ─────────── */
.mesa-posta{background:var(--vidro);border:0;border-radius:var(--r-g);
  padding:1.2rem 1.05rem 1.25rem;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.7)}
.tela-entrada .form-entrada input{background:var(--vidro);border:0;border-radius:12px}
.tela-entrada .form-entrada input:hover{background:var(--vidro-alto)}
.tela-entrada .form-entrada input:focus,
.tela-entrada .form-entrada input:focus-visible{
  background:var(--vidro-alto);box-shadow:0 0 0 1px var(--brasa);outline:none}
.form-entrada input::placeholder,.barra textarea::placeholder{color:var(--tinta4)}

/* ─────────── as portas ─────────── */
.form-entrada label.porta{background:var(--vidro);border:0;color:var(--tinta2)}
.form-entrada label.porta:hover{background:var(--vidro-alto);color:var(--tinta)}
.portas input[type=radio]:checked + label.porta{background:var(--brasa-fundo);
  color:var(--tinta);box-shadow:0 0 0 1px rgba(127,179,200,.5)}
.portas input[type=radio]:focus-visible + label.porta{outline:1px solid var(--brasa-viva);
  outline-offset:2px}

/* o campo de tratamento acompanha o refinamento das portas */
.form-entrada label.trato{border:0;background:var(--vidro)}
.form-entrada label.trato:hover{background:var(--vidro-alto);color:var(--tinta)}
.tratos input[type=radio]:checked + label.trato{background:var(--brasa-fundo);
  color:var(--tinta);box-shadow:0 0 0 1px rgba(127,179,200,.5)}

/* ─────────── o botão ─────────── */
/* Cápsula clara sobre a bruma: o único plano opaco da tela inteira, que
   é o que faz dele o único lugar óbvio para tocar. */
.tela-entrada .form-entrada button,.botao-texto{
  font-family:var(--c);font-size:.86rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#14202B;
  background:rgba(231,237,243,.93);border:0;border-radius:99px;
  padding:.88rem 1.2rem;box-shadow:0 14px 34px -18px rgba(0,0,0,.8);
  transition:background .18s,transform .18s,box-shadow .18s}
.tela-entrada .form-entrada button:hover,.botao-texto:hover{
  background:#FFFFFF;filter:none;
  box-shadow:0 16px 38px -18px rgba(0,0,0,.85),0 0 2.4rem rgba(127,179,200,.22)}
.tela-entrada .form-entrada button:active{transform:scale(.99)}
.tela-entrada .form-entrada button:focus-visible,.botao-texto:focus-visible{
  outline:1px solid var(--brasa-viva);outline-offset:2px}
.botao-perigo{background:transparent;color:#E6ABA4;border:1px solid rgba(217,138,128,.5);
  border-radius:99px}
.botao-perigo:hover{background:rgba(217,138,128,.13);color:#F2CFCA}

/* ─────────── prólogo: nunca tirou tarot ─────────── */
/* Para quem chegou sem saber como funciona. Fica abaixo do formulário de
   propósito: quem já sabe não tropeça nele, quem precisa encontra. Os
   números são sequência real — ela faz 1, depois 2, depois 3. */
.prologo{margin-top:1.6rem;text-align:left}
.prologo h2{font-family:var(--t);font-weight:400;font-size:1.25rem;letter-spacing:.02em;
  color:var(--tinta);margin:0 0 1rem;text-align:center;text-wrap:balance}
.prologo ol{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;
  counter-reset:passo}
.prologo li{display:grid;grid-template-columns:auto 1fr;gap:.1rem .8rem;align-items:start;
  counter-increment:passo}
.prologo li::before{content:counter(passo);font-family:var(--t);font-size:1.05rem;
  width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;
  color:var(--brasa-viva);background:var(--brasa-fundo);margin-top:.1rem}
.prologo li b{display:block;font-size:.92rem;font-weight:600;color:var(--tinta);
  margin-bottom:.15rem}
.prologo li span{grid-column:2;font-size:.84rem;line-height:1.55;color:var(--tinta2)}
.prologo-pe{font-size:.78rem;line-height:1.6;color:var(--tinta3);text-align:center;
  margin:1.1rem 0 0}

/* ─────────── o pé ─────────── */
.oferta-clara b{color:var(--tinta2);font-size:.94rem;font-family:var(--t);font-size:1.08rem}
.vagas b{color:var(--brasa-viva);font-weight:500}
.ponto{background:var(--brasa)}
.esgotado{background:var(--vidro);border:0;border-radius:var(--r-g);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.rodape a,.aviso-pe a,.texto a:not(.botao-texto):not(.botao-perigo){
  color:var(--tinta3);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
.rodape a:hover,.aviso-pe a:hover,
.texto a:not(.botao-texto):not(.botao-perigo):hover{color:var(--brasa-viva)}
.botao-texto{text-decoration:none;color:#14202B}
.botao-texto:hover{color:#14202B}

/* ─────────── páginas de texto ─────────── */
.texto h2{color:var(--brasa-viva);font-family:var(--c)}
.texto .entrelinha{border-bottom-color:var(--linha-fraca)}
.texto .miudo{color:var(--tinta3)}

/* ─────────── PIX e planos, sem arestas ─────────── */
.pix-msg{background:var(--vidro);border:0;border-radius:var(--r-g);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pix-valor{font-family:var(--t);color:var(--brasa-viva)}
.pix-codigo{background:rgba(0,0,0,.22);border:0;border-radius:10px;color:var(--tinta3)}
.pix-copiar{background:rgba(231,237,243,.93);color:#14202B;border-radius:99px}
.pix-copiar.feito{background:var(--verde);color:#0E2119}
.plano{background:var(--vidro);border:0;border-radius:14px}
.plano:hover:not(:disabled){background:var(--vidro-alto)}
.plano.ativo{background:var(--brasa-fundo);box-shadow:0 0 0 1px rgba(127,179,200,.5)}
.plano-v{font-family:var(--t);color:var(--brasa-viva)}
.planos{border-top:1px solid var(--linha-fraca)}

/* ─────────── gaveta ─────────── */
/* o escurecido cobre a sala inteira; sem isso os cantos quadrados dele
   escapam por cima dos cantos redondos do comodo. */
.tela-conversa .gaveta{border-radius:var(--r-g)}
.gaveta-caixa{background:rgba(31,43,56,.92);border:0;border-radius:var(--r-g);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.gaveta-topo{border-bottom:0}
.gaveta-topo::after{background:var(--linha-fraca)}
.item{border:0;border-radius:12px}
.item:hover{background:var(--vidro)}
.item.atual{background:var(--brasa-fundo)}

/* ─────────── a carta ─────────── */
/* A ilustração é a única coisa saturada da tela. Ela não ganha moldura:
   a sombra já a levanta da névoa, e uma borda competiria com o desenho. */
.carta-msg img{border-radius:8px;box-shadow:0 10px 24px -14px rgba(0,0,0,.55)}
.carta-msg .legenda b{font-family:var(--t);font-weight:400;font-size:1.05rem}

@media (prefers-reduced-motion:reduce){
  .ceu::before,.ceu::after{animation:none}
}

/* ═══════════════════════════════════════════════════════════════
   A CARTEIRA — a ficha se compra no caixa, não na mesa

   Ela abre numa aba ao lado da conversa, que fica aberta atrás com as
   cartas onde estavam. Por isso esta tela não é um checkout: é a mesma
   sala, um passo para o lado. Mesma névoa, mesma luz, mesma letra.

   A única coisa que ela precisa carregar daqui até a outra aba é o laço
   aberto — e é por isso que a carta virada pra baixo vem antes de
   qualquer preço.
   ═══════════════════════════════════════════════════════════════ */
.tela-carteira{min-height:100dvh;padding:2rem 1.1rem 3rem}
.carteira{position:relative;z-index:1;max-width:27rem;margin:0 auto}
.carteira h1{font-family:var(--t);font-weight:300;font-size:2rem;letter-spacing:.03em;
  color:var(--tinta);margin:0 0 1.2rem}

/* ─── o laço aberto ─── */
.espera{display:flex;gap:1rem;align-items:center;margin-bottom:1.6rem}
.espera-txt{min-width:0}
.etiqueta{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta4);margin:0 0 .35rem}
.pergunta{font-family:var(--t);font-size:1.22rem;line-height:1.32;color:var(--tinta);
  margin:0 0 .45rem;text-wrap:balance}
.espera .miudo{font-size:.8rem;line-height:1.5;color:var(--tinta3);margin:0}
.espera .miudo b{color:var(--brasa-viva);font-weight:500}

/* O verso não é enfeite: é a carta que ela ainda não pode ver. Como a
   terceira carta só é sorteada depois, não existe imagem para mostrar —
   e mostrar uma carta qualquer seria mentira. Então o verso é verso. */
.verso{width:5.2rem;flex:0 0 auto;aspect-ratio:620/1111;border-radius:11px;
  position:relative;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(158deg,#26314A 0%,#1D2536 52%,#241E38 100%);
  box-shadow:0 18px 36px -18px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.07)}
.verso::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 40%,rgba(127,179,200,.24),transparent 64%)}
.verso::after{content:"";position:absolute;inset:.42rem;border-radius:7px;
  border:1px solid rgba(231,237,243,.10)}
.verso span{width:1.45rem;height:1.45rem;border-radius:50%;position:relative;
  background:radial-gradient(circle,rgba(231,237,243,.82) 0%,rgba(231,237,243,.18) 46%,
             transparent 70%)}

/* ─── saldo ─── */
.saldo-linha{font-size:.9rem;color:var(--tinta2);margin:0 0 1.1rem;
  padding:.7rem .9rem;border-radius:14px;background:var(--vidro)}
.saldo-linha b{font-family:var(--t);font-size:1.5rem;color:var(--brasa-viva);
  font-weight:400;margin-right:.15rem}
.saldo-linha span{display:block;font-size:.72rem;color:var(--tinta3);margin-top:.1rem}

/* ─── os pacotes ─── */
.pacotes{display:grid;gap:.6rem;margin-bottom:1.2rem}
/* A fita sobe .55rem acima do pacote: sem uma folga propria ela pousa em
   cima do pacote de cima. O gap sozinho nao da conta — quem precisa do
   espaco e' so' o destacado. */
.pacote.destaque{margin-top:.4rem}
.pacotes > .pacote.destaque:first-child{margin-top:0}
.pacote{position:relative;display:grid;grid-template-columns:1fr auto;
  align-items:baseline;gap:.15rem .8rem;width:100%;text-align:left;cursor:pointer;
  font-family:var(--c);color:var(--tinta2);background:var(--vidro);
  border:0;border-radius:var(--r);padding:.95rem 1rem;
  transition:background .18s,box-shadow .18s,transform .18s}
.pacote:hover:not(:disabled){background:var(--vidro-alto);color:var(--tinta)}
.pacote:active{transform:scale(.995)}
.pacote:disabled{opacity:.5;cursor:default}
.pacote-qtd{font-size:.98rem;color:var(--tinta)}
.pacote-qtd b{font-family:var(--t);font-size:1.5rem;font-weight:400;
  color:var(--tinta);margin-right:.15rem}
.pacote-qtd i{display:block;font-style:normal;font-size:.72rem;color:var(--brasa-viva);
  margin-top:.1rem}
.pacote-preco{font-family:var(--t);font-size:1.3rem;color:var(--tinta);
  font-variant-numeric:tabular-nums}
.pacote-unit{grid-column:1/-1;font-size:.72rem;color:var(--tinta3);margin-top:.2rem}

/* O destaque não grita: ganha um pouco mais de luz e a fita. O decoy ao
   lado faz o trabalho de comparação sozinho — a diferença de preço por
   carta está escrita nos dois, e é ela que decide. */
.pacote.destaque{background:var(--brasa-fundo);
  box-shadow:0 0 0 1px rgba(127,179,200,.42),0 16px 38px -22px rgba(0,0,0,.7)}
.pacote.destaque .pacote-qtd,.pacote.destaque .pacote-preco{color:var(--tinta)}
.pacote.destaque .pacote-unit{color:var(--brasa-viva)}
.pacote.escolhido{box-shadow:0 0 0 1px var(--brasa)}
.fita{position:absolute;top:-.55rem;right:.9rem;font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;color:#12212A;background:var(--brasa);
  padding:.16rem .5rem;border-radius:99px}
.pacote:focus-visible{outline:1px solid var(--brasa-viva);outline-offset:2px}

/* ─── o PIX, embaixo do pacote escolhido ─── */
.pix-carteira{background:var(--vidro);border-radius:var(--r-g);padding:1.1rem;
  text-align:center;margin-bottom:1.2rem;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pix-carteira .pix-qr{width:min(11rem,62%);margin:0 auto .6rem}
.pix-carteira .pix-codigo{text-align:left}
.pix-espera{font-size:.76rem;color:var(--tinta3);margin:.7rem 0 0;line-height:1.5}
.pix-carteira.falhou .pix-espera{color:#E6ABA4}
.pix-carteira.chegou{background:var(--brasa-fundo)}
.chegou-tit{font-family:var(--t);font-size:1.9rem;font-weight:300;color:var(--tinta);
  margin:0 0 .3rem}
.chegou-txt{font-size:.92rem;color:var(--tinta2);margin:0 0 1rem;line-height:1.55}
.chegou-txt b{color:var(--brasa-viva)}
.pix-carteira .miudo{font-size:.72rem;color:var(--tinta3);margin:.9rem 0 0;line-height:1.5}

.rodape-carteira{font-size:.76rem;line-height:1.7;color:var(--tinta3);text-align:center;
  margin:1.4rem 0 0}
.rodape-carteira a{color:var(--tinta3);text-decoration:underline;text-underline-offset:2px}
.rodape-carteira a:hover{color:var(--brasa-viva)}

@media (min-width:34rem){
  .pacote{grid-template-columns:1fr auto auto;align-items:center;gap:0 1.2rem}
  .pacote-unit{grid-column:auto;margin-top:0;text-align:right;min-width:6.5rem}
}

/* ─────────── o convite (dentro da conversa) ─────────── */
/* Não é oferta, é a carta esperando. Nenhum preço aparece aqui: quem
   fala de dinheiro é a carteira, na outra aba, com outra voz. A Kassia
   fica limpa — cartomante que cobra no meio da consulta vira vendedora. */
.convite{align-self:center;width:min(15rem,80%);margin:.9rem 0;padding:1rem .9rem;
  text-align:center;background:var(--vidro-alto);border-radius:var(--r-g);
  animation:sobe .4s ease both}
.convite-verso{width:3.4rem;aspect-ratio:620/1111;margin:0 auto .7rem;border-radius:8px;
  position:relative;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(158deg,#26314A,#1D2536 52%,#241E38);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.convite-verso::after{content:"";position:absolute;inset:.28rem;border-radius:5px;
  border:1px solid rgba(231,237,243,.10)}
.convite-verso span{width:1rem;height:1rem;border-radius:50%;
  background:radial-gradient(circle,rgba(231,237,243,.8),rgba(231,237,243,.16) 46%,transparent 70%)}
.convite-txt{font-family:var(--t);font-size:1.02rem;line-height:1.35;color:var(--tinta);
  margin:0 0 .8rem}
.convite-btn{display:block;font-family:var(--c);font-size:.82rem;font-weight:600;
  letter-spacing:.06em;color:#14202B;background:rgba(231,237,243,.93);
  text-decoration:none;border-radius:99px;padding:.6rem .8rem;transition:background .18s}
.convite-btn:hover{background:#FFFFFF}
.convite-btn:focus-visible{outline:1px solid var(--brasa-viva);outline-offset:2px}
.convite-pe{font-size:.64rem;line-height:1.45;color:var(--tinta3);margin:.6rem 0 0}

/* ═══════════════════════════════════════════════════════════════
   TELAS LARGAS

   Uma coluna de 21rem no meio de 1440px não é desktop, é celular
   esticado — e o prólogo, que no celular é uma lista curta, virava uma
   fita comprida de rolar.

   A partir de 62rem a página vira duas colunas: à esquerda quem ela é e
   como funciona, à direita a mesa onde se escreve. A ordem do HTML
   continua servindo o celular (alto → formulário → prólogo); no desktop
   é a grade que reposiciona, sem duplicar marcação.
   ═══════════════════════════════════════════════════════════════ */

/* Tablet: ainda uma coluna, mas com largura para os passos ficarem lado
   a lado em vez de empilhados. */
@media (min-width:40rem) and (max-width:61.99rem){
  .entrada.portal{max-width:36rem}
  .prologo ol{grid-template-columns:repeat(3,1fr);gap:1.4rem}
  .prologo li{grid-template-columns:1fr;gap:.35rem}
  .prologo li::before{margin:0 0 .1rem}
  .prologo li span{grid-column:1}
}

@media (min-width:62rem){
  .tela-entrada{padding:3.5rem 2rem}
  .entrada.portal{
    max-width:58rem;text-align:left;
    display:grid;align-items:start;
    grid-template-columns:1fr 21rem;
    grid-template-areas:
      "alto  mesa"
      "guia  mesa"
      "pe    pe";
    column-gap:4rem;row-gap:2.2rem}

  .portal .apresenta{grid-area:alto}
  .portal .acao     {grid-area:mesa}
  .portal .prologo  {grid-area:guia;margin-top:0}
  .portal .aviso-pe {grid-area:pe;text-align:center;margin-top:1rem}

  /* A lua sai de cima do nome e vem para o lado dele: em coluna estreita
     ela coroa; em coluna larga, coroar deixaria um buraco no meio. */
  .apresenta{display:grid;grid-template-columns:auto 1fr;gap:0 1.4rem;
    align-items:center}
  .portal .ceu{height:auto;grid-row:span 2;margin:0}
  .portal .astro{width:4.7rem;height:4.7rem}
  .portal h1{font-size:clamp(2.6rem,4vw,3.4rem);margin:0 0 .3rem;align-self:end}
  .portal .chamada{align-self:start;max-width:26ch}

  /* O ornamento separava alto de mesa numa pilha; em duas colunas não há
     o que separar, e uma risca solta vira sujeira. */
  .apresenta .ornamento,.risca-mobile{display:none}

  .prologo h2{text-align:left;font-size:1.35rem}
  .prologo-pe{text-align:left}
  .portal .oferta-clara,.portal .vagas{text-align:center}
  .portal .vagas{justify-content:center}
}

/* Telas muito largas: a coluna do texto para de crescer. Linha longa
   demais cansa antes de informar. */
@media (min-width:82rem){
  .entrada.portal{max-width:64rem;grid-template-columns:1fr 23rem}
}
/* O número dela no verso da carta: prova de que a carta saiu da mão dela,
   e não de um sorteio feito depois do pagamento. */
.verso b,.convite-verso b{font-family:var(--t);font-weight:400;font-size:1.5rem;
  color:rgba(231,237,243,.82);line-height:1;position:relative}
.convite-verso b{font-size:1.05rem}

/* ═══════════════════════════════════════════════════════════════
   A CARTEIRA POR CIMA DA MESA

   Mesma gaveta do histórico, outro conteúdo — e por isso as duas
   dividem a caixa, a névoa e a queda. O que muda é a ancoragem: o
   histórico é uma lista pendurada no ícone e pode ser estreita; a
   carteira tem preço, e preço centralizado se lê melhor do que preço
   encostado num canto.

   Ela não cobre o cabeçalho de propósito. A conversa continua atrás,
   visível, e o nome da Mãe Kassia segue no topo: é o que diz "você
   ainda está aqui" enquanto ela decide.
   ═══════════════════════════════════════════════════════════════ */
.gaveta-cartas .caixa-cartas{right:.45rem;left:.45rem;max-width:21.5rem;
  margin:0 auto;max-height:calc(100% - .6rem);display:flex;flex-direction:column}

/* O corpo rola, o topo fica. Sem isso, num celular baixo o × sai da tela
   junto com o resto e ela fica presa dentro do painel. */
.cartas-corpo{overflow-y:auto;overscroll-behavior:contain;padding:.2rem .35rem .1rem;
  scrollbar-width:thin;scrollbar-color:var(--linha) transparent}
.cartas-corpo::-webkit-scrollbar{width:4px}
.cartas-corpo::-webkit-scrollbar-thumb{background:var(--linha);border-radius:2px}

/* O saldo é a resposta à pergunta que fez ela clicar. Vem primeiro, e
   grande: quem abriu por curiosidade já foi atendido aqui e pode fechar
   sem nunca ter visto um preço como cobrança. */
.cartas-saldo{margin:.5rem 0 .9rem;text-align:center}
.cartas-saldo b{display:block;font-family:var(--t);font-weight:300;font-size:2.2rem;
  line-height:1.05;color:var(--brasa-viva)}
.cartas-saldo span{display:block;font-size:.74rem;color:var(--tinta3);
  letter-spacing:.04em;margin-top:.3rem}

/* O laço aberto, quando existe: a carta que ficou virada. Uma linha só —
   a conversa atrás já contou a história, aqui é só o lembrete. */
.cartas-laco{margin:0 0 .9rem;padding:.6rem .7rem;border-radius:12px;
  background:var(--brasa-fundo);font-size:.82rem;line-height:1.5;color:var(--tinta2)}
.cartas-laco b{font-family:var(--t);font-size:1rem;color:var(--brasa-viva)}

/* O rótulo separa "o que é seu" de "o que está à venda". Sem ele os
   pacotes encostam no saldo e a leitura vira vitrine. */
.cartas-rotulo{margin:0 0 .5rem;font-family:var(--t);font-size:.72rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--tinta3)}

/* Pacote compacto: dentro do painel ele divide espaço com a conversa
   atrás, então perde o respiro de tela cheia — não a hierarquia. */
.pacotes-modal{gap:.5rem;margin-bottom:.9rem}
.pacotes-modal .pacote{padding:.6rem .75rem;border-radius:13px}
.pacotes-modal .pacote-qtd{font-size:.9rem}
.pacotes-modal .pacote-qtd b{font-size:1.3rem}
.pacotes-modal .pacote-preco{font-size:1.15rem}
.pacotes-modal .pacote-unit{font-size:.68rem;margin-top:.1rem}

.gaveta-cartas .pix-carteira{padding:.85rem;margin-bottom:.6rem}
.gaveta-cartas .pix-qr{width:min(9.5rem,58%)}
.gaveta-cartas .chegou-tit{font-size:1.6rem}

.cartas-pe{margin:0 0 .55rem;text-align:center;font-size:.68rem;line-height:1.5;
  color:var(--tinta3)}

@media (prefers-reduced-motion:reduce){
  .gaveta-cartas .caixa-cartas{animation:none}
}

/* ─────────── consulta encerrada ───────────
   Ocupa o lugar exato do compositor. A leitura acabou e a tela precisa
   dizer isso com a mesma calma do resto: nada de aviso de erro, nada de
   campo cinza fingindo que ainda dá pra escrever. */
.encerrada{margin:.55rem .7rem .7rem;padding:1rem 1.1rem;text-align:center;
  background:var(--vidro);border-radius:var(--r-g)}
.enc-tit{margin:0 0 .4rem;font-family:var(--t);font-size:1.25rem;font-weight:300;
  color:var(--tinta)}
.enc-txt{margin:0 0 .9rem;font-size:.86rem;line-height:1.55;color:var(--tinta2)}
.enc-txt b{color:var(--brasa-viva);font-family:var(--t);font-size:1.05rem;font-weight:400}
.enc-pe{margin:.7rem 0 0;font-size:.7rem;color:var(--tinta3)}

/* Porta de volta para quem ja consultou. Discreta de proposito: quem chega
   pela primeira vez nao pode tropecar nela, e quem volta a procura. */
.ja-esteve{margin:.85rem 0 0;text-align:center;font-size:.78rem}
.ja-esteve a{color:var(--tinta3);text-decoration:none;border-bottom:1px solid var(--linha);
  padding-bottom:1px;transition:color .18s,border-color .18s}
.ja-esteve a:hover{color:var(--brasa-viva);border-color:var(--brasa)}

/* A marca na tela de reconhecimento, no lugar do emoji que estava aqui. */
.luar img{width:3.4rem;height:3.4rem;display:block;margin:0 auto;
  filter:drop-shadow(0 0 12px rgba(var(--brasa-rgb),.45))}

/* ─────────── continuar de onde parou ───────────
   Mesma pastilha de vidro do resto da entrada. Cada linha e' a pergunta
   dela, com as palavras dela: e' assim que ela reconhece qual conversa e'
   qual, e nao por titulo que o sistema inventou. */
.retomar{margin-bottom:.9rem}
.retomar-item{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;
  margin-top:.35rem;text-decoration:none;border-radius:12px;background:var(--vidro);
  transition:background .18s}
.retomar-item:hover{background:var(--vidro-alto)}
.rt-txt{flex:1;font-size:.85rem;line-height:1.4;color:var(--tinta2)}
.retomar-item:hover .rt-txt{color:var(--tinta)}
.rt-quando{flex-shrink:0;font-size:.7rem;color:var(--tinta3)}
.ou-nova{margin:0 0 .55rem;text-align:center;font-size:.74rem;color:var(--tinta3);
  letter-spacing:.06em}

/* ─────────── apagar uma conversa ───────────
   O item virou linha com dois filhos: o link, que ocupa tudo, e a lixeira,
   que so' acende quando o dedo chega perto. Apagar leitura de alguem nao
   pode ser um alvo grande e sempre aceso ao lado do alvo de abrir. */
.item-linha{display:flex;align-items:center;gap:.2rem;border-radius:12px;
  transition:background .16s}
.item-linha + .item-linha{margin-top:2px}
.item-linha:hover{background:var(--vidro)}
.item-linha.atual{background:var(--brasa-fundo)}
.item-linha .item{flex:1;min-width:0;background:none}
.item-linha .item:hover{background:none}
/* Sempre visivel, e fraca. Escondi atras do hover na primeira versao e a
   propria captura de tela mostrou o problema: quem procura nao acha, e no
   celular hover nem existe. Esta funcao existe por causa de sigilo — quem
   precisa dela precisa AGORA, nao depois de descobrir que passar o dedo
   revela um botao. Fraca o bastante para nao competir com abrir. */
.apagar-conversa{flex-shrink:0;display:grid;place-items:center;width:1.9rem;height:1.9rem;
  margin-right:.35rem;padding:0;background:none;border:0;border-radius:8px;cursor:pointer;
  color:var(--tinta3);opacity:.42;transition:opacity .16s,color .16s,background .16s}
.apagar-conversa svg{width:1rem;height:1rem}
.item-linha:hover .apagar-conversa,
.apagar-conversa:focus-visible{opacity:1}
.apagar-conversa:hover{color:#E6ABA4;background:rgba(230,171,164,.12)}
.apagar-conversa:disabled{opacity:.4;cursor:default}

/* ─────────── perguntar antes ───────────
   Mora acima da gaveta (z-index 30 contra 20): a pergunta nasce de dentro
   dela e nao pode ficar por baixo do que a originou. Mesma nevoa, mesma
   caixa, mesma letra do resto — quem lê um aviso de "isso não tem volta"
   precisa reconhecer de quem é a voz. */
.perguntar{position:absolute;inset:0;z-index:30;display:grid;place-items:center;
  padding:1rem;background:rgba(6,4,10,.62);backdrop-filter:blur(3px);
  animation:apaga .16s ease both}
.tela-conversa .perguntar{border-radius:var(--r-g)}
.perguntar-caixa{width:100%;max-width:19rem;padding:1.15rem 1.2rem 1rem;
  background:rgba(31,43,56,.96);border-radius:var(--r-g);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.95);
  animation:cai .2s cubic-bezier(.2,.9,.3,1) both}
.pgt-tit{margin:0 0 .5rem;font-family:var(--t);font-weight:400;font-size:1.2rem;
  line-height:1.25;color:var(--tinta)}
.pgt-txt{margin:0 0 1.1rem;font-size:.84rem;line-height:1.55;color:var(--tinta2)}
.pgt-botoes{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}
.pgt-botoes button{padding:.5rem .95rem;font-family:var(--c);font-size:.8rem;
  letter-spacing:.02em;border:0;border-radius:999px;cursor:pointer;
  transition:background .16s,color .16s}
.pgt-nao{background:var(--vidro);color:var(--tinta2)}
.pgt-nao:hover{background:var(--vidro-alto);color:var(--tinta)}
.pgt-sim{background:var(--tinta);color:#141122}
.pgt-sim:hover{background:#fff}
.pgt-sim.perigo{background:rgba(230,171,164,.16);color:#E6ABA4}
.pgt-sim.perigo:hover{background:#E6ABA4;color:#2A1416}
.pgt-botoes button:focus-visible{outline:1px solid var(--brasa-viva);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .perguntar,.perguntar-caixa{animation:none}
}

/* ─────────── a marca como saída ───────────
   Assume o lugar que avatar e nome ocupavam juntos, com o mesmo respiro do
   cabecalho. Nada de sublinhado nem de cor de link: e' saida, nao chamada.
   Quem procura sair passa o dedo aqui por instinto. */
.marca-cab{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0;
  text-decoration:none;color:inherit;border-radius:10px;margin:-.3rem;padding:.3rem;
  transition:background .18s}
.marca-cab:hover{background:var(--vidro)}
.marca-cab:focus-visible{outline:1px solid var(--brasa-viva);outline-offset:1px}
.marca-cab .quem{display:block;min-width:0}
.marca-cab .nome,.marca-cab .status{display:block}

/* ─────────── quem volta ───────────
   Primeira coisa que ela le. O numero grande nao e' enfeite: e' a prova de
   que o sistema sabe quem ela e' — e o que ela comprou continua la'. */
.volta{margin-bottom:.9rem;text-align:center}
.volta-oi{margin:0;font-size:.95rem;color:var(--tinta2)}
.volta-oi b{font-family:var(--t);font-weight:400;font-size:1.25rem;color:var(--tinta)}
.volta-saldo{margin:.7rem 0 0;font-size:.78rem;color:var(--tinta3);line-height:1.35}
.volta-saldo b{display:block;font-family:var(--t);font-weight:300;font-size:2rem;
  line-height:1.05;color:var(--brasa-viva)}
.volta-pe{margin:.75rem 0 0;font-size:.72rem}
.volta-pe a{color:var(--tinta3);text-decoration:none;border-bottom:1px solid var(--linha)}
.volta-pe a:hover{color:var(--brasa-viva);border-color:var(--brasa)}

/* ─────────── o código que tranca ───────────
   Campos curtos e centrados: quatro números não merecem a largura de um
   e-mail. Fonte grande porque ela digita sem ver o que digitou. */
.form-pin{margin:1.1rem 0 0;text-align:center}
.form-pin label{display:block;margin:.9rem 0 .35rem;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta3)}
.form-pin input{width:7rem;margin:0 auto;padding:.7rem .5rem;text-align:center;
  font-family:var(--c);font-size:1.5rem;letter-spacing:.5em;text-indent:.5em;
  color:var(--tinta);background:var(--vidro);border:1px solid var(--linha);border-radius:12px}
.form-pin input:focus{outline:none;border-color:var(--brasa);background:var(--vidro-alto)}
/* O botao do codigo nao herdava estilo de lugar nenhum: ficava com a cara
   crua do navegador no meio de uma tela inteira desenhada. */
.form-pin button{display:block;margin:1.2rem auto 0;padding:.8rem 2rem;
  font-family:var(--c);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:#141122;background:var(--tinta);border:0;border-radius:999px;cursor:pointer;
  transition:background .18s}
.form-pin button:hover{background:#fff}
.form-pin button:focus-visible{outline:1px solid var(--brasa-viva);outline-offset:3px}
.form-pin .botao-perigo,.texto .botao-perigo{background:rgba(230,171,164,.16);color:#E6ABA4}
.texto .botao-perigo:hover{background:#E6ABA4;color:#2A1416}

/* ─────────── a tranca na home ─────────── */
.trancada{margin-bottom:.9rem;text-align:center}
.tr-tit{margin:0 0 .4rem;font-family:var(--t);font-weight:400;font-size:1.2rem;color:var(--tinta)}
.tr-txt{margin:0;font-size:.82rem;color:var(--tinta2)}
.tr-erro{margin:.7rem 0 0;font-size:.8rem;color:#E6ABA4}
.trancada .form-pin{margin-top:.8rem}
.tr-pe{margin:1rem 0 0;font-size:.72rem}
.tr-pe a{color:var(--tinta3);text-decoration:none;border-bottom:1px solid var(--linha)}
.tr-pe a:hover{color:var(--brasa-viva);border-color:var(--brasa)}