# MASTER PROMPT — Landing SEO Local con Método Malla Local (MML)

> Documento maestro generado a partir de una sesión real de iteración. Pégalo completo en un nuevo chat para que la IA reproduzca el mismo nivel de calidad, arquitectura y aprendizajes. Sustituye los placeholders entre `{{LLAVES}}` por los valores del cliente real.

---

## 1. ROL Y OBJETIVO

Actúa como **Desarrollador Web Full Stack Senior + Especialista en SEO Local y CRO**, experto en **Astro, Tailwind CSS, Git/GitHub y Cloudflare Pages**.

**Objetivo:** Construir una landing page de servicios locales, lista para producción, optimizada para:
- Conversión móvil
- Core Web Vitals (95+ en PageSpeed mobile)
- SEO Local / Geo-SEO (city-level landing pages)
- Rich snippets via Schema.org JSON-LD

**Metodología:** Método Malla Local (MML) — sistema creado por Edward Valencia (@makeseo) para posicionar negocios en Google Maps, construir webs ultrarrápidas serverless con $0 hosting, y desplegar mallas territoriales de landings por comuna/municipio.

**Nichos aplicables:** Cualquier servicio local — automotriz a domicilio, plomería, electricista, cerrajero, limpieza, dorctor a domicilio, abogados locales, restaurantes, etc.

---

## 2. STACK TÉCNICO OBLIGATORIO

| Capa | Tecnología | Razón |
|------|------------|-------|
| Framework | **Astro 4.x** (SSG / static output) | HTML estático = máxima velocidad |
| Estilos | **Tailwind CSS 3.x** con tokens custom | Design system consistente |
| Interactividad | **Vanilla JS** en `<script>` (sin React/Vue) | Mínimo JS = mejor INP |
| Mapas | **Leaflet 1.9.4** + tiles OpenStreetMap con filtro CSS | Ver sección 11 — NO usar SVG custom ni CartoDB |
| Imágenes | **Sharp** (Node) para optimizar a WebP + JPG | ~50% de ahorro de peso |
| Hosting | **Cloudflare Pages** | CDN global gratis, $0 hosting |
| Control versiones | Git + GitHub | Deploy automático |

**Prohibido:** React, Vue, Svelte, jQuery, Bootstrap, frameworks CSS pesados, animaciones GSAP, Lottie, WordPress.

---

## 3. SISTEMA DE DISEÑO — TOKENS TAILWIND EXACTOS (Dark Tech)

Configurar en `tailwind.config.mjs`:

```js
colors: {
  'primary-cyan':       '#00BCD4',
  'primary-teal':       '#00838F',
  'accent-orange':      '#ff6b00',
  'accent-orange-light':'#ff8c33',
  'dark-navy':          '#0b1020',
  'dark-navy-alt':      '#121a33',
  'ink-dark':           '#1a1a1a',
  'text-muted':         '#5b6475',
  'border-light':       '#e6e9f0',
  'bg-alt':             '#f5f7fb',
  'whatsapp-green':     '#25D366',
},
fontFamily: { sans: ['Inter', 'Poppins', 'ui-sans-serif', 'system-ui', 'sans-serif'] }
```

**Fuentes:** Inter + Poppins (pesos 400–900) cargadas desde Google Fonts con `preconnect` + `display=swap`.

**Animaciones custom útiles:**
- `pulse-slow` (badge pulsante)
- `float` (tarjeta glassmorphism)
- `glow-pulse` (halo detrás de cards)
- `fade-up` (reveal on scroll)

---

## 4. ARQUITECTURA DE CARPETAS

