/* ===== CONTATO ===== */
#contact{
  padding:80px 0;
}

/* HEADER */
.contact-header{
  text-align:center;
  margin-bottom:50px;
}

.contact-header h1{
  font-size:2.2rem;
  font-weight:800;
  color:var(--primary);
  margin-bottom:12px;
}

.contact-header p{
  color:var(--text-muted);
  max-width:520px;
  margin:0 auto;
  font-size:1rem;
}

/* BOX */
.contact-box{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:22px;
  padding:40px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:40px;
  box-shadow:var(--shadow);
}

/* FORM */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.form-group{
  display:flex;
  flex-direction:column;
}

.form-group label{
  font-size:.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-muted);
  margin-bottom:6px;
}

.form-group input,
.form-group textarea{
  background:var(--bg-page);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  font-size:.95rem;
  color:var(--text);
  transition:.2s;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
  color:var(--text-muted);
}

.form-group input:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(59,130,246,.15);
}

/* BOTÃO */
.btn-submit{
  margin-top:10px;
  background:var(--primary);
  color:#fff;
  border:none;
  padding:14px;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
  transition:.3s;
}

.btn-submit:hover{
  filter:brightness(1.1);
  transform:translateY(-2px);
}

/* INFO */
.contact-info{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.contact-info h3{
  color:var(--primary);
  margin-bottom:8px;
}

.contact-info p{
  color:var(--text-muted);
  line-height:1.5;
}

/* WHATSAPP */
.whatsapp-link{
  margin-top:15px;
  display:inline-block;
  background:#25D366;
  color:#fff;
  padding:14px;
  text-align:center;
  border-radius:14px;
  font-weight:700;
  text-decoration:none;
  transition:.3s;
}

.whatsapp-link:hover{
  filter:brightness(1.1);
}

/* RESPONSIVO */
@media(max-width:768px){
  .contact-box{
    grid-template-columns:1fr;
    padding:30px 22px;
  }

  .contact-header h1{
    font-size:1.8rem;
  }
}