/* ========================================================================== QUALIFICA — formulário de qualificação em etapas Uma pergunta por vez. Abre por cima da página, coleta as respostas e no fim monta a mensagem e joga no WhatsApp. A marcação é injetada pelo qualifica.js, então este arquivo só precisa ser linkado no junto do CSS da página. ========================================================================== */ .qz-overlay{ position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .qz-overlay.is-aberto{ display: flex; } /* trava o scroll da página enquanto o formulário está aberto. Usa overflow em vez de position:fixed porque a home tem seções presas ao scroll — mudar a posição do body dispararia um evento de rolagem e bagunçaria o estado delas. */ html.qz-travado, body.qz-travado{ overflow: hidden; } .qz-card{ position: relative; display: flex; flex-direction: column; gap: 28px; width: 100%; max-width: 560px; max-height: 100%; padding: 32px; border: 1px solid rgba(255,255,255,0.1); border-radius: 28px; background: #0d0d0d; box-shadow: 0 24px 80px rgba(0,0,0,0.6); overflow-y: auto; animation: qzEntra .32s cubic-bezier(.22,.61,.36,1); } @keyframes qzEntra{ from{ opacity: 0; transform: translateY(16px) scale(.98); } to{ opacity: 1; transform: none; } } /* ---------- topo: progresso + fechar ---------- */ .qz-topo{ display: flex; align-items: center; gap: 16px; } .qz-barra{ flex: 1; height: 3px; border-radius: 100px; background: rgba(255,255,255,0.1); overflow: hidden; } .qz-barra i{ display: block; width: 0; height: 100%; border-radius: 100px; background: var(--laranja-500, #ff5900); transition: width .35s cubic-bezier(.22,.61,.36,1); } .qz-passo{ flex: none; font-weight: 500; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--neutro-400, #a3a3a3); } .qz-fechar{ flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255,255,255,0.14); border-radius: 100px; background: none; color: var(--neutro-400, #a3a3a3); font-size: 16px; line-height: 1; cursor: pointer; transition: border-color .2s ease, color .2s ease; } .qz-fechar:hover{ border-color: var(--laranja-500, #ff5900); color: var(--branco, #fff); } /* ---------- pergunta ---------- */ .qz-corpo{ display: flex; flex-direction: column; gap: 24px; } .qz-titulo{ margin: 0; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; color: var(--branco, #fff); } .qz-ajuda{ margin: -12px 0 0; font-size: 15px; line-height: 1.45; color: var(--neutro-400, #a3a3a3); } .qz-opcoes{ display: flex; flex-direction: column; gap: 10px; } .qz-opcao{ display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; background: var(--neutro-800, #1a1a1a); color: var(--branco, #fff); font-family: inherit; font-size: 15px; line-height: 1.35; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; } .qz-opcao:hover{ border-color: var(--laranja-500, #ff5900); background: #232323; transform: translateX(3px); } .qz-opcao.is-marcada{ border-color: var(--laranja-500, #ff5900); background: rgba(255,89,0,0.12); } /* o marcador redondo à esquerda vira laranja cheio quando a opção é a escolhida — é o único indicador de estado, já que a etapa avança sozinha */ .qz-opcao::before{ content: ""; flex: none; width: 16px; height: 16px; border: 1px solid rgba(255,255,255,0.28); border-radius: 100px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .qz-opcao.is-marcada::before{ border-color: var(--laranja-500, #ff5900); background: var(--laranja-500, #ff5900); box-shadow: inset 0 0 0 3px #0d0d0d; } /* ---------- campos de texto ---------- */ .qz-campos{ display: flex; flex-direction: column; gap: 14px; } .qz-campo{ width: 100%; height: 56px; padding: 0 18px; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; background: var(--neutro-800, #1a1a1a); color: var(--branco, #fff); font-family: inherit; font-size: 15px; transition: border-color .2s ease; } .qz-campo::placeholder{ color: #6b6b6b; } .qz-campo:focus{ outline: none; border-color: var(--laranja-500, #ff5900); } .qz-campo.qz-erro{ border-color: #ff4444; } .qz-aviso{ margin: 0; font-size: 13px; line-height: 1.4; color: #ff6b6b; } .qz-aviso:empty{ display: none; } /* ---------- rodapé ---------- */ .qz-rodape{ display: flex; align-items: center; justify-content: space-between; gap: 16px; } .qz-voltar{ padding: 0; border: 0; background: none; color: var(--neutro-400, #a3a3a3); font-family: inherit; font-size: 15px; cursor: pointer; transition: color .2s ease; } .qz-voltar:hover{ color: var(--branco, #fff); } .qz-voltar[hidden]{ display: none; } .qz-enviar{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border: 0; border-bottom: 1px solid var(--laranja-500, #ff5900); border-radius: 26px; background: linear-gradient(18deg, rgb(14,0,0) 24.5%, rgb(34,7,0) 49.3%, rgb(193,11,0) 68.9%, var(--laranja-500, #ff5900) 80.5%, rgb(225,154,102) 97.2%); background-size: 220% 220%; box-shadow: 0 4px 4px rgba(0,0,0,0.25); color: var(--neutro-200, #e5e5e5); font-family: inherit; font-weight: 700; font-size: 16px; letter-spacing: -0.02em; white-space: nowrap; cursor: pointer; transition: transform .3s cubic-bezier(.22,.61,.36,1); } .qz-enviar:hover{ transform: translateY(-2px); } .qz-enviar[hidden]{ display: none; } .qz-nota{ margin: 0; font-size: 13px; line-height: 1.4; color: #6b6b6b; } /* ---------- tela final ---------- */ .qz-fim{ display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 16px 0; } .qz-fim .qz-titulo{ font-size: 24px; } .qz-fim p{ margin: 0; font-size: 15px; line-height: 1.45; color: var(--neutro-400, #a3a3a3); } .qz-fim a{ color: var(--laranja-500, #ff5900); } /* ---------- mobile: vira folha de tela cheia ---------- */ @media (max-width: 640px){ .qz-overlay{ padding: 0; align-items: stretch; } .qz-card{ max-width: none; height: 100%; max-height: none; padding: 24px 20px 32px; border: 0; border-radius: 0; gap: 24px; } .qz-titulo{ font-size: 24px; } .qz-rodape{ flex-direction: column-reverse; align-items: stretch; } .qz-enviar{ width: 100%; } .qz-voltar{ text-align: center; } } @media (prefers-reduced-motion: reduce){ .qz-card{ animation: none; } .qz-opcao, .qz-enviar, .qz-barra i{ transition: none; } .qz-opcao:hover, .qz-enviar:hover{ transform: none; } }