Máster de Diseño Gráfico
← título */ 360h (6-7 meses)
← metadatos *Presencial
*sin estilo propio alcanzable: * * · El título se fijaba con .enlace_cada_curso_home repetida tres veces MÁS * !important, para ganarle a una regla que solo pedía (0,1,1). Ahora basta * una clase, porque las reglas de área ya no declaran grosor. * · Los metadatos los pintaba un style="font-size:120%" escrito 146 veces en * pagina_inicio.php, que se imponía a cualquier hoja. Por eso el * font-size: var(--font-30) que tenían en style.css era código muerto: nunca * llegó a aplicarse. Fuera los 146; el tamaño ya sale de aquí. * 19.2px (16 × 120%) pasa a 19px, que es Size-19. * -------------------------------------------------------------------------- */ .enlace_cada_curso_home > p { font-family: var(--Font-Family-Primary); font-size: var(--Font-Size-32); font-weight: var(--Font-Weight-400); line-height: var(--Font-Line-height-110); letter-spacing: var(--Font-Letter-spacing-2); } .enlace_cada_curso_home > div > p { font-family: var(--Font-Family-Primary); font-size: var(--Font-Size-19); font-weight: var(--Font-Weight-400); line-height: normal; letter-spacing: var(--Font-Letter-spacing-0); } /* * Esquinas de las tarjetas de formación (Eduardo, 16/09/2026). * * El 08/09/2026 se dejaron a escuadra porque el mosaico de arriba lo estaba, y * dos superficies seguidas con criterios distintos cantan. Pero el mosaico ha * vuelto al ancho contenido y con su radio de panel, asi que el motivo se cayo: * ahora la que desentonaba era la tarjeta cuadrada. * * Radio de TARJETA, no de panel: estas son tarjetas —el token lo dice— y en el * bloque de al lado el panel de la escuela y la lamina de Fundae, que son * superficies grandes, se quedan con los 16. Una pieza pequeña con el mismo * radio que la lamina que la contiene se ve mas redonda de lo que es. * * La regla sigue acotada al carrusel de la home: `.swiper-slide` es la clase de * Swiper y la llevan tambien las dos landings, que tienen su propia escala. * El overflow se queda: es lo que recorta la imagen contra el radio. */ .swiper-container_home .swiper-slide { border-radius: var(--Global-Radio-Tarjeta); overflow: hidden; } /* -------------------------------------------------------------------------- * Panel «La escuela líder del sector» * * El color iba escrito a mano en el marcado (#b6b37a, la variante oscura del * área de Marketing) con un style en línea, igual que los 146 tamaños de las * tarjetas. Ahora sale del token del área, y gana las esquinas del resto de * superficies. * -------------------------------------------------------------------------- */ .Home-panelEscuela { box-sizing: border-box; /* El mismo relleno que la lamina de Fundae, para que el texto de las dos arranque en la misma vertical. Iba en linea en el HTML (30px). */ padding: var(--Global-Espacio-TituloContenido); background-color: var(--Area-Marketing-Oscuro); border-radius: var(--Global-Radio-Panel); } /* * La seccion del constructor que lo envuelve traia en linea 30px de relleno a * los lados y 60 arriba: el panel quedaba 30px mas adentro que el resto de * bloques de la home (Fundae, Actualidad, los carruseles), todos al margen de * pagina. Fuera los laterales; arriba, el espacio de grupo del sistema. */ .Home-escuela { padding: var(--Global-Espacio-Grupo) 0 0 !important; /* el tema pone su propio relleno a .section */ } /* El comportamiento de los carruseles en móvil (scroll lateral) vive en css/cei-componentes.css: lo comparten la home y las áreas, y también cuántas tarjetas caben. Iban de dos en dos aquí (45% cada una); desde el 07/09/2026 (Eduardo) van de una en una, como en las áreas: el 85% compartido, con la siguiente asomando para que se vea que el carrusel sigue. */ /* -------------------------------------------------------------------------- * Atenuar el resto del mosaico al sobrevolar una pieza * * Se atenúa con filter y no con opacity, aunque el efecto sea el mismo: la * pieza ya usa la propiedad opacity para su animación de entrada, y una * animación gana a cualquier declaración normal. El filtro es una propiedad * distinta, así que los dos conviven sin pisarse. * * El mismo filtro lleva un desenfoque (Eduardo, 07/09/2026): 2px, lo justo * para que la pieza que no se sobrevuela se lea como fondo sin llegar a * mancharse. Va en el mismo `filter` que la opacidad, en un solo valor, porque * dos declaraciones de filter se pisan. * * Dentro de @media (hover: hover) para que en táctil, donde el hover se queda * pegado tras un toque, no se quede medio mosaico atenuado. * -------------------------------------------------------------------------- */ @media (hover: hover) { /* Solo los dos mosaicos de la derecha. El video de fondo y la banda del claim no se atenuan: son el fondo de la cabecera, no piezas navegables. */ .Home .Home-column.Gif, .Home .Home-column.Nueva { transition: filter 0.3s ease; } .Home:hover .Home-column.Gif, .Home:hover .Home-column.Nueva { filter: opacity(0.5) blur(2px); } .Home .Home-column.Gif:hover, .Home .Home-column.Nueva:hover { filter: opacity(1) blur(0); } /* Sin desenfoque para quien ha pedido menos movimiento: el cambio de foco entre piezas es lo bastante brusco como para molestar. */ @media (prefers-reduced-motion: reduce) { .Home:hover .Home-column.Gif, .Home:hover .Home-column.Nueva { filter: opacity(0.5); } } } /* -------------------------------------------------------------------------- * Ritmo vertical en móvil * * El botón «Más estudios…» desaparece por debajo de 768. No se pierde nada: * el título del área ya es un enlace al mismo sitio. Lo que se gana es sitio, * porque ahí la fila se partía en dos líneas y ocupaba 120px —147 cuando el * texto envolvía— para repetir un destino que ya estaba encima. * * Con el botón fuera, la fila queda solo con el título y el ritmo se puede * apoyar en el mismo valor que separa cualquier título de su contenido: 24 * hasta las tarjetas y el doble hasta el área siguiente. * -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- * TABLETA EN VERTICAL: EL BOTON DEL AREA, MAS PEQUEÑO * * En un iPad Mini —768 justos, que se queda fuera de la regla de abajo por dos * centesimas— el titulo del area y su «Más estudios de…» no caben en la misma * linea: el boton se iba debajo y la fila pasaba de 81 a 118 px, repitiendo un * destino que ya esta en el titulo. * * Con el boton a 14 y con menos aire se queda al lado del titulo —«Diseño * gráfico» mide 232 y el boton baja de 454 a 355, que caben en los 694 * disponibles— y la fila vuelve a 76 (Eduardo, 14/09/2026). * * De 900 para arriba no hace falta: ahi ya cabia a tamaño normal. * -------------------------------------------------------------------------- */ /* * `:not(:has(h2, h4))` separa el boton del enlace del titulo. El titulo de area * era un h4 y pasa a h2 (05/10/2026, PageSpeed: «los encabezados no siguen un * orden descendente»); el h4 se queda en el selector por las paginas de area * que lo llevan escrito en el contenido. */ @media (min-width: 768px) and (max-width: 900px) { .mas_cursos > a:not(:has(h2, h4)) { padding: 8px 16px; font-size: var(--Font-Size-14); } } @media (max-width: 767.98px) { .mas_cursos > a:not(:has(h2, h4)) { display: none; } /* * El aire entre un área y la siguiente se pone ENCIMA del título, no debajo * del carrusel. La distancia entre áreas es la misma, pero así la tiene * también la primera: el mosaico terminaba y el título de «Diseño gráfico» * arrancaba pegado a él, sin nada en medio, porque el único espacio venía * del margen inferior del carrusel anterior —y antes de la primera área no * hay carrusel. */ .mas_cursos { padding: 0; } /* ------------------------------------------------------------------------ * Tarjetas de formación, todas del mismo alto * * Cada tarjeta media lo que pedia su titulo: medidas en un carrusel, 246, * 273 y 299 mezcladas, con el borde inferior a distinta altura en cada una. * * `align-items: stretch` deberia bastar, y no bastaba: la hoja de Swiper * declara `.swiper-slide { height: 100% }`, y una altura explicita anula el * estirado. Por eso hay que devolverla a `auto` para que el estirado pueda * actuar, y pasarle el 100% al hijo, que es quien pinta la superficie. * * Asi cada carrusel se iguala por SU tarjeta mas alta, no por un valor fijo: * medido, 299 / 299 / 326 / 332 / 299 en los cinco primeros, y cero * desbordamiento en todos. * * No son cuadradas, y no pueden serlo: la tarjeta mas larga de la home * necesita 405px de alto con 153 de ancho, asi que para ser cuadrada tendria * que medir 405 de ancho, el 113% del carrusel entero. Cuadrarlas obligaria * a una tarjeta por pantalla en vez de dos. * --------------------------------------------------------------------- */ .swiper-container_home .swiper-wrapper { align-items: stretch; } .swiper-container_home .swiper-slide { height: auto; } .swiper-container_home .swiper-slide > * { height: 100%; } /* ------------------------------------------------------------------------ * Fuera el bloque naranja de «La escuela líder del sector» * * Es marcado solo de móvil (.texto_pos_mobile, en pagina_inicio.php) que * repite un contenido que ya está justo debajo en el bloque gris. Y estaba * roto: 360px de alto fijo con overflow-y: scroll, así que el texto se * cortaba a media frase y había que desplazarlo dentro de la caja. * * Se oculta en vez de borrarlo del marcado: el contenido es el mismo que el * del bloque que se queda, así que no se pierde nada, y al colapsar su * columna la página baja 380px. En escritorio ya estaba oculto. * * La regla está fuera de este @media, más abajo: style.css lo enseña hasta * 1023px. * --------------------------------------------------------------------- */ } /* * El bloque naranja de arriba, oculto en todos los anchos (05/10/2026). Solo * se quitaba por debajo de 768px y style.css lo seguía enseñando de 768 a * 1023px: en tablet salía la caja de 360px con el texto cortado y, además, * con poco contraste (rosa sobre naranja, 2,76:1; blanco sobre naranja, * 4,32:1; PageSpeed en escritorio con la ventana estrecha). Su contenido está * entero en el bloque gris de debajo (#acordeon). */ .texto_pos_mobile { display: none; } /* -------------------------------------------------------------------------- * Titulos de bloque de la home, los tres iguales (Eduardo, 06/09/2026): el * area sobre cada carrusel (h2.title_cursos_home), «Actualidad» y «Formacion * bonificable». El tipo lo pone la clase Global-h2 en el marcado * (css/cei-base.css); aqui solo el margen y el color. El de area iba * subrayado por ser enlace: el subrayado queda para el hover. * -------------------------------------------------------------------------- */ .title_cursos_home, .Noticias-titulo, .Home-fundae .Fundae-titulo { margin: 0; color: var(--Global-Color-Black); } .mas_cursos > a:has(> .title_cursos_home) { color: var(--Global-Color-Black); text-decoration: none; } .mas_cursos > a:has(> .title_cursos_home):hover .title_cursos_home { text-decoration: underline; } /* El bloque de Fundae, debajo de la actualidad, al mismo carril. */ .Home-fundae { margin: var(--Global-Espacio-Grupo) 0 0; } /* -------------------------------------------------------------------------- * EL MOSAICO, OTRA VEZ DENTRO DEL MARGEN Y CON ESQUINAS (Eduardo, 16/09/2026) * * Se habia quedado a sangre: 1.684 px en una ventana de 1.694, o sea todo el * ancho, y con las esquinas a escuadra. Era el rastro de la prueba del * 08/09/2026 —la de poner todas las superficies a escuadra—, que se deshizo en * los tokens pero no aqui. * * Vuelve al margen de la pagina, y desde el 16/09/2026 POR EL TOKEN y no por * un numero: `--Global-Margen-Pagina`. * * Estaba clavado en 60 porque era donde empezaban entonces el resto de bloques * de la home. Pero ese 60 no era suyo: salia del mismo token, que era una rampa * fluida. Al pasar el margen del sitio a 20 px fijos, el mosaico se habria * quedado 40 px por dentro de la cabecera y de las secciones de abajo —que si * siguen al token: `.section_wrapper` y `#Content` lo usan en * css/cei-header-admin.css—. Apuntando al token va donde vayan los demas, hoy * y el dia que vuelva a cambiar. * * El `overflow: hidden` ya lo tenia y es lo que hace que el radio recorte de * verdad las piezas de dentro; sin el, las esquinas se verian cuadradas * igualmente. * -------------------------------------------------------------------------- */ .Home { --Home-margen: var(--Global-Margen-Pagina); width: calc(100% - var(--Home-margen) * 2); margin-inline: auto; border-radius: var(--Global-Radio-Panel); } /* * Aqui habia un margen propio de 16 px para el telefono, porque con los 60 de * escritorio en una pantalla de 375 quedaba menos de la mitad para el mosaico. * Con el token —20 px en todos los anchos— ya no hace falta. */ /* -------------------------------------------------------------------------- * EL MOSAICO SE ABRE AL DESPLAZAR (Eduardo, 16/09/2026) * * Empieza en su sitio —dentro del margen de página, como el resto de bloques— y * durante los primeros 500 px de scroll se abre hasta tocar los dos bordes de * la ventana. Acaba siendo más ancho que todo lo demás de la página, que es el * gesto que se pedía. Lo lleva el navegador con una animación atada al scroll, * sin JavaScript. * * SE ANIMA EL ANCHO, NO UN `scale`, Y ESA ES LA CLAVE DEL SCROLL LATERAL. * * Con `transform: scale()` habría que saber cuánto agrandar, y ese número * depende del ancho de la ventana: para pasar de los 40 px de margen al borde * hace falta un 1,03 en una pantalla de 1400 y un 1,12 en una de 375. Cualquier * valor fijo se queda corto en una y se pasa en la otra, y pasarse significa * exactamente barra de scroll horizontal —el `transform` saca la pieza de su * caja sin que el documento se entere—. * * Animando el ancho de `calc(100% - margen*2)` a `100%`, el destino ES el ancho * del contenedor: no hay forma de pasarse, en ninguna pantalla y sin tener que * recortar nada con `overflow`. Cuesta un reflujo por fotograma en vez de una * composición, pero es un solo elemento. * * TRES GUARDAS: * * · `@supports`, porque sin `animation-timeline` el navegador se quedaría con * el primer fotograma —que aquí, por suerte, es el tamaño normal—; * · `prefers-reduced-motion`, que esto es movimiento y del grande; * · el rango en píxeles y no en porcentaje del documento, para que dure lo * mismo en una home larga que en una corta. * -------------------------------------------------------------------------- */ @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { @keyframes ceiHomeSeAbre { from { width: calc(100% - var(--Home-margen) * 2); } to { width: 100%; } } .Home { animation: ceiHomeSeAbre linear both; animation-timeline: scroll(); animation-range: 0 500px; } } }