body { background-color: #f8fafc; -webkit-tap-highlight-color: transparent; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.glass-nav { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

/* 👉 MÁGICA DA SAFE AREA PARA O HEADER DO PWA (Protege o Cabeçalho) */
.pt-safe { 
    padding-top: calc(10px + env(safe-area-inset-top)) !important; 
}

/* 👉 MÁGICA DA SAFE AREA PARA O MAIN DO PWA (Impede de entrar debaixo do Header) */
.mt-safe {
    margin-top: calc(80px + env(safe-area-inset-top)) !important;
}

.page { display: none; }
.page.active { display: block; animation: fadeIn 0.3s ease-out; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.nav-item.active { color: #10b981; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 100; display: flex; align-items: flex-end; justify-content: center; backdrop-filter: blur(4px); transition: opacity 0.3s; }
.modal-sheet { background: white; width: 100%; max-width: 500px; border-radius: 24px 24px 0 0; padding: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.modal-overlay.open .modal-sheet { transform: translateY(0); }

.carousel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 0.8s ease-in-out; }
.carousel-img.active { opacity: 1; }

.c-dot { width: 8px; height: 8px; border-radius: 99px; background: #cbd5e0; transition: all 0.3s; }
.c-dot.active { background: #10b981; width: 24px; }
.pack-btn.active { border-color: #10b981; background-color: #ecfdf5; }