# Tornillin Design System > Sistema de diseño construido a partir de los materiales reales de **Grupo Tornillín Eléctrico** (logo oficial, fuente Mont, fotografías de sucursales y producto, look & feel 2026, personaje Tornillín y catálogo). > Pensado para alimentar páginas web, landings, dashboards, catálogos digitales, posts de campaña y materiales comerciales con coherencia 1:1 con la marca. --- ## Visual Theme & Atmosphere **Tornillín es una marca ferretera/eléctrica industrial con corazón humano.** Más de 40 años de oficio, pero con un personaje (un tornillito sonriente) que cuida que no se sienta fría. El sistema visual tiene tres tensiones que conviven y se equilibran: 1. **Industrial-honesta** — superficies limpias, mucho blanco, retícula firme, tablas de catálogo con tipografía dura, patrón hexagonal sutil que evoca tornillería y panel eléctrico. 2. **Roja-decidida** — un único acento, el rojo Tornillín (`#BC3A2F`), siempre en titulares, banners diagonales (la "cinta" sheared del logo), CTAs y bullets. Nunca lo diluyas con otro rojo "marketing". 3. **Cercana-mexicana** — el personaje Tornillín y la voz cálida ("¡Descubre por qué somos la mejor opción para ti!") evitan que la marca se vuelva fría como un proveedor mayorista cualquiera. **Palabras clave:** confiable · técnico · servicial · luminoso · práctico · cercano. **Atmósfera por contexto:** - *Landing comercial:* blanco + patrón hexagonal + foto industrial real + ribbon rojo + Tornillín como punto cálido. - *Catálogo:* fondo blanco, esquina roja con sheared, foto de producto sobre fondo limpio, tabla técnica con tipografía monoespaciada para códigos. - *Dashboard:* densidad alta, gris acero, mucho dato, mucho tabular-nums, rojo solo para alertas y CTAs. - *Post de campaña:* foto a sangre con corte diagonal, ribbon "TORNILLIN" sobre fondo, bullets rojos, CTA pill, mascota en composición tilted. - *Comunicación interna:* sobria, hex pattern + steel-900 como fondos oscuros, sin mascota salvo apoyo emocional. **Sello del sistema:** la **cinta roja sheared** (`.tor-ribbon` con `clip-path` paralelogramo) y los **cortes diagonales** en fotos (`.tor-photo-shear`) son los gestos que delatan a Tornillín en una pieza incluso sin logo. --- ## Color Palette & Roles Toda la paleta está extraída visualmente del logo y los materiales 2026. Vive en `css/tokens.css` como variables CSS. ### Marca | Token | Valor | Rol | Uso correcto | |---|---|---|---| | `--tor-red-500` | `#BC3A2F` | **Primario** | Logo, ribbon, CTAs principales, eyebrows, bullets, subrayados | | `--tor-red-600` | `#9E2E25` | Hover/strong | Estado hover/pressed de elementos rojos | | `--tor-red-700` | `#7F2520` | Pressed | Estado pressed, sombras de profundidad de la cinta | | `--tor-red-50` | `#FBECEA` | Tinte | Fondo suave de cards categoría, focus rings, badges | | `--tor-steel-400` | `#8A8A8E` | **Secundario** | "ELÉCTRICO" del logo, cuerpo del personaje, kickers | | `--tor-steel-700` | `#3D3D40` | Acero fuerte | Botones secundarios, encabezados de tabla, accents | | `--tor-steel-900` | `#1C1C1F` | Tinta industrial | Fondos oscuros, footer, banners corporativos | ### Acentos por línea de servicio (look & feel 2026) | Token | Valor | Categoría | |---|---|---| | `--tor-green-500` | `#6BA630` | Energías renovables / sustentable | | `--tor-amber-500` | `#E8A93C` | Iluminación y automatización | | `--tor-blue-500` | `#3E78C8` | Seguridad | | `--tor-red-500` | `#BC3A2F` | Material eléctrico (línea madre) | Estos acentos **no son colores de marca**: úsalos sólo como código visual de categoría (iconos, chips, líneas decorativas). El protagonista sigue siendo el rojo. ### Neutrales | Token | Valor | Uso | |---|---|---| | `--tor-ink` | `#1C1C1F` | Texto principal | | `--tor-muted` | `#5B5B5F` | Texto secundario / metadata | | `--tor-border` | `#E2E2E4` | Bordes por defecto | | `--tor-border-soft` | `#EFEFF1` | Divisores ligeros, patrón hex | | `--tor-surface` | `#FFFFFF` | Fondo base | | `--tor-surface-2` | `#F7F7F8` | Secciones alternas, cards soft | | `--tor-surface-3` | `#EFEFF1` | Relleno del patrón hexagonal | ### Estados | Token | Valor | |---|---| | `--tor-success` | `#4E9F2A` | | `--tor-warning` | `#D98B0C` | | `--tor-danger` | `#BC3A2F` (mismo que rojo marca) | | `--tor-info` | `#2A6FB5` | ### Reglas de uso 1. **Una sola pieza, un solo acento dominante.** Si la página ya tiene el ribbon rojo y CTAs rojos, no añadas amber + green + blue en la misma sección. 2. **Rojo Tornillín nunca es decorativo.** Si pintas algo rojo, está diciendo "atención" o "marca". No lo uses para llenar. 3. **Steel-900 reemplaza al negro puro.** Tornillín no usa `#000`; usa `var(--tor-steel-900)`. 4. **No inventar rojos.** No hay rojo "rosita", ni rojo "anaranjado", ni rojo "vino". Sólo `--tor-red-500` (y sus tonos derivados ya provistos). 5. **Fondos cremas/beige/peach: prohibidos.** El blanco con el patrón hexagonal es el "fondo Tornillín". No caer en el lavado cálido por defecto. --- ## Typography Rules **Familia oficial:** **Mont** (Fontfabric). Cargada como `@font-face` en `tokens.css` con seis variantes: Light/Regular/Bold + sus itálicas. > El logotipo de Tornillín tiene letterforms con cortes diagonales personalizados. **Eso es lettering, no tipografía.** No intentes replicarlo en HTML; usa Mont Bold en mayúsculas para sentir esa misma personalidad sin recrear el logo. ### Roles tipográficos | Rol | Variable | Peso | Caso | Tamaño | |---|---|---|---|---| | Display XL | `--fs-display-xl` | Bold | Hero industrial, portadas | `clamp(48px, 7vw, 88px)` | | Display LG | `--fs-display-lg` | Bold | Portadas catálogo, banner campaña | `clamp(36px, 5vw, 64px)` | | Display MD | `--fs-display-md` | Bold | Encabezados de sección grandes | `clamp(28px, 3.6vw, 44px)` | | H1 | `--fs-h1` | Bold | Títulos de página | `clamp(28px, 3vw, 40px)` | | H2 | `--fs-h2` | Bold | Sub-secciones | `clamp(22px, 2.4vw, 30px)` | | H3 | `--fs-h3` | Bold | Títulos de card | `clamp(18px, 1.6vw, 22px)` | | Body LG | `--fs-body-lg` | Regular | Bajada de hero, intros | `18px` | | Body | `--fs-body` | Regular | Texto base | `16px` | | Body SM | `--fs-body-sm` | Regular | Helpers, tablas | `14px` | | Caption | `--fs-caption` | Regular | Pies, metadata | `13px` | | Micro | `--fs-micro` | Bold | Badges, ribbons | `11px` | ### Jerarquías por tipo de pieza **Web / Landing** ``` Eyebrow ALL CAPS (rojo, 13px, +letter-spacing) H1 Bold 40px (negro, line-height 1.15) Bajada Light 18px (muted, max 60 caracteres por línea) CTA pill rojo Bold 16px ``` **Dashboard interno** ``` Page title Bold 24px Kicker steel ALL CAPS 11px Métrica numérica tabular-nums 48px (rojo o ink según jerarquía) Body 14px ``` **Catálogo de producto** ``` Categoría ribbon rojo ALL CAPS 18-22px Producto Bold 18px Descripción Light 14px line-height 1.5 Tabla técnica mono 13px (códigos), Bold 13px (etiquetas) ``` **Post / pieza promocional** ``` Pregunta Bold 28-36px ALL CAPS (con remate "?") Bullets rojos con bold 16-18px CTA pill blanco-sobre-rojo Bold 16px ``` ### Reglas tipográficas duras 1. **Mayúsculas con `letter-spacing: 0.06em`.** Nunca mayúsculas pegadas. 2. **Light (300) solo para texto largo o bajadas.** Nunca para botones, badges o títulos pequeños — pierde peso visual. 3. **No mezclar Mont con otra display.** No traer Inter, Roboto, Poppins. Mont sola. 4. **Body siempre Regular (400).** Bold es para jerarquía, no para "darle más fuerza" al cuerpo. 5. **Mono solo para datos técnicos** (códigos de producto, IDs, precios en tablas, contadores en dashboards). Usa `font-variant-numeric: tabular-nums`. 6. **`text-wrap: pretty`** en párrafos largos (ya viene en `body`). --- ## Component Stylings Todos los componentes viven en `css/tornillin.css` con el prefijo `.tor-*`. ### Botones (`.tor-btn`) Pill (radius `999px`), uppercase, letter-spacing `0.04em`, Mont Bold, padding `14px 28px`, sombra suave + lift en hover. - **Primario** — `.tor-btn` — rojo sólido, blanco. Caso: CTA principal, "AGENDA UNA VISITA", "CONOCE MÁS". - **Secundario** — `.tor-btn.tor-btn--secondary` — steel-700. Caso: acción secundaria junto al CTA primario. - **Outline** — `.tor-btn.tor-btn--outline` — borde rojo, fondo transparente. Caso: acciones ligeras en fondos blancos. - **Ghost** — `.tor-btn.tor-btn--ghost` — sin fondo, no-uppercase. Caso: links de navegación, "ver más". - Tamaños: `--lg` (hero), default, `--sm` (cards, tablas). ### Cards - **`.tor-card`** — card básica, blanco, borde hairline, radius 16, padding 24. Hover sube el borde a rojo claro. - **`.tor-card--photo`** — card con foto encima (240px height), cuerpo abajo. - **`.tor-card-service`** — para las 4 categorías Tornillín (iluminación, seguridad, energías renovables, material eléctrico). Icono dentro de un cuadrado tintado, título uppercase, descripción muted, lift en hover. - **`.tor-card-product`** — para catálogo: media 4:3 + badge superior izquierdo + código mono + título + precio + proveedor. ### Formularios Input/textarea/select con borde 1.5px, radius 12, padding 12/14. Focus = borde rojo + halo `--tor-red-50` (4px). Labels en Bold 14, helper en muted 13. Estados error con borde `--tor-danger`. ### Navegación (`.tor-nav`) Sticky top, blanco con `backdrop-filter`, altura 72px, logo 40px alto. Links Regular, hover rojo, activo subrayado rojo 3px. ### Badges (`.tor-badge`) Pills uppercase 11px. Variantes: - **Solid** rojo (estado destacado) - **Tintes** rojo/steel/green/amber/blue (chips de categoría) - **Dark** steel-900 (estado oscuro) - Modificador `--dot` antepone un punto coloreado. ### Banners y campañas (`.tor-banner-campaign`) Foto a sangre + overlay gradient steel-900 a transparente (lado izquierdo), título display + ribbon + CTA. Mínimo 320px de alto, radius `--radius-2xl`. ### Tablas (`.tor-table`) Borde 1px, header steel-900 con texto blanco uppercase 11px. Filas con border-top hairline. Hover de fila tinta `--tor-surface-2`. Variante `--light` para catálogos sobrios (header gris claro con borde inferior fuerte). ### Ribbon (`.tor-ribbon`) **El componente más identitario.** Paralelogramo cortado a 16-24px con `clip-path`. Rojo o steel-900, Mont Bold uppercase. Úsalo: - como kicker en hero - como etiqueta sobre fotos (`TORNILLIN`, `OFERTA`, `NUEVO`) - como encabezado de sección de catálogo (esquina superior derecha) ### Listas con bullets rojos (`.tor-list`) Bullets de 8px en rojo, padding-left 24. Estilo idéntico al de los posts oficiales. ### Foto cortada (`.tor-photo-shear`) `clip-path` que corta la esquina inferior izquierda o superior derecha, replicando los recortes diagonales del look & feel 2026. ### Stat (`.tor-stat`) Número grande rojo Mont Bold + label muted abajo. Para "+40 años", "+10,000 productos", etc. --- ## Layout Principles ### Retículas - **Container max:** `1280px` con gutter `clamp(16px, 3vw, 32px)`. - **Container narrow:** `880px` (lectura, formularios). - **Container wide:** `1440px` (dashboards densos). - **Grids utilitarios:** `.tor-grid-2/-3/-4`. Colapsan a 2 cols < 1024px y a 1 col < 600px. ### Ritmo vertical de secciones `.tor-section` da `padding-block: clamp(56px, 8vw, 120px)`. Suficiente respiración entre secciones; nunca apilar dos secciones sin este aire. ### Hierarquía de información Cada bloque sigue **kicker → headline → bajada → contenido → CTA**: 1. **Kicker rojo** (10–14 caracteres, ALL CAPS, eyebrow) 2. **Headline display** (Mont Bold, máximo 2 líneas) 3. **Bajada Light 18px** (1–2 líneas, color muted) 4. **Contenido** (foto, grid, tabla, lista) 5. **CTA pill** rojo o ghost (1, máximo 2) ### Espaciado base Escala de 4: `4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 128`. Reglas: - Gap interno de cards: `24` (default), `16` para cards densas, `32` para hero cards. - Espacio entre headline y bajada: `12–16`. - Espacio entre bloque y CTA: `24–32`. - Espacio entre secciones distintas: `80–120`. ### Radios - Cards y banners: `16` o `20`. - Botones: pill (`999px`). - Inputs: `12`. - Imágenes de producto: `12`. - Banner campaña: `28`. ### Patrón hexagonal de fondo `.tor-bg-hex` aplica un patrón sutil (línea + punto). Úsalo en: - Hero de landing comercial - Backgrounds de "categorías de servicio" - Páginas de catálogo (full bleed) No lo uses cuando ya hay una foto a sangre — compite. ### Composición de fotos - Las fotos van a `aspect-ratio: 4/3`, `16/9` (hero), o `1/1` (post). - Si la foto va sobre una sección clara, usa `.tor-photo-shear` (corte diagonal) o un radius `--radius-lg`. - Si la foto va de fondo con texto encima (`.tor-banner-campaign`), el overlay oscuro a la izquierda no es opcional. --- ## Depth & Elevation Tornillín es **plano-con-énfasis**: sombras suaves, jerarquía con borde y color, no con drop-shadow exagerado. | Nivel | Token | Caso | |---|---|---| | 0 | (sin sombra) | Texto, secciones planas, fondos hexagonales | | 1 | `--shadow-xs` | Inputs, badges sólidos | | 2 | `--shadow-sm` | Cards en reposo, botones | | 3 | `--shadow-md` | Cards en hover, dropdowns, popovers | | 4 | `--shadow-lg` | Modales, sheets | | 5 | `--shadow-xl` | Lightbox | | Especial | `--shadow-red-glow` | Sólo CTA primario "lift" cuando se necesita atraer mucho la atención | ### Reglas duras de elevación 1. **Una pieza, máximo 3 niveles** simultáneos visibles. Más = ruido. 2. **El logo nunca lleva sombra.** Va plano sobre blanco o sobre rojo. 3. **El personaje Tornillín nunca lleva sombra HTML** — la sombra ya forma parte de su PNG. 4. **Borde antes que sombra.** Para una card calmada, usa `1px solid --tor-border` en vez de añadir `--shadow-sm`. 5. **Sombras siempre con `rgba(28,28,31,...)`** (tono steel-900), nunca con negro puro — el resultado se siente "limpio mexicano", no "office templated". --- ## Do's and Don'ts ### Do ✅ - **Usa el rojo como protagonista único.** Una pieza = un acento. - **Eleva el patrón hexagonal** como sello identitario en hero/cabezas de catálogo. - **Compón fotos con corte diagonal** (`.tor-photo-shear`) cuando necesites dinamismo. - **Pon el ribbon rojo sheared** en kickers y como remate de categoría. - **Trata las mayúsculas con letter-spacing** (`0.06em`). Siempre. - **Mostrá los códigos de producto en monoespaciada** y los precios tabular-nums. - **El personaje Tornillín entra "saludando":** ligeramente inclinado, con cajas/foco a su alrededor, sobre fondo limpio. - **Las CTAs son pills.** Nunca botones rectangulares. - **Las listas usan bullets rojos** (`.tor-list`), no `disc` por defecto. - **Llamá a tu audiencia.** Cliente: ferretero, profesional eléctrico, gerente de obra, residencial. La voz cambia ligeramente — más técnica para B2B (catálogo), más cálida para residencial (landing). ### Don't ❌ - **No re-dibujes el logo en HTML.** Usa el PNG/SVG oficial. Punto. - **No uses Tornillín en contextos serios negativos** (errores críticos, despidos, condolencias) — rompe el tono. - **No pongas el personaje sobre fondos saturados de color.** Su fondo natural es blanco, gris claro o patrón hex. - **No mezcles más de un acento de categoría** (verde + ámbar + azul) en el mismo bloque. - **No uses lavados beige/crema/peach** en backgrounds — el sistema vive en blanco + steel. - **No uses emojis decorativos** (✨🚀🎯) en headlines. El personaje ya es el "emoji de Tornillín". - **No metas gradientes de marketing AI** (violetas, azules a rosas). El único gradiente permitido es `--gradient-steel` o `--gradient-red`. - **No uses íconos al lado de cada título.** Sólo en cards de categoría. - **No inventes métricas.** Si no tienes el dato real, usa un placeholder honesto ("—", "Próximamente", "Consulta"). - **No uses Mont Light para CTAs ni badges.** Pierde fuerza; queda pálido. - **No coloques ribbon rojo sobre fondo rojo.** Pierde el corte diagonal. - **Nunca pongas sombras en logos ni en mascota.** --- ## Responsive Behavior El sistema soporta los breakpoints modernos (2025–2026): | Bucket | Rango | Comportamiento | |---|---|---| | Mobile compact | 360–389 | 1 columna, hero apilado, ribbon ajustado a 14px, CTAs `block`. Nav colapsa a hamburguesa (no incluido por componente — implementar por pieza). | | Mobile standard | 390–429 | 1 columna, mismo patrón mobile compact con más espacio. | | Mobile large / foldable | 430–599 | 1 columna, cards de categoría apiladas, padding lateral más generoso. | | Small tablet | 600–743 | 2 columnas en grids de servicio; tablas con scroll horizontal. | | Tablet portrait | 768–833 | 2 columnas; hero con foto a la derecha 60/40. | | Tablet landscape / large tablet | 1024–1179 | 3 columnas en cards servicio; dashboards con sidebar 240px. | | Laptop | 1280–1365 | 4 columnas en grids producto. Container 1280. | | Desktop | 1440–1535 | Container wide en dashboards. | | Wide | 1920+ | Container max 1280 centrado; no estirar a full bleed (el sistema no se diseñó para superficies anchas). | ### Reglas duras 1. **Verificar no scroll horizontal** en 360, 390, 430, 768, 820, 1024, 1366, 1440, 1920. 2. **Type fluida**: todos los display sizes son `clamp(min, vw, max)`. No fijar px en hero. 3. **Nav mobile** siempre con menú off-canvas o drawer, no comprimir links. El componente base solo oculta `.tor-nav__links` < 600px — cada pieza implementa su drawer. 4. **Cards de producto**: 4 cols → 2 cols → 1 col según los grids utilitarios. 5. **Footer 4 cols → 2 cols → 1 col** automático. 6. **Foto con shear en mobile**: el corte se mantiene pero se reduce la profundidad (32px en lugar de 64px) si la altura no lo justifica. Override por pieza. 7. **Tablas en mobile**: envolver en `overflow-x: auto` con sombra de scroll. Nunca recortar columnas. --- ## Agent Prompt Guide Esta sección es para futuros agentes que reciban la encomienda "haz algo con el estilo Tornillín". Sigue esta receta para que el resultado sea reconocible y no genérico. ### Checklist obligatorio al iniciar 1. **Carga** `css/tokens.css` **antes** que `css/tornillin.css`. En ese orden. 2. **No inventes colores.** Toma sólo los `--tor-*` definidos. Para variantes nuevas, deriva con `color-mix()` usando tokens existentes. 3. **Logo** desde `assets/logo/tornillin-logo-color.png` (sobre fondo claro) o `tornillin-logo-blanco.png` (sobre fondo oscuro o foto). Altura mínima 32px, máxima 72px. 4. **Personaje** desde `assets/personaje/tornillin-oficial.png`. Úsalo cuando la pieza es cálida/promocional. **No lo uses** en piezas técnicas serias (legales, fallos, comunicación interna formal). 5. **Fuente Mont** ya está cargada por tokens.css. No traer Inter ni nada más. 6. **Patrón hex**: `.tor-bg-hex` para hero/portadas. No abusar. 7. **Ribbon rojo** (`.tor-ribbon`) al menos una vez por pieza si es campaña/landing. 8. **CTA primario** siempre rojo pill. Máximo 2 CTAs en una vista (1 primario + 1 ghost/outline). ### Patrones por contexto #### Landing comercial / página de servicio ```
CATEGORÍA

