/* Estilo automático para a página: contato */
#cabecalho{
    min-height: 500px !important;
    padding: 120px 0px 0px;
    background-color: var(--preto);

    h1{
        font-size: 24px;
        font-weight: 600;
        line-height: 140%; 
    }

    .migalhas{
        justify-content: flex-start !important;
    }

    .subtitulo-cabecalho {
        color: #F5F3F0;
        font-size: 16px;
        font-weight: 500;
        line-height: 160%;
    }
    .atualizacao {
        color: #C8C8C8;
        font-size: 14px;
        font-weight: 400;
    }

    .contato-page {
        padding: 0;
        margin: 0;

        li{
            list-style-type: none;
            color: rgba(245, 243, 240, 0.80);
            font-size: 16px;
            font-weight: 500;
            line-height: 160%; 
            margin-bottom: 14px;
            transition: 300ms all ease-in-out;

            img{
                margin-right: 8px;
            }

            &:hover{
                color: var(--amarelo);
            }
        }
    }

    .img-contato{
        width: 100%;
        object-fit: cover;
        height: 260px;
        border-radius: 23px;
    }
}

#mapa{
    iframe{
        width: 100%;
        height: 530px;
        filter: invert(90%) hue-rotate(180deg) brightness(95%) contrast(90%);
        margin-bottom: -20px;
    }
}

#formulario{
    padding: 60px 0 100px;
    background-color: var(--preto);
    min-height: 320px;
    z-index: 1;
    position: relative;

    .formulario{
        background-color: #1B1B1A;
        border-radius: 24px;
        padding: 40px;
        margin: -400px 0 0 0;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;


        .titulo{
            color: var(--branco);
            font-weight: 600;
            line-height: 140%;
            margin-bottom: 0;
            font-size: 24px;

            span{
                color: var(--amarelo);
            }
        }

        .form-contato{
            margin-top: 32px;

            .form-label{
                font-size: 12px;
                letter-spacing: 0.6px;
                text-transform: uppercase;
                margin-bottom: 8px;
                color: #F5F3F0;
                font-weight: 500;
                line-height: 140%; 
            }

            .form-control,
            .form-select{
                background-color: transparent;
                border: none;
                border-bottom: 1px solid rgba(245, 243, 240, 0.20);
                border-radius: 0;
                color: var(--branco);
                font-size: 14px;
                font-weight: 400;
                padding: 4px 0 10px;

                &::placeholder{
                    color: rgba(245, 243, 240, 0.40);
                }

                &:focus{
                    background-color: transparent;
                    border-color: var(--amarelo);
                    box-shadow: none;
                    color: var(--branco);
                }
            }

            .form-select{
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23F5F3F0' stroke-opacity='0.6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                background-position: right 4px center;
                color: #727170;
                font-weight: 400;

                option{
                    color: var(--preto);
                }
            }

            textarea.form-control{
                resize: vertical;
                min-height: 40px;
            }

            .form-check{
                display: flex;
                align-items: center;
                gap: 8px;
                padding-left: 0;
                margin: 0;

                .form-check-input{
                    width: 18px;
                    height: 18px;
                    margin: 0;
                    background-color: transparent;
                    border: 1px solid rgba(245, 243, 240, 0.40);
                    accent-color: var(--amarelo);

                    &:focus{
                        box-shadow: none;
                        border-color: var(--amarelo);
                    }

                    &:checked{
                        background-color: var(--amarelo);
                        border-color: var(--amarelo);
                    }
                }

                .form-check-label{
                    color: rgba(245, 243, 240, 0.80);
                    font-size: 14px;
                    font-weight: 400;

                    .link-politica{
                        color: var(--amarelo);
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}


/* TABLET */
@media (min-width: 768px) and (max-width: 1024px) {
    
    #cabecalho {
        padding: 180px 0px 50px;
        .img-contato{
            margin-bottom: 20px;
        }
    }
}

/* MOBILE */
@media all and (max-width: 767px) { 
    #cabecalho {
        padding: 180px 0px 50px;
        .img-contato{
            margin-bottom: 20px;
        }
    }
  
}