# IES Rosa Chacel — Brand Prompt para IA

> **Cómo usar este fichero:** copia todo su contenido como primer mensaje en tu conversación con Claude, ChatGPT, Gemini u otro asistente, antes de pedirle que modifique tu HTML/CSS/PHP. A partir de ahí, pide: *«Aplica la identidad institucional del IES Rosa Chacel a este código»* y pega tu fichero.

---

## 1. Contexto del sistema de identidad

El **IES Rosa Chacel** (Colmenar Viejo, Madrid) dispone de un sistema de identidad visual institucional con tres piezas base:

| Pieza | Descripción |
|-------|-------------|
| **Isotipo** | Pirámide 3D renderizada en 10 perspectivas distintas (v1–v10). Existe en variante **color**, **grises** y **wireframe**. |
| **Logotipo** | Texto tipográfico «IES ROSA CHACEL · COLMENAR VIEJO» en Montserrat. |
| **Imagotipo** | Combinación de isotipo + logotipo. Disponible en layout **horizontal**, **cuadrada** y **vertical**, con fondos transparentes en los 6 colores institucionales y en paper (blanco cálido). |

La identidad es **dinámica**: cada carga de página muestra una versión distinta del isotipo/imagotipo (v1–v10). Esto refuerza la idea de que el centro tiene múltiples perspectivas y puntos de vista.

---

## 2. Paleta de colores

Usa **siempre** los nombres de token CSS; nunca codifiques los hexadecimales directamente en el HTML inline.

| Token CSS     | Hex       | Nombre   | Cuándo usarlo |
|---------------|-----------|----------|---------------|
| `--azulon`    | `#143755` | Azulón   | Fondo de nav, hero, CTAs primarios, cabeceras oscuras, firma de correo |
| `--verdemar`  | `#3F7883` | Verdemar | Acentos secundarios, eyebrows de sección, estados hover suaves |
| `--albero`    | `#EFAA0D` | Albero   | Borders activos en nav, énfasis, etiquetas doradas, iconos de contacto en firma |
| `--pai`       | `#E34E12` | PAI      | CTAs alternativos («Usar plantilla», «Descargar»), botones de acción |
| `--iit`       | `#E2131F` | IIT      | Estado hover de `--pai`, alertas, urgencia |
| `--pd`        | `#6093C6` | PD       | Información secundaria, azul claro |
| `--ink`       | `#0e2638` | Tinta    | Texto principal en fondos claros |
| `--paper`     | `#fbfaf7` | Papel    | Fondo base de página |
| `--line`      | `#e8e4dc` | Línea    | Bordes, reglas horizontales, separadores |
| `--mute`      | `#706b63` | Muted    | Texto secundario, descripciones, metadatos |
| `--white`     | `#ffffff` | Blanco   | Fondo de tarjetas sobre `--paper` |
| `--light`     | `#f5f4f0` | Claro    | Fondo de secciones alternadas |
| `--gray`      | `#888880` | Gris     | Pies de foto, notas, etiquetas de menor jerarquía |

### Combinaciones correctas de contraste

