

<!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>Minimizador de fuerza de colisión - 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/amortiguador-caida-huevo/">
    <meta property="og:url" content="https://sims.science/es/simulaciones/ciencias-fisicas/amortiguador-caida-huevo/">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Minimizador de fuerza de colisión - 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/egg-drop-crash-cushion.webp">
    <meta name="og:image:secure_url" content="https://sims.science/assets/images/og_previews/egg-drop-crash-cushion.webp">
    <meta property="og:image:type" content="image/webp">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Minimizador de fuerza de colisión - 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/egg-drop-crash-cushion.webp">
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "LearningResource",
        "name": "Minimizador de fuerza de colisión - 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/amortiguador-caida-huevo/",
        "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-PS2-3",
          "targetUrl": "https://www.nextgenscience.org/pe/hs-ps2-3"
        }
      }
    </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": "Minimizador de fuerza de colisión",
            "item": "https://sims.science/es/simulaciones/ciencias-fisicas/amortiguador-caida-huevo/"
          }
        ]
      }
    </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-gray-800 font-sans p-6 min-h-screen flex flex-col items-center">
    
    <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 = "Minimizador de fuerza de colisi\u00f3n - Simulaci\u00f3n interactiva gratuita | Simulaciones cient\u00edficas";
  document.documentElement.lang = "es";
  document.body.className = "bg-gray-50 text-gray-800 font-sans p-6 min-h-screen flex flex-col items-center";
  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">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
        .sim-container {
            position: relative;
            width: 100%;
            height: 400px;
            background-color: #e0f2fe;
            border: 2px solid #cbd5e1;
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }

        #egg {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 50px;
            background-color: #fef08a; /* yellow egg */
            border: 2px solid #ca8a04;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            bottom: 350px; /* Starting high */
            transition: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            z-index: 10;
        }

        #cushion {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50px;
            background-color: #94a3b8;
            border-top: 2px dashed #475569;
            z-index: 5;
            transition: height 0.1s ease-out;
        }

        .status-broken {
            background-color: #fca5a5 !important;
            border-color: #b91c1c !important;
            border-radius: 10px !important;
            height: 20px !important;
            bottom: 50px !important; /* Will be set via JS anyway */
        }
    </style>

