/*--------------------------------------------------------------
# Contact Form (se usa en todas las páginas: hero de contacto y sección de contacto)
--------------------------------------------------------------*/
.contact-form-card {
  --default-color: #444444;
  --heading-color: #7a8a92;
  background: #ffffff;
  color: var(--default-color);
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.contact-form-card .contact-form-title {
  font-family: var(--default-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--heading-color);
  margin-bottom: 24px;
}

.contact-form-card .form-label {
  color: #333333;
  font-size: 15px;
  margin-bottom: 6px;
}

.contact-form-card .req {
  color: #e02424;
}

.contact-form-card .form-control,
.contact-form-card .form-select {
  background-color: #ededed;
  border: 1px solid #ededed;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 15px;
  color: #333333;
}

.contact-form-card .form-control::placeholder {
  color: #9a9a9a;
}

.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus {
  background-color: #ffffff;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 75%);
}

.contact-form-card .form-select {
  padding-right: 36px;
}

.contact-form-card .form-control.is-invalid,
.contact-form-card .form-select.is-invalid {
  border-color: #e02424;
}

.contact-form-card textarea.form-control {
  min-height: 90px;
}

.contact-form-card .contact-form-count {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #9a9a9a;
  margin-top: 4px;
}

.contact-form-card .contact-form-btn {
  background: #000000;
  color: #ffffff;
  border: 0;
  border-radius: 4px;
  padding: 10px 22px;
  font-size: 16px;
  transition: 0.3s;
}

.contact-form-card .contact-form-btn:hover {
  background: #333333;
}

.contact-form-card .contact-form-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.contact-form-card .contact-form-status {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
}

.contact-form-card .contact-form-status.ok {
  color: #1e8e3e;
}

.contact-form-card .contact-form-status.error {
  color: #e02424;
}

/* Campo trampa para robots: fuera de la pantalla, no con display:none */
.contact-form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 575px) {
  .contact-form-card {
    padding: 22px 16px;
  }

  .contact-form-card .contact-form-title {
    font-size: 18px;
  }

  .contact-form-card .contact-form-btn {
    width: 100%;
  }
}