/* BoA Crew 57.89 · navegación móvil Liquid Glass para Android, iOS y navegador */
@media (max-width:899px) {
  .mobile-nav {
    --glass-fg:#07182e;
    --glass-muted:rgba(7,24,46,.72);
    --glass-shell:rgba(247,250,253,.105);
    --glass-shell-rich:rgba(247,250,253,.055);
    --glass-line:rgba(255,255,255,.76);
    --glass-lowlight:rgba(50,67,88,.22);
    --glass-shadow:rgba(0,12,30,.26);
    left:50%;
    right:auto;
    bottom:max(9px,env(safe-area-inset-bottom));
    width:min(calc(100% - max(24px,env(safe-area-inset-left) + env(safe-area-inset-right))),520px);
    min-height:68px;
    padding:5px;
    overflow:visible;
    isolation:isolate;
    border:1px solid color-mix(in srgb,var(--glass-line) 76%,rgba(72,91,115,.34));
    border-radius:32px;
    color:var(--glass-fg);
    background:var(--glass-shell);
    box-shadow:
      0 13px 34px var(--glass-shadow),
      0 2px 8px rgba(0,8,24,.13),
      inset 0 1px 0 rgba(255,255,255,.86),
      inset 0 -1px 0 var(--glass-lowlight),
      inset 1px 0 0 rgba(255,255,255,.38),
      inset -1px 0 0 rgba(255,255,255,.2);
    backdrop-filter:blur(13px) saturate(190%) contrast(110%) brightness(1.025);
    -webkit-backdrop-filter:blur(13px) saturate(190%) contrast(110%) brightness(1.025);
    transform:translate3d(-50%,0,0);
    transition:min-height .34s cubic-bezier(.22,1,.36,1),padding .34s cubic-bezier(.22,1,.36,1),transform .34s cubic-bezier(.22,1,.36,1),background-color .24s ease,border-color .24s ease,box-shadow .24s ease;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;
  }

  /* Optical rim and soft color spill. The body stays neutral so content remains visible. */
  .mobile-nav::before {
    content:"";
    position:absolute;
    z-index:0;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:
      radial-gradient(78% 92% at var(--glass-sheen-x,50%) -28%,rgba(255,255,255,.62),transparent 55%),
      linear-gradient(103deg,rgba(99,214,255,.075),transparent 23%,transparent 73%,rgba(226,134,255,.07)),
      linear-gradient(180deg,rgba(255,255,255,.19),transparent 37%,rgba(22,34,52,.055));
    opacity:.78;
  }

  .mobile-nav::after {
    content:"";
    position:absolute;
    z-index:0;
    left:8%;
    right:8%;
    bottom:-16px;
    height:27px;
    pointer-events:none;
    border-radius:50%;
    background:rgba(0,9,25,.2);
    filter:blur(12px);
    opacity:.5;
  }

  .mobile-nav.glass-over-dark,
  [data-theme="dark"] .mobile-nav {
    --glass-fg:#fff;
    --glass-muted:rgba(245,249,255,.8);
    --glass-shell:rgba(9,11,15,.145);
    --glass-shell-rich:rgba(6,8,11,.085);
    --glass-line:rgba(255,255,255,.34);
    --glass-lowlight:rgba(0,0,0,.32);
    --glass-shadow:rgba(0,0,0,.48);
    background:var(--glass-shell);
    backdrop-filter:blur(13px) saturate(184%) contrast(114%) brightness(.91);
    -webkit-backdrop-filter:blur(13px) saturate(184%) contrast(114%) brightness(.91);
  }

  .mobile-nav.glass-over-light { background:var(--glass-shell); }
  .mobile-nav.glass-over-photo {
    background:var(--glass-shell-rich);
    backdrop-filter:blur(8px) saturate(205%) contrast(114%);
    -webkit-backdrop-filter:blur(8px) saturate(205%) contrast(114%);
  }

  .mobile-nav-glass-depth,
  .mobile-nav-reflection {
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    border-radius:inherit;
  }

  .mobile-nav-glass-depth {
    z-index:0;
    background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.018) 46%,rgba(8,19,34,.045));
    box-shadow:inset 0 0 22px rgba(255,255,255,.08);
    mix-blend-mode:soft-light;
  }

  .mobile-nav-glass-depth::before {
    content:"";
    position:absolute;
    inset:-22% -8%;
    background:linear-gradient(104deg,transparent 20%,rgba(255,255,255,.24) 34%,rgba(255,255,255,.035) 45%,transparent 58%);
    transform:translateX(-74%);
    animation:boaGlassGlint 9s ease-in-out infinite;
  }

  .mobile-nav-reflection {
    z-index:1;
    inset:2px;
    background:linear-gradient(180deg,rgba(255,255,255,.23),rgba(255,255,255,.045) 22%,transparent 48%);
    mask:linear-gradient(#000,transparent 62%);
    -webkit-mask:linear-gradient(#000,transparent 62%);
    opacity:.66;
  }

  .mobile-nav-reflection::before,
  .mobile-nav-reflection::after {
    content:"";
    position:absolute;
    left:4%;
    right:4%;
    height:16px;
    border-radius:50%;
    pointer-events:none;
    filter:blur(1.5px);
  }
  .mobile-nav-reflection::before {
    top:-8px;
    border-bottom:1px solid rgba(255,255,255,.48);
    background:linear-gradient(180deg,rgba(255,255,255,.24),transparent);
  }
  .mobile-nav-reflection::after {
    bottom:-8px;
    border-top:1px solid rgba(72,96,126,.22);
    background:linear-gradient(0deg,rgba(87,152,211,.11),transparent);
    transform:scaleY(-1);
    opacity:.72;
  }

  @keyframes boaGlassGlint {
    0%,74%,100% { transform:translateX(-74%); opacity:.08; }
    86% { transform:translateX(72%); opacity:.58; }
  }

  .mobile-nav-inner {
    position:relative;
    z-index:2;
    width:100%;
    min-height:56px;
    display:flex;
    align-items:stretch;
    justify-content:space-around;
    gap:2px;
    isolation:isolate;
  }

  .mobile-nav-selection {
    position:absolute;
    z-index:0;
    left:0;
    top:2px;
    bottom:2px;
    display:block;
    pointer-events:none;
    border:1px solid color-mix(in srgb,var(--glass-line) 64%,transparent);
    border-radius:25px;
    background:
      radial-gradient(88% 135% at calc(48% + (var(--selection-speed,0) * 10%)) -24%,rgba(255,255,255,.48),transparent 54%),
      linear-gradient(150deg,rgba(255,255,255,.2),rgba(255,255,255,.075) 54%,rgba(19,39,65,.055));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.72),
      inset 0 -1px 0 rgba(40,64,91,.15),
      0 5px 14px color-mix(in srgb,var(--glass-shadow) 32%,transparent);
    backdrop-filter:blur(11px) saturate(170%) brightness(1.07);
    -webkit-backdrop-filter:blur(11px) saturate(170%) brightness(1.07);
    will-change:transform,width;
    contain:layout paint;
    transform:translate3d(0,0,0);
  }

  [data-theme="dark"] .mobile-nav-selection,
  .mobile-nav.glass-over-dark .mobile-nav-selection {
    background:
      radial-gradient(88% 135% at calc(48% + (var(--selection-speed,0) * 10%)) -24%,rgba(255,255,255,.25),transparent 55%),
      linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.055) 56%,rgba(0,0,0,.1));
  }

  .mobile-nav .nav-item,
  [data-theme="dark"] .mobile-nav .nav-item {
    position:relative;
    z-index:1;
    flex:1 1 0;
    width:auto;
    min-width:0;
    min-height:56px;
    padding:6px 2px 5px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:3px;
    border:0;
    border-radius:24px;
    background:transparent;
    box-shadow:none;
    color:var(--glass-muted);
    font-size:7.8px;
    font-weight:680;
    line-height:1;
    letter-spacing:-.01em;
    text-shadow:0 1px 3px color-mix(in srgb,var(--glass-shadow) 62%,transparent);
    transition:color .24s ease,transform .34s cubic-bezier(.22,1,.36,1),opacity .2s ease;
  }

  .mobile-nav .nav-item .icon { width:21px; height:21px; stroke-width:1.85; }
  .mobile-nav .nav-item > svg,
  .mobile-nav .nav-item > span { transition:transform .38s cubic-bezier(.2,1.25,.32,1),opacity .22s ease,color .22s ease; }
  .mobile-nav .nav-item > span { max-width:50px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .mobile-nav .nav-item.active,
  [data-theme="dark"] .mobile-nav .nav-item.active {
    color:var(--glass-fg);
    background:transparent;
    box-shadow:none;
  }

  .mobile-nav .nav-item.active > svg { transform:translateY(-1px) scale(1.09); }
  .mobile-nav .nav-item.active > span { transform:translateY(-.5px); font-weight:780; }
  .mobile-nav .nav-item.active::after { display:none; }
  .mobile-nav .nav-item.more-trigger { color:var(--glass-muted); }
  .mobile-nav .nav-item.more-trigger.active { color:var(--glass-fg); }
  .mobile-nav .nav-item.is-pressing:not(.lens-target) { transform:scale(.94); opacity:.78; }
  .mobile-nav .nav-item:focus-visible { outline:2px solid color-mix(in srgb,#1688ff 72%,white); outline-offset:-3px; }

  /* Transient touch lens: it magnifies the real seven-item track without flooding labels with glow. */
  .mobile-nav-lens {
    position:absolute;
    z-index:8;
    left:var(--lens-x,50%);
    top:50%;
    width:144px;
    height:66px;
    overflow:hidden;
    pointer-events:none;
    opacity:0;
    border-radius:999px;
    background:transparent;
    box-shadow:0 10px 25px rgba(0,10,28,.32),0 0 0 1px rgba(255,255,255,.28);
    transform:translate(-50%,-50%) scale(.76);
    transition:opacity .14s ease,transform .28s cubic-bezier(.2,.88,.22,1.18);
    will-change:left,transform,opacity;
  }

  .mobile-nav-lens::before {
    content:"";
    position:absolute;
    z-index:0;
    inset:0;
    padding:1.5px;
    border-radius:inherit;
    background:conic-gradient(from 215deg,rgba(94,221,255,.36),rgba(255,255,255,.82) 18%,rgba(255,243,188,.32) 39%,rgba(255,255,255,.76) 59%,rgba(221,157,255,.3) 81%,rgba(94,221,255,.36));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
  }

  .mobile-nav-lens::after {
    content:"";
    position:absolute;
    z-index:5;
    inset:2px;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.46);
    border-radius:inherit;
    box-shadow:inset 7px 0 9px -8px rgba(75,220,255,.38),inset -7px 0 9px -8px rgba(224,116,255,.3),inset 0 6px 8px -7px rgba(255,239,175,.34),inset 0 -6px 8px -7px rgba(105,94,255,.22);
  }

  .mobile-nav-lens-window { position:absolute; z-index:1; inset:3px; overflow:hidden; border-radius:inherit; }
  .mobile-nav-lens-backdrop { position:absolute; z-index:0; inset:-5px; border-radius:inherit; background:rgba(245,249,255,.035); backdrop-filter:blur(1.5px) saturate(188%) contrast(108%) brightness(1.025); -webkit-backdrop-filter:blur(1.5px) saturate(188%) contrast(108%) brightness(1.025); transform:scale(1.06); }
  .mobile-nav-lens-track { position:absolute; z-index:2; left:var(--lens-track-left,0); top:50%; width:var(--lens-track-width,100%); display:flex; align-items:center; justify-content:space-around; gap:2px; transform:translateY(-50%) scale(var(--lens-scale,1.18)); transform-origin:left center; color:var(--glass-fg); }
  .mobile-nav-lens-track .nav-item { flex:1 1 0; min-width:0; color:var(--glass-fg); opacity:1!important; transform:none!important; text-shadow:0 1px 2px rgba(0,0,0,.32); }
  .mobile-nav-lens-track .nav-item .icon { width:24px; height:24px; }
  .mobile-nav-lens-refraction { position:absolute; z-index:3; inset:0; border-radius:inherit; background:radial-gradient(ellipse at 50% -8%,rgba(255,255,255,.34),transparent 36%),radial-gradient(ellipse at -7% 50%,rgba(72,218,255,.14),transparent 22%),radial-gradient(ellipse at 107% 50%,rgba(226,102,255,.12),transparent 22%); }
  .mobile-nav-lens-caustic { position:absolute; z-index:4; inset:0; pointer-events:none; border-radius:inherit; background:radial-gradient(ellipse at var(--lens-sheen-x,50%) -14%,rgba(255,255,255,.44),transparent 34%); mix-blend-mode:screen; opacity:.58; }
  .mobile-nav.lens-active .mobile-nav-lens { opacity:1; transform:translate(-50%,-50%) scale(var(--lens-scale-x,1),var(--lens-scale-y,1)) rotate(var(--lens-tilt,0deg)); }
  .mobile-nav .nav-item.lens-target { opacity:.18; transform:scale(.92); }
  [data-theme="dark"] .mobile-nav-lens-track .nav-item,.mobile-nav.glass-over-dark .mobile-nav-lens-track .nav-item { color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.7); }

  .mobile-nav.is-compact {
    min-height:50px;
    padding:3px;
    background:var(--glass-shell-rich);
    transform:translate3d(-50%,3px,0);
  }
  .mobile-nav.is-compact .mobile-nav-inner { min-height:44px; }
  .mobile-nav.is-compact .nav-item { min-height:44px; padding:3px; }
  .mobile-nav.is-compact .nav-item span { display:none; }
  .mobile-nav.is-compact .nav-item .icon { width:22px; height:22px; }
  .mobile-nav.is-compact .mobile-nav-selection { top:2px; bottom:2px; }
  .mobile-nav.is-compact .mobile-nav-lens { width:128px; height:52px; }
}