<div class="max-w-6xl w-full"><!-- Header Section --><header class="mb-8 text-center"><h1 class="text-4xl font-extrabold text-gray-900 mb-2"> Minimizador de fuerza de colisión</h1><h2 class="text-2xl font-semibold text-gray-600 mb-4"> HS-PS2-3: Minimización de la fuerza durante una colisión</h2><p class="text-lg text-gray-700 max-w-4xl mx-auto"> Aplicar ideas científicas y de ingeniería para diseñar, evaluar y perfeccionar un dispositivo que minimice la fuerza ejercida sobre un objeto macroscópico durante una colisión. </p></header><div class="grid grid-cols-1 lg:grid-cols-3 gap-8"><!-- Controls Panel --><div class="lg:col-span-1 bg-white p-6 rounded-xl shadow-md border border-gray-200"><h3 class="text-xl font-bold mb-4 border-b pb-2"> Controles de ingeniería</h3><div class="mb-4"> <label class="block text-sm font-medium text-gray-700 mb-1">Altura de caída (m): <span id="heightVal">5,0</span></label> <input class="w-full accent-blue-500" id="dropHeight" max="10.0" min="1.0" step="0.5" type="range" value="5.0"/></div><div class="mb-4"> <label class="block text-sm font-medium text-gray-700 mb-1">Masa de la carga útil (kg): <span id="massVal">0,1</span></label> <input class="w-full accent-blue-500" id="payloadMass" max="1.0" min="0.05" step="0.05" type="range" value="0.1"/></div><div class="mb-4"> <label class="block text-sm font-medium text-gray-700 mb-1">Material del cojín (rigidez)</label> <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 border" id="materialType"><option value="airbag"> Airbag (blando, k=500 N/m)</option><option selected="" value="foam"> Espuma (media, k=2000 N/m)</option><option value="rubber"> Caucho (duro, k=10000 N/m)</option><option value="concrete"> Hormigón (sólido, k=500000 N/m)</option></select></div><div class="mb-6"> <label class="block text-sm font-medium text-gray-700 mb-1">Grosor del cojín (m): <span id="thicknessVal">0,2</span></label> <input class="w-full accent-blue-500" id="cushionThickness" max="0.5" min="0.05" step="0.05" type="range" value="0.2"/><p class="text-xs text-gray-500 mt-1"> Si la compresión supera el espesor, ¡la carga útil impacta contra el suelo duro!</p></div><div class="flex gap-4 mb-4"> <button class="flex-1 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition-colors" id="dropBtn">Soltar carga útil</button> <button class="flex-1 bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded transition-colors" id="resetBtn">Reiniciar</button> </div><div class="hidden mt-4 p-4 rounded-lg bg-gray-100 border border-gray-300 text-sm" id="resultsPanel"><h4 class="font-bold mb-2"> Resultados de impacto</h4><p> Velocidad de impacto: <span class="font-mono" id="resVel">0 m/s</span></p><p> Compresión máxima: <span class="font-mono" id="resComp">0 m</span></p><p> Fuerza máxima: <span class="font-mono font-bold" id="resForce">0 N</span></p><p class="mt-2 text-lg font-bold text-center" id="resStatus"> ESTADO </p></div></div><!-- Visualization & Graph Panel --><div class="lg:col-span-2 flex flex-col gap-6"><div class="bg-white p-6 rounded-xl shadow-md border border-gray-200"><h3 class="text-xl font-bold mb-4 border-b pb-2"> Simulación de caída</h3><div class="sim-container" id="simContainer"><div id="egg"> 🥚 </div><div id="cushion"></div></div></div><div class="bg-white p-6 rounded-xl shadow-md border border-gray-200 flex-grow" style="max-height: 350px;"><h3 class="text-xl font-bold mb-4 border-b pb-2"> Perfil de fuerza a lo largo del tiempo (durante el impacto) </h3><div class="relative h-full w-full" style="min-height: 200px;"><canvas id="forceChart"></canvas></div></div></div></div><!-- Educational Context Section --><div class="mt-8 bg-blue-50 p-6 rounded-xl shadow-md border border-blue-200"><h3 class="text-2xl font-bold text-blue-900 mb-4"> NGSS Aprendizaje tridimensional </h3><div class="grid grid-cols-1 md:grid-cols-3 gap-6"><div><h4 class="font-bold text-blue-800 mb-2"> Prácticas científicas y de ingeniería</h4><p class="text-sm text-gray-700"> <strong>Elaboración de explicaciones y diseño de soluciones:</strong> Aplicar ideas científicas para resolver un problema de diseño. Probar diferentes materiales y espesores para perfeccionar un dispositivo que minimice la fuerza de impacto y mantenga la carga útil por debajo de su umbral de rotura (aproximadamente 50 N).</p></div><div><h4 class="font-bold text-blue-800 mb-2"> Ideas centrales de la disciplina</h4><p class="text-sm text-gray-700"> <strong>PS2.A y ETS1:</strong> Las fuerzas compensan los cambios totales de momento. Al aumentar la distancia de frenado (compresión del amortiguador) y el tiempo, se reduce la fuerza de impacto promedio. Los criterios de ingeniería incluyen limitaciones como el grosor limitado del amortiguador.</p></div><div><h4 class="font-bold text-blue-800 mb-2"> Conceptos transversales</h4><p class="text-sm text-gray-700"> <strong>Causa y efecto:</strong> Los sistemas pueden diseñarse para producir el efecto deseado. Modificar la rigidez (causa) altera el perfil de desaceleración y la fuerza máxima (efecto), determinando así si la carga útil sobrevive.</p></div></div></div></div><script>
        // Constants
        const g = 9.81; // Gravity m/s^2
        const BREAK_FORCE = 50; // Newtons to break the payload (like an egg)

        const materials = {
            airbag: { k: 500, color: '#bae6fd', name: 'Airbag' },
            foam: { k: 2000, color: '#fcd34d', name: 'Foam' },
            rubber: { k: 10000, color: '#334155', name: 'Rubber' },
            concrete: { k: 500000, color: '#94a3b8', name: 'Concrete' }
        };

        // DOM Elements
        const heightInput = document.getElementById('dropHeight');
        const massInput = document.getElementById('payloadMass');
        const matSelect = document.getElementById('materialType');
        const thicknessInput = document.getElementById('cushionThickness');

        const heightVal = document.getElementById('heightVal');
        const massVal = document.getElementById('massVal');
        const thicknessVal = document.getElementById('thicknessVal');

        const dropBtn = document.getElementById('dropBtn');
        const resetBtn = document.getElementById('resetBtn');

        const eggEl = document.getElementById('egg');
        const cushionEl = document.getElementById('cushion');
        const simContainer = document.getElementById('simContainer');

        const resultsPanel = document.getElementById('resultsPanel');
        const resVel = document.getElementById('resVel');
        const resComp = document.getElementById('resComp');
        const resForce = document.getElementById('resForce');
        const resStatus = document.getElementById('resStatus');

        // State
        let isRunning = false;
        let mass, height, thickness, k;
        let animationId;

        let simTime = 0;
        let positionY = 0; // Starts from height
        let velocity = 0;
        let impactStarted = false;
        let impactFinished = false;
        let maxForce = 0;
        let maxComp = 0;
        let chartTime = [];
        let chartForce = [];

        // Chart
        const ctx = document.getElementById('forceChart').getContext('2d');
        let forceChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'Impact Force (N)',
                    data: [],
                    borderColor: '#ef4444',
                    backgroundColor: 'rgba(239, 68, 68, 0.2)',
                    fill: true,
                    tension: 0.1,
                    pointRadius: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: { title: { display: true, text: 'Time during impact (s)' } },
                    y: {
                        title: { display: true, text: 'Force (N)' },
                        min: 0,
                        suggestedMax: 100
                    }
                },
                animation: false
            }
        });

        function updateVisuals() {
            if (isRunning) return;

            mass = parseFloat(massInput.value);
            height = parseFloat(heightInput.value);
            thickness = parseFloat(thicknessInput.value);
            const mat = materials[matSelect.value];
            k = mat.k;

            heightVal.textContent = height.toFixed(1);
            massVal.textContent = mass.toFixed(2);
            thicknessVal.textContent = thickness.toFixed(2);

            cushionEl.style.backgroundColor = mat.color;

            // Visual scale mapping
            // Height: 10m maps to ~ 350px. 1m = 35px.
            const pxPerMeter = 35;

            // Cushion thickness visual: let's map it exaggerated slightly for visibility
            // 0.5m -> 50px. So 1m = 100px for cushion visual height.
            cushionEl.style.height = `${thickness * 100}px`;

            // Egg starting position
            // Container is 400px high. Cushion is at bottom.
            // Let's place egg relative to bottom
            const startingPxFromBottom = (thickness * 100) + (height * pxPerMeter);
            eggEl.style.bottom = `${startingPxFromBottom}px`;

            eggEl.className = ''; // Reset classes
            eggEl.innerHTML = '🥚';
            eggEl.style.transform = `translateX(-50%)`;

            resultsPanel.classList.add('hidden');

            forceChart.data.labels = [];
            forceChart.data.datasets[0].data = [];
            forceChart.update('none'); // ⚡ Bolt: Bypass animation for performance
        }

        const inputs = [heightInput, massInput, matSelect, thicknessInput];
        inputs.forEach(input => input.addEventListener('input', updateVisuals));

        function runSimulation() {
            if (isRunning) return;
            isRunning = true;

            inputs.forEach(i => i.disabled = true);
            dropBtn.disabled = true;

            if (document.hidden !== undefined) {
                Object.defineProperty(document, 'hidden', { configurable: true, value: false });
            }

            positionY = height;
            velocity = 0;
            simTime = 0;
            impactStarted = false;
            impactFinished = false;
            maxForce = 0;
            maxComp = 0;
            chartTime = [];
            chartForce = [];

            let lastTimestamp = performance.now();

            function simLoop(timestamp) {
                if (!isRunning) return;

                // Use a fixed small time step for stable physics integration instead of actual dt
                // Because visual dt might be 16ms, but we want finer resolution for stiff impacts
                const dt = 0.001;
                // We'll process multiple physics steps per visual frame to catch up to real time
                const stepsPerFrame = 16;

                for (let i = 0; i < stepsPerFrame; i++) {
                    if (impactFinished) break;

                    simTime += dt;

                    if (!impactStarted) {
                        // Free fall
                        velocity += g * dt;
                        positionY -= velocity * dt;

                        if (positionY <= 0) {
                            impactStarted = true;
                            positionY = 0; // Reset exactly to cushion surface
                            resVel.textContent = velocity.toFixed(2);
                        }
                    } else {
                        // Impact phase
                        // positionY is now compression (negative value)
                        let compression = -positionY;

                        // Spring force: F = kx
                        let springForce = k * compression;

                        // Bottoming out (exceeding thickness)
                        if (compression >= thickness) {
                            // Hit solid ground. Extremely high force.
                            springForce = 1000000;
                            velocity = 0;
                        }

                        // Net force (upwards is positive for acceleration here)
                        // Actually, gravity is still acting downwards (m*g).
                        // Upward force = springForce. Downward force = mg.
                        // Net upward force = springForce - m*g
                        let netForceUp = springForce - (mass * g);

                        let accelerationUp = netForceUp / mass;

                        // Velocity is downward (positive). So upward acceleration reduces it.
                        velocity -= accelerationUp * dt;
                        positionY -= velocity * dt; // If velocity is neg (bouncing up), positionY increases

                        let currentTotalForce = Math.abs(springForce); // Force experienced by payload
                        if (currentTotalForce > maxForce) maxForce = currentTotalForce;
                        if (compression > maxComp) maxComp = compression;

                        // Log data for chart every few ms to avoid huge arrays
                        if (Math.floor(simTime * 1000) % 2 === 0) {
                            chartTime.push((simTime - (height/velocity)).toFixed(3)); // roughly align to 0
                            chartForce.push(currentTotalForce);
                        }

                        // Stop condition: Bounced back up or settled (velocity ~ 0 and accel ~ 0)
                        if (positionY > 0 && velocity < 0) {
                            impactFinished = true;
                            positionY = 0; // Leave on surface
                        } else if (Math.abs(velocity) < 0.01 && Math.abs(accelerationUp) < 0.1) {
                            impactFinished = true;
                        }
                    }
                }

                updateVisualPosition();

                if (impactFinished) {
                    finishSimulation();
                } else {
                    animationId = requestAnimationFrame(simLoop);
                }
            }

            animationId = requestAnimationFrame(simLoop);
        }

        function updateVisualPosition() {
            const pxPerMeter = 35;
            let currentVisualBottom;

            if (!impactStarted) {
                // Above cushion
                currentVisualBottom = (thickness * 100) + (positionY * pxPerMeter);
            } else {
                // Inside cushion (compression).
                let comp = -positionY;
                // Cap visual compression at thickness
                let visualComp = Math.min(comp, thickness);
                currentVisualBottom = (thickness * 100) - (visualComp * 100);
            }

            eggEl.style.bottom = `${currentVisualBottom}px`;
        }

        function finishSimulation() {
            isRunning = false;

            // Reconstruct chart times properly relative to 0
            const n = chartTime.length;
            const newTimes = Array.from({length: n}, (_, i) => (i * 0.002).toFixed(3));

            forceChart.data.labels = newTimes;
            forceChart.data.datasets[0].data = chartForce;

            // Dynamically scale graph so it's readable
            forceChart.options.scales.y.suggestedMax = Math.max(100, maxForce * 1.1);
            forceChart.update('none'); // ⚡ Bolt: Bypass animation for performance

            // Populate Results
            resComp.textContent = maxComp.toFixed(3);
            resForce.textContent = maxForce.toFixed(1);
            resultsPanel.classList.remove('hidden');

            if (maxForce > BREAK_FORCE) {
                resStatus.textContent = "PAYLOAD DESTROYED!";
                resStatus.className = "mt-2 text-xl font-bold text-center text-red-600";
                eggEl.className = 'status-broken';
                eggEl.innerHTML = '🍳';
                eggEl.style.transform = `translateX(-50%) scale(1.2)`;
            } else {
                resStatus.textContent = "PAYLOAD SURVIVED!";
                resStatus.className = "mt-2 text-xl font-bold text-center text-green-600";
            }

            inputs.forEach(i => i.disabled = false);
            dropBtn.disabled = false;
        }

        function resetSimulation() {
            if (isRunning) {
                cancelAnimationFrame(animationId);
                isRunning = false;
                inputs.forEach(i => i.disabled = false);
                dropBtn.disabled = false;
            }
            updateVisuals();
        }

        dropBtn.addEventListener('click', runSimulation);
        resetBtn.addEventListener('click', resetSimulation);

        // Init
        updateVisuals();

        // Export for testing
        window.simulationState = {
            get isRunning() { return isRunning; },
            get maxForce() { return maxForce; },
            get isBroken() { return maxForce > BREAK_FORCE; }
        };

    </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/amortiguador-caida-huevo/">Minimizador de fuerza de colisión</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="Minimizador de fuerza de colisión"
      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>