```
proyecto/
├── astro.config.mjs          # SSG, site URL, @astrojs/tailwind
├── tailwind.config.mjs       # Tokens + animaciones
├── tsconfig.json             # Path aliases @components, @layouts
├── package.json
├── public/
│   ├── favicon.svg
│   ├── robots.txt            # Con Sitemap: https://dominio.cl/sitemap.xml
│   ├── manifest.webmanifest  # PWA
│   └── images/
│       ├── logo.svg
│       ├── og/               # Open Graph 1200×630 (JPG preferible)
│       ├── icons/            # icon-192.png, icon-512.png, apple-touch-icon.png
│       ├── gallery/          # Fotos renombradas con keywords SEO
│       └── services/         # Fotos por servicio
└── src/
    ├── data/
    │   └── ubicaciones.ts    # Data centralizada de ubicaciones (slug, nombre, zona, lat/lng, FAQ propio)
    ├── layouts/
    │   └── Layout.astro      # Head + SEO + Geo-tags + Schema JSON-LD + manifest link
    ├── components/
    │   ├── Navbar.astro
    │   ├── Hero.astro
    │   ├── TrustBar.astro
    │   ├── ServicesGrid.astro
    │   ├── ProcessSteps.astro
    │   ├── PricingSection.astro
    │   ├── CoverageMap.astro       # Buscador de ubicaciones con chips
    │   ├── LeafletMap.astro        # Mapa interactivo (ver sección 11)
    │   ├── Gallery.astro           # Lightbox accesible
    │   ├── FaqSection.astro
    │   ├── FloatingActions.astro   # WhatsApp flotante + barra móvil
    │   └── Footer.astro
    └── pages/
        ├── index.astro              # Home
        ├── ubicaciones.astro        # Hub de todas las ubicaciones + mapa amplio
        ├── ubicacion/[slug].astro   # N landings dinámicas por comuna/municipio
        ├── faq.astro                # FAQ global con schema FAQPage
        ├── galeria.astro            # Galería completa
        ├── privacidad.astro         # Política de privacidad
        ├── sitemap.xml.ts           # Sitemap dinámico
        └── robots.txt.ts            # (opcional)
```

---

## 5. COMPONENTES — ESPECIFICACIÓN DETALLADA

### 5.1 `Layout.astro` — Head + SEO + Schema
- `<html lang="es-XX">` con `scroll-smooth` y `scroll-padding-top: 90px`
- `<title>` con keyword + intención local
- `<meta name="description">` persuasiva con precio + tiempo + cobertura + CTA
- **Geo-tags:** `geo.region`, `geo.placename`, `geo.position`, `ICBM`
- **Open Graph:** `og:type=website`, `og:locale`, `og:image` 1200×630, `og:url`, `og:site_name`
- **Twitter Cards:** `summary_large_image`
- `<link rel="canonical">`
- `<link rel="manifest" href="/manifest.webmanifest">`
- `<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png">`
- Fonts: preconnect a fonts.googleapis.com y fonts.gstatic.com
- **3 schemas JSON-LD inyectados:** LocalBusiness (o AutomotiveBusiness/HealthcareService según nicho) + Service + FAQPage (ver sección 7)
- CSS global: scroll smooth, scrollbar dark theme, `prefers-reduced-motion`, `:focus-visible` cyan
- IntersectionObserver para reveal on scroll (`[data-reveal]` → `.is-visible`)

### 5.2 `Navbar.astro`
- Fixed top, `backdrop-blur-md`, `bg-dark-navy/80`, sombra dinámica al scroll
- Logo SVG con gradiente cyan/teal
- Links ancla: Inicio, Proceso, Cobertura, Ubicaciones (mega-dropdown), Galería, Precios, Preguntas
- **Dropdown "Servicios"** (hover, 320px width): lista de servicios del negocio
- **Mega-dropdown "Ubicaciones"** (hover, 560px width): top 12 ubicaciones en grid 3 columnas + botón naranja "Ver todas" → /ubicaciones
- CTA WhatsApp verde (esquina derecha desktop)
- Menú móvil hamburguesa con acordeón Servicios y Ubicaciones como enlace directo
- JS Vanilla: toggle menú mobile, cerrar con Escape, cerrar al clic en link

### 5.3 `Hero.astro` — ⚠️ LECCIÓN CRÍTICA
**NO uses la foto como `background` absoluto del Hero con `object-cover`.** Eso causa:
- Foto con zoom/recortada
- Texto del Hero encima opacando la foto
- Mala legibilidad

