/* EL SEMÁFORO TRAVIESO — MENÚ PRINCIPAL */
:root{--ink:#34557f;--blue:#579cde;--cream:#fffdf7;--shadow:#77a9c8;--green:#55c984}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Nunito,system-ui,sans-serif;color:var(--ink)}body{overflow-x:hidden;background:#b4e7ff}button,a{font:inherit}button{cursor:pointer}[hidden]{display:none!important}button:focus-visible,a:focus-visible{outline:4px solid #f9b94d;outline-offset:4px}.menu-scene{isolation:isolate;position:relative;display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:clamp(12px,3vw,35px);overflow:hidden;background:linear-gradient(#a5dfff 0%,#d7f3ff 74%,#a9dfa9 74%)}.sky{position:absolute;inset:0;z-index:-3;pointer-events:none}.sun{position:absolute;top:-5%;right:9%;width:clamp(95px,13vw,230px);aspect-ratio:1;border-radius:50%;background:#fff3b3;box-shadow:0 0 70px #fff6b555}.cloud{position:absolute;width:155px;height:48px;border-radius:50px;background:#ffffffd9;animation:float 7s ease-in-out infinite alternate}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud:before{width:80px;height:80px;left:25px;bottom:9px}.cloud:after{width:64px;height:64px;right:15px;bottom:4px}.cloud-a{top:14%;left:8%}.cloud-b{top:24%;right:9%;transform:scale(.85)}.scene-img{position:absolute;z-index:-1;object-fit:contain;filter:drop-shadow(0 10px 3px #244e6d2b);pointer-events:none}.school{left:4%;bottom:31%;width:clamp(95px,15vw,255px)}.child{left:15%;bottom:10%;width:clamp(85px,13vw,205px);animation:bob 2.4s ease-in-out infinite}.family{right:4%;bottom:29%;width:clamp(100px,16vw,245px)}.car{right:16%;bottom:9%;width:clamp(100px,17vw,275px)}.road{position:absolute;inset:auto 0 0;height:24%;z-index:-2;background:#7a8d9f;border-top:12px solid #d8e5e9}.road:before{content:"";position:absolute;top:51%;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,#ffefb1 0 85px,transparent 85px 130px)}.crosswalk{position:absolute;top:0;bottom:0;left:48%;width:15%;background:repeating-linear-gradient(0deg,#fff 0 14px,transparent 14px 27px)}.signal-decoration{position:absolute;right:17%;bottom:29%;z-index:-1;display:grid;gap:5px;padding:8px;border:4px solid #34475b;border-radius:18px;background:#425569;box-shadow:0 5px 0 #2c3c4b}.signal-decoration i{display:block;width:25px;height:25px;border-radius:50%;background:#f26876;box-shadow:inset 0 -3px 0 #0002}.signal-decoration i:nth-child(2){background:#fbd16d}.signal-decoration i:nth-child(3){background:#59d795}.main-card{position:relative;z-index:1;width:min(820px,85vw);padding:clamp(24px,3.5vw,54px);text-align:center;background:var(--cream);border:5px solid white;border-radius:34px;box-shadow:0 11px 0 var(--shadow),0 25px 55px #397fa126}.eyebrow{margin:0;color:#66809d;font-size:clamp(11px,1vw,16px);font-weight:900;letter-spacing:.15em}.custom-logo{display:block;max-width:min(400px,85%);max-height:90px;object-fit:contain;margin:5px auto}.main-card h1{margin:13px 0;color:#345e96;font:700 clamp(40px,5vw,76px)/1.04 Fredoka,sans-serif}.main-card h1 span{display:block;color:#eeb457;text-shadow:0 5px 0 #ffe5a6}.description{max-width:650px;margin:15px auto 25px;font-size:clamp(16px,1.5vw,23px);line-height:1.4;font-weight:900}.actions{display:flex;align-items:center;justify-content:center;gap:16px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:10px 24px;border:3px solid #fff9;border-radius:18px;color:white;font:700 clamp(16px,1.4vw,22px) Fredoka,sans-serif;text-decoration:none;transition:transform .16s,filter .16s}.btn:hover{transform:translateY(-3px);filter:brightness(1.06)}.btn:active{transform:translateY(3px)}.btn-play{background:linear-gradient(#7ae5a0,#40bd7a);box-shadow:0 6px 0 #2e915d}.btn-sound{width:60px;padding:8px;background:#e6f3ff;border-color:#cce6fa;color:#4577a7;box-shadow:0 6px 0 #b7d5eb;font-size:26px}.landscape{display:inline-block;margin:26px auto 6px;padding:11px 18px;border:2px dashed #9ac8e7;border-radius:14px;background:#ecf7ff;font-weight:900;font-size:clamp(11px,1vw,15px)}.credits-link{display:block;margin:10px auto 0;padding:5px 10px;border:0;background:none;color:#6482a0;text-decoration:underline;font-size:13px;font-weight:900}.credits-dialog{width:min(480px,90vw);padding:30px;border:4px solid #fff;border-radius:25px;background:#fffdf7;box-shadow:0 10px 0 #77a9c8;text-align:center;color:var(--ink)}.credits-dialog::backdrop{background:#193a5d9c;backdrop-filter:blur(4px)}.credits-dialog h2{font:700 33px Fredoka;margin:0 0 12px}.credits-dialog p{line-height:1.6}.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:26px;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;animation:tilt 2s ease-in-out infinite}.rotate-card h2{font:700 33px Fredoka;margin:12px 0}.rotate-card p{font-weight:800;line-height:1.5}@keyframes float{to{translate:30px 0}}@keyframes bob{50%{translate:0 -8px}}@keyframes tilt{50%{transform:rotate(18deg)}}@media(max-height:600px) and (orientation:landscape){.menu-scene{padding:8px}.main-card{padding:13px 22px;width:min(740px,77vw);border-radius:23px}.main-card h1{font-size:clamp(32px,4vw,53px);margin:7px 0}.description{font-size:13px;margin:8px auto 12px}.custom-logo{max-height:45px}.landscape{margin:12px auto 2px;padding:6px 10px}.btn{min-height:39px;padding:6px 16px;font-size:15px}.btn-sound{width:44px;font-size:19px}.credits-link{margin:3px auto}.school{bottom:32%}.family{bottom:32%}}@media(max-width:700px) and (orientation:portrait){.main-card{width:min(100%,540px)}.scene-img{opacity:.6}.main-card h1{font-size:clamp(34px,8vw,57px)}}@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)}

/* FONDO EXCLUSIVO DE INICIO: ilustración proporcionada por la autora */
html,body{background:#bce7ef!important;background-image:none!important}
.menu-scene{background:linear-gradient(90deg,rgba(247,253,255,.10),rgba(247,253,255,.06)),url('../assetsInicio/fondo/fondo-personalizado.png') center center/cover no-repeat!important}
/* La ilustración ya contiene ciudad, carretera y edificios. No duplicarlos. */
.menu-scene>.sky,.menu-scene>.scene-img,.menu-scene>.road,.menu-scene>.signal-decoration{display:none!important}
.main-card{background:rgba(255,253,247,.94);border:4px solid #fff;box-shadow:0 10px 0 #83b3b7,0 26px 55px #304c5b42;backdrop-filter:blur(5px)}
@media(max-width:800px){.menu-scene{background-position:center!important}.main-card{width:min(95vw,730px)}}