

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Simulador de Procesos Nucleares - Simulación Interactiva Gratuita | Simulaciones Científicas</title>
    <meta name="description" content="Simulación científica interactiva - Simulación interactiva gratuita | Simulaciones Científicas">
    <meta name="author" content="Nicklaus Cairns">
    
      <meta name="keywords" content="science, simulation, NGSS, education, interactive">
    
    <link rel="canonical" href="https://sims.science/es/simulaciones/ciencias-fisicas/procesos-nucleares/">
    <meta property="og:url" content="https://sims.science/es/simulaciones/ciencias-fisicas/procesos-nucleares/">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Simulador de Procesos Nucleares - Simulación Interactiva Gratuita | Simulaciones Científicas">
    <meta property="og:description" content="Simulación científica interactiva - Simulación interactiva gratuita | Simulaciones Científicas">
    <meta property="og:locale" content="es-419">
    <meta property="og:image" content="https://sims.science/assets/images/og_previews/nuclear-processes.webp">
    <meta name="og:image:secure_url" content="https://sims.science/assets/images/og_previews/nuclear-processes.webp">
    <meta property="og:image:type" content="image/webp">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Simulador de Procesos Nucleares - Simulación Interactiva Gratuita | Simulaciones Científicas">
    <meta name="twitter:description" content="Simulación científica interactiva - Simulación interactiva gratuita | Simulaciones Científicas">
    <meta name="twitter:image" content="https://sims.science/assets/images/og_previews/nuclear-processes.webp">
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "LearningResource",
        "name": "Simulador de Procesos Nucleares - Simulación Interactiva Gratuita | Simulaciones Científicas",
        "description": "Simulación científica interactiva - Simulación interactiva gratuita | Simulaciones Científicas",
        "url": "https://sims.science/es/simulaciones/ciencias-fisicas/procesos-nucleares/",
        "learningResourceType": "Simulación interactiva",
        "inLanguage": "es-419",
        "educationalLevel": "Escuela secundaria",
        "interactivityType": "active",
        "author": {
          "@type": "Person",
          "name": "Nicklaus Cairns",
          "url": "https://sims.science"
        },
        "publisher": {
          "@type": "Person",
          "name": "Simulaciones científicas",
          "url": "https://sims.science"
        },
        "educationalAlignment": {
          "@type": "AlignmentObject",
          "alignmentType": "educational framework",
          "educationalFramework": "Next Generation Science Standards (NGSS)",
          "targetName": "HS-PS1-8",
          "targetUrl": "https://www.nextgenscience.org/pe/hs-ps1-8"
        }
      }
    </script>
    
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "Inicio",
            "item": "https://sims.science/es/"
          },
          {
            "@type": "ListItem",
            "position": 2,
            "name": "Ciencias físicas",
            "item": "https://sims.science/es/simulaciones/ciencias-fisicas/"
          },
          {
            "@type": "ListItem",
            "position": 3,
            "name": "Simulador de procesos nucleares",
            "item": "https://sims.science/es/simulaciones/ciencias-fisicas/procesos-nucleares/"
          }
        ]
      }
    </script>
    
    <!--
      PERF BUDGET: style.css (~20K) render-blocking with fetchpriority="high".
      shared-layout.css (~20K) non-blocking.
      Total render-blocking CSS target: <30K for sim pages.
    -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!--
      PERF BUDGET: Preload Inter font for sim layout to prevent FOIT (Flash of Invisible Text).
      At ~16K woff2 this is negligible but prevents layout shift.
    -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" as="style" onload="this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"></noscript>
    <link rel="preload" href="/assets/css/style.css?v=860946c8580b63be9471a3affe622ab52c574d69" as="style">
    <link rel="stylesheet" href="/assets/css/style.css?v=860946c8580b63be9471a3affe622ab52c574d69" fetchpriority="high">
    <link rel="stylesheet" href="/assets/css/shared-layout.css?v=860946c8580b63be9471a3affe622ab52c574d69">
    <link rel="stylesheet" href="/assets/css/sim-auth-gate.css?v=860946c8580b63be9471a3affe622ab52c574d69">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!-- Resource hints for third-party services -->
<link rel="preconnect" href="https://www.googletagmanager.com">
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<link rel="preconnect" href="https://cdn.jsdelivr.net">

<!-- Consent and Analytics Script (loads on all pages) -->
<script src="/assets/js/consent.js" defer></script>

<!--
  PERF BUDGET: AI Feedback Panel scripts load ONLY on simulation pages.
  Total size: ~34K (sim-contexts.js: 11K + ai-feedback-panel.js: 23K).
  These add ~0.4s parse time. If latency budget is exceeded, consider
  lazy-loading the AI feedback module on user interaction with a Feedback button.
