/* =========================================================
   Menú de vidrio azul (Uiverse.io · mymiamo).
   Escritorio: pastilla en el encabezado. Celular: barra
   flotante abajo, al alcance del pulgar.
   ========================================================= */
:root { --glass-border: rgba(255, 255, 255, .35); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); }
.top nav.menu {
  position: relative; isolation: isolate;
  flex: 0 1 400px; max-width: 400px;
  backdrop-filter: blur(12px) saturate(180%) contrast(200%);
  -webkit-backdrop-filter: blur(12px) saturate(180%) contrast(200%);
  background: rgba(139, 61, 255, .404);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  padding: 6px; border-radius: 99rem;
  display: flex; justify-content: center; gap: 6px; z-index: 50;
  font-size: inherit;
}
.top nav.menu::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  box-shadow:
    inset 2px 2px 5px -2px rgba(255, 255, 255, .4),
    inset -2px -2px 5px 2px rgba(255, 255, 255, .4),
    inset 0 -2px 0 rgba(255, 255, 255, .2);
}
.top nav.menu a {
  display: flex !important; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0;
  color: rgba(255, 255, 255, .9); text-decoration: none; text-shadow: none;
  padding: 8px 6px; border-radius: 999rem; -webkit-tap-highlight-color: transparent;
  transition: background .18s var(--ease-spring), color .18s var(--ease-spring), transform .18s var(--ease-spring), box-shadow .3s ease-in-out;
}
@media (hover: hover) {
  .top nav.menu a:hover {
    background-color: rgba(255, 255, 255, .3); color: rgba(139, 61, 255, .7);
    box-shadow: inset 2px 2px 5px -2px rgba(255, 255, 255, .4), inset -2px -1px 5px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(255, 255, 255, .2);
    transform: rotate(2.2deg);
  }
}
.top nav.menu a svg { width: 1.3rem; height: 1.3rem; }
.top nav.menu a span { font: 600 .75rem/1 var(--sans); margin-top: 4px; white-space: nowrap; }
.top nav.menu a.active { background: rgba(237, 237, 237, .6); color: rgba(139, 61, 255, .9); }
.top nav.menu a:active { transform: scale(.98); }

/* Celular: barra flotante abajo */
@media (max-width: 760px) {
  .top nav.menu {
    position: fixed; left: 50%; bottom: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    width: calc(100% - 20px); transform: translateX(-50%); max-width: 520px; padding: 8px; gap: 8px;
  }
  .top nav.menu a { padding: 10px 6px; }
  .top nav.menu a svg { width: 1.4rem; height: 1.4rem; }
  .top nav.menu a span { font-size: .72rem; }
  body { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  /* el desenfoque del encabezado atraparía la barra fija; aquí va con fondo sólido */
  .top nav.menu { transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
  .top nav.menu.is-scrolling { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.96); pointer-events: none; }
  .top { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(2, 2, 3, .94); }
}