/**
 * =============================================================================
 *  FORMULÁRIO DE QUALIFICAÇÃO — Estilos
 * =============================================================================
 *  Todo o visual é controlado pelas variáveis em .fq-wrapper.
 *  Para adaptar a uma LP, sobrescreva apenas as variáveis:
 *
 *      .fq-wrapper {
 *          --fq-cor-primaria: #b08d57;
 *          --fq-fonte: 'Sua Fonte', sans-serif;
 *          --fq-raio: 2px;
 *      }
 *
 *  Todas as classes usam o prefixo .fq- para não colidir com o CSS da LP.
 * =============================================================================
 */

/* =============================================================================
 | 1. VARIÁVEIS DE TEMA
 ============================================================================*/

.fq-wrapper {
    /* Cores */
    --fq-cor-primaria:        #18181b;
    --fq-cor-primaria-escura: #000000;
    --fq-cor-texto:           #18181b;
    --fq-cor-texto-suave:     #71717a;
    --fq-cor-borda:           #d4d4d8;
    --fq-cor-borda-foco:      var(--fq-cor-primaria);
    --fq-cor-fundo:           #ffffff;
    --fq-cor-fundo-input:     #ffffff;
    --fq-cor-erro:            #dc2626;
    --fq-cor-sucesso:         #16a34a;

    /* Tipografia */
    --fq-fonte:        inherit;
    --fq-tam-label:    0.875rem;
    --fq-tam-input:    1rem;
    --fq-tam-titulo:   1.375rem;

    /* Forma e espaço */
    --fq-raio:         6px;
    --fq-raio-btn:     6px;
    --fq-espaco:       1.25rem;
    --fq-altura-input: 3rem;
    --fq-transicao:    180ms cubic-bezier(0.4, 0, 0.2, 1);
    --fq-sombra-foco:  0 0 0 3px rgba(24, 24, 27, 0.12);

    /* Estrutura */
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    font-family: var(--fq-fonte);
    color: var(--fq-cor-texto);
    text-align: left;
}

.fq-wrapper *,
.fq-wrapper *::before,
.fq-wrapper *::after {
    box-sizing: border-box;
}

/* =============================================================================
 | 2. BARRA DE PROGRESSO
 ============================================================================*/

.fq-progresso {
    margin-bottom: 1.75rem;
}

.fq-progresso-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.fq-progresso-texto,
.fq-progresso-pct {
    font-size: 0.8125rem;
    color: var(--fq-cor-texto-suave);
    letter-spacing: 0.02em;
}

.fq-progresso-texto strong {
    color: var(--fq-cor-texto);
    font-weight: 600;
}

.fq-progresso-pct {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.fq-progresso-trilha {
    height: 4px;
    background: var(--fq-cor-borda);
    border-radius: 999px;
    overflow: hidden;
}

.fq-progresso-barra {
    height: 100%;
    width: 0;
    background: var(--fq-cor-primaria);
    border-radius: 999px;
    transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================================
 | 3. ETAPAS
 ============================================================================*/

.fq-form {
    position: relative;
    margin: 0;
}

.fq-step[hidden] {
    display: none;
}

.fq-step--ativo {
    animation: fq-entrar 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fq-entrar {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fq-step-titulo {
    margin: 0 0 0.375rem;
    font-size: var(--fq-tam-titulo);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--fq-cor-texto);
}

.fq-step-subtitulo {
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--fq-cor-texto-suave);
}

/* =============================================================================
 | 4. CAMPOS
 ============================================================================*/

.fq-campos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fq-espaco);
}

.fq-campo {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    min-width: 0;
}

.fq-campo--metade {
    flex: 1 1 calc(50% - (var(--fq-espaco) / 2));
}

.fq-label {
    display: block;
    margin-bottom: 0.4375rem;
    font-size: var(--fq-tam-label);
    font-weight: 600;
    line-height: 1.4;
    color: var(--fq-cor-texto);
}

.fq-opcional {
    font-weight: 400;
    color: var(--fq-cor-texto-suave);
}

.fq-ajuda {
    display: block;
    margin: -0.1875rem 0 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--fq-cor-texto-suave);
}

/* ---- Inputs ---------------------------------------------------------------*/

.fq-input {
    width: 100%;
    height: var(--fq-altura-input);
    padding: 0 0.875rem;
    font-family: inherit;
    font-size: var(--fq-tam-input);
    color: var(--fq-cor-texto);
    background: var(--fq-cor-fundo-input);
    border: 1px solid var(--fq-cor-borda);
    border-radius: var(--fq-raio);
    outline: none;
    transition: border-color var(--fq-transicao), box-shadow var(--fq-transicao);
    -webkit-appearance: none;
    appearance: none;
}

.fq-input::placeholder {
    color: var(--fq-cor-texto-suave);
    opacity: 0.65;
}

