Análisis de Contenido Asistido por LLM — IDC Investigación

 https://evori.net/wp-content/evori/content_analisis_LLM.html

Eres un arquitecto front-end senior y UX writer experto en interfaces 

académicas e institucionales.

Tu tarea es generar UNA PÁGINA WEB COMPLETA en HTML + CSS + JavaScript puro, 

sin frameworks externos, sin lorem ipsum, con identidad visual oficial del IDC.

## INSTITUCIÓN

Nombre: IDC — Instituto de Diseño y Comunicación

Sede: Lima, Perú

Carreras:

  - Diseño Publicitario

  - Diseño de Modas

  - Comunicación Audiovisual

  - Diseño de Interiores

## NOMBRE DEL PROYECTO

"Análisis de Contenido Asistido por LLM — IDC Investigación"

## QUÉ ES LA PÁGINA

Página web institucional-académica que presenta la metodología de 

ANÁLISIS DE CONTENIDO ASISTIDO POR MODELOS DE LENGUAJE (LLM), 

orientada a docentes, investigadores y estudiantes del IDC en sus 

cuatro programas de diseño y comunicación.

Combina:

- Herramienta metodológica visual para investigación aplicada

- Presentación de un recurso docente institucional

- Demo de flujo de trabajo (pipeline de análisis)

- Recurso de apoyo para tesis, proyectos y revisiones sistemáticas

## IDENTIDAD VISUAL IDC (obligatorio respetar)

Colores institucionales:

  --color-primary:    #f3a100   /* Naranja IDC — identidad principal */

  --color-secondary:  #0072b9   /* Azul IDC — énfasis y links */

  --color-neutral-1:  #555553   /* Gris oscuro IDC — textos */

  --color-neutral-2:  #868686   /* Gris medio IDC — textos secundarios */

  --color-white:      #ffffff   /* Blanco — fondos y superficie */

Derivados para el sistema:

  --color-bg:              #ffffff

  --color-surface:         #fafaf9

  --color-surface-2:       #f5f4f0

  --color-surface-offset:  #eeede8

  --color-text:            #555553

  --color-text-muted:      #868686

  --color-text-inverse:    #ffffff

  --color-primary-hover:   #d4880a

  --color-primary-active:  #b36f00

  --color-primary-highlight: #fef3dc

  --color-secondary-hover: #005fa0

  --color-secondary-active: #004a7d

  --color-secondary-highlight: #dceef9

  --color-border: rgba(85, 85, 83, 0.12)

  --color-divider: rgba(85, 85, 83, 0.08)

Dark mode (obligatorio):

  --color-bg:       #1a1a18

  --color-surface:  #1f1f1d

  --color-text:     #e8e7e3

  --color-primary:  #f5b030   /* naranja levemente más claro en dark */

  --color-secondary: #4fa3d4  /* azul más claro en dark */

## LOGO IDC (instrucciones obligatorias)

1. En el NAVBAR, generar un logo SVG inline que reproduzca el estilo IDC:

   - Letras minúsculas "idc" en --color-primary (#f3a100)

   - Punto decorativo sobre la "i" también en --color-primary

   - Debajo, en --color-secondary: "DISEÑO & COMUNICACIÓN"

   - Fondo transparente

   - Ancho: 120px, alto proporcional

2. En el FOOTER, repetir el logo IDC SVG + línea con las 4 carreras:

   "Diseño Publicitario · Diseño de Modas · Comunicación Audiovisual · Diseño de Interiores"

3. Incluir un placeholder comentado donde iría el logo PNG oficial:

   <!-- <img src="./assets/logo-idc.png" alt="IDC Logo" width="120"> -->

   Pero mostrar el SVG generado mientras no exista el archivo real.

## CARRERAS — Uso en la página

Las 4 carreras del IDC deben aparecer en las secciones de CASOS DE USO y COMPONENTES:

Diseño Publicitario:

  Color distintivo: --color-primary (#f3a100)

  Icono SVG: megáfono / bocadillo de comunicación

  Caso de uso: análisis de campañas publicitarias y mensajes visuales

Diseño de Modas:

  Color distintivo: derivado naranja cálido #e8900a

  Icono SVG: aguja / hilo / silueta de prenda

  Caso de uso: análisis de tendencias, discursos de moda y branding

Comunicación Audiovisual:

  Color distintivo: --color-secondary (#0072b9)

  Icono SVG: cámara / pantalla / onda de sonido

  Caso de uso: análisis de guiones, mensajes audiovisuales, narrativas

Diseño de Interiores:

  Color distintivo: derivado azul #005fa0

  Icono SVG: plano / habitación / planta arquitectónica

  Caso de uso: análisis de tendencias espaciales, discursos de diseño

## TIPOGRAFÍA

Cargar desde Google Fonts:

  --font-display: 'Playfair Display', Georgia, serif   → h1, h2 (elegancia académica)

  --font-body:    'DM Sans', system-ui, sans-serif      → todo lo demás

Escala fluida obligatoria:

  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem)

  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem)

  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem)

  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem)

  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem)

  --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem)

## ESTRUCTURA DE SECCIONES (en este orden)

