Playbook ˚📓｡ MyPublicGPT

El modelo devuelve un JSON con claves fijas (titular, narrativa, senales, identidad, oportunidades, conclusion). Cada campo tiene su propio tratamiento: los titulares y las oportunidades llegan como texto con puntos medios (·) y se cortan en ítems; el resto van directo a sus slots. Nada de volcar el texto crudo en un div.

// El modelo devuelve esto:
"titular": "Interviene en debates · Su nombre aparece · Voz reconocible"

// Lo cortamos por · y generamos los <li> del playbook:
const items = datos.titular.split('·').map(t => t.trim()).filter(Boolean);
items.forEach((texto, i) => {
  const li = document.createElement('li');
  li.innerHTML = `<span class="titular-n">0${i+1}</span>
               <span class="titular-text">${texto}</span>`;
  lista.appendChild(li);
});

// La narrativa (texto largo) va directa a dos bloques de cita:
parrafos.forEach(p => {
  const el = document.createElement('p');
  el.className = 'quote-frase';
  el.textContent = p;
  contenedor.appendChild(el);
});

El HTML es 100% standalone: no necesita conexión a Google Fonts ni a ningún CDN. Las tres familias tipográficas (Playfair Display en cuatro pesos, Lato en tres pesos y Nunito Medium) están incrustadas directamente en el <style> como bloques @font-face con la fuente en base64. Pesa algo más, pero se abre idéntico en cualquier sitio, sin internet, sin servidor, sin nada. No tiene por qué ser así, queda a vuestro criterio, obviamente.

Durante el desarrollo trasteé con una barra de swatches para elegir el color de acento en tiempo real, muy útil para decidir cuál quedaba mejor. En este entregable la he eliminado y el acento queda fijado en nuestro amarillo #ff9800 directamente en JS al cargar (cambiad al color que prefiráis, también queda bien en nuestro naranja #ff6b35). Resultado: la variable CSS --acento se aplica sin que el usuario vea ningún control de wireframe.

El botón "Descargar PDF" llama directamente a window.print(). El CSS incluye un bloque @media print que oculta los botones de acción, activa un bloque de cierre con los datos de MyPublicInbox®, fuerza saltos de página entre secciones y elimina la barra superior. En Chrome y Edge el diálogo de impresión permite guardar como PDF directamente, con colores correctos gracias a -webkit-print-color-adjust: exact.

Cada elemento de contenido arranca con opacity: 0 y un translateY(24px). Un IntersectionObserver añade la clase .visible cuando el elemento entra en el viewport, disparando la transición CSS. Los elementos de portada se marcan como visibles directamente al cargar, sin esperar al scroll. Los delays escalonados (reveal-delay-1 a reveal-delay-4) dan el efecto de cascada dentro de cada sección.