Documento interno · no indexado

Sistema visual Maia Home

Informe técnico del lenguaje de diseño que rige el sitio (analizado sobre /Home y /Nosotros): tipografía editorial, paleta de marca, ritmo de espaciado y microinteracciones.

01 · Esencia

Editorial, sereno y cálido

Estética editorial de revista: titulares Montserrat en pesos altos (700–900), mucho aire en blanco y fotografía real de las propiedades como protagonista.
Sobriedad con un solo acento: base neutra (blanco / negro suave) y el amarillo de marca usado con moderación como punto focal.
Narrativa con scroll: secciones que aparecen suavemente al entrar en viewport, contando una historia de arriba a abajo.
Bilingüe: todo el copy alterna ES/EN según localStorage.language.

02 · Color

Paleta de marca

Acento de marca

Maia Yellow#FDDB51

Acento primario: fondos suaves de íconos (/15–/30), subrayados, badges

Yellow Strong#F9D316

Hover/activo y énfasis tipográfico (palabras destacadas en titulares)

Neutros

neutral-900#171717

Texto principal y botones sólidos

neutral-600#525252

Texto de cuerpo / descripciones

neutral-500#737373

Eyebrows en mayúsculas

neutral-50#FAFAFA

Fondos de sección alternos

white#FFFFFF

Lienzo base y tarjetas

Regla clave de color: el énfasis amarillo en titulares se aplica con valor literal #F9D316 inline, porque la regla .maia-display em fuerza gris y los tokens de Tailwind text-maia-yellow-strong no siempre se generan. El amarillo nunca se usa para texto largo (contraste insuficiente), solo en palabras sueltas, íconos y subrayados.

03 · Tipografía

Una sola familia: Montserrat

Display

Montserrat Bold

Todos los titulares (H1/H2/H3). Peso base 700 (800 solo para acentos puntuales), leading-[1.1–1.14], tracking-[-0.01em]. Fuerte pero aireado; la palabra clave va en italic, en gris o amarillo.

Cuerpo / UI

Montserrat — texto, etiquetas y botones

Cuerpo: Montserrat 400/500, 14–18px, neutral-600, leading-relaxed. Botones: 600/700. Microcopy y eyebrows: 500/600, mayúsculas, tracking-[0.28em]–[0.32em], 11–12px. Cargada desde Google Fonts con preconnect y display=swap (pesos 300–900).

04 · Layout

Ritmo y aire

Contenedor: max-w-7xl mx-auto con padding px-5 md:px-8.
Ritmo vertical: secciones con py-16 md:py-24 (hasta py-28 en bloques editoriales).
Alternancia de fondo: blanco → neutral-50 con border-y border-neutral-100 para separar secciones.
Grids: tarjetas en sm:grid-cols-2 lg:grid-cols-3, gaps generosos (gap-x-8 gap-y-10/14).
Radios: tarjetas e imágenes rounded-2xl; botones, chips y badges rounded-full.
Anclas de scroll: scroll-mt-24 + IDs (#departamentos, #historia, #hablemos).

05 · Movimiento

Microinteracciones

Entrada al viewport (Framer Motion)

Patrón base: initial={opacity:0, y:14–20} → whileInView={opacity:1, y:0}.
viewport={once:true, margin:'-60px'}: anima una sola vez, un poco antes de entrar.
Duración 0.4–0.7s con stagger por índice (delay: (i % 3) * 0.06).
Hero: el slider usa cross-fade + leve scale (efecto Ken Burns).

Hover & estados — pruébalos

Ícono /15→/30

900→800

borde en hover

Hablemos →link sutil

Tarjeta

elevación en hover

06 · Patrones

Componentes recurrentes

Encabezado de sección

Eyebrow en mayúsculas (tracking ancho, neutral-500) + H2 Montserrat extrabold con una palabra en italic. Ancho contenido a max-w-2xl, margen inferior mb-12 md:mb-16.

Tarjeta editorial

Ícono en círculo amarillo translúcido → título Montserrat bold → cuerpo Montserrat regular. Fondo blanco, rounded-2xl, borde tenue y sombra solo al hover.

Subrayado de marca

Palabra resaltada con un trazo amarillo semitransparente detrás (highlight tipo marcador), usado en el hero de /Nosotros.

Stats band

Números grandes en Montserrat extrabold (text-5xl) con etiqueta en mayúsculas debajo; la calificación añade una estrella amarilla rellena. Solo muestra métricas reales del backend.