/** ==========================================================================
 * Base CEI — los estilos de texto del sistema como clases
 *
 * Traducción de los ocho estilos de Figma («Global-h1», «Global-p--small»...)
 * a clases utilizables desde el HTML. Cada una se compone únicamente con los
 * tokens de css/cei-tokens.css: ningún valor literal.
 *
 * El responsive NO está aquí. Los tamaños cambian porque los tokens cambian
 * de valor por breakpoint en cei-tokens.css; estas clases no llevan @media.
 *
 * Se aplican como clase en el marcado, no por etiqueta: hay elementos cuyo
 * peso visual no coincide con su nivel semántico (un <h3> que es cuerpo de
 * texto, una cifra decorativa dentro de un <div>).
 * ========================================================================== */

/*
 * El color por defecto del texto de la web es el negro del sistema.
 *
 * Betheme sirve el cuerpo en #626262 —un gris que no es ninguno de los tokens—
 * y de ahi heredaba todo lo que no llevara un color propio: los parrafos sin
 * clase, las celdas de la rejilla y, desde que los titulares toman el color de
 * su lamina, tambien los titulares (Eduardo, 09/09/2026, mirando
 * /bolsa-de-trabajo/). Se cambia en la raiz y no caso por caso.
 *
 * El selector lleva [class] por lo mismo que en css/cei-header-admin.css: el
 * tema declara reglas sobre clases del propio <body> y una clase gana a un
 * tipo; con el atributo suma un nivel y pasa por delante sin !important.
 */
body[class] {
  color: var(--Global-Color-Black);
}

.Global-h1,
.Global-h2,
.Global-h3,
.Global-h3--italic,
.Global-h3--underline,
.Global-h4,
.Global-p,
.Global-p--small,
.Global-p--italic {
  font-family: var(--Font-Family-Primary);
  /*
   * Sin margenes propios: el hueco entre las piezas lo pone el contenedor, con
   * su `gap` y en pasos de la escala de espacio. Estas clases arrastraban el
   * `margin-bottom: 30px` que style.css da a todo <p> y el margen por defecto
   * del navegador en los titulares (0.83em, que a Size-45 son 37,35px), dos
   * medidas que no estan en ningun token; sumados al gap dejaban huecos de 73
   * y de 37 px donde tocaban 24 (Eduardo, 09/09/2026).
   */
  margin: 0;
}

/*
 * Los titulares, en el negro del sistema. Betheme les da un color propio
 * (#161922) que no es ninguno de los tokens: casi negro, pero no negro, al
 * lado de un parrafo que si lo era.
 *
 * Va `inherit` y no el token a pelo porque estas clases se usan tambien sobre
 * laminas oscuras —el bloque de precio, las tarjetas de area de Tech y
 * Videojuegos, el cierre de la matricula— donde el titular tiene que salir en
 * blanco. Heredan del cuerpo, que ahora es negro puro por la regla de arriba,
 * y de la lamina cuando la lamina dice otra cosa.
 */
.Global-h1,
.Global-h2,
.Global-h3,
.Global-h3--italic,
.Global-h3--underline,
.Global-h4 {
  color: inherit;
}

/*
 * Excepcion registrada, ver cei-tokens.css: Figma da Size-95 y aqui se sirve al
 * tamano del h2.
 *
 * SALVO EN LA HOME NUEVA, donde desde el 16/09/2026 va a 95 / 95 / -1px. Ese
 * cambio vive acotado en css/templates/home-v2.css hasta que se decida
 * aplicarlo a todo el sitio; entonces se trae aqui y se borra aquella regla.
 */
.Global-h1 {
  font-size: var(--Font-Size-h1-temporal);
  font-weight: var(--Font-Weight-400);
  line-height: var(--Font-Line-height-100);
  letter-spacing: var(--Font-Letter-spacing-h1);
}

.Global-h2 {
  font-size: var(--Font-Size-45);
  /* Excepcion registrada, ver cei-tokens.css: Figma da Weight-regular y los h2
     van a 500 hasta hablarlo con Elena. Es el mismo peso que llevan hoy los h2
     de las areas (h2.tipo_curso) y de las fichas (h2.contenido_seo). */
  font-weight: var(--Font-Weight-h2-temporal);
  line-height: var(--Font-Line-height-100);
  letter-spacing: var(--Font-Letter-spacing-2);
}

.Global-h3 {
  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);
}

.Global-h3--italic {
  font-size: var(--Font-Size-29);
  font-weight: var(--Font-Weight-400);
  font-style: italic;
  line-height: var(--Font-Line-height-110);
  letter-spacing: var(--Font-Letter-spacing-2);
}

