/** ==========================================================================
 * Bloque «Empleo y salidas profesionales» — inc/cei-bloques.php, cei_bloque_empleo()
 *
 * Una hoja por bloque (Eduardo, 07/09/2026). La pide functions.php en la
 * cabecera de las plantillas que lo pintan (cei_enqueue_template_styles),
 * antes de la hoja de la plantilla, y el propio bloque al pintarse
 * (cei_bloque_css), por si aparece donde no se esperaba. Antes vivia en css/cei-componentes.css.
 * ========================================================================== */
/* --------------------------------------------------------------------------
 * BLOQUE «EMPLEO Y SALIDAS PROFESIONALES» (Figma 837-447)
 *
 *   <section class="Empleo">
 *     <div class="Empleo-texto">        titulo, parrafo, tarjeta de convenios, boton y salidas
 *     <figure class="Empleo-figura">    foto del antiguo alumno con nombre y puesto
 *     <div class="Empleo-empresas">     marquesina de circulos con los logos
 *
 * Lamina del color de empleo del sistema (--Global-Background-Empleo) con las
 * esquinas de panel. Dos columnas en escritorio, texto y foto; la fila de
 * logos cruza las dos. En movil se apila. El tipo del titulo, como en el bloque
 * de Fundae, solo si el marcado no trae una clase Global-*.
 * -------------------------------------------------------------------------- */
.Empleo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36%;
  gap: var(--Global-Espacio-Grupo);
  padding: var(--Global-Espacio-TituloContenido);
  background-color: var(--Global-Background-Empleo);
  border-radius: var(--Global-Radio-Panel);
  color: var(--Global-Color-Black);
}

.Empleo-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Global-Espacio-TituloContenido);
}

.Empleo-titulo {
  margin: 0;
}

.Empleo-titulo:not([class*="Global-"]) {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-32);
  font-weight: var(--Font-Weight-400);
  line-height: var(--Font-Line-height-110);
  letter-spacing: var(--Font-Letter-spacing-2);
}

.Empleo-parrafo {
  margin: 0;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  letter-spacing: var(--Font-Letter-spacing-0);
}

/* El boton, el compartido, ajustado a su texto. */
.Empleo-boton {
  display: inline-flex;
}

/* La tarjeta blanca de los convenios de practicas. */
.Empleo-tarjeta {
  display: flex;
  flex-direction: column;
  gap: calc(var(--Global-Espacio-TituloContenido) / 2);
  padding: var(--Global-Espacio-TituloContenido);
  border: 1px solid var(--Global-Color-Black);
  border-radius: var(--Global-Radio-Tarjeta);
  background-color: var(--Global-Color-White);
}

.Empleo-tarjetaTitulo {
  margin: 0;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  letter-spacing: var(--Font-Letter-spacing-0);
  text-transform: uppercase;
}

.Empleo-cifra {
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-0);
  display: flex;
  align-items: center;
  gap: var(--Global-Espacio-TituloContenido);
  margin: 0;
}

/* La cifra grande: Global-h2. Figma la dibuja algo mayor, pero no hay token entre Size-45 y Size-95. */
.Empleo-numero {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-45);
  font-weight: var(--Font-Weight-400);
  line-height: var(--Font-Line-height-100);
  letter-spacing: var(--Font-Letter-spacing-2);
}

/*
 * La pastilla de la variación va en verde (Eduardo, 15/09/2026): es un dato que
 * sube —«+18% vs. 2025»— y en rojo se leía como una alerta. Si algún día el
 * dato baja, el bloque le pone la clase --baja y vuelve al rojo, que entonces
 * sí es lo que toca.
 */
.Empleo-variacion {
  padding: 4px 12px;
  border-radius: var(--Global-Radio-Pastilla);
  /* Verde propio de la pastilla, aqui y en la ficha (Eduardo, 16/09/2026:
     excepcion pedida a proposito). Contraste medido en el token. */
  background-color: var(--Global-Positivo-Fondo);
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-14);
  font-weight: var(--Font-Weight-400);
  letter-spacing: var(--Font-Letter-spacing-2);
  white-space: nowrap;
}

/*
 * La tinta blanca, con un selector mas fuerte: la home nueva pone
 * `.HomeV2 :where(..., span, ...) { color: inherit }` —misma especificidad que
 * una clase suelta, pero su hoja se carga despues— y la pastilla salia con el
 * texto en negro sobre el verde. Con el padre delante sube a (0,2,0) y gana sin
 * necesidad de !important (Eduardo, 16/09/2026).
 */