.fq-input:hover:not(:focus) {
    border-color: var(--fq-cor-texto-suave);
}

.fq-input:focus {
    border-color: var(--fq-cor-borda-foco);
    box-shadow: var(--fq-sombra-foco);
}

.fq-textarea {
    height: auto;
    min-height: 7rem;
    padding: 0.75rem 0.875rem;
    line-height: 1.55;
    resize: vertical;
}

/* ---- Select ---------------------------------------------------------------*/

.fq-select-wrap {
    position: relative;
}

.fq-select-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.375rem;
    border-right: 2px solid var(--fq-cor-texto-suave);
    border-bottom: 2px solid var(--fq-cor-texto-suave);
    transform: rotate(45deg);
    pointer-events: none;
}

.fq-select {
    padding-right: 2.5rem;
    cursor: pointer;
}

/* ---- Radio e checkbox -----------------------------------------------------*/

.fq-opcoes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fq-opcao {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8125rem 0.9375rem;
    background: var(--fq-cor-fundo-input);
    border: 1px solid var(--fq-cor-borda);
    border-radius: var(--fq-raio);
    cursor: pointer;
    transition: border-color var(--fq-transicao), background-color var(--fq-transicao);
}

.fq-opcao:hover {
    border-color: var(--fq-cor-texto-suave);
}

/* O input nativo é escondido, mas continua acessível ao teclado e leitores. */
.fq-opcao input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.fq-opcao-marca {
    position: relative;
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid var(--fq-cor-borda);
    border-radius: 50%;
    transition: border-color var(--fq-transicao);
}

.fq-campo--checkbox .fq-opcao-marca {
    border-radius: 4px;
}

.fq-opcao-marca::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: var(--fq-cor-primaria);
    transform: scale(0);
    transition: transform var(--fq-transicao);
}

.fq-opcao input:checked ~ .fq-opcao-marca {
    border-color: var(--fq-cor-primaria);
}

.fq-opcao input:checked ~ .fq-opcao-marca::after {
    transform: scale(1);
}

.fq-opcao input:focus-visible ~ .fq-opcao-marca {
    box-shadow: var(--fq-sombra-foco);
}

.fq-opcao:has(input:checked) {
    border-color: var(--fq-cor-primaria);
    background: color-mix(in srgb, var(--fq-cor-primaria) 4%, transparent);
}

.fq-opcao-texto {
    font-size: 0.9375rem;
    line-height: 1.4;
}

/* =============================================================================
 | 5. ESTADOS DE VALIDAÇÃO
 ============================================================================*/

.fq-erro {
    display: none;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--fq-cor-erro);
}

.fq-campo--invalido .fq-erro {
    display: block;
    animation: fq-tremer 320ms ease;
}

.fq-campo--invalido .fq-input,
.fq-campo--invalido .fq-opcao {
    border-color: var(--fq-cor-erro);
}

.fq-campo--invalido .fq-input:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

@keyframes fq-tremer {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

/* =============================================================================
 | 6. NAVEGAÇÃO E BOTÕES
 ============================================================================*/

.fq-navegacao {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.fq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--fq-altura-input);
    padding: 0 1.5rem;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    border-radius: var(--fq-raio-btn);
    cursor: pointer;
    transition: background-color var(--fq-transicao), border-color var(--fq-transicao),
                color var(--fq-transicao), transform var(--fq-transicao);
    -webkit-appearance: none;
    appearance: none;
}

.fq-btn:focus-visible {
    outline: none;
    box-shadow: var(--fq-sombra-foco);
}

.fq-btn:active {
    transform: translateY(1px);
}

.fq-btn--proximo,
.fq-btn--enviar {
    flex: 1 1 auto;
    color: #ffffff;
    background: var(--fq-cor-primaria);
}

.fq-btn--proximo:hover,
.fq-btn--enviar:hover {
    background: var(--fq-cor-primaria-escura);
}

.fq-btn--voltar {
    flex: 0 0 auto;
    color: var(--fq-cor-texto-suave);
    background: transparent;
    border-color: var(--fq-cor-borda);
}

.fq-btn--voltar:hover {
    color: var(--fq-cor-texto);
    border-color: var(--fq-cor-texto-suave);
}

.fq-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* ---- Spinner de carregamento ---------------------------------------------*/

.fq-spinner {
    display: none;
    width: 1.0625rem;
    height: 1.0625rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: fq-girar 640ms linear infinite;
}

.fq-btn--carregando .fq-spinner {
    display: block;
}

.fq-btn--carregando .fq-btn-texto {
    opacity: 0.75;
}

@keyframes fq-girar {
    to { transform: rotate(360deg); }
}

/* =============================================================================
 | 7. ALERTA GERAL
 ============================================================================*/

