# LovePostal CDN — Guía para Claude Code

## Qué es esto

CDN estático de assets de marca de **LovePostal** (papelería / postales).
Slug: `lovepostal`. Dominio CDN previsto: `https://cdn.lovepostal.studio/`.

## Restricciones críticas

> ⚠️ **NO uses la herramienta `Read` sobre archivos `.png`, `.jpg`, `.jpeg`, `.webp`**.
> Las imágenes superan el límite del lector multimodal y romperán la sesión (error 8000px).
>
> Para metadatos usa SIEMPRE CLI:
>
> ```bash
> sips -g pixelWidth -g pixelHeight archivo.png
> stat -f%z archivo.png
> file archivo.png
> ```
>
> Para resize / conversión en lote ver scripts inline en `CLAUDE_TEMPLATE.md`
> (Pillow, single-file). Replicar pegándolos en un nuevo `.py` cuando haga falta.

> ⚠️ **NO modifiques `_backup_imagenes/`**. Es la fuente de verdad.

## Árbol de directorios

```
cdn lovepostal/
├── og-image.jpg                       Open Graph image (1200x630)
├── index.html                         Galería pública
├── CLAUDE.md                          Este archivo
├── agents.md                          Contexto para agentes (Lovable/v0/Cursor/Bolt)
├── README.md                          Para humanos
├── CLAUDE_TEMPLATE.md                 Pasos replicables (incluye scripts inline)
├── PNG/                               Brand PNG transparentes
│   ├── imagotipo_lovepostal_bicolor_1.png
│   ├── imagotipo_lovepostal_terracotaoscuro_1.png
│   ├── imagotipo_lovepostal_terracotaoscuro_2.png        (variante)
│   ├── imagotipo_lovepostal_terracotaclaro_1.png
│   ├── imagotipo_lovepostal_blanco_1.png
│   ├── imagotipo_lovepostal_negro_1.png
│   ├── isotipo_lovepostal_terracotaoscuro_1.png
│   ├── isotipo_lovepostal_terracotaclaro_1.png
│   ├── isotipo_lovepostal_blanco_1.png
│   ├── isotipo_lovepostal_negro_1.png
│   └── logotipo_lovepostal_terracotaclaro_1.png
├── SOCIAL MEDIA KIT/
│   ├── COVER PICTURES/                (vacío — para banners FB/X/LinkedIn)
│   ├── PROFILE PICTURES/              12 variantes 1080x1080 jpg
│   ├── PSD FILES/                     (vacío — fuentes editables)
│   └── TEMPLATES/                     (vacío — plantillas redes)
└── _backup_imagenes/                  Originales webp (NO TOCAR)
    ├── isotipos/
    ├── logotipos/
    └── profile_pictures/
```

## Convención de nombres

Snake-case, todo minúsculas, ASCII. Sin guiones bajos dobles, sin acentos.

| Tipo de asset       | Patrón                                                           | Ejemplo                                            |
| ------------------- | ---------------------------------------------------------------- | -------------------------------------------------- |
| Imagotipo (símbolo + wordmark) | `imagotipo_{slug}_{color}_{n}.png`                    | `imagotipo_lovepostal_terracotaoscuro_1.png`       |
| Isotipo (solo símbolo)         | `isotipo_{slug}_{color}_{n}.png`                      | `isotipo_lovepostal_blanco_1.png`                  |
| Logotipo (solo wordmark)       | `logotipo_{slug}_{color}_{n}.png`                     | `logotipo_lovepostal_terracotaclaro_1.png`         |
| Profile picture                | `profile_{slug}_{fondo}_{simbolo}_{n}.jpg`            | `profile_lovepostal_blanco_terracotaoscuro_1.jpg`  |
| Cover picture                  | `cover_{slug}_{red}_{n}.jpg`                          | `cover_lovepostal_facebook_1.jpg`                  |
| Template social                | `template_{slug}_{tipo}_{n}.png`                      | `template_lovepostal_post_1.png`                   |
| PSD                            | `psd_{slug}_{tipo}_{n}.psd`                           | `psd_lovepostal_postcard_1.psd`                    |

**Colores válidos** (sin tildes, sin espacios):
`terracotaoscuro` · `terracotaclaro` · `blanco` · `negro` · `bicolor`

## Tabla de assets

### PNG (11)