.Empleo .Empleo-variacion {
  color: var(--Global-Color-White);
}

.Empleo-variacion--baja {
  background-color: var(--Global-Destacado);
}

/* El dato en italica: la cifra en Global-p--italic y el texto en la letra pequeña. */
.Empleo-dato {
  margin: 0;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-14);
  font-weight: var(--Font-Weight-400);
  font-style: italic;
  letter-spacing: var(--Font-Letter-spacing-2);
}

.Empleo-datoCifra {
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-500);
  letter-spacing: var(--Font-Letter-spacing-2);
}

.Empleo-subtitulo {
  margin: 0;
  font-family: var(--Font-Family-Primary);
}

.Empleo-salidas {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  letter-spacing: var(--Font-Letter-spacing-0);
}

/* La foto, con las esquinas de imagen del sistema, y el pie a dos lados. */
.Empleo-figura {
  margin: 0;
}

.Empleo-foto {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--Global-Radio-Imagen);
}

.Empleo-pie {
  display: flex;
  justify-content: space-between;
  gap: var(--Global-Espacio-TituloContenido);
  margin-top: calc(var(--Global-Espacio-TituloContenido) / 2);
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-14);
  font-weight: var(--Font-Weight-400);
  letter-spacing: var(--Font-Letter-spacing-2);
}

.Empleo-puesto {
  text-align: right;
}

/*
 * La marquesina: dos copias de la lista, una detras de otra, y la pista se
 * desplaza la mitad de su ancho en bucle, con lo que la segunda copia entra
 * justo donde acaba la primera. Se para al pasar el raton y no se mueve si el
 * usuario ha pedido menos movimiento (entonces la fila se puede desplazar a
 * mano). El ancho de cada circulo, medido en el diseño.
 */
.Empleo-empresas {
  grid-column: 1 / -1;
  overflow: hidden;
  margin-inline: calc(var(--Global-Espacio-TituloContenido) * -1);
  padding-inline: var(--Global-Espacio-TituloContenido);
  overflow-x: auto;
  scrollbar-width: none;
}

.Empleo-empresas::-webkit-scrollbar {
  display: none;
}

.Empleo-pista {
  display: flex;
  width: max-content;
}

/*
 * El hueco entre círculos, en una variable propia (Eduardo, 16/09/2026).
 *
 * Eran los 24px del espacio de título y con círculos de 136 se leían pegados:
 * la separación tiene que poder crecer sin arrastrar a todo lo demás que use
 * ese token. Aquí son 32.
 *
 * El relleno de la derecha es SIEMPRE la mitad del hueco, y por eso sale de la
 * misma variable: la marquesina son dos copias de la lista, una detrás de otra,
 * y si ese relleno no casa con el hueco, al empalmar la segunda copia se ve el
 * salto. Con los dos atados no se pueden desincronizar.
 */
.Empleo-empresas {
  --Empleo-huecoCirculos: 32px;
}

/*
 * Con el padre delante, y no `.Empleo-empresasLista` a secas: la home nueva
 * declara `.HomeV2 :where(ul, ol) { padding: 0 }`, misma especificidad y hoja
 * mas tardia, y le comia el relleno de la derecha —medido: 0 en vez de 16—.
 * Sin ese relleno, al empalmar la segunda copia de la lista la marquesina da un
 * salto de medio hueco cada vuelta (Eduardo, 16/09/2026).
 */
.Empleo .Empleo-empresasLista {
  display: flex;
  gap: var(--Empleo-huecoCirculos);
  margin: 0;
  padding: 0 calc(var(--Empleo-huecoCirculos) / 2) 0 0;
  list-style: none;
}

.Empleo-empresa {
  --Empleo-circulo: 136px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--Empleo-circulo);
  height: var(--Empleo-circulo);
  margin: 0;
  padding: 0;
  border: 1px solid var(--Global-Color-Black);
  border-radius: 50%;
  list-style: none;
}

.Empleo-logo {
  display: block;
  width: 60%;
  height: auto;
  max-height: 40%;
  object-fit: contain;
  filter: brightness(0);
}

.Empleo-empresaNombre {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-500);
  letter-spacing: var(--Font-Letter-spacing-2);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ceiMarquesina {
    to {
      transform: translateX(-50%);
    }
  }

  .Empleo-empresas {
    overflow-x: hidden;
  }

  .Empleo-pista {
    animation: ceiMarquesina 40s linear infinite;
  }

  .Empleo-empresas:hover .Empleo-pista {
    animation-play-state: paused;
  }
}

