## Paleta de colores

### Colores primarios

**Fondo**

- Color: `#f2f2f0`

- Descripción: Blanco roto neutro claro, limpio y minimalista.

- Uso: Todos los fondos de diapositivas sin excepción

**Texto y líneas principales**

- Color: `#2B2B2B` o `#1A1A1A`

- Descripción: Gris muy oscuro, casi negro.

- Uso: Todo el contenido de texto, líneas divisorias de encabezado, contornos geométricos, contornos de caracteres.

### Colores de acento

**Azul vibrante**

- Color: `#5B7FFF` (alternativa: `#4D6FE8`)

- Descripción: Azul medio brillante con energía

- Uso: Nodos circulares en formas geométricas, ropa/bufandas de personajes, rellenos de botones, puntos decorativos.

**Oro apagado**

- Color: `#C9B568` (alternativa: `#D4C17A`)

- Descripción: Tono mostaza cálido/dorado

- Uso: Nodos circulares sobre formas geométricas (alternando con azul), acentos decorativos

### Reglas de aplicación del color

- El fondo SIEMPRE es `#E8E6E3`

- El texto SIEMPRE es `#2B2B2B`

- El azul y el dorado se utilizan ÚNICAMENTE para nodos circulares y detalles de caracteres.

- Nunca utilices el azul o el dorado como colores para bloques grandes o texto.

- Mantener un alto contraste entre el texto y el fondo.

## Sistema tipográfico

### Familias de fuentes

**Fuente principal: Roca Two (o similar con serifa gruesa)**

- Características: Serif audaz y amigable con cualidades redondeadas

- Grosor: Negrita/Gruesa

- Uso: Todos los títulos de diapositivas, encabezados principales, encabezados de sección

- Mantener la misma fuente

**Fuente secundaria para el cuerpo del texto: Poppins (o Inter)**

- Características: Tipografía sans-serif limpia y moderna con excelente legibilidad.

- Peso: Regular (400) para el cuerpo, Medio (500) para enfatizar

- Uso: Todo el texto principal, subtítulos, leyendas, números de página, texto del logotipo

- mantener la misma fuente

### Jerarquía de tamaños de fuente

**Títulos extragrandes** (Diapositivas de portada, separadores de secciones principales)

- Fuente: **Roca Two**

- Tamaño: 72-96 pt

- Color: `#2B2B2B`

- Uso: "Título principal", "Gracias", "Agenda"

**Encabezados grandes** (Títulos de las diapositivas de contenido)

- Fuente: **Roca Two**

- Tamaño: 48-60 pt

- Color: `#2B2B2B`

- Uso: "Nuestra visión", "Posicionamiento de marca", "¿De qué se trata YouMind?"

**Texto principal** (Párrafos, descripciones)

- Fuente: Poppins Regular

- Tamaño: 18-24 pt

- Color: `#2B2B2B`

- Altura de línea: 1,6-1,8

- Uso: Todo el contenido de los párrafos y las descripciones.

**Texto pequeño** (Números de página, pie de página, subtítulos)

- Fuente: Poppins Regular

- Tamaño: 16-18 pt

- Color: `#2B2B2B`

- Uso: "Página X", URL de sitios web, direcciones de correo electrónico

**Texto del botón/píldora**

- Fuente: Poppins Regular o Medium

- Tamaño: 20-24 pt

- Color: `#2B2B2B`

- Uso: Texto dentro de botones de píldora redondeados

### Reglas de tipografía

- Nunca mezcle fuentes con serifa - solo **Roca Two** para visualización

- Nunca uses serifa para el texto del cuerpo - solo Poppins

- Mantener una altura de línea uniforme (1,6-1,8) para una mejor legibilidad.

- Todo el texto debe ser `#2B2B2B` - sin excepciones

- Espacio generoso entre párrafos (24-32pt)

## Sistema de diseño

### Estructura del encabezado global

**Solo la diapositiva de portada (Página 1):**

**Elemento de encabezado izquierdo:**

- Logotipo

- Tamaño: 32-40 pt de diámetro

- Color: Contorno negro `#2B2B2B`

- Posición: 60-80px desde el borde izquierdo, 60-80px desde el borde superior

- Espaciado: 12-16px entre el logotipo y el texto

**Elemento de encabezado derecho:**

- Fuente: Poppins Regular, 16-18pt

- Color: `#2B2B2B`

- Posición: 60-80px desde el borde derecho, 60-80px desde la parte superior

- Alineación: Alineación a la derecha

**Divisor de encabezado:**

- Línea horizontal delgada

- Peso: 1-2 puntos

- Color: `#2B2B2B`

- Posición: Debajo de los elementos del encabezado, abarcando todo el ancho con márgenes.

- Margen desde los bordes: 60-80 píxeles a la izquierda y a la derecha.

**Diapositivas de contenido (páginas 2-4) y diapositiva final (página 5):**

- SIN logotipo de YouMind

- Solo texto de la página X

- Posición: Esquina superior derecha, centro inferior u otra ubicación discreta.

- Sin línea divisoria de encabezado

- Más espacio vertical disponible para el contenido

### Sistema de márgenes

**Márgenes estándar:**

- Parte superior: 60-80px (debajo del divisor del encabezado, añadir 40-60px más)

- Parte inferior: 60-80 píxeles

- Izquierda: 80-100 píxeles

- Derecha: 80-100 píxeles

**Área de contenido:**

- Tras tener en cuenta el encabezado y los márgenes, el área de contenido es de aproximadamente 1200-1280 píxeles de ancho × 600-680 píxeles de alto (para 16:9 a 1920×1080).

## Elementos visuales

