# Vena China 脉连中国 — v5

## Cambios de esta versión

- HTML y JavaScript formateados para que sean legibles y fáciles de editar.
- Carruseles con botones grandes a ambos lados de las tarjetas. En móvil se muestra **una sola tarjeta**; en pantallas medianas se muestran dos y en escritorio hasta tres.
- El carrusel de Packs tiene ahora sus dos flechas y contador, igual que el de Otros servicios.
- La plantilla compartida de detalle lee los datos desde `data/packs.json`.
- Se mantiene el orden de contacto: WhatsApp primero y email después.
- El hero usa una imagen de fondo estática y la card de China Rural carga su fotografía desde `assets/image-rural.png`.
- El itinerario del detalle se presenta como una secuencia visual de días; la portada recuerda el último pack visible o seleccionado al volver desde sus detalles.
- La página de cada pack incluye una sección compacta de "Otros Packs", excluyendo el pack actual.

## Cómo ejecutar la web y cargar el JSON

Los navegadores suelen bloquear `fetch()` de archivos JSON cuando se abre `pages/pack.html` directamente mediante `file://`. Hay que servir la carpeta con un servidor HTTP:

1. Descomprime el ZIP.
2. Abre una terminal en la carpeta del proyecto.
3. Ejecuta `python -m http.server 8000`.
4. Abre `http://localhost:8000` y entra en los detalles de cualquier pack.

No abras `pages/pack.html` haciendo doble clic; usa la dirección local anterior. La página de detalle lee `data/packs.json` y selecciona el pack usando el parámetro `?id=`.

## Editar los packs

Edita `data/packs.json`. Cada elemento contiene `id`, `title`, `intro`, `oldPrice`, `price`, `priceNote`, `images` y `descriptionHtml`. El `id` debe coincidir con el parámetro de la URL. Las rutas de imágenes se escriben relativas a `pages/pack.html`, por ejemplo `../assets/china-bola-1.jpg`.

Las tarjetas de la portada se configuran en `data/cards.json`. Para mostrar una cinta de experiencia especial, añade a un pack `specialRibbon` con `text`, `sealCharacter`, `backgroundColor` y `textColor`; los colores aceptan valores CSS como `#b58c4c`. Las imágenes de las tarjetas se indican con `imageSrc` y una ruta relativa a la raíz del sitio.

En `data/packs.json`, cada pack puede incluir opcionalmente `disclaimer` con `heading`, una lista `items` y `accentColor` para mostrar un aviso después de los detalles del viaje. Si `itinerary` está vacío o no contiene días con actividades, el panel de itinerario se oculta automáticamente. Dentro de `images`, los archivos `.mp4`, `.webm`, `.ogg` y `.mov` se reconocen como vídeos; sin `poster` configurado, su miniatura y el reproductor muestran fondo negro en vez del placeholder.

Configura `itinerary` como una lista de objetos con `day` y `activities`, por ejemplo: `"itinerary": [{ "day": 1, "activities": ["Llegada a Beijing", "Visita a la Ciudad Prohibida"] }]`. Se puede añadir cualquier número de actividades por día. Las cadenas del formato antiguo se siguen mostrando como días consecutivos. Añade `thumbnail` con una ruta relativa a `pages/pack.html` para la foto de la tarjeta pequeña. La sección "Otros Packs" se crea a partir de los demás elementos de `data/packs.json`, usando `thumbnail` o, si no existe, la primera imagen de `images`.

La lista de servicios muestra inicialmente cinco elementos. Cada servicio admite texto o HTML para personalizar su formato; utiliza HTML solo en el JSON de confianza del proyecto. El itinerario conserva los días y actividades configurados; muestra inicialmente las primeras cinco actividades en total y coloca "Ver más" debajo de la lista si hay más. Cada actividad se muestra como un punto conectado por una línea vertical.

## Antes de publicar

- Sustituye `34600000000` por el número real de WhatsApp en `index.html` y `script.js`.
- Revisa precios, inclusiones y textos.
- Añade las imágenes reales en `assets/` y comprueba las rutas del JSON.