1. NAVBAR

   Fijo arriba. Logo IDC SVG (izq). Menú anclas (der): 

   Metodología · Carreras · Casos de Uso · FAQ

   Toggle modo oscuro. Color de fondo --color-bg con borde inferior sutil.

2. HERO

   Dos columnas: 

   - Izq: "Análisis de Contenido Asistido por LLM" (Playfair Display, --text-2xl)

     + subtítulo metodológico + badge naranja "IDC Investigación"

     + CTA naranja "Explorar metodología"

   - Der: Pipeline visual animado con 5 tarjetas conectadas con flechas:

     [Corpus] → [Codebook] → [LLM] → [Revisión] → [Reporte]

     Tarjetas con fondo --color-surface, borde --color-primary sutil, sombra suave.

3. PROBLEMA

   Fondo --color-surface-2. Texto centrado. 

   Tres tarjetas con icono SVG + stat + descripción:

   "Horas de codificación manual" / "Inconsistencia entre jueces" / "Escalabilidad limitada"

4. SOLUCIÓN

   Fondo --color-white. Título + 3 columnas de ventajas.

   Una franja de color --color-primary al 8% de opacidad separa esta sección.

5. METODOLOGÍA

   Stepper horizontal con 5 pasos numerados y clicables:

   1. Definición del corpus

   2. Diseño del codebook

   3. Procesamiento LLM

   4. Revisión humana

   5. Validación y reporte

   Círculos en --color-primary (activo) / --color-neutral-2 (inactivo).

   Al clic en cada paso, expande descripción metodológica detallada.

6. CARRERAS

   Grid de 4 tarjetas (2×2 en mobile, 4×1 en desktop):

   Una por carrera con su icono SVG, color distintivo en badge,

   nombre de carrera y aplicación metodológica resumida.

7. CASOS DE USO

   Tabs funcionales con 4 pestañas (una por carrera).

   Cada tab muestra: contexto de investigación, ejemplo de corpus,

   prompt tipo, output esperado.

8. OUTPUTS ESPERADOS

   Tabla visual con filas: Categoría / Frecuencia / % / Nivel de confianza / Validado

   Datos de ejemplo coherentes. Badge de color según nivel de confianza.

9. FAQ

   Acordeón con 6 preguntas:

   - ¿Qué es el análisis de contenido asistido por LLM?

   - ¿Es confiable el proceso automatizado?

   - ¿Qué rol cumple el investigador humano?

   - ¿Sirve para todas las carreras del IDC?

   - ¿Qué tipo de datos puedo analizar?

   - ¿Cómo se valida el proceso?

10. CTA FINAL

    Fondo --color-primary. Texto blanco. 

    Titular grande + subtítulo + botón blanco con texto azul.

    "Implementa esta metodología en tu carrera"

11. FOOTER

    Logo IDC SVG + nombre institucional + 4 carreras

    Links: inicio · metodología · carreras · contacto

    Crédito: "IDC — Lima, Perú"

    Línea de copyright.

## REQUISITOS TÉCNICOS

- Un único archivo .html (CSS en <style>, JS en <script>)

- HTML5 semántico completo

- Responsive mobile-first: 375px / 768px / 1280px

- IntersectionObserver para reveals de secciones (fade + translateY)

- Toggle modo claro/oscuro funcional (data-theme en <html>)

- Stepper interactivo con JS puro

- Tabs de carreras funcionales

- Acordeón FAQ (una pregunta abierta a la vez)

- Scroll suave entre anclas

- Sin Bootstrap, sin Tailwind, sin jQuery

- Solo Lucide Icons vía CDN si se necesitan iconos adicionales:

  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>

## CALIDAD VISUAL

- Identidad IDC coherente en toda la página

- Naranja solo para acciones principales y elementos clave (no en todos lados)

- Azul para enlaces, elementos secundarios y acciones de apoyo

- Grises institucionales para cuerpo de texto

- Sin gradientes en botones

- Sin fondos degradados abstractos

- Sin iconos dentro de círculos de color (iconos directos, línea limpia)

- Máximo 2 colores de acento visibles por sección

## COPY BASE (personalizar entre corchetes)

H1: "Análisis de Contenido Asistido por LLM"

Subtítulo: "Una metodología híbrida para investigación aplicada en diseño y 

comunicación: combina rigor humano con capacidad computacional de los LLM."

Badge hero: "IDC Investigación · Lima, Perú"

CTA hero: "Explorar metodología"

CTA final: "Implementa esta metodología en tu carrera"

[Completar textos de cada sección según el contexto real del IDC]

## AUTOEVALUACIÓN FINAL

Al terminar, incluir al final del archivo como comentario HTML:

<!-- AUTOEVALUACION

Claridad: X/10

Rigor metodológico: X/10

Coherencia con identidad IDC: X/10

UX / Usabilidad: X/10

Accesibilidad: X/10

Responsive: X/10

Originalidad: X/10

3 mejoras posibles:

1. ...

2. ...

3. ...

-->

## ENTREGA

Un único archivo HTML listo para abrir en el navegador.

Sin placeholders sin resolver. Sin textos genéricos.