System Requirements Document for humano-promedio

1. Introduction

humano-promedio es una web de contenido —un pequeño almanaque de datos— sobre lo que le puede pasar al cuerpo de un humano promedio a lo largo de su vida. No es un panel de control, no es una herramienta de negocio y no es un producto de datos históricos: es una experiencia de lectura.

El producto presenta cifras cotidianas y corporales de una vida humana —pasos diarios, kilómetros caminados al año, horas de sueño, latidos del corazón— y las deja respirar solas en un campo de papel blanco. La intención es asombro tranquilo: la escala de una vida contada con números, no con gráficos ni insignias.

El público es cualquier persona curiosa, en general desde el teléfono y a menudo de noche. No se requiere cuenta, registro ni introducción de datos propios: se llega, se lee y se recorre.

Audiencia: público general curioso (persona "Visitante curioso").

2. System Overview

humano-promedio es un sitio de lectura de una sola responsabilidad: mostrar datos curiosos sobre cosas que le pueden pasar a un humano promedio. La entrega actual es una superficie web propia de la aplicación, de acceso público y anónimo, sin autenticación ni cuentas.

Actores actuales

• Visitante curioso (persona humana activa): llega al sitio, lee la propuesta, explora y recorre los datos curiosos. No introduce datos propios ni necesita identidad.
• Sistema de la aplicación (actor no-persona): sirve el contenido de datos curiosos y las páginas públicas.

Comportamiento aceptado

• Una entrada pública que explica qué es el producto, para quién es y qué hace.
• Un destino principal de exploración y lectura de los datos curiosos del humano promedio: pasos diarios, kilómetros al año, horas de sueño, latidos del corazón.
• Un índice tipo tabla de contenidos que permite recorrer todos los datos.

Exclusiones vigentes

• El contenido no debe ser de cosas históricas. Debe tratar sobre cosas que le pueden pasar a un humano.
• No hay cuentas, registro, inicio de sesión ni perfil de usuario.
• No hay panel de control, gráficos de barras, donuts, anillos de progreso, insignias de porcentaje, emojis, gamificación (rachas, insignias de puntuación, calcomanías de "wow", signos de exclamación).
• No hay fotografía, ilustración, iconos, renders 3D, blobs de degradado ni glassmorphism.
• No hay tarjetas, mosaicos, paneles ni contenedores con radio de borde o sombra.
• No hay azul/índigo en la paleta; el único acento es el rojo bermellón apagado del sello.
• No hay carruseles con reproducción automática, marquesinas ni parallax con secuestro de scroll.

2a. Product Interpretation and Delivery Boundary

Entrega actual. El producto se entrega como una aplicación web propia con dos superficies públicas: Inicio y Datos curiosos. Ambas son de acceso anónimo (access_requirement: none): no existe identidad de aplicación, ni sesión, ni estado privado que conservar. El visitante no necesita crear cuenta para leer, explorar ni volver a visitar el contenido.

Propiedad de acceso. Toda la interacción humana ocurre en superficies propias de la aplicación. No hay proveedor externo, destino de terceros ni entrega headless. El contenido de datos curiosos es servido por la propia aplicación.

Frontera actual / futuro. Todo lo descrito en este documento es alcance actual. No se han aceptado requisitos futuros; cualquier idea de cuentas, contenido guardado, compartir o personalización queda fuera del alcance actual y no se implementa.

2b. Source Content Inventory

No aplica: no se ha suministrado ninguna directiva de referencia con content_source.

2c. Page Content and Component Coverage

Inicio