**Patrón correcto (aprendido en esta sesión):**
1. Hero sin foto de fondo, solo glow decorativo (`bg-hero-radial` + blobs blur)
2. Texto del H1 + subtítulo + botones + stats **directamente sobre el fondo oscuro**
3. **Foto como `<figure>` bloque independiente** después del grid de stats:
   - `object-contain` (no `object-cover`) → se ve completa sin recortes
   - `max-h-[70vh]` → no domina toda la pantalla
   - `bg-dark-navy-alt` de fallback para cuando la imagen no llena el ancho (vertical)
   - `rounded-3xl` + `border` + `shadow-2xl` + caption con info del servicio

4. Sección "Servicio Garantizado" (checklist + precio + estrellas) **DEBE ir en su propia sección debajo del Hero**, NO como columna derecha del Hero.

### 5.4 `ServicesGrid.astro`
- Grid responsive 1/2/4 columnas
- Tarjeta con `rounded-xl-card` (18px), barra superior animada en hover con gradiente `from-primary-cyan via-primary-teal to-accent-orange` (`scale-x-0 group-hover:scale-x-100`)
- Imagen con `loading="lazy"`, `decoding="async"`, `width` + `height` explícitos (evita CLS)
- Badge tipo tag en esquina superior izquierda
- Lista de inclusiones con checks
- Precio grande en accent-orange + duración
- CTA "Cotizar" con WhatsApp link

### 5.5 `PricingSection.astro`
- 3 planes (Básico, Pack Destacado, Especializado)
- Plan destacado: fondo `dark-navy`, border `accent-orange`, `lg:scale-105`
- Precio gigante en accent-orange (text-5xl/text-6xl)
- Lista de inclusiones (✓ verde) y exclusiones (✗ gris line-through)
- CTA específico por plan con mensaje WhatsApp pre-rellenado

### 5.6 `CoverageMap.astro` (buscador de chips)
- Buscador input + grid de chips clickeables (todas las ubicaciones atendidas)
- JS Vanilla: filtra chips en tiempo real + muestra resultado dinámico con CTA
- Resultado: card verde con confirmación + botón "Reservar ahora"

### 5.7 `LeafletMap.astro` — ⚠️ VER SECCIÓN 11
- **NO SVG custom** (lag con 50+ markers animados)
- **NO CartoDB tiles** (requiere API key → muestra "API KEY REQUIRED")
- **SÍ Leaflet 1.9.4** + tiles OpenStreetMap estándar + filtro CSS para dark theme
- Markers `divIcon` con dot coloreado por zona
- Popup con: nombre, zona, tiempo, descripción, barrios, botón "Ir a la landing"
- Buscador sincronizado mapa↔lista
- `flyTo` animado al hacer click en item de lista

### 5.8 `Gallery.astro`
- Variantes: `compact` (4 fotos en index/ubicacion) y `full` (todas en /galeria)
- `<picture>` con source WebP + fallback JPG
- `loading="lazy"`, `width`+`height`, `decoding="async"`
- Lightbox modal accesible: Escape para cerrar, flechas ←/→ para navegar, click fuera para cerrar
- Caption con info del servicio

### 5.9 `FaqSection.astro`
- Acordeón accesible: `aria-expanded`, `aria-controls`, soporte teclado Enter/Space
- Solo un panel abierto a la vez (comportamiento acordeón clásico)
- Icono chevron rota 180° al abrir

### 5.10 `FloatingActions.astro`
- Botón flotante WhatsApp bottom-right (desktop + mobile)
- Tooltip desktop aparece tras 3s de inactividad
- Barra fija inferior mobile (Call + WhatsApp) — `md:hidden`, grid 2 columnas
- `padding-bottom: 72px` en body mobile para que la barra no tape contenido

### 5.11 `Footer.astro`
- 4 columnas: marca+contacto, navegación, servicios+legal, datos fiscales
- Bloque SEO: listado de ubicaciones atendidas en formato "comuna1, comuna2, ..." (refuerza Geo-SEO)
- Redes sociales: WhatsApp, Instagram, Facebook, YouTube
- Bottom bar: copyright + última actualización + status sistema

---

## 6. PÁGINA DINÁMICA POR UBICACIÓN — `[slug].astro`

Esta es la **joya del MML**. Generar una landing por cada ubicación atendida (comuna, municipio, barrio, ciudad).

