/* ==========================================
   Configurações Globais
   ========================================== */
html {
    scroll-behavior: smooth;
    /* Rolagem suave para navegação */
}

/* ==========================================
   Animações Keyframes
   ========================================== */
/* Animação de flutuação vertical */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Animação de destaque com zoom suave */
@keyframes highlightSection {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.01);
    }

    100% {
        transform: scale(1);
    }
}

/* ==========================================
   Classes de Animação
   ========================================== */
.animate-float {
    animation: float 6s ease-in-out infinite;
    background-color: rgba(34, 197, 94, 0.123456789);
    /* Verde com transparência */
    border: 1px solid rgba(5, 43, 20, 0.423);
}

.highlight {
    animation: highlightSection 0.5s ease-in-out;
}

/* ==========================================
   Media Queries - Responsividade
   ========================================== */
/* Estilos para os botões de categoria */
.categoria-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 500;
    transition: all 0.2s ease-out;
    background-color: #f3f4f6;
    color: #4b5563;
    border: 2px solid transparent;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    cursor: pointer;
}

.categoria-btn:hover {
    background-color: #22c55e;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(34, 197, 94, 0.35);
}

.categoria-btn.active {
    background-color: #22c55e;
    color: white;
    border-color: #16a34a;
}

.categoria-btn:focus-visible {
    outline: 3px solid #22c55e;
    outline-offset: 2px;
}

/* Animação para os cards de produtos */
.produto-card {
    transition: all 0.25s ease;
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.produto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
}

.produto-card.hidden {
    display: none;
}