const { useState, useEffect, useRef } = React; const { Nav, Footer, Btn, SectionLabel, Card, ContactModal, useIsMobile } = window; const { EmotionWheel, AnxietyCycle, AttachmentMap } = window; /* ══════════════════════════════════════════════════ DATA ══════════════════════════════════════════════════ */ /* ── Article SVG illustrations ────────────────────── */ const ArticleImg = ({ id }) => { const imgs = { autoexigencia: ( {[0,1,2,3,4].map(i => )} {[0,30,60,90,120,150,180,210,240,270,300,330].map(a => { const rad=a*Math.PI/180,r=115; return ; })} ¿suficiente? ), 'ansiedad-social': ( {[40,90,145,200,255,310,360].map((x,i) => )} ¿CÓMO ME VEN? ), 'gestion-emocional': ( sentir sin desbordarse ), 'apego-ghosting': ( {[[120,105],[200,65],[280,105],[160,150],[240,150]].map(([x,y],i) => )} {[[0,1],[0,2],[1,2],[1,3],[2,4],[3,4]].map(([a,b],i) => { const p=[[120,105],[200,65],[280,105],[160,150],[240,150]]; return ; })} VÍNCULOS · DISTANCIA · APEGO ), }; return imgs[id] ||
; }; const ARTICLES = [ { id: 'autoexigencia', tag: 'Autoestima', date: 'Abril 2026', readTime: '5 min', title: 'La trampa de la autoexigencia', subtitle: 'Cuando el esfuerzo se convierte en exigencia desmedida, el problema no es falta de voluntad. Es la relación que tienes contigo mismo.', content: `La autoexigencia no es un defecto de carácter. Es un aprendizaje. Aprendemos a exigirnos cuando el entorno nos enseña que el valor personal depende del rendimiento. Cuando los elogios solo llegaban con el aprobado, cuando equivocarse tenía consecuencias emocionales importantes, cuando "podrías haberlo hecho mejor" era el resumen de los logros. **El problema no es el estándar. Es la condición.** Hay una diferencia fundamental entre tener objetivos altos y estar condicionado a no sentirte suficiente si no los alcanzas. El primero te da energía. El segundo te agota. La autoexigencia problemática tiene una característica definitoria: el listón siempre sube. Cuando alcanzas la meta, no hay descanso. Solo aparece una nueva exigencia. El cerebro aprende que el alivio es momentáneo y que hay que seguir corriendo. **Qué dice la psicología** El concepto de "perfeccionismo mal adaptativo" lleva décadas siendo investigado. No es lo mismo querer hacer las cosas bien (sano) que no poder tolerar no hacerlas perfectas (problemático). La diferencia está en cómo te tratas cuando fallas. Las personas con autoexigencia elevada tienden a tener un crítico interno muy activo. Ese crítico usa un tono que no usarías nunca con un amigo. Pero sí contigo mismo. **Por dónde empezar** Primero: nombra el patrón. Observa cuándo aparece el crítico interno y qué te dice exactamente. No para silenciarlo de golpe, sino para empezar a conocerlo. Segundo: pregúntate de dónde aprendiste ese estándar. ¿Lo elegiste o te fue impuesto? ¿Sigue siendo útil o solo familiar? Tercero: practica la autocompasión, no como un slogan, sino como una habilidad concreta. ¿Qué le dirías a alguien que quieres si estuviera pasando por lo mismo que tú? El objetivo no es bajar el listón. Es dejar de atarte el valor personal a él.`, }, { id: 'ansiedad-social', tag: 'Ansiedad', date: 'Marzo 2026', readTime: '4 min', title: 'Ansiedad social: cuando conectar duele', subtitle: 'No es timidez. No es introversión. Es un patrón de miedo aprendido que tiene solución.', content: `Hay personas que sienten un nudo en el estómago antes de cualquier situación social. Antes de una reunión, de hablar en clase, de conocer a alguien nuevo. Eso no es ser "tímido". Es ansiedad social. **Qué es la ansiedad social** La ansiedad social es el miedo persistente a ser evaluado negativamente por los demás. No es solo ponerse nervioso antes de hablar en público. Es anticipar con terror cualquier situación en la que puedas ser juzgado, rechazado o humillado. Se diferencia de la introversión en algo clave: el introvertido prefiere la soledad porque la disfruta. La persona con ansiedad social prefiere la soledad porque las interacciones le generan un sufrimiento real. **Los pensamientos que la mantienen** La ansiedad social vive de predicciones catastrofistas. "Van a pensar que soy raro". "Se van a dar cuenta de que estoy nervioso". "Voy a decir algo estúpido". Estas predicciones se tratan como hechos, aunque raramente se cumplen. También hay una tendencia a sobrestimar cuánto se fijan los demás en nosotros. El "efecto foco" es la creencia de que los demás nos observan con la misma intensidad con la que nos observamos a nosotros mismos. La realidad es que los demás están demasiado ocupados pensando en lo que los demás piensan de ellos. **El ciclo que la perpetúa** Cuanto más evitamos las situaciones sociales, más se confirma al cerebro que son peligrosas. La evitación alivia a corto plazo pero alimenta el problema a largo plazo. La solución, paradójicamente, es la exposición gradual: acercarse poco a poco a las situaciones temidas, tolerando la incomodidad, hasta que el sistema nervioso aprende que no hay amenaza real. **Pedir ayuda no es señal de debilidad.** La ansiedad social responde muy bien a la terapia, especialmente a los enfoques cognitivo-conductuales.`, }, { id: 'gestion-emocional', tag: 'Gestión emocional', date: 'Febrero 2026', readTime: '6 min', title: 'Gestión emocional: más allá de "piensa en positivo"', subtitle: 'La positividad tóxica nos enseña a ignorar lo que sentimos. La psicología propone algo diferente.', content: `"Anímate, podría ser peor." "Solo tienes que cambiar el chip." "Piensa en positivo." Seguramente hayas escuchado alguna de estas frases. Quizá las hayas dicho tú mismo. El problema no es que vengan de mala intención. El problema es que no funcionan. **Qué es la positividad tóxica** La positividad tóxica es la tendencia a negar, minimizar o invalidar emociones dolorosas a favor de un estado de ánimo "positivo". El mensaje implícito es: sentirte mal está mal. Esto genera dos problemas. Primero, las emociones no desaparecen cuando las ignoramos. Se acumulan, se desplazan, o aparecen en forma de síntomas físicos o conductuales. Segundo, añade una capa de culpa: no solo estás triste, sino que además "deberías estar bien" y no lo estás. **Qué es la gestión emocional de verdad** Gestionar las emociones no significa no tenerlas. Significa tener la capacidad de experimentarlas sin que te desborden, comprenderlas, y decidir cómo actuar en función de ellas. La psicóloga Susan David llama a esto "agilidad emocional": la capacidad de relacionarse con los propios pensamientos y emociones de una manera flexible, sin huir ni quedar atrapado. **Las cuatro habilidades clave** Primero, la conciencia emocional: nombrar lo que sientes con precisión. No solo "estoy mal", sino "estoy frustrado porque esperaba más de mí mismo en esta situación". Segundo, la tolerancia al malestar: aprender que las emociones difíciles son temporales y que puedes contenerlas sin explotar ni huirles. Tercero, la regulación: estrategias concretas para bajar la activación emocional cuando es excesiva. Respiración, movimiento, escritura expresiva. Cuarto, la acción consciente: no dejar que la emoción dicte el comportamiento, sino elegir desde tus valores. Las emociones no son enemigas. Son datos. Aprende su idioma.`, }, { id: 'apego-ghosting', tag: 'Relaciones', date: 'Enero 2026', readTime: '5 min', title: 'Vínculos de apego en la era del ghosting', subtitle: 'John Bowlby nunca imaginó las apps de citas. Pero su teoría explica perfectamente lo que nos pasa con ellas.', content: `En 1969, John Bowlby publicó la primera parte de su trilogía sobre el apego. Describía cómo los seres humanos estamos biológicamente programados para buscar cercanía con otras personas, especialmente en momentos de estrés o vulnerabilidad. No imaginaba el ghosting. Pero su teoría lo explica a la perfección. **Qué activa el apego ansioso en el mundo digital** Las aplicaciones de citas crean las condiciones perfectas para activar el estilo de apego ansioso. La incertidumbre continua ("¿ha leído el mensaje? ¿por qué no responde?"), la comparación constante ("hay miles de opciones mejores que yo"), y la intermitencia del refuerzo (a veces sí, a veces no) son exactamente los factores que activan la hipervigilancia en personas con apego ansioso. El ghosting, en particular, es especialmente dañino porque no ofrece cierre. El cerebro queda en un bucle de búsqueda. ¿Hice algo mal? ¿Qué pasó? Esta falta de respuesta activa los mismos circuitos neurales que el dolor físico. **Por qué el apego evitativo huye** Las personas con estilo evitativo también se ven afectadas, pero de forma diferente. La intimidad les genera incomodidad, y la velocidad a la que las apps promueven la conexión ("match, chat, cita") puede activar sus mecanismos de distancia. El resultado: una danza en la que el ansioso persigue y el evitativo se aleja, retroalimentándose mutuamente. **¿Puede cambiar el estilo de apego?** Sí. El apego no es un destino. Es un patrón aprendido que puede modificarse. Las relaciones reparadoras, la terapia y la mayor conciencia sobre los propios patrones son las vías de cambio. El primer paso es siempre el mismo: reconocer el patrón sin juzgarlo. No eres tu estilo de apego. Tienes un estilo de apego que puedes entender y transformar.`, }, ]; const EMPIEZA_TOPICS = [ { id: 'autoestima', label: 'Autoestima', question: '¿Sientes que nada de lo que haces es suficiente?', color: '#C8A87A', bg: 'rgba(200,168,122,0.08)', icon: ( ), desc: 'La autoestima no es quererse mucho. Es tener una relación honesta y compasiva con uno mismo, incluyendo los defectos.', signs: ['Crítica interna constante', 'Compararte desfavorablemente con otros', 'Dificultad para recibir elogios', 'Miedo al fracaso paralizante'], cta: 'Artículo: La trampa de la autoexigencia', articleId: 'autoexigencia', }, { id: 'ansiedad', label: 'Ansiedad', question: '¿Tu mente no para de anticipar lo peor?', color: '#7496B8', bg: 'rgba(116,150,184,0.08)', icon: ( ), desc: 'La ansiedad es una señal de alarma. El problema aparece cuando la alarma se activa sin amenaza real y no podemos apagarla.', signs: ['Preocupación constante y difícil de controlar', 'Tensión física (nudo en el estómago, contracturas)', 'Evitación de situaciones temidas', 'Sensación de peligro inminente sin causa clara'], cta: 'Artículo: Ansiedad social', articleId: 'ansiedad-social', }, { id: 'relaciones', label: 'Relaciones y vínculos', question: '¿Te cuesta confiar o te enganchas demasiado?', color: '#9B78B8', bg: 'rgba(155,120,184,0.08)', icon: ( ), desc: 'La forma en que nos vinculamos de adultos tiene raíces en la infancia. Entenderlo es el primer paso para relacionarnos diferente.', signs: ['Miedo intenso al abandono o al rechazo', 'Dificultad para poner límites', 'Relaciones inestables o muy dependientes', 'Desconfianza generalizada hacia los demás'], cta: 'Artículo: Vínculos de apego', articleId: 'apego-ghosting', }, { id: 'gestion-emocional', label: 'Gestión emocional', question: '¿Tus emociones te desbordan o las suprimes?', color: '#7BAE9F', bg: 'rgba(123,174,159,0.08)', icon: ( ), desc: 'Gestionar las emociones no es no tenerlas. Es aprender a escucharlas, tolerarlas y decidir cómo actuar en consecuencia.', signs: ['Reacciones emocionales intensas y difíciles de controlar', 'Dificultad para identificar qué sientes exactamente', '"Anestesia" emocional o sensación de no sentir nada', 'Las emociones te paralizan o te llevan a actuar impulsivamente'], cta: 'Artículo: Gestión emocional', articleId: 'gestion-emocional', }, { id: 'identidad', label: 'Identidad personal', question: '¿Sabes quién eres cuando nadie te mira?', color: '#C07878', bg: 'rgba(192,120,120,0.08)', icon: ( ), desc: 'La identidad no es algo que se tiene, sino algo que se construye. La confusión identitaria es más común de lo que parece, y tiene solución.', signs: ['No sabes qué quieres o quién eres', 'Cambias mucho según con quién estás', 'Sensación de vacío o falta de propósito', 'Dudas constantes sobre tus valores y decisiones'], cta: 'Explorar el Laboratorio', articleId: null, }, ]; /* ══════════════════════════════════════════════════ PAGES ══════════════════════════════════════════════════ */ /* ── Neural canvas hook ───────────────────────────── */ const useNeuralCanvas = (canvasRef) => { useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); let animId; const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; }; resize(); window.addEventListener('resize', resize); const NODE_COUNT = 42; const COLORS = ['rgba(123,174,159,', 'rgba(45,90,79,', 'rgba(200,168,122,']; const nodes = Array.from({ length: NODE_COUNT }, () => ({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, vx: (Math.random() - 0.5) * 0.35, vy: (Math.random() - 0.5) * 0.35, r: Math.random() * 2.5 + 1.5, pulse: Math.random() * Math.PI * 2, color: COLORS[Math.floor(Math.random() * COLORS.length)], })); const draw = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); nodes.forEach(n => { n.x += n.vx; n.y += n.vy; n.pulse += 0.018; if (n.x < 0 || n.x > canvas.width) n.vx *= -1; if (n.y < 0 || n.y > canvas.height) n.vy *= -1; }); // Connections for (let i = 0; i < nodes.length; i++) { for (let j = i + 1; j < nodes.length; j++) { const dx = nodes[i].x - nodes[j].x; const dy = nodes[i].y - nodes[j].y; const d = Math.sqrt(dx*dx + dy*dy); if (d < 150) { ctx.beginPath(); ctx.moveTo(nodes[i].x, nodes[i].y); ctx.lineTo(nodes[j].x, nodes[j].y); ctx.strokeStyle = `rgba(45,90,79,${(1 - d/150) * 0.09})`; ctx.lineWidth = 0.8; ctx.stroke(); } } } // Nodes nodes.forEach(n => { const p = (Math.sin(n.pulse) + 1) / 2; ctx.beginPath(); ctx.arc(n.x, n.y, n.r + p * 0.8, 0, Math.PI * 2); ctx.fillStyle = `${n.color}${0.25 + p * 0.18})`; ctx.fill(); }); animId = requestAnimationFrame(draw); }; draw(); return () => { cancelAnimationFrame(animId); window.removeEventListener('resize', resize); }; }, []); }; /* ── HOME ─────────────────────────────────────────── */ const HomePage = ({ setPage }) => { const canvasRef = useRef(null); const isMobile = useIsMobile(); useNeuralCanvas(canvasRef); const go = (id) => { setPage(id); window.scrollTo(0, 0); }; return (
{/* ── Hero ── */}
{/* Neural canvas */} {/* Subtle radial glow */}
{/* Status badge */}
Psicología del siglo XXI

