/* * AETHER CUSTOM STYLES 
    * Animações e Efeitos de Vidro
    */
body {
    background-color: #f8fafc; /* Slate 50 - Branco gelo */
    color: #1e293b;
    overflow-x: hidden;
}

/* Glassmorphism Classes - HEADER INTELIGENTE */
.glass-panel {
    /* MOBILE (Padrão): 
       "Mais escuro" = Um tom off-white (Slate-100) e quase 100% opaco.
       Isso evita o ofuscamento e melhora a leitura no celular.
    */
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Separação extra sutil no mobile */
}

/* DESKTOP (Telas maiores que 768px) */
@media (min-width: 768px) {
    .glass-panel {
        /* DESKTOP: 
           "Mais transparente" = Branco puro com apenas 50% de opacidade.
           Fica mais leve e sofisticado.
        */
        background: rgba(255, 255, 255, 0.70); 
        border: 1px solid rgba(255, 255, 255, 0.3); /* Borda mais suave */
        border-bottom: none;
    }
}

.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(226, 232, 240, 0.6);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, box-shadow;
}

.glass-card:hover {
    transform: translateY(-8px) scale(1.02); 
    box-shadow: 0 25px 50px rgba(32, 163, 90, 0.15); /* Sombra Verde Suave */
    border-color: rgba(32, 163, 90, 0.3); /* Borda Verde */
}

/* Filtros de Categoria */
.filter-btn {
    transition: all 0.3s ease;
}
.filter-btn.active {
    background-color: #20A35A; /* quantica-main */
    color: white;
    border-color: #20A35A;
    box-shadow: 0 0 15px rgba(32, 163, 90, 0.4); /* Glow Verde */
}

/* MODAL DE PRODUTO */
#product-modal {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
#product-modal.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
#product-modal:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
#product-modal .modal-content {
    transform: scale(0.95) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#product-modal:not(.hidden) .modal-content {
    transform: scale(1) translateY(0);
}

/* Animações de Entrada */
@keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.animate-enter {
    animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Carrossel Customizado */
.scrolling-wrapper {
    scroll-behavior: smooth;
    /* Garante que o padding não quebre o layout no mobile */
    scroll-padding-left: 1rem; 
    scroll-padding-right: 1rem;
}
.scrolling-wrapper::-webkit-scrollbar {
    display: none;
}

/* Carrossel Customizado & Scrollbar Hide */
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* --- FIX DO MENU MOBILE (AETHER UPDATE) --- */
#mobile-menu {
    /* Aqui está a mágica: 
       Mudei de 0.95 para 0.98 (quase 100% sólido).
       Isso bloqueia o fundo, mas mantém um brilho sutil.
    */
    background: rgba(255, 255, 255, 0.98) !important; 
    
    /* Aumentei o desfoque para garantir que nada fique legível atrás */
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    
    /* Uma sombra mais forte para destacar o menu do resto do site */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}