Design System

Tipografía

Familia: --font-base — Source Han Sans (self-hosted, 4 pesos).

Escala

Pesos

Botones

Padding: 15px 30px (primario/outline) · 11px 22px (cta) — radio-full, borde 1.5px.

Banners / Heroes

Medidas ancho × alto reales, medidas en el sitio corriendo (getBoundingClientRect), no estimadas. Referencia de escritorio: viewport 1440×900. Referencia de móvil: viewport 390×844. Los banners full-bleed ocupan el 100% del ancho del viewport — por eso el ancho cambia entre columnas.

Muestra	Sección	Componente	Medida — escritorio	Medida — móvil	Notas
	PDP Hero (carrusel)	PdpHero.astro	1440 × 640px	390 × 560px	Mismo video que el Hero de Home (video-kaiyi.mp4, fuente 1920×1080) + 2 imágenes de submodelos, rotación automática. Poster real por modelo (ver modeloPdp.ts → hero.poster), no un archivo fijo
	Home Hero (carrusel)	HeroCarrusel.css	1440 × 900px (100vh)	390 × 844px (100vh)	Pantalla completa — el alto es siempre el del viewport. Video fuente (video-kaiyi.mp4): 1920 × 1080px (16:9)
	Encabezado de página	EncabezadoPagina.astro	1440 × 350px	390 × 280px	Nosotros, Posventa, Sucursales, etc.
	Especificaciones (banda oscura)	PdpEspecificaciones.astro	1440 × 290px	390 × 396px	Más alto en móvil: specs pasan de 1 fila a grid 2×2. Fondo real por modelo (ver modeloPdp.ts → especificaciones.fondo), no un archivo fijo. Alto aproximado (depende del contenido, no medido en vivo)
	Destacados — 1 tile (de 3)	PdpDestacados.astro	474 × 480px	390 × 380px	3 columnas de 474px c/u en escritorio (full-bleed, sin contenedor) → 1 columna apilada en móvil. Cada modelo trae sus propias 3 fotos (ver modeloPdp.ts → destacados)
	Galería PDP — celda grande	PdpGaleria.astro	853 × 540px	390 × 219px (16:9)	Celda izquierda, ocupa 2 filas en escritorio (full-bleed, sin contenedor). Cada modelo trae sus propias 3 fotos (ver modeloPdp.ts → galeria)
	Galería PDP — celda chica	PdpGaleria.astro	569 × 269px	390 × 219px (16:9)	2 celdas apiladas a la derecha en escritorio
	PDP — CTA final	PdpCta.astro	1440 × 435px	390 × 298px	Fondo oscuro + scrim. Fondo real por modelo (ver modeloPdp.ts → cta.fondo). Alto aproximado (depende del texto, no medido en vivo)
	Posventa — CTA final	PosventaCta.astro	1440 × 435px	390 × 298px	Mismo componente/estilo que el CTA del PDP, pero con su propio fondo fijo (ver posventaServiceCta.ts). Alto aproximado (depende del texto, no medido en vivo)
	Posventa — Garantía (fondo)	PosventaGarantia.astro	full-bleed, alto variable	full-bleed, alto variable	Va después de "Talleres". Fondo oscurecido con overlay fuerte (grayscale + brightness 0.4) detrás de texto + lista de coberturas — no tiene una relación de aspecto fija, el alto lo define el contenido. Cualquier panorámica de buena calidad sirve: recomendado 1920×1080px o más, motivo centrado (la composición no es crítica por el overlay)
	Noticia destacada	NoticiasDestacada.astro	1136 × 480px	347 × 360px	No es full-bleed: va dentro del contenedor (máx. 1280px)
	Home — Showroom (video)	SeccionShowroom.astro	1440 × 648px (72vh, full-bleed)	390 × 439px (52vh, ≤560px)	Última sección de la Home, va después de "Posventa". Es el mismo video-kaiyi.mp4 del Hero (fuente 1920×1080) con otro recorte: clamp(440px, 72vh, 680px) en escritorio, clamp(340px, 52vh, 480px) en móvil. Con filtro grayscale + oscurecido. Medida calculada desde el CSS, no medida en vivo
	Nosotros — CTA final	NosotrosCta.astro	1440 × 435px	390 × 298px	Última sección de /nosotros, mismo patrón que el CTA del PDP/Posventa (full-bleed, fondo oscuro + scrim). Alto aproximado (depende del texto, no medido en vivo)