# Ficha de proyecto > La hoja tipo App Store: la tarjeta no saca al visitante a otra pestaña en el primer clic. Paquete: `@pantherkit/design-system` · Archivo: `src/components/ficha.css` Se importa con: ```css @import "@pantherkit/design-system/tokens.css"; /* siempre antes */ @import "@pantherkit/design-system/components.css"; ``` La pieza se entrega como CSS, no como componente React: se aplica poniendo las clases en tu propio marcado. No hay import de JavaScript que hacer. ## Qué es El primer clic sobre un proyecto no debería echar al visitante del sitio. La ficha resuelve eso: captura entera, descripción completa, todo el stack y **una sola acción**, que es la que sí lleva fuera. En escritorio se parte en dos columnas a partir de 64rem. Apilado —captura arriba, texto debajo— es la forma de un teléfono; en una pantalla de 1500px eso deja la ficha estrecha y larga con medio monitor vacío a los lados. La ficha entra con un fundido y una escala corta: 1.5% de escala, 6px, y la curva frena largo. Lo que se percibe es que la ficha **se posa**, no que salta. ## Clases | Clase | Qué hace | | --- | --- | | `.caso-overlay` | La capa fija. Se sirve con `hidden` y la abre el guion. | | `.caso-fondo` | El velo. Tinta del sistema al 72% con desenfoque: la ficha se despega de la página en vez de fundirse con ella. | | `.caso-panel` | La hoja. `role="dialog" aria-modal="true"`. | | `.caso-cerrar` | Flota sobre la captura, no sobre una superficie del sistema: por eso lleva velo propio con desenfoque. | | `.caso-panel__media` | La captura. `object-position: top center`, porque recortar una captura por el centro decapita justo lo que identifica el proyecto. Con `hidden`, el texto ocupa la ficha entera. | | `.caso-panel__meta` | Tag e industria, en mono. La mono es señal técnica —metadata de documento—, nunca prosa. | | `.caso-panel__titulo / __desc / __chips / __cta` | El cuerpo. `__chips` es solo el contenedor; `__cta` es solo la posición. | ## El marcado Esto es exactamente lo que se pinta en la página `/componentes/ficha`: el mismo texto se inyecta ahí como pieza viva y se imprime aquí. No pueden separarse. ### La ficha completa El disparador y la hoja van juntos en el mismo fragmento porque no se entienden por separado: sin JavaScript la ficha no abre, y lo único que salva la degradación es que la tarjeta sea un enlace real al proyecto. *Nota: El guion de abrir/cerrar es de la vitrina. `ficha.css` no trae JavaScript: solo pinta.* ```html ``` ### Sin captura Con `hidden` en `.caso-panel__media` la columna izquierda desaparece y el texto ocupa la ficha entera. Media caja vacía sería peor que no partirla, y por eso está previsto en el CSS en vez de dejarse al consumidor. ```html ``` ## Cuándo NO usarla La parte que más valor tiene. Cada una está aquí porque costó algo. ### Como diálogo de confirmación o formulario. Es una hoja de lectura con una acción. Un formulario dentro hereda `max-height: 80vh` con scroll interno y un botón de cerrar que flota sobre el contenido: exactamente lo que no se quiere cuando hay que rellenar campos. ### Con dos CTA. `.caso-panel__cta` está en singular a propósito. La ficha existe para que el visitante no se vaya en el primer clic; darle dos salidas devuelve el problema que la ficha vino a resolver. ### Con la tarjeta disparadora hecha con un `
` o un `