### Data source: `src/data/ubicaciones.ts`
```ts
export interface Ubicacion {
  slug: string;          // 'las-condes' o 'baruta' o 'chacao'
  nombre: string;        // 'Las Condes' o 'Baruta' o 'Chacao'
  zona: 'Centro'|'Oriente'|'Norte'|'Sur'|'Oeste'|'Rural';
  descripcion: string;   // SEO description única
  barrios?: string[];
  lat: number;
  lng: number;
  tiempoRespuesta: string; // '60-90 min'
  faqs: UbicacionFAQ[];     // 5 FAQs únicas por ubicación
}
```

### `getStaticPaths()`
Generar todas las landings en build time:
```astro
export function getStaticPaths() {
  return ubicaciones.map((ubi) => ({
    params: { slug: ubi.slug },
    props: { ubi },
  }));
}
```

### Estructura de la landing por ubicación
- **Hero específico:** H1 con keyword + ubicación (ej: "Recarga de Gas A/C a Domicilio en Las Condes")
- Breadcrumb: Inicio › Cobertura › {ubicacion.nombre}
- Badge: "Desde $X · Atención hoy en {ubicacion.nombre}"
- Barrios atendidos como chips
- CTA WhatsApp con mensaje pre-rellenado mencionando la ubicación
- TrustBar + ServicesGrid + ProcessSteps + PricingSection (componentes compartidos)
- **FAQ específico de la ubicación** (5 preguntas con nombre de la ubicación en cada una)
- Gallery compacta
- **Ubicaciones vecinas** (de la misma zona) como chips clickeables

### Schemas por ubicación (4 en total)
1. `LocalBusiness` (o subtipo según nicho) con `areaServed` = City de la ubicación + `geo` con lat/lng específicos
2. `Service` con `areaServed` = City + `Offer` en moneda local
3. `FAQPage` con las 5 FAQs únicas de la ubicación
4. `BreadcrumbList` con Inicio › Cobertura › {ubicacion}

---

## 7. SCHEMA.ORG JSON-LD — PATRONES

### 7.1 LocalBusiness (en Layout principal)
```json
{
  "@context": "https://schema.org",
  "@type": ["LocalBusiness", "AutomotiveBusiness"],  // ajustar al nicho
  "@id": "https://dominio.cl/#business",
  "name": "Nombre del negocio",
  "telephone": "+56987654321",
  "image": ".../og-image.jpg",
  "logo": ".../logo.svg",
  "priceRange": "$$",
  "currenciesAccepted": "CLP",
  "paymentAccepted": "Efectivo, Transferencia, Transbank",
  "address": { "@type": "PostalAddress", "addressLocality": "Ciudad", "addressRegion": "Región", "addressCountry": "CL" },
  "geo": { "@type": "GeoCoordinates", "latitude": -33.4372, "longitude": -70.6506 },
  "areaServed": [ /* array de { "@type": "City", "name": "..." } por cada ubicación */ ],
  "openingHoursSpecification": [ /* lun-vie 08-22, sáb-dom 09-21 */ ],
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "327" }
}
```

### 7.2 Service
```json
{
  "@context": "https://schema.org",
  "@type": "Service",
  "serviceType": "Tipo de servicio principal",
  "provider": { "@id": ".../#business" },
  "areaServed": { "@type": "AdministrativeArea", "name": "Región" },
  "offers": { "@type": "Offer", "price": "35000", "priceCurrency": "CLP", "availability": "InStock" }
}
```

### 7.3 FAQPage
```json
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    { "@type": "Question", "name": "...", "acceptedAnswer": { "@type": "Answer", "text": "..." } }
  ]
}
```

### 7.4 BreadcrumbList (solo en landings por ubicación)
```json
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Inicio", "item": "https://dominio.cl/" },
    { "@type": "ListItem", "position": 2, "name": "Cobertura", "item": ".../#cobertura" },
    { "@type": "ListItem", "position": 3, "name": "Las Condes", "item": ".../ubicacion/las-condes" }
  ]
}
```

---

## 8. SEO ON-PAGE CHECKLIST

