# Archivo Insolito - Recurso gratuito editable

Landing one-page gratuita con identidad editorial oscura y misteriosa.
Portada ficticia para proyecto editorial estatico.
Editable directamente en HTML/CSS. Sin dependencias ni instalacion.

Creada por Aguilar Forge · aguilarforge.com

---

## Que es este recurso

Portada editorial estatica de una sola pagina. Incluye:

- header con logo y navegacion interna;
- hero con titular, descripcion y tarjeta destacada;
- cuatro tarjetas de casos/articulos;
- bloque de video (placeholder visual);
- tres categorias tematicas;
- modulo de newsletter (visual, sin envio real);
- footer con redes, contacto y credito.

Identidad visual: negro editorial + dorado + tipografia serif. Tono oscuro y misterioso.

---

## Como abrirlo

Abre `index.html` directamente en cualquier navegador. No requiere instalacion ni servidor.

Para entregar o distribuir: comprime la carpeta completa `landing-archivo-insolito-gratis-v1/` como ZIP.

---

## Estructura de archivos

```
landing-archivo-insolito-gratis-v1/
├── index.html         ← contenido y estructura de la pagina
├── styles.css         ← estilos, colores, tipografia
├── README.md          ← esta guia
└── assets/
    ├── fondo-hero.png ← imagen de fondo del hero (sustituible)
    └── logo-icono.png ← icono de marca en el header (sustituible)
```

---

## Que editar en index.html

### Marca y titulo

| Elemento | Donde | Que cambiar |
|---|---|---|
| Titulo de la pagina | `<title>` en `<head>` | "Archivo Insolito \| Portada editorial gratuita" |
| Meta description | `<meta name="description">` | Descripcion breve del proyecto |
| Nombre en header | `.brand-text` | "Archivo Insolito" |
| Icono en header | `<img src="assets/logo-icono.png">` | Sustituir por tu logo en `assets/` |

### Hero

| Elemento | Que cambiar |
|---|---|
| Subtitulo eyebrow | `<p class="eyebrow">PORTADA EDITORIAL ESTATICA</p>` |
| Titular principal | `<h1>Casos, rarezas y cronicas...</h1>` |
| Parrafo descriptivo | `<p class="lead">Archivo Insolito es una portada...</p>` |
| Boton principal | `<a href="#casos">Leer casos recientes</a>` — texto y destino |
| Boton secundario | `<a href="#club">Unirme al club (placeholder)</a>` — texto y destino |

### Tarjeta destacada del hero

Bloque `<aside class="support-card">` junto al titular:

- Titulo: "Numero destacado de la semana"
- Lista con tres campos: `[CASO PRINCIPAL EN PREPARACION]`, `[CIUDAD / BARRIO / UBICACION]`, `[DD/MM/AAAA]`

Sustituye los campos entre corchetes por datos reales o deja los placeholders si el recurso es solo demo.

### Casos y articulos (4 tarjetas)

Seccion `id="casos"`. Cada tarjeta `<article class="card">` tiene:

- `<p class="card-tag">Caso 01</p>` — etiqueta numerica o categoria
- `<h3>...</h3>` — titular del articulo
- `<p>...</p>` — resumen o intro
- `<a href="#">Abrir articulo (placeholder)</a>` — enlace al articulo real (sustituir `#`)

### Video destacado

Seccion `id="video"`. Bloque visual sin reproductor activo.

Para activar un video real, sustituye el contenido del `.video-frame` por un `<iframe>` de YouTube o Vimeo:

```html
<iframe
  src="https://www.youtube.com/embed/TU_ID_DE_VIDEO"
  title="Titulo del video"
  frameborder="0"
  allowfullscreen
></iframe>
```

Mientras tanto, el bloque muestra un placeholder visual con instrucciones de sustitucion.

### Categorias (3 bloques)

Seccion `id="categorias"`. Cada `<article class="trust-item">` tiene:

- `<h3>...</h3>` — nombre de la categoria
- `<p>...</p>` — descripcion breve
- `<a href="#">Explorar categoria (placeholder)</a>` — enlace (sustituir `#` por la URL real)

