@keyframes trocaCores {

    0%,100%{

        background-color: var(--verde);

        border: none;

    }

    33%{

        background-color: var(--azul);

        border: none;

    }

    66%{

        background-color: var(--preto);

        border: 1px solid #fff;

    }

}



#form-contato{

    padding: 225px 0px 122px 0px;

    width: 100%;

    position: relative;

    height: auto;

}

#form-contato .container{

    width: 1540px;

    height: auto;

    margin: 0 auto;

    max-width: 90%;

    position: relative;

    padding: 80px 80px 70px 80px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

#form-contato .container .bolinhas{

    z-index: 4;

    position: absolute;

    top: 33px;

    left: 33px;

    display: flex;

    gap: 9px;

    flex-direction: row;

}

#form-contato .container .bolinhas .bolinha{

    width: 10px;

    height: 10px;

    border-radius: 50%;

    animation: trocaCores 3s infinite;

}

#form-contato .container .bolinhas .bolinha01{

    background-color: var(--verde);

    animation-delay: 0s;

}

#form-contato .container .bolinhas .bolinha02{

    background-color: var(--azul);

    animation-delay: 1s;

}

#form-contato .container .bolinhas .bolinha03{

    background-color: var(--preto);

    animation-delay: 2s;

}

#form-contato .container .bg{

    width: calc(100% - 2px);

    height: calc(100% - 2px);

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 15px;

    background-color: var(--preto);

    background-image: url(../../../consultoria-em-vendas/geral/bg-form-footer.webp);

    background-size: cover;

    background-position: left center;

    background-repeat: no-repeat;

}

#form-contato .container .esq {

    margin-top: -20px;

    width: 45%;

    z-index: 3;

}

#form-contato .container .esq h2{

    font-family: var(--raleway);

    font-size: 70px;

    color: #fff;

    font-weight: 700;

    line-height: 85px;

    text-transform: uppercase;

}

#form-contato .container .esq p{

    margin-top: 17px;

    width: 83%;

    font-family: var(--poppins);

    font-weight: 400;

    font-size: 16px;

    color: #fff;

    line-height: 25px;

}

#form-contato .container form{

    z-index: 3;

    width: 720px;

    max-width: 52%;

}

#form-contato .container form .box-input{

    position: relative;

    width: 100%;

    margin-bottom: 15px;

    display: flex;

    column-gap: 15px;

}

#form-contato .container form .box-input .inside{

    width: 50%;

    position: relative;

}

#form-contato .container form .box-input input,
#form-contato .container form .box-input select {

    width: 100%;

    background-color: #fff;

    border: 2px solid #fff;

    height: 40px;

    border-radius: 10px;

    padding-left: 15px;

    font-weight: 400;

    font-size: 14px;

    font-family: var(--poppins);

    color: var(--preto);

    transition: var(--transicao);

}

#form-contato .container form .box-input input:focus,#form-contato .container form textarea:focus{

     border: 2px solid var(--verde);

}

#form-contato .container form .box-input label {

    font-weight: 400;

    font-size: 14px;

    color: var(--preto);

    position: absolute;

    left: 15px;

    top: 10px;

    transition: var(--transicao);

}



#form-contato .container form .box-input label.subir {

    background: var(--verde);

    font-weight: 700;

    border-radius: 10px;

    font-size: 10px;

    padding: 2px 8px;

    top: -11px;

}

#form-contato .container form .box-input textarea {

    width: 100%;

    background-color: #fff;



    height: 120px;

    border-radius: 10px;

    padding-left: 15px;

    font-weight: 400;

    font-size: 14px;

    color: var(--preto);

    font-family: var(--poppins);

    padding-top: 15px;

    transition: var(--transicao);

    resize: none;

}



#form-contato .container form button{

    padding: 0;

    width: 100%;

    height: 65px;

    color: var(--preto);

    background-color: var(--verde);

    border-radius: 50px;

    border: none;

    text-transform: uppercase;

    font-family: var(--raleway);

    font-weight: 700;

    font-size: 20px;

    text-align: center;

    text-transform: uppercase;

    cursor: pointer;

    transition: var(--transicao);

    margin-bottom: 15px;

}

#form-contato .container form button:hover{

    background-color: var(--azul);

    color: #fff;

}

#form-contato .container form .preenchimento{

    text-align: center;

    font-weight: 400;

    font-size: 12px;

    text-align: center;

    color: #fff;

    transition: var(--transicao);

}