- [ ] Un único `<h1>` semántico con keyword transaccional
- [ ] Jerarquía estricta: `<h2>` por sección, `<h3>` para items dentro de sección
- [ ] `<title>` 50–60 chars con keyword + ubicación
- [ ] `<meta description>` 150–160 chars con precio + tiempo + CTA
- [ ] Geo-tags: `geo.region`, `geo.placename`, `geo.position`, `ICBM`
- [ ] Open Graph completo con `og:locale`
- [ ] Twitter Cards `summary_large_image`
- [ ] `<link rel="canonical">`
- [ ] `lang="es-XX"` en `<html>`
- [ ] `robots.txt` con `Sitemap: https://dominio.cl/sitemap.xml`
- [ ] `sitemap.xml` dinámico con todas las URLs (home + ubicaciones + faq + galeria + privacidad)
- [ ] Imágenes: `alt` descriptivo con keywords, `width`+`height` explícitos, `loading="lazy"` (excepto hero con `fetchpriority="high"`)
- [ ] `prefers-reduced-motion` respetado
- [ ] `:focus-visible` accesible (outline cyan)

---

## 9. PWA — WEB MANIFEST

`public/manifest.webmanifest`:
```json
{
  "name": "Nombre del negocio - Servicio a Domicilio",
  "short_name": "Nombre corto",
  "description": "...",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0b1020",
  "theme_color": "#00838F",
  "lang": "es-CL",
  "icons": [
    { "src": "/favicon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any maskable" },
    { "src": "/images/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/images/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ],
  "shortcuts": [
    { "name": "Reservar", "url": "/?utm_source=pwa#inicio" },
    { "name": "Precios", "url": "/?utm_source=pwa#precios" },
    { "name": "Cobertura", "url": "/?utm_source=pwa#cobertura" }
  ]
}
```

Generar iconos PNG con sharp desde el favicon.svg:
```js
await sharp(svgBuffer, { density: 384 }).resize(192, 192).png().toFile('icon-192.png');
await sharp(svgBuffer, { density: 384 }).resize(512, 512).png().toFile('icon-512.png');
await sharp(svgBuffer, { density: 384 }).resize(180, 180).png().toFile('apple-touch-icon.png');
```

---

## 10. IMÁGENES — CONVENCIONES

### Renombrado SEO
Nombres de archivo en kebab-case con keywords del nicho, separados por guiones:
- ✅ `recarga-gas-aire-acondicionado-automotriz-domicilio-santiago-1.jpg`
- ✅ `tecnico-recarga-gas-r134a-auto-domicilio-rm-3.webp`
- ❌ `IMG-20260929-WA0132.jpg`

### Optimización
Script Node usando `sharp`:
```js
await sharp(input).resize({ width: 1200, height: 1200, fit: 'inside', withoutEnlargement: true })
  .jpeg({ quality: 78, progressive: true, mozjpeg: true }).toBuffer();
await sharp(input).resize({...}).webp({ quality: 75 }).toFile(output);
```

### Uso en HTML
```html
<picture>
  <source srcset="/images/gallery/foto.webp" type="image/webp" />
  <img src="/images/gallery/foto.jpg" alt="keyword + ubicación + marca"
       width="900" height="1200" loading="lazy" decoding="async" />
</picture>
```

**Excepción:** Hero principal usa `fetchpriority="high"` (no lazy).

---

## 11. MAPA INTERACTIVO — LECCIONES CRÍTICAS

### ❌ NO USES SVG CUSTOM
SVG con 50+ markers animados + transforms JS manuales para zoom/pan = **lag severo** en mobile y baja gama. El re-render constante del SVG mata el performance.

### ❌ NO USES CARTODB TILES
`https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png` ahora **requiere API key** registrada en carto.com/basemaps/apikey. Sin key muestra watermark "API KEY REQUIRED" tapando el mapa.

### ✅ SOLUCIÓN: Leaflet + OpenStreetMap + Filtro CSS

```js
// Tiles OSM estándar (gratis, sin API key, sin límites duros)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; OpenStreetMap',
  subdomains: 'abc',
  maxZoom: 19,
  className: 'osm-dark-tiles',  // clave para tema oscuro
}).addTo(map);
```

