# Astromedia — Sistema de Diseño > Documento legible por IA que describe el sistema visual de astromedia.cl. Permite a herramientas de diseño asistidas por LLM (Claude Design, agentes de UI, generadores de mockups) reproducir, auditar o extender la identidad visual del proyecto sin necesidad de abrir Figma o el código fuente. Stack visual: **Tailwind CSS** (CDN, configurado inline en cada HTML) + **Chart.js** para visualizaciones + **canvas HTML5** para el fondo de estrellas animado. No hay framework de componentes — todo es HTML semántico con utilities de Tailwind. --- ## Paleta de colores Definida en `tailwind.config.theme.extend.colors` dentro de cada página HTML. | Token | Hex | Tailwind ref | Uso | |-------------|-----------|------------------|------------------------------------------------| | `dark` | `#0f172a` | slate-900 | Fondo global de la app (body, header) | | `primary` | `#6366f1` | indigo-500 | Color de marca, gradientes, énfasis | | `primaryHover` | `#4f46e5` | indigo-600 | Hover de CTAs primarios | | `secondary` | `#94a3b8` | slate-400 | Texto secundario, bordes suaves | **Colores funcionales** (Tailwind por defecto, usados consistentemente): - Éxito / "en vivo": `green-400` (`#4ade80`), `green-500` - Alerta / atención: `yellow-400` (`#facc15`) - Error / grabación: `red-500` (`#ef4444`) - Texto neutro: `white`, `white/70`, `white/50`, `white/10` (bordes), `text-gray-300` **Gradientes recurrentes**: - Headlines: `bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400` con `bg-clip-text text-transparent` - Fondos de sección: `bg-gradient-to-b from-dark to-slate-900` **Selección de texto**: `selection:bg-primary selection:text-white`. --- ## Tipografía Cargada vía Google Fonts (`fonts.googleapis.com`) con `preconnect`. | Familia | Pesos disponibles | Uso | |---------------|------------------------|--------------------------------------| | **Inter** | 300, 400, 500, 600, 700 | Toda la UI (sans por defecto) | | **Roboto Mono** | 400 | Código, credenciales, etiquetas técnicas | Escala tipográfica (Tailwind): - Hero H1: `text-4xl md:text-6xl lg:text-7xl font-bold` - Section H2: `text-3xl md:text-5xl font-bold` - Subsection H3: `text-2xl md:text-3xl font-semibold` - Eyebrow / kicker: `text-sm font-semibold uppercase tracking-wider text-indigo-400` - Body: `text-base` o `text-lg text-gray-300` - Caption / meta: `text-xs text-white/50` Body global: `antialiased`, color base `white` sobre fondo `#0f172a`. --- ## Layout y espaciado - **Contenedor**: `container mx-auto px-6` con anchos máximos por sección (`max-w-4xl`, `max-w-5xl`, `max-w-7xl`). - **Header**: fijo, `h-16`, `bg-dark/90 backdrop-blur-sm`, `border-b border-white/5`. Main usa `pt-24` para compensar. - **Secciones**: padding vertical generoso, `py-20 md:py-32` para hero, `py-16 md:py-24` para el resto. - **Grid**: cards en `grid md:grid-cols-2 lg:grid-cols-3 gap-6`. - **Border radius**: `rounded-2xl` para cards grandes, `rounded-full` para botones CTA, `rounded-lg` para inputs. - **Bordes sutiles**: `border border-white/10` (cards), `border-white/5` (separadores). --- ## Componentes clave ### Header Fijo arriba, transparente con blur. Logo + nombre a la izquierda. A la derecha: toggle de idioma (pill `bg-white/5 border border-white/10 rounded-full`), link "Portal Clientes", CTA pill indigo "Iniciar Proyecto". ### Botones (CTAs) - **Primario**: `bg-indigo-600 hover:bg-indigo-500 text-white font-semibold px-6 py-3 rounded-full transition-colors` - **Secundario**: `border border-white/20 hover:border-white/40 text-white px-6 py-3 rounded-full` - **Texto**: `text-white/70 hover:text-white transition-colors` ### Cards de caso de uso Fondo `bg-white/5` con `border border-white/10`, padding `p-6` u `p-8`, `rounded-2xl`. Icono grande arriba, H3, descripción en `text-gray-300`. ### Wizard / cuestionario Steps con clase `.wizard-step` (display:none por defecto, `.active` los muestra con animación `fadeIn 0.5s`). Indicador de paso numérico, botones "Anterior" / "Siguiente" abajo. ### Loader inicial Pantalla completa `fixed inset-0 z-50 bg-dark`, logo centrado con animación `animate-pulse-slow` (3s cubic-bezier). ### Fondo animado `` posicionado `fixed top-0 left-0 w-screen h-screen z-0 pointer-events-none`. Renderiza estrellas en movimiento — efecto "espacial" coherente con la marca Astromedia. --- ## Iconografía e ilustración - **Logo**: `/favicon.png` (isotipo de Astromedia). Variante en `public/assets/isotipo-Cj0HQ2N7.png`. - **Emojis funcionales** usados como iconos inline en CTAs y bullets: ⚡ (rapidez), ⏱️ (tiempo), 🌐 (idioma), 🎬 (broadcast), 🔐 (privacidad). - **Sin librerías de iconos SVG** — todo es emoji + componentes Tailwind. --- ## Animaciones | Nombre | CSS | Uso | |----------------|------------------------------------------------|------------------------------| | `pulse-slow` | `pulse 3s cubic-bezier(0.4,0,0.6,1) infinite` | Logo en loader, indicadores | | `fadeIn` | `opacity 0→1, translateY(10px→0) en 0.5s ease-out` | Entrada de wizard-step | | `scroll-smooth` | nativo (clase en ``) | Navegación por anclas | Transiciones por defecto en hovers: `transition-colors` (sin duración explícita, usa el default de Tailwind, ~150ms). --- ## Responsividad Mobile-first. Breakpoints estándar de Tailwind: - `sm:` ≥640px — muestra el CTA "Iniciar Proyecto" en header. - `md:` ≥768px — saltos tipográficos del hero, grids de 2 columnas. - `lg:` ≥1024px — grids de 3 columnas en cards. `overflow-x-hidden` global para evitar scroll horizontal por el canvas. Mobile UX: `-webkit-tap-highlight-color: transparent` en `*` para evitar el flash gris al tocar. --- ## Internacionalización visual Dos versiones de la home con **mismo sistema de diseño** y **mismo posicionamiento** (agencia de sistemas digitales), distinto idioma: - `/` (ES): "Productos Digitales Reales", sistemas a medida para negocios en Latinoamérica. - `/en/` (EN): "Real Digital Products", engineering-led delivery, casos B2B (kelle.au, kineintensiva.cl, transg.cl). El toggle de idioma vive en el header derecho. Auto-redirect por `navigator.language` al cargar `/`. --- ## SEO + datos estructurados `