/* Diseño unificado: identidad oscura. Fuente única compilada conservando las reglas vigentes. */

/* --- style.css --- */
:root{--bg:#f7f9fc;--surface:#fff;--ink:#142033;--muted:#56647a;--line:#dfe6ee;--brand:#79dfd3;--accent:#2864d9;--accent-soft:#eef4ff;--green:#087f64;--red:#b43f48;--navy:#0e1726;--navy2:#172437;--radius:16px;--shadow:0 12px 40px rgba(18,38,71,.065);color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:104px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a,input,textarea,select{outline-offset:3px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent)}button{cursor:pointer}img{max-width:100%}pre,code,textarea.code-input{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace}code{font-size:.92em;background:#eaf0f7;padding:.12em .35em;border-radius:5px}pre code,.dark code{background:transparent;padding:0}.skip{position:absolute;left:16px;top:-100px;z-index:1000;background:var(--brand);padding:10px 18px}.skip:focus{top:12px}.container{width:min(1160px,calc(100% - 48px));margin-inline:auto}.narrow{width:min(770px,calc(100% - 48px));margin-inline:auto}.page-pad{padding:74px 0 108px}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:#4b5d78}.eyebrow:before{content:"";background:#79dfd3;width:18px;height:6px;border-radius:8px}h1,h2,h3,h4{letter-spacing:-.038em;line-height:1.15;margin:0;font-weight:800}h1{font-size:clamp(2.6rem,5.5vw,5rem)}h2{font-size:clamp(1.8rem,3.1vw,2.9rem)}h3{font-size:1.26rem}p{margin:0 0 1.05em}.lead{font-size:clamp(1.05rem,1.55vw,1.28rem);line-height:1.67;color:var(--muted)}.muted{color:var(--muted)}.small{font-size:.87rem}.caps{text-transform:uppercase;font-size:.74rem;letter-spacing:.1em;font-weight:800;color:var(--muted)}.accent-highlight{background:linear-gradient(transparent 66%,rgba(121,223,211,.25) 0)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;border:1px solid transparent;border-radius:11px;padding:11px 20px;font-weight:800;font-size:.94rem;line-height:1.3;transition:transform .15s,background .15s,border-color .15s}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--brand);color:#162032;box-shadow:0 6px 0 rgba(20,32,51,.08)}.btn-primary:hover{background:#a5f1e7}.btn-outline{background:var(--surface);border-color:#ccd6e1;color:var(--ink)}.btn-blue{background:var(--accent);color:#fff}.btn-dark{background:var(--navy);color:white}.btn-quiet{background:transparent;border-color:var(--line)}.btn-sm{min-height:37px;padding:7px 12px;font-size:.81rem;border-radius:9px}.link{color:#175ac9;text-decoration:underline;text-underline-offset:3px}.link:hover{text-decoration-thickness:2px}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.site-header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.header-inner{min-height:78px;display:flex;align-items:center;gap:25px;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;flex-shrink:0;font-size:1.12rem;font-weight:900;letter-spacing:-.045em}.brand-icon{width:38px;height:38px;border-radius:10px;background:var(--brand);display:grid;place-items:center;color:#182235;font:bold 15px ui-monospace,monospace;letter-spacing:-.11em;transform:rotate(-4deg)}.brand-icon span{transform:rotate(4deg)}.brand .js{color:#87dfd5}.site-nav{display:flex;align-items:center;gap:3px}.site-nav a{font-weight:700;font-size:.87rem;color:#45536a;padding:9px 12px;border-radius:9px}.site-nav a:hover,.site-nav a[aria-current="page"]{color:#152032;background:#eef2f7}.header-actions{display:flex;gap:10px;align-items:center}.icon-btn{border:1px solid var(--line);width:42px;height:42px;background:white;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}.menu-btn{display:none}.mobile-nav{display:none}.icon{width:19px;height:19px;flex:none;display:inline-block}.hero{position:relative;padding:95px 0 85px;overflow:hidden;background:radial-gradient(ellipse at 76% 30%,#fefce0 0,transparent 44%),linear-gradient(#fff,#f7f9fc)}.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:60px}.hero h1{margin:19px 0 26px;max-width:700px}.hero .lead{max-width:575px}.hero-proof{display:flex;gap:12px 20px;flex-wrap:wrap;font-size:.88rem;font-weight:600;color:var(--muted);margin-top:26px}.hero-proof span:before{content:"✓";color:var(--green);font-weight:900;margin-right:6px}.hero .actions{margin-top:28px}.demo-shell{background:#111a2b;border:1px solid #344153;border-radius:20px;box-shadow:0 30px 85px rgba(22,38,64,.22);overflow:hidden;transform:rotate(1deg)}.window-top{display:flex;align-items:center;gap:6px;background:#182437;border-bottom:1px solid #2f4159;padding:14px 18px}.dot{width:9px;height:9px;background:#fc6767;border-radius:50%}.dot:nth-child(2){background:#f0c453}.dot:nth-child(3){background:#65bd89}.window-title{color:#b5c2d2;margin:auto;font:600 .75rem ui-monospace,monospace;transform:translateX(-15px)}.hero-code{padding:24px 27px;color:#dbeaf7;font:500 .88rem/1.8 ui-monospace,monospace;white-space:pre-wrap}.syntax-key{color:#eaa4ff}.syntax-str{color:#f8df83}.syntax-call{color:#99ccff}.hero-demo-bottom{background:#fff;color:var(--ink);padding:24px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #dce5ee}.demo-number{font-size:2.15rem;letter-spacing:-.04em;font-weight:900;line-height:1}.demo-number small{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:4px}.mini-circle{font-weight:800;width:56px;height:56px;background:var(--brand);border:0;border-radius:13px;font-size:1.5rem}.mini-circle:hover{background:#ffe74b}.section{padding:94px 0}.section-white{background:white}.section-dark{background:var(--navy);color:#f1f6ff}.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:38px}.section-head p{max-width:600px;color:var(--muted);margin:16px 0 0}.section-dark .section-head p{color:#b9c8db}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.feature{padding:30px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 2px 0 rgba(0,0,0,.008)}.feature-number{display:inline-flex;justify-content:center;align-items:center;background:#fff6bc;color:#514300;border-radius:11px;width:42px;height:42px;font-weight:900;margin-bottom:21px}.feature h3{margin-bottom:10px}.feature p{color:var(--muted);font-size:.93rem;margin:0}.link-card{display:flex;flex-direction:column;min-height:205px;padding:26px;border:1px solid var(--line);background:white;border-radius:var(--radius);transition:transform .15s,border-color .15s,box-shadow .15s}.link-card:hover{transform:translateY(-4px);border-color:#96b7eb;box-shadow:var(--shadow)}.link-card small{font-weight:900;color:#987800;letter-spacing:.08em;font-size:.72rem;text-transform:uppercase}.link-card h3{margin:12px 0 10px}.link-card p{margin:0;color:var(--muted);font-size:.9rem}.link-card .arrow{margin-top:auto;padding-top:17px;color:var(--accent);font-weight:800}.numbers-row{display:flex;gap:45px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:29px;margin-top:42px}.stat strong{display:block;font-size:2.5rem;letter-spacing:-.05em;line-height:1.1}.stat span{font-size:.9rem;color:var(--muted)}.modules-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.module-link{background:#19283c;border:1px solid #304259;color:#ecf3fa;display:flex;align-items:center;gap:19px;padding:20px;border-radius:14px;transition:background .15s,border-color .15s}.module-link:hover{background:#213550;border-color:#72839e}.module-index{display:grid;place-items:center;min-width:47px;height:47px;background:#263a53;border-radius:11px;font-size:.86rem;font-weight:900;color:var(--brand)}.module-link strong{display:block;font-size:1rem;line-height:1.3}.module-link small{color:#b4c2d5}.module-link .end{margin-left:auto;color:var(--brand)}.project-card{background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}.project-art{height:157px;padding:25px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.art-quiz{background:#edeaff}.art-tasks{background:#dff9ee}.art-catalog{background:#fff2cd}.art-api{background:#e3f1ff}.art-inner{background:white;border:1px solid rgba(30,55,90,.12);border-radius:12px;padding:18px 22px;min-width:63%;box-shadow:0 12px 28px rgba(0,0,0,.09);text-align:center;font-weight:800}.art-inner span{display:block;font-size:.72rem;color:var(--muted)}.project-body{padding:22px;display:flex;flex:1;flex-direction:column}.project-body p{color:var(--muted);font-size:.9rem;margin:10px 0 14px}.project-body .link{margin-top:auto;font-weight:800}.promo{background:var(--brand);border-radius:22px;padding:54px;display:flex;align-items:center;justify-content:space-between;gap:40px}.promo h2{max-width:620px}.promo p{margin:14px 0 0}.site-footer{background:#0e1726;color:#d4dfed;padding:70px 0 30px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:45px}.site-footer a{color:#c7d5e5}.site-footer a:hover{color:var(--brand);text-decoration:underline}.site-footer h4{font-size:.8rem;text-transform:uppercase;color:#95a7c0;letter-spacing:.1em;margin-bottom:16px}.site-footer ul{list-style:none;margin:0;padding:0}.site-footer li{margin-bottom:10px;font-size:.9rem}.footer-bottom{border-top:1px solid #344258;display:flex;justify-content:space-between;flex-wrap:wrap;gap:15px;margin-top:46px;padding-top:22px;font-size:.82rem;color:#9cacc1}.footer-brand{color:white}.footer-brand .brand-icon{width:34px;height:34px}.footer-desc{font-size:.91rem;color:#adbed2;max-width:330px;margin:18px 0}.page-hero{background:#fff;border-bottom:1px solid var(--line);padding:66px 0 55px}.page-hero h1{font-size:clamp(2.3rem,4vw,3.75rem);margin:17px 0 18px;max-width:910px}.page-hero .lead{max-width:740px}.crumb{font-size:.81rem;color:var(--muted);margin-bottom:17px;display:flex;flex-wrap:wrap;gap:9px;align-items:center}.crumb a{text-decoration:underline;text-underline-offset:2px}.pill{display:inline-flex;align-items:center;border:1px solid #d4e0eb;border-radius:99px;padding:4px 10px;font-size:.74rem;font-weight:800;color:#43546d;background:#fff;white-space:nowrap}.pill.optional{background:#eafbf8;border-color:#f0e4a4;color:#635008}.pill.green{background:#e1f6ed;border-color:#aadac7;color:#0c725c}.pill.blue{background:#eaf3ff;border-color:#bcd4fa;color:#2158a7}.lesson-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:57px;align-items:start}.lesson-side{position:sticky;top:103px;max-height:calc(100dvh - 125px);overflow:auto;padding:21px;border:1px solid var(--line);background:white;border-radius:14px}.side-title{font-size:.76rem;letter-spacing:.08em;font-weight:900;text-transform:uppercase;color:var(--muted);margin-bottom:15px}.side-links{display:flex;flex-direction:column;gap:2px}.side-links a{padding:9px 11px;font-size:.83rem;color:#5b6880;border-radius:8px;display:block;line-height:1.45}.side-links a:hover,.side-links a.active{background:#fff5bb;color:#152032}.side-links b{display:inline-block;width:26px;color:#818da0}.lesson-main{min-width:0}.lesson-main h1{font-size:clamp(2.2rem,3.7vw,3.55rem);margin:12px 0 18px;max-width:820px}.lesson-submeta{display:flex;gap:9px;flex-wrap:wrap;margin:23px 0 36px}.article{max-width:750px}.article h2{font-size:1.74rem;margin:47px 0 17px}.article h3{font-size:1.17rem;margin:27px 0 12px}.article p{line-height:1.82;color:#35465c}.article ul{padding-left:24px;color:#35465c}.article li{margin-bottom:8px}.note{border-left:4px solid #e8c925;background:#fffbea;border-radius:0 11px 11px 0;padding:18px 22px;margin:27px 0}.note p{margin:5px 0 0}.note.soft{border-color:#7faef0;background:#eef5ff}.note.warn{border-color:#e99a9a;background:#fff0f0}.note strong{display:block}.lab{border-radius:16px;background:var(--navy);color:#e5effa;overflow:hidden;margin:28px 0;box-shadow:0 15px 36px rgba(12,30,55,.16)}.lab-head{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:14px 17px;border-bottom:1px solid #344155;background:#162337}.lab-label{display:flex;align-items:center;gap:9px;color:#ecf2f9;font-size:.81rem;font-weight:800}.lab-badge{background:#30435f;color:#dce9fc;font-weight:800;font-size:.69rem;padding:4px 8px;border-radius:6px}.lab-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.lab button{border:1px solid #3d536f;background:#24354d;color:#eef5ff;border-radius:8px;padding:7px 10px;font-weight:700;font-size:.75rem;min-height:36px}.lab button:hover{background:#344b69}.lab button.run{background:var(--brand);border-color:var(--brand);color:#1b2230}.lab-main{padding:0}.code-input{display:block;width:100%;min-height:194px;resize:vertical;border:none;border-radius:0;background:#0f1a2b;color:#e3eefc;font-size:13px;line-height:1.85;padding:19px 22px;tab-size:2;white-space:pre;overflow:auto}.code-input:focus-visible{outline:2px solid #b4d0ff;outline-offset:-3px}.lab-out{border-top:1px solid #33445c;padding:15px 20px;background:#101d30;min-height:83px}.lab-out .caps{color:#93a8c3}.output{white-space:pre-wrap;overflow-wrap:anywhere;font:12.5px/1.75 ui-monospace,Consolas,monospace;color:#cce7d8;margin-top:9px;min-height:25px}.output.error{color:#ff9e9e}.output.info{color:#a8bad3}.editor-tabs{display:flex;gap:6px;padding:12px 15px 0;background:#101b2c}.editor-tabs button{background:transparent;border:1px solid transparent;color:#adc0d6;font-size:.78rem}.editor-tabs button[aria-selected="true"]{background:#223750;color:#fff;border-color:#49617d}.preview-frame{display:block;width:100%;height:245px;border:0;background:#fff;border-radius:0}.preview-wrap{background:#fff}.preview-status{background:#eef2f7;color:#455776;font-size:.78rem;padding:8px 14px;border-top:1px solid #e2e7ef}.lab-grid{display:grid;grid-template-columns:1fr 1fr}.lab-grid .lab-out{border:0;border-left:1px solid #33445c}.lab-grid .preview-frame{height:240px}.lab-grid .lab-code{min-width:0}.lab-grid .code-input{min-height:240px}.full-lab .code-input{min-height:310px}.lab-empty{opacity:.7}.exercise-card{border:1px solid var(--line);padding:24px;background:white;border-radius:16px;display:flex;flex-direction:column}.exercise-card h3{font-size:1.13rem;margin:14px 0 8px}.exercise-card p{color:var(--muted);font-size:.88rem;flex:1}.exercise-card .link{font-weight:800;font-size:.87rem}.exercise-results{border-radius:12px;background:#eff4fa;color:#243a56;padding:17px 19px;margin:14px 0;display:none}.exercise-results.visible{display:block}.exercise-results.good{background:#e9f7ef;color:#136747}.exercise-results.bad{background:#fff0ed;color:#8e3434}.exercise-results ul{padding-left:20px;margin:10px 0 0}.exercise-results li{margin-bottom:4px}.disclosure{border:1px solid var(--line);border-radius:12px;background:white;margin:12px 0;overflow:hidden}.disclosure summary{cursor:pointer;padding:16px 19px;font-weight:800;list-style-position:inside}.disclosure>div{padding:0 19px 19px;color:#42536b}.disclosure pre{white-space:pre-wrap;overflow:auto;background:#102034;color:#e4eefb;padding:18px;border-radius:9px;font-size:.81rem}.card-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.lesson-next{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:42px}.next-card{background:white;border:1px solid var(--line);padding:21px;border-radius:12px}.next-card small{display:block;color:var(--muted);font-size:.77rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.next-card strong{display:block;margin-top:8px;line-height:1.35}.next-card:hover{border-color:#97b6e5}.course-module{background:white;border:1px solid var(--line);border-radius:16px;margin-bottom:16px;overflow:hidden}.course-module>summary{cursor:pointer;list-style:none;display:flex;gap:16px;align-items:center;padding:22px}.course-module>summary::-webkit-details-marker{display:none}.course-module>summary .module-num{display:grid;place-items:center;min-width:48px;height:48px;border-radius:11px;background:#fff1b3;font-weight:900}.course-module>summary .course-ttl{flex:1}.course-module>summary strong{display:block;font-size:1.08rem}.course-module>summary small{display:block;color:var(--muted)}.course-module>summary .chevron{font-size:1.3rem;color:var(--muted)}.course-module[open]>summary .chevron{transform:rotate(90deg)}.course-lessons{border-top:1px solid var(--line)}.course-lessons a{display:flex;align-items:center;gap:15px;padding:13px 22px;border-bottom:1px solid #eef1f5;font-size:.92rem;min-height:58px}.course-lessons a:last-child{border:0}.course-lessons a:hover{background:#fbfcff}.course-lessons a .lesson-num{color:#8391a6;width:29px;text-align:right;font-weight:700}.course-lessons a strong{font-weight:650;flex:1}.course-lessons a .done{color:var(--green);font-weight:900}.course-toolbar{background:white;border:1px solid var(--line);padding:17px;display:flex;justify-content:space-between;align-items:center;gap:15px;border-radius:13px;margin-bottom:22px;flex-wrap:wrap}.meter{height:8px;border-radius:20px;background:#e5ebf2;overflow:hidden;margin:11px 0}.meter>span{display:block;background:var(--green);height:100%;width:0;transition:width .25s}.filter-controls{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:25px}.filter-controls button{border:1px solid var(--line);background:white;border-radius:99px;padding:7px 13px;font-size:.81rem;font-weight:800;min-height:40px}.filter-controls button.active{background:#152235;color:white;border-color:#152235}.search-input,select.input{min-height:49px;border:1px solid #cbd5e1;border-radius:11px;padding:10px 15px;background:#fff;color:var(--ink);width:100%}.search-wrap{position:relative;margin:23px 0 30px;max-width:600px}.search-wrap .search-input{padding-left:44px}.search-wrap .magnify{position:absolute;left:16px;top:12px;color:#768399}.hide{display:none!important}.glass-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.glossary-term{border:1px solid var(--line);background:white;border-radius:14px;padding:23px}.glossary-term h3{margin:0 0 9px}.glossary-term p{color:var(--muted);font-size:.9rem;margin:0 0 13px}.glossary-term a{color:var(--accent);font-weight:750;font-size:.83rem}.prose{background:white;border:1px solid var(--line);padding:clamp(24px,5vw,54px);border-radius:18px}.prose h2{margin:31px 0 15px;font-size:1.65rem}.prose h2:first-child{margin-top:0}.prose h3{margin:24px 0 12px}.prose p,.prose li{line-height:1.83;color:#384a60}.prose a{color:var(--accent);text-decoration:underline}.prose ul,.prose ol{padding-left:23px}.prose pre{background:#111e31;border-radius:12px;padding:20px;overflow:auto;color:#f1f5fe;font-size:.83rem;line-height:1.7}.search-results a{display:flex;flex-direction:column;gap:3px;padding:17px 0;border-bottom:1px solid var(--line)}.search-results a:hover strong{color:var(--accent)}.search-results small{color:var(--muted)}.project-demo{border:1px solid var(--line);border-radius:18px;padding:25px;background:#fff}.project-demo button,.project-demo input,.project-demo select{min-height:43px}.project-demo input,.project-demo select{padding:9px 12px;border:1px solid #cad5e2;border-radius:9px}.project-demo .demo-actions{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}.project-demo .demo-actions button{padding:8px 16px;border:1px solid #bed0e2;background:#f4f7fb;border-radius:9px;font-weight:750}.project-demo button.primary{background:var(--brand);border:1px solid var(--brand);padding:9px 15px;border-radius:9px;font-weight:900}.demo-stack{display:flex;flex-direction:column;gap:12px}.demo-tasks{list-style:none;padding:0}.demo-tasks li{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:11px 2px}.demo-tasks li.completed span{text-decoration:line-through;color:#718095}.demo-products{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}.demo-products>div{border:1px solid var(--line);border-radius:11px;padding:15px}.code-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.reading-progress{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.86rem}.reading-progress button{border:1px solid #b9d5c5;background:#eaf7f0;color:#126b4b;padding:10px 14px;border-radius:10px;font-weight:800}.notice{font-size:.83rem;color:var(--muted);margin-top:12px}.print-only{display:none}.article-meta{font-size:.79rem;color:var(--muted)}.shortcut{border:1px solid #cdd7e3;border-radius:4px;padding:0 5px;font-size:.75rem}.stagger>*{animation:fadein .4s ease both}@keyframes fadein{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1120px){.site-nav a{padding:8px}.hero-grid{gap:35px}.footer-grid{gap:25px}.lesson-layout{gap:30px;grid-template-columns:210px minmax(0,1fr)}}@media(max-width:860px){.site-nav{display:none}.menu-btn{display:inline-flex;align-items:center;gap:6px;font-weight:750;padding:0 12px;width:auto}.mobile-nav.open{display:flex;flex-direction:column;padding:10px 24px 22px;border-top:1px solid var(--line);max-height:70dvh;overflow:auto}.mobile-nav a{padding:11px 6px;font-weight:750;border-bottom:1px solid #eef1f4}.hero-grid{grid-template-columns:1fr;gap:40px}.hero{padding:63px 0 74px}.hero h1{max-width:680px}.hero-demo{max-width:650px}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-layout{display:block}.lesson-side{position:static;max-height:none;display:none}.lesson-side.mobile-open{display:block;margin-bottom:26px}.lesson-toc-toggle{display:inline-flex!important;margin-bottom:21px}.footer-grid{grid-template-columns:2fr 1fr 1fr}.footer-grid>div:last-child{grid-column:2/4}.section{padding:72px 0}.lab-grid{grid-template-columns:1fr}.lab-grid .lab-out{border-left:0;border-top:1px solid #344155}.promo{padding:36px}}@media(max-width:600px){body{font-size:15px}.container,.narrow{width:min(100% - 32px,1160px)}.header-inner{min-height:68px}.brand{font-size:1rem}.brand-icon{width:34px;height:34px}.header-actions .search-btn{display:none}.hero{padding:49px 0 62px}.hero h1{font-size:clamp(2.7rem,9.6vw,4rem);margin:18px 0 18px}.hero .lead{font-size:1.05rem}.hero .actions .btn{width:100%}.hero-proof{font-size:.81rem}.hero-code{font-size:.75rem;padding:17px}.demo-shell{transform:none}.hero-demo-bottom{padding:17px}.section{padding:60px 0}.section-head{display:block;margin-bottom:27px}.section-head .btn{margin-top:19px}.grid-3,.grid-4,.glass-grid,.modules-list{grid-template-columns:1fr}.feature{padding:23px}.numbers-row{gap:22px}.stat{min-width:41%}.stat strong{font-size:2.1rem}.page-hero{padding:39px 0 37px}.page-hero h1{font-size:clamp(2.2rem,8.1vw,3.3rem)}.page-pad{padding:34px 0 70px}.lesson-main h1{font-size:clamp(2.2rem,8.1vw,3.2rem)}.article h2{font-size:1.52rem;margin-top:36px}.lab{border-radius:12px;margin-inline:-2px}.lab-head{align-items:stretch}.lab-actions{width:100%}.lab-actions button{flex:1;min-height:40px}.code-input{font-size:12.5px;padding:15px 14px;min-height:210px}.lab-grid .code-input{min-height:250px}.editor-tabs{overflow-x:auto}.editor-tabs button{flex:1;min-width:65px}.preview-frame{height:220px}.lesson-next{grid-template-columns:1fr}.course-module>summary{padding:15px}.course-lessons a{padding:12px 13px;gap:10px;align-items:start}.course-lessons .pill{display:none}.course-lessons a .lesson-num{width:21px}.footer-grid{grid-template-columns:1fr 1fr;gap:29px}.footer-grid>div:first-child,.footer-grid>div:last-child{grid-column:1/3}.promo{display:block;padding:28px}.promo .btn{margin-top:20px}.project-demo{padding:16px}.demo-products{grid-template-columns:1fr}.prose{padding:24px 20px}.mobile-panel-switcher{display:flex!important}.full-lab[data-mobile-panel="code"] .preview-wrap,.full-lab[data-mobile-panel="code"] .lab-out{display:none}.full-lab[data-mobile-panel="result"] .lab-code,.full-lab[data-mobile-panel="result"] .lab-out{display:none}.full-lab[data-mobile-panel="console"] .lab-code,.full-lab[data-mobile-panel="console"] .preview-wrap{display:none}.full-lab[data-mobile-panel="console"] .lab-out{display:block}.full-lab .preview-frame{height:330px}}@media(min-width:601px){.mobile-panel-switcher{display:none!important}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}@media print{.site-header,.site-footer,.btn,.lab,.course-toolbar{display:none!important}body{background:white}.print-only{display:block}.page-pad{padding:0}.prose{border:0;padding:0}}
@media(max-width:860px){.project-detail-grid{grid-template-columns:minmax(0,1fr)!important}}

/* Referencia JavaScript: directorios escaneables y guías de diagnóstico breves. */
[hidden]{display:none!important}
.ref-hero{background:linear-gradient(115deg,#fff 0%,#fff 64%,#e1f8f3 100%);border-bottom:1px solid var(--line);padding:39px 0 36px}
.ref-hero .crumb{margin-bottom:23px}
.ref-hero .eyebrow{font-size:.7rem}
.ref-hero h1{font-size:clamp(2.1rem,4vw,3.55rem);max-width:970px;margin:13px 0 10px;overflow-wrap:anywhere}
.ref-hero .lead{font-size:1.08rem;line-height:1.55;max-width:780px;margin:0}
.ref-main{padding:30px 0 100px}
.ref-search-controls{padding:24px 27px 16px;background:#fff;border:1px solid #dae4ed;border-radius:17px;box-shadow:0 8px 32px rgba(18,38,71,.035)}
.ref-search-controls label{display:block;font-size:.91rem;font-weight:800;margin:0 0 10px}
.ref-search-field{display:flex;align-items:center;gap:10px;background:#f6f8fb;border:1.5px solid #c9d7e6;border-radius:11px;padding:0 12px;min-height:52px}
.ref-search-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #2864d91b}
.ref-search-field>span{font-size:1.5rem;color:#52657c}
.ref-search-field input{flex:1;min-width:0;width:100%;background:transparent;border:0;outline:0!important;padding:13px 0;color:var(--ink);font-size:1rem}
.ref-search-field input:focus-visible{outline:0}
.ref-search-field input::placeholder{color:#68788e}
.ref-search-field button{background:#e4edfa;border:0;color:#164da1;border-radius:8px;font-weight:800;padding:7px 11px;flex-shrink:0}
.ref-search-field button:hover{background:#cfdef7}
.ref-count{font-size:.82rem;color:var(--muted);margin:10px 0 0;font-weight:650}
.ref-filters{display:flex;gap:8px;flex-wrap:wrap;margin:21px 0 29px}
.ref-filters button{border:1px solid #ccd8e7;color:#42536b;border-radius:99px;padding:9px 14px;background:white;line-height:1.25;font-size:.82rem;font-weight:760;min-height:41px;transition:background .13s,border-color .13s}
.ref-filters button:hover{background:#edf4ff;border-color:#a8c4eb}
.ref-filters button.selected{border-color:#192b46;color:#fff;background:#192b46}
.ref-group{margin-top:34px}
.ref-group:first-child{margin-top:0}
.ref-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid #dce5ef;padding:0 1px 12px;margin-bottom:12px}
.ref-group-head h2{font-size:clamp(1.21rem,2vw,1.52rem)}
.ref-group-head>span{font-size:.76rem;font-weight:750;color:#69798d;white-space:nowrap}
.ref-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.ref-card{min-width:0;padding:18px 20px;background:white;border:1px solid #e0e7f0;border-radius:13px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,box-shadow .15s}
.ref-card:hover,.ref-card:focus-within{border-color:#9cbbe9;box-shadow:0 7px 25px rgba(35,61,102,.065)}
.ref-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ref-kind{font-size:.67rem;color:#58697f;text-transform:uppercase;letter-spacing:.065em;font-weight:800;line-height:1.5}
.ref-env{font-size:.65rem;border:1px solid #d4e7ef;background:#f0f8fc;color:#28586d;border-radius:100px;padding:1px 7px;font-weight:760}
.ref-card-link{display:flex;align-items:start;justify-content:space-between;gap:13px;color:#1a2a43;line-height:1.26;text-decoration:none}
.ref-card-link strong{font-size:1.06rem;overflow-wrap:anywhere}
.ref-card-link span{color:#2b64be;font-size:1.1rem}
.ref-card-link:hover strong{text-decoration:underline;text-underline-offset:3px}
.ref-card p{color:#536378;line-height:1.52;font-size:.86rem;margin:0}
.ref-card-foot{font-weight:800;color:#225bb3;font-size:.76rem;margin-top:auto;padding-top:2px}
.ref-symptom{font-family:ui-monospace,monospace!important;font-size:.78rem!important;color:#31455e!important;background:#f2f5f9;border-radius:6px;padding:6px 8px;overflow-wrap:anywhere}
.ref-empty{background:#fff;border:1px dashed #a5b9cf;padding:26px;border-radius:13px;margin:14px 0 20px}
.ref-empty strong{font-size:1.1rem}
.ref-empty p{margin:6px 0}
.ref-diagnosis{margin-top:45px;padding:23px 28px;background:#f0f5fb;border-radius:15px;border:1px solid #d8e3f0}
.ref-diagnosis h2{font-size:1.22rem;margin-bottom:10px}
.ref-diagnosis ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding-left:22px;font-size:.88rem;color:#374861}
.ref-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;align-items:start;gap:50px;padding-top:36px;padding-bottom:110px}
.ref-article{min-width:0;max-width:800px;font-size:1rem;line-height:1.73}
.ref-article>p{color:#374960;margin:0 0 24px}
.ref-article h2{font-size:clamp(1.34rem,2.5vw,1.7rem);margin:35px 0 12px}
.ref-answer{font-size:1.12rem;font-weight:540;line-height:1.72;border-left:4px solid #79dfd3;padding:11px 0 11px 19px;margin:0 0 23px;background:linear-gradient(90deg,#effdfb,transparent)}
.ref-answer-error{border-left-color:#2864d9;font-size:1rem;background:linear-gradient(90deg,#eef4ff,transparent);padding:12px 18px}
.ref-answer-error p{margin:0 0 9px}
.ref-answer-error p:last-child{margin:0}
.ref-code{border-radius:12px;overflow:hidden;background:#101b2c;border:1px solid #243751;min-width:0;max-width:100%;color:#e7efff}
.ref-code-title{padding:10px 14px;background:#1a2940;color:#e0e9f5;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.74rem;font-weight:780}
.ref-code-title span:last-child{color:#79dfd3;font-family:monospace}
.ref-code pre{overflow-x:auto;max-width:100%;background:transparent!important;color:inherit!important;margin:0!important;padding:19px 21px!important;line-height:1.67;font-size:.85rem;tab-size:2;white-space:pre;}
.ref-code pre code{color:inherit;background:transparent;font:inherit;border:0;padding:0}
.ref-code-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:100%}
.ref-code-compare .ref-code-title{font-size:.73rem}
.ref-note{border-radius:12px;background:#eafbf8;border:1px solid #e9dca6;padding:14px 19px;color:#433c2b;margin-top:17px;font-size:.91rem}
.ref-note p{margin:5px 0 0}
.ref-links{margin-top:38px;padding-top:21px;border-top:1px solid #dce5ef;font-size:.88rem;color:#4f6076}
.ref-links p{margin:0 0 12px}
.ref-links a{color:#235db3;text-decoration:underline;text-underline-offset:2px}
.ref-links .ref-source{font-size:.79rem;color:#738197;margin-top:21px}
.ref-aside{position:sticky;top:105px;border:1px solid #dce5ee;background:#fff;border-radius:12px;padding:20px;color:#455874;line-height:1.5}
.ref-aside .caps{display:block;margin-bottom:5px}
.ref-aside p{font-size:.89rem;margin-bottom:19px}
.ref-aside a{color:#215cba;font-weight:750;font-size:.82rem}
@media(max-width:900px){.ref-detail-layout{grid-template-columns:minmax(0,1fr);gap:14px}.ref-aside{position:static;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline}.ref-aside p{margin:0}.ref-diagnosis ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.ref-hero{padding:27px 0 27px}.ref-hero .crumb{margin-bottom:18px}.ref-hero h1{font-size:clamp(1.92rem,8vw,2.65rem)}.ref-hero .lead{font-size:.96rem;line-height:1.6}.ref-main{padding:19px 0 75px}.ref-search-controls{padding:17px 17px 13px;border-radius:13px}.ref-search-controls label{font-size:.85rem}.ref-search-field{min-height:48px}.ref-search-field input{font-size:.92rem}.ref-filters{flex-wrap:nowrap;overflow:auto;margin:15px -24px 22px;padding:2px 24px 8px;scrollbar-width:thin}.ref-filters button{white-space:nowrap;flex:none}.ref-grid{grid-template-columns:1fr;gap:9px}.ref-card{padding:16px 17px}.ref-group{margin-top:26px}.ref-group-head h2{font-size:1.24rem}.ref-detail-layout{padding-top:24px;padding-bottom:70px}.ref-article{font-size:.96rem}.ref-answer{font-size:1.03rem}.ref-code-compare{grid-template-columns:1fr}.ref-code pre{font-size:.79rem;padding:15px!important}.ref-diagnosis{padding:21px}.ref-diagnosis ol{grid-template-columns:1fr;gap:9px}.ref-aside{padding:16px}.ref-article h2{margin-top:27px}}
.ref-card[id]{scroll-margin-top:106px}


/* --- visual-system.css --- */
/*
 * AprenderJavaScript — sistema visual 2.0
 * Capa de diseño incremental sobre style.css. No altera el contenido ni la lógica.
 * Tipografía: familias instaladas localmente por el visitante; sin llamadas a CDNs.
 * Objetivos: WCAG 2.2 AA, legibilidad, navegación por teclado y reflujo móvil.
 */
:root {
  --bg: #f7f9f8;
  --surface: #ffffff;
  --ink: #15272d;
  --muted: #4d6068;
  --line: #d9e4e3;
  --brand: #79dfd3;
  --accent: #126c60;
  --accent-soft: #e9f5f1;
  --green: #14664d;
  --red: #a3313c;
  --navy: #102129;
  --navy2: #192f39;
  --radius: 14px;
  --shadow: 0 12px 32px rgba(17, 45, 51, .055);
  --font-text: "Lato", "Aptos", "Segoe UI", system-ui, sans-serif;
  --font-display: "Inter Display", "Aptos Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-code: ui-monospace, "Cascadia Code", "SFMono-Regular", "Consolas", monospace;
  --space-xs: .5rem;
  --space-sm: .875rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-section: clamp(4.75rem, 7.6vw, 7rem);
}
html { scroll-padding-top: 6.5rem; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4, .brand, .stat strong, .module-index, .feature-number {
  font-family: var(--font-display);
  font-weight: 750;
  letter-spacing: -.035em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 5.1vw, 4.85rem); line-height: 1.075; letter-spacing: -.051em; }
h2 { font-size: clamp(1.95rem, 3.15vw, 3rem); line-height: 1.16; }
h3 { font-size: clamp(1.16rem, 1.5vw, 1.32rem); line-height: 1.3; }
p { line-height: 1.72; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.65; color: var(--muted); }
.muted,.feature p,.link-card p,.project-body p,.article p { color: var(--muted); }
.caps,.eyebrow { color: #4b605c; letter-spacing: .075em; font-size: .78rem; font-weight: 800; }
.eyebrow:before { height: 4px; width: 19px; background: #55b7af; }
.container { width: min(1176px, calc(100% - 64px)); }
.narrow { width: min(760px, calc(100% - 64px)); }
.page-pad { padding: clamp(3.5rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 7.5rem); }
.section { padding: var(--space-section) 0; }
.section-head { gap: 3rem; margin-bottom: 2.75rem; }
.section-head p { margin-top: 1.15rem; max-width: 56ch; font-size: 1.04rem; }
.section-white { background: #fff; }
.section-dark { background: var(--navy); }
.section-dark .section-head p { color: #c5d5dc; }
.section-dark .eyebrow { color: #79dfd3; }
:where(a,button,input,textarea,select,summary):focus-visible {
  outline: 3px solid #126c60;
  outline-offset: 4px;
}
.section-dark :where(a,button,summary):focus-visible,
.site-footer :where(a,button):focus-visible,
.lab :where(button,textarea):focus-visible {
  outline: 3px solid #79dfd3;
  outline-offset: 4px;
}
:where(a,button,input,textarea,select,summary) { -webkit-tap-highlight-color: transparent; }
button,select { min-height: 44px; }
:where(a,button) { touch-action: manipulation; }
:where(a:not([class]), .prose a, .article a, .ref-article a) { text-underline-offset: .18em; }
:where(code,pre,textarea.code-input,.hero-code,.ref-symptom) { font-family: var(--font-code); }
code { background: #eaf1f0; color: #203f41; }
.link,.prose a,.ref-links a,.ref-aside a,.project-body .link,.ref-card-foot { color: #126c60; }
.link:hover,.prose a:hover { text-decoration-thickness: 2px; }
/* Cabecera y navegación: menos ruido, estados claros, objetivos cómodos. */
.site-header {
  background: rgba(255,255,255,.975);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(15,45,54,.015);
}
.header-inner { min-height: 79px; gap: 1.5rem; }
.brand { font-size: 1.08rem; font-weight: 800; letter-spacing: -.047em; gap: .72rem; }
.brand-icon { transform: none; border-radius: 10px; width: 40px; height: 40px; }
.brand-icon span { transform: none; }
.brand .js { color: #1a676b; }
.site-nav { gap: .15rem; }
.site-nav a { min-height: 44px; display:inline-flex; align-items:center; font-size: .92rem; font-weight: 700; color: #425761; padding: .6rem .85rem; }
.site-nav a:hover,.site-nav a[aria-current="page"] { background: #eaf4f1; color: #15574f; }
.icon-btn { min-width: 44px; min-height: 44px; border-color: var(--line); background: #fff; }
.icon-btn:hover { background: #f2f8f6; border-color: #aec9bf; }
/* Portada: sobria, espaciosa; código integrado sin rotación decorativa. */
.hero {
  padding: clamp(5rem, 8vw, 8rem) 0 clamp(5.5rem, 8vw, 7.5rem);
  background: radial-gradient(ellipse 60% 65% at 90% 10%, #e5faf5 0, transparent 73%), #fff;
}
.hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(2.5rem, 5vw, 5.5rem); }
.hero h1 { max-width: 12.7ch; margin: 1.15rem 0 1.65rem; }
.hero .lead { max-width: 52ch; }
.hero .actions { margin-top: 2rem; }
.hero-proof { margin-top: 1.7rem; gap: .65rem 1.4rem; font-size: .92rem; }
.accent-highlight { background: linear-gradient(transparent 77%, rgba(121,223,211,.22) 0); }
.demo-shell { border-radius: 17px; transform: none; box-shadow: 0 24px 75px rgba(13,32,41,.17); background: #13232e; }
.window-top { background: #182c38; border-color: #324954; padding: .95rem 1.15rem; }
.window-title { color: #d5e1e6; }
.hero-code { font-size: .94rem; line-height: 1.85; padding: 2rem; }
.hero-demo-bottom { padding: 1.45rem 1.75rem; }
.demo-number { font-weight: 750; }
.mini-circle { width: 54px; height: 54px; border-radius: 12px; }
/* Botones — lenguaje discreto, colores con intención. */
.btn { min-height: 48px; padding: .78rem 1.3rem; border-radius: 10px; font-size: .96rem; font-weight: 800; box-shadow: none; }
.btn-primary { color: #171d19; background: var(--brand); box-shadow: none; }
.btn-primary:hover { background: #abeee7; }
.btn-outline { background: transparent; border-color: #b9caca; color: var(--ink); }
.btn-outline:hover { background: #f0f5f3; border-color: #779e95; }
.btn-blue { background: #126c60; }
.btn-blue:hover { background: #0a5149; }
.btn-dark { background: #12272e; }
.btn-dark:hover { background: #1c3b43; }
.btn-quiet { border-color: #c8d5d3; }
.btn-sm { min-height: 40px; padding: .6rem .9rem; }
/* Cards — ritmo editorial y superficie mínima. */
.grid-3,.grid-4 { gap: 1.25rem; }
.feature { padding: 2rem; border-color: var(--line); border-radius: var(--radius); box-shadow: none; }
.feature h3 { margin-bottom: .85rem; }
.feature p { font-size: .98rem; line-height: 1.65; }
.feature-number { width: 46px; height: 46px; margin-bottom: 1.8rem; background: #fff5be; color: #473b00; border-radius: 12px; }
.link-card { min-height: 242px; padding: 1.75rem; border-radius: var(--radius); border-color: var(--line); background: #fff; box-shadow: none; }
.link-card h3 { margin: 1.05rem 0 .85rem; }
.link-card p { font-size: .95rem; line-height: 1.6; }
.link-card small { color: #766000; font-size: .74rem; }
.link-card .arrow { color: #126c60; padding-top: 1.1rem; }
.link-card:hover,.link-card:focus-visible { transform: translateY(-2px); border-color: #8db6ad; box-shadow: var(--shadow); }
.numbers-row { margin-top: 3.5rem; padding-top: 2rem; gap: 2rem 4rem; }
.stat strong { font-size: 2.55rem; }
.stat span { font-size: .95rem; }
.modules-list { gap: .8rem; }
.module-link { background: #1a303a; border-color: #34505a; padding: 1.35rem 1.4rem; border-radius: 11px; min-height: 86px; }
.module-link:hover { background: #22404a; border-color: #82ada7; }
.module-index { width: 45px; height: 45px; background: #294651; border-radius: 10px; }
.module-link strong { font-size: 1rem; }
.module-link small { color: #c1d0d7; font-size: .86rem; }
.project-card { border-color: var(--line); border-radius: var(--radius); }
.project-art { height: 172px; }
.art-quiz { background:#f0edff; }
.art-tasks { background:#e5f5ee; }
.art-catalog { background:#fcf3d4; }
.art-api { background:#e5f2f6; }
.project-body { padding: 1.6rem; }
.project-body p { font-size: .96rem; line-height: 1.6; }
.promo { background: #79dfd3; border-radius: 16px; padding: clamp(2rem, 5vw, 4rem); }
.promo .caps { color: #564600; }
.promo p { font-size: 1.05rem; }
.site-footer { background: #102129; padding: 5rem 0 2.25rem; }
.footer-grid { gap: clamp(2rem, 4vw, 4rem); }
.site-footer h4 { color: #bbced3; letter-spacing: .07em; }
.site-footer a { color: #e0ecee; }
.footer-bottom { color: #b9cdd1; }
/* Cabeceras y lectura de artículos. */
.page-hero { padding: clamp(3.5rem, 6vw, 6rem) 0 clamp(2.8rem, 5vw, 5rem); background: #fff; }
.page-hero h1 { max-width: 19ch; font-size: clamp(2.55rem, 4.65vw, 4.1rem); }
.page-hero .lead { max-width: 60ch; margin-top: 1.25rem; }
.crumb { color: #50656b; margin-bottom: 2rem; font-size: .88rem; }
.crumb a { text-decoration: underline; text-underline-offset: 3px; }
.lesson-layout { gap: clamp(1.7rem, 4vw, 4rem); }
.lesson-side { border-color: var(--line); border-radius: 13px; padding: 1.25rem; box-shadow: none; }
.side-links a { border-radius: 8px; padding: .68rem; }
.side-links a:hover,.side-links a.active { background: #e8f4f0; color: #155b53; }
.lesson-main { min-width: 0; }
.lesson-main h1 { font-size: clamp(2.65rem, 4.8vw, 4.35rem); line-height: 1.1; margin-bottom: 1.25rem; }
.lesson-submeta { margin: 1.7rem 0 2.3rem; }
.article, .prose { font-size: 1.05rem; line-height: 1.8; }
.article p,.prose p,.prose li { color: #344c54; line-height: 1.82; }
.article h2,.prose h2 { margin: 3rem 0 1.1rem; font-size: clamp(1.62rem, 2.2vw, 2rem); line-height: 1.22; }
.article h3,.prose h3 { margin-top: 2rem; font-size: 1.35rem; }
.article li,.prose li { margin-bottom: .45rem; }
.prose { background: #fff; padding: clamp(1.8rem,4vw,3rem); border: 1px solid var(--line); border-radius: 16px; }
.note { border-radius: 12px; padding: 1.35rem 1.55rem; }
.note.soft { background: #eaf5f1; border-color: #bad9cf; }
.note.warn { background: #fff7d7; border-color: #d7bd5c; }
.pill { border-color: #cedfdc; }
.course-module { border-color: var(--line); border-radius: 12px; overflow: hidden; }
.course-module>summary { padding: 1.45rem 1.65rem; min-height: 80px; }
.course-module>summary:hover { background: #f4f9f7; }
.course-lessons a { padding: .85rem 1.35rem; min-height: 48px; }
.course-lessons a:hover { background: #f1f8f5; }
.course-toolbar { margin-bottom: 2rem; }
/* Laboratorios: priorizar legibilidad de código y acciones. */
.lab { border-radius: 14px; box-shadow: 0 10px 30px rgba(14,39,50,.11); margin: 2.35rem 0; background: #11232c; }
.lab-head { background: #1a313c; border-color: #34505a; padding: 1rem 1.25rem; gap: .8rem; }
.lab-label { color: #f0f6f8; }
.lab button { min-height: 43px; }
.lab button.run { background: #79dfd3; color: #18231e; }
.lab button.run:hover { background: #abeee7; }
.code-input { font-family: var(--font-code); font-size: .91rem; line-height: 1.7; background: #11232c; color: #e8f5f7; }
.lab-out { background: #0e2029; }
.editor-tabs button { min-height: 44px; }
.editor-tabs button[aria-pressed="true"], .editor-tabs button[aria-selected="true"] { color: #abeee7; }
.output { color: #e4f0f1; }
.search-input, select.input, .project-demo input, .project-demo select { min-height: 48px; border-color: #b9cfca; border-radius: 10px; }
.search-input:focus-visible,.project-demo input:focus-visible { outline: 3px solid #126c60; outline-offset: 2px; }
.filter-controls button,.demo-actions button { min-height: 44px; }
/* Referencias: búsqueda, fichas y diagnóstico. */
.ref-hero { padding: clamp(3.25rem, 5.5vw, 5.4rem) 0 clamp(2.5rem, 4vw, 4.25rem); background: #fff; border-color: var(--line); }
.ref-hero .crumb { margin-bottom: 1.8rem; }
.ref-hero h1 { font-size: clamp(2.55rem, 4.5vw, 4.2rem); margin: 1.15rem 0 1.1rem; }
.ref-hero .lead { font-size: clamp(1.06rem,1.4vw,1.23rem); max-width: 61ch; line-height: 1.65; }
.ref-main { padding: clamp(2.3rem, 4.3vw, 4.2rem) 0 clamp(5rem, 8vw, 7.5rem); }
.ref-search-controls { padding: 1.6rem 1.8rem; border-color: var(--line); border-radius: 14px; box-shadow: none; }
.ref-search-controls label { font-weight: 750; font-size: .96rem; }
.ref-search-field { background: #f9fbfa; border-color: #aebfbd; border-radius: 10px; }
.ref-search-field:focus-within { border-color: #126c60; box-shadow: 0 0 0 3px #126c6029; }
.ref-search-field input { min-height: 48px; font-size: 1.02rem; }
.ref-search-field button { min-height: 38px; color: #134f46; background: #e2f1ec; }
.ref-search-field button:hover { background: #cce8df; }
.ref-count { font-size: .88rem; }
.ref-filters { gap: .65rem; margin: 1.6rem 0 2.4rem; }
.ref-filters button { min-height: 44px; font-size: .89rem; background: #fff; border-color: #bdcfcb; color: #41565c; padding: .6rem 1rem; }
.ref-filters button.selected { background: #17483f; border-color: #17483f; color: #fff; }
.ref-filters button:hover { background: #eaf5f1; border-color: #8bb6a8; color: #134d45; }
.ref-filters button.selected:hover { background: #235b50; color: #fff; }
.ref-group { margin-top: 3rem; }
.ref-group-head { padding-bottom: 1rem; margin-bottom: 1rem; border-color: var(--line); }
.ref-group-head h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
.ref-group-head>span { color: #4c646c; font-size: .84rem; }
.ref-grid { gap: .85rem; }
.ref-card { border-color: var(--line); padding: 1.35rem 1.5rem; gap: .55rem; border-radius: 12px; }
.ref-card:hover,.ref-card:focus-within { border-color: #8fb6a8; box-shadow: 0 10px 25px rgba(15,48,49,.045); }
.ref-kind { color: #506971; }
.ref-env { background: #eaf5f3; color: #225950; border-color: #bcdcd3; }
.ref-card-link { color: var(--ink); }
.ref-card-link strong { font-size: 1.11rem; }
.ref-card-link span,.ref-card-foot { color: #126c60; }
.ref-card p { font-size: .95rem; color: #4a5d64; line-height: 1.65; }
.ref-symptom { background: #f0f6f4; color: #244747!important; }
.ref-diagnosis { background: #eaf5f1; border-color: #c4e0d7; padding: 1.7rem 2rem; }
.ref-diagnosis ol { color: #294d48; }
.ref-detail-layout { gap: clamp(2rem, 4vw, 4.5rem); padding-top: 3.5rem; }
.ref-article { font-size: 1.055rem; line-height: 1.8; }
.ref-article>p { color: #344c54; }
.ref-article h2 { margin: 3rem 0 1.05rem; font-size: clamp(1.55rem,2.15vw,1.95rem); }
.ref-answer { background: #fffbed; border-color: #d2b600; border-left-width: 4px; padding: 1.15rem 1.4rem; border-radius: 0 10px 10px 0; line-height: 1.68; }
.ref-answer-error { background: #eaf5f1; border-color: #126c60; }
.ref-code { background: #11232c; border-color: #2b4751; border-radius: 12px; }
.ref-code-title { background: #1c343f; border-color: #2f4c56; color: #eaf3f5; }
.ref-code pre { font-size: .9rem; line-height: 1.78; }
.ref-note { background: #fffae6; border-color: #e0c969; color: #473d25; }
.ref-links { border-color: var(--line); }
.ref-links a,.ref-aside a { color: #126c60; }
.ref-links .ref-source { color: #4d666d; }
.ref-aside { background: #fff; border-color: var(--line); top: 110px; }
/* Expansión de elementos sin comprometer accesibilidad del texto. */
:where(.link-card,.module-link,.ref-card,.project-card,.feature) { min-width: 0; }
:where(.article,.prose,.ref-article) :where(p,li,blockquote) { max-width: 72ch; }
:where(.article,.prose,.ref-article) :where(pre,.ref-code) { max-width: 100%; }
:where(pre,.ref-code pre) { overflow-x: auto; }
/* 860 px: pasar a estructuras de una columna sin encoger lectura. */
@media (max-width: 860px) {
  .container,.narrow { width: min(100% - 48px, 1176px); }
  .hero-grid { grid-template-columns: minmax(0,1fr); gap: 3.5rem; }
  .hero { padding: 5.25rem 0 5.5rem; }
  .section { padding: 5.2rem 0; }
  .section-head { gap: 1.4rem; }
  .mobile-nav.open { padding: .5rem 0 1.1rem; border-top: 1px solid var(--line); }
  .mobile-nav a { padding: .7rem .9rem; min-height: 44px; border-radius: 8px; }
  .mobile-nav a:focus-visible { outline-offset: 0; }
  .ref-detail-layout { padding-top: 2.3rem; }
}
@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .container,.narrow { width: calc(100% - 36px); }
  .header-inner { min-height: 67px; gap: .5rem; }
  .brand { font-size: .98rem; gap: .55rem; white-space: nowrap; }
  .brand-icon { width: 36px; height: 36px; }
  .menu-btn { min-width: 45px; min-height: 45px; font-size: .9rem; padding: 0 .65rem; }
  .hero { padding: 3.9rem 0 4.35rem; }
  .hero h1 { font-size: clamp(2.54rem, 10.2vw, 3.4rem); line-height: 1.085; margin: 1.1rem 0 1.4rem; max-width: 13.5ch; }
  .hero .lead { font-size: 1.06rem; line-height: 1.67; }
  .hero .actions { margin-top: 1.6rem; gap: .7rem; }
  .hero .actions .btn { width: 100%; min-height: 50px; }
  .hero-proof { gap: .5rem 1rem; font-size: .89rem; margin-top: 1.4rem; }
  .hero-demo { margin-top: 2.5rem; }
  .hero-code { padding: 1.3rem; font-size: .85rem; }
  .hero-demo-bottom { padding: 1.1rem; }
  .section { padding: 4.3rem 0; }
  .section-head { margin-bottom: 2rem; }
  .section-head p { font-size: 1rem; }
  .section-head .btn { margin-top: .4rem; }
  .grid-3,.grid-4,.modules-list { gap: .85rem; }
  .feature { padding: 1.45rem; }
  .feature-number { margin-bottom: 1.2rem; }
  .link-card { min-height: auto; padding: 1.5rem; }
  .link-card h3 { margin: .85rem 0 .65rem; }
  .numbers-row { gap: 1.4rem; padding-top: 1.7rem; margin-top: 2.3rem; }
  .stat strong { font-size: 2.35rem; }
  .module-link { min-height: 82px; padding: 1.05rem; gap: .85rem; }
  .module-index { min-width: 43px; height: 43px; }
  .project-art { height: 154px; }
  .project-body { padding: 1.55rem; }
  .promo { padding: 2.2rem 1.65rem; }
  .site-footer { padding-top: 4rem; }
  .footer-grid { gap: 2rem 1.2rem; }
  .page-hero { padding: 2.8rem 0 2.9rem; }
  .page-hero h1 { font-size: clamp(2.34rem, 9vw, 3rem); line-height: 1.1; }
  .page-hero .lead { font-size: 1.05rem; }
  .page-pad { padding: 2.65rem 0 5rem; }
  .crumb { margin-bottom: 1.45rem; }
  .lesson-main h1 { font-size: clamp(2.35rem, 9.3vw, 3rem); line-height: 1.11; }
  .article,.prose { font-size: 1.035rem; }
  .article h2,.prose h2 { margin: 2.55rem 0 1.05rem; font-size: 1.65rem; }
  .prose { padding: 1.6rem 1.3rem; }
  .note { padding: 1.25rem; }
  .lab { margin: 1.9rem 0; }
  .lab-head { padding: 1rem; }
  .lab-actions { gap: .5rem; }
  .lab-actions button { min-height: 44px; }
  .code-input,.lab-grid .code-input { font-size: .875rem; min-height: 245px; line-height: 1.75; padding: 1rem; }
  .editor-tabs button { min-height: 44px; }
  .ref-hero { padding: 2.55rem 0 2.75rem; }
  .ref-hero .crumb { margin-bottom: 1.4rem; }
  .ref-hero h1 { font-size: clamp(2.24rem, 8.75vw, 2.9rem); line-height: 1.1; }
  .ref-hero .lead { font-size: 1.04rem; line-height: 1.65; }
  .ref-main { padding: 2rem 0 5rem; }
  .ref-search-controls { padding: 1.2rem; }
  .ref-search-field input { font-size: 1rem; }
  .ref-filters { display: flex; flex-wrap: wrap; overflow: visible; margin: 1.3rem 0 2.1rem; padding: 0; gap: .55rem; }
  .ref-filters button { min-height: 44px; white-space: normal; font-size: .87rem; padding: .55rem .9rem; }
  .ref-group { margin-top: 2.7rem; }
  .ref-card { padding: 1.35rem; }
  .ref-detail-layout { padding-top: 2rem; padding-bottom: 5rem; }
  .ref-article { font-size: 1.025rem; }
  .ref-answer { font-size: 1.03rem; padding: 1rem 1.2rem; }
  .ref-code pre { font-size: .85rem; padding: 1rem!important; }
  .ref-article h2 { margin-top: 2.5rem; font-size: 1.6rem; }
  .ref-diagnosis { padding: 1.4rem; }
}
@media (max-width: 360px) {
  .container,.narrow { width: calc(100% - 30px); }
  .brand { font-size: .87rem; }
  .brand-icon { width: 33px; height: 33px; }
  .hero h1 { font-size: 2.36rem; }
  .ref-search-field>span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition-duration: .01ms!important; animation-duration: .01ms!important; }
  .btn:hover,.link-card:hover { transform: none; }
}
@media (prefers-contrast: more) {
  :root { --line:#708d8d; --muted:#294249; --accent:#064d43; }
  .btn,.feature,.link-card,.ref-card,.course-module { border-width: 2px; }
  :where(a,button,input,textarea,select,summary):focus-visible { outline-width: 4px; }
}
@media (forced-colors: active) {
  .btn,.feature,.link-card,.ref-card,.module-link,.ref-filters button { border: 1px solid CanvasText; }
  :where(a,button,input,textarea,select,summary):focus-visible { outline: 3px solid Highlight; }
  .accent-highlight { background: transparent; text-decoration: underline; }
}
@media print {
  :root { --bg:#fff; --ink:#000; --muted:#333; }
  body { background:#fff; color:#000; }
  .prose { border: none; padding:0; }
  .ref-search-controls,.ref-filters { display:none; }
}
/* Los bloques de ejemplo largos deben desplazarse dentro del código, nunca toda la página. */
.ref-code-compare > div { min-width: 0; max-width: 100%; }
@media (max-width: 650px) {
  .ref-code-compare { grid-template-columns: minmax(0,1fr); }
}
/* Acciones prioritarias de lección y laboratorio: >=44 × 44 CSS px. */
.lesson-toc-toggle, .lab .lab-actions button { min-height: 44px; }


/* --- dark-only.css --- */
/*
 * AprenderJavaScript — tema oscuro único, v3.
 * Se carga después de las capas heredadas: todos los componentes visuales
 * de la plataforma se presentan sobre superficies oscuras. No existe
 * alternancia de tema ni dependencia de prefers-color-scheme.
 * La vista previa del código del estudiante mantiene sus estilos propios.
 */
:root {
  color-scheme: dark;
  --bg: #0b141b;
  --surface: #14232d;
  --surface-raised: #1b303b;
  --surface-hover: #263e49;
  --ink: #edf5f6;
  --muted: #b1c5ce;
  --line: #36515d;
  --brand: #79dfd3;
  --accent: #83dfcf;
  --accent-soft: #193d3b;
  --green: #8de3be;
  --red: #ffb2aa;
  --navy: #0c1a23;
  --navy2: #162b37;
  --shadow: 0 14px 38px rgba(0,0,0,.16);
}
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); }
::selection { background: #79dfd3; color: #10202a; }
:where(a,button,input,textarea,select,summary):focus-visible,
.search-input:focus-visible,.ref-search-field:focus-within { outline-color: #79dfd3; }
:where(a,button,input,textarea,select,summary):focus-visible { outline-offset: 3px; }
:where(a:not([class]),.article a,.prose a,.ref-article a) { color: var(--accent); }
:where(a:not([class]),.article a,.prose a,.ref-article a):hover { color: #b6ffef; }
.muted,.lead,.caps,.eyebrow,.small.muted,.feature p,.link-card p,.project-body p,
.article p,.prose p,.prose li,.ref-article>p { color: var(--muted); }
.eyebrow:before { background: var(--brand); }
code { background: #203541; color: #d2eaf2; }
pre code,.dark code,.lab code,.ref-code code { background: transparent; color: inherit; }
hr { border-color: var(--line); }
/* Header, menus and buttons */
.site-header { background: rgba(11,20,27,.97); border-color: var(--line); box-shadow: 0 2px 16px rgba(0,0,0,.14); }
.brand { color: var(--ink); }
.brand .js { color: var(--brand); }
.brand-icon { background: var(--brand); color: #10202a; }
.site-nav a { color: #cbdae0; }
.site-nav a:hover,.site-nav a[aria-current="page"] { background: #203842; color: #f2fffd; }
.mobile-nav { background: #0b141b; }
.mobile-nav a { color: #dce7eb; border-color: var(--line); }
.mobile-nav a:hover { background: var(--surface-hover); }
.icon-btn,.btn-outline,.btn-quiet { background: var(--surface); border-color: #4a6570; color: var(--ink); }
.icon-btn:hover,.btn-outline:hover,.btn-quiet:hover { background: #29434c; border-color: #8da8b1; color: white; }
.btn-primary,.lab button.run,.project-demo button.primary { background: var(--brand); color: #14212a; border-color: transparent; }
.btn-primary:hover,.lab button.run:hover { background: #a3f1e5; color: #14212a; }
.btn-blue { background: #156d63; color: #fff; }
.btn-blue:hover { background: #1a8276; }
.btn-dark { background: #314955; color: #fff; }
.btn-dark:hover { background: #3b5b68; }
.link,.prose a,.ref-links a,.ref-aside a,.project-body .link,.ref-card-foot,
.link-card .arrow { color: var(--accent); }
/* Hero, main backgrounds and editorial sections */
.hero { background: radial-gradient(ellipse 65% 70% at 86% 12%, #1b3536 0%, transparent 73%), var(--bg); }
.page-hero,.ref-hero { background: #0f1e27; border-color: var(--line); }
.section-white { background: var(--bg); }
.section-dark { background: #10232d; }
.section-dark .section-head p { color: #c4d5de; }
.section-dark .eyebrow { color: var(--brand); }
.section-head p,.hero-proof,.stat span { color: var(--muted); }
.hero-proof span:before { color: var(--green); }
.accent-highlight { background: linear-gradient(transparent 80%, rgba(121,223,211,.2) 0); }
.crumb,.crumb a { color: #bbd0d8; }
.crumb a:hover { color: white; }
.numbers-row { border-color: var(--line); }
/* Cards and section surfaces */
.feature,.link-card,.project-card,.project-body,.course-module,.course-toolbar,
.exercise-card,.glossary-term,.next-card,.disclosure,.prose,.ref-search-controls,
.ref-card,.ref-aside,.ref-empty,.project-demo { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: none; }
.feature h3,.feature strong,.link-card h3,.link-card strong,.project-body h3,
.project-card h3,.exercise-card h3,.ref-card-link,.next-card strong,.course-module strong { color: var(--ink); }
.feature p,.link-card p,.exercise-card p,.project-card p,.project-body p,
.ref-card p,.project-demo p { color: var(--muted); }
.feature-number,.module-index,.course-module>summary .module-num { background: #174e52; color: #c6f5ee; }
.link-card small { color: #bcefe9; }
.link-card:hover,.link-card:focus-visible,.project-card:hover,.ref-card:hover,.ref-card:focus-within {
  background: #1b303a; border-color: #6c9e9d; box-shadow: 0 14px 28px rgba(0,0,0,.18);
}
.module-link { background: #172d37; border-color: #36545f; }
.module-link:hover { background: #243e48; border-color: #89bcbe; }
.module-index { background: #2b4953; color: #e3f4f7; }
.module-link strong { color: white; }
.module-link small { color: #c4d7df; }
.project-art { border-color: var(--line); }
.art-quiz { background: #302e4c; }
.art-tasks { background: #1c423b; }
.art-catalog { background: #4b3d24; }
.art-api { background: #203e55; }
.art-inner { background: #1a2b35; border-color: #5d7885; color: #f3f8fa; box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.promo { background: #79dfd3; color: #14202b; }
.promo h2,.promo p,.promo .caps,.promo .lead { color: #14202b; }
.promo .btn-dark { background: #15242e; color: white; }
.site-footer { background: #081118; border-top: 1px solid #25404b; }
.site-footer h4 { color: #bdcfd6; }
.site-footer a { color: #e5f0f3; }
.footer-bottom { border-color: #2b424e; color: #c0d2d9; }
/* Lists, course listing, lesson metadata */
.pill { background: #203541; border-color: #48606b; color: #d9ebef; }
.pill.optional { background: #173e43; border-color: #567e86; color: #fff0a0; }
.lesson-submeta,.course-toolbar { color: var(--ink); }
.course-module>summary { color: var(--ink); }
.course-module>summary:hover,.course-lessons a:hover { background: var(--surface-hover); }
.course-lessons a { color: var(--ink); border-color: var(--line); }
.course-ttl small { color: var(--muted); }
.lesson-num { color: #b1dfdd; }
.done { color: var(--green); }
.meter { background: #304550; }
.meter>span { background: var(--brand); }
.article,.prose { color: var(--ink); }
.article p,.prose p,.prose li,.article li,.ref-article>p { color: #c5d6dc; }
.article h2,.article h3,.prose h2,.prose h3,.ref-article h2 { color: var(--ink); }
.note { background: #173a40; border-color: #5aafa8; color: #e2f4f1; }
.note p,.note strong { color: inherit; }
.note.soft { background: #193533; border-color: #5eae9b; color: #e1f5ef; }
.note.warn { background: #3c2829; border-color: #e3a09c; color: #fae1df; }
.disclosure summary { color: #f0f8fa; }
.disclosure summary:hover { background: #243942; }
.disclosure>div { color: #d7e6eb; }
.disclosure pre { background: #0d1a22; color: #e7f5f6; }
.next-card:hover { background: var(--surface-hover); border-color: #739b9a; }
.next-card small { color: #b9cad1; }
.reading-progress { border-color: var(--line); }
.reading-progress button { background: #254f44; color: #d8fbea; border-color: #6aa692; }
/* All 60 lessons — sticky independent scroll, clearly grouped, active page. */
.lesson-layout { grid-template-columns: minmax(252px, 290px) minmax(0,1fr); gap: clamp(1.9rem, 4vw, 3.75rem); }
.lesson-side { background: #11222b; border-color: var(--line); border-radius: 14px; padding: .9rem .75rem 1rem; max-height: calc(100dvh - 112px); top: 98px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #607d89 transparent; }
.side-title { display: flex; flex-direction: column; gap: .15rem; padding: .65rem .75rem 1rem; margin: 0; border-bottom: 1px solid var(--line); color: #f1f8fa; font-size: .83rem; letter-spacing: .06em; }
.side-title span { color: var(--muted); font-size: .76rem; text-transform: none; font-weight: 600; letter-spacing: normal; }
.side-links { display: block; margin-top: .75rem; }
.side-module { margin: .4rem 0 1.05rem; }
.side-module-title { display:flex; align-items:center; gap:.65rem; padding: .48rem .75rem; color: #d8e9ee; font-size: .78rem; line-height:1.4; }
.side-module-title>span { font-size: .71rem; color:#abe7df; font-weight:850; }
.side-module-title strong { font-weight:800; }
.side-module-lessons { list-style: none; padding: 0; margin: 0; }
.side-module-lessons li { list-style:none; margin:0; padding:0; }
.side-links .side-module-lessons a { display: grid; grid-template-columns: 1.7rem minmax(0,1fr) auto; gap: .5rem; align-items: start; min-height: 44px; padding: .58rem .66rem; color: #c1d5dd; border-radius: 8px; font-size: .81rem; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
.side-links .side-module-lessons a:hover { background: #263f48; color: #f6ffff; }
.side-links .side-module-lessons a.active { background: #284b47; color: #f5fffb; font-weight: 750; box-shadow: inset 3px 0 #79dfd3; }
.side-lesson-number { font-size: .74rem; color: #91b3be; font-variant-numeric: tabular-nums; padding-top: .1rem; }
.side-module-lessons a.active .side-lesson-number { color: #a9ece3; }
.side-done { color: #98e1bf; font-weight: 900; }
.side-all-link { display:block; padding:.85rem .72rem .4rem; margin-top:.5rem; border-top:1px solid var(--line); font-size:.85rem; color:var(--accent); font-weight:750; }
.side-all-link:hover { color:white; }
.lesson-toc-toggle { display:none; margin-bottom:1rem; }
/* Search, filters and reference directory */
.search-input,.ref-search-field,.ref-search-field input,input:not([type=checkbox]):not([type=radio]):not([type=file]),
select,textarea:not(.code-input),.project-demo input,.project-demo select {
  background: #101f28; color: var(--ink); border-color: #59717b;
}
input::placeholder,textarea::placeholder { color: #a9bbc5; opacity: 1; }
.search-wrap { background: var(--surface); border-color: var(--line); }
.search-wrap .magnify { color: var(--muted); }
.filter-controls button,.ref-filters button,.demo-actions button,.project-demo .demo-actions button {
  background: #1b303a; border: 1px solid #526d78; color: #e0edf1;
}
.filter-controls button:hover,.ref-filters button:hover,.demo-actions button:hover,
.project-demo .demo-actions button:hover { background: #2c4953; border-color: #86b5b6; color: white; }
.filter-controls button.active,.ref-filters button.selected,
.demo-actions button[aria-pressed="true"] { background: #28574e; border-color: #86cebb; color: #fff; }
.ref-search-field { background: #101f28; border-color: #5a7580; }
.ref-search-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px #79dfd355; }
.ref-search-field button { color: #12211f; background: #a8eee0; }
.ref-search-field button:hover { color: #12211f; background: #d3fff5; }
.ref-count,.ref-group-head>span,.ref-kind,.ref-links .ref-source { color: var(--muted); }
.ref-group-head { border-color: var(--line); }
.ref-card-link strong { color: var(--ink); }
.ref-card-link span { color: var(--accent); }
.ref-env { background: #244640; color: #d0fbed; border-color: #4f887b; }
.ref-symptom { background: #223a44; color: #e2eff5!important; }
.ref-diagnosis { background: #183431; border-color: #4c7b70; }
.ref-diagnosis ol { color: #d5eee9; }
.ref-answer { background: #163c41; border-color: #6fc9c2; color: #d4f5ef; }
.ref-answer-error { background: #173c35; border-color: #73ccb8; color: #e2f6f2; }
.ref-note { background: #183941; color: #dcf3ed; border-color: #638c8f; }
.ref-note p { color: inherit; }
.ref-links { border-color: var(--line); }
.ref-aside { color: var(--muted); }
.ref-code { background: #091821; border-color: #45606b; }
.ref-code-title { background: #1b3541; color: #f5ffff; border-color: #496471; }
/* Labs and demos: execution still isolated. A learner's iframe retains its authored CSS. */
.lab { background: #0d1b24; border-color: #3a5361; box-shadow: 0 12px 24px rgba(0,0,0,.17); }
.lab-head { background: #182d39; border-color: #3f5967; }
.lab-label,.output { color: #eef7f9; }
.lab-badge { color: #c8f0ea; background: #364432; }
.lab button:not(.run) { color: #e8f4f5; background: #223b48; border-color: #617b87; }
.lab button:not(.run):hover { background: #345361; }
.code-input,.lab-grid .code-input { background: #0d1b24; color: #ebf4f7; border-color: #3f5b68; }
.lab-out { background: #11242d; }
.output.info { color: #d9e9ef; }
.editor-tabs { background: #192e3b; border-color: #486372; }
.editor-tabs button { color: #d5e9ed; }
.editor-tabs button[aria-pressed="true"],.editor-tabs button[aria-selected="true"] { color: #a7f2e7; }
.preview-wrap { background: #12252e; }
.preview-status { color: #c7d9e2; }
.preview-frame { background: #fff; /* learner-controlled document: may explicitly use light styles */ }
.project-demo [data-api-out],.demo-products>div,.demo-tasks li { color: var(--ink); background: #1b313b; border-color: var(--line); }
.exercise-results.good { background: #1b3d31; color: #c6fbe1; border-color: #5eae84; }
.exercise-results.bad { background: #402b2c; color: #ffd5cb; border-color: #bf8180; }
.search-results a { background: var(--surface); border-color: var(--line); color: var(--ink); }
.search-results a:hover { background: var(--surface-hover); }
/* High contrast and forced-colors still work with one dark site theme. */
@media (prefers-contrast: more) {
 :root { --muted:#e2f0f3; --line:#829da7; --accent:#a7fff0; }
 .site-nav a,.side-links .side-module-lessons a { color:#f4faff; }
}
@media (max-width: 860px) {
 .lesson-layout { display:block; }
 .lesson-side { position: static; display:none; overflow:auto; max-height:min(65dvh, 540px); margin-bottom:1.4rem; padding:.75rem; }
 .lesson-side.mobile-open { display:block; }
 .lesson-toc-toggle { display:inline-flex!important; width:100%; justify-content:center; min-height:48px; }
 .side-links .side-module-lessons a { min-height:46px; }
}
@media (max-width: 600px) {
 .lesson-toc-toggle { margin:0 0 1.1rem; }
 .lesson-side { max-height:60dvh; }
}
@media (forced-colors: active) {
 :root { color-scheme: dark; }
 .side-links .side-module-lessons a.active { border-left: 3px solid Highlight; }
}
/* The interactive hero's result strip belongs to the dark lab too. */
.hero-demo-bottom { background: #1a323e; border-color: #49616b; color: var(--ink); }
.demo-number { color: #f3fbff; }
.demo-number small { color: #bcd1db; }
.side-title { position:sticky; top:-.9rem; z-index:2; background:#11222b; }
.preview-status { background:#1a323d; border-color:#466471; color:#d4e7ee; }
/* High-visibility controls that inherit legacy foreground colors. */
.skip { background: var(--brand); color: #12212a; font-weight: 800; }
.mini-circle { color: #14212a; }
.ref-search-field>span { color: #bcd4dd; }

/* Edición 2026-10-08: identidad turquesa sin amarillo; lecciones centradas en comprender y practicar. */
:root { --brand: #79dfd3; --accent: #8ee9dd; --accent-soft: #173d40; }
::selection { background:#79dfd3; color:#0a1920; }
:where(a,button,input,textarea,select,summary):focus-visible { outline:3px solid #79dfd3; outline-offset:3px; }
.brand .js { color:#91e9e0; }
.brand-icon,.btn-primary,.lab button.run,.project-demo button.primary { background:#79dfd3; color:#09232a; }
.btn-primary:hover,.lab button.run:hover,.project-demo button.primary:hover { background:#a3f1e5; color:#09232a; }
.brand-icon { box-shadow:none; }
.eyebrow:before,.meter>span { background:var(--brand); }
.accent-highlight { background:linear-gradient(transparent 80%, rgba(121,223,211,.22) 0); }
.promo { background:#18383d; color:#e8faf8; border:1px solid #356970; }
.promo h2,.promo p,.promo .caps,.promo .lead { color:#e8faf8; }
.promo .btn-dark { background:#79dfd3; color:#0c232a; }
.pill.optional { background:#203c48; border-color:#4e8990; color:#d4f6f2; }
.lab-badge { background:#174246; color:#b5f3e9; }
.editor-tabs button[aria-pressed="true"],.editor-tabs button[aria-selected="true"] { color:#a4f5ea; }
.ref-answer { border-color:#79dfd3; background:#193941; color:#e8faf5; }
.ref-note { background:#193941; color:#d7f2ed; border-color:#416b72; }
.ref-search-field:focus-within { border-color:#79dfd3; box-shadow:0 0 0 2px rgba(121,223,211,.2); }
.side-links .side-module-lessons a.active { box-shadow:inset 3px 0 #79dfd3; }
.side-module-title>span,.side-module-lessons a.active .side-lesson-number { color:#a4e9e2; }
/* La lección se lee como un artículo breve: explicación, ejemplo y práctica. */
.lesson-page .lesson-main { min-width:0; }
.lesson-page .lesson-main h1 { max-width:23ch; font-size:clamp(2.05rem,3.15vw,3.05rem); line-height:1.13; letter-spacing:-.037em; margin-top:.8rem; margin-bottom:.85rem; }
.lesson-page .lesson-kicker { margin-top:1.6rem; }
.lesson-page .lesson-goal { max-width:68ch; font-size:clamp(1.045rem,1.4vw,1.15rem); line-height:1.65; margin:0 0 1.2rem; }
.lesson-page .lesson-submeta { margin:0 0 2rem; gap:.45rem; }
.lesson-page .article { max-width:74ch; }
.lesson-page .lesson-copy h2 { font-size:clamp(1.45rem,2vw,1.75rem); line-height:1.2; margin:2.2rem 0 .95rem; }
.lesson-page .lesson-copy h2:first-child { margin-top:.8rem; }
.lesson-page .lesson-copy p { line-height:1.78; margin:.0rem 0 1.05rem; font-size:1.02rem; color:#d1e1e4; }
.lesson-page .lesson-concept { font-size:1.08rem!important; color:#f1faf9!important; font-weight:520; }
.lesson-explained { padding:1.05rem 1.3rem; margin:1.45rem 0 1.8rem; background:#152c35; border-left:3px solid #79dfd3; border-radius:0 12px 12px 0; }
.lesson-explained p { margin:.45rem 0 0!important; }
.lesson-overline { display:block; font-size:.78rem; letter-spacing:.04em; color:#a1eee4; text-transform:uppercase; font-weight:790; }
.lesson-page .lesson-prediction { margin:.25rem 0 1.3rem!important; color:#e1edf0!important; }
.lesson-page .lesson-prediction strong { color:#f4fbfb; }
.lesson-page .lab { margin-top:0; margin-bottom:1.25rem; border-radius:13px; }
.lesson-page .lesson-finish { padding-bottom:0; }
.lesson-page .lesson-finish .disclosure { margin:0 0 1rem; border-color:#456570; background:#112631; }
.lesson-page .lesson-finish .disclosure summary { font-size:.94rem; padding:1.05rem 1.18rem; }
.lesson-task { padding:1.1rem 0 1.25rem; margin:1.25rem 0 1.05rem; border-bottom:1px solid var(--line); }
.lesson-page .lesson-task p { margin:.52rem 0; color:#e4f2f4; }
.lesson-page .lesson-task .small { font-size:.84rem; color:#aec9d0; }
.lesson-end { margin:1.65rem 0 0; border-top:1px solid var(--line); padding:1.3rem 0 1.05rem; }
.lesson-end p { margin:0 0 1.1rem; font-size:.95rem; }
.lesson-end p strong { color:#effbf8; }
.lesson-end-actions { display:flex; align-items:center; gap:1rem 1.2rem; flex-wrap:wrap; }
.lesson-end-actions [data-mark-read] { border:1px solid #588b8e; border-radius:9px; background:#21524f; color:#effefb; min-height:44px; padding:.55rem 1rem; font-weight:700; cursor:pointer; }
.lesson-end-actions [data-mark-read]:hover { background:#2a6a64; }
.lesson-end-actions .link { font-size:.9rem; }
.lesson-source { font-size:.78rem!important; color:#a9c0c9!important; margin:1rem 0 2rem!important; }
.lesson-source a { color:#9ae9e0; }
.lesson-page .lesson-next { border-top:1px solid var(--line); padding-top:1.6rem; }
@media(max-width:600px){
  .lesson-page .lesson-main h1 { font-size:clamp(2rem,8vw,2.55rem); }
  .lesson-page .lesson-submeta { margin-bottom:1.4rem; }
  .lesson-page .lesson-copy h2 { font-size:1.48rem; margin-top:1.8rem; }
  .lesson-explained { padding:.9rem 1rem; margin:1.3rem 0; }
  .lesson-page .lesson-copy p { font-size:1rem; line-height:1.75; }
  .lesson-end-actions { align-items:stretch; flex-direction:column; }
  .lesson-end-actions [data-mark-read] { width:100%; }
}

/* Indicadores de ventana neutros: el amarillo deja de formar parte de la identidad. */
.window-top .dot:nth-child(1) { background:#647e89; }
.window-top .dot:nth-child(2) { background:#7c9ca4; }
.window-top .dot:nth-child(3) { background:#79dfd3; }

/* Curso 2026: lectura pedagógica clara, una idea y una práctica por lección. */
.lesson-new-copy, .lesson-new-finish { max-width: 760px; }
.lesson-new-copy h2 { margin-top: clamp(2rem,4vw,3rem); margin-bottom: .8rem; font-size: clamp(1.45rem,2.2vw,1.86rem); letter-spacing: -.025em; line-height:1.2; }
.lesson-new-copy .lesson-concept { font-size: clamp(1.07rem,1.2vw,1.16rem); line-height: 1.85; color: #e0edf0; margin-bottom: 1rem; }
.lesson-before-example { color:#c3d8df; margin-bottom:.85rem; }
.lesson-syntax-label { color:#9ddfd5!important; font-weight:800; letter-spacing:.045em; font-size:.77rem; text-transform:uppercase; margin-bottom:.35rem; }
.lesson-new-copy .ref-code { margin: .45rem 0 1.25rem; border-radius:12px; overflow:hidden; background:#0b1922; border:1px solid #34515d; }
.lesson-new-copy .ref-code pre { margin:0; background: #0b1922; color:#edf8fb; border:0; border-radius:0; overflow-x:auto; padding:1.2rem; font-size:.91rem; line-height:1.75; tab-size:2; }
.lesson-new-copy .ref-code-title { background: #183039; color:#bde8e5; border-bottom:1px solid #34515d; }
.lesson-steps { padding-left: 1.6rem; margin: 1.35rem 0 1.5rem; }
.lesson-steps li { padding-left:.35rem; margin-bottom:.75rem; line-height:1.8; }
.lesson-steps li::marker { color:#79dfd3; font-weight:800; }
.lesson-mistake { border-left:3px solid #8bb4be; background:#172b35; padding:1rem 1.25rem; border-radius:0 10px 10px 0; margin: 1.5rem 0 1rem; }
.lesson-mistake strong { color:#edf8fa; }
.lesson-mistake p { margin:.3rem 0 0; color:#cadfe4; }
.lesson-task-text { font-size: 1.08rem; color:#e1f0f2!important; line-height:1.8; }
.lesson-target { margin: 1rem 0 1.25rem; background:#153a3a; border:1px solid #477b79; border-radius:12px; padding:1rem 1.3rem; }
.lesson-target strong { color:#adf1e4; }
.lesson-target p { margin:.45rem 0 0; color:#e0f4f2; }
.lesson-hint-nested { margin-top:.75rem; border-top:1px solid #45616a; padding-top:.65rem; }
.lesson-hint-nested summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:700; color:#c2eae7; }
.lesson-hint-nested p, .answer-check p { white-space:pre-line; }
.lesson-new-finish { margin-top:1.25rem; }
.lesson-guided { max-width:760px; background:#152b34; border:1px solid #416570; border-radius:13px; padding:1.25rem 1.5rem; margin:1rem 0 2rem; }
.lesson-guided p { margin:.5rem 0 1rem; color:#d1e4e9; }
.lesson-guided .btn { max-width:100%; white-space:normal; text-align:center; }
.lesson-milestones { margin:1rem 0 0; padding-left:1.45rem; }
.lesson-milestones li { padding:.35rem 0; color:#d9ebed; }
.lesson-end-actions [data-mark-practiced] { min-height:44px; }
.lesson-end-actions [data-mark-practiced][aria-pressed="true"] { background:#21524b; border-color:#83dfcf; color:#d6fff5; }
@media(max-width:600px){
 .lesson-new-copy h2 { margin-top:2rem; }
 .lesson-new-copy .ref-code pre { padding:.85rem; font-size:.82rem; }
 .lesson-new-copy .lesson-concept { line-height:1.75; }
 .lesson-target,.lesson-guided { padding:1rem; }
 .lesson-new-copy .lesson-steps { padding-left:1.35rem; }
}
.lesson-prerequisites { margin: .8rem 0 1.6rem; font-size:.85rem; line-height:1.8; color:#bdd5de; }
.lesson-prerequisites strong { color:#dff3f5; }
.lesson-prerequisites a { color:#a0e9dd; text-underline-offset:.2em; }
.lesson-end-actions [data-mark-practiced]:not([aria-pressed="true"]) { background:#1d313a; color:#e3f2f5; border:1px solid #60808a; cursor:pointer; }
.lesson-end-actions [data-mark-practiced]:not([aria-pressed="true"]):hover { background:#284850; border-color:#9adbd0; }


/* === Experiencia de aprendizaje: circuito de práctica y feedback === */
:root { --learning-success:#a7e6c5; --learning-error:#ffb5ac; --learning-stroke:#2d4855; }
.lesson-page .lesson-main{min-width:0}
.lesson-new-copy{max-width:72ch}
.lesson-new-copy p{line-height:1.77}
.lesson-concept{font-size:clamp(1.05rem,1.2vw,1.18rem);line-height:1.77;max-width:65ch}
.lesson-new-copy h2{margin-block:clamp(2rem,4vw,3rem) 1rem}
.lesson-new-copy .lesson-steps{margin-block:1.3rem 2rem;line-height:1.7}
.lesson-steps li{padding-block:.3rem}
.lesson-before-example{color:#c2d3da}
.lesson-task-text{font-size:1.08rem;line-height:1.65;font-weight:550}
.lesson-target{background:transparent!important;border-left:3px solid #79dfd3!important;box-shadow:none!important;border-radius:0!important;padding:10px 18px!important;margin-block:12px 22px!important}
.lesson-target p{margin:.3rem 0 0}
.lesson-mistake{background:#14242c!important;border:1px solid #31505b!important;border-radius:12px!important;margin-block:24px!important}
.lesson-lab-mission{padding:18px clamp(16px,3vw,28px);background:#18323a;border-bottom:1px solid #345660}
.lesson-lab-mission strong{display:block;color:#a5e9df;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase}
.lesson-lab-mission p{font-size:1.03rem;line-height:1.6;margin:7px 0 0;color:#f0f7f7}
.lesson-verify{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:20px 20px 8px;background:#12232b}
.lesson-verify button{min-height:46px}
.practice-badge,.practice-progress-status{display:inline-flex;align-items:center;color:#c0d8de;font-size:.86rem}
.lesson-feedback{padding:14px 18px;border:1px solid #34535d;border-radius:12px;background:#142831;color:#e2eef1;line-height:1.65;margin:12px 20px 20px;outline-offset:3px}
.lesson-feedback.is-passed{border-color:#619d80;color:#e5f9ee;background:#143128}
.lesson-feedback.is-failed{border-color:#b87570;color:#ffe0d9;background:#322321}
.lesson-feedback:focus-visible{outline:3px solid #92e8dd}
.lab .output{white-space:pre-wrap;overflow-wrap:anywhere}
.lab-code{min-width:0}.lab-code textarea{font-size:clamp(14px,1.25vw,16px);line-height:1.65}
.manual-assessment{padding:clamp(18px,3vw,28px);border:1px solid #3b5660;border-radius:14px;background:#142830;margin-top:20px}
.manual-assessment fieldset{border:0;margin:16px 0;padding:0;min-width:0}
.manual-assessment legend{color:#deebec;font-weight:700;margin-bottom:10px}
.manual-step{display:flex;align-items:flex-start;gap:12px;margin:10px 0;padding:10px 8px;cursor:pointer;line-height:1.6}
.manual-step input{margin-top:5px;accent-color:#79dfd3;width:20px;height:20px;flex-shrink:0}
.manual-assessment [data-manual-status]{color:#d0e3e7;line-height:1.6}
.lesson-end-actions{align-items:center;gap:12px}
.lesson-end-actions [data-mark-read]{background:transparent!important;color:#bdd0d9!important;border:1px solid #38545f!important}
.lesson-end-actions [data-mark-read]:hover{background:#203640!important}
.lesson-end-actions .practice-progress-status{font-weight:600}
.lesson-prerequisites{line-height:1.6}
.lesson-next{margin-top:30px}
button:disabled{opacity:.6;cursor:not-allowed}
@media(max-width:860px){.lesson-lab-mission{padding:16px}.lesson-verify{padding:15px 14px 6px}.lesson-feedback{margin:10px 14px 16px}.lesson-verify button{width:100%}.lesson-lab-mission p{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.lesson-feedback{scroll-behavior:auto}}

/* Navegación curricular desplegable: doce módulos, sin enlaces eliminados */
.lesson-side .side-module>summary{display:flex;align-items:center;gap:.6rem;cursor:pointer;list-style:none;min-height:44px;padding-right:20px;position:relative}
.lesson-side .side-module>summary::-webkit-details-marker{display:none}
.lesson-side .side-module>summary::after{content:"⌄";font-size:1.15rem;color:#b8d9db;position:absolute;right:4px;top:50%;transform:translateY(-50%);transition:transform .15s}
.lesson-side .side-module[open]>summary::after{transform:translateY(-50%) rotate(180deg)}
.lesson-side .side-module>summary:focus-visible{outline:3px solid #79dfd3;outline-offset:2px;border-radius:7px}
.lesson-side .side-module-lessons{padding-bottom:12px}
@media(prefers-reduced-motion:reduce){.lesson-side .side-module>summary::after{transition:none}}