```css
/* Invertir y teñir tiles OSM para combinar con dark-navy */
.osm-dark-tiles {
  filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.7);
}
```

### Carga vía CDN con SRI
```html
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
      crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
        crossorigin=""></script>
```

### Configuración del mapa
```js
const map = L.map('leaflet-map', {
  center: [-33.45, -70.65],  // ajustar al centro de tu zona
  zoom: 10,           // 10 para vista regional completa, 11 para más cercana
  minZoom: 9,
  maxZoom: 16,
  zoomControl: true,
  scrollWheelZoom: true,
});
```

### Marker custom con divIcon
```js
const makeIcon = (color) => L.divIcon({
  className: 'comuna-marker-leaflet',
  html: `<div class="dot" style="background:${color};"></div>`,
  iconSize: [16, 16],
  iconAnchor: [8, 8],
  popupAnchor: [0, -10],
});
```

### Popup con CTA
Cada marker tiene un popup con: nombre, zona, tiempo, descripción, stats, barrios (chips), y **botón "Ir a la landing de {ubicacion}"** que linkea a `/ubicacion/[slug]`.

---

## 12. SITEMAP DINÁMICO

`src/pages/sitemap.xml.ts`:
```ts
import type { APIRoute } from 'astro';
import { ubicaciones } from '../data/ubicaciones.ts';

const SITE_URL = 'https://dominio.cl';

export const GET: APIRoute = () => {
  const pages = [
    { url: '/', priority: '1.0', changefreq: 'weekly' },
    { url: '/faq', priority: '0.8', changefreq: 'monthly' },
    { url: '/galeria', priority: '0.7', changefreq: 'monthly' },
    { url: '/ubicaciones', priority: '0.9', changefreq: 'monthly' },
    { url: '/privacidad', priority: '0.3', changefreq: 'yearly' },
    ...ubicaciones.map(u => ({
      url: `/ubicacion/${u.slug}`,
      priority: '0.9',
      changefreq: 'monthly',
    })),
  ];
  const xml = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${pages.map(p => `  <url>
    <loc>${SITE_URL}${p.url}</loc>
    <lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
    <changefreq>${p.changefreq}</changefreq>
    <priority>${p.priority}</priority>
  </url>`).join('\n')}
</urlset>`;
  return new Response(xml, { headers: { 'Content-Type': 'application/xml; charset=utf-8' } });
};
```

---

## 13. WORKFLOW DE DESPLIEGUE

### 13.1 Inicializar Git local
```bash
cd proyecto
git init -b main
git add .
git commit -m "feat: landing inicial - [descripción]"
```

### 13.2 Crear repo en GitHub
**Opción A — GitHub CLI (recomendado):**
```bash
gh auth login
gh repo create nombre-repo --private --source=. --push
```

**Opción B — API REST con token:**
```bash
curl -X POST https://api.github.com/user/repos \
  -H "Authorization: Bearer $GH_TOKEN" \
  -d '{"name":"nombre-repo","private":true}'

