/* ===========================================================================
   ORÁCULO VERTICAL · A APLICAÇÃO EM POP-UP DE TELA CHEIA
   Nascida em 16/09/2026, da ordem do Lucas: "tem que ter um botão legal, uma
   chamada legal para a aplicação, e a pessoa clica e aparece um pop-up com uma
   pergunta de cada vez, um negócio bem construído".

   🔴 O QUE ESTA FOLHA ⛔ NÃO FAZ: ⛔ não reescreve o formulário. Os campos, os
   botões, os erros e a tela de confirmação continuam com as classes do
   `estilo.css`. Aqui mora só a CAIXA: o pop-up, a barra de progresso, o tamanho
   da pergunta e o pé fixo com os botões.

   ⚠️ O fundo do pop-up é MARFIM de propósito. Os campos do `estilo.css` foram
   desenhados sobre fundo claro (borda inferior escura, texto obsidiana); pô-los
   sobre fundo escuro exigiria uma segunda folha de formulário inteira, que é
   exatamente o tipo de cópia que envelhece sozinha.
   =========================================================================== */

/* ── A caixa ──────────────────────────────────────────────────────────────── */
.modal-aplicacao{
  padding:0;border:0;background:transparent;color:var(--marfim-tinta);
  width:100%;max-width:100%;height:100%;max-height:100%;
  /* ⛔ Sem margin:auto aqui: o <dialog> nativo já centraliza, e uma margem
     própria brigaria com o cálculo dele em tela pequena. */
  margin:0;overflow:hidden;
}
.modal-aplicacao::backdrop{
  background:rgba(6,6,8,.90);
  /* O desfoque é o que faz o pop-up parecer estar ACIMA da página, e ⛔ não
     colado nela. Onde o navegador não suporta, sobra o preto de cima. */
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.modal-caixa{
  background:var(--marfim);
  width:100%;height:100%;
  display:grid;grid-template-rows:auto 1fr;
  position:relative;overflow:hidden;
}
@media (min-width:900px){
  /* No desktop o pop-up ⛔ não cola nas bordas: sobra obsidiana em volta, que é
     o que dá a sensação de camada. No celular ele ocupa a tela inteira, por
     ordem expressa. */
  .modal-aplicacao{padding:clamp(20px,4vh,54px) clamp(20px,5vw,72px);}
  .modal-caixa{max-width:900px;margin:0 auto;box-shadow:0 40px 120px rgba(0,0,0,.55);}
}

/* ── O topo: marca, fechar, progresso ─────────────────────────────────────── */
.modal-topo{
  padding:clamp(18px,2.6vw,26px) clamp(20px,4vw,54px) clamp(14px,2vw,20px);
  border-bottom:1px solid rgba(27,26,24,.13);
  background:var(--marfim);
}
/* ⚠️ O topo e o miolo usam a MESMA coluna de 720 px. Sem isto o cabeçalho
   encostava nas bordas da caixa e a pergunta ficava centrada no meio: duas
   margens diferentes na mesma tela, que é o que faz um formulário parecer
   montado por partes. */
.modal-topo > *{max-width:720px;margin-left:auto;margin-right:auto;}
.modal-topo-linha{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px;}
.modal-marca{
  font-family:var(--display);font-size:15px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--marfim-tinta);margin:0;
}
.modal-marca-fina{color:#8a8378;letter-spacing:.22em;}
.modal-fechar{
  display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:8px 14px;
  background:none;border:1px solid rgba(27,26,24,.16);color:#4a463f;cursor:pointer;
  font-family:var(--sans);font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .2s ease,color .2s ease;
}
.modal-fechar:hover{border-color:var(--cobre);color:var(--marfim-tinta);}
.modal-fechar span[aria-hidden]{font-size:19px;line-height:1;}
@media (max-width:520px){.modal-fechar-txt{display:none;}}

/* ── A rolagem: uma pergunta por tela, centrada ───────────────────────────── */
.modal-rolagem{
  overflow-y:auto;overscroll-behavior:contain;
  /* ⚠️ Coluna em flex com margem automática no filho, e ⛔ NÃO
     justify-content centralizado: com conteúdo mais alto que a caixa (a tela de
     revisão), centralizar por justify-content CORTA o topo e ⛔ não deixa
     rolar até ele. A margem automática centraliza e cede quando falta espaço. */
  display:flex;flex-direction:column;
  padding:clamp(28px,5vh,64px) clamp(20px,4vw,54px) clamp(28px,5vh,56px);
  /* ⚠️ `100%` e ⛔ não `100vh`: dentro de uma grade de altura fixa, vh ignora o
     topo e cria rolagem que ⛔ não existe. */
  max-height:100%;
}
.modal-rolagem > form,
.modal-rolagem > .confirmacao{max-width:720px;width:100%;margin-inline:auto;margin-block:auto;}

/* A pergunta, grande. É o elemento mais importante da tela inteira. */
.modal-aplicacao .campo{margin-bottom:0;}
.modal-aplicacao .campo > label,
.modal-aplicacao .campo > .rot{
  font-family:'Newsreader Var','Newsreader',Georgia,serif;
  font-size:clamp(27px,4vw,44px);line-height:1.16;letter-spacing:-.012em;
  font-variation-settings:'wght' 430;
  color:var(--marfim-tinta);margin-bottom:14px;
}
.modal-aplicacao .campo .dica{font-size:17px;line-height:1.6;color:#5b554b;margin-bottom:30px;max-width:56ch;}
/* O asterisco de obrigatório ⛔ não pode ter o tamanho da pergunta: vira
   protagonista de uma tela que ⛔ não é dele. */
.modal-aplicacao .campo .obrig{color:var(--cobre);font-size:.42em;vertical-align:super;margin-left:6px;}

/* Os campos ficam maiores, porque a tela agora é só deles. */
.modal-aplicacao input[type=text],
.modal-aplicacao input[type=email],
.modal-aplicacao input[type=tel]{font-size:clamp(19px,2.2vw,24px);padding:16px 2px;}
.modal-aplicacao textarea{font-size:19px;min-height:172px;padding:16px 2px;}
.modal-aplicacao .escolha{padding:18px 20px;}
.modal-aplicacao .escolha span{font-size:17px;}
.modal-aplicacao .escolhas{gap:11px;}

/* A dica de teclado. ⚠️ Só aparece onde ela é VERDADE: no campo de texto longo,
   onde o Enter escreve linha nova em vez de avançar. */
.dica-teclado{
  display:block;margin-top:14px;font-size:15px;color:#7a746a;font-family:var(--sans);
}
.dica-teclado kbd{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;
  border:1px solid rgba(27,26,24,.22);padding:2px 7px;background:rgba(255,255,255,.6);
}

/* ── Escrever OU falar ────────────────────────────────────────────────────────
   🔴 A frase "você pode escrever ou mandar um áudio" é a primeira coisa do
   bloco, e ⛔ não uma nota de rodapé: foi ordem expressa do Lucas ("deixa claro").
   ⚠️ O bloco vive DEPOIS do campo de texto de propósito. Ele é a SEGUNDA opção,
   ⛔ não a principal, e quem prefere escrever ⛔ não precisa nem lê-lo. */
/* O bloco inteiro ganhou moldura: ele deixou de ser uma nota de rodapé do campo
   e virou a segunda porta, visível de longe. */
.audio-campo{
  margin-top:26px;padding:20px 22px;
  border:1px solid rgba(27,26,24,.16);border-left:3px solid var(--cobre);
  background:rgba(255,255,255,.42);
}
.audio-frase{
  font-family:var(--serif);font-size:20px;line-height:1.4;color:var(--marfim-tinta);
  margin:0 0 16px;max-width:48ch;
}
.audio-linha{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;}
/* 🔴 O BOTÃO DE ÁUDIO GANHOU PRESENÇA (16/09, segunda passada). Ele era de
   contorno e discreto; virou um botão de verdade, do mesmo tamanho do campo de
   texto que ele substitui, com o microfone desenhado dentro.
   ⚠️ Ele continua sendo a SEGUNDA opção: fundo de papel, ⛔ não cobre chapado,
   que é do botão de avançar. Destaque ⛔ não é virar o botão principal. */
.audio-botao{
  font-size:17px;padding:16px 24px;gap:12px;
  background:rgba(255,255,255,.72);background-image:none;
  border:1px solid var(--cobre);color:var(--marfim-tinta);
  box-shadow:0 2px 0 0 rgba(27,26,24,.06);
}
.audio-botao:hover{background:rgba(177,112,60,.12);background-image:none;filter:none;transform:none;box-shadow:none;}
.audio-botao .mic{width:24px;height:24px;flex:0 0 24px;color:var(--cobre);}
.audio-botao.gravando{border-color:#a3341f;color:#8d2c19;background:rgba(163,52,31,.08);}
.audio-botao.gravando .mic{color:#a3341f;}
.audio-relogio{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:18px;color:#8d2c19;
  display:inline-flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums;
}
/* ⚠️ ⛔ NÃO TIRE ESTA LINHA. `display:inline-flex` acima ganha do `[hidden]` que
   o navegador aplica sozinho, e sem isto o ponto vermelho de "gravando" fica
   aceso com o microfone DESLIGADO. Achado olhando a captura em 16/09/2026. */
.audio-relogio[hidden],.audio-pronto[hidden]{display:none!important;}
/* O ponto que pulsa enquanto grava: é o único jeito de a pessoa ter certeza de
   que o microfone está ligado AGORA. */
.audio-relogio::before{
  content:'';width:11px;height:11px;border-radius:50%;background:#a3341f;
  animation:audio-pulsa 1.1s ease-in-out infinite;
}
@keyframes audio-pulsa{0%,100%{opacity:1;}50%{opacity:.25;}}
@media (prefers-reduced-motion:reduce){.audio-relogio::before{animation:none;}}
.audio-pronto audio{width:100%;max-width:440px;margin-bottom:14px;}
.audio-acoes{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-bottom:10px;}
.audio-apagar{
  background:none;border:0;padding:8px 0;min-height:30px;cursor:pointer;
  font-family:var(--sans);font-size:15px;color:#8d2c19;
  text-decoration:underline;text-underline-offset:3px;
}
.audio-aviso{margin:14px 0 0;color:#8d2c19;max-width:52ch;}
.audio-limite{margin:14px 0 0;color:#7a746a;}
/* 🔴 18/09: ÁUDIO INTEGRADO ao campo (ordem do Lucas: "está muito separado").
   Sai o cartão flutuante; fica colado embaixo do campo, com uma linha objetiva. */
.audio-campo{margin-top:10px;padding:0;border:0;background:none;}
.audio-frase{font-family:var(--sans,inherit);font-size:14px;line-height:1.4;color:#6f6a60;margin:0 0 10px;max-width:52ch;font-weight:500;}

/* ── O checkout ───────────────────────────────────────────────────────────────
   🔴🔴 SIMULADO. O selo vem ANTES de tudo e ⛔ não é discreto de propósito:
   uma tela de pagamento falsa sem aviso é a coisa mais perigosa desta pasta. */
.pagamento{margin-top:42px;padding-top:36px;border-top:1px solid rgba(27,26,24,.14);}
.pagamento h3{margin:0 0 12px;color:var(--marfim-tinta);}
.pagamento .corpo{color:#4a463f;max-width:54ch;margin-bottom:26px;}
.pagamento .miudo{margin-top:16px;}
/* 🔴 18/09: DUAS opções de pagamento (sinal · valor completo), empilhadas. */
.pagamento-opcoes{display:flex;flex-direction:column;gap:14px;margin:6px 0 4px;}
.opcao-pagar{position:relative;flex-direction:column;align-items:flex-start;text-align:left;gap:5px;padding:16px 46px 16px 20px;}
.opcao-pagar .opcao-titulo{font-weight:700;font-size:17px;line-height:1.25;}
.opcao-pagar .opcao-apoio{font-weight:400;font-size:13px;line-height:1.4;opacity:.85;}
.opcao-pagar .seta{position:absolute;right:18px;top:50%;transform:translateY(-50%);}
/* 🔴 18/09 WIZARD: foto do Jair em cima da tela de escolha/checkout + botão voltar do passo de hora.
   ⛔ A imagem NÃO pode cortar o Jair: object-fit:contain (inteira, centralizada), com o
   fundo da paleta na faixa que sobrar (letterbox), ⛔ nada de barra branca. */
.escolha-foto{display:block;width:100%;max-height:200px;object-fit:contain;object-position:center;
  background:var(--obsidiana,#17140f);border-radius:10px;margin:0 0 20px;}
.qr-real{display:block;width:210px;height:210px;max-width:100%;background:#fff;padding:8px;border-radius:8px;}
/* 🔴 18/09: ÁUDIO PRIMÁRIO no texto-longo — o botão de áudio vem em DESTAQUE, o
   campo de texto fica secundário/discreto (a alternativa "se preferir, escreva"). */
.texto-longo-audio .audio-campo{margin:8px 0 16px;}
.texto-longo-audio .audio-frase{font-size:15px;color:var(--marfim-tinta);font-weight:600;}
.texto-longo-audio .audio-botao{min-height:54px;font-size:16px;border-width:2px;border-color:var(--cobre);background:rgba(177,112,60,.10);}
.texto-longo-audio textarea{min-height:96px;opacity:.92;}
.texto-longo-audio > label{opacity:.95;}
.hora-voltar{background:none;border:0;color:var(--cobre);font:inherit;font-size:14px;cursor:pointer;padding:6px 0;margin:0 0 14px;}
.hora-voltar:hover{text-decoration:underline;}
#horarios-lista .horario{width:100%;}

/* ── O que ela está comprando ─────────────────────────────────────────────── */
.compra{
  margin-top:26px;padding:22px 24px;
  border:1px solid rgba(27,26,24,.18);border-left:3px solid var(--cobre);
  background:rgba(255,255,255,.5);
}
.compra-item{font-family:var(--serif);font-size:22px;line-height:1.3;color:var(--marfim-tinta);margin:0 0 6px;}
.compra-quando{font-size:18px;color:var(--cobre);margin:0 0 12px;font-weight:600;}
.ver-ficha{
  background:none;border:0;padding:8px 0;min-height:30px;cursor:pointer;
  font-family:var(--sans);font-size:16px;font-weight:600;
  /* ⚠️ Cobre puro sobre papel dá 2,69:1, e o piso de botão aqui é 3:1. Este tom
     é o mesmo cobre escurecido até passar da régua, ⛔ não uma cor nova. */
  color:#8a5222;
  text-decoration:underline;text-underline-offset:4px;
}
.ficha-lida{margin-top:14px;border-top:1px solid rgba(27,26,24,.14);padding-top:14px;}
.ficha-lida .revisao-lista{margin:0;}
.ficha-lida .tem-audio{
  display:inline-block;margin-left:10px;font-family:var(--sans);font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cobre);
}

/* ── As abas de pagamento ─────────────────────────────────────────────────── */
.checkout-abas{display:flex;border-bottom:1px solid rgba(27,26,24,.16);}
.checkout-abas .aba{
  flex:1;min-height:52px;padding:15px 12px;cursor:pointer;
  background:rgba(27,26,24,.05);border:0;border-bottom:2px solid transparent;
  font-family:var(--sans);font-size:17px;font-weight:600;color:#5b554b;
}
.checkout-abas .aba.ativa{background:none;color:var(--marfim-tinta);border-bottom-color:var(--cobre);}
/* ⚠️ O painel do cartão tem UMA coluna só: sem esta linha ele herdava a grade
   de 200 px do painel do Pix (que tem o QR do lado) e o formulário inteiro ficava
   espremido em 200 px. Achado olhando a captura em 16/09. */
.checkout-cartao{grid-template-columns:1fr!important;}
.checkout-cartao .checkout-lado{max-width:520px;}
.checkout-cartao #cartao-numero{
  background:rgba(27,26,24,.05);border-bottom-style:dashed;cursor:not-allowed;color:#8a8378;
}
#pix-cpf{max-width:260px;}
#cartao-parcelas{
  width:100%;max-width:420px;font-family:var(--sans);font-size:17px;
  padding:13px 12px;border:1px solid rgba(27,26,24,.22);background:rgba(255,255,255,.7);
  color:var(--marfim-tinta);border-radius:0;
}
#btn-pagar-cartao{margin-top:22px;}

/* ── A tela de obrigado ───────────────────────────────────────────────────── */
.obrigado{margin-top:32px;padding-top:28px;border-top:1px solid rgba(27,26,24,.16);}
.obrigado h3{margin:0 0 12px;color:var(--marfim-tinta);}
.obrigado .compra-item{margin:18px 0;}
.obrigado .checkout-selo{margin-top:18px;}

.checkout{margin-top:28px;border:1px solid rgba(27,26,24,.2);background:rgba(255,255,255,.55);}
.checkout-selo{
  margin:0;padding:15px 20px;background:var(--cobre);color:#fff;
  font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.45;
}
.checkout-selo[hidden]{display:none;}
.checkout-corpo{display:grid;gap:clamp(22px,3vw,34px);padding:clamp(22px,3vw,32px);}
@media (min-width:720px){.checkout-corpo{grid-template-columns:200px 1fr;align-items:start;}}
.checkout-qr{width:200px;max-width:100%;}
.checkout-qr svg{width:100%;height:auto;display:block;border:1px solid rgba(27,26,24,.14);}
.checkout-valor{
  font-family:var(--serif);font-size:clamp(28px,4vw,38px);line-height:1;
  color:var(--marfim-tinta);margin:0 0 14px;
}
.checkout-rotulo{
  display:block;font-family:var(--sans);font-size:15px;letter-spacing:.12em;
  text-transform:uppercase;color:#5b554b;margin:20px 0 8px;
}
#pix-codigo{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;line-height:1.5;
  border:1px solid rgba(27,26,24,.2);padding:12px;background:rgba(255,255,255,.7);
  resize:vertical;min-height:0;
}
/* ⚠️ No celular a coluna é estreita e o código quebra em quatro linhas: com as
   três de `rows` a última ficava cortada pela metade. Achado na captura. */
@media (max-width:640px){#pix-codigo{min-height:116px;}}
#btn-copiar-pix{margin-top:14px;font-size:16px;padding:14px 22px;}
#pix-copiado{color:var(--cobre);margin-top:12px;}

/* ⚠️ O `.miudo` do estilo.css é marfim a 62%, porque ele nasceu para fundo
   ESCURO. Dentro do pop-up, que é marfim, ele ficava quase invisível: o mesmo
   defeito do `.botao-vazio`, na letra pequena. */
.modal-aplicacao .miudo{color:#6a6459;}
.modal-aplicacao .audio-limite,.modal-aplicacao .nota-sem-numero{color:#7a746a;}

/* ── Progresso ────────────────────────────────────────────────────────────── */
.modal-aplicacao .passos{gap:4px;margin:0 0 14px;}
.modal-aplicacao .passos li{height:3px;background:rgba(27,26,24,.13);transition:background .3s ease;}
.modal-aplicacao .passos li.feito{background:var(--cobre);}
@media (prefers-reduced-motion:reduce){.modal-aplicacao .passos li{transition:none;}}
.modal-aplicacao .passo-nome{margin-bottom:0;}
.modal-aplicacao .passo-nome .qual{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--cobre);}
.modal-aplicacao .passo-nome .conta{font-size:15px;letter-spacing:.12em;color:#7a746a;}

/* ── O pé com os botões ─────────────────────────────────────────────────────
   🔴 ACHADO EM 16/09/2026, OLHANDO A CAPTURA. `.botao-vazio` do `estilo.css`
   nasceu para fundo ESCURO: ele é transparente com texto marfim. Dentro do
   pop-up, que é marfim, isso deixava "Voltar", "Pedir outro horário",
   "Continuar respondendo" e "Voltar para a página" MARFIM SOBRE MARFIM, ou seja
   INVISÍVEIS. O botão existia, recebia clique e o teclado passava por ele: só
   ⛔ não dava para vê-lo.
   ⚠️ `estilo.css` já tinha a versão clara, presa a `.clara` — e o pop-up ⛔ não é
   `.clara`. A régua que saiu daí está medida na suíte: todo botão visível
   precisa de pelo menos 3:1 entre texto e fundo. */
.modal-aplicacao .botao-vazio{color:var(--marfim-tinta);border-color:rgba(27,26,24,.24);}
.modal-aplicacao .botao-vazio:hover{background:rgba(27,26,24,.05);border-color:var(--cobre);color:var(--marfim-tinta);}


/* ⛔ Sem filete aqui: o campo já termina numa linha, e uma segunda logo abaixo
   lê-se como repetição. O que separa os botões da pergunta é o espaço. */
.modal-aplicacao .acoes{margin-top:clamp(38px,6vh,60px);padding-top:0;border-top:0;}
.modal-aplicacao .confirmacao .acoes-fim{padding-top:26px;border-top:1px solid rgba(27,26,24,.13);}
.seta-volta{transition:transform .22s ease;}
.botao-vazio:hover .seta-volta{transform:translateX(-4px);}
@media (prefers-reduced-motion:reduce){.seta-volta{transition:none;}}

/* ── Confirmação dentro do pop-up ─────────────────────────────────────────── */
.modal-aplicacao .confirmacao .corpo{color:#4a463f;}
.modal-aplicacao #bloco-interesse{margin-top:38px;}
.nota-interesse{margin-top:16px;max-width:58ch;}
.interesse-ok-titulo{margin:0 0 8px;font-size:18px;}
.acoes-fim{margin-top:46px;}

/* ── A pergunta de saída ──────────────────────────────────────────────────── */
.modal-sair{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  background:rgba(242,236,225,.94);padding:24px;
}
.modal-sair[hidden]{display:none;}
.modal-sair-caixa{max-width:520px;border:1px solid rgba(27,26,24,.18);background:var(--marfim);padding:clamp(26px,4vw,40px);}
.modal-sair-caixa h3{font-family:var(--serif);font-size:clamp(22px,3vw,29px);margin:0 0 14px;color:var(--marfim-tinta);}
.modal-sair-caixa .corpo{color:#4a463f;font-size:17px;}
.modal-sair-caixa .acoes{margin-top:30px;}

/* ── Enquanto o pop-up está aberto ────────────────────────────────────────── */
/* ⚠️ A página atrás ⛔ não pode rolar: no celular, rolar o fundo por baixo de um
   pop-up aberto é a forma mais rápida de a pessoa se perder. */
html.aplicacao-aberta,
html.aplicacao-aberta body{overflow:hidden;}
/* A barra de revisão ⛔ não pode aparecer por cima do pop-up. */
html.aplicacao-aberta .barra-revisao,
html.aplicacao-aberta .indice-secoes,
/* 🔴 O botão fixo ⛔ não pode aparecer por cima do pop-up: ele existe para
   CHAMAR a aplicação, e com ela aberta ele perdeu a função. */
html.aplicacao-aberta .cta-fixo{display:none!important;}

/* ── Só para leitor de tela ───────────────────────────────────────────────── */
.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}