/* Sección "Bolsa de Trabajo" del impacto — port 1:1 del entregable del diseñador
   (site/CodigoWeb/ar/site/impacto-finnegans/bolsa-trabajo/, compilado en
   section.css). Mismo criterio que /assets/aporta/aporta.css: se copia el CSS
   compilado tal cual, conservando la escala original (font-size en clamp con
   `em` sobre el ancho de viewport) y los ids/clases del entregable.

   ÚNICA DESVIACIÓN, al final del archivo: la banda blanca de fondo. En el sitio
   viejo la sección cae al blanco del body; en esta página `main` está pintado de
   #ffebe5 (ver impacto-page.css) y el `.box` es #feece7, así que sin la banda la
   tarjeta se confundiría con el fondo. */

#bolsaDeTrabajo {
  font-family: "Poppins", sans-serif !important;
  font-size: clamp(0px, 0.78125vw, 10px);
  padding-bottom: 14em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#bolsaDeTrabajo h3 {
  color: #1b387a;
  font-size: 1.4em;
  font-weight: 500;
  border: 1px solid #7687af;
  border-radius: 0.3em;
  padding: 0.1em 1.8em;
  margin-bottom: 2em;
}
#bolsaDeTrabajo h2 {
  color: #1b387a;
  font-size: 3.7em;
  font-weight: 600;
  text-align: center;
  line-height: 1.15em;
  margin-bottom: 0.3em;
}
#bolsaDeTrabajo .descripcion {
  color: #002149;
  font-size: 1.41em;
  margin-bottom: 1.8em;
  text-align: center;
  font-weight: 500;
}
#bolsaDeTrabajo .box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 90em;
  border-radius: 2em;
  background-color: #feece7;
  color: #000;
}
#bolsaDeTrabajo .box .conectamos {
  padding: 2.5em 3.2em;
}
#bolsaDeTrabajo .box .conectamos .manos {
  width: 7.8em;
  margin-bottom: 1.2em;
}
#bolsaDeTrabajo .box .conectamos h4 {
  font-size: 2.5em;
  /* Semibold, no bold (pedido del 2026-09-04). */
  font-weight: 600;
  line-height: 1.1em;
  margin-bottom: 0.8em;
  max-width: 14em;
}
#bolsaDeTrabajo .box .conectamos h4 span {
  color: #fe4d18;
}
#bolsaDeTrabajo .box .conectamos p {
  font-size: 1.34em;
  font-weight: 500;
  line-height: 1.3em;
  margin-bottom: 1.2em;
  max-width: 24em;
}
#bolsaDeTrabajo .box .conectamos ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
#bolsaDeTrabajo .box .conectamos ul li {
  background-color: #fef5f2;
  border-radius: 0.9em;
  border: 1px solid #fda98e;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 1.3em 0.4em 1em;
}
#bolsaDeTrabajo .box .conectamos ul li img {
  width: 2.2em;
  height: 2.2em;
}
#bolsaDeTrabajo .box .vacantes {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #d9dee8;
  border-radius: 2em;
  padding: 2.5em;
}
#bolsaDeTrabajo .box .vacantes .titulo {
  display: flex;
  align-items: center;
  gap: 1.2em;
  /* El titular baja y se pega a la descripción; el aire que se libera queda arriba
     (pedido del 2026-09-04). Antes: sin margen arriba y 1.8em abajo. */
  margin-top: 1.7em;
  margin-bottom: 0.1em;
}
#bolsaDeTrabajo .box .vacantes .titulo img {
  width: 4.8em;
  height: 4.8em;
}
#bolsaDeTrabajo .box .vacantes .titulo h4 {
  font-size: 2.07em;
  /* Semibold, no bold (pedido del 2026-09-04). */
  font-weight: 600;
  line-height: 1.1em;
  color: #1b387a;
}
#bolsaDeTrabajo .box .vacantes p {
  color: #1b387a;
  font-size: 1.05em;
  font-weight: 500;
  line-height: 1.3em;
  margin-bottom: 1.8em;
}
#bolsaDeTrabajo .box .vacantes p a {
  color: #1b387a;
}
#bolsaDeTrabajo .box .vacantes p a:hover {
  color: #fe4d18;
}
#bolsaDeTrabajo .box .vacantes #formVacantes {
  display: flex;
  flex-direction: column;
  gap: 1em;
  flex: 1;
}
#bolsaDeTrabajo .box .vacantes #formVacantes .campo {
  border: 1px solid #cbd2df;
  display: flex;
  align-items: flex-start;
  gap: 1em;
  border-radius: 0.9em;
  padding: 0.5em 0.4em 0.5em 1em;
  transition: border-color 0.2s ease;
}
#bolsaDeTrabajo .box .vacantes #formVacantes .campo img {
  width: 2.2em;
  height: 2.2em;
}
#bolsaDeTrabajo .box .vacantes #formVacantes .campo input,
#bolsaDeTrabajo .box .vacantes #formVacantes .campo textarea {
  border: none;
  outline: none;
  font-size: 1.1em;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  padding: 0.4em 0.9em 0.4em 0;
  font-family: "Poppins", sans-serif;
}
#bolsaDeTrabajo .box .vacantes #formVacantes .campo textarea {
  min-height: 4em;
}
#bolsaDeTrabajo .box .vacantes #formVacantes .campo.invalido {
  border-color: #fe4d18;
}
#bolsaDeTrabajo .box .vacantes #formVacantes .error {
  display: none;
  color: #fe4d18;
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.2em;
  margin-top: -0.7em;
  padding: 0 0.4em 0 4.7em;
}
#bolsaDeTrabajo .box .vacantes #formVacantes .campo.invalido + .error {
  display: block;
}
#bolsaDeTrabajo .box .vacantes #formVacantes button {
  background-color: #fe4d18;
  color: #fff;
  font-size: 1.23em;
  font-weight: 600;
  padding: 0.8em 1.8em;
  border-radius: 0.9em;
  border: none;
  margin-top: 0.4em;
  cursor: pointer;
  transition: all 0.2s ease;
}
#bolsaDeTrabajo .box .vacantes #formVacantes button:hover {
  background-color: #931505;
}
#bolsaDeTrabajo .box .vacantes #formVacantes .confirmacion {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  background-color: #fef5f2;
  border-radius: 0.9em;
  border: 1px solid #fda98e;
  padding: 1.2em 1.8em;
}
#bolsaDeTrabajo .box .vacantes #formVacantes .confirmacion p {
  color: #000;
  font-size: 1.4em;
  font-weight: 400;
  text-align: center;
  margin-bottom: 0;
}
#bolsaDeTrabajo .box .vacantes #formVacantes.enviado .campo,
#bolsaDeTrabajo .box .vacantes #formVacantes.enviado .error,
#bolsaDeTrabajo .box .vacantes #formVacantes.enviado button {
  display: none;
}
#bolsaDeTrabajo .box .vacantes #formVacantes.enviado .confirmacion {
  display: flex;
}

