/* ===========================================================================
   FORMULÁRIOS DE LEAD: CAMPOS, CAIXAS DE MARCAR, TURNSTILE E BOTÃO DE ENVIAR.
   =========================================================================== */

.form-lead .campo {
    margin-bottom: 15px;
}

.form-lead label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 700;
}

.form-lead input,
.form-lead textarea {
    display: block;
    width: 100%;
    height: 42px;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    color: #555;
    font-family: inherit;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.42857143;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-lead textarea {
    height: 110px;
    min-height: 42px;
    resize: vertical;
}

.form-lead ::placeholder {
    color: #aaa;
    opacity: 1;
}

.form-lead input:focus,
.form-lead textarea:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

/* CAMPO INVÁLIDO SÓ FICA VERMELHO DEPOIS QUE A PESSOA MEXE NELE (OU TENTA ENVIAR). */
.form-lead input:user-invalid,
.form-lead textarea:user-invalid {
    border-color: #a94442;
}

.form-lead input:user-invalid:focus,
.form-lead textarea:user-invalid:focus {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(169, 68, 66, .45);
}

/* O WIDGET É REDUZIDO A PARTIR DO CANTO ESQUERDO QUANDO A COLUNA NÃO CABE 300px. */
.form-lead__turnstile {
    margin-bottom: 15px;
}

.form-lead__turnstile .cf-turnstile {
    width: 300px;
    transform-origin: 0 0;
}

.botao-vermelho {
    display: inline-block;
    padding: 11px 55px;
    border-radius: 4px;
    background-color: #bd1b1b;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42857;
    text-align: center;
    vertical-align: middle;
    transition: all .5s ease-out;
}

.botao-vermelho:hover {
    background-color: #750005;
}

.botao-vermelho:disabled {
    opacity: .65;
    cursor: wait;
}

.form-lead .marcar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}

.form-lead .marcar input {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 1px 0 0;
    box-shadow: none;
}

@media (max-width: 767px) {
    /* 16px: O CELULAR NÃO DÁ ZOOM AO TOCAR NO CAMPO. */
    .form-lead input,
    .form-lead textarea {
        font-size: 16px;
    }

    .botao-vermelho {
        display: block;
        width: 100%;
    }
}