html.member-checking body > :not(#member-gate):not(script) { display: none !important; }
#member-gate { max-width: 440px; margin: 20vh auto 0; padding: 28px; text-align: center; font-size: 18px; line-height: 1.6; }
#member-gate p { margin: 0 0 14px; }
/* Enquanto tudo vai bem, o portão some em um segundo e ninguém repara neste
link. Quando algo trava, ele é a única saída que a cliente tem. */
.member-gate-help { display: inline-block; margin-top: 10px; color: var(--accent-strong); font-weight: 700; }
#member-gate .member-button { margin: 6px auto 0; }
.member-login { justify-content: center; padding: 36px 24px; gap: 24px; }
.member-login .brand { width: 88px; height: 88px; border-radius: 24px; margin: 0 auto; }
.member-login h1 { font-size: 30px; margin: 0; text-align: center; }
.member-login p { line-height: 1.7; font-size: 17px; margin: 0; }
.member-login form { display: flex; flex-direction: column; gap: 14px; }
.member-login label { font-weight: 800; font-size: 17px; }
.member-login input { width: 100%; min-height: 58px; padding: 16px; border: 1px solid #a39784; border-radius: 12px; font: inherit; font-size: 18px; background: white; }
.member-button { min-height: 54px; padding: 14px 18px; border: 0; border-radius: 12px; background: var(--accent); color: var(--dark-on-accent); font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; }
.member-button:disabled { opacity: .65; cursor: wait; }
.member-button.secondary { background: var(--surface-alt); }
.member-error { color: #922a20; min-height: 24px; font-size: 16px; line-height: 1.6; }
.member-help { color: var(--ink); text-decoration: underline; text-align: center; font-size: 16px; padding: 12px; }
.member-menu-trigger {
width: 44px;
height: 44px;
border: 1px solid oklch(0.58 0.15 82 / 0.2);
border-radius: 50%;
background: var(--accent);
color: var(--dark-on-accent);
display: grid;
place-items: center;
padding: 0;
cursor: pointer;
box-shadow: 0 4px 14px oklch(0.45 0.08 70 / 0.14);
transition: transform 160ms ease, box-shadow 160ms ease;
}
.member-menu-trigger:hover { transform: translateY(-1px); box-shadow: 0 6px 18px oklch(0.45 0.08 70 / 0.2); }
.member-menu-trigger:active { transform: scale(.96); }
.member-menu-emoji { font-size: 21px; line-height: 1; filter: grayscale(1) brightness(.32); }
.member-account-dialog {
width: min(420px, calc(100% - 32px));
max-width: none;
margin: auto;
padding: 0;
border: 0;
border-radius: 24px;
background: var(--bg);
color: var(--ink);
box-shadow: 0 24px 70px oklch(0.18 0.03 50 / 0.3);
}
.member-account-dialog::backdrop { background: oklch(0.18 0.03 50 / 0.5); backdrop-filter: blur(3px); }
.member-account-sheet { display: flex; flex-direction: column; gap: 20px; padding: 24px; }
.member-account-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.member-account-heading h2 { margin: 4px 0 0; font-size: 23px; line-height: 1.2; }
.member-account-eyebrow { color: var(--accent-strong); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.member-menu-close {
flex: 0 0 auto;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: var(--surface-alt);
color: var(--ink);
font: 400 30px/1 'Manrope', sans-serif;
cursor: pointer;
}
.member-account-details { display: flex; flex-direction: column; gap: 7px; padding: 18px; border-radius: 16px; background: var(--surface-alt); overflow-wrap: anywhere; }
.member-account-details p { margin: 0; }
.member-account-label { color: var(--ink-muted); font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.member-account-email { font-size: 17px; font-weight: 700; line-height: 1.5; }
.member-sync { color: var(--ink-muted); font-size: 15px; line-height: 1.5; }
.member-logout { width: 100%; }
.member-account-hint { margin: -6px 0 0; color: var(--ink-muted); font-size: 13px; line-height: 1.55; text-align: center; }
.member-offer-dialog {
width: min(430px, calc(100% - 32px));
max-width: none;
margin: auto;
padding: 0;
border: 0;
border-radius: 26px;
background: linear-gradient(160deg, #fffaf1 0%, var(--bg) 58%, #f4ead9 100%);
color: var(--ink);
box-shadow: 0 28px 80px oklch(0.16 0.04 55 / 0.36);
/* Rolagem lateral nunca; a vertical continua quando a copy for longa. */
overflow-x: hidden;
overflow-y: auto;
}
.member-offer-dialog::backdrop { background: oklch(0.16 0.04 55 / 0.62); backdrop-filter: blur(4px); }
.member-offer-sheet { display: flex; flex-direction: column; gap: 18px; padding: 30px 26px 24px; text-align: center; }
.member-offer-eyebrow { display: flex; flex-direction: column; gap: 8px; color: var(--accent-strong); font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
/* Chamada de alerta: em vermelho, maior e sem caixa alta, para ler como aviso
e não como rótulo de seção. */
.member-offer-alert {
align-self: center; padding: 7px 14px; border-radius: 99px;
background: oklch(0.58 0.2 27 / 0.12); color: oklch(0.47 0.2 27);
font-size: 15px; letter-spacing: 0; text-transform: none;
}
.member-offer-sheet h2 { margin: 0; font-size: 27px; line-height: 1.18; }
.member-offer-copy { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.member-offer-copy p { margin: 0; color: var(--ink-muted); font-size: 17px; line-height: 1.6; }
/* A última frase é a que conduz ao clique, então ganha peso e cor plena. */
.member-offer-copy .member-offer-lead { color: var(--ink); font-size: 18px; font-weight: 700; }
.member-offer-cta {
width: 100%; margin-top: 6px; min-height: 60px; font-size: 18px;
animation: member-offer-pulse 2.2s ease-in-out infinite;
}
/* Todo o destaque vem de box-shadow: sombra não ocupa espaço no layout, então
o brilho nunca empurra a largura nem cria rolagem lateral no pop-up. */
@keyframes member-offer-pulse {
0%, 100% {
box-shadow: 0 0 0 0 oklch(0.66 0.17 80 / 0.7),
0 0 18px 2px oklch(0.74 0.18 80 / 0.35),
0 6px 18px oklch(0.25 0.03 55 / 0.2);
}
55% {
box-shadow: 0 0 0 16px oklch(0.66 0.17 80 / 0),
0 0 36px 10px oklch(0.74 0.18 80 / 0.75),
0 14px 32px oklch(0.25 0.03 55 / 0.3);
}
}
.member-offer-dismiss { align-self: center; min-height: 44px; padding: 8px 18px; border: 0; background: transparent; color: var(--ink-muted); font: inherit; font-size: 15px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.member-progress { display: flex; flex-direction: column; gap: 10px; padding: 20px 0; }
.member-progress p { margin: 0; line-height: 1.6; font-size: 16px; }
.member-done { position: absolute; right: 14px; top: 14px; z-index: 2; background: #e5f4df; color: #214a24; border-radius: 99px; padding: 8px 12px; font-weight: 800; font-size: 14px; }
.member-offer { padding: 20px; border: 1px solid var(--hairline); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; }
.member-offer h2, .member-offer p { margin: 0; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #76531b; outline-offset: 4px; }
@media (max-width: 520px) {
.member-account-dialog { width: calc(100% - 24px); margin: auto auto 12px; border-radius: 24px 24px 18px 18px; }
.member-account-sheet { padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); }
/* A oferta fica centralizada na tela, igual ao desktop. */
.member-offer-dialog { width: calc(100% - 24px); margin: auto; }
.member-offer-sheet { padding: 26px 22px 22px; }
}
@media (prefers-reduced-motion: reduce) {
.member-menu-trigger { transition: none; }
/* Quem pediu menos movimento no aparelho mantem o destaque, sem a pulsacao. */
.member-offer-cta { animation: none; box-shadow: 0 0 28px 6px oklch(0.74 0.18 80 / 0.6), 0 8px 22px oklch(0.25 0.03 55 / 0.22); }
}
/* ---- Recuperar o acesso pelo CPF ------------------------------------------
A conversa que substitui o link do WhatsApp na tela de entrar. Desenhada
para o celular de uma senhora: ocupa a tela inteira, letra grande, balões
bem separados e nada competindo por atenção.
⚠️ NENHUMA animação aqui usa `fill-mode`, de propósito. Aba em segundo plano
congela animação CSS, e com `both` o elemento ficaria parado no primeiro
quadro — que é `opacity: 0`. Ou seja: a cliente que sai para ver uma
mensagem e volta encontraria balões invisíveis. Sem fill-mode, animação que
não roda simplesmente não aparece, e o conteúdo fica visível do mesmo jeito. */
/* O botão que abre. Precisa ser visto sem procurar, mas não pode disputar com
o botão dourado de entrar — quem sabe o e-mail tem que continuar entrando
pelo caminho normal. Por isso: mesmo tamanho, cor calma, contorno firme. */
#recuperar-abrir { border: 2px solid var(--accent-strong); }
/* `height: 100dvh` além do `inset: 0`: no iPhone a barra de endereço faz o
inset apontar para uma altura maior que a visível, e a barra de digitar
acabaria escondida atrás do navegador. */
.recuperar { position: fixed; inset: 0; height: 100dvh; z-index: 60; background: var(--bg); display: flex; flex-direction: column; animation: recuperar-sobe 280ms ease-out; }
.recuperar[hidden] { display: none; }
@keyframes recuperar-sobe { from { transform: translateY(100%); } to { transform: none; } }
.recuperar-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid var(--hairline); }
/* A marca no alto responde a pergunta silenciosa "ainda estou no lugar certo?".
Sem ela, a tela inteira muda e some qualquer sinal do aplicativo. */
.recuperar-identidade { display: flex; align-items: center; gap: 10px; min-width: 0; }
.recuperar-marca { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; }
.recuperar-topo h2 { margin: 0; font-size: 19px; line-height: 1.3; }
/* "Voltar" escrito por extenso, não um X. O X é um símbolo aprendido, e o
público do app não tem obrigação de conhecê-lo. */
.recuperar-fechar { flex: 0 0 auto; min-height: 48px; padding: 10px 16px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface-alt); color: var(--ink); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.recuperar-conversa { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.recuperar-balao { margin: 0; max-width: 86%; padding: 16px 18px; border-radius: 20px; font-size: 18px; line-height: 1.6; animation: recuperar-surge 260ms ease-out; }
.recuperar-balao-nos { align-self: flex-start; background: var(--surface-alt); color: var(--ink); border-bottom-left-radius: 6px; }
.recuperar-balao-ela { align-self: flex-end; background: var(--accent); color: var(--dark-on-accent); font-weight: 800; border-bottom-right-radius: 6px; }
@keyframes recuperar-surge { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Os três pontinhos. Mesma linguagem do WhatsApp, que ela usa todo dia: uma
pausa com pontinhos é "estão respondendo"; a mesma pausa sem eles é "travou". */
.recuperar-escrevendo { display: flex; align-items: center; gap: 6px; padding: 20px 18px; }
.recuperar-escrevendo span { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-muted); animation: recuperar-pontinho 1.2s ease-in-out infinite; }
.recuperar-escrevendo span:nth-child(2) { animation-delay: .18s; }
.recuperar-escrevendo span:nth-child(3) { animation-delay: .36s; }
@keyframes recuperar-pontinho { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
/* O e-mail devolvido é a resposta inteira desta tela: fica destacado, grande e
quebra linha em qualquer ponto — endereço comprido não pode vazar da moldura
nem encolher a letra. */
.recuperar-email { margin: 4px 0; align-self: stretch; padding: 18px; border: 2px solid var(--accent-strong); border-radius: 16px; background: white; color: var(--ink); font-size: 20px; font-weight: 800; text-align: center; line-height: 1.5; overflow-wrap: anywhere; animation: recuperar-surge 260ms ease-out; }
/* Botões dentro da conversa ocupam a largura toda: é o próximo passo dela, e
alvo largo erra menos que alvo pequeno. */
.recuperar-acao { align-self: stretch; margin-top: 6px; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; animation: recuperar-surge 260ms ease-out; }
/* Confirmação do "copiar" nas mesmas cores do "concluído" que já existe no
app, para não inventar um verde novo só aqui. */
.recuperar-copiado { background: #e5f4df; color: #214a24; }
.recuperar-barra { display: flex; gap: 10px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); }
.recuperar-barra[hidden] { display: none; }
.recuperar-barra input { flex: 1; min-width: 0; min-height: 58px; padding: 16px; border: 1px solid #a39784; border-radius: 12px; font: inherit; font-size: 20px; background: white; }
.recuperar-barra .member-button { flex: 0 0 auto; padding: 14px 20px; }
/* Telas estreitas: o teclado numérico já come metade da altura, então o
respiro sai das bordas, nunca do tamanho da letra. */
@media (max-width: 380px) {
.recuperar-conversa { padding: 16px 14px; }
.recuperar-barra { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
.recuperar-balao { max-width: 92%; }
.recuperar-topo h2 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.recuperar, .recuperar-balao, .recuperar-email, .recuperar-acao { animation: none; }
/* Os pontinhos param, mas continuam visíveis: ainda dizem "estou escrevendo",
só que sem movimento. */
.recuperar-escrevendo span { animation: none; opacity: .6; }
}