Marca y sistema.

---
version: alpha
name: Calaverita
description: Estudio de software con una fábrica interactiva y navegación editorial compartida.
logo:
  glyph: https://calaverita.dev/logo.svg
  badge: https://calaverita.dev/favicon.svg
colors:
  primary: "#FF5722"
  secondary: "#EFEEEB"
  tertiary: "#141417"
  neutral: "#08080A"
  muted: "#A6A4A8"
  line: "rgba(239, 238, 235, 0.13)"
typography:
  display:
    fontFamily: Barlow Condensed
    fontWeight: 700
    lineHeight: 0.94
    letterSpacing: -0.015em
  body:
    fontFamily: Geist
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
  mono:
    fontFamily: JetBrains Mono
    fontSize: 12px
    fontWeight: 400
rounded:
  sm: 4px
  md: 6px
  lg: 9px
  xl: 10px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
---

# Calaverita — Sistema de diseño

## Overview

Un estudio de ingeniería que muestra cómo construye software. La home es una fábrica tridimensional a pantalla completa; la interfaz queda en los bordes. Las páginas de contenido conservan el mismo menú, tipografía, paleta y lenguaje de superficies.

## Colors

Negro #08080A, blanco #EFEEEB y superficies #141417. El naranja #FF5722 identifica enlaces, selecciones y detalles de la fábrica. El texto secundario usa #A6A4A8. Los bordes usan rgba(239, 238, 235, 0.13). El color de gráficos con significado se conserva.

## Typography

Barlow Condensed 700 para títulos y menú. Títulos de sección entre 44 y 88px, interlínea 0.94, tracking -0.015em. Geist para lectura, formularios y descripciones. JetBrains Mono para identidad, hora y datos. Los artículos mantienen títulos en caja normal y una medida cómoda de lectura. La cursiva serif deja de ser el recurso de énfasis de los titulares.

## Layout

Contenedor máximo de 1400px; márgenes de 24px en móvil y de 32 a 56px en escritorio. Navegación compartida: marca arriba a la izquierda, contacto arriba a la derecha y menú anclado en la esquina inferior. Las rutas de contenido reservan espacio para el menú. Solo la home ocupa exactamente un viewport sin scroll.

## Elevation & Depth

La profundidad de la home pertenece a la escena WebGL. Listados de personas y trabajo se organizan con espacio y divisores. El menú usa un panel oscuro con fondo de superposición para separar la navegación del contenido.

## Shapes

Controles y superficies con radios de 4 a 6px. El menú usa 9–10px. Los círculos se reservan para indicadores e iconos que lo requieran. La marca oficial conserva su proporción y colores.

## Components

- Navegación: panel accesible con enlaces reales, Escape y retorno de foco. La misma estructura en todas las rutas.
- Botones: mínimo 44px de alto. Primario blanco sobre negro; en hover, naranja con texto negro. Secundario con borde y fondo transparente.
- Filtros: estado seleccionado visible mediante subrayado naranja y aria-pressed; los resultados no coincidentes se ocultan.
- Equipo: lista de personas y agentes con iniciales, nombre, rol y biografía; se distingue explícitamente a los agentes de IA.
- Fábrica: sin paredes ni texto dentro de la escena. Respetar movimiento reducido, carga diferida y liberación de WebGL al abandonar la ruta.

## Do's and Don'ts

Conservar contenidos y contactos verificables. Dar protagonismo a la fábrica y mantener legibles las rutas editoriales. Reutilizar el menú y las fuentes compartidas. No introducir estadísticas inventadas, controles de animación visibles, terminales decorativas por persona ni halos de color detrás de los encabezados.

:root {
  --void:        #08080A;
  --bone:        #EFEEEB;
  --ash:         #141417;
  --cempasuchil: #FF5722;
  --muted:       #A6A4A8;
  --line:        rgba(239, 238, 235, 0.13);
}