# Componentes · código listo Cada bloque se copia de `assets/plantilla.html`. Acá está el porqué de cada decisión y las variantes. --- ## 1 · Eyebrow + título ```html
Introducción

De qué se trata el proyecto

``` El eyebrow es rojo, 10.5 px SemiBold, `letter-spacing: .34em`, mayúscula. En el PDF original las letras están separadas a mano (`I N T R O D U C C I Ó N`); en HTML se resuelve con letter-spacing y se escribe normal. **Variante gris** (`.eyebrow.gris`) para rótulos internos de una lámina, como `ESPECIFICACIÓN` sobre la columna de campos. **Nunca** dos eyebrows del mismo color en la misma lámina. --- ## 2 · Tarjeta gris ```html
01

Qué es

…

``` Fondo `#f7f5f6`, sin borde, radio 6, padding 28×26. Siempre de a tres en `.cols3`. El número va arriba, separado 26 px del subtítulo. Si la tarjeta no lleva número, el subtítulo sube a la posición del número. **Con dos tarjetas** la lámina se ve vacía: usar dos columnas de contenido sin tarjeta, o tres tarjetas. **Con cuatro** las tarjetas quedan de 215 px y el párrafo no entra: pasar a cuatro tarjetas sin párrafo, solo título. --- ## 3 · Campo etiqueta / valor ```html
Ancho × largo
70 × 90 cm27.56 × 35.43 pulg
``` Rótulo gris 9 px espaciado, valor vino 13.5 SemiBold, divisoria `#e5e6ea` de 1 px abajo. El último campo antes de la banda lleva `border-bottom:none`. El `.alt` es la conversión de unidad: mismo tamaño, color gris, 24 px de separación. Sirve para pulgadas/cm, mils/micras, kg/lb. Columna de 427 px de ancho. Entre cinco y seis campos por lámina; con más, el bloque se estira y pierde el aire. --- ## 4 · Banda roja de dato ```html
Precio FOB Callao
USD por paquete
$ 0.580
``` Alto fijo 66 px, ancho el de la columna. Rótulo y aclaración en `#f6d0d8`, cifra blanca 25 ExtraBold a la derecha. Es el cierre de la lámina de ficha: el dato que el cliente vino a buscar. **Una sola por lámina.** Si hay dos cifras que compiten, una va en campo normal. --- ## 5 · Barras a escala La altura de cada barra es proporcional al dato real, no decorativa. Se calcula sobre el mayor: ``` altura% = valor / valor_máximo × 100 ``` El color se interpola de `#f6d0d8` (menor) a `#ce2441` (mayor). Paleta de siete pasos ya calculada: ``` #f6d0d8 #f2b8c4 #eda0b1 #e0879b #d96e86 #d45570 #ce2441 ``` El valor va encima en rojo 13 ExtraBold; la etiqueta debajo en gris 11 Regular. El rótulo del eje cierra abajo en mayúscula espaciada gris. **Nunca** ejes, cuadrículas ni marcas de escala: la barra es la escala. --- ## 6 · Dato hero Un número de 58 px ExtraBold, con una palabra de apoyo de 34 px en vino debajo, eyebrow rojo abajo y un párrafo al costado. Es la lámina más silenciosa del sistema y por eso la más fuerte. Solo se usa cuando hay un número que vale la lámina entera: un porcentaje, una cifra de capacidad, un plazo. --- ## 7 · Portada Lámina completa en rojo `#ce2441`. Título blanco 52 px, bajada en `#f6d0d8` 15 px, eyebrow en rosa claro. Es la única lámina con fondo de color de todo el sistema. Si el documento lleva portadillas de sección, van en blanco con el número grande en rojo, nunca en rojo pleno. --- ## Escala de grises de apoyo Cuando hace falta un tercer nivel entre el gris de tarjeta y la línea: ``` #f7f5f6 fondo de tarjeta #e5e6ea divisoria #c9c9cf borde activo, uso excepcional #8c8c8c rótulo #595959 cuerpo ``` --- ## Chequeo antes de entregar - ¿Hay más de un dato grande en alguna lámina? - ¿Algún párrafo pasa las cuatro líneas? - ¿Quedó algún título en negro o en rojo en vez de vino? - ¿Las barras son proporcionales al dato real? - ¿Cada superlativo tiene su nota al pie? - ¿Se rasterizó el PDF y se revisó lámina por lámina?