/* FEEDBACK FORM (modernizado, drop-in compatible) */
.feedback {
  width: 100%;
  max-width: 780px;         /* opcional: limita el ancho para legibilidad */
}

/* Mensajes/ayuda */
.feedback .alert {
  color: #666;
  margin-bottom: 15px;
}

/* Campos base */
.feedback input,
.feedback textarea {
  display: block;
  width: 100%;
  margin: 10px 0 20px;
  color: #333;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  padding: 10px 12px;
  background: #fff;
  height: auto;            /* evita forzar 15px de alto */
  line-height: 1.4;
  font: inherit;
  box-sizing: border-box;
}

/* Estados de interacción */
.feedback input:hover,
.feedback textarea:hover {
  border-color: #ccc;
}
.feedback input:focus,
.feedback textarea:focus {
  border-color: #8493CA;
  outline: none;
  box-shadow: 0 0 0 3px rgba(132,147,202,.15);
}

/* Etiquetas y requerido */
label {
  display: inline-block;
  font-weight: 600;
  margin-bottom: 8px;
}
.required-text,
.required {
  color: #F53C3C;
}

/* Layout responsive de columnas */
.inputname,
.inputemail {
  width: 100%;
}
.inputmessage {
  width: 100%;
}
@media (min-width: 680px) {
  .inputname,
  .inputemail { width: 48%; }
  .inputmessage { width: 80%; }
}

/* Clases específicas previas (mantengo compatibilidad) */
.feedback .name,
.feedback .email {
  /* ya heredarán bordes y padding de la regla base */
}
.feedback .message {
  min-height: 120px;       /* antes 100px */
  resize: vertical;        /* el usuario puede ampliar si necesita */
}

/* Botón submit: reemplaza sprite por CSS puro */
.form-submit .submit,
.feedback .submit-wrapper input {
  appearance: none;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 16px;
  text-align: center;
  border-radius: 6px;
  background: #8493CA;
  line-height: 1.2;
  transition: transform .02s ease, background-color .2s ease, box-shadow .2s ease;
  width: auto;             /* evita forzar 90px si no quieres */
  height: auto;
  box-shadow: 0 2px 0 #5e6ea8;
}
.form-submit .submit:hover,
.feedback .submit-wrapper input:hover {
  background: #6f80c3;
}
.form-submit .submit:active,
.feedback .submit-wrapper input:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #5e6ea8;
}

/* Mantén la API visual de tu wrapper, pero sin imagen de fondo */
.feedback .submit-wrapper {
  position: relative;
  display: inline-block;
  width: auto;
  cursor: pointer;
  margin-top: 4px;
}
.feedback .submit-wrapper span {
  display: none;           /* ocultamos el pseudo borde del sprite */
}

/* Resultado de envío */
.sent-result {
  display: none;
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 4px;
  background: #F5F7FF;
  color: #2b2b2b;
  border: 1px solid #E5E9FF;
}

/* Estados de error y válido (útiles si añades clases desde JS/PHP) */
.input-error {
  border-color: #F53C3C !important;
  box-shadow: 0 0 0 3px rgba(245,60,60,.12) !important;
}
.input-valid {
  border-color: #58c48f !important;
  box-shadow: 0 0 0 3px rgba(88,196,143,.12) !important;
}

/* Accesibilidad: reduce animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}