/* Tizona Apps — menú común a todas las páginas (portafolio y tienda) */
@font-face { font-family: "Space Grotesk"; src: url(/fuentes/space-grotesk.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }

.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 30; border-bottom: 1px solid transparent;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; transition: background .3s, border-color .3s;
}
.cabecera.solida { position: sticky; top: 0; background: #07090F; border-color: rgba(255, 255, 255, .09); }
.cabecera.con-fondo, .cabecera.abierta {
  background: rgba(7, 9, 15, .82); border-color: rgba(255, 255, 255, .09);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.cabecera.solida.con-fondo, .cabecera.solida.abierta { background: #07090F; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cabecera-dentro { max-width: 1160px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; height: 68px; gap: 8px; }
.logo {
  display: flex; align-items: center; gap: 10px; color: #EEF1F7; text-decoration: none;
  font: 600 1.08rem "Space Grotesk", "Inter", system-ui, sans-serif; letter-spacing: -.01em;
}
.logo img { width: 42px; height: 42px; display: block; }
.menu { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.menu a { padding: 8px 13px; border-radius: 999px; color: #98A2B6; font-size: .94rem; text-decoration: none; transition: color .2s, background .2s; }
.menu a:hover { color: #EEF1F7; }
.menu a[aria-current="page"] { color: #EEF1F7; background: rgba(255, 255, 255, .08); }
.abrir-menu { display: none; }

@media (max-width: 760px) {
  .js .abrir-menu {
    display: grid; place-items: center; margin-left: auto; width: 44px; height: 44px; padding: 0; cursor: pointer;
    border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #EEF1F7;
  }
  .abrir-menu svg { width: 22px; height: 22px; }
  .abrir-menu .cerrar, .cabecera.abierta .abrir-menu .hamburguesa { display: none; }
  .cabecera.abierta .abrir-menu .cerrar { display: block; }
  .js .menu {
    display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px 16px 20px; background: #07090F; border-bottom: 1px solid rgba(255, 255, 255, .09);
  }
  .js .cabecera.abierta .menu { display: flex; }
  .js .menu a { padding: 14px 16px; font-size: 1.08rem; border-radius: 14px; }
  html:not(.js) .menu { flex-wrap: wrap; justify-content: flex-end; }
  html:not(.js) .cabecera-dentro { height: auto; min-height: 68px; }
}