.Global-h3--underline {
  font-size: var(--Font-Size-29);
  font-weight: var(--Font-Weight-400);
  line-height: var(--Font-Line-height-h3-underline);
  letter-spacing: var(--Font-Letter-spacing-2);
  text-decoration: underline;
}

/*
 * ESTE NO ES UNO DE LOS OCHO DE FIGMA (Eduardo, 14/09/2026). Lo pidio la linea
 * pequeña que va encima del titulo en los bloques de diploma y de
 * certificaciones de la ficha. No se ha inventado nada: son los mismos valores
 * que ya tenia el unico h4 de la ficha, `h4.financiacion_curso` («Financiación»
 * bajo el precio), escritos aqui una vez. Si Figma define un Global-h4 distinto,
 * manda Figma y se corrige aqui, que es de donde lo toman todos.
 */
.Global-h4 {
  font-size: var(--Font-Size-20);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-2);
}

.Global-p {
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: normal; /* Figma: «Automático» */
  letter-spacing: var(--Font-Letter-spacing-0);
}

.Global-p--small {
  font-size: var(--Font-Size-14);
  font-weight: var(--Font-Weight-400);
  line-height: normal; /* Figma: «Automático» */
  letter-spacing: var(--Font-Letter-spacing-2);
}

/* El único de los ocho que no usa Weight-regular: Figma lo define como
   Medium Italic, es decir peso 500. */
.Global-p--italic {
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-500);
  font-style: italic;
  line-height: normal; /* Figma: «Automático» */
  letter-spacing: var(--Font-Letter-spacing-2);
}


/* --------------------------------------------------------------------------
 * El cuerpo del sistema, sin tener que escribir la clase
 *
 * El HTML de las paginas de contenido vive en la base de datos, y ahi es facil
 * que un <p> o un <li> se queden sin su `Global-p`. Cuando pasa no se quedan
 * sin estilo: caen en el `p { font-size: var(--font-16); font-weight: 500 }`
 * suelto de style.css y en el color de Betheme, y en la misma pagina conviven
 * parrafos de 19 y de 16 (Eduardo, 09/09/2026, mirando /alumnos-extranjeros/:
 * habia 14, 16, 19, 29, 45 y 55 px, y cinco colores distintos).
 *
 * Asi que dentro de los envoltorios del sistema el cuerpo es cuerpo aunque no
 * lleve clase. Solo alcanza a los elementos SIN clase: el que lleve una
 * —`Global-p--small`, `Rejilla-celdaMeta`, `PaginaEmpresas-cifra`— manda sobre
 * esto, y las excepciones de cada bloque se escriben en su propia hoja, que se
 * encola despues de esta.
 * -------------------------------------------------------------------------- */
.CabeceraPagina p:not([class]),
.CabeceraPagina li:not([class]),
.Rejilla p:not([class]),
.Rejilla li:not([class]),
.Galeria p:not([class]),
.PaginaTexto p:not([class]),
.PaginaTexto li:not([class]),
.PaginaEmpleo p:not([class]),
.PaginaEmpleo li:not([class]),
.PaginaEmpresas p:not([class]),
.PaginaEmpresas li:not([class]),
.PaginaInternacional p:not([class]),
.PaginaInternacional li:not([class]) {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: normal; /* Figma: «Automático» */
  letter-spacing: var(--Font-Letter-spacing-0);
  color: var(--Global-Color-Black);
}

/*
 * Y el hueco entre parrafos lo pone el contenedor, no el parrafo. style.css
 * da a todo <p> un `margin-bottom: 30px` que, dentro de una celda de la
 * rejilla —que ya es una columna flexible con su `gap`—, se sumaba al hueco y
 * dejaba las respuestas de las preguntas frecuentes con el doble de aire del
 * que les toca (Eduardo, 09/09/2026, mirando /bolsa-de-trabajo/).
 *
 * Solo los <p>: los <li> sin clase se dejan como estan, que su separacion la
 * pone la lista de su bloque (.PaginaTexto-lista, .PaginaEmpleo-lista...).
 */
.CabeceraPagina p:not([class]),
.Rejilla p:not([class]),
.Galeria p:not([class]),
.PaginaTexto p:not([class]),
.PaginaEmpleo p:not([class]),
.PaginaEmpresas p:not([class]),
.PaginaInternacional p:not([class]) {
  margin: 0;
}

/*
 * Y el color, para TODO lo que va en una lista o es un enlace, lleve clase o
 * no: el tema pinta `li` de #626262 y `.column_column ul` de #737e86, dos
 * grises que no son ningun token y que se colaban en las celdas de la rejilla
 * —que son <li> con clase— y en sus titulares. Con `inherit` cada cosa toma el
 * color de la lamina donde esta, que es la unica regla que hace falta.
 */