@media (max-width: 767.98px) {
  .Empleo {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--Global-Espacio-Superior);
  }

  .Empleo-tarjeta {
    align-self: stretch;
  }

  .Empleo-cifra {
    flex-wrap: wrap;
    gap: calc(var(--Global-Espacio-TituloContenido) / 2);
  }

  .Empleo-empresa {
    --Empleo-circulo: 104px;
  }
}

/* ==========================================================================
 * LAS SALIDAS PROFESIONALES, DENTRO DEL BLOQUE (Eduardo, 16/09/2026)
 *
 * «¿En qué podrías trabajar con esta formación?» era una seccion aparte justo
 * debajo, con su propio titulo: dos encabezados seguidos para una sola idea.
 * Ahora cuelga del bloque, separada por el espacio de grupo del sistema y un
 * filete, que es lo que dice que sigue siendo la misma seccion pero otra cosa.
 * ========================================================================== */

/*
 * Aqui vivieron .Empleo-pie2 y .Empleo-salidasTitulo, de cuando «¿En qué
 * podrías trabajar con esta formación?» iba al final del bloque y a todo el
 * ancho (Eduardo, 16/09/2026). Ahora va en la columna de texto, con el
 * subtitulo del propio bloque (.Empleo-subtitulo), que ya tiene sus reglas.
 */

/* --------------------------------------------------------------------------
 * LA FOTO SE QUEDA PEGADA AL DESPLAZAR (Eduardo, 16/09/2026)
 *
 * La columna de texto pasó a llevar dentro las salidas profesionales, así que
 * ahora es bastante más alta que la foto: sin esto, la foto se iba por arriba
 * y el lector recorría media lámina de salmón vacío a su derecha.
 *
 * `align-self: start` no es opcional: por defecto un hijo de rejilla se estira
 * a todo el alto de su fila, con lo que la figura ya mediría lo mismo que el
 * texto y no le quedaría recorrido por el que pegarse. No cambia nada a la
 * vista, porque la foto lleva `aspect-ratio` y manda ella.
 *
 * El `top` es el mismo cálculo que el `scroll-padding-top` de las anclas: el
 * alto de la barra fija más el aire del sistema. Medido en la ficha, 88px.
 *
 * Solo de tableta para arriba: por debajo de 768 el bloque se apila y la foto
 * va encima del texto, donde pegarla no significa nada.
 * -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .Empleo-figura {
    position: sticky;
    align-self: start;
    top: calc(var(--Global-Alto-Cabecera) + var(--Global-Espacio-TituloContenido));
  }

  /*
   * MENOS EN LA VARIANTE ANCHA (Eduardo, 16/09/2026). En la home la lámina
   * cruza la pantalla de lado a lado y una foto que se queda quieta mientras el
   * resto de la banda pasa de largo se lee como un fallo, no como un efecto.
   * En la ficha, donde el bloque es una lámina dentro del carril y la columna
   * de texto es mucho más alta, el sticky se queda.
   */
  .Empleo--ancho .Empleo-figura {
    position: static;
    align-self: stretch;
  }
}

/* ==========================================================================
 * VARIANTE «A TODO EL ANCHO» — .Empleo--ancho (Eduardo, 16/09/2026)
 *
 * HOY SOLO LA USA LA HOME NUEVA. En la ficha de curso el bloque sigue siendo
 * una lámina redondeada dentro del carril, así que todo esto va en un
 * modificador y no en la regla base. El día que valga para las dos, se funde
 * con la base y se borra este apartado.
 *
 * Es una banda que cruza la página de lado a lado: sin esquinas, sin foto
 * redondeada, con 60px de aire arriba y abajo y la escala tipográfica del
 * sistema en las tres piezas de texto. Quien la saca del carril es
 * `.HomeSeccion--ancho`, en css/templates/home-v2.css; aquí solo se peina.
 * ========================================================================== */

.Empleo--ancho {
  border-radius: 0;
  /*
   * 60px arriba y abajo. Va por el token del sistema y no por el número, así
   * que en móvil baja a 48 con el resto de la escala.
   *
   * A los lados, el margen de página: la banda llega al borde, pero su título
   * tiene que arrancar en la misma vertical que los de las secciones de al
   * lado, o se lee como si estuviera descolocado.
   */
  padding: var(--Global-Espacio-Grupo) var(--Global-Margen-Pagina);
}