### Formas geométricas dibujadas a mano

**Diseño principal:**

- Estilo: Rectángulos y cuadrados imperfectos, dibujados a mano.

- Grosor de la línea: 2-3 pt

- Color: Negro `#2B2B2B`

- Calidad: Orgánica, líneas ligeramente onduladas (no perfectamente rectas).

- Conexión: Líneas que conectan figuras en diferentes ángulos.

**Nodos circulares:**

- Forma: Círculos perfectos

- Tamaño: 24-40 pt de diámetro

- Relleno: Color sólido, ya sea `#5B7FFF` (azul) o `#C9B568` (dorado)

- Posición: En los puntos de conexión y esquinas de las formas geométricas.

- Diseño: Alternar azul y dorado para mayor variedad.

**Reglas de colocación:**

- Posicionar en las esquinas de las diapositivas (superior izquierda, superior derecha, inferior izquierda, inferior derecha)

- Nunca se superponga con el contenido de texto

- Mantén una distancia de 40-60 píxeles de las áreas de contenido.

- Crea equilibrio visual: si el lado izquierdo tiene formas, el lado derecho también debería tenerlas.

- Disposición típica: 2-4 rectángulos conectados con 3-6 nodos circulares.

### Botones de pastillas redondeados

**Especificaciones de diseño:**

- Forma: Rectángulo redondeado (forma de píldora)

- Borde: negro sólido de 2pt `#2B2B2B`

- Relleno: Transparente o `#E8E6E3` (igual que el fondo)

- Radio del borde: Radio de altura completa (píldora perfecta)

- Relleno: 16-24px horizontal, 12-16px vertical

- Texto: Poppins Regular, 20-24pt, `#2B2B2B`

**Uso:**

- Elementos de navegación en las diapositivas de la agenda

- Botones de llamada a la acción

- Etiquetas de sección

- Siempre delineado, nunca relleno de color.

**Estado al pasar el cursor/estado activo (si es interactivo):**

- Relleno: `#5B7FFF` (azul)

- Texto: Blanco `#FFFFFF`

- Borde: `#5B7FFF`

### Rejillas de puntos decorativas

**Presupuesto:**

- Puntos: Círculos pequeños, de 3-4 puntos de diámetro.

- Color: `#2B2B2B`

- Patrón: Cuadrícula regular, espaciado de 12-16 píxeles

- Disposición: cuadrícula de 6×6 o 8×8

- Posición: Esquina superior derecha, a 100-150 píxeles de los bordes.

- Uso: Acento opcional, añade interés visual sin resultar excesivo

### Iconos (Uso mínimo)

**Estilo:**

- Solo dibujo lineal, sin rellenos

- Peso: 2-3 puntos

- Color: `#2B2B2B`

- Tamaño: 48-64 pt

- Ejemplos: Icono de ojo (visión), objetivo/mira (misión)

- Uso: Con moderación, solo cuando se refuercen conceptos específicos.

## Sistema de ilustración de personajes

### Especificaciones de diseño de personajes

**Estructura básica:**

- Una ilustración minimalista, dibujada a mano, de un personaje humanoide blanco y sencillo. El personaje tiene una cabeza redondeada y alargada, dos pequeños puntos negros como ojos y una nariz puntiaguda prominente. No tiene dedos definidos en las manos ni en los pies. Lleva una bufanda gruesa, larga y azul lisa [opcional: sustituir por una bufanda color mostaza] enrollada alrededor del cuello, con la cola colgando. El estilo artístico utiliza contornos gruesos y texturizados de rotulador negro y colores planos sin sombreado, sobre un fondo blanco roto liso. El personaje es [lo que encajaba en el contexto].

**Acento azul (CRÍTICO):**

- Elemento: Bufanda, camisa o prenda de vestir

- Color: `#5B7FFF` (azul vibrante)

- Estilo: Formas orgánicas fluidas dibujadas a mano

- Cobertura: 15-25% del personaje

- Propósito: Identidad de marca, interés visual, dinamismo

**Coherencia de estilo:**

- Calidad siempre dibujada a mano (líneas orgánicas e imperfectas)

- Incluir siempre un elemento de acento azul.

- Mantener el mismo grosor de línea en todos los caracteres.

- Mantén las proporciones consistentes en todas las poses.

### Pautas para la ilustración minimalista

**La simplicidad ante todo:**

- Mantén todas las ilustraciones extremadamente simples y minimalistas.

- La altura de los caracteres NO debe exceder los 120 pt (aproximadamente el 10-12% de la altura de la diapositiva).

- Los elementos geométricos deben ser pequeños y limitarse únicamente a las esquinas.

- La cobertura total de la ilustración debe ser inferior al 15% del área de la diapositiva.

- Evite los dibujos complejos o detallados.

**Espacio y margen de maniobra:**

- Mantenga un amplio espacio en blanco en toda la diapositiva.

- El texto debe ocupar solo entre el 50% y el 55% del área de contenido (normalmente el lado izquierdo).

- El lado derecho debe permanecer prácticamente vacío para dar espacio visual.

- Márgenes amplios en todos los lados: mínimo 100px, preferiblemente 100-120px.

- Las ilustraciones deben limitarse a la esquina inferior derecha, a una distancia mínima de 100 píxeles de los bordes.

**Equilibrio de diseño:**

- El centro del tobogán debe estar limpio y vacío.

- Evite acumular objetos o llenar todo el espacio disponible.

- Utilice el espacio en blanco estratégicamente para crear enfoque y claridad.

- Menos es más: elimina los elementos visuales innecesarios.

- Priorizar la legibilidad y la amplitud sobre la decoración.