/** * cifp.css — SOLO comportamiento y estados. * * Aqui NO hay ni un color, ni una tipografia, ni un tamano de fuente, ni un * espaciado, ni un radio. Todo eso sale de los controles de Elementor y de la * paleta global, o el cliente no lo puede cambiar (CLAUDE.md 6 y 9.3). * * Lo que si vive aqui: * - que un panel este oculto o visible * - el estado inicial y final de las entradas al hacer scroll * - que una pista desborde en horizontal en vez de partir * - que el scroll del carrusel se ajuste a las tarjetas * * La duracion y el easing salen de las variables del proyecto, no escritas * aqui: `estilos-runtime.php` las emite desde los globales. */ :root { --kit-ease: cubic-bezier( 0.16, 1, 0.3, 1 ); --kit-dur: 600ms; --kit-dur-corta: 260ms; --kit-retardo: 0ms; } @media (max-width: 767px) { :root { --kit-dur: 400ms; } } /* ── Entradas al hacer scroll ───────────────────────────────── * El estado inicial SOLO se aplica si tiene .kit-anim, que pone el * propio script. Si el JS falla, el contenido queda visible y legible. */ .kit-anim [class*="kit-entra"] { opacity: 0; transition: opacity var(--kit-dur) var(--kit-ease) var(--kit-retardo), transform var(--kit-dur) var(--kit-ease) var(--kit-retardo); will-change: opacity, transform; } .kit-anim .kit-entra-arriba { transform: translateY( 28px ); } .kit-anim .kit-entra-arriba-corto { transform: translateY( 16px ); } .kit-anim .kit-entra-fundido { transform: none; } .kit-anim .kit-entra-izq { transform: translateX( -32px ); } .kit-anim .kit-entra-der { transform: translateX( 32px ); } .kit-anim [class*="kit-entra"].kit-dentro { opacity: 1; transform: none; } /* La regla bajo los titulares crece desde la izquierda. */ .kit-anim .kit-regla > * { transform: scaleX( 0 ); transform-origin: left center; transition: transform var(--kit-dur) var(--kit-ease) var(--kit-retardo); } .kit-anim .kit-regla.kit-dentro > * { transform: none; } /* El corchete decorativo se traza de arriba abajo, nunca aparece de golpe. El efecto va en el HIJO: un clip-path sobre el nodo observado deja su caja a cero y el IntersectionObserver no dispara nunca. */ .kit-anim .kit-trazo > * { clip-path: inset( 0 0 100% 0 ); transition: clip-path 900ms var(--kit-ease) var(--kit-retardo); } .kit-anim .kit-trazo.kit-dentro > * { clip-path: inset( 0 0 0 0 ); } /* ── Hero ───────────────────────────────────────────────────── * Las diapositivas las mueve el widget de carrusel (Swiper): aquí NO se * posiciona nada. Hubo una versión propia con las diapositivas apiladas en * absolute, y al pasar al widget nativo ese posicionado rompía el carrusel. */ /* ── Paneles que se abren ─────────────────────────────────── */ .kit-desplegable-panel, .kit-areas-lista, .kit-wa-panel { display: none; } .kit-desplegable.kit-abierto .kit-desplegable-panel, .kit-areas.kit-abierto .kit-areas-lista, .kit-wa.kit-abierto .kit-wa-panel { display: flex; } /* El menu movil a pantalla completa. */ .kit-menu-panel { display: none; } .kit-menu-panel.kit-panel-abierto { display: flex; } /* El modal del temario. */ .kit-modal { display: none; } .kit-modal.kit-modal-abierto { display: flex; } /* Pestanas de equipo. */ .kit-panel { display: none; } .kit-panel.kit-panel-visible { display: flex; } /* ── Pistas con desbordamiento horizontal ───────────────────── * overflow-y en hidden a proposito: con `auto` el navegador hace el eje Y * tambien desplazable, la pista se come la rueda vertical y la pagina no * scrollea si el puntero esta sobre una tarjeta. */ .kit-tira-pista, .kit-pista { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .kit-tira-pista::-webkit-scrollbar, .kit-pista::-webkit-scrollbar { display: none; } .kit-pista { scroll-snap-type: x mandatory; } .kit-pista > * { scroll-snap-align: start; flex-shrink: 0; } /* La lista de areas desborda en vertical con scroll propio. */ .kit-areas-lista { overflow-y: auto; overscroll-behavior: contain; } /* ── Enlace de salto al contenido ───────────────────────────── * Visible solo al enfocarlo con el teclado. */ .kit-salto:not(:focus):not(:active) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset( 50% ); white-space: nowrap; } /* ── Preferencia de movimiento reducido ───────────────────── */ @media (prefers-reduced-motion: reduce) { .kit-anim [class*="kit-entra"], .kit-anim .kit-regla > *, .kit-anim .kit-trazo > * { opacity: 1; transform: none; clip-path: none; transition: none; } .kit-tira-pista, .kit-pista { scroll-behavior: auto; } } /* ── Subrayado que crece desde la izquierda ─────────────────── * El gesto de los enlaces del React. Es un EFECTO, no un color: usa * currentColor, asi que sigue el color que el cliente ponga en el panel. */ .kit-enlace a, .kit-enlace .elementor-heading-title { position: relative; display: inline-block; } .kit-enlace .elementor-heading-title::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX( 0 ); transform-origin: left center; transition: transform var(--kit-dur-corta) var(--kit-ease); } .kit-enlace:hover .elementor-heading-title::after, .kit-enlace:focus-within .elementor-heading-title::after { transform: scaleX( 1 ); } /* ── Panel del modal ────────────────────────────────────────── * El alto maximo y el scroll interno son lo que hace que un temario de 23 * modulos quepa en pantalla. Es comportamiento, no aspecto: el color, el * radio y la sombra del panel salen de sus controles en Elementor. */ .kit-modal-panel { max-height: 86vh; } .kit-modal-cuerpo { overflow-y: auto; overscroll-behavior: contain; } @media (max-width: 639px) { .kit-modal { align-items: flex-end; padding: 0; } .kit-modal-panel { max-height: 92vh; } } /* El icono en linea que devuelve el tag del area: hereda color y tamano. */ .kit-icono-linea svg { width: 1em; height: 1em; display: block; } /* ── Estado vacío junto a un carrusel ───────────────────────── * El widget de carrusel no tiene mensaje de «nada encontrado» (el de rejilla * sí). La tarjeta de estado vacío se maqueta en Elementor y aquí solo se * decide CUÁNDO se ve: si el carrusel hermano trae diapositivas, sobra. */ .kit-vacio { display: none; } .carrusel:not(:has(.swiper-slide)) + .kit-vacio { display: flex; } /* Sin :has (navegadores viejos), se ve siempre en vez de no verse nunca: mejor un bloque de más que una sección que parece rota. */ @supports not selector(:has(*)) { .kit-vacio { display: flex; } } /* ── Figura del hero ────────────────────────────────────────── * Se apoya en el borde inferior y se recorta por arriba si hace falta. La * sombra proyectada sigue el ALFA del recorte, no la caja de la imagen: por * eso es drop-shadow y no box-shadow. El color y el desenfoque salen del * inventario y son los mismos en toda la web. */ .kit-hero-figura { pointer-events: none; } /* La caja de la figura tiene que medir lo que mide el hero, ni un pixel mas. * Elementor la ancla abajo, pero un contenedor NO tiene control de alto —solo * de alto minimo— y ese alto minimo en porcentaje se queda en 0 dentro de una * diapositiva de Swiper. Resultado: la caja tomaba el alto natural de la foto * (948px en un hero de 560) y la foto salia cortada por las piernas. * Con `top: 0` sobre el `bottom: 0` que ya pone Elementor, el alto lo fija el * hero, y `object-fit: contain` con anclaje abajo mete a la persona entera * apoyada en el borde inferior. Es el `bottom-0 top-0` del React * (sections/home/HeroSlider.jsx). */ .kit-hero-figura { top: 0; } .kit-hero-figura > .elementor-widget-image, .kit-hero-figura > .elementor-widget-image > .elementor-widget-container { height: 100%; } .kit-hero-img img { width: 100%; height: 100%; object-fit: contain; object-position: bottom right; filter: drop-shadow( 0 18px 28px rgba( 0, 0, 0, 0.3 ) ); } /* El texto del hero manda sobre la figura. */ .kit-hero-texto { position: relative; z-index: 2; } /* Estado vacio propio de la modalidad sincronica (/programas/?modalidad=sincronico). Solo decide CUAL de los dos bloques se ve; ni un color ni una tipografia, que salen de los controles nativos de cada widget. Los selectores llevan `body` delante a proposito: un contenedor de Elementor trae `display:flex` desde `.e-con`, que empata en especificidad, y quien gana depende del orden de carga de las hojas. Con `body` delante no depende de nada. */ body .kit-vacio-sincronico { display: none; } /* Se ve solo si se filtro sincronico Y la rejilla no devolvio nada. El div del mensaje generico solo existe cuando no hay resultados, asi que sirve de senal: el dia que CIFP publique cursos sincronicos, esta caja desaparece sola. */ body.cifp-modalidad-sincronico .e-con:has( .e-loop-nothing-found-message ) + .kit-vacio-sincronico { display: flex; } /* Y entonces el generico se calla, que es lo que hace el React. */ body.cifp-modalidad-sincronico .e-loop-nothing-found-message { display: none; } /* Entrada del pie sin destino (los dos textos legales, mientras CIFP no los entregue). Conserva el aspecto del resto de la columna pero no finge ser un enlace: sin cursor de mano y sin el subrayado que aparece al pasar. */ .kit-enlace-inerte { cursor: default; } .kit-enlace-inerte:hover .elementor-heading-title { text-decoration: none; } /* Iconos de trazo dentro del widget Icon de Elementor. Los de lucide traen `fill="none"` como ATRIBUTO, y Elementor escribe `fill: ` en su hoja. Una regla CSS gana a un atributo de presentación, así que el reloj salía como un círculo macizo y el monitor como un bloque. Aquí no se decide ningún color: el trazo sigue saliendo del control del widget. */ .kit-icono-trazo svg, .kit-icono-trazo svg *, .kit-icono-linea svg, .kit-icono-linea svg * { fill: none; } /* Los resultados de Verificación y Validación no existen hasta que se consulta. El tema hijo marca el con `cifp-sin-consulta`; aquí solo se decide cuándo se ve. Sin esto la tabla salía vacía de entrada, con sus cabeceras y el mensaje de «no encontramos ese registro», antes de escribir nada. */ body.cifp-sin-consulta .kit-resultados { display: none; } /* La caja del widget Icon no se ajusta a su icono: con un icono de 16 px el bloque mide 24, y eso estiraba cada fila de datos de la tarjeta de programa (20 px en el React, 24 aquí). No se decide ningún color ni tamaño: el tamaño lo sigue poniendo el control del widget. */ .kit-icono-trazo .elementor-icon { display: flex; align-items: center; line-height: 1; } .kit-icono-trazo svg { display: block; }