/* =========================================
   GLOBAL RESET & BASE
   ========================================= */
html {
    scroll-behavior: smooth; /* Garante o deslize suave ao clicar no menu */
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================================
   PRELOADER (TELA DE CARREGAMENTO)
   ========================================= */

/* Floco de neve girando lentamente */
@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.animate-spin-slow {
    animation: spin-slow 3s linear infinite;
}

/* Barra de progresso indo e voltando */
@keyframes loading-bar {
    0% { width: 0%; transform: translateX(-100%); }
    50% { width: 100%; transform: translateX(0%); }
    100% { width: 100%; transform: translateX(100%); }
}

.animate-loading-bar {
    animation: loading-bar 1.5s infinite ease-in-out;
}

/* Classe que esconde o preloader (joga ele pra cima) */
.preloader-hidden {
    transform: translateY(-100%);
    pointer-events: none; /* Impede clique enquanto sobe */
}

/* =========================================
   ANIMAÇÕES DE ENTRADA (REVEAL ON SCROLL)
   ========================================= */
.reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-element.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Atraso para elementos secundários (efeito escadinha) */
.delay-200 {
    transition-delay: 0.2s;
}

/* =========================================
   ANIMAÇÕES DE ELEMENTOS (UI)
   ========================================= */

/* Flutuação suave (Botão WhatsApp e Card de Garantia) */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-bounce-slow {
    animation: float 3s ease-in-out infinite;
}

/* Pulso para chamar atenção em botões de conversão */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 174, 239, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(0, 174, 239, 0);
    }
}

.cta-pulse {
    animation: pulse-glow 2s infinite;
}

/* =========================================
   ESTILOS ESPECÍFICOS & UTILITÁRIOS
   ========================================= */

/* Ajuste fino para o degradê do Hero Section */
.hero-gradient {
    background: linear-gradient(135deg, #f3f4f6 0%, #ffffff 100%);
}

/* FAQ: Rotação do ícone quando aberto */
.faq-item button[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.faq-item button[aria-expanded="true"] {
    color: #00AEEF; /* Azul claro da marca quando ativo */
}

/* Menu Mobile: Transição suave de altura */
#mobile-menu {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

#mobile-menu.active {
    max-height: 400px; /* Altura suficiente para os links */
    opacity: 1;
}

/* Ajuste de scroll para não cortar o título por causa do menu fixo */
section {
    scroll-margin-top: 100px;
}

/* Utilitário para esconder scrollbar (usado nos filtros da loja) */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}