/**
 * File: trabaja.css
 * Path: wp-content/plugins/mjordan/assets/css/trabaja.css
 *
 * Sección "Trabajá con nosotros" ([mjordan_trabaja]) con formulario
 * de postulación.
 *
 * Archivo autónomo: las reglas .jm-trabaja-* que estaban en
 * portada.css quedan obsoletas al borrar el shortcode viejo de allá.
 *
 * Estructura de fondo: misma que .jm-fin en portada.css, que es la
 * que funciona a todo el ancho. El degradé va en el <section>, y los
 * divs interiores solo centran el contenido con max-width propio.
 */

/* ============================================================
   Contenedor
   ============================================================ */
.jm-trabaja-wrap {
  --jm-verde: #3E9A54;
  --jm-verde-osc: #2C6F3D;
  --jm-oro: #D99A16;
  --jm-crema: #F1D9A8;
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--jm-verde) 0%, var(--jm-verde-osc) 100%);
  margin: 0 0 66px;
  padding: 0;
  font-family: "Barlow", system-ui, sans-serif;
}
.jm-trabaja-wrap * { box-sizing: border-box; }

.jm-trabaja {
  position: relative;
  padding: 62px 24px;
}
.jm-trabaja-mark {
  position: absolute;
  top: -40px;
  right: -30px;
  opacity: .13;
  pointer-events: none;
}
.jm-trabaja-mark img { width: 280px; height: auto; }

/* Dos columnas: texto + formulario. Centrado con la misma medida
   que el resto de las secciones. */
.jm-trabaja-grid {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: start;
}

/* ============================================================
   Columna de texto
   ============================================================ */
.jm-trabaja-inner { min-width: 0; }

.jm-trabaja-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 999px;
}
.jm-trabaja h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: .98;
  margin: 16px 0 0;
}
.jm-trabaja-lead {
  color: #E4F3E7;
  font-size: 17.5px;
  line-height: 1.55;
  margin: 18px 0 0;
  max-width: 46ch;
}

/* ============================================================
   Formulario
   ============================================================ */
.jm-trabaja-form-col { min-width: 0; }

.jm-form {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  padding: 26px;
  backdrop-filter: blur(6px);
}

.jm-form-row { margin-bottom: 16px; }
.jm-form-row:last-of-type { margin-bottom: 20px; }

.jm-form-row label {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  font-size: 13px;
  color: #DCEFE1;
  margin-bottom: 6px;
}
.jm-form-row label span { color: var(--jm-crema); }

.jm-form input[type="text"],
.jm-form input[type="tel"],
.jm-form input[type="email"],
.jm-form textarea {
  width: 100%;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 16px;
  color: #221A18;
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.jm-form textarea { resize: vertical; min-height: 84px; }

.jm-form input:focus,
.jm-form textarea:focus {
  outline: none;
  border-color: var(--jm-oro);
  box-shadow: 0 0 0 3px rgba(217,154,22,.25);
}
.jm-form input::placeholder,
.jm-form textarea::placeholder { color: #9A8E82; }

/* Marca de campo inválido, la pone el JS */
.jm-form .is-error input,
.jm-form .is-error textarea {
  border-color: #FF8A80;
  box-shadow: 0 0 0 3px rgba(255,138,128,.22);
}

/* Dos campos en una fila */
.jm-form-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.jm-form-cols .jm-form-row { margin-bottom: 16px; }

/* --- Campo de archivo --- */
.jm-file {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* El input nativo se oculta pero sigue siendo accesible por teclado */
.jm-file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.jm-file-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.14);
  border: 1.5px solid rgba(255,255,255,.45);
  color: #fff !important;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  font-size: 15px !important;
  padding: 11px 18px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 0 !important;
  transition: background .15s ease, border-color .15s ease;
}
.jm-file-btn:hover { background: rgba(255,255,255,.24); }
.jm-file input[type="file"]:focus-visible + .jm-file-btn {
  border-color: var(--jm-oro);
  box-shadow: 0 0 0 3px rgba(217,154,22,.3);
}
.jm-file-nombre {
  font-size: 14px;
  color: #C8E4CE;
  min-width: 0;
  overflow-wrap: anywhere;
}
.jm-file-nombre.is-cargado { color: var(--jm-crema); font-weight: 600; }

/* --- Honeypot: fuera de vista, sin display:none --- */
.jm-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Botón de envío --- */
.jm-form-btn {
  position: relative;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: var(--jm-verde-osc);
  border: 0;
  border-radius: 11px;
  padding: 15px 24px;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 800;
  font-size: 18px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.jm-form-btn:hover:not(:disabled) { background: var(--jm-crema); transform: translateY(-1px); }
.jm-form-btn:disabled { opacity: .65; cursor: default; }

/* Spinner: solo visible mientras se envía */
.jm-form-btn .spin {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(44,111,61,.3);
  border-top-color: var(--jm-verde-osc);
  border-radius: 50%;
  animation: jmSpin .7s linear infinite;
}
.jm-form-btn.is-enviando .spin { display: block; }
@keyframes jmSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .jm-form-btn .spin { animation-duration: 2s; }
  .jm-form-btn:hover:not(:disabled) { transform: none; }
}

/* --- Mensaje de respuesta --- */
.jm-form-msg {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.5;
  border-radius: 10px;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s ease, padding .2s ease;
}
.jm-form-msg.is-ok,
.jm-form-msg.is-error {
  padding: 13px 16px;
  max-height: 260px;
}
.jm-form-msg.is-ok {
  background: rgba(255,255,255,.92);
  color: var(--jm-verde-osc);
  font-weight: 600;
}
.jm-form-msg.is-error {
  background: rgba(122,22,25,.9);
  color: #FFE7E5;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .jm-trabaja { padding: 48px 24px; }
  .jm-trabaja-grid { grid-template-columns: 1fr; gap: 32px; }
  .jm-trabaja-lead { max-width: none; }
  .jm-trabaja-mark img { width: 200px; }
}
@media (max-width: 560px) {
  .jm-trabaja-wrap { margin-bottom: 48px; }
  .jm-trabaja { padding: 40px 18px; }
  .jm-trabaja-mark { display: none; }
  .jm-form { padding: 20px 18px; }
  .jm-form-cols { grid-template-columns: 1fr; gap: 0; }
  .jm-file { gap: 10px; }
}