@media screen and (max-width: 650px) {
  #bolsaDeTrabajo {
    font-size: clamp(10px, 3.125vw, 20px);
    padding-bottom: 5em;
    padding-top: 2.5em;
  }
  #bolsaDeTrabajo h3 {
    font-size: 1.2em;
  }
  #bolsaDeTrabajo h2 {
    font-size: 1.6em;
    max-width: 20em;
  }
  #bolsaDeTrabajo .descripcion {
    font-size: 0.87em;
    max-width: 20em;
  }
  #bolsaDeTrabajo .box {
    display: flex;
    flex-direction: column;
    width: 25.7em;
    border-radius: 1.1em;
  }
  #bolsaDeTrabajo .box .conectamos {
    padding: 2em 1.6em 1.4em 1.6em;
  }
  #bolsaDeTrabajo .box .conectamos .manos {
    width: 4.8em;
  }
  #bolsaDeTrabajo .box .conectamos h4 {
    font-size: 1.4em;
  }
  #bolsaDeTrabajo .box .conectamos p {
    font-size: 0.95em;
    max-width: 100%;
  }
  #bolsaDeTrabajo .box .conectamos ul {
    font-size: 0.7em;
  }
  #bolsaDeTrabajo .box .conectamos ul li {
    padding: 0.3em 1em 0.3em 0.8em;
  }
  #bolsaDeTrabajo .box .vacantes {
    padding: 2em 1.6em 1.4em 1.6em;
    border-radius: 1.1em;
  }
  #bolsaDeTrabajo .box .vacantes .titulo {
    gap: 0.8em;
  }
  #bolsaDeTrabajo .box .vacantes .titulo img {
    width: 3.2em;
    height: 3.2em;
  }
  #bolsaDeTrabajo .box .vacantes .titulo h4 {
    font-size: 1.17em;
  }
  #bolsaDeTrabajo .box .vacantes p {
    font-size: 0.8em;
  }
  #bolsaDeTrabajo .box .vacantes #formVacantes {
    gap: 0.6em;
  }
  #bolsaDeTrabajo .box .vacantes #formVacantes .campo {
    padding: 0.4em 0.2em 0.4em 0.6em;
    gap: 0.6em;
  }
  #bolsaDeTrabajo .box .vacantes #formVacantes .error {
    font-size: 0.75em;
    padding: 0 0.4em 0 4.5em;
  }
  #bolsaDeTrabajo .box .vacantes #formVacantes button {
    font-size: 1em;
  }
  #bolsaDeTrabajo .box .vacantes #formVacantes .confirmacion {
    padding: 1.4em 1.4em;
  }
  #bolsaDeTrabajo .box .vacantes #formVacantes .confirmacion p {
    font-size: 0.85em;
  }
}

