/* ==========================================================================
   Trabaja con nosotros
   Listado de vacantes traídas de Funditec y candidatura espontánea.
   ========================================================================== */

.empleo {
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5.5rem);
	background: var(--c-tinta);
}

.empleo__intro {
	max-width: 820px;
	margin-top: 1.4em;
	font-family: var(--f-alt);
	font-size: var(--fs-lead);
	font-weight: 300;
	line-height: 1.44;
	color: var(--c-topo);
}

.ofertas {
	margin-top: clamp(2rem, 4vw, 3.2rem);
	border-top: 1.5px solid rgb(255 255 255 / 0.16);
}

.oferta {
	border-bottom: 1.5px solid rgb(255 255 255 / 0.16);
}

.oferta__enlace {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2.4rem);
	padding: clamp(1.5rem, 2.8vw, 2.4rem) 0;
	text-decoration: none;
	transition: padding-inline 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* El puesto entero es el enlace: al pasar por encima se desplaza un poco y se
   enciende el titular, para que se lea como una fila pulsable. */
.oferta__enlace:hover,
.oferta__enlace:focus-visible {
	padding-inline: clamp(0.5rem, 1.2vw, 1.1rem);
}

.oferta__titulo {
	font-family: var(--f-titulo);
	font-size: var(--fs-pregunta);
	font-weight: 400;
	line-height: 1.2;
	transition: color 0.2s ease;
}
.oferta__enlace:hover .oferta__titulo,
.oferta__enlace:focus-visible .oferta__titulo { color: var(--c-naranja); }

.oferta__texto {
	max-width: 760px;
	margin-top: 0.6em;
	font-family: var(--f-alt);
	font-size: var(--fs-lead);
	font-weight: 300;
	line-height: 1.5;
	color: var(--c-topo);
}

.oferta__area {
	padding: 0.42em 1.05em;
	border: 1.5px solid var(--c-naranja);
	border-radius: 999px;
	color: var(--c-naranja);
	font-family: var(--f-titulo);
	font-size: var(--fs-nav);
	line-height: 1.2;
	white-space: nowrap;
	text-transform: uppercase;
}

.oferta__flecha {
	display: block;
	color: var(--c-naranja);
	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.oferta__enlace:hover .oferta__flecha,
.oferta__enlace:focus-visible .oferta__flecha { transform: translate(4px, -4px); }

.candidatura {
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5.5rem);
	background: var(--c-marron);
}

.candidatura__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: end;
	gap: clamp(1.5rem, 3vw, 3rem);
}

.candidatura__texto p {
	max-width: 720px;
	margin-top: 1.2em;
	font-family: var(--f-alt);
	font-size: var(--fs-lead);
	font-weight: 300;
	line-height: 1.44;
}

@media (max-width: 900px) {
	.oferta__enlace {
		grid-template-columns: 1fr auto;
		row-gap: 1rem;
	}
	.oferta__cuerpo { grid-column: 1 / -1; }
	.candidatura__inner { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 560px) {
	.oferta__flecha { display: none; }
	.oferta__enlace { grid-template-columns: 1fr; }
}

/* --- Ficha de una oferta --------------------------------------------------
   El texto llega del portal de Funditec, asi que aqui no se puede contar con
   clases propias: se da estilo a las etiquetas que trae —parrafos, listas y
   encabezados— dentro del contenedor.
   -------------------------------------------------------------------------- */

.oferta-ficha {
	padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
}

.oferta-ficha__volver { margin-bottom: 1.4em; }
.oferta-ficha__volver .link-arrow { margin-top: 0; font-size: 1rem; }

/* Una columna estrecha: una oferta se lee de arriba abajo y a todo el ancho
   de la pantalla se pierde el hilo entre linea y linea. */
.oferta-ficha__texto {
	max-width: 60ch;
	font-family: var(--f-texto);
	font-size: clamp(0.95rem, 1.06vw, 1rem);
	line-height: 1.62;
}

.oferta-ficha__texto > * + * { margin-top: 1em; }

.oferta-ficha__texto h2,
.oferta-ficha__texto h3,
.oferta-ficha__texto h4 {
	margin-top: 1.8em;
	font-family: var(--f-titulo);
	font-size: clamp(1.05rem, 1.45vw, 1.375rem);
	font-weight: 700;
	line-height: 1.25;
}

.oferta-ficha__texto ul,
.oferta-ficha__texto ol {
	padding-left: 1.2em;
	list-style: disc;
}
.oferta-ficha__texto ol { list-style: decimal; }
.oferta-ficha__texto li + li { margin-top: 0.45em; }

.oferta-ficha__texto strong { font-weight: 700; }

.oferta-ficha__texto a {
	color: var(--c-naranja);
	text-underline-offset: 3px;
}

.oferta-ficha__cta {
	max-width: 60ch;
	margin-top: clamp(2rem, 3.5vw, 3rem);
	padding: clamp(1.2rem, 2vw, 1.8rem);
	border-radius: var(--radio);
	background: var(--c-marron);
}

.oferta-ficha__cta-titulo {
	font-family: var(--f-titulo);
	font-size: clamp(1.05rem, 1.45vw, 1.375rem);
	font-weight: 700;
	line-height: 1.25;
}

.oferta-ficha__cta p { margin-top: 0.6em; }