/** ==========================================================================
 * Paginas de texto del sistema
 *
 * El envoltorio generico de las paginas cuyo contenido es HTML en la base de
 * datos y no una plantilla: titulo, entradilla, secciones de prosa, listas y
 * una fila de botones. Lo que va en rejilla usa el componente compartido
 * .Rejilla (css/bloques/rejilla.css). La primera que la usa es
 * /titulaciones-universitarias-informacion/ (sql/2026-09-08-titulaciones-universitarias.sql).
 *
 *   <div id="Content" class="PaginaTexto">
 *     h1.Global-h1
 *     .PaginaTexto-intro                 entradilla y, si la hay, el logotipo
 *     .PaginaTexto-seccion               un bloque con su h2
 *       .PaginaTexto-seccion--estrecha   para el texto legal: menos ancho
 *     .PaginaTexto-lista                 lista con punto
 *     .PaginaTexto-acciones              la fila de botones
 *     .PaginaTexto-cierre                la ultima llamada, sobre lamina
 * ========================================================================== */

.PaginaTexto-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Global-Espacio-TituloContenido);
  max-width: 70ch;
  margin: var(--Global-Espacio-TituloContenido) 0 var(--Global-Espacio-Grupo);
}

/*
 * El logotipo se escribe con la clase DOS veces a proposito: estas paginas
 * viven dentro de .content_wrapper, y el tema tiene ahi un
 * «.content_wrapper img { width: 100%; height: auto }» que con una sola clase
 * gana por especificidad y deja el logotipo a pantalla completa.
 */
.PaginaTexto .PaginaTexto-logo {
  display: block;
  width: auto;
  max-width: 226px;
  height: 44px;
}

.PaginaTexto-seccion {
  margin: 0 0 var(--Global-Espacio-Grupo);
}

/*
 * El mosaico de fotos trae solo margen por arriba: nacio como el ultimo bloque
 * de /garantia-laboral/ y alli no necesitaba nada debajo. En una pagina de
 * texto va por el medio —en /centro-formacion/, entre «Sobre nosotros» y
 * «Centro de formacion oficial»— y sin esto la seccion siguiente se le pegaba
 * (Eduardo, 09/09/2026). Se separa como una seccion mas.
 */
.PaginaTexto .Galeria {
  margin-bottom: var(--Global-Espacio-Grupo);
}

.PaginaTexto-seccion > h2 {
  margin: 0 0 var(--Global-Espacio-TituloContenido);
}

/* El texto largo, en columna estrecha: 70ch es lo que se lee de un tiron. */
.PaginaTexto-seccion > .Global-p,
.PaginaTexto-seccion > .PaginaTexto-lista {
  max-width: 70ch;
  margin: 0 0 var(--Global-Espacio-TituloContenido);
}

.PaginaTexto-seccion--estrecha > .Global-p {
  max-width: 62ch;
}

/*
 * La vineta de la lista es la flecha del sistema —el glifo ↓ de Inter girado
 * -90°, el mismo de la cabecera y de las listas de las fichas— pintada en un
 * ::before y no con `list-style`: el tema trae un `li { list-style-type: none }`
 * suelto que, por ser una regla propia del <li>, gana a cualquier `list-style`
 * heredado del <ul>, y las listas salian sin nada delante.
 *
 * El color se fuerza por lo mismo: `.column_column ul` del tema las pintaba de
 * gris azulado y se leian mas claras que el parrafo de al lado (Eduardo,
 * 09/09/2026).
 */
.PaginaTexto-lista {
  display: block;
  margin: 0;
  padding-left: 0;
  list-style: none;
  color: var(--Global-Color-Black) !important;
}

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

.PaginaTexto-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;
}

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

/* Dentro de una celda de la rejilla, los parrafos no llevan tope propio. La
   tipografia se repite aqui porque al llevar clase se quedan fuera de la regla
   de cuerpo de cei-base.css, que solo alcanza a los <p> sin clase. */
.PaginaTexto-p {
  margin: 0 0 calc(var(--Global-Espacio-TituloContenido) / 2);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-0);
}

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

.PaginaTexto-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Global-Espacio-TituloContenido);
  margin: 0 0 var(--Global-Espacio-Grupo);
}

