dentro de una seccion.
*
* FUERA LA FLECHA DEL TEMA EN MODALIDADES. `.seciones_cursos ul > li:before`
* mete una flecha girada delante de cada renglon. En las modalidades sobra: no
* son una enumeracion de ventajas, son fichas de datos.
*
* EN CERTIFICACIONES SI (Eduardo, 16/09/2026). Al quitarles la pastilla vuelven
* a ser una lista como las demas de la ficha, asi que llevan la misma flecha y
* la misma sangria que cualquier otra: la regla del tema ya lo hace todo y aqui
* solo hay que dejarla pasar.
* ========================================================================== */
.Modalidades > li::before {
content: none !important;
}
.Modalidades,
.Certificaciones {
margin: 0 0 var(--Global-Espacio-TituloContenido);
padding: 0;
}
.Modalidades {
list-style: none;
}
.Modalidades {
display: grid;
gap: calc(var(--Global-Espacio-TituloContenido) / 2);
}
/* --------------------------------------------------------------------------
* Modalidades: una tarjeta por modalidad
*
* La que ofrece esta formacion lleva borde de tinta y el rotulo «Esta
* formación» arriba. La que no, se queda con el filete y el texto apagado: se
* sigue leyendo —saber que algo NO esta es informacion— pero no compite.
* -------------------------------------------------------------------------- */
.Modalidades {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.Modalidades-item {
position: relative;
display: grid;
align-content: start;
gap: 6px;
padding: var(--Global-Espacio-TituloContenido);
border: 1px solid var(--Global-Filete);
border-radius: var(--Global-Radio-Tarjeta);
}
.Modalidades-item--si {
border-color: var(--Global-Color-Black);
}
.Modalidades-marca {
align-self: start;
margin-bottom: 2px;
padding: 4px 12px;
border-radius: var(--Global-Radio-Pastilla);
background-color: var(--Global-Color-Black);
color: var(--Global-Color-White);
font-family: var(--Font-Family-Primary);
font-size: var(--Font-Size-14);
line-height: 1.2;
text-transform: uppercase;
letter-spacing: var(--Font-Letter-spacing-0);
justify-self: start;
}
.Modalidades-nombre {
font-family: var(--Font-Family-Primary);
font-size: var(--Font-Size-20);
font-weight: var(--Font-Weight-h2-temporal);
line-height: var(--Font-Line-height-110);
letter-spacing: var(--Font-Letter-spacing-2);
color: var(--Global-Color-Black);
}
.Modalidades-detalle {
font-family: var(--Font-Family-Primary);
font-size: var(--Font-Size-14);
line-height: normal;
color: var(--Global-Color-Grey-Secondary);
}
.Modalidades-item--no .Modalidades-nombre {
font-weight: var(--Font-Weight-400);
color: var(--Global-Color-Grey-Secondary);
}
.Modalidades-nota {
margin: 0;
font-family: var(--Font-Family-Primary);
font-size: var(--Font-Size-14);
color: var(--Global-Color-Grey-Secondary);
}
/* --------------------------------------------------------------------------
* Certificaciones: el logo y su nombre, sin flecha y sin pastilla
* -------------------------------------------------------------------------- */
/*
* UNA LISTA, NI TARJETAS NI PASTILLAS (Eduardo, 16/09/2026).
*
* Empezaron en una rejilla de `minmax(240px, 1fr)` —y 112 de las 176 fichas con
* certificación tienen UNA SOLA, que se estiraba a todo el ancho con el logo
* perdido en la esquina—; siguieron en pastillas, que al menos medían lo que su
* texto. Pero el borde gris y el relleno de botón prometían un clic que no
* existe: no se pulsan, solo se leen.
*
* Así que lista y ya: la flecha del sistema, la sangría de 26px y el mismo
* tamaño de letra que cualquier otro renglón de la ficha, con el logo de la
* compañía delante del nombre. Lo único propio es ese logo.
*/
.Certificaciones-item {
display: flex;
align-items: center;
gap: 12px;
}
.Certificaciones-logo {
flex: none;
width: auto;
height: 22px;
}
/* Sin `font-size`: hereda el del renglón, como el resto de las listas. */
.Certificaciones-nombre {
font-family: var(--Font-Family-Primary);
color: var(--Global-Color-Black);
}
/*
* Aquí vivía .Certificaciones-cierre, el párrafo que iba DEBAJO de la lista
* (Eduardo, 16/09/2026). Se fundió con el de entrada y ahora hay uno solo,
* encima, sin clase que necesite reglas: es un como los demás.
*/
@media (max-width: 767.98px) {
.Modalidades {
grid-template-columns: minmax(0, 1fr);
}
/* La lista de certificaciones no necesita regla: ya es de una columna. */
}
/* ==========================================================================
* LOS LOGOS DE UNIVERSIDAD EN LOS BLOQUES DE DIPLOMA
*
* Las reglas de .Certificaciones que habia aqui se fueron arriba, junto a las
* de modalidades: los dos bloques comparten forma y conviene que compartan
* sitio en la hoja (Eduardo, 16/09/2026).
* ========================================================================== */
/* --------------------------------------------------------------------------
* El logo, junto al TÍTULO del bloque
*
* Estaba flotando dentro del cuerpo, entre los párrafos, y ahí competía con el
* texto en vez de identificar el bloque. Ahora vive en el encabezado, que lo
* envuelve render.php cuando la sección trae `logo`: el título a la izquierda y
* el sello a la derecha (Eduardo, 16/09/2026).
* -------------------------------------------------------------------------- */
.Curso-seccion-encabezado {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--Global-Espacio-TituloContenido);
margin-bottom: var(--Global-Espacio-TituloContenido);
}
.Curso-seccion-encabezadoTexto {
min-width: 0; /* que el título se parta en vez de empujar al logo */
}
/* El encabezado ya pone el margen; los títulos de dentro no lo repiten. */
.Curso-seccion-encabezado .Curso-seccion-ante,
.Curso-seccion-encabezado .Curso-seccion-titulo {
margin-bottom: 0;
}
.Diploma-logo {
display: block;
width: auto;
height: 96px;
}
@media (max-width: 767.98px) {
/* En móvil, el sello debajo del título: al lado dejaría el título en una
columna de dos palabras. */
.Curso-seccion-encabezado {
flex-direction: column;
align-items: flex-start;
gap: calc(var(--Global-Espacio-TituloContenido) / 2);
}
.Diploma-logo {
height: 72px;
}
}
/* ==========================================================================
* EL MÓDULO DE CADA UNIVERSIDAD, CON SU COLOR DE MARCA (Eduardo, 16/09/2026)
*
* UDIMA y Sabal no son áreas de CEI: son marcas de terceros que firman un
* diploma. Se les da su color —el suyo, no el nuestro— y con eso el bloque se
* distingue de la columna de certificaciones que tiene al lado sin necesidad
* de ningún rótulo.
*
* BORDE, NO FONDO. El fondo a todo color obliga a invertir el sello a blanco y
* a repintar texto y enlaces, y deja un rectángulo oscuro en mitad de una
* página que es blanca de arriba abajo. Un borde del color dice lo mismo y no
* cambia nada más: el sello se queda como es y el texto sigue en negro sobre
* blanco, con su contraste de siempre.
*
* Los ids son los de la columna (render.php se los pone) y son además las
* anclas a las que baja la cabecera de la ficha.
* ========================================================================== */
#Content.Curso #diploma,
#Content.Curso #diploma-sabal {
padding: var(--Global-Espacio-TituloContenido);
border: 1px solid var(--Marca-universidad);
border-radius: var(--Global-Radio-Panel);
}
#Content.Curso #diploma {
--Marca-universidad: var(--Udima-Primary);
}
#Content.Curso #diploma-sabal {
--Marca-universidad: var(--Sabal-Primary);
}
/* El título y el enlace propio, del color de la universidad; el resto del
texto no se toca, que sobre blanco ya se lee. */
#Content.Curso #diploma .Curso-seccion-titulo,
#Content.Curso #diploma-sabal .Curso-seccion-titulo {
color: var(--Marca-universidad);
}
/*
* El enlace a udima.es, en verde UDIMA. Lleva !important porque style.css pinta
* de negro TODOS los enlaces de una seccion de curso con `.seciones_cursos a`
* y tambien !important, y contra un !important no hay especificidad que valga.
* Verde UDIMA sobre blanco da 9,94:1, asi que se lee de sobra.
*/
#Content.Curso #diploma a.Curso-enlaceExterno {
color: var(--Marca-universidad) !important;
}
/* --------------------------------------------------------------------------
* DOS COLUMNAS DESIGUALES — .Curso-seccion--2a1 (Eduardo, 16/09/2026)
*
* El contenido del curso y la galería de vídeo y fotos, lado a lado: el temario
* manda y se lleva dos partes, la galería acompaña con una. Las secciones en
* columnas del sistema son iguales entre sí; esta es la excepción, y por eso
* va con su propia clase.
* -------------------------------------------------------------------------- */
#Content.Curso .Curso-seccion--2a1 {
grid-template-columns: 2fr 1fr;
}
@media (max-width: 1199.98px) {
/* Con el temario a dos tercios de una pantalla de 1000 la galería se queda en
una tira de 300px: mejor una debajo de otra. */
#Content.Curso .Curso-seccion--2a1 {
grid-template-columns: minmax(0, 1fr);
}
}
/* --------------------------------------------------------------------------
* EL SELLO DE LA UNIVERSIDAD, AL PIE DEL BLOQUE (Eduardo, 16/09/2026)
*
* Estaba junto al título, en el encabezado. Abajo funciona mejor: se lee
* primero lo que se ofrece y el emblema de quien lo firma cierra el bloque.
*
* `margin-top: auto` lo pega al fondo de su columna, así que cuando UDIMA y
* Sabal van una al lado de la otra los dos sellos quedan a la misma altura
* aunque sus textos midan distinto. Para eso la columna tiene que ser flex.
* -------------------------------------------------------------------------- */
#Content.Curso #diploma,
#Content.Curso #diploma-sabal {
display: flex;
flex-direction: column;
}
#Content.Curso .Diploma-pie {
/* El `auto` de arriba empuja hasta el fondo lo que quede libre de columna;
el relleno es la separación mínima cuando no queda nada libre. */
margin: auto 0 0;
padding-top: var(--Global-Espacio-Grupo);
}
/* ==========================================================================
* LA FICHA SE VA MONTANDO AL DESPLAZAR (Eduardo, 16/09/2026)
*
* Cada bloque del sistema —precio, empleo, Fundae— y cada columna —
* certificaciones, UDIMA, Sabal— entra subiendo un poco y apareciendo, con la
* animación atada al scroll y sin JavaScript.
*
* DOS COSAS QUE HUBO QUE COMPROBAR ANTES DE ESCRIBIR ESTO:
*
* 1. `animation-delay` NO SIRVE PARA ESCALONAR. Con una línea de tiempo de
* scroll el retardo en segundos se ignora: medido, tres columnas con 0, 0,3
* y 0,6s daban las tres exactamente la misma opacidad (0,461). Lo que sí
* escalona es darle a cada columna un `animation-range` distinto, y el
* escalonado se nota si lo que cambia es el FINAL y no el principio: con los
* tres acabando en `cover 35/50/65%` la diferencia entre la primera y la
* tercera llega a 0,36 de opacidad; moviendo solo el inicio se quedaba en
* 0,05, que no se ve.
*
* 2. UN `transform` ROMPE EL `position: sticky` DE DENTRO. La foto de empleo es
* sticky en la ficha, y un ancestro transformado pasa a ser su bloque
* contenedor: medido, mientras la animación corre la foto se desplaza con el
* scroll en vez de quedarse quieta. Se recupera sola al acabar —el último
* fotograma es `transform: none`—, pero el salto se ve. Por eso el bloque de
* empleo entra SOLO con opacidad, sin mover nada.
*
* Y las tres guardas de siempre: `@supports` para que sin soporte no se quede
* todo invisible, `prefers-reduced-motion` y rangos relativos a la ventana.
* ========================================================================== */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
@keyframes ceiFichaEntra {
from {
opacity: 0;
transform: translateY(60px) scale(0.96);
}
to {
opacity: 1;
transform: none;
}
}
/* Sin mover: para lo que lleve un sticky dentro. */
@keyframes ceiFichaAparece {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#Content.Curso .Curso-seccion--bloque,
#Content.Curso .Curso-columna {
animation: ceiFichaEntra linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
/*
* El escalonado de las columnas: cada una termina de entrar un poco después
* que la anterior. No es un retardo —eso no existe aquí—, es un recorrido
* más largo.
*/
#Content.Curso .Curso-seccion--columnas > .Curso-columna:nth-child(1) {
animation-range: entry 0% cover 22%;
}
#Content.Curso .Curso-seccion--columnas > .Curso-columna:nth-child(2) {
animation-range: entry 0% cover 30%;
}
#Content.Curso .Curso-seccion--columnas > .Curso-columna:nth-child(3) {
animation-range: entry 0% cover 38%;
}
/*
* LO QUE LLEVE ALGO PEGADO DENTRO, SOLO OPACIDAD.
*
* Un `transform` convierte al ancestro en bloque contenedor y el
* `position: sticky` de dentro deja de pegarse a la ventana.
*
* CSS NO SABE PREGUNTAR «¿tienes dentro algo sticky?»: no hay selector que
* mire el estilo calculado de un descendiente. Así que esto es una LISTA A
* MANO, y hay que añadirle cualquier pieza pegada que se cree más adelante.
* Hoy solo existe una, la foto del bloque de empleo.
*/
/*
* LAS TARJETAS DE PROFESORADO, ESCALONADAS.
*
* Mismo truco que las columnas: no hay retardo que valga en una línea de
* tiempo de scroll, así que cada una acaba un poco más tarde que la
* anterior. La rejilla es de cuatro, así que el ciclo es de cuatro y se
* repite fila a fila —`nth-child(4n+1)` y siguientes—, que si no la
* vigésima tardaría veinte veces más que la primera.
*/
#Content.Curso .profe {
animation: ceiFichaEntra linear both;
animation-timeline: view();
animation-range: entry 0% cover 25%;
}
#Content.Curso .profe:nth-child(4n + 2) {
animation-range: entry 0% cover 30%;
}
#Content.Curso .profe:nth-child(4n + 3) {
animation-range: entry 0% cover 35%;
}
#Content.Curso .profe:nth-child(4n + 4) {
animation-range: entry 0% cover 40%;
}
/*
* LAS LISTAS DEL CONTENIDO, ENTRANDO POR LA IZQUIERDA.
*
* Solo dentro de `.contenido_cursos`, que es el texto editable de la ficha:
* fuera de ahí hay listas que son maquetación —el índice, las modalidades,
* las certificaciones— y verlas deslizarse sería ruido.
*
* El recorrido es corto (24px) y acaba pronto: una línea de texto que llega
* desde muy lejos se lee peor, no mejor.
*
* OJO AL DESBORDE: se mueve hacia la DERECHA desde -24px, así que nunca
* sale por el lado izquierdo de la pantalla; si fuera al revés haría falta
* recortar el contenedor.
*/
@keyframes ceiDesdeLaIzquierda {
from {
opacity: 0;
transform: translateX(-24px);
}
to {
opacity: 1;
transform: none;
}
}
#Content.Curso .contenido_cursos ul > li {
animation: ceiDesdeLaIzquierda linear both;
animation-timeline: view();
animation-range: entry 0% cover 25%;
}
#Content.Curso .Curso-seccion--bloque:has(.Empleo-figura),
#Content.Curso .Curso-seccion--bloque:has([data-pegado]),
#Content.Curso .Curso-columna:has(.Empleo-figura),
#Content.Curso .Curso-columna:has([data-pegado]) {
animation-name: ceiFichaAparece;
}
/* ----------------------------------------------------------------------
* LAS CELDAS, UNA DETRÁS DE OTRA (Eduardo, 16/09/2026)
*
* Cuatro secciones entraban de una pieza y ahora entra cada celda por su
* cuenta: la lista de «Gratis con tus estudios», la rejilla de datos
* básicos, la de preguntas frecuentes y las filas de la lámina de precio.
* Es lo que hace que se lean como una rejilla y no como un bloque.
*
* EL CONTENEDOR CEDE EL TURNO, y esto no es opcional: si entrara él Y
* ademas sus celdas se verían dos entradas superpuestas —el bloque
* apareciendo mientras sus piezas suben por dentro—, que es justo el
* aspecto de algo que va mal. De eso se encarga el bloque de después.
*
* El viaje es mas corto que el de un bloque —24px y sin escala— porque una
* celda pequeña que recorre 60px llama mas la atención que lo que dice.
* ------------------------------------------------------------------- */
@keyframes ceiCeldaEntra {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: none;
}
}
#Content.Curso :is(#gratis li, .Dato, .Faq > div, .Precio-fila) {
animation: ceiCeldaEntra linear both;
animation-timeline: view();
animation-range: entry 0% cover 25%;
}
/*
* El escalonado, en ciclos de cuatro, como el del profesorado: en una
* rejilla de varias columnas las celdas de una misma fila empiezan a la vez
* —tienen la misma altura en pantalla— y sin esto entrarían en bloque. Con
* los cuatro finales distintos la fila se dibuja en diagonal.
*/
#Content.Curso :is(#gratis li, .Dato, .Faq > div, .Precio-fila):nth-child(4n + 1) {
animation-range: entry 0% cover 25%;
}
#Content.Curso :is(#gratis li, .Dato, .Faq > div, .Precio-fila):nth-child(4n + 2) {
animation-range: entry 0% cover 30%;
}
#Content.Curso :is(#gratis li, .Dato, .Faq > div, .Precio-fila):nth-child(4n + 3) {
animation-range: entry 0% cover 35%;
}
#Content.Curso :is(#gratis li, .Dato, .Faq > div, .Precio-fila):nth-child(4n + 4) {
animation-range: entry 0% cover 40%;
}
/* Los cuatro contenedores que ceden el turno a sus celdas. */
#Content.Curso #gratis .Curso-seccion-cuerpo > ul,
#Content.Curso #caja .Curso-seccion-cuerpo > .borde_caja,
#Content.Curso #dia .Curso-seccion-cuerpo > .borde_caja,
#Content.Curso #precio {
animation: none;
}
/* ----------------------------------------------------------------------
* LA PRIMERA SECCIÓN NO ENTRA: YA ESTÁ (Eduardo, 16/09/2026)
*
* El contenido del curso y la galería que lo acompaña son lo primero que
* hay debajo de la cabecera, casi siempre a la vista antes de tocar la
* rueda. Animar lo que ya se está mirando no es una entrada: es un
* parpadeo, porque el CSS llega después del primer pintado y la pieza baja
* a atenuada para volver a subir. Es el mismo motivo por el que el mosaico
* de la home se quedó fuera de su revelado.
*
* Con dos identificadores en el selector le gana a todas las reglas de
* arriba —columnas, títulos, cuerpos y las listas del temario— sin
* necesidad de un !important.
* ------------------------------------------------------------------- */
#Content.Curso #contenido,
#Content.Curso #contenido * {
animation: none;
}
}
}
/* --------------------------------------------------------------------------
* TECNOLOGIAS Y HERRAMIENTAS (Eduardo, 01/10/2026)
*
* La seccion #herramientas de la ficha (meta-boxes, includes/herramientas.php):
* una fila de logotipos con su nombre, que pasan de linea cuando no caben. Sin
* titulos de grupo, sin cajas ni bordes, sin hover y sin el sello de la
* certificacion. Cada logotipo va en su color de marca (--Herramientas-marca,
* meta cei_color del termino) y en linea, en currentColor.
*
* TODO VALOR NUEVO ES UNA CUSTOM PROPERTY (cei-tokens.css, bloque «Herramientas
* e IA Powered») Y LOS TEXTOS LLEVAN SU CLASE Global-* EN EL MARCADO (Eduardo,
* 01/10/2026): aqui no hay tamaños de letra ni colores escritos a mano.
*
* style.css rellena TODOS los svg con fill:currentColor (linea 14): los de trazo
* de Tabler, que llegan con fill="none", salian como manchas negras; aqui se les
* devuelve el fill none.
*
* De momento la ven solo las cuentas de administracion (la seccion no se pinta
* para el resto), y por eso lleva el aviso de abajo.
* -------------------------------------------------------------------------- */
/*
* Un apartado por grupo padre de la taxonomia (Eduardo, 02/10/2026): el nombre
* del grupo, con Global-h4 en el marcado, y su rejilla debajo. Los valores de
* Global-h4 se repiten con tokens porque las reglas de titular de esta hoja
* pesan mas que la clase suelta (mismo caso que .Curso-seccion-ante).
*/
#Content.Curso .Herramientas {
display: flex;
flex-direction: column;
gap: var(--Herramientas-Grupo-Hueco);
}
/* Cada grupo es un panel del sistema (Eduardo, 02/10/2026: «algún estilo en base a
los componentes»): la misma lamina que la cabecera, la barra y los relacionados
—fondo gris o del area, radio de panel, relleno de titulo-contenido—. */
#Content.Curso .Herramientas-grupo {
padding: var(--Global-Espacio-TituloContenido);
border-radius: var(--Global-Radio-Panel);
background-color: var(--Curso-Color-Area, var(--Global-Color-Grey));
}
#Content.Curso .Herramientas-grupo-titulo {
margin: 0 0 var(--Herramientas-Grupo-Titulo);
color: var(--Global-Color-Black);
font-size: var(--Font-Size-20);
font-weight: var(--Font-Weight-400);
line-height: normal;
letter-spacing: var(--Font-Letter-spacing-2);
}
/* Una rejilla (Eduardo, 02/10/2026), no una fila que pasa de linea: columnas de
al menos --Herramientas-Columna, las que quepan, y los logotipos alineados. */
#Content.Curso ul.Herramientas-lista {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--Herramientas-Columna), 1fr));
gap: var(--Herramientas-Hueco);
}
/* Sin la flecha que style.css pone a las listas de las secciones (.seciones_cursos ul li). */
#Content.Curso .Herramientas-lista > li {
margin: 0;
padding: 0;
}
#Content.Curso .Herramientas-lista > li::before,
#Content.Curso .Herramientas-lista > li::marker {
content: none;
}
/* El nombre lleva Global-p en el marcado; aqui solo la composicion. */
#Content.Curso .Herramientas-chip {
display: inline-flex;
align-items: center;
gap: var(--Herramientas-Separacion);
color: var(--Global-Color-Black);
}
#Content.Curso .Herramientas-icono,
#Content.Curso .Herramientas-icono svg {
display: block;
width: var(--Herramientas-Logo);
height: var(--Herramientas-Logo);
flex: none;
}
#Content.Curso .Herramientas-icono svg {
color: var(--Herramientas-marca, currentColor);
}
#Content.Curso .Herramientas-icono svg[fill="none"] {
fill: none;
}
/*
* El aviso lleva Global-p--small en el marcado, pero la regla general de parrafo
* de esta hoja (#Content.Curso p) pesa mas que la clase y lo dejaba en 19px
* (medido en la web el 01/10/2026). Se repiten aqui los valores de la clase,
* con sus tokens, como hace esta hoja con Global-h4.
*/
#Content.Curso .Herramientas-aviso {
margin: 0;
color: var(--Global-Color-Grey-Secondary);
font-size: var(--Font-Size-14);
font-weight: var(--Font-Weight-400);
line-height: normal;
letter-spacing: var(--Font-Letter-spacing-2);
}
@media (max-width: 767.98px) {
#Content.Curso .Herramientas {
gap: var(--Herramientas-Grupo-Hueco-Movil);
}
#Content.Curso ul.Herramientas-lista {
grid-template-columns: repeat(auto-fill, minmax(var(--Herramientas-Columna-Movil), 1fr));
gap: var(--Herramientas-Hueco-Movil);
}
#Content.Curso .Herramientas-icono,
#Content.Curso .Herramientas-icono svg {
width: var(--Herramientas-Logo-Movil);
height: var(--Herramientas-Logo-Movil);
}
}
/* --------------------------------------------------------------------------
* IA POWERED (Eduardo, 01/10/2026)
*
* La lamina #ia-powered, solo en las fichas con alguna herramienta de IA: el
* titulo (Global-h3) y el texto (el propio de la ficha o el general) y debajo
* la marquesina de logotipos en lentes de vidrio, sobre el espacio de la IA
* (--Area-IA-Primary → --Area-IA-Secondary), como los bloques de Fundae y de
* empleo tienen el suyo. Es un bloque del sistema: la seccion no pinta titulo
* fuera.
* -------------------------------------------------------------------------- */
#Content.Curso .IaPowered {
position: relative; /* el cristal, cuando este activo, se asoma por la esquina */
padding: var(--IaPowered-Relleno);
border-radius: var(--Global-Radio-Panel);
/*
* EL ESPACIO DE LA IA (Eduardo, 01/10/2026: «que sea mas espacio, color
* negro»; antes, un atardecer, por una referencia de una pompa de cristal
* iridiscente sobre un cielo con estrellas). Del negro (--Area-IA-Primary) al
* indigo oscuro (--Area-IA-Secondary), con una nebulosa tenue violeta arriba a
* la derecha, otra verdosa abajo a la izquierda y un polvo de estrellas: un
* SVG de 400px con 34 puntos que se repite. Texto en blanco.
*/
color: var(--Global-Color-White);
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Ccircle cx='169' cy='81' r='1.4' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='41' cy='278' r='0.7' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='302' cy='33' r='0.9' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='48' cy='226' r='1.4' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='127' cy='50' r='1.4' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='293' cy='67' r='0.9' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='299' cy='303' r='1.4' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='117' cy='27' r='0.9' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='218' cy='77' r='0.7' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='290' cy='353' r='0.9' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='301' cy='296' r='0.9' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='53' cy='284' r='0.7' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='320' cy='109' r='1.4' fill='%23fff' fill-opacity='0.9'/%3E%3Ccircle cx='164' cy='242' r='1.4' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='157' cy='131' r='0.9' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='45' cy='298' r='1.1' fill='%23fff' fill-opacity='0.9'/%3E%3Ccircle cx='179' cy='377' r='1.4' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='315' cy='41' r='0.7' fill='%23fff' fill-opacity='0.9'/%3E%3Ccircle cx='88' cy='391' r='1.1' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='254' cy='219' r='0.7' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='395' cy='289' r='1.1' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='359' cy='183' r='1.4' fill='%23fff' fill-opacity='0.9'/%3E%3Ccircle cx='39' cy='51' r='1.1' fill='%23fff' fill-opacity='0.9'/%3E%3Ccircle cx='360' cy='344' r='0.7' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='378' cy='363' r='1.1' fill='%23fff' fill-opacity='0.9'/%3E%3Ccircle cx='149' cy='370' r='1.4' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='15' cy='240' r='1.1' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='316' cy='63' r='1.4' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='115' cy='151' r='0.9' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='207' cy='204' r='1.4' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='89' cy='233' r='1.4' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='74' cy='224' r='1.1' fill='%23fff' fill-opacity='0.9'/%3E%3Ccircle cx='187' cy='353' r='1.4' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='81' cy='46' r='0.9' fill='%23fff' fill-opacity='0.5'/%3E%3C/svg%3E") repeat,
radial-gradient(55% 60% at 90% 10%, var(--IaPowered-Nebulosa-1), transparent 70%),
radial-gradient(60% 50% at 5% 95%, var(--IaPowered-Nebulosa-2), transparent 70%),
linear-gradient(180deg, var(--Area-IA-Primary) 0%, var(--IaPowered-Medio) 60%, var(--Area-IA-Secondary) 100%);
}
/* El titulo del bloque, dentro de la lamina como en los bloques del sistema
(lleva Global-h3 en el marcado). */
#Content.Curso .IaPowered-titulo {
margin: 0 0 var(--Global-Espacio-TituloContenido);
color: var(--Global-Color-White);
}
/* El texto, en blanco: la regla de parrafos de esta hoja lo pondria en negro. */
#Content.Curso .IaPowered-texto,
#Content.Curso .IaPowered-texto p,
#Content.Curso .IaPowered-texto li {
color: var(--Global-Color-White);
}
#Content.Curso .IaPowered-texto > p:last-child {
margin-bottom: 0;
}
/*
* EL CRISTAL 3D (Eduardo, 01/10/2026), superpuesto en la esquina superior
* derecha de la lamina y asomando por fuera. DESACTIVADO DE MOMENTO (el plugin
* no pinta el hueco: filtro cei_master_ia_powered_cristal); estas reglas quedan
* para cuando se encienda. El texto deja sitio a la derecha para no quedar debajo.
*/
#Content.Curso .IaPowered-cristal {
position: absolute;
top: calc(var(--IaPowered-Cristal) * -0.22);
right: calc(var(--IaPowered-Cristal) * -0.18);
width: var(--IaPowered-Cristal);
height: var(--IaPowered-Cristal);
pointer-events: none; /* el parallax lo escucha la lamina entera */
}
#Content.Curso .IaPowered-cristal canvas {
display: block;
position: relative;
width: 100%;
height: 100%;
}
/* El halo de la pompa: una luz difusa detras. */
#Content.Curso .IaPowered-cristal::before {
content: "";
position: absolute;
inset: 12%;
border-radius: 50%;
background: radial-gradient(circle, var(--IaPowered-Brillo), var(--IaPowered-Velo) 55%, transparent 72%);
filter: var(--IaPowered-Halo-Desenfoque);
}
#Content.Curso .IaPowered--cristal .IaPowered-texto,
#Content.Curso .IaPowered--cristal .IaPowered-titulo {
padding-right: calc(var(--IaPowered-Cristal) * 0.75);
}
/* Sin WebGL (o si el modulo no carga), el cargador marca la lamina y el hueco se
retira: el texto recupera el ancho. */
#Content.Curso .IaPowered--sin-cristal .IaPowered-cristal {
display: none;
}
#Content.Curso .IaPowered--sin-cristal .IaPowered-texto,
#Content.Curso .IaPowered--sin-cristal .IaPowered-titulo {
padding-right: 0;
}
/*
* LA MARQUESINA DE LOGOTIPOS (Eduardo, 01/10/2026): «solo los logos en circulos
* y en modo carrusel como en la home v2». La misma mecanica que la fila de
* empresas de css/bloques/empleo.css: dos copias de la lista, la pista se
* desplaza la mitad de su ancho en bucle, se para al pasar el raton y no se
* mueve si el usuario pidio menos movimiento (entonces se desplaza a mano). La
* fila sangra hasta los bordes de la lamina y se desvanece antes de llegar a
* ellos: ningun circulo asoma cortado.
*/
#Content.Curso .IaPowered-logos {
margin: var(--IaPowered-Separacion) calc(var(--IaPowered-Relleno) * -1) 0;
padding: 0 var(--IaPowered-Relleno);
overflow-x: auto;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, transparent, var(--Global-Color-Black) 14%, var(--Global-Color-Black) 86%, transparent);
mask-image: linear-gradient(90deg, transparent, var(--Global-Color-Black) 14%, var(--Global-Color-Black) 86%, transparent);
}
#Content.Curso .IaPowered-logos::-webkit-scrollbar {
display: none;
}
#Content.Curso .IaPowered-pista {
display: flex;
width: max-content;
}
#Content.Curso .IaPowered .IaPowered-lista {
display: flex;
gap: var(--IaPowered-Hueco);
margin: 0;
padding: 0 calc(var(--IaPowered-Hueco) / 2) 0 0;
list-style: none;
}
/*
* LIQUID GLASS, EL DE LA WEB (Eduardo, 01/10/2026: «las burbujas no usan el mismo
* sistema que el resto de elementos con liquid glass, no se notan»). Cada
* logotipo va en una lente con la receta de los paneles de la barra de
* navegacion y del aviso de cookies, pero sin el velo blanco (Eduardo,
* 02/10/2026): el fondo desenfocado y saturado (--Global-Vidrio-Blur), la
* sombra de los paneles con su filo de luz, y en los
* motores Blink —la clase cei-has-liquidGlass que pone el JS de la cabecera en
* el body— la refraccion del filtro #CeiLiquidGlass, que la cabecera imprime en
* todas las paginas. La lente mide 200px y el logotipo 80 (tokens IaPowered-*):
* «mas grandes aun manteniendo el logo».
*/
#Content.Curso .IaPowered-circulo {
position: relative;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: var(--IaPowered-Circulo);
height: var(--IaPowered-Circulo);
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
/* Sin color de fondo (Eduardo, 02/10/2026): la lente es solo lo que hace el
backdrop-filter con el espacio de detras, y el logotipo encima a plena
opacidad. */
background: transparent;
-webkit-backdrop-filter: var(--Global-Vidrio-Blur);
backdrop-filter: var(--Global-Vidrio-Blur);
box-shadow: var(--IaPowered-Lente-Sombra);
list-style: none;
}
body.cei-has-liquidGlass #Content.Curso .IaPowered-circulo {
backdrop-filter: var(--Global-Vidrio-Blur) url(#CeiLiquidGlass);
}
#Content.Curso .IaPowered-circulo::before,
#Content.Curso .IaPowered-circulo::marker {
content: none;
}
/*
* Sobre el espacio los logotipos van en blanco y a plena opacidad (Eduardo,
* 02/10/2026): varios son negros (GitHub Copilot, Claude Code) y se perderian.
*/
#Content.Curso .IaPowered-logo,
#Content.Curso .IaPowered-logo svg {
position: relative;
display: block;
width: var(--IaPowered-Logo);
height: var(--IaPowered-Logo);
}
#Content.Curso .IaPowered-logo svg {
color: var(--Global-Color-White);
opacity: 1;
}
#Content.Curso .IaPowered-logo svg[fill="none"] {
fill: none;
}
@media (prefers-reduced-motion: no-preference) {
@keyframes ceiIaMarquesina {
to {
transform: translateX(-50%);
}
}
#Content.Curso .IaPowered-logos {
overflow-x: hidden;
}
#Content.Curso .IaPowered-pista {
animation: ceiIaMarquesina var(--IaPowered-Marquesina) linear infinite;
}
#Content.Curso .IaPowered-logos:hover .IaPowered-pista {
animation-play-state: paused;
}
}
@media (max-width: 767.98px) {
#Content.Curso .IaPowered {
padding: var(--IaPowered-Relleno-Movil);
}
#Content.Curso .IaPowered-logos {
margin: var(--IaPowered-Separacion) calc(var(--IaPowered-Relleno) * -0.67) 0;
padding: 0 calc(var(--IaPowered-Relleno) * 0.67);
}
#Content.Curso .IaPowered-circulo {
width: var(--IaPowered-Circulo-Movil);
height: var(--IaPowered-Circulo-Movil);
}
#Content.Curso .IaPowered-logo,
#Content.Curso .IaPowered-logo svg {
width: var(--IaPowered-Logo-Movil);
height: var(--IaPowered-Logo-Movil);
}
#Content.Curso .IaPowered-cristal {
width: var(--IaPowered-Cristal-Movil);
height: var(--IaPowered-Cristal-Movil);
top: calc(var(--IaPowered-Cristal-Movil) * -0.25);
right: calc(var(--IaPowered-Cristal-Movil) * -0.2);
}
#Content.Curso .IaPowered--cristal .IaPowered-texto,
#Content.Curso .IaPowered--cristal .IaPowered-titulo {
padding-right: calc(var(--IaPowered-Cristal-Movil) * 0.6);
}
}
/*
* HERRAMIENTAS E «IA POWERED» EN DOS COLUMNAS (Eduardo, 01/10/2026): el mismo
* mecanismo de columnas de certificaciones y diplomas (secciones.php); aqui solo
* se alinean por arriba, para que la lamina no se estire con la lista.
*/
#Content.Curso .Curso-seccion--herramientas {
align-items: start;
}
/* --------------------------------------------------------------------------
* INSIGNIA «IA POWERED» DE LA CABECERA (Eduardo, 01/10/2026)
*
* Bajo el titulo de la ficha, solo en las que trabajan herramientas de IA. Es
* la etiqueta del sistema (manual de marca: pastilla de 4 × 12, Size-14 —la
* clase Global-p--small va en el marcado—, radio 999, Destacado con texto
* blanco). Desde el 02/10/2026 es una pastilla por herramienta de IA, «IA Powered
* with [logo] ChatGPT» (Eduardo), hasta dos, y baja a la seccion #ia-powered.
* Sin hover.
* -------------------------------------------------------------------------- */
#Content.Curso .Curso-iaBadges {
display: flex;
flex-wrap: wrap;
gap: var(--Herramientas-Insignia-Hueco);
margin: calc(var(--Global-Espacio-TituloContenido) / 2) 0 0;
}
#Content.Curso .Curso-iaBadge {
display: inline-flex;
align-items: center;
align-self: flex-start; /* la columna de la cabecera estira a sus hijos; la pastilla mide lo que su texto */
width: fit-content;
gap: calc(var(--Global-Espacio-TituloContenido) / 4);
margin: 0;
padding: calc(var(--Global-Espacio-TituloContenido) / 6) calc(var(--Global-Espacio-TituloContenido) / 2);
border-radius: var(--Global-Radio-Pastilla);
background: var(--Global-Destacado);
color: var(--Global-Color-White);
text-decoration: none; /* la letra, la de Global-p--small del marcado, sin retoques */
}
#Content.Curso .Curso-iaBadge-icono,
#Content.Curso .Curso-iaBadge-icono svg {
display: block;
width: var(--Herramientas-Insignia-Icono);
height: var(--Herramientas-Insignia-Icono);
color: inherit;
}
/* El de OpenAI es de trazo (fill none); los de Simple Icons, glifos que se rellenan. */
#Content.Curso .Curso-iaBadge-icono svg[fill="none"] {
fill: none;
}