Psicología
que te habla
de verdad.

Aquí no encontrarás respuestas fáciles ni frases de póster. Encontrarás psicología honesta, accesible y con base científica para quien quiere entenderse mejor.

go('empieza')}>Empieza aquí → go('laboratorio')}>Ver el laboratorio
{/* Scroll indicator */}
Scroll
{/* ── Quick stats ── */}
{[ ['1 de cada 5', 'personas experimenta ansiedad significativa en su vida.'], ['Solo el 40%', 'de quienes necesitan apoyo psicológico llega a pedirlo.'], ['Entenderte a ti', 'es la única forma de entender mejor el mundo que te rodea.'], ].map(([num, text], i) => (
0 ? '1px solid rgba(255,255,255,0.1)' : 'none', paddingLeft: i > 0 ? 32 : 0 }}>
{num}

{text}

))}
{/* ── Sections grid ── */}
Qué encontrarás

Cuatro formas de entenderte mejor

{[ { id:'empieza', title:'Empieza aquí', desc:'Si no sabes por dónde empezar, aquí te orientamos según lo que estás viviendo ahora.', color:'var(--accent)' }, { id:'articulos', title:'Artículos', desc:'Psicología sin jerga. Artículos escritos para que los entiendas y te sirvan.', color:'var(--primary-light)' }, { id:'laboratorio', title:'Laboratorio', desc:'Herramientas interactivas: ruedas emocionales, ciclos cognitivos, mapas de apego.', color:'#7496B8' }, { id:'sobre', title:'Sobre mí y contacto', desc:'Quién soy, cómo trabajo y cómo podemos vernos si lo necesitas.', color:'#9B78B8' }, ].map(s => ( go(s.id)} style={{ padding:32 }}>

{s.title}

{s.desc}

Explorar →
))}
{/* ── Featured article ── */}
Último artículo go('articulos')} style={{ display:'flex', gap:0, overflow:'hidden' }}>
{ARTICLES[0].tag} · {ARTICLES[0].readTime} de lectura