.CabeceraPagina ul,
.CabeceraPagina ol,
.CabeceraPagina li,
.Rejilla,
.Rejilla ul,
.Rejilla ol,
.Rejilla li,
.Galeria li,
.PaginaTexto ul,
.PaginaTexto ol,
.PaginaTexto li,
.PaginaEmpleo ul,
.PaginaEmpleo ol,
.PaginaEmpleo li,
.PaginaEmpresas ul,
.PaginaEmpresas ol,
.PaginaEmpresas li,
.PaginaInternacional ul,
.PaginaInternacional ol,
.PaginaInternacional li {
  color: var(--Global-Color-Black);
}

/*
 * Y el tamaño de los <li> que hacen de contenedor —una celda de la rejilla
 * numerada, una cifra— aunque lleven clase: el tema les da 14px por etiqueta y
 * ese valor se colaba en cualquier texto suelto que cayera dentro y en los
 * calculos en `em`. Solo el <li>: el <ul> se deja, que hay listas pequeñas a
 * proposito (los sellos de la cabecera) que fijan su tamaño ahi.
 */
.CabeceraPagina li,
.Rejilla li,
.Galeria li,
.PaginaTexto li,
.PaginaEmpleo li,
.PaginaEmpresas li,
.PaginaInternacional li {
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
}

/* Un enlace suelto dentro de la prosa: del color del texto y subrayado. Los
   que llevan clase —botones, tarjetas, el «ver la formacion»— se pintan en la
   hoja de su bloque. */