-->

<!-- AI Feedback Panel — Styles -->
<link rel="stylesheet" href="/assets/css/ai-feedback.css?v=860946c8580b63be9471a3affe622ab52c574d69">
<!-- AI Feedback Panel — Context config -->
<script src="/assets/js/sim-contexts.js?v=860946c8580b63be9471a3affe622ab52c574d69" defer></script>
<!-- AI Feedback Panel — Main logic -->
<script src="/assets/js/ai-feedback-panel.js?v=860946c8580b63be9471a3affe622ab52c574d69" defer></script>


    <style>
      html {
        height: 100%;
      }

      body.simulation-layout-body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background: #0f172a;
        color: #f8fafc;
        font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      }

      .simulation-layout-body > .site-nav {
        flex-shrink: 0;
        background: rgba(15, 23, 42, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(148, 163, 184, 0.2);
      }

      .simulation-layout-body .site-nav-brand {
        color: #f8fafc;
      }

      .simulation-layout-body .site-nav-brand:hover {
        color: #38bdf8;
      }

      .simulation-layout-body .site-nav-links a {
        color: #e2e8f0;
      }

      .simulation-layout-body .site-nav-links a:hover,
      .simulation-layout-body .site-nav-links a[aria-current="page"] {
        background: rgba(255, 255, 255, 0.1);
        color: #f8fafc;
      }

      .simulation-layout-body .site-locale-switcher a {
        color: #94a3b8;
      }

      .simulation-layout-body .site-locale-switcher a:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      .simulation-layout-body .site-nav-toggle {
        color: #cbd5e1;
        border-color: rgba(148, 163, 184, 0.3);
      }

      /* WCAG 2.4.7: Focus indicators — visible focus ring on all interactive elements */
      a:focus-visible,
      button:focus-visible,
      input:focus-visible,
      select:focus-visible,
      textarea:focus-visible,
      [tabindex]:not([tabindex="-1"]):focus-visible {
        outline: 2px solid #38bdf8;
        outline-offset: 2px;
        border-radius: 2px;
      }

      /* Ensure slider thumbs also have visible focus */
      input[type="range"]:focus-visible::-webkit-slider-thumb {
        outline: 2px solid #38bdf8;
        outline-offset: 3px;
      }
      input[type="range"]:focus-visible::-moz-range-thumb {
        outline: 2px solid #38bdf8;
        outline-offset: 3px;
      }

      .simulation-layout-body .site-nav-toggle:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      .simulation-layout-main {
        flex: 1 1 auto;
        min-height: 0;
        position: relative;
      }

      .simulation-layout-footer {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
        padding: 0.75rem 1rem;
        border-top: 1px solid rgba(148, 163, 184, 0.25);
        background: #111827;
        color: #cbd5e1;
        font-size: 0.875rem;
        font-family: 'Inter', system-ui, sans-serif;
      }

      .simulation-layout-footer p {
        margin: 0;
      }

      .simulation-layout-footer a {
        color: #93c5fd;
        text-decoration: underline;
        text-underline-offset: 2px;
      }

      @media (max-width: 640px) {
        .simulation-layout-footer {
          flex-direction: column;
          align-items: flex-start;
        }
      }

      /* ===== EMBED MODE ===== */
      body.embed-mode .site-nav,
      body.embed-mode .simulation-layout-footer,
      body.embed-mode .sr-only,
      body.embed-mode .sim-share-btn {
        display: none !important;
      }

      body.embed-mode {
        background: #0f172a;
      }

      body.embed-mode .simulation-layout-main {
        flex: 1 1 auto;
        min-height: 100vh;
      }

      /* ===== SHARE BUTTON ===== */
      .sim-share-btn {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        z-index: 999;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.5rem 1rem;
        border: 1px solid rgba(148, 163, 184, 0.3);
        border-radius: 0.5rem;
        background: #1e293b;
        color: #cbd5e1;
        font-size: 0.8125rem;
        font-family: 'Inter', system-ui, sans-serif;
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      }

      .sim-share-btn:hover {
        background: #334155;
        color: #f8fafc;
      }

      .sim-share-btn:active {
        background: #475569;
      }

      .sim-share-btn svg {
        width: 1em;
        height: 1em;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .sim-share-btn[data-copied="true"] {
        background: #065f46;
        border-color: #10b981;
        color: #a7f3d0;
      }

      /* ===== HELP TOOLTIPS ===== */
      [data-tooltip] {
        position: relative;
        cursor: help;
      }

      [data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        padding: 0.4rem 0.75rem;
        border-radius: 6px;
        background: #1e293b;
        color: #e2e8f0;
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s ease, transform 0.15s ease;
        transform: translateX(-50%) translateY(4px);
        z-index: 9999;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        border: 1px solid rgba(148, 163, 184, 0.2);
        max-width: 280px;
        white-space: normal;
        text-align: center;
      }

      [data-tooltip]:hover::after,
      [data-tooltip]:focus::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }

      /* Tooltip on the right side for elements near the top */
      [data-tooltip-position="right"]::after {
        bottom: auto;
        top: 50%;
        left: calc(100% + 8px);
        transform: translateY(-50%) translateX(-4px);
      }

      [data-tooltip-position="right"]:hover::after,
      [data-tooltip-position="right"]:focus::after {
        transform: translateY(-50%) translateX(0);
      }

      /* Tooltip on the bottom */
      [data-tooltip-position="bottom"]::after {
        bottom: auto;
        top: calc(100% + 8px);
        transform: translateX(-50%) translateY(-4px);
      }

      [data-tooltip-position="bottom"]:hover::after,
      [data-tooltip-position="bottom"]:focus::after {
        transform: translateX(-50%) translateY(0);
      }

      /* Mobile: cap max-width */
      @media (max-width: 480px) {
        [data-tooltip]::after {
          max-width: 200px;
          font-size: 0.7rem;
          padding: 0.3rem 0.6rem;
        }
        [data-tooltip-position="right"]::after {
          left: auto;
          right: calc(100% + 8px);
        }
      }
    </style>
  </head>
  <body class="simulation-layout-body bg-gray-50 text-slate-800 p-6 min-h-screen">
    
    <script>!function(){var e=location.search;if(e&&(e.indexOf('embed=1')>-1||e.indexOf('embed=true')>-1)){document.documentElement.classList.add('embed-mode');document.body&&document.body.classList.add('embed-mode')}}();</script>
    <a href="#main-content" class="sr-only sr-only-focusable">
      Saltar al contenido principal
    </a>
    

<nav class="site-nav" id="site-nav" aria-label="Main navigation">
  <a href="https://sims.science/es/" class="site-nav-brand">
    sims.science
  </a>

  <button class="site-nav-toggle" id="nav-toggle" aria-label="Alternar navegación" aria-expanded="false" aria-controls="nav-links">
    <svg viewBox="0 0 24 24">
      <line x1="3" y1="12" x2="21" y2="12"></line>
      <line x1="3" y1="6" x2="21" y2="6"></line>
      <line x1="3" y1="18" x2="21" y2="18"></line>
    </svg>
  </button>

  <div class="site-nav-links" id="nav-links">
    
      <a href="https://sims.science/es/simulaciones/" >Todas las simulaciones</a>
      <a href="https://sims.science/es/simulaciones/ciencias-fisicas/" >Ciencias físicas</a>
      <a href="https://sims.science/es/simulaciones/ciencias-de-la-vida/" >Ciencias de la vida</a>
      <a href="https://sims.science/es/simulaciones/ciencias-de-la-tierra-y-el-espacio/" >Tierra y Espacio</a>
      <a href="https://sims.science/es/student/dashboard/" >Mi Progreso</a>
      <a href="https://sims.science/es/teacher/dashboard/" >Panel del Docente</a>
      <a href="https://sims.science/es/#about">Acerca de</a>
    
    
    <div id="locale-switcher" class="site-locale-switcher" role="group" aria-label="Language switcher" data-slug-map-url="/assets/data/navbar-slug-map.json?v=860946c8580b63be9471a3affe622ab52c574d69">
      <!-- Locale links injected by /assets/js/navbar.js -->
    </div>
    
  </div>
</nav>

<script src="/assets/js/navbar.js" defer></script>

    <main id="main-content" class="simulation-layout-main" tabindex="-1">
      <script>
(function() {
  document.title = "Simulador de Procesos Nucleares - Simulaci\u00f3n Interactiva Gratuita | Simulaciones Cient\u00edficas";
  document.documentElement.lang = "es";
  document.body.className = "bg-gray-50 text-slate-800 p-6 min-h-screen";
  for (const node of Array.from(document.body.childNodes)) {
    if (node === document.currentScript) break;
    if (node.nodeType === Node.TEXT_NODE) {
      node.remove();
    }
  }
})();
</script>
<link rel="stylesheet" href="../../../../assets/css/simulations.css">
<style>
        body { font-family: 'Inter', sans-serif; }

        .nucleon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            position: absolute;
            box-shadow: inset -2px -2px 4px rgba(0,0,0,0.3);
            transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
            color: white;
        }

        .proton { background-color: #ef4444; } /* Red */
        .neutron { background-color: #3b82f6; } /* Blue */

        .nucleus-container {
            position: relative;
            width: 200px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .energy-wave {
            position: absolute;
            border-radius: 50%;
            border: 2px solid #f59e0b;
            opacity: 0;
            pointer-events: none;
        }

        @keyframes pulse-energy {
            0% { width: 0; height: 0; opacity: 1; border-width: 10px; }
            100% { width: 400px; height: 400px; opacity: 0; border-width: 0px; }
        }

        .anim-energy {
            animation: pulse-energy 1.5s ease-out;
        }

        .equation-text { font-family: 'Courier New', Courier, monospace; font-size: 1.5rem; font-weight: bold; }
        .isotope { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: 0.7em; line-height: 1; text-align: right; margin-right: 2px; }
        .mass-num { margin-bottom: 2px; }
    </style>

<div class="max-w-5xl mx-auto space-y-6"><header class="border-b pb-4"><h1 class="text-3xl font-bold text-slate-900"> Simulador de procesos nucleares</h1><h2 class="text-xl text-slate-600 mt-1"> HS-PS1-8: Fisión, fusión y desintegración radiactiva</h2><p class="mt-2 text-slate-700"> Desarrollar modelos para ilustrar los cambios en la composición del núcleo del átomo y la energía liberada durante los diferentes procesos nucleares. </p></header><div class="grid grid-cols-1 md:grid-cols-4 gap-6"><!-- Process Selection --><div class="bg-white p-4 rounded-lg shadow-sm border border-slate-200 md:col-span-1"><h3 class="font-semibold text-lg mb-4"> Seleccionar proceso</h3><div class="space-y-3"> <label class="block cursor-pointer p-3 border rounded hover:bg-slate-50 transition-colors"><input checked="" class="form-radio text-blue-600 mb-1" name="process" type="radio" value="alpha"/></label> Desintegración alfa</div><div class="text-xs text-slate-500"> Uranio-238 → Torio-234 + α</div> <label class="block cursor-pointer p-3 border rounded hover:bg-slate-50 transition-colors"><input class="form-radio text-orange-600 mb-1" name="process" type="radio" value="fission"/></label>Fisión nuclear</div><div class="text-xs text-slate-500"> U-235 + n → Ba-144 + Kr-89 + 3n</div> <label class="block cursor-pointer p-3 border rounded hover:bg-slate-50 transition-colors"><input class="form-radio text-red-600 mb-1" name="process" type="radio" value="fusion"/></label> Fusión nuclear</div><div class="text-xs text-slate-500"> H-2 + H-3 → He-4 + n </div></div><!-- Visualization Area --><div class="bg-white p-6 rounded-lg shadow-sm border border-slate-200 md:col-span-3 flex flex-col"><div class="flex justify-between items-center mb-4"><h3 class="font-semibold text-lg" id="processTitle"> Desintegración alfa del U-238</h3> <button class="bg-slate-500 hover:bg-slate-600 text-white px-4 py-2 rounded font-bold uppercase tracking-wider transition-colors shadow-sm hidden" id="resetBtn">Reinicio</button> <button class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded font-bold uppercase tracking-wider transition-colors shadow-sm" id="triggerBtn">de la reacción del desencadenante</button> </div><!-- Canvas / Animation Box --><div class="flex-grow bg-slate-900 rounded-lg relative overflow-hidden flex items-center justify-center min-h-[350px]" id="simArea"><div class="energy-wave" id="energyWave"></div><!-- Nuclei will be injected here via JS --><!-- Legend Overlay --><div class="absolute bottom-4 left-4 bg-white/10 p-2 rounded backdrop-blur-sm text-xs text-white flex space-x-4"><div class="flex items-center"><div class="w-3 h-3 rounded-full bg-red-500 mr-1 shadow-[inset_-1px_-1px_2px_rgba(0,0,0,0.5)]"></div> Protón (p⁺) </div><div class="flex items-center"><div class="w-3 h-3 rounded-full bg-blue-500 mr-1 shadow-[inset_-1px_-1px_2px_rgba(0,0,0,0.5)]"></div> Neutrón (n⁰) </div></div></div><!-- Equation Display --><div class="mt-6 text-center bg-slate-100 p-4 rounded border border-slate-200"><div class="equation-text" id="equationDisplay"><!-- Populated by JS --></div></div></div><!-- Information Panel --><div class="md:col-span-4 bg-blue-50 border border-blue-200 rounded-lg p-6"><h3 class="font-bold text-blue-900 mb-2 flex items-center"><svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg> Explicación científica </h3><div class="text-blue-800 text-sm leading-relaxed" id="explanationText"><!-- Populated by JS --></div><div class="mt-4 pt-4 border-t border-blue-200"><h4 class="font-bold text-blue-900 mb-1 text-sm"> Salida de energía</h4><p class="text-blue-800 text-sm" id="energyText"><!-- Populated by JS --></p></div></div><script>
        const processes = {
            alpha: {
                title: "Alpha Decay of U-238",
                initial: [
                    { id: 'u238', type: 'nucleus', protons: 92, neutrons: 146, symbol: 'U', x: 0, y: 0 }
                ],
                equationPre: `<span class="isotope"><span class="mass-num">238<span>92U &rarr; `,
                equationPost: `<span class="isotope"><span class="mass-num">234<span>90Th + <span class="isotope"><span class="mass-num">4<span>2He (α)`,
                explanation: "<strong>Alpha Decay:</strong> An unstable, heavy nucleus (Uranium-238) spontaneously emits an alpha particle (2 protons and 2 neutrons, equivalent to a Helium nucleus). This reduces the original nucleus's atomic number by 2 and mass number by 4, creating Thorium-234.",
                energy: "<strong>Low-Moderate:</strong> Energy is released primarily as kinetic energy of the ejected alpha particle (~4-5 MeV). This energy comes from the tiny loss of mass (mass defect) converted via E=mc²."
            },
            fission: {
                title: "Nuclear Fission of U-235",
                initial: [
                    { id: 'u235', type: 'nucleus', protons: 92, neutrons: 143, symbol: 'U', x: 20, y: 0 },
                    { id: 'n_in', type: 'neutron_bullet', protons: 0, neutrons: 1, symbol: 'n', x: -200, y: 0, vx: 5, vy: 0 }
                ],
                equationPre: `<span class="isotope"><span class="mass-num">235<span>92U + <span class="isotope"><span class="mass-num">1<span>0n &rarr; `,
                equationPost: `<span class="isotope"><span class="mass-num">144<span>56Ba + <span class="isotope"><span class="mass-num">89<span>36Kr + 3 <span class="isotope"><span class="mass-num">1<span>0n`,
                explanation: "<strong>Nuclear Fission:</strong> A slow-moving neutron strikes a fissile Uranium-235 nucleus, temporarily making it highly unstable U-236. It violently splits into two lighter nuclei (Barium-144 and Krypton-89) and releases 3 fast neutrons, which can go on to trigger a chain reaction.",
                energy: "<strong>Extremely High:</strong> A massive amount of energy (~200 MeV per event) is released due to a significant mass defect. This is the process used in modern nuclear power plants and atomic bombs."
            },
            fusion: {
                title: "Nuclear Fusion (D-T)",
                initial: [
                    { id: 'h2', type: 'nucleus', protons: 1, neutrons: 1, symbol: 'H', x: -100, y: 0, vx: 3, vy: 0 },
                    { id: 'h3', type: 'nucleus', protons: 1, neutrons: 2, symbol: 'H', x: 100, y: 0, vx: -3, vy: 0 }
                ],
                equationPre: `<span class="isotope"><span class="mass-num">2<span>1H + <span class="isotope"><span class="mass-num">3<span>1H &rarr; `,
                equationPost: `<span class="isotope"><span class="mass-num">4<span>2He + <span class="isotope"><span class="mass-num">1<span>0n`,
                explanation: "<strong>Nuclear Fusion:</strong> Two light nuclei (Deuterium and Tritium isotopes of Hydrogen) collide at extremely high speeds (requiring massive temperatures/pressures) to overcome electrostatic repulsion. They fuse into a heavier Helium nucleus and eject a neutron.",
                energy: "<strong>Tremendous:</strong> Fusion releases even more energy per unit mass than fission (~17.6 MeV per event, but fuels are very light). This is the process that powers the Sun and stars."
            }
        };

        let currentProcess = 'alpha';
        let isAnimating = false;
        let animationId;
        let objects = [];

        // DOM
        const simArea = document.getElementById('simArea');
        const energyWave = document.getElementById('energyWave');
        const triggerBtn = document.getElementById('triggerBtn');
        const resetBtn = document.getElementById('resetBtn');
        const processTitle = document.getElementById('processTitle');
        const equationDisplay = document.getElementById('equationDisplay');
        const explanationText = document.getElementById('explanationText');
        const energyText = document.getElementById('energyText');
        const radioBtns = document.querySelectorAll('input[name="process"]');

        function createNucleon(type, parentRadius) {
            const el = document.createElement('div');
            el.className = `nucleon ${type}`;
            // Position randomly within the nucleus radius
            const r = Math.random() * (parentRadius - 10);
            const theta = Math.random() * 2 * Math.PI;
            el.style.left = `calc(50% + ${r * Math.cos(theta)}px - 10px)`;
            el.style.top = `calc(50% + ${r * Math.sin(theta)}px - 10px)`;

            // For tiny nuclei (H2, H3, He), arrange them deterministically
            return el;
        }

        function createNucleusDOM(objData) {
            const container = document.createElement('div');
            container.className = 'nucleus-container';
            container.id = objData.id;

            // Calculate visual radius based on total nucleons (A)
            const A = objData.protons + objData.neutrons;
            let radius = 20; // base for 1 nucleon
            if (A > 1) radius = Math.max(30, Math.pow(A, 1/3) * 12); // Rough visual scaling
            if (A > 200) radius = 80;

            container.style.width = `${radius*2}px`;
            container.style.height = `${radius*2}px`;

            // If it's a single neutron
            if (A === 1 && objData.neutrons === 1) {
                container.style.width = '20px';
                container.style.height = '20px';
                const n = document.createElement('div');
                n.className = 'nucleon neutron';
                n.style.left = '0'; n.style.top = '0';
                container.appendChild(n);
            } else {
                // Populate with protons and neutrons
                // For performance and visual clarity on heavy elements, cap the visual count
                const visualProtons = Math.min(objData.protons, 40);
                const visualNeutrons = Math.min(objData.neutrons, 60);

                // Specific layouts for light elements
                if (A <= 4) {
                    container.style.width = '40px'; container.style.height = '40px';
                    const positions = [[5,5], [15,15], [5,15], [15,5]]; // Simple offsets
                    let pCount = 0;

                    for(let i=0; i<objData.protons; i++) {
                        const p = document.createElement('div'); p.className='nucleon proton';
                        p.style.left = positions[pCount][0]+'px'; p.style.top = positions[pCount][1]+'px';
                        container.appendChild(p); pCount++;
                    }
                    for(let i=0; i<objData.neutrons; i++) {
                        const n = document.createElement('div'); n.className='nucleon neutron';
                        n.style.left = positions[pCount][0]+'px'; n.style.top = positions[pCount][1]+'px';
                        container.appendChild(n); pCount++;
                    }
                } else {
                    for (let i = 0; i < visualProtons; i++) container.appendChild(createNucleon('proton', radius));
                    for (let i = 0; i < visualNeutrons; i++) container.appendChild(createNucleon('neutron', radius));
                }
            }

            // Symbol overlay
            if (objData.symbol !== 'n') {
                const sym = document.createElement('div');
                sym.className = 'absolute inset-0 flex items-center justify-center font-bold text-white/80 text-3xl pointer-events-none drop-shadow-md';
                sym.textContent = objData.symbol;
                container.appendChild(sym);
            }

            // Position
            container.style.position = 'absolute';
            container.style.left = `calc(50% + ${objData.x}px - ${parseInt(container.style.width)/2}px)`;
            container.style.top = `calc(50% + ${objData.y}px - ${parseInt(container.style.height)/2}px)`;

            simArea.appendChild(container);
            return container;
        }

        function loadProcess() {
            cancelAnimationFrame(animationId);
            isAnimating = false;
            triggerBtn.classList.remove('hidden');
            resetBtn.classList.add('hidden');
            energyWave.classList.remove('anim-energy');

            // Clean up sim area (keep legend and energy wave)
            const nodes = simArea.querySelectorAll('.nucleus-container');
            nodes.forEach(n => n.remove());

            const data = processes[currentProcess];
            processTitle.textContent = data.title;
            equationDisplay.innerHTML = data.equationPre + `<span class="opacity-30">?`;
            explanationText.innerHTML = data.explanation;
            energyText.innerHTML = data.energy;

            // Deep copy initial objects
            objects = JSON.parse(JSON.stringify(data.initial));

            objects.forEach(obj => {
                obj.el = createNucleusDOM(obj);
            });
        }

        function triggerReaction() {
            if (isAnimating) return;
            isAnimating = true;
            triggerBtn.classList.add('hidden');
            resetBtn.classList.remove('hidden');

            if (currentProcess === 'alpha') {
                animateAlpha();
            } else if (currentProcess === 'fission') {
                animateFission();
            } else if (currentProcess === 'fusion') {
                animateFusion();
            }
        }

        function triggerEnergyWave(x, y) {
            energyWave.style.left = `calc(50% + ${x}px)`;
            energyWave.style.top = `calc(50% + ${y}px)`;
            energyWave.classList.remove('anim-energy');
            void energyWave.offsetWidth; // trigger reflow
            energyWave.classList.add('anim-energy');
            equationDisplay.innerHTML = processes[currentProcess].equationPre + processes[currentProcess].equationPost;
        }

        function animateAlpha() {
            const u238 = objects.find(o => o.id === 'u238');

            // Jiggle
            u238.el.style.transform = 'scale(1.05)';
            setTimeout(() => {
                // Split
                u238.el.remove();

                // Create Th-234
                const th = { id: 'th234', type: 'nucleus', protons: 90, neutrons: 144, symbol: 'Th', x: -20, y: 0 };
                th.el = createNucleusDOM(th);

                // Create Alpha
                const alpha = { id: 'alpha', type: 'nucleus', protons: 2, neutrons: 2, symbol: 'He', x: 50, y: 0 };
                alpha.el = createNucleusDOM(alpha);

                triggerEnergyWave(0, 0);

                // Animate apart
                setTimeout(() => {
                    th.el.style.transition = 'left 1s ease-out';
                    alpha.el.style.transition = 'left 1s ease-out';
                    th.el.style.left = `calc(50% - 60px - 40px)`; // shift left slightly
                    alpha.el.style.left = `calc(50% + 150px - 20px)`; // shoot right
                }, 50);

            }, 500);
        }

        function animateFission() {
            const neutron = objects.find(o => o.id === 'n_in');
            const u235 = objects.find(o => o.id === 'u235');

            // Move neutron
            neutron.el.style.transition = 'left 0.5s linear';
            neutron.el.style.left = `calc(50% + 20px - 10px)`; // hit U235

            setTimeout(() => {
                neutron.el.remove();
                u235.el.style.transform = 'scale(1.1) scaleX(1.3)'; // elongate
                u235.el.querySelector('div.absolute').textContent = 'U*'; // Unstable U-236

                setTimeout(() => {
                    u235.el.remove();
                    triggerEnergyWave(20, 0);

                    // Create Fragments
                    const ba = { id: 'ba144', type: 'nucleus', protons: 56, neutrons: 88, symbol: 'Ba', x: 20, y: -20 };
                    ba.el = createNucleusDOM(ba);

                    const kr = { id: 'kr89', type: 'nucleus', protons: 36, neutrons: 53, symbol: 'Kr', x: 20, y: 20 };
                    kr.el = createNucleusDOM(kr);

                    // Create 3 neutrons
                    const n1 = { id: 'n1', type: 'nucleus', protons: 0, neutrons: 1, symbol: 'n', x: 20, y: 0 }; n1.el = createNucleusDOM(n1);
                    const n2 = { id: 'n2', type: 'nucleus', protons: 0, neutrons: 1, symbol: 'n', x: 20, y: 0 }; n2.el = createNucleusDOM(n2);
                    const n3 = { id: 'n3', type: 'nucleus', protons: 0, neutrons: 1, symbol: 'n', x: 20, y: 0 }; n3.el = createNucleusDOM(n3);

                    // Explode outwards
                    setTimeout(() => {
                        const t = 'all 1s ease-out';
                        ba.el.style.transition = t; kr.el.style.transition = t;
                        n1.el.style.transition = t; n2.el.style.transition = t; n3.el.style.transition = t;

                        ba.el.style.left = `calc(50% - 100px)`; ba.el.style.top = `calc(50% - 100px)`;
                        kr.el.style.left = `calc(50% - 80px)`; kr.el.style.top = `calc(50% + 80px)`;

                        n1.el.style.left = `calc(50% + 150px)`; n1.el.style.top = `calc(50% - 40px)`;
                        n2.el.style.left = `calc(50% + 160px)`; n2.el.style.top = `calc(50% + 10px)`;
                        n3.el.style.left = `calc(50% + 140px)`; n3.el.style.top = `calc(50% + 60px)`;
                    }, 50);

                }, 400);
            }, 500);
        }

        function animateFusion() {
            const h2 = objects.find(o => o.id === 'h2');
            const h3 = objects.find(o => o.id === 'h3');

            // Move together fast
            h2.el.style.transition = 'left 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53)'; // accelerate
            h3.el.style.transition = 'left 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53)';

            h2.el.style.left = `calc(50% - 10px)`;
            h3.el.style.left = `calc(50% + 10px)`;

            setTimeout(() => {
                h2.el.remove();
                h3.el.remove();

                triggerEnergyWave(0, 0);

                // Create He4 and Neutron
                const he4 = { id: 'he4', type: 'nucleus', protons: 2, neutrons: 2, symbol: 'He', x: 0, y: 0 };
                he4.el = createNucleusDOM(he4);

                const n = { id: 'n_out', type: 'nucleus', protons: 0, neutrons: 1, symbol: 'n', x: 0, y: 0 };
                n.el = createNucleusDOM(n);

                // Recoil
                setTimeout(() => {
                    he4.el.style.transition = 'all 1s ease-out';
                    n.el.style.transition = 'all 1s ease-out';

                    he4.el.style.left = `calc(50% - 40px)`;
                    n.el.style.left = `calc(50% + 100px)`;
                }, 50);

            }, 400);
        }

        // Listeners
        radioBtns.forEach(r => r.addEventListener('change', (e) => {
            currentProcess = e.target.value;
            loadProcess();
        }));

        triggerBtn.addEventListener('click', triggerReaction);
        resetBtn.addEventListener('click', loadProcess);

        // Init
        loadProcess();

    </script>

    </main>
    
    <button class="sim-share-btn" id="simShareBtn" type="button" aria-label="Compartir simulación"
      data-tooltip="Comparte este enlace con tus estudiantes para que accedan a la simulación"
      data-tooltip-position="left">
      <svg viewBox="0 0 24 24"><line x1="12" y1="3" x2="12" y2="16"></line><polyline points="8 12 12 16 16 12"></polyline><path d="M5 21h14a2 2 0 0 0 2-2v-4"></path><path d="M3 15v4a2 2 0 0 0 2 2h.5"></path></svg>
      <span>Compartir</span>
    </button>
    <footer class="simulation-layout-footer" aria-label="Pie del sitio">
      <p>
        <a href="https://sims.science/es/terminos/" style="text-decoration:underline;text-underline-offset:2px;">Términos</a>
        |
        <a href="https://sims.science/es/privacidad/" style="text-decoration:underline;text-underline-offset:2px;">Privacidad</a>
      </p>
      
    </footer>
    
    <noscript id="seo-fallback">
      <a href="https://sims.science/es/">
        Inicio
      </a>
      
        <a href="https://sims.science/es/simulaciones/ciencias-fisicas/">Ciencias físicas</a>
      
      <a href="https://sims.science/es/simulaciones/ciencias-fisicas/procesos-nucleares/">Simulador de procesos nucleares</a>
    </noscript>
    
    <script defer src="/assets/js/share-sim.js?v=860946c8580b63be9471a3affe622ab52c574d69"></script>
    
    
    <script defer src="/assets/js/science-ed-tracker.min.js?v=860946c8580b63be9471a3affe622ab52c574d69"
      data-api-base="https://api.sims.science"
      data-sim-slug="ciencias-fisicas"
      data-batch-interval="5000"
      data-max-batch-size="50"
      data-debug="false"></script>
    
    
    <script defer src="/assets/js/sim-auth-gate.min.js?v=860946c8580b63be9471a3affe622ab52c574d69"
      data-login-url="/en/student/login/"
      data-register-url="/en/student/register/"
      data-api-base="https://api.sims.science"
      data-sim-title="Simulador de procesos nucleares"
      data-sim-desc="Simulación científica interactiva - Simulación interactiva gratuita | Simulaciones Científicas"
      data-sim-category="Ciencias físicas"
      data-debug="false"
      data-skip-sdk-init="true"></script>
    
    
    <script>
      (function(){
        if (localStorage.getItem('sims-sim-tip-dismissed')) return;
        var tip = document.createElement('div');
        tip.id = 'sim-first-tip';
        tip.style.cssText = 'position:fixed;bottom:4.5rem;right:1rem;z-index:9998;background:#1e293b;border:1px solid rgba(148,163,184,0.25);border-radius:12px;padding:1rem 1.25rem;max-width:320px;color:#e2e8f0;font-size:0.85rem;line-height:1.45;font-family:Inter,system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,0.4);display:none;';
        tip.innerHTML = '<div style="font-size:1.1rem;margin-bottom:0.4rem;">💡 Consejo rápido</div><div>Usa los controles interactivos para explorar la simulación. Pasa el cursor sobre los elementos para obtener ayuda. <a href="" style="color:#38bdf8;text-decoration:underline;white-space:nowrap;">Más información →</a></div><button onclick="this.parentElement.style.display=\'none\';try{localStorage.setItem(\'sims-sim-tip-dismissed\',\'true\')}catch(e){}" style="position:absolute;top:0.35rem;right:0.5rem;background:none;border:none;color:#64748b;font-size:1.1rem;cursor:pointer;line-height:1;" aria-label="Cerrar">&times;</button>';
        document.body.appendChild(tip);
        // Show after a short delay
        setTimeout(function(){ tip.style.display = 'block'; }, 1500);
      })();
    </script>
  </body>
</html>