/*
 * El boton de una celda, al pie: las tres celdas de las sedes tienen textos de
 * distinto largo y sus botones salian a tres alturas (Eduardo, 09/09/2026). Es
 * lo mismo que ya hacen las celdas de /bolsa-de-trabajo/.
 */
.PaginaTexto .Rejilla-celda > .Global-boton {
  margin-top: auto;
  align-self: flex-start;
}

/* Las listas de dentro de una celda: la misma flecha, con menos aire entre
   puntos porque la celda es estrecha. */
.PaginaTexto .Rejilla-celda ul {
  display: block;
  margin: 0;
  padding-left: 0;
  list-style: none;
  color: var(--Global-Color-Black) !important;
}

.PaginaTexto .Rejilla-celda li {
  position: relative;
  margin: 0 0 calc(var(--Global-Espacio-TituloContenido) / 3);
  padding-left: 26px;
  list-style: none;
  color: inherit;
}

.PaginaTexto .Rejilla-celda 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;
}

.PaginaTexto .Rejilla-celda li:last-child {
  margin-bottom: 0;
}

/* La ultima llamada, sobre lamina y con su boton al lado. */
/*
 * El cierre: el texto con su llamada a la accion debajo y, al lado, una foto.
 * El boton estuvo a la derecha, enfrentado al texto, y quedaba lejos de lo que
 * lo justifica; ahora va donde acaba de leerse el motivo (Eduardo, 09/09/2026).
 */
.PaginaTexto-cierre {
  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);
  background-color: var(--Global-Color-Grey);
}

.PaginaTexto-cierreTexto {
  max-width: 62ch;
}

.PaginaTexto-cierreAcciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Global-Espacio-TituloContenido);
  margin-top: var(--Global-Espacio-TituloContenido);
}

/*
 * Un boton suelto en la lamina, fuera de .PaginaTexto-cierreAcciones —como
 * quedo /disena-tu-futuro/ del cierre de antes—: a su tamaño y no estirado a
 * todo el ancho, que es lo que hace la rejilla con sus hijos (Eduardo,
 * 25/09/2026). El sitio bueno es dentro del texto; esto es por si alguna
 * pagina se queda atras.
 */
.PaginaTexto-cierre > .Global-boton {
  justify-self: start;
}

.PaginaTexto-cierreFoto {
  margin: 0;
  min-width: 0;
}

.PaginaTexto .PaginaTexto-cierreFoto img {
  display: block;
  width: 100%;
  /* Alto por proporcion y no `height: 100%`: la lamina se centra, asi que la
     figura no estira y un 100% de una altura sin definir es cero. */
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--Global-Radio-Imagen);
}

/* Dos columnas cuando hay foto y cabe: el texto manda y la foto acompaña. */
@media (min-width: 1000px) {
  .PaginaTexto-cierre:has(.PaginaTexto-cierreFoto) {
    grid-template-columns: minmax(0, 620fr) minmax(0, 460fr);
  }
}

.PaginaTexto-cierreTexto h2 {
  margin: 0 0 var(--Global-Espacio-TituloContenido);
}

.PaginaTexto-cierreTexto .Global-p {
  margin: 0 0 var(--Global-Espacio-TituloContenido);
}

/* Una fila de enlaces en pastilla (las areas de «Cursos a medida»). */
.PaginaTexto-pastillas {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--Global-Espacio-TituloContenido) / 2);
  margin: var(--Global-Espacio-TituloContenido) 0 0;
  padding: 0;
  list-style: none;
}

.PaginaTexto-pastillas li {
  margin: 0;
}

/* --------------------------------------------------------------------------
 * DOS COLUMNAS DE TEXTO
 *
 *   <section class="PaginaTexto-seccion">
 *     <div class="PaginaTexto-columnas">      dos bloques de prosa, uno al lado
 *       <div>  h2 + parrafos                  del otro desde 1000
 *     <div class="Rejilla">                   y lo que siga, a ancho completo
 *
 * Nacio en /centro-formacion/, juntando «Sobre nosotros» y «Centro de formacion
 * oficial», que se leian como dos bloques largos uno detras de otro y decian lo
 * mismo con otras palabras (Eduardo, 09/09/2026). Debajo caben las
 * certificaciones sin cambiar de seccion.
 *
 * Los parrafos de dentro pierden el tope de 70ch: la columna ya es la medida.
 * -------------------------------------------------------------------------- */