{ARTICLES[0].title}

{ARTICLES[0].subtitle}

Leer artículo →
imagen
artículo
); }; /* ── EMPIEZA AQUÍ ─────────────────────────────────── */ const EmpiezaAquiPage = ({ setPage }) => { const [expanded, setExpanded] = useState(null); const toggle = (id) => setExpanded(expanded === id ? null : id); return (
Orientación

Empieza aquí

No hace falta saber exactamente qué te pasa. Elige lo que más se acerque a lo que estás viviendo ahora mismo.

{EMPIEZA_TOPICS.map(topic => { const isOpen = expanded === topic.id; return (
{/* Header */} {/* Body */} {isOpen && (

{topic.desc}

Señales frecuentes
    {topic.signs.map(s => (
  • {s}
  • ))}
{ topic.articleId ? setPage('articulos') : setPage('laboratorio'); window.scrollTo(0,0); }} variant="outline" > {topic.cta} →
)}
); })}
); }; /* ── ARTÍCULOS ────────────────────────────────────── */ const ArticulosPage = () => { const [detail, setDetail] = useState(null); if (detail) { const art = ARTICLES.find(a => a.id === detail); return (
{/* Hero image */}
{art.tag} {art.date} · {art.readTime} de lectura

{art.title}

{art.subtitle}

{art.content.split('\n\n').map((para, i) => { if (para.startsWith('**') && para.endsWith('**')) { return

{para.replace(/\*\*/g,'')}

; } if (para.includes('**')) { const parts = para.split('**'); return (

{parts.map((p, j) => j % 2 === 1 ? {p} : p)}

); } return

{para}

; })}
); } return (
Artículos

Psicología sin jerga

Artículos escritos para que los entiendas, no para impresionarte.

{ARTICLES.map((art) => ( setDetail(art.id)} style={{ padding:0, overflow:'hidden', display:'flex', flexDirection:'column' }}> {/* Article image */}
{art.tag} {art.readTime}

{art.title}

{art.subtitle}

{art.date} Leer →
))}
); }; /* ── LABORATORIO ──────────────────────────────────── */ const LaboratorioPage = () => { const [activeTab, setActiveTab] = useState(0); const [activeGroup, setActiveGroup] = useState(0); const groups = [ { id: 'conceptos', label: 'Mapas conceptuales', desc: 'Visualiza conceptos psicológicos clave de forma interactiva.', tools: [ { id: 'emociones', label: 'Rueda de emociones', tag: 'Emociones', desc: 'Explora las 8 emociones primarias, sus intensidades y cómo gestionarlas.', component: , }, { id: 'ansiedad', label: 'Ciclo de la ansiedad', tag: 'Ansiedad', desc: 'Entiende cómo funciona la ansiedad y dónde puedes interrumpir el ciclo.', component: , }, { id: 'apego', label: 'Estilos de apego', tag: 'Relaciones', desc: 'Descubre los cuatro estilos de apego y lo que dicen sobre tus relaciones.', component: , }, ], }, { id: 'herramientas', label: 'Herramientas de análisis', desc: 'Casos ficticios para entender cómo funcionan los patrones psicológicos.', tools: [ { id: 'habito', label: '¿Qué mantiene este hábito?', tag: 'Conducta', desc: 'Un árbol de decisión que analiza por qué ciertos hábitos se resisten a cambiar.', component: , }, { id: 'contexto', label: 'El termómetro del contexto', tag: 'Gestión emocional', desc: 'Cómo el estado interno cambia radicalmente cómo respondemos ante la misma situación.', component: , }, { id: 'aprendizaje', label: 'Mapa del aprendizaje', tag: 'Identidad', desc: 'Cómo aprendemos a lo largo de la vida: mecanismos, etapas y ejemplos reales.', component: , }, ], }, ]; const currentGroup = groups[activeGroup]; const tools = currentGroup.tools; return (
Laboratorio

Herramientas interactivas

Visualiza conceptos psicológicos clave. Toca, explora e interactúa para entender mejor cómo funciona tu mente.

{/* Group selector */}
{groups.map((g, i) => ( ))}
{/* Tool tab bar */}
{tools.map((t, i) => ( ))}
{/* Active tool card */}
{tools[activeTab].tag}

{tools[activeTab].label}

{tools[activeTab].desc}

{tools[activeTab].component}
); }; /* ── SOBRE MÍ ─────────────────────────────────────── */ const SobreMiPage = () => (
Sobre mí · Contacto

Hola, soy Javi

foto de
perfil

Esta sección está en construcción. Aquí irá mi presentación, formación, enfoque terapéutico y la forma de contactar conmigo.

"Próximamente disponible. Si quieres contactar ya, puedes escribirme directamente a través de las redes sociales."

); /* ══════════════════════════════════════════════════ APP ROOT ══════════════════════════════════════════════════ */ const App = () => { const [page, setPage] = useState('home'); const [showContact, setShowContact] = useState(false); const changePage = (id) => { setPage(id); window.scrollTo(0, 0); }; const pages = { home: setShowContact(true)} />, empieza: , articulos: , laboratorio: , sobre: , }; return ( <>