/* Entrada al modo examen · común a las herramientas
   Copiado del Writing Assistant (writing.css), que la estrenó: si se toca
   aquí, conviene tocarlo allí igual, o pasar el Writing a usar este archivo. */
/* ─── Entrada al modo examen ───
   Tres segundos: la capa aparece (250 ms), el texto sube (400 ms), y los dos
   cruzan la pantalla con el científico detrás. Lo que se mueve es solo
   transform y opacity. La carrera es lineal porque es movimiento constante;
   aparecer y desaparecer, con salida fuerte. */
.ex-intro { --ex-sale:cubic-bezier(0.23, 1, 0.32, 1);
  position:fixed; inset:0; z-index:1000; background:#111827; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5vh;
  overflow:hidden; cursor:pointer; opacity:0; animation:exAparece .25s var(--ex-sale) forwards; }
.ex-intro.sale { animation:exDesaparece .3s var(--ex-sale) forwards; pointer-events:none; }
@keyframes exAparece { to { opacity:1; } }
@keyframes exDesaparece { from { opacity:1; } to { opacity:0; } }

.ex-txt { text-align:center; padding:0 24px; opacity:0; transform:translateY(8px); animation:exTexto .4s var(--ex-sale) .2s forwards; }
@keyframes exTexto { to { opacity:1; transform:none; } }
.ex-txt small { display:block; text-transform:uppercase; letter-spacing:.22em; font-size:.76rem; font-weight:800; color:#9ca3af; }
.ex-txt h2 { color:#fff; font-size:clamp(1.7rem, 4.6vw, 3.1rem); letter-spacing:-.03em; margin:12px 0 8px; }
.ex-txt p { color:#d1d5db; font-size:1rem; }
.ex-saltar { position:absolute; bottom:22px; left:0; right:0; text-align:center; font-size:.78rem; color:#6b7280; }

.ex-pista { position:relative; width:100%; height:min(46vh, 430px); border-bottom:2px solid rgba(255,255,255,.12); }
.ex-corre { position:absolute; left:0; bottom:0; height:100%; animation:exCruza 2.3s linear both; }
.ex-corre svg { height:100%; width:auto; display:block; overflow:visible; transform-origin:50% 100%; animation:exBote .16s ease-in-out infinite alternate; }
/* Van delante los dos; él, un poco más grande y medio segundo detrás. */
.ex-corre--chica { animation-delay:.15s; }
.ex-corre--chico { animation-delay:.3s; }
.ex-corre--cientifico { animation-delay:.55s; height:104%; }
@keyframes exCruza { from { transform:translateX(-30vw); } to { transform:translateX(112vw); } }
@keyframes exBote { from { transform:translateY(0) rotate(7deg); } to { transform:translateY(-3%) rotate(7deg); } }

/* Zancadas y braceo: cada pierna y cada brazo, a contratiempo de su pareja. */
.ex-corre .pn-pierna, .ex-corre .rn-pierna { transform-box:fill-box; transform-origin:50% 0; animation:exZancada .32s ease-in-out infinite alternate; }
.ex-corre .pn-pierna--b, .ex-corre .rn-pierna--b { animation-delay:-.32s; }
@keyframes exZancada { from { transform:rotate(30deg); } to { transform:rotate(-30deg); } }
.ex-corre .pn-brazo { transform-box:fill-box; transform-origin:50% 6%; animation:exBrazo .32s ease-in-out infinite alternate; }
.ex-corre .pn-saluda { animation-delay:-.32s; }
@keyframes exBrazo { from { transform:rotate(-34deg); } to { transform:rotate(34deg); } }
/* Él va blandiendo la brocha. */
.ex-corre .ci-brazo--d { transform-box:fill-box; transform-origin:0% 100%; animation:exBrocha .2s ease-in-out infinite alternate; }
.ex-corre .ci-brazo--i { transform-box:fill-box; transform-origin:100% 0%; animation:exBrazo .32s ease-in-out infinite alternate; }
@keyframes exBrocha { from { transform:rotate(-12deg); } to { transform:rotate(10deg); } }

@media (max-width:640px) {
  .ex-pista { height:34vh; }
  .ex-intro { gap:4vh; }
}
/* Menos movimiento: sin carrera. Queda el texto y un fundido. */
@media (prefers-reduced-motion: reduce) {
  .ex-pista { display:none; }
  .ex-txt { transform:none; animation:exAparece .2s ease .1s forwards; }
}