@media (max-width:899px) and (prefers-reduced-transparency:reduce) {
  .mobile-nav,.mobile-nav.glass-over-dark,.mobile-nav.glass-over-photo { background:#f5f8fc; border-color:#7d8da2; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:0 8px 24px rgba(3,20,49,.22); }
  [data-theme="dark"] .mobile-nav,.mobile-nav.glass-over-dark { --glass-fg:#fff; --glass-muted:#e5eef9; background:#091a31; border-color:#7890ad; }
  .mobile-nav::before,.mobile-nav::after,.mobile-nav-glass-depth,.mobile-nav-reflection,.mobile-nav-lens-backdrop,.mobile-nav-lens-caustic { display:none; }
}

@media (max-width:899px) and (prefers-reduced-motion:reduce) {
  .mobile-nav,.mobile-nav *,.mobile-nav *::before,.mobile-nav *::after { transition:none!important; animation:none!important; }
}

@media (max-width:899px) and (forced-colors:active) {
  .mobile-nav { background:Canvas; color:CanvasText; border:2px solid CanvasText; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .mobile-nav .nav-item,.mobile-nav .nav-item.active { color:CanvasText; background:Canvas; border:1px solid transparent; }
  .mobile-nav .nav-item.active { border-color:Highlight; }
  .mobile-nav-glass-depth,.mobile-nav-reflection,.mobile-nav-lens-backdrop,.mobile-nav-lens-caustic { display:none; }
}

@media (max-width:899px) {
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .mobile-nav { background:rgba(246,249,253,.94); }
    [data-theme="dark"] .mobile-nav,.mobile-nav.glass-over-dark { background:rgba(8,11,17,.94); }
  }

  /* iOS 26/27 Fluid Spring Motion & Scroll-Adaptive Bar */
  @keyframes iosElasticBounce {
    0% { transform: scale(0.88) translateY(1.5px); }
    42% { transform: scale(1.15) translateY(-2.5px); }
    72% { transform: scale(0.96) translateY(0.5px); }
    100% { transform: scale(1.0) translateY(0); }
  }

  .mobile-nav .nav-item.ios-bounce-active > svg,
  .mobile-nav .nav-item.ios-bounce-active > .icon {
    animation: iosElasticBounce 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  }

  .mobile-nav.nav-hidden-scroll {
    transform: translate3d(-50%, calc(100% + 28px), 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease !important;
  }

  .mobile-nav .nav-item:active {
    transform: scale(0.92) !important;
    transition: transform 0.12s ease !important;
  }

  .mobile-nav-selection {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.72),
      inset 0 -1px 0 rgba(40,64,91,.15),
      0 5px 14px color-mix(in srgb,var(--glass-shadow) 32%,transparent),
      0 0 16px rgba(37,99,235,0.2) !important;
  }
}