| Archivo                                            | Tipo       | Color            | Dim.       | Peso     |
| -------------------------------------------------- | ---------- | ---------------- | ---------- | -------- |
| imagotipo_lovepostal_bicolor_1.png                 | imagotipo  | bicolor          | 1568×411   | 272.5 KB |
| imagotipo_lovepostal_terracotaoscuro_1.png         | imagotipo  | terracotaoscuro  | 1568×411   | 263.4 KB |
| imagotipo_lovepostal_terracotaoscuro_2.png         | imagotipo  | terracotaoscuro  | 1568×411   | 170.5 KB |
| imagotipo_lovepostal_terracotaclaro_1.png          | imagotipo  | terracotaclaro   | 1568×411   | 282.2 KB |
| imagotipo_lovepostal_blanco_1.png                  | imagotipo  | blanco           | 1568×411   |  71.0 KB |
| imagotipo_lovepostal_negro_1.png                   | imagotipo  | negro            | 1568×411   |  79.4 KB |
| isotipo_lovepostal_terracotaoscuro_1.png           | isotipo    | terracotaoscuro  | 2887×3274  | 109.6 KB |
| isotipo_lovepostal_terracotaclaro_1.png            | isotipo    | terracotaclaro   | 2887×3273  | 113.0 KB |
| isotipo_lovepostal_blanco_1.png                    | isotipo    | blanco           | 2887×3274  | 108.6 KB |
| isotipo_lovepostal_negro_1.png                     | isotipo    | negro            | 2887×3273  | 109.3 KB |
| logotipo_lovepostal_terracotaclaro_1.png           | logotipo   | terracotaclaro   | 1568×411   | 179.0 KB |

### Profile pictures (12)

| Archivo                                                        | Fondo           | Símbolo         | Dim.      | Peso    |
| -------------------------------------------------------------- | --------------- | --------------- | --------- | ------- |
| profile_lovepostal_blanco_terracotaoscuro_1.jpg                | blanco          | terracotaoscuro | 1080×1080 | 38.3 KB |
| profile_lovepostal_terracotaclaro_terracotaoscuro_1.jpg        | terracotaclaro  | terracotaoscuro | 1080×1080 | 28.2 KB |
| profile_lovepostal_negro_terracotaoscuro_1.jpg                 | negro           | terracotaoscuro | 1080×1080 | 33.6 KB |
| profile_lovepostal_blanco_terracotaclaro_1.jpg                 | blanco          | terracotaclaro  | 1080×1080 | 36.5 KB |
| profile_lovepostal_terracotaoscuro_terracotaclaro_1.jpg        | terracotaoscuro | terracotaclaro  | 1080×1080 | 25.7 KB |
| profile_lovepostal_negro_terracotaclaro_1.jpg                  | negro           | terracotaclaro  | 1080×1080 | 38.0 KB |
| profile_lovepostal_terracotaclaro_blanco_1.jpg                 | terracotaclaro  | blanco          | 1080×1080 | 38.9 KB |
| profile_lovepostal_terracotaoscuro_blanco_1.jpg                | terracotaoscuro | blanco          | 1080×1080 | 38.2 KB |
| profile_lovepostal_negro_blanco_1.jpg                          | negro           | blanco          | 1080×1080 | 33.2 KB |
| profile_lovepostal_blanco_negro_1.jpg                          | blanco          | negro           | 1080×1080 | 33.3 KB |
| profile_lovepostal_terracotaclaro_negro_1.jpg                  | terracotaclaro  | negro           | 1080×1080 | 40.1 KB |
| profile_lovepostal_terracotaoscuro_negro_1.jpg                 | terracotaoscuro | negro           | 1080×1080 | 33.2 KB |

### Open Graph

- `og-image.jpg` — 1200×630 (75.8 KB) — Open Graph image canónica.

![og-image](og-image.jpg)

## Funcionalidades de `index.html`

- Hero con base URL del CDN copiable
- Nav sticky con anclas por sección
- Búsqueda en tiempo real por nombre de archivo
- Filtros chip por tipo (imagotipo/isotipo/logotipo/profile) y color
- Toggle fondo de previews (auto / claro / oscuro) — útil para PNG blancos
- Grid responsive de cards: thumb · nombre · badges · URL CDN copiable · descarga · copia tag `<img>`
- Lightbox al click en thumb · cerrar con `Esc`
- Botón "Copiar todas las URLs" por sección
- Secciones placeholder para Cover Pictures, Templates, PSD Files
- Favicon (isotipo terracota oscuro) + meta `og:image` apuntando a `og-image.jpg`
- 100% estático: rutas relativas → funciona offline; URL CDN para entornos externos

## Cómo agregar assets nuevos

1. Coloca el archivo en la subcarpeta correcta respetando convención de nombres
2. Edita `index.html` → arrays `PNG_ASSETS` o `PROFILE_ASSETS`. Inserta objeto:
   ```js
   { file: "imagotipo_lovepostal_dorado_1.png", tipo: "imagotipo", color: "dorado", w: 1568, h: 411, size: 80000 }
   ```
3. Si introduces nuevo color, agrega chip en `<div class="filters" id="filtersColor">` y entrada en `colorLabel()`
4. Actualiza tablas en este `CLAUDE.md` y en `agents.md`

## Comandos útiles

```bash
# Dimensiones sin abrir
sips -g pixelWidth -g pixelHeight PNG/imagotipo_lovepostal_negro_1.png

# Listar tamaños
find PNG "SOCIAL MEDIA KIT" -type f \( -name '*.png' -o -name '*.jpg' \) -exec stat -f '%z %N' {} +

# Ver index.html en navegador
open index.html
```