/* Nanoruta · barras de navegación alternativas (A brújula · B cresta · C isla) */
body.nav-a nav,body.nav-b nav,body.nav-c nav{display:none}
body.nav-b .scr{padding-bottom:130px}body.nav-a .scr,body.nav-c .scr{padding-bottom:110px}
.nv-ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.nv-ic .f{fill:currentColor;stroke:none;opacity:.22}
.draw .nv-ic>*{stroke-dasharray:1;stroke-dashoffset:1;animation:nvDraw .7s ease forwards}
.draw .nv-ic>*:nth-child(2){animation-delay:.08s}.draw .nv-ic>*:nth-child(3){animation-delay:.16s}.draw .nv-ic>*:nth-child(4){animation-delay:.24s}
@keyframes nvDraw{to{stroke-dashoffset:0}}
/* micro-animaciones por sección */
.mx-inicio .nv-ic{animation:mxBounce .6s}.mx-mapa .nv-ic{animation:mxUnfold .6s}.mx-mochila .nv-ic{animation:mxWiggle .6s}.mx-sos .nv-ic{animation:mxSpin .8s}.mx-ajustes .nv-ic{animation:mxSpin .8s}.mx-rutas .nv-ic,.mx-refugios .nv-ic{animation:mxBounce .6s}
@keyframes mxBounce{0%{transform:translateY(0)}30%{transform:translateY(-5px) scale(1.1)}60%{transform:translateY(1px) scale(.96)}100%{transform:none}}
@keyframes mxUnfold{0%{transform:scaleX(.3)}60%{transform:scaleX(1.15)}100%{transform:none}}
@keyframes mxWiggle{0%,100%{transform:none}25%{transform:rotate(-14deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-5deg)}}
@keyframes mxSpin{from{transform:rotate(-180deg) scale(.6)}to{transform:none}}

/* ---------- A · BRÚJULA ---------- */
#nvA{position:fixed;inset:0;pointer-events:none;z-index:1001}
#nvA .scrim{position:absolute;inset:0;background:radial-gradient(circle at 50% 100%,#0F1A1Fcc,#0F1A1F66 55%,#0F1A1F22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .35s}
#nvA.open .scrim{opacity:1;pointer-events:auto}
#nvA .cmp{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));width:78px;height:78px;margin-left:-39px;border:0;padding:0;border-radius:50%;pointer-events:auto;cursor:pointer;
 background:radial-gradient(circle at 35% 28%,#fffaf0,#E9DCC6 45%,#B8743A 100%);box-shadow:0 14px 28px #2f5d5066,0 4px 0 #8a5527,inset 0 -6px 12px #0003,inset 0 4px 8px #fff9}
#nvA .cmp:before{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid #2F5D5055;animation:aPulse 2.6s ease-out infinite}
@keyframes aPulse{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
#nvA .rose{position:absolute;inset:6px;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}#nvA.open .rose{transform:rotate(405deg)}
#nvA .needle{transform-origin:50% 50%;animation:aSway 4s ease-in-out infinite;transition:opacity .3s}#nvA.open .needle{opacity:0}
@keyframes aSway{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(22deg)}}
#nvA .x{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#2F5D50;opacity:0;transform:scale(.4) rotate(-90deg);transition:.35s}
#nvA.open .x{opacity:1;transform:none}
#nvA .cur{position:absolute;left:50%;bottom:calc(36px + env(safe-area-inset-bottom));transform:translateX(52px);background:#2F5D50;color:#fff;font:800 12px Inter,sans-serif;padding:7px 12px 7px 10px;border-radius:99px;box-shadow:0 8px 18px #2f5d5044;display:flex;gap:6px;align-items:center;transition:.35s;white-space:nowrap}
#nvA .cur .nv-ic{width:16px;height:16px}#nvA.open .cur{opacity:0;transform:translateX(30px)}
#nvA .it{position:absolute;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));width:56px;margin-left:-28px;border:0;background:none;padding:0;pointer-events:none;opacity:0;cursor:pointer;
 transform:translate(0,0) scale(.2);transition:transform .45s cubic-bezier(.3,1.5,.5,1),opacity .25s;transition-delay:calc(var(--k)*30ms)}
#nvA.open .it{pointer-events:auto;opacity:1;transform:translate(var(--x),var(--y)) scale(1);transition-delay:calc(var(--k)*45ms)}
#nvA .it i{display:flex;width:56px;height:56px;border-radius:50%;align-items:center;justify-content:center;color:#2F5D50;background:linear-gradient(160deg,#fff,#F4EEE3);box-shadow:0 10px 18px #0005,0 3px 0 #d4c6ad,inset 0 2px 4px #fff}
#nvA .it.on i{color:#fff;background:linear-gradient(160deg,#3E7C99,#2F5D50);box-shadow:0 10px 18px #0005,0 3px 0 #1f3f36,0 0 0 3px #FFB34799}
#nvA .it span{display:block;margin-top:5px;color:#fff;font:700 11px Inter,sans-serif;text-align:center;text-shadow:0 1px 4px #000;white-space:nowrap;margin-left:-10px;margin-right:-10px}
#nvA .it.sos i{color:#b11}#nvA .it.sos.on i{color:#fff;background:linear-gradient(160deg,#d33,#8a1212)}

