# Carpeta de Imágenes - RooBal Grup

Guía de qué imagen va en cada subcarpeta y cómo referenciarla en el HTML/CSS.
Todos los paths parten desde la raíz del proyecto (`roobal_grup/`).

---

## /images/hero
Imágenes del carrusel hero de `index.html` (fondo de cada slide).
Tamaño recomendado: **1920×1080 px**

| Nombre de archivo       | Dónde se usa            | Descripción sugerida          |
|-------------------------|-------------------------|-------------------------------|
| `hero-slide-1.jpg`      | Slide 1 (index.html)    | Laptop / tecnología           |
| `hero-slide-2.jpg`      | Slide 2 (index.html)    | Código en pantalla            |
| `hero-slide-3.jpg`      | Slide 3 (index.html)    | Equipo / trabajo en conjunto  |

Ruta en el HTML: `images/hero/hero-slide-1.jpg`

---

## /images/sobre-mi
Foto de perfil de la sección "Sobre mí" en `index.html`.
Tamaño recomendado: **800×700 px**

| Nombre de archivo    | Dónde se usa              |
|----------------------|---------------------------|
| `perfil.jpg`         | Sección sobre-mi (index)  |

Ruta en el HTML: `images/sobre-mi/perfil.jpg`

---

## /images/cv
Foto de perfil que aparece en el CV (`cv/index.html`).
Tamaño recomendado: **400×400 px** (cuadrada)

| Nombre de archivo    | Dónde se usa          |
|----------------------|-----------------------|
| `foto-cv.jpg`        | Encabezado del CV     |

Ruta en el HTML (desde cv/): `../images/cv/foto-cv.jpg`

---

## /images/figma-projects
Thumbnails y previews de los diseños Figma (`figma-projects/index.html`).
Tamaño recomendado: **1200×900 px**

Cada tarjeta usa la imagen tanto de thumbnail como de la imagen en el modal.

| Nombre de archivo              | Proyecto                   |
|--------------------------------|----------------------------|
| `app-movil.jpg`                | Diseño de App Móvil        |
| `dashboard.jpg`                | Dashboard Administrativo   |
| `landing-page.jpg`             | Landing Page Moderna       |
| `design-system.jpg`            | Sistema de Diseño          |
| `ecommerce.jpg`                | Prototipo E-commerce       |
| `saas-ui.jpg`                  | Interfaz de Usuario SaaS   |

Ruta en el HTML (desde figma-projects/): `../images/figma-projects/app-movil.jpg`

---

## /images/divi-projects
Thumbnails de los proyectos Divi (`divi-projects/index.html`).
Tamaño recomendado: **1200×900 px**

| Nombre de archivo              | Proyecto                   |
|--------------------------------|----------------------------|
| `corporativo.jpg`              | Sitio Web Corporativo      |
| `ecommerce.jpg`                | Tienda Online              |
| `blog.jpg`                     | Blog Personal              |
| `landing-saas.jpg`             | Landing Page SaaS          |
| `portafolio-creativo.jpg`      | Portafolio Creativo        |
| `restaurante.jpg`              | Sitio de Restaurante       |

Ruta en el HTML (desde divi-projects/): `../images/divi-projects/corporativo.jpg`

---

## /images/proyectos
Imagen hero de la página `proyectos.html` y cualquier imagen de categoría futura.
Tamaño recomendado: **1920×800 px** para el hero.

| Nombre de archivo       | Dónde se usa               |
|-------------------------|----------------------------|
| `hero-proyectos.jpg`    | Banner hero de proyectos   |

Ruta en el HTML: `images/proyectos/hero-proyectos.jpg`

---

## /images/unidades
Imágenes para la página `unidades.html` (hero y cards de unidades).
Tamaño recomendado: **1920×800 px** para hero, **600×400 px** para cards.

| Nombre de archivo       | Dónde se usa              |
|-------------------------|---------------------------|
| `hero-unidades.jpg`     | Banner hero de unidades   |
| `unidad-01.jpg`         | Card unidad 1             |
| `unidad-02.jpg`         | Card unidad 2             |
| *(agrega más según necesites)* |                    |

Ruta en el HTML: `images/unidades/hero-unidades.jpg`

---

## /images/contacto
Imágenes para la página `contacto.html` (fondo, decoración, etc.).
Tamaño recomendado: **1920×800 px** para hero/fondo.

| Nombre de archivo       | Dónde se usa                  |
|-------------------------|-------------------------------|
| `hero-contacto.jpg`     | Banner/fondo de contacto      |

Ruta en el HTML: `images/contacto/hero-contacto.jpg`

---

## Formatos recomendados
- **Fotos**: `.jpg` (calidad 80–90%)
- **Logos, íconos, gráficos con transparencia**: `.png`
- **Animaciones**: `.gif` o `.webp`
- Para mejor rendimiento, considera `.webp` si no necesitas compatibilidad con navegadores muy antiguos.