#form-contato .container form .preenchimento a {

    color: #fff;

    transition: var(--transicao);

}



#form-contato .container form .preenchimento a:hover {

    color: var(--verde);

}

#form-contato .container form .box-input input::placeholder.error,#form-contato .container form .box-input textarea::placeholder.error{

    color: red;

}





@media screen and (max-width: 1800px) {

    #form-contato .container{

        margin: 0 auto;

    }

}

@media screen and (max-width: 1680px) {}

@media screen and (max-width: 1600px) {}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1366px) {

    #form-contato .container .esq h2 {

        font-size: 60px;

        line-height: 65px;

    }

}



@media screen and (max-width: 1280px) {}

@media screen and (max-width: 1160px) {

    #form-contato .container .esq h2 {

        font-size: 55px;

        line-height: 60px;

    }

}

@media screen and (max-width: 1080px) {}

@media screen and (max-width: 1024px) {

    #form-contato {

        padding: 125px 0px 90px 0px;

    }

    #form-contato .container {

        flex-direction: column;

        row-gap: 40px;

        padding: 80px 50px 70px 50px;

    }

    #form-contato .container .esq {

        margin-top: 0px;

        width: 100%;

    }

    #form-contato .container .esq p {

        width: 100%;

        margin-top: 10px;

    }



    #form-contato .container form {

        width: 760px;

        max-width: 100%;

    }

}

@media screen and (max-width: 996px) {}

@media screen and (max-width: 768px) {

    #form-contato .container {

        padding: 80px 30px 70px 30px;

    }

}

@media screen and (max-width: 600px) {

    #form-contato .container .esq h2 {

        font-size: 47px;

        line-height: 45px;

    }





}

@media screen and (max-width: 500px) {

     #form-contato .container form .box-input label {

        font-size: 14px;

    }

    #form-contato .container form .box-input {

        flex-direction: column;

        row-gap: 20px;

        margin-bottom: 20px;

    }

    #form-contato .container form .box-input .inside {

        width: 100%;

    }

}

@media screen and (max-width: 460px) {}

@media screen and (max-width: 430px) {

    #form-contato .container .esq h2 {

        font-size: 38px;

        line-height: 38px;

    }

    #form-contato .container {

        padding: 80px 18px 70px 18px;

    }

}

@media screen and (max-width: 400px) {}

@media screen and (max-width: 360px) {}

@media screen and (max-width: 330px) {

    #form-contato .container form .box-input input{

        padding-left: 8px;

    }

    #form-contato .container form .box-input input::placeholder {



        font-size: 12px;

    }

    #form-contato .container .esq h2 {

        font-size: 30px;

        line-height: 33px;

    }

}

@media screen and (max-width: 280px) {}

/* --- HubSpot embed forms: alinhar ao estilo do formulário padrão --- */
#form-contato .container .hubspot-embed-forms {
    z-index: 3;
    width: 720px;
    max-width: 52%;
}

/* Labels brancos dentro do embed */
#form-contato .container .hubspot-embed-forms label,
#form-contato .container .hubspot-embed-forms .hsfc-FieldLabel,
#form-contato .container .hubspot-embed-forms .hs-form-field label,
#form-contato .container .hubspot-embed-forms .hs-form-required,
#form-contato .container .hubspot-embed-forms .hsfc-FieldLabel__RequiredIndicator {
    color: #ffffff;
}

#form-contato .container .hubspot-embed-forms .hs-fieldtype-select:not(.hs_nivel_do_cargo, .hs_area) {
    width: 100%;
}

#form-contato .container .hubspot-embed-forms label {
    display: none;
}

#form-contato .container .hubspot-embed-forms input,
#form-contato .container .hubspot-embed-forms input::placeholder,
#form-contato .container .hubspot-embed-forms textarea,
#form-contato .container .hubspot-embed-forms textarea::placeholder {
    font-size: 14px;
    color: var(--preto) !important;
}

/* Responsivo igual ao formulário padrão */
@media screen and (max-width: 1024px) {
    #form-contato .container .hubspot-embed-forms {
        width: 760px;
        max-width: 100%;
    }
}

@media screen and (max-width: 500px) {
    #form-contato .container .hubspot-embed-forms {
        width: 100%;
    }
}

/* Mensagens de erro em vermelho e remoção de bullets em listas de erro */
#form-contato .container .hubspot-embed-forms .hs-error-msg,
#form-contato .container .hubspot-embed-forms .hs-error-msgs li {
    font-size: 12px;
    color: red !important;
}

