/** ==========================================================================
 * Pagina «Formacion para empresas» (/formacion-para-empresas/)
 *
 * El contenido es HTML guardado en la base de datos, no una plantilla: lo
 * actualiza sql/2026-09-08-formacion-para-empresas.sql. Esta hoja pone lo que
 * es propio de la pagina; las preguntas frecuentes y el bloque de «lo que hay
 * que saber» usan el componente compartido .Rejilla, que encola functions.php
 * junto con esta.
 *
 *   <div id="Content" class="PaginaEmpresas">
 *     .CabeceraPagina              el bloque de cabecera (css/bloques/cabecera-pagina.css)
 *     .PaginaEmpresas-cifras       la banda gris de cinco cifras
 *     .PaginaEmpresas-seccion      cada bloque de contenido, con su antetitulo
 *       .PaginaEmpresas-pasos        como trabajamos, 01 a 04
 *       .PaginaEmpresas-lista        enumeracion con la flecha del sistema
 *       .PaginaEmpresas-tipos        cuatro tipos de organizacion
 *       .PaginaEmpresas-proyectos    cuatro proyectos
 *       .PaginaEmpresas-testimonios  tres citas
 *       .PaginaEmpresas-logos        los clientes
 *     .PaginaEmpresas-inclusion    lamina de color con dos cifras
 *     .PaginaEmpresas-cierre       la ultima llamada, sobre lamina
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * La base: un solo color y una sola escala en toda la pagina
 *
 * El contenido vive en la base de datos, dentro del `.column_column` del tema,
 * y alli hay dos reglas que se cuelan: `ul { color: #737e86 }`, que pinta de
 * un gris azulado todo lo que va en una lista —las cifras, los sellos, los
 * logos—, y ningun color para los enlaces, que salen en el azul por defecto
 * del navegador. En la misma pantalla se veian dos grises casi iguales y algun
 * enlace azul (Eduardo, 09/09/2026).
 *
 * Se normaliza aqui, de una vez: dentro de la pagina el texto es negro, el
 * secundario es --Global-Color-Grey-Secondary y ningun otro, y los enlaces de
 * la prosa van en el color del texto con subrayado.
 * -------------------------------------------------------------------------- */
.PaginaEmpresas ul,
.PaginaEmpresas ol,
.PaginaEmpresas li {
  color: var(--Global-Color-Black) !important;
}

/*
 * Solo los enlaces SIN clase. Con `:not(.Global-boton)` esta regla alcanzaba
 * tambien a las tarjetas de area —que son un <a> dentro de un <li>— y les
 * imponia el color heredado y un subrayado: «Tech» y «Videojuegos» salian en
 * negro sobre su fondo oscuro, ilegibles, y todas con raya debajo del nombre
 * (Eduardo, 09/09/2026). Un enlace con clase se pinta en la hoja de su bloque.
 */
.PaginaEmpresas p a:not([class]),
.PaginaEmpresas li a:not([class]) {
  color: var(--Global-Color-Black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Todo lo secundario de la pagina —antetitulos, pies, metadatos, el numero de
   cada paso— comparte gris y tamaño: son la misma cosa. */
.PaginaEmpresas-antetitulo,
.PaginaEmpresas .PaginaEmpresas-cifra > span,
.PaginaEmpresas-pasoOrden,
.PaginaEmpresas-proyectoMeta,
.PaginaEmpresas-testimonio figcaption {
  color: var(--Global-Color-Grey-Secondary);
}

.PaginaEmpresas-antetitulo {
  margin: 0;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
 * Cifras
 * -------------------------------------------------------------------------- */
/* Sin lamina: las cifras se leen igual sobre el blanco de la pagina y quitan
   una caja gris de en medio (Eduardo, 09/09/2026). */
.PaginaEmpresas-cifras {
  margin: 0 0 var(--Global-Espacio-Grupo);
  padding: 0;
}

.PaginaEmpresas-cifrasLista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--Global-Espacio-TituloContenido);
  margin: 0;
  padding: 0;
  list-style: none;
}

.PaginaEmpresas-cifra {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.PaginaEmpresas-cifraNumero {
  color: var(--Global-Color-Black);
  line-height: var(--Font-Line-height-100);
}

/* --------------------------------------------------------------------------
 * Secciones
 * -------------------------------------------------------------------------- */
/*
 * El hueco entre las piezas de una seccion lo pone la seccion, no cada pieza:
 * antes cada hijo traia su propio margen y el mismo par —antetitulo y titular,
 * titular y entradilla, entradilla y rejilla— se separaba distinto segun donde
 * estuviera. Con una columna flexible y un solo `gap` todas las secciones
 * respiran igual (Eduardo, 09/09/2026).
 */
.PaginaEmpresas-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--Global-Espacio-TituloContenido);
  margin: 0 0 var(--Global-Espacio-Grupo);
}

