/* =============================================
   CONTACT
   ============================================= */

.contact { background: var(--contact-bg); transition: background 0.3s ease; }
.contact__inner { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: start; }
.contact__left .section-badge { margin-bottom: 16px; }
.contact__left .section-title { text-align: left; font-size: clamp(1.8rem,3vw,2.4rem); }
.contact__left > p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 24px; }
.contact__info a { color: var(--accent-2); font-size: 0.92rem; font-weight: 500; }
.contact__info a:hover { text-decoration: underline; }
.contact__whatsapp { display: inline-flex; align-items: center; gap: 8px; }
.contact__form {
  display: flex; flex-direction: column; gap: 20px;
  background: var(--form-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 36px;
  transition: background 0.3s ease, border-color 0.3s ease;
}
[data-theme="light"] .contact__form { background: #fff; border-color: rgba(0,0,0,0.08); box-shadow: 0 4px 32px rgba(0,0,0,0.07); }

.form-group { display: flex; flex-direction: column; gap: 0; position: relative; }
.form-group label {
  font-size: 0.85rem; font-weight: 500; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 8px; transition: color var(--transition);
}
.form-group:focus-within label { color: var(--accent); }
[data-theme="light"] .form-group label { color: var(--text-muted); }
[data-theme="light"] .form-group:focus-within label { color: var(--accent); }

.form-group input, .form-group select, .form-group textarea {
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-body);
  font-size: 0.95rem; padding: 12px 16px; outline: none;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  resize: vertical;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea { background: #f5f6fa; border-color: rgba(0,0,0,0.1); }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-dim); }
.form-group select option { background: var(--bg-3); }