/** ==========================================================================
 * Componente «CabeceraPagina» — la entrada de una pagina de contenido
 *
 *   <header class="CabeceraPagina">
 *     <div class="CabeceraPagina-texto">
 *       <p  class="CabeceraPagina-antetitulo Global-p--small">
 *       <h1 class="Global-h1">
 *       <p  class="Global-p">
 *       <div class="CabeceraPagina-acciones">   los botones
 *       <ul class="CabeceraPagina-sellos">      los datos con punto
 *     <figure class="CabeceraPagina-foto">      opcional
 *
 * Nacio en /formacion-para-empresas/ y se saca aqui para repetirla: es la
 * entrada que se queria tambien en la pagina de FUNDAE y en las que vengan
 * (Eduardo, 09/09/2026). Junta piezas que ya existian —el antetitulo, los
 * titulares Global-*, el boton y su variante destacada— y añade dos suyas: la
 * fila de sellos y la foto al lado.
 *
 * Sin foto, el texto ocupa el ancho entero y se lee igual. La encola
 * cei_bloque_cabecera() al pintarse, y las paginas cuyo HTML esta en la base de
 * datos la piden por su slug en functions.php.
 * ========================================================================== */

.CabeceraPagina {
  display: grid;
  gap: var(--Global-Espacio-Grupo);
  align-items: center;
  margin: var(--Global-Espacio-TituloContenido) 0 var(--Global-Espacio-Grupo);
}

.CabeceraPagina-texto {
  display: flex;
  flex-direction: column;
  gap: var(--Global-Espacio-TituloContenido);
  min-width: 0;
}

.CabeceraPagina-texto > * {
  margin: 0;
}

.CabeceraPagina-texto .Global-p {
  max-width: 60ch;
}

.CabeceraPagina-antetitulo {
  color: var(--Global-Color-Grey-Secondary);
  text-transform: uppercase;
}

.CabeceraPagina-foto,
.CabeceraPagina-video {
  margin: 0;
  min-width: 0;
}

/*
 * En el sitio de la foto puede ir un video incrustado. Va en 16:9 —lo que
 * sirve YouTube— y con las esquinas de imagen del sistema; sin `height` fija,
 * que la pone la proporcion (Eduardo, 09/09/2026).
 *
 * El borde se quita a mano: el `border: 0` del reinicio del tema no alcanza al
 * marco por defecto del iframe en todos los navegadores.
 */
.CabeceraPagina .CabeceraPagina-video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--Global-Radio-Imagen);
}

.CabeceraPagina .CabeceraPagina-foto img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--Global-Radio-Imagen);
}

.CabeceraPagina-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Global-Espacio-TituloContenido);
}

/* Los sellos no son botones: son datos sueltos con su punto delante. El color
   se fuerza porque el tema pinta de gris azulado todo `ul` de una pagina
   (.column_column ul) y los sellos salian mas claros que la entradilla. */
.CabeceraPagina-sellos,
.CabeceraPagina-sellos li {
  color: var(--Global-Color-Black) !important;
}

.CabeceraPagina-sellos {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--Global-Espacio-TituloContenido) / 2) var(--Global-Espacio-Grupo);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--Font-Size-14);
}

.CabeceraPagina .CabeceraPagina-sellos li {
  position: relative;
  margin: 0;
  padding-left: 18px;
  /* El sello es texto pequeño: se repite aqui porque la regla de cuerpo de
     cei-base.css alcanza a los <li> sin clase y esta hoja va despues. */
  font-size: var(--Font-Size-14);
  letter-spacing: var(--Font-Letter-spacing-2);
}

.CabeceraPagina .CabeceraPagina-sellos li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--Global-Destacado);
}

/* Dos columnas cuando hay foto o video y cabe: el texto manda y la imagen acompaña. */
@media (min-width: 1000px) {
  .CabeceraPagina:has(.CabeceraPagina-foto),
  .CabeceraPagina:has(.CabeceraPagina-video) {
    grid-template-columns: minmax(0, 520fr) minmax(0, 560fr);
  }
}

/*
 * SIN CRECIMIENTO DE LA IMAGEN DE CABECERA (Eduardo, 10/09/2026).
 *
 * Aqui estaba «cpCrece», el efecto de Elisava: la imagen entraba al 88% y
 * crecia hasta el 100% desde su esquina superior derecha en los primeros 70vh.
 * Se quita con el resto de entradas del sitio; el codigo esta en git.
 */