/* Navegación global de Encantos del Olimpo */
:root{--nav-accent:#00d4ff;--nav-accent-2:#0078ff;--nav-bg:rgba(10,15,26,.92)}
html{scroll-padding-bottom:130px}
body{padding-top:105px!important;padding-bottom:30px!important}
#site-navbar{position:fixed;left:50%;top:18px;bottom:auto;transform:translateX(-50%);width:min(1320px,calc(100% - 28px));z-index:9999;pointer-events:none}
.bottom-nav-shell{position:relative;pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:4px;padding:7px;min-height:74px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:linear-gradient(135deg,rgba(27,31,46,.96),rgba(7,14,28,.96));box-shadow:0 18px 55px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
.bottom-nav-link{appearance:none;border:0;min-width:106px;height:60px;padding:0 14px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;color:rgba(255,255,255,.84);background:transparent;text-decoration:none;font:700 .82rem/1 'Poppins',Arial,sans-serif;cursor:pointer;white-space:nowrap;transition:.2s ease;position:relative}
.bottom-nav-link i{font-size:1.12rem;color:rgba(255,255,255,.8);transition:.2s ease}
.bottom-nav-link:hover{color:#fff;background:linear-gradient(135deg,rgba(0,212,255,.24),rgba(0,112,255,.17));box-shadow:inset 0 0 0 1px rgba(0,212,255,.28),0 6px 18px rgba(0,145,255,.12);transform:translateY(-1px)}
.bottom-nav-link:hover i{color:#28d5ff;transform:scale(1.06)}
.bottom-nav-link.active{color:#fff;background:linear-gradient(135deg,rgba(0,194,255,.30),rgba(0,95,255,.22));box-shadow:inset 0 0 0 1px rgba(30,210,255,.28),0 8px 22px rgba(0,145,255,.14)}
.bottom-nav-link.active i{color:#31d9ff}







.bottom-cart-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--nav-accent);color:#061018;font-size:.64rem;font-weight:900}.bottom-cart-count:empty{display:none}
.bottom-nav-guest{display:flex;align-items:center}.bottom-nav-auth{display:none}.bottom-nav-auth.is-visible{display:flex}.bottom-nav-guest.is-hidden{display:none}



/* En escritorio todas las secciones principales permanecen visibles en la píldora. */
@media(min-width:821px){
  #site-navbar{
    top:18px!important;
    bottom:auto!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
  }
  body{
    padding-top:105px!important;
    padding-bottom:30px!important;
  }
}
@media(max-width:1050px){.bottom-nav-link{min-width:0;flex:1;padding:0 8px;font-size:.74rem}.bottom-nav-link i{font-size:1.02rem}}
@media(max-width:820px){
  html{scroll-padding-bottom:158px}
  body{padding-bottom:160px!important}
  #site-navbar{top:auto;bottom:10px;width:calc(100% - 14px)}
  .bottom-nav-shell{
    min-height:0;
    padding:8px 10px;
    gap:4px;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-rows:repeat(2,48px);
    align-items:center;
    justify-items:stretch;
    border-radius:32px;
  }
  .bottom-nav-link{
    min-width:0;
    width:100%;
    height:44px;
    padding:0;
    margin:0;
    gap:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:18px;
  }
  .bottom-nav-link span{
    display:none;
  }
  .bottom-nav-link i{
    font-size:1.22rem;
    line-height:1;
  }
  /* En móvil solo debe existir un botón de cuenta: invitado O autenticado.
     El estado oculto no puede ocupar una celda del grid. */
  .bottom-nav-guest{
    display:block;
    width:100%;
    height:44px;
    min-width:0;
  }
  .bottom-nav-auth{
    display:none !important;
    width:100%;
    height:44px;
    min-width:0;
  }
  .bottom-nav-guest.is-hidden{display:none !important}
  .bottom-nav-auth.is-visible{display:block !important}
  .bottom-nav-guest .bottom-nav-link,
  .bottom-nav-auth .bottom-nav-link{
    width:100%;
  }
  .bottom-cart-count{
    position:absolute;
    margin:-27px 0 0 22px;
    min-width:17px;
    height:17px;
    padding:0 4px;
    font-size:.6rem;
  }
}
@media(max-width:420px){
  html{scroll-padding-bottom:148px}
  body{padding-bottom:150px!important}
  #site-navbar{top:auto;width:calc(100% - 8px);bottom:7px}
  .bottom-nav-shell{
    padding:7px 8px;
    gap:3px;
    grid-template-rows:repeat(2,45px);
    border-radius:30px;
  }
  .bottom-nav-link,
  .bottom-nav-guest,
  .bottom-nav-auth{height:41px}
  .bottom-nav-link i{font-size:1.15rem}
}

/* LOGO: integrado en la píldora y aislado de los estilos de cada página */
#site-navbar .menu-logo-inside{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 58px!important;
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;
  margin:0!important;
  padding:3px!important;
  box-sizing:border-box!important;
  border-radius:50%!important;
  background:transparent!important;
  position:relative!important;
  overflow:visible!important;
  text-decoration:none!important;
}
#site-navbar .menu-logo-inside img{
  display:block!important;
  position:static!important;
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  max-width:46px!important;
  max-height:46px!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 0 3px rgba(0,190,255,.95)) drop-shadow(0 0 8px rgba(0,190,255,.72)) drop-shadow(0 0 14px rgba(0,120,255,.48))!important;
}
@media(max-width:820px){
  #site-navbar .menu-logo-inside{
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    padding:2px!important;
    border-radius:18px!important;
  }
  #site-navbar .menu-logo-inside img{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    max-width:34px!important;
    max-height:34px!important;
  }
}
@media(max-width:420px){
  #site-navbar .menu-logo-inside{height:41px!important;min-height:41px!important}
  #site-navbar .menu-logo-inside img{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;max-width:32px!important;max-height:32px!important}
}