### Newsletter / Club

Seccion `id="club"`. Formulario visual sin envio real.

- El formulario tiene `action="#"` — no envia datos.
- El texto "Nota: bloque no conectado. No guarda datos ni envia correo en esta version." es intencionado.
- Para conectar a un servicio real (Mailchimp, Brevo, etc.), sustituye `action` por la URL del servicio y ajusta los campos.

### Footer

Bloque `<footer class="site-footer">`:

- Nombre visible: `<strong>Archivo Insolito</strong>` — sustituir si cambias la marca
- Redes: enlace Instagram, YouTube, X — sustituir `href="#"` por las URLs reales
- Email de contacto: `mailto:redaccion@ejemplo.com` — sustituir por el correo real
- Credito: "Recurso gratuito de Aguilar Forge · aguilarforge.com" — mantener si se usa como recurso distribuido

---

## Que editar en styles.css

Todas las variables de color y tipografia estan en el bloque `:root` al inicio del archivo:

| Variable | Valor actual | Que controla |
|---|---|---|
| `--primary` | `#c8952e` | Color dorado: botones, enlaces de accion, acentos |
| `--primary-dark` | `#a67820` | Estado hover de botones primarios |
| `--bg` | `#0e1016` | Fondo general de la pagina |
| `--surface` | `#141822` | Fondo de tarjetas |
| `--surface-soft` | `#111420` | Fondo de secciones suaves |
| `--text` | `#ede9e0` | Texto principal |
| `--muted` | `#8e9ab2` | Texto secundario y notas |
| `--text-heading` | `#f5f0e6` | Titulares |

Para cambiar la **tipografia**, edita `font-family` en la regla `body` (tipografia base) y en `h1, h2, h3` (titulares).

Para cambiar la **imagen de fondo del hero**, busca la regla `.hero` y actualiza la ruta dentro de `url(...)`:

```css
.hero {
  background:
    linear-gradient(...),
    url('assets/fondo-hero.png') ...;
}
```

Sustituye `assets/fondo-hero.png` por la ruta de tu imagen.

---

## Assets incluidos

| Archivo | Uso | Como sustituir |
|---|---|---|
| `assets/fondo-hero.png` | Imagen de fondo del hero | Reemplaza el archivo con el mismo nombre o actualiza la ruta en `.hero` en `styles.css` |
| `assets/logo-icono.png` | Icono en el header junto al nombre de marca | Reemplaza el archivo con el mismo nombre o actualiza `src` en el `<img>` del header |

Los assets son imagenes reales incluidas en este recurso. Ambos son sustituibles sin cambiar el HTML si mantienes el mismo nombre de archivo.

---

## Placeholders intencionados

Estos elementos son intencionalmente incompletos y deben sustituirse al adaptar el recurso:

| Placeholder | Donde | Que hacer |
|---|---|---|
| `href="#"` | Todos los enlaces de cards, categorias y redes | Sustituir por la URL real o dejar `#` si es solo demo |
| `mailto:redaccion@ejemplo.com` | Footer — contacto editorial | Sustituir por el correo real |
| `[CASO PRINCIPAL EN PREPARACION]` | Tarjeta hero — lista | Sustituir por el dato real |
| `[CIUDAD / BARRIO / UBICACION]` | Tarjeta hero — lista | Sustituir por la ubicacion real |
| `[DD/MM/AAAA]` | Tarjeta hero — lista | Sustituir por la fecha real |
| `VIDEO_PLACEHOLDER` | URL en el bloque de video | Sustituir por el ID real del video |
| `contacto@ejemplo.com` | Placeholder del input de newsletter | Sustituir por el email real si se conecta |

La newsletter **no envia datos** en esta version. El formulario es visual.

---

## Estado del recurso

- Estado: recurso gratuito editable — listo para demo o distribucion
- Version: v1
- Validado en: Chrome (mobile 390px, tablet 768px, desktop 1280px)
- Sin dependencias externas ni build necesario
