/* ARRA — La página «Trabaja con nosotros» (inc/trabaja.php).
 * ==========================================================================
 * El héroe es el institucional de siempre. Debajo, las vacantes en tarjetas
 * -o el aviso de que no hay- y el formulario del CV. Mismos filetes dorados,
 * mismos radios (16 px en caja, 14 en botón) y mismo ritmo que el resto.
 * ========================================================================== */

.arra-trabaja-seccion { box-sizing: border-box; max-inline-size: 1200px; margin-inline: auto;
	padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 64px) 0; }
.arra-trabaja-seccion--cv, .arra-trabaja-seccion--oferta { padding-block-end: clamp(56px, 8vw, 104px); }
.arra-trabaja-cabeza { margin-block-end: 32px; }
.arra-trabaja-h2 { margin: 10px 0 0; font-family: var(--font-display); font-weight: 500;
	font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -0.02em; color: var(--fg); }
.arra-trabaja-texto { margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: var(--fg-soft); }

/* ------------------------------------------------------------ vacantes */
.arra-trabaja-vacantes { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.arra-trabaja-vacante { display: flex; flex-direction: column; gap: 14px; box-sizing: border-box;
	padding: 26px 24px 24px; border-radius: var(--r-lg, 16px);
	border: 1px solid var(--wp--preset--color--neutro-300); background: var(--wp--preset--color--blanco);
	border-block-start: 3px solid var(--wp--preset--color--dorado-700);
	transition: transform 240ms var(--wp--custom--movimiento--salida), box-shadow 280ms var(--wp--custom--movimiento--salida); }
.arra-trabaja-puesto { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 22px;
	line-height: 1.2; letter-spacing: -0.01em; color: var(--fg); }
.arra-trabaja-etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.arra-trabaja-etiqueta { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 500;
	letter-spacing: 0.02em; color: var(--fg-soft); background: var(--wp--preset--color--neutro-200); }
.arra-trabaja-resumen { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg-soft); }
.arra-trabaja-oferta { margin-block-start: auto; display: inline-flex; align-items: center; gap: 8px;
	min-block-size: 44px; align-self: flex-start; font-weight: 600; font-size: 14px; letter-spacing: 0.02em;
	color: var(--wp--preset--color--dorado-700); text-decoration: none;
	border-block-end: 1px solid transparent; }
/* Toda la tarjeta abre la oferta: el enlace del título se estira a la caja. */
.arra-trabaja-vacante { position: relative; }
.arra-trabaja-vacante__enlace { color: inherit; text-decoration: none; }
.arra-trabaja-vacante__enlace::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.arra-trabaja-vacante:has(.arra-trabaja-vacante__enlace:focus-visible) {
	outline: 2px solid var(--wp--preset--color--dorado-700); outline-offset: 3px; }
.arra-trabaja-vacante__enlace:focus-visible { outline: none; }
@media (hover: hover) {
	.arra-trabaja-vacante:hover { transform: translateY(-4px);
		box-shadow: 0 18px 34px -20px color-mix(in srgb, var(--wp--preset--color--dorado-700) 60%, transparent); }
}

/* La flecha es la de toda la web (.arra-cta-flecha, motion.css): gira 45 grados
   al pasar. En la tarjeta gira al pasar por cualquier parte, como en el mazo. */
.arra-trabaja-vacante:hover .arra-cta-flecha,
.arra-trabaja-vacante:focus-within .arra-cta-flecha { transform: rotate(-45deg); }

/* ------------------------------------------------------- una oferta */
.arra-trabaja-oferta-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
	padding-block-end: 22px; margin-block-end: 28px; border-block-end: 1px solid var(--wp--preset--color--neutro-300); }
.arra-trabaja-texto-oferta { max-inline-size: 72ch; font-size: 17px; line-height: 1.7; color: var(--fg-soft); }
.arra-trabaja-texto-oferta > :first-child { margin-block-start: 0; }
.arra-trabaja-texto-oferta h2, .arra-trabaja-texto-oferta h3 { margin: 1.6em 0 .5em; font-family: var(--font-display);
	font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--fg); }
.arra-trabaja-texto-oferta h2 { font-size: clamp(22px, 2.4vw, 28px); }
.arra-trabaja-texto-oferta h3 { font-size: 20px; }
.arra-trabaja-texto-oferta ul, .arra-trabaja-texto-oferta ol { padding-inline-start: 1.2em; }
.arra-trabaja-texto-oferta li + li { margin-block-start: .35em; }
.arra-trabaja-texto-oferta li::marker { color: var(--wp--preset--color--dorado-700); }
.arra-trabaja-texto-oferta strong { color: var(--fg); }
.arra-trabaja-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-block-start: 40px; }
.arra-trabaja-aplicar { display: inline-flex; align-items: center; gap: 10px; min-block-size: 48px; box-sizing: border-box;
	padding: 12px 22px; border-radius: 14px; background: var(--fg); color: var(--wp--preset--color--blanco);
	font-weight: 600; font-size: 15px; letter-spacing: 0.02em; text-decoration: none;
	transition: background-color 220ms var(--wp--custom--movimiento--salida); }
.arra-trabaja-aplicar:focus-visible, .arra-trabaja-volver:focus-visible {
	outline: 2px solid var(--wp--preset--color--dorado-700); outline-offset: 3px; }
.arra-trabaja-volver { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--fg-soft);
	text-decoration: underline; text-underline-offset: 0.2em; }
@media (hover: hover) {
	.arra-trabaja-aplicar:hover { background: var(--wp--preset--color--carbon-950); }
	.arra-trabaja-volver:hover { color: var(--fg); }
}
@media (prefers-reduced-motion: reduce) {
	.arra-trabaja-aplicar { transition: none; }
}

/* ----------------------------------------------------------- formulario */
.arra-trabaja-form { position: relative; inline-size: 100%; block-size: 640px; scroll-margin-block-start: 96px;
	border-radius: var(--r-lg, 16px); overflow: hidden; }
.arra-trabaja-form > div { block-size: 100% !important; }
.arra-trabaja-form iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }