Overview

#	ID	Sección	Tipo	Ratio	Mín. px	Peso	Prioridad
01	hero-fullbleed	Hero	Lifestyle compuesto con texto horneado	16:9 desktop · 3:2 tablet · 3:4 mobile · 3:4 mob	3200 × 1800 px (desktop)	< 320 KB desktop · < 180 KB tablet · < 120 KB mobile (post-optimización WebP)	Imprescindible
02	about-josefina	Sobre Josefina	Retrato editorial	4:5	2400 × 3000 px	< 220 KB	Imprescindible
03	book-cover	El libro	Producto	3:4	2000 × 2700 px	< 200 KB	Imprescindible
04	videos-thumb	Videos destacados	Frame de video / poster	4:5	1200 × 1500 px	< 120 KB c/u	Recomendada
05	og-image	Open Graph (compartir)	Compuesta	1.91:1	1200 × 630 px	< 150 KB	Recomendada
06	favicon	Favicon / touch icons	Mark / monograma	1:1	512 × 512 px	< 30 KB c/u	Imprescindible

Detalle por toma

`hero-fullbleed`

Imprescindible

Hero · src/components/sections/Hero.astro

Tipo: Lifestyle compuesto con texto horneado · Variable por breakpoint
Aspect ratio: 16:9 desktop · 3:2 tablet · 3:4 mobile (desktop) · 3:4 (mobile)
Mínimo: 3200 × 1800 px (desktop)
Recomendado: 4800 × 2700 px (desktop)
Peso máx. servido: < 320 KB desktop · < 180 KB tablet · < 120 KB mobile (post-optimización WebP)
Safe zone: Top 80 px reservados para Nav transparente (no poner texto/sujeto crítico ahí — se tapa con el header). Bottom 25% desktop / 30% mobile reservado para CTAs HTML que flotan encima (la imagen NO incluye los botones). El sujeto y el texto baked-in NUNCA pueden ocupar la misma columna vertical: separar claramente lado izquierdo (texto) vs lado derecho (Josefina) en desktop/tablet; en mobile el texto va arriba y Josefina abajo.
Composición: Josefina + paisaje cálido + texto baked-in en tipografía editorial. La foto cubre el viewport completo del hero (~94-100vh). El cliente diseña la composición (incluye foto base + retoque + tipografía horneada). Cada breakpoint tiene su propia versión adaptada — no usar la misma imagen estirada/recortada.
Vestuario: Tonos crema, bronce y beige cálido. Capas suaves.
Iluminación: Golden hour / atardecer. Lateral cálida. Sombras pictóricas.
Mood: Cinemático, contemplativo, editorial-marca.
Alt text: Foto editorial de Josefina Arriola en paisaje cálido — del caos al propósito (texto horneado en la imagen)
Nota: CAMBIO DE ESTRATEGIA respecto al diseño original: el cliente prefiere diseñar el texto del título y subtítulo HORNEADO en la imagen (en vez del overlay HTML que el código original tenía). Esto fuerza entregas múltiples: 6 archivos finales (3 breakpoints × 2 idiomas). Los CTAs ("Comenzar mi proceso" / "Descubrir cómo") siguen siendo HTML por encima — NO hornear botones. LCP crítico para mobile: marcar fetchpriority="high" en la imagen mobile.
Naming convention: hero-{es|en}-{mobile|tablet|desktop}.{webp|png} — ej: hero-es-desktop.webp

Entregas por breakpoint

Breakpoint	Viewport	Ratio	Mínimo	Recomendado	Peso máx	Safe top	Safe bottom
mobile	< 600 px	3:4 (vertical)	1200 × 1600 px	1500 × 2000 px	< 120 KB WebP servido	80 px (header transparente sobre la imagen)	30% del alto (CTAs HTML encima)
tablet	600 – 1024 px	3:2 (paisaje suave)	2400 × 1600 px	3000 × 2000 px	< 180 KB WebP servido	80 px	25% del alto
desktop	≥ 1024 px	16:9 (paisaje wide)	3200 × 1800 px	4800 × 2700 px	< 320 KB WebP servido	80 px	25% del alto

mobile: Texto horneado arriba, Josefina abajo. NO componer en horizontal — el viewport mobile es vertical.
tablet: Composición horizontal pero con menos extensión lateral que desktop. Texto a un lado, Josefina al otro.
desktop: Texto baked-in a la izquierda (zona tipográfica), Josefina a la derecha (zona retrato). El centro horizontal debe respirar.

Texto a hornear por idioma

ES

Del caos al propósito

Transforma tu historia en claridad, dirección y poder personal
EN

From chaos to purpose

Transform your story into clarity, direction, and personal power

Recomendaciones de proceso

Pre-aprobación con mockup en miniatura (~600 px) antes de invertir tiempo en producción/retoque/horneado. Entregar 6 miniaturas conceptuales con safe zones marcadas, aprobamos composición, después se renderiza el final. Evita el "ya quedó hecho, rehacerlo es caro".
Versión neutral opcional sin texto horneado del desktop (`hero-neutral-desktop.{webp|png}`). Sirve como master para regenerar variantes si cambia el copy o se agrega un 3er idioma, y como insumo opcional para mejorar el preview de Open Graph.
Source en PNG o WebP lossless — nunca JPG como master. JPG comprime con pérdida; partir de ahí amplifica artefactos al regenerar variantes WebP/AVIF.
Quality factor en producción: WebP servido a q=82 (default de astro:assets, sweet spot para fotos editoriales). No es necesario pre-comprimir — Astro lo hace en build.

Tipografía exacta (replicar)

"Del" / "al" (palabras de enlace en el título)

Fuente
Cormorant Garamond (https://fonts.google.com/specimen/Cormorant+Garamond)

Peso
300 Light

Estilo
Italic

Color

#4a3d2e (ink-soft)

Detalle
lowercase
"caos" (palabra script bronce)

Fuente
Pinyon Script (https://fonts.google.com/specimen/Pinyon+Script)

Peso
400 Regular

Color

#8c6536 (bronze)
"propósito" (palabra script principal)

Fuente
Pinyon Script

Peso
400 Regular

Color

#2a221a (ink)

Detalle
Tamaño levemente mayor que "caos" — es el ancla visual. Lleva un swoosh manuscrito sutil debajo en color bronce #8c6536.
Subtítulo

Fuente
Cormorant Garamond

Peso
400 Regular

Estilo
Italic

Color

#4a3d2e (ink-soft)

Detalle
Tamaño ~40-45% del título principal. Ancho máximo ~32 caracteres por línea.

`about-josefina`

Imprescindible

Sobre Josefina · src/components/sections/Sobre.astro

Tipo: Retrato editorial · Vertical
Aspect ratio: 4:5
Mínimo: 2400 × 3000 px
Recomendado: 4000 × 5000 px
Peso máx. servido: < 220 KB
Safe zone: Espacio inferior libre para firma manuscrita encima ("— Josefina" en script bronce).
Composición: Plano medio largo. Sentada. Perfil 3/4. Puede mirar fuera de cámara.
Vestuario: Tono complementario al hero (rosa polvo o bronce sutil).
Iluminación: Natural ventana lateral. Sombras pictóricas.
Mood: Reflexivo, cercano, autobiográfico.
Alt text: Retrato editorial de Josefina Arriola sentada en interior cálido

`book-cover`

Imprescindible

El libro · src/components/sections/Libro.astro

Tipo: Producto · Vertical
Aspect ratio: 3:4
Mínimo: 2000 × 2700 px
Recomendado: 4000 × 5400 px
Peso máx. servido: < 200 KB
Composición: Libro físico ángulo 3/4 sobre superficie de papel kraft o lino crudo. Sombra natural. Sin plantas decorativas. Fondo oscuro (la sección renderea sobre --color-ink).
Iluminación: Lateral suave. Catchlight discreto en cubierta.
Mood: Producto editorial, no comercial.
Alt text: Libro Del Caos al Propósito de Josefina Arriola, edición tapa blanda

`videos-thumb`

Recomendada

Videos destacados · src/components/sections/Videos.astro

Tipo: Frame de video / poster · Vertical
Aspect ratio: 4:5
Mínimo: 1200 × 1500 px
Recomendado: 2000 × 2500 px
Peso máx. servido: < 120 KB c/u
Composición: Frame del video real (idealmente con título visible). Si no hay video aún, retrato editorial corto con leve grano cinematográfico.
Iluminación: Cálida.
Mood: Conversación, presencia, curiosidad.
Alt text: Cada thumb usa el título del video como texto alternativo.
Nota: Cantidad: 4 thumbs (videos-thumb-1 a videos-thumb-4).

`og-image`

Recomendada

Open Graph (compartir) · src/components/Seo.astro

Tipo: Compuesta · Horizontal
Aspect ratio: 1.91:1
Mínimo: 1200 × 630 px
Recomendado: 2400 × 1260 px
Peso máx. servido: < 150 KB
Safe zone: Logo y título integrados. Safe-zone de 64 px en cada borde (Twitter/Facebook recortan).
Composición: Retrato de Josefina + título "Del Caos al Propósito" en tipografía script bronce sobre crema.
Iluminación: Cálida.
Mood: Marca personal.
Alt text: Josefina Arriola — Del Caos al Propósito
Nota: Ya hay fallback funcional: OG dinámico tipográfico generado con satori en /og/{lang}.png. Foto real solo si se quiere mejorar el preview de share.

`favicon`

Imprescindible

Favicon / touch icons · public/

Tipo: Mark / monograma · Cuadrada
Aspect ratio: 1:1
Mínimo: 512 × 512 px
Recomendado: 1024 × 1024 SVG + PNG export
Peso máx. servido: < 30 KB c/u
Composición: Monograma JA en script bronce sobre crema. Versión maskable con safe area central (10% padding).
Iluminación: —
Mood: Marca.
Alt text: Josefina Arriola monograma
Nota: Tamaños: favicon.svg + favicon-16/32/48.png + apple-touch-icon.png (180×180) + icon-192/512.png (Android maskable).

Notas de entrega

Formato
JPG calidad alta o PNG · sRGB · sin compresión destructiva.
Naming
josefina-{id}.jpg — el id corresponde a la columna del shot list.
Web
Astro genera WebP + AVIF automáticamente desde src/assets/photography/.
Liberación
Modelos firman release. Privacidad GDPR para asistentes identificables en eventos.