.PaginaTexto-columnas {
  display: grid;
  gap: var(--Global-Espacio-Grupo);
  margin-bottom: var(--Global-Espacio-Grupo);
}

@media (min-width: 1000px) {
  .PaginaTexto-columnas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.PaginaTexto-columnas > * {
  display: flex;
  flex-direction: column;
  gap: var(--Global-Espacio-TituloContenido);
  min-width: 0;
}

.PaginaTexto .PaginaTexto-columnas :is(h2, p) {
  max-width: none;
  margin: 0;
}

/* --------------------------------------------------------------------------
 * UNA SECCION SOBRE LAMINA DE COLOR
 *
 *   <section class="PaginaTexto-seccion PaginaTexto-seccion--lamina
 *                   PaginaTexto-seccion--videojuegos">
 *
 * Dos clases: una dice que va sobre lamina y la otra de que color. El color
 * sale del token del area, nunca del hexadecimal.
 *
 * SOBRE LAS LAMINAS OSCURAS TODO PASA A BLANCO. No basta con poner el color en
 * la seccion: cei-base.css fija negro explicito en `.Rejilla li`, en los
 * parrafos sin clase y en los enlaces sin clase, y eso gana a la herencia. Por
 * eso la lista de abajo, y por eso lleva `#Content` delante: con el id sube por
 * encima de aquellas sin necesidad de un !important.
 *
 * Las areas oscuras se enumeran en un solo sitio. Si mañana entra otra —Tech,
 * por ejemplo— se añade su modificador a esa lista y ya.
 * -------------------------------------------------------------------------- */
.PaginaTexto-seccion--lamina {
  padding: var(--Global-Espacio-Grupo);
  border-radius: var(--Global-Radio-Panel);
  background-color: var(--PaginaTexto-lamina, var(--Global-Color-Grey));
}

.PaginaTexto-seccion--videojuegos {
  --PaginaTexto-lamina: var(--Area-Videojuegos-Primary);
}

.PaginaTexto-seccion--arquitectura {
  --PaginaTexto-lamina: var(--Area-Arquitectura-Primary);
}

/* Las oscuras, en blanco. */
#Content.PaginaTexto .PaginaTexto-seccion--videojuegos,
#Content.PaginaTexto .PaginaTexto-seccion--videojuegos :is(p, ul, ol, li, h2, h3, a, .Rejilla) {
  color: var(--Global-Color-White);
}

/* El circulo de la celda y la flecha de sus listas, del color del texto. */
#Content.PaginaTexto .PaginaTexto-seccion--videojuegos .Rejilla-celdaTitulo::before {
  border-color: currentColor;
}

/* El boton, perfilado en blanco; al pasar por encima se rellena y el texto
   toma el color de la lamina. */
#Content.PaginaTexto .PaginaTexto-seccion--videojuegos .Global-boton {
  border-color: currentColor;
  color: currentColor;
}

#Content.PaginaTexto .PaginaTexto-seccion--videojuegos .Global-boton:hover {
  background-color: var(--Global-Color-White);
  color: var(--PaginaTexto-lamina);
}

/* --------------------------------------------------------------------------
 * SIN APARICION AL DESPLAZARSE (Eduardo, 10/09/2026)
 *
 * Aqui vivia «ptEntra»: cada seccion asomaba segun subia y las fotos del
 * mosaico entraban una a una, con `animation-timeline: view()`. Se quita a
 * peticion — en /centro-formacion/ y en el resto de paginas de texto el
 * contenido se ve quieto desde el primer momento.
 *
 * Si algun dia vuelve, el codigo esta en git y lo que hacia falta era esto:
 * `@supports` para que donde no se entienda `view()` no quede nada escondido,
 * `prefers-reduced-motion` para quien ha pedido menos movimiento, y `both` de
 * relleno para que lo que ya esta en pantalla al cargar salga en su fotograma
 * final y no parpadee.
 * -------------------------------------------------------------------------- */