/* EL SEMÁFORO TRAVIESO — SELECCIÓN Y PRESENTACIÓN DE NIVELES */
:root{--ink:#34557f;--blue:#4f9bda;--green:#49c381;--cream:#fffdf7;--shadow:#8ab7cf}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:#b8e8ff}button,a{font:inherit}button{cursor:pointer}[hidden]{display:none!important}button:focus-visible,a:focus-visible{outline:4px solid #ffc451;outline-offset:3px}.levels-page{position:relative;display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:clamp(8px,2vw,24px);background:radial-gradient(circle at 88% 10%,#fff2b6 0 5%,transparent 5.2%),linear-gradient(#a7e1ff,#d9f6ff 78%,#a8dfa9 78%)}.levels-shell,.mission-panel,.tutorial-panel{width:min(1370px,100%);max-height:calc(100dvh - 30px);padding:clamp(12px,2vw,27px);border:5px solid white;border-radius:29px;background:var(--cream);box-shadow:0 9px 0 var(--shadow),0 24px 50px #2e72912a}.levels-shell{display:flex;flex-direction:column;gap:16px;min-height:0}.levels-header{display:grid;grid-template-columns:150px minmax(0,1fr) 125px;align-items:center;gap:14px;padding-bottom:13px;border-bottom:2px solid #e0edf5}.back-button,.play-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 16px;border:3px solid #ffffffa8;border-radius:15px;text-decoration:none;font:700 16px Fredoka,sans-serif;transition:transform .15s,filter .15s}.back-button{background:linear-gradient(#9bd0f9,#65a7e3);color:white;box-shadow:0 5px 0 #3d7db6}.play-button{background:linear-gradient(#8ce9ac,#42bd7d);color:white;box-shadow:0 5px 0 #2a8c58}.back-button:hover,.play-button:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.05)}.play-button:disabled{background:#bdc9d0;box-shadow:0 5px 0 #9aa9b0;cursor:not-allowed}.heading{text-align:center}.heading>span,.eyebrow{color:#6385a3;font-size:clamp(10px,.9vw,13px);font-weight:900;letter-spacing:.14em}.heading h1{margin:2px 0;color:#315e94;font:700 clamp(28px,3vw,46px) Fredoka,sans-serif}.heading p{margin:0;font-size:clamp(12px,1vw,16px);font-weight:800}.progress{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px;border:2px solid #c8ead3;border-radius:17px;background:#eaf9ef}.progress strong{color:#30995e;font:700 28px Fredoka}.progress small{font-size:10px;font-weight:900}.level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.2vw,18px);min-height:0;overflow-y:auto;padding:4px 5px 14px;scrollbar-color:#b0d4e7 transparent}.level-card{display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden;border:3px solid white;border-radius:19px;background:#edf7ff;box-shadow:0 5px 0 #b5d5e8;text-align:left;color:var(--ink);transition:transform .18s,box-shadow .18s}.level-card:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 9px 0 #b5d5e8}.level-card.locked{opacity:.75;filter:saturate(.65);cursor:not-allowed}.level-card.special{background:#fff3d9;box-shadow:0 5px 0 #e6c17b}.card-art{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(150deg,#d2f0ff,#c1e7b4)}.level-card:nth-child(3n+2) .card-art{background:linear-gradient(135deg,#e3d9ff,#b5e8d2)}.level-card:nth-child(3n) .card-art{background:linear-gradient(135deg,#ffe4b5,#b9e5fb)}.card-art:before{content:"🏙️";position:absolute;font-size:clamp(28px,3.3vw,58px);opacity:.65}.card-art img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}.card-art img[hidden]{display:none}.lock{position:absolute;z-index:2;display:grid;place-items:center;width:49px;height:49px;border:3px solid white;border-radius:50%;background:#ffffffdc;font-size:27px;box-shadow:0 4px 9px #24496630}.card-body{display:flex;flex:1;flex-direction:column;gap:6px;padding:clamp(9px,1vw,14px)}.card-body small{color:#6a95b3;font-size:10px;font-weight:900;letter-spacing:.09em}.card-body strong{min-height:2.3em;color:#305b8a;font:600 clamp(14px,1.15vw,19px)/1.15 Fredoka}.card-stars{margin-top:auto;color:#e3a52c;font:700 clamp(16px,1.6vw,24px) Fredoka;letter-spacing:2px}.locked .card-stars{color:#748ca1;font:900 10px Nunito;letter-spacing:.05em}.levels-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:4px 8px 0;border-top:2px solid #e5f0f6;font-size:13px;font-weight:900}.sound-button{width:44px;height:40px;border:2px solid #c8e6f7;border-radius:12px;background:#eaf5ff;color:#4277a2;font-size:23px}.mission-screen,.tutorial-screen{width:100%;display:grid;place-items:center;min-height:0}.mission-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;max-width:1130px;padding:0;overflow:hidden}.mission-illustration{position:relative;display:grid;place-items:center;min-height:400px;background:linear-gradient(145deg,#a9e4ff,#c4e8b3);overflow:hidden}.mission-illustration:before{content:"🚸 🏙️ 🚦";font-size:clamp(45px,5vw,75px);opacity:.65}.mission-illustration img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.mission-illustration img[hidden]{display:none}.mission-illustration>span{position:absolute;top:20px;left:20px;padding:9px 17px;border:3px solid white;border-radius:14px;background:#55c582;color:white;font:700 18px Fredoka}.mission-content{display:flex;flex-direction:column;gap:13px;min-width:0;min-height:0;overflow-y:auto;padding:clamp(20px,3vw,43px)}.mission-content .eyebrow{margin:0}.mission-content h2{margin:0;color:#315e94;font:700 clamp(29px,3vw,46px)/1.1 Fredoka}.mission-content>p:not(.eyebrow){margin:0;font-size:clamp(14px,1.15vw,18px);font-weight:800;line-height:1.5}.objectives{padding:16px 19px;border:2px solid #c8e9d5;border-radius:17px;background:#edfaef}.objectives h3{margin:0 0 9px;color:#318d5d;font:600 21px Fredoka}.objectives ul{margin:0;padding-left:22px;font-size:clamp(13px,1vw,16px);font-weight:800;line-height:1.8}.mission-note{color:#6d89a0;font-size:12px!important}.mission-actions{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:auto}.tutorial-panel{max-width:1130px;text-align:center;overflow-y:auto}.tutorial-panel h2{margin:5px 0 15px;color:#315e94;font:700 clamp(30px,3vw,45px) Fredoka}.tutorial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}.tutorial-grid article{padding:20px 15px;border:3px solid #cce7f7;border-radius:19px;background:#edf8ff}.tutorial-grid article:nth-child(2){background:#fff6df;border-color:#f4e3b3}.tutorial-grid article:nth-child(3){background:#ebf9ef;border-color:#c9ead4}.tutorial-grid article>span{display:block;font-size:clamp(36px,4vw,65px)}.tutorial-grid h3{margin:8px 0;font:600 clamp(17px,1.5vw,23px) Fredoka}.tutorial-grid p{margin:0;font-weight:800;font-size:clamp(12px,1vw,16px);line-height:1.5}.tutorial-specific{display:inline-block;margin:3px auto 15px;padding:10px 17px;border:2px dashed #e7ce89;border-radius:13px;background:#fff7df;font-weight:900}.tutorial-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.rotate-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:linear-gradient(140deg,#9addff,#d7f5ff)}.rotate-card{max-width:440px;padding:27px;background:#fffdf7;border:4px solid white;border-radius:25px;box-shadow:0 9px 0 #7db8d7;text-align:center}.rotate-card>span{display:block;font-size:75px}.rotate-card h2{font:700 32px Fredoka;margin:10px 0}.rotate-card p{font-weight:800;line-height:1.5}@media(max-width:1050px){.level-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.levels-header{grid-template-columns:110px minmax(0,1fr) 95px}.mission-illustration{min-height:300px}}@media(max-height:650px) and (orientation:landscape){.levels-page{padding:5px}.levels-shell,.tutorial-panel{max-height:calc(100dvh - 10px);padding:10px;border-width:3px;border-radius:17px}.levels-shell{gap:8px}.levels-header{padding-bottom:6px}.heading h1{font-size:23px}.heading p{font-size:11px}.progress{padding:4px}.progress strong{font-size:20px}.back-button,.play-button{min-height:34px;padding:5px 10px;font-size:12px}.level-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;padding-bottom:7px}.card-body{padding:6px;gap:3px}.card-body strong{font-size:12px}.card-body small{font-size:8px}.card-stars{font-size:15px}.levels-footer{font-size:10px}.mission-panel{max-height:calc(100dvh - 10px);border-width:3px}.mission-illustration{min-height:0}.mission-content{gap:7px;padding:13px}.mission-content h2{font-size:25px}.mission-content>p:not(.eyebrow){font-size:12px}.objectives{padding:8px 11px}.objectives h3{font-size:15px;margin-bottom:4px}.objectives ul{font-size:11px;line-height:1.5}.tutorial-panel h2{font-size:26px;margin:2px 0 8px}.tutorial-grid{margin:9px 0;gap:8px}.tutorial-grid article{padding:8px}.tutorial-grid article>span{font-size:31px}.tutorial-grid h3{font-size:14px;margin:4px 0}.tutorial-grid p{font-size:11px}.tutorial-specific{padding:6px;font-size:11px;margin:2px auto 8px}}@media(max-width:650px) and (orientation:portrait){.levels-header{grid-template-columns:1fr 1fr}.heading{grid-column:1/-1;grid-row:1}.level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mission-panel{grid-template-columns:1fr;overflow-y:auto}.mission-illustration{min-height:180px;max-height:210px}.mission-content{overflow:visible}.tutorial-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* NUEVO: fondo animado compartido, capa pastel para legibilidad */
html,body{background-image:linear-gradient(110deg,rgba(230,247,255,.79),rgba(239,252,233,.72)),url('../assetsInicio/fondo/fondo.gif')!important;background-position:center!important;background-size:cover!important;background-attachment:fixed!important}
.main-card,.levels-shell,.mission-panel,.tutorial-panel{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}

/* Cuatro instrucciones, cada una con su propio panel */
.tutorial-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tutorial-grid .spatial-card{background:linear-gradient(150deg,#f3edff,#e8f4ff);border-color:#cfc8f4}
.spatial-compass{display:flex;justify-content:center;align-items:center;gap:12px;font:700 33px Fredoka,sans-serif;color:#6385bf;min-height:60px}
.spatial-compass strong{display:grid;place-items:center;width:51px;height:51px;background:#86bcdd;color:white;border-radius:13px;box-shadow:0 5px 0 #547baf}
@media(max-width:900px){.tutorial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px) and (orientation:portrait){.tutorial-grid{grid-template-columns:1fr}}
@media(max-height:650px) and (orientation:landscape){.tutorial-grid article{padding:7px 9px}.tutorial-grid h3{font-size:13px}.tutorial-grid p{font-size:10px}.spatial-compass{min-height:34px;font-size:21px}.spatial-compass strong{width:30px;height:30px}}

/* El fondo ilustrado es exclusivo de la pantalla de inicio. */
html,body{background-image:none!important;background-attachment:scroll!important}