.Empleo--ancho .Empleo-foto {
  border-radius: 0;
}

/* Las dos entradillas, al cuerpo grande (lo que hace .Global-h3). No se les
   pone la clase porque el marcado es del componente y lo comparten las fichas. */
.Empleo--ancho .Empleo-parrafo,
.Empleo--ancho .Empleo-parrafo2,
.Empleo--ancho .Empleo-salidas,
.Empleo--ancho .Empleo-salidas p,
.Empleo--ancho .Empleo-tarjetaTitulo {
  font-size: var(--Font-Size-29);
  font-weight: var(--Font-Weight-400);
  line-height: var(--Font-Line-height-110);
  letter-spacing: var(--Font-Letter-spacing-2);
}

/*
 * El «95%» del dato: al cuerpo grande y DE PIE. La linea entera va en italica
 * —es la regla de .Empleo-dato— y la cifra la heredaba; aqui se endereza solo
 * ella, que es el dato, no el comentario (Eduardo, 16/09/2026).
 */
.Empleo--ancho .Empleo-datoCifra {
  font-size: var(--Font-Size-29);
  font-weight: var(--Font-Weight-400);
  font-style: normal;
  line-height: var(--Font-Line-height-110);
  letter-spacing: var(--Font-Letter-spacing-2);
}

/*
 * La pastilla, apoyada en la línea del número y no centrada a media altura
 * (Eduardo, 16/09/2026). Con un número de 95px y una pastilla de 14 el centrado
 * la dejaba flotando en mitad de la cifra; con `baseline` las dos se apoyan en
 * el mismo renglón, que es como se lee un dato y su variación.
 */
.Empleo--ancho .Empleo-cifra {
  align-items: baseline;
}

/*
 * Y la cifra grande, al titular: lo que hace .Global-h1, que desde el
 * 16/09/2026 son 95px y no los 45 de antes. Así que «2.000» crece de verdad,
 * que era lo que se pedía al pasarlo a ese estilo.
 */
.Empleo--ancho .Empleo-numero {
  font-size: var(--Font-Size-95);
  font-weight: var(--Font-Weight-400);
  line-height: var(--Font-Line-height-100);
  letter-spacing: var(--Font-Letter-spacing-h1);
}

/*
 * EL ORDEN DE LA COLUMNA DE TEXTO EN LA VARIANTE ANCHA (Eduardo, 16/09/2026).
 *
 * «Saber más» pasa por ENCIMA de la tarjeta de convenios: el botón cierra lo
 * que cuenta el párrafo —el servicio de empleo— y la tarjeta es el dato que
 * viene después, no algo que el botón remate.
 *
 * Se hace con `order` y no moviendo el marcado porque el bloque es compartido:
 * en la ficha de curso el botón sigue debajo. Van los seis explícitos aunque
 * cuatro no cambien, que un `order` suelto en una lista de seis hermanos no se
 * entiende al leerlo.
 */
.Empleo--ancho .Empleo-titulo { order: 1; }
.Empleo--ancho .Empleo-parrafo { order: 2; }
.Empleo--ancho .Empleo-boton { order: 3; }
.Empleo--ancho .Empleo-parrafo2 { order: 4; }
.Empleo--ancho .Empleo-tarjeta { order: 5; }
.Empleo--ancho .Empleo-subtitulo { order: 6; }
.Empleo--ancho .Empleo-salidas { order: 7; }

/*
 * «¿Dónde podrías trabajar?» abre un grupo nuevo (Eduardo, 28/09/2026). Con el
 * hueco de 24px de la columna se pegaba a la tarjeta de convenios, la blanca,
 * y se leía como su pie: sube al espacio entre grupos del sistema.
 */
.Empleo--ancho .Empleo-subtitulo {
  margin-top: calc(var(--Global-Espacio-Grupo) - var(--Global-Espacio-TituloContenido));
}

/* Y sus dos párrafos, separados: la base de la home deja los <p> sin margen. */
.Empleo--ancho .Empleo-salidas > p + p {
  margin-top: calc(var(--Global-Espacio-TituloContenido) / 2);
}

/*
 * La línea del dato, al tamaño de párrafo del sistema y de pie: iba a 14px y en
 * itálica entera. La cifra que la abre («95%») la endereza y la agranda su
 * propia regla, más arriba (Eduardo, 16/09/2026).
 */
.Empleo--ancho .Empleo-dato {
  font-size: var(--Font-Size-19);
  font-style: normal;
  letter-spacing: var(--Font-Letter-spacing-0);
}