• Información y estado: campo de papel blanco a 100vh con una sola línea de copy y un único número enorme; debajo, una secuencia vertical lenta de datos curiosos; al final, un índice silencioso de todos los datos como tabla de contenidos con puntos conductores.
• Acciones primarias: leer la propuesta del producto; desplazarse hacia abajo para entrar en la secuencia de datos; saltar a un dato desde el índice.
• Acciones de soporte: navegar a Datos curiosos desde la fila de navegación fija; volver arriba.
• Entidades de dominio: Dato curioso (valor numérico, unidad, leyenda, sello), Índice de datos.
• Responsabilidades de componentes:
  • Fila de navegación fija: hairline de 1px; wordmark "humano promedio" a 15px a la izquierda; dos enlaces de texto a la derecha; se atenúa a 40% de opacidad sobre el contenido y vuelve a plena opacidad al hover o al hacer scroll hacia arriba.
  • Apertura de 100vh: una línea de 19px en Shippori Mincho arriba a la izquierda ("Un humano promedio, mientras lees esto, ya ha caminado…"); el número 86.000 en Zen Kaku Gothic New Light a clamp(72px, 18vw, 220px) en tinta #1E1C19, ocupando el centro-izquierda óptico; "kilómetros en su vida" en 14px muted justo bajo la línea base; hairline de 1px a todo lo ancho bajo el número; sello circular de 28px #C0442A al final de la hairline; chevron descendente de dos trazos de 1px al centro inferior. Sin botón, sin imagen, sin degradado.
  • Banda de dato: ancho completo, separada por hairline de 1px; número alineado a la izquierda; leyenda colgada a un desplazamiento fijo de 6 columnas; sello hanko de 28px; unidad en 14px muted con 0.14em de tracking, siempre debajo o al lado del número, nunca dentro.

• Regla de medición: donde se necesita una comparación, una sola regla vertical delgada con marcas y un segmento de tinta relleno — un diagrama, no un gráfico.
• Índice: tabla de contenidos con puntos conductores ("Caminar … 86.000 km", "Dormir … 8.760 días") en Shippori Mincho con numerales tabulares.
• Estados:
  • Carga: los números se renderizan en su valor final de inmediato si prefers-reduced-motion; en caso contrario cuentan una sola vez al entrar.
  • Vacío: no aplica; el contenido de datos curiosos es fijo y siempre presente.
  • Éxito: el visitante lee la propuesta y recorre la secuencia de datos.
  • Error / recuperación: si el contenido no carga, se muestra el estado de error del sistema con opción de reintentar la carga de la página.
  • Movimiento reducido: todos los contadores muestran el valor final de inmediato, todas las revelaciones son instantáneas, sin deriva.

Datos curiosos

• Información y estado: destino principal de exploración y lectura; secuencia de bandas de datos curiosos sobre el humano promedio —pasos diarios, kilómetros al año, horas de sueño, latidos del corazón— sin contenido histórico.
• Acciones primarias: leer cada dato; recorrer la secuencia completa; volver a un dato concreto.
• Acciones de soporte: volver a Inicio desde la fila de navegación fija.
• Entidades de dominio: Dato curioso (valor numérico, unidad, leyenda, sello), Categoría temática del dato (caminar, dormir, corazón).
• Responsabilidades de componentes:
  • Fila de navegación fija: idéntica a la de Inicio; wordmark a la izquierda, enlaces de texto a la derecha.
  • Banda de dato: ancho completo, hairline de 1px que se dibuja de izquierda a derecha al entrar; número en Zen Kaku Gothic New Light con numerales tabulares, tracking -0.02em; leyenda a 6 columnas de desplazamiento; unidad en 14px muted; sello hanko de 28px #C0442A.
  • Regla de medición: regla vertical delgada con marcas y un segmento de tinta relleno para comparaciones.
  • Ritmo vertical: 160px entre datos en escritorio, 88px en móvil, para que cada número llegue solo.
• Estados:
  • Carga: revelación de cada dato al cruzar el 60% de la línea del viewport (opacidad 8% → 100% en 600ms con deriva de 12px hacia arriba); con prefers-reduced-motion, revelación instantánea.
  • Vacío: no aplica; el conjunto de datos curiosos es fijo.
  • Éxito: el visitante ha explorado y comprendido los datos sin introducir datos propios.
  • Error / recuperación: estado de error del sistema con opción de reintentar la carga.
  • Movimiento reducido: sin deriva, sin conteo, sin dibujo de hairlines.

3. Functional Requirements

FR-1 — Entrada pública que explica el producto Como Visitante curioso, quiero llegar a una entrada pública que me explique qué es humano-promedio, para quién es y qué hace, para decidir si quiero leerlo.

• Provenance: required_inference (página Inicio, entrada pública anónima).
• Disparador: el visitante abre la URL del sitio.
• Resultado observable: se muestra la apertura de 100vh con la línea de copy y el número 86.000 con su leyenda "kilómetros en su vida".
• Acceso: anónimo, sin cuenta.
• Fallo / recuperación: si la página no carga, se muestra el estado de error del sistema con opción de reintentar.
• Continuación: el visitante se desplaza hacia abajo para entrar en la secuencia de datos.

