/* =========================
   MOBILE OVERRIDES - SOLO MENÚ
   No toca secciones, cards, hero, etc.
   ========================= */

@media (max-width: 920px){

  /* Topbar siempre arriba */
  .topbar{
    position: sticky !important;
    top: 0 !important;
    z-index: 999999 !important;
  }

  /* Botón visible y clickeable */
  .nav-toggle{
    display: flex !important;
    position: relative !important;
    z-index: 1000000 !important;
    pointer-events: auto !important;
  }

  /* Oculta nav por defecto */
  #mainnav{
    display: none !important;
  }

  /* Cuando abre: panel fijo */
  #mainnav.open{
    display: flex !important;
    position: fixed !important;
    top: 72px !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 999999 !important;

    flex-direction: column !important;
    gap: 8px !important;

    padding: 14px !important;
    border-radius: 16px !important;
    background: rgba(12,12,16,.96) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(0,0,0,.55);

    max-height: calc(100vh - 90px) !important;
    overflow: auto !important;
  }

  /* Links en vertical */
  #mainnav.open .navlink{
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    padding: 12px 14px !important;
  }

  /* overlay opcional (si usas tu JS con nav-open) */
  .nav-overlay{ display:none; }
  body.nav-open .nav-overlay{
    display:block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 999998;
  }
  body.nav-open{ overflow:hidden; }
}
@media (max-width: 920px){

  /* si el overlay aparece pero no ves menú, es por transform/opacity/visibility heredados */
  body.nav-open #mainnav.open{
    display: flex !important;

    position: fixed !important;
    top: 72px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;

    /* mata cualquier animación rara previa */
    transform: none !important;
    translate: none !important;
    opacity: 1 !important;
    visibility: visible !important;

    z-index: 1000000 !important;
    pointer-events: auto !important;

    flex-direction: column !important;
    gap: 8px !important;

    padding: 14px !important;
    border-radius: 16px !important;
    background: rgba(12,12,16,.96) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(0,0,0,.55);

    max-height: calc(100vh - 90px) !important;
    overflow: auto !important;
  }

  /* por si tu .nav trae width/height 0 */
  body.nav-open #mainnav.open{
    width: auto !important;
    height: auto !important;
  }
}