/* ── Sección Trabaja con nosotros ───────────────────────────── */

/* Hero del detalle — full-bleed dentro del ancho del tema */
.bf-empleo-hero {
  position: relative;
  height: 70vh;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background: var(--bf-black);
  overflow: hidden;
}
.bf-empleo-hero__media { position: absolute; inset: 0; }
.bf-empleo-hero__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* El degradado garantiza contraste del texto sobre cualquier foto */
.bf-empleo-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(14, 14, 14, 0.92) 5%,
    rgba(14, 14, 14, 0.25) 55%,
    rgba(14, 14, 14, 0.5) 100%
  );
}
.bf-empleo-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-bottom: clamp(28px, 5vw, 64px);
  color: var(--bf-pure-white);
}
.bf-empleo-hero__kicker {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bf-yellow);
  margin: 0 0 10px;
}
.bf-empleo-hero__titulo {
  font-family: var(--font-display-condensed);
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--bf-pure-white);
}
.bf-empleo-hero__facts {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.bf-empleo-fact {
  font-size: 13px; font-weight: 700;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.32);
}
.bf-empleo-fact--y {
  background: var(--bf-yellow);
  color: var(--bf-black);
  border-color: var(--bf-yellow);
}
.bf-empleo-cta {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800;
  padding: 12px 26px; border-radius: 6px;
  background: var(--bf-yellow); color: var(--bf-black);
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.bf-empleo-cta:hover { background: var(--bf-yellow-dark); transform: translateY(-2px); }
.bf-empleo-hero__facts .bf-empleo-cta { margin-left: auto; }

@media (max-width: 640px) {
  .bf-empleo-hero { height: auto; min-height: 60vh; padding-top: 120px; }
  .bf-empleo-hero__facts .bf-empleo-cta { margin-left: 0; width: 100%; text-align: center; }
}

/* Contenido */
/* position:sticky no funciona si algún ancestro tiene overflow distinto de
   visible, y el tema fija overflow-x:hidden en html y body (befun-styles.css
   líneas 10-11) para contener las secciones a ancho completo. `clip` recorta
   igual pero NO crea contenedor de scroll, así que el sticky vuelve a
   funcionar. Acotado a esta plantilla para no alterar el resto del sitio. */
html:has(body.single-empleos),
body.single-empleos { overflow-x: clip; }

/* ── Cuerpo del detalle: contenido + columna lateral ───────── */
.bf-empleo-cuerpo__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(32px, 4vw, 64px);
  /* Sin align-items:start a propósito: la columna lateral necesita estirarse
     a la altura de la fila para que el sticky tenga recorrido. Con los items
     ajustados a su contenido, position:sticky no se mueve nunca. */
}
.bf-empleo-cuerpo__main { align-self: start; }
.bf-empleo-aside { height: 100%; }
/* La columna lateral acompaña el scroll. El offset deja aire bajo la barra
   de navegación fija para que el mapa no quede pegado al borde. */