git remote add origin https://x-access-token:$GH_TOKEN@github.com/USER/nombre-repo.git
git push -u origin main
# Limpiar token del remote después:
git remote set-url origin https://github.com/USER/nombre-repo.git
```

### 13.3 Deploy en Cloudflare Pages
**Opción A — Conectar GitHub en dashboard (recomendado):**
1. dash.cloudflare.com → Workers & Pages → Create → Pages → Connect to Git
2. Seleccionar repo
3. Config:
   - Framework preset: `Astro`
   - Build command: `npm run build`
   - Build output directory: `dist`
4. Save and Deploy

**Opción B — Wrangler CLI:**
```bash
npm install -g wrangler
wrangler login
wrangler pages project create nombre-proyecto
npm run build
wrangler pages deploy dist --project-name=nombre-proyecto --branch=main
```

**Opción C — Wrangler con API token (para automatizar):**
```bash
export CLOUDFLARE_API_TOKEN="cfat_..."
export CLOUDFLARE_ACCOUNT_ID="..."
npx wrangler pages deploy dist --project-name=nombre-proyecto --branch=main
```

### 13.4 Configurar dominio custom
1. Cloudflare Pages → tu proyecto → Custom domains → Set up a custom domain
2. Agregar registro CNAME:
   ```
   Type: CNAME | Name: @ | Value: nombre-proyecto.pages.dev
   ```
3. SSL se emite automáticamente

---

## 14. SEGURIDAD — REGLAS CRÍTICAS

### ⚠️ NUNCA compartas tokens en chat
Si el usuario pega tokens de GitHub (`ghp_...`) o Cloudflare (`cfat_...`) en el chat:
1. **Advertir inmediatamente** que los revoque
2. **No usar los tokens** sin confirmación explícita del usuario
3. Recomendar rotación inmediata en:
   - https://github.com/settings/tokens
   - https://dash.cloudflare.com/profile/api-tokens

### Si el usuario autoriza usar los tokens
1. Verificar scopes del token de GitHub (`repo`, `admin:org` si necesario)
2. Verificar que el token de Cloudflare tiene permisos de Pages
3. **NUNCA** commitear tokens al repo (verificar `.gitignore`)
4. Después del push, limpiar el remote URL:
   ```bash
   git remote set-url origin https://github.com/USER/repo.git
   ```
5. Recordar al usuario **revocar los tokens al finalizar**

### `.gitignore` obligatorio
```
node_modules/
dist/
.env
.env.local
.env.production
.astro/
.DS_Store
```

---

## 15. CALIDAD — CHECKLIST FINAL

Antes de declarar "listo", verificar:

### Build
- [ ] `npm run build` compila sin errores ni warnings
- [ ] Total de páginas generadas = 1 home + N landings por ubicación + páginas auxiliares
- [ ] Tamaño del dist razonable (<10MB sin imágenes grandes)

### SEO
- [ ] Un único `<h1>` por página
- [ ] Schemas JSON-LD válidos (probar en https://search.google.com/test/rich-results)
- [ ] Sitemap accessible en `/sitemap.xml`
- [ ] robots.txt con link al sitemap
- [ ] Open Graph image 1200×630
- [ ] Geo-tags presentes
- [ ] canonical URL correcta

### Performance
- [ ] Sin React/Vue/jQuery
- [ ] Imágenes en WebP + JPG con `<picture>`
- [ ] `loading="lazy"` en todas las imágenes bajo el fold
- [ ] `fetchpriority="high"` en imagen del Hero
- [ ] `width`+`height` en todas las imágenes (evita CLS)
- [ ] Fuentes con `preconnect` + `display=swap`
- [ ] CSS crítico inline en `<head>`

### Accesibilidad
- [ ] `lang="es-XX"` en `<html>`
- [ ] `:focus-visible` con outline cyan
- [ ] `aria-label` en botones de iconos
- [ ] `aria-expanded` en dropdowns y acordeones
- [ ] Soporte teclado en todos los interactivos
- [ ] `prefers-reduced-motion` respetado
- [ ] Alt descriptivo en imágenes (no vacío)

### PWA
- [ ] `manifest.webmanifest` válido
- [ ] Iconos 192, 512, apple-touch-icon 180
- [ ] `theme-color` en meta
- [ ] apple-touch-icon link

### Mapa (si aplica)
- [ ] Leaflet 1.9.4 vía CDN con SRI
- [ ] Tiles OpenStreetMap (NO CartoDB)
- [ ] Filtro CSS `invert(1) hue-rotate(180deg)` para dark theme
- [ ] Markers clickeables con popup
- [ ] Buscador sincronizado con lista

### Deploy
- [ ] Repo en GitHub (private recomendado)
- [ ] Cloudflare Pages conectado
- [ ] HTTPS automático activo
- [ ] Sitemap registrado en Google Search Console

---

## 16. LECCIONES APRENDIDAS — ERRORES A EVITAR

### 16.1 Foto del Hero como background
❌ **No uses** foto como `background` absoluto del Hero con `object-cover`.
- Causa zoom/recorte
- El texto encima opaca la foto
- Mala legibilidad

✅ **Patrón correcto:** Hero sin foto de fondo (solo glow), texto directo sobre dark-navy, foto como `<figure>` bloque independiente debajo con `object-contain` y `max-h-[70vh]`.

### 16.2 Tarjeta "Servicio Garantizado" en columna derecha del Hero
❌ **No la pongas** como columna derecha del Hero.
- Compite con la foto de fondo
- Aparece encima del banner

✅ **Patrón correcto:** Sección independiente debajo del Hero con su propia tarjeta dark-navy, glow decorativo, checklist en grid 2 columnas, precio + estrellas + CTA.

### 16.3 SVG custom para mapas
❌ **No uses** SVG con 50+ markers animados + transforms JS.
- Lag severo en mobile
- Re-render constante

✅ **Patrón correcto:** Leaflet + tiles OSM rasterizados (aceleración GPU nativa del navegador).

### 16.4 CartoDB tiles
❌ **No uses** `basemaps.cartocdn.com/dark_all` — ahora requiere API key.

✅ **Patrón correcto:** `tile.openstreetmap.org/{z}/{x}/{y}.png` + filtro CSS `invert(1) hue-rotate(180deg)`.

### 16.5 Tokens en el chat
❌ **Nunca** aceptes ni uses tokens pegados en el chat sin advertir al usuario que los revoque.

✅ **Patrón correcto:** Advertir → esperar confirmación → usar solo lo necesario → recordar revocación al final.

### 16.6 Hard refresh
Después de cada deploy, recordar al usuario hacer hard refresh:
- Windows/Linux: `Ctrl + Shift + R`
- Mac: `Cmd + Shift + R`
- Mobile: mantener presionado botón recargar → "Recarga forzada"

O proporcionar la URL del deployment específico (`https://[hash].proyecto.pages.dev`) que tiene cache nuevo.