/* --- Integración en el sitio nuevo (lo único que NO viene del entregable) ---
   Banda blanca: en el entregable la sección cae al blanco del body; acá `main`
   es #ffebe5 y el `.box` (#feece7) desaparecería contra el fondo. El
   padding-top reemplaza al que daba el #ejes del sitio viejo (padding-bottom
   6.96em), que en esta página tiene otra escala. */
#bolsaDeTrabajo {
  background-color: #fff;
  padding-top: 7em;
}
@media screen and (max-width: 650px) {
  #bolsaDeTrabajo {
    padding-top: 2.5em;
  }
}
/* Columna izquierda ("Conectamos talento…"): en el entregable el contenido queda
   arrastrado arriba porque el formulario de la derecha era más corto. Con los dos
   campos nuevos (nombre y correo) la diferencia se nota, así que la caja se
   convierte en una columna flex con el contenido centrado y con el mismo margen
   arriba y abajo que la tarjeta del formulario (2.5em). Así los dos lados miden y
   se leen igual. (Pedido del 2026-08-28; no viene del entregable.) */
#bolsaDeTrabajo .box .conectamos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 2.5em;
  padding-bottom: 2.5em;
}
/* En mobile las dos cajas van apiladas y cada una mide lo suyo: ahí el centrado
   no aporta nada y el padding vuelve al del entregable. */
@media screen and (max-width: 650px) {
  #bolsaDeTrabajo .box .conectamos {
    justify-content: flex-start;
    padding-top: 2em;
    padding-bottom: 1.4em;
  }
}

/* Honeypot antispam: fuera de la vista pero "completable" por un bot. */
#bolsaDeTrabajo #formVacantes .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
/* Aviso de fallo de red al enviar (el entregable no lo contempla porque el form
   no mandaba datos a ningún lado). */
#bolsaDeTrabajo #formVacantes .errorEnvio {
  color: #fe4d18;
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.2em;
  text-align: center;
}
#bolsaDeTrabajo #formVacantes button:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Color de los textos de las dos tarjetas (pedido del 2026-09-04): todo a #04102d.
   El "empresas aliadas" del titular izquierdo NO se toca: sigue en naranja. */
#bolsaDeTrabajo .box .conectamos h4,
#bolsaDeTrabajo .box .conectamos p,
#bolsaDeTrabajo .box .vacantes .titulo h4,
#bolsaDeTrabajo .box .vacantes p,
#bolsaDeTrabajo .box .vacantes p a {
  color: #04102d;
}