/* ── Hamburguesa ── */
  .mobile-nav-toggle {
    display: none;
    font-size: 1.7rem;
    cursor: pointer;
    color: #fff;
    margin-left: 12px;
    transition: color 0.2s;
    z-index: 9997;
  }
  .mobile-nav-toggle:hover { color: #2ecc71; }
 
  /* ── Botón X flotante ── */
  #mobile-close {
    display: none;
    position: fixed;
    top: 18px; right: 22px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    z-index: 10001;
    transition: color 0.2s, transform 0.2s;
  }
  #mobile-close:hover  { color: #ff6b6b; transform: rotate(90deg); }
  #mobile-close.visible { display: block; }
 
  /* ── Menú móvil ── */
  @media (max-width: 991px) {
    .mobile-nav-toggle { display: block; }
 
    #navbar ul {
      display: none;
      flex-direction: column;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100vh;
      background: rgba(10,10,10,0.97);
      backdrop-filter: blur(12px);
      z-index: 9998;
      padding: 80px 32px 32px;
      overflow-y: auto;
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      gap: 0;
    }
 
    #navbar ul.mobile-open {
      display: flex;
      transform: translateX(0);
    }
 
    #navbar ul li { width: 100%; }
 
    #navbar ul li a {
      font-size: 1.1rem;
      padding: 13px 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      display: block;
      color: #ccc;
    }
    #navbar ul li a:hover,
    #navbar ul li a.active { color: #2ecc71; }
 
  }