/* Contact Form Component */
.contact-form-container {
  background: #fff;
  padding: 3.5rem 4rem;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.1);
}

.contact-form-header { text-align: center; margin-bottom: 2.5rem; }
.contact-form-header h3 { font-size: 2rem; font-weight: 700; margin-bottom: .75rem; color: var(--color-blue); }
.contact-form-header p { color: #666; font-size: 1.1rem; margin: 0; }

.contact-form { display: flex; flex-direction: column; gap: 1.75rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; width: 100%; }
.form-group { display: flex; flex-direction: column; position: relative; width: 100%; }
.form-group.full-width { grid-column: 1 / -1; }

.form-group label { font-weight: 600; color: #333; margin-bottom: .65rem; font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.form-group label i { color: #667eea; font-size: 1.1rem; }

.form-group input,
.form-group textarea,
.form-group select { padding: 1.1rem 1.35rem; border: 2px solid #e9ecef; border-radius: 12px; font: inherit; font-size: 1.05rem; transition: all .3s ease; background: #f8f9fa; }
.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover { border-color: #667eea; background: #fff; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { outline: none; border-color: #667eea; background: #fff; box-shadow: 0 0 0 4px rgba(102,126,234,.1); }

.form-group input.is-invalid,
.form-group textarea.is-invalid,
.form-group select.is-invalid { border-color: #dc3545; background: #fff5f5; }
.form-group input.is-invalid:focus,
.form-group textarea.is-invalid:focus,
.form-group select.is-invalid:focus { box-shadow: 0 0 0 4px rgba(220,53,69,.1); }

.form-group input:valid:not(:placeholder-shown),
.form-group textarea:valid:not(:placeholder-shown) { border-color: #28a745; background: #f0fff4; }

.error-message { color: #dc3545; font-size: .875rem; margin-top: .35rem; font-weight: 500; }
.character-count { display: block; text-align: right; color: #999; font-size: .875rem; margin-top: .35rem; }
.character-count [data-role="char-count"] { font-weight: 700; color: #667eea; }

.checkbox-group { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; background: #f8f9fa; border-radius: 12px; transition: background .3s; }
.checkbox-group:hover { background: #e9ecef; }
.checkbox-group input[type="checkbox"] { width: 22px; height: 22px; margin: 0; cursor: pointer; accent-color: #667eea; }
.checkbox-group label { margin: 0; font-size: 1.05rem; color: #666; cursor: pointer; user-select: none; font-weight: 500; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; padding: 1.2rem 2.5rem; border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all .3s ease; position: relative; }
.btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; box-shadow: 0 4px 15px rgba(102,126,234,.4); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102,126,234,.5); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.spinner { width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Honeypot */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

/* Alerts */
.alert { padding: 1rem 1.25rem; border-radius: 10px; margin-bottom: 1.5rem; display: flex; align-items: flex-start; gap: .75rem; }
.alert-success { background: linear-gradient(135deg,#d4edda,#c3e6cb); color: #155724; border: 1px solid #c3e6cb; }
.alert-error { background: linear-gradient(135deg,#f8d7da,#f5c6cb); color: #721c24; border: 1px solid #f5c6cb; }

/* Responsivo */
@media (max-width: 992px) {
  .contact-form-container { padding: 2.5rem 2rem; }
}
@media (max-width: 768px) {
  .contact-form-container { padding: 2rem 1.5rem; }
  .contact-form-header h3 { font-size: 1.5rem; }
  .form-row { grid-template-columns: 1fr; gap: 1.25rem; }
  .form-group input, .form-group textarea, .form-group select { padding: 1rem 1.25rem; font-size: 1rem; }
}