Guía de diseño · Cómo se hizo

Fábrica
La línea de montaje del pensamiento

Notas de concepto, sistema visual y técnica de la homepage de CyberSenseAI. Todo el sitio es un único index.html autocontenido: sin librerías, sin imágenes externas, solo Google Fonts.

01Concepto

CyberSenseAI no vende chatbots: fabrica Personas IA — colaboradores digitales con rol, responsabilidades y objetivos. La metáfora rectora es una planta industrial de precisión: las Personas IA se ensamblan en una línea de producción, reciben su núcleo, se estampan con el sello CREI (Confiable · Responsable · Ética · Inclusiva) y se incorporan al equipo como una unidad operativa más.

• El lenguaje de toda la página es fabril: órdenes de fabricación, hojas de turno, placas remachadas, sellos de homologación, franjas de peligro.
• Cada sección lleva numeración de sección (SEC 02…09) como un parte de planta.
• El naranja es naranja de seguridad industrial, no naranja de marketing: se usa como señalización (prensa, núcleo, sello, CTAs), nunca como relleno decorativo masivo.

02Técnica central — motor isométrico en canvas

Las dos escenas protagonistas están pintadas a mano sobre canvas 2D, sin ninguna librería. Un mini-motor propio (Iso) proyecta el mundo en isometría 2:1 (x' = (x−y)·0.866·S, y' = (x+y)·0.5·S − z·S) y dibuja cajas de tres caras con paletas por material (acero, grafito, goma, naranja).

Escena 1 · La planta (héroe)

• Sincronización por fase modular: la posición de cada caja en la cinta es (t·SPEED) mod D; el largo total de la cinta es múltiplo del paso D, de modo que la prensa golpea siempre con una caja exactamente debajo. Nada está "cronometrado a ojo".
• Brazo robótico con IK de 2 huesos (coseno analítico, sin solver iterativo) que recoge el núcleo de la tolva y lo suelta en el aire.
• Caída determinista con gravedad: la fase de suelta se adelanta exactamente √(2h/g), así el núcleo aterriza en la caja en el instante en que pasa por debajo — en cualquier framerate.
• Partículas: chispas balísticas y vapor con desvanecimiento, solo cuando la escena es visible (IntersectionObserver).
• Paralaje al puntero (pasada 1): el origen de cámara se desplaza suavemente (lerp exponencial) siguiendo el ratón — solo pointer:fine y nunca con prefers-reduced-motion. Las etiquetas DOM (Prensa, Brazo A-01, Salida) se reproyectan cada frame para permanecer clavadas al mundo 3D.
• El HUD de "unidades selladas" arranca en 2417 y aumenta con cada golpe real de la prensa.

Escena 2 · El montaje (scrollytelling)

• Contenedor de 560vh con panel sticky: el scroll se convierte en un parámetro continuo u ∈ [0,5] (scrub), reversible en ambos sentidos.
• Cada pieza (peana, torso, cabeza, núcleo) atraviesa cuatro estados: off → belt → arc → set, con arco parabólico y sombra proyectada.
• En la etapa 5 la prensa desciende, estampa el sello CREI, se encienden los ojos y brota la antena con rebote (ease-out-back).
• Solo se repinta cuando u cambia o quedan partículas vivas — coste cero mientras no se hace scroll.

03Sistema tipográfico

Jerarquía: H1 del héroe a clamp(3.1rem, 8.1vw, 8.4rem) con líneas en white-space:nowrap (tres líneas exactas, sin roturas accidentales); H2 de sección a clamp(2.3rem, 5.6vw, 4.6rem); interlínea .88–.92 en display.

04Paleta

Texturas: grano fractal SVG inline a 5,5% sobre toda la página y franjas de peligro (repeating-linear-gradient a −45°) como delimitadores de zona.

05Orquestación de carga

• Las tres líneas del H1 suben por máscara (translateY(110%) → 0) escalonadas 100 ms.
• La palabra FABRICADAS entra sobredimensionada y con trazo naranja incandescente; a los ~1,05 s la "prensa" la asienta (scale 1.12 → .985 → 1) y el trazo se enfría a acero. Es el concepto entero contado en una palabra.
• El resto de bloques revela con IntersectionObserver y retardos --d por elemento.
• Con prefers-reduced-motion: sin rise, sin estampados, sin marquesina, sin paralaje; los canvas pintan un fotograma estático significativo (prensa abajo, unidad sellada) y el scrollytelling se despliega como lista estática.

