# Tira de logos > La prueba social. Son dos patrones, no uno: la tira estática y la cinta en bucle. Paquete: `@pantherkit/design-system` · Archivo: `src/components/tira.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 «Trabajamos sobre estas plataformas» y los logos. El archivo trae **dos patrones que comparten sección en la landing pero no son la misma pieza**, y mezclarlos es el error que este documento intenta evitar. `.tira` es estática: frase a la izquierda, logos a la derecha, una fila que envuelve sola en móvil. **Es la opción por defecto.** No se mueve, y eso es la virtud, no la carencia. `.marquee` es la cinta. Los mismos logos desfilando en bucle. Se usa **solo** si son tantos que no caben en el ancho: es un scroll horizontal automático y se paga con movimiento perpetuo en pantalla y con duplicar la lista en el HTML para que el bucle no tenga costura. ## Clases | Clase | Qué hace | | --- | --- | | `.tira` | La fila estática. El reparto lo hace `space-between`: si mañana entra un quinto logo el bloque crece hacia la izquierda y la frase no se mueve. | | `.tira__frase / .tira__logos / .tira__item / .tira__logo` | Frase, lista, celda y logo. El logo va a blanco con `filter` y al 70% de opacidad: iguala la tira —ninguna plataforma grita más que otra— y la deja como lo que es, una prueba de apoyo. | | `.marquee / .marquee-track / .marquee-item / .marquee-logo` | La cinta. Máscara en los dos extremos para que nada aparezca cortado en seco contra el borde. | | `.marquee-track--certs` | La cinta de certificaciones, en sentido `reverse`. Dos bandas paralelas moviéndose igual se leen como una sola superficie deslizándose; en direcciones opuestas se leen como dos. | | `[data-logo]` | Gancho para SVG en línea, que no tiene `src` que mirar. `[data-logo="stripe"]` baja el símbolo cuadrado de Stripe para igualar su peso óptico con los logotipos horizontales. | ## Mandos Custom properties que se redefinen desde fuera —con `style` o con una clase propia— sin tocar el archivo del sistema. | Propiedad | Por defecto | Qué controla | | --- | --- | --- | | `--cinta-duracion` | `48s` | La velocidad de la cinta. No es un token y no puede serlo: no hay suceso al que responder —es la velocidad de una correa— y depende de cuántos elementos lleve la lista. Se redefine en `.marquee-track--certs` desde el consumidor. | ## El marcado Esto es exactamente lo que se pinta en la página `/componentes/tira`: el mismo texto se inyecta ahí como pieza viva y se imprime aquí. No pueden separarse. ### La tira estática — úsala por defecto Cuatro o cinco logos se leen de un vistazo. Quietos. Que no se mueva es la virtud: la prueba social se lee en medio segundo y devuelve la mirada al titular de la sección. *Nota: Los logos son SVG en línea con `data-logo` porque la vitrina no se trae los archivos de marca de terceros. El `filter` del sistema los pasa a blanco igual que a un ``.* ```html

Construimos sobre las plataformas que ya usas

``` ### La cinta — solo si no caben La lista va **duplicada** en el HTML y el track es `aria-hidden`: el bucle no tendría costura de otra forma, y una cinta decorativa no es contenido accesible. Al lado va la lista real en `.sr-only`. Se pausa al pasar el puntero y al entrar el foco con el teclado, para que quien quiera leer un sello pueda pararla. ```html
``` ## Cuándo NO usarla La parte que más valor tiene. Cada una está aquí porque costó algo. ### La cinta con pocos logos. Se mueve sin necesidad. Cuesta movimiento perpetuo en pantalla —contra la regla «nada en bucle sin motivo»— y duplicar la lista en el HTML. Si caben, la tira estática los enseña mejor porque se pueden leer. ### La tira y la cinta en la misma sección. Son dos ritmos distintos compitiendo por la misma mirada. En la landing comparten sección por herencia, no por diseño; en algo nuevo, se elige una. ### Con los logos como enlaces a los partners. Es prueba social, no un directorio: cada enlace es una salida del sitio en la sección cuyo trabajo es dar confianza para quedarse. Solo si de verdad hay que enlazar. ### Copiando el atributo `data-marquee` de la landing. No lo lee nadie. Quedó de una versión con guion que ya no existe. La cinta es CSS puro: la traslación es un `@keyframes` y la pausa es `:hover`. ### Dos cintas paralelas en el mismo sentido. Se leen como una sola superficie deslizándose. Por eso `.marquee-track--certs` va en `reverse`: en direcciones opuestas se leen como dos bandas. ## Tokens de los que depende Si `tokens.css` no está importado antes, estas variables no existen y la pieza se pinta con los valores iniciales del navegador —que no es un fallo visible, es una pieza silenciosamente rota. - `--color-text-primary` - `--color-border` - `--color-bg-primary` - `--radius-md` - `--dur-base` - `--dur-slow` - `--ease-out-expo` - `--ease-spring` ## Qué queda cuando algo falla - Sin JavaScript funciona todo. No hay guion: ni en la tira ni en la cinta. - Con `prefers-reduced-motion` la cinta deja de ser cinta: se para, se desenrolla en varias líneas y se puede arrastrar a mano si aun así no cabe. La máscara se quita porque, parada, solo difuminaría contenido que ya no va a pasar por el centro. - El hover sigue subiendo la opacidad del logo con movimiento reducido; solo deja de escalar. ## Accesibilidad - El track de la cinta va `aria-hidden="true"` y la lista real al lado en `.sr-only`. Duplicada en el DOM, se anunciaría dos veces. - La cinta se pausa en `:hover` **y** en `:focus-within`: quien navega con teclado también necesita parar la correa. - Cada logo lleva su nombre (`alt` en ``, `role="img"` + `aria-label` en SVG en línea). Un logo sin nombre es una imagen vacía. ## Lo que el sistema todavía no resuelve Valores literales y huecos conocidos. Se escriben para que nadie los confunda con una decisión. - El `opacity: 0.7` de los logos es literal. El sistema no tiene escala de opacidades para elementos de apoyo, y el mismo número aparece a mano en el carrusel (`0.25` para inertes). --- Versión viva: Índice de componentes: