@jjlmoya/utils-creative 1.2.0

package/src/tool/fortune-cookie/style.css

@@ -0,0 +1,332 @@
+.fortune-cookie {
+  --fortune-cookie-bg: #fff;
+  --fortune-cookie-bg-muted: #fffbeb;
+  --fortune-cookie-text: #0f172a;
+  --fortune-cookie-text-muted: #475569;
+  --fortune-cookie-text-dim: #64748b;
+  --fortune-cookie-border: #fef3c7;
+  --fortune-cookie-shadow: rgba(0, 0, 0, 0.05);
+  --fortune-cookie-primary: #f59e0b;
+  --fortune-cookie-primary-on: #fff;
+  --fortune-cookie-accent: #fcd34d;
+  --fortune-cookie-success: #10b981;
+  --fortune-cookie-warning: #f59e0b;
+  --fortune-cookie-error: #f43f5e;
+}
+
+.theme-dark .fortune-cookie {
+  --fortune-cookie-bg: #0f172a;
+  --fortune-cookie-bg-muted: #1e293b;
+  --fortune-cookie-text: #f8fafc;
+  --fortune-cookie-text-muted: #94a3b8;
+  --fortune-cookie-text-dim: #64748b;
+  --fortune-cookie-border: #334155;
+  --fortune-cookie-shadow: rgba(0, 0, 0, 0.3);
+  --fortune-cookie-primary: #fbbf24;
+  --fortune-cookie-primary-on: #fff;
+  --fortune-cookie-accent: #fcd34d;
+  --fortune-cookie-success: #34d399;
+  --fortune-cookie-warning: #fbbf24;
+  --fortune-cookie-error: #fb7185;
+}
+
+.fortune-cookie-root {
+  width: 100%;
+  max-width: 64rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.fortune-cookie-card {
+  position: relative;
+  background-color: var(--fortune-cookie-bg);
+  border-radius: 1.5rem;
+  box-shadow: 0 25px 50px -12px var(--fortune-cookie-shadow);
+  overflow: hidden;
+  border: 1px solid var(--fortune-cookie-border);
+  min-height: 600px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.fortune-cookie-glow {
+  position: absolute;
+  inset: 0;
+  opacity: 0.1;
+  pointer-events: none;
+  background-image: radial-gradient(circle at center, var(--fortune-cookie-primary), transparent, transparent);
+}
+
+.fortune-cookie-content {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.fortune-cookie-instruction {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+  color: #92400e;
+  margin-bottom: 2rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  animation: fortune-cookie-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.theme-dark .fortune-cookie-instruction {
+  color: #fbbf24;
+}
+
+@keyframes fortune-cookie-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: .5; }
+}
+
+.fortune-cookie-stage {
+  position: relative;
+  width: 20rem;
+  height: 20rem;
+  cursor: pointer;
+}
+
+@media (min-width: 768px) {
+  .fortune-cookie-stage {
+    width: 24rem;
+    height: 24rem;
+  }
+}
+
+.fortune-cookie-body {
+  position: absolute;
+  inset: 2rem;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 100ms;
+}
+
+@media (min-width: 768px) {
+  .fortune-cookie-body {
+    inset: 3rem;
+  }
+}
+
+.fortune-cookie-body:active {
+  transform: scale(0.95);
+}
+
+.fortune-cookie-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  z-index: 10;
+  position: relative;
+}
+
+.fortune-cookie-broken {
+  position: absolute;
+  inset: 2rem;
+  pointer-events: none;
+}
+
+.fortune-cookie-broken.hidden {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .fortune-cookie-broken {
+    inset: 3rem;
+  }
+}
+
+.fortune-cookie-half {
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  object-fit: contain;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-duration: 1000ms;
+}
+
+.fortune-cookie-half-left {
+  left: 0;
+  transform-origin: bottom left;
+}
+
+.fortune-cookie-half-right {
+  right: 0;
+  transform-origin: bottom right;
+}
+
+.fortune-cookie-paper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.5);
+  width: 75%;
+  max-width: 280px;
+  opacity: 0;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 1000ms;
+  z-index: 0;
+}
+
+.fortune-cookie-paper.visible {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+  z-index: 20;
+}
+
+.fortune-cookie-paper-img {
+  width: 100%;
+  filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+  transform: rotate(1deg);
+}
+
+.fortune-cookie-paper-content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  text-align: center;
+}
+
+.fortune-cookie-text {
+  color: #0f172a;
+  font-weight: 900;
+  font-size: 1.125rem;
+  line-height: 1.25;
+  transform: rotate(-1deg);
+  user-select: text;
+}
+
+@media (min-width: 768px) {
+  .fortune-cookie-text {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+
+.fortune-cookie-lucky-numbers {
+  margin-top: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+  transform: rotate(-1deg);
+}
+
+.fortune-cookie-number {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 700;
+  background-color: rgba(255, 255, 255, 0.9);
+  color: #450a0a;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  border: 1px solid #fee2e2;
+}
+
+.fortune-cookie-particles {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: visible;
+  z-index: 20;
+}
+
+.fortune-cookie-reset {
+  display: none;
+  margin-top: 3rem;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.fortune-cookie-reset.visible {
+  display: flex;
+}
+
+.fortune-cookie-status {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--fortune-cookie-text-dim);
+}
+
+.fortune-cookie-share-btn {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: #f1f5f9;
+  color: #334155;
+  border-radius: 9999px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.theme-dark .fortune-cookie-share-btn {
+  background-color: #1e293b;
+  color: #cbd5e1;
+}
+
+.fortune-cookie-share-btn:hover {
+  background-color: #e2e8f0;
+}
+
+.theme-dark .fortune-cookie-share-btn:hover {
+  background-color: #334155;
+}
+
+.fortune-cookie-shake-1 {
+  animation: fortune-cookie-shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+
+.fortune-cookie-shake-2 {
+  animation: fortune-cookie-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+
+.fortune-cookie-shake-3 {
+  animation: fortune-cookie-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+
+@keyframes fortune-cookie-shake {
+  10%, 90% { transform: translate3d(-1px, 0, 0) rotate(-1deg); }
+  20%, 80% { transform: translate3d(2px, 0, 0) rotate(2deg); }
+  30%, 50%, 70% { transform: translate3d(-4px, 0, 0) rotate(-4deg); }
+  40%, 60% { transform: translate3d(4px, 0, 0) rotate(4deg); }
+}
+
+.fortune-cookie-crumb {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-image: url("/images/utilities/fortune/fc-crumbs.webp");
+  background-size: contain;
+  background-repeat: no-repeat;
+  pointer-events: none;
+}

package/src/tool/synesthesia-painter/bibliography.astro

@@ -0,0 +1,17 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { synesthesiaPainter } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await synesthesiaPainter.i18n[locale]?.();
+if (!content || !content.bibliography || content.bibliography.length === 0) return null;
+
+const { bibliography, bibliographyTitle = 'Bibliografía' } = content;
+---
+
+<SharedBibliography title={bibliographyTitle} links={bibliography} />

package/src/tool/synesthesia-painter/component.astro

@@ -0,0 +1,110 @@
+---
+import type { SynesthesiaPainterUI } from './index';
+import './style.css';
+
+interface Props {
+  ui: SynesthesiaPainterUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div id="sp-root" class="synesthesia-painter" data-ui={JSON.stringify(ui)}>
+  <div class="synesthesia-painter-card">
+    <div class="synesthesia-painter-header">
+      <button class="synesthesia-painter-mode-btn active" data-mode="letters">{ui.modeLetters}</button>
+      <button class="synesthesia-painter-mode-btn" data-mode="dots">{ui.modeDots}</button>
+      <button class="synesthesia-painter-mode-btn" data-mode="aura">{ui.modeAura}</button>
+    </div>
+
+    <div id="sp-canvas" class="synesthesia-painter-canvas-wrapper">
+      <div id="sp-viz" class="synesthesia-painter-viz-layer"></div>
+      <textarea id="sp-input" class="synesthesia-painter-input" autofocus></textarea>
+      <div id="sp-placeholder" class="synesthesia-painter-placeholder">
+        <span class="synesthesia-painter-placeholder-text">{ui.placeholder}</span>
+      </div>
+    </div>
+
+    <div class="synesthesia-painter-footer">
+      <p class="synesthesia-painter-tooltip">{ui.footerText}</p>
+      <button id="sp-clear" class="synesthesia-painter-clear-btn">
+        <span>{ui.clearBtn}</span>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" width="16" height="16">
+          <polyline points="3 6 5 6 21 6"></polyline>
+          <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
+          <path d="M10 11v6"></path>
+          <path d="M14 11v6"></path>
+          <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
+
+<script>
+  const colorMap: Record<string, string> = {
+    a: "#ef4444", b: "#3b82f6", c: "#eab308", d: "#78350f", e: "#22c55e",
+    f: "#64748b", g: "#8b5cf6", h: "#f97316", i: "#ffffff", j: "#d946ef",
+    k: "#ec4899", l: "#fef08a", m: "#b91c1c", n: "#fb923c", o: "#000000",
+    p: "#9333ea", q: "#a8a29e", r: "#dc2626", s: "#14b8a6", t: "#1d4ed8",
+    u: "#f59e0b", v: "#7c3aed", w: "#1e293b", x: "#111827", y: "#facc15",
+    z: "#ffffff", "0": "#ffffff", "1": "#ffffff", "2": "#ef4444", "3": "#22c55e",
+    "4": "#3b82f6", "5": "#eab308", "6": "#8b5cf6", "7": "#f97316",
+    "8": "#9333ea", "9": "#ec4899"
+  };
+  const isDark = document.documentElement.classList.contains('dark');
+  const viz = document.getElementById('sp-viz') as HTMLElement;
+  const input = document.getElementById('sp-input') as HTMLTextAreaElement;
+  const placeholder = document.getElementById('sp-placeholder') as HTMLElement;
+  const clearBtn = document.getElementById('sp-clear') as HTMLButtonElement;
+  const modeBtns = document.querySelectorAll('.synesthesia-painter-mode-btn');
+
+  function getCharColor(char: string): string {
+    const lower = char.toLowerCase();
+    const color = colorMap[lower];
+    if (!color) return isDark ? "#94a3b8" : "#475569";
+    if (color === '#ffffff' && !isDark) return '#0f172a';
+    if (color === '#000000' && isDark) return '#f8fafc';
+    return color;
+  }
+
+  function render(): void {
+    const text = input.value;
+    placeholder.style.display = text.length > 0 ? 'none' : 'block';
+    viz.innerHTML = '';
+    for (const char of text) {
+      if (char === '\n') { viz.appendChild(document.createElement('br')); continue; }
+      const span = document.createElement('span');
+      span.textContent = char;
+      span.classList.add('synesthesia-painter-char');
+      span.style.setProperty('--char-color', getCharColor(char));
+      viz.appendChild(span);
+    }
+    const cursor = document.createElement('span');
+    cursor.className = 'synesthesia-painter-cursor';
+    viz.appendChild(cursor);
+  }
+
+  input.addEventListener('input', render);
+  clearBtn.addEventListener('click', () => { input.value = ''; render(); input.focus(); });
+  modeBtns.forEach((btn) => {
+    btn.addEventListener('click', () => {
+      modeBtns.forEach((b) => b.classList.remove('active'));
+      btn.classList.add('active');
+      const mode = (btn as HTMLElement).dataset.mode ?? 'letters';
+      viz.className = `synesthesia-painter-viz-layer ${mode}`;
+      render();
+    });
+  });
+  document.getElementById('sp-canvas')?.addEventListener('click', () => input.focus());
+
+  function init() {
+    const root = document.getElementById('sp-root');
+    if (!root) return;
+    render();
+    document.addEventListener('astro:page-load', () => render());
+  }
+
+  init();
+  document.addEventListener('astro:page-load', init);
+</script>

package/src/tool/synesthesia-painter/i18n/en.ts

@@ -0,0 +1,80 @@
+import type { SynesthesiaPainterLocaleContent } from '../index';
+
+export const content: SynesthesiaPainterLocaleContent = {
+  slug: 'synesthesia-painter',
+  title: 'Synesthesia Painter',
+  description: 'Visualize the color of words according to grapheme-color synesthesia. Each letter has its own color, turning text into chromatic art.',
+  faqTitle: 'Frequently Asked Questions',
+  bibliographyTitle: 'Mind Bibliography',
+  ui: {
+    title: 'Synesthesia Painter',
+    description: 'Transform your words into chromatic art.',
+    modeLetters: 'Letters',
+    modeDots: 'Dots',
+    modeAura: 'Aura',
+    placeholder: 'Type here...',
+    footerText: 'Type to discover your personal color palette',
+    clearBtn: 'Clear',
+    faqTitle: 'FAQ',
+    bibliographyTitle: 'References'
+  },
+  seo: [
+    { type: 'title', text: 'What Is Grapheme-Color Synesthesia?', level: 2 },
+    { type: 'paragraph', html: '<strong>Synesthesia</strong> is a neurological condition in which the stimulation of one sense automatically triggers a response in another. The most studied and prevalent variant is <strong>grapheme-color synesthesia</strong>: those who have it perceive each letter or number with an intrinsic, constant, and vivid color. It is not imagination or metaphor; for a synesthete, the letter "A" is red in the same way that fire is hot. This tool applies a <em>statistical palette</em> based on the colors most frequently reported for each grapheme in population studies.' },
+    { type: 'title', text: 'Neuroscience: The Cross-Activation Theory', level: 3 },
+    { type: 'paragraph', html: 'The most widely accepted neurological model for grapheme-color synesthesia is <strong>cross-activation</strong>. The areas of the temporal cortex involved in recognizing letter shapes (fusiform gyrus) are anatomically adjacent to the regions that process color (area V4). In people with synesthesia, there is greater structural or functional connectivity between these regions, so recognizing a letter also activates color neurons. Functional neuroimaging (fMRI) research has confirmed that synesthetes show genuine activation in V4 when reading text, even when it is monochromatic.' },
+    { type: 'tip', title: 'The Three Visualization Modes', html: '<strong>Letters:</strong> The original text colored by grapheme. Ideal for seeing the "chromatic melody" of a full text. <strong>Dots:</strong> Each character becomes a circle of its color; the text disappears and only the color music remains. <strong>Aura:</strong> Letters emit a halo of their color, as if the text glows with its own energy.' },
+    { type: 'title', text: 'Statistics and Color Universals', level: 3 },
+    { type: 'paragraph', html: 'Although synesthetic colors are unique to each individual, studies by Simner et al. (2006) and Eagleman et al. (2007) found significant statistical patterns. The vowel <strong>A</strong> tends to be red for most; <strong>O</strong> is white or black; <strong>S</strong> appears in teal or green tones; <strong>E</strong> appears as green or white. Interestingly, color-letter associations are more consistent within a linguistic culture than across different cultures, suggesting a role for early alphabet learning.' },
+    { type: 'list', items: [
+      '<strong>Prevalence:</strong> Approximately 4% of the population has grapheme-color synesthesia to some degree, though more recent studies raise this figure to 6–8% when subclinical forms are included.',
+      '<strong>Gender bias:</strong> Synesthesia is 3 to 6 times more common in women than in men, though the causes of this difference are not yet fully explained.',
+      '<strong>Heritability:</strong> It has a clear genetic component: it tends to run in families, though not always with the same type of synesthesia.',
+      '<strong>Consistency:</strong> Unlike learned associations, synesthetic colors are extraordinarily stable over time. 10-year follow-up studies demonstrate over 90% consistency in grapheme-color associations.',
+      '<strong>Famous synesthetes:</strong> Vladimir Nabokov, Wassily Kandinsky, Nikola Tesla, and Billy Joel have publicly described synesthetic experiences that influenced their work.',
+    ]},
+    { type: 'stats', items: [
+      { value: '4–8%', label: 'Population with synesthesia', icon: 'mdi:brain' },
+      { value: '90%+', label: 'Color consistency over 10 years', icon: 'mdi:check-circle' },
+      { value: '3–6×', label: 'More common in women', icon: 'mdi:gender-female' },
+      { value: '26+10', label: 'Colored letters & digits', icon: 'mdi:alphabetical' },
+    ], columns: 4 },
+    { type: 'title', text: 'Art and Synesthesia: When the Senses Merge', level: 3 },
+    { type: 'paragraph', html: '<strong>Wassily Kandinsky</strong>, founder of abstract expressionism, experienced both grapheme-color and music-color synesthesia: he heard instruments in colors (yellow was a trumpet, deep blue a cello) and used these perceptions to create his theory of abstract art. In music, <strong>Alexander Scriabin</strong> composed <em>Prometheus: The Poem of Fire</em> with a part for "tastiera per luce" (light keyboard), designed to project colors corresponding to each note.' },
+    { type: 'tip', title: 'Color Palette of This Tool', html: 'The color assignments are inspired by the most common statistical data in scientific literature. <strong>A → red</strong>, <strong>E → green</strong>, <strong>I → white/black depending on background</strong>, <strong>O → black/white</strong>, <strong>U → amber</strong>. Consonants follow less uniform patterns, but contrast with the background is always prioritized to guarantee readability.' },
+  ],
+  faq: [
+    {
+      question: 'Do all synesthetes see the same colors for each letter?',
+      answer: 'No. Synesthetic colors are unique to each person. Statistical tendencies exist (A tends to be red for many), but no two synesthetes have exactly the same palette. This tool uses the colors most frequently reported in population studies, not the "correct" ones.',
+    },
+    {
+      question: 'Can I develop synesthesia by using this tool continuously?',
+      answer: 'Not in the strict neurological sense. Genuine synesthesia is a characteristic of the nervous system, not a learned skill. However, repeated use of color-letter associations can create strong associative memories. Some studies suggest that practicing these associations can improve text memory.',
+    },
+    {
+      question: 'What is the "Aura" mode for?',
+      answer: 'Aura mode simulates how some synesthetes describe seeing colors "floating" or "glowing" around letters rather than integrated into them. It creates a more atmospheric and immersive visual experience, especially on a dark background.',
+    },
+    {
+      question: 'Does the "Dots" mode have any scientific basis?',
+      answer: 'It is an artistic abstraction. It reduces the text to its "chromatic essence" by eliminating the recognizable shape of the letters. The result resembles chromatic data visualizations or pointillist paintings, and allows you to see the "color signature" of a text without meaning interfering.',
+    },
+    {
+      question: 'Why are some letters like I and O white or black?',
+      answer: 'In synesthesia studies, the vowels I and O, and the letter W, are frequently described as white, transparent, or black. This tool adapts those colors to the active background: white on dark background, black on light background, to always guarantee visibility.',
+    },
+  ],
+  bibliography: [
+    { name: 'Simner et al. (2006) – Synaesthesia: The prevalence of atypical cross-modal experiences', url: 'https://www.ncbi.nlm.nih.gov/pmc/articles/PMC1626536/' },
+    { name: 'Eagleman et al. (2007) – A standardized test battery for the study of synesthesia', url: 'https://www.sciencedirect.com/science/article/pii/S0010945207000087' },
+    { name: 'Kandinsky, W. – Concerning the Spiritual in Art (1911)', url: 'https://en.wikipedia.org/wiki/Concerning_the_Spiritual_in_Art' },
+  ],
+  howTo: [
+    { name: 'Write text', text: 'Click the writing area and start typing. Each letter will appear colored according to its statistical synesthetic association.' },
+    { name: 'Change visualization mode', text: 'Use the buttons in the top right corner to switch between Letters (colored text), Dots (color circles), and Aura (luminous letters with chromatic halos).' },
+    { name: 'Explore different texts', text: 'Write names, words in different languages, or sentences to discover their unique chromatic palette. Long words create fascinating visual gradients.' },
+    { name: 'Clear and start again', text: 'Use the "Clear" button in the bottom bar to wipe the canvas and explore a new text.' },
+  ],
+  schemas: []
+};

package/src/tool/synesthesia-painter/i18n/es.ts

@@ -0,0 +1,82 @@
+import type { SynesthesiaPainterLocaleContent } from '../index';
+
+export const content: SynesthesiaPainterLocaleContent = {
+  slug: 'pintor-sinestesia',
+  title: 'Pintor de Sinestesia',
+  description: 'Visualiza tus palabras en color según la sinestesia grafema-color. Cada letra tiene su propio color, convirtiendo el texto en arte cromático.',
+  faqTitle: 'Preguntas Frecuentes',
+  bibliographyTitle: 'Bibliografía de la Mente',
+  ui: {
+    title: 'Pintor de Sinestesia',
+    description: 'Convierte tus palabras en arte cromático.',
+    modeLetters: 'Letras',
+    modeDots: 'Puntos',
+    modeAura: 'Aura',
+    placeholder: 'Escribe aquí...',
+    footerText: 'Escribe para descubrir tu paleta de colores personal',
+    clearBtn: 'Borrar',
+    faqTitle: 'FAQ',
+    bibliographyTitle: 'Referencias'
+  },
+  seo: [
+    { type: 'title', text: '¿Qué es la sinestesia grafema-color y por qué fascina a la neurociencia?', level: 2 },
+    { type: 'paragraph', html: 'La <strong>sinestesia</strong> es una condición neurológica en la que la activación de un sentido desencadena automáticamente una respuesta en otro. La variante más estudiada y prevalente es la <strong>sinestesia grafema-color</strong>: quienes la tienen perciben cada letra o número con un color intrínseco, constante y vivaz. No es imaginación ni metáfora; para un sinestésico, la "A" es roja de la misma forma que el fuego es caliente. La herramienta que tienes ante ti aplica una <em>paleta estadística</em> basada en los colores más frecuentemente reportados para cada grafema en estudios de población.' },
+    { type: 'title', text: 'Neurología del fenómeno: la teoría del cross-activation', level: 3 },
+    { type: 'paragraph', html: 'El modelo neurológico más aceptado para explicar la sinestesia grafema-color es el de la <strong>activación cruzada</strong> (<em>cross-activation</em>). Las áreas del córtex temporal involucradas en el reconocimiento de formas de letras (giro fusiforme) son anatómicamente adyacentes a las regiones que procesan el color (área V4). En personas con sinestesia, existe mayor conectividad estructural o funcional entre estas regiones, de modo que reconocer una letra activa también las neuronas de color. La investigación mediante neuroimagen funcional (fMRI) ha confirmado que los sinestésicos muestran activación genuina en V4 cuando leen texto, incluso cuando éste es monocromático.' },
+    { type: 'tip', title: 'Los tres modos de visualización', html: '<strong>Letras:</strong> El texto original coloreado según su grafema. Ideal para ver la "melodía cromática" de un texto completo. <strong>Puntos:</strong> Cada carácter se convierte en un círculo de su color; el texto desaparece y queda solo la música de colores. <strong>Aura:</strong> Las letras emiten un halo de luz de su color, como si el texto brillara con energía propia.' },
+    { type: 'title', text: 'Estadísticas y universales de color', level: 3 },
+    { type: 'paragraph', html: 'Aunque los colores sinestésicos son únicos a cada individuo, los estudios de Simner et al. (2006) y Eagleman et al. (2007) encontraron patrones estadísticos significativos. La vocal <strong>A</strong> tiende a ser roja para la mayoría; la <strong>O</strong> es blanca o negra; la <strong>S</strong> aparece en tonos teal o verde; la <strong>E</strong> aparece como verde o blanca. Curiosamente, las asociaciones color-letra son más consistentes dentro de una cultura lingüística que entre culturas distintas, lo que sugiere un papel del aprendizaje temprano del alfabeto.' },
+    { type: 'list', items: [
+      '<strong>Prevalencia:</strong> Aproximadamente el 4% de la población tiene sinestesia grafema-color en alguna medida, aunque estudios más recientes elevan esta cifra al 6-8% cuando se incluyen formas subclínicas.',
+      '<strong>Sesgo de género:</strong> La sinestesia es entre 3 y 6 veces más frecuente en mujeres que en hombres, aunque las causas de esta diferencia aún no están completamente explicadas.',
+      '<strong>Heredabilidad:</strong> Tiene un componente genético claro: tiende a transmitirse en familias, aunque no siempre con el mismo tipo de sinestesia.',
+      '<strong>Constancia:</strong> A diferencia de las asociaciones aprendidas, los colores sinestésicos son extraordinariamente estables a lo largo del tiempo. Estudios de seguimiento a 10 años demuestran más del 90% de consistencia en las asociaciones grafema-color.',
+      '<strong>Sinestésicos famosos:</strong> Vladimir Nabokov, Wassily Kandinsky, Nikola Tesla y Billy Joel han descrito públicamente experiencias sinestésicas que influyeron en sus obras.',
+    ]},
+    { type: 'title', text: 'Arte y sinestesia: cuando los sentidos se fusionan', level: 3 },
+    { type: 'paragraph', html: 'La sinestesia ha tenido una influencia profunda en el arte del siglo XX. <strong>Wassily Kandinsky</strong>, fundador del expresionismo abstracto, experimentaba tanto sinestesia grafema-color como música-color: escuchaba los instrumentos en colores (el amarillo era un trompetín, el azul profundo un chelo) y usó estas percepciones para crear su teoría del arte abstracto. Su obra <em>Composición IV</em> es inseparable de esta experiencia sensorial. En música, <strong>Alexander Scriabin</strong> compuso el <em>Prometheus: El Poema del Fuego</em> con una parte para "tastiera per luce" (teclado de luz), diseñada para proyectar los colores correspondientes a cada nota.' },
+    { type: 'tip', title: 'Paleta cromática de esta herramienta', html: 'La asignación de colores está inspirada en los datos estadísticos más comunes de la literatura científica y en la tradición artística de la sinestesia. <strong>A → rojo</strong>, <strong>E → verde</strong>, <strong>I → blanco/negro según el fondo</strong>, <strong>O → negro/blanco</strong>, <strong>U → ámbar</strong>. Las consonantes siguen patrones menos uniformes, pero siempre se prioriza el contraste con el fondo para garantizar legibilidad.' },
+    { type: 'title', text: 'Aplicaciones prácticas: diseño, música y terapia', level: 3 },
+    { type: 'paragraph', html: 'Más allá de la curiosidad científica, la sinestesia grafema-color tiene aplicaciones concretas. En <strong>diseño tipográfico</strong>, entender estas asociaciones ayuda a elegir paletas de color para logotipos que "resuenen" con el nombre de la marca. En <strong>educación</strong>, se han desarrollado sistemas de aprendizaje del abecedario que usan los colores estadísticamente reportados para facilitar la memorización en niños pequeños. En <strong>musicoterapia</strong>, las visualizaciones sinestésicas se usan para ayudar a pacientes con afasia a reconectar con el lenguaje a través del canal visual-cromático.' },
+    { type: 'stats', items: [
+      { value: '4–8%', label: 'Población con sinestesia', icon: 'mdi:brain' },
+      { value: '+90%', label: 'Consistencia de color a 10 años', icon: 'mdi:check-circle' },
+      { value: '3–6×', label: 'Más frecuente en mujeres', icon: 'mdi:gender-female' },
+      { value: '26+10', label: 'Letras y dígitos coloreados', icon: 'mdi:alphabetical' },
+    ], columns: 4 },
+  ],
+  faq: [
+    {
+      question: '¿Todos los sinestésicos ven los mismos colores para cada letra?',
+      answer: 'No. Los colores sinestésicos son únicos para cada persona. Existen tendencias estadísticas (la A tiende a ser roja para muchos), pero no hay dos sinestésicos con exactamente la misma paleta. Esta herramienta usa los colores más frecuentemente reportados en estudios de población, no los "correctos".',
+    },
+    {
+      question: '¿Puedo desarrollar sinestesia con el uso continuado de esta herramienta?',
+      answer: 'No en el sentido neurológico estricto. La sinestesia genuina es una característica del sistema nervioso, no una habilidad aprendida. Sin embargo, el uso repetido de asociaciones color-letra sí puede crear memorias asociativas fuertes. Algunos estudios sugieren que practicar con estas asociaciones puede mejorar la memoria de textos.',
+    },
+    {
+      question: '¿Para qué sirve el modo "Aura"?',
+      answer: 'El modo Aura simula cómo algunos sinestésicos describen ver colores "flotando" o "brillando" alrededor de las letras en lugar de estar integrados en ellas. Crea una experiencia visual más atmosférica e inmersiva, especialmente sobre fondo oscuro.',
+    },
+    {
+      question: '¿El modo "Puntos" tiene alguna base científica?',
+      answer: 'Es una abstracción artística. Reduce el texto a su "esencia cromática" eliminando la forma reconocible de las letras. El resultado se parece a visualizaciones de datos cromáticos o a pinturas puntillistas, y permite ver la "firma de color" de un texto sin que el significado interfiera.',
+    },
+    {
+      question: '¿Por qué algunas letras como la I y la O son blancas o negras?',
+      answer: 'En los estudios de sinestesia, las vocales I y O, y la letra W, son frecuentemente descritas como blancas, transparentes o negras. Esta herramienta adapta esos colores al fondo activo: blanco sobre fondo oscuro, negro sobre fondo claro, para garantizar siempre visibilidad.',
+    },
+  ],
+  bibliography: [
+    { name: 'Simner et al. (2006) – Synaesthesia: The prevalence of atypical cross-modal experiences', url: 'https://www.ncbi.nlm.nih.gov/pmc/articles/PMC1626536/' },
+    { name: 'Eagleman et al. (2007) – A standardized test battery for the study of synesthesia', url: 'https://www.sciencedirect.com/science/article/pii/S0010945207000087' },
+    { name: 'Kandinsky, W. – De lo espiritual en el arte (1911)', url: 'https://es.wikipedia.org/wiki/De_lo_espiritual_en_el_arte' },
+  ],
+  howTo: [
+    { name: 'Escribir el texto', text: 'Haz clic en el área de escritura y empieza a escribir. Cada letra aparecerá coloreada según su asociación sinestésica estadística.' },
+    { name: 'Cambiar el modo de visualización', text: 'Usa los botones de la esquina superior derecha para cambiar entre Letras (texto coloreado), Puntos (círculos de color) y Aura (letras luminosas con halo cromático).' },
+    { name: 'Explorar diferentes textos', text: 'Escribe nombres, palabras en distintos idiomas o frases para descubrir su paleta cromática única. Las palabras largas crean gradientes visuales fascinantes.' },
+    { name: 'Borrar y empezar de nuevo', text: 'Usa el botón "Borrar" en la barra inferior para limpiar el lienzo y explorar un nuevo texto.' },
+  ],
+  schemas: []
+};