# Landing Fontanero - Guia rapida de adaptacion

Plantilla HTML/CSS editable para servicios de fontaneria local.  
Abre directamente en navegador. Sin instalaciones, sin build, sin dependencias.

---

## Que contiene esta carpeta

| Archivo | Para que sirve |
|---|---|
| `index.html` | Estructura y contenido de la landing. Aqui editas textos, datos y enlaces. |
| `styles.css` | Estilos visuales. Solo lo necesitas si quieres cambiar colores, fuentes o espaciados. |
| `assets/logo_gota.png` | Logo de gota usado en el header. |
| `assets/fondo_hero.png` | Imagen visual de apoyo usada en la tarjeta del hero. |
| `README.md` | Esta guia. |

---

## Como abrir la landing

**Opcion rapida:** Abre `index.html` directamente en tu navegador (doble clic o arrastrar al navegador).

**Opcion con servidor local** (si quieres evitar limitaciones del navegador con rutas de archivo):
- Con VS Code + extension Live Server: clic derecho sobre `index.html` -> "Open with Live Server".
- Con Node.js: `npx serve .` dentro de esta carpeta.

---

## Que puedes cambiar

Todos los cambios se hacen en `index.html`. Buscalos por el texto que aparece a continuacion.

### Nombre del negocio

Busca **`NOMBRE DEL NEGOCIO`** (aparece en el header y en el footer). Cambialo por el nombre real.

```html
<!-- Header -->
<a class="brand" href="#inicio">
  <span class="brand-mark">
    <img src="assets/logo_gota.png" alt="Logo gota de agua" />
  </span>
  <span class="brand-text">NOMBRE DEL NEGOCIO</span>
</a>

<!-- Footer -->
<p><strong>NOMBRE DEL NEGOCIO</strong> · Plantilla gratuita creada por Aguilar Forge · Demo editable · [aguilarforge.com]</p>
```

Tambien actualiza el `<title>` en el `<head>`:

```html
<title>Plantilla Landing Fontanero</title>
```

### Titular y subtitulo del hero

```html
<h1>Fontanero rapido para urgencias, fugas y desatascos</h1>
<p class="lead">
  Atencion en tu zona con presupuesto claro y solucion practica para
  hogar, bano y cocina.
</p>
```

### Telefono

Aparece en tres lugares. Busca **`+34 000 00 00 00`** y **`tel:+34000000000`**:

```html
<!-- Boton del hero -->
<a class="btn btn-primary" href="tel:+34000000000">Llamar ahora: +34 000 00 00 00</a>

<!-- Tarjeta de contacto -->
<a class="contact-info-value" href="tel:+34000000000">+34 000 00 00 00</a>

<!-- Boton CTA de contacto -->
<a class="btn btn-primary btn-lg" href="tel:+34000000000">Solicitar informacion</a>
```

Sustituye `+34000000000` (sin espacios, para los `href`) y `+34 000 00 00 00` (con espacios, para el texto visible).

### WhatsApp

Busca **`wa.me/34000000000`**:

```html
<!-- Boton del hero -->
<a class="btn btn-secondary" href="https://wa.me/34000000000">WhatsApp: mensaje rapido</a>

<!-- Tarjeta de contacto -->
<a class="contact-info-value" href="https://wa.me/34000000000">+34 000 00 00 00</a>
```

Formato del enlace: `https://wa.me/34XXXXXXXXX` (codigo de pais sin `+` ni espacios).

### Email

Busca **`contacto@ejemplo.com`**:

```html
<a class="contact-info-value" href="mailto:contacto@ejemplo.com">contacto@ejemplo.com</a>
```

### Zona de servicio

Busca **`[TU CIUDAD Y ALREDEDORES]`**:

```html
<span class="contact-info-value">[TU CIUDAD Y ALREDEDORES]</span>
```

### Servicios

Hay 4 tarjetas de servicio dentro de `<div class="cards-grid">`. Cada una tiene este formato:

```html
<article class="card card--icon">
  <span class="card-icon" aria-hidden="true">
    <!-- icono SVG -->
  </span>
  <h3>Reparacion de fugas</h3>
  <p>Detectamos y reparamos fugas de agua en tuberias, grifos y sanitarios.</p>
</article>
```

Edita el `<h3>` y el `<p>` de cada tarjeta. Puedes anadir o quitar tarjetas respetando el mismo formato.

### Ventajas

Hay 3 items dentro de `<div class="trust-list">`. Cada uno tiene este formato:

```html
<article class="trust-item">
  <span class="trust-icon" aria-hidden="true">
    <!-- icono SVG -->
  </span>
  <div>
    <h3>Atencion directa</h3>
    <p>Hablas siempre con alguien de confianza.</p>
  </div>
</article>
```

Edita el `<h3>` y el `<p>` de cada item.

### Redes sociales y enlaces del footer

Busca esta seccion al final de `index.html`:

```html
<p>
  Redes: <a href="#">Facebook</a> · <a href="#">Instagram</a> ·
  <a href="#">Google Business</a>
</p>
```

Sustituye cada `#` por la URL real de tu perfil. Si no usas alguna red, elimina esa linea.

---

## Assets del hero y logo

Los assets estan dentro de `assets/`:

- `assets/logo_gota.png`
- `assets/fondo_hero.png`

### Como sustituir `logo_gota`

1. Reemplaza `assets/logo_gota.png` por tu logo (idealmente cuadrado).
2. Manten el mismo nombre para no tocar rutas en `index.html`.
3. Si cambias nombre o extension, actualiza el `src` de la imagen en el header.

### Como sustituir `fondo_hero`

1. Reemplaza `assets/fondo_hero.png` por la imagen deseada.
2. Manten el mismo nombre para no tocar rutas.
3. Si cambias nombre o extension, actualiza el `src` del `<img>` dentro de `.support-media`.
4. Recomendado: imagen horizontal ligera (aprox. 1200x675, formato webp o png optimizado).

---

## Antes de publicar - checklist

- [ ] Telefono real en los tres lugares donde aparece (`tel:` y texto visible).
- [ ] WhatsApp real (`wa.me/` y texto visible).
- [ ] Email real (`mailto:` y texto visible).
- [ ] Zona de servicio real (eliminar los corchetes `[...]`).
- [ ] Nombre del negocio en header y footer.
- [ ] `<title>` de la pagina actualizado.
- [ ] Textos del hero revisados.
- [ ] Servicios con nombres y descripciones reales.
- [ ] Ventajas con textos reales.
- [ ] Tarjeta de apoyo del hero revisada.
- [ ] Redes sociales con URLs reales o lineas eliminadas.
- [ ] Revisado en pantalla de movil o ventana estrecha.
- [ ] No quedan textos con placeholders visibles.

---

## Notas

- Los colores principales se definen en `styles.css`, dentro de `:root` al inicio del archivo.
- La landing funciona sin JavaScript.
- El recurso es una plantilla demo editable, no un sitio publicado.

---

## Creditos y uso

Plantilla creada por Aguilar Forge como recurso gratuito editable.

Puedes adaptarla para un negocio o proyecto propio.  
No esta pensada para revenderse como plantilla propia sin modificacion o sin autorizacion.

Credito recomendado:  
"Plantilla gratuita creada por Aguilar Forge".
