/*
 * Banner con foto de fondo de "Trabaja con nosotros".
 *
 *   Contenedor sección      → jobs-hero
 *     Imagen (fondo)        → jobs-hero__photo
 *     Contenedor texto      → jobs-hero__copy
 *       Título (H1)         → jobs-hero__title   (el <span> del título es el subtítulo)
 *       Botón               → btn btn--red jobs-hero__cta
 *
 * La foto se cambia desde el widget Imagen; el degradado oscuro es solo CSS.
 */

.jobs-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 560px;
	padding: 48px var(--wrap-gutter) 96px;
	overflow: hidden;
	background: #1D1513;
	color: #fff;
}

/* Degradado sobre la foto para que el texto se lea */
.jobs-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(14, 24, 34, .78) 0%, rgba(14, 24, 34, .6) 38%, rgba(14, 24, 34, .28) 70%, rgba(14, 24, 34, .18) 100%);
	pointer-events: none;
}

.jobs-hero__photo {
	position: absolute !important; /* Elementor da position: relative a todos los widgets */
	inset: 0;
	z-index: 0;
	width: 100% !important;
	height: 100%;
}

/* Excepción: la clase queda en el wrapper del widget; se estiliza el <img> interno */
.jobs-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 68% center;
}

.jobs-hero__copy {
	position: relative;
	z-index: 2;
	width: 100%;
}

.jobs-hero__title .elementor-heading-title {
	font-family: var(--font-display);
	font-size: clamp(34px, 4.4vw, 64px);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1.02;
	color: #fff;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}

/* Subtítulo dentro del título */
.jobs-hero__title span {
	display: block;
	margin-top: 16px;
	font-size: .5em;
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.25;
}

.jobs-hero__cta {
	max-width: 320px;
	margin-top: 28px;
}
.jobs-hero__cta .elementor-button { width: 100%; }

@media (min-width: 768px) {
	.jobs-hero { padding-top: 56px; padding-bottom: 120px; }
	.jobs-hero__cta { max-width: none; }
	.jobs-hero__cta .elementor-button { width: auto; }
}

@media (min-width: 1025px) {
	.jobs-hero { min-height: clamp(520px, 40vw, 600px); }
	.jobs-hero__photo img { object-position: 60% center; }
}