
<!DOCTYPE html>
<!-- saved from url=(0068)file:///C:/Users/s_jgm/Downloads/Video_Animado_Densidad_FQ_3ESO.html -->
<html lang="en" class="translated-ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Density Explained — Educational Animation · Almudena Isabel Santos · IES La Cabrera</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Arial,sans-serif;background:#1A1A2E;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:20px}
.vw{width:100%;max-width:700px;background:#0C1628;border-radius:12px;overflow:hidden}
.vbar{background:#12203A;padding:7px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vbar-title{font-size:11px;font-weight:700;color:#85B7EB;flex:1}
.vbar-cc{font-size:9px;color:#EF9F27;background:rgba(186,117,23,.15);border:1px solid rgba(186,117,23,.3);border-radius:8px;padding:2px 8px}
.vbar-lic{font-size:9px;color:#5DCAA5;background:rgba(29,158,117,.15);border:1px solid rgba(29,158,117,.3);border-radius:8px;padding:2px 8px}
.vscreen{position:relative;width:100%;overflow:hidden}
.scene{display:none;width:100%}
.scene.act{display:block}
.subtitle-bar{background:rgba(0,0,0,.82);padding:10px 20px;min-height:54px;display:flex;align-items:center;justify-content:center}
.subtitle-text{font-size:13px;color:#fff;line-height:1.55;text-align:center;max-width:600px}
.subtitle-text em{color:#FAC775;font-style:normal;font-weight:700}
.controls{background:#12203A;padding:8px 14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.prog-track{flex:1;height:4px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;min-width:60px}
.prog-fill{height:100%;background:#534AB7;border-radius:2px;transition:width .35s}
.ctrl-btn{border:none;background:rgba(255,255,255,.08);color:#fff;border-radius:6px;padding:5px 12px;font-size:11px;font-weight:700;cursor:pointer;font-family:'Segoe UI',Arial,sans-serif;transition:background .15s}
.ctrl-btn:hover{background:rgba(255,255,255,.18)}
.ctrl-btn.play{background:#534AB7}
.scn-num{font-size:10px;color:#5F5E5A;font-family:'Courier New',monospace;white-space:nowrap}
.sub-toggle{font-size:10px;cursor:pointer;border:1px solid rgba(133,183,235,.3);border-radius:5px;padding:3px 8px;background:rgba(133,183,235,.08);color:#85B7EB;font-family:'Segoe UI',Arial,sans-serif}
.sub-toggle.on{background:rgba(133,183,235,.22);color:#fff;border-color:#85B7EB}
.lic-footer{background:#0A1628;padding:7px 14px;font-size:10px;color:#5F5E5A;text-align:center;border-top:1px solid rgba(255,255,255,.05);line-height:1.6}
.lic-footer span{color:#EF9F27;font-weight:700}
</style>
<link type="text/css" rel="stylesheet" charset="UTF-8" href="./Density Explained — Educational Animation · Almudena Isabel Santos · IES La Cabrera_files/m=el_main_css"></head>
<body>
<div class="vw">
<div class="vbar">
<span class="vbar-title"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Density explained — Physics and Chemistry 3rd ESO · IES La Cabrera · Madrid</font></font></span>
<span class="vbar-cc"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">CC BY-SA 4.0</font></font></span>
<span class="vbar-lic"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Almudena Isabel Santos</font></font></span>
</div>
<div class="vscreen">
<!-- ESCENA 0: PORTADA -->
<div class="scene" id="s0">
<svg width="100%" viewBox="0 0 680 330" xmlns="http://www.w3.org/2000/svg">
<rect width="680" height="330" fill="#0C1628"></rect>
<circle cx="50" cy="30" r="1.5" fill="#AFA9EC" opacity=".6"></circle>
<circle cx="120" cy="60" r="1" fill="#85B7EB" opacity=".5"></circle>
<circle cx="600" cy="25" r="1.5" fill="#CECBF6" opacity=".6"></circle>
<circle cx="650" cy="80" r="1" fill="#85B7EB" opacity=".4"></circle>
<circle cx="30" cy="120" r="1" fill="#AFA9EC" opacity=".5"></circle>
<circle cx="640" cy="200" r="1.5" fill="#CECBF6" opacity=".5"></circle>
<rect x="140" y="38" width="400" height="62" rx="10" fill="#534AB7" opacity=".92"></rect>
<text x="340" y="64" text-anchor="middle" font-size="20" font-weight="700" fill="#ffffff" font-family="'Segoe UI',Arial,sans-serif">¿Qué es la densidad?</text>
<text x="340" y="88" text-anchor="middle" font-size="12" fill="#CECBF6" font-family="'Segoe UI',Arial,sans-serif">Física y Química · 3.º ESO · IES La Cabrera · Madrid</text>
<circle cx="340" cy="160" r="38" fill="#FAC775" stroke="#EF9F27" stroke-width="2"></circle>
<circle cx="325" cy="153" r="5" fill="#1a1a1a"></circle>
<circle cx="355" cy="153" r="5" fill="#1a1a1a"></circle>
<circle cx="327" cy="151" r="2" fill="#ffffff"></circle>
<circle cx="357" cy="151" r="2" fill="#ffffff"></circle>
<path d="M337 162 Q340 168 343 162" stroke="#EF9F27" stroke-width="1.5" fill="none"></path>
<path d="M326 172 Q340 183 354 172" stroke="#1a1a1a" stroke-width="2" fill="none" stroke-linecap="round"></path>
<path d="M320 146 Q326 142 333 146" stroke="#633806" stroke-width="2" fill="none" stroke-linecap="round"></path>
<path d="M347 146 Q353 142 360 146" stroke="#633806" stroke-width="2" fill="none" stroke-linecap="round"></path>
<path d="M302 148 Q310 118 340 115 Q370 118 378 148" fill="#633806" stroke="none"></path>
<rect x="300" y="198" width="80" height="60" rx="8" fill="#534AB7"></rect>
<rect x="330" y="194" width="20" height="10" fill="#FAC775"></rect>
<path d="M300 210 Q270 195 260 178" stroke="#534AB7" stroke-width="14" fill="none" stroke-linecap="round"></path>
<path d="M380 210 Q410 195 420 178" stroke="#534AB7" stroke-width="14" fill="none" stroke-linecap="round"></path>
<circle cx="258" cy="176" r="10" fill="#FAC775"></circle>
<circle cx="422" cy="176" r="10" fill="#FAC775"></circle>
<rect x="180" y="128" width="92" height="58" rx="5" fill="#1D3A2A" stroke="#1D9E75" stroke-width="1.5"></rect>
<text x="226" y="150" text-anchor="middle" font-size="12" fill="#5DCAA5" font-family="'Courier New',monospace">ρ = m / V</text>
<text x="226" y="166" text-anchor="middle" font-size="9" fill="#9FE1CB" font-family="'Segoe UI',Arial,sans-serif">densidad =</text>
<text x="226" y="178" text-anchor="middle" font-size="9" fill="#9FE1CB" font-family="'Segoe UI',Arial,sans-serif">masa / volumen</text>
<rect x="268" y="263" width="144" height="38" rx="19" fill="#534AB7" style="cursor:pointer" onclick="play()"></rect>
<text x="340" y="287" text-anchor="middle" font-size="13" font-weight="700" fill="#ffffff" font-family="'Segoe UI',Arial,sans-serif" style="pointer-events:none">▶ Empezar</text>
<text x="340" y="318" text-anchor="middle" font-size="9" fill="#5F5E5A" font-family="'Segoe UI',Arial,sans-serif">CC BY-SA 4.0 · Almudena Isabel Santos · IES La Cabrera · 2025</text>
</svg>
</div>
<!-- ESCENA 1: QUÉ ES LA DENSIDAD -->
<div class="scene" id="s1">
<svg width="100%" viewBox="0 0 680 310" xmlns="http://www.w3.org/2000/svg">
<rect width="680" height="310" fill="#0A1E10"></rect>
<circle cx="110" cy="145" r="34" fill="#FAC775" stroke="#EF9F27" stroke-width="2"></circle>
<circle cx="96" cy="138" r="4.5" fill="#1a1a1a"></circle>
<circle cx="124" cy="138" r="4.5" fill="#1a1a1a"></circle>
<circle cx="97" cy="136" r="1.8" fill="#ffffff"></circle>
<circle cx="125" cy="136" r="1.8" fill="#ffffff"></circle>
<path d="M102 155 Q110 164 120 155" stroke="#1a1a1a" stroke-width="2" fill="none" stroke-linecap="round"></path>
<path d="M93 135 Q99 131 106 135" stroke="#633806" stroke-width="1.5" fill="none"></path>
<path d="M114 135 Q120 131 127 135" stroke="#633806" stroke-width="1.5" fill="none"></path>
<path d="M77 140 Q86 114 110 110 Q134 114 143 140" fill="#633806"></path>
<rect x="78" y="178" width="64" height="52" rx="7" fill="#1D9E75"></rect>
<rect x="98" y="175" width="16" height="8" fill="#FAC775"></rect>
<path d="M78 188 Q55 176 46 163" stroke="#1D9E75" stroke-width="12" fill="none" stroke-linecap="round"></path>
<path d="M142 188 Q162 176 172 163" stroke="#1D9E75" stroke-width="12" fill="none" stroke-linecap="round"></path>
<circle cx="44" cy="161" r="9" fill="#FAC775"></circle>
<circle cx="174" cy="161" r="9" fill="#FAC775"></circle>
<rect x="155" y="78" width="282" height="70" rx="10" fill="#ffffff" stroke="#1D9E75" stroke-width="1.5"></rect>
<path d="M155 113 L130 130 L155 126" fill="#ffffff" stroke="#1D9E75" stroke-width="1.5"></path>
<text x="296" y="103" text-anchor="middle" font-size="13" font-weight="700" fill="#085041" font-family="'Segoe UI',Arial,sans-serif">La densidad es la cantidad de</text>
<text x="296" y="121" text-anchor="middle" font-size="13" font-weight="700" fill="#085041" font-family="'Segoe UI',Arial,sans-serif">materia que cabe en un espacio.</text>
<text x="296" y="138" text-anchor="middle" font-size="11" fill="#0F6E56" font-family="'Segoe UI',Arial,sans-serif">Se calcula: ρ = masa / volumen</text>
<rect x="155" y="163" width="282" height="66" rx="8" fill="#1D3A2A" stroke="#1D9E75" stroke-width="1.5"></rect>
<text x="296" y="191" text-anchor="middle" font-size="22" font-weight="700" fill="#5DCAA5" font-family="'Courier New',monospace">ρ = m / V</text>
<text x="220" y="218" text-anchor="middle" font-size="11" fill="#9FE1CB" font-family="'Segoe UI',Arial,sans-serif">masa (g)</text>
<text x="296" y="218" text-anchor="middle" font-size="11" fill="#5DCAA5" font-family="'Segoe UI',Arial,sans-serif">/</text>
<text x="375" y="218" text-anchor="middle" font-size="11" fill="#9FE1CB" font-family="'Segoe UI',Arial,sans-serif">volumen (cm³)</text>
<rect x="452" y="163" width="196" height="66" rx="8" fill="#12203A" stroke="#534AB7" stroke-width="1"></rect>
<text x="550" y="192" text-anchor="middle" font-size="14" font-weight="700" fill="#CECBF6" font-family="'Segoe UI',Arial,sans-serif">Unidad: g/cm³</text>
<text x="550" y="210" text-anchor="middle" font-size="11" fill="#AFA9EC" font-family="'Segoe UI',Arial,sans-serif">o también kg/m³</text>
<text x="550" y="225" text-anchor="middle" font-size="10" fill="#7F77DD" font-family="'Segoe UI',Arial,sans-serif">en el SI internacional</text>
<text x="340" y="298" text-anchor="middle" font-size="9" fill="#3B6D11" font-family="'Segoe UI',Arial,sans-serif">CC BY-SA 4.0 · Almudena Isabel Santos · IES La Cabrera · 2025</text>
</svg>
</div>
<!-- ESCENA 2: ACEITE Y AGUA -->
<div class="scene" id="s2">
<svg width="100%" viewBox="0 0 680 310" xmlns="http://www.w3.org/2000/svg">
<rect width="680" height="310" fill="#1A0A38"></rect>
<circle cx="110" cy="145" r="34" fill="#FAC775" stroke="#EF9F27" stroke-width="2"></circle>
<ellipse cx="97" cy="138" rx="5" ry="6" fill="#1a1a1a"></ellipse>
<ellipse cx="124" cy="138" rx="5" ry="6" fill="#1a1a1a"></ellipse>
<circle cx="97" cy="136" r="2" fill="#ffffff"></circle>
<circle cx="125" cy="136" r="2" fill="#ffffff"></circle>
<path d="M100 162 Q110 170 122 162" stroke="#1a1a1a" stroke-width="2.5" fill="none" stroke-linecap="round"></path>
<path d="M91 131 Q98 126 105 130" stroke="#633806" stroke-width="2" fill="none"></path>
<path d="M115 130 Q122 126 130 131" stroke="#633806" stroke-width="2" fill="none"></path>
<path d="M77 140 Q86 114 110 110 Q134 114 143 140" fill="#412402"></path>
<rect x="78" y="178" width="64" height="52" rx="7" fill="#534AB7"></rect>
<rect x="98" y="175" width="16" height="8" fill="#FAC775"></rect>
<rect x="150" y="58" width="312" height="60" rx="10" fill="#ffffff" stroke="#534AB7" stroke-width="1.5"></rect>
<path d="M150 88 L128 106 L153 102" fill="#ffffff" stroke="#534AB7" stroke-width="1.5"></path>
<text x="306" y="82" text-anchor="middle" font-size="13" font-weight="700" fill="#3C3489" font-family="'Segoe UI',Arial,sans-serif">Ejemplo cotidiano 1:</text>
<text x="306" y="102" text-anchor="middle" font-size="12" fill="#534AB7" font-family="'Segoe UI',Arial,sans-serif">¿Por qué el aceite flota sobre el agua?</text>
<rect x="460" y="80" width="92" height="152" rx="6" fill="none" stroke="#AFA9EC" stroke-width="2"></rect>
<rect x="463" y="156" width="86" height="73" rx="0" fill="#185FA5" opacity=".82"></rect>
<text x="506" y="197" text-anchor="middle" font-size="11" font-weight="700" fill="#E6F1FB" font-family="'Segoe UI',Arial,sans-serif">Agua</text>
<text x="506" y="212" text-anchor="middle" font-size="10" fill="#85B7EB" font-family="'Courier New',monospace">1.00 g/cm³</text>
<rect x="463" y="90" width="86" height="66" rx="0" fill="#EF9F27" opacity=".88"></rect>
<text x="506" y="121" text-anchor="middle" font-size="11" font-weight="700" fill="#412402" font-family="'Segoe UI',Arial,sans-serif">Aceite</text>
<text x="506" y="137" text-anchor="middle" font-size="10" fill="#633806" font-family="'Courier New',monospace">0.92 g/cm³</text>
<line x1="463" y1="156" x2="549" y2="156" stroke="#ffffff" stroke-width="1.5" stroke-dasharray="4,3"></line>
<rect x="150" y="133" width="292" height="102" rx="8" fill="#1A0A38" stroke="#534AB7" stroke-width="1"></rect>
<text x="296" y="156" text-anchor="middle" font-size="12" font-weight="700" fill="#CECBF6" font-family="'Segoe UI',Arial,sans-serif">El aceite flota porque tiene</text>
<text x="296" y="173" text-anchor="middle" font-size="12" font-weight="700" fill="#CECBF6" font-family="'Segoe UI',Arial,sans-serif">MENOS densidad que el agua.</text>
<text x="296" y="194" text-anchor="middle" font-size="11" fill="#AFA9EC" font-family="'Segoe UI',Arial,sans-serif">Aceite: 0.92 g/cm³ < Agua: 1.00 g/cm³</text>
<text x="296" y="213" text-anchor="middle" font-size="11" fill="#8B3DFF" font-family="'Segoe UI',Arial,sans-serif">Lo menos denso flota sobre lo más denso</text>
<text x="296" y="228" text-anchor="middle" font-size="10" fill="#7F77DD" font-family="'Segoe UI',Arial,sans-serif">(si no se mezclan)</text>
<text x="340" y="300" text-anchor="middle" font-size="9" fill="#3C3489" font-family="'Segoe UI',Arial,sans-serif">CC BY-SA 4.0 · Almudena Isabel Santos · IES La Cabrera · 2025</text>
</svg>
</div>
<!-- ESCENA 3: EXPERIMENTO FLOTACIÓN -->
<div class="scene" id="s3">
<svg width="100%" viewBox="0 0 680 310" xmlns="http://www.w3.org/2000/svg">
<rect width="680" height="310" fill="#061428"></rect>
<circle cx="110" cy="140" r="34" fill="#FAC775" stroke="#EF9F27" stroke-width="2"></circle>
<circle cx="96" cy="133" r="5" fill="#1a1a1a"></circle>
<circle cx="124" cy="133" r="5" fill="#1a1a1a"></circle>
<circle cx="97.5" cy="131" r="2" fill="#ffffff"></circle>
<circle cx="125.5" cy="131" r="2" fill="#ffffff"></circle>
<path d="M100 152 Q110 160 120 152" stroke="#1a1a1a" stroke-width="2" fill="none" stroke-linecap="round"></path>
<path d="M88 128 Q95 124 102 128" stroke="#633806" stroke-width="1.5" fill="none"></path>
<path d="M118 128 Q125 124 132 128" stroke="#633806" stroke-width="1.5" fill="none"></path>
<path d="M77 135 Q86 108 110 105 Q134 108 143 135" fill="#633806"></path>
<rect x="78" y="174" width="64" height="52" rx="7" fill="#185FA5"></rect>
<rect x="98" y="171" width="16" height="8" fill="#FAC775"></rect>
<path d="M142 184 Q175 175 195 168" stroke="#185FA5" stroke-width="12" fill="none" stroke-linecap="round"></path>
<circle cx="198" cy="167" r="9" fill="#FAC775"></circle>
<rect x="155" y="53" width="332" height="62" rx="10" fill="#ffffff" stroke="#185FA5" stroke-width="1.5"></rect>
<path d="M155 84 L135 104 L158 98" fill="#ffffff" stroke="#185FA5" stroke-width="1.5"></path>
<text x="321" y="76" text-anchor="middle" font-size="13" font-weight="700" fill="#0C447C" font-family="'Segoe UI',Arial,sans-serif">Experimento sencillo en clase:</text>
<text x="321" y="96" text-anchor="middle" font-size="12" fill="#185FA5" font-family="'Segoe UI',Arial,sans-serif">¿Qué objetos flotan y cuáles se hunden?</text>
<rect x="200" y="147" width="200" height="112" rx="8" fill="none" stroke="#85B7EB" stroke-width="2"></rect>
<rect x="203" y="185" width="194" height="71" rx="0" fill="#185FA5" opacity=".72"></rect>
<rect x="230" y="172" width="40" height="18" rx="4" fill="#BA7517" stroke="#EF9F27" stroke-width="1"></rect>
<text x="250" y="184" text-anchor="middle" font-size="8" fill="#ffffff" font-family="'Segoe UI',Arial,sans-serif">corcho</text>
<path d="M220 190 Q250 185 280 190" stroke="#E6F1FB" stroke-width="1" fill="none" opacity=".5"></path>
<ellipse cx="330" cy="245" rx="16" ry="7" fill="#888780" stroke="#D3D1C7" stroke-width="1"></ellipse>
<text x="330" y="248" text-anchor="middle" font-size="7" fill="#ffffff" font-family="'Segoe UI',Arial,sans-serif">moneda</text>
<rect x="412" y="147" width="222" height="112" rx="8" fill="#12203A" stroke="#534AB7" stroke-width="1"></rect>
<text x="523" y="170" text-anchor="middle" font-size="11" font-weight="700" fill="#CECBF6" font-family="'Segoe UI',Arial,sans-serif">Regla de la flotación:</text>
<text x="523" y="189" text-anchor="middle" font-size="11" fill="#85B7EB" font-family="'Segoe UI',Arial,sans-serif">ρ objeto < ρ agua → FLOTA</text>
<text x="523" y="207" text-anchor="middle" font-size="10" fill="#5DCAA5" font-family="'Courier New',monospace">Corcho: 0.12 g/cm³ ✓</text>
<text x="523" y="225" text-anchor="middle" font-size="11" fill="#85B7EB" font-family="'Segoe UI',Arial,sans-serif">ρ objeto > ρ agua → SE HUNDE</text>
<text x="523" y="243" text-anchor="middle" font-size="10" fill="#F09595" font-family="'Courier New',monospace">Moneda: 8.9 g/cm³ ✗</text>
<text x="340" y="300" text-anchor="middle" font-size="9" fill="#185FA5" font-family="'Segoe UI',Arial,sans-serif">CC BY-SA 4.0 · Almudena Isabel Santos · IES La Cabrera · 2025</text>
</svg>
</div>
<!-- ESCENA 4: LABORATORIO -->
<div class="scene" id="s4">
<svg width="100%" viewBox="0 0 680 310" xmlns="http://www.w3.org/2000/svg">
<rect width="680" height="310" fill="#0A1E10"></rect>
<circle cx="100" cy="138" r="34" fill="#FAC775" stroke="#EF9F27" stroke-width="2"></circle>
<circle cx="86" cy="131" r="5" fill="#1a1a1a"></circle>
<circle cx="114" cy="131" r="5" fill="#1a1a1a"></circle>
<circle cx="87.5" cy="129" r="2" fill="#ffffff"></circle>
<circle cx="115.5" cy="129" r="2" fill="#ffffff"></circle>
<path d="M90 150 Q100 158 112 150" stroke="#1a1a1a" stroke-width="2" fill="none" stroke-linecap="round"></path>
<path d="M79 126 Q86 122 93 126" stroke="#633806" stroke-width="1.5" fill="none"></path>
<path d="M107 126 Q114 122 122 126" stroke="#633806" stroke-width="1.5" fill="none"></path>
<path d="M67 133 Q76 107 100 103 Q124 107 133 133" fill="#1D9E75"></path>
<rect x="64" y="170" width="72" height="60" rx="7" fill="#E6F1FB" stroke="#85B7EB" stroke-width="1"></rect>
<rect x="88" y="167" width="16" height="8" fill="#FAC775"></rect>
<rect x="145" y="48" width="362" height="72" rx="10" fill="#ffffff" stroke="#1D9E75" stroke-width="1.5"></rect>
<path d="M145 84 L123 104 L148 98" fill="#ffffff" stroke="#1D9E75" stroke-width="1.5"></path>
<text x="326" y="72" text-anchor="middle" font-size="13" font-weight="700" fill="#085041" font-family="'Segoe UI',Arial,sans-serif">Experimento de laboratorio:</text>
<text x="326" y="90" text-anchor="middle" font-size="12" fill="#0F6E56" font-family="'Segoe UI',Arial,sans-serif">Medir la densidad por desplazamiento de agua</text>
<text x="326" y="108" text-anchor="middle" font-size="10" fill="#1D9E75" font-family="'Segoe UI',Arial,sans-serif">(Método de Arquímedes)</text>
<rect x="145" y="136" width="102" height="72" rx="6" fill="#12203A" stroke="#1D9E75" stroke-width="1.5"></rect>
<text x="196" y="156" text-anchor="middle" font-size="10" font-weight="700" fill="#5DCAA5" font-family="'Segoe UI',Arial,sans-serif">Balanza digital</text>
<rect x="163" y="163" width="65" height="30" rx="4" fill="#1D3A2A"></rect>
<text x="196" y="182" text-anchor="middle" font-size="13" font-weight="700" fill="#5DCAA5" font-family="'Courier New',monospace">78.45 g</text>
<text x="196" y="200" text-anchor="middle" font-size="9" fill="#9FE1CB" font-family="'Segoe UI',Arial,sans-serif">masa del hierro</text>
<text x="264" y="178" text-anchor="middle" font-size="20" fill="#1D9E75" font-family="'Segoe UI',Arial,sans-serif">→</text>
<rect x="283" y="128" width="62" height="92" rx="4" fill="none" stroke="#85B7EB" stroke-width="2"></rect>
<rect x="286" y="178" width="56" height="39" rx="0" fill="#185FA5" opacity=".72"></rect>
<rect x="298" y="173" width="28" height="15" rx="3" fill="#888780" stroke="#D3D1C7" stroke-width="1"></rect>
<text x="314" y="144" text-anchor="middle" font-size="9" fill="#85B7EB" font-family="'Segoe UI',Arial,sans-serif">V₂=40 cm³</text>
<text x="314" y="222" text-anchor="middle" font-size="9" fill="#85B7EB" font-family="'Segoe UI',Arial,sans-serif">V₁=30 cm³</text>
<line x1="286" y1="178" x2="308" y2="178" stroke="#E6F1FB" stroke-width="1" opacity=".7"></line>
<text x="372" y="178" text-anchor="middle" font-size="20" fill="#1D9E75" font-family="'Segoe UI',Arial,sans-serif">→</text>
<rect x="390" y="126" width="232" height="102" rx="8" fill="#1D3A2A" stroke="#1D9E75" stroke-width="1.5"></rect>
<text x="506" y="148" text-anchor="middle" font-size="11" font-weight="700" fill="#9FE1CB" font-family="'Segoe UI',Arial,sans-serif">Cálculo de la densidad:</text>
<text x="506" y="166" text-anchor="middle" font-size="11" fill="#5DCAA5" font-family="'Courier New',monospace">V = V₂ - V₁ = 10 cm³</text>
<text x="506" y="183" text-anchor="middle" font-size="11" fill="#5DCAA5" font-family="'Courier New',monospace">m = 78.45 g</text>
<text x="506" y="202" text-anchor="middle" font-size="13" font-weight="700" fill="#FAC775" font-family="'Courier New',monospace">ρ = 78.45/10 = 7.84</text>
<text x="506" y="220" text-anchor="middle" font-size="11" fill="#EF9F27" font-family="'Courier New',monospace">g/cm³ (teórico: 7.87)</text>
<text x="340" y="300" text-anchor="middle" font-size="9" fill="#1D9E75" font-family="'Segoe UI',Arial,sans-serif">CC BY-SA 4.0 · Almudena Isabel Santos · IES La Cabrera · 2025</text>
</svg>
</div>
<!-- ESCENA 5: TABLA DE RESULTADOS -->
<div class="scene" id="s5">
<svg width="100%" viewBox="0 0 680 310" xmlns="http://www.w3.org/2000/svg">
<rect width="680" height="310" fill="#1A0A38"></rect>
<circle cx="100" cy="120" r="30" fill="#FAC775" stroke="#EF9F27" stroke-width="2"></circle>
<circle cx="88" cy="114" r="4.5" fill="#1a1a1a"></circle>
<circle cx="112" cy="114" r="4.5" fill="#1a1a1a"></circle>
<circle cx="89.5" cy="112" r="1.8" fill="#ffffff"></circle>
<circle cx="113.5" cy="112" r="1.8" fill="#ffffff"></circle>
<path d="M92 130 Q100 138 110 130" stroke="#1a1a1a" stroke-width="2" fill="none" stroke-linecap="round"></path>
<path d="M84 110 Q90 106 97 110" stroke="#633806" stroke-width="1.5" fill="none"></path>
<path d="M104 110 Q110 106 117 110" stroke="#633806" stroke-width="1.5" fill="none"></path>
<path d="M72 116 Q80 92 100 88 Q120 92 128 116" fill="#633806"></path>
<rect x="72" y="149" width="56" height="46" rx="6" fill="#534AB7"></rect>
<rect x="90" y="146" width="14" height="7" fill="#FAC775"></rect>
<path d="M128 165 Q155 155 174 148" stroke="#534AB7" stroke-width="10" fill="none" stroke-linecap="round"></path>
<circle cx="177" cy="147" r="8" fill="#FAC775"></circle>
<rect x="155" y="38" width="312" height="52" rx="10" fill="#ffffff" stroke="#534AB7" stroke-width="1.5"></rect>
<path d="M155 62 L135 80 L158 74" fill="#ffffff" stroke="#534AB7" stroke-width="1.5"></path>
<text x="311" y="60" text-anchor="middle" font-size="13" font-weight="700" fill="#3C3489" font-family="'Segoe UI',Arial,sans-serif">Tabla de resultados del laboratorio</text>
<text x="311" y="78" text-anchor="middle" font-size="11" fill="#534AB7" font-family="'Segoe UI',Arial,sans-serif">IES La Cabrera · 5 equipos · 22 alumnos</text>
<rect x="155" y="106" width="492" height="28" rx="4" fill="#534AB7"></rect>
<text x="236" y="125" text-anchor="middle" font-size="11" font-weight="700" fill="#ffffff" font-family="'Segoe UI',Arial,sans-serif">Material</text>
<text x="362" y="125" text-anchor="middle" font-size="11" font-weight="700" fill="#ffffff" font-family="'Segoe UI',Arial,sans-serif">ρ exp. (g/cm³)</text>
<text x="482" y="125" text-anchor="middle" font-size="11" font-weight="700" fill="#ffffff" font-family="'Segoe UI',Arial,sans-serif">ρ teórica</text>
<text x="592" y="125" text-anchor="middle" font-size="11" font-weight="700" fill="#ffffff" font-family="'Segoe UI',Arial,sans-serif">Error %</text>
<rect x="155" y="134" width="492" height="22" rx="0" fill="#EEEDFE"></rect>
<text x="236" y="149" text-anchor="middle" font-size="11" fill="#3C3489" font-family="'Segoe UI',Arial,sans-serif">Cobre</text>
<text x="362" y="149" text-anchor="middle" font-size="11" fill="#3C3489" font-family="'Courier New',monospace">8.950</text>
<text x="482" y="149" text-anchor="middle" font-size="11" fill="#085041" font-family="'Courier New',monospace">8.960</text>
<text x="592" y="149" text-anchor="middle" font-size="11" fill="#1D9E75" font-family="'Segoe UI',Arial,sans-serif">0.11%</text>
<rect x="155" y="156" width="492" height="22" rx="0" fill="#ffffff" opacity=".88"></rect>
<text x="236" y="171" text-anchor="middle" font-size="11" fill="#3C3489" font-family="'Segoe UI',Arial,sans-serif">Hierro</text>
<text x="362" y="171" text-anchor="middle" font-size="11" fill="#3C3489" font-family="'Courier New',monospace">7.845</text>
<text x="482" y="171" text-anchor="middle" font-size="11" fill="#085041" font-family="'Courier New',monospace">7.870</text>
<text x="592" y="171" text-anchor="middle" font-size="11" fill="#1D9E75" font-family="'Segoe UI',Arial,sans-serif">0.32%</text>
<rect x="155" y="178" width="492" height="22" rx="0" fill="#EEEDFE"></rect>
<text x="236" y="193" text-anchor="middle" font-size="11" fill="#3C3489" font-family="'Segoe UI',Arial,sans-serif">Aluminio</text>
<text x="362" y="193" text-anchor="middle" font-size="11" fill="#3C3489" font-family="'Courier New',monospace">2.712</text>
<text x="482" y="193" text-anchor="middle" font-size="11" fill="#085041" font-family="'Courier New',monospace">2.700</text>
<text x="592" y="193" text-anchor="middle" font-size="11" fill="#1D9E75" font-family="'Segoe UI',Arial,sans-serif">0.44%</text>
<rect x="155" y="200" width="492" height="22" rx="0" fill="#ffffff" opacity=".88"></rect>
<text x="236" y="215" text-anchor="middle" font-size="11" fill="#3C3489" font-family="'Segoe UI',Arial,sans-serif">Plástico PVC</text>
<text x="362" y="215" text-anchor="middle" font-size="11" fill="#3C3489" font-family="'Courier New',monospace">1.417</text>
<text x="482" y="215" text-anchor="middle" font-size="11" fill="#085041" font-family="'Courier New',monospace">1.400</text>
<text x="592" y="215" text-anchor="middle" font-size="11" fill="#EF9F27" font-family="'Segoe UI',Arial,sans-serif">1.21%</text>
<rect x="155" y="222" width="492" height="22" rx="0" fill="#EEEDFE"></rect>
<text x="236" y="237" text-anchor="middle" font-size="11" fill="#3C3489" font-family="'Segoe UI',Arial,sans-serif">Madera (pino)</text>
<text x="362" y="237" text-anchor="middle" font-size="11" fill="#3C3489" font-family="'Courier New',monospace">0.557</text>
<text x="482" y="237" text-anchor="middle" font-size="11" fill="#085041" font-family="'Courier New',monospace">0.550</text>
<text x="592" y="237" text-anchor="middle" font-size="11" fill="#EF9F27" font-family="'Segoe UI',Arial,sans-serif">1.27%</text>
<rect x="155" y="250" width="492" height="30" rx="4" fill="#1D3A2A" stroke="#1D9E75" stroke-width="1"></rect>
<text x="401" y="270" text-anchor="middle" font-size="11" fill="#5DCAA5" font-family="'Segoe UI',Arial,sans-serif">Todos los errores son menores del 2% → ¡experimento muy preciso!</text>
<text x="340" y="302" text-anchor="middle" font-size="9" fill="#3C3489" font-family="'Segoe UI',Arial,sans-serif">CC BY-SA 4.0 · Almudena Isabel Santos · IES La Cabrera · 2025</text>
</svg>
</div>
<!-- ESCENA 6: CIERRE -->
<div class="scene act" id="s6">
<svg width="100%" viewBox="0 0 680 310" xmlns="http://www.w3.org/2000/svg">
<rect width="680" height="310" fill="#0C1628"></rect>
<circle cx="200" cy="140" r="40" fill="#FAC775" stroke="#EF9F27" stroke-width="2.5"></circle>
<circle cx="185" cy="131" r="6" fill="#1a1a1a"></circle>
<circle cx="215" cy="131" r="6" fill="#1a1a1a"></circle>
<circle cx="187" cy="128" r="2.5" fill="#ffffff"></circle>
<circle cx="217" cy="128" r="2.5" fill="#ffffff"></circle>
<path d="M185 158 Q200 172 216 158" stroke="#1a1a1a" stroke-width="2.5" fill="none" stroke-linecap="round"></path>
<path d="M177 124 Q186 118 195 124" stroke="#633806" stroke-width="2" fill="none"></path>
<path d="M205 124 Q214 118 223 124" stroke="#633806" stroke-width="2" fill="none"></path>
<path d="M162 134 Q172 104 200 100 Q228 104 238 134" fill="#412402"></path>
<rect x="168" y="178" width="64" height="58" rx="8" fill="#1D9E75"></rect>
<rect x="190" y="175" width="18" height="9" fill="#FAC775"></rect>
<path d="M232 172 Q256 160 270 148" stroke="#1D9E75" stroke-width="14" fill="none" stroke-linecap="round"></path>
<circle cx="273" cy="146" r="11" fill="#FAC775"></circle>
<path d="M268 148 L276 140 L281 144 L278 150 Z" fill="#FAC775" stroke="#EF9F27" stroke-width="1"></path>
<rect x="310" y="48" width="330" height="204" rx="10" fill="#12203A" stroke="#534AB7" stroke-width="1.5"></rect>
<text x="475" y="78" text-anchor="middle" font-size="14" font-weight="700" fill="#CECBF6" font-family="'Segoe UI',Arial,sans-serif">Lo que hemos aprendido:</text>
<line x1="330" y1="86" x2="620" y2="86" stroke="#534AB7" stroke-width="0.5"></line>
<text x="330" y="106" font-size="12" fill="#AFA9EC" font-family="'Segoe UI',Arial,sans-serif">✓ ρ = masa / volumen (g/cm³)</text>
<text x="330" y="126" font-size="12" fill="#AFA9EC" font-family="'Segoe UI',Arial,sans-serif">✓ El aceite flota sobre el agua</text>
<text x="330" y="146" font-size="12" fill="#AFA9EC" font-family="'Segoe UI',Arial,sans-serif">✓ Flotación: ρ objeto vs ρ líquido</text>
<text x="330" y="166" font-size="12" fill="#AFA9EC" font-family="'Segoe UI',Arial,sans-serif">✓ Experimento de desplazamiento</text>
<text x="330" y="186" font-size="12" fill="#AFA9EC" font-family="'Segoe UI',Arial,sans-serif">✓ Excel para analizar los datos</text>
<text x="330" y="206" font-size="12" fill="#AFA9EC" font-family="'Segoe UI',Arial,sans-serif">✓ Errores menores del 2%</text>
<rect x="318" y="220" width="304" height="24" rx="5" fill="#534AB7"></rect>
<text x="475" y="236" text-anchor="middle" font-size="11" font-weight="700" fill="#ffffff" font-family="'Segoe UI',Arial,sans-serif">La densidad es una propiedad intensiva</text>
<ellipse cx="110" cy="60" rx="76" ry="36" fill="#534AB7" opacity=".92"></ellipse>
<path d="M130 94 Q140 110 135 117" fill="#534AB7"></path>
<text x="110" y="54" text-anchor="middle" font-size="12" font-weight="700" fill="#ffffff" font-family="'Segoe UI',Arial,sans-serif">¡Muy bien hecho,</text>
<text x="110" y="72" text-anchor="middle" font-size="12" font-weight="700" fill="#FAC775" font-family="'Segoe UI',Arial,sans-serif">3.º ESO!</text>
<rect x="58" y="267" width="564" height="32" rx="5" fill="#12203A" stroke="#534AB7" stroke-width="0.5"></rect>
<text x="340" y="279" text-anchor="middle" font-size="9" fill="#85B7EB" font-family="'Segoe UI',Arial,sans-serif">Obra original · Autora: Almudena Isabel Santos · IES La Cabrera, Madrid, 2025</text>
<text x="340" y="292" text-anchor="middle" font-size="9" fill="#EF9F27" font-family="'Segoe UI',Arial,sans-serif">Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional (CC BY-SA 4.0)</text>
</svg>
</div>
</div>
<div class="subtitle-bar" id="subBar">
<div class="subtitle-text" id="subTxt"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Summary: ρ = m/V, oil floats on water, buoyancy depends on comparing densities, the water displacement experiment is reliable and the group errors were less than 2%.</font></font></div>
</div>
<div class="controls">
<button class="ctrl-btn play" id="btnPlay" onclick="play()"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">↺ Restart</font></font></button>
<button class="ctrl-btn" onclick="prev()"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">◀ Previous</font></font></button>
<button class="ctrl-btn" onclick="next()"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Next ▶</font></font></button>
<div class="prog-track"><div class="prog-fill" id="progF" style="width: 100%;"></div></div>
<span class="scn-num" id="scnNum"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">6 / 6</font></font></span>
<button class="sub-toggle on" id="subToggle" onclick="toggleSub()"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">CC Subtitles</font></font></button>
</div>
<div class="lic-footer"><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">
Original work · </font></font><span><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">Almudena Isabel Santos</font></font></span><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;"> · IES La Cabrera · Madrid · 2025 ·
</font></font><span><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;">CC BY-SA 4.0</font></font></span><font dir="auto" style="vertical-align: inherit;"><font dir="auto" style="vertical-align: inherit;"> · Creative Commons Attribution-ShareAlike 4.0 International
</font></font></div>
</div>
<script>
const TOTAL=6;
const subs=[
'Pulsa <strong>▶ Empezar</strong> para comenzar la animación educativa sobre la densidad.',
'La <em>densidad</em> es la cantidad de materia que cabe en un espacio. Se calcula dividiendo masa entre volumen: ρ = m ÷ V. La unidad es gramos por centímetro cúbico (g/cm³).',
'Ejemplo cotidiano: el aceite flota sobre el agua porque tiene <em>menos densidad</em>. El aceite tiene 0.92 g/cm³ y el agua 1.00 g/cm³. Lo menos denso siempre flota sobre lo más denso si no se mezclan.',
'Experimento: sumergimos objetos en agua. El corcho flota porque su densidad (0.12 g/cm³) es <em>menor que la del agua</em> (1.00 g/cm³). La moneda se hunde porque su densidad (8.9 g/cm³) es mayor.',
'En el laboratorio medimos la densidad por el <em>método de desplazamiento de agua</em> (Arquímedes). Pesamos el objeto y medimos el volumen de agua que desplaza en la probeta. Densidad = masa ÷ volumen.',
'Tabla de resultados: los cinco materiales tienen errores menores del 2%. El cobre (0.11%), el hierro (0.32%) y el aluminio (0.44%) fueron los más precisos. <em>¡Experimento muy bien realizado!</em>',
'Resumen: ρ = m/V, el aceite flota sobre el agua, la flotación depende de comparar densidades, el experimento de desplazamiento de agua es fiable y los errores del grupo fueron menores del 2%.',
];
let cur=0,subOn=true,timer=null;
function goScene(n){
if(n<0)n=0;if(n>TOTAL)n=TOTAL;
document.querySelectorAll('.scene').forEach((s,i)=>s.classList.toggle('act',i===n));
cur=n;
document.getElementById('subTxt').innerHTML=subs[n];
document.getElementById('progF').style.width=(n/TOTAL*100)+'%';
document.getElementById('scnNum').textContent=n+' / '+TOTAL;
const btn=document.getElementById('btnPlay');
btn.textContent=n===0?'▶ Empezar':n===TOTAL?'↺ Reiniciar':'⏸ Pausar';
}
function play(){
if(cur===TOTAL){goScene(0);return;}
if(timer){clearInterval(timer);timer=null;document.getElementById('btnPlay').textContent='▶ Reanudar';return;}
if(cur===0)goScene(1);
timer=setInterval(()=>{if(cur>=TOTAL){clearInterval(timer);timer=null;return;}goScene(cur+1);},5500);
document.getElementById('btnPlay').textContent='⏸ Pausar';
}
function next(){clearInterval(timer);timer=null;goScene(cur+1);document.getElementById('btnPlay').textContent=cur<TOTAL?'▶ Reanudar':'↺ Reiniciar';}
function prev(){clearInterval(timer);timer=null;goScene(Math.max(0,cur-1));document.getElementById('btnPlay').textContent='▶ Reanudar';}
function toggleSub(){
subOn=!subOn;
document.getElementById('subBar').style.display=subOn?'flex':'none';
const t=document.getElementById('subToggle');
t.textContent=subOn?'CC Subtítulos':'CC Off';
t.classList.toggle('on',subOn);
}
</script><div id="goog-gt-tt" class="VIpgJd-yAWNEb-L7lbkb skiptranslate" style="border-radius: 12px; margin: 0 0 0 -23px; padding: 0; font-family: 'Google Sans', Arial, sans-serif;" data-id=""><div id="goog-gt-vt" class="VIpgJd-yAWNEb-hvhgNd"><div class="VIpgJd-yAWNEb-hvhgNd-Ud7fr"><img src="./Density Explained — Educational Animation · Almudena Isabel Santos · IES La Cabrera_files/24px.svg" width="24" height="24" alt=""><div class=" VIpgJd-yAWNEb-hvhgNd-IuizWc-i3jM8c " dir="ltr">Original text</div></div><div class="VIpgJd-yAWNEb-hvhgNd-k77Iif"><div id="goog-gt-original-text" class="VIpgJd-yAWNEb-nVMfcd-fmcmS VIpgJd-yAWNEb-hvhgNd-axAV1"></div></div><div class="VIpgJd-yAWNEb-hvhgNd-N7Eqid ltr"><div class="VIpgJd-yAWNEb-hvhgNd-N7Eqid-B7I4Od ltr" dir="ltr"><div class="VIpgJd-yAWNEb-hvhgNd-UTujCb">Rate this translation</div><div class="VIpgJd-yAWNEb-hvhgNd-eO9mKe">Your feedback will be used to help improve Google Translate</div></div><div class="VIpgJd-yAWNEb-hvhgNd-xgov5 ltr"><button id="goog-gt-thumbUpButton" type="button" class="VIpgJd-yAWNEb-hvhgNd-bgm6sf" title="Good translation" aria-label="Good translation" aria-pressed="false"><span id="goog-gt-thumbUpIcon"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" class="VIpgJd-yAWNEb-hvhgNd-THI6Vb NMm5M"><path d="M21 7h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 0S7.08 6.85 7 7H2v13h16c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73V9c0-1.1-.9-2-2-2zM7 18H4V9h3v9zm14-7l-3 7H9V8l4.34-4.34L12 9h9v2z"></path></svg></span><span id="goog-gt-thumbUpIconFilled"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" class="VIpgJd-yAWNEb-hvhgNd-THI6Vb NMm5M"><path d="M21 7h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 0S7.08 6.85 7 7v13h11c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73V9c0-1.1-.9-2-2-2zM5 7H1v13h4V7z"></path></svg></span></button><button id="goog-gt-thumbDownButton" type="button" class="VIpgJd-yAWNEb-hvhgNd-bgm6sf" title="Poor translation" aria-label="Poor translation" aria-pressed="false"><span id="goog-gt-thumbDownIcon"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" class="VIpgJd-yAWNEb-hvhgNd-THI6Vb NMm5M"><path d="M3 17h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 24s7.09-6.85 7.17-7h5V4H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2zM17 6h3v9h-3V6zM3 13l3-7h9v10l-4.34 4.34L12 15H3v-2z"></path></svg></span><span id="goog-gt-thumbDownIconFilled"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" class="VIpgJd-yAWNEb-hvhgNd-THI6Vb NMm5M"><path d="M3 17h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 24s7.09-6.85 7.17-7V4H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2zm16 0h4V4h-4v13z"></path></svg></span></button></div></div><div id="goog-gt-votingHiddenPane" class="VIpgJd-yAWNEb-hvhgNd-aXYTce"><form id="goog-gt-votingForm" action="file://translate.googleapis.com/translate_voting?client=te_lib" method="post" target="votingFrame" class="VIpgJd-yAWNEb-hvhgNd-aXYTce"><input type="text" name="sl" id="goog-gt-votingInputSrcLang"><input type="text" name="tl" id="goog-gt-votingInputTrgLang"><input type="text" name="query" id="goog-gt-votingInputSrcText"><input type="text" name="gtrans" id="goog-gt-votingInputTrgText"><input type="text" name="vote" id="goog-gt-votingInputVote"></form><iframe name="votingFrame" frameborder="0" src="./Density Explained — Educational Animation · Almudena Isabel Santos · IES La Cabrera_files/saved_resource.html"></iframe></div></div></div>
</body></html>