- Texto sobre `--azulon`: **blanco (#fff)** o `rgba(255,255,255,0.80)` para enlaces
- Texto sobre `--paper` o `--white`: **`--ink`** para el cuerpo principal
- Texto de énfasis sobre fondo claro: **`--azulon`** (headings) o **`--mute`** (descripciones)
- Texto sobre `--verdemar`: **blanco**

---

## 3. Tipografía

### Familias
- **Headings y UI:** `'Montserrat', sans-serif`
- **Cuerpo de texto:** `'Lato', sans-serif`

### Carga de fuentes (CDN)
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,400&display=swap" rel="stylesheet">
```

### Escala y reglas de uso

| Elemento | Fuente | Peso | Tamaño | Notas |
|----------|--------|------|--------|-------|
| `h1` hero | Montserrat | 900 | `clamp(2.8rem, 5vw, 4.2rem)` | `letter-spacing: -0.025em; line-height: 0.98` |
| `h1` interior | Montserrat | 900 | `clamp(2rem, 4vw, 3.2rem)` | `letter-spacing: -0.02em; line-height: 1.05` |
| `h2` de sección | Montserrat | 900 | `1.6rem` | `letter-spacing: -0.02em` |
| `h3` de bloque | Montserrat | 700 | `1.25rem` | `letter-spacing: -0.02em` |
| Eyebrow / etiqueta | Montserrat | 700 | `0.69rem` (11px) | `text-transform: uppercase; letter-spacing: 0.2em` |
| Cuerpo principal | Lato | 400 | `1rem` (16px) | `line-height: 1.6` |
| Lead / intro | Lato | 400 | `1.125rem` (18px) | `line-height: 1.6; max-width: 520px` |
| Texto secundario | Lato | 400 | `0.875rem` (14px) | `line-height: 1.6; color: var(--mute)` |
| Notas / pie | Lato | 400 | `0.82rem` (13px) | `color: var(--gray)` |
| Nav links | Montserrat | 500 | `0.82rem` (13px) | `letter-spacing: normal` |
| Botón | Montserrat | 600–700 | `0.875rem` (14px) | `letter-spacing: 0.01em` |
| Botón small / CTA | Montserrat | 700 | `0.75rem` (12px) | `uppercase; letter-spacing: 0.08em` |

---

## 4. Componentes principales

### 4.1 Nav institucional

```css
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(20, 55, 85, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
```

- Logo a la izquierda (imagotipo horizontal, `height: 52px`)
- Links a la derecha: `color: rgba(255,255,255,0.80)`; hover: `border-bottom: 2px solid rgba(239,170,13,0.55)`
- Link activo: `border-bottom: 2px solid var(--albero); color: #fff; font-weight: 600`
- Links utilitarios (herramientas secundarias): `font-size: 11px; color: rgba(255,255,255,0.38)`
- En móvil (<900px): menú hamburguesa que desliza desde arriba

### 4.2 Banda de color institucional

Franja decorativa de 5–6px que divide secciones. **Obligatoria** tras la nav y antes de zonas de contenido importantes.

```html
<!-- Orden estándar (de oscuro a claro) -->
<div style="display:flex; height:5px;">
  <div style="flex:1; background:#143755"></div>
  <div style="flex:1; background:#3F7883"></div>
  <div style="flex:1; background:#EFAA0D"></div>
  <div style="flex:1; background:#E34E12"></div>
  <div style="flex:1; background:#E2131F"></div>
  <div style="flex:1; background:#6093C6"></div>
</div>

<!-- Orden invertido (para cerrar secciones o antes del footer) -->
<div style="display:flex; height:5px;">
  <div style="flex:1; background:#E2131F"></div>
  <div style="flex:1; background:#E34E12"></div>
  <div style="flex:1; background:#EFAA0D"></div>
  <div style="flex:1; background:#3F7883"></div>
  <div style="flex:1; background:#6093C6"></div>
  <div style="flex:1; background:#143755"></div>
</div>
```

### 4.3 Hero de página principal

```html
<section style="display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center;
                max-width:1280px; margin:0 auto; padding:96px 32px 72px;">
  <div>
    <p style="font-family:'Montserrat',sans-serif; font-weight:600; font-size:11px;
              letter-spacing:0.22em; text-transform:uppercase; color:#3F7883; margin-bottom:22px;">
      Identidad institucional
    </p>
    <h1 style="font-family:'Montserrat',sans-serif; font-weight:900;
               font-size:clamp(2.8rem,5vw,4.2rem); line-height:0.98;
               letter-spacing:-0.025em; color:#143755; margin-bottom:28px;">
      Título principal
    </h1>
    <p style="font-family:'Lato',sans-serif; font-size:18px; line-height:1.6;
              color:#0e2638; max-width:520px; margin-bottom:36px;">
      Descripción introductoria del contenido de esta página.
    </p>
  </div>
  <div><!-- Imagen o elemento visual --></div>
</section>
```

### 4.4 Hero reducido (páginas interiores)

```html
<header style="background:#143755; padding:4rem 0 3.5rem;">
  <div style="max-width:1200px; margin:0 auto; padding:0 2.5rem;">
    <p style="font-family:'Montserrat',sans-serif; font-size:11px; font-weight:700;
              letter-spacing:0.2em; text-transform:uppercase; color:#EFAA0D;">
      Sección · Subsección
    </p>
    <h1 style="font-family:'Montserrat',sans-serif; font-weight:900;
               font-size:clamp(2rem,4vw,3.2rem); line-height:1.05;
               letter-spacing:-0.02em; color:#ffffff;">
      Título de la página
    </h1>
    <p style="font-family:'Lato',sans-serif; font-size:.95rem; line-height:1.7;
              color:rgba(255,255,255,0.65); max-width:55ch;">
      Descripción breve de la sección.
    </p>
  </div>
</header>
```

### 4.5 Botones

```html
<!-- Primario (azulón, pill) -->
<a href="#" style="display:inline-flex; align-items:center; gap:10px; padding:14px 22px;
   background:#143755; color:#fff; font-family:'Montserrat',sans-serif; font-weight:600;
   font-size:14px; border-radius:999px; text-decoration:none;">
  Acción principal
</a>

<!-- Fantasma (contorno azulón) -->
<a href="#" style="display:inline-flex; align-items:center; gap:10px; padding:14px 22px;
   background:transparent; color:#143755; border:1.5px solid #143755;
   font-family:'Montserrat',sans-serif; font-weight:600; font-size:14px;
   border-radius:999px; text-decoration:none;">
  Acción secundaria
</a>

<!-- CTA de acción (pai, pill pequeño) -->
<a href="#" style="display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1.25rem;
   background:#E34E12; color:#fff; font-family:'Montserrat',sans-serif; font-weight:700;
   font-size:12px; letter-spacing:.08em; text-transform:uppercase;
   border-radius:999px; text-decoration:none;">
  Descargar →
</a>
```

### 4.6 Tarjeta estándar

```html
<div style="background:#fff; border:1px solid #e8e4dc; border-radius:20px; overflow:hidden;">
  <div style="height:200px; background:#143755; display:flex; align-items:center; justify-content:center; padding:2rem;">
    <!-- Visual de la tarjeta -->
  </div>
  <div style="padding:1.75rem; display:flex; flex-direction:column; gap:1rem;">
    <p style="font-family:'Montserrat',sans-serif; font-weight:900; font-size:1.3rem;
              letter-spacing:-0.02em; color:#143755;">Nombre de la tarjeta</p>
    <p style="font-family:'Lato',sans-serif; font-size:.88rem; line-height:1.6; color:#706b63;">
      Descripción del contenido de esta tarjeta.
    </p>
  </div>
</div>
```

### 4.7 Footer compacto

```html
<footer style="background:#0d1a2a; padding:3rem 2.5rem; display:grid;
               grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem;">
  <div style="font-size:12px; color:rgba(255,255,255,.35); line-height:1.7;">
    <strong style="color:rgba(255,255,255,.6);">IES Rosa Chacel</strong> · Colmenar Viejo, Madrid<br>
    ies.rosachacel.colmenarviejo@educa.madrid.org · iesrosachacel.net<br>
    C/ Huertas 68 · 28770 Colmenar Viejo
  </div>
  <nav style="display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center;">
    <a href="#" style="font-size:11px; letter-spacing:.1em; text-transform:uppercase;
                       color:rgba(255,255,255,.3); text-decoration:none;">Sección</a>
  </nav>
  <p style="font-size:11px; letter-spacing:.15em; text-transform:uppercase;
             color:rgba(255,255,255,.25); text-align:right;">
    Identidad visual · 2025
  </p>
</footer>
```

---

## 5. Sistema de logos — rutas de ficheros

Los logos se sirven desde la carpeta `assets/logos/` (relativa a la raíz del sitio).

```
assets/logos/
├── isotipo/
│   ├── color/transparente/
│   │   └── isotipo-color-v{N}.png          (N = 1..10)
│   ├── grises/transparente/
│   │   └── isotipo-grises-v{N}.png
│   └── wireframe/transparente/
│       └── isotipo-wireframe-v{N}.png
│
├── logotipo/
│   └── color/transparente/
│       └── logotipo-color-transparente-{color}.png
│           (colores: azulon, verdemar, albero, pai, iit, pd, paper)
│
└── imagotipo/
    └── color/transparente/
        └── imagotipo-color-transparente-{fondo}-{layout}-v{N}.png
            fondos:  azulon | verdemar | albero | pai | iit | pd | paper
            layouts: horizontal | cuadrada | vertical
            N:       1..10
```

**Ejemplos de rutas:**
```
assets/logos/isotipo/color/transparente/isotipo-color-v3.png
assets/logos/imagotipo/color/transparente/imagotipo-color-transparente-paper-horizontal-v1.png
assets/logos/imagotipo/color/transparente/imagotipo-color-transparente-azulon-cuadrada-v7.png
```

### Identidad dinámica (selección aleatoria en cada carga)

Añade el atributo `data-v-base` con la ruta sin el número de versión ni `.png`. El script siguiente completa la URL:

```html
<img data-v-base="assets/logos/imagotipo/color/transparente/imagotipo-color-transparente-paper-horizontal"
     src="assets/logos/imagotipo/color/transparente/imagotipo-color-transparente-paper-horizontal-v1.png"
     alt="IES Rosa Chacel">
```

```js
document.querySelectorAll('[data-v-base]').forEach(img => {
  const v = Math.floor(Math.random() * 10) + 1;
  img.src = img.dataset.vBase + '-v' + v + '.png';
});
```

### Tamaños de uso recomendados

| Contexto | Pieza | Tamaño |
|----------|-------|--------|
| Nav sticky | Imagotipo horizontal | `height: 52px` |
| Hero grande | Imagotipo cuadrado | `width: 300–400px` |
| Tarjeta | Isotipo color | `height: 80–130px` |
| Footer | Isotipo color | `width: 38px; height: 38px` |
| Firma email | Imagotipo cuadrado | `88×88px` |
| Favicon | Isotipo color | `32×32px` |

---

## 6. Patrones de layout

### Estructura de página estándar

```html
<nav>…</nav>
<div class="color-band">…</div>     <!-- 6 franjas, 5–6px -->
<header>…</header>                  <!-- hero reducido con fondo azulón -->
<div class="color-band">…</div>
<main>
  <section>…</section>             <!-- padding: 4–5rem 0 -->
  <div class="color-band reversed">…</div>
  <section>…</section>
</main>
<div class="color-band">…</div>
<footer>…</footer>
```

### Contenedor estándar

```css
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
/* Wide (nav y hero) */
.container-wide {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
```

### Grid de tarjetas

```css
/* 3 columnas en desktop → 1 en móvil */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .card-grid { grid-template-columns: 1fr; } }
```

---

## 7. Breakpoints responsive

| Breakpoint | Descripción |
|------------|-------------|
| `< 900px`  | Menú hamburguesa, layouts de 1 columna, ocultar diorama |
| `< 600px`  | Padding reducido (`1.25rem`), fuentes más pequeñas |

---

## 8. Reglas de uso — qué hacer y qué evitar

### ✅ Hacer siempre

- Usar la **banda de color** como separador visual entre bloques de contenido importantes
- Aplicar `backdrop-filter: blur(12px)` en la nav para el efecto cristal sobre el contenido
- Usar `letter-spacing: -0.02em` en todos los headings Montserrat de peso 900
- Mantener el **logo en versión paper** (`imagotipo-color-transparente-paper-*`) sobre fondos oscuros (azulón)
- Usar `drop-shadow` (no `box-shadow`) sobre imágenes PNG con transparencia
- Randomizar la versión del isotipo/imagotipo (v1–v10) en cada carga de página
- Mantener ratio de contraste **WCAG AA** (4.5:1 para texto normal, 3:1 para texto grande)

### ❌ Nunca hacer

- No codificar los colores en hexadecimal directamente — usa siempre los tokens CSS (`var(--azulon)`)
- No usar el imagotipo sin margen de respeto mínimo de `16px` por todos los lados
- No escalar el isotipo por debajo de `24px` de altura
- No añadir efectos de color (filtros, overlay de color) sobre el área del isotipo
- No combinar `--iit` (`#E2131F`) como fondo con texto negro — el contraste es insuficiente
- No usar `box-shadow` en imágenes con transparencia; usar `filter: drop-shadow()`
- No poner texto blanco sobre `--albero` — contraste insuficiente
- No eliminar la banda de color entre la nav y el contenido principal

---

## 9. Variables CSS para copiar en tu proyecto

```css
:root {
  --azulon:   #143755;
  --verdemar: #3F7883;
  --albero:   #EFAA0D;
  --pai:      #E34E12;
  --iit:      #E2131F;
  --pd:       #6093C6;
  --ink:      #0e2638;
  --paper:    #fbfaf7;
  --line:     #e8e4dc;
  --mute:     #706b63;
  --white:    #ffffff;
  --light:    #f5f4f0;
  --gray:     #888880;
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Lato', sans-serif;
}
```

---

*Sistema de identidad visual — IES Rosa Chacel · Colmenar Viejo, Madrid*
*Manual completo disponible en: [iesrosachacel.net/identidad/](https://www.iesrosachacel.net/identidad/index.html)*