/*
 * "Hacemos carrera": foto con esquinas redondeadas y texto de reclutamiento.
 *
 *   Contenedor sección        → careers
 *     Imagen                  → careers__photo
 *     Contenedor texto        → careers__copy
 *       Título                → careers__title   (la palabra de color va en <span>)
 *       Texto                 → careers__lead
 *       Texto con lista       → careers__areas
 *       Botón                 → btn btn--ink
 */

.careers {
	--row-gap: 30px;
	--column-gap: clamp(32px, 5vw, 72px);

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	width: 100%;
	padding: var(--space-section) var(--wrap-gutter);
}

.careers__photo img {
	width: 100%;
	aspect-ratio: 5 / 4;
	max-height: 420px;
	object-fit: cover;
	object-position: 40% center;
	border-radius: 32px;
}

.careers__copy { display: block; }

.careers__title .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(50px, 7vw, 120px);
	letter-spacing: -.05em;
	line-height: .95;
	color: var(--color-ink);
}
.careers__title span { display: block; color: var(--color-brand-red); }

.careers__lead { max-width: 27em; margin-top: 28px; padding-bottom: 34px; font-size: 16px; line-height: 1.6; color: var(--color-muted); }
.careers__lead p { margin: 0; }

.careers__areas { padding-bottom: 34px; }
.careers__areas ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line); }
.careers__areas li {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	padding: 16px 0;
	border-bottom: 1px solid var(--color-line);
	font-weight: 600;
	color: var(--color-ink);
}
.careers__areas li span { font-weight: 400; color: var(--color-muted); text-align: right; }

@media (min-width: 768px) {
	.careers { grid-template-columns: 1fr 1fr; }
	.careers__photo img { aspect-ratio: 4 / 5; max-height: none; }
}

@media (min-width: 1025px) {
	.careers__lead { font-size: 19px; }
}