/* Estilos gerais e de reset */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }


    /* Definição da cor principal como variável CSS */
    :root {
        --cor-principal: #3D2412; /* Exemplo: Cor principal da Sr. Óculos */
        --cor-texto-escuro: #919191;;
        --cor-texto-cinza: #919191;;
        --cor-background-claro: #F2F2F2;
        --cor-fundo-menu: #FFFFFF;
        --cor-borda-clara: #DDDDDD;
    }

    body {
        font-family: 'Poppins', sans-serif; /* Fonte principal */
       
    }

    .cor-principal {
        background-color: var(--cor-principal);
        color: white;
    }

    .FontMenu {
        font-family: 'Poppins', sans-serif;
        font-weight: 500; /* Ou o peso que preferir */
    }

    /* Estilos para o menu lateral (Side Menu) */
    .side-menu {
        position: fixed;
        top: 0;
        left: -100%;
        height: 100%;
        width: 90vw; /* Equivalente a w-84 em Tailwind (aproximado) */
        background-color: var(--cor-fundo-menu);
        z-index: 50;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-lg */
        padding: 1.5rem; /* p-6 */
        overflow-y: auto; /* overflow-y-auto */
        transition: transform 0.3s ease-in-out;
        transform: translateX(-100%);

    }

    .side-menu.active {
        transform: translateX(0%);
        left: 0%;
        transition: transform 0.3s ease-in-out;
    }


    /* Estilos para o logo dentro do menu lateral */
    .side-menu .logo-lateral {
        width: 60px; /* w-15 (aproximado) */
        filter: none; /* filter-none */
    }

    /* Estilos para os ícones de fechar e menu */
    .icon-close, .icon-menu {
        color: var(--cor-texto-cinza); /* text-gray-600 */
        font-size: 1.5rem; /* text-2xl */
    }
    .icon-menu {
        font-size: 2rem; /* text-3xl */
    }

    /* Estilos para os itens do menu lateral */
    .side-menu li, .menu .downMenu li {
        display: flex;
        align-items: center;
        gap: 0.5rem; /* gap-2 */
        cursor: pointer;
    }

    .side-menu li .material-symbols-outlined {
        color: var(--cor-texto-cinza); /* text-gray-600 */
        font-size: 0.875rem; /* text-sm */
    }

    .side-menu li .fi {
        color: var(--cor-principal); /* text-(--COR-PRINCIPAL) */
        font-size: 1.25rem; /* Aproximadamente */
    }

    .side-menu .border-b-gray-200 {
        border-bottom: 1px solid #e2e8f0; /* border-gray-200 */
        padding-bottom: 0.5rem; /* pb-2 */
        margin-bottom: 1rem; /* my-4 */
    }
    .side-menu .border-b-gray-300 {
        border-bottom: 2px solid #d1d5db; /* border-gray-300 */
        margin-top: 1rem; /* my-4 */
        margin-bottom: 1rem; /* my-4 */
    }

    .side-menu ul {
        display: flex;
        flex-direction: column; /* flex-col */
        gap: 1rem; /* gap-4 */
        color: var(--cor---cor-background-clarouro); /* text-gray-800 */
    }

    .side-menu hr {
        border-top: 1px solid #e2e8f0; /* border-gray-200 */
        margin-top: 1.5rem; /* my-6 */
        margin-bottom: 1.5rem; /* my-6 */
    }

    .side-menu .underline {
        text-decoration: underline;
    }

    /* Estilos para o menu principal (Desktop) */
    .menu {
        width: 100%;
    }

    .baseMenu {
        padding: 1rem 2rem; /* p-4 md:p-8 */
        min-height: 60px; /* h-auto md:h-100px */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Menu mobile (visível em telas pequenas) */
    .menu .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0.5rem 1rem; /* p-2 (ajustar conforme necessidade) */
    }

    .menu .mobile-menu-header .logo-branca {
        width: 88px; /* w-22 (aproximado) */
        cursor: pointer;
    }

    /* Menu desktop (visível em telas médias e maiores) */
    .menu .desktop-menu-header {
        display: none; /* Oculto por padrão em mobile */
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .menu .desktop-menu-header .logo-branca {
        width: 88px; /* w-22 (aproximado) */
        cursor: pointer;
    }

    .menu .desktop-menu-header .input-busca-container {
        position: relative;
        width: 100%;
        max-width: 500px; /* max-w-lg */
    }

    .menu .desktop-menu-header .input-busca {
        width: 100%;
        padding: 1rem 3rem 1rem 1rem; /* py-4 pl-4 pr-12 */
        background-color: var(--cor-fundo-menu);
        border-radius: 0.5rem; /* rounded-lg */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); /* shadow-md */
        color: var(--cor---cor-background-clarouro); /* text-gray-900 */
        outline: none;
        border: none;
    }

    .menu .desktop-menu-header .input-busca::placeholder {
        color: #9ca3af; /* placeholder-gray-400 */
        text-transform: capitalize;
    }

    .menu .desktop-menu-header .icon-busca {
        position: absolute;
        right: 1rem; /* right-4 */
        top: 50%;
        transform: translateY(-50%);
        width: 1.25rem; /* w-5 */
        height: 1.25rem; /* h-5 */
        fill: var(--cor-principal); /* text-[#A11D1D] */
    }

    .menu .desktop-menu-header .barra-lateral {
        color: var(--cor---cor-background-clarouro); /* text-gray-800 */
        display: flex;
        align-items: center;
        gap: 1rem; /* gap-4 */
    }

    .menu .desktop-menu-header .barra-lateral .localizacao,
    .menu .desktop-menu-header .barra-lateral .usuario {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
    }

    .menu .desktop-menu-header .barra-lateral .usuario .underline {
        text-decoration: underline;
    }

    /* Menu inferior (visível em desktop) */
    .downMenu {
        background-color: var(--cor-fundo-menu);
        padding: 0.25rem; /* p-1 */
        display: none; /* Oculto por padrão em mobile */
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 0;
    }

    .downMenu ul {
        display: flex;
        gap: 2rem; /* gap-8 */
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .downMenu li {
        display: flex;
        align-items: center;
        gap: 0.5rem; /* gap-2 */
        cursor: pointer;
        font-size: 0.875rem; /* Aproximadamente para FontMenu */
    }

    .downMenu li .fi {
        font-size: 1.25rem; /* Aproximadamente */
    }

    /* Backdropp */
    .backdrop {
        display: none;
        position: fixed;
        inset: 0; /* Equivalente a top: 0; right: 0; bottom: 0; left: 0; */
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 40;
    }

    .backdrop.active {
        display: block;
    }
    img.custom-logo {
        filter: brightness(0) invert(1);
    } 
    /* Media Queries para responsividade */
    @media (min-width: 768px) { /* Equivalente a md: */
        .menu .mobile-menu-header {
            display: none;
        }
        .menu .desktop-menu-header {
            display: flex;
            justify-content: space-evenly;
        }
        .downMenu {
            display: flex; /* Torna o menu inferior visível em desktop */
        }
    }

    /* Adaptações para garantir que os links funcionem */
    .side-menu a, .menu .downMenu a {
        text-decoration: none;
        color: inherit; /* Herda a cor do elemento pai */
    }
    .side-menu a:hover, .menu .downMenu a:hover {
        color: var(--cor-principal); /* Opcional: cor ao passar o mouse */
    }

    /* Estilo para os ícones Flaticon */
    .fi {
        font-style: normal; /* Garante que o ícone seja exibido corretamente */
        font-weight: normal;
        font-family: 'Flaticon'; /* Ou a fonte que o Flaticon usa */
        speak: none;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }