/** ==========================================================================
 * Bloque «Formación bonificable» — inc/cei-bloques.php, cei_bloque_fundae()
 *
 * 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 «FORMACIÓN BONIFICABLE» (Figma 867-3685) — inc/cei-bloques.php
 *
 * Dos mitades con las esquinas del sistema: a la izquierda, sobre el amarillo
 * de Fundae, titulo, parrafo, insignia y al pie la frase en italica con el
 * boton; a la derecha, la foto a sangre. Lo usan la home y la ficha de curso,
 * donde sustituye a la seccion de texto «Bonificable por FUNDAE».
 * -------------------------------------------------------------------------- */
.Fundae {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--Global-Radio-Panel);
  background-color: var(--Global-Background-Fundae);
  color: var(--Global-Color-Black);
}

.Fundae-texto {
  display: flex;
  flex-direction: column;
  gap: var(--Global-Espacio-TituloContenido);
  box-sizing: border-box;
  padding: var(--Global-Espacio-TituloContenido);
}

/* Size-32: el tamano de titulo de bloque de la escala, entre el h3 y el h2. */
.Fundae-titulo {
  margin: 0;
}

/*
 * El tipo por defecto del titulo (Size-32, el de la ficha de curso) solo cuando
 * el marcado no trae una clase Global-*: la home lo pone en Global-h2 y esa
 * clase manda. Con :where() (especificidad cero) la regla perdia contra el
 * `h3 { font-size: 25px }` del tema padre y el titulo salia a 25px.
 */
.Fundae-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);
}

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

/*
 * La insignia: un circulo con el logotipo de Fundae. Si en images/ hay una
 * fundae-insignia.svg exportada de Figma se usa tal cual (.Fundae-insignia--imagen);
 * si no, el circulo lo dibuja esta regla y dentro va el logotipo oficial, que
 * toma el color del texto (negro, como en el diseño). De 180 y el logotipo de
 * 136 (Eduardo, 07/09/2026: a 120 con el logotipo de 88 se leia pequeño).
 */
.Fundae-insignia {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 180px;
  height: 180px;
  border: 1px solid var(--Global-Color-Black);
  border-radius: 50%;
  margin-top: auto;
}

.Fundae-insignia--imagen {
  border: 0;
  object-fit: contain;
}

.Fundae-logo {
  display: block;
  width: 136px;
  height: auto;
}

/* Global-p--italic: el unico estilo del sistema con peso 500. */
.Fundae-claim {
  margin: 0;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-500);
  font-style: italic;
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-2);
}

/*
 * El boton compartido, justo debajo del parrafo (Eduardo, 07/09/2026: antes iba
 * al pie, junto a la frase) y ajustado a su texto: en la columna flex el
 * generico se estiraria a toda la fila.
 */
/*
 * Los botones, en fila y con el hueco de siempre; cuando no caben, uno debajo
 * del otro. En la home solo hay uno y se ve igual que antes (Eduardo,
 * 14/09/2026).
 */
.Fundae-botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--Global-Espacio-TituloContenido);
}

.Fundae-boton {
  display: inline-flex;
  align-self: flex-start;
}

/* El CTA es largo a proposito —dice a que formacion se refiere—, asi que se le
   deja partir en dos lineas sin estirar la pastilla de al lado. */
.Fundae-boton--cta {
  text-align: center;
}

.Fundae-foto {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}

