/* Aula Ideal · motion direction inspired by the supplied Motion Library. */
:root{--lab-deep:#061625;--lab-navy:#092537;--lab-cyan:#73d8df;--lab-amber:#f3bd7a}
.sr-only{position:absolute!important;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
.hero{isolation:isolate}.hero-constellation{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.52}
.hero-background{transform:translateZ(0)}
.hero-side-index{z-index:3}
.kinetic-section{position:relative;height:245vh;background:#071725;color:#f7fafb;isolation:isolate}
.kinetic-section:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 83% 35%,#0b526044,transparent 55%),linear-gradient(110deg,#061522,#0b2535)}
.kinetic-pin{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.kinetic-pin:after{content:"";position:absolute;width:63vw;aspect-ratio:1;border:1px solid #68d5e42d;border-radius:50%;right:-29vw;top:-24vw;box-shadow:0 0 0 75px #70dded08,0 0 0 175px #70dded06;pointer-events:none}
.kinetic-inner{position:relative;z-index:1;padding-block:clamp(80px,16vh,160px)}
.kinetic-statement{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:clamp(2.25rem,5.45vw,6.8rem);line-height:1.22;max-width:1100px;font-weight:630;letter-spacing:-.057em;margin:clamp(24px,4vw,55px) 0 70px}
.kinetic-statement>span,.kinetic-statement>em{color:#c6d1d74a;transition:color .28s ease;text-wrap:pretty}
.kinetic-statement>em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.045em}
.kinetic-statement>.is-lit{color:#f4fbff}.kinetic-statement>em.is-lit{color:var(--lab-amber)}
.kinetic-footer{display:flex;gap:24px;align-items:center;max-width:900px;font-size:10px;letter-spacing:.21em;font-weight:720;color:#b8d3e4}
.kinetic-footer>span:first-child{white-space:nowrap}.kinetic-bar{height:2px;background:#ffffff25;flex:1;overflow:hidden}.kinetic-bar i{display:block;height:100%;width:0;background:var(--lab-amber);box-shadow:0 0 18px var(--lab-amber)}
.compare-section{background:linear-gradient(180deg,#ecefed,#f9f9f7);padding-block:clamp(74px,10vw,154px)}
.compare-layout{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1.35fr);gap:clamp(30px,5vw,80px);align-items:center}
.compare-copy>p:not(.eyebrow){font-size:clamp(15px,1.5vw,20px);line-height:1.8;color:#5a6974;max-width:36ch;margin:27px 0}
.compare-copy small{display:block;color:#74838d;font-size:11px;line-height:1.6;margin-top:34px}
.compare-meta{display:flex;gap:10px;flex-wrap:wrap}.compare-meta span{padding:10px 14px;border:1px solid #ccd6dc;border-radius:90px;color:#264151;font-size:12px;font-weight:750}
.compare-stage{--split:50%;aspect-ratio:1.55;position:relative;overflow:hidden;border-radius:20px;box-shadow:0 38px 90px -45px #05243b66;background:#0f3042;isolation:isolate;touch-action:pan-y}
.compare-after,.compare-before img{height:100%;width:100%;object-fit:cover;object-position:center;display:block}
.compare-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.compare-before img{filter:saturate(.7) contrast(1.03)}
.compare-stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#071d3492,transparent 32%)}
.compare-divider{position:absolute;top:0;bottom:0;left:var(--split);z-index:3;width:2px;background:#fff;box-shadow:0 0 22px #fffc;transform:translateX(-50%);pointer-events:none}
.compare-divider div{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#f5f4f0;border:3px solid #ffffffa8;color:#0b2637;border-radius:50%;display:grid;place-items:center;width:55px;height:55px;font-size:19px;box-shadow:0 10px 28px #001c2b66}
.compare-label{position:absolute;bottom:24px;z-index:4;font-size:10px;letter-spacing:.16em;font-weight:850;color:#fff;text-shadow:0 1px 4px #0008;pointer-events:none}.label-before{left:22px}.label-after{right:22px}
#compareSlider{position:absolute;inset:0;z-index:6;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
#compareSlider:focus-visible{opacity:.18;outline:4px solid var(--lab-amber);outline-offset:-4px}
.live-lab{position:relative;isolation:isolate;background:#081b2c;padding-block:clamp(90px,11vw,156px);color:#f5fafc;overflow:hidden}
.lab-backdrop{position:absolute;inset:0;background:radial-gradient(55% 47% at 83% 25%,#1d5e6a4c,transparent 68%),radial-gradient(30% 40% at 4% 80%,#d37b4040,transparent 75%),linear-gradient(120deg,#071a2a,#09283a)}
.lab-backdrop:after{content:"";position:absolute;inset:0;opacity:.11;background-image:linear-gradient(90deg,#c9faff 1px,transparent 1px),linear-gradient(#c9faff 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to right,transparent,black 30%,black 70%,transparent)}
.live-lab>.container{position:relative;z-index:1}.lab-heading{margin-bottom:40px}.lab-shell{border:1px solid #ffffff28;border-radius:22px;background:#081727ee;box-shadow:0 40px 120px #0006;overflow:hidden}
.lab-top{padding:17px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#102d3d;border-bottom:1px solid #ffffff20;font-size:9px;font-weight:730;letter-spacing:.19em;color:#d1f0f2}.lab-top>span:last-child{color:#96b4c0}
.lab-live-dot{display:inline-block;width:7px;height:7px;background:#7fded0;border-radius:50%;margin-right:10px;box-shadow:0 0 0 5px #7fded017,0 0 15px #7fded0}
.lab-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #ffffff22}.lab-tab{appearance:none;border:0;border-right:1px solid #ffffff1e;background:transparent;color:#a7bac5;min-height:64px;text-align:left;padding:20px 26px;cursor:pointer;position:relative;font-size:15px;font-weight:720;transition:background .25s,color .25s}.lab-tab b{color:var(--lab-amber);font-size:11px;letter-spacing:.1em;margin-right:16px}.lab-tab:hover{background:#ffffff0b;color:#fff}.lab-tab.is-active{background:#ffffff0d;color:#fff}.lab-tab.is-active:after{content:"";position:absolute;height:3px;background:var(--lab-amber);left:0;right:0;bottom:0}
.lab-panel{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.65fr);min-height:495px}.lab-panel[hidden]{display:none!important}
.lab-scene{position:relative;isolation:isolate;min-height:490px;overflow:hidden;background-color:#122936}
.lab-side{padding:clamp(28px,4vw,58px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;border-left:1px solid #ffffff1f;background:linear-gradient(135deg,#122c3b,#0b2331)}
.lab-overline{color:var(--lab-amber);font-size:10px;letter-spacing:.23em;font-weight:820}.lab-side h3{font-size:clamp(28px,2.9vw,45px);line-height:1.06;letter-spacing:-.055em;margin:20px 0 16px;font-weight:760}.lab-side p{font-size:14px;color:#abc7d3;line-height:1.75;margin:0}.lab-side p strong{color:#fff}.lab-side .lab-status{font-size:12px;color:#efc693;font-weight:770;min-height:40px;margin-top:20px}
.lab-reset{border:1px solid #e6ba7659;border-radius:999px;background:transparent;color:#f6d6a0;padding:10px 16px;cursor:pointer;font-weight:750;font-size:11px;letter-spacing:.04em}.lab-reset:hover{background:#f6d6a01b}
.mars-scene{background:radial-gradient(circle at 65% 20%,#a46248bb,transparent 40%),linear-gradient(30deg,#4f231e,#1d151e 70%);overflow:hidden}
.mars-scene:before{content:"";position:absolute;inset:0;background-image:url('../img/marte-planeta.webp');background-position:center;background-size:cover;opacity:.28;filter:blur(1px)}
.mars-grid{position:absolute;inset:11% 13%;background:linear-gradient(90deg,#ffffff17 1px,transparent 1px),linear-gradient(#ffffff17 1px,transparent 1px);background-size:16.666% 16.666%;border:1px solid #ffffff43;transform:perspective(900px) rotateX(8deg);box-shadow:0 0 90px #f5a46325;z-index:1}
.mars-orbit{position:absolute;inset:13% 15%;border:1px dashed #d8a37577;z-index:1;pointer-events:none}
.mars-goal{position:absolute;left:68.3%;top:30.1%;z-index:3;border:2px solid #f7dc9f;width:35px;height:35px;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 13px #f8dca513,0 0 30px #f8dca563;animation:goalPulse 2s ease-in-out infinite}.mars-goal span{position:absolute;bottom:43px;left:50%;transform:translateX(-50%);font-size:9px;white-space:nowrap;letter-spacing:.22em;color:#fbdba4}
@keyframes goalPulse{50%{box-shadow:0 0 0 23px #f8dca500,0 0 38px #f8dca597}}
.mars-rover{position:absolute;width:75px;height:75px;left:25%;top:69%;transform:translate(-50%,-50%) rotate(-90deg);z-index:5;transition:left .32s cubic-bezier(.2,.7,.3,1),top .32s cubic-bezier(.2,.7,.3,1),transform .32s;filter:drop-shadow(0 6px 10px #000b)}
.mars-rover svg{width:100%;height:100%;stroke:#fff6d1;fill:#bc946d;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.mars-rover svg rect:nth-child(2){fill:#f5c47b}
.mars-coords{position:absolute;left:25px;bottom:25px;z-index:5;font:700 11px ui-monospace,monospace;color:#f5dcbd;letter-spacing:.12em}
.rover-pad{display:grid;grid-template-columns:repeat(3,47px);grid-template-rows:repeat(2,47px);gap:6px;margin-top:24px}.rover-pad button{background:#ffffff14;border:1px solid #ffffff38;color:#fff;border-radius:10px;font-size:22px;cursor:pointer;transition:background .2s,transform .2s}.rover-pad button:hover{background:#f4bf8651;transform:translateY(-2px)}.rover-pad button:nth-child(1){grid-column:2;grid-row:1}.rover-pad button:nth-child(2){grid-column:1;grid-row:2}.rover-pad button:nth-child(3){grid-column:2;grid-row:2}.rover-pad button:nth-child(4){grid-column:3;grid-row:2}
.micro-scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.12)}.micro-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#061927a1,transparent 28%);pointer-events:none}
.micro-lens{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(200px,36%);aspect-ratio:1;border-radius:50%;background-image:url('../img/actividad-micromundos.webp');background-size:200% auto;background-position:center;box-shadow:0 15px 50px #0007,inset 0 0 0 5px #d6f1ffb8,inset 0 0 0 8px #061725cc,0 0 0 1px #ffffffcc;pointer-events:none;z-index:2;will-change:left,top,background-position}
.micro-hint{position:absolute;bottom:24px;left:25px;z-index:3;color:#e5faff;font-size:10px;font-weight:780;letter-spacing:.16em}
.micro-zoom{display:flex;gap:8px;margin-top:30px}.micro-zoom button{border:1px solid #ffffff5a;background:#ffffff12;color:#fff;padding:14px 22px;border-radius:12px;font-size:15px;font-weight:800;cursor:pointer}.micro-zoom button.is-active{background:#f5c78f;color:#0c2030;border-color:#f5c78f}.lab-side .lab-footnote{font-size:10px;opacity:.65}
.escape-scene{background:radial-gradient(ellipse at center,#13546b,#081825 74%)}.escape-scene:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#8fd0ff17 1px,transparent 1px),linear-gradient(#8fd0ff17 1px,transparent 1px);background-size:42px 42px;transform:perspective(400px) rotateX(52deg) translateY(120px) scale(1.6);mask-image:linear-gradient(to top,#000,transparent 85%)}
.escape-vault{position:absolute;inset:0;display:grid;place-items:center}.vault-frame{width:220px;height:230px;border:2px solid #92d9ed9c;border-radius:21px;background:linear-gradient(145deg,#102f44,#071b2a);box-shadow:0 20px 75px #0008,0 0 0 10px #8de0e00d,inset 0 0 48px #19b3e926;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;transition:border-color .3s,transform .4s}.vault-frame svg{width:80px;height:80px;fill:none;stroke:#eab876;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 12px #f3a957aa)}.vault-frame span{font:800 28px ui-monospace,monospace;letter-spacing:.25em;color:#fff}.escape-vault.is-unlocked .vault-frame{border-color:#74e2c2;transform:rotateY(7deg)}.escape-vault.is-unlocked svg{stroke:#74e2c2}.escape-caption{position:absolute;bottom:25px;left:25px;color:#a0d5e1;font-size:10px;letter-spacing:.18em}
.escape-keypad{display:grid;grid-template-columns:repeat(3,48px);gap:7px;margin-top:21px}.escape-keypad button{background:#ffffff12;color:white;border:1px solid #ffffff42;border-radius:9px;height:43px;cursor:pointer;font-weight:800;font-size:15px}.escape-keypad button:hover{background:#f0bb8051}.escape-keypad button[data-key=enter]{background:#eabd7d;color:#102436}
.lab-disclaimer{color:#a5bfc8;font-size:11px;line-height:1.7;margin-top:19px}
@media(max-width:980px){.compare-layout{grid-template-columns:1fr}.compare-copy>p:not(.eyebrow){max-width:60ch}.lab-panel{grid-template-columns:1fr}.lab-scene{min-height:410px}.lab-side{border-left:0;border-top:1px solid #ffffff28}.lab-side h3{max-width:480px}.lab-side p{max-width:600px}}
@media(max-width:700px){.kinetic-section{height:165vh}.kinetic-statement{font-size:clamp(30px,7.1vw,54px);line-height:1.25}.kinetic-footer{font-size:8px;flex-wrap:wrap}.kinetic-footer>span:first-child{width:100%}.compare-stage{aspect-ratio:1.05}.compare-label{font-size:8px;bottom:15px}.compare-divider div{width:45px;height:45px}.lab-top{padding:14px 18px}.lab-top>span:last-child{display:none}.lab-tab{padding:15px 13px;min-height:58px;font-size:12px}.lab-tab b{margin-right:4px}.lab-scene{min-height:345px}.lab-side{padding:26px}.mars-rover{width:57px;height:57px}.vault-frame{width:165px;height:185px}.lab-shell{border-radius:14px}}
@media(prefers-reduced-motion:reduce){.kinetic-statement>span,.kinetic-statement>em{color:#fff!important}.kinetic-statement>em{color:#f4c38f!important}.kinetic-section{height:auto;min-height:65vh}.kinetic-pin{position:relative;min-height:65vh}.lab-scene .mars-goal{animation:none}.mars-rover{transition:none}.hero-constellation{display:none}}

/* Keep fixed navigation from obscuring anchored chapter headings. */
section[id]{scroll-margin-top:86px}
.compare-before img{object-position:left center}