FR-2 — Explorar y leer datos curiosos sobre el humano promedio Como Visitante curioso, quiero explorar y leer datos curiosos sobre cosas que le pueden pasar a un humano promedio, para descubrir y comprender esas cifras.

• Provenance: explicit (requisito de contenido con datos curiosos sobre el humano promedio).
• Disparador: el visitante entra en Datos curiosos o se desplaza por la secuencia de datos.
• Resultado observable: cada dato se presenta como una banda de ancho completo con su número, unidad, leyenda y sello; el visitante puede recorrer la secuencia completa.
• Acceso: anónimo, sin cuenta.
• Fallo / recuperación: si el contenido no carga, se muestra el estado de error del sistema con opción de reintentar.
• Continuación: el visitante sigue recorriendo o vuelve al índice.

FR-3 — Ver los datos concretos de caminar, dormir y corazón Como Visitante curioso, quiero ver datos como pasos diarios, kilómetros al año, horas de sueño y latidos del corazón, para conocer las cifras concretas de una vida humana.

• Provenance: explicit (datos nombrados: pasos diarios, kilómetros al año, horas de sueño, latidos del corazón).
• Disparador: el visitante recorre la secuencia de datos.
• Resultado observable: cada uno de esos datos aparece como una banda con su valor numérico, su unidad y su leyenda.
• Acceso: anónimo, sin cuenta.
• Fallo / recuperación: si un dato no está disponible, se muestra el estado de error del sistema con opción de reintentar.
• Continuación: el visitante continúa con el siguiente dato.

FR-4 — Recorrer el índice de todos los datos Como Visitante curioso, quiero ver un índice de todos los datos curiosos, para saber qué hay y volver a un dato concreto.

• Provenance: required_inference (índice como tabla de contenidos con puntos conductores, parte de la dirección creativa aceptada).
• Disparador: el visitante llega al final de la secuencia de datos.
• Resultado observable: una lista con puntos conductores ("Caminar … 86.000 km", "Dormir … 8.760 días") en Shippori Mincho con numerales tabulares.
• Acceso: anónimo, sin cuenta.
• Fallo / recuperación: si el índice no carga, se muestra el estado de error del sistema con opción de reintentar.
• Continuación: el visitante selecciona un dato y vuelve a él.

FR-5 — Navegar entre Inicio y Datos curiosos Como Visitante curioso, quiero moverme entre la entrada y el destino de datos curiosos, para orientarme en el sitio.

• Provenance: required_inference (fila de navegación fija con wordmark y dos enlaces de texto).
• Disparador: el visitante usa la fila de navegación fija.
• Resultado observable: la fila de navegación permanece fija en la parte superior, se atenúa a 40% de opacidad sobre el contenido y vuelve a plena opacidad al hover o al hacer scroll hacia arriba.
• Acceso: anónimo, sin cuenta.
• Fallo / recuperación: si un enlace no resuelve, se muestra el estado de error del sistema con opción de reintentar.
• Continuación: el visitante continúa en la página de destino.

FR-6 — Leer sin introducir datos propios Como Visitante curioso, quiero leer y explorar sin introducir ningún dato mío, para que la experiencia sea solo de lectura.

• Provenance: explicit (el resultado exitoso es haber explorado y comprendido esos datos sin necesidad de introducir datos propios).
• Disparador: cualquier interacción del visitante con el sitio.
• Resultado observable: no se solicita ningún dato personal en ningún punto del recorrido.
• Acceso: anónimo, sin cuenta.
• Fallo / recuperación: no aplica; no hay entrada de datos que pueda fallar.
• Continuación: el visitante sigue leyendo.

FR-7 — Contenido no histórico Como Visitante curioso, quiero que el contenido trate sobre cosas que le pueden pasar a un humano y no sobre cosas históricas, para que el almanaque sea sobre el cuerpo y la vida cotidiana.

• Provenance: explicit (restricción dura: el contenido no debe ser de cosas históricas).
• Disparador: el visitante lee cualquier dato.
• Resultado observable: todos los datos mostrados describen cosas que le pueden pasar a un humano (caminar, dormir, latir), sin contenido histórico.
• Acceso: anónimo, sin cuenta.
• Fallo / recuperación: no aplica; es una restricción de contenido, no una interacción.
• Continuación: el visitante continúa leyendo.

4. User Personas

Visitante curioso