@media (max-width: 767.98px) {
  /* Una sola columna: el texto arriba y la foto debajo, apaisada. */
  .Fundae {
    grid-template-columns: minmax(0, 1fr);
  }

  .Fundae-foto {
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

/* ==========================================================================
 * VARIANTE «A TODO EL ANCHO» — .Fundae--ancho (Eduardo, 16/09/2026)
 *
 * HOY SOLO LA USA LA HOME NUEVA, igual que .Empleo--ancho: en la ficha de
 * curso la lámina sigue redondeada y dentro del carril. Cuando valga para las
 * dos, se funde con la base y se borra este apartado.
 *
 * Banda de lado a lado: sin esquinas, la foto llegando al borde derecho —ya lo
 * hace sola, con su `object-fit: cover` y el `overflow: hidden` del bloque— y
 * 60px de aire arriba y abajo en la mitad amarilla.
 * ========================================================================== */

.Fundae--ancho {
  border-radius: 0;
}

.Fundae--ancho .Fundae-texto {
  /*
   * 60 arriba y abajo, por el token del sistema (en móvil baja a 48 con el
   * resto de la escala).
   *
   * A la izquierda, el margen de página: el título tiene que arrancar en la
   * misma vertical que los de las secciones de arriba y abajo. A la derecha se
   * queda el espacio de siempre, que ahí lo que hay al lado es la foto y no el
   * borde de la pantalla.
   */
  padding: var(--Global-Espacio-Grupo) var(--Global-Espacio-TituloContenido)
    var(--Global-Espacio-Grupo) var(--Global-Margen-Pagina);
}

/*
 * TOPE DE ALTO A LA FOTO (Eduardo, 16/09/2026). La columna amarilla creció al
 * pasar sus textos al cuerpo grande y a 60px de aire arriba y abajo, y la foto
 * —que se estira a lo que mida la fila— se iba a 681px: más alta que la
 * pantalla de un portátil, se leía como un muro.
 */
.Fundae--ancho .Fundae-foto {
  max-height: 680px;
  align-self: start;
}

/*
 * COMO EN EL DISEÑO (Eduardo, 29/09/2026, con la captura del bloque).
 *
 * Arriba el título y el párrafo; el sello de FUNDAE a la izquierda, mas abajo,
 * con el aire sobrante de la lámina encima de él; y al pie una sola fila: el
 * reclamo «Estudia gratis si trabajas» a la izquierda y «Saber más» pegado al
 * borde derecho, los dos alineados por abajo. Los textos van al cuerpo normal
 * del bloque (19px, el de la ficha de curso): del 16/09 al 29/09 iban a 29px y
 * el botón cerraba el párrafo, y la lámina medía 590px de alto.
 *
 * Se hace con una rejilla y filas explícitas, y no moviendo el marcado, porque
 * el bloque es compartido: en la ficha de curso sigue siendo una pila.
 */
.Fundae--ancho .Fundae-texto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.Fundae--ancho .Fundae-titulo {
  grid-row: 1;
  grid-column: 1 / -1;
}

/* El párrafo, al cuerpo del de Empleo (.Empleo--ancho .Empleo-parrafo, 29px):
   los dos bloques van seguidos en la home y tienen que leerse igual (Eduardo,
   29/09/2026). */
.Fundae--ancho .Fundae-parrafo {
  grid-row: 2;
  grid-column: 1 / -1;
  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 sello, de 130 como en la captura (el de la ficha sigue a 180), y el
   logotipo dentro a escala. */
.Fundae--ancho .Fundae-insignia {
  grid-row: 3;
  grid-column: 1 / -1;
  align-self: end;
  width: 130px;
  height: 130px;
  margin-top: var(--Global-Espacio-Grupo); /* el `auto` era para la pila */
}

.Fundae--ancho .Fundae-logo {
  width: 96px;
}

.Fundae--ancho .Fundae-claim {
  grid-row: 4;
  grid-column: 1;
  align-self: end;
}

.Fundae--ancho .Fundae-botones {
  grid-row: 4;
  grid-column: 2;
  align-self: end;
  justify-self: end;
}

/*
 * La marca «∞ fundae.es» dentro del círculo (Eduardo, 29/09/2026), en vez del
 * logotipo largo: al 64 % del círculo, que es lo que ocupa en el diseño. El
 * <picture> que la envuelve no puede meter su línea base debajo.
 */
.Fundae-insignia picture {
  display: contents;
}

.Fundae-logo--marca,
.Fundae--ancho .Fundae-logo--marca {
  width: 64%;
  height: auto;
}