TITULAR CORTO Y POTENTE

Bajada explicativa de 1-2 líneas.

AGENDA UNA VISITA Ver catálogo
NUESTRAS SOLUCIONES

4 LÍNEAS, UNA SOLA RUTA

``` #### Post promocional (Instagram/Facebook, 1080×1080) ``` ``` #### Dashboard interno ``` ``` Densidad alta, sin patrón hex, sin personaje. Rojo solo en stats, badges y CTAs. Sombras nivel 2 máximo. #### Catálogo de producto ``` ``` Banner superior con ribbon rojo de categoría ("ILUMINACIÓN LED · 142 PRODUCTOS"). ### Voz y copy - **Pregunta directa** al inicio: "¿Tienes una ferretería y ocupas material eléctrico?" - **Categorías en mayúsculas** separadas por bullets medianos: `RESIDENCIAL · COMERCIAL · INDUSTRIAL`. - **CTAs imperativas y cortas**: "AGENDA UNA VISITA", "CONOCE MÁS", "DESCARGA EL CATÁLOGO". - **Promesa de marca**: "Soluciones que iluminan", "Todo para tu proyecto". - **Cuando hay datos**: "+40 años", "+10,000 productos", "8 sucursales en SLP". Reales o `—` honesto si no se conocen. ### Errores a evitar (anti-slop) - ❌ Hero con gradiente púrpura-azul "tech". - ❌ Cards con borde-izquierdo de color. - ❌ Iconos genéricos de Lucide al lado de cada título. - ❌ Logos de proveedores ficticios. - ❌ "Lorem ipsum" o "Feature One/Two/Three". - ❌ Métricas inventadas ("99.9% uptime") en un negocio físico. - ❌ Mascota mirando de frente, plana, sin contexto — siempre acompañada de cajas, van o herramienta. - ❌ Mezclar emojis y mascota en la misma pieza. ### Lo que sí distingue una pieza Tornillín bien hecha 1. Ribbon rojo sheared visible. 2. Foto industrial real con corte diagonal. 3. Patrón hex de fondo. 4. Mascota tilted con cajas cardboard. 5. Mont Bold uppercase + letter-spacing. 6. Una sola pista de color (rojo). Verde/ámbar/azul solo cuando hablamos de líneas de servicio explícitas. 7. CTAs pill rojas. --- ## Ejemplo breve: cómo usar este sistema A continuación una descripción rápida + snippets clave para los cuatro casos. Los archivos completos viven en `screens/`. ### 1) Landing page (`screens/landing.html`) Estructura: nav sticky → hero con hex + ribbon + CTA + foto shear → sección 4 servicios → sección sucursales (foto + listado) → banner campaña → footer. ```html
SOLUCIONES QUE ILUMINAN