Contexto de producto. Es una persona del público general que llega a humano-promedio desde el teléfono, a menudo de noche, sin una tarea que cumplir y sin intención de registrarse. No viene a analizar datos ni a comparar métricas: viene a leer.

Objetivo principal. Descubrir y recorrer contenido de datos curiosos sobre cosas que le pueden pasar a un humano promedio —pasos diarios, kilómetros al año, horas de sueño, latidos del corazón— y comprender esas cifras.

Responsabilidades aceptadas. Leer la propuesta del producto en la entrada; explorar y recorrer la secuencia de datos curiosos; consultar el índice para saber qué hay y volver a un dato concreto; navegar entre la entrada y el destino de datos curiosos.

Entradas y decisiones. No introduce ningún dato propio. Su única decisión es qué leer y en qué orden: desplazarse por la secuencia o saltar a un dato desde el índice.

Interacciones con otros participantes. No hay otros participantes humanos en el alcance actual. El único otro actor es el sistema de la aplicación, que sirve el contenido.

Éxito observable. Ha explorado y comprendido los datos curiosos sin necesidad de introducir datos propios.

Qué hace distinto a este rol. Su trabajo es de lectura y asombro tranquilo, no de operación: no configura, no guarda, no comparte, no compara. La diferencia no está en el título sino en que toda su interacción es pasiva y anónima, y el producto está diseñado para que así sea.

5. Core User Flows

Flujo 1 — Llegar y entender qué es humano-promedio

1. El Visitante curioso abre la URL del sitio en su teléfono, de noche.
2. El sistema sirve Inicio (acceso anónimo, sin cuenta).
3. El visitante ve un campo de papel blanco a 100vh con una sola línea de 19px en Shippori Mincho arriba a la izquierda: "Un humano promedio, mientras lees esto, ya ha caminado…".
4. En el centro-izquierda óptico, el número 86.000 en Zen Kaku Gothic New Light a clamp(72px, 18vw, 220px) en tinta #1E1C19 cuenta una sola vez hasta su valor final en 900ms con ease-out y luego se detiene para siempre.
5. Bajo la línea base del número, "kilómetros en su vida" en 14px muted. Una hairline de 1px recorre todo el ancho bajo el número y un sello circular de 28px #C0442A se presiona al final de la hairline (escala 1.06→1.0 en 120ms).
6. Un chevron descendente de dos trazos de 1px al centro inferior indica que hay más abajo.
7. Resultado observable: el visitante entiende que el sitio trata sobre lo que le pasa a un humano promedio.
8. Continuación: se desplaza hacia abajo.

Fallo / recuperación: si la página no carga, se muestra el estado de error del sistema con opción de reintentar la carga.

Movimiento reducido: el número se renderiza en su valor final de inmediato; no hay conteo ni deriva.

Flujo 2 — Recorrer la secuencia de datos curiosos

1. El Visitante curioso se desplaza hacia abajo desde la apertura de Inicio.
2. Cada dato entra como una banda de ancho completo separada por una hairline de 1px que se dibuja de izquierda a derecha en 400ms.
3. Al cruzar el 60% de la línea del viewport, la banda aparece de 8% a 100% de opacidad en 600ms con una deriva de 12px hacia arriba; nada se desliza, rebota ni escala.
4. El número se alinea a la izquierda; la leyenda cuelga a un desplazamiento fijo de 6 columnas; la unidad ("pasos", "km", "latidos") aparece en 14px muted con 0.14em de tracking, debajo o al lado del número, nunca dentro.
5. Un sello hanko de 28px #C0442A marca cada dato.
6. El ritmo vertical es de 160px entre datos en escritorio y 88px en móvil, de modo que cada número llega solo.
7. Resultado observable: el visitante ha leído los datos de caminar, dormir y corazón —pasos diarios, kilómetros al año, horas de sueño, latidos del corazón— sin contenido histórico.
8. Continuación: sigue bajando hasta el índice.

Fallo / recuperación: si el contenido no carga, se muestra el estado de error del sistema con opción de reintentar.

Movimiento reducido: todas las revelaciones son instantáneas, sin deriva ni dibujo de hairlines.

Flujo 3 — Consultar el índice y volver a un dato

1. El Visitante curioso llega al final de la secuencia de datos en Inicio.
2. Ve un índice silencioso de todos los datos como tabla de contenidos con puntos conductores: "Caminar … 86.000 km", "Dormir … 8.760 días", en Shippori Mincho con numerales tabulares.
3. El visitante elige un dato concreto.
4. Resultado observable: vuelve a ese dato en la secuencia.
5. Continuación: lo relee y sigue explorando.