/* ---------- B · CRESTA ---------- */
#nvB{position:fixed;left:0;right:0;bottom:0;overflow:hidden;height:calc(112px + env(safe-area-inset-bottom));z-index:999;pointer-events:none}
#nvB svg.lay{position:absolute;left:0;top:0;width:100%;height:112px;overflow:visible}
#nvB .goo{position:absolute;inset:0;filter:url(#nvGoo)}
#nvB .blob{position:absolute;top:8px;width:58px;height:58px;margin-left:-29px;border-radius:50%;background:#2F5D50;transition:left .6s cubic-bezier(.6,-0.35,.3,1.4)}
#nvB .blob.t{width:40px;height:40px;margin-left:-20px;top:22px;transition:left .85s cubic-bezier(.5,0,.3,1)}
#nvB .base{position:absolute;left:0;right:0;bottom:0;height:calc(10px + env(safe-area-inset-bottom));background:#1f3f36}
#nvB .rw{position:absolute;left:0;top:0;height:112px;-webkit-transition:-webkit-transform .6s cubic-bezier(.6,-0.2,.3,1.3);transition:transform .6s cubic-bezier(.6,-0.2,.3,1.3);will-change:transform}
#nvB svg.lay2{position:absolute;left:0;top:0;height:112px;overflow:visible}
#nvB path.prof{fill:none;stroke:#FFB347;stroke-width:1.6;stroke-dasharray:3 4;opacity:.75}
#nvB .ring{position:absolute;top:13px;width:48px;height:48px;margin-left:-24px;border-radius:50%;border:2px solid #FFB347;box-shadow:0 0 18px #FFB34766,inset 0 0 12px #FFB34733;transition:left .6s cubic-bezier(.6,-0.35,.3,1.4)}
#nvB .it{position:absolute;top:58px;width:64px;height:48px;margin-left:-32px;border:0;background:none;color:#E9F1EC;pointer-events:auto;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:4px 0 0;transition:transform .55s cubic-bezier(.4,1.6,.5,1),color .3s}
#nvB .it span{font:700 10px Inter,sans-serif;margin-top:3px;opacity:.75;transition:.3s;white-space:nowrap}
#nvB .it.on{transform:translateY(-37px);color:#FFC98E}#nvB .it.on .nv-ic{width:26px;height:26px}
#nvB .it.on span{transform:translateY(24px);opacity:1;color:#fff}
#nvB .alt{position:absolute;top:0;margin-left:-30px;width:60px;text-align:center;font:800 9px Inter,sans-serif;color:#2F5D50;transition:left .6s cubic-bezier(.6,-0.35,.3,1.4);letter-spacing:.04em}
body.dark #nvB .alt{color:#7FD1C7}

/* ---------- C · ISLA DINÁMICA ---------- */
#nvC{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:999;touch-action:pan-y;
 background:linear-gradient(180deg,#1b2a31e6,#0F1A1Ff2);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
 border:1px solid #ffffff22;border-radius:32px;box-shadow:0 18px 40px #0F1A1F66,inset 0 1px 0 #ffffff1f;padding:6px;transition:border-radius .45s,box-shadow .3s;max-width:calc(100vw - 24px);box-sizing:border-box}
#nvC.bump{animation:cBump .45s cubic-bezier(.3,1.6,.5,1)}@keyframes cBump{40%{transform:translateX(-50%) scale(1.05,.94)}100%{transform:translateX(-50%)}}
#nvC .row{display:flex;gap:2px;align-items:center}
#nvC .it{display:flex;align-items:center;height:48px;min-width:48px;border:0;border-radius:24px;background:transparent;color:#B9C9CF;padding:0 12px;cursor:pointer;transition:background .35s,color .3s,padding .35s;box-sizing:border-box}
#nvC .it span{max-width:0;overflow:hidden;white-space:nowrap;font:800 13px Inter,sans-serif;transition:max-width .45s cubic-bezier(.3,1.2,.5,1),margin .45s;margin-left:0}
#nvC .it.on{background:linear-gradient(135deg,#2F5D50,#3E7C99);color:#fff;box-shadow:0 6px 16px #3E7C9955,inset 0 1px 0 #ffffff40;padding:0 15px}
#nvC .it.on span{max-width:110px;margin-left:8px}
#nvC .it.sos{color:#ff8a80}#nvC .it.sos.on{background:linear-gradient(135deg,#c62828,#7a1f1f)}
#nvC .more{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s cubic-bezier(.3,1.1,.4,1),opacity .3s,margin .4s}
#nvC.open{border-radius:28px}#nvC.open .more{max-height:190px;opacity:1;margin-bottom:6px}
#nvC .info{display:flex;justify-content:space-between;color:#E8EEF0;font:600 12px Inter,sans-serif;padding:8px 10px 6px}
#nvC .info b{color:#FFC98E}
#nvC .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 2px}
#nvC .cards button{border:0;border-radius:18px;background:#ffffff12;color:#E8EEF0;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;font:700 11px Inter,sans-serif;cursor:pointer;transform:translateY(10px);opacity:0;transition:.4s}
#nvC.open .cards button{transform:none;opacity:1}#nvC.open .cards button:nth-child(2){transition-delay:.06s}#nvC.open .cards button:nth-child(3){transition-delay:.12s}
#nvC .cards button.on{background:linear-gradient(135deg,#2F5D50,#3E7C99)}
#nvC .grab{width:36px;height:4px;border-radius:2px;background:#ffffff40;margin:0 auto 4px;transition:.3s}#nvC.open .grab{background:#FFB347}
#nvC .hint{position:absolute;left:50%;top:-20px;transform:translateX(-50%);animation:cHint 5s forwards;pointer-events:none;font:700 10px Inter,sans-serif;color:#2F5D50;white-space:nowrap;opacity:.7}body.dark #nvC .hint{color:#7FD1C7}

@keyframes cHint{0%,70%{opacity:.75}100%{opacity:0}}#nvC.open .hint{display:none}
#nvC{user-select:none;-webkit-user-select:none;touch-action:none}