.bf-empleo-aside__sticky {
  position: sticky;
  top: calc(var(--nav-h, 72px) + 24px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.bf-empleo-aside__datos {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-size: 14px;
}
.bf-empleo-aside__datos dt {
  font-weight: 700;
  color: var(--fg-muted);
}
.bf-empleo-aside__datos dd { margin: 0; }
.bf-empleo-aside__cta { text-align: center; }

/* Por debajo de 900px la columna lateral no cabe: una sola columna, y el
   mapa deja de acompañar el scroll (en móvil un sticky roba pantalla). */
@media (max-width: 900px) {
  .bf-empleo-cuerpo__inner { grid-template-columns: minmax(0, 1fr); }
  .bf-empleo-aside__sticky { position: static; }
}

/* El contenedor conserva el ancho del sitio; la medida de lectura se aplica
   al texto, alineado al mismo borde que el hero y el listado (no centrado). */
.bf-empleo-contenido__inner { max-width: var(--container-max); }
.bf-empleo-contenido__lead,
.bf-empleo-contenido__cuerpo,
.bf-empleo-contenido__h2,
.bf-empleo-lista { max-width: 760px; }
.bf-empleo-contenido__lead { font-size: var(--fs-lead); line-height: 1.5; margin: 0 0 28px; }
.bf-empleo-contenido__cuerpo { font-size: var(--fs-body); line-height: 1.7; }
.bf-empleo-contenido__h2 {
  font-family: var(--font-display-condensed);
  font-size: var(--fs-h3);
  margin: 44px 0 16px;
}
.bf-empleo-lista { padding-left: 20px; line-height: 1.7; }
.bf-empleo-lista li { margin-bottom: 8px; }

/* Ubicación */
.bf-empleo-ubicacion__dir { font-size: var(--fs-body); margin: 0 0 16px; }
.bf-empleo-ubicacion--inline .bf-empleo-ubicacion__mapa {
  aspect-ratio: 4 / 3;
  min-height: 0;
}
.bf-empleo-ubicacion--inline .bf-empleo-contenido__h2 {
  font-size: var(--fs-h4);
  margin-top: 0;
}
.bf-empleo-ubicacion__mapa {
  position: relative; width: 100%;
  aspect-ratio: 16 / 7; min-height: 260px;
  border-radius: 10px; overflow: hidden;
  background: var(--bf-fog);
}
.bf-empleo-ubicacion__mapa iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* Vacante cerrada */
.bf-empleo-cerrada { background: var(--bf-smoke); color: var(--bf-white); }
.bf-empleo-cerrada__inner { max-width: 760px; text-align: center; }
.bf-empleo-cerrada__titulo { font-family: var(--font-display-condensed); font-size: var(--fs-h3); margin: 0 0 12px; }
.bf-empleo-cerrada__texto { margin: 0 0 24px; color: var(--bf-fog); }

/* Formulario */
.bf-empleo-postular { background: var(--bf-black); color: var(--bf-white); }
/* Ocupa el ancho completo del contenedor, como el resto de la sección. */
.bf-empleo-postular__panel { max-width: none; margin-inline: 0; }
.bf-empleo-postular__titulo {
  font-family: var(--font-display-condensed);
  font-size: var(--fs-h2); margin: 0 0 28px;
}
.bf-empleo-form__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
@media (max-width: 640px) { .bf-empleo-form__grid { grid-template-columns: 1fr; } }

.bf-empleo-field { display: block; margin-bottom: 18px; }
.bf-empleo-field > span {
  display: block; font-size: 13px; font-weight: 700;
  margin-bottom: 7px; color: var(--bf-fog);
}
.bf-empleo-field > span small { font-weight: 400; color: var(--bf-ash); }
.bf-empleo-field input,
.bf-empleo-field textarea {
  width: 100%; padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: var(--bf-white);
  font-family: var(--font-body); font-size: 15px;
}
.bf-empleo-field input:focus-visible,
.bf-empleo-field textarea:focus-visible {
  outline: 2px solid var(--bf-yellow); outline-offset: 2px;
}
.bf-empleo-field input.has-error,
.bf-empleo-field textarea.has-error { border-color: #ff5b5b; }
.bf-empleo-field--file input { padding: 10px; border-style: dashed; }

/* Honeypot: fuera de pantalla, no display:none — algunos bots
   ignoran los campos ocultos con display:none. */
.bf-empleo-form__hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.bf-empleo-form__consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: var(--bf-fog); margin: 8px 0 24px;
}
.bf-empleo-form__consent a { color: var(--bf-yellow); }
.bf-empleo-form__error {
  color: #ff8a8a; font-size: 14px; margin: 0 0 16px;
}
/* Captcha de Turnstile — el widget Managed mide 300x65 y no trae margen
   propio: sin esto queda pegado al botón de enviar. Mismo valor que el
   margen inferior de .bf-empleo-form__error, que es el elemento que lo
   precede en el markup. */
.bf-empleo-form__captcha { margin-bottom: 16px; }

.bf-empleo-form__submit[disabled] { opacity: 0.6; cursor: wait; }

/* Estado de carga: cubre tanto la espera anti-bot (hasta 4s sin fetch
   todavía) como el fetch en sí — sin esto el botón se ve muerto durante
   ese tramo y el candidato no sabe si el clic funcionó. */
.bf-empleo-form__submit.is-loading {
  position: relative;
  padding-right: 44px;
}
.bf-empleo-form__submit.is-loading::after {
  content: '';
  position: absolute;
  right: 16px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  border: 2px solid rgba(14, 14, 14, 0.3);
  border-top-color: var(--bf-black);
  border-radius: 50%;
  animation: bf-empleo-spin 0.7s linear infinite;
}
@keyframes bf-empleo-spin {
  to { transform: rotate(360deg); }
}
.bf-empleo-form__success h3 {
  font-family: var(--font-display-condensed);
  font-size: var(--fs-h3); margin: 0 0 10px;
  color: var(--bf-yellow);
}

/* Portada */
.bf-empleos-portada-hero {
  position: relative;
  background: var(--bf-black);
  color: var(--bf-pure-white);
  overflow: hidden;
  padding-top: clamp(140px, 18vh, 220px);
  padding-bottom: clamp(48px, 8vh, 96px);
}
.bf-empleos-portada-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.bf-empleos-portada-hero__inner > * { max-width: 820px; }
.bf-empleos-portada-hero .bf-empleo-contenido__lead { color: var(--bf-fog); }
.bf-empleos-portada-hero .bf-empleo-hero__kicker { margin: 20px 0 0; }

/* Listado de la portada */
.bf-empleos-filtros {
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  margin-bottom: 32px;
}
.bf-empleos-chip {
  font-size: 13px; font-weight: 700;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: transparent; color: var(--fg-primary);
  cursor: pointer;
}
.bf-empleos-chip.is-active {
  background: var(--bf-yellow); border-color: var(--bf-yellow); color: var(--bf-black);
}
.bf-empleos-grid {
  display: grid; gap: 2px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.bf-empleo-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 24px 20px;
  border-top: 1px solid var(--border-soft);
  text-decoration: none; color: var(--fg-primary);
  transition: background 0.2s ease, padding-left 0.2s ease;
}
.bf-empleo-card:last-child { border-bottom: 1px solid var(--border-soft); }
.bf-empleo-card:hover { background: var(--bf-cream); padding-left: 28px; }
.bf-empleo-card[hidden] { display: none; }
.bf-empleo-card__texto { display: block; }
.bf-empleo-card__titulo {
  display: block;
  font-family: var(--font-display-condensed);
  font-size: var(--fs-h4); margin: 0 0 4px;
}
.bf-empleo-card__meta { display: block; font-size: 13px; color: var(--fg-muted); margin: 0; }
.bf-empleo-card__badge {
  font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 5px 12px; border-radius: 5px;
  background: var(--bf-yellow-pale); color: var(--bf-black);
}
.bf-empleos-vacio {
  padding: 48px 20px; text-align: center; color: var(--fg-muted);
}