.fq-alerta {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-top: 1.25rem;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--fq-cor-erro);
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: var(--fq-raio);
    animation: fq-entrar 240ms ease both;
}

.fq-alerta[hidden] {
    display: none;
}

/* Ícone desenhado em CSS: nenhuma imagem ou fonte extra para carregar. */
.fq-alerta-icone {
    position: relative;
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.0625rem;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.fq-alerta-icone::before {
    content: '!';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

/* Variação "aviso": o usuário consegue resolver sozinho
   (recarregar a página, aguardar alguns minutos). */
.fq-alerta--aviso {
    color: #b45309;
    background: rgba(217, 119, 6, 0.07);
    border-color: rgba(217, 119, 6, 0.3);
}

/* =============================================================================
 | 7.1 PAINEL DE SUCESSO
 ============================================================================*/

.fq-sucesso {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1.5rem 2rem;
    text-align: center;
    animation: fq-entrar 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fq-sucesso[hidden] {
    display: none;
}

.fq-sucesso-icone {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.25rem;
    color: var(--fq-cor-sucesso);
}

.fq-sucesso-icone svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* O círculo se desenha e o "check" surge em seguida. */
.fq-sucesso-circulo {
    stroke-dasharray: 152;
    stroke-dashoffset: 152;
    animation: fq-tracar 520ms cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.fq-sucesso-risco {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: fq-tracar 320ms cubic-bezier(0.65, 0, 0.45, 1) 420ms forwards;
}

@keyframes fq-tracar {
    to { stroke-dashoffset: 0; }
}

.fq-sucesso-titulo {
    margin: 0 0 0.5rem;
    font-size: var(--fq-tam-titulo);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--fq-cor-texto);
}

.fq-sucesso-texto {
    margin: 0;
    max-width: 22rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--fq-cor-texto-suave);
}

.fq-sucesso-contagem {
    margin: 1.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--fq-cor-texto-suave);
}

.fq-sucesso-contagem[hidden] {
    display: none;
}

.fq-sucesso-contagem strong {
    font-variant-numeric: tabular-nums;
    color: var(--fq-cor-texto);
}

.fq-sucesso-trilha {
    width: 100%;
    max-width: 14rem;
    height: 3px;
    margin-top: 0.625rem;
    background: var(--fq-cor-borda);
    border-radius: 999px;
    overflow: hidden;
}

.fq-sucesso-trilha[hidden] {
    display: none;
}

.fq-sucesso-barra {
    width: 100%;
    height: 100%;
    background: var(--fq-cor-sucesso);
    border-radius: 999px;
    transition-property: width;
    transition-timing-function: linear;
}

.fq-sucesso-link {
    margin-top: 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fq-cor-primaria);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: opacity var(--fq-transicao);
}

.fq-sucesso-link[hidden] {
    display: none;
}

.fq-sucesso-link:hover {
    opacity: 0.7;
}

.fq-erro-fatal {
    padding: 1rem;
    color: var(--fq-cor-erro);
    border: 1px dashed var(--fq-cor-erro);
    border-radius: var(--fq-raio);
}

/* =============================================================================
 | 8. HONEYPOT E AVISO DO reCAPTCHA
 ============================================================================*/

/* Invisível para humanos sem usar display:none — bots costumam ignorar
   campos com display:none, mas preenchem este. */
.fq-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.fq-recaptcha-aviso {
    margin: 1.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--fq-cor-texto-suave);
}

.fq-recaptcha-aviso a {
    color: inherit;
    text-decoration: underline;
}

/* O selo flutuante do Google costuma atrapalhar o layout da LP.
   Ele pode ser ocultado desde que o aviso acima esteja visível
   (exigência dos Termos de Serviço do Google). */
.grecaptcha-badge {
    visibility: hidden;
}

/* =============================================================================
 | 9. RESPONSIVO
 ============================================================================*/

@media (max-width: 480px) {
    .fq-wrapper {
        --fq-tam-titulo: 1.1875rem;
        --fq-altura-input: 2.875rem;
        --fq-espaco: 1rem;
    }

    .fq-campo--metade {
        flex: 1 1 100%;
    }

    .fq-navegacao {
        flex-direction: column-reverse;
        gap: 0.625rem;
    }

    .fq-btn {
        width: 100%;
    }

    /* Fonte < 16px faz o iOS dar zoom automático ao focar o campo. */
    .fq-input {
        font-size: 16px;
    }
}

/* =============================================================================
 | 10. ACESSIBILIDADE
 ============================================================================*/

@media (prefers-reduced-motion: reduce) {
    .fq-wrapper *,
    .fq-wrapper *::before,
    .fq-wrapper *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: more) {
    .fq-wrapper {
        --fq-cor-borda: #52525b;
        --fq-cor-texto-suave: #3f3f46;
    }
}