<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 1. RESET E REGRAS GERAIS */
        body { margin: 0; padding: 0; overflow-x: hidden; }
        .mar-navbar, .mar-navbar * {
            box-sizing: border-box !important;
            text-decoration: none !important;
            list-style: none !important;
            border: none !important;
            outline: none !important;
        }
        .mar-navbar {
            background-color: #ffffff !important;
            width: 100% !important;
            position: relative;
            z-index: 99999;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        .mar-container { max-width: 1400px; margin: 0 auto; padding: 0 10px; }

        /* 2. DESKTOP (HORIZONTAL) */
        @media screen and (min-width: 769px) {
            .mar-mobile-header { display: none !important; }
            .mar-menu { display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 !important; padding: 0 !important; }
            .mar-item { position: relative !important; display: flex !important; align-items: center !important; }
            .mar-item:not(:last-child)::after { content: "|" !important; color: #eee !important; font-size: 14px !important; margin: 0 2px !important; }
            .mar-link { padding: 20px 12px !important; color: #555 !important; white-space: nowrap !important; font-weight: 500; font-size: 15px; display: flex !important; align-items: center !important; transition: background 0.2s; }
            .mar-link:hover { background-color: #f2f2f2 !important; color: #333 !important; }
            
            /* Submenu Desktop */
            .mar-submenu { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; background: #ffffff !important; width: max-content !important; box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; padding: 0 !important; z-index: 100000; border: 1px solid #eee !important; }
            .mar-item:hover > .mar-submenu { display: block !important; }
            .mar-item:nth-last-child(-n+3) .mar-submenu { left: auto !important; right: 0 !important; }
            
            /* Divisor sutil entre sub-itens */
            .mar-submenu li { border-bottom: 1px solid #f2f2f2 !important; }
            .mar-submenu li:last-child { border-bottom: none !important; }

            .mar-sublink { display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: 12px 25px !important; color: #555 !important; font-size: 14px; transition: 0.2s; }
            .mar-sublink:hover { background-color: #f9f9f9 !important; color: #000 !important; }
        }

        /* 3. MOBILE */
        @media screen and (max-width: 768px) {
            .mar-mobile-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 12px 0 !important; }
            .mar-brand-text { font-weight: bold; font-size: 18px; color: #333; }
            .mar-hamburger { background: #555 !important; width: 48px !important; height: 42px !important; border-radius: 6px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; cursor: pointer !important; }
            .mar-hamburger span { display: block !important; width: 26px; height: 3px; background: #fff !important; margin: 3px 0 !important; }
            .mar-menu { display: none !important; flex-direction: column !important; width: 100% !important; border-top: 1px solid #eee !important; }
            .mar-menu.active { display: flex !important; }
            .mar-item { width: 100% !important; border-bottom: 1px solid #f2f2f2 !important; }
            .mar-link { padding: 14px 5px !important; color: #555 !important; font-size: 15px !important; display: flex !important; justify-content: flex-start !important; width: 100% !important; }
            
            /* Submenu Mobile */
            .mar-submenu { display: none !important; background: #fcfcfc !important; width: 100% !important; padding: 0 !important; }
            .mar-item.mobile-open > .mar-submenu { display: block !important; }
            
            /* Divisor sutil entre sub-itens no Mobile */
            .mar-submenu li { border-bottom: 1px solid #eee !important; }
            .mar-submenu li:last-child { border-bottom: none !important; }

            .mar-sublink { padding: 12px 15px 12px 40px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; color: #666 !important; font-size: 14px !important; }
        }

        /* 4. BADGE (COLADO AO TEXTO) */
        .mar-badge { 
            background: #f2f2f2 !important; 
            color: #777 !important;         
            font-size: 10px !important;      
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-width: 18px !important;     
            height: 18px !important;        
            border-radius: 2px !important;  
            margin-left: 8px !important;    /* Distância fixa para não encostar na letra */
            font-weight: bold !important;
            vertical-align: middle;
            flex-shrink: 0;
        }

        .mar-sublink:hover .mar-badge {
            background: #e6e6e6 !important;
            color: #333 !important;
        }
        .mar-arrow { font-size: 0.7em; margin-left: 5px; opacity: 0.4; }
    </style>
</head>
<body>

<nav class="mar-navbar">
    <div class="mar-container">
        <div class="mar-mobile-header">
            <div class="mar-brand-text">Menu</div>
            <div class="mar-hamburger" onclick="toggleMenu()">
                <span></span><span></span><span></span>
            </div>
        </div>

        <ul class="mar-menu" id="mainMenu">
            <li class="mar-item"><a href="#" class="mar-link">Inicio</a></li>
            <li class="mar-item">
                <a href="javascript:void(0)" class="mar-link" onclick="toggleSub(this)">
                    Alimentação<span class="mar-arrow">▼</span>
                </a>
                <ul class="mar-submenu">
                    <li><a href="#" class="mar-sublink">Bebidas</a></li>
                    <li><a href="#" class="mar-sublink">Docerias e Confeitarias<span class="mar-badge">1</span></a></li>
                    <li><a href="#" class="mar-sublink">Sorveterias e Açaíterias<span class="mar-badge">2</span></a></li>
                </ul>
            </li>
            <li class="mar-item">
                <a href="javascript:void(0)" class="mar-link" onclick="toggleSub(this)">
                    Animais<span class="mar-arrow">▼</span>
                </a>
                <ul class="mar-submenu">
                    <li><a href="#" class="mar-sublink">Pet Shops<span class="mar-badge">5</span></a></li>
                    <li><a href="#" class="mar-sublink">Clínicas Veterinárias</a></li>
                </ul>
            </li>
            <li class="mar-item"><a href="#" class="mar-link">Comércio</a></li>
        </ul>
    </div>
</nav>

<script>
    function toggleMenu() { document.getElementById('mainMenu').classList.toggle('active'); }
    function toggleSub(el) { if(window.innerWidth <= 768) el.parentElement.classList.toggle('mobile-open'); }
</script>

</body>
</html>