#form-contato .container .hubspot-embed-forms .hs-error-msgs,
#form-contato .container .hubspot-embed-forms .hs-error-msgs li {
    list-style: none !important;
    margin: 0;
    padding: 0;
    color: red !important;
}

/* Bloco de erro geral (aparece antes do botão enviar) */
#form-contato .container .hubspot-embed-forms .hs_error_rollup {
    width: 100%;
    text-align: center;
    color: red;
    margin-bottom: 15px;
}

#form-contato .container .hubspot-embed-forms .hs_error_rollup .hs-error-msgs,
#form-contato .container .hubspot-embed-forms .hs_error_rollup .hs-error-msgs li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Garantir que o label da mensagem de erro fique vermelho, mesmo com labels brancos gerais */
#form-contato .container .hubspot-embed-forms .hs_error_rollup label,
#form-contato .container .hubspot-embed-forms .hs_error_rollup .hs-main-font-element {
    color: red !important;
}

/* contato.css: estilos do formulário de contato */
#form-contato .container .hubspot-embed-forms {
    z-index: 3;
    width: 720px;
    max-width: 52%;
}

#form-contato .container .hubspot-embed-forms form.hs-form {
    width: 100%;
}

#form-contato .container .hubspot-embed-forms .hs-form-field {
    position: relative;
    width: 50%;
    margin-bottom: 15px;
    display: inline-flex;
    flex-direction: column;
    padding-right: 15px;
    box-sizing: border-box;
}

#form-contato .container .hubspot-embed-forms .hs-form-field:nth-child(2n) {
    padding-right: 0;
}
/* #form-contato .container .hubspot-embed-forms .hs-form-field.hs-fieldtype-select {
    width: 100%;
} */

/* Campos de largura total (Website e Mensagem) */
#form-contato .container .hubspot-embed-forms .hs-form-field[class*="hs_message"],
#form-contato .container .hubspot-embed-forms .hs-form-field[class*="website"] {
    width: 100%;
    padding-right: 0;
}

/* Label */
#form-contato .container .hubspot-embed-forms label {
    font-weight: 400;
    font-size: 14px;
    color: var(--preto);
    margin-bottom: 6px;
    font-family: var(--poppins);
}

/* Inputs e selects */
#form-contato .container .hubspot-embed-forms .hs-input,
#form-contato .container .hubspot-embed-forms select.hs-input {
    width: 100%;
    background-color: #fff;
    border: 2px solid #fff;
    height: 40px;
    border-radius: 10px;
    padding-left: 15px;
    font-weight: 400;
    font-size: 14px;
    font-family: var(--poppins);
    color: var(--preto);
    transition: var(--transicao);
    box-sizing: border-box;
}

/* Textarea */
#form-contato .container .hubspot-embed-forms textarea.hs-input {
    height: 120px;
    border-radius: 10px;
    padding: 15px;
    resize: none;
}

/* Foco */
#form-contato .container .hubspot-embed-forms .hs-input:focus,
#form-contato .container .hubspot-embed-forms textarea.hs-input:focus {
    border: 2px solid var(--verde);
    outline: none;
}

/* Erros */
#form-contato .container .hubspot-embed-forms .hs-error-msg {
    font-size: 12px;
    color: red;
    margin-top: 6px;
    font-family: var(--poppins);
}

#form-contato .container .hubspot-embed-forms .hs-input.error {
    border-color: red;
}

/* Botão */
#form-contato .container .hubspot-embed-forms .hs-form .hs-submit,
#form-contato .container .hubspot-embed-forms input[type="submit"],
#form-contato .container .hubspot-embed-forms .hs-button {
    width: 100%;
    height: 65px;
    color: var(--preto);
    background-color: var(--verde);
    border-radius: 50px;
    border: none;
    text-transform: uppercase;
    font-family: var(--raleway);
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transicao);
    margin-bottom: 15px;
}

#form-contato .container .hubspot-embed-forms .hs-button:hover,
#form-contato .container .hubspot-embed-forms input[type="submit"]:hover {
    background-color: var(--azul);
    color: #fff;
}

/* Responsivo, seguindo o padrão da página de contato */
@media screen and (max-width: 1024px) {
    #form-contato .container .hubspot-embed-forms {
        width: 760px;
        max-width: 100%;
    }
}

@media screen and (max-width: 500px) {
    #form-contato .container .hubspot-embed-forms .hs-form-field {
        width: 100%;
        padding-right: 0;
        margin-bottom: 20px;
    }
}