/* ==========================================================
      MOBILE MENU & HAMBURGER DRAWER
      ========================================================== */

    .mobile-menu-toggle {
      background: none;
      border: none;
      color: var(--color-text-main);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.5rem;
      border-radius: var(--radius-sm);
      transition: background-color var(--transition-fast);
    }

    .mobile-menu-toggle:hover {
      background-color: var(--color-bg-light);
    }

    /* Ocultar botón en pantallas medianas y grandes */
    @media (min-width: 768px) {
      .mobile-menu-toggle {
        display: none;
      }
    }

    /* Control de iconos (Hamburguesa vs Cruz) */
    .mobile-menu-toggle .icon-close {
      display: none;
    }

    .mobile-menu-toggle.is-active .icon-menu {
      display: none;
    }

    .mobile-menu-toggle.is-active .icon-close {
      display: block;
    }

    /* Menú Desplegable Móvil Flotante */
    .mobile-menu-drawer {
      display: none; /* Oculto por defecto */
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--color-border);
      box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.1);
      padding: 1.25rem 1.5rem 1.75rem 1.5rem;
      animation: slideDownMenu 0.25s ease-out forwards;
    }

    @media (min-width: 768px) {
      .mobile-menu-drawer {
        display: none !important; /* Asegurar que no se muestre en escritorio */
      }
    }

    .mobile-menu-drawer.is-open {
      display: block;
    }

    @keyframes slideDownMenu {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .mobile-nav-links {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .mobile-nav-link {
      font-size: 1rem;
      font-weight: 500;
      color: var(--color-text-main);
      padding: 0.75rem 1rem;
      border-radius: var(--radius-sm);
      transition: all var(--transition-fast);
    }

    .mobile-nav-link:hover {
      background-color: rgba(0, 160, 227, 0.08);
      color: var(--color-primary);
    }

    .mobile-nav-btn {
      margin-top: 0.5rem;
      padding: 0.85rem;
      text-align: center;
    }