.PaginaEmpresas-seccion > * {
  margin: 0;
}

.PaginaEmpresas-seccion > h2 {
  max-width: 24ch;
}

.PaginaEmpresas-seccion > .Global-p {
  max-width: 70ch;
}

/* Como trabajamos: cuatro pasos con su numero sobre un filete. Respiran mas
   que el resto de piezas de la seccion —24 arriba y abajo ademas del hueco de
   la seccion, 48 en total— porque son una tabla y no un parrafo mas
   (Eduardo, 09/09/2026). */
.PaginaEmpresas-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--Global-Espacio-Grupo);
  margin: var(--Global-Espacio-TituloContenido) 0;
  padding: 0;
  list-style: none;
}

.PaginaEmpresas-paso {
  display: flex;
  flex-direction: column;
  gap: calc(var(--Global-Espacio-TituloContenido) / 2);
  margin: 0;
  padding-top: calc(var(--Global-Espacio-TituloContenido) / 2);
  border-top: 1px solid var(--Global-Color-Black);
}

.PaginaEmpresas-pasoOrden {
  color: var(--Global-Color-Grey-Secondary);
}

.PaginaEmpresas-paso h3,
.PaginaEmpresas-paso p {
  margin: 0;
}

/*
 * Las enumeraciones de la pagina, con la flecha del sistema. La vineta va en un
 * ::before y no en `list-style` porque el tema trae un `li { list-style-type:
 * none }` suelto que gana a cualquier `list-style` heredado del <ul>, y el
 * color se fuerza porque `.column_column ul` las pintaba de gris azulado.
 */
.PaginaEmpresas-lista {
  display: block;
  margin: 0 0 var(--Global-Espacio-TituloContenido);
  padding-left: 0;
  list-style: none;
  color: var(--Global-Color-Black) !important;
}

.PaginaEmpresas-lista > li {
  position: relative;
  margin: 0 0 calc(var(--Global-Espacio-TituloContenido) / 2);
  padding-left: 26px;
  list-style: none;
  color: inherit;
}

.PaginaEmpresas-lista > li::before {
  content: "\2193\FE0E";
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  rotate: -90deg;
  font-family: var(--Font-Family-Primary);
  font-weight: var(--Font-Weight-400);
  line-height: inherit;
  color: inherit;
}

.PaginaEmpresas-lista > li:last-child {
  margin-bottom: 0;
}

/* Las certificaciones son nueve lineas cortas: en una sola columna dejan un
   hueco enorme a la derecha, asi que se reparten. */
@media (min-width: 700px) {
  .PaginaEmpresas-lista--columnas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    column-gap: var(--Global-Espacio-Grupo);
  }
}


/* Cuatro tipos de organizacion, sobre lamina gris. */
.PaginaEmpresas-tipos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--Global-Espacio-TituloContenido);
}

.PaginaEmpresas-tipo {
  display: flex;
  flex-direction: column;
  gap: calc(var(--Global-Espacio-TituloContenido) / 2);
  box-sizing: border-box;
  height: 100%;
  padding: var(--Global-Espacio-TituloContenido);
  border-radius: var(--Global-Radio-Tarjeta);
  background-color: var(--Global-Color-Grey);
}

.PaginaEmpresas-tipo h3,
.PaginaEmpresas-tipo p {
  margin: 0;
}

.PaginaEmpresas-tipoSigla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--Global-Color-White);
}

.PaginaEmpresas-tipoEnlace {
  margin-top: auto;
  color: inherit;
}

/* --------------------------------------------------------------------------
 * Inclusion: lamina de color, texto a la izquierda y las dos cifras al lado
 * -------------------------------------------------------------------------- */