06Rendimiento y accesibilidad

• Un solo requestAnimationFrame por escena; ambas se pausan al salir del viewport.
• devicePixelRatio limitado a 2; sin sombras CSS animadas; partículas acotadas.
• Canvas con role="img" y aria-label descriptivo; marquesina y adornos con aria-hidden; foco visible naranja en todo elemento interactivo.
• Todo el color de texto sobre grafito supera contraste AA salvo adornos fantasma decorativos.

07Registro de pasadas

Pasada 1 — estructura y concepto

• H1 recalibrado (sin rotura de PARA TU EMPRESA) y espaciados comprimidos: la planta isométrica asoma sobre el fold a 1440×900.
• Zona muerta superior derecha del héroe resuelta con la placa "Orden de fabricación REF 001" (sustituye a los chips sueltos, que duplicaban información).
• Estampado de carga de FABRICADAS (golpe + enfriamiento del trazo).
• Cue de scroll "Siga la línea ▼" al final del héroe.
• Paralaje al puntero en la planta, con etiquetas reproyectadas por frame.
• HUD sembrado en 2417 unidades; marquesina ampliada y con segunda consigna ("Sello CREI en cada unidad").
• Letras CREI con estampado en cascada; métricas con golpe de prensa al entrar.
• Verticales con letra estarcida fantasma por sector.
• Correcciones reduced-motion (rise del H1 y transiciones .rv) y kicker móvil.
• Creación de esta guía (el enlace del footer apuntaba a un archivo inexistente).

Pasada 2 — craft fino

• Metadatos completos: Open Graph, Twitter Card y theme-color (antes solo title + description).
• Contraste AA: el gris técnico --dim pasa de #68727d (~3,7:1) a #7B8591 (≥4,5:1 sobre grafito) — se usa en microtexto real (specs, HUD, roster, footer), no solo en adornos. Los títulos de los criterios de homologación heredaban el gris muted del contenedor: ahora van en tinta.
• Foco visible en CTAs: el clip-path biselado recortaba el anillo de :focus-visible; en foco el botón recupera el rectángulo y el outline naranja.
• Navegación móvil: no existía menú bajo 1060 px — ahora hay hamburguesa accesible (aria-expanded, cierre con Escape y al navegar, bloqueo de scroll, overlay con blur). A 390 px la nav ya no desborda (sub-marca oculta, CTA compacto sin flecha).
• Skip-link "Saltar al contenido" para teclado.
• Consistencia de interacción: transiciones en los enlaces del footer y en "Hablemos →" (con tracking que se abre al hover); easing expo cubic-bezier(.19,1,.22,1) unificado en verticales y sellos vía --ease-out.
• Copy unificado al tuteo: el CTA final trataba de usted ("Ponga… su equipo") mientras todo el sitio tutea — ahora "Pon una Persona IA en tu equipo".
• Más espectáculo en la planta: puente-grúa de fondo con polipasto en vaivén con easing y gancho con balanceo, y baliza sobre el dintel de la prensa que destella sincronizada con cada golpe y decae — ambos deterministas por fase, estáticos bajo reduced-motion.
• El h2 de Homologación pasa de estilos inline a la clase de sistema .sec-h2.
• Brillo de hover recuperado en los CTAs: el clip-path biselado también recorta box-shadow, así que el halo naranja de hover nunca llegaba a verse — ahora es filter:drop-shadow, que se aplica después del recorte y sigue la silueta biselada.
• Estampado sin recorte: el golpe de FABRICADAS arrancaba a 1,05 s, cuando la máscara de reveal (termina a 1,1 s) aún recortaba la escala 1.12. Ahora el clip se libera a 1,12 s (keyframe discreto overflow:visible) y el golpe cae a 1,15 s — limpio en toda la secuencia.
• Velo superior en el scrollytelling: gradiente de grafito bajo el titular "Así se fabrica…" para que la cinta del canvas nunca compita con el display.
• Marquesina con fundido: mask-image lateral (7%) — los rótulos entran y salen en fade, sin corte duro.
• Polvo en suspensión en la planta: 16 motas deterministas (órbitas seno/coseno sobre semillas fijas, sin RNG por frame) flotando bajo los focos — profundidad atmosférica a coste de 16 fillRect.
• Detalles de sistema: color-scheme:dark en :root, © con año en el footer, etiquetas de la placa de specs subidas a 9,6 px para legibilidad.