@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#071325;--panel:#0d1b32;--txt:#eef5ff;--muted:#a6b9d0;--cyan:#61e5ed;--line:#28405d;--header:72px;--footer:30px;font-family:'DM Sans',system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:300px;min-height:100dvh;background:radial-gradient(ellipse at 15% 10%,#123e59 0%,transparent 42%),radial-gradient(ellipse at 90% 85%,#281e4c 0%,transparent 44%),var(--bg);color:var(--txt);overflow-x:hidden}h1,h2,h3,p{margin-top:0}h1,h2,h3,.brand{font-family:'Space Grotesk',system-ui,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:disabled{opacity:.32;cursor:not-allowed}a:focus-visible,button:focus-visible{outline:3px solid #ffdd79;outline-offset:4px}.skip{position:absolute;left:1rem;top:-5rem;background:white;color:black;padding:.6rem;z-index:10}.skip:focus{top:.3rem}.header{height:var(--header);display:flex;align-items:center;gap:25px;padding:0 clamp(18px,4vw,65px);border-bottom:1px solid #263e58;background:#071526dd}.brand{display:flex;gap:12px;align-items:center;line-height:1.05;font-size:14px;letter-spacing:.11em}.brand small{display:block;font-size:9px;color:#93b3cc;letter-spacing:.19em;margin-top:5px}.brand-icon{width:37px;height:37px;display:grid;place-items:center;border:1px solid #3b91ac;border-radius:11px;color:var(--cyan);font-weight:700;font-size:20px}.brand-icon span{font-size:10px;position:relative;top:-8px}.topnav{margin-left:auto;display:flex;gap:7px;align-items:center}.topnav a{padding:10px 17px;border-radius:10px;color:#b1c4d7;font-size:14px}.topnav a:hover,.topnav a[aria-current=page]{background:#19364d;color:#fff}.header-progress{border:1px solid #31516a;color:#91d7dd;font-size:12px;border-radius:30px;padding:7px 12px}.viewport{height:calc(100dvh - var(--header) - var(--footer));min-height:460px;padding:clamp(12px,2.5vh,26px) clamp(14px,3.2vw,46px);display:flex;align-items:stretch}.glass{border:1px solid #2a4a67;background:linear-gradient(135deg,#102843e8,#0a1930f2);border-radius:24px;box-shadow:0 26px 80px #0004;overflow:hidden;position:relative;width:100%}.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:700;color:var(--cyan);text-transform:uppercase}.button{min-height:42px;display:inline-flex;gap:15px;justify-content:center;align-items:center;padding:11px 19px;border:1px solid transparent;border-radius:12px;font-weight:700;font-size:13px;white-space:nowrap}.primary{background:linear-gradient(90deg,#6be6e7,#4db8e7);color:#082036}.ghost,.outline{border-color:#42617b;background:#162940a1;color:#edf7ff}.button:hover{filter:brightness(1.13)}.tiny{font-size:12px;line-height:1.55;color:#9ab5ca}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.foot{height:var(--footer);display:flex;justify-content:space-between;align-items:center;gap:15px;padding:0 clamp(16px,4vw,60px);font-size:10px;color:#7797b0}.hero{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;padding:clamp(22px,5vw,75px);gap:15px}.hero-text{position:relative;z-index:1;max-width:650px}.hero h1{font-size:clamp(38px,5.3vw,76px);line-height:1.05;letter-spacing:-.06em;margin:19px 0}.hero h1 em{color:#6fe9ec;font-style:normal}.hero-text>p:not(.tiny){max-width:480px;font-size:clamp(14px,1.5vw,19px);color:#c1d2e4;line-height:1.6}.facts{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}.facts span{font-size:12px;color:#a8cfdf;background:#1d3853;border:1px solid #365873;border-radius:20px;padding:8px 12px}.hero .tiny{margin:24px 0 0;max-width:520px}.hero-art{height:100%;min-height:260px;position:relative;display:grid;place-items:center}.orb{position:absolute;border-radius:50%;border:1px solid #3d90a8}.orb-one{width:min(32vw,430px);aspect-ratio:1;box-shadow:inset 0 0 60px #218fab30,0 0 80px #22bed224}.orb-two{width:min(23vw,310px);aspect-ratio:1;border-style:dashed;transform:rotate(20deg)}.equation{position:relative;z-index:1;display:flex;gap:clamp(7px,1.5vw,22px);align-items:center;font-size:clamp(26px,3.7vw,61px);font-weight:700;color:#f2fcff;text-shadow:0 0 28px #56deec99}.equation .equals{color:#5adddd}.x-disk{position:absolute;bottom:13%;right:14%;background:#2b5482;border:1px solid #54bdde;padding:16px 22px;border-radius:15px;transform:rotate(-9deg);font-weight:700}.floating-note{position:absolute;top:13%;font-size:10px;letter-spacing:.2em;color:#7cbbd0}.map-layout{padding:clamp(18px,3vh,38px) clamp(18px,4vw,60px);display:flex;flex-direction:column;justify-content:space-between}.map-heading{display:flex;align-items:center;justify-content:space-between}.map-heading h1,.challenge h1{font-size:clamp(30px,3.4vw,52px);margin:7px 0}.map-heading p,.challenge>p{color:#b9cfe2;font-size:14px;line-height:1.5}.completion{width:105px;height:105px;border-radius:50%;border:5px solid #315573;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0}.completion span{font-size:28px;font-weight:700;color:#72e3e8}.completion small{font-size:9px;color:#9bb7cd}.route{position:relative;flex:1;min-height:250px;max-height:450px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:14px;margin:10px 0}.route-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.route-line path{fill:none;stroke:#4a86ad;stroke-width:3;stroke-dasharray:9 10}.map-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:16px 10px;background:#112941;border:1px solid #3a6684;border-radius:19px;transition:transform .15s,border-color .15s}.map-node:hover{transform:translateY(-7px);border-color:#7ee9f0}.node-2,.node-4{align-self:end;margin-bottom:12px}.node-1,.node-3{align-self:start;margin-top:18px}.node-num{display:grid;place-items:center;width:55px;height:55px;border-radius:50%;font-size:19px;font-weight:700;background:#1a435e;border:2px solid #54d5e9;color:#85f2f3}.violet .node-num{border-color:#bb91ee;color:#e2c2ff}.teal .node-num{border-color:#54d7be;color:#7bead1}.amber .node-num{border-color:#ffc871;color:#ffe1a1}.node-meta{display:grid;gap:4px}.node-meta strong{font-size:clamp(12px,1.3vw,17px)}.node-meta small{color:#a7c5d9;font-size:12px}.node-status{font-size:10px;color:#a4b9cb;border-radius:12px;background:#223b52;padding:5px 9px}.map-node.visited .node-status{background:#174c47;color:#94f2d4}.map-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:12px;color:#9dbbd0}.room{display:flex;flex-direction:column;padding:clamp(16px,2.4vh,30px) clamp(18px,3vw,45px);--accent:#66e9e9}.tone-violet .room{--accent:#c49aff}.tone-teal .room{--accent:#59e5c3}.tone-amber .room{--accent:#ffd280}.room .eyebrow{color:var(--accent)}.room-top{display:flex;justify-content:space-between;align-items:center;gap:20px}.room-top h1{font-size:clamp(24px,2.8vw,42px);line-height:1.12;margin:7px 0}.room-top p{font-size:13px;color:#b2cfe0;margin:0}.room-center{flex:1;min-height:0;display:grid;grid-template-columns:minmax(210px,.74fr) minmax(300px,1.5fr);gap:clamp(15px,3vw,42px);padding:15px 0}.resource-intro{align-self:center}.resource-intro h2{font-size:clamp(25px,2.5vw,43px);margin:12px 0}.resource-intro>p{font-size:clamp(13px,1.2vw,17px);line-height:1.55;color:#b9cde0}.tool-tag{display:inline-block;padding:9px 12px;border:1px solid #48617c;border-radius:22px;color:#add1dc;font-size:12px;margin-top:12px}.resource-tip{max-width:260px;font-size:12px;color:#91acc4;line-height:1.5;margin-top:20px}.resource-frame{min-height:0;background:#07182d;border:1px solid #365675;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}.frame-head{height:32px;background:#1b3651;display:flex;align-items:center;gap:5px;padding:0 13px;flex-shrink:0}.dot{height:7px;width:7px;background:#5e8aa3;border-radius:50%}.frame-head #resource-counter{margin-left:auto;color:#b2d1e7;font-size:10px;letter-spacing:.09em}.frame-body{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:15px 26px}.resource-symbol{width:clamp(55px,7vh,92px);aspect-ratio:1;border-radius:20px;display:grid;place-items:center;background:#12395d;color:var(--accent);font-size:clamp(35px,5vh,56px);border:1px solid #41648c;margin-bottom:12px}.frame-body h3{font-size:clamp(15px,1.5vw,23px);margin:5px 0 8px}.frame-body p{font-size:12px;line-height:1.5;max-width:380px;color:#a6bfd3}.room-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;border-top:1px solid #2e4965;padding-top:12px}.resource-switch,.room-actions{display:flex;align-items:center;gap:10px}.circle-button{width:34px;height:34px;background:#1b3d5b;border:1px solid #416782;color:#e5faff;border-radius:50%;font-size:18px}.dots{display:flex;align-items:center;gap:7px}.dot-button{width:10px;height:10px;border:0;border-radius:15px;background:#41627b;padding:0}.dot-button[aria-pressed=true]{width:25px;background:var(--accent)}.room-actions .button{padding:9px 12px;font-size:12px}.info-dialog{max-width:510px;width:calc(100% - 32px);background:#102641;color:#ecf7ff;border:1px solid #5b8daf;border-radius:18px;padding:28px;box-shadow:0 30px 100px #0008}.info-dialog::backdrop{background:#010a18c9}.dialog-head{display:flex;justify-content:space-between;align-items:center}.info-dialog h2{font-size:32px;margin:12px 0}.info-dialog p{line-height:1.65;color:#c1d5e4}.challenge{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;gap:13px}.challenge h1{max-width:720px}.challenge>p{max-width:630px}.challenge-glow{font-size:clamp(38px,7vh,85px);color:#ffe08f;text-shadow:0 0 40px #ffbd42}.challenge-data{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:10px 0}.challenge-data>div{display:grid;gap:6px;background:#19344f;padding:12px 22px;border-radius:12px}.challenge-data strong{font-size:22px;color:#81e6ed}.challenge-data small{font-size:11px;color:#b6ccda}.future-note{font-size:12px;color:#f1d9a3;background:#5a441a55;border:1px solid #a58b5080;border-radius:10px;max-width:620px;padding:11px 15px}.centered{justify-content:center}@media(max-width:760px){:root{--header:62px;--footer:0px}.header{padding:0 13px;gap:10px}.brand{font-size:10px;gap:7px}.brand-icon{width:30px;height:30px}.brand small{font-size:7px}.topnav{gap:0}.topnav a{font-size:11px;padding:8px}.header-progress,.foot{display:none}.viewport{min-height:calc(100dvh - var(--header));height:auto;padding:12px}.hero{grid-template-columns:1fr;padding:27px;min-height:calc(100dvh - 86px)}.hero-art{min-height:190px;grid-row:1}.orb-one{width:200px}.orb-two{width:140px}.equation{font-size:31px}.hero h1{font-size:40px}.facts{margin:15px 0}.map-layout{min-height:calc(100dvh - 86px);padding:22px 16px}.map-heading h1{font-size:30px}.map-heading p{font-size:12px}.completion{height:70px;width:70px;border-width:3px}.completion span{font-size:20px}.route{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-height:none;min-height:0;margin:20px 0}.route-line{display:none}.map-node,.node-1,.node-2,.node-3,.node-4{margin:0;align-self:stretch;min-height:140px}.map-bottom{flex-wrap:wrap}.room{min-height:calc(100dvh - 86px);padding:18px}.room-top{align-items:flex-start}.room-top h1{font-size:27px}.room-top .button{padding:8px;font-size:11px;white-space:normal}.room-center{display:flex;flex-direction:column;gap:12px;min-height:360px}.resource-intro{align-self:stretch}.resource-intro h2{font-size:24px;margin:5px 0}.resource-intro>p{margin-bottom:4px}.tool-tag,.resource-tip{display:none}.resource-frame{flex:1;min-height:240px}.room-bottom{flex-direction:column;align-items:stretch}.resource-switch{justify-content:center}.room-actions{justify-content:space-between;flex-wrap:wrap}.room-actions .button{font-size:11px}.challenge{min-height:calc(100dvh - 86px)}.challenge h1{font-size:30px}}@media(max-height:650px) and (min-width:761px){.viewport{min-height:460px;height:auto}.hero{min-height:460px}.room{min-height:460px}.map-layout{min-height:460px}.challenge{min-height:460px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Fase 4, versión 4: feedback audiovisual accesible y navegación protegida. */
.sound-toggle{border:1px solid #345876;background:#102940;color:#bfe7f1;padding:8px 11px;border-radius:14px;white-space:nowrap;font-size:12px}
.sound-toggle:hover,.sound-toggle:focus-visible{border-color:#67e9f2;background:#164061}
a.button,button.button,.circle-button,.map-node,.topnav a,.sound-toggle,.dot-button{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,filter .18s ease}
a.button:hover,button.button:hover,.circle-button:not(:disabled):hover,.sound-toggle:hover{transform:translateY(-2px);box-shadow:0 4px 22px #57e5ed26}
a.button:active,button.button:active,.circle-button:active,.map-node:active{transform:scale(.97)}
.locked-link{border-style:dashed!important;opacity:.78}.lock-dialog h2{font-size:clamp(23px,3vw,32px)}
.frame-body #explore-resource{font-size:11px;margin-top:10px;white-space:normal;max-width:300px}
.success-dialog{border-color:#49bcb2;box-shadow:0 0 50px #40d5b52b,0 30px 100px #0008}
@media(max-width:900px){.header{gap:8px}.sound-toggle{padding:7px 8px;font-size:11px}.header-progress{display:none}}
@media(max-width:420px){.brand small{display:none}.brand{font-size:9px}.sound-toggle{font-size:0;padding:7px}.sound-toggle::before{content:'♫';font-size:17px}.topnav a{padding:7px 5px;font-size:10px}}
@media(prefers-reduced-motion:reduce){a.button,button.button,.circle-button,.map-node,.topnav a,.sound-toggle,.dot-button{transition:none!important;transform:none!important}}

/* Fase 5: acceso a los cinco recursos originales de Wordwall. */
.wordwall-resource{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(5px,1.1vh,12px);padding:8px 3px;overflow-y:auto}
.wordwall-mark{width:clamp(35px,6vh,64px);height:clamp(35px,6vh,64px);display:grid;place-items:center;border-radius:15px;background:#194b65;border:1px solid #5ee9ec;color:#85faff;font-size:clamp(22px,3vh,34px);font-weight:800;flex-shrink:0}
.wordwall-resource h3{font-size:clamp(15px,1.4vw,22px);max-width:540px;margin:0}
.wordwall-resource p{margin:0;line-height:1.4;max-width:560px}
.wordwall-resource .wordwall-credit{color:#a2d7e5;font-size:12px}
.wordwall-resource .wordwall-note{color:#93aebc;font-size:11px;max-width:450px}
.wordwall-resource .button{white-space:normal;min-height:40px}
@media(max-width:760px){.wordwall-resource{min-height:240px;padding:10px}.wordwall-resource h3{font-size:17px}}

/* Wordwall: visor único adaptable, sin abandonar la sala. */
#resource-area:has(.embed-resource){padding:0!important;display:block!important;min-height:0!important}
.embed-resource{height:100%;min-height:0;display:flex;flex-direction:column;width:100%;text-align:left}
.embed-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 12px;background:#0d2a45;color:#b6dbe7;font-size:11px;flex-shrink:0}
.embed-toolbar .button{min-height:30px;padding:5px 11px;font-size:11px}
.embed-stage{position:relative;flex:1;min-height:160px;background:#f7fafc;color:#13314c;overflow:hidden}
.wordwall-iframe{display:block;width:100%;height:100%;border:0;background:white}
.embed-status{height:100%;width:100%;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;font-size:13px;color:#24455e}
.embed-status p{color:#24455e!important;margin:0;max-width:370px}
@media(max-width:760px){.embed-stage{min-height:300px}.embed-toolbar{flex-wrap:wrap}.room-center:has(.embed-resource){min-height:440px}}

/* Visores de las salas integradas */
.embed-help{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;background:#10233b;color:#aec8dd;font-size:10px;flex-wrap:wrap}.embed-help a{color:#78e5ee;text-decoration:underline}.embed-resource{height:100%;width:100%;display:flex;flex-direction:column;min-height:0}.embed-toolbar{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#10233b;color:#d2e7f3;font-size:10px}.embed-stage{flex:1;min-height:160px}.frame-body{padding:0!important;overflow:hidden}.wordwall-iframe{width:100%;height:100%;border:0;background:white}@media(max-width:760px){.embed-stage{min-height:320px}}


/* Fase 5: visores amplios con altura prioritaria; diseño sin desbordamiento horizontal. */
@media(min-width:761px){
  .viewport:has(.room){padding:9px clamp(12px,2.5vw,40px);}
  .room{padding:12px clamp(16px,2.3vw,36px) 10px;}
  .room-top{gap:12px;}
  .room-top h1{font-size:clamp(24px,2.35vw,36px);margin:3px 0;}
  .room-top p{font-size:12px;}
  .room-top .button{padding:7px 11px;font-size:11px;white-space:nowrap;}
  .room-center{padding:7px 0 8px;gap:clamp(14px,2vw,30px);grid-template-columns:minmax(185px,.61fr) minmax(310px,1.75fr);}
  .resource-intro h2{font-size:clamp(22px,2.1vw,35px);margin:7px 0;line-height:1.15;}
  .resource-intro>p{font-size:clamp(12px,1vw,15px);line-height:1.45;}
  .resource-tip{margin-top:10px;}
  .tool-tag{margin-top:8px;padding:6px 10px;}
  .room-bottom{padding-top:7px;}
  .embed-toolbar{padding:4px 9px;}
  .embed-help{padding:3px 8px;}
  .embed-stage{min-height:300px;}
}
@media(min-width:761px) and (max-height:730px){
  .room-top h1{font-size:26px}
  .resource-tip{display:none}
  .resource-intro h2{font-size:24px}
}
@media(max-width:760px){
 .room-top .button{font-size:10px;padding:6px 8px;}
 .room-center:has(.embed-resource){min-height:620px;}
 .resource-frame:has(.embed-resource){min-height:480px;}
 .embed-stage{min-height:430px;}
}

/* Fase 5 — evaluacion original y encuesta local */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.quiz-layout{align-items:stretch;justify-content:flex-start;text-align:left;gap:12px;padding:clamp(18px,3vh,32px) clamp(20px,4vw,55px)}
.quiz-topline{display:flex;justify-content:space-between;gap:14px;align-items:center}.quiz-topline #quiz-step{font-size:12px;color:#b5d4e3}
.quiz-meter{height:7px;background:#26445a;border-radius:20px;overflow:hidden}.quiz-meter>div{width:0;height:100%;background:linear-gradient(90deg,#6ce8e6,#a68bff);transition:width .25s ease}
.quiz-content{width:min(780px,100%);margin:auto}.quiz-content h1{font-size:clamp(23px,2.5vw,37px);line-height:1.2;margin-bottom:12px}.quiz-context{color:#abc5dc;font-size:13px}
.quiz-content fieldset,.vote-form fieldset{border:0;padding:0;margin:0;min-width:0}.quiz-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
.quiz-option{display:flex;cursor:pointer;position:relative}.quiz-option input{position:absolute;opacity:0}.quiz-option span{width:100%;display:block;padding:15px;border:1px solid #41647e;border-radius:12px;background:#18314a;line-height:1.4}.quiz-option:hover span{border-color:#7ad8e7;background:#21405c}.quiz-option input:checked+span{border-color:#75e7ed;background:#1a4c60}.quiz-option input:focus-visible+span{outline:3px solid #ffdf89;outline-offset:3px}
.quiz-controls{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.quiz-feedback{padding:15px;border:1px solid #537e9b;border-radius:13px;background:#16354b;color:#e6f5ff;line-height:1.5;text-align:left;margin:12px 0}.quiz-feedback.good{border-color:#61c9aa;background:#12493e}.quiz-feedback.needs-review{border-color:#e8bf79;background:#4b3921}.quiz-next{margin-top:8px}.quiz-result{width:min(870px,100%);margin:auto;text-align:center;overflow:auto}.quiz-result>p{color:#bdd1e1}.quiz-result-details{max-height:min(38vh,260px);overflow:auto;text-align:left;border:1px solid #35546d;padding:8px 17px;border-radius:12px;margin:15px 0}.quiz-result-details p{font-size:12px;line-height:1.5;color:#d2e6f1;margin:8px 0}
.vote-layout{gap:10px}.vote-layout h1{font-size:clamp(25px,3vw,40px)}.vote-form{width:min(730px,100%)}.vote-form legend{font-size:14px;color:#c5dbea;margin-bottom:13px}.vote-options{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}.vote-options label{cursor:pointer;position:relative}.vote-options input{position:absolute;opacity:0}.vote-options span{display:block;padding:15px;border:1px solid #44617e;border-radius:12px;background:#1a334d}.vote-options input:checked+span{border-color:#72e8ed;background:#235569}.vote-options input:focus-visible+span{outline:3px solid #ffdf89;outline-offset:3px}.vote-note{font-size:11px!important;max-width:560px;color:#97b7cc!important}
@media(max-width:760px){.quiz-layout{min-height:calc(100dvh - 80px);padding:17px;overflow:visible}.quiz-choices{grid-template-columns:1fr}.quiz-option span{padding:12px}.quiz-result-details{max-height:none}.quiz-topline{flex-wrap:wrap}.vote-layout{padding:20px 15px}}
@media print{body{background:white;color:black}.header,.foot,.quiz-topline,.quiz-meter,.quiz-content,.quiz-result .actions,.vote-form{display:none!important}.viewport{height:auto}.glass{box-shadow:none;border:0;background:white;color:black}.quiz-result-details{max-height:none;overflow:visible}.quiz-result-details p,.quiz-result>p{color:black}}