Fallo / recuperación: si el índice no carga, se muestra el estado de error del sistema con opción de reintentar.

Flujo 4 — Explorar el destino de datos curiosos

1. El Visitante curioso usa la fila de navegación fija y selecciona el enlace a Datos curiosos (acceso anónimo, sin cuenta).
2. La fila de navegación se atenúa a 40% de opacidad sobre el contenido y vuelve a plena opacidad al hover o al hacer scroll hacia arriba.
3. En Datos curiosos, el visitante recorre la secuencia de bandas de datos curiosos sobre el humano promedio.
4. Donde se necesita una comparación, ve una sola regla vertical delgada con marcas y un segmento de tinta relleno —un diagrama, no un gráfico.
5. Resultado observable: el visitante ha explorado y comprendido los datos sin introducir datos propios.
6. Continuación: vuelve a Inicio desde la fila de navegación fija.

Fallo / recuperación: si un enlace no resuelve o el contenido no carga, se muestra el estado de error del sistema con opción de reintentar.

Movimiento reducido: revelaciones instantáneas, sin deriva.

6. Visuals Colors and Theme

Musa: Kenya Hara. Titular: "El vacío como contenido: un número calmado respirando sobre papel blanco."

La dirección creativa es autoritativa para esta sección. La idea central es que el vacío es el diseño: un solo número enorme sentado solo en un campo de papel blanco, con una pequeña leyenda debajo. Los números tienen el peso de objetos de bodegón, no de mosaicos de panel.

Tokens de color (modo claro)

Sin segundo color de acento en ningún lugar; sin tintes, sin degradados, sin sombras. El azul/índigo está prohibido en toda la paleta.

Tipografía

• Titulares: Zen Kaku Gothic New. Los números son la tipografía de display: peso Light/Regular, numerales tabulares, tracking -0.02em, a escala enorme clamp(72px, 18vw, 220px) para que un solo valor llene la medida. Los títulos de sección usan la misma familia a 28–44px, Medium, tracking amplio de 0.08em, sentence case, nunca todo en mayúsculas.
• Cuerpo: Shippori Mincho a 17–19px con line-height 1.9 y tracking 0.01em —una serif cálida, ligeramente caligráfica, que susurra en lugar de anunciar.
• Unidades: "pasos", "km", "latidos" en el color apagado a 14px con 0.14em de letterspacing, siempre debajo o al lado del numeral, nunca dentro.
• Escala: modular 1.25 con un salto deliberado para los numerales: 220/136/72 (numerales, clamp), 44/32/28 (títulos de sección), 19/17 (cuerpo), 14 (unidades/leyendas), 12 (metadatos).

Lenguaje de forma

