# Grupo AIZMA Desarrolladora — sitio web

Sitio estático (HTML + CSS + JavaScript). **No necesita build, ni npm, ni servidor especial.**
Se sube tal cual por FTP o arrastrando la carpeta a Hostinger / Netlify / Vercel.

---

## Qué incluye

| Archivo | Qué es |
|---|---|
| `index.html` | Sitio corporativo completo en **una sola página** (Inicio, Nosotros, Servicios, Manifiesto, Desarrollo, Por qué AIZMA, Contacto, Footer) |
| `vistas-paraiso-del-valle.html` | Landing **independiente** del desarrollo Vistas Paraíso del Valle |
| `styles.css` | Toda la hoja de estilos |
| `main.js` | Animaciones, menú, formulario y eventos |
| `lib/manifest.js` | **Datos de contacto y mensajes de WhatsApp** — edita aquí si cambian |
| `lib/gsap.min.js`, `lib/ScrollTrigger.min.js` | Librerías de animación (locales, no CDN) |
| `assets/img/` | Imágenes en WebP |
| `assets/video/` | Vídeos de dron |
| `assets/photos/source/` | Originales del cliente (puedes borrar esta carpeta antes de subir) |
| `assets/favicon-*.png`, `apple-touch-icon.png` | Iconos del navegador y de pantalla de inicio |
| `site.webmanifest` | Nombre e iconos al guardar el sitio en el móvil |
| `tools/` | Scripts de desarrollo (no se suben, puedes borrarlos) |
| `.htaccess` | Cabeceras de caché para Hostinger/Apache |
| `robots.txt`, `sitemap.xml` | SEO |

---

## Antes de publicar

1. **Dominio.** Ya está puesto `https://grupoaizma.site` en `index.html`,
   `vistas-paraiso-del-valle.html`, `robots.txt` y `sitemap.xml`. Si el dominio
   cambia en el futuro, busca y reemplaza esa URL completa en los cuatro archivos —
   si no coincide exactamente con el dominio real, WhatsApp/Facebook no podrán
   cargar la imagen de vista previa (`og:image`) ni el resto de los metadatos.
2. **Sube la carpeta completa** al `public_html` del hosting (o arrástrala a Netlify).
3. **En cada actualización** sube también los archivos y cambia el `?v=` de
   `styles.css` y `main.js` en los dos HTML por la fecha del día. Eso evita que
   el navegador siga mostrando la versión vieja.

---

## Cómo se edita el contenido habitual

### Teléfono, correo, WhatsApp
Están en `lib/manifest.js` (usados por el formulario) **y** escritos directamente en
los dos HTML (enlaces `tel:`, `mailto:` y `wa.me`). Si cambia el número, búscalo y
reemplázalo: `526644333350` en los HTML y en `manifest.js`.

### Formulario de contacto
Hoy funciona **sin servidor**: al enviar, abre WhatsApp con los datos ya escritos.

Si prefieres recibirlo por correo, crea un formulario gratuito en
[Formspree](https://formspree.io) y pega la URL en `lib/manifest.js`:

```js
formEndpoint: "https://formspree.io/f/tu-codigo"
```

Con eso el formulario envía por correo y muestra "Gracias, te contactaremos muy pronto".

### Medición (Google Analytics / Meta)
El sitio ya dispara eventos: `aizma_whatsapp`, `aizma_form-enviado`,
`aizma_telefono`, `aizma_email`. Se envían a `dataLayer` y a `gtag` si existen.
Solo hay que pegar el script de Google Tag Manager o Analytics en el `<head>`.

---

## Logotipo

El logotipo oficial (`media/logo-aizma.png`, trazo blanco con transparencia) genera
todas las variantes con `tools/build_logo.py`:

| Archivo | Dónde se usa |
|---|---|
| `lockup-aizma-blanco.webp` | Cabecera sobre el hero |
| `lockup-aizma-noche.webp` | Cabecera compacta al hacer scroll |
| `logo-aizma-blanco.webp` | Pie de página y menú móvil |
| `marca-aizma-*.webp` | Isotipo suelto (blanco, azul noche, dorado) |
| `favicon-32/192/512.png`, `apple-touch-icon.png` | Iconos sobre azul noche |

Si el logotipo cambia, reemplaza `media/logo-aizma.png` y ejecuta:

```bash
python3 tools/build_logo.py
python3 tools/build_og.py
```

---

## SEO y vista previa al compartir

- **Títulos y descripciones** propios en cada página, con ciudad y servicio
  (SEO local: Playas de Rosarito, Tijuana, Ensenada, Baja California).
- **Datos estructurados**: `RealEstateAgent` con dirección, horario, teléfono y
  servicios en la portada; `Residence` con amenidades y `BreadcrumbList` en la
  landing de Vistas.
- **Open Graph** con imágenes propias de 1200×630 (`assets/img/og-aizma.jpg` y
  `og-vistas.jpg`). El logotipo y el título están centrados dentro del área segura
  de 630×630 **porque WhatsApp recorta la miniatura casi al cuadrado**. Pesan menos
  de 70 KB, por debajo del límite de WhatsApp.
- `robots.txt` y `sitemap.xml` listos.

> **Importante:** WhatsApp y Facebook guardan la vista previa en caché. Si cambias
> la imagen después de compartir el enlace, límpiala en
> [developers.facebook.com/tools/debug](https://developers.facebook.com/tools/debug/)
> o comparte el enlace con un parámetro nuevo (`?v=2`) para forzar la actualización.

---

## Imágenes y vídeo

Todo el material sale de las piezas originales del cliente (flyers de Vistas
Paraíso del Valle, toma aérea y tres vídeos de dron). El recorte y la conversión a
WebP se hacen con `tools/build_assets.py`; las imágenes de redes sociales con
`tools/build_og.py`.

```bash
python3 tools/build_assets.py
python3 tools/build_og.py
```

Si el cliente entrega fotografía nueva de mayor resolución, sustituye los archivos de
`assets/img/` conservando los mismos nombres.

---

## Notas de contenido

- No hay cifras, testimonios ni propiedades inventadas. Los únicos datos numéricos
  son los que entregó el cliente: 10 años de experiencia, 5 servicios, desde USD
  $31,500, terrenos desde 300 m² y las distancias del mapa oficial (7 / 10 / 15 min).
- Todas las imágenes del desarrollo llevan la nota **"Amenidades proyectadas.
  Imágenes conceptuales sujetas al proyecto final."**
- Los renders provienen de los flyers oficiales de Vistas Paraíso del Valle.

---

## Accesibilidad y rendimiento

- Contraste AA verificado en ambas páginas.
- Áreas táctiles de 44 px mínimo.
- El sitio se lee completo aunque falle el JavaScript.
- Respeta `prefers-reduced-motion` (vídeo en pausa, sin grano ni scroll suave).
- Imágenes en WebP con `loading="lazy"`; los vídeos solo se descargan al llegar a
  su sección.

---

## Ver el sitio en local

```bash
cd site && python3 -m http.server 8765
```

Y abre `http://localhost:8765`.