Todo el material eléctrico que tu proyecto necesita.

Más de 40 años abasteciendo a ferreteros, electricistas y obras en San Luis Potosí.

Agenda una visita Ver catálogo
Sucursal Matriz
``` ### 2) Post promocional (`screens/post.html`) Lienzo 1080×1080, foto a sangre arriba con shear, pregunta display abajo, ribbon "TORNILLIN" tilted, lista de productos con bullets rojos, mascota a la derecha con cajas, CTA pill abajo centrado. ```html

¿Tienes una ferretería
y ocupas material eléctrico?

  • Interruptores y apagadores
  • Cable para instalaciones eléctricas
    • ...
TORNILLIN Agenda una visita
``` ### 3) Dashboard interno (`screens/dashboard.html`) Sidebar steel-900 con logo blanco + nav vertical · topbar con search · stats (4 tor-stat) · tabla densa de movimientos · chart placeholder · sin patrón hex, sin mascota. ```html
...
Ventas hoy
$ 184,300
+12.4% vs ayer
...
...
``` ### 4) Catálogo de productos (`screens/catalogo.html`) Topbar + ribbon de categoría · sidebar de filtros · grid 4 columnas de `tor-card-product` con badge, código, precio · sin mascota. ```html
MATERIAL ELÉCTRICO

142 productos disponibles

Nuevo
COD · 7150 · PE01

Poliducto 1/2" económico

$ 89.00 Alve
...
``` --- **Archivos del sistema:** - `css/tokens.css` — todas las variables (colores, type, espaciado, radios, sombras, patrón hex) - `css/tornillin.css` — componentes base con prefijo `.tor-*` - `assets/logo/` — logo color y blanco - `assets/personaje/` — Tornillín oficial y v2 - `assets/fotografias/` — sucursales, generales, banco - `assets/fuentes/` — Mont (6 variantes) - `preview.html` — galería interna de tokens y componentes - `screens/landing.html`, `screens/post.html`, `screens/dashboard.html`, `screens/catalogo.html` — los cuatro casos arriba - `index.html` — showcase que enlaza todo