Casi ninguna forma. Las proporciones cuadradas y las hairlines de 1px (#1E1C19 al 12% de opacidad) hacen toda la estructuración. Las tarjetas no existen; en su lugar, cada dato es una banda horizontal de ancho completo separada por una hairline, con el número alineado a la izquierda y la leyenda colgada a un desplazamiento fijo de 6 columnas. La única forma curva en todo el producto es un pequeño sello circular rojo (28px, #C0442A) que marca cada dato como un hanko. Los botones son texto con un subrayado de 1px, no píldoras.

Layout

Rejilla de 12 columnas con márgenes muy amplios: ancho máximo de contenido 1120px a 1280px, 88% a 768px, y una sola columna con 24px de gutter a 375px. El ritmo vertical es extremadamente generoso —160px entre datos en escritorio, 88px en móvil— para que cada número llegue solo. Inicio es: una apertura de 100vh con un número y una línea de copy, luego una secuencia vertical lenta de datos, luego un índice silencioso de todos los datos como tabla de contenidos con puntos conductores. La navegación es una sola fila fija de hairline en la parte superior: el wordmark "humano promedio" a 15px a la izquierda y dos enlaces de texto a la derecha; se atenúa a 40% de opacidad sobre el contenido y vuelve a plena opacidad al hover o al hacer scroll hacia arriba.

Imágenes

Sin fotografía, sin ilustración, sin iconos, sin 3D. Los únicos artefactos visuales son los propios numerales, las hairlines y un pequeño sello rojo por dato. Donde se necesita una comparación, se dibuja como una sola regla vertical delgada con marcas y un segmento de tinta relleno —un diagrama, no un gráfico, en el espíritu de las marcas de medición de MUJI. La textura proviene del fondo de papel blanco y del propio peso de la tipografía, nada más.

7. Signature Design Concept

La página de espécimen. La entrada pública de humano-promedio se compone como una página de un libro de especímenes tipográficos: un campo de papel blanco a 100vh (#F4F1EA) con nada encima excepto una línea de 19px en Shippori Mincho arriba a la izquierda —"Un humano promedio, mientras lees esto, ya ha caminado…"— y luego, ocupando el centro-izquierda óptico del viewport, el número 86.000 en Zen Kaku Gothic New Light a clamp(72px, 18vw, 220px), tinta #1E1C19, con "kilómetros en su vida" en 14px muted directamente bajo su línea base. Una hairline de 1px recorre todo el ancho bajo el número. El único color en la pantalla es un sello circular de 28px #C0442A colocado al final de la hairline. Un solo chevron descendente de dos trazos de 1px se sienta al centro inferior. Sin botón, sin imagen, sin degradado: la composición es una página de un libro de especímenes, y el vacío es el diseño.

Este concepto solo recompone contenido, estados y controles ya aceptados: el número, la leyenda, la unidad, la hairline, el sello y el chevron. No introduce ningún comportamiento, página ni destino nuevos.

8. Interaction Model & Motion Direction

Interaction Model: Static (direction) Motion Tempo: still Hero Dimensionality: flat

Landing Hero Motion Brief

• Sujeto focal: el número 86.000 en Zen Kaku Gothic New Light, solo en el campo de papel blanco, con su leyenda "kilómetros en su vida" y el sello bermellón al final de la hairline.
• Tesis de entrada → transformación → resultado: el visitante llega a un campo vacío → el número cuenta una sola vez desde cero hasta 86.000 en 900ms con ease-out cubic-bezier(0.16, 1, 0.3, 1) → el número se detiene para siempre y la composición queda en reposo, con la hairline dibujada y el sello presionado.
• Vocabulario de movimiento: conteo único de 900ms con ease-out lento; aparición de datos de 8% a 100% de opacidad en 600ms con deriva de 12px hacia arriba al cruzar el 60% del viewport; hairlines que se dibujan de izquierda a derecha en 400ms; sello que se presiona con escala 1.06→1.0 en 120ms. Nada se desliza, rebota ni escala más allá de eso.
• Primer fotograma compuesto: papel blanco #F4F1EA a 100vh; la línea de copy de 19px arriba a la izquierda; el número en su valor inicial en el centro-izquierda óptico; la hairline aún sin dibujar; el sello aún sin presionar; el chevron al centro inferior.
• Estado de movimiento reducido: con prefers-reduced-motion, todos los contadores renderizan sus valores finales de inmediato, todas las revelaciones son instantáneas y no hay deriva.

9. Non-Functional Requirements

NFR-1 — Acceso público anónimo El sitio es de acceso público y anónimo. No hay cuentas, registro, inicio de sesión ni perfil. Provenance: explicit (contrato de páginas con access_requirement: none para ambas superficies; el resultado exitoso es explorar sin introducir datos propios). Rationale: el producto es una experiencia de lectura para público general curioso.

NFR-2 — Legibilidad y contraste El texto legible mantiene un contraste de al menos 4.5:1. No se usa texto gris claro por debajo de 4.5:1. Provenance: dirección creativa (evitar). Rationale: lectura nocturna en teléfono.

NFR-3 — Texto y controles completos en todo viewport Los titulares, wordmarks, etiquetas, números, textos de tarjetas y controles permanecen completamente dentro del viewport y de su contenedor a 375px, 768px y 1280px, envolviendo o escalando (por ejemplo font-size: clamp(...) con su tamaño móvil) para ajustarse, y ningún otro elemento cubre ninguna parte de ellos. Provenance: dirección creativa (regla de legibilidad). Rationale: garantizar lectura completa en móvil, tableta y escritorio.

NFR-4 — Movimiento reducido Con prefers-reduced-motion, todos los contadores renderizan sus valores finales de inmediato, todas las revelaciones son instantáneas y no hay deriva. Provenance: dirección creativa (movimiento). Rationale: accesibilidad y respeto por la preferencia del usuario.

NFR-5 — Rendimiento de lectura La secuencia de datos se revela de forma fluida al hacer scroll, sin bloqueos ni saltos de layout. Provenance: required_inference (la experiencia de lectura depende de un scroll fluido). Rationale: el ritmo vertical generoso y las revelaciones por intersección requieren un renderizado estable.

NFR-6 — Contenido no histórico El contenido no debe ser de cosas históricas; debe tratar sobre cosas que le pueden pasar a un humano. Provenance: explicit (restricción dura). Rationale: es la definición misma del producto.

10. Tech Stack

• Frontend: React (aplicación web). Provenance: basic_default — no especificado por el usuario; se elige React por ser el estándar para una experiencia de lectura web con animaciones de conteo y revelación por intersección.
• Backend: Python / FastAPI, sirviendo el contenido de datos curiosos y las páginas públicas. Provenance: basic_default — no especificado por el usuario; se elige FastAPI por su simplicidad para servir contenido de solo lectura.
• Almacenamiento: almacenamiento simple para el conjunto fijo de datos curiosos (por ejemplo, un archivo de datos versionado o una base de datos ligera). Provenance: basic_default — no especificado por el usuario; el contenido es fijo y de solo lectura.
• Contenedores: Docker / docker-compose para el frontend y el backend. Provenance: basic_default — no especificado por el usuario.
• Kubernetes: no se incluye; el despliegue no lo requiere. Provenance: basic_default — no especificado por el usuario.

11. Assumptions and Constraints

Supuestos

• A-1: El conjunto de datos curiosos es fijo y curado; no hay entrada de datos por parte del visitante ni generación dinámica de contenido. [Default — not specified by user]
• A-2: El sitio se sirve como una aplicación web propia con dos superficies públicas: Inicio y Datos curiosos. Provenance: contrato de páginas (page_contract_version=1).
• A-3: No se requiere identidad de aplicación, sesión ni estado privado, porque no hay estado durable que conservar ni compromiso que vincular a un participante. Provenance: required_inference a partir del contrato de acceso anónimo.
• A-4: El contenido se presenta en español, coherente con el contexto del usuario (MX) y con el copy de la dirección creativa. [Default — not specified by user]

Restricciones

• C-1 (dura, explícita): El contenido no debe ser de cosas históricas; debe tratar sobre cosas que le pueden pasar a un humano.
• C-2: Sin cuentas, registro, inicio de sesión ni perfil.
• C-3: Sin panel de control, gráficos de barras, donuts, anillos de progreso, insignias de porcentaje, emojis ni gamificación (rachas, insignias de puntuación, calcomanías de "wow", signos de exclamación).
• C-4: Sin fotografía, ilustración, iconos, renders 3D, blobs de degradado ni glassmorphism.
• C-5: Sin tarjetas, mosaicos, paneles ni contenedores con radio de borde o sombra.
• C-6: Sin azul/índigo en la paleta; el único acento es el bermellón apagado #C0442A.
• C-7: Sin carruseles con reproducción automática, marquesinas ni parallax con secuestro de scroll.
• C-8: Sin titulares todo en mayúsculas; sin Inter/Roboto/system-ui.
• C-9: Sin easing con rebote o resorte.
• C-10: La plantilla genérica SaaS índigo/azul sobre blanco está prohibida para este proyecto.

12. Glossary

• Humano promedio: la figura estadística cuyas cifras de vida cotidiana —pasos, kilómetros, sueño, latidos— se presentan en el sitio.
• Dato curioso: una cifra sobre algo que le puede pasar a un humano promedio, presentada como una banda de ancho completo con número, unidad, leyenda y sello.
• Banda de dato: la unidad de presentación de un dato curioso: ancho completo, separada por una hairline de 1px, con el número a la izquierda y la leyenda a un desplazamiento fijo de 6 columnas.
• Hairline: línea de 1px (#1E1C19 al 12% de opacidad) que estructura el layout y se dibuja de izquierda a derecha al entrar un dato.
• Sello hanko: pequeño sello circular bermellón (#C0442A, 28px) que marca cada dato; el único color del sistema.
• Regla de medición: diagrama de comparación consistente en una regla vertical delgada con marcas y un segmento de tinta relleno; nunca un gráfico de barras, donut o anillo de progreso.
• Índice: tabla de contenidos con puntos conductores que lista todos los datos curiosos.
• Visitante curioso: la persona del público general que llega al sitio a leer y explorar datos curiosos sin introducir datos propios.