.CabeceraPagina a:not([class]),
.Rejilla a:not([class]),
.PaginaTexto a:not([class]),
.PaginaEmpleo a:not([class]),
.PaginaEmpresas a:not([class]),
.PaginaInternacional a:not([class]) {
  color: var(--Global-Color-Black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * TEXTO SOLO PARA LECTORES DE PANTALLA (Eduardo, 16/09/2026)
 *
 * Se ve con los oídos, no con los ojos. Para cuando el diseño dice algo con una
 * forma —un borde, un color, un rótulo— que quien no ve la pantalla necesita
 * escuchar en palabras.
 *
 * No se usa `display: none` ni `visibility: hidden`: eso lo esconde también de
 * los lectores, que es justo lo contrario. Se saca de la vista recortándolo.
 * -------------------------------------------------------------------------- */
.Global-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
 * MODO ACCESIBILIDAD: LA WEB SIN VIDRIO (Eduardo, 16/09/2026)
 *
 * Lo enciende el botón de la barra y se recuerda en el navegador de quien lo
 * activa. Apaga los desenfoques y deja en color plano las superficies que hoy
 * son translúcidas. No toca nada más: ni tipografías, ni colores de marca, ni
 * tamaños.
 *
 * POR QUÉ IMPORTA: sobre un fondo desenfocado el texto cambia de contraste
 * según lo que pase por detrás, así que no hay forma de garantizar un ratio; y
 * el desenfoque en movimiento marea a quien tiene sensibilidad vestibular.
 *
 * DOS PALANCAS, Y LA PRIMERA HACE CASI TODO:
 *
 *   1. Los tokens. El vidrio de la casa sale de `--Global-Velo-Blanco` y
 *      `--Global-Vidrio-Blur`; redefinidos aquí, cambian de golpe la barra, sus
 *      desplegables, el buscador y los paneles flotantes sin tocar una sola
 *      regla de las suyas.
 *   2. Una red de seguridad con `backdrop-filter: none` sobre todo, para lo que
 *      no pase por los tokens (el filtro «liquid glass» de Blink lleva su
 *      `url(#CeiLiquidGlass)` escrito al lado del token).
 *
 * LO QUE NO SE TOCA, Y A PROPÓSITO: los velos oscuros que hay ENCIMA de las
 * fotos —el de las tarjetas de área al pasar por encima y el del pie de las
 * piezas del portfolio—. Esos no son decoración: son lo que hace legible el
 * texto blanco sobre una imagen que no controlamos. Quitarlos en un modo de
 * accesibilidad sería justo lo contrario de lo que se busca.
 * ========================================================================== */

:root[data-accesible="plano"] {
  --Global-Velo-Blanco: #ffffff;
  --Global-Velo-Blanco-60: #ffffff;
  --Global-Vidrio-Blur: none;
}

/*
 * El `!important` está justificado aquí y en pocos sitios más: es una
 * preferencia explícita del visitante y tiene que ganarle a cualquier regla del
 * tema, del constructor o de un plugin, escrita hoy o dentro de un año.
 */
:root[data-accesible="plano"] *,
:root[data-accesible="plano"] *::before,
:root[data-accesible="plano"] *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* El velo del buscador lleva su alfa escrita a mano, no por token. */
:root[data-accesible="plano"] .Buscador-velo {
  background-color: #ffffff !important;
}

/*
 * SIN MOVIMIENTO QUE EMPIECE SOLO (Eduardo, 16/09/2026)
 *
 * Fuera todas las animaciones: las de scroll —las piezas que entran al
 * aparecer, la barra de matrícula de la ficha, el mosaico de la home que se
 * ensancha— y las que se repiten sin parar, como la marquesina de empresas.
 * Es la otra mitad del mismo encargo que el vidrio: quien pide plano no quiere
 * cosas moviéndose por su cuenta mientras lee (y es lo que pide la WCAG 2.2.2
 * para el contenido que arranca solo y dura más de cinco segundos).
 *
 * `animation: none` deja cada elemento en SU estado, no en el primer fotograma:
 * todas nuestras animaciones esconden desde el `from` del @keyframes y ninguna
 * declara el estado oculto en la regla base, así que al quitarlas todo queda
 * visible y quieto. Es la misma degradación que ya se ve hoy en Firefox y
 * Safari, donde `animation-timeline` no existe.
 *
 * Las transiciones se quedan: esas las dispara el visitante al pasar o pulsar,
 * no van solas. Y el `prefers-reduced-motion` del sistema sigue por su cuenta,
 * que es quien apaga estas mismas animaciones sin tocar el vidrio.
 */
:root[data-accesible="plano"] *,
:root[data-accesible="plano"] *::before,
:root[data-accesible="plano"] *::after {
  animation: none !important;
}

/*
 * Los vídeos decorativos se paran desde JavaScript (js/cei-accesible.js): el
 * CSS no puede pausar un <video>. Aquí solo se deja dicho que, parados, se ven
 * por su póster, que es lo que ya traen casi todos.
 */
:root[data-accesible="plano"] video {
  --cei-video-parado: 1;
}

/* --------------------------------------------------------------------------
 * El botón: oculto, pero el primero al tabular (Eduardo, 16/09/2026)
 *
 * No se ve. Aparece solo cuando el foco llega a él, que es lo primero que pasa
 * al pulsar el tabulador en cualquier página: va el primero del marcado y el
 * <header> abre el <body>, así que no hay nada antes.
 *
 * Es el patrón del enlace de «saltar al contenido» de toda la vida, y por el
 * mismo motivo: quien necesita esto navega con teclado y lo encuentra sin
 * buscarlo; a quien no, no le ocupa un hueco en la barra.
 *
 * SE OCULTA CON `opacity`, NO CON `display` NI `visibility`: esos dos lo
 * sacarían del orden de tabulación y no habría forma de llegar. Y
 * `pointer-events: none` para que, invisible, no se pueda pulsar por accidente
 * el trozo de cabecera que ocupa.
 *
 * `:focus` ADEMÁS de `:focus-visible`: el foco por teclado siempre es
 * «visible», pero un navegador que no entienda el segundo dejaría el botón
 * escondido con el foco dentro, que es lo peor que puede pasar aquí.
 *
 * Los dos `translateY` no se estorban: el primero lo centra en la barra —es un
 * absoluto con `top: 50%`— y el segundo es el que lo sube a esconderse. Al
 * enfocarlo se queda solo el primero.
 * -------------------------------------------------------------------------- */

.MenuNavegacion-accesible {
  position: absolute;
  top: 50%;
  left: var(--MenuNavegacion-paddingX, 20px);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 12px;
  border: 1px solid var(--Global-Color-Black);
  border-radius: var(--Global-Radio-Pastilla);
  background-color: var(--Global-Color-White);
  color: var(--Global-Color-Black);
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-14);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateY(-150%);
  transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.2s ease, color 0.2s ease;
}

.MenuNavegacion-accesible:focus,
.MenuNavegacion-accesible:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}

.MenuNavegacion-accesible:hover {
  background-color: var(--Global-Color-Black);
  color: var(--Global-Color-White);
}

/* Encendido: relleno fijo, para que se vea sin depender del color. */
.MenuNavegacion-accesible[aria-pressed="true"] {
  background-color: var(--Global-Color-Black);
  color: var(--Global-Color-White);
}

.MenuNavegacion-accesibleIcono svg {
  display: block;
  width: 18px;
  height: 18px;
}