/* Ejemplo animado local: la interfaz dibujada no es un reproductor real. */
.lab-page .lab-animated-modes .lab-mode-card { padding: 16px; }
.lab-page .lab-animated-modes .lab-mode-heading { margin: 0 0 9px; }
.lab-page .lab-animated-modes .lab-mode-card > p:not(.demo-caption) { font-size: 15px; line-height: 1.5; margin-bottom: 14px; }
.demo-scene { position: relative; height: 220px; width: 100%; overflow: hidden; background: #efede6; border: 1px solid #1329511f; border-radius: 4px; margin-top: auto; }
.demo-immersive { background: #d9eae7; }
.demo-player { position: absolute; z-index: 2; top: 26px; left: 13%; width: 74%; height: 146px; background: #fffef9; border: 1.5px solid #132951; border-radius: 7px; box-shadow: 0 4px 0 #13295114; overflow: hidden; transition: width .8s ease, left .8s ease, top .8s ease, height .8s ease; }
.demo-video { height: calc(100% - 31px); padding: 18px 18px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; background: #e5e6f0; color: #132951; }
.demo-video-kicker { font-size: 10px; letter-spacing: .12em; font-weight: 650; }
.demo-video strong { font: 500 24px/1.1 "Fraunces", Georgia, serif; margin-top: 5px; white-space: nowrap; }
.demo-highlight { display: block; height: 3px; width: 0; margin-top: 7px; border-radius: 4px; background: #dc7d61; transition: width 1.2s ease; }
.demo-player-foot { height: 31px; display: flex; align-items: center; gap: 9px; padding: 0 11px; }
.demo-play-symbol { width: 0; height: 0; border-block: 5px solid transparent; border-left: 7px solid #132951; flex-shrink: 0; }
.demo-track { flex: 1; height: 3px; background: #d1dbdf; overflow: hidden; }
.demo-track i { display: block; width: 12%; height: 100%; background: #245fe2; transition: width 3.4s linear; }
.demo-time { font-size: 9px; color: #455570; white-space: nowrap; }
.demo-lessons { position: absolute; bottom: 12px; inset-inline: 15%; display: flex; justify-content: center; gap: 6px; }
.demo-lessons > span { font-size: 11px; color: #455570; padding: 4px 8px; border: 1px solid #bac7cb; border-radius: 3px; background: #fffef9; white-space: nowrap; }
.demo-lessons .demo-lesson-one { background: #132951; color: #fffef9; border-color: #132951; }
.demo-source { position: absolute; z-index: 3; left: 15%; bottom: 36px; width: 70%; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid #789c9c; border-radius: 4px; background: #fffef9; opacity: 0; transform: translateY(7px); transition: opacity .55s ease, transform .55s ease; }
.demo-source > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.demo-source small { font-size: 9px; letter-spacing: .05em; color: #455570; }
.demo-source b { font-size: 12px; line-height: 1.3; }
.demo-source-lines { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 25px; height: 30px; padding: 6px; border: 1px solid #278c88; background: #fffef9; flex-shrink: 0; }
.demo-source-lines i { display: block; height: 1px; background: #278c88; width: 100%; }
.demo-network { position: absolute; z-index: 1; inset: 0; opacity: 0; transform: scale(.95); transition: opacity .7s ease, transform .8s ease; }
.demo-lines { width: 100%; height: 100%; position: absolute; inset: 0; overflow: visible; }
.demo-lines path { fill: none; stroke: #5e9999; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.demo-node { position: absolute; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translate(-50%,-50%); }
.demo-node > span { width: 34px; height: 34px; display: flex; justify-content: center; align-items: center; border: 1.5px solid #132951; border-radius: 50%; background: #fffef9; color: #132951; font-size: 13px; font-weight: 650; }
.demo-node b { font-size: 10px; font-weight: 500; line-height: 1.2; background: #d9eae7; padding: 1px 4px; }
.demo-node-concept { left: 58%; top: 22%; }
.demo-node-image { left: 86%; top: 52%; }
.demo-node-source { left: 58%; top: 82%; }
.demo-node-concept > span { background: #eadff0; }
.demo-node-image > span { background: #f2d6b3; }
.demo-node-image i { width: 18px; height: 13px; background: #558f8c; clip-path: polygon(0 100%,40% 20%,62% 62%,82% 42%,100% 100%); }
.demo-node-source .demo-source-lines { display: flex; align-items: stretch; border-radius: 3px; width: 27px; height: 32px; }
.demo-detail { position: absolute; z-index: 4; top: 30px; right: 3%; width: 54%; height: 166px; display: flex; flex-direction: column; gap: 6px; padding: 12px; background: #fffef9; border: 1px solid #132951; border-radius: 4px; opacity: 0; transform: translateY(8px); transition: opacity .65s ease, transform .65s ease; box-shadow: 0 4px 0 #13295114; }
.demo-detail-label { font-size: 9px; color: #455570; letter-spacing: .04em; }
.demo-landscape { height: 55px; flex-shrink: 0; overflow: hidden; background: #e4ddec; position: relative; }
.demo-landscape i { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #df927b; top: 7px; right: 22%; }
.demo-landscape b { position: absolute; bottom: 0; width: 100%; height: 40px; background: #548783; clip-path: polygon(0 100%, 26% 15%, 48% 74%, 72% 36%, 100% 100%); }
.demo-detail > strong { font-size: 12px; line-height: 1.3; }
.demo-detail > span:last-child { font-size: 11px; line-height: 1.35; }
.demo-return-label { position: absolute; bottom: 14px; width: 100%; text-align: center; color: #276a66; font-size: 11px; opacity: 0; transition: opacity .6s; }
.lab-page .lab-mode-card > .demo-caption { margin: 12px 0 0; min-height: 44px; font-size: 15px; font-weight: 550; line-height: 1.4; color: #132951; }
[data-stage="1"] .demo-highlight, [data-stage="2"] .demo-highlight { width: 85px; }
[data-stage="1"] .demo-track i { width: 40%; }
[data-stage="2"] .demo-track i { width: 62%; }
[data-stage="3"] .demo-track i { width: 92%; }
[data-stage="2"] .demo-basic .demo-source, [data-stage="overview"] .demo-basic .demo-source { opacity: 1; transform: none; }
[data-stage="3"] .demo-basic .demo-lesson-one { background: #fffef9; color: #455570; border-color: #bac7cb; }
[data-stage="3"] .demo-basic .demo-lesson-two { background: #132951; color: #fffef9; border-color: #132951; }
[data-stage="1"] .demo-immersive .demo-player,
[data-stage="2"] .demo-immersive .demo-player,
[data-stage="overview"] .demo-immersive .demo-player { width: 36%; left: 4%; top: 65px; height: 100px; }
[data-stage="1"] .demo-immersive .demo-video,
[data-stage="2"] .demo-immersive .demo-video,
[data-stage="overview"] .demo-immersive .demo-video { padding: 8px; }
[data-stage="1"] .demo-immersive .demo-video strong,
[data-stage="2"] .demo-immersive .demo-video strong,
[data-stage="overview"] .demo-immersive .demo-video strong { font-size: 18px; }
[data-stage="1"] .demo-immersive .demo-time,
[data-stage="2"] .demo-immersive .demo-time,
[data-stage="overview"] .demo-immersive .demo-time { display: none; }
[data-stage="1"] .demo-network, [data-stage="2"] .demo-network, [data-stage="overview"] .demo-network { opacity: 1; transform: none; }
[data-stage="2"] .demo-detail { opacity: 1; transform: none; }
[data-stage="3"] .demo-return-label { opacity: 1; }
.lab-page .demo-toolbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 16px; }
.lab-page .demo-toolbar[hidden], .lab-page [data-demo-play][hidden] { display: none; }
.lab-page .demo-toolbar button { font: 500 13px/1.3 "DM Sans", sans-serif; min-height: 44px; cursor: pointer; border: 1px solid #aebbbd; border-radius: 4px; padding: 8px 12px; background: transparent; color: #132951; }
.lab-page .demo-toolbar .demo-play-control { background: #132951; border-color: #132951; color: #fffef9; min-width: 112px; font-weight: 650; }
.demo-moments { display: flex; gap: 5px; flex-wrap: wrap; }
.lab-page .demo-moments button { border-color: transparent; }
.lab-page .demo-moments button[aria-pressed="true"] { border-color: #7faca8; background: #e5f2ef; }
.demo-moments button span { font-size: 11px; opacity: .7; margin-right: 3px; }
.lab-page .demo-toolbar button:focus-visible { outline: 3px solid #245fe2; outline-offset: 3px; }
.lab-page .demo-toolbar button:hover { box-shadow: inset 0 0 0 1px currentColor; }
.lab-page .demo-footnote { text-align: center; margin: 10px auto 0; max-width: 90ch; color: #455570; font-size: 12px; line-height: 1.5; }
.demo-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lab-page .lab-animated-modes .lab-mode-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 760px) {
  .lab-page .lab-animated-modes .lab-mode-grid { grid-template-columns: 1fr; }
  .lab-page .lab-animated-modes .lab-mode-card { padding: 14px; }
  .lab-page .lab-mode-card > .demo-caption { min-height: 0; }
  .lab-page .demo-toolbar { gap: 8px; }
  .demo-moments { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lab-page .demo-toolbar button { font-size: 12px; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-animated-modes *, .lab-animated-modes *::before, .lab-animated-modes *::after { transition: none !important; animation: none !important; }
}
@media (max-width: 500px) {
  .demo-detail { height: auto; min-height: 145px; padding: 10px; }
  .demo-detail > span:last-child { display: none; }
}