---

## 17. PROMPT INICIAL SUGERIDO

Para arrancar un proyecto similar en un nuevo chat, pega esto:

```
Actúa como Desarrollador Web Full Stack Senior + Especialista en SEO Local.

Construye una landing page de [NICHO] a domicilio en [CIUDAD/REGIÓN] siguiendo
EXACTAMENTE el master prompt adjunto (Método MML). Nicho: [descripción].
Ciudad: [nombre]. Comunas/sectores a cubrir: [N] ubicaciones.

Stack: Astro 4 + Tailwind CSS + Vanilla JS + Leaflet + Cloudflare Pages.

Entregar:
1. Repo local con git init + commit inicial
2. Build SSG que genere [N + 5] páginas (home + N landings por ubicación + faq + galeria + privacidad + sitemap)
3. SEO on-page completo con Schema.org JSON-LD (LocalBusiness + Service + FAQPage + BreadcrumbList)
4. Webmanifest PWA + iconos
5. Sitemap dinámico
6. Mapa Leaflet con tiles OSM + filtro CSS dark
7. Galería con lightbox
8. Deploy a GitHub + Cloudflare Pages

Tokens (NO commitear): GH_TOKEN=... CF_TOKEN=... CF_ACCOUNT_ID=...
```

---

## 18. ARCHIVOS DE REFERENCIA

Estructura final del proyecto que funciona en producción:

```
Páginas HTML totales:
├── /                          # Home
├── /ubicaciones               # Hub + mapa amplio
├── /ubicacion/[slug]          # N landings (una por comuna/municipio)
├── /faq                       # FAQ global
├── /galeria                   # Galería completa
├── /privacidad                # Política de privacidad
└── /sitemap.xml               # Sitemap dinámico

Componentes clave:
├── Layout.astro              # Head + SEO + Schema
├── Navbar.astro              # Sticky + mega-dropdown Ubicaciones
├── Hero.astro                # Sin foto de fondo (solo glow)
├── LeafletMap.astro          # Leaflet + OSM + filtro CSS
├── Gallery.astro             # Lightbox accesible
└── Footer.astro              # Datos fiscales + listado SEO ubicaciones

Data:
└── src/data/ubicaciones.ts   # N ubicaciones con slug, nombre, zona, lat/lng, FAQ único
```

---

**Fin del Master Prompt.** Pega esto completo en un nuevo chat para reproducir el mismo nivel de calidad, arquitectura y aprendizajes.

*Método Malla Local (MML) · Edward Valencia · @makeseo · 360 Soluciones*