.PaginaEmpresas-inclusion {
  display: grid;
  gap: var(--Global-Espacio-Grupo);
  align-items: center;
  box-sizing: border-box;
  margin: 0 0 var(--Global-Espacio-Grupo);
  padding: var(--Global-Espacio-Superior);
  border-radius: var(--Global-Radio-Panel);
  /* El amarillo del area de Marketing. Estuvo en el azul del area Tech, que no
     pintaba nada aqui, y despues en negro; el amarillo es el que pidio Eduardo
     (09/09/2026). Es una superficie clara, asi que el texto va en negro. */
  background-color: var(--Area-Marketing-Primary);
  color: var(--Global-Color-Black);
}

.PaginaEmpresas-inclusion .PaginaEmpresas-antetitulo {
  color: inherit;
  opacity: 0.65;
}

.PaginaEmpresas-inclusionTexto h2,
.PaginaEmpresas-inclusionTexto p {
  margin: 0 0 var(--Global-Espacio-TituloContenido);
  max-width: 60ch;
}

.PaginaEmpresas-inclusionTexto p:last-child {
  margin-bottom: 0;
}

.PaginaEmpresas-inclusionCifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--Global-Espacio-TituloContenido);
  margin: 0;
  padding: 0;
  list-style: none;
}

.PaginaEmpresas-inclusionCifras li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.PaginaEmpresas-inclusionCifras b {
  font-size: var(--Font-Size-45);
  line-height: var(--Font-Line-height-100);
}

.PaginaEmpresas-inclusionCifras span {
  opacity: 0.65;
}

/* --------------------------------------------------------------------------
 * Proyectos, testimonios y clientes
 * -------------------------------------------------------------------------- */
.PaginaEmpresas-proyectos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--Global-Espacio-TituloContenido);
}

/*
 * Cada proyecto, en su tarjeta. Eran cuatro columnas de texto suelto y se
 * leian como un parrafo partido en cuatro (Eduardo, 09/09/2026). El dia que
 * haya fotos entran arriba, dentro de la misma tarjeta.
 */
.PaginaEmpresas-proyecto {
  display: flex;
  flex-direction: column;
  gap: calc(var(--Global-Espacio-TituloContenido) / 2);
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: var(--Global-Espacio-TituloContenido);
  border-radius: var(--Global-Radio-Tarjeta);
  background-color: var(--Global-Color-Grey);
}

.PaginaEmpresas-proyecto h3,
.PaginaEmpresas-proyecto p {
  margin: 0;
}

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

/* Cuando haya fotos de proyecto, van de primer hijo del <article>. */
.PaginaEmpresas-proyecto .PaginaEmpresas-proyectoFoto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--Global-Radio-Imagen);
}

.PaginaEmpresas-testimonios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--Global-Espacio-Grupo);
}

.PaginaEmpresas-testimonio {
  display: flex;
  flex-direction: column;
  gap: var(--Global-Espacio-TituloContenido);
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: var(--Global-Espacio-TituloContenido);
  border: 1px solid var(--Global-Filete);
  border-radius: var(--Global-Radio-Tarjeta);
}

.PaginaEmpresas-testimonio blockquote {
  margin: 0;
}

.PaginaEmpresas-testimonio figcaption {
  margin-top: auto;
  color: var(--Global-Color-Grey-Secondary);
}

.PaginaEmpresas-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: center;
  gap: var(--Global-Espacio-Grupo) var(--Global-Espacio-TituloContenido);
  margin: 0;
  padding: 0;
  list-style: none;
}

.PaginaEmpresas-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.PaginaEmpresas-logos img {
  width: auto;
  max-width: 100%;
  height: 40px;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
 * Cierre
 * -------------------------------------------------------------------------- */
.PaginaEmpresas-cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--Global-Espacio-TituloContenido);
  box-sizing: border-box;
  margin: 0 0 var(--Global-Espacio-Grupo);
  padding: var(--Global-Espacio-Superior) var(--Global-Espacio-TituloContenido);
  border-radius: var(--Global-Radio-Panel);
  /* Gris, como el resto de superficies claras de la pagina: el azul suave del
     area Tech era otro color de fuera de sitio. */
  background-color: var(--Global-Color-Grey);
}

.PaginaEmpresas-cierre h2 {
  margin: 0 0 calc(var(--Global-Espacio-TituloContenido) / 2);
  max-width: 22ch;
}

.PaginaEmpresas-cierre p {
  margin: 0;
}

/* --------------------------------------------------------------------------
 * De 1000 para arriba: cabecera e inclusion en dos columnas
 * -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .PaginaEmpresas-cabecera {
    grid-template-columns: minmax(0, 520fr) minmax(0, 560fr);
  }

  .PaginaEmpresas-inclusion {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  }
}