/* =====================================================================
   EL ROSAL BEAUTY · BOLSA DE TRABAJO
   Requiere rosal-base.css (cabecera interior, .r-form, botones).
   ===================================================================== */

.r-jobs { background: var(--r-ivory); }
.r-jobs__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 4vw, 68px); align-items: start; }

/* Invitación */
.r-jobs__pitch { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--r-ink-soft); max-width: 50ch; margin: 0 0 26px; }
.r-jobs__reasons { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.r-jobs__reason { display: flex; gap: 12px; align-items: flex-start; }
.r-jobs__reason-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--r-line-gold); background: var(--r-blush-soft); color: var(--r-wine); }
.r-jobs__reason-icon svg { width: 24px; height: 24px; }
.r-jobs__reason-body { display: flex; flex-direction: column; gap: 2px; }
.r-jobs__reason-title { font-family: var(--r-serif); font-weight: 600; font-size: 1.1rem; color: var(--r-ink); line-height: 1.2; }
.r-jobs__reason-desc { font-size: .86rem; color: var(--r-ink-soft); line-height: 1.45; }

.r-jobs__media .r-img-ph { aspect-ratio: 16 / 9; border-radius: var(--r-radius-lg); box-shadow: var(--r-shadow-md); }

/* Tarjeta del formulario */
.r-jobs__card {
	background: linear-gradient(165deg, var(--r-blush-soft), #fff);
	border: 1px solid var(--r-line-gold); border-radius: var(--r-radius-lg);
	padding: clamp(24px, 3vw, 40px);
	box-shadow: var(--r-shadow-sm);
}
.r-jobs__card-title { font-family: var(--r-serif); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 1.9rem); color: var(--r-ink); margin: 0 0 8px; }
.r-jobs__card-intro { font-size: .92rem; color: var(--r-ink-soft); margin: 0 0 22px; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 900px) {
	.r-jobs__grid { grid-template-columns: 1fr; }
	.r-jobs__media { max-width: 560px; }
}
@media (max-width: 520px) {
	.